@mastra/playground-ui 5.0.1-alpha.6 → 5.0.1-alpha.9

package/dist/index.cjs.js

@@ -3907,7 +3907,7 @@ const AssistantActionBar = () => {
 };
 
 const UserMessage = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Root, { className: "w-full flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-4 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Content, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Root, { className: "w-full flex justify-end pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Content, {}) }) });
 };
 
 const useAutoscroll = (ref, { enabled = true }) => {
@@ -4979,10 +4979,6 @@ function usePolling({
   };
 }
 
-function formatDuration(duration, fixedPoint = 2) {
-  const durationInSecs = duration / 1e3;
-  return durationInSecs.toFixed(fixedPoint);
-}
 function formatOtelTimestamp(otelTimestamp) {
   const date = new Date(otelTimestamp / 1e3);
   return new Intl.DateTimeFormat("en-US", {
@@ -5234,13 +5230,12 @@ const TraceRow = ({ trace, index, isActive }) => {
   const hasFailure = trace.trace.some((span) => span.status.code !== 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
     /* @__PURE__ */ jsxRuntime.jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: trace.traceId }),
-    /* @__PURE__ */ jsxRuntime.jsx(UnitCell, { unit: "ms", children: trace.duration / 1e3 }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(TraceIcon, {}), children: [
-      trace.trace.length,
-      " span",
-      trace.trace.length > 1 ? "s" : ""
-    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TxtCell, { title: trace.traceId, children: [
+      trace.traceId.substring(0, 7),
+      "..."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(UnitCell, { unit: "ms", children: Math.round(trace.duration / 1e3) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
     /* @__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" }) })
   ] });
 };
@@ -5250,11 +5245,11 @@ const TracesTable = ({ traces, isLoading, error }) => {
   const colsCount = 4;
   return /* @__PURE__ */ jsxRuntime.jsxs(Table, { size: "small", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Time" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Time" }),
       /* @__PURE__ */ jsxRuntime.jsx(Th, { width: "auto", children: "Trace Id" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Duration" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Spans" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, children: "Status" })
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Duration" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Spans" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 120, children: "Status" })
     ] }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableSkeleton, { colsCount }) : error ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsxRuntime.jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsxRuntime.jsx(TraceRow, { trace, index, isActive: index === currentTraceIndex }, trace.traceId)) })
   ] });
@@ -5376,11 +5371,11 @@ const variantClasses = {
 };
 const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[166px] shrink-0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${progressPercent}%` } }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
-        durationMs,
+        Math.round(durationMs),
         "ms"
       ] }),
       tokenCount && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
@@ -5563,7 +5558,7 @@ const HeaderGroup = ({ children }) => {
 };
 
 function TraceDetails() {
-  const { trace, currentTraceIndex, prevTrace, nextTrace, traces, clearData } = React.useContext(TraceContext);
+  const { trace, currentTraceIndex, prevTrace, nextTrace, traces } = React.useContext(TraceContext);
   const actualTrace = traces[currentTraceIndex];
   if (!actualTrace || !trace) return null;
   const hasFailure = trace.some((span) => span.status.code !== 0);
@@ -5584,7 +5579,7 @@ function TraceDetails() {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 justify-between w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5 shrink-0", children: [
           "Trace ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 5) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 7) })
         ] }),
         hasFailure && /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" })
       ] })
@@ -5616,7 +5611,7 @@ const SyntaxHighlighter = ({ data }) => {
 };
 
 function SpanDetail() {
-  const { span, setSpan, trace } = React.useContext(TraceContext);
+  const { span, setSpan, trace, setIsOpen } = React.useContext(TraceContext);
   if (!span || !trace) return null;
   const prevSpan = () => {
     const currentIndex = trace.findIndex((t) => t.id === span.id);
@@ -5640,8 +5635,9 @@ function SpanDetail() {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
         "Span ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 5) })
-      ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 7) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "bg-transparent border-none", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
@@ -5649,11 +5645,11 @@ function SpanDetail() {
         span.name
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
-        formatDuration(span.duration),
+        Math.round(span.duration / 1e3),
         "ms"
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
         "Failed in ",
-        formatDuration(span.duration),
+        Math.round(span.duration / 1e3),
         "ms"
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
@@ -5726,10 +5722,10 @@ const TracesSidebar = ({ onResize }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     MastraResizablePanel,
     {
-      className: "h-full",
-      defaultWidth: 70,
+      className: "h-full absolute right-0 inset-y-0 bg-surface2",
+      defaultWidth: 80,
       minimumWidth: 50,
-      maximumWidth: 70,
+      maximumWidth: 80,
       setCurrentWidth: onResize,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full grid grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsxRuntime.jsx(TraceDetails, {}) }),
@@ -5747,7 +5743,7 @@ function AgentTracesInner({ agentName, baseUrl, className }) {
   const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
   const { isOpen: open } = React.useContext(TraceContext);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("h-full relative overflow-hidden flex", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-full overflow-y-scroll", open ? "w-auto" : "w-full"), children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -6207,7 +6203,7 @@ function WorkflowTracesInner({ workflowName, baseUrl }) {
   const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   const { isOpen: open } = React.useContext(TraceContext);
   return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-full", open ? "w-auto" : "w-full"), children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsxRuntime.jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }