@mastra/playground-ui 62.0.0-alpha.2 → 62.0.0-alpha.4

package/dist/domains/metrics/components/failure-rate-card.cjs.js

@@ -24,6 +24,7 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
   const { stepHours } = domains_metrics_lib_metricsBuckets.bucketPlan(timestamp.start, timestamp.end);
   const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);
   const failed = data.reduce((sum, b) => sum + b.failed, 0);
+  const yDomain = failed === 0 ? [0, 1] : void 0;
   const layout = {
     title: "Failure rate",
     description: "Share of agent runs that failed.",
@@ -45,9 +46,9 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
           series: SERIES,
           height: "fill",
           xLabels: "edges",
-          showYAxis: false,
           valueFormatter: domains_metrics_lib_chartFormat.formatPercent,
           axisFormatter: axisPercent,
+          yDomain,
           onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(domains_metrics_lib_metricsBuckets.bucketWindow(Number(row.ts), stepHours))),
           isLoading,
           ...domains_metrics_lib_chartAxis.EDGE_BUCKET_AXIS

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

@@ -1 +1 @@
-{"version":3,"file":"failure-rate-card.cjs.js","sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n\n  const layout = {\n    title: 'Failure rate',\n    description: 'Share of agent runs that failed.',\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={formatPercent(runs > 0 ? failed / runs : 0)} label=\"failed\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showYAxis={false}\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useMetricsActivity","useMetricsFilters","bucketPlan","jsx","OpenErrorsInLogsButton","ChartCard","ChartCardError","MetricsCard","formatPercent","ChartArea","MetricsLineChart","bucketWindow","EDGE_BUCKET_AXIS"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,MAAA,GAAS,CAAC,EAAE,OAAA,EAAS,aAAA,EAAe,OAAO,aAAA,EAAe,KAAA,EAAOA,4CAAA,CAAa,KAAA,EAAO,CAAA;AAE3F,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAC,CAAA,CAAA,CAAA;AAU1D,SAAS,eAAA,CAAgB,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAyB;AACxF,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsBC,2DAAA,EAAmB;AAChF,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,yDAAA,EAAkB;AACxC,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,8CAAW,SAAA,CAAU,KAAA,EAAO,UAAU,GAAG,CAAA;AAC/D,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,MAAA,CAAO,CAAC,GAAA,EAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AACpE,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,CAAO,CAAC,KAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AAExD,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,kCAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgBC,cAAA,CAACC,mEAAA,EAAA,EAAuB,SAAS,YAAA,EAAc;AAAA,GAC1E;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,sCACGC,8CAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAAF,cAAA,CAACG,4DAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEH,cAAA;AAAA,IAACE,8CAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACEF,cAAA,CAACI,uBAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAOC,6CAAA,CAAc,IAAA,GAAO,CAAA,GAAI,SAAS,IAAA,GAAO,CAAC,CAAA,EAAG,KAAA,EAAM,UAAS,SAAA,EAAsB,CAAA;AAAA,MAEhH,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAAL,cAAA,CAACM,kDAAU,OAAA,EAAS,CAAC,aAAa,IAAA,KAAS,CAAA,EAAG,cAAa,8BAAA,EACzD,QAAA,kBAAAN,cAAA;AAAA,QAACO,iCAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA,EAAQ,MAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,SAAA,EAAW,KAAA;AAAA,UACX,cAAA,EAAgBF,6CAAA;AAAA,UAChB,aAAA,EAAe,WAAA;AAAA,UACf,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiBG,+CAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,SAAS,CAAC,CAAA,CAAA;AAAA,UACnG,SAAA;AAAA,UACC,GAAGC;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"failure-rate-card.cjs.js","sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n  // With nothing failed, the axis would fall back to 0-4 (400%); a share tops out at 100%.\n  const yDomain: [number, number] | undefined = failed === 0 ? [0, 1] : undefined;\n\n  const layout = {\n    title: 'Failure rate',\n    description: 'Share of agent runs that failed.',\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={formatPercent(runs > 0 ? failed / runs : 0)} label=\"failed\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          yDomain={yDomain}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useMetricsActivity","useMetricsFilters","bucketPlan","jsx","OpenErrorsInLogsButton","ChartCard","ChartCardError","MetricsCard","formatPercent","ChartArea","MetricsLineChart","bucketWindow","EDGE_BUCKET_AXIS"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,MAAA,GAAS,CAAC,EAAE,OAAA,EAAS,aAAA,EAAe,OAAO,aAAA,EAAe,KAAA,EAAOA,4CAAA,CAAa,KAAA,EAAO,CAAA;AAE3F,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAC,CAAA,CAAA,CAAA;AAU1D,SAAS,eAAA,CAAgB,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAyB;AACxF,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsBC,2DAAA,EAAmB;AAChF,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,yDAAA,EAAkB;AACxC,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,8CAAW,SAAA,CAAU,KAAA,EAAO,UAAU,GAAG,CAAA;AAC/D,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,MAAA,CAAO,CAAC,GAAA,EAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AACpE,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,CAAO,CAAC,KAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AAExD,EAAA,MAAM,UAAwC,MAAA,KAAW,CAAA,GAAI,CAAC,CAAA,EAAG,CAAC,CAAA,GAAI,MAAA;AAEtE,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,kCAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgBC,cAAA,CAACC,mEAAA,EAAA,EAAuB,SAAS,YAAA,EAAc;AAAA,GAC1E;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,sCACGC,8CAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAAF,cAAA,CAACG,4DAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEH,cAAA;AAAA,IAACE,8CAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACEF,cAAA,CAACI,uBAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAOC,6CAAA,CAAc,IAAA,GAAO,CAAA,GAAI,SAAS,IAAA,GAAO,CAAC,CAAA,EAAG,KAAA,EAAM,UAAS,SAAA,EAAsB,CAAA;AAAA,MAEhH,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAAL,cAAA,CAACM,kDAAU,OAAA,EAAS,CAAC,aAAa,IAAA,KAAS,CAAA,EAAG,cAAa,8BAAA,EACzD,QAAA,kBAAAN,cAAA;AAAA,QAACO,iCAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA,EAAQ,MAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,cAAA,EAAgBF,6CAAA;AAAA,UAChB,aAAA,EAAe,WAAA;AAAA,UACf,OAAA;AAAA,UACA,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiBG,+CAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,SAAS,CAAC,CAAA,CAAA;AAAA,UACnG,SAAA;AAAA,UACC,GAAGC;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/metrics/components/failure-rate-card.es.js

@@ -20,6 +20,7 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
   const { stepHours } = bucketPlan(timestamp.start, timestamp.end);
   const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);
   const failed = data.reduce((sum, b) => sum + b.failed, 0);
+  const yDomain = failed === 0 ? [0, 1] : void 0;
   const layout = {
     title: "Failure rate",
     description: "Share of agent runs that failed.",
@@ -41,9 +42,9 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
           series: SERIES,
           height: "fill",
           xLabels: "edges",
-          showYAxis: false,
           valueFormatter: formatPercent,
           axisFormatter: axisPercent,
+          yDomain,
           onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours))),
           isLoading,
           ...EDGE_BUCKET_AXIS

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

@@ -1 +1 @@
-{"version":3,"file":"failure-rate-card.es.js","sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n\n  const layout = {\n    title: 'Failure rate',\n    description: 'Share of agent runs that failed.',\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={formatPercent(runs > 0 ? failed / runs : 0)} label=\"failed\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showYAxis={false}\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,MAAA,GAAS,CAAC,EAAE,OAAA,EAAS,aAAA,EAAe,OAAO,aAAA,EAAe,KAAA,EAAO,YAAA,CAAa,KAAA,EAAO,CAAA;AAE3F,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAC,CAAA,CAAA,CAAA;AAU1D,SAAS,eAAA,CAAgB,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAyB;AACxF,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsB,kBAAA,EAAmB;AAChF,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AACxC,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,WAAW,SAAA,CAAU,KAAA,EAAO,UAAU,GAAG,CAAA;AAC/D,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,MAAA,CAAO,CAAC,GAAA,EAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AACpE,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,CAAO,CAAC,KAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AAExD,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,kCAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgB,GAAA,CAAC,sBAAA,EAAA,EAAuB,SAAS,YAAA,EAAc;AAAA,GAC1E;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,SAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACE,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,aAAA,CAAc,IAAA,GAAO,CAAA,GAAI,SAAS,IAAA,GAAO,CAAC,CAAA,EAAG,KAAA,EAAM,UAAS,SAAA,EAAsB,CAAA;AAAA,MAEhH,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,aAAU,OAAA,EAAS,CAAC,aAAa,IAAA,KAAS,CAAA,EAAG,cAAa,8BAAA,EACzD,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA,EAAQ,MAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,SAAA,EAAW,KAAA;AAAA,UACX,cAAA,EAAgB,aAAA;AAAA,UAChB,aAAA,EAAe,WAAA;AAAA,UACf,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiB,YAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,SAAS,CAAC,CAAA,CAAA;AAAA,UACnG,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"failure-rate-card.es.js","sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n  // With nothing failed, the axis would fall back to 0-4 (400%); a share tops out at 100%.\n  const yDomain: [number, number] | undefined = failed === 0 ? [0, 1] : undefined;\n\n  const layout = {\n    title: 'Failure rate',\n    description: 'Share of agent runs that failed.',\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={formatPercent(runs > 0 ? failed / runs : 0)} label=\"failed\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          yDomain={yDomain}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,MAAA,GAAS,CAAC,EAAE,OAAA,EAAS,aAAA,EAAe,OAAO,aAAA,EAAe,KAAA,EAAO,YAAA,CAAa,KAAA,EAAO,CAAA;AAE3F,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAC,CAAA,CAAA,CAAA;AAU1D,SAAS,eAAA,CAAgB,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAyB;AACxF,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsB,kBAAA,EAAmB;AAChF,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AACxC,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,WAAW,SAAA,CAAU,KAAA,EAAO,UAAU,GAAG,CAAA;AAC/D,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,MAAA,CAAO,CAAC,GAAA,EAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AACpE,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,CAAO,CAAC,KAAK,CAAA,KAAM,GAAA,GAAM,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA;AAExD,EAAA,MAAM,UAAwC,MAAA,KAAW,CAAA,GAAI,CAAC,CAAA,EAAG,CAAC,CAAA,GAAI,MAAA;AAEtE,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,kCAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgB,GAAA,CAAC,sBAAA,EAAA,EAAuB,SAAS,YAAA,EAAc;AAAA,GAC1E;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,SAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACE,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,aAAA,CAAc,IAAA,GAAO,CAAA,GAAI,SAAS,IAAA,GAAO,CAAC,CAAA,EAAG,KAAA,EAAM,UAAS,SAAA,EAAsB,CAAA;AAAA,MAEhH,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,aAAU,OAAA,EAAS,CAAC,aAAa,IAAA,KAAS,CAAA,EAAG,cAAa,8BAAA,EACzD,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA,EAAQ,MAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,cAAA,EAAgB,aAAA;AAAA,UAChB,aAAA,EAAe,WAAA;AAAA,UACf,OAAA;AAAA,UACA,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiB,YAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,SAAS,CAAC,CAAA,CAAA;AAAA,UACnG,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -72,7 +72,6 @@ function LatencyCard({ onViewTraces, onTimeRangeClick }) {
           height: "fill",
           xLabels: "edges",
           showLegend: false,
-          showYAxis: false,
           valueFormatter: domains_metrics_lib_chartFormat.formatDuration,
           axisFormatter: domains_metrics_lib_chartFormat.formatAxisDuration,
           onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(domains_metrics_lib_metricsBuckets.bucketWindow(Number(row.ts), step))),

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

@@ -1 +1 @@
-{"version":3,"file":"latency-card.cjs.js","sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nfunction seriesFor(entity: LatencyEntity): MetricsLineChartSeries[] {\n  return [\n    { dataKey: `${entity}P50`, label: 'P50', color: CHART_COLORS.sky },\n    { dataKey: `${entity}P95`, label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  ];\n}\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50 and P95 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency();\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const series = seriesFor(entity);\n  const peak = Math.max(0, ...data.map(b => b[`${entity}P95`] ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          showYAxis={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["EntityType","CHART_COLORS","useState","useMetricsLatency","useMetricsFilters","intervalHours","bucketPlan","jsx","OpenInTracesButton","jsxs","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatDuration","ChartArea","MetricsLineChart","formatAxisDuration","bucketWindow","EDGE_BUCKET_AXIS"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,WAAA,GAAiD;AAAA,EACrD,QAAQA,wBAAA,CAAW,KAAA;AAAA,EACnB,WAAWA,wBAAA,CAAW,YAAA;AAAA,EACtB,OAAOA,wBAAA,CAAW;AACpB,CAAA;AAEA,SAAS,UAAU,MAAA,EAAiD;AAClE,EAAA,OAAO;AAAA,IACL,EAAE,SAAS,CAAA,EAAG,MAAM,OAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAOC,4CAAA,CAAa,GAAA,EAAI;AAAA,IACjE,EAAE,OAAA,EAAS,CAAA,EAAG,MAAM,CAAA,GAAA,CAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAOA,4CAAA,CAAa,KAAA,EAAO,QAAA,EAAU,IAAA;AAAK,GACrF;AACF;AAEA,MAAM,UAAA,GAA4C;AAAA,EAChD,MAAA,EAAQ,YAAA;AAAA,EACR,SAAA,EAAW,eAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAUO,SAAS,WAAA,CAAY,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAqB;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAAwB,QAAQ,CAAA;AAC5D,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsBC,yDAAA,EAAkB;AAC/E,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,yDAAA,EAAkB;AAExC,EAAA,MAAM,IAAA,GAAOC,iDAAcC,6CAAA,CAAW,SAAA,CAAU,OAAO,SAAA,CAAU,GAAG,EAAE,QAAQ,CAAA;AAC9E,EAAA,MAAM,MAAA,GAAS,UAAU,MAAM,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,CAAA,EAAG,MAAM,CAAA,GAAA,CAAK,CAAA,IAAK,CAAC,CAAC,CAAA;AAEjE,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,SAAA;AAAA,IACP,WAAA,EAAa,uBAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgBC,cAAA,CAACC,+DAAA,EAAA,EAAmB,OAAA,EAAS,MAAM,YAAA,CAAa,WAAA,CAAY,MAAM,CAAC,CAAA,EAAG,CAAA;AAAA,IAC/F,OAAA,kBACEC,eAAA,CAACC,uBAAA,CAAY,OAAA,EAAZ,EACC,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACI,kDAAuB,MAAA,EAAgB,CAAA;AAAA,sCACvCD,uBAAA,CAAY,IAAA,EAAZ,EAAgC,KAAA,EAAO,MAAA,EAAQ,eAAe,SAAA,EAC7D,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAACG,uBAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,UAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,uCACrCA,uBAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,aAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,uCAC3CA,uBAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,SAAQ,QAAA,EAAA,OAAA,EAAK;AAAA,OAAA,EACtC;AAAA,KAAA,EACF;AAAA,GAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,sCACGE,8CAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAAL,cAAA,CAACM,4DAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEN,cAAA;AAAA,IAACK,8CAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACEL,cAAA,CAACG,uBAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,IAAA,GAAO,CAAA,GAAII,8CAAA,CAAe,IAAI,CAAA,GAAI,GAAA,EAAK,KAAA,EAAM,YAAW,SAAA,EAAsB,CAAA;AAAA,MAE5G,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAAP,cAAA,CAACQ,8CAAA,EAAA,EAAU,OAAA,EAAS,CAAC,SAAA,IAAa,IAAA,KAAS,CAAA,EAAG,YAAA,EAAc,CAAA,GAAA,EAAM,UAAA,CAAW,MAAM,CAAC,CAAA,eAAA,CAAA,EAClF,QAAA,kBAAAR,cAAA;AAAA,QAACS,iCAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA;AAAA,UACA,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,UAAA,EAAY,KAAA;AAAA,UACZ,SAAA,EAAW,KAAA;AAAA,UACX,cAAA,EAAgBF,8CAAA;AAAA,UAChB,aAAA,EAAeG,kDAAA;AAAA,UACf,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiBC,+CAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,IAAI,CAAC,CAAA,CAAA;AAAA,UAC9F,SAAA;AAAA,UACC,GAAGC;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"latency-card.cjs.js","sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nfunction seriesFor(entity: LatencyEntity): MetricsLineChartSeries[] {\n  return [\n    { dataKey: `${entity}P50`, label: 'P50', color: CHART_COLORS.sky },\n    { dataKey: `${entity}P95`, label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  ];\n}\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50 and P95 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency();\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const series = seriesFor(entity);\n  const peak = Math.max(0, ...data.map(b => b[`${entity}P95`] ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["EntityType","CHART_COLORS","useState","useMetricsLatency","useMetricsFilters","intervalHours","bucketPlan","jsx","OpenInTracesButton","jsxs","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatDuration","ChartArea","MetricsLineChart","formatAxisDuration","bucketWindow","EDGE_BUCKET_AXIS"],"mappings":"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"}

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

@@ -68,7 +68,6 @@ function LatencyCard({ onViewTraces, onTimeRangeClick }) {
           height: "fill",
           xLabels: "edges",
           showLegend: false,
-          showYAxis: false,
           valueFormatter: formatDuration,
           axisFormatter: formatAxisDuration,
           onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), step))),

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

@@ -1 +1 @@
-{"version":3,"file":"latency-card.es.js","sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nfunction seriesFor(entity: LatencyEntity): MetricsLineChartSeries[] {\n  return [\n    { dataKey: `${entity}P50`, label: 'P50', color: CHART_COLORS.sky },\n    { dataKey: `${entity}P95`, label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  ];\n}\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50 and P95 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency();\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const series = seriesFor(entity);\n  const peak = Math.max(0, ...data.map(b => b[`${entity}P95`] ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          showYAxis={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,WAAA,GAAiD;AAAA,EACrD,QAAQ,UAAA,CAAW,KAAA;AAAA,EACnB,WAAW,UAAA,CAAW,YAAA;AAAA,EACtB,OAAO,UAAA,CAAW;AACpB,CAAA;AAEA,SAAS,UAAU,MAAA,EAAiD;AAClE,EAAA,OAAO;AAAA,IACL,EAAE,SAAS,CAAA,EAAG,MAAM,OAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,YAAA,CAAa,GAAA,EAAI;AAAA,IACjE,EAAE,OAAA,EAAS,CAAA,EAAG,MAAM,CAAA,GAAA,CAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,YAAA,CAAa,KAAA,EAAO,QAAA,EAAU,IAAA;AAAK,GACrF;AACF;AAEA,MAAM,UAAA,GAA4C;AAAA,EAChD,MAAA,EAAQ,YAAA;AAAA,EACR,SAAA,EAAW,eAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAUO,SAAS,WAAA,CAAY,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAqB;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAwB,QAAQ,CAAA;AAC5D,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsB,iBAAA,EAAkB;AAC/E,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAExC,EAAA,MAAM,IAAA,GAAO,cAAc,UAAA,CAAW,SAAA,CAAU,OAAO,SAAA,CAAU,GAAG,EAAE,QAAQ,CAAA;AAC9E,EAAA,MAAM,MAAA,GAAS,UAAU,MAAM,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,CAAA,EAAG,MAAM,CAAA,GAAA,CAAK,CAAA,IAAK,CAAC,CAAC,CAAA;AAEjE,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,SAAA;AAAA,IACP,WAAA,EAAa,uBAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgB,GAAA,CAAC,kBAAA,EAAA,EAAmB,OAAA,EAAS,MAAM,YAAA,CAAa,WAAA,CAAY,MAAM,CAAC,CAAA,EAAG,CAAA;AAAA,IAC/F,OAAA,kBACE,IAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,0BAAuB,MAAA,EAAgB,CAAA;AAAA,2BACvC,WAAA,CAAY,IAAA,EAAZ,EAAgC,KAAA,EAAO,MAAA,EAAQ,eAAe,SAAA,EAC7D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,UAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,4BACrC,WAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,aAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,4BAC3C,WAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,SAAQ,QAAA,EAAA,OAAA,EAAK;AAAA,OAAA,EACtC;AAAA,KAAA,EACF;AAAA,GAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,SAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACE,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,IAAA,GAAO,CAAA,GAAI,cAAA,CAAe,IAAI,CAAA,GAAI,GAAA,EAAK,KAAA,EAAM,YAAW,SAAA,EAAsB,CAAA;AAAA,MAE5G,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAS,CAAC,SAAA,IAAa,IAAA,KAAS,CAAA,EAAG,YAAA,EAAc,CAAA,GAAA,EAAM,UAAA,CAAW,MAAM,CAAC,CAAA,eAAA,CAAA,EAClF,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA;AAAA,UACA,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,UAAA,EAAY,KAAA;AAAA,UACZ,SAAA,EAAW,KAAA;AAAA,UACX,cAAA,EAAgB,cAAA;AAAA,UAChB,aAAA,EAAe,kBAAA;AAAA,UACf,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiB,YAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,IAAI,CAAC,CAAA,CAAA;AAAA,UAC9F,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"latency-card.es.js","sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nfunction seriesFor(entity: LatencyEntity): MetricsLineChartSeries[] {\n  return [\n    { dataKey: `${entity}P50`, label: 'P50', color: CHART_COLORS.sky },\n    { dataKey: `${entity}P95`, label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  ];\n}\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50 and P95 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency();\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const series = seriesFor(entity);\n  const peak = Math.max(0, ...data.map(b => b[`${entity}P95`] ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,WAAA,GAAiD;AAAA,EACrD,QAAQ,UAAA,CAAW,KAAA;AAAA,EACnB,WAAW,UAAA,CAAW,YAAA;AAAA,EACtB,OAAO,UAAA,CAAW;AACpB,CAAA;AAEA,SAAS,UAAU,MAAA,EAAiD;AAClE,EAAA,OAAO;AAAA,IACL,EAAE,SAAS,CAAA,EAAG,MAAM,OAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,YAAA,CAAa,GAAA,EAAI;AAAA,IACjE,EAAE,OAAA,EAAS,CAAA,EAAG,MAAM,CAAA,GAAA,CAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,YAAA,CAAa,KAAA,EAAO,QAAA,EAAU,IAAA;AAAK,GACrF;AACF;AAEA,MAAM,UAAA,GAA4C;AAAA,EAChD,MAAA,EAAQ,YAAA;AAAA,EACR,SAAA,EAAW,eAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAUO,SAAS,WAAA,CAAY,EAAE,YAAA,EAAc,gBAAA,EAAiB,EAAqB;AAChF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAwB,QAAQ,CAAA;AAC5D,EAAA,MAAM,EAAE,OAAO,EAAC,EAAG,WAAW,OAAA,EAAS,iBAAA,KAAsB,iBAAA,EAAkB;AAC/E,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAExC,EAAA,MAAM,IAAA,GAAO,cAAc,UAAA,CAAW,SAAA,CAAU,OAAO,SAAA,CAAU,GAAG,EAAE,QAAQ,CAAA;AAC9E,EAAA,MAAM,MAAA,GAAS,UAAU,MAAM,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,CAAA,EAAG,MAAM,CAAA,GAAA,CAAK,CAAA,IAAK,CAAC,CAAC,CAAA;AAEjE,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,KAAA,EAAO,SAAA;AAAA,IACP,WAAA,EAAa,uBAAA;AAAA,IACb,OAAA,EAAS,YAAA,oBAAgB,GAAA,CAAC,kBAAA,EAAA,EAAmB,OAAA,EAAS,MAAM,YAAA,CAAa,WAAA,CAAY,MAAM,CAAC,CAAA,EAAG,CAAA;AAAA,IAC/F,OAAA,kBACE,IAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,0BAAuB,MAAA,EAAgB,CAAA;AAAA,2BACvC,WAAA,CAAY,IAAA,EAAZ,EAAgC,KAAA,EAAO,MAAA,EAAQ,eAAe,SAAA,EAC7D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,UAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,4BACrC,WAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,aAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,4BAC3C,WAAA,CAAY,GAAA,EAAZ,EAAgB,KAAA,EAAM,SAAQ,QAAA,EAAA,OAAA,EAAK;AAAA,OAAA,EACtC;AAAA,KAAA,EACF;AAAA,GAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,SAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACE,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,KAAA,EAAO,IAAA,GAAO,CAAA,GAAI,cAAA,CAAe,IAAI,CAAA,GAAI,GAAA,EAAK,KAAA,EAAM,YAAW,SAAA,EAAsB,CAAA;AAAA,MAE5G,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAS,CAAC,SAAA,IAAa,IAAA,KAAS,CAAA,EAAG,YAAA,EAAc,CAAA,GAAA,EAAM,UAAA,CAAW,MAAM,CAAC,CAAA,eAAA,CAAA,EAClF,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA;AAAA,UACA,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAQ,OAAA;AAAA,UACR,UAAA,EAAY,KAAA;AAAA,UACZ,cAAA,EAAgB,cAAA;AAAA,UAChB,aAAA,EAAe,kBAAA;AAAA,UACf,aAAA,EAAe,gBAAA,KAAqB,CAAA,GAAA,KAAO,gBAAA,CAAiB,YAAA,CAAa,OAAO,GAAA,CAAI,EAAE,CAAA,EAAG,IAAI,CAAC,CAAA,CAAA;AAAA,UAC9F,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -55,7 +55,6 @@ function ScoresCard() {
           data: data?.buckets ?? [],
           series: scorerSeries(scorers),
           height: "fill",
-          showYAxis: false,
           yDomain: [0, 1],
           valueFormatter: formatScore,
           axisFormatter: axisScore,

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

@@ -1 +1 @@
-{"version":3,"file":"scores-card.cjs.js","sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => score.toFixed(1);\n\n/** One line per scorer; the legend carries its mean over the range. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name, average }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n    aggregate: () => ({ value: formatScore(average) }),\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores', description: 'Average scorer result, 0 to 1.' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={String(scorers.length)}\n          label={scorers.length === 1 ? 'scorer' : 'scorers'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          showYAxis={false}\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useMetricsScores","ChartCard","jsx","ChartCardError","MetricsCard","ChartArea","MetricsLineChart","BUCKET_AXIS"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,aAAA,GAAgB;AAAA,EACpBA,4CAAA,CAAa,KAAA;AAAA,EACbA,4CAAA,CAAa,GAAA;AAAA,EACbA,4CAAA,CAAa,MAAA;AAAA,EACbA,4CAAA,CAAa,IAAA;AAAA,EACbA,4CAAA,CAAa;AACf,CAAA;AAEA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AACtD,MAAM,SAAA,GAAY,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAGpD,SAAS,aAAa,OAAA,EAAoD;AACxE,EAAA,OAAO,OAAA,CAAQ,IAAI,CAAC,EAAE,UAAU,IAAA,EAAM,OAAA,IAAW,CAAA,MAAO;AAAA,IACtD,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,IAAA;AAAA,IACP,OAAO,aAAA,CAAc,CAAA,GAAI,aAAA,CAAc,MAAM,KAAKA,4CAAA,CAAa,OAAA;AAAA,IAC/D,WAAW,OAAO,EAAE,KAAA,EAAO,WAAA,CAAY,OAAO,CAAA,EAAE;AAAA,GAClD,CAAE,CAAA;AACJ;AAGO,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,OAAA,EAAS,iBAAA,KAAsBC,uDAAA,EAAiB;AACzE,EAAA,MAAM,OAAA,GAAU,IAAA,EAAM,OAAA,IAAW,EAAC;AAElC,EAAA,MAAM,MAAA,GAAS,EAAE,KAAA,EAAO,QAAA,EAAU,aAAa,gCAAA,EAAiC;AAEhF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,sCACGC,8CAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAAC,cAAA,CAACC,4DAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACED,cAAA;AAAA,IAACD,8CAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACEC,cAAA;AAAA,QAACE,uBAAA,CAAY,OAAA;AAAA,QAAZ;AAAA,UACC,KAAA,EAAO,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA;AAAA,UAC5B,KAAA,EAAO,OAAA,CAAQ,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,UACzC;AAAA;AAAA,OACF;AAAA,MAEF,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAAF,cAAA,CAACG,kDAAU,OAAA,EAAS,CAAC,aAAa,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG,YAAA,EAAa,0BAAA,EACnE,QAAA,kBAAAH,cAAA;AAAA,QAACI,iCAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,IAAA,EAAM,OAAA,IAAW,EAAC;AAAA,UACxB,MAAA,EAAQ,aAAa,OAAO,CAAA;AAAA,UAC5B,MAAA,EAAO,MAAA;AAAA,UACP,SAAA,EAAW,KAAA;AAAA,UACX,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,UACd,cAAA,EAAgB,WAAA;AAAA,UAChB,aAAA,EAAe,SAAA;AAAA,UACf,SAAA;AAAA,UACC,GAAGC;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"scores-card.cjs.js","sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => score.toFixed(1);\n\n/** One line per scorer; the legend carries its mean over the range. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name, average }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n    aggregate: () => ({ value: formatScore(average) }),\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores', description: 'Average scorer result, 0 to 1.' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={String(scorers.length)}\n          label={scorers.length === 1 ? 'scorer' : 'scorers'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useMetricsScores","ChartCard","jsx","ChartCardError","MetricsCard","ChartArea","MetricsLineChart","BUCKET_AXIS"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,aAAA,GAAgB;AAAA,EACpBA,4CAAA,CAAa,KAAA;AAAA,EACbA,4CAAA,CAAa,GAAA;AAAA,EACbA,4CAAA,CAAa,MAAA;AAAA,EACbA,4CAAA,CAAa,IAAA;AAAA,EACbA,4CAAA,CAAa;AACf,CAAA;AAEA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AACtD,MAAM,SAAA,GAAY,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAGpD,SAAS,aAAa,OAAA,EAAoD;AACxE,EAAA,OAAO,OAAA,CAAQ,IAAI,CAAC,EAAE,UAAU,IAAA,EAAM,OAAA,IAAW,CAAA,MAAO;AAAA,IACtD,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,IAAA;AAAA,IACP,OAAO,aAAA,CAAc,CAAA,GAAI,aAAA,CAAc,MAAM,KAAKA,4CAAA,CAAa,OAAA;AAAA,IAC/D,WAAW,OAAO,EAAE,KAAA,EAAO,WAAA,CAAY,OAAO,CAAA,EAAE;AAAA,GAClD,CAAE,CAAA;AACJ;AAGO,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,OAAA,EAAS,iBAAA,KAAsBC,uDAAA,EAAiB;AACzE,EAAA,MAAM,OAAA,GAAU,IAAA,EAAM,OAAA,IAAW,EAAC;AAElC,EAAA,MAAM,MAAA,GAAS,EAAE,KAAA,EAAO,QAAA,EAAU,aAAa,gCAAA,EAAiC;AAEhF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,sCACGC,8CAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAAC,cAAA,CAACC,4DAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACED,cAAA;AAAA,IAACD,8CAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACEC,cAAA;AAAA,QAACE,uBAAA,CAAY,OAAA;AAAA,QAAZ;AAAA,UACC,KAAA,EAAO,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA;AAAA,UAC5B,KAAA,EAAO,OAAA,CAAQ,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,UACzC;AAAA;AAAA,OACF;AAAA,MAEF,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAAF,cAAA,CAACG,kDAAU,OAAA,EAAS,CAAC,aAAa,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG,YAAA,EAAa,0BAAA,EACnE,QAAA,kBAAAH,cAAA;AAAA,QAACI,iCAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,IAAA,EAAM,OAAA,IAAW,EAAC;AAAA,UACxB,MAAA,EAAQ,aAAa,OAAO,CAAA;AAAA,UAC5B,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,UACd,cAAA,EAAgB,WAAA;AAAA,UAChB,aAAA,EAAe,SAAA;AAAA,UACf,SAAA;AAAA,UACC,GAAGC;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -51,7 +51,6 @@ function ScoresCard() {
           data: data?.buckets ?? [],
           series: scorerSeries(scorers),
           height: "fill",
-          showYAxis: false,
           yDomain: [0, 1],
           valueFormatter: formatScore,
           axisFormatter: axisScore,

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

@@ -1 +1 @@
-{"version":3,"file":"scores-card.es.js","sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => score.toFixed(1);\n\n/** One line per scorer; the legend carries its mean over the range. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name, average }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n    aggregate: () => ({ value: formatScore(average) }),\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores', description: 'Average scorer result, 0 to 1.' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={String(scorers.length)}\n          label={scorers.length === 1 ? 'scorer' : 'scorers'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          showYAxis={false}\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,aAAA,GAAgB;AAAA,EACpB,YAAA,CAAa,KAAA;AAAA,EACb,YAAA,CAAa,GAAA;AAAA,EACb,YAAA,CAAa,MAAA;AAAA,EACb,YAAA,CAAa,IAAA;AAAA,EACb,YAAA,CAAa;AACf,CAAA;AAEA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AACtD,MAAM,SAAA,GAAY,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAGpD,SAAS,aAAa,OAAA,EAAoD;AACxE,EAAA,OAAO,OAAA,CAAQ,IAAI,CAAC,EAAE,UAAU,IAAA,EAAM,OAAA,IAAW,CAAA,MAAO;AAAA,IACtD,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,IAAA;AAAA,IACP,OAAO,aAAA,CAAc,CAAA,GAAI,aAAA,CAAc,MAAM,KAAK,YAAA,CAAa,OAAA;AAAA,IAC/D,WAAW,OAAO,EAAE,KAAA,EAAO,WAAA,CAAY,OAAO,CAAA,EAAE;AAAA,GAClD,CAAE,CAAA;AACJ;AAGO,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,OAAA,EAAS,iBAAA,KAAsB,gBAAA,EAAiB;AACzE,EAAA,MAAM,OAAA,GAAU,IAAA,EAAM,OAAA,IAAW,EAAC;AAElC,EAAA,MAAM,MAAA,GAAS,EAAE,KAAA,EAAO,QAAA,EAAU,aAAa,gCAAA,EAAiC;AAEhF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,SAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACE,GAAA;AAAA,QAAC,WAAA,CAAY,OAAA;AAAA,QAAZ;AAAA,UACC,KAAA,EAAO,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA;AAAA,UAC5B,KAAA,EAAO,OAAA,CAAQ,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,UACzC;AAAA;AAAA,OACF;AAAA,MAEF,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,aAAU,OAAA,EAAS,CAAC,aAAa,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG,YAAA,EAAa,0BAAA,EACnE,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,IAAA,EAAM,OAAA,IAAW,EAAC;AAAA,UACxB,MAAA,EAAQ,aAAa,OAAO,CAAA;AAAA,UAC5B,MAAA,EAAO,MAAA;AAAA,UACP,SAAA,EAAW,KAAA;AAAA,UACX,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,UACd,cAAA,EAAgB,WAAA;AAAA,UAChB,aAAA,EAAe,SAAA;AAAA,UACf,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"scores-card.es.js","sources":["../../../../src/domains/metrics/components/scores-card.tsx"],"sourcesContent":["import { useMetricsScores } from '../hooks/use-metrics-scores';\nimport type { ScorerAverage } from '../hooks/use-metrics-scores';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart } from '@/ds/components/MetricsLineChart';\n\n/** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */\nconst SCORER_COLORS = [\n  CHART_COLORS.green,\n  CHART_COLORS.sky,\n  CHART_COLORS.violet,\n  CHART_COLORS.teal,\n  CHART_COLORS.indigo,\n];\n\nconst formatScore = (score: number) => score.toFixed(2);\nconst axisScore = (score: number) => score.toFixed(1);\n\n/** One line per scorer; the legend carries its mean over the range. */\nfunction scorerSeries(scorers: ScorerAverage[]): MetricsLineChartSeries[] {\n  return scorers.map(({ scorerId, name, average }, i) => ({\n    dataKey: scorerId,\n    label: name,\n    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,\n    aggregate: () => ({ value: formatScore(average) }),\n  }));\n}\n\n/** Average result of each scorer over time, 0 to 1. */\nexport function ScoresCard() {\n  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();\n  const scorers = data?.scorers ?? [];\n\n  const layout = { title: 'Scores', description: 'Average scorer result, 0 to 1.' };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={String(scorers.length)}\n          label={scorers.length === 1 ? 'scorer' : 'scorers'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && scorers.length === 0} emptyMessage=\"No scores in this range.\">\n        <MetricsLineChart\n          data={data?.buckets ?? []}\n          series={scorerSeries(scorers)}\n          height=\"fill\"\n          yDomain={[0, 1]}\n          valueFormatter={formatScore}\n          axisFormatter={axisScore}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,aAAA,GAAgB;AAAA,EACpB,YAAA,CAAa,KAAA;AAAA,EACb,YAAA,CAAa,GAAA;AAAA,EACb,YAAA,CAAa,MAAA;AAAA,EACb,YAAA,CAAa,IAAA;AAAA,EACb,YAAA,CAAa;AACf,CAAA;AAEA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AACtD,MAAM,SAAA,GAAY,CAAC,KAAA,KAAkB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAGpD,SAAS,aAAa,OAAA,EAAoD;AACxE,EAAA,OAAO,OAAA,CAAQ,IAAI,CAAC,EAAE,UAAU,IAAA,EAAM,OAAA,IAAW,CAAA,MAAO;AAAA,IACtD,OAAA,EAAS,QAAA;AAAA,IACT,KAAA,EAAO,IAAA;AAAA,IACP,OAAO,aAAA,CAAc,CAAA,GAAI,aAAA,CAAc,MAAM,KAAK,YAAA,CAAa,OAAA;AAAA,IAC/D,WAAW,OAAO,EAAE,KAAA,EAAO,WAAA,CAAY,OAAO,CAAA,EAAE;AAAA,GAClD,CAAE,CAAA;AACJ;AAGO,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,OAAA,EAAS,iBAAA,KAAsB,gBAAA,EAAiB;AACzE,EAAA,MAAM,OAAA,GAAU,IAAA,EAAM,OAAA,IAAW,EAAC;AAElC,EAAA,MAAM,MAAA,GAAS,EAAE,KAAA,EAAO,QAAA,EAAU,aAAa,gCAAA,EAAiC;AAEhF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,SAAA,EAAA,EAAW,GAAG,MAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAAA,EAClB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,OAAA,kBACE,GAAA;AAAA,QAAC,WAAA,CAAY,OAAA;AAAA,QAAZ;AAAA,UACC,KAAA,EAAO,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA;AAAA,UAC5B,KAAA,EAAO,OAAA,CAAQ,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,UACzC;AAAA;AAAA,OACF;AAAA,MAEF,UAAA,EAAY,iBAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,aAAU,OAAA,EAAS,CAAC,aAAa,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG,YAAA,EAAa,0BAAA,EACnE,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,IAAA,EAAM,OAAA,IAAW,EAAC;AAAA,UACxB,MAAA,EAAQ,aAAa,OAAO,CAAA;AAAA,UAC5B,MAAA,EAAO,MAAA;AAAA,UACP,OAAA,EAAS,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,UACd,cAAA,EAAgB,WAAA;AAAA,UAChB,aAAA,EAAe,SAAA;AAAA,UACf,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -69,7 +69,6 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
           series,
           height: "fill",
           showLegend: false,
-          showYAxis: false,
           valueFormatter: isTokens ? domains_metrics_lib_chartFormat.formatCount : domains_metrics_lib_chartFormat.formatUsd,
           axisFormatter: isTokens ? domains_metrics_lib_chartFormat.formatAxisCount : axisUsd,
           onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(domains_metrics_lib_metricsBuckets.bucketWindow(Number(row.ts), stepHours))),

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

@@ -1 +1 @@
-{"version":3,"file":"token-usage-card.cjs.js","sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\nconst axisUsd = (value: number) => `$${value.toFixed(value < 10 ? 1 : 0)}`;\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: 'Token usage',\n    description: isTokens ? 'Input, cache reads and output.' : 'Estimated model spend.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<View> value={view} onValueChange={setView}>\n          <MetricsCard.Tab value=\"tokens\">Tokens</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"cost\">Cost</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={isTokens ? formatCount(tokens) : formatUsd(cost)}\n          label={isTokens ? 'tokens' : 'cost'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          showLegend={false}\n          showYAxis={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : axisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useState","useMetricsActivity","useMetricsFilters","bucketPlan","jsx","OpenInTracesButton","jsxs","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatCount","formatUsd","ChartArea","MetricsStackedBarChart","formatAxisCount","bucketWindow","BUCKET_AXIS"],"mappings":"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"}
+{"version":3,"file":"token-usage-card.cjs.js","sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\nconst axisUsd = (value: number) => `$${value.toFixed(value < 10 ? 1 : 0)}`;\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: 'Token usage',\n    description: isTokens ? 'Input, cache reads and output.' : 'Estimated model spend.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<View> value={view} onValueChange={setView}>\n          <MetricsCard.Tab value=\"tokens\">Tokens</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"cost\">Cost</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={isTokens ? formatCount(tokens) : formatUsd(cost)}\n          label={isTokens ? 'tokens' : 'cost'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          showLegend={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : axisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["CHART_COLORS","useState","useMetricsActivity","useMetricsFilters","bucketPlan","jsx","OpenInTracesButton","jsxs","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatCount","formatUsd","ChartArea","MetricsStackedBarChart","formatAxisCount","bucketWindow","BUCKET_AXIS"],"mappings":"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"}

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

@@ -65,7 +65,6 @@ function TokenUsageCard({ onViewTraces, onTimeRangeClick }) {
           series,
           height: "fill",
           showLegend: false,
-          showYAxis: false,
           valueFormatter: isTokens ? formatCount : formatUsd,
           axisFormatter: isTokens ? formatAxisCount : axisUsd,
           onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours))),

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

@@ -1 +1 @@
-{"version":3,"file":"token-usage-card.es.js","sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\nconst axisUsd = (value: number) => `$${value.toFixed(value < 10 ? 1 : 0)}`;\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: 'Token usage',\n    description: isTokens ? 'Input, cache reads and output.' : 'Estimated model spend.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<View> value={view} onValueChange={setView}>\n          <MetricsCard.Tab value=\"tokens\">Tokens</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"cost\">Cost</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={isTokens ? formatCount(tokens) : formatUsd(cost)}\n          label={isTokens ? 'tokens' : 'cost'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          showLegend={false}\n          showYAxis={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : axisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"token-usage-card.es.js","sources":["../../../../src/domains/metrics/components/token-usage-card.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisCount, formatCount, formatUsd } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsStackedBarChart } from '@/ds/components/MetricsStackedBarChart';\n\ntype View = 'tokens' | 'cost';\n\nconst TOKEN_SERIES: MetricsLineChartSeries[] = [\n  { dataKey: 'input', label: 'Input', color: CHART_COLORS.green },\n  { dataKey: 'cacheRead', label: 'Cache read', color: CHART_COLORS.violet },\n  { dataKey: 'output', label: 'Output', color: CHART_COLORS.sky },\n];\nconst COST_SERIES: MetricsLineChartSeries[] = [{ dataKey: 'cost', label: 'Cost', color: CHART_COLORS.green }];\n\nconst axisUsd = (value: number) => `$${value.toFixed(value < 10 ? 1 : 0)}`;\n\n/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */\nexport type TokenUsageCardProps = {\n  /** Called from the \"View in Traces\" button. */\n  onViewTraces?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps) {\n  const [view, setView] = useState<View>('tokens');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const tokens = data.reduce((sum, b) => sum + b.input + b.cacheRead + b.output, 0);\n  const cost = data.reduce((sum, b) => sum + b.cost, 0);\n  const isTokens = view === 'tokens';\n  const series = isTokens ? TOKEN_SERIES : COST_SERIES;\n\n  const layout = {\n    title: 'Token usage',\n    description: isTokens ? 'Input, cache reads and output.' : 'Estimated model spend.',\n    actions: onViewTraces && <OpenInTracesButton onClick={onViewTraces} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<View> value={view} onValueChange={setView}>\n          <MetricsCard.Tab value=\"tokens\">Tokens</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"cost\">Cost</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary\n          value={isTokens ? formatCount(tokens) : formatUsd(cost)}\n          label={isTokens ? 'tokens' : 'cost'}\n          isLoading={isLoading}\n        />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && tokens === 0 && cost === 0} emptyMessage=\"No model calls in this range.\">\n        <MetricsStackedBarChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          showLegend={false}\n          valueFormatter={isTokens ? formatCount : formatUsd}\n          axisFormatter={isTokens ? formatAxisCount : axisUsd}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/scores/components/score-data-panel.cjs.js

@@ -8,7 +8,7 @@ const React = require('react');
 const domains_scores_components_scoreAsItemDialog = require('./score-as-item-dialog.cjs.js');
 const Button = require('../../../Button-BpSkkuzG.cjs');
 const dataKeysAndValues = require('../../../data-keys-and-values-C1I--hWn.cjs');
-const dataPanel = require('../../../data-panel-BaqnMzRn.cjs');
+const dataPanel = require('../../../data-panel-r1LYHphg.cjs');
 const Txt = require('../../../Txt-DXjXpX9r.cjs');
 const lib_framework = require('../../../lib/framework.cjs.js');
 const utils_cn = require('../../../cn-TqD01zH-.cjs');
@@ -44,20 +44,22 @@ function ScoreDataPanel({ score, onClose, onPrevious, onNext, depth }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel, { open: !!score, onClose, title: score ? `Score ${score.id}` : "Score", depth, children: score && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CloseButton, { onClick: onClose }),
         /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Heading, { children: [
           "Score",
           /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CopyId, { id: score.id })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.HeaderActions, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          dataPanel.DataPanel.NextPrevNav,
-          {
-            onPrevious,
-            onNext,
-            previousLabel: "Go to previous score",
-            nextLabel: "Go to next score"
-          }
-        ) })
+        /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderActions, { children: [
+          (onPrevious || onNext) && /* @__PURE__ */ jsxRuntime.jsx(
+            dataPanel.DataPanel.NextPrevNav,
+            {
+              onPrevious,
+              onNext,
+              previousLabel: "Go to previous score",
+              nextLabel: "Go to next score"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CloseButton, { icon: "x", onClick: onClose, label: "Close score", tooltip: "Close score" })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Content, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(dataKeysAndValues.DataKeysAndValues, { children: [

package/dist/domains/scores/components/score-data-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"score-data-panel.cjs.js","sources":["../../../../src/domains/scores/components/score-data-panel.tsx"],"sourcesContent":["import type { ClientScoreRowData } from '@mastra/client-js';\nimport { FileInputIcon, FileOutputIcon, GaugeIcon, ReceiptText, SaveIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport { ScoreAsItemDialog } from './score-as-item-dialog';\nimport { Button } from '@/ds/components/Button';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Txt } from '@/ds/components/Txt';\nimport { useLinkComponent } from '@/lib/framework';\nimport { cn } from '@/utils/cn';\nimport { formatTimestampPrecise } from '@/utils/date-format';\n\nfunction isCodeBasedScorer(score?: ClientScoreRowData): boolean {\n  if (!score) return false;\n  const scorer = score.scorer as Record<string, unknown> | undefined;\n  if (scorer?.hasJudge === false) return true;\n  if (scorer?.hasJudge === true) return false;\n  return !score.preprocessPrompt && !score.analyzePrompt && !score.generateScorePrompt && !score.generateReasonPrompt;\n}\n\nfunction buildDialogTitle(sectionTitle: string, icon: React.ReactNode, score: ClientScoreRowData) {\n  return (\n    <>\n      <Txt as=\"span\" variant=\"eyebrow\" tone=\"faint\" className=\"flex items-center gap-1.5 [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </Txt>\n      <span>\n        › Score <b className=\"text-muted-foreground\">#{score.id}</b>\n      </span>\n    </>\n  );\n}\n\nexport interface ScoreDataPanelProps {\n  /** Always mount the panel and pass `undefined` to close it, so the drawer can animate out. */\n  score?: ClientScoreRowData;\n  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  depth?: 1 | 2 | 3;\n}\n\nexport function ScoreDataPanel({ score, onClose, onPrevious, onNext, depth }: ScoreDataPanelProps) {\n  const { Link, paths } = useLinkComponent();\n  const [datasetDialogOpen, setDatasetDialogOpen] = useState(false);\n  const isCodeBased = isCodeBasedScorer(score);\n  const naText = isCodeBased ? 'N/A — code-based scorer does not use prompts' : 'N/A — step not configured';\n\n  return (\n    <>\n      <DataPanel open={!!score} onClose={onClose} title={score ? `Score ${score.id}` : 'Score'} depth={depth}>\n        {score && (\n          <>\n            <DataPanel.Header>\n              <DataPanel.CloseButton onClick={onClose} />\n              <DataPanel.Heading>\n                Score\n                <DataPanel.CopyId id={score.id} />\n              </DataPanel.Heading>\n              <DataPanel.HeaderActions>\n                <DataPanel.NextPrevNav\n                  onPrevious={onPrevious}\n                  onNext={onNext}\n                  previousLabel=\"Go to previous score\"\n                  nextLabel=\"Go to next score\"\n                />\n              </DataPanel.HeaderActions>\n            </DataPanel.Header>\n\n            <DataPanel.Content>\n              <DataKeysAndValues>\n                {score.scorer?.name != null && (\n                  <>\n                    <DataKeysAndValues.Key>Scorer</DataKeysAndValues.Key>\n                    <DataKeysAndValues.Value>{String(score.scorer.name)}</DataKeysAndValues.Value>\n                  </>\n                )}\n                {score.createdAt && (\n                  <>\n                    <DataKeysAndValues.Key>Created</DataKeysAndValues.Key>\n                    <DataKeysAndValues.Value>{formatTimestampPrecise(score.createdAt)}</DataKeysAndValues.Value>\n                  </>\n                )}\n                {score.traceId && (\n                  <>\n                    <DataKeysAndValues.Key>Trace Id</DataKeysAndValues.Key>\n                    {paths.traceLink(score.traceId) ? (\n                      <DataKeysAndValues.ValueLink href={paths.traceLink(score.traceId)} as={Link}>\n                        {score.traceId}\n                      </DataKeysAndValues.ValueLink>\n                    ) : (\n                      <DataKeysAndValues.Value>{score.traceId}</DataKeysAndValues.Value>\n                    )}\n                  </>\n                )}\n                {score.spanId && score.traceId && (\n                  <>\n                    <DataKeysAndValues.Key>Span Id</DataKeysAndValues.Key>\n                    {paths.traceLink(score.traceId, score.spanId) ? (\n                      <DataKeysAndValues.ValueLink href={paths.traceLink(score.traceId, score.spanId)} as={Link}>\n                        {score.spanId}\n                      </DataKeysAndValues.ValueLink>\n                    ) : (\n                      <DataKeysAndValues.Value>{score.spanId}</DataKeysAndValues.Value>\n                    )}\n                  </>\n                )}\n              </DataKeysAndValues>\n\n              <div className=\"my-6 flex justify-end\">\n                <Button size=\"sm\" onClick={() => setDatasetDialogOpen(true)} icon={<SaveIcon />}>\n                  Save as Dataset Item\n                </Button>\n              </div>\n\n              <div className=\"mb-6 text-muted-foreground\">\n                <div\n                  className={cn(\n                    'text-placeholder',\n                    'flex items-baseline gap-2',\n                    '[&>svg]:size-5 [&>svg]:translate-y-1',\n                  )}\n                >\n                  <GaugeIcon />\n                  <Txt as=\"span\" variant=\"body\">\n                    Score:\n                  </Txt>\n                  <Txt\n                    as=\"b\"\n                    variant=\"body\"\n                    tone=\"muted\"\n                    className=\"tabular-nums\"\n                  >{`${score.score == null || Number.isNaN(score.score) ? 'n/a' : score.score}`}</Txt>\n                </div>\n                <Txt as=\"p\" variant=\"body-sm\" className=\"mt-2\">\n                  {score.reason ||\n                    (isCodeBased ? 'N/A — code-based scorer does not generate a reason' : 'N/A — step not configured')}\n                </Txt>\n              </div>\n\n              <div className=\"grid gap-4\">\n                <DataPanel.CodeSection\n                  title=\"Input\"\n                  dialogTitle={buildDialogTitle('Input', <FileInputIcon />, score)}\n                  icon={<FileInputIcon />}\n                  codeStr={JSON.stringify(score.input ?? null, null, 2)}\n                />\n                <DataPanel.CodeSection\n                  title=\"Output\"\n                  dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, score)}\n                  icon={<FileOutputIcon />}\n                  codeStr={JSON.stringify(score.output ?? null, null, 2)}\n                />\n                <DataPanel.CodeSection\n                  title=\"Preprocess Prompt\"\n                  dialogTitle={buildDialogTitle('Preprocess Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.preprocessPrompt || naText}\n                  simplified={true}\n                />\n                <DataPanel.CodeSection\n                  title=\"Analyze Prompt\"\n                  dialogTitle={buildDialogTitle('Analyze Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.analyzePrompt || naText}\n                  simplified={true}\n                />\n                <DataPanel.CodeSection\n                  title=\"Generate Score Prompt\"\n                  dialogTitle={buildDialogTitle('Generate Score Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.generateScorePrompt || naText}\n                  simplified={true}\n                />\n                <DataPanel.CodeSection\n                  title=\"Generate Reason Prompt\"\n                  dialogTitle={buildDialogTitle('Generate Reason Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.generateReasonPrompt || naText}\n                  simplified={true}\n                />\n              </div>\n            </DataPanel.Content>\n          </>\n        )}\n      </DataPanel>\n\n      {score && (\n        <ScoreAsItemDialog score={score} isOpen={datasetDialogOpen} onClose={() => setDatasetDialogOpen(false)} />\n      )}\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","Txt","useLinkComponent","useState","jsx","DataPanel","DataKeysAndValues","formatTimestampPrecise","Button","SaveIcon","cn","GaugeIcon","FileInputIcon","FileOutputIcon","ReceiptText","ScoreAsItemDialog"],"mappings":"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"}
+{"version":3,"file":"score-data-panel.cjs.js","sources":["../../../../src/domains/scores/components/score-data-panel.tsx"],"sourcesContent":["import type { ClientScoreRowData } from '@mastra/client-js';\nimport { FileInputIcon, FileOutputIcon, GaugeIcon, ReceiptText, SaveIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport { ScoreAsItemDialog } from './score-as-item-dialog';\nimport { Button } from '@/ds/components/Button';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Txt } from '@/ds/components/Txt';\nimport { useLinkComponent } from '@/lib/framework';\nimport { cn } from '@/utils/cn';\nimport { formatTimestampPrecise } from '@/utils/date-format';\n\nfunction isCodeBasedScorer(score?: ClientScoreRowData): boolean {\n  if (!score) return false;\n  const scorer = score.scorer as Record<string, unknown> | undefined;\n  if (scorer?.hasJudge === false) return true;\n  if (scorer?.hasJudge === true) return false;\n  return !score.preprocessPrompt && !score.analyzePrompt && !score.generateScorePrompt && !score.generateReasonPrompt;\n}\n\nfunction buildDialogTitle(sectionTitle: string, icon: React.ReactNode, score: ClientScoreRowData) {\n  return (\n    <>\n      <Txt as=\"span\" variant=\"eyebrow\" tone=\"faint\" className=\"flex items-center gap-1.5 [&>svg]:size-3.5\">\n        {icon}\n        {sectionTitle}\n      </Txt>\n      <span>\n        › Score <b className=\"text-muted-foreground\">#{score.id}</b>\n      </span>\n    </>\n  );\n}\n\nexport interface ScoreDataPanelProps {\n  /** Always mount the panel and pass `undefined` to close it, so the drawer can animate out. */\n  score?: ClientScoreRowData;\n  onClose: () => void;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  depth?: 1 | 2 | 3;\n}\n\nexport function ScoreDataPanel({ score, onClose, onPrevious, onNext, depth }: ScoreDataPanelProps) {\n  const { Link, paths } = useLinkComponent();\n  const [datasetDialogOpen, setDatasetDialogOpen] = useState(false);\n  const isCodeBased = isCodeBasedScorer(score);\n  const naText = isCodeBased ? 'N/A — code-based scorer does not use prompts' : 'N/A — step not configured';\n\n  return (\n    <>\n      <DataPanel open={!!score} onClose={onClose} title={score ? `Score ${score.id}` : 'Score'} depth={depth}>\n        {score && (\n          <>\n            <DataPanel.Header>\n              <DataPanel.Heading>\n                Score\n                <DataPanel.CopyId id={score.id} />\n              </DataPanel.Heading>\n              <DataPanel.HeaderActions>\n                {(onPrevious || onNext) && (\n                  <DataPanel.NextPrevNav\n                    onPrevious={onPrevious}\n                    onNext={onNext}\n                    previousLabel=\"Go to previous score\"\n                    nextLabel=\"Go to next score\"\n                  />\n                )}\n                <DataPanel.CloseButton icon=\"x\" onClick={onClose} label=\"Close score\" tooltip=\"Close score\" />\n              </DataPanel.HeaderActions>\n            </DataPanel.Header>\n\n            <DataPanel.Content>\n              <DataKeysAndValues>\n                {score.scorer?.name != null && (\n                  <>\n                    <DataKeysAndValues.Key>Scorer</DataKeysAndValues.Key>\n                    <DataKeysAndValues.Value>{String(score.scorer.name)}</DataKeysAndValues.Value>\n                  </>\n                )}\n                {score.createdAt && (\n                  <>\n                    <DataKeysAndValues.Key>Created</DataKeysAndValues.Key>\n                    <DataKeysAndValues.Value>{formatTimestampPrecise(score.createdAt)}</DataKeysAndValues.Value>\n                  </>\n                )}\n                {score.traceId && (\n                  <>\n                    <DataKeysAndValues.Key>Trace Id</DataKeysAndValues.Key>\n                    {paths.traceLink(score.traceId) ? (\n                      <DataKeysAndValues.ValueLink href={paths.traceLink(score.traceId)} as={Link}>\n                        {score.traceId}\n                      </DataKeysAndValues.ValueLink>\n                    ) : (\n                      <DataKeysAndValues.Value>{score.traceId}</DataKeysAndValues.Value>\n                    )}\n                  </>\n                )}\n                {score.spanId && score.traceId && (\n                  <>\n                    <DataKeysAndValues.Key>Span Id</DataKeysAndValues.Key>\n                    {paths.traceLink(score.traceId, score.spanId) ? (\n                      <DataKeysAndValues.ValueLink href={paths.traceLink(score.traceId, score.spanId)} as={Link}>\n                        {score.spanId}\n                      </DataKeysAndValues.ValueLink>\n                    ) : (\n                      <DataKeysAndValues.Value>{score.spanId}</DataKeysAndValues.Value>\n                    )}\n                  </>\n                )}\n              </DataKeysAndValues>\n\n              <div className=\"my-6 flex justify-end\">\n                <Button size=\"sm\" onClick={() => setDatasetDialogOpen(true)} icon={<SaveIcon />}>\n                  Save as Dataset Item\n                </Button>\n              </div>\n\n              <div className=\"mb-6 text-muted-foreground\">\n                <div\n                  className={cn(\n                    'text-placeholder',\n                    'flex items-baseline gap-2',\n                    '[&>svg]:size-5 [&>svg]:translate-y-1',\n                  )}\n                >\n                  <GaugeIcon />\n                  <Txt as=\"span\" variant=\"body\">\n                    Score:\n                  </Txt>\n                  <Txt\n                    as=\"b\"\n                    variant=\"body\"\n                    tone=\"muted\"\n                    className=\"tabular-nums\"\n                  >{`${score.score == null || Number.isNaN(score.score) ? 'n/a' : score.score}`}</Txt>\n                </div>\n                <Txt as=\"p\" variant=\"body-sm\" className=\"mt-2\">\n                  {score.reason ||\n                    (isCodeBased ? 'N/A — code-based scorer does not generate a reason' : 'N/A — step not configured')}\n                </Txt>\n              </div>\n\n              <div className=\"grid gap-4\">\n                <DataPanel.CodeSection\n                  title=\"Input\"\n                  dialogTitle={buildDialogTitle('Input', <FileInputIcon />, score)}\n                  icon={<FileInputIcon />}\n                  codeStr={JSON.stringify(score.input ?? null, null, 2)}\n                />\n                <DataPanel.CodeSection\n                  title=\"Output\"\n                  dialogTitle={buildDialogTitle('Output', <FileOutputIcon />, score)}\n                  icon={<FileOutputIcon />}\n                  codeStr={JSON.stringify(score.output ?? null, null, 2)}\n                />\n                <DataPanel.CodeSection\n                  title=\"Preprocess Prompt\"\n                  dialogTitle={buildDialogTitle('Preprocess Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.preprocessPrompt || naText}\n                  simplified={true}\n                />\n                <DataPanel.CodeSection\n                  title=\"Analyze Prompt\"\n                  dialogTitle={buildDialogTitle('Analyze Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.analyzePrompt || naText}\n                  simplified={true}\n                />\n                <DataPanel.CodeSection\n                  title=\"Generate Score Prompt\"\n                  dialogTitle={buildDialogTitle('Generate Score Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.generateScorePrompt || naText}\n                  simplified={true}\n                />\n                <DataPanel.CodeSection\n                  title=\"Generate Reason Prompt\"\n                  dialogTitle={buildDialogTitle('Generate Reason Prompt', <ReceiptText />, score)}\n                  icon={<ReceiptText />}\n                  codeStr={score.generateReasonPrompt || naText}\n                  simplified={true}\n                />\n              </div>\n            </DataPanel.Content>\n          </>\n        )}\n      </DataPanel>\n\n      {score && (\n        <ScoreAsItemDialog score={score} isOpen={datasetDialogOpen} onClose={() => setDatasetDialogOpen(false)} />\n      )}\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","Txt","useLinkComponent","useState","jsx","DataPanel","DataKeysAndValues","formatTimestampPrecise","Button","SaveIcon","cn","GaugeIcon","FileInputIcon","FileOutputIcon","ReceiptText","ScoreAsItemDialog"],"mappings":"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"}

package/dist/domains/scores/components/score-data-panel.es.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { ScoreAsItemDialog } from './score-as-item-dialog.es.js';
 import { B as Button } from '../../../Button-MHlMpc97.js';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-B1u00ihh.js';
-import { D as DataPanel } from '../../../data-panel-BLk0mZe6.js';
+import { D as DataPanel } from '../../../data-panel-VYp4slDb.js';
 import { T as Txt } from '../../../Txt-BuzYj7Vy.js';
 import { useLinkComponent } from '../../../lib/framework.es.js';
 import { c as cn } from '../../../cn-coERSHz5.js';
@@ -40,20 +40,22 @@ function ScoreDataPanel({ score, onClose, onPrevious, onNext, depth }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DataPanel, { open: !!score, onClose, title: score ? `Score ${score.id}` : "Score", depth, children: score && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(DataPanel.Header, { children: [
-        /* @__PURE__ */ jsx(DataPanel.CloseButton, { onClick: onClose }),
         /* @__PURE__ */ jsxs(DataPanel.Heading, { children: [
           "Score",
           /* @__PURE__ */ jsx(DataPanel.CopyId, { id: score.id })
         ] }),
-        /* @__PURE__ */ jsx(DataPanel.HeaderActions, { children: /* @__PURE__ */ jsx(
-          DataPanel.NextPrevNav,
-          {
-            onPrevious,
-            onNext,
-            previousLabel: "Go to previous score",
-            nextLabel: "Go to next score"
-          }
-        ) })
+        /* @__PURE__ */ jsxs(DataPanel.HeaderActions, { children: [
+          (onPrevious || onNext) && /* @__PURE__ */ jsx(
+            DataPanel.NextPrevNav,
+            {
+              onPrevious,
+              onNext,
+              previousLabel: "Go to previous score",
+              nextLabel: "Go to next score"
+            }
+          ),
+          /* @__PURE__ */ jsx(DataPanel.CloseButton, { icon: "x", onClick: onClose, label: "Close score", tooltip: "Close score" })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs(DataPanel.Content, { children: [
         /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [