@warlock.js/ai-panoptic 4.3.0 → 4.5.0

package/cjs/index.cjs

@@ -2,6 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 let _warlock_js_ai = require("@warlock.js/ai");
 let node_fs_promises = require("node:fs/promises");
 let node_path = require("node:path");
+let node_http = require("node:http");
 
 //#region ../@warlock.js/ai-panoptic/src/exporters/utils/walk-spans.ts
 /**
@@ -47,7 +48,7 @@ function normalizeError(error) {
 	if (error === void 0 || error === null) return;
 	if (typeof error !== "object") return {
 		type: "Error",
-		message: String(error)
+		message: (0, _warlock_js_ai.scrubSecrets)(String(error))
 	};
 	const candidate = error;
 	const type = pickString(candidate.code) ?? pickString(candidate.name) ?? "Error";
@@ -55,9 +56,10 @@ function normalizeError(error) {
 	const stack = pickString(candidate.stack);
 	const normalized = {
 		type,
-		message
+		message: (0, _warlock_js_ai.scrubSecrets)(message)
 	};
-	if (stack !== void 0) normalized.stack = stack;
+	if (stack !== void 0) normalized.stack = (0, _warlock_js_ai.scrubSecrets)(stack);
+	if (candidate.cause !== void 0 && candidate.cause !== null) normalized.cause = typeof candidate.cause === "object" ? (0, _warlock_js_ai.redact)(candidate.cause) : (0, _warlock_js_ai.scrubSecrets)(String(candidate.cause));
 	return normalized;
 }
 /**
@@ -104,6 +106,7 @@ function extractSpanAttributes(report) {
 			addWorkflowAttributes(attributes, extensions);
 			break;
 		case "supervisor":
+		case "team":
 			addSupervisorAttributes(attributes, extensions);
 			break;
 		case "orchestrator":
@@ -121,6 +124,8 @@ function addAgentAttributes(attributes, extensions) {
 	if (Array.isArray(extensions.trips)) attributes["agent.trips"] = extensions.trips.length;
 	if (extensions.model?.name !== void 0) attributes["agent.model.name"] = extensions.model.name;
 	if (extensions.model?.provider !== void 0) attributes["agent.model.provider"] = extensions.model.provider;
+	if (extensions.promptName !== void 0) attributes["agent.promptName"] = extensions.promptName;
+	if (extensions.promptVersion !== void 0) attributes["agent.promptVersion"] = extensions.promptVersion;
 }
 function addWorkflowAttributes(attributes, extensions) {
 	if (extensions.workflowName !== void 0) attributes["workflow.name"] = extensions.workflowName;
@@ -159,6 +164,12 @@ function addToolAttributes(attributes, extensions) {
 * identity, tool trip index) is routed into the optional `attributes`
 * bag via {@link extractSpanAttributes}.
 *
+* When {@link ContentCaptureOptions.captureContent} is set, the raw
+* prompt/response (agents) and args/result (tools) are additionally
+* copied onto `span.input` / `span.output` — off by default because
+* payloads are large and often sensitive. A {@link ContentRedactor} can
+* mask each value first.
+*
 * No external lookup is needed — a `BaseReport` already carries
 * everything a span requires, so a collector can flatten a tree without
 * consulting any other source.
@@ -167,7 +178,7 @@ function addToolAttributes(attributes, extensions) {
 * const root = reportToSpan(result.report);
 * console.log(root.spanId, root.traceId, root.children.length);
 */
