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

package/dist/index.es.js

@@ -3875,7 +3875,7 @@ const AssistantActionBar = () => {
 };
 
 const UserMessage = () => {
-  return /* @__PURE__ */ jsx(MessagePrimitive.Root, { className: "w-full flex justify-end", children: /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-4 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, {}) }) });
+  return /* @__PURE__ */ jsx(MessagePrimitive.Root, { className: "w-full flex justify-end pb-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, {}) }) });
 };
 
 const useAutoscroll = (ref, { enabled = true }) => {
@@ -4947,10 +4947,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", {
@@ -5202,13 +5198,12 @@ const TraceRow = ({ trace, index, isActive }) => {
   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 }),
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(TraceIcon, {}), children: [
-      trace.trace.length,
-      " span",
-      trace.trace.length > 1 ? "s" : ""
-    ] }) }) }),
+    /* @__PURE__ */ jsxs(TxtCell, { title: trace.traceId, children: [
+      trace.traceId.substring(0, 7),
+      "..."
+    ] }),
+    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: Math.round(trace.duration / 1e3) }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(TraceIcon, {}), children: trace.trace.length }) }) }),
     /* @__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" }) })
   ] });
 };
@@ -5218,11 +5213,11 @@ const TracesTable = ({ traces, isLoading, error }) => {
   const colsCount = 4;
   return /* @__PURE__ */ jsxs(Table, { size: "small", children: [
     /* @__PURE__ */ jsxs(Thead, { children: [
-      /* @__PURE__ */ jsx(Th, { width: 160, children: "Time" }),
+      /* @__PURE__ */ jsx(Th, { width: 120, 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: "Status" })
+      /* @__PURE__ */ jsx(Th, { width: 120, children: "Duration" }),
+      /* @__PURE__ */ jsx(Th, { width: 120, children: "Spans" }),
+      /* @__PURE__ */ jsx(Th, { width: 120, 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)) })
   ] });
@@ -5344,11 +5339,11 @@ const variantClasses = {
 };
 const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
-  return /* @__PURE__ */ jsxs("div", { className: "w-[166px] shrink-0", children: [
+  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: `${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: [
-        durationMs,
+        Math.round(durationMs),
         "ms"
       ] }),
       tokenCount && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
@@ -5531,7 +5526,7 @@ const HeaderGroup = ({ children }) => {
 };
 
 function TraceDetails() {
-  const { trace, currentTraceIndex, prevTrace, nextTrace, traces, clearData } = useContext(TraceContext);
+  const { trace, currentTraceIndex, prevTrace, nextTrace, traces } = useContext(TraceContext);
   const actualTrace = traces[currentTraceIndex];
   if (!actualTrace || !trace) return null;
   const hasFailure = trace.some((span) => span.status.code !== 0);
@@ -5552,7 +5547,7 @@ function TraceDetails() {
       /* @__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) })
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 7) })
         ] }),
         hasFailure && /* @__PURE__ */ jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: "Failed" })
       ] })
@@ -5584,7 +5579,7 @@ const SyntaxHighlighter = ({ data }) => {
 };
 
 function SpanDetail() {
-  const { span, setSpan, trace } = useContext(TraceContext);
+  const { span, setSpan, trace, setIsOpen } = useContext(TraceContext);
   if (!span || !trace) return null;
   const prevSpan = () => {
     const currentIndex = trace.findIndex((t) => t.id === span.id);
@@ -5608,8 +5603,9 @@ function SpanDetail() {
       ] }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
         "Span ",
-        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 5) })
-      ] }) })
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 7) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, {}) }) }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
       /* @__PURE__ */ jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
@@ -5617,11 +5613,11 @@ function SpanDetail() {
         span.name
       ] }),
       /* @__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),
+        Math.round(span.duration / 1e3),
         "ms"
       ] }) : /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
         "Failed in ",
-        formatDuration(span.duration),
+        Math.round(span.duration / 1e3),
         "ms"
       ] }) }),
       /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
@@ -5694,10 +5690,10 @@ const TracesSidebar = ({ onResize }) => {
   return /* @__PURE__ */ 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__ */ jsxs("div", { className: "h-full grid grid-cols-2", children: [
         /* @__PURE__ */ jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsx(TraceDetails, {}) }),
@@ -5715,7 +5711,7 @@ function AgentTracesInner({ agentName, baseUrl, className }) {
   const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
   const { isOpen: open } = useContext(TraceContext);
   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 }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
     open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
@@ -6175,7 +6171,7 @@ function WorkflowTracesInner({ workflowName, baseUrl }) {
   const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   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 }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
     open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }