npm - @mastra/playground-ui - Versions diffs - 58.0.0 → 59.0.0-alpha.1 - Mend

@mastra/playground-ui 58.0.0 → 59.0.0-alpha.1

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 (691) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"scores-card-view.cjs.js","sources":["../../../../src/domains/metrics/components/scores-card-view.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { DataList } from '../../../ds/components/DataList/data-list';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart/metrics-line-chart';\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 { ScorerSummary, ScoresOverTimePoint } from '../hooks/use-scores-metrics';\nimport { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils';\n\nconst SERIES_COLORS = [\n CHART_COLORS.green,\n CHART_COLORS.blue,\n CHART_COLORS.purple,\n CHART_COLORS.orange,\n CHART_COLORS.pink,\n CHART_COLORS.yellow,\n] as const;\n\nexport interface ScoresCardViewProps {\n data:\n \| {\n summaryData: ScorerSummary[];\n overTimeData: ScoresOverTimePoint[];\n scorerNames: string[];\n avgScore: number \| null;\n }\n \| undefined;\n isLoading: boolean;\n isError: boolean;\n}\n\nexport function ScoresCardView({ data, isLoading, isError }: ScoresCardViewProps) {\n const hasData = !!data && (data.summaryData.length > 0 \|\| data.overTimeData.length > 0);\n\n const series = useMemo(() => {\n if (!data?.scorerNames) return [];\n return data.scorerNames.map((name, i) => ({\n dataKey: name,\n label: name,\n color: SERIES_COLORS[i % SERIES_COLORS.length] ?? SERIES_COLORS[0],\n aggregate: (points: Record<string, unknown>[]) => ({\n value:\n points.length > 0\n ? (points.reduce((s, d) => s + ((d[name] as number) ?? 0), 0) / points.length).toFixed(2)\n : '0',\n suffix: 'avg',\n }),\n }));\n }, [data?.scorerNames]);\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Scores\" description=\"Evaluation scorer performance.\" />\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load scores data\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No scores data yet\" />\n ) : (\n <Tabs defaultTab=\"over-time\" className=\"overflow-visible\">\n <TabList>\n <Tab value=\"over-time\">Over Time</Tab>\n <Tab value=\"summary\">Summary</Tab>\n </TabList>\n <TabContent value=\"over-time\" className=\"pb-0\">\n {data.overTimeData.length > 0 ? (\n <MetricsLineChart data={data.overTimeData} series={series} yDomain={[0, 1]} />\n ) : (\n <MetricsCard.NoData message=\"No time series data yet\" />\n )}\n </TabContent>\n <TabContent value=\"summary\">\n <DataList columns=\"auto auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Scorer</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Avg</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Min</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Max</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Count</DataList.TopCell>\n </DataList.Top>\n {data.summaryData.map(row => (\n <DataList.RowStatic key={row.scorer}>\n <DataList.RowHeaderCell className=\"text-caption\">{row.scorer}</DataList.RowHeaderCell>\n <DataList.NumberCell highlight>{row.avg.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.min.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.max.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.count.toLocaleString()}</DataList.NumberCell>\n </DataList.RowStatic>\n ))}\n </DataList>\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":["CHART_COLORS","useMemo","MetricsCard","jsx","jsxs","Tabs","TabList","Tab","TabContent","MetricsLineChart","DataList","METRICS_DATA_LIST_PROPS"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,aAAA,GAAgB;AAAA,EACpBA,oDAAA,CAAa,KAAA;AAAA,EACbA,oDAAA,CAAa,IAAA;AAAA,EACbA,oDAAA,CAAa,MAAA;AAAA,EACbA,oDAAA,CAAa,MAAA;AAAA,EACbA,oDAAA,CAAa,IAAA;AAAA,EACbA,oDAAA,CAAa;AACf,CAAA;AAeO,SAAS,cAAA,CAAe,EAAE,IAAA,EAAM,SAAA,EAAW,SAAQ,EAAwB;AAChF,EAAA,MAAM,OAAA,GAAU,CAAC,CAAC,IAAA,KAAS,IAAA,CAAK,YAAY,MAAA,GAAS,CAAA,IAAK,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,CAAA;AAErF,EAAA,MAAM,MAAA,GAASC,cAAQ,MAAM;AAC3B,IAAA,IAAI,CAAC,IAAA,EAAM,WAAA,EAAa,OAAO,EAAC;AAChC,IAAA,OAAO,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,CAAC,MAAM,CAAA,MAAO;AAAA,MACxC,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO,IAAA;AAAA,MACP,OAAO,aAAA,CAAc,CAAA,GAAI,cAAc,MAAM,CAAA,IAAK,cAAc,CAAC,CAAA;AAAA,MACjE,SAAA,EAAW,CAAC,MAAA,MAAuC;AAAA,QACjD,KAAA,EACE,OAAO,MAAA,GAAS,CAAA,GAAA,CACX,OAAO,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,IAAM,EAAE,IAAI,CAAA,IAAgB,IAAI,CAAC,CAAA,GAAI,OAAO,MAAA,EAAQ,OAAA,CAAQ,CAAC,CAAA,GACtF,GAAA;AAAA,QACN,MAAA,EAAQ;AAAA,OACV;AAAA,KACF,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,CAAC,IAAA,EAAM,WAAW,CAAC,CAAA;AAEtB,EAAA,uCACGC,uBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACD,uBAAA,CAAY,MAAA,EAAZ,EACC,QAAA,kBAAAC,cAAA,CAACD,uBAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,QAAA,EAAS,WAAA,EAAY,gCAAA,EAAiC,CAAA,EAC/F,CAAA;AAAA,IACC,SAAA,mBACCC,cAAA,CAACD,uBAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACFC,cAAA,CAACD,uBAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,4BAAA,EAA6B,oBAExDC,cAAA,CAACD,uBAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACAC,cAAA,CAACD,uBAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,oBAAA,EAAqB,CAAA,mBAEjDE,eAAA,CAACC,aAAA,EAAA,EAAK,UAAA,EAAW,WAAA,EAAY,WAAU,kBAAA,EACrC,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAACE,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAACI,WAAA,EAAA,EAAI,KAAA,EAAM,WAAA,EAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,wBAChCJ,cAAA,CAACI,WAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA,SAAA,EAAO;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACAJ,cAAA,CAACK,sBAAA,EAAA,EAAW,KAAA,EAAM,WAAA,EAAY,SAAA,EAAU,~~MAAA~~,EACrC,QAAA,EAAA,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,mBAC1BL,cAAA,CAACM,iCAAA,EAAA,EAAiB,IAAA,EAAM,IAAA,CAAK,YAAA,EAAc,MAAA,EAAgB,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAA,mBAE5EN,cAAA,CAACD,uBAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,EAE1D,CAAA;AAAA,sBACAC,cAAA,CAACK,~~0BAAW~~,KAAA,EAAM,SAAA,~~EAChB~~,~~0CAACE~~,iBAAA,EAAA,EAAS,OAAA,EAAQ,0BAAA,EAA4B,GAAGC,+DAAA,EAC/C,QAAA,EAAA;AAAA,wBAAAP,eAAA,CAACM,iBAAA,CAAS,KAAT,EACC,QAAA,EAAA;AAAA,0BAAAP,cAAA,CAACO,iBAAA,CAAS,OAAA,EAAT,EAAiB,MAAA,EAAO,SAAQ,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,yCACtCA,iBAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,yCACvDA,iBAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,yCACvDA,iBAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,yCACvDA,iBAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,OAAA,EAAK;AAAA,SAAA,EAC5D,CAAA;AAAA,QACC,KAAK,WAAA,CAAY,GAAA,CAAI,yBACpBN,eAAA,CAACM,iBAAA,CAAS,WAAT,EACC,QAAA,EAAA;AAAA,0BAAAP,cAAA,CAACO,kBAAS,aAAA,EAAT,EAAuB,SAAA,EAAU,cAAA,EAAgB,cAAI,MAAA,EAAO,CAAA;AAAA,0BAC7DP,cAAA,CAACO,iBAAA,CAAS,UAAA,EAAT,EAAoB,SAAA,EAAS,MAAE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,0BACnDP,cAAA,CAACO,kBAAS,UAAA,EAAT,EAAqB,cAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,0BACzCP,cAAA,CAACO,kBAAS,UAAA,EAAT,EAAqB,cAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,yCACxCA,iBAAA,CAAS,UAAA,EAAT,EAAqB,QAAA,EAAA,GAAA,CAAI,KAAA,CAAM,gBAAe,EAAE;AAAA,SAAA,EAAA,EAL1B,GAAA,CAAI,MAM7B,CACD;AAAA,OAAA,EACH,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"scores-card-view.cjs.js","sources":["../../../../src/domains/metrics/components/scores-card-view.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { DataList } from '../../../ds/components/DataList/data-list';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart/metrics-line-chart';\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 { ScorerSummary, ScoresOverTimePoint } from '../hooks/use-scores-metrics';\nimport { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils';\n\nconst SERIES_COLORS = [\n CHART_COLORS.green,\n CHART_COLORS.blue,\n CHART_COLORS.purple,\n CHART_COLORS.orange,\n CHART_COLORS.pink,\n CHART_COLORS.yellow,\n] as const;\n\nexport interface ScoresCardViewProps {\n data:\n \| {\n summaryData: ScorerSummary[];\n overTimeData: ScoresOverTimePoint[];\n scorerNames: string[];\n avgScore: number \| null;\n }\n \| undefined;\n isLoading: boolean;\n isError: boolean;\n}\n\nexport function ScoresCardView({ data, isLoading, isError }: ScoresCardViewProps) {\n const hasData = !!data && (data.summaryData.length > 0 \|\| data.overTimeData.length > 0);\n\n const series = useMemo(() => {\n if (!data?.scorerNames) return [];\n return data.scorerNames.map((name, i) => ({\n dataKey: name,\n label: name,\n color: SERIES_COLORS[i % SERIES_COLORS.length] ?? SERIES_COLORS[0],\n aggregate: (points: Record<string, unknown>[]) => ({\n value:\n points.length > 0\n ? (points.reduce((s, d) => s + ((d[name] as number) ?? 0), 0) / points.length).toFixed(2)\n : '0',\n suffix: 'avg',\n }),\n }));\n }, [data?.scorerNames]);\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Scores\" description=\"Evaluation scorer performance.\" />\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load scores data\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No scores data yet\" />\n ) : (\n <Tabs defaultTab=\"over-time\" className=\"overflow-visible\">\n <TabList>\n <Tab value=\"over-time\">Over Time</Tab>\n <Tab value=\"summary\">Summary</Tab>\n </TabList>\n <TabContent value=\"over-time\" className=\"pt-3 pb-0\">\n {data.overTimeData.length > 0 ? (\n <MetricsLineChart data={data.overTimeData} series={series} yDomain={[0, 1]} />\n ) : (\n <MetricsCard.NoData message=\"No time series data yet\" />\n )}\n </TabContent>\n <TabContent value=\"summary\" className=\"pt-3\">\n <DataList columns=\"auto auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Scorer</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Avg</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Min</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Max</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Count</DataList.TopCell>\n </DataList.Top>\n {data.summaryData.map(row => (\n <DataList.RowStatic key={row.scorer}>\n <DataList.RowHeaderCell className=\"text-caption\">{row.scorer}</DataList.RowHeaderCell>\n <DataList.NumberCell highlight>{row.avg.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.min.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.max.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.count.toLocaleString()}</DataList.NumberCell>\n </DataList.RowStatic>\n ))}\n </DataList>\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":["CHART_COLORS","useMemo","MetricsCard","jsx","jsxs","Tabs","TabList","Tab","TabContent","MetricsLineChart","DataList","METRICS_DATA_LIST_PROPS"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { D as DataList } from '../../../data-list-DisTjDHP.js';
-import { M as MetricsCard } from '../../../metrics-card-Bzm6m1dy.js';
-import { M as MetricsLineChart } from '../../../metrics-line-chart-knlgw8bV.js';
+import { D as DataList } from '../../../data-list-5-nRJbEO.js';
+import { M as MetricsCard } from '../../../metrics-card-C2RTi5Ew.js';
+import { M as MetricsLineChart } from '../../../metrics-line-chart-CT_pqJtC.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';
@@ -37,8 +37,8 @@ function ScoresCardView({ data, isLoading, isError }) {
         /* @__PURE__ */ jsx(Tab, { value: "over-time", children: "Over Time" }),
         /* @__PURE__ */ jsx(Tab, { value: "summary", children: "Summary" })
       ] }),
-      /* @__PURE__ */ jsx(TabContent, { value: "over-time", className: "pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
-      /* @__PURE__ */ jsx(TabContent, { value: "summary", children: /* @__PURE__ */ jsxs(DataList, { columns: "auto auto auto auto auto", ...METRICS_DATA_LIST_PROPS, children: [
+      /* @__PURE__ */ jsx(TabContent, { value: "over-time", className: "pt-3 pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "summary", className: "pt-3", children: /* @__PURE__ */ jsxs(DataList, { columns: "auto auto auto auto auto", ...METRICS_DATA_LIST_PROPS, children: [
         /* @__PURE__ */ jsxs(DataList.Top, { children: [
           /* @__PURE__ */ jsx(DataList.TopCell, { sticky: "start", children: "Scorer" }),
           /* @__PURE__ */ jsx(DataList.TopCell, { className: "justify-end text-right", children: "Avg" }),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"scores-card-view.es.js","sources":["../../../../src/domains/metrics/components/scores-card-view.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { DataList } from '../../../ds/components/DataList/data-list';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart/metrics-line-chart';\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 { ScorerSummary, ScoresOverTimePoint } from '../hooks/use-scores-metrics';\nimport { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils';\n\nconst SERIES_COLORS = [\n CHART_COLORS.green,\n CHART_COLORS.blue,\n CHART_COLORS.purple,\n CHART_COLORS.orange,\n CHART_COLORS.pink,\n CHART_COLORS.yellow,\n] as const;\n\nexport interface ScoresCardViewProps {\n data:\n \| {\n summaryData: ScorerSummary[];\n overTimeData: ScoresOverTimePoint[];\n scorerNames: string[];\n avgScore: number \| null;\n }\n \| undefined;\n isLoading: boolean;\n isError: boolean;\n}\n\nexport function ScoresCardView({ data, isLoading, isError }: ScoresCardViewProps) {\n const hasData = !!data && (data.summaryData.length > 0 \|\| data.overTimeData.length > 0);\n\n const series = useMemo(() => {\n if (!data?.scorerNames) return [];\n return data.scorerNames.map((name, i) => ({\n dataKey: name,\n label: name,\n color: SERIES_COLORS[i % SERIES_COLORS.length] ?? SERIES_COLORS[0],\n aggregate: (points: Record<string, unknown>[]) => ({\n value:\n points.length > 0\n ? (points.reduce((s, d) => s + ((d[name] as number) ?? 0), 0) / points.length).toFixed(2)\n : '0',\n suffix: 'avg',\n }),\n }));\n }, [data?.scorerNames]);\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Scores\" description=\"Evaluation scorer performance.\" />\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load scores data\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No scores data yet\" />\n ) : (\n <Tabs defaultTab=\"over-time\" className=\"overflow-visible\">\n <TabList>\n <Tab value=\"over-time\">Over Time</Tab>\n <Tab value=\"summary\">Summary</Tab>\n </TabList>\n <TabContent value=\"over-time\" className=\"pb-0\">\n {data.overTimeData.length > 0 ? (\n <MetricsLineChart data={data.overTimeData} series={series} yDomain={[0, 1]} />\n ) : (\n <MetricsCard.NoData message=\"No time series data yet\" />\n )}\n </TabContent>\n <TabContent value=\"summary\">\n <DataList columns=\"auto auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Scorer</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Avg</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Min</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Max</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Count</DataList.TopCell>\n </DataList.Top>\n {data.summaryData.map(row => (\n <DataList.RowStatic key={row.scorer}>\n <DataList.RowHeaderCell className=\"text-caption\">{row.scorer}</DataList.RowHeaderCell>\n <DataList.NumberCell highlight>{row.avg.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.min.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.max.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.count.toLocaleString()}</DataList.NumberCell>\n </DataList.RowStatic>\n ))}\n </DataList>\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,aAAA,GAAgB;AAAA,EACpB,YAAA,CAAa,KAAA;AAAA,EACb,YAAA,CAAa,IAAA;AAAA,EACb,YAAA,CAAa,MAAA;AAAA,EACb,YAAA,CAAa,MAAA;AAAA,EACb,YAAA,CAAa,IAAA;AAAA,EACb,YAAA,CAAa;AACf,CAAA;AAeO,SAAS,cAAA,CAAe,EAAE,IAAA,EAAM,SAAA,EAAW,SAAQ,EAAwB;AAChF,EAAA,MAAM,OAAA,GAAU,CAAC,CAAC,IAAA,KAAS,IAAA,CAAK,YAAY,MAAA,GAAS,CAAA,IAAK,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,CAAA;AAErF,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAM;AAC3B,IAAA,IAAI,CAAC,IAAA,EAAM,WAAA,EAAa,OAAO,EAAC;AAChC,IAAA,OAAO,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,CAAC,MAAM,CAAA,MAAO;AAAA,MACxC,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO,IAAA;AAAA,MACP,OAAO,aAAA,CAAc,CAAA,GAAI,cAAc,MAAM,CAAA,IAAK,cAAc,CAAC,CAAA;AAAA,MACjE,SAAA,EAAW,CAAC,MAAA,MAAuC;AAAA,QACjD,KAAA,EACE,OAAO,MAAA,GAAS,CAAA,GAAA,CACX,OAAO,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,IAAM,EAAE,IAAI,CAAA,IAAgB,IAAI,CAAC,CAAA,GAAI,OAAO,MAAA,EAAQ,OAAA,CAAQ,CAAC,CAAA,GACtF,GAAA;AAAA,QACN,MAAA,EAAQ;AAAA,OACV;AAAA,KACF,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,CAAC,IAAA,EAAM,WAAW,CAAC,CAAA;AAEtB,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,QAAA,EAAS,WAAA,EAAY,gCAAA,EAAiC,CAAA,EAC/F,CAAA;AAAA,IACC,SAAA,mBACC,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACF,GAAA,CAAC,WAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,4BAAA,EAA6B,oBAExD,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACA,GAAA,CAAC,WAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,oBAAA,EAAqB,CAAA,mBAEjD,IAAA,CAAC,IAAA,EAAA,EAAK,UAAA,EAAW,WAAA,EAAY,WAAU,kBAAA,EACrC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,WAAA,EAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,wBAChC,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA,SAAA,EAAO;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,WAAA,EAAY,SAAA,EAAU,~~MAAA~~,EACrC,QAAA,EAAA,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,mBAC1B,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAM,IAAA,CAAK,YAAA,EAAc,MAAA,EAAgB,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAA,mBAE5E,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,EAE1D,CAAA;AAAA,sBACA,GAAA,CAAC,~~cAAW~~,KAAA,EAAM,SAAA,~~EAChB,+BAAC~~,QAAA,EAAA,EAAS,OAAA,EAAQ,0BAAA,EAA4B,GAAG,uBAAA,EAC/C,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAA,CAAS,KAAT,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,MAAA,EAAO,SAAQ,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,8BACtC,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,8BACvD,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,8BACvD,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,8BACvD,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,OAAA,EAAK;AAAA,SAAA,EAC5D,CAAA;AAAA,QACC,KAAK,WAAA,CAAY,GAAA,CAAI,yBACpB,IAAA,CAAC,QAAA,CAAS,WAAT,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAS,aAAA,EAAT,EAAuB,SAAA,EAAU,cAAA,EAAgB,cAAI,MAAA,EAAO,CAAA;AAAA,0BAC7D,GAAA,CAAC,QAAA,CAAS,UAAA,EAAT,EAAoB,SAAA,EAAS,MAAE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,0BACnD,GAAA,CAAC,SAAS,UAAA,EAAT,EAAqB,cAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,0BACzC,GAAA,CAAC,SAAS,UAAA,EAAT,EAAqB,cAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,8BACxC,QAAA,CAAS,UAAA,EAAT,EAAqB,QAAA,EAAA,GAAA,CAAI,KAAA,CAAM,gBAAe,EAAE;AAAA,SAAA,EAAA,EAL1B,GAAA,CAAI,MAM7B,CACD;AAAA,OAAA,EACH,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"scores-card-view.es.js","sources":["../../../../src/domains/metrics/components/scores-card-view.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { DataList } from '../../../ds/components/DataList/data-list';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { MetricsLineChart } from '../../../ds/components/MetricsLineChart/metrics-line-chart';\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 { ScorerSummary, ScoresOverTimePoint } from '../hooks/use-scores-metrics';\nimport { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils';\n\nconst SERIES_COLORS = [\n CHART_COLORS.green,\n CHART_COLORS.blue,\n CHART_COLORS.purple,\n CHART_COLORS.orange,\n CHART_COLORS.pink,\n CHART_COLORS.yellow,\n] as const;\n\nexport interface ScoresCardViewProps {\n data:\n \| {\n summaryData: ScorerSummary[];\n overTimeData: ScoresOverTimePoint[];\n scorerNames: string[];\n avgScore: number \| null;\n }\n \| undefined;\n isLoading: boolean;\n isError: boolean;\n}\n\nexport function ScoresCardView({ data, isLoading, isError }: ScoresCardViewProps) {\n const hasData = !!data && (data.summaryData.length > 0 \|\| data.overTimeData.length > 0);\n\n const series = useMemo(() => {\n if (!data?.scorerNames) return [];\n return data.scorerNames.map((name, i) => ({\n dataKey: name,\n label: name,\n color: SERIES_COLORS[i % SERIES_COLORS.length] ?? SERIES_COLORS[0],\n aggregate: (points: Record<string, unknown>[]) => ({\n value:\n points.length > 0\n ? (points.reduce((s, d) => s + ((d[name] as number) ?? 0), 0) / points.length).toFixed(2)\n : '0',\n suffix: 'avg',\n }),\n }));\n }, [data?.scorerNames]);\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Scores\" description=\"Evaluation scorer performance.\" />\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load scores data\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No scores data yet\" />\n ) : (\n <Tabs defaultTab=\"over-time\" className=\"overflow-visible\">\n <TabList>\n <Tab value=\"over-time\">Over Time</Tab>\n <Tab value=\"summary\">Summary</Tab>\n </TabList>\n <TabContent value=\"over-time\" className=\"pt-3 pb-0\">\n {data.overTimeData.length > 0 ? (\n <MetricsLineChart data={data.overTimeData} series={series} yDomain={[0, 1]} />\n ) : (\n <MetricsCard.NoData message=\"No time series data yet\" />\n )}\n </TabContent>\n <TabContent value=\"summary\" className=\"pt-3\">\n <DataList columns=\"auto auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Scorer</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Avg</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Min</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Max</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Count</DataList.TopCell>\n </DataList.Top>\n {data.summaryData.map(row => (\n <DataList.RowStatic key={row.scorer}>\n <DataList.RowHeaderCell className=\"text-caption\">{row.scorer}</DataList.RowHeaderCell>\n <DataList.NumberCell highlight>{row.avg.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.min.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.max.toFixed(2)}</DataList.NumberCell>\n <DataList.NumberCell>{row.count.toLocaleString()}</DataList.NumberCell>\n </DataList.RowStatic>\n ))}\n </DataList>\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,aAAA,GAAgB;AAAA,EACpB,YAAA,CAAa,KAAA;AAAA,EACb,YAAA,CAAa,IAAA;AAAA,EACb,YAAA,CAAa,MAAA;AAAA,EACb,YAAA,CAAa,MAAA;AAAA,EACb,YAAA,CAAa,IAAA;AAAA,EACb,YAAA,CAAa;AACf,CAAA;AAeO,SAAS,cAAA,CAAe,EAAE,IAAA,EAAM,SAAA,EAAW,SAAQ,EAAwB;AAChF,EAAA,MAAM,OAAA,GAAU,CAAC,CAAC,IAAA,KAAS,IAAA,CAAK,YAAY,MAAA,GAAS,CAAA,IAAK,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,CAAA;AAErF,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAM;AAC3B,IAAA,IAAI,CAAC,IAAA,EAAM,WAAA,EAAa,OAAO,EAAC;AAChC,IAAA,OAAO,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,CAAC,MAAM,CAAA,MAAO;AAAA,MACxC,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO,IAAA;AAAA,MACP,OAAO,aAAA,CAAc,CAAA,GAAI,cAAc,MAAM,CAAA,IAAK,cAAc,CAAC,CAAA;AAAA,MACjE,SAAA,EAAW,CAAC,MAAA,MAAuC;AAAA,QACjD,KAAA,EACE,OAAO,MAAA,GAAS,CAAA,GAAA,CACX,OAAO,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,IAAM,EAAE,IAAI,CAAA,IAAgB,IAAI,CAAC,CAAA,GAAI,OAAO,MAAA,EAAQ,OAAA,CAAQ,CAAC,CAAA,GACtF,GAAA;AAAA,QACN,MAAA,EAAQ;AAAA,OACV;AAAA,KACF,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,CAAC,IAAA,EAAM,WAAW,CAAC,CAAA;AAEtB,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,QAAA,EAAS,WAAA,EAAY,gCAAA,EAAiC,CAAA,EAC/F,CAAA;AAAA,IACC,SAAA,mBACC,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACF,GAAA,CAAC,WAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,4BAAA,EAA6B,oBAExD,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACA,GAAA,CAAC,WAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,oBAAA,EAAqB,CAAA,mBAEjD,IAAA,CAAC,IAAA,EAAA,EAAK,UAAA,EAAW,WAAA,EAAY,WAAU,kBAAA,EACrC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,WAAA,EAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,wBAChC,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,SAAA,EAAU,QAAA,EAAA,SAAA,EAAO;AAAA,OAAA,EAC9B,CAAA;AAAA,sBACA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,WAAA,EAAY,SAAA,EAAU,WAAA,EACrC,QAAA,EAAA,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,mBAC1B,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAM,IAAA,CAAK,YAAA,EAAc,MAAA,EAAgB,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAA,mBAE5E,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,EAE1D,CAAA;AAAA,sBACA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,SAAA,EAAU,SAAA,EAAU,MAAA,EACpC,QAAA,kBAAA,IAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAQ,0BAAA,EAA4B,GAAG,uBAAA,EAC/C,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAA,CAAS,KAAT,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,MAAA,EAAO,SAAQ,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,8BACtC,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,8BACvD,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,8BACvD,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,8BACvD,QAAA,CAAS,OAAA,EAAT,EAAiB,SAAA,EAAU,0BAAyB,QAAA,EAAA,OAAA,EAAK;AAAA,SAAA,EAC5D,CAAA;AAAA,QACC,KAAK,WAAA,CAAY,GAAA,CAAI,yBACpB,IAAA,CAAC,QAAA,CAAS,WAAT,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAS,aAAA,EAAT,EAAuB,SAAA,EAAU,cAAA,EAAgB,cAAI,MAAA,EAAO,CAAA;AAAA,0BAC7D,GAAA,CAAC,QAAA,CAAS,UAAA,EAAT,EAAoB,SAAA,EAAS,MAAE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,0BACnD,GAAA,CAAC,SAAS,UAAA,EAAT,EAAqB,cAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,0BACzC,GAAA,CAAC,SAAS,UAAA,EAAT,EAAqB,cAAI,GAAA,CAAI,OAAA,CAAQ,CAAC,CAAA,EAAE,CAAA;AAAA,8BACxC,QAAA,CAAS,UAAA,EAAT,EAAqB,QAAA,EAAA,GAAA,CAAI,KAAA,CAAM,gBAAe,EAAE;AAAA,SAAA,EAAA,EAL1B,GAAA,CAAI,MAM7B,CACD;AAAA,OAAA,EACH,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -5,11 +5,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const horizontalBars = require('../../../horizontal-bars-BkVi2dEb.cjs');
-const metricsCard = require('../../../metrics-card-DCCHIG-z.cjs');
+const metricsCard = require('../../../metrics-card-DzcVJTAN.cjs');
 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(
@@ -58,7 +59,7 @@ function TokenUsageByAgentCardView({
             /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "tokens", children: "Tokens" }),
             /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "cost", children: "Cost" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tokens", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tokens", className: "pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
             horizontalBars.HorizontalBars,
             {
               LinkComponent,
@@ -72,17 +73,17 @@ 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", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "cost", className: "pt-3", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(
             horizontalBars.HorizontalBars,
             {
               LinkComponent,
               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\">\n <HorizontalBars\n LinkComponent={LinkComponent}\n data={rows.map(d => ({\n name: d.name,\n values: [d.input, d.output],\n href: getRowHref?.(d),\n }))}\n segments={[\n { label: 'Input', color: CHART_COLORS.blueDark },\n { label: 'Output', color: CHART_COLORS.blue },\n ]}\n maxVal={Math.max(...rows.map(d => d.input + d.output))}\n fmt={~~formatCompact~~}\n />\n </TabContent>\n <TabContent value=\"cost\">\n {hasCostData ? (\n <HorizontalBars\n LinkComponent={LinkComponent}\n data={costRows\n .slice()\n .sort((a, b) => (b.cost ?? 0) - (a.cost ?? 0))\n .map(d => ({ name: d.name, values: [d.cost], href: getRowHref?.(d) }))}\n segments={[{ label: 'Cost', color: CHART_COLORS.purple }]}\n maxVal={Math.max(...costRows.map(d => d.cost ?? 0))}\n fmt={v => formatCost(v, costUnit)}\n />\n ) : (\n <MetricsCard.NoData message=\"No cost data yet\" />\n )}\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":["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~~,WAAW,OAAA,mBAAUF,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,iCAAA,EAAkC,oBAE7DE,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,MAACI,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,QAAA;AAAA,QACX,KAAA,EAAO,SAAA;AAAA,QACP,eAAe,CAAA,CAAA,KAAK;AAClB,UAAA,IAAI,eAAA,CAAgB,CAAC,CAAA,EAAG,YAAA,CAAa,CAAC,CAAA;AAAA,QACxC,CAAA;AAAA,QACA,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAJ,eAAA,CAACK,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACK,WAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,4BAC1BL,cAAA,CAACK,WAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,QAAA,EAAA,MAAA,EAAI;AAAA,WAAA,EACxB,CAAA;AAAA,0BACAL,cAAA,CAACM,sBAAA,EAAA,EAAW,KAAA,EAAM,QAAA,~~EAChB~~,QAAA,kBAAAN,cAAA;AAAA,YAACO,6BAAA;AAAA,YAAA;AAAA,cACC,aAAA;AAAA,cACA,IAAA,EAAM,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,MAAM;AAAA,gBACnB,MAAM,CAAA,CAAE,IAAA;AAAA,gBACR,MAAA,EAAQ,CAAC,CAAA,CAAE,KAAA,EAAO,EAAE,MAAM,CAAA;AAAA,gBAC1B,IAAA,EAAM,aAAa,CAAC;AAAA,eACtB,CAAE,CAAA;AAAA,cACF,QAAA,EAAU;AAAA,gBACR,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAOC,qDAAa,QAAA,EAAS;AAAA,gBAC/C,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAOA,qDAAa,IAAA;AAAK,eAC9C;AAAA,cACA,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,KAAA,GAAQ,CAAA,CAAE,MAAM,CAAC,CAAA;AAAA,cACrD,GAAA,EAAKN;AAAA;AAAA,WACP,EACF,CAAA;AAAA,~~0BACAF~~,~~cAAA,CAACM,~~sBAAA,EAAA,EAAW,KAAA,EAAM,MAAA,~~EACf~~,QAAA,EAAA,WAAA,mBACCN,cAAA;AAAA,YAACO,6BAAA;AAAA,YAAA;AAAA,cACC,aAAA;AAAA,cACA,IAAA,EAAM,QAAA,CACH,KAAA,EAAM,CACN,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAA,CAAO,CAAA,CAAE,IAAA,IAAQ,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CAAE,CAAA,CAC5C,GAAA,CAAI,CAAA,CAAA,MAAM,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAM,MAAA,EAAQ,CAAC,CAAA,CAAE,IAAI,CAAA,EAAG,IAAA,EAAM,UAAA,GAAa,CAAC,GAAE,CAAE,CAAA;AAAA,cACvE,QAAA,EAAU,CAAC,EAAE,KAAA,EAAO,QAAQ,KAAA,EAAOC,oDAAA,CAAa,QAAQ,CAAA;AAAA,cACxD,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,QAAA,CAAS,IAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAA,IAAQ,CAAC,CAAC,CAAA;AAAA,cAClD,GAAA,EAAK,CAAA,CAAA,KAAKP,~~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

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { H as HorizontalBars } from '../../../horizontal-bars-nTOFylzc.js';
-import { M as MetricsCard } from '../../../metrics-card-Bzm6m1dy.js';
+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(
@@ -54,7 +55,7 @@ function TokenUsageByAgentCardView({
             /* @__PURE__ */ jsx(Tab, { value: "tokens", children: "Tokens" }),
             /* @__PURE__ */ jsx(Tab, { value: "cost", children: "Cost" })
           ] }),
-          /* @__PURE__ */ jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TabContent, { value: "tokens", className: "pt-3", children: /* @__PURE__ */ jsx(
             HorizontalBars,
             {
               LinkComponent,
@@ -68,10 +69,10 @@ 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", children: hasCostData ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TabContent, { value: "cost", className: "pt-3", children: hasCostData ? /* @__PURE__ */ jsx(
             HorizontalBars,
             {
               LinkComponent,

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\">\n <HorizontalBars\n LinkComponent={LinkComponent}\n data={rows.map(d => ({\n name: d.name,\n values: [d.input, d.output],\n href: getRowHref?.(d),\n }))}\n segments={[\n { label: 'Input', color: CHART_COLORS.blueDark },\n { label: 'Output', color: CHART_COLORS.blue },\n ]}\n maxVal={Math.max(...rows.map(d => d.input + d.output))}\n fmt={~~formatCompact~~}\n />\n </TabContent>\n <TabContent value=\"cost\">\n {hasCostData ? (\n <HorizontalBars\n LinkComponent={LinkComponent}\n data={costRows\n .slice()\n .sort((a, b) => (b.cost ?? 0) - (a.cost ?? 0))\n .map(d => ({ name: d.name, values: [d.cost], href: getRowHref?.(d) }))}\n segments={[{ label: 'Cost', color: CHART_COLORS.purple }]}\n maxVal={Math.max(...costRows.map(d => d.cost ?? 0))}\n fmt={v => formatCost(v, costUnit)}\n />\n ) : (\n <MetricsCard.NoData message=\"No cost data yet\" />\n )}\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":[],"mappings":"~~;;;;;;;;;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~~,WAAW,OAAA,mBAAU,GAAA,CAAC,YAAY,OAAA,EAAZ,EAAqB,mBAAQ,CAAA,GAAyB;AAAA,KAAA,EAC/E,CAAA;AAAA,IACC,SAAA,mBACC,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACF,GAAA,CAAC,WAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,iCAAA,EAAkC,oBAE7D,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACA,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,mBAEtD,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,QAAA;AAAA,QACX,KAAA,EAAO,SAAA;AAAA,QACP,eAAe,CAAA,CAAA,KAAK;AAClB,UAAA,IAAI,eAAA,CAAgB,CAAC,CAAA,EAAG,YAAA,CAAa,CAAC,CAAA;AAAA,QACxC,CAAA;AAAA,QACA,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,4BAC1B,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,QAAA,EAAA,MAAA,EAAI;AAAA,WAAA,EACxB,CAAA;AAAA,0BACA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,QAAA,~~EAChB~~,QAAA,kBAAA,GAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACC,aAAA;AAAA,cACA,IAAA,EAAM,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,MAAM;AAAA,gBACnB,MAAM,CAAA,CAAE,IAAA;AAAA,gBACR,MAAA,EAAQ,CAAC,CAAA,CAAE,KAAA,EAAO,EAAE,MAAM,CAAA;AAAA,gBAC1B,IAAA,EAAM,aAAa,CAAC;AAAA,eACtB,CAAE,CAAA;AAAA,cACF,QAAA,EAAU;AAAA,gBACR,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,aAAa,QAAA,EAAS;AAAA,gBAC/C,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,aAAa,IAAA;AAAK,eAC9C;AAAA,cACA,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,KAAA,GAAQ,CAAA,CAAE,MAAM,CAAC,CAAA;AAAA,cACrD,GAAA,EAAK;AAAA;AAAA,WACP,EACF,CAAA;AAAA,~~0BACA~~,~~GAAA,CAAC,~~UAAA,EAAA,EAAW,KAAA,EAAM,MAAA,~~EACf~~,QAAA,EAAA,WAAA,mBACC,GAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACC,aAAA;AAAA,cACA,IAAA,EAAM,QAAA,CACH,KAAA,EAAM,CACN,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAA,CAAO,CAAA,CAAE,IAAA,IAAQ,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CAAE,CAAA,CAC5C,GAAA,CAAI,CAAA,CAAA,MAAM,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAM,MAAA,EAAQ,CAAC,CAAA,CAAE,IAAI,CAAA,EAAG,IAAA,EAAM,UAAA,GAAa,CAAC,GAAE,CAAE,CAAA;AAAA,cACvE,QAAA,EAAU,CAAC,EAAE,KAAA,EAAO,QAAQ,KAAA,EAAO,YAAA,CAAa,QAAQ,CAAA;AAAA,cACxD,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,QAAA,CAAS,IAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAA,IAAQ,CAAC,CAAC,CAAA;AAAA,cAClD,GAAA,EAAK,CAAA,CAAA,KAAK,UAAA,CAAW,CAAA,EAAG,QAAQ;AAAA;AAAA,8BAGlC,GAAA,CAAC,WAAA,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.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

@@ -4,14 +4,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const metricsCard = require('../../../metrics-card-DCCHIG-z.cjs');
-const metricsLineChart = require('../../../metrics-line-chart-0FR3SYSt.cjs');
+const metricsCard = require('../../../metrics-card-DzcVJTAN.cjs');
+const metricsLineChart = require('../../../metrics-line-chart-BNNRRxM8.cjs');
 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))
   });
@@ -44,7 +45,6 @@ function TokenUsageTimelineCardView({
   const points = data ?? [];
   const chartPoints = points.map((point) => ({ ...point }));
   const hasData = points.length > 0;
-  const totalTokens = points.reduce((sum, point) => sum + point.total, 0);
   const costPoints = points.filter((point) => point.cost != null && point.cost > 0);
   const costChartPoints = costPoints.map((point) => ({ ...point }));
   const uniqueCostUnits = new Set(costPoints.map((point) => point.costUnit).filter((unit) => !!unit));
@@ -58,13 +58,12 @@ 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: [
     /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.TopBar, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.TitleAndDescription, { title: "Token usage over time", description }),
-      hasData && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_components_metricsUtils.formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_components_metricsUtils.formatCompact(totalTokens), label: "Total tokens" })),
       hasData && actions ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Actions, { children: actions }) : null
     ] }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Error, { message: "Failed to load token usage timeline" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
@@ -77,12 +76,15 @@ function TokenUsageTimelineCardView({
         },
         className: "overflow-visible",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(tabsRoot.TabList, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "tokens", children: "Tokens" }),
-            /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "cost", children: "Cost" })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(tabsRoot.TabList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "tokens", children: "Tokens" }),
+              /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "cost", children: "Cost" })
+            ] }),
+            activeTab === "tokens" ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChartLegend, { data: chartPoints, series: tokenSeries }) : hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChartLegend, { data: costChartPoints, series: costSeries }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tokens", children: /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: chartPoints, series: tokenSeries }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: costChartPoints, series: costSeries }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No cost data yet" }) })
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tokens", className: "pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: chartPoints, series: tokenSeries, showLegend: false }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "cost", className: "pt-3", children: hasCostData ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: costChartPoints, series: costSeries, showLegend: false }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No cost data yet" }) })
         ]
       }
     ) })

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 } from '../../../ds/components/MetricsLineChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport type { TokenTimelinePoint, TokenUsageTimeSeriesInterval } from '../hooks/use-token-usage-timeseries';\nimport { CHART_COLORS, ~~formatCompact, formatCost~~ } from './metrics-utils';\n\ntype TokenUsageTimelineTab = 'tokens' \| 'cost';\n\nfunction sumMetric(dataKey: 'input' \| 'output' \| 'cost', formatter: (value: number) => string = ~~formatCompact~~) {\n return (data: Record<string, unknown>[]) => ({\n value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === 'number' ? point[dataKey] : 0), 0)),\n });\n}\n\nconst tokenSeries = [\n {\n dataKey: 'input',\n label: 'Input tokens',\n color: CHART_COLORS.blue,\n aggregate: sumMetric('input'),\n },\n {\n dataKey: 'output',\n label: 'Output tokens',\n color: CHART_COLORS.yellow,\n aggregate: sumMetric('output'),\n },\n];\n\nfunction isTokenUsageTimelineTab(value: string): value is TokenUsageTimelineTab {\n return value === 'tokens' \|\| value === 'cost';\n}\n\nexport interface TokenUsageTimelineCardViewProps {\n data: TokenTimelinePoint[] \| undefined;\n interval: TokenUsageTimeSeriesInterval \| undefined;\n isLoading: boolean;\n isError: boolean;\n actions?: ReactNode;\n}\n\nexport function TokenUsageTimelineCardView({\n data,\n interval = '1d',\n isLoading,\n isError,\n actions,\n}: TokenUsageTimelineCardViewProps) {\n const [activeTab, setActiveTab] = useState<TokenUsageTimelineTab>('tokens');\n\n const points = data ?? [];\n const chartPoints = points.map(point => ({ ...point }));\n const hasData = points.length > 0;\n const ~~totalTokens = points.reduce((sum, point) => sum + point.total, 0);\n const~~ costPoints = points.filter(point => point.cost != null && point.cost > 0);\n const costChartPoints = costPoints.map(point => ({ ...point }));\n const uniqueCostUnits = new Set(costPoints.map(point => point.costUnit).filter((unit): unit is string => !!unit));\n const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every(point => point.costUnit != null);\n const costUnit = hasSingleCostUnit ? ([...uniqueCostUnits][0] ?? null) : null;\n const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;\n const hasCostData = hasSingleCostUnit && totalCost > 0;\n const description = interval === '1h' ? 'Input and output tokens per hour.' : 'Input and output tokens per day.';\n\n const costSeries = [\n {\n dataKey: 'cost',\n label: 'Cost',\n color: CHART_COLORS.purple,\n aggregate: sumMetric('cost', value => formatCost(value, costUnit)),\n },\n ];\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Token usage over time\" description={description} />\n {hasData ~~&&\n (activeTab === 'cost'~~ && hasCostData ? (\n <MetricsCard.Summary value={formatCost(totalCost, costUnit)} label=\"Total cost\" />\n ) : (\n <MetricsCard.Summary value={formatCompact(totalTokens)} label=\"Total tokens\" />\n ))}\n {hasData && actions ? <MetricsCard.Actions>{actions}</MetricsCard.Actions> : null}\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load token usage timeline\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No token usage data yet\" />\n ) : (\n <Tabs\n defaultTab=\"tokens\"\n value={activeTab}\n onValueChange={value => {\n if (isTokenUsageTimelineTab(value)) setActiveTab(value);\n }}\n className=\"overflow-visible\"\n >\n <~~TabList~~>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n <TabContent value=\"tokens\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} />\n </TabContent>\n <TabContent value=\"cost\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} />\n ) : (\n <MetricsCard.NoData message=\"No cost data yet\" />\n )}\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":["~~formatCompact~~","CHART_COLORS","useState","formatCost","MetricsCard","jsxs","jsx","Tabs","TabList","Tab","TabContent","MetricsLineChart"],"mappings":"~~;;;;;;;;;;;;;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,~~WAAA,GAAc,OAAO,MAAA,CAAO,CAAC,KAAK,KAAA,KAAU,GAAA,GAAM,KAAA,CAAM,KAAA,EAAO,CAAC,CAAA;AACtE,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,OAAA,KACE,SAAA,KAAc,MAAA,IAAU,WAAA,mBACvBE,cAAA,CAACF,wBAAY,OAAA,EAAZ,EAAoB,KAAA,EAAOD,kDAAA,CAAW,SAAA,EAAW,QAAQ,GAAG,KAAA,EAAM,YAAA,EAAa,CAAA,mBAEhFG,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAOJ,qDAAA,CAAc,WAAW,~~CAAA,EAAG,KAAA,EAAM,cAAA,EAAe,CAAA,CAAA;AAAA,MAEhF,WAAW,~~OAAA,~~mBAAUM~~,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,CAACG,gBAAA,EAAA,EACC,QAAA,EAAA;AAAA,~~4BAAAF~~,cAAA,CAACG,WAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,~~4BAC1BH~~,cAAA,CAACG,WAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,QAAA,EAAA,MAAA,EAAI;AAAA,~~WAAA~~,EACxB,CAAA;AAAA,~~0BACAH~~,cAAA,CAACI,sBAAA,EAAA,EAAW,KAAA,EAAM,QAAA,~~EAChB~~,QAAA,~~kBAAAJ~~,cAAA,~~CAACK~~,~~qCAAiB~~,IAAA,EAAM,WAAA,EAAa,MAAA,EAAQ,WAAA,EAAa,CAAA,~~EAC5D~~,CAAA;AAAA,~~yCACCD~~,~~sBAAA~~,~~EAAA~~,~~EAAW~~,KAAA,EAAM,~~QACf~~,QAAA,EAAA,WAAA,~~mBACCJ~~,cAAA,~~CAACK~~,~~qCAAiB~~,IAAA,EAAM,eAAA,EAAiB,~~MAAA~~,~~EAAQ~~,UAAA,EAAY,~~oBAE7DL~~,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-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

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { M as MetricsCard } from '../../../metrics-card-Bzm6m1dy.js';
-import { M as MetricsLineChart } from '../../../metrics-line-chart-knlgw8bV.js';
+import { M as MetricsCard } from '../../../metrics-card-C2RTi5Ew.js';
+import { a as MetricsLineChartLegend, M as MetricsLineChart } from '../../../metrics-line-chart-CT_pqJtC.js';
 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))
   });
