@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/domains/metrics/lib/series-colors.es.js

@@ -0,0 +1,272 @@
+// src/domains/metrics/lib/series-colors.ts
+/**
+* Series colors for breakdowns by model, provider or any other key, from one palette of eleven hues
+* (`--chart-series-*`). Each lab reserves its hue, so a lab reads the same on every chart; its other
+* next two models take shifted shades of it, and the rest stand apart in hues of their own. Series with
+* no lab take the hues left over.
+*/
+var SERIES_HUES = [
+	"pink",
+	"orange",
+	"amber",
+	"lime",
+	"green",
+	"teal",
+	"cyan",
+	"blue",
+	"indigo",
+	"violet",
+	"magenta"
+];
+/** Each lab's hue, by the provider ids `ProviderLogo` knows. Labs not listed take a free hue. */
+var LAB_HUES = {
+	anthropic: "orange",
+	openai: "green",
+	google: "indigo",
+	typesafe: "pink",
+	deepseek: "blue",
+	xai: "neutral",
+	meta: "cyan",
+	mistral: "amber",
+	qwen: "violet",
+	openrouter: "lime",
+	moonshotai: "neutral",
+	minimax: "magenta",
+	zai: "teal"
+};
+/** Lab hues as a map, so lookups by any string never hit `Object.prototype`. */
+var LAB_HUE = new Map(Object.entries(LAB_HUES));
+/** Other spellings of the labs' provider ids. */
+var LAB_ALIASES = /* @__PURE__ */ new Map([
+	["x-ai", "xai"],
+	["z-ai", "zai"],
+	["meta-llama", "meta"],
+	["llama", "meta"],
+	["mistralai", "mistral"],
+	["gemini", "google"],
+	["alibaba", "qwen"],
+	["moonshot", "moonshotai"],
+	["jev", "typesafe"]
+]);
+/** Model names, for rows a host served (OpenRouter, Groq, Bedrock) or rows without a provider. */
+var MODEL_LABS = [
+	[/^claude/, "anthropic"],
+	[/^(gpt|o[1345](-|$)|chatgpt|codex)/, "openai"],
+	[/^(gemini|gemma)/, "google"],
+	[/^jev/, "typesafe"],
+	[/^deepseek/, "deepseek"],
+	[/^grok/, "xai"],
+	[/^llama/, "meta"],
+	[/^(mistral|mixtral|codestral|magistral|devstral|ministral)/, "mistral"],
+	[/^(qwen|qwq)/, "qwen"],
+	[/^(nemotron|nvidia)/, "nvidia"],
+	[/^minimax/, "minimax"],
+	[/^glm/, "zai"],
+	[/^kimi/, "moonshotai"]
+];
+/** Providers that serve other labs' models (routers, inference hosts, clouds), so the model tells the lab. */
+var HOSTS = /* @__PURE__ */ new Set([
+	"openrouter",
+	"codex",
+	"mastra",
+	"netlify",
+	"vercel",
+	"groq",
+	"together",
+	"togetherai",
+	"fireworks",
+	"fireworks-ai",
+	"deepinfra",
+	"cerebras",
+	"sambanova",
+	"hyperbolic",
+	"novita",
+	"nebius",
+	"baseten",
+	"azure",
+	"bedrock",
+	"amazon-bedrock",
+	"google-vertex",
+	"vertex"
+]);
+/** Segments of a hosted model's resource path that aren't a lab. */
+var PATH_WORDS = /* @__PURE__ */ new Set([
+	"models",
+	"accounts",
+	"projects",
+	"deployments"
+]);
+/** Every lab id this file knows, with or without a hue. */
+var KNOWN_LABS = /* @__PURE__ */ new Set([...LAB_HUE.keys(), ...MODEL_LABS.map(([, lab]) => lab)]);
+var cleanLab = (id) => {
+	const [v = id] = id.toLowerCase().split(".");
+	return LAB_ALIASES.get(v) ?? v;
+};
+var isHost = (id) => HOSTS.has(cleanLab(id));
+/** The lab a model id names: its `lab/` prefix, a lab inside a dotted id, or its name. */
+function modelLab(model) {
+	const parts = model.toLowerCase().split("/");
+	const name = parts.pop() ?? "";
+	const prefix = parts.pop();
+	if (prefix && !isHost(prefix) && !PATH_WORDS.has(prefix)) return cleanLab(prefix);
+	const dotted = name.split(".").map(cleanLab).find((seg) => KNOWN_LABS.has(seg));
+	if (dotted) return dotted;
+	return MODEL_LABS.find(([re]) => re.test(name))?.[1];
+}
+/**
+* The lab behind a series: its provider, or for rows a host served the lab its model names.
+*
+* @example
+* seriesLab('anthropic.messages', 'claude-opus-5-5') // 'anthropic'
+* seriesLab('openrouter', 'meta-llama/llama-4-scout') // 'meta'
+* seriesLab('groq', 'llama-4-maverick') // 'meta'
+* seriesLab(undefined, 'gpt-5-mini') // 'openai'
+*/
+function seriesLab(provider, model) {
+	const lab = provider ? cleanLab(provider) : void 0;
+	if (lab && !HOSTS.has(lab)) return lab;
+	return (model ? modelLab(model) : void 0) ?? lab;
+}
+/**
+* Shades of a hue handed out more than once: a little lighter, then darker, then further, each
+* nudged warmer or cooler. Lightness moves a share of the room left (toward white when positive,
+* toward black when negative), so a light base like xAI's white never clips. The hue nudge stays
+* under half the gap between hues, so a shade never reads as the next lab's color. Ten in all, as
+* many as a chart names; past that they repeat. `[lightness share, hue in degrees, chroma factor]`.
+*/
+var SHADES = [
+	[
+		0,
+		0,
+		1
+	],
+	[
+		.3,
+		10,
+		.85
+	],
+	[
+		-.1,
+		-10,
+		1
+	],
+	[
+		.55,
+		-10,
+		.75
+	],
+	[
+		-.2,
+		10,
+		1
+	],
+	[
+		.75,
+		0,
+		.6
+	],
+	[
+		-.3,
+		0,
+		1
+	],
+	[
+		.15,
+		-12,
+		.9
+	],
+	[
+		-.05,
+		12,
+		1
+	],
+	[
+		.42,
+		0,
+		.8
+	]
+];
+/** A shade's lightness from its base's: a share of the way to white, or to black. */
+var shadeLightness = (l, share) => share > 0 ? l + (1 - l) * share : l * (1 + share);
+/** A hue's color, or its nth shade. */
+function seriesColor(hue, shade = 0) {
+	const base = `var(--chart-series-${hue})`;
+	const [share = 0, dh = 0, c = 1] = SHADES[shade % SHADES.length] ?? [];
+	if (!share && !dh) return base;
+	return `oklch(from ${base} ${share > 0 ? `calc(l + (1 - l) * ${share})` : `calc(l * ${1 + share})`} calc(c * ${c}) calc(h + ${dh}))`;
+}
+/** The order hues go to series with no lab, each far from the one before. */
+var FREE_ORDER = [
+	"blue",
+	"orange",
+	"green",
+	"violet",
+	"amber",
+	"cyan",
+	"pink",
+	"lime",
+	"indigo",
+	"teal",
+	"magenta"
+];
+/**
+* Colors for a page's series, keyed by `item.key`. Pass every series the page shows, ranked largest
+* first, once per page, so a model keeps its color on every chart.
+*
+* - Each lab's largest series takes the lab's hue; labs without one claim a free hue.
+* - The lab's next two series take shifted shades of it, in rank order; past those, a shared family
+*   is too hard to follow on a line chart, so the rest take hues of their own.
+* - When the page shows a single lab, a shared family tells nothing apart, so its other series all
+*   take hues of their own.
+* - Series with no lab take the hues no lab on the page uses, then shades once those run out.
+*/
+/** How many of a lab's series share its color family before the rest take their own hue. */
+var SHARED_PER_LAB = 3;
+function seriesColors(items) {
+	const colors = /* @__PURE__ */ new Map();
+	const used = /* @__PURE__ */ new Map();
+	const take = (key, hue) => {
+		const shade = used.get(hue) ?? 0;
+		used.set(hue, shade + 1);
+		colors.set(key, seriesColor(hue, shade));
+	};
+	/** The next hue for a series or lab with none: unused first, then the least used. */
+	const nextFree = () => {
+		const unused = FREE_ORDER.find((h) => !used.has(h));
+		if (unused) return unused;
+		const least = Math.min(...FREE_ORDER.map((h) => used.get(h) ?? 0));
+		return FREE_ORDER.find((h) => used.get(h) === least) ?? "blue";
+	};
+	const labs = items.map((it) => seriesLab(it.provider, it.model));
+	const labHue = /* @__PURE__ */ new Map();
+	const perLab = /* @__PURE__ */ new Map();
+	items.forEach((it, i) => {
+		const lab = labs[i];
+		const hue = lab ? LAB_HUE.get(lab) : void 0;
+		if (lab && hue && !labHue.has(lab)) {
+			labHue.set(lab, hue);
+			perLab.set(lab, 1);
+			take(it.key, hue);
+		}
+	});
+	const singleLab = new Set(labs.filter(Boolean)).size === 1;
+	items.forEach((it, i) => {
+		if (colors.has(it.key)) return;
+		const lab = labs[i];
+		if (!lab) return take(it.key, nextFree());
+		const rank = perLab.get(lab) ?? 0;
+		perLab.set(lab, rank + 1);
+		const hue = labHue.get(lab);
+		if (!hue) {
+			const claimed = nextFree();
+			labHue.set(lab, claimed);
+			return take(it.key, claimed);
+		}
+		if (!singleLab && rank < SHARED_PER_LAB) return take(it.key, hue);
+		take(it.key, nextFree());
+	});
+	return colors;
+}
+export { LAB_HUES, SERIES_HUES, SHADES, seriesColor, seriesColors, seriesLab, shadeLightness };
+
+//# sourceMappingURL=series-colors.es.js.map

