create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/components/test-run/test-run-details.tsx

@@ -1,400 +1,74 @@
 'use client'
 
-import { useEffect, useState, useRef } from 'react'
-import {
-  TestRun,
-  TestRunStatus,
-  TestRunResult,
-  Environment,
-  Tag,
-  TestRunTestCase,
-  TestRunTestCaseStatus,
-  TestRunTestCaseResult,
-  Report,
-} from '@prisma/client'
-import { Badge } from '@/components/ui/badge'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-import { cn, formatDateTime } from '@/lib/utils'
+import { AnimatePresence, motion } from 'motion/react'
+import { TestRunStatus, TestRunTestCaseResult } from '@prisma/client'
 import {
+  Binoculars,
   CheckCircle,
-  XCircle,
+  ExternalLink,
+  Info,
   LoaderCircle,
-  Clock,
-  ListEnd,
-  ClipboardCheck,
-  ClipboardX,
-  TestTubeDiagonal,
-  TestTubes,
   Tag as TagIcon,
   Tags,
-  Info,
+  TestTubeDiagonal,
+  TestTubes,
   Timer,
-  Binoculars,
-  ExternalLink,
   Trash,
+  XCircle,
 } from 'lucide-react'
-import {
-  getTestRunByIdAction,
-  spawnTraceViewerAction,
-  checkTraceViewerStatusAction,
-  cancelTestRunAction,
-} from '@/actions/test-run/test-run-actions'
+
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { AnimatePresence, motion } from 'motion/react'
-import { toast } from '@/hooks/use-toast'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { cn, formatDateTime } from '@/lib/utils'
 
