@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const domains_metrics_hooks_useMetricsActivity = require('../hooks/use-metrics-activity.cjs.js');
+const domains_metrics_hooks_useMetricsFilters = require('../hooks/use-metrics-filters.cjs.js');
+const domains_metrics_lib_chartAxis = require('../lib/chart-axis.cjs.js');
+const domains_metrics_lib_chartColors = require('../lib/chart-colors.cjs.js');
+const domains_metrics_lib_chartFormat = require('../lib/chart-format.cjs.js');
+const domains_metrics_lib_metricsBuckets = require('../lib/metrics-buckets.cjs.js');
+const domains_metrics_components_cardActionButtons = require('./card-action-buttons.cjs.js');
+const domains_metrics_components_chartArea = require('./chart-area.cjs.js');
+const domains_metrics_components_chartCard = require('./chart-card.cjs.js');
+const domains_metrics_components_chartCardError = require('./chart-card-error.cjs.js');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+const metricsLineChartTooltip = require('../../../metrics-line-chart-tooltip-BSzXdRFR.cjs');
+const metricsStackedBarChart = require('../../../metrics-stacked-bar-chart-BKhaGInr.cjs');
+
+const TOKEN_SERIES = [
+  { dataKey: "input", label: "Input", color: domains_metrics_lib_chartColors.CHART_COLORS.green },
+  { dataKey: "cacheRead", label: "Cache read", color: domains_metrics_lib_chartColors.CHART_COLORS.violet },
+  { dataKey: "output", label: "Output", color: domains_metrics_lib_chartColors.CHART_COLORS.sky }
+];
+const COST_SERIES = [{ dataKey: "cost", label: "Cost", color: domains_metrics_lib_chartColors.CHART_COLORS.green }];
+const axisUsd = (value) => `$${value.toFixed(value < 10 ? 1 : 0)}`;
+function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
+  const [view, setView] = React.useState("tokens");
+  const { data = [], isLoading, isError, isPlaceholderData } = domains_metrics_hooks_useMetricsActivity.useMetricsActivity();
+  const { timestamp } = domains_metrics_hooks_useMetricsFilters.useMetricsFilters();
+  const { stepHours } = domains_metrics_lib_metricsBuckets.bucketPlan(timestamp.start, timestamp.end);
+  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);
+  const cost = data.reduce((sum, b) => sum + b.cost, 0);
+  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__ */ jsxRuntime.jsx(domains_metrics_components_cardActionButtons.OpenInTracesButton, { onClick: onViewTraces }),
+    toolbar: /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Toolbar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(metricsLineChartTooltip.MetricsLineChartLegend, { series }),
+      /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Tabs, { value: view, onValueChange: setView, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "tokens", children: "Tokens" }),
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "cost", children: "Cost" })
+      ] })
+    ] })
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCard.ChartCard, { ...layout, children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCardError.ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_chartCard.ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsCard.MetricsCard.Summary,
+        {
+          value: isTokens ? domains_metrics_lib_chartFormat.formatCount(tokens) : domains_metrics_lib_chartFormat.formatUsd(cost),
+          label: isTokens ? "tokens" : "cost",
+          isLoading
+        }
+      ),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartArea.ChartArea, { isEmpty: !isLoading && tokens === 0 && cost === 0, emptyMessage: "No model calls in this range.", children: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsStackedBarChart.MetricsStackedBarChart,
+        {
+          data,
+          series,
+          height: "fill",
+          showLegend: false,
+          showYAxis: false,
+          valueFormatter: isTokens ? domains_metrics_lib_chartFormat.formatCount : domains_metrics_lib_chartFormat.formatUsd,
+          axisFormatter: isTokens ? domains_metrics_lib_chartFormat.formatAxisCount : axisUsd,
+          onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(domains_metrics_lib_metricsBuckets.bucketWindow(Number(row.ts), stepHours))),
+          isLoading,
+          ...domains_metrics_lib_chartAxis.BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+exports.TokenUsageCard = TokenUsageCard;
+//# sourceMappingURL=token-usage-card.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"token-usage-card.cjs.js","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, 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 axisUsd = (value: number) => `$${value.toFixed(value < 10 ? 1 : 0)}`;\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          showYAxis={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : axisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useState","useMetricsActivity","useMetricsFilters","bucketPlan","jsx","OpenInTracesButton","jsxs","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatCount","formatUsd","ChartArea","MetricsStackedBarChart","formatAxisCount","bucketWindow","BUCKET_AXIS"],"mappings":"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"}

package/dist/domains/metrics/components/token-usage-card.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/metrics/components/token-usage-card'
+export {}

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

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useMetricsActivity } from '../hooks/use-metrics-activity.es.js';
+import { useMetricsFilters } from '../hooks/use-metrics-filters.es.js';
+import { BUCKET_AXIS } from '../lib/chart-axis.es.js';
+import { CHART_COLORS } from '../lib/chart-colors.es.js';
+import { formatAxisCount, formatCount, formatUsd } from '../lib/chart-format.es.js';
+import { bucketPlan, bucketWindow } from '../lib/metrics-buckets.es.js';
+import { OpenInTracesButton } from './card-action-buttons.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 { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+import { M as MetricsLineChartLegend } from '../../../metrics-line-chart-tooltip-bgRf6KTb.js';
+import { M as MetricsStackedBarChart } from '../../../metrics-stacked-bar-chart-3MKRp0RI.js';
+
+const TOKEN_SERIES = [
+  { dataKey: "input", label: "Input", color: CHART_COLORS.green },
+  { dataKey: "cacheRead", label: "Cache read", color: CHART_COLORS.violet },
+  { dataKey: "output", label: "Output", color: CHART_COLORS.sky }
+];
+const COST_SERIES = [{ dataKey: "cost", label: "Cost", color: CHART_COLORS.green }];
+const axisUsd = (value) => `$${value.toFixed(value < 10 ? 1 : 0)}`;
+function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
+  const [view, setView] = useState("tokens");
+  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();
+  const { timestamp } = useMetricsFilters();
+  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);
+  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);
+  const cost = data.reduce((sum, b) => sum + b.cost, 0);
+  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, { value: view, onValueChange: setView, children: [
+        /* @__PURE__ */ jsx(MetricsCard.Tab, { value: "tokens", children: "Tokens" }),
+        /* @__PURE__ */ jsx(MetricsCard.Tab, { value: "cost", children: "Cost" })
+      ] })
+    ] })
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsx(ChartCard, { ...layout, children: /* @__PURE__ */ jsx(ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsx(
+        MetricsCard.Summary,
+        {
+          value: isTokens ? formatCount(tokens) : formatUsd(cost),
+          label: isTokens ? "tokens" : "cost",
+          isLoading
+        }
+      ),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsx(ChartArea, { isEmpty: !isLoading && tokens === 0 && cost === 0, emptyMessage: "No model calls in this range.", children: /* @__PURE__ */ jsx(
+        MetricsStackedBarChart,
+        {
+          data,
+          series,
+          height: "fill",
+          showLegend: false,
+          showYAxis: false,
+          valueFormatter: isTokens ? formatCount : formatUsd,
+          axisFormatter: isTokens ? formatAxisCount : axisUsd,
+          onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours))),
+          isLoading,
+          ...BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+export { TokenUsageCard };
+//# sourceMappingURL=token-usage-card.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"token-usage-card.es.js","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, 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 axisUsd = (value: number) => `$${value.toFixed(value < 10 ? 1 : 0)}`;\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          showYAxis={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : axisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const observability = require('@mastra/core/observability');
+const metrics = require('@mastra/react/hooks/metrics');
+const reactQuery = require('@tanstack/react-query');
+const React = require('react');
+const domains_metrics_hooks_useMetricsFilters = require('../hooks/use-metrics-filters.cjs.js');
+const domains_metrics_lib_chartColors = require('../lib/chart-colors.cjs.js');
+const domains_metrics_lib_chartFormat = require('../lib/chart-format.cjs.js');
+const domains_metrics_components_cardActionButtons = require('./card-action-buttons.cjs.js');
+const domains_metrics_components_chartArea = require('./chart-area.cjs.js');
+const domains_metrics_components_chartCard = require('./chart-card.cjs.js');
+const domains_metrics_components_chartCardError = require('./chart-card-error.cjs.js');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+const metricsShareList = require('../../../metrics-share-list-DfM8dE7e.cjs');
+
+const ROOT_ENTITY = {
+  agents: observability.EntityType.AGENT,
+  workflows: observability.EntityType.WORKFLOW_RUN,
+  tools: observability.EntityType.TOOL
+};
+const COLUMNS = [{ label: "Error rate" }];
+const errorRate = (errors, runs) => domains_metrics_lib_chartFormat.formatPercent(runs > 0 ? errors / runs : 0);
+function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
+  const [entity, setEntity] = React.useState("agents");
+  const rootEntityType = ROOT_ENTITY[entity];
+  const volume = metrics.useTraceVolumeMetrics({
+    ...domains_metrics_hooks_useMetricsFilters.useMetricsFilters(),
+    queryOptions: { placeholderData: reactQuery.keepPreviousData }
+  });
+  const byEntity = {
+    agents: volume.data?.agentData ?? [],
+    workflows: volume.data?.workflowData ?? [],
+    tools: volume.data?.toolData ?? []
+  };
+  const source = byEntity[entity];
+  const rows = source.map((r) => ({
+    key: r.name,
+    label: r.name,
+    share: r.completed + r.errors,
+    value: domains_metrics_lib_chartFormat.formatCount(r.completed + r.errors),
+    cells: [errorRate(r.errors, r.completed + r.errors)],
+    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 layout = {
+    title: "Trace volume",
+    description: "Runs and calls, with error rate.",
+    actions: (onViewTraces || onViewErrors) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      onViewTraces && /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_cardActionButtons.OpenInTracesButton, { onClick: () => onViewTraces(rootEntityType) }),
+      onViewErrors && /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_cardActionButtons.OpenErrorsInLogsButton, { onClick: () => onViewErrors(rootEntityType) })
+    ] }),
+    toolbar: /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Toolbar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Tabs, { value: entity, onValueChange: setEntity, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(metricsShareList.MetricsShareList.Header, { columns: COLUMNS, valueLabel: "Runs" })
+    ] })
+  };
+  if (volume.isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCard.ChartCard, { ...layout, children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCardError.ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_chartCard.ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_lib_chartFormat.formatCount(total), label: "runs and calls", isLoading: volume.isLoading }),
+      isUpdating: volume.isPlaceholderData,
+      children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartArea.ChartArea, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsShareList.MetricsShareList,
+        {
+          rows,
+          columns: COLUMNS,
+          valueLabel: "Runs",
+          showHeader: false,
+          color: domains_metrics_lib_chartColors.CHART_COLORS.sky,
+          other: (rest) => {
+            const errors = rest.reduce((sum, r) => sum + (errorsOf.get(r.key) ?? 0), 0);
+            const runs = rest.reduce((sum, r) => sum + r.share, 0);
+            return { value: domains_metrics_lib_chartFormat.formatCount(runs), cells: [errorRate(errors, runs)] };
+          },
+          emptyState: "No runs in this range.",
+          isLoading: volume.isLoading
+        },
+        entity
+      ) })
+    }
+  );
+}
+
+exports.TraceVolumeCard = TraceVolumeCard;
+//# sourceMappingURL=trace-volume-card.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-volume-card.cjs.js","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 type { MetricsShareListRow } from '@/ds/components/MetricsShareList';\nimport { MetricsShareList } from '@/ds/components/MetricsShareList';\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: MetricsShareListRow[] = 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        <MetricsShareList.Header columns={COLUMNS} valueLabel=\"Runs\" />\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        <MetricsShareList\n          key={entity}\n          rows={rows}\n          columns={COLUMNS}\n          valueLabel=\"Runs\"\n          showHeader={false}\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"],"names":["EntityType","formatPercent","useState","useTraceVolumeMetrics","useMetricsFilters","keepPreviousData","formatCount","jsxs","Fragment","OpenInTracesButton","jsx","OpenErrorsInLogsButton","MetricsCard","MetricsShareList","ChartCard","ChartCardError","ChartArea","CHART_COLORS"],"mappings":"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"}

package/dist/domains/metrics/components/trace-volume-card.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/metrics/components/trace-volume-card'
+export {}

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

@@ -0,0 +1,97 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { EntityType } from '@mastra/core/observability';
+import { useTraceVolumeMetrics } from '@mastra/react/hooks/metrics';
+import { keepPreviousData } from '@tanstack/react-query';
+import { useState } from 'react';
+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 { OpenInTracesButton, OpenErrorsInLogsButton } from './card-action-buttons.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 { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+import { M as MetricsShareList } from '../../../metrics-share-list-2cC_1I1S.js';
+
+const ROOT_ENTITY = {
+  agents: EntityType.AGENT,
+  workflows: EntityType.WORKFLOW_RUN,
+  tools: EntityType.TOOL
+};
+const COLUMNS = [{ label: "Error rate" }];
+const errorRate = (errors, runs) => formatPercent(runs > 0 ? errors / runs : 0);
+function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }) {
+  const [entity, setEntity] = useState("agents");
+  const rootEntityType = ROOT_ENTITY[entity];
+  const volume = useTraceVolumeMetrics({
+    ...useMetricsFilters(),
+    queryOptions: { placeholderData: keepPreviousData }
+  });
+  const byEntity = {
+    agents: volume.data?.agentData ?? [],
+    workflows: volume.data?.workflowData ?? [],
+    tools: volume.data?.toolData ?? []
+  };
+  const source = byEntity[entity];
+  const rows = source.map((r) => ({
+    key: r.name,
+    label: r.name,
+    share: r.completed + r.errors,
+    value: formatCount(r.completed + r.errors),
+    cells: [errorRate(r.errors, r.completed + r.errors)],
+    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 layout = {
+    title: "Trace volume",
+    description: "Runs and calls, with error rate.",
+    actions: (onViewTraces || onViewErrors) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: () => onViewTraces(rootEntityType) }),
+      onViewErrors && /* @__PURE__ */ jsx(OpenErrorsInLogsButton, { onClick: () => onViewErrors(rootEntityType) })
+    ] }),
+    toolbar: /* @__PURE__ */ jsxs(MetricsCard.Toolbar, { children: [
+      /* @__PURE__ */ jsxs(MetricsCard.Tabs, { 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" })
+      ] }),
+      /* @__PURE__ */ jsx(MetricsShareList.Header, { columns: COLUMNS, valueLabel: "Runs" })
+    ] })
+  };
+  if (volume.isError) {
+    return /* @__PURE__ */ jsx(ChartCard, { ...layout, children: /* @__PURE__ */ jsx(ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCount(total), label: "runs and calls", isLoading: volume.isLoading }),
+      isUpdating: volume.isPlaceholderData,
+      children: /* @__PURE__ */ jsx(ChartArea, { children: /* @__PURE__ */ jsx(
+        MetricsShareList,
+        {
+          rows,
+          columns: COLUMNS,
+          valueLabel: "Runs",
+          showHeader: false,
+          color: CHART_COLORS.sky,
+          other: (rest) => {
+            const errors = rest.reduce((sum, r) => sum + (errorsOf.get(r.key) ?? 0), 0);
+            const runs = rest.reduce((sum, r) => sum + r.share, 0);
+            return { value: formatCount(runs), cells: [errorRate(errors, runs)] };
+          },
+          emptyState: "No runs in this range.",
+          isLoading: volume.isLoading
+        },
+        entity
+      ) })
+    }
+  );
+}
+
+export { TraceVolumeCard };
+//# sourceMappingURL=trace-volume-card.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-volume-card.es.js","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 type { MetricsShareListRow } from '@/ds/components/MetricsShareList';\nimport { MetricsShareList } from '@/ds/components/MetricsShareList';\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: MetricsShareListRow[] = 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        <MetricsShareList.Header columns={COLUMNS} valueLabel=\"Runs\" />\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        <MetricsShareList\n          key={entity}\n          rows={rows}\n          columns={COLUMNS}\n          valueLabel=\"Runs\"\n          showHeader={false}\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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const metrics = require('@mastra/react/hooks/metrics');
+const reactQuery = require('@tanstack/react-query');
+const React = require('react');
+const domains_metrics_hooks_useMetricsFilters = require('../hooks/use-metrics-filters.cjs.js');
+const domains_metrics_hooks_useTokenSpend = require('../hooks/use-token-spend.cjs.js');
+const domains_metrics_lib_chartColors = require('../lib/chart-colors.cjs.js');
+const domains_metrics_lib_chartFormat = require('../lib/chart-format.cjs.js');
+const domains_metrics_components_cardActionButtons = require('./card-action-buttons.cjs.js');
+const domains_metrics_components_chartArea = require('./chart-area.cjs.js');
+const domains_metrics_components_chartCard = require('./chart-card.cjs.js');
+const domains_metrics_components_chartCardError = require('./chart-card-error.cjs.js');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+const metricsShareList = require('../../../metrics-share-list-DfM8dE7e.cjs');
+
+const KEEP = { placeholderData: reactQuery.keepPreviousData };
+const COLUMNS = [{ label: "Tokens" }];
+function UsageCard(props) {
+  const [view, setView] = React.useState("agents");
+  if (view === "models") return /* @__PURE__ */ jsxRuntime.jsx(ModelsUsage, { ...props, onViewChange: setView });
+  if (view === "threads") return /* @__PURE__ */ jsxRuntime.jsx(ThreadsUsage, { ...props, onViewChange: setView });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentsUsage, { ...props, onViewChange: setView });
+}
+function AgentsUsage(props) {
+  const { onAgentClick } = props;
+  const {
+    data = [],
+    isLoading,
+    isPlaceholderData,
+    isError
+  } = metrics.useTokenUsageByAgentMetrics({
+    ...domains_metrics_hooks_useMetricsFilters.useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  const rows = data.map((a) => ({
+    key: a.name,
+    cost: a.cost ?? 0,
+    tokens: a.total,
+    onClick: onAgentClick && (() => onAgentClick(a.name))
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UsageFrame,
+    {
+      view: "agents",
+      ...props,
+      rows,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function ModelsUsage(props) {
+  const { onModelClick } = props;
+  const { data = [], isLoading, isPlaceholderData, isError } = domains_metrics_hooks_useTokenSpend.useTokenSpend("model");
+  const rows = data.map((m) => ({ ...m, onClick: onModelClick && (() => onModelClick(m.key)) }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UsageFrame,
+    {
+      view: "models",
+      ...props,
+      rows,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function ThreadsUsage(props) {
+  const { onThreadClick } = props;
+  const { data = [], isLoading, isPlaceholderData, isError } = domains_metrics_hooks_useTokenSpend.useTokenSpend("threadId");
+  const rows = data.map((t) => ({ ...t, onClick: onThreadClick && (() => onThreadClick(t.key)) }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UsageFrame,
+    {
+      view: "threads",
+      ...props,
+      rows,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function UsageFrame({
+  view,
+  onViewChange,
+  onViewTraces,
+  rows,
+  isLoading,
+  isUpdating,
+  isError
+}) {
+  const tokensOf = new Map(rows.map((r) => [r.key, r.tokens]));
+  const shareRows = rows.map((r) => ({
+    key: r.key,
+    label: r.key,
+    share: r.cost,
+    value: domains_metrics_lib_chartFormat.formatUsd(r.cost),
+    cells: [domains_metrics_lib_chartFormat.formatCount(r.tokens)],
+    onClick: r.onClick
+  }));
+  const layout = {
+    title: "Usage",
+    description: "Who is spending: cost share, with tokens.",
+    actions: onViewTraces && /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_cardActionButtons.OpenInTracesButton, { onClick: onViewTraces }),
+    toolbar: /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Toolbar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Tabs, { value: view, onValueChange: onViewChange, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "models", children: "Models" }),
+        /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Tab, { value: "threads", children: "Threads" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(metricsShareList.MetricsShareList.Header, { columns: COLUMNS, valueLabel: "Cost" })
+    ] })
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCard.ChartCard, { ...layout, children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCardError.ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_chartCard.ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsCard.MetricsCard.Summary,
+        {
+          value: domains_metrics_lib_chartFormat.formatUsd(rows.reduce((sum, r) => sum + r.cost, 0)),
+          label: "cost",
+          isLoading
+        }
+      ),
+      isUpdating,
+      children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartArea.ChartArea, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsShareList.MetricsShareList,
+        {
+          rows: shareRows,
+          columns: COLUMNS,
+          valueLabel: "Cost",
+          showHeader: false,
+          color: domains_metrics_lib_chartColors.CHART_COLORS.green,
+          other: (rest) => ({
+            value: domains_metrics_lib_chartFormat.formatUsd(rest.reduce((sum, r) => sum + r.share, 0)),
+            cells: [domains_metrics_lib_chartFormat.formatCount(rest.reduce((sum, r) => sum + (tokensOf.get(r.key) ?? 0), 0))]
+          }),
+          emptyState: "No model usage in this range.",
+          isLoading
+        }
+      ) })
+    }
+  );
+}
+
+exports.UsageCard = UsageCard;
+//# sourceMappingURL=usage-card.cjs.js.map