@mastra/playground-ui 5.0.4 → 5.0.5-alpha.0

package/dist/index.css

@@ -6,7 +6,7 @@
   background-color: inherit;
 }
 
-[hidden]:where(:not([hidden=until-found])) {
+[hidden]:where(:not([hidden='until-found'])) {
   display: none !important;
 }
 
@@ -18,4 +18,4 @@
   color: #e6e6e6 !important;
   background-color: #121212 !important;
   border: none !important;
-}
+}

package/dist/index.es.js

@@ -3113,6 +3113,7 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
 });
 
 const sizes = {
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
   default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
   lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
 };
@@ -4316,6 +4317,20 @@ function MastraRuntimeProvider({
   ] });
 }
 
+const useAgentStore = create()(
+  persist(
+    (set) => ({
+      modelSettings: {},
+      setModelSettings: (modelSettings) => set((state) => ({ modelSettings: { ...state.modelSettings, ...modelSettings } })),
+      chatWithGenerate: {},
+      setChatWithGenerate: (chatWithGenerate) => set((state) => ({ chatWithGenerate: { ...state.chatWithGenerate, ...chatWithGenerate } }))
+    }),
+    {
+      name: "mastra-agent-store"
+    }
+  )
+);
+
 const defaultModelSettings$1 = {
   maxRetries: 2,
   maxSteps: 5,
@@ -4323,12 +4338,24 @@ const defaultModelSettings$1 = {
   topP: 1
 };
 const AgentContext = createContext({});
-function AgentProvider({ children }) {
-  const [modelSettings, setModelSettings] = useState(defaultModelSettings$1);
-  const [chatWithGenerate, setChatWithGenerate] = useState(false);
+function AgentProvider({ agentId, children }) {
+  const {
+    modelSettings: modelSettingsStore,
+    setModelSettings: setModelSettingsStore,
+    chatWithGenerate: chatWithGenerateStore,
+    setChatWithGenerate: setChatWithGenerateStore
+  } = useAgentStore();
+  const modelSettings = modelSettingsStore[agentId] || defaultModelSettings$1;
+  const setModelSettings = (modelSettings2) => {
+    setModelSettingsStore({ [agentId]: modelSettings2 });
+  };
   const resetModelSettings = () => {
     setModelSettings(defaultModelSettings$1);
   };
+  const chatWithGenerate = chatWithGenerateStore[agentId] || false;
+  const setChatWithGenerate = (chatWithGenerate2) => {
+    setChatWithGenerateStore({ [agentId]: chatWithGenerate2 });
+  };
   return /* @__PURE__ */ jsx(
     AgentContext.Provider,
     {
@@ -4380,7 +4407,7 @@ const AgentChat = ({
       modelSettings,
       chatWithGenerate,
       runtimeContext,
-      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "" }) })
+      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4 bg-surface1", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "" }) })
     }
   );
 };
@@ -5166,11 +5193,17 @@ const TraceTree = ({ children }) => {
 const variantClasses = {
   agent: "bg-accent1"
 };
-const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
+const Time = ({ durationMs, tokenCount, variant, progressPercent, offsetPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
   const percent = Math.min(100, progressPercent);
   return /* @__PURE__ */ jsxs("div", { className: "w-[80px] xl: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: `${percent}%` } }) }),
+    /* @__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: `${percent}%`, left: `${offsetPercent}%` }
+      }
+    ) }),
     /* @__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: [
         toSigFigs(durationMs, 3),
@@ -5184,14 +5217,6 @@ const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   ] });
 };
 
-const TraceDurationContext = createContext(0);
-const useTraceDuration = () => {
-  return useContext(TraceDurationContext);
-};
-const TraceDurationProvider = ({ children, durationMs }) => {
-  return /* @__PURE__ */ jsx(TraceDurationContext.Provider, { value: durationMs, children });
-};
-
 const spanIconMap = {
   tool: ToolsIcon,
   agent: AgentIcon,
@@ -5212,14 +5237,25 @@ const spanVariantClasses = {
   eval: "text-accent4",
   other: "text-icon6"
 };
-const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClick, isActive }) => {
+const Span = ({
+  children,
+  durationMs,
+  variant,
+  tokenCount,
+  spans,
+  isRoot,
+  onClick,
+  isActive,
+  offsetMs,
+  totalDurationMs
+}) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const traceDuration = useTraceDuration();
   const VariantIcon = spanIconMap[variant];
   const variantClass = spanVariantClasses[variant];
-  const progressPercent = durationMs / traceDuration * 100;
+  const progressPercent = durationMs / totalDurationMs * 100;
+  const offsetPercent = offsetMs / totalDurationMs * 100;
   const TextEl = onClick ? "button" : "div";
-  return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsxs("li", { 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(
@@ -5244,20 +5280,30 @@ const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClic
           durationMs,
           tokenCount,
           variant: variant === "agent" ? "agent" : void 0,
-          progressPercent
+          progressPercent,
+          offsetPercent
         }
       )
     ] }),
     isExpanded && spans && /* @__PURE__ */ jsx("div", { className: "ml-4", children: spans })
-  ] }) });
+  ] });
 };
 
 const Spans = ({ children }) => {
   return /* @__PURE__ */ jsx("ol", { children });
 };
 
-const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive }) => {
-  return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsx(
+const Trace = ({
+  name,
+  spans,
+  durationMs,
+  tokenCount,
+  onClick,
+  variant,
+  isActive,
+  totalDurationMs
+}) => {
+  return /* @__PURE__ */ jsx(
     Span,
     {
       isRoot: true,
@@ -5266,9 +5312,11 @@ const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive
       spans: /* @__PURE__ */ jsx(Spans, { children: spans }),
       onClick,
       isActive,
+      offsetMs: 0,
+      totalDurationMs,
       children: name
     }
-  ) });
+  );
 };
 
 const getSpanVariant = (span) => {
@@ -5293,40 +5341,71 @@ const getSpanVariant = (span) => {
   return "other";
 };
 
-function buildTree(items, parentSpanId = null) {
-  return items.filter((item) => item.parentSpanId === parentSpanId).map((item) => ({
-    ...item,
-    children: buildTree(items, item.id)
-  }));
+function buildTree(spans, minStartTime, totalDurationMs, parentSpanId = null) {
+  return spans.filter((span) => span.parentSpanId === parentSpanId).map((span) => {
+    return {
+      ...span,
+      children: buildTree(spans, minStartTime, totalDurationMs, span.id),
+      offset: (span.startTime - minStartTime) / 1e3,
+      // ns to ms
+      duration: span.duration / 1e3,
+      totalDurationMs
+    };
+  });
 }
-const NestedSpans = ({ spans }) => {
+const createSpanTree = (spans) => {
+  if (spans.length === 0) return [];
+  let minStartTime;
+  let maxEndTime;
+  const orderedTree = [];
+  const listSize = spans.length;
+  for (let i = listSize - 1; i >= 0; i--) {
+    const span = spans[i];
+    if (!minStartTime || span.startTime < minStartTime) {
+      minStartTime = span.startTime;
+    }
+    if (!maxEndTime || span.endTime > maxEndTime) {
+      maxEndTime = span.endTime;
+    }
+    if (span.name !== ".insert" && span.name !== "mastra.getStorage") {
+      orderedTree.push(span);
+    }
+  }
+  if (!minStartTime || !maxEndTime) return [];
+  const totalDurationMs = (maxEndTime - minStartTime) / 1e3;
+  return buildTree(orderedTree, minStartTime, totalDurationMs);
+};
+
+const NestedSpans = ({ spanNodes }) => {
   const { span: activeSpan, setSpan } = useContext(TraceContext);
-  return /* @__PURE__ */ jsx(Spans, { children: spans.map((span) => {
-    const isActive = span.id === activeSpan?.id;
+  return /* @__PURE__ */ jsx(Spans, { children: spanNodes.map((spanNode) => {
+    const isActive = spanNode.id === activeSpan?.id;
     return /* @__PURE__ */ jsx(
       Span,
       {
-        spans: span.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spans: span.children }),
-        durationMs: span.duration / 1e3,
-        variant: getSpanVariant(span),
+        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spanNodes: spanNode.children }),
+        durationMs: spanNode.duration,
+        offsetMs: spanNode.offset,
+        variant: getSpanVariant(spanNode),
         isActive,
-        onClick: () => setSpan(span),
-        children: span.name
+        onClick: () => setSpan(spanNode),
+        totalDurationMs: spanNode.totalDurationMs,
+        children: spanNode.name
       },
-      span.id
+      spanNode.id
     );
   }) });
 };
 function SpanView({ trace }) {
-  const shallowCopy = [...trace];
-  const tree = buildTree(shallowCopy.reverse());
   const { span: activeSpan, setSpan } = useContext(TraceContext);
+  const tree = createSpanTree(trace);
   return /* @__PURE__ */ jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsx(
     Trace,
     {
       name: node.name,
-      durationMs: node.duration / 1e3,
-      spans: /* @__PURE__ */ jsx(NestedSpans, { spans: node.children }),
+      durationMs: node.duration,
+      totalDurationMs: node.totalDurationMs,
+      spans: /* @__PURE__ */ jsx(NestedSpans, { spanNodes: node.children }),
       variant: getSpanVariant(node),
       isActive: node.id === activeSpan?.id,
       onClick: () => setSpan(node)
@@ -5462,8 +5541,7 @@ const refineTraces = (traces, isWorkflow = false) => {
     const parentSpan = value.find((span) => !span.parentSpanId || !listOfSpanIds.has(span.parentSpanId));
     const enrichedSpans = value.map((span) => ({
       ...span,
-      parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId,
-      relativePercentage: parentSpan ? span.duration / parentSpan.duration : 0
+      parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId
     }));
     const failedStatus = value.find((span) => span.status.code !== 0)?.status;
     return {
@@ -8911,6 +8989,41 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -9065,5 +9178,5 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   return { traces, firstCallLoading, error };
 };
 
-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, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useTraces };
+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, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, 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, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useTraces };
 //# sourceMappingURL=index.es.js.map