create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

package/templates/starter/src/components/navigation/nav-link.tsx

@@ -1,60 +1,60 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-import { useMemo } from 'react'
-import { cn } from '@/lib/utils'
-
-const NavLink = ({
-  children,
-  href,
-  icon,
-  className,
-  isIconOnly,
-}: {
-  children?: React.ReactNode
-  href: string
-  icon?: React.ReactNode
-  className?: React.HTMLAttributes<HTMLAnchorElement>['className']
-  isIconOnly?: boolean
-}) => {
-  const pathname = usePathname()
-
-  // Use useMemo to prevent unnecessary re-renders and ensure stable active state
-  const isActive = useMemo(() => {
-    // Exact match for root paths
-    if (href === '/' && pathname === '/') {
-      return true
-    }
-    // For other paths, check if the current path starts with the href
-    // This handles nested routes like /test-cases/create, /test-cases/modify, etc.
-    return href !== '/' && pathname.startsWith(href)
-  }, [pathname, href])
-
-  return (
-    <Link
-      href={href}
-      className={cn(
-        'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors',
-        'hover:bg-accent hover:text-accent-foreground',
-        'focus:bg-accent focus:text-accent-foreground',
-        'focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50',
-        'disabled:pointer-events-none disabled:opacity-50',
-        'outline-none',
-        isActive && 'bg-accent text-accent-foreground',
-        className,
-      )}
-    >
-      {isIconOnly ? (
-        icon
-      ) : (
-        <div className="flex items-center gap-1">
-          {icon}
-          {children}
-        </div>
-      )}
-    </Link>
-  )
-}
-
-export default NavLink
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { cn } from '@/lib/utils'
+
+const NavLink = ({
+  children,
+  href,
+  icon,
+  className,
+  isIconOnly,
+}: {
+  children?: React.ReactNode
+  href: string
+  icon?: React.ReactNode
+  className?: React.HTMLAttributes<HTMLAnchorElement>['className']
+  isIconOnly?: boolean
+}) => {
+  const pathname = usePathname()
+
+  // Use useMemo to prevent unnecessary re-renders and ensure stable active state
+  const isActive = useMemo(() => {
+    // Exact match for root paths
+    if (href === '/' && pathname === '/') {
+      return true
+    }
+    // For other paths, check if the current path starts with the href
+    // This handles nested routes like /test-cases/create, /test-cases/modify, etc.
+    return href !== '/' && pathname.startsWith(href)
+  }, [pathname, href])
+
+  return (
+    <Link
+      href={href}
+      className={cn(
+        'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors',
+        'hover:bg-accent hover:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground',
+        'focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:ring-[3px]',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'outline-none',
+        isActive && 'bg-accent text-accent-foreground',
+        className,
+      )}
+    >
+      {isIconOnly ? (
+        icon
+      ) : (
+        <div className="flex items-center gap-1">
+          {icon}
+          {children}
+        </div>
+      )}
+    </Link>
+  )
+}
+
+export default NavLink

package/templates/starter/src/components/test-case/test-case-form-helpers.test.ts

@@ -1,11 +1,7 @@
 import { StepParameterType, TemplateStepIcon } from '@prisma/client'
 import { describe, expect, it } from 'vitest'
 
-import {
-  buildScenarioPreview,
-  buildScenarioSteps,
-  getNodesWithMissingMandatoryParams,
-} from './test-case-form-helpers'
+import { buildScenarioPreview, buildScenarioSteps, getNodesWithMissingMandatoryParams } from './test-case-form-helpers'
 
 describe('test-case form helpers', () => {
   it('builds gherkin preview text from ordered scenario steps', () => {

package/templates/starter/src/components/test-case/test-case-form-helpers.ts

@@ -54,11 +54,7 @@ export function buildScenarioSteps(nodeOrder: ScenarioNodeOrder) {
   }))
 }
 
-export function buildScenarioPreview(
-  title: string,
-  description: string | undefined,
-  nodeOrder: ScenarioNodeOrder,
-) {
+export function buildScenarioPreview(title: string, description: string | undefined, nodeOrder: ScenarioNodeOrder) {
   if (!title) {
     return ''
   }

package/templates/starter/src/components/test-case/test-case-picker-helpers.ts

@@ -10,16 +10,14 @@ export function createSelectionState(selectedIds: string[]): RowSelectionState {
 }
 
 export function testCaseMatchesQuery(testCase: TestCasePickerRow, filterValue: unknown): boolean {
-  const query = String(filterValue ?? '').trim().toLowerCase()
+  const query = String(filterValue ?? '')
+    .trim()
+    .toLowerCase()
   if (!query) {
     return true
   }
 
-  const searchableText = [
-    testCase.title,
-    testCase.description ?? '',
-    ...testCase.tags.map(tag => tag.name),
-  ]
+  const searchableText = [testCase.title, testCase.description ?? '', ...testCase.tags.map(tag => tag.name)]
     .join(' ')
     .toLowerCase()
 
@@ -32,7 +30,10 @@ export function getSavedTestCases(testCases: TestCasePickerRow[], selectedIds: s
     .filter((testCase): testCase is TestCasePickerRow => Boolean(testCase))
 }
 
-export function getSelectedIdsFromRowSelection(testCases: TestCasePickerRow[], rowSelection: RowSelectionState): string[] {
+export function getSelectedIdsFromRowSelection(
+  testCases: TestCasePickerRow[],
+  rowSelection: RowSelectionState,
+): string[] {
   return testCases.filter(testCase => rowSelection[testCase.id]).map(testCase => testCase.id)
 }
 

package/templates/starter/src/components/test-case/test-case-picker.tsx

@@ -187,9 +187,7 @@ function TestCasePicker({
                 <TableRow key={headerGroup.id}>
                   {headerGroup.headers.map(header => (
                     <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())}
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                     </TableHead>
                   ))}
                 </TableRow>
@@ -200,9 +198,7 @@ function TestCasePicker({
                 table.getRowModel().rows.map(row => (
                   <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                     {row.getVisibleCells().map(cell => (
-                      <TableCell key={cell.id}>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
+                      <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                     ))}
                   </TableRow>
                 ))

package/templates/starter/src/components/test-run/log-viewer.test.tsx

@@ -77,6 +77,31 @@ describe('LogViewer', () => {
     expect(screen.getByText('Download logs for run-1')).toBeInTheDocument()
   })
 
+  it('renders duplicate log entries without dropping repeated messages', async () => {
+    const duplicateTimestamp = '2026-05-30T09:22:19.484Z'
+    const duplicateMessage =
+      'Scenario completed: [Demo Run With Template] Demo run using a template test case - unknown'
+    getTestRunLogsAction.mockResolvedValue({
+      status: 200,
+      data: [
+        {
+          type: 'status',
+          message: duplicateMessage,
+          timestamp: duplicateTimestamp,
+        },
+        {
+          type: 'status',
+          message: duplicateMessage,
+          timestamp: duplicateTimestamp,
+        },
+      ],
+    })
+
+    render(<LogViewer testRunId="run-duplicates" status={TestRunStatus.COMPLETED} />)
+
+    expect(await screen.findAllByText(duplicateMessage)).toHaveLength(2)
+  })
+
   it('streams live logs and dispatches the exit event when the run completes', async () => {
     const emittedEvents: Array<Event> = []
     const addEventListenerSpy = vi.spyOn(window, 'dispatchEvent')

package/templates/starter/src/components/test-run/log-viewer.tsx

@@ -110,9 +110,9 @@ export function LogViewer({ testRunId, status, className }: LogViewerProps) {
             {logs.length === 0 && connectionStatus !== 'connecting' && connectionStatus !== 'loading' ? (
               <div className="flex items-center justify-center py-8 text-muted-foreground">No logs available</div>
             ) : null}
-            {logs.map(log => (
+            {logs.map((log, index) => (
               <div
-                key={`${log.timestamp.toISOString()}-${log.type}-${log.message}`}
+                key={`${log.timestamp.toISOString()}-${log.type}-${log.message}-${index}`}
                 className={cn(
                   'mb-1 flex items-start gap-2 whitespace-pre-wrap break-words',
                   log.type === 'stderr' && 'text-red-400',

package/templates/starter/src/components/test-run/test-run-details-guards.ts

@@ -44,7 +44,16 @@ function isTestRunDetailsTestCase(value: unknown): value is TestRunDetailsTestCa
 
 function hasTestRunScalarFields(value: UnknownRecord) {
   return (
-    hasFields(value, ['id', 'runId', 'status', 'result', 'startedAt', 'completedAt', 'browserEngine', 'testWorkersCount']) &&
+    hasFields(value, [
+      'id',
+      'runId',
+      'status',
+      'result',
+      'startedAt',
+      'completedAt',
+      'browserEngine',
+      'testWorkersCount',
+    ]) &&
     value.startedAt instanceof Date &&
     (value.completedAt instanceof Date || value.completedAt === null)
   )

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

@@ -2,30 +2,20 @@
 
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {
-  TestRunResult,
-  TestRunStatus,
-  TestRunTestCaseResult,
-  TestRunTestCaseStatus,
-} from '@prisma/client'
+import { TestRunResult, TestRunStatus, TestRunTestCaseResult, TestRunTestCaseStatus } from '@prisma/client'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { TestRunDetails } from './test-run-details'
 import type { TestRunDetailsData } from './test-run-details-helpers'
 
-const {
-  getTestRunByIdAction,
-  spawnTraceViewerAction,
-  checkTraceViewerStatusAction,
-  cancelTestRunAction,
-  toast,
-} = vi.hoisted(() => ({
-  getTestRunByIdAction: vi.fn(),
-  spawnTraceViewerAction: vi.fn(),
-  checkTraceViewerStatusAction: vi.fn(),
-  cancelTestRunAction: vi.fn(),
-  toast: vi.fn(),
-}))
+const { getTestRunByIdAction, spawnTraceViewerAction, checkTraceViewerStatusAction, cancelTestRunAction, toast } =
+  vi.hoisted(() => ({
+    getTestRunByIdAction: vi.fn(),
+    spawnTraceViewerAction: vi.fn(),
+    checkTraceViewerStatusAction: vi.fn(),
+    cancelTestRunAction: vi.fn(),
+    toast: vi.fn(),
+  }))
 
 vi.mock('@/actions/test-run/test-run-actions', () => ({
   getTestRunByIdAction,

package/templates/starter/src/components/test-run/use-log-viewer.ts

@@ -128,10 +128,7 @@ export function useLogViewer({ testRunId, status }: UseLogViewerParams) {
           console.log('[LogViewer] Received log event:', data)
         }
 
-        setLogs(currentLogs => [
-          ...currentLogs,
-          createLogMessage(data.type || 'stdout', data.message || ''),
-        ])
+        setLogs(currentLogs => [...currentLogs, createLogMessage(data.type || 'stdout', data.message || '')])
       } catch (error) {
         console.error('[LogViewer] Error parsing log event:', error, 'event.data:', event.data)
       }
@@ -147,10 +144,7 @@ export function useLogViewer({ testRunId, status }: UseLogViewerParams) {
         }
 
         const data = JSON.parse(event.data)
-        setLogs(currentLogs => [
-          ...currentLogs,
-          createLogMessage('status', `Process exited with code ${data.code}`),
-        ])
+        setLogs(currentLogs => [...currentLogs, createLogMessage('status', `Process exited with code ${data.code}`)])
       } catch (error) {
         console.error('[LogViewer] Error parsing exit event:', error, 'event.data:', event.data)
       } finally {

package/templates/starter/src/components/test-run/use-test-run-header.ts

@@ -4,10 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
 
-import {
-  getTestRunDetailsData,
-  type TestRunDetailsData,
-} from './test-run-details-helpers'
+import { getTestRunDetailsData, type TestRunDetailsData } from './test-run-details-helpers'
 import {
   getTestRunHeaderPollMode,
   matchesTestRunExitEvent,

package/templates/starter/src/components/test-suite/test-suite-picker.tsx

@@ -232,4 +232,4 @@ function TestSuitePicker({
   )
 }
 
-export default TestSuitePicker
+export default TestSuitePicker

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

@@ -9,7 +9,13 @@ type ThemeProviderProps = {
 
 export function ThemeProvider({ children }: ThemeProviderProps) {
   return (
-    <NextThemesProvider attribute="class" defaultTheme="dark" forcedTheme="dark" enableSystem={false} disableTransitionOnChange>
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="dark"
+      forcedTheme="dark"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
       {children}
     </NextThemesProvider>
   )

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

@@ -1,7 +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
+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/starter/src/components/typography/page-header.tsx

@@ -1,7 +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
+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/starter/src/components/ui/chart.tsx

@@ -166,10 +166,7 @@ function ChartTooltipContentActive({
   ref,
 }: ChartTooltipContentProps) {
   const { config } = useChart()
-  const resolvedPayload = React.useMemo(
-    () => (payload?.length ? payload : EMPTY_CHART_TOOLTIP_PAYLOAD),
-    [payload],
-  )
+  const resolvedPayload = React.useMemo(() => (payload?.length ? payload : EMPTY_CHART_TOOLTIP_PAYLOAD), [payload])
 
   if (!resolvedPayload.length) {
     return null
@@ -239,10 +236,7 @@ function ChartTooltipContentActive({
                     )
                   )}
                   <div
-                    className={cn(
-                      'flex flex-1 justify-between leading-none',
-                      nestLabel ? 'items-end' : 'items-center',
-                    )}
+                    className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}
                   >
                     <div className="grid gap-1.5">
                       {nestLabel ? (

package/templates/starter/src/components/ui/command.tsx

@@ -56,10 +56,7 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
 
 function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
-    <CommandPrimitive.List
-      className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-      {...props}
-    />
+    <CommandPrimitive.List className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)} {...props} />
   )
 }
 
@@ -89,7 +86,7 @@ function CommandItem({ className, ...props }: React.ComponentProps<typeof Comman
   return (
     <CommandPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-muted-foreground data-[disabled=true]:opacity-50 dark:data-[selected=true]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-popover-foreground outline-none hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
         className,
       )}
       {...props}

package/templates/starter/src/components/ui/data-table-column-header.tsx

@@ -42,16 +42,16 @@ export function DataTableColumnHeader<TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUp className="size-3.5 text-muted-foreground/70" />
+            <ArrowUp className="text-muted-foreground/70 size-3.5" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDown className="size-3.5 text-muted-foreground/70" />
+            <ArrowDown className="text-muted-foreground/70 size-3.5" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeOff className="size-3.5 text-muted-foreground/70" />
+            <EyeOff className="text-muted-foreground/70 size-3.5" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>

package/templates/starter/src/components/ui/data-table.test.tsx

@@ -15,14 +15,7 @@ const { toast } = vi.hoisted(() => ({
 }))
 
 vi.mock('next/link', () => ({
-  default: ({
-    href,
-    children,
-    ...props
-  }: {
-    href: string
-    children: ReactNode
-  }) => (
+  default: ({ href, children, ...props }: { href: string; children: ReactNode }) => (
     <a href={href} {...props}>
       {children}
     </a>

package/templates/starter/src/components/ui/dialog.tsx

@@ -61,10 +61,7 @@ DialogFooter.displayName = 'DialogFooter'
 
 function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
-    <DialogPrimitive.Title
-      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
+    <DialogPrimitive.Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
   )
 }
 

package/templates/starter/src/components/ui/select.tsx

@@ -105,12 +105,12 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
   return (
     <SelectPrimitive.Item
       className={cn(
-        'focus:text-accent-foreground/5 relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm text-popover-foreground outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
         className,
       )}
       {...props}
     >
-      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <Check className="size-4" />
         </SelectPrimitive.ItemIndicator>

package/templates/starter/src/components/ui/separator.tsx

@@ -15,7 +15,11 @@ function Separator({
     <SeparatorPrimitive.Root
       decorative={decorative}
       orientation={orientation}
-      className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
+      )}
       {...props}
     />
   )

package/templates/starter/src/components/ui/skeleton.tsx

@@ -1,7 +1,7 @@
-import { cn } from '@/lib/utils'
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
-}
-
-export { Skeleton }
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}
+
+export { Skeleton }

package/templates/starter/src/components/ui/table.tsx

@@ -21,7 +21,7 @@ function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
 function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   return (
     <tr
-      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      className={cn('hover:bg-muted/50 border-b transition-colors data-[state=selected]:bg-muted', className)}
       {...props}
     />
   )

package/templates/starter/src/components/ui/toaster.tsx

@@ -1,26 +1,26 @@
-'use client'
-
-import { useToast } from '@/hooks/use-toast'
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/toast'
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
+'use client'
+
+import { useToast } from '@/hooks/use-toast'
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

package/templates/starter/src/components/ui/tooltip.tsx

@@ -21,7 +21,7 @@ function TooltipContent({
       <TooltipPrimitive.Content
         sideOffset={sideOffset}
         className={cn(
-          'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
+          'z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           className,
         )}
         {...props}

package/templates/starter/src/constants/form-opts/locator-group-form-opts.ts

@@ -4,7 +4,7 @@ export const locatorGroupSchema = z.object({
   name: z.string().min(1, { message: 'Name is required' }),
   moduleId: z.string().min(1, { message: 'Module is required' }),
   locators: z.array(z.string()).optional(),
-  route: z.string().optional(),
+  route: z.string().trim().min(1, { message: 'Route is required' }),
 })
 
 export type LocatorGroup = z.infer<typeof locatorGroupSchema>

package/templates/starter/src/lib/locator-group-file-utils.ts

@@ -144,7 +144,11 @@ async function cleanupEmptyDirectories(filePath: string): Promise<void> {
   let currentDir = path.dirname(filePath)
   const locatorsRoot = getAutomationLocatorsDir()
 
-  while (currentDir.startsWith(locatorsRoot) && currentDir !== locatorsRoot && currentDir !== path.dirname(currentDir)) {
+  while (
+    currentDir.startsWith(locatorsRoot) &&
+    currentDir !== locatorsRoot &&
+    currentDir !== path.dirname(currentDir)
+  ) {
     try {
       const files = await fs.readdir(currentDir)
       if (files.length === 0) {