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

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

@@ -1 +1 @@
-{"version":3,"file":"token-usage-card.cjs.js","names":["CHART_COLORS","useState","useMetricsActivity","useMetricsFilters","bucketPlan","OpenInTracesButton","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatCount","formatUsd","ChartArea","MetricsStackedBarChart","formatAxisCount","formatAxisUsd","bucketWindow","BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatAxisUsd, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } 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 { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: 'Token usage',\n    description: isTokens ? 'Input, cache reads and output.' : 'Estimated model spend.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<View> value={view} onValueChange={setView}>\n          <MetricsCard.Tab value=\"tokens\">Tokens</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"cost\">Cost</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\n          value={isTokens ? formatCount(tokens) : formatUsd(cost)}\n          label={isTokens ? 'tokens' : 'cost'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          showLegend={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : formatAxisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAM,eAAyC;CAC7C;EAAE,SAAS;EAAS,OAAO;EAAS,OAAOA,yCAAAA,aAAa;CAAM;CAC9D;EAAE,SAAS;EAAa,OAAO;EAAc,OAAOA,yCAAAA,aAAa;CAAO;CACxE;EAAE,SAAS;EAAU,OAAO;EAAU,OAAOA,yCAAAA,aAAa;CAAI;AAChE;AACA,IAAM,cAAwC,CAAC;CAAE,SAAS;CAAQ,OAAO;CAAQ,OAAOA,yCAAAA,aAAa;AAAM,CAAC;AAU5G,SAAgB,eAAe,EAAE,cAAc,oBAAyC;CACtF,MAAM,CAAC,MAAM,YAAA,GAAWC,MAAAA,SAAAA,CAAe,QAAQ;CAC/C,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsBC,mDAAAA,mBAAmB;CAChF,MAAM,EAAE,cAAcC,kDAAAA,kBAAkB;CACxC,MAAM,EAAE,cAAcC,4CAAAA,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC;CAChF,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,MAAM,CAAC;CACpD,MAAM,WAAW,SAAS;CAC1B,MAAM,SAAS,WAAW,eAAe;CAEzC,MAAM,SAAS;EACb,OAAO;EACP,aAAa,WAAW,mCAAmC;EAC3D,SAAS,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD,EAAoB,SAAS,aAAe,CAAA;EACrE,SACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,SAAb,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD,EAAgC,OAAS,CAAA,GACzC,iBAAA,GAAA,kBAAA,KAAA,CAACD,oBAAAA,YAAY,MAAb;GAAwB,OAAO;GAAM,eAAe;GAApD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,KAAb;IAAiB,OAAM;IAAS,UAAA;GAAuB,CAAA,GACvD,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,KAAb;IAAiB,OAAM;IAAO,UAAA;GAAqB,CAAA,CACnC;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;GACE,OAAO,WAAWI,yCAAAA,YAAY,MAAM,IAAIC,yCAAAA,UAAU,IAAI;GACtD,OAAO,WAAW,WAAW;GAClB;EACZ,CAAA;EAEH,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,WAAW,KAAK,SAAS;GAAG,cAAa;GACzE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;IACQ;IACE;IACR,QAAO;IACP,YAAY;IACZ,gBAAgB,WAAWH,yCAAAA,cAAcC,yCAAAA;IACzC,eAAe,WAAWG,yCAAAA,kBAAkBC,yCAAAA;IAC5C,eAAe,sBAAqB,QAAO,iBAAiBC,4CAAAA,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"token-usage-card.cjs.js","names":["CHART_COLORS","useState","useMetricsActivity","useMetricsFilters","bucketPlan","OpenInTracesButton","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatCount","formatUsd","ChartArea","MetricsStackedBarChart","formatAxisCount","formatAxisUsd","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatAxisUsd, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } 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 { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\nconst TITLE: Record<View, string> = {\n  tokens: 'Token usage',\n  cost: 'Model cost',\n};\n\nconst VIEWS = [\n  { value: 'tokens', label: TITLE.tokens },\n  { value: 'cost', label: TITLE.cost },\n] as const;\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: TITLE[view],\n    titleMenu: { value: view, onValueChange: setView, options: VIEWS },\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\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={isTokens ? formatCount(tokens) : formatUsd(cost)}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : formatAxisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAM,eAAyC;CAC7C;EAAE,SAAS;EAAS,OAAO;EAAS,OAAOA,yCAAAA,aAAa;CAAM;CAC9D;EAAE,SAAS;EAAa,OAAO;EAAc,OAAOA,yCAAAA,aAAa;CAAO;CACxE;EAAE,SAAS;EAAU,OAAO;EAAU,OAAOA,yCAAAA,aAAa;CAAI;AAChE;AACA,IAAM,cAAwC,CAAC;CAAE,SAAS;CAAQ,OAAO;CAAQ,OAAOA,yCAAAA,aAAa;AAAM,CAAC;AAE5G,IAAM,QAA8B;CAClC,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,QAAQ,CACZ;CAAE,OAAO;CAAU,OAAO,MAAM;AAAO,GACvC;CAAE,OAAO;CAAQ,OAAO,MAAM;AAAK,CACrC;AAUA,SAAgB,eAAe,EAAE,cAAc,oBAAyC;CACtF,MAAM,CAAC,MAAM,YAAA,GAAWC,MAAAA,SAAAA,CAAe,QAAQ;CAC/C,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsBC,mDAAAA,mBAAmB;CAChF,MAAM,EAAE,cAAcC,kDAAAA,kBAAkB;CACxC,MAAM,EAAE,cAAcC,4CAAAA,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC;CAChF,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,MAAM,CAAC;CACpD,MAAM,WAAW,SAAS;CAC1B,MAAM,SAAS,WAAW,eAAe;CAEzC,MAAM,SAAS;EACb,OAAO,MAAM;EACb,WAAW;GAAE,OAAO;GAAM,eAAe;GAAS,SAAS;EAAM;EACjE,SAAS,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,oBAAD,EAAoB,SAAS,aAAe,CAAA;EACrE,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD,EAAgC,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,WAAWE,yCAAAA,YAAY,MAAM,IAAIC,yCAAAA,UAAU,IAAI;EAC3C;EACX,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,WAAW,KAAK,SAAS;GAAG,cAAa;GACzE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;IACQ;IACE;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB,WAAWH,yCAAAA,cAAcC,yCAAAA;IACzC,eAAe,WAAWG,yCAAAA,kBAAkBC,yCAAAA;IAC5C,eAAe,sBAAqB,QAAO,iBAAiBC,4CAAAA,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

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

@@ -1,18 +1,18 @@
-import { bucketPlan, bucketWindow } from "../lib/metrics-buckets.es.js";
-import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
-import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
-import { BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { formatAxisCount, formatAxisUsd, formatCount, formatUsd } 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 } 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 } from "../../../MetricsLineChart-DKzuRU2q.js";
-import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-DJB4aByt.js";
+import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { r as MetricsLineChartLegend } from "../../../MetricsLineChart-BhHoduO0.js";
 import { OpenInTracesButton } from "./card-action-buttons.es.js";
+import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-BRuA6MTE.js";
+import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/token-usage-card.tsx
 var TOKEN_SERIES = [
 	{
@@ -36,6 +36,17 @@ var COST_SERIES = [{
 	label: "Cost",
 	color: 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] = useState("tokens");
 	const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();
@@ -46,20 +57,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__ */ jsx(OpenInTracesButton, { onClick: onViewTraces }),
-		toolbar: /* @__PURE__ */ jsxs(MetricsCard.Toolbar, { children: [/* @__PURE__ */ jsx(MetricsLineChartLegend, { series }), /* @__PURE__ */ jsxs(MetricsCard.Tabs, {
+		title: TITLE[view],
+		titleMenu: {
 			value: view,
 			onValueChange: setView,
-			children: [/* @__PURE__ */ jsx(MetricsCard.Tab, {
-				value: "tokens",
-				children: "Tokens"
-			}), /* @__PURE__ */ jsx(MetricsCard.Tab, {
-				value: "cost",
-				children: "Cost"
-			})]
-		})] })
+			options: VIEWS
+		},
+		actions: onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: onViewTraces }),
+		toolbar: /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__PURE__ */ jsx(MetricsLineChartLegend, { series }) })
 	};
 	if (isError) return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
@@ -67,11 +72,8 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
 	});
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ jsx(MetricsCard.Summary, {
-			value: isTokens ? formatCount(tokens) : formatUsd(cost),
-			label: isTokens ? "tokens" : "cost",
-			isLoading
-		}),
+		total: isTokens ? formatCount(tokens) : formatUsd(cost),
+		isLoading,
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ jsx(ChartArea, {
 			isEmpty: !isLoading && tokens === 0 && cost === 0,
@@ -80,12 +82,13 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
 				data,
 				series,
 				height: "fill",
+				xLabels: "edges",
 				showLegend: false,
 				valueFormatter: isTokens ? formatCount : formatUsd,
 				axisFormatter: isTokens ? formatAxisCount : formatAxisUsd,
 				onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours))),
 				isLoading,
-				...BUCKET_AXIS
+				...EDGE_BUCKET_AXIS
 			})
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"token-usage-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatAxisUsd, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } 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 { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: 'Token usage',\n    description: isTokens ? 'Input, cache reads and output.' : 'Estimated model spend.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<View> value={view} onValueChange={setView}>\n          <MetricsCard.Tab value=\"tokens\">Tokens</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"cost\">Cost</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\n          value={isTokens ? formatCount(tokens) : formatUsd(cost)}\n          label={isTokens ? 'tokens' : 'cost'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          showLegend={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : formatAxisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,IAAM,eAAyC;CAC7C;EAAE,SAAS;EAAS,OAAO;EAAS,OAAO,aAAa;CAAM;CAC9D;EAAE,SAAS;EAAa,OAAO;EAAc,OAAO,aAAa;CAAO;CACxE;EAAE,SAAS;EAAU,OAAO;EAAU,OAAO,aAAa;CAAI;AAChE;AACA,IAAM,cAAwC,CAAC;CAAE,SAAS;CAAQ,OAAO;CAAQ,OAAO,aAAa;AAAM,CAAC;AAU5G,SAAgB,eAAe,EAAE,cAAc,oBAAyC;CACtF,MAAM,CAAC,MAAM,WAAW,SAAe,QAAQ;CAC/C,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsB,mBAAmB;CAChF,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC;CAChF,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,MAAM,CAAC;CACpD,MAAM,WAAW,SAAS;CAC1B,MAAM,SAAS,WAAW,eAAe;CAEzC,MAAM,SAAS;EACb,OAAO;EACP,aAAa,WAAW,mCAAmC;EAC3D,SAAS,gBAAgB,oBAAC,oBAAD,EAAoB,SAAS,aAAe,CAAA;EACrE,SACE,qBAAC,YAAY,SAAb,EAAA,UAAA,CACE,oBAAC,wBAAD,EAAgC,OAAS,CAAA,GACzC,qBAAC,YAAY,MAAb;GAAwB,OAAO;GAAM,eAAe;GAApD,UAAA,CACE,oBAAC,YAAY,KAAb;IAAiB,OAAM;IAAS,UAAA;GAAuB,CAAA,GACvD,oBAAC,YAAY,KAAb;IAAiB,OAAM;IAAO,UAAA;GAAqB,CAAA,CACnC;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;GACE,OAAO,WAAW,YAAY,MAAM,IAAI,UAAU,IAAI;GACtD,OAAO,WAAW,WAAW;GAClB;EACZ,CAAA;EAEH,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,WAAW,KAAK,SAAS;GAAG,cAAa;GACzE,UAAA,oBAAC,wBAAD;IACQ;IACE;IACR,QAAO;IACP,YAAY;IACZ,gBAAgB,WAAW,cAAc;IACzC,eAAe,WAAW,kBAAkB;IAC5C,eAAe,sBAAqB,QAAO,iBAAiB,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"token-usage-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatAxisUsd, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } 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 { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\nconst TITLE: Record<View, string> = {\n  tokens: 'Token usage',\n  cost: 'Model cost',\n};\n\nconst VIEWS = [\n  { value: 'tokens', label: TITLE.tokens },\n  { value: 'cost', label: TITLE.cost },\n] as const;\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: TITLE[view],\n    titleMenu: { value: view, onValueChange: setView, options: VIEWS },\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\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={isTokens ? formatCount(tokens) : formatUsd(cost)}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : formatAxisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,IAAM,eAAyC;CAC7C;EAAE,SAAS;EAAS,OAAO;EAAS,OAAO,aAAa;CAAM;CAC9D;EAAE,SAAS;EAAa,OAAO;EAAc,OAAO,aAAa;CAAO;CACxE;EAAE,SAAS;EAAU,OAAO;EAAU,OAAO,aAAa;CAAI;AAChE;AACA,IAAM,cAAwC,CAAC;CAAE,SAAS;CAAQ,OAAO;CAAQ,OAAO,aAAa;AAAM,CAAC;AAE5G,IAAM,QAA8B;CAClC,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,QAAQ,CACZ;CAAE,OAAO;CAAU,OAAO,MAAM;AAAO,GACvC;CAAE,OAAO;CAAQ,OAAO,MAAM;AAAK,CACrC;AAUA,SAAgB,eAAe,EAAE,cAAc,oBAAyC;CACtF,MAAM,CAAC,MAAM,WAAW,SAAe,QAAQ;CAC/C,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsB,mBAAmB;CAChF,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC;CAChF,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,MAAM,CAAC;CACpD,MAAM,WAAW,SAAS;CAC1B,MAAM,SAAS,WAAW,eAAe;CAEzC,MAAM,SAAS;EACb,OAAO,MAAM;EACb,WAAW;GAAE,OAAO;GAAM,eAAe;GAAS,SAAS;EAAM;EACjE,SAAS,gBAAgB,oBAAC,oBAAD,EAAoB,SAAS,aAAe,CAAA;EACrE,SACE,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,wBAAD,EAAgC,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,WAAW,YAAY,MAAM,IAAI,UAAU,IAAI;EAC3C;EACX,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,WAAW,KAAK,SAAS;GAAG,cAAa;GACzE,UAAA,oBAAC,wBAAD;IACQ;IACE;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB,WAAW,cAAc;IACzC,eAAe,WAAW,kBAAkB;IAC5C,eAAe,sBAAqB,QAAO,iBAAiB,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/metrics/components/trace-aggregate-card.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
-const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../hooks/use-metrics-trace-aggregate.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
+const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/trace-aggregate-card.tsx
 var FILTER_NAMES = {
@@ -19,6 +19,7 @@ function TraceAggregateCard({ requiresRootSpanFields, children, ...layout }) {
 	if (gate.status === "ready") return children(gate.scope);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
+		toolbar: null,
 		children: gate.status === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Loading, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.NoData, { message: `Not available with a ${gate.unsupportedFields.map((f) => FILTER_NAMES[f] ?? f).join(" or ")} filter.` })
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"trace-aggregate-card.cjs.js","names":["useTraceAggregateGate","ChartCard","MetricsCard"],"sources":["../../../../src/domains/metrics/components/trace-aggregate-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useTraceAggregateGate } from '../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../hooks/use-metrics-trace-aggregate';\nimport { ChartCard } from './chart-card';\nimport type { ChartCardProps } from './chart-card';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\nconst FILTER_NAMES: Record<string, string> = {\n  serviceName: 'service',\n  requestId: 'request ID',\n  experimentId: 'experiment',\n};\n\nexport type TraceAggregateCardProps = Pick<ChartCardProps, 'title' | 'description' | 'className'> & {\n  /** The card groups or filters on the root span's type, which needs `traceQueryRootSpanFields`. */\n  requiresRootSpanFields?: boolean;\n  /** The loaded card, rendered once the server can answer it and the page filters apply to traces. */\n  children: (scope: TraceAggregateScope) => ReactNode;\n};\n\n/**\n * Gates a card built on `aggregateTraces()`: hidden on a server without it, a note when a page\n * filter has no trace equivalent (rather than numbers that ignore the filter), else the card.\n */\nexport function TraceAggregateCard({ requiresRootSpanFields, children, ...layout }: TraceAggregateCardProps) {\n  const gate = useTraceAggregateGate({ requiresRootSpanFields });\n  if (gate.status === 'unavailable') return null;\n  if (gate.status === 'ready') return children(gate.scope);\n  return (\n    <ChartCard {...layout}>\n      {gate.status === 'loading' ? (\n        <MetricsCard.Loading />\n      ) : (\n        <MetricsCard.NoData\n          message={`Not available with a ${gate.unsupportedFields.map(f => FILTER_NAMES[f] ?? f).join(' or ')} filter.`}\n        />\n      )}\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAM,eAAuC;CAC3C,aAAa;CACb,WAAW;CACX,cAAc;AAChB;;;;;AAaA,SAAgB,mBAAmB,EAAE,wBAAwB,UAAU,GAAG,UAAmC;CAC3G,MAAM,OAAOA,0DAAAA,sBAAsB,EAAE,uBAAuB,CAAC;CAC7D,IAAI,KAAK,WAAW,eAAe,OAAO;CAC1C,IAAI,KAAK,WAAW,SAAS,OAAO,SAAS,KAAK,KAAK;CACvD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EACZ,UAAA,KAAK,WAAW,YACf,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb,CAAsB,CAAA,IAEtB,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,QAAb,EACE,SAAS,wBAAwB,KAAK,kBAAkB,KAAI,MAAK,aAAa,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,UACrG,CAAA;CAEM,CAAA;AAEf"}
+{"version":3,"file":"trace-aggregate-card.cjs.js","names":["useTraceAggregateGate","ChartCard","MetricsCard"],"sources":["../../../../src/domains/metrics/components/trace-aggregate-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useTraceAggregateGate } from '../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../hooks/use-metrics-trace-aggregate';\nimport { ChartCard } from './chart-card';\nimport type { ChartCardProps } from './chart-card';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\nconst FILTER_NAMES: Record<string, string> = {\n  serviceName: 'service',\n  requestId: 'request ID',\n  experimentId: 'experiment',\n};\n\nexport type TraceAggregateCardProps = Pick<ChartCardProps, 'title' | 'className'> & {\n  /** The card groups or filters on the root span's type, which needs `traceQueryRootSpanFields`. */\n  requiresRootSpanFields?: boolean;\n  /** The loaded card, rendered once the server can answer it and the page filters apply to traces. */\n  children: (scope: TraceAggregateScope) => ReactNode;\n};\n\n/**\n * Gates a card built on `aggregateTraces()`: hidden on a server without it, a note when a page\n * filter has no trace equivalent (rather than numbers that ignore the filter), else the card.\n */\nexport function TraceAggregateCard({ requiresRootSpanFields, children, ...layout }: TraceAggregateCardProps) {\n  const gate = useTraceAggregateGate({ requiresRootSpanFields });\n  if (gate.status === 'unavailable') return null;\n  if (gate.status === 'ready') return children(gate.scope);\n  return (\n    // Keeps the legend row its loaded chart will have, so the card doesn't shift when it loads.\n    <ChartCard {...layout} toolbar={null}>\n      {gate.status === 'loading' ? (\n        <MetricsCard.Loading />\n      ) : (\n        <MetricsCard.NoData\n          message={`Not available with a ${gate.unsupportedFields.map(f => FILTER_NAMES[f] ?? f).join(' or ')} filter.`}\n        />\n      )}\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAM,eAAuC;CAC3C,aAAa;CACb,WAAW;CACX,cAAc;AAChB;;;;;AAaA,SAAgB,mBAAmB,EAAE,wBAAwB,UAAU,GAAG,UAAmC;CAC3G,MAAM,OAAOA,0DAAAA,sBAAsB,EAAE,uBAAuB,CAAC;CAC7D,IAAI,KAAK,WAAW,eAAe,OAAO;CAC1C,IAAI,KAAK,WAAW,SAAS,OAAO,SAAS,KAAK,KAAK;CACvD,OAEE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EAAQ,SAAS;EAC7B,UAAA,KAAK,WAAW,YACf,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb,CAAsB,CAAA,IAEtB,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,QAAb,EACE,SAAS,wBAAwB,KAAK,kBAAkB,KAAI,MAAK,aAAa,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,UACrG,CAAA;CAEM,CAAA;AAEf"}

package/dist/domains/metrics/components/trace-aggregate-card.es.js

@@ -1,6 +1,6 @@
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
-import { ChartCard } from "./chart-card.es.js";
 import { useTraceAggregateGate } from "../hooks/use-metrics-trace-aggregate.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
+import { ChartCard } from "./chart-card.es.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/trace-aggregate-card.tsx
 var FILTER_NAMES = {
@@ -18,6 +18,7 @@ function TraceAggregateCard({ requiresRootSpanFields, children, ...layout }) {
 	if (gate.status === "ready") return children(gate.scope);
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
+		toolbar: null,
 		children: gate.status === "loading" ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: `Not available with a ${gate.unsupportedFields.map((f) => FILTER_NAMES[f] ?? f).join(" or ")} filter.` })
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"trace-aggregate-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/trace-aggregate-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useTraceAggregateGate } from '../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../hooks/use-metrics-trace-aggregate';\nimport { ChartCard } from './chart-card';\nimport type { ChartCardProps } from './chart-card';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\nconst FILTER_NAMES: Record<string, string> = {\n  serviceName: 'service',\n  requestId: 'request ID',\n  experimentId: 'experiment',\n};\n\nexport type TraceAggregateCardProps = Pick<ChartCardProps, 'title' | 'description' | 'className'> & {\n  /** The card groups or filters on the root span's type, which needs `traceQueryRootSpanFields`. */\n  requiresRootSpanFields?: boolean;\n  /** The loaded card, rendered once the server can answer it and the page filters apply to traces. */\n  children: (scope: TraceAggregateScope) => ReactNode;\n};\n\n/**\n * Gates a card built on `aggregateTraces()`: hidden on a server without it, a note when a page\n * filter has no trace equivalent (rather than numbers that ignore the filter), else the card.\n */\nexport function TraceAggregateCard({ requiresRootSpanFields, children, ...layout }: TraceAggregateCardProps) {\n  const gate = useTraceAggregateGate({ requiresRootSpanFields });\n  if (gate.status === 'unavailable') return null;\n  if (gate.status === 'ready') return children(gate.scope);\n  return (\n    <ChartCard {...layout}>\n      {gate.status === 'loading' ? (\n        <MetricsCard.Loading />\n      ) : (\n        <MetricsCard.NoData\n          message={`Not available with a ${gate.unsupportedFields.map(f => FILTER_NAMES[f] ?? f).join(' or ')} filter.`}\n        />\n      )}\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAuC;CAC3C,aAAa;CACb,WAAW;CACX,cAAc;AAChB;;;;;AAaA,SAAgB,mBAAmB,EAAE,wBAAwB,UAAU,GAAG,UAAmC;CAC3G,MAAM,OAAO,sBAAsB,EAAE,uBAAuB,CAAC;CAC7D,IAAI,KAAK,WAAW,eAAe,OAAO;CAC1C,IAAI,KAAK,WAAW,SAAS,OAAO,SAAS,KAAK,KAAK;CACvD,OACE,oBAAC,WAAD;EAAW,GAAI;EACZ,UAAA,KAAK,WAAW,YACf,oBAAC,YAAY,SAAb,CAAsB,CAAA,IAEtB,oBAAC,YAAY,QAAb,EACE,SAAS,wBAAwB,KAAK,kBAAkB,KAAI,MAAK,aAAa,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,UACrG,CAAA;CAEM,CAAA;AAEf"}
+{"version":3,"file":"trace-aggregate-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/trace-aggregate-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useTraceAggregateGate } from '../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../hooks/use-metrics-trace-aggregate';\nimport { ChartCard } from './chart-card';\nimport type { ChartCardProps } from './chart-card';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\nconst FILTER_NAMES: Record<string, string> = {\n  serviceName: 'service',\n  requestId: 'request ID',\n  experimentId: 'experiment',\n};\n\nexport type TraceAggregateCardProps = Pick<ChartCardProps, 'title' | 'className'> & {\n  /** The card groups or filters on the root span's type, which needs `traceQueryRootSpanFields`. */\n  requiresRootSpanFields?: boolean;\n  /** The loaded card, rendered once the server can answer it and the page filters apply to traces. */\n  children: (scope: TraceAggregateScope) => ReactNode;\n};\n\n/**\n * Gates a card built on `aggregateTraces()`: hidden on a server without it, a note when a page\n * filter has no trace equivalent (rather than numbers that ignore the filter), else the card.\n */\nexport function TraceAggregateCard({ requiresRootSpanFields, children, ...layout }: TraceAggregateCardProps) {\n  const gate = useTraceAggregateGate({ requiresRootSpanFields });\n  if (gate.status === 'unavailable') return null;\n  if (gate.status === 'ready') return children(gate.scope);\n  return (\n    // Keeps the legend row its loaded chart will have, so the card doesn't shift when it loads.\n    <ChartCard {...layout} toolbar={null}>\n      {gate.status === 'loading' ? (\n        <MetricsCard.Loading />\n      ) : (\n        <MetricsCard.NoData\n          message={`Not available with a ${gate.unsupportedFields.map(f => FILTER_NAMES[f] ?? f).join(' or ')} filter.`}\n        />\n      )}\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAuC;CAC3C,aAAa;CACb,WAAW;CACX,cAAc;AAChB;;;;;AAaA,SAAgB,mBAAmB,EAAE,wBAAwB,UAAU,GAAG,UAAmC;CAC3G,MAAM,OAAO,sBAAsB,EAAE,uBAAuB,CAAC;CAC7D,IAAI,KAAK,WAAW,eAAe,OAAO;CAC1C,IAAI,KAAK,WAAW,SAAS,OAAO,SAAS,KAAK,KAAK;CACvD,OAEE,oBAAC,WAAD;EAAW,GAAI;EAAQ,SAAS;EAC7B,UAAA,KAAK,WAAW,YACf,oBAAC,YAAY,SAAb,CAAsB,CAAA,IAEtB,oBAAC,YAAY,QAAb,EACE,SAAS,wBAAwB,KAAK,kBAAkB,KAAI,MAAK,aAAa,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,UACrG,CAAA;CAEM,CAAA;AAEf"}

package/dist/domains/metrics/components/trace-volume-card.cjs.js

@@ -1,11 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.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_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_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
 const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_ShareBar = require("../../../ShareBar-3Z5np-NY.cjs");
 let react = require("react");
@@ -20,6 +19,25 @@ var ROOT_ENTITY = {
 	tools: _mastra_core_observability.EntityType.TOOL
 };
 var COLUMNS = [{ label: "Error rate" }];
+var TITLE = {
+	agents: "Agent runs",
+	workflows: "Workflow runs",
+	tools: "Tool calls"
+};
+var VIEWS = [
+	{
+		value: "agents",
+		label: TITLE.agents
+	},
+	{
+		value: "workflows",
+		label: TITLE.workflows
+	},
+	{
+		value: "tools",
+		label: TITLE.tools
+	}
+];
 var errorRate = (errors, runs) => require_domains_metrics_lib_chart_format.formatPercent(runs > 0 ? errors / runs : 0);
 function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 	const [entity, setEntity] = (0, react.useState)("agents");
@@ -28,12 +46,11 @@ function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 		...require_domains_metrics_hooks_use_metrics_filters.useMetricsFilters(),
 		queryOptions: { placeholderData: _tanstack_react_query.keepPreviousData }
 	});
-	const byEntity = {
+	const source = {
 		agents: volume.data?.agentData ?? [],
 		workflows: volume.data?.workflowData ?? [],
 		tools: volume.data?.toolData ?? []
-	};
-	const source = byEntity[entity];
+	}[entity];
 	const rows = source.map((r) => ({
 		key: r.name,
 		label: r.name,
@@ -43,33 +60,15 @@ function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 		onClick: onEntityClick && (() => onEntityClick(rootEntityType, r.name))
 	}));
 	const errorsOf = new Map(source.map((r) => [r.name, r.errors]));
-	const total = [
-		...byEntity.agents,
-		...byEntity.workflows,
-		...byEntity.tools
-	].reduce((sum, r) => sum + r.completed + r.errors, 0);
+	const total = source.reduce((sum, r) => sum + r.completed + r.errors, 0);
 	const layout = {
-		title: "Trace volume",
-		description: "Runs and calls, with error rate.",
-		actions: (onViewTraces || onViewErrors) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: () => onViewTraces(rootEntityType) }), onViewErrors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenErrorsInLogsButton, { onClick: () => onViewErrors(rootEntityType) })] }),
-		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__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 || onViewErrors) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: () => onViewTraces(rootEntityType) }), onViewErrors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenErrorsInLogsButton, { onClick: () => onViewErrors(rootEntityType) })] })
 	};
 	if (volume.isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
@@ -77,11 +76,8 @@ function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 	});
 	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: require_domains_metrics_lib_chart_format.formatCount(total),
