From f8b26c87f832f33c5e8877f1ea8d55cf7b653fca Mon Sep 17 00:00:00 2001
From: Vignesh Gopalan <vigneshgopalandd@gmail.com>
Date: Wed, 22 Apr 2026 20:40:21 -0700
Subject: [PATCH] Eval NUX: replace play overlay with View sample trace button

Center the CTA on the first-run sample trace preview; remove the duplicate
heading so the subtext alone describes the action.

Made-with: Cursor
---
 .../client/src/components/CiEvalsTab.tsx            | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/mcpjam-inspector/client/src/components/CiEvalsTab.tsx b/mcpjam-inspector/client/src/components/CiEvalsTab.tsx
index 3a05d0e96..75399d4d2 100644
--- a/mcpjam-inspector/client/src/components/CiEvalsTab.tsx
+++ b/mcpjam-inspector/client/src/components/CiEvalsTab.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@workos-inc/authkit-react";
 import { useConvexAuth } from "convex/react";
-import { GitBranch, Loader2, Play } from "lucide-react";
+import { GitBranch, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import {
   Breadcrumb,
@@ -616,15 +616,12 @@ export function CiEvalsTab({
                         />
                         <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-black/20 group-hover:from-black/65 group-hover:via-black/35 group-hover:to-black/25 transition-colors" />
                         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                          <div className="rounded-full bg-white/90 group-hover:bg-white p-4 shadow-lg transition-colors">
-                            <Play className="h-6 w-6 text-black fill-black" />
+                          <div className="rounded-md border border-white/20 bg-white/95 px-4 py-2.5 text-sm font-semibold text-foreground shadow-lg transition-colors group-hover:bg-white">
+                            View sample trace
                           </div>
                         </div>
-                        <div className="pointer-events-none absolute bottom-3 left-4">
-                          <p className="text-white text-sm font-semibold drop-shadow-md">
-                            View sample trace
-                          </p>
-                          <p className="text-white/70 text-xs">
+                        <div className="pointer-events-none absolute bottom-3 left-4 max-w-[min(100%,18rem)]">
+                          <p className="text-white/80 text-xs leading-snug">
                             See what a completed eval looks like before you
                             start.
                           </p>