From c63732d2f47aabb00edba88879c3c205c6defc26 Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Wed, 2 Apr 2025 16:47:04 +0100
Subject: [PATCH 1/3] fix: simplify the SHA-1 hash function in
 api.netlify-deploy.ts by using the crypto module directly this allows it to
 work in both dev and prod environments.

also extract Netlify and Vercel deploy logic into separate components

Move the Netlify and Vercel deployment logic from HeaderActionButtons.client.tsx into dedicated components (NetlifyDeploy.client.tsx and VercelDeploy.client.tsx) to improve code maintainability and reusability.
---
 .../deploy/NetlifyDeploy.client.tsx           | 212 +++++++++++++
 app/components/deploy/VercelDeploy.client.tsx | 168 ++++++++++
 .../header/HeaderActionButtons.client.tsx     | 289 +-----------------
 app/routes/api.netlify-deploy.ts              |  12 +-
 vite.config.ts                                |  48 +--
 5 files changed, 401 insertions(+), 328 deletions(-)
 create mode 100644 app/components/deploy/NetlifyDeploy.client.tsx
 create mode 100644 app/components/deploy/VercelDeploy.client.tsx

diff --git a/app/components/deploy/NetlifyDeploy.client.tsx b/app/components/deploy/NetlifyDeploy.client.tsx
new file mode 100644
index 0000000..7b7695a
--- /dev/null
+++ b/app/components/deploy/NetlifyDeploy.client.tsx
@@ -0,0 +1,212 @@
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { netlifyConnection } from '~/lib/stores/netlify';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
+import { path } from '~/utils/path';
+import { useState } from 'react';
+import type { ActionCallbackData } from '~/lib/runtime/message-parser';
+import { chatId } from '~/lib/persistence/useChatHistory';
+
+export function useNetlifyDeploy() {
+  const [isDeploying, setIsDeploying] = useState(false);
+  const netlifyConn = useStore(netlifyConnection);
+  const currentChatId = useStore(chatId);
+
+  const handleNetlifyDeploy = async () => {
+    if (!netlifyConn.user || !netlifyConn.token) {
+      toast.error('Please connect to Netlify first in the settings tab!');
+      return false;
+    }
+
+    if (!currentChatId) {
+      toast.error('No active chat found');
+      return false;
+    }
+
+    try {
+      setIsDeploying(true);
+
+      const artifact = workbenchStore.firstArtifact;
+
+      if (!artifact) {
+        throw new Error('No active project found');
+      }
+
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: 'netlify build',
+        artifactId: artifact.id,
+        actionId,
+        action: {
+          type: 'build' as const,
+          content: 'npm run build',
+        },
+      };
+
+      // Add the action first
+      artifact.runner.addAction(actionData);
+
+      // Then run it
+      await artifact.runner.runAction(actionData);
+
+      if (!artifact.runner.buildOutput) {
+        throw new Error('Build failed');
+      }
+
+      // Get the build files
+      const container = await webcontainer;
+
+      // Remove /home/project from buildPath if it exists
+      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
+
+      console.log('Original buildPath', buildPath);
+
+      // Check if the build path exists
+      let finalBuildPath = buildPath;
+
+      // List of common output directories to check if the specified build path doesn't exist
+      const commonOutputDirs = [buildPath, '/dist', '/build', '/out', '/output', '/.next', '/public'];
+
+      // Verify the build path exists, or try to find an alternative
+      let buildPathExists = false;
+
+      for (const dir of commonOutputDirs) {
+        try {
+          await container.fs.readdir(dir);
+          finalBuildPath = dir;
+          buildPathExists = true;
+          console.log(`Using build directory: ${finalBuildPath}`);
+          break;
+        } catch (error) {
+          // Directory doesn't exist, try the next one
+          console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
+          continue;
+        }
+      }
+
+      if (!buildPathExists) {
+        throw new Error('Could not find build output directory. Please check your build configuration.');
+      }
+
+      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
+        const files: Record<string, string> = {};
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+
+          if (entry.isFile()) {
+            const content = await container.fs.readFile(fullPath, 'utf-8');
+
+            // Remove build path prefix from the path
+            const deployPath = fullPath.replace(finalBuildPath, '');
+            files[deployPath] = content;
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath);
+            Object.assign(files, subFiles);
+          }
+        }
+
+        return files;
+      }
+
+      const fileContents = await getAllFiles(finalBuildPath);
+
+      // Use chatId instead of artifact.id
+      const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);
+
+      const response = await fetch('/api/netlify-deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          siteId: existingSiteId || undefined,
+          files: fileContents,
+          token: netlifyConn.token,
+          chatId: currentChatId,
+        }),
+      });
+
+      const data = (await response.json()) as any;
+
+      if (!response.ok || !data.deploy || !data.site) {
+        console.error('Invalid deploy response:', data);
+        throw new Error(data.error || 'Invalid deployment response');
+      }
+
+      const maxAttempts = 20; // 2 minutes timeout
+      let attempts = 0;
+      let deploymentStatus;
+
+      while (attempts < maxAttempts) {
+        try {
+          const statusResponse = await fetch(
+            `https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
+            {
+              headers: {
+                Authorization: `Bearer ${netlifyConn.token}`,
+              },
+            },
+          );
+
+          deploymentStatus = (await statusResponse.json()) as any;
+
+          if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
+            break;
+          }
+
+          if (deploymentStatus.state === 'error') {
+            throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
+          }
+
+          attempts++;
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        } catch (error) {
+          console.error('Status check error:', error);
+          attempts++;
+          await new Promise((resolve) => setTimeout(resolve, 2000));
+        }
+      }
+
+      if (attempts >= maxAttempts) {
+        throw new Error('Deployment timed out');
+      }
+
+      // Store the site ID if it's a new site
+      if (data.site) {
+        localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
+      }
+
+      toast.success(
+        <div>
+          Deployed successfully!{' '}
+          <a
+            href={deploymentStatus.ssl_url || deploymentStatus.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            View site
+          </a>
+        </div>,
+      );
+
+      return true;
+    } catch (error) {
+      console.error('Deploy error:', error);
+      toast.error(error instanceof Error ? error.message : 'Deployment failed');
+
+      return false;
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  return {
+    isDeploying,
+    handleNetlifyDeploy,
+    isConnected: !!netlifyConn.user,
+  };
+}
diff --git a/app/components/deploy/VercelDeploy.client.tsx b/app/components/deploy/VercelDeploy.client.tsx
new file mode 100644
index 0000000..74952f8
--- /dev/null
+++ b/app/components/deploy/VercelDeploy.client.tsx
@@ -0,0 +1,168 @@
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { vercelConnection } from '~/lib/stores/vercel';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
+import { path } from '~/utils/path';
+import { useState } from 'react';
+import type { ActionCallbackData } from '~/lib/runtime/message-parser';
+import { chatId } from '~/lib/persistence/useChatHistory';
+
+export function useVercelDeploy() {
+  const [isDeploying, setIsDeploying] = useState(false);
+  const vercelConn = useStore(vercelConnection);
+  const currentChatId = useStore(chatId);
+
+  const handleVercelDeploy = async () => {
+    if (!vercelConn.user || !vercelConn.token) {
+      toast.error('Please connect to Vercel first in the settings tab!');
+      return false;
+    }
+
+    if (!currentChatId) {
+      toast.error('No active chat found');
+      return false;
+    }
+
+    try {
+      setIsDeploying(true);
+
+      const artifact = workbenchStore.firstArtifact;
+
+      if (!artifact) {
+        throw new Error('No active project found');
+      }
+
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: 'vercel build',
+        artifactId: artifact.id,
+        actionId,
+        action: {
+          type: 'build' as const,
+          content: 'npm run build',
+        },
+      };
+
+      // Add the action first
+      artifact.runner.addAction(actionData);
+
+      // Then run it
+      await artifact.runner.runAction(actionData);
+
+      if (!artifact.runner.buildOutput) {
+        throw new Error('Build failed');
+      }
+
+      // Get the build files
+      const container = await webcontainer;
+
+      // Remove /home/project from buildPath if it exists
+      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
+
+      // Check if the build path exists
+      let finalBuildPath = buildPath;
+
+      // List of common output directories to check if the specified build path doesn't exist
+      const commonOutputDirs = [buildPath, '/dist', '/build', '/out', '/output', '/.next', '/public'];
+
+      // Verify the build path exists, or try to find an alternative
+      let buildPathExists = false;
+
+      for (const dir of commonOutputDirs) {
+        try {
+          await container.fs.readdir(dir);
+          finalBuildPath = dir;
+          buildPathExists = true;
+          console.log(`Using build directory: ${finalBuildPath}`);
+          break;
+        } catch (error) {
+          console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
+
+          // Directory doesn't exist, try the next one
+          continue;
+        }
+      }
+
+      if (!buildPathExists) {
+        throw new Error('Could not find build output directory. Please check your build configuration.');
+      }
+
+      // Get all files recursively
+      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
+        const files: Record<string, string> = {};
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+
+          if (entry.isFile()) {
+            const content = await container.fs.readFile(fullPath, 'utf-8');
+
+            // Remove build path prefix from the path
+            const deployPath = fullPath.replace(finalBuildPath, '');
+            files[deployPath] = content;
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath);
+            Object.assign(files, subFiles);
+          }
+        }
+
+        return files;
+      }
+
+      const fileContents = await getAllFiles(finalBuildPath);
+
+      // Use chatId instead of artifact.id
+      const existingProjectId = localStorage.getItem(`vercel-project-${currentChatId}`);
+
+      const response = await fetch('/api/vercel-deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          projectId: existingProjectId || undefined,
+          files: fileContents,
+          token: vercelConn.token,
+          chatId: currentChatId,
+        }),
+      });
+
+      const data = (await response.json()) as any;
+
+      if (!response.ok || !data.deploy || !data.project) {
+        console.error('Invalid deploy response:', data);
+        throw new Error(data.error || 'Invalid deployment response');
+      }
+
+      if (data.project) {
+        localStorage.setItem(`vercel-project-${currentChatId}`, data.project.id);
+      }
+
+      toast.success(
+        <div>
+          Deployed successfully to Vercel!{' '}
+          <a href={data.deploy.url} target="_blank" rel="noopener noreferrer" className="underline">
+            View site
+          </a>
+        </div>,
+      );
+
+      return true;
+    } catch (err) {
+      console.error('Vercel deploy error:', err);
+      toast.error(err instanceof Error ? err.message : 'Vercel deployment failed');
+
+      return false;
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  return {
+    isDeploying,
+    handleVercelDeploy,
+    isConnected: !!vercelConn.user,
+  };
+}
diff --git a/app/components/header/HeaderActionButtons.client.tsx b/app/components/header/HeaderActionButtons.client.tsx
index 56945c9..ff211f3 100644
--- a/app/components/header/HeaderActionButtons.client.tsx
+++ b/app/components/header/HeaderActionButtons.client.tsx
@@ -1,19 +1,16 @@
 import { useStore } from '@nanostores/react';
-import { toast } from 'react-toastify';
 import useViewport from '~/lib/hooks';
 import { chatStore } from '~/lib/stores/chat';
 import { netlifyConnection } from '~/lib/stores/netlify';
 import { vercelConnection } from '~/lib/stores/vercel';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { webcontainer } from '~/lib/webcontainer';
 import { classNames } from '~/utils/classNames';
-import { path } from '~/utils/path';
 import { useEffect, useRef, useState } from 'react';
-import type { ActionCallbackData } from '~/lib/runtime/message-parser';
-import { chatId } from '~/lib/persistence/useChatHistory';
 import { streamingState } from '~/lib/stores/streaming';
 import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.client';
 import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.client';
+import { useVercelDeploy } from '~/components/deploy/VercelDeploy.client';
+import { useNetlifyDeploy } from '~/components/deploy/NetlifyDeploy.client';
 
 interface HeaderActionButtonsProps {}
 
@@ -32,6 +29,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const isStreaming = useStore(streamingState);
+  const { handleVercelDeploy } = useVercelDeploy();
+  const { handleNetlifyDeploy } = useNetlifyDeploy();
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -44,282 +43,24 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const currentChatId = useStore(chatId);
-
-  const handleNetlifyDeploy = async () => {
-    if (!netlifyConn.user || !netlifyConn.token) {
-      toast.error('Please connect to Netlify first in the settings tab!');
-      return;
-    }
-
-    if (!currentChatId) {
-      toast.error('No active chat found');
-      return;
-    }
+  const onVercelDeploy = async () => {
+    setIsDeploying(true);
+    setDeployingTo('vercel');
 
     try {
-      setIsDeploying(true);
-
-      const artifact = workbenchStore.firstArtifact;
-
-      if (!artifact) {
-        throw new Error('No active project found');
-      }
-
-      const actionId = 'build-' + Date.now();
-      const actionData: ActionCallbackData = {
-        messageId: 'netlify build',
-        artifactId: artifact.id,
-        actionId,
-        action: {
-          type: 'build' as const,
-          content: 'npm run build',
-        },
-      };
-
-      // Add the action first
-      artifact.runner.addAction(actionData);
-
-      // Then run it
-      await artifact.runner.runAction(actionData);
-
-      if (!artifact.runner.buildOutput) {
-        throw new Error('Build failed');
-      }
-
-      // Get the build files
-      const container = await webcontainer;
-
-      // Remove /home/project from buildPath if it exists
-      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
-
-      // Get all files recursively
-      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
-        const files: Record<string, string> = {};
-        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
-
-        for (const entry of entries) {
-          const fullPath = path.join(dirPath, entry.name);
-
-          if (entry.isFile()) {
-            const content = await container.fs.readFile(fullPath, 'utf-8');
-
-            // Remove /dist prefix from the path
-            const deployPath = fullPath.replace(buildPath, '');
-            files[deployPath] = content;
-          } else if (entry.isDirectory()) {
-            const subFiles = await getAllFiles(fullPath);
-            Object.assign(files, subFiles);
-          }
-        }
-
-        return files;
-      }
-
-      const fileContents = await getAllFiles(buildPath);
-
-      // Use chatId instead of artifact.id
-      const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);
-
-      // Deploy using the API route with file contents
-      const response = await fetch('/api/netlify-deploy', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          siteId: existingSiteId || undefined,
-          files: fileContents,
-          token: netlifyConn.token,
-          chatId: currentChatId, // Use chatId instead of artifact.id
-        }),
-      });
-
-      const data = (await response.json()) as any;
-
-      if (!response.ok || !data.deploy || !data.site) {
-        console.error('Invalid deploy response:', data);
-        throw new Error(data.error || 'Invalid deployment response');
-      }
-
-      // Poll for deployment status
-      const maxAttempts = 20; // 2 minutes timeout
-      let attempts = 0;
-      let deploymentStatus;
-
-      while (attempts < maxAttempts) {
-        try {
-          const statusResponse = await fetch(
-            `https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
-            {
-              headers: {
-                Authorization: `Bearer ${netlifyConn.token}`,
-              },
-            },
-          );
-
-          deploymentStatus = (await statusResponse.json()) as any;
-
-          if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
-            break;
-          }
-
-          if (deploymentStatus.state === 'error') {
-            throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
-          }
-
-          attempts++;
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-        } catch (error) {
-          console.error('Status check error:', error);
-          attempts++;
-          await new Promise((resolve) => setTimeout(resolve, 2000));
-        }
-      }
-
-      if (attempts >= maxAttempts) {
-        throw new Error('Deployment timed out');
-      }
-
-      // Store the site ID if it's a new site
-      if (data.site) {
-        localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
-      }
-
-      toast.success(
-        <div>
-          Deployed successfully!{' '}
-          <a
-            href={deploymentStatus.ssl_url || deploymentStatus.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline"
-          >
-            View site
-          </a>
-        </div>,
-      );
-    } catch (error) {
-      console.error('Deploy error:', error);
-      toast.error(error instanceof Error ? error.message : 'Deployment failed');
+      await handleVercelDeploy();
     } finally {
       setIsDeploying(false);
+      setDeployingTo(null);
     }
   };
 
-  const handleVercelDeploy = async () => {
-    if (!vercelConn.user || !vercelConn.token) {
-      toast.error('Please connect to Vercel first in the settings tab!');
-      return;
-    }
-
-    if (!currentChatId) {
-      toast.error('No active chat found');
-      return;
-    }
+  const onNetlifyDeploy = async () => {
+    setIsDeploying(true);
+    setDeployingTo('netlify');
 
     try {
-      setIsDeploying(true);
-      setDeployingTo('vercel');
-
-      const artifact = workbenchStore.firstArtifact;
-
-      if (!artifact) {
-        throw new Error('No active project found');
-      }
-
-      const actionId = 'build-' + Date.now();
-      const actionData: ActionCallbackData = {
-        messageId: 'vercel build',
-        artifactId: artifact.id,
-        actionId,
-        action: {
-          type: 'build' as const,
-          content: 'npm run build',
-        },
-      };
-
-      // Add the action first
-      artifact.runner.addAction(actionData);
-
-      // Then run it
-      await artifact.runner.runAction(actionData);
-
-      if (!artifact.runner.buildOutput) {
-        throw new Error('Build failed');
-      }
-
-      // Get the build files
-      const container = await webcontainer;
-
-      // Remove /home/project from buildPath if it exists
-      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
-
-      // Get all files recursively
-      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
-        const files: Record<string, string> = {};
-        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
-
-        for (const entry of entries) {
-          const fullPath = path.join(dirPath, entry.name);
-
-          if (entry.isFile()) {
-            const content = await container.fs.readFile(fullPath, 'utf-8');
-
-            // Remove /dist prefix from the path
-            const deployPath = fullPath.replace(buildPath, '');
-            files[deployPath] = content;
-          } else if (entry.isDirectory()) {
-            const subFiles = await getAllFiles(fullPath);
-            Object.assign(files, subFiles);
-          }
-        }
-
-        return files;
-      }
-
-      const fileContents = await getAllFiles(buildPath);
-
-      // Use chatId instead of artifact.id
-      const existingProjectId = localStorage.getItem(`vercel-project-${currentChatId}`);
-
-      // Deploy using the API route with file contents
-      const response = await fetch('/api/vercel-deploy', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          projectId: existingProjectId || undefined,
-          files: fileContents,
-          token: vercelConn.token,
-          chatId: currentChatId,
-        }),
-      });
-
-      const data = (await response.json()) as any;
-
-      if (!response.ok || !data.deploy || !data.project) {
-        console.error('Invalid deploy response:', data);
-        throw new Error(data.error || 'Invalid deployment response');
-      }
-
-      // Store the project ID if it's a new project
-      if (data.project) {
-        localStorage.setItem(`vercel-project-${currentChatId}`, data.project.id);
-      }
-
-      toast.success(
-        <div>
-          Deployed successfully to Vercel!{' '}
-          <a href={data.deploy.url} target="_blank" rel="noopener noreferrer" className="underline">
-            View site
-          </a>
-        </div>,
-      );
-    } catch (error) {
-      console.error('Vercel deploy error:', error);
-      toast.error(error instanceof Error ? error.message : 'Vercel deployment failed');
+      await handleNetlifyDeploy();
     } finally {
       setIsDeploying(false);
       setDeployingTo(null);
@@ -348,7 +89,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
             <Button
               active
               onClick={() => {
-                handleNetlifyDeploy();
+                onNetlifyDeploy();
                 setIsDropdownOpen(false);
               }}
               disabled={isDeploying || !activePreview || !netlifyConn.user}
@@ -369,7 +110,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
             <Button
               active
               onClick={() => {
-                handleVercelDeploy();
+                onVercelDeploy();
                 setIsDropdownOpen(false);
               }}
               disabled={isDeploying || !activePreview || !vercelConn.user}
diff --git a/app/routes/api.netlify-deploy.ts b/app/routes/api.netlify-deploy.ts
index 0bc1c5e..48543e9 100644
--- a/app/routes/api.netlify-deploy.ts
+++ b/app/routes/api.netlify-deploy.ts
@@ -1,4 +1,5 @@
 import { type ActionFunctionArgs, json } from '@remix-run/cloudflare';
+import crypto from 'crypto';
 import type { NetlifySiteInfo } from '~/types/netlify';
 
 interface DeployRequestBody {
@@ -7,15 +8,6 @@ interface DeployRequestBody {
   chatId: string;
 }
 
-async function sha1(message: string) {
-  const msgBuffer = new TextEncoder().encode(message);
-  const hashBuffer = await crypto.subtle.digest('SHA-1', msgBuffer);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
-
-  return hashHex;
-}
-
 export async function action({ request }: ActionFunctionArgs) {
   try {
     const { siteId, files, token, chatId } = (await request.json()) as DeployRequestBody & { token: string };
@@ -112,7 +104,7 @@ export async function action({ request }: ActionFunctionArgs) {
     for (const [filePath, content] of Object.entries(files)) {
       // Ensure file path starts with a forward slash
       const normalizedPath = filePath.startsWith('/') ? filePath : '/' + filePath;
-      const hash = await sha1(content);
+      const hash = crypto.createHash('sha1').update(content).digest('hex');
       fileDigests[normalizedPath] = hash;
     }
 
diff --git a/vite.config.ts b/vite.config.ts
index 6d23a96..d6cc715 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,6 +11,7 @@ import { join } from 'path';
 
 dotenv.config();
 
+// Get detailed git info with fallbacks
 const getGitInfo = () => {
   try {
     return {
@@ -39,6 +40,7 @@ const getGitInfo = () => {
   }
 };
 
+// Read package.json with detailed dependency info
 const getPackageJson = () => {
   try {
     const pkgPath = join(process.cwd(), 'package.json');
@@ -91,53 +93,11 @@ export default defineConfig((config) => {
     },
     build: {
       target: 'esnext',
-      rollupOptions: {
-        output: {
-          format: 'esm',
-        },
-      },
-      commonjsOptions: {
-        transformMixedEsModules: true,
-      },
-    },
-    optimizeDeps: {
-      esbuildOptions: {
-        define: {
-          global: 'globalThis',
-        },
-      },
-    },
-    resolve: {
-      alias: {
-        buffer: 'vite-plugin-node-polyfills/polyfills/buffer',
-        crypto: 'crypto-browserify',
-        stream: 'stream-browserify',
-      },
     },
     plugins: [
       nodePolyfills({
-        include: ['buffer', 'process', 'util', 'stream', 'crypto'],
-        globals: {
-          Buffer: true,
-          process: true,
-          global: true,
-        },
-        protocolImports: true,
-        exclude: ['child_process', 'fs', 'path'],
+        include: ['path', 'buffer', 'process'],
       }),
-      {
-        name: 'buffer-polyfill',
-        transform(code, id) {
-          if (id.includes('env.mjs')) {
-            return {
-              code: `import { Buffer } from 'buffer';\n${code}`,
-              map: null,
-            };
-          }
-
-          return null;
-        },
-      },
       config.mode !== 'test' && remixCloudflareDevProxy(),
       remixVitePlugin({
         future: {
@@ -193,4 +153,4 @@ function chrome129IssuePlugin() {
       });
     },
   };
-}
+}
\ No newline at end of file

From cdbf9ba73077e65e86c5a3195cec55e9fe8576f6 Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Wed, 2 Apr 2025 21:38:50 +0100
Subject: [PATCH 2/3] refactor: update node polyfills and add buffer-polyfill
 plugin

Modify the node polyfills configuration to include additional modules and add a new buffer-polyfill plugin to handle Buffer imports in env.mjs files. This change ensures compatibility with required Node.js modules in the Vite environment.
---
 vite.config.ts | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index d6cc715..60ea52b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -96,8 +96,28 @@ export default defineConfig((config) => {
     },
     plugins: [
       nodePolyfills({
-        include: ['path', 'buffer', 'process'],
+        include: ['buffer', 'process', 'util', 'stream'],
+        globals: {
+          Buffer: true,
+          process: true,
+          global: true,
+        },
+        protocolImports: true,
+        exclude: ['child_process', 'fs', 'path'],
       }),
+      {
+        name: 'buffer-polyfill',
+        transform(code, id) {
+          if (id.includes('env.mjs')) {
+            return {
+              code: `import { Buffer } from 'buffer';\n${code}`,
+              map: null,
+            };
+          }
+
+          return null;
+        },
+      },
       config.mode !== 'test' && remixCloudflareDevProxy(),
       remixVitePlugin({
         future: {

From 33305c4326a5c18874f858f55b0198fee295309d Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Fri, 4 Apr 2025 11:22:56 +0100
Subject: [PATCH 3/3] feat(deploy): add deploy alert system for build and
 deployment status

Introduce a new `DeployAlert` interface and related components to provide visual feedback on build and deployment stages. This includes status updates for Vercel and Netlify deployments, with progress visualization and error handling. The changes enhance user experience by offering real-time updates during the deployment process.
---
 app/components/chat/BaseChat.tsx              |  17 +-
 app/components/chat/Chat.client.tsx           |   3 +
 app/components/deploy/DeployAlert.tsx         | 197 ++++++++++++++++++
 .../deploy/NetlifyDeploy.client.tsx           |  45 ++++
 app/components/deploy/VercelDeploy.client.tsx |  34 +++
 app/lib/runtime/action-runner.ts              | 117 ++++++++++-
 app/lib/stores/workbench.ts                   |  20 +-
 app/types/actions.ts                          |  12 ++
 8 files changed, 440 insertions(+), 5 deletions(-)
 create mode 100644 app/components/deploy/DeployAlert.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 168fbed..a33058c 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -29,7 +29,8 @@ import type { ProviderInfo } from '~/types/model';
 import { ScreenshotStateManager } from './ScreenshotStateManager';
 import { toast } from 'react-toastify';
 import StarterTemplates from './StarterTemplates';
-import type { ActionAlert, SupabaseAlert } from '~/types/actions';
+import type { ActionAlert, SupabaseAlert, DeployAlert } from '~/types/actions';
+import DeployChatAlert from '~/components/deploy/DeployAlert';
 import ChatAlert from './ChatAlert';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import ProgressCompilation from './ProgressCompilation';
@@ -73,6 +74,8 @@ interface BaseChatProps {
   clearAlert?: () => void;
   supabaseAlert?: SupabaseAlert;
   clearSupabaseAlert?: () => void;
+  deployAlert?: DeployAlert;
+  clearDeployAlert?: () => void;
   data?: JSONValue[] | undefined;
   actionRunner?: ActionRunner;
 }
@@ -109,6 +112,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       messages,
       actionAlert,
       clearAlert,
+      deployAlert,
+      clearDeployAlert,
       supabaseAlert,
       clearSupabaseAlert,
       data,
@@ -349,6 +354,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   ) : null;
                 }}
               </ClientOnly>
+              {deployAlert && (
+                <DeployChatAlert
+                  alert={deployAlert}
+                  clearAlert={() => clearDeployAlert?.()}
+                  postMessage={(message: string | undefined) => {
+                    sendMessage?.({} as any, message);
+                    clearSupabaseAlert?.();
+                  }}
+                />
+              )}
               {supabaseAlert && (
                 <SupabaseChatAlert
                   alert={supabaseAlert}
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 4cf8c8c..9fe89c6 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -124,6 +124,7 @@ export const ChatImpl = memo(
     const [fakeLoading, setFakeLoading] = useState(false);
     const files = useStore(workbenchStore.files);
     const actionAlert = useStore(workbenchStore.alert);
+    const deployAlert = useStore(workbenchStore.deployAlert);
     const supabaseConn = useStore(supabaseConnection); // Add this line to get Supabase connection
     const selectedProject = supabaseConn.stats?.projects?.find(
       (project) => project.id === supabaseConn.selectedProjectId,
@@ -560,6 +561,8 @@ export const ChatImpl = memo(
         clearAlert={() => workbenchStore.clearAlert()}
         supabaseAlert={supabaseAlert}
         clearSupabaseAlert={() => workbenchStore.clearSupabaseAlert()}
+        deployAlert={deployAlert}
+        clearDeployAlert={() => workbenchStore.clearDeployAlert()}
         data={chatData}
       />
     );
diff --git a/app/components/deploy/DeployAlert.tsx b/app/components/deploy/DeployAlert.tsx
new file mode 100644
index 0000000..adedb77
--- /dev/null
+++ b/app/components/deploy/DeployAlert.tsx
@@ -0,0 +1,197 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import type { DeployAlert } from '~/types/actions';
+
+interface DeployAlertProps {
+  alert: DeployAlert;
+  clearAlert: () => void;
+  postMessage: (message: string) => void;
+}
+
+export default function DeployChatAlert({ alert, clearAlert, postMessage }: DeployAlertProps) {
+  const { type, title, description, content, url, stage, buildStatus, deployStatus } = alert;
+
+  // Determine if we should show the deployment progress
+  const showProgress = stage && (buildStatus || deployStatus);
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2`}
+      >
+        <div className="flex items-start">
+          {/* Icon */}
+          <motion.div
+            className="flex-shrink-0"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            <div
+              className={classNames(
+                'text-xl',
+                type === 'success'
+                  ? 'i-ph:check-circle-duotone text-bolt-elements-icon-success'
+                  : type === 'error'
+                    ? 'i-ph:warning-duotone text-bolt-elements-button-danger-text'
+                    : 'i-ph:info-duotone text-bolt-elements-loader-progress',
+              )}
+            ></div>
+          </motion.div>
+          {/* Content */}
+          <div className="ml-3 flex-1">
+            <motion.h3
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className={`text-sm font-medium text-bolt-elements-textPrimary`}
+            >
+              {title}
+            </motion.h3>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className={`mt-2 text-sm text-bolt-elements-textSecondary`}
+            >
+              <p>{description}</p>
+
+              {/* Deployment Progress Visualization */}
+              {showProgress && (
+                <div className="mt-4 mb-2">
+                  <div className="flex items-center space-x-2 mb-3">
+                    {/* Build Step */}
+                    <div className="flex items-center">
+                      <div
+                        className={classNames(
+                          'w-6 h-6 rounded-full flex items-center justify-center',
+                          buildStatus === 'running'
+                            ? 'bg-bolt-elements-loader-progress'
+                            : buildStatus === 'complete'
+                              ? 'bg-bolt-elements-icon-success'
+                              : buildStatus === 'failed'
+                                ? 'bg-bolt-elements-button-danger-background'
+                                : 'bg-bolt-elements-textTertiary',
+                        )}
+                      >
+                        {buildStatus === 'running' ? (
+                          <div className="i-svg-spinners:90-ring-with-bg text-white text-xs"></div>
+                        ) : buildStatus === 'complete' ? (
+                          <div className="i-ph:check text-white text-xs"></div>
+                        ) : buildStatus === 'failed' ? (
+                          <div className="i-ph:x text-white text-xs"></div>
+                        ) : (
+                          <span className="text-white text-xs">1</span>
+                        )}
+                      </div>
+                      <span className="ml-2">Build</span>
+                    </div>
+
+                    {/* Connector Line */}
+                    <div
+                      className={classNames(
+                        'h-0.5 w-8',
+                        buildStatus === 'complete' ? 'bg-bolt-elements-icon-success' : 'bg-bolt-elements-textTertiary',
+                      )}
+                    ></div>
+
+                    {/* Deploy Step */}
+                    <div className="flex items-center">
+                      <div
+                        className={classNames(
+                          'w-6 h-6 rounded-full flex items-center justify-center',
+                          deployStatus === 'running'
+                            ? 'bg-bolt-elements-loader-progress'
+                            : deployStatus === 'complete'
+                              ? 'bg-bolt-elements-icon-success'
+                              : deployStatus === 'failed'
+                                ? 'bg-bolt-elements-button-danger-background'
+                                : 'bg-bolt-elements-textTertiary',
+                        )}
+                      >
+                        {deployStatus === 'running' ? (
+                          <div className="i-svg-spinners:90-ring-with-bg text-white text-xs"></div>
+                        ) : deployStatus === 'complete' ? (
+                          <div className="i-ph:check text-white text-xs"></div>
+                        ) : deployStatus === 'failed' ? (
+                          <div className="i-ph:x text-white text-xs"></div>
+                        ) : (
+                          <span className="text-white text-xs">2</span>
+                        )}
+                      </div>
+                      <span className="ml-2">Deploy</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {content && (
+                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
+                  {content}
+                </div>
+              )}
+              {url && type === 'success' && (
+                <div className="mt-2">
+                  <a
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-item-contentAccent hover:underline flex items-center"
+                  >
+                    <span className="mr-1">View deployed site</span>
+                    <div className="i-ph:arrow-square-out"></div>
+                  </a>
+                </div>
+              )}
+            </motion.div>
+
+            {/* Actions */}
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
+              <div className={classNames('flex gap-2')}>
+                {type === 'error' && (
+                  <button
+                    onClick={() =>
+                      postMessage(`*Fix this deployment error*\n\`\`\`\n${content || description}\n\`\`\`\n`)
+                    }
+                    className={classNames(
+                      `px-2 py-1.5 rounded-md text-sm font-medium`,
+                      'bg-bolt-elements-button-primary-background',
+                      'hover:bg-bolt-elements-button-primary-backgroundHover',
+                      'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',
+                      'text-bolt-elements-button-primary-text',
+                      'flex items-center gap-1.5',
+                    )}
+                  >
+                    <div className="i-ph:chat-circle-duotone"></div>
+                    Ask Bolt
+                  </button>
+                )}
+                <button
+                  onClick={clearAlert}
+                  className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-secondary-background',
+                    'hover:bg-bolt-elements-button-secondary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
+                    'text-bolt-elements-button-secondary-text',
+                  )}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/app/components/deploy/NetlifyDeploy.client.tsx b/app/components/deploy/NetlifyDeploy.client.tsx
index 7b7695a..f88751c 100644
--- a/app/components/deploy/NetlifyDeploy.client.tsx
+++ b/app/components/deploy/NetlifyDeploy.client.tsx
@@ -33,6 +33,21 @@ export function useNetlifyDeploy() {
         throw new Error('No active project found');
       }
 
+      // Create a deployment artifact for visual feedback
+      const deploymentId = `deploy-artifact`;
+      workbenchStore.addArtifact({
+        id: deploymentId,
+        messageId: deploymentId,
+        title: 'Netlify Deployment',
+        type: 'standalone',
+      });
+
+      const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
+
+      // Notify that build is starting
+      deployArtifact.runner.handleDeployAction('building', 'running', { source: 'netlify' });
+
+      // Set up build action
       const actionId = 'build-' + Date.now();
       const actionData: ActionCallbackData = {
         messageId: 'netlify build',
@@ -51,9 +66,17 @@ export function useNetlifyDeploy() {
       await artifact.runner.runAction(actionData);
 
       if (!artifact.runner.buildOutput) {
+        // Notify that build failed
+        deployArtifact.runner.handleDeployAction('building', 'failed', {
+          error: 'Build failed. Check the terminal for details.',
+          source: 'netlify',
+        });
         throw new Error('Build failed');
       }
 
+      // Notify that build succeeded and deployment is starting
+      deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'netlify' });
+
       // Get the build files
       const container = await webcontainer;
 
@@ -133,6 +156,12 @@ export function useNetlifyDeploy() {
 
       if (!response.ok || !data.deploy || !data.site) {
         console.error('Invalid deploy response:', data);
+
+        // Notify that deployment failed
+        deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+          error: data.error || 'Invalid deployment response',
+          source: 'netlify',
+        });
         throw new Error(data.error || 'Invalid deployment response');
       }
 
@@ -158,6 +187,11 @@ export function useNetlifyDeploy() {
           }
 
           if (deploymentStatus.state === 'error') {
+            // Notify that deployment failed
+            deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+              error: 'Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'),
+              source: 'netlify',
+            });
             throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
           }
 
@@ -171,6 +205,11 @@ export function useNetlifyDeploy() {
       }
 
       if (attempts >= maxAttempts) {
+        // Notify that deployment timed out
+        deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+          error: 'Deployment timed out',
+          source: 'netlify',
+        });
         throw new Error('Deployment timed out');
       }
 
@@ -179,6 +218,12 @@ export function useNetlifyDeploy() {
         localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
       }
 
+      // Notify that deployment completed successfully
+      deployArtifact.runner.handleDeployAction('complete', 'complete', {
+        url: deploymentStatus.ssl_url || deploymentStatus.url,
+        source: 'netlify',
+      });
+
       toast.success(
         <div>
           Deployed successfully!{' '}
diff --git a/app/components/deploy/VercelDeploy.client.tsx b/app/components/deploy/VercelDeploy.client.tsx
index 74952f8..a6b53a4 100644
--- a/app/components/deploy/VercelDeploy.client.tsx
+++ b/app/components/deploy/VercelDeploy.client.tsx
@@ -33,6 +33,20 @@ export function useVercelDeploy() {
         throw new Error('No active project found');
       }
 
+      // Create a deployment artifact for visual feedback
+      const deploymentId = `deploy-vercel-project`;
+      workbenchStore.addArtifact({
+        id: deploymentId,
+        messageId: deploymentId,
+        title: 'Vercel Deployment',
+        type: 'standalone',
+      });
+
+      const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
+
+      // Notify that build is starting
+      deployArtifact.runner.handleDeployAction('building', 'running', { source: 'vercel' });
+
       const actionId = 'build-' + Date.now();
       const actionData: ActionCallbackData = {
         messageId: 'vercel build',
@@ -51,9 +65,17 @@ export function useVercelDeploy() {
       await artifact.runner.runAction(actionData);
 
       if (!artifact.runner.buildOutput) {
+        // Notify that build failed
+        deployArtifact.runner.handleDeployAction('building', 'failed', {
+          error: 'Build failed. Check the terminal for details.',
+          source: 'vercel',
+        });
         throw new Error('Build failed');
       }
 
+      // Notify that build succeeded and deployment is starting
+      deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'vercel' });
+
       // Get the build files
       const container = await webcontainer;
 
@@ -133,6 +155,12 @@ export function useVercelDeploy() {
 
       if (!response.ok || !data.deploy || !data.project) {
         console.error('Invalid deploy response:', data);
+
+        // Notify that deployment failed
+        deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+          error: data.error || 'Invalid deployment response',
+          source: 'vercel',
+        });
         throw new Error(data.error || 'Invalid deployment response');
       }
 
@@ -140,6 +168,12 @@ export function useVercelDeploy() {
         localStorage.setItem(`vercel-project-${currentChatId}`, data.project.id);
       }
 
+      // Notify that deployment completed successfully
+      deployArtifact.runner.handleDeployAction('complete', 'complete', {
+        url: data.deploy.url,
+        source: 'vercel',
+      });
+
       toast.success(
         <div>
           Deployed successfully to Vercel!{' '}
diff --git a/app/lib/runtime/action-runner.ts b/app/lib/runtime/action-runner.ts
index a04a3de..a3436a9 100644
--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@@ -1,7 +1,7 @@
 import type { WebContainer } from '@webcontainer/api';
 import { path as nodePath } from '~/utils/path';
 import { atom, map, type MapStore } from 'nanostores';
-import type { ActionAlert, BoltAction, FileHistory, SupabaseAction, SupabaseAlert } from '~/types/actions';
+import type { ActionAlert, BoltAction, DeployAlert, FileHistory, SupabaseAction, SupabaseAlert } from '~/types/actions';
 import { createScopedLogger } from '~/utils/logger';
 import { unreachable } from '~/utils/unreachable';
 import type { ActionCallbackData } from './message-parser';
@@ -71,6 +71,7 @@ export class ActionRunner {
   actions: ActionsMap = map({});
   onAlert?: (alert: ActionAlert) => void;
   onSupabaseAlert?: (alert: SupabaseAlert) => void;
+  onDeployAlert?: (alert: DeployAlert) => void;
   buildOutput?: { path: string; exitCode: number; output: string };
 
   constructor(
@@ -78,11 +79,13 @@ export class ActionRunner {
     getShellTerminal: () => BoltShell,
     onAlert?: (alert: ActionAlert) => void,
     onSupabaseAlert?: (alert: SupabaseAlert) => void,
+    onDeployAlert?: (alert: DeployAlert) => void,
   ) {
     this.#webcontainer = webcontainerPromise;
     this.#shellTerminal = getShellTerminal;
     this.onAlert = onAlert;
     this.onSupabaseAlert = onSupabaseAlert;
+    this.onDeployAlert = onDeployAlert;
   }
 
   addAction(data: ActionCallbackData) {
@@ -366,6 +369,17 @@ export class ActionRunner {
       unreachable('Expected build action');
     }
 
+    // Trigger build started alert
+    this.onDeployAlert?.({
+      type: 'info',
+      title: 'Building Application',
+      description: 'Building your application...',
+      stage: 'building',
+      buildStatus: 'running',
+      deployStatus: 'pending',
+      source: 'netlify',
+    });
+
     const webcontainer = await this.#webcontainer;
 
     // Create a new terminal specifically for the build
@@ -383,11 +397,57 @@ export class ActionRunner {
     const exitCode = await buildProcess.exit;
 
     if (exitCode !== 0) {
+      // Trigger build failed alert
+      this.onDeployAlert?.({
+        type: 'error',
+        title: 'Build Failed',
+        description: 'Your application build failed',
+        content: output || 'No build output available',
+        stage: 'building',
+        buildStatus: 'failed',
+        deployStatus: 'pending',
+        source: 'netlify',
+      });
+
       throw new ActionCommandError('Build Failed', output || 'No Output Available');
     }
 
-    // Get the build output directory path
-    const buildDir = nodePath.join(webcontainer.workdir, 'dist');
+    // Trigger build success alert
+    this.onDeployAlert?.({
+      type: 'success',
+      title: 'Build Completed',
+      description: 'Your application was built successfully',
+      stage: 'deploying',
+      buildStatus: 'complete',
+      deployStatus: 'running',
+      source: 'netlify',
+    });
+
+    // Check for common build directories
+    const commonBuildDirs = ['dist', 'build', 'out', 'output', '.next', 'public'];
+
+    let buildDir = '';
+
+    // Try to find the first existing build directory
+    for (const dir of commonBuildDirs) {
+      const dirPath = nodePath.join(webcontainer.workdir, dir);
+
+      try {
+        await webcontainer.fs.readdir(dirPath);
+        buildDir = dirPath;
+        logger.debug(`Found build directory: ${buildDir}`);
+        break;
+      } catch (error) {
+        // Directory doesn't exist, try the next one
+        logger.debug(`Build directory ${dir} not found, trying next option. ${error}`);
+      }
+    }
+
+    // If no build directory was found, use the default (dist)
+    if (!buildDir) {
+      buildDir = nodePath.join(webcontainer.workdir, 'dist');
+      logger.debug(`No build directory found, defaulting to: ${buildDir}`);
+    }
 
     return {
       path: buildDir,
@@ -441,4 +501,55 @@ export class ActionRunner {
         throw new Error(`Unknown operation: ${operation}`);
     }
   }
+
+  // Add this method declaration to the class
+  handleDeployAction(
+    stage: 'building' | 'deploying' | 'complete',
+    status: ActionStatus,
+    details?: {
+      url?: string;
+      error?: string;
+      source?: 'netlify' | 'vercel' | 'github';
+    },
+  ): void {
+    if (!this.onDeployAlert) {
+      logger.debug('No deploy alert handler registered');
+      return;
+    }
+
+    const alertType = status === 'failed' ? 'error' : status === 'complete' ? 'success' : 'info';
+
+    const title =
+      stage === 'building'
+        ? 'Building Application'
+        : stage === 'deploying'
+          ? 'Deploying Application'
+          : 'Deployment Complete';
+
+    const description =
+      status === 'failed'
+        ? `${stage === 'building' ? 'Build' : 'Deployment'} failed`
+        : status === 'running'
+          ? `${stage === 'building' ? 'Building' : 'Deploying'} your application...`
+          : status === 'complete'
+            ? `${stage === 'building' ? 'Build' : 'Deployment'} completed successfully`
+            : `Preparing to ${stage === 'building' ? 'build' : 'deploy'} your application`;
+
+    const buildStatus =
+      stage === 'building' ? status : stage === 'deploying' || stage === 'complete' ? 'complete' : 'pending';
+
+    const deployStatus = stage === 'building' ? 'pending' : status;
+
+    this.onDeployAlert({
+      type: alertType,
+      title,
+      description,
+      content: details?.error || '',
+      url: details?.url,
+      stage,
+      buildStatus: buildStatus as any,
+      deployStatus: deployStatus as any,
+      source: details?.source || 'netlify',
+    });
+  }
 }
diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts
index 051d45a..68d83e2 100644
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -17,7 +17,7 @@ import { extractRelativePath } from '~/utils/diff';
 import { description } from '~/lib/persistence';
 import Cookies from 'js-cookie';
 import { createSampler } from '~/utils/sampler';
-import type { ActionAlert, SupabaseAlert } from '~/types/actions';
+import type { ActionAlert, DeployAlert, SupabaseAlert } from '~/types/actions';
 
 const { saveAs } = fileSaver;
 
@@ -52,6 +52,8 @@ export class WorkbenchStore {
     import.meta.hot?.data.unsavedFiles ?? atom<ActionAlert | undefined>(undefined);
   supabaseAlert: WritableAtom<SupabaseAlert | undefined> =
     import.meta.hot?.data.unsavedFiles ?? atom<ActionAlert | undefined>(undefined);
+  deployAlert: WritableAtom<DeployAlert | undefined> =
+    import.meta.hot?.data.unsavedFiles ?? atom<DeployAlert | undefined>(undefined);
   modifiedFiles = new Set<string>();
   artifactIdList: string[] = [];
   #globalExecutionQueue = Promise.resolve();
@@ -63,6 +65,7 @@ export class WorkbenchStore {
       import.meta.hot.data.currentView = this.currentView;
       import.meta.hot.data.actionAlert = this.actionAlert;
       import.meta.hot.data.supabaseAlert = this.supabaseAlert;
+      import.meta.hot.data.deployAlert = this.deployAlert;
 
       // Ensure binary files are properly preserved across hot reloads
       const filesMap = this.files.get();
@@ -125,6 +128,14 @@ export class WorkbenchStore {
     this.supabaseAlert.set(undefined);
   }
 
+  get DeployAlert() {
+    return this.deployAlert;
+  }
+
+  clearDeployAlert() {
+    this.deployAlert.set(undefined);
+  }
+
   toggleTerminal(value?: boolean) {
     this.#terminalStore.toggleTerminal(value);
   }
@@ -423,6 +434,13 @@ export class WorkbenchStore {
 
           this.supabaseAlert.set(alert);
         },
+        (alert) => {
+          if (this.#reloadedMessages.has(messageId)) {
+            return;
+          }
+
+          this.deployAlert.set(alert);
+        },
       ),
     });
   }
diff --git a/app/types/actions.ts b/app/types/actions.ts
index 63b8426..0e1411d 100644
--- a/app/types/actions.ts
+++ b/app/types/actions.ts
@@ -50,6 +50,18 @@ export interface SupabaseAlert {
   source?: 'supabase';
 }
 
+export interface DeployAlert {
+  type: 'success' | 'error' | 'info';
+  title: string;
+  description: string;
+  content?: string;
+  url?: string;
+  stage?: 'building' | 'deploying' | 'complete';
+  buildStatus?: 'pending' | 'running' | 'complete' | 'failed';
+  deployStatus?: 'pending' | 'running' | 'complete' | 'failed';
+  source?: 'vercel' | 'netlify' | 'github';
+}
+
 export interface FileHistory {
   originalContent: string;
   lastModified: number;