Coverage for agentos/dashboard/server.py: 0%
115 statements
« prev ^ index » next coverage.py v7.14.3, created at 2026-07-06 10:59 +0800
1"""
2Dashboard HTTP 服务器 — 内嵌单页 HTML，无需外部依赖。
4启动: agentos dashboard
5访问: http://localhost:18500
6"""
8from __future__ import annotations
10import json
11import http.server
12import queue
13import threading
14import webbrowser
15from urllib.parse import urlparse
17from agentos.dashboard.tracker import Tracker
19PORT = 18500
21# SSE 事件队列（线程安全，用于实时推送）
22_sse_queues: list[queue.Queue] = []
23_sse_lock = threading.Lock()
25def _sse_broadcast(event_type: str, data: dict):
26 """广播事件到所有 SSE 连接。"""
27 payload = json.dumps({"type": event_type, "data": data}, ensure_ascii=False)
28 with _sse_lock:
29 dead = []
30 for q in _sse_queues:
31 try:
32 q.put_nowait(payload)
33 except queue.Full:
34 dead.append(q)
35 for q in dead:
36 _sse_queues.remove(q)
38# ============================================================
39# 内嵌前端（纯 HTML/CSS/JS，零外部依赖）
40# ============================================================
42DASHBOARD_HTML = r"""<!DOCTYPE html>
43<html lang="zh-CN">
44<head>
45<meta charset="UTF-8">
46<meta name="viewport" content="width=device-width, initial-scale=1.0">
47<title>AgentOS Dashboard — 追踪面板</title>
48<style>
49*{margin:0;padding:0;box-sizing:border-box}
50body{
51 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
52 background:#0d1117;color:#c9d1d9;min-height:100vh;
53}
54.header{
55 background:#161b22;border-bottom:1px solid #30363d;padding:16px 24px;
56 display:flex;align-items:center;justify-content:space-between;
57}
58.header h1{
59 font-size:20px;font-weight:600;
60 background:linear-gradient(90deg,#58a6ff,#bc8cff);
61 -webkit-background-clip:text;-webkit-text-fill-color:transparent;
62}
63.header .stats{font-size:13px;color:#8b949e}
64.main{padding:20px 24px;max-width:1200px;margin:0 auto}
65.sessions{display:flex;flex-direction:column;gap:12px}
66.session-card{
67 background:#161b22;border:1px solid #30363d;border-radius:8px;
68 padding:16px 20px;cursor:pointer;transition:border-color .15s;
69}
70.session-card:hover{border-color:#58a6ff}
71.session-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
72.session-card .task{font-size:15px;font-weight:600;color:#e6edf3}
73.session-card .id{font-size:11px;color:#484f58;font-family:monospace}
74.session-card .meta{font-size:12px;color:#8b949e;display:flex;gap:16px}
75.session-card .status{
76 display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;
77}
78.status-completed{background:#1a3a2a;color:#3fb950}
79.status-running{background:#1a2a3a;color:#58a6ff}
80.status-error{background:#3a1a1a;color:#f85149}
81.status-cancelled{background:#3a3a1a;color:#d29922}
83/* 详情面板 */
84.detail-panel{
85 background:#161b22;border:1px solid #30363d;border-radius:8px;margin-top:16px;
86}
87.detail-header{
88 display:flex;justify-content:space-between;align-items:center;
89 padding:12px 20px;border-bottom:1px solid #30363d;
90}
91.detail-header h3{font-size:16px;color:#e6edf3}
92.detail-header button{
93 background:none;border:1px solid #30363d;color:#8b949e;padding:4px 12px;
94 border-radius:6px;cursor:pointer;font-size:12px;
95}
96.detail-header button:hover{color:#e6edf3;border-color:#58a6ff}
98/* 时间线 */
99.timeline{position:relative;padding:16px 20px}
100.timeline::before{
101 content:'';position:absolute;left:26px;top:30px;bottom:30px;
102 width:2px;background:#30363d;
103}
104.step{
105 position:relative;padding:8px 0 8px 48px;display:flex;gap:12px;
106}
107.step-dot{
108 position:absolute;left:20px;top:14px;width:14px;height:14px;
109 border-radius:50%;border:2px solid #30363d;background:#0d1117;z-index:1;
110}
111.step-dot.thinking{border-color:#58a6ff;background:#0d2847}
112.step-dot.tool_call{border-color:#d29922;background:#2a2010}
113.step-dot.tool_result{border-color:#3fb950;background:#102a18}
114.step-dot.final_answer{border-color:#bc8cff;background:#281a3a}
115.step-content{flex:1}
116.step-type{
117 font-size:11px;font-weight:600;text-transform:uppercase;margin-bottom:4px;
118}
119.step-type.thinking{color:#58a6ff}
120.step-type.tool_call{color:#d29922}
121.step-type.tool_result{color:#3fb950}
122.step-type.final_answer{color:#bc8cff}
123.step-detail{font-size:13px;color:#c9d1d9;word-break:break-word}
124.step-meta{font-size:11px;color:#484f58;margin-top:4px}
126/* 统计卡片 */
127.stat-row{display:flex;gap:16px;margin-bottom:20px}
128.stat-card{
129 flex:1;background:#161b22;border:1px solid #30363d;border-radius:8px;
130 padding:16px;text-align:center;
131}
132.stat-card .value{font-size:28px;font-weight:700;color:#e6edf3}
133.stat-card .label{font-size:12px;color:#8b949e;margin-top:4px}
134.stat-card .value.cost{color:#3fb950}
135.stat-card .value.tokens{color:#58a6ff}
137.empty{
138 text-align:center;padding:60px 20px;color:#484f58;
139}
140.empty p{font-size:14px;margin-bottom:8px}
141.empty code{
142 background:#161b22;border:1px solid #30363d;border-radius:4px;
143 padding:2px 8px;font-size:13px;
144}
145.refresh-btn{
146 background:#21262d;border:1px solid #30363d;color:#c9d1d9;
147 padding:6px 16px;border-radius:6px;cursor:pointer;font-size:12px;
148 margin-left:8px;
149}
150.refresh-btn:hover{border-color:#58a6ff}
151</style>
152</head>
153<body>
154<div class="header">
155 <div>
156 <h1>AgentOS Dashboard</h1>
157 <div class="stats" id="stats-bar">正在加载...</div>
158 </div>
159 <button class="refresh-btn" onclick="loadSessions()">刷新</button>
160</div>
161<div class="main">
162 <div class="stat-row" id="stat-cards"></div>
163 <div class="sessions" id="session-list"></div>
164 <div id="detail-area"></div>
165</div>
166<script>
167const API = '/api';
169async function loadSessions() {
170 const resp = await fetch(API + '/sessions');
171 const data = await resp.json();
172 renderStats(data.sessions || []);
173 renderSessions(data.sessions || []);
174}
176function renderStats(sessions) {
177 const total = sessions.length;
178 const completed = sessions.filter(s => s.status === 'completed').length;
179 let totalTokens = 0, totalCost = 0;
180 sessions.forEach(s => { totalTokens += s.total_tokens || 0; totalCost += s.total_cost_usd || 0; });
181 document.getElementById('stats-bar').textContent =
182 `${total} 次运行 · ${completed} 完成`;
183 document.getElementById('stat-cards').innerHTML =
184 `<div class="stat-card"><div class="value">${total}</div><div class="label">总运行次数</div></div>
185 <div class="stat-card"><div class="value">${completed}</div><div class="label">成功完成</div></div>
186 <div class="stat-card"><div class="value tokens">${(totalTokens/1000).toFixed(1)}K</div><div class="label">Token 消耗</div></div>
187 <div class="stat-card"><div class="value cost">$${totalCost.toFixed(4)}</div><div class="label">总成本</div></div>`;
188}
190function renderSessions(sessions) {
191 const el = document.getElementById('session-list');
192 if (!sessions.length) {
193 el.innerHTML = `<div class="empty">
194 <p>尚无运行记录</p>
195 <p>运行 <code>agentos "你的任务"</code> 后会自动记录到这里</p>
196 </div>`;
197 return;
198 }
199 el.innerHTML = sessions.map(s => {
200 const dur = s.finished_at ? ((s.finished_at - s.started_at) / 1000).toFixed(1) + 's' : '进行中';
201 const ts = new Date(s.started_at * 1000).toLocaleString('zh-CN');
202 const statusClass = 'status-' + (s.status || 'running');
203 const statusLabel = {completed:'已完成',running:'运行中',error:'错误',cancelled:'已取消'}[s.status] || s.status;
204 return `<div class="session-card" onclick="showDetail('${s.session_id}')">
205 <div class="top">
206 <span class="task">${esc(s.task)}</span>
207 <span class="id">${s.session_id.slice(0,12)}</span>
208 </div>
209 <div class="meta">
210 <span>${dur}</span>
211 <span>${s.total_tokens || 0} tokens</span>
212 <span>$${(s.total_cost_usd || 0).toFixed(4)}</span>
213 <span>${ts}</span>
214 <span>${s.model || s.provider || ''}</span>
215 <span class="status ${statusClass}">${statusLabel}</span>
216 </div>
217 </div>`;
218 }).join('');
219}
221async function showDetail(sid) {
222 const resp = await fetch(API + '/sessions/' + sid);
223 const s = await resp.json();
224 if (!s) return;
225 const dur = s.finished_at ? ((s.finished_at - s.started_at) / 1000).toFixed(1) + 's' : '进行中';
226 const steps = s.steps || [];
227 const timeline = steps.length ? steps.map(st => {
228 const dotClass = st.step_type || '';
229 return `<div class="step">
230 <div class="step-dot ${dotClass}"></div>
231 <div class="step-content">
232 <div class="step-type ${dotClass}">${st.step_type}</div>
233 <div class="step-detail">${esc(st.detail)}</div>
234 <div class="step-meta">#${st.step_index} · ${(st.duration_ms||0).toFixed(0)}ms · ${st.tokens||0} tokens</div>
235 </div>
236 </div>`;
237 }).join('') : '<div class="empty"><p>无步骤记录</p></div>';
239 document.getElementById('detail-area').innerHTML = `
240 <div class="detail-panel">
241 <div class="detail-header">
242 <h3>${esc(s.task)}</h3>
243 <button onclick="document.getElementById('detail-area').innerHTML=''">关闭</button>
244 </div>
245 <div class="stat-row" style="padding:16px 20px 0">
246 <div class="stat-card"><div class="value">${dur}</div><div class="label">耗时</div></div>
247 <div class="stat-card"><div class="value tokens">${s.total_tokens||0}</div><div class="label">Tokens</div></div>
248 <div class="stat-card"><div class="value cost">$${(s.total_cost_usd||0).toFixed(4)}</div><div class="label">成本</div></div>
249 <div class="stat-card"><div class="value">${steps.length}</div><div class="label">步骤数</div></div>
250 </div>
251 <div class="timeline">${timeline}</div>
252 </div>`;
253}
255function esc(s) { return (s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
256loadSessions();
258// SSE 实时推送
259var es = new EventSource('/api/events');
260es.addEventListener('connected', function(e) { console.log('[dashboard] SSE connected'); });
261es.addEventListener('message', function(e) {
262 try {
263 var msg = JSON.parse(e.data);
264 if (msg.type === 'step' || msg.type === 'session_done') {
265 loadSessions();
266 }
267 } catch (_) {}
268});
269es.onerror = function() { console.log('[dashboard] SSE disconnected, retrying...'); };
270</script>
271</body>
272</html>"""
274# ============================================================
275# HTTP Handler
276# ============================================================
278class DashboardHandler(http.server.BaseHTTPRequestHandler):
279 """Dashboard HTTP 请求处理器。"""
281 def log_message(self, format, *args):
282 pass # 静默日志
284 def do_GET(self):
285 parsed = urlparse(self.path)
286 path = parsed.path.rstrip("/") or "/"
288 # 主页
289 if path == "/":
290 self._html(200, DASHBOARD_HTML)
291 return
293 # API: 列出所有会话
294 if path == "/api/sessions":
295 tracker = Tracker.get()
296 sessions = tracker.list_sessions()
297 self._json({"sessions": sessions})
298 return
300 # API: 单个会话详情
301 if path.startswith("/api/sessions/"):
302 sid = path.split("/api/sessions/")[-1]
303 tracker = Tracker.get()
304 session = tracker.get_session(sid)
305 if session is None:
306 self._json({"error": "not found"}, 404)
307 else:
308 self._json(session)
309 return
311 # API: SSE 实时事件流
312 if path == "/api/events":
313 self._handle_sse()
314 return
316 # API: 健康检查
317 if path == "/api/health":
318 tracker = Tracker.get()
319 self._json({
320 "status": "ok",
321 "active_sessions": len(tracker._active),
322 "sse_clients": len(_sse_queues),
323 })
324 return
326 self._html(404, "<h1>404</h1>")
328 def _json(self, data, status=200):
329 body = json.dumps(data, ensure_ascii=False).encode("utf-8")
330 self.send_response(status)
331 self.send_header("Content-Type", "application/json; charset=utf-8")
332 self.send_header("Content-Length", str(len(body)))
333 self.send_header("Access-Control-Allow-Origin", "*")
334 self.end_headers()
335 self.wfile.write(body)
337 def _html(self, status, content):
338 body = content.encode("utf-8")
339 self.send_response(status)
340 self.send_header("Content-Type", "text/html; charset=utf-8")
341 self.send_header("Content-Length", str(len(body)))
342 self.end_headers()
343 self.wfile.write(body)
345 def _handle_sse(self):
346 """SSE (Server-Sent Events) 实时推送。"""
347 self.send_response(200)
348 self.send_header("Content-Type", "text/event-stream")
349 self.send_header("Cache-Control", "no-cache")
350 self.send_header("Connection", "keep-alive")
351 self.send_header("Access-Control-Allow-Origin", "*")
352 self.end_headers()
354 q: queue.Queue = queue.Queue(maxsize=256)
355 with _sse_lock:
356 _sse_queues.append(q)
358 try:
359 # 发送初始连接事件
360 self.wfile.write(b"event: connected\ndata: {}\n\n")
361 self.wfile.flush()
362 while True:
363 try:
364 payload = q.get(timeout=30) # 30s 心跳
365 self.wfile.write(f"data: {payload}\n\n".encode("utf-8"))
366 self.wfile.flush()
367 except queue.Empty:
368 # 心跳保活
369 self.wfile.write(b": heartbeat\n\n")
370 self.wfile.flush()
371 except (BrokenPipeError, ConnectionResetError, OSError):
372 pass
373 finally:
374 with _sse_lock:
375 if q in _sse_queues:
376 _sse_queues.remove(q)
379class DashboardServer:
380 """Dashboard HTTP 服务器。"""
382 def __init__(self, port: int = PORT):
383 self.port = port
384 self._server: http.server.HTTPServer | None = None
386 def start(self, open_browser: bool = True):
387 self._server = http.server.HTTPServer(("0.0.0.0", self.port), DashboardHandler)
388 # 注册 Tracker → SSE 桥接
389 Tracker.get().subscribe(_sse_broadcast)
390 url = f"http://localhost:{self.port}"
391 print(f"AgentOS Dashboard → {url}")
392 if open_browser:
393 try:
394 webbrowser.open(url)
395 except Exception:
396 pass
397 try:
398 self._server.serve_forever()
399 except KeyboardInterrupt:
400 print("\nDashboard stopped.")
403def start_dashboard(port: int = PORT, open_browser: bool = True):
404 """便捷启动函数。"""
405 srv = DashboardServer(port=port)
406 srv.start(open_browser=open_browser)