@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/domains/metrics/components/kpi-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.es.js","names":["_Fragment"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: string;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAwBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,eAAe,OAAhB;EAAsB,MAAM,oBAAC,MAAD,CAAO,CAAA;EAAI,UAAA;CAA4B,CAAA,GAClE,UAAU,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC,EAAA,CAAA;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,oBAAC,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,oBAAC,eAAe,QAAhB,EAAuB,QAAQ,oBAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,qBAAC,eAAe,UAAhB;EAAyB,WAAW,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,oBAAC,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,oBAAC,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,oBAAC,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"kpi-card.es.js","names":["_Fragment"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: string;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard busy={!isError && (reading.isLoading || reading.isUpdating)}>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAwBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,qBAAC,gBAAD;EAAgB,MAAM,CAAC,YAAY,QAAQ,aAAa,QAAQ;EAAhE,UAAA,CACE,oBAAC,eAAe,OAAhB;GAAsB,MAAM,oBAAC,MAAD,CAAO,CAAA;GAAI,UAAA;EAA4B,CAAA,GAClE,UAAU,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC;;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,oBAAC,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,oBAAC,eAAe,QAAhB,EAAuB,QAAQ,oBAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,qBAAC,eAAe,UAAhB;EAAyB,WAAW,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,oBAAC,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,oBAAC,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,oBAAC,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/domains/metrics/components/latency-card.cjs.js

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
-const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.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_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-2m4LVL1N.cjs");
+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_MetricsLineChart = require("../../../MetricsLineChart-CjBm4IXu.cjs");
 const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_domains_metrics_hooks_use_metrics_latency = require("../hooks/use-metrics-latency.cjs.js");
 let react = require("react");
@@ -38,6 +38,25 @@ var SERIES = [
 		color: require_domains_metrics_lib_chart_colors.CHART_COLORS.violet
 	}
 ];
+var TITLE = {
+	agents: "Agent latency",
+	workflows: "Workflow latency",
+	tools: "Tool latency"
+};
+var VIEWS = [
+	{
+		value: "agents",
+		label: TITLE.agents
+	},
+	{
+		value: "workflows",
+		label: TITLE.workflows
+	},
+	{
+		value: "tools",
+		label: TITLE.tools
+	}
+];
 var EMPTY_NOUN = {
 	agents: "agent runs",
 	workflows: "workflow runs",
@@ -50,27 +69,14 @@ function LatencyCard({ onViewTraces, onTimeRangeClick }) {
 	const step = require_domains_metrics_lib_metrics_buckets.intervalHours(require_domains_metrics_lib_metrics_buckets.bucketPlan(timestamp.start, timestamp.end).interval);
 	const peak = Math.max(0, ...data.map((b) => b.p95 ?? 0));
 	const layout = {
-		title: "Latency",
-		description: "Duration percentiles.",
-		actions: onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: () => onViewTraces(ROOT_ENTITY[entity]) }),
-		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.Toolbar, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, { series: SERIES }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.Tabs, {
+		title: TITLE[entity],
+		titleMenu: {
 			value: entity,
 			onValueChange: setEntity,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-					value: "agents",
-					children: "Agents"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-					value: "workflows",
-					children: "Workflows"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-					value: "tools",
-					children: "Tools"
-				})
-			]
-		})] })
+			options: VIEWS
+		},
+		actions: onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: () => onViewTraces(ROOT_ENTITY[entity]) }),
+		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, { series: SERIES }) })
 	};
 	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
