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

package/dist/ds/components/Table/Table.d.ts

@@ -25,5 +25,6 @@ export interface RowProps {
     className?: string;
     children: React.ReactNode;
     selected?: boolean;
+    onClick?: () => void;
 }
-export declare const Row: ({ className, children, selected }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: ({ className, children, selected, onClick }: RowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs.js

@@ -5125,8 +5125,20 @@ const Th = ({ className, children, ...props }) => {
 const Tbody = ({ className, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: clsx("", className), children });
 };
-const Row = ({ className, children, selected = false }) => {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: clsx(
+        "border-b-sm border-border1 hover:bg-surface3",
+        selected && "bg-surface4",
+        onClick && "cursor-pointer",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
 };
 
 const variants = {
@@ -5219,7 +5231,8 @@ const TracesTableError = ({ error, colsCount }) => {
 };
 const TraceRow = ({ trace, index, isActive }) => {
   const { openTrace } = useOpenTrace();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Row, { className: isActive ? "bg-surface4" : "", children: [
+  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 }),
@@ -5227,7 +5240,8 @@ const TraceRow = ({ trace, index, isActive }) => {
       trace.trace.length,
       " span",
       trace.trace.length > 1 ? "s" : ""
-    ] }) }) })
+    ] }) }) }),
+    /* @__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" }) })
   ] });
 };
 const TracesTable = ({ traces, isLoading, error }) => {
@@ -5239,7 +5253,8 @@ const TracesTable = ({ traces, isLoading, error }) => {
       /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, 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: "Spans" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Th, { width: 160, 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)) })
   ] });
@@ -5551,6 +5566,7 @@ function TraceDetails() {
   const { trace, currentTraceIndex, prevTrace, nextTrace, traces, clearData } = React.useContext(TraceContext);
   const actualTrace = traces[currentTraceIndex];
   if (!actualTrace || !trace) return null;
+  const hasFailure = trace.some((span) => span.status.code !== 0);
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -5565,10 +5581,13 @@ function TraceDetails() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", children: [
-        "Trace ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 5) })
-      ] }) })
+      /* @__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) })
+        ] }),
+        hasFailure && /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: "Failed" })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsx(SpanView, { trace }) })
   ] });
@@ -5629,7 +5648,11 @@ function SpanDetail() {
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(SpanIcon, { className: variantClass }) }),
         span.name
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), children: [
+      /* @__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),
+        "ms"
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
+        "Failed in ",
         formatDuration(span.duration),
         "ms"
       ] }) }),