feat: gitLab Integration Implementation / github refactor / overal improvements (#1963)

* Add GitLab integration components

Introduced PushToGitLabDialog and GitlabConnection components to handle GitLab project connections and push functionality. Includes user authentication, project handling, and UI for seamless integration with GitLab.

* Add components for GitLab connection and push dialog

Introduce `GitlabConnection` and `PushToGitLabDialog` components to handle GitLab integration. These components allow users to connect their GitLab account, manage recent projects, and push code to a GitLab repository with detailed configurations and feedback.

* Fix GitLab personal access tokens link to use correct URL

* Update GitHub push call to use new pushToRepository method

* Enhance GitLab integration with performance improvements

- Add comprehensive caching system for repositories and user data
- Implement pagination and search/filter functionality with debouncing
- Add skeleton loaders and improved loading states
- Implement retry logic for API calls with exponential backoff
- Add background refresh capabilities
- Improve error handling and user feedback
- Optimize API calls to reduce loading times

* feat: implement GitLab integration with connection management and repository handling

- Add GitLab connection UI components
- Implement GitLab API service for repository operations
- Add GitLab connection store for state management
- Update existing connection components (Vercel, Netlify)
- Add repository listing and statistics display
- Refactor GitLab components into organized folder structure

* fix: resolve GitLab deployment issues and improve user experience

- Fix DialogTitle accessibility warnings for screen readers
- Remove CORS-problematic attributes from avatar images to prevent loading errors
- Enhance GitLab API error handling with detailed error messages
- Fix project creation settings to prevent initial commit conflicts
- Add automatic GitLab connection state initialization on app startup
- Improve deployment dialog UI with better error handling and user feedback
- Add GitLab deployment source type to action runner system
- Clean up deprecated push dialog files and consolidate deployment components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: implement GitHub clone repository dialog functionality

This commit fixes the missing GitHub repository selection dialog in the "Clone a repo" feature
by implementing the same elegant interface pattern used by GitLab.

Key Changes:
- Added onCloneRepository prop support to GitHubConnection component
- Updated RepositoryCard to generate proper GitHub clone URLs (https://github.com/{full_name}.git)
- Implemented full GitHub repository selection dialog in GitCloneButton.tsx
- Added proper dialog close handling after successful clone operations
- Maintained existing GitHub connection settings page functionality

Technical Details:
- Follows same component patterns as GitLab implementation
- Uses proper TypeScript interfaces for clone URL handling
- Includes professional dialog styling with loading states
- Supports repository search, pagination, and authentication flow

The GitHub clone experience now matches GitLab's functionality, providing users with
a unified and intuitive repository selection interface across both providers.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Clean up unused connection components

- Remove ConnectionForm.tsx (unused GitHub form component)
- Remove CreateBranchDialog.tsx (unused branch creation dialog)
- Remove RepositoryDialogContext.tsx (unused context provider)
- Remove empty components/ directory

These files were not referenced anywhere in the codebase and were leftover from development.

* Remove environment variables info section from ConnectionsTab

- Remove collapsible environment variables section
- Clean up unused state and imports
- Simplify the connections tab UI

* Reorganize connections folder structure

- Create netlify/ folder and move NetlifyConnection.tsx
- Create vercel/ folder and move VercelConnection.tsx
- Add index.ts files for both netlify and vercel folders
- Update imports in ConnectionsTab.tsx to use new folder structure
- All connection components now follow consistent folder organization

---------

Co-authored-by: Hayat Bourgi <hayat.bourgi@montyholding.com>
Co-authored-by: Hayat55 <53140162+Hayat55@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>

app/components/deploy/DeployButton.tsx

@@ -2,6 +2,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useStore } from '@nanostores/react';
 import { netlifyConnection } from '~/lib/stores/netlify';
 import { vercelConnection } from '~/lib/stores/vercel';
+import { isGitLabConnected } from '~/lib/stores/gitlabConnection';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { streamingState } from '~/lib/stores/streaming';
 import { classNames } from '~/utils/classNames';
@@ -11,29 +12,42 @@ import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.cli
 import { useVercelDeploy } from '~/components/deploy/VercelDeploy.client';
 import { useNetlifyDeploy } from '~/components/deploy/NetlifyDeploy.client';
 import { useGitHubDeploy } from '~/components/deploy/GitHubDeploy.client';
+import { useGitLabDeploy } from '~/components/deploy/GitLabDeploy.client';
 import { GitHubDeploymentDialog } from '~/components/deploy/GitHubDeploymentDialog';
+import { GitLabDeploymentDialog } from '~/components/deploy/GitLabDeploymentDialog';
 
 interface DeployButtonProps {
   onVercelDeploy?: () => Promise<void>;
   onNetlifyDeploy?: () => Promise<void>;
   onGitHubDeploy?: () => Promise<void>;
+  onGitLabDeploy?: () => Promise<void>;
 }
 
-export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy }: DeployButtonProps) => {
+export const DeployButton = ({
+  onVercelDeploy,
+  onNetlifyDeploy,
+  onGitHubDeploy,
+  onGitLabDeploy,
+}: DeployButtonProps) => {
   const netlifyConn = useStore(netlifyConnection);
   const vercelConn = useStore(vercelConnection);
+  const gitlabIsConnected = useStore(isGitLabConnected);
   const [activePreviewIndex] = useState(0);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
   const [isDeploying, setIsDeploying] = useState(false);
-  const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | 'github' | null>(null);
+  const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | 'github' | 'gitlab' | null>(null);
   const isStreaming = useStore(streamingState);
   const { handleVercelDeploy } = useVercelDeploy();
   const { handleNetlifyDeploy } = useNetlifyDeploy();
   const { handleGitHubDeploy } = useGitHubDeploy();
+  const { handleGitLabDeploy } = useGitLabDeploy();
   const [showGitHubDeploymentDialog, setShowGitHubDeploymentDialog] = useState(false);
+  const [showGitLabDeploymentDialog, setShowGitLabDeploymentDialog] = useState(false);
   const [githubDeploymentFiles, setGithubDeploymentFiles] = useState<Record<string, string> | null>(null);
+  const [gitlabDeploymentFiles, setGitlabDeploymentFiles] = useState<Record<string, string> | null>(null);
   const [githubProjectName, setGithubProjectName] = useState('');
+  const [gitlabProjectName, setGitlabProjectName] = useState('');
 
   const handleVercelDeployClick = async () => {
     setIsDeploying(true);
@@ -89,6 +103,28 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy }
     }
   };
 
