@argus-vrt/web 0.1.0

package/src/routeTree.gen.ts

@@ -0,0 +1,177 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as UploadRouteImport } from './routes/upload'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as TestsIndexRouteImport } from './routes/tests/index'
+import { Route as BranchesIndexRouteImport } from './routes/branches/index'
+import { Route as TestsIdRouteImport } from './routes/tests/$id'
+import { Route as BranchesNameRouteImport } from './routes/branches/$name'
+
+const UploadRoute = UploadRouteImport.update({
+  id: '/upload',
+  path: '/upload',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const TestsIndexRoute = TestsIndexRouteImport.update({
+  id: '/tests/',
+  path: '/tests/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BranchesIndexRoute = BranchesIndexRouteImport.update({
+  id: '/branches/',
+  path: '/branches/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const TestsIdRoute = TestsIdRouteImport.update({
+  id: '/tests/$id',
+  path: '/tests/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BranchesNameRoute = BranchesNameRouteImport.update({
+  id: '/branches/$name',
+  path: '/branches/$name',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/upload': typeof UploadRoute
+  '/branches/$name': typeof BranchesNameRoute
+  '/tests/$id': typeof TestsIdRoute
+  '/branches/': typeof BranchesIndexRoute
+  '/tests/': typeof TestsIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/upload': typeof UploadRoute
+  '/branches/$name': typeof BranchesNameRoute
+  '/tests/$id': typeof TestsIdRoute
+  '/branches': typeof BranchesIndexRoute
+  '/tests': typeof TestsIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/upload': typeof UploadRoute
+  '/branches/$name': typeof BranchesNameRoute
+  '/tests/$id': typeof TestsIdRoute
+  '/branches/': typeof BranchesIndexRoute
+  '/tests/': typeof TestsIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/upload'
+    | '/branches/$name'
+    | '/tests/$id'
+    | '/branches/'
+    | '/tests/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/upload'
+    | '/branches/$name'
+    | '/tests/$id'
+    | '/branches'
+    | '/tests'
+  id:
+    | '__root__'
+    | '/'
+    | '/upload'
+    | '/branches/$name'
+    | '/tests/$id'
+    | '/branches/'
+    | '/tests/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  UploadRoute: typeof UploadRoute
+  BranchesNameRoute: typeof BranchesNameRoute
+  TestsIdRoute: typeof TestsIdRoute
+  BranchesIndexRoute: typeof BranchesIndexRoute
+  TestsIndexRoute: typeof TestsIndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/upload': {
+      id: '/upload'
+      path: '/upload'
+      fullPath: '/upload'
+      preLoaderRoute: typeof UploadRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/tests/': {
+      id: '/tests/'
+      path: '/tests'
+      fullPath: '/tests/'
+      preLoaderRoute: typeof TestsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/branches/': {
+      id: '/branches/'
+      path: '/branches'
+      fullPath: '/branches/'
+      preLoaderRoute: typeof BranchesIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/tests/$id': {
+      id: '/tests/$id'
+      path: '/tests/$id'
+      fullPath: '/tests/$id'
+      preLoaderRoute: typeof TestsIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/branches/$name': {
+      id: '/branches/$name'
+      path: '/branches/$name'
+      fullPath: '/branches/$name'
+      preLoaderRoute: typeof BranchesNameRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  UploadRoute: UploadRoute,
+  BranchesNameRoute: BranchesNameRoute,
+  TestsIdRoute: TestsIdRoute,
+  BranchesIndexRoute: BranchesIndexRoute,
+  TestsIndexRoute: TestsIndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/src/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+  const router = createRouter({
+    routeTree,
+    context: {},
+
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}

package/src/routes/__root.tsx

@@ -0,0 +1,174 @@
+import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { Sun, Moon, Menu, X } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: 'Argus' },
+    ],
+    links: [
+      { rel: 'icon', type: 'image/svg+xml', href: '/logo-argus.svg' },
+      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap' },
+      { rel: 'stylesheet', href: appCss },
+    ],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  const [darkMode, setDarkMode] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    // Check localStorage and system preference on mount
+    const stored = localStorage.getItem('darkMode')
+    if (stored !== null) {
+      setDarkMode(stored === 'true')
+    } else {
+      setDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
+    }
+  }, [])
+
+  useEffect(() => {
+    // Update class and localStorage when darkMode changes
+    if (darkMode) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+    localStorage.setItem('darkMode', String(darkMode))
+  }, [darkMode])
+
+  // Close mobile menu on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setMobileMenuOpen(false)
+      }
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [])
+
+  // Lock body scroll when mobile menu is open
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [mobileMenuOpen])
+
+  const navLinks = [
+    { href: '/tests', label: 'Tests' },
+    { href: '/branches', label: 'Branches' },
+  ]
+
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+        <nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between h-16">
+              {/* Logo */}
+              <div className="flex items-center">
+                <a href="/" className="flex items-center gap-2.5">
+                  <img src="/logo-argus.svg" alt="Argus" className="w-8 h-8" />
+                  <div className="flex flex-col">
+                    <span className="font-heading font-semibold text-gray-900 dark:text-white">
+                      Argus
+                    </span>
+                    <span className="text-xs text-gray-500 dark:text-gray-400 -mt-0.5 hidden sm:block">
+                      Visual Regression Testing
+                    </span>
+                  </div>
+                </a>
+              </div>
+
+              {/* Desktop navigation */}
+              <div className="hidden md:flex items-center gap-4">
+                {navLinks.map((link) => (
+                  <a
+                    key={link.href}
+                    href={link.href}
+                    className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors"
+                  >
+                    {link.label}
+                  </a>
+                ))}
+                <button
+                  onClick={() => setDarkMode(!darkMode)}
+                  className="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                  title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+                >
+                  {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+                </button>
+              </div>
+
+              {/* Mobile menu button */}
+              <div className="flex items-center gap-2 md:hidden">
+                <button
+                  onClick={() => setDarkMode(!darkMode)}
+                  className="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                  title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+                >
+                  {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+                </button>
+                <button
+                  onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                  className="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                  aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+                >
+                  {mobileMenuOpen ? (
+                    <X className="w-6 h-6" />
+                  ) : (
+                    <Menu className="w-6 h-6" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile menu */}
+          <div
+            className={cn(
+              'md:hidden overflow-hidden transition-all duration-300 ease-in-out',
+              mobileMenuOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'
+            )}
+          >
+            <div className="px-4 py-2 space-y-1 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+              {navLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </nav>
+        <main>
+          <Outlet />
+        </main>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/src/routes/branches/$name.tsx

@@ -0,0 +1,171 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { ArrowLeft, GitBranch, Hash } from 'lucide-react'
+import { eq, desc } from 'drizzle-orm'
+import { getDb, tests } from '../../db'
+import { formatRelativeTime } from '../../lib/utils'
+import { StatusBadge } from '../../components/ui/StatusBadge'
+
+const getBranchTests = createServerFn({ method: 'GET' })
+  .inputValidator((data: { name: string }) => data)
+  .handler(async ({ data }) => {
+    const branchName = decodeURIComponent(data.name)
+    const db = getDb()
+
+    const branchTests = await db
+      .select()
+      .from(tests)
+      .where(eq(tests.branch, branchName))
+      .orderBy(desc(tests.createdAt))
+
+    return {
+      branchName,
+      tests: branchTests.map((t) => ({
+        ...t,
+        createdAt: t.createdAt.toISOString(),
+      })),
+    }
+  })
+
+export const Route = createFileRoute('/branches/$name')({
+  component: BranchDetail,
+  loader: ({ params }) => getBranchTests({ data: { name: params.name } }),
+})
+
+function BranchDetail() {
+  const { branchName, tests } = Route.useLoaderData()
+
+  const stats = {
+    total: tests.length,
+    pending: tests.filter((t) => t.status === 'PENDING').length,
+    approved: tests.filter((t) => t.status === 'APPROVED').length,
+    rejected: tests.filter((t) => t.status === 'REJECTED').length,
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-6">
+        <Link
+          to="/branches"
+          className="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-4"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Branches
+        </Link>
+
+        <div className="flex items-center gap-3">
+          <GitBranch className="w-6 h-6 text-gray-400" />
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white truncate">{branchName}</h1>
+        </div>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          {stats.total} test{stats.total !== 1 ? 's' : ''} on this branch
+        </p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
+          <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Tests</div>
+          <div className="mt-2 text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+            {stats.total}
+          </div>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
+          <div className="text-sm font-medium text-warning-600 dark:text-warning-400">Pending</div>
+          <div className="mt-2 text-2xl sm:text-3xl font-bold text-warning-600 dark:text-warning-400">
+            {stats.pending}
+          </div>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
+          <div className="text-sm font-medium text-success-600 dark:text-success-400">Approved</div>
+          <div className="mt-2 text-2xl sm:text-3xl font-bold text-success-600 dark:text-success-400">
+            {stats.approved}
+          </div>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
+          <div className="text-sm font-medium text-error-600 dark:text-error-400">Rejected</div>
+          <div className="mt-2 text-2xl sm:text-3xl font-bold text-error-600 dark:text-error-400">
+            {stats.rejected}
+          </div>
+        </div>
+      </div>
+
+      {/* Tests List */}
+      <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+        <div className="px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-medium text-gray-900 dark:text-white">Test History</h2>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-900">
+              <tr>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Commit
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden md:table-cell">
+                  Changes
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden lg:table-cell">
+                  Created
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {tests.map((test) => (
+                <tr key={test.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center gap-2">
+                      <Hash className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                      <span className="text-sm font-mono text-gray-600 dark:text-gray-300">
+                        {test.commitHash}
+                      </span>
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 max-w-xs truncate">
+                      {test.commitMessage}
+                    </div>
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap">
+                    <StatusBadge status={test.status} />
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm hidden md:table-cell">
+                    <div className="flex items-center gap-4">
+                      <span className="text-warning-600 dark:text-warning-400">
+                        {test.changedCount} changed
+                      </span>
+                      <span className="text-success-600 dark:text-success-400">
+                        {test.passedCount} passed
+                      </span>
+                      {test.failedCount > 0 && (
+                        <span className="text-error-600 dark:text-error-400">
+                          {test.failedCount} failed
+                        </span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 hidden lg:table-cell">
+                    {formatRelativeTime(test.createdAt)}
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <Link
+                      to="/tests/$id"
+                      params={{ id: test.id }}
+                      className="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300"
+                    >
+                      View Details
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routes/branches/index.tsx

@@ -0,0 +1,104 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { GitBranch, ChevronRight } from 'lucide-react'
+import { sql, desc } from 'drizzle-orm'
+import { getDb, tests } from '../../db'
+import { formatRelativeTime } from '../../lib/utils'
+import { StatusIcon } from '../../components/ui/StatusBadge'
+
+const getBranches = createServerFn({ method: 'GET' }).handler(async () => {
+  const db = getDb()
+
+  // Get unique branches with their latest test
+  const branchData = await db
+    .select({
+      branch: tests.branch,
+      testCount: sql<number>`count(*)`.as('test_count'),
+    })
+    .from(tests)
+    .groupBy(tests.branch)
+
+  // Get the latest test for each branch
+  const branches = await Promise.all(
+    branchData.map(async (b) => {
+      const [latestTest] = await db
+        .select()
+        .from(tests)
+        .where(sql`${tests.branch} = ${b.branch}`)
+        .orderBy(desc(tests.createdAt))
+        .limit(1)
+
+      return {
+        name: b.branch,
+        lastTest: latestTest
+          ? {
+              id: latestTest.id,
+              status: latestTest.status,
+              commitHash: latestTest.commitHash,
+              createdAt: latestTest.createdAt.toISOString(),
+            }
+          : null,
+        testCount: Number(b.testCount),
+      }
+    })
+  )
+
+  return branches.filter((b) => b.lastTest !== null)
+})
+
+export const Route = createFileRoute('/branches/')({
+  component: BranchesIndex,
+  loader: () => getBranches(),
+})
+
+function BranchesIndex() {
+  const branches = Route.useLoaderData()
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Branches</h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          View visual testing status by branch
+        </p>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+        <ul className="divide-y divide-gray-200 dark:divide-gray-700">
+          {branches.map((branch) => (
+            <li key={branch.name}>
+              <Link
+                to="/branches/$name"
+                params={{ name: encodeURIComponent(branch.name) }}
+                className="block hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                <div className="px-4 sm:px-6 py-4 flex items-center justify-between">
+                  <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+                    <GitBranch className="w-5 h-5 text-gray-400 flex-shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <div className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                        {branch.name}
+                      </div>
+                      <div className="text-sm text-gray-500 dark:text-gray-400">
+                        {branch.testCount} test
+                        {branch.testCount !== 1 ? 's' : ''} &middot; Last run{' '}
+                        {formatRelativeTime(branch.lastTest!.createdAt)}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 sm:gap-4 flex-shrink-0 ml-2">
+                    <StatusIcon status={branch.lastTest!.status} />
+                    <span className="text-sm text-gray-500 dark:text-gray-400 font-mono hidden sm:inline">
+                      {branch.lastTest!.commitHash}
+                    </span>
+                    <ChevronRight className="w-5 h-5 text-gray-400" />
+                  </div>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}