package/dist/domains/metrics/lib/series-colors.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series-colors.es.js","names":[],"sources":["../../../../src/domains/metrics/lib/series-colors.ts"],"sourcesContent":["/**\n * Series colors for breakdowns by model, provider or any other key, from one palette of eleven hues\n * (`--chart-series-*`). Each lab reserves its hue, so a lab reads the same on every chart; its other\n * next two models take shifted shades of it, and the rest stand apart in hues of their own. Series with\n * no lab take the hues left over.\n */\n\nexport const SERIES_HUES = [\n  'pink',\n  'orange',\n  'amber',\n  'lime',\n  'green',\n  'teal',\n  'cyan',\n  'blue',\n  'indigo',\n  'violet',\n  'magenta',\n] as const;\n\nexport type SeriesHue = (typeof SERIES_HUES)[number] | 'neutral';\n\n/** Each lab's hue, by the provider ids `ProviderLogo` knows. Labs not listed take a free hue. */\nexport const LAB_HUES: Record<string, SeriesHue> = {\n  anthropic: 'orange',\n  openai: 'green',\n  google: 'indigo',\n  typesafe: 'pink',\n  deepseek: 'blue',\n  xai: 'neutral',\n  meta: 'cyan',\n  mistral: 'amber',\n  qwen: 'violet',\n  openrouter: 'lime',\n  moonshotai: 'neutral',\n  minimax: 'magenta',\n  zai: 'teal',\n};\n\n/** Lab hues as a map, so lookups by any string never hit `Object.prototype`. */\nconst LAB_HUE = new Map(Object.entries(LAB_HUES));\n\n/** Other spellings of the labs' provider ids. */\nconst LAB_ALIASES = new Map([\n  ['x-ai', 'xai'],\n  ['z-ai', 'zai'],\n  ['meta-llama', 'meta'],\n  ['llama', 'meta'],\n  ['mistralai', 'mistral'],\n  ['gemini', 'google'],\n  ['alibaba', 'qwen'],\n  ['moonshot', 'moonshotai'],\n  ['jev', 'typesafe'],\n]);\n\n/** Model names, for rows a host served (OpenRouter, Groq, Bedrock) or rows without a provider. */\nconst MODEL_LABS: [RegExp, string][] = [\n  [/^claude/, 'anthropic'],\n  [/^(gpt|o[1345](-|$)|chatgpt|codex)/, 'openai'],\n  [/^(gemini|gemma)/, 'google'],\n  [/^jev/, 'typesafe'],\n  [/^deepseek/, 'deepseek'],\n  [/^grok/, 'xai'],\n  [/^llama/, 'meta'],\n  [/^(mistral|mixtral|codestral|magistral|devstral|ministral)/, 'mistral'],\n  [/^(qwen|qwq)/, 'qwen'],\n  [/^(nemotron|nvidia)/, 'nvidia'],\n  [/^minimax/, 'minimax'],\n  [/^glm/, 'zai'],\n  [/^kimi/, 'moonshotai'],\n];\n\n/** Providers that serve other labs' models (routers, inference hosts, clouds), so the model tells the lab. */\nconst HOSTS = new Set([\n  'openrouter',\n  'codex',\n  'mastra',\n  'netlify',\n  'vercel',\n  'groq',\n  'together',\n  'togetherai',\n  'fireworks',\n  'fireworks-ai',\n  'deepinfra',\n  'cerebras',\n  'sambanova',\n  'hyperbolic',\n  'novita',\n  'nebius',\n  'baseten',\n  'azure',\n  'bedrock',\n  'amazon-bedrock',\n  'google-vertex',\n  'vertex',\n]);\n\n/** Segments of a hosted model's resource path that aren't a lab. */\nconst PATH_WORDS = new Set(['models', 'accounts', 'projects', 'deployments']);\n\n/** Every lab id this file knows, with or without a hue. */\nconst KNOWN_LABS = new Set([...LAB_HUE.keys(), ...MODEL_LABS.map(([, lab]) => lab)]);\n\nconst cleanLab = (id: string) => {\n  const [v = id] = id.toLowerCase().split('.');\n  return LAB_ALIASES.get(v) ?? v;\n};\n\nconst isHost = (id: string) => HOSTS.has(cleanLab(id));\n\n/** The lab a model id names: its `lab/` prefix, a lab inside a dotted id, or its name. */\nfunction modelLab(model: string): string | undefined {\n  const parts = model.toLowerCase().split('/');\n  const name = parts.pop() ?? '';\n  // `lab/model`, unless the segment is a host or part of a resource path (`accounts/x/models/y`).\n  const prefix = parts.pop();\n  if (prefix && !isHost(prefix) && !PATH_WORDS.has(prefix)) return cleanLab(prefix);\n  // Dotted ids name the lab inside (`us.anthropic.claude-…`, `meta.llama3-…` on Bedrock).\n  const dotted = name\n    .split('.')\n    .map(cleanLab)\n    .find(seg => KNOWN_LABS.has(seg));\n  if (dotted) return dotted;\n  return MODEL_LABS.find(([re]) => re.test(name))?.[1];\n}\n\n/**\n * The lab behind a series: its provider, or for rows a host served the lab its model names.\n *\n * @example\n * seriesLab('anthropic.messages', 'claude-opus-5-5') // 'anthropic'\n * seriesLab('openrouter', 'meta-llama/llama-4-scout') // 'meta'\n * seriesLab('groq', 'llama-4-maverick') // 'meta'\n * seriesLab(undefined, 'gpt-5-mini') // 'openai'\n */\nexport function seriesLab(provider?: string, model?: string): string | undefined {\n  const lab = provider ? cleanLab(provider) : undefined;\n  if (lab && !HOSTS.has(lab)) return lab;\n  const fromModel = model ? modelLab(model) : undefined;\n  return fromModel ?? lab;\n}\n\n/**\n * Shades of a hue handed out more than once: a little lighter, then darker, then further, each\n * nudged warmer or cooler. Lightness moves a share of the room left (toward white when positive,\n * toward black when negative), so a light base like xAI's white never clips. The hue nudge stays\n * under half the gap between hues, so a shade never reads as the next lab's color. Ten in all, as\n * many as a chart names; past that they repeat. `[lightness share, hue in degrees, chroma factor]`.\n */\nexport const SHADES: [number, number, number][] = [\n  [0, 0, 1],\n  [0.3, 10, 0.85],\n  [-0.1, -10, 1],\n  [0.55, -10, 0.75],\n  [-0.2, 10, 1],\n  [0.75, 0, 0.6],\n  [-0.3, 0, 1],\n  [0.15, -12, 0.9],\n  [-0.05, 12, 1],\n  [0.42, 0, 0.8],\n];\n\n/** A shade's lightness from its base's: a share of the way to white, or to black. */\nexport const shadeLightness = (l: number, share: number) => (share > 0 ? l + (1 - l) * share : l * (1 + share));\n\n/** A hue's color, or its nth shade. */\nexport function seriesColor(hue: SeriesHue, shade = 0) {\n  const base = `var(--chart-series-${hue})`;\n  const [share = 0, dh = 0, c = 1] = SHADES[shade % SHADES.length] ?? [];\n  if (!share && !dh) return base;\n  const l = share > 0 ? `calc(l + (1 - l) * ${share})` : `calc(l * ${1 + share})`;\n  return `oklch(from ${base} ${l} calc(c * ${c}) calc(h + ${dh}))`;\n}\n\n/** The order hues go to series with no lab, each far from the one before. */\nconst FREE_ORDER: SeriesHue[] = [\n  'blue',\n  'orange',\n  'green',\n  'violet',\n  'amber',\n  'cyan',\n  'pink',\n  'lime',\n  'indigo',\n  'teal',\n  'magenta',\n];\n\nexport type SeriesColorItem = {\n  /** What the lookup is keyed by: a model name, a provider id, an API key id. */\n  key: string;\n  provider?: string;\n  model?: string;\n};\n\n/**\n * Colors for a page's series, keyed by `item.key`. Pass every series the page shows, ranked largest\n * first, once per page, so a model keeps its color on every chart.\n *\n * - Each lab's largest series takes the lab's hue; labs without one claim a free hue.\n * - The lab's next two series take shifted shades of it, in rank order; past those, a shared family\n *   is too hard to follow on a line chart, so the rest take hues of their own.\n * - When the page shows a single lab, a shared family tells nothing apart, so its other series all\n *   take hues of their own.\n * - Series with no lab take the hues no lab on the page uses, then shades once those run out.\n */\n/** How many of a lab's series share its color family before the rest take their own hue. */\nconst SHARED_PER_LAB = 3;\n\nexport function seriesColors(items: SeriesColorItem[]) {\n  const colors = new Map<string, string>();\n  // Shades handed out per hue.\n  const used = new Map<SeriesHue, number>();\n  const take = (key: string, hue: SeriesHue) => {\n    const shade = used.get(hue) ?? 0;\n    used.set(hue, shade + 1);\n    colors.set(key, seriesColor(hue, shade));\n  };\n  /** The next hue for a series or lab with none: unused first, then the least used. */\n  const nextFree = () => {\n    const unused = FREE_ORDER.find(h => !used.has(h));\n    if (unused) return unused;\n    const least = Math.min(...FREE_ORDER.map(h => used.get(h) ?? 0));\n    return FREE_ORDER.find(h => used.get(h) === least) ?? 'blue';\n  };\n\n  const labs = items.map(it => seriesLab(it.provider, it.model));\n  const labHue = new Map<string, SeriesHue>();\n  // Series handed out per lab, so a lab's first few share its family and the rest stand apart.\n  const perLab = new Map<string, number>();\n\n  // Labs with a hue reserve it first, so a lab's largest series always gets the pure color.\n  items.forEach((it, i) => {\n    const lab = labs[i];\n    const hue = lab ? LAB_HUE.get(lab) : undefined;\n    if (lab && hue && !labHue.has(lab)) {\n      labHue.set(lab, hue);\n      perLab.set(lab, 1);\n      take(it.key, hue);\n    }\n  });\n\n  // With one lab on the page a shared family adds nothing, so its models all take their own hue.\n  const singleLab = new Set(labs.filter(Boolean)).size === 1;\n\n  items.forEach((it, i) => {\n    if (colors.has(it.key)) return;\n    const lab = labs[i];\n    if (!lab) return take(it.key, nextFree());\n    const rank = perLab.get(lab) ?? 0;\n    perLab.set(lab, rank + 1);\n    const hue = labHue.get(lab);\n    if (!hue) {\n      // A lab without a preset hue claims a free one for its family.\n      const claimed = nextFree();\n      labHue.set(lab, claimed);\n      return take(it.key, claimed);\n    }\n    if (!singleLab && rank < SHARED_PER_LAB) return take(it.key, hue);\n    take(it.key, nextFree());\n  });\n  return colors;\n}\n"],"mappings":"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"}

package/dist/domains/metrics/lib.cjs.js

@@ -1,15 +1,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_chart_format = require("./lib/chart-format.cjs.js");
-const require_domains_metrics_lib_bucket_labels = require("./lib/bucket-labels.cjs.js");
-const require_domains_metrics_lib_time_window = require("./lib/time-window.cjs.js");
 const require_domains_metrics_lib_chart_axis = require("./lib/chart-axis.cjs.js");
 const require_domains_metrics_lib_chart_colors = require("./lib/chart-colors.cjs.js");
+const require_domains_metrics_lib_chart_format = require("./lib/chart-format.cjs.js");
+const require_domains_metrics_lib_bucket_labels = require("./lib/bucket-labels.cjs.js");
 const require_domains_metrics_lib_breakdown = require("./lib/breakdown.cjs.js");
+const require_domains_metrics_lib_time_window = require("./lib/time-window.cjs.js");
+const require_domains_metrics_lib_series_colors = require("./lib/series-colors.cjs.js");
 exports.BREAKDOWN_GROUP_LIMIT = require_domains_metrics_lib_breakdown.BREAKDOWN_GROUP_LIMIT;
 exports.BREAKDOWN_SPAN_TYPES = require_domains_metrics_lib_breakdown.BREAKDOWN_SPAN_TYPES;
 exports.BUCKET_AXIS = require_domains_metrics_lib_chart_axis.BUCKET_AXIS;
 exports.CHART_COLORS = require_domains_metrics_lib_chart_colors.CHART_COLORS;
 exports.EDGE_BUCKET_AXIS = require_domains_metrics_lib_chart_axis.EDGE_BUCKET_AXIS;
+exports.LAB_HUES = require_domains_metrics_lib_series_colors.LAB_HUES;
+exports.SERIES_HUES = require_domains_metrics_lib_series_colors.SERIES_HUES;
 exports.breakdownGroupBy = require_domains_metrics_lib_breakdown.breakdownGroupBy;
 exports.bucketLabels = require_domains_metrics_lib_bucket_labels.bucketLabels;
 exports.buildBreakdownRows = require_domains_metrics_lib_breakdown.buildBreakdownRows;
@@ -29,5 +32,8 @@ exports.previousFigures = require_domains_metrics_lib_breakdown.previousFigures;
 exports.previousWindow = require_domains_metrics_lib_time_window.previousWindow;
 exports.projectsAggregateRequest = require_domains_metrics_lib_breakdown.projectsAggregateRequest;
 exports.rowChange = require_domains_metrics_lib_breakdown.rowChange;
+exports.seriesColor = require_domains_metrics_lib_series_colors.seriesColor;
+exports.seriesColors = require_domains_metrics_lib_series_colors.seriesColors;
+exports.seriesLab = require_domains_metrics_lib_series_colors.seriesLab;
 exports.threadsAggregateRequest = require_domains_metrics_lib_breakdown.threadsAggregateRequest;
 exports.windowLength = require_domains_metrics_lib_time_window.windowLength;

package/dist/domains/metrics/lib.es.js

@@ -1,7 +1,8 @@
-import { formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatPercent, formatUsd, percentChange } from "./lib/chart-format.es.js";
-import { bucketLabels, isMultiDay } from "./lib/bucket-labels.es.js";
-import { previousWindow, windowLength } from "./lib/time-window.es.js";
 import { BUCKET_AXIS, EDGE_BUCKET_AXIS } from "./lib/chart-axis.es.js";
 import { CHART_COLORS } from "./lib/chart-colors.es.js";
+import { formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatPercent, formatUsd, percentChange } from "./lib/chart-format.es.js";
+import { bucketLabels, isMultiDay } from "./lib/bucket-labels.es.js";
 import { BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, breakdownGroupBy, buildBreakdownRows, changeTrend, entitiesAggregateRequest, environmentsAggregateRequest, previousFigures, projectsAggregateRequest, rowChange, threadsAggregateRequest } from "./lib/breakdown.es.js";
-export { BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, BUCKET_AXIS, CHART_COLORS, EDGE_BUCKET_AXIS, breakdownGroupBy, bucketLabels, buildBreakdownRows, changeTrend, entitiesAggregateRequest, environmentsAggregateRequest, formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatPercent, formatUsd, isMultiDay, percentChange, previousFigures, previousWindow, projectsAggregateRequest, rowChange, threadsAggregateRequest, windowLength };
+import { previousWindow, windowLength } from "./lib/time-window.es.js";
+import { LAB_HUES, SERIES_HUES, seriesColor, seriesColors, seriesLab } from "./lib/series-colors.es.js";
+export { BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, BUCKET_AXIS, CHART_COLORS, EDGE_BUCKET_AXIS, LAB_HUES, SERIES_HUES, breakdownGroupBy, bucketLabels, buildBreakdownRows, changeTrend, entitiesAggregateRequest, environmentsAggregateRequest, formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatPercent, formatUsd, isMultiDay, percentChange, previousFigures, previousWindow, projectsAggregateRequest, rowChange, seriesColor, seriesColors, seriesLab, threadsAggregateRequest, windowLength };

package/dist/domains/metrics.cjs.js

@@ -7,6 +7,7 @@ const require_domains_metrics_lib_chart_format = require("./metrics/lib/chart-fo
 const require_domains_metrics_hooks_use_metrics_filters = require("./metrics/hooks/use-metrics-filters.cjs.js");
 const require_domains_metrics_lib_bucket_labels = require("./metrics/lib/bucket-labels.cjs.js");
 const require_domains_metrics_lib_time_window = require("./metrics/lib/time-window.cjs.js");
+const require_domains_metrics_components_card_action_buttons = require("./metrics/components/card-action-buttons.cjs.js");
 const require_domains_metrics_components_chart_area = require("./metrics/components/chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./metrics/components/chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./metrics/components/chart-card-error.cjs.js");
@@ -14,7 +15,6 @@ const require_domains_metrics_lib_chart_axis = require("./metrics/lib/chart-axis
 const require_domains_metrics_lib_chart_colors = require("./metrics/lib/chart-colors.cjs.js");
 const require_domains_metrics_lib_breakdown = require("./metrics/lib/breakdown.cjs.js");
 const require_domains_metrics_hooks_use_metrics_scope = require("./metrics/hooks/use-metrics-scope.cjs.js");
-const require_domains_metrics_components_card_action_buttons = require("./metrics/components/card-action-buttons.cjs.js");
 const require_domains_metrics_hooks_use_metrics_activity = require("./metrics/hooks/use-metrics-activity.cjs.js");
 const require_domains_metrics_components_failure_rate_card = require("./metrics/components/failure-rate-card.cjs.js");
 const require_domains_metrics_components_agent_runs_card = require("./metrics/components/agent-runs-card.cjs.js");
@@ -36,6 +36,7 @@ require("./metrics/components.cjs.js");
 const require_domains_metrics_drilldown = require("./metrics/drilldown.cjs.js");
 const require_domains_metrics_hooks_use_metrics_layout = require("./metrics/hooks/use-metrics-layout.cjs.js");
 require("./metrics/hooks.cjs.js");
+const require_domains_metrics_lib_series_colors = require("./metrics/lib/series-colors.cjs.js");
 require("./metrics/lib.cjs.js");
 let _mastra_react_hooks_metrics = require("@mastra/react/hooks/metrics");
 exports.AgentRunsCard = require_domains_metrics_components_agent_runs_card.AgentRunsCard;
@@ -54,6 +55,7 @@ exports.DistinctIdsCard = require_domains_metrics_components_distinct_ids_card.D
 exports.EDGE_BUCKET_AXIS = require_domains_metrics_lib_chart_axis.EDGE_BUCKET_AXIS;
 exports.FailureRateCard = require_domains_metrics_components_failure_rate_card.FailureRateCard;
 exports.KpiCard = require_domains_metrics_components_kpi_card.KpiCard;
+exports.LAB_HUES = require_domains_metrics_lib_series_colors.LAB_HUES;
 exports.LatencyCard = require_domains_metrics_components_latency_card.LatencyCard;
 exports.METRICS_FILTER_BAR_OPERATORS = require_domains_metrics_metrics_filters.METRICS_FILTER_BAR_OPERATORS;
 exports.MetricsGrid = require_domains_metrics_components_metrics_grid_metrics_grid.MetricsGrid;
@@ -64,6 +66,7 @@ exports.OpenInLogsButton = require_domains_metrics_components_card_action_button
 exports.OpenInSpansButton = require_domains_metrics_components_card_action_buttons.OpenInSpansButton;
 exports.OpenInThreadsButton = require_domains_metrics_components_card_action_buttons.OpenInThreadsButton;
 exports.OpenInTracesButton = require_domains_metrics_components_card_action_buttons.OpenInTracesButton;
+exports.SERIES_HUES = require_domains_metrics_lib_series_colors.SERIES_HUES;
 exports.ScoresCard = require_domains_metrics_components_scores_card.ScoresCard;
 exports.TokenUsageCard = require_domains_metrics_components_token_usage_card.TokenUsageCard;
 exports.TraceVolumeCard = require_domains_metrics_components_trace_volume_card.TraceVolumeCard;
@@ -114,6 +117,9 @@ exports.previousWindow = require_domains_metrics_lib_time_window.previousWindow;
 exports.projectsAggregateRequest = require_domains_metrics_lib_breakdown.projectsAggregateRequest;
 exports.rowChange = require_domains_metrics_lib_breakdown.rowChange;
 exports.saveMetricsFiltersToStorage = require_domains_metrics_metrics_filters.saveMetricsFiltersToStorage;
+exports.seriesColor = require_domains_metrics_lib_series_colors.seriesColor;
+exports.seriesColors = require_domains_metrics_lib_series_colors.seriesColors;
+exports.seriesLab = require_domains_metrics_lib_series_colors.seriesLab;
 exports.threadsAggregateRequest = require_domains_metrics_lib_breakdown.threadsAggregateRequest;
 Object.defineProperty(exports, "useActiveResourcesKpiMetrics", {
 	enumerable: true,

package/dist/domains/metrics.es.js

@@ -6,6 +6,7 @@ import { formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, format
 import { useMetricsFilters } from "./metrics/hooks/use-metrics-filters.es.js";
 import { bucketLabels, isMultiDay } from "./metrics/lib/bucket-labels.es.js";
 import { previousWindow, windowLength } from "./metrics/lib/time-window.es.js";
+import { OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton } from "./metrics/components/card-action-buttons.es.js";
 import { ChartArea } from "./metrics/components/chart-area.es.js";
 import { ChartCard } from "./metrics/components/chart-card.es.js";
 import { ChartCardError } from "./metrics/components/chart-card-error.es.js";
@@ -13,7 +14,6 @@ import { BUCKET_AXIS, EDGE_BUCKET_AXIS } from "./metrics/lib/chart-axis.es.js";
 import { CHART_COLORS } from "./metrics/lib/chart-colors.es.js";
 import { BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, breakdownGroupBy, buildBreakdownRows, changeTrend, entitiesAggregateRequest, environmentsAggregateRequest, previousFigures, projectsAggregateRequest, rowChange, threadsAggregateRequest } from "./metrics/lib/breakdown.es.js";
 import { useMetricsScope } from "./metrics/hooks/use-metrics-scope.es.js";
-import { OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton } from "./metrics/components/card-action-buttons.es.js";
 import { useMetricsActivity } from "./metrics/hooks/use-metrics-activity.es.js";
 import { FailureRateCard } from "./metrics/components/failure-rate-card.es.js";
 import { AgentRunsCard } from "./metrics/components/agent-runs-card.es.js";
@@ -35,5 +35,6 @@ import "./metrics/components.es.js";
 import { buildLogsDrilldownUrl, buildTracesDrilldownUrl } from "./metrics/drilldown.es.js";
 import { useMetricsLayout } from "./metrics/hooks/use-metrics-layout.es.js";
 import { chooseMetricsInterval, formatMetricsBucketLabel, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useLatencyMetrics, useModelCostKpiMetrics, useModelUsageCostMetrics, useScoresMetrics, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceVolumeMetrics } from "./metrics/hooks.es.js";
+import { LAB_HUES, SERIES_HUES, seriesColor, seriesColors, seriesLab } from "./metrics/lib/series-colors.es.js";
 import "./metrics/lib.es.js";
-export { AgentRunsCard, AggregateLimiterProvider, BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, BUCKET_AXIS, BreakdownCard, CHART_COLORS, ChartArea, ChartCard, ChartCardError, DATE_PRESETS, DateRangeSelector, DistinctIdsCard, EDGE_BUCKET_AXIS, FailureRateCard, KpiCard, LatencyCard, METRICS_FILTER_BAR_OPERATORS, MetricsGrid, MetricsProvider, MetricsTimeRangeChip, OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton, ScoresCard, TokenUsageCard, TraceVolumeCard, USAGE_METRICS, UsageCard, applyMetricsPropertyFilterTokens, breakdownGroupBy, bucketLabels, buildBreakdownRows, buildLogsDrilldownUrl, buildMetricsDimensionalFilter, buildTracesDrilldownUrl, changeTrend, chooseMetricsInterval, clearSavedMetricsFilters, createMetricsFilterBarFields, createMetricsPropertyFilterFields, entitiesAggregateRequest, environmentsAggregateRequest, filterBarItemsToMetricsTokens, formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatMetricsBucketLabel, formatPercent, formatUsd, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, isMultiDay, isValidPreset, loadMetricsFiltersFromStorage, metricsTokensToFilterBarItems, percentChange, previousFigures, previousWindow, projectsAggregateRequest, rowChange, saveMetricsFiltersToStorage, threadsAggregateRequest, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useLatencyMetrics, useMetrics, useMetricsActivity, useMetricsFilters, useMetricsLatency, useMetricsLayout, useMetricsScope, useMetricsScores, useMetricsUsageTotals, useModelCostKpiMetrics, useModelUsageCostMetrics, useScoresMetrics, useTokenSpend, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceVolumeMetrics, windowLength };
+export { AgentRunsCard, AggregateLimiterProvider, BREAKDOWN_GROUP_LIMIT, BREAKDOWN_SPAN_TYPES, BUCKET_AXIS, BreakdownCard, CHART_COLORS, ChartArea, ChartCard, ChartCardError, DATE_PRESETS, DateRangeSelector, DistinctIdsCard, EDGE_BUCKET_AXIS, FailureRateCard, KpiCard, LAB_HUES, LatencyCard, METRICS_FILTER_BAR_OPERATORS, MetricsGrid, MetricsProvider, MetricsTimeRangeChip, OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton, SERIES_HUES, ScoresCard, TokenUsageCard, TraceVolumeCard, USAGE_METRICS, UsageCard, applyMetricsPropertyFilterTokens, breakdownGroupBy, bucketLabels, buildBreakdownRows, buildLogsDrilldownUrl, buildMetricsDimensionalFilter, buildTracesDrilldownUrl, changeTrend, chooseMetricsInterval, clearSavedMetricsFilters, createMetricsFilterBarFields, createMetricsPropertyFilterFields, entitiesAggregateRequest, environmentsAggregateRequest, filterBarItemsToMetricsTokens, formatAxisCount, formatAxisDuration, formatAxisUsd, formatCount, formatDuration, formatMetricsBucketLabel, formatPercent, formatUsd, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, isMultiDay, isValidPreset, loadMetricsFiltersFromStorage, metricsTokensToFilterBarItems, percentChange, previousFigures, previousWindow, projectsAggregateRequest, rowChange, saveMetricsFiltersToStorage, seriesColor, seriesColors, seriesLab, threadsAggregateRequest, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useLatencyMetrics, useMetrics, useMetricsActivity, useMetricsFilters, useMetricsLatency, useMetricsLayout, useMetricsScope, useMetricsScores, useMetricsUsageTotals, useModelCostKpiMetrics, useModelUsageCostMetrics, useScoresMetrics, useTokenSpend, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceVolumeMetrics, windowLength };

package/dist/domains/observability/components/observability-capability-gate.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_EmptyState = require("../../../EmptyState-DxDHlYqD.cjs");
-const require_spinner = require("../../../spinner-C8ZxiA5C.cjs");
+const require_EmptyState = require("../../../EmptyState-Dc-sP95H.cjs");
+const require_spinner = require("../../../spinner-oS6q4pwx.cjs");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/observability/components/observability-capability-gate.tsx
 /** Renders its children once the store declares the capability they need. */

package/dist/domains/observability/components/observability-capability-gate.es.js

@@ -1,6 +1,6 @@
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { n as EmptyState } from "../../../EmptyState-P-Gy898T.js";
-import { t as Spinner } from "../../../spinner-CnLgLj9R.js";
+import { n as EmptyState } from "../../../EmptyState-i88y1x75.js";
+import { t as Spinner } from "../../../spinner-B9ykw74u.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/domains/observability/components/observability-capability-gate.tsx
 /** Renders its children once the store declares the capability they need. */

package/dist/domains/observability/components/observability-histogram.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_domains_metrics_lib_chart_format = require("../../metrics/lib/chart-format.cjs.js");
 const require_domains_metrics_lib_chart_axis = require("../../metrics/lib/chart-axis.cjs.js");
 const require_domains_metrics_lib_chart_colors = require("../../metrics/lib/chart-colors.cjs.js");
-const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-CDLE76IB.cjs");
+const require_domains_metrics_lib_chart_format = require("../../metrics/lib/chart-format.cjs.js");
+const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-CJQF99sc.cjs");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
+const require_utils = require("../../../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/observability/components/observability-histogram.tsx
@@ -45,7 +45,7 @@ function ObservabilityHistogram({ label, resourceLabel, buckets, isLoading = fal
 				require_domains_metrics_lib_chart_format.formatCount(ok + errors),
 				" ",
 				resourceLabel.toLowerCase(),
-				" · ",
+				", ",
 				require_domains_metrics_lib_chart_format.formatCount(errors),
 				" errors"
 			]

package/dist/domains/observability/components/observability-histogram.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"observability-histogram.cjs.js","names":["CHART_COLORS","useMemo","formatCount","Txt","cn","MetricsStackedBarChart","BUCKET_AXIS"],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars, or clicking one, reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()} · {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            onBucketClick={onZoom ? (_row, index) => onZoom({ start: index, end: index }) : undefined}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAOA,yCAAAA,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,UAAA,GAASC,MAAAA,QAAAA,OACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACGC,yCAAAA,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAIA,yCAAAA,YAAY,MAAM;IAAE;GAC5E;EAEP,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAWC,cAAAA,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgBH,yCAAAA;IACL;IACH;IACR,eAAe,UAAU,MAAM,UAAU,OAAO;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC,IAAI,KAAA;IAChF,GAAII,uCAAAA;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}
+{"version":3,"file":"observability-histogram.cjs.js","names":["CHART_COLORS","useMemo","formatCount","Txt","cn","MetricsStackedBarChart","BUCKET_AXIS"],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars, or clicking one, reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()}, {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            onBucketClick={onZoom ? (_row, index) => onZoom({ start: index, end: index }) : undefined}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAOA,yCAAAA,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,UAAA,GAASC,MAAAA,QAAAA,OACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACGC,yCAAAA,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAGA,yCAAAA,YAAY,MAAM;IAAE;GAC3E;EAEP,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAWC,cAAAA,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgBH,yCAAAA;IACL;IACH;IACR,eAAe,UAAU,MAAM,UAAU,OAAO;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC,IAAI,KAAA;IAChF,GAAII,uCAAAA;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}

package/dist/domains/observability/components/observability-histogram.es.js

@@ -1,9 +1,9 @@
-import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { formatCount } from "../../metrics/lib/chart-format.es.js";
 import { BUCKET_AXIS } from "../../metrics/lib/chart-axis.es.js";
 import { CHART_COLORS } from "../../metrics/lib/chart-colors.es.js";
-import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-D2QyS4-z.js";
+import { formatCount } from "../../metrics/lib/chart-format.es.js";
+import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-Bmk0OjYp.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
+import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/observability/components/observability-histogram.tsx
@@ -44,7 +44,7 @@ function ObservabilityHistogram({ label, resourceLabel, buckets, isLoading = fal
 				formatCount(ok + errors),
 				" ",
 				resourceLabel.toLowerCase(),
-				" · ",
+				", ",
 				formatCount(errors),
 				" errors"
 			]

package/dist/domains/observability/components/observability-histogram.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"observability-histogram.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars, or clicking one, reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()} · {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            onBucketClick={onZoom ? (_row, index) => onZoom({ start: index, end: index }) : undefined}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAO,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,SAAS,cACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,qBAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACG,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAI,YAAY,MAAM;IAAE;GAC5E;EAEP,CAAA,GAAA,UACC,oBAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,oBAAC,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,oBAAC,OAAD;GAAK,WAAW,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,oBAAC,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgB;IACL;IACH;IACR,eAAe,UAAU,MAAM,UAAU,OAAO;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC,IAAI,KAAA;IAChF,GAAI;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}
+{"version":3,"file":"observability-histogram.es.js","names":[],"sources":["../../../../src/domains/observability/components/observability-histogram.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { HistogramBucket } from '../lib/histogram-buckets';\nimport { BUCKET_AXIS } from '@/domains/metrics/lib/chart-axis';\nimport { CHART_COLORS } from '@/domains/metrics/lib/chart-colors';\nimport { formatCount } from '@/domains/metrics/lib/chart-format';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\nimport { Txt } from '@/ds/components/Txt';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { cn } from '@/lib/utils';\n\n/** A thin strip: about 34px of bars above the time axis, so the list keeps its vertical space. */\nconst CHART_HEIGHT = 64;\n/** A neutral surface tint, so the volume stays in the background and only errors carry color. */\nconst VOLUME_COLOR = 'var(--fill-strong)';\n/** Up to 90 bars share the width; the cap only matters for short custom windows with few bars. */\nconst MAX_BAR_SIZE = 40;\nconst ERRORS_SERIES = { dataKey: 'errors', label: 'Errors', color: CHART_COLORS.error };\n\nexport type ObservabilityHistogramProps = {\n  /** Accessible name of the chart region, e.g. \"Traces over time\". */\n  label: string;\n  /** Series and total label for non-error rows, e.g. \"Traces\". */\n  resourceLabel: string;\n  buckets: HistogramBucket[];\n  isLoading?: boolean;\n  isError?: boolean;\n  /** Previous buckets stay on screen, dimmed, while a new selection loads. */\n  isUpdating?: boolean;\n  /** Dragging across bars, or clicking one, reports the first and last selected bar; turn it into a window with `zoomWindow`. */\n  onZoom?: (range: DragSelectionRange) => void;\n};\n\n/**\n * A compact, full-width stacked bar strip of non-error and error counts over the list's time\n * range. Per-bucket values live in the tooltip; the totals are announced to assistive tech only.\n */\nexport function ObservabilityHistogram({\n  label,\n  resourceLabel,\n  buckets,\n  isLoading = false,\n  isError = false,\n  isUpdating = false,\n  onZoom,\n}: ObservabilityHistogramProps) {\n  const series = useMemo(\n    () => [{ dataKey: 'ok', label: resourceLabel, color: VOLUME_COLOR }, ERRORS_SERIES],\n    [resourceLabel],\n  );\n  let ok = 0;\n  let errors = 0;\n  for (const bucket of buckets) {\n    ok += bucket.ok;\n    errors += bucket.errors;\n  }\n\n  return (\n    <section aria-label={label} aria-busy={isLoading || isUpdating} className=\"shrink-0\">\n      {!isError && !isLoading && (\n        <span className=\"sr-only\">\n          {formatCount(ok + errors)} {resourceLabel.toLowerCase()}, {formatCount(errors)} errors\n        </span>\n      )}\n      {isError ? (\n        <div className=\"flex items-center justify-center\" style={{ height: CHART_HEIGHT }}>\n          <Txt variant=\"caption\" tone=\"muted\">\n            Couldn't load the chart.\n          </Txt>\n        </div>\n      ) : (\n        <div className={cn('transition-opacity duration-200', isUpdating && 'opacity-50')}>\n          <MetricsStackedBarChart\n            data={buckets}\n            series={series}\n            height={CHART_HEIGHT}\n            showYAxis={false}\n            showLegend={false}\n            maxBarSize={MAX_BAR_SIZE}\n            valueFormatter={formatCount}\n            isLoading={isLoading}\n            onZoom={onZoom}\n            onBucketClick={onZoom ? (_row, index) => onZoom({ start: index, end: index }) : undefined}\n            {...BUCKET_AXIS}\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,eAAe;;AAErB,IAAM,eAAe;;AAErB,IAAM,eAAe;AACrB,IAAM,gBAAgB;CAAE,SAAS;CAAU,OAAO;CAAU,OAAO,aAAa;AAAM;;;;;AAoBtF,SAAgB,uBAAuB,EACrC,OACA,eACA,SACA,YAAY,OACZ,UAAU,OACV,aAAa,OACb,UAC8B;CAC9B,MAAM,SAAS,cACP,CAAC;EAAE,SAAS;EAAM,OAAO;EAAe,OAAO;CAAa,GAAG,aAAa,GAClF,CAAC,aAAa,CAChB;CACA,IAAI,KAAK;CACT,IAAI,SAAS;CACb,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,OAAO;EACb,UAAU,OAAO;CACnB;CAEA,OACE,qBAAC,WAAD;EAAS,cAAY;EAAO,aAAW,aAAa;EAAY,WAAU;EAA1E,UAAA,CACG,CAAC,WAAW,CAAC,aACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACG,YAAY,KAAK,MAAM;IAAE;IAAE,cAAc,YAAY;IAAE;IAAG,YAAY,MAAM;IAAE;GAC3E;EAEP,CAAA,GAAA,UACC,oBAAC,OAAD;GAAK,WAAU;GAAmC,OAAO,EAAE,QAAQ,aAAa;GAC9E,UAAA,oBAAC,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,UAAA;GAE/B,CAAA;EACF,CAAA,IAEL,oBAAC,OAAD;GAAK,WAAW,GAAG,mCAAmC,cAAc,YAAY;GAC9E,UAAA,oBAAC,wBAAD;IACE,MAAM;IACE;IACR,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,gBAAgB;IACL;IACH;IACR,eAAe,UAAU,MAAM,UAAU,OAAO;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC,IAAI,KAAA;IAChF,GAAI;GACL,CAAA;EACE,CAAA,CAEA;;AAEb"}

package/dist/domains/observability/components/observability-page-layout.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_observability_hooks_use_observability_views = require("../hooks/use-observability-views.cjs.js");
 const require_domains_observability_saved_views_saved_views_source = require("../saved-views/saved-views-source.cjs.js");
 const require_domains_observability_components_observability_header_slot = require("./observability-header-slot.cjs.js");
-const require_domains_observability_hooks_use_observability_views = require("../hooks/use-observability-views.cjs.js");
 const require_domains_traces_components_traces_spans_switch = require("../../traces/components/traces-spans-switch.cjs.js");
-const require_PageLayout = require("../../../PageLayout-DFRzcnkf.cjs");
+const require_PageLayout = require("../../../PageLayout-C0Fo3ZQC.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/observability/components/observability-page-layout.tsx

package/dist/domains/observability/components/observability-page-layout.es.js

@@ -1,8 +1,8 @@
+import { useObservabilityViews } from "../hooks/use-observability-views.es.js";
 import { useSavedViewsSource } from "../saved-views/saved-views-source.es.js";
 import { ObservabilityHeaderSlotContext } from "./observability-header-slot.es.js";
-import { useObservabilityViews } from "../hooks/use-observability-views.es.js";
 import { TracesSpansSwitch, TracesSpansSwitchSkeleton } from "../../traces/components/traces-spans-switch.es.js";
-import { t as PageLayout } from "../../../PageLayout-CyM_Op3c.js";
+import { t as PageLayout } from "../../../PageLayout-DLll7ZwB.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/domains/observability/components/observability-page-layout.tsx

package/dist/domains/observability/hooks/use-observability-list-filters.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_trace_filters = require("../../../trace-filters-a0N9bf52.cjs");
-const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("../../traces/components/traces-explorer/traces-explorer-actions.cjs.js");
+const require_domains_observability_lib_zoom_memory = require("../lib/zoom-memory.cjs.js");
 const require_domains_observability_observability_list_url_state = require("../observability-list-url-state.cjs.js");
 const require_domains_observability_list_polling = require("../list-polling.cjs.js");
-const require_domains_observability_lib_zoom_memory = require("../lib/zoom-memory.cjs.js");
+const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("../../traces/components/traces-explorer/traces-explorer-actions.cjs.js");
+const require_trace_filters = require("../../../trace-filters-a0N9bf52.cjs");
 let react = require("react");
 // src/domains/observability/hooks/use-observability-list-filters.ts
 /**

package/dist/domains/observability/hooks/use-observability-list-filters.es.js

@@ -1,8 +1,8 @@
-import { ft as resolveTraceQueryTimeRange } from "../../../trace-filters-CaWkw779.js";
-import { resolveTracesDateWindow } from "../../traces/components/traces-explorer/traces-explorer-actions.es.js";
+import { rangeBeforeZoom, rememberZoom } from "../lib/zoom-memory.es.js";
 import { OBSERVABILITY_LIST_DEFAULT_DATE_PRESET, OBSERVABILITY_LIST_SORT_FIELDS, readObservabilityListDates, readObservabilityListFilters, readObservabilityListSort, writeObservabilityListDates, writeObservabilityListFilters, writeObservabilityListSort } from "../observability-list-url-state.es.js";
 import { recoveryRefetchInterval } from "../list-polling.es.js";
-import { rangeBeforeZoom, rememberZoom } from "../lib/zoom-memory.es.js";
+import { resolveTracesDateWindow } from "../../traces/components/traces-explorer/traces-explorer-actions.es.js";
+import { ft as resolveTraceQueryTimeRange } from "../../../trace-filters-CaWkw779.js";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 // src/domains/observability/hooks/use-observability-list-filters.ts
 /**

package/dist/domains/observability/observability-list-url-state.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_trace_filters = require("../../trace-filters-a0N9bf52.cjs");
 const require_domains_traces_components_traces_explorer_traces_explorer_actions = require("../traces/components/traces-explorer/traces-explorer-actions.cjs.js");
+const require_trace_filters = require("../../trace-filters-a0N9bf52.cjs");
 const require_sort_use_url_sort = require("../../sort/use-url-sort.cjs.js");
 // src/domains/observability/observability-list-url-state.ts
 /**