-interface TestRunDetailsProps {
-  testRun: TestRun & {
-    testCases: (TestRunTestCase & {
-      testCase: { title: string; description: string }
-      testSuite: { id: string; name: string } | null
-    })[]
-    tags: Tag[]
-    environment: Environment
-    reports: Report[]
-  }
+import {
+  getDurationSeconds,
+  getProgressStats,
+  getTestCaseResultMeta,
+  getTestCaseStatusMeta,
+  getTestRunResultText,
+  getTestRunStatusMeta,
+  type TestRunDetailsData,
+} from './test-run-details-helpers'
+import { useTestRunDetails } from './use-test-run-details'
+
+type TestRunDetailsProps = {
+  testRun: TestRunDetailsData
 }
 
 export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps) {
-  const [testRun, setTestRun] = useState(initialTestRun)
-  const [loadingTraceViewer, setLoadingTraceViewer] = useState<string | null>(null)
-  const [runningTraceViewers, setRunningTraceViewers] = useState<Set<string>>(new Set())
-  const [isCancelling, setIsCancelling] = useState(false)
-  const runningTraceViewersRef = useRef<Set<string>>(new Set())
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    runningTraceViewersRef.current = runningTraceViewers
-  }, [runningTraceViewers])
-
-  // Poll for status updates while test run is running
-  useEffect(() => {
-    // Only poll if test run is not completed
-    if (testRun.status === TestRunStatus.COMPLETED || testRun.status === TestRunStatus.CANCELLED) {
-      return
-    }
-
-    const pollInterval = setInterval(async () => {
-      try {
-        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
-        if (error || !updatedTestRun) {
-          console.error('Error polling test run status:', error)
-          return
-        }
-        // TypeScript now knows updatedTestRun is defined - cast to proper type
-        const typedTestRun = updatedTestRun as TestRun & {
-          testCases: (TestRunTestCase & {
-            testCase: { title: string; description: string }
-            testSuite: { id: string; name: string } | null
-          })[]
-          tags: Tag[]
-          environment: Environment
-          reports: Report[]
-        }
-        setTestRun(typedTestRun)
-        // Stop polling if test run is completed
-        if (typedTestRun.status === TestRunStatus.COMPLETED || typedTestRun.status === TestRunStatus.CANCELLED) {
-          clearInterval(pollInterval)
-        }
-      } catch (error) {
-        console.error('Error polling test run status:', error)
-      }
-    }, 2000) // Poll every 2 seconds
-
-    return () => clearInterval(pollInterval)
-  }, [testRun.id, testRun.status])
-  const getStatusIcon = () => {
-    switch (testRun.status) {
-      case TestRunStatus.QUEUED:
-        return <ListEnd className="h-4 w-4" />
-      case TestRunStatus.RUNNING:
-        return <LoaderCircle className="h-4 w-4 animate-spin" />
-      case TestRunStatus.COMPLETED:
-        return testRun.result === TestRunResult.PASSED ? (
-          <CheckCircle className="h-4 w-4" />
-        ) : (
-          <XCircle className="h-4 w-4" />
-        )
-      case TestRunStatus.CANCELLED:
-        return <XCircle className="h-4 w-4" />
-      default:
-        return <Clock className="h-4 w-4" />
-    }
-  }
-
-  const getStatusColor = () => {
-    switch (testRun.status) {
-      case TestRunStatus.QUEUED:
-        return 'bg-gray-500'
-      case TestRunStatus.RUNNING:
-        return 'bg-blue-500'
-      case TestRunStatus.COMPLETED:
-        return testRun.result === TestRunResult.PASSED ? 'bg-green-700' : 'bg-red-500'
-      case TestRunStatus.CANCELLED:
-        return 'bg-red-500'
-      default:
-        return 'bg-gray-500'
-    }
-  }
-
-  const getStatusText = () => {
-    switch (testRun.status) {
-      case TestRunStatus.QUEUED:
-        return 'Queued'
-      case TestRunStatus.RUNNING:
-        return 'Running'
-      case TestRunStatus.COMPLETED:
-        return 'Completed'
-      case TestRunStatus.CANCELLED:
-        return 'Cancelled'
-      default:
-        return 'Unknown'
-    }
-  }
-
-  const getResultText = () => {
-    switch (testRun.result) {
-      case TestRunResult.PENDING:
-        return 'Pending'
-      case TestRunResult.PASSED:
-        return 'Passed'
-      case TestRunResult.FAILED:
-        return 'Failed'
-      case TestRunResult.CANCELLED:
-        return 'Cancelled'
-      default:
-        return 'Unknown'
-    }
-  }
-
-  const getFormattedTestRunTestCaseStatus = (status: TestRunTestCaseStatus) => {
-    switch (status) {
-      case TestRunTestCaseStatus.PENDING:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <LoaderCircle className="h-4 w-4 animate-spin" />
-            <span>Pending</span>
-          </div>
-        )
-      case TestRunTestCaseStatus.RUNNING:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <LoaderCircle className="h-4 w-4 animate-spin" />
-            <span>Running</span>
-          </div>
-        )
-      case TestRunTestCaseStatus.COMPLETED:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <CheckCircle className="h-4 w-4 text-green-500" />
-            <span>Completed</span>
-          </div>
-        )
-      case TestRunTestCaseStatus.CANCELLED:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <XCircle className="h-4 w-4" />
-            <span>Cancelled</span>
-          </div>
-        )
-      default:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <Clock className="h-4 w-4" />
-            <span>Unknown</span>
-          </div>
-        )
-    }
-  }
-
-  const getFormattedTestRunTestCaseResult = (result: TestRunTestCaseResult) => {
-    switch (result) {
-      case TestRunTestCaseResult.PASSED:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <ClipboardCheck className="h-4 w-4 text-green-500" />
-            <span>Passed</span>
-          </div>
-        )
-      case TestRunTestCaseResult.FAILED:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <ClipboardX className="h-4 w-4 text-red-500" />
-            <span>Failed</span>
-          </div>
-        )
-      case TestRunTestCaseResult.UNTESTED:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <Clock className="h-4 w-4" />
-            <span>Untested</span>
-          </div>
-        )
-      default:
-        return (
-          <div className="flex min-w-20 items-center gap-2 p-1.5">
-            <Clock className="h-4 w-4" />
-            <span>Unknown</span>
-          </div>
-        )
-    }
-  }
-
-  // Calculate progress
-  const totalTests = testRun.testCases.length
-  const completedTests = testRun.testCases.filter(
-    testCase =>
-      testCase.status === TestRunTestCaseStatus.COMPLETED || testCase.status === TestRunTestCaseStatus.CANCELLED,
-  ).length
-  const progressPercentage = totalTests > 0 ? (completedTests / totalTests) * 100 : 0
-
-  const handleViewTrace = async (testCaseId: string) => {
-    setLoadingTraceViewer(testCaseId)
-    try {
-      const response = await spawnTraceViewerAction(testRun.runId, testCaseId)
-      if (response.error) {
-        console.error('Error spawning trace viewer:', response.error)
-        // TODO: Show error toast/notification to user
-        setLoadingTraceViewer(null)
-      } else {
-        // Trace viewer spawned successfully, mark it as running
-        setRunningTraceViewers(prev => new Set(prev).add(testCaseId))
-        setLoadingTraceViewer(null)
-      }
-    } catch (error) {
-      console.error('Error spawning trace viewer:', error)
-      // TODO: Show error toast/notification to user
-      setLoadingTraceViewer(null)
-    }
-  }
-
-  // Poll for trace viewer status for test cases that have trace viewers
-  useEffect(() => {
-    const failedTestCasesWithTraces = testRun.testCases.filter(
-      tc => tc.result === TestRunTestCaseResult.FAILED && tc.tracePath,
-    )
-
-    if (failedTestCasesWithTraces.length === 0) {
-      return
-    }
-
-    let isMounted = true
-
-    const checkTraceViewers = async () => {
-      // Get current running trace viewers from ref
-      const currentRunning = runningTraceViewersRef.current
-
-      if (!currentRunning || currentRunning.size === 0) {
-        return
-      }
-
-      // Check each test case asynchronously
-      const checkPromises = Array.from(currentRunning).map(async testCaseId => {
-        const testCase = failedTestCasesWithTraces.find(tc => tc.id === testCaseId)
-        if (!testCase) {
-          return { testCaseId, isRunning: false }
-        }
-
-        try {
-          const response = await checkTraceViewerStatusAction(testRun.runId, testCase.id)
-          const isRunning = response.data && (response.data as { isRunning: boolean }).isRunning
-          return { testCaseId, isRunning: isRunning ?? false }
-        } catch (error) {
-          console.error(`Error checking trace viewer status for test case ${testCase.id}:`, error)
-          // If we can't check, assume it's still running if we thought it was
-          return { testCaseId, isRunning: true }
-        }
-      })
-
-      const results = await Promise.all(checkPromises)
-      if (!isMounted) return
-
-      const actuallyRunning = new Set<string>()
-      results.forEach(({ testCaseId, isRunning }) => {
-        if (isRunning) {
-          actuallyRunning.add(testCaseId)
-        }
-      })
-
-      setRunningTraceViewers(prev => {
-        // Only update if there's a change
-        if (actuallyRunning.size === prev.size && Array.from(actuallyRunning).every(id => prev.has(id))) {
-          return prev
-        }
-        return actuallyRunning
-      })
-    }
-
-    // Only start polling if we have running trace viewers
-    if (runningTraceViewers.size === 0) {
-      return
-    }
+  const { testRun, loadingTraceViewer, runningTraceViewers, isCancelling, handleViewTrace, handleCancelRun } =
+    useTestRunDetails({ initialTestRun })
 
-    // Check immediately
-    checkTraceViewers()
-
-    // Then poll every 2 seconds
-    const interval = setInterval(() => {
-      if (isMounted) {
-        checkTraceViewers()
-      }
-    }, 2000)
-
-    return () => {
-      isMounted = false
-      clearInterval(interval)
-    }
-  }, [testRun.runId, testRun.testCases, runningTraceViewers.size])
-
-  const handleCancelRun = async () => {
-    setIsCancelling(true)
-    try {
-      const response = await cancelTestRunAction(testRun.runId)
-      if (response.error) {
-        throw new Error(response.error)
-      } else {
-        toast({
-          title: 'Test run cancelled',
-          description: response.message,
-        })
-        await new Promise(resolve => setTimeout(resolve, 2000))
-        setIsCancelling(false)
-      }
-    } catch (error) {
-      toast({
-        title: 'Error canceling test run',
-        description: error instanceof Error ? error.message : 'An unexpected error occurred',
-        variant: 'destructive',
-      })
-      setIsCancelling(false)
-    }
-  }
+  const statusMeta = getTestRunStatusMeta(testRun.status, testRun.result)
+  const progress = getProgressStats(testRun.testCases)
+  const durationSeconds = getDurationSeconds(testRun.startedAt, testRun.completedAt)
+  const StatusIcon = statusMeta.icon
 
   return (
     <div className="space-y-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center justify-between">
-            {testRun.status === TestRunStatus.RUNNING && (
+            {testRun.status === TestRunStatus.RUNNING ? (
               <div className="flex items-center gap-2">
                 <LoaderCircle className="h-6 w-6 animate-spin text-blue-500" />
                 <span>Executing</span>
               </div>
-            )}
-            {testRun.status === TestRunStatus.COMPLETED && (
+            ) : testRun.status === TestRunStatus.COMPLETED ? (
               <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
                 <CheckCircle className="h-6 w-6 text-green-500" />
                 <span>Finished</span>
               </div>
-            )}
-            {testRun.status === TestRunStatus.CANCELLED && (
+            ) : testRun.status === TestRunStatus.CANCELLED ? (
               <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
                 <XCircle className="h-6 w-6 text-red-500 duration-300 animate-in fade-in-0" />
                 <span>Interrupted</span>
               </div>
-            )}
-            {testRun.status === TestRunStatus.RUNNING && (
+            ) : null}
+            {testRun.status === TestRunStatus.RUNNING ? (
               <Button
                 onClick={handleCancelRun}
                 disabled={isCancelling}
@@ -413,16 +87,16 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
                   </>
                 )}
               </Button>
-            )}
+            ) : null}
           </CardTitle>
         </CardHeader>
         <CardContent>
           <div className="flex items-center gap-4">
             <div className="flex-1">
