evolclaw-web 1.1.0 → 1.2.0

package/dist/static/index.html

@@ -32,11 +32,11 @@
         <button class="tab" data-view="cache">Cache</button>
         <button class="tab" data-view="system">System</button>
         <button class="tab" data-view="usage">Usage</button>
+        <button class="tab" data-view="monitor">Monitor</button>
 
       </nav>
-      <span id="today-cost" class="today-cost"></span>
       <span style="flex:1"></span>
-      2026-06-10 05:36
+      2026-06-12 22:54
       <span id="conn-status" class="conn-status">连接中…</span>
       <button id="theme-btn" class="theme-btn" title="切换主题">🌗</button>
       <button id="logout-btn" class="logout-btn" title="退出配对">退出</button>
@@ -139,6 +139,35 @@
         </div>
       </section>
 
+      <section id="view-monitor" class="view">
+        <div class="mon-layout">
+          <div class="mon-toolbar">
+            <span class="mon-toolbar-label">时间范围</span>
+            <div class="mon-range-tabs">
+              <button class="mon-range active" data-range="2m">2 分钟</button>
+              <button class="mon-range" data-range="10m">10 分钟</button>
+              <button class="mon-range" data-range="1h">1 小时</button>
+            </div>
+            <span style="flex:1"></span>
+            <span class="mon-legend">
+              <span class="mon-legend-item"><i class="lg-dot lg-proc"></i>evolclaw 进程</span>
+              <span class="mon-legend-item"><i class="lg-dot lg-sys"></i>整机系统</span>
+            </span>
+          </div>
+          <div id="mon-cards" class="usage-cards"></div>
+          <div class="mon-row2">
+            <div id="mon-cpu-chart" class="mon-chart"></div>
+            <div id="mon-mem-chart" class="mon-chart"></div>
+          </div>
+          <div class="mon-row2">
+            <div id="mon-msg-chart" class="mon-chart"></div>
+            <div id="mon-err-chart" class="mon-chart"></div>
+          </div>
+          <div class="mon-table-wrap" id="mon-agent-table-wrap"></div>
+          <div class="mon-err-wrap" id="mon-err-list"></div>
+        </div>
+      </section>
+
     </main>
   </div>
 

package/dist/static/style.css

@@ -12,6 +12,8 @@
   --orange: #dd6b20;
   --blue: #4f6ef7;
   --magenta: #805ad5;
+  --msg-in: #1f9d55;
+  --msg-out: #2563eb;
 }
 
 /* 暗色主题 */
@@ -28,6 +30,8 @@
   --orange: #db8e3c;
   --blue: #58a6ff;
   --magenta: #bc8cff;
+  --msg-in: #56e39f;
+  --msg-out: #79b8ff;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -307,13 +311,6 @@ tr:hover td { background: var(--bg2); }
 }
 .theme-btn:hover { background: var(--bg3); }
 
-/* ── Today cost in topbar ── */
-.today-cost {
-  font-size: 12px; color: var(--green); font-weight: 600;
-  margin-left: auto; margin-right: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
 /* ── Usage view ── */
 .usage-layout {
   padding: 0; overflow: hidden; flex: 1; display: flex; flex-direction: column;
@@ -413,9 +410,119 @@ tr:hover td { background: var(--bg2); }
 
 /* ── Agents 页 ── */
 .agents-toolbar { padding: 8px 12px; border-bottom: 1px solid var(--border); }
-.agent-ops-cell { white-space: nowrap; }
-.agent-ops { display: flex; gap: 4px; flex-wrap: nowrap; }
-.agent-ops .ctrl-btn { padding: 1px 6px; }
+.agent-ops-cell { white-space: nowrap; vertical-align: middle; }
+
+/* disabled 行淡化 */
+tr.ag-disabled td { opacity: .5; }
+tr.ag-disabled .ag-name { color: var(--dim); }
+
+/* 操作区：主按钮 + ··· 下拉 */
+.agent-ops { display: flex; align-items: center; gap: 5px; }
+.agent-ops .ctrl-btn { padding: 2px 9px; font-size: 11px; }
+.ops-enable { color: var(--green) !important; border-color: var(--green) !important; }
+.ops-clear-queue { color: var(--orange) !important; border-color: var(--orange) !important; }
+
+/* 操作进行中状态 */
+.agent-ops-busy { display: flex; align-items: center; gap: 6px; }
+.ops-busy-label { font-size: 11px; color: var(--dim); font-style: italic; }
+
+/* ··· 下拉菜单 */
+.ops-more { position: relative; }
+.ops-more-btn { letter-spacing: 2px; padding: 2px 6px !important; }
+.ops-dropdown {
+  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
+  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.15); min-width: 140px; overflow: hidden;
+}
+.ops-more.open .ops-dropdown { display: block; }
+.ops-dd-item {
+  display: block; width: 100%; padding: 7px 14px; text-align: left;
+  font-size: 12px; background: none; border: none; color: var(--fg);
+  cursor: pointer; text-decoration: none; white-space: nowrap;
+}
+.ops-dd-item:hover { background: var(--bg3); }
+.ops-dd-item.danger { color: var(--red); }
+.ops-dd-item.danger:hover { background: var(--bg3); }
+
+/* 顶部统计条（对齐终端 watch aid 状态栏）*/
+.agents-stats {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
+  padding: 9px 14px; border-bottom: 1px solid var(--border);
+  background: var(--bg2); font-size: 12px; font-variant-numeric: tabular-nums;
+}
+.agents-stats .sg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.agents-stats .sg-k { color: var(--green); font-weight: 600; }
+.agents-stats .sg-gw { font-family: ui-monospace, Consolas, monospace; color: var(--fg); }
+.agents-stats .num-on { color: var(--green); font-weight: 600; }
+.agents-stats .num-off { color: var(--red); font-weight: 600; }
+.agents-stats .in { color: var(--green); }
+.agents-stats .out { color: var(--blue); }
+
+/* 两行一个 agent：主行 + 信息行 */
+#view-agents tr.ag-main > td { border-bottom: none; padding-bottom: 3px; }
+#view-agents tr.ag-sub > td { padding-top: 0; padding-bottom: 9px; color: var(--dim); }
+#view-agents tr.ag-main:hover td, #view-agents tr.ag-sub:hover td { background: var(--bg2); }
+
+/* AID 单元：状态点 + 显示名(主) + aid(次，dim) */
+.ag-id { display: flex; align-items: center; gap: 7px; }
+.ag-id .dot { margin: 0; flex-shrink: 0; }
+.ag-id-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+.ag-name { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
+.ag-aid { font-size: 10.5px; color: var(--dim); font-family: ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; }
+
+/* 工作状态徽标（无边框，纯色文字） */
+.state-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
+.state-badge.working { color: #fff; background: var(--orange); }
+.state-badge.queued  { color: #fff; background: var(--orange); }
+.state-badge.idle    { color: var(--dim); background: var(--bg3); }
+.state-badge.connected { color: var(--green); background: var(--bg3); }
+.state-badge.muted   { color: var(--magenta); background: var(--bg3); }
+.state-badge.stopped { color: var(--dim); background: var(--bg3); }
+
+/* 队列数列 */
+.ag-queue-num { color: var(--orange); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+/* 子标签栏 */
+.ag-subtabs { display: inline-flex; gap: 2px; }
+.ag-subtab { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 4px 14px; font-size: 12px; color: var(--dim); cursor: pointer; font-family: inherit; }
+.ag-subtab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+.agents-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
+
+/* 操作按钮：实心立体风 */
+.ops-stop  { background: var(--red) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 4px rgba(229,62,62,.3); }
+.ops-stop:hover { opacity: 0.85; }
+.ops-start { background: var(--green) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 4px rgba(56,161,105,.3); }
+.ops-start:hover { opacity: 0.85; }
+.ops-clear-queue { background: var(--orange) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 4px rgba(221,107,32,.3); }
+.ops-clear-queue:hover { opacity: 0.85; }
+.ops-enable { background: var(--green) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 4px rgba(56,161,105,.3); }
+.ops-enable:hover { opacity: 0.85; }
+.ops-mute  { background: var(--magenta) !important; color: #fff !important; border: none !important; }
+.ops-unmute { background: var(--green) !important; color: #fff !important; border: none !important; }
+
+/* 信息行：最近消息（进绿/出蓝，对端橙）+ 项目路径 */
+.ag-info { display: flex; flex-direction: column; gap: 2px; }
+.ag-msg-wrap { position: relative; }
+.ag-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
+.ag-msg .arrow-in  { color: var(--msg-in); font-weight: 700; }
+.ag-msg .arrow-out { color: var(--msg-out); font-weight: 700; }
+.ag-msg .peer { color: var(--orange); font-weight: 600; }
+.ag-msg .text-in  { color: var(--msg-in); font-weight: 500; }
+.ag-msg .text-out { color: var(--msg-out); font-weight: 500; }
+.ag-msg .mtag { display: inline-block; padding: 0 4px; margin: 0 2px; border-radius: 3px; font-size: 10px; background: var(--bg3); color: var(--magenta); vertical-align: middle; }
+.ag-msg .mtags { color: var(--magenta); font-size: 10.5px; }
+.ag-path { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
+
+/* 消息 tooltip（hover 浮层）*/
+.msg-tip { display: none; position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 200; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: 8px 12px; min-width: 300px; max-width: 600px; white-space: normal; }
+.ag-msg-wrap:hover .msg-tip { display: block; }
+.tip-row { font-size: 12px; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
+.tip-row-in  { color: var(--msg-in); }
+.tip-row-out { color: var(--msg-out); }
+.tip-kind { margin: 0 2px; font-weight: 600; }
+.tip-flag { margin: 0 2px; padding: 0 4px; border-radius: 3px; background: var(--bg3); color: var(--magenta); font-size: 10.5px; }
+.tip-row b { color: var(--orange); font-weight: 600; }
+
 
 /* ── System 页 ── */
 .sys-wrap { padding: 12px; overflow-y: auto; height: 100%; }
@@ -424,6 +531,28 @@ tr:hover td { background: var(--bg2); }
 .card-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
 .card-val { font-size: 13px; color: var(--fg); }
 
+/* Agent 健康卡片网格 */
+.agent-health-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 10px;
+}
+.agent-health-card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 14px;
+}
+.ahc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
+.ahc-aid { font-weight: 600; font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ahc-status { margin-left: auto; font-size: 11px; color: var(--dim); }
+.ahc-row { display: flex; gap: 8px; font-size: 12px; margin: 3px 0; }
+.ahc-k { color: var(--dim); width: 32px; flex-shrink: 0; }
+.ahc-v { color: var(--fg); flex: 1; min-width: 0; }
+.ahc-path { font-family: var(--mono, ui-monospace, monospace); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ch-row { line-height: 1.6; }
+.ahc-err { margin-top: 6px; font-size: 12px; color: var(--red); white-space: normal; word-break: break-word; }
+
 /* ── Triggers 页 ── */
 .trig-layout { display: flex; height: 100%; overflow: hidden; }
 .trig-agents-col { width: 200px; border-right: 1px solid var(--border); flex-shrink: 0; overflow-y: auto; }
@@ -501,3 +630,40 @@ tr:hover td { background: var(--bg2); }
   font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--fg);
 }
 
+/* ── Monitor ─────────────────────────────────── */
+.mon-layout { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; box-sizing: border-box; }
+.mon-toolbar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
+.mon-toolbar-label { font-size: 12px; color: var(--dim); font-weight: 500; }
+.mon-range-tabs { display: flex; gap: 2px; background: var(--bg3); border-radius: 6px; padding: 2px; }
+.mon-range { padding: 4px 12px; border: none; background: none; border-radius: 5px; font-size: 12px; font-family: inherit; color: var(--dim); cursor: pointer; }
+.mon-range:hover { color: var(--fg); }
+.mon-range.active { background: var(--accent); color: #fff; }
+.mon-legend { display: flex; gap: 14px; font-size: 11px; color: var(--dim); }
+.mon-legend-item { display: inline-flex; align-items: center; gap: 4px; }
+.lg-dot { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
+.lg-proc { background: var(--accent); }
+.lg-sys  { background: var(--orange); }
+.mon-row2 { display: flex; gap: 14px; }
+.mon-chart { flex: 1; height: 220px; min-width: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.mon-table-wrap { min-width: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; overflow-x: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.mon-section-title { font-size: 13px; font-weight: 500; color: var(--dim); margin-bottom: 10px; }
+.mon-section-sub { font-weight: 400; color: var(--dim); font-size: 11px; }
+.mon-err-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.mon-err-rows { max-height: 240px; overflow-y: auto; }
+.mon-err-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
+.mon-err-row:last-child { border-bottom: none; }
+.mon-err-time { flex-shrink: 0; width: 36px; color: var(--dim); font-variant-numeric: tabular-nums; }
+.mon-err-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 500; }
+.tag-task { background: #fef3cd; color: #856404; }
+.tag-tool { background: #d1ecf1; color: #0c5460; }
+[data-theme="dark"] .tag-task { background: #3d2a1a; color: #db8e3c; }
+[data-theme="dark"] .tag-tool { background: #1a3d42; color: #76c7d4; }
+.mon-err-aid { flex-shrink: 0; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-weight: 500; }
+.mon-err-kind { flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--red); }
+.mon-err-msg { flex: 1; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 900px) {
+  .mon-row2 { flex-direction: column; }
+  .mon-chart { height: 190px; }
+  .mon-toolbar { flex-wrap: wrap; }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolclaw-web",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Web-based monitoring dashboard for EvolClaw",
   "type": "module",
   "bin": {
@@ -10,7 +10,7 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsc && node -e \"try{require('child_process').execFileSync('chmod',['+x','dist/index.js'])}catch{}\" && node -e \"const fs=require('fs'),path=require('path');fs.cpSync('src/static','dist/static',{recursive:true});const f='dist/static/index.html',n=new Date(),ts=n.getFullYear()+'-'+String(n.getMonth()+1).padStart(2,'0')+'-'+String(n.getDate()).padStart(2,'0')+' '+String(n.getHours()).padStart(2,'0')+':'+String(n.getMinutes()).padStart(2,'0');fs.writeFileSync(f,fs.readFileSync(f,'utf8').replace(/(\\<span class=\\\"build-ts\\\"[^>]*\\>)[^<]+(\\<\\/span\\>)/,'$1'+ts+'$2'))\"",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc && node -e \"try{require('child_process').execFileSync('chmod',['+x','dist/index.js'])}catch{}\" && node -e \"const fs=require('fs'),path=require('path');fs.cpSync('src/static','dist/static',{recursive:true});const f='dist/static/index.html',n=new Date(),ts=n.getFullYear()+'-'+String(n.getMonth()+1).padStart(2,'0')+'-'+String(n.getDate()).padStart(2,'0')+' '+String(n.getHours()).padStart(2,'0')+':'+String(n.getMinutes()).padStart(2,'0');fs.writeFileSync(f,fs.readFileSync(f,'utf8').replace(/(\\<span class=\\\"build-ts\\\"[^>]*\\>)[^<]+(\\<\\/span\\>)/,'$1'+ts+'$2'))\"",
     "dev": "node dev.mjs",
     "prepublishOnly": "npm run build"
   },

package/dist/sources/control.js

@@ -1,58 +0,0 @@
-/**
- * Control 数据源 — 通过 daemon IPC 的 menu.exec 代理拉取 menu.* 当前状态。
- *
- * snapshot: 一批 menu.list + menu.query（各 name 当前值）+ menu.options（列表类）。
- * subscribe: 1s 轮询 + JSON diff，仅变化时 push（IPC 无推送，与 aid.ts 同款）。
- *
- * 写操作（update/action）不走这里——浏览器经 WS `menu` 消息直发，requestId 配对响应。
- */
-import { resolvePaths } from '../paths.js';
-import { ipcQuery } from '../ipc-client.js';
-// 支持 query 当前值的 name
-const QUERY_NAMES = ['system', 'pwd', 'baseagent', 'model', 'effort',
-    'chatmode', 'permission', 'activity', 'dispatch', 'session'];
-// 列表类（options）
-const OPTIONS_NAMES = ['session', 'agent', 'trigger'];
-async function menuExec(payload) {
-    const p = resolvePaths();
-    const r = await ipcQuery(p.socket, { type: 'menu.exec', payload }, 5000);
-    return r?.ok ? r.response : null;
-}
-async function buildSnapshot() {
-    const [listResp, ...queryResps] = await Promise.all([
-        menuExec({ type: 'menu.list', id: 'ctrl-list' }),
-        ...QUERY_NAMES.map((name, i) => menuExec({ type: 'menu.query', id: `ctrl-q-${i}`, name })),
-    ]);
-    const optResps = await Promise.all(OPTIONS_NAMES.map((name, i) => menuExec({ type: 'menu.options', id: `ctrl-o-${i}`, name })));
-    const daemonRunning = listResp !== null;
-    const queries = {};
-    QUERY_NAMES.forEach((name, i) => { queries[name] = queryResps[i]; });
-    const options = {};
-    OPTIONS_NAMES.forEach((name, i) => { options[name] = optResps[i]; });
-    return { daemonRunning, list: listResp, queries, options };
-}
-export const controlSource = {
-    kind: 'control',
-    async snapshot() {
-        return buildSnapshot();
-    },
-    subscribe(_params, push) {
-        let lastJson = '';
-        let stopped = false;
-        const tick = async () => {
-            if (stopped)
-                return;
-            try {
-                const snap = await buildSnapshot();
-                const json = JSON.stringify(snap);
-                if (json !== lastJson) {
-                    lastJson = json;
-                    push(snap);
-                }
-            }
-            catch { /* ignore transient IPC errors */ }
-        };
-        const timer = setInterval(tick, 1000);
-        return () => { stopped = true; clearInterval(timer); };
-    },
-};