From f0d84cb79497b225bd9fe1724286576f079f98d8 Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Wed, 3 Jun 2026 16:16:58 +0530
Subject: [PATCH] feat(replay-ui): show spec filename with full path on hover

RunList and RunDetail now render the basename of spec_path (e.g.
login.spec.ts) with the full path available as a title tooltip.
---
 replay-ui/src/routes/RunDetail.tsx | 7 ++++++-
 replay-ui/src/routes/RunList.tsx   | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/replay-ui/src/routes/RunDetail.tsx b/replay-ui/src/routes/RunDetail.tsx
index 4028ee8..8063816 100644
--- a/replay-ui/src/routes/RunDetail.tsx
+++ b/replay-ui/src/routes/RunDetail.tsx
@@ -15,6 +15,11 @@ import { useStep } from "../hooks/useStep";
 import { useKeyboardNav } from "../hooks/useKeyboardNav";
 import { useTheme } from "../hooks/useTheme";
 
+function basename(specPath: string): string {
+  const index = specPath.lastIndexOf("/");
+  return index >= 0 ? specPath.slice(index + 1) : specPath;
+}
+
 interface RunHistory {
   names: string[];
   lanes: PropertyLane[];
@@ -242,7 +247,7 @@ export default function RunDetail() {
           <Link to="/">runs</Link>
           <span>{run.id}</span>
           <span>
-            <strong>{run.spec_path}</strong> seed={run.seed}
+            <strong title={run.spec_path}>{basename(run.spec_path)}</strong> seed={run.seed}
           </span>
           <span>
             step {stepIndex} / {stepCount ?? 0}
diff --git a/replay-ui/src/routes/RunList.tsx b/replay-ui/src/routes/RunList.tsx
index 4b7e2d7..57f5670 100644
--- a/replay-ui/src/routes/RunList.tsx
+++ b/replay-ui/src/routes/RunList.tsx
@@ -28,6 +28,11 @@ function formatStartedAt(value: string): string {
   return date.toLocaleString();
 }
 
+function basename(specPath: string): string {
+  const index = specPath.lastIndexOf("/");
+  return index >= 0 ? specPath.slice(index + 1) : specPath;
+}
+
 export default function RunList() {
   const [runs, setRuns] = useState<RunSummary[] | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -76,7 +81,7 @@ export default function RunList() {
             <td>
               <Link to={`/runs/${run.id}`}>{formatStartedAt(run.started_at)}</Link>
             </td>
-            <td>{run.spec_path}</td>
+            <td title={run.spec_path}>{basename(run.spec_path)}</td>
             <td>{run.seed}</td>
             <td>{run.platform}</td>
             <td>{formatDuration(run.duration_millis)}</td>