@mastra/playground-ui 5.1.2-alpha.0 → 5.1.2-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -3,9 +3,10 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  require('./index.css');const jsxRuntime = require('react/jsx-runtime');
6
+ const React = require('react');
7
+ const clientJs = require('@mastra/client-js');
6
8
  const react = require('@assistant-ui/react');
7
9
  const lucideReact = require('lucide-react');
8
- const React = require('react');
9
10
  const reactSlot = require('@radix-ui/react-slot');
10
11
  const TooltipPrimitive = require('@radix-ui/react-tooltip');
11
12
  const AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -21,7 +22,6 @@ const CodeMirror = require('@uiw/react-codemirror');
21
22
  const DialogPrimitive = require('@radix-ui/react-dialog');
22
23
  const shallow = require('zustand/shallow');
23
24
  const di = require('@mastra/core/di');
24
- const clientJs = require('@mastra/client-js');
25
25
  const zustand = require('zustand');
26
26
  const middleware = require('zustand/middleware');
27
27
  const dateFns = require('date-fns');
@@ -84,6 +84,31 @@ const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectP
84
84
  const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
85
85
  const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
86
86
 
87
+ const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
88
+ return new clientJs.MastraClient({
89
+ baseUrl: baseUrl || "",
90
+ // only add the header if the baseUrl is not provided i.e it's a local dev environment
91
+ headers: !baseUrl ? { ...mastraClientHeaders, "x-mastra-dev-playground": "true" } : mastraClientHeaders
92
+ });
93
+ };
94
+
95
+ const MastraClientContext = React.createContext(void 0);
96
+ const MastraClientProvider = ({
97
+ children,
98
+ baseUrl,
99
+ headers
100
+ }) => {
101
+ const client = createMastraClient(baseUrl, headers);
102
+ return /* @__PURE__ */ jsxRuntime.jsx(MastraClientContext.Provider, { value: { client }, children });
103
+ };
104
+ const useMastraClient = () => {
105
+ const context = React.useContext(MastraClientContext);
106
+ if (context === void 0) {
107
+ throw new Error("useMastraClient must be used within a MastraClientProvider");
108
+ }
109
+ return context.client;
110
+ };
111
+
87
112
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
88
113
 
89
114
  const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
@@ -4485,14 +4510,6 @@ const CircleStopIcon = () => {
4485
4510
  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
4486
4511
  };
4487
4512
 
