@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/span-payload-primitives-DnRsP93D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"span-payload-primitives-DnRsP93D.cjs","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 { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\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  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={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\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      </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';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\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-body 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=\"text-meta text-placeholder flex items-center gap-1 tracking-widest 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":["jsx","SpanPayloadJson","jsxs","BadgeWrapper","ToolCallPresentedHeader","presentTool","MarkdownRenderer","Collapsible","CollapsibleTrigger","ChevronRightIcon","CollapsibleContent"],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+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-B2uUy8w5.js';
+import { M as MarkdownRenderer } from './markdown-renderer-B0gTm_Ea.js';
+import { BadgeWrapper } from './domains/chat/components/badge-wrapper.es.js';
+import { j as ToolCallPresentedHeader } from './tool-call-K147tCug.js';
+import { p as presentTool } from './tool-presentation-D-smNbXC.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;
+  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(ToolCallPresentedHeader, { ...presentTool(call.toolName, input) }),
+        children: /* @__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("div", { className: "text-meta text-placeholder tracking-widest 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-body text-foreground", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children }) });
+}
+function SpanPayloadCollapsible({
+  label,
+  children,
+  defaultOpen = false
+}) {
+  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "text-meta text-placeholder flex items-center gap-1 tracking-widest 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-sbxk4CHC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-payload-primitives-sbxk4CHC.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 { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\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  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={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\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      </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';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\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-body 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=\"text-meta text-placeholder flex items-center gap-1 tracking-widest 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-CqP-NaB2.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+require('./spinner.css');const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-C-fBJhpb.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+const spinnerVariants = index.cva("spinner inline-block text-foreground", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-6"
+    },
+    variant: {
+      default: "",
+      pulse: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+function Spinner({
+  className,
+  size = "md",
+  variant = "default",
+  "aria-label": ariaLabel = "Loading",
+  role = "status",
+  ...props
+}) {
+  const resolvedSize = size ?? "md";
+  const resolvedVariant = variant ?? "default";
+  return /* @__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" })
+    }
+  );
+}
+
+exports.Spinner = Spinner;
+//# sourceMappingURL=spinner-CqP-NaB2.cjs.map

package/dist/spinner-CqP-NaB2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-CqP-NaB2.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    },\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'> & SpinnerVariantsProps;\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  return (\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\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;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;AAQD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,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,uBACEC,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;AAEJ;;;;"}

package/dist/spinner-D2C2DYw8.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as cva } from './index-Dubp6Qv4.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+import './spinner.css';const spinnerVariants = cva("spinner inline-block text-foreground", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-6"
+    },
+    variant: {
+      default: "",
+      pulse: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+function Spinner({
+  className,
+  size = "md",
+  variant = "default",
+  "aria-label": ariaLabel = "Loading",
+  role = "status",
+  ...props
+}) {
+  const resolvedSize = size ?? "md";
+  const resolvedVariant = variant ?? "default";
+  return /* @__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" })
+    }
+  );
+}
+
+export { Spinner as S };
+//# sourceMappingURL=spinner-D2C2DYw8.js.map

package/dist/spinner-D2C2DYw8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-D2C2DYw8.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    },\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'> & SpinnerVariantsProps;\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  return (\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\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;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;AAQD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,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,uBACE,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;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
 import { LogRecord } from '../types';
+import { DataListSort } from '../../../ds/components/DataList';
 export interface LogsListViewProps {
     logs: LogRecord[];
     isLoading?: boolean;
@@ -12,10 +13,13 @@ export interface LogsListViewProps {
     featuredLogId?: string | null;
     /** Called when a row is clicked. The current toggle + trace-sync logic is the consumer's call. */
     onLogClick: (log: LogRecord) => void;
+    /** Current timestamp sort direction. When `onSortChange` is provided the Date/Time headers become sortable. */
+    timestampSort?: DataListSort;
+    onSortChange?: (direction: DataListSort, key: 'timestamp') => void;
 }
 /**
  * Virtualized presentational list. Renders only the visible window of logs via
  * TanStack Virtual, sandwiched between top/bottom Spacers that preserve total
  * scroll height. Owns no state and fetches no data.
  */
-export declare function LogsListView({ logs, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, logIdMap, featuredLogId, onLogClick, }: LogsListViewProps): import("react").JSX.Element;
+export declare function LogsListView({ logs, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, logIdMap, featuredLogId, onLogClick, timestampSort, onSortChange, }: LogsListViewProps): import("react").JSX.Element;

package/dist/src/domains/logs/hooks/use-logs.d.ts

@@ -11,8 +11,10 @@ interface UseLogsReturn {
     error: Error | null;
     setEndOfListElement: (node: HTMLDivElement | null) => void;
 }
+export type LogsOrderBy = NonNullable<ListLogsArgs['orderBy']>;
 export interface LogsFilters {
     filters?: ListLogsArgs['filters'];
+    orderBy?: LogsOrderBy;
 }
 export declare function getLogsRefetchInterval(query: {
     state: {

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

@@ -7,15 +7,12 @@ export declare const METRICS_DATA_LIST_PROPS: {
     };
 };
 export declare const CHART_COLORS: {
-    readonly green: "#22c55e";
-    readonly orange: "#fb923c";
-    readonly pink: "#f472b6";
-    readonly purple: "#8b5cf6";
-    readonly blue: "#4f83f1";
-    readonly blueDark: "#2b5cd9";
-    readonly blueLight: "#6b8fe5";
-    readonly red: "#f87171";
-    readonly greenDark: "#15613a";
-    readonly redDark: "#991b1b";
-    readonly yellow: "#facc15";
+    readonly green: "var(--chart-green)";
+    readonly orange: "var(--chart-orange)";
+    readonly pink: "var(--chart-pink)";
+    readonly purple: "var(--chart-purple)";
+    readonly blue: "var(--chart-blue)";
+    readonly blueDark: "var(--chart-blue-deep)";
+    readonly red: "var(--chart-red)";
+    readonly yellow: "var(--chart-yellow)";
 };

package/dist/src/domains/traces/components/span-timing-hover-card.d.ts

@@ -3,6 +3,5 @@ type SpanTimingHoverCardProps = {
     span: UISpan;
     startShiftMs: number;
 };
-/** "Span Timing" hover card body. Must be rendered inside a `HoverCard`. */
 export declare function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps): import("react").JSX.Element;
 export {};

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

@@ -1,11 +1,15 @@
-import { TraceColumnPreferences, TraceOptionalColumn } from '../trace-list-columns';
+import { TraceColumnPreferences, TraceCustomColumn, TraceOptionalColumn } from '../trace-list-columns';
 type TraceColumnsMenuProps = {
     preferences: TraceColumnPreferences;
+    /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */
+    availableMetadataKeys?: readonly string[];
     usageDisabledReason?: string;
     onToggleColumn: (column: TraceOptionalColumn) => void;
+    onAddCustomColumn: (field: TraceCustomColumn) => void;
+    onRemoveCustomColumn: (field: TraceCustomColumn) => void;
     onAddMetadataColumn: (key: string) => void;
     onRemoveMetadataColumn: (key: string) => void;
     onReset: () => void;
 };
-export declare function TraceColumnsMenu({ preferences, usageDisabledReason, onToggleColumn, onAddMetadataColumn, onRemoveMetadataColumn, onReset, }: TraceColumnsMenuProps): import("react").JSX.Element;
+export declare function TraceColumnsMenu({ preferences, availableMetadataKeys, usageDisabledReason, onToggleColumn, onAddCustomColumn, onRemoveCustomColumn, onAddMetadataColumn, onRemoveMetadataColumn, onReset, }: TraceColumnsMenuProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-time-range-chip.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TraceTimeRangeChip } from './trace-time-range-chip';
+declare const meta: Meta<typeof TraceTimeRangeChip>;
+export default meta;
+export declare const Default: StoryObj;
+export declare const CustomRange: StoryObj;
+export declare const Disabled: StoryObj;

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

@@ -1,4 +1,5 @@
-import { TraceColumnPreferences, TraceUsageSummary } from '../trace-list-columns';
+import { TraceColumnPreferences, TraceCustomColumn, TraceUsageSummary } from '../trace-list-columns';
+import { DataListSort } from '../../../ds/components/DataList';
 export type TracesListViewTrace = {
     traceId: string;
     /** Required for branch rows; absent on plain trace rows (which are root-rooted). */
@@ -9,6 +10,9 @@ export type TracesListViewTrace = {
     entityType?: string | null;
     entityId?: string | null;
     entityName?: string | null;
+    threadId?: string | null;
+    resourceId?: string | null;
+    environment?: string | null;
     status?: string | null;
     /** Server-rendered preview of `input`. Present on lightweight rows, which omit `input` itself. */
     inputPreview?: string | null;
@@ -45,9 +49,14 @@ export type TracesListViewProps = {
     usageByTraceId?: ReadonlyMap<string, TraceUsageSummary>;
     /** Called when a row is clicked. The current selection logic (toggle on same id) is the consumer's call. */
     onTraceClick: (trace: TracesListViewTrace) => void;
+    /** Current sort of the Created column. When `onSortChange` is provided the header becomes sortable. */
+    createdSort?: DataListSort;
+    onSortChange?: (direction: DataListSort, key: 'startedAt') => void;
+    /** When provided, custom column headers offer an `is <value>` filter for every value currently listed. */
+    onFilterByField?: (field: TraceCustomColumn, value: string) => void;
 };
 /**
  * Virtualized presentational list. Renders only the visible window via TanStack Virtual, and
  * uses DataList primitives for layout (CSS Grid with subgrid rows).
  */
-export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, isBranchesMode, recentlyAddedKeys, columnPreferences, usageByTraceId, onTraceClick, }: TracesListViewProps): import("react").JSX.Element;
+export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, isBranchesMode, recentlyAddedKeys, columnPreferences, usageByTraceId, onTraceClick, createdSort, onSortChange, onFilterByField, }: TracesListViewProps): import("react").JSX.Element;

package/dist/src/domains/traces/hooks/use-trace-column-preferences.d.ts

@@ -1,7 +1,9 @@
-import { TraceColumnPreferences, TraceOptionalColumn } from '../trace-list-columns';
+import { TraceColumnPreferences, TraceCustomColumn, TraceOptionalColumn } from '../trace-list-columns';
 export declare function useTraceColumnPreferences(): {
     preferences: TraceColumnPreferences;
     toggleColumn: (column: TraceOptionalColumn) => void;
+    addCustomColumn: (field: TraceCustomColumn) => void;
+    removeCustomColumn: (field: TraceCustomColumn) => void;
     addMetadataColumn: (key: string) => void;
     removeMetadataColumn: (key: string) => void;
     resetColumns: () => void;

package/dist/src/domains/traces/hooks/use-trace-metadata-filter-fields.d.ts

@@ -1,4 +1,4 @@
-import { GetTraceQueryFieldsArgs } from '@mastra/client-js';
+import { GetTraceQueryFieldsArgs, GetTraceQueryValuesArgs, MastraClient } from '@mastra/client-js';
 import { FilterBarSuggestionsResolver } from '../../../ds/components/FilterBar/types';
 export type TraceQueryDiscoveryTimeRange = GetTraceQueryFieldsArgs['timeRange'];
 export type TraceMetadataFilterField = {
@@ -7,6 +7,9 @@ export type TraceMetadataFilterField = {
     suggestions: FilterBarSuggestionsResolver;
 };
 export declare const traceQueryFieldsQueryKey: (timeRange: TraceQueryDiscoveryTimeRange) => readonly ["trace-query-fields", string, string];
+/** Lazy FilterBar suggestions resolver backed by the value-discovery endpoint for one
+ *  `predicateScope` + `path`. FilterBar owns debounce/abort; this only fetches. */
+export declare const createTraceQueryValuesResolver: (client: MastraClient, timeRange: TraceQueryDiscoveryTimeRange, predicateScope: GetTraceQueryValuesArgs["predicateScope"], path: string) => FilterBarSuggestionsResolver;
 /**
  * Discovers the `metadata.*` fields observed on traces in the given time range and returns
  * them as filter bar fields, each with a lazy `suggestions` resolver that fetches the field's

package/dist/src/domains/traces/hooks/use-trace-query.d.ts

@@ -1,4 +1,4 @@
-import { MastraClient, QueryTracesInput } from '@mastra/client-js';
+import { MastraClient, QueryTracesKeysetInput } from '@mastra/client-js';
 export declare const TRACE_QUERY_PER_PAGE = 25;
 type TraceQueryResponse = Awaited<ReturnType<MastraClient['queryTraces']>>;
 type TraceQueryCursorResponse = Extract<TraceQueryResponse, {
@@ -7,7 +7,7 @@ type TraceQueryCursorResponse = Extract<TraceQueryResponse, {
     };
 }>;
 type TraceQueryTrace = TraceQueryResponse['traces'][number];
-export type TraceQueryArgs = Omit<QueryTracesInput, 'page' | 'pagination'>;
+export type TraceQueryArgs = Omit<QueryTracesKeysetInput, 'page' | 'pagination'>;
 export interface UseTraceQueryArgs {
     query: TraceQueryArgs | undefined;
     limit?: number;

package/dist/src/domains/traces/hooks/use-trace-spans.d.ts

@@ -11,17 +11,17 @@ export declare const traceSpansQueryOptions: (client: MastraClient, traceId: str
         traceId: string;
         spanId: string;
         name: string;
-        spanType: "workflow_run" | "rag_ingestion" | "workflow_step" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
+        spanType: "workflow_run" | "workflow_step" | "rag_ingestion" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "mcp_server_request" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
         isEvent: boolean;
         startedAt: string;
         parentSpanId?: (string | null) | undefined | undefined;
-        entityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+        entityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
         entityId?: (string | null) | undefined | undefined;
         entityName?: (string | null) | undefined | undefined;
-        parentEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+        parentEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
         parentEntityId?: (string | null) | undefined | undefined;
         parentEntityName?: (string | null) | undefined | undefined;
-        rootEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+        rootEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
         rootEntityId?: (string | null) | undefined | undefined;
         rootEntityName?: (string | null) | undefined | undefined;
         userId?: (string | null) | undefined | undefined;
@@ -66,17 +66,17 @@ export declare const traceSpansQueryOptions: (client: MastraClient, traceId: str
         traceId: string;
         spanId: string;
         name: string;
-        spanType: "workflow_run" | "rag_ingestion" | "workflow_step" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
+        spanType: "workflow_run" | "workflow_step" | "rag_ingestion" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "mcp_server_request" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
         isEvent: boolean;
         startedAt: string;
         parentSpanId?: (string | null) | undefined | undefined;
-        entityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+        entityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
         entityId?: (string | null) | undefined | undefined;
         entityName?: (string | null) | undefined | undefined;
-        parentEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+        parentEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
         parentEntityId?: (string | null) | undefined | undefined;
         parentEntityName?: (string | null) | undefined | undefined;
-        rootEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+        rootEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
         rootEntityId?: (string | null) | undefined | undefined;
         rootEntityName?: (string | null) | undefined | undefined;
         userId?: (string | null) | undefined | undefined;
@@ -122,17 +122,17 @@ export declare const traceSpansQueryOptions: (client: MastraClient, traceId: str
             traceId: string;
             spanId: string;
             name: string;
-            spanType: "workflow_run" | "rag_ingestion" | "workflow_step" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
+            spanType: "workflow_run" | "workflow_step" | "rag_ingestion" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "mcp_server_request" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
             isEvent: boolean;
             startedAt: string;
             parentSpanId?: (string | null) | undefined | undefined;
-            entityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+            entityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
             entityId?: (string | null) | undefined | undefined;
             entityName?: (string | null) | undefined | undefined;
-            parentEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+            parentEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
             parentEntityId?: (string | null) | undefined | undefined;
             parentEntityName?: (string | null) | undefined | undefined;
-            rootEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+            rootEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
             rootEntityId?: (string | null) | undefined | undefined;
             rootEntityName?: (string | null) | undefined | undefined;
             userId?: (string | null) | undefined | undefined;
@@ -180,17 +180,17 @@ export declare const traceSpansQueryOptions: (client: MastraClient, traceId: str
                 traceId: string;
                 spanId: string;
                 name: string;
-                spanType: "workflow_run" | "rag_ingestion" | "workflow_step" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
+                spanType: "workflow_run" | "workflow_step" | "rag_ingestion" | "agent_run" | "scorer_run" | "scorer_step" | "generic" | "model_generation" | "model_step" | "model_inference" | "model_chunk" | "mcp_tool_call" | "mcp_server_request" | "processor_run" | "tool_call" | "client_tool_call" | "provider_tool_call" | "workflow_conditional" | "workflow_conditional_eval" | "workflow_parallel" | "workflow_loop" | "workflow_sleep" | "workflow_wait_event" | "memory_operation" | "workspace_action" | "rag_embedding" | "rag_vector_operation" | "rag_action" | "graph_action" | "mapping" | "skill_resolution" | "skill_action" | "agent_signal";
                 isEvent: boolean;
                 startedAt: string;
                 parentSpanId?: (string | null) | undefined | undefined;
-                entityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+                entityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
                 entityId?: (string | null) | undefined | undefined;
                 entityName?: (string | null) | undefined | undefined;
-                parentEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+                parentEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
                 parentEntityId?: (string | null) | undefined | undefined;
                 parentEntityName?: (string | null) | undefined | undefined;
-                rootEntityType?: ("agent" | "workflow_run" | "tool" | "scorer" | "rag_ingestion" | "trajectory" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "workflow_step" | "memory") | null | undefined;
+                rootEntityType?: ("agent" | "workflow_run" | "workflow_step" | "tool" | "scorer" | "memory" | "mcp_server" | "input_processor" | "input_step_processor" | "output_processor" | "output_step_processor" | "tool_result_processor" | "rag_ingestion" | "trajectory") | null | undefined;
                 rootEntityId?: (string | null) | undefined | undefined;
                 rootEntityName?: (string | null) | undefined | undefined;
                 userId?: (string | null) | undefined | undefined;

package/dist/src/domains/traces/hooks/use-trace-url-state.d.ts

@@ -1,7 +1,6 @@
 import { TraceSpanView } from '../components/trace-data-panel-view';
 import { SpanTab, TraceDatePreset } from '../index';
-import { EntityOptions, TraceListMode, TraceStatusFilter } from '../trace-filters';
-import { PropertyFilterToken } from '../../../ds/components/PropertyFilter/types';
+import { EntityOptions, TraceFilterToken, TraceListMode, TraceStatusFilter } from '../trace-filters';
 /** Minimal interface compatible with react-router's `setSearchParams`. */
 export type SetURLSearchParamsLike = (next: URLSearchParams | ((prev: URLSearchParams) => URLSearchParams), options?: {
     replace?: boolean;
@@ -36,7 +35,7 @@ export interface UseTraceUrlStateResult {
     listMode: TraceListMode;
     selectedEntityOption: EntityOptions | undefined;
     selectedStatus: TraceStatusFilter | undefined;
-    filterTokens: PropertyFilterToken[];
+    filterTokens: TraceFilterToken[];
     /**
      * Selects a row. In traces mode pass just `traceId` (and optionally a `spanId` for an
      * initial span selection in the panel). In branches mode also pass `anchorSpanId` — the
@@ -62,7 +61,7 @@ export interface UseTraceUrlStateResult {
     handleHighlightSpans: (spanIds: string[]) => void;
     /** Switches the list view between traces and branches. Clears the current selection. */
     handleListModeChange: (mode: TraceListMode) => void;
-    handleFilterTokensChange: (nextTokens: PropertyFilterToken[]) => void;
+    handleFilterTokensChange: (nextTokens: TraceFilterToken[]) => void;
     handleDateChange: (value: Date | undefined, type: 'from' | 'to') => void;
     /** Writes both ends of a custom range in one URL update (two `handleDateChange` calls in the
      *  same tick would clobber each other through react-router's closure-bound setter). */
@@ -70,7 +69,7 @@ export interface UseTraceUrlStateResult {
     handleDatePresetChange: (preset: TraceDatePreset) => void;
     handleRemoveAll: () => void;
     /** Lower-level helper used by `handleClear`: writes a token set and clears the trace/span selection. */
-    applyFilterTokens: (tokens: PropertyFilterToken[]) => void;
+    applyFilterTokens: (tokens: TraceFilterToken[]) => void;
 }
 /**
  * Owns all URL-derived state and URL-modifying handlers for the traces page. Routing-agnostic —