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

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

@@ -1,11 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
 const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
 const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_ShareBar = require("../../../ShareBar-3Z5np-NY.cjs");
 const require_domains_metrics_hooks_use_token_spend = require("../hooks/use-token-spend.cjs.js");
@@ -14,6 +13,25 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _tanstack_react_query = require("@tanstack/react-query");
 let _mastra_react_hooks_metrics = require("@mastra/react/hooks/metrics");
 // src/domains/metrics/components/usage-card.tsx
+var TITLE = {
+	agents: "Usage by agent",
+	models: "Usage by model",
+	threads: "Usage by thread"
+};
+var VIEWS = [
+	{
+		value: "agents",
+		label: TITLE.agents
+	},
+	{
+		value: "models",
+		label: TITLE.models
+	},
+	{
+		value: "threads",
+		label: TITLE.threads
+	}
+];
 var KEEP = { placeholderData: _tanstack_react_query.keepPreviousData };
 var COLUMNS = [{ label: "Tokens" }];
 /** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */
@@ -85,7 +103,7 @@ function ThreadsUsage(props) {
 		isError
 	});
 }
-/** The card itself: tabs, the cost summary and the ranked list, for whichever tab is open. */
+/** The card itself: the view menu, the cost total and the ranked list, for whichever tab is open. */
 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) => ({
@@ -97,27 +115,13 @@ function UsageFrame({ view, onViewChange, onViewTraces, rows, isLoading, isUpdat
 		onClick: r.onClick
 	}));
 	const layout = {
-		title: "Usage",
-		description: "Who is spending: cost share, with tokens.",
-		actions: onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: onViewTraces }),
-		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsCard.MetricsCard.Tabs, {
+		title: TITLE[view],
+		titleMenu: {
 			value: view,
 			onValueChange: onViewChange,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-					value: "agents",
-					children: "Agents"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-					value: "models",
-					children: "Models"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Tab, {
-					value: "threads",
-					children: "Threads"
-				})
-			]
-		}) })
+			options: VIEWS
+		},
+		actions: onViewTraces && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenInTracesButton, { onClick: onViewTraces })
 	};
 	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