4488
- const createMastraClient = (baseUrl) => {
4489
- return new clientJs.MastraClient({
4490
- baseUrl: baseUrl || "",
4491
- // only add the header if the baseUrl is not provided i.e it's a local dev environment
4492
- headers: !baseUrl ? { "x-mastra-dev-playground": "true" } : {}
4493
- });
4494
- };
4495
-
4496
4513
  const fileToBase64 = async (file) => {
4497
4514
  return new Promise((resolve, reject) => {
4498
4515
  const reader = new FileReader();
@@ -4534,7 +4551,6 @@ function MastraRuntimeProvider({
4534
4551
  agentName,
4535
4552
  memory,
4536
4553
  threadId,
4537
- baseUrl,
4538
4554
  refreshThreadList,
4539
4555
  modelSettings = {},
4540
4556
  chatWithGenerate,
@@ -4575,7 +4591,7 @@ function MastraRuntimeProvider({
4575
4591
  }
4576
4592
  }
4577
4593
  }, [initialMessages, threadId, memory]);
4578
- const mastra = createMastraClient(baseUrl);
4594
+ const mastra = useMastraClient();
4579
4595
  const agent = mastra.getAgent(agentId);
4580
4596
  const onNew = async (message) => {
4581
4597
  if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
@@ -4933,7 +4949,6 @@ const AgentChat = ({
4933
4949
  threadId,
4934
4950
  initialMessages,
4935
4951
  memory,
4936
- baseUrl,
4937
4952
  refreshThreadList,
4938
4953
  showFileSupport
4939
4954
  }) => {
@@ -4947,7 +4962,6 @@ const AgentChat = ({
4947
4962
  threadId,
4948
4963
  initialMessages,
4949
4964
  memory,
4950
- baseUrl,
4951
4965
  refreshThreadList,
4952
4966
  modelSettings,
4953
4967
  chatWithGenerate,
@@ -5127,10 +5141,10 @@ const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) =
5127
5141
  ));
5128
5142
  TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
5129
5143
 
5130
- const useEvalsByAgentId = (agentId, type, baseUrl) => {
5144
+ const useEvalsByAgentId = (agentId, type) => {
5131
5145
  const [evals, setEvals] = React.useState([]);
5132
5146
  const [isLoading, setIsLoading] = React.useState(true);
5133
- const client = createMastraClient(baseUrl);
5147
+ const client = useMastraClient();
5134
5148
  const fetchEvals = async (_agentId) => {
5135
5149
  setIsLoading(true);
5136
5150
  const activeAgentId = _agentId ?? agentId;
@@ -5168,18 +5182,14 @@ const tabIndicatorClass = cn(
5168
5182
  "focus-visible:outline-none"
5169
5183
  );
5170
5184
  const tabContentClass = cn("data-[state=inactive]:mt-0 min-h-0 h-full grid grid-rows-[1fr]");
5171
- function AgentEvals({ agentId, baseUrl }) {
5185
+ function AgentEvals({ agentId }) {
5172
5186
  const [activeTab, setActiveTab] = React.useState("live");
5173
5187
  const {
5174
5188
  evals: liveEvals,
5175
5189
  isLoading: isLiveLoading,
5176
5190
  refetchEvals: refetchLiveEvals
5177
- } = useEvalsByAgentId(agentId, "live", baseUrl);
5178
- const {
5179
- evals: ciEvals,
5180
- isLoading: isCiLoading,
5181
- refetchEvals: refetchCiEvals
5182
- } = useEvalsByAgentId(agentId, "ci", baseUrl);
5191
+ } = useEvalsByAgentId(agentId, "live");
5192
+ const { evals: ciEvals, isLoading: isCiLoading, refetchEvals: refetchCiEvals } = useEvalsByAgentId(agentId, "ci");
5183
5193
  const contextValue = {
5184
5194
  handleRefresh,
5185
5195
  isLoading: activeTab === "live" ? isLiveLoading : isCiLoading
@@ -5405,11 +5415,10 @@ function EvalTable({ evals, isCIMode = false }) {
5405
5415
  const TraceContext = React.createContext({});
5406
5416
  function TraceProvider({
5407
5417
  children,
5408
- initialTraces
5418
+ initialTraces: traces = []
5409
5419
  }) {
5410
5420
  const [open, setOpen] = React.useState(false);
5411
5421
  const [trace, setTrace] = React.useState(null);
5412
- const [traces, setTraces] = React.useState(initialTraces || []);
5413
5422
  const [currentTraceIndex, setCurrentTraceIndex] = React.useState(0);
5414
5423
  const [span, setSpan] = React.useState(null);
5415
5424
  const nextTrace = () => {
@@ -5446,7 +5455,6 @@ function TraceProvider({
5446
5455
  trace,
5447
5456
  setTrace,
5448
5457
  traces,
5449
- setTraces,
5450
5458
  currentTraceIndex,
5451
5459
  setCurrentTraceIndex,
5452
5460
  nextTrace,
@@ -5571,9 +5579,6 @@ const toSigFigs = (num, sigFigs) => {
5571
5579
  return Number(num.toPrecision(sigFigs));
5572
5580
  };
5573
5581
 
5574
- const TracesTableSkeleton = ({ colsCount }) => {
5575
- return /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: Array.from({ length: colsCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-1/2" }) }, index)) }) });
5576
- };
5577
5582
  const TracesTableEmpty = ({ colsCount }) => {
5578
5583
  return /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "No traces found" }) }) }) });
5579
5584
  };
@@ -5594,7 +5599,7 @@ const TraceRow = ({ trace, index, isActive }) => {
5594
5599
  /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" }) : /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}), variant: "success", children: "Success" }) })
5595
5600
  ] });
5596
5601
  };
5597
- const TracesTable = ({ traces, isLoading, error }) => {
5602
+ const TracesTable = ({ traces, error }) => {
5598
5603
  const hasNoTraces = !traces || traces.length === 0;
5599
5604
  const { currentTraceIndex } = React.useContext(TraceContext);
5600
5605
  const colsCount = 4;
@@ -5606,7 +5611,7 @@ const TracesTable = ({ traces, isLoading, error }) => {
5606
5611
  /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Spans" }),
5607
5612
  /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Status" })
5608
5613
  ] }),
5609
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableSkeleton, { colsCount }) : error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) }) })
5614
+ error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) }) })
5610
5615
  ] });
5611
5616
  };
5612
5617
 
@@ -6214,14 +6219,14 @@ const TracesSidebar = ({ onResize }) => {
6214
6219
  );
6215
6220
  };
6216
6221
 
6217
- function AgentTraces({ className, traces, isLoading, error }) {
6218
- return /* @__PURE__ */ jsxRuntime.jsx(AgentTracesInner, { className, traces, isLoading, error });
6222
+ function AgentTraces({ className, traces, error }) {
6223
+ return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsxRuntime.jsx(AgentTracesInner, { className, traces, error }) });
6219
6224
  }
6220
- function AgentTracesInner({ className, traces, isLoading, error }) {
6225
+ function AgentTracesInner({ className, traces, error }) {
6221
6226
  const [sidebarWidth, setSidebarWidth] = React.useState(100);
6222
6227
  const { isOpen: open } = React.useContext(TraceContext);
6223
6228
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
6224
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading, error }) }),
6229
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, error }) }),
6225
6230
  open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
6226
6231
  ] });
6227
6232
  }
@@ -6235,7 +6240,6 @@ function MastraNetworkRuntimeProvider({
6235
6240
  initialMessages,
6236
6241
  memory,
6237
6242
  threadId,
6238
- baseUrl,
6239
6243
  refreshThreadList,
6240
6244
  modelSettings = {}
6241
6245
  }) {
@@ -6251,7 +6255,7 @@ function MastraNetworkRuntimeProvider({
6251
6255
  }
6252
6256
  }
6253
6257
  }, [initialMessages, threadId, memory, messages]);
6254
- const mastra = createMastraClient(baseUrl);
6258
+ const mastra = useMastraClient();
6255
6259
  const network = mastra.getNetwork(agentId);
6256
6260
  const onNew = async (message) => {
6257
6261
  if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
@@ -6673,10 +6677,10 @@ const NetworkChat = ({ agentId, memory }) => {
6673
6677
  return /* @__PURE__ */ jsxRuntime.jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { ToolFallback }) }) });
6674
6678
  };
6675
6679
 
6676
- function WorkflowTraces({ traces, isLoading, error, runId, stepName }) {
6677
- return /* @__PURE__ */ jsxRuntime.jsx(WorkflowTracesInner, { traces, isLoading, error, runId, stepName });
6680
+ function WorkflowTraces({ traces, error, runId, stepName }) {
6681
+ return /* @__PURE__ */ jsxRuntime.jsx(TraceProvider, { initialTraces: traces || [], children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowTracesInner, { traces, error, runId, stepName }) });
6678
6682
  }
6679
- function WorkflowTracesInner({ traces, isLoading, error, runId, stepName }) {
6683
+ function WorkflowTracesInner({ traces, error, runId, stepName }) {
6680
6684
  const hasRunRef = React.useRef(false);
6681
6685
  const [sidebarWidth, setSidebarWidth] = React.useState(100);
6682
6686
  const { isOpen: open, setTrace, setIsOpen, setSpan } = React.useContext(TraceContext);
@@ -6693,7 +6697,7 @@ function WorkflowTracesInner({ traces, isLoading, error, runId, stepName }) {
6693
6697
  hasRunRef.current = true;
6694
6698
  }, [runId, traces, setTrace]);
6695
6699
  return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
6696
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading, error }) }),
6700
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, error }) }),
6697
6701
  open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
6698
6702
  ] });
6699
6703
  }
@@ -6733,10 +6737,10 @@ const sanitizeWorkflowWatchResult = (record) => {
6733
6737
  };
6734
6738
  return sanitizedRecord;
6735
6739
  };
6736
- const useLegacyWorkflow = (workflowId, baseUrl) => {
6740
+ const useLegacyWorkflow = (workflowId) => {
6737
6741
  const [legacyWorkflow, setLegacyWorkflow] = React.useState(null);
6738
6742
  const [isLoading, setIsLoading] = React.useState(true);
6739
- const client = createMastraClient(baseUrl);
6743
+ const client = useMastraClient();
6740
6744
  React.useEffect(() => {
6741
6745
  const fetchWorkflow = async () => {
6742
6746
  setIsLoading(true);
@@ -6778,10 +6782,10 @@ const useLegacyWorkflow = (workflowId, baseUrl) => {
6778
6782
  }, [workflowId]);
6779
6783
  return { legacyWorkflow, isLoading };
6780
6784
  };
6781
- const useWorkflow = (workflowId, baseUrl) => {
6785
+ const useWorkflow = (workflowId) => {
6782
6786
  const [workflow, setWorkflow] = React.useState(null);
6783
6787
  const [isLoading, setIsLoading] = React.useState(true);
6784
- const client = createMastraClient(baseUrl);
6788
+ const client = useMastraClient();
6785
6789
  React.useEffect(() => {
6786
6790
  const fetchWorkflow = async () => {
6787
6791
  setIsLoading(true);
@@ -6805,8 +6809,8 @@ const useWorkflow = (workflowId, baseUrl) => {
6805
6809
  }, [workflowId]);
6806
6810
  return { workflow, isLoading };
6807
6811
  };
6808
- const useExecuteWorkflow = (baseUrl) => {
6809
- const client = createMastraClient(baseUrl);
6812
+ const useExecuteWorkflow = () => {
6813
+ const client = useMastraClient();
6810
6814
  const createLegacyWorkflowRun = async ({ workflowId, prevRunId }) => {
6811
6815
  try {
6812
6816
  const workflow = client.getLegacyWorkflow(workflowId);
@@ -6885,11 +6889,12 @@ const useExecuteWorkflow = (baseUrl) => {
6885
6889
  startAsyncWorkflowRun
6886
6890
  };
6887
6891
  };
6888
- const useWatchWorkflow = (baseUrl) => {
6892
+ const useWatchWorkflow = () => {
6889
6893
  const [isWatchingLegacyWorkflow, setIsWatchingLegacyWorkflow] = React.useState(false);
6890
6894
  const [isWatchingWorkflow, setIsWatchingWorkflow] = React.useState(false);
6891
6895
  const [legacyWatchResult, setLegacyWatchResult] = React.useState(null);
6892
6896
  const [watchResult, setWatchResult] = React.useState(null);
6897
+ const client = useMastraClient();
6893
6898
  const debouncedSetLegacyWorkflowWatchResult = useDebounce.useDebouncedCallback((record) => {
6894
6899
  const formattedResults = Object.entries(record.results || {}).reduce(
6895
6900
  (acc, [key, value]) => {
@@ -6918,7 +6923,6 @@ const useWatchWorkflow = (baseUrl) => {
6918
6923
  const watchLegacyWorkflow = async ({ workflowId, runId }) => {
6919
6924
  try {
6920
6925
  setIsWatchingLegacyWorkflow(true);
6921
- const client = createMastraClient(baseUrl);
6922
6926
  const workflow = client.getLegacyWorkflow(workflowId);
6923
6927
  await workflow.watch({ runId }, (record) => {
6924
6928
  try {
@@ -6944,7 +6948,6 @@ const useWatchWorkflow = (baseUrl) => {
6944
6948
  const watchWorkflow = async ({ workflowId, runId }) => {
6945
6949
  try {
6946
6950
  setIsWatchingWorkflow(true);
6947
- const client = createMastraClient(baseUrl);
6948
6951
  const workflow = client.getWorkflow(workflowId);
6949
6952
  await workflow.watch({ runId }, (record) => {
6950
6953
  try {
@@ -6972,9 +6975,10 @@ const useWatchWorkflow = (baseUrl) => {
6972
6975
  watchResult
6973
6976
  };
6974
6977
  };
6975
- const useResumeWorkflow = (baseUrl) => {
6978
+ const useResumeWorkflow = () => {
6976
6979
  const [isResumingLegacyWorkflow, setIsResumingLegacyWorkflow] = React.useState(false);
6977
6980
  const [isResumingWorkflow, setIsResumingWorkflow] = React.useState(false);
6981
+ const client = useMastraClient();
6978
6982
  const resumeLegacyWorkflow = async ({
6979
6983
  workflowId,
6980
6984
  stepId,
@@ -6983,7 +6987,6 @@ const useResumeWorkflow = (baseUrl) => {
6983
6987
  }) => {
6984
6988
  try {
6985
6989
  setIsResumingLegacyWorkflow(true);
6986
- const client = createMastraClient(baseUrl);
6987
6990
  const response = await client.getLegacyWorkflow(workflowId).resume({ stepId, runId, context });
6988
6991
  return response;
6989
6992
  } catch (error) {
@@ -7002,7 +7005,6 @@ const useResumeWorkflow = (baseUrl) => {
7002
7005
  }) => {
7003
7006
  try {
7004
7007
  setIsResumingWorkflow(true);
7005
- const client = createMastraClient(baseUrl);
7006
7008
  const runtimeContext$1 = new runtimeContext.RuntimeContext();
7007
7009
  Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
7008
7010
  runtimeContext$1.set(key, value);
@@ -8285,8 +8287,8 @@ const lodashTitleCase = (str) => {
8285
8287
  return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
8286
8288
  };
8287
8289
 
8288
- function LegacyWorkflowGraph({ workflowId, baseUrl }) {
8289
- const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId, baseUrl);
8290
+ function LegacyWorkflowGraph({ workflowId }) {
8291
+ const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId);
8290
8292
  if (isLoading) {
8291
8293
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
8292
8294
  }
@@ -9158,18 +9160,17 @@ const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
9158
9160
 
9159
9161
  function LegacyWorkflowTrigger({
9160
9162
  workflowId,
9161
- baseUrl,
9162
9163
  setRunId
9163
9164
  }) {
9164
9165
  const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = React.useContext(WorkflowRunContext);
9165
- const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId, baseUrl);
9166
- const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow(baseUrl);
9166
+ const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId);
9167
+ const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow();
9167
9168
  const {
9168
9169
  watchLegacyWorkflow: watchWorkflow,
9169
9170
  legacyWatchResult: watchResult,
9170
9171
  isWatchingLegacyWorkflow: isWatchingWorkflow
9171
- } = useWatchWorkflow(baseUrl);
9172
- const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow(baseUrl);
9172
+ } = useWatchWorkflow();
9173
+ const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow();
9173
9174
  const [suspendedSteps, setSuspendedSteps] = React.useState([]);
9174
9175
  const [isRunning, setIsRunning] = React.useState(false);
9175
9176
  const triggerSchema = workflow?.triggerSchema;
@@ -9594,8 +9595,8 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
9594
9595
  ) });
9595
9596
  }
9596
9597
 
9597
- function WorkflowGraph({ workflowId, baseUrl, onShowTrace }) {
9598
- const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
9598
+ function WorkflowGraph({ workflowId, onShowTrace }) {
9599
+ const { workflow, isLoading } = useWorkflow(workflowId);
9599
9600
  if (isLoading) {
9600
9601
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
9601
9602
  }
@@ -9629,17 +9630,13 @@ const WorkflowStatus = ({ stepId, status }) => {
9629
9630
  );
9630
9631
  };
9631
9632
 
9632
- function WorkflowTrigger({
9633
- workflowId,
9634
- baseUrl,
9635
- setRunId
9636
- }) {
9633
+ function WorkflowTrigger({ workflowId, setRunId }) {
9637
9634
  const { runtimeContext } = usePlaygroundStore();
9638
9635
  const { result, setResult, payload, setPayload } = React.useContext(WorkflowRunContext);
9639
- const { isLoading, workflow } = useWorkflow(workflowId, baseUrl);
9640
- const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow(baseUrl);
9641
- const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow(baseUrl);
9642
- const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow(baseUrl);
9636
+ const { isLoading, workflow } = useWorkflow(workflowId);
9637
+ const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow();
9638
+ const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow();
9639
+ const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow();
9643
9640
  const [suspendedSteps, setSuspendedSteps] = React.useState([]);
9644
9641
  const [isRunning, setIsRunning] = React.useState(false);
9645
9642
  const triggerSchema = workflow?.inputSchema;
@@ -10129,10 +10126,9 @@ function usePolling({
10129
10126
  };
10130
10127
  }
10131
10128
 
10132
- const useTraces = (componentName, baseUrl, isWorkflow = false) => {
10129
+ const useTraces = (componentName, isWorkflow = false) => {
10133
10130
  const [traces, setTraces] = React.useState([]);
10134
- const { setTraces: setTraceContextTraces } = React.useContext(TraceContext);
10135
- const client = React.useMemo(() => createMastraClient(baseUrl), [baseUrl]);
10131
+ const client = React.useMemo(() => useMastraClient(), []);
10136
10132
  const fetchFn = React.useCallback(async () => {
10137
10133
  try {
10138
10134
  const res = await client.getTelemetry({
@@ -10149,15 +10145,11 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
10149
10145
  throw error2;
10150
10146
  }
10151
10147
  }, [client, componentName, isWorkflow]);
10152
- const onSuccess = React.useCallback(
10153
- (newTraces) => {
10154
- if (newTraces.length > 0) {
10155
- setTraces(() => newTraces);
10156
- setTraceContextTraces(() => newTraces);
10157
- }
10158
- },
10159
- [setTraceContextTraces]
10160
- );
10148
+ const onSuccess = React.useCallback((newTraces) => {
10149
+ if (newTraces.length > 0) {
10150
+ setTraces(() => newTraces);
10151
+ }
10152
+ }, []);
10161
10153
  const onError = React.useCallback((error2) => {
10162
10154
  console.log(`error, onError`, error2);
10163
10155
  sonner.toast.error(error2.message);
@@ -10231,6 +10223,7 @@ exports.LatencyIcon = LatencyIcon;
10231
10223
  exports.LegacyWorkflowGraph = LegacyWorkflowGraph;
10232
10224
  exports.LegacyWorkflowTrigger = LegacyWorkflowTrigger;
10233
10225
  exports.LogsIcon = LogsIcon;
10226
+ exports.MastraClientProvider = MastraClientProvider;
10234
10227
  exports.MastraResizablePanel = MastraResizablePanel;
10235
10228
  exports.McpCoinIcon = McpCoinIcon;
10236
10229
  exports.McpServerIcon = McpServerIcon;
@@ -10256,9 +10249,7 @@ exports.ThreadList = ThreadList;
10256
10249
  exports.Threads = Threads;
10257
10250
  exports.ToolCoinIcon = ToolCoinIcon;
10258
10251
  exports.ToolsIcon = ToolsIcon;
10259
- exports.TraceContext = TraceContext;
10260
10252
  exports.TraceIcon = TraceIcon;
10261
- exports.TraceProvider = TraceProvider;
10262
10253
  exports.TsIcon = TsIcon;
10263
10254
  exports.Txt = Txt;
10264
10255
  exports.TxtCell = TxtCell;
@@ -10273,6 +10264,7 @@ exports.WorkflowTraces = WorkflowTraces;
10273
10264
  exports.WorkflowTrigger = WorkflowTrigger;
10274
10265
  exports.refineTraces = refineTraces;
10275
10266
  exports.useCurrentRun = useCurrentRun;
10267
+ exports.useMastraClient = useMastraClient;
10276
10268
  exports.usePlaygroundStore = usePlaygroundStore;
10277
10269
  exports.usePolling = usePolling;
10278
10270
  exports.useSpeechRecognition = useSpeechRecognition;