@agentunion/kite 1.3.2 → 1.5.0

package/extensions/services/web/static/js/app.js

@@ -1,12 +1,49 @@
 // ============================================================
 // API Client
 // ============================================================
+
+// 全局注册中心缓存
+const _registryCache = {
+    lastUpdateTime: 0,
+    records: {}  // field -> {results, fetchedAt, lastUpdateTime}
+};
+
+// 监听缓存失效事件
+window.addEventListener('registryCacheInvalidate', (event) => {
+    const data = event.detail;
+    console.log('[RegistryCache] Cache invalidate event:', data);
+
+    if (data.last_update_time) {
+        // 更新全局时间戳
+        _registryCache.lastUpdateTime = data.last_update_time;
+
+        // 清空所有过期缓存
+        for (const field in _registryCache.records) {
+            const record = _registryCache.records[field];
+            if (record.lastUpdateTime < data.last_update_time) {
+                console.log(`[RegistryCache] Invalidating cache for field="${field}"`);
+                delete _registryCache.records[field];
+            }
+        }
+    }
+});
+
 const API = {
     async get(url) {
         const resp = await fetch(url);
         if (!resp.ok) {
             const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-            throw new Error(err.detail || resp.statusText);
+            let errorMsg = resp.statusText;
+            if (err.detail) {
+                if (typeof err.detail === 'string') {
+                    errorMsg = err.detail;
+                } else if (Array.isArray(err.detail)) {
+                    errorMsg = err.detail.map(e => e.msg || JSON.stringify(e)).join('; ');
+                } else {
+                    errorMsg = JSON.stringify(err.detail);
+                }
+            }
+            throw new Error(errorMsg);
         }
         return resp.json();
     },
@@ -19,7 +56,17 @@ const API = {
         });
         if (!resp.ok) {
             const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-            throw new Error(err.detail || resp.statusText);
+            let errorMsg = resp.statusText;
+            if (err.detail) {
+                if (typeof err.detail === 'string') {
+                    errorMsg = err.detail;
+                } else if (Array.isArray(err.detail)) {
+                    errorMsg = err.detail.map(e => e.msg || JSON.stringify(e)).join('; ');
+                } else {
+                    errorMsg = JSON.stringify(err.detail);
+                }
+            }
+            throw new Error(errorMsg);
         }
         return resp.json();
     },
@@ -32,7 +79,18 @@ const API = {
         });
         if (!resp.ok) {
             const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-            throw new Error(err.detail || resp.statusText);
+            let errorMsg = resp.statusText;
+            if (err.detail) {
+                if (typeof err.detail === 'string') {
+                    errorMsg = err.detail;
+                } else if (Array.isArray(err.detail)) {
+                    // FastAPI validation errors: [{"loc": [...], "msg": "...", "type": "..."}]
+                    errorMsg = err.detail.map(e => e.msg || JSON.stringify(e)).join('; ');
+                } else {
+                    errorMsg = JSON.stringify(err.detail);
+                }
+            }
+            throw new Error(errorMsg);
         }
         return resp.json();
     },
@@ -41,12 +99,118 @@ const API = {
         const resp = await fetch(url, { method: 'DELETE' });
         if (!resp.ok) {
             const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-            throw new Error(err.detail || resp.statusText);
+            let errorMsg = resp.statusText;
+            if (err.detail) {
+                if (typeof err.detail === 'string') {
+                    errorMsg = err.detail;
+                } else if (Array.isArray(err.detail)) {
+                    errorMsg = err.detail.map(e => e.msg || JSON.stringify(e)).join('; ');
+                } else {
+                    errorMsg = JSON.stringify(err.detail);
+                }
+            }
+            throw new Error(errorMsg);
         }
         return resp.json();
     },
 };
 
+// ============================================================
+// Module RPC Lookup Helper
+// ============================================================
+/**
+ * 通过字段名查询模块的 RPC 方法（支持智能降级）
+ *
+ * 优先级：
+ * 1. 目标模块自己的 RPC
+ * 2. 目标模块所属的 Launcher RPC（通过 launcher_id）
+ * 3. 本地 Launcher RPC（launcher）
+ *
+ * @param {string} moduleName - 模块名
+ * @param {string} field - 字段名（如 "tools.rpc.module.config.get"）
+ * @returns {Promise<{module: string, method: string, needsModuleName: boolean}|null>}
+ */
+async function lookupModuleRpc(moduleName, field) {
+    try {
+        console.log(`[lookupModuleRpc] Looking up field="${field}" for module="${moduleName}"`);
+
+        // 检查缓存
+        const cached = _registryCache.records[field];
+        if (cached && cached.lastUpdateTime >= _registryCache.lastUpdateTime) {
+            console.log(`[lookupModuleRpc] Using cached result for field="${field}"`);
+            // 使用缓存的 results 进行后续处理
+            const result = { results: cached.results, last_update_time: cached.lastUpdateTime };
+            return _processLookupResult(result, moduleName, field);
+        }
+
+        // 查询所有注册了该字段的模块（不限定 module）
+        const result = await kernelClient.call("registry.lookup", {
+            field: field
+        });
+
+        console.log(`[lookupModuleRpc] Lookup result:`, result);
+
+        // 保存到缓存
+        if (result && result.last_update_time) {
+            _registryCache.records[field] = {
+                results: result.results || [],
+                fetchedAt: Date.now(),
+                lastUpdateTime: result.last_update_time
+            };
+            // 更新全局时间戳
+            if (result.last_update_time > _registryCache.lastUpdateTime) {
+                _registryCache.lastUpdateTime = result.last_update_time;
+            }
+        }
+
+        return _processLookupResult(result, moduleName, field);
+    } catch (err) {
+        console.error(`[lookupModuleRpc] Exception:`, err);
+        return null;
+    }
+}
+
+/**
+ * 处理 lookup 结果，提取合适的 RPC 方法
+ */
+function _processLookupResult(result, moduleName, field) {
+    // kernelClient.call() 返回的是 msg.result，不是整个 msg
+    if (!result || !result.results?.length) {
+        console.warn(`[lookupModuleRpc] No results found for field="${field}"`);
+        return null;
+    }
+
+    // 优先级 1：目标模块自己的 RPC
+    const selfRpc = result.results.find(r => r.module === moduleName);
+    if (selfRpc) {
+        // value 现在是对象 {method: "xxx", description: "xxx"}
+        const method = typeof selfRpc.value === 'string' ? selfRpc.value : selfRpc.value.method;
+        console.log(`[lookupModuleRpc] Found self RPC: ${moduleName}.${method}`);
+        return {
+            module: moduleName,
+            method: method,
+            needsModuleName: false
+        };
+    }
+
+    // 优先级 2 & 3：使用 Launcher 的 RPC（简化版，直接查找 launcher）
+    const launcherRpc = result.results.find(r => r.module === "launcher");
+    if (launcherRpc) {
+        // value 现在是对象 {method: "xxx", description: "xxx"}
+        const method = typeof launcherRpc.value === 'string' ? launcherRpc.value : launcherRpc.value.method;
+        console.log(`[lookupModuleRpc] Fallback to launcher RPC: launcher.${method}`);
+        return {
+            module: "launcher",
+            method: method,
+            needsModuleName: true
+        };
+    }
+
+    console.warn(`[lookupModuleRpc] No suitable RPC found for field="${field}"`);
+    return null;
+}
+
+
 // ============================================================
 // Toast Notifications
 // ============================================================
@@ -72,6 +236,15 @@ function showToast(message, type = 'info') {
     toast.className = `toast toast-${type}`;
     toast.textContent = message;
 
+    // 错误类型自动复制到剪贴板
+    if (type === 'error') {
+        try {
+            navigator.clipboard.writeText(message);
+        } catch (e) {
+            // 剪贴板 API 不可用时忽略
+        }
+    }
+
     const colors = { info: '#3b82f6', success: '#10b981', error: '#ef4444' };
     toast.style.cssText =
         `padding:12px 20px;border-radius:8px;color:#fff;font-size:14px;` +
@@ -103,6 +276,11 @@ let currentPage = '';
 function navigate(page) {
     if (!pages.includes(page)) page = 'dashboard';
 
+    // Stop stats auto-refresh when leaving modules page
+    if (currentPage === 'modules' && page !== 'modules') {
+        stopStatsAutoRefresh();
+    }
+
     // Toggle .active class on page sections (CSS: .page { display:none } .page.active { display:block })
     pages.forEach((p) => {
         const el = document.getElementById(`page-${p}`);
@@ -3085,6 +3263,12 @@ function _setVal(id, value) {
     if (el) el.value = value != null ? String(value) : '';
 }
 
+/** Get value from an input/select element. */
+function _getVal(id) {
+    const el = document.getElementById(id);
+    return el ? el.value : '';
+}
+
 /** Set a <select> value, adding the option dynamically if it doesn't exist. */
 function _setSelectVal(id, value) {
     const el = document.getElementById(id);
@@ -4208,61 +4392,1060 @@ function closeDevLogArchiveModal() {
 // ============================================================
 let _moduleSaveTimer = null;
 let _currentModuleName = '';
+// 模块运行状态缓存: { moduleName: { running: bool, pid: number|null } }
+let _moduleRunStates = {};
+// 操作中的模块: moduleName → 'start' | 'stop'
+let _moduleActionPending = new Map();
+// 管理 WebSocket 连接
+let _managementWs = null;
+let _managementWsConnected = false;
+// 统计数据刷新定时器
+let _statsRefreshTimer = null;
+// 统计详情数据缓存
+let _statsDetailCache = {};
+// 控制台状态
+let _consoleExpanded = false;
+let _consoleEventSubscribed = false;
+
+async function _fetchModuleRunStates() {
+    /**
+     * 通过 WebSocket RPC 查询 Launcher 获取各模块实际运行状态。
+     * 失败时（如 Kernel 未连接）返回空对象，不影响页面其余渲染。
+     */
+    try {
+        if (!kernelClient || !kernelClient.connected) {
+            console.warn('[modules] kernelClient not connected, cannot fetch run states');
+            return {};
+        }
+        console.log('[modules] Calling launcher.list_modules...');
+        const res = await kernelClient.call('launcher.list_modules', {});
+        console.log('[modules] launcher.list_modules result:', res);
+        const map = {};
+        for (const m of (res.modules || [])) {
+            const running = m.actual_state ? m.actual_state.startsWith('running') : false;
+            map[m.name] = { running, pid: m.pid || null };
+            console.log(`[modules] Module ${m.name}: running=${running}, actual_state=${m.actual_state}`);
+        }
+        // RPC 调用成功说明 Kernel 和 Launcher 必然在运行，但它们不在自己的列表中
+        if (!map['kernel'])   map['kernel']   = { running: true, pid: null };
+        if (!map['launcher']) map['launcher'] = { running: true, pid: null };
+        console.log('[modules] Final runStates map:', map);
+        return map;
+    } catch (err) {
+        console.error('[modules] 获取运行状态失败:', err);
+        return {};
+    }
+}
+
+// 基础设施模块（infrastructure），不可由用户手动启动/停止
+const _CORE_MODULES = new Set(['kernel', 'launcher']);
+
+function _isCoreModule(name) {
+    return _CORE_MODULES.has(name);
+}
+
+function _isModuleRunning(name) {
+    const s = _moduleRunStates[name];
+    return s ? s.running : false;
+}
+
+// ============================================================
+// Management WebSocket — 实时接收模块状态变更
+// ============================================================
+
+function connectManagementWebSocket() {
+    if (_managementWs && _managementWs.readyState === WebSocket.OPEN) {
+        return; // 已连接
+    }
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${proto}//${location.host}/ws/management`;
+
+    console.log('[Management WS] Connecting to', url);
+    _managementWs = new WebSocket(url);
+
+    _managementWs.onopen = () => {
+        console.log('[Management WS] Connected');
+        _managementWsConnected = true;
+        _updateWsIndicator();
+    };
+
+    _managementWs.onmessage = (event) => {
+        try {
+            const msg = JSON.parse(event.data);
+            _handleManagementEvent(msg);
+        } catch (err) {
+            console.error('[Management WS] Parse error:', err);
+        }
+    };
+
+    _managementWs.onclose = () => {
+        console.log('[Management WS] Disconnected, reconnecting in 3s...');
+        _managementWsConnected = false;
+        _updateWsIndicator();
+        _managementWs = null;
+        setTimeout(connectManagementWebSocket, 3000);
+    };
+
+    _managementWs.onerror = (err) => {
+        console.error('[Management WS] Error:', err);
+    };
+
+    // 心跳（每 30 秒）
+    setInterval(() => {
+        if (_managementWs && _managementWs.readyState === WebSocket.OPEN) {
+            _managementWs.send(JSON.stringify({ type: 'ping' }));
+        }
+    }, 30000);
+}
+
+function _handleManagementEvent(msg) {
+    const { type, data } = msg;
+
+    console.log('[Management WS] Event:', type, data);
+
+    switch (type) {
+        case 'connected':
+            console.log('[Management WS] Server confirmed connection');
+            break;
+
+        case 'pong':
+            // 心跳响应
+            break;
+
+        case 'module.started':
+        case 'module.ready':
+            // 模块启动完成
+            if (data.module_id) {
+                _onModuleStatusChange(data.module_id, 'running');
+            }
+            break;
+
+        case 'module.stopped':
+        case 'module.crashed':
+            // 模块停止或崩溃
+            if (data.module_id) {
+                _onModuleStatusChange(data.module_id, 'stopped');
+            }
+            break;
+
+        case 'module.exiting':
+        case 'module.shutdown.ack':
+            // 模块正在关闭
+            if (data.module_id) {
+                _onModuleStatusChange(data.module_id, 'stopping');
+            }
+            break;
+
+        default:
+            // 其他事件暂不处理
+            break;
+    }
+}
+
+function _onModuleStatusChange(moduleName, status) {
+    console.log(`[Management WS] Module ${moduleName} → ${status}`);
+
+    // 更新缓存
+    if (status === 'running') {
+        _moduleRunStates[moduleName] = { running: true, pid: null };
+        _moduleActionPending.delete(moduleName);
+    } else if (status === 'stopped') {
+        _moduleRunStates[moduleName] = { running: false, pid: null };
+        _moduleActionPending.delete(moduleName);
+    } else if (status === 'stopping') {
+        // 保持 pending 状态，不清除
+    }
+
+    // 刷新 UI
+    _refreshModuleButtonsEverywhere(moduleName);
+
+    // 如果当前在模块详情页，刷新详情
+    if (_currentModuleName === moduleName) {
+        openModuleDetail(moduleName);
+    }
+}
+
+function _updateWsIndicator() {
+    // 更新页面上的 WebSocket 连接指示器（仅 header）
+    const indicator = document.getElementById('ws-indicator');
+    if (indicator) {
+        if (_managementWsConnected) {
+            indicator.textContent = '● 已连线';
+            indicator.style.color = 'var(--success)';
+        } else {
+            indicator.textContent = '○ 未连线';
+            indicator.style.color = 'var(--gray-400)';
+        }
+    }
+}
 
 async function loadModules() {
-    // Reset to grid view
-    document.getElementById('modules-grid')?.classList.remove('hidden');
+    // 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('token-management-section')?.classList.remove('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
+    loadModuleStats();
+    startStatsAutoRefresh();
 
     try {
-        const modules = await API.get('/api/modules');
-        renderModulesGrid(modules);
+        // 等待 kernelClient 连接（最多等待 5 秒）
+        if (!kernelClient || !kernelClient.connected) {
+            console.log('[modules] Waiting for kernelClient to connect...');
+            await new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    reject(new Error('kernelClient 连接超时'));
+                }, 5000);
+
+                const checkAndResolve = () => {
+                    if (kernelClient && kernelClient.connected) {
+                        clearTimeout(timeout);
+                        resolve();
+                        return true;
+                    }
+                    return false;
+                };
+
+                // 立即检查一次
+                if (checkAndResolve()) return;
+
+                // 监听连接事件
+                window.addEventListener('kernelClientReady', () => {
+                    checkAndResolve();
+                }, { once: true });
+            });
+        }
+
+        console.log('[modules] kernelClient connected, fetching modules...');
+
+        // 通过 RPC 获取模块列表（包含元数据和运行状态）
+        let res;
+        try {
+            res = await kernelClient.call('launcher.list_modules', {});
+        } catch (err) {
+            if (err.message && err.message.includes('not ready')) {
+                // Launcher 未就绪，等待 1 秒后重试
+                console.warn('[modules] Launcher not ready, retrying in 1s...');
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                res = await kernelClient.call('launcher.list_modules', {});
+            } else {
+                throw err;
+            }
+        }
+        const modules = res.modules || [];
+
+        console.log('[modules] Fetched modules:', modules.length);
+
+        // 构建运行状态映射
+        const runStates = {};
+        for (const m of modules) {
+            const running = m.actual_state ? m.actual_state.startsWith('running') : false;
+            runStates[m.name] = { running, pid: m.pid || null };
+            console.log(`[modules] Module ${m.name}: running=${running}, actual_state=${m.actual_state}`);
+        }
+        // RPC 调用成功说明 Kernel 和 Launcher 必然在运行
+        if (!runStates['kernel'])   runStates['kernel']   = { running: true, pid: null };
+        if (!runStates['launcher']) runStates['launcher'] = { running: true, pid: null };
+
+        _moduleRunStates = runStates;
+        renderModulesTable(modules);
+    } catch (err) {
+        console.error('[modules] Load failed:', err);
+        const tbody = document.getElementById('modules-tbody');
+        if (tbody) tbody.innerHTML = `<tr><td colspan="9" class="text-muted" style="text-align:center;padding:40px;">加载失败: ${escapeHtml(err.message)}</td></tr>`;
+    }
+}
+
+async function loadModuleStats() {
+    try {
+        // Wait for kernelClient
+        if (!kernelClient || !kernelClient.connected) {
+            await new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => reject(new Error('timeout')), 3000);
+                const check = () => {
+                    if (kernelClient?.connected) {
+                        clearTimeout(timeout);
+                        resolve();
+                        return true;
+                    }
+                    return false;
+                };
+                if (check()) return;
+                window.addEventListener('kernelClientReady', check, { once: true });
+            });
+        }
+
+        // Get kernel health (includes uptime)
+        const health = await kernelClient.call('kernel.health', {});
+        const eventStats = health.event_stats || {};
+
+        // Get kernel stats (includes event counters)
+        const stats = await kernelClient.call('kernel.stats', {});
+        const counters = stats.counters || {};
+        const rpcStats = stats.rpc || {};
+
+        // Get all modules (with retry for launcher not ready)
+        let modules = [];
+        let modulesRes = null;
+        try {
+            modulesRes = await kernelClient.call('launcher.list_modules', {});
+            modules = modulesRes.modules || [];
+        } catch (err) {
+            if (err.message.includes('not ready')) {
+                // Launcher not ready yet, skip module stats (silent)
+                // This is normal during startup, no need to log
+            } else {
+                throw err;
+            }
+        }
+
+        // Calculate uptime
+        const uptime = eventStats.uptime_seconds || 0;
+        const uptimeStr = formatUptime(uptime);
+
+        // Count modules
+        const moduleCount = modules.length;
+
+        // Get all registry records and categorize
+        let registryByCategory = {
+            modules: 0,        // module.* 字段
+            rpc: 0,            // tools.rpc.* 字段
+            hook: 0,           // tools.hook.* 字段
+            api: 0,            // tools.api.* 字段
+            other: 0           // 其他字段
+        };
+        let registryDetails = [];
+        let totalRecords = 0;
+
+        for (const mod of modules) {
+            const modName = mod.name;
+            try {
+                // Query registry for this module
+                const regRes = await kernelClient.call('registry.lookup', { module: modName });
+                const records = regRes.results || [];
+                totalRecords += records.length;
+
+                // Categorize by field path
+                for (const rec of records) {
+                    const field = rec.field || '';
+                    registryDetails.push({ module: modName, field, value: rec.value });
+
+                    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++;
+                    } else {
+                        registryByCategory.other++;
+                    }
+                }
+            } catch (e) {
+                // Module may not have registered yet
+                console.warn(`[stats] Failed to query registry for ${modName}:`, e.message);
+            }
+        }
+
+        // Event stats
+        const eventsRouted = counters.events_routed || 0;
+
+        // RPC stats
+        const rpcCalls = rpcStats.total || 0;
+
+        // Update UI
+        document.getElementById('stat-uptime').textContent = uptimeStr;
+        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;
+
+        // Cache detail data for tooltips (always update)
+        _statsDetailCache = {
+            uptime: { startTime: Date.now() - uptime * 1000, uptime },
+            modules,
+            registry: {
+                totalRecords,
+                byCategory: registryByCategory,
+                details: registryDetails
+            },
+            events: counters,
+            rpcStats
+        };
     } catch (err) {
-        const grid = document.getElementById('modules-grid');
-        if (grid) grid.innerHTML = `<p class="text-muted" style="padding:40px;text-align:center;">加载失败: ${escapeHtml(err.message)}</p>`;
+        console.error('[stats] Load failed:', err);
+        // Don't clear UI on error, keep last known values
+    }
+}
+
+function formatUptime(seconds) {
+    if (seconds < 60) return `${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}天`;
+}
+
+function startStatsAutoRefresh() {
+    // Clear existing timer
+    if (_statsRefreshTimer) {
+        clearInterval(_statsRefreshTimer);
+    }
+    // Refresh every 1 second
+    _statsRefreshTimer = setInterval(() => {
+        loadModuleStats();
+    }, 1000);
+}
+
+function stopStatsAutoRefresh() {
+    if (_statsRefreshTimer) {
+        clearInterval(_statsRefreshTimer);
+        _statsRefreshTimer = null;
+    }
+}
+
+// ============================================================
+// Statistics Tooltip
+// ============================================================
+
+function initStatsTooltip() {
+    const tooltip = document.getElementById('stat-tooltip');
+    if (!tooltip) return;
+
+    document.querySelectorAll('.stat-item').forEach(item => {
+        item.addEventListener('mouseenter', (e) => showStatTooltip(e, item));
+        item.addEventListener('mousemove', (e) => moveStatTooltip(e));
+        item.addEventListener('mouseleave', () => hideStatTooltip());
+    });
+}
+
+function showStatTooltip(e, item) {
+    const tooltip = document.getElementById('stat-tooltip');
+    const type = item.dataset.statType;
+    const content = getStatTooltipContent(type);
+
+    if (!content) return;
+
+    tooltip.innerHTML = content;
+    tooltip.classList.add('show');
+    moveStatTooltip(e);
+}
+
+function moveStatTooltip(e) {
+    const tooltip = document.getElementById('stat-tooltip');
+    const offset = 15;
+    tooltip.style.left = (e.clientX + offset) + 'px';
+    tooltip.style.top = (e.clientY + offset) + 'px';
+}
+
+function hideStatTooltip() {
+    const tooltip = document.getElementById('stat-tooltip');
+    tooltip.classList.remove('show');
+}
+
+function getStatTooltipContent(type) {
+    const cache = _statsDetailCache;
+
+    switch (type) {
+        case 'uptime':
+            if (!cache.uptime) return null;
+            const startTime = new Date(cache.uptime.startTime).toLocaleString('zh-CN');
+            return `<strong>启动时间:</strong> ${startTime}\n<strong>运行时长:</strong> ${formatUptime(cache.uptime.uptime)}`;
+
+        case 'modules':
+            if (!cache.modules) return null;
+            const moduleList = cache.modules.map(m => {
+                const state = m.state || 'unknown';
+                const actualState = m.actual_state || 'unknown';
+                return `  ${m.name.padEnd(15)} [${state}] (${actualState})`;
+            }).join('\n');
+            return `<strong>模块列表 (${cache.modules.length}):</strong>\n${moduleList}`;
+
+        case 'registry':
+            if (!cache.registry) return null;
+            const cat = cache.registry.byCategory;
+            return `<strong>注册记录分类统计:</strong>\n  总记录: ${cache.registry.totalRecords}\n  模块字段: ${cat.modules}\n  RPC 方法: ${cat.rpc}\n  Hook: ${cat.hook}\n  API 端点: ${cat.api}\n  其他: ${cat.other}`;
+
+        case 'rpc':
+            if (!cache.registry || !cache.registry.details) return null;
+            const rpcList = cache.registry.details
+                .filter(r => r.field.startsWith('tools.rpc.'))
+                .slice(0, 20)
+                .map(r => `  ${r.module}: ${r.field}`)
+                .join('\n');
+            const rpcTotal = cache.registry.byCategory.rpc;
+            return `<strong>RPC 方法列表 (${rpcTotal}):</strong>\n${rpcList || '  (无)'}${rpcTotal > 20 ? '\n  ...' : ''}`;
+
+        case 'hooks':
+            if (!cache.registry || !cache.registry.details) return null;
+            const hookList = cache.registry.details
+                .filter(r => r.field.startsWith('tools.hook.'))
+                .slice(0, 20)
+                .map(r => `  ${r.module}: ${r.field}`)
+                .join('\n');
+            const hookTotal = cache.registry.byCategory.hook;
+            return `<strong>Hook 列表 (${hookTotal}):</strong>\n${hookList || '  (无)'}${hookTotal > 20 ? '\n  ...' : ''}`;
+
+        case 'api':
+            if (!cache.registry || !cache.registry.details) return null;
+            const apiList = cache.registry.details
+                .filter(r => r.field.startsWith('tools.api.'))
+                .slice(0, 20)
+                .map(r => `  ${r.module}: ${r.field}`)
+                .join('\n');
+            const apiTotal = cache.registry.byCategory.api;
+            return `<strong>API 端点列表 (${apiTotal}):</strong>\n${apiList || '  (无)'}${apiTotal > 20 ? '\n  ...' : ''}`;
+
+        case 'events':
+            if (!cache.events) return null;
+            return `<strong>事件统计:</strong>\n  已接收: ${cache.events.events_received || 0}\n  已路由: ${cache.events.events_routed || 0}\n  已排队: ${cache.events.events_queued || 0}\n  已去重: ${cache.events.events_deduplicated || 0}\n  错误: ${cache.events.errors || 0}`;
+
+        case 'rpc-calls':
+            if (!cache.rpcStats) return null;
+            return `<strong>RPC 调用统计:</strong>\n  总调用: ${cache.rpcStats.total || 0}\n  成功: ${cache.rpcStats.success || 0}\n  失败: ${cache.rpcStats.failed || 0}`;
+
+        default:
+            return null;
+    }
+}
+
+// ============================================================
+// Real-time Console
+// ============================================================
+
+function toggleConsole() {
+    _consoleExpanded = !_consoleExpanded;
+    const consoleEl = document.getElementById('realtime-console');
+    const toggleBtn = document.getElementById('console-toggle-text');
+
+    if (_consoleExpanded) {
+        consoleEl.style.display = 'block';
+        toggleBtn.textContent = '折叠控制台';
+        subscribeConsoleEvents();
+    } else {
+        consoleEl.style.display = 'none';
+        toggleBtn.textContent = '展开控制台';
+        unsubscribeConsoleEvents();
     }
 }
 
-function renderModulesGrid(modules) {
-    const grid = document.getElementById('modules-grid');
-    if (!grid) return;
+function subscribeConsoleEvents() {
+    if (_consoleEventSubscribed || !kernelClient || !kernelClient.connected) return;
+
+    // Subscribe to all events
+    kernelClient.call('event.subscribe', { events: ['*'] })
+        .then(() => {
+            _consoleEventSubscribed = true;
+            console.log('[console] Subscribed to all events');
+
+            // Register event listener for all events
+            kernelClient.on('*', (data) => {
+                handleConsoleEvent({ event: '*', data });
+            });
+        })
+        .catch(err => {
+            console.error('[console] Failed to subscribe:', err);
+        });
+}
+
+function unsubscribeConsoleEvents() {
+    if (!_consoleEventSubscribed || !kernelClient || !kernelClient.connected) return;
+
+    kernelClient.call('event.unsubscribe', { events: ['*'] })
+        .then(() => {
+            _consoleEventSubscribed = false;
+            console.log('[console] Unsubscribed from all events');
+
+            // Remove event listener
+            kernelClient.off('*');
+        })
+        .catch(err => {
+            console.error('[console] Failed to unsubscribe:', err);
+        });
+}
+
+function appendConsoleLog(message, color = '#d4d4d4') {
+    if (!_consoleExpanded) return;
+
+    const output = document.getElementById('console-output');
+    if (!output) return;
+
+    const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
+    const line = document.createElement('div');
+    line.style.color = color;
+    line.textContent = `[${timestamp}] ${message}`;
+
+    output.appendChild(line);
+    output.scrollTop = output.scrollHeight;
+
+    // Limit to 500 lines
+    while (output.children.length > 500) {
+        output.removeChild(output.firstChild);
+    }
+}
+
+function clearConsole() {
+    const output = document.getElementById('console-output');
+    if (output) output.innerHTML = '';
+}
+
+// Handle incoming events for console
+function handleConsoleEvent(event) {
+    if (!_consoleExpanded) return;
+
+    const eventType = event.event || 'unknown';
+    const data = event.data || {};
+    const moduleId = data.module_id || 'unknown';
+
+    let color = '#9cdcfe';
+    if (eventType.includes('error') || eventType.includes('crash')) {
+        color = '#f48771';
+    } else if (eventType.includes('ready') || eventType.includes('registered')) {
+        color = '#4ec9b0';
+    }
+
+    const message = `[${eventType}] ${moduleId}: ${JSON.stringify(data)}`;
+    appendConsoleLog(message, color);
+}
+
+function renderModulesTable(modules) {
+    const tbody = document.getElementById('modules-tbody');
+    if (!tbody) return;
 
     if (!modules.length) {
-        grid.innerHTML = '<p class="text-muted" style="padding:40px;text-align:center;">未发现模块</p>';
+        tbody.innerHTML = '<tr><td colspan="9" class="text-muted" style="text-align:center;padding:40px;">未发现模块</td></tr>';
         return;
     }
 
-    grid.innerHTML = modules.map(m => {
+    tbody.innerHTML = modules.map(m => {
         const stateClass = m.state === 'enabled' ? 'enabled' : m.state === 'manual' ? 'manual' : 'disabled';
         const typeClass = m.type || 'unknown';
         const displayName = m.display_name || m.name;
-        const version = m.version ? `<span class="module-version">v${escapeHtml(String(m.version))}</span>` : '';
-        const configBadge = m.has_config ? '<span class="badge badge-info" style="font-size:10px;">config</span>' : '';
-        return `<div class="module-card" data-name="${escapeHtml(m.name)}" onclick="openModuleDetail('${escapeHtml(m.name)}')">
-            <div class="module-card-header">
-                <span class="module-state-dot ${stateClass}" title="${escapeHtml(m.state || 'enabled')}"></span>
-                <span class="module-type-badge type-${escapeHtml(typeClass)}">${escapeHtml(m.type || '?')}</span>
-                ${version}
-            </div>
-            <div class="module-card-name">${escapeHtml(m.name)}</div>
-            <div class="module-card-display-name">${escapeHtml(displayName)}</div>
-            <div class="module-card-footer">
-                ${m.preferred_port ? '<span style="font-size:11px;color:var(--gray-400);">:' + m.preferred_port + '</span>' : ''}
-                ${configBadge}
-            </div>
-        </div>`;
+        const version = m.version || '-';
+        const port = m.preferred_port || '-';
+
+        // 运行状态
+        const running = _isModuleRunning(m.name);
+        const pending = _moduleActionPending.has(m.name);
+        const pendingAction = _moduleActionPending.get(m.name); // 'start' | 'stop'
+        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 isCore = _isCoreModule(m.name);
+        const startDisabled = pending || running ? 'disabled' : '';
+        const stopDisabled = isCore || pending || !running ? 'disabled' : '';
+        const startLabel = pendingAction === 'start' ? '启动中' : '启动';
+        const stopLabel = pendingAction === 'stop' ? '停止中' : '停止';
+
+        // 默认状态下拉
+        const stateOptions = `
+            <option value="enabled" ${m.state === 'enabled' ? 'selected' : ''}>自动</option>
+            <option value="manual" ${m.state === 'manual' ? 'selected' : ''}>手动</option>
+            <option value="disabled" ${m.state === 'disabled' ? 'selected' : ''}>禁用</option>
+        `;
+
+        return `<tr data-module="${escapeHtml(m.name)}" class="module-row" onclick="openModuleDetail('${escapeHtml(m.name)}')">
+            <td><span class="module-state-dot ${stateClass}"></span></td>
+            <td><strong>${escapeHtml(m.name)}</strong></td>
+            <td>${escapeHtml(displayName)}</td>
+            <td><span class="module-type-badge type-${escapeHtml(typeClass)}">${escapeHtml(m.type || '?')}</span></td>
+            <td>${escapeHtml(String(version))}</td>
+            <td>${escapeHtml(String(port))}</td>
+            <td>${runningStatus}</td>
+            <td onclick="event.stopPropagation()">
+                <select class="module-state-select" data-module="${escapeHtml(m.name)}" onchange="onModuleStateChange(this)">
+                    ${stateOptions}
+                </select>
+            </td>
+            <td onclick="event.stopPropagation()">
+                <button class="btn btn-sm btn-success" onclick="startModule('${escapeHtml(m.name)}')" ${startDisabled}>${startLabel}</button>
+                <button class="btn btn-sm btn-danger" onclick="stopModule('${escapeHtml(m.name)}')" ${stopDisabled}>${stopLabel}</button>
+            </td>
+        </tr>`;
     }).join('');
 }
 
+async function onModuleStateChange(selectEl) {
+    const moduleName = selectEl.dataset.module;
+    const newState = selectEl.value;
+
+    // 禁用下拉，防止重复操作
+    selectEl.disabled = true;
+
+    try {
+        // 使用 RPC 更新模块配置
+        const rpc = await lookupModuleRpc(moduleName, "tools.rpc.module.config.update");
+        if (!rpc) {
+            throw new Error(`模块 ${moduleName} 不支持配置更新`);
+        }
+        const params = rpc.needsModuleName
+            ? { module_name: moduleName, metadata: { state: newState } }
+            : { metadata: { state: newState } };
+        await kernelClient.call(`${rpc.module}.${rpc.method}`, params);
+        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) {
+        showToast('更新失败: ' + err.message, 'error');
+        // 恢复原值
+        loadModules();
+    } finally {
+        selectEl.disabled = false;
+    }
+}
+
+async function startModule(moduleName) {
+    if (_isCoreModule(moduleName)) return; // 静默拦截
+    if (_moduleActionPending.has(moduleName)) return; // 防抖
+    _moduleActionPending.set(moduleName, 'start');
+    _updateModuleButtons(moduleName);
+
+    try {
+        if (!kernelClient || !kernelClient.connected) {
+            throw new Error('WebSocket 未连接');
+        }
+        await kernelClient.call('launcher.start_module', { name: moduleName });
+        // 延迟刷新，等待模块实际启动后再查询状态
+        setTimeout(async () => {
+            _moduleActionPending.delete(moduleName);
+            _moduleRunStates = await _fetchModuleRunStates();
+            _refreshModuleButtonsEverywhere(moduleName);
+            // 启动成功提示
+            if (_isModuleRunning(moduleName)) {
+                showToast(`${moduleName} 启动成功`, 'success');
+            } else {
+                showToast(`${moduleName} 启动超时，请检查日志`, 'error');
+            }
+        }, 1500);
+    } catch (err) {
+        _moduleActionPending.delete(moduleName);
+        _refreshModuleButtonsEverywhere(moduleName);
+        showToast(`启动失败: ${err.message}`, 'error');
+    }
+}
+
+async function stopModule(moduleName) {
+    if (_isCoreModule(moduleName)) return; // 静默拦截
+    if (_moduleActionPending.has(moduleName)) return; // 防抖
+    _moduleActionPending.set(moduleName, 'stop');
+    _updateModuleButtons(moduleName);
+
+    try {
+        if (!kernelClient || !kernelClient.connected) {
+            throw new Error('WebSocket 未连接');
+        }
+        await kernelClient.call('launcher.stop_module', { name: moduleName, reason: 'user_request' });
+        // 延迟刷新，等待模块实际停止后再查询状态
+        setTimeout(async () => {
+            _moduleActionPending.delete(moduleName);
+            _moduleRunStates = await _fetchModuleRunStates();
+            _refreshModuleButtonsEverywhere(moduleName);
+            // 停止成功提示
+            if (!_isModuleRunning(moduleName)) {
+                showToast(`${moduleName} 停止成功`, 'success');
+            } else {
+                showToast(`${moduleName} 停止超时，请检查日志`, 'error');
+            }
+        }, 1500);
+    } catch (err) {
+        _moduleActionPending.delete(moduleName);
+        _refreshModuleButtonsEverywhere(moduleName);
+        showToast(`停止失败: ${err.message}`, 'error');
+    }
+}
+
+/**
+ * 重启整个 Kite 系统（通过 watchdog）
+ */
+async function restartKite() {
+    // 禁用按钮，防止重复点击
+    const btn = document.getElementById('btn-restart-kite');
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = '<span>⏳</span><span>重启中...</span>';
+    }
+
+    try {
+        if (!kernelClient || !kernelClient.connected) {
+            throw new Error('WebSocket 未连接');
+        }
+        const data = await kernelClient.call('launcher.restart_launcher', { reason: 'user_request' });
+
+        // 检查是否有错误
+        if (data.error) {
+            showToast(`重启失败: ${data.error}`, 'error');
+            if (btn) {
+                btn.disabled = false;
+                btn.innerHTML = '<span>🔄</span><span>重启 Kite</span>';
+            }
+            return;
+        }
+
+        // 成功 - 显示重启提示并轮询检测重启完成
+        showToast('Kite 正在重启...', 'success');
+
+        // 轮询检测 Kite 是否重启完成（每 0.5s 检查一次，最多 30s）
+        let attempts = 0;
+        const maxAttempts = 60; // 30s
+        const checkInterval = setInterval(async () => {
+            attempts++;
+            try {
+                // 尝试调用 API，如果成功说明重启完成
+                await API.get('/api/stats');
+                clearInterval(checkInterval);
+                showToast('Kite 重启完成', 'success');
+                window.location.reload();
+            } catch (err) {
+                // 还在重启中，继续等待
+                if (attempts >= maxAttempts) {
+                    clearInterval(checkInterval);
+                    showToast('重启超时，请手动刷新页面', 'warning');
+                    if (btn) {
+                        btn.disabled = false;
+                        btn.innerHTML = '<span>🔄</span><span>重启 Kite</span>';
+                    }
+                }
+            }
+        }, 500);
+
+    } catch (err) {
+        showToast(`重启失败: ${err.message}`, 'error');
+        if (btn) {
+            btn.disabled = false;
+            btn.innerHTML = '<span>🔄</span><span>重启 Kite</span>';
+        }
+    }
+}
+
+/**
+ * 统一更新指定模块在列表行 + 详情页面的按钮启用/禁用状态与运行状态文本。
+ */
+function _updateModuleButtons(moduleName) {
+    const running = _isModuleRunning(moduleName);
+    const pending = _moduleActionPending.has(moduleName);
+    const pendingAction = _moduleActionPending.get(moduleName); // 'start' | 'stop'
+    const isCore = _isCoreModule(moduleName);
+    const startDis = pending || running;
+    const stopDis = isCore || pending || !running;
+    const startLabel = pendingAction === 'start' ? '启动中' : '启动';
+    const stopLabel = pendingAction === 'stop' ? '停止中' : '停止';
+
+    // ── 列表行 ──
+    const row = document.querySelector(`tr[data-module="${moduleName}"]`);
+    if (row) {
+        const btns = row.querySelectorAll('button');
+        // 约定：第一个按钮=启动，第二个=停止
+        if (btns[0]) { btns[0].disabled = startDis; btns[0].textContent = startLabel; }
+        if (btns[1]) { btns[1].disabled = stopDis; btns[1].textContent = stopLabel; }
+
+        // 运行状态列（第 7 列，index 6）
+        const statusTd = row.children[6];
+        if (statusTd) {
+            statusTd.innerHTML = pending
+                ? `<span style="color:var(--warning);">${pendingAction === 'start' ? '启动中…' : '停止中…'}</span>`
+                : running
+                    ? '<span style="color:var(--success);">运行中</span>'
+                    : '<span style="color:var(--gray-400);">已停止</span>';
+        }
+    }
+
+    // ── 详情页面 ──
+    if (_currentModuleName === moduleName) {
+        const btnStart = document.getElementById('btn-detail-start');
+        const btnStop = document.getElementById('btn-detail-stop');
+        if (btnStart) { btnStart.disabled = startDis; btnStart.textContent = startLabel; }
+        if (btnStop) { btnStop.disabled = stopDis; btnStop.textContent = stopLabel; }
+        _updateModuleDetailStatus(moduleName);
+    }
+}
+
+function _updateModuleDetailStatus(moduleName) {
+    const el = document.getElementById('module-detail-run-status');
+    if (!el) return;
+    const running = _isModuleRunning(moduleName);
+    const pending = _moduleActionPending.has(moduleName);
+    const pendingAction = _moduleActionPending.get(moduleName);
+    const rs = _moduleRunStates[moduleName];
+    if (pending) {
+        el.innerHTML = `<span style="color:var(--warning);">${pendingAction === 'start' ? '启动中…' : '停止中…'}</span>`;
+    } else if (running) {
+        const pid = rs && rs.pid ? ` (PID: ${rs.pid})` : '';
+        el.innerHTML = `<span style="color:var(--success);">运行中${escapeHtml(pid)}</span>`;
+    } else {
+        el.innerHTML = '<span style="color:var(--gray-400);">已停止</span>';
+    }
+}
+
+function _refreshModuleButtonsEverywhere(moduleName) {
+    _updateModuleButtons(moduleName);
+}
+
+async function startModuleFromDetail() {
+    if (_currentModuleName) {
+        await startModule(_currentModuleName);
+    }
+}
+
+async function stopModuleFromDetail() {
+    if (_currentModuleName) {
+        await stopModule(_currentModuleName);
+    }
+}
+
+async function resetModuleDefaults() {
+    if (!_currentModuleName) return;
+
+    // 获取当前值
+    const currentState = _getVal('mod-meta-state');
+    const currentIp = _getVal('mod-meta-ip');
+    const currentPort = _getVal('mod-meta-port');
+    const currentMonitor = document.getElementById('mod-meta-monitor')?.value;
+
+    // 计算默认值
+    const defaultIp = _currentModuleName === 'web' ? '0.0.0.0' : '127.0.0.1';
+    const defaultState = 'enabled';
+    const defaultMonitor = 'true';
+    const defaultPort = '';
+
+    // 构建对比表格
+    const comparison = [
+        { field: 'state (默认状态)', current: currentState, default: defaultState },
+        { field: 'advertise_ip (监听地址)', current: currentIp, default: defaultIp },
+        { field: 'monitor (监控)', current: currentMonitor, default: defaultMonitor },
+        { field: 'preferred_port (首选端口)', current: currentPort || '(空)', default: '(空)' },
+    ];
+
+    // 填充对比表格
+    const tbody = document.getElementById('reset-defaults-comparison');
+    tbody.innerHTML = comparison.map(item => {
+        const changed = item.current !== item.default;
+        const rowStyle = changed ? 'background:var(--warning-light);' : '';
+        return `
+            <tr style="${rowStyle}">
+                <td style="padding:8px;border-bottom:1px solid var(--gray-200);">${escapeHtml(item.field)}</td>
+                <td style="padding:8px;border-bottom:1px solid var(--gray-200);font-family:monospace;font-size:13px;">${escapeHtml(item.current)}</td>
+                <td style="padding:8px;border-bottom:1px solid var(--gray-200);font-family:monospace;font-size:13px;color:var(--primary);">${escapeHtml(item.default)}</td>
+            </tr>
+        `;
+    }).join('');
+
+    // 显示对话框
+    const modal = document.getElementById('reset-defaults-modal');
+    modal.classList.remove('hidden');
+
+    // 等待用户确认或取消
+    return new Promise((resolve) => {
+        const confirm = document.getElementById('reset-defaults-confirm');
+        const cancel = document.getElementById('reset-defaults-cancel');
+        const close = document.getElementById('reset-defaults-close');
+
+        const cleanup = () => {
+            modal.classList.add('hidden');
+            confirm.removeEventListener('click', onConfirm);
+            cancel.removeEventListener('click', onCancel);
+            close.removeEventListener('click', onCancel);
+        };
+
+        const onConfirm = async () => {
+            cleanup();
+            try {
+                console.log('[modules] Resetting defaults for:', _currentModuleName);
+
+                // 使用 RPC 恢复默认值
+                const rpc = await lookupModuleRpc(_currentModuleName, "tools.rpc.module.config.reset");
+                if (!rpc) {
+                    throw new Error(`模块 ${_currentModuleName} 不支持恢复默认值`);
+                }
+                const params = rpc.needsModuleName
+                    ? { module_name: _currentModuleName, fields: ['state', 'advertise_ip', 'monitor', 'preferred_port'] }
+                    : { fields: ['state', 'advertise_ip', 'monitor', 'preferred_port'] };
+                const result = await kernelClient.call(`${rpc.module}.${rpc.method}`, params);
+                console.log('[modules] Reset defaults result:', result);
+
+                showToast('已恢复默认值', 'success');
+
+                // 更新 UI
+                _setVal('mod-meta-state', defaultState);
+                _setVal('mod-meta-ip', defaultIp);
+                _setVal('mod-meta-port', '');
+                const monitorEl = document.getElementById('mod-meta-monitor');
+                if (monitorEl) monitorEl.value = 'true';
+
+                resolve(true);
+            } catch (err) {
+                console.error('[modules] Reset defaults failed:', err);
+                const errorMsg = err.message || (typeof err === 'string' ? err : JSON.stringify(err));
+                showToast('恢复默认值失败: ' + errorMsg, 'error');
+                resolve(false);
+            }
+        };
+
+        const onCancel = () => {
+            cleanup();
+            resolve(false);
+        };
+
+        confirm.addEventListener('click', onConfirm);
+        cancel.addEventListener('click', onCancel);
+        close.addEventListener('click', onCancel);
+    });
+}
+
 async function openModuleDetail(name) {
     _currentModuleName = name;
 
     // Switch view
-    document.getElementById('modules-grid')?.classList.add('hidden');
+    document.getElementById('modules-list-header')?.classList.add('hidden');
+    document.getElementById('modules-table')?.closest('.panel')?.classList.add('hidden');
     document.getElementById('module-detail')?.classList.remove('hidden');
+    document.getElementById('token-management-section')?.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');
+
+    // 立即更新按钮状态（使用当前缓存的运行状态）
+    _updateModuleButtons(name);
 
     try {
-        const mod = await API.get(`/api/modules/${encodeURIComponent(name)}`);
+        // Check if kernelClient is connected
+        if (!kernelClient || !kernelClient.connected) {
+            throw new Error('未连接到 Kernel，请检查连接状态');
+        }
+
+        // 使用 RPC 获取模块配置
+        const rpc = await lookupModuleRpc(name, "tools.rpc.module.config.get");
+        if (!rpc) {
+            throw new Error(`模块 ${name} 不支持配置查询`);
+        }
+        console.log(`[modules] Using RPC: ${rpc.module}.${rpc.method}, needsModuleName=${rpc.needsModuleName}`);
+
+        const params = rpc.needsModuleName ? { module_name: name } : {};
+        const mod = await kernelClient.call(`${rpc.module}.${rpc.method}`, params);
+        console.log(`[modules] RPC result:`, mod);
 
         // Header
         document.getElementById('module-detail-name').textContent = mod.display_name || mod.name;
@@ -4272,22 +5455,41 @@ async function openModuleDetail(name) {
             badge.className = `module-type-badge type-${mod.type || 'unknown'}`;
         }
 
-        // Read-only fields
+        // 【区块1：基本信息与元数据】
+        _setVal('mod-source-path', mod.source_path || '');
+
+        // 基础字段（现在可编辑）
         _setVal('mod-meta-name', mod.name || '');
         _setVal('mod-meta-type', mod.type || '');
         _setVal('mod-meta-runtime', mod.runtime || '');
         _setVal('mod-meta-entry', mod.entry || '');
 
-        // Editable fields
+        // 其他字段
         _setVal('mod-meta-display-name', mod.display_name || '');
         _setVal('mod-meta-version', mod.version || '');
         _setVal('mod-meta-state', mod.state || 'enabled');
         _setVal('mod-meta-port', mod.preferred_port != null ? mod.preferred_port : '');
-        _setVal('mod-meta-ip', mod.advertise_ip || '');
+
+        // 监听地址：根据模块设置默认值
+        let defaultIp = '127.0.0.1';  // 默认仅本地
+        if (mod.name === 'web') {
+            defaultIp = '0.0.0.0';  // web 模块默认允许远程
+        }
+        // TODO: 如果 kernel 允许远程模块，也设置为 0.0.0.0
+        _setVal('mod-meta-ip', mod.advertise_ip || defaultIp);
+
+        // 监控：默认为 true
         const monitorEl = document.getElementById('mod-meta-monitor');
-        if (monitorEl) monitorEl.value = mod.monitor != null ? String(mod.monitor) : '';
+        if (monitorEl) {
+            const monitorValue = mod.monitor != null ? String(mod.monitor) : 'true';
+            monitorEl.value = monitorValue;
+        }
+
+        // 运行状态 + 按钮状态
+        _moduleRunStates = await _fetchModuleRunStates();
+        _updateModuleDetailStatus(name);
 
-        // Config section
+        // 【区块2：模块配置文件】
         const configSection = document.getElementById('module-config-section');
         const configTree = document.getElementById('module-config-tree');
         if (mod.has_config && mod.config) {
@@ -4299,8 +5501,54 @@ async function openModuleDetail(name) {
         } else {
             configSection?.classList.add('hidden');
         }
+
+        // 绑定自动保存事件监听器（每次加载详情时重新绑定）
+        document.querySelectorAll('#module-detail [data-field]').forEach(el => {
+            // 移除旧的监听器（如果有）
+            el.removeEventListener('input', _debouncedSaveModule);
+            el.removeEventListener('change', _debouncedSaveModule);
+            // 添加新的监听器
+            const event = (el.tagName === 'SELECT') ? 'change' : 'input';
+            el.addEventListener(event, _debouncedSaveModule);
+        });
+
+        // 配置树的输入框也需要绑定
+        if (configTree) {
+            configTree.querySelectorAll('input, select, textarea').forEach(el => {
+                el.removeEventListener('input', _debouncedSaveModule);
+                el.removeEventListener('change', _debouncedSaveModule);
+                const event = (el.tagName === 'SELECT') ? 'change' : 'input';
+                el.addEventListener(event, _debouncedSaveModule);
+            });
+        }
+
+        // 同步详情页面启动/停止按钮状态
+        _updateModuleButtons(name);
     } catch (err) {
-        showToast('加载模块详情失败: ' + err.message, 'error');
+        console.error('[modules] Failed to load module detail:', err);
+
+        // Generate user-friendly error message
+        let errorMsg = err.message;
+        if (!kernelClient || !kernelClient.connected) {
+            errorMsg = '未连接到 Kernel，请检查连接状态';
+        } else if (err.message.includes('not ready')) {
+            errorMsg = `模块 ${name} 尚未就绪，请稍后重试`;
+        } else if (err.message.includes('不支持配置查询')) {
+            errorMsg = `模块 ${name} 不支持配置查询`;
+        } else if (err.message.includes('timeout')) {
+            errorMsg = '请求超时，请检查网络连接';
+        }
+
+        showToast('加载模块详情失败: ' + errorMsg, 'error');
+
+        // 恢复列表视图
+        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('token-management-section')?.classList.remove('hidden');
+        document.getElementById('statistics-panel')?.classList.remove('hidden');
+        document.getElementById('registry-test-section')?.classList.remove('hidden');
+        document.getElementById('registry-test-output')?.classList.remove('hidden');
     }
 }
 
@@ -4419,34 +5667,42 @@ function _debouncedSaveModule() {
     _moduleSaveTimer = setTimeout(async () => {
         _showModuleSaveStatus('saving');
         try {
-            // Collect metadata
+            // Collect metadata from all [data-field] inputs in #module-detail
             const meta = {};
-            document.querySelectorAll('#module-meta-form [data-field]').forEach(el => {
+            document.querySelectorAll('#module-detail [data-field]').forEach(el => {
                 const field = el.dataset.field;
                 let val;
                 if (field === 'preferred_port') {
                     val = el.value === '' ? null : parseInt(el.value);
                 } else if (field === 'monitor') {
-                    val = el.value === '' ? null : el.value === 'true';
+                    val = el.value === 'true';
                 } else {
                     val = el.value || null;
                 }
                 if (val !== null) meta[field] = val;
             });
 
-            // Save metadata
+            // Save metadata and config
+            const rpc = await lookupModuleRpc(_currentModuleName, "tools.rpc.module.config.update");
+            if (!rpc) {
+                throw new Error(`模块 ${_currentModuleName} 不支持配置更新`);
+            }
+
+            const baseParams = rpc.needsModuleName ? { module_name: _currentModuleName } : {};
+
             const metaPromise = Object.keys(meta).length > 0
-                ? API.put(`/api/modules/${encodeURIComponent(_currentModuleName)}/metadata`, meta)
+                ? kernelClient.call(`${rpc.module}.${rpc.method}`, { ...baseParams, metadata: meta })
                 : Promise.resolve();
 
             // Save config if visible
             const configSection = document.getElementById('module-config-section');
             const configObj = _buildModuleConfigObject();
             const configPromise = configSection && !configSection.classList.contains('hidden') && configObj
-                ? API.put(`/api/modules/${encodeURIComponent(_currentModuleName)}/config`, configObj)
+                ? kernelClient.call(`${rpc.module}.${rpc.method}`, { ...baseParams, config: configObj })
                 : Promise.resolve();
 
             await Promise.all([metaPromise, configPromise]);
+
             _showModuleSaveStatus('saved');
         } catch (err) {
             _showModuleSaveStatus('error');
@@ -4944,15 +6200,46 @@ document.addEventListener('DOMContentLoaded', () => {
     const btnModuleBack = document.getElementById('btn-module-back');
     if (btnModuleBack) btnModuleBack.addEventListener('click', loadModules);
 
-    // Module metadata form auto-save
-    document.querySelectorAll('#module-meta-form [data-field]').forEach(el => {
-        const event = (el.tagName === 'SELECT') ? 'change' : 'input';
-        el.addEventListener(event, _debouncedSaveModule);
+    // Restart Kite button
+    const btnRestartKite = document.getElementById('btn-restart-kite');
+    if (btnRestartKite) btnRestartKite.addEventListener('click', restartKite);
+
+    // Console toggle button
+    const btnToggleConsole = document.getElementById('btn-toggle-console');
+    if (btnToggleConsole) btnToggleConsole.addEventListener('click', toggleConsole);
+
+    // Clear console button
+    const btnClearConsole = document.getElementById('btn-clear-console');
+    if (btnClearConsole) btnClearConsole.addEventListener('click', clearConsole);
+
+    // Initialize stats tooltip
+    initStatsTooltip();
+
+    // Registry test buttons
+    const btnTestRegistry = document.getElementById('btn-test-registry');
+    if (btnTestRegistry) btnTestRegistry.addEventListener('click', runRegistryTests);
+    const btnClearTestOutput = document.getElementById('btn-clear-test-output');
+    if (btnClearTestOutput) btnClearTestOutput.addEventListener('click', () => {
+        document.getElementById('test-output').textContent = '';
     });
 
+    // Module metadata form auto-save is handled dynamically in openModuleDetail()
+
+    // Connect to management WebSocket for real-time module status updates
+    connectManagementWebSocket();
+
     // Navigate to last active page (or dashboard)
     navigate(localStorage.getItem('activePage') || 'dashboard');
 
     // Initial status bar update
     updateStatusBar();
 });
+
+// ============================================================
+// Registry Tests
+// ============================================================
+
+async function runRegistryTests() {
+    // 调用 registry-tests.js 中的全面测试套件
+    await runAllTests();
+}