@@ -125,11 +129,8 @@ function UsageFrame({ view, onViewChange, onViewTraces, rows, isLoading, isUpdat
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Summary, {
-			value: require_domains_metrics_lib_chart_format.formatUsd(rows.reduce((sum, r) => sum + r.cost, 0)),
-			label: "cost",
-			isLoading
-		}),
+		total: require_domains_metrics_lib_chart_format.formatUsd(rows.reduce((sum, r) => sum + r.cost, 0)),
+		isLoading,
 		isUpdating,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_area.ChartArea, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ShareBar.ShareBar, {
 			rows: shareRows,

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

@@ -1 +1 @@
-{"version":3,"file":"usage-card.cjs.js","names":["keepPreviousData","useState","useTokenUsageByAgentMetrics","useMetricsFilters","useTokenSpend","formatUsd","formatCount","OpenInTracesButton","MetricsCard","ChartCard","ChartCardError","ChartArea","ShareBar","CHART_COLORS"],"sources":["../../../../src/domains/metrics/components/usage-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTokenUsageByAgentMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { useTokenSpend } from '../hooks/use-token-spend';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatUsd } from '../lib/chart-format';\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 { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype View = 'agents' | 'models' | 'threads';\ntype UsageRow = { key: string; cost: number; tokens: number; onClick?: () => void };\n\nexport type UsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the agent name of the clicked row in the Agents tab. */\n  onAgentClick?: (agentName: string) => void;\n  /** Called with the model of the clicked row in the Models tab. */\n  onModelClick?: (model: string) => void;\n  /** Called with the thread ID of the clicked row in the Threads tab. */\n  onThreadClick?: (threadId: string) => void;\n};\ntype ViewProps = UsageCardProps & { onViewChange: (view: View) => void };\n\nconst KEEP = { placeholderData: keepPreviousData };\nconst COLUMNS = [{ label: 'Tokens' }];\n\n/** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */\nexport function UsageCard(props: UsageCardProps) {\n  const [view, setView] = useState<View>('agents');\n  if (view === 'models') return <ModelsUsage {...props} onViewChange={setView} />;\n  if (view === 'threads') return <ThreadsUsage {...props} onViewChange={setView} />;\n  return <AgentsUsage {...props} onViewChange={setView} />;\n}\n\nfunction AgentsUsage(props: ViewProps) {\n  const { onAgentClick } = props;\n  const {\n    data = [],\n    isLoading,\n    isPlaceholderData,\n    isError,\n  } = useTokenUsageByAgentMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  const rows = data.map(a => ({\n    key: a.name,\n    cost: a.cost ?? 0,\n    tokens: a.total,\n    onClick: onAgentClick && (() => onAgentClick(a.name)),\n  }));\n  return (\n    <UsageFrame\n      view=\"agents\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ModelsUsage(props: ViewProps) {\n  const { onModelClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('model');\n  const rows = data.map(m => ({ ...m, onClick: onModelClick && (() => onModelClick(m.key)) }));\n  return (\n    <UsageFrame\n      view=\"models\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ThreadsUsage(props: ViewProps) {\n  const { onThreadClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('threadId');\n  const rows = data.map(t => ({ ...t, onClick: onThreadClick && (() => onThreadClick(t.key)) }));\n  return (\n    <UsageFrame\n      view=\"threads\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\n/** The card itself: tabs, the cost summary and the ranked list, for whichever tab is open. */\nfunction UsageFrame({\n  view,\n  onViewChange,\n  onViewTraces,\n  rows,\n  isLoading,\n  isUpdating,\n  isError,\n}: ViewProps & { view: View; rows: UsageRow[]; isLoading: boolean; isUpdating: boolean; isError: boolean }) {\n  const tokensOf = new Map(rows.map(r => [r.key, r.tokens]));\n  const shareRows: ShareBarRow[] = rows.map(r => ({\n    key: r.key,\n    label: r.key,\n    share: r.cost,\n    value: formatUsd(r.cost),\n    cells: [formatCount(r.tokens)],\n    onClick: r.onClick,\n  }));\n\n  const layout = {\n    title: 'Usage',\n    description: 'Who is spending: cost share, with tokens.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsCard.Tabs<View> value={view} onValueChange={onViewChange}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"models\">Models</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"threads\">Threads</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={formatUsd(rows.reduce((sum, r) => sum + r.cost, 0))}\n          label=\"cost\"\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isUpdating}\n    >\n      <ChartArea>\n        <ShareBar\n          rows={shareRows}\n          columns={COLUMNS}\n          valueLabel=\"Cost\"\n          color={CHART_COLORS.green}\n          other={rest => ({\n            value: formatUsd(rest.reduce((sum, r) => sum + r.share, 0)),\n            cells: [formatCount(rest.reduce((sum, r) => sum + (tokensOf.get(r.key) ?? 0), 0))],\n          })}\n          emptyState=\"No model usage in this range.\"\n          isLoading={isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"usage-card.cjs.js","names":["keepPreviousData","useState","useTokenUsageByAgentMetrics","useMetricsFilters","useTokenSpend","formatUsd","formatCount","OpenInTracesButton","ChartCard","ChartCardError","ChartArea","ShareBar","CHART_COLORS"],"sources":["../../../../src/domains/metrics/components/usage-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTokenUsageByAgentMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { useTokenSpend } from '../hooks/use-token-spend';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatUsd } from '../lib/chart-format';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype View = 'agents' | 'models' | 'threads';\n\nconst TITLE: Record<View, string> = {\n  agents: 'Usage by agent',\n  models: 'Usage by model',\n  threads: 'Usage by thread',\n};\n\nconst VIEWS = [\n  { value: 'agents', label: TITLE.agents },\n  { value: 'models', label: TITLE.models },\n  { value: 'threads', label: TITLE.threads },\n] as const;\ntype UsageRow = { key: string; cost: number; tokens: number; onClick?: () => void };\n\nexport type UsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the agent name of the clicked row in the Agents tab. */\n  onAgentClick?: (agentName: string) => void;\n  /** Called with the model of the clicked row in the Models tab. */\n  onModelClick?: (model: string) => void;\n  /** Called with the thread ID of the clicked row in the Threads tab. */\n  onThreadClick?: (threadId: string) => void;\n};\ntype ViewProps = UsageCardProps & { onViewChange: (view: View) => void };\n\nconst KEEP = { placeholderData: keepPreviousData };\nconst COLUMNS = [{ label: 'Tokens' }];\n\n/** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */\nexport function UsageCard(props: UsageCardProps) {\n  const [view, setView] = useState<View>('agents');\n  if (view === 'models') return <ModelsUsage {...props} onViewChange={setView} />;\n  if (view === 'threads') return <ThreadsUsage {...props} onViewChange={setView} />;\n  return <AgentsUsage {...props} onViewChange={setView} />;\n}\n\nfunction AgentsUsage(props: ViewProps) {\n  const { onAgentClick } = props;\n  const {\n    data = [],\n    isLoading,\n    isPlaceholderData,\n    isError,\n  } = useTokenUsageByAgentMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  const rows = data.map(a => ({\n    key: a.name,\n    cost: a.cost ?? 0,\n    tokens: a.total,\n    onClick: onAgentClick && (() => onAgentClick(a.name)),\n  }));\n  return (\n    <UsageFrame\n      view=\"agents\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ModelsUsage(props: ViewProps) {\n  const { onModelClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('model');\n  const rows = data.map(m => ({ ...m, onClick: onModelClick && (() => onModelClick(m.key)) }));\n  return (\n    <UsageFrame\n      view=\"models\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ThreadsUsage(props: ViewProps) {\n  const { onThreadClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('threadId');\n  const rows = data.map(t => ({ ...t, onClick: onThreadClick && (() => onThreadClick(t.key)) }));\n  return (\n    <UsageFrame\n      view=\"threads\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\n/** The card itself: the view menu, the cost total and the ranked list, for whichever tab is open. */\nfunction UsageFrame({\n  view,\n  onViewChange,\n  onViewTraces,\n  rows,\n  isLoading,\n  isUpdating,\n  isError,\n}: ViewProps & { view: View; rows: UsageRow[]; isLoading: boolean; isUpdating: boolean; isError: boolean }) {\n  const tokensOf = new Map(rows.map(r => [r.key, r.tokens]));\n  const shareRows: ShareBarRow[] = rows.map(r => ({\n    key: r.key,\n    label: r.key,\n    share: r.cost,\n    value: formatUsd(r.cost),\n    cells: [formatCount(r.tokens)],\n    onClick: r.onClick,\n  }));\n\n  const layout = {\n    title: TITLE[view],\n    titleMenu: { value: view, onValueChange: onViewChange, options: VIEWS },\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      total={formatUsd(rows.reduce((sum, r) => sum + r.cost, 0))}\n      isLoading={isLoading}\n      isUpdating={isUpdating}\n    >\n      <ChartArea>\n        <ShareBar\n          rows={shareRows}\n          columns={COLUMNS}\n          valueLabel=\"Cost\"\n          color={CHART_COLORS.green}\n          other={rest => ({\n            value: formatUsd(rest.reduce((sum, r) => sum + r.share, 0)),\n            cells: [formatCount(rest.reduce((sum, r) => sum + (tokensOf.get(r.key) ?? 0), 0))],\n          })}\n          emptyState=\"No model usage in this range.\"\n          isLoading={isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,18 +1,36 @@
-import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { formatCount, formatUsd } from "../lib/chart-format.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { OpenInTracesButton } from "./card-action-buttons.es.js";
 import { t as ShareBar } from "../../../ShareBar-D6dWWl4C.js";
 import { useTokenSpend } from "../hooks/use-token-spend.es.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useTokenUsageByAgentMetrics } from "@mastra/react/hooks/metrics";
 // src/domains/metrics/components/usage-card.tsx
+var TITLE = {
+	agents: "Usage by agent",
+	models: "Usage by model",
+	threads: "Usage by thread"
+};
+var VIEWS = [
+	{
+		value: "agents",
+		label: TITLE.agents
+	},
+	{
+		value: "models",
+		label: TITLE.models
+	},
+	{
+		value: "threads",
+		label: TITLE.threads
+	}
+];
 var KEEP = { placeholderData: keepPreviousData };
 var COLUMNS = [{ label: "Tokens" }];
 /** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */
@@ -84,7 +102,7 @@ function ThreadsUsage(props) {
 		isError
 	});
 }
-/** The card itself: tabs, the cost summary and the ranked list, for whichever tab is open. */
+/** The card itself: the view menu, the cost total and the ranked list, for whichever tab is open. */
 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) => ({
@@ -96,27 +114,13 @@ function UsageFrame({ view, onViewChange, onViewTraces, rows, isLoading, isUpdat
 		onClick: r.onClick
 	}));
 	const layout = {
-		title: "Usage",
-		description: "Who is spending: cost share, with tokens.",
-		actions: onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: onViewTraces }),
-		toolbar: /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__PURE__ */ jsxs(MetricsCard.Tabs, {
+		title: TITLE[view],
+		titleMenu: {
 			value: view,
 			onValueChange: onViewChange,
-			children: [
-				/* @__PURE__ */ jsx(MetricsCard.Tab, {
-					value: "agents",
-					children: "Agents"
-				}),
-				/* @__PURE__ */ jsx(MetricsCard.Tab, {
-					value: "models",
-					children: "Models"
-				}),
-				/* @__PURE__ */ jsx(MetricsCard.Tab, {
-					value: "threads",
-					children: "Threads"
-				})
-			]
-		}) })
+			options: VIEWS
+		},
+		actions: onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: onViewTraces })
 	};
 	if (isError) return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
