Coverage for agentos/dashboard/server.py: 0%

1"""

2Dashboard HTTP 服务器 — 内嵌单页 HTML，无需外部依赖。

4访问: http://localhost:18500

5"""

7from __future__ import annotations

9import http.server

10import json

11import queue

12import threading

13import webbrowser

14from urllib.parse import urlparse

16from agentos.dashboard.tracker import Tracker

18PORT = 18500

20# SSE 事件队列（线程安全，用于实时推送）

21_sse_queues: list[queue.Queue] = []

22_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)

39# ============================================================

40# 内嵌前端（纯 HTML/CSS/JS，零外部依赖）

41# ============================================================

43DASHBOARD_HTML = r"""<!DOCTYPE html>

44<html lang="zh-CN">

45<head>

46<meta charset="UTF-8">

47<meta name="viewport" content="width=device-width, initial-scale=1.0">

48<title>AgentOS Dashboard — 追踪面板</title>

49<style>

50*{margin:0;padding:0;box-sizing:border-box}

51body{

52 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

53 background:#0d1117;color:#c9d1d9;min-height:100vh;

54}

55.header{

56 background:#161b22;border-bottom:1px solid #30363d;padding:16px 24px;

57 display:flex;align-items:center;justify-content:space-between;

58}

59.header h1{

60 font-size:20px;font-weight:600;

61 background:linear-gradient(90deg,#58a6ff,#bc8cff);

62 -webkit-background-clip:text;-webkit-text-fill-color:transparent;

63}

64.header .stats{font-size:13px;color:#8b949e}

65.main{padding:20px 24px;max-width:1200px;margin:0 auto}

66.sessions{display:flex;flex-direction:column;gap:12px}

67.session-card{

68 background:#161b22;border:1px solid #30363d;border-radius:8px;

69 padding:16px 20px;cursor:pointer;transition:border-color .15s;

70}

71.session-card:hover{border-color:#58a6ff}

72.session-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

73.session-card .task{font-size:15px;font-weight:600;color:#e6edf3}

74.session-card .id{font-size:11px;color:#484f58;font-family:monospace}

75.session-card .meta{font-size:12px;color:#8b949e;display:flex;gap:16px}

76.session-card .status{

77 display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;

78}

79.status-completed{background:#1a3a2a;color:#3fb950}

80.status-running{background:#1a2a3a;color:#58a6ff}

81.status-error{background:#3a1a1a;color:#f85149}

82.status-cancelled{background:#3a3a1a;color:#d29922}

84/* 详情面板 */

85.detail-panel{

86 background:#161b22;border:1px solid #30363d;border-radius:8px;margin-top:16px;

87}

88.detail-header{

89 display:flex;justify-content:space-between;align-items:center;

90 padding:12px 20px;border-bottom:1px solid #30363d;

91}

92.detail-header h3{font-size:16px;color:#e6edf3}

93.detail-header button{

94 background:none;border:1px solid #30363d;color:#8b949e;padding:4px 12px;

95 border-radius:6px;cursor:pointer;font-size:12px;

96}

97.detail-header button:hover{color:#e6edf3;border-color:#58a6ff}

99/* 时间线 */

100.timeline{position:relative;padding:16px 20px}

101.timeline::before{

102 content:'';position:absolute;left:26px;top:30px;bottom:30px;

103 width:2px;background:#30363d;

104}

105.step{

106 position:relative;padding:8px 0 8px 48px;display:flex;gap:12px;

107}

108.step-dot{

109 position:absolute;left:20px;top:14px;width:14px;height:14px;

110 border-radius:50%;border:2px solid #30363d;background:#0d1117;z-index:1;

111}

112.step-dot.thinking{border-color:#58a6ff;background:#0d2847}

113.step-dot.tool_call{border-color:#d29922;background:#2a2010}

114.step-dot.tool_result{border-color:#3fb950;background:#102a18}

115.step-dot.final_answer{border-color:#bc8cff;background:#281a3a}

116.step-content{flex:1}

117.step-type{

118 font-size:11px;font-weight:600;text-transform:uppercase;margin-bottom:4px;

119}

120.step-type.thinking{color:#58a6ff}

121.step-type.tool_call{color:#d29922}

122.step-type.tool_result{color:#3fb950}

123.step-type.final_answer{color:#bc8cff}

124.step-detail{font-size:13px;color:#c9d1d9;word-break:break-word}

125.step-meta{font-size:11px;color:#484f58;margin-top:4px}

126

127/* 统计卡片 */

128.stat-row{display:flex;gap:16px;margin-bottom:20px}

129.stat-card{

130 flex:1;background:#161b22;border:1px solid #30363d;border-radius:8px;

131 padding:16px;text-align:center;

132}

133.stat-card .value{font-size:28px;font-weight:700;color:#e6edf3}

134.stat-card .label{font-size:12px;color:#8b949e;margin-top:4px}

135.stat-card .value.cost{color:#3fb950}

136.stat-card .value.tokens{color:#58a6ff}

137

138.empty{

139 text-align:center;padding:60px 20px;color:#484f58;

140}

141.empty p{font-size:14px;margin-bottom:8px}

142.empty code{

143 background:#161b22;border:1px solid #30363d;border-radius:4px;

144 padding:2px 8px;font-size:13px;

145}

146.refresh-btn{

147 background:#21262d;border:1px solid #30363d;color:#c9d1d9;

148 padding:6px 16px;border-radius:6px;cursor:pointer;font-size:12px;

149 margin-left:8px;

150}

151.refresh-btn:hover{border-color:#58a6ff}

152</style>

153</head>

154<body>

155<div class="header">

156 <div>

157 <h1>AgentOS Dashboard</h1>

158 <div class="stats" id="stats-bar">正在加载...</div>

159 </div>

160 <button class="refresh-btn" onclick="loadSessions()">刷新</button>

161</div>

162<div class="main">

163 <div class="stat-row" id="stat-cards"></div>

164 <div class="sessions" id="session-list"></div>

165 <div id="detail-area"></div>

166</div>

167<script>

168const API = '/api';

169

170async function loadSessions() {

171 const resp = await fetch(API + '/sessions');

172 const data = await resp.json();

173 renderStats(data.sessions || []);

174 renderSessions(data.sessions || []);

175}

176

177function renderStats(sessions) {

178 const total = sessions.length;

179 const completed = sessions.filter(s => s.status === 'completed').length;

180 let totalTokens = 0, totalCost = 0;

181 sessions.forEach(s => { totalTokens += s.total_tokens || 0; totalCost += s.total_cost_usd || 0; });

182 document.getElementById('stats-bar').textContent =

183 `${total} 次运行 · ${completed} 完成`;

184 document.getElementById('stat-cards').innerHTML =

185 `<div class="stat-card"><div class="value">${total}</div><div class="label">总运行次数</div></div>

186 <div class="stat-card"><div class="value">${completed}</div><div class="label">成功完成</div></div>

187}

188

189function renderSessions(sessions) {

190 const el = document.getElementById('session-list');

191 if (!sessions.length) {

192 el.innerHTML = `<div class="empty">

193 <p>尚无运行记录</p>

194 <p>运行 <code>agentos "你的任务"</code> 后会自动记录到这里</p>

195 </div>`;

196 return;

197 }

198 el.innerHTML = sessions.map(s => {

199 const dur = s.finished_at ? ((s.finished_at - s.started_at) / 1000).toFixed(1) + 's' : '进行中';

200 const ts = new Date(s.started_at * 1000).toLocaleString('zh-CN');

201 const statusClass = 'status-' + (s.status || 'running');

202 const statusLabel = {completed:'已完成',running:'运行中',error:'错误',cancelled:'已取消'}[s.status] || s.status;

203 return `<div class="session-card" onclick="showDetail('${s.session_id}')">

204 <div class="top">

205 <span class="task">${esc(s.task)}</span>

206 <span class="id">${s.session_id.slice(0,12)}</span>

207 </div>

208 <div class="meta">

209 <span>${dur}</span>

210 <span>${s.total_tokens || 0} tokens</span>

211 <span>$${(s.total_cost_usd || 0).toFixed(4)}</span>

212 <span>${ts}</span>

213 <span>${s.model || s.provider || ''}</span>

214 <span class="status ${statusClass}">${statusLabel}</span>

215 </div>

216 </div>`;

217 }).join('');

218}

219

220async function showDetail(sid) {

221 const resp = await fetch(API + '/sessions/' + sid);

222 const s = await resp.json();

223 if (!s) return;

224 const dur = s.finished_at ? ((s.finished_at - s.started_at) / 1000).toFixed(1) + 's' : '进行中';

225 const steps = s.steps || [];

226 const timeline = steps.length ? steps.map(st => {

227 const dotClass = st.step_type || '';

228 return `<div class="step">

229 <div class="step-dot ${dotClass}"></div>

230 <div class="step-content">

231 <div class="step-type ${dotClass}">${st.step_type}</div>

232 <div class="step-detail">${esc(st.detail)}</div>

233 <div class="step-meta">#${st.step_index} · ${(st.duration_ms||0).toFixed(0)}ms · ${st.tokens||0} tokens</div>

234 </div>

235 </div>`;

236 }).join('') : '<div class="empty"><p>无步骤记录</p></div>';

237

238 document.getElementById('detail-area').innerHTML = `

239 <div class="detail-panel">

240 <div class="detail-header">

241 <h3>${esc(s.task)}</h3>

242 <button onclick="document.getElementById('detail-area').innerHTML=''">关闭</button>

243 </div>

244 <div class="stat-row" style="padding:16px 20px 0">

245 <div class="stat-card"><div class="value">${dur}</div><div class="label">耗时</div></div>

246 <div class="stat-card"><div class="value tokens">${s.total_tokens||0}</div><div class="label">Tokens</div></div>

247 <div class="stat-card"><div class="value">${steps.length}</div><div class="label">步骤数</div></div>

248 </div>

249 <div class="timeline">${timeline}</div>

250 </div>`;

251}

252

253loadSessions();

254

255// SSE 实时推送

256var es = new EventSource('/api/events');

257es.addEventListener('connected', function(e) { console.log('[dashboard] SSE connected'); });

258es.addEventListener('message', function(e) {

259 try {

260 var msg = JSON.parse(e.data);

261 if (msg.type === 'step' || msg.type === 'session_done') {

262 loadSessions();

263 }

264 } catch (_) {}

265});

266es.onerror = function() { console.log('[dashboard] SSE disconnected, retrying...'); };

267</script>

268</body>

269</html>"""

270

271# ============================================================

272# HTTP Handler

273# ============================================================

274

275

276class DashboardHandler(http.server.BaseHTTPRequestHandler):

277 """Dashboard HTTP 请求处理器。"""

278

279 def log_message(self, format, *args):

280 pass # 静默日志

281

282 def do_GET(self):

283 parsed = urlparse(self.path)

284 path = parsed.path.rstrip("/") or "/"

285

286 # 主页

287 if path == "/":

288 self._html(200, DASHBOARD_HTML)

289 return

290

291 # API: 列出所有会话

292 if path == "/api/sessions":

293 tracker = Tracker.get()

294 sessions = tracker.list_sessions()

295 self._json({"sessions": sessions})

296 return

297

298 # API: 单个会话详情

299 if path.startswith("/api/sessions/"):

300 sid = path.split("/api/sessions/")[-1]

301 tracker = Tracker.get()

302 session = tracker.get_session(sid)

303 if session is None:

304 self._json({"error": "not found"}, 404)

305 else:

306 self._json(session)

307 return

308

309 # API: SSE 实时事件流

310 if path == "/api/events":

311 self._handle_sse()

312 return

313

314 # API: 健康检查

315 if path == "/api/health":

316 tracker = Tracker.get()

317 self._json(

318 {

319 "status": "ok",

320 "active_sessions": len(tracker._active),

321 "sse_clients": len(_sse_queues),

322 }

323 )

324 return

325

326 self._html(404, "<h1>404</h1>")

327

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)

336

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)

344

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()

353

354 q: queue.Queue = queue.Queue(maxsize=256)

355 with _sse_lock:

356 _sse_queues.append(q)

357

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())

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)

377

378

379class DashboardServer:

380 """Dashboard HTTP 服务器。"""

381

382 def __init__(self, port: int = PORT):

383 self.port = port

384 self._server: http.server.HTTPServer | None = None

385

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.")

401

402

403def start_dashboard(port: int = PORT, open_browser: bool = True):

404 """便捷启动函数。"""

405 srv = DashboardServer(port=port)

406 srv.start(open_browser=open_browser)