-			label: "runs and calls",
-			isLoading: volume.isLoading
-		}),
+		total: require_domains_metrics_lib_chart_format.formatCount(total),
+		isLoading: volume.isLoading,
 		isUpdating: volume.isPlaceholderData,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_area.ChartArea, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ShareBar.ShareBar, {
 			rows,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-volume-card.cjs.js","names":["EntityType","formatPercent","useState","useTraceVolumeMetrics","useMetricsFilters","keepPreviousData","formatCount","_Fragment","OpenInTracesButton","OpenErrorsInLogsButton","MetricsCard","ChartCard","ChartCardError","ChartArea","ShareBar","CHART_COLORS"],"sources":["../../../../src/domains/metrics/components/trace-volume-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTraceVolumeMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatPercent } from '../lib/chart-format';\nimport { OpenErrorsInLogsButton, 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 { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype Entity = 'agents' | 'workflows' | 'tools';\n\nconst ROOT_ENTITY: Record<Entity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\nconst COLUMNS = [{ label: 'Error rate' }];\n\nconst errorRate = (errors: number, runs: number) => formatPercent(runs > 0 ? errors / runs : 0);\n\n/** Runs per agent, workflow or tool, ranked, with each one's error rate; a row opens its traces. */\nexport type TraceVolumeCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called from the \"View errors in Logs\" button with the entity type of the open tab. */\n  onViewErrors?: (entityType: EntityType) => void;\n  /** Called with the entity type of the open tab and the clicked row's name. */\n  onEntityClick?: (entityType: EntityType, name: string) => void;\n};\n\nexport function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }: TraceVolumeCardProps) {\n  const [entity, setEntity] = useState<Entity>('agents');\n  const rootEntityType = ROOT_ENTITY[entity];\n  const volume = useTraceVolumeMetrics({\n    ...useMetricsFilters(),\n    queryOptions: { placeholderData: keepPreviousData },\n  });\n  const byEntity = {\n    agents: volume.data?.agentData ?? [],\n    workflows: volume.data?.workflowData ?? [],\n    tools: volume.data?.toolData ?? [],\n  };\n  const source = byEntity[entity];\n  const rows: ShareBarRow[] = source.map(r => ({\n    key: r.name,\n    label: r.name,\n    share: r.completed + r.errors,\n    value: formatCount(r.completed + r.errors),\n    cells: [errorRate(r.errors, r.completed + r.errors)],\n    onClick: onEntityClick && (() => onEntityClick(rootEntityType, r.name)),\n  }));\n  const errorsOf = new Map(source.map(r => [r.name, r.errors]));\n  const total = [...byEntity.agents, ...byEntity.workflows, ...byEntity.tools].reduce(\n    (sum, r) => sum + r.completed + r.errors,\n    0,\n  );\n\n  const layout = {\n    title: 'Trace volume',\n    description: 'Runs and calls, with error rate.',\n    actions: (onViewTraces || onViewErrors) && (\n      <>\n        {onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(rootEntityType)} />}\n        {onViewErrors && <OpenErrorsInLogsButton onClick={() => onViewErrors(rootEntityType)} />}\n      </>\n    ),\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsCard.Tabs<Entity> 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 (volume.isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={<MetricsCard.Summary value={formatCount(total)} label=\"runs and calls\" isLoading={volume.isLoading} />}\n      isUpdating={volume.isPlaceholderData}\n    >\n      <ChartArea>\n        <ShareBar\n          key={entity}\n          rows={rows}\n          columns={COLUMNS}\n          valueLabel=\"Runs\"\n          color={CHART_COLORS.sky}\n          other={rest => {\n            const errors = rest.reduce((sum, r) => sum + (errorsOf.get(r.key) ?? 0), 0);\n            const runs = rest.reduce((sum, r) => sum + r.share, 0);\n            return { value: formatCount(runs), cells: [errorRate(errors, runs)] };\n          }}\n          emptyState=\"No runs in this range.\"\n          isLoading={volume.isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"trace-volume-card.cjs.js","names":["EntityType","formatPercent","useState","useTraceVolumeMetrics","useMetricsFilters","keepPreviousData","formatCount","_Fragment","OpenInTracesButton","OpenErrorsInLogsButton","ChartCard","ChartCardError","ChartArea","ShareBar","CHART_COLORS"],"sources":["../../../../src/domains/metrics/components/trace-volume-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTraceVolumeMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatPercent } from '../lib/chart-format';\nimport { OpenErrorsInLogsButton, OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype Entity = 'agents' | 'workflows' | 'tools';\n\nconst ROOT_ENTITY: Record<Entity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\nconst COLUMNS = [{ label: 'Error rate' }];\n\nconst TITLE: Record<Entity, string> = {\n  agents: 'Agent runs',\n  workflows: 'Workflow runs',\n  tools: 'Tool calls',\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 errorRate = (errors: number, runs: number) => formatPercent(runs > 0 ? errors / runs : 0);\n\n/** Runs per agent, workflow or tool, ranked, with each one's error rate; a row opens its traces. */\nexport type TraceVolumeCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called from the \"View errors in Logs\" button with the entity type of the open tab. */\n  onViewErrors?: (entityType: EntityType) => void;\n  /** Called with the entity type of the open tab and the clicked row's name. */\n  onEntityClick?: (entityType: EntityType, name: string) => void;\n};\n\nexport function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }: TraceVolumeCardProps) {\n  const [entity, setEntity] = useState<Entity>('agents');\n  const rootEntityType = ROOT_ENTITY[entity];\n  const volume = useTraceVolumeMetrics({\n    ...useMetricsFilters(),\n    queryOptions: { placeholderData: keepPreviousData },\n  });\n  const byEntity = {\n    agents: volume.data?.agentData ?? [],\n    workflows: volume.data?.workflowData ?? [],\n    tools: volume.data?.toolData ?? [],\n  };\n  const source = byEntity[entity];\n  const rows: ShareBarRow[] = source.map(r => ({\n    key: r.name,\n    label: r.name,\n    share: r.completed + r.errors,\n    value: formatCount(r.completed + r.errors),\n    cells: [errorRate(r.errors, r.completed + r.errors)],\n    onClick: onEntityClick && (() => onEntityClick(rootEntityType, r.name)),\n  }));\n  const errorsOf = new Map(source.map(r => [r.name, r.errors]));\n  const total = source.reduce((sum, r) => sum + r.completed + r.errors, 0);\n\n  const layout = {\n    title: TITLE[entity],\n    titleMenu: { value: entity, onValueChange: setEntity, options: VIEWS },\n    actions: (onViewTraces || onViewErrors) && (\n      <>\n        {onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(rootEntityType)} />}\n        {onViewErrors && <OpenErrorsInLogsButton onClick={() => onViewErrors(rootEntityType)} />}\n      </>\n    ),\n  };\n\n  if (volume.isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      total={formatCount(total)}\n      isLoading={volume.isLoading}\n      isUpdating={volume.isPlaceholderData}\n    >\n      <ChartArea>\n        <ShareBar\n          key={entity}\n          rows={rows}\n          columns={COLUMNS}\n          valueLabel=\"Runs\"\n          color={CHART_COLORS.sky}\n          other={rest => {\n            const errors = rest.reduce((sum, r) => sum + (errorsOf.get(r.key) ?? 0), 0);\n            const runs = rest.reduce((sum, r) => sum + r.share, 0);\n            return { value: formatCount(runs), cells: [errorRate(errors, runs)] };\n          }}\n          emptyState=\"No runs in this range.\"\n          isLoading={volume.isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/metrics/components/trace-volume-card.es.js

@@ -1,10 +1,9 @@
-import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { formatCount, formatPercent } from "../lib/chart-format.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { OpenErrorsInLogsButton, OpenInTracesButton } from "./card-action-buttons.es.js";
 import { t as ShareBar } from "../../../ShareBar-D6dWWl4C.js";
 import { useState } from "react";
@@ -19,6 +18,25 @@ var ROOT_ENTITY = {
 	tools: EntityType.TOOL
 };
 var COLUMNS = [{ label: "Error rate" }];
+var TITLE = {
+	agents: "Agent runs",
+	workflows: "Workflow runs",
+	tools: "Tool calls"
+};
+var VIEWS = [
+	{
+		value: "agents",
+		label: TITLE.agents
+	},
+	{
+		value: "workflows",
+		label: TITLE.workflows
+	},
+	{
+		value: "tools",
+		label: TITLE.tools
+	}
+];
 var errorRate = (errors, runs) => formatPercent(runs > 0 ? errors / runs : 0);
 function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 	const [entity, setEntity] = useState("agents");
@@ -27,12 +45,11 @@ function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 		...useMetricsFilters(),
 		queryOptions: { placeholderData: keepPreviousData }
 	});
-	const byEntity = {
+	const source = {
 		agents: volume.data?.agentData ?? [],
 		workflows: volume.data?.workflowData ?? [],
 		tools: volume.data?.toolData ?? []
-	};
-	const source = byEntity[entity];
+	}[entity];
 	const rows = source.map((r) => ({
 		key: r.name,
 		label: r.name,
@@ -42,33 +59,15 @@ function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 		onClick: onEntityClick && (() => onEntityClick(rootEntityType, r.name))
 	}));
 	const errorsOf = new Map(source.map((r) => [r.name, r.errors]));
-	const total = [
-		...byEntity.agents,
-		...byEntity.workflows,
-		...byEntity.tools
-	].reduce((sum, r) => sum + r.completed + r.errors, 0);
+	const total = source.reduce((sum, r) => sum + r.completed + r.errors, 0);
 	const layout = {
-		title: "Trace volume",
-		description: "Runs and calls, with error rate.",
-		actions: (onViewTraces || onViewErrors) && /* @__PURE__ */ jsxs(Fragment$1, { children: [onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: () => onViewTraces(rootEntityType) }), onViewErrors && /* @__PURE__ */ jsx(OpenErrorsInLogsButton, { onClick: () => onViewErrors(rootEntityType) })] }),
-		toolbar: /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__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 || onViewErrors) && /* @__PURE__ */ jsxs(Fragment$1, { children: [onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: () => onViewTraces(rootEntityType) }), onViewErrors && /* @__PURE__ */ jsx(OpenErrorsInLogsButton, { onClick: () => onViewErrors(rootEntityType) })] })
 	};
 	if (volume.isError) return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
