create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -7,6 +7,7 @@ import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
 import { IconToKeyTransformer } from '@/lib/transformers/key-to-icon-transformer'
 import type { ActionResponse } from '@/types/form/actionHandler'
 import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import { formatOrderedGherkinSteps } from '@/lib/gherkin-step-format'
 
 type ScenarioNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
 type ScenarioNode = ScenarioNodeOrder[string]
@@ -23,8 +24,12 @@ export const testCaseQuickTips = [
     description: 'Use clear, specific terms that indicate the purpose of the test scenario',
   },
   {
-    title: 'Build your test scenario step by step',
-    description: 'Build your test scenario step by step visually to help others understand the flow of the test scenario',
+    title: 'Assign your test scenario to a test suite',
+    description: 'Organize your test scenarios into test suites for better management and categorization',
+  },
+  {
+    title: 'Add tags to your test scenario',
+    description: 'Tags help filter and categorize your test scenarios for better organization and searchability',
   },
 ] as const
 
@@ -38,7 +43,8 @@ function normalizeStepParameters(parameters: ScenarioNode['parameters']) {
 }
 
 export function buildScenarioSteps(nodeOrder: ScenarioNodeOrder) {
-  return Object.entries(nodeOrder).map(([, value]) => ({
+  return Object.entries(nodeOrder).map(([nodeId, value]) => ({
+    nodeId: value.nodeId ?? nodeId,
     gherkinStep: value.gherkinStep || '',
     label: value.label,
     icon: IconToKeyTransformer(value.icon),
@@ -62,47 +68,7 @@ export function buildScenarioPreview(
     .filter(step => step.order !== -1)
     .sort((left, right) => left.order - right.order)
 
-  let hasThenInPrevious = false
-  let hasWhenInPrevious = false
-
-  const gherkinSteps = validSteps.map((step, index) => {
-    const gherkinStep = step.gherkinStep?.trim() || ''
-    const firstWord = gherkinStep.split(' ')[0].toLowerCase()
-    const hasGherkinKeyword = ['given', 'when', 'then', 'and', 'but'].includes(firstWord)
-    const stepWithoutKeyword = hasGherkinKeyword ? gherkinStep.split(' ').slice(1).join(' ') : gherkinStep
-
-    if (index === 0) {
-      return `Given ${stepWithoutKeyword}`
-    }
-
-    const isThenStatement =
-      firstWord === 'then' ||
-      stepWithoutKeyword.toLowerCase().startsWith('should') ||
-      stepWithoutKeyword.toLowerCase().startsWith('must') ||
-      stepWithoutKeyword.toLowerCase().startsWith('will')
-
-    if (!hasThenInPrevious) {
-      if (isThenStatement) {
-        hasThenInPrevious = true
-        return `Then ${stepWithoutKeyword}`
-      }
-
-      if (!hasWhenInPrevious) {
-        hasWhenInPrevious = true
-        return `When ${stepWithoutKeyword}`
-      }
-
-      return `And ${stepWithoutKeyword}`
-    }
-
-    if (isThenStatement) {
-      return `And ${stepWithoutKeyword}`
-    }
-
-    hasThenInPrevious = false
-    hasWhenInPrevious = false
-    return `When ${stepWithoutKeyword}`
-  })
+  const gherkinSteps = formatOrderedGherkinSteps(validSteps, { resetWhenAfterThen: true })
 
   return [scenarioHeader, ...gherkinSteps].join('\n')
 }
@@ -135,6 +101,35 @@ export function getNodesWithMissingMandatoryParams(
   return nodesWithMissingParams
 }
 
-export function getActionErrorMessage(response: ActionResponse) {
+function getActionErrorMessage(response: ActionResponse) {
   return response.error || 'An error occurred'
 }
+
+export function handleTestCaseSaveResponse({
+  response,
+  redirectPath,
+  push,
+  toast,
+}: {
+  response: ActionResponse
+  redirectPath: string
+  push: (path: string) => void
+  toast: (props: { title: string; description: string; variant: 'default' | 'destructive' }) => unknown
+}) {
+  if (response.status === 200) {
+    toast({
+      title: 'Success',
+      description: 'Test case saved successfully',
+      variant: 'default',
+    })
+    push(redirectPath)
+  }
+
+  if (response.status === 500) {
+    toast({
+      title: 'Error',
+      description: getActionErrorMessage(response),
+      variant: 'destructive',
+    })
+  }
+}

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

@@ -6,24 +6,27 @@ import { describe, expect, it, vi } from 'vitest'
 
 import TestCasePicker from './test-case-picker'
 
+const fixtureTimestamp = '2024-01-01T00:00:00.000Z'
+
 describe('TestCasePicker', () => {
   it('saves selected test cases from the dialog', async () => {
     const user = userEvent.setup()
     const onSave = vi.fn()
+    const testCases = [
+      {
+        id: 'case-1',
+        title: 'Login test',
+        description: 'Checks login',
+        tags: [{ id: 'tag-1', name: 'smoke' }],
+        steps: [],
+        createdAt: new Date(fixtureTimestamp),
+        updatedAt: new Date(fixtureTimestamp),
+      } as never,
+    ]
 
     render(
       <TestCasePicker
-        testCases={[
-          {
-            id: 'case-1',
-            title: 'Login test',
-            description: 'Checks login',
-            tags: [{ id: 'tag-1', name: 'smoke' }],
-            steps: [],
-            createdAt: new Date('2024-01-01T00:00:00.000Z'),
-            updatedAt: new Date('2024-01-01T00:00:00.000Z'),
-          } as never,
-        ]}
+        testCases={testCases}
         selectedIds={[]}
         onSave={onSave}
         triggerPlaceholder="Select test case(s)"

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,81 @@ 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.
+                </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>
-                  )}
-                </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>
+                ))
+              ) : (
+                <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 },
+    }),
+  )
+}