@@ -78,11 +84,8 @@ function LatencyCard({ onViewTraces, onTimeRangeClick }) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Summary, {
-			value: peak > 0 ? require_domains_metrics_lib_chart_format.formatDuration(peak) : "—",
-			label: "peak P95",
-			isLoading
-		}),
+		total: peak > 0 ? require_domains_metrics_lib_chart_format.formatDuration(peak) : "—",
+		isLoading,
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_area.ChartArea, {
 			isEmpty: !isLoading && peak === 0,

package/dist/domains/metrics/components/latency-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"latency-card.cjs.js","names":["EntityType","CHART_COLORS","useState","useMetricsLatency","useMetricsFilters","intervalHours","bucketPlan","OpenInTracesButton","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatDuration","ChartArea","MetricsLineChart","formatAxisDuration","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nconst SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'p50', label: 'P50', color: CHART_COLORS.sky },\n  { dataKey: 'p95', label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  { dataKey: 'p99', label: 'P99', color: CHART_COLORS.violet },\n];\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50, P95 and P99 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency(entity);\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const peak = Math.max(0, ...data.map(b => b.p95 ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAM,cAAiD;CACrD,QAAQA,2BAAAA,WAAW;CACnB,WAAWA,2BAAAA,WAAW;CACtB,OAAOA,2BAAAA,WAAW;AACpB;AAEA,IAAM,SAAmC;CACvC;EAAE,SAAS;EAAO,OAAO;EAAO,OAAOC,yCAAAA,aAAa;CAAI;CACxD;EAAE,SAAS;EAAO,OAAO;EAAO,OAAOA,yCAAAA,aAAa;EAAO,UAAU;CAAK;CAC1E;EAAE,SAAS;EAAO,OAAO;EAAO,OAAOA,yCAAAA,aAAa;CAAO;AAC7D;AAEA,IAAM,aAA4C;CAChD,QAAQ;CACR,WAAW;CACX,OAAO;AACT;AAUA,SAAgB,YAAY,EAAE,cAAc,oBAAsC;CAChF,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAwB,QAAQ;CAC5D,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsBC,kDAAAA,kBAAkB,MAAM;CACrF,MAAM,EAAE,cAAcC,kDAAAA,kBAAkB;CAExC,MAAM,OAAOC,4CAAAA,cAAcC,4CAAAA,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC,CAAC,QAAQ;CAC9E,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,KAAK,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC;CAErD,MAAM,SAAS;EACb,OAAO;EACP,aAAa;EACb,SAAS,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD,EAAoB,eAAe,aAAa,YAAY,OAAO,EAAI,CAAA;EAChG,SACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,SAAb,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD,EAAwB,QAAQ,OAAS,CAAA,GACzC,iBAAA,GAAA,kBAAA,KAAA,CAACD,oBAAAA,YAAY,MAAb;GAAiC,OAAO;GAAQ,eAAe;GAA/D,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,KAAb;KAAiB,OAAM;KAAS,UAAA;IAAuB,CAAA;IACvD,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,KAAb;KAAiB,OAAM;KAAY,UAAA;IAA0B,CAAA;IAC7D,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,KAAb;KAAiB,OAAM;KAAQ,UAAA;IAAsB,CAAA;GACrC;EACC,CAAA,CAAA,EAAA,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,8CAAAA,WAAD;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oDAAAA,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,8CAAAA,WAAD;EACE,GAAI;EACJ,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,oBAAAA,YAAY,SAAb;GAAqB,OAAO,OAAO,IAAII,yCAAAA,eAAe,IAAI,IAAI;GAAK,OAAM;GAAsB;EAAY,CAAA;EAE7G,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAc,MAAM,WAAW,QAAQ;GACnF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgBF,yCAAAA;IAChB,eAAeG,yCAAAA;IACf,eAAe,sBAAqB,QAAO,iBAAiBC,4CAAAA,aAAa,OAAO,IAAI,EAAE,GAAG,IAAI,CAAC;IACnF;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"latency-card.cjs.js","names":["EntityType","CHART_COLORS","useState","useMetricsLatency","useMetricsFilters","intervalHours","bucketPlan","OpenInTracesButton","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatDuration","ChartArea","MetricsLineChart","formatAxisDuration","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nconst SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'p50', label: 'P50', color: CHART_COLORS.sky },\n  { dataKey: 'p95', label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  { dataKey: 'p99', label: 'P99', color: CHART_COLORS.violet },\n];\n\nconst TITLE: Record<LatencyEntity, string> = {\n  agents: 'Agent latency',\n  workflows: 'Workflow latency',\n  tools: 'Tool latency',\n};\n\nconst VIEWS = [\n  { value: 'agents', label: TITLE.agents },\n  { value: 'workflows', label: TITLE.workflows },\n  { value: 'tools', label: TITLE.tools },\n] as const;\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50, P95 and P99 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency(entity);\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const peak = Math.max(0, ...data.map(b => b.p95 ?? 0));\n\n  const layout = {\n    title: TITLE[entity],\n    titleMenu: { value: entity, onValueChange: setEntity, options: VIEWS },\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      total={peak > 0 ? formatDuration(peak) : '—'}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAM,cAAiD;CACrD,QAAQA,2BAAAA,WAAW;CACnB,WAAWA,2BAAAA,WAAW;CACtB,OAAOA,2BAAAA,WAAW;AACpB;AAEA,IAAM,SAAmC;CACvC;EAAE,SAAS;EAAO,OAAO;EAAO,OAAOC,yCAAAA,aAAa;CAAI;CACxD;EAAE,SAAS;EAAO,OAAO;EAAO,OAAOA,yCAAAA,aAAa;EAAO,UAAU;CAAK;CAC1E;EAAE,SAAS;EAAO,OAAO;EAAO,OAAOA,yCAAAA,aAAa;CAAO;AAC7D;AAEA,IAAM,QAAuC;CAC3C,QAAQ;CACR,WAAW;CACX,OAAO;AACT;AAEA,IAAM,QAAQ;CACZ;EAAE,OAAO;EAAU,OAAO,MAAM;CAAO;CACvC;EAAE,OAAO;EAAa,OAAO,MAAM;CAAU;CAC7C;EAAE,OAAO;EAAS,OAAO,MAAM;CAAM;AACvC;AAEA,IAAM,aAA4C;CAChD,QAAQ;CACR,WAAW;CACX,OAAO;AACT;AAUA,SAAgB,YAAY,EAAE,cAAc,oBAAsC;CAChF,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAwB,QAAQ;CAC5D,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsBC,kDAAAA,kBAAkB,MAAM;CACrF,MAAM,EAAE,cAAcC,kDAAAA,kBAAkB;CAExC,MAAM,OAAOC,4CAAAA,cAAcC,4CAAAA,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC,CAAC,QAAQ;CAC9E,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,KAAK,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC;CAErD,MAAM,SAAS;EACb,OAAO,MAAM;EACb,WAAW;GAAE,OAAO;GAAQ,eAAe;GAAW,SAAS;EAAM;EACrE,SAAS,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD,EAAoB,eAAe,aAAa,YAAY,OAAO,EAAI,CAAA;EAChG,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD,EAAwB,QAAQ,OAAS,CAAA,EACtB,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oDAAAA,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,8CAAAA,WAAD;EACE,GAAI;EACJ,OAAO,OAAO,IAAIE,yCAAAA,eAAe,IAAI,IAAI;EAC9B;EACX,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAc,MAAM,WAAW,QAAQ;GACnF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgBF,yCAAAA;IAChB,eAAeG,yCAAAA;IACf,eAAe,sBAAqB,QAAO,iBAAiBC,4CAAAA,aAAa,OAAO,IAAI,EAAE,GAAG,IAAI,CAAC;IACnF;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/metrics/components/latency-card.es.js

@@ -1,17 +1,17 @@
-import { bucketPlan, bucketWindow, intervalHours } from "../lib/metrics-buckets.es.js";
-import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
-import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { formatAxisDuration, formatDuration } from "../lib/chart-format.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
+import { bucketPlan, bucketWindow, intervalHours } from "../lib/metrics-buckets.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-DKzuRU2q.js";
+import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-BhHoduO0.js";
 import { OpenInTracesButton } from "./card-action-buttons.es.js";
 import { useMetricsLatency } from "../hooks/use-metrics-latency.es.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { EntityType } from "@mastra/core/observability";
 // src/domains/metrics/components/latency-card.tsx
 var ROOT_ENTITY = {
@@ -37,6 +37,25 @@ var SERIES = [
 		color: CHART_COLORS.violet
 	}
 ];
+var TITLE = {
+	agents: "Agent latency",
+	workflows: "Workflow latency",
+	tools: "Tool latency"
+};
+var VIEWS = [
+	{
+		value: "agents",
+		label: TITLE.agents
+	},
+	{
+		value: "workflows",
+		label: TITLE.workflows
+	},
+	{
+		value: "tools",
+		label: TITLE.tools
+	}
+];
 var EMPTY_NOUN = {
 	agents: "agent runs",
 	workflows: "workflow runs",
@@ -49,27 +68,14 @@ function LatencyCard({ onViewTraces, onTimeRangeClick }) {
 	const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);
 	const peak = Math.max(0, ...data.map((b) => b.p95 ?? 0));
 	const layout = {
-		title: "Latency",
-		description: "Duration percentiles.",
-		actions: onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: () => onViewTraces(ROOT_ENTITY[entity]) }),
-		toolbar: /* @__PURE__ */ jsxs(MetricsCard.Toolbar, { children: [/* @__PURE__ */ jsx(MetricsLineChartLegend, { series: SERIES }), /* @__PURE__ */ jsxs(MetricsCard.Tabs, {
+		title: TITLE[entity],
+		titleMenu: {
 			value: entity,
 			onValueChange: setEntity,
-			children: [
-				/* @__PURE__ */ jsx(MetricsCard.Tab, {
-					value: "agents",
-					children: "Agents"
-				}),
-				/* @__PURE__ */ jsx(MetricsCard.Tab, {
-					value: "workflows",
-					children: "Workflows"
-				}),
-				/* @__PURE__ */ jsx(MetricsCard.Tab, {
-					value: "tools",
-					children: "Tools"
-				})
-			]
-		})] })
+			options: VIEWS
+		},
+		actions: onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: () => onViewTraces(ROOT_ENTITY[entity]) }),
+		toolbar: /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__PURE__ */ jsx(MetricsLineChartLegend, { series: SERIES }) })
 	};
 	if (isError) return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
@@ -77,11 +83,8 @@ function LatencyCard({ onViewTraces, onTimeRangeClick }) {
 	});
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ jsx(MetricsCard.Summary, {
-			value: peak > 0 ? formatDuration(peak) : "—",
-			label: "peak P95",
-			isLoading
-		}),
+		total: peak > 0 ? formatDuration(peak) : "—",
+		isLoading,
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ jsx(ChartArea, {
 			isEmpty: !isLoading && peak === 0,

package/dist/domains/metrics/components/latency-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"latency-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nconst SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'p50', label: 'P50', color: CHART_COLORS.sky },\n  { dataKey: 'p95', label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  { dataKey: 'p99', label: 'P99', color: CHART_COLORS.violet },\n];\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50, P95 and P99 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency(entity);\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const peak = Math.max(0, ...data.map(b => b.p95 ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,IAAM,cAAiD;CACrD,QAAQ,WAAW;CACnB,WAAW,WAAW;CACtB,OAAO,WAAW;AACpB;AAEA,IAAM,SAAmC;CACvC;EAAE,SAAS;EAAO,OAAO;EAAO,OAAO,aAAa;CAAI;CACxD;EAAE,SAAS;EAAO,OAAO;EAAO,OAAO,aAAa;EAAO,UAAU;CAAK;CAC1E;EAAE,SAAS;EAAO,OAAO;EAAO,OAAO,aAAa;CAAO;AAC7D;AAEA,IAAM,aAA4C;CAChD,QAAQ;CACR,WAAW;CACX,OAAO;AACT;AAUA,SAAgB,YAAY,EAAE,cAAc,oBAAsC;CAChF,MAAM,CAAC,QAAQ,aAAa,SAAwB,QAAQ;CAC5D,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsB,kBAAkB,MAAM;CACrF,MAAM,EAAE,cAAc,kBAAkB;CAExC,MAAM,OAAO,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC,CAAC,QAAQ;CAC9E,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,KAAK,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC;CAErD,MAAM,SAAS;EACb,OAAO;EACP,aAAa;EACb,SAAS,gBAAgB,oBAAC,oBAAD,EAAoB,eAAe,aAAa,YAAY,OAAO,EAAI,CAAA;EAChG,SACE,qBAAC,YAAY,SAAb,EAAA,UAAA,CACE,oBAAC,wBAAD,EAAwB,QAAQ,OAAS,CAAA,GACzC,qBAAC,YAAY,MAAb;GAAiC,OAAO;GAAQ,eAAe;GAA/D,UAAA;IACE,oBAAC,YAAY,KAAb;KAAiB,OAAM;KAAS,UAAA;IAAuB,CAAA;IACvD,oBAAC,YAAY,KAAb;KAAiB,OAAM;KAAY,UAAA;IAA0B,CAAA;IAC7D,oBAAC,YAAY,KAAb;KAAiB,OAAM;KAAQ,UAAA;IAAsB,CAAA;GACrC;EACC,CAAA,CAAA,EAAA,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,SACE,oBAAC,YAAY,SAAb;GAAqB,OAAO,OAAO,IAAI,eAAe,IAAI,IAAI;GAAK,OAAM;GAAsB;EAAY,CAAA;EAE7G,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAc,MAAM,WAAW,QAAQ;GACnF,UAAA,oBAAC,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,eAAe,sBAAqB,QAAO,iBAAiB,aAAa,OAAO,IAAI,EAAE,GAAG,IAAI,CAAC;IACnF;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"latency-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nconst SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'p50', label: 'P50', color: CHART_COLORS.sky },\n  { dataKey: 'p95', label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  { dataKey: 'p99', label: 'P99', color: CHART_COLORS.violet },\n];\n\nconst TITLE: Record<LatencyEntity, string> = {\n  agents: 'Agent latency',\n  workflows: 'Workflow latency',\n  tools: 'Tool latency',\n};\n\nconst VIEWS = [\n  { value: 'agents', label: TITLE.agents },\n  { value: 'workflows', label: TITLE.workflows },\n  { value: 'tools', label: TITLE.tools },\n] as const;\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50, P95 and P99 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency(entity);\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const peak = Math.max(0, ...data.map(b => b.p95 ?? 0));\n\n  const layout = {\n    title: TITLE[entity],\n    titleMenu: { value: entity, onValueChange: setEntity, options: VIEWS },\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      total={peak > 0 ? formatDuration(peak) : '—'}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,IAAM,cAAiD;CACrD,QAAQ,WAAW;CACnB,WAAW,WAAW;CACtB,OAAO,WAAW;AACpB;AAEA,IAAM,SAAmC;CACvC;EAAE,SAAS;EAAO,OAAO;EAAO,OAAO,aAAa;CAAI;CACxD;EAAE,SAAS;EAAO,OAAO;EAAO,OAAO,aAAa;EAAO,UAAU;CAAK;CAC1E;EAAE,SAAS;EAAO,OAAO;EAAO,OAAO,aAAa;CAAO;AAC7D;AAEA,IAAM,QAAuC;CAC3C,QAAQ;CACR,WAAW;CACX,OAAO;AACT;AAEA,IAAM,QAAQ;CACZ;EAAE,OAAO;EAAU,OAAO,MAAM;CAAO;CACvC;EAAE,OAAO;EAAa,OAAO,MAAM;CAAU;CAC7C;EAAE,OAAO;EAAS,OAAO,MAAM;CAAM;AACvC;AAEA,IAAM,aAA4C;CAChD,QAAQ;CACR,WAAW;CACX,OAAO;AACT;AAUA,SAAgB,YAAY,EAAE,cAAc,oBAAsC;CAChF,MAAM,CAAC,QAAQ,aAAa,SAAwB,QAAQ;CAC5D,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsB,kBAAkB,MAAM;CACrF,MAAM,EAAE,cAAc,kBAAkB;CAExC,MAAM,OAAO,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC,CAAC,QAAQ;CAC9E,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,KAAK,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC;CAErD,MAAM,SAAS;EACb,OAAO,MAAM;EACb,WAAW;GAAE,OAAO;GAAQ,eAAe;GAAW,SAAS;EAAM;EACrE,SAAS,gBAAgB,oBAAC,oBAAD,EAAoB,eAAe,aAAa,YAAY,OAAO,EAAI,CAAA;EAChG,SACE,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,wBAAD,EAAwB,QAAQ,OAAS,CAAA,EACtB,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,OAAO,OAAO,IAAI,eAAe,IAAI,IAAI;EAC9B;EACX,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAc,MAAM,WAAW,QAAQ;GACnF,UAAA,oBAAC,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,eAAe,sBAAqB,QAAO,iBAAiB,aAAa,OAAO,IAAI,EAAE,GAAG,IAAI,CAAC;IACnF;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/metrics/components/metrics-grid/metrics-grid.cjs.js

@@ -25,10 +25,13 @@ function MetricsGrid({ children, columns = 3, className }) {
 		})
 	});
 }
-/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */
+/**
+* A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised, and the card
+* fills the cell's height, so cards in a row end together.
+*/
 function MetricsGridItem({ children, span = 1, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_utils.cn("min-w-0 *:w-full *:min-w-0!", spanClasses[span], className),
+		className: require_utils.cn("min-w-0 *:size-full *:min-w-0!", spanClasses[span], className),
 		children
 	});
 }

package/dist/domains/metrics/components/metrics-grid/metrics-grid.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-grid.cjs.js","names":["cn"],"sources":["../../../../../src/domains/metrics/components/metrics-grid/metrics-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsGridColumns = 2 | 3;\nexport type MetricsGridItemSpan = 1 | 2 | 'full';\n\n/**\n * Breakpoints follow the grid's own width (container queries), not the viewport,\n * so the sidebar or any surrounding layout doesn't skew the column count.\n */\nconst columnClasses: Record<MetricsGridColumns, string> = {\n  2: '@3xl:grid-cols-2',\n  3: '@3xl:grid-cols-2 @7xl:grid-cols-3',\n};\n\nconst spanClasses: Record<MetricsGridItemSpan, string> = {\n  1: '',\n  2: '@3xl:col-span-2',\n  full: 'col-span-full',\n};\n\nexport type MetricsGridProps = {\n  children: ReactNode;\n  /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */\n  columns?: MetricsGridColumns;\n  className?: string;\n};\n\n/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */\nexport function MetricsGrid({ children, columns = 3, className }: MetricsGridProps) {\n  return (\n    <div className={cn('@container', className)}>\n      <div className={cn('grid gap-4', columnClasses[columns])}>{children}</div>\n    </div>\n  );\n}\n\nexport type MetricsGridItemProps = {\n  children: ReactNode;\n  span?: MetricsGridItemSpan;\n  className?: string;\n};\n\n/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */\nfunction MetricsGridItem({ children, span = 1, className }: MetricsGridItemProps) {\n  return <div className={cn('min-w-0 *:w-full *:min-w-0!', spanClasses[span], className)}>{children}</div>;\n}\n\nMetricsGrid.Item = MetricsGridItem;\n"],"mappings":";;;;;;;;AAUA,IAAM,gBAAoD;CACxD,GAAG;CACH,GAAG;AACL;AAEA,IAAM,cAAmD;CACvD,GAAG;CACH,GAAG;CACH,MAAM;AACR;;AAUA,SAAgB,YAAY,EAAE,UAAU,UAAU,GAAG,aAA+B;CAClF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWA,cAAAA,GAAG,cAAc,SAAS;EACxC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAWA,cAAAA,GAAG,cAAc,cAAc,QAAQ;GAAI;EAAc,CAAA;CACtE,CAAA;AAET;;AASA,SAAS,gBAAgB,EAAE,UAAU,OAAO,GAAG,aAAmC;CAChF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWA,cAAAA,GAAG,+BAA+B,YAAY,OAAO,SAAS;EAAI;CAAc,CAAA;AACzG;AAEA,YAAY,OAAO"}
+{"version":3,"file":"metrics-grid.cjs.js","names":["cn"],"sources":["../../../../../src/domains/metrics/components/metrics-grid/metrics-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsGridColumns = 2 | 3;\nexport type MetricsGridItemSpan = 1 | 2 | 'full';\n\n/**\n * Breakpoints follow the grid's own width (container queries), not the viewport,\n * so the sidebar or any surrounding layout doesn't skew the column count.\n */\nconst columnClasses: Record<MetricsGridColumns, string> = {\n  2: '@3xl:grid-cols-2',\n  3: '@3xl:grid-cols-2 @7xl:grid-cols-3',\n};\n\nconst spanClasses: Record<MetricsGridItemSpan, string> = {\n  1: '',\n  2: '@3xl:col-span-2',\n  full: 'col-span-full',\n};\n\nexport type MetricsGridProps = {\n  children: ReactNode;\n  /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */\n  columns?: MetricsGridColumns;\n  className?: string;\n};\n\n/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */\nexport function MetricsGrid({ children, columns = 3, className }: MetricsGridProps) {\n  return (\n    <div className={cn('@container', className)}>\n      <div className={cn('grid gap-4', columnClasses[columns])}>{children}</div>\n    </div>\n  );\n}\n\nexport type MetricsGridItemProps = {\n  children: ReactNode;\n  span?: MetricsGridItemSpan;\n  className?: string;\n};\n\n/**\n * A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised, and the card\n * fills the cell's height, so cards in a row end together.\n */\nfunction MetricsGridItem({ children, span = 1, className }: MetricsGridItemProps) {\n  return <div className={cn('min-w-0 *:size-full *:min-w-0!', spanClasses[span], className)}>{children}</div>;\n}\n\nMetricsGrid.Item = MetricsGridItem;\n"],"mappings":";;;;;;;;AAUA,IAAM,gBAAoD;CACxD,GAAG;CACH,GAAG;AACL;AAEA,IAAM,cAAmD;CACvD,GAAG;CACH,GAAG;CACH,MAAM;AACR;;AAUA,SAAgB,YAAY,EAAE,UAAU,UAAU,GAAG,aAA+B;CAClF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWA,cAAAA,GAAG,cAAc,SAAS;EACxC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAWA,cAAAA,GAAG,cAAc,cAAc,QAAQ;GAAI;EAAc,CAAA;CACtE,CAAA;AAET;;;;;AAYA,SAAS,gBAAgB,EAAE,UAAU,OAAO,GAAG,aAAmC;CAChF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWA,cAAAA,GAAG,kCAAkC,YAAY,OAAO,SAAS;EAAI;CAAc,CAAA;AAC5G;AAEA,YAAY,OAAO"}

package/dist/domains/metrics/components/metrics-grid/metrics-grid.es.js

@@ -24,10 +24,13 @@ function MetricsGrid({ children, columns = 3, className }) {
 		})
 	});
 }
-/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */
+/**
+* A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised, and the card
+* fills the cell's height, so cards in a row end together.
+*/
 function MetricsGridItem({ children, span = 1, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("min-w-0 *:w-full *:min-w-0!", spanClasses[span], className),
+		className: cn("min-w-0 *:size-full *:min-w-0!", spanClasses[span], className),
 		children
 	});
 }

package/dist/domains/metrics/components/metrics-grid/metrics-grid.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-grid.es.js","names":[],"sources":["../../../../../src/domains/metrics/components/metrics-grid/metrics-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsGridColumns = 2 | 3;\nexport type MetricsGridItemSpan = 1 | 2 | 'full';\n\n/**\n * Breakpoints follow the grid's own width (container queries), not the viewport,\n * so the sidebar or any surrounding layout doesn't skew the column count.\n */\nconst columnClasses: Record<MetricsGridColumns, string> = {\n  2: '@3xl:grid-cols-2',\n  3: '@3xl:grid-cols-2 @7xl:grid-cols-3',\n};\n\nconst spanClasses: Record<MetricsGridItemSpan, string> = {\n  1: '',\n  2: '@3xl:col-span-2',\n  full: 'col-span-full',\n};\n\nexport type MetricsGridProps = {\n  children: ReactNode;\n  /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */\n  columns?: MetricsGridColumns;\n  className?: string;\n};\n\n/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */\nexport function MetricsGrid({ children, columns = 3, className }: MetricsGridProps) {\n  return (\n    <div className={cn('@container', className)}>\n      <div className={cn('grid gap-4', columnClasses[columns])}>{children}</div>\n    </div>\n  );\n}\n\nexport type MetricsGridItemProps = {\n  children: ReactNode;\n  span?: MetricsGridItemSpan;\n  className?: string;\n};\n\n/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */\nfunction MetricsGridItem({ children, span = 1, className }: MetricsGridItemProps) {\n  return <div className={cn('min-w-0 *:w-full *:min-w-0!', spanClasses[span], className)}>{children}</div>;\n}\n\nMetricsGrid.Item = MetricsGridItem;\n"],"mappings":";;;;;;;AAUA,IAAM,gBAAoD;CACxD,GAAG;CACH,GAAG;AACL;AAEA,IAAM,cAAmD;CACvD,GAAG;CACH,GAAG;CACH,MAAM;AACR;;AAUA,SAAgB,YAAY,EAAE,UAAU,UAAU,GAAG,aAA+B;CAClF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;EACxC,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,cAAc,cAAc,QAAQ;GAAI;EAAc,CAAA;CACtE,CAAA;AAET;;AASA,SAAS,gBAAgB,EAAE,UAAU,OAAO,GAAG,aAAmC;CAChF,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,+BAA+B,YAAY,OAAO,SAAS;EAAI;CAAc,CAAA;AACzG;AAEA,YAAY,OAAO"}
+{"version":3,"file":"metrics-grid.es.js","names":[],"sources":["../../../../../src/domains/metrics/components/metrics-grid/metrics-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsGridColumns = 2 | 3;\nexport type MetricsGridItemSpan = 1 | 2 | 'full';\n\n/**\n * Breakpoints follow the grid's own width (container queries), not the viewport,\n * so the sidebar or any surrounding layout doesn't skew the column count.\n */\nconst columnClasses: Record<MetricsGridColumns, string> = {\n  2: '@3xl:grid-cols-2',\n  3: '@3xl:grid-cols-2 @7xl:grid-cols-3',\n};\n\nconst spanClasses: Record<MetricsGridItemSpan, string> = {\n  1: '',\n  2: '@3xl:col-span-2',\n  full: 'col-span-full',\n};\n\nexport type MetricsGridProps = {\n  children: ReactNode;\n  /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */\n  columns?: MetricsGridColumns;\n  className?: string;\n};\n\n/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */\nexport function MetricsGrid({ children, columns = 3, className }: MetricsGridProps) {\n  return (\n    <div className={cn('@container', className)}>\n      <div className={cn('grid gap-4', columnClasses[columns])}>{children}</div>\n    </div>\n  );\n}\n\nexport type MetricsGridItemProps = {\n  children: ReactNode;\n  span?: MetricsGridItemSpan;\n  className?: string;\n};\n\n/**\n * A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised, and the card\n * fills the cell's height, so cards in a row end together.\n */\nfunction MetricsGridItem({ children, span = 1, className }: MetricsGridItemProps) {\n  return <div className={cn('min-w-0 *:size-full *:min-w-0!', spanClasses[span], className)}>{children}</div>;\n}\n\nMetricsGrid.Item = MetricsGridItem;\n"],"mappings":";;;;;;;AAUA,IAAM,gBAAoD;CACxD,GAAG;CACH,GAAG;AACL;AAEA,IAAM,cAAmD;CACvD,GAAG;CACH,GAAG;CACH,MAAM;AACR;;AAUA,SAAgB,YAAY,EAAE,UAAU,UAAU,GAAG,aAA+B;CAClF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;EACxC,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,cAAc,cAAc,QAAQ;GAAI;EAAc,CAAA;CACtE,CAAA;AAET;;;;;AAYA,SAAS,gBAAgB,EAAE,UAAU,OAAO,GAAG,aAAmC;CAChF,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,kCAAkC,YAAY,OAAO,SAAS;EAAI;CAAc,CAAA;AAC5G;AAEA,YAAY,OAAO"}