@@ -40,7 +41,6 @@ function TokenUsageTimelineCardView({
   const points = data ?? [];
   const chartPoints = points.map((point) => ({ ...point }));
   const hasData = points.length > 0;
-  const totalTokens = points.reduce((sum, point) => sum + point.total, 0);
   const costPoints = points.filter((point) => point.cost != null && point.cost > 0);
   const costChartPoints = costPoints.map((point) => ({ ...point }));
   const uniqueCostUnits = new Set(costPoints.map((point) => point.costUnit).filter((unit) => !!unit));
@@ -60,7 +60,6 @@ function TokenUsageTimelineCardView({
   return /* @__PURE__ */ jsxs(MetricsCard, { children: [
     /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
       /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Token usage over time", description }),
-      hasData && (activeTab === "cost" && hasCostData ? /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCost(totalCost, costUnit), label: "Total cost" }) : /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" })),
       hasData && actions ? /* @__PURE__ */ jsx(MetricsCard.Actions, { children: actions }) : null
     ] }),
     isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load token usage timeline" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxs(
@@ -73,12 +72,15 @@ function TokenUsageTimelineCardView({
         },
         className: "overflow-visible",
         children: [
-          /* @__PURE__ */ jsxs(TabList, { children: [
-            /* @__PURE__ */ jsx(Tab, { value: "tokens", children: "Tokens" }),
-            /* @__PURE__ */ jsx(Tab, { value: "cost", children: "Cost" })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto", children: [
+            /* @__PURE__ */ jsxs(TabList, { children: [
+              /* @__PURE__ */ jsx(Tab, { value: "tokens", children: "Tokens" }),
+              /* @__PURE__ */ jsx(Tab, { value: "cost", children: "Cost" })
+            ] }),
+            activeTab === "tokens" ? /* @__PURE__ */ jsx(MetricsLineChartLegend, { data: chartPoints, series: tokenSeries }) : hasCostData ? /* @__PURE__ */ jsx(MetricsLineChartLegend, { data: costChartPoints, series: costSeries }) : null
           ] }),
-          /* @__PURE__ */ jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsx(MetricsLineChart, { data: chartPoints, series: tokenSeries }) }),
-          /* @__PURE__ */ jsx(TabContent, { value: "cost", children: hasCostData ? /* @__PURE__ */ jsx(MetricsLineChart, { data: costChartPoints, series: costSeries }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No cost data yet" }) })
+          /* @__PURE__ */ jsx(TabContent, { value: "tokens", className: "pt-3", children: /* @__PURE__ */ jsx(MetricsLineChart, { data: chartPoints, series: tokenSeries, showLegend: false }) }),
+          /* @__PURE__ */ jsx(TabContent, { value: "cost", className: "pt-3", children: hasCostData ? /* @__PURE__ */ jsx(MetricsLineChart, { data: costChartPoints, series: costSeries, showLegend: false }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No cost data yet" }) })
         ]
       }
     ) })

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 } from '../../../ds/components/MetricsLineChart';\nimport { Tab, TabContent, TabList, Tabs } from '../../../ds/components/Tabs';\nimport type { TokenTimelinePoint, TokenUsageTimeSeriesInterval } from '../hooks/use-token-usage-timeseries';\nimport { CHART_COLORS, ~~formatCompact, formatCost~~ } from './metrics-utils';\n\ntype TokenUsageTimelineTab = 'tokens' \| 'cost';\n\nfunction sumMetric(dataKey: 'input' \| 'output' \| 'cost', formatter: (value: number) => string = ~~formatCompact~~) {\n return (data: Record<string, unknown>[]) => ({\n value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === 'number' ? point[dataKey] : 0), 0)),\n });\n}\n\nconst tokenSeries = [\n {\n dataKey: 'input',\n label: 'Input tokens',\n color: CHART_COLORS.blue,\n aggregate: sumMetric('input'),\n },\n {\n dataKey: 'output',\n label: 'Output tokens',\n color: CHART_COLORS.yellow,\n aggregate: sumMetric('output'),\n },\n];\n\nfunction isTokenUsageTimelineTab(value: string): value is TokenUsageTimelineTab {\n return value === 'tokens' \|\| value === 'cost';\n}\n\nexport interface TokenUsageTimelineCardViewProps {\n data: TokenTimelinePoint[] \| undefined;\n interval: TokenUsageTimeSeriesInterval \| undefined;\n isLoading: boolean;\n isError: boolean;\n actions?: ReactNode;\n}\n\nexport function TokenUsageTimelineCardView({\n data,\n interval = '1d',\n isLoading,\n isError,\n actions,\n}: TokenUsageTimelineCardViewProps) {\n const [activeTab, setActiveTab] = useState<TokenUsageTimelineTab>('tokens');\n\n const points = data ?? [];\n const chartPoints = points.map(point => ({ ...point }));\n const hasData = points.length > 0;\n const ~~totalTokens = points.reduce((sum, point) => sum + point.total, 0);\n const~~ costPoints = points.filter(point => point.cost != null && point.cost > 0);\n const costChartPoints = costPoints.map(point => ({ ...point }));\n const uniqueCostUnits = new Set(costPoints.map(point => point.costUnit).filter((unit): unit is string => !!unit));\n const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every(point => point.costUnit != null);\n const costUnit = hasSingleCostUnit ? ([...uniqueCostUnits][0] ?? null) : null;\n const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;\n const hasCostData = hasSingleCostUnit && totalCost > 0;\n const description = interval === '1h' ? 'Input and output tokens per hour.' : 'Input and output tokens per day.';\n\n const costSeries = [\n {\n dataKey: 'cost',\n label: 'Cost',\n color: CHART_COLORS.purple,\n aggregate: sumMetric('cost', value => formatCost(value, costUnit)),\n },\n ];\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Token usage over time\" description={description} />\n {hasData ~~&&\n (activeTab === 'cost'~~ && hasCostData ? (\n <MetricsCard.Summary value={formatCost(totalCost, costUnit)} label=\"Total cost\" />\n ) : (\n <MetricsCard.Summary value={formatCompact(totalTokens)} label=\"Total tokens\" />\n ))}\n {hasData && actions ? <MetricsCard.Actions>{actions}</MetricsCard.Actions> : null}\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load token usage timeline\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No token usage data yet\" />\n ) : (\n <Tabs\n defaultTab=\"tokens\"\n value={activeTab}\n onValueChange={value => {\n if (isTokenUsageTimelineTab(value)) setActiveTab(value);\n }}\n className=\"overflow-visible\"\n >\n <~~TabList~~>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n <TabContent value=\"tokens\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} />\n </TabContent>\n <TabContent value=\"cost\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} />\n ) : (\n <MetricsCard.NoData message=\"No cost data yet\" />\n )}\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":[],"mappings":"~~;;;;;;;;;AAUA~~,SAAS,SAAA,CAAU,OAAA,EAAsC,SAAA,GAAuC,~~aAAA~~,~~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,OAAO,YAAA,CAAa,IAAA;AAAA,IACpB,SAAA,EAAW,UAAU,OAAO;AAAA,GAC9B;AAAA,EACA;AAAA,IACE,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,eAAA;AAAA,IACP,OAAO,YAAA,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,GAAI,SAAgC,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,~~WAAA,GAAc,OAAO,MAAA,CAAO,CAAC,KAAK,KAAA,KAAU,GAAA,GAAM,KAAA,CAAM,KAAA,EAAO,CAAC,CAAA;AACtE,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,OAAO,YAAA,CAAa,MAAA;AAAA,MACpB,WAAW,SAAA,CAAU,MAAA,EAAQ,WAAS,UAAA,CAAW,KAAA,EAAO,QAAQ,CAAC;AAAA;AACnE,GACF;AAEA,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,WAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,yBAAwB,WAAA,EAA0B,CAAA;AAAA,MACxF,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,WAAW,~~OAAA,mBAAU,GAAA,CAAC,YAAY,OAAA,EAAZ,EAAqB,mBAAQ,CAAA,GAAyB;AAAA,KAAA,EAC/E,CAAA;AAAA,IACC,SAAA,mBACC,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACF,GAAA,CAAC,WAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,qCAAA,EAAsC,oBAEjE,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACA,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,yBAAA,EAA0B,CAAA,mBAEtD,IAAA;AAAA,MAAC,IAAA;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,0BAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,~~4BAAA~~,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,~~4BAC1B~~,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,MAAA,EAAO,QAAA,EAAA,MAAA,EAAI;AAAA,~~WAAA~~,EACxB,CAAA;AAAA,0BACA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,QAAA,~~EAChB~~,QAAA,kBAAA,GAAA,CAAC,~~oBAAiB~~,IAAA,EAAM,WAAA,EAAa,MAAA,EAAQ,WAAA,EAAa,CAAA,~~EAC5D~~,CAAA;AAAA,~~8BACC~~,~~UAAA~~,~~EAAA~~,~~EAAW~~,KAAA,EAAM,~~QACf~~,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,~~oBAAiB~~,IAAA,EAAM,eAAA,EAAiB,~~MAAA~~,~~EAAQ~~,UAAA,EAAY,~~oBAE7D~~,GAAA,CAAC,~~WAAA~~,~~CAAY~~,~~QAAZ~~,EAAmB,OAAA,EAAQ,~~oBAAmB~~,CAAA,EAEnD;AAAA;AAAA;AAAA,KACF,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
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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"}