@mastra/playground-ui 58.0.0 → 59.0.0-alpha.1

package/dist/domains/metrics/components/traces-volume-card-view.cjs.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const horizontalBars = require('../../../horizontal-bars-BkVi2dEb.cjs');
-const metricsCard = require('../../../metrics-card-DCCHIG-z.cjs');
+const metricsCard = require('../../../metrics-card-DzcVJTAN.cjs');
 const tabsContent = require('../../../tabs-content-DlCJoQUW.cjs');
 const tabsRoot = require('../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../tabs-tab-DFmRMdi3.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
+const utils_cost = require('../../../utils/cost.cjs.js');
 
 function VolumeBars({
   data,
@@ -42,7 +43,7 @@ function VolumeBars({
         { label: "Errors", color: domains_metrics_components_metricsUtils.CHART_COLORS.pink }
       ],
       maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
-      fmt: domains_metrics_components_metricsUtils.formatCompact
+      fmt: utils_cost.formatCompactNumber
     }
   );
 }
@@ -64,7 +65,7 @@ function TracesVolumeCardView({
   return /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(metricsCard.MetricsCard.TopBar, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
-      hasData && /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: domains_metrics_components_metricsUtils.formatCompact(total), label: "Total runs" }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Summary, { value: utils_cost.formatCompactNumber(total), label: "Total runs" }),
       renderedActions ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Actions, { children: renderedActions }) : null
     ] }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(
@@ -80,7 +81,7 @@ function TracesVolumeCardView({
             /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "workflows", children: "Workflows" }),
             /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "tools", children: "Tools" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "agents", className: "pt-3", children: data.agentData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             VolumeBars,
             {
               data: data.agentData,
@@ -89,7 +90,7 @@ function TracesVolumeCardView({
               LinkComponent
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No agent data yet" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "workflows", className: "pt-3", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             VolumeBars,
             {
               data: data.workflowData,
@@ -98,7 +99,7 @@ function TracesVolumeCardView({
               LinkComponent
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(metricsCard.MetricsCard.NoData, { message: "No workflow data yet" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "tools", className: "pt-3", children: data.toolData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             VolumeBars,
             {
               data: data.toolData,

package/dist/domains/metrics/components/traces-volume-card-view.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"traces-volume-card-view.cjs.js","sources":["../../../../src/domains/metrics/components/traces-volume-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { VolumeRow } from '../hooks/use-trace-volume-metrics';\nimport { CHART_COLORS, formatCompact } from './metrics-utils';\n\nexport type VolumeTab = 'agents' | 'workflows' | 'tools';\n\nfunction VolumeBars({\n  data,\n  rowHrefs,\n  errorHrefs,\n  LinkComponent,\n}: {\n  data: VolumeRow[];\n  rowHrefs?: (row: VolumeRow) => string | undefined;\n  errorHrefs?: (row: VolumeRow) => string | undefined;\n  LinkComponent?: LinkComponent;\n}) {\n  return (\n    <HorizontalBars\n      LinkComponent={LinkComponent}\n      data={data.map(d => {\n        const errorHref = errorHrefs?.(d);\n        const rowHref = rowHrefs?.(d);\n        // HorizontalBars ignores per-segment `hrefs` whenever a row-level\n        // `href` is set (to avoid nested anchors). When we want the Errors\n        // segment to drill somewhere different from the rest of the row,\n        // drop the row-level link and split navigation across segments\n        // instead so each target is reachable.\n        if (errorHref) {\n          return {\n            name: d.name,\n            values: [d.completed, d.errors],\n            hrefs: [rowHref, errorHref],\n          };\n        }\n        return {\n          name: d.name,\n          values: [d.completed, d.errors],\n          href: rowHref,\n        };\n      })}\n      segments={[\n        { label: 'Completed', color: CHART_COLORS.blueDark },\n        { label: 'Errors', color: CHART_COLORS.pink },\n      ]}\n      maxVal={Math.max(...data.map(d => d.completed + d.errors))}\n      fmt={formatCompact}\n    />\n  );\n}\n\nexport interface TracesVolumeCardViewProps {\n  data: { agentData: VolumeRow[]; workflowData: VolumeRow[]; toolData: VolumeRow[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns href for clicking a whole bar row. */\n  getRowHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /** Optional drilldown: returns href for clicking the \"Errors\" segment of a bar. */\n  getErrorSegmentHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /**\n   * Optional slot for top-bar action buttons.\n   * Pass a function to receive the active tab so actions can scope themselves to the current entity type.\n   */\n  actions?: ReactNode | ((tab: VolumeTab) => ReactNode);\n  /** Override how drilldown links are rendered (e.g. router-aware adapter). Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\nexport function TracesVolumeCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  getErrorSegmentHref,\n  actions,\n  LinkComponent,\n}: TracesVolumeCardViewProps) {\n  const [activeTab, setActiveTab] = useState<VolumeTab>('agents');\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const total = data\n    ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0)\n    : 0;\n\n  const tabRowHrefs = (tab: VolumeTab) => (getRowHref ? (row: VolumeRow) => getRowHref(tab, row) : undefined);\n  const tabErrorHrefs = (tab: VolumeTab) =>\n    getErrorSegmentHref ? (row: VolumeRow) => getErrorSegmentHref(tab, row) : undefined;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Trace Volume\" description=\"Runs and call counts.\" />\n        {hasData && <MetricsCard.Summary value={formatCompact(total)} label=\"Total runs\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load trace volume data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No trace volume data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={setActiveTab}\n              defaultTab=\"agents\"\n              className=\"grid h-full grid-rows-[auto_1fr] overflow-y-auto\"\n            >\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\">\n                {data.agentData.length > 0 ? (\n                  <VolumeBars\n                    data={data.agentData}\n                    rowHrefs={tabRowHrefs('agents')}\n                    errorHrefs={tabErrorHrefs('agents')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No agent data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"workflows\">\n                {data.workflowData.length > 0 ? (\n                  <VolumeBars\n                    data={data.workflowData}\n                    rowHrefs={tabRowHrefs('workflows')}\n                    errorHrefs={tabErrorHrefs('workflows')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No workflow data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"tools\">\n                {data.toolData.length > 0 ? (\n                  <VolumeBars\n                    data={data.toolData}\n                    rowHrefs={tabRowHrefs('tools')}\n                    errorHrefs={tabErrorHrefs('tools')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No tool data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":["jsx","HorizontalBars","CHART_COLORS","formatCompact","useState","MetricsCard","jsxs","Tabs","TabList","Tab","TabContent"],"mappings":"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"}
+{"version":3,"file":"traces-volume-card-view.cjs.js","sources":["../../../../src/domains/metrics/components/traces-volume-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { VolumeRow } from '../hooks/use-trace-volume-metrics';\nimport { CHART_COLORS } from './metrics-utils';\nimport { formatCompactNumber } from '@/lib/cost';\n\nexport type VolumeTab = 'agents' | 'workflows' | 'tools';\n\nfunction VolumeBars({\n  data,\n  rowHrefs,\n  errorHrefs,\n  LinkComponent,\n}: {\n  data: VolumeRow[];\n  rowHrefs?: (row: VolumeRow) => string | undefined;\n  errorHrefs?: (row: VolumeRow) => string | undefined;\n  LinkComponent?: LinkComponent;\n}) {\n  return (\n    <HorizontalBars\n      LinkComponent={LinkComponent}\n      data={data.map(d => {\n        const errorHref = errorHrefs?.(d);\n        const rowHref = rowHrefs?.(d);\n        // HorizontalBars ignores per-segment `hrefs` whenever a row-level\n        // `href` is set (to avoid nested anchors). When we want the Errors\n        // segment to drill somewhere different from the rest of the row,\n        // drop the row-level link and split navigation across segments\n        // instead so each target is reachable.\n        if (errorHref) {\n          return {\n            name: d.name,\n            values: [d.completed, d.errors],\n            hrefs: [rowHref, errorHref],\n          };\n        }\n        return {\n          name: d.name,\n          values: [d.completed, d.errors],\n          href: rowHref,\n        };\n      })}\n      segments={[\n        { label: 'Completed', color: CHART_COLORS.blueDark },\n        { label: 'Errors', color: CHART_COLORS.pink },\n      ]}\n      maxVal={Math.max(...data.map(d => d.completed + d.errors))}\n      fmt={formatCompactNumber}\n    />\n  );\n}\n\nexport interface TracesVolumeCardViewProps {\n  data: { agentData: VolumeRow[]; workflowData: VolumeRow[]; toolData: VolumeRow[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns href for clicking a whole bar row. */\n  getRowHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /** Optional drilldown: returns href for clicking the \"Errors\" segment of a bar. */\n  getErrorSegmentHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /**\n   * Optional slot for top-bar action buttons.\n   * Pass a function to receive the active tab so actions can scope themselves to the current entity type.\n   */\n  actions?: ReactNode | ((tab: VolumeTab) => ReactNode);\n  /** Override how drilldown links are rendered (e.g. router-aware adapter). Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\nexport function TracesVolumeCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  getErrorSegmentHref,\n  actions,\n  LinkComponent,\n}: TracesVolumeCardViewProps) {\n  const [activeTab, setActiveTab] = useState<VolumeTab>('agents');\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const total = data\n    ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0)\n    : 0;\n\n  const tabRowHrefs = (tab: VolumeTab) => (getRowHref ? (row: VolumeRow) => getRowHref(tab, row) : undefined);\n  const tabErrorHrefs = (tab: VolumeTab) =>\n    getErrorSegmentHref ? (row: VolumeRow) => getErrorSegmentHref(tab, row) : undefined;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Trace Volume\" description=\"Runs and call counts.\" />\n        {hasData && <MetricsCard.Summary value={formatCompactNumber(total)} label=\"Total runs\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load trace volume data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No trace volume data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={setActiveTab}\n              defaultTab=\"agents\"\n              className=\"grid h-full grid-rows-[auto_1fr] overflow-y-auto\"\n            >\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\" className=\"pt-3\">\n                {data.agentData.length > 0 ? (\n                  <VolumeBars\n                    data={data.agentData}\n                    rowHrefs={tabRowHrefs('agents')}\n                    errorHrefs={tabErrorHrefs('agents')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No agent data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"workflows\" className=\"pt-3\">\n                {data.workflowData.length > 0 ? (\n                  <VolumeBars\n                    data={data.workflowData}\n                    rowHrefs={tabRowHrefs('workflows')}\n                    errorHrefs={tabErrorHrefs('workflows')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No workflow data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"tools\" className=\"pt-3\">\n                {data.toolData.length > 0 ? (\n                  <VolumeBars\n                    data={data.toolData}\n                    rowHrefs={tabRowHrefs('tools')}\n                    errorHrefs={tabErrorHrefs('tools')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No tool data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":["jsx","HorizontalBars","CHART_COLORS","formatCompactNumber","useState","MetricsCard","jsxs","Tabs","TabList","Tab","TabContent"],"mappings":"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"}

package/dist/domains/metrics/components/traces-volume-card-view.es.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { H as HorizontalBars } from '../../../horizontal-bars-nTOFylzc.js';
-import { M as MetricsCard } from '../../../metrics-card-Bzm6m1dy.js';
+import { M as MetricsCard } from '../../../metrics-card-C2RTi5Ew.js';
 import { T as TabContent } from '../../../tabs-content-7ODUUdQ0.js';
 import { a as Tabs, T as TabList } from '../../../tabs-root-UNPxoGhW.js';
 import { T as Tab } from '../../../tabs-tab-DluwCnDF.js';
-import { formatCompact, CHART_COLORS } from './metrics-utils.es.js';
+import { CHART_COLORS } from './metrics-utils.es.js';
+import { formatCompactNumber } from '../../../utils/cost.es.js';
 
 function VolumeBars({
   data,
@@ -38,7 +39,7 @@ function VolumeBars({
         { label: "Errors", color: CHART_COLORS.pink }
       ],
       maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
-      fmt: formatCompact
+      fmt: formatCompactNumber
     }
   );
 }
@@ -60,7 +61,7 @@ function TracesVolumeCardView({
   return /* @__PURE__ */ jsxs(MetricsCard, { children: [
     /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
       /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
-      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(total), label: "Total runs" }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompactNumber(total), label: "Total runs" }),
       renderedActions ? /* @__PURE__ */ jsx(MetricsCard.Actions, { children: renderedActions }) : null
     ] }),
     isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxs(
@@ -76,7 +77,7 @@ function TracesVolumeCardView({
             /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
             /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
           ] }),
-          /* @__PURE__ */ jsx(TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TabContent, { value: "agents", className: "pt-3", children: data.agentData.length > 0 ? /* @__PURE__ */ jsx(
             VolumeBars,
             {
               data: data.agentData,
@@ -85,7 +86,7 @@ function TracesVolumeCardView({
               LinkComponent
             }
           ) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No agent data yet" }) }),
-          /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TabContent, { value: "workflows", className: "pt-3", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsx(
             VolumeBars,
             {
               data: data.workflowData,
@@ -94,7 +95,7 @@ function TracesVolumeCardView({
               LinkComponent
             }
           ) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No workflow data yet" }) }),
-          /* @__PURE__ */ jsx(TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TabContent, { value: "tools", className: "pt-3", children: data.toolData.length > 0 ? /* @__PURE__ */ jsx(
             VolumeBars,
             {
               data: data.toolData,

package/dist/domains/metrics/components/traces-volume-card-view.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"traces-volume-card-view.es.js","sources":["../../../../src/domains/metrics/components/traces-volume-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { VolumeRow } from '../hooks/use-trace-volume-metrics';\nimport { CHART_COLORS, formatCompact } from './metrics-utils';\n\nexport type VolumeTab = 'agents' | 'workflows' | 'tools';\n\nfunction VolumeBars({\n  data,\n  rowHrefs,\n  errorHrefs,\n  LinkComponent,\n}: {\n  data: VolumeRow[];\n  rowHrefs?: (row: VolumeRow) => string | undefined;\n  errorHrefs?: (row: VolumeRow) => string | undefined;\n  LinkComponent?: LinkComponent;\n}) {\n  return (\n    <HorizontalBars\n      LinkComponent={LinkComponent}\n      data={data.map(d => {\n        const errorHref = errorHrefs?.(d);\n        const rowHref = rowHrefs?.(d);\n        // HorizontalBars ignores per-segment `hrefs` whenever a row-level\n        // `href` is set (to avoid nested anchors). When we want the Errors\n        // segment to drill somewhere different from the rest of the row,\n        // drop the row-level link and split navigation across segments\n        // instead so each target is reachable.\n        if (errorHref) {\n          return {\n            name: d.name,\n            values: [d.completed, d.errors],\n            hrefs: [rowHref, errorHref],\n          };\n        }\n        return {\n          name: d.name,\n          values: [d.completed, d.errors],\n          href: rowHref,\n        };\n      })}\n      segments={[\n        { label: 'Completed', color: CHART_COLORS.blueDark },\n        { label: 'Errors', color: CHART_COLORS.pink },\n      ]}\n      maxVal={Math.max(...data.map(d => d.completed + d.errors))}\n      fmt={formatCompact}\n    />\n  );\n}\n\nexport interface TracesVolumeCardViewProps {\n  data: { agentData: VolumeRow[]; workflowData: VolumeRow[]; toolData: VolumeRow[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns href for clicking a whole bar row. */\n  getRowHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /** Optional drilldown: returns href for clicking the \"Errors\" segment of a bar. */\n  getErrorSegmentHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /**\n   * Optional slot for top-bar action buttons.\n   * Pass a function to receive the active tab so actions can scope themselves to the current entity type.\n   */\n  actions?: ReactNode | ((tab: VolumeTab) => ReactNode);\n  /** Override how drilldown links are rendered (e.g. router-aware adapter). Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\nexport function TracesVolumeCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  getErrorSegmentHref,\n  actions,\n  LinkComponent,\n}: TracesVolumeCardViewProps) {\n  const [activeTab, setActiveTab] = useState<VolumeTab>('agents');\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const total = data\n    ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0)\n    : 0;\n\n  const tabRowHrefs = (tab: VolumeTab) => (getRowHref ? (row: VolumeRow) => getRowHref(tab, row) : undefined);\n  const tabErrorHrefs = (tab: VolumeTab) =>\n    getErrorSegmentHref ? (row: VolumeRow) => getErrorSegmentHref(tab, row) : undefined;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Trace Volume\" description=\"Runs and call counts.\" />\n        {hasData && <MetricsCard.Summary value={formatCompact(total)} label=\"Total runs\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load trace volume data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No trace volume data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={setActiveTab}\n              defaultTab=\"agents\"\n              className=\"grid h-full grid-rows-[auto_1fr] overflow-y-auto\"\n            >\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\">\n                {data.agentData.length > 0 ? (\n                  <VolumeBars\n                    data={data.agentData}\n                    rowHrefs={tabRowHrefs('agents')}\n                    errorHrefs={tabErrorHrefs('agents')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No agent data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"workflows\">\n                {data.workflowData.length > 0 ? (\n                  <VolumeBars\n                    data={data.workflowData}\n                    rowHrefs={tabRowHrefs('workflows')}\n                    errorHrefs={tabErrorHrefs('workflows')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No workflow data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"tools\">\n                {data.toolData.length > 0 ? (\n                  <VolumeBars\n                    data={data.toolData}\n                    rowHrefs={tabRowHrefs('tools')}\n                    errorHrefs={tabErrorHrefs('tools')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No tool data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAcA,SAAS,UAAA,CAAW;AAAA,EAClB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,IAAA,EAAM,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK;AAClB,QAAA,MAAM,SAAA,GAAY,aAAa,CAAC,CAAA;AAChC,QAAA,MAAM,OAAA,GAAU,WAAW,CAAC,CAAA;AAM5B,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,OAAO;AAAA,YACL,MAAM,CAAA,CAAE,IAAA;AAAA,YACR,MAAA,EAAQ,CAAC,CAAA,CAAE,SAAA,EAAW,EAAE,MAAM,CAAA;AAAA,YAC9B,KAAA,EAAO,CAAC,OAAA,EAAS,SAAS;AAAA,WAC5B;AAAA,QACF;AACA,QAAA,OAAO;AAAA,UACL,MAAM,CAAA,CAAE,IAAA;AAAA,UACR,MAAA,EAAQ,CAAC,CAAA,CAAE,SAAA,EAAW,EAAE,MAAM,CAAA;AAAA,UAC9B,IAAA,EAAM;AAAA,SACR;AAAA,MACF,CAAC,CAAA;AAAA,MACD,QAAA,EAAU;AAAA,QACR,EAAE,KAAA,EAAO,WAAA,EAAa,KAAA,EAAO,aAAa,QAAA,EAAS;AAAA,QACnD,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,aAAa,IAAA;AAAK,OAC9C;AAAA,MACA,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,MAAM,CAAC,CAAA;AAAA,MACzD,GAAA,EAAK;AAAA;AAAA,GACP;AAEJ;AAmBO,SAAS,oBAAA,CAAqB;AAAA,EACnC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,mBAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAA8B;AAC5B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAoB,QAAQ,CAAA;AAC9D,EAAA,MAAM,kBAAkB,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,CAAQ,SAAS,CAAA,GAAI,OAAA;AAC7E,EAAA,MAAM,OAAA,GAAU,CAAC,CAAC,IAAA,KAAS,KAAK,SAAA,CAAU,MAAA,GAAS,CAAA,IAAK,IAAA,CAAK,YAAA,CAAa,MAAA,GAAS,CAAA,IAAK,IAAA,CAAK,SAAS,MAAA,GAAS,CAAA,CAAA;AAC/G,EAAA,MAAM,KAAA,GAAQ,OACV,CAAC,GAAG,KAAK,SAAA,EAAW,GAAG,IAAA,CAAK,YAAA,EAAc,GAAG,IAAA,CAAK,QAAQ,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,EAAE,SAAA,GAAY,CAAA,CAAE,MAAA,EAAQ,CAAC,CAAA,GAC1G,CAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,CAAC,GAAA,KAAoB,UAAA,GAAa,CAAC,GAAA,KAAmB,UAAA,CAAW,GAAA,EAAK,GAAG,CAAA,GAAI,MAAA;AACjG,EAAA,MAAM,aAAA,GAAgB,CAAC,GAAA,KACrB,mBAAA,GAAsB,CAAC,GAAA,KAAmB,mBAAA,CAAoB,GAAA,EAAK,GAAG,CAAA,GAAI,MAAA;AAE5E,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,WAAA,CAAY,QAAZ,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAY,mBAAA,EAAZ,EAAgC,KAAA,EAAM,cAAA,EAAe,aAAY,uBAAA,EAAwB,CAAA;AAAA,MACzF,OAAA,oBAAW,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,OAAO,aAAA,CAAc,KAAK,CAAA,EAAG,KAAA,EAAM,YAAA,EAAa,CAAA;AAAA,MAChF,kCAAkB,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAqB,2BAAgB,CAAA,GAAyB;AAAA,KAAA,EACpF,CAAA;AAAA,IACC,SAAA,mBACC,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,CAAA,GACnB,OAAA,mBACF,GAAA,CAAC,WAAA,CAAY,KAAA,EAAZ,EAAkB,OAAA,EAAQ,kCAAA,EAAmC,oBAE9D,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EACE,QAAA,EAAA,CAAC,OAAA,mBACA,GAAA,CAAC,WAAA,CAAY,MAAA,EAAZ,EAAmB,OAAA,EAAQ,0BAAA,EAA2B,CAAA,mBAEvD,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,SAAA;AAAA,QACP,aAAA,EAAe,YAAA;AAAA,QACf,UAAA,EAAW,QAAA;AAAA,QACX,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,QAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,4BAC1B,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,WAAA,EAAY,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,4BAChC,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,OAAA,EAAQ,QAAA,EAAA,OAAA,EAAK;AAAA,WAAA,EAC1B,CAAA;AAAA,8BACC,UAAA,EAAA,EAAW,KAAA,EAAM,UACf,QAAA,EAAA,IAAA,CAAK,SAAA,CAAU,SAAS,CAAA,mBACvB,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,SAAA;AAAA,cACX,QAAA,EAAU,YAAY,QAAQ,CAAA;AAAA,cAC9B,UAAA,EAAY,cAAc,QAAQ,CAAA;AAAA,cAClC;AAAA;AAAA,8BAGF,GAAA,CAAC,WAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,qBAAoB,CAAA,EAEpD,CAAA;AAAA,8BACC,UAAA,EAAA,EAAW,KAAA,EAAM,aACf,QAAA,EAAA,IAAA,CAAK,YAAA,CAAa,SAAS,CAAA,mBAC1B,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,YAAA;AAAA,cACX,QAAA,EAAU,YAAY,WAAW,CAAA;AAAA,cACjC,UAAA,EAAY,cAAc,WAAW,CAAA;AAAA,cACrC;AAAA;AAAA,8BAGF,GAAA,CAAC,WAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,wBAAuB,CAAA,EAEvD,CAAA;AAAA,8BACC,UAAA,EAAA,EAAW,KAAA,EAAM,SACf,QAAA,EAAA,IAAA,CAAK,QAAA,CAAS,SAAS,CAAA,mBACtB,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,QAAA;AAAA,cACX,QAAA,EAAU,YAAY,OAAO,CAAA;AAAA,cAC7B,UAAA,EAAY,cAAc,OAAO,CAAA;AAAA,cACjC;AAAA;AAAA,8BAGF,GAAA,CAAC,WAAA,CAAY,QAAZ,EAAmB,OAAA,EAAQ,oBAAmB,CAAA,EAEnD;AAAA;AAAA;AAAA,KACF,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"traces-volume-card-view.es.js","sources":["../../../../src/domains/metrics/components/traces-volume-card-view.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { HorizontalBars } from '../../../ds/components/HorizontalBars/horizontal-bars';\nimport { MetricsCard } from '../../../ds/components/MetricsCard/metrics-card';\nimport { TabContent } from '../../../ds/components/Tabs/tabs-content';\nimport { TabList } from '../../../ds/components/Tabs/tabs-list';\nimport { Tabs } from '../../../ds/components/Tabs/tabs-root';\nimport { Tab } from '../../../ds/components/Tabs/tabs-tab';\nimport type { LinkComponent } from '../../../ds/types/link-component';\nimport type { VolumeRow } from '../hooks/use-trace-volume-metrics';\nimport { CHART_COLORS } from './metrics-utils';\nimport { formatCompactNumber } from '@/lib/cost';\n\nexport type VolumeTab = 'agents' | 'workflows' | 'tools';\n\nfunction VolumeBars({\n  data,\n  rowHrefs,\n  errorHrefs,\n  LinkComponent,\n}: {\n  data: VolumeRow[];\n  rowHrefs?: (row: VolumeRow) => string | undefined;\n  errorHrefs?: (row: VolumeRow) => string | undefined;\n  LinkComponent?: LinkComponent;\n}) {\n  return (\n    <HorizontalBars\n      LinkComponent={LinkComponent}\n      data={data.map(d => {\n        const errorHref = errorHrefs?.(d);\n        const rowHref = rowHrefs?.(d);\n        // HorizontalBars ignores per-segment `hrefs` whenever a row-level\n        // `href` is set (to avoid nested anchors). When we want the Errors\n        // segment to drill somewhere different from the rest of the row,\n        // drop the row-level link and split navigation across segments\n        // instead so each target is reachable.\n        if (errorHref) {\n          return {\n            name: d.name,\n            values: [d.completed, d.errors],\n            hrefs: [rowHref, errorHref],\n          };\n        }\n        return {\n          name: d.name,\n          values: [d.completed, d.errors],\n          href: rowHref,\n        };\n      })}\n      segments={[\n        { label: 'Completed', color: CHART_COLORS.blueDark },\n        { label: 'Errors', color: CHART_COLORS.pink },\n      ]}\n      maxVal={Math.max(...data.map(d => d.completed + d.errors))}\n      fmt={formatCompactNumber}\n    />\n  );\n}\n\nexport interface TracesVolumeCardViewProps {\n  data: { agentData: VolumeRow[]; workflowData: VolumeRow[]; toolData: VolumeRow[] } | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  /** Optional drilldown: returns href for clicking a whole bar row. */\n  getRowHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /** Optional drilldown: returns href for clicking the \"Errors\" segment of a bar. */\n  getErrorSegmentHref?: (tab: VolumeTab, row: VolumeRow) => string | undefined;\n  /**\n   * Optional slot for top-bar action buttons.\n   * Pass a function to receive the active tab so actions can scope themselves to the current entity type.\n   */\n  actions?: ReactNode | ((tab: VolumeTab) => ReactNode);\n  /** Override how drilldown links are rendered (e.g. router-aware adapter). Defaults to `<a>`. */\n  LinkComponent?: LinkComponent;\n}\n\nexport function TracesVolumeCardView({\n  data,\n  isLoading,\n  isError,\n  getRowHref,\n  getErrorSegmentHref,\n  actions,\n  LinkComponent,\n}: TracesVolumeCardViewProps) {\n  const [activeTab, setActiveTab] = useState<VolumeTab>('agents');\n  const renderedActions = typeof actions === 'function' ? actions(activeTab) : actions;\n  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);\n  const total = data\n    ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0)\n    : 0;\n\n  const tabRowHrefs = (tab: VolumeTab) => (getRowHref ? (row: VolumeRow) => getRowHref(tab, row) : undefined);\n  const tabErrorHrefs = (tab: VolumeTab) =>\n    getErrorSegmentHref ? (row: VolumeRow) => getErrorSegmentHref(tab, row) : undefined;\n\n  return (\n    <MetricsCard>\n      <MetricsCard.TopBar>\n        <MetricsCard.TitleAndDescription title=\"Trace Volume\" description=\"Runs and call counts.\" />\n        {hasData && <MetricsCard.Summary value={formatCompactNumber(total)} label=\"Total runs\" />}\n        {renderedActions ? <MetricsCard.Actions>{renderedActions}</MetricsCard.Actions> : null}\n      </MetricsCard.TopBar>\n      {isLoading ? (\n        <MetricsCard.Loading />\n      ) : isError ? (\n        <MetricsCard.Error message=\"Failed to load trace volume data\" />\n      ) : (\n        <MetricsCard.Content>\n          {!hasData ? (\n            <MetricsCard.NoData message=\"No trace volume data yet\" />\n          ) : (\n            <Tabs\n              value={activeTab}\n              onValueChange={setActiveTab}\n              defaultTab=\"agents\"\n              className=\"grid h-full grid-rows-[auto_1fr] overflow-y-auto\"\n            >\n              <TabList>\n                <Tab value=\"agents\">Agents</Tab>\n                <Tab value=\"workflows\">Workflows</Tab>\n                <Tab value=\"tools\">Tools</Tab>\n              </TabList>\n              <TabContent value=\"agents\" className=\"pt-3\">\n                {data.agentData.length > 0 ? (\n                  <VolumeBars\n                    data={data.agentData}\n                    rowHrefs={tabRowHrefs('agents')}\n                    errorHrefs={tabErrorHrefs('agents')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No agent data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"workflows\" className=\"pt-3\">\n                {data.workflowData.length > 0 ? (\n                  <VolumeBars\n                    data={data.workflowData}\n                    rowHrefs={tabRowHrefs('workflows')}\n                    errorHrefs={tabErrorHrefs('workflows')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No workflow data yet\" />\n                )}\n              </TabContent>\n              <TabContent value=\"tools\" className=\"pt-3\">\n                {data.toolData.length > 0 ? (\n                  <VolumeBars\n                    data={data.toolData}\n                    rowHrefs={tabRowHrefs('tools')}\n                    errorHrefs={tabErrorHrefs('tools')}\n                    LinkComponent={LinkComponent}\n                  />\n                ) : (\n                  <MetricsCard.NoData message=\"No tool data yet\" />\n                )}\n              </TabContent>\n            </Tabs>\n          )}\n        </MetricsCard.Content>\n      )}\n    </MetricsCard>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -19,8 +19,6 @@ const domains_metrics_components_tracesVolumeCardView = require('./components/tr
 
 exports.DateRangeSelector = domains_metrics_components_dateRangeSelector.DateRangeSelector;
 exports.CHART_COLORS = domains_metrics_components_metricsUtils.CHART_COLORS;
-exports.formatCompact = domains_metrics_components_metricsUtils.formatCompact;
-exports.formatCost = domains_metrics_components_metricsUtils.formatCost;
 exports.BarListContent = domains_metrics_components_barList.BarListContent;
 exports.StackedRunsBars = domains_metrics_components_barList.StackedRunsBars;
 exports.OpenErrorsInLogsButton = domains_metrics_components_cardActionButtons.OpenErrorsInLogsButton;

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

@@ -1 +1 @@
-{"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 export { DateRangeSelector } from './components/date-range-selector.es.js';
-export { CHART_COLORS, formatCompact, formatCost } from './components/metrics-utils.es.js';
+export { CHART_COLORS } from './components/metrics-utils.es.js';
 export { BarListContent, StackedRunsBars } from './components/bar-list.es.js';
 export { OpenErrorsInLogsButton, OpenInTracesButton } from './components/card-action-buttons.es.js';
 export { KpiCardView } from './components/kpi-card-view.es.js';

package/dist/domains/metrics/hooks/use-latency-metrics.cjs.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('@mastra/react');
 const reactQuery = require('@tanstack/react-query');
+const domains_metrics_metricsInterval = require('../metrics-interval.cjs.js');
 const domains_metrics_hooks_useMetricsFilters = require('./use-metrics-filters.cjs.js');
 
-const LATENCY_INTERVAL = "1h";
-async function fetchPercentiles(client, metricName, filters) {
+async function fetchPercentiles(client, metricName, filters, interval) {
   const res = await client.getMetricPercentiles({
     name: metricName,
     percentiles: [0.5, 0.95],
-    interval: LATENCY_INTERVAL,
+    interval,
     filters
   });
   const p50Series = res.series.find((s) => s.percentile === 0.5);
@@ -22,7 +22,7 @@ async function fetchPercentiles(client, metricName, filters) {
     const ts = new Date(p.timestamp);
     const tsMs = ts.getTime();
     return {
-      time: ts.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }),
+      time: domains_metrics_metricsInterval.formatMetricsBucketLabel(ts, interval),
       tsMs,
       p50: Math.round(p.value),
       p95: Math.round(p95Map.get(tsMs) ?? 0)
@@ -31,20 +31,20 @@ async function fetchPercentiles(client, metricName, filters) {
 }
 function useLatencyMetrics() {
   const client = react.useMastraClient();
-  const { filters, filterKey } = domains_metrics_hooks_useMetricsFilters.useMetricsFilters();
+  const { timestamp, filters, filterKey } = domains_metrics_hooks_useMetricsFilters.useMetricsFilters();
+  const interval = domains_metrics_metricsInterval.chooseMetricsInterval(timestamp);
   return reactQuery.useQuery({
-    queryKey: ["metrics", "latency", filterKey],
+    queryKey: ["metrics", "latency", filterKey, interval],
     queryFn: async () => {
       const [agentData, workflowData, toolData] = await Promise.all([
-        fetchPercentiles(client, "mastra_agent_duration_ms", filters),
-        fetchPercentiles(client, "mastra_workflow_duration_ms", filters),
-        fetchPercentiles(client, "mastra_tool_duration_ms", filters)
+        fetchPercentiles(client, "mastra_agent_duration_ms", filters, interval),
+        fetchPercentiles(client, "mastra_workflow_duration_ms", filters, interval),
+        fetchPercentiles(client, "mastra_tool_duration_ms", filters, interval)
       ]);
-      return { agentData, workflowData, toolData, interval: LATENCY_INTERVAL };
+      return { agentData, workflowData, toolData, interval };
     }
   });
 }
 
-exports.LATENCY_INTERVAL = LATENCY_INTERVAL;
 exports.useLatencyMetrics = useLatencyMetrics;
 //# sourceMappingURL=use-latency-metrics.cjs.js.map

package/dist/domains/metrics/hooks/use-latency-metrics.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latency-metrics.cjs.js","sources":["../../../../src/domains/metrics/hooks/use-latency-metrics.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport { useMetricsFilters } from './use-metrics-filters';\n\nexport interface LatencyPoint {\n  [key: string]: unknown;\n  time: string;\n  /** Raw timestamp (ms since epoch) for the bucket this point represents.\n   *  Used by drilldown clicks to compute a narrow time window. */\n  tsMs: number;\n  p50: number;\n  p95: number;\n}\n\nexport const LATENCY_INTERVAL: '1h' = '1h';\n\nasync function fetchPercentiles(\n  client: ReturnType<typeof useMastraClient>,\n  metricName: string,\n  filters: Record<string, unknown>,\n): Promise<LatencyPoint[]> {\n  const res = await client.getMetricPercentiles({\n    name: metricName,\n    percentiles: [0.5, 0.95],\n    interval: LATENCY_INTERVAL,\n    filters,\n  });\n\n  const p50Series = res.series.find(s => s.percentile === 0.5);\n  const p95Series = res.series.find(s => s.percentile === 0.95);\n\n  if (!p50Series || !p95Series) return [];\n\n  const p95Map = new Map(p95Series.points.map(p => [new Date(p.timestamp).getTime(), p.value]));\n\n  return p50Series.points.map(p => {\n    const ts = new Date(p.timestamp);\n    const tsMs = ts.getTime();\n    return {\n      time: ts.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }),\n      tsMs,\n      p50: Math.round(p.value),\n      p95: Math.round(p95Map.get(tsMs) ?? 0),\n    };\n  });\n}\n\nexport function useLatencyMetrics() {\n  const client = useMastraClient();\n  const { filters, filterKey } = useMetricsFilters();\n\n  return useQuery({\n    queryKey: ['metrics', 'latency', filterKey],\n    queryFn: async () => {\n      const [agentData, workflowData, toolData] = await Promise.all([\n        fetchPercentiles(client, 'mastra_agent_duration_ms', filters),\n        fetchPercentiles(client, 'mastra_workflow_duration_ms', filters),\n        fetchPercentiles(client, 'mastra_tool_duration_ms', filters),\n      ]);\n      return { agentData, workflowData, toolData, interval: LATENCY_INTERVAL };\n    },\n  });\n}\n"],"names":["useMastraClient","useMetricsFilters","useQuery"],"mappings":";;;;;;;;AAcO,MAAM,gBAAA,GAAyB;AAEtC,eAAe,gBAAA,CACb,MAAA,EACA,UAAA,EACA,OAAA,EACyB;AACzB,EAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,oBAAA,CAAqB;AAAA,IAC5C,IAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAa,CAAC,GAAA,EAAK,IAAI,CAAA;AAAA,IACvB,QAAA,EAAU,gBAAA;AAAA,IACV;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,GAAG,CAAA;AAC3D,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,IAAI,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,SAAA,SAAkB,EAAC;AAEtC,EAAA,MAAM,SAAS,IAAI,GAAA,CAAI,UAAU,MAAA,CAAO,GAAA,CAAI,OAAK,CAAC,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA,CAAE,OAAA,IAAW,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAE5F,EAAA,OAAO,SAAA,CAAU,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AAC/B,IAAA,MAAM,EAAA,GAAK,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA;AAC/B,IAAA,MAAM,IAAA,GAAO,GAAG,OAAA,EAAQ;AACxB,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,EAAA,CAAG,kBAAA,CAAmB,OAAA,EAAS,EAAE,IAAA,EAAM,SAAA,EAAW,MAAA,EAAQ,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,CAAA;AAAA,MAC1F,IAAA;AAAA,MACA,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,CAAA,CAAE,KAAK,CAAA;AAAA,MACvB,KAAK,IAAA,CAAK,KAAA,CAAM,OAAO,GAAA,CAAI,IAAI,KAAK,CAAC;AAAA,KACvC;AAAA,EACF,CAAC,CAAA;AACH;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAU,GAAIC,yDAAA,EAAkB;AAEjD,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,SAAA,EAAW,SAAA,EAAW,SAAS,CAAA;AAAA,IAC1C,SAAS,YAAY;AACnB,MAAA,MAAM,CAAC,SAAA,EAAW,YAAA,EAAc,QAAQ,CAAA,GAAI,MAAM,QAAQ,GAAA,CAAI;AAAA,QAC5D,gBAAA,CAAiB,MAAA,EAAQ,0BAAA,EAA4B,OAAO,CAAA;AAAA,QAC5D,gBAAA,CAAiB,MAAA,EAAQ,6BAAA,EAA+B,OAAO,CAAA;AAAA,QAC/D,gBAAA,CAAiB,MAAA,EAAQ,yBAAA,EAA2B,OAAO;AAAA,OAC5D,CAAA;AACD,MAAA,OAAO,EAAE,SAAA,EAAW,YAAA,EAAc,QAAA,EAAU,UAAU,gBAAA,EAAiB;AAAA,IACzE;AAAA,GACD,CAAA;AACH;;;;;"}
+{"version":3,"file":"use-latency-metrics.cjs.js","sources":["../../../../src/domains/metrics/hooks/use-latency-metrics.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport { chooseMetricsInterval, formatMetricsBucketLabel } from '../metrics-interval';\nimport type { MetricsInterval } from '../metrics-interval';\nimport { useMetricsFilters } from './use-metrics-filters';\n\nexport interface LatencyPoint {\n  [key: string]: unknown;\n  time: string;\n  /** Raw timestamp (ms since epoch) for the bucket this point represents.\n   *  Used by drilldown clicks to compute a narrow time window. */\n  tsMs: number;\n  p50: number;\n  p95: number;\n}\n\nasync function fetchPercentiles(\n  client: ReturnType<typeof useMastraClient>,\n  metricName: string,\n  filters: Record<string, unknown>,\n  interval: MetricsInterval,\n): Promise<LatencyPoint[]> {\n  const res = await client.getMetricPercentiles({\n    name: metricName,\n    percentiles: [0.5, 0.95],\n    interval,\n    filters,\n  });\n\n  const p50Series = res.series.find(s => s.percentile === 0.5);\n  const p95Series = res.series.find(s => s.percentile === 0.95);\n\n  if (!p50Series || !p95Series) return [];\n\n  const p95Map = new Map(p95Series.points.map(p => [new Date(p.timestamp).getTime(), p.value]));\n\n  return p50Series.points.map(p => {\n    const ts = new Date(p.timestamp);\n    const tsMs = ts.getTime();\n    return {\n      time: formatMetricsBucketLabel(ts, interval),\n      tsMs,\n      p50: Math.round(p.value),\n      p95: Math.round(p95Map.get(tsMs) ?? 0),\n    };\n  });\n}\n\nexport function useLatencyMetrics() {\n  const client = useMastraClient();\n  const { timestamp, filters, filterKey } = useMetricsFilters();\n  const interval = chooseMetricsInterval(timestamp);\n\n  return useQuery({\n    queryKey: ['metrics', 'latency', filterKey, interval],\n    queryFn: async () => {\n      const [agentData, workflowData, toolData] = await Promise.all([\n        fetchPercentiles(client, 'mastra_agent_duration_ms', filters, interval),\n        fetchPercentiles(client, 'mastra_workflow_duration_ms', filters, interval),\n        fetchPercentiles(client, 'mastra_tool_duration_ms', filters, interval),\n      ]);\n      return { agentData, workflowData, toolData, interval };\n    },\n  });\n}\n"],"names":["formatMetricsBucketLabel","useMastraClient","useMetricsFilters","chooseMetricsInterval","useQuery"],"mappings":";;;;;;;;;AAgBA,eAAe,gBAAA,CACb,MAAA,EACA,UAAA,EACA,OAAA,EACA,QAAA,EACyB;AACzB,EAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,oBAAA,CAAqB;AAAA,IAC5C,IAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAa,CAAC,GAAA,EAAK,IAAI,CAAA;AAAA,IACvB,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,GAAG,CAAA;AAC3D,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,IAAI,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,SAAA,SAAkB,EAAC;AAEtC,EAAA,MAAM,SAAS,IAAI,GAAA,CAAI,UAAU,MAAA,CAAO,GAAA,CAAI,OAAK,CAAC,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA,CAAE,OAAA,IAAW,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAE5F,EAAA,OAAO,SAAA,CAAU,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AAC/B,IAAA,MAAM,EAAA,GAAK,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA;AAC/B,IAAA,MAAM,IAAA,GAAO,GAAG,OAAA,EAAQ;AACxB,IAAA,OAAO;AAAA,MACL,IAAA,EAAMA,wDAAA,CAAyB,EAAA,EAAI,QAAQ,CAAA;AAAA,MAC3C,IAAA;AAAA,MACA,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,CAAA,CAAE,KAAK,CAAA;AAAA,MACvB,KAAK,IAAA,CAAK,KAAA,CAAM,OAAO,GAAA,CAAI,IAAI,KAAK,CAAC;AAAA,KACvC;AAAA,EACF,CAAC,CAAA;AACH;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,SAASC,qBAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,SAAA,KAAcC,yDAAA,EAAkB;AAC5D,EAAA,MAAM,QAAA,GAAWC,sDAAsB,SAAS,CAAA;AAEhD,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,SAAA,EAAW,SAAA,EAAW,WAAW,QAAQ,CAAA;AAAA,IACpD,SAAS,YAAY;AACnB,MAAA,MAAM,CAAC,SAAA,EAAW,YAAA,EAAc,QAAQ,CAAA,GAAI,MAAM,QAAQ,GAAA,CAAI;AAAA,QAC5D,gBAAA,CAAiB,MAAA,EAAQ,0BAAA,EAA4B,OAAA,EAAS,QAAQ,CAAA;AAAA,QACtE,gBAAA,CAAiB,MAAA,EAAQ,6BAAA,EAA+B,OAAA,EAAS,QAAQ,CAAA;AAAA,QACzE,gBAAA,CAAiB,MAAA,EAAQ,yBAAA,EAA2B,OAAA,EAAS,QAAQ;AAAA,OACtE,CAAA;AACD,MAAA,OAAO,EAAE,SAAA,EAAW,YAAA,EAAc,QAAA,EAAU,QAAA,EAAS;AAAA,IACvD;AAAA,GACD,CAAA;AACH;;;;"}

package/dist/domains/metrics/hooks/use-latency-metrics.es.js

@@ -1,13 +1,13 @@
 import { useMastraClient } from '@mastra/react';
 import { useQuery } from '@tanstack/react-query';
+import { chooseMetricsInterval, formatMetricsBucketLabel } from '../metrics-interval.es.js';
 import { useMetricsFilters } from './use-metrics-filters.es.js';
 
-const LATENCY_INTERVAL = "1h";
-async function fetchPercentiles(client, metricName, filters) {
+async function fetchPercentiles(client, metricName, filters, interval) {
   const res = await client.getMetricPercentiles({
     name: metricName,
     percentiles: [0.5, 0.95],
-    interval: LATENCY_INTERVAL,
+    interval,
     filters
   });
   const p50Series = res.series.find((s) => s.percentile === 0.5);
@@ -18,7 +18,7 @@ async function fetchPercentiles(client, metricName, filters) {
     const ts = new Date(p.timestamp);
     const tsMs = ts.getTime();
     return {
-      time: ts.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }),
+      time: formatMetricsBucketLabel(ts, interval),
       tsMs,
       p50: Math.round(p.value),
       p95: Math.round(p95Map.get(tsMs) ?? 0)
@@ -27,19 +27,20 @@ async function fetchPercentiles(client, metricName, filters) {
 }
 function useLatencyMetrics() {
   const client = useMastraClient();
-  const { filters, filterKey } = useMetricsFilters();
+  const { timestamp, filters, filterKey } = useMetricsFilters();
+  const interval = chooseMetricsInterval(timestamp);
   return useQuery({
-    queryKey: ["metrics", "latency", filterKey],
+    queryKey: ["metrics", "latency", filterKey, interval],
     queryFn: async () => {
       const [agentData, workflowData, toolData] = await Promise.all([
-        fetchPercentiles(client, "mastra_agent_duration_ms", filters),
-        fetchPercentiles(client, "mastra_workflow_duration_ms", filters),
-        fetchPercentiles(client, "mastra_tool_duration_ms", filters)
+        fetchPercentiles(client, "mastra_agent_duration_ms", filters, interval),
+        fetchPercentiles(client, "mastra_workflow_duration_ms", filters, interval),
+        fetchPercentiles(client, "mastra_tool_duration_ms", filters, interval)
       ]);
-      return { agentData, workflowData, toolData, interval: LATENCY_INTERVAL };
+      return { agentData, workflowData, toolData, interval };
     }
   });
 }
 
-export { LATENCY_INTERVAL, useLatencyMetrics };
+export { useLatencyMetrics };
 //# sourceMappingURL=use-latency-metrics.es.js.map

package/dist/domains/metrics/hooks/use-latency-metrics.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latency-metrics.es.js","sources":["../../../../src/domains/metrics/hooks/use-latency-metrics.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport { useMetricsFilters } from './use-metrics-filters';\n\nexport interface LatencyPoint {\n  [key: string]: unknown;\n  time: string;\n  /** Raw timestamp (ms since epoch) for the bucket this point represents.\n   *  Used by drilldown clicks to compute a narrow time window. */\n  tsMs: number;\n  p50: number;\n  p95: number;\n}\n\nexport const LATENCY_INTERVAL: '1h' = '1h';\n\nasync function fetchPercentiles(\n  client: ReturnType<typeof useMastraClient>,\n  metricName: string,\n  filters: Record<string, unknown>,\n): Promise<LatencyPoint[]> {\n  const res = await client.getMetricPercentiles({\n    name: metricName,\n    percentiles: [0.5, 0.95],\n    interval: LATENCY_INTERVAL,\n    filters,\n  });\n\n  const p50Series = res.series.find(s => s.percentile === 0.5);\n  const p95Series = res.series.find(s => s.percentile === 0.95);\n\n  if (!p50Series || !p95Series) return [];\n\n  const p95Map = new Map(p95Series.points.map(p => [new Date(p.timestamp).getTime(), p.value]));\n\n  return p50Series.points.map(p => {\n    const ts = new Date(p.timestamp);\n    const tsMs = ts.getTime();\n    return {\n      time: ts.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }),\n      tsMs,\n      p50: Math.round(p.value),\n      p95: Math.round(p95Map.get(tsMs) ?? 0),\n    };\n  });\n}\n\nexport function useLatencyMetrics() {\n  const client = useMastraClient();\n  const { filters, filterKey } = useMetricsFilters();\n\n  return useQuery({\n    queryKey: ['metrics', 'latency', filterKey],\n    queryFn: async () => {\n      const [agentData, workflowData, toolData] = await Promise.all([\n        fetchPercentiles(client, 'mastra_agent_duration_ms', filters),\n        fetchPercentiles(client, 'mastra_workflow_duration_ms', filters),\n        fetchPercentiles(client, 'mastra_tool_duration_ms', filters),\n      ]);\n      return { agentData, workflowData, toolData, interval: LATENCY_INTERVAL };\n    },\n  });\n}\n"],"names":[],"mappings":";;;;AAcO,MAAM,gBAAA,GAAyB;AAEtC,eAAe,gBAAA,CACb,MAAA,EACA,UAAA,EACA,OAAA,EACyB;AACzB,EAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,oBAAA,CAAqB;AAAA,IAC5C,IAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAa,CAAC,GAAA,EAAK,IAAI,CAAA;AAAA,IACvB,QAAA,EAAU,gBAAA;AAAA,IACV;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,GAAG,CAAA;AAC3D,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,IAAI,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,SAAA,SAAkB,EAAC;AAEtC,EAAA,MAAM,SAAS,IAAI,GAAA,CAAI,UAAU,MAAA,CAAO,GAAA,CAAI,OAAK,CAAC,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA,CAAE,OAAA,IAAW,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAE5F,EAAA,OAAO,SAAA,CAAU,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AAC/B,IAAA,MAAM,EAAA,GAAK,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA;AAC/B,IAAA,MAAM,IAAA,GAAO,GAAG,OAAA,EAAQ;AACxB,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,EAAA,CAAG,kBAAA,CAAmB,OAAA,EAAS,EAAE,IAAA,EAAM,SAAA,EAAW,MAAA,EAAQ,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,CAAA;AAAA,MAC1F,IAAA;AAAA,MACA,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,CAAA,CAAE,KAAK,CAAA;AAAA,MACvB,KAAK,IAAA,CAAK,KAAA,CAAM,OAAO,GAAA,CAAI,IAAI,KAAK,CAAC;AAAA,KACvC;AAAA,EACF,CAAC,CAAA;AACH;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAEjD,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,SAAA,EAAW,SAAA,EAAW,SAAS,CAAA;AAAA,IAC1C,SAAS,YAAY;AACnB,MAAA,MAAM,CAAC,SAAA,EAAW,YAAA,EAAc,QAAQ,CAAA,GAAI,MAAM,QAAQ,GAAA,CAAI;AAAA,QAC5D,gBAAA,CAAiB,MAAA,EAAQ,0BAAA,EAA4B,OAAO,CAAA;AAAA,QAC5D,gBAAA,CAAiB,MAAA,EAAQ,6BAAA,EAA+B,OAAO,CAAA;AAAA,QAC/D,gBAAA,CAAiB,MAAA,EAAQ,yBAAA,EAA2B,OAAO;AAAA,OAC5D,CAAA;AACD,MAAA,OAAO,EAAE,SAAA,EAAW,YAAA,EAAc,QAAA,EAAU,UAAU,gBAAA,EAAiB;AAAA,IACzE;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-latency-metrics.es.js","sources":["../../../../src/domains/metrics/hooks/use-latency-metrics.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport { chooseMetricsInterval, formatMetricsBucketLabel } from '../metrics-interval';\nimport type { MetricsInterval } from '../metrics-interval';\nimport { useMetricsFilters } from './use-metrics-filters';\n\nexport interface LatencyPoint {\n  [key: string]: unknown;\n  time: string;\n  /** Raw timestamp (ms since epoch) for the bucket this point represents.\n   *  Used by drilldown clicks to compute a narrow time window. */\n  tsMs: number;\n  p50: number;\n  p95: number;\n}\n\nasync function fetchPercentiles(\n  client: ReturnType<typeof useMastraClient>,\n  metricName: string,\n  filters: Record<string, unknown>,\n  interval: MetricsInterval,\n): Promise<LatencyPoint[]> {\n  const res = await client.getMetricPercentiles({\n    name: metricName,\n    percentiles: [0.5, 0.95],\n    interval,\n    filters,\n  });\n\n  const p50Series = res.series.find(s => s.percentile === 0.5);\n  const p95Series = res.series.find(s => s.percentile === 0.95);\n\n  if (!p50Series || !p95Series) return [];\n\n  const p95Map = new Map(p95Series.points.map(p => [new Date(p.timestamp).getTime(), p.value]));\n\n  return p50Series.points.map(p => {\n    const ts = new Date(p.timestamp);\n    const tsMs = ts.getTime();\n    return {\n      time: formatMetricsBucketLabel(ts, interval),\n      tsMs,\n      p50: Math.round(p.value),\n      p95: Math.round(p95Map.get(tsMs) ?? 0),\n    };\n  });\n}\n\nexport function useLatencyMetrics() {\n  const client = useMastraClient();\n  const { timestamp, filters, filterKey } = useMetricsFilters();\n  const interval = chooseMetricsInterval(timestamp);\n\n  return useQuery({\n    queryKey: ['metrics', 'latency', filterKey, interval],\n    queryFn: async () => {\n      const [agentData, workflowData, toolData] = await Promise.all([\n        fetchPercentiles(client, 'mastra_agent_duration_ms', filters, interval),\n        fetchPercentiles(client, 'mastra_workflow_duration_ms', filters, interval),\n        fetchPercentiles(client, 'mastra_tool_duration_ms', filters, interval),\n      ]);\n      return { agentData, workflowData, toolData, interval };\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;AAgBA,eAAe,gBAAA,CACb,MAAA,EACA,UAAA,EACA,OAAA,EACA,QAAA,EACyB;AACzB,EAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,oBAAA,CAAqB;AAAA,IAC5C,IAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAa,CAAC,GAAA,EAAK,IAAI,CAAA;AAAA,IACvB,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,GAAG,CAAA;AAC3D,EAAA,MAAM,YAAY,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,eAAe,IAAI,CAAA;AAE5D,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,SAAA,SAAkB,EAAC;AAEtC,EAAA,MAAM,SAAS,IAAI,GAAA,CAAI,UAAU,MAAA,CAAO,GAAA,CAAI,OAAK,CAAC,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA,CAAE,OAAA,IAAW,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAE5F,EAAA,OAAO,SAAA,CAAU,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AAC/B,IAAA,MAAM,EAAA,GAAK,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,CAAA;AAC/B,IAAA,MAAM,IAAA,GAAO,GAAG,OAAA,EAAQ;AACxB,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,wBAAA,CAAyB,EAAA,EAAI,QAAQ,CAAA;AAAA,MAC3C,IAAA;AAAA,MACA,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,CAAA,CAAE,KAAK,CAAA;AAAA,MACvB,KAAK,IAAA,CAAK,KAAA,CAAM,OAAO,GAAA,CAAI,IAAI,KAAK,CAAC;AAAA,KACvC;AAAA,EACF,CAAC,CAAA;AACH;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,SAAA,KAAc,iBAAA,EAAkB;AAC5D,EAAA,MAAM,QAAA,GAAW,sBAAsB,SAAS,CAAA;AAEhD,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,SAAA,EAAW,SAAA,EAAW,WAAW,QAAQ,CAAA;AAAA,IACpD,SAAS,YAAY;AACnB,MAAA,MAAM,CAAC,SAAA,EAAW,YAAA,EAAc,QAAQ,CAAA,GAAI,MAAM,QAAQ,GAAA,CAAI;AAAA,QAC5D,gBAAA,CAAiB,MAAA,EAAQ,0BAAA,EAA4B,OAAA,EAAS,QAAQ,CAAA;AAAA,QACtE,gBAAA,CAAiB,MAAA,EAAQ,6BAAA,EAA+B,OAAA,EAAS,QAAQ,CAAA;AAAA,QACzE,gBAAA,CAAiB,MAAA,EAAQ,yBAAA,EAA2B,OAAA,EAAS,QAAQ;AAAA,OACtE,CAAA;AACD,MAAA,OAAO,EAAE,SAAA,EAAW,YAAA,EAAc,QAAA,EAAU,QAAA,EAAS;AAAA,IACvD;AAAA,GACD,CAAA;AACH;;;;"}

package/dist/domains/metrics/hooks/use-metrics.cjs.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const dateFns = require('date-fns');
 const React = require('react');
 const domains_metrics_metricsFilters = require('../metrics-filters.cjs.js');
+const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 
 const DATE_PRESETS = [
   { label: "Last 24 hours", value: "24h" },
@@ -43,9 +43,9 @@ function getDateRangeLabel(preset, customRange) {
   }
   if (customRange?.from) {
     if (customRange.to) {
-      return `${dateFns.format(customRange.from, "MMM d, yyyy")} – ${dateFns.format(customRange.to, "MMM d, yyyy")}`;
+      return `${utils_dateFormat.formatShortDate(customRange.from)} – ${utils_dateFormat.formatShortDate(customRange.to)}`;
     }
-    return dateFns.format(customRange.from, "MMM d, yyyy");
+    return utils_dateFormat.formatShortDate(customRange.from) ?? "";
   }
   return "Custom range";
 }

package/dist/domains/metrics/hooks/use-metrics.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-metrics.cjs.js","sources":["../../../../src/domains/metrics/hooks/use-metrics.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { format } from 'date-fns';\nimport { createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { buildMetricsDimensionalFilter } from '../metrics-filters';\nimport type { MetricsDimensionalFilter } from '../metrics-filters';\nimport type { PropertyFilterToken } from '@/ds/components/PropertyFilter/types';\n\nconst DATE_PRESETS = [\n  { label: 'Last 24 hours', value: '24h' },\n  { label: 'Last 3 days', value: '3d' },\n  { label: 'Last 7 days', value: '7d' },\n  { label: 'Last 14 days', value: '14d' },\n  { label: 'Last 30 days', value: '30d' },\n] as const;\n\nexport type DatePreset = (typeof DATE_PRESETS)[number]['value'] | 'custom';\n\nexport { DATE_PRESETS };\n\nconst VALID_PRESETS = new Set<string>(DATE_PRESETS.map(p => p.value));\n\nexport function isValidPreset(value: string | null | undefined): value is DatePreset {\n  return typeof value === 'string' && (VALID_PRESETS.has(value) || value === 'custom');\n}\n\nexport type DateRange = { from?: Date; to?: Date };\n\n/** Internal — all state is derived from the URL-backed props the owner passes.\n *  There is intentionally no local mirror; keeping a mirror caused URL ↔ state\n *  feedback loops that re-rendered the entire metrics tree on every keystroke.\n */\ntype MetricsContextValue = {\n  datePreset: DatePreset;\n  setDatePreset: (v: DatePreset) => void;\n  customRange: DateRange | undefined;\n  setCustomRange: (v: DateRange | undefined) => void;\n  dateRangeLabel: string;\n  filterTokens: PropertyFilterToken[];\n  setFilterTokens: (tokens: PropertyFilterToken[]) => void;\n  dimensionalFilter: MetricsDimensionalFilter;\n  /** Stable JSON representation of `dimensionalFilter`, safe for query keys. */\n  dimensionalFilterKey: string;\n  /** Base path drilldown links should target for the Traces page. */\n  tracesBasePath: string | undefined;\n  /** Base path drilldown links should target for the Logs page. */\n  logsBasePath: string | undefined;\n};\n\nexport const MetricsContext = createContext<MetricsContextValue>({\n  datePreset: '24h',\n  setDatePreset: () => {},\n  customRange: undefined,\n  setCustomRange: () => {},\n  dateRangeLabel: 'Last 24 hours',\n  filterTokens: [],\n  setFilterTokens: () => {},\n  dimensionalFilter: {},\n  dimensionalFilterKey: '{}',\n  tracesBasePath: undefined,\n  logsBasePath: undefined,\n});\n\nexport function useMetrics() {\n  return useContext(MetricsContext);\n}\n\nfunction getDateRangeLabel(preset: DatePreset, customRange: DateRange | undefined) {\n  if (preset !== 'custom') {\n    return DATE_PRESETS.find(p => p.value === preset)?.label ?? preset;\n  }\n  if (customRange?.from) {\n    if (customRange.to) {\n      return `${format(customRange.from, 'MMM d, yyyy')} – ${format(customRange.to, 'MMM d, yyyy')}`;\n    }\n    return format(customRange.from, 'MMM d, yyyy');\n  }\n  return 'Custom range';\n}\n\n/**\n * URL-driven metrics provider.\n *\n * The owner (page) is expected to:\n *   - pass the current `preset` / `filterTokens` derived from `useSearchParams`\n *   - pass `onPresetChange` / `onFilterTokensChange` that update the URL\n *\n * The provider never stores its own copies — changes round-trip through the URL\n * exactly once, which keeps re-renders bounded no matter how much data is on\n * screen.\n */\nexport function MetricsProvider({\n  children,\n  preset,\n  filterTokens,\n  onPresetChange,\n  onFilterTokensChange,\n  customRange,\n  onCustomRangeChange,\n  tracesBasePath,\n  logsBasePath,\n}: {\n  children: ReactNode;\n  preset: DatePreset;\n  filterTokens: PropertyFilterToken[];\n  onPresetChange: (preset: DatePreset) => void;\n  onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;\n  customRange?: DateRange;\n  onCustomRangeChange?: (range: DateRange | undefined) => void;\n  /** Base path for drilldown links to the Traces page. Defaults to `/traces` when omitted. */\n  tracesBasePath?: string;\n  /** Base path for drilldown links to the Logs page. Defaults to `/logs` when omitted. */\n  logsBasePath?: string;\n}) {\n  // Stable key for memo dependencies — the parent may re-create the tokens\n  // array on every render (e.g. from `useMemo(... , [searchParams])`), but the\n  // *content* usually doesn't change.\n  const filterTokensKey = useMemo(() => JSON.stringify(filterTokens), [filterTokens]);\n\n  // Intentional: re-pin only when the serialized content changes, not on every\n  // parent render that allocates a new array.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stableFilterTokens = useMemo(() => filterTokens, [filterTokensKey]);\n\n  const dimensionalFilter = useMemo(() => buildMetricsDimensionalFilter(stableFilterTokens), [stableFilterTokens]);\n\n  const dimensionalFilterKey = useMemo(() => JSON.stringify(dimensionalFilter), [dimensionalFilter]);\n\n  const dateRangeLabel = getDateRangeLabel(preset, customRange);\n\n  const value = useMemo<MetricsContextValue>(\n    () => ({\n      datePreset: preset,\n      setDatePreset: onPresetChange,\n      customRange,\n      setCustomRange: onCustomRangeChange ?? (() => {}),\n      dateRangeLabel,\n      filterTokens: stableFilterTokens,\n      setFilterTokens: onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    }),\n    [\n      preset,\n      onPresetChange,\n      customRange,\n      onCustomRangeChange,\n      dateRangeLabel,\n      stableFilterTokens,\n      onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    ],\n  );\n\n  return <MetricsContext.Provider value={value}>{children}</MetricsContext.Provider>;\n}\n"],"names":["createContext","useContext","format","useMemo","buildMetricsDimensionalFilter","jsx"],"mappings":"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"}
+{"version":3,"file":"use-metrics.cjs.js","sources":["../../../../src/domains/metrics/hooks/use-metrics.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { buildMetricsDimensionalFilter } from '../metrics-filters';\nimport type { MetricsDimensionalFilter } from '../metrics-filters';\nimport type { PropertyFilterToken } from '@/ds/components/PropertyFilter/types';\nimport { formatShortDate } from '@/utils/date-format';\n\nconst DATE_PRESETS = [\n  { label: 'Last 24 hours', value: '24h' },\n  { label: 'Last 3 days', value: '3d' },\n  { label: 'Last 7 days', value: '7d' },\n  { label: 'Last 14 days', value: '14d' },\n  { label: 'Last 30 days', value: '30d' },\n] as const;\n\nexport type DatePreset = (typeof DATE_PRESETS)[number]['value'] | 'custom';\n\nexport { DATE_PRESETS };\n\nconst VALID_PRESETS = new Set<string>(DATE_PRESETS.map(p => p.value));\n\nexport function isValidPreset(value: string | null | undefined): value is DatePreset {\n  return typeof value === 'string' && (VALID_PRESETS.has(value) || value === 'custom');\n}\n\nexport type DateRange = { from?: Date; to?: Date };\n\n/** Internal — all state is derived from the URL-backed props the owner passes.\n *  There is intentionally no local mirror; keeping a mirror caused URL ↔ state\n *  feedback loops that re-rendered the entire metrics tree on every keystroke.\n */\ntype MetricsContextValue = {\n  datePreset: DatePreset;\n  setDatePreset: (v: DatePreset) => void;\n  customRange: DateRange | undefined;\n  setCustomRange: (v: DateRange | undefined) => void;\n  dateRangeLabel: string;\n  filterTokens: PropertyFilterToken[];\n  setFilterTokens: (tokens: PropertyFilterToken[]) => void;\n  dimensionalFilter: MetricsDimensionalFilter;\n  /** Stable JSON representation of `dimensionalFilter`, safe for query keys. */\n  dimensionalFilterKey: string;\n  /** Base path drilldown links should target for the Traces page. */\n  tracesBasePath: string | undefined;\n  /** Base path drilldown links should target for the Logs page. */\n  logsBasePath: string | undefined;\n};\n\nexport const MetricsContext = createContext<MetricsContextValue>({\n  datePreset: '24h',\n  setDatePreset: () => {},\n  customRange: undefined,\n  setCustomRange: () => {},\n  dateRangeLabel: 'Last 24 hours',\n  filterTokens: [],\n  setFilterTokens: () => {},\n  dimensionalFilter: {},\n  dimensionalFilterKey: '{}',\n  tracesBasePath: undefined,\n  logsBasePath: undefined,\n});\n\nexport function useMetrics() {\n  return useContext(MetricsContext);\n}\n\nfunction getDateRangeLabel(preset: DatePreset, customRange: DateRange | undefined) {\n  if (preset !== 'custom') {\n    return DATE_PRESETS.find(p => p.value === preset)?.label ?? preset;\n  }\n  if (customRange?.from) {\n    if (customRange.to) {\n      return `${formatShortDate(customRange.from)} – ${formatShortDate(customRange.to)}`;\n    }\n    return formatShortDate(customRange.from) ?? '';\n  }\n  return 'Custom range';\n}\n\n/**\n * URL-driven metrics provider.\n *\n * The owner (page) is expected to:\n *   - pass the current `preset` / `filterTokens` derived from `useSearchParams`\n *   - pass `onPresetChange` / `onFilterTokensChange` that update the URL\n *\n * The provider never stores its own copies — changes round-trip through the URL\n * exactly once, which keeps re-renders bounded no matter how much data is on\n * screen.\n */\nexport function MetricsProvider({\n  children,\n  preset,\n  filterTokens,\n  onPresetChange,\n  onFilterTokensChange,\n  customRange,\n  onCustomRangeChange,\n  tracesBasePath,\n  logsBasePath,\n}: {\n  children: ReactNode;\n  preset: DatePreset;\n  filterTokens: PropertyFilterToken[];\n  onPresetChange: (preset: DatePreset) => void;\n  onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;\n  customRange?: DateRange;\n  onCustomRangeChange?: (range: DateRange | undefined) => void;\n  /** Base path for drilldown links to the Traces page. Defaults to `/traces` when omitted. */\n  tracesBasePath?: string;\n  /** Base path for drilldown links to the Logs page. Defaults to `/logs` when omitted. */\n  logsBasePath?: string;\n}) {\n  // Stable key for memo dependencies — the parent may re-create the tokens\n  // array on every render (e.g. from `useMemo(... , [searchParams])`), but the\n  // *content* usually doesn't change.\n  const filterTokensKey = useMemo(() => JSON.stringify(filterTokens), [filterTokens]);\n\n  // Intentional: re-pin only when the serialized content changes, not on every\n  // parent render that allocates a new array.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stableFilterTokens = useMemo(() => filterTokens, [filterTokensKey]);\n\n  const dimensionalFilter = useMemo(() => buildMetricsDimensionalFilter(stableFilterTokens), [stableFilterTokens]);\n\n  const dimensionalFilterKey = useMemo(() => JSON.stringify(dimensionalFilter), [dimensionalFilter]);\n\n  const dateRangeLabel = getDateRangeLabel(preset, customRange);\n\n  const value = useMemo<MetricsContextValue>(\n    () => ({\n      datePreset: preset,\n      setDatePreset: onPresetChange,\n      customRange,\n      setCustomRange: onCustomRangeChange ?? (() => {}),\n      dateRangeLabel,\n      filterTokens: stableFilterTokens,\n      setFilterTokens: onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    }),\n    [\n      preset,\n      onPresetChange,\n      customRange,\n      onCustomRangeChange,\n      dateRangeLabel,\n      stableFilterTokens,\n      onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    ],\n  );\n\n  return <MetricsContext.Provider value={value}>{children}</MetricsContext.Provider>;\n}\n"],"names":["createContext","useContext","formatShortDate","useMemo","buildMetricsDimensionalFilter","jsx"],"mappings":"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"}

package/dist/domains/metrics/hooks/use-metrics.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import { format } from 'date-fns';
 import { createContext, useMemo, useContext } from 'react';
 import { buildMetricsDimensionalFilter } from '../metrics-filters.es.js';
+import { formatShortDate } from '../../../utils/date-format.es.js';
 
 const DATE_PRESETS = [
   { label: "Last 24 hours", value: "24h" },
@@ -39,9 +39,9 @@ function getDateRangeLabel(preset, customRange) {
   }
   if (customRange?.from) {
     if (customRange.to) {
-      return `${format(customRange.from, "MMM d, yyyy")} – ${format(customRange.to, "MMM d, yyyy")}`;
+      return `${formatShortDate(customRange.from)} – ${formatShortDate(customRange.to)}`;
     }
-    return format(customRange.from, "MMM d, yyyy");
+    return formatShortDate(customRange.from) ?? "";
   }
   return "Custom range";
 }

package/dist/domains/metrics/hooks/use-metrics.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-metrics.es.js","sources":["../../../../src/domains/metrics/hooks/use-metrics.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { format } from 'date-fns';\nimport { createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { buildMetricsDimensionalFilter } from '../metrics-filters';\nimport type { MetricsDimensionalFilter } from '../metrics-filters';\nimport type { PropertyFilterToken } from '@/ds/components/PropertyFilter/types';\n\nconst DATE_PRESETS = [\n  { label: 'Last 24 hours', value: '24h' },\n  { label: 'Last 3 days', value: '3d' },\n  { label: 'Last 7 days', value: '7d' },\n  { label: 'Last 14 days', value: '14d' },\n  { label: 'Last 30 days', value: '30d' },\n] as const;\n\nexport type DatePreset = (typeof DATE_PRESETS)[number]['value'] | 'custom';\n\nexport { DATE_PRESETS };\n\nconst VALID_PRESETS = new Set<string>(DATE_PRESETS.map(p => p.value));\n\nexport function isValidPreset(value: string | null | undefined): value is DatePreset {\n  return typeof value === 'string' && (VALID_PRESETS.has(value) || value === 'custom');\n}\n\nexport type DateRange = { from?: Date; to?: Date };\n\n/** Internal — all state is derived from the URL-backed props the owner passes.\n *  There is intentionally no local mirror; keeping a mirror caused URL ↔ state\n *  feedback loops that re-rendered the entire metrics tree on every keystroke.\n */\ntype MetricsContextValue = {\n  datePreset: DatePreset;\n  setDatePreset: (v: DatePreset) => void;\n  customRange: DateRange | undefined;\n  setCustomRange: (v: DateRange | undefined) => void;\n  dateRangeLabel: string;\n  filterTokens: PropertyFilterToken[];\n  setFilterTokens: (tokens: PropertyFilterToken[]) => void;\n  dimensionalFilter: MetricsDimensionalFilter;\n  /** Stable JSON representation of `dimensionalFilter`, safe for query keys. */\n  dimensionalFilterKey: string;\n  /** Base path drilldown links should target for the Traces page. */\n  tracesBasePath: string | undefined;\n  /** Base path drilldown links should target for the Logs page. */\n  logsBasePath: string | undefined;\n};\n\nexport const MetricsContext = createContext<MetricsContextValue>({\n  datePreset: '24h',\n  setDatePreset: () => {},\n  customRange: undefined,\n  setCustomRange: () => {},\n  dateRangeLabel: 'Last 24 hours',\n  filterTokens: [],\n  setFilterTokens: () => {},\n  dimensionalFilter: {},\n  dimensionalFilterKey: '{}',\n  tracesBasePath: undefined,\n  logsBasePath: undefined,\n});\n\nexport function useMetrics() {\n  return useContext(MetricsContext);\n}\n\nfunction getDateRangeLabel(preset: DatePreset, customRange: DateRange | undefined) {\n  if (preset !== 'custom') {\n    return DATE_PRESETS.find(p => p.value === preset)?.label ?? preset;\n  }\n  if (customRange?.from) {\n    if (customRange.to) {\n      return `${format(customRange.from, 'MMM d, yyyy')} – ${format(customRange.to, 'MMM d, yyyy')}`;\n    }\n    return format(customRange.from, 'MMM d, yyyy');\n  }\n  return 'Custom range';\n}\n\n/**\n * URL-driven metrics provider.\n *\n * The owner (page) is expected to:\n *   - pass the current `preset` / `filterTokens` derived from `useSearchParams`\n *   - pass `onPresetChange` / `onFilterTokensChange` that update the URL\n *\n * The provider never stores its own copies — changes round-trip through the URL\n * exactly once, which keeps re-renders bounded no matter how much data is on\n * screen.\n */\nexport function MetricsProvider({\n  children,\n  preset,\n  filterTokens,\n  onPresetChange,\n  onFilterTokensChange,\n  customRange,\n  onCustomRangeChange,\n  tracesBasePath,\n  logsBasePath,\n}: {\n  children: ReactNode;\n  preset: DatePreset;\n  filterTokens: PropertyFilterToken[];\n  onPresetChange: (preset: DatePreset) => void;\n  onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;\n  customRange?: DateRange;\n  onCustomRangeChange?: (range: DateRange | undefined) => void;\n  /** Base path for drilldown links to the Traces page. Defaults to `/traces` when omitted. */\n  tracesBasePath?: string;\n  /** Base path for drilldown links to the Logs page. Defaults to `/logs` when omitted. */\n  logsBasePath?: string;\n}) {\n  // Stable key for memo dependencies — the parent may re-create the tokens\n  // array on every render (e.g. from `useMemo(... , [searchParams])`), but the\n  // *content* usually doesn't change.\n  const filterTokensKey = useMemo(() => JSON.stringify(filterTokens), [filterTokens]);\n\n  // Intentional: re-pin only when the serialized content changes, not on every\n  // parent render that allocates a new array.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stableFilterTokens = useMemo(() => filterTokens, [filterTokensKey]);\n\n  const dimensionalFilter = useMemo(() => buildMetricsDimensionalFilter(stableFilterTokens), [stableFilterTokens]);\n\n  const dimensionalFilterKey = useMemo(() => JSON.stringify(dimensionalFilter), [dimensionalFilter]);\n\n  const dateRangeLabel = getDateRangeLabel(preset, customRange);\n\n  const value = useMemo<MetricsContextValue>(\n    () => ({\n      datePreset: preset,\n      setDatePreset: onPresetChange,\n      customRange,\n      setCustomRange: onCustomRangeChange ?? (() => {}),\n      dateRangeLabel,\n      filterTokens: stableFilterTokens,\n      setFilterTokens: onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    }),\n    [\n      preset,\n      onPresetChange,\n      customRange,\n      onCustomRangeChange,\n      dateRangeLabel,\n      stableFilterTokens,\n      onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    ],\n  );\n\n  return <MetricsContext.Provider value={value}>{children}</MetricsContext.Provider>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-metrics.es.js","sources":["../../../../src/domains/metrics/hooks/use-metrics.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { buildMetricsDimensionalFilter } from '../metrics-filters';\nimport type { MetricsDimensionalFilter } from '../metrics-filters';\nimport type { PropertyFilterToken } from '@/ds/components/PropertyFilter/types';\nimport { formatShortDate } from '@/utils/date-format';\n\nconst DATE_PRESETS = [\n  { label: 'Last 24 hours', value: '24h' },\n  { label: 'Last 3 days', value: '3d' },\n  { label: 'Last 7 days', value: '7d' },\n  { label: 'Last 14 days', value: '14d' },\n  { label: 'Last 30 days', value: '30d' },\n] as const;\n\nexport type DatePreset = (typeof DATE_PRESETS)[number]['value'] | 'custom';\n\nexport { DATE_PRESETS };\n\nconst VALID_PRESETS = new Set<string>(DATE_PRESETS.map(p => p.value));\n\nexport function isValidPreset(value: string | null | undefined): value is DatePreset {\n  return typeof value === 'string' && (VALID_PRESETS.has(value) || value === 'custom');\n}\n\nexport type DateRange = { from?: Date; to?: Date };\n\n/** Internal — all state is derived from the URL-backed props the owner passes.\n *  There is intentionally no local mirror; keeping a mirror caused URL ↔ state\n *  feedback loops that re-rendered the entire metrics tree on every keystroke.\n */\ntype MetricsContextValue = {\n  datePreset: DatePreset;\n  setDatePreset: (v: DatePreset) => void;\n  customRange: DateRange | undefined;\n  setCustomRange: (v: DateRange | undefined) => void;\n  dateRangeLabel: string;\n  filterTokens: PropertyFilterToken[];\n  setFilterTokens: (tokens: PropertyFilterToken[]) => void;\n  dimensionalFilter: MetricsDimensionalFilter;\n  /** Stable JSON representation of `dimensionalFilter`, safe for query keys. */\n  dimensionalFilterKey: string;\n  /** Base path drilldown links should target for the Traces page. */\n  tracesBasePath: string | undefined;\n  /** Base path drilldown links should target for the Logs page. */\n  logsBasePath: string | undefined;\n};\n\nexport const MetricsContext = createContext<MetricsContextValue>({\n  datePreset: '24h',\n  setDatePreset: () => {},\n  customRange: undefined,\n  setCustomRange: () => {},\n  dateRangeLabel: 'Last 24 hours',\n  filterTokens: [],\n  setFilterTokens: () => {},\n  dimensionalFilter: {},\n  dimensionalFilterKey: '{}',\n  tracesBasePath: undefined,\n  logsBasePath: undefined,\n});\n\nexport function useMetrics() {\n  return useContext(MetricsContext);\n}\n\nfunction getDateRangeLabel(preset: DatePreset, customRange: DateRange | undefined) {\n  if (preset !== 'custom') {\n    return DATE_PRESETS.find(p => p.value === preset)?.label ?? preset;\n  }\n  if (customRange?.from) {\n    if (customRange.to) {\n      return `${formatShortDate(customRange.from)} – ${formatShortDate(customRange.to)}`;\n    }\n    return formatShortDate(customRange.from) ?? '';\n  }\n  return 'Custom range';\n}\n\n/**\n * URL-driven metrics provider.\n *\n * The owner (page) is expected to:\n *   - pass the current `preset` / `filterTokens` derived from `useSearchParams`\n *   - pass `onPresetChange` / `onFilterTokensChange` that update the URL\n *\n * The provider never stores its own copies — changes round-trip through the URL\n * exactly once, which keeps re-renders bounded no matter how much data is on\n * screen.\n */\nexport function MetricsProvider({\n  children,\n  preset,\n  filterTokens,\n  onPresetChange,\n  onFilterTokensChange,\n  customRange,\n  onCustomRangeChange,\n  tracesBasePath,\n  logsBasePath,\n}: {\n  children: ReactNode;\n  preset: DatePreset;\n  filterTokens: PropertyFilterToken[];\n  onPresetChange: (preset: DatePreset) => void;\n  onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;\n  customRange?: DateRange;\n  onCustomRangeChange?: (range: DateRange | undefined) => void;\n  /** Base path for drilldown links to the Traces page. Defaults to `/traces` when omitted. */\n  tracesBasePath?: string;\n  /** Base path for drilldown links to the Logs page. Defaults to `/logs` when omitted. */\n  logsBasePath?: string;\n}) {\n  // Stable key for memo dependencies — the parent may re-create the tokens\n  // array on every render (e.g. from `useMemo(... , [searchParams])`), but the\n  // *content* usually doesn't change.\n  const filterTokensKey = useMemo(() => JSON.stringify(filterTokens), [filterTokens]);\n\n  // Intentional: re-pin only when the serialized content changes, not on every\n  // parent render that allocates a new array.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stableFilterTokens = useMemo(() => filterTokens, [filterTokensKey]);\n\n  const dimensionalFilter = useMemo(() => buildMetricsDimensionalFilter(stableFilterTokens), [stableFilterTokens]);\n\n  const dimensionalFilterKey = useMemo(() => JSON.stringify(dimensionalFilter), [dimensionalFilter]);\n\n  const dateRangeLabel = getDateRangeLabel(preset, customRange);\n\n  const value = useMemo<MetricsContextValue>(\n    () => ({\n      datePreset: preset,\n      setDatePreset: onPresetChange,\n      customRange,\n      setCustomRange: onCustomRangeChange ?? (() => {}),\n      dateRangeLabel,\n      filterTokens: stableFilterTokens,\n      setFilterTokens: onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    }),\n    [\n      preset,\n      onPresetChange,\n      customRange,\n      onCustomRangeChange,\n      dateRangeLabel,\n      stableFilterTokens,\n      onFilterTokensChange,\n      dimensionalFilter,\n      dimensionalFilterKey,\n      tracesBasePath,\n      logsBasePath,\n    ],\n  );\n\n  return <MetricsContext.Provider value={value}>{children}</MetricsContext.Provider>;\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/metrics/hooks/use-model-usage-cost-metrics.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('@mastra/react');
 const reactQuery = require('@tanstack/react-query');
-const domains_metrics_components_metricsUtils = require('../components/metrics-utils.cjs.js');
 const domains_metrics_hooks_useMetricsFilters = require('./use-metrics-filters.cjs.js');
+const utils_cost = require('../../../utils/cost.cjs.js');
 const map = require('../../../map-CGEv7zQW.cjs');
 
 function useModelUsageCostMetrics() {
@@ -70,10 +70,10 @@ function useModelUsageCostMetrics() {
       }
       return Array.from(modelMap.entries()).map(([model, vals]) => ({
         model,
-        input: domains_metrics_components_metricsUtils.formatCompact(vals.input),
-        output: domains_metrics_components_metricsUtils.formatCompact(vals.output),
-        cacheRead: domains_metrics_components_metricsUtils.formatCompact(vals.cacheRead),
-        cacheWrite: domains_metrics_components_metricsUtils.formatCompact(vals.cacheWrite),
+        input: utils_cost.formatCompactNumber(vals.input),
+        output: utils_cost.formatCompactNumber(vals.output),
+        cacheRead: utils_cost.formatCompactNumber(vals.cacheRead),
+        cacheWrite: utils_cost.formatCompactNumber(vals.cacheWrite),
         cost: vals.cost,
         costUnit: vals.costUnit
       })).sort((a, b) => a.model.localeCompare(b.model));