create-appraise 0.1.0

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

@@ -0,0 +1,149 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { ViewReportButton } from '@/components/test-run/view-report-button'
+import { TestRun, TestRunTestCase, Tag, Environment, TestRunStatus, Report } from '@prisma/client'
+
+interface TestRunHeaderProps {
+  initialTestRun: TestRun & {
+    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+    tags: Tag[]
+    environment: Environment
+    reports: Report[]
+  }
+}
+
+export function TestRunHeader({ initialTestRun }: TestRunHeaderProps) {
+  const [testRun, setTestRun] = useState(initialTestRun)
+
+  // Poll for status updates while test run is running or queued
+  useEffect(() => {
+    // Only poll if test run is not completed/cancelled
+    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
+        }
+
+        const typedTestRun = updatedTestRun as TestRun & {
+          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+          tags: Tag[]
+          environment: Environment
+          reports: Report[]
+        }
+
+        // Update state with latest test run data
+        setTestRun(typedTestRun)
+
+        // Stop polling if test run is completed or cancelled
+        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])
+
+  // Listen for SSE exit events from LogViewer as a backup signal
+  useEffect(() => {
+    const handleTestRunExit = (event: CustomEvent<{ testRunId: string }>) => {
+      // Only handle events for this test run
+      if (event.detail.testRunId === testRun.runId) {
+        // Trigger a status refresh
+        getTestRunByIdAction(testRun.id)
+          .then(response => {
+            if (response.data && !response.error) {
+              const typedTestRun = response.data as TestRun & {
+                testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+                tags: Tag[]
+                environment: Environment
+                reports: Report[]
+              }
+              setTestRun(typedTestRun)
+            }
+          })
+          .catch(error => {
+            console.error('Error refreshing test run status after exit event:', error)
+          })
+      }
+    }
+
+    // Listen for custom event dispatched by LogViewer
+    window.addEventListener('testrun:exit', handleTestRunExit as EventListener)
+
+    return () => {
+      window.removeEventListener('testrun:exit', handleTestRunExit as EventListener)
+    }
+  }, [testRun.id, testRun.runId])
+
+  // Poll for report updates after test run completes
+  useEffect(() => {
+    // Only poll if test run is completed (not cancelled) but no report exists yet
+    // Cancelled runs won't generate reports, so we don't poll for them
+    const shouldPoll = testRun.status === TestRunStatus.COMPLETED && testRun.reports.length === 0
+
+    if (!shouldPoll) {
+      return
+    }
+
+    // Poll for reports (they might be created asynchronously after test run completes)
+    const pollInterval = setInterval(async () => {
+      try {
+        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
+        if (error || !updatedTestRun) {
+          console.error('Error polling for report:', error)
+          return
+        }
+
+        const typedTestRun = updatedTestRun as TestRun & {
+          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+          tags: Tag[]
+          environment: Environment
+          reports: Report[]
+        }
+
+        // Update if reports are now available
+        if (typedTestRun.reports.length > 0) {
+          setTestRun(typedTestRun)
+          clearInterval(pollInterval)
+        }
+      } catch (error) {
+        console.error('Error polling for report:', error)
+      }
+    }, 2000) // Poll every 2 seconds
+
+    // Stop polling after 30 seconds to avoid infinite polling
+    const timeout = setTimeout(() => {
+      clearInterval(pollInterval)
+    }, 30000)
+
+    return () => {
+      clearInterval(pollInterval)
+      clearTimeout(timeout)
+    }
+  }, [testRun.id, testRun.status, testRun.reports.length])
+
+  return (
+    <div className="mb-8">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1">
+          <PageHeader>Test Run Details</PageHeader>
+          <HeaderSubtitle>View test run execution details and live logs</HeaderSubtitle>
+        </div>
+        <ViewReportButton testRunStatus={testRun.status} reports={testRun.reports} className="mt-2" />
+      </div>
+    </div>
+  )
+}

package/templates/default/src/components/test-run/view-report-button.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { TestRunStatus, Report } from '@prisma/client'
+import { Button } from '@/components/ui/button'
+import { FileText, LoaderCircle, XCircle } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import Link from 'next/link'
+
+interface ViewReportButtonProps {
+  testRunStatus: TestRunStatus
+  reports: Report[]
+  className?: string
+}
+
+export function ViewReportButton({ testRunStatus, reports, className }: ViewReportButtonProps) {
+  // Button should only be visible when test run is completed/cancelled AND a report exists
+  const shouldShowReportButton =
+    (testRunStatus === TestRunStatus.COMPLETED || testRunStatus === TestRunStatus.CANCELLED) && reports.length > 0
+
+  // Show cancelled status if test run is cancelled and no report exists
+  if (testRunStatus === TestRunStatus.CANCELLED && reports.length === 0) {
+    return (
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
+          <Button variant="outline" size="sm" className={className} disabled>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center gap-2"
+            >
+              <XCircle className="h-4 w-4" />
+              Report Not Available
+            </motion.div>
+          </Button>
+        </motion.div>
+      </AnimatePresence>
+    )
+  }
+
+  // Show generating report message only for completed (not cancelled) runs without reports
+  if (testRunStatus === TestRunStatus.COMPLETED && reports.length === 0) {
+    return (
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
+          <Button variant="outline" size="sm" className={className}>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center gap-2"
+            >
+              <LoaderCircle className="h-4 w-4 animate-spin" />
+              Generating Report...
+            </motion.div>
+          </Button>
+        </motion.div>
+      </AnimatePresence>
+    )
+  }
+
+  if (!shouldShowReportButton) {
+    return null
+  }
+
+  const reportId = reports[0].id
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -10 }}
+        transition={{ duration: 0.3, ease: 'easeOut' }}
+      >
+        <Link href={`/reports/${reportId}`}>
+          <Button variant="outline" size="sm" className={className}>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center gap-2"
+            >
+              <FileText className="h-4 w-4" />
+              View Report
+            </motion.div>
+          </Button>
+        </Link>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

package/templates/default/src/components/theme/mode-toggle.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+
+export function ModeToggle() {
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild className="fixed right-4 top-4">
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          onClick={() => setTheme('light')}
+          className={cn(
+            'active:bg-accent active:text-accent-foreground',
+            theme === 'light' && 'bg-accent text-accent-foreground',
+          )}
+        >
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme('dark')}
+          className={cn(
+            'active:bg-accent active:text-accent-foreground',
+            theme === 'dark' && 'bg-accent text-accent-foreground',
+          )}
+        >
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme('system')}
+          className={cn(
+            'active:bg-accent active:text-accent-foreground',
+            theme === 'system' && 'bg-accent text-accent-foreground',
+          )}
+        >
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/default/src/components/theme/theme-provider.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider defaultTheme="system" attribute="class" enableSystem={false} {...props}>{children}</NextThemesProvider>
+}

package/templates/default/src/components/typography/page-header-subtitle.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const HeaderSubtitle = ({ children }: { children: React.ReactNode }) => {
+  return <div className="text-sm font-medium text-muted-foreground">{children}</div>
+}
+
+export default HeaderSubtitle

package/templates/default/src/components/typography/page-header.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+const PageHeader = ({ className, children }: { className?: string; children: React.ReactNode }) => {
+  return <div className={cn('text-4xl font-bold text-primary', className)}>{children}</div>
+}
+
+export default PageHeader

package/templates/default/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/templates/default/src/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  ),
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ),
+)
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }

package/templates/default/src/components/ui/avatar.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/templates/default/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/templates/default/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }