@agenttrace-io/dashboard 0.1.9
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.
- package/dist/index.d.ts +41 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +520 -0
- package/dist/index.js.map +1 -0
- package/package.json +48 -0
- package/public/404.html +70 -0
- package/public/app.js +901 -0
- package/public/apple-touch-icon.png +0 -0
- package/public/error.html +81 -0
- package/public/favicon.svg +5 -0
- package/public/index.html +193 -0
- package/public/style.css +1018 -0
- package/public/usage.html +284 -0
- package/public/usage.js +663 -0
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>AgentTrace • Usage</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<header class="topbar">
|
|
12
|
+
<div class="topbar-inner">
|
|
13
|
+
<div class="brand">
|
|
14
|
+
<svg
|
|
15
|
+
class="brand-logo"
|
|
16
|
+
width="22"
|
|
17
|
+
height="22"
|
|
18
|
+
viewBox="0 0 24 24"
|
|
19
|
+
fill="none"
|
|
20
|
+
aria-hidden="true"
|
|
21
|
+
>
|
|
22
|
+
<circle cx="12" cy="12" r="9" stroke="#3b82f6" stroke-width="2" />
|
|
23
|
+
<path
|
|
24
|
+
d="M8 12l3 3 5-5"
|
|
25
|
+
stroke="#3b82f6"
|
|
26
|
+
stroke-width="2"
|
|
27
|
+
stroke-linecap="round"
|
|
28
|
+
stroke-linejoin="round"
|
|
29
|
+
/>
|
|
30
|
+
</svg>
|
|
31
|
+
<div>
|
|
32
|
+
<h1>AgentTrace</h1>
|
|
33
|
+
<span class="subtitle">Live Usage Dashboard</span>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="top-actions">
|
|
37
|
+
<a href="/" class="btn btn-secondary">← Dashboard</a>
|
|
38
|
+
<button id="refresh-btn" class="btn btn-secondary" title="Refresh all data">
|
|
39
|
+
<svg
|
|
40
|
+
width="14"
|
|
41
|
+
height="14"
|
|
42
|
+
viewBox="0 0 24 24"
|
|
43
|
+
fill="none"
|
|
44
|
+
stroke="currentColor"
|
|
45
|
+
stroke-width="2.5"
|
|
46
|
+
aria-hidden="true"
|
|
47
|
+
>
|
|
48
|
+
<path
|
|
49
|
+
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-1.34 3-3"
|
|
50
|
+
/>
|
|
51
|
+
</svg>
|
|
52
|
+
Refresh
|
|
53
|
+
</button>
|
|
54
|
+
<span id="last-updated" class="status-hint">--</span>
|
|
55
|
+
<span class="version">v0.1.0</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</header>
|
|
59
|
+
|
|
60
|
+
<main class="container">
|
|
61
|
+
<div class="nav-back"><a href="/">← Back to runs</a></div>
|
|
62
|
+
|
|
63
|
+
<!-- Summary -->
|
|
64
|
+
<section class="stats-grid usage-grid" id="summary-cards" aria-label="Usage summary">
|
|
65
|
+
<div class="stat-card">
|
|
66
|
+
<div class="stat-value" id="active-agents">--</div>
|
|
67
|
+
<div class="stat-label">Active Agents (30m)</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="stat-card">
|
|
70
|
+
<div class="stat-value" id="actions-today">--</div>
|
|
71
|
+
<div class="stat-label">Actions Today</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stat-card">
|
|
74
|
+
<div class="stat-value" id="cost-today">--</div>
|
|
75
|
+
<div class="stat-label">Cost Today (USD)</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="stat-card">
|
|
78
|
+
<div class="stat-value" id="tokens-today">--</div>
|
|
79
|
+
<div class="stat-label">Tokens Today</div>
|
|
80
|
+
</div>
|
|
81
|
+
</section>
|
|
82
|
+
|
|
83
|
+
<!-- Projections -->
|
|
84
|
+
<section class="panel" aria-label="Cost projections">
|
|
85
|
+
<div class="panel-header">
|
|
86
|
+
<h2>Cost Projections</h2>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="chart-panel">
|
|
89
|
+
<div id="projection-cards" style="display: flex; gap: 16px; flex-wrap: wrap">
|
|
90
|
+
<div style="min-width: 180px">
|
|
91
|
+
<div
|
|
92
|
+
style="
|
|
93
|
+
font-size: 11px;
|
|
94
|
+
color: var(--text-muted);
|
|
95
|
+
text-transform: uppercase;
|
|
96
|
+
letter-spacing: 0.5px;
|
|
97
|
+
"
|
|
98
|
+
>
|
|
99
|
+
Spend rate
|
|
100
|
+
</div>
|
|
101
|
+
<div id="spend-rate" style="font-size: 22px; font-weight: 600">--</div>
|
|
102
|
+
<div class="projection">per hour today</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div style="min-width: 180px">
|
|
105
|
+
<div
|
|
106
|
+
style="
|
|
107
|
+
font-size: 11px;
|
|
108
|
+
color: var(--text-muted);
|
|
109
|
+
text-transform: uppercase;
|
|
110
|
+
letter-spacing: 0.5px;
|
|
111
|
+
"
|
|
112
|
+
>
|
|
113
|
+
Projected daily
|
|
114
|
+
</div>
|
|
115
|
+
<div id="proj-daily" style="font-size: 22px; font-weight: 600">--</div>
|
|
116
|
+
</div>
|
|
117
|
+
<div style="min-width: 180px">
|
|
118
|
+
<div
|
|
119
|
+
style="
|
|
120
|
+
font-size: 11px;
|
|
121
|
+
color: var(--text-muted);
|
|
122
|
+
text-transform: uppercase;
|
|
123
|
+
letter-spacing: 0.5px;
|
|
124
|
+
"
|
|
125
|
+
>
|
|
126
|
+
Projected monthly
|
|
127
|
+
</div>
|
|
128
|
+
<div id="proj-monthly" style="font-size: 22px; font-weight: 600">--</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</section>
|
|
133
|
+
|
|
134
|
+
<!-- Charts -->
|
|
135
|
+
<div class="split">
|
|
136
|
+
<section class="panel">
|
|
137
|
+
<div class="panel-header"><h2>Actions by Type (today)</h2></div>
|
|
138
|
+
<div class="chart-panel">
|
|
139
|
+
<div id="bar-chart" class="chart-container">
|
|
140
|
+
<div class="empty small">Loading…</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</section>
|
|
144
|
+
<section class="panel">
|
|
145
|
+
<div class="panel-header"><h2>Cost Over Time (7d)</h2></div>
|
|
146
|
+
<div class="chart-panel">
|
|
147
|
+
<div id="line-chart" class="chart-container">
|
|
148
|
+
<div class="empty small">Loading…</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</section>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<!-- Tables -->
|
|
155
|
+
<div class="split">
|
|
156
|
+
<section class="panel">
|
|
157
|
+
<div class="panel-header">
|
|
158
|
+
<h2>Top Agents by Cost</h2>
|
|
159
|
+
<span id="top-agents-count" class="count-badge">0</span>
|
|
160
|
+
</div>
|
|
161
|
+
<div style="padding: 0">
|
|
162
|
+
<table class="data-table" id="top-agents-table">
|
|
163
|
+
<thead>
|
|
164
|
+
<tr>
|
|
165
|
+
<th>Agent</th>
|
|
166
|
+
<th class="num">Actions</th>
|
|
167
|
+
<th class="num">Tokens</th>
|
|
168
|
+
<th class="num">Cost</th>
|
|
169
|
+
</tr>
|
|
170
|
+
</thead>
|
|
171
|
+
<tbody>
|
|
172
|
+
<tr>
|
|
173
|
+
<td colspan="4" class="empty small">Loading…</td>
|
|
174
|
+
</tr>
|
|
175
|
+
</tbody>
|
|
176
|
+
</table>
|
|
177
|
+
</div>
|
|
178
|
+
</section>
|
|
179
|
+
|
|
180
|
+
<section class="panel">
|
|
181
|
+
<div class="panel-header">
|
|
182
|
+
<h2>Top Tools</h2>
|
|
183
|
+
<span id="top-tools-count" class="count-badge">0</span>
|
|
184
|
+
</div>
|
|
185
|
+
<div style="padding: 0">
|
|
186
|
+
<table class="data-table" id="top-tools-table">
|
|
187
|
+
<thead>
|
|
188
|
+
<tr>
|
|
189
|
+
<th>Tool</th>
|
|
190
|
+
<th class="num">Calls</th>
|
|
191
|
+
<th class="num">Avg Latency</th>
|
|
192
|
+
</tr>
|
|
193
|
+
</thead>
|
|
194
|
+
<tbody>
|
|
195
|
+
<tr>
|
|
196
|
+
<td colspan="3" class="empty small">Loading…</td>
|
|
197
|
+
</tr>
|
|
198
|
+
</tbody>
|
|
199
|
+
</table>
|
|
200
|
+
</div>
|
|
201
|
+
</section>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="split">
|
|
205
|
+
<section class="panel">
|
|
206
|
+
<div class="panel-header">
|
|
207
|
+
<h2>Per-Agent Breakdown (today)</h2>
|
|
208
|
+
</div>
|
|
209
|
+
<div style="padding: 0">
|
|
210
|
+
<table class="data-table" id="per-agent-table">
|
|
211
|
+
<thead>
|
|
212
|
+
<tr>
|
|
213
|
+
<th>Agent</th>
|
|
214
|
+
<th class="num">Actions</th>
|
|
215
|
+
<th class="num">Tokens</th>
|
|
216
|
+
<th class="num">Cost</th>
|
|
217
|
+
</tr>
|
|
218
|
+
</thead>
|
|
219
|
+
<tbody>
|
|
220
|
+
<tr>
|
|
221
|
+
<td colspan="4" class="empty small">Loading…</td>
|
|
222
|
+
</tr>
|
|
223
|
+
</tbody>
|
|
224
|
+
</table>
|
|
225
|
+
</div>
|
|
226
|
+
</section>
|
|
227
|
+
|
|
228
|
+
<section class="panel">
|
|
229
|
+
<div class="panel-header">
|
|
230
|
+
<h2>Recent Actions (last 50)</h2>
|
|
231
|
+
<span id="recent-count" class="count-badge">0</span>
|
|
232
|
+
</div>
|
|
233
|
+
<div style="padding: 0">
|
|
234
|
+
<table class="data-table" id="recent-actions-table">
|
|
235
|
+
<thead>
|
|
236
|
+
<tr>
|
|
237
|
+
<th>Time</th>
|
|
238
|
+
<th>Agent</th>
|
|
239
|
+
<th>Action</th>
|
|
240
|
+
<th class="num">Cost</th>
|
|
241
|
+
</tr>
|
|
242
|
+
</thead>
|
|
243
|
+
<tbody>
|
|
244
|
+
<tr>
|
|
245
|
+
<td colspan="4" class="empty small">Loading…</td>
|
|
246
|
+
</tr>
|
|
247
|
+
</tbody>
|
|
248
|
+
</table>
|
|
249
|
+
</div>
|
|
250
|
+
</section>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<!-- Live Feed -->
|
|
254
|
+
<section class="panel">
|
|
255
|
+
<div class="panel-header">
|
|
256
|
+
<h2>
|
|
257
|
+
<span class="live-dot" id="live-dot"></span>
|
|
258
|
+
Live Agent Activity Feed
|
|
259
|
+
</h2>
|
|
260
|
+
<div class="panel-header-right">
|
|
261
|
+
<span id="sse-status" class="sse-status sse-off" title="SSE connection status">●</span>
|
|
262
|
+
<span id="feed-count" class="count-badge">0 events</span>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
<div id="activity-feed" class="activity-feed" aria-live="polite">
|
|
266
|
+
<div class="empty">Connecting to live stream…</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="panel-footer-hint">Auto-updates via SSE + 5s polling • last 50 shown</div>
|
|
269
|
+
</section>
|
|
270
|
+
</main>
|
|
271
|
+
|
|
272
|
+
<footer class="footer">
|
|
273
|
+
<span
|
|
274
|
+
>AgentTrace — real-time usage •
|
|
275
|
+
<a href="https://github.com/Klepsiphron/agenttrace" target="_blank" rel="noopener"
|
|
276
|
+
>GitHub</a
|
|
277
|
+
></span
|
|
278
|
+
>
|
|
279
|
+
</footer>
|
|
280
|
+
|
|
281
|
+
<div id="toast-container" class="toast-container" aria-live="polite"></div>
|
|
282
|
+
<script src="usage.js"></script>
|
|
283
|
+
</body>
|
|
284
|
+
</html>
|