From eab049099ec84c5c704d74b4396b9bd42cc4e82b Mon Sep 17 00:00:00 2001
From: conradkoh <conradkoh@gmail.com>
Date: Fri, 5 Jun 2026 14:31:17 +0800
Subject: [PATCH] fix: avoid duplicate App definitions in Sandpack preview

When user code already exports a root App component, use it directly
as /App.tsx instead of generating a wrapper that duplicates the name.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 package.json                                  |  2 +-
 .../templates/sandpackTemplate.ts             | 22 +++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 575e7d9..c9a9cee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "artifact-cli",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "CLI tool for previewing React components in isolated sandboxes using Sandpack",
   "module": "index.ts",
   "type": "module",
diff --git a/src/infrastructure/templates/sandpackTemplate.ts b/src/infrastructure/templates/sandpackTemplate.ts
index cc61160..e21cae1 100644
--- a/src/infrastructure/templates/sandpackTemplate.ts
+++ b/src/infrastructure/templates/sandpackTemplate.ts
@@ -4,11 +4,13 @@ export function generateSandpackHtml(analysis: ComponentAnalysis): string {
   // Build files object for Sandpack
   const files: Record<string, string> = {};
 
-  // Main component file
-  files["/App.tsx"] = generateAppWrapper(analysis);
-
-  // Original component
-  files["/Component.tsx"] = analysis.code;
+  if (shouldUseDirectAppEntry(analysis)) {
+    // User code is already a root App component — use it directly to avoid duplicate App definitions
+    files["/App.tsx"] = analysis.code;
+  } else {
+    files["/App.tsx"] = generateAppWrapper(analysis);
+    files["/Component.tsx"] = analysis.code;
+  }
 
   // Local imports
   for (const localImport of analysis.localImports) {
@@ -354,14 +356,20 @@ export function generateSandpackHtml(analysis: ComponentAnalysis): string {
 </html>`;
 }
 
+function shouldUseDirectAppEntry(analysis: ComponentAnalysis): boolean {
+  return analysis.componentName === "App";
+}
+
 function generateAppWrapper(analysis: ComponentAnalysis): string {
+  const { componentName } = analysis;
+
   return `import React from 'react';
-import ${analysis.componentName} from './Component';
+import ${componentName} from './Component';
 
 export default function App() {
   return (
     <div>
-      <${analysis.componentName} />
+      <${componentName} />
     </div>
   );
 }