-              <Progress value={progressPercentage} />
+              <Progress value={progress.percentage} />
             </div>
             <div className="whitespace-nowrap text-sm font-medium">
-              {completedTests} of {totalTests} tests finished
+              {progress.completed} of {progress.total} tests finished
             </div>
           </div>
         </CardContent>
@@ -437,16 +111,22 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Name</span>
+              <span className="text-sm">{testRun.name}</span>
+            </div>
             <div className="flex items-center justify-between">
               <span className="text-sm font-medium">Status</span>
-              <Badge variant="outline" className={`${getStatusColor()} py-1`}>
-                <span className="mr-1 text-white">{getStatusIcon()}</span>
-                <span className="text-white">{getStatusText()}</span>
+              <Badge variant="outline" className={cn(statusMeta.badgeClassName, 'py-1')}>
+                <span className="mr-1 text-white">
+                  <StatusIcon className={cn('h-4 w-4', testRun.status === TestRunStatus.RUNNING && 'animate-spin')} />
+                </span>
+                <span className="text-white">{statusMeta.label}</span>
               </Badge>
             </div>
             <div className="flex items-center justify-between">
               <span className="text-sm font-medium">Result</span>
-              <Badge variant="outline">{getResultText()}</Badge>
+              <Badge variant="outline">{getTestRunResultText(testRun.result)}</Badge>
             </div>
             <div className="flex items-center justify-between">
               <span className="text-sm font-medium">Run ID</span>
@@ -479,20 +159,18 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
               <span className="text-sm font-medium">Started At</span>
               <span className="text-sm">{formatDateTime(testRun.startedAt)}</span>
             </div>
-            {testRun.completedAt && (
+            {testRun.completedAt ? (
               <div className="flex items-center justify-between">
                 <span className="text-sm font-medium">Completed At</span>
                 <span className="text-sm">{formatDateTime(testRun.completedAt)}</span>
               </div>
-            )}
-            {testRun.completedAt && (
+            ) : null}
+            {durationSeconds !== null ? (
               <div className="flex items-center justify-between">
                 <span className="text-sm font-medium">Duration</span>
-                <span className="text-sm">
-                  {Math.round((testRun.completedAt.getTime() - testRun.startedAt.getTime()) / 1000)}s
-                </span>
+                <span className="text-sm">{durationSeconds}s</span>
               </div>
-            )}
+            ) : null}
           </CardContent>
         </Card>
 
@@ -529,89 +207,109 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
           <CardContent>
             {testRun.testCases.length > 0 ? (
               <div className="space-y-2">
-                {testRun.testCases.map(testCase => (
-                  <div
-                    key={testCase.id}
-                    className="flex items-center justify-between rounded-md bg-muted p-2 shadow-md"
-                  >
-                    <div className="flex items-center gap-2">
-                      <TestTubeDiagonal
-                        className={cn(
-                          'mr-2 h-6 w-6 text-white',
-                          testCase.result === TestRunTestCaseResult.PASSED
-                            ? 'text-green-500'
-                            : testCase.result === TestRunTestCaseResult.FAILED
-                              ? 'text-red-500'
-                              : testCase.result === TestRunTestCaseResult.UNTESTED
-                                ? 'text-blue-500'
-                                : 'text-gray-500',
-                        )}
-                      />
-                      <div className="flex flex-col gap-1">
-                        <span className="text-sm font-semibold">{testCase.testCase.title}</span>
-                        <span className="text-xs text-muted-foreground">{testCase.testCase.description}</span>
-                        {testCase.testSuite && (
-                          <div className="pt-1">
-                            <Badge variant="outline" className="w-fit text-[11px]">
-                              Suite: {testCase.testSuite.name}
-                            </Badge>
-                          </div>
-                        )}
+                {testRun.testCases.map(testCase => {
+                  const testCaseStatusMeta = getTestCaseStatusMeta(testCase.status)
+                  const testCaseResultMeta = getTestCaseResultMeta(testCase.result)
+                  const TestCaseStatusIcon = testCaseStatusMeta.icon
+                  const TestCaseResultIcon = testCaseResultMeta.icon
+
+                  return (
+                    <div
+                      key={testCase.id}
+                      className="flex items-center justify-between rounded-md bg-muted p-2 shadow-md"
+                    >
+                      <div className="flex items-center gap-2">
+                        <TestTubeDiagonal
+                          className={cn(
+                            'mr-2 h-6 w-6 text-white',
+                            testCase.result === TestRunTestCaseResult.PASSED
+                              ? 'text-green-500'
+                              : testCase.result === TestRunTestCaseResult.FAILED
+                                ? 'text-red-500'
+                                : testCase.result === TestRunTestCaseResult.UNTESTED
+                                  ? 'text-blue-500'
+                                  : 'text-gray-500',
+                          )}
+                        />
+                        <div className="flex flex-col gap-1">
+                          <span className="text-sm font-semibold">{testCase.testCase.title}</span>
+                          <span className="text-xs text-muted-foreground">{testCase.testCase.description}</span>
+                          {testCase.testSuite ? (
+                            <div className="pt-1">
+                              <Badge variant="outline" className="w-fit text-[11px]">
+                                Suite: {testCase.testSuite.name}
+                              </Badge>
+                            </div>
+                          ) : null}
+                        </div>
                       </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Badge variant="outline" className="bg-gray-700 text-xs text-white">
-                        {getFormattedTestRunTestCaseStatus(testCase.status)}
-                      </Badge>
-                      <Badge variant="outline" className="bg-gray-700 text-xs text-white">
-                        {getFormattedTestRunTestCaseResult(testCase.result)}
-                      </Badge>
-                      {testCase.result === TestRunTestCaseResult.FAILED && testCase.tracePath && (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleViewTrace(testCase.id)}
-                          disabled={loadingTraceViewer === testCase.id || runningTraceViewers.has(testCase.id)}
-                          className="w-28 bg-transparent text-xs"
-                        >
-                          <AnimatePresence mode="wait" initial={false}>
-                            <motion.div
-                              key={
-                                loadingTraceViewer === testCase.id
-                                  ? 'opening'
-                                  : runningTraceViewers.has(testCase.id)
-                                    ? 'running'
-                                    : 'idle'
-                              }
-                              initial={{ opacity: 0, y: 4 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              exit={{ opacity: 0, y: -4 }}
-                              transition={{ duration: 0.15 }}
-                              className="flex w-full items-center justify-center gap-1"
-                            >
-                              {loadingTraceViewer === testCase.id ? (
-                                <>
-                                  <ExternalLink className="h-3 w-3 animate-pulse text-gray-500" />
-                                  Opening
-                                </>
-                              ) : runningTraceViewers.has(testCase.id) ? (
-                                <>
-                                  <LoaderCircle className="text-white-500 h-3 w-3 animate-spin" />
-                                  Running
-                                </>
-                              ) : (
-                                <>
-                                  <Binoculars className="h-3 w-3 text-blue-500" />
-                                  View Trace
-                                </>
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                          <div className="flex min-w-20 items-center gap-2 p-1.5">
+                            <TestCaseStatusIcon
+                              className={cn(
+                                'h-4 w-4',
+                                testCase.status === 'PENDING' || testCase.status === 'RUNNING'
+                                  ? 'animate-spin'
+                                  : testCaseStatusMeta.iconClassName,
                               )}
-                            </motion.div>
-                          </AnimatePresence>
-                        </Button>
-                      )}
+                            />
+                            <span>{testCaseStatusMeta.label}</span>
+                          </div>
+                        </Badge>
+                        <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                          <div className="flex min-w-20 items-center gap-2 p-1.5">
+                            <TestCaseResultIcon className={cn('h-4 w-4', testCaseResultMeta.iconClassName)} />
+                            <span>{testCaseResultMeta.label}</span>
+                          </div>
+                        </Badge>
+                        {testCase.result === TestRunTestCaseResult.FAILED && testCase.tracePath ? (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleViewTrace(testCase.id)}
+                            disabled={loadingTraceViewer === testCase.id || runningTraceViewers.has(testCase.id)}
+                            className="w-28 bg-transparent text-xs"
+                          >
+                            <AnimatePresence mode="wait" initial={false}>
+                              <motion.div
+                                key={
+                                  loadingTraceViewer === testCase.id
+                                    ? 'opening'
+                                    : runningTraceViewers.has(testCase.id)
+                                      ? 'running'
+                                      : 'idle'
+                                }
+                                initial={{ opacity: 0, y: 4 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -4 }}
+                                transition={{ duration: 0.15 }}
+                                className="flex w-full items-center justify-center gap-1"
+                              >
+                                {loadingTraceViewer === testCase.id ? (
+                                  <>
+                                    <ExternalLink className="h-3 w-3 animate-pulse text-gray-500" />
+                                    Opening
+                                  </>
+                                ) : runningTraceViewers.has(testCase.id) ? (
+                                  <>
+                                    <LoaderCircle className="text-white-500 h-3 w-3 animate-spin" />
+                                    Running
+                                  </>
+                                ) : (
+                                  <>
+                                    <Binoculars className="h-3 w-3 text-blue-500" />
+                                    View Trace
+                                  </>
+                                )}
+                              </motion.div>
+                            </AnimatePresence>
+                          </Button>
+                        ) : null}
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  )
+                })}
               </div>
             ) : (
               <span className="text-sm text-muted-foreground">No test cases</span>