package/dist/domains/metrics/components/scores-card.cjs.js

@@ -1,11 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-2m4LVL1N.cjs");
+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_MetricsLineChart = require("../../../MetricsLineChart-CjBm4IXu.cjs");
 const require_domains_metrics_hooks_use_metrics_scores = require("../hooks/use-metrics-scores.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/scores-card.tsx
@@ -19,34 +18,25 @@ var SCORER_COLORS = [
 ];
 var formatScore = (score) => score.toFixed(2);
 var axisScore = (score) => String(+score.toFixed(2));
-/** One line per scorer; the legend carries its mean over the range. */
+/** One line per scorer. */
 function scorerSeries(scorers) {
-	return scorers.map(({ scorerId, name, average }, i) => ({
+	return scorers.map(({ scorerId, name }, i) => ({
 		dataKey: scorerId,
 		label: name,
-		color: SCORER_COLORS[i % SCORER_COLORS.length] ?? require_domains_metrics_lib_chart_colors.CHART_COLORS.neutral,
-		aggregate: () => ({ value: formatScore(average) })
+		color: SCORER_COLORS[i % SCORER_COLORS.length] ?? require_domains_metrics_lib_chart_colors.CHART_COLORS.neutral
 	}));
 }
 /** Average result of each scorer over time, 0 to 1. */
 function ScoresCard() {
 	const { data, isLoading, isError, isPlaceholderData } = require_domains_metrics_hooks_use_metrics_scores.useMetricsScores();
 	const scorers = data?.scorers ?? [];
-	const layout = {
-		title: "Scores",
-		description: "Average scorer result, 0 to 1."
-	};
+	const layout = { title: "Scores" };
 	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card_error.ChartCardError, {})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Summary, {
-			value: String(scorers.length),
-			label: scorers.length === 1 ? "scorer" : "scorers",
-			isLoading
-		}),
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_area.ChartArea, {
 			isEmpty: !isLoading && scorers.length === 0,

package/dist/domains/metrics/components/scores-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scores-card.cjs.js","names":["CHART_COLORS","useMetricsScores","ChartCard","ChartCardError","MetricsCard","ChartArea","MetricsLineChart","BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => String(+score.toFixed(2));\n\n/** One line per scorer; the legend carries its mean over the range. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name, average }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n    aggregate: () => ({ value: formatScore(average) }),\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores', description: 'Average scorer result, 0 to 1.' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={String(scorers.length)}\n          label={scorers.length === 1 ? 'scorer' : 'scorers'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,gBAAgB;CACpBA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;AACf;AAEA,IAAM,eAAe,UAAkB,MAAM,QAAQ,CAAC;AACtD,IAAM,aAAa,UAAkB,OAAO,CAAC,MAAM,QAAQ,CAAC,CAAC;;AAG7D,SAAS,aAAa,SAAoD;CACxE,OAAO,QAAQ,KAAK,EAAE,UAAU,MAAM,WAAW,OAAO;EACtD,SAAS;EACT,OAAO;EACP,OAAO,cAAc,IAAI,cAAc,WAAWA,yCAAAA,aAAa;EAC/D,kBAAkB,EAAE,OAAO,YAAY,OAAO,EAAE;CAClD,EAAE;AACJ;;AAGA,SAAgB,aAAa;CAC3B,MAAM,EAAE,MAAM,WAAW,SAAS,sBAAsBC,iDAAAA,iBAAiB;CACzE,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,MAAM,SAAS;EAAE,OAAO;EAAU,aAAa;CAAiC;CAEhF,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oDAAAA,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,8CAAAA,WAAD;EACE,GAAI;EACJ,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,oBAAAA,YAAY,SAAb;GACE,OAAO,OAAO,QAAQ,MAAM;GAC5B,OAAO,QAAQ,WAAW,IAAI,WAAW;GAC9B;EACZ,CAAA;EAEH,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,QAAQ,WAAW;GAAG,cAAa;GACnE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;IACE,MAAM,MAAM,WAAW,CAAC;IACxB,QAAQ,aAAa,OAAO;IAC5B,QAAO;IACP,SAAS,CAAC,GAAG,CAAC;IACd,gBAAgB;IAChB,eAAe;IACJ;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"scores-card.cjs.js","names":["CHART_COLORS","useMetricsScores","ChartCard","ChartCardError","ChartArea","MetricsLineChart","BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => String(+score.toFixed(2));\n\n/** One line per scorer. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard {...layout} isUpdating={isPlaceholderData}>\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,gBAAgB;CACpBA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;CACbA,yCAAAA,aAAa;AACf;AAEA,IAAM,eAAe,UAAkB,MAAM,QAAQ,CAAC;AACtD,IAAM,aAAa,UAAkB,OAAO,CAAC,MAAM,QAAQ,CAAC,CAAC;;AAG7D,SAAS,aAAa,SAAoD;CACxE,OAAO,QAAQ,KAAK,EAAE,UAAU,QAAQ,OAAO;EAC7C,SAAS;EACT,OAAO;EACP,OAAO,cAAc,IAAI,cAAc,WAAWA,yCAAAA,aAAa;CACjE,EAAE;AACJ;;AAGA,SAAgB,aAAa;CAC3B,MAAM,EAAE,MAAM,WAAW,SAAS,sBAAsBC,iDAAAA,iBAAiB;CACzE,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,MAAM,SAAS,EAAE,OAAO,SAAS;CAEjC,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oDAAAA,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,8CAAAA,WAAD;EAAW,GAAI;EAAQ,YAAY;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,QAAQ,WAAW;GAAG,cAAa;GACnE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;IACE,MAAM,MAAM,WAAW,CAAC;IACxB,QAAQ,aAAa,OAAO;IAC5B,QAAO;IACP,SAAS,CAAC,GAAG,CAAC;IACd,gBAAgB;IAChB,eAAe;IACJ;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/metrics/components/scores-card.es.js

@@ -1,10 +1,9 @@
-import { BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { t as MetricsLineChart } from "../../../MetricsLineChart-DKzuRU2q.js";
+import { BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { t as MetricsLineChart } from "../../../MetricsLineChart-BhHoduO0.js";
 import { useMetricsScores } from "../hooks/use-metrics-scores.es.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/scores-card.tsx
@@ -18,34 +17,25 @@ var SCORER_COLORS = [
 ];
 var formatScore = (score) => score.toFixed(2);
 var axisScore = (score) => String(+score.toFixed(2));
-/** One line per scorer; the legend carries its mean over the range. */
+/** One line per scorer. */
 function scorerSeries(scorers) {
-	return scorers.map(({ scorerId, name, average }, i) => ({
+	return scorers.map(({ scorerId, name }, i) => ({
 		dataKey: scorerId,
 		label: name,
-		color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,
-		aggregate: () => ({ value: formatScore(average) })
+		color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral
 	}));
 }
 /** Average result of each scorer over time, 0 to 1. */
 function ScoresCard() {
 	const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();
 	const scorers = data?.scorers ?? [];
-	const layout = {
-		title: "Scores",
-		description: "Average scorer result, 0 to 1."
-	};
+	const layout = { title: "Scores" };
 	if (isError) return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
 		children: /* @__PURE__ */ jsx(ChartCardError, {})
 	});
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ jsx(MetricsCard.Summary, {
-			value: String(scorers.length),
-			label: scorers.length === 1 ? "scorer" : "scorers",
-			isLoading
-		}),
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ jsx(ChartArea, {
 			isEmpty: !isLoading && scorers.length === 0,

package/dist/domains/metrics/components/scores-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"scores-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => String(+score.toFixed(2));\n\n/** One line per scorer; the legend carries its mean over the range. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name, average }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n    aggregate: () => ({ value: formatScore(average) }),\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores', description: 'Average scorer result, 0 to 1.' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={String(scorers.length)}\n          label={scorers.length === 1 ? 'scorer' : 'scorers'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,gBAAgB;CACpB,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;AACf;AAEA,IAAM,eAAe,UAAkB,MAAM,QAAQ,CAAC;AACtD,IAAM,aAAa,UAAkB,OAAO,CAAC,MAAM,QAAQ,CAAC,CAAC;;AAG7D,SAAS,aAAa,SAAoD;CACxE,OAAO,QAAQ,KAAK,EAAE,UAAU,MAAM,WAAW,OAAO;EACtD,SAAS;EACT,OAAO;EACP,OAAO,cAAc,IAAI,cAAc,WAAW,aAAa;EAC/D,kBAAkB,EAAE,OAAO,YAAY,OAAO,EAAE;CAClD,EAAE;AACJ;;AAGA,SAAgB,aAAa;CAC3B,MAAM,EAAE,MAAM,WAAW,SAAS,sBAAsB,iBAAiB;CACzE,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,MAAM,SAAS;EAAE,OAAO;EAAU,aAAa;CAAiC;CAEhF,IAAI,SACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,SACE,oBAAC,YAAY,SAAb;GACE,OAAO,OAAO,QAAQ,MAAM;GAC5B,OAAO,QAAQ,WAAW,IAAI,WAAW;GAC9B;EACZ,CAAA;EAEH,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,QAAQ,WAAW;GAAG,cAAa;GACnE,UAAA,oBAAC,kBAAD;IACE,MAAM,MAAM,WAAW,CAAC;IACxB,QAAQ,aAAa,OAAO;IAC5B,QAAO;IACP,SAAS,CAAC,GAAG,CAAC;IACd,gBAAgB;IAChB,eAAe;IACJ;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"scores-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => String(+score.toFixed(2));\n\n/** One line per scorer. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard {...layout} isUpdating={isPlaceholderData}>\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,gBAAgB;CACpB,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;AACf;AAEA,IAAM,eAAe,UAAkB,MAAM,QAAQ,CAAC;AACtD,IAAM,aAAa,UAAkB,OAAO,CAAC,MAAM,QAAQ,CAAC,CAAC;;AAG7D,SAAS,aAAa,SAAoD;CACxE,OAAO,QAAQ,KAAK,EAAE,UAAU,QAAQ,OAAO;EAC7C,SAAS;EACT,OAAO;EACP,OAAO,cAAc,IAAI,cAAc,WAAW,aAAa;CACjE,EAAE;AACJ;;AAGA,SAAgB,aAAa;CAC3B,MAAM,EAAE,MAAM,WAAW,SAAS,sBAAsB,iBAAiB;CACzE,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,MAAM,SAAS,EAAE,OAAO,SAAS;CAEjC,IAAI,SACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EAAW,GAAI;EAAQ,YAAY;EACjC,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,QAAQ,WAAW;GAAG,cAAa;GACnE,UAAA,oBAAC,kBAAD;IACE,MAAM,MAAM,WAAW,CAAC;IACxB,QAAQ,aAAa,OAAO;IAC5B,QAAO;IACP,SAAS,CAAC,GAAG,CAAC;IACd,gBAAgB;IAChB,eAAe;IACJ;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/metrics/components/token-usage-card.cjs.js

@@ -1,17 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
-const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
-const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.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_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-2m4LVL1N.cjs");
-const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-NATtwA_W.cjs");
+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_MetricsLineChart = require("../../../MetricsLineChart-CjBm4IXu.cjs");
 const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
+const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-BdMlKv6G.cjs");
+const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/token-usage-card.tsx
@@ -37,6 +37,17 @@ var COST_SERIES = [{
 	label: "Cost",
 	color: require_domains_metrics_lib_chart_colors.CHART_COLORS.green
 }];
+var TITLE = {
+	tokens: "Token usage",
+	cost: "Model cost"
+};
+var VIEWS = [{
+	value: "tokens",
+	label: TITLE.tokens
+}, {
+	value: "cost",
+	label: TITLE.cost
+}];
 function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
 	const [view, setView] = (0, react.useState)("tokens");
 	const { data = [], isLoading, isError, isPlaceholderData } = require_domains_metrics_hooks_use_metrics_activity.useMetricsActivity();
@@ -47,20 +58,14 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
 	const isTokens = view === "tokens";
 	const series = isTokens ? TOKEN_SERIES : COST_SERIES;
 	const layout = {
-		title: "Token usage",
-		description: isTokens ? "Input, cache reads and output." : "Estimated model spend.",
-		actions: onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: onViewTraces }),
-		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.Toolbar, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, { series }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.Tabs, {
+		title: TITLE[view],
+		titleMenu: {
 			value: view,
 			onValueChange: setView,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-				value: "tokens",
-				children: "Tokens"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-				value: "cost",
-				children: "Cost"
-			})]
-		})] })
+			options: VIEWS
+		},
+		actions: onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: onViewTraces }),
+		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, { series }) })
 	};
 	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
@@ -68,11 +73,8 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Summary, {
-			value: isTokens ? require_domains_metrics_lib_chart_format.formatCount(tokens) : require_domains_metrics_lib_chart_format.formatUsd(cost),
-			label: isTokens ? "tokens" : "cost",
-			isLoading
-		}),
+		total: isTokens ? require_domains_metrics_lib_chart_format.formatCount(tokens) : require_domains_metrics_lib_chart_format.formatUsd(cost),
+		isLoading,
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_area.ChartArea, {
 			isEmpty: !isLoading && tokens === 0 && cost === 0,
@@ -81,12 +83,13 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
 				data,
 				series,
 				height: "fill",
+				xLabels: "edges",
 				showLegend: false,
 				valueFormatter: isTokens ? require_domains_metrics_lib_chart_format.formatCount : require_domains_metrics_lib_chart_format.formatUsd,
 				axisFormatter: isTokens ? require_domains_metrics_lib_chart_format.formatAxisCount : require_domains_metrics_lib_chart_format.formatAxisUsd,
 				onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(require_domains_metrics_lib_metrics_buckets.bucketWindow(Number(row.ts), stepHours))),
 				isLoading,
-				...require_domains_metrics_lib_chart_axis.BUCKET_AXIS
+				...require_domains_metrics_lib_chart_axis.EDGE_BUCKET_AXIS
 			})
 		})
 	});