@agimon-ai/po-log 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/extensions/web.mjs

@@ -7,7 +7,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /**
 * The dimensions the page offers.
 *
-* log-sink-mcp also groups by 'workflow-run', 'workflow-name', 'job' and
+* po-logsink 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.
@@ -215,7 +215,7 @@ function GroupBars({ groups, totalTokens, focus, onFocus }) {
 		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",
+				className: "rounded-md border border-dashed border-po-border p-5 text-sm text-po-dim",
 				children: "No grouped usage was recorded for this selection."
 			}) : null,
 			/* @__PURE__ */ jsx("ul", {
@@ -230,27 +230,27 @@ function GroupBars({ groups, totalTokens, focus, onFocus }) {
 						/* @__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",
+								className: "min-w-0 break-all text-left font-medium text-po-hi",
 								title: group.key,
 								children: unknown ? "Unattributed" : group.key
 							}), /* @__PURE__ */ jsx("span", {
-								className: "shrink-0 text-right font-semibold tabular-nums text-doom-hi",
+								className: "shrink-0 text-right font-semibold tabular-nums text-po-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",
+							className: "mt-2 block h-1.5 overflow-hidden rounded-full bg-po-border",
 							children: /* @__PURE__ */ jsx("span", {
-								className: `block h-full rounded-full ${unknown ? "bg-doom-yellow" : "bg-doom-blue"}`,
+								className: `block h-full rounded-full ${unknown ? "bg-po-yellow" : "bg-po-blue"}`,
 								style: { width: `${percentage}%` }
 							})
 						}),
 						/* @__PURE__ */ jsxs("span", {
-							className: "mt-2 flex flex-wrap items-center justify-between gap-2 text-sm text-doom-dim",
+							className: "mt-2 flex flex-wrap items-center justify-between gap-2 text-sm text-po-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",
+								className: group.issueCount > 0 || group.failed ? "text-po-yellow" : "text-po-dim",
 								children: [
 									group.failed ? "Failed · " : "",
 									formatTokens(group.issueCount),
@@ -266,7 +266,7 @@ function GroupBars({ groups, totalTokens, focus, onFocus }) {
 						"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" : ""}`,
+						className: `block w-full rounded-md p-3 text-base hover:bg-po-tint-blue focus-visible:outline focus-visible:outline-1 focus-visible:outline-po-blue ${selected ? "bg-po-tint-blue" : ""}`,
 						children: row
 					}) : /* @__PURE__ */ jsx("div", {
 						className: "rounded-md p-3 text-base",
@@ -313,7 +313,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 	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",
+		className: "rounded-md border border-dashed border-po-border p-5 text-sm text-po-dim",
 		"data-testid": "metrics-timeline-chart",
 		children: "No timeline buckets were recorded for this selection."
 	});
@@ -321,19 +321,19 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 		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",
+			className: "rounded-md border border-po-border bg-po-deep p-5",
 			children: [
 				/* @__PURE__ */ jsx("p", {
-					className: "text-sm text-doom-dim",
+					className: "text-sm text-po-dim",
 					children: active.label
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "mt-2 text-lg font-semibold tabular-nums text-doom-blue",
+					className: "mt-2 text-lg font-semibold tabular-nums text-po-blue",
 					title: String(active.totalTokens),
 					children: [formatTokens(active.totalTokens), " tokens"]
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "mt-3 text-sm leading-relaxed text-doom-dim",
+					className: "mt-3 text-sm leading-relaxed text-po-dim",
 					children: [
 						"Only one ",
 						unit,
@@ -341,7 +341,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 					]
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: "mt-2 text-sm text-doom-dim",
+					className: "mt-2 text-sm text-po-dim",
 					children: "For more detail, pick a shorter period when one is available."
 				}),
 				onShorterPeriod === void 0 ? null : /* @__PURE__ */ jsx(Button, {
@@ -372,7 +372,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 						children: item.label
 					}, item.key))
 				}), /* @__PURE__ */ jsxs("span", {
-					className: "text-sm text-doom-dim",
+					className: "text-sm text-po-dim",
 					children: [
 						buckets.length,
 						" recorded ",
@@ -385,7 +385,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 				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",
+					className: "flex w-12 shrink-0 flex-col justify-between text-right text-sm tabular-nums text-po-dim",
 					children: [
 						/* @__PURE__ */ jsx("span", { children: formatTokens(max) }),
 						/* @__PURE__ */ jsx("span", { children: formatTokens(max / 2) }),
@@ -406,7 +406,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 						x2: PLOT_WIDTH,
 						y1: y,
 						y2: y,
-						className: "text-doom-border",
+						className: "text-po-border",
 						stroke: "currentColor",
 						vectorEffect: "non-scaling-stroke"
 					}, y)), buckets.map((bucket, index) => {
@@ -419,7 +419,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 							height,
 							rx: "2",
 							fill: "currentColor",
-							className: active?.label === bucket.label ? "text-doom-cyan" : "text-doom-blue"
+							className: active?.label === bucket.label ? "text-po-cyan" : "text-po-blue"
 						}), /* @__PURE__ */ jsx("rect", {
 							x: index * slot,
 							y: "0",
@@ -439,28 +439,28 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 									setActiveLabel(bucket.label);
 								}
 							},
-							className: "cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-cyan",
+							className: "cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-po-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",
+				className: "ml-15 flex justify-between gap-3 text-sm text-po-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",
+				className: "flex flex-wrap justify-between gap-2 rounded-md bg-po-deep px-3 py-2 text-sm tabular-nums",
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-doom-dim",
+					className: "text-po-dim",
 					children: active?.label
 				}), /* @__PURE__ */ jsxs("span", {
-					className: "text-doom-hi",
+					className: "text-po-hi",
 					children: [
 						formatTokens(active?.[series] ?? NaN),
 						" ",
@@ -470,7 +470,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 				})]
 			}),
 			max === 0 ? /* @__PURE__ */ jsxs("p", {
-				className: "text-sm text-doom-dim",
+				className: "text-sm text-po-dim",
 				children: [
 					"Recorded buckets contain zero ",
 					SERIES.find((item) => item.key === series)?.label.toLowerCase(),
@@ -478,9 +478,9 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 				]
 			}) : null,
 			/* @__PURE__ */ jsxs("details", {
-				className: "text-sm text-doom-dim",
+				className: "text-sm text-po-dim",
 				children: [/* @__PURE__ */ jsx("summary", {
-					className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+					className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-po-blue",
 					children: "View exact bucket values"
 				}), /* @__PURE__ */ jsx("div", {
 					className: "mt-3 overflow-x-auto",
@@ -514,7 +514,7 @@ function TimelineChart({ buckets, bucketUnit, onShorterPeriod }) {
 								})
 							] }) }),
 							/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs("tr", {
-								className: "border-t border-doom-border",
+								className: "border-t border-po-border",
 								children: [/* @__PURE__ */ jsx("th", {
 									scope: "row",
 									className: "py-2 text-left font-normal",
@@ -604,34 +604,34 @@ function IssueRow({ group, max, tools }) {
 	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",
+		className: "flex flex-col rounded-md border border-po-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",
+				className: "absolute bottom-0 left-0 h-1 rounded-xs bg-po-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",
+				className: "relative flex min-h-10 w-full flex-wrap items-start gap-3 rounded-md p-3 text-left text-base hover:bg-po-tint-blue focus-visible:outline focus-visible:outline-1 focus-visible:outline-po-blue",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "w-8 shrink-0 text-right font-semibold text-doom-yellow",
+						className: "w-8 shrink-0 text-right font-semibold text-po-yellow",
 						children: group.occurrences
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "w-24 shrink-0 break-words font-medium text-doom-hi",
+						className: "w-24 shrink-0 break-words font-medium text-po-hi",
 						children: titleOf(group)
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "min-w-40 flex-1 break-words text-doom-dim",
+						className: "min-w-40 flex-1 break-words text-po-dim",
 						children: group.detail
 					}),
 					calls === void 0 ? null : /* @__PURE__ */ jsxs("span", {
-						className: "shrink-0 text-doom-dim",
+						className: "shrink-0 text-po-dim",
 						children: [calls, " token samples"]
 					})
 				]
@@ -641,7 +641,7 @@ function IssueRow({ group, max, tools }) {
 			"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",
+					className: "flex flex-wrap gap-x-3 gap-y-1 text-sm text-po-dim",
 					children: [
 						/* @__PURE__ */ jsxs("span", { children: ["category ", group.category] }),
 						group.tool === null ? null : /* @__PURE__ */ jsxs("span", { children: ["tool ", group.tool] }),
@@ -653,11 +653,11 @@ function IssueRow({ group, max, tools }) {
 					]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "break-words text-doom-dim",
+					className: "break-words text-po-dim",
 					children: group.detail
 				}),
 				/* @__PURE__ */ jsx("ul", {
-					className: "flex flex-col gap-1 text-sm text-doom-dim",
+					className: "flex flex-col gap-1 text-sm text-po-dim",
 					children: group.members.map((member, index) => /* @__PURE__ */ jsxs("li", {
 						className: "flex flex-wrap gap-x-2",
 						children: [
@@ -683,7 +683,7 @@ function IssuesDetail({ view, tools, summaryCount }) {
 		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",
+				className: "rounded-md border border-po-edge-yellow bg-po-tint-yellow p-3 text-sm leading-relaxed text-po-yellow",
 				role: "status",
 				"data-testid": "metrics-issue-count-mismatch",
 				children: [
@@ -698,23 +698,23 @@ function IssuesDetail({ view, tools, summaryCount }) {
 				]
 			}) : null,
 			/* @__PURE__ */ jsxs("span", {
-				className: "text-sm text-doom-dim",
+				className: "text-sm text-po-dim",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-doom-hi",
+						className: "text-po-hi",
 						children: view.totalIssues
 					}),
 					" occurrences of",
 					" ",
 					/* @__PURE__ */ jsx("span", {
-						className: "text-doom-hi",
+						className: "text-po-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",
+				className: "rounded-md border border-dashed border-po-border p-4 text-sm text-po-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",
@@ -728,13 +728,13 @@ function IssuesDetail({ view, tools, summaryCount }) {
 			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",
+					className: "text-base font-semibold text-po-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",
+						className: "text-sm text-po-dim",
 						children: [
 							/* @__PURE__ */ jsx("th", {
 								scope: "col",
@@ -755,18 +755,18 @@ function IssuesDetail({ view, tools, summaryCount }) {
 					}) }), /* @__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",
+							className: "border-b border-po-border/40",
 							children: [
 								/* @__PURE__ */ jsx("td", {
-									className: "min-w-0 break-all py-2 text-doom-dim",
+									className: "min-w-0 break-all py-2 text-po-dim",
 									children: name
 								}),
 								/* @__PURE__ */ jsx("td", {
-									className: "w-16 py-2 text-right text-doom-red",
+									className: "w-16 py-2 text-right text-po-red",
 									children: failures
 								}),
 								/* @__PURE__ */ jsx("td", {
-									className: "w-28 py-2 text-right text-doom-dim",
+									className: "w-28 py-2 text-right text-po-dim",
 									children: calls === void 0 ? "no token samples" : `${String(calls)} token samples`
 								})
 							]
@@ -775,15 +775,15 @@ function IssuesDetail({ view, tools, summaryCount }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-doom-dim",
+				className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-po-dim",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-semibold text-doom-dim",
+					className: "text-sm font-semibold text-po-dim",
 					children: "by category"
 				}), countRows(view.byCategory).map(([name, count]) => /* @__PURE__ */ jsxs("span", { children: [
 					name,
 					" ",
 					/* @__PURE__ */ jsx("span", {
-						className: "text-doom-hi",
+						className: "text-po-hi",
 						children: count
 					})
 				] }, name))]
@@ -837,16 +837,16 @@ function IssuesSection({ tools, focus, count, startTime, endTime, broaderScope =
 		});
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "flex min-w-0 flex-col gap-3 rounded-lg border border-doom-border bg-doom-panel p-4",
+		className: "flex min-w-0 flex-col gap-3 rounded-lg border border-po-border bg-po-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",
+					className: "text-lg font-semibold text-po-hi",
 					children: ["Issues to investigate", count === void 0 ? "" : ` · ${count} ${count === 1 ? "issue" : "issues"}`]
 				}), /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-sm text-doom-dim",
+					className: "mt-1 text-sm text-po-dim",
 					children: "Inspect recurring failures and the evidence behind them."
 				})] }), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
@@ -877,7 +877,7 @@ function IssuesSection({ tools, focus, count, startTime, endTime, broaderScope =
 				})]
 			}),
 			/* @__PURE__ */ jsxs("p", {
-				className: "text-sm leading-relaxed text-doom-dim",
+				className: "text-sm leading-relaxed text-po-dim",
 				children: [
 					"Details are loaded on demand.",
 					" ",
@@ -893,13 +893,13 @@ function IssuesSection({ tools, focus, count, startTime, endTime, broaderScope =
 				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",
+						className: "rounded-md border border-po-edge-yellow bg-po-tint-yellow p-3 text-sm text-po-yellow",
 						"data-testid": "metrics-issues-message",
 						children: message
 					}),
 					loading ? /* @__PURE__ */ jsx("p", {
 						role: "status",
-						className: "py-3 text-sm text-doom-dim",
+						className: "py-3 text-sm text-po-dim",
 						children: "Reading recorded incidents..."
 					}) : null,
 					view === void 0 ? null : /* @__PURE__ */ jsx(IssuesDetail, {
@@ -921,35 +921,35 @@ function MetricsSummary({ totals }) {
 			label: "Total tokens",
 			value: totals.totalTokens,
 			detail: "Provider-reported total",
-			color: "text-doom-blue"
+			color: "text-po-blue"
 		},
 		{
 			label: "Input tokens",
 			value: totals.inputTokens,
 			detail: "Reported input counter",
-			color: "text-doom-hi"
+			color: "text-po-hi"
 		},
 		{
 			label: "Output tokens",
 			value: totals.outputTokens,
 			detail: "Reported output counter",
-			color: "text-doom-hi"
+			color: "text-po-hi"
 		},
 		{
 			label: "Recorded issues",
 			value: totals.issueCount,
 			detail: "Detected in this selection",
-			color: totals.issueCount > 0 ? "text-doom-yellow" : "text-doom-hi"
+			color: totals.issueCount > 0 ? "text-po-yellow" : "text-po-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",
+			className: "min-w-0 rounded-lg border border-po-border bg-po-panel p-4",
 			children: [
 				/* @__PURE__ */ jsx("dt", {
-					className: "text-sm text-doom-dim",
+					className: "text-sm text-po-dim",
 					children: card.label
 				}),
 				/* @__PURE__ */ jsx("dd", {
@@ -958,7 +958,7 @@ function MetricsSummary({ totals }) {
 					children: formatTokens(card.value)
 				}),
 				/* @__PURE__ */ jsx("dd", {
-					className: "mt-1 text-sm text-doom-dim",
+					className: "mt-1 text-sm text-po-dim",
 					children: card.detail
 				})
 			]
@@ -972,24 +972,24 @@ 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",
+		className: "flex min-w-0 flex-col gap-4 rounded-lg border border-po-border bg-po-panel p-4",
 		"aria-label": "Tool token samples",
 		children: [
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-lg font-semibold text-doom-hi",
+				className: "text-lg font-semibold text-po-hi",
 				children: "Tool token samples"
 			}), /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm text-doom-dim",
+				className: "mt-1 text-sm text-po-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",
+				className: "flex flex-1 flex-col justify-center gap-2 rounded-md border border-dashed border-po-border p-5",
 				"data-testid": "metrics-tools-empty",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-base font-semibold text-doom-hi",
+					className: "text-base font-semibold text-po-hi",
 					children: "No token-attributed tool calls"
 				}), /* @__PURE__ */ jsx("p", {
-					className: "text-sm leading-relaxed text-doom-dim",
+					className: "text-sm leading-relaxed text-po-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", {
@@ -1020,7 +1020,7 @@ function ToolMetrics({ tools }) {
 							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",
+							className: "border-b border-po-border text-sm text-po-dim",
 							children: [
 								/* @__PURE__ */ jsx("th", {
 									scope: "col",
@@ -1040,19 +1040,19 @@ function ToolMetrics({ tools }) {
 							]
 						}) }),
 						/* @__PURE__ */ jsx("tbody", { children: rows.map((tool) => /* @__PURE__ */ jsxs("tr", {
-							className: "border-b border-doom-border/40",
+							className: "border-b border-po-border/40",
 							children: [
 								/* @__PURE__ */ jsx("th", {
 									scope: "row",
-									className: "max-w-48 break-all py-3 text-left font-normal text-doom-hi",
+									className: "max-w-48 break-all py-3 text-left font-normal text-po-hi",
 									children: tool.name
 								}),
 								/* @__PURE__ */ jsx("td", {
-									className: "py-3 pl-3 text-right text-doom-dim",
+									className: "py-3 pl-3 text-right text-po-dim",
 									children: formatTokens(tool.calls)
 								}),
 								/* @__PURE__ */ jsx("td", {
-									className: "py-3 pl-3 text-right text-doom-blue",
+									className: "py-3 pl-3 text-right text-po-blue",
 									title: String(tool.p90TotalTokens),
 									children: formatTokens(tool.p90TotalTokens)
 								})
@@ -1062,9 +1062,9 @@ function ToolMetrics({ tools }) {
 				})
 			})] }),
 			/* @__PURE__ */ jsxs("details", {
-				className: "text-sm leading-relaxed text-doom-dim",
+				className: "text-sm leading-relaxed text-po-dim",
 				children: [/* @__PURE__ */ jsx("summary", {
-					className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+					className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-po-blue",
 					children: "How these samples are counted"
 				}), /* @__PURE__ */ jsx("p", {
 					className: "mt-2",
@@ -1114,13 +1114,13 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 			/* @__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",
+					className: "flex min-w-0 flex-col gap-4 rounded-lg border border-po-border bg-po-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",
+						className: "text-lg font-semibold text-po-hi",
 						children: "Usage over time"
 					}), /* @__PURE__ */ jsx("p", {
-						className: "mt-1 text-sm text-doom-dim",
+						className: "mt-1 text-sm text-po-dim",
 						children: "Recorded tokens, not estimated spend."
 					})] }), /* @__PURE__ */ jsx(TimelineChart, {
 						buckets: report.timeline,
@@ -1128,35 +1128,35 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 						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",
+					className: "flex min-w-0 flex-col gap-4 rounded-lg border border-po-border bg-po-panel p-4",
 					"aria-label": "Reported counters",
 					children: [
 						/* @__PURE__ */ jsx("h3", {
-							className: "text-lg font-semibold text-doom-hi",
+							className: "text-lg font-semibold text-po-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",
+								className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1 border-b border-po-border/40 pb-3",
 								children: [/* @__PURE__ */ jsx("dt", {
-									className: "text-sm text-doom-dim",
+									className: "text-sm text-po-dim",
 									children: counter.name
 								}), /* @__PURE__ */ jsx("dd", {
-									className: "text-base font-semibold tabular-nums text-doom-hi",
+									className: "text-base font-semibold tabular-nums text-po-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",
+							className: "text-sm leading-relaxed text-po-dim",
 							children: "Monetary cost is not included in this metrics report."
 						}),
 						/* @__PURE__ */ jsxs("details", {
-							className: "text-sm leading-relaxed text-doom-dim",
+							className: "text-sm leading-relaxed text-po-dim",
 							children: [/* @__PURE__ */ jsx("summary", {
-								className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-doom-blue",
+								className: "cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-po-blue",
 								children: "Why the counters may not add up"
 							}), /* @__PURE__ */ jsx("p", {
 								className: "mt-2",
@@ -1169,24 +1169,24 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 			/* @__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",
+					className: "flex min-w-0 flex-col gap-3 rounded-lg border border-po-border bg-po-panel p-4",
 					"aria-label": `Tokens by ${label}`,
 					children: [
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
-							className: "text-lg font-semibold text-doom-hi",
+							className: "text-lg font-semibold text-po-hi",
 							children: ["Tokens by ", label]
 						}), /* @__PURE__ */ jsx("p", {
-							className: "mt-1 text-sm text-doom-dim",
+							className: "mt-1 text-sm text-po-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",
+							className: "rounded-md border border-po-edge-yellow bg-po-tint-yellow p-3",
 							"data-testid": "metrics-attribution-notice",
 							children: [/* @__PURE__ */ jsxs("p", {
-								className: "text-sm font-semibold text-doom-yellow",
+								className: "text-sm font-semibold text-po-yellow",
 								children: [label.charAt(0).toUpperCase() + label.slice(1), " attribution missing"]
 							}), /* @__PURE__ */ jsxs("p", {
-								className: "mt-1 text-sm leading-relaxed text-doom-dim",
+								className: "mt-1 text-sm leading-relaxed text-po-dim",
 								children: [
 									formatTokens(unattributed),
 									" tokens have no ",
@@ -1198,7 +1198,7 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 							})]
 						}) : null,
 						DIMENSION_NOTES[report.dimension] === void 0 ? null : /* @__PURE__ */ jsx("p", {
-							className: "text-sm leading-relaxed text-doom-dim",
+							className: "text-sm leading-relaxed text-po-dim",
 							children: DIMENSION_NOTES[report.dimension]
 						}),
 						/* @__PURE__ */ jsx(GroupBars, {
@@ -1208,7 +1208,7 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 							onFocus
 						}, `${report.dimension}:${report.focus ?? ""}`),
 						/* @__PURE__ */ jsxs("p", {
-							className: "text-sm text-doom-dim",
+							className: "text-sm text-po-dim",
 							children: [
 								"Showing ",
 								report.groups.length,
@@ -1220,7 +1220,7 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 							]
 						}),
 						report.totals.failedGroups > 0 ? /* @__PURE__ */ jsxs("p", {
-							className: "text-sm text-doom-yellow",
+							className: "text-sm text-po-yellow",
 							children: [
 								report.totals.failedGroups,
 								" of ",
@@ -1242,7 +1242,7 @@ function MetricsReportView({ report, onFocus, onPeriodChange }) {
 				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",
+				className: "flex flex-wrap justify-between gap-2 border-t border-po-border pt-3 text-sm text-po-dim",
 				"data-testid": "metrics-provenance",
 				children: [/* @__PURE__ */ jsxs("span", { children: [
 					"Source: LogSink ·",
@@ -1282,7 +1282,7 @@ function EmptyForReason({ response }) {
 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",
+		className: "rounded-md border border-po-edge-yellow bg-po-tint-yellow p-3 text-sm text-po-yellow",
 		"data-testid": "metrics-focus-refused",
 		children: [
 			"this log sink does not support narrowing by ",
@@ -1298,12 +1298,12 @@ function FocusNotice({ requested, applied, dimension, onClear }) {
 		]
 	});
 	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",
+		className: "flex flex-wrap items-center gap-2 rounded-md border border-po-border bg-po-panel p-3 text-sm text-po-dim",
 		"data-testid": "metrics-focus",
 		children: [
 			"narrowed to ",
 			/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 break-all text-doom-hi",
+				className: "min-w-0 break-all text-po-hi",
 				children: applied
 			}),
 			/* @__PURE__ */ jsx(Button, {
@@ -1325,7 +1325,7 @@ function MetricsLoading() {
 		"data-testid": "metrics-loading",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "text-sm text-doom-dim",
+				className: "text-sm text-po-dim",
 				children: "Loading recorded metrics..."
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -1336,11 +1336,11 @@ function MetricsLoading() {
 					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))
+				].map((index) => /* @__PURE__ */ jsx("div", { className: "h-24 animate-pulse rounded-lg border border-po-border bg-po-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"
+				className: "h-48 animate-pulse rounded-lg border border-po-border bg-po-panel motion-reduce:animate-none"
 			})
 		]
 	});
@@ -1397,12 +1397,12 @@ function MetricsPanel(_props) {
 		"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",
+				className: "flex min-w-0 flex-wrap items-end gap-3 rounded-lg border border-po-border bg-po-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",
+							className: "text-base font-medium text-po-text",
 							children: "Group by"
 						}), /* @__PURE__ */ jsxs(Select, {
 							value: dimension,
@@ -1424,7 +1424,7 @@ function MetricsPanel(_props) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-2",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-base font-medium text-doom-text",
+							className: "text-base font-medium text-po-text",
 							children: "Period"
 						}), /* @__PURE__ */ jsxs(Select, {
 							value: period,
@@ -1454,7 +1454,7 @@ function MetricsPanel(_props) {
 			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",
+				className: "rounded-lg border border-po-edge-red bg-po-tint-red p-4 text-sm text-po-red",
 				"data-testid": "metrics-error",
 				children: [error, " Use Refresh to try again."]
 			}),