@warlock.js/ai-panoptic 4.4.0 → 4.6.0
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/CHANGELOG.md +39 -31
- package/cjs/index.cjs +2393 -31
- package/cjs/index.cjs.map +1 -1
- package/esm/collector/collector.d.mts +19 -2
- package/esm/collector/collector.d.mts.map +1 -1
- package/esm/collector/collector.mjs +40 -6
- package/esm/collector/collector.mjs.map +1 -1
- package/esm/collector/content-capture.type.d.mts +10 -0
- package/esm/collector/content-capture.type.d.mts.map +1 -1
- package/esm/collector/extract-span-attributes.d.mts.map +1 -1
- package/esm/collector/extract-span-attributes.mjs +3 -0
- package/esm/collector/extract-span-attributes.mjs.map +1 -1
- package/esm/collector/index.d.mts +1 -1
- package/esm/collector/index.mjs +7 -0
- package/esm/collector/normalize-error.d.mts.map +1 -1
- package/esm/collector/normalize-error.mjs +6 -3
- package/esm/collector/normalize-error.mjs.map +1 -1
- package/esm/collector/report-to-span.mjs +31 -10
- package/esm/collector/report-to-span.mjs.map +1 -1
- package/esm/collector/report-to-trace.d.mts +8 -5
- package/esm/collector/report-to-trace.d.mts.map +1 -1
- package/esm/collector/report-to-trace.mjs +8 -5
- package/esm/collector/report-to-trace.mjs.map +1 -1
- package/esm/config/apply-panoptic-config.d.mts +27 -0
- package/esm/config/apply-panoptic-config.d.mts.map +1 -0
- package/esm/config/apply-panoptic-config.mjs +89 -0
- package/esm/config/apply-panoptic-config.mjs.map +1 -0
- package/esm/config/index.d.mts +2 -0
- package/esm/config/index.mjs +3 -0
- package/esm/config/panoptic-config.type.d.mts +84 -0
- package/esm/config/panoptic-config.type.d.mts.map +1 -0
- package/esm/contracts/trace.type.d.mts +9 -2
- package/esm/contracts/trace.type.d.mts.map +1 -1
- package/esm/dashboard/dashboard.d.mts +32 -0
- package/esm/dashboard/dashboard.d.mts.map +1 -0
- package/esm/dashboard/dashboard.mjs +132 -0
- package/esm/dashboard/dashboard.mjs.map +1 -0
- package/esm/dashboard/dashboard.type.d.mts +63 -0
- package/esm/dashboard/dashboard.type.d.mts.map +1 -0
- package/esm/dashboard/index.d.mts +3 -0
- package/esm/dashboard/parse-query.d.mts +1 -0
- package/esm/dashboard/parse-query.mjs +54 -0
- package/esm/dashboard/parse-query.mjs.map +1 -0
- package/esm/dashboard/serve.d.mts +1 -0
- package/esm/dashboard/serve.mjs +111 -0
- package/esm/dashboard/serve.mjs.map +1 -0
- package/esm/dashboard/trace-filter.d.mts +187 -0
- package/esm/dashboard/trace-filter.d.mts.map +1 -0
- package/esm/dashboard/trace-filter.mjs +270 -0
- package/esm/dashboard/trace-filter.mjs.map +1 -0
- package/esm/dashboard/ui.html.mjs +1330 -0
- package/esm/dashboard/ui.html.mjs.map +1 -0
- package/esm/dashboard/warlock-logo.mjs +13 -0
- package/esm/dashboard/warlock-logo.mjs.map +1 -0
- package/esm/exporters/file/file-exporter.mjs +5 -2
- package/esm/exporters/file/file-exporter.mjs.map +1 -1
- package/esm/exporters/langfuse/langfuse-exporter.d.mts.map +1 -1
- package/esm/exporters/langfuse/langfuse-exporter.mjs +5 -2
- package/esm/exporters/langfuse/langfuse-exporter.mjs.map +1 -1
- package/esm/exporters/langfuse/langfuse-exporter.type.d.mts +3 -1
- package/esm/exporters/langfuse/langfuse-exporter.type.d.mts.map +1 -1
- package/esm/exporters/otel/otel-api.shim.type.d.mts +60 -0
- package/esm/exporters/otel/otel-api.shim.type.d.mts.map +1 -0
- package/esm/exporters/otel/otel-exporter.d.mts.map +1 -1
- package/esm/exporters/otel/otel-exporter.mjs.map +1 -1
- package/esm/exporters/otel/otel-exporter.type.d.mts +7 -3
- package/esm/exporters/otel/otel-exporter.type.d.mts.map +1 -1
- package/esm/index.d.mts +9 -2
- package/esm/index.mjs +9 -1
- package/esm/panoptic/index.mjs +4 -0
- package/esm/panoptic/panoptic.d.mts.map +1 -1
- package/esm/panoptic/panoptic.mjs +6 -1
- package/esm/panoptic/panoptic.mjs.map +1 -1
- package/esm/panoptic/panoptic.type.d.mts +15 -0
- package/esm/panoptic/panoptic.type.d.mts.map +1 -1
- package/esm/register.mjs +12 -0
- package/esm/register.mjs.map +1 -0
- package/esm/store/cache-trace-store.d.mts +81 -0
- package/esm/store/cache-trace-store.d.mts.map +1 -0
- package/esm/store/cache-trace-store.mjs +290 -0
- package/esm/store/cache-trace-store.mjs.map +1 -0
- package/esm/store/in-memory-trace-store.mjs +9 -2
- package/esm/store/in-memory-trace-store.mjs.map +1 -1
- package/esm/store/index.d.mts +1 -0
- package/esm/store/index.mjs +1 -0
- package/llms-full.txt +351 -4
- package/llms.txt +4 -3
- package/package.json +6 -2
- package/skills/README.md +7 -3
- package/skills/export-traces/SKILL.md +33 -1
- package/skills/observe-with-panoptic/SKILL.md +49 -2
- package/skills/query-traces/SKILL.md +52 -1
- package/skills/use-local-dashboard/SKILL.md +213 -0
|
@@ -0,0 +1,1330 @@
|
|
|
1
|
+
import { WARLOCK_LOGO_DATA_URI } from "./warlock-logo.mjs";
|
|
2
|
+
|
|
3
|
+
//#region ../@warlock.js/ai-panoptic/src/dashboard/ui.html.ts
|
|
4
|
+
/**
|
|
5
|
+
* Build the single self-contained dashboard HTML page. No external
|
|
6
|
+
* assets, no bundler, no framework — one inlined string that polls the
|
|
7
|
+
* read-only JSON API (`{basePath}api/aggregate`, `{basePath}api/traces`,
|
|
8
|
+
* `{basePath}api/traces/:id`) and renders:
|
|
9
|
+
*
|
|
10
|
+
* - the {@link TraceAggregate} headline counts (traces / completed /
|
|
11
|
+
* failed / cancelled / tokens in·out·total / cost);
|
|
12
|
+
* - a newest-first trace list as clickable master rows, each led by a
|
|
13
|
+
* colour-coded, title-cased type label (Supervisor / Agent / Tool / …);
|
|
14
|
+
* - a two-pane drawer: a collapsible call tree on the left (the nested
|
|
15
|
+
* span hierarchy) and the selected node's detail on the right — rich
|
|
16
|
+
* input/output, token breakdown, and a metadata panel (session id,
|
|
17
|
+
* ids, version, attributes).
|
|
18
|
+
*
|
|
19
|
+
* Span input/output is rendered structurally (chat bubbles / key-value /
|
|
20
|
+
* Markdown), durations in seconds, tokens as ↓input · ↑output · total.
|
|
21
|
+
* Theme is light / dark / system (persisted to localStorage). All UI
|
|
22
|
+
* state — selected trace, selected span, collapsed nodes — lives in JS,
|
|
23
|
+
* NOT the DOM, so the 2s poll never disturbs an open drawer.
|
|
24
|
+
*
|
|
25
|
+
* The list is filterable entirely client-side over the polled traces: a
|
|
26
|
+
* free-text search (name + session), status / type / session filter
|
|
27
|
+
* chips, an "errors only" header toggle, and an optional group-by-session
|
|
28
|
+
* view with collapsible headers. Each tree node and trace row carries a
|
|
29
|
+
* cost heatmap accent scaled to the trace's most expensive node, with a
|
|
30
|
+
* small legend. The drawer's left pane toggles between the nested call
|
|
31
|
+
* TREE and a Gantt TIMELINE (span offset from root start + duration,
|
|
32
|
+
* critical path highlighted). The selected trace and span are reflected
|
|
33
|
+
* in the URL hash (`#trace=&span=`) and re-opened from it on load — so a
|
|
34
|
+
* drawer view is shareable/bookmarkable. A live socket tail is a noted
|
|
35
|
+
* follow-up; this pass stays on the 2s poll.
|
|
36
|
+
*
|
|
37
|
+
* `basePath` and `title` are baked in at serve time. The page is
|
|
38
|
+
* intentionally dependency-free vanilla JS so it works offline.
|
|
39
|
+
*
|
|
40
|
+
* @param basePath Normalized mount path ending in `/` (e.g. `"/"`).
|
|
41
|
+
* @param title Header title shown in the page.
|
|
42
|
+
*/
|
|
43
|
+
function dashboardHtml(basePath, title) {
|
|
44
|
+
const apiBase = `${basePath}api`;
|
|
45
|
+
const safeTitle = escapeHtml(title);
|
|
46
|
+
return `<!doctype html>
|
|
47
|
+
<html lang="en">
|
|
48
|
+
<head>
|
|
49
|
+
<meta charset="utf-8" />
|
|
50
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
51
|
+
<title>${safeTitle}</title>
|
|
52
|
+
<script>
|
|
53
|
+
(function () {
|
|
54
|
+
try {
|
|
55
|
+
var m = localStorage.getItem("panoptic-theme") || "system";
|
|
56
|
+
var light = m === "light" || (m === "system" && window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches);
|
|
57
|
+
document.documentElement.setAttribute("data-theme", light ? "light" : "dark");
|
|
58
|
+
} catch (e) {}
|
|
59
|
+
})();
|
|
60
|
+
<\/script>
|
|
61
|
+
<style>
|
|
62
|
+
:root {
|
|
63
|
+
color-scheme: dark;
|
|
64
|
+
--bg: #0b0d10; --surface: #101317; --surface2: #14171c; --panel: #0d1014;
|
|
65
|
+
--border: #23272e; --border2: #2d333b;
|
|
66
|
+
--text: #e6e8eb; --text2: #adbac7; --dim: #8b949e;
|
|
67
|
+
--sel-bg: #0f1722; --sel-border: #316dca;
|
|
68
|
+
--ty-agent: #539bf5; --ty-tool: #c297ff; --ty-model: #4cc2b0; --ty-prim: #e3b341; --ty-other: #adbac7;
|
|
69
|
+
--tok-in: #58a6ff; --tok-out: #3fb950; --tok-total: #b899ff; --cost: #e3b341;
|
|
70
|
+
--ok: #56d364; --ok-bg: #0f2e1d; --fail: #f85149; --fail-bg: #3a1416; --cancel: #d29922; --cancel-bg: #332701; --other: #8b949e; --other-bg: #1c2128;
|
|
71
|
+
--code-bg: #0b0d10; --inline-bg: #1c2128; --link: #539bf5;
|
|
72
|
+
}
|
|
73
|
+
:root[data-theme="light"] {
|
|
74
|
+
color-scheme: light;
|
|
75
|
+
--bg: #ffffff; --surface: #f6f8fa; --surface2: #eef1f4; --panel: #ffffff;
|
|
76
|
+
--border: #d0d7de; --border2: #afb8c1;
|
|
77
|
+
--text: #1f2328; --text2: #3b4350; --dim: #636c76;
|
|
78
|
+
--sel-bg: #ddf4ff; --sel-border: #0969da;
|
|
79
|
+
--ty-agent: #0969da; --ty-tool: #8250df; --ty-model: #0f7d6b; --ty-prim: #9a6700; --ty-other: #57606a;
|
|
80
|
+
--tok-in: #0969da; --tok-out: #1a7f37; --tok-total: #8250df; --cost: #9a6700;
|
|
81
|
+
--ok: #1a7f37; --ok-bg: #dafbe1; --fail: #cf222e; --fail-bg: #ffebe9; --cancel: #9a6700; --cancel-bg: #fff8c5; --other: #57606a; --other-bg: #eaeef2;
|
|
82
|
+
--code-bg: #f6f8fa; --inline-bg: #eaeef2; --link: #0969da;
|
|
83
|
+
}
|
|
84
|
+
* { box-sizing: border-box; }
|
|
85
|
+
body { margin: 0; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); }
|
|
86
|
+
header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
|
|
87
|
+
header img.logo { height: 26px; width: 26px; display: block; flex: none; }
|
|
88
|
+
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
|
|
89
|
+
header .meta { color: var(--dim); font-size: 12px; }
|
|
90
|
+
.theme { margin-left: auto; display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
|
|
91
|
+
.theme button { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 6px; }
|
|
92
|
+
.theme button:hover { color: var(--text); }
|
|
93
|
+
.theme button.active { background: var(--surface2); color: var(--text); }
|
|
94
|
+
.stats { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
|
|
95
|
+
.stat { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 84px; }
|
|
96
|
+
.stat .label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
|
|
97
|
+
.stat .value { font-size: 18px; font-weight: 600; }
|
|
98
|
+
main { padding: 12px 20px 40px; }
|
|
99
|
+
|
|
100
|
+
.trace-row { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--surface); padding: 9px 12px; display: flex; align-items: center; gap: 9px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
|
|
101
|
+
.trace-row:hover { background: var(--surface2); border-color: var(--border2); }
|
|
102
|
+
.trace-row.selected { border-color: var(--sel-border); background: var(--sel-bg); }
|
|
103
|
+
.rname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
104
|
+
.rprompt { font-size: 11px; color: var(--ty-agent); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
|
|
105
|
+
.rright { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
|
106
|
+
.chev { color: var(--dim); font-size: 16px; font-style: normal; }
|
|
107
|
+
|
|
108
|
+
.tylabel { font-weight: 600; flex: none; }
|
|
109
|
+
.ty-agent { color: var(--ty-agent); } .ty-tool { color: var(--ty-tool); } .ty-model { color: var(--ty-model); } .ty-prim { color: var(--ty-prim); } .ty-other { color: var(--ty-other); }
|
|
110
|
+
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; flex: none; }
|
|
111
|
+
.badge.completed { background: var(--ok-bg); color: var(--ok); }
|
|
112
|
+
.badge.failed { background: var(--fail-bg); color: var(--fail); }
|
|
113
|
+
.badge.cancelled { background: var(--cancel-bg); color: var(--cancel); }
|
|
114
|
+
.badge.other { background: var(--other-bg); color: var(--other); }
|
|
115
|
+
.sdot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }
|
|
116
|
+
.sdot-completed { background: var(--ok); } .sdot-failed { background: var(--fail); } .sdot-cancelled { background: var(--cancel); } .sdot-other { background: var(--other); }
|
|
117
|
+
.dim { color: var(--dim); font-size: 12px; }
|
|
118
|
+
.tok { white-space: nowrap; font-size: 12px; }
|
|
119
|
+
.tok-in { color: var(--tok-in); } .tok-out { color: var(--tok-out); } .tok-total { color: var(--tok-total); }
|
|
120
|
+
.cost { color: var(--cost); font-weight: 600; font-size: 12px; white-space: nowrap; }
|
|
121
|
+
|
|
122
|
+
.io-body { margin-bottom: 6px; }
|
|
123
|
+
.piol { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 11px 0 3px; }
|
|
124
|
+
.messages { display: flex; flex-direction: column; gap: 8px; }
|
|
125
|
+
.msg-collapse { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
|
|
126
|
+
.msg-collapse > summary { cursor: pointer; padding: 7px 10px; list-style: none; font-size: 12px; display: flex; align-items: center; gap: 6px; }
|
|
127
|
+
.msg-collapse > summary::-webkit-details-marker { display: none; }
|
|
128
|
+
.msg-collapse > summary::before { content: "\\25B8"; color: var(--dim); }
|
|
129
|
+
.msg-collapse[open] > summary::before { content: "\\25BE"; }
|
|
130
|
+
.msg-collapse[open] > summary { border-bottom: 1px solid var(--border); }
|
|
131
|
+
.msg-collapse .messages { padding: 8px; }
|
|
132
|
+
.msg-collapse .msg-count { font-weight: 600; color: var(--text2); }
|
|
133
|
+
.msg { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
|
|
134
|
+
.msg-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; color: var(--text2); background: var(--surface2); border-bottom: 1px solid var(--border); }
|
|
135
|
+
.msg-role.role-system { color: var(--cancel); } .msg-role.role-user { color: var(--ty-agent); } .msg-role.role-assistant { color: var(--ok); } .msg-role.role-tool { color: var(--ty-tool); }
|
|
136
|
+
.msg-content { padding: 8px 10px; }
|
|
137
|
+
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; align-items: start; }
|
|
138
|
+
.kv-row { display: contents; }
|
|
139
|
+
.kv-k { color: var(--dim); font-family: ui-monospace, monospace; font-size: 12px; padding: 2px 0; white-space: nowrap; }
|
|
140
|
+
.kv-v { font-size: 13px; min-width: 0; overflow: auto; padding: 1px 0; word-break: break-word; }
|
|
141
|
+
.part { border-left: 2px solid var(--border2); padding-left: 8px; margin: 4px 0; }
|
|
142
|
+
.part-label { font-size: 11px; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
|
|
143
|
+
.md-h { font-weight: 700; margin: 8px 0 4px; }
|
|
144
|
+
.md-h1 { font-size: 16px; } .md-h2 { font-size: 14px; } .md-h3 { font-size: 13px; color: var(--text2); } .md-h4 { font-size: 12px; color: var(--dim); }
|
|
145
|
+
.md-p { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
|
|
146
|
+
.io-body ul, .msg-content ul { margin: 4px 0; padding-left: 18px; }
|
|
147
|
+
pre.code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; overflow: auto; max-height: 320px; font-size: 12px; white-space: pre; margin: 6px 0; }
|
|
148
|
+
pre.mini { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; overflow: auto; max-height: 200px; font-size: 12px; margin: 0; }
|
|
149
|
+
code { background: var(--inline-bg); border-radius: 4px; padding: 1px 4px; font-family: ui-monospace, monospace; font-size: 12px; }
|
|
150
|
+
a { color: var(--link); }
|
|
151
|
+
.empty { color: var(--dim); padding: 30px; text-align: center; }
|
|
152
|
+
|
|
153
|
+
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 40; }
|
|
154
|
+
.backdrop.open { opacity: 1; pointer-events: auto; }
|
|
155
|
+
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: var(--panel); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .18s ease; z-index: 50; display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(0,0,0,.4); }
|
|
156
|
+
.drawer.open { transform: translateX(0); }
|
|
157
|
+
.drawer-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
|
158
|
+
.drawer-close { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--dim); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; padding: 5px 9px; }
|
|
159
|
+
.drawer-close:hover { color: var(--text); border-color: var(--border2); }
|
|
160
|
+
.drawer-body { flex: 1; overflow: hidden; }
|
|
161
|
+
.dsplit { display: flex; height: 100%; }
|
|
162
|
+
.dtree { flex: 0 0 44%; overflow: auto; padding: 8px 6px; border-right: 1px solid var(--border); }
|
|
163
|
+
.ddetail { flex: 1; overflow: auto; padding: 10px 14px; min-width: 0; }
|
|
164
|
+
.tnode { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
|
|
165
|
+
.tnode:hover { background: var(--surface); }
|
|
166
|
+
.tnode.selected { background: var(--sel-bg); border-color: var(--sel-border); }
|
|
167
|
+
.tname { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
168
|
+
.tmeta { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; }
|
|
169
|
+
.twisty { color: var(--dim); font-size: 11px; width: 12px; text-align: center; flex: none; }
|
|
170
|
+
.tkids { margin-left: 10px; padding-left: 9px; border-left: 1px solid var(--border); }
|
|
171
|
+
.crumb { font-size: 12px; color: var(--dim); margin-bottom: 6px; word-break: break-all; }
|
|
172
|
+
.crumb .sep { color: var(--border2); }
|
|
173
|
+
.dhead-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
|
|
174
|
+
.meta-sec { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 8px; }
|
|
175
|
+
.meta-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-bottom: 6px; }
|
|
176
|
+
|
|
177
|
+
/* Toolbar: search box + filter chips over the trace list. */
|
|
178
|
+
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
|
|
179
|
+
.search { flex: 1 1 220px; min-width: 160px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font: inherit; }
|
|
180
|
+
.search:focus { outline: none; border-color: var(--sel-border); }
|
|
181
|
+
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
|
182
|
+
.chip { background: var(--surface2); border: 1px solid var(--border); color: var(--text2); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
|
|
183
|
+
.chip:hover { color: var(--text); border-color: var(--border2); }
|
|
184
|
+
.chip.active { background: var(--sel-bg); border-color: var(--sel-border); color: var(--text); }
|
|
185
|
+
.chip-clear { color: var(--dim); border-style: dashed; }
|
|
186
|
+
.chip-group { display: inline-flex; gap: 6px; align-items: center; }
|
|
187
|
+
.chip-group .gl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
|
|
188
|
+
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--text2); user-select: none; }
|
|
189
|
+
.toggle input { accent-color: var(--sel-border); }
|
|
190
|
+
.toggle select { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 12px; cursor: pointer; }
|
|
191
|
+
.toggle select:hover { border-color: var(--border2); }
|
|
192
|
+
|
|
193
|
+
/* Session grouping headers. */
|
|
194
|
+
.sgroup { margin-bottom: 10px; }
|
|
195
|
+
.sgroup-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; margin-bottom: 6px; }
|
|
196
|
+
.sgroup-head:hover { border-color: var(--border2); }
|
|
197
|
+
.sgroup-tw { color: var(--dim); font-size: 11px; width: 12px; text-align: center; flex: none; }
|
|
198
|
+
.sgroup-id { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
199
|
+
.sgroup-count { margin-left: auto; color: var(--dim); font-size: 12px; }
|
|
200
|
+
.sgroup-body { padding-left: 6px; }
|
|
201
|
+
|
|
202
|
+
/* Per-type aggregate stats panel (a CSS-grid table above the trace list). */
|
|
203
|
+
.stats-table { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12px; }
|
|
204
|
+
.strow { display: grid; grid-template-columns: 1.5fr 0.7fr 1fr 0.8fr 0.8fr 1fr 1fr; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); }
|
|
205
|
+
.strow:last-child { border-bottom: none; }
|
|
206
|
+
.strow.sthead { background: var(--surface2); color: var(--dim); font-weight: 600; }
|
|
207
|
+
.strow > span { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
208
|
+
.strow > .stc-type { text-align: left; }
|
|
209
|
+
.stc-fail.fail { color: var(--fail); }
|
|
210
|
+
|
|
211
|
+
/* Cost heatmap: a left accent bar tinted by relative rollup cost. */
|
|
212
|
+
.trace-row { position: relative; }
|
|
213
|
+
.tnode { position: relative; }
|
|
214
|
+
.heat { position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--cost); }
|
|
215
|
+
|
|
216
|
+
/* Timeline / waterfall view in the drawer. */
|
|
217
|
+
.dview { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
|
|
218
|
+
.dview button { background: transparent; border: 1px solid var(--border); color: var(--dim); cursor: pointer; font-size: 12px; padding: 4px 10px; border-radius: 6px; }
|
|
219
|
+
.dview button:hover { color: var(--text); }
|
|
220
|
+
.dview button.active { background: var(--surface2); color: var(--text); border-color: var(--border2); }
|
|
221
|
+
.legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
|
|
222
|
+
.legend .grad { width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--surface2), var(--cost)); border: 1px solid var(--border); }
|
|
223
|
+
.gantt { padding: 8px 10px; }
|
|
224
|
+
.grow { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; cursor: pointer; border-radius: 4px; }
|
|
225
|
+
.grow:hover { background: var(--surface); }
|
|
226
|
+
.grow.selected { background: var(--sel-bg); }
|
|
227
|
+
.glabel { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
|
|
228
|
+
.gtrack { position: relative; flex: 1; height: 14px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
|
|
229
|
+
.gbar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--ty-agent); min-width: 2px; }
|
|
230
|
+
.gbar.crit { background: var(--fail); }
|
|
231
|
+
.gbar.bar-completed { background: var(--ty-agent); } .gbar.bar-failed { background: var(--fail); } .gbar.bar-cancelled { background: var(--cancel); } .gbar.bar-other { background: var(--other); }
|
|
232
|
+
.gdur { flex: 0 0 auto; color: var(--dim); white-space: nowrap; min-width: 44px; text-align: right; }
|
|
233
|
+
.gantt-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--dim); }
|
|
234
|
+
.gantt-legend .ck { display: inline-flex; align-items: center; gap: 5px; }
|
|
235
|
+
.gantt-legend .sw { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
|
|
236
|
+
|
|
237
|
+
@media (max-width: 560px) {
|
|
238
|
+
.dsplit { flex-direction: column; }
|
|
239
|
+
.dtree { flex: none; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--border); }
|
|
240
|
+
.glabel { flex-basis: 30%; }
|
|
241
|
+
}
|
|
242
|
+
</style>
|
|
243
|
+
</head>
|
|
244
|
+
<body>
|
|
245
|
+
<header>
|
|
246
|
+
<img class="logo" src="${WARLOCK_LOGO_DATA_URI}" alt="Warlock" />
|
|
247
|
+
<h1>${safeTitle}</h1>
|
|
248
|
+
<span class="meta" id="meta">connecting…</span>
|
|
249
|
+
<div class="theme" id="theme" role="group" aria-label="Theme" style="margin-left:auto">
|
|
250
|
+
<button type="button" data-theme-set="light" title="Light" aria-label="Light theme">☀</button>
|
|
251
|
+
<button type="button" data-theme-set="dark" title="Dark" aria-label="Dark theme">☾</button>
|
|
252
|
+
<button type="button" data-theme-set="system" title="System" aria-label="System theme">◐</button>
|
|
253
|
+
</div>
|
|
254
|
+
</header>
|
|
255
|
+
<div class="stats" id="stats"></div>
|
|
256
|
+
<div class="toolbar" id="toolbar">
|
|
257
|
+
<input class="search" id="search" type="search" placeholder="Search name or session…" aria-label="Search traces" autocomplete="off" />
|
|
258
|
+
<div class="chips" id="status-chips" role="group" aria-label="Filter by status"></div>
|
|
259
|
+
<div class="chips" id="type-chips" role="group" aria-label="Filter by type"></div>
|
|
260
|
+
<div class="chips" id="session-chips" role="group" aria-label="Filter by session"></div>
|
|
261
|
+
<div class="chips" id="prompt-chips" role="group" aria-label="Filter by prompt version"></div>
|
|
262
|
+
<label class="toggle" id="group-wrap" title="Group the trace list (mutually exclusive)">
|
|
263
|
+
Group
|
|
264
|
+
<select id="group-by" aria-label="Group the trace list">
|
|
265
|
+
<option value="">None</option>
|
|
266
|
+
<option value="session">Session</option>
|
|
267
|
+
<option value="prompt">Prompt</option>
|
|
268
|
+
<option value="type">Type</option>
|
|
269
|
+
</select>
|
|
270
|
+
</label>
|
|
271
|
+
<label class="toggle" id="stats-wrap" title="Show a per-type aggregate stats panel (count, failure rate, p50/p95 latency, tokens, cost)">
|
|
272
|
+
<input type="checkbox" id="show-stats" /> Stats
|
|
273
|
+
</label>
|
|
274
|
+
<button class="chip chip-clear" id="clear-filters" type="button" title="Clear all filters">Clear</button>
|
|
275
|
+
</div>
|
|
276
|
+
<div id="stats-panel"></div>
|
|
277
|
+
<main id="traces"><div class="empty">Loading…</div></main>
|
|
278
|
+
|
|
279
|
+
<div class="backdrop" id="backdrop"></div>
|
|
280
|
+
<aside class="drawer" id="drawer" aria-hidden="true" aria-label="Trace detail">
|
|
281
|
+
<div class="drawer-head" id="drawer-head"></div>
|
|
282
|
+
<div class="drawer-body" id="drawer-body"></div>
|
|
283
|
+
</aside>
|
|
284
|
+
|
|
285
|
+
<script>
|
|
286
|
+
(function () {
|
|
287
|
+
var API = ${JSON.stringify(apiBase)};
|
|
288
|
+
var BT = String.fromCharCode(96);
|
|
289
|
+
|
|
290
|
+
var state = {
|
|
291
|
+
traces: [], selectedId: null, selectedSpanId: null, collapsed: {}, sig: null,
|
|
292
|
+
// Client-side filter state (search box + chips + errors-only header toggle).
|
|
293
|
+
filter: { text: "", statuses: {}, types: {}, sessionId: null, promptKey: null, errorsOnly: false },
|
|
294
|
+
groupBySession: false, // session-grouping list toggle
|
|
295
|
+
groupByPrompt: false, // prompt-version-grouping list toggle
|
|
296
|
+
groupByType: false, // root-type-grouping list toggle
|
|
297
|
+
showStats: false, // per-type aggregate-stats panel toggle (independent of grouping)
|
|
298
|
+
collapsedGroups: {}, // collapsed group headers (session, prompt, or type)
|
|
299
|
+
view: "tree", // drawer left pane: "tree" | "timeline"
|
|
300
|
+
hashApplied: false // guards one-time deep-link open on load
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
var STATUS_FILTERS = ["completed", "failed", "cancelled"];
|
|
304
|
+
var TYPE_FILTERS = ["agent", "tool", "model", "supervisor", "team", "workflow", "orchestrator", "planner", "batch", "callback"];
|
|
305
|
+
var ERROR_STATUSES = { failed: 1, cancelled: 1 };
|
|
306
|
+
var NO_SESSION_KEY = "(no session)";
|
|
307
|
+
var NO_PROMPT_KEY = "(no prompt)";
|
|
308
|
+
var NO_TYPE_KEY = "(no type)";
|
|
309
|
+
|
|
310
|
+
var statusClass = function (s) {
|
|
311
|
+
if (s === "completed" || s === "failed" || s === "cancelled") return s;
|
|
312
|
+
return "other";
|
|
313
|
+
};
|
|
314
|
+
var esc = function (v) {
|
|
315
|
+
return String(v).replace(/[&<>"']/g, function (c) {
|
|
316
|
+
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c];
|
|
317
|
+
});
|
|
318
|
+
};
|
|
319
|
+
var num = function (n) { return (n == null ? 0 : n).toLocaleString(); };
|
|
320
|
+
var fmt = function (v) {
|
|
321
|
+
if (v == null) return "";
|
|
322
|
+
if (typeof v === "string") return v;
|
|
323
|
+
try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
function dur(ms) {
|
|
327
|
+
if (ms == null) return "—";
|
|
328
|
+
if (ms >= 1000) return (ms / 1000).toFixed(1) + "s";
|
|
329
|
+
if (ms >= 1) return Math.round(ms) + "ms";
|
|
330
|
+
return ms.toFixed(1) + "ms";
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
function tokens(u) {
|
|
334
|
+
if (!u) return "";
|
|
335
|
+
var i = u.input || 0, o = u.output || 0, t = (u.total != null) ? u.total : (i + o);
|
|
336
|
+
if (i === 0 && o === 0 && t === 0) return ""; // nothing to show — hide the row
|
|
337
|
+
return '<span class="tok">'
|
|
338
|
+
+ '<span class="tok-in" title="input tokens">↓ ' + num(i) + "</span> "
|
|
339
|
+
+ '<span class="tok-out" title="output tokens">↑ ' + num(o) + "</span> "
|
|
340
|
+
+ '<span class="tok-total" title="total tokens">' + num(t) + " total</span></span>";
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
var TYPE_LABELS = {
|
|
344
|
+
agent: "Agent", tool: "Tool", model: "Model", supervisor: "Supervisor",
|
|
345
|
+
workflow: "Workflow", orchestrator: "Orchestrator", team: "Team",
|
|
346
|
+
planner: "Planner", prompt: "Prompt", guardrail: "Guardrail"
|
|
347
|
+
};
|
|
348
|
+
var PRIMITIVES = { supervisor: 1, workflow: 1, orchestrator: 1, team: 1, planner: 1 };
|
|
349
|
+
function typeClass(type) {
|
|
350
|
+
if (PRIMITIVES[type]) return "ty-prim";
|
|
351
|
+
if (type === "agent") return "ty-agent";
|
|
352
|
+
if (type === "tool") return "ty-tool";
|
|
353
|
+
if (type === "model") return "ty-model";
|
|
354
|
+
return "ty-other";
|
|
355
|
+
}
|
|
356
|
+
function typeLabel(type) {
|
|
357
|
+
var t = type || "node";
|
|
358
|
+
var label = TYPE_LABELS[t] || (t.charAt(0).toUpperCase() + t.slice(1));
|
|
359
|
+
return '<span class="tylabel ' + typeClass(t) + '">' + esc(label) + "</span>";
|
|
360
|
+
}
|
|
361
|
+
// Plain-text (no span wrapper) capitalized labels for bare-text sites —
|
|
362
|
+
// group headers, filter-chip labels — where the colored typeLabel span is
|
|
363
|
+
// not wanted. Underlying keys/classes/filter values stay raw lowercase.
|
|
364
|
+
function typeText(type) {
|
|
365
|
+
var t = type || "node";
|
|
366
|
+
return TYPE_LABELS[t] || (t.charAt(0).toUpperCase() + t.slice(1));
|
|
367
|
+
}
|
|
368
|
+
function statusText(s) {
|
|
369
|
+
return s ? String(s).charAt(0).toUpperCase() + String(s).slice(1) : s;
|
|
370
|
+
}
|
|
371
|
+
function statusDot(s) { return '<span class="sdot sdot-' + statusClass(s) + '" title="' + esc(s) + '"></span>'; }
|
|
372
|
+
|
|
373
|
+
function findTrace(id) {
|
|
374
|
+
for (var i = 0; i < state.traces.length; i++) if (state.traces[i].traceId === id) return state.traces[i];
|
|
375
|
+
return null;
|
|
376
|
+
}
|
|
377
|
+
function findSpan(span, id) {
|
|
378
|
+
if (span.spanId === id) return span;
|
|
379
|
+
var k = span.children || [];
|
|
380
|
+
for (var i = 0; i < k.length; i++) { var r = findSpan(k[i], id); if (r) return r; }
|
|
381
|
+
return null;
|
|
382
|
+
}
|
|
383
|
+
function findPath(span, id, acc) {
|
|
384
|
+
var p = (acc || []).concat([span]);
|
|
385
|
+
if (span.spanId === id) return p;
|
|
386
|
+
var k = span.children || [];
|
|
387
|
+
for (var i = 0; i < k.length; i++) { var r = findPath(k[i], id, p); if (r) return r; }
|
|
388
|
+
return null;
|
|
389
|
+
}
|
|
390
|
+
function countSpans(span) {
|
|
391
|
+
var n = 1, k = span.children || [];
|
|
392
|
+
for (var i = 0; i < k.length; i++) n += countSpans(k[i]);
|
|
393
|
+
return n;
|
|
394
|
+
}
|
|
395
|
+
function traceSig(t) { return t.root.status + "|" + countSpans(t.root) + "|" + t.duration + "|" + (t.usage && t.usage.total); }
|
|
396
|
+
// Sum every priced lane of a cost object into one USD number.
|
|
397
|
+
function costSumObj(c) {
|
|
398
|
+
if (!c) return 0;
|
|
399
|
+
return (c.input || 0) + (c.output || 0) + (c.cachedInput || 0) + (c.cachedOutput || 0) + (c.reasoning || 0);
|
|
400
|
+
}
|
|
401
|
+
// The cost a single span directly carries (on its rolled-up usage).
|
|
402
|
+
function usageCost(usage) { return usage ? costSumObj(usage.cost) : 0; }
|
|
403
|
+
// Rollup-aware subtree cost: take a node's own cost when it has one
|
|
404
|
+
// (it already rolls up its trips); otherwise sum the children. This
|
|
405
|
+
// avoids double-counting on wrapper nodes (workflow/supervisor roots
|
|
406
|
+
// carry tokens but no cost, so we descend to the priced agent/model).
|
|
407
|
+
function rollupCost(span) {
|
|
408
|
+
var own = usageCost(span.usage);
|
|
409
|
+
if (own > 0) return own;
|
|
410
|
+
var sum = 0;
|
|
411
|
+
(span.children || []).forEach(function (c) { sum += rollupCost(c); });
|
|
412
|
+
return sum;
|
|
413
|
+
}
|
|
414
|
+
function traceCost(t) {
|
|
415
|
+
var explicit = costSumObj(t.cost);
|
|
416
|
+
return explicit > 0 ? explicit : rollupCost(t.root);
|
|
417
|
+
}
|
|
418
|
+
// Format a USD amount; tiny per-node costs need more decimals to read.
|
|
419
|
+
function money(n) {
|
|
420
|
+
if (!n) return "$0";
|
|
421
|
+
return "$" + (n < 0.01 ? n.toFixed(6) : n.toFixed(4));
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
// --- Client-side filtering / grouping / heatmap ----------------------
|
|
425
|
+
// These mirror the pure, unit-tested helpers in trace-filter.ts. Keep
|
|
426
|
+
// the two in sync: trace-filter.ts is the spec, this is its inlined twin.
|
|
427
|
+
function anySelected(map) {
|
|
428
|
+
for (var k in map) { if (map[k]) return true; }
|
|
429
|
+
return false;
|
|
430
|
+
}
|
|
431
|
+
function matchesFilter(t) {
|
|
432
|
+
var f = state.filter, root = t.root;
|
|
433
|
+
if (f.errorsOnly && !ERROR_STATUSES[root.status]) return false;
|
|
434
|
+
if (anySelected(f.statuses) && !f.statuses[root.status]) return false;
|
|
435
|
+
if (anySelected(f.types) && !f.types[root.type]) return false;
|
|
436
|
+
if (f.sessionId && t.sessionId !== f.sessionId) return false;
|
|
437
|
+
if (f.promptKey && tracePromptKey(t) !== f.promptKey) return false;
|
|
438
|
+
var text = (f.text || "").trim().toLowerCase();
|
|
439
|
+
if (text) {
|
|
440
|
+
var hay = (String(root.name) + " " + (t.sessionId || "")).toLowerCase();
|
|
441
|
+
if (hay.indexOf(text) === -1) return false;
|
|
442
|
+
}
|
|
443
|
+
return true;
|
|
444
|
+
}
|
|
445
|
+
function filteredTraces() {
|
|
446
|
+
var out = [];
|
|
447
|
+
for (var i = 0; i < state.traces.length; i++) if (matchesFilter(state.traces[i])) out.push(state.traces[i]);
|
|
448
|
+
return out;
|
|
449
|
+
}
|
|
450
|
+
function groupBySession(list) {
|
|
451
|
+
var order = [], byKey = {};
|
|
452
|
+
for (var i = 0; i < list.length; i++) {
|
|
453
|
+
var key = list[i].sessionId || NO_SESSION_KEY;
|
|
454
|
+
if (!byKey[key]) { byKey[key] = []; order.push(key); }
|
|
455
|
+
byKey[key].push(list[i]);
|
|
456
|
+
}
|
|
457
|
+
return order.map(function (k) { return { sessionId: k, traces: byKey[k] }; });
|
|
458
|
+
}
|
|
459
|
+
// Group by prompt version (name@version) — the second group-by dimension
|
|
460
|
+
// beside session. Mirrors groupByPrompt in trace-filter.ts. Unlinked runs
|
|
461
|
+
// bucket under NO_PROMPT_KEY so they stay visible.
|
|
462
|
+
function groupByPrompt(list) {
|
|
463
|
+
var order = [], byKey = {};
|
|
464
|
+
for (var i = 0; i < list.length; i++) {
|
|
465
|
+
var key = tracePromptKey(list[i]) || NO_PROMPT_KEY;
|
|
466
|
+
if (!byKey[key]) { byKey[key] = []; order.push(key); }
|
|
467
|
+
byKey[key].push(list[i]);
|
|
468
|
+
}
|
|
469
|
+
return order.map(function (k) { return { groupKey: k, traces: byKey[k] }; });
|
|
470
|
+
}
|
|
471
|
+
// Group by root type (agent/workflow/supervisor/planner/…) — the coarsest
|
|
472
|
+
// group-by dimension. Mirrors groupByType in trace-filter.ts. root.type is
|
|
473
|
+
// always present, so the NO_TYPE_KEY bucket is only a defensive fallback.
|
|
474
|
+
function typeGroups(list) {
|
|
475
|
+
var order = [], byKey = {};
|
|
476
|
+
for (var i = 0; i < list.length; i++) {
|
|
477
|
+
var key = (list[i].root && list[i].root.type) || NO_TYPE_KEY;
|
|
478
|
+
if (!byKey[key]) { byKey[key] = []; order.push(key); }
|
|
479
|
+
byKey[key].push(list[i]);
|
|
480
|
+
}
|
|
481
|
+
return order.map(function (k) { return { groupKey: k, traces: byKey[k] }; });
|
|
482
|
+
}
|
|
483
|
+
// Inlined twins of percentile + aggregateByType in trace-filter.ts (the
|
|
484
|
+
// spec). Power the per-type stats panel from the same filtered list the
|
|
485
|
+
// trace view renders, so the panel honors active filters with no API call.
|
|
486
|
+
function percentile(values, p) {
|
|
487
|
+
if (!values.length) return 0;
|
|
488
|
+
var sorted = values.slice().sort(function (a, b) { return a - b; });
|
|
489
|
+
var rank = Math.ceil((p / 100) * sorted.length) - 1;
|
|
490
|
+
var index = Math.min(Math.max(rank, 0), sorted.length - 1);
|
|
491
|
+
return sorted[index];
|
|
492
|
+
}
|
|
493
|
+
function aggregateByType(list) {
|
|
494
|
+
var order = [], byKey = {};
|
|
495
|
+
for (var i = 0; i < list.length; i++) {
|
|
496
|
+
var key = (list[i].root && list[i].root.type) || NO_TYPE_KEY;
|
|
497
|
+
if (!byKey[key]) { byKey[key] = []; order.push(key); }
|
|
498
|
+
byKey[key].push(list[i]);
|
|
499
|
+
}
|
|
500
|
+
return order.map(function (k) {
|
|
501
|
+
var bucket = byKey[k];
|
|
502
|
+
var durations = [], failed = 0, tokens = 0, cost = 0;
|
|
503
|
+
for (var j = 0; j < bucket.length; j++) {
|
|
504
|
+
var t = bucket[j];
|
|
505
|
+
durations.push(t.duration);
|
|
506
|
+
if (ERROR_STATUSES[t.root.status]) failed += 1;
|
|
507
|
+
tokens += (t.usage && t.usage.total) || 0;
|
|
508
|
+
cost += traceCost(t);
|
|
509
|
+
}
|
|
510
|
+
return {
|
|
511
|
+
type: k, count: bucket.length, failed: failed,
|
|
512
|
+
failRate: bucket.length ? failed / bucket.length : 0,
|
|
513
|
+
p50: percentile(durations, 50), p95: percentile(durations, 95),
|
|
514
|
+
tokens: tokens, cost: cost
|
|
515
|
+
};
|
|
516
|
+
});
|
|
517
|
+
}
|
|
518
|
+
// Per-type aggregate panel above the trace list. Honors the active filters
|
|
519
|
+
// (computed over filteredTraces) and re-renders on every poll/filter tick.
|
|
520
|
+
function renderStatsPanel() {
|
|
521
|
+
var host = document.getElementById("stats-panel");
|
|
522
|
+
if (!host) return;
|
|
523
|
+
var stats = state.showStats ? aggregateByType(filteredTraces()) : [];
|
|
524
|
+
if (!stats.length) { host.innerHTML = ""; return; }
|
|
525
|
+
var head = '<div class="strow sthead">'
|
|
526
|
+
+ '<span class="stc-type">Type</span><span>Count</span><span>Failed</span>'
|
|
527
|
+
+ '<span>p50</span><span>p95</span><span>Tokens</span><span>Cost</span></div>';
|
|
528
|
+
var rows = stats.map(function (s) {
|
|
529
|
+
var failTxt = s.failed
|
|
530
|
+
? s.failed + " (" + Math.round(s.failRate * 100) + "%)"
|
|
531
|
+
: "0";
|
|
532
|
+
return '<div class="strow">'
|
|
533
|
+
+ '<span class="stc-type">' + typeLabel(s.type) + "</span>"
|
|
534
|
+
+ '<span>' + num(s.count) + "</span>"
|
|
535
|
+
+ '<span class="stc-fail' + (s.failed ? " fail" : "") + '">' + failTxt + "</span>"
|
|
536
|
+
+ '<span class="dim">' + dur(s.p50) + "</span>"
|
|
537
|
+
+ '<span class="dim">' + dur(s.p95) + "</span>"
|
|
538
|
+
+ '<span>' + num(s.tokens) + "</span>"
|
|
539
|
+
+ '<span class="cost">' + money(s.cost) + "</span>"
|
|
540
|
+
+ "</div>";
|
|
541
|
+
}).join("");
|
|
542
|
+
host.innerHTML = '<div class="stats-table">' + head + rows + "</div>";
|
|
543
|
+
}
|
|
544
|
+
// Largest single-node rollup cost in a subtree — heatmap denominator.
|
|
545
|
+
function maxNodeCost(span) {
|
|
546
|
+
var max = rollupCost(span);
|
|
547
|
+
(span.children || []).forEach(function (c) { var m = maxNodeCost(c); if (m > max) max = m; });
|
|
548
|
+
return max;
|
|
549
|
+
}
|
|
550
|
+
// Intensity in [0,1] of a node's cost vs the trace max. Free trace → 0.
|
|
551
|
+
function heatIntensity(nodeCost, maxCost) {
|
|
552
|
+
if (maxCost <= 0 || nodeCost <= 0) return 0;
|
|
553
|
+
var r = nodeCost / maxCost;
|
|
554
|
+
return r > 1 ? 1 : r;
|
|
555
|
+
}
|
|
556
|
+
// The distinct sessionIds present across the polled traces, first-seen
|
|
557
|
+
// order, capped so the chip row never overflows the toolbar.
|
|
558
|
+
function presentSessions() {
|
|
559
|
+
var seen = {}, out = [];
|
|
560
|
+
for (var i = 0; i < state.traces.length && out.length < 12; i++) {
|
|
561
|
+
var s = state.traces[i].sessionId;
|
|
562
|
+
if (s && !seen[s]) { seen[s] = 1; out.push(s); }
|
|
563
|
+
}
|
|
564
|
+
return out;
|
|
565
|
+
}
|
|
566
|
+
// The root types actually present in the polled traces — so the type filter
|
|
567
|
+
// chips show only what exists (no dead "Tool"/"Model"/"Batch"/… chips), in
|
|
568
|
+
// canonical TYPE_FILTERS order. An active-but-aged-out selection stays so
|
|
569
|
+
// the filter is never stranded with no chip to clear it.
|
|
570
|
+
function presentTypes() {
|
|
571
|
+
var seen = {};
|
|
572
|
+
for (var i = 0; i < state.traces.length; i++) {
|
|
573
|
+
var t = state.traces[i].root && state.traces[i].root.type;
|
|
574
|
+
if (t) seen[t] = 1;
|
|
575
|
+
}
|
|
576
|
+
for (var k in state.filter.types) { if (state.filter.types[k]) seen[k] = 1; }
|
|
577
|
+
var out = [];
|
|
578
|
+
for (var j = 0; j < TYPE_FILTERS.length; j++) {
|
|
579
|
+
if (seen[TYPE_FILTERS[j]]) { out.push(TYPE_FILTERS[j]); delete seen[TYPE_FILTERS[j]]; }
|
|
580
|
+
}
|
|
581
|
+
for (var x in seen) { out.push(x); }
|
|
582
|
+
return out;
|
|
583
|
+
}
|
|
584
|
+
// The distinct prompt name@version keys present across the polled traces,
|
|
585
|
+
// first-seen order, capped so the chip row never overflows the toolbar.
|
|
586
|
+
function presentPrompts() {
|
|
587
|
+
var seen = {}, out = [];
|
|
588
|
+
for (var i = 0; i < state.traces.length && out.length < 12; i++) {
|
|
589
|
+
var p = tracePromptKey(state.traces[i]);
|
|
590
|
+
if (p && !seen[p]) { seen[p] = 1; out.push(p); }
|
|
591
|
+
}
|
|
592
|
+
return out;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
function mdInline(s) {
|
|
596
|
+
s = s.replace(/\\*\\*([^*]+)\\*\\*/g, "<strong>$1</strong>");
|
|
597
|
+
var codeRe = new RegExp(BT + "([^" + BT + "]+)" + BT, "g");
|
|
598
|
+
s = s.replace(codeRe, "<code>$1</code>");
|
|
599
|
+
s = s.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
|
600
|
+
return s;
|
|
601
|
+
}
|
|
602
|
+
function mdToHtml(raw) {
|
|
603
|
+
var src = esc(String(raw));
|
|
604
|
+
var fence = BT + BT + BT;
|
|
605
|
+
var html = "", idx = 0;
|
|
606
|
+
while (true) {
|
|
607
|
+
var start = src.indexOf(fence, idx);
|
|
608
|
+
if (start === -1) { html += mdBlocks(src.slice(idx)); break; }
|
|
609
|
+
html += mdBlocks(src.slice(idx, start));
|
|
610
|
+
var nl = src.indexOf("\\n", start + 3);
|
|
611
|
+
var bodyStart = (nl === -1) ? start + 3 : nl + 1;
|
|
612
|
+
var end = src.indexOf(fence, bodyStart);
|
|
613
|
+
if (end === -1) { html += mdBlocks(src.slice(start)); break; }
|
|
614
|
+
html += '<pre class="code">' + src.slice(bodyStart, end).replace(/\\n$/, "") + "</pre>";
|
|
615
|
+
idx = end + 3;
|
|
616
|
+
}
|
|
617
|
+
return html;
|
|
618
|
+
}
|
|
619
|
+
function mdBlocks(src) {
|
|
620
|
+
var lines = src.split("\\n"), html = "", inList = false;
|
|
621
|
+
function closeList() { if (inList) { html += "</ul>"; inList = false; } }
|
|
622
|
+
for (var i = 0; i < lines.length; i++) {
|
|
623
|
+
var ln = lines[i];
|
|
624
|
+
var h = ln.match(/^(#{1,4})\\s+(.*)$/);
|
|
625
|
+
if (h) { closeList(); html += '<div class="md-h md-h' + h[1].length + '">' + mdInline(h[2]) + "</div>"; continue; }
|
|
626
|
+
var li = ln.match(/^\\s*[-*]\\s+(.*)$/);
|
|
627
|
+
if (li) { if (!inList) { html += "<ul>"; inList = true; } html += "<li>" + mdInline(li[1]) + "</li>"; continue; }
|
|
628
|
+
if (ln.trim() === "") { closeList(); continue; }
|
|
629
|
+
closeList();
|
|
630
|
+
html += '<div class="md-p">' + mdInline(ln) + "</div>";
|
|
631
|
+
}
|
|
632
|
+
closeList();
|
|
633
|
+
return html;
|
|
634
|
+
}
|
|
635
|
+
function renderKv(obj) {
|
|
636
|
+
var keys = Object.keys(obj);
|
|
637
|
+
if (!keys.length) return '<span class="dim">{}</span>';
|
|
638
|
+
return '<div class="kv">' + keys.map(function (k) {
|
|
639
|
+
var v = obj[k], vs;
|
|
640
|
+
if (v === null || v === undefined) vs = '<span class="dim">null</span>';
|
|
641
|
+
else if (typeof v === "object") vs = '<pre class="mini">' + esc(fmt(v)) + "</pre>";
|
|
642
|
+
else vs = esc(String(v));
|
|
643
|
+
return '<div class="kv-row"><span class="kv-k">' + esc(k) + '</span><span class="kv-v">' + vs + "</span></div>";
|
|
644
|
+
}).join("") + "</div>";
|
|
645
|
+
}
|
|
646
|
+
function isMessageArray(v) {
|
|
647
|
+
return Array.isArray(v) && v.length > 0 && v.every(function (m) { return m && typeof m === "object" && typeof m.role === "string"; });
|
|
648
|
+
}
|
|
649
|
+
function renderContent(c) {
|
|
650
|
+
if (c == null) return '<span class="dim">—</span>';
|
|
651
|
+
if (typeof c === "string") return mdToHtml(c);
|
|
652
|
+
if (Array.isArray(c)) return c.map(renderPart).join("");
|
|
653
|
+
if (typeof c === "object") return renderKv(c);
|
|
654
|
+
return esc(String(c));
|
|
655
|
+
}
|
|
656
|
+
function renderPart(p) {
|
|
657
|
+
if (p == null) return "";
|
|
658
|
+
if (typeof p === "string") return mdToHtml(p);
|
|
659
|
+
if (p.type === "text" && typeof p.text === "string") return mdToHtml(p.text);
|
|
660
|
+
return '<div class="part"><div class="part-label">' + esc(p.type || "part") + "</div>" + renderKv(p) + "</div>";
|
|
661
|
+
}
|
|
662
|
+
function previewText(c) {
|
|
663
|
+
if (c == null) return "";
|
|
664
|
+
if (typeof c === "string") return c.replace(/\\s+/g, " ").slice(0, 70);
|
|
665
|
+
if (Array.isArray(c)) {
|
|
666
|
+
for (var i = 0; i < c.length; i++) {
|
|
667
|
+
var p = c[i];
|
|
668
|
+
if (typeof p === "string") return p.slice(0, 70);
|
|
669
|
+
if (p && p.type === "text" && p.text) return String(p.text).slice(0, 70);
|
|
670
|
+
}
|
|
671
|
+
return "";
|
|
672
|
+
}
|
|
673
|
+
try { return JSON.stringify(c).slice(0, 70); } catch (e) { return ""; }
|
|
674
|
+
}
|
|
675
|
+
function renderMsg(m) {
|
|
676
|
+
var role = m.role || "msg";
|
|
677
|
+
var body = (m.content !== undefined) ? renderContent(m.content) : renderKv(m);
|
|
678
|
+
return '<div class="msg"><div class="msg-role role-' + esc(role) + '">' + esc(role) + '</div><div class="msg-content">' + body + "</div></div>";
|
|
679
|
+
}
|
|
680
|
+
function renderMessages(arr) {
|
|
681
|
+
var inner = '<div class="messages">' + arr.map(renderMsg).join("") + "</div>";
|
|
682
|
+
// Short threads render inline; a long history (10-15+ messages) collapses
|
|
683
|
+
// behind a <details> so it doesn't blow up the detail pane — the summary
|
|
684
|
+
// shows the count + a preview of the latest message; click to expand.
|
|
685
|
+
if (arr.length <= 6) return inner;
|
|
686
|
+
var last = arr[arr.length - 1] || {};
|
|
687
|
+
var preview = (last.role ? last.role + ": " : "") + previewText(last.content);
|
|
688
|
+
return '<details class="msg-collapse"><summary><span class="msg-count">' + arr.length
|
|
689
|
+
+ ' messages</span> <span class="dim">' + esc(preview) + "</span></summary>" + inner + "</details>";
|
|
690
|
+
}
|
|
691
|
+
function smartValue(v) {
|
|
692
|
+
if (v === null || v === undefined) return '<span class="dim">—</span>';
|
|
693
|
+
if (typeof v === "string") {
|
|
694
|
+
var t = v.trim();
|
|
695
|
+
if (t.charAt(0) === "{" || t.charAt(0) === "[") { try { return smartValue(JSON.parse(t)); } catch (e) {} }
|
|
696
|
+
return mdToHtml(v);
|
|
697
|
+
}
|
|
698
|
+
if (isMessageArray(v)) return renderMessages(v);
|
|
699
|
+
if (Array.isArray(v)) {
|
|
700
|
+
return '<div class="kv">' + v.map(function (item, i) {
|
|
701
|
+
var vs = (item && typeof item === "object") ? renderKv(item) : esc(String(item));
|
|
702
|
+
return '<div class="kv-row"><span class="kv-k">' + i + '</span><span class="kv-v">' + vs + "</span></div>";
|
|
703
|
+
}).join("") + "</div>";
|
|
704
|
+
}
|
|
705
|
+
if (typeof v === "object") return renderKv(v);
|
|
706
|
+
return esc(String(v));
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
function renderStats(a) {
|
|
710
|
+
var cost = a.cost ? (((a.cost.input || 0) + (a.cost.output || 0) + (a.cost.cachedInput || 0) + (a.cost.cachedOutput || 0)).toFixed(4)) : "—";
|
|
711
|
+
var u = a.usage || {};
|
|
712
|
+
var cells = [
|
|
713
|
+
["traces", num(a.traces), null],
|
|
714
|
+
["completed", num(a.completed), null],
|
|
715
|
+
["failed", num(a.failed), null],
|
|
716
|
+
["cancelled", num(a.cancelled), null],
|
|
717
|
+
["↓ tokens in", num(u.input), "var(--tok-in)"],
|
|
718
|
+
["↑ tokens out", num(u.output), "var(--tok-out)"],
|
|
719
|
+
["tokens total", num(u.total), "var(--tok-total)"],
|
|
720
|
+
["cost (usd)", cost, null]
|
|
721
|
+
];
|
|
722
|
+
document.getElementById("stats").innerHTML = cells.map(function (c) {
|
|
723
|
+
var st = c[2] ? ' style="color:' + c[2] + '"' : "";
|
|
724
|
+
return '<div class="stat"><div class="label"' + st + ">" + c[0] + '</div><div class="value"' + st + ">" + esc(c[1]) + "</div></div>";
|
|
725
|
+
}).join("");
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
// Per-row heat accent: tint the left edge by the trace's own cost
|
|
729
|
+
// relative to the most expensive trace currently in the (filtered) list.
|
|
730
|
+
function heatStyle(intensity) {
|
|
731
|
+
if (intensity <= 0) return "";
|
|
732
|
+
var op = (0.12 + intensity * 0.88).toFixed(3);
|
|
733
|
+
return ' style="--heat-op:' + op + '"';
|
|
734
|
+
}
|
|
735
|
+
function heatBar(intensity) {
|
|
736
|
+
if (intensity <= 0) return "";
|
|
737
|
+
var op = (0.12 + intensity * 0.88).toFixed(3);
|
|
738
|
+
return '<span class="heat" style="opacity:' + op + '" title="relative cost"></span>';
|
|
739
|
+
}
|
|
740
|
+
function renderRow(t, maxTraceCost) {
|
|
741
|
+
var sel = t.traceId === state.selectedId ? " selected" : "";
|
|
742
|
+
var intensity = heatIntensity(traceCost(t), maxTraceCost);
|
|
743
|
+
var pk = tracePromptKey(t);
|
|
744
|
+
return '<div class="trace-row' + sel + '" data-id="' + esc(t.traceId) + '">'
|
|
745
|
+
+ heatBar(intensity)
|
|
746
|
+
+ typeLabel(t.root.type)
|
|
747
|
+
+ '<span class="badge ' + statusClass(t.root.status) + '">' + esc(statusText(t.root.status)) + "</span>"
|
|
748
|
+
+ '<span class="rname">' + esc(t.root.name) + "</span>"
|
|
749
|
+
+ (pk ? '<span class="rprompt" title="prompt version">' + esc(pk) + "</span>" : "")
|
|
750
|
+
+ (t.sessionId ? '<span class="dim">' + esc(t.sessionId) + "</span>" : "")
|
|
751
|
+
+ '<span class="rright">' + tokens(t.usage) + '<span class="dim">· ' + dur(t.duration) + "</span></span>"
|
|
752
|
+
+ '<i class="chev">›</i>'
|
|
753
|
+
+ "</div>";
|
|
754
|
+
}
|
|
755
|
+
function maxTraceCostOf(list) {
|
|
756
|
+
var max = 0;
|
|
757
|
+
for (var i = 0; i < list.length; i++) { var c = traceCost(list[i]); if (c > max) max = c; }
|
|
758
|
+
return max;
|
|
759
|
+
}
|
|
760
|
+
// Render grouped buckets. "groups" is the normalized list each group-by
|
|
761
|
+
// dimension produces — a groupKey + its traces. Shared by session, prompt,
|
|
762
|
+
// and type. Optional "labelFn" maps the raw groupKey to a display label and
|
|
763
|
+
// switches the header to the compact "Label (N)" form (used by type, whose
|
|
764
|
+
// keys are friendly enums); session/prompt omit it and keep their raw id
|
|
765
|
+
// plus the right-aligned "N trace(s)" count. data-group stays the RAW key
|
|
766
|
+
// so collapse state keys consistently regardless of the display label.
|
|
767
|
+
function renderGroups(groups, maxTraceCost, labelFn) {
|
|
768
|
+
return groups.map(function (g) {
|
|
769
|
+
var collapsed = !!state.collapsedGroups[g.groupKey];
|
|
770
|
+
var idAndCount = labelFn
|
|
771
|
+
? '<span class="sgroup-id">' + esc(labelFn(g.groupKey)) + " (" + g.traces.length + ")</span>"
|
|
772
|
+
: '<span class="sgroup-id">' + esc(g.groupKey) + "</span>"
|
|
773
|
+
+ '<span class="sgroup-count">' + g.traces.length + " trace(s)</span>";
|
|
774
|
+
var head = '<div class="sgroup-head" data-group="' + esc(g.groupKey) + '">'
|
|
775
|
+
+ '<span class="sgroup-tw">' + (collapsed ? "▸" : "▾") + "</span>"
|
|
776
|
+
+ idAndCount + "</div>";
|
|
777
|
+
var body = collapsed ? "" : '<div class="sgroup-body">'
|
|
778
|
+
+ g.traces.map(function (t) { return renderRow(t, maxTraceCost); }).join("") + "</div>";
|
|
779
|
+
return '<div class="sgroup">' + head + body + "</div>";
|
|
780
|
+
}).join("");
|
|
781
|
+
}
|
|
782
|
+
// Normalize a session group ({sessionId,…}) to the shared {groupKey,…} shape.
|
|
783
|
+
function sessionGroups(list) {
|
|
784
|
+
return groupBySession(list).map(function (g) { return { groupKey: g.sessionId, traces: g.traces }; });
|
|
785
|
+
}
|
|
786
|
+
function renderList() {
|
|
787
|
+
var list = filteredTraces();
|
|
788
|
+
// Keep the per-type stats panel in sync — runs on every poll + filter
|
|
789
|
+
// change, before the empty-state early return below.
|
|
790
|
+
renderStatsPanel();
|
|
791
|
+
var host = document.getElementById("traces");
|
|
792
|
+
if (!list.length) {
|
|
793
|
+
host.innerHTML = state.traces.length
|
|
794
|
+
? '<div class="empty">No traces match the current filters.</div>'
|
|
795
|
+
: '<div class="empty">No traces yet. Run an observed flow and they will appear here.</div>';
|
|
796
|
+
return;
|
|
797
|
+
}
|
|
798
|
+
var maxTraceCost = maxTraceCostOf(list);
|
|
799
|
+
// One grouping dimension renders at a time. The toggles are kept mutually
|
|
800
|
+
// exclusive in their change handlers, so this precedence chain (most
|
|
801
|
+
// specific → coarsest: prompt → session → type) only ever matches one.
|
|
802
|
+
var html;
|
|
803
|
+
if (state.groupByPrompt) html = renderGroups(groupByPrompt(list), maxTraceCost);
|
|
804
|
+
else if (state.groupBySession) html = renderGroups(sessionGroups(list), maxTraceCost);
|
|
805
|
+
else if (state.groupByType) html = renderGroups(typeGroups(list), maxTraceCost, typeText);
|
|
806
|
+
else html = list.map(function (t) { return renderRow(t, maxTraceCost); }).join("");
|
|
807
|
+
host.innerHTML = html;
|
|
808
|
+
document.getElementById("meta").textContent = list.length + " of " + state.traces.length + " trace(s) · live";
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
// --- Filter UI rendering ---------------------------------------------
|
|
812
|
+
function renderChips() {
|
|
813
|
+
var f = state.filter;
|
|
814
|
+
document.getElementById("status-chips").innerHTML =
|
|
815
|
+
'<span class="chip-group"><span class="gl">status</span>'
|
|
816
|
+
+ STATUS_FILTERS.map(function (s) {
|
|
817
|
+
return '<button type="button" class="chip' + (f.statuses[s] ? " active" : "") + '" data-status="' + esc(s) + '">' + esc(statusText(s)) + "</button>";
|
|
818
|
+
}).join("")
|
|
819
|
+
+ '<button type="button" class="chip' + (f.errorsOnly ? " active" : "") + '" data-errors="1" title="Show only failed / cancelled traces">Errors only</button>'
|
|
820
|
+
+ "</span>";
|
|
821
|
+
var types = presentTypes();
|
|
822
|
+
document.getElementById("type-chips").innerHTML = types.length
|
|
823
|
+
? '<span class="chip-group"><span class="gl">type</span>'
|
|
824
|
+
+ types.map(function (ty) {
|
|
825
|
+
return '<button type="button" class="chip' + (f.types[ty] ? " active" : "") + '" data-type="' + esc(ty) + '">' + esc(typeText(ty)) + "</button>";
|
|
826
|
+
}).join("") + "</span>"
|
|
827
|
+
: "";
|
|
828
|
+
var sessions = presentSessions();
|
|
829
|
+
document.getElementById("session-chips").innerHTML = sessions.length
|
|
830
|
+
? '<span class="chip-group"><span class="gl">session</span>'
|
|
831
|
+
+ sessions.map(function (s) {
|
|
832
|
+
return '<button type="button" class="chip' + (f.sessionId === s ? " active" : "") + '" data-session="' + esc(s) + '">' + esc(s) + "</button>";
|
|
833
|
+
}).join("") + "</span>"
|
|
834
|
+
: "";
|
|
835
|
+
// Prompt-version filter chips — one per distinct name@version seen.
|
|
836
|
+
// Hidden entirely until a named-prompt run shows up, so the toolbar stays
|
|
837
|
+
// clean for projects that don't use the ai.prompts registry.
|
|
838
|
+
var prompts = presentPrompts();
|
|
839
|
+
document.getElementById("prompt-chips").innerHTML = prompts.length
|
|
840
|
+
? '<span class="chip-group"><span class="gl">prompt</span>'
|
|
841
|
+
+ prompts.map(function (p) {
|
|
842
|
+
return '<button type="button" class="chip' + (f.promptKey === p ? " active" : "") + '" data-prompt="' + esc(p) + '">' + esc(p) + "</button>";
|
|
843
|
+
}).join("") + "</span>"
|
|
844
|
+
: "";
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
// Heatmap denominator for the currently rendered trace tree. Set by
|
|
848
|
+
// renderDrawer before each renderTree pass so node accents are scaled
|
|
849
|
+
// against the most expensive node in this trace.
|
|
850
|
+
var currentTreeMax = 0;
|
|
851
|
+
function renderTree(span) {
|
|
852
|
+
var hasKids = span.children && span.children.length;
|
|
853
|
+
var collapsed = !!state.collapsed[span.spanId];
|
|
854
|
+
var sel = span.spanId === state.selectedSpanId ? " selected" : "";
|
|
855
|
+
var tw = hasKids ? (collapsed ? "▸" : "▾") : "·";
|
|
856
|
+
var node = '<div class="tnode' + sel + '" data-span="' + esc(span.spanId) + '">'
|
|
857
|
+
+ heatBar(heatIntensity(rollupCost(span), currentTreeMax))
|
|
858
|
+
+ '<span class="twisty"' + (hasKids ? ' data-toggle="' + esc(span.spanId) + '"' : "") + ">" + tw + "</span>"
|
|
859
|
+
+ typeLabel(span.type)
|
|
860
|
+
+ '<span class="tname">' + esc(span.name) + "</span>"
|
|
861
|
+
+ statusDot(span.status)
|
|
862
|
+
+ '<span class="tmeta">' + dur(span.duration) + "</span>"
|
|
863
|
+
+ "</div>";
|
|
864
|
+
var kids = (hasKids && !collapsed) ? '<div class="tkids">' + span.children.map(renderTree).join("") + "</div>" : "";
|
|
865
|
+
return node + kids;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
// --- Timeline / waterfall (Gantt) ------------------------------------
|
|
869
|
+
// Flatten the span tree to a depth-first ordered list, each entry
|
|
870
|
+
// carrying its offset (ms from root start) + duration, so we can lay
|
|
871
|
+
// out concurrency without re-walking. parseTs tolerates a missing/bad
|
|
872
|
+
// startedAt by falling back to 0 so a bad clock never NaNs the bars.
|
|
873
|
+
function parseTs(s) { var n = Date.parse(s); return isNaN(n) ? 0 : n; }
|
|
874
|
+
// Render an ISO timestamp for the detail drawer as a readable, locale-
|
|
875
|
+
// unambiguous local time — "28 Jun 2026 03:16 PM" (named month so there is
|
|
876
|
+
// no M/D vs D/M confusion; minute precision). Falls back to the raw string
|
|
877
|
+
// on a bad clock.
|
|
878
|
+
var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
879
|
+
function pad2(n) { return (n < 10 ? "0" : "") + n; }
|
|
880
|
+
function fmtTs(iso) {
|
|
881
|
+
if (!iso) return "—";
|
|
882
|
+
var d = new Date(iso);
|
|
883
|
+
if (isNaN(d.getTime())) return String(iso);
|
|
884
|
+
var h = d.getHours();
|
|
885
|
+
var ampm = h >= 12 ? "PM" : "AM";
|
|
886
|
+
var h12 = h % 12;
|
|
887
|
+
if (h12 === 0) h12 = 12;
|
|
888
|
+
return d.getDate() + " " + MONTHS[d.getMonth()] + " " + d.getFullYear()
|
|
889
|
+
+ " " + pad2(h12) + ":" + pad2(d.getMinutes()) + " " + ampm;
|
|
890
|
+
}
|
|
891
|
+
function flattenSpans(root) {
|
|
892
|
+
var base = parseTs(root.startedAt);
|
|
893
|
+
var rows = [];
|
|
894
|
+
(function walk(span, depth) {
|
|
895
|
+
var start = parseTs(span.startedAt) - base;
|
|
896
|
+
if (start < 0) start = 0;
|
|
897
|
+
var d = (span.duration != null) ? span.duration : 0;
|
|
898
|
+
rows.push({ span: span, depth: depth, offset: start, duration: d, end: start + d });
|
|
899
|
+
(span.children || []).forEach(function (c) { walk(c, depth + 1); });
|
|
900
|
+
})(root, 0);
|
|
901
|
+
return rows;
|
|
902
|
+
}
|
|
903
|
+
// Critical path: from the root, repeatedly step into the child whose
|
|
904
|
+
// end time is latest (the one that pushed the parent's finish). Marks
|
|
905
|
+
// the spans that determine total wall-clock time.
|
|
906
|
+
function criticalPath(root) {
|
|
907
|
+
var crit = {};
|
|
908
|
+
(function walk(span) {
|
|
909
|
+
crit[span.spanId] = 1;
|
|
910
|
+
var kids = span.children || [];
|
|
911
|
+
if (!kids.length) return;
|
|
912
|
+
var pick = null, pe = -1;
|
|
913
|
+
for (var i = 0; i < kids.length; i++) {
|
|
914
|
+
var e = parseTs(kids[i].startedAt) + ((kids[i].duration != null) ? kids[i].duration : 0);
|
|
915
|
+
if (e > pe) { pe = e; pick = kids[i]; }
|
|
916
|
+
}
|
|
917
|
+
if (pick) walk(pick);
|
|
918
|
+
})(root);
|
|
919
|
+
return crit;
|
|
920
|
+
}
|
|
921
|
+
function renderGantt(root) {
|
|
922
|
+
var rows = flattenSpans(root);
|
|
923
|
+
var span0 = rows.length ? rows[0] : null;
|
|
924
|
+
var total = 0;
|
|
925
|
+
rows.forEach(function (r) { if (r.end > total) total = r.end; });
|
|
926
|
+
if (total <= 0) total = (span0 && span0.duration) || 1;
|
|
927
|
+
var crit = criticalPath(root);
|
|
928
|
+
var body = rows.map(function (r) {
|
|
929
|
+
var leftPct = (r.offset / total) * 100;
|
|
930
|
+
var widthPct = Math.max((r.duration / total) * 100, 0.6);
|
|
931
|
+
var sel = r.span.spanId === state.selectedSpanId ? " selected" : "";
|
|
932
|
+
var isCrit = crit[r.span.spanId] ? " crit" : "";
|
|
933
|
+
var barClass = "gbar bar-" + statusClass(r.span.status) + (isCrit ? " crit" : "");
|
|
934
|
+
var pad = "padding-left:" + (r.depth * 10) + "px";
|
|
935
|
+
return '<div class="grow' + sel + '" data-span="' + esc(r.span.spanId) + '">'
|
|
936
|
+
+ '<span class="glabel" style="' + pad + '" title="' + esc(r.span.name) + '">' + esc(r.span.name) + "</span>"
|
|
937
|
+
+ '<span class="gtrack"><span class="' + barClass + '" style="left:' + leftPct.toFixed(2) + "%;width:" + widthPct.toFixed(2) + '%"></span></span>'
|
|
938
|
+
+ '<span class="gdur">' + dur(r.duration) + "</span>"
|
|
939
|
+
+ "</div>";
|
|
940
|
+
}).join("");
|
|
941
|
+
var legend = '<div class="gantt-legend">'
|
|
942
|
+
+ '<span class="ck"><span class="sw" style="background:var(--fail)"></span> critical path</span>'
|
|
943
|
+
+ '<span class="ck"><span class="sw" style="background:var(--ty-agent)"></span> span (offset + duration)</span>'
|
|
944
|
+
+ "</div>";
|
|
945
|
+
return '<div class="gantt">' + (body || '<div class="dim">No spans.</div>') + legend + "</div>";
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
// The name@version of the named prompt this span's run resolved, read
|
|
949
|
+
// from the collector's prompt-version-linkage attributes. Returns null when
|
|
950
|
+
// the run carried no named prompt. Mirrors tracePromptKey in trace-filter.ts.
|
|
951
|
+
function spanPromptKey(span) {
|
|
952
|
+
var a = span && span.attributes;
|
|
953
|
+
if (!a || typeof a !== "object") return null;
|
|
954
|
+
var name = a["agent.promptName"];
|
|
955
|
+
if (typeof name !== "string" || !name.length) return null;
|
|
956
|
+
var ver = a["agent.promptVersion"];
|
|
957
|
+
var vl = (typeof ver === "string" && ver.length) ? ver : "1";
|
|
958
|
+
return name + "@" + vl;
|
|
959
|
+
}
|
|
960
|
+
function tracePromptKey(t) { return spanPromptKey(t.root); }
|
|
961
|
+
|
|
962
|
+
// Humanize a metadata key for display: split dot.notation + camelCase,
|
|
963
|
+
// Title-case each word, upcase "id". e.g. "supervisor.terminatedBy" →
|
|
964
|
+
// "Supervisor Terminated By", "span id" → "Span ID", "agent.trips" →
|
|
965
|
+
// "Agent Trips". Underlying attribute keys are untouched.
|
|
966
|
+
// NB: this whole script is a template literal — regex backslash classes
|
|
967
|
+
// MUST be double-escaped (\\s, not \s) or "\\s" collapses to a literal "s".
|
|
968
|
+
function humanizeKey(key) {
|
|
969
|
+
return String(key).split(/[.\\s]+/).map(function (seg) {
|
|
970
|
+
return seg.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/\\s+/).map(function (w) {
|
|
971
|
+
if (!w) return w;
|
|
972
|
+
if (w.toLowerCase() === "id") return "ID";
|
|
973
|
+
return w.charAt(0).toUpperCase() + w.slice(1);
|
|
974
|
+
}).join(" ");
|
|
975
|
+
}).join(" ");
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
function renderMeta(span, trace) {
|
|
979
|
+
var rows = [];
|
|
980
|
+
// Absolute wall-clock span — the head shows only the elapsed duration, so
|
|
981
|
+
// surface when this node actually started/ended for log correlation.
|
|
982
|
+
rows.push(["started", fmtTs(span.startedAt)]);
|
|
983
|
+
rows.push(["ended", fmtTs(span.endedAt)]);
|
|
984
|
+
var sid = span.sessionId || trace.sessionId;
|
|
985
|
+
if (sid) rows.push(["session", sid]);
|
|
986
|
+
// Prompt-version linkage: surface the resolved named prompt as one clean
|
|
987
|
+
// name@version row right under session, so the panel reads it as a
|
|
988
|
+
// first-class dimension rather than two raw attribute keys.
|
|
989
|
+
var pk = spanPromptKey(span);
|
|
990
|
+
if (pk) rows.push(["prompt", pk]);
|
|
991
|
+
if (span.version) rows.push(["version", span.version]);
|
|
992
|
+
rows.push(["span id", span.spanId]);
|
|
993
|
+
if (span.parentSpanId) rows.push(["parent", span.parentSpanId]);
|
|
994
|
+
rows.push(["trace id", span.traceId || trace.traceId]);
|
|
995
|
+
var attrs = span.attributes;
|
|
996
|
+
// Skip the two raw prompt keys — already shown as the clean prompt row.
|
|
997
|
+
if (attrs && typeof attrs === "object") Object.keys(attrs).forEach(function (k) {
|
|
998
|
+
if (k === "agent.promptName" || k === "agent.promptVersion") return;
|
|
999
|
+
rows.push([k, attrs[k]]);
|
|
1000
|
+
});
|
|
1001
|
+
var kv = rows.map(function (r) {
|
|
1002
|
+
var v = r[1];
|
|
1003
|
+
var vs = (v && typeof v === "object") ? '<pre class="mini">' + esc(fmt(v)) + "</pre>" : esc(String(v));
|
|
1004
|
+
return '<div class="kv-row"><span class="kv-k">' + esc(humanizeKey(r[0])) + '</span><span class="kv-v">' + vs + "</span></div>";
|
|
1005
|
+
}).join("");
|
|
1006
|
+
return '<div class="meta-sec"><div class="meta-title">metadata</div><div class="kv">' + kv + "</div></div>";
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
function renderDetail(span, trace) {
|
|
1010
|
+
var path = findPath(trace.root, span.spanId) || [span];
|
|
1011
|
+
var crumb = path.map(function (p, i) { return (i ? '<span class="sep"> › </span>' : "") + "<span>" + esc(p.name) + "</span>"; }).join("");
|
|
1012
|
+
var io = "";
|
|
1013
|
+
if (span.input !== undefined) io += '<div class="piol" style="color:var(--tok-in)">input</div><div class="io-body">' + smartValue(span.input) + "</div>";
|
|
1014
|
+
if (span.output !== undefined) io += '<div class="piol" style="color:var(--tok-out)">output</div><div class="io-body">' + smartValue(span.output) + "</div>";
|
|
1015
|
+
if (span.error) io += '<div class="piol" style="color:var(--fail)">error</div><div class="io-body">' + smartValue(span.error) + "</div>";
|
|
1016
|
+
|
|
1017
|
+
// Tokens + cost line — omitted entirely when the node has neither
|
|
1018
|
+
// (e.g. a free tool with zero usage), so the panel stays uncluttered.
|
|
1019
|
+
var tk = tokens(span.usage);
|
|
1020
|
+
var c = rollupCost(span);
|
|
1021
|
+
var metaLine = (tk || c > 0)
|
|
1022
|
+
? '<div style="margin-bottom:4px">' + tk + (c > 0 ? '<span class="cost">' + (tk ? " · " : "") + money(c) + "</span>" : "") + "</div>"
|
|
1023
|
+
: "";
|
|
1024
|
+
|
|
1025
|
+
return '<div class="crumb">' + crumb + "</div>"
|
|
1026
|
+
+ '<div class="dhead-row">' + typeLabel(span.type) + '<span style="font-weight:600">' + esc(span.name) + "</span>"
|
|
1027
|
+
+ '<span class="badge ' + statusClass(span.status) + '">' + esc(statusText(span.status)) + "</span>"
|
|
1028
|
+
+ '<span class="dim">· ' + dur(span.duration) + "</span></div>"
|
|
1029
|
+
+ metaLine
|
|
1030
|
+
+ io
|
|
1031
|
+
+ renderMeta(span, trace);
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
function headHtml(t) {
|
|
1035
|
+
var cost = traceCost(t);
|
|
1036
|
+
return typeLabel(t.root.type)
|
|
1037
|
+
+ '<span class="badge ' + statusClass(t.root.status) + '">' + esc(statusText(t.root.status)) + "</span>"
|
|
1038
|
+
+ '<span style="font-weight:600">' + esc(t.root.name) + "</span>"
|
|
1039
|
+
+ '<span class="dim">· ' + dur(t.duration) + "</span>"
|
|
1040
|
+
+ tokens(t.usage)
|
|
1041
|
+
+ (cost > 0 ? '<span class="cost">· ' + money(cost) + "</span>" : "")
|
|
1042
|
+
+ '<button class="drawer-close" type="button" title="Close (Esc)">✕ Close</button>';
|
|
1043
|
+
}
|
|
1044
|
+
|
|
1045
|
+
function viewSwitcher() {
|
|
1046
|
+
var tree = state.view === "tree" ? " active" : "";
|
|
1047
|
+
var tl = state.view === "timeline" ? " active" : "";
|
|
1048
|
+
return '<div class="dview" id="drawer-view">'
|
|
1049
|
+
+ '<button type="button" class="' + tree.trim() + '" data-view="tree">Tree</button>'
|
|
1050
|
+
+ '<button type="button" class="' + tl.trim() + '" data-view="timeline">Timeline</button>'
|
|
1051
|
+
+ '<span class="legend" title="Node colour = relative cost"><span>cost</span><span class="grad"></span></span>'
|
|
1052
|
+
+ "</div>";
|
|
1053
|
+
}
|
|
1054
|
+
function leftPaneHtml(t) {
|
|
1055
|
+
if (state.view === "timeline") return renderGantt(t.root);
|
|
1056
|
+
currentTreeMax = maxNodeCost(t.root);
|
|
1057
|
+
return renderTree(t.root);
|
|
1058
|
+
}
|
|
1059
|
+
function renderDrawer(t) {
|
|
1060
|
+
document.getElementById("drawer-head").innerHTML = headHtml(t);
|
|
1061
|
+
var sel = findSpan(t.root, state.selectedSpanId) || t.root;
|
|
1062
|
+
document.getElementById("drawer-body").innerHTML =
|
|
1063
|
+
'<div class="dsplit"><div class="dtree" id="drawer-tree">' + viewSwitcher() + leftPaneHtml(t) + "</div>"
|
|
1064
|
+
+ '<div class="ddetail" id="drawer-detail">' + renderDetail(sel, t) + "</div></div>";
|
|
1065
|
+
}
|
|
1066
|
+
// Re-render only the left pane (after a view switch) without disturbing
|
|
1067
|
+
// the detail panel or scroll position of the detail side.
|
|
1068
|
+
function renderLeftPane() {
|
|
1069
|
+
var t = findTrace(state.selectedId);
|
|
1070
|
+
if (!t) return;
|
|
1071
|
+
document.getElementById("drawer-tree").innerHTML = viewSwitcher() + leftPaneHtml(t);
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
function selectSpan(id) {
|
|
1075
|
+
state.selectedSpanId = id;
|
|
1076
|
+
var t = findTrace(state.selectedId);
|
|
1077
|
+
if (!t) return;
|
|
1078
|
+
document.getElementById("drawer-detail").innerHTML = renderDetail(findSpan(t.root, id) || t.root, t);
|
|
1079
|
+
// Highlight in whichever left pane is active (tree nodes or Gantt rows).
|
|
1080
|
+
var nodes = document.querySelectorAll(".tnode[data-span], .grow[data-span]");
|
|
1081
|
+
for (var i = 0; i < nodes.length; i++) {
|
|
1082
|
+
if (nodes[i].getAttribute("data-span") === id) nodes[i].classList.add("selected");
|
|
1083
|
+
else nodes[i].classList.remove("selected");
|
|
1084
|
+
}
|
|
1085
|
+
writeHash();
|
|
1086
|
+
}
|
|
1087
|
+
function toggleSpan(id) {
|
|
1088
|
+
state.collapsed[id] = !state.collapsed[id];
|
|
1089
|
+
var t = findTrace(state.selectedId);
|
|
1090
|
+
if (t) renderLeftPane();
|
|
1091
|
+
}
|
|
1092
|
+
function setView(v) {
|
|
1093
|
+
if (state.view === v) return;
|
|
1094
|
+
state.view = v;
|
|
1095
|
+
renderLeftPane();
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
function openTrace(id, spanId) {
|
|
1099
|
+
state.selectedId = id;
|
|
1100
|
+
var t = findTrace(id);
|
|
1101
|
+
if (t) {
|
|
1102
|
+
state.selectedSpanId = (spanId && findSpan(t.root, spanId)) ? spanId : t.root.spanId;
|
|
1103
|
+
state.collapsed = {};
|
|
1104
|
+
renderDrawer(t);
|
|
1105
|
+
state.sig = traceSig(t);
|
|
1106
|
+
}
|
|
1107
|
+
document.getElementById("drawer").classList.add("open");
|
|
1108
|
+
document.getElementById("drawer").setAttribute("aria-hidden", "false");
|
|
1109
|
+
document.getElementById("backdrop").classList.add("open");
|
|
1110
|
+
markSelectedRow();
|
|
1111
|
+
writeHash();
|
|
1112
|
+
}
|
|
1113
|
+
function closeDrawer() {
|
|
1114
|
+
state.selectedId = null; state.selectedSpanId = null; state.sig = null;
|
|
1115
|
+
document.getElementById("drawer").classList.remove("open");
|
|
1116
|
+
document.getElementById("drawer").setAttribute("aria-hidden", "true");
|
|
1117
|
+
document.getElementById("backdrop").classList.remove("open");
|
|
1118
|
+
markSelectedRow();
|
|
1119
|
+
writeHash();
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
// --- Deep-links: reflect the open trace + span in the URL hash -------
|
|
1123
|
+
// #trace=<id>&span=<id>. Written on open/close/select; read on load and
|
|
1124
|
+
// on manual hash edits (back/forward). A guard flag stops writeHash from
|
|
1125
|
+
// re-triggering our own hashchange handler in a loop.
|
|
1126
|
+
var suppressHash = false;
|
|
1127
|
+
function writeHash() {
|
|
1128
|
+
var h = "";
|
|
1129
|
+
if (state.selectedId) {
|
|
1130
|
+
h = "#trace=" + encodeURIComponent(state.selectedId);
|
|
1131
|
+
if (state.selectedSpanId && state.selectedSpanId !== state.selectedId) {
|
|
1132
|
+
h += "&span=" + encodeURIComponent(state.selectedSpanId);
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
suppressHash = true;
|
|
1136
|
+
try {
|
|
1137
|
+
if (history && history.replaceState) history.replaceState(null, "", h || (location.pathname + location.search));
|
|
1138
|
+
else location.hash = h;
|
|
1139
|
+
} catch (e) { location.hash = h; }
|
|
1140
|
+
suppressHash = false;
|
|
1141
|
+
}
|
|
1142
|
+
function readHash() {
|
|
1143
|
+
var raw = (location.hash || "").replace(/^#/, "");
|
|
1144
|
+
var out = { trace: null, span: null };
|
|
1145
|
+
raw.split("&").forEach(function (kv) {
|
|
1146
|
+
var i = kv.indexOf("=");
|
|
1147
|
+
if (i === -1) return;
|
|
1148
|
+
var k = kv.slice(0, i), v = decodeURIComponent(kv.slice(i + 1));
|
|
1149
|
+
if (k === "trace") out.trace = v;
|
|
1150
|
+
else if (k === "span") out.span = v;
|
|
1151
|
+
});
|
|
1152
|
+
return out;
|
|
1153
|
+
}
|
|
1154
|
+
// Open whatever the hash points at, if that trace is loaded. Returns
|
|
1155
|
+
// true when it acted so the caller can mark the one-time load as done.
|
|
1156
|
+
function applyHash() {
|
|
1157
|
+
var h = readHash();
|
|
1158
|
+
if (!h.trace) {
|
|
1159
|
+
if (state.selectedId) closeDrawer();
|
|
1160
|
+
return true;
|
|
1161
|
+
}
|
|
1162
|
+
if (!findTrace(h.trace)) return false; // not polled yet — retry next poll
|
|
1163
|
+
openTrace(h.trace, h.span || undefined);
|
|
1164
|
+
return true;
|
|
1165
|
+
}
|
|
1166
|
+
function markSelectedRow() {
|
|
1167
|
+
var rows = document.querySelectorAll(".trace-row");
|
|
1168
|
+
for (var i = 0; i < rows.length; i++) {
|
|
1169
|
+
if (rows[i].getAttribute("data-id") === state.selectedId) rows[i].classList.add("selected");
|
|
1170
|
+
else rows[i].classList.remove("selected");
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
document.getElementById("traces").addEventListener("click", function (e) {
|
|
1175
|
+
var head = e.target.closest ? e.target.closest(".sgroup-head") : null;
|
|
1176
|
+
if (head) {
|
|
1177
|
+
var g = head.getAttribute("data-group");
|
|
1178
|
+
state.collapsedGroups[g] = !state.collapsedGroups[g];
|
|
1179
|
+
renderList();
|
|
1180
|
+
return;
|
|
1181
|
+
}
|
|
1182
|
+
var row = e.target.closest ? e.target.closest(".trace-row") : null;
|
|
1183
|
+
if (row) openTrace(row.getAttribute("data-id"));
|
|
1184
|
+
});
|
|
1185
|
+
document.getElementById("drawer-head").addEventListener("click", function (e) {
|
|
1186
|
+
if (e.target.closest && e.target.closest(".drawer-close")) closeDrawer();
|
|
1187
|
+
});
|
|
1188
|
+
document.getElementById("drawer-body").addEventListener("click", function (e) {
|
|
1189
|
+
var vb = e.target.closest ? e.target.closest("[data-view]") : null;
|
|
1190
|
+
if (vb) { setView(vb.getAttribute("data-view")); return; }
|
|
1191
|
+
var tog = e.target.closest ? e.target.closest("[data-toggle]") : null;
|
|
1192
|
+
if (tog) { toggleSpan(tog.getAttribute("data-toggle")); return; }
|
|
1193
|
+
var node = e.target.closest ? e.target.closest(".tnode[data-span], .grow[data-span]") : null;
|
|
1194
|
+
if (node) selectSpan(node.getAttribute("data-span"));
|
|
1195
|
+
});
|
|
1196
|
+
document.getElementById("backdrop").addEventListener("click", closeDrawer);
|
|
1197
|
+
document.addEventListener("keydown", function (e) { if (e.key === "Escape" || e.keyCode === 27) closeDrawer(); });
|
|
1198
|
+
|
|
1199
|
+
// --- Filter / toolbar wiring -----------------------------------------
|
|
1200
|
+
function toggleMapKey(map, key) { if (map[key]) delete map[key]; else map[key] = 1; }
|
|
1201
|
+
document.getElementById("status-chips").addEventListener("click", function (e) {
|
|
1202
|
+
if (!e.target.closest) return;
|
|
1203
|
+
// The "Errors only" shortcut chip lives in the status group now.
|
|
1204
|
+
if (e.target.closest("[data-errors]")) {
|
|
1205
|
+
state.filter.errorsOnly = !state.filter.errorsOnly;
|
|
1206
|
+
renderChips(); renderList();
|
|
1207
|
+
return;
|
|
1208
|
+
}
|
|
1209
|
+
var b = e.target.closest("[data-status]");
|
|
1210
|
+
if (!b) return;
|
|
1211
|
+
toggleMapKey(state.filter.statuses, b.getAttribute("data-status"));
|
|
1212
|
+
renderChips(); renderList();
|
|
1213
|
+
});
|
|
1214
|
+
document.getElementById("type-chips").addEventListener("click", function (e) {
|
|
1215
|
+
var b = e.target.closest ? e.target.closest("[data-type]") : null;
|
|
1216
|
+
if (!b) return;
|
|
1217
|
+
toggleMapKey(state.filter.types, b.getAttribute("data-type"));
|
|
1218
|
+
renderChips(); renderList();
|
|
1219
|
+
});
|
|
1220
|
+
document.getElementById("session-chips").addEventListener("click", function (e) {
|
|
1221
|
+
var b = e.target.closest ? e.target.closest("[data-session]") : null;
|
|
1222
|
+
if (!b) return;
|
|
1223
|
+
var s = b.getAttribute("data-session");
|
|
1224
|
+
state.filter.sessionId = (state.filter.sessionId === s) ? null : s;
|
|
1225
|
+
renderChips(); renderList();
|
|
1226
|
+
});
|
|
1227
|
+
document.getElementById("prompt-chips").addEventListener("click", function (e) {
|
|
1228
|
+
var b = e.target.closest ? e.target.closest("[data-prompt]") : null;
|
|
1229
|
+
if (!b) return;
|
|
1230
|
+
var p = b.getAttribute("data-prompt");
|
|
1231
|
+
state.filter.promptKey = (state.filter.promptKey === p) ? null : p;
|
|
1232
|
+
renderChips(); renderList();
|
|
1233
|
+
});
|
|
1234
|
+
document.getElementById("search").addEventListener("input", function (e) {
|
|
1235
|
+
state.filter.text = e.target.value || "";
|
|
1236
|
+
renderList();
|
|
1237
|
+
});
|
|
1238
|
+
// One mutually-exclusive grouping dimension, chosen from the Group dropdown.
|
|
1239
|
+
// "" = no grouping; renderList's precedence chain only ever matches one.
|
|
1240
|
+
// Switching dimensions drops stale collapsed-header keys.
|
|
1241
|
+
function setGrouping(dim) {
|
|
1242
|
+
state.groupBySession = dim === "session";
|
|
1243
|
+
state.groupByPrompt = dim === "prompt";
|
|
1244
|
+
state.groupByType = dim === "type";
|
|
1245
|
+
state.collapsedGroups = {};
|
|
1246
|
+
renderList();
|
|
1247
|
+
}
|
|
1248
|
+
document.getElementById("group-by").addEventListener("change", function (e) {
|
|
1249
|
+
setGrouping(e.target.value);
|
|
1250
|
+
});
|
|
1251
|
+
document.getElementById("show-stats").addEventListener("change", function (e) {
|
|
1252
|
+
state.showStats = !!e.target.checked;
|
|
1253
|
+
renderStatsPanel();
|
|
1254
|
+
});
|
|
1255
|
+
document.getElementById("clear-filters").addEventListener("click", function () {
|
|
1256
|
+
state.filter = { text: "", statuses: {}, types: {}, sessionId: null, promptKey: null, errorsOnly: false };
|
|
1257
|
+
document.getElementById("search").value = "";
|
|
1258
|
+
renderChips(); renderList();
|
|
1259
|
+
});
|
|
1260
|
+
|
|
1261
|
+
// Back/forward or a manual hash edit re-syncs the open trace/span.
|
|
1262
|
+
window.addEventListener("hashchange", function () {
|
|
1263
|
+
if (suppressHash) return;
|
|
1264
|
+
applyHash();
|
|
1265
|
+
});
|
|
1266
|
+
|
|
1267
|
+
var THEME_KEY = "panoptic-theme";
|
|
1268
|
+
var mql = window.matchMedia ? window.matchMedia("(prefers-color-scheme: light)") : null;
|
|
1269
|
+
function applyTheme(mode) {
|
|
1270
|
+
try { localStorage.setItem(THEME_KEY, mode); } catch (e) {}
|
|
1271
|
+
var light = mode === "light" || (mode === "system" && mql && mql.matches);
|
|
1272
|
+
document.documentElement.setAttribute("data-theme", light ? "light" : "dark");
|
|
1273
|
+
var btns = document.querySelectorAll("[data-theme-set]");
|
|
1274
|
+
for (var i = 0; i < btns.length; i++) btns[i].classList.toggle("active", btns[i].getAttribute("data-theme-set") === mode);
|
|
1275
|
+
}
|
|
1276
|
+
document.getElementById("theme").addEventListener("click", function (e) {
|
|
1277
|
+
var b = e.target.closest ? e.target.closest("[data-theme-set]") : null;
|
|
1278
|
+
if (b) applyTheme(b.getAttribute("data-theme-set"));
|
|
1279
|
+
});
|
|
1280
|
+
if (mql && mql.addEventListener) mql.addEventListener("change", function () {
|
|
1281
|
+
var cur = "system";
|
|
1282
|
+
try { cur = localStorage.getItem(THEME_KEY) || "system"; } catch (e) {}
|
|
1283
|
+
if (cur === "system") applyTheme("system");
|
|
1284
|
+
});
|
|
1285
|
+
var savedTheme = "system";
|
|
1286
|
+
try { savedTheme = localStorage.getItem(THEME_KEY) || "system"; } catch (e) {}
|
|
1287
|
+
applyTheme(savedTheme);
|
|
1288
|
+
|
|
1289
|
+
function poll() {
|
|
1290
|
+
Promise.all([
|
|
1291
|
+
fetch(API + "/aggregate").then(function (r) { return r.json(); }),
|
|
1292
|
+
fetch(API + "/traces").then(function (r) { return r.json(); })
|
|
1293
|
+
]).then(function (res) {
|
|
1294
|
+
renderStats(res[0]);
|
|
1295
|
+
state.traces = res[1] || [];
|
|
1296
|
+
document.getElementById("meta").textContent = state.traces.length + " trace(s) · live";
|
|
1297
|
+
renderChips();
|
|
1298
|
+
renderList();
|
|
1299
|
+
// Open whatever the URL hash deep-links to, once the target trace
|
|
1300
|
+
// has actually arrived in a poll (it may not be in the first batch).
|
|
1301
|
+
if (!state.hashApplied) {
|
|
1302
|
+
if (applyHash()) state.hashApplied = true;
|
|
1303
|
+
} else if (state.selectedId) {
|
|
1304
|
+
var t = findTrace(state.selectedId);
|
|
1305
|
+
if (t) { var sig = traceSig(t); if (sig !== state.sig) { renderDrawer(t); state.sig = sig; } }
|
|
1306
|
+
}
|
|
1307
|
+
}).catch(function (e) {
|
|
1308
|
+
document.getElementById("meta").textContent = "disconnected";
|
|
1309
|
+
});
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
// FOLLOW-UP: a live socket tail (SSE / WebSocket push) is out of scope
|
|
1313
|
+
// for this pass; the dashboard stays on the 2s JSON poll below. When
|
|
1314
|
+
// added, it should reuse renderList/renderDrawer and keep the poll as a
|
|
1315
|
+
// reconnect fallback.
|
|
1316
|
+
poll();
|
|
1317
|
+
setInterval(poll, 2000);
|
|
1318
|
+
})();
|
|
1319
|
+
<\/script>
|
|
1320
|
+
</body>
|
|
1321
|
+
</html>`;
|
|
1322
|
+
}
|
|
1323
|
+
/** Escape a string for safe interpolation into static HTML text. */
|
|
1324
|
+
function escapeHtml(value) {
|
|
1325
|
+
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
//#endregion
|
|
1329
|
+
export { dashboardHtml };
|
|
1330
|
+
//# sourceMappingURL=ui.html.mjs.map
|