create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/app/api/test-runs/[runId]/download/route.ts

@@ -8,13 +8,14 @@ import { getAutomationReportRunDir, resolveStoredPath } from '@/lib/automation/a
 // Ensure this route runs in Node.js runtime (not Edge) for file system access
 export const runtime = 'nodejs'
 
-async function collectRunArtifactFiles(
-  dir: string,
-  baseDir = dir,
-): Promise<Array<{ absolutePath: string; archivePath: string }>> {
+type Archive = ReturnType<typeof archiver>
+type ArtifactFile = { absolutePath: string; archivePath: string }
+type DownloadTestRun = NonNullable<Awaited<ReturnType<typeof getDownloadTestRun>>>
+
+async function collectRunArtifactFiles(dir: string, baseDir = dir): Promise<ArtifactFile[]> {
   try {
     const entries = await fs.readdir(dir, { withFileTypes: true })
-    const files: Array<{ absolutePath: string; archivePath: string }> = []
+    const files: ArtifactFile[] = []
 
     for (const entry of entries) {
       const absolutePath = path.join(dir, entry.name)
@@ -36,7 +37,7 @@ async function collectRunArtifactFiles(
 }
 
 async function addStoredArtifactFile(
-  archive: ReturnType<typeof archiver>,
+  archive: Archive,
   storedPath: string,
   archivePath: string,
   warningLabel: string,
@@ -57,6 +58,154 @@ function isPathWithinDirectory(targetPath: string, directoryPath: string): boole
   return relativePath !== '' && !relativePath.startsWith('..') && !path.isAbsolute(relativePath)
 }
 
+async function getDownloadTestRun(runId: string) {
+  return prisma.testRun.findUnique({
+    where: { runId },
+    select: {
+      logPath: true,
+      reportPath: true,
+      testCases: {
+        select: {
+          tracePath: true,
+        },
+      },
+    },
+  })
+}
+
+function createZipArchive() {
+  return archiver('zip', {
+    zlib: { level: 9 }, // Maximum compression
+  })
+}
+
+function addRunArtifactFiles(archive: Archive, runArtifactFiles: ArtifactFile[]) {
+  for (const artifactFile of runArtifactFiles) {
+    archive.file(artifactFile.absolutePath, { name: artifactFile.archivePath })
+  }
+
+  return new Set<string>(runArtifactFiles.map(artifactFile => artifactFile.archivePath))
+}
+
+async function addLegacyReportFile(
+  archive: Archive,
+  testRun: DownloadTestRun,
+  runArtifactDir: string,
+  archivedPaths: Set<string>,
+) {
+  if (!testRun.reportPath) {
+    return false
+  }
+
+  const resolvedReportPath = resolveStoredPath(testRun.reportPath)
+  if (isPathWithinDirectory(resolvedReportPath, runArtifactDir) || archivedPaths.has('cucumber.json')) {
+    return false
+  }
+
+  const didAddReportFile = await addStoredArtifactFile(archive, testRun.reportPath, 'cucumber.json', 'Report file')
+  if (didAddReportFile) {
+    archivedPaths.add('cucumber.json')
+  }
+
+  return didAddReportFile
+}
+
+async function addLegacyLogFile(
+  archive: Archive,
+  testRun: DownloadTestRun,
+  runArtifactDir: string,
+  archivedPaths: Set<string>,
+) {
+  if (!testRun.logPath) {
+    return false
+  }
+
+  const resolvedLogPath = resolveStoredPath(testRun.logPath)
+  const archivePath = `logs/${path.basename(testRun.logPath)}`
+  if (isPathWithinDirectory(resolvedLogPath, runArtifactDir) || archivedPaths.has(archivePath)) {
+    return false
+  }
+
+  const didAddLogFile = await addStoredArtifactFile(archive, testRun.logPath, archivePath, 'Log file')
+  if (didAddLogFile) {
+    archivedPaths.add(archivePath)
+  }
+
+  return didAddLogFile
+}
+
+async function addLegacyTraceFiles(
+  archive: Archive,
+  testRun: DownloadTestRun,
+  runArtifactDir: string,
+  archivedPaths: Set<string>,
+) {
+  let didAddAnyTraceFile = false
+  const traceFiles = testRun.testCases.flatMap(({ tracePath }) => (tracePath ? [tracePath] : []))
+
+  for (const tracePath of traceFiles) {
+    const resolvedTracePath = resolveStoredPath(tracePath)
+    const archivePath = `traces/${path.basename(tracePath)}`
+
+    if (isPathWithinDirectory(resolvedTracePath, runArtifactDir) || archivedPaths.has(archivePath)) {
+      continue
+    }
+
+    const didAddTraceFile = await addStoredArtifactFile(archive, tracePath, archivePath, 'Trace file')
+    didAddAnyTraceFile = didAddTraceFile || didAddAnyTraceFile
+    if (didAddTraceFile) {
+      archivedPaths.add(archivePath)
+    }
+  }
+
+  return didAddAnyTraceFile
+}
+
+async function addDownloadArtifacts(archive: Archive, testRun: DownloadTestRun, runArtifactDir: string) {
+  const runArtifactFiles = await collectRunArtifactFiles(runArtifactDir)
+  const archivedPaths = addRunArtifactFiles(archive, runArtifactFiles)
+  const didAddReportFile = await addLegacyReportFile(archive, testRun, runArtifactDir, archivedPaths)
+  const didAddLogFile = await addLegacyLogFile(archive, testRun, runArtifactDir, archivedPaths)
+  const didAddTraceFile = await addLegacyTraceFiles(archive, testRun, runArtifactDir, archivedPaths)
+
+  return runArtifactFiles.length > 0 || didAddReportFile || didAddLogFile || didAddTraceFile
+}
+
+function finalizeArchive(archive: Archive) {
+  const chunks: Buffer[] = []
+
+  const archivePromise = new Promise<Buffer>((resolve, reject) => {
+    archive.on('data', (chunk: Buffer) => {
+      chunks.push(chunk)
+    })
+
+    archive.on('end', () => {
+      resolve(Buffer.concat(chunks))
+    })
+
+    archive.on('error', err => {
+      reject(err)
+    })
+  })
+
+  archive.finalize()
+  return archivePromise
+}
+
+function createZipDownloadResponse(zipBuffer: Buffer, runId: string) {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
+  const filename = `test-run-${runId}-${timestamp}.zip`
+
+  return new NextResponse(new Uint8Array(zipBuffer), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/zip',
+      'Content-Disposition': `attachment; filename="${filename}"`,
+      'Content-Length': zipBuffer.length.toString(),
+    },
+  })
+}
+
 /**
  * GET handler for downloading a test run's stored artifacts as a zip file
  *
@@ -72,117 +221,22 @@ export async function GET(_request: NextRequest, { params }: { params: Promise<{
   const runArtifactDir = getAutomationReportRunDir(runId)
 
   try {
-    // Verify test run exists
-    const testRun = await prisma.testRun.findUnique({
-      where: { runId },
-      select: {
-        logPath: true,
-        reportPath: true,
-        testCases: {
-          select: {
-            tracePath: true,
-          },
-        },
-      },
-    })
+    const testRun = await getDownloadTestRun(runId)
 
     if (!testRun) {
       return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
     }
 
-    // Create a zip archive
-    const archive = archiver('zip', {
-      zlib: { level: 9 }, // Maximum compression
-    })
-
-    const runArtifactFiles = await collectRunArtifactFiles(runArtifactDir)
-    let hasFiles = runArtifactFiles.length > 0
-    const archivedPaths = new Set<string>(runArtifactFiles.map(artifactFile => artifactFile.archivePath))
-
-    for (const artifactFile of runArtifactFiles) {
-      archive.file(artifactFile.absolutePath, { name: artifactFile.archivePath })
-    }
-
-    if (testRun.reportPath) {
-      const resolvedReportPath = resolveStoredPath(testRun.reportPath)
-      if (!isPathWithinDirectory(resolvedReportPath, runArtifactDir) && !archivedPaths.has('cucumber.json')) {
-        const didAddReportFile = await addStoredArtifactFile(archive, testRun.reportPath, 'cucumber.json', 'Report file')
-        hasFiles = didAddReportFile || hasFiles
-        if (didAddReportFile) {
-          archivedPaths.add('cucumber.json')
-        }
-      }
-    }
-
-    if (testRun.logPath) {
-      const resolvedLogPath = resolveStoredPath(testRun.logPath)
-      const archivePath = `logs/${path.basename(testRun.logPath)}`
-      if (!isPathWithinDirectory(resolvedLogPath, runArtifactDir) && !archivedPaths.has(archivePath)) {
-        const didAddLogFile = await addStoredArtifactFile(archive, testRun.logPath, archivePath, 'Log file')
-        hasFiles = didAddLogFile || hasFiles
-        if (didAddLogFile) {
-          archivedPaths.add(archivePath)
-        }
-      }
-    }
-
-    const traceFiles = testRun.testCases.flatMap(({ tracePath }) => (tracePath ? [tracePath] : []))
-    for (const tracePath of traceFiles) {
-      const resolvedTracePath = resolveStoredPath(tracePath)
-      const archivePath = `traces/${path.basename(tracePath)}`
-
-      if (!isPathWithinDirectory(resolvedTracePath, runArtifactDir) && !archivedPaths.has(archivePath)) {
-        const didAddTraceFile = await addStoredArtifactFile(archive, tracePath, archivePath, 'Trace file')
-        hasFiles = didAddTraceFile || hasFiles
-        if (didAddTraceFile) {
-          archivedPaths.add(archivePath)
-        }
-      }
-    }
+    const archive = createZipArchive()
+    const hasFiles = await addDownloadArtifacts(archive, testRun, runArtifactDir)
 
     // If no files to add, return an error
     if (!hasFiles) {
       return NextResponse.json({ error: 'No run artifacts available for this test run' }, { status: 404 })
     }
 
-    // Create a readable stream to collect the archive data
-    const chunks: Buffer[] = []
-
-    // Set up event handlers before finalizing
-    const archivePromise = new Promise<Buffer>((resolve, reject) => {
-      archive.on('data', (chunk: Buffer) => {
-        chunks.push(chunk)
-      })
-
-      archive.on('end', () => {
-        const zipBuffer = Buffer.concat(chunks)
-        resolve(zipBuffer)
-      })
-
-      archive.on('error', err => {
-        reject(err)
-      })
-    })
-
-    // Finalize the archive
-    archive.finalize()
-
-    // Wait for the archive to complete
-    const zipBuffer = await archivePromise
-
-    // Generate filename with timestamp
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
-    const filename = `test-run-${runId}-${timestamp}.zip`
-
-    // Return the zip file as a downloadable response (Uint8Array for BodyInit)
-    return new NextResponse(new Uint8Array(zipBuffer), {
-      status: 200,
-      headers: {
-        'Content-Type': 'application/zip',
-        'Content-Disposition': `attachment; filename="${filename}"`,
-        'Content-Length': zipBuffer.length.toString(),
-      },
-    })
+    const zipBuffer = await finalizeArchive(archive)
+    return createZipDownloadResponse(zipBuffer, runId)
   } catch (error) {
     console.error(`[Download] Error creating zip file for testRunId: ${runId}:`, error)
     return NextResponse.json(

package/templates/starter/src/app/api/test-runs/[runId]/trace/[testCaseId]/route.test.ts

@@ -86,9 +86,12 @@ describe('trace route', () => {
       testCases: [{ id: 'trtc-1', tracePath: null }],
     })
 
-    const response = await POST(new NextRequest('http://localhost/api/test-runs/run-1/trace/trtc-1', { method: 'POST' }), {
-      params: Promise.resolve({ runId: 'run-1', testCaseId: 'trtc-1' }),
-    })
+    const response = await POST(
+      new NextRequest('http://localhost/api/test-runs/run-1/trace/trtc-1', { method: 'POST' }),
+      {
+        params: Promise.resolve({ runId: 'run-1', testCaseId: 'trtc-1' }),
+      },
+    )
 
     expect(response.status).toBe(400)
     await expect(response.json()).resolves.toEqual({ error: 'No trace path available for this test case' })
@@ -100,9 +103,12 @@ describe('trace route', () => {
     })
     mockAccess.mockRejectedValue(new Error('missing'))
 
-    const response = await POST(new NextRequest('http://localhost/api/test-runs/run-1/trace/trtc-1', { method: 'POST' }), {
-      params: Promise.resolve({ runId: 'run-1', testCaseId: 'trtc-1' }),
-    })
+    const response = await POST(
+      new NextRequest('http://localhost/api/test-runs/run-1/trace/trtc-1', { method: 'POST' }),
+      {
+        params: Promise.resolve({ runId: 'run-1', testCaseId: 'trtc-1' }),
+      },
+    )
 
     expect(response.status).toBe(404)
     await expect(response.json()).resolves.toEqual({ error: 'Trace file not found at path: trace.zip' })
@@ -115,9 +121,12 @@ describe('trace route', () => {
     mockAccess.mockResolvedValue(undefined)
     mockSpawn.mockResolvedValue({ name: 'trace-viewer-trtc-1' })
 
-    const response = await POST(new NextRequest('http://localhost/api/test-runs/run-1/trace/trtc-1', { method: 'POST' }), {
-      params: Promise.resolve({ runId: 'run-1', testCaseId: 'trtc-1' }),
-    })
+    const response = await POST(
+      new NextRequest('http://localhost/api/test-runs/run-1/trace/trtc-1', { method: 'POST' }),
+      {
+        params: Promise.resolve({ runId: 'run-1', testCaseId: 'trtc-1' }),
+      },
+    )
 
     expect(mockSpawn).toHaveBeenCalledWith('npx', ['playwright', 'show-trace', '/resolved/trace.zip'], {
       streamLogs: true,

package/templates/starter/src/app/globals.css

@@ -88,3 +88,14 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/templates/starter/src/app/layout.tsx

@@ -98,34 +98,34 @@ export default function RootLayout({
                     <Logo />
                   </Link>
                 </div>
-                <NavLink href="/" icon={<LayoutDashboard className="h-5 w-5 text-primary" />}>
+                <NavLink href="/" icon={<LayoutDashboard className="size-5 text-primary" />}>
                   Dashboard
                 </NavLink>
                 <NavMenuCardDeck
                   containerButtonText="Automate"
-                  containerButtonIcon={<Bot className="h-5 w-5 text-primary" />}
+                  containerButtonIcon={<Bot className="size-5 text-primary" />}
                   dropdownItems={[
                     {
                       text: 'Test Suites',
-                      icon: <TestTubes className="h-6 w-6 text-primary" />,
+                      icon: <TestTubes className="size-6 text-primary" />,
                       href: '/test-suites',
                       description: 'Group tests into logical units',
                     },
                     {
                       text: 'Test Cases',
-                      icon: <TestTubeDiagonal className="h-6 w-6 text-primary" />,
+                      icon: <TestTubeDiagonal className="size-6 text-primary" />,
                       href: '/test-cases',
                       description: 'Define test scenarios',
                     },
                     {
                       text: 'Test Runs',
-                      icon: <ListChecks className="h-6 w-6 text-primary" />,
+                      icon: <ListChecks className="size-6 text-primary" />,
                       href: '/test-runs',
                       description: 'Execute test scenarios',
                     },
                     {
                       text: 'Reports',
-                      icon: <FileCheck className="h-6 w-6 text-primary" />,
+                      icon: <FileCheck className="size-6 text-primary" />,
                       href: '/reports',
                       description: 'Analyze test results',
                     },
@@ -133,23 +133,23 @@ export default function RootLayout({
                 />
                 <NavMenuCardDeck
                   containerButtonText="Template"
-                  containerButtonIcon={<BrickWall className="h-5 w-5 text-primary" />}
+                  containerButtonIcon={<BrickWall className="size-5 text-primary" />}
                   dropdownItems={[
                     {
                       text: 'Template Steps',
-                      icon: <LayoutTemplate className="h-6 w-6 text-primary" />,
+                      icon: <LayoutTemplate className="size-6 text-primary" />,
                       href: '/template-steps',
                       description: 'Define reusable test steps',
                     },
                     {
                       text: 'Template Step Groups',
-                      icon: <Component className="h-6 w-6 text-primary" />,
+                      icon: <Component className="size-6 text-primary" />,
                       href: '/template-step-groups',
                       description: 'Organize template steps into logical groups',
                     },
                     {
                       text: 'Template Test Cases',
-                      icon: <Blocks className="h-6 w-6 text-primary" />,
+                      icon: <Blocks className="size-6 text-primary" />,
                       href: '/template-test-cases',
                       description: 'Define reusable test scenario templates',
                     },
@@ -157,41 +157,41 @@ export default function RootLayout({
                 />
                 <NavMenuCardDeck
                   containerButtonText="Configuration"
-                  containerButtonIcon={<FileSliders className="h-5 w-5 text-primary" />}
+                  containerButtonIcon={<FileSliders className="size-5 text-primary" />}
                   dropdownItems={[
                     {
                       text: 'Locators',
-                      icon: <Code className="h-6 w-6 text-primary" />,
+                      icon: <Code className="size-6 text-primary" />,
                       href: '/locators',
                       description: 'Define reusable locators',
                     },
                     {
                       text: 'Locator Groups',
-                      icon: <Group className="h-6 w-6 text-primary" />,
+                      icon: <Group className="size-6 text-primary" />,
                       href: '/locator-groups',
                       description: 'Organize locators into logical groups',
                     },
                     {
                       text: 'Modules',
-                      icon: <Puzzle className="h-6 w-6 text-primary" />,
+                      icon: <Puzzle className="size-6 text-primary" />,
                       href: '/modules',
                       description: 'Organize tests into logical units',
                     },
                     {
                       text: 'Environments',
-                      icon: <Server className="h-6 w-6 text-primary" />,
+                      icon: <Server className="size-6 text-primary" />,
                       href: '/environments',
                       description: 'Define test environment configurations',
                     },
                     {
                       text: 'Tags',
-                      icon: <Tag className="h-6 w-6 text-primary" />,
+                      icon: <Tag className="size-6 text-primary" />,
                       href: '/tags',
                       description: 'Define tags for test scenarios and suites',
                     },
                   ]}
                 />
-                <NavLink href="/settings" icon={<Settings2 className="h-5 w-5 text-primary" />}>
+                <NavLink href="/settings" icon={<Settings2 className="size-5 text-primary" />}>
                   Settings
                 </NavLink>
                 <NavCommand className="ml-auto" />

package/templates/starter/src/app/page.tsx

@@ -1,13 +1,13 @@
+import type { Metadata } from 'next'
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import AppDrawer from './(dashboard-components)/app-drawer'
 import {
-  EntityMetrics,
   getDashboardMetricsAction,
   getEntityMetricsAction,
   getTestSuiteExecutionDataAction,
 } from '@/actions/dashboard/dashboard-actions'
-import type { TestSuiteExecutionData } from '@/services/dashboard/dashboard-service'
+import type { EntityMetrics, TestSuiteExecutionData } from '@/services/dashboard/dashboard-service'
 import { DashboardMetrics } from '@prisma/client'
 import QuickActionsDrawer from './(dashboard-components)/quick-actions-drawer'
 import DataCard from './(dashboard-components)/data-card'
@@ -15,12 +15,14 @@ import OngoingTestRunsCard from './(dashboard-components)/ongoing-test-runs-card
 import { DataCardGrid } from './(dashboard-components)/data-card-grid'
 import { ExecutionHealthPanel } from './(dashboard-components)/execution-health-panel'
 
+export const metadata: Metadata = {
+  title: 'Appraise | Dashboard',
+  description: 'Check metrics, entity states, execution health, and quick actions.',
+}
+
 export const dynamic = 'force-dynamic'
 
 const Dashboard = async () => {
-  const metricsResponse = await getDashboardMetricsAction()
-  const metrics = metricsResponse.status === 200 ? (metricsResponse.data as DashboardMetrics | null) : null
-
   const entityMetricsResponse = await getEntityMetricsAction()
   const entityMetrics =
     entityMetricsResponse.status === 200 ? (entityMetricsResponse.data as unknown as EntityMetrics) : null
@@ -28,6 +30,9 @@ const Dashboard = async () => {
     return <div>Error loading entity metrics</div>
   }
 
+  const metricsResponse = await getDashboardMetricsAction()
+  const metrics = metricsResponse.status === 200 ? (metricsResponse.data as DashboardMetrics | null) : null
+
   const { testCasesCount, testSuitesCount, templateStepsCount, runningTestRunsCount } = entityMetrics
 
   // Fetch test suite execution data

package/templates/starter/src/components/base-node.tsx

@@ -1,11 +1,10 @@
-import { forwardRef, HTMLAttributes } from 'react'
+import type { HTMLAttributes } from 'react'
 
 import { cn } from '@/lib/utils'
 
-export const BaseNode = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { selected?: boolean }>(
-  ({ className, selected, ...props }, ref) => (
+export function BaseNode({ className, selected, ...props }: HTMLAttributes<HTMLDivElement> & { selected?: boolean }) {
+  return (
     <div
-      ref={ref}
       className={cn(
         'relative rounded-md border bg-card p-5 text-card-foreground',
         className,
@@ -15,7 +14,5 @@ export const BaseNode = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       tabIndex={0}
       {...props}
     />
-  ),
-)
-
-BaseNode.displayName = 'BaseNode'
+  )
+}

package/templates/starter/src/components/data-state/empty-state.tsx

@@ -27,7 +27,7 @@ const EmptyState = ({
       <EmptyContent>
         <Button asChild>
           <Link href={createRoute}>
-            <SquarePen className="h-4 w-4" />
+            <SquarePen className="size-4" />
             <span className="sr-only">{createText}</span>
             {createText}
           </Link>

package/templates/starter/src/components/data-visualization/info-card.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Card, CardContent } from '../ui/card'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 
 const InfoCard = ({
   showHighlightGroup,
@@ -27,33 +26,20 @@ const InfoCard = ({
 
   return (
     <>
-      <Card className="flex w-[10vw] max-w-[20rem] items-center bg-inherit">
-        <CardContent className="p-2">
-          <div className="flex items-center gap-4 text-primary">
+      <Card className="flex min-w-40 max-w-80 items-center bg-inherit">
+        <CardContent className="min-w-0 p-2">
+          <div className="flex min-w-0 items-center gap-4 text-primary">
             {showHighlightGroup ? (
               <>
-                {icon}
-                <div className="flex h-full flex-col">
+                <div className="shrink-0">{icon}</div>
+                <div className="flex h-full min-w-0 flex-col">
                   <div className="flex h-full items-center text-xs text-muted-foreground">{legend}</div>
                   <div
-                    className={`mr-2 h-full items-center font-mono text-primary ${getHighlightTextSize(highlight)} ${
-                      highlight.length > 15 ? 'w-[6rem] overflow-hidden text-ellipsis whitespace-nowrap' : ''
-                    }`}
+                    className={`h-full min-w-0 items-center break-words font-mono text-primary ${getHighlightTextSize(
+                      highlight,
+                    )}`}
                   >
-                    {highlight.length > 15 ? (
-                      <>
-                        <TooltipProvider>
-                          <Tooltip delayDuration={200}>
-                            <TooltipTrigger asChild>
-                              <span>{highlight}</span>
-                            </TooltipTrigger>
-                            <TooltipContent>{highlight}</TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </>
-                    ) : (
-                      highlight
-                    )}
+                    {highlight}
                   </div>
                 </div>
               </>

package/templates/starter/src/components/diagram/add-node-prompt-node.tsx

@@ -0,0 +1,30 @@
+import type { Node, NodeProps } from '@xyflow/react'
+import { memo } from 'react'
+
+import { BaseNode } from '@/components/base-node'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+import { ADD_NODE_PROMPT_NODE_TYPE, type AddNodePromptNodeData } from './flow-diagram-helpers'
+
+export type AddNodePromptFlowNode = Node<AddNodePromptNodeData, typeof ADD_NODE_PROMPT_NODE_TYPE>
+
+type AddNodePromptNodeComponentProps = NodeProps<AddNodePromptFlowNode> & {
+  onOpenAddNode: () => void
+}
+
+export const AddNodePromptNode = memo(function AddNodePromptNode({
+  selected,
+  onOpenAddNode,
+}: AddNodePromptNodeComponentProps) {
+  return (
+    <BaseNode selected={selected} className="border-muted-foreground/50 bg-muted/30 max-w-80 border-dashed px-4 py-3">
+      <p className="mb-3 text-sm text-muted-foreground">No steps yet. Add your first node to build the flow.</p>
+      <Button type="button" className={cn('nodrag w-full')} variant="outline" onClick={onOpenAddNode}>
+        Add node
+      </Button>
+    </BaseNode>
+  )
+})
+
+AddNodePromptNode.displayName = 'AddNodePromptNode'