+  const handleGitLabDeployClick = async () => {
+    setIsDeploying(true);
+    setDeployingTo('gitlab');
+
+    try {
+      if (onGitLabDeploy) {
+        await onGitLabDeploy();
+      } else {
+        const result = await handleGitLabDeploy();
+
+        if (result && result.success && result.files) {
+          setGitlabDeploymentFiles(result.files);
+          setGitlabProjectName(result.projectName);
+          setShowGitLabDeploymentDialog(true);
+        }
+      }
+    } finally {
+      setIsDeploying(false);
+      setDeployingTo(null);
+    }
+  };
+
   return (
     <>
       <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden text-sm">
@@ -178,6 +214,27 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy }
               <span className="mx-auto">Deploy to GitHub</span>
             </DropdownMenu.Item>
 
+            <DropdownMenu.Item
+              className={classNames(
+                'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                {
+                  'opacity-60 cursor-not-allowed': isDeploying || !activePreview || !gitlabIsConnected,
+                },
+              )}
+              disabled={isDeploying || !activePreview || !gitlabIsConnected}
+              onClick={handleGitLabDeployClick}
+            >
+              <img
+                className="w-5 h-5"
+                height="24"
+                width="24"
+                crossOrigin="anonymous"
+                src="https://cdn.simpleicons.org/gitlab"
+                alt="gitlab"
+              />
+              <span className="mx-auto">{!gitlabIsConnected ? 'No GitLab Account Connected' : 'Deploy to GitLab'}</span>
+            </DropdownMenu.Item>
+
             <DropdownMenu.Item
               disabled
               className="flex items-center w-full rounded-md px-4 py-2 text-sm text-bolt-elements-textTertiary gap-2 opacity-60 cursor-not-allowed"
@@ -205,6 +262,16 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy }
           files={githubDeploymentFiles}
         />
       )}
+
+      {/* GitLab Deployment Dialog */}
+      {showGitLabDeploymentDialog && gitlabDeploymentFiles && (
+        <GitLabDeploymentDialog
+          isOpen={showGitLabDeploymentDialog}
+          onClose={() => setShowGitLabDeploymentDialog(false)}
+          projectName={gitlabProjectName}
+          files={gitlabDeploymentFiles}
+        />
+      )}
     </>
   );
 };

app/components/deploy/GitHubDeploymentDialog.tsx

@@ -9,7 +9,7 @@ import type { GitHubUserResponse, GitHubRepoInfo } from '~/types/GitHub';
 import { logStore } from '~/lib/stores/logs';
 import { chatId } from '~/lib/persistence/useChatHistory';
 import { useStore } from '@nanostores/react';
-import { GitHubAuthDialog } from '~/components/@settings/tabs/connections/components/GitHubAuthDialog';
+import { AuthDialog as GitHubAuthDialog } from '~/components/@settings/tabs/connections/github/AuthDialog';
 import { SearchInput, EmptyState, StatusIndicator, Badge } from '~/components/ui';
 
 interface GitHubDeploymentDialogProps {

app/components/deploy/GitLabDeploy.client.tsx

@@ -0,0 +1,168 @@
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+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';
+import { getLocalStorage } from '~/lib/persistence/localStorage';
+
+export function useGitLabDeploy() {
+  const [isDeploying, setIsDeploying] = useState(false);
+  const currentChatId = useStore(chatId);
+
+  const handleGitLabDeploy = async () => {
+    const connection = getLocalStorage('gitlab_connection');
+
+    if (!connection?.token || !connection?.user) {
+      toast.error('Please connect your GitLab account in Settings > Connections first');
+      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');
+      }
+
+      // Create a deployment artifact for visual feedback
+      const deploymentId = `deploy-gitlab-project`;
+      workbenchStore.addArtifact({
+        id: deploymentId,
+        messageId: deploymentId,
+        title: 'GitLab Deployment',
+        type: 'standalone',
+      });
+
+      const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
+
+      // Notify that build is starting
+      deployArtifact.runner.handleDeployAction('building', 'running', { source: 'gitlab' });
+
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: 'gitlab 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) {
+        // Notify that build failed
+        deployArtifact.runner.handleDeployAction('building', 'failed', {
+          error: 'Build failed. Check the terminal for details.',
+          source: 'gitlab',
+        });
+        throw new Error('Build failed');
+      }
+
+      // Notify that build succeeded and deployment preparation is starting
+      deployArtifact.runner.handleDeployAction('deploying', 'running', {
+        source: 'gitlab',
+      });
+
+      // Get all project files instead of just the build directory since we're deploying to a repository
+      const container = await webcontainer;
+
+      // Get all files recursively - we'll deploy the entire project, not just the build directory
+      async function getAllFiles(dirPath: string, basePath: 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);
+
+          // Create a relative path without the leading slash for GitLab
+          const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name;
+
+          // Skip node_modules, .git directories and other common excludes
+          if (
+            entry.isDirectory() &&
+            (entry.name === 'node_modules' ||
+              entry.name === '.git' ||
+              entry.name === 'dist' ||
+              entry.name === 'build' ||
+              entry.name === '.cache' ||
+              entry.name === '.next')
+          ) {
+            continue;
+          }
+
+          if (entry.isFile()) {
+            // Skip binary files, large files and other common excludes
+            if (entry.name.endsWith('.DS_Store') || entry.name.endsWith('.log') || entry.name.startsWith('.env')) {
+              continue;
+            }
+
+            try {
+              const content = await container.fs.readFile(fullPath, 'utf-8');
+
+              // Store the file with its relative path, not the full system path
+              files[relativePath] = content;
+            } catch (error) {
+              console.warn(`Could not read file ${fullPath}:`, error);
+              continue;
+            }
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath, relativePath);
+            Object.assign(files, subFiles);
+          }
+        }
+
+        return files;
+      }
+
+      const fileContents = await getAllFiles('/');
+
+      /*
+       * Show GitLab deployment dialog here - it will handle the actual deployment
+       * and will receive these files to deploy
+       */
+
+      /*
+       * For now, we'll just complete the deployment with a success message
+       * Notify that deployment preparation is complete
+       */
+      deployArtifact.runner.handleDeployAction('deploying', 'complete', {
+        source: 'gitlab',
+      });
+
+      return {
+        success: true,
+        files: fileContents,
+        projectName: artifact.title || 'bolt-project',
+      };
+    } catch (err) {
+      console.error('GitLab deploy error:', err);
+      toast.error(err instanceof Error ? err.message : 'GitLab deployment preparation failed');
+
+      return false;
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  return {
+    isDeploying,
+    handleGitLabDeploy,
+    isConnected: !!getLocalStorage('gitlab_connection')?.user,
+  };
+}

app/components/deploy/GitLabDeploymentDialog.tsx

@@ -0,0 +1,729 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { getLocalStorage } from '~/lib/persistence/localStorage';
+import type { GitLabUserResponse, GitLabProjectInfo } from '~/types/GitLab';
+import { logStore } from '~/lib/stores/logs';
+import { chatId } from '~/lib/persistence/useChatHistory';
+import { useStore } from '@nanostores/react';
+import { GitLabApiService } from '~/lib/services/gitlabApiService';
+import { SearchInput, EmptyState, StatusIndicator, Badge } from '~/components/ui';
+import { formatSize } from '~/utils/formatSize';
+
+interface GitLabDeploymentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  projectName: string;
+  files: Record<string, string>;
+}
+
+export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }: GitLabDeploymentDialogProps) {
+  const [repoName, setRepoName] = useState('');
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [user, setUser] = useState<GitLabUserResponse | null>(null);
+  const [recentRepos, setRecentRepos] = useState<GitLabProjectInfo[]>([]);
+  const [filteredRepos, setFilteredRepos] = useState<GitLabProjectInfo[]>([]);
+  const [repoSearchQuery, setRepoSearchQuery] = useState('');
+  const [isFetchingRepos, setIsFetchingRepos] = useState(false);
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
+  const [createdRepoUrl, setCreatedRepoUrl] = useState('');
+  const [pushedFiles, setPushedFiles] = useState<{ path: string; size: number }[]>([]);
+  const currentChatId = useStore(chatId);
+
+  // Load GitLab connection on mount
+  useEffect(() => {
+    if (isOpen) {
+      const connection = getLocalStorage('gitlab_connection');
+
+      // Set a default repository name based on the project name
+      setRepoName(projectName.replace(/\s+/g, '-').toLowerCase());
+
+      if (connection?.user && connection?.token) {
+        setUser(connection.user);
+
+        // Only fetch if we have both user and token
+        if (connection.token.trim()) {
+          fetchRecentRepos(connection.token, connection.gitlabUrl || 'https://gitlab.com');
+        }
+      }
+    }
+  }, [isOpen, projectName]);
+
+  // Filter repositories based on search query
+  useEffect(() => {
+    if (recentRepos.length === 0) {
+      setFilteredRepos([]);
+      return;
+    }
+
+    if (!repoSearchQuery.trim()) {
+      setFilteredRepos(recentRepos);
+      return;
+    }
+
+    const query = repoSearchQuery.toLowerCase().trim();
+    const filtered = recentRepos.filter(
+      (repo) =>
+        repo.name.toLowerCase().includes(query) || (repo.description && repo.description.toLowerCase().includes(query)),
+    );
+
+    setFilteredRepos(filtered);
+  }, [recentRepos, repoSearchQuery]);
+
+  const fetchRecentRepos = async (token: string, gitlabUrl = 'https://gitlab.com') => {
+    if (!token) {
+      logStore.logError('No GitLab token available');
+      toast.error('GitLab authentication required');
+
+      return;
+    }
+
+    try {
+      setIsFetchingRepos(true);
+
+      const apiService = new GitLabApiService(token, gitlabUrl);
+      const repos = await apiService.getProjects();
+      setRecentRepos(repos);
+    } catch (error) {
+      console.error('Failed to fetch GitLab repositories:', error);
+      logStore.logError('Failed to fetch GitLab repositories', { error });
+      toast.error('Failed to fetch recent repositories');
+    } finally {
+      setIsFetchingRepos(false);
+    }
+  };
+
+  // Function to create a new repository or push to an existing one
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const connection = getLocalStorage('gitlab_connection');
+
+    if (!connection?.token || !connection?.user) {
+      toast.error('Please connect your GitLab account in Settings > Connections first');
+      return;
+    }
+
+    if (!repoName.trim()) {
+      toast.error('Repository name is required');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const gitlabUrl = connection.gitlabUrl || 'https://gitlab.com';
+      const apiService = new GitLabApiService(connection.token, gitlabUrl);
+
+      // Check if project exists
+      const projectPath = `${connection.user.username}/${repoName}`;
+      const existingProject = await apiService.getProjectByPath(projectPath);
+      const projectExists = existingProject !== null;
+
+      if (projectExists && existingProject) {
+        // Confirm overwrite
+        const visibilityChange =
+          existingProject.visibility !== (isPrivate ? 'private' : 'public')
+            ? `\n\nThis will also change the repository from ${existingProject.visibility} to ${isPrivate ? 'private' : 'public'}.`
+            : '';
+
+        const confirmOverwrite = window.confirm(
+          `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.${visibilityChange}`,
+        );
+
+        if (!confirmOverwrite) {
+          setIsLoading(false);
+          return;
+        }
+
+        // Update visibility if needed
+        if (existingProject.visibility !== (isPrivate ? 'private' : 'public')) {
+          toast.info('Updating repository visibility...');
+          await apiService.updateProjectVisibility(existingProject.id, isPrivate ? 'private' : 'public');
+        }
+
+        // Update project with files
+        toast.info('Uploading files to existing repository...');
+        await apiService.updateProjectWithFiles(existingProject.id, files);
+        setCreatedRepoUrl(existingProject.http_url_to_repo);
+        toast.success('Repository updated successfully!');
+      } else {
+        // Create new project with files
+        toast.info('Creating new repository...');
+
+        const newProject = await apiService.createProjectWithFiles(repoName, isPrivate, files);
+        setCreatedRepoUrl(newProject.http_url_to_repo);
+        toast.success('Repository created successfully!');
+      }
+
+      // Set pushed files for display
+      const fileList = Object.entries(files).map(([filePath, content]) => ({
+        path: filePath,
+        size: new TextEncoder().encode(content).length,
+      }));
+
+      setPushedFiles(fileList);
+      setShowSuccessDialog(true);
+
+      // Save repository info
+      localStorage.setItem(
+        `gitlab-repo-${currentChatId}`,
+        JSON.stringify({
+          owner: connection.user.username,
+          name: repoName,
+          url: createdRepoUrl,
+        }),
+      );
+
+      logStore.logInfo('GitLab deployment completed successfully', {
+        type: 'system',
+        message: `Successfully deployed ${fileList.length} files to ${projectExists ? 'existing' : 'new'} GitLab repository: ${projectPath}`,
+        repoName,
+        projectPath,
+        filesCount: fileList.length,
+        isNewProject: !projectExists,
+      });
+    } catch (error) {
+      console.error('Error pushing to GitLab:', error);
+      logStore.logError('GitLab deployment failed', {
+        error,
+        repoName,
+        projectPath: `${connection.user.username}/${repoName}`,
+      });
+
+      // Provide specific error messages based on error type
+      let errorMessage = 'Failed to push to GitLab';
+
+      if (error instanceof Error) {
+        const errorMsg = error.message.toLowerCase();
+
+        if (errorMsg.includes('404') || errorMsg.includes('not found')) {
+          errorMessage =
+            'Repository or GitLab instance not found. Please check your GitLab URL and repository permissions.';
+        } else if (errorMsg.includes('401') || errorMsg.includes('unauthorized')) {
+          errorMessage = 'GitLab authentication failed. Please check your access token and permissions.';
+        } else if (errorMsg.includes('403') || errorMsg.includes('forbidden')) {
+          errorMessage =
+            'Access denied. Your GitLab token may not have sufficient permissions to create/modify repositories.';
+        } else if (errorMsg.includes('network') || errorMsg.includes('fetch')) {
+          errorMessage = 'Network error. Please check your internet connection and try again.';
+        } else if (errorMsg.includes('timeout')) {
+          errorMessage = 'Request timed out. Please try again or check your connection.';
+        } else if (errorMsg.includes('rate limit')) {
+          errorMessage = 'GitLab API rate limit exceeded. Please wait a moment and try again.';
+        } else {
+          errorMessage = `GitLab error: ${error.message}`;
+        }
+      }
+
+      toast.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setRepoName('');
+    setIsPrivate(false);
+    setShowSuccessDialog(false);
+    setCreatedRepoUrl('');
+    onClose();
+  };
+
+  // Success Dialog
+  if (showSuccessDialog) {
+    return (
+      <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+          <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+              className="w-[90vw] md:w-[600px] max-h-[85vh] overflow-y-auto"
+            >
+              <Dialog.Content
+                className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
+                aria-describedby="success-dialog-description"
+              >
+                <Dialog.Title className="sr-only">Successfully pushed to GitLab</Dialog.Title>
+                <div className="p-6 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500">
+                        <div className="i-ph:check-circle w-5 h-5" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                          Successfully pushed to GitLab
+                        </h3>
+                        <p
+                          id="success-dialog-description"
+                          className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                        >
+                          Your code is now available on GitLab
+                        </p>
+                      </div>
+                    </div>
+                    <Dialog.Close asChild>
+                      <button
+                        onClick={handleClose}
+                        className="p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                      >
+                        <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+                        <span className="sr-only">Close dialog</span>
+                      </button>
+                    </Dialog.Close>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-4 text-left border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2 flex items-center gap-2">
+                      <span className="i-ph:gitlab-logo w-4 h-4 text-orange-500" />
+                      Repository URL
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <code className="flex-1 text-sm bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 px-3 py-2 rounded border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark font-mono">
+                        {createdRepoUrl}
+                      </code>
+                      <motion.button
+                        onClick={() => {
+                          navigator.clipboard.writeText(createdRepoUrl);
+                          toast.success('URL copied to clipboard');
+                        }}
+                        className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                      >
+                        <div className="i-ph:copy w-4 h-4" />
+                      </motion.button>
+                    </div>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2 flex items-center gap-2">
+                      <span className="i-ph:files w-4 h-4 text-purple-500" />
+                      Pushed Files ({pushedFiles.length})
+                    </p>
+                    <div className="max-h-[200px] overflow-y-auto custom-scrollbar pr-2">
+                      {pushedFiles.slice(0, 100).map((file) => (
+                        <div
+                          key={file.path}
+                          className="flex items-center justify-between py-1.5 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark border-b border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 last:border-0"
+                        >
+                          <span className="font-mono truncate flex-1 text-xs">{file.path}</span>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
+                            {formatSize(file.size)}
+                          </span>
+                        </div>
+                      ))}
+                      {pushedFiles.length > 100 && (
+                        <div className="py-2 text-center text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                          +{pushedFiles.length - 100} more files
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-2 pt-2">
+                    <motion.a
+                      href={createdRepoUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 text-sm inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:gitlab-logo w-4 h-4" />
+                      View Repository
+                    </motion.a>
+                    <motion.button
+                      onClick={() => {
+                        navigator.clipboard.writeText(createdRepoUrl);
+                        toast.success('URL copied to clipboard');
+                      }}
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm inline-flex items-center gap-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:copy w-4 h-4" />
+                      Copy URL
+                    </motion.button>
+                    <motion.button
+                      onClick={handleClose}
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      Close
+                    </motion.button>
+                  </div>
+                </div>
+              </Dialog.Content>
+            </motion.div>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+          <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+              className="w-[90vw] md:w-[500px]"
+            >
+              <Dialog.Content
+                className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg p-6 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
+                aria-describedby="connection-required-description"
+              >
+                <Dialog.Title className="sr-only">GitLab Connection Required</Dialog.Title>
+                <div className="relative text-center space-y-4">
+                  <Dialog.Close asChild>
+                    <button
+                      onClick={handleClose}
+                      className="absolute right-0 top-0 p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                    >
+                      <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+                      <span className="sr-only">Close dialog</span>
+                    </button>
+                  </Dialog.Close>
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="mx-auto w-16 h-16 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-orange-500"
+                  >
+                    <div className="i-ph:gitlab-logo w-8 h-8" />
+                  </motion.div>
+                  <h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                    GitLab Connection Required
+                  </h3>
+                  <p
+                    id="connection-required-description"
+                    className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark max-w-md mx-auto"
+                  >
+                    To deploy your code to GitLab, you need to connect your GitLab account first.
+                  </p>
+                  <div className="pt-2 flex justify-center gap-3">
+                    <motion.button
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-sm hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                      onClick={handleClose}
+                    >
+                      Close
+                    </motion.button>
+                    <motion.a
+                      href="/settings/connections"
+                      className="px-4 py-2 rounded-lg bg-orange-500 text-white text-sm hover:bg-orange-600 inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:gear" />
+                      Go to Settings
+                    </motion.a>
+                  </div>
+                </div>
+              </Dialog.Content>
+            </motion.div>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="w-[90vw] md:w-[500px]"
+          >
+            <Dialog.Content
+              className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
+              aria-describedby="push-dialog-description"
+            >
+              <div className="p-6">
+                <div className="flex items-center gap-4 mb-6">
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-orange-500"
+                  >
+                    <div className="i-ph:gitlab-logo w-5 h-5" />
+                  </motion.div>
+                  <div>
+                    <Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                      Deploy to GitLab
+                    </Dialog.Title>
+                    <p
+                      id="push-dialog-description"
+                      className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                    >
+                      Deploy your code to a new or existing GitLab repository
+                    </p>
+                  </div>
+                  <Dialog.Close asChild>
+                    <button
+                      onClick={handleClose}
+                      className="ml-auto p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                    >
+                      <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+                      <span className="sr-only">Close dialog</span>
+                    </button>
+                  </Dialog.Close>
+                </div>
+
+                <div className="flex items-center gap-3 mb-6 p-4 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                  <div className="relative">
+                    {user.avatar_url && user.avatar_url !== 'null' && user.avatar_url !== '' ? (
+                      <img
+                        src={user.avatar_url}
+                        alt={user.username}
+                        className="w-10 h-10 rounded-full object-cover"
+                        onError={(e) => {
+                          // Handle CORS/COEP errors by hiding the image and showing fallback
+                          const target = e.target as HTMLImageElement;
+                          target.style.display = 'none';
+
+                          const fallback = target.parentElement?.querySelector('.avatar-fallback') as HTMLElement;
+
+                          if (fallback) {
+                            fallback.style.display = 'flex';
+                          }
+                        }}
+                        onLoad={(e) => {
+                          // Ensure fallback is hidden when image loads successfully
+                          const target = e.target as HTMLImageElement;
+
+                          const fallback = target.parentElement?.querySelector('.avatar-fallback') as HTMLElement;
+
+                          if (fallback) {
+                            fallback.style.display = 'none';
+                          }
+                        }}
+                      />
+                    ) : null}
+
+                    <div
+                      className="avatar-fallback w-10 h-10 rounded-full bg-bolt-elements-background-depth-4 flex items-center justify-center text-bolt-elements-textSecondary font-semibold text-sm"
+                      style={{
+                        display:
+                          user.avatar_url && user.avatar_url !== 'null' && user.avatar_url !== '' ? 'none' : 'flex',
+                      }}
+                    >
+                      {user.name ? (
+                        user.name.charAt(0).toUpperCase()
+                      ) : user.username ? (
+                        user.username.charAt(0).toUpperCase()
+                      ) : (
+                        <div className="i-ph:user w-5 h-5" />
+                      )}
+                    </div>
+                    <div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center text-white">
+                      <div className="i-ph:gitlab-logo w-3 h-3" />
+                    </div>
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                      {user.name || user.username}
+                    </p>
+                    <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                      @{user.username}
+                    </p>
+                  </div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="space-y-2">
+                    <label
+                      htmlFor="repoName"
+                      className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                    >
+                      Repository Name
+                    </label>
+                    <div className="relative">
+                      <div className="absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+                        <span className="i-ph:git-branch w-4 h-4" />
+                      </div>
+                      <input
+                        id="repoName"
+                        type="text"
+                        value={repoName}
+                        onChange={(e) => setRepoName(e.target.value)}
+                        placeholder="my-awesome-project"
+                        className="w-full pl-10 px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark placeholder-bolt-elements-textTertiary dark:placeholder-bolt-elements-textTertiary-dark focus:outline-none focus:ring-2 focus:ring-orange-500"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between mb-2">
+                      <label className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                        Recent Repositories
+                      </label>
+                      <span className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+                        {filteredRepos.length} of {recentRepos.length}
+                      </span>
+                    </div>
+
+                    <div className="mb-2">
+                      <SearchInput
+                        placeholder="Search repositories..."
+                        value={repoSearchQuery}
+                        onChange={(e) => setRepoSearchQuery(e.target.value)}
+                        onClear={() => setRepoSearchQuery('')}
+                        className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-sm"
+                      />
+                    </div>
+
+                    {recentRepos.length === 0 && !isFetchingRepos ? (
+                      <EmptyState
+                        icon="i-ph:gitlab-logo"
+                        title="No repositories found"
+                        description="We couldn't find any repositories in your GitLab account."
+                        variant="compact"
+                      />
+                    ) : (
+                      <div className="space-y-2 max-h-[200px] overflow-y-auto pr-2 custom-scrollbar">
+                        {filteredRepos.length === 0 && repoSearchQuery.trim() !== '' ? (
+                          <EmptyState
+                            icon="i-ph:magnifying-glass"
+                            title="No matching repositories"
+                            description="Try a different search term"
+                            variant="compact"
+                          />
+                        ) : (
+                          filteredRepos.map((repo) => (
+                            <motion.button
+                              key={repo.id}
+                              type="button"
+                              onClick={() => setRepoName(repo.name)}
+                              className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-orange-500/30"
+                              whileHover={{ scale: 1.01 }}
+                              whileTap={{ scale: 0.99 }}
+                            >
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                  <div className="i-ph:git-branch w-4 h-4 text-orange-500" />
+                                  <span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark group-hover:text-orange-500">
+                                    {repo.name}
+                                  </span>
+                                </div>
+                                {repo.visibility === 'private' && (
+                                  <Badge variant="primary" size="sm" icon="i-ph:lock w-3 h-3">
+                                    Private
+                                  </Badge>
+                                )}
+                              </div>
+                              {repo.description && (
+                                <p className="mt-1 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
+                                  {repo.description}
+                                </p>
+                              )}
+                              <div className="mt-2 flex items-center gap-2 flex-wrap">
+                                <Badge variant="subtle" size="sm" icon="i-ph:star w-3 h-3">
+                                  {repo.star_count.toLocaleString()}
+                                </Badge>
+                                <Badge variant="subtle" size="sm" icon="i-ph:git-fork w-3 h-3">
+                                  {repo.forks_count.toLocaleString()}
+                                </Badge>
+                                <Badge variant="subtle" size="sm" icon="i-ph:clock w-3 h-3">
+                                  {new Date(repo.updated_at).toLocaleDateString()}
+                                </Badge>
+                              </div>
+                            </motion.button>
+                          ))
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {isFetchingRepos && (
+                    <div className="flex items-center justify-center py-4">
+                      <StatusIndicator status="loading" pulse={true} label="Loading repositories..." />
+                    </div>
+                  )}
+
+                  <div className="p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        id="private"
+                        checked={isPrivate}
+                        onChange={(e) => setIsPrivate(e.target.checked)}
+                        className="rounded border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-orange-500 focus:ring-orange-500 dark:bg-bolt-elements-background-depth-3"
+                      />
+                      <label
+                        htmlFor="private"
+                        className="text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                      >
+                        Make repository private
+                      </label>
+                    </div>
+                    <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark mt-2 ml-6">
+                      Private repositories are only visible to you and people you share them with
+                    </p>
+                  </div>
+
+                  <div className="pt-4 flex gap-2">
+                    <motion.button
+                      type="button"
+                      onClick={handleClose}
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      Cancel
+                    </motion.button>
+                    <motion.button
+                      type="submit"
+                      disabled={isLoading}
+                      className={classNames(
+                        'flex-1 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 text-sm inline-flex items-center justify-center gap-2',
+                        isLoading ? 'opacity-50 cursor-not-allowed' : '',
+                      )}
+                      whileHover={!isLoading ? { scale: 1.02 } : {}}
+                      whileTap={!isLoading ? { scale: 0.98 } : {}}
+                    >
+                      {isLoading ? (
+                        <>
+                          <div className="i-ph:spinner-gap animate-spin w-4 h-4" />
+                          Deploying...
+                        </>
+                      ) : (
+                        <>
+                          <div className="i-ph:gitlab-logo w-4 h-4" />
+                          Deploy to GitLab
+                        </>
+                      )}
+                    </motion.button>
+                  </div>
+                </form>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}