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

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

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

Files changed (176) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"memory-card-view.es.js","sources":["../../../../src/domains/metrics/components/memory-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { DataList } from '../../../ds/components/DataList/data-list';\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 { ActiveThreadRow } from '../hooks/use-top-active-threads-metrics';\nimport type { ResourceThreadsRow } from '../hooks/use-top-resources-by-threads-metrics';\nimport { formatCompact, formatCost, METRICS_DATA_LIST_PROPS } from './metrics-utils';\n\nexport type MemoryTab = 'threads' \| 'resources';\n\n/** Per-tab query state. Memory has two independent server queries (top\n * threads + top resources) so loading/error are scoped to the active tab. /\ntype MemoryTabState<T> = {\n data: T[] \| undefined;\n isLoading: boolean;\n isError: boolean;\n};\n\nexport interface MemoryCardViewProps {\n threads: MemoryTabState<ActiveThreadRow>;\n resources: MemoryTabState<ResourceThreadsRow>;\n /* Optional drilldown for a thread row. Receives the raw hook row. /\n getThreadRowHref?: (row: ActiveThreadRow) => string \| undefined;\n /* Optional drilldown for a resource row. Receives the raw hook row. /\n getResourceRowHref?: (row: ResourceThreadsRow) => string \| undefined;\n /* Optional slot for top-bar action buttons. Function form receives the active tab. /\n actions?: ReactNode \| ((tab: MemoryTab) => ReactNode);\n /* Override how drilldown links are rendered. Defaults to `<a>`. */\n LinkComponent?: LinkComponent;\n}\n\nfunction isMemoryTab(value: string): value is MemoryTab {\n return value === 'threads' \|\| value === 'resources';\n}\n\n// IDs are usually 32+ char UUIDs; the table is too narrow to show the full\n// value without horizontal scroll, so we elide the middle.\nfunction shortId(id: string): string {\n if (id.length <= 12) return id;\n return `${id.slice(0, 6)}…${id.slice(-4)}`;\n}\n\ntype ThreadTableRow = ActiveThreadRow & { key: string };\ntype ResourceTableRow = ResourceThreadsRow & { key: string };\n\nexport function MemoryCardView({\n threads,\n resources,\n getThreadRowHref,\n getResourceRowHref,\n actions,\n LinkComponent,\n}: MemoryCardViewProps) {\n const [activeTab, setActiveTab] = useState<MemoryTab>('threads');\n\n const threadRows: ThreadTableRow[] = threads.data?.map(r => ({ ...r, key: r.threadId })) ?? [];\n const resourceRows: ResourceTableRow[] = resources.data?.map(r => ({ ...r, key: r.resourceId })) ?? [];\n\n const hasThreadData = threadRows.length > 0;\n const hasResourceData = resourceRows.length > 0;\n\n const threadTotal = threads.data?.reduce((s, r) => s + r.runs, 0) ?? 0;\n const resourceTotal = resources.data?.reduce((s, r) => s + r.threadCount, 0) ?? 0;\n\n const active = activeTab === 'threads' ? threads : resources;\n const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Memory\" description=\"Resource and Thread consumption\" />\n {activeTab === 'threads' && hasThreadData && (\n <MetricsCard.Summary value={threadTotal.toLocaleString()} label=\"Total runs\" />\n )}\n {activeTab === 'resources' && hasResourceData && (\n <MetricsCard.Summary value={resourceTotal.toLocaleString()} label=\"Total threads\" />\n )}\n {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n </MetricsCard.TopBar>\n {active.isLoading ? (\n <MetricsCard.Loading />\n ) : active.isError ? (\n <MetricsCard.Error message=\"Failed to load memory data\" />\n ) : (\n <MetricsCard.Content>\n <Tabs\n defaultTab=\"threads\"\n value={activeTab}\n onValueChange={v => {\n if (isMemoryTab(v)) setActiveTab(v);\n }}\n className=\"grid h-full grid-rows-[auto_1fr] overflow-y-auto\"\n >\n <TabList>\n <Tab value=\"threads\">Threads</Tab>\n <Tab value=\"resources\">Resources</Tab>\n </TabList>\n <TabContent value=\"threads\">\n {hasThreadData ? (\n <DataList columns=\"auto auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Thread ID</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Resource ID</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Runs</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Tokens</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Cost</DataList.TopCell>\n </DataList.Top>\n {threadRows.map(row => {\n const href = getThreadRowHref?.(row);\n const rowCells = (\n <>\n <DataList.RowHeaderCell className=\"text-caption\">\n {shortId(row.threadId)}\n </DataList.RowHeaderCell>\n <DataList.NumberCell>{row.resourceId ? shortId(row.resourceId) : '—'}</DataList.NumberCell>\n <DataList.NumberCell highlight>{row.runs.toLocaleString()}</DataList.NumberCell>\n <DataList.NumberCell>{row.tokens > 0 ? formatCompact(row.tokens) : '—'}</DataList.NumberCell>\n <DataList.NumberCell>\n {row.cost != null ? formatCost(row.cost, row.costUnit) : '—'}\n </DataList.NumberCell>\n </>\n );\n\n return href ? (\n <DataList.RowLink key={row.key} to={href} LinkComponent={LinkComponent}>\n {rowCells}\n </DataList.RowLink>\n ) : (\n <DataList.RowStatic key={row.key}>{rowCells}</DataList.RowStatic>\n );\n })}\n </DataList>\n ) : (\n <MetricsCard.NoData message=\"No thread activity yet\" />\n )}\n </TabContent>\n <TabContent value=\"resources\">\n {hasResourceData ? (\n <DataList columns=\"auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Resource ID</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Threads</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Tokens</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Cost</DataList.TopCell>\n </DataList.Top>\n {resourceRows.map(row => {\n const href = getResourceRowHref?.(row);\n const rowCells = (\n <>\n <DataList.RowHeaderCell className=\"text-caption\">\n {shortId(row.resourceId)}\n </DataList.RowHeaderCell>\n <DataList.NumberCell highlight>{row.threadCount.toLocaleString()}</DataList.NumberCell>\n <DataList.NumberCell>{row.tokens > 0 ? formatCompact(row.tokens) : '—'}</DataList.NumberCell>\n <DataList.NumberCell>\n {row.cost != null ? formatCost(row.cost, row.costUnit) : '—'}\n </DataList.NumberCell>\n </>\n );\n\n return href ? (\n <DataList.RowLink key={row.key} to={href} LinkComponent={LinkComponent}>\n {rowCells}\n </DataList.RowLink>\n ) : (\n <DataList.RowStatic key={row.key}>{rowCells}</DataList.RowStatic>\n );\n })}\n </DataList>\n ) : (\n <MetricsCard.NoData message=\"No resource activity yet\" />\n )}\n </TabContent>\n </Tabs>\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"memory-card-view.es.js","sources":["../../../../src/domains/metrics/components/memory-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { DataList } from '../../../ds/components/DataList/data-list';\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 { ActiveThreadRow } from '../hooks/use-top-active-threads-metrics';\nimport type { ResourceThreadsRow } from '../hooks/use-top-resources-by-threads-metrics';\nimport { formatCompact, formatCost, METRICS_DATA_LIST_PROPS } from './metrics-utils';\n\nexport type MemoryTab = 'threads' \| 'resources';\n\n/** Per-tab query state. Memory has two independent server queries (top\n * threads + top resources) so loading/error are scoped to the active tab. /\ntype MemoryTabState<T> = {\n data: T[] \| undefined;\n isLoading: boolean;\n isError: boolean;\n};\n\nexport interface MemoryCardViewProps {\n threads: MemoryTabState<ActiveThreadRow>;\n resources: MemoryTabState<ResourceThreadsRow>;\n /* Optional drilldown for a thread row. Receives the raw hook row. /\n getThreadRowHref?: (row: ActiveThreadRow) => string \| undefined;\n /* Optional drilldown for a resource row. Receives the raw hook row. /\n getResourceRowHref?: (row: ResourceThreadsRow) => string \| undefined;\n /* Optional slot for top-bar action buttons. Function form receives the active tab. /\n actions?: ReactNode \| ((tab: MemoryTab) => ReactNode);\n /* Override how drilldown links are rendered. Defaults to `<a>`. */\n LinkComponent?: LinkComponent;\n}\n\nfunction isMemoryTab(value: string): value is MemoryTab {\n return value === 'threads' \|\| value === 'resources';\n}\n\n// IDs are usually 32+ char UUIDs; the table is too narrow to show the full\n// value without horizontal scroll, so we elide the middle.\nfunction shortId(id: string): string {\n if (id.length <= 12) return id;\n return `${id.slice(0, 6)}…${id.slice(-4)}`;\n}\n\ntype ThreadTableRow = ActiveThreadRow & { key: string };\ntype ResourceTableRow = ResourceThreadsRow & { key: string };\n\nexport function MemoryCardView({\n threads,\n resources,\n getThreadRowHref,\n getResourceRowHref,\n actions,\n LinkComponent,\n}: MemoryCardViewProps) {\n const [activeTab, setActiveTab] = useState<MemoryTab>('threads');\n\n const threadRows: ThreadTableRow[] = threads.data?.map(r => ({ ...r, key: r.threadId })) ?? [];\n const resourceRows: ResourceTableRow[] = resources.data?.map(r => ({ ...r, key: r.resourceId })) ?? [];\n\n const hasThreadData = threadRows.length > 0;\n const hasResourceData = resourceRows.length > 0;\n\n const threadTotal = threads.data?.reduce((s, r) => s + r.runs, 0) ?? 0;\n const resourceTotal = resources.data?.reduce((s, r) => s + r.threadCount, 0) ?? 0;\n\n const active = activeTab === 'threads' ? threads : resources;\n const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Memory\" description=\"Resource and Thread consumption\" />\n {activeTab === 'threads' && hasThreadData && (\n <MetricsCard.Summary value={threadTotal.toLocaleString()} label=\"Total runs\" />\n )}\n {activeTab === 'resources' && hasResourceData && (\n <MetricsCard.Summary value={resourceTotal.toLocaleString()} label=\"Total threads\" />\n )}\n {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n </MetricsCard.TopBar>\n {active.isLoading ? (\n <MetricsCard.Loading />\n ) : active.isError ? (\n <MetricsCard.Error message=\"Failed to load memory data\" />\n ) : (\n <MetricsCard.Content>\n <Tabs\n defaultTab=\"threads\"\n value={activeTab}\n onValueChange={v => {\n if (isMemoryTab(v)) setActiveTab(v);\n }}\n className=\"grid h-full grid-rows-[auto_1fr] overflow-y-auto\"\n >\n <TabList>\n <Tab value=\"threads\">Threads</Tab>\n <Tab value=\"resources\">Resources</Tab>\n </TabList>\n <TabContent value=\"threads\" className=\"pt-3\">\n {hasThreadData ? (\n <DataList columns=\"auto auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Thread ID</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Resource ID</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Runs</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Tokens</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Cost</DataList.TopCell>\n </DataList.Top>\n {threadRows.map(row => {\n const href = getThreadRowHref?.(row);\n const rowCells = (\n <>\n <DataList.RowHeaderCell className=\"text-caption\">\n {shortId(row.threadId)}\n </DataList.RowHeaderCell>\n <DataList.NumberCell>{row.resourceId ? shortId(row.resourceId) : '—'}</DataList.NumberCell>\n <DataList.NumberCell highlight>{row.runs.toLocaleString()}</DataList.NumberCell>\n <DataList.NumberCell>{row.tokens > 0 ? formatCompact(row.tokens) : '—'}</DataList.NumberCell>\n <DataList.NumberCell>\n {row.cost != null ? formatCost(row.cost, row.costUnit) : '—'}\n </DataList.NumberCell>\n </>\n );\n\n return href ? (\n <DataList.RowLink key={row.key} to={href} LinkComponent={LinkComponent}>\n {rowCells}\n </DataList.RowLink>\n ) : (\n <DataList.RowStatic key={row.key}>{rowCells}</DataList.RowStatic>\n );\n })}\n </DataList>\n ) : (\n <MetricsCard.NoData message=\"No thread activity yet\" />\n )}\n </TabContent>\n <TabContent value=\"resources\" className=\"pt-3\">\n {hasResourceData ? (\n <DataList columns=\"auto auto auto auto\" {...METRICS_DATA_LIST_PROPS}>\n <DataList.Top>\n <DataList.TopCell sticky=\"start\">Resource ID</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Threads</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Tokens</DataList.TopCell>\n <DataList.TopCell className=\"justify-end text-right\">Cost</DataList.TopCell>\n </DataList.Top>\n {resourceRows.map(row => {\n const href = getResourceRowHref?.(row);\n const rowCells = (\n <>\n <DataList.RowHeaderCell className=\"text-caption\">\n {shortId(row.resourceId)}\n </DataList.RowHeaderCell>\n <DataList.NumberCell highlight>{row.threadCount.toLocaleString()}</DataList.NumberCell>\n <DataList.NumberCell>{row.tokens > 0 ? formatCompact(row.tokens) : '—'}</DataList.NumberCell>\n <DataList.NumberCell>\n {row.cost != null ? formatCost(row.cost, row.costUnit) : '—'}\n </DataList.NumberCell>\n </>\n );\n\n return href ? (\n <DataList.RowLink key={row.key} to={href} LinkComponent={LinkComponent}>\n {rowCells}\n </DataList.RowLink>\n ) : (\n <DataList.RowStatic key={row.key}>{rowCells}</DataList.RowStatic>\n );\n })}\n </DataList>\n ) : (\n <MetricsCard.NoData message=\"No resource activity yet\" />\n )}\n </TabContent>\n </Tabs>\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/metrics/components/model-usage-cost-card-view.cjs.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const dataList = require('../../../data-list-PwFpP_mo.cjs');
-const metricsCard = require('../../../metrics-card-DCCHIG-z.cjs');
+const metricsCard = require('../../../metrics-card-DzcVJTAN.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 function ModelUsageCostCardView({

package/dist/domains/metrics/components/model-usage-cost-card-view.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { D as DataList } from '../../../data-list-DisTjDHP.js';
-import { M as MetricsCard } from '../../../metrics-card-Bzm6m1dy.js';
+import { M as MetricsCard } from '../../../metrics-card-C2RTi5Ew.js';
 import { formatCost, METRICS_DATA_LIST_PROPS } from './metrics-utils.es.js';
 function ModelUsageCostCardView({

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const dataList = require('../../../data-list-PwFpP_mo.cjs');
-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 tabsContent = require('../../../tabs-content-DlCJoQUW.cjs');
 const tabsRoot = require('../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../tabs-tab-DFmRMdi3.cjs');
@@ -41,8 +41,8 @@ function ScoresCardView({ data, isLoading, isError }) {
         /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "over-time", children: "Over Time" }),
         /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "summary", children: "Summary" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "over-time", className: "pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No time series data yet" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "summary", children: /* @__PURE__ */ jsxRuntime.jsxs(dataList.DataList, { columns: "auto auto auto auto auto", ...domains_metrics_components_metricsUtils.METRICS_DATA_LIST_PROPS, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "over-time", className: "pt-3 pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(metricsLineChart.MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "summary", className: "pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(dataList.DataList, { columns: "auto auto auto auto auto", ...domains_metrics_components_metricsUtils.METRICS_DATA_LIST_PROPS, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(dataList.DataList.Top, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { sticky: "start", children: "Scorer" }),
           /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { className: "justify-end text-right", children: "Avg" }),

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 { 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":"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"}

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

@@ -5,7 +5,7 @@ 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');
@@ -58,7 +58,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,
@@ -75,7 +75,7 @@ function TokenUsageByAgentCardView({
               fmt: domains_metrics_components_metricsUtils.formatCompact
             }
           ) }),
-          /* @__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,

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

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

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

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

@@ -4,8 +4,8 @@ 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');
@@ -44,7 +44,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));
@@ -64,7 +63,6 @@ function TokenUsageTimelineCardView({
   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 +75,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, formatCompact, formatCost } from './metrics-utils';\n\ntype TokenUsageTimelineTab = 'tokens' \| 'cost';\n\nfunction sumMetric(dataKey: 'input' \| 'output' \| 'cost', formatter: (value: number) => string = formatCompact) {\n return (data: Record<string, unknown>[]) => ({\n value: formatter(data.reduce((sum, point) => sum + (typeof point[dataKey] === 'number' ? point[dataKey] : 0), 0)),\n });\n}\n\nconst tokenSeries = [\n {\n dataKey: 'input',\n label: 'Input tokens',\n color: CHART_COLORS.blue,\n aggregate: sumMetric('input'),\n },\n {\n dataKey: 'output',\n label: 'Output tokens',\n color: CHART_COLORS.yellow,\n aggregate: sumMetric('output'),\n },\n];\n\nfunction isTokenUsageTimelineTab(value: string): value is TokenUsageTimelineTab {\n return value === 'tokens' \|\| value === 'cost';\n}\n\nexport interface TokenUsageTimelineCardViewProps {\n data: TokenTimelinePoint[] \| undefined;\n interval: TokenUsageTimeSeriesInterval \| undefined;\n isLoading: boolean;\n isError: boolean;\n actions?: ReactNode;\n}\n\nexport function TokenUsageTimelineCardView({\n data,\n interval = '1d',\n isLoading,\n isError,\n actions,\n}: TokenUsageTimelineCardViewProps) {\n const [activeTab, setActiveTab] = useState<TokenUsageTimelineTab>('tokens');\n\n const points = data ?? [];\n const chartPoints = points.map(point => ({ ...point }));\n const hasData = points.length > 0;\n const costPoints = points.filter(point => point.cost != null && point.cost > 0);\n const costChartPoints = costPoints.map(point => ({ ...point }));\n const uniqueCostUnits = new Set(costPoints.map(point => point.costUnit).filter((unit): unit is string => !!unit));\n const hasSingleCostUnit = uniqueCostUnits.size === 1 && costPoints.every(point => point.costUnit != null);\n const costUnit = hasSingleCostUnit ? ([...uniqueCostUnits][0] ?? null) : null;\n const totalCost = hasSingleCostUnit ? costPoints.reduce((sum, point) => sum + (point.cost ?? 0), 0) : 0;\n const hasCostData = hasSingleCostUnit && totalCost > 0;\n const description = interval === '1h' ? 'Input and output tokens per hour.' : 'Input and output tokens per day.';\n\n const costSeries = [\n {\n dataKey: 'cost',\n label: 'Cost',\n color: CHART_COLORS.purple,\n aggregate: sumMetric('cost', value => formatCost(value, costUnit)),\n },\n ];\n\n return (\n <MetricsCard>\n <MetricsCard.TopBar>\n <MetricsCard.TitleAndDescription title=\"Token usage over time\" description={description} />\n {hasData && actions ? <MetricsCard.Actions>{actions}</MetricsCard.Actions> : null}\n </MetricsCard.TopBar>\n {isLoading ? (\n <MetricsCard.Loading />\n ) : isError ? (\n <MetricsCard.Error message=\"Failed to load token usage timeline\" />\n ) : (\n <MetricsCard.Content>\n {!hasData ? (\n <MetricsCard.NoData message=\"No token usage data yet\" />\n ) : (\n <Tabs\n defaultTab=\"tokens\"\n value={activeTab}\n onValueChange={value => {\n if (isTokenUsageTimelineTab(value)) setActiveTab(value);\n }}\n className=\"overflow-visible\"\n >\n <div className=\"flex flex-wrap items-center justify-between gap-2 [&>:first-child]:w-auto\">\n <TabList>\n <Tab value=\"tokens\">Tokens</Tab>\n <Tab value=\"cost\">Cost</Tab>\n </TabList>\n {activeTab === 'tokens' ? (\n <MetricsLineChartLegend data={chartPoints} series={tokenSeries} />\n ) : hasCostData ? (\n <MetricsLineChartLegend data={costChartPoints} series={costSeries} />\n ) : null}\n </div>\n <TabContent value=\"tokens\" className=\"pt-3\">\n <MetricsLineChart data={chartPoints} series={tokenSeries} showLegend={false} />\n </TabContent>\n <TabContent value=\"cost\" className=\"pt-3\">\n {hasCostData ? (\n <MetricsLineChart data={costChartPoints} series={costSeries} showLegend={false} />\n ) : (\n <MetricsCard.NoData message=\"No cost data yet\" />\n )}\n </TabContent>\n </Tabs>\n )}\n </MetricsCard.Content>\n )}\n </MetricsCard>\n );\n}\n"],"names":["formatCompact","CHART_COLORS","useState","formatCost","MetricsCard","jsxs","jsx","Tabs","TabList","Tab","MetricsLineChartLegend","TabContent","MetricsLineChart"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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';
@@ -40,7 +40,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 +59,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 +71,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" }) })
         ]
       }
     ) })