@mastra/playground-ui 64.0.0-alpha.9 → 64.0.0

package/dist/{metrics-stacked-bar-chart-BijHfnOd.cjs → metrics-stacked-bar-chart-BofJ8NDc.cjs}

@@ -19,6 +19,7 @@ const GRADIENT_BASE = 0.75;
 const CAP_BODY = 0.55;
 const CAP_HEIGHT = 3;
 const DIMMED = 0.3;
+const COLUMN_LABEL_SPACE = 16;
 function segmentShape({
   fill,
   color,
@@ -77,6 +78,7 @@ function BarPlot({
   timestampKey = "tsMs",
   xLabels = "auto",
   tooltipLabelKey,
+  columnLabelKey,
   onBucketClick,
   overlay,
   id
@@ -101,13 +103,14 @@ function BarPlot({
   }, [keyList, colorList, variant, id]);
   const format = valueFormatter ?? primitives_chartFrame.compactNumber.format;
   const plotWidth = size.width - (showYAxis ? primitives_chartFrame.Y_AXIS_WIDTH : 0);
+  const margin = columnLabelKey ? { ...primitives_chartLayout.CHART_MARGIN, top: primitives_chartLayout.CHART_MARGIN.top + COLUMN_LABEL_SPACE } : primitives_chartLayout.CHART_MARGIN;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(HoverDim, { scope: id, setter: setHovered }),
     /* @__PURE__ */ jsxRuntime.jsx(primitives_chartPlot.ChartPlot, { height, plotRef: ref, onResize, clickable: !!onBucketClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
       recharts.ComposedChart,
       {
         data,
-        margin: primitives_chartLayout.CHART_MARGIN,
+        margin,
         onMouseMove: (state) => {
           const index = state?.activeTooltipIndex;
           setHovered.current(index === void 0 || index === null ? void 0 : Number(index));
@@ -157,7 +160,23 @@ function BarPlot({
               fill: s.color,
               maxBarSize: 28,
               isAnimationActive: false,
-              shape: shapes[i]
+              shape: shapes[i],
+              children: columnLabelKey && /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.LabelList,
+                {
+                  dataKey: columnLabelKey,
+                  content: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ColumnLabel,
+                    {
+                      ...props,
+                      row: data[Number(props.index)],
+                      keys: series.map(({ dataKey }) => dataKey),
+                      self: i,
+                      color: s.color
+                    }
+                  )
+                }
+              )
             },
             s.dataKey
           )),
@@ -192,6 +211,29 @@ function BarPlot({
     ) })
   ] });
 }
+function paintedTop(values, self, box) {
+  if (values.length > 1) return primitives_chartColumnLayout.stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;
+  return primitives_chartColumnLayout.singleBarBox(values[self] ?? 0, box)?.y;
+}
+function ColumnLabel({ x, y, width, height, value, row, keys, self, color }) {
+  if (value === void 0 || value === null || value === "") return null;
+  const values = keys.map((key) => Number(row?.[key]) || 0);
+  const topmost = values.findLastIndex((v) => v > 0);
+  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;
+  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      x: Number(x) + Number(width) / 2,
+      y: top - 6,
+      textAnchor: "middle",
+      fontSize: primitives_chartLayout.CHART_AXIS_FONT_SIZE,
+      fill: color,
+      className: "tabular-nums",
+      children: String(value)
+    }
+  );
+}
 
 exports.MetricsStackedBarChart = MetricsStackedBarChart;
-//# sourceMappingURL=metrics-stacked-bar-chart-BijHfnOd.cjs.map
+//# sourceMappingURL=metrics-stacked-bar-chart-BofJ8NDc.cjs.map

package/dist/metrics-stacked-bar-chart-BofJ8NDc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-stacked-bar-chart-BofJ8NDc.cjs","sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport { CHART_TICK, Y_AXIS_WIDTH, compactNumber, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index, style: { transition: 'opacity 150ms ease-out' } };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column but the hovered one. Its own tiny state, so a hover only re-renders this\n * <style> tag: with hundreds of buckets, re-rendering the bars on each move froze the pointer.\n */\nfunction HoverDim({ scope, setter }: { scope: string; setter: { current: (index: number | undefined) => void } }) {\n  const [hovered, setHovered] = useState<number>();\n  useLayoutEffect(() => {\n    setter.current = setHovered;\n  }, [setter]);\n  if (hovered === undefined) return null;\n  return (\n    <style>{`[data-chart-scope=\"${scope}\"] [data-bucket]:not([data-bucket=\"${hovered}\"]){opacity:${DIMMED}}`}</style>\n  );\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend data={isLoading ? undefined : data} series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  onBucketClick,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setHovered = useRef<(index: number | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setHovered} />\n      <ChartPlot height={height} plotRef={ref} onResize={onResize} clickable={!!onBucketClick}>\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseMove={state => {\n            const index = state?.activeTooltipIndex;\n            setHovered.current(index === undefined || index === null ? undefined : Number(index));\n          }}\n          onMouseLeave={() => setHovered.current(undefined)}\n          onClick={state => {\n            const i = state?.activeTooltipIndex;\n            const row = i === undefined || i === null ? undefined : data[Number(i)];\n            if (onBucketClick && row) onBucketClick(row, Number(i));\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              right: true,\n            })}\n          <Tooltip\n            cursor={false}\n            content={\n              <MetricsLineChartTooltip\n                formatValue={format}\n                showTotal={showTotal && !overlay}\n                labelKey={tooltipLabelKey}\n                formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n              />\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={28}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"names":["stackedSegmentBox","singleBarBox","jsx","jsxs","Rectangle","useState","useLayoutEffect","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useMemo","compactNumber","Y_AXIS_WIDTH","CHART_MARGIN","Fragment","ChartPlot","ComposedChart","CartesianGrid","CHART_GRID_PROPS","timeXAxis","valueYAxis","Tooltip","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK","CHART_AXIS_FONT_SIZE"],"mappings":"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"}

package/dist/{metrics-stacked-bar-chart-CdcENBLD.js → metrics-stacked-bar-chart-DcxHznKw.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useMemo, useState, useLayoutEffect } from 'react';
-import { ComposedChart, CartesianGrid, Tooltip, Bar, Line, ReferenceLine, Rectangle } from 'recharts';
+import { ComposedChart, CartesianGrid, Tooltip, Bar, LabelList, Line, ReferenceLine, Rectangle } from 'recharts';
 import { C as ChartSkeleton } from './chart-skeleton-C2y9C4yt.js';
 import { M as MetricsLineChartLegend, a as MetricsLineChartTooltip } from './metrics-line-chart-tooltip-CGFjb9nn.js';
 import { useChartSize, CHART_GRID_PROPS } from './primitives/chart-axes.es.js';
 import { stackedSegmentBox, singleBarBox } from './primitives/chart-column-layout.es.js';
 import { compactNumber, Y_AXIS_WIDTH, timeXAxis, valueYAxis, CHART_TICK } from './primitives/chart-frame.es.js';
-import { CHART_MARGIN } from './primitives/chart-layout.es.js';
+import { CHART_MARGIN, CHART_AXIS_FONT_SIZE } from './primitives/chart-layout.es.js';
 import { ChartPlot } from './primitives/chart-plot.es.js';
 import { useChartDefsId } from './primitives/use-chart-defs-id.es.js';
 import { c as cn } from './cn-CQUhN5Jx.js';
@@ -17,6 +17,7 @@ const GRADIENT_BASE = 0.75;
 const CAP_BODY = 0.55;
 const CAP_HEIGHT = 3;
 const DIMMED = 0.3;
+const COLUMN_LABEL_SPACE = 16;
 function segmentShape({
   fill,
   color,
@@ -75,6 +76,7 @@ function BarPlot({
   timestampKey = "tsMs",
   xLabels = "auto",
   tooltipLabelKey,
+  columnLabelKey,
   onBucketClick,
   overlay,
   id
@@ -99,13 +101,14 @@ function BarPlot({
   }, [keyList, colorList, variant, id]);
   const format = valueFormatter ?? compactNumber.format;
   const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);
+  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(HoverDim, { scope: id, setter: setHovered }),
     /* @__PURE__ */ jsx(ChartPlot, { height, plotRef: ref, onResize, clickable: !!onBucketClick, children: /* @__PURE__ */ jsxs(
       ComposedChart,
       {
         data,
-        margin: CHART_MARGIN,
+        margin,
         onMouseMove: (state) => {
           const index = state?.activeTooltipIndex;
           setHovered.current(index === void 0 || index === null ? void 0 : Number(index));
@@ -155,7 +158,23 @@ function BarPlot({
               fill: s.color,
               maxBarSize: 28,
               isAnimationActive: false,
-              shape: shapes[i]
+              shape: shapes[i],
+              children: columnLabelKey && /* @__PURE__ */ jsx(
+                LabelList,
+                {
+                  dataKey: columnLabelKey,
+                  content: (props) => /* @__PURE__ */ jsx(
+                    ColumnLabel,
+                    {
+                      ...props,
+                      row: data[Number(props.index)],
+                      keys: series.map(({ dataKey }) => dataKey),
+                      self: i,
+                      color: s.color
+                    }
+                  )
+                }
+              )
             },
             s.dataKey
           )),
@@ -190,6 +209,29 @@ function BarPlot({
     ) })
   ] });
 }
+function paintedTop(values, self, box) {
+  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;
+  return singleBarBox(values[self] ?? 0, box)?.y;
+}
+function ColumnLabel({ x, y, width, height, value, row, keys, self, color }) {
+  if (value === void 0 || value === null || value === "") return null;
+  const values = keys.map((key) => Number(row?.[key]) || 0);
+  const topmost = values.findLastIndex((v) => v > 0);
+  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;
+  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: Number(x) + Number(width) / 2,
+      y: top - 6,
+      textAnchor: "middle",
+      fontSize: CHART_AXIS_FONT_SIZE,
+      fill: color,
+      className: "tabular-nums",
+      children: String(value)
+    }
+  );
+}
 
 export { MetricsStackedBarChart as M };
-//# sourceMappingURL=metrics-stacked-bar-chart-CdcENBLD.js.map
+//# sourceMappingURL=metrics-stacked-bar-chart-DcxHznKw.js.map

package/dist/metrics-stacked-bar-chart-DcxHznKw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-stacked-bar-chart-DcxHznKw.js","sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport { CHART_TICK, Y_AXIS_WIDTH, compactNumber, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index, style: { transition: 'opacity 150ms ease-out' } };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column but the hovered one. Its own tiny state, so a hover only re-renders this\n * <style> tag: with hundreds of buckets, re-rendering the bars on each move froze the pointer.\n */\nfunction HoverDim({ scope, setter }: { scope: string; setter: { current: (index: number | undefined) => void } }) {\n  const [hovered, setHovered] = useState<number>();\n  useLayoutEffect(() => {\n    setter.current = setHovered;\n  }, [setter]);\n  if (hovered === undefined) return null;\n  return (\n    <style>{`[data-chart-scope=\"${scope}\"] [data-bucket]:not([data-bucket=\"${hovered}\"]){opacity:${DIMMED}}`}</style>\n  );\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend data={isLoading ? undefined : data} series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  onBucketClick,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setHovered = useRef<(index: number | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setHovered} />\n      <ChartPlot height={height} plotRef={ref} onResize={onResize} clickable={!!onBucketClick}>\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseMove={state => {\n            const index = state?.activeTooltipIndex;\n            setHovered.current(index === undefined || index === null ? undefined : Number(index));\n          }}\n          onMouseLeave={() => setHovered.current(undefined)}\n          onClick={state => {\n            const i = state?.activeTooltipIndex;\n            const row = i === undefined || i === null ? undefined : data[Number(i)];\n            if (onBucketClick && row) onBucketClick(row, Number(i));\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              right: true,\n            })}\n          <Tooltip\n            cursor={false}\n            content={\n              <MetricsLineChartTooltip\n                formatValue={format}\n                showTotal={showTotal && !overlay}\n                labelKey={tooltipLabelKey}\n                formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n              />\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={28}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/src/domains/traces/components/traces-list-view.d.ts

@@ -17,6 +17,10 @@ export type TracesListViewTrace = {
     /** Server-rendered preview of `input`. Present on lightweight rows, which omit `input` itself. */
     inputPreview?: string | null;
     input?: unknown;
+    /** Server-rendered preview of the root span's output. */
+    outputPreview?: string;
+    /** Server-rendered preview of the root span's error. Shown in place of the output when `status` is `'error'`. */
+    errorPreview?: string;
     metadata?: Record<string, unknown> | null;
     startedAt?: Date | string | null;
     endedAt?: Date | string | null;

package/dist/src/domains/traces/trace-list-columns.d.ts

@@ -1,5 +1,5 @@
 import { TraceUsageSummary } from '@mastra/react/hooks/traces';
-export declare const TRACE_OPTIONAL_COLUMNS: readonly ["type", "input", "duration", "endTime", "environment", "inputTokens", "outputTokens", "totalTokens", "estimatedCost"];
+export declare const TRACE_OPTIONAL_COLUMNS: readonly ["type", "input", "output", "duration", "endTime", "environment", "inputTokens", "outputTokens", "totalTokens", "estimatedCost"];
 export type TraceOptionalColumn = (typeof TRACE_OPTIONAL_COLUMNS)[number];
 export declare const TRACE_USAGE_COLUMNS: readonly ["inputTokens", "outputTokens", "totalTokens", "estimatedCost"];
 /** Trace properties that are not regular columns but can be pinned as a custom column. */

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list-cells.d.ts

@@ -11,6 +11,13 @@ export interface TracesDataListInputCellProps {
     input?: string | null;
 }
 export declare function TracesDataListInputCell({ input }: TracesDataListInputCellProps): import("react").JSX.Element;
+export interface TracesDataListOutputCellProps {
+    output?: string;
+    /** Shown instead of `output`, in the error color, when `status` is `'error'`. */
+    error?: string;
+    status?: string | null;
+}
+export declare function TracesDataListOutputCell({ output, error, status }: TracesDataListOutputCellProps): import("react").JSX.Element;
 export interface TracesDataListTypeCellProps {
     entityType?: string | null;
 }

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list.d.ts

@@ -8,7 +8,7 @@ import { DataListSpacer } from '../data-list-spacer';
 import { DataListSubHeading } from '../data-list-subheading';
 import { DataListTop } from '../data-list-top';
 import { DataListTopCellWithTooltip } from '../data-list-top-cell';
-import { TracesDataListNameCell, TracesDataListInputCell, TracesDataListTypeCell, TracesDataListStatusCell } from './traces-data-list-cells';
+import { TracesDataListNameCell, TracesDataListInputCell, TracesDataListOutputCell, TracesDataListTypeCell, TracesDataListStatusCell } from './traces-data-list-cells';
 declare function TracesDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react").JSX.Element;
 export declare const TracesDataList: typeof TracesDataListRoot & {
     Top: typeof DataListTop;
@@ -29,6 +29,7 @@ export declare const TracesDataList: typeof TracesDataListRoot & {
     CreatedCell: typeof DataListCreatedCell;
     NameCell: typeof TracesDataListNameCell;
     InputCell: typeof TracesDataListInputCell;
+    OutputCell: typeof TracesDataListOutputCell;
     TypeCell: typeof TracesDataListTypeCell;
     StatusCell: typeof TracesDataListStatusCell;
     NextPageLoading: typeof DataListNextPageLoading;

package/dist/src/ds/components/Meter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './meter';
+export * from './meter-source';

package/dist/src/ds/components/Meter/meter-context.d.ts

@@ -0,0 +1,6 @@
+export type MeterPart = 'bar' | 'key';
+export declare const MeterPartContext: import('react').Context<{
+    part: MeterPart;
+    format: (value: number) => string;
+}>;
+export declare const sourceColorClassName: string;

package/dist/src/ds/components/Meter/meter-key-row.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function MeterKeyRow({ swatch, label, amount }: {
+    swatch: string;
+    label: ReactNode;
+    amount: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Meter/meter-root.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+export type MeterProps = Omit<ComponentProps<'span'>, 'children'> & {
+    value: number;
+    max: number;
+    children?: ReactNode;
+    format?: (value: number) => string;
+} & ({
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+});
+export declare function MeterRoot({ value, max, children, format, className, ...props }: MeterProps): import("react").JSX.Element;

package/dist/src/ds/components/Meter/meter-segment.d.ts

@@ -0,0 +1,5 @@
+export declare function MeterSegment({ slot, grow, className }: {
+    slot: string;
+    grow: number;
+    className: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Meter/meter-source.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type MeterSourceProps = {
+    label: ReactNode;
+    value: number;
+};
+export declare function MeterSource({ label, value }: MeterSourceProps): import("react").JSX.Element;

package/dist/src/ds/components/Meter/meter.d.ts

@@ -0,0 +1,6 @@
+import { MeterRoot } from './meter-root';
+import { MeterSource } from './meter-source';
+export type { MeterProps } from './meter-root';
+export declare const Meter: typeof MeterRoot & {
+    Source: typeof MeterSource;
+};

package/dist/src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.d.ts

@@ -42,6 +42,7 @@ export type MetricsStackedBarChartProps = {
     xLabels?: ChartXLabels;
     /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */
     tooltipLabelKey?: string;
+    columnLabelKey?: string;
     /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */
     onBucketClick?: (row: Record<string, unknown>, index: number) => void;
     /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */

package/dist/src/ds/components/Table/Table.d.ts

@@ -25,8 +25,10 @@ export declare namespace Table {
     var SortButton: typeof TableSortButton;
     var Pagination: typeof TablePagination;
 }
-export type TableHeaderProps = ComponentProps<'thead'>;
-declare function TableHeader({ className, ...props }: TableHeaderProps): import("react").JSX.Element;
+export type TableHeaderProps = ComponentProps<'thead'> & {
+    placement?: 'above' | 'inside';
+};
+declare function TableHeader({ className, placement, ...props }: TableHeaderProps): import("react").JSX.Element;
 export interface TheadProps {
     className?: string;
     children: ReactNode;