@agentunion/kite 1.3.2 → 1.4.0

package/extensions/services/web/static/css/style.css

@@ -163,6 +163,56 @@ html, body {
 }
 .stat-label { font-size: 13px; color: var(--gray-500); }
 
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+}
+.stat-item {
+  text-align: center;
+  padding: 8px 6px;
+  border-radius: 6px;
+  background: var(--gray-50);
+  transition: background 0.2s;
+  cursor: pointer;
+  position: relative;
+}
+.stat-item:hover {
+  background: var(--gray-100);
+}
+.stat-item .stat-value {
+  font-size: 18px;
+  margin-bottom: 2px;
+  font-weight: 600;
+}
+.stat-item .stat-label {
+  font-size: 10px;
+}
+
+/* Stat Tooltip */
+.stat-tooltip {
+  position: fixed;
+  display: none;
+  background: #2d2d2d;
+  color: #e0e0e0;
+  padding: 12px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  font-size: 12px;
+  font-family: monospace;
+  max-width: 400px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 10000;
+  pointer-events: none;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+.stat-tooltip.show {
+  display: block;
+}
+
 /* ===== PANELS ===== */
 .panel {
   background: var(--white); border-radius: var(--radius);
@@ -210,14 +260,18 @@ html, body {
   font-size: 13px; font-weight: 500; cursor: pointer;
   transition: all .15s; gap: 6px; white-space: nowrap;
 }
-.btn:disabled { opacity: .5; cursor: not-allowed; }
+.btn:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; opacity: 1; }
 .btn-primary { background: var(--primary); color: var(--white); }
 .btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
 .btn-secondary { background: var(--gray-100); color: var(--gray-700); }
 .btn-secondary:hover:not(:disabled) { background: var(--gray-200); }
 .btn-danger { background: var(--error); color: var(--white); }
 .btn-danger:hover:not(:disabled) { background: #dc2626; }
-.btn-sm { padding: 4px 10px; font-size: 12px; }
+.btn-success { background: var(--success); color: var(--white); }
+.btn-success:hover:not(:disabled) { background: #16a34a; }
+.btn-warning { background: #f59e0b; color: var(--white); }
+.btn-warning:hover:not(:disabled) { background: #d97706; }
+.btn-sm { padding: 4px 14px; font-size: 12px; min-width: 52px; }
 .btn-lg { padding: 10px 24px; font-size: 15px; }
 
 /* ===== FORMS ===== */
@@ -1064,35 +1118,20 @@ html, body {
 }
 
 /* ===== MODULES PAGE ===== */
-.modules-grid {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 16px;
-}
-.module-card {
-  background: var(--white); border-radius: var(--radius);
-  box-shadow: var(--shadow); padding: 16px; cursor: pointer;
-  border: 2px solid transparent; transition: all .15s;
-}
-.module-card:hover {
-  border-color: var(--primary); box-shadow: var(--shadow-md);
-}
-.module-card-header {
-  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
-}
-.module-card-name {
-  font-size: 16px; font-weight: 600; color: var(--gray-900);
-  margin-bottom: 2px;
+.module-row {
+  cursor: pointer;
 }
-.module-card-display-name {
-  font-size: 12px; color: var(--gray-500); margin-bottom: 10px;
-  min-height: 16px;
+.module-row:hover {
+  background: var(--gray-50);
 }
-.module-card-footer {
-  display: flex; align-items: center; gap: 8px;
-  min-height: 20px;
+.module-state-select {
+  padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 5px;
+  font-size: 12px; background: var(--white); color: var(--gray-800);
+  cursor: pointer;
 }
-.module-version {
-  font-size: 11px; color: var(--gray-400); font-weight: 500;
+.module-state-select:focus {
+  outline: none; border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
 }
 
 /* Module type badges */

package/extensions/services/web/static/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI Phone Agent</title>
-  <link rel="stylesheet" href="css/style.css?v=36">
+  <link rel="stylesheet" href="css/style.css?v=41">
 </head>
 <body>
 
@@ -15,6 +15,7 @@
       <h1 class="header-title">AI Phone Agent</h1>
     </div>
     <div class="header-right">
+      <span id="ws-indicator" style="font-size:13px;color:var(--gray-400);margin-right:16px;" title="Kite 连接状态">○ 未连线</span>
       <span id="header-bt-status" class="bt-indicator" title="Bluetooth Status">
         <span class="bt-icon">BT</span>
         <span class="bt-label">未连接</span>
@@ -968,96 +969,252 @@
 
       <!-- ==================== Modules ==================== -->
       <section id="page-modules" class="page">
-        <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
-          <h2 class="page-title" style="margin-bottom:0;">模块</h2>
-          <span id="module-save-status" class="config-save-status"></span>
+        <div id="modules-list-header" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
+          <div style="display:flex;align-items:center;gap:12px;">
+            <h2 class="page-title" style="margin-bottom:0;">模块管理</h2>
+            <span id="module-save-status" class="config-save-status"></span>
+          </div>
+          <div style="display:flex;align-items:center;gap:16px;">
+            <button class="btn btn-sm btn-secondary" id="btn-toggle-console">
+              <span id="console-toggle-text">展开控制台</span>
+            </button>
+            <button class="btn btn-warning" id="btn-restart-kite" style="display:flex;align-items:center;gap:6px;">
+              <span>重启 Kite</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Real-time Console (collapsible) -->
+        <div id="realtime-console" class="panel" style="display:none;margin-bottom:20px;">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+            <h3 style="margin:0;font-size:14px;font-weight:600;">实时事件日志</h3>
+            <button class="btn btn-sm btn-secondary" id="btn-clear-console">清空</button>
+          </div>
+          <div id="console-output" style="background:#1e1e1e;color:#d4d4d4;padding:12px;border-radius:4px;font-family:monospace;font-size:12px;max-height:300px;overflow-y:auto;white-space:pre-wrap;line-height:1.4;"></div>
+        </div>
+
+        <!-- Statistics Panel -->
+        <div class="panel" style="margin-bottom:20px;" id="statistics-panel">
+          <div class="stats-grid">
+            <div class="stat-item" data-stat-type="uptime">
+              <div class="stat-label">运行时长</div>
+              <div class="stat-value" id="stat-uptime">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="modules">
+              <div class="stat-label">模块数量</div>
+              <div class="stat-value" id="stat-modules">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="registry">
+              <div class="stat-label">注册记录</div>
+              <div class="stat-value" id="stat-registry">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="rpc">
+              <div class="stat-label">RPC 方法</div>
+              <div class="stat-value" id="stat-rpc">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="hooks">
+              <div class="stat-label">Hook 数量</div>
+              <div class="stat-value" id="stat-hooks">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="api">
+              <div class="stat-label">API 端点</div>
+              <div class="stat-value" id="stat-api">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="events">
+              <div class="stat-label">事件处理</div>
+              <div class="stat-value" id="stat-events">--</div>
+            </div>
+            <div class="stat-item" data-stat-type="rpc-calls">
+              <div class="stat-label">RPC 调用</div>
+              <div class="stat-value" id="stat-rpc-calls">--</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tooltip for statistics -->
+        <div id="stat-tooltip" class="stat-tooltip"></div>
+
+        <!-- Module List Table -->
+        <div class="panel">
+          <div class="table-wrapper">
+            <table class="data-table" id="modules-table">
+              <thead>
+                <tr>
+                  <th style="width:40px;"></th>
+                  <th>模块名称</th>
+                  <th>显示名称</th>
+                  <th>类型</th>
+                  <th>版本</th>
+                  <th>端口</th>
+                  <th>运行状态</th>
+                  <th>默认状态</th>
+                  <th style="width:180px;">操作</th>
+                </tr>
+              </thead>
+              <tbody id="modules-tbody">
+                <tr><td colspan="9" class="text-muted" style="text-align:center;padding:40px;">加载中...</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Token Management Section -->
+        <div id="token-management-section">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;margin-top:40px;">
+            <div style="display:flex;align-items:center;gap:12px;">
+              <h2 class="page-title" style="margin-bottom:0;">Token 管理</h2>
+            </div>
+            <div style="display:flex;align-items:center;gap:16px;">
+              <button class="btn btn-sm btn-secondary" onclick="refreshTokens()">刷新</button>
+            </div>
+          </div>
+
+          <div class="panel">
+            <div class="table-wrapper">
+              <table class="data-table" id="tokens-table">
+                <thead>
+                  <tr>
+                    <th style="width:200px;">Token</th>
+                    <th>角色</th>
+                    <th>创建时间</th>
+                    <th>过期时间</th>
+                    <th>状态</th>
+                    <th style="width:100px;">操作</th>
+                  </tr>
+                </thead>
+                <tbody id="tokens-tbody">
+                  <tr><td colspan="6" class="text-muted" style="text-align:center;padding:40px;">加载中...</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <!-- Registry Test Section -->
+        <div id="registry-test-section" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;margin-top:40px;">
+          <div style="display:flex;align-items:center;gap:12px;">
+            <h2 class="page-title" style="margin-bottom:0;">注册中心测试</h2>
+          </div>
+          <div style="display:flex;align-items:center;gap:16px;">
+            <button class="btn btn-sm btn-primary" id="btn-test-registry">运行测试</button>
+            <button class="btn btn-sm btn-secondary" id="btn-clear-test-output">清空输出</button>
+          </div>
         </div>
 
-        <!-- Module Cards Grid -->
-        <div id="modules-grid" class="modules-grid">
-          <p class="text-muted" style="padding:40px;text-align:center;">加载中...</p>
+        <div class="panel" id="registry-test-output">
+          <div id="test-output" style="background:#1e1e1e;color:#d4d4d4;padding:15px;border-radius:4px;font-family:monospace;font-size:13px;max-height:400px;overflow-y:auto;white-space:pre-wrap;"></div>
         </div>
 
         <!-- Module Detail Panel (hidden by default) -->
         <div id="module-detail" class="hidden">
-          <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
-            <button class="btn btn-secondary btn-sm" id="btn-module-back">&larr; 返回</button>
+          <!-- 第一排：模块名和返回按钮 -->
+          <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
             <h3 id="module-detail-name" style="font-size:18px;font-weight:600;color:var(--gray-900);margin:0;"></h3>
-            <span id="module-detail-type-badge" class="module-type-badge"></span>
+            <button class="btn btn-primary btn-sm" id="btn-module-back">返回</button>
+          </div>
+
+          <!-- 第二排：类型状态和操作按钮 -->
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
+            <div style="display:flex;align-items:center;gap:12px;">
+              <span id="module-detail-type-badge" class="module-type-badge"></span>
+              <span id="module-detail-run-status" style="font-size:13px;"></span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <button class="btn btn-sm btn-secondary" id="btn-reset-defaults" onclick="resetModuleDefaults()">恢复默认值</button>
+              <button class="btn btn-sm btn-success" id="btn-detail-start" onclick="startModuleFromDetail()">启动</button>
+              <button class="btn btn-sm btn-danger" id="btn-detail-stop" onclick="stopModuleFromDetail()">停止</button>
+            </div>
           </div>
 
-          <!-- Metadata Form -->
-          <div class="form-section" id="module-meta-form">
-            <h4 class="form-title">元数据</h4>
+          <!-- 【区块1：模块标识】 -->
+          <div class="form-section">
+            <h4 class="form-title">模块标识</h4>
+
+            <!-- 模块路径 -->
+            <div class="form-row">
+              <div class="form-group" style="grid-column: 1 / -1;">
+                <label>模块路径 <span style="font-size:11px;color:var(--gray-400);">(source_path)</span></label>
+                <input type="text" id="mod-source-path" disabled style="background:var(--gray-100);cursor:not-allowed;font-size:12px;font-family:monospace;">
+              </div>
+            </div>
 
-            <!-- Read-only fields -->
-            <div class="form-row" style="margin-bottom:14px;">
+            <div class="form-row">
               <div class="form-group">
-                <label>Name</label>
+                <label>模块名 <span style="font-size:11px;color:var(--gray-400);">(name)</span></label>
                 <input type="text" id="mod-meta-name" disabled style="background:var(--gray-100);cursor:not-allowed;">
               </div>
               <div class="form-group">
-                <label>Type</label>
+                <label>模块类型 <span style="font-size:11px;color:var(--gray-400);">(type)</span></label>
                 <input type="text" id="mod-meta-type" disabled style="background:var(--gray-100);cursor:not-allowed;">
               </div>
             </div>
-            <div class="form-row" style="margin-bottom:14px;">
+            <div class="form-row">
               <div class="form-group">
-                <label>Runtime</label>
+                <label>运行时 <span style="font-size:11px;color:var(--gray-400);">(runtime)</span></label>
                 <input type="text" id="mod-meta-runtime" disabled style="background:var(--gray-100);cursor:not-allowed;">
               </div>
               <div class="form-group">
-                <label>Entry</label>
+                <label>入口文件 <span style="font-size:11px;color:var(--gray-400);">(entry)</span></label>
                 <input type="text" id="mod-meta-entry" disabled style="background:var(--gray-100);cursor:not-allowed;">
               </div>
             </div>
-
-            <hr style="border:none;border-top:1px solid var(--gray-200);margin:16px 0;">
-
-            <!-- Editable fields -->
             <div class="form-row">
               <div class="form-group">
-                <label>Display Name</label>
-                <input type="text" id="mod-meta-display-name" data-field="display_name">
+                <label>版本 <span style="font-size:11px;color:var(--gray-400);">(version)</span></label>
+                <input type="text" id="mod-meta-version" disabled style="background:var(--gray-100);cursor:not-allowed;">
               </div>
               <div class="form-group">
-                <label>Version</label>
-                <input type="text" id="mod-meta-version" data-field="version">
+                <label>显示名称 <span style="font-size:11px;color:var(--gray-400);">(display_name)</span></label>
+                <input type="text" id="mod-meta-display-name" data-field="display_name">
               </div>
             </div>
+          </div>
+
+          <!-- 【区块2：启动配置】 -->
+          <div class="form-section">
+            <h4 class="form-title">启动配置</h4>
+
             <div class="form-row">
               <div class="form-group">
-                <label>State</label>
+                <label>默认状态 <span style="font-size:11px;color:var(--gray-400);">(state - 需重启生效)</span></label>
                 <select id="mod-meta-state" data-field="state">
-                  <option value="enabled">enabled</option>
-                  <option value="manual">manual</option>
-                  <option value="disabled">disabled</option>
+                  <option value="enabled">enabled - 自动启动</option>
+                  <option value="manual">manual - 手动启动</option>
+                  <option value="disabled">disabled - 禁用</option>
                 </select>
               </div>
               <div class="form-group">
-                <label>Preferred Port</label>
-                <input type="number" id="mod-meta-port" data-field="preferred_port" placeholder="(无)">
+                <label>监控 <span style="font-size:11px;color:var(--gray-400);">(monitor - Watchdog是否监控此模块)</span></label>
+                <select id="mod-meta-monitor" data-field="monitor">
+                  <option value="true">启用监控 (默认)</option>
+                  <option value="false">禁用监控</option>
+                </select>
               </div>
             </div>
+          </div>
+
+          <!-- 【区块3：网络配置】 -->
+          <div class="form-section">
+            <h4 class="form-title">网络配置</h4>
+
             <div class="form-row">
               <div class="form-group">
-                <label>Advertise IP</label>
-                <input type="text" id="mod-meta-ip" data-field="advertise_ip" placeholder="0.0.0.0">
+                <label>首选端口 <span style="font-size:11px;color:var(--gray-400);">(preferred_port)</span></label>
+                <input type="number" id="mod-meta-port" data-field="preferred_port" placeholder="(无)">
               </div>
               <div class="form-group">
-                <label>Monitor</label>
-                <select id="mod-meta-monitor" data-field="monitor">
-                  <option value="">(未设置)</option>
-                  <option value="true">true</option>
-                  <option value="false">false</option>
+                <label>监听地址 <span style="font-size:11px;color:var(--gray-400);">(advertise_ip)</span></label>
+                <select id="mod-meta-ip" data-field="advertise_ip">
+                  <option value="127.0.0.1">127.0.0.1 - 仅本地</option>
+                  <option value="0.0.0.0">0.0.0.0 - 允许远程</option>
                 </select>
               </div>
             </div>
           </div>
 
-          <!-- Config Tree (only shown if module has config.yaml) -->
+          <!-- 【区块5：模块配置文件】 -->
           <div class="form-section hidden" id="module-config-section">
-            <h4 class="form-title">config.yaml</h4>
+            <h4 class="form-title">模块配置文件 (config.yaml)</h4>
             <div id="module-config-tree"></div>
           </div>
         </div>
@@ -1369,6 +1526,35 @@
     </div>
   </div>
 
+  <!-- ===== Reset Module Defaults Dialog ===== -->
+  <div id="reset-defaults-modal" class="modal-overlay hidden">
+    <div class="modal" style="max-width:600px;">
+      <div class="modal-header">
+        <h3 class="modal-title">恢复默认值</h3>
+        <button class="modal-close" id="reset-defaults-close">&times;</button>
+      </div>
+      <div class="modal-body">
+        <p style="margin-bottom:16px;color:var(--gray-600);">以下配置将被恢复为默认值：</p>
+        <table style="width:100%;border-collapse:collapse;">
+          <thead>
+            <tr style="background:var(--gray-100);border-bottom:1px solid var(--gray-300);">
+              <th style="padding:8px;text-align:left;font-weight:600;">字段</th>
+              <th style="padding:8px;text-align:left;font-weight:600;">当前值</th>
+              <th style="padding:8px;text-align:left;font-weight:600;">默认值</th>
+            </tr>
+          </thead>
+          <tbody id="reset-defaults-comparison">
+            <!-- Dynamic content -->
+          </tbody>
+        </table>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" id="reset-defaults-cancel">取消</button>
+        <button class="btn btn-primary" id="reset-defaults-confirm">确认恢复</button>
+      </div>
+    </div>
+  </div>
+
   <!-- ===== TTS Test Dialog ===== -->
   <div id="tts-test-overlay" class="asr-test-overlay hidden">
     <div class="asr-test-dialog" style="width:560px">
@@ -1543,6 +1729,10 @@
   <!-- ===== Toast / Notification Area ===== -->
   <div id="toast-container"></div>
 
-  <script src="js/app.js?v=52"></script>
+  <script src="js/kernel-client.js"></script>
+  <script src="js/kernel-client-example.js"></script>
+  <script src="js/registry-tests.js"></script>
+  <script src="js/token-manager.js"></script>
+  <script src="js/app.js?v=65"></script>
 </body>
 </html>