@@ -76,11 +75,8 @@ function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
 	});
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ jsx(MetricsCard.Summary, {
-			value: formatCount(total),
-			label: "runs and calls",
-			isLoading: volume.isLoading
-		}),
+		total: formatCount(total),
+		isLoading: volume.isLoading,
 		isUpdating: volume.isPlaceholderData,
 		children: /* @__PURE__ */ jsx(ChartArea, { children: /* @__PURE__ */ jsx(ShareBar, {
 			rows,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-volume-card.es.js","names":["_Fragment"],"sources":["../../../../src/domains/metrics/components/trace-volume-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTraceVolumeMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatPercent } from '../lib/chart-format';\nimport { OpenErrorsInLogsButton, 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 { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype Entity = 'agents' | 'workflows' | 'tools';\n\nconst ROOT_ENTITY: Record<Entity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\nconst COLUMNS = [{ label: 'Error rate' }];\n\nconst errorRate = (errors: number, runs: number) => formatPercent(runs > 0 ? errors / runs : 0);\n\n/** Runs per agent, workflow or tool, ranked, with each one's error rate; a row opens its traces. */\nexport type TraceVolumeCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called from the \"View errors in Logs\" button with the entity type of the open tab. */\n  onViewErrors?: (entityType: EntityType) => void;\n  /** Called with the entity type of the open tab and the clicked row's name. */\n  onEntityClick?: (entityType: EntityType, name: string) => void;\n};\n\nexport function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }: TraceVolumeCardProps) {\n  const [entity, setEntity] = useState<Entity>('agents');\n  const rootEntityType = ROOT_ENTITY[entity];\n  const volume = useTraceVolumeMetrics({\n    ...useMetricsFilters(),\n    queryOptions: { placeholderData: keepPreviousData },\n  });\n  const byEntity = {\n    agents: volume.data?.agentData ?? [],\n    workflows: volume.data?.workflowData ?? [],\n    tools: volume.data?.toolData ?? [],\n  };\n  const source = byEntity[entity];\n  const rows: ShareBarRow[] = source.map(r => ({\n    key: r.name,\n    label: r.name,\n    share: r.completed + r.errors,\n    value: formatCount(r.completed + r.errors),\n    cells: [errorRate(r.errors, r.completed + r.errors)],\n    onClick: onEntityClick && (() => onEntityClick(rootEntityType, r.name)),\n  }));\n  const errorsOf = new Map(source.map(r => [r.name, r.errors]));\n  const total = [...byEntity.agents, ...byEntity.workflows, ...byEntity.tools].reduce(\n    (sum, r) => sum + r.completed + r.errors,\n    0,\n  );\n\n  const layout = {\n    title: 'Trace volume',\n    description: 'Runs and calls, with error rate.',\n    actions: (onViewTraces || onViewErrors) && (\n      <>\n        {onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(rootEntityType)} />}\n        {onViewErrors && <OpenErrorsInLogsButton onClick={() => onViewErrors(rootEntityType)} />}\n      </>\n    ),\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsCard.Tabs<Entity> 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 (volume.isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={<MetricsCard.Summary value={formatCount(total)} label=\"runs and calls\" isLoading={volume.isLoading} />}\n      isUpdating={volume.isPlaceholderData}\n    >\n      <ChartArea>\n        <ShareBar\n          key={entity}\n          rows={rows}\n          columns={COLUMNS}\n          valueLabel=\"Runs\"\n          color={CHART_COLORS.sky}\n          other={rest => {\n            const errors = rest.reduce((sum, r) => sum + (errorsOf.get(r.key) ?? 0), 0);\n            const runs = rest.reduce((sum, r) => sum + r.share, 0);\n            return { value: formatCount(runs), cells: [errorRate(errors, runs)] };\n          }}\n          emptyState=\"No runs in this range.\"\n          isLoading={volume.isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"trace-volume-card.es.js","names":["_Fragment"],"sources":["../../../../src/domains/metrics/components/trace-volume-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTraceVolumeMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatPercent } from '../lib/chart-format';\nimport { OpenErrorsInLogsButton, OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype Entity = 'agents' | 'workflows' | 'tools';\n\nconst ROOT_ENTITY: Record<Entity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\nconst COLUMNS = [{ label: 'Error rate' }];\n\nconst TITLE: Record<Entity, string> = {\n  agents: 'Agent runs',\n  workflows: 'Workflow runs',\n  tools: 'Tool calls',\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 errorRate = (errors: number, runs: number) => formatPercent(runs > 0 ? errors / runs : 0);\n\n/** Runs per agent, workflow or tool, ranked, with each one's error rate; a row opens its traces. */\nexport type TraceVolumeCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called from the \"View errors in Logs\" button with the entity type of the open tab. */\n  onViewErrors?: (entityType: EntityType) => void;\n  /** Called with the entity type of the open tab and the clicked row's name. */\n  onEntityClick?: (entityType: EntityType, name: string) => void;\n};\n\nexport function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }: TraceVolumeCardProps) {\n  const [entity, setEntity] = useState<Entity>('agents');\n  const rootEntityType = ROOT_ENTITY[entity];\n  const volume = useTraceVolumeMetrics({\n    ...useMetricsFilters(),\n    queryOptions: { placeholderData: keepPreviousData },\n  });\n  const byEntity = {\n    agents: volume.data?.agentData ?? [],\n    workflows: volume.data?.workflowData ?? [],\n    tools: volume.data?.toolData ?? [],\n  };\n  const source = byEntity[entity];\n  const rows: ShareBarRow[] = source.map(r => ({\n    key: r.name,\n    label: r.name,\n    share: r.completed + r.errors,\n    value: formatCount(r.completed + r.errors),\n    cells: [errorRate(r.errors, r.completed + r.errors)],\n    onClick: onEntityClick && (() => onEntityClick(rootEntityType, r.name)),\n  }));\n  const errorsOf = new Map(source.map(r => [r.name, r.errors]));\n  const total = source.reduce((sum, r) => sum + r.completed + r.errors, 0);\n\n  const layout = {\n    title: TITLE[entity],\n    titleMenu: { value: entity, onValueChange: setEntity, options: VIEWS },\n    actions: (onViewTraces || onViewErrors) && (\n      <>\n        {onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(rootEntityType)} />}\n        {onViewErrors && <OpenErrorsInLogsButton onClick={() => onViewErrors(rootEntityType)} />}\n      </>\n    ),\n  };\n\n  if (volume.isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      total={formatCount(total)}\n      isLoading={volume.isLoading}\n      isUpdating={volume.isPlaceholderData}\n    >\n      <ChartArea>\n        <ShareBar\n          key={entity}\n          rows={rows}\n          columns={COLUMNS}\n          valueLabel=\"Runs\"\n          color={CHART_COLORS.sky}\n          other={rest => {\n            const errors = rest.reduce((sum, r) => sum + (errorsOf.get(r.key) ?? 0), 0);\n            const runs = rest.reduce((sum, r) => sum + r.share, 0);\n            return { value: formatCount(runs), cells: [errorRate(errors, runs)] };\n          }}\n          emptyState=\"No runs in this range.\"\n          isLoading={volume.isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,cAA0C;CAC9C,QAAQ,WAAW;CACnB,WAAW,WAAW;CACtB,OAAO,WAAW;AACpB;AACA,IAAM,UAAU,CAAC,EAAE,OAAO,aAAa,CAAC;AAExC,IAAM,QAAgC;CACpC,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,aAAa,QAAgB,SAAiB,cAAc,OAAO,IAAI,SAAS,OAAO,CAAC;AAY9F,SAAgB,gBAAgB,EAAE,cAAc,cAAc,iBAAuC;CACnG,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ;CACrD,MAAM,iBAAiB,YAAY;CACnC,MAAM,SAAS,sBAAsB;EACnC,GAAG,kBAAkB;EACrB,cAAc,EAAE,iBAAiB,iBAAiB;CACpD,CAAC;CAMD,MAAM,SAAS;EAJb,QAAQ,OAAO,MAAM,aAAa,CAAC;EACnC,WAAW,OAAO,MAAM,gBAAgB,CAAC;EACzC,OAAO,OAAO,MAAM,YAAY,CAAC;CAEpB,EAAS;CACxB,MAAM,OAAsB,OAAO,KAAI,OAAM;EAC3C,KAAK,EAAE;EACP,OAAO,EAAE;EACT,OAAO,EAAE,YAAY,EAAE;EACvB,OAAO,YAAY,EAAE,YAAY,EAAE,MAAM;EACzC,OAAO,CAAC,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC;EACnD,SAAS,wBAAwB,cAAc,gBAAgB,EAAE,IAAI;CACvE,EAAE;CACF,MAAM,WAAW,IAAI,IAAI,OAAO,KAAI,MAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5D,MAAM,QAAQ,OAAO,QAAQ,KAAK,MAAM,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;CAEvE,MAAM,SAAS;EACb,OAAO,MAAM;EACb,WAAW;GAAE,OAAO;GAAQ,eAAe;GAAW,SAAS;EAAM;EACrE,UAAU,gBAAgB,iBACxB,qBAAAA,YAAA,EAAA,UAAA,CACG,gBAAgB,oBAAC,oBAAD,EAAoB,eAAe,aAAa,cAAc,EAAI,CAAA,GAClF,gBAAgB,oBAAC,wBAAD,EAAwB,eAAe,aAAa,cAAc,EAAI,CAAA,CACvF,EAAA,CAAA;CAEN;CAEA,IAAI,OAAO,SACT,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,OAAO,YAAY,KAAK;EACxB,WAAW,OAAO;EAClB,YAAY,OAAO;EAEnB,UAAA,oBAAC,WAAD,EAAA,UACE,oBAAC,UAAD;GAEQ;GACN,SAAS;GACT,YAAW;GACX,OAAO,aAAa;GACpB,QAAO,SAAQ;IACb,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,OAAO,SAAS,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1E,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;IACrD,OAAO;KAAE,OAAO,YAAY,IAAI;KAAG,OAAO,CAAC,UAAU,QAAQ,IAAI,CAAC;IAAE;GACtE;GACA,YAAW;GACX,WAAW,OAAO;EACnB,GAZM,MAYN,EACQ,CAAA;CACF,CAAA;AAEf"}