@mastra/playground-ui 53.0.0-alpha.11 → 53.0.0-alpha.13

package/dist/domains/traces/components/trace-columns-menu.cjs.js

@@ -7,7 +7,7 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const Button = require('../../../Button-D10WB4vc.cjs');
-const dialog = require('../../../dialog-K0q0KOOW.cjs');
+const dialog = require('../../../dialog-D-7Hkb3j.cjs');
 const dropdownMenu = require('../../../dropdown-menu-qsDhHNES.cjs');
 const input = require('../../../input-DBrWBeUp.cjs');
 const label = require('../../../label-B9ERiuZb.cjs');

package/dist/domains/traces/components/trace-columns-menu.es.js

@@ -3,7 +3,7 @@ import { Columns3Icon, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 import { TRACE_USAGE_COLUMNS } from '../trace-list-columns.es.js';
 import { B as Button } from '../../../Button-BsfLQEC6.js';
-import { D as Dialog, c as DialogContent, f as DialogHeader, i as DialogTitle, d as DialogDescription, a as DialogBody, e as DialogFooter } from '../../../dialog-CESxLg8S.js';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, f as DialogFooter } from '../../../dialog-CZMPDVUj.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-BYTyEuSa.js';
 import { I as Input } from '../../../input-DNjusDwY.js';
 import { L as Label } from '../../../label-Um4lWyRe.js';

package/dist/domains/traces/components/trace-data-panel-view.cjs.js

@@ -13,7 +13,7 @@ const domains_traces_components_traceSummaryDescription = require('./trace-summa
 const domains_traces_components_traceTimeline = require('./trace-timeline.cjs.js');
 const Button = require('../../../Button-D10WB4vc.cjs');
 const buttonsGroup = require('../../../buttons-group-Cn36DWYX.cjs');
-const dataPanel = require('../../../data-panel-Bo2HCylZ.cjs');
+const dataPanel = require('../../../data-panel-Cv9j_IGQ.cjs');
 const dropdownMenu = require('../../../dropdown-menu-qsDhHNES.cjs');
 const searchFieldBlock = require('../../../search-field-block-CiinIsub.cjs');
 const Notice = require('../../../Notice-D_ji361h.cjs');

package/dist/domains/traces/components/trace-data-panel-view.es.js

@@ -9,7 +9,7 @@ import { TraceSummaryDescription } from './trace-summary-description.es.js';
 import { TraceTimeline } from './trace-timeline.es.js';
 import { B as Button } from '../../../Button-BsfLQEC6.js';
 import { B as ButtonsGroup } from '../../../buttons-group-BjM12HPx.js';
-import { D as DataPanel } from '../../../data-panel-T3vp7wTD.js';
+import { D as DataPanel } from '../../../data-panel-DXxeSnL1.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-BYTyEuSa.js';
 import { S as SearchFieldBlock } from '../../../search-field-block-D51aN1d9.js';
 import { N as Notice } from '../../../Notice-DSUAUUYU.js';

package/dist/domains/traces/hooks/use-branch.cjs.js

@@ -7,7 +7,6 @@ const reactQuery = require('@tanstack/react-query');
 const domains_traces_utils_toSearchableSpans = require('../utils/to-searchable-spans.cjs.js');
 require('date-fns');
 
-const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
 function useBranch({
   traceId,
   spanId,
@@ -25,11 +24,8 @@ function useBranch({
     // Builds each span's search haystack once per fetch, cached with the query.
     select: domains_traces_utils_toSearchableSpans.selectSearchableSpans,
     enabled: !!traceId && !!spanId,
-    staleTime: (query) => {
-      const data = query.state.data;
-      const isFinished = data?.spans.every((s) => Boolean(s.endedAt));
-      return isFinished ? IMMUTABLE_CACHE_TIME : 0;
-    }
+    // A finished subtree can still gain spans from a resumed run or delayed export.
+    staleTime: 0
   });
 }
 

package/dist/domains/traces/hooks/use-branch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-branch.cjs.js","sources":["../../../../src/domains/traces/hooks/use-branch.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\nexport interface UseBranchArgs {\n  traceId: string | null | undefined;\n  spanId: string | null | undefined;\n  depth?: number;\n}\n\nexport function useBranch({\n  traceId,\n  spanId,\n  depth,\n}: UseBranchArgs): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['branch', traceId, spanId, depth],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('traceId and spanId are required');\n      }\n      return client.getBranch({ traceId, spanId, depth });\n    },\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n    enabled: !!traceId && !!spanId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(s => Boolean(s.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n}\n"],"names":["useMastraClient","useQuery","selectSearchableSpans"],"mappings":";;;;;;;;;AAMA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAQ5C,SAAS,SAAA,CAAU;AAAA,EACxB,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAuF;AACrF,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,QAAA,EAAU,OAAA,EAAS,QAAQ,KAAK,CAAA;AAAA,IAC3C,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,iCAAiC,CAAA;AAAA,MACnD;AACA,MAAA,OAAO,OAAO,SAAA,CAAU,EAAE,OAAA,EAAS,MAAA,EAAQ,OAAO,CAAA;AAAA,IACpD,CAAA;AAAA;AAAA,IAEA,MAAA,EAAQC,4DAAA;AAAA,IACR,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA,IACxB,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,MAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,OAAK,OAAA,CAAQ,CAAA,CAAE,OAAO,CAAC,CAAA;AAC5D,MAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,IAC7C;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-branch.cjs.js","sources":["../../../../src/domains/traces/hooks/use-branch.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nexport interface UseBranchArgs {\n  traceId: string | null | undefined;\n  spanId: string | null | undefined;\n  depth?: number;\n}\n\nexport function useBranch({\n  traceId,\n  spanId,\n  depth,\n}: UseBranchArgs): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['branch', traceId, spanId, depth],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('traceId and spanId are required');\n      }\n      return client.getBranch({ traceId, spanId, depth });\n    },\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n    enabled: !!traceId && !!spanId,\n    // A finished subtree can still gain spans from a resumed run or delayed export.\n    staleTime: 0,\n  });\n}\n"],"names":["useMastraClient","useQuery","selectSearchableSpans"],"mappings":";;;;;;;;;AAYO,SAAS,SAAA,CAAU;AAAA,EACxB,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAuF;AACrF,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,QAAA,EAAU,OAAA,EAAS,QAAQ,KAAK,CAAA;AAAA,IAC3C,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,iCAAiC,CAAA;AAAA,MACnD;AACA,MAAA,OAAO,OAAO,SAAA,CAAU,EAAE,OAAA,EAAS,MAAA,EAAQ,OAAO,CAAA;AAAA,IACpD,CAAA;AAAA;AAAA,IAEA,MAAA,EAAQC,4DAAA;AAAA,IACR,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA;AAAA,IAExB,SAAA,EAAW;AAAA,GACZ,CAAA;AACH;;;;"}

package/dist/domains/traces/hooks/use-branch.es.js

@@ -3,7 +3,6 @@ import { useQuery } from '@tanstack/react-query';
 import { selectSearchableSpans } from '../utils/to-searchable-spans.es.js';
 import 'date-fns';
 
-const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
 function useBranch({
   traceId,
   spanId,
@@ -21,11 +20,8 @@ function useBranch({
     // Builds each span's search haystack once per fetch, cached with the query.
     select: selectSearchableSpans,
     enabled: !!traceId && !!spanId,
-    staleTime: (query) => {
-      const data = query.state.data;
-      const isFinished = data?.spans.every((s) => Boolean(s.endedAt));
-      return isFinished ? IMMUTABLE_CACHE_TIME : 0;
-    }
+    // A finished subtree can still gain spans from a resumed run or delayed export.
+    staleTime: 0
   });
 }
 

package/dist/domains/traces/hooks/use-branch.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-branch.es.js","sources":["../../../../src/domains/traces/hooks/use-branch.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\nexport interface UseBranchArgs {\n  traceId: string | null | undefined;\n  spanId: string | null | undefined;\n  depth?: number;\n}\n\nexport function useBranch({\n  traceId,\n  spanId,\n  depth,\n}: UseBranchArgs): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['branch', traceId, spanId, depth],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('traceId and spanId are required');\n      }\n      return client.getBranch({ traceId, spanId, depth });\n    },\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n    enabled: !!traceId && !!spanId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(s => Boolean(s.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;AAMA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAQ5C,SAAS,SAAA,CAAU;AAAA,EACxB,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAuF;AACrF,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,QAAA,EAAU,OAAA,EAAS,QAAQ,KAAK,CAAA;AAAA,IAC3C,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,iCAAiC,CAAA;AAAA,MACnD;AACA,MAAA,OAAO,OAAO,SAAA,CAAU,EAAE,OAAA,EAAS,MAAA,EAAQ,OAAO,CAAA;AAAA,IACpD,CAAA;AAAA;AAAA,IAEA,MAAA,EAAQ,qBAAA;AAAA,IACR,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA,IACxB,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,MAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,OAAK,OAAA,CAAQ,CAAA,CAAE,OAAO,CAAC,CAAA;AAC5D,MAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,IAC7C;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-branch.es.js","sources":["../../../../src/domains/traces/hooks/use-branch.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nexport interface UseBranchArgs {\n  traceId: string | null | undefined;\n  spanId: string | null | undefined;\n  depth?: number;\n}\n\nexport function useBranch({\n  traceId,\n  spanId,\n  depth,\n}: UseBranchArgs): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['branch', traceId, spanId, depth],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('traceId and spanId are required');\n      }\n      return client.getBranch({ traceId, spanId, depth });\n    },\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n    enabled: !!traceId && !!spanId,\n    // A finished subtree can still gain spans from a resumed run or delayed export.\n    staleTime: 0,\n  });\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,SAAA,CAAU;AAAA,EACxB,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAuF;AACrF,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,QAAA,EAAU,OAAA,EAAS,QAAQ,KAAK,CAAA;AAAA,IAC3C,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,iCAAiC,CAAA;AAAA,MACnD;AACA,MAAA,OAAO,OAAO,SAAA,CAAU,EAAE,OAAA,EAAS,MAAA,EAAQ,OAAO,CAAA;AAAA,IACpD,CAAA;AAAA;AAAA,IAEA,MAAA,EAAQ,qBAAA;AAAA,IACR,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA;AAAA,IAExB,SAAA,EAAW;AAAA,GACZ,CAAA;AACH;;;;"}

package/dist/domains/traces/hooks/use-download-trace-json.cjs.js

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const react = require('@mastra/react');
+const reactQuery = require('@tanstack/react-query');
 const React = require('react');
+const domains_traces_hooks_useTraceSpans = require('./use-trace-spans.cjs.js');
 const toast = require('../../../toast-EtbZnj9b.cjs');
 const downloadJson = require('../../../downloadJson-PWUDbzkB.cjs');
 
 function useDownloadTraceJson() {
   const client = react.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
   const [isPending, setIsPending] = React.useState(false);
   const download = (traceId) => {
     if (isPending) return;
     setIsPending(true);
-    const task = client.getTrace(traceId).then((trace) => downloadJson.downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
+    const task = queryClient.fetchQuery(domains_traces_hooks_useTraceSpans.traceSpansQueryOptions(client, traceId)).then((trace) => downloadJson.downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
     toast.toast.promise({
       myPromise: task,
       loadingMessage: "Preparing trace download…",

package/dist/domains/traces/hooks/use-download-trace-json.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-download-trace-json.cjs.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useState } from 'react';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const client = useMastraClient();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    // getTrace returns the full payload (heavy input/output), unlike the light spans the panel renders.\n    const task = client\n      .getTrace(traceId)\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":["useMastraClient","useState","downloadJson","toast"],"mappings":";;;;;;;;;AAKO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAC/B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,IAAA,MAAM,OAAO,MAAA,CACV,QAAA,CAAS,OAAO,CAAA,CAChB,IAAA,CAAK,WAASC,yBAAA,CAAa,CAAA,MAAA,EAAS,OAAO,CAAA,KAAA,CAAA,EAAS,KAAK,CAAC,CAAA,CAC1D,QAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAAC,WAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}
+{"version":3,"file":"use-download-trace-json.cjs.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { traceSpansQueryOptions } from './use-trace-spans';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const client = useMastraClient();\n  const queryClient = useQueryClient();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    // Fetch the full payload into the shared cache so the panel matches the downloaded trace.\n    const task = queryClient\n      .fetchQuery(traceSpansQueryOptions(client, traceId))\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":["useMastraClient","useQueryClient","useState","traceSpansQueryOptions","downloadJson","toast"],"mappings":";;;;;;;;;;;AAOO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAC/B,EAAA,MAAM,cAAcC,yBAAA,EAAe;AACnC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,IAAA,MAAM,IAAA,GAAO,YACV,UAAA,CAAWC,yDAAA,CAAuB,QAAQ,OAAO,CAAC,EAClD,IAAA,CAAK,CAAA,KAAA,KAASC,0BAAa,CAAA,MAAA,EAAS,OAAO,SAAS,KAAK,CAAC,EAC1D,OAAA,CAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAAC,WAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}

package/dist/domains/traces/hooks/use-download-trace-json.es.js

@@ -1,15 +1,18 @@
 import { useMastraClient } from '@mastra/react';
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
+import { traceSpansQueryOptions } from './use-trace-spans.es.js';
 import { t as toast } from '../../../toast-czUGO0aH.js';
 import { d as downloadJson } from '../../../downloadJson-DuPoMa_6.js';
 
 function useDownloadTraceJson() {
   const client = useMastraClient();
+  const queryClient = useQueryClient();
   const [isPending, setIsPending] = useState(false);
   const download = (traceId) => {
     if (isPending) return;
     setIsPending(true);
-    const task = client.getTrace(traceId).then((trace) => downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
+    const task = queryClient.fetchQuery(traceSpansQueryOptions(client, traceId)).then((trace) => downloadJson(`trace-${traceId}.json`, trace)).finally(() => setIsPending(false));
     toast.promise({
       myPromise: task,
       loadingMessage: "Preparing trace download…",

package/dist/domains/traces/hooks/use-download-trace-json.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-download-trace-json.es.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useState } from 'react';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const client = useMastraClient();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    // getTrace returns the full payload (heavy input/output), unlike the light spans the panel renders.\n    const task = client\n      .getTrace(traceId)\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,IAAA,MAAM,OAAO,MAAA,CACV,QAAA,CAAS,OAAO,CAAA,CAChB,IAAA,CAAK,WAAS,YAAA,CAAa,CAAA,MAAA,EAAS,OAAO,CAAA,KAAA,CAAA,EAAS,KAAK,CAAC,CAAA,CAC1D,QAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAA,KAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}
+{"version":3,"file":"use-download-trace-json.es.js","sources":["../../../../src/domains/traces/hooks/use-download-trace-json.ts"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { traceSpansQueryOptions } from './use-trace-spans';\nimport { downloadJson } from '@/lib/file';\nimport { toast } from '@/lib/toast';\n\nexport function useDownloadTraceJson() {\n  const client = useMastraClient();\n  const queryClient = useQueryClient();\n  const [isPending, setIsPending] = useState(false);\n\n  const download = (traceId: string) => {\n    if (isPending) return;\n    setIsPending(true);\n\n    // Fetch the full payload into the shared cache so the panel matches the downloaded trace.\n    const task = queryClient\n      .fetchQuery(traceSpansQueryOptions(client, traceId))\n      .then(trace => downloadJson(`trace-${traceId}.json`, trace))\n      .finally(() => setIsPending(false));\n\n    toast.promise({\n      myPromise: task,\n      loadingMessage: 'Preparing trace download…',\n      successMessage: 'Trace downloaded',\n      errorMessage: 'Failed to download trace',\n    });\n  };\n\n  return { download, isPending };\n}\n"],"names":[],"mappings":";;;;;;;AAOO,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,cAAc,cAAA,EAAe;AACnC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAGjB,IAAA,MAAM,IAAA,GAAO,YACV,UAAA,CAAW,sBAAA,CAAuB,QAAQ,OAAO,CAAC,EAClD,IAAA,CAAK,CAAA,KAAA,KAAS,aAAa,CAAA,MAAA,EAAS,OAAO,SAAS,KAAK,CAAC,EAC1D,OAAA,CAAQ,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAEpC,IAAA,KAAA,CAAM,OAAA,CAAQ;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAgB,2BAAA;AAAA,MAChB,cAAA,EAAgB,kBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KACf,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO,EAAE,UAAU,SAAA,EAAU;AAC/B;;;;"}

package/dist/domains/traces/hooks/use-trace-spans.cjs.js

@@ -7,7 +7,6 @@ const reactQuery = require('@tanstack/react-query');
 const domains_traces_utils_toSearchableSpans = require('../utils/to-searchable-spans.cjs.js');
 require('date-fns');
 
-const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
 const traceSpansQueryOptions = (client, traceId) => reactQuery.queryOptions({
   queryKey: ["trace-spans", traceId],
   queryFn: async () => {
@@ -18,16 +17,17 @@ const traceSpansQueryOptions = (client, traceId) => reactQuery.queryOptions({
     return res;
   },
   enabled: !!traceId,
-  staleTime: (query) => {
-    const data = query.state.data;
-    const isFinished = data?.spans.every((span) => Boolean(span.endedAt));
-    return isFinished ? IMMUTABLE_CACHE_TIME : 0;
-  }
+  // Resumed runs and delayed exports can append spans even when every known span has ended.
+  staleTime: 0
 });
-function useTraceSpans(traceId) {
+function useTraceSpans(traceId, { passive = false } = {}) {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
     ...traceSpansQueryOptions(client, traceId),
+    // History rows share updates but leave automatic refreshes to the selected detail.
+    refetchOnMount: !passive,
+    refetchOnWindowFocus: !passive,
+    refetchOnReconnect: !passive,
     // Builds each span's search haystack once per fetch, cached with the query.
     select: domains_traces_utils_toSearchableSpans.selectSearchableSpans
   });
@@ -37,6 +37,9 @@ function useTraceSpansQueries(traceIds, select, fallback) {
   return reactQuery.useQueries({
     queries: traceIds.map((traceId) => ({
       ...traceSpansQueryOptions(client, traceId),
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
       select: (data) => select(traceId, data)
     })),
     combine: (results) => results.map(

package/dist/domains/traces/hooks/use-trace-spans.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-trace-spans.cjs.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { queryOptions, useQueries, useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\n/**\n * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must\n * share these (rather than only the key) so one observer with a stricter `staleTime` does not\n * refetch data another one considers fresh.\n */\nexport const traceSpansQueryOptions = (client: MastraClient, traceId: string | null | undefined) =>\n  queryOptions({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    enabled: !!traceId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(span => Boolean(span.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    ...traceSpansQueryOptions(client, traceId),\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n  });\n}\n\nexport type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;\n\n/**\n * Observes the `trace-spans` query of several traces at once and projects each one with `select`.\n * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.\n */\nexport function useTraceSpansQueries<T>(\n  traceIds: string[],\n  select: (traceId: string, data: TraceSpansData) => T,\n  fallback: (traceId: string) => T,\n): T[] {\n  const client = useMastraClient();\n\n  return useQueries({\n    queries: traceIds.map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      select: (data: TraceSpansData) => select(traceId, data),\n    })),\n    combine: results =>\n      results.map((result, index) =>\n        result.data === undefined ? fallback(traceIds[index] ?? '') : (result.data as T),\n      ),\n  });\n}\n"],"names":["queryOptions","useMastraClient","useQuery","selectSearchableSpans","useQueries"],"mappings":";;;;;;;;;AAOA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAO5C,MAAM,sBAAA,GAAyB,CAAC,MAAA,EAAsB,OAAA,KAC3DA,uBAAA,CAAa;AAAA,EACX,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,EACjC,SAAS,YAAY;AACnB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,IACxC;AACA,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAAA,EACA,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,EACX,WAAW,CAAA,KAAA,KAAS;AAClB,IAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,IAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,UAAQ,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAClE,IAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,EAC7C;AACF,CAAC;AAWI,SAAS,cACd,OAAA,EACqE;AACrE,EAAA,MAAM,SAASC,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA;AAAA,IAEzC,MAAA,EAAQC;AAAA,GACT,CAAA;AACH;AAQO,SAAS,oBAAA,CACd,QAAA,EACA,MAAA,EACA,QAAA,EACK;AACL,EAAA,MAAM,SAASF,qBAAA,EAAgB;AAE/B,EAAA,OAAOG,qBAAA,CAAW;AAAA,IAChB,OAAA,EAAS,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,MAChC,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA,MACzC,MAAA,EAAQ,CAAC,IAAA,KAAyB,MAAA,CAAO,SAAS,IAAI;AAAA,KACxD,CAAE,CAAA;AAAA,IACF,OAAA,EAAS,aACP,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,MAAA,EAAQ,KAAA,KACnB,MAAA,CAAO,IAAA,KAAS,MAAA,GAAY,QAAA,CAAS,QAAA,CAAS,KAAK,CAAA,IAAK,EAAE,CAAA,GAAK,MAAA,CAAO;AAAA;AACxE,GACH,CAAA;AACH;;;;;;"}
+{"version":3,"file":"use-trace-spans.cjs.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { queryOptions, useQueries, useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\n/**\n * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must\n * share these (rather than only the key) so one observer with a stricter `staleTime` does not\n * refetch data another one considers fresh.\n */\nexport const traceSpansQueryOptions = (client: MastraClient, traceId: string | null | undefined) =>\n  queryOptions({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    enabled: !!traceId,\n    // Resumed runs and delayed exports can append spans even when every known span has ended.\n    staleTime: 0,\n  });\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n  { passive = false }: { passive?: boolean } = {},\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    ...traceSpansQueryOptions(client, traceId),\n    // History rows share updates but leave automatic refreshes to the selected detail.\n    refetchOnMount: !passive,\n    refetchOnWindowFocus: !passive,\n    refetchOnReconnect: !passive,\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n  });\n}\n\nexport type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;\n\n/**\n * Observes the `trace-spans` query of several traces at once and projects each one with `select`.\n * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.\n */\nexport function useTraceSpansQueries<T>(\n  traceIds: string[],\n  select: (traceId: string, data: TraceSpansData) => T,\n  fallback: (traceId: string) => T,\n): T[] {\n  const client = useMastraClient();\n\n  return useQueries({\n    queries: traceIds.map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n      select: (data: TraceSpansData) => select(traceId, data),\n    })),\n    combine: results =>\n      results.map((result, index) =>\n        result.data === undefined ? fallback(traceIds[index] ?? '') : (result.data as T),\n      ),\n  });\n}\n"],"names":["queryOptions","useMastraClient","useQuery","selectSearchableSpans","useQueries"],"mappings":";;;;;;;;;AAYO,MAAM,sBAAA,GAAyB,CAAC,MAAA,EAAsB,OAAA,KAC3DA,uBAAA,CAAa;AAAA,EACX,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,EACjC,SAAS,YAAY;AACnB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,IACxC;AACA,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAAA,EACA,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA;AAAA,EAEX,SAAA,EAAW;AACb,CAAC;AAWI,SAAS,cACd,OAAA,EACA,EAAE,UAAU,KAAA,EAAM,GAA2B,EAAC,EACuB;AACrE,EAAA,MAAM,SAASC,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA;AAAA,IAEzC,gBAAgB,CAAC,OAAA;AAAA,IACjB,sBAAsB,CAAC,OAAA;AAAA,IACvB,oBAAoB,CAAC,OAAA;AAAA;AAAA,IAErB,MAAA,EAAQC;AAAA,GACT,CAAA;AACH;AAQO,SAAS,oBAAA,CACd,QAAA,EACA,MAAA,EACA,QAAA,EACK;AACL,EAAA,MAAM,SAASF,qBAAA,EAAgB;AAE/B,EAAA,OAAOG,qBAAA,CAAW;AAAA,IAChB,OAAA,EAAS,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,MAChC,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA,MACzC,cAAA,EAAgB,KAAA;AAAA,MAChB,oBAAA,EAAsB,KAAA;AAAA,MACtB,kBAAA,EAAoB,KAAA;AAAA,MACpB,MAAA,EAAQ,CAAC,IAAA,KAAyB,MAAA,CAAO,SAAS,IAAI;AAAA,KACxD,CAAE,CAAA;AAAA,IACF,OAAA,EAAS,aACP,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,MAAA,EAAQ,KAAA,KACnB,MAAA,CAAO,IAAA,KAAS,MAAA,GAAY,QAAA,CAAS,QAAA,CAAS,KAAK,CAAA,IAAK,EAAE,CAAA,GAAK,MAAA,CAAO;AAAA;AACxE,GACH,CAAA;AACH;;;;;;"}

package/dist/domains/traces/hooks/use-trace-spans.es.js

@@ -3,7 +3,6 @@ import { useQuery, queryOptions, useQueries } from '@tanstack/react-query';
 import { selectSearchableSpans } from '../utils/to-searchable-spans.es.js';
 import 'date-fns';
 
-const IMMUTABLE_CACHE_TIME = 1e3 * 60 * 60 * 24 * 30;
 const traceSpansQueryOptions = (client, traceId) => queryOptions({
   queryKey: ["trace-spans", traceId],
   queryFn: async () => {
@@ -14,16 +13,17 @@ const traceSpansQueryOptions = (client, traceId) => queryOptions({
     return res;
   },
   enabled: !!traceId,
-  staleTime: (query) => {
-    const data = query.state.data;
-    const isFinished = data?.spans.every((span) => Boolean(span.endedAt));
-    return isFinished ? IMMUTABLE_CACHE_TIME : 0;
-  }
+  // Resumed runs and delayed exports can append spans even when every known span has ended.
+  staleTime: 0
 });
-function useTraceSpans(traceId) {
+function useTraceSpans(traceId, { passive = false } = {}) {
   const client = useMastraClient();
   return useQuery({
     ...traceSpansQueryOptions(client, traceId),
+    // History rows share updates but leave automatic refreshes to the selected detail.
+    refetchOnMount: !passive,
+    refetchOnWindowFocus: !passive,
+    refetchOnReconnect: !passive,
     // Builds each span's search haystack once per fetch, cached with the query.
     select: selectSearchableSpans
   });
@@ -33,6 +33,9 @@ function useTraceSpansQueries(traceIds, select, fallback) {
   return useQueries({
     queries: traceIds.map((traceId) => ({
       ...traceSpansQueryOptions(client, traceId),
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
       select: (data) => select(traceId, data)
     })),
     combine: (results) => results.map(

package/dist/domains/traces/hooks/use-trace-spans.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-trace-spans.es.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { queryOptions, useQueries, useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\n/**\n * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must\n * share these (rather than only the key) so one observer with a stricter `staleTime` does not\n * refetch data another one considers fresh.\n */\nexport const traceSpansQueryOptions = (client: MastraClient, traceId: string | null | undefined) =>\n  queryOptions({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    enabled: !!traceId,\n    staleTime: query => {\n      const data = query.state.data;\n      const isFinished = data?.spans.every(span => Boolean(span.endedAt));\n      return isFinished ? IMMUTABLE_CACHE_TIME : 0;\n    },\n  });\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    ...traceSpansQueryOptions(client, traceId),\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n  });\n}\n\nexport type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;\n\n/**\n * Observes the `trace-spans` query of several traces at once and projects each one with `select`.\n * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.\n */\nexport function useTraceSpansQueries<T>(\n  traceIds: string[],\n  select: (traceId: string, data: TraceSpansData) => T,\n  fallback: (traceId: string) => T,\n): T[] {\n  const client = useMastraClient();\n\n  return useQueries({\n    queries: traceIds.map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      select: (data: TraceSpansData) => select(traceId, data),\n    })),\n    combine: results =>\n      results.map((result, index) =>\n        result.data === undefined ? fallback(traceIds[index] ?? '') : (result.data as T),\n      ),\n  });\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAO5C,MAAM,sBAAA,GAAyB,CAAC,MAAA,EAAsB,OAAA,KAC3D,YAAA,CAAa;AAAA,EACX,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,EACjC,SAAS,YAAY;AACnB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,IACxC;AACA,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAAA,EACA,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA,EACX,WAAW,CAAA,KAAA,KAAS;AAClB,IAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AACzB,IAAA,MAAM,UAAA,GAAa,MAAM,KAAA,CAAM,KAAA,CAAM,UAAQ,OAAA,CAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAClE,IAAA,OAAO,aAAa,oBAAA,GAAuB,CAAA;AAAA,EAC7C;AACF,CAAC;AAWI,SAAS,cACd,OAAA,EACqE;AACrE,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA;AAAA,IAEzC,MAAA,EAAQ;AAAA,GACT,CAAA;AACH;AAQO,SAAS,oBAAA,CACd,QAAA,EACA,MAAA,EACA,QAAA,EACK;AACL,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,UAAA,CAAW;AAAA,IAChB,OAAA,EAAS,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,MAChC,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA,MACzC,MAAA,EAAQ,CAAC,IAAA,KAAyB,MAAA,CAAO,SAAS,IAAI;AAAA,KACxD,CAAE,CAAA;AAAA,IACF,OAAA,EAAS,aACP,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,MAAA,EAAQ,KAAA,KACnB,MAAA,CAAO,IAAA,KAAS,MAAA,GAAY,QAAA,CAAS,QAAA,CAAS,KAAK,CAAA,IAAK,EAAE,CAAA,GAAK,MAAA,CAAO;AAAA;AACxE,GACH,CAAA;AACH;;;;"}
+{"version":3,"file":"use-trace-spans.es.js","sources":["../../../../src/domains/traces/hooks/use-trace-spans.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { queryOptions, useQueries, useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport type { SearchableSpan } from '../types';\nimport { selectSearchableSpans } from '../utils';\n\n/**\n * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must\n * share these (rather than only the key) so one observer with a stricter `staleTime` does not\n * refetch data another one considers fresh.\n */\nexport const traceSpansQueryOptions = (client: MastraClient, traceId: string | null | undefined) =>\n  queryOptions({\n    queryKey: ['trace-spans', traceId],\n    queryFn: async () => {\n      if (!traceId) {\n        throw new Error('Trace ID is required');\n      }\n      const res = await client.getTrace(traceId);\n      return res;\n    },\n    enabled: !!traceId,\n    // Resumed runs and delayed exports can append spans even when every known span has ended.\n    staleTime: 0,\n  });\n\n/**\n * Every span of a single trace, with its full payload.\n *\n * The lightweight projection exists to keep blob columns off the read path of a\n * *list*, where the cost is paid once per trace on screen. A trace that is open\n * has already narrowed that to one, and the panel both renders and searches\n * these spans -- `input`, `output` and `attributes` included -- so the\n * projection would only hide content the reader is looking at.\n */\nexport function useTraceSpans(\n  traceId: string | null | undefined,\n  { passive = false }: { passive?: boolean } = {},\n): UseQueryResult<{ traceId: string; spans: SearchableSpan[] } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    ...traceSpansQueryOptions(client, traceId),\n    // History rows share updates but leave automatic refreshes to the selected detail.\n    refetchOnMount: !passive,\n    refetchOnWindowFocus: !passive,\n    refetchOnReconnect: !passive,\n    // Builds each span's search haystack once per fetch, cached with the query.\n    select: selectSearchableSpans,\n  });\n}\n\nexport type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;\n\n/**\n * Observes the `trace-spans` query of several traces at once and projects each one with `select`.\n * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.\n */\nexport function useTraceSpansQueries<T>(\n  traceIds: string[],\n  select: (traceId: string, data: TraceSpansData) => T,\n  fallback: (traceId: string) => T,\n): T[] {\n  const client = useMastraClient();\n\n  return useQueries({\n    queries: traceIds.map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n      select: (data: TraceSpansData) => select(traceId, data),\n    })),\n    combine: results =>\n      results.map((result, index) =>\n        result.data === undefined ? fallback(traceIds[index] ?? '') : (result.data as T),\n      ),\n  });\n}\n"],"names":[],"mappings":";;;;;AAYO,MAAM,sBAAA,GAAyB,CAAC,MAAA,EAAsB,OAAA,KAC3D,YAAA,CAAa;AAAA,EACX,QAAA,EAAU,CAAC,aAAA,EAAe,OAAO,CAAA;AAAA,EACjC,SAAS,YAAY;AACnB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,MAAM,IAAI,MAAM,sBAAsB,CAAA;AAAA,IACxC;AACA,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,OAAO,CAAA;AACzC,IAAA,OAAO,GAAA;AAAA,EACT,CAAA;AAAA,EACA,OAAA,EAAS,CAAC,CAAC,OAAA;AAAA;AAAA,EAEX,SAAA,EAAW;AACb,CAAC;AAWI,SAAS,cACd,OAAA,EACA,EAAE,UAAU,KAAA,EAAM,GAA2B,EAAC,EACuB;AACrE,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA;AAAA,IAEzC,gBAAgB,CAAC,OAAA;AAAA,IACjB,sBAAsB,CAAC,OAAA;AAAA,IACvB,oBAAoB,CAAC,OAAA;AAAA;AAAA,IAErB,MAAA,EAAQ;AAAA,GACT,CAAA;AACH;AAQO,SAAS,oBAAA,CACd,QAAA,EACA,MAAA,EACA,QAAA,EACK;AACL,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,UAAA,CAAW;AAAA,IAChB,OAAA,EAAS,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,MAChC,GAAG,sBAAA,CAAuB,MAAA,EAAQ,OAAO,CAAA;AAAA,MACzC,cAAA,EAAgB,KAAA;AAAA,MAChB,oBAAA,EAAsB,KAAA;AAAA,MACtB,kBAAA,EAAoB,KAAA;AAAA,MACpB,MAAA,EAAQ,CAAC,IAAA,KAAyB,MAAA,CAAO,SAAS,IAAI;AAAA,KACxD,CAAE,CAAA;AAAA,IACF,OAAA,EAAS,aACP,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,MAAA,EAAQ,KAAA,KACnB,MAAA,CAAO,IAAA,KAAS,MAAA,GAAY,QAAA,CAAS,QAAA,CAAS,KAAK,CAAA,IAAK,EAAE,CAAA,GAAK,MAAA,CAAO;AAAA;AACxE,GACH,CAAA;AACH;;;;"}

package/dist/ee/signals/settings/signal-definition-form-dialog.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const Button = require('../../../Button-D10WB4vc.cjs');
-const dialog = require('../../../dialog-K0q0KOOW.cjs');
+const dialog = require('../../../dialog-D-7Hkb3j.cjs');
 const fieldBlock = require('../../../field-block-Dr9fbwQx.cjs');
 const textFieldBlock = require('../../../text-field-block-Dtup2Jqm.cjs');
 const spinner = require('../../../spinner-B_xKBDo_.cjs');

package/dist/ee/signals/settings/signal-definition-form-dialog.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId, useState } from 'react';
 import { B as Button } from '../../../Button-BsfLQEC6.js';
-import { D as Dialog, c as DialogContent, f as DialogHeader, i as DialogTitle, d as DialogDescription, a as DialogBody, e as DialogFooter } from '../../../dialog-CESxLg8S.js';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, f as DialogFooter } from '../../../dialog-CZMPDVUj.js';
 import { F as FieldBlock } from '../../../field-block-DcGeY-_x.js';
 import { T as TextFieldBlock } from '../../../text-field-block-D7vJZCzd.js';
 import { S as Spinner } from '../../../spinner-BMRlaJFy.js';

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

@@ -207,7 +207,9 @@ export declare const traceSpansQueryOptions: (client: MastraClient, traceId: str
  * these spans -- `input`, `output` and `attributes` included -- so the
  * projection would only hide content the reader is looking at.
  */
-export declare function useTraceSpans(traceId: string | null | undefined): UseQueryResult<{
+export declare function useTraceSpans(traceId: string | null | undefined, { passive }?: {
+    passive?: boolean;
+}): UseQueryResult<{
     traceId: string;
     spans: SearchableSpan[];
 } | null>;

package/dist/src/ds/components/Dialog/dialog-action.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Button, TextButtonSize } from '../Button';
+export type DialogActionProps = Omit<ComponentProps<typeof Button>, 'onClick' | 'variant' | 'as' | 'type' | 'size'> & {
+    size?: TextButtonSize;
+    onConfirm: () => void;
+    confirmation?: 'click' | 'hold';
+    holdSeconds?: number;
+};
+export declare const DialogAction: import('react').ForwardRefExoticComponent<Omit<DialogActionProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/ds/components/Dialog/dialog-context.d.ts

@@ -0,0 +1,16 @@
+export type DialogVariant = 'default' | 'new';
+export type DialogIntent = 'default' | 'destructive';
+export type DialogContextValue = {
+    variant: DialogVariant;
+    intent: DialogIntent;
+    pending: boolean;
+};
+export declare const DialogContext: import('react').Context<DialogContextValue>;
+export declare function useDialogContext(): DialogContextValue;
+export declare const dialogActionSizeClasses: {
+    readonly xs: "min-h-form-xs leading-ui-xs";
+    readonly sm: "min-h-form-sm leading-ui-sm";
+    readonly md: "min-h-form-md leading-ui-md";
+    readonly lg: "min-h-form-default leading-ui-md";
+};
+export declare const dialogActionLayoutClasses = "h-auto min-w-0 max-w-full whitespace-normal wrap-anywhere max-[22rem]:w-full";

package/dist/src/ds/components/Dialog/dialog-new-variant.stories.d.ts

@@ -0,0 +1,64 @@
+import { StoryObj } from '@storybook/react-vite';
+import { TextButtonSize } from '../Button';
+declare function ConfirmationExample({ holdSeconds, buttonSize, intent, confirmation, title, description, actionLabel, cancelLabel, failFirst, longBody, }: {
+    holdSeconds?: number;
+    buttonSize?: TextButtonSize;
+    intent?: 'default' | 'destructive';
+    confirmation?: 'click' | 'hold';
+    title?: string;
+    description?: string;
+    actionLabel?: string;
+    cancelLabel?: string;
+    failFirst?: boolean;
+    longBody?: boolean;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ConfirmationExample;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        holdSeconds: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+        };
+        buttonSize: {
+            control: "inline-radio";
+            options: string[];
+        };
+        intent: {
+            control: "inline-radio";
+            options: string[];
+        };
+        confirmation: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+    args: {
+        holdSeconds: number;
+        buttonSize: "md";
+        intent: "default";
+        confirmation: "click";
+        failFirst: false;
+        longBody: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Destructive: Story;
+export declare const PressAndHold: Story;
+export declare const LongTitleAndLabels: Story;
+export declare const ScrollingBody: Story;
+export declare const ErrorAndRetry: Story;
+export declare const WithForm: Story;

package/dist/src/ds/components/Dialog/dialog.d.ts

@@ -1,6 +1,14 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { DialogAction } from './dialog-action';
+import { DialogIntent, DialogVariant } from './dialog-context';
+import { TextButtonSize } from '../Button';
 import * as React from 'react';
-declare const Dialog: typeof DialogPrimitive.Root;
+export type DialogProps = DialogPrimitive.Root.Props & {
+    variant?: DialogVariant;
+    intent?: DialogIntent;
+    pending?: boolean;
+};
+declare function Dialog({ variant, intent, pending, onOpenChange, ...props }: DialogProps): React.JSX.Element;
 type DialogTriggerProps = DialogPrimitive.Trigger.Props & {
     /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */
     asChild?: boolean;
@@ -30,10 +38,7 @@ declare const DialogFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
-declare const DialogBody: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
+declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 type DialogTitleProps = Omit<DialogPrimitive.Title.Props, 'className'> & {
     className?: string;
 };
@@ -42,4 +47,8 @@ type DialogDescriptionProps = Omit<DialogPrimitive.Description.Props, 'className
     className?: string;
 };
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogBody, DialogTitle, DialogDescription, };
+type DialogCancelProps = DialogPrimitive.Close.Props & {
+    size?: TextButtonSize;
+};
+declare const DialogCancel: React.ForwardRefExoticComponent<Omit<DialogCancelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogBody, DialogTitle, DialogDescription, DialogCancel, DialogAction, };

package/dist/src/ds/components/Dialog/index.d.ts

@@ -1 +1,3 @@
 export * from './dialog';
+export type { DialogActionProps } from './dialog-action';
+export type { DialogIntent, DialogVariant } from './dialog-context';

package/dist/src/ds/components/IntegrationDialog/__fixtures__/integrations-catalog.d.ts

@@ -0,0 +1,2 @@
+import { IntegrationDialogItem } from '../integration-dialog';
+export declare const integrationsCatalog: IntegrationDialogItem[];

package/dist/src/ds/components/IntegrationDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { IntegrationDialog } from './integration-dialog';
+export type { IntegrationDialogItem, IntegrationDialogProps } from './integration-dialog';

package/dist/src/ds/components/IntegrationDialog/integration-dialog.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { DialogProps } from '../Dialog';
+export type IntegrationDialogItem = {
+    id: string;
+    name: string;
+    logo?: ReactNode;
+    badge?: string;
+    meta?: string;
+    disabled?: boolean;
+};
+export type IntegrationDialogProps = Omit<DialogProps, 'variant' | 'intent' | 'children'> & {
+    title: ReactNode;
+    description?: ReactNode;
+    items: IntegrationDialogItem[];
+    onSelect: (item: IntegrationDialogItem) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyMessage?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+};
+declare function IntegrationDialog({ title, description, items, onSelect, searchPlaceholder, searchLabel, emptyMessage, children, className, ...props }: IntegrationDialogProps): import("react").JSX.Element;
+declare namespace IntegrationDialog {
+    var Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTrigger.Props<unknown> & {
+        asChild?: boolean;
+    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}
+export { IntegrationDialog };

package/dist/src/ds/components/IntegrationDialog/integration-dialog.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+import { IntegrationDialogItem } from './integration-dialog';
+declare function Example({ items }: {
+    items?: IntegrationDialogItem[];
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof Example;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FewItems: Story;
+export declare const NoLogos: Story;
+export declare const DisabledItem: Story;
+export declare const Empty: Story;