@agimon-ai/po-log 0.0.0-alpha.0

package/dist/extensions/web.mjs

@@ -0,0 +1,1542 @@
+import { apiResponse, createApiClient, defineApiRoutes, defineSettingsPanel, defineToolRenderer, defineWebPlugin, sessionApiAddress } from "@agimon-ai/po-core/web";
+import { Button, EmptyState, MessageItem, MessageItemBody, MessageItemHeader, MessageItemStatus, MessageLines, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Spinner, collapseLines, toolTone } from "@agimon-ai/po-web-components";
+import { useEffect, useId, useRef, useState } from "react";
+import { sealedTransport } from "@agimon-ai/po-web-security/browser";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/types/webMetrics.ts
+/**
+* The dimensions the page offers.
+*
+* log-sink-mcp also groups by 'workflow-run', 'workflow-name', 'job' and
+* 'step'. Those are omitted on purpose: no Po package emits the matching
+* attributes today, so offering them would draw an empty chart and read as a
+* bug rather than as a gap.
+*/
+const METRICS_DIMENSIONS = [
+	"session",
+	"agent",
+	"model",
+	"provider"
+];
+const METRICS_PERIODS = [
+	"day",
+	"week",
+	"month",
+	"all"
+];
+const METRICS_QUERY_PARAMS = {
+	dimension: "dimension",
+	period: "period",
+	/** Narrows the whole report to one value of the current dimension. */
+	focus: "focus"
+};
+function isMetricsUnavailable(response) {
+	return "unavailable" in response;
+}
+function isIssuesUnavailable(response) {
+	return "unavailable" in response;
+}
+//#endregion
+//#region src/types/apiRoutes.ts
+/**
+* This package's routes, as data.
+*
+* No scope and no base path. The build reads both off
+* `src/extensions/(backend)/api/log/`, so the mount is stated once, by the
+* folder that creates it. They used to be written here, in the contract, and
+* again inside every URL the page built, and the copies were free to disagree.
+*
+* This is the one file the routes, the Hono app and the browser all read, so a
+* path cannot move on one side alone.
+*/
+var apiRoutes_default = defineApiRoutes({
+	metrics: {
+		method: "GET",
+		path: "/metrics",
+		query: [
+			METRICS_QUERY_PARAMS.dimension,
+			METRICS_QUERY_PARAMS.period,
+			METRICS_QUERY_PARAMS.focus
+		],
+		response: apiResponse()
+	},
+	/**
+	* Separate from the report because the hub answers it from a subprocess: the
+	* running daemon exposes no issues route, so folding it in would make every
+	* refresh wait on the slowest transport.
+	*/
+	issues: {
+		method: "GET",
+		path: "/issues",
+		query: [METRICS_QUERY_PARAMS.focus],
+		response: apiResponse()
+	}
+});
+const api = createApiClient(apiRoutes_default, {
+	scopes: [
+		"global",
+		"workspace",
+		"session"
+	],
+	basePath: "log",
+	transport: (input, init) => sealedTransport.fetch(input, init),
+	sessionAddress: sessionApiAddress
+});
+//#endregion
+//#region src/extensions/(frontend)/setting/_lib/metricsApi.ts
+/**
+* The page's half of this package's metrics API. The only place the cockpit
+* talks to the hub for metrics, so if the transport ever changes, it changes
+* here alone.
+*
+* These are adapters now, not a transport. The generated client owns the URL
+* and the sealed transport with it, so nothing here spells a route or reaches
+* for `fetch`; a plugin calling `fetch` directly would send plaintext to the
+* tunnel's relay. What stays is this package's own vocabulary: which of the
+* empty states a reader is shown, and which answers are states rather than
+* failures.
+*/
+const UNREACHABLE = "The cockpit hub is unreachable.";
+/**
+* A hub with no package APIs mounted serves the SPA shell for this route, so
+* the answer is a 200 of HTML rather than an error status. The client parses no
+* JSON out of it and reports no body at all, which is read here as an
+* uninstalled feature, because that is what it is.
+*/
+const NO_API_DETAIL = "This cockpit is running a bundle without the log package API, so there are no metrics to read.";
+const NO_API = {
+	unavailable: "no-api",
+	detail: NO_API_DETAIL
+};
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+* What the hub's answer means, before either route reads its own shape out of
+* it.
+*
+* `status: 0` is the transport never answering, which covers both a dead hub
+* and a caller that aborted. The client cannot tell those apart, so the signal
+* is asked: an abort is the caller replacing this request, and reporting it
+* would overwrite whatever the replacement renders.
+*/
+function outcomeOf(result, signal) {
+	if (result.status === 0) return { error: signal?.aborted === true ? "" : UNREACHABLE };
+	const status = `The hub answered ${String(result.status)}.`;
+	if (result.data === void 0) return result.ok ? { noApi: true } : { error: status };
+	if (!isRecord(result.data)) return { error: "The hub returned a response the cockpit could not read." };
+	if (!result.ok) return { error: result.error === "" ? status : result.error };
+	return { body: result.data };
+}
+/**
+* Reads one report.
+*
+* A missing sink is not an error here: the route answers it as an
+* `unavailable` body, so the page can name which of the empty states it is in
+* rather than showing one generic failure.
+*/
+async function fetchMetrics(dimension, period, focus, signal) {
+	const outcome = outcomeOf(await api.global.metrics({
+		query: {
+			[METRICS_QUERY_PARAMS.dimension]: dimension,
+			[METRICS_QUERY_PARAMS.period]: period,
+			[METRICS_QUERY_PARAMS.focus]: focus === "" ? void 0 : focus
+		},
+		...signal === void 0 ? {} : { signal }
+	}), signal);
+	if ("error" in outcome) return { error: outcome.error };
+	if ("noApi" in outcome) return { report: NO_API };
+	const report = outcome.body;
+	if (!isMetricsUnavailable(report) && !Array.isArray(report.groups)) return { error: "The hub returned a report the cockpit could not read." };
+	return { report };
+}
+/**
+* Reads the detail behind the issue count.
+*
+* Separate call because the hub answers it from a subprocess: folding it into
+* the report would make every refresh wait on the slowest transport.
+*/
+async function fetchIssues(focus, signal, window = {}) {
+	const outcome = outcomeOf(await api.global.issues({
+		query: {
+			[METRICS_QUERY_PARAMS.focus]: focus === "" ? void 0 : focus,
+			...window
+		},
+		...signal === void 0 ? {} : { signal }
+	}), signal);
+	if ("error" in outcome) return { error: outcome.error };
+	if ("noApi" in outcome) return { issues: {
+		unavailable: "no-api",
+		detail: NO_API_DETAIL
+	} };
+	return { issues: outcome.body };
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_lib/chartScale.ts
+/**
+* The arithmetic behind the charts, kept out of the components so it can be
+* tested as plain functions rather than through a render.
+*
+* There is no charting library in the cockpit bundle and the plugin import
+* allowlist would not admit one, so these are the primitives the SVG is drawn
+* from. They are deliberately small: a bar length and a tick set, nothing that
+* pretends to be a plotting engine.
+*/
+/** Bar length as a fraction of the track, guarding the all-zero series. */
+function barFraction(value, max) {
+	if (!Number.isFinite(value) || value <= 0) return 0;
+	if (!Number.isFinite(max) || max <= 0) return 0;
+	return Math.min(1, value / max);
+}
+/** The largest value in a series, or 0 for an empty one. */
+function seriesMax(values) {
+	return values.reduce((highest, value) => Number.isFinite(value) && value > highest ? value : highest, 0);
+}
+/**
+* Compact token counts. Charts label axes and bars in a few characters, and a
+* raw nine-digit total makes every row the same illegible width.
+*/
+function formatTokens(value) {
+	if (!Number.isFinite(value)) return "Not reported";
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(1)}k`;
+	return String(Math.round(value));
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/charts/GroupBars.tsx
+const PREVIEW_GROUPS = 5;
+/** Rank recorded consumers; an unknown attribution is not a selectable model. */
+function GroupBars({ groups, totalTokens, focus, onFocus }) {
+	const [expanded, setExpanded] = useState(false);
+	const sorted = [...groups].sort((a, b) => b.totalTokens - a.totalTokens || a.key.localeCompare(b.key));
+	const rows = expanded ? sorted : sorted.slice(0, PREVIEW_GROUPS);
+	const max = totalTokens ?? seriesMax(groups.map((group) => group.totalTokens));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			groups.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "rounded-md border border-dashed border-doom-border p-5 text-sm text-doom-dim",
+				children: "No grouped usage was recorded for this selection."
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1",
+				"data-testid": "metrics-group-bars",
+				children: rows.map((group) => {
+					const selected = focus === group.key;
+					const unknown = group.key === "unknown" || group.key === "";
+					const canFocus = onFocus !== void 0 && !unknown;
+					const percentage = barFraction(group.totalTokens, max) * 100;
+					const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 break-all text-left font-medium text-doom-hi",
+								title: group.key,
+								children: unknown ? "Unattributed" : group.key
+							}), /* @__PURE__ */ jsx("span", {
+								className: "shrink-0 text-right font-semibold tabular-nums text-doom-hi",
+								title: String(group.totalTokens),
+								children: formatTokens(group.totalTokens)
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "mt-2 block h-1.5 overflow-hidden rounded-full bg-doom-border",
+							children: /* @__PURE__ */ jsx("span", {
+								className: `block h-full rounded-full ${unknown ? "bg-doom-yellow" : "bg-doom-blue"}`,
+								style: { width: `${percentage}%` }
+							})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "mt-2 flex flex-wrap items-center justify-between gap-2 text-sm text-doom-dim",
+							children: [/* @__PURE__ */ jsx("span", { children: totalTokens !== void 0 && max > 0 ? `${percentage.toFixed(1)}% of total` : "Relative token volume" }), /* @__PURE__ */ jsxs("span", {
+								className: group.issueCount > 0 || group.failed ? "text-doom-yellow" : "text-doom-dim",
+								children: [
+									group.failed ? "Failed · " : "",
+									formatTokens(group.issueCount),
+									" ",
+									group.issueCount === 1 ? "issue" : "issues"
+								]
+							})]
+						})
+					] });
+					return /* @__PURE__ */ jsx("li", { children: canFocus ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onFocus?.(selected ? "" : group.key),
+						"aria-pressed": selected,
+						"aria-label": `Filter to ${group.key}`,
+						"data-testid": `metrics-group-${group.key}`,
+						className: `block w-full rounded-md p-3 text-base hover:bg-doom-tint-blue focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue ${selected ? "bg-doom-tint-blue" : ""}`,
+						children: row
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "rounded-md p-3 text-base",
+						children: row
+					}) }, group.key);
+				})
+			}),
+			groups.length > PREVIEW_GROUPS ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => setExpanded(!expanded),
+				"aria-expanded": expanded,
+				children: expanded ? "Show top 5" : `Show all ${groups.length} returned groups`
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/charts/TimelineChart.tsx
+const SERIES = [
+	{
+		key: "totalTokens",
+		label: "Total"
+	},
+	{
+		key: "inputTokens",
+		label: "Input"
+	},
+	{
+		key: "outputTokens",
+		label: "Output"
+	}
+];
+const PLOT_WIDTH = 600;
+const PLOT_HEIGHT = 160;
+const MAX_COLUMN_WIDTH = 48;
+/** Plot the sink's buckets without filling missing history or stacking counters. */
+function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
+	const [series, setSeries] = useState("totalTokens");
+	const [activeLabel, setActiveLabel] = useState("");
+	const active = buckets.find((bucket) => bucket.label === activeLabel) ?? buckets.at(-1);
+	const max = seriesMax(buckets.map((bucket) => bucket[series]));
+	const unit = bucketUnit ? `${bucketUnit} ` : "";
+	const slot = PLOT_WIDTH / Math.max(1, buckets.length);
+	const width = Math.min(MAX_COLUMN_WIDTH, slot * .65);
+	if (buckets.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "rounded-md border border-dashed border-doom-border p-5 text-sm text-doom-dim",
+		"data-testid": "metrics-timeline-chart",
+		children: "No timeline buckets were recorded for this selection."
+	});
+	if (buckets.length === 1 && active !== void 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-4",
+		"data-testid": "metrics-timeline-chart",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rounded-md border border-doom-border bg-doom-deep p-5",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-doom-dim",
+					children: active.label
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "mt-2 text-lg font-semibold tabular-nums text-doom-blue",
+					title: String(active.totalTokens),
+					children: [formatTokens(active.totalTokens), " tokens"]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "mt-3 text-sm leading-relaxed text-doom-dim",
+					children: [
+						"Only one ",
+						unit,
+						"bucket was recorded. There is not enough history to show a trend."
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm text-doom-dim",
+					children: "For more detail, pick a shorter period when one is available."
+				}),
+				onShorterPeriod === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "mt-3",
+					onClick: onShorterPeriod,
+					children: "View hourly detail"
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		"data-testid": "metrics-timeline-chart",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex gap-1",
+					role: "group",
+					"aria-label": "Timeline token counter",
+					children: SERIES.map((item) => /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: series === item.key ? "primary" : "ghost",
+						"aria-pressed": series === item.key,
+						onClick: () => setSeries(item.key),
+						children: item.label
+					}, item.key))
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-doom-dim",
+					children: [
+						buckets.length,
+						" recorded ",
+						unit,
+						"buckets"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					className: "flex w-12 shrink-0 flex-col justify-between text-right text-sm tabular-nums text-doom-dim",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: formatTokens(max) }),
+						/* @__PURE__ */ jsx("span", { children: formatTokens(max / 2) }),
+						/* @__PURE__ */ jsx("span", { children: "0" })
+					]
+				}), /* @__PURE__ */ jsxs("svg", {
+					viewBox: `0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}`,
+					preserveAspectRatio: "none",
+					className: "h-40 min-w-0 flex-1 overflow-visible",
+					role: "group",
+					"aria-label": `tokens per bucket, peak ${formatTokens(max)}`,
+					children: [[
+						0,
+						PLOT_HEIGHT / 2,
+						PLOT_HEIGHT
+					].map((y) => /* @__PURE__ */ jsx("line", {
+						x1: "0",
+						x2: PLOT_WIDTH,
+						y1: y,
+						y2: y,
+						className: "text-doom-border",
+						stroke: "currentColor",
+						vectorEffect: "non-scaling-stroke"
+					}, y)), buckets.map((bucket, index) => {
+						const height = barFraction(bucket[series], max) * PLOT_HEIGHT;
+						const label = `${bucket.label}: ${formatTokens(bucket[series])} ${SERIES.find((item) => item.key === series)?.label.toLowerCase()} tokens`;
+						return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+							x: index * slot + (slot - width) / 2,
+							y: PLOT_HEIGHT - height,
+							width,
+							height,
+							rx: "2",
+							fill: "currentColor",
+							className: active?.label === bucket.label ? "text-doom-cyan" : "text-doom-blue"
+						}), /* @__PURE__ */ jsx("rect", {
+							x: index * slot,
+							y: "0",
+							width: slot,
+							height: PLOT_HEIGHT,
+							fill: "transparent",
+							tabIndex: 0,
+							role: "button",
+							"aria-label": label,
+							"aria-pressed": active?.label === bucket.label,
+							onMouseEnter: () => setActiveLabel(bucket.label),
+							onFocus: () => setActiveLabel(bucket.label),
+							onClick: () => setActiveLabel(bucket.label),
+							onKeyDown: (event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									setActiveLabel(bucket.label);
+								}
+							},
+							className: "cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-cyan",
+							children: /* @__PURE__ */ jsx("title", { children: label })
+						})] }, bucket.label);
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-15 flex justify-between gap-3 text-sm text-doom-dim",
+				children: [/* @__PURE__ */ jsx("span", { children: buckets[0]?.label }), /* @__PURE__ */ jsx("span", {
+					className: "text-right",
+					children: buckets.at(-1)?.label
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap justify-between gap-2 rounded-md bg-doom-deep px-3 py-2 text-sm tabular-nums",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-doom-dim",
+					children: active?.label
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-doom-hi",
+					children: [
+						formatTokens(active?.[series] ?? NaN),
+						" ",
+						SERIES.find((item) => item.key === series)?.label.toLowerCase(),
+						" tokens"
+					]
+				})]
+			}),
+			max === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-doom-dim",
+				children: [
+					"Recorded buckets contain zero ",
+					SERIES.find((item) => item.key === series)?.label.toLowerCase(),
+					" tokens."
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("details", {
+				className: "text-sm text-doom-dim",
+				children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+					children: "View exact bucket values"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-3 overflow-x-auto",
+					children: /* @__PURE__ */ jsxs("table", {
+						className: "w-full text-right tabular-nums",
+						children: [
+							/* @__PURE__ */ jsx("caption", {
+								className: "sr-only",
+								children: "Independent token counters by recorded bucket"
+							}),
+							/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "py-2 text-left",
+									children: "Bucket"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pl-3",
+									children: "Total"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pl-3",
+									children: "Input"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pl-3",
+									children: "Output"
+								})
+							] }) }),
+							/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs("tr", {
+								className: "border-t border-doom-border",
+								children: [/* @__PURE__ */ jsx("th", {
+									scope: "row",
+									className: "py-2 text-left font-normal",
+									children: bucket.label
+								}), SERIES.map((item) => /* @__PURE__ */ jsx("td", {
+									className: "pl-3",
+									children: Number.isFinite(bucket[item.key]) ? bucket[item.key].toLocaleString("en-US") : "Not reported"
+								}, item.key))]
+							}, bucket.label)) })
+						]
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/types/issueGrouping.ts
+/**
+* A key that separates problems a reader would act on separately.
+*
+* The sink's fingerprint is the primary key, but it can be empty, and several
+* distinct bash failures share 'tool_failure|pi|bash||pi.tool_result' because
+* the record name is all they carry. Folding the detail in keeps two different
+* failures apart while still merging repeats of the same one.
+*/
+function groupingKey(sample) {
+	return `${sample.fingerprint === "" ? `${sample.category}|${sample.message}` : sample.fingerprint}|${sample.detail}`;
+}
+/** Incidents merged by problem and ranked by how often each happened. */
+function groupIssues(samples) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const sample of samples) {
+		const key = groupingKey(sample);
+		const existing = groups.get(key);
+		if (existing === void 0) {
+			groups.set(key, {
+				key,
+				occurrences: sample.occurrenceCount,
+				category: sample.category,
+				detail: sample.detail,
+				tool: sample.tool,
+				errorType: sample.errorType,
+				agentName: sample.agentName,
+				model: sample.model,
+				statusCode: sample.statusCode,
+				lastSeen: sample.timestamp,
+				members: [sample]
+			});
+			continue;
+		}
+		existing.occurrences += sample.occurrenceCount;
+		existing.members.push(sample);
+		if (sample.timestamp > existing.lastSeen) existing.lastSeen = sample.timestamp;
+		existing.tool ??= sample.tool;
+		existing.errorType ??= sample.errorType;
+		existing.agentName ??= sample.agentName;
+		existing.model ??= sample.model;
+		existing.statusCode ??= sample.statusCode;
+	}
+	return [...groups.values()].sort((left, right) => right.occurrences - left.occurrences || left.detail.localeCompare(right.detail));
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/IssuesDetail.tsx
+/**
+* What is actually going wrong, ranked by how often.
+*
+* A count of 69 issues tells nobody what to change. The same 69 collapsed into
+* "this spawn failed 20 times, this hook failed 3" is a work list, so the
+* ranked bar is the primary view here and the totals are context beside it.
+*
+* Each bar expands to the incidents behind it, because the row states the
+* problem and the reader still needs the session, model, and timestamps to go
+* and look at one.
+*/
+function countRows(counts) {
+	return Object.entries(counts).sort(([, left], [, right]) => right - left);
+}
+/** A short, human label for a problem; the detail can be a whole command line. */
+function titleOf(group) {
+	if (group.errorType !== null) return group.errorType;
+	if (group.tool !== null) return `${group.tool} failed`;
+	return group.category;
+}
+function IssueRow({ group, max, tools }) {
+	const [open, setOpen] = useState(false);
+	const width = `${(barFraction(group.occurrences, max) * 100).toFixed(2)}%`;
+	const calls = tools.find((tool) => tool.name === group.tool)?.calls;
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col rounded-md border border-doom-border",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "absolute bottom-0 left-0 h-1 rounded-xs bg-doom-yellow/40",
+				style: { width }
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setOpen(!open),
+				"aria-expanded": open,
+				"data-testid": `metrics-issue-${group.key}`,
+				className: "relative flex min-h-10 w-full flex-wrap items-start gap-3 rounded-md p-3 text-left text-base hover:bg-doom-tint-blue focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "w-8 shrink-0 text-right font-semibold text-doom-yellow",
+						children: group.occurrences
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "w-24 shrink-0 break-words font-medium text-doom-hi",
+						children: titleOf(group)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-40 flex-1 break-words text-doom-dim",
+						children: group.detail
+					}),
+					calls === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 text-doom-dim",
+						children: [calls, " token samples"]
+					})
+				]
+			})]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 px-3 py-3 text-base",
+			"data-testid": `metrics-issue-body-${group.key}`,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-x-3 gap-y-1 text-sm text-doom-dim",
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: ["category ", group.category] }),
+						group.tool === null ? null : /* @__PURE__ */ jsxs("span", { children: ["tool ", group.tool] }),
+						group.errorType === null ? null : /* @__PURE__ */ jsxs("span", { children: ["error ", group.errorType] }),
+						group.statusCode === null ? null : /* @__PURE__ */ jsxs("span", { children: ["status ", group.statusCode] }),
+						group.agentName === null ? null : /* @__PURE__ */ jsxs("span", { children: ["agent ", group.agentName] }),
+						group.model === null ? null : /* @__PURE__ */ jsxs("span", { children: ["model ", group.model] }),
+						/* @__PURE__ */ jsxs("span", { children: ["last seen ", group.lastSeen] })
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "break-words text-doom-dim",
+					children: group.detail
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-1 text-sm text-doom-dim",
+					children: group.members.map((member, index) => /* @__PURE__ */ jsxs("li", {
+						className: "flex flex-wrap gap-x-2",
+						children: [
+							/* @__PURE__ */ jsx("span", { children: member.timestamp }),
+							/* @__PURE__ */ jsx("span", { children: member.level }),
+							/* @__PURE__ */ jsxs("span", { children: [member.occurrenceCount, "×"] }),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate",
+								children: member.message
+							})
+						]
+					}, `${member.timestamp}-${String(index)}`))
+				})
+			]
+		}) : null]
+	});
+}
+function IssuesDetail({ view, tools, summaryCount }) {
+	const groups = groupIssues(view.samples);
+	const max = groups[0]?.occurrences ?? 0;
+	const callsByTool = new Map(tools.map((tool) => [tool.name, tool.calls]));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			summaryCount !== void 0 && summaryCount !== view.totalIssues ? /* @__PURE__ */ jsxs("p", {
+				className: "rounded-md border border-doom-edge-yellow bg-doom-tint-yellow p-3 text-sm leading-relaxed text-doom-yellow",
+				role: "status",
+				"data-testid": "metrics-issue-count-mismatch",
+				children: [
+					"The summary reports ",
+					summaryCount,
+					" ",
+					summaryCount === 1 ? "issue" : "issues",
+					"; incident analysis returned",
+					" ",
+					view.totalIssues,
+					". The counts differ, so these details should not be treated as a complete explanation of the summary."
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-sm text-doom-dim",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-doom-hi",
+						children: view.totalIssues
+					}),
+					" occurrences of",
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-doom-hi",
+						children: groups.length
+					}),
+					" distinct problems in the returned samples, most frequent first"
+				]
+			}),
+			groups.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "rounded-md border border-dashed border-doom-border p-4 text-sm text-doom-dim",
+				children: view.totalIssues === 0 ? "No issues were detected in the returned analysis. This does not establish coverage of unrecorded activity." : "The analysis counted issues but returned no incident samples."
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-2",
+				"data-testid": "metrics-issue-groups",
+				children: groups.map((group) => /* @__PURE__ */ jsx(IssueRow, {
+					group,
+					max,
+					tools
+				}, group.key))
+			}),
+			Object.keys(view.byTool).length === 0 ? null : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 overflow-x-auto",
+				children: [/* @__PURE__ */ jsx("h4", {
+					className: "text-base font-semibold text-doom-hi",
+					children: "Failures by tool"
+				}), /* @__PURE__ */ jsxs("table", {
+					className: "w-full text-sm",
+					"data-testid": "metrics-issues-tools",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+						className: "text-sm text-doom-dim",
+						children: [
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-2 text-left font-normal",
+								children: "Tool"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "text-right font-normal",
+								children: "Failures"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "text-right font-normal",
+								children: "Attribution context"
+							})
+						]
+					}) }), /* @__PURE__ */ jsx("tbody", { children: countRows(view.byTool).map(([name, failures]) => {
+						const calls = callsByTool.get(name);
+						return /* @__PURE__ */ jsxs("tr", {
+							className: "border-b border-doom-border/40",
+							children: [
+								/* @__PURE__ */ jsx("td", {
+									className: "min-w-0 break-all py-2 text-doom-dim",
+									children: name
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "w-16 py-2 text-right text-doom-red",
+									children: failures
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "w-28 py-2 text-right text-doom-dim",
+									children: calls === void 0 ? "no token samples" : `${String(calls)} token samples`
+								})
+							]
+						}, name);
+					}) })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-doom-dim",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold text-doom-dim",
+					children: "by category"
+				}), countRows(view.byCategory).map(([name, count]) => /* @__PURE__ */ jsxs("span", { children: [
+					name,
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-doom-hi",
+						children: count
+					})
+				] }, name))]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/IssuesSection.tsx
+/** Issue analysis is an explicit read, not another request on every metrics refresh. */
+function IssuesSection({ tools, focus, count, startTime, endTime, broaderScope = false }) {
+	const [view, setView] = useState();
+	const [message, setMessage] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [open, setOpen] = useState(false);
+	const pending = useRef(void 0);
+	const detailsId = useId();
+	useEffect(() => {
+		pending.current?.abort();
+		setView(void 0);
+		setMessage("");
+		setLoading(false);
+		setOpen(false);
+		return () => pending.current?.abort();
+	}, [
+		focus,
+		startTime,
+		endTime
+	]);
+	const load = () => {
+		pending.current?.abort();
+		const controller = new AbortController();
+		pending.current = controller;
+		setOpen(true);
+		setLoading(true);
+		setMessage("");
+		setView(void 0);
+		fetchIssues(focus, controller.signal, {
+			startTime,
+			endTime
+		}).then((result) => {
+			if (controller.signal.aborted) return;
+			setLoading(false);
+			if ("error" in result) setMessage(result.error || "Issue details could not be loaded.");
+			else if (isIssuesUnavailable(result.issues)) setMessage(result.issues.detail);
+			else setView(result.issues);
+		}).catch((error) => {
+			if (controller.signal.aborted) return;
+			setLoading(false);
+			setMessage(error instanceof Error ? error.message : "Issue details could not be loaded.");
+		});
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex min-w-0 flex-col gap-3 rounded-lg border border-doom-border bg-doom-panel p-4",
+		"data-testid": "metrics-issues",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
+					className: "text-lg font-semibold text-doom-hi",
+					children: ["Issues to investigate", count === void 0 ? "" : ` · ${count} ${count === 1 ? "issue" : "issues"}`]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-doom-dim",
+					children: "Inspect recurring failures and the evidence behind them."
+				})] }), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						loading ? /* @__PURE__ */ jsx(Spinner, { label: "Reading issue details" }) : null,
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "md",
+							disabled: loading,
+							onClick: load,
+							"aria-expanded": open,
+							"aria-controls": detailsId,
+							"data-testid": open ? "metrics-issues-reload" : "metrics-issues-open",
+							children: open ? "Reload details" : "Inspect issues"
+						}),
+						open ? /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "md",
+							onClick: () => {
+								pending.current?.abort();
+								setLoading(false);
+								setOpen(false);
+							},
+							"aria-controls": detailsId,
+							children: "Hide"
+						}) : null
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm leading-relaxed text-doom-dim",
+				children: [
+					"Details are loaded on demand.",
+					" ",
+					startTime === void 0 ? endTime === void 0 ? "This hub did not report a time window; details cover all available history." : "Details cover available history up to report time; no start bound was supplied." : "Details use the report’s recorded time window.",
+					" ",
+					broaderScope ? "LogSink cannot filter issue details by model, provider or agent, so this analysis covers all groups in that window." : focus === void 0 ? "Analysis covers all groups." : "Filtered to this session."
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				id: detailsId,
+				hidden: !open,
+				"aria-busy": loading,
+				children: [
+					message === "" ? null : /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "rounded-md border border-doom-edge-yellow bg-doom-tint-yellow p-3 text-sm text-doom-yellow",
+						"data-testid": "metrics-issues-message",
+						children: message
+					}),
+					loading ? /* @__PURE__ */ jsx("p", {
+						role: "status",
+						className: "py-3 text-sm text-doom-dim",
+						children: "Reading recorded incidents..."
+					}) : null,
+					view === void 0 ? null : /* @__PURE__ */ jsx(IssuesDetail, {
+						view,
+						tools: broaderScope ? [] : tools,
+						summaryCount: broaderScope ? void 0 : count
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/MetricsSummary.tsx
+/** Independent counters, never a stacked breakdown of the provider total. */
+function MetricsSummary({ totals }) {
+	const cards = [
+		{
+			label: "Total tokens",
+			value: totals.totalTokens,
+			detail: "Provider-reported total",
+			color: "text-doom-blue"
+		},
+		{
+			label: "Input tokens",
+			value: totals.inputTokens,
+			detail: "Reported input counter",
+			color: "text-doom-hi"
+		},
+		{
+			label: "Output tokens",
+			value: totals.outputTokens,
+			detail: "Reported output counter",
+			color: "text-doom-hi"
+		},
+		{
+			label: "Recorded issues",
+			value: totals.issueCount,
+			detail: "Detected in this selection",
+			color: totals.issueCount > 0 ? "text-doom-yellow" : "text-doom-hi"
+		}
+	];
+	return /* @__PURE__ */ jsx("dl", {
+		className: "grid grid-cols-2 gap-3 @3xl:grid-cols-4",
+		"data-testid": "metrics-summary",
+		children: cards.map((card) => /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 rounded-lg border border-doom-border bg-doom-panel p-4",
+			children: [
+				/* @__PURE__ */ jsx("dt", {
+					className: "text-sm text-doom-dim",
+					children: card.label
+				}),
+				/* @__PURE__ */ jsx("dd", {
+					className: `mt-2 text-lg font-semibold tabular-nums ${card.color}`,
+					title: Number.isFinite(card.value) ? card.value.toLocaleString("en-US") : "Not reported",
+					children: formatTokens(card.value)
+				}),
+				/* @__PURE__ */ jsx("dd", {
+					className: "mt-1 text-sm text-doom-dim",
+					children: card.detail
+				})
+			]
+		}, card.label))
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/ToolMetrics.tsx
+/** The sink attributes a whole turn to its tools. These are samples, not bills. */
+function ToolMetrics({ tools }) {
+	const [sort, setSort] = useState("p90TotalTokens");
+	const rows = [...tools].sort((a, b) => b[sort] - a[sort] || a.name.localeCompare(b.name));
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex min-w-0 flex-col gap-4 rounded-lg border border-doom-border bg-doom-panel p-4",
+		"aria-label": "Tool token samples",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold text-doom-hi",
+				children: "Tool token samples"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-doom-dim",
+				children: "Which tools participate in token-heavy turns?"
+			})] }),
+			rows.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col justify-center gap-2 rounded-md border border-dashed border-doom-border p-5",
+				"data-testid": "metrics-tools-empty",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-base font-semibold text-doom-hi",
+					children: "No token-attributed tool calls"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm leading-relaxed text-doom-dim",
+					children: "Tool execution logs may exist, but this selection has no samples that connect tools to model usage. This does not mean no tools ran."
+				})]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-1",
+				role: "group",
+				"aria-label": "Rank tool samples by",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: sort === "p90TotalTokens" ? "primary" : "ghost",
+					"aria-pressed": sort === "p90TotalTokens",
+					onClick: () => setSort("p90TotalTokens"),
+					children: "P90 turn tokens"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: sort === "calls" ? "primary" : "ghost",
+					"aria-pressed": sort === "calls",
+					onClick: () => setSort("calls"),
+					children: "Sampled calls"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full text-base tabular-nums",
+					"data-testid": "metrics-tools",
+					children: [
+						/* @__PURE__ */ jsxs("caption", {
+							className: "sr-only",
+							children: ["Tools ranked by ", sort === "calls" ? "sampled calls" : "90th percentile whole-turn tokens"]
+						}),
+						/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+							className: "border-b border-doom-border text-sm text-doom-dim",
+							children: [
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pb-2 text-left font-normal",
+									children: "Tool"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pb-2 pl-3 text-right font-normal",
+									children: "Sampled calls"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pb-2 pl-3 text-right font-normal",
+									children: "P90 turn tokens"
+								})
+							]
+						}) }),
+						/* @__PURE__ */ jsx("tbody", { children: rows.map((tool) => /* @__PURE__ */ jsxs("tr", {
+							className: "border-b border-doom-border/40",
+							children: [
+								/* @__PURE__ */ jsx("th", {
+									scope: "row",
+									className: "max-w-48 break-all py-3 text-left font-normal text-doom-hi",
+									children: tool.name
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-3 pl-3 text-right text-doom-dim",
+									children: formatTokens(tool.calls)
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-3 pl-3 text-right text-doom-blue",
+									title: String(tool.p90TotalTokens),
+									children: formatTokens(tool.p90TotalTokens)
+								})
+							]
+						}, tool.name)) })
+					]
+				})
+			})] }),
+			/* @__PURE__ */ jsxs("details", {
+				className: "text-sm leading-relaxed text-doom-dim",
+				children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+					children: "How these samples are counted"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-2",
+					children: "This view includes only calls with recorded token attribution; external MCP calls remain in the logs. P90 is the 90th percentile of the whole turn, not each tool's own consumption. Several tools may share a turn, so do not add these values together."
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/MetricsReportView.tsx
+const DIMENSION_LABELS = {
+	session: "session",
+	agent: "agent",
+	model: "model",
+	provider: "provider"
+};
+const DIMENSION_NOTES = { session: "Session ids are hashed before export. Select a row to filter usage, not to open a session." };
+/** The same data-only dashboard is rendered by the stories and the settings panel. */
+function MetricsReportView({ report, onFocus, onPeriodChange }) {
+	const label = DIMENSION_LABELS[report.dimension];
+	const unattributed = report.groups.filter((group) => group.key === "unknown" || group.key === "").reduce((sum, group) => sum + group.totalTokens, 0);
+	const counters = [
+		{
+			name: "Cache reads",
+			value: report.totals.cachedTokens
+		},
+		{
+			name: "Reasoning tokens",
+			value: report.totals.reasoningTokens
+		},
+		{
+			name: "Usage events",
+			value: report.totals.usageEventCount
+		},
+		{
+			name: "Log and span records",
+			value: report.totals.totalRecords
+		}
+	];
+	const generated = new Date(report.generatedAt);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "@container flex w-full min-w-0 flex-col gap-4",
+		"data-testid": "metrics-report",
+		children: [
+			/* @__PURE__ */ jsx(MetricsSummary, { totals: report.totals }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 grid-cols-1 gap-4 @3xl:grid-cols-3",
+				children: [/* @__PURE__ */ jsxs("section", {
+					className: "flex min-w-0 flex-col gap-4 rounded-lg border border-doom-border bg-doom-panel p-4 @3xl:col-span-2",
+					"aria-label": "Usage over time",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-lg font-semibold text-doom-hi",
+						children: "Usage over time"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-sm text-doom-dim",
+						children: "Recorded tokens, not estimated spend."
+					})] }), /* @__PURE__ */ jsx(TimelineChart, {
+						buckets: report.timeline,
+						bucketUnit: report.bucketUnit,
+						onShorterPeriod: report.period === "day" || onPeriodChange === void 0 ? void 0 : () => onPeriodChange("day")
+					})]
+				}), /* @__PURE__ */ jsxs("section", {
+					className: "flex min-w-0 flex-col gap-4 rounded-lg border border-doom-border bg-doom-panel p-4",
+					"aria-label": "Reported counters",
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-lg font-semibold text-doom-hi",
+							children: "Reported counters"
+						}),
+						/* @__PURE__ */ jsx("dl", {
+							className: "flex flex-col gap-3",
+							children: counters.map((counter) => /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1 border-b border-doom-border/40 pb-3",
+								children: [/* @__PURE__ */ jsx("dt", {
+									className: "text-sm text-doom-dim",
+									children: counter.name
+								}), /* @__PURE__ */ jsx("dd", {
+									className: "text-base font-semibold tabular-nums text-doom-hi",
+									title: counter.value === void 0 ? "Not reported" : String(counter.value),
+									children: formatTokens(counter.value ?? NaN)
+								})]
+							}, counter.name))
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm leading-relaxed text-doom-dim",
+							children: "Monetary cost is not included in this metrics report."
+						}),
+						/* @__PURE__ */ jsxs("details", {
+							className: "text-sm leading-relaxed text-doom-dim",
+							children: [/* @__PURE__ */ jsx("summary", {
+								className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+								children: "Why the counters may not add up"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "mt-2",
+								children: "The total is reported by providers. Input, output, cache reads and reasoning are independent counters and may overlap or be incomplete. They are not a breakdown and may not sum to the total. A gap is not evidence of cache traffic. Missing fields say Not reported; a recorded zero stays zero."
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 grid-cols-1 items-start gap-4 @3xl:grid-cols-2",
+				children: [/* @__PURE__ */ jsxs("section", {
+					className: "flex min-w-0 flex-col gap-3 rounded-lg border border-doom-border bg-doom-panel p-4",
+					"aria-label": `Tokens by ${label}`,
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
+							className: "text-lg font-semibold text-doom-hi",
+							children: ["Tokens by ", label]
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-1 text-sm text-doom-dim",
+							children: "Largest recorded consumers. Select a named row to filter."
+						})] }),
+						unattributed > 0 ? /* @__PURE__ */ jsxs("div", {
+							className: "rounded-md border border-doom-edge-yellow bg-doom-tint-yellow p-3",
+							"data-testid": "metrics-attribution-notice",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "text-sm font-semibold text-doom-yellow",
+								children: [label.charAt(0).toUpperCase() + label.slice(1), " attribution missing"]
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "mt-1 text-sm leading-relaxed text-doom-dim",
+								children: [
+									formatTokens(unattributed),
+									" tokens have no ",
+									label,
+									" recorded. They are included in the total, but cannot be assigned to a named ",
+									label,
+									"."
+								]
+							})]
+						}) : null,
+						DIMENSION_NOTES[report.dimension] === void 0 ? null : /* @__PURE__ */ jsx("p", {
+							className: "text-sm leading-relaxed text-doom-dim",
+							children: DIMENSION_NOTES[report.dimension]
+						}),
+						/* @__PURE__ */ jsx(GroupBars, {
+							groups: report.groups,
+							totalTokens: report.totals.totalTokens,
+							focus: report.focus,
+							onFocus
+						}, `${report.dimension}:${report.focus ?? ""}`),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-doom-dim",
+							children: [
+								"Showing ",
+								report.groups.length,
+								" of ",
+								formatTokens(report.totals.groupCount),
+								" ",
+								label,
+								" groups. Bars show share of the reported total."
+							]
+						}),
+						report.totals.failedGroups > 0 ? /* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-doom-yellow",
+							children: [
+								report.totals.failedGroups,
+								" of ",
+								report.totals.groupCount,
+								" ",
+								label,
+								"s failed"
+							]
+						}) : null
+					]
+				}), /* @__PURE__ */ jsx(ToolMetrics, { tools: report.tools })]
+			}),
+			/* @__PURE__ */ jsx(IssuesSection, {
+				tools: report.tools,
+				focus: report.dimension === "session" ? report.focus : void 0,
+				count: report.totals.issueCount,
+				startTime: report.startTime,
+				endTime: report.endTime,
+				broaderScope: report.focus !== void 0 && report.dimension !== "session"
+			}, `${report.generatedAt}:${report.dimension}:${report.focus ?? ""}`),
+			/* @__PURE__ */ jsxs("footer", {
+				className: "flex flex-wrap justify-between gap-2 border-t border-doom-border pt-3 text-sm text-doom-dim",
+				"data-testid": "metrics-provenance",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					"Source: LogSink ·",
+					" ",
+					report.transport === "http" ? "HTTP" : report.transport === "worker" ? "database worker" : "transport not reported"
+				] }), /* @__PURE__ */ jsxs("span", {
+					title: report.generatedAt,
+					children: ["Report generated ", Number.isNaN(generated.getTime()) ? report.generatedAt : generated.toLocaleString()]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/MetricsNotice.tsx
+/**
+* Everything the page says instead of, or above, a report.
+*
+* Kept pure and apart from the panel because these are the states that decide
+* whether a reader trusts the numbers, and they are the ones a fetching
+* component makes awkward to assert. The panel decides which state it is in;
+* this decides how each one reads.
+*/
+const EMPTY_TITLES = {
+	"no-sink": "no log sink",
+	"no-data": "nothing recorded yet",
+	"no-api": "metrics not installed",
+	"query-error": "metrics could not be loaded"
+};
+function EmptyForReason({ response }) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		title: EMPTY_TITLES[response.unavailable],
+		description: response.detail,
+		"data-testid": "metrics-empty"
+	});
+}
+function FocusNotice({ requested, applied, dimension, onClear }) {
+	if (requested === "") return null;
+	if (applied === void 0) return /* @__PURE__ */ jsxs("span", {
+		className: "rounded-md border border-doom-edge-yellow bg-doom-tint-yellow p-3 text-sm text-doom-yellow",
+		"data-testid": "metrics-focus-refused",
+		children: [
+			"this log sink does not support narrowing by ",
+			DIMENSION_LABELS[dimension],
+			", so the numbers below are still everything",
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "md",
+				className: "ml-2",
+				onClick: onClear,
+				children: "clear"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex flex-wrap items-center gap-2 rounded-md border border-doom-border bg-doom-panel p-3 text-sm text-doom-dim",
+		"data-testid": "metrics-focus",
+		children: [
+			"narrowed to ",
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 break-all text-doom-hi",
+				children: applied
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "md",
+				className: "ml-2",
+				onClick: onClear,
+				children: "clear"
+			})
+		]
+	});
+}
+/** First load and filter changes have no report to display yet. */
+function MetricsLoading() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		role: "status",
+		"aria-live": "polite",
+		"data-testid": "metrics-loading",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-doom-dim",
+				children: "Loading recorded metrics..."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "grid grid-cols-2 gap-3 @3xl:grid-cols-4",
+				children: [
+					0,
+					1,
+					2,
+					3
+				].map((index) => /* @__PURE__ */ jsx("div", { className: "h-24 animate-pulse rounded-lg border border-doom-border bg-doom-panel motion-reduce:animate-none" }, index))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "h-48 animate-pulse rounded-lg border border-doom-border bg-doom-panel motion-reduce:animate-none"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/_components/MetricsPanel.tsx
+const PERIOD_LABELS = {
+	day: "Past day",
+	week: "Past week",
+	month: "Past month",
+	all: "All history"
+};
+/** Only render a response under the controls that requested it. */
+function MetricsPanel(_props) {
+	const [dimension, setDimension] = useState("model");
+	const [period, setPeriod] = useState("week");
+	const [focus, setFocus] = useState("");
+	const [refreshKey, setRefreshKey] = useState(0);
+	const [completed, setCompleted] = useState();
+	const requestKey = JSON.stringify([
+		dimension,
+		period,
+		focus,
+		refreshKey
+	]);
+	useEffect(() => {
+		const controller = new AbortController();
+		fetchMetrics(dimension, period, focus, controller.signal).then((result) => {
+			if (!controller.signal.aborted) setCompleted({
+				key: requestKey,
+				result
+			});
+		}).catch((error) => {
+			if (!controller.signal.aborted) setCompleted({
+				key: requestKey,
+				result: { error: error instanceof Error ? error.message : "Metrics could not be loaded." }
+			});
+		});
+		return () => controller.abort();
+	}, [
+		dimension,
+		period,
+		focus,
+		requestKey
+	]);
+	const result = completed?.key === requestKey ? completed.result : void 0;
+	const loading = result === void 0;
+	const response = result !== void 0 && "report" in result ? result.report : void 0;
+	const report = response === void 0 || isMetricsUnavailable(response) ? void 0 : response;
+	const error = result !== void 0 && "error" in result ? result.error : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "@container flex w-full min-w-0 flex-col gap-4",
+		"data-testid": "metrics-panel",
+		"aria-busy": loading,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-end gap-3 rounded-lg border border-doom-border bg-doom-panel p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base font-medium text-doom-text",
+							children: "Group by"
+						}), /* @__PURE__ */ jsxs(Select, {
+							value: dimension,
+							onValueChange: (next) => {
+								setFocus("");
+								setDimension(next);
+							},
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								"aria-label": "Group metrics by",
+								"data-testid": "metrics-dimension",
+								className: "w-40 ",
+								children: /* @__PURE__ */ jsx(SelectValue, {})
+							}), /* @__PURE__ */ jsx(SelectContent, { children: METRICS_DIMENSIONS.map((candidate) => /* @__PURE__ */ jsx(SelectItem, {
+								value: candidate,
+								children: DIMENSION_LABELS[candidate]
+							}, candidate)) })]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base font-medium text-doom-text",
+							children: "Period"
+						}), /* @__PURE__ */ jsxs(Select, {
+							value: period,
+							onValueChange: (next) => setPeriod(next),
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								"aria-label": "Metrics period",
+								"data-testid": "metrics-period",
+								className: "w-40 ",
+								children: /* @__PURE__ */ jsx(SelectValue, {})
+							}), /* @__PURE__ */ jsx(SelectContent, { children: METRICS_PERIODS.map((candidate) => /* @__PURE__ */ jsx(SelectItem, {
+								value: candidate,
+								children: PERIOD_LABELS[candidate]
+							}, candidate)) })]
+						})]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "md",
+						className: "ml-auto",
+						onClick: () => setRefreshKey((current) => current + 1),
+						disabled: loading,
+						"data-testid": "metrics-refresh",
+						children: loading ? "Loading..." : "Refresh"
+					})
+				]
+			}),
+			loading ? /* @__PURE__ */ jsx(MetricsLoading, {}) : null,
+			error === "" ? null : /* @__PURE__ */ jsxs("p", {
+				role: "alert",
+				className: "rounded-lg border border-doom-edge-red bg-doom-tint-red p-4 text-sm text-doom-red",
+				"data-testid": "metrics-error",
+				children: [error, " Use Refresh to try again."]
+			}),
+			response !== void 0 && isMetricsUnavailable(response) ? /* @__PURE__ */ jsx(EmptyForReason, { response }) : null,
+			report === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FocusNotice, {
+				requested: focus,
+				applied: report.focus,
+				dimension: report.dimension,
+				onClear: () => setFocus("")
+			}), /* @__PURE__ */ jsx(MetricsReportView, {
+				report,
+				onFocus: setFocus,
+				onPeriodChange: setPeriod
+			})] })
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/setting/metrics.panel.web.tsx
+var metrics_panel_web_default = defineSettingsPanel({
+	label: "metrics",
+	detail: "recorded usage, token attribution and issues",
+	component: MetricsPanel
+});
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/_components/AgentDiagnosticCard.tsx
+function AgentDiagnosticCard({ toolName, output, running, isError }) {
+	const lines = output.split("\n").filter(Boolean).map((text) => ({
+		text,
+		tone: "text"
+	}));
+	return /* @__PURE__ */ jsx(MessageItem, {
+		tone: toolTone({
+			running,
+			isError
+		}),
+		expandable: lines.length > 12,
+		children: ({ expanded }) => {
+			const view = collapseLines(lines, 12, expanded);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageItemHeader, {
+				title: toolName,
+				children: "Captured agent evidence"
+			}), /* @__PURE__ */ jsxs(MessageItemBody, { children: [
+				/* @__PURE__ */ jsx(MessageLines, { lines: view.shown }),
+				view.hidden > 0 ? /* @__PURE__ */ jsxs(MessageItemStatus, {
+					expands: true,
+					children: [view.hidden, " more lines"]
+				}) : null,
+				running ? /* @__PURE__ */ jsx(MessageItemStatus, {
+					tone: "running",
+					children: "Reading session telemetry"
+				}) : null,
+				isError ? /* @__PURE__ */ jsx(MessageItemStatus, {
+					tone: "error",
+					children: "Diagnostic unavailable"
+				}) : null
+			] })] });
+		}
+	});
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/diagnose-agent.web.tsx
+var diagnose_agent_web_default = defineToolRenderer({
+	tools: ["diagnose_agent"],
+	message: AgentDiagnosticCard
+});
+//#endregion
+//#region generated/web.ts
+const via = (identity, value) => value === void 0 ? void 0 : {
+	...identity,
+	...value
+};
+const webPlugin = defineWebPlugin({
+	id: "log",
+	global: { get settingsPanels() {
+		return [via({ id: "metrics" }, metrics_panel_web_default)];
+	} },
+	session: { get toolRenderers() {
+		return [via({ tools: ["diagnose_agent"] }, diagnose_agent_web_default)];
+	} }
+});
+//#endregion
+export { webPlugin };
+
+//# sourceMappingURL=web.mjs.map