-function reportToSpan(report) {
+function reportToSpan(report, options) {
 	const span = {
 		spanId: report.runId,
 		traceId: report.rootRunId,
@@ -178,7 +189,7 @@ function reportToSpan(report) {
 		endedAt: report.endedAt,
 		duration: report.duration,
 		usage: report.usage,
-		children: report.children.map(reportToSpan)
+		children: report.children.map((child) => reportToSpan(child, options))
 	};
 	if (report.parentRunId !== void 0) span.parentSpanId = report.parentRunId;
 	if (report.sessionId !== void 0) span.sessionId = report.sessionId;
@@ -187,8 +198,87 @@ function reportToSpan(report) {
 	if (error !== void 0) span.error = error;
 	const attributes = extractSpanAttributes(report);
 	if (attributes !== void 0) span.attributes = attributes;
+	if (options?.captureContent) captureContent(span, report, options);
 	return span;
 }
+/**
+* Copy the node's raw content onto `span.input` / `span.output`.
+*
+* - Tools carry the call arguments + return value directly on the report
+*   (`ToolCall.input` / `ToolCall.output`).
+* - Agents carry a `trips[]` history plus the resolved `systemPrompt`. The
+*   input is emitted as a `[system, user]` chat array — so backends like
+*   Langfuse render the full prompt as sent — or the bare user string when
+*   there's no system prompt. The output is the last NON-EMPTY trip
+*   `output` (the final response text); a failed / max-trips run can end on
+*   a trip whose `output` is `""` or tool-call-only, so we scan back for the
+*   last one that carried text. Intermediate trips store a `"[tool results]"`
+*   placeholder upstream.
+* - When {@link ContentCaptureOptions.fullHistory} is on AND the agent run
+*   opted into `captureMessages` (so the report carries a `messages`
+*   array), the *whole* `CapturedMessage[]` is emitted as `span.input`
+*   instead of the `[system, user]` first-trip array — every role, every
+*   trip. The output stays the last non-empty trip output. When `messages`
+*   is absent the branch falls back to today's first-trip logic, so a run
+*   that didn't opt in degrades gracefully.
+*
+* Each value is passed through the optional {@link ContentRedactor};
+* a redactor returning `undefined` drops the field. Under `fullHistory`
+* the redactor receives the full array as a single value.
+*/
+function captureContent(span, report, options) {
+	const node = report;
+	const redact = options.redactContent;
+	let input;
+	let output;
+	if (report.type === "tool") {
+		input = node.input;
+		output = node.output;
+	} else if (options.fullHistory && Array.isArray(node.messages) && node.messages.length > 0) {
+		input = node.messages;
+		output = Array.isArray(node.trips) ? lastNonEmptyOutput(node.trips) : void 0;
+	} else if (Array.isArray(node.trips) && node.trips.length > 0) {
+		const userInput = node.trips[0]?.input;
+		input = typeof node.systemPrompt === "string" && node.systemPrompt.length > 0 ? [{
+			role: "system",
+			content: node.systemPrompt
+		}, {
+			role: "user",
+			content: userInput
+		}] : userInput;
+		output = lastNonEmptyOutput(node.trips);
+	}
+	if (input !== void 0) {
+		const value = redact ? redact(input, {
+			name: span.name,
+			type: span.type,
+			field: "input"
+		}) : input;
+		if (value !== void 0) span.input = value;
+	}
+	if (output !== void 0) {
+		const value = redact ? redact(output, {
+			name: span.name,
+			type: span.type,
+			field: "output"
+		}) : output;
+		if (value !== void 0) span.output = value;
+	}
+}
+/**
+* The last trip output that actually carries text — the agent's final
+* response on the happy path. A failed or max-trips run can end on a trip
+* whose `output` is `""` or tool-call-only, so we scan backwards for the
+* last trip that produced text rather than blindly taking the final trip
+* (which would surface an empty string). Returns `undefined` when no trip
+* produced any output.
+*/
+function lastNonEmptyOutput(trips) {
+	for (let i = trips.length - 1; i >= 0; i -= 1) {
+		const out = trips[i]?.output;
+		if (typeof out === "string" ? out.length > 0 : out !== void 0) return out;
+	}
+}
 
 //#endregion
 //#region ../@warlock.js/ai-panoptic/src/collector/report-to-trace.ts
@@ -209,18 +299,21 @@ function reportToSpan(report) {
 * without dispatching to exporters.
 *
 * The optional `rootError` threads the failing run's envelope error
-* (`BaseResult.error`) onto the root span. The error lives on the result
-* envelope, never on the `BaseReport` tree, so without this a failed root
-* would export `status` with no error type/message. Applied only when the
-* root span carries none of its own; the subtree projection stays pure
-* (each child surfaces its own report-level error, if any).
+* (`BaseResult.error`) onto the root span — a fallback for callers that
+* hold the result envelope (the `attach`/middleware path). Root primitives
+* now also stamp their terminal error onto the report itself
+* (`BaseReport.error`), so the observe path — which delivers only the
+* report, never the envelope — still surfaces a failed root's error.
+* `rootError` is applied only when the projected root span carries none of
+* its own; the subtree projection stays pure (each child surfaces its own
+* report-level error, if any).
 *
 * @example
 * const trace = reportToTrace(result.report, result.error);
 * console.log(trace.traceId, trace.usage.total, trace.duration);
 */
-function reportToTrace(report, rootError) {
-	const root = reportToSpan(report);
+function reportToTrace(report, rootError, options) {
+	const root = reportToSpan(report, options);
 	if (root.error === void 0) {
 		const error = normalizeError(rootError);
 		if (error !== void 0) root.error = error;
@@ -254,18 +347,38 @@ function reportToTrace(report, rootError) {
 * into the originating run — `collect`, `flush`, and `shutdown` settle
 * every exporter independently (mirrors how the core event hooks
 * swallow consumer errors). One broken exporter can neither crash the
-* agent loop nor stop sibling exporters from receiving the trace.
+* agent loop nor stop sibling exporters from receiving the trace. The
+* failure is still **surfaced** — via the `onError` option, or a one-time
+* `console.warn` per exporter — so a misconfiguration (e.g. a missing
+* optional peer like `langfuse`) doesn't fail silently.
 */
 var Collector = class {
-	constructor() {
-		this.exporters = /* @__PURE__ */ new Map();
+	options;
+	/**
+	* Registered exporters in insertion order. A `Map` keyed by
+	* `ExporterContract.name` gives O(1) dedupe on `use` while preserving
+	* registration order for deterministic fan-out.
+	*/
+	exporters = /* @__PURE__ */ new Map();
+	/**
+	* Exporters already warned about on the default error path — so a
+	* persistent misconfiguration surfaces once, not on every trace.
+	*/
+	warnedExporters = /* @__PURE__ */ new Set();
+	/**
+	* Collector options: content capture threaded into every `toTrace`
+	* projection (`captureContent` populates span `input` / `output`), plus
+	* an optional `onError` for isolated exporter failures.
+	*/
+	constructor(options = {}) {
+		this.options = options;
 	}
 	use(exporter) {
 		if (!this.exporters.has(exporter.name)) this.exporters.set(exporter.name, exporter);
 		return this;
 	}
 	toTrace(report, rootError) {
-		return reportToTrace(report, rootError);
+		return reportToTrace(report, rootError, this.options);
 	}
 	async collect(report, rootError) {
 		const trace = this.toTrace(report, rootError);
@@ -302,9 +415,29 @@ var Collector = class {
 	* others — the contract's failure-isolation requirement.
 	*/
 	async settleAll(task) {
-		const runs = [...this.exporters.values()].map((exporter) => Promise.resolve().then(() => task(exporter)));
+		const runs = [...this.exporters.entries()].map(([name, exporter]) => Promise.resolve().then(() => task(exporter)).catch((error) => this.reportExporterError(name, error)));
 		await Promise.allSettled(runs);
 	}
+	/**
+	* Surface an isolated exporter failure. The originating run never sees it
+	* (the isolation guarantee holds), but a silent failure is the wrong
+	* default for a config error — e.g. a missing optional peer like
+	* `langfuse` would otherwise drop every trace with no signal. The
+	* supplied `onError` is called, or — by default — a `console.warn` is
+	* emitted ONCE per exporter so the cause is visible without spamming.
+	*/
+	reportExporterError(name, error) {
+		if (this.options.onError) {
+			try {
+				this.options.onError(name, error);
+			} catch {}
+			return;
+		}
+		if (this.warnedExporters.has(name)) return;
+		this.warnedExporters.add(name);
+		const message = error instanceof Error ? error.message : String(error);
+		console.warn(`[panoptic] exporter "${name}" failed and was isolated: ${message}`);
+	}
 };
 /**
 * Create a Panoptic collector — the single integration point an app
@@ -318,8 +451,8 @@ var Collector = class {
 * // on shutdown:
 * await collector.shutdown();
 */
-function createCollector() {
-	return new Collector();
+function createCollector(options = {}) {
+	return new Collector(options);
 }
 
 //#endregion
@@ -425,6 +558,291 @@ function sumOptional(accumulator, next) {
 	return (accumulator ?? 0) + (next ?? 0);
 }
 
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/store/cache-trace-store.ts
+const DEFAULT_PREFIX = "panoptic";
+/**
+* Cache-backed {@link TraceStoreContract} with a **write-through** design
+* that reconciles the synchronous store contract with an asynchronous
+* cache driver.
+*
+* **How the sync/async tension is resolved.** The contract's `get` /
+* `query` / `aggregate` / `size` are synchronous (the dashboard polls them
+* on every request and the in-memory store answers instantly). A cache
+* driver is async. So this store keeps an **in-memory read mirror** — the
+* same insertion-ordered `Map<traceId, Trace>` the in-memory store uses —
+* and serves every read from it synchronously. Writes go **through** to the
+* cache: `add` updates the mirror immediately, then asynchronously persists
+* the trace + index to the cache (errors are swallowed via an optional
+* `onError` hook so a flaky cache never throws into the collector's hot
+* path). On process restart, {@link CacheTraceStore.ready} re-hydrates the
+* mirror from the cache so traces survive the restart.
+*
+* **Durability is best-effort.** Reads never wait on the cache; the mirror
+* is the source of truth at runtime and the cache is the durable backing
+* store. A write that the cache rejects is still visible in the mirror for
+* the life of the process — it just won't survive a restart.
+*
+* **Lazy driver resolution.** The driver (or its async factory) is resolved
+* on first use and memoized, so a production deployment can defer the Redis
+* connect until the first trace is collected, and the dashboard can be
+* wired with a factory at import time without a live connection.
+*
+* Doubles as an {@link ExporterContract} (`export` ≡ `add`), so it drops
+* straight into a collector via `collector.use(store)`.
+*
+* Instantiated via {@link createCacheTraceStore}; callers never see `new`.
+*/
+var CacheTraceStore = class {
+	/** Stable exporter id so a collector can dedupe / log this sink. */
+	name = "cache-trace-store";
+	/**
+	* In-memory read mirror keyed by `traceId`. A `Map` preserves insertion
+	* order, which newest-first `query` ordering and FIFO eviction both rely
+	* on. Every read is served from here synchronously.
+	*/
+	mirror = /* @__PURE__ */ new Map();
+	prefix;
+	capacity;
+	/**
+	* Monotonic insertion counter — the source of `IndexEntry.addedAt`.
+	* Deliberately NOT `Date.now()`: an internal counter guarantees a stable
+	* total order for the index even when many traces land in the same
+	* millisecond.
+	*/
+	addCounter = 0;
+	/** The optional input — a driver, a factory, or `undefined`. */
+	input;
+	resolvedDriver;
+	driverPending;
+	onError;
+	constructor(input, options = {}) {
+		this.input = input;
+		this.prefix = options.prefix ?? DEFAULT_PREFIX;
+		this.capacity = options.capacity ?? 0;
+		this.onError = options.onError;
+	}
+	get size() {
+		return this.mirror.size;
+	}
+	/**
+	* Hydrate the in-memory mirror from the cache. Idempotent-safe to call
+	* once at startup (the dashboard / config wiring awaits it). Reads the
+	* persisted index, fetches each referenced trace, and replays them into
+	* the mirror in insertion order so newest-first ordering + eviction stay
+	* correct after a restart. A cache failure is routed to `onError` and
+	* leaves the mirror empty rather than throwing.
+	*/
+	async ready() {
+		try {
+			const driver = await this.resolveDriver();
+			const index = await driver.get(this.indexKey());
+			if (!Array.isArray(index)) return;
+			const ordered = [...index].sort((left, right) => left.addedAt - right.addedAt);
+			for (const entry of ordered) {
+				const trace = await driver.get(this.traceKey(entry.id));
+				if (trace !== null && trace !== void 0) {
+					this.mirror.delete(trace.traceId);
+					this.mirror.set(trace.traceId, trace);
+				}
+				if (entry.addedAt >= this.addCounter) this.addCounter = entry.addedAt + 1;
+			}
+			this.evictOverflow();
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
+	add(trace) {
+		this.mirror.delete(trace.traceId);
+		this.mirror.set(trace.traceId, trace);
+		const addedAt = this.addCounter;
+		this.addCounter += 1;
+		const evicted = this.evictOverflow();
+		this.persist(trace, addedAt, evicted);
+	}
+	/**
+	* `ExporterContract.export` — a collector dispatches a completed trace
+	* here, which is exactly an `add`.
+	*/
+	export(trace) {
+		this.add(trace);
+	}
+	get(traceId) {
+		return this.mirror.get(traceId);
+	}
+	query(filter) {
+		const matched = [];
+		for (const trace of this.mirror.values()) if (matchTrace(trace, filter)) matched.push(trace);
+		return this.sortNewestFirst(matched);
+	}
+	aggregate(filter) {
+		const aggregate = {
+			traces: 0,
+			completed: 0,
+			failed: 0,
+			cancelled: 0,
+			usage: emptyUsage(),
+			totalDuration: 0
+		};
+		for (const trace of this.mirror.values()) {
+			if (!matchTrace(trace, filter)) continue;
+			aggregate.traces += 1;
+			aggregate.totalDuration += trace.duration;
+			aggregate.usage = sumUsage(aggregate.usage, trace.usage);
+			this.countStatus(aggregate, trace);
+		}
+		if (aggregate.usage.cost !== void 0) aggregate.cost = aggregate.usage.cost;
+		return aggregate;
+	}
+	clear() {
+		const ids = [...this.mirror.keys()];
+		this.mirror.clear();
+		this.purge(ids);
+	}
+	/**
+	* Persist one trace + the rebuilt index to the cache, optionally removing
+	* a trace evicted by the capacity cap. Best-effort: any cache failure is
+	* routed to `onError`, never thrown — the mirror already reflects the
+	* write so runtime reads are unaffected.
+	*/
+	async persist(trace, addedAt, evictedId) {
+		try {
+			const driver = await this.resolveDriver();
+			await driver.set(this.traceKey(trace.traceId), trace);
+			if (evictedId !== void 0) await driver.remove(this.traceKey(evictedId));
+			await driver.set(this.indexKey(), this.buildIndex(addedAt));
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
+	/** Best-effort removal of every persisted trace + the index on `clear`. */
+	async purge(ids) {
+		try {
+			const driver = await this.resolveDriver();
+			for (const id of ids) await driver.remove(this.traceKey(id));
+			await driver.remove(this.indexKey());
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
+	/**
+	* Rebuild the newest-first index from the current mirror. The mirror's
+	* `Map` iteration is oldest-first insertion order; we walk it and assign
+	* `addedAt` from the surviving counter span so the persisted order
+	* matches the in-memory one. The freshest entry uses `latestAddedAt`.
+	*/
+	buildIndex(latestAddedAt) {
+		const ids = [...this.mirror.keys()];
+		const base = latestAddedAt - (ids.length - 1);
+		return ids.map((id, offset) => ({
+			id,
+			addedAt: base + offset
+		}));
+	}
+	/**
+	* Resolve the driver once and memoize. Supports a bare driver, a sync
+	* factory, and an async factory. Concurrent first-callers share one
+	* in-flight resolution.
+	*/
+	async resolveDriver() {
+		if (this.resolvedDriver !== void 0) return this.resolvedDriver;
+		if (this.driverPending !== void 0) return this.driverPending;
+		const candidate = typeof this.input === "function" ? this.input() : this.input;
+		this.driverPending = Promise.resolve(candidate);
+		try {
+			this.resolvedDriver = await this.driverPending;
+			return this.resolvedDriver;
+		} finally {
+			this.driverPending = void 0;
+		}
+	}
+	/** `${prefix}:trace:${traceId}` — the per-trace cache key. */
+	traceKey(traceId) {
+		return `${this.prefix}:trace:${traceId}`;
+	}
+	/** `${prefix}:index` — the newest-first index cache key. */
+	indexKey() {
+		return `${this.prefix}:index`;
+	}
+	/** Route a swallowed cache error to the optional handler. */
+	reportError(error) {
+		if (this.onError !== void 0) this.onError(error);
+	}
+	/**
+	* Increment the matching terminal-status counter for one trace.
+	* Mirrors the in-memory store: non-terminal statuses are counted in
+	* `traces` but tracked by none of the three headline counters.
+	*/
+	countStatus(aggregate, trace) {
+		switch (trace.root.status) {
+			case "completed":
+				aggregate.completed += 1;
+				break;
+			case "failed":
+				aggregate.failed += 1;
+				break;
+			case "cancelled":
+				aggregate.cancelled += 1;
+				break;
+			default: break;
+		}
+	}
+	/**
+	* Sort matched traces newest-started first. A copy is sorted so the
+	* mirror's insertion order (which eviction depends on) is never disturbed.
+	*/
+	sortNewestFirst(traces) {
+		return traces.sort((left, right) => Date.parse(right.startedAt) - Date.parse(left.startedAt));
+	}
+	/**
+	* Evict oldest-inserted traces from the mirror until within `capacity`.
+	* Returns the id of the single evicted trace (the common case — one `add`
+	* pushes at most one over the cap) so the caller can remove it from the
+	* cache too. No-op + `undefined` when unbounded or within the cap.
+	*/
+	evictOverflow() {
+		if (this.capacity <= 0) return;
+		let evicted;
+		while (this.mirror.size > this.capacity) {
+			const oldest = this.mirror.keys().next().value;
+			if (oldest === void 0) return evicted;
+			this.mirror.delete(oldest);
+			evicted = oldest;
+		}
+		return evicted;
+	}
+};
+/**
+* Create a cache-backed trace store. Reads are served synchronously from an
+* in-memory mirror; writes go through to the cache, and {@link
+* CacheTraceStoreHandle.ready} re-hydrates the mirror on startup so traces
+* survive a restart. See {@link CacheTraceStore} for the full write-through
+* design.
+*
+* @param cache a {@link CacheDriver}, or a (possibly async) factory that
+*   yields one on first use — resolved lazily and memoized so a production
+*   Redis connect can be deferred until the first trace is collected.
+* @param options `prefix` (default `"panoptic"`), `capacity` (FIFO cap),
+*   and an optional `onError` hook for swallowed cache write failures.
+*
+* @example
+* import { RedisCacheDriver } from "@warlock.js/cache";
+*
+* // Lazy async factory — defers the Redis connect until first use.
+* const store = createCacheTraceStore(async () => {
+*   const driver = new RedisCacheDriver();
+*   await driver.connect();
+*   return driver;
+* });
+*
+* await store.ready();      // hydrate from a prior run
+* collector.use(store);     // fills as traces complete
+* const failed = store.query({ status: "failed" });
+*/
+function createCacheTraceStore(cache, options = {}) {
+	return new CacheTraceStore(cache, options);
+}
+
 //#endregion
 //#region ../@warlock.js/ai-panoptic/src/store/in-memory-trace-store.ts
 /**
@@ -444,9 +862,16 @@ function sumOptional(accumulator, next) {
 * callers never see `new`.
 */
 var InMemoryTraceStore = class {
+	/** Stable exporter id so a collector can dedupe / log this sink. */
+	name = "in-memory-trace-store";
+	/**
+	* Retained traces keyed by `traceId`. A `Map` preserves insertion
+	* order, which is what FIFO eviction and newest-first `query` ordering
+	* both rely on.
+	*/
+	traces = /* @__PURE__ */ new Map();
+	capacity;
 	constructor(options) {
-		this.name = "in-memory-trace-store";
-		this.traces = /* @__PURE__ */ new Map();
 		this.capacity = options?.capacity ?? 0;
 	}
 	get size() {
@@ -592,7 +1017,11 @@ const GEN_AI_ATTRIBUTES = {
 	responseModel: "gen_ai.response.model",
 	usageInputTokens: "gen_ai.usage.input_tokens",
 	usageOutputTokens: "gen_ai.usage.output_tokens",
-	conversationId: "gen_ai.conversation.id"
+	conversationId: "gen_ai.conversation.id",
+	/** Captured prompt/input (set only under content capture). */
+	prompt: "gen_ai.prompt",
+	/** Captured completion/output (set only under content capture). */
+	completion: "gen_ai.completion"
 };
 /**
 * Panoptic-specific attribute keys that have no GenAI-convention
@@ -659,6 +1088,56 @@ function mergeScalarAttributes(target, source) {
 	for (const [key, value] of Object.entries(source)) if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") target[key] = value;
 }
 
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/exporters/console/format-span-io.ts
+/** Default cap on how many characters of captured content a console line shows. */
+const DEFAULT_IO_MAX_CHARS = 500;
+/**
+* Render a span's captured content ({@link TraceSpan.input} /
+* {@link TraceSpan.output}) as extra indented console lines, one level
+* below the span's own line:
+*
+* ```text
+*   ok agent "market-research" — 1794ms, 224 tok, $0.0008
+*       in:  Research the market for Acme Coffee Roasters …
+*       out: Demand is steady; specialty buyers skew premium …
+* ```
+*
+* Returns `[]` when the span carries no content — capture disabled, or a
+* composite node with no own I/O. Each value is stringified (JSON for
+* non-strings), whitespace-collapsed to stay scannable, and truncated to
+* `maxChars` (default {@link DEFAULT_IO_MAX_CHARS}) with an ellipsis. Use
+* the file exporter for the full, untruncated payload.
+*
+* @example
+* formatSpanIO(toolSpan, 1);
+* // ['    in:  {"query":"specialty coffee demand"}', '    out: {"results":[…]}']
+*/
+function formatSpanIO(span, depth = 0, maxChars = DEFAULT_IO_MAX_CHARS) {
+	const lines = [];
+	const indent = "  ".repeat(depth + 1);
+	if (span.input !== void 0) lines.push(`${indent}in:  ${preview(span.input, maxChars)}`);
+	if (span.output !== void 0) lines.push(`${indent}out: ${preview(span.output, maxChars)}`);
+	return lines;
+}
+/**
+* One-line, length-capped preview of a captured value. Strings pass
+* through; everything else is JSON-stringified (falling back to
+* `String()` on a circular / unstringifiable value). Internal whitespace
+* is collapsed so the preview never breaks the tree layout.
+*/
+function preview(value, maxChars) {
+	const collapsed = (typeof value === "string" ? value : stringify(value)).replace(/\s+/g, " ").trim();
+	return collapsed.length > maxChars ? `${collapsed.slice(0, maxChars)}…` : collapsed;
+}
+function stringify(value) {
+	try {
+		return JSON.stringify(value) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+
 //#endregion
 //#region ../@warlock.js/ai-panoptic/src/exporters/console/format-span-line.ts
 /**
@@ -705,9 +1184,10 @@ const EXPORTER_NAME$3 = "console";
 * as the reference implementation of the contract.
 *
 * By default it prints one summary line per completed trace. Set
-* `tree: true` to print the full indented span tree, and
-* `streaming: true` to also print each span the moment it finalizes
-* (via the optional `exportSpan` hook).
+* `tree: true` to print the full indented span tree, `io: true` to also
+* print each span's captured `input` / `output` (needs the collector's
+* `captureContent`), and `streaming: true` to print each span the moment
+* it finalizes (via the optional `exportSpan` hook).
 *
 * @example
 * collector.use(consoleExporter());
@@ -715,36 +1195,52 @@ const EXPORTER_NAME$3 = "console";
 *
 * @example
 * collector.use(consoleExporter({ tree: true }));
+*
+* @example
+* // Full content trace — prompts, responses, and tool I/O:
+* const observe = panoptic({
+*   captureContent: true,
+*   exporters: [consoleExporter({ tree: true, io: true })],
+* });
 */
 function consoleExporter(options = {}) {
 	const sink = options.console ?? console;
 	const tree = options.tree ?? false;
+	const io = options.io ?? false;
+	const ioMaxChars = options.ioMaxChars;
 	const exporter = {
 		name: EXPORTER_NAME$3,
 		export(trace) {
-			writeTrace(sink, trace, tree);
+			writeTrace(sink, trace, tree, io, ioMaxChars);
 		}
 	};
 	if (options.streaming) exporter.exportSpan = (span) => {
 		sink.log(formatSpanLine(span));
+		if (io) for (const line of formatSpanIO(span, 0, ioMaxChars)) sink.log(line);
 	};
 	return exporter;
 }
 /**
 * Write a completed trace — either a single root summary line or the
-* full indented tree. Failed traces are routed to `console.error` so
-* they surface at the right severity in log aggregators.
+* full indented tree, each span optionally followed by its captured
+* `input` / `output`. Failed / cancelled spans route to `console.error`
+* so they surface at the right severity in log aggregators.
 */
-function writeTrace(sink, trace, tree) {
+function writeTrace(sink, trace, tree, io, ioMaxChars) {
 	if (!tree) {
-		const line = formatSpanLine(trace.root);
-		writeAtSeverity(sink, trace.root.status, line);
+		writeSpan(sink, trace.root, 0, io, ioMaxChars);
 		return;
 	}
-	for (const span of walkSpans(trace.root)) {
-		const line = formatSpanLine(span, spanDepth(trace.root, span.spanId));
-		writeAtSeverity(sink, span.status, line);
-	}
+	for (const span of walkSpans(trace.root)) writeSpan(sink, span, spanDepth(trace.root, span.spanId), io, ioMaxChars);
+}
+/**
+* Write one span's line and — when `io` is on — its captured content,
+* all routed at the span's own severity so a failed span keeps its
+* content beside it in the error stream.
+*/
+function writeSpan(sink, span, depth, io, ioMaxChars) {
+	writeAtSeverity(sink, span.status, formatSpanLine(span, depth));
+	if (io) for (const line of formatSpanIO(span, depth, ioMaxChars)) writeAtSeverity(sink, span.status, line);
 }
 /**
 * Route a line to `error` when the span failed/cancelled, otherwise to
@@ -809,9 +1305,12 @@ function fileExporter(options) {
 * lifetime; kept unexported so callers only ever see the factory.
 */
 var FileTraceWriter = class {
+	path;
+	flushEvery;
+	pretty;
+	buffer = [];
+	directoryReady = false;
 	constructor(options) {
-		this.buffer = [];
-		this.directoryReady = false;
 		this.path = options.path;
 		this.flushEvery = Math.max(1, options.flushEvery ?? 1);
 		this.pretty = options.pretty ?? false;
@@ -901,12 +1400,16 @@ function loadLangfuse() {
 * installed, and a missing SDK surfaces as a curated "install this"
 * error when the exporter first needs to build a client.
 *
-* The root {@link TraceSpan} becomes a Langfuse trace; each descendant
-* becomes a nested observation — a `generation` when it produced tokens
-* (LLM-backed agents, supervisors), otherwise a plain `span` (tools,
-* callbacks). Timing, status, version, and rolled-up `usage` are mapped
-* 1:1; the rest of the GenAI attributes ride along as observation
-* metadata.
+* The root {@link TraceSpan} becomes a Langfuse trace AND its top
+* observation (so the root execution's own tokens are metered, not just
+* its children's); every node is an observation — a `generation` when it
+* metered its OWN tokens (LLM-backed agents, supervisors), otherwise a
+* plain `span` (tools, callbacks, and composite nodes whose tokens came
+* only from children). Timing, status, and version map 1:1; each
+* generation reports its own token usage (rolled-up minus children) so
+* the trace total isn't double-counted; non-usage GenAI attributes ride
+* along as metadata, and captured content (under `captureContent`)
+* surfaces as native `input` / `output`.
 *
 * @example
 * collector.use(langfuseExporter({ publicKey: "pk-...", secretKey: "sk-..." }));
@@ -948,20 +1451,23 @@ function langfuseExporter(options) {
 */
 function emitTrace(client, trace) {
 	const root = trace.root;
-	const langfuseTrace = client.trace({
+	const traceBody = {
 		id: root.traceId,
 		name: root.name,
 		sessionId: trace.sessionId,
 		version: root.version,
 		timestamp: new Date(root.startedAt),
-		metadata: toGenAiAttributes(root)
-	});
-	for (const child of root.children) emitObservation(langfuseTrace, child);
+		metadata: langfuseMetadata(root)
+	};
+	if (root.input !== void 0) traceBody.input = root.input;
+	if (root.output !== void 0) traceBody.output = root.output;
+	emitObservation(client.trace(traceBody), root);
 }
 /**
 * Map one {@link TraceSpan} onto a Langfuse observation under `parent`,
-* then recurse its children. Token-producing spans become
-* `generation`s; everything else becomes a plain `span`.
+* then recurse its children. Spans that metered their OWN tokens become
+* `generation`s; everything else (tools, callbacks, composite nodes)
+* becomes a plain `span`.
 */
 function emitObservation(parent, span) {
 	const body = {
@@ -972,14 +1478,17 @@ function emitObservation(parent, span) {
 		level: toLevel(span),
 		statusMessage: span.error?.message,
 		version: span.version,
-		metadata: toGenAiAttributes(span)
+		metadata: langfuseMetadata(span)
 	};
+	if (span.input !== void 0) body.input = span.input;
+	if (span.output !== void 0) body.output = span.output;
 	let observation;
-	if (producedTokens(span)) {
+	const own = ownUsage(span);
+	if (own.total > 0) {
 		body.usage = {
-			input: span.usage.input,
-			output: span.usage.output,
-			total: span.usage.total,
+			input: own.input,
+			output: own.output,
+			total: own.total,
 			unit: "TOKENS"
 		};
 		observation = parent.generation(body);
@@ -988,20 +1497,60 @@ function emitObservation(parent, span) {
 	observation.end({ endTime: body.endTime });
 }
 /**
-* A span counts as an LLM `generation` when it metered any tokens. Pure
-* tools/callbacks contribute zero own-cost and map to plain spans.
+* Own token usage for a span — its rolled-up {@link TraceSpan.usage}
+* minus the rolled-up usage of its direct children. `TraceSpan.usage` is
+* the subtree total (this node plus every descendant), so subtracting the
+* children leaves the tokens THIS node alone metered, clamped at zero
+* defensively.
 *
-* **Known limitation.** `TraceSpan.usage` is the ROLLED-UP usage (this
-* node's own cost plus the sum of its children), not own-usage — the
-* core `BaseReport` exposes no separate own-usage field, so a composite
-* node (e.g. an agent that itself made no model call but whose tool
-* children did) is classified as a `generation` on its children's
-* tokens. We cannot classify on own-usage until the report shape carries
-* it; the rolled-up `usage` block emitted on such a generation therefore
-* double-counts tokens already attributed to descendant observations.
+* Langfuse sums observation usage into the trace total, so reporting
+* own-usage on each generation (rather than the subtree rollup) is what
+* keeps the trace total correct instead of multiply-counting nested
+* spans. A composite node with no own tokens (e.g. a workflow whose
+* tokens all came from agent children) yields `total: 0` and is emitted
+* as a plain span, not a generation.
+*/
+function ownUsage(span) {
+	let childInput = 0;
+	let childOutput = 0;
+	let childTotal = 0;
+	for (const child of span.children) {
+		childInput += child.usage.input;
+		childOutput += child.usage.output;
+		childTotal += child.usage.total;
+	}
+	return {
+		input: Math.max(0, span.usage.input - childInput),
+		output: Math.max(0, span.usage.output - childOutput),
+		total: Math.max(0, span.usage.total - childTotal)
+	};
+}
+/**
+* Token-usage + cost keys that the per-observation `usage` block already
+* carries authoritatively (as OWN usage). Omitting them from `metadata`
+* avoids a confusing contradiction — metadata would otherwise show the
+* rolled-up subtree totals next to an own-usage `usage` block. Cost is
+* omitted for the same reason; Langfuse prices the own tokens itself.
+*/
+const LANGFUSE_METADATA_OMIT = new Set([
+	GEN_AI_ATTRIBUTES.usageInputTokens,
+	GEN_AI_ATTRIBUTES.usageOutputTokens,
+	WARLOCK_ATTRIBUTES.totalTokens,
+	WARLOCK_ATTRIBUTES.cachedTokens,
+	WARLOCK_ATTRIBUTES.reasoningTokens,
+	WARLOCK_ATTRIBUTES.costUsd
+]);
+/**
+* Observation metadata — the GenAI attribute set minus the usage/cost
+* keys that live authoritatively on the `usage` block (see
+* {@link LANGFUSE_METADATA_OMIT}). Keeps model identity, report type,
+* version, session id, and any collector-set attributes.
 */
-function producedTokens(span) {
-	return span.usage.total > 0;
+function langfuseMetadata(span) {
+	const all = toGenAiAttributes(span);
+	const metadata = {};
+	for (const [key, value] of Object.entries(all)) if (!LANGFUSE_METADATA_OMIT.has(key)) metadata[key] = value;
+	return metadata;
 }
 /**
 * Map the Panoptic span status onto a Langfuse observation level —
@@ -1113,9 +1662,24 @@ function emitSpan(tracer, span, parentContext, options) {
 function applyAttributes(otelSpan, span, options) {
 	const attributes = toGenAiAttributes(span);
 	if (options.system !== void 0 && attributes[GEN_AI_ATTRIBUTES.system] === void 0) attributes[GEN_AI_ATTRIBUTES.system] = options.system;
+	if (span.input !== void 0) attributes[GEN_AI_ATTRIBUTES.prompt] = stringifyContent(span.input);
+	if (span.output !== void 0) attributes[GEN_AI_ATTRIBUTES.completion] = stringifyContent(span.output);
 	otelSpan.setAttributes(attributes);
 }
 /**
+* Coerce a captured content value to a string OTel attribute. Strings
+* pass through; structured values are JSON-encoded (falling back to
+* `String()` if they can't be serialized).
+*/
+function stringifyContent(value) {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+/**
 * Map the Panoptic span status onto the OTel span status, recording the
 * normalized error as an exception event + ERROR status when present.
 */
@@ -1241,8 +1805,16 @@ const DEFAULT_COMPLETED_EVENTS = [
 * {@link panoptic}; callers never see `new`.
 */
 var PanopticSubscriber = class {
+	collector;
+	completedEvents;
+	middlewareName;
 	constructor(options = {}) {
-		this.collector = options.collector ?? createCollector();
+		this.collector = options.collector ?? createCollector({
+			captureContent: options.captureContent,
+			redactContent: options.redactContent,
+			fullHistory: options.fullHistory,
+			onError: options.onError
+		});
 		for (const exporter of options.exporters ?? []) this.collector.use(exporter);
 		this.completedEvents = options.completedEvents ?? [...DEFAULT_COMPLETED_EVENTS];
 		this.middlewareName = options.middlewareName ?? "panoptic";
@@ -1345,26 +1917,2023 @@ function panoptic(options = {}) {
 	return new PanopticSubscriber(options);
 }
 
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/dashboard/parse-query.ts
+/**
+* The set of terminal statuses a stored trace can carry. Used to keep
+* `parseQuery` from forwarding arbitrary `?status=` junk into the store.
+*/
+const KNOWN_STATUSES = [
+	"completed",
+	"failed",
+	"cancelled",
+	"max-iterations",
+	"awaiting-input",
+	"awaiting-approval"
+];
+/**
+* Map a request's query string onto a {@link TraceQuery} the trace store
+* understands. Every field is optional — an absent param is "don't care",
+* so an empty query string yields an empty filter that matches every
+* stored trace.
+*
+* - `traceId` / `sessionId` — passed through verbatim (first value wins).
+* - `status` — **repeatable**: `?status=failed&status=cancelled` becomes
+*   `["failed", "cancelled"]`; a single value stays a scalar. Unknown
+*   status tokens are dropped so a typo never silently matches nothing in
+*   a confusing way (it simply isn't filtered on).
+* - `startedAfter` / `startedBefore` — forwarded as ISO strings; the
+*   store accepts either a string or `Date`, and `matchTrace` does the
+*   inclusive bound comparison.
+*
+* Unknown params are ignored. Pure — takes a `URLSearchParams`, returns a
+* plain object — so it's trivially testable without a live server.
+*
+* @example
+* parseQuery(new URLSearchParams("status=failed&status=cancelled&sessionId=s1"));
+* // → { status: ["failed", "cancelled"], sessionId: "s1" }
+*/
+function parseQuery(params) {
+	const query = {};
+	const traceId = params.get("traceId");
+	if (traceId !== null && traceId.length > 0) query.traceId = traceId;
+	const sessionId = params.get("sessionId");
+	if (sessionId !== null && sessionId.length > 0) query.sessionId = sessionId;
+	const statuses = params.getAll("status").filter((value) => KNOWN_STATUSES.includes(value));
+	if (statuses.length === 1) query.status = statuses[0];
+	else if (statuses.length > 1) query.status = statuses;
+	const startedAfter = params.get("startedAfter");
+	if (startedAfter !== null && startedAfter.length > 0) query.startedAfter = startedAfter;
+	const startedBefore = params.get("startedBefore");
+	if (startedBefore !== null && startedBefore.length > 0) query.startedBefore = startedBefore;
+	return query;
+}
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/dashboard/warlock-logo.ts
+/**
+* The Warlock logo as an inlined base64 PNG data URI (64x64, ~9KB).
+* Inlined so the dashboard stays a single self-contained, offline-capable
+* page with no external asset request. Regenerate from
+* @warlock.js/docs/public/logo.png via:
+*   magick logo.png -resize 64x64 -strip out.png && base64 -w0 out.png
+*/
+const WARLOCK_LOGO_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAkvklEQVR42nV7Z5hb1bX2u9Y+RRpNn7E9425s02wMxgZMNc1AqIkJLTcxgQChpBEC94bwpVwSCCQBEkghECD0DiZwIRBaAhhiMGCDccEejz3F0zQzGrVT9l7fj6MjaQzR8+iRdHTO3nutvcq7yiYikAgAAESASPQJRN8BgLnyO/6fCDCmfC+JoHQ3QEQQkfg+MqbqPwDE0f3xfACiGySayxiMe1XPt+ureoz4d7zW6DvFo4OZSAQipQdEAFW6o/xgPBlz5drnvZiJiBC/owkZYKKqiSMGACDmykKVGj+ySOlGqsy/K5HVa6v+nyNmUnnC0pd4/fG7mkkxc5hLDIh27PNviHe9tLFlYkq7DiKCEZLKRESAxJPSODoIUIpJpLwJ5XuoakwRUPyKmUiVbaLKWNF/1RJcuoMqdBGqSPsMU8dJQCzqpe9kTGXw6oeqGC3VkwMAKy7vSCwJVEVBdD99ZjyOLxHATON2Lh4nVquYuOjaeKkoTSVVdFH8VB2A2397sNO1Y8T09PsVEaVoYi49zK5LzDyO20wEVqpyPf6tFDGVOR7xrrR3pBSYuTxu6U2sFLPtEFeNTzGfEGsRR3NwNAcxl2WCiOLfFamsfts2sWWBmUEAURNAN14M1btl2aK+jmXznJKWlHYHpFRpsmjS8mRlokrEKBU/VFYFtm1iZiozT6mYARQTXx43XjzAlAB44QyXDpphUx0zlxbEllXZiOhZoojJEdHjbE+JwJjwte+c0vCHG/e3AZBlgwgWAaBVz852R3oPPcfrm39d0NfWXM0sK9bx2IpH4lsR/CpdjSQwFtvSp9YCkYhXIoLIugtVPSuxpBkDOCBceLKNr3/ZozUfS61SZI4/1Co89JiSm54MsDMbxvdLrN8VDyOxmJExgGvZKPqB/N+T89QRRzQu1UF/clMy/QIA1FsuTQ88eeajRQ3NU2ouTuT7zlLFnstpVjZd8jVlZSxb8SpdL1+LJ491D4AwExmBiKnoZLUbjI3keLdFOGl+Da69OsRgGk7L7NS+U3c3K0KvmO/aJPfZnto4sdGEN97Ecs9rATJeUG0jJOK8QASwLFAQMHa3DF7ffnBDU83I+chlDyzmM1c1zh3dngTTMTByz/bDpte24Gon038W+nb8eVgVrtl7QW3YJ9nyxpSte6xLSoFiMYzEOdY5lHXWsojG6X2VHsbiXq0qE5IO3/fjGt76d1ivP9Q8tfODxssL/amPZCgRmJ2On+tOvLvt/eRFqx5LtuU3pKxVdzSqRTOSHCEGVNudcbreuemoWr9vz2vDTc3bRlc7XxQRzEmAH/4+eLTv8EV+cfHzZmjPorxb84H5kOYCU6hkP7lqnIrLYQbZ9jijxdUTV2xEdJ0V8a5MYAYxVwzcisPqeOuz4H/8tb7249dbjx/ZVr9SD7g52WmFst3NyGY7LzssEw64meHO1COb36o9et3zdm3uE0vd/I0ktyYVgyIbsKuxW//OPMdsbjiosMo6e83DXDMZoE9fnefkRg47OfTnfyBjc3xZXZuVVfzNv2+fzRMTarzhjQ3I57m3issqIbaS0FSrQnwPc9l+gBnQmrD/5ATdcI2gpb2oPG6bOWOOWdHSnDvXYX8qDIoY5YLZKJY2AmsuhBoliQTZAdmdmRH33nQX399cm+7s/DihL7vGyNvbA4BMWXCZSWCEDGBEgLMaQH9au7Q21ZpdYbtD/0NB2IYNo0Am/6Jus1dM2LMuPYyB6rWDqAyExtsAZpBSJFVQt4QqPosFSj63gvKEaMWRLt19S5EGgoaGCdOaTp69R/Ha5sbc2RaFtfB5DNthsMXUSF7yYVrAQ0gwyEOKAuWa5mQ9Dk212IvyXkPOD6X7kq/mvAk6iQ82CXKBKc8nAPZpc3nweU03/OuY9lT9zqstp/cHZPxGbMkbDORHUcNXqf2++JFgDWtUQEgZY0R6TzCmgo9jMFEBLZX/qiFtlckUMQYL2m265X8EOdu22mc1zp8xy7+osaH4ZcsOGiGcxyA0usMECiZAgv8pTep2PaDrVEYupBCL0UCE3awA7WQhQQltEqP5TO1TQ13qdn9nx0db3qNgxa+UDOZCARin7Sv08/8VmnPYEXvZqvunSg2cAiXADoTYlnfB9Pvs9ORVe+zpB70coERkvKUQif3XLmIdu72SqJUJJwJpHcHYqkAHdcrGlWdbOOVkUBo1rbvNMadPmhhenEz6e4Pho6A89IY2MqEFizaiju6UKdZjD743s19Py+Jr3D+V+sxXkDPnAjQTrVaAGZZBi+2Ak64ftG4aHUjd2rN+x71fPqU7t1UzXXOmwXdu2Muqq69daqH7WqbhA6CgMaBCfFq0JZRNpoFPtw5ftAF4h5WK3bggDs5EAKsqepIq0SgDXGOkhPdFFFM5ghOAxDCO3NPFr3+g0OuTqybwkoXT/Mvq64MTlGUcaM5hQIC0l4RgGI38BCbwHcPJ2vVnTfbDd+lTygSMczF3x/begd9MGxj+B4bNRcgGp2KzbsQoeZhiBY7lTW+pLy6WGfa9tlZ08/kaF/xm36Rj/LOV2XoNSXYGLAoxZIX41FMoSmAS9MfvZ2ZsJLzHpCKLbcKwHNdU6KXyjpf1YtnBbVZ73US598W1emKNRf15DVAkLhUswPTdoxtxwpEhuXP19Nm704rWlvB81zFTweShQAHSoY2CaDh4E/XWH/Qk65WrDpyYe2eoj94dDeD5gQCAk3BIihYCHGeK21+qdYf9Y1EwlwFyMFK2hSR1wvW/RtNmrX7kwi102g3zWi0z+h02I5eR9hqgWKNghbLeB8a0bRx6OddgfbXhqNQgMFwd3BNzGU9IJQolqvaxePDWae1dmw64dKj7gL0fugzquCZwq21VwWCiFBL02O9qaz9+I/Gl0W3uK7rf9WTADWQgkZftTkE+UUVZzx/LFvsKM5CY8vQD+/AX2uu40XG4FPvRqpeXtL389JwImhIxQzFQT8AyCjvdybLR+oFsUh+ZbdYV993WyGdOZvZGF87VI+0PymDSl52Olp1OIDtqPP2CW9APsRc+wgP5Z60To50uuz3c+OP9nTOPb1IAyHHiOKGMAyLQExHn0BO/oaaRja3Phrnpa7Pp2Rf3bprTehVAJ80mpkqmgD5e3dpeHKr5q6SdggwnPcmmCpJ2Atlp9UuvfbsMOfv3ddfYNaihSTVOGdgAoFcePMTODi362UBHy3nRQohjXGHDZmASffivZivsc3fPdCQbAdBvLl+qwvy8oyXf+FcZrlkrA4m86U4U/JfcTPE+zngP8nDxSXXTmqecBJAgAHjx7mlWNr38iO51Sy+48yd2ElBlgFZmQJkJFhOg6MrzUvbgW/bvpK/ON8XmrJ+d/HR2aNbRPWtmJH64F/iomRbXOA6/+Ps2JSM1bdJvXyEDqU0STCiI3/Sa5FOn+2OpOkI7tUIxQEwcRYZx5D8ycNReOr/bhsLO5EufvGW3lhYcryO6GzZHO2mTssB7z0rxrZeCg8KsWsm23Wh6a4qZx52xnp9Stvvn/NHO29S3e5+xG2P/lBk8ZZrnHfuzcGhJ58Crk65bfhiUgr0roKpCReUQWND1mrpEr3fykq4pSCZldLap289Mu36sb/6cjieU+u054MPn1DLQTuv/3myZ0frFEu5zkQ4Xzrr2+HZuhE0cRQVEBLZtMCswwPzIz2aqYnbR1ZJvLep+dzTd6SwHWgEQx1Fg1S5xKe6jOGtg9N5Hm8yE7blnagqD1/JA/y/47p23qP2W/FeKRP6Fvm3LU35h2XIdLH5Dgn28cPWk0c576WypRDWVdwnaVuJjMIkAG/9hHxWsUWnZmhiToURB0q6W0VSgRyf+u5iec26md0HTS1eAv36gyxPRwMBMAppK8JIZ4FjUSnEFcSlMopG+L8wK8zPfk+FaX3a4pthjP77xLafehR2pAo/PFTBVntXmwKlmbNarhRcaiulfqbfTv+Wv7HzMSYkcibtuOZr97HELdGGf2403bVCCtlC2TMwVH7G3rbuDF8YMoP+kAkRxfD2NVj9t71b4UH3kv2pliq8m0mZHIiODri8DrjGDdWPB4OSHcjvnHdy3aU/33gvAh85wS+JN5Ti+ksSIRq+Fw3dfDi4OL77MDNcXpSfpyQY71NutgaGtzjHAVACqKr8QhSglpEIj+XkJPTz3V4VXm3syv7duGLlLzZIsQeQqeJlTJpjM/t81I5M/keHaUEZrfNNfnw2edLOZv/C/Xr5JTQBSpXiFmMr52fGYDoCg3RpFZ5/qL4xhjfQYx2wKXO8tY3Q3ZxFSkfxi0vIGz06Yroca6wv//aVfLJz2wP2GbvumYPcJdtnFiEjECQJBiDR8+eJVy9osM3gWFQouPAEK0JyX5qSSMz9+YyQ5vcaBkSp0FiXe6Pyvguqz5oRwc2ZWuCNz3uZUeE3Decd29I2c6prMS8ts74O/Un7TL8kb2B1hqKWPPHnTC2k0UEXBJ09/QCOAF5NazlaWc4JlJjAoZ0IaGEsGp+0RrK9huErRbCpKnenTJAX2KMUhKcOkvSYlhcMUewelJrZn9z1qUtcxs3f6g90K67uFojR0hDgSsHHjuZqWfKHpi1bQfQH5vhKfhHJRFoVtnmCl+PUf3eT2AIaITJkHIpBX/29BvZsrTg460/ekvnzEB7f9dZYcdURu9zra8t9U7PoJ+cMLgJAQWAE2kIc1PtOYTiBJ2wpJ+t0Z/2/yBmCESmn3cRlkqgL+MS6ABcA3vul4qjExhYrHKl8uR4AlosFIqoCnKUNtYsMyDpiUWO6oUfUrfWm8LbNt54dnnp7R/+wMwEwwhjATRj7sO6olRR33qkL3CTASep1KW6RF1RmFJCGfSNy0tcv9yX+dUQjX7ixEWSEmMlpwz02z2M31ydnXvKz9/I8aHd19OrzBb8PPzoPRBLDGoAqxwRgMhY44yKMOT5lG+u2b6eRHp5xflIwXiFIRQ8vR7S7REVWiP0DAEFMrIhnxX7LbbF+fSz4uFB/ToSlEs+XTLMVoMg5YFJQyIo1rkJi64sJp//70L2kiIkHKSeBrS4py85MHnOr4m/5KXrZWAksX3hVx641RU4RhgcOaxKZRU3/muQf0fvLcMBOzABAotlAfhvLxp4dZkyYXD4TX+z34I1+A9pMAaRSUxmYJsDUgiFhSS2tNA91UmGQ9W3fw8lwCj7LHIShKkQsglUJMRferiEfkGhybAYwRkcXucVP7VqVafi1N6hyqo0cpKR6NBglZ67PZTJ4EVhGeMVQYXUimuOx/HgPvPyUJEcLiCUX88vFldRZGzyZTqIdikRESCoymUARCAgWjJJydtHHS9Y+1qIXtKRgjMAZIhaH0ZJbXTWrPfB/5LQ+hOHA6JHBBKkS35eMN4+HTgMTBsG7hm712dZa17phH6w7mvMuPsK8MmEqUoxIGo+T6dglvSzZMBJ4nImIMEIpCNx1/dE74qCdWe5PsS00jf0dqsRZGW8Emzy2uFQMtDA4cyNjJsw8/prGlkAegsHAqJOkWD2CkjwaJASmDtFE6IS9KCmvhkYJFRBJaDrzTJ89umXrgtDEACgQHEwA47vCRCHquhMlPBFMgGSuUt6mIt/xQsoEJ6/G6N4HP75mb/GnyuImdjde+TECefGhIOTkplUJGNQPGJx8BpUBGi9xydcru23bAPjp/SH07fJnS4sGhMzmx2B374Y4F94f16pzA5j/4AQq6L2QJLR8WDCR7AJHefyANOXpiiP/927Kk4tEzCflWWGyQZ0FosmED3YUmegLGGAgJBKJMcX7SCo776lWgGjDq4ePjwopa6P6zEGabwIxgh53PPxt4er1HhqTHb+DrMm3qG8nTzv7H4kUSAl0y4oeSTKgSEKn29uNLZWXAUZ3VjeJlhZZGz07ItitYd9y2I7/7wtdens4Hu0W4NEZ3XbSOnCMu3/JKr/Vjz8aLNowjIxxAKQ0pNsFkTv336FL3xlOBRMqeT5I+HqIFpAyGNGtb3g3brFW6Xv1dHHTBA4NIKPQTjuTP2PPA+S2L7QBNgNj20P4wQ0eCxUCrwFsb+v6oNjmi5zMpnLd+buKWluMa+oH7qB+HyejOpTNfe2pOe6Goy5bdmGj3JVaBCKeAgfL1smeIJMZCMdAGuYyLfOYryO98uG1meOkr6QUt1x5psNc0AXATn3CZl/Xr+DFVIwUa1ASyfEAL9PCxdm3tbvN/Nc1i6V9OenQKCAY5EhkLA+PSU86s9uGgLrlZXHoJvlAkBWJUkD0gSbnDb7gGsjl7VgKm7wyY7EQoZfSQKnAmTAR1tHa1T1c0nR++c+bSnAEGJD9yYp14XSuc7JZ7Ev09i0UmiTEEAQkRhJlQglUkRsQYQRkIVZXAS8zQGCuwJoiPotbQ3iyY4euZ0ndd+dJ+h95xazNPawCIEjSg1BthDdZRPnCRVT4IBnpkJsK+ZZzYaw8yA6dCBwQog34DAT419fyPpy81Utt2hmcS/KRARuBFwkihV+vozFlzLmitt2pyeyPsOwFGA7ADs9UYZQnlXXpq2ZpZ3SCiJ19dqkxu8UFJ88HtyOy42Vs/OF/SBRvoi/a3ZAPiyk51LXGcDShfLDFj53bHiIOijBoyW5TGKNkIzYkoZH6xxwGYsk8+FEDoghfn9BdsekZIA/2hwJBB4Nnw06epcORc8tOzYcQgyxrDoRGLnvdnJjpf+GgIu+FxClPWu6LwNvKGATIQMUrnliZhHYpw52kIRqaByMiIKnCflwhd6ugjeh7PzBWRT2X+3qPzKNN5B4ojX/I7ffa7AttKfqa2H+FcU8ltjmMAK4qDl1LRSOijLleCHH2od+jXpav4ZrixsEa2ZjIYGliAwJzwy3cW8OQk4d0/HWXGiJ8PHXRhyLdRYB+hMfCGF3Fx+wp4HsOwQZ8IQtOHenrmiUcnByvXFdHPOdzw4N4j4vJTMMaDTwImwzpochF+B/ne5Qh8hnBoOsIQWts5S557ssfaCvyDgPNA4XATRkenYCikcLsGCyzLquzx+PL/uORvxQ3qUMREeWMigEAGg92ebHuf7xrWvHxkmru8MKv5QaSKtvhFV7Le6fPnBhN6CkUB7qIOP7XZZ3oFhdDGgNEwIvDzSRTSTdAiyLNGv09i4Q1p53X/+mMn8jpE1oT40w/6YWr4ZWHagKwwmASAWF52KfJDc6BFJKc82eE5oYO+IaGnb7wuHwIGQBtALBAIjGaCkKUAy6rUE3cVhBjwSAyESj/K2WAiQLHIvzfmcMA32Jt4apCxpy+eVlNvLiBLWbIeoXzgTUNnemI0Q0BLTxz2cgZPa5Gs6Q0ZIWuYEuhiNugTg4LJUZKe/mfv1Nwz6zxEMZkBuf30qWruFpueQ1EDHhkwCXTICDUDbGSHCbgYukVFr28I7I8spChiwDTAUoBNAotE2STKgihVFfdQdbxT8gaxG4ybIXbhUpl7C1N5Gtp+QkNNTd8Vigu7Y5PyeMCkKTQ/37F1dIOiJAOBEDXQANv/DpjWmNHQkTEKoUqlF18Z9IQKitaizXrrvWtHkNZGCBDFhF7Px95T27VJ8t+E0IuMMJgj+MYEBMo3nYEyhPwY6IkvXVTIhyiUYPwhkUJbJLAAUiBWANtU5dZFSjYwrjqXbQLHafAYADFHm6Y1MNmxcc/9u3FtY/9Zyhr8IrZKgB5/SBrpB6vm1j0841Qr0FIAALJUnuYvO2fYc/kZsBhJm2jnHRbpF2OyWiOFlUNzmwb/b20h5jLpUo5+utNBucbEJ+Lwq8gbRhARBJvEDLKHkTDhWXivD1hF1EZsESLujlUsOJOAIOX0ScW0UxznxLWMct1DpNJ9Vc6ZG5CCoj39QHY/as5+tjP8XeoOXHQF/dKEKx6a1fzEoYuLBsgCgFkwyUWoDYBtUkjxPySF7ZzTNgxrGKVNl2YodKCV//7QpY55rcMHYCFhCEoiU7Tdz6Ox7VsFU8NPCjCGjCFYLFC2r7dpETG6YNMTi9+ZkQb6icvFsV6UkT1VuqUiyGuV0W21plMpZ1VmQJQrj5MYkeWcCi1P9x7bbCd7fkCDmTnY5ndJvXzv8elTVv7X4jG0oICdm45L5vuPX7Dq3w2J5QsdAG/SelPTEdbSi2CtUBQjg6SR0UQpPOfNt7e982YaRzSEeOO+kHp2Hm337TzQuub0UA5q8DABdyJsdt+WGryHglEAG5NRvun1E6GijcMKL+G2IgAjUTOWRvSu1vCIhGgvw/hbWQXEVLV9xW5QjFQNQJhoGTy3cj+VbMqew5mhE9GR2yKJ8Nt3TZ723CX7D4JRkM7+ZfUts7zvuWHnHTXByKLzr6hDk0V0zNLhwEuplSaJEWRClu0BkYUBauaVqx+aFF507hi9lj6j7dCvHPv1xsbRX7fUFq+79v4DT3ujf1btN48Zote7905LHT0FSwLkRPSnoRHfcNHC31bWNXQl0EcAyERiK8DMij9jgjBFDqGaKabcUVbCORWRsKrEg0QgNlnUHwYy97jm/VWh81vUOdopHH73xuxer/7poG00JDnxcidMtNyhH9Lo6Plmc59rkvory04tvKdDLgINNAxrTU1Sv+NoOY7yIqil1zDbWbdw01ZKffekqdCdv4TuPAVeNom8BgLrG5Yjf/7xg8mfXz8pnT16m/USh8EWZMxc6dGuONSTU7TyypO+rYGfRlAWAKAICEuNdYjeJcWoJPsIIPlMQTdu1KsOhyUCQYFkR45psbzeq6hnoCChd+mX35r36h+Xb6FtuawYOXGmzf03c0f3N/F695jZkF0ZduL5bIfoDEIBxmi3RdeM+g4/KRY8sjFGdXjs6gf2ysvhU1kKO76G7MblKGZceFrDDw2yhTrZ5l0sn3rH/ASnSb/fuF1q+DkoQClRQQIvrrVSG1L4OYGIRAhJuABC6RrYZIHqpwCkSmGfAATiz8Q35fY9U9W7U0aCIkATQOtWL1EJGlmBgYF2PZa7pPGSfd54/cqNdNRRBTHFw/ZDf8etsqlzn3DjwK1+UDijOFed555xwjMLlhQDICi1UtxKY4Zf0YStSMqasI7fvP6qdyETd0tJNr0UmZyNsVCQ14APkSGE6JJaGZMjfvTY/Tx19y8FJsEr4WAANTRScPDYieeM+jlogjB2g+AXF3rQ4VlTplrPX4GhT3+CIEiJ4TAowAgDrCoSEON/lHuNSGLcY5U9iDg0DN/MmRMeIiMDS8LRzPcSS1pWJ7Gep0+38Ie7jp+nB7tON4M9fwvTmZc2tdH2/RaZcIKdIOAF7i5EoacFohBpuu1hu/uHZ/hP1tRTl32QlwaIfD+vagqei5wRCAEM0Wlo0ylsERntiFtTCAh4hHJir6u3/Df9Gjjb0vxeG9lkwcdcaHm/+OUaV/cvRf9blyHffxgQOMEIF0beC/1CjySsVimMJamAimCX+x6qmi2ljASNiVLWuYFDJprC6BH+2PANicX+6kZ7mAvw5bxL9uXhwVx2uKfvJne/0dtTR7d3HLYYhojZ03kCtLz9/nLO579e89wfE1gyycN119WbnVm6sxd4GmggwMLOvrGxMPDWIU/AmJigS8LiZoEuQjTBy4Pe/9GKQQ1kqXHG5flA8b3ZGrrroAuCbAuK9NyjbbQ+PHKOW/zoxxh8/08Y6z5WiiHnPubM0AvGz3cYJ+djy8atuGbVarxNVK4Dll1htduP0RABwBP3LVDHLWtcIrmuofrZWz+psWzOh0HcD0CIcCdFhkcLEVObZdCbhOjOo1p5rPsrSOj9UTPp4SA54Z9fn7Qy/+AgALhw3IB8jwG0yOCHmf3rC8FfKG329noEpAlWElKo5ec6hS/d9/RkH5AhwMXrjyvbLoZ49kee/9ONS+ps3X88csPfRjG3GIHmsJ/zubWm6PWKHQC5AQ8rNw7Tn8/+c/MnMCNCFFAs9kRCWsdqUGFGmQErHz/EnTtLavZetGoYsAkIhBkUAdYqJ0mVICLfdajjjg0fgvzA9+GMLYUVuuBkHxomPYqmGXd3bS9suHD+W+ZN7WAsDDCzycGV59bhlFMyi5JpfbGrZV8w/IKF13s0//mcFVO2bQ97KB+ESNkuJgRFeXvdIWrSHrk9Uei9CIXMmQjCFimy52+SvLfRiPGEsoL3O7P4w3Od9ovXP1AspGyHc0GIqHWbiJiEYKiqB6KMeeLeQOgynmBiNhCBWJaiIIh022UiT6KKu9YR3lj/wOTDJ9HIrQ6Kc7iGPXeSOCopLizWqG34GI1T7pTatid/u/zFwaf+Dazqs9BSb2Hn6AK5/cYP3X1mmAbPh3lunTXy6xvrwrrkEI0VgHnNGhedBHzrroMa2e87Ffn0pQgKCwAi0085/0Md6EFja4WBfp/uXzdIdy+/MdcF1BHgE4hEscTnFKhK56m8k3HzddUNVZ3XBDFES8jg7+ljptbWOnj+7vU9J13UqZkJRoD2iU24+guZuj3q9fHT63BpvUv7uQ1kUnMZTrtJkC02XCeP+saXUd/6x4Ca37p8338Wn+8hbB1TiPy3FYM0AKCkbWNf4+H5bYdbjW35fZDtvATFsS9CTAMCLpotUjCbtdKBIEv0r+0F3PLARvfN39wxM3CtjeyFulrEaVx5DeWgqBoXjz9oEKMkYyKVH+he0Fqns7dILtyWtVqvnzB3TY4YpZMdRFpbIhLIAxeqafu0yXmtSXwt6dIEZxKFidmwVJMkYIGRTPQiVf8w6qbcvf0T69PzDn7brA0sDHq6RDxjXovB984Dzr/xhBbOb1mOfN/FCPJ7gwgYtsbk41BL2iQ8JT0Dmu5cl1H3nXzVO/0tiQNoqKgRpf0qZr9S6IqCo/G7X73hUUX4M/nyx++ZrY45NHm26u/bZ2zbwB3Pb0h0XHBtYJhL+TUjpcoSCXCoHHHAe9bPjvQPntUs36536WjbheXMJG3vRg4lxQWRRqLmQ9RO+LMk259ZefW/0jf9FegYs7FkUoB7PjzeTjm5RRjruASFwRMBUw/NRXRIHlu1rQ0kw/RyZwE337mpdvXvf1urge5yC2dVpCelUyTlKDc+bxA1fI1r8owMpMTNcVU8uO9P+yX3n1uchf7NHfPOcQstiSIN+1EEZkzlUEJVWCEiRu79ltW0eLKcMbFGLk7amGs1cWDvzuAJSALGhlIZpBqeR23Lnzy/ZvXAprXBlIUntVF28xkY2/EN+LndwUqQUTls0hrDOlFg7OjX+OOHw/TQaVeeMTTReYL7/aC84Gq/Xo3+Sv+VVcKYCkNiV0jV2ZLy6Q8GkQFM2fVFL6WiQUriVOZ65B5AEMCYegGS9Mo1g3vObcUlzUk5w3WoltqVxzNgIykuGIyEsw3J+nthT1+HTM9Xke8/FghrYawCOpHH9tDRAj1K9EJHHrf8+g3n/YcfMIZQpDhvV93qVsWMqlMpMv5g1i6nW8bZgLhqGrfHVneJxoTKLpUlVqWCm0h8eCk6ScYKRmvzq4uSNSfP84+bUofvpBgHcJIMzVQak8mFbRxY7MO3xlAsNIPZIKvy2Kw1RoxbsLCt39Bt76fp0S99f8HIjPq13JkJdmndL6tu2QAQEZWMXXxQq0rcq4VDKgyI+/sBCJXUejwjPiNa5W5RywKF4fjMY2lJAJIAXpO/X3vI1HmT5PzWpHzdVdSGCcrDHMVoJAcFw8ibAN1cwPbQ0kbCUcJznUW65fq36tY9do82QJYAMw7AMJfSH5UjcGVRrz5HVKoClfIAlZR4rAJqvB5HJaNdRaZsTqtFqHJggEQozjdVjtAREAVHf6H7Xz1kNOsOvbVbe/ium0CrHZrZnBELtiqKp4r4ONTYqRNFRkef0HXvjlg3HXnZiZ19n6yngi5QHMft0qhd9nOxKigFAtGuW0ZM4+gZ5/nKOICo0jBdSpLGBZWyMfkcPaKqxUj8rDbxwCjV5AAFR0LxZeX1TsvCGfrsCQ3yrWQSu+lhCs0oimM2nukK+ea71zV99M7DRVnVW9712JlLHNCVelZLprtCr2UBYVg5kLnLcbqyERxHR8yA6hOj0a6WU0njpKD0MFUWMB5qlTrPQBSdJYrHicwRAZgqc9qz9Mh1o/vOmCLfs7OYN9hPf17nq0e++J19R3dvXsub0l611MVwFmJM7NJKhjjqfiYm0mGURI4XyRwldqOaYDkRGtMpsSf4XAb8J7Ev655AmIEwLCPH8oEpVLQDRDwuBUdMJESosy3JFHy5/+dOfVOdbrrrDbfrpceVyVOOdJyfo7LoSilvSRULHOcwY4ZL2chFAE2qD3jt8tDnBEOlBuJokMi4ltUhFuvYA1TXEavwAKotrAhIRKTUJgeRam8qYKVgDGA0CdAqQH+pyFEeu+zXxjX4YxxBZWmMpSLuAYlPocZt8buqa3lsqe4Si7MmVDkUvau+RMygXfSrrAUUtdBHx2NLalB1GiXagKg0DRAZiYjOEpXPdpYZHtshqtrJcUdkq84My7jCTqk/8/MkurTOcQxUFRqq3AZVFxYq/33OgKg2OJXui5igMvwc99o1KVEenysnmaJSbUQz7zJ3PHbMrCrdHpfzr143VSVGqpkzrk9w1wPUu4r8f8AFn8uQ6vHGZ+L/8xjxzsVCGif4d13L5611PHM+O+fnrRMA/j9u09405ZezXQAAAABJRU5ErkJggg==";
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/dashboard/ui.html.ts
+/**
+* Build the single self-contained dashboard HTML page. No external
+* assets, no bundler, no framework — one inlined string that polls the
+* read-only JSON API (`{basePath}api/aggregate`, `{basePath}api/traces`,
+* `{basePath}api/traces/:id`) and renders:
+*
+* - the {@link TraceAggregate} headline counts (traces / completed /
+*   failed / cancelled / tokens in·out·total / cost);
+* - a newest-first trace list as clickable master rows, each led by a
+*   colour-coded, title-cased type label (Supervisor / Agent / Tool / …);
+* - a two-pane drawer: a collapsible call tree on the left (the nested
+*   span hierarchy) and the selected node's detail on the right — rich
+*   input/output, token breakdown, and a metadata panel (session id,
+*   ids, version, attributes).
+*
+* Span input/output is rendered structurally (chat bubbles / key-value /
+* Markdown), durations in seconds, tokens as ↓input · ↑output · total.
+* Theme is light / dark / system (persisted to localStorage). All UI
+* state — selected trace, selected span, collapsed nodes — lives in JS,
+* NOT the DOM, so the 2s poll never disturbs an open drawer.
+*
+* The list is filterable entirely client-side over the polled traces: a
+* free-text search (name + session), status / type / session filter
+* chips, an "errors only" header toggle, and an optional group-by-session
+* view with collapsible headers. Each tree node and trace row carries a
+* cost heatmap accent scaled to the trace's most expensive node, with a
+* small legend. The drawer's left pane toggles between the nested call
+* TREE and a Gantt TIMELINE (span offset from root start + duration,
+* critical path highlighted). The selected trace and span are reflected
+* in the URL hash (`#trace=&span=`) and re-opened from it on load — so a
+* drawer view is shareable/bookmarkable. A live socket tail is a noted
+* follow-up; this pass stays on the 2s poll.
+*
+* `basePath` and `title` are baked in at serve time. The page is
+* intentionally dependency-free vanilla JS so it works offline.
+*
+* @param basePath Normalized mount path ending in `/` (e.g. `"/"`).
+* @param title Header title shown in the page.
+*/
+function dashboardHtml(basePath, title) {
+	const apiBase = `${basePath}api`;
+	const safeTitle = escapeHtml(title);
+	return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${safeTitle}</title>
+<script>
+(function () {
+  try {
+    var m = localStorage.getItem("panoptic-theme") || "system";
+    var light = m === "light" || (m === "system" && window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches);
+    document.documentElement.setAttribute("data-theme", light ? "light" : "dark");
+  } catch (e) {}
+})();
+<\/script>
+<style>
+  :root {
+    color-scheme: dark;
+    --bg: #0b0d10; --surface: #101317; --surface2: #14171c; --panel: #0d1014;
+    --border: #23272e; --border2: #2d333b;
+    --text: #e6e8eb; --text2: #adbac7; --dim: #8b949e;
+    --sel-bg: #0f1722; --sel-border: #316dca;
+    --ty-agent: #539bf5; --ty-tool: #c297ff; --ty-model: #4cc2b0; --ty-prim: #e3b341; --ty-other: #adbac7;
+    --tok-in: #58a6ff; --tok-out: #3fb950; --tok-total: #b899ff; --cost: #e3b341;
+    --ok: #56d364; --ok-bg: #0f2e1d; --fail: #f85149; --fail-bg: #3a1416; --cancel: #d29922; --cancel-bg: #332701; --other: #8b949e; --other-bg: #1c2128;
+    --code-bg: #0b0d10; --inline-bg: #1c2128; --link: #539bf5;
+  }
+  :root[data-theme="light"] {
+    color-scheme: light;
+    --bg: #ffffff; --surface: #f6f8fa; --surface2: #eef1f4; --panel: #ffffff;
+    --border: #d0d7de; --border2: #afb8c1;
+    --text: #1f2328; --text2: #3b4350; --dim: #636c76;
+    --sel-bg: #ddf4ff; --sel-border: #0969da;
+    --ty-agent: #0969da; --ty-tool: #8250df; --ty-model: #0f7d6b; --ty-prim: #9a6700; --ty-other: #57606a;
+    --tok-in: #0969da; --tok-out: #1a7f37; --tok-total: #8250df; --cost: #9a6700;
+    --ok: #1a7f37; --ok-bg: #dafbe1; --fail: #cf222e; --fail-bg: #ffebe9; --cancel: #9a6700; --cancel-bg: #fff8c5; --other: #57606a; --other-bg: #eaeef2;
+    --code-bg: #f6f8fa; --inline-bg: #eaeef2; --link: #0969da;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); }
+  header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
+  header img.logo { height: 26px; width: 26px; display: block; flex: none; }
+  header h1 { font-size: 16px; margin: 0; font-weight: 600; }
+  header .meta { color: var(--dim); font-size: 12px; }
+  .theme { margin-left: auto; display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
+  .theme button { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 6px; }
+  .theme button:hover { color: var(--text); }
+  .theme button.active { background: var(--surface2); color: var(--text); }
+  .stats { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
+  .stat { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 84px; }
+  .stat .label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
+  .stat .value { font-size: 18px; font-weight: 600; }
+  main { padding: 12px 20px 40px; }
+
+  .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; }
+  .trace-row:hover { background: var(--surface2); border-color: var(--border2); }
+  .trace-row.selected { border-color: var(--sel-border); background: var(--sel-bg); }
+  .rname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .rprompt { font-size: 11px; color: var(--ty-agent); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
+  .rright { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+  .chev { color: var(--dim); font-size: 16px; font-style: normal; }
+
+  .tylabel { font-weight: 600; flex: none; }
+  .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); }
+  .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; flex: none; }
+  .badge.completed { background: var(--ok-bg); color: var(--ok); }
+  .badge.failed { background: var(--fail-bg); color: var(--fail); }
+  .badge.cancelled { background: var(--cancel-bg); color: var(--cancel); }
+  .badge.other { background: var(--other-bg); color: var(--other); }
+  .sdot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }
+  .sdot-completed { background: var(--ok); } .sdot-failed { background: var(--fail); } .sdot-cancelled { background: var(--cancel); } .sdot-other { background: var(--other); }
+  .dim { color: var(--dim); font-size: 12px; }
+  .tok { white-space: nowrap; font-size: 12px; }
+  .tok-in { color: var(--tok-in); } .tok-out { color: var(--tok-out); } .tok-total { color: var(--tok-total); }
+  .cost { color: var(--cost); font-weight: 600; font-size: 12px; white-space: nowrap; }
+
+  .io-body { margin-bottom: 6px; }
+  .piol { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 11px 0 3px; }
+  .messages { display: flex; flex-direction: column; gap: 8px; }
+  .msg-collapse { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+  .msg-collapse > summary { cursor: pointer; padding: 7px 10px; list-style: none; font-size: 12px; display: flex; align-items: center; gap: 6px; }
+  .msg-collapse > summary::-webkit-details-marker { display: none; }
+  .msg-collapse > summary::before { content: "\\25B8"; color: var(--dim); }
+  .msg-collapse[open] > summary::before { content: "\\25BE"; }
+  .msg-collapse[open] > summary { border-bottom: 1px solid var(--border); }
+  .msg-collapse .messages { padding: 8px; }
+  .msg-collapse .msg-count { font-weight: 600; color: var(--text2); }
+  .msg { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
+  .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); }
+  .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); }
+  .msg-content { padding: 8px 10px; }
+  .kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; align-items: start; }
+  .kv-row { display: contents; }
+  .kv-k { color: var(--dim); font-family: ui-monospace, monospace; font-size: 12px; padding: 2px 0; white-space: nowrap; }
+  .kv-v { font-size: 13px; min-width: 0; overflow: auto; padding: 1px 0; word-break: break-word; }
+  .part { border-left: 2px solid var(--border2); padding-left: 8px; margin: 4px 0; }
+  .part-label { font-size: 11px; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
+  .md-h { font-weight: 700; margin: 8px 0 4px; }
+  .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); }
+  .md-p { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
+  .io-body ul, .msg-content ul { margin: 4px 0; padding-left: 18px; }
+  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; }
+  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; }
+  code { background: var(--inline-bg); border-radius: 4px; padding: 1px 4px; font-family: ui-monospace, monospace; font-size: 12px; }
+  a { color: var(--link); }
+  .empty { color: var(--dim); padding: 30px; text-align: center; }
+
+  .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 40; }
+  .backdrop.open { opacity: 1; pointer-events: auto; }
+  .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); }
+  .drawer.open { transform: translateX(0); }
+  .drawer-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+  .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; }
+  .drawer-close:hover { color: var(--text); border-color: var(--border2); }
+  .drawer-body { flex: 1; overflow: hidden; }
+  .dsplit { display: flex; height: 100%; }
+  .dtree { flex: 0 0 44%; overflow: auto; padding: 8px 6px; border-right: 1px solid var(--border); }
+  .ddetail { flex: 1; overflow: auto; padding: 10px 14px; min-width: 0; }
+  .tnode { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
+  .tnode:hover { background: var(--surface); }
+  .tnode.selected { background: var(--sel-bg); border-color: var(--sel-border); }
+  .tname { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tmeta { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; }
+  .twisty { color: var(--dim); font-size: 11px; width: 12px; text-align: center; flex: none; }
+  .tkids { margin-left: 10px; padding-left: 9px; border-left: 1px solid var(--border); }
+  .crumb { font-size: 12px; color: var(--dim); margin-bottom: 6px; word-break: break-all; }
+  .crumb .sep { color: var(--border2); }
+  .dhead-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
+  .meta-sec { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 8px; }
+  .meta-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-bottom: 6px; }
+
+  /* Toolbar: search box + filter chips over the trace list. */
+  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
+  .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; }
+  .search:focus { outline: none; border-color: var(--sel-border); }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+  .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; }
+  .chip:hover { color: var(--text); border-color: var(--border2); }
+  .chip.active { background: var(--sel-bg); border-color: var(--sel-border); color: var(--text); }
+  .chip-clear { color: var(--dim); border-style: dashed; }
+  .chip-group { display: inline-flex; gap: 6px; align-items: center; }
+  .chip-group .gl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
+  .toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--text2); user-select: none; }
+  .toggle input { accent-color: var(--sel-border); }
+  .toggle select { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 12px; cursor: pointer; }
+  .toggle select:hover { border-color: var(--border2); }
+
+  /* Session grouping headers. */
+  .sgroup { margin-bottom: 10px; }
+  .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; }
+  .sgroup-head:hover { border-color: var(--border2); }
+  .sgroup-tw { color: var(--dim); font-size: 11px; width: 12px; text-align: center; flex: none; }
+  .sgroup-id { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sgroup-count { margin-left: auto; color: var(--dim); font-size: 12px; }
+  .sgroup-body { padding-left: 6px; }
+
+  /* Per-type aggregate stats panel (a CSS-grid table above the trace list). */
+  .stats-table { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12px; }
+  .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); }
+  .strow:last-child { border-bottom: none; }
+  .strow.sthead { background: var(--surface2); color: var(--dim); font-weight: 600; }
+  .strow > span { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .strow > .stc-type { text-align: left; }
+  .stc-fail.fail { color: var(--fail); }
+
+  /* Cost heatmap: a left accent bar tinted by relative rollup cost. */
+  .trace-row { position: relative; }
+  .tnode { position: relative; }
+  .heat { position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--cost); }
+
+  /* Timeline / waterfall view in the drawer. */
+  .dview { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
+  .dview button { background: transparent; border: 1px solid var(--border); color: var(--dim); cursor: pointer; font-size: 12px; padding: 4px 10px; border-radius: 6px; }
+  .dview button:hover { color: var(--text); }
+  .dview button.active { background: var(--surface2); color: var(--text); border-color: var(--border2); }
+  .legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
+  .legend .grad { width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--surface2), var(--cost)); border: 1px solid var(--border); }
+  .gantt { padding: 8px 10px; }
+  .grow { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; cursor: pointer; border-radius: 4px; }
+  .grow:hover { background: var(--surface); }
+  .grow.selected { background: var(--sel-bg); }
+  .glabel { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
+  .gtrack { position: relative; flex: 1; height: 14px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
+  .gbar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--ty-agent); min-width: 2px; }
+  .gbar.crit { background: var(--fail); }
+  .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); }
+  .gdur { flex: 0 0 auto; color: var(--dim); white-space: nowrap; min-width: 44px; text-align: right; }
+  .gantt-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--dim); }
+  .gantt-legend .ck { display: inline-flex; align-items: center; gap: 5px; }
+  .gantt-legend .sw { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
+
+  @media (max-width: 560px) {
+    .dsplit { flex-direction: column; }
+    .dtree { flex: none; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--border); }
+    .glabel { flex-basis: 30%; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <img class="logo" src="${WARLOCK_LOGO_DATA_URI}" alt="Warlock" />
+  <h1>${safeTitle}</h1>
+  <span class="meta" id="meta">connecting…</span>
+  <div class="theme" id="theme" role="group" aria-label="Theme" style="margin-left:auto">
+    <button type="button" data-theme-set="light" title="Light" aria-label="Light theme">☀</button>
+    <button type="button" data-theme-set="dark" title="Dark" aria-label="Dark theme">☾</button>
+    <button type="button" data-theme-set="system" title="System" aria-label="System theme">◐</button>
+  </div>
+</header>
+<div class="stats" id="stats"></div>
+<div class="toolbar" id="toolbar">
+  <input class="search" id="search" type="search" placeholder="Search name or session…" aria-label="Search traces" autocomplete="off" />
+  <div class="chips" id="status-chips" role="group" aria-label="Filter by status"></div>
+  <div class="chips" id="type-chips" role="group" aria-label="Filter by type"></div>
+  <div class="chips" id="session-chips" role="group" aria-label="Filter by session"></div>
+  <div class="chips" id="prompt-chips" role="group" aria-label="Filter by prompt version"></div>
+  <label class="toggle" id="group-wrap" title="Group the trace list (mutually exclusive)">
+    Group
+    <select id="group-by" aria-label="Group the trace list">
+      <option value="">None</option>
+      <option value="session">Session</option>
+      <option value="prompt">Prompt</option>
+      <option value="type">Type</option>
+    </select>
+  </label>
+  <label class="toggle" id="stats-wrap" title="Show a per-type aggregate stats panel (count, failure rate, p50/p95 latency, tokens, cost)">
+    <input type="checkbox" id="show-stats" /> Stats
+  </label>
+  <button class="chip chip-clear" id="clear-filters" type="button" title="Clear all filters">Clear</button>
+</div>
+<div id="stats-panel"></div>
+<main id="traces"><div class="empty">Loading…</div></main>
+
+<div class="backdrop" id="backdrop"></div>
+<aside class="drawer" id="drawer" aria-hidden="true" aria-label="Trace detail">
+  <div class="drawer-head" id="drawer-head"></div>
+  <div class="drawer-body" id="drawer-body"></div>
+</aside>
+
+<script>
+(function () {
+  var API = ${JSON.stringify(apiBase)};
+  var BT = String.fromCharCode(96);
+
+  var state = {
+    traces: [], selectedId: null, selectedSpanId: null, collapsed: {}, sig: null,
+    // Client-side filter state (search box + chips + errors-only header toggle).
+    filter: { text: "", statuses: {}, types: {}, sessionId: null, promptKey: null, errorsOnly: false },
+    groupBySession: false,        // session-grouping list toggle
+    groupByPrompt: false,         // prompt-version-grouping list toggle
+    groupByType: false,           // root-type-grouping list toggle
+    showStats: false,             // per-type aggregate-stats panel toggle (independent of grouping)
+    collapsedGroups: {},          // collapsed group headers (session, prompt, or type)
+    view: "tree",                 // drawer left pane: "tree" | "timeline"
+    hashApplied: false            // guards one-time deep-link open on load
+  };
+
+  var STATUS_FILTERS = ["completed", "failed", "cancelled"];
+  var TYPE_FILTERS = ["agent", "tool", "model", "supervisor", "team", "workflow", "orchestrator", "planner", "batch", "callback"];
+  var ERROR_STATUSES = { failed: 1, cancelled: 1 };
+  var NO_SESSION_KEY = "(no session)";
+  var NO_PROMPT_KEY = "(no prompt)";
+  var NO_TYPE_KEY = "(no type)";
+
+  var statusClass = function (s) {
+    if (s === "completed" || s === "failed" || s === "cancelled") return s;
+    return "other";
+  };
+  var esc = function (v) {
+    return String(v).replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  };
+  var num = function (n) { return (n == null ? 0 : n).toLocaleString(); };
+  var fmt = function (v) {
+    if (v == null) return "";
+    if (typeof v === "string") return v;
+    try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
+  };
+
+  function dur(ms) {
+    if (ms == null) return "—";
+    if (ms >= 1000) return (ms / 1000).toFixed(1) + "s";
+    if (ms >= 1) return Math.round(ms) + "ms";
+    return ms.toFixed(1) + "ms";
+  }
+
+  function tokens(u) {
+    if (!u) return "";
+    var i = u.input || 0, o = u.output || 0, t = (u.total != null) ? u.total : (i + o);
+    if (i === 0 && o === 0 && t === 0) return ""; // nothing to show — hide the row
+    return '<span class="tok">'
+      + '<span class="tok-in" title="input tokens">&#8595; ' + num(i) + "</span> "
+      + '<span class="tok-out" title="output tokens">&#8593; ' + num(o) + "</span> "
+      + '<span class="tok-total" title="total tokens">' + num(t) + " total</span></span>";
+  }
+
+  var TYPE_LABELS = {
+    agent: "Agent", tool: "Tool", model: "Model", supervisor: "Supervisor",
+    workflow: "Workflow", orchestrator: "Orchestrator", team: "Team",
+    planner: "Planner", prompt: "Prompt", guardrail: "Guardrail"
+  };
+  var PRIMITIVES = { supervisor: 1, workflow: 1, orchestrator: 1, team: 1, planner: 1 };
+  function typeClass(type) {
+    if (PRIMITIVES[type]) return "ty-prim";
+    if (type === "agent") return "ty-agent";
+    if (type === "tool") return "ty-tool";
+    if (type === "model") return "ty-model";
+    return "ty-other";
+  }
+  function typeLabel(type) {
+    var t = type || "node";
+    var label = TYPE_LABELS[t] || (t.charAt(0).toUpperCase() + t.slice(1));
+    return '<span class="tylabel ' + typeClass(t) + '">' + esc(label) + "</span>";
+  }
+  // Plain-text (no span wrapper) capitalized labels for bare-text sites —
+  // group headers, filter-chip labels — where the colored typeLabel span is
+  // not wanted. Underlying keys/classes/filter values stay raw lowercase.
+  function typeText(type) {
+    var t = type || "node";
+    return TYPE_LABELS[t] || (t.charAt(0).toUpperCase() + t.slice(1));
+  }
+  function statusText(s) {
+    return s ? String(s).charAt(0).toUpperCase() + String(s).slice(1) : s;
+  }
+  function statusDot(s) { return '<span class="sdot sdot-' + statusClass(s) + '" title="' + esc(s) + '"></span>'; }
+
+  function findTrace(id) {
+    for (var i = 0; i < state.traces.length; i++) if (state.traces[i].traceId === id) return state.traces[i];
+    return null;
+  }
+  function findSpan(span, id) {
+    if (span.spanId === id) return span;
+    var k = span.children || [];
+    for (var i = 0; i < k.length; i++) { var r = findSpan(k[i], id); if (r) return r; }
+    return null;
+  }
+  function findPath(span, id, acc) {
+    var p = (acc || []).concat([span]);
+    if (span.spanId === id) return p;
+    var k = span.children || [];
+    for (var i = 0; i < k.length; i++) { var r = findPath(k[i], id, p); if (r) return r; }
+    return null;
+  }
+  function countSpans(span) {
+    var n = 1, k = span.children || [];
+    for (var i = 0; i < k.length; i++) n += countSpans(k[i]);
+    return n;
+  }
+  function traceSig(t) { return t.root.status + "|" + countSpans(t.root) + "|" + t.duration + "|" + (t.usage && t.usage.total); }
+  // Sum every priced lane of a cost object into one USD number.
+  function costSumObj(c) {
+    if (!c) return 0;
+    return (c.input || 0) + (c.output || 0) + (c.cachedInput || 0) + (c.cachedOutput || 0) + (c.reasoning || 0);
+  }
+  // The cost a single span directly carries (on its rolled-up usage).
+  function usageCost(usage) { return usage ? costSumObj(usage.cost) : 0; }
+  // Rollup-aware subtree cost: take a node's own cost when it has one
+  // (it already rolls up its trips); otherwise sum the children. This
+  // avoids double-counting on wrapper nodes (workflow/supervisor roots
+  // carry tokens but no cost, so we descend to the priced agent/model).
+  function rollupCost(span) {
+    var own = usageCost(span.usage);
+    if (own > 0) return own;
+    var sum = 0;
+    (span.children || []).forEach(function (c) { sum += rollupCost(c); });
+    return sum;
+  }
+  function traceCost(t) {
+    var explicit = costSumObj(t.cost);
+    return explicit > 0 ? explicit : rollupCost(t.root);
+  }
+  // Format a USD amount; tiny per-node costs need more decimals to read.
+  function money(n) {
+    if (!n) return "$0";
+    return "$" + (n < 0.01 ? n.toFixed(6) : n.toFixed(4));
+  }
+
+  // --- Client-side filtering / grouping / heatmap ----------------------
+  // These mirror the pure, unit-tested helpers in trace-filter.ts. Keep
+  // the two in sync: trace-filter.ts is the spec, this is its inlined twin.
+  function anySelected(map) {
+    for (var k in map) { if (map[k]) return true; }
+    return false;
+  }
+  function matchesFilter(t) {
+    var f = state.filter, root = t.root;
+    if (f.errorsOnly && !ERROR_STATUSES[root.status]) return false;
+    if (anySelected(f.statuses) && !f.statuses[root.status]) return false;
+    if (anySelected(f.types) && !f.types[root.type]) return false;
+    if (f.sessionId && t.sessionId !== f.sessionId) return false;
+    if (f.promptKey && tracePromptKey(t) !== f.promptKey) return false;
+    var text = (f.text || "").trim().toLowerCase();
+    if (text) {
+      var hay = (String(root.name) + " " + (t.sessionId || "")).toLowerCase();
+      if (hay.indexOf(text) === -1) return false;
+    }
+    return true;
+  }
+  function filteredTraces() {
+    var out = [];
+    for (var i = 0; i < state.traces.length; i++) if (matchesFilter(state.traces[i])) out.push(state.traces[i]);
+    return out;
+  }
+  function groupBySession(list) {
+    var order = [], byKey = {};
+    for (var i = 0; i < list.length; i++) {
+      var key = list[i].sessionId || NO_SESSION_KEY;
+      if (!byKey[key]) { byKey[key] = []; order.push(key); }
+      byKey[key].push(list[i]);
+    }
+    return order.map(function (k) { return { sessionId: k, traces: byKey[k] }; });
+  }
+  // Group by prompt version (name@version) — the second group-by dimension
+  // beside session. Mirrors groupByPrompt in trace-filter.ts. Unlinked runs
+  // bucket under NO_PROMPT_KEY so they stay visible.
+  function groupByPrompt(list) {
+    var order = [], byKey = {};
+    for (var i = 0; i < list.length; i++) {
+      var key = tracePromptKey(list[i]) || NO_PROMPT_KEY;
+      if (!byKey[key]) { byKey[key] = []; order.push(key); }
+      byKey[key].push(list[i]);
+    }
+    return order.map(function (k) { return { groupKey: k, traces: byKey[k] }; });
+  }
+  // Group by root type (agent/workflow/supervisor/planner/…) — the coarsest
+  // group-by dimension. Mirrors groupByType in trace-filter.ts. root.type is
+  // always present, so the NO_TYPE_KEY bucket is only a defensive fallback.
+  function typeGroups(list) {
+    var order = [], byKey = {};
+    for (var i = 0; i < list.length; i++) {
+      var key = (list[i].root && list[i].root.type) || NO_TYPE_KEY;
+      if (!byKey[key]) { byKey[key] = []; order.push(key); }
+      byKey[key].push(list[i]);
+    }
+    return order.map(function (k) { return { groupKey: k, traces: byKey[k] }; });
+  }
+  // Inlined twins of percentile + aggregateByType in trace-filter.ts (the
+  // spec). Power the per-type stats panel from the same filtered list the
+  // trace view renders, so the panel honors active filters with no API call.
+  function percentile(values, p) {
+    if (!values.length) return 0;
+    var sorted = values.slice().sort(function (a, b) { return a - b; });
+    var rank = Math.ceil((p / 100) * sorted.length) - 1;
+    var index = Math.min(Math.max(rank, 0), sorted.length - 1);
+    return sorted[index];
+  }
+  function aggregateByType(list) {
+    var order = [], byKey = {};
+    for (var i = 0; i < list.length; i++) {
+      var key = (list[i].root && list[i].root.type) || NO_TYPE_KEY;
+      if (!byKey[key]) { byKey[key] = []; order.push(key); }
+      byKey[key].push(list[i]);
+    }
+    return order.map(function (k) {
+      var bucket = byKey[k];
+      var durations = [], failed = 0, tokens = 0, cost = 0;
+      for (var j = 0; j < bucket.length; j++) {
+        var t = bucket[j];
+        durations.push(t.duration);
+        if (ERROR_STATUSES[t.root.status]) failed += 1;
+        tokens += (t.usage && t.usage.total) || 0;
+        cost += traceCost(t);
+      }
+      return {
+        type: k, count: bucket.length, failed: failed,
+        failRate: bucket.length ? failed / bucket.length : 0,
+        p50: percentile(durations, 50), p95: percentile(durations, 95),
+        tokens: tokens, cost: cost
+      };
+    });
+  }
+  // Per-type aggregate panel above the trace list. Honors the active filters
+  // (computed over filteredTraces) and re-renders on every poll/filter tick.
+  function renderStatsPanel() {
+    var host = document.getElementById("stats-panel");
+    if (!host) return;
+    var stats = state.showStats ? aggregateByType(filteredTraces()) : [];
+    if (!stats.length) { host.innerHTML = ""; return; }
+    var head = '<div class="strow sthead">'
+      + '<span class="stc-type">Type</span><span>Count</span><span>Failed</span>'
+      + '<span>p50</span><span>p95</span><span>Tokens</span><span>Cost</span></div>';
+    var rows = stats.map(function (s) {
+      var failTxt = s.failed
+        ? s.failed + " (" + Math.round(s.failRate * 100) + "%)"
+        : "0";
+      return '<div class="strow">'
+        + '<span class="stc-type">' + typeLabel(s.type) + "</span>"
+        + '<span>' + num(s.count) + "</span>"
+        + '<span class="stc-fail' + (s.failed ? " fail" : "") + '">' + failTxt + "</span>"
+        + '<span class="dim">' + dur(s.p50) + "</span>"
+        + '<span class="dim">' + dur(s.p95) + "</span>"
+        + '<span>' + num(s.tokens) + "</span>"
+        + '<span class="cost">' + money(s.cost) + "</span>"
+        + "</div>";
+    }).join("");
+    host.innerHTML = '<div class="stats-table">' + head + rows + "</div>";
+  }
+  // Largest single-node rollup cost in a subtree — heatmap denominator.
+  function maxNodeCost(span) {
+    var max = rollupCost(span);
+    (span.children || []).forEach(function (c) { var m = maxNodeCost(c); if (m > max) max = m; });
+    return max;
+  }
+  // Intensity in [0,1] of a node's cost vs the trace max. Free trace → 0.
+  function heatIntensity(nodeCost, maxCost) {
+    if (maxCost <= 0 || nodeCost <= 0) return 0;
+    var r = nodeCost / maxCost;
+    return r > 1 ? 1 : r;
+  }
+  // The distinct sessionIds present across the polled traces, first-seen
+  // order, capped so the chip row never overflows the toolbar.
+  function presentSessions() {
+    var seen = {}, out = [];
+    for (var i = 0; i < state.traces.length && out.length < 12; i++) {
+      var s = state.traces[i].sessionId;
+      if (s && !seen[s]) { seen[s] = 1; out.push(s); }
+    }
+    return out;
+  }
+  // The root types actually present in the polled traces — so the type filter
+  // chips show only what exists (no dead "Tool"/"Model"/"Batch"/… chips), in
+  // canonical TYPE_FILTERS order. An active-but-aged-out selection stays so
+  // the filter is never stranded with no chip to clear it.
+  function presentTypes() {
+    var seen = {};
+    for (var i = 0; i < state.traces.length; i++) {
+      var t = state.traces[i].root && state.traces[i].root.type;
+      if (t) seen[t] = 1;
+    }
+    for (var k in state.filter.types) { if (state.filter.types[k]) seen[k] = 1; }
+    var out = [];
+    for (var j = 0; j < TYPE_FILTERS.length; j++) {
+      if (seen[TYPE_FILTERS[j]]) { out.push(TYPE_FILTERS[j]); delete seen[TYPE_FILTERS[j]]; }
+    }
+    for (var x in seen) { out.push(x); }
+    return out;
+  }
+  // The distinct prompt name@version keys present across the polled traces,
+  // first-seen order, capped so the chip row never overflows the toolbar.
+  function presentPrompts() {
+    var seen = {}, out = [];
+    for (var i = 0; i < state.traces.length && out.length < 12; i++) {
+      var p = tracePromptKey(state.traces[i]);
+      if (p && !seen[p]) { seen[p] = 1; out.push(p); }
+    }
+    return out;
+  }
+
+  function mdInline(s) {
+    s = s.replace(/\\*\\*([^*]+)\\*\\*/g, "<strong>$1</strong>");
+    var codeRe = new RegExp(BT + "([^" + BT + "]+)" + BT, "g");
+    s = s.replace(codeRe, "<code>$1</code>");
+    s = s.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    return s;
+  }
+  function mdToHtml(raw) {
+    var src = esc(String(raw));
+    var fence = BT + BT + BT;
+    var html = "", idx = 0;
+    while (true) {
+      var start = src.indexOf(fence, idx);
+      if (start === -1) { html += mdBlocks(src.slice(idx)); break; }
+      html += mdBlocks(src.slice(idx, start));
+      var nl = src.indexOf("\\n", start + 3);
+      var bodyStart = (nl === -1) ? start + 3 : nl + 1;
+      var end = src.indexOf(fence, bodyStart);
+      if (end === -1) { html += mdBlocks(src.slice(start)); break; }
+      html += '<pre class="code">' + src.slice(bodyStart, end).replace(/\\n$/, "") + "</pre>";
+      idx = end + 3;
+    }
+    return html;
+  }
+  function mdBlocks(src) {
+    var lines = src.split("\\n"), html = "", inList = false;
+    function closeList() { if (inList) { html += "</ul>"; inList = false; } }
+    for (var i = 0; i < lines.length; i++) {
+      var ln = lines[i];
+      var h = ln.match(/^(#{1,4})\\s+(.*)$/);
+      if (h) { closeList(); html += '<div class="md-h md-h' + h[1].length + '">' + mdInline(h[2]) + "</div>"; continue; }
+      var li = ln.match(/^\\s*[-*]\\s+(.*)$/);
+      if (li) { if (!inList) { html += "<ul>"; inList = true; } html += "<li>" + mdInline(li[1]) + "</li>"; continue; }
+      if (ln.trim() === "") { closeList(); continue; }
+      closeList();
+      html += '<div class="md-p">' + mdInline(ln) + "</div>";
+    }
+    closeList();
+    return html;
+  }
+  function renderKv(obj) {
+    var keys = Object.keys(obj);
+    if (!keys.length) return '<span class="dim">{}</span>';
+    return '<div class="kv">' + keys.map(function (k) {
+      var v = obj[k], vs;
+      if (v === null || v === undefined) vs = '<span class="dim">null</span>';
+      else if (typeof v === "object") vs = '<pre class="mini">' + esc(fmt(v)) + "</pre>";
+      else vs = esc(String(v));
+      return '<div class="kv-row"><span class="kv-k">' + esc(k) + '</span><span class="kv-v">' + vs + "</span></div>";
+    }).join("") + "</div>";
+  }
+  function isMessageArray(v) {
+    return Array.isArray(v) && v.length > 0 && v.every(function (m) { return m && typeof m === "object" && typeof m.role === "string"; });
+  }
+  function renderContent(c) {
+    if (c == null) return '<span class="dim">—</span>';
+    if (typeof c === "string") return mdToHtml(c);
+    if (Array.isArray(c)) return c.map(renderPart).join("");
+    if (typeof c === "object") return renderKv(c);
+    return esc(String(c));
+  }
+  function renderPart(p) {
+    if (p == null) return "";
+    if (typeof p === "string") return mdToHtml(p);
+    if (p.type === "text" && typeof p.text === "string") return mdToHtml(p.text);
+    return '<div class="part"><div class="part-label">' + esc(p.type || "part") + "</div>" + renderKv(p) + "</div>";
+  }
+  function previewText(c) {
+    if (c == null) return "";
+    if (typeof c === "string") return c.replace(/\\s+/g, " ").slice(0, 70);
+    if (Array.isArray(c)) {
+      for (var i = 0; i < c.length; i++) {
+        var p = c[i];
+        if (typeof p === "string") return p.slice(0, 70);
+        if (p && p.type === "text" && p.text) return String(p.text).slice(0, 70);
+      }
+      return "";
+    }
+    try { return JSON.stringify(c).slice(0, 70); } catch (e) { return ""; }
+  }
+  function renderMsg(m) {
+    var role = m.role || "msg";
+    var body = (m.content !== undefined) ? renderContent(m.content) : renderKv(m);
+    return '<div class="msg"><div class="msg-role role-' + esc(role) + '">' + esc(role) + '</div><div class="msg-content">' + body + "</div></div>";
+  }
+  function renderMessages(arr) {
+    var inner = '<div class="messages">' + arr.map(renderMsg).join("") + "</div>";
+    // Short threads render inline; a long history (10-15+ messages) collapses
+    // behind a <details> so it doesn't blow up the detail pane — the summary
+    // shows the count + a preview of the latest message; click to expand.
+    if (arr.length <= 6) return inner;
+    var last = arr[arr.length - 1] || {};
+    var preview = (last.role ? last.role + ": " : "") + previewText(last.content);
+    return '<details class="msg-collapse"><summary><span class="msg-count">' + arr.length
+      + ' messages</span> <span class="dim">' + esc(preview) + "</span></summary>" + inner + "</details>";
+  }
+  function smartValue(v) {
+    if (v === null || v === undefined) return '<span class="dim">—</span>';
+    if (typeof v === "string") {
+      var t = v.trim();
+      if (t.charAt(0) === "{" || t.charAt(0) === "[") { try { return smartValue(JSON.parse(t)); } catch (e) {} }
+      return mdToHtml(v);
+    }
+    if (isMessageArray(v)) return renderMessages(v);
+    if (Array.isArray(v)) {
+      return '<div class="kv">' + v.map(function (item, i) {
+        var vs = (item && typeof item === "object") ? renderKv(item) : esc(String(item));
+        return '<div class="kv-row"><span class="kv-k">' + i + '</span><span class="kv-v">' + vs + "</span></div>";
+      }).join("") + "</div>";
+    }
+    if (typeof v === "object") return renderKv(v);
+    return esc(String(v));
+  }
+
+  function renderStats(a) {
+    var cost = a.cost ? (((a.cost.input || 0) + (a.cost.output || 0) + (a.cost.cachedInput || 0) + (a.cost.cachedOutput || 0)).toFixed(4)) : "—";
+    var u = a.usage || {};
+    var cells = [
+      ["traces", num(a.traces), null],
+      ["completed", num(a.completed), null],
+      ["failed", num(a.failed), null],
+      ["cancelled", num(a.cancelled), null],
+      ["&#8595; tokens in", num(u.input), "var(--tok-in)"],
+      ["&#8593; tokens out", num(u.output), "var(--tok-out)"],
+      ["tokens total", num(u.total), "var(--tok-total)"],
+      ["cost (usd)", cost, null]
+    ];
+    document.getElementById("stats").innerHTML = cells.map(function (c) {
+      var st = c[2] ? ' style="color:' + c[2] + '"' : "";
+      return '<div class="stat"><div class="label"' + st + ">" + c[0] + '</div><div class="value"' + st + ">" + esc(c[1]) + "</div></div>";
+    }).join("");
+  }
+
+  // Per-row heat accent: tint the left edge by the trace's own cost
+  // relative to the most expensive trace currently in the (filtered) list.
+  function heatStyle(intensity) {
+    if (intensity <= 0) return "";
+    var op = (0.12 + intensity * 0.88).toFixed(3);
+    return ' style="--heat-op:' + op + '"';
+  }
+  function heatBar(intensity) {
+    if (intensity <= 0) return "";
+    var op = (0.12 + intensity * 0.88).toFixed(3);
+    return '<span class="heat" style="opacity:' + op + '" title="relative cost"></span>';
+  }
+  function renderRow(t, maxTraceCost) {
+    var sel = t.traceId === state.selectedId ? " selected" : "";
+    var intensity = heatIntensity(traceCost(t), maxTraceCost);
+    var pk = tracePromptKey(t);
+    return '<div class="trace-row' + sel + '" data-id="' + esc(t.traceId) + '">'
+      + heatBar(intensity)
+      + typeLabel(t.root.type)
+      + '<span class="badge ' + statusClass(t.root.status) + '">' + esc(statusText(t.root.status)) + "</span>"
+      + '<span class="rname">' + esc(t.root.name) + "</span>"
+      + (pk ? '<span class="rprompt" title="prompt version">' + esc(pk) + "</span>" : "")
+      + (t.sessionId ? '<span class="dim">' + esc(t.sessionId) + "</span>" : "")
+      + '<span class="rright">' + tokens(t.usage) + '<span class="dim">· ' + dur(t.duration) + "</span></span>"
+      + '<i class="chev">›</i>'
+      + "</div>";
+  }
+  function maxTraceCostOf(list) {
+    var max = 0;
+    for (var i = 0; i < list.length; i++) { var c = traceCost(list[i]); if (c > max) max = c; }
+    return max;
+  }
+  // Render grouped buckets. "groups" is the normalized list each group-by
+  // dimension produces — a groupKey + its traces. Shared by session, prompt,
+  // and type. Optional "labelFn" maps the raw groupKey to a display label and
+  // switches the header to the compact "Label (N)" form (used by type, whose
+  // keys are friendly enums); session/prompt omit it and keep their raw id
+  // plus the right-aligned "N trace(s)" count. data-group stays the RAW key
+  // so collapse state keys consistently regardless of the display label.
+  function renderGroups(groups, maxTraceCost, labelFn) {
+    return groups.map(function (g) {
+      var collapsed = !!state.collapsedGroups[g.groupKey];
+      var idAndCount = labelFn
+        ? '<span class="sgroup-id">' + esc(labelFn(g.groupKey)) + " (" + g.traces.length + ")</span>"
+        : '<span class="sgroup-id">' + esc(g.groupKey) + "</span>"
+          + '<span class="sgroup-count">' + g.traces.length + " trace(s)</span>";
+      var head = '<div class="sgroup-head" data-group="' + esc(g.groupKey) + '">'
+        + '<span class="sgroup-tw">' + (collapsed ? "▸" : "▾") + "</span>"
+        + idAndCount + "</div>";
+      var body = collapsed ? "" : '<div class="sgroup-body">'
+        + g.traces.map(function (t) { return renderRow(t, maxTraceCost); }).join("") + "</div>";
+      return '<div class="sgroup">' + head + body + "</div>";
+    }).join("");
+  }
+  // Normalize a session group ({sessionId,…}) to the shared {groupKey,…} shape.
+  function sessionGroups(list) {
+    return groupBySession(list).map(function (g) { return { groupKey: g.sessionId, traces: g.traces }; });
+  }
+  function renderList() {
+    var list = filteredTraces();
+    // Keep the per-type stats panel in sync — runs on every poll + filter
+    // change, before the empty-state early return below.
+    renderStatsPanel();
+    var host = document.getElementById("traces");
+    if (!list.length) {
+      host.innerHTML = state.traces.length
+        ? '<div class="empty">No traces match the current filters.</div>'
+        : '<div class="empty">No traces yet. Run an observed flow and they will appear here.</div>';
+      return;
+    }
+    var maxTraceCost = maxTraceCostOf(list);
+    // One grouping dimension renders at a time. The toggles are kept mutually
+    // exclusive in their change handlers, so this precedence chain (most
+    // specific → coarsest: prompt → session → type) only ever matches one.
+    var html;
+    if (state.groupByPrompt) html = renderGroups(groupByPrompt(list), maxTraceCost);
+    else if (state.groupBySession) html = renderGroups(sessionGroups(list), maxTraceCost);
+    else if (state.groupByType) html = renderGroups(typeGroups(list), maxTraceCost, typeText);
+    else html = list.map(function (t) { return renderRow(t, maxTraceCost); }).join("");
+    host.innerHTML = html;
+    document.getElementById("meta").textContent = list.length + " of " + state.traces.length + " trace(s) · live";
+  }
+
+  // --- Filter UI rendering ---------------------------------------------
+  function renderChips() {
+    var f = state.filter;
+    document.getElementById("status-chips").innerHTML =
+      '<span class="chip-group"><span class="gl">status</span>'
+      + STATUS_FILTERS.map(function (s) {
+        return '<button type="button" class="chip' + (f.statuses[s] ? " active" : "") + '" data-status="' + esc(s) + '">' + esc(statusText(s)) + "</button>";
+      }).join("")
+      + '<button type="button" class="chip' + (f.errorsOnly ? " active" : "") + '" data-errors="1" title="Show only failed / cancelled traces">Errors only</button>'
+      + "</span>";
+    var types = presentTypes();
+    document.getElementById("type-chips").innerHTML = types.length
+      ? '<span class="chip-group"><span class="gl">type</span>'
+        + types.map(function (ty) {
+          return '<button type="button" class="chip' + (f.types[ty] ? " active" : "") + '" data-type="' + esc(ty) + '">' + esc(typeText(ty)) + "</button>";
+        }).join("") + "</span>"
+      : "";
+    var sessions = presentSessions();
+    document.getElementById("session-chips").innerHTML = sessions.length
+      ? '<span class="chip-group"><span class="gl">session</span>'
+        + sessions.map(function (s) {
+          return '<button type="button" class="chip' + (f.sessionId === s ? " active" : "") + '" data-session="' + esc(s) + '">' + esc(s) + "</button>";
+        }).join("") + "</span>"
+      : "";
+    // Prompt-version filter chips — one per distinct name@version seen.
+    // Hidden entirely until a named-prompt run shows up, so the toolbar stays
+    // clean for projects that don't use the ai.prompts registry.
+    var prompts = presentPrompts();
+    document.getElementById("prompt-chips").innerHTML = prompts.length
+      ? '<span class="chip-group"><span class="gl">prompt</span>'
+        + prompts.map(function (p) {
+          return '<button type="button" class="chip' + (f.promptKey === p ? " active" : "") + '" data-prompt="' + esc(p) + '">' + esc(p) + "</button>";
+        }).join("") + "</span>"
+      : "";
+  }
+
+  // Heatmap denominator for the currently rendered trace tree. Set by
+  // renderDrawer before each renderTree pass so node accents are scaled
+  // against the most expensive node in this trace.
+  var currentTreeMax = 0;
+  function renderTree(span) {
+    var hasKids = span.children && span.children.length;
+    var collapsed = !!state.collapsed[span.spanId];
+    var sel = span.spanId === state.selectedSpanId ? " selected" : "";
+    var tw = hasKids ? (collapsed ? "▸" : "▾") : "·";
+    var node = '<div class="tnode' + sel + '" data-span="' + esc(span.spanId) + '">'
+      + heatBar(heatIntensity(rollupCost(span), currentTreeMax))
+      + '<span class="twisty"' + (hasKids ? ' data-toggle="' + esc(span.spanId) + '"' : "") + ">" + tw + "</span>"
+      + typeLabel(span.type)
+      + '<span class="tname">' + esc(span.name) + "</span>"
+      + statusDot(span.status)
+      + '<span class="tmeta">' + dur(span.duration) + "</span>"
+      + "</div>";
+    var kids = (hasKids && !collapsed) ? '<div class="tkids">' + span.children.map(renderTree).join("") + "</div>" : "";
+    return node + kids;
+  }
+
+  // --- Timeline / waterfall (Gantt) ------------------------------------
+  // Flatten the span tree to a depth-first ordered list, each entry
+  // carrying its offset (ms from root start) + duration, so we can lay
+  // out concurrency without re-walking. parseTs tolerates a missing/bad
+  // startedAt by falling back to 0 so a bad clock never NaNs the bars.
+  function parseTs(s) { var n = Date.parse(s); return isNaN(n) ? 0 : n; }
+  // Render an ISO timestamp for the detail drawer as a readable, locale-
+  // unambiguous local time — "28 Jun 2026 03:16 PM" (named month so there is
+  // no M/D vs D/M confusion; minute precision). Falls back to the raw string
+  // on a bad clock.
+  var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  function pad2(n) { return (n < 10 ? "0" : "") + n; }
+  function fmtTs(iso) {
+    if (!iso) return "—";
+    var d = new Date(iso);
+    if (isNaN(d.getTime())) return String(iso);
+    var h = d.getHours();
+    var ampm = h >= 12 ? "PM" : "AM";
+    var h12 = h % 12;
+    if (h12 === 0) h12 = 12;
+    return d.getDate() + " " + MONTHS[d.getMonth()] + " " + d.getFullYear()
+      + " " + pad2(h12) + ":" + pad2(d.getMinutes()) + " " + ampm;
+  }
+  function flattenSpans(root) {
+    var base = parseTs(root.startedAt);
+    var rows = [];
+    (function walk(span, depth) {
+      var start = parseTs(span.startedAt) - base;
+      if (start < 0) start = 0;
+      var d = (span.duration != null) ? span.duration : 0;
+      rows.push({ span: span, depth: depth, offset: start, duration: d, end: start + d });
+      (span.children || []).forEach(function (c) { walk(c, depth + 1); });
+    })(root, 0);
+    return rows;
+  }
+  // Critical path: from the root, repeatedly step into the child whose
+  // end time is latest (the one that pushed the parent's finish). Marks
+  // the spans that determine total wall-clock time.
+  function criticalPath(root) {
+    var crit = {};
+    (function walk(span) {
+      crit[span.spanId] = 1;
+      var kids = span.children || [];
+      if (!kids.length) return;
+      var pick = null, pe = -1;
+      for (var i = 0; i < kids.length; i++) {
+        var e = parseTs(kids[i].startedAt) + ((kids[i].duration != null) ? kids[i].duration : 0);
+        if (e > pe) { pe = e; pick = kids[i]; }
+      }
+      if (pick) walk(pick);
+    })(root);
+    return crit;
+  }
+  function renderGantt(root) {
+    var rows = flattenSpans(root);
+    var span0 = rows.length ? rows[0] : null;
+    var total = 0;
+    rows.forEach(function (r) { if (r.end > total) total = r.end; });
+    if (total <= 0) total = (span0 && span0.duration) || 1;
+    var crit = criticalPath(root);
+    var body = rows.map(function (r) {
+      var leftPct = (r.offset / total) * 100;
+      var widthPct = Math.max((r.duration / total) * 100, 0.6);
+      var sel = r.span.spanId === state.selectedSpanId ? " selected" : "";
+      var isCrit = crit[r.span.spanId] ? " crit" : "";
+      var barClass = "gbar bar-" + statusClass(r.span.status) + (isCrit ? " crit" : "");
+      var pad = "padding-left:" + (r.depth * 10) + "px";
+      return '<div class="grow' + sel + '" data-span="' + esc(r.span.spanId) + '">'
+        + '<span class="glabel" style="' + pad + '" title="' + esc(r.span.name) + '">' + esc(r.span.name) + "</span>"
+        + '<span class="gtrack"><span class="' + barClass + '" style="left:' + leftPct.toFixed(2) + "%;width:" + widthPct.toFixed(2) + '%"></span></span>'
+        + '<span class="gdur">' + dur(r.duration) + "</span>"
+        + "</div>";
+    }).join("");
+    var legend = '<div class="gantt-legend">'
+      + '<span class="ck"><span class="sw" style="background:var(--fail)"></span> critical path</span>'
+      + '<span class="ck"><span class="sw" style="background:var(--ty-agent)"></span> span (offset + duration)</span>'
+      + "</div>";
+    return '<div class="gantt">' + (body || '<div class="dim">No spans.</div>') + legend + "</div>";
+  }
+
+  // The name@version of the named prompt this span's run resolved, read
+  // from the collector's prompt-version-linkage attributes. Returns null when
+  // the run carried no named prompt. Mirrors tracePromptKey in trace-filter.ts.
+  function spanPromptKey(span) {
+    var a = span && span.attributes;
+    if (!a || typeof a !== "object") return null;
+    var name = a["agent.promptName"];
+    if (typeof name !== "string" || !name.length) return null;
+    var ver = a["agent.promptVersion"];
+    var vl = (typeof ver === "string" && ver.length) ? ver : "1";
+    return name + "@" + vl;
+  }
+  function tracePromptKey(t) { return spanPromptKey(t.root); }
+
+  // Humanize a metadata key for display: split dot.notation + camelCase,
+  // Title-case each word, upcase "id". e.g. "supervisor.terminatedBy" →
+  // "Supervisor Terminated By", "span id" → "Span ID", "agent.trips" →
+  // "Agent Trips". Underlying attribute keys are untouched.
+  // NB: this whole script is a template literal — regex backslash classes
+  // MUST be double-escaped (\\s, not \s) or "\\s" collapses to a literal "s".
+  function humanizeKey(key) {
+    return String(key).split(/[.\\s]+/).map(function (seg) {
+      return seg.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/\\s+/).map(function (w) {
+        if (!w) return w;
+        if (w.toLowerCase() === "id") return "ID";
+        return w.charAt(0).toUpperCase() + w.slice(1);
+      }).join(" ");
+    }).join(" ");
+  }
+
+  function renderMeta(span, trace) {
+    var rows = [];
+    // Absolute wall-clock span — the head shows only the elapsed duration, so
+    // surface when this node actually started/ended for log correlation.
+    rows.push(["started", fmtTs(span.startedAt)]);
+    rows.push(["ended", fmtTs(span.endedAt)]);
+    var sid = span.sessionId || trace.sessionId;
+    if (sid) rows.push(["session", sid]);
+    // Prompt-version linkage: surface the resolved named prompt as one clean
+    // name@version row right under session, so the panel reads it as a
+    // first-class dimension rather than two raw attribute keys.
+    var pk = spanPromptKey(span);
+    if (pk) rows.push(["prompt", pk]);
+    if (span.version) rows.push(["version", span.version]);
+    rows.push(["span id", span.spanId]);
+    if (span.parentSpanId) rows.push(["parent", span.parentSpanId]);
+    rows.push(["trace id", span.traceId || trace.traceId]);
+    var attrs = span.attributes;
+    // Skip the two raw prompt keys — already shown as the clean prompt row.
+    if (attrs && typeof attrs === "object") Object.keys(attrs).forEach(function (k) {
+      if (k === "agent.promptName" || k === "agent.promptVersion") return;
+      rows.push([k, attrs[k]]);
+    });
+    var kv = rows.map(function (r) {
+      var v = r[1];
+      var vs = (v && typeof v === "object") ? '<pre class="mini">' + esc(fmt(v)) + "</pre>" : esc(String(v));
+      return '<div class="kv-row"><span class="kv-k">' + esc(humanizeKey(r[0])) + '</span><span class="kv-v">' + vs + "</span></div>";
+    }).join("");
+    return '<div class="meta-sec"><div class="meta-title">metadata</div><div class="kv">' + kv + "</div></div>";
+  }
+
+  function renderDetail(span, trace) {
+    var path = findPath(trace.root, span.spanId) || [span];
+    var crumb = path.map(function (p, i) { return (i ? '<span class="sep"> › </span>' : "") + "<span>" + esc(p.name) + "</span>"; }).join("");
+    var io = "";
+    if (span.input !== undefined) io += '<div class="piol" style="color:var(--tok-in)">input</div><div class="io-body">' + smartValue(span.input) + "</div>";
+    if (span.output !== undefined) io += '<div class="piol" style="color:var(--tok-out)">output</div><div class="io-body">' + smartValue(span.output) + "</div>";
+    if (span.error) io += '<div class="piol" style="color:var(--fail)">error</div><div class="io-body">' + smartValue(span.error) + "</div>";
+
+    // Tokens + cost line — omitted entirely when the node has neither
+    // (e.g. a free tool with zero usage), so the panel stays uncluttered.
+    var tk = tokens(span.usage);
+    var c = rollupCost(span);
+    var metaLine = (tk || c > 0)
+      ? '<div style="margin-bottom:4px">' + tk + (c > 0 ? '<span class="cost">' + (tk ? " · " : "") + money(c) + "</span>" : "") + "</div>"
+      : "";
+
+    return '<div class="crumb">' + crumb + "</div>"
+      + '<div class="dhead-row">' + typeLabel(span.type) + '<span style="font-weight:600">' + esc(span.name) + "</span>"
+      + '<span class="badge ' + statusClass(span.status) + '">' + esc(statusText(span.status)) + "</span>"
+      + '<span class="dim">· ' + dur(span.duration) + "</span></div>"
+      + metaLine
+      + io
+      + renderMeta(span, trace);
+  }
+
+  function headHtml(t) {
+    var cost = traceCost(t);
+    return typeLabel(t.root.type)
+      + '<span class="badge ' + statusClass(t.root.status) + '">' + esc(statusText(t.root.status)) + "</span>"
+      + '<span style="font-weight:600">' + esc(t.root.name) + "</span>"
+      + '<span class="dim">· ' + dur(t.duration) + "</span>"
+      + tokens(t.usage)
+      + (cost > 0 ? '<span class="cost">· ' + money(cost) + "</span>" : "")
+      + '<button class="drawer-close" type="button" title="Close (Esc)">✕ Close</button>';
+  }
+
+  function viewSwitcher() {
+    var tree = state.view === "tree" ? " active" : "";
+    var tl = state.view === "timeline" ? " active" : "";
+    return '<div class="dview" id="drawer-view">'
+      + '<button type="button" class="' + tree.trim() + '" data-view="tree">Tree</button>'
+      + '<button type="button" class="' + tl.trim() + '" data-view="timeline">Timeline</button>'
+      + '<span class="legend" title="Node colour = relative cost"><span>cost</span><span class="grad"></span></span>'
+      + "</div>";
+  }
+  function leftPaneHtml(t) {
+    if (state.view === "timeline") return renderGantt(t.root);
+    currentTreeMax = maxNodeCost(t.root);
+    return renderTree(t.root);
+  }
+  function renderDrawer(t) {
+    document.getElementById("drawer-head").innerHTML = headHtml(t);
+    var sel = findSpan(t.root, state.selectedSpanId) || t.root;
+    document.getElementById("drawer-body").innerHTML =
+      '<div class="dsplit"><div class="dtree" id="drawer-tree">' + viewSwitcher() + leftPaneHtml(t) + "</div>"
+      + '<div class="ddetail" id="drawer-detail">' + renderDetail(sel, t) + "</div></div>";
+  }
+  // Re-render only the left pane (after a view switch) without disturbing
+  // the detail panel or scroll position of the detail side.
+  function renderLeftPane() {
+    var t = findTrace(state.selectedId);
+    if (!t) return;
+    document.getElementById("drawer-tree").innerHTML = viewSwitcher() + leftPaneHtml(t);
+  }
+
+  function selectSpan(id) {
+    state.selectedSpanId = id;
+    var t = findTrace(state.selectedId);
+    if (!t) return;
+    document.getElementById("drawer-detail").innerHTML = renderDetail(findSpan(t.root, id) || t.root, t);
+    // Highlight in whichever left pane is active (tree nodes or Gantt rows).
+    var nodes = document.querySelectorAll(".tnode[data-span], .grow[data-span]");
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].getAttribute("data-span") === id) nodes[i].classList.add("selected");
+      else nodes[i].classList.remove("selected");
+    }
+    writeHash();
+  }
+  function toggleSpan(id) {
+    state.collapsed[id] = !state.collapsed[id];
+    var t = findTrace(state.selectedId);
+    if (t) renderLeftPane();
+  }
+  function setView(v) {
+    if (state.view === v) return;
+    state.view = v;
+    renderLeftPane();
+  }
+
+  function openTrace(id, spanId) {
+    state.selectedId = id;
+    var t = findTrace(id);
+    if (t) {
+      state.selectedSpanId = (spanId && findSpan(t.root, spanId)) ? spanId : t.root.spanId;
+      state.collapsed = {};
+      renderDrawer(t);
+      state.sig = traceSig(t);
+    }
+    document.getElementById("drawer").classList.add("open");
+    document.getElementById("drawer").setAttribute("aria-hidden", "false");
+    document.getElementById("backdrop").classList.add("open");
+    markSelectedRow();
+    writeHash();
+  }
+  function closeDrawer() {
+    state.selectedId = null; state.selectedSpanId = null; state.sig = null;
+    document.getElementById("drawer").classList.remove("open");
+    document.getElementById("drawer").setAttribute("aria-hidden", "true");
+    document.getElementById("backdrop").classList.remove("open");
+    markSelectedRow();
+    writeHash();
+  }
+
+  // --- Deep-links: reflect the open trace + span in the URL hash -------
+  // #trace=<id>&span=<id>. Written on open/close/select; read on load and
+  // on manual hash edits (back/forward). A guard flag stops writeHash from
+  // re-triggering our own hashchange handler in a loop.
+  var suppressHash = false;
+  function writeHash() {
+    var h = "";
+    if (state.selectedId) {
+      h = "#trace=" + encodeURIComponent(state.selectedId);
+      if (state.selectedSpanId && state.selectedSpanId !== state.selectedId) {
+        h += "&span=" + encodeURIComponent(state.selectedSpanId);
+      }
+    }
+    suppressHash = true;
+    try {
+      if (history && history.replaceState) history.replaceState(null, "", h || (location.pathname + location.search));
+      else location.hash = h;
+    } catch (e) { location.hash = h; }
+    suppressHash = false;
+  }
+  function readHash() {
+    var raw = (location.hash || "").replace(/^#/, "");
+    var out = { trace: null, span: null };
+    raw.split("&").forEach(function (kv) {
+      var i = kv.indexOf("=");
+      if (i === -1) return;
+      var k = kv.slice(0, i), v = decodeURIComponent(kv.slice(i + 1));
+      if (k === "trace") out.trace = v;
+      else if (k === "span") out.span = v;
+    });
+    return out;
+  }
+  // Open whatever the hash points at, if that trace is loaded. Returns
+  // true when it acted so the caller can mark the one-time load as done.
+  function applyHash() {
+    var h = readHash();
+    if (!h.trace) {
+      if (state.selectedId) closeDrawer();
+      return true;
+    }
+    if (!findTrace(h.trace)) return false; // not polled yet — retry next poll
+    openTrace(h.trace, h.span || undefined);
+    return true;
+  }
+  function markSelectedRow() {
+    var rows = document.querySelectorAll(".trace-row");
+    for (var i = 0; i < rows.length; i++) {
+      if (rows[i].getAttribute("data-id") === state.selectedId) rows[i].classList.add("selected");
+      else rows[i].classList.remove("selected");
+    }
+  }
+
+  document.getElementById("traces").addEventListener("click", function (e) {
+    var head = e.target.closest ? e.target.closest(".sgroup-head") : null;
+    if (head) {
+      var g = head.getAttribute("data-group");
+      state.collapsedGroups[g] = !state.collapsedGroups[g];
+      renderList();
+      return;
+    }
+    var row = e.target.closest ? e.target.closest(".trace-row") : null;
+    if (row) openTrace(row.getAttribute("data-id"));
+  });
+  document.getElementById("drawer-head").addEventListener("click", function (e) {
+    if (e.target.closest && e.target.closest(".drawer-close")) closeDrawer();
+  });
+  document.getElementById("drawer-body").addEventListener("click", function (e) {
+    var vb = e.target.closest ? e.target.closest("[data-view]") : null;
+    if (vb) { setView(vb.getAttribute("data-view")); return; }
+    var tog = e.target.closest ? e.target.closest("[data-toggle]") : null;
+    if (tog) { toggleSpan(tog.getAttribute("data-toggle")); return; }
+    var node = e.target.closest ? e.target.closest(".tnode[data-span], .grow[data-span]") : null;
+    if (node) selectSpan(node.getAttribute("data-span"));
+  });
+  document.getElementById("backdrop").addEventListener("click", closeDrawer);
+  document.addEventListener("keydown", function (e) { if (e.key === "Escape" || e.keyCode === 27) closeDrawer(); });
+
+  // --- Filter / toolbar wiring -----------------------------------------
+  function toggleMapKey(map, key) { if (map[key]) delete map[key]; else map[key] = 1; }
+  document.getElementById("status-chips").addEventListener("click", function (e) {
+    if (!e.target.closest) return;
+    // The "Errors only" shortcut chip lives in the status group now.
+    if (e.target.closest("[data-errors]")) {
+      state.filter.errorsOnly = !state.filter.errorsOnly;
+      renderChips(); renderList();
+      return;
+    }
+    var b = e.target.closest("[data-status]");
+    if (!b) return;
+    toggleMapKey(state.filter.statuses, b.getAttribute("data-status"));
+    renderChips(); renderList();
+  });
+  document.getElementById("type-chips").addEventListener("click", function (e) {
+    var b = e.target.closest ? e.target.closest("[data-type]") : null;
+    if (!b) return;
+    toggleMapKey(state.filter.types, b.getAttribute("data-type"));
+    renderChips(); renderList();
+  });
+  document.getElementById("session-chips").addEventListener("click", function (e) {
+    var b = e.target.closest ? e.target.closest("[data-session]") : null;
+    if (!b) return;
+    var s = b.getAttribute("data-session");
+    state.filter.sessionId = (state.filter.sessionId === s) ? null : s;
+    renderChips(); renderList();
+  });
+  document.getElementById("prompt-chips").addEventListener("click", function (e) {
+    var b = e.target.closest ? e.target.closest("[data-prompt]") : null;
+    if (!b) return;
+    var p = b.getAttribute("data-prompt");
+    state.filter.promptKey = (state.filter.promptKey === p) ? null : p;
+    renderChips(); renderList();
+  });
+  document.getElementById("search").addEventListener("input", function (e) {
+    state.filter.text = e.target.value || "";
+    renderList();
+  });
+  // One mutually-exclusive grouping dimension, chosen from the Group dropdown.
+  // "" = no grouping; renderList's precedence chain only ever matches one.
+  // Switching dimensions drops stale collapsed-header keys.
+  function setGrouping(dim) {
+    state.groupBySession = dim === "session";
+    state.groupByPrompt = dim === "prompt";
+    state.groupByType = dim === "type";
+    state.collapsedGroups = {};
+    renderList();
+  }
+  document.getElementById("group-by").addEventListener("change", function (e) {
+    setGrouping(e.target.value);
+  });
+  document.getElementById("show-stats").addEventListener("change", function (e) {
+    state.showStats = !!e.target.checked;
+    renderStatsPanel();
+  });
+  document.getElementById("clear-filters").addEventListener("click", function () {
+    state.filter = { text: "", statuses: {}, types: {}, sessionId: null, promptKey: null, errorsOnly: false };
+    document.getElementById("search").value = "";
+    renderChips(); renderList();
+  });
+
+  // Back/forward or a manual hash edit re-syncs the open trace/span.
+  window.addEventListener("hashchange", function () {
+    if (suppressHash) return;
+    applyHash();
+  });
+
+  var THEME_KEY = "panoptic-theme";
+  var mql = window.matchMedia ? window.matchMedia("(prefers-color-scheme: light)") : null;
+  function applyTheme(mode) {
+    try { localStorage.setItem(THEME_KEY, mode); } catch (e) {}
+    var light = mode === "light" || (mode === "system" && mql && mql.matches);
+    document.documentElement.setAttribute("data-theme", light ? "light" : "dark");
+    var btns = document.querySelectorAll("[data-theme-set]");
+    for (var i = 0; i < btns.length; i++) btns[i].classList.toggle("active", btns[i].getAttribute("data-theme-set") === mode);
+  }
+  document.getElementById("theme").addEventListener("click", function (e) {
+    var b = e.target.closest ? e.target.closest("[data-theme-set]") : null;
+    if (b) applyTheme(b.getAttribute("data-theme-set"));
+  });
+  if (mql && mql.addEventListener) mql.addEventListener("change", function () {
+    var cur = "system";
+    try { cur = localStorage.getItem(THEME_KEY) || "system"; } catch (e) {}
+    if (cur === "system") applyTheme("system");
+  });
+  var savedTheme = "system";
+  try { savedTheme = localStorage.getItem(THEME_KEY) || "system"; } catch (e) {}
+  applyTheme(savedTheme);
+
+  function poll() {
+    Promise.all([
+      fetch(API + "/aggregate").then(function (r) { return r.json(); }),
+      fetch(API + "/traces").then(function (r) { return r.json(); })
+    ]).then(function (res) {
+      renderStats(res[0]);
+      state.traces = res[1] || [];
+      document.getElementById("meta").textContent = state.traces.length + " trace(s) · live";
+      renderChips();
+      renderList();
+      // Open whatever the URL hash deep-links to, once the target trace
+      // has actually arrived in a poll (it may not be in the first batch).
+      if (!state.hashApplied) {
+        if (applyHash()) state.hashApplied = true;
+      } else if (state.selectedId) {
+        var t = findTrace(state.selectedId);
+        if (t) { var sig = traceSig(t); if (sig !== state.sig) { renderDrawer(t); state.sig = sig; } }
+      }
+    }).catch(function (e) {
+      document.getElementById("meta").textContent = "disconnected";
+    });
+  }
+
+  // FOLLOW-UP: a live socket tail (SSE / WebSocket push) is out of scope
+  // for this pass; the dashboard stays on the 2s JSON poll below. When
+  // added, it should reuse renderList/renderDrawer and keep the poll as a
+  // reconnect fallback.
+  poll();
+  setInterval(poll, 2000);
+})();
+<\/script>
+</body>
+</html>`;
+}
+/** Escape a string for safe interpolation into static HTML text. */
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/dashboard/serve.ts
+/**
+* Security response headers added to every dashboard response (S4):
+* block MIME-sniffing, framing, referrer leakage, and lock the page's
+* content sources down to itself (the UI is fully self-contained — no CDN).
+*/
+const SECURITY_HEADERS = {
+	"x-content-type-options": "nosniff",
+	"x-frame-options": "DENY",
+	"referrer-policy": "no-referrer",
+	"content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; base-uri 'none'; form-action 'none'; frame-ancestors 'none'"
+};
+/** Extract the host (no port) from a `Host` header value. */
+function hostHeaderName(hostHeader) {
+	if (!hostHeader) return void 0;
+	if (hostHeader.startsWith("[")) return hostHeader.slice(0, hostHeader.indexOf("]") + 1);
+	const colon = hostHeader.indexOf(":");
+	return colon === -1 ? hostHeader : hostHeader.slice(0, colon);
+}
+/** Constant-ish bearer-token check from `Authorization` header or `?token=`. */
+function isAuthorized(req, url, token) {
+	const header = req.headers.authorization;
+	if (header && header === `Bearer ${token}`) return true;
+	return url.searchParams.get("token") === token;
+}
+/**
+* Build the `node:http` request handler for the dashboard over a given
+* trace store. Kept separate from the server lifecycle so it can be unit
+* tested by feeding it a fake `req`/`res` without binding a port.
+*
+* Routes (all under `config.basePath`, all read-only):
+*
+* - `GET api/traces`        → `store.query(parseQuery(searchParams))`
+* - `GET api/traces/:id`    → `store.get(id)` or `404`
+* - `GET api/aggregate`     → `store.aggregate(parseQuery(searchParams))`
+* - `GET {basePath}`        → the self-contained HTML page
+*
+* Anything else → `404`. Non-`GET` methods → `405`. The store shapes
+* ({@link Trace}/{@link TraceSpan}) are already JSON-safe, so responses
+* are a plain `JSON.stringify` with no serializer.
+*
+* @example
+* const handler = createRequestHandler(store, { basePath: "/", title: "Panoptic" });
+* http.createServer(handler).listen(4319, "127.0.0.1");
+*/
+function createRequestHandler(store, config) {
+	const base = config.basePath;
+	const apiPrefix = `${base}api`;
+	return function handle(req, res) {
+		if (req.method !== "GET") {
+			sendJson(res, 405, { error: "method_not_allowed" });
+			return;
+		}
+		const url = new URL(req.url ?? "/", "http://localhost");
+		const pathname = url.pathname;
+		const host = hostHeaderName(req.headers.host);
+		if (!host || !config.allowedHosts.includes(host.toLowerCase())) {
+			sendJson(res, 403, { error: "host_not_allowed" });
+			return;
+		}
+		if (config.authToken && !isAuthorized(req, url, config.authToken)) {
+			sendJson(res, 401, { error: "unauthorized" });
+			return;
+		}
+		if (pathname === `${apiPrefix}/traces`) {
+			sendJson(res, 200, store.query(parseQuery(url.searchParams)));
+			return;
+		}
+		if (pathname.startsWith(`${apiPrefix}/traces/`)) {
+			const traceId = decodeURIComponent(pathname.slice(`${apiPrefix}/traces/`.length));
+			const trace = traceId.length > 0 ? store.get(traceId) : void 0;
+			if (trace === void 0) {
+				sendJson(res, 404, {
+					error: "trace_not_found",
+					traceId
+				});
+				return;
+			}
+			sendJson(res, 200, trace);
+			return;
+		}
+		if (pathname === `${apiPrefix}/aggregate`) {
+			sendJson(res, 200, store.aggregate(parseQuery(url.searchParams)));
+			return;
+		}
+		if (pathname === base || pathname === base.replace(/\/$/, "")) {
+			res.writeHead(200, {
+				"content-type": "text/html; charset=utf-8",
+				...SECURITY_HEADERS
+			});
+			res.end(dashboardHtml(base, config.title));
+			return;
+		}
+		sendJson(res, 404, { error: "not_found" });
+	};
+}
+/** Write a JSON response with the given status code and security headers. */
+function sendJson(res, status, body) {
+	res.writeHead(status, {
+		"content-type": "application/json; charset=utf-8",
+		...SECURITY_HEADERS
+	});
+	res.end(JSON.stringify(body));
+}
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/dashboard/dashboard.ts
+const DEFAULT_PORT = 4319;
+const DEFAULT_HOST = "127.0.0.1";
+const DEFAULT_TITLE = "Panoptic";
+/**
+* Start the local Panoptic dashboard over a {@link TraceStoreContract} —
+* a zero-dependency `node:http` server that serves a read-only JSON API
+* and one self-contained HTML page polling it. The store is the live
+* object the collector fills, so each poll reflects the latest completed
+* traces with no extra wiring.
+*
+* This is a low-level building block. The documented path is
+* `ai.config({ panoptic: { dashboard } })`, which constructs (or reuses)
+* the store and calls this for you. Use it directly only when you manage
+* the store yourself.
+*
+* Binds loopback-only by default (`127.0.0.1`) so prompt content is never
+* exposed to the LAN. Pass `port: 0` for an ephemeral port — the resolved
+* port comes back on the handle. A port already in use rejects with a
+* clear, actionable `Error` rather than the raw `EADDRINUSE`.
+*
+* @example
+* const store = createInMemoryTraceStore();
+* const handle = await dashboard(store, { port: 4319, open: true });
+* console.log(handle.url); // http://127.0.0.1:4319/
+* // ...later:
+* await handle.close();
+*/
+function dashboard(store, options = {}) {
+	const port = options.port ?? DEFAULT_PORT;
+	const host = options.host ?? DEFAULT_HOST;
+	const title = options.title ?? DEFAULT_TITLE;
+	const basePath = normalizeBasePath(options.basePath);
+	if (!isLoopbackHost(host) && !options.authToken) return Promise.reject(/* @__PURE__ */ new Error(`Panoptic dashboard: binding to a non-loopback host ("${host}") requires an \`authToken\` (the dashboard exposes raw prompt content). Pass \`authToken\`, or bind to 127.0.0.1.`));
+	const allowedHosts = (options.allowedHosts ?? defaultAllowedHosts(host)).map((h) => h.toLowerCase());
+	const server = (0, node_http.createServer)(createRequestHandler(store, {
+		basePath,
+		title,
+		authToken: options.authToken,
+		allowedHosts
+	}));
+	return new Promise((resolve, reject) => {
+		const onError = (error) => {
+			server.off("error", onError);
+			if (error.code === "EADDRINUSE") {
+				reject(/* @__PURE__ */ new Error(`Panoptic dashboard: port ${port} in use; pass { port: 0 } for an ephemeral port`));
+				return;
+			}
+			reject(error);
+		};
+		server.on("error", onError);
+		server.listen(port, host, () => {
+			server.off("error", onError);
+			const address = server.address();
+			const resolvedPort = typeof address === "object" && address !== null ? address.port : port;
+			const url = `http://${host}:${resolvedPort}${basePath}`;
+			if (options.open) openBrowser(url);
+			resolve({
+				url,
+				port: resolvedPort,
+				close() {
+					return new Promise((closeResolve, closeReject) => {
+						server.close((closeError) => {
+							if (closeError) {
+								closeReject(closeError);
+								return;
+							}
+							closeResolve();
+						});
+					});
+				}
+			});
+		});
+	});
+}
+/** Loopback hosts the dashboard may bind without an auth token. */
+function isLoopbackHost(host) {
+	const h = host.toLowerCase();
+	return h === "127.0.0.1" || h === "::1" || h === "[::1]" || h === "localhost";
+}
+/**
+* Default `Host` allowlist for a given bind host. A loopback bind accepts
+* the loopback names a browser would send; a non-loopback bind defaults to
+* just the bound host (callers can widen via `allowedHosts`).
+*/
+function defaultAllowedHosts(host) {
+	if (isLoopbackHost(host)) return [
+		"localhost",
+		"127.0.0.1",
+		"[::1]",
+		"::1"
+	];
+	return [host];
+}
+/**
+* Normalize a caller `basePath` to a leading-and-trailing-slash form the
+* router can prefix routes with. `undefined` / `""` → `"/"`.
+*/
+function normalizeBasePath(basePath) {
+	if (basePath === void 0 || basePath.length === 0 || basePath === "/") return "/";
+	const withLeading = basePath.startsWith("/") ? basePath : `/${basePath}`;
+	return withLeading.endsWith("/") ? withLeading : `${withLeading}/`;
+}
+/**
+* Best-effort open of the default browser at `url`. Fire-and-forget and
+* fully swallowed — failing to open a browser must never reject the
+* dashboard start. Uses the platform's native opener via a lazy
+* `node:child_process` import so the dependency is paid only when
+* `open: true`.
+*/
+function openBrowser(url) {
+	import("node:child_process").then(({ spawn }) => {
+		const child = spawn(process.platform === "win32" ? "cmd" : process.platform === "darwin" ? "open" : "xdg-open", process.platform === "win32" ? [
+			"/c",
+			"start",
+			"",
+			url
+		] : [url], {
+			stdio: "ignore",
+			detached: true
+		});
+		child.on("error", () => {});
+		child.unref();
+	}).catch(() => {});
+}
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/dashboard/trace-filter.ts
+/** Statuses the errors-only toggle keeps. */
+const ERROR_STATUSES = ["failed", "cancelled"];
+/**
+* Span-attribute keys the collector stamps with prompt-version linkage when
+* an agent ran against a *named* `ai.prompts` builder. Read here (not
+* imported) so this pure module stays decoupled from the collector.
+*/
+const PROMPT_NAME_ATTR = "agent.promptName";
+const PROMPT_VERSION_ATTR = "agent.promptVersion";
+/**
+* The `name@version` prompt key a trace falls under, read from its root
+* span's prompt-version-linkage attributes (`agent.promptName` /
+* `agent.promptVersion`). Returns `undefined` when the run carried no named
+* prompt (raw-string / anonymous / no prompt), so callers can bucket those
+* under a synthetic "no prompt" key or skip them.
+*
+* The version is included so two runs of the same prompt name at different
+* versions are distinct keys — that is the whole point of the linkage: to
+* group / filter by the *exact* prompt revision that produced a run.
+*/
+function tracePromptKey(trace) {
+	const attributes = trace.root.attributes;
+	if (attributes === void 0) return;
+	const name = attributes[PROMPT_NAME_ATTR];
+	if (typeof name !== "string" || name.length === 0) return;
+	const version = attributes[PROMPT_VERSION_ATTR];
+	return `${name}@${typeof version === "string" && version.length > 0 ? version : "1"}`;
+}
+/**
+* Does a single trace pass the given filter? Pure predicate — all
+* conditions are ANDed; an unset field never excludes. Used by
+* {@link filterTraces} and mirrored by the dashboard's inlined JS.
+*/
+function matchesFilter(trace, filter) {
+	const root = trace.root;
+	if (filter.errorsOnly === true && !ERROR_STATUSES.includes(root.status)) return false;
+	if (filter.statuses !== void 0 && filter.statuses.length > 0) {
+		if (!filter.statuses.includes(root.status)) return false;
+	}
+	if (filter.types !== void 0 && filter.types.length > 0) {
+		if (!filter.types.includes(root.type)) return false;
+	}
+	if (filter.sessionId !== void 0 && filter.sessionId.length > 0) {
+		if (trace.sessionId !== filter.sessionId) return false;
+	}
+	if (filter.promptKey !== void 0 && filter.promptKey.length > 0) {
+		if (tracePromptKey(trace) !== filter.promptKey) return false;
+	}
+	const text = filter.text?.trim().toLowerCase();
+	if (text !== void 0 && text.length > 0) {
+		if (!`${root.name} ${trace.sessionId ?? ""}`.toLowerCase().includes(text)) return false;
+	}
+	return true;
+}
+/** Narrow a trace list to those matching the filter, order preserved. */
+function filterTraces(traces, filter) {
+	return traces.filter((trace) => matchesFilter(trace, filter));
+}
+/**
+* The grouping key a trace falls under when the list is grouped by
+* session. Traces without a `sessionId` collapse into one synthetic
+* "(no session)" bucket so they remain visible.
+*/
+const NO_SESSION_KEY = "(no session)";
+/**
+* Group an (already filtered, newest-first) trace list by session id,
+* preserving first-seen order of both the groups and the traces within
+* each. Sessionless traces bucket under {@link NO_SESSION_KEY}.
+*/
+function groupBySession(traces) {
+	const order = [];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const trace of traces) {
+		const key = trace.sessionId ?? "(no session)";
+		let bucket = byKey.get(key);
+		if (bucket === void 0) {
+			bucket = [];
+			byKey.set(key, bucket);
+			order.push(key);
+		}
+		bucket.push(trace);
+	}
+	return order.map((sessionId) => ({
+		sessionId,
+		traces: byKey.get(sessionId) ?? []
+	}));
+}
+/**
+* The grouping key a trace falls under when the list is grouped by prompt
+* version. Runs that resolved no named prompt collapse into one synthetic
+* "(no prompt)" bucket so they remain visible.
+*/
+const NO_PROMPT_KEY = "(no prompt)";
+/**
+* Group an (already filtered, newest-first) trace list by prompt version —
+* the `name@version` key {@link tracePromptKey} derives from each run's
+* prompt-version-linkage attributes. Preserves first-seen order of both the
+* groups and the traces within each. Runs with no named prompt bucket under
+* {@link NO_PROMPT_KEY}.
+*
+* The dashboard offers this as a second group-by dimension beside session,
+* so a reviewer can see every run of "support@2" together and compare its
+* cost / failure rate against "support@3".
+*/
+function groupByPrompt(traces) {
+	const order = [];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const trace of traces) {
+		const key = tracePromptKey(trace) ?? "(no prompt)";
+		let bucket = byKey.get(key);
+		if (bucket === void 0) {
+			bucket = [];
+			byKey.set(key, bucket);
+			order.push(key);
+		}
+		bucket.push(trace);
+	}
+	return order.map((promptKey) => ({
+		promptKey,
+		traces: byKey.get(promptKey) ?? []
+	}));
+}
+/**
+* The grouping key a trace falls under when the list is grouped by root
+* type. `root.type` is always present, so this is only a defensive
+* fallback for a malformed trace with no typed root.
+*/
+const NO_TYPE_KEY = "(no type)";
+/**
+* Group an (already filtered, newest-first) trace list by root type —
+* the `agent` / `workflow` / `supervisor` / `orchestrator` / `planner` /
+* `tool` / `batch` / `callback` discriminator on each trace's root span.
+* Preserves first-seen order of both the groups and the traces within each.
+*
+* The dashboard offers this as the coarsest group-by dimension beside
+* session and prompt: when a benchmark floods the flat list with hundreds
+* of one primitive (e.g. standalone `agent` runs), this collapses them
+* behind a per-type header so the structural primitives (the lone planner,
+* the team, the supervisors) are one click away instead of a scroll past.
+*/
+function groupByType(traces) {
+	const order = [];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const trace of traces) {
+		const key = trace.root.type || "(no type)";
+		let bucket = byKey.get(key);
+		if (bucket === void 0) {
+			bucket = [];
+			byKey.set(key, bucket);
+			order.push(key);
+		}
+		bucket.push(trace);
+	}
+	return order.map((type) => ({
+		type,
+		traces: byKey.get(type) ?? []
+	}));
+}
+/**
+* Nearest-rank percentile of `values` at `p` (0–100). Returns 0 for an
+* empty input and sorts a copy so the caller's array is left untouched.
+*/
+function percentile(values, p) {
+	if (values.length === 0) return 0;
+	const sorted = values.slice().sort((a, b) => a - b);
+	const rank = Math.ceil(p / 100 * sorted.length) - 1;
+	return sorted[Math.min(Math.max(rank, 0), sorted.length - 1)];
+}
+/**
+* One trace's total USD cost: its explicit root-usage cost when priced,
+* else the rollup of its subtree. Mirrors the dashboard's `traceCost` so the
+* stats panel and the trace rows agree to the cent.
+*/
+function traceCost(trace) {
+	const own = costSumObj(trace.usage.cost);
+	return own > 0 ? own : rollupCost(trace.root);
+}
+/**
+* Aggregate an (already filtered) trace list into one {@link TypeStat} row
+* per root type — count, failure rate, p50/p95 latency, total tokens, total
+* cost — preserving first-seen type order. Powers the dashboard's per-type
+* stats panel; computed over the same filtered list the trace view shows, so
+* the panel always reflects the active filters.
+*/
+function aggregateByType(traces) {
+	const order = [];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const trace of traces) {
+		const key = trace.root.type || "(no type)";
+		let bucket = byKey.get(key);
+		if (bucket === void 0) {
+			bucket = [];
+			byKey.set(key, bucket);
+			order.push(key);
+		}
+		bucket.push(trace);
+	}
+	return order.map((type) => {
+		const bucket = byKey.get(type) ?? [];
+		const durations = bucket.map((trace) => trace.duration);
+		let failed = 0;
+		let tokens = 0;
+		let cost = 0;
+		for (const trace of bucket) {
+			if (ERROR_STATUSES.includes(trace.root.status)) failed += 1;
+			tokens += trace.usage.total ?? 0;
+			cost += traceCost(trace);
+		}
+		return {
+			type,
+			count: bucket.length,
+			failed,
+			failRate: bucket.length > 0 ? failed / bucket.length : 0,
+			p50: percentile(durations, 50),
+			p95: percentile(durations, 95),
+			tokens,
+			cost
+		};
+	});
+}
+/**
+* Sum every priced lane of a usage cost object into one USD number.
+* Mirrors the dashboard's `costSumObj` so heatmap intensities computed
+* here match what the page renders.
+*/
+function costSumObj(cost) {
+	if (cost === void 0) return 0;
+	return (cost.input ?? 0) + (cost.output ?? 0) + (cost.cachedInput ?? 0) + (cost.cachedOutput ?? 0) + (cost.reasoning ?? 0);
+}
+/**
+* Rollup-aware subtree cost: a node's own cost when it carries one
+* (it already rolls up its trips), otherwise the sum of its children.
+* Avoids double-counting wrapper nodes (workflow/supervisor roots carry
+* tokens but no cost). Mirrors the dashboard's `rollupCost`.
+*/
+function rollupCost(span) {
+	const own = costSumObj(span.usage.cost);
+	if (own > 0) return own;
+	let sum = 0;
+	for (const child of span.children) sum += rollupCost(child);
+	return sum;
+}
+/**
+* Heatmap intensity in `[0, 1]` for a node's `rollupCost` relative to the
+* trace's most-expensive node. The dashboard tints each tree node's left
+* accent by this. `max <= 0` (a free trace) yields `0` for every node so
+* the heatmap simply stays cold rather than dividing by zero.
+*/
+function heatIntensity(nodeCost, maxCost) {
+	if (maxCost <= 0 || nodeCost <= 0) return 0;
+	const ratio = nodeCost / maxCost;
+	return ratio > 1 ? 1 : ratio;
+}
+/**
+* The largest single-node {@link rollupCost} anywhere in a span tree —
+* the denominator for {@link heatIntensity}. Walks the whole subtree.
+*/
+function maxNodeCost(root) {
+	let max = rollupCost(root);
+	for (const child of root.children) {
+		const childMax = maxNodeCost(child);
+		if (childMax > max) max = childMax;
+	}
+	return max;
+}
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/config/apply-panoptic-config.ts
+let applied;
+/**
+* Read a {@link PanopticConfig} and wire panoptic onto the core observe
+* seam — the bridge `ai.config({ panoptic })` resolves through. Builds a
+* collector via the EXISTING {@link panoptic} factory (reusing its
+* collection pipeline, not reinventing it), registers it once via core's
+* `registerObserver` (the subscriber's `collect(report)` structurally IS
+* an {@link Observer}, threaded through a thin wrapper), sets
+* `observeAll`, and — when `config.dashboard` is set — starts the
+* dashboard over the config's store (a store-shaped exporter, or a fresh
+* in-memory store panoptic registers when none was supplied).
+*
+* **Idempotent.** Safe to call on every `onConfigApplied` notification:
+* the observer is registered once, the dashboard started once. Repeat
+* calls update `observeAll` to the latest value but never double-register
+* or double-start. `undefined` config is a no-op (nothing wired).
+*
+* @returns the resolved store-shaped exporter when the dashboard needs
+* one and a fresh store was created — primarily for tests; callers can
+* ignore it.
+*/
+function applyPanopticConfig(config) {
+	if (config === void 0) return;
+	(0, _warlock_js_ai.setObserveAll)(Boolean(config.observeAll));
+	if (applied === void 0) {
+		const exporters = [...config.exporters ?? []];
+		let store = findStore(exporters);
+		let cacheStore;
+		if (store === void 0 && config.dashboard) {
+			if (config.cache !== void 0) {
+				cacheStore = createCacheTraceStore(config.cache);
+				store = cacheStore;
+			} else store = createInMemoryTraceStore();
+			exporters.push(store);
+		}
+		const panopticInstance = panoptic({
+			exporters,
+			captureContent: config.captureContent,
+			fullHistory: config.fullHistory
+		});
+		(0, _warlock_js_ai.registerObserver)(toObserver(panopticInstance));
+		applied = { panopticInstance };
+		if (config.dashboard && store !== void 0) {
+			const resolvedStore = store;
+			(cacheStore !== void 0 ? cacheStore.ready() : Promise.resolve()).catch(() => {}).then(() => startDashboard(resolvedStore, config.dashboard ?? {})).then((handle) => {
+				if (applied !== void 0) applied.dashboardHandle = handle;
+			});
+		}
+	}
+}
+/**
+* Wrap a {@link Panoptic} subscriber as a core {@link Observer}. The
+* subscriber already exposes `collect(report)` with a matching signature,
+* but the thin wrapper makes the structural adaptation explicit and keeps
+* the registered object a minimal `Observer` rather than the whole
+* subscriber surface.
+*/
+function toObserver(instance) {
+	return { collect(report) {
+		return instance.collect(report);
+	} };
+}
+/**
+* Find the first exporter that satisfies the {@link TraceStoreContract}
+* read surface (`query` / `get` / `aggregate`) — the in-memory store
+* doubles as an exporter, so a store passed via `exporters` is reused for
+* the dashboard rather than creating a second one.
+*/
+function findStore(exporters) {
+	for (const exporter of exporters) {
+		const candidate = exporter;
+		if (typeof candidate.query === "function" && typeof candidate.get === "function" && typeof candidate.aggregate === "function") return candidate;
+	}
+}
+/** Start the dashboard, normalizing the `true | DashboardOptions` switch. */
+function startDashboard(store, dashboardConfig) {
+	return dashboard(store, typeof dashboardConfig === "object" ? dashboardConfig : {});
+}
+
+//#endregion
+//#region ../@warlock.js/ai-panoptic/src/register.ts
+(0, _warlock_js_ai.onConfigApplied)((config) => {
+	applyPanopticConfig(config.panoptic);
+});
+applyPanopticConfig((0, _warlock_js_ai.getAIConfig)().panoptic);
+
 //#endregion
 exports.GEN_AI_ATTRIBUTES = GEN_AI_ATTRIBUTES;
+exports.NO_PROMPT_KEY = NO_PROMPT_KEY;
+exports.NO_SESSION_KEY = NO_SESSION_KEY;
+exports.NO_TYPE_KEY = NO_TYPE_KEY;
 exports.WARLOCK_ATTRIBUTES = WARLOCK_ATTRIBUTES;
+exports.aggregateByType = aggregateByType;
+exports.applyPanopticConfig = applyPanopticConfig;
 exports.consoleExporter = consoleExporter;
+exports.createCacheTraceStore = createCacheTraceStore;
 exports.createCollector = createCollector;
 exports.createInMemoryTraceStore = createInMemoryTraceStore;
 exports.createPanopticMiddleware = createPanopticMiddleware;
+exports.dashboard = dashboard;
 exports.emptyUsage = emptyUsage;
 exports.extractSpanAttributes = extractSpanAttributes;
 exports.fileExporter = fileExporter;
+exports.filterTraces = filterTraces;
+exports.formatSpanIO = formatSpanIO;
 exports.formatSpanLine = formatSpanLine;
+exports.groupByPrompt = groupByPrompt;
+exports.groupBySession = groupBySession;
+exports.groupByType = groupByType;
+exports.heatIntensity = heatIntensity;
 exports.langfuseExporter = langfuseExporter;
 exports.matchTrace = matchTrace;
+exports.matchesFilter = matchesFilter;
+exports.maxNodeCost = maxNodeCost;
 exports.normalizeError = normalizeError;
 exports.otelExporter = otelExporter;
 exports.panoptic = panoptic;
+exports.percentile = percentile;
 exports.reportToSpan = reportToSpan;
 exports.reportToTrace = reportToTrace;
+exports.rollupCost = rollupCost;
 exports.sumUsage = sumUsage;
 exports.toGenAiAttributes = toGenAiAttributes;
 exports.totalCostUsd = totalCostUsd;
+exports.traceCost = traceCost;
+exports.tracePromptKey = tracePromptKey;
 exports.walkSpans = walkSpans;
 //# sourceMappingURL=index.cjs.map