@agentunion/kite 1.3.2 → 1.5.0

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

@@ -0,0 +1,1949 @@
+// Evol App - Main Application Logic
+
+class EvolApp {
+  constructor() {
+    // 优先从 Cookie 恢复 kiteToken（防止 Ctrl+F5 清除 localStorage）
+    this.kiteToken = this._getKiteToken();
+    this.userInfo = null;
+    this.ws = null;
+    this.wsConnected = false;
+    this.currentPage = 'account';
+    this.deviceInfo = this._getDeviceInfo();
+    this.statsRefreshTimer = null;
+    this.moduleActionPending = new Map(); // 模块操作防抖
+    this.currentModuleName = null; // 当前查看的模块名
+
+    // 事件日志相关
+    this.eventLogs = []; // 存储所有事件日志 {timestamp, module, event, data, raw}
+    this.consoleExpanded = false; // 控制台是否展开
+    this.eventSubscribed = false; // 是否已订阅全部事件
+    this.knownModules = new Set(); // 已知的模块列表
+    this.knownEvents = new Set(); // 已知的事件类型
+
+    // 账户信息缓存（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();
+    }
+
+    // 然后异步更新数据
+    try {
+      const res = await fetch('/api/get_user_info', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ kiteToken: this.kiteToken })
+      });
+      const data = await res.json();
+
+      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 fetch('/api/logout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ kiteToken: this.kiteToken })
+      });
+    } catch (err) {}
+
+    this._clearKiteToken();
+    location.reload();
+  }
+
+  initMainApp() {
+    // 初始化 Kernel 客户端和导航
+    this.wsRetryCount = 0;
+    this.wsMaxRetries = 6;
+    this.wsRetryDelay = 1000; // 初始延迟 1 秒
+    this.wsGaveUp = false;
+    this.initKernelClient();
+    this.loadAccountInfo();
+    this.setupNavigation();
+
+    // 监听页面可见性变化，页面重新可见时如果已放弃则重新连接
+    document.addEventListener('visibilitychange', () => {
+      if (!document.hidden && this.wsGaveUp) {
+        console.log('[Evol] Page visible again, retrying connection');
+        this.wsGaveUp = false;
+        this.wsRetryCount = 0;
+        this.wsRetryDelay = 1000;
+        this.initKernelClient();
+      }
+    });
+  }
+
+  updateWsIndicator(status, text, color) {
+    const indicator = document.getElementById('ws-indicator');
+    if (indicator) {
+      indicator.innerHTML = `${status} ${text}`;
+      indicator.style.color = color;
+    }
+  }
+
+  initKernelClient() {
+    // 如果已放弃，不再重试（除非用户主动触发）
+    if (this.wsGaveUp) {
+      return;
+    }
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${proto}//${location.host}/ws/management`;
+
+    console.log('[Evol] Connecting to', url, `(attempt ${this.wsRetryCount + 1}/${this.wsMaxRetries})`);
+
+    // 显示连接中状态
+    if (this.wsRetryCount === 0) {
+      this.updateWsIndicator('◐', '连接中...', '#ff9800');
+    } else {
+      this.updateWsIndicator('◐', `重连中... (${this.wsRetryCount}/${this.wsMaxRetries})`, '#ff9800');
+    }
+
+    this.ws = new WebSocket(url);
+
+    this.ws.onopen = () => {
+      console.log('[Evol] WebSocket connected');
+      this.wsConnected = true;
+      this.wsRetryCount = 0;
+      this.wsRetryDelay = 1000;
+      this.updateWsIndicator('●', 'Kite 已连接', '#27ae60');
+    };
+
+    this.ws.onerror = (error) => {
+      console.error('[Evol] WebSocket error:', error);
+    };
+
+    this.ws.onclose = () => {
+      console.log('[Evol] WebSocket closed');
+      this.wsConnected = false;
+
+      // 检查是否已达到最大重试次数
+      if (this.wsRetryCount >= this.wsMaxRetries) {
+        console.log('[Evol] Max retries reached, giving up');
+        this.wsGaveUp = true;
+        this.updateWsIndicator('✕', '已断开', '#e74c3c');
+        return;
+      }
+
+      // 指数退避重试
+      this.wsRetryCount++;
+      const delay = Math.min(this.wsRetryDelay * Math.pow(2, this.wsRetryCount - 1), 30000);
+      console.log(`[Evol] Retrying in ${delay}ms...`);
+
+      setTimeout(() => this.initKernelClient(), delay);
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+
+        // 处理事件通知（/ws/management 格式：{type: event_type, data: {...}}）
+        if (msg.type && msg.type !== 'connected' && msg.type !== 'ping' && msg.type !== 'pong') {
+          const eventType = msg.type;
+          const eventData = msg.data || {};
+
+          // 如果控制台展开，添加到事件日志
+          if (this.consoleExpanded) {
+            this.addEventLog(eventType, eventData);
+          }
+
+          // 刷新模块列表（仅针对 module.* 事件）
+          if (eventType.startsWith('module.') && this.currentPage === 'modules') {
+            this.loadModules();
+          }
+        }
+      } catch (e) {
+        console.error('[Evol] Message parse error:', e);
+      }
+    };
+  }
+
+  async callRpc(method, params = {}) {
+    try {
+      const res = await fetch(`/api/rpc/${method}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(params)
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.detail || `HTTP ${res.status}`);
+      }
+
+      return await res.json();
+    } 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', () => {
+        const pageName = item.dataset.page;
+        this.currentPage = pageName;
+
+        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 (pageName === 'modules') this.loadModules();
+        else if (pageName === 'credits') this.loadCreditsStats();
+        else if (pageName === 'tokens') this.loadTokens();
+      });
+    });
+
+    document.getElementById('sidebar-toggle').addEventListener('click', () => {
+      document.getElementById('sidebar').classList.toggle('collapsed');
+    });
+  }
+
+  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 res = await fetch('/api/get_credits_stats', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ kiteToken: this.kiteToken, period: 'day' })
+      });
+      const data = await res.json();
+
+      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>';
+    }
+  }
+
+  async loadModules() {
+    // Reset to list view
+    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 || [];
+
+      const tbody = document.getElementById('modules-tbody');
+      if (modules.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="9" 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(--success);">运行中</span>'
+            : '<span style="color:var(--gray-400);">已停止</span>';
+
+        // 默认状态下拉选项
+        const stateOptions = `
+          <option value="enabled" ${mod.state === 'enabled' ? 'selected' : ''}>自动</option>
+          <option value="manual" ${mod.state === 'manual' ? 'selected' : ''}>手动</option>
+          <option value="disabled" ${mod.state === 'disabled' ? 'selected' : ''}>禁用</option>
+        `;
+
+        // 统一操作按钮逻辑
+        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:72px;">${btnLabel}</button>`;
+        }
+
+        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>${runningStatus}</td>
+          <td onclick="event.stopPropagation()">
+            <select class="module-state-select" data-module="${mod.name}" onchange="app.onModuleStateChange(this)">
+              ${stateOptions}
+            </select>
+          </td>
+          <td onclick="event.stopPropagation()">
+            ${btnHtml}
+          </td>
+        </tr>`;
+      });
+
+      tbody.innerHTML = html;
+    } catch (err) {
+      console.error('[Evol] Load modules failed:', err);
+      document.getElementById('modules-tbody').innerHTML =
+        `<tr><td colspan="8" 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);
+        }
+      }
+
+      // 计算运行时长
+      const uptime = eventStats.uptime_seconds || 0;
+
+      // 计算模块数量
+      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(uptime);
+      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);
+  }
+
+  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');
+      }
+
+      // 绑定自动保存事件监听器
+      this._bindAutoSaveListeners();
+
+    } 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);
+      }
+    }
+  }
+
+  // 绑定自动保存监听器
+  _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;
+
+    // 禁用下拉，防止重复操作
+    selectEl.disabled = true;
+
+    try {
+      // 调用 RPC 更新模块配置
+      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');
+      // 恢复原值
+      this.loadModules();
+    } finally {
+      selectEl.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.callRpc('evol.subscribe_events', { events: ['*'] });
+      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.callRpc('evol.subscribe_events', { events: ['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);
+  }
+}
+
+
+// Global app instance
+let app;
+
+// Initialize app on load
+document.addEventListener('DOMContentLoaded', () => {
+  app = new EvolApp();
+  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();
+      }
+    });
+  });
+});
+
+function showMessage(msg, type) {
+  const el = document.getElementById('login-message');
+  el.textContent = msg;
+  el.className = type === 'error' ? 'error-msg' : 'success-msg';
+}