create-appraise 0.1.0

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

@@ -0,0 +1,146 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { promises as fs } from 'fs'
+import { taskSpawner } from '@/tests/utils/spawner.util'
+import prisma from '@/config/db-config'
+import path from 'path'
+
+// Ensure this route runs in Node.js runtime (not Edge) for singleton to work
+export const runtime = 'nodejs'
+
+/**
+ * GET handler for checking if trace viewer is running
+ *
+ * This endpoint checks if a trace viewer process is currently running for a test case.
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ runId: string; testCaseId: string }> },
+) {
+  const { runId, testCaseId } = await params
+
+  try {
+    // Verify test run exists
+    const testRun = await prisma.testRun.findUnique({
+      where: { runId },
+      include: {
+        testCases: {
+          where: { id: testCaseId },
+        },
+      },
+    })
+
+    if (!testRun) {
+      return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
+    }
+
+    // Verify test case belongs to this test run
+    const testRunTestCase = testRun.testCases.find(tc => tc.id === testCaseId)
+    if (!testRunTestCase) {
+      return NextResponse.json({ error: 'Test case not found in this test run' }, { status: 404 })
+    }
+
+    // Check if trace viewer process is running
+    const processName = `trace-viewer-${testCaseId}`
+    const process = taskSpawner.getProcess(processName)
+    const isRunning = process?.isRunning ?? false
+
+    return NextResponse.json({
+      isRunning,
+      processName: isRunning ? processName : null,
+    })
+  } catch (error) {
+    console.error(`[TraceViewer] Error checking trace viewer status for runId: ${runId}, testCaseId: ${testCaseId}:`, error)
+    return NextResponse.json(
+      {
+        error: `Failed to check trace viewer status: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      },
+      { status: 500 },
+    )
+  }
+}
+
+/**
+ * POST handler for spawning Playwright trace viewer
+ *
+ * This endpoint spawns a process to open the Playwright trace viewer for a failed test scenario.
+ * The process is self-closing and doesn't require cleanup.
+ *
+ * Security: Verifies test run and test case exist and belong together before allowing access.
+ * TODO: Add user authentication check when authentication is implemented.
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ runId: string; testCaseId: string }> },
+) {
+  const { runId, testCaseId } = await params
+
+  try {
+    // Verify test run exists
+    const testRun = await prisma.testRun.findUnique({
+      where: { runId },
+      include: {
+        testCases: {
+          where: { id: testCaseId },
+          include: {
+            testCase: true,
+          },
+        },
+      },
+    })
+
+    if (!testRun) {
+      return NextResponse.json({ error: 'Test run not found' }, { status: 404 })
+    }
+
+    // Verify test case belongs to this test run
+    const testRunTestCase = testRun.testCases.find(tc => tc.id === testCaseId)
+    if (!testRunTestCase) {
+      return NextResponse.json({ error: 'Test case not found in this test run' }, { status: 404 })
+    }
+
+    // Get trace path from database
+    const tracePath = testRunTestCase.tracePath
+    if (!tracePath) {
+      return NextResponse.json({ error: 'No trace path available for this test case' }, { status: 400 })
+    }
+
+    // Validate trace file exists
+    try {
+      await fs.access(tracePath)
+    } catch {
+      return NextResponse.json(
+        { error: `Trace file not found at path: ${tracePath}` },
+        { status: 404 },
+      )
+    }
+
+    // Resolve absolute path if relative
+    const absoluteTracePath = path.isAbsolute(tracePath) ? tracePath : path.join(process.cwd(), tracePath)
+
+    // Spawn playwright show-trace command
+    // The process is self-closing when the user closes the trace viewer
+    const spawnedProcess = await taskSpawner.spawn('npx', ['playwright', 'show-trace', absoluteTracePath], {
+      streamLogs: true,
+      prefixLogs: true,
+      logPrefix: `trace-viewer-${testCaseId}`,
+      captureOutput: false, // No need to capture output for trace viewer
+    })
+
+    console.log(`[TraceViewer] Spawned trace viewer process for testCaseId: ${testCaseId}, tracePath: ${absoluteTracePath}`)
+
+    return NextResponse.json({
+      success: true,
+      message: 'Trace viewer launched successfully',
+      processName: spawnedProcess.name,
+    })
+  } catch (error) {
+    console.error(`[TraceViewer] Error spawning trace viewer for runId: ${runId}, testCaseId: ${testCaseId}:`, error)
+    return NextResponse.json(
+      {
+        error: `Failed to spawn trace viewer: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      },
+      { status: 500 },
+    )
+  }
+}
+

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

@@ -0,0 +1,147 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: oklch(0.9751 0.0127 244.2507);
+    --foreground: oklch(0.3729 0.0306 259.7328);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.3729 0.0306 259.7328);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.3729 0.0306 259.7328);
+    --primary: oklch(0.5606 0.192 149.5793);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.9514 0.025 236.8242);
+    --secondary-foreground: oklch(0.4461 0.0263 256.8018);
+    --muted: oklch(0.967 0.0029 264.5419);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.9505 0.0507 163.0508);
+    --accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(1 0 0);
+    --border: oklch(0.9276 0.0058 264.5313);
+    --input: oklch(0.9276 0.0058 264.5313);
+    --ring: oklch(0.7227 0.192 149.5793);
+    --chart-1: oklch(0.7227 0.192 149.5793);
+    --chart-2: oklch(0.6959 0.1491 162.4796);
+    --chart-3: oklch(0.596 0.1274 163.2254);
+    --chart-4: oklch(0.5081 0.1049 165.6121);
+    --chart-5: oklch(0.4318 0.0865 166.9128);
+    --sidebar: oklch(0.9514 0.025 236.8242);
+    --sidebar-foreground: oklch(0.3729 0.0306 259.7328);
+    --sidebar-primary: oklch(0.7227 0.192 149.5793);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.9505 0.0507 163.0508);
+    --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --sidebar-border: oklch(0.9276 0.0058 264.5313);
+    --sidebar-ring: oklch(0.7227 0.192 149.5793);
+    --font-sans: DM Sans, sans-serif;
+    --font-serif: Lora, serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --radius: 0.5rem;
+    --shadow-x: 0px;
+    --shadow-y: 4px;
+    --shadow-blur: 8px;
+    --shadow-spread: -1px;
+    --shadow-opacity: 0.1;
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --tracking-normal: 0em;
+    --spacing: 0.25rem;
+    --shadow-offset-x: 0px;
+    --shadow-offset-y: 4px;
+    --letter-spacing: 0em;
+  }
+
+  .dark {
+    --background: oklch(0.2077 0.0398 265.7549);
+    --foreground: oklch(0.8717 0.0093 258.3382);
+    --card: oklch(0.2795 0.0368 260.031);
+    --card-foreground: oklch(0.8717 0.0093 258.3382);
+    --popover: oklch(0.2795 0.0368 260.031);
+    --popover-foreground: oklch(0.8717 0.0093 258.3382);
+    --primary: oklch(0.7729 0.1535 163.2231);
+    --primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --secondary: oklch(0.3351 0.0331 260.912);
+    --secondary-foreground: oklch(0.7118 0.0129 286.0665);
+    --muted: oklch(0.2463 0.0275 259.9628);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.3729 0.0306 259.7328);
+    --accent-foreground: oklch(0.7118 0.0129 286.0665);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(0.2077 0.0398 265.7549);
+    --border: oklch(0.4461 0.0263 256.8018);
+    --input: oklch(0.4461 0.0263 256.8018);
+    --ring: oklch(0.7729 0.1535 163.2231);
+    --chart-1: oklch(0.7729 0.1535 163.2231);
+    --chart-2: oklch(0.7845 0.1325 181.912);
+    --chart-3: oklch(0.7227 0.192 149.5793);
+    --chart-4: oklch(0.6959 0.1491 162.4796);
+    --chart-5: oklch(0.596 0.1274 163.2254);
+    --sidebar: oklch(0.2795 0.0368 260.031);
+    --sidebar-foreground: oklch(0.8717 0.0093 258.3382);
+    --sidebar-primary: oklch(0.7729 0.1535 163.2231);
+    --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --sidebar-accent: oklch(0.3729 0.0306 259.7328);
+    --sidebar-accent-foreground: oklch(0.7118 0.0129 286.0665);
+    --sidebar-border: oklch(0.4461 0.0263 256.8018);
+    --sidebar-ring: oklch(0.7729 0.1535 163.2231);
+    --font-sans: DM Sans, sans-serif;
+    --font-serif: Lora, serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --radius: 0.5rem;
+    --shadow-x: 0px;
+    --shadow-y: 4px;
+    --shadow-blur: 8px;
+    --shadow-spread: -1px;
+    --shadow-opacity: 0.1;
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --shadow-offset-x: 0px;
+    --shadow-offset-y: 4px;
+    --letter-spacing: 0em;
+    --spacing: 0.25rem;
+  }
+  .theme {
+    --font-sans: DM Sans, sans-serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --font-serif: Lora, serif;
+    --radius: 0.5rem;
+    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+    --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  }
+  body {
+    letter-spacing: var(--tracking-normal);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -0,0 +1,171 @@
+import type { Metadata } from 'next'
+import { Inter, Inter_Tight } from 'next/font/google'
+import './globals.css'
+import { ThemeProvider } from '@/components/theme/theme-provider'
+import { ModeToggle } from '@/components/theme/mode-toggle'
+import { Toaster } from '@/components/ui/toaster'
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+})
+
+const interTight = Inter_Tight({
+  variable: '--font-inter-tight',
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'Appraise | Dashboard',
+  description: 'Welcome to the dashboard. Here you can see your test suites and run them.',
+}
+
+import Logo from '@/components/logo'
+import NavLink from '@/components/navigation/nav-link'
+import {
+  Blocks,
+  Bot,
+  BrickWall,
+  Code,
+  Component,
+  FileCheck,
+  FileSliders,
+  Group,
+  LayoutDashboard,
+  LayoutTemplate,
+  ListChecks,
+  Puzzle,
+  Server,
+  Tag,
+  TestTubeDiagonal,
+  TestTubes,
+} from 'lucide-react'
+import Link from 'next/link'
+import NavMenuCardDeck from '@/components/navigation/nav-menu-card-deck'
+import { DevtoolsProviders } from '@/components/devtools/providers'
+import NavCommand from '@/components/navigation/nav-command'
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} ${interTight.variable} min-h-screen antialiased`}>
+        <DevtoolsProviders>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+            <ModeToggle />
+            <div className="mx-auto lg:max-w-screen-xl 2xl:max-w-screen-2xl">
+              <nav className="mb-6 py-2">
+                <div className="flex items-center gap-1">
+                  <div className="-ml-2">
+                    <Link href="/">
+                      <Logo />
+                    </Link>
+                  </div>
+                  <NavLink href="/" icon={<LayoutDashboard className="h-5 w-5 text-primary" />}>
+                    Dashboard
+                  </NavLink>
+                  <NavMenuCardDeck
+                    containerButtonText="Automate"
+                    containerButtonIcon={<Bot className="h-5 w-5 text-primary" />}
+                    dropdownItems={[
+                      {
+                        text: 'Test Suites',
+                        icon: <TestTubes className="h-6 w-6 text-primary" />,
+                        href: '/test-suites',
+                        description: 'Group tests into logical units',
+                      },
+                      {
+                        text: 'Test Cases',
+                        icon: <TestTubeDiagonal className="h-6 w-6 text-primary" />,
+                        href: '/test-cases',
+                        description: 'Define test scenarios',
+                      },
+                      {
+                        text: 'Test Runs',
+                        icon: <ListChecks className="h-6 w-6 text-primary" />,
+                        href: '/test-runs',
+                        description: 'Execute test scenarios',
+                      },
+                      {
+                        text: 'Reports',
+                        icon: <FileCheck className="h-6 w-6 text-primary" />,
+                        href: '/reports',
+                        description: 'Analyze test results',
+                      },
+                    ]}
+                  />
+                  <NavMenuCardDeck
+                    containerButtonText="Template"
+                    containerButtonIcon={<BrickWall className="h-5 w-5 text-primary" />}
+                    dropdownItems={[
+                      {
+                        text: 'Template Steps',
+                        icon: <LayoutTemplate className="h-6 w-6 text-primary" />,
+                        href: '/template-steps',
+                        description: 'Define reusable test steps',
+                      },
+                      {
+                        text: 'Template Step Groups',
+                        icon: <Component className="h-6 w-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" />,
+                        href: '/template-test-cases',
+                        description: 'Define reusable test scenario templates',
+                      },
+                    ]}
+                  />
+                  <NavMenuCardDeck
+                    containerButtonText="Configuration"
+                    containerButtonIcon={<FileSliders className="h-5 w-5 text-primary" />}
+                    dropdownItems={[
+                      {
+                        text: 'Locators',
+                        icon: <Code className="h-6 w-6 text-primary" />,
+                        href: '/locators',
+                        description: 'Define reusable locators',
+                      },
+                      {
+                        text: 'Locator Groups',
+                        icon: <Group className="h-6 w-6 text-primary" />,
+                        href: '/locator-groups',
+                        description: 'Organize locators into logical groups',
+                      },
+                      {
+                        text: 'Modules',
+                        icon: <Puzzle className="h-6 w-6 text-primary" />,
+                        href: '/modules',
+                        description: 'Organize tests into logical units',
+                      },
+                      {
+                        text: 'Environments',
+                        icon: <Server className="h-6 w-6 text-primary" />,
+                        href: '/environments',
+                        description: 'Define test environment configurations',
+                      },
+                      {
+                        text: 'Tags',
+                        icon: <Tag className="h-6 w-6 text-primary" />,
+                        href: '/tags',
+                        description: 'Define tags for test scenarios and suites',
+                      },
+                    ]}
+                  />
+                  <NavCommand className="ml-auto" />
+                </div>
+              </nav>
+              {children}
+              <Toaster />
+            </div>
+          </ThemeProvider>
+        </DevtoolsProviders>
+      </body>
+    </html>
+  )
+}

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

@@ -0,0 +1,64 @@
+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,
+  TestSuiteExecutionData,
+} from '@/actions/dashboard/dashboard-actions'
+import { DashboardMetrics } from '@prisma/client'
+import QuickActionsDrawer from './(dashboard-components)/quick-actions-drawer'
+import DataCard from './(dashboard-components)/data-card'
+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'
+
+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
+  if (!entityMetrics) {
+    return <div>Error loading entity metrics</div>
+  }
+
+  const { testCasesCount, testSuitesCount, templateStepsCount, runningTestRunsCount } = entityMetrics
+
+  // Fetch test suite execution data
+  const testSuiteExecutionResponse = await getTestSuiteExecutionDataAction()
+  const testSuiteExecutionData =
+    testSuiteExecutionResponse.status === 200
+      ? (testSuiteExecutionResponse.data as TestSuiteExecutionData)
+      : []
+
+  return (
+    <div>
+      <div className="mb-8">
+        <PageHeader>Dashboard</PageHeader>
+        <HeaderSubtitle>Welcome to the dashboard. Here you can see your test suites and run them.</HeaderSubtitle>
+      </div>
+      <div className="flex gap-7" id="dashboard-content">
+        <div className="flex flex-col gap-7">
+          <div className="flex gap-7">
+            <AppDrawer metrics={metrics} title="Attention Needed" description="Issues that require immediate action" />
+            <DataCardGrid>
+              <DataCard title="Test Cases" value={testCasesCount} link="/test-cases" />
+              <DataCard title="Test Suites" value={testSuitesCount} link="/test-suites" />
+              <DataCard title="Template Steps" value={templateStepsCount} link="/template-steps" />
+              <OngoingTestRunsCard initialCount={runningTestRunsCount} link="/test-runs" />
+            </DataCardGrid>
+          </div>
+          <QuickActionsDrawer />
+        </div>
+        <div className="flex-1">
+          <ExecutionHealthPanel featureData={testSuiteExecutionData} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard

package/templates/default/src/assets/icons/empty-tube.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils'
+
+const EmptyTube = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('lucide lucide-test-tube-icon lucide-test-tube', className)}
+    >
+      <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
+      <path d="M8.5 2h7" />
+    </svg>
+  )
+}
+
+export default EmptyTube

package/templates/default/src/assets/icons/tube-plus.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils'
+
+export const TubePlus = ({ className }: { className?: string }) => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn('lucide', className)}
+      >
+        {/* Empty tube icon */}
+        <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
+        <path d="M8.5 2h7" />
+        {/* Half-filled level indicator */}
+        <line x1="10.5" y1="15.5" x2="13.5" y2="15.5" />
+        {/* Plus icon - positioned at bottom right */}
+        <line x1="17.5" y1="19.5" x2="21.5" y2="19.5" strokeWidth="1.5" />
+        <line x1="19.5" y1="17.5" x2="19.5" y2="21.5" strokeWidth="1.5" />
+      </svg>
+    </>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { forwardRef, HTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export const BaseNode = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { selected?: boolean }>(
+  ({ className, selected, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'relative rounded-md border bg-card p-5 text-card-foreground',
+        className,
+        selected ? 'border-muted-foreground shadow-lg' : '',
+        'hover:ring-1',
+      )}
+      tabIndex={0}
+      {...props}
+    />
+  ),
+)
+
+BaseNode.displayName = 'BaseNode'

package/templates/default/src/components/chart/pie-chart.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import React from 'react'
+import { Label } from 'recharts'
+import { ChartConfig, ChartLegend, ChartLegendContent, ChartTooltipContent } from '../ui/chart'
+import { ChartTooltip } from '../ui/chart'
+import { ChartContainer } from '../ui/chart'
+import { Pie, PieChart } from 'recharts'
+import { CardContent, CardHeader, CardTitle } from '../ui/card'
+import { Card, CardDescription } from '../ui/card'
+import { cn } from '@/lib/utils'
+
+const PieChartGraph = ({
+  chartConfig,
+  chartData,
+  chartLabelValue,
+  chartLabelText,
+  chartTitle,
+  chartDescription,
+  chartValueKey,
+  chartNameKey,
+  className,
+}: {
+  chartConfig: ChartConfig
+  chartData: Record<string, unknown>[]
+  chartLabelValue: string
+  chartLabelText: string
+  chartTitle: string
+  chartDescription: string
+  chartValueKey: string
+  chartNameKey: string
+  className?: React.ComponentProps<'div'>['className']
+}) => {
+  return (
+    <Card className={cn('flex flex-col', className)}>
+      <CardHeader className="items-center pb-0">
+        <CardTitle>{chartTitle}</CardTitle>
+        <CardDescription>{chartDescription}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie data={chartData} dataKey={chartValueKey} nameKey={chartNameKey} innerRadius={60} strokeWidth={5}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                    return (
+                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+                          {chartLabelValue}
+                        </tspan>
+                        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+                          {chartLabelText}
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+            <ChartLegend
+              content={<ChartLegendContent nameKey={chartNameKey} />}
+              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PieChartGraph