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

package/dist/span-payload-primitives-DCho2ZIs.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronRightIcon } from 'lucide-react';
+import { SpanPayloadJson } from './domains/traces/components/span-payload/span-payload-json.es.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-8h5KBZPX.js';
+import { M as MarkdownRenderer } from './markdown-renderer-hN46cpXk.js';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { BadgeWrapper } from './domains/chat/components/badge-wrapper.es.js';
+import { e as ActivityHeadline } from './activity-maXCNWZp.js';
+import { p as presentTool } from './tool-presentation-BXAo24Ir.js';
+
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function SpanPayloadTool({ value, showLabel = true }) {
+  if (!isRecord(value)) return /* @__PURE__ */ jsx(SpanPayloadJson, { value });
+  const call = value.type === "tool-invocation" ? value.toolInvocation : value;
+  if (!isRecord(call) || typeof call.toolName !== "string" || !call.toolName) {
+    return /* @__PURE__ */ jsx(SpanPayloadJson, { value });
+  }
+  const input = "args" in call ? call.args : call.input;
+  const output = "result" in call ? call.result : call.output;
+  const error = call.isError === true || call.state === "output-error";
+  const errorText = typeof call.errorText === "string" ? call.errorText : void 0;
+  const { icon: ToolIcon, label, detail, description } = presentTool(call.toolName, input);
+  const hasBody = input !== void 0 || output !== void 0 || errorText !== void 0;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "span-payload-tool", className: "flex flex-col gap-2", children: [
+    showLabel && /* @__PURE__ */ jsx(SpanPayloadLabel, { children: value.type === "tool-result" ? "Tool result" : "Tool call" }),
+    /* @__PURE__ */ jsx(
+      BadgeWrapper,
+      {
+        status: error ? "error" : "idle",
+        header: /* @__PURE__ */ jsx(ActivityHeadline, { icon: /* @__PURE__ */ jsx(ToolIcon, { "aria-hidden": true }), label, detail, description }),
+        children: hasBody && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          input !== void 0 && /* @__PURE__ */ jsx(SpanPayloadField, { label: "Arguments", children: /* @__PURE__ */ jsx(SpanPayloadJson, { value: input }) }),
+          output !== void 0 && /* @__PURE__ */ jsx(SpanPayloadField, { label: "Result", children: /* @__PURE__ */ jsx(SpanPayloadJson, { value: output }) }),
+          errorText !== void 0 && /* @__PURE__ */ jsx(SpanPayloadField, { label: "Error", children: /* @__PURE__ */ jsx(SpanPayloadJson, { value: errorText }) })
+        ] })
+      }
+    )
+  ] });
+}
+
+function SpanPayloadLabel({ children }) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", className: "block uppercase", children });
+}
+function SpanPayloadField({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "span-payload-field", className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(SpanPayloadLabel, { children: label }),
+    children
+  ] });
+}
+function SpanPayloadMarkdown({ children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "span-payload-markdown", className: "text-foreground", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children }) });
+}
+function SpanPayloadCollapsible({
+  label,
+  children,
+  defaultOpen = false
+}) {
+  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center gap-1 text-meta text-placeholder uppercase [&>svg]:size-3", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+      label
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { className: "pt-1.5", children })
+  ] });
+}
+function SpanPayloadToolCalls({ toolCalls }) {
+  return /* @__PURE__ */ jsx("ul", { "data-slot": "span-payload-tool-calls", className: "flex flex-col gap-2", children: toolCalls.map((call, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SpanPayloadTool, { value: call, showLabel: false }) }, index)) });
+}
+
+export { SpanPayloadField as S, SpanPayloadMarkdown as a, SpanPayloadToolCalls as b, SpanPayloadCollapsible as c, SpanPayloadLabel as d, SpanPayloadTool as e };
+//# sourceMappingURL=span-payload-primitives-DCho2ZIs.js.map

package/dist/span-payload-primitives-DCho2ZIs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"span-payload-primitives-DCho2ZIs.js","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ActivityHeadline } from '@/ds/components/ai/activity';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  const { icon: ToolIcon, label, detail, description } = presentTool(call.toolName, input);\n  const hasBody = input !== undefined || output !== undefined || errorText !== undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={\n          <ActivityHeadline icon={<ToolIcon aria-hidden />} label={label} detail={detail} description={description} />\n        }\n      >\n        {hasBody && (\n          <div className=\"flex flex-col gap-3\">\n            {input !== undefined && (\n              <SpanPayloadField label=\"Arguments\">\n                <SpanPayloadJson value={input} />\n              </SpanPayloadField>\n            )}\n            {output !== undefined && (\n              <SpanPayloadField label=\"Result\">\n                <SpanPayloadJson value={output} />\n              </SpanPayloadField>\n            )}\n            {errorText !== undefined && (\n              <SpanPayloadField label=\"Error\">\n                <SpanPayloadJson value={errorText} />\n              </SpanPayloadField>\n            )}\n          </div>\n        )}\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { Txt } from '@/ds/components/Txt';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className=\"block uppercase\">\n      {children}\n    </Txt>\n  );\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta text-placeholder uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/spinner-BW4nHg_A.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+require('./spinner.css');const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-DlPxfJz9.cjs');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+const spinnerVariants = index.cva("spinner inline-block text-foreground", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8"
+    },
+    variant: {
+      default: "",
+      pulse: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+function Spinner({
+  className,
+  size = "md",
+  variant = "default",
+  fill = false,
+  "aria-label": ariaLabel = "Loading",
+  role = "status",
+  ...props
+}) {
+  const resolvedSize = size ?? "md";
+  const resolvedVariant = variant ?? "default";
+  const svg = /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ...props,
+      role,
+      "aria-label": ariaLabel,
+      "data-size": resolvedSize,
+      "data-variant": resolvedVariant,
+      className: utils_cn.cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      children: resolvedVariant === "pulse" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-pulse-ring", cx: "12", cy: "12", r: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-pulse-core", cx: "12", cy: "12", r: "5" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
+    }
+  );
+  if (fill) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "spinner-fill", className: "flex h-full items-center-safe justify-center-safe", children: svg });
+  }
+  return svg;
+}
+
+exports.Spinner = Spinner;
+//# sourceMappingURL=spinner-BW4nHg_A.cjs.map

package/dist/spinner-BW4nHg_A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-BW4nHg_A.cjs","sources":["../src/ds/components/Spinner/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './spinner.css';\n\nconst spinnerVariants = cva('spinner inline-block text-foreground', {\n  variants: {\n    size: {\n      sm: 'size-4',\n      md: 'size-6',\n      lg: 'size-8',\n    },\n    variant: {\n      default: '',\n      pulse: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;\nexport type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;\nexport type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;\n\nexport type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> &\n  SpinnerVariantsProps & {\n    /** Center the spinner in the full height of its parent — the parent must have a definite height. */\n    fill?: boolean;\n  };\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  fill = false,\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  const svg = (\n    <svg\n      {...props}\n      role={role}\n      aria-label={ariaLabel}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      className={cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n    >\n      {resolvedVariant === 'pulse' ? (\n        <>\n          <circle className=\"spinner-pulse-ring\" cx=\"12\" cy=\"12\" r=\"7\" />\n          <circle className=\"spinner-pulse-core\" cx=\"12\" cy=\"12\" r=\"5\" />\n        </>\n      ) : (\n        <circle className=\"spinner-ring\" cx=\"12\" cy=\"12\" r=\"8.5\" />\n      )}\n    </svg>\n  );\n\n  if (fill) {\n    return (\n      <div data-slot=\"spinner-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {svg}\n      </div>\n    );\n  }\n\n  return svg;\n}\n\nexport { Spinner };\n"],"names":["cva","jsx","cn","jsxs","Fragment"],"mappings":";;;;;;AAQA,MAAM,eAAA,GAAkBA,UAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAYD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,cAAc,SAAA,GAAY,SAAA;AAAA,EAC1B,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,eAAe,IAAA,IAAQ,IAAA;AAC7B,EAAA,MAAM,kBAAkB,OAAA,IAAW,SAAA;AAEnC,EAAA,MAAM,GAAA,mBACJC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAW,YAAA;AAAA,MACX,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAWC,WAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,cAAc,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1F,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MAEP,QAAA,EAAA,eAAA,KAAoB,0BACnBC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7DA,cAAA,CAAC,YAAO,SAAA,EAAU,oBAAA,EAAqB,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI;AAAA,OAAA,EAC/D,CAAA,mBAEAA,cAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,cAAA,EAAe,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM;AAAA;AAAA,GAE7D;AAGF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,sCACG,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAU,qDACrC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,GAAA;AACT;;;;"}

package/dist/spinner-CFtgt3oI.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as cva } from './index-D_f78K7e.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+import './spinner.css';const spinnerVariants = cva("spinner inline-block text-foreground", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8"
+    },
+    variant: {
+      default: "",
+      pulse: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+function Spinner({
+  className,
+  size = "md",
+  variant = "default",
+  fill = false,
+  "aria-label": ariaLabel = "Loading",
+  role = "status",
+  ...props
+}) {
+  const resolvedSize = size ?? "md";
+  const resolvedVariant = variant ?? "default";
+  const svg = /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...props,
+      role,
+      "aria-label": ariaLabel,
+      "data-size": resolvedSize,
+      "data-variant": resolvedVariant,
+      className: cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      children: resolvedVariant === "pulse" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { className: "spinner-pulse-ring", cx: "12", cy: "12", r: "7" }),
+        /* @__PURE__ */ jsx("circle", { className: "spinner-pulse-core", cx: "12", cy: "12", r: "5" })
+      ] }) : /* @__PURE__ */ jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
+    }
+  );
+  if (fill) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "spinner-fill", className: "flex h-full items-center-safe justify-center-safe", children: svg });
+  }
+  return svg;
+}
+
+export { Spinner as S };
+//# sourceMappingURL=spinner-CFtgt3oI.js.map

package/dist/spinner-CFtgt3oI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-CFtgt3oI.js","sources":["../src/ds/components/Spinner/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './spinner.css';\n\nconst spinnerVariants = cva('spinner inline-block text-foreground', {\n  variants: {\n    size: {\n      sm: 'size-4',\n      md: 'size-6',\n      lg: 'size-8',\n    },\n    variant: {\n      default: '',\n      pulse: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;\nexport type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;\nexport type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;\n\nexport type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> &\n  SpinnerVariantsProps & {\n    /** Center the spinner in the full height of its parent — the parent must have a definite height. */\n    fill?: boolean;\n  };\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  fill = false,\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  const svg = (\n    <svg\n      {...props}\n      role={role}\n      aria-label={ariaLabel}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      className={cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n    >\n      {resolvedVariant === 'pulse' ? (\n        <>\n          <circle className=\"spinner-pulse-ring\" cx=\"12\" cy=\"12\" r=\"7\" />\n          <circle className=\"spinner-pulse-core\" cx=\"12\" cy=\"12\" r=\"5\" />\n        </>\n      ) : (\n        <circle className=\"spinner-ring\" cx=\"12\" cy=\"12\" r=\"8.5\" />\n      )}\n    </svg>\n  );\n\n  if (fill) {\n    return (\n      <div data-slot=\"spinner-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {svg}\n      </div>\n    );\n  }\n\n  return svg;\n}\n\nexport { Spinner };\n"],"names":[],"mappings":";;;;AAQA,MAAM,eAAA,GAAkB,IAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAYD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,cAAc,SAAA,GAAY,SAAA;AAAA,EAC1B,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,eAAe,IAAA,IAAQ,IAAA;AAC7B,EAAA,MAAM,kBAAkB,OAAA,IAAW,SAAA;AAEnC,EAAA,MAAM,GAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAW,YAAA;AAAA,MACX,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,cAAc,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1F,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MAEP,QAAA,EAAA,eAAA,KAAoB,0BACnB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7D,GAAA,CAAC,YAAO,SAAA,EAAU,oBAAA,EAAqB,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI;AAAA,OAAA,EAC/D,CAAA,mBAEA,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,cAAA,EAAe,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM;AAAA;AAAA,GAE7D;AAGF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,2BACG,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAU,qDACrC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,GAAA;AACT;;;;"}

package/dist/src/domains/capabilities/index.d.ts

@@ -1 +1 @@
-export { useFeedbackAvailable, useObservabilityCapabilities, useTraceQueryAvailable, } from '@mastra/react/hooks/capabilities';
+export { useFeedbackAvailable, useObservabilityCapabilities, useTraceQueryAvailable, useTraceQueryDiscoveryAvailable, } from '@mastra/react/hooks/capabilities';

package/dist/src/domains/chat/attachments/attachment-preview-dialog.d.ts

@@ -1,9 +1,10 @@
 import { RefObject } from 'react';
-interface PdfEntryProps {
+import { AttachmentPreviewProps } from './use-attachment-preview';
+interface PdfEntryProps extends AttachmentPreviewProps {
     data: string;
     url?: string;
 }
-export declare const PdfEntry: ({ data, url }: PdfEntryProps) => import("react").JSX.Element;
+export declare const PdfEntry: ({ data, url, ...previewProps }: PdfEntryProps) => import("react").JSX.Element;
 interface PdfPreviewDialogProps {
     returnFocusRef?: RefObject<HTMLButtonElement | null>;
     data: string;
@@ -18,11 +19,11 @@ interface FileChipEntryProps {
     contentType?: string;
 }
 export declare const FileChipEntry: ({ name, url, contentType }: FileChipEntryProps) => import("react").JSX.Element;
-interface ImageEntryProps {
+interface ImageEntryProps extends AttachmentPreviewProps {
     src: string;
     name?: string;
 }
-export declare const ImageEntry: ({ src, name }: ImageEntryProps) => import("react").JSX.Element;
+export declare const ImageEntry: ({ src, name, ...previewProps }: ImageEntryProps) => import("react").JSX.Element;
 interface ImagePreviewDialogProps {
     returnFocusRef?: RefObject<HTMLButtonElement | null>;
     src: string;
@@ -30,11 +31,11 @@ interface ImagePreviewDialogProps {
     onOpenChange: (open: boolean) => void;
 }
 export declare const ImagePreviewDialog: ({ src, open, onOpenChange, returnFocusRef }: ImagePreviewDialogProps) => import("react").JSX.Element;
-interface TxtEntryProps {
+interface TxtEntryProps extends AttachmentPreviewProps {
     data: string;
     name?: string;
 }
-export declare const TxtEntry: ({ data, name }: TxtEntryProps) => import("react").JSX.Element;
+export declare const TxtEntry: ({ data, name, ...previewProps }: TxtEntryProps) => import("react").JSX.Element;
 interface TxtPreviewDialogProps {
     returnFocusRef?: RefObject<HTMLButtonElement | null>;
     data: string;

package/dist/src/domains/chat/attachments/composer-attachment.d.ts

@@ -3,7 +3,11 @@ export interface ComposerAttachmentProps {
     name: string;
     children: ReactNode;
     onRemove: () => void;
+    /** Optional application-owned editor, available in the sleeve and context menu. */
+    onEdit?: () => void;
+    /** Explicitly enables the context-menu preview action. Applications own preview state or navigation. */
+    onPreview?: () => void;
     /** Inline entries allow a little more width for long filenames. */
     variant?: 'thumbnail' | 'inline';
 }
-export declare function ComposerAttachment({ name, children, onRemove, variant }: ComposerAttachmentProps): import("react").JSX.Element;
+export declare function ComposerAttachment({ name, children, onRemove, onEdit, onPreview, variant, }: ComposerAttachmentProps): import("react").JSX.Element;

package/dist/src/domains/chat/attachments/use-attachment-preview.d.ts

@@ -0,0 +1,10 @@
+export interface AttachmentPreviewProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Previews can share composer state or manage their own state when used alone. */
+export declare function useAttachmentPreview({ open, onOpenChange }: AttachmentPreviewProps): {
+    open: boolean;
+    setOpen: (nextOpen: boolean) => void;
+    triggerRef: import('react').RefObject<HTMLButtonElement | null>;
+};

package/dist/src/domains/metrics/components/agent-runs-card.d.ts

@@ -0,0 +1,7 @@
+import { TimeRange } from '../drilldown';
+/** Completed and failed agent runs per bucket; a column opens its agent traces. */
+export type AgentRunsCardProps = {
+    /** Called with the time range of the clicked bar or point. */
+    onTimeRangeClick?: (range: TimeRange) => void;
+};
+export declare function AgentRunsCard({ onTimeRangeClick }: AgentRunsCardProps): import("react").JSX.Element;

package/dist/src/domains/metrics/components/card-action-buttons.d.ts

@@ -1,15 +1,10 @@
-import { LinkComponent } from '../../../ds/types/link-component';
 type CardActionButtonProps = {
-    /** Pre-built drilldown URL (typically from `useDrilldown().getTracesHref(...)`). */
-    href: string;
-    /** Override how the underlying anchor is rendered — pass a router-aware Link
-     *  to keep navigation in-app. Defaults to `<a>`. */
-    LinkComponent?: LinkComponent;
+    onClick: () => void;
 };
-/** Icon link in a MetricsCard top bar that opens the Traces page pre-filtered
+/** Icon button in a MetricsCard top bar that opens the Traces page pre-filtered
  *  to whatever dimensions the card knows about. */
-export declare function OpenInTracesButton({ href, LinkComponent }: CardActionButtonProps): import("react").JSX.Element;
-/** Icon link in a MetricsCard top bar that opens the Logs page scoped to
+export declare function OpenInTracesButton({ onClick }: CardActionButtonProps): import("react").JSX.Element;
+/** Icon button in a MetricsCard top bar that opens the Logs page scoped to
  *  errors for the card's current dimensions. */
-export declare function OpenErrorsInLogsButton({ href, LinkComponent }: CardActionButtonProps): import("react").JSX.Element;
+export declare function OpenErrorsInLogsButton({ onClick }: CardActionButtonProps): import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type ChartAreaProps = {
+    /** No data in the range: the empty chart stays (axis and height) under a message. */
+    isEmpty?: boolean;
+    emptyMessage?: string;
+    children: ReactNode;
+};
+/** A card's chart or list, filling the card body; an empty range shows a message over it. */
+export declare function ChartArea({ isEmpty, emptyMessage, children }: ChartAreaProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+/** Fills a chart card's body when its data failed to load. */
+export declare function ChartCardError(): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type ChartCardProps = {
+    title: string;
+    description?: string;
+    /** The headline number, top right: a `MetricsCard.Summary`. Its slot has a fixed width, so the title wraps the same loading or loaded. */
+    summary?: ReactNode;
+    /** Top-bar buttons revealed on hover, e.g. "View in Traces". */
+    actions?: ReactNode;
+    /** Tabs and legend above the body; they stay in every state. */
+    toolbar?: ReactNode;
+    /** Previous data stays on screen, dimmed, while a new range or filter loads. */
+    isUpdating?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Pure layout for a metrics chart card. The body has a fixed height, so the loading,
+ * error, empty and loaded states take the same room and nothing shifts around the card.
+ */
+export declare function ChartCard({ title, description, summary, actions, toolbar, isUpdating, className, children, }: ChartCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { TimeRange } from '../drilldown';
+/** Share of agent runs that failed, per bucket; a point opens the failed runs' traces. */
+export type FailureRateCardProps = {
+    /** Called from the "View errors in Logs" button. */
+    onViewErrors?: () => void;
+    /** Called with the time range of the clicked bar or point. */
+    onTimeRangeClick?: (range: TimeRange) => void;
+};
+export declare function FailureRateCard({ onViewErrors, onTimeRangeClick }: FailureRateCardProps): import("react").JSX.Element;

package/dist/src/domains/metrics/components/index.d.ts

@@ -1,12 +1,15 @@
 export { DateRangeSelector } from './date-range-selector';
-export { CHART_COLORS } from './metrics-utils';
-export { BarListContent, StackedRunsBars } from './bar-list';
 export { OpenErrorsInLogsButton, OpenInTracesButton } from './card-action-buttons';
-export { KpiCardView, type KpiCardViewProps } from './kpi-card-view';
-export { LatencyCardView, type LatencyCardViewProps, type LatencyTab } from './latency-card-view';
-export { MemoryCardView, type MemoryCardViewProps, type MemoryTab } from './memory-card-view';
-export { ModelUsageCostCardView, type ModelUsageCostCardViewProps } from './model-usage-cost-card-view';
-export { ScoresCardView, type ScoresCardViewProps } from './scores-card-view';
-export { TokenUsageByAgentCardView, type TokenUsageByAgentCardViewProps } from './token-usage-by-agent-card-view';
-export { TokenUsageTimelineCardView, type TokenUsageTimelineCardViewProps } from './token-usage-timeline-card-view';
-export { TracesVolumeCardView, type TracesVolumeCardViewProps, type VolumeTab } from './traces-volume-card-view';
+export { ChartArea, type ChartAreaProps } from './chart-area';
+export { ChartCard, type ChartCardProps } from './chart-card';
+export { ChartCardError } from './chart-card-error';
+export { KpiCard, type KpiCardProps } from './kpi-card';
+export { MetricsGrid, type MetricsGridProps, type MetricsGridItemProps } from './metrics-grid/metrics-grid';
+export { MetricsKpis } from './metrics-kpis';
+export { TokenUsageCard, type TokenUsageCardProps } from './token-usage-card';
+export { AgentRunsCard, type AgentRunsCardProps } from './agent-runs-card';
+export { FailureRateCard, type FailureRateCardProps } from './failure-rate-card';
+export { LatencyCard, type LatencyCardProps } from './latency-card';
+export { TraceVolumeCard, type TraceVolumeCardProps } from './trace-volume-card';
+export { UsageCard, type UsageCardProps } from './usage-card';
+export { ScoresCard } from './scores-card';

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

@@ -0,0 +1,21 @@
+import { LucideIcon } from 'lucide-react';
+export type KpiCardProps = {
+    label: string;
+    icon: LucideIcon;
+    value: string;
+    /** Change from the previous period, in percent. Omitted when there is nothing to compare. */
+    change?: number;
+    lowerIsBetter?: boolean;
+    detail: string;
+    /** The previous period's value, formatted. Shown only beside a `change`. */
+    previous?: string;
+    /** Names the window the change compares against, e.g. "vs previous 7d". */
+    comparison?: string;
+    isLoading?: boolean;
+    /** A new range is loading: the previous values stay on screen, dimmed. */
+    isUpdating?: boolean;
+    /** The data failed to load: a dash and an error note replace the value and the detail. */
+    isError?: boolean;
+};
+/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */
+export declare function KpiCard({ label, icon: Icon, isError, ...reading }: KpiCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { EntityType } from '@mastra/core/observability';
+import { TimeRange } from '../drilldown';
+/** P50 and P95 durations of agent runs, workflow runs or tool calls; a point opens its traces. */
+export type LatencyCardProps = {
+    /** Called from the "View in Traces" button with the entity type of the open tab. */
+    onViewTraces?: (entityType: EntityType) => void;
+    /** Called with the time range of the clicked bar or point. */
+    onTimeRangeClick?: (range: TimeRange) => void;
+};
+export declare function LatencyCard({ onViewTraces, onTimeRangeClick }: LatencyCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type MetricsGridColumns = 2 | 3;
+export type MetricsGridItemSpan = 1 | 2 | 'full';
+export type MetricsGridProps = {
+    children: ReactNode;
+    /** Maximum number of columns on wide containers. Pick a divisor of the card count to avoid a ragged last row. */
+    columns?: MetricsGridColumns;
+    className?: string;
+};
+/** Responsive grid of metrics cards: one column on narrow containers, up to `columns` on wide ones. */
+export declare function MetricsGrid({ children, columns, className }: MetricsGridProps): import("react").JSX.Element;
+export declare namespace MetricsGrid {
+    var Item: typeof MetricsGridItem;
+}
+export type MetricsGridItemProps = {
+    children: ReactNode;
+    span?: MetricsGridItemSpan;
+    className?: string;
+};
+/** A grid cell. The grid owns the width, so each card's own `min-w-*` is neutralised. */
+declare function MetricsGridItem({ children, span, className }: MetricsGridItemProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+/** Agent runs, model cost, tokens and threads for the range, each against the previous range. */
+export declare function MetricsKpis(): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+/** Average result of each scorer over time, 0 to 1. */
+export declare function ScoresCard(): import("react").JSX.Element;

package/dist/src/domains/metrics/components/token-usage-card.d.ts

@@ -0,0 +1,9 @@
+import { TimeRange } from '../drilldown';
+/** Tokens (input, cache reads, output) or model cost per bucket; a bar opens its traces. */
+export type TokenUsageCardProps = {
+    /** Called from the "View in Traces" button. */
+    onViewTraces?: () => void;
+    /** Called with the time range of the clicked bar or point. */
+    onTimeRangeClick?: (range: TimeRange) => void;
+};
+export declare function TokenUsageCard({ onViewTraces, onTimeRangeClick }: TokenUsageCardProps): import("react").JSX.Element;

package/dist/src/domains/metrics/components/trace-volume-card.d.ts

@@ -0,0 +1,11 @@
+import { EntityType } from '@mastra/core/observability';
+/** Runs per agent, workflow or tool, ranked, with each one's error rate; a row opens its traces. */
+export type TraceVolumeCardProps = {
+    /** Called from the "View in Traces" button with the entity type of the open tab. */
+    onViewTraces?: (entityType: EntityType) => void;
+    /** Called from the "View errors in Logs" button with the entity type of the open tab. */
+    onViewErrors?: (entityType: EntityType) => void;
+    /** Called with the entity type of the open tab and the clicked row's name. */
+    onEntityClick?: (entityType: EntityType, name: string) => void;
+};
+export declare function TraceVolumeCard({ onViewTraces, onViewErrors, onEntityClick }: TraceVolumeCardProps): import("react").JSX.Element;

package/dist/src/domains/metrics/components/usage-card.d.ts

@@ -0,0 +1,12 @@
+export type UsageCardProps = {
+    /** Called from the "View in Traces" button. */
+    onViewTraces?: () => void;
+    /** Called with the agent name of the clicked row in the Agents tab. */
+    onAgentClick?: (agentName: string) => void;
+    /** Called with the model of the clicked row in the Models tab. */
+    onModelClick?: (model: string) => void;
+    /** Called with the thread ID of the clicked row in the Threads tab. */
+    onThreadClick?: (threadId: string) => void;
+};
+/** Who is spending: agents, models or threads ranked by cost share, with tokens. Only the open tab loads. */
+export declare function UsageCard(props: UsageCardProps): import("react").JSX.Element;

package/dist/src/domains/metrics/drilldown.d.ts

@@ -2,15 +2,11 @@ import { EntityType } from '@mastra/core/observability';
 import { DatePreset, DateRange } from './hooks/use-metrics';
 import { MetricsDimensionalFilter } from './metrics-filters';
 /** Narrow time window for a single chart node. Callers pass concrete start/end
- *  Dates (typically bucket boundaries); these bypass the preset. */
-export type DrilldownWindow = {
+ *  Dates; these bypass the preset. */
+export type TimeRange = {
     from: Date;
     to: Date;
 };
-/** Narrow a raw timestamp into the time-series bucket window that surrounds
- *  it. For a chart with `interval = 1h`, clicking a node at 14:37Z drills into
- *  14:00Z → 15:00Z. For `1d`, the corresponding UTC day. */
-export declare function narrowWindowToBucket(tsMs: number, interval: '1h' | '1d'): DrilldownWindow;
 /** Fields a card may use to scope the drilldown. Only the pieces the caller
  *  knows are attached; everything else falls through to the current dashboard
  *  filters. `status` is only valid for traces. */
@@ -24,8 +20,9 @@ export type DrilldownScope = {
     /** Trace-only. Valid for drill-downs from "errors" segments. */
     status?: 'running' | 'success' | 'error';
     /** Overrides date preset with explicit window bounds. */
-    window?: DrilldownWindow;
+    window?: TimeRange;
 };
+/** A card's navigation callback. The call site decides where a scope leads. */
 type BuildArgs = {
     /** Current metrics dashboard preset. */
     preset: DatePreset;

package/dist/src/domains/metrics/hooks/index.d.ts

@@ -14,7 +14,10 @@ export { useActiveThreadsKpiMetrics } from '@mastra/react/hooks/metrics';
 export { useActiveResourcesKpiMetrics } from '@mastra/react/hooks/metrics';
 export { useTopActiveThreadsMetrics, type ActiveThreadRow } from '@mastra/react/hooks/metrics';
 export { useTopResourcesByThreadsMetrics, type ResourceThreadsRow } from '@mastra/react/hooks/metrics';
-export { useDrilldown } from './use-drilldown';
-export { buildLogsDrilldownUrl, buildTracesDrilldownUrl, narrowWindowToBucket, type DrilldownScope, type DrilldownWindow, } from '../drilldown';
+export { buildLogsDrilldownUrl, buildTracesDrilldownUrl, type DrilldownScope, type TimeRange } from '../drilldown';
 export { chooseMetricsInterval, formatMetricsBucketLabel, type MetricsInterval } from '@mastra/react/hooks/metrics';
 export { applyMetricsPropertyFilterTokens, buildMetricsDimensionalFilter, clearSavedMetricsFilters, createMetricsPropertyFilterFields, getMetricsPropertyFilterTokens, hasAnyMetricsFilterParams, loadMetricsFiltersFromStorage, saveMetricsFiltersToStorage, type MetricsDimensionalFilter, type MetricsPropertyFilterFieldId, } from '../metrics-filters';
+export { useMetricsActivity, type ActivityBucket } from './use-metrics-activity';
+export { useMetricsLatency, type LatencyBucket, type LatencyEntity } from './use-metrics-latency';
+export { useMetricsScores, type MetricsScores, type ScorerAverage, type ScoresBucket } from './use-metrics-scores';
+export { useTokenSpend, type SpendDimension, type SpendRow } from './use-token-spend';

package/dist/src/domains/metrics/hooks/use-metrics-activity.d.ts

@@ -0,0 +1,18 @@
+import { BucketLabels } from '../lib/metrics-buckets';
+export type ActivityBucket = BucketLabels & {
+    /** Uncached input tokens. */
+    input: number;
+    cacheRead: number;
+    output: number;
+    /** Estimated model cost, USD. */
+    cost: number;
+    completed: number;
+    failed: number;
+    /** failed / (completed + failed), 0 when there were no runs. */
+    failureRate: number;
+};
+/**
+ * Tokens, cost and agent runs per chart bucket, for the token, runs and failure-rate cards.
+ * Keeps the previous range on screen while a new one loads (`isPlaceholderData`).
+ */
+export declare function useMetricsActivity(): import('@tanstack/react-query').UseQueryResult<ActivityBucket[], Error>;

package/dist/src/domains/metrics/hooks/use-metrics-latency.d.ts

@@ -0,0 +1,9 @@
+import { BucketLabels } from '../lib/metrics-buckets';
+export type LatencyEntity = 'agents' | 'workflows' | 'tools';
+/** A bucket without runs has no percentile: the line skips it instead of dropping to zero. */
+export type LatencyBucket = BucketLabels & Partial<Record<`${LatencyEntity}P50` | `${LatencyEntity}P95`, number>>;
+/**
+ * P50 and P95 duration of agent runs, workflow runs and tool calls. Percentiles can't be merged
+ * across buckets, so this keeps the API's own 1h or 1d buckets (more points than the bar charts).
+ */
+export declare function useMetricsLatency(): import('@tanstack/react-query').UseQueryResult<LatencyBucket[], Error>;

package/dist/src/domains/metrics/hooks/use-metrics-scores.d.ts

@@ -0,0 +1,22 @@
+import { BucketLabels } from '../lib/metrics-buckets';
+/** A scorer with results in the range, and its mean score over the range. */
+export type ScorerAverage = {
+    scorerId: string;
+    name: string;
+    average: number;
+};
+/** One bucket of average scores, keyed by scorer id; a bucket without results has no value. */
+export type ScoresBucket = BucketLabels & {
+    [scorerId: string]: number | string | undefined;
+};
+export type MetricsScores = {
+    scorers: ScorerAverage[];
+    buckets: ScoresBucket[];
+};
+/**
+ * Average score per scorer over the range, and per bucket of the API's own 1h or 1d buckets
+ * (averages can't be merged across buckets). Score queries need a scorer id, and Platform's
+ * observability API can't list scorers, so the scorers come from the most recent scores in the
+ * range: a scorer with no result among them is left out.
+ */
+export declare function useMetricsScores(): import('@tanstack/react-query').UseQueryResult<MetricsScores, Error>;