@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"chart-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardTitleMenuProps } from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps = {\n  /**\n   * Card layout.\n   * - `default`: title and description, the summary top right, a 240px body.\n   * - `compact`: a one-line header (title, `total` on the right), and one card height, so cards\n   *   in a grid line up; the chart fills what the toolbar leaves. For small cards in a grid.\n   */\n  variant?: 'default' | 'compact';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu`.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /** Makes the title a dropdown of the card's views (e.g. by model, by provider). */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<string>, 'title' | 'className'>;\n  /** Compact cards: the card's total, right of the title in the same type. */\n  total?: string;\n  /** Compact cards: a skeleton in place of `total`. */\n  isLoading?: boolean;\n  description?: string;\n  /** The headline number, top right: a `MetricsCard.Summary`. Its slot has a fixed width, so the title wraps the same loading or loaded. */\n  summary?: ReactNode;\n  /** Top-bar buttons revealed on hover, e.g. \"View in Traces\". */\n  actions?: ReactNode;\n  /** Tabs and legend above the body; they stay in every state. */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `fixed` (default): the body is one chart high in every state. `fit`: at least that high, and\n   * taller when the content needs it, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  total,\n  isLoading = false,\n  description,\n  summary,\n  actions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        <ChartCardHeading\n          title={title}\n          href={href}\n          LinkComponent={LinkComponent}\n          description={description}\n          titleMenu={titleMenu}\n          compact={compact}\n        />\n        {actions && <MetricsCard.Actions reveal=\"hover\">{actions}</MetricsCard.Actions>}\n        {compact && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n        {!compact && summary && <div className={cn('order-last flex w-24 shrink-0 justify-end', fade)}>{summary}</div>}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {toolbar}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            compact ? 'flex-1' : bodyHeight === 'fit' ? 'min-h-60' : 'h-60',\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The title: a view menu, a lone compact title, or the default title, each with the description on default cards. */\nfunction ChartCardHeading({\n  title,\n  href,\n  LinkComponent,\n  description,\n  titleMenu,\n  compact,\n}: Pick<ChartCardProps, 'title' | 'href' | 'LinkComponent' | 'description' | 'titleMenu'> & { compact: boolean }) {\n  if (titleMenu) {\n    return (\n      <div className=\"flex flex-col\">\n        <MetricsCard.TitleMenu title={title} {...titleMenu} />\n        {!compact && description && <MetricsCard.Description>{description}</MetricsCard.Description>}\n      </div>\n    );\n  }\n  if (href) {\n    const Heading = compact ? 'h3' : 'h2';\n    return (\n      <div className=\"flex flex-col items-start\">\n        <Heading>\n          <ChartCardTitleLink href={href} LinkComponent={LinkComponent} medium={compact}>\n            {title}\n          </ChartCardTitleLink>\n        </Heading>\n        {!compact && description && <MetricsCard.Description>{description}</MetricsCard.Description>}\n      </div>\n    );\n  }\n  if (compact) {\n    return (\n      <MetricsCard.Title as=\"h3\" weight=\"medium\">\n        {title}\n      </MetricsCard.Title>\n    );\n  }\n  return <MetricsCard.TitleAndDescription title={title} description={description} />;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  medium,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  medium: boolean;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n        medium && 'font-medium',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;AAsDA,SAAgB,UAAU,EACxB,UAAU,WACV,OACA,MACA,eACA,WACA,OACA,YAAY,OACZ,aACA,SACA,SACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACiB;CACjB,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,OACE,qBAAC,aAAD;EAAa,WAAW,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,qBAAC,YAAY,QAAb,EAAA,UAAA;GACE,oBAAC,kBAAD;IACS;IACD;IACS;IACF;IACF;IACF;GACV,CAAA;GACA,WAAW,oBAAC,YAAY,SAAb;IAAqB,QAAO;IAAS,UAAA;GAA6B,CAAA;GAC7E,WAAW,UAAU,KAAA,KAAa,oBAAC,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;GAC3G,CAAC,WAAW,WAAW,oBAAC,OAAD;IAAK,WAAW,GAAG,6CAA6C,IAAI;IAAI,UAAA;GAAa,CAAA;EAC3F,EAAA,CAAA,GACpB,qBAAC,YAAY,SAAb;GAAqB,WAAW,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CACG,SACD,oBAAC,OAAD;IACE,WAAW,GACT,0CACA,UAAU,WAAW,eAAe,QAAQ,aAAa,QACzD,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,iBAAiB,EACxB,OACA,MACA,eACA,aACA,WACA,WACgH;CAChH,IAAI,WACF,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,YAAY,WAAb;GAA8B;GAAO,GAAI;EAAY,CAAA,GACpD,CAAC,WAAW,eAAe,oBAAC,YAAY,aAAb,EAAA,UAA0B,YAAqC,CAAA,CACxF;;CAGT,IAAI,MAEF,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAHY,UAAU,OAAO,MAG7B,EAAA,UACE,oBAAC,oBAAD;GAA0B;GAAqB;GAAe,QAAQ;GACnE,UAAA;EACiB,CAAA,EACb,CAAA,GACR,CAAC,WAAW,eAAe,oBAAC,YAAY,aAAb,EAAA,UAA0B,YAAqC,CAAA,CACxF;;CAGT,IAAI,SACF,OACE,oBAAC,YAAY,OAAb;EAAmB,IAAG;EAAK,QAAO;EAC/B,UAAA;CACgB,CAAA;CAGvB,OAAO,oBAAC,YAAY,qBAAb;EAAwC;EAAoB;CAAc,CAAA;AACnF;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,QACA,YAMC;CAED,OACE,qBAFa,iBAAiB,KAE9B;EACQ;EACN,WAAW,GACT,4HACA,0HACA,UAAU,aACZ;EANF,UAAA,CAQG,UACD,oBAAC,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}
+{"version":3,"file":"chart-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardTitleMenuProps, MetricsCardTotalPart } from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps<V extends string = string> = {\n  /**\n   * Card layout. `default` and `compact` share one header: the title, and `total` on the right.\n   * - `default`: a 240px body.\n   * - `compact`: one card height, so cards in a grid line up; the chart fills what the toolbar\n   *   leaves. For small cards in a grid.\n   * - `hero`: one large chart that is the page's subject (an explorer): the title as a label over\n   *   a large `total`, with `change` beside it, and `actions` always shown. The body is as tall\n   *   as its content.\n   */\n  variant?: 'default' | 'compact' | 'hero';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu` and on `hero` cards.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /**\n   * Makes the title a dropdown of the card's views (e.g. \"Agent latency\", \"Tool latency\"), in\n   * place of tabs. `title` is the picked view's label. Ignored on `hero` cards.\n   */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<V>, 'title' | 'className'>;\n  /**\n   * The card's headline number: right of the title, or the large value on `hero` cards. A card\n   * charting a few different things can pass one total each, marked with its series' color.\n   */\n  total?: string | readonly MetricsCardTotalPart[];\n  /** `hero` cards: the change against the previous period, e.g. \"+71.4%\". */\n  change?: string;\n  /** A skeleton in place of `total`. */\n  isLoading?: boolean;\n  /** Top-bar buttons, e.g. \"View in traces\": revealed on hover, except on `hero` cards. */\n  actions?: ReactNode;\n  /**\n   * Legend and controls above the body; they stay in every state. Pass `false` or `null` while\n   * there's nothing to show yet, and the row keeps its height.\n   */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `default` cards. `fixed` (default): a chart, at least 240px high in every state and filling\n   * the card when the card is taller (a grid row). `fit`: at least that high, and as tall as the\n   * content needs, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard<V extends string = string>({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  total,\n  change,\n  isLoading = false,\n  actions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps<V>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  const hero = variant === 'hero';\n  const chart = !hero && bodyHeight === 'fixed';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        {hero ? (\n          <MetricsCard.Headline\n            label={title}\n            value={typeof total === 'string' ? total : '—'}\n            change={change}\n            isLoading={isLoading}\n            className={fade}\n          />\n        ) : (\n          <ChartCardHeading title={title} href={href} LinkComponent={LinkComponent} titleMenu={titleMenu} />\n        )}\n        {actions && (\n          <MetricsCard.Actions reveal={hero ? 'always' : 'hover'} className={cn(hero && 'my-0 self-center')}>\n            {actions}\n          </MetricsCard.Actions>\n        )}\n        {!hero && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {/* A card with a toolbar keeps its row while the toolbar is empty (`false` or `null` while\n            loading, empty or on error), so its plot starts where its neighbours' do. A card that\n            passes no toolbar (a legend drawn by the chart itself) gets no row. */}\n        {toolbar || (chart && toolbar !== undefined && <div aria-hidden className=\"min-h-6\" />)}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            // A chart fills the card, so a card stretched to its row's height draws a taller chart, not a gap.\n            bodyClass(variant, bodyHeight),\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */\nfunction bodyClass(variant: ChartCardProps['variant'], bodyHeight: ChartCardProps['bodyHeight']) {\n  if (variant === 'compact') return 'flex-1';\n  if (variant === 'hero') return undefined;\n  if (bodyHeight === 'fit') return 'min-h-60';\n  return 'min-h-60 flex-1';\n}\n\n/** The title: a view menu, a link to a fuller view, or plain. */\nfunction ChartCardHeading<V extends string>({\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu'>) {\n  if (titleMenu) return <MetricsCard.TitleMenu title={title} {...titleMenu} />;\n  if (href) {\n    return (\n      <h3 className=\"flex\">\n        <ChartCardTitleLink href={href} LinkComponent={LinkComponent}>\n          {title}\n        </ChartCardTitleLink>\n      </h3>\n    );\n  }\n  return <MetricsCard.Title>{title}</MetricsCard.Title>;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;AAkEA,SAAgB,UAAqC,EACnD,UAAU,WACV,OACA,MACA,eACA,WACA,OACA,QACA,YAAY,OACZ,SACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACoB;CACpB,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,YAAY;CACzB,MAAM,QAAQ,CAAC,QAAQ,eAAe;CACtC,OACE,qBAAC,aAAD;EAAa,WAAW,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,qBAAC,YAAY,QAAb,EAAA,UAAA;GACG,OACC,oBAAC,YAAY,UAAb;IACE,OAAO;IACP,OAAO,OAAO,UAAU,WAAW,QAAQ;IACnC;IACG;IACX,WAAW;GACZ,CAAA,IAED,oBAAC,kBAAD;IAAyB;IAAa;IAAqB;IAA0B;GAAY,CAAA;GAElG,WACC,oBAAC,YAAY,SAAb;IAAqB,QAAQ,OAAO,WAAW;IAAS,WAAW,GAAG,QAAQ,kBAAkB;IAC7F,UAAA;GACkB,CAAA;GAEtB,CAAC,QAAQ,UAAU,KAAA,KAAa,oBAAC,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;EACxF,EAAA,CAAA,GACpB,qBAAC,YAAY,SAAb;GAAqB,WAAW,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CAIG,WAAY,SAAS,YAAY,KAAA,KAAa,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;GAAW,CAAA,GACrF,oBAAC,OAAD;IACE,WAAW,GACT,0CAEA,UAAU,SAAS,UAAU,GAC7B,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,UAAU,SAAoC,YAA0C;CAC/F,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,QAAQ,OAAO,KAAA;CAC/B,IAAI,eAAe,OAAO,OAAO;CACjC,OAAO;AACT;;AAGA,SAAS,iBAAmC,EAC1C,OACA,MACA,eACA,aAC4E;CAC5E,IAAI,WAAW,OAAO,oBAAC,YAAY,WAAb;EAA8B;EAAO,GAAI;CAAY,CAAA;CAC3E,IAAI,MACF,OACE,oBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,oBAAC,oBAAD;GAA0B;GAAqB;GAC5C,UAAA;EACiB,CAAA;CAClB,CAAA;CAGR,OAAO,oBAAC,YAAY,OAAb,EAAA,UAAoB,MAAyB,CAAA;AACtD;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,YAKC;CAED,OACE,qBAFa,iBAAiB,KAE9B;EACQ;EACN,WAAW,GACT,wIACA,wHACF;EALF,UAAA,CAOG,UACD,oBAAC,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}

package/dist/domains/metrics/components/date-range-selector.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_hooks_use_metrics = require("../hooks/use-metrics.cjs.js");
-const require_DateTimeRangePicker = require("../../../DateTimeRangePicker-DGbH5WOn.cjs");
+const require_DateTimeRangePicker = require("../../../DateTimeRangePicker-HmPOHwAQ.cjs");
 const require_domains_metrics_metrics_date_presets = require("../metrics-date-presets.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/metrics/components/date-range-selector.es.js

@@ -1,5 +1,5 @@
 import { useMetrics } from "../hooks/use-metrics.es.js";
-import { t as DateTimeRangePicker } from "../../../DateTimeRangePicker-ByMbLdom.js";
+import { t as DateTimeRangePicker } from "../../../DateTimeRangePicker-C_Lie_2P.js";
 import { METRICS_PICKER_PRESETS, fromPickerPreset, toPickerPreset } from "../metrics-date-presets.es.js";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/domains/metrics/components/distinct-ids/distinct-ids-chart.cjs.js

@@ -1,15 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../../lib/metrics-buckets.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../../lib/chart-colors.cjs.js");
 const require_domains_metrics_lib_chart_format = require("../../lib/chart-format.cjs.js");
-const require_MetricsCard = require("../../../../MetricsCard-Dly_H3oX.cjs");
+const require_domains_metrics_lib_metrics_buckets = require("../../lib/metrics-buckets.cjs.js");
+const require_domains_metrics_lib_trace_aggregate = require("../../lib/trace-aggregate.cjs.js");
+const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../../hooks/use-metrics-trace-aggregate.cjs.js");
+const require_MetricsCard = require("../../../../MetricsCard-CEB-f2sv.cjs");
 const require_domains_metrics_components_chart_area = require("../chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("../chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("../chart-card-error.cjs.js");
-const require_MetricsLineChart = require("../../../../MetricsLineChart-2m4LVL1N.cjs");
-const require_domains_metrics_lib_trace_aggregate = require("../../lib/trace-aggregate.cjs.js");
-const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../../hooks/use-metrics-trace-aggregate.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("../../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../../lib/chart-colors.cjs.js");
+const require_MetricsLineChart = require("../../../../MetricsLineChart-CjBm4IXu.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx
 /** Most apps set resource and thread ids (through memory); few set user and session ids. */
@@ -41,7 +41,6 @@ var IDS = [
 ];
 var MEASURES = IDS.map((id) => id.measure);
 var DISTINCT_IDS_TITLE = "Resources and threads";
-var DISTINCT_IDS_DESCRIPTION = "Unique ids on traces; users and sessions only when set.";
 function count(row, id) {
 	return row?.measures[id.measure] ?? 0;
 }
@@ -65,8 +64,7 @@ function DistinctIdsChart({ scope, onTimeRangeClick }) {
 		dataKey: id.dataKey,
 		label: id.label,
 		color: id.color,
-		emphasis: i === 0,
-		aggregate: () => ({ value: require_domains_metrics_lib_chart_format.formatCount(count(total, id)) })
+		emphasis: i === 0
 	}));
 	const chart = require_domains_metrics_lib_trace_aggregate.bucketTraceAggregateRows(series.data?.rows ?? [], scope.window).map(({ rows, ...labels }) => ({
 		...labels,
@@ -77,11 +75,13 @@ function DistinctIdsChart({ scope, onTimeRangeClick }) {
 	const isLoading = series.isLoading || totals.isLoading;
 	const layout = {
 		title: DISTINCT_IDS_TITLE,
-		description: DISTINCT_IDS_DESCRIPTION,
-		toolbar: lines.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, {
-			data: chart,
-			series: lines
-		}) })
+		total: shown.map((id) => ({
+			label: id.label,
+			value: require_domains_metrics_lib_chart_format.formatCount(count(total, id)),
+			color: id.color
+		})),
+		isLoading: totals.isLoading,
+		toolbar: lines.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, { series: lines }) })
 	};
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
@@ -114,7 +114,6 @@ function DistinctIdsChart({ scope, onTimeRangeClick }) {
 		})
 	});
 }
-exports.DISTINCT_IDS_DESCRIPTION = DISTINCT_IDS_DESCRIPTION;
 exports.DISTINCT_IDS_TITLE = DISTINCT_IDS_TITLE;
 exports.DistinctIdsChart = DistinctIdsChart;
 

package/dist/domains/metrics/components/distinct-ids/distinct-ids-chart.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"distinct-ids-chart.cjs.js","names":["CHART_COLORS","useMetricsTraceAggregate","formatCount","bucketTraceAggregateRows","intervalHours","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","ChartArea","MetricsLineChart","formatAxisCount","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../../src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx"],"sourcesContent":["import type { AggregateTracesArgs } from '@mastra/client-js';\nimport type { DrilldownScope } from '../../drilldown';\nimport { useMetricsTraceAggregate } from '../../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../../hooks/use-metrics-trace-aggregate';\nimport { EDGE_BUCKET_AXIS } from '../../lib/chart-axis';\nimport { CHART_COLORS } from '../../lib/chart-colors';\nimport { formatAxisCount, formatCount } from '../../lib/chart-format';\nimport { bucketWindow, intervalHours } from '../../lib/metrics-buckets';\nimport { bucketTraceAggregateRows, TRACE_AGGREGATE_SERIES_LIMIT } from '../../lib/trace-aggregate';\nimport type { TraceAggregateRow } from '../../lib/trace-aggregate';\nimport { ChartArea } from '../chart-area';\nimport { ChartCard } from '../chart-card';\nimport { ChartCardError } from '../chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\n\n/** Most apps set resource and thread ids (through memory); few set user and session ids. */\nconst IDS = [\n  { measure: 'countDistinct.resourceId', dataKey: 'resources', label: 'Resources', color: CHART_COLORS.sky },\n  { measure: 'countDistinct.threadId', dataKey: 'threads', label: 'Threads', color: CHART_COLORS.green },\n  { measure: 'countDistinct.userId', dataKey: 'users', label: 'Users', color: CHART_COLORS.violet },\n  { measure: 'countDistinct.sessionId', dataKey: 'sessions', label: 'Sessions', color: CHART_COLORS.teal },\n] as const;\n\ntype Id = (typeof IDS)[number];\n\nconst MEASURES: AggregateTracesArgs['measures'] = IDS.map(id => id.measure);\n\nexport const DISTINCT_IDS_TITLE = 'Resources and threads';\nexport const DISTINCT_IDS_DESCRIPTION = 'Unique ids on traces; users and sessions only when set.';\n\nexport type DistinctIdsChartProps = {\n  scope: TraceAggregateScope;\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\nfunction count(row: TraceAggregateRow | undefined, id: Id) {\n  return row?.measures[id.measure] ?? 0;\n}\n\n/** Distinct ids per bucket, with range totals from a second request. */\nexport function DistinctIdsChart({ scope, onTimeRangeClick }: DistinctIdsChartProps) {\n  const series = useMetricsTraceAggregate({\n    timeRange: scope.timeRange,\n    where: scope.where,\n    interval: scope.interval,\n    measures: MEASURES,\n    limit: TRACE_AGGREGATE_SERIES_LIMIT,\n  });\n  // Bucket counts can't be added up: an id active in two buckets would count twice.\n  const totals = useMetricsTraceAggregate({ timeRange: scope.timeRange, where: scope.where, measures: MEASURES });\n\n  const total = totals.data?.rows[0];\n  // Only the ids this project sets get a line; the rest would sit flat at zero.\n  const shown = IDS.filter(id => count(total, id) > 0);\n  // The legend carries each id's range total, as the Scores legend carries each scorer's mean.\n  const lines: MetricsLineChartSeries[] = shown.map((id, i) => ({\n    dataKey: id.dataKey,\n    label: id.label,\n    color: id.color,\n    emphasis: i === 0,\n    aggregate: () => ({ value: formatCount(count(total, id)) }),\n  }));\n  const chart = bucketTraceAggregateRows(series.data?.rows ?? [], scope.window).map(({ rows, ...labels }) => ({\n    ...labels,\n    ...Object.fromEntries(shown.map(id => [id.dataKey, count(rows[0], id)])),\n  }));\n  const step = intervalHours(scope.interval === '1d' ? '1d' : '1h');\n  const error = series.error ?? totals.error;\n  const isLoading = series.isLoading || totals.isLoading;\n\n  const layout = {\n    title: DISTINCT_IDS_TITLE,\n    description: DISTINCT_IDS_DESCRIPTION,\n    toolbar: lines.length > 0 && (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend data={chart} series={lines} />\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (error) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError\n          error={error}\n          onRetry={() => {\n            if (series.error) void series.refetch();\n            if (totals.error) void totals.refetch();\n          }}\n        />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard {...layout} isUpdating={series.isPlaceholderData || totals.isPlaceholderData}>\n      <ChartArea\n        isEmpty={!isLoading && shown.length === 0}\n        emptyMessage=\"No traces in this range set a resource, thread, user or session id.\"\n      >\n        <MetricsLineChart\n          data={chart}\n          series={lines}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatCount}\n          axisFormatter={formatAxisCount}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick({ window: bucketWindow(Number(row.ts), step) }))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"distinct-ids-chart.cjs.js","names":["CHART_COLORS","useMetricsTraceAggregate","bucketTraceAggregateRows","intervalHours","formatCount","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","ChartArea","MetricsLineChart","formatAxisCount","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../../src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx"],"sourcesContent":["import type { AggregateTracesArgs } from '@mastra/client-js';\nimport type { DrilldownScope } from '../../drilldown';\nimport { useMetricsTraceAggregate } from '../../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../../hooks/use-metrics-trace-aggregate';\nimport { EDGE_BUCKET_AXIS } from '../../lib/chart-axis';\nimport { CHART_COLORS } from '../../lib/chart-colors';\nimport { formatAxisCount, formatCount } from '../../lib/chart-format';\nimport { bucketWindow, intervalHours } from '../../lib/metrics-buckets';\nimport { bucketTraceAggregateRows, TRACE_AGGREGATE_SERIES_LIMIT } from '../../lib/trace-aggregate';\nimport type { TraceAggregateRow } from '../../lib/trace-aggregate';\nimport { ChartArea } from '../chart-area';\nimport { ChartCard } from '../chart-card';\nimport { ChartCardError } from '../chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\n\n/** Most apps set resource and thread ids (through memory); few set user and session ids. */\nconst IDS = [\n  { measure: 'countDistinct.resourceId', dataKey: 'resources', label: 'Resources', color: CHART_COLORS.sky },\n  { measure: 'countDistinct.threadId', dataKey: 'threads', label: 'Threads', color: CHART_COLORS.green },\n  { measure: 'countDistinct.userId', dataKey: 'users', label: 'Users', color: CHART_COLORS.violet },\n  { measure: 'countDistinct.sessionId', dataKey: 'sessions', label: 'Sessions', color: CHART_COLORS.teal },\n] as const;\n\ntype Id = (typeof IDS)[number];\n\nconst MEASURES: AggregateTracesArgs['measures'] = IDS.map(id => id.measure);\n\nexport const DISTINCT_IDS_TITLE = 'Resources and threads';\n\nexport type DistinctIdsChartProps = {\n  scope: TraceAggregateScope;\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\nfunction count(row: TraceAggregateRow | undefined, id: Id) {\n  return row?.measures[id.measure] ?? 0;\n}\n\n/** Distinct ids per bucket, with range totals from a second request. */\nexport function DistinctIdsChart({ scope, onTimeRangeClick }: DistinctIdsChartProps) {\n  const series = useMetricsTraceAggregate({\n    timeRange: scope.timeRange,\n    where: scope.where,\n    interval: scope.interval,\n    measures: MEASURES,\n    limit: TRACE_AGGREGATE_SERIES_LIMIT,\n  });\n  // Bucket counts can't be added up: an id active in two buckets would count twice.\n  const totals = useMetricsTraceAggregate({ timeRange: scope.timeRange, where: scope.where, measures: MEASURES });\n\n  const total = totals.data?.rows[0];\n  // Only the ids this project sets get a line; the rest would sit flat at zero.\n  const shown = IDS.filter(id => count(total, id) > 0);\n  const lines: MetricsLineChartSeries[] = shown.map((id, i) => ({\n    dataKey: id.dataKey,\n    label: id.label,\n    color: id.color,\n    emphasis: i === 0,\n  }));\n  const chart = bucketTraceAggregateRows(series.data?.rows ?? [], scope.window).map(({ rows, ...labels }) => ({\n    ...labels,\n    ...Object.fromEntries(shown.map(id => [id.dataKey, count(rows[0], id)])),\n  }));\n  const step = intervalHours(scope.interval === '1d' ? '1d' : '1h');\n  const error = series.error ?? totals.error;\n  const isLoading = series.isLoading || totals.isLoading;\n\n  const layout = {\n    title: DISTINCT_IDS_TITLE,\n    // Each id's range total, marked like its line: they count different things, so no one sum.\n    total: shown.map(id => ({ label: id.label, value: formatCount(count(total, id)), color: id.color })),\n    isLoading: totals.isLoading,\n    toolbar: lines.length > 0 && (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={lines} />\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (error) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError\n          error={error}\n          onRetry={() => {\n            if (series.error) void series.refetch();\n            if (totals.error) void totals.refetch();\n          }}\n        />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard {...layout} isUpdating={series.isPlaceholderData || totals.isPlaceholderData}>\n      <ChartArea\n        isEmpty={!isLoading && shown.length === 0}\n        emptyMessage=\"No traces in this range set a resource, thread, user or session id.\"\n      >\n        <MetricsLineChart\n          data={chart}\n          series={lines}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatCount}\n          axisFormatter={formatAxisCount}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick({ window: bucketWindow(Number(row.ts), step) }))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/metrics/components/distinct-ids/distinct-ids-chart.es.js

@@ -1,14 +1,14 @@
-import { bucketWindow, intervalHours } from "../../lib/metrics-buckets.es.js";
-import { EDGE_BUCKET_AXIS } from "../../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../../lib/chart-colors.es.js";
 import { formatAxisCount, formatCount } from "../../lib/chart-format.es.js";
-import { t as MetricsCard } from "../../../../MetricsCard-C9GWgT58.js";
+import { bucketWindow, intervalHours } from "../../lib/metrics-buckets.es.js";
+import { bucketTraceAggregateRows } from "../../lib/trace-aggregate.es.js";
+import { useMetricsTraceAggregate } from "../../hooks/use-metrics-trace-aggregate.es.js";
+import { t as MetricsCard } from "../../../../MetricsCard-M8awJ2B_.js";
 import { ChartArea } from "../chart-area.es.js";
 import { ChartCard } from "../chart-card.es.js";
 import { ChartCardError } from "../chart-card-error.es.js";
-import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../../MetricsLineChart-DKzuRU2q.js";
-import { bucketTraceAggregateRows } from "../../lib/trace-aggregate.es.js";
-import { useMetricsTraceAggregate } from "../../hooks/use-metrics-trace-aggregate.es.js";
+import { EDGE_BUCKET_AXIS } from "../../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../../lib/chart-colors.es.js";
+import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../../MetricsLineChart-BhHoduO0.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx
 /** Most apps set resource and thread ids (through memory); few set user and session ids. */
@@ -40,7 +40,6 @@ var IDS = [
 ];
 var MEASURES = IDS.map((id) => id.measure);
 var DISTINCT_IDS_TITLE = "Resources and threads";
-var DISTINCT_IDS_DESCRIPTION = "Unique ids on traces; users and sessions only when set.";
 function count(row, id) {
 	return row?.measures[id.measure] ?? 0;
 }
@@ -64,8 +63,7 @@ function DistinctIdsChart({ scope, onTimeRangeClick }) {
 		dataKey: id.dataKey,
 		label: id.label,
 		color: id.color,
-		emphasis: i === 0,
-		aggregate: () => ({ value: formatCount(count(total, id)) })
+		emphasis: i === 0
 	}));
 	const chart = bucketTraceAggregateRows(series.data?.rows ?? [], scope.window).map(({ rows, ...labels }) => ({
 		...labels,
@@ -76,11 +74,13 @@ function DistinctIdsChart({ scope, onTimeRangeClick }) {
 	const isLoading = series.isLoading || totals.isLoading;
 	const layout = {
 		title: DISTINCT_IDS_TITLE,
-		description: DISTINCT_IDS_DESCRIPTION,
-		toolbar: lines.length > 0 && /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__PURE__ */ jsx(MetricsLineChartLegend, {
-			data: chart,
-			series: lines
-		}) })
+		total: shown.map((id) => ({
+			label: id.label,
+			value: formatCount(count(total, id)),
+			color: id.color
+		})),
+		isLoading: totals.isLoading,
+		toolbar: lines.length > 0 && /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__PURE__ */ jsx(MetricsLineChartLegend, { series: lines }) })
 	};
 	if (error) return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
@@ -113,6 +113,6 @@ function DistinctIdsChart({ scope, onTimeRangeClick }) {
 		})
 	});
 }
-export { DISTINCT_IDS_DESCRIPTION, DISTINCT_IDS_TITLE, DistinctIdsChart };
+export { DISTINCT_IDS_TITLE, DistinctIdsChart };
 
 //# sourceMappingURL=distinct-ids-chart.es.js.map

package/dist/domains/metrics/components/distinct-ids/distinct-ids-chart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"distinct-ids-chart.es.js","names":[],"sources":["../../../../../src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx"],"sourcesContent":["import type { AggregateTracesArgs } from '@mastra/client-js';\nimport type { DrilldownScope } from '../../drilldown';\nimport { useMetricsTraceAggregate } from '../../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../../hooks/use-metrics-trace-aggregate';\nimport { EDGE_BUCKET_AXIS } from '../../lib/chart-axis';\nimport { CHART_COLORS } from '../../lib/chart-colors';\nimport { formatAxisCount, formatCount } from '../../lib/chart-format';\nimport { bucketWindow, intervalHours } from '../../lib/metrics-buckets';\nimport { bucketTraceAggregateRows, TRACE_AGGREGATE_SERIES_LIMIT } from '../../lib/trace-aggregate';\nimport type { TraceAggregateRow } from '../../lib/trace-aggregate';\nimport { ChartArea } from '../chart-area';\nimport { ChartCard } from '../chart-card';\nimport { ChartCardError } from '../chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\n\n/** Most apps set resource and thread ids (through memory); few set user and session ids. */\nconst IDS = [\n  { measure: 'countDistinct.resourceId', dataKey: 'resources', label: 'Resources', color: CHART_COLORS.sky },\n  { measure: 'countDistinct.threadId', dataKey: 'threads', label: 'Threads', color: CHART_COLORS.green },\n  { measure: 'countDistinct.userId', dataKey: 'users', label: 'Users', color: CHART_COLORS.violet },\n  { measure: 'countDistinct.sessionId', dataKey: 'sessions', label: 'Sessions', color: CHART_COLORS.teal },\n] as const;\n\ntype Id = (typeof IDS)[number];\n\nconst MEASURES: AggregateTracesArgs['measures'] = IDS.map(id => id.measure);\n\nexport const DISTINCT_IDS_TITLE = 'Resources and threads';\nexport const DISTINCT_IDS_DESCRIPTION = 'Unique ids on traces; users and sessions only when set.';\n\nexport type DistinctIdsChartProps = {\n  scope: TraceAggregateScope;\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\nfunction count(row: TraceAggregateRow | undefined, id: Id) {\n  return row?.measures[id.measure] ?? 0;\n}\n\n/** Distinct ids per bucket, with range totals from a second request. */\nexport function DistinctIdsChart({ scope, onTimeRangeClick }: DistinctIdsChartProps) {\n  const series = useMetricsTraceAggregate({\n    timeRange: scope.timeRange,\n    where: scope.where,\n    interval: scope.interval,\n    measures: MEASURES,\n    limit: TRACE_AGGREGATE_SERIES_LIMIT,\n  });\n  // Bucket counts can't be added up: an id active in two buckets would count twice.\n  const totals = useMetricsTraceAggregate({ timeRange: scope.timeRange, where: scope.where, measures: MEASURES });\n\n  const total = totals.data?.rows[0];\n  // Only the ids this project sets get a line; the rest would sit flat at zero.\n  const shown = IDS.filter(id => count(total, id) > 0);\n  // The legend carries each id's range total, as the Scores legend carries each scorer's mean.\n  const lines: MetricsLineChartSeries[] = shown.map((id, i) => ({\n    dataKey: id.dataKey,\n    label: id.label,\n    color: id.color,\n    emphasis: i === 0,\n    aggregate: () => ({ value: formatCount(count(total, id)) }),\n  }));\n  const chart = bucketTraceAggregateRows(series.data?.rows ?? [], scope.window).map(({ rows, ...labels }) => ({\n    ...labels,\n    ...Object.fromEntries(shown.map(id => [id.dataKey, count(rows[0], id)])),\n  }));\n  const step = intervalHours(scope.interval === '1d' ? '1d' : '1h');\n  const error = series.error ?? totals.error;\n  const isLoading = series.isLoading || totals.isLoading;\n\n  const layout = {\n    title: DISTINCT_IDS_TITLE,\n    description: DISTINCT_IDS_DESCRIPTION,\n    toolbar: lines.length > 0 && (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend data={chart} series={lines} />\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (error) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError\n          error={error}\n          onRetry={() => {\n            if (series.error) void series.refetch();\n            if (totals.error) void totals.refetch();\n          }}\n        />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard {...layout} isUpdating={series.isPlaceholderData || totals.isPlaceholderData}>\n      <ChartArea\n        isEmpty={!isLoading && shown.length === 0}\n        emptyMessage=\"No traces in this range set a resource, thread, user or session id.\"\n      >\n        <MetricsLineChart\n          data={chart}\n          series={lines}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatCount}\n          axisFormatter={formatAxisCount}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick({ window: bucketWindow(Number(row.ts), step) }))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAM,MAAM;CACV;EAAE,SAAS;EAA4B,SAAS;EAAa,OAAO;EAAa,OAAO,aAAa;CAAI;CACzG;EAAE,SAAS;EAA0B,SAAS;EAAW,OAAO;EAAW,OAAO,aAAa;CAAM;CACrG;EAAE,SAAS;EAAwB,SAAS;EAAS,OAAO;EAAS,OAAO,aAAa;CAAO;CAChG;EAAE,SAAS;EAA2B,SAAS;EAAY,OAAO;EAAY,OAAO,aAAa;CAAK;AACzG;AAIA,IAAM,WAA4C,IAAI,KAAI,OAAM,GAAG,OAAO;AAE1E,IAAa,qBAAqB;AAClC,IAAa,2BAA2B;AAQxC,SAAS,MAAM,KAAoC,IAAQ;CACzD,OAAO,KAAK,SAAS,GAAG,YAAY;AACtC;;AAGA,SAAgB,iBAAiB,EAAE,OAAO,oBAA2C;CACnF,MAAM,SAAS,yBAAyB;EACtC,WAAW,MAAM;EACjB,OAAO,MAAM;EACb,UAAU,MAAM;EAChB,UAAU;EACV,OAAA;CACF,CAAC;CAED,MAAM,SAAS,yBAAyB;EAAE,WAAW,MAAM;EAAW,OAAO,MAAM;EAAO,UAAU;CAAS,CAAC;CAE9G,MAAM,QAAQ,OAAO,MAAM,KAAK;CAEhC,MAAM,QAAQ,IAAI,QAAO,OAAM,MAAM,OAAO,EAAE,IAAI,CAAC;CAEnD,MAAM,QAAkC,MAAM,KAAK,IAAI,OAAO;EAC5D,SAAS,GAAG;EACZ,OAAO,GAAG;EACV,OAAO,GAAG;EACV,UAAU,MAAM;EAChB,kBAAkB,EAAE,OAAO,YAAY,MAAM,OAAO,EAAE,CAAC,EAAE;CAC3D,EAAE;CACF,MAAM,QAAQ,yBAAyB,OAAO,MAAM,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;EAC1G,GAAG;EACH,GAAG,OAAO,YAAY,MAAM,KAAI,OAAM,CAAC,GAAG,SAAS,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;CACzE,EAAE;CACF,MAAM,OAAO,cAAc,MAAM,aAAa,OAAO,OAAO,IAAI;CAChE,MAAM,QAAQ,OAAO,SAAS,OAAO;CACrC,MAAM,YAAY,OAAO,aAAa,OAAO;CAE7C,MAAM,SAAS;EACb,OAAO;EACP,aAAa;EACb,SAAS,MAAM,SAAS,KACtB,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,wBAAD;GAAwB,MAAM;GAAO,QAAQ;EAAQ,CAAA,EAClC,CAAA;CAEzB;CAEA,IAAI,OACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD;GACS;GACP,eAAe;IACb,IAAI,OAAO,OAAO,OAAY,QAAQ;IACtC,IAAI,OAAO,OAAO,OAAY,QAAQ;GACxC;EACD,CAAA;CACQ,CAAA;CAIf,OACE,oBAAC,WAAD;EAAW,GAAI;EAAQ,YAAY,OAAO,qBAAqB,OAAO;EACpE,UAAA,oBAAC,WAAD;GACE,SAAS,CAAC,aAAa,MAAM,WAAW;GACxC,cAAa;GAEb,UAAA,oBAAC,kBAAD;IACE,MAAM;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,eAAe,sBAAqB,QAAO,iBAAiB,EAAE,QAAQ,aAAa,OAAO,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC;IAC/F;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"distinct-ids-chart.es.js","names":[],"sources":["../../../../../src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx"],"sourcesContent":["import type { AggregateTracesArgs } from '@mastra/client-js';\nimport type { DrilldownScope } from '../../drilldown';\nimport { useMetricsTraceAggregate } from '../../hooks/use-metrics-trace-aggregate';\nimport type { TraceAggregateScope } from '../../hooks/use-metrics-trace-aggregate';\nimport { EDGE_BUCKET_AXIS } from '../../lib/chart-axis';\nimport { CHART_COLORS } from '../../lib/chart-colors';\nimport { formatAxisCount, formatCount } from '../../lib/chart-format';\nimport { bucketWindow, intervalHours } from '../../lib/metrics-buckets';\nimport { bucketTraceAggregateRows, TRACE_AGGREGATE_SERIES_LIMIT } from '../../lib/trace-aggregate';\nimport type { TraceAggregateRow } from '../../lib/trace-aggregate';\nimport { ChartArea } from '../chart-area';\nimport { ChartCard } from '../chart-card';\nimport { ChartCardError } from '../chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\n\n/** Most apps set resource and thread ids (through memory); few set user and session ids. */\nconst IDS = [\n  { measure: 'countDistinct.resourceId', dataKey: 'resources', label: 'Resources', color: CHART_COLORS.sky },\n  { measure: 'countDistinct.threadId', dataKey: 'threads', label: 'Threads', color: CHART_COLORS.green },\n  { measure: 'countDistinct.userId', dataKey: 'users', label: 'Users', color: CHART_COLORS.violet },\n  { measure: 'countDistinct.sessionId', dataKey: 'sessions', label: 'Sessions', color: CHART_COLORS.teal },\n] as const;\n\ntype Id = (typeof IDS)[number];\n\nconst MEASURES: AggregateTracesArgs['measures'] = IDS.map(id => id.measure);\n\nexport const DISTINCT_IDS_TITLE = 'Resources and threads';\n\nexport type DistinctIdsChartProps = {\n  scope: TraceAggregateScope;\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\nfunction count(row: TraceAggregateRow | undefined, id: Id) {\n  return row?.measures[id.measure] ?? 0;\n}\n\n/** Distinct ids per bucket, with range totals from a second request. */\nexport function DistinctIdsChart({ scope, onTimeRangeClick }: DistinctIdsChartProps) {\n  const series = useMetricsTraceAggregate({\n    timeRange: scope.timeRange,\n    where: scope.where,\n    interval: scope.interval,\n    measures: MEASURES,\n    limit: TRACE_AGGREGATE_SERIES_LIMIT,\n  });\n  // Bucket counts can't be added up: an id active in two buckets would count twice.\n  const totals = useMetricsTraceAggregate({ timeRange: scope.timeRange, where: scope.where, measures: MEASURES });\n\n  const total = totals.data?.rows[0];\n  // Only the ids this project sets get a line; the rest would sit flat at zero.\n  const shown = IDS.filter(id => count(total, id) > 0);\n  const lines: MetricsLineChartSeries[] = shown.map((id, i) => ({\n    dataKey: id.dataKey,\n    label: id.label,\n    color: id.color,\n    emphasis: i === 0,\n  }));\n  const chart = bucketTraceAggregateRows(series.data?.rows ?? [], scope.window).map(({ rows, ...labels }) => ({\n    ...labels,\n    ...Object.fromEntries(shown.map(id => [id.dataKey, count(rows[0], id)])),\n  }));\n  const step = intervalHours(scope.interval === '1d' ? '1d' : '1h');\n  const error = series.error ?? totals.error;\n  const isLoading = series.isLoading || totals.isLoading;\n\n  const layout = {\n    title: DISTINCT_IDS_TITLE,\n    // Each id's range total, marked like its line: they count different things, so no one sum.\n    total: shown.map(id => ({ label: id.label, value: formatCount(count(total, id)), color: id.color })),\n    isLoading: totals.isLoading,\n    toolbar: lines.length > 0 && (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={lines} />\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (error) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError\n          error={error}\n          onRetry={() => {\n            if (series.error) void series.refetch();\n            if (totals.error) void totals.refetch();\n          }}\n        />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard {...layout} isUpdating={series.isPlaceholderData || totals.isPlaceholderData}>\n      <ChartArea\n        isEmpty={!isLoading && shown.length === 0}\n        emptyMessage=\"No traces in this range set a resource, thread, user or session id.\"\n      >\n        <MetricsLineChart\n          data={chart}\n          series={lines}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatCount}\n          axisFormatter={formatAxisCount}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick({ window: bucketWindow(Number(row.ts), step) }))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAM,MAAM;CACV;EAAE,SAAS;EAA4B,SAAS;EAAa,OAAO;EAAa,OAAO,aAAa;CAAI;CACzG;EAAE,SAAS;EAA0B,SAAS;EAAW,OAAO;EAAW,OAAO,aAAa;CAAM;CACrG;EAAE,SAAS;EAAwB,SAAS;EAAS,OAAO;EAAS,OAAO,aAAa;CAAO;CAChG;EAAE,SAAS;EAA2B,SAAS;EAAY,OAAO;EAAY,OAAO,aAAa;CAAK;AACzG;AAIA,IAAM,WAA4C,IAAI,KAAI,OAAM,GAAG,OAAO;AAE1E,IAAa,qBAAqB;AAQlC,SAAS,MAAM,KAAoC,IAAQ;CACzD,OAAO,KAAK,SAAS,GAAG,YAAY;AACtC;;AAGA,SAAgB,iBAAiB,EAAE,OAAO,oBAA2C;CACnF,MAAM,SAAS,yBAAyB;EACtC,WAAW,MAAM;EACjB,OAAO,MAAM;EACb,UAAU,MAAM;EAChB,UAAU;EACV,OAAA;CACF,CAAC;CAED,MAAM,SAAS,yBAAyB;EAAE,WAAW,MAAM;EAAW,OAAO,MAAM;EAAO,UAAU;CAAS,CAAC;CAE9G,MAAM,QAAQ,OAAO,MAAM,KAAK;CAEhC,MAAM,QAAQ,IAAI,QAAO,OAAM,MAAM,OAAO,EAAE,IAAI,CAAC;CACnD,MAAM,QAAkC,MAAM,KAAK,IAAI,OAAO;EAC5D,SAAS,GAAG;EACZ,OAAO,GAAG;EACV,OAAO,GAAG;EACV,UAAU,MAAM;CAClB,EAAE;CACF,MAAM,QAAQ,yBAAyB,OAAO,MAAM,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;EAC1G,GAAG;EACH,GAAG,OAAO,YAAY,MAAM,KAAI,OAAM,CAAC,GAAG,SAAS,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;CACzE,EAAE;CACF,MAAM,OAAO,cAAc,MAAM,aAAa,OAAO,OAAO,IAAI;CAChE,MAAM,QAAQ,OAAO,SAAS,OAAO;CACrC,MAAM,YAAY,OAAO,aAAa,OAAO;CAE7C,MAAM,SAAS;EACb,OAAO;EAEP,OAAO,MAAM,KAAI,QAAO;GAAE,OAAO,GAAG;GAAO,OAAO,YAAY,MAAM,OAAO,EAAE,CAAC;GAAG,OAAO,GAAG;EAAM,EAAE;EACnG,WAAW,OAAO;EAClB,SAAS,MAAM,SAAS,KACtB,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,wBAAD,EAAwB,QAAQ,MAAQ,CAAA,EACrB,CAAA;CAEzB;CAEA,IAAI,OACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD;GACS;GACP,eAAe;IACb,IAAI,OAAO,OAAO,OAAY,QAAQ;IACtC,IAAI,OAAO,OAAO,OAAY,QAAQ;GACxC;EACD,CAAA;CACQ,CAAA;CAIf,OACE,oBAAC,WAAD;EAAW,GAAI;EAAQ,YAAY,OAAO,qBAAqB,OAAO;EACpE,UAAA,oBAAC,WAAD;GACE,SAAS,CAAC,aAAa,MAAM,WAAW;GACxC,cAAa;GAEb,UAAA,oBAAC,kBAAD;IACE,MAAM;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,eAAe,sBAAqB,QAAO,iBAAiB,EAAE,QAAQ,aAAa,OAAO,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC;IAC/F;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

package/dist/domains/metrics/components/distinct-ids-card.cjs.js

@@ -7,7 +7,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 function DistinctIdsCard(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_trace_aggregate_card.TraceAggregateCard, {
 		title: require_domains_metrics_components_distinct_ids_distinct_ids_chart.DISTINCT_IDS_TITLE,
-		description: require_domains_metrics_components_distinct_ids_distinct_ids_chart.DISTINCT_IDS_DESCRIPTION,
 		children: (scope) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_distinct_ids_distinct_ids_chart.DistinctIdsChart, {
 			scope,
 			...props

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

@@ -1 +1 @@
-{"version":3,"file":"distinct-ids-card.cjs.js","names":["TraceAggregateCard","DISTINCT_IDS_TITLE","DISTINCT_IDS_DESCRIPTION","DistinctIdsChart"],"sources":["../../../../src/domains/metrics/components/distinct-ids-card.tsx"],"sourcesContent":["import type { DrilldownScope } from '../drilldown';\nimport { DISTINCT_IDS_DESCRIPTION, DISTINCT_IDS_TITLE, DistinctIdsChart } from './distinct-ids/distinct-ids-chart';\nimport { TraceAggregateCard } from './trace-aggregate-card';\n\nexport type DistinctIdsCardProps = {\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\n/** Distinct resource, thread, user and session ids per bucket, with range totals from a second request. */\nexport function DistinctIdsCard(props: DistinctIdsCardProps) {\n  return (\n    <TraceAggregateCard title={DISTINCT_IDS_TITLE} description={DISTINCT_IDS_DESCRIPTION}>\n      {scope => <DistinctIdsChart scope={scope} {...props} />}\n    </TraceAggregateCard>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,gBAAgB,OAA6B;CAC3D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,wDAAAA,oBAAD;EAAoB,OAAOC,mEAAAA;EAAoB,aAAaC,mEAAAA;EACzD,WAAA,UAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,mEAAAA,kBAAD;GAAyB;GAAO,GAAI;EAAQ,CAAA;CACpC,CAAA;AAExB"}
+{"version":3,"file":"distinct-ids-card.cjs.js","names":["TraceAggregateCard","DISTINCT_IDS_TITLE","DistinctIdsChart"],"sources":["../../../../src/domains/metrics/components/distinct-ids-card.tsx"],"sourcesContent":["import type { DrilldownScope } from '../drilldown';\nimport { DISTINCT_IDS_TITLE, DistinctIdsChart } from './distinct-ids/distinct-ids-chart';\nimport { TraceAggregateCard } from './trace-aggregate-card';\n\nexport type DistinctIdsCardProps = {\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\n/** Distinct resource, thread, user and session ids per bucket, with range totals from a second request. */\nexport function DistinctIdsCard(props: DistinctIdsCardProps) {\n  return (\n    <TraceAggregateCard title={DISTINCT_IDS_TITLE}>\n      {scope => <DistinctIdsChart scope={scope} {...props} />}\n    </TraceAggregateCard>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,gBAAgB,OAA6B;CAC3D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,wDAAAA,oBAAD;EAAoB,OAAOC,mEAAAA;EACxB,WAAA,UAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,mEAAAA,kBAAD;GAAyB;GAAO,GAAI;EAAQ,CAAA;CACpC,CAAA;AAExB"}

package/dist/domains/metrics/components/distinct-ids-card.es.js

@@ -1,4 +1,4 @@
-import { DISTINCT_IDS_DESCRIPTION, DISTINCT_IDS_TITLE, DistinctIdsChart } from "./distinct-ids/distinct-ids-chart.es.js";
+import { DISTINCT_IDS_TITLE, DistinctIdsChart } from "./distinct-ids/distinct-ids-chart.es.js";
 import { TraceAggregateCard } from "./trace-aggregate-card.es.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/distinct-ids-card.tsx
@@ -6,7 +6,6 @@ import { jsx } from "react/jsx-runtime";
 function DistinctIdsCard(props) {
 	return /* @__PURE__ */ jsx(TraceAggregateCard, {
 		title: DISTINCT_IDS_TITLE,
-		description: DISTINCT_IDS_DESCRIPTION,
 		children: (scope) => /* @__PURE__ */ jsx(DistinctIdsChart, {
 			scope,
 			...props

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

@@ -1 +1 @@
-{"version":3,"file":"distinct-ids-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/distinct-ids-card.tsx"],"sourcesContent":["import type { DrilldownScope } from '../drilldown';\nimport { DISTINCT_IDS_DESCRIPTION, DISTINCT_IDS_TITLE, DistinctIdsChart } from './distinct-ids/distinct-ids-chart';\nimport { TraceAggregateCard } from './trace-aggregate-card';\n\nexport type DistinctIdsCardProps = {\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\n/** Distinct resource, thread, user and session ids per bucket, with range totals from a second request. */\nexport function DistinctIdsCard(props: DistinctIdsCardProps) {\n  return (\n    <TraceAggregateCard title={DISTINCT_IDS_TITLE} description={DISTINCT_IDS_DESCRIPTION}>\n      {scope => <DistinctIdsChart scope={scope} {...props} />}\n    </TraceAggregateCard>\n  );\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,OAA6B;CAC3D,OACE,oBAAC,oBAAD;EAAoB,OAAO;EAAoB,aAAa;EACzD,WAAA,UAAS,oBAAC,kBAAD;GAAyB;GAAO,GAAI;EAAQ,CAAA;CACpC,CAAA;AAExB"}
+{"version":3,"file":"distinct-ids-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/distinct-ids-card.tsx"],"sourcesContent":["import type { DrilldownScope } from '../drilldown';\nimport { DISTINCT_IDS_TITLE, DistinctIdsChart } from './distinct-ids/distinct-ids-chart';\nimport { TraceAggregateCard } from './trace-aggregate-card';\n\nexport type DistinctIdsCardProps = {\n  /** Called with the time range of the clicked bucket. */\n  onTimeRangeClick?: (scope: DrilldownScope) => void;\n};\n\n/** Distinct resource, thread, user and session ids per bucket, with range totals from a second request. */\nexport function DistinctIdsCard(props: DistinctIdsCardProps) {\n  return (\n    <TraceAggregateCard title={DISTINCT_IDS_TITLE}>\n      {scope => <DistinctIdsChart scope={scope} {...props} />}\n    </TraceAggregateCard>\n  );\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,OAA6B;CAC3D,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACxB,WAAA,UAAS,oBAAC,kBAAD;GAAyB;GAAO,GAAI;EAAQ,CAAA;CACpC,CAAA;AAExB"}

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

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
-const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
-const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
 const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-Dly_H3oX.cjs");
+const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-CEB-f2sv.cjs");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-2m4LVL1N.cjs");
+const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
+const require_MetricsLineChart = require("../../../MetricsLineChart-CjBm4IXu.cjs");
 const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
+const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/failure-rate-card.tsx
 var SERIES = [{
@@ -19,7 +19,7 @@ var SERIES = [{
 	color: require_domains_metrics_lib_chart_colors.CHART_COLORS.error
 }];
 var axisPercent = (ratio) => `${Math.round(ratio * 100)}%`;
-function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
+function FailureRateCard({ onViewErrors, onTimeRangeClick, titleMenu }) {
 	const { data = [], isLoading, isError, isPlaceholderData } = require_domains_metrics_hooks_use_metrics_activity.useMetricsActivity();
 	const { timestamp } = require_domains_metrics_hooks_use_metrics_filters.useMetricsFilters();
 	const { stepHours } = require_domains_metrics_lib_metrics_buckets.bucketPlan(timestamp.start, timestamp.end);
@@ -28,7 +28,7 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
 	const yDomain = failed === 0 ? [0, 1] : void 0;
 	const layout = {
 		title: "Failure rate",
-		description: "Share of agent runs that failed.",
+		titleMenu,
 		actions: onViewErrors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_card_action_buttons.OpenErrorsInLogsButton, { onClick: onViewErrors }),
 		toolbar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, { series: SERIES }) })
 	};
@@ -38,11 +38,8 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.Summary, {
-			value: require_domains_metrics_lib_chart_format.formatPercent(runs > 0 ? failed / runs : 0),
-			label: "failed",
-			isLoading
-		}),
+		total: require_domains_metrics_lib_chart_format.formatPercent(runs > 0 ? failed / runs : 0),
+		isLoading,
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_area.ChartArea, {
 			isEmpty: !isLoading && runs === 0,

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

@@ -1 +1 @@
-{"version":3,"file":"failure-rate-card.cjs.js","names":["CHART_COLORS","useMetricsActivity","useMetricsFilters","bucketPlan","OpenErrorsInLogsButton","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatPercent","ChartArea","MetricsLineChart","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n  // With nothing failed, the axis would fall back to 0-4 (400%); a share tops out at 100%.\n  const yDomain: [number, number] | undefined = failed === 0 ? [0, 1] : undefined;\n\n  const layout = {\n    title: 'Failure rate',\n    description: 'Share of agent runs that failed.',\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\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={formatPercent(runs > 0 ? failed / runs : 0)} label=\"failed\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          yDomain={yDomain}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAM,SAAS,CAAC;CAAE,SAAS;CAAe,OAAO;CAAe,OAAOA,yCAAAA,aAAa;AAAM,CAAC;AAE3F,IAAM,eAAe,UAAkB,GAAG,KAAK,MAAM,QAAQ,GAAG,EAAE;AAUlE,SAAgB,gBAAgB,EAAE,cAAc,oBAA0C;CACxF,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsBC,mDAAAA,mBAAmB;CAChF,MAAM,EAAE,cAAcC,kDAAAA,kBAAkB;CACxC,MAAM,EAAE,cAAcC,4CAAAA,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;CACpE,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,CAAC;CAExD,MAAM,UAAwC,WAAW,IAAI,CAAC,GAAG,CAAC,IAAI,KAAA;CAEtE,MAAM,SAAS;EACb,OAAO;EACP,aAAa;EACb,SAAS,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,wBAAD,EAAwB,SAAS,aAAe,CAAA;EACzE,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD,EAAwB,QAAQ,OAAS,CAAA,EACtB,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oDAAAA,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,8CAAAA,WAAD;EACE,GAAI;EACJ,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,oBAAAA,YAAY,SAAb;GAAqB,OAAOI,yCAAAA,cAAc,OAAO,IAAI,SAAS,OAAO,CAAC;GAAG,OAAM;GAAoB;EAAY,CAAA;EAEjH,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAa;GACzD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgBF,yCAAAA;IAChB,eAAe;IACN;IACT,eAAe,sBAAqB,QAAO,iBAAiBG,4CAAAA,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"failure-rate-card.cjs.js","names":["CHART_COLORS","useMetricsActivity","useMetricsFilters","bucketPlan","OpenErrorsInLogsButton","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatPercent","ChartArea","MetricsLineChart","bucketWindow","EDGE_BUCKET_AXIS"],"sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport type { ChartCardProps } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps<V extends string = string> = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n  /** Switches to a sibling view from the title (Agent runs uses it). */\n  titleMenu?: ChartCardProps<V>['titleMenu'];\n};\n\nexport function FailureRateCard<V extends string = string>({\n  onViewErrors,\n  onTimeRangeClick,\n  titleMenu,\n}: FailureRateCardProps<V>) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n  // With nothing failed, the axis would fall back to 0-4 (400%); a share tops out at 100%.\n  const yDomain: [number, number] | undefined = failed === 0 ? [0, 1] : undefined;\n\n  const layout = {\n    title: 'Failure rate',\n    titleMenu,\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\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      total={formatPercent(runs > 0 ? failed / runs : 0)}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          yDomain={yDomain}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,SAAS,CAAC;CAAE,SAAS;CAAe,OAAO;CAAe,OAAOA,yCAAAA,aAAa;AAAM,CAAC;AAE3F,IAAM,eAAe,UAAkB,GAAG,KAAK,MAAM,QAAQ,GAAG,EAAE;AAYlE,SAAgB,gBAA2C,EACzD,cACA,kBACA,aAC0B;CAC1B,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsBC,mDAAAA,mBAAmB;CAChF,MAAM,EAAE,cAAcC,kDAAAA,kBAAkB;CACxC,MAAM,EAAE,cAAcC,4CAAAA,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;CACpE,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,CAAC;CAExD,MAAM,UAAwC,WAAW,IAAI,CAAC,GAAG,CAAC,IAAI,KAAA;CAEtE,MAAM,SAAS;EACb,OAAO;EACP;EACA,SAAS,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAACC,uDAAAA,wBAAD,EAAwB,SAAS,aAAe,CAAA;EACzE,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD,EAAwB,QAAQ,OAAS,CAAA,EACtB,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oDAAAA,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,8CAAAA,WAAD;EACE,GAAI;EACJ,OAAOE,yCAAAA,cAAc,OAAO,IAAI,SAAS,OAAO,CAAC;EACtC;EACX,YAAY;EAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8CAAAA,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAa;GACzD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgBF,yCAAAA;IAChB,eAAe;IACN;IACT,eAAe,sBAAqB,QAAO,iBAAiBG,4CAAAA,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAIC,uCAAAA;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

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

@@ -1,15 +1,15 @@
-import { bucketPlan, bucketWindow } from "../lib/metrics-buckets.es.js";
-import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
-import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
-import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { formatPercent } from "../lib/chart-format.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-C9GWgT58.js";
+import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
+import { bucketPlan, bucketWindow } from "../lib/metrics-buckets.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-M8awJ2B_.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-DKzuRU2q.js";
+import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-BhHoduO0.js";
 import { OpenErrorsInLogsButton } from "./card-action-buttons.es.js";
+import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/failure-rate-card.tsx
 var SERIES = [{
@@ -18,7 +18,7 @@ var SERIES = [{
 	color: CHART_COLORS.error
 }];
 var axisPercent = (ratio) => `${Math.round(ratio * 100)}%`;
-function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
+function FailureRateCard({ onViewErrors, onTimeRangeClick, titleMenu }) {
 	const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();
 	const { timestamp } = useMetricsFilters();
 	const { stepHours } = bucketPlan(timestamp.start, timestamp.end);
@@ -27,7 +27,7 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
 	const yDomain = failed === 0 ? [0, 1] : void 0;
 	const layout = {
 		title: "Failure rate",
-		description: "Share of agent runs that failed.",
+		titleMenu,
 		actions: onViewErrors && /* @__PURE__ */ jsx(OpenErrorsInLogsButton, { onClick: onViewErrors }),
 		toolbar: /* @__PURE__ */ jsx(MetricsCard.Toolbar, { children: /* @__PURE__ */ jsx(MetricsLineChartLegend, { series: SERIES }) })
 	};
@@ -37,11 +37,8 @@ function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
 	});
 	return /* @__PURE__ */ jsx(ChartCard, {
 		...layout,
-		summary: /* @__PURE__ */ jsx(MetricsCard.Summary, {
-			value: formatPercent(runs > 0 ? failed / runs : 0),
-			label: "failed",
-			isLoading
-		}),
+		total: formatPercent(runs > 0 ? failed / runs : 0),
+		isLoading,
 		isUpdating: isPlaceholderData,
 		children: /* @__PURE__ */ jsx(ChartArea, {
 			isEmpty: !isLoading && runs === 0,

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

@@ -1 +1 @@
-{"version":3,"file":"failure-rate-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n  // With nothing failed, the axis would fall back to 0-4 (400%); a share tops out at 100%.\n  const yDomain: [number, number] | undefined = failed === 0 ? [0, 1] : undefined;\n\n  const layout = {\n    title: 'Failure rate',\n    description: 'Share of agent runs that failed.',\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\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={formatPercent(runs > 0 ? failed / runs : 0)} label=\"failed\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          yDomain={yDomain}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,SAAS,CAAC;CAAE,SAAS;CAAe,OAAO;CAAe,OAAO,aAAa;AAAM,CAAC;AAE3F,IAAM,eAAe,UAAkB,GAAG,KAAK,MAAM,QAAQ,GAAG,EAAE;AAUlE,SAAgB,gBAAgB,EAAE,cAAc,oBAA0C;CACxF,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsB,mBAAmB;CAChF,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;CACpE,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,CAAC;CAExD,MAAM,UAAwC,WAAW,IAAI,CAAC,GAAG,CAAC,IAAI,KAAA;CAEtE,MAAM,SAAS;EACb,OAAO;EACP,aAAa;EACb,SAAS,gBAAgB,oBAAC,wBAAD,EAAwB,SAAS,aAAe,CAAA;EACzE,SACE,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,wBAAD,EAAwB,QAAQ,OAAS,CAAA,EACtB,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,SACE,oBAAC,YAAY,SAAb;GAAqB,OAAO,cAAc,OAAO,IAAI,SAAS,OAAO,CAAC;GAAG,OAAM;GAAoB;EAAY,CAAA;EAEjH,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAa;GACzD,UAAA,oBAAC,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACN;IACT,eAAe,sBAAqB,QAAO,iBAAiB,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}
+{"version":3,"file":"failure-rate-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/failure-rate-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsActivity } from '../hooks/use-metrics-activity';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatPercent } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow } from '../lib/metrics-buckets';\nimport { OpenErrorsInLogsButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport type { ChartCardProps } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst SERIES = [{ dataKey: 'failureRate', label: 'Failed runs', color: CHART_COLORS.error }];\n\nconst axisPercent = (ratio: number) => `${Math.round(ratio * 100)}%`;\n\n/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */\nexport type FailureRateCardProps<V extends string = string> = {\n  /** Called from the \"View errors in Logs\" button. */\n  onViewErrors?: () => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n  /** Switches to a sibling view from the title (Agent runs uses it). */\n  titleMenu?: ChartCardProps<V>['titleMenu'];\n};\n\nexport function FailureRateCard<V extends string = string>({\n  onViewErrors,\n  onTimeRangeClick,\n  titleMenu,\n}: FailureRateCardProps<V>) {\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();\n  const { timestamp } = useMetricsFilters();\n  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);\n  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);\n  const failed = data.reduce((sum, b) => sum + b.failed, 0);\n  // With nothing failed, the axis would fall back to 0-4 (400%); a share tops out at 100%.\n  const yDomain: [number, number] | undefined = failed === 0 ? [0, 1] : undefined;\n\n  const layout = {\n    title: 'Failure rate',\n    titleMenu,\n    actions: onViewErrors && <OpenErrorsInLogsButton onClick={onViewErrors} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={SERIES} />\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      total={formatPercent(runs > 0 ? failed / runs : 0)}\n      isLoading={isLoading}\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && runs === 0} emptyMessage=\"No agent runs in this range.\">\n        <MetricsLineChart\n          data={data}\n          series={SERIES}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          valueFormatter={formatPercent}\n          axisFormatter={axisPercent}\n          yDomain={yDomain}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,SAAS,CAAC;CAAE,SAAS;CAAe,OAAO;CAAe,OAAO,aAAa;AAAM,CAAC;AAE3F,IAAM,eAAe,UAAkB,GAAG,KAAK,MAAM,QAAQ,GAAG,EAAE;AAYlE,SAAgB,gBAA2C,EACzD,cACA,kBACA,aAC0B;CAC1B,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,SAAS,sBAAsB,mBAAmB;CAChF,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG;CAC/D,MAAM,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;CACpE,MAAM,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,EAAE,QAAQ,CAAC;CAExD,MAAM,UAAwC,WAAW,IAAI,CAAC,GAAG,CAAC,IAAI,KAAA;CAEtE,MAAM,SAAS;EACb,OAAO;EACP;EACA,SAAS,gBAAgB,oBAAC,wBAAD,EAAwB,SAAS,aAAe,CAAA;EACzE,SACE,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,wBAAD,EAAwB,QAAQ,OAAS,CAAA,EACtB,CAAA;CAEzB;CAEA,IAAI,SACF,OACE,oBAAC,WAAD;EAAW,GAAI;EACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACR,CAAA;CAIf,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,OAAO,cAAc,OAAO,IAAI,SAAS,OAAO,CAAC;EACtC;EACX,YAAY;EAEZ,UAAA,oBAAC,WAAD;GAAW,SAAS,CAAC,aAAa,SAAS;GAAG,cAAa;GACzD,UAAA,oBAAC,kBAAD;IACQ;IACN,QAAQ;IACR,QAAO;IACP,SAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACN;IACT,eAAe,sBAAqB,QAAO,iBAAiB,aAAa,OAAO,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF;IACX,GAAI;GACL,CAAA;EACQ,CAAA;CACF,CAAA;AAEf"}

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

@@ -1,14 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_MetricsKpiCard = require("../../../MetricsKpiCard-Uw0nyMgW.cjs");
+const require_MetricsKpiCard = require("../../../MetricsKpiCard-By_-sagx.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/kpi-card.tsx
 /** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */
 function KpiCard({ label, icon: Icon, isError = false, ...reading }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsKpiCard.MetricsKpiCard, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsKpiCard.MetricsKpiCard.Label, {
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}),
-		children: label
-	}), isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KpiError, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KpiReading, { ...reading })] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MetricsKpiCard.MetricsKpiCard, {
+		busy: !isError && (reading.isLoading || reading.isUpdating),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsKpiCard.MetricsKpiCard.Label, {
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}),
+			children: label
+		}), isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KpiError, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KpiReading, { ...reading })]
+	});
 }
 function KpiError() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsKpiCard.MetricsKpiCard.ValueRow, {

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

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.cjs.js","names":["MetricsKpiCard","_Fragment","cn"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: string;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,uBAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB;EAAsB,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,CAAO,CAAA;EAAI,UAAA;CAA4B,CAAA,GAClE,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,CAAW,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC,EAAA,CAAA;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB,EAAuB,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAOE,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAD,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAWE,cAAAA,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"kpi-card.cjs.js","names":["MetricsKpiCard","_Fragment","cn"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: string;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard busy={!isError && (reading.isLoading || reading.isUpdating)}>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,uBAAAA,gBAAD;EAAgB,MAAM,CAAC,YAAY,QAAQ,aAAa,QAAQ;EAAhE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB;GAAsB,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,CAAO,CAAA;GAAI,UAAA;EAA4B,CAAA,GAClE,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,CAAW,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC;;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB,EAAuB,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAOE,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAD,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAWE,cAAAA,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -1,13 +1,16 @@
 import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { t as MetricsKpiCard } from "../../../MetricsKpiCard-Idxjl-dn.js";
+import { t as MetricsKpiCard } from "../../../MetricsKpiCard-OHbAElTl.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/domains/metrics/components/kpi-card.tsx
 /** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */
 function KpiCard({ label, icon: Icon, isError = false, ...reading }) {
-	return /* @__PURE__ */ jsxs(MetricsKpiCard, { children: [/* @__PURE__ */ jsx(MetricsKpiCard.Label, {
-		icon: /* @__PURE__ */ jsx(Icon, {}),
-		children: label
-	}), isError ? /* @__PURE__ */ jsx(KpiError, {}) : /* @__PURE__ */ jsx(KpiReading, { ...reading })] });
+	return /* @__PURE__ */ jsxs(MetricsKpiCard, {
+		busy: !isError && (reading.isLoading || reading.isUpdating),
+		children: [/* @__PURE__ */ jsx(MetricsKpiCard.Label, {
+			icon: /* @__PURE__ */ jsx(Icon, {}),
+			children: label
+		}), isError ? /* @__PURE__ */ jsx(KpiError, {}) : /* @__PURE__ */ jsx(KpiReading, { ...reading })]
+	});
 }
 function KpiError() {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MetricsKpiCard.ValueRow, {