@mastra/playground-ui 6.2.0-alpha.3 → 6.2.0-alpha.5

package/dist/index.es.js

@@ -17114,8 +17114,16 @@ const allowedAiSpanAttributes = [
   "ai.response.text",
   "ai.response.timestamp",
   "componentName",
+  // new format
+  "ai.usage.inputTokens",
+  "ai.usage.outputTokens",
+  // Legacy format
   "ai.usage.promptTokens",
-  "ai.usage.completionTokens"
+  "ai.usage.completionTokens",
+  // Common fields
+  "ai.usage.totalTokens",
+  "ai.usage.reasoningTokens",
+  "ai.usage.cachedInputTokens"
 ];
 
 function SpanDetail() {
@@ -17661,6 +17669,9 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     return null;
   }
   const generationSpans = traceSpans.filter((span) => span.spanType === "llm_generation");
+  const hasV5Format = generationSpans.some(
+    (span) => span.attributes?.usage?.inputTokens !== void 0 || span.attributes?.usage?.outputTokens !== void 0
+  );
   const tokensByProvider = generationSpans.reduce(
     (acc, span) => {
       const spanUsage2 = span.attributes?.usage || {};
@@ -17668,33 +17679,65 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       const provider = span?.attributes?.provider || "";
       const spanModelProvider = `${provider}${provider && model ? " / " : ""}${model}`;
       if (!acc?.[spanModelProvider]) {
-        acc[spanModelProvider] = { promptTokens: 0, completionTokens: 0, totalTokens: 0 };
+        if (hasV5Format) {
+          acc[spanModelProvider] = {
+            inputTokens: 0,
+            outputTokens: 0,
+            totalTokens: 0,
+            reasoningTokens: 0,
+            cachedInputTokens: 0
+          };
+        } else {
+          acc[spanModelProvider] = { promptTokens: 0, completionTokens: 0, totalTokens: 0 };
+        }
+      }
+      if ("inputTokens" in acc[spanModelProvider] && hasV5Format) {
+        const inputTokens = spanUsage2.inputTokens ?? 0;
+        const outputTokens = spanUsage2.outputTokens ?? 0;
+        const reasoningTokens = spanUsage2.reasoningTokens ?? 0;
+        const cachedInputTokens = spanUsage2.cachedInputTokens ?? 0;
+        const v5Acc = acc[spanModelProvider];
+        v5Acc.inputTokens += inputTokens;
+        v5Acc.outputTokens += outputTokens;
+        v5Acc.reasoningTokens += reasoningTokens;
+        v5Acc.cachedInputTokens += cachedInputTokens;
+        v5Acc.totalTokens += spanUsage2.totalTokens || inputTokens + outputTokens;
+      } else if ("promptTokens" in acc[spanModelProvider] && !hasV5Format) {
+        const promptTokens = spanUsage2.promptTokens ?? 0;
+        const completionTokens = spanUsage2.completionTokens ?? 0;
+        const legacyAcc = acc[spanModelProvider];
+        legacyAcc.promptTokens += promptTokens;
+        legacyAcc.completionTokens += completionTokens;
+        legacyAcc.totalTokens += spanUsage2.totalTokens || promptTokens + completionTokens;
       }
-      acc[spanModelProvider].promptTokens += spanUsage2.promptTokens || 0;
-      acc[spanModelProvider].completionTokens += spanUsage2.completionTokens || 0;
-      acc[spanModelProvider].totalTokens += (spanUsage2.promptTokens || 0) + (spanUsage2.completionTokens || 0);
       return acc;
     },
     {}
   );
-  const traceTokensBasedOnSpans = Object.keys(
-    tokensByProvider
-  ).reduce(
+  const traceTokensBasedOnSpans = Object.keys(tokensByProvider).reduce(
     (acc, provider) => {
-      const { promptTokens, completionTokens, totalTokens } = tokensByProvider[provider];
-      acc.promptTokens += promptTokens;
-      acc.completionTokens += completionTokens;
-      acc.totalTokens += totalTokens;
+      const providerUsage = tokensByProvider[provider];
+      if (hasV5Format) {
+        const v5Usage = providerUsage;
+        const v5Acc = acc;
+        v5Acc.inputTokens = (v5Acc.inputTokens || 0) + v5Usage.inputTokens;
+        v5Acc.outputTokens = (v5Acc.outputTokens || 0) + v5Usage.outputTokens;
+        v5Acc.reasoningTokens = (v5Acc.reasoningTokens || 0) + (v5Usage?.reasoningTokens ?? 0);
+        v5Acc.cachedInputTokens = (v5Acc.cachedInputTokens || 0) + (v5Usage?.cachedInputTokens ?? 0);
+        v5Acc.totalTokens = (v5Acc.totalTokens || 0) + v5Usage.totalTokens;
+      } else {
+        const legacyUsage = providerUsage;
+        const legacyAcc = acc;
+        legacyAcc.promptTokens = (legacyAcc.promptTokens || 0) + legacyUsage.promptTokens;
+        legacyAcc.completionTokens = (legacyAcc.completionTokens || 0) + legacyUsage.completionTokens;
+        legacyAcc.totalTokens = (legacyAcc.totalTokens || 0) + legacyUsage.totalTokens;
+      }
       return acc;
     },
-    { promptTokens: 0, completionTokens: 0, totalTokens: 0 }
+    hasV5Format ? { inputTokens: 0, outputTokens: 0, totalTokens: 0, reasoningTokens: 0, cachedInputTokens: 0 } : { promptTokens: 0, completionTokens: 0, totalTokens: 0 }
   );
   const tokensByProviderValid = JSON.stringify(traceUsage) === JSON.stringify(traceTokensBasedOnSpans);
-  const tokenPresentations = {
-    totalTokens: {
-      label: "Total LLM Tokens",
-      icon: /* @__PURE__ */ jsx(CoinsIcon, {})
-    },
+  const legacyTokenPresentations = {
     promptTokens: {
       label: "Prompt Tokens",
       icon: /* @__PURE__ */ jsx(ArrowRightIcon, {})
@@ -17704,7 +17747,42 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
     }
   };
-  const usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
+  const v5TokenPresentations = {
+    inputTokens: {
+      label: "Input Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+    },
+    outputTokens: {
+      label: "Output Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    },
+    reasoningTokens: {
+      label: "Reasoning Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    },
+    cachedInputTokens: {
+      label: "Cached Input Tokens",
+      icon: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
+    }
+  };
+  const commonTokenPresentations = {
+    totalTokens: {
+      label: "Total LLM Tokens",
+      icon: /* @__PURE__ */ jsx(CoinsIcon, {})
+    }
+  };
+  let tokenPresentations = {};
+  if (hasV5Format) {
+    tokenPresentations = { ...commonTokenPresentations, ...v5TokenPresentations };
+  } else {
+    tokenPresentations = { ...commonTokenPresentations, ...legacyTokenPresentations };
+  }
+  let usageKeyOrder = [];
+  if (hasV5Format) {
+    usageKeyOrder = ["totalTokens", "inputTokens", "outputTokens", "reasoningTokens", "cachedInputTokens"];
+  } else {
+    usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
+  }
   const usageAsArray = Object.entries(traceUsage || spanUsage || {}).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
   return /* @__PURE__ */ jsx(
     "div",
@@ -18674,5 +18752,23 @@ const MemorySearch = ({
   ] });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorersTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScorersTableSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useExecuteWorkflow, useInView, useLegacyWorkflow, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useResumeWorkflow, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWatchWorkflow, useWorkflow, useWorkflowRuns, useWorkingMemory };
+const errorFallback = "Something went wrong while fetching the data.";
+const parseError = (error) => {
+  try {
+    const httpErrorPattern = /^HTTP error! status:\s*\d+\s*- \s*/;
+    const errorMessage = error?.message.replace(httpErrorPattern, "");
+    const jsonError = JSON.parse(errorMessage || "{}");
+    return {
+      error: jsonError?.error || errorFallback,
+      stack: jsonError?.stack || error?.stack
+    };
+  } catch {
+    return {
+      error: error?.message || errorFallback,
+      stack: void 0
+    };
+  }
+};
+
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorersTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScorersTableSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, parseError, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useExecuteWorkflow, useInView, useLegacyWorkflow, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useResumeWorkflow, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWatchWorkflow, useWorkflow, useWorkflowRuns, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map