@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/domains/metrics/components/latency-card.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/metrics/components/latency-card'
+export {}

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

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EntityType } from '@mastra/core/observability';
+import { useState } from 'react';
+import { useMetricsFilters } from '../hooks/use-metrics-filters.es.js';
+import { useMetricsLatency } from '../hooks/use-metrics-latency.es.js';
+import { EDGE_BUCKET_AXIS } from '../lib/chart-axis.es.js';
+import { CHART_COLORS } from '../lib/chart-colors.es.js';
+import { formatAxisDuration, formatDuration } from '../lib/chart-format.es.js';
+import { intervalHours, bucketPlan, bucketWindow } from '../lib/metrics-buckets.es.js';
+import { OpenInTracesButton } from './card-action-buttons.es.js';
+import { ChartArea } from './chart-area.es.js';
+import { ChartCard } from './chart-card.es.js';
+import { ChartCardError } from './chart-card-error.es.js';
+import { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+import { M as MetricsLineChart } from '../../../metrics-line-chart-BBn0LeqC.js';
+import { M as MetricsLineChartLegend } from '../../../metrics-line-chart-tooltip-bgRf6KTb.js';
+
+const ROOT_ENTITY = {
+  agents: EntityType.AGENT,
+  workflows: EntityType.WORKFLOW_RUN,
+  tools: EntityType.TOOL
+};
+function seriesFor(entity) {
+  return [
+    { dataKey: `${entity}P50`, label: "P50", color: CHART_COLORS.sky },
+    { dataKey: `${entity}P95`, label: "P95", color: CHART_COLORS.green, emphasis: true }
+  ];
+}
+const EMPTY_NOUN = {
+  agents: "agent runs",
+  workflows: "workflow runs",
+  tools: "tool calls"
+};
+function LatencyCard({ onViewTraces, onTimeRangeClick }) {
+  const [entity, setEntity] = useState("agents");
+  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency();
+  const { timestamp } = useMetricsFilters();
+  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);
+  const series = seriesFor(entity);
+  const peak = Math.max(0, ...data.map((b) => b[`${entity}P95`] ?? 0));
+  const layout = {
+    title: "Latency",
+    description: "Duration percentiles.",
+    actions: onViewTraces && /* @__PURE__ */ jsx(OpenInTracesButton, { onClick: () => onViewTraces(ROOT_ENTITY[entity]) }),
+    toolbar: /* @__PURE__ */ jsxs(MetricsCard.Toolbar, { children: [
+      /* @__PURE__ */ jsx(MetricsLineChartLegend, { series }),
+      /* @__PURE__ */ jsxs(MetricsCard.Tabs, { value: entity, onValueChange: setEntity, children: [
+        /* @__PURE__ */ jsx(MetricsCard.Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsx(MetricsCard.Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsx(MetricsCard.Tab, { value: "tools", children: "Tools" })
+      ] })
+    ] })
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsx(ChartCard, { ...layout, children: /* @__PURE__ */ jsx(ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsx(MetricsCard.Summary, { value: peak > 0 ? formatDuration(peak) : "—", label: "peak P95", isLoading }),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsx(ChartArea, { isEmpty: !isLoading && peak === 0, emptyMessage: `No ${EMPTY_NOUN[entity]} in this range.`, children: /* @__PURE__ */ jsx(
+        MetricsLineChart,
+        {
+          data,
+          series,
+          height: "fill",
+          xLabels: "edges",
+          showLegend: false,
+          showYAxis: false,
+          valueFormatter: formatDuration,
+          axisFormatter: formatAxisDuration,
+          onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), step))),
+          isLoading,
+          ...EDGE_BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+export { LatencyCard };
+//# sourceMappingURL=latency-card.es.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('../../../../cn-TqD01zH-.cjs');
+
+const columnClasses = {
+  2: "@3xl:grid-cols-2",
+  3: "@3xl:grid-cols-2 @7xl:grid-cols-3"
+};
+const spanClasses = {
+  1: "",
+  2: "@3xl:col-span-2",
+  full: "col-span-full"
+};
+function MetricsGrid({ children, columns = 3, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("@container", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-4", columnClasses[columns]), children }) });
+}
+function MetricsGridItem({ children, span = 1, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("min-w-0 *:w-full *:min-w-0!", spanClasses[span], className), children });
+}
+MetricsGrid.Item = MetricsGridItem;
+
+exports.MetricsGrid = MetricsGrid;
+//# sourceMappingURL=metrics-grid.cjs.js.map

package/dist/domains/metrics/components/metrics-grid/metrics-grid.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-grid.cjs.js","sources":["../../../../../src/domains/metrics/components/metrics-grid/metrics-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsGridColumns = 2 | 3;\nexport type MetricsGridItemSpan = 1 | 2 | 'full';\n\n/**\n * Breakpoints follow the grid's own width (container queries), not the viewport,\n * so the sidebar or any surrounding layout doesn't skew the column count.\n */\nconst columnClasses: Record<MetricsGridColumns, string> = {\n  2: '@3xl:grid-cols-2',\n  3: '@3xl:grid-cols-2 @7xl:grid-cols-3',\n};\n\nconst spanClasses: Record<MetricsGridItemSpan, string> = {\n  1: '',\n  2: '@3xl:col-span-2',\n  full: 'col-span-full',\n};\n\nexport type MetricsGridProps = {\n  children: ReactNode;\n  /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */\n  columns?: MetricsGridColumns;\n  className?: string;\n};\n\n/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */\nexport function MetricsGrid({ children, columns = 3, className }: MetricsGridProps) {\n  return (\n    <div className={cn('@container', className)}>\n      <div className={cn('grid gap-4', columnClasses[columns])}>{children}</div>\n    </div>\n  );\n}\n\nexport type MetricsGridItemProps = {\n  children: ReactNode;\n  span?: MetricsGridItemSpan;\n  className?: string;\n};\n\n/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */\nfunction MetricsGridItem({ children, span = 1, className }: MetricsGridItemProps) {\n  return <div className={cn('min-w-0 *:w-full *:min-w-0!', spanClasses[span], className)}>{children}</div>;\n}\n\nMetricsGrid.Item = MetricsGridItem;\n"],"names":["cn","jsx"],"mappings":";;;;;;;AAUA,MAAM,aAAA,GAAoD;AAAA,EACxD,CAAA,EAAG,kBAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEA,MAAM,WAAA,GAAmD;AAAA,EACvD,CAAA,EAAG,EAAA;AAAA,EACH,CAAA,EAAG,iBAAA;AAAA,EACH,IAAA,EAAM;AACR,CAAA;AAUO,SAAS,YAAY,EAAE,QAAA,EAAU,OAAA,GAAU,CAAA,EAAG,WAAU,EAAqB;AAClF,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWA,WAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EACxC,QAAA,kBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,YAAG,YAAA,EAAc,aAAA,CAAc,OAAO,CAAC,CAAA,EAAI,UAAS,CAAA,EACtE,CAAA;AAEJ;AASA,SAAS,gBAAgB,EAAE,QAAA,EAAU,IAAA,GAAO,CAAA,EAAG,WAAU,EAAyB;AAChF,EAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,WAAA,CAAG,6BAAA,EAA+B,YAAY,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA;AACpG;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;;;;"}

package/dist/domains/metrics/components/metrics-grid/metrics-grid.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../../src/domains/metrics/components/metrics-grid/metrics-grid'
+export {}

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from '../../../../cn-coERSHz5.js';
+
+const columnClasses = {
+  2: "@3xl:grid-cols-2",
+  3: "@3xl:grid-cols-2 @7xl:grid-cols-3"
+};
+const spanClasses = {
+  1: "",
+  2: "@3xl:col-span-2",
+  full: "col-span-full"
+};
+function MetricsGrid({ children, columns = 3, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("@container", className), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", columnClasses[columns]), children }) });
+}
+function MetricsGridItem({ children, span = 1, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 *:w-full *:min-w-0!", spanClasses[span], className), children });
+}
+MetricsGrid.Item = MetricsGridItem;
+
+export { MetricsGrid };
+//# sourceMappingURL=metrics-grid.es.js.map

package/dist/domains/metrics/components/metrics-grid/metrics-grid.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-grid.es.js","sources":["../../../../../src/domains/metrics/components/metrics-grid/metrics-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsGridColumns = 2 | 3;\nexport type MetricsGridItemSpan = 1 | 2 | 'full';\n\n/**\n * Breakpoints follow the grid's own width (container queries), not the viewport,\n * so the sidebar or any surrounding layout doesn't skew the column count.\n */\nconst columnClasses: Record<MetricsGridColumns, string> = {\n  2: '@3xl:grid-cols-2',\n  3: '@3xl:grid-cols-2 @7xl:grid-cols-3',\n};\n\nconst spanClasses: Record<MetricsGridItemSpan, string> = {\n  1: '',\n  2: '@3xl:col-span-2',\n  full: 'col-span-full',\n};\n\nexport type MetricsGridProps = {\n  children: ReactNode;\n  /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */\n  columns?: MetricsGridColumns;\n  className?: string;\n};\n\n/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */\nexport function MetricsGrid({ children, columns = 3, className }: MetricsGridProps) {\n  return (\n    <div className={cn('@container', className)}>\n      <div className={cn('grid gap-4', columnClasses[columns])}>{children}</div>\n    </div>\n  );\n}\n\nexport type MetricsGridItemProps = {\n  children: ReactNode;\n  span?: MetricsGridItemSpan;\n  className?: string;\n};\n\n/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */\nfunction MetricsGridItem({ children, span = 1, className }: MetricsGridItemProps) {\n  return <div className={cn('min-w-0 *:w-full *:min-w-0!', spanClasses[span], className)}>{children}</div>;\n}\n\nMetricsGrid.Item = MetricsGridItem;\n"],"names":[],"mappings":";;;AAUA,MAAM,aAAA,GAAoD;AAAA,EACxD,CAAA,EAAG,kBAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEA,MAAM,WAAA,GAAmD;AAAA,EACvD,CAAA,EAAG,EAAA;AAAA,EACH,CAAA,EAAG,iBAAA;AAAA,EACH,IAAA,EAAM;AACR,CAAA;AAUO,SAAS,YAAY,EAAE,QAAA,EAAU,OAAA,GAAU,CAAA,EAAG,WAAU,EAAqB;AAClF,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,YAAA,EAAc,aAAA,CAAc,OAAO,CAAC,CAAA,EAAI,UAAS,CAAA,EACtE,CAAA;AAEJ;AASA,SAAS,gBAAgB,EAAE,QAAA,EAAU,IAAA,GAAO,CAAA,EAAG,WAAU,EAAyB;AAChF,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,YAAY,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA;AACpG;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;;;;"}

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

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const metrics = require('@mastra/react/hooks/metrics');
+const reactQuery = require('@tanstack/react-query');
+const lucideReact = require('lucide-react');
+const domains_metrics_hooks_useMetrics = require('../hooks/use-metrics.cjs.js');
+const domains_metrics_hooks_useMetricsFilters = require('../hooks/use-metrics-filters.cjs.js');
+const domains_metrics_lib_chartFormat = require('../lib/chart-format.cjs.js');
+const domains_metrics_components_kpiCard = require('./kpi-card.cjs.js');
+const metricsCardGroup = require('../../../metrics-card-group-DfilYeeY.cjs');
+
+const KEEP = { placeholderData: reactQuery.keepPreviousData };
+const count = (value) => value == null ? "—" : domains_metrics_lib_chartFormat.formatCount(value);
+const usd = (value) => value == null ? "—" : domains_metrics_lib_chartFormat.formatUsd(value);
+const change = (pct) => pct == null || !Number.isFinite(pct) ? void 0 : pct;
+const previousCount = (value) => value == null ? void 0 : domains_metrics_lib_chartFormat.formatCount(value);
+const previousUsd = (value) => value == null ? void 0 : domains_metrics_lib_chartFormat.formatUsd(value);
+function MetricsKpis() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(metricsCardGroup.MetricsCardGroup, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AgentRunsKpi, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ModelCostKpi, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(TokensKpi, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ThreadsKpi, {})
+  ] });
+}
+function AgentRunsKpi() {
+  const { comparisonLabel } = domains_metrics_hooks_useMetrics.useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = metrics.useAgentRunsKpiMetrics({
+    ...domains_metrics_hooks_useMetricsFilters.useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_kpiCard.KpiCard,
+    {
+      label: "Agent runs",
+      icon: lucideReact.BotIcon,
+      value: count(data?.value),
+      change: change(data?.changePercent),
+      detail: "in this range",
+      previous: previousCount(data?.previousValue),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function ModelCostKpi() {
+  const { comparisonLabel } = domains_metrics_hooks_useMetrics.useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = metrics.useModelCostKpiMetrics({
+    ...domains_metrics_hooks_useMetricsFilters.useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_kpiCard.KpiCard,
+    {
+      label: "Model cost",
+      icon: lucideReact.CoinsIcon,
+      value: usd(data?.cost),
+      change: change(data?.costChangePercent),
+      lowerIsBetter: true,
+      detail: "estimated",
+      previous: previousUsd(data?.previousCost),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function TokensKpi() {
+  const { comparisonLabel } = domains_metrics_hooks_useMetrics.useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = metrics.useTotalTokensKpiMetrics({
+    ...domains_metrics_hooks_useMetricsFilters.useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_kpiCard.KpiCard,
+    {
+      label: "Tokens",
+      icon: lucideReact.HashIcon,
+      value: count(data?.value),
+      change: change(data?.changePercent),
+      detail: "input and output",
+      previous: previousCount(data?.previousValue),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function ThreadsKpi() {
+  const { comparisonLabel } = domains_metrics_hooks_useMetrics.useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = metrics.useActiveThreadsKpiMetrics({
+    ...domains_metrics_hooks_useMetricsFilters.useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_kpiCard.KpiCard,
+    {
+      label: "Threads",
+      icon: lucideReact.MessagesSquareIcon,
+      value: count(data?.value),
+      change: change(data?.changePercent),
+      detail: "with agent runs",
+      previous: previousCount(data?.previousValue),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+
+exports.MetricsKpis = MetricsKpis;
+//# sourceMappingURL=metrics-kpis.cjs.js.map

package/dist/domains/metrics/components/metrics-kpis.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpis.cjs.js","sources":["../../../../src/domains/metrics/components/metrics-kpis.tsx"],"sourcesContent":["import {\n  useActiveThreadsKpiMetrics,\n  useAgentRunsKpiMetrics,\n  useModelCostKpiMetrics,\n  useTotalTokensKpiMetrics,\n} from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';\nimport { useMetrics } from '../hooks/use-metrics';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { formatCount, formatUsd } from '../lib/chart-format';\nimport { KpiCard } from './kpi-card';\nimport { MetricsCardGroup } from '@/ds/components/MetricsCardGroup';\n\nconst KEEP = { placeholderData: keepPreviousData };\n\n// The API sends `null` for \"no value\": shown as a dash, or no change at all.\nconst count = (value: number | null | undefined) => (value == null ? '—' : formatCount(value));\nconst usd = (value: number | null | undefined) => (value == null ? '—' : formatUsd(value));\nconst change = (pct: number | null | undefined) => (pct == null || !Number.isFinite(pct) ? undefined : pct);\nconst previousCount = (value: number | null | undefined) => (value == null ? undefined : formatCount(value));\nconst previousUsd = (value: number | null | undefined) => (value == null ? undefined : formatUsd(value));\n\n/** Agent runs, model cost, tokens and threads for the range, each against the previous range. */\nexport function MetricsKpis() {\n  return (\n    <MetricsCardGroup>\n      <AgentRunsKpi />\n      <ModelCostKpi />\n      <TokensKpi />\n      <ThreadsKpi />\n    </MetricsCardGroup>\n  );\n}\n\nfunction AgentRunsKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useAgentRunsKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Agent runs\"\n      icon={BotIcon}\n      value={count(data?.value)}\n      change={change(data?.changePercent)}\n      detail=\"in this range\"\n      previous={previousCount(data?.previousValue)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ModelCostKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useModelCostKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Model cost\"\n      icon={CoinsIcon}\n      value={usd(data?.cost)}\n      change={change(data?.costChangePercent)}\n      lowerIsBetter\n      detail=\"estimated\"\n      previous={previousUsd(data?.previousCost)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction TokensKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useTotalTokensKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Tokens\"\n      icon={HashIcon}\n      value={count(data?.value)}\n      change={change(data?.changePercent)}\n      detail=\"input and output\"\n      previous={previousCount(data?.previousValue)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ThreadsKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useActiveThreadsKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Threads\"\n      icon={MessagesSquareIcon}\n      value={count(data?.value)}\n      change={change(data?.changePercent)}\n      detail=\"with agent runs\"\n      previous={previousCount(data?.previousValue)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n"],"names":["keepPreviousData","formatCount","formatUsd","MetricsCardGroup","jsx","useMetrics","useAgentRunsKpiMetrics","useMetricsFilters","KpiCard","BotIcon","useModelCostKpiMetrics","CoinsIcon","useTotalTokensKpiMetrics","HashIcon","useActiveThreadsKpiMetrics","MessagesSquareIcon"],"mappings":"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"}

package/dist/domains/metrics/components/metrics-kpis.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/metrics/components/metrics-kpis'
+export {}

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

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAgentRunsKpiMetrics, useModelCostKpiMetrics, useTotalTokensKpiMetrics, useActiveThreadsKpiMetrics } from '@mastra/react/hooks/metrics';
+import { keepPreviousData } from '@tanstack/react-query';
+import { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';
+import { useMetrics } from '../hooks/use-metrics.es.js';
+import { useMetricsFilters } from '../hooks/use-metrics-filters.es.js';
+import { formatCount, formatUsd } from '../lib/chart-format.es.js';
+import { KpiCard } from './kpi-card.es.js';
+import { M as MetricsCardGroup } from '../../../metrics-card-group-byrcZkvx.js';
+
+const KEEP = { placeholderData: keepPreviousData };
+const count = (value) => value == null ? "—" : formatCount(value);
+const usd = (value) => value == null ? "—" : formatUsd(value);
+const change = (pct) => pct == null || !Number.isFinite(pct) ? void 0 : pct;
+const previousCount = (value) => value == null ? void 0 : formatCount(value);
+const previousUsd = (value) => value == null ? void 0 : formatUsd(value);
+function MetricsKpis() {
+  return /* @__PURE__ */ jsxs(MetricsCardGroup, { children: [
+    /* @__PURE__ */ jsx(AgentRunsKpi, {}),
+    /* @__PURE__ */ jsx(ModelCostKpi, {}),
+    /* @__PURE__ */ jsx(TokensKpi, {}),
+    /* @__PURE__ */ jsx(ThreadsKpi, {})
+  ] });
+}
+function AgentRunsKpi() {
+  const { comparisonLabel } = useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = useAgentRunsKpiMetrics({
+    ...useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsx(
+    KpiCard,
+    {
+      label: "Agent runs",
+      icon: BotIcon,
+      value: count(data?.value),
+      change: change(data?.changePercent),
+      detail: "in this range",
+      previous: previousCount(data?.previousValue),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function ModelCostKpi() {
+  const { comparisonLabel } = useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = useModelCostKpiMetrics({
+    ...useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsx(
+    KpiCard,
+    {
+      label: "Model cost",
+      icon: CoinsIcon,
+      value: usd(data?.cost),
+      change: change(data?.costChangePercent),
+      lowerIsBetter: true,
+      detail: "estimated",
+      previous: previousUsd(data?.previousCost),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function TokensKpi() {
+  const { comparisonLabel } = useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = useTotalTokensKpiMetrics({
+    ...useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsx(
+    KpiCard,
+    {
+      label: "Tokens",
+      icon: HashIcon,
+      value: count(data?.value),
+      change: change(data?.changePercent),
+      detail: "input and output",
+      previous: previousCount(data?.previousValue),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+function ThreadsKpi() {
+  const { comparisonLabel } = useMetrics();
+  const { data, isLoading, isPlaceholderData, isError } = useActiveThreadsKpiMetrics({
+    ...useMetricsFilters(),
+    queryOptions: KEEP
+  });
+  return /* @__PURE__ */ jsx(
+    KpiCard,
+    {
+      label: "Threads",
+      icon: MessagesSquareIcon,
+      value: count(data?.value),
+      change: change(data?.changePercent),
+      detail: "with agent runs",
+      previous: previousCount(data?.previousValue),
+      comparison: comparisonLabel,
+      isLoading,
+      isUpdating: isPlaceholderData,
+      isError
+    }
+  );
+}
+
+export { MetricsKpis };
+//# sourceMappingURL=metrics-kpis.es.js.map

package/dist/domains/metrics/components/metrics-kpis.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpis.es.js","sources":["../../../../src/domains/metrics/components/metrics-kpis.tsx"],"sourcesContent":["import {\n  useActiveThreadsKpiMetrics,\n  useAgentRunsKpiMetrics,\n  useModelCostKpiMetrics,\n  useTotalTokensKpiMetrics,\n} from '@mastra/react/hooks/metrics';\nimport { keepPreviousData } from '@tanstack/react-query';\nimport { BotIcon, CoinsIcon, HashIcon, MessagesSquareIcon } from 'lucide-react';\nimport { useMetrics } from '../hooks/use-metrics';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { formatCount, formatUsd } from '../lib/chart-format';\nimport { KpiCard } from './kpi-card';\nimport { MetricsCardGroup } from '@/ds/components/MetricsCardGroup';\n\nconst KEEP = { placeholderData: keepPreviousData };\n\n// The API sends `null` for \"no value\": shown as a dash, or no change at all.\nconst count = (value: number | null | undefined) => (value == null ? '—' : formatCount(value));\nconst usd = (value: number | null | undefined) => (value == null ? '—' : formatUsd(value));\nconst change = (pct: number | null | undefined) => (pct == null || !Number.isFinite(pct) ? undefined : pct);\nconst previousCount = (value: number | null | undefined) => (value == null ? undefined : formatCount(value));\nconst previousUsd = (value: number | null | undefined) => (value == null ? undefined : formatUsd(value));\n\n/** Agent runs, model cost, tokens and threads for the range, each against the previous range. */\nexport function MetricsKpis() {\n  return (\n    <MetricsCardGroup>\n      <AgentRunsKpi />\n      <ModelCostKpi />\n      <TokensKpi />\n      <ThreadsKpi />\n    </MetricsCardGroup>\n  );\n}\n\nfunction AgentRunsKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useAgentRunsKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Agent runs\"\n      icon={BotIcon}\n      value={count(data?.value)}\n      change={change(data?.changePercent)}\n      detail=\"in this range\"\n      previous={previousCount(data?.previousValue)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ModelCostKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useModelCostKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Model cost\"\n      icon={CoinsIcon}\n      value={usd(data?.cost)}\n      change={change(data?.costChangePercent)}\n      lowerIsBetter\n      detail=\"estimated\"\n      previous={previousUsd(data?.previousCost)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction TokensKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useTotalTokensKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Tokens\"\n      icon={HashIcon}\n      value={count(data?.value)}\n      change={change(data?.changePercent)}\n      detail=\"input and output\"\n      previous={previousCount(data?.previousValue)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n\nfunction ThreadsKpi() {\n  const { comparisonLabel } = useMetrics();\n  const { data, isLoading, isPlaceholderData, isError } = useActiveThreadsKpiMetrics({\n    ...useMetricsFilters(),\n    queryOptions: KEEP,\n  });\n  return (\n    <KpiCard\n      label=\"Threads\"\n      icon={MessagesSquareIcon}\n      value={count(data?.value)}\n      change={change(data?.changePercent)}\n      detail=\"with agent runs\"\n      previous={previousCount(data?.previousValue)}\n      comparison={comparisonLabel}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n      isError={isError}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domains_metrics_hooks_useMetricsScores = require('../hooks/use-metrics-scores.cjs.js');
+const domains_metrics_lib_chartAxis = require('../lib/chart-axis.cjs.js');
+const domains_metrics_lib_chartColors = require('../lib/chart-colors.cjs.js');
+const domains_metrics_components_chartArea = require('./chart-area.cjs.js');
+const domains_metrics_components_chartCard = require('./chart-card.cjs.js');
+const domains_metrics_components_chartCardError = require('./chart-card-error.cjs.js');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+const metricsLineChart = require('../../../metrics-line-chart-D7fE4EQJ.cjs');
+
+const SCORER_COLORS = [
+  domains_metrics_lib_chartColors.CHART_COLORS.green,
+  domains_metrics_lib_chartColors.CHART_COLORS.sky,
+  domains_metrics_lib_chartColors.CHART_COLORS.violet,
+  domains_metrics_lib_chartColors.CHART_COLORS.teal,
+  domains_metrics_lib_chartColors.CHART_COLORS.indigo
+];
+const formatScore = (score) => score.toFixed(2);
+const axisScore = (score) => score.toFixed(1);
+function scorerSeries(scorers) {
+  return scorers.map(({ scorerId, name, average }, i) => ({
+    dataKey: scorerId,
+    label: name,
+    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? domains_metrics_lib_chartColors.CHART_COLORS.neutral,
+    aggregate: () => ({ value: formatScore(average) })
+  }));
+}
+function ScoresCard() {
+  const { data, isLoading, isError, isPlaceholderData } = domains_metrics_hooks_useMetricsScores.useMetricsScores();
+  const scorers = data?.scorers ?? [];
+  const layout = { title: "Scores", description: "Average scorer result, 0 to 1." };
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCard.ChartCard, { ...layout, children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCardError.ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_chartCard.ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsCard.MetricsCard.Summary,
+        {
+          value: String(scorers.length),
+          label: scorers.length === 1 ? "scorer" : "scorers",
+          isLoading
+        }
+      ),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartArea.ChartArea, { isEmpty: !isLoading && scorers.length === 0, emptyMessage: "No scores in this range.", children: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsLineChart.MetricsLineChart,
+        {
+          data: data?.buckets ?? [],
+          series: scorerSeries(scorers),
+          height: "fill",
+          showYAxis: false,
+          yDomain: [0, 1],
+          valueFormatter: formatScore,
+          axisFormatter: axisScore,
+          isLoading,
+          ...domains_metrics_lib_chartAxis.BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+exports.ScoresCard = ScoresCard;
+//# sourceMappingURL=scores-card.cjs.js.map

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

@@ -0,0 +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;;;;"}

package/dist/domains/metrics/components/scores-card.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/metrics/components/scores-card'
+export {}

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

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMetricsScores } from '../hooks/use-metrics-scores.es.js';
+import { BUCKET_AXIS } from '../lib/chart-axis.es.js';
+import { CHART_COLORS } from '../lib/chart-colors.es.js';
+import { ChartArea } from './chart-area.es.js';
+import { ChartCard } from './chart-card.es.js';
+import { ChartCardError } from './chart-card-error.es.js';
+import { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+import { M as MetricsLineChart } from '../../../metrics-line-chart-BBn0LeqC.js';
+
+const SCORER_COLORS = [
+  CHART_COLORS.green,
+  CHART_COLORS.sky,
+  CHART_COLORS.violet,
+  CHART_COLORS.teal,
+  CHART_COLORS.indigo
+];
+const formatScore = (score) => score.toFixed(2);
+const axisScore = (score) => score.toFixed(1);
+function scorerSeries(scorers) {
+  return scorers.map(({ scorerId, name, average }, i) => ({
+    dataKey: scorerId,
+    label: name,
+    color: SCORER_COLORS[i % SCORER_COLORS.length] ?? CHART_COLORS.neutral,
+    aggregate: () => ({ value: formatScore(average) })
+  }));
+}
+function ScoresCard() {
+  const { data, isLoading, isError, isPlaceholderData } = useMetricsScores();
+  const scorers = data?.scorers ?? [];
+  const layout = { title: "Scores", description: "Average scorer result, 0 to 1." };
+  if (isError) {
+    return /* @__PURE__ */ jsx(ChartCard, { ...layout, children: /* @__PURE__ */ jsx(ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsx(
+        MetricsCard.Summary,
+        {
+          value: String(scorers.length),
+          label: scorers.length === 1 ? "scorer" : "scorers",
+          isLoading
+        }
+      ),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsx(ChartArea, { isEmpty: !isLoading && scorers.length === 0, emptyMessage: "No scores in this range.", children: /* @__PURE__ */ jsx(
+        MetricsLineChart,
+        {
+          data: data?.buckets ?? [],
+          series: scorerSeries(scorers),
+          height: "fill",
+          showYAxis: false,
+          yDomain: [0, 1],
+          valueFormatter: formatScore,
+          axisFormatter: axisScore,
+          isLoading,
+          ...BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+export { ScoresCard };
+//# sourceMappingURL=scores-card.es.js.map

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

@@ -0,0 +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;;;;"}