create-appraisejs 0.3.0 → 0.3.1-alpha.1

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

@@ -1,15 +1,6 @@
 'use client'
 
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
+import { PickerBrowseDialogFrame, PickerBrowseTriggerButton } from '@/components/ui/picker-browse-shell'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { DataTablePagination } from '@/components/ui/data-table-pagination'
@@ -28,8 +19,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { Search } from 'lucide-react'
-import { useState } from 'react'
+import { useReducer } from 'react'
 import { cn } from '@/lib/utils'
 import {
   createSelectionState,
@@ -39,6 +29,12 @@ import {
   testCaseMatchesQuery,
 } from './test-case-picker-helpers'
 
+type Updater<T> = T | ((prev: T) => T)
+
+function applyUpdater<T>(updater: Updater<T>, prev: T): T {
+  return typeof updater === 'function' ? (updater as (p: T) => T)(prev) : updater
+}
+
 type TestCasePickerProps = {
   testCases: TestCasePickerRow[]
   selectedIds: string[]
@@ -49,7 +45,69 @@ type TestCasePickerProps = {
   selectedLabel: string
 }
 
-export function TestCasePicker({
+const defaultPagination: PaginationState = {
+  pageIndex: 0,
+  pageSize: 10,
+}
+
+type PickerState = {
+  open: boolean
+  sorting: SortingState
+  columnFilters: ColumnFiltersState
+  globalFilter: string
+  rowSelection: RowSelectionState
+  pagination: PaginationState
+}
+
+type PickerAction =
+  | { type: 'openDialog'; selectedIds: string[] }
+  | { type: 'setOpen'; open: boolean }
+  | { type: 'setSorting'; updater: Updater<SortingState> }
+  | { type: 'setColumnFilters'; updater: Updater<ColumnFiltersState> }
+  | { type: 'setGlobalFilter'; updater: Updater<string> }
+  | { type: 'setPagination'; updater: Updater<PaginationState> }
+  | { type: 'setRowSelection'; updater: Updater<RowSelectionState> }
+
+function pickerReducer(state: PickerState, action: PickerAction): PickerState {
+  switch (action.type) {
+    case 'openDialog':
+      return {
+        ...state,
+        open: true,
+        rowSelection: createSelectionState(action.selectedIds),
+        columnFilters: [],
+        globalFilter: '',
+        pagination: { ...state.pagination, pageIndex: 0 },
+      }
+    case 'setOpen':
+      return { ...state, open: action.open }
+    case 'setSorting':
+      return { ...state, sorting: applyUpdater(action.updater, state.sorting) }
+    case 'setColumnFilters':
+      return { ...state, columnFilters: applyUpdater(action.updater, state.columnFilters) }
+    case 'setGlobalFilter':
+      return { ...state, globalFilter: applyUpdater(action.updater, state.globalFilter) }
+    case 'setPagination':
+      return { ...state, pagination: applyUpdater(action.updater, state.pagination) }
+    case 'setRowSelection':
+      return { ...state, rowSelection: applyUpdater(action.updater, state.rowSelection) }
+    default:
+      return state
+  }
+}
+
+function createInitialPickerState(selectedIds: string[]): PickerState {
+  return {
+    open: false,
+    sorting: [],
+    columnFilters: [],
+    globalFilter: '',
+    rowSelection: createSelectionState(selectedIds),
+    pagination: { ...defaultPagination },
+  }
+}
+
+function TestCasePicker({
   testCases,
   selectedIds,
   onSave,
@@ -58,25 +116,11 @@ export function TestCasePicker({
   dialogDescription,
   selectedLabel,
 }: TestCasePickerProps) {
-  const [open, setOpen] = useState(false)
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [globalFilter, setGlobalFilter] = useState('')
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>(() => createSelectionState(selectedIds))
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  })
+  const [state, dispatch] = useReducer(pickerReducer, selectedIds, createInitialPickerState)
+  const { open, sorting, columnFilters, globalFilter, rowSelection, pagination } = state
 
   const openDialog = () => {
-    setRowSelection(createSelectionState(selectedIds))
-    setColumnFilters([])
-    setGlobalFilter('')
-    setPagination(current => ({
-      ...current,
-      pageIndex: 0,
-    }))
-    setOpen(true)
+    dispatch({ type: 'openDialog', selectedIds })
   }
 
   // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
@@ -84,14 +128,14 @@ export function TestCasePicker({
     data: testCases,
     columns: testCasePickerColumns,
     getCoreRowModel: getCoreRowModel(),
-    onSortingChange: setSorting,
+    onSortingChange: updater => dispatch({ type: 'setSorting', updater }),
     getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onGlobalFilterChange: setGlobalFilter,
+    onColumnFiltersChange: updater => dispatch({ type: 'setColumnFilters', updater }),
+    onGlobalFilterChange: updater => dispatch({ type: 'setGlobalFilter', updater }),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
+    onPaginationChange: updater => dispatch({ type: 'setPagination', updater }),
+    onRowSelectionChange: updater => dispatch({ type: 'setRowSelection', updater }),
     enableRowSelection: true,
     getRowId: row => row.id,
     state: {
@@ -112,97 +156,77 @@ export function TestCasePicker({
     const nextSelectedIds = getSelectedIdsFromRowSelection(testCases, rowSelection)
 
     onSave(nextSelectedIds)
-    setOpen(false)
+    dispatch({ type: 'setOpen', open: false })
   }
 
   return (
     <div className="flex flex-col gap-3">
-      <Button type="button" variant="outline" className="justify-between" onClick={openDialog}>
-        <span className={selectedIds.length > 0 ? 'text-foreground' : 'text-muted-foreground'}>
-          {selectedIds.length > 0 ? `${selectedIds.length} ${selectionSummaryLabel.toLowerCase()} selected` : triggerPlaceholder}
-        </span>
-        <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Browse</span>
-      </Button>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-h-[90vh] max-w-6xl gap-0 overflow-hidden p-0">
-          <DialogHeader className="border-b px-6 py-4">
-            <DialogTitle>{dialogTitle}</DialogTitle>
-            <DialogDescription>{dialogDescription}</DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-col gap-4 px-6 py-4">
-            <div className="flex items-center gap-3">
-              <div className="relative flex-1">
-                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  value={globalFilter}
-                  onChange={event => table.setGlobalFilter(event.target.value)}
-                  placeholder="Search by title, description, or tag..."
-                  className="pl-9"
-                />
-              </div>
-              <div className="text-sm text-muted-foreground">{table.getSelectedRowModel().rows.length} selected</div>
-            </div>
-
-            <ScrollArea className="h-[420px] rounded-md border">
-              <Table>
-                <TableHeader className="sticky top-0 z-10 bg-background">
-                  {table.getHeaderGroups().map(headerGroup => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map(header => (
-                        <TableHead key={header.id}>
-                          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                        </TableHead>
-                      ))}
-                    </TableRow>
+      <PickerBrowseTriggerButton
+        selected={selectedIds.length > 0}
+        summaryWhenSelected={`${selectedIds.length} ${selectionSummaryLabel.toLowerCase()} selected`}
+        placeholder={triggerPlaceholder}
+        onClick={openDialog}
+      />
+
+      <PickerBrowseDialogFrame
+        open={open}
+        onOpenChange={nextOpen => dispatch({ type: 'setOpen', open: nextOpen })}
+        title={dialogTitle}
+        description={dialogDescription}
+        searchValue={globalFilter}
+        onSearchChange={value => table.setGlobalFilter(value)}
+        searchPlaceholder="Search by title, description, or tag..."
+        summaryAside={`${table.getSelectedRowModel().rows.length} selected`}
+        onCancel={() => dispatch({ type: 'setOpen', open: false })}
+        onSave={saveDraftSelection}
+      >
+        <ScrollArea className="h-[420px] rounded-md border">
+          <Table>
+            <TableHeader className="sticky top-0 z-10 bg-background">
+              {table.getHeaderGroups().map(headerGroup => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
                   ))}
-                </TableHeader>
-                <TableBody>
-                  {table.getRowModel().rows.length > 0 ? (
-                    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>
-                        ))}
-                      </TableRow>
-                    ))
-                  ) : (
-                    <TableRow>
-                      <TableCell colSpan={testCasePickerColumns.length} className="h-24 text-center">
-                        No test cases found.
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
-            </ScrollArea>
-
-            <DataTablePagination table={table} showSelectedRows={false} />
-          </div>
-
-          <DialogFooter className="border-t px-6 py-4">
-            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="button" onClick={saveDraftSelection}>
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows.length > 0 ? (
+                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>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={testCasePickerColumns.length} className="h-24 text-center">
+                    No test cases found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </ScrollArea>
+
+        <DataTablePagination table={table} showSelectedRows={false} />
+      </PickerBrowseDialogFrame>
 
       {savedTestCases.length > 0 && (
-        <div className="rounded-md border bg-muted/20">
+        <div className="bg-muted/20 rounded-md border">
           <div className="border-b px-4 py-3 text-sm font-medium">{selectedLabel}</div>
           <ScrollArea className={cn(shouldConstrainSavedListHeight && 'h-56')}>
             <div className="space-y-3 p-4">
               {savedTestCases.map(testCase => (
                 <div key={testCase.id} className="rounded-md border bg-background p-3">
                   <div className="mb-1 text-sm font-semibold">{testCase.title}</div>
-                  <p className="text-xs text-muted-foreground">{testCase.description?.trim() || 'No description provided.'}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {testCase.description?.trim() || 'No description provided.'}
+                  </p>
                   <div className="mt-3 flex flex-wrap gap-2">
                     <Badge variant="secondary">{testCase.steps.length} steps</Badge>
                     {testCase.tags.slice(0, 3).map(tag => (

package/templates/starter/src/components/test-case/test-scenario-preview.tsx

@@ -1,10 +1,15 @@
 'use client'
 
+import { useEffect, useRef, useState } from 'react'
 import CodeMirror, { EditorView } from '@uiw/react-codemirror'
 import { langs } from '@uiw/codemirror-extensions-langs'
 import { githubDark } from '@uiw/codemirror-theme-github'
+import { Eye, EyeOff } from 'lucide-react'
 
+import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
 type TestScenarioPreviewProps = {
   title: string
@@ -13,22 +18,70 @@ type TestScenarioPreviewProps = {
 }
 
 export function TestScenarioPreview({ title, description, scenario }: TestScenarioPreviewProps) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    const onPointerDown = (e: PointerEvent) => {
+      const el = containerRef.current
+      if (el && !el.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open])
+
   return (
-    <Card className="border-gray-700 bg-gray-500/10">
-      <CardHeader>
-        <CardTitle className="text-xl font-bold text-primary">{title}</CardTitle>
-        {description ? <CardDescription>{description}</CardDescription> : null}
-      </CardHeader>
-      <CardContent>
-        <CodeMirror
-          editable={false}
-          value={scenario}
-          onChange={() => {}}
-          height="200px"
-          extensions={[langs.feature(), EditorView.lineWrapping]}
-          theme={githubDark}
-        />
-      </CardContent>
-    </Card>
+    <div ref={containerRef} className="relative min-h-0 xl:min-h-[1px]">
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              className={cn('fixed bottom-6 right-6 z-50 size-12 rounded-full shadow-lg')}
+              type="button"
+              variant="default"
+              size="icon"
+              aria-expanded={open}
+              aria-label={open ? 'Hide test scenario preview' : 'Show test scenario preview'}
+              onClick={() => setOpen(v => !v)}
+            >
+              {open ? <EyeOff /> : <Eye />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top" sideOffset={8}>
+            {open ? 'Close Scenario Preview' : 'Open Scenario Preview'}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {open ? (
+        <Card
+          className={cn(
+            'fixed bottom-20 right-6 z-50 max-h-[min(420px,70vh)] w-[min(28rem,calc(100vw-3rem))]',
+            'border-border/60 bg-background/70 shadow-xl shadow-black/25',
+            'backdrop-blur-3xl backdrop-saturate-150',
+            'flex min-h-0 flex-col overflow-hidden',
+          )}
+        >
+          <CardHeader className="shrink-0">
+            <CardTitle className="text-xl font-bold text-primary">{title}</CardTitle>
+            {description ? <CardDescription>{description}</CardDescription> : null}
+          </CardHeader>
+          <CardContent className="min-h-0 flex-1 overflow-auto">
+            <CodeMirror
+              editable={false}
+              value={scenario}
+              onChange={() => {}}
+              height="200px"
+              extensions={[langs.feature(), EditorView.lineWrapping]}
+              theme={githubDark}
+            />
+          </CardContent>
+        </Card>
+      ) : null}
+    </div>
   )
 }

package/templates/starter/src/components/test-run/download-logs-button.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Download, LoaderCircle } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
 import { toast } from '@/hooks/use-toast'
 
 interface DownloadLogsButtonProps {
@@ -24,7 +23,6 @@ export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonP
         throw new Error(errorData.error || `Failed to download: ${response.statusText}`)
       }
 
-      // Get the filename from Content-Disposition header or use a default
       const contentDisposition = response.headers.get('Content-Disposition')
       let filename = `test-run-${testRunId}.zip`
       if (contentDisposition) {
@@ -34,10 +32,8 @@ export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonP
         }
       }
 
-      // Create a blob from the response
       const blob = await response.blob()
 
-      // Create a download link and trigger it
       const url = window.URL.createObjectURL(blob)
       const a = document.createElement('a')
       a.href = url
@@ -65,28 +61,19 @@ export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonP
 
   return (
     <Button onClick={handleDownload} disabled={isDownloading} variant="outline" size="sm" className={className}>
-      <AnimatePresence mode="wait" initial={false}>
-        <motion.div
-          key={isDownloading ? 'downloading' : 'idle'}
-          initial={{ opacity: 0, y: 4 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -4 }}
-          transition={{ duration: 0.15 }}
-          className="flex items-center gap-2"
-        >
-          {isDownloading ? (
-            <>
-              <LoaderCircle className="h-4 w-4 animate-spin" />
-              Downloading...
-            </>
-          ) : (
-            <>
-              <Download className="h-4 w-4" />
-              Download Run Artifacts
-            </>
-          )}
-        </motion.div>
-      </AnimatePresence>
+      <span className="flex items-center gap-2">
+        {isDownloading ? (
+          <>
+            <LoaderCircle className="size-4 animate-spin" />
+            Downloading…
+          </>
+        ) : (
+          <>
+            <Download className="size-4" />
+            Download Run Artifacts
+          </>
+        )}
+      </span>
     </Button>
   )
 }

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

@@ -0,0 +1,7 @@
+export function dispatchTestRunExit(testRunId: string) {
+  window.dispatchEvent(
+    new CustomEvent('testrun:exit', {
+      detail: { testRunId },
+    }),
+  )
+}

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

@@ -1,80 +1,4 @@
-import { TestRunStatus } from '@prisma/client'
-
-export interface LogMessage {
-  type: 'stdout' | 'stderr' | 'status'
-  message: string
-  timestamp: Date
-}
-
-export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'completed' | 'loading'
-
-const fatalErrorPatterns = [
-  'Test run not found',
-  'Test run has completed',
-  'Internal server error',
-  'Test run process not found',
-] as const
-
-function isLogMessage(value: unknown): value is LogMessage {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'type' in value &&
-    (value.type === 'stdout' || value.type === 'stderr' || value.type === 'status') &&
-    'message' in value &&
-    typeof value.message === 'string' &&
-    'timestamp' in value
-  )
-}
-
-export function isTerminalRunStatus(status?: TestRunStatus) {
-  return status === TestRunStatus.COMPLETED || status === TestRunStatus.CANCELLED
-}
-
-export function parseLogMessages(data: unknown): LogMessage[] {
-  if (!Array.isArray(data)) {
-    return []
-  }
-
-  return data.filter(isLogMessage).map(log => ({
-    ...log,
-    timestamp: log.timestamp instanceof Date ? log.timestamp : new Date(log.timestamp),
-  }))
-}
-
-export function createLogMessage(
-  type: LogMessage['type'],
-  message: string,
-  timestamp = new Date(),
-): LogMessage {
-  return { type, message, timestamp }
-}
-
-export function isFatalLogStreamError(message: string) {
-  return fatalErrorPatterns.some(pattern => message.toLowerCase().includes(pattern.toLowerCase()))
-}
-
-export function getConnectionStatusText(connectionStatus: ConnectionStatus) {
-  switch (connectionStatus) {
-    case 'connecting':
-      return 'Connecting...'
-    case 'connected':
-      return 'Connected'
-    case 'disconnected':
-      return 'Disconnected'
-    case 'error':
-      return 'Error'
-    case 'completed':
-      return 'Completed'
-    case 'loading':
-      return 'Loading...'
-  }
-}
-
-export function dispatchTestRunExit(testRunId: string) {
-  window.dispatchEvent(
-    new CustomEvent('testrun:exit', {
-      detail: { testRunId },
-    }),
-  )
-}
+export { dispatchTestRunExit } from './log-viewer-events'
+export { createLogMessage, parseLogMessages } from './log-viewer-parsing'
+export { getConnectionStatusText, isFatalLogStreamError, isTerminalRunStatus } from './log-viewer-status'
+export type { ConnectionStatus, LogMessage } from './log-viewer-types'

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

@@ -0,0 +1,28 @@
+import type { LogMessage } from './log-viewer-types'
+
+function isLogMessage(value: unknown): value is LogMessage {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    (value.type === 'stdout' || value.type === 'stderr' || value.type === 'status') &&
+    'message' in value &&
+    typeof value.message === 'string' &&
+    'timestamp' in value
+  )
+}
+
+export function parseLogMessages(data: unknown): LogMessage[] {
+  if (!Array.isArray(data)) {
+    return []
+  }
+
+  return data.filter(isLogMessage).map(log => ({
+    ...log,
+    timestamp: log.timestamp instanceof Date ? log.timestamp : new Date(log.timestamp),
+  }))
+}
+
+export function createLogMessage(type: LogMessage['type'], message: string, timestamp = new Date()): LogMessage {
+  return { type, message, timestamp }
+}

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

@@ -0,0 +1,35 @@
+import { TestRunStatus } from '@prisma/client'
+
+import type { ConnectionStatus } from './log-viewer-types'
+
+const fatalErrorPatterns = [
+  'Test run not found',
+  'Test run has completed',
+  'Internal server error',
+  'Test run process not found',
+] as const
+
+export function isTerminalRunStatus(status?: TestRunStatus) {
+  return status === TestRunStatus.COMPLETED || status === TestRunStatus.CANCELLED
+}
+
+export function isFatalLogStreamError(message: string) {
+  return fatalErrorPatterns.some(pattern => message.toLowerCase().includes(pattern.toLowerCase()))
+}
+
+export function getConnectionStatusText(connectionStatus: ConnectionStatus) {
+  switch (connectionStatus) {
+    case 'connecting':
+      return 'Connecting...'
+    case 'connected':
+      return 'Connected'
+    case 'disconnected':
+      return 'Disconnected'
+    case 'error':
+      return 'Error'
+    case 'completed':
+      return 'Completed'
+    case 'loading':
+      return 'Loading...'
+  }
+}

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

@@ -0,0 +1,7 @@
+export interface LogMessage {
+  type: 'stdout' | 'stderr' | 'status'
+  message: string
+  timestamp: Date
+}
+
+export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'completed' | 'loading'