@mastra/playground-ui 5.0.1-alpha.2 → 5.0.1-alpha.4

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Check, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, X, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useMemo, useRef, useEffect, createContext, useContext, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -4285,7 +4285,7 @@ function MastraRuntimeProvider({
   ] });
 }
 
-const defaultModelSettings = {
+const defaultModelSettings$1 = {
   maxRetries: 2,
   maxSteps: 5,
   temperature: 0.5,
@@ -4293,10 +4293,10 @@ const defaultModelSettings = {
 };
 const AgentContext = createContext({});
 function AgentProvider({ children }) {
-  const [modelSettings, setModelSettings] = useState(defaultModelSettings);
+  const [modelSettings, setModelSettings] = useState(defaultModelSettings$1);
   const [chatWithGenerate, setChatWithGenerate] = useState(false);
   const resetModelSettings = () => {
-    setModelSettings(defaultModelSettings);
+    setModelSettings(defaultModelSettings$1);
   };
   return /* @__PURE__ */ jsx(
     AgentContext.Provider,
@@ -5093,8 +5093,20 @@ const Th = ({ className, children, ...props }) => {
 const Tbody = ({ className, children }) => {
   return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
 };
-const Row = ({ className, children, selected = false }) => {
-  return /* @__PURE__ */ jsx("tr", { className: clsx("border-b-sm border-border1 hover:bg-surface3", selected && "bg-surface4", className), children });
+const Row = ({ className, children, selected = false, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: clsx(
+        "border-b-sm border-border1 hover:bg-surface3",
+        selected && "bg-surface4",
+        onClick && "cursor-pointer",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
 };
 
 const variants = {
@@ -5187,7 +5199,8 @@ const TracesTableError = ({ error, colsCount }) => {
 };
 const TraceRow = ({ trace, index, isActive }) => {
   const { openTrace } = useOpenTrace();
-  return /* @__PURE__ */ jsxs(Row, { className: isActive ? "bg-surface4" : "", children: [
+  const hasFailure = trace.trace.some((span) => span.status.code !== 0);
+  return /* @__PURE__ */ jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
     /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
     /* @__PURE__ */ jsx(TxtCell, { children: trace.traceId }),
     /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: trace.duration / 1e3 }),
@@ -5195,7 +5208,8 @@ const TraceRow = ({ trace, index, isActive }) => {
       trace.trace.length,
       " span",
       trace.trace.length > 1 ? "s" : ""
-    ] }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Cell, { children: hasFailure ? /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" }) : /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(Check, {}), variant: "success", children: "Success" }) })
   ] });
 };
 const TracesTable = ({ traces, isLoading, error }) => {
@@ -5207,7 +5221,8 @@ const TracesTable = ({ traces, isLoading, error }) => {
       /* @__PURE__ */ jsx(Th, { width: 160, children: "Time" }),
       /* @__PURE__ */ jsx(Th, { width: "auto", children: "Trace Id" }),
       /* @__PURE__ */ jsx(Th, { width: 160, children: "Duration" }),
-      /* @__PURE__ */ jsx(Th, { width: 160, children: "Spans" })
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Spans" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Status" })
     ] }),
     isLoading ? /* @__PURE__ */ jsx(TracesTableSkeleton, { colsCount }) : error ? /* @__PURE__ */ jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) })
   ] });
@@ -5329,7 +5344,7 @@ const variantClasses = {
 };
 const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-[166px] shrink-0", children: [
     /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${progressPercent}%` } }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
       /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
@@ -5380,8 +5395,8 @@ const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClic
   const progressPercent = durationMs / traceDuration * 100;
   const TextEl = onClick ? "button" : "div";
   return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-2 items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
         spans ? /* @__PURE__ */ jsx(
           "button",
           {
@@ -5519,6 +5534,7 @@ function TraceDetails() {
   const { trace, currentTraceIndex, prevTrace, nextTrace, traces, clearData } = useContext(TraceContext);
   const actualTrace = traces[currentTraceIndex];
   if (!actualTrace || !trace) return null;
+  const hasFailure = trace.some((span) => span.status.code !== 0);
   return /* @__PURE__ */ jsxs("aside", { children: [
     /* @__PURE__ */ jsxs(Header, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -5533,10 +5549,13 @@ function TraceDetails() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", children: [
-        "Trace ",
-        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 5) })
-      ] }) })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 justify-between w-full", children: [
+        /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5 shrink-0", children: [
+          "Trace ",
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 5) })
+        ] }),
+        hasFailure && /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" })
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(SpanView, { trace }) })
   ] });
@@ -5597,7 +5616,11 @@ function SpanDetail() {
         /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsx(SpanIcon, { className: variantClass }) }),
         span.name
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
+        formatDuration(span.duration),
+        "ms"
+      ] }) : /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
+        "Failed in ",
         formatDuration(span.duration),
         "ms"
       ] }) }),
@@ -5684,15 +5707,15 @@ const TracesSidebar = ({ onResize }) => {
   );
 };
 
-function AgentTraces({ agentName, baseUrl }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl }) });
+function AgentTraces({ agentName, baseUrl, className }) {
+  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, className }) });
 }
-function AgentTracesInner({ agentName, baseUrl }) {
+function AgentTracesInner({ agentName, baseUrl, className }) {
   const [sidebarWidth, setSidebarWidth] = useState(100);
   const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
   const { isOpen: open } = useContext(TraceContext);
-  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
-    /* @__PURE__ */ jsx("div", { className: clsx("h-full", open ? "w-auto" : "w-full"), children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+  return /* @__PURE__ */ jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
+    /* @__PURE__ */ jsx("div", { className: clsx("h-full overflow-y-scroll", open ? "w-auto" : "w-full"), children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
     open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -5707,11 +5730,13 @@ function MastraNetworkRuntimeProvider({
   memory,
   threadId,
   baseUrl,
-  refreshThreadList
+  refreshThreadList,
+  modelSettings = {}
 }) {
   const [isRunning, setIsRunning] = useState(false);
   const [messages, setMessages] = useState(initialMessages || []);
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  const { frequencyPenalty, presencePenalty, maxRetries, maxSteps, maxTokens, temperature, topK, topP, instructions } = modelSettings;
   useEffect(() => {
     if (messages.length === 0 || currentThreadId !== threadId) {
       if (initialMessages && threadId && memory) {
@@ -5721,8 +5746,6 @@ function MastraNetworkRuntimeProvider({
     }
   }, [initialMessages, threadId, memory, messages]);
   const mastra = createMastraClient(baseUrl);
-  console.log("MastraClient initialized");
-  console.log(messages, "###");
   const network = mastra.getNetwork(agentId);
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
@@ -5751,6 +5774,15 @@ function MastraNetworkRuntimeProvider({
           }
         ],
         runId: agentId,
+        frequencyPenalty,
+        presencePenalty,
+        maxRetries,
+        maxSteps,
+        maxTokens,
+        temperature,
+        topK,
+        topP,
+        instructions,
         ...memory ? { threadId, resourceId: agentId } : {}
       });
       if (!response.body) {
@@ -6105,8 +6137,34 @@ const ToolFallback = (props) => {
   }) });
 };
 
+const defaultModelSettings = {
+  maxRetries: 2,
+  maxSteps: 5,
+  temperature: 0.5,
+  topP: 1
+};
+const NetworkContext = createContext({});
+function NetworkProvider({ children }) {
+  const [modelSettings, setModelSettings] = useState(defaultModelSettings);
+  const resetModelSettings = () => {
+    setModelSettings(defaultModelSettings);
+  };
+  return /* @__PURE__ */ jsx(
+    NetworkContext.Provider,
+    {
+      value: {
+        modelSettings,
+        setModelSettings,
+        resetModelSettings
+      },
+      children
+    }
+  );
+}
+
 const NetworkChat = ({ agentId, memory }) => {
-  return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) }) });
+  const { modelSettings } = useContext(NetworkContext);
+  return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) }) });
 };
 
 function WorkflowTraces({ workflowName, baseUrl }) {
@@ -8647,7 +8705,7 @@ function VNextWorkflowTrigger({
         ] }) }, stepId) });
       }) })
     ] }),
-    isSuspendedSteps && suspendedSteps?.map((step) => {
+    !isWatchingVNextWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
       const stepDefinition = vNextWorkflow.steps[step.stepId];
       const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : z.record(z.string(), z.any());
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
@@ -8846,5 +8904,5 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger };
 //# sourceMappingURL=index.es.js.map