@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
|
Binary file
|
|
@@ -0,0 +1,81 @@
|
|
|
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>Error • AgentTrace</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
|
9
|
+
<style>
|
|
10
|
+
.error-wrap {
|
|
11
|
+
min-height: 70vh;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
text-align: center;
|
|
16
|
+
}
|
|
17
|
+
.error-code {
|
|
18
|
+
font-size: 72px;
|
|
19
|
+
font-weight: 700;
|
|
20
|
+
letter-spacing: -3px;
|
|
21
|
+
line-height: 1;
|
|
22
|
+
color: #ef4444;
|
|
23
|
+
}
|
|
24
|
+
.error-msg {
|
|
25
|
+
font-size: 17px;
|
|
26
|
+
color: var(--text-muted);
|
|
27
|
+
margin: 12px 0 24px;
|
|
28
|
+
max-width: 420px;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
<header class="topbar">
|
|
34
|
+
<div class="topbar-inner">
|
|
35
|
+
<div class="brand">
|
|
36
|
+
<svg
|
|
37
|
+
class="brand-logo"
|
|
38
|
+
width="22"
|
|
39
|
+
height="22"
|
|
40
|
+
viewBox="0 0 24 24"
|
|
41
|
+
fill="none"
|
|
42
|
+
aria-hidden="true"
|
|
43
|
+
>
|
|
44
|
+
<circle cx="12" cy="12" r="9" stroke="#3b82f6" stroke-width="2" />
|
|
45
|
+
<path
|
|
46
|
+
d="M8 12l3 3 5-5"
|
|
47
|
+
stroke="#3b82f6"
|
|
48
|
+
stroke-width="2"
|
|
49
|
+
stroke-linecap="round"
|
|
50
|
+
stroke-linejoin="round"
|
|
51
|
+
/>
|
|
52
|
+
</svg>
|
|
53
|
+
<h1 style="margin: 0; font-size: 18px">AgentTrace</h1>
|
|
54
|
+
</div>
|
|
55
|
+
<a href="/" class="btn btn-secondary">← Back to dashboard</a>
|
|
56
|
+
</div>
|
|
57
|
+
</header>
|
|
58
|
+
<div class="error-wrap container">
|
|
59
|
+
<div>
|
|
60
|
+
<div class="error-code">Error</div>
|
|
61
|
+
<div class="error-msg" id="msg">
|
|
62
|
+
Something went wrong while loading data. This is usually a transient server or database
|
|
63
|
+
issue.
|
|
64
|
+
</div>
|
|
65
|
+
<div style="display: flex; gap: 10px; justify-content: center">
|
|
66
|
+
<button onclick="location.reload()" class="btn btn-primary">Retry</button>
|
|
67
|
+
<a href="/" class="btn btn-secondary">Go home</a>
|
|
68
|
+
</div>
|
|
69
|
+
<div style="margin-top: 28px; font-size: 12px; color: #555">
|
|
70
|
+
If the problem persists, check that the AgentTrace server process is running and the
|
|
71
|
+
database file is readable.
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
<script>
|
|
76
|
+
// Show query param message if present
|
|
77
|
+
var p = new URLSearchParams(location.search).get('msg');
|
|
78
|
+
if (p) document.getElementById('msg').textContent = decodeURIComponent(p);
|
|
79
|
+
</script>
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
2
|
+
<rect width="32" height="32" rx="6" fill="#0a0a0c"/>
|
|
3
|
+
<circle cx="16" cy="16" r="11" stroke="#3b82f6" stroke-width="2.5"/>
|
|
4
|
+
<path d="M11 16l4 4 6-7" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,193 @@
|
|
|
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 • Dashboard</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">Local Observability</span>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="top-actions">
|
|
37
|
+
<button
|
|
38
|
+
id="refresh-btn"
|
|
39
|
+
class="btn btn-secondary"
|
|
40
|
+
title="Refresh data (R)"
|
|
41
|
+
aria-label="Refresh data"
|
|
42
|
+
>
|
|
43
|
+
<svg
|
|
44
|
+
width="14"
|
|
45
|
+
height="14"
|
|
46
|
+
viewBox="0 0 24 24"
|
|
47
|
+
fill="none"
|
|
48
|
+
stroke="currentColor"
|
|
49
|
+
stroke-width="2.5"
|
|
50
|
+
aria-hidden="true"
|
|
51
|
+
>
|
|
52
|
+
<path
|
|
53
|
+
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"
|
|
54
|
+
/>
|
|
55
|
+
</svg>
|
|
56
|
+
Refresh
|
|
57
|
+
</button>
|
|
58
|
+
<a href="/usage" class="btn btn-secondary" title="View live usage stats">Usage</a>
|
|
59
|
+
<div class="export-group">
|
|
60
|
+
<button id="export-json-btn" class="btn btn-secondary" title="Export as JSON">
|
|
61
|
+
JSON
|
|
62
|
+
</button>
|
|
63
|
+
<button id="export-csv-btn" class="btn btn-secondary" title="Export as CSV">CSV</button>
|
|
64
|
+
</div>
|
|
65
|
+
<span class="version" id="version-badge">v0.1.0</span>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</header>
|
|
69
|
+
|
|
70
|
+
<main class="container">
|
|
71
|
+
<!-- Stats -->
|
|
72
|
+
<section class="section" aria-label="Summary statistics">
|
|
73
|
+
<div class="stats-grid" id="stats">
|
|
74
|
+
<!-- Populated by JS -->
|
|
75
|
+
<div class="stat-card">
|
|
76
|
+
<div class="skeleton skeleton-stat"></div>
|
|
77
|
+
<div class="skeleton skeleton-line" style="width: 60%"></div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="stat-card">
|
|
80
|
+
<div class="skeleton skeleton-stat"></div>
|
|
81
|
+
<div class="skeleton skeleton-line" style="width: 60%"></div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="stat-card">
|
|
84
|
+
<div class="skeleton skeleton-stat"></div>
|
|
85
|
+
<div class="skeleton skeleton-line" style="width: 60%"></div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="stat-card">
|
|
88
|
+
<div class="skeleton skeleton-stat"></div>
|
|
89
|
+
<div class="skeleton skeleton-line" style="width: 60%"></div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</section>
|
|
93
|
+
|
|
94
|
+
<!-- Burn rate + Top Agents -->
|
|
95
|
+
<div class="side-by-side">
|
|
96
|
+
<div class="burn-card" aria-label="Token burn rate">
|
|
97
|
+
<div class="burn-label">Token Burn Rate</div>
|
|
98
|
+
<div class="burn-value" id="burn-tokens">— t/min</div>
|
|
99
|
+
<div class="burn-sub" id="burn-cost">— cost/hr</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="top-agents" aria-label="Top agents by cost">
|
|
102
|
+
<h3>Top Agents</h3>
|
|
103
|
+
<div id="top-agents-list" class="top-agents-list">
|
|
104
|
+
<div class="empty small">Loading…</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<!-- Filters / Toolbar -->
|
|
110
|
+
<section class="toolbar" aria-label="Filter and search runs">
|
|
111
|
+
<input
|
|
112
|
+
type="text"
|
|
113
|
+
id="search-input"
|
|
114
|
+
class="search-input"
|
|
115
|
+
placeholder="Search runs by name…"
|
|
116
|
+
aria-label="Search runs by name"
|
|
117
|
+
/>
|
|
118
|
+
<div class="filter-group" id="status-filters" role="group" aria-label="Filter by status">
|
|
119
|
+
<button class="filter-btn active" data-status="all" aria-pressed="true">All</button>
|
|
120
|
+
<button class="filter-btn" data-status="success" aria-pressed="false">Success</button>
|
|
121
|
+
<button class="filter-btn" data-status="failure" aria-pressed="false">Failure</button>
|
|
122
|
+
<button class="filter-btn" data-status="running" aria-pressed="false">Running</button>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="date-range" id="date-range" role="group" aria-label="Date range">
|
|
125
|
+
<button class="date-btn active" data-range="all">All</button>
|
|
126
|
+
<button class="date-btn" data-range="1h">1h</button>
|
|
127
|
+
<button class="date-btn" data-range="today">Today</button>
|
|
128
|
+
<button class="date-btn" data-range="week">Week</button>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="toolbar-spacer"></div>
|
|
131
|
+
<div class="status-hint" id="auto-refresh-hint">
|
|
132
|
+
Auto-refreshes every 5s • <span id="runs-total">0</span> total
|
|
133
|
+
</div>
|
|
134
|
+
</section>
|
|
135
|
+
|
|
136
|
+
<!-- Runs List -->
|
|
137
|
+
<section class="panel" aria-labelledby="runs-heading">
|
|
138
|
+
<div class="panel-header">
|
|
139
|
+
<h2 id="runs-heading">Recent Agent Runs</h2>
|
|
140
|
+
<span id="runs-count" class="count-badge">0 runs</span>
|
|
141
|
+
</div>
|
|
142
|
+
<div id="runs-list" class="runs-list" aria-live="polite" role="list">
|
|
143
|
+
<!-- Populated by JS -->
|
|
144
|
+
</div>
|
|
145
|
+
</section>
|
|
146
|
+
|
|
147
|
+
<!-- Traces -->
|
|
148
|
+
<section
|
|
149
|
+
id="traces-section"
|
|
150
|
+
class="panel"
|
|
151
|
+
style="display: none"
|
|
152
|
+
aria-labelledby="traces-heading"
|
|
153
|
+
>
|
|
154
|
+
<div class="panel-header">
|
|
155
|
+
<h2 id="traces-heading">
|
|
156
|
+
Traces for <span id="selected-run-name" class="run-name"></span>
|
|
157
|
+
</h2>
|
|
158
|
+
<span id="traces-count" class="count-badge">0 traces</span>
|
|
159
|
+
</div>
|
|
160
|
+
<div id="traces-list" class="traces-list" role="list"></div>
|
|
161
|
+
</section>
|
|
162
|
+
|
|
163
|
+
<!-- Trace Details -->
|
|
164
|
+
<section
|
|
165
|
+
id="details-section"
|
|
166
|
+
class="panel"
|
|
167
|
+
style="display: none"
|
|
168
|
+
aria-labelledby="details-heading"
|
|
169
|
+
>
|
|
170
|
+
<div class="panel-header">
|
|
171
|
+
<h2 id="details-heading">Trace Details</h2>
|
|
172
|
+
<button id="close-details-btn" class="btn btn-ghost" aria-label="Close details (Esc)">
|
|
173
|
+
✕ Close
|
|
174
|
+
</button>
|
|
175
|
+
</div>
|
|
176
|
+
<div id="trace-details" class="trace-details"></div>
|
|
177
|
+
</section>
|
|
178
|
+
</main>
|
|
179
|
+
|
|
180
|
+
<footer class="footer">
|
|
181
|
+
<span
|
|
182
|
+
>AgentTrace — data lives on disk •
|
|
183
|
+
<a href="https://github.com/Klepsiphron/agenttrace" target="_blank" rel="noopener"
|
|
184
|
+
>GitHub</a
|
|
185
|
+
></span
|
|
186
|
+
>
|
|
187
|
+
</footer>
|
|
188
|
+
|
|
189
|
+
<div id="toast-container" class="toast-container" aria-live="polite"></div>
|
|
190
|
+
|
|
191
|
+
<script src="app.js"></script>
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|