npm - @mastra/playground-ui - Versions diffs - 58.1.0-alpha.0 → 59.0.0 - Mend

@mastra/playground-ui 58.1.0-alpha.0 → 59.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (594) hide show

package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js CHANGED Viewed

@@ -10,6 +10,7 @@ const tabsContent = require('../../../tabs-content-DlCJoQUW.cjs');
 const tabsRoot = require('../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../tabs-tab-DFmRMdi3.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
+const utils_cost = require('../../../utils/cost.cjs.js');
 function isTokenUsageTab(value) {
   return value === "tokens" || value === "cost";
@@ -41,7 +42,7 @@ function TokenUsageByAgentCardView({
           description: "Token consumption grouped by agent."
         }
       ),
-      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 && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: utils_cost.formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: utils_cost.formatCompactNumber(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 data" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
@@ -72,7 +73,7 @@ function TokenUsageByAgentCardView({
                 { label: "Output", color: domains_metrics_components_metricsUtils.CHART_COLORS.blue }
               ],
               maxVal: Math.max(...rows.map((d) => d.input + d.output)),
-              fmt: domains_metrics_components_metricsUtils.formatCompact
+              fmt: utils_cost.formatCompactNumber
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "cost", className: "pt-3", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -82,7 +83,7 @@ function TokenUsageByAgentCardView({
               data: costRows.slice().sort((a, b) => (b.cost ?? 0) - (a.cost ?? 0)).map((d) => ({ name: d.name, values: [d.cost], href: getRowHref?.(d) })),
               segments: [{ label: "Cost", color: domains_metrics_components_metricsUtils.CHART_COLORS.purple }],
               maxVal: Math.max(...costRows.map((d) => d.cost ?? 0)),
-              fmt: (v) => domains_metrics_components_metricsUtils.formatCost(v, costUnit)
+              fmt: (v) => utils_cost.formatCost(v, costUnit)
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No cost data yet" }) })
         ]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"token-usage-by-agent-card-view.cjs.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 is TokenUsageByAgentRow & { cost: number } => 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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\n >\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n <TabContent value=\"tokens\" className=\"pt-3\">\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\" className=\"pt-3\">\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":["useState","MetricsCard","jsxs","jsx","formatCost","~~formatCompact~~","Tabs","TabList","Tab","TabContent","HorizontalBars","CHART_COLORS"],"mappings":"~~;;;;;;;;;;;;;AA0BA~~,SAAS,gBAAgB,KAAA,EAAuC;AAC9D,EAAA,OAAO,KAAA,KAAU,YAAY,KAAA,KAAU,MAAA;AACzC;AAEO,SAAS,yBAAA,CAA0B;AAAA,EACxC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAwB,QAAQ,CAAA;AAElE,EAAA,MAAM,IAAA,GAAO,QAAQ,EAAC;AACtB,EAAA,MAAM,OAAA,GAAU,KAAK,MAAA,GAAS,CAAA;AAC9B,EAAA,MAAM,WAAA,GAAc,KAAK,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,GAAI,CAAA,CAAE,KAAA,EAAO,CAAC,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,MAAA,CAAO,CAAC,CAAA,KAAoD,EAAE,IAAA,IAAQ,IAAA,IAAQ,CAAA,CAAE,IAAA,GAAO,CAAC,CAAA;AAC9G,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAI,QAAA,CAAS,IAAI,CAAA,CAAA,KAAK,CAAA,CAAE,QAAA,IAAY,KAAK,CAAC,CAAA;AACtE,EAAA,MAAM,iBAAA,GAAoB,gBAAgB,IAAA,IAAQ,CAAA;AAClD,EAAA,MAAM,QAAA,GAAW,oBAAqB,CAAC,GAAG,eAAe,CAAA,CAAE,CAAC,KAAK,KAAA,GAAS,IAAA;AAC1E,EAAA,MAAM,SAAA,GAAY,iBAAA,GAAoB,QAAA,CAAS,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,IAAK,CAAA,CAAE,IAAA,IAAQ,CAAA,CAAA,EAAI,CAAC,CAAA,GAAI,CAAA;AACxF,EAAA,MAAM,WAAA,GAAc,qBAAqB,SAAA,GAAY,CAAA;AAErD,EAAA,uCACGC,uBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,uBAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAAE,cAAA;AAAA,QAACF,uBAAA,CAAY,mBAAA;AAAA,QAAZ;AAAA,UACC,KAAA,EAAM,sBAAA;AAAA,UACN,WAAA,EAAY;AAAA;AAAA,OACd;AAAA,MACC,OAAA,KACE,SAAA,KAAc,MAAA,IAAU,WAAA,mBACvBE,cAAA,CAACF,wBAAY,OAAA,EAAZ,EAAoB,KAAA,EAAOG,~~kDAAA~~,CAAW,SAAA,EAAW,QAAQ,GAAG,KAAA,EAAM,YAAA,EAAa,CAAA,mBAEhFD,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAOI,~~qDAAA~~,~~CAAc~~,WAAW,CAAA,EAAG,KAAA,EAAM,cAAA,EAAe,CAAA,CAAA;AAAA,~~MAEhF~~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~~kDAAA~~,CAAW,CAAA,EAAG,QAAQ;AAAA;AAAA,8BAGlCD,cAAA,CAACF,uBAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,oBAAmB,CAAA,EAEnD;AAAA;AAAA;AAAA,KACF,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"token-usage-by-agent-card-view.cjs.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 } from './metrics-utils';\nimport { formatCompactNumber, formatCost } from '@/lib/cost';\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 is TokenUsageByAgentRow & { cost: number } => 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={formatCompactNumber(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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\n >\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n <TabContent value=\"tokens\" className=\"pt-3\">\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={formatCompactNumber}\n />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\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":["useState","MetricsCard","jsxs","jsx","formatCost","formatCompactNumber","Tabs","TabList","Tab","TabContent","HorizontalBars","CHART_COLORS"],"mappings":"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"}

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

@@ -5,7 +5,8 @@ import { M as MetricsCard } from '../../../metrics-card-C2RTi5Ew.js';
 import { T as TabContent } from '../../../tabs-content-7ODUUdQ0.js';
 import { a as Tabs, T as TabList } from '../../../tabs-root-UNPxoGhW.js';
 import { T as Tab } from '../../../tabs-tab-DluwCnDF.js';
-import { formatCost, formatCompact, CHART_COLORS } from './metrics-utils.es.js';
+import { CHART_COLORS } from './metrics-utils.es.js';
+import { formatCost, formatCompactNumber } from '../../../utils/cost.es.js';
 function isTokenUsageTab(value) {
   return value === "tokens" || value === "cost";
@@ -37,7 +38,7 @@ function TokenUsageByAgentCardView({
           description: "Token consumption grouped by agent."
         }
       ),
-      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 && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompactNumber(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 data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxs(
@@ -68,7 +69,7 @@ function TokenUsageByAgentCardView({
                 { label: "Output", color: CHART_COLORS.blue }
               ],
               maxVal: Math.max(...rows.map((d) => d.input + d.output)),
-              fmt: formatCompact
+              fmt: formatCompactNumber
             }
           ) }),
           /* @__PURE__ */ jsx(TabContent, { value: "cost", className: "pt-3", children: hasCostData ? /* @__PURE__ */ jsx(

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

	@@ -1 +1 @@
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 is TokenUsageByAgentRow & { cost: number } => 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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\n >\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n <TabContent value=\"tokens\" className=\"pt-3\">\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\" className=\"pt-3\">\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":"~~;;;;;;;;;AA0BA~~,SAAS,gBAAgB,KAAA,EAAuC;AAC9D,EAAA,OAAO,KAAA,KAAU,YAAY,KAAA,KAAU,MAAA;AACzC;AAEO,SAAS,yBAAA,CAA0B;AAAA,EACxC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAwB,QAAQ,CAAA;AAElE,EAAA,MAAM,IAAA,GAAO,QAAQ,EAAC;AACtB,EAAA,MAAM,OAAA,GAAU,KAAK,MAAA,GAAS,CAAA;AAC9B,EAAA,MAAM,WAAA,GAAc,KAAK,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,GAAI,CAAA,CAAE,KAAA,EAAO,CAAC,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,MAAA,CAAO,CAAC,CAAA,KAAoD,EAAE,IAAA,IAAQ,IAAA,IAAQ,CAAA,CAAE,IAAA,GAAO,CAAC,CAAA;AAC9G,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAI,QAAA,CAAS,IAAI,CAAA,CAAA,KAAK,CAAA,CAAE,QAAA,IAAY,KAAK,CAAC,CAAA;AACtE,EAAA,MAAM,iBAAA,GAAoB,gBAAgB,IAAA,IAAQ,CAAA;AAClD,EAAA,MAAM,QAAA,GAAW,oBAAqB,CAAC,GAAG,eAAe,CAAA,CAAE,CAAC,KAAK,KAAA,GAAS,IAAA;AAC1E,EAAA,MAAM,SAAA,GAAY,iBAAA,GAAoB,QAAA,CAAS,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,IAAK,CAAA,CAAE,IAAA,IAAQ,CAAA,CAAA,EAAI,CAAC,CAAA,GAAI,CAAA;AACxF,EAAA,MAAM,WAAA,GAAc,qBAAqB,SAAA,GAAY,CAAA;AAErD,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,WAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,WAAA,CAAY,mBAAA;AAAA,QAAZ;AAAA,UACC,KAAA,EAAM,sBAAA;AAAA,UACN,WAAA,EAAY;AAAA;AAAA,OACd;AAAA,MACC,OAAA,KACE,SAAA,KAAc,MAAA,IAAU,WAAA,mBACvB,GAAA,CAAC,YAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,UAAA,CAAW,SAAA,EAAW,QAAQ,GAAG,KAAA,EAAM,YAAA,EAAa,CAAA,mBAEhF,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,~~aAAA~~,~~CAAc~~,WAAW,CAAA,EAAG,KAAA,EAAM,cAAA,EAAe,CAAA,CAAA;AAAA,~~MAEhF~~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"}
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 } from './metrics-utils';\nimport { formatCompactNumber, formatCost } from '@/lib/cost';\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 is TokenUsageByAgentRow & { cost: number } => 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={formatCompactNumber(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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\n >\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n <TabContent value=\"tokens\" className=\"pt-3\">\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={formatCompactNumber}\n />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\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 CHANGED Viewed

@@ -10,8 +10,9 @@ const tabsRoot = require('../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../tabs-tab-DFmRMdi3.cjs');
 const tabsContent = require('../../../tabs-content-DlCJoQUW.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
+const utils_cost = require('../../../utils/cost.cjs.js');
-function sumMetric(dataKey, formatter = domains_metrics_components_metricsUtils.formatCompact) {
+function sumMetric(dataKey, formatter = utils_cost.formatCompactNumber) {
   return (data) => ({
     value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === "number" ? point[dataKey] : 0), 0))
   });
@@ -57,7 +58,7 @@ function TokenUsageTimelineCardView({
       dataKey: "cost",
       label: "Cost",
       color: domains_metrics_components_metricsUtils.CHART_COLORS.purple,
-      aggregate: sumMetric("cost", (value) => domains_metrics_components_metricsUtils.formatCost(value, costUnit))
+      aggregate: sumMetric("cost", (value) => utils_cost.formatCost(value, costUnit))
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard, { children: [

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

	@@ -1 +1 @@
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, MetricsLineChartLegend } 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 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 && 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 <div className=\"flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto\">\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n {activeTab === 'tokens' ? (\n <MetricsLineChartLegend data={chartPoints} series={tokenSeries} />\n ) : hasCostData ? (\n <MetricsLineChartLegend data={costChartPoints} series={costSeries} />\n ) : null}\n </div>\n <TabContent value=\"tokens\" className=\"pt-3\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} showLegend={false} />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} showLegend={false} />\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","MetricsLineChartLegend","TabContent","MetricsLineChart"],"mappings":"~~;;;;;;;;;;;;;AAUA~~,SAAS,SAAA,CAAU,OAAA,EAAsC,SAAA,GAAuCA,~~qDAAA~~,~~EAAe~~;~~AAC7G~~,EAAA,OAAO,CAAC,IAAA,MAAqC;AAAA,IAC3C,OAAO,SAAA,CAAU,IAAA,CAAK,OAAO,CAAC,GAAA,EAAK,UAAU,GAAA,IAAO,OAAO,KAAA,CAAM,OAAO,MAAM,QAAA,GAAW,KAAA,CAAM,OAAO,CAAA,GAAI,CAAA,CAAA,EAAI,CAAC,CAAC;AAAA,GAClH,CAAA;AACF;AAEA,MAAM,WAAA,GAAc;AAAA,EAClB;AAAA,IACE,OAAA,EAAS,OAAA;AAAA,IACT,KAAA,EAAO,cAAA;AAAA,IACP,OAAOC,oDAAA,CAAa,IAAA;AAAA,IACpB,SAAA,EAAW,UAAU,OAAO;AAAA,GAC9B;AAAA,EACA;AAAA,IACE,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,eAAA;AAAA,IACP,OAAOA,oDAAA,CAAa,MAAA;AAAA,IACpB,SAAA,EAAW,UAAU,QAAQ;AAAA;AAEjC,CAAA;AAEA,SAAS,wBAAwB,KAAA,EAA+C;AAC9E,EAAA,OAAO,KAAA,KAAU,YAAY,KAAA,KAAU,MAAA;AACzC;AAUO,SAAS,0BAAA,CAA2B;AAAA,EACzC,IAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAgC,QAAQ,CAAA;AAE1E,EAAA,MAAM,MAAA,GAAS,QAAQ,EAAC;AACxB,EAAA,MAAM,cAAc,MAAA,CAAO,GAAA,CAAI,YAAU,EAAE,GAAG,OAAM,CAAE,CAAA;AACtD,EAAA,MAAM,OAAA,GAAU,OAAO,MAAA,GAAS,CAAA;AAChC,EAAA,MAAM,UAAA,GAAa,OAAO,MAAA,CAAO,CAAA,KAAA,KAAS,MAAM,IAAA,IAAQ,IAAA,IAAQ,KAAA,CAAM,IAAA,GAAO,CAAC,CAAA;AAC9E,EAAA,MAAM,kBAAkB,UAAA,CAAW,GAAA,CAAI,YAAU,EAAE,GAAG,OAAM,CAAE,CAAA;AAC9D,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAI,UAAA,CAAW,IAAI,CAAA,KAAA,KAAS,KAAA,CAAM,QAAQ,CAAA,CAAE,OAAO,CAAC,IAAA,KAAyB,CAAC,CAAC,IAAI,CAAC,CAAA;AAChH,EAAA,MAAM,iBAAA,GAAoB,gBAAgB,IAAA,KAAS,CAAA,IAAK,WAAW,KAAA,CAAM,CAAA,KAAA,KAAS,KAAA,CAAM,QAAA,IAAY,IAAI,CAAA;AACxG,EAAA,MAAM,QAAA,GAAW,oBAAqB,CAAC,GAAG,eAAe,CAAA,CAAE,CAAC,KAAK,IAAA,GAAQ,IAAA;AACzE,EAAA,MAAM,SAAA,GAAY,iBAAA,GAAoB,UAAA,CAAW,MAAA,CAAO,CAAC,GAAA,EAAK,KAAA,KAAU,GAAA,IAAO,KAAA,CAAM,IAAA,IAAQ,CAAA,CAAA,EAAI,CAAC,CAAA,GAAI,CAAA;AACtG,EAAA,MAAM,WAAA,GAAc,qBAAqB,SAAA,GAAY,CAAA;AACrD,EAAA,MAAM,WAAA,GAAc,QAAA,KAAa,IAAA,GAAO,mCAAA,GAAsC,kCAAA;AAE9E,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,OAAOD,oDAAA,CAAa,MAAA;AAAA,MACpB,WAAW,SAAA,CAAU,MAAA,EAAQ,WAASE,~~kDAAA~~,CAAW,KAAA,EAAO,QAAQ,CAAC;AAAA;AACnE,GACF;AAEA,EAAA,uCACGC,uBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,uBAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAACF,uBAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,yBAAwB,WAAA,EAA0B,CAAA;AAAA,MACxF,WAAW,OAAA,mBAAUE,cAAA,CAACF,wBAAY,OAAA,EAAZ,EAAqB,mBAAQ,CAAA,GAAyB;AAAA,KAAA,EAC/E,CAAA;AAAA,IACC,SAAA,mBACCE,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACFE,cAAA,CAACF,uBAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,qCAAA,EAAsC,oBAEjEE,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACAE,cAAA,CAACF,uBAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,mBAEtDC,eAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,QAAA;AAAA,QACX,KAAA,EAAO,SAAA;AAAA,QACP,eAAe,CAAA,KAAA,KAAS;AACtB,UAAA,IAAI,uBAAA,CAAwB,KAAK,CAAA,EAAG,YAAA,CAAa,KAAK,CAAA;AAAA,QACxD,CAAA;AAAA,QACA,SAAA,EAAU,kBAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2EAAA,EACb,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAACG,WAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,8BAC1BH,cAAA,CAACG,WAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,QAAA,EAAA,MAAA,EAAI;AAAA,aAAA,EACxB,CAAA;AAAA,YACC,cAAc,QAAA,mBACbH,cAAA,CAACI,uCAAA,EAAA,EAAuB,IAAA,EAAM,aAAa,MAAA,EAAQ,WAAA,EAAa,CAAA,GAC9D,WAAA,kCACDA,uCAAA,EAAA,EAAuB,IAAA,EAAM,eAAA,EAAiB,MAAA,EAAQ,YAAY,CAAA,GACjE;AAAA,WAAA,EACN,CAAA;AAAA,0BACAJ,cAAA,CAACK,sBAAA,EAAA,EAAW,KAAA,EAAM,QAAA,EAAS,WAAU,MAAA,EACnC,QAAA,kBAAAL,cAAA,CAACM,iCAAA,EAAA,EAAiB,IAAA,EAAM,WAAA,EAAa,MAAA,EAAQ,WAAA,EAAa,UAAA,EAAY,OAAO,CAAA,EAC/E,CAAA;AAAA,0BACAN,cAAA,CAACK,0BAAW,KAAA,EAAM,MAAA,EAAO,WAAU,MAAA,EAChC,QAAA,EAAA,WAAA,mBACCL,cAAA,CAACM,iCAAA,EAAA,EAAiB,IAAA,EAAM,eAAA,EAAiB,QAAQ,UAAA,EAAY,UAAA,EAAY,OAAO,CAAA,mBAEhFN,cAAA,CAACF,wBAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,kBAAA,EAAmB,CAAA,EAEnD;AAAA;AAAA;AAAA,KACF,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
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, MetricsLineChartLegend } 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 } from './metrics-utils';\nimport { formatCompactNumber, formatCost } from '@/lib/cost';\n\ntype TokenUsageTimelineTab = 'tokens' \| 'cost';\n\nfunction sumMetric(dataKey: 'input' \| 'output' \| 'cost', formatter: (value: number) => string = formatCompactNumber) {\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 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 && 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 <div className=\"flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto\">\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n {activeTab === 'tokens' ? (\n <MetricsLineChartLegend data={chartPoints} series={tokenSeries} />\n ) : hasCostData ? (\n <MetricsLineChartLegend data={costChartPoints} series={costSeries} />\n ) : null}\n </div>\n <TabContent value=\"tokens\" className=\"pt-3\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} showLegend={false} />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} showLegend={false} />\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":["formatCompactNumber","CHART_COLORS","useState","formatCost","MetricsCard","jsxs","jsx","Tabs","TabList","Tab","MetricsLineChartLegend","TabContent","MetricsLineChart"],"mappings":";;;;;;;;;;;;;;AAWA,SAAS,SAAA,CAAU,OAAA,EAAsC,SAAA,GAAuCA,8BAAA,EAAqB;AACnH,EAAA,OAAO,CAAC,IAAA,MAAqC;AAAA,IAC3C,OAAO,SAAA,CAAU,IAAA,CAAK,OAAO,CAAC,GAAA,EAAK,UAAU,GAAA,IAAO,OAAO,KAAA,CAAM,OAAO,MAAM,QAAA,GAAW,KAAA,CAAM,OAAO,CAAA,GAAI,CAAA,CAAA,EAAI,CAAC,CAAC;AAAA,GAClH,CAAA;AACF;AAEA,MAAM,WAAA,GAAc;AAAA,EAClB;AAAA,IACE,OAAA,EAAS,OAAA;AAAA,IACT,KAAA,EAAO,cAAA;AAAA,IACP,OAAOC,oDAAA,CAAa,IAAA;AAAA,IACpB,SAAA,EAAW,UAAU,OAAO;AAAA,GAC9B;AAAA,EACA;AAAA,IACE,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,eAAA;AAAA,IACP,OAAOA,oDAAA,CAAa,MAAA;AAAA,IACpB,SAAA,EAAW,UAAU,QAAQ;AAAA;AAEjC,CAAA;AAEA,SAAS,wBAAwB,KAAA,EAA+C;AAC9E,EAAA,OAAO,KAAA,KAAU,YAAY,KAAA,KAAU,MAAA;AACzC;AAUO,SAAS,0BAAA,CAA2B;AAAA,EACzC,IAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAgC,QAAQ,CAAA;AAE1E,EAAA,MAAM,MAAA,GAAS,QAAQ,EAAC;AACxB,EAAA,MAAM,cAAc,MAAA,CAAO,GAAA,CAAI,YAAU,EAAE,GAAG,OAAM,CAAE,CAAA;AACtD,EAAA,MAAM,OAAA,GAAU,OAAO,MAAA,GAAS,CAAA;AAChC,EAAA,MAAM,UAAA,GAAa,OAAO,MAAA,CAAO,CAAA,KAAA,KAAS,MAAM,IAAA,IAAQ,IAAA,IAAQ,KAAA,CAAM,IAAA,GAAO,CAAC,CAAA;AAC9E,EAAA,MAAM,kBAAkB,UAAA,CAAW,GAAA,CAAI,YAAU,EAAE,GAAG,OAAM,CAAE,CAAA;AAC9D,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAI,UAAA,CAAW,IAAI,CAAA,KAAA,KAAS,KAAA,CAAM,QAAQ,CAAA,CAAE,OAAO,CAAC,IAAA,KAAyB,CAAC,CAAC,IAAI,CAAC,CAAA;AAChH,EAAA,MAAM,iBAAA,GAAoB,gBAAgB,IAAA,KAAS,CAAA,IAAK,WAAW,KAAA,CAAM,CAAA,KAAA,KAAS,KAAA,CAAM,QAAA,IAAY,IAAI,CAAA;AACxG,EAAA,MAAM,QAAA,GAAW,oBAAqB,CAAC,GAAG,eAAe,CAAA,CAAE,CAAC,KAAK,IAAA,GAAQ,IAAA;AACzE,EAAA,MAAM,SAAA,GAAY,iBAAA,GAAoB,UAAA,CAAW,MAAA,CAAO,CAAC,GAAA,EAAK,KAAA,KAAU,GAAA,IAAO,KAAA,CAAM,IAAA,IAAQ,CAAA,CAAA,EAAI,CAAC,CAAA,GAAI,CAAA;AACtG,EAAA,MAAM,WAAA,GAAc,qBAAqB,SAAA,GAAY,CAAA;AACrD,EAAA,MAAM,WAAA,GAAc,QAAA,KAAa,IAAA,GAAO,mCAAA,GAAsC,kCAAA;AAE9E,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,OAAOD,oDAAA,CAAa,MAAA;AAAA,MACpB,WAAW,SAAA,CAAU,MAAA,EAAQ,WAASE,qBAAA,CAAW,KAAA,EAAO,QAAQ,CAAC;AAAA;AACnE,GACF;AAEA,EAAA,uCACGC,uBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,uBAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAACF,uBAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,yBAAwB,WAAA,EAA0B,CAAA;AAAA,MACxF,WAAW,OAAA,mBAAUE,cAAA,CAACF,wBAAY,OAAA,EAAZ,EAAqB,mBAAQ,CAAA,GAAyB;AAAA,KAAA,EAC/E,CAAA;AAAA,IACC,SAAA,mBACCE,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACFE,cAAA,CAACF,uBAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,qCAAA,EAAsC,oBAEjEE,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACAE,cAAA,CAACF,uBAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,mBAEtDC,eAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,QAAA;AAAA,QACX,KAAA,EAAO,SAAA;AAAA,QACP,eAAe,CAAA,KAAA,KAAS;AACtB,UAAA,IAAI,uBAAA,CAAwB,KAAK,CAAA,EAAG,YAAA,CAAa,KAAK,CAAA;AAAA,QACxD,CAAA;AAAA,QACA,SAAA,EAAU,kBAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2EAAA,EACb,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAACG,WAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,8BAC1BH,cAAA,CAACG,WAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,QAAA,EAAA,MAAA,EAAI;AAAA,aAAA,EACxB,CAAA;AAAA,YACC,cAAc,QAAA,mBACbH,cAAA,CAACI,uCAAA,EAAA,EAAuB,IAAA,EAAM,aAAa,MAAA,EAAQ,WAAA,EAAa,CAAA,GAC9D,WAAA,kCACDA,uCAAA,EAAA,EAAuB,IAAA,EAAM,eAAA,EAAiB,MAAA,EAAQ,YAAY,CAAA,GACjE;AAAA,WAAA,EACN,CAAA;AAAA,0BACAJ,cAAA,CAACK,sBAAA,EAAA,EAAW,KAAA,EAAM,QAAA,EAAS,WAAU,MAAA,EACnC,QAAA,kBAAAL,cAAA,CAACM,iCAAA,EAAA,EAAiB,IAAA,EAAM,WAAA,EAAa,MAAA,EAAQ,WAAA,EAAa,UAAA,EAAY,OAAO,CAAA,EAC/E,CAAA;AAAA,0BACAN,cAAA,CAACK,0BAAW,KAAA,EAAM,MAAA,EAAO,WAAU,MAAA,EAChC,QAAA,EAAA,WAAA,mBACCL,cAAA,CAACM,iCAAA,EAAA,EAAiB,IAAA,EAAM,eAAA,EAAiB,QAAQ,UAAA,EAAY,UAAA,EAAY,OAAO,CAAA,mBAEhFN,cAAA,CAACF,wBAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,kBAAA,EAAmB,CAAA,EAEnD;AAAA;AAAA;AAAA,KACF,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -5,9 +5,10 @@ import { a as MetricsLineChartLegend, M as MetricsLineChart } from '../../../met
 import { a as Tabs, T as TabList } from '../../../tabs-root-UNPxoGhW.js';
 import { T as Tab } from '../../../tabs-tab-DluwCnDF.js';
 import { T as TabContent } from '../../../tabs-content-7ODUUdQ0.js';
-import { CHART_COLORS, formatCompact, formatCost } from './metrics-utils.es.js';
+import { CHART_COLORS } from './metrics-utils.es.js';
+import { formatCompactNumber, formatCost } from '../../../utils/cost.es.js';
-function sumMetric(dataKey, formatter = formatCompact) {
+function sumMetric(dataKey, formatter = formatCompactNumber) {
   return (data) => ({
     value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === "number" ? point[dataKey] : 0), 0))
   });

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

	@@ -1 +1 @@
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, MetricsLineChartLegend } 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 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 && 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 <div className=\"flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto\">\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n {activeTab === 'tokens' ? (\n <MetricsLineChartLegend data={chartPoints} series={tokenSeries} />\n ) : hasCostData ? (\n <MetricsLineChartLegend data={costChartPoints} series={costSeries} />\n ) : null}\n </div>\n <TabContent value=\"tokens\" className=\"pt-3\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} showLegend={false} />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} showLegend={false} />\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":"~~;;;;;;;;;AAUA~~,SAAS,SAAA,CAAU,OAAA,EAAsC,SAAA,GAAuC,~~aAAA~~,~~EAAe~~;~~AAC7G~~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"}
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, MetricsLineChartLegend } 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 } from './metrics-utils';\nimport { formatCompactNumber, formatCost } from '@/lib/cost';\n\ntype TokenUsageTimelineTab = 'tokens' \| 'cost';\n\nfunction sumMetric(dataKey: 'input' \| 'output' \| 'cost', formatter: (value: number) => string = formatCompactNumber) {\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 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 && 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 <div className=\"flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto\">\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n {activeTab === 'tokens' ? (\n <MetricsLineChartLegend data={chartPoints} series={tokenSeries} />\n ) : hasCostData ? (\n <MetricsLineChartLegend data={costChartPoints} series={costSeries} />\n ) : null}\n </div>\n <TabContent value=\"tokens\" className=\"pt-3\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} showLegend={false} />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} showLegend={false} />\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 CHANGED Viewed

@@ -10,6 +10,7 @@ const tabsContent = require('../../../tabs-content-DlCJoQUW.cjs');
 const tabsRoot = require('../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../tabs-tab-DFmRMdi3.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
+const utils_cost = require('../../../utils/cost.cjs.js');
 function VolumeBars({
   data,
@@ -42,7 +43,7 @@ function VolumeBars({
         { 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
+      fmt: utils_cost.formatCompactNumber
     }
   );
 }
@@ -64,7 +65,7 @@ function TracesVolumeCardView({
   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" }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: utils_cost.formatCompactNumber(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(

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

	@@ -1 +1 @@
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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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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"}
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 } from './metrics-utils';\nimport { formatCompactNumber } from '@/lib/cost';\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={formatCompactNumber}\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={formatCompactNumber(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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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","formatCompactNumber","useState","MetricsCard","jsxs","Tabs","TabList","Tab","TabContent"],"mappings":"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"}

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

@@ -5,7 +5,8 @@ import { M as MetricsCard } from '../../../metrics-card-C2RTi5Ew.js';
 import { T as TabContent } from '../../../tabs-content-7ODUUdQ0.js';
 import { a as Tabs, T as TabList } from '../../../tabs-root-UNPxoGhW.js';
 import { T as Tab } from '../../../tabs-tab-DluwCnDF.js';
-import { formatCompact, CHART_COLORS } from './metrics-utils.es.js';
+import { CHART_COLORS } from './metrics-utils.es.js';
+import { formatCompactNumber } from '../../../utils/cost.es.js';
 function VolumeBars({
   data,
@@ -38,7 +39,7 @@ function VolumeBars({
         { label: "Errors", color: CHART_COLORS.pink }
       ],
       maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
-      fmt: formatCompact
+      fmt: formatCompactNumber
     }
   );
 }
@@ -60,7 +61,7 @@ function TracesVolumeCardView({
   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" }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompactNumber(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(

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

	@@ -1 +1 @@
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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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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"}
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 } from './metrics-utils';\nimport { formatCompactNumber } from '@/lib/cost';\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={formatCompactNumber}\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={formatCompactNumber(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 h-full grid-rows-[auto_1fr] overflow-y-auto\"\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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\" className=\"pt-3\">\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 CHANGED Viewed

@@ -19,8 +19,6 @@ const domains_metrics_components_tracesVolumeCardView = require('./components/tr
 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;

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

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

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

@@ -1,5 +1,5 @@
 export { DateRangeSelector } from './components/date-range-selector.es.js';
-export { CHART_COLORS, formatCompact, formatCost } from './components/metrics-utils.es.js';
+export { CHART_COLORS } 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';

package/dist/domains/metrics/hooks/use-metrics.cjs.js CHANGED Viewed

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
-const dateFns = require('date-fns');
 const React = require('react');
 const domains_metrics_metricsFilters = require('../metrics-filters.cjs.js');
+const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const DATE_PRESETS = [
   { label: "Last 24 hours", value: "24h" },
@@ -43,9 +43,9 @@ function getDateRangeLabel(preset, customRange) {
   }
   if (customRange?.from) {
     if (customRange.to) {
-      return `${dateFns.format(customRange.from, "MMM d, yyyy")} – ${dateFns.format(customRange.to, "MMM d, yyyy")}`;
+      return `${utils_dateFormat.formatShortDate(customRange.from)} – ${utils_dateFormat.formatShortDate(customRange.to)}`;
     }
-    return dateFns.format(customRange.from, "MMM d, yyyy");
+    return utils_dateFormat.formatShortDate(customRange.from) ?? "";
   }
   return "Custom range";
 }

package/dist/domains/metrics/hooks/use-metrics.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-metrics.cjs.js","sources":["../../../../src/domains/metrics/hooks/use-metrics.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components /\nimport { ~~format } from 'date-fns';\nimport {~~ createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { buildMetricsDimensionalFilter } from '../metrics-filters';\nimport type { MetricsDimensionalFilter } from '../metrics-filters';\nimport type { PropertyFilterToken } from '@/ds/components/PropertyFilter/types';\n\nconst DATE_PRESETS = [\n { label: 'Last 24 hours', value: '24h' },\n { label: 'Last 3 days', value: '3d' },\n { label: 'Last 7 days', value: '7d' },\n { label: 'Last 14 days', value: '14d' },\n { label: 'Last 30 days', value: '30d' },\n] as const;\n\nexport type DatePreset = (typeof DATE_PRESETS)[number]['value'] \| 'custom';\n\nexport { DATE_PRESETS };\n\nconst VALID_PRESETS = new Set<string>(DATE_PRESETS.map(p => p.value));\n\nexport function isValidPreset(value: string \| null \| undefined): value is DatePreset {\n return typeof value === 'string' && (VALID_PRESETS.has(value) \|\| value === 'custom');\n}\n\nexport type DateRange = { from?: Date; to?: Date };\n\n/* Internal — all state is derived from the URL-backed props the owner passes.\n * There is intentionally no local mirror; keeping a mirror caused URL ↔ state\n * feedback loops that re-rendered the entire metrics tree on every keystroke.\n /\ntype MetricsContextValue = {\n datePreset: DatePreset;\n setDatePreset: (v: DatePreset) => void;\n customRange: DateRange \| undefined;\n setCustomRange: (v: DateRange \| undefined) => void;\n dateRangeLabel: string;\n filterTokens: PropertyFilterToken[];\n setFilterTokens: (tokens: PropertyFilterToken[]) => void;\n dimensionalFilter: MetricsDimensionalFilter;\n /* Stable JSON representation of `dimensionalFilter`, safe for query keys. /\n dimensionalFilterKey: string;\n /* Base path drilldown links should target for the Traces page. /\n tracesBasePath: string \| undefined;\n /* Base path drilldown links should target for the Logs page. /\n logsBasePath: string \| undefined;\n};\n\nexport const MetricsContext = createContext<MetricsContextValue>({\n datePreset: '24h',\n setDatePreset: () => {},\n customRange: undefined,\n setCustomRange: () => {},\n dateRangeLabel: 'Last 24 hours',\n filterTokens: [],\n setFilterTokens: () => {},\n dimensionalFilter: {},\n dimensionalFilterKey: '{}',\n tracesBasePath: undefined,\n logsBasePath: undefined,\n});\n\nexport function useMetrics() {\n return useContext(MetricsContext);\n}\n\nfunction getDateRangeLabel(preset: DatePreset, customRange: DateRange \| undefined) {\n if (preset !== 'custom') {\n return DATE_PRESETS.find(p => p.value === preset)?.label ?? preset;\n }\n if (customRange?.from) {\n if (customRange.to) {\n return `${~~format~~(customRange.from~~, 'MMM d, yyyy'~~)} – ${~~format~~(customRange.to~~, 'MMM d, yyyy'~~)}`;\n }\n return ~~format~~(customRange.from, ~~'MMM~~ ~~d, yyyy~~');\n }\n return 'Custom range';\n}\n\n/\n URL-driven metrics provider.\n \n The owner (page) is expected to:\n * - pass the current `preset` / `filterTokens` derived from `useSearchParams`\n * - pass `onPresetChange` / `onFilterTokensChange` that update the URL\n \n The provider never stores its own copies — changes round-trip through the URL\n * exactly once, which keeps re-renders bounded no matter how much data is on\n * screen.\n /\nexport function MetricsProvider({\n children,\n preset,\n filterTokens,\n onPresetChange,\n onFilterTokensChange,\n customRange,\n onCustomRangeChange,\n tracesBasePath,\n logsBasePath,\n}: {\n children: ReactNode;\n preset: DatePreset;\n filterTokens: PropertyFilterToken[];\n onPresetChange: (preset: DatePreset) => void;\n onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;\n customRange?: DateRange;\n onCustomRangeChange?: (range: DateRange \| undefined) => void;\n /* Base path for drilldown links to the Traces page. Defaults to `/traces` when omitted. /\n tracesBasePath?: string;\n /* Base path for drilldown links to the Logs page. Defaults to `/logs` when omitted. /\n logsBasePath?: string;\n}) {\n // Stable key for memo dependencies — the parent may re-create the tokens\n // array on every render (e.g. from `useMemo(... , [searchParams])`), but the\n // content* usually doesn't change.\n const filterTokensKey = useMemo(() => JSON.stringify(filterTokens), [filterTokens]);\n\n // Intentional: re-pin only when the serialized content changes, not on every\n // parent render that allocates a new array.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const stableFilterTokens = useMemo(() => filterTokens, [filterTokensKey]);\n\n const dimensionalFilter = useMemo(() => buildMetricsDimensionalFilter(stableFilterTokens), [stableFilterTokens]);\n\n const dimensionalFilterKey = useMemo(() => JSON.stringify(dimensionalFilter), [dimensionalFilter]);\n\n const dateRangeLabel = getDateRangeLabel(preset, customRange);\n\n const value = useMemo<MetricsContextValue>(\n () => ({\n datePreset: preset,\n setDatePreset: onPresetChange,\n customRange,\n setCustomRange: onCustomRangeChange ?? (() => {}),\n dateRangeLabel,\n filterTokens: stableFilterTokens,\n setFilterTokens: onFilterTokensChange,\n dimensionalFilter,\n dimensionalFilterKey,\n tracesBasePath,\n logsBasePath,\n }),\n [\n preset,\n onPresetChange,\n customRange,\n onCustomRangeChange,\n dateRangeLabel,\n stableFilterTokens,\n onFilterTokensChange,\n dimensionalFilter,\n dimensionalFilterKey,\n tracesBasePath,\n logsBasePath,\n ],\n );\n\n return <MetricsContext.Provider value={value}>{children}</MetricsContext.Provider>;\n}\n"],"names":["createContext","useContext","~~format~~","useMemo","buildMetricsDimensionalFilter","jsx"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,EAAE,KAAA,EAAO,eAAA,EAAiB,KAAA,EAAO,KAAA,EAAM;AAAA,EACvC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,IAAA,EAAK;AAAA,EACpC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,IAAA,EAAK;AAAA,EACpC,EAAE,KAAA,EAAO,cAAA,EAAgB,KAAA,EAAO,KAAA,EAAM;AAAA,EACtC,EAAE,KAAA,EAAO,cAAA,EAAgB,KAAA,EAAO,KAAA;AAClC;AAMA,MAAM,aAAA,GAAgB,IAAI,GAAA,CAAY,YAAA,CAAa,IAAI,CAAA,CAAA,KAAK,CAAA,CAAE,KAAK,CAAC,CAAA;AAE7D,SAAS,cAAc,KAAA,EAAuD;AACnF,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,KAAa,cAAc,GAAA,CAAI,KAAK,KAAK,KAAA,KAAU,QAAA,CAAA;AAC7E;AAyBO,MAAM,iBAAiBA,mBAAA,CAAmC;AAAA,EAC/D,UAAA,EAAY,KAAA;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC,CAAA;AAAA,EACtB,WAAA,EAAa,MAAA;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC,CAAA;AAAA,EACvB,cAAA,EAAgB,eAAA;AAAA,EAChB,cAAc,EAAC;AAAA,EACf,iBAAiB,MAAM;AAAA,EAAC,CAAA;AAAA,EACxB,mBAAmB,EAAC;AAAA,EACpB,oBAAA,EAAsB,IAAA;AAAA,EACtB,cAAA,EAAgB,MAAA;AAAA,EAChB,YAAA,EAAc;AAChB,CAAC;AAEM,SAAS,UAAA,GAAa;AAC3B,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;AAEA,SAAS,iBAAA,CAAkB,QAAoB,WAAA,EAAoC;AACjF,EAAA,IAAI,WAAW,QAAA,EAAU;AACvB,IAAA,OAAO,aAAa,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,KAAA,KAAU,MAAM,GAAG,KAAA,IAAS,MAAA;AAAA,EAC9D;AACA,EAAA,IAAI,aAAa,IAAA,EAAM;AACrB,IAAA,IAAI,YAAY,EAAA,EAAI;AAClB,MAAA,OAAO,CAAA,EAAGC,~~cAAA~~,~~CAAO,~~WAAA,CAAY,~~IAAA~~,~~EAAM,aAAa,~~CAAC,CAAA,GAAA,EAAMA,~~cAAA~~,~~CAAO~~,WAAA,CAAY,~~EAAA~~,~~EAAI,aAAa,~~CAAC,CAAA,CAAA;AAAA,~~IAC9F~~;AACA,IAAA,OAAOA,~~cAAA~~,~~CAAO~~,WAAA,CAAY,~~IAAA~~,~~EAAM~~,~~aAAa~~,~~CAAA~~;AAAA,~~EAC/C~~;AACA,EAAA,OAAO,cAAA;AACT;AAaO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAYG;AAID,EAAA,MAAM,eAAA,GAAkBC,cAAQ,MAAM,IAAA,CAAK,UAAU,YAAY,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAKlF,EAAA,MAAM,qBAAqBA,aAAA,CAAQ,MAAM,YAAA,EAAc,CAAC,eAAe,CAAC,CAAA;AAExE,EAAA,MAAM,iBAAA,GAAoBA,cAAQ,MAAMC,4DAAA,CAA8B,kBAAkB,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAE/G,EAAA,MAAM,oBAAA,GAAuBD,cAAQ,MAAM,IAAA,CAAK,UAAU,iBAAiB,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEjG,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,MAAA,EAAQ,WAAW,CAAA;AAE5D,EAAA,MAAM,KAAA,GAAQA,aAAA;AAAA,IACZ,OAAO;AAAA,MACL,UAAA,EAAY,MAAA;AAAA,MACZ,aAAA,EAAe,cAAA;AAAA,MACf,WAAA;AAAA,MACA,cAAA,EAAgB,wBAAwB,MAAM;AAAA,MAAC,CAAA,CAAA;AAAA,MAC/C,cAAA;AAAA,MACA,YAAA,EAAc,kBAAA;AAAA,MACd,eAAA,EAAiB,oBAAA;AAAA,MACjB,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,MAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,mBAAA;AAAA,MACA,cAAA;AAAA,MACA,kBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBAAOE,cAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,OAAe,QAAA,EAAS,CAAA;AAC1D;;;;;;;;"}
1	+ {"version":3,"file":"use-metrics.cjs.js","sources":["../../../../src/domains/metrics/hooks/use-metrics.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components /\nimport { createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { buildMetricsDimensionalFilter } from '../metrics-filters';\nimport type { MetricsDimensionalFilter } from '../metrics-filters';\nimport type { PropertyFilterToken } from '@/ds/components/PropertyFilter/types';\nimport { formatShortDate } from '@/utils/date-format';\n\nconst DATE_PRESETS = [\n { label: 'Last 24 hours', value: '24h' },\n { label: 'Last 3 days', value: '3d' },\n { label: 'Last 7 days', value: '7d' },\n { label: 'Last 14 days', value: '14d' },\n { label: 'Last 30 days', value: '30d' },\n] as const;\n\nexport type DatePreset = (typeof DATE_PRESETS)[number]['value'] \| 'custom';\n\nexport { DATE_PRESETS };\n\nconst VALID_PRESETS = new Set<string>(DATE_PRESETS.map(p => p.value));\n\nexport function isValidPreset(value: string \| null \| undefined): value is DatePreset {\n return typeof value === 'string' && (VALID_PRESETS.has(value) \|\| value === 'custom');\n}\n\nexport type DateRange = { from?: Date; to?: Date };\n\n/* Internal — all state is derived from the URL-backed props the owner passes.\n * There is intentionally no local mirror; keeping a mirror caused URL ↔ state\n * feedback loops that re-rendered the entire metrics tree on every keystroke.\n /\ntype MetricsContextValue = {\n datePreset: DatePreset;\n setDatePreset: (v: DatePreset) => void;\n customRange: DateRange \| undefined;\n setCustomRange: (v: DateRange \| undefined) => void;\n dateRangeLabel: string;\n filterTokens: PropertyFilterToken[];\n setFilterTokens: (tokens: PropertyFilterToken[]) => void;\n dimensionalFilter: MetricsDimensionalFilter;\n /* Stable JSON representation of `dimensionalFilter`, safe for query keys. /\n dimensionalFilterKey: string;\n /* Base path drilldown links should target for the Traces page. /\n tracesBasePath: string \| undefined;\n /* Base path drilldown links should target for the Logs page. /\n logsBasePath: string \| undefined;\n};\n\nexport const MetricsContext = createContext<MetricsContextValue>({\n datePreset: '24h',\n setDatePreset: () => {},\n customRange: undefined,\n setCustomRange: () => {},\n dateRangeLabel: 'Last 24 hours',\n filterTokens: [],\n setFilterTokens: () => {},\n dimensionalFilter: {},\n dimensionalFilterKey: '{}',\n tracesBasePath: undefined,\n logsBasePath: undefined,\n});\n\nexport function useMetrics() {\n return useContext(MetricsContext);\n}\n\nfunction getDateRangeLabel(preset: DatePreset, customRange: DateRange \| undefined) {\n if (preset !== 'custom') {\n return DATE_PRESETS.find(p => p.value === preset)?.label ?? preset;\n }\n if (customRange?.from) {\n if (customRange.to) {\n return `${formatShortDate(customRange.from)} – ${formatShortDate(customRange.to)}`;\n }\n return formatShortDate(customRange.from) ?? '';\n }\n return 'Custom range';\n}\n\n/\n URL-driven metrics provider.\n \n The owner (page) is expected to:\n * - pass the current `preset` / `filterTokens` derived from `useSearchParams`\n * - pass `onPresetChange` / `onFilterTokensChange` that update the URL\n \n The provider never stores its own copies — changes round-trip through the URL\n * exactly once, which keeps re-renders bounded no matter how much data is on\n * screen.\n /\nexport function MetricsProvider({\n children,\n preset,\n filterTokens,\n onPresetChange,\n onFilterTokensChange,\n customRange,\n onCustomRangeChange,\n tracesBasePath,\n logsBasePath,\n}: {\n children: ReactNode;\n preset: DatePreset;\n filterTokens: PropertyFilterToken[];\n onPresetChange: (preset: DatePreset) => void;\n onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;\n customRange?: DateRange;\n onCustomRangeChange?: (range: DateRange \| undefined) => void;\n /* Base path for drilldown links to the Traces page. Defaults to `/traces` when omitted. /\n tracesBasePath?: string;\n /* Base path for drilldown links to the Logs page. Defaults to `/logs` when omitted. /\n logsBasePath?: string;\n}) {\n // Stable key for memo dependencies — the parent may re-create the tokens\n // array on every render (e.g. from `useMemo(... , [searchParams])`), but the\n // content* usually doesn't change.\n const filterTokensKey = useMemo(() => JSON.stringify(filterTokens), [filterTokens]);\n\n // Intentional: re-pin only when the serialized content changes, not on every\n // parent render that allocates a new array.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const stableFilterTokens = useMemo(() => filterTokens, [filterTokensKey]);\n\n const dimensionalFilter = useMemo(() => buildMetricsDimensionalFilter(stableFilterTokens), [stableFilterTokens]);\n\n const dimensionalFilterKey = useMemo(() => JSON.stringify(dimensionalFilter), [dimensionalFilter]);\n\n const dateRangeLabel = getDateRangeLabel(preset, customRange);\n\n const value = useMemo<MetricsContextValue>(\n () => ({\n datePreset: preset,\n setDatePreset: onPresetChange,\n customRange,\n setCustomRange: onCustomRangeChange ?? (() => {}),\n dateRangeLabel,\n filterTokens: stableFilterTokens,\n setFilterTokens: onFilterTokensChange,\n dimensionalFilter,\n dimensionalFilterKey,\n tracesBasePath,\n logsBasePath,\n }),\n [\n preset,\n onPresetChange,\n customRange,\n onCustomRangeChange,\n dateRangeLabel,\n stableFilterTokens,\n onFilterTokensChange,\n dimensionalFilter,\n dimensionalFilterKey,\n tracesBasePath,\n logsBasePath,\n ],\n );\n\n return <MetricsContext.Provider value={value}>{children}</MetricsContext.Provider>;\n}\n"],"names":["createContext","useContext","formatShortDate","useMemo","buildMetricsDimensionalFilter","jsx"],"mappings":"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"}

package/dist/domains/metrics/hooks/use-metrics.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import { format } from 'date-fns';
 import { createContext, useMemo, useContext } from 'react';
 import { buildMetricsDimensionalFilter } from '../metrics-filters.es.js';
+import { formatShortDate } from '../../../utils/date-format.es.js';
 const DATE_PRESETS = [
   { label: "Last 24 hours", value: "24h" },
@@ -39,9 +39,9 @@ function getDateRangeLabel(preset, customRange) {
   }
   if (customRange?.from) {
     if (customRange.to) {
-      return `${format(customRange.from, "MMM d, yyyy")} – ${format(customRange.to, "MMM d, yyyy")}`;
+      return `${formatShortDate(customRange.from)} – ${formatShortDate(customRange.to)}`;
     }
-    return format(customRange.from, "MMM d, yyyy");
+    return formatShortDate(customRange.from) ?? "";
   }
   return "Custom range";
 }