@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"token-usage-by-agent-card-view.es.js","sources":["../../../../src/domains/metrics/components/token-usage-by-agent-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { TokenUsageByAgentRow } from '../hooks/use-token-usage-by-agent-metrics';\nimport { CHART_COLORS, formatCompact, formatCost } from './metrics-utils';\n\nexport interface TokenUsageByAgentCardViewProps {\n  data: TokenUsageByAgentRow[] | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns an href for a single row in either tab. */\n  getRowHref?: (row: TokenUsageByAgentRow) => string | undefined;\n  /** Optional slot for top-bar action buttons. */\n  actions?: ReactNode;\n  /** Override how drilldown links are rendered. Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\ntype TokenUsageTab = 'tokens' | 'cost';\n\nfunction isTokenUsageTab(value: string): value is TokenUsageTab {\n  return value === 'tokens' || value === 'cost';\n}\n\nexport function TokenUsageByAgentCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  actions,\n  LinkComponent,\n}: TokenUsageByAgentCardViewProps) {\n  const [activeTab, setActiveTab] = useState<TokenUsageTab>('tokens');\n\n  const rows = data ?? [];\n  const hasData = rows.length > 0;\n  const totalTokens = rows.reduce((s, d) => s + d.total, 0);\n  const costRows = rows.filter(d => d.cost != null && d.cost > 0);\n  const uniqueCostUnits = new Set(costRows.map(d => d.costUnit ?? 'usd'));\n  const hasSingleCostUnit = uniqueCostUnits.size <= 1;\n  const costUnit = hasSingleCostUnit ? ([...uniqueCostUnits][0] ?? 'usd') : null;\n  const totalCost = hasSingleCostUnit ? costRows.reduce((s, d) => s + (d.cost ?? 0), 0) : 0;\n  const hasCostData = hasSingleCostUnit && totalCost > 0;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription\n          title=\"Token Usage by Agent\"\n          description=\"Token consumption grouped by agent.\"\n        />\n        {hasData &&\n          (activeTab === 'cost' && hasCostData ? (\n            <MetricsCard.Summary value={formatCost(totalCost, costUnit)} label=\"Total cost\" />\n          ) : (\n            <MetricsCard.Summary value={formatCompact(totalTokens)} label=\"Total tokens\" />\n          ))}\n        {hasData && actions ? <MetricsCard.Actions>{actions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load token usage data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No token usage data yet\" />\n          ) : (\n            <Tabs\n              defaultTab=\"tokens\"\n              value={activeTab}\n              onValueChange={v => {\n                if (isTokenUsageTab(v)) setActiveTab(v);\n              }}\n              className=\"grid grid-rows-[auto_1fr] overflow-y-auto h-full\"\n            >\n              <TabList>\n                <Tab value=\"tokens\">Tokens</Tab>\n                <Tab value=\"cost\">Cost</Tab>\n              </TabList>\n              <TabContent value=\"tokens\">\n                <HorizontalBars\n                  LinkComponent={LinkComponent}\n                  data={rows.map(d => ({\n                    name: d.name,\n                    values: [d.input, d.output],\n                    href: getRowHref?.(d),\n                  }))}\n                  segments={[\n                    { label: 'Input', color: CHART_COLORS.blueDark },\n                    { label: 'Output', color: CHART_COLORS.blue },\n                  ]}\n                  maxVal={Math.max(...rows.map(d => d.input + d.output))}\n                  fmt={formatCompact}\n                />\n              </TabContent>\n              <TabContent value=\"cost\">\n                {hasCostData ? (\n                  <HorizontalBars\n                    LinkComponent={LinkComponent}\n                    data={costRows\n                      .slice()\n                      .sort((a, b) => (b.cost ?? 0) - (a.cost ?? 0))\n                      .map(d => ({ name: d.name, values: [d.cost!], href: getRowHref?.(d) }))}\n                    segments={[{ label: 'Cost', color: CHART_COLORS.purple }]}\n                    maxVal={Math.max(...costRows.map(d => d.cost ?? 0))}\n                    fmt={v => formatCost(v, costUnit)}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No cost data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
+const metricsLineChart = require('../../../metrics-line-chart-D1ZGVepo.cjs');
+const tabsTab = require('../../../tabs-tab-B7Ziuuh8.cjs');
+const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
+const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
+
+function sumMetric(dataKey, formatter = domains_metrics_components_metricsUtils.formatCompact) {
+  return (data) => ({
+    value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === "number" ? point[dataKey] : 0), 0))
+  });
+}
+const tokenSeries = [
+  {
+    dataKey: "input",
+    label: "Input tokens",
+    color: domains_metrics_components_metricsUtils.CHART_COLORS.blue,
+    aggregate: sumMetric("input")
+  },
+  {
+    dataKey: "output",
+    label: "Output tokens",
+    color: domains_metrics_components_metricsUtils.CHART_COLORS.yellow,
+    aggregate: sumMetric("output")
+  }
+];
+function isTokenUsageTimelineTab(value) {
+  return value === "tokens" || value === "cost";
+}
+function TokenUsageTimelineCardView({
+  data,
+  interval = "1d",
+  isLoading,
+  isError,
+  actions
+}) {
+  const [activeTab, setActiveTab] = React.useState("tokens");
+  const points = data ?? [];
+  const chartPoints = points.map((point) => ({ ...point }));
+  const hasData = points.length > 0;
+  const totalTokens = points.reduce((sum, point) => sum + point.total, 0);
+  const costPoints = points.filter((point) => point.cost != null && point.cost > 0);
+  const costChartPoints = costPoints.map((point) => ({ ...point }));
+  const uniqueCostUnits = new Set(costPoints.map((point) => point.costUnit).filter((unit) => !!unit));
+  const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every((point) => point.costUnit != null);
+  const costUnit = hasSingleCostUnit ? [...uniqueCostUnits][0] ?? null : null;
+  const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;
+  const hasCostData = hasSingleCostUnit && totalCost > 0;
+  const description = interval === "1h" ? "Input and output tokens per hour." : "Input and output tokens per day.";
+  const costSeries = [
+    {
+      dataKey: "cost",
+      label: "Cost",
+      color: domains_metrics_components_metricsUtils.CHART_COLORS.purple,
+      aggregate: sumMetric("cost", (value) => domains_metrics_components_metricsUtils.formatCost(value, costUnit))
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.TitleAndDescription, { title: "Token usage over time", description }),
+      hasData && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_components_metricsUtils.formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_components_metricsUtils.formatCompact(totalTokens), label: "Total tokens" })),
+      hasData && actions ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Actions, { children: actions }) : null
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Error, { message: "Failed to load token usage timeline" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      tabsTab.Tabs,
+      {
+        defaultTab: "tokens",
+        value: activeTab,
+        onValueChange: (value) => {
+          if (isTokenUsageTimelineTab(value)) setActiveTab(value);
+        },
+        className: "overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.TabList, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "tokens", children: "Tokens" }),
+            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "cost", children: "Cost" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tokens", children: /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: chartPoints, series: tokenSeries }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: costChartPoints, series: costSeries }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No cost data yet" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+exports.TokenUsageTimelineCardView = TokenUsageTimelineCardView;
+//# sourceMappingURL=token-usage-timeline-card-view.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"token-usage-timeline-card-view.cjs.js","sources":["../../../../src/domains/metrics/components/token-usage-timeline-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { MetricsCard } from '../../../ds/components/MetricsCard';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport type { TokenTimelinePoint, TokenUsageTimeSeriesInterval } from '../hooks/use-token-usage-timeseries';\nimport { CHART_COLORS, formatCompact, formatCost } from './metrics-utils';\n\ntype TokenUsageTimelineTab = 'tokens' | 'cost';\n\nfunction sumMetric(dataKey: 'input' | 'output' | 'cost', formatter: (value: number) => string = formatCompact) {\n  return (data: Record<string, unknown>[]) => ({\n    value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === 'number' ? point[dataKey] : 0), 0)),\n  });\n}\n\nconst tokenSeries = [\n  {\n    dataKey: 'input',\n    label: 'Input tokens',\n    color: CHART_COLORS.blue,\n    aggregate: sumMetric('input'),\n  },\n  {\n    dataKey: 'output',\n    label: 'Output tokens',\n    color: CHART_COLORS.yellow,\n    aggregate: sumMetric('output'),\n  },\n];\n\nfunction isTokenUsageTimelineTab(value: string): value is TokenUsageTimelineTab {\n  return value === 'tokens' || value === 'cost';\n}\n\nexport interface TokenUsageTimelineCardViewProps {\n  data: TokenTimelinePoint[] | undefined;\n  interval: TokenUsageTimeSeriesInterval | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  actions?: ReactNode;\n}\n\nexport function TokenUsageTimelineCardView({\n  data,\n  interval = '1d',\n  isLoading,\n  isError,\n  actions,\n}: TokenUsageTimelineCardViewProps) {\n  const [activeTab, setActiveTab] = useState<TokenUsageTimelineTab>('tokens');\n\n  const points = data ?? [];\n  const chartPoints = points.map(point => ({ ...point }));\n  const hasData = points.length > 0;\n  const totalTokens = points.reduce((sum, point) => sum + point.total, 0);\n  const costPoints = points.filter(point => point.cost != null && point.cost > 0);\n  const costChartPoints = costPoints.map(point => ({ ...point }));\n  const uniqueCostUnits = new Set(costPoints.map(point => point.costUnit).filter((unit): unit is string => !!unit));\n  const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every(point => point.costUnit != null);\n  const costUnit = hasSingleCostUnit ? ([...uniqueCostUnits][0] ?? null) : null;\n  const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;\n  const hasCostData = hasSingleCostUnit && totalCost > 0;\n  const description = interval === '1h' ? 'Input and output tokens per hour.' : 'Input and output tokens per day.';\n\n  const costSeries = [\n    {\n      dataKey: 'cost',\n      label: 'Cost',\n      color: CHART_COLORS.purple,\n      aggregate: sumMetric('cost', value => formatCost(value, costUnit)),\n    },\n  ];\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Token usage over time\" description={description} />\n        {hasData &&\n          (activeTab === 'cost' && hasCostData ? (\n            <MetricsCard.Summary value={formatCost(totalCost, costUnit)} label=\"Total cost\" />\n          ) : (\n            <MetricsCard.Summary value={formatCompact(totalTokens)} label=\"Total tokens\" />\n          ))}\n        {hasData && actions ? <MetricsCard.Actions>{actions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load token usage timeline\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No token usage data yet\" />\n          ) : (\n            <Tabs\n              defaultTab=\"tokens\"\n              value={activeTab}\n              onValueChange={value => {\n                if (isTokenUsageTimelineTab(value)) setActiveTab(value);\n              }}\n              className=\"overflow-visible\"\n            >\n              <TabList>\n                <Tab value=\"tokens\">Tokens</Tab>\n                <Tab value=\"cost\">Cost</Tab>\n              </TabList>\n              <TabContent value=\"tokens\">\n                <MetricsLineChart data={chartPoints} series={tokenSeries} />\n              </TabContent>\n              <TabContent value=\"cost\">\n                {hasCostData ? (\n                  <MetricsLineChart data={costChartPoints} series={costSeries} />\n                ) : (\n                  <MetricsCard.NoData message=\"No cost data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":["formatCompact","CHART_COLORS","useState","formatCost","MetricsCard","jsxs","jsx","Tabs","TabList","Tab","TabContent","MetricsLineChart"],"mappings":"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"}

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

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

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

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
+import { M as MetricsLineChart } from '../../../metrics-line-chart-BUUqDQPW.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-XnMoa1fn.js';
+import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
+import { CHART_COLORS, formatCompact, formatCost } from './metrics-utils.es.js';
+
+function sumMetric(dataKey, formatter = formatCompact) {
+  return (data) => ({
+    value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === "number" ? point[dataKey] : 0), 0))
+  });
+}
+const tokenSeries = [
+  {
+    dataKey: "input",
+    label: "Input tokens",
+    color: CHART_COLORS.blue,
+    aggregate: sumMetric("input")
+  },
+  {
+    dataKey: "output",
+    label: "Output tokens",
+    color: CHART_COLORS.yellow,
+    aggregate: sumMetric("output")
+  }
+];
+function isTokenUsageTimelineTab(value) {
+  return value === "tokens" || value === "cost";
+}
+function TokenUsageTimelineCardView({
+  data,
+  interval = "1d",
+  isLoading,
+  isError,
+  actions
+}) {
+  const [activeTab, setActiveTab] = useState("tokens");
+  const points = data ?? [];
+  const chartPoints = points.map((point) => ({ ...point }));
+  const hasData = points.length > 0;
+  const totalTokens = points.reduce((sum, point) => sum + point.total, 0);
+  const costPoints = points.filter((point) => point.cost != null && point.cost > 0);
+  const costChartPoints = costPoints.map((point) => ({ ...point }));
+  const uniqueCostUnits = new Set(costPoints.map((point) => point.costUnit).filter((unit) => !!unit));
+  const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every((point) => point.costUnit != null);
+  const costUnit = hasSingleCostUnit ? [...uniqueCostUnits][0] ?? null : null;
+  const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;
+  const hasCostData = hasSingleCostUnit && totalCost > 0;
+  const description = interval === "1h" ? "Input and output tokens per hour." : "Input and output tokens per day.";
+  const costSeries = [
+    {
+      dataKey: "cost",
+      label: "Cost",
+      color: CHART_COLORS.purple,
+      aggregate: sumMetric("cost", (value) => formatCost(value, costUnit))
+    }
+  ];
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Token usage over time", description }),
+      hasData && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" })),
+      hasData && actions ? /* @__PURE__ */ jsx(MetricsCard.Actions, { children: actions }) : null
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load token usage timeline" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        defaultTab: "tokens",
+        value: activeTab,
+        onValueChange: (value) => {
+          if (isTokenUsageTimelineTab(value)) setActiveTab(value);
+        },
+        className: "overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxs(TabList, { children: [
+            /* @__PURE__ */ jsx(Tab, { value: "tokens", children: "Tokens" }),
+            /* @__PURE__ */ jsx(Tab, { value: "cost", children: "Cost" })
+          ] }),
+          /* @__PURE__ */ jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsx(MetricsLineChart, { data: chartPoints, series: tokenSeries }) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ jsx(MetricsLineChart, { data: costChartPoints, series: costSeries }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No cost data yet" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { TokenUsageTimelineCardView };
+//# sourceMappingURL=token-usage-timeline-card-view.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"token-usage-timeline-card-view.es.js","sources":["../../../../src/domains/metrics/components/token-usage-timeline-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { MetricsCard } from '../../../ds/components/MetricsCard';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport type { TokenTimelinePoint, TokenUsageTimeSeriesInterval } from '../hooks/use-token-usage-timeseries';\nimport { CHART_COLORS, formatCompact, formatCost } from './metrics-utils';\n\ntype TokenUsageTimelineTab = 'tokens' | 'cost';\n\nfunction sumMetric(dataKey: 'input' | 'output' | 'cost', formatter: (value: number) => string = formatCompact) {\n  return (data: Record<string, unknown>[]) => ({\n    value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === 'number' ? point[dataKey] : 0), 0)),\n  });\n}\n\nconst tokenSeries = [\n  {\n    dataKey: 'input',\n    label: 'Input tokens',\n    color: CHART_COLORS.blue,\n    aggregate: sumMetric('input'),\n  },\n  {\n    dataKey: 'output',\n    label: 'Output tokens',\n    color: CHART_COLORS.yellow,\n    aggregate: sumMetric('output'),\n  },\n];\n\nfunction isTokenUsageTimelineTab(value: string): value is TokenUsageTimelineTab {\n  return value === 'tokens' || value === 'cost';\n}\n\nexport interface TokenUsageTimelineCardViewProps {\n  data: TokenTimelinePoint[] | undefined;\n  interval: TokenUsageTimeSeriesInterval | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  actions?: ReactNode;\n}\n\nexport function TokenUsageTimelineCardView({\n  data,\n  interval = '1d',\n  isLoading,\n  isError,\n  actions,\n}: TokenUsageTimelineCardViewProps) {\n  const [activeTab, setActiveTab] = useState<TokenUsageTimelineTab>('tokens');\n\n  const points = data ?? [];\n  const chartPoints = points.map(point => ({ ...point }));\n  const hasData = points.length > 0;\n  const totalTokens = points.reduce((sum, point) => sum + point.total, 0);\n  const costPoints = points.filter(point => point.cost != null && point.cost > 0);\n  const costChartPoints = costPoints.map(point => ({ ...point }));\n  const uniqueCostUnits = new Set(costPoints.map(point => point.costUnit).filter((unit): unit is string => !!unit));\n  const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every(point => point.costUnit != null);\n  const costUnit = hasSingleCostUnit ? ([...uniqueCostUnits][0] ?? null) : null;\n  const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;\n  const hasCostData = hasSingleCostUnit && totalCost > 0;\n  const description = interval === '1h' ? 'Input and output tokens per hour.' : 'Input and output tokens per day.';\n\n  const costSeries = [\n    {\n      dataKey: 'cost',\n      label: 'Cost',\n      color: CHART_COLORS.purple,\n      aggregate: sumMetric('cost', value => formatCost(value, costUnit)),\n    },\n  ];\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Token usage over time\" description={description} />\n        {hasData &&\n          (activeTab === 'cost' && hasCostData ? (\n            <MetricsCard.Summary value={formatCost(totalCost, costUnit)} label=\"Total cost\" />\n          ) : (\n            <MetricsCard.Summary value={formatCompact(totalTokens)} label=\"Total tokens\" />\n          ))}\n        {hasData && actions ? <MetricsCard.Actions>{actions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load token usage timeline\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No token usage data yet\" />\n          ) : (\n            <Tabs\n              defaultTab=\"tokens\"\n              value={activeTab}\n              onValueChange={value => {\n                if (isTokenUsageTimelineTab(value)) setActiveTab(value);\n              }}\n              className=\"overflow-visible\"\n            >\n              <TabList>\n                <Tab value=\"tokens\">Tokens</Tab>\n                <Tab value=\"cost\">Cost</Tab>\n              </TabList>\n              <TabContent value=\"tokens\">\n                <MetricsLineChart data={chartPoints} series={tokenSeries} />\n              </TabContent>\n              <TabContent value=\"cost\">\n                {hasCostData ? (\n                  <MetricsLineChart data={costChartPoints} series={costSeries} />\n                ) : (\n                  <MetricsCard.NoData message=\"No cost data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const horizontalBars = require('../../../horizontal-bars-CjZn3RnH.cjs');
+const metricsCard = require('../../../metrics-card-CriQ3I_h.cjs');
+const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
+const tabsTab = require('../../../tabs-tab-B7Ziuuh8.cjs');
+const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
+
+function VolumeBars({
+  data,
+  rowHrefs,
+  errorHrefs,
+  LinkComponent
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    horizontalBars.HorizontalBars,
+    {
+      LinkComponent,
+      data: data.map((d) => {
+        const errorHref = errorHrefs?.(d);
+        const rowHref = rowHrefs?.(d);
+        if (errorHref) {
+          return {
+            name: d.name,
+            values: [d.completed, d.errors],
+            hrefs: [rowHref, errorHref]
+          };
+        }
+        return {
+          name: d.name,
+          values: [d.completed, d.errors],
+          href: rowHref
+        };
+      }),
+      segments: [
+        { label: "Completed", color: domains_metrics_components_metricsUtils.CHART_COLORS.blueDark },
+        { label: "Errors", color: domains_metrics_components_metricsUtils.CHART_COLORS.pink }
+      ],
+      maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
+      fmt: domains_metrics_components_metricsUtils.formatCompact
+    }
+  );
+}
+function TracesVolumeCardView({
+  data,
+  isLoading,
+  isError,
+  getRowHref,
+  getErrorSegmentHref,
+  actions,
+  LinkComponent
+}) {
+  const [activeTab, setActiveTab] = React.useState("agents");
+  const renderedActions = typeof actions === "function" ? actions(activeTab) : actions;
+  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
+  const total = data ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0) : 0;
+  const tabRowHrefs = (tab) => getRowHref ? (row) => getRowHref(tab, row) : void 0;
+  const tabErrorHrefs = (tab) => getErrorSegmentHref ? (row) => getErrorSegmentHref(tab, row) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_components_metricsUtils.formatCompact(total), label: "Total runs" }),
+      renderedActions ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Actions, { children: renderedActions }) : null
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      tabsTab.Tabs,
+      {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        defaultTab: "agents",
+        className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.TabList, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "agents", children: "Agents" }),
+            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "workflows", children: "Workflows" }),
+            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "tools", children: "Tools" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            VolumeBars,
+            {
+              data: data.agentData,
+              rowHrefs: tabRowHrefs("agents"),
+              errorHrefs: tabErrorHrefs("agents"),
+              LinkComponent
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No agent data yet" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            VolumeBars,
+            {
+              data: data.workflowData,
+              rowHrefs: tabRowHrefs("workflows"),
+              errorHrefs: tabErrorHrefs("workflows"),
+              LinkComponent
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No workflow data yet" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            VolumeBars,
+            {
+              data: data.toolData,
+              rowHrefs: tabRowHrefs("tools"),
+              errorHrefs: tabErrorHrefs("tools"),
+              LinkComponent
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No tool data yet" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+exports.TracesVolumeCardView = TracesVolumeCardView;
+//# sourceMappingURL=traces-volume-card-view.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"traces-volume-card-view.cjs.js","sources":["../../../../src/domains/metrics/components/traces-volume-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { VolumeRow } from '../hooks/use-trace-volume-metrics';\nimport { CHART_COLORS, formatCompact } from './metrics-utils';\n\nexport type VolumeTab = 'agents' | 'workflows' | 'tools';\n\nfunction VolumeBars({\n  data,\n  rowHrefs,\n  errorHrefs,\n  LinkComponent,\n}: {\n  data: VolumeRow[];\n  rowHrefs?: (row: VolumeRow) => string | undefined;\n  errorHrefs?: (row: VolumeRow) => string | undefined;\n  LinkComponent?: LinkComponent;\n}) {\n  return (\n    <HorizontalBars\n      LinkComponent={LinkComponent}\n      data={data.map(d => {\n        const errorHref = errorHrefs?.(d);\n        const rowHref = rowHrefs?.(d);\n        // HorizontalBars ignores per-segment `hrefs` whenever a row-level\n        // `href` is set (to avoid nested anchors). When we want the Errors\n        // segment to drill somewhere different from the rest of the row,\n        // drop the row-level link and split navigation across segments\n        // instead so each target is reachable.\n        if (errorHref) {\n          return {\n            name: d.name,\n            values: [d.completed, d.errors],\n            hrefs: [rowHref, errorHref],\n          };\n        }\n        return {\n          name: d.name,\n          values: [d.completed, d.errors],\n          href: rowHref,\n        };\n      })}\n      segments={[\n        { label: 'Completed', color: CHART_COLORS.blueDark },\n        { label: 'Errors', color: CHART_COLORS.pink },\n      ]}\n      maxVal={Math.max(...data.map(d => d.completed + d.errors))}\n      fmt={formatCompact}\n    />\n  );\n}\n\nexport interface TracesVolumeCardViewProps {\n  data: { agentData: VolumeRow[]; workflowData: VolumeRow[]; toolData: VolumeRow[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns href for clicking a whole bar row. */\n  getRowHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /** Optional drilldown: returns href for clicking the \"Errors\" segment of a bar. */\n  getErrorSegmentHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /**\n   * Optional slot for top-bar action buttons.\n   * Pass a function to receive the active tab so actions can scope themselves to the current entity type.\n   */\n  actions?: ReactNode | ((tab: VolumeTab) => ReactNode);\n  /** Override how drilldown links are rendered (e.g. router-aware adapter). Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\nexport function TracesVolumeCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  getErrorSegmentHref,\n  actions,\n  LinkComponent,\n}: TracesVolumeCardViewProps) {\n  const [activeTab, setActiveTab] = useState<VolumeTab>('agents');\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const total = data\n    ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0)\n    : 0;\n\n  const tabRowHrefs = (tab: VolumeTab) => (getRowHref ? (row: VolumeRow) => getRowHref(tab, row) : undefined);\n  const tabErrorHrefs = (tab: VolumeTab) =>\n    getErrorSegmentHref ? (row: VolumeRow) => getErrorSegmentHref(tab, row) : undefined;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Trace Volume\" description=\"Runs and call counts.\" />\n        {hasData && <MetricsCard.Summary value={formatCompact(total)} label=\"Total runs\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load trace volume data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No trace volume data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={setActiveTab}\n              defaultTab=\"agents\"\n              className=\"grid grid-rows-[auto_1fr] overflow-y-auto h-full\"\n            >\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\">\n                {data.agentData.length > 0 ? (\n                  <VolumeBars\n                    data={data.agentData}\n                    rowHrefs={tabRowHrefs('agents')}\n                    errorHrefs={tabErrorHrefs('agents')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No agent data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"workflows\">\n                {data.workflowData.length > 0 ? (\n                  <VolumeBars\n                    data={data.workflowData}\n                    rowHrefs={tabRowHrefs('workflows')}\n                    errorHrefs={tabErrorHrefs('workflows')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No workflow data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"tools\">\n                {data.toolData.length > 0 ? (\n                  <VolumeBars\n                    data={data.toolData}\n                    rowHrefs={tabRowHrefs('tools')}\n                    errorHrefs={tabErrorHrefs('tools')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No tool data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":["jsx","HorizontalBars","CHART_COLORS","formatCompact","useState","MetricsCard","jsxs","Tabs","TabList","Tab","TabContent"],"mappings":"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"}

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

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

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

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { H as HorizontalBars } from '../../../horizontal-bars-D_1wypjd.js';
+import { M as MetricsCard } from '../../../metrics-card-BTBHMGM_.js';
+import { T as TabContent } from '../../../tabs-content--uzXt5ch.js';
+import { b as Tabs, a as TabList, T as Tab } from '../../../tabs-tab-XnMoa1fn.js';
+import { formatCompact, CHART_COLORS } from './metrics-utils.es.js';
+
+function VolumeBars({
+  data,
+  rowHrefs,
+  errorHrefs,
+  LinkComponent
+}) {
+  return /* @__PURE__ */ jsx(
+    HorizontalBars,
+    {
+      LinkComponent,
+      data: data.map((d) => {
+        const errorHref = errorHrefs?.(d);
+        const rowHref = rowHrefs?.(d);
+        if (errorHref) {
+          return {
+            name: d.name,
+            values: [d.completed, d.errors],
+            hrefs: [rowHref, errorHref]
+          };
+        }
+        return {
+          name: d.name,
+          values: [d.completed, d.errors],
+          href: rowHref
+        };
+      }),
+      segments: [
+        { label: "Completed", color: CHART_COLORS.blueDark },
+        { label: "Errors", color: CHART_COLORS.pink }
+      ],
+      maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
+      fmt: formatCompact
+    }
+  );
+}
+function TracesVolumeCardView({
+  data,
+  isLoading,
+  isError,
+  getRowHref,
+  getErrorSegmentHref,
+  actions,
+  LinkComponent
+}) {
+  const [activeTab, setActiveTab] = useState("agents");
+  const renderedActions = typeof actions === "function" ? actions(activeTab) : actions;
+  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
+  const total = data ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0) : 0;
+  const tabRowHrefs = (tab) => getRowHref ? (row) => getRowHref(tab, row) : void 0;
+  const tabErrorHrefs = (tab) => getErrorSegmentHref ? (row) => getErrorSegmentHref(tab, row) : void 0;
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(total), label: "Total runs" }),
+      renderedActions ? /* @__PURE__ */ jsx(MetricsCard.Actions, { children: renderedActions }) : null
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        defaultTab: "agents",
+        className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full",
+        children: [
+          /* @__PURE__ */ jsxs(TabList, { children: [
+            /* @__PURE__ */ jsx(Tab, { value: "agents", children: "Agents" }),
+            /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
+            /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
+          ] }),
+          /* @__PURE__ */ jsx(TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsx(
+            VolumeBars,
+            {
+              data: data.agentData,
+              rowHrefs: tabRowHrefs("agents"),
+              errorHrefs: tabErrorHrefs("agents"),
+              LinkComponent
+            }
+          ) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No agent data yet" }) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsx(
+            VolumeBars,
+            {
+              data: data.workflowData,
+              rowHrefs: tabRowHrefs("workflows"),
+              errorHrefs: tabErrorHrefs("workflows"),
+              LinkComponent
+            }
+          ) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No workflow data yet" }) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsx(
+            VolumeBars,
+            {
+              data: data.toolData,
+              rowHrefs: tabRowHrefs("tools"),
+              errorHrefs: tabErrorHrefs("tools"),
+              LinkComponent
+            }
+          ) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No tool data yet" }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { TracesVolumeCardView };
+//# sourceMappingURL=traces-volume-card-view.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"traces-volume-card-view.es.js","sources":["../../../../src/domains/metrics/components/traces-volume-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { VolumeRow } from '../hooks/use-trace-volume-metrics';\nimport { CHART_COLORS, formatCompact } from './metrics-utils';\n\nexport type VolumeTab = 'agents' | 'workflows' | 'tools';\n\nfunction VolumeBars({\n  data,\n  rowHrefs,\n  errorHrefs,\n  LinkComponent,\n}: {\n  data: VolumeRow[];\n  rowHrefs?: (row: VolumeRow) => string | undefined;\n  errorHrefs?: (row: VolumeRow) => string | undefined;\n  LinkComponent?: LinkComponent;\n}) {\n  return (\n    <HorizontalBars\n      LinkComponent={LinkComponent}\n      data={data.map(d => {\n        const errorHref = errorHrefs?.(d);\n        const rowHref = rowHrefs?.(d);\n        // HorizontalBars ignores per-segment `hrefs` whenever a row-level\n        // `href` is set (to avoid nested anchors). When we want the Errors\n        // segment to drill somewhere different from the rest of the row,\n        // drop the row-level link and split navigation across segments\n        // instead so each target is reachable.\n        if (errorHref) {\n          return {\n            name: d.name,\n            values: [d.completed, d.errors],\n            hrefs: [rowHref, errorHref],\n          };\n        }\n        return {\n          name: d.name,\n          values: [d.completed, d.errors],\n          href: rowHref,\n        };\n      })}\n      segments={[\n        { label: 'Completed', color: CHART_COLORS.blueDark },\n        { label: 'Errors', color: CHART_COLORS.pink },\n      ]}\n      maxVal={Math.max(...data.map(d => d.completed + d.errors))}\n      fmt={formatCompact}\n    />\n  );\n}\n\nexport interface TracesVolumeCardViewProps {\n  data: { agentData: VolumeRow[]; workflowData: VolumeRow[]; toolData: VolumeRow[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns href for clicking a whole bar row. */\n  getRowHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /** Optional drilldown: returns href for clicking the \"Errors\" segment of a bar. */\n  getErrorSegmentHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /**\n   * Optional slot for top-bar action buttons.\n   * Pass a function to receive the active tab so actions can scope themselves to the current entity type.\n   */\n  actions?: ReactNode | ((tab: VolumeTab) => ReactNode);\n  /** Override how drilldown links are rendered (e.g. router-aware adapter). Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\nexport function TracesVolumeCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  getErrorSegmentHref,\n  actions,\n  LinkComponent,\n}: TracesVolumeCardViewProps) {\n  const [activeTab, setActiveTab] = useState<VolumeTab>('agents');\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const total = data\n    ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0)\n    : 0;\n\n  const tabRowHrefs = (tab: VolumeTab) => (getRowHref ? (row: VolumeRow) => getRowHref(tab, row) : undefined);\n  const tabErrorHrefs = (tab: VolumeTab) =>\n    getErrorSegmentHref ? (row: VolumeRow) => getErrorSegmentHref(tab, row) : undefined;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Trace Volume\" description=\"Runs and call counts.\" />\n        {hasData && <MetricsCard.Summary value={formatCompact(total)} label=\"Total runs\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load trace volume data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No trace volume data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={setActiveTab}\n              defaultTab=\"agents\"\n              className=\"grid grid-rows-[auto_1fr] overflow-y-auto h-full\"\n            >\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\">\n                {data.agentData.length > 0 ? (\n                  <VolumeBars\n                    data={data.agentData}\n                    rowHrefs={tabRowHrefs('agents')}\n                    errorHrefs={tabErrorHrefs('agents')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No agent data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"workflows\">\n                {data.workflowData.length > 0 ? (\n                  <VolumeBars\n                    data={data.workflowData}\n                    rowHrefs={tabRowHrefs('workflows')}\n                    errorHrefs={tabErrorHrefs('workflows')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No workflow data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"tools\">\n                {data.toolData.length > 0 ? (\n                  <VolumeBars\n                    data={data.toolData}\n                    rowHrefs={tabRowHrefs('tools')}\n                    errorHrefs={tabErrorHrefs('tools')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No tool data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domains_metrics_components_dateRangeSelector = require('./components/date-range-selector.cjs.js');
+const domains_metrics_components_metricsUtils = require('./components/metrics-utils.cjs.js');
+const domains_metrics_components_barList = require('./components/bar-list.cjs.js');
+const domains_metrics_components_cardActionButtons = require('./components/card-action-buttons.cjs.js');
+const domains_metrics_components_kpiCardView = require('./components/kpi-card-view.cjs.js');
+const domains_metrics_components_latencyCardView = require('./components/latency-card-view.cjs.js');
+const domains_metrics_components_memoryCardView = require('./components/memory-card-view.cjs.js');
+const domains_metrics_components_modelUsageCostCardView = require('./components/model-usage-cost-card-view.cjs.js');
+const domains_metrics_components_scoresCardView = require('./components/scores-card-view.cjs.js');
+const domains_metrics_components_tokenUsageByAgentCardView = require('./components/token-usage-by-agent-card-view.cjs.js');
+const domains_metrics_components_tokenUsageTimelineCardView = require('./components/token-usage-timeline-card-view.cjs.js');
+const domains_metrics_components_tracesVolumeCardView = require('./components/traces-volume-card-view.cjs.js');
+
+
+
+exports.DateRangeSelector = domains_metrics_components_dateRangeSelector.DateRangeSelector;
+exports.CHART_COLORS = domains_metrics_components_metricsUtils.CHART_COLORS;
+exports.formatCompact = domains_metrics_components_metricsUtils.formatCompact;
+exports.formatCost = domains_metrics_components_metricsUtils.formatCost;
+exports.BarListContent = domains_metrics_components_barList.BarListContent;
+exports.StackedRunsBars = domains_metrics_components_barList.StackedRunsBars;
+exports.OpenErrorsInLogsButton = domains_metrics_components_cardActionButtons.OpenErrorsInLogsButton;
+exports.OpenInTracesButton = domains_metrics_components_cardActionButtons.OpenInTracesButton;
+exports.KpiCardView = domains_metrics_components_kpiCardView.KpiCardView;
+exports.LatencyCardView = domains_metrics_components_latencyCardView.LatencyCardView;
+exports.MemoryCardView = domains_metrics_components_memoryCardView.MemoryCardView;
+exports.ModelUsageCostCardView = domains_metrics_components_modelUsageCostCardView.ModelUsageCostCardView;
+exports.ScoresCardView = domains_metrics_components_scoresCardView.ScoresCardView;
+exports.TokenUsageByAgentCardView = domains_metrics_components_tokenUsageByAgentCardView.TokenUsageByAgentCardView;
+exports.TokenUsageTimelineCardView = domains_metrics_components_tokenUsageTimelineCardView.TokenUsageTimelineCardView;
+exports.TracesVolumeCardView = domains_metrics_components_tracesVolumeCardView.TracesVolumeCardView;
+//# sourceMappingURL=components.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/domains/metrics/components.d.ts

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

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

@@ -0,0 +1,13 @@
+export { DateRangeSelector } from './components/date-range-selector.es.js';
+export { CHART_COLORS, formatCompact, formatCost } from './components/metrics-utils.es.js';
+export { BarListContent, StackedRunsBars } from './components/bar-list.es.js';
+export { OpenErrorsInLogsButton, OpenInTracesButton } from './components/card-action-buttons.es.js';
+export { KpiCardView } from './components/kpi-card-view.es.js';
+export { LatencyCardView } from './components/latency-card-view.es.js';
+export { MemoryCardView } from './components/memory-card-view.es.js';
+export { ModelUsageCostCardView } from './components/model-usage-cost-card-view.es.js';
+export { ScoresCardView } from './components/scores-card-view.es.js';
+export { TokenUsageByAgentCardView } from './components/token-usage-by-agent-card-view.es.js';
+export { TokenUsageTimelineCardView } from './components/token-usage-timeline-card-view.es.js';
+export { TracesVolumeCardView } from './components/traces-volume-card-view.es.js';
+//# sourceMappingURL=components.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}