@agentunion/kite 1.4.0 → 1.6.0

package/extensions/services/kite_console/static/js/evol-app.js.backup

@@ -0,0 +1,2777 @@
+// Evol App - Main Application Logic
+
+class EvolApp {
+  constructor() {
+    // 优先从 Cookie 恢复 kiteToken（防止 Ctrl+F5 清除 localStorage）
+    this.kiteToken = this._getKiteToken();
+    this.userInfo = null;
+    this.kernelClient = null; // 使用 kernelClient 替代 ws
+    this.currentPage = sessionStorage.getItem('currentPage') || 'account'; // 从 sessionStorage 恢复当前页面
+    this.deviceInfo = this._getDeviceInfo();
+    this.statsRefreshTimer = null;
+    this.moduleActionPending = new Map(); // 模块操作防抖
+    this.moduleStateChangePending = new Map(); // 模块状态变更防抖 {moduleName: {newState, timestamp}}
+    this.currentModuleName = null; // 当前查看的模块名
+
+    // 模块列表自动刷新
+    this.lastModuleListUpdate = 0;
+    this.moduleListRefreshTimer = null;
+    this.refreshDebounceTimer = null;
+    this.MODULE_LIST_REFRESH_INTERVAL = 300000; // 5分钟
+    this.REFRESH_DEBOUNCE_DELAY = 300; // 300ms 防抖
+
+    // 秒定时器 - 负责所有需要每秒更新的内容
+    this.secondTimer = null;
+    this.modulesData = []; // 缓存模块数据用于秒更新
+
+    // Ping 数据更新定时器（独立于模块列表刷新）
+    this.pingRefreshTimer = null;
+    this.lastPingData = {}; // 缓存最后一次的 ping 数据
+
+    // 事件日志相关
+    this.eventLogs = []; // 存储所有事件日志 {timestamp, module, event, data, raw}
+    this.consoleExpanded = false; // 控制台是否展开
+    this.eventSubscribed = false; // 是否已订阅全部事件
+    this.knownModules = new Set(); // 已知的模块列表
+    this.knownEvents = new Set(); // 已知的事件类型
+
+    // WebSocket 流量统计
+    this.reconnectCount = 0; // 重连次数
+    this.trafficStats = {
+      rxTotal: 0,      // 总接收字节数
+      txTotal: 0,      // 总发送字节数
+      rxRate: 0,       // 接收速率 (B/s)
+      txRate: 0,       // 发送速率 (B/s)
+      lastRxBytes: 0,  // 上次接收字节数
+      lastTxBytes: 0,  // 上次发送字节数
+      lastUpdateTime: Date.now(),
+      history: []      // 历史数据 [{time, rxRate, txRate}]
+    };
+    this.trafficUpdateTimer = null;
+    this.trafficChartCtx = null;
+
+    // 账户信息缓存（5秒有效期，持久化到 localStorage）
+    this.CACHE_DURATION = 5000; // 5秒
+    this._loadUserInfoCache();
+  }
+
+  _loadUserInfoCache() {
+    try {
+      const raw = localStorage.getItem('evolUserInfoCache');
+      if (raw) {
+        const cached = JSON.parse(raw);
+        this.userInfoCache = cached.data;
+        this.userInfoCacheTime = cached.time;
+      } else {
+        this.userInfoCache = null;
+        this.userInfoCacheTime = 0;
+      }
+    } catch {
+      this.userInfoCache = null;
+      this.userInfoCacheTime = 0;
+    }
+  }
+
+  _saveUserInfoCache(data) {
+    this.userInfoCache = data;
+    this.userInfoCacheTime = Date.now();
+    localStorage.setItem('evolUserInfoCache', JSON.stringify({
+      data: data,
+      time: this.userInfoCacheTime
+    }));
+  }
+
+  _getKiteToken() {
+    // 1. 先从 localStorage 读取
+    let token = localStorage.getItem('kiteToken');
+    if (token) return token;
+
+    // 2. 如果 localStorage 没有，尝试从 Cookie 恢复
+    token = this._getCookie('kiteToken');
+    if (token) {
+      // 恢复到 localStorage
+      localStorage.setItem('kiteToken', token);
+      console.log('Restored kiteToken from cookie');
+      return token;
+    }
+
+    return null;
+  }
+
+  _getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  }
+
+  _setCookie(name, value, days = 30) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Strict`;
+  }
+
+  _saveKiteToken(token) {
+    // 同时保存到 localStorage 和 Cookie
+    localStorage.setItem('kiteToken', token);
+    this._setCookie('kiteToken', token, 30);
+  }
+
+  _clearKiteToken() {
+    // 同时清除 localStorage 和 Cookie
+    localStorage.removeItem('kiteToken');
+    this._setCookie('kiteToken', '', -1);
+  }
+
+  _getDeviceInfo() {
+    // 生成或获取持久化的设备 ID
+    let deviceId = localStorage.getItem('deviceId');
+    if (!deviceId) {
+      deviceId = 'device_' + this._randomString(16) + '_' + Date.now();
+      localStorage.setItem('deviceId', deviceId);
+    }
+
+    // 检测设备类型和名称
+    const ua = navigator.userAgent;
+    let deviceType = 'Desktop';
+    let osName = 'Unknown OS';
+
+    if (/Android/i.test(ua)) {
+      deviceType = 'Mobile';
+      osName = 'Android';
+    } else if (/iPhone|iPad|iPod/i.test(ua)) {
+      deviceType = 'Mobile';
+      osName = 'iOS';
+    } else if (/Windows/i.test(ua)) {
+      osName = 'Windows';
+    } else if (/Mac/i.test(ua)) {
+      osName = 'macOS';
+    } else if (/Linux/i.test(ua)) {
+      osName = 'Linux';
+    }
+
+    let browserName = 'Unknown Browser';
+    if (/Chrome/i.test(ua) && !/Edge/i.test(ua)) {
+      browserName = 'Chrome';
+    } else if (/Firefox/i.test(ua)) {
+      browserName = 'Firefox';
+    } else if (/Safari/i.test(ua) && !/Chrome/i.test(ua)) {
+      browserName = 'Safari';
+    } else if (/Edge/i.test(ua)) {
+      browserName = 'Edge';
+    }
+
+    return {
+      deviceId: deviceId,
+      deviceName: `${browserName} on ${osName}`,
+      deviceType: deviceType,
+      browser: browserName,
+      os: osName,
+      userAgent: ua
+    };
+  }
+
+  _randomString(length) {
+    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  }
+
+  async init() {
+    if (this.kiteToken) {
+      // 有 kiteToken，立即显示主界面和占位信息
+      this.showMainApp();
+      this.showUserInfoPlaceholder();
+
+      // 异步加载 Evol 账户信息（不阻塞，失败不影响主界面）
+      this.loadUserInfo().catch(err => {
+        console.warn('Failed to load Evol user info:', err);
+        // evolToken 失效，显示提示但不影响 Kite 功能
+        this.showEvolTokenWarning();
+      });
+    } else {
+      // 没有 kiteToken，显示登录页
+      this.showLoginPage();
+    }
+  }
+
+  showUserInfoPlaceholder() {
+    // 立即显示占位信息，避免延迟
+    const loginBtn = document.getElementById('login-btn');
+    const userInfoArea = document.getElementById('user-info-area');
+
+    if (loginBtn) loginBtn.classList.add('hidden');
+    if (userInfoArea) {
+      userInfoArea.classList.remove('hidden');
+      userInfoArea.style.display = 'flex';
+
+      // 显示加载中占位
+      const userNameEl = userInfoArea.querySelector('.user-name');
+      const creditsEl = userInfoArea.querySelector('.user-credits');
+      if (userNameEl) userNameEl.textContent = '加载中...';
+      if (creditsEl) creditsEl.textContent = '';
+    }
+  }
+
+  showLoginPage() {
+    // 移除 has-token 类，触发 CSS 切换
+    document.documentElement.classList.remove('has-token');
+    document.getElementById('login-page').classList.remove('hidden');
+    document.getElementById('main-app').classList.add('hidden');
+  }
+
+  showMainApp() {
+    // 添加 has-token 类，触发 CSS 切换
+    document.documentElement.classList.add('has-token');
+    document.getElementById('login-page').classList.add('hidden');
+    document.getElementById('main-app').classList.remove('hidden');
+    this.initMainApp();
+  }
+
+  async loadUserInfo() {
+    // 检查缓存是否有效（5秒内）
+    const now = Date.now();
+    const cacheAge = now - this.userInfoCacheTime;
+
+    if (this.userInfoCache && cacheAge < this.CACHE_DURATION) {
+      // 缓存有效，直接使用
+      this.userInfo = this.userInfoCache;
+      this.updateUserInfoDisplay();
+      this.loadAccountInfo();
+      return;
+    }
+
+    // 如果有缓存数据，先渲染缓存（即使过期）
+    if (this.userInfoCache) {
+      this.userInfo = this.userInfoCache;
+      this.updateUserInfoDisplay();
+      this.loadAccountInfo();
+    }
+
+    // 等待 kernelClient 连接成功
+    if (!this.kernelClient || !this.kernelClient.connected) {
+      console.log('[Evol] Waiting for kernelClient to connect...');
+      // 等待最多 5 秒
+      const maxWait = 5000;
+      const startTime = Date.now();
+      while ((!this.kernelClient || !this.kernelClient.authenticated) && (Date.now() - startTime < maxWait)) {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+      if (!this.kernelClient || !this.kernelClient.authenticated) {
+        console.error('[Evol] kernelClient not authenticated after 5s');
+        throw new Error('KernelClient not authenticated');
+      }
+    }
+
+    // 然后异步更新数据
+    try {
+      const data = await this.kernelClient.call('evol.get_user_info', {
+        kiteToken: this.kiteToken
+      });
+
+      if (data.success) {
+        this.userInfo = data.data;
+        this._saveUserInfoCache(data.data);
+        this.updateUserInfoDisplay();
+        // 更新账户信息页面
+        this.loadAccountInfo();
+      } else if (data.code === 'INVALID_KITE_TOKEN') {
+        // kiteToken 失效，需要重新配对
+        console.warn('kiteToken invalid, need re-pairing');
+        this._clearKiteToken();
+        this.kiteToken = null;
+        this.showLoginPage();
+        throw new Error('KITE_TOKEN_INVALID');
+      } else {
+        // evolToken 失效或其他错误，不影响 Kite 功能
+        throw new Error(data.message || 'EVOL_TOKEN_INVALID');
+      }
+    } catch (err) {
+      console.error('Load user info failed:', err);
+      throw err;
+    }
+  }
+
+  updateUserInfoDisplay() {
+    // 更新右上角用户信息显示
+    if (this.userInfo) {
+      const userInfo = this.userInfo.userInfo || this.userInfo;
+      const accountInfo = this.userInfo.accountInfo || {};
+
+      // 显示用户信息区域
+      const loginBtn = document.getElementById('login-btn');
+      const userInfoArea = document.getElementById('user-info-area');
+
+      if (loginBtn) loginBtn.classList.add('hidden');
+      if (userInfoArea) {
+        userInfoArea.classList.remove('hidden');
+        userInfoArea.style.display = 'flex';
+
+        // 更新用户名
+        const userNameEl = userInfoArea.querySelector('.user-name');
+        if (userNameEl) {
+          userNameEl.textContent = userInfo.nickName || userInfo.userName || '未知用户';
+        }
+
+        // 更新积分
+        const creditsEl = userInfoArea.querySelector('.user-credits');
+        if (creditsEl) {
+          creditsEl.textContent = `积分: ${accountInfo.credits || 0}`;
+        }
+      }
+    }
+  }
+
+  showEvolTokenWarning() {
+    // 右上角显示 Evol 未登录状态
+    const loginBtn = document.getElementById('login-btn');
+    const userInfoArea = document.getElementById('user-info-area');
+
+    if (loginBtn) {
+      loginBtn.classList.remove('hidden');
+      loginBtn.style.display = 'inline';
+      loginBtn.textContent = '⚠️ 未登录 Evol';
+      loginBtn.style.color = '#ff9800';
+      loginBtn.style.fontWeight = '500';
+    }
+    if (userInfoArea) {
+      userInfoArea.classList.add('hidden');
+      userInfoArea.style.display = 'none';
+    }
+
+    // 绑定右上角登录按钮点击事件
+    if (loginBtn) {
+      loginBtn.onclick = (e) => {
+        e.preventDefault();
+        this.logout();
+      };
+    }
+  }
+
+  async sendSMS(phone) {
+    const res = await fetch('/api/send_sms', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ phone })
+    });
+    return await res.json();
+  }
+
+  async login(phone, code) {
+    const res = await fetch('/api/verify_sms', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ phone, code, deviceInfo: this.deviceInfo })
+    });
+    const data = await res.json();
+
+    if (data.success) {
+      this.kiteToken = data.kiteToken;
+      this.userInfo = data.data;
+      this._saveKiteToken(this.kiteToken);
+      this.showMainApp();
+      // 登录成功后立即更新用户信息显示
+      this.updateUserInfoDisplay();
+      // 更新账户信息页面
+      this.updateAccountPage();
+    }
+
+    return data;
+  }
+
+  async logout() {
+    try {
+      await this.kernelClient.call('evol.logout', {
+        kiteToken: this.kiteToken
+      });
+    } catch (err) {}
+
+    this._clearKiteToken();
+    location.reload();
+  }
+
+  initMainApp() {
+    // 初始化 Kernel 客户端和导航
+    this.initKernelClient();
+    this.loadAccountInfo();
+    this.setupNavigation();
+    this.restorePageState(); // 恢复页面状态
+
+    // 监听页面可见性变化，页面重新可见时尝试重连
+    document.addEventListener('visibilitychange', () => {
+      if (!document.hidden && this.kernelClient && !this.kernelClient.connected) {
+        console.log('[Evol] Page visible again, retrying connection');
+        this.initKernelClient();
+      }
+    });
+  }
+
+  updateConnectionStatus(status, message) {
+    const indicator = document.getElementById('ws-indicator');
+    const reconnectCount = document.getElementById('ws-reconnect-count');
+    const trafficEl = document.getElementById('ws-traffic');
+    if (!indicator) return;
+
+    switch (status) {
+      case 'connected':
+        indicator.innerHTML = '● Kite 已连接';
+        indicator.style.color = '#27ae60';
+        // 显示重连次数和流量统计
+        if (reconnectCount) {
+          reconnectCount.style.display = this.reconnectCount > 0 ? 'inline' : 'none';
+          reconnectCount.textContent = `重连: ${this.reconnectCount}`;
+        }
+        if (trafficEl) {
+          trafficEl.style.display = 'inline';
+        }
+        // 启动流量统计更新
+        this.startTrafficMonitoring();
+        break;
+      case 'disconnected':
+        indicator.innerHTML = '○ 未连接';
+        indicator.style.color = '#e74c3c';
+        // 隐藏流量统计
+        if (trafficEl) trafficEl.style.display = 'none';
+        // 停止流量统计更新
+        this.stopTrafficMonitoring();
+        break;
+      case 'reconnecting':
+        indicator.innerHTML = `⟳ ${message || '正在重连...'}`;
+        indicator.style.color = '#f39c12';
+        // 增加重连次数
+        this.reconnectCount++;
+        if (reconnectCount) {
+          reconnectCount.style.display = 'inline';
+          reconnectCount.textContent = `重连: ${this.reconnectCount}`;
+        }
+        break;
+      case 'error':
+        indicator.innerHTML = `✗ ${message || '连接失败'}`;
+        indicator.style.color = '#e74c3c';
+        break;
+      default:
+        indicator.innerHTML = '○ 未知状态';
+        indicator.style.color = '#95a5a6';
+    }
+  }
+
+  async initKernelClient() {
+    // 如果已经有客户端且正在连接或已连接，直接返回
+    if (this.kernelClient) {
+      if (this.kernelClient.connected) {
+        console.log('[Evol] KernelClient already connected');
+        return;
+      }
+      // 如果正在重连，等待重连完成
+      if (this.kernelClient.reconnectTimer) {
+        console.log('[Evol] KernelClient reconnecting, waiting...');
+        return;
+      }
+    }
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+
+    // 如果已有客户端，先断开
+    if (this.kernelClient) {
+      try {
+        this.kernelClient.disconnect();
+      } catch (err) {
+        console.warn('[Evol] Failed to disconnect old client:', err);
+      }
+    }
+
+    this.kernelClient = new KernelClient(`${proto}//${location.host}/ws/relay`);
+
+    // 监听连接状态变化
+    this.kernelClient.onConnectionChange = (status, message) => {
+      console.log(`[Evol] Connection status: ${status} - ${message}`);
+      this.updateConnectionStatus(status, message);
+    };
+
+    // 监听认证成功（用于重新订阅事件）
+    this.kernelClient.onAuthenticated = async (reconnected) => {
+      console.log(`[Evol] Authenticated (reconnected: ${reconnected})`);
+
+      // 订阅事件
+      try {
+        await this.kernelClient.subscribe([
+          'module.starting',
+          'module.started',
+          'module.ready',
+          'module.stopped',
+          'module.exiting',
+          'module.shutdown'
+        ]);
+        console.log('[Evol] Events subscribed');
+      } catch (err) {
+        console.error('[Evol] Failed to subscribe events:', err);
+      }
+
+      // 如果是重连，刷新当前页面数据
+      if (reconnected && this.currentPage === 'modules') {
+        console.log('[Evol] Refreshing modules after reconnection');
+        this.loadModules();
+      }
+    };
+
+    try {
+      console.log('[Evol] Connecting to Kernel via /ws/relay');
+      this.updateConnectionStatus('reconnecting', '正在连接...');
+
+      // 连接并认证
+      const result = await this.kernelClient.connect();
+      console.log('[Evol] KernelClient connected:', result);
+
+      // 注意：事件订阅已在 onAuthenticated 回调中处理
+
+      // 监听所有模块状态变化事件（只需注册一次）
+      const moduleEvents = [
+        'module.starting',
+        'module.started',
+        'module.ready',
+        'module.stopped',
+        'module.exiting',
+        'module.shutdown'
+      ];
+
+      moduleEvents.forEach(eventName => {
+        this.kernelClient.on(eventName, (data) => {
+          console.log(`[Evol] ${eventName}:`, data.module_id);
+          if (this.currentPage === 'modules') {
+            // 检查是否在列表页
+            const isDetailView = !document.getElementById('module-detail')?.classList.contains('hidden');
+
+            if (isDetailView) {
+              // 在详情页：只更新详情页状态（如果是当前查看的模块）
+              if (this.currentModuleName === data.module_id) {
+                this._updateModuleDetailStatus(data.module_id);
+              }
+            } else {
+              // 在列表页：刷新模块列表
+              this.refreshModuleList();
+            }
+          }
+        });
+      });
+
+      // 更新连接状态
+      this.updateConnectionStatus('connected', 'Kite 已连接');
+
+    } catch (err) {
+      console.error('[Evol] KernelClient connection failed:', err);
+      this.updateConnectionStatus('error', err.message);
+
+      // 如果是 token 无效，跳转到登录页面
+      if (err.message.includes('Invalid') || err.message.includes('expired')) {
+        console.warn('[Evol] Token invalid, redirecting to login');
+        this._clearKiteToken();
+        this.kiteToken = null;
+        this.showLoginPage();
+      }
+    }
+  }
+
+  async callRpc(method, params = {}) {
+    try {
+      // 改用 WebSocket RPC
+      if (!this.kernelClient || !this.kernelClient.connected) {
+        throw new Error('Not connected to Kernel');
+      }
+      // 等待认证完成（最多 5 秒）
+      if (!this.kernelClient.authenticated) {
+        const maxWait = 5000;
+        const startTime = Date.now();
+        while (!this.kernelClient.authenticated && (Date.now() - startTime < maxWait)) {
+          await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        if (!this.kernelClient.authenticated) {
+          throw new Error('Not authenticated after 5s');
+        }
+      }
+      return await this.kernelClient.call(method, params);
+    } catch (err) {
+      console.error(`[Evol] RPC ${method} failed:`, err);
+      throw err;
+    }
+  }
+
+  setupNavigation() {
+    const navItems = document.querySelectorAll('.nav-item');
+    const pages = document.querySelectorAll('.page');
+
+    navItems.forEach(item => {
+      item.addEventListener('click', async () => {
+        const pageName = item.dataset.page;
+
+        // 离开模块页面时清除定时器
+        if (this.currentPage === 'modules' && pageName !== 'modules') {
+          if (this.moduleListRefreshTimer) {
+            clearTimeout(this.moduleListRefreshTimer);
+            this.moduleListRefreshTimer = null;
+          }
+          if (this.refreshDebounceTimer) {
+            clearTimeout(this.refreshDebounceTimer);
+            this.refreshDebounceTimer = null;
+          }
+          this.stopSecondTimer(); // 停止秒定时器
+          this.stopPingRefresh(); // 停止 ping 刷新定时器
+        }
+
+        this.currentPage = pageName;
+        sessionStorage.setItem('currentPage', pageName); // 保存当前页面到 sessionStorage
+
+        navItems.forEach(i => i.classList.remove('active'));
+        pages.forEach(p => p.classList.remove('active'));
+
+        item.classList.add('active');
+        document.getElementById('page-' + pageName).classList.add('active');
+
+        // 检查连接状态，如果未连接则尝试重连
+        if (!this.kernelClient || !this.kernelClient.connected) {
+          console.log('[Evol] Not connected, attempting to reconnect...');
+          try {
+            await this.initKernelClient();
+          } catch (err) {
+            console.error('[Evol] Reconnect failed:', err);
+            // 继续执行，让页面加载逻辑自己处理错误
+          }
+        }
+
+        if (pageName === 'modules') this.refreshModuleList();
+        else if (pageName === 'credits') this.loadCreditsStats();
+        else if (pageName === 'tokens') this.loadTokens();
+      });
+    });
+
+    document.getElementById('sidebar-toggle').addEventListener('click', () => {
+      document.getElementById('sidebar').classList.toggle('collapsed');
+    });
+  }
+
+  restorePageState() {
+    // 恢复页面状态
+    const savedPage = this.currentPage; // 已在 constructor 中从 sessionStorage 恢复
+    console.log(`[Evol] Restoring page state: ${savedPage}`);
+
+    // 更新导航和页面显示
+    const navItems = document.querySelectorAll('.nav-item');
+    const pages = document.querySelectorAll('.page');
+
+    navItems.forEach(item => {
+      if (item.dataset.page === savedPage) {
+        item.classList.add('active');
+      } else {
+        item.classList.remove('active');
+      }
+    });
+
+    pages.forEach(page => {
+      const pageId = page.id.replace('page-', '');
+      if (pageId === savedPage) {
+        page.classList.add('active');
+      } else {
+        page.classList.remove('active');
+      }
+    });
+
+    // 加载对应页面的数据
+    if (savedPage === 'modules') {
+      this.refreshModuleList();
+    } else if (savedPage === 'credits') {
+      this.loadCreditsStats();
+    } else if (savedPage === 'tokens') {
+      this.loadTokens();
+    }
+  }
+
+  loadAccountInfo() {
+    // 如果 userInfo 还没加载，显示加载中
+    if (!this.userInfo) {
+      const accountInfoEl = document.getElementById('account-info');
+      if (accountInfoEl) {
+        accountInfoEl.innerHTML = '<div style="padding:20px;text-align:center;color:#999;">加载中...</div>';
+      }
+      return;
+    }
+
+    const ui = this.userInfo.userInfo || {};
+    const ai = this.userInfo.accountInfo || {};
+    const ti = this.userInfo.teamInfo || {};
+    const gi = this.userInfo.gatewayInfo || {};
+
+    // 格式化 VIP 过期时间
+    const formatDate = (dateStr) => {
+      if (!dateStr) return '-';
+      const date = new Date(dateStr);
+      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    };
+
+    // 积分包汇总
+    const pkg = ai.creditsPackageSummary || {};
+    const packageInfo = pkg.totalPackageCount > 0
+      ? `共 ${pkg.totalPackageCount} 个积分包`
+      : '无积分包';
+
+    const html = `
+      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;">
+        <!-- 基本信息 -->
+        <div style="background:#f9f9f9;padding:16px;border-radius:6px;">
+          <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:600;color:#666;">基本信息</h3>
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <tr><td style="padding:8px 0;color:#666;">手机号</td><td style="padding:8px 0;font-weight:500;">${ui.phone || '-'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">昵称</td><td style="padding:8px 0;font-weight:500;">${ui.nickName || '-'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">用户ID</td><td style="padding:8px 0;font-weight:500;">${ui.userId || '-'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">AID</td><td style="padding:8px 0;font-family:monospace;font-size:11px;">${ui.aid || '-'}</td></tr>
+          </table>
+        </div>
+
+        <!-- 积分信息 -->
+        <div style="background:#f9f9f9;padding:16px;border-radius:6px;">
+          <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:600;color:#666;">积分信息</h3>
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <tr><td style="padding:8px 0;color:#666;">当前积分</td><td style="padding:8px 0;font-weight:600;color:#27ae60;font-size:16px;">${ai.credits || 0}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">积分上限</td><td style="padding:8px 0;font-weight:500;">${ai.creditsLimit || 0}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">恢复速率</td><td style="padding:8px 0;font-weight:500;">${ai.creditsRecoveryRate || 0} / 小时</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">积分包</td><td style="padding:8px 0;font-weight:500;">${packageInfo}</td></tr>
+          </table>
+        </div>
+
+        <!-- VIP 信息 -->
+        <div style="background:#f9f9f9;padding:16px;border-radius:6px;">
+          <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:600;color:#666;">VIP 信息</h3>
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <tr><td style="padding:8px 0;color:#666;">VIP 类型</td><td style="padding:8px 0;font-weight:500;">${ai.vipTypeName || 'Unknown'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">过期时间</td><td style="padding:8px 0;font-weight:500;">${formatDate(ai.vipExpireTime)}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">剩余天数</td><td style="padding:8px 0;font-weight:600;color:#ff9800;">${ai.vipRemainingDays || 0} 天</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">账户余额</td><td style="padding:8px 0;font-weight:500;">¥ ${(ai.balance || 0).toFixed(2)}</td></tr>
+          </table>
+        </div>
+
+        <!-- 团队信息 -->
+        <div style="background:#f9f9f9;padding:16px;border-radius:6px;">
+          <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:600;color:#666;">团队信息</h3>
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <tr><td style="padding:8px 0;color:#666;">当前团队</td><td style="padding:8px 0;font-weight:500;">${ti.currentTeamName || '-'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">团队角色</td><td style="padding:8px 0;font-weight:500;">${ti.currentTeamRole === '1' ? '管理员' : '成员'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">团队数量</td><td style="padding:8px 0;font-weight:500;">${(ti.teams || []).length} 个</td></tr>
+          </table>
+        </div>
+
+        <!-- 网关信息 -->
+        <div style="background:#f9f9f9;padding:16px;border-radius:6px;grid-column:1/-1;">
+          <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:600;color:#666;">网关信息</h3>
+          <table style="width:100%;border-collapse:collapse;font-size:13px;">
+            <tr><td style="padding:8px 0;color:#666;width:120px;">网关名称</td><td style="padding:8px 0;font-weight:500;">${gi.gatewayName || '-'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">模型地址</td><td style="padding:8px 0;font-family:monospace;font-size:11px;">${gi.modelBaseUrl || '-'}</td></tr>
+            <tr><td style="padding:8px 0;color:#666;">API Key</td><td style="padding:8px 0;"><code style="background:#fff;padding:4px 8px;border-radius:4px;font-size:11px;">${gi.apiKey || '未获取'}</code></td></tr>
+          </table>
+        </div>
+      </div>
+    `;
+    document.getElementById('account-info').innerHTML = html;
+  }
+
+  async loadCreditsStats() {
+    try {
+      const data = await this.kernelClient.call('evol.get_credits_stats', {
+        kiteToken: this.kiteToken,
+        period: 'day'
+      });
+
+      if (data.success) {
+        const html = '<h4>今日积分消耗</h4><p style="font-size:24px;font-weight:600;color:#667eea;">' +
+          (data.data?.total || 0) + ' 积分</p>';
+        document.getElementById('credits-stats').innerHTML = html;
+      } else {
+        document.getElementById('credits-stats').innerHTML = '<p style="color:#e74c3c;">' + data.msg + '</p>';
+      }
+    } catch (err) {
+      document.getElementById('credits-stats').innerHTML = '<p style="color:#e74c3c;">加载失败</p>';
+    }
+  }
+
+  refreshModuleList() {
+    // 检查是否在列表页（详情页隐藏 = 在列表页）
+    const isListView = document.getElementById('module-detail')?.classList.contains('hidden');
+    if (!isListView) {
+      console.log('[Evol] In detail view, skipping list refresh');
+      return;
+    }
+
+    // 防抖：300ms 内多次调用只执行最后一次
+    if (this.refreshDebounceTimer) {
+      clearTimeout(this.refreshDebounceTimer);
+    }
+
+    this.refreshDebounceTimer = setTimeout(() => {
+      // 再次检查是否还在列表页
+      const stillInListView = document.getElementById('module-detail')?.classList.contains('hidden');
+      if (!stillInListView) {
+        console.log('[Evol] Switched to detail view during debounce, skipping list refresh');
+        return;
+      }
+
+      // 记录更新时间
+      this.lastModuleListUpdate = Date.now();
+
+      // 重置 1 分钟定时器
+      if (this.moduleListRefreshTimer) {
+        clearTimeout(this.moduleListRefreshTimer);
+      }
+
+      // 设置新的定时器（1分钟后刷新）
+      this.moduleListRefreshTimer = setTimeout(() => {
+        if (this.currentPage === 'modules') {
+          // 检查是否在列表页
+          const isListView = document.getElementById('module-detail')?.classList.contains('hidden');
+          if (isListView) {
+            console.log('[Evol] Auto-refreshing module list (1 minute timeout)');
+            this.loadModules(false);
+          }
+        }
+      }, this.MODULE_LIST_REFRESH_INTERVAL);
+
+      // 执行刷新（不重置视图）
+      this.loadModules(false);
+    }, this.REFRESH_DEBOUNCE_DELAY);
+  }
+
+  async loadModules(resetView = true) {
+    // 检查是否在列表页（详情页隐藏 = 在列表页）
+    const isListView = document.getElementById('module-detail')?.classList.contains('hidden');
+
+    // 如果不在列表页且不需要重置视图，直接返回
+    if (!isListView && !resetView) {
+      return;
+    }
+
+    // 只在需要时重置视图（避免在详情页时被强制切回列表页）
+    if (resetView) {
+      document.getElementById('modules-list-header')?.classList.remove('hidden');
+      document.getElementById('modules-table')?.closest('.panel')?.classList.remove('hidden');
+      document.getElementById('module-detail')?.classList.add('hidden');
+      document.getElementById('statistics-panel')?.classList.remove('hidden');
+      document.getElementById('registry-test-section')?.classList.remove('hidden');
+      document.getElementById('registry-test-output')?.classList.remove('hidden');
+
+      // Load statistics and start auto-refresh
+      this.loadModuleStats();
+      this.startStatsAutoRefresh();
+    }
+
+    try {
+      // 获取模块列表和运行状态
+      const result = await this.callRpc('launcher.list_modules', {});
+      const modules = result.modules || [];
+
+      // RPC 返回后再次检查是否还在列表页
+      const stillInListView = document.getElementById('module-detail')?.classList.contains('hidden');
+      if (!stillInListView && !resetView) {
+        console.log('[Evol] Switched to detail view during RPC, skipping list update');
+        return;
+      }
+
+      const tbody = document.getElementById('modules-tbody');
+      if (modules.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="12" class="text-muted" style="text-align:center;padding:40px;">暂无模块</td></tr>';
+        return;
+      }
+
+      let html = '';
+      modules.forEach(mod => {
+        // 状态圆点
+        const stateClass = mod.state === 'enabled' ? 'enabled' : mod.state === 'manual' ? 'manual' : 'disabled';
+
+        // 运行状态判断
+        const running = mod.actual_state ? mod.actual_state.startsWith('running') : false;
+        const pending = this.moduleActionPending.has(mod.name);
+        const pendingAction = this.moduleActionPending.get(mod.name);
+
+        const runningStatus = pending
+          ? `<span style="color:var(--warning);">${pendingAction === 'start' ? '启动中…' : '停止中…'}</span>`
+          : running
+            ? '<span style="color:var(--gray-400);">运行中</span>'
+            : '<span style="color:var(--gray-400);">已停止</span>';
+
+        // 默认状态下拉选项
+        // 检查是否有 pending 的状态变更
+        const stateChangePending = this.moduleStateChangePending.has(mod.name);
+        const pendingState = stateChangePending ? this.moduleStateChangePending.get(mod.name).newState : mod.state;
+
+        const stateOptions = `
+          <option value="enabled" ${pendingState === 'enabled' ? 'selected' : ''}>自动</option>
+          <option value="manual" ${pendingState === 'manual' ? 'selected' : ''}>手动</option>
+          <option value="disabled" ${pendingState === 'disabled' ? 'selected' : ''}>禁用</option>
+        `;
+
+        const stateSelectDisabled = stateChangePending ? 'disabled' : '';
+
+        // 统一操作按钮逻辑
+        const isCore = ['kernel', 'launcher'].includes(mod.name);
+        const displayOrder = mod.display_order || 0;
+        const isHighOrder = displayOrder >= 80;
+        const isDisabledState = mod.state === 'disabled';
+
+        // 完全禁止操作的条件：核心模块 或 display_order>=80 或 disabled状态
+        const fullyDisabled = isCore || isHighOrder || isDisabledState;
+
+        let btnHtml = '';
+        if (!fullyDisabled) {
+          // 只有非禁用模块才显示按钮
+          let btnClass, btnLabel, btnAction, btnDisabled;
+
+          if (pending) {
+            // 操作中
+            btnClass = 'btn-warning';
+            btnLabel = pendingAction === 'start' ? '启动中…' : '停止中…';
+            btnAction = '';
+            btnDisabled = 'disabled';
+          } else if (running) {
+            // 运行中 → 可停止
+            btnClass = 'btn-danger';
+            btnLabel = '停止';
+            btnAction = `onclick="app.stopModule('${mod.name}')"`;
+            btnDisabled = '';
+          } else {
+            // 已停止 → 可启动
+            btnClass = 'btn-success';
+            btnLabel = '启动';
+            btnAction = `onclick="app.startModule('${mod.name}')"`;
+            btnDisabled = '';
+          }
+
+          btnHtml = `<button class="btn btn-sm ${btnClass}" ${btnAction} ${btnDisabled} style="min-width:82px;">${btnLabel}</button>`;
+        }
+
+        // 格式化运行时长
+        const formatUptime = (seconds) => {
+          if (!seconds) return '-';
+          if (seconds < 60) return `${Math.floor(seconds)}秒`;
+          if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`;
+          const h = Math.floor(seconds / 3600);
+          const m = Math.floor((seconds % 3600) / 60);
+          return m > 0 ? `${h}小时${m}分` : `${h}小时`;
+        };
+
+        // 格式化启动耗时
+        const formatStartupTime = (seconds) => {
+          if (!seconds) return '-';
+          if (seconds < 1) return `${Math.floor(seconds * 1000)}ms`;
+          return `${seconds.toFixed(1)}秒`;
+        };
+
+        // 计算启动耗时（ready_at - started_at）
+        // 只有在模块运行中且两个时间戳都存在时才计算
+        const startupTime = (running && mod.ready_at && mod.started_at)
+          ? formatStartupTime(mod.ready_at - mod.started_at)
+          : '-';
+
+        // 计算运行时长（只有运行中才显示）
+        const uptime = (running && mod.started_at)
+          ? formatUptime(Date.now() / 1000 - mod.started_at)
+          : '-';
+
+        // Ping 状态（智能使用后端数据和缓存）
+        let pingStatus = 'never';
+        let latencyInfo = {};
+
+        // 1. 尝试从后端获取数据
+        if (mod.latency && mod.latency.status) {
+          pingStatus = mod.latency.status;
+          latencyInfo = mod.latency;
+        } else if (mod.ping_status) {
+          // 兼容旧格式
+          pingStatus = mod.ping_status;
+          latencyInfo = mod.latency || {};
+        }
+
+        // 2. 如果后端数据无效，优先使用缓存
+        const cached = this.lastPingData[mod.name];
+        if (cached && cached.status && cached.last_update) {
+          const now = Date.now() / 1000;
+          const cacheAge = now - cached.last_update;
+          const backendAge = latencyInfo.last_update ? now - latencyInfo.last_update : Infinity;
+
+          // 如果后端数据是 never，但缓存有有效数据且不太旧（10秒内），使用缓存
+          if (pingStatus === 'never' && cached.status !== 'never' && cacheAge < 10) {
+            pingStatus = cached.status;
+            latencyInfo = cached;
+          }
+          // 如果后端数据是 timeout，但缓存是 ok 且更新（缓存比后端新），使用缓存
+          else if (pingStatus === 'timeout' && cached.status === 'ok' && cacheAge < backendAge) {
+            pingStatus = cached.status;
+            latencyInfo = cached;
+          }
+          // 如果缓存比后端数据更新（缓存时间戳更大），使用缓存
+          else if (cached.last_update > (latencyInfo.last_update || 0)) {
+            pingStatus = cached.status;
+            latencyInfo = cached;
+          }
+        }
+
+        const outbound = latencyInfo.outbound;
+        const inbound = latencyInfo.inbound;
+
+        let pingText = '-';
+        let pingClass = '';  // 默认无类名，使用 td 默认颜色
+
+        if (pingStatus === 'ok' && outbound !== undefined && inbound !== undefined) {
+          const totalLatency = outbound + inbound;
+          pingText = `${totalLatency.toFixed(1)}ms`;
+
+          // 根据延迟设置颜色
+          if (totalLatency <= 100) {
+            pingClass = 'success';  // 绿色
+          } else if (totalLatency <= 500) {
+            pingClass = 'warning';  // 黄色
+          } else {
+            pingClass = 'error';    // 红色
+          }
+        } else if (pingStatus === 'timeout') {
+          pingText = '超时';
+          pingClass = 'error';
+        }
+
+        html += `<tr data-module="${mod.name}" class="module-row" onclick="app.showModuleDetails('${mod.name}')">
+          <td><span class="module-state-dot ${stateClass}"></span></td>
+          <td><strong>${mod.display_name || mod.name}</strong> <span style="color:#999;font-size:12px;">(${mod.name})</span></td>
+          <td><span class="module-type-badge type-${mod.type || 'unknown'}">${mod.type || '?'}</span></td>
+          <td>${mod.version || '-'}</td>
+          <td>${mod.preferred_port || '-'}</td>
+          <td>${mod.pid || '-'}</td>
+          <td>${startupTime}</td>
+          <td class="uptime-cell" data-started-at="${running && mod.started_at ? mod.started_at : ''}">${uptime}</td>
+          <td>${mod.launch_count || 0}</td>
+          <td class="ping-cell"><span class="text-${pingClass}">${pingText}</span></td>
+          <td>${runningStatus}</td>
+          <td onclick="event.stopPropagation()">
+            <select class="module-state-select" data-module="${mod.name}" onchange="app.onModuleStateChange(this)" ${stateSelectDisabled}>
+              ${stateOptions}
+            </select>
+          </td>
+          <td onclick="event.stopPropagation()">
+            ${btnHtml}
+          </td>
+        </tr>`;
+      });
+
+      // 如果有下拉框正在交互（打开状态），延迟渲染，避免打断用户操作
+      const activeSelect = tbody.querySelector('.module-state-select:focus');
+      if (activeSelect) {
+        this._pendingModulesHtml = html;
+        const applyPending = () => {
+          if (this._pendingModulesHtml) {
+            document.getElementById('modules-tbody').innerHTML = this._pendingModulesHtml;
+            this._pendingModulesHtml = null;
+          }
+        };
+        activeSelect.addEventListener('blur', applyPending, { once: true });
+      } else {
+        this._pendingModulesHtml = null;
+        tbody.innerHTML = html;
+      }
+
+      // 缓存模块数据用于秒定时器更新
+      this.modulesData = modules;
+
+      // 启动秒定时器（如果还没启动）
+      this.startSecondTimer();
+
+      // 启动 ping 数据刷新定时器（如果还没启动）
+      this.startPingRefresh();
+    } catch (err) {
+      console.error('[Evol] Load modules failed:', err);
+      document.getElementById('modules-tbody').innerHTML =
+        `<tr><td colspan="12" style="text-align:center;padding:40px;color:#e74c3c;">加载失败: ${err.message}</td></tr>`;
+    }
+  }
+
+  async loadModuleStats() {
+    try {
+      // 对齐 Web 模块：使用 kernel.health 获取运行时长
+      const health = await this.callRpc('kernel.health', {});
+      const eventStats = health.event_stats || {};
+
+      // 对齐 Web 模块：使用 kernel.stats 获取统计数据
+      const stats = await this.callRpc('kernel.stats', {});
+      const counters = stats.counters || {};
+      const rpcStats = stats.rpc || {};
+
+      // 获取模块列表（用于计算模块数量和注册记录）
+      let modules = [];
+      try {
+        const modulesRes = await this.callRpc('launcher.list_modules', {});
+        modules = modulesRes.modules || [];
+      } catch (err) {
+        if (!err.message.includes('not ready')) {
+          console.warn('[Evol] Failed to get modules for stats:', err);
+        }
+      }
+
+      // 记录 Kernel 运行时长基准（用于秒定时器实时更新）
+      const kernelUptime = eventStats.uptime_seconds || 0;
+      if (kernelUptime > 0) {
+        this.kernelUptimeBase = kernelUptime;
+        this.kernelUptimeTimestamp = Date.now() / 1000; // 记录获取时刻
+      }
+
+      // 计算模块数量
+      const moduleCount = modules.length;
+
+      // 获取所有注册记录并分类统计
+      let registryByCategory = {
+        modules: 0,   // module.* 字段
+        rpc: 0,       // tools.rpc.* 字段
+        hook: 0,      // tools.hook.* 字段
+        api: 0        // tools.api.* 字段
+      };
+      let totalRecords = 0;
+
+      for (const mod of modules) {
+        try {
+          // 对齐 Web 模块：使用 registry.lookup 查询每个模块的注册记录
+          const regRes = await this.callRpc('registry.lookup', { module: mod.name });
+          const records = regRes.results || [];
+          totalRecords += records.length;
+
+          // 按字段路径分类
+          for (const rec of records) {
+            const field = rec.field || '';
+            if (field.startsWith('module.')) {
+              registryByCategory.modules++;
+            } else if (field.startsWith('tools.rpc.')) {
+              registryByCategory.rpc++;
+            } else if (field.startsWith('tools.hook.')) {
+              registryByCategory.hook++;
+            } else if (field.startsWith('tools.api.')) {
+              registryByCategory.api++;
+            }
+          }
+        } catch (e) {
+          // 模块可能还未注册，忽略错误
+        }
+      }
+
+      // 事件统计
+      const eventsRouted = counters.events_routed || 0;
+
+      // RPC 调用统计
+      const rpcCalls = rpcStats.total || 0;
+
+      // 更新 UI
+      document.getElementById('stat-uptime').textContent = this.formatUptime(kernelUptime);
+      document.getElementById('stat-modules').textContent = moduleCount;
+      document.getElementById('stat-registry').textContent = totalRecords;
+      document.getElementById('stat-rpc').textContent = registryByCategory.rpc;
+      document.getElementById('stat-hooks').textContent = registryByCategory.hook;
+      document.getElementById('stat-api').textContent = registryByCategory.api;
+      document.getElementById('stat-events').textContent = eventsRouted;
+      document.getElementById('stat-rpc-calls').textContent = rpcCalls;
+    } catch (err) {
+      console.error('[Evol] Load stats failed:', err);
+      // 不清空 UI，保留上次的值
+    }
+  }
+
+  formatUptime(seconds) {
+    // 对齐 Web 模块的格式化逻辑
+    if (seconds < 60) return `${Math.floor(seconds)}秒`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`;
+    if (seconds < 86400) {
+      const h = Math.floor(seconds / 3600);
+      const m = Math.floor((seconds % 3600) / 60);
+      return m > 0 ? `${h}小时${m}分` : `${h}小时`;
+    }
+    const d = Math.floor(seconds / 86400);
+    const h = Math.floor((seconds % 86400) / 3600);
+    return h > 0 ? `${d}天${h}小时` : `${d}天`;
+  }
+
+  startStatsAutoRefresh() {
+    if (this.statsRefreshTimer) clearInterval(this.statsRefreshTimer);
+    this.statsRefreshTimer = setInterval(() => {
+      if (this.currentPage === 'modules') {
+        this.loadModuleStats();
+      }
+    }, 5000);
+  }
+
+  startSecondTimer() {
+    if (this.secondTimer) return; // 已经启动，不重复启动
+
+    let lastMinuteUpdate = 0; // 记录上次分钟更新的时间戳
+
+    this.secondTimer = setInterval(() => {
+      if (this.currentPage !== 'modules') return; // 不在模块页面时不更新
+
+      const now = Date.now() / 1000;
+      const currentMinute = Math.floor(now / 60);
+
+      // ① 更新统计面板的 Kernel 运行时长
+      if (this.kernelUptimeBase && this.kernelUptimeTimestamp) {
+        const kernelUptime = this.kernelUptimeBase + (now - this.kernelUptimeTimestamp);
+        const el = document.getElementById('stat-uptime');
+        if (el) {
+          if (kernelUptime < 60 || currentMinute !== lastMinuteUpdate) {
+            el.textContent = this.formatUptime(kernelUptime);
+          }
+        }
+      }
+
+      // ② 更新模块列表的运行时长
+      document.querySelectorAll('.uptime-cell').forEach(cell => {
+        const startedAt = parseFloat(cell.getAttribute('data-started-at'));
+        if (!startedAt) return;
+
+        const uptime = now - startedAt;
+
+        // 小于 1 分钟：每秒更新
+        // 大于等于 1 分钟：每分钟更新（检查分钟是否变化）
+        if (uptime < 60 || currentMinute !== lastMinuteUpdate) {
+          cell.textContent = this.formatUptime(uptime);
+        }
+      });
+
+      // 更新分钟标记
+      if (currentMinute !== lastMinuteUpdate) {
+        lastMinuteUpdate = currentMinute;
+      }
+    }, 1000); // 每秒执行
+  }
+
+  stopSecondTimer() {
+    if (this.secondTimer) {
+      clearInterval(this.secondTimer);
+      this.secondTimer = null;
+    }
+  }
+
+  async updatePingData() {
+    try {
+      // 检查连接状态
+      if (!this.kernelClient || !this.kernelClient.authenticated) {
+        console.warn('[Evol] Cannot update ping data: not authenticated');
+        return;
+      }
+
+      // 直接调用 kernel.latencies 获取最新 ping 数据
+      const result = await this.callRpc('kernel.latencies', {});
+      const latencies = result.latencies || {};
+
+      console.log('[Evol] Ping data received:', Object.keys(latencies).length, 'modules');
+
+      // 更新缓存
+      this.lastPingData = latencies;
+
+      // 更新模块列表中的 ping 状态
+      document.querySelectorAll('.module-row').forEach(row => {
+        const moduleName = row.getAttribute('data-module');
+        if (!moduleName) return;
+
+        const latencyInfo = latencies[moduleName] || {};
+        const pingStatus = latencyInfo.status || 'never';
+        const outbound = latencyInfo.outbound;
+        const inbound = latencyInfo.inbound;
+
+        // 找到 ping 状态单元格
+        const pingCell = row.querySelector('.ping-cell');
+        if (!pingCell) return;
+
+        let pingText = '-';
+        let pingClass = '';  // 默认无类名，使用 td 默认颜色
+
+        if (pingStatus === 'ok' && outbound !== undefined && inbound !== undefined) {
+          const totalLatency = outbound + inbound;
+          pingText = `${totalLatency.toFixed(1)}ms`;
+
+          // 根据延迟设置颜色
+          if (totalLatency <= 100) {
+            pingClass = 'success';  // 绿色
+          } else if (totalLatency <= 500) {
+            pingClass = 'warning';  // 黄色
+          } else {
+            pingClass = 'error';    // 红色
+          }
+        } else if (pingStatus === 'timeout') {
+          pingText = '超时';
+          pingClass = 'error';
+        }
+
+        pingCell.innerHTML = `<span class="text-${pingClass}">${pingText}</span>`;
+      });
+    } catch (err) {
+      console.warn('[Evol] Failed to update ping data:', err);
+    }
+  }
+
+  startPingRefresh() {
+    if (this.pingRefreshTimer) return; // 已经启动
+
+    // 延迟 2 秒后执行第一次（等待连接稳定）
+    setTimeout(() => {
+      if (this.kernelClient && this.kernelClient.authenticated) {
+        this.updatePingData();
+      }
+    }, 2000);
+
+    // 每 5 秒更新一次（触发 Kernel 使用 5 秒 ping 间隔）
+    this.pingRefreshTimer = setInterval(() => {
+      if (this.currentPage === 'modules' && this.kernelClient && this.kernelClient.authenticated) {
+        this.updatePingData();
+      }
+    }, 5000);
+  }
+
+  stopPingRefresh() {
+    if (this.pingRefreshTimer) {
+      clearInterval(this.pingRefreshTimer);
+      this.pingRefreshTimer = null;
+    }
+  }
+
+  async showModuleDetails(moduleName) {
+    try {
+      // 对齐 Web 模块：使用 launcher.get_module_config 获取完整配置
+      const mod = await this.callRpc('launcher.get_module_config', { module_name: moduleName });
+
+      // 隐藏列表，显示详情
+      document.getElementById('modules-list-header')?.classList.add('hidden');
+      document.getElementById('modules-table')?.closest('.panel')?.classList.add('hidden');
+      document.getElementById('statistics-panel')?.classList.add('hidden');
+      document.getElementById('registry-test-section')?.classList.add('hidden');
+      document.getElementById('registry-test-output')?.classList.add('hidden');
+      document.getElementById('module-detail')?.classList.remove('hidden');
+
+      // 保存当前模块名（用于后续操作）
+      this.currentModuleName = moduleName;
+
+      // Header
+      document.getElementById('module-detail-name').textContent = mod.display_name || mod.name;
+
+      // 【区块1：模块标识】
+      this._setVal('mod-source-path', mod.source_path || '');
+      this._setVal('mod-meta-name', mod.name || '');
+      this._setVal('mod-meta-type', mod.type || '');
+      this._setVal('mod-meta-runtime', mod.runtime || '');
+      this._setVal('mod-meta-entry', mod.entry || '');
+      this._setVal('mod-meta-display-name', mod.display_name || '');
+      this._setVal('mod-meta-version', mod.version || '');
+
+      // 【区块2：启动配置】
+      this._setVal('mod-meta-state', mod.state || 'enabled');
+      const monitorValue = mod.monitor != null ? String(mod.monitor) : 'true';
+      this._setVal('mod-meta-monitor', monitorValue);
+
+      // 【区块3：网络配置】
+      this._setVal('mod-meta-port', mod.preferred_port != null ? mod.preferred_port : '');
+
+      // 监听地址：根据模块设置默认值
+      let defaultIp = '127.0.0.1';
+      if (mod.name === 'web' || mod.name === 'evol') {
+        defaultIp = '0.0.0.0';  // web/evol 模块默认允许远程
+      }
+      this._setVal('mod-meta-ip', mod.advertise_ip || defaultIp);
+
+      // 运行状态
+      await this._updateModuleDetailStatus(moduleName);
+
+      // 【区块4：模块配置文件】
+      const configSection = document.getElementById('module-config-section');
+      const configTree = document.getElementById('module-config-tree');
+      if (mod.has_config && mod.config) {
+        configSection?.classList.remove('hidden');
+        if (configTree) {
+          configTree.innerHTML = '';
+          this._renderConfigTree(mod.config, configTree, '');
+        }
+      } else {
+        configSection?.classList.add('hidden');
+      }
+
+      // 【区块5：事件信息】
+      await this._loadModuleEvents(moduleName);
+
+      // 绑定自动保存事件监听器
+      this._bindAutoSaveListeners();
+
+      // 绑定事件刷新按钮
+      const refreshBtn = document.getElementById('btn-refresh-events');
+      if (refreshBtn) {
+        refreshBtn.onclick = () => this._loadModuleEvents(moduleName);
+      }
+
+    } catch (err) {
+      alert('加载模块详情失败: ' + err.message);
+      console.error('[Evol] showModuleDetails failed:', err);
+    }
+  }
+
+  // 辅助方法：设置表单值
+  _setVal(id, value) {
+    const el = document.getElementById(id);
+    if (el) {
+      if (el.tagName === 'SELECT') {
+        el.value = value;
+      } else if (el.type === 'number') {
+        el.value = value === '' ? '' : value;
+      } else {
+        el.value = value;
+      }
+    }
+  }
+
+  // 更新模块详情页的运行状态
+  async _updateModuleDetailStatus(moduleName) {
+    try {
+      const result = await this.callRpc('launcher.list_modules', {});
+      const modules = result.modules || [];
+      const mod = modules.find(m => m.name === moduleName);
+
+      if (mod) {
+        const running = mod.actual_state ? mod.actual_state.startsWith('running') : false;
+        const pending = this.moduleActionPending.has(mod.name);
+        const pendingAction = this.moduleActionPending.get(mod.name);
+
+        // 更新运行状态文本和状态点
+        const statusEl = document.getElementById('module-detail-run-status');
+        const dotEl = document.getElementById('module-detail-status-dot');
+
+        if (statusEl && dotEl) {
+          if (pending) {
+            statusEl.textContent = pendingAction === 'start' ? '启动中…' : '停止中…';
+            statusEl.style.color = 'var(--warning)';
+            dotEl.style.background = 'var(--warning)';
+          } else if (running) {
+            statusEl.textContent = '运行中';
+            statusEl.style.color = 'var(--success)';
+            dotEl.style.background = 'var(--success)';
+          } else {
+            statusEl.textContent = '已停止';
+            statusEl.style.color = 'var(--gray-400)';
+            dotEl.style.background = 'var(--gray-400)';
+          }
+        }
+
+        // 更新统一操作按钮
+        const actionBtn = document.getElementById('btn-detail-action');
+        if (actionBtn) {
+          const isCore = ['kernel', 'launcher'].includes(mod.name);
+          const displayOrder = mod.display_order || 0;
+          const isHighOrder = displayOrder >= 80;
+          const isDisabledState = mod.state === 'disabled';
+          const fullyDisabled = isCore || isHighOrder || isDisabledState;
+
+          if (fullyDisabled) {
+            // 完全禁用 - 隐藏按钮
+            actionBtn.style.display = 'none';
+          } else {
+            actionBtn.style.display = '';
+
+            if (pending) {
+              // 操作中
+              actionBtn.className = 'btn btn-sm btn-warning';
+              actionBtn.textContent = pendingAction === 'start' ? '启动中…' : '停止中…';
+              actionBtn.disabled = true;
+              actionBtn.onclick = null;
+            } else if (running) {
+              // 运行中 → 可停止
+              actionBtn.className = 'btn btn-sm btn-danger';
+              actionBtn.textContent = '停止';
+              actionBtn.disabled = false;
+              actionBtn.onclick = () => this.stopModuleFromDetail();
+            } else {
+              // 已停止 → 可启动
+              actionBtn.className = 'btn btn-sm btn-success';
+              actionBtn.textContent = '启动';
+              actionBtn.disabled = false;
+              actionBtn.onclick = () => this.startModuleFromDetail();
+            }
+          }
+        }
+      }
+    } catch (err) {
+      console.error('[Evol] Update detail status failed:', err);
+    }
+  }
+
+  // 渲染配置树（简化版）
+  _renderConfigTree(config, container, prefix) {
+    if (!config || typeof config !== 'object') return;
+
+    for (const [key, value] of Object.entries(config)) {
+      const fullKey = prefix ? `${prefix}.${key}` : key;
+      const div = document.createElement('div');
+      div.style.marginBottom = '8px';
+
+      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        // 嵌套对象
+        div.innerHTML = `<strong style="color:#666;">${key}:</strong>`;
+        container.appendChild(div);
+        const subContainer = document.createElement('div');
+        subContainer.style.marginLeft = '20px';
+        container.appendChild(subContainer);
+        this._renderConfigTree(value, subContainer, fullKey);
+      } else {
+        // 简单值
+        div.innerHTML = `
+          <label style="display:inline-block;width:200px;font-size:13px;color:#666;">${key}:</label>
+          <input type="text" value="${value}" data-config-key="${fullKey}"
+                 style="padding:4px 8px;border:1px solid #ddd;border-radius:4px;width:300px;">
+        `;
+        container.appendChild(div);
+      }
+    }
+  }
+
+  // 加载模块事件信息
+  async _loadModuleEvents(moduleName) {
+    const container = document.getElementById('module-events-content');
+    if (!container) return;
+
+    try {
+      container.innerHTML = '<div style="text-align:center;padding:20px;color:#999;">加载中...</div>';
+
+      const result = await this.callRpc('kernel.get_module_events', {
+        module_name: moduleName
+      });
+
+      this._renderModuleEvents(result);
+    } catch (err) {
+      container.innerHTML = `<div style="text-align:center;padding:20px;color:#e74c3c;">加载失败: ${err.message}</div>`;
+      console.error('[Evol] Load module events failed:', err);
+    }
+  }
+
+  // 渲染模块事件信息
+  _renderModuleEvents(data) {
+    const container = document.getElementById('module-events-content');
+    if (!container) return;
+
+    const { subscriptions, publications } = data;
+    const activeSubs = new Set(subscriptions.active || []);
+    const declaredSubs = subscriptions.declared || [];
+    const declaredPubs = publications.declared || [];
+
+    let html = '';
+
+    // 订阅的事件
+    html += '<div style="margin-bottom:20px;">';
+    html += '<h5 style="margin:0 0 8px 0;font-size:13px;font-weight:600;color:#555;">订阅的事件</h5>';
+
+    if (declaredSubs.length === 0) {
+      html += '<div style="color:#999;font-size:12px;">无</div>';
+    } else {
+      html += '<div style="display:flex;flex-wrap:wrap;gap:8px;">';
+
+      for (const event of declaredSubs) {
+        const isActive = activeSubs.has(event);
+        const isDynamic = !declaredSubs.includes(event) && activeSubs.has(event);
+
+        let badgeClass = 'event-badge';
+        let badgeColor = '#95a5a6'; // 灰色 - 仅声明
+        let badgeText = '未激活';
+
+        if (isActive) {
+          badgeColor = '#27ae60'; // 绿色 - 已订阅
+          badgeText = '已订阅';
+        }
+
+        html += `
+          <div class="event-badge" style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#f5f5f5;border-radius:4px;font-size:12px;">
+            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${badgeColor};" title="${badgeText}"></span>
+            <span style="color:#333;">${event}</span>
+          </div>
+        `;
+      }
+
+      // 动态订阅（运行时订阅但未在 manifest 声明）
+      for (const event of subscriptions.active) {
+        if (!declaredSubs.includes(event)) {
+          html += `
+            <div class="event-badge" style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#fff3cd;border-radius:4px;font-size:12px;">
+              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff9800;" title="动态订阅"></span>
+              <span style="color:#333;">${event}</span>
+            </div>
+          `;
+        }
+      }
+
+      html += '</div>';
+    }
+    html += '</div>';
+
+    // 发布的事件
+    html += '<div>';
+    html += '<h5 style="margin:0 0 8px 0;font-size:13px;font-weight:600;color:#555;">发布的事件</h5>';
+
+    if (declaredPubs.length === 0) {
+      html += '<div style="color:#999;font-size:12px;">无</div>';
+    } else {
+      html += '<div style="display:flex;flex-wrap:wrap;gap:8px;">';
+
+      for (const event of declaredPubs) {
+        html += `
+          <div class="event-badge" style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#e3f2fd;border-radius:4px;font-size:12px;">
+            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#2196f3;" title="声明发布"></span>
+            <span style="color:#333;">${event}</span>
+          </div>
+        `;
+      }
+
+      html += '</div>';
+    }
+    html += '</div>';
+
+    container.innerHTML = html;
+  }
+
+  // 绑定自动保存监听器
+  _bindAutoSaveListeners() {
+    // 防抖保存函数
+    if (!this._debouncedSave) {
+      this._debouncedSave = this._debounce(() => this._saveModuleConfig(), 500);
+    }
+
+    // 绑定元数据字段
+    document.querySelectorAll('#module-detail [data-field]').forEach(el => {
+      el.removeEventListener('input', this._debouncedSave);
+      el.removeEventListener('change', this._debouncedSave);
+      const event = (el.tagName === 'SELECT') ? 'change' : 'input';
+      el.addEventListener(event, this._debouncedSave);
+    });
+
+    // 绑定配置树字段
+    document.querySelectorAll('#module-config-tree [data-config-key]').forEach(el => {
+      el.removeEventListener('input', this._debouncedSave);
+      el.addEventListener('input', this._debouncedSave);
+    });
+  }
+
+  // 防抖函数
+  _debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+
+  // 保存模块配置
+  async _saveModuleConfig() {
+    if (!this.currentModuleName) return;
+
+    try {
+      // 收集元数据
+      const metadata = {};
+      document.querySelectorAll('#module-detail [data-field]').forEach(el => {
+        const field = el.dataset.field;
+        let value = el.value;
+
+        // 类型转换
+        if (el.type === 'number') {
+          value = value === '' ? null : parseInt(value);
+        } else if (field === 'monitor') {
+          value = value === 'true';
+        }
+
+        metadata[field] = value;
+      });
+
+      // 收集配置文件
+      const config = {};
+      document.querySelectorAll('#module-config-tree [data-config-key]').forEach(el => {
+        const key = el.dataset.configKey;
+        config[key] = el.value;
+      });
+
+      // 调用更新 RPC
+      await this.callRpc('launcher.update_module_config', {
+        module_name: this.currentModuleName,
+        metadata: metadata,
+        config: Object.keys(config).length > 0 ? config : undefined
+      });
+
+      // 显示保存成功提示（简单版）
+      console.log('[Evol] Module config saved successfully');
+
+    } catch (err) {
+      console.error('[Evol] Save module config failed:', err);
+      alert('保存失败: ' + err.message);
+    }
+  }
+
+  async startModule(moduleName) {
+    if (['kernel', 'launcher'].includes(moduleName)) return; // 静默拦截核心模块
+    if (this.moduleActionPending.has(moduleName)) return; // 防抖
+
+    this.moduleActionPending.set(moduleName, 'start');
+    this.updateModuleButtons(moduleName);
+
+    try {
+      await this.callRpc('launcher.start_module', { name: moduleName });
+      // 延迟刷新，等待模块实际启动后再查询状态
+      setTimeout(async () => {
+        this.moduleActionPending.delete(moduleName);
+        await this.loadModules();
+        // 检查启动结果
+        const result = await this.callRpc('launcher.list_modules', {});
+        const mod = (result.modules || []).find(m => m.name === moduleName);
+        const running = mod?.actual_state?.startsWith('running');
+        if (running) {
+          this.showToast(`${moduleName} 启动成功`, 'success');
+        } else {
+          this.showToast(`${moduleName} 启动超时，请检查日志`, 'error');
+        }
+      }, 1500);
+    } catch (err) {
+      this.moduleActionPending.delete(moduleName);
+      this.updateModuleButtons(moduleName);
+      this.showToast(`启动失败: ${err.message}`, 'error');
+    }
+  }
+
+  async stopModule(moduleName) {
+    if (['kernel', 'launcher'].includes(moduleName)) return; // 静默拦截核心模块
+    if (this.moduleActionPending.has(moduleName)) return; // 防抖
+
+    this.moduleActionPending.set(moduleName, 'stop');
+    this.updateModuleButtons(moduleName);
+
+    try {
+      await this.callRpc('launcher.stop_module', { name: moduleName, reason: 'user_request' });
+      // 延迟刷新，等待模块实际停止后再查询状态
+      setTimeout(async () => {
+        this.moduleActionPending.delete(moduleName);
+        await this.loadModules();
+        // 检查停止结果
+        const result = await this.callRpc('launcher.list_modules', {});
+        const mod = (result.modules || []).find(m => m.name === moduleName);
+        const running = mod?.actual_state?.startsWith('running');
+        if (!running) {
+          this.showToast(`${moduleName} 停止成功`, 'success');
+        } else {
+          this.showToast(`${moduleName} 停止超时，请检查日志`, 'error');
+        }
+      }, 1500);
+    } catch (err) {
+      this.moduleActionPending.delete(moduleName);
+      this.updateModuleButtons(moduleName);
+      this.showToast(`停止失败: ${err.message}`, 'error');
+    }
+  }
+
+  updateModuleButtons(moduleName) {
+    // 判断当前是否在详情页
+    const detailPanel = document.getElementById('module-detail');
+    const isDetailPage = detailPanel && !detailPanel.classList.contains('hidden');
+
+    if (isDetailPage && this.currentModuleName === moduleName) {
+      // 在详情页，只更新详情页状态
+      this._updateModuleDetailStatus(moduleName);
+    } else {
+      // 在列表页，重新渲染列表
+      this.loadModules();
+    }
+  }
+
+  async onModuleStateChange(selectEl) {
+    const moduleName = selectEl.dataset.module;
+    const newState = selectEl.value;
+
+    // 防抖检查：如果该模块正在变更状态，忽略新的操作
+    if (this.moduleStateChangePending.has(moduleName)) {
+      console.log(`[Evol] Module ${moduleName} state change already pending, ignoring`);
+      const pending = this.moduleStateChangePending.get(moduleName);
+      selectEl.value = pending.newState;
+      return;
+    }
+
+    // 记录 pending 状态
+    this.moduleStateChangePending.set(moduleName, { newState, timestamp: Date.now() });
+
+    // 禁用下拉，防止重复操作
+    selectEl.disabled = true;
+
+    // 超时保护（5秒）
+    const timeoutId = setTimeout(() => {
+      console.warn(`[Evol] Module ${moduleName} state change timeout, force cleanup`);
+      this.moduleStateChangePending.delete(moduleName);
+      const sel = document.querySelector(`.module-state-select[data-module="${moduleName}"]`);
+      if (sel) sel.disabled = false;
+    }, 5000);
+
+    try {
+      await this.callRpc('launcher.update_module_config', {
+        module_name: moduleName,
+        metadata: { state: newState }
+      });
+      this.showToast(`模块 ${moduleName} 默认状态已更新为 ${newState}`, 'success');
+
+      const row = selectEl.closest('tr');
+      const dot = row?.querySelector('.module-state-dot');
+      if (dot) {
+        dot.className = `module-state-dot ${newState === 'enabled' ? 'enabled' : newState === 'manual' ? 'manual' : 'disabled'}`;
+      }
+    } catch (err) {
+      this.showToast('更新失败: ' + err.message, 'error');
+      await this.loadModules();
+    } finally {
+      clearTimeout(timeoutId);
+      this.moduleStateChangePending.delete(moduleName);
+      // 重新查找元素（可能已被 loadModules 重新渲染）
+      const currentSelect = document.querySelector(`.module-state-select[data-module="${moduleName}"]`);
+      if (currentSelect) currentSelect.disabled = false;
+    }
+  }
+
+  async restartKite() {
+    // 禁用按钮，防止重复点击
+    const btn = document.getElementById('btn-restart-kite');
+    if (btn) {
+      btn.disabled = true;
+      btn.innerHTML = '<span>⏳</span><span>重启中...</span>';
+    }
+
+    try {
+      const data = await this.callRpc('launcher.restart_launcher', { reason: 'user_request' });
+
+      // 检查是否有错误
+      if (data.error) {
+        this.showToast(`重启失败: ${data.error}`, 'error');
+        if (btn) {
+          btn.disabled = false;
+          btn.innerHTML = '<span>🔄</span><span>重启 Kite</span>';
+        }
+        return;
+      }
+
+      // 成功 - 显示重启提示并轮询检测重启完成
+      this.showToast('Kite 正在重启...', 'success');
+
+      // 轮询检测 Kite 是否重启完成（每 0.5s 检查一次，最多 30s）
+      let attempts = 0;
+      const maxAttempts = 60; // 30s
+      const checkInterval = setInterval(async () => {
+        attempts++;
+        try {
+          // 尝试调用 RPC，如果成功说明重启完成
+          await this.callRpc('kernel.health', {});
+          clearInterval(checkInterval);
+          this.showToast('Kite 重启完成', 'success');
+          window.location.reload();
+        } catch (err) {
+          // 还在重启中，继续等待
+          if (attempts >= maxAttempts) {
+            clearInterval(checkInterval);
+            this.showToast('重启超时，请手动刷新页面', 'warning');
+            if (btn) {
+              btn.disabled = false;
+              btn.innerHTML = '<span>🔄</span><span>重启 Kite</span>';
+            }
+          }
+        }
+      }, 500);
+    } catch (err) {
+      this.showToast(`重启失败: ${err.message}`, 'error');
+      if (btn) {
+        btn.disabled = false;
+        btn.innerHTML = '<span>🔄</span><span>重启 Kite</span>';
+      }
+    }
+  }
+
+  // 详情页操作方法
+  async startModuleFromDetail() {
+    if (!this.currentModuleName) return;
+    const moduleName = this.currentModuleName;
+
+    if (['kernel', 'launcher'].includes(moduleName)) return;
+    if (this.moduleActionPending.has(moduleName)) return;
+
+    this.moduleActionPending.set(moduleName, 'start');
+    await this._updateModuleDetailStatus(moduleName);
+
+    try {
+      await this.callRpc('launcher.start_module', { name: moduleName });
+      // 延迟刷新，等待模块实际启动后再查询状态
+      setTimeout(async () => {
+        this.moduleActionPending.delete(moduleName);
+        await this._updateModuleDetailStatus(moduleName);
+        // 检查启动结果
+        const result = await this.callRpc('launcher.list_modules', {});
+        const mod = (result.modules || []).find(m => m.name === moduleName);
+        const running = mod?.actual_state?.startsWith('running');
+        if (running) {
+          this.showToast(`${moduleName} 启动成功`, 'success');
+        } else {
+          this.showToast(`${moduleName} 启动超时，请检查日志`, 'error');
+        }
+      }, 1500);
+    } catch (err) {
+      this.moduleActionPending.delete(moduleName);
+      await this._updateModuleDetailStatus(moduleName);
+      this.showToast(`启动失败: ${err.message}`, 'error');
+    }
+  }
+
+  async stopModuleFromDetail() {
+    if (!this.currentModuleName) return;
+    const moduleName = this.currentModuleName;
+
+    if (['kernel', 'launcher'].includes(moduleName)) return;
+    if (this.moduleActionPending.has(moduleName)) return;
+
+    this.moduleActionPending.set(moduleName, 'stop');
+    await this._updateModuleDetailStatus(moduleName);
+
+    try {
+      await this.callRpc('launcher.stop_module', { name: moduleName, reason: 'user_request' });
+      // 延迟刷新，等待模块实际停止后再查询状态
+      setTimeout(async () => {
+        this.moduleActionPending.delete(moduleName);
+        await this._updateModuleDetailStatus(moduleName);
+        // 检查停止结果
+        const result = await this.callRpc('launcher.list_modules', {});
+        const mod = (result.modules || []).find(m => m.name === moduleName);
+        const running = mod?.actual_state?.startsWith('running');
+        if (!running) {
+          this.showToast(`${moduleName} 停止成功`, 'success');
+        } else {
+          this.showToast(`${moduleName} 停止超时，请检查日志`, 'error');
+        }
+      }, 1500);
+    } catch (err) {
+      this.moduleActionPending.delete(moduleName);
+      await this._updateModuleDetailStatus(moduleName);
+      this.showToast(`停止失败: ${err.message}`, 'error');
+    }
+  }
+
+  async resetModuleDefaults() {
+    if (!this.currentModuleName) return;
+    if (!confirm(`确定要恢复模块 ${this.currentModuleName} 的默认配置吗？`)) return;
+
+    try {
+      await this.callRpc('launcher.reset_module_config', { module_name: this.currentModuleName });
+      this.showToast('配置已恢复为默认值', 'success');
+      // 重新加载详情
+      await this.showModuleDetails(this.currentModuleName);
+    } catch (err) {
+      this.showToast(`恢复默认值失败: ${err.message}`, 'error');
+    }
+  }
+
+  async toggleConsole() {
+    const console = document.getElementById('realtime-console');
+    const text = document.getElementById('console-toggle-text');
+
+    if (console.style.display === 'none') {
+      // 展开控制台
+      console.style.display = 'block';
+      text.textContent = '收起控制台';
+      this.consoleExpanded = true;
+
+      // 订阅全部事件
+      await this.subscribeAllEvents();
+    } else {
+      // 收起控制台
+      console.style.display = 'none';
+      text.textContent = '展开控制台';
+      this.consoleExpanded = false;
+
+      // 清空事件日志
+      this.eventLogs = [];
+      document.getElementById('console-output').textContent = '';
+
+      // 恢复默认订阅（只订阅 module.* 事件）
+      await this.subscribeDefaultEvents();
+    }
+  }
+
+  async subscribeAllEvents() {
+    if (this.eventSubscribed) return;
+
+    try {
+      // 订阅所有事件（使用通配符）
+      await this.kernelClient.subscribe(['*']);
+      this.eventSubscribed = true;
+      console.log('[Evol] Subscribed to all events');
+    } catch (err) {
+      console.error('[Evol] Failed to subscribe all events:', err);
+    }
+  }
+
+  async subscribeDefaultEvents() {
+    try {
+      // 只订阅 module.* 事件（用于刷新模块列表）
+      await this.kernelClient.subscribe([
+        'module.started',
+        'module.stopped',
+        'module.crashed',
+        'module.ready',
+        'module.exiting',
+        'module.shutdown',
+        'module.shutdown.ack',
+        'module.shutdown.ready'
+      ]);
+      this.eventSubscribed = false;
+      console.log('[Evol] Subscribed to default events (module.*)');
+    } catch (err) {
+      console.error('[Evol] Failed to subscribe default events:', err);
+    }
+  }
+
+  clearConsole() {
+    this.eventLogs = [];
+    this.renderEventLogs();
+  }
+
+  // 添加事件日志
+  addEventLog(event, data) {
+    const timestamp = Date.now();
+    const module = this.extractModuleFromEvent(event);
+
+    // 记录已知的模块和事件
+    if (module) this.knownModules.add(module);
+    this.knownEvents.add(event);
+
+    // 添加到日志数组
+    this.eventLogs.unshift({
+      timestamp,
+      module,
+      event,
+      data,
+      raw: JSON.stringify(data)
+    });
+
+    // 限制日志数量（最多保留1000条）
+    if (this.eventLogs.length > 1000) {
+      this.eventLogs = this.eventLogs.slice(0, 1000);
+    }
+
+    // 更新筛选器选项
+    this.updateFilterOptions();
+
+    // 重新渲染
+    this.renderEventLogs();
+  }
+
+  // 从事件名提取模块名
+  extractModuleFromEvent(event) {
+    // 事件格式通常是 module.event_name 或 category.module.event_name
+    const parts = event.split('.');
+    if (parts.length >= 2) {
+      return parts[0]; // 返回第一部分作为模块名
+    }
+    return null;
+  }
+
+  // 更新筛选器选项
+  updateFilterOptions() {
+    // 更新模块筛选器
+    const moduleSelect = document.getElementById('filter-module');
+    if (moduleSelect) {
+      const currentValue = moduleSelect.value;
+      const modules = Array.from(this.knownModules).sort();
+
+      let html = '<option value="">全部模块</option>';
+      modules.forEach(mod => {
+        html += `<option value="${mod}">${mod}</option>`;
+      });
+
+      moduleSelect.innerHTML = html;
+      moduleSelect.value = currentValue;
+    }
+
+    // 更新事件筛选器
+    const eventSelect = document.getElementById('filter-event');
+    if (eventSelect) {
+      const currentValue = eventSelect.value;
+      const events = Array.from(this.knownEvents).sort();
+
+      let html = '<option value="">全部事件</option>';
+      events.forEach(evt => {
+        html += `<option value="${evt}">${evt}</option>`;
+      });
+
+      eventSelect.innerHTML = html;
+      eventSelect.value = currentValue;
+    }
+  }
+
+  // 渲染事件日志
+  renderEventLogs() {
+    const output = document.getElementById('console-output');
+    if (!output) return;
+
+    // 获取筛选条件
+    const filterModule = document.getElementById('filter-module')?.value || '';
+    const filterEvent = document.getElementById('filter-event')?.value || '';
+    const filterKeyword = document.getElementById('filter-keyword')?.value || '';
+    const filterTime = parseInt(document.getElementById('filter-time')?.value || '0');
+
+    // 筛选日志
+    const now = Date.now();
+    const filtered = this.eventLogs.filter(log => {
+      // 时间筛选
+      if (filterTime > 0) {
+        const age = (now - log.timestamp) / 1000; // 秒
+        if (age > filterTime) return false;
+      }
+
+      // 模块筛选
+      if (filterModule && log.module !== filterModule) return false;
+
+      // 事件筛选
+      if (filterEvent && log.event !== filterEvent) return false;
+
+      // 关键词筛选（glob 模式）
+      if (filterKeyword) {
+        const pattern = this.globToRegex(filterKeyword);
+        const searchText = `${log.event} ${log.raw}`.toLowerCase();
+        if (!pattern.test(searchText)) return false;
+      }
+
+      return true;
+    });
+
+    // 渲染（时间倒序，最新的在最上面）
+    let html = '';
+    filtered.forEach(log => {
+      const time = this.formatTimestamp(log.timestamp);
+      const module = log.module || '?';
+      const event = log.event;
+      const data = this.formatEventData(log.data);
+
+      // 根据事件类型设置颜色
+      let color = '#d4d4d4';
+      if (event.includes('error') || event.includes('failed')) {
+        color = '#f48771';
+      } else if (event.includes('warning')) {
+        color = '#dcdcaa';
+      } else if (event.includes('started') || event.includes('success')) {
+        color = '#4ec9b0';
+      }
+
+      html += `<span style="color:#858585;">${time}</span> `;
+      html += `<span style="color:#569cd6;">[${module}]</span> `;
+      html += `<span style="color:${color};">${event}</span> `;
+      html += `<span style="color:#9cdcfe;">${data}</span>\n`;
+    });
+
+    output.innerHTML = html || '<span style="color:#858585;">暂无事件日志</span>';
+
+    // 保持滚动在顶部（因为是倒序显示）
+    output.scrollTop = 0;
+  }
+
+  // 格式化时间戳
+  formatTimestamp(timestamp) {
+    const date = new Date(timestamp);
+    const h = String(date.getHours()).padStart(2, '0');
+    const m = String(date.getMinutes()).padStart(2, '0');
+    const s = String(date.getSeconds()).padStart(2, '0');
+    const ms = String(date.getMilliseconds()).padStart(3, '0');
+    return `${h}:${m}:${s}.${ms}`;
+  }
+
+  // 格式化事件数据（人类可读）
+  formatEventData(data) {
+    if (!data || typeof data !== 'object') {
+      return JSON.stringify(data);
+    }
+
+    // 特殊格式化处理
+    const formatted = [];
+
+    // 常见字段的友好显示
+    if (data.module) formatted.push(`module=${data.module}`);
+    if (data.state) formatted.push(`state=${data.state}`);
+    if (data.status) formatted.push(`status=${data.status}`);
+    if (data.port) formatted.push(`port=${data.port}`);
+    if (data.pid) formatted.push(`pid=${data.pid}`);
+    if (data.error) formatted.push(`error="${data.error}"`);
+    if (data.message) formatted.push(`msg="${data.message}"`);
+    if (data.duration !== undefined) formatted.push(`duration=${data.duration}ms`);
+
+    // 如果有格式化的字段，返回格式化结果
+    if (formatted.length > 0) {
+      return formatted.join(' ');
+    }
+
+    // 否则返回紧凑的 JSON
+    return JSON.stringify(data);
+  }
+
+  // Glob 转正则表达式
+  globToRegex(pattern) {
+    const escaped = pattern
+      .replace(/[.+^${}()|[\]\\]/g, '\\$&') // 转义特殊字符
+      .replace(/\*/g, '.*') // * 匹配任意字符
+      .replace(/\?/g, '.'); // ? 匹配单个字符
+    return new RegExp(escaped, 'i'); // 不区分大小写
+  }
+
+  appendConsoleLog(message) {
+    // 保留旧方法以兼容其他代码
+    const output = document.getElementById('console-output');
+    const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
+    output.textContent += `[${timestamp}] ${message}\n`;
+    output.scrollTop = output.scrollHeight;
+  }
+
+  async runRegistryTest() {
+    // 调用 registry-tests.js 中的 runAllTests() 函数
+    if (typeof runAllTests === 'function') {
+      await runAllTests();
+    } else {
+      const output = document.getElementById('test-output');
+      output.textContent = '错误: registry-tests.js 未加载或 runAllTests 函数不存在';
+    }
+  }
+
+  clearTestOutput() {
+    document.getElementById('test-output').textContent = '';
+  }
+
+  async loadTokens() {
+    // 根据当前激活的标签页加载对应的 token
+    const activeTab = document.querySelector('.tab.active')?.dataset.tab || 'kite';
+    if (activeTab === 'kite') {
+      await this.loadKiteTokens();
+    } else {
+      await this.loadEvolTokens();
+    }
+  }
+
+  async loadKiteTokens() {
+    try {
+      const result = await this.callRpc('evol.list_kite_tokens', {});
+      const tokens = result.tokens || [];
+
+      const tbody = document.getElementById('kite-tokens-tbody');
+      if (tokens.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="9" class="text-muted" style="text-align:center;padding:40px;">暂无 Kite Token</td></tr>';
+        return;
+      }
+
+      // 缩略显示函数：头部6位...尾部8位
+      const truncate = (str, headLen = 6, tailLen = 8) => {
+        if (!str || str.length <= headLen + tailLen + 3) return str;
+        return `${str.substring(0, headLen)}...${str.substring(str.length - tailLen)}`;
+      };
+
+      let html = '';
+      tokens.forEach(token => {
+        // Token 缩略显示（前6位...后8位）
+        const tokenDisplay = truncate(token.token, 6, 8);
+
+        // 设备信息（设备名 + 设备ID缩略）
+        const deviceId = token.deviceId || 'unknown';
+        const deviceIdShort = truncate(deviceId, 6, 6);
+        const deviceInfo = `${token.deviceName || 'Unknown'}<br><span style="font-size:11px;color:#999;">${deviceIdShort}</span>`;
+
+        // 手机号显示
+        const phone = token.phone || '<span style="color:#999;">未绑定</span>';
+
+        // 时间格式化
+        const formatTime = (isoStr) => {
+          if (!isoStr) return '-';
+          const date = new Date(isoStr);
+          return date.toLocaleString('zh-CN', {
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+          });
+        };
+
+        const createdAt = formatTime(token.createdAt);
+        const lastUsedAt = formatTime(token.lastUsedAt);
+        const expiresAt = formatTime(token.expiresAt);
+
+        // 计算剩余有效期
+        const now = new Date();
+        const expireDate = token.expiresAt ? new Date(token.expiresAt) : null;
+        let remainingTime = '-';
+        let isExpired = false;
+
+        if (expireDate) {
+          const diffMs = expireDate - now;
+          isExpired = diffMs <= 0;
+
+          if (isExpired) {
+            remainingTime = '已过期';
+          } else {
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+            const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+
+            if (diffDays > 0) {
+              remainingTime = `${diffDays}天`;
+            } else if (diffHours > 0) {
+              remainingTime = `${diffHours}小时`;
+            } else {
+              const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+              remainingTime = `${diffMinutes}分钟`;
+            }
+          }
+        }
+
+        const status = isExpired ? '已过期' : '有效';
+        const statusColor = isExpired ? '#e74c3c' : '#27ae60';
+        const remainingColor = isExpired ? '#e74c3c' : (expireDate && (expireDate - now) < 7 * 24 * 60 * 60 * 1000 ? '#ff9800' : '#666');
+
+        html += `<tr>
+          <td><code style="font-size:11px;" title="${token.token}">${tokenDisplay}</code></td>
+          <td style="font-size:12px;">${deviceInfo}</td>
+          <td style="font-size:12px;">${phone}</td>
+          <td style="font-size:12px;">${createdAt}</td>
+          <td style="font-size:12px;">${lastUsedAt}</td>
+          <td style="font-size:12px;">${expiresAt}</td>
+          <td style="font-size:12px;color:${remainingColor};font-weight:500;">${remainingTime}</td>
+          <td style="color:${statusColor};font-weight:500;">${status}</td>
+          <td>
+            <button class="btn btn-sm btn-danger" onclick="app.deleteToken('${token.token}')" ${isExpired ? 'disabled' : ''}>吊销</button>
+          </td>
+        </tr>`;
+      });
+
+      tbody.innerHTML = html;
+    } catch (err) {
+      console.error('[evol] Load Kite tokens failed:', err);
+      document.getElementById('kite-tokens-tbody').innerHTML =
+        `<tr><td colspan="9" style="text-align:center;padding:40px;color:#e74c3c;">加载失败: ${err.message}</td></tr>`;
+    }
+  }
+
+  async loadEvolTokens() {
+    try {
+      const result = await this.callRpc('evol.list_evol_tokens', {});
+      const tokens = result.tokens || [];
+
+      const tbody = document.getElementById('evol-tokens-tbody');
+      if (tokens.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="8" class="text-muted" style="text-align:center;padding:40px;">暂无 Evol Token</td></tr>';
+        return;
+      }
+
+      // 缩略显示函数
+      const truncate = (str, headLen = 6, tailLen = 8) => {
+        if (!str || str.length <= headLen + tailLen + 3) return str;
+        return `${str.substring(0, headLen)}...${str.substring(str.length - tailLen)}`;
+      };
+
+      // 时间格式化
+      const formatTime = (isoStr) => {
+        if (!isoStr) return '-';
+        const date = new Date(isoStr);
+        return date.toLocaleString('zh-CN', {
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+      };
+
+      let html = '';
+      tokens.forEach(token => {
+        const tokenDisplay = truncate(token.token, 6, 8);
+        const phone = token.phone || '-';
+        const nickName = token.nickName || '-';
+        const credits = `${token.credits || 0} / ${token.creditsLimit || 0}`;
+        const vipInfo = `${token.vipTypeName || 'Unknown'}<br><span style="font-size:11px;color:#999;">剩余${token.vipRemainingDays || 0}天</span>`;
+        const obtainedAt = formatTime(token.obtainedAt);
+        const lastUsedAt = formatTime(token.lastUsedAt);
+        const expiresAt = formatTime(token.expiresAt);
+
+        html += `<tr>
+          <td><code style="font-size:11px;" title="${token.token}">${tokenDisplay}</code></td>
+          <td style="font-size:12px;">${phone}</td>
+          <td style="font-size:12px;">${nickName}</td>
+          <td style="font-size:12px;">${credits}</td>
+          <td style="font-size:12px;">${vipInfo}</td>
+          <td style="font-size:12px;">${obtainedAt}</td>
+          <td style="font-size:12px;">${lastUsedAt}</td>
+          <td style="font-size:12px;">${expiresAt}</td>
+        </tr>`;
+      });
+
+      tbody.innerHTML = html;
+    } catch (err) {
+      console.error('[evol] Load Evol tokens failed:', err);
+      document.getElementById('evol-tokens-tbody').innerHTML =
+        `<tr><td colspan="8" style="text-align:center;padding:40px;color:#e74c3c;">加载失败: ${err.message}</td></tr>`;
+    }
+  }
+
+  async deleteToken(token) {
+    const confirmed = await window.dialog.confirm('确定要吊销此 Token 吗？删除后该设备将无法访问。', '吊销 Token');
+    if (!confirmed) return;
+
+    try {
+      await this.callRpc('evol.revoke_token', { token });
+      window.dialog.success('Token 已成功吊销');
+      this.loadTokens();
+    } catch (err) {
+      window.dialog.error('吊销失败: ' + err.message);
+    }
+  }
+
+  async refreshTokens() {
+    this.loadTokens();
+  }
+
+  showToast(message, type = 'info') {
+    // 使用全局 showMessage 函数
+    showMessage(message, type);
+  }
+
+  // ========== 流量统计相关方法 ==========
+
+  startTrafficMonitoring() {
+    if (this.trafficUpdateTimer) return; // 已经在运行
+
+    // 每秒更新一次流量统计
+    this.trafficUpdateTimer = setInterval(() => {
+      this.updateTrafficStats();
+    }, 1000);
+  }
+
+  stopTrafficMonitoring() {
+    if (this.trafficUpdateTimer) {
+      clearInterval(this.trafficUpdateTimer);
+      this.trafficUpdateTimer = null;
+    }
+  }
+
+  updateTrafficStats() {
+    if (!this.kernelClient || !this.kernelClient.connected) return;
+
+    const now = Date.now();
+    const elapsed = (now - this.trafficStats.lastUpdateTime) / 1000; // 秒
+
+    // 从 kernelClient 获取流量数据
+    const rxBytes = this.kernelClient.bytesReceived || 0;
+    const txBytes = this.kernelClient.bytesSent || 0;
+
+    // 计算速率
+    const rxDelta = rxBytes - this.trafficStats.lastRxBytes;
+    const txDelta = txBytes - this.trafficStats.lastTxBytes;
+
+    this.trafficStats.rxRate = elapsed > 0 ? rxDelta / elapsed : 0;
+    this.trafficStats.txRate = elapsed > 0 ? txDelta / elapsed : 0;
+    this.trafficStats.rxTotal = rxBytes;
+    this.trafficStats.txTotal = txBytes;
+    this.trafficStats.lastRxBytes = rxBytes;
+    this.trafficStats.lastTxBytes = txBytes;
+    this.trafficStats.lastUpdateTime = now;
+
+    // 保存历史数据（最多保留 60 个点，即 1 分钟）
+    this.trafficStats.history.push({
+      time: now,
+      rxRate: this.trafficStats.rxRate,
+      txRate: this.trafficStats.txRate
+    });
+    if (this.trafficStats.history.length > 60) {
+      this.trafficStats.history.shift();
+    }
+
+    // 更新显示
+    this.updateTrafficDisplay();
+  }
+
+  updateTrafficDisplay() {
+    const trafficEl = document.getElementById('ws-traffic');
+    if (!trafficEl) return;
+
+    // 显示总速率（接收 + 发送）
+    const totalRate = this.trafficStats.rxRate + this.trafficStats.txRate;
+    trafficEl.textContent = `↓↑ ${this.formatBytes(totalRate)}/s`;
+
+    // 更新弹窗中的详细信息
+    const popup = document.getElementById('traffic-popup');
+    if (popup && popup.style.display === 'block') {
+      document.getElementById('traffic-rx-total').textContent = this.formatBytes(this.trafficStats.rxTotal);
+      document.getElementById('traffic-tx-total').textContent = this.formatBytes(this.trafficStats.txTotal);
+      document.getElementById('traffic-rx-rate').textContent = this.formatBytes(this.trafficStats.rxRate) + '/s';
+      document.getElementById('traffic-tx-rate').textContent = this.formatBytes(this.trafficStats.txRate) + '/s';
+
+      // 更新图表
+      this.updateTrafficChart();
+    }
+  }
+
+  formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1) + ' ' + sizes[i];
+  }
+
+  initTrafficChart() {
+    const canvas = document.getElementById('traffic-chart');
+    if (!canvas) return;
+
+    this.trafficChartCtx = canvas.getContext('2d');
+    this.updateTrafficChart();
+  }
+
+  updateTrafficChart() {
+    if (!this.trafficChartCtx) return;
+
+    const ctx = this.trafficChartCtx;
+    const canvas = ctx.canvas;
+    const width = canvas.width;
+    const height = canvas.height;
+
+    // 清空画布
+    ctx.clearRect(0, 0, width, height);
+
+    if (this.trafficStats.history.length < 2) return;
+
+    // 找到最大值用于缩放
+    let maxRate = 1024; // 最小 1KB
+    this.trafficStats.history.forEach(point => {
+      maxRate = Math.max(maxRate, point.rxRate, point.txRate);
+    });
+
+    // 绘制网格线
+    ctx.strokeStyle = '#e0e0e0';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const y = (height / 4) * i;
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+
+    // 绘制接收速率曲线（绿色）
+    ctx.strokeStyle = '#27ae60';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    this.trafficStats.history.forEach((point, i) => {
+      const x = (i / (this.trafficStats.history.length - 1)) * width;
+      const y = height - (point.rxRate / maxRate) * height;
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+    ctx.stroke();
+
+    // 绘制发送速率曲线（蓝色）
+    ctx.strokeStyle = '#3498db';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    this.trafficStats.history.forEach((point, i) => {
+      const x = (i / (this.trafficStats.history.length - 1)) * width;
+      const y = height - (point.txRate / maxRate) * height;
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+    ctx.stroke();
+
+    // 绘制图例
+    ctx.font = '11px sans-serif';
+    ctx.fillStyle = '#27ae60';
+    ctx.fillText('↓ 接收', 10, 15);
+    ctx.fillStyle = '#3498db';
+    ctx.fillText('↑ 发送', 60, 15);
+    ctx.fillStyle = '#666';
+    ctx.fillText(`最大: ${this.formatBytes(maxRate)}/s`, width - 100, 15);
+  }
+}
+
+
+// Global app instance
+let app;
+
+// Initialize app on load
+document.addEventListener('DOMContentLoaded', () => {
+  app = new EvolApp();
+  window.app = app; // 暴露到全局，供 registry-tests.js 使用
+  app.init();
+
+  // Login form handlers
+  document.getElementById('btn-send-code').addEventListener('click', async () => {
+    const phone = document.getElementById('login-phone').value.trim();
+
+    if (!phone) {
+      showMessage('请输入手机号', 'error');
+      return;
+    }
+
+    if (!/^1[3-9]\d{9}$/.test(phone)) {
+      showMessage('请输入有效的中国大陆手机号（11位数字，以1开头）', 'error');
+      return;
+    }
+
+    const btn = document.getElementById('btn-send-code');
+    btn.disabled = true;
+    btn.textContent = '发送中...';
+
+    try {
+      const data = await app.sendSMS(phone);
+      console.log('SMS API response:', data);
+
+      if (data.success) {
+        showMessage('验证码已发送，请查收短信', 'success');
+        // 焦点移到验证码输入框
+        document.getElementById('login-code').focus();
+        let countdown = 60;
+        const timer = setInterval(() => {
+          countdown--;
+          btn.textContent = countdown + '秒后重试';
+          if (countdown <= 0) {
+            clearInterval(timer);
+            btn.disabled = false;
+            btn.textContent = '发送验证码';
+          }
+        }, 1000);
+      } else {
+        const errorMsg = data.msg || data.message || '发送失败，请稍后重试';
+        showMessage('发送失败: ' + errorMsg, 'error');
+        console.error('SMS API error:', data);
+        btn.disabled = false;
+        btn.textContent = '发送验证码';
+      }
+    } catch (err) {
+      console.error('SMS request error:', err);
+      showMessage('网络错误: ' + err.message, 'error');
+      btn.disabled = false;
+      btn.textContent = '发送验证码';
+    }
+  });
+
+  document.getElementById('btn-login').addEventListener('click', async () => {
+    const phone = document.getElementById('login-phone').value.trim();
+    const code = document.getElementById('login-code').value.trim();
+
+    if (!phone || !code) {
+      showMessage('请输入手机号和验证码', 'error');
+      return;
+    }
+
+    const btn = document.getElementById('btn-login');
+    btn.disabled = true;
+    btn.textContent = '登录中...';
+
+    try {
+      const data = await app.login(phone, code);
+      if (data.success) {
+        showMessage('登录成功', 'success');
+      } else {
+        showMessage(data.msg || '登录失败', 'error');
+        btn.disabled = false;
+        btn.textContent = '登录';
+      }
+    } catch (err) {
+      showMessage('网络错误', 'error');
+      btn.disabled = false;
+      btn.textContent = '登录';
+    }
+  });
+
+  document.getElementById('btn-logout').addEventListener('click', () => {
+    app.logout();
+  });
+
+  // Module management event listeners
+  document.getElementById('btn-toggle-console')?.addEventListener('click', () => {
+    app.toggleConsole();
+  });
+
+  document.getElementById('btn-clear-console')?.addEventListener('click', () => {
+    app.clearConsole();
+  });
+
+  document.getElementById('btn-restart-kite')?.addEventListener('click', () => {
+    app.restartKite();
+  });
+
+  document.getElementById('btn-test-registry')?.addEventListener('click', () => {
+    app.runRegistryTest();
+  });
+
+  document.getElementById('btn-clear-test-output')?.addEventListener('click', () => {
+    app.clearTestOutput();
+  });
+
+  document.getElementById('btn-module-back')?.addEventListener('click', () => {
+    app.loadModules();
+  });
+
+  document.getElementById('btn-reset-defaults')?.addEventListener('click', () => {
+    app.resetModuleDefaults();
+  });
+
+  // Token management event listeners
+  document.getElementById('btn-refresh-tokens')?.addEventListener('click', () => {
+    app.refreshTokens();
+  });
+
+  // Tab switching event listeners
+  document.querySelectorAll('.tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      // 移除所有 active 类
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+      // 添加 active 类到当前标签
+      tab.classList.add('active');
+      const tabName = tab.dataset.tab;
+      document.getElementById(`tab-${tabName}`).classList.add('active');
+
+      // 加载对应的数据
+      if (tabName === 'kite') {
+        app.loadKiteTokens();
+      } else if (tabName === 'evol') {
+        app.loadEvolTokens();
+      }
+    });
+  });
+
+  // 流量统计弹窗事件
+  document.getElementById('ws-traffic')?.addEventListener('click', () => {
+    const popup = document.getElementById('traffic-popup');
+    if (popup) {
+      popup.style.display = popup.style.display === 'none' ? 'block' : 'none';
+      if (popup.style.display === 'block') {
+        app.initTrafficChart();
+      }
+    }
+  });
+
+  document.getElementById('close-traffic-popup')?.addEventListener('click', () => {
+    const popup = document.getElementById('traffic-popup');
+    if (popup) popup.style.display = 'none';
+  });
+
+  // 点击弹窗外部关闭
+  document.addEventListener('click', (e) => {
+    const popup = document.getElementById('traffic-popup');
+    const trafficEl = document.getElementById('ws-traffic');
+    if (popup && popup.style.display === 'block' &&
+        !popup.contains(e.target) && e.target !== trafficEl) {
+      popup.style.display = 'none';
+    }
+  });
+});
+
+function showMessage(msg, type) {
+  const el = document.getElementById('login-message');
+  el.textContent = msg;
+  el.className = type === 'error' ? 'error-msg' : 'success-msg';
+}