@@ -124,11 +128,8 @@ function UsageFrame({ view, onViewChange, onViewTraces, rows, isLoading, isUpdat
 	});
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ jsx(MetricsCard.Summary, {
-			value: formatUsd(rows.reduce((sum, r) => sum + r.cost, 0)),
-			label: "cost",
-			isLoading
-		}),
+		total: formatUsd(rows.reduce((sum, r) => sum + r.cost, 0)),
+		isLoading,
 		isUpdating,
 		children: /* @__PURE__ */ jsx(ChartArea, { children: /* @__PURE__ */ jsx(ShareBar, {
 			rows: shareRows,

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

@@ -1 +1 @@
-{"version":3,"file":"usage-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/usage-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTokenUsageByAgentMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { useTokenSpend } from '../hooks/use-token-spend';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatUsd } from '../lib/chart-format';\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 { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype View = 'agents' | 'models' | 'threads';\ntype UsageRow = { key: string; cost: number; tokens: number; onClick?: () => void };\n\nexport type UsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the agent name of the clicked row in the Agents tab. */\n  onAgentClick?: (agentName: string) => void;\n  /** Called with the model of the clicked row in the Models tab. */\n  onModelClick?: (model: string) => void;\n  /** Called with the thread ID of the clicked row in the Threads tab. */\n  onThreadClick?: (threadId: string) => void;\n};\ntype ViewProps = UsageCardProps & { onViewChange: (view: View) => void };\n\nconst KEEP = { placeholderData: keepPreviousData };\nconst COLUMNS = [{ label: 'Tokens' }];\n\n/** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */\nexport function UsageCard(props: UsageCardProps) {\n  const [view, setView] = useState<View>('agents');\n  if (view === 'models') return <ModelsUsage {...props} onViewChange={setView} />;\n  if (view === 'threads') return <ThreadsUsage {...props} onViewChange={setView} />;\n  return <AgentsUsage {...props} onViewChange={setView} />;\n}\n\nfunction AgentsUsage(props: ViewProps) {\n  const { onAgentClick } = props;\n  const {\n    data = [],\n    isLoading,\n    isPlaceholderData,\n    isError,\n  } = useTokenUsageByAgentMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  const rows = data.map(a => ({\n    key: a.name,\n    cost: a.cost ?? 0,\n    tokens: a.total,\n    onClick: onAgentClick && (() => onAgentClick(a.name)),\n  }));\n  return (\n    <UsageFrame\n      view=\"agents\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ModelsUsage(props: ViewProps) {\n  const { onModelClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('model');\n  const rows = data.map(m => ({ ...m, onClick: onModelClick && (() => onModelClick(m.key)) }));\n  return (\n    <UsageFrame\n      view=\"models\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ThreadsUsage(props: ViewProps) {\n  const { onThreadClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('threadId');\n  const rows = data.map(t => ({ ...t, onClick: onThreadClick && (() => onThreadClick(t.key)) }));\n  return (\n    <UsageFrame\n      view=\"threads\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\n/** The card itself: tabs, the cost summary and the ranked list, for whichever tab is open. */\nfunction UsageFrame({\n  view,\n  onViewChange,\n  onViewTraces,\n  rows,\n  isLoading,\n  isUpdating,\n  isError,\n}: ViewProps & { view: View; rows: UsageRow[]; isLoading: boolean; isUpdating: boolean; isError: boolean }) {\n  const tokensOf = new Map(rows.map(r => [r.key, r.tokens]));\n  const shareRows: ShareBarRow[] = rows.map(r => ({\n    key: r.key,\n    label: r.key,\n    share: r.cost,\n    value: formatUsd(r.cost),\n    cells: [formatCount(r.tokens)],\n    onClick: r.onClick,\n  }));\n\n  const layout = {\n    title: 'Usage',\n    description: 'Who is spending: cost share, with tokens.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsCard.Tabs<View> value={view} onValueChange={onViewChange}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"models\">Models</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"threads\">Threads</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={formatUsd(rows.reduce((sum, r) => sum + r.cost, 0))}\n          label=\"cost\"\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isUpdating}\n    >\n      <ChartArea>\n        <ShareBar\n          rows={shareRows}\n          columns={COLUMNS}\n          valueLabel=\"Cost\"\n          color={CHART_COLORS.green}\n          other={rest => ({\n            value: formatUsd(rest.reduce((sum, r) => sum + r.share, 0)),\n            cells: [formatCount(rest.reduce((sum, r) => sum + (tokensOf.get(r.key) ?? 0), 0))],\n          })}\n          emptyState=\"No model usage in this range.\"\n          isLoading={isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"usage-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/usage-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useTokenUsageByAgentMetrics } from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { useTokenSpend } from '../hooks/use-token-spend';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatCount, formatUsd } from '../lib/chart-format';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { ShareBar } from '@/ds/components/ShareBar';\nimport type { ShareBarRow } from '@/ds/components/ShareBar';\n\ntype View = 'agents' | 'models' | 'threads';\n\nconst TITLE: Record<View, string> = {\n  agents: 'Usage by agent',\n  models: 'Usage by model',\n  threads: 'Usage by thread',\n};\n\nconst VIEWS = [\n  { value: 'agents', label: TITLE.agents },\n  { value: 'models', label: TITLE.models },\n  { value: 'threads', label: TITLE.threads },\n] as const;\ntype UsageRow = { key: string; cost: number; tokens: number; onClick?: () => void };\n\nexport type UsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the agent name of the clicked row in the Agents tab. */\n  onAgentClick?: (agentName: string) => void;\n  /** Called with the model of the clicked row in the Models tab. */\n  onModelClick?: (model: string) => void;\n  /** Called with the thread ID of the clicked row in the Threads tab. */\n  onThreadClick?: (threadId: string) => void;\n};\ntype ViewProps = UsageCardProps & { onViewChange: (view: View) => void };\n\nconst KEEP = { placeholderData: keepPreviousData };\nconst COLUMNS = [{ label: 'Tokens' }];\n\n/** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */\nexport function UsageCard(props: UsageCardProps) {\n  const [view, setView] = useState<View>('agents');\n  if (view === 'models') return <ModelsUsage {...props} onViewChange={setView} />;\n  if (view === 'threads') return <ThreadsUsage {...props} onViewChange={setView} />;\n  return <AgentsUsage {...props} onViewChange={setView} />;\n}\n\nfunction AgentsUsage(props: ViewProps) {\n  const { onAgentClick } = props;\n  const {\n    data = [],\n    isLoading,\n    isPlaceholderData,\n    isError,\n  } = useTokenUsageByAgentMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  const rows = data.map(a => ({\n    key: a.name,\n    cost: a.cost ?? 0,\n    tokens: a.total,\n    onClick: onAgentClick && (() => onAgentClick(a.name)),\n  }));\n  return (\n    <UsageFrame\n      view=\"agents\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ModelsUsage(props: ViewProps) {\n  const { onModelClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('model');\n  const rows = data.map(m => ({ ...m, onClick: onModelClick && (() => onModelClick(m.key)) }));\n  return (\n    <UsageFrame\n      view=\"models\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ThreadsUsage(props: ViewProps) {\n  const { onThreadClick } = props;\n  const { data = [], isLoading, isPlaceholderData, isError } = useTokenSpend('threadId');\n  const rows = data.map(t => ({ ...t, onClick: onThreadClick && (() => onThreadClick(t.key)) }));\n  return (\n    <UsageFrame\n      view=\"threads\"\n      {...props}\n      rows={rows}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\n/** The card itself: the view menu, the cost total and the ranked list, for whichever tab is open. */\nfunction UsageFrame({\n  view,\n  onViewChange,\n  onViewTraces,\n  rows,\n  isLoading,\n  isUpdating,\n  isError,\n}: ViewProps & { view: View; rows: UsageRow[]; isLoading: boolean; isUpdating: boolean; isError: boolean }) {\n  const tokensOf = new Map(rows.map(r => [r.key, r.tokens]));\n  const shareRows: ShareBarRow[] = rows.map(r => ({\n    key: r.key,\n    label: r.key,\n    share: r.cost,\n    value: formatUsd(r.cost),\n    cells: [formatCount(r.tokens)],\n    onClick: r.onClick,\n  }));\n\n  const layout = {\n    title: TITLE[view],\n    titleMenu: { value: view, onValueChange: onViewChange, options: VIEWS },\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      total={formatUsd(rows.reduce((sum, r) => sum + r.cost, 0))}\n      isLoading={isLoading}\n      isUpdating={isUpdating}\n    >\n      <ChartArea>\n        <ShareBar\n          rows={shareRows}\n          columns={COLUMNS}\n          valueLabel=\"Cost\"\n          color={CHART_COLORS.green}\n          other={rest => ({\n            value: formatUsd(rest.reduce((sum, r) => sum + r.share, 0)),\n            cells: [formatCount(rest.reduce((sum, r) => sum + (tokensOf.get(r.key) ?? 0), 0))],\n          })}\n          emptyState=\"No model usage in this range.\"\n          isLoading={isLoading}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,18 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_hooks_aggregate_limiter_provider = require("./hooks/aggregate-limiter-provider.cjs.js");
+const require_domains_metrics_components_kpi_card = require("./components/kpi-card.cjs.js");
 const require_domains_metrics_components_chart_area = require("./components/chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./components/chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./components/chart-card-error.cjs.js");
+const require_domains_metrics_components_card_action_buttons = require("./components/card-action-buttons.cjs.js");
+const require_domains_metrics_components_failure_rate_card = require("./components/failure-rate-card.cjs.js");
 const require_domains_metrics_components_agent_runs_card = require("./components/agent-runs-card.cjs.js");
 const require_domains_metrics_components_breakdown_card = require("./components/breakdown-card.cjs.js");
-const require_domains_metrics_components_card_action_buttons = require("./components/card-action-buttons.cjs.js");
 const require_domains_metrics_components_date_range_selector = require("./components/date-range-selector.cjs.js");
 const require_domains_metrics_components_distinct_ids_card = require("./components/distinct-ids-card.cjs.js");
-const require_domains_metrics_components_failure_rate_card = require("./components/failure-rate-card.cjs.js");
 const require_domains_metrics_components_metrics_time_range_chip = require("./components/metrics-time-range-chip.cjs.js");
-const require_domains_metrics_components_kpi_card = require("./components/kpi-card.cjs.js");
 const require_domains_metrics_components_metrics_grid_metrics_grid = require("./components/metrics-grid/metrics-grid.cjs.js");
-const require_domains_metrics_components_metrics_kpis = require("./components/metrics-kpis.cjs.js");
 const require_domains_metrics_components_token_usage_card = require("./components/token-usage-card.cjs.js");
 const require_domains_metrics_components_latency_card = require("./components/latency-card.cjs.js");
 const require_domains_metrics_components_trace_volume_card = require("./components/trace-volume-card.cjs.js");
@@ -30,9 +29,11 @@ exports.FailureRateCard = require_domains_metrics_components_failure_rate_card.F
 exports.KpiCard = require_domains_metrics_components_kpi_card.KpiCard;
 exports.LatencyCard = require_domains_metrics_components_latency_card.LatencyCard;
 exports.MetricsGrid = require_domains_metrics_components_metrics_grid_metrics_grid.MetricsGrid;
-exports.MetricsKpis = require_domains_metrics_components_metrics_kpis.MetricsKpis;
 exports.MetricsTimeRangeChip = require_domains_metrics_components_metrics_time_range_chip.MetricsTimeRangeChip;
 exports.OpenErrorsInLogsButton = require_domains_metrics_components_card_action_buttons.OpenErrorsInLogsButton;
+exports.OpenInLogsButton = require_domains_metrics_components_card_action_buttons.OpenInLogsButton;
+exports.OpenInSpansButton = require_domains_metrics_components_card_action_buttons.OpenInSpansButton;
+exports.OpenInThreadsButton = require_domains_metrics_components_card_action_buttons.OpenInThreadsButton;
 exports.OpenInTracesButton = require_domains_metrics_components_card_action_buttons.OpenInTracesButton;
 exports.ScoresCard = require_domains_metrics_components_scores_card.ScoresCard;
 exports.TokenUsageCard = require_domains_metrics_components_token_usage_card.TokenUsageCard;

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

@@ -1,20 +1,19 @@
 import { AggregateLimiterProvider } from "./hooks/aggregate-limiter-provider.es.js";
+import { KpiCard } from "./components/kpi-card.es.js";
 import { ChartArea } from "./components/chart-area.es.js";
 import { ChartCard } from "./components/chart-card.es.js";
 import { ChartCardError } from "./components/chart-card-error.es.js";
+import { OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton } from "./components/card-action-buttons.es.js";
+import { FailureRateCard } from "./components/failure-rate-card.es.js";
 import { AgentRunsCard } from "./components/agent-runs-card.es.js";
 import { BreakdownCard } from "./components/breakdown-card.es.js";
-import { OpenErrorsInLogsButton, OpenInTracesButton } from "./components/card-action-buttons.es.js";
 import { DateRangeSelector } from "./components/date-range-selector.es.js";
 import { DistinctIdsCard } from "./components/distinct-ids-card.es.js";
-import { FailureRateCard } from "./components/failure-rate-card.es.js";
 import { MetricsTimeRangeChip } from "./components/metrics-time-range-chip.es.js";
-import { KpiCard } from "./components/kpi-card.es.js";
 import { MetricsGrid } from "./components/metrics-grid/metrics-grid.es.js";
-import { MetricsKpis } from "./components/metrics-kpis.es.js";
 import { TokenUsageCard } from "./components/token-usage-card.es.js";
 import { LatencyCard } from "./components/latency-card.es.js";
 import { TraceVolumeCard } from "./components/trace-volume-card.es.js";
 import { UsageCard } from "./components/usage-card.es.js";
 import { ScoresCard } from "./components/scores-card.es.js";
-export { AgentRunsCard, AggregateLimiterProvider, BreakdownCard, ChartArea, ChartCard, ChartCardError, DateRangeSelector, DistinctIdsCard, FailureRateCard, KpiCard, LatencyCard, MetricsGrid, MetricsKpis, MetricsTimeRangeChip, OpenErrorsInLogsButton, OpenInTracesButton, ScoresCard, TokenUsageCard, TraceVolumeCard, UsageCard };
+export { AgentRunsCard, AggregateLimiterProvider, BreakdownCard, ChartArea, ChartCard, ChartCardError, DateRangeSelector, DistinctIdsCard, FailureRateCard, KpiCard, LatencyCard, MetricsGrid, MetricsTimeRangeChip, OpenErrorsInLogsButton, OpenInLogsButton, OpenInSpansButton, OpenInThreadsButton, OpenInTracesButton, ScoresCard, TokenUsageCard, TraceVolumeCard, UsageCard };

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_trace_filters = require("../../trace-filters-BNEZ31HX.cjs");
 const require_domains_logs_log_filters = require("../logs/log-filters.cjs.js");
-const require_trace_filters = require("../../trace-filters-BpeBUjCb.cjs");
 // src/domains/metrics/drilldown.ts
 /** Map the metrics date preset (`24h`, `3d`, …) to the equivalent traces /
 *  logs preset (`last-24h`, `last-3d`, …). `'custom'` is passed through and

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

@@ -1,5 +1,5 @@
+import { C as TRACE_ROOT_ENTITY_TYPE_PARAM, T as TRACE_STATUS_PARAM, a as TRACE_DATE_FROM_PARAM, c as TRACE_DATE_TO_PARAM, d as TRACE_FILTER_GROUP_PARAM, m as TRACE_LIST_MODE_PARAM, o as TRACE_DATE_PRESET_PARAM, x as TRACE_PROPERTY_FILTER_PARAM_BY_FIELD } from "../../trace-filters-BJaebsxJ.js";
 import { LOGS_DATE_FROM_PARAM, LOGS_DATE_PRESET_PARAM, LOGS_DATE_TO_PARAM, LOGS_PROPERTY_FILTER_PARAM_BY_FIELD, LOGS_ROOT_ENTITY_TYPE_PARAM } from "../logs/log-filters.es.js";
-import { C as TRACE_ROOT_ENTITY_TYPE_PARAM, T as TRACE_STATUS_PARAM, a as TRACE_DATE_FROM_PARAM, c as TRACE_DATE_TO_PARAM, d as TRACE_FILTER_GROUP_PARAM, m as TRACE_LIST_MODE_PARAM, o as TRACE_DATE_PRESET_PARAM, x as TRACE_PROPERTY_FILTER_PARAM_BY_FIELD } from "../../trace-filters-C27yWcan.js";
 // src/domains/metrics/drilldown.ts
 /** Map the metrics date preset (`24h`, `3d`, …) to the equivalent traces /
 *  logs preset (`last-24h`, `last-3d`, …). `'custom'` is passed through and

package/dist/domains/metrics/hooks/use-metrics-activity.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("./use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
 let _mastra_react = require("@mastra/react");
 let _tanstack_react_query = require("@tanstack/react-query");
 // src/domains/metrics/hooks/use-metrics-activity.ts

package/dist/domains/metrics/hooks/use-metrics-activity.es.js

@@ -1,5 +1,5 @@
-import { bucketGrid, bucketPlan, gridIndex } from "../lib/metrics-buckets.es.js";
 import { useMetricsFilters } from "./use-metrics-filters.es.js";
+import { bucketGrid, bucketPlan, gridIndex } from "../lib/metrics-buckets.es.js";
 import { useMastraClient } from "@mastra/react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 // src/domains/metrics/hooks/use-metrics-activity.ts

package/dist/domains/metrics/hooks/use-metrics-latency.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("./use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
 let _mastra_react = require("@mastra/react");
 let _tanstack_react_query = require("@tanstack/react-query");
 // src/domains/metrics/hooks/use-metrics-latency.ts

package/dist/domains/metrics/hooks/use-metrics-latency.es.js

@@ -1,5 +1,5 @@
-import { bucketGrid, bucketPlan, gridIndex, intervalHours } from "../lib/metrics-buckets.es.js";
 import { useMetricsFilters } from "./use-metrics-filters.es.js";
+import { bucketGrid, bucketPlan, gridIndex, intervalHours } from "../lib/metrics-buckets.es.js";
 import { useMastraClient } from "@mastra/react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 // src/domains/metrics/hooks/use-metrics-latency.ts

package/dist/domains/metrics/hooks/use-metrics-scores.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("./use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
 let _mastra_react = require("@mastra/react");
 let _tanstack_react_query = require("@tanstack/react-query");
 // src/domains/metrics/hooks/use-metrics-scores.ts

package/dist/domains/metrics/hooks/use-metrics-scores.es.js

@@ -1,5 +1,5 @@
-import { bucketGrid, bucketPlan, gridIndex, intervalHours } from "../lib/metrics-buckets.es.js";
 import { useMetricsFilters } from "./use-metrics-filters.es.js";
+import { bucketGrid, bucketPlan, gridIndex, intervalHours } from "../lib/metrics-buckets.es.js";
 import { useMastraClient } from "@mastra/react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 // src/domains/metrics/hooks/use-metrics-scores.ts

package/dist/domains/metrics/hooks/use-metrics-span-aggregate.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_hooks_use_aggregate_limiter = require("./use-aggregate-limiter.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("./use-metrics-filters.cjs.js");
-const require_domains_metrics_lib_trace_aggregate = require("../lib/trace-aggregate.cjs.js");
 const require_domains_metrics_lib_span_aggregate = require("../lib/span-aggregate.cjs.js");
+const require_domains_metrics_lib_trace_aggregate = require("../lib/trace-aggregate.cjs.js");
 let _mastra_react = require("@mastra/react");
 let _mastra_react_hooks_capabilities = require("@mastra/react/hooks/capabilities");
 let _tanstack_react_query = require("@tanstack/react-query");

package/dist/domains/metrics/hooks/use-metrics-span-aggregate.es.js

@@ -1,7 +1,7 @@
 import { useLimitedQueryFn } from "./use-aggregate-limiter.es.js";
 import { useMetricsFilters } from "./use-metrics-filters.es.js";
-import { toTraceAggregateTimeRange, traceAggregateInterval } from "../lib/trace-aggregate.es.js";
 import { buildSpanAggregateWhere } from "../lib/span-aggregate.es.js";
+import { toTraceAggregateTimeRange, traceAggregateInterval } from "../lib/trace-aggregate.es.js";
 import { useMastraClient } from "@mastra/react";
 import { useObservabilityCapabilities } from "@mastra/react/hooks/capabilities";
 import { keepPreviousData } from "@tanstack/react-query";

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

@@ -2,9 +2,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_metrics_filters = require("./metrics-filters.cjs.js");
 const require_domains_metrics_hooks_use_metrics = require("./hooks/use-metrics.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("./hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_hooks_use_metrics_scope = require("./hooks/use-metrics-scope.cjs.js");
 const require_domains_metrics_hooks_use_metrics_activity = require("./hooks/use-metrics-activity.cjs.js");
 const require_domains_metrics_hooks_use_metrics_usage_totals = require("./hooks/use-metrics-usage-totals.cjs.js");
-const require_domains_metrics_hooks_use_metrics_scope = require("./hooks/use-metrics-scope.cjs.js");
 const require_domains_metrics_hooks_use_metrics_latency = require("./hooks/use-metrics-latency.cjs.js");
 const require_domains_metrics_hooks_use_token_spend = require("./hooks/use-token-spend.cjs.js");
 const require_domains_metrics_hooks_use_metrics_scores = require("./hooks/use-metrics-scores.cjs.js");

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

@@ -1,9 +1,9 @@
 import { METRICS_FILTER_BAR_OPERATORS, applyMetricsPropertyFilterTokens, buildMetricsDimensionalFilter, clearSavedMetricsFilters, createMetricsFilterBarFields, createMetricsPropertyFilterFields, filterBarItemsToMetricsTokens, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, loadMetricsFiltersFromStorage, metricsTokensToFilterBarItems, saveMetricsFiltersToStorage } from "./metrics-filters.es.js";
 import { DATE_PRESETS, MetricsProvider, isValidPreset, useMetrics } from "./hooks/use-metrics.es.js";
 import { useMetricsFilters } from "./hooks/use-metrics-filters.es.js";
+import { useMetricsScope } from "./hooks/use-metrics-scope.es.js";
 import { useMetricsActivity } from "./hooks/use-metrics-activity.es.js";
 import { USAGE_METRICS, useMetricsUsageTotals } from "./hooks/use-metrics-usage-totals.es.js";
-import { useMetricsScope } from "./hooks/use-metrics-scope.es.js";
 import { useMetricsLatency } from "./hooks/use-metrics-latency.es.js";
 import { useTokenSpend } from "./hooks/use-token-spend.es.js";
 import { useMetricsScores } from "./hooks/use-metrics-scores.es.js";

package/dist/domains/metrics/lib/breakdown-table.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_lib_chart_format = require("./chart-format.cjs.js");
-const require_domains_metrics_lib_breakdown = require("./breakdown.cjs.js");
-const require_domains_metrics_lib_time_window = require("./time-window.cjs.js");
 const require_domains_metrics_lib_trace_aggregate = require("./trace-aggregate.cjs.js");
+const require_domains_metrics_lib_time_window = require("./time-window.cjs.js");
+const require_domains_metrics_lib_breakdown = require("./breakdown.cjs.js");
 // src/domains/metrics/lib/breakdown-table.ts
 var DASH = "—";
 /** What the Change column can compare: the sorted column, or the last one sorted. */

package/dist/domains/metrics/lib/breakdown-table.es.js

@@ -1,7 +1,7 @@
 import { formatCount, formatDuration, formatPercent, formatUsd } from "./chart-format.es.js";
-import { BREAKDOWN_SPAN_TYPES, countsSpans, isEntityTab, withDropped } from "./breakdown.es.js";
-import { previousWindow } from "./time-window.es.js";
 import { toTraceAggregateTimeRange } from "./trace-aggregate.es.js";
+import { previousWindow } from "./time-window.es.js";
+import { BREAKDOWN_SPAN_TYPES, countsSpans, isEntityTab, withDropped } from "./breakdown.es.js";
 // src/domains/metrics/lib/breakdown-table.ts
 var DASH = "—";
 /** What the Change column can compare: the sorted column, or the last one sorted. */

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

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_metrics_lib_chart_format = require("./lib/chart-format.cjs.js");
 const require_domains_metrics_lib_bucket_labels = require("./lib/bucket-labels.cjs.js");
+const require_domains_metrics_lib_time_window = require("./lib/time-window.cjs.js");
 const require_domains_metrics_lib_chart_axis = require("./lib/chart-axis.cjs.js");
 const require_domains_metrics_lib_chart_colors = require("./lib/chart-colors.cjs.js");
-const require_domains_metrics_lib_chart_format = require("./lib/chart-format.cjs.js");
 const require_domains_metrics_lib_breakdown = require("./lib/breakdown.cjs.js");
-const require_domains_metrics_lib_time_window = require("./lib/time-window.cjs.js");
 exports.BREAKDOWN_GROUP_LIMIT = require_domains_metrics_lib_breakdown.BREAKDOWN_GROUP_LIMIT;
 exports.BREAKDOWN_SPAN_TYPES = require_domains_metrics_lib_breakdown.BREAKDOWN_SPAN_TYPES;
 exports.BUCKET_AXIS = require_domains_metrics_lib_chart_axis.BUCKET_AXIS;

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

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

package/dist/domains/metrics/metrics-filters.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_trace_filters = require("../../trace-filters-BpeBUjCb.cjs");
+const require_trace_filters = require("../../trace-filters-BNEZ31HX.cjs");
 let lucide_react = require("lucide-react");
 // src/domains/metrics/metrics-filters.ts
 /** Primitive type options — matches the traces filter vocabulary. */

package/dist/domains/metrics/metrics-filters.es.js

@@ -1,4 +1,4 @@
-import { X as traceFilterFieldIcon, Y as traceFilterFieldColor } from "../../trace-filters-C27yWcan.js";
+import { Q as traceFilterFieldIcon, Z as traceFilterFieldColor } from "../../trace-filters-BJaebsxJ.js";
 import { CloudIcon, CpuIcon } from "lucide-react";
 // src/domains/metrics/metrics-filters.ts
 /** Primitive type options — matches the traces filter vocabulary. */

package/dist/domains/metrics.cjs.js

@@ -1,30 +1,29 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_bucket_labels = require("./metrics/lib/bucket-labels.cjs.js");
 const require_domains_metrics_metrics_filters = require("./metrics/metrics-filters.cjs.js");
 const require_domains_metrics_hooks_aggregate_limiter_provider = require("./metrics/hooks/aggregate-limiter-provider.cjs.js");
 const require_domains_metrics_hooks_use_metrics = require("./metrics/hooks/use-metrics.cjs.js");
-const require_domains_metrics_hooks_use_metrics_filters = require("./metrics/hooks/use-metrics-filters.cjs.js");
-const require_domains_metrics_hooks_use_metrics_activity = require("./metrics/hooks/use-metrics-activity.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("./metrics/lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("./metrics/lib/chart-colors.cjs.js");
+const require_domains_metrics_components_kpi_card = require("./metrics/components/kpi-card.cjs.js");
 const require_domains_metrics_lib_chart_format = require("./metrics/lib/chart-format.cjs.js");
+const require_domains_metrics_hooks_use_metrics_filters = require("./metrics/hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_bucket_labels = require("./metrics/lib/bucket-labels.cjs.js");
+const require_domains_metrics_lib_time_window = require("./metrics/lib/time-window.cjs.js");
 const require_domains_metrics_components_chart_area = require("./metrics/components/chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./metrics/components/chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./metrics/components/chart-card-error.cjs.js");
-const require_domains_metrics_components_agent_runs_card = require("./metrics/components/agent-runs-card.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("./metrics/lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("./metrics/lib/chart-colors.cjs.js");
 const require_domains_metrics_lib_breakdown = require("./metrics/lib/breakdown.cjs.js");
-const require_domains_metrics_lib_time_window = require("./metrics/lib/time-window.cjs.js");
-const require_domains_metrics_hooks_use_metrics_usage_totals = require("./metrics/hooks/use-metrics-usage-totals.cjs.js");
 const require_domains_metrics_hooks_use_metrics_scope = require("./metrics/hooks/use-metrics-scope.cjs.js");
-const require_domains_metrics_components_breakdown_card = require("./metrics/components/breakdown-card.cjs.js");
 const require_domains_metrics_components_card_action_buttons = require("./metrics/components/card-action-buttons.cjs.js");
+const require_domains_metrics_hooks_use_metrics_activity = require("./metrics/hooks/use-metrics-activity.cjs.js");
+const require_domains_metrics_components_failure_rate_card = require("./metrics/components/failure-rate-card.cjs.js");
+const require_domains_metrics_components_agent_runs_card = require("./metrics/components/agent-runs-card.cjs.js");
+const require_domains_metrics_hooks_use_metrics_usage_totals = require("./metrics/hooks/use-metrics-usage-totals.cjs.js");
+const require_domains_metrics_components_breakdown_card = require("./metrics/components/breakdown-card.cjs.js");
 const require_domains_metrics_components_date_range_selector = require("./metrics/components/date-range-selector.cjs.js");
 const require_domains_metrics_components_distinct_ids_card = require("./metrics/components/distinct-ids-card.cjs.js");
-const require_domains_metrics_components_failure_rate_card = require("./metrics/components/failure-rate-card.cjs.js");
 const require_domains_metrics_components_metrics_time_range_chip = require("./metrics/components/metrics-time-range-chip.cjs.js");
-const require_domains_metrics_components_kpi_card = require("./metrics/components/kpi-card.cjs.js");
 const require_domains_metrics_components_metrics_grid_metrics_grid = require("./metrics/components/metrics-grid/metrics-grid.cjs.js");
-const require_domains_metrics_components_metrics_kpis = require("./metrics/components/metrics-kpis.cjs.js");
 const require_domains_metrics_components_token_usage_card = require("./metrics/components/token-usage-card.cjs.js");
 const require_domains_metrics_hooks_use_metrics_latency = require("./metrics/hooks/use-metrics-latency.cjs.js");
 const require_domains_metrics_components_latency_card = require("./metrics/components/latency-card.cjs.js");
@@ -58,10 +57,12 @@ exports.KpiCard = require_domains_metrics_components_kpi_card.KpiCard;
 exports.LatencyCard = require_domains_metrics_components_latency_card.LatencyCard;
 exports.METRICS_FILTER_BAR_OPERATORS = require_domains_metrics_metrics_filters.METRICS_FILTER_BAR_OPERATORS;
 exports.MetricsGrid = require_domains_metrics_components_metrics_grid_metrics_grid.MetricsGrid;
-exports.MetricsKpis = require_domains_metrics_components_metrics_kpis.MetricsKpis;
 exports.MetricsProvider = require_domains_metrics_hooks_use_metrics.MetricsProvider;
 exports.MetricsTimeRangeChip = require_domains_metrics_components_metrics_time_range_chip.MetricsTimeRangeChip;
 exports.OpenErrorsInLogsButton = require_domains_metrics_components_card_action_buttons.OpenErrorsInLogsButton;
+exports.OpenInLogsButton = require_domains_metrics_components_card_action_buttons.OpenInLogsButton;
+exports.OpenInSpansButton = require_domains_metrics_components_card_action_buttons.OpenInSpansButton;
+exports.OpenInThreadsButton = require_domains_metrics_components_card_action_buttons.OpenInThreadsButton;
 exports.OpenInTracesButton = require_domains_metrics_components_card_action_buttons.OpenInTracesButton;
 exports.ScoresCard = require_domains_metrics_components_scores_card.ScoresCard;
 exports.TokenUsageCard = require_domains_metrics_components_token_usage_card.TokenUsageCard;