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

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

@@ -1 +1 @@
-{"version":3,"file":"card-action-buttons.es.js","sources":["../../../../src/domains/metrics/components/card-action-buttons.tsx"],"sourcesContent":["import { EyeIcon, LogsIcon } from 'lucide-react';\nimport { Button } from '../../../ds/components/Button/Button';\nimport type { LinkComponent } from '../../../ds/types/link-component';\n\ntype CardActionButtonProps = {\n  /** Pre-built drilldown URL (typically from `useDrilldown().getTracesHref(...)`). */\n  href: string;\n  /** Override how the underlying anchor is rendered — pass a router-aware Link\n   *  to keep navigation in-app. Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n};\n\n/** Icon link in a MetricsCard top bar that opens the Traces page pre-filtered\n *  to whatever dimensions the card knows about. */\nexport function OpenInTracesButton({ href, LinkComponent = 'a' }: CardActionButtonProps) {\n  return (\n    <Button\n      render={<LinkComponent href={href} />}\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"View in Traces\"\n      aria-label=\"View in Traces\"\n    >\n      <EyeIcon />\n    </Button>\n  );\n}\n\n/** Icon link in a MetricsCard top bar that opens the Logs page scoped to\n *  errors for the card's current dimensions. */\nexport function OpenErrorsInLogsButton({ href, LinkComponent = 'a' }: CardActionButtonProps) {\n  return (\n    <Button\n      render={<LinkComponent href={href} />}\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"View errors in Logs\"\n      aria-label=\"View errors in Logs\"\n    >\n      <LogsIcon />\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,kBAAA,CAAmB,EAAE,IAAA,EAAM,aAAA,GAAgB,KAAI,EAA0B;AACvF,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,MAAA,kBAAQ,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAY,CAAA;AAAA,MACnC,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAK,SAAA;AAAA,MACL,OAAA,EAAQ,gBAAA;AAAA,MACR,YAAA,EAAW,gBAAA;AAAA,MAEX,8BAAC,OAAA,EAAA,EAAQ;AAAA;AAAA,GACX;AAEJ;AAIO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,aAAA,GAAgB,KAAI,EAA0B;AAC3F,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,MAAA,kBAAQ,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAY,CAAA;AAAA,MACnC,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAK,SAAA;AAAA,MACL,OAAA,EAAQ,qBAAA;AAAA,MACR,YAAA,EAAW,qBAAA;AAAA,MAEX,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,GACZ;AAEJ;;;;"}
+{"version":3,"file":"card-action-buttons.es.js","sources":["../../../../src/domains/metrics/components/card-action-buttons.tsx"],"sourcesContent":["import { EyeIcon, LogsIcon } from 'lucide-react';\nimport { Button } from '../../../ds/components/Button/Button';\n\ntype CardActionButtonProps = {\n  onClick: () => void;\n};\n\n/** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered\n *  to whatever dimensions the card knows about. */\nexport function OpenInTracesButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button onClick={onClick} variant=\"ghost\" size=\"icon-md\" tooltip=\"View in Traces\" aria-label=\"View in Traces\">\n      <EyeIcon />\n    </Button>\n  );\n}\n\n/** Icon button in a MetricsCard top bar that opens the Logs page scoped to\n *  errors for the card's current dimensions. */\nexport function OpenErrorsInLogsButton({ onClick }: CardActionButtonProps) {\n  return (\n    <Button\n      onClick={onClick}\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"View errors in Logs\"\n      aria-label=\"View errors in Logs\"\n    >\n      <LogsIcon />\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;AASO,SAAS,kBAAA,CAAmB,EAAE,OAAA,EAAQ,EAA0B;AACrE,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAkB,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAU,OAAA,EAAQ,gBAAA,EAAiB,YAAA,EAAW,gBAAA,EAC3F,QAAA,kBAAA,GAAA,CAAC,WAAQ,CAAA,EACX,CAAA;AAEJ;AAIO,SAAS,sBAAA,CAAuB,EAAE,OAAA,EAAQ,EAA0B;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAK,SAAA;AAAA,MACL,OAAA,EAAQ,qBAAA;AAAA,MACR,YAAA,EAAW,qBAAA;AAAA,MAEX,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,GACZ;AAEJ;;;;"}

package/dist/domains/metrics/components/chart-area.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+
+function ChartArea({ isEmpty = false, emptyMessage = "No data in this range.", children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    children,
+    isEmpty && /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: emptyMessage, className: "absolute inset-0" })
+  ] });
+}
+
+exports.ChartArea = ChartArea;
+//# sourceMappingURL=chart-area.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area.cjs.js","sources":["../../../../src/domains/metrics/components/chart-area.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\nexport type ChartAreaProps = {\n  /** No data in the range: the empty chart stays (axis and height) under a message. */\n  isEmpty?: boolean;\n  emptyMessage?: string;\n  children: ReactNode;\n};\n\n/** A card's chart or list, filling the card body; an empty range shows a message over it. */\nexport function ChartArea({ isEmpty = false, emptyMessage = 'No data in this range.', children }: ChartAreaProps) {\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      {children}\n      {isEmpty && <MetricsCard.NoData message={emptyMessage} className=\"absolute inset-0\" />}\n    </div>\n  );\n}\n"],"names":["jsxs","MetricsCard"],"mappings":";;;;;;;AAWO,SAAS,UAAU,EAAE,OAAA,GAAU,OAAO,YAAA,GAAe,wBAAA,EAA0B,UAAS,EAAmB;AAChH,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uCAAA,EACZ,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,mCAAYC,uBAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAS,YAAA,EAAc,WAAU,kBAAA,EAAmB;AAAA,GAAA,EACtF,CAAA;AAEJ;;;;"}

package/dist/domains/metrics/components/chart-area.d.ts

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

package/dist/domains/metrics/components/chart-area.es.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+
+function ChartArea({ isEmpty = false, emptyMessage = "No data in this range.", children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    children,
+    isEmpty && /* @__PURE__ */ jsx(MetricsCard.NoData, { message: emptyMessage, className: "absolute inset-0" })
+  ] });
+}
+
+export { ChartArea };
+//# sourceMappingURL=chart-area.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area.es.js","sources":["../../../../src/domains/metrics/components/chart-area.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\nexport type ChartAreaProps = {\n  /** No data in the range: the empty chart stays (axis and height) under a message. */\n  isEmpty?: boolean;\n  emptyMessage?: string;\n  children: ReactNode;\n};\n\n/** A card's chart or list, filling the card body; an empty range shows a message over it. */\nexport function ChartArea({ isEmpty = false, emptyMessage = 'No data in this range.', children }: ChartAreaProps) {\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      {children}\n      {isEmpty && <MetricsCard.NoData message={emptyMessage} className=\"absolute inset-0\" />}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,UAAU,EAAE,OAAA,GAAU,OAAO,YAAA,GAAe,wBAAA,EAA0B,UAAS,EAAmB;AAChH,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uCAAA,EACZ,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,wBAAY,WAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAS,YAAA,EAAc,WAAU,kBAAA,EAAmB;AAAA,GAAA,EACtF,CAAA;AAEJ;;;;"}

package/dist/domains/metrics/components/chart-card-error.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+
+function ChartCardError() {
+  return /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Error, { message: "Couldn't load this data. Try again in a moment.", className: "h-full" });
+}
+
+exports.ChartCardError = ChartCardError;
+//# sourceMappingURL=chart-card-error.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card-error.cjs.js","sources":["../../../../src/domains/metrics/components/chart-card-error.tsx"],"sourcesContent":["import { MetricsCard } from '@/ds/components/MetricsCard';\n\n/** Fills a chart card's body when its data failed to load. */\nexport function ChartCardError() {\n  return <MetricsCard.Error message=\"Couldn't load this data. Try again in a moment.\" className=\"h-full\" />;\n}\n"],"names":["MetricsCard"],"mappings":";;;;;;;AAGO,SAAS,cAAA,GAAiB;AAC/B,EAAA,sCAAQA,uBAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,iDAAA,EAAkD,WAAU,QAAA,EAAS,CAAA;AACzG;;;;"}

package/dist/domains/metrics/components/chart-card-error.d.ts

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

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

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+
+function ChartCardError() {
+  return /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Couldn't load this data. Try again in a moment.", className: "h-full" });
+}
+
+export { ChartCardError };
+//# sourceMappingURL=chart-card-error.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card-error.es.js","sources":["../../../../src/domains/metrics/components/chart-card-error.tsx"],"sourcesContent":["import { MetricsCard } from '@/ds/components/MetricsCard';\n\n/** Fills a chart card's body when its data failed to load. */\nexport function ChartCardError() {\n  return <MetricsCard.Error message=\"Couldn't load this data. Try again in a moment.\" className=\"h-full\" />;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,cAAA,GAAiB;AAC/B,EAAA,2BAAQ,WAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,iDAAA,EAAkD,WAAU,QAAA,EAAS,CAAA;AACzG;;;;"}

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

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+const utils_cn = require('../../../cn-TqD01zH-.cjs');
+
+function ChartCard({
+  title,
+  description,
+  summary,
+  actions,
+  toolbar,
+  isUpdating = false,
+  className,
+  children
+}) {
+  const fade = utils_cn.cn("transition-opacity duration-200", isUpdating && "opacity-50");
+  return /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard, { className: utils_cn.cn("min-h-0! min-w-0!", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.TitleAndDescription, { title, description }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Actions, { reveal: "hover", children: actions }),
+      summary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("order-last flex w-24 shrink-0 justify-end", fade), children: summary })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.Content, { className: "flex flex-col gap-4 overflow-visible", children: [
+      toolbar,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("relative flex h-60 min-h-0 min-w-0 flex-col", fade), children })
+    ] })
+  ] });
+}
+
+exports.ChartCard = ChartCard;
+//# sourceMappingURL=chart-card.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card.cjs.js","sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps = {\n  title: string;\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  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  title,\n  description,\n  summary,\n  actions,\n  toolbar,\n  isUpdating = false,\n  className,\n  children,\n}: ChartCardProps) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0!', className)}>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title={title} description={description} />\n        {actions && <MetricsCard.Actions reveal=\"hover\">{actions}</MetricsCard.Actions>}\n        {summary && <div className={cn('order-last flex w-24 shrink-0 justify-end', fade)}>{summary}</div>}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className=\"flex flex-col gap-4 overflow-visible\">\n        {toolbar}\n        <div className={cn('relative flex h-60 min-h-0 min-w-0 flex-col', fade)}>{children}</div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n"],"names":["cn","MetricsCard","jsxs","jsx"],"mappings":";;;;;;;;AAuBO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,IAAA,GAAOA,WAAA,CAAG,iCAAA,EAAmC,UAAA,IAAc,YAAY,CAAA;AAC7E,EAAA,uCACGC,uBAAA,EAAA,EAAY,SAAA,EAAWD,WAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EACvD,QAAA,EAAA;AAAA,oBAAAE,eAAA,CAACD,uBAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAACF,uBAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAc,WAAA,EAA0B,CAAA;AAAA,MACxE,2BAAWE,cAAA,CAACF,uBAAA,CAAY,SAAZ,EAAoB,MAAA,EAAO,SAAS,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,MACxD,OAAA,mCAAY,KAAA,EAAA,EAAI,SAAA,EAAWD,YAAG,2CAAA,EAA6C,IAAI,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EAC9F,CAAA;AAAA,oBACAE,eAAA,CAACD,uBAAA,CAAY,OAAA,EAAZ,EAAoB,WAAU,sCAAA,EAC5B,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,qCACA,KAAA,EAAA,EAAI,SAAA,EAAWD,YAAG,6CAAA,EAA+C,IAAI,GAAI,QAAA,EAAS;AAAA,KAAA,EACrF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

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

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

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+import { c as cn } from '../../../cn-coERSHz5.js';
+
+function ChartCard({
+  title,
+  description,
+  summary,
+  actions,
+  toolbar,
+  isUpdating = false,
+  className,
+  children
+}) {
+  const fade = cn("transition-opacity duration-200", isUpdating && "opacity-50");
+  return /* @__PURE__ */ jsxs(MetricsCard, { className: cn("min-h-0! min-w-0!", className), children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title, description }),
+      actions && /* @__PURE__ */ jsx(MetricsCard.Actions, { reveal: "hover", children: actions }),
+      summary && /* @__PURE__ */ jsx("div", { className: cn("order-last flex w-24 shrink-0 justify-end", fade), children: summary })
+    ] }),
+    /* @__PURE__ */ jsxs(MetricsCard.Content, { className: "flex flex-col gap-4 overflow-visible", children: [
+      toolbar,
+      /* @__PURE__ */ jsx("div", { className: cn("relative flex h-60 min-h-0 min-w-0 flex-col", fade), children })
+    ] })
+  ] });
+}
+
+export { ChartCard };
+//# sourceMappingURL=chart-card.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card.es.js","sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps = {\n  title: string;\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  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  title,\n  description,\n  summary,\n  actions,\n  toolbar,\n  isUpdating = false,\n  className,\n  children,\n}: ChartCardProps) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0!', className)}>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title={title} description={description} />\n        {actions && <MetricsCard.Actions reveal=\"hover\">{actions}</MetricsCard.Actions>}\n        {summary && <div className={cn('order-last flex w-24 shrink-0 justify-end', fade)}>{summary}</div>}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className=\"flex flex-col gap-4 overflow-visible\">\n        {toolbar}\n        <div className={cn('relative flex h-60 min-h-0 min-w-0 flex-col', fade)}>{children}</div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":";;;;AAuBO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,IAAA,GAAO,EAAA,CAAG,iCAAA,EAAmC,UAAA,IAAc,YAAY,CAAA;AAC7E,EAAA,4BACG,WAAA,EAAA,EAAY,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EACvD,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,WAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,CAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAc,WAAA,EAA0B,CAAA;AAAA,MACxE,2BAAW,GAAA,CAAC,WAAA,CAAY,SAAZ,EAAoB,MAAA,EAAO,SAAS,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,MACxD,OAAA,wBAAY,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,2CAAA,EAA6C,IAAI,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EAC9F,CAAA;AAAA,oBACA,IAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,WAAU,sCAAA,EAC5B,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,0BACA,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,6CAAA,EAA+C,IAAI,GAAI,QAAA,EAAS;AAAA,KAAA,EACrF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const dateTimeRangePicker = require('../../../date-time-range-picker-CvzC4nOt.cjs');
+const dateTimeRangePicker = require('../../../date-time-range-picker-BwgosA0R.cjs');
 const domains_metrics_hooks_useMetrics = require('../hooks/use-metrics.cjs.js');
 
 const METRICS_PRESETS = [

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
-import { D as DateTimeRangePicker } from '../../../date-time-range-picker-BqlAiuYW.js';
+import { D as DateTimeRangePicker } from '../../../date-time-range-picker-CRvT0pWo.js';
 import { useMetrics } from '../hooks/use-metrics.es.js';
 
 const METRICS_PRESETS = [

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

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domains_metrics_hooks_useMetricsActivity = require('../hooks/use-metrics-activity.cjs.js');
+const domains_metrics_hooks_useMetricsFilters = require('../hooks/use-metrics-filters.cjs.js');
+const domains_metrics_lib_chartAxis = require('../lib/chart-axis.cjs.js');
+const domains_metrics_lib_chartColors = require('../lib/chart-colors.cjs.js');
+const domains_metrics_lib_chartFormat = require('../lib/chart-format.cjs.js');
+const domains_metrics_lib_metricsBuckets = require('../lib/metrics-buckets.cjs.js');
+const domains_metrics_components_cardActionButtons = require('./card-action-buttons.cjs.js');
+const domains_metrics_components_chartArea = require('./chart-area.cjs.js');
+const domains_metrics_components_chartCard = require('./chart-card.cjs.js');
+const domains_metrics_components_chartCardError = require('./chart-card-error.cjs.js');
+const metricsCard = require('../../../metrics-card-DwMMmvo-.cjs');
+const metricsLineChart = require('../../../metrics-line-chart-D7fE4EQJ.cjs');
+
+const SERIES = [{ dataKey: "failureRate", label: "Failed runs", color: domains_metrics_lib_chartColors.CHART_COLORS.error }];
+const axisPercent = (ratio) => `${Math.round(ratio * 100)}%`;
+function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
+  const { data = [], isLoading, isError, isPlaceholderData } = domains_metrics_hooks_useMetricsActivity.useMetricsActivity();
+  const { timestamp } = domains_metrics_hooks_useMetricsFilters.useMetricsFilters();
+  const { stepHours } = domains_metrics_lib_metricsBuckets.bucketPlan(timestamp.start, timestamp.end);
+  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);
+  const failed = data.reduce((sum, b) => sum + b.failed, 0);
+  const layout = {
+    title: "Failure rate",
+    description: "Share of agent runs that failed.",
+    actions: onViewErrors && /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_cardActionButtons.OpenErrorsInLogsButton, { onClick: onViewErrors })
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCard.ChartCard, { ...layout, children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartCardError.ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    domains_metrics_components_chartCard.ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_lib_chartFormat.formatPercent(runs > 0 ? failed / runs : 0), label: "failed", isLoading }),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsxRuntime.jsx(domains_metrics_components_chartArea.ChartArea, { isEmpty: !isLoading && runs === 0, emptyMessage: "No agent runs in this range.", children: /* @__PURE__ */ jsxRuntime.jsx(
+        metricsLineChart.MetricsLineChart,
+        {
+          data,
+          series: SERIES,
+          height: "fill",
+          xLabels: "edges",
+          showYAxis: false,
+          valueFormatter: domains_metrics_lib_chartFormat.formatPercent,
+          axisFormatter: axisPercent,
+          onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(domains_metrics_lib_metricsBuckets.bucketWindow(Number(row.ts), stepHours))),
+          isLoading,
+          ...domains_metrics_lib_chartAxis.EDGE_BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+exports.FailureRateCard = FailureRateCard;
+//# sourceMappingURL=failure-rate-card.cjs.js.map

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

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

package/dist/domains/metrics/components/failure-rate-card.d.ts

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

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

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMetricsActivity } from '../hooks/use-metrics-activity.es.js';
+import { useMetricsFilters } from '../hooks/use-metrics-filters.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 { bucketPlan, bucketWindow } from '../lib/metrics-buckets.es.js';
+import { OpenErrorsInLogsButton } from './card-action-buttons.es.js';
+import { ChartArea } from './chart-area.es.js';
+import { ChartCard } from './chart-card.es.js';
+import { ChartCardError } from './chart-card-error.es.js';
+import { M as MetricsCard } from '../../../metrics-card-DoO7LGMR.js';
+import { M as MetricsLineChart } from '../../../metrics-line-chart-BBn0LeqC.js';
+
+const SERIES = [{ dataKey: "failureRate", label: "Failed runs", color: CHART_COLORS.error }];
+const axisPercent = (ratio) => `${Math.round(ratio * 100)}%`;
+function FailureRateCard({ onViewErrors, onTimeRangeClick }) {
+  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsActivity();
+  const { timestamp } = useMetricsFilters();
+  const { stepHours } = bucketPlan(timestamp.start, timestamp.end);
+  const runs = data.reduce((sum, b) => sum + b.completed + b.failed, 0);
+  const failed = data.reduce((sum, b) => sum + b.failed, 0);
+  const layout = {
+    title: "Failure rate",
+    description: "Share of agent runs that failed.",
+    actions: onViewErrors && /* @__PURE__ */ jsx(OpenErrorsInLogsButton, { onClick: onViewErrors })
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsx(ChartCard, { ...layout, children: /* @__PURE__ */ jsx(ChartCardError, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      ...layout,
+      summary: /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatPercent(runs > 0 ? failed / runs : 0), label: "failed", isLoading }),
+      isUpdating: isPlaceholderData,
+      children: /* @__PURE__ */ jsx(ChartArea, { isEmpty: !isLoading && runs === 0, emptyMessage: "No agent runs in this range.", children: /* @__PURE__ */ jsx(
+        MetricsLineChart,
+        {
+          data,
+          series: SERIES,
+          height: "fill",
+          xLabels: "edges",
+          showYAxis: false,
+          valueFormatter: formatPercent,
+          axisFormatter: axisPercent,
+          onBucketClick: onTimeRangeClick && ((row) => onTimeRangeClick(bucketWindow(Number(row.ts), stepHours))),
+          isLoading,
+          ...EDGE_BUCKET_AXIS
+        }
+      ) })
+    }
+  );
+}
+
+export { FailureRateCard };
+//# sourceMappingURL=failure-rate-card.es.js.map

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

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

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const metricsKpiCard = require('../../../metrics-kpi-card-B-CKwzcj.cjs');
+const utils_cn = require('../../../cn-TqD01zH-.cjs');
+
+function KpiCard({ label, icon: Icon, isError = false, ...reading }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(metricsKpiCard.MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(metricsKpiCard.MetricsKpiCard.Label, { icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}), children: label }),
+    isError ? /* @__PURE__ */ jsxRuntime.jsx(KpiError, {}) : /* @__PURE__ */ jsxRuntime.jsx(KpiReading, { ...reading })
+  ] });
+}
+function KpiError() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(metricsKpiCard.MetricsKpiCard.ValueRow, { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(metricsKpiCard.MetricsKpiCard.Value, { children: "—" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(metricsKpiCard.MetricsKpiCard.Footer, { detail: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive-foreground", children: "Couldn't load" }) })
+  ] });
+}
+function KpiReading({
+  value,
+  change,
+  lowerIsBetter,
+  detail,
+  previous,
+  comparison,
+  isLoading = false,
+  isUpdating = false
+}) {
+  const fade = utils_cn.cn("transition-opacity duration-200", isUpdating && "opacity-50");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(metricsKpiCard.MetricsKpiCard.ValueRow, { className: utils_cn.cn("mt-1", fade), isLoading, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(metricsKpiCard.MetricsKpiCard.Value, { children: value }),
+      change !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        metricsKpiCard.MetricsKpiCard.Change,
+        {
+          changePct: change,
+          comparison,
+          lowerIsBetter,
+          prevValue: previous
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      metricsKpiCard.MetricsKpiCard.Footer,
+      {
+        detail,
+        prevValue: change === void 0 ? void 0 : previous,
+        isLoading,
+        className: fade
+      }
+    )
+  ] });
+}
+
+exports.KpiCard = KpiCard;
+//# sourceMappingURL=kpi-card.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-card.cjs.js","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"],"names":["MetricsKpiCard","jsx","jsxs","Fragment","cn"],"mappings":";;;;;;;;AAwBO,SAAS,OAAA,CAAQ,EAAE,KAAA,EAAO,IAAA,EAAM,MAAM,OAAA,GAAU,KAAA,EAAO,GAAG,OAAA,EAAQ,EAAiB;AACxF,EAAA,uCACGA,6BAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACD,8BAAe,KAAA,EAAf,EAAqB,sBAAMC,cAAA,CAAC,IAAA,EAAA,EAAK,GAAK,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAC5C,0BAAUA,cAAA,CAAC,QAAA,EAAA,EAAS,oBAAKA,cAAA,CAAC,UAAA,EAAA,EAAY,GAAG,OAAA,EAAS;AAAA,GAAA,EACrD,CAAA;AAEJ;AAEA,SAAS,QAAA,GAAW;AAClB,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAACD,6BAAA,CAAe,QAAA,EAAf,EAAwB,SAAA,EAAU,MAAA,EACjC,yCAACA,6BAAA,CAAe,KAAA,EAAf,EAAqB,QAAA,EAAA,GAAA,EAAC,CAAA,EACzB,CAAA;AAAA,oBACAC,cAAA,CAACD,6BAAA,CAAe,MAAA,EAAf,EAAsB,MAAA,iCAAS,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA8B,QAAA,EAAA,eAAA,EAAa,CAAA,EAAS;AAAA,GAAA,EACrG,CAAA;AAEJ;AAEA,SAAS,UAAA,CAAW;AAAA,EAClB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa;AACf,CAAA,EAAqD;AACnD,EAAA,MAAM,IAAA,GAAOI,WAAA,CAAG,iCAAA,EAAmC,UAAA,IAAc,YAAY,CAAA;AAC7E,EAAA,uBACEF,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAACF,6BAAA,CAAe,UAAf,EAAwB,SAAA,EAAWI,YAAG,MAAA,EAAQ,IAAI,GAAG,SAAA,EACpD,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACD,6BAAA,CAAe,KAAA,EAAf,EAAsB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC5B,WAAW,MAAA,oBACVC,cAAA;AAAA,QAACD,6BAAA,CAAe,MAAA;AAAA,QAAf;AAAA,UACC,SAAA,EAAW,MAAA;AAAA,UACX,UAAA;AAAA,UACA,aAAA;AAAA,UACA,SAAA,EAAW;AAAA;AAAA;AACb,KAAA,EAEJ,CAAA;AAAA,oBACAC,cAAA;AAAA,MAACD,6BAAA,CAAe,MAAA;AAAA,MAAf;AAAA,QACC,MAAA;AAAA,QAEA,SAAA,EAAW,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,QAAA;AAAA,QAC9C,SAAA;AAAA,QACA,SAAA,EAAW;AAAA;AAAA;AACb,GAAA,EACF,CAAA;AAEJ;;;;"}

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

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

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { M as MetricsKpiCard } from '../../../metrics-kpi-card-gvgEnnuU.js';
+import { c as cn } from '../../../cn-coERSHz5.js';
+
+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 })
+  ] });
+}
+function KpiError() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MetricsKpiCard.ValueRow, { className: "mt-1", children: /* @__PURE__ */ jsx(MetricsKpiCard.Value, { children: "—" }) }),
+    /* @__PURE__ */ jsx(MetricsKpiCard.Footer, { detail: /* @__PURE__ */ jsx("span", { className: "text-destructive-foreground", children: "Couldn't load" }) })
+  ] });
+}
+function KpiReading({
+  value,
+  change,
+  lowerIsBetter,
+  detail,
+  previous,
+  comparison,
+  isLoading = false,
+  isUpdating = false
+}) {
+  const fade = cn("transition-opacity duration-200", isUpdating && "opacity-50");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(MetricsKpiCard.ValueRow, { className: cn("mt-1", fade), isLoading, children: [
+      /* @__PURE__ */ jsx(MetricsKpiCard.Value, { children: value }),
+      change !== void 0 && /* @__PURE__ */ jsx(
+        MetricsKpiCard.Change,
+        {
+          changePct: change,
+          comparison,
+          lowerIsBetter,
+          prevValue: previous
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      MetricsKpiCard.Footer,
+      {
+        detail,
+        prevValue: change === void 0 ? void 0 : previous,
+        isLoading,
+        className: fade
+      }
+    )
+  ] });
+}
+
+export { KpiCard };
+//# sourceMappingURL=kpi-card.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-card.es.js","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"],"names":[],"mappings":";;;;AAwBO,SAAS,OAAA,CAAQ,EAAE,KAAA,EAAO,IAAA,EAAM,MAAM,OAAA,GAAU,KAAA,EAAO,GAAG,OAAA,EAAQ,EAAiB;AACxF,EAAA,4BACG,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAe,KAAA,EAAf,EAAqB,sBAAM,GAAA,CAAC,IAAA,EAAA,EAAK,GAAK,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAC5C,0BAAU,GAAA,CAAC,QAAA,EAAA,EAAS,oBAAK,GAAA,CAAC,UAAA,EAAA,EAAY,GAAG,OAAA,EAAS;AAAA,GAAA,EACrD,CAAA;AAEJ;AAEA,SAAS,QAAA,GAAW;AAClB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,SAAA,EAAU,MAAA,EACjC,8BAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,QAAA,EAAA,GAAA,EAAC,CAAA,EACzB,CAAA;AAAA,oBACA,GAAA,CAAC,cAAA,CAAe,MAAA,EAAf,EAAsB,MAAA,sBAAS,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA8B,QAAA,EAAA,eAAA,EAAa,CAAA,EAAS;AAAA,GAAA,EACrG,CAAA;AAEJ;AAEA,SAAS,UAAA,CAAW;AAAA,EAClB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa;AACf,CAAA,EAAqD;AACnD,EAAA,MAAM,IAAA,GAAO,EAAA,CAAG,iCAAA,EAAmC,UAAA,IAAc,YAAY,CAAA;AAC7E,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,cAAA,CAAe,UAAf,EAAwB,SAAA,EAAW,GAAG,MAAA,EAAQ,IAAI,GAAG,SAAA,EACpD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAsB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC5B,WAAW,MAAA,oBACV,GAAA;AAAA,QAAC,cAAA,CAAe,MAAA;AAAA,QAAf;AAAA,UACC,SAAA,EAAW,MAAA;AAAA,UACX,UAAA;AAAA,UACA,aAAA;AAAA,UACA,SAAA,EAAW;AAAA;AAAA;AACb,KAAA,EAEJ,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA,CAAe,MAAA;AAAA,MAAf;AAAA,QACC,MAAA;AAAA,QAEA,SAAA,EAAW,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,QAAA;AAAA,QAC9C,SAAA;AAAA,QACA,SAAA,EAAW;AAAA;AAAA;AACb,GAAA,EACF,CAAA;AAEJ;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"latency-card.cjs.js","sources":["../../../../src/domains/metrics/components/latency-card.tsx"],"sourcesContent":["import { EntityType } from '@mastra/core/observability';\nimport { useState } from 'react';\nimport type { TimeRange } from '../drilldown';\nimport { useMetricsFilters } from '../hooks/use-metrics-filters';\nimport type { LatencyEntity } from '../hooks/use-metrics-latency';\nimport { useMetricsLatency } from '../hooks/use-metrics-latency';\nimport { EDGE_BUCKET_AXIS } from '../lib/chart-axis';\nimport { CHART_COLORS } from '../lib/chart-colors';\nimport { formatAxisDuration, formatDuration } from '../lib/chart-format';\nimport { bucketPlan, bucketWindow, intervalHours } from '../lib/metrics-buckets';\nimport { OpenInTracesButton } from './card-action-buttons';\nimport { ChartArea } from './chart-area';\nimport { ChartCard } from './chart-card';\nimport { ChartCardError } from './chart-card-error';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChart, MetricsLineChartLegend } from '@/ds/components/MetricsLineChart';\n\nconst ROOT_ENTITY: Record<LatencyEntity, EntityType> = {\n  agents: EntityType.AGENT,\n  workflows: EntityType.WORKFLOW_RUN,\n  tools: EntityType.TOOL,\n};\n\nfunction seriesFor(entity: LatencyEntity): MetricsLineChartSeries[] {\n  return [\n    { dataKey: `${entity}P50`, label: 'P50', color: CHART_COLORS.sky },\n    { dataKey: `${entity}P95`, label: 'P95', color: CHART_COLORS.green, emphasis: true },\n  ];\n}\n\nconst EMPTY_NOUN: Record<LatencyEntity, string> = {\n  agents: 'agent runs',\n  workflows: 'workflow runs',\n  tools: 'tool calls',\n};\n\n/** P50 and P95 durations of agent runs, workflow runs or tool calls; a point opens its traces. */\nexport type LatencyCardProps = {\n  /** Called from the \"View in Traces\" button with the entity type of the open tab. */\n  onViewTraces?: (entityType: EntityType) => void;\n  /** Called with the time range of the clicked bar or point. */\n  onTimeRangeClick?: (range: TimeRange) => void;\n};\n\nexport function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps) {\n  const [entity, setEntity] = useState<LatencyEntity>('agents');\n  const { data = [], isLoading, isError, isPlaceholderData } = useMetricsLatency();\n  const { timestamp } = useMetricsFilters();\n  // The latency chart keeps the API's 1h or 1d buckets, so a point opens that window.\n  const step = intervalHours(bucketPlan(timestamp.start, timestamp.end).interval);\n  const series = seriesFor(entity);\n  const peak = Math.max(0, ...data.map(b => b[`${entity}P95`] ?? 0));\n\n  const layout = {\n    title: 'Latency',\n    description: 'Duration percentiles.',\n    actions: onViewTraces && <OpenInTracesButton onClick={() => onViewTraces(ROOT_ENTITY[entity])} />,\n    toolbar: (\n      <MetricsCard.Toolbar>\n        <MetricsLineChartLegend series={series} />\n        <MetricsCard.Tabs<LatencyEntity> value={entity} onValueChange={setEntity}>\n          <MetricsCard.Tab value=\"agents\">Agents</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"workflows\">Workflows</MetricsCard.Tab>\n          <MetricsCard.Tab value=\"tools\">Tools</MetricsCard.Tab>\n        </MetricsCard.Tabs>\n      </MetricsCard.Toolbar>\n    ),\n  };\n\n  if (isError) {\n    return (\n      <ChartCard {...layout}>\n        <ChartCardError />\n      </ChartCard>\n    );\n  }\n\n  return (\n    <ChartCard\n      {...layout}\n      summary={\n        <MetricsCard.Summary value={peak > 0 ? formatDuration(peak) : '—'} label=\"peak P95\" isLoading={isLoading} />\n      }\n      isUpdating={isPlaceholderData}\n    >\n      <ChartArea isEmpty={!isLoading && peak === 0} emptyMessage={`No ${EMPTY_NOUN[entity]} in this range.`}>\n        <MetricsLineChart\n          data={data}\n          series={series}\n          height=\"fill\"\n          xLabels=\"edges\"\n          showLegend={false}\n          showYAxis={false}\n          valueFormatter={formatDuration}\n          axisFormatter={formatAxisDuration}\n          onBucketClick={onTimeRangeClick && (row => onTimeRangeClick(bucketWindow(Number(row.ts), step)))}\n          isLoading={isLoading}\n          {...EDGE_BUCKET_AXIS}\n        />\n      </ChartArea>\n    </ChartCard>\n  );\n}\n"],"names":["EntityType","CHART_COLORS","useState","useMetricsLatency","useMetricsFilters","intervalHours","bucketPlan","jsx","OpenInTracesButton","jsxs","MetricsCard","MetricsLineChartLegend","ChartCard","ChartCardError","formatDuration","ChartArea","MetricsLineChart","formatAxisDuration","bucketWindow","EDGE_BUCKET_AXIS"],"mappings":"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"}