evolclaw-web 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,17 +5,17 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>EvolClaw Watch</title>
7
7
  <link rel="icon" href="data:,">
8
- <link rel="stylesheet" href="/style.css">
8
+ <link rel="stylesheet" href="style.css">
9
9
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
10
10
  </head>
11
11
  <body>
12
12
  <!-- 配对页 -->
13
13
  <div id="pair-page" class="pair-page">
14
14
  <div class="pair-box">
15
- <h1>🔭 EvolClaw Watch</h1>
16
- <p class="pair-hint">输入终端显示的 6 位配对码</p>
17
- <input id="pair-input" type="text" inputmode="numeric" maxlength="6" placeholder="000000" autocomplete="off">
18
- <button id="pair-btn">配对</button>
15
+ <h1 data-i18n="pair.title">🔭 EvolClaw Watch</h1>
16
+ <p class="pair-hint" data-i18n="pair.hint">输入终端显示的 6 位配对码</p>
17
+ <input id="pair-input" type="text" inputmode="numeric" maxlength="6" placeholder="000000" data-i18n="pair.placeholder" autocomplete="off">
18
+ <button id="pair-btn" data-i18n="action.pair">配对</button>
19
19
  <div id="pair-error" class="pair-error"></div>
20
20
  </div>
21
21
  </div>
@@ -25,21 +25,23 @@
25
25
  <header class="topbar">
26
26
  <span class="brand">🔭 EvolClaw Watch</span>
27
27
  <nav class="tabs">
28
- <button class="tab active" data-view="agents">Agents</button>
29
- <button class="tab" data-view="msg">Messages</button>
30
- <button class="tab" data-view="session">Sessions</button>
31
- <button class="tab" data-view="triggers">Triggers</button>
32
- <button class="tab" data-view="cache">Cache</button>
33
- <button class="tab" data-view="system">System</button>
34
- <button class="tab" data-view="usage">Usage</button>
35
- <button class="tab" data-view="monitor">Monitor</button>
28
+ <button class="tab active" data-view="agents" data-i18n="tab.agents">Agents</button>
29
+ <button class="tab" data-view="msg" data-i18n="tab.messages">Messages</button>
30
+ <button class="tab" data-view="session" data-i18n="tab.sessions">Sessions</button>
31
+ <button class="tab" data-view="triggers" data-i18n="tab.triggers">Triggers</button>
32
+ <button class="tab" data-view="cache" data-i18n="tab.cache">Cache</button>
33
+ <button class="tab" data-view="system" data-i18n="tab.system">System</button>
34
+ <button class="tab" data-view="gateway" data-i18n="tab.gateway">AgentGateway</button>
35
+ <button class="tab" data-view="usage" data-i18n="tab.usage">Usage</button>
36
+ <button class="tab" data-view="monitor" data-i18n="tab.monitor">Monitor</button>
36
37
 
37
38
  </nav>
38
39
  <span style="flex:1"></span>
39
- 2026-06-12 22:54
40
- <span id="conn-status" class="conn-status">连接中…</span>
41
- <button id="theme-btn" class="theme-btn" title="切换主题">🌗</button>
42
- <button id="logout-btn" class="logout-btn" title="退出配对">退出</button>
40
+ 2026-06-19 08:46
41
+ <span id="conn-status" class="conn-status" data-i18n="status.connecting">连接中…</span>
42
+ <button id="lang-btn" class="theme-btn" title="Switch Language / 切换语言">🌐</button>
43
+ <button id="theme-btn" class="theme-btn" title="Toggle Theme / 切换主题">🌗</button>
44
+ <button id="logout-btn" class="logout-btn" data-i18n="action.logout" title="退出配对">退出</button>
43
45
  </header>
44
46
 
45
47
  <main class="content">
@@ -65,35 +67,71 @@
65
67
  </section>
66
68
  <section id="view-cache" class="view"></section>
67
69
  <section id="view-system" class="view"></section>
70
+ <section id="view-gateway" class="view"></section>
68
71
  <section id="view-usage" class="view">
69
72
  <div class="usage-layout">
70
- <!-- 子 Tab:Dashboard / Explorer -->
73
+ <!-- 子 Tab:Overview / Explorer -->
71
74
  <div class="usage-subtabs">
72
- <button class="usage-subtab active" data-subview="overview">Overview</button>
73
- <button class="usage-subtab" data-subview="dashboard">Dashboard</button>
74
- <button class="usage-subtab" data-subview="explorer">Explorer</button>
75
- </div>
76
-
77
- <!-- Dashboard 面板 -->
78
- <div id="usage-dashboard" class="usage-subpanel">
79
- <div class="usage-cards" id="usage-cards"></div>
80
- <div class="usage-chart-row">
81
- <div id="usage-hourly-chart" class="usage-chart"></div>
82
- <div id="usage-model-chart" class="usage-chart-sm"></div>
83
- </div>
84
- <div class="usage-table-section">
85
- <h3>Top Peers (Today)</h3>
86
- <table id="usage-top-peers" class="usage-table"></table>
87
- </div>
75
+ <button class="usage-subtab active" data-subview="overview" data-i18n="usage.subtab.overview">Overview</button>
76
+ <button class="usage-subtab" data-subview="explorer" data-i18n="usage.subtab.explorer">Explorer</button>
88
77
  </div>
89
78
 
90
79
  <!-- Overview 面板 -->
91
80
  <div id="usage-overview" class="usage-subpanel active">
81
+ <div class="overview-filters">
82
+ <div class="ov-range-tabs">
83
+ <button class="ov-range-btn active" data-range="today" data-i18n="usage.overview.range.today">今日</button>
84
+ <button class="ov-range-btn" data-range="week" data-i18n="usage.overview.range.week">本周</button>
85
+ <button class="ov-range-btn" data-range="lastWeek" data-i18n="usage.overview.range.lastWeek">上周</button>
86
+ <button class="ov-range-btn" data-range="month" data-i18n="usage.overview.range.month">本月</button>
87
+ <button class="ov-range-btn" data-range="last30" data-i18n="usage.overview.range.last30">最近30天</button>
88
+ <button class="ov-range-btn" data-range="custom" data-i18n="usage.overview.range.custom">自定义</button>
89
+ </div>
90
+ <div class="ov-custom-date" id="ov-custom-date" style="display:none;">
91
+ <label><span data-i18n="usage.explorer.filter.from">From</span> <input type="datetime-local" id="ov-from"></label>
92
+ <label><span data-i18n="usage.explorer.filter.to">To</span> <input type="datetime-local" id="ov-to"></label>
93
+ <button id="ov-query-btn" data-i18n="action.query">Query</button>
94
+ </div>
95
+ </div>
92
96
  <div id="ov-cards" class="usage-cards"></div>
93
97
  <div class="usage-table-section" style="margin-top:4px">
94
- <h3>按 Agent 汇总(全时段)</h3>
98
+ <h3 id="ov-table-title" data-i18n="usage.overview.title">按 Agent 汇总</h3>
95
99
  <table id="ov-agent-table" class="usage-table"></table>
96
100
  </div>
101
+
102
+ <!-- 模型访问明细查询 -->
103
+ <div class="usage-table-section" style="margin-top:16px">
104
+ <h3 data-i18n="usage.detail.title">模型访问明细</h3>
105
+ <div class="detail-filters">
106
+ <label><span data-i18n="usage.detail.agent">Agent</span>
107
+ <select id="detail-agent">
108
+ <option value="" data-i18n="usage.explorer.all">全部</option>
109
+ </select>
110
+ </label>
111
+ <label><span data-i18n="usage.detail.model">Model</span>
112
+ <select id="detail-model">
113
+ <option value="" data-i18n="usage.explorer.all">全部</option>
114
+ </select>
115
+ </label>
116
+ <label><span data-i18n="usage.detail.pageSize">每页</span>
117
+ <select id="detail-page-size">
118
+ <option value="20">20</option>
119
+ <option value="50" selected>50</option>
120
+ <option value="100">100</option>
121
+ <option value="200">200</option>
122
+ </select>
123
+ </label>
124
+ </div>
125
+ <div id="detail-result" style="margin-top:12px;max-height:400px;overflow-y:auto;">
126
+ <table id="detail-table" class="usage-table"></table>
127
+ </div>
128
+ <div class="detail-pagination">
129
+ <button id="detail-prev-page" data-i18n="usage.detail.prevPage">上一页</button>
130
+ <input type="number" id="detail-page" value="1" min="1" style="width:60px;text-align:center">
131
+ <button id="detail-next-page" data-i18n="usage.detail.nextPage">下一页</button>
132
+ <span id="detail-pagination-info" style="margin-left:12px;color:var(--dim);font-size:12px"></span>
133
+ </div>
134
+ </div>
97
135
  </div>
98
136
 
99
137
  <!-- Explorer 面板 -->
@@ -102,35 +140,62 @@
102
140
  <!-- 左侧列表 -->
103
141
  <div class="exp-sidebar">
104
142
  <div class="exp-sidebar-group">
105
- <div class="exp-sidebar-title">Agents</div>
143
+ <div class="exp-sidebar-title" data-i18n="usage.explorer.sidebar.agents">Agents</div>
106
144
  <div id="exp-agent-list"></div>
107
145
  </div>
108
146
  <div class="exp-sidebar-group">
109
- <div class="exp-sidebar-title">Peers</div>
147
+ <div class="exp-sidebar-title" data-i18n="usage.explorer.sidebar.peers">Peers</div>
110
148
  <div id="exp-peer-list"></div>
111
149
  </div>
112
150
  </div>
113
151
  <!-- 右侧详情 -->
114
152
  <div class="exp-detail">
115
153
  <div id="exp-detail-header" class="exp-detail-header">
116
- <span id="exp-selected-name">请从左侧选择 Agent 或 Peer</span>
154
+ <span id="exp-selected-name" data-i18n="usage.explorer.selectHint">请从左侧选择 Agent 或 Peer</span>
155
+ </div>
156
+
157
+ <!-- 时间范围选择(与总览类似,但支持精确到时分秒) -->
158
+ <div class="exp-time-filters">
159
+ <div class="exp-range-tabs">
160
+ <button class="exp-range-btn active" data-range="today" data-i18n="usage.overview.range.today">今日</button>
161
+ <button class="exp-range-btn" data-range="week" data-i18n="usage.overview.range.week">本周</button>
162
+ <button class="exp-range-btn" data-range="lastWeek" data-i18n="usage.overview.range.lastWeek">上周</button>
163
+ <button class="exp-range-btn" data-range="month" data-i18n="usage.overview.range.month">本月</button>
164
+ <button class="exp-range-btn" data-range="last30" data-i18n="usage.overview.range.last30">最近30天</button>
165
+ <button class="exp-range-btn" data-range="custom" data-i18n="usage.overview.range.custom">自定义</button>
166
+ </div>
167
+ <div class="exp-custom-date" id="exp-custom-date" style="display:none;">
168
+ <label><span data-i18n="usage.explorer.filter.from">From</span> <input type="datetime-local" id="exp-from"></label>
169
+ <label><span data-i18n="usage.explorer.filter.to">To</span> <input type="datetime-local" id="exp-to"></label>
170
+ <button id="exp-time-query-btn" data-i18n="action.query">Query</button>
171
+ </div>
117
172
  </div>
118
- <div id="exp-detail-cards" class="usage-cards" style="display:none"></div>
173
+
174
+ <div id="exp-detail-cards" class="usage-cards"></div>
175
+
176
+ <!-- 模型和粒度筛选 -->
119
177
  <div class="explorer-filters">
120
- <label>From <input type="date" id="exp-from"></label>
121
- <label>To <input type="date" id="exp-to"></label>
122
- <label>Model <input type="text" id="exp-model" placeholder="model-id"></label>
123
- <select id="exp-granularity">
124
- <option value="hour">Hour</option>
125
- <option value="day" selected>Day</option>
126
- <option value="week">Week</option>
127
- <option value="month">Month</option>
128
- </select>
129
- <button id="exp-query-btn">Query</button>
178
+ <label>
179
+ <span data-i18n="usage.explorer.filter.model">Model</span>
180
+ <select id="exp-model">
181
+ <option value="" data-i18n="usage.explorer.all">全部</option>
182
+ </select>
183
+ </label>
184
+ <label>
185
+ <span data-i18n="usage.explorer.filter.granularity">Granularity</span>
186
+ <select id="exp-granularity">
187
+ <option value="hour" data-i18n="usage.explorer.filter.granularity.hour">Hour</option>
188
+ <option value="day" selected data-i18n="usage.explorer.filter.granularity.day">Day</option>
189
+ <option value="week" data-i18n="usage.explorer.filter.granularity.week">Week</option>
190
+ <option value="month" data-i18n="usage.explorer.filter.granularity.month">Month</option>
191
+ </select>
192
+ </label>
193
+ <button id="exp-query-btn" data-i18n="action.query">Query</button>
130
194
  </div>
195
+
131
196
  <div id="usage-explorer-chart" class="usage-chart" style="height:260px"></div>
132
197
  <div class="usage-table-section" style="margin-top:12px">
133
- <h3>Results</h3>
198
+ <h3 data-i18n="usage.explorer.results">Results</h3>
134
199
  <table id="usage-explorer-table" class="usage-table"></table>
135
200
  </div>
136
201
  </div>
@@ -142,16 +207,16 @@
142
207
  <section id="view-monitor" class="view">
143
208
  <div class="mon-layout">
144
209
  <div class="mon-toolbar">
145
- <span class="mon-toolbar-label">时间范围</span>
210
+ <span class="mon-toolbar-label" data-i18n="monitor.toolbar.timeRange">时间范围</span>
146
211
  <div class="mon-range-tabs">
147
- <button class="mon-range active" data-range="2m">2 分钟</button>
148
- <button class="mon-range" data-range="10m">10 分钟</button>
149
- <button class="mon-range" data-range="1h">1 小时</button>
212
+ <button class="mon-range active" data-range="2m" data-i18n="monitor.range.2m">2 分钟</button>
213
+ <button class="mon-range" data-range="10m" data-i18n="monitor.range.10m">10 分钟</button>
214
+ <button class="mon-range" data-range="1h" data-i18n="monitor.range.1h">1 小时</button>
150
215
  </div>
151
216
  <span style="flex:1"></span>
152
217
  <span class="mon-legend">
153
- <span class="mon-legend-item"><i class="lg-dot lg-proc"></i>evolclaw 进程</span>
154
- <span class="mon-legend-item"><i class="lg-dot lg-sys"></i>整机系统</span>
218
+ <span class="mon-legend-item"><i class="lg-dot lg-proc"></i><span data-i18n="monitor.legend.process">evolclaw 进程</span></span>
219
+ <span class="mon-legend-item"><i class="lg-dot lg-sys"></i><span data-i18n="monitor.legend.system">整机系统</span></span>
155
220
  </span>
156
221
  </div>
157
222
  <div id="mon-cards" class="usage-cards"></div>
@@ -171,6 +236,6 @@
171
236
  </main>
172
237
  </div>
173
238
 
174
- <script src="/app.js"></script>
239
+ <script src="app.js"></script>
175
240
  </body>
176
241
  </html>