confirm build

app/generation/GenerationClient.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+
+const AISandboxPage = dynamic(
+  () => import('./page-content'),
+  { 
+    ssr: false,
+    loading: () => <div className="flex items-center justify-center h-screen">Loading...</div>
+  }
+);
+
+export default function GenerationClient() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center h-screen">Loading...</div>}>
+      <AISandboxPage />
+    </Suspense>
+  );
+}

app/generation/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { appConfig } from '@/config/app.config';
 import HeroInput from '@/components/HeroInput';
@@ -44,12 +44,10 @@ interface ChatMessage {
   };
 }
 
-export default function AISandboxPage() {
+function AISandboxPage() {
   const [sandboxData, setSandboxData] = useState<SandboxData | null>(null);
   const [loading, setLoading] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [status, setStatus] = useState({ text: 'Not connected', active: false });
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [responseArea, setResponseArea] = useState<string[]>([]);
   const [structureContent, setStructureContent] = useState('No sandbox created yet');
   const [promptInput, setPromptInput] = useState('');
@@ -68,11 +66,8 @@ export default function AISandboxPage() {
     const modelParam = searchParams.get('model');
     return appConfig.ai.availableModels.includes(modelParam || '') ? modelParam! : appConfig.ai.defaultModel;
   });
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [urlOverlayVisible, setUrlOverlayVisible] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [urlInput, setUrlInput] = useState('');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [urlStatus, setUrlStatus] = useState<string[]>([]);
   const [showHomeScreen, setShowHomeScreen] = useState(true);
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set(['app', 'src', 'src/components']));
@@ -83,22 +78,18 @@ export default function AISandboxPage() {
   const [activeTab, setActiveTab] = useState<'generation' | 'preview'>('preview');
   const [showStyleSelector, setShowStyleSelector] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [showLoadingBackground, setShowLoadingBackground] = useState(false);
   const [urlScreenshot, setUrlScreenshot] = useState<string | null>(null);
   const [isScreenshotLoaded, setIsScreenshotLoaded] = useState(false);
   const [isCapturingScreenshot, setIsCapturingScreenshot] = useState(false);
   const [screenshotError, setScreenshotError] = useState<string | null>(null);
   const [isPreparingDesign, setIsPreparingDesign] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [targetUrl, setTargetUrl] = useState<string>('');
   const [sidebarScrolled, setSidebarScrolled] = useState(false);
   const [loadingStage, setLoadingStage] = useState<'gathering' | 'planning' | 'generating' | null>(null);
   const [isStartingNewGeneration, setIsStartingNewGeneration] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [sandboxFiles, setSandboxFiles] = useState<Record<string, string>>({});
   const [hasInitialSubmission, setHasInitialSubmission] = useState<boolean>(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [fileStructure, setFileStructure] = useState<string>('');
   
   const [conversationContext, setConversationContext] = useState<{
@@ -396,7 +387,6 @@ export default function AISandboxPage() {
     addChatMessage('Checking packages... Sandbox is ready with Vite configuration.', 'system');
   };
   
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleSurfaceError = (_errors: any[]) => {
     // Function kept for compatibility but Vite errors are now handled by template
     
@@ -407,7 +397,6 @@ export default function AISandboxPage() {
     }
   };
   
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const installPackages = async (packages: string[]) => {
     if (!sandboxData) {
       addChatMessage('No active sandbox. Create a sandbox first!', 'system');
@@ -2094,7 +2083,7 @@ Tip: I automatically detect and install npm packages from your code imports (lik
           addChatMessage('Waiting for sandbox to be ready...', 'system');
           try {
             const newSandboxData = await sandboxPromise;
-            if (newSandboxData) {
+            if (newSandboxData != null) {
               activeSandboxData = newSandboxData;
               // Also update the state for future use
               setSandboxData(newSandboxData);
@@ -3524,4 +3513,12 @@ Focus on the key sections and content, making it clean and modern.`;
     </div>
     </HeaderProvider>
   );
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
+      <AISandboxPage />
+    </Suspense>
+  );
 }