From 4ca535b9d19dd5f47904ffd65469bfc3d8bc1c7d Mon Sep 17 00:00:00 2001
From: Stijnus <72551117+Stijnus@users.noreply.github.com>
Date: Mon, 8 Sep 2025 19:29:12 +0200
Subject: [PATCH] feat: comprehensive service integration refactor with
 enhanced tabs architecture (#1978)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add service tabs refactor with GitHub, GitLab, Supabase, Vercel, and Netlify integration

This commit introduces a comprehensive refactor of the connections system,
replacing the single connections tab with dedicated service integration tabs:

✨ New Service Tabs:
- GitHub Tab: Complete integration with repository management, stats, and API
- GitLab Tab: GitLab project integration and management
- Supabase Tab: Database project management with comprehensive analytics
- Vercel Tab: Project deployment management and monitoring
- Netlify Tab: Site deployment and build management

🔧 Supporting Infrastructure:
- Enhanced store management for each service with auto-connect via env vars
- API routes for secure server-side token handling and data fetching
- Updated TypeScript types with missing properties and interfaces
- Comprehensive hooks for service connections and state management
- Security utilities for API endpoint validation

🎨 UI/UX Improvements:
- Individual service tabs with tailored functionality
- Motion animations and improved loading states
- Connection testing and health monitoring
- Advanced analytics dashboards for each service
- Consistent design patterns across all service tabs

🛠️ Technical Changes:
- Removed legacy connection tab in favor of individual service tabs
- Updated tab configuration and routing system
- Added comprehensive error handling and loading states
- Enhanced type safety with extended interfaces
- Implemented environment variable auto-connection features

Note: Some TypeScript errors remain and will need to be resolved in follow-up commits.
The dev server runs successfully and the service tabs are functional.

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

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

* feat: comprehensive service integration refactor with enhanced tabs architecture

Major architectural improvements to service integrations:

**Service Integration Refactor:**
- Complete restructure of service connection tabs (GitHub, GitLab, Vercel, Netlify, Supabase)
- Migrated from centralized ConnectionsTab to dedicated service-specific tabs
- Added shared service integration components for consistent UX
- Implemented auto-connection feature using environment variables

**New Components & Architecture:**
- ServiceIntegrationLayout for consistent service tab structure
- ConnectionStatus, ServiceCard components for reusable UI patterns
- BranchSelector component for repository branch management
- Enhanced authentication dialogs with improved error handling

**API & Backend Enhancements:**
- New API endpoints: github-branches, gitlab-branches, gitlab-projects, vercel-user
- Enhanced GitLab API service with comprehensive project management
- Improved connection testing hooks (useConnectionTest)
- Better error handling and rate limiting across all services

**Configuration & Environment:**
- Updated .env.example with comprehensive service integration guides
- Added auto-connection support for all major services
- Improved development and production environment configurations
- Enhanced tab management with proper service icons

**Code Quality & TypeScript:**
- Fixed all TypeScript errors across service integration components
- Enhanced type definitions for Vercel, Supabase, and other service integrations
- Improved type safety with proper optional chaining and type assertions
- Better separation of concerns between UI and business logic

**Removed Legacy Code:**
- Removed redundant connection components and consolidated into service tabs
- Cleaned up unused imports and deprecated connection patterns
- Streamlined authentication flows across all services

This refactor provides a more maintainable, scalable architecture for service integrations
while significantly improving the user experience for managing external connections.

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

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

* refactor: clean up dead code and consolidate utilities

- Remove legacy .eslintrc.json (replaced by flat config)
- Remove duplicate app/utils/types.ts (unused type definitions)
- Remove app/utils/cn.ts and consolidate with classNames utility
- Clean up unused ServiceErrorHandler class implementation
- Enhance classNames utility to support boolean values
- Update GlowingEffect.tsx to use consolidated classNames utility

Removes ~150+ lines of unused code while maintaining all functionality.

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

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

* Simplify terminal health checks and improve project setup

Removed aggressive health checking and reconnection logic from TerminalManager to prevent issues with terminal responsiveness. Updated TerminalTabs to remove onReconnect handlers. Enhanced projectCommands utility to generate non-interactive setup commands and detect shadcn projects, improving automation and reliability of project setup.

* fix: resolve GitLab deployment issues and enhance GitHub deployment reliability

GitLab Deployment Fixes:
- Fix COEP header issue for avatar images by adding crossOrigin and referrerPolicy attributes
- Implement repository name sanitization to handle special characters and ensure GitLab compliance
- Enhance error handling with detailed validation error parsing and user-friendly messages
- Add explicit path field and description to project creation requests
- Improve URL encoding and project path resolution for proper API calls
- Add graceful file commit handling with timeout and error recovery

GitHub Deployment Enhancements:
- Add comprehensive repository name validation and sanitization
- Implement real-time feedback for invalid characters in repository name input
- Enhance error handling with specific error types and retry suggestions
- Improve user experience with better error messages and validation feedback
- Add repository name length limits and character restrictions
- Show sanitized name preview to users before submission

General Improvements:
- Add GitLabAuthDialog component for improved authentication flow
- Enhance logging and debugging capabilities for deployment operations
- Improve accessibility with proper dialog titles and descriptions
- Add better user notifications for name sanitization and validation issues

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

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

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 .env.example                                  |  133 +-
 .env.production                               |   29 +-
 .eslintrc.json                                |   15 -
 .../@settings/core/ControlPanel.tsx           |   36 +-
 app/components/@settings/core/constants.ts    |   57 -
 app/components/@settings/core/constants.tsx   |  108 ++
 app/components/@settings/core/types.ts        |   27 +-
 .../shared/components/DraggableTabList.tsx    |  163 --
 .../@settings/shared/components/TabTile.tsx   |   24 +-
 .../service-integration/ConnectionForm.tsx    |  193 +++
 .../ConnectionTestIndicator.tsx               |   60 +
 .../shared/service-integration/ErrorState.tsx |  102 ++
 .../service-integration/LoadingState.tsx      |   94 ++
 .../service-integration/ServiceHeader.tsx     |   72 +
 .../shared/service-integration/index.ts       |    6 +
 .../tabs/connections/ConnectionsTab.tsx       |   73 -
 .../tabs/connections/github/AuthDialog.tsx    |  153 --
 .../connections/github/GitHubConnection.tsx   |  276 ----
 .../connections/github/RepositoryCard.tsx     |  110 --
 .../connections/github/RepositoryList.tsx     |  144 --
 .../tabs/connections/github/StatsDisplay.tsx  |  161 --
 .../tabs/connections/github/index.ts          |    5 -
 .../connections/gitlab/GitLabConnection.tsx   |  389 -----
 .../@settings/tabs/github/GitHubTab.tsx       |  281 ++++
 .../github/components/GitHubAuthDialog.tsx    |  173 ++
 .../github/components/GitHubCacheManager.tsx  |  367 +++++
 .../github/components/GitHubConnection.tsx    |  233 +++
 .../github/components/GitHubErrorBoundary.tsx |  105 ++
 .../components/GitHubProgressiveLoader.tsx    |  266 ++++
 .../components/GitHubRepositoryCard.tsx       |  121 ++
 .../components/GitHubRepositorySelector.tsx   |  312 ++++
 .../tabs/github/components/GitHubStats.tsx    |  291 ++++
 .../github/components/GitHubUserProfile.tsx   |   46 +
 .../shared/GitHubStateIndicators.tsx          |  264 ++++
 .../components/shared/RepositoryCard.tsx      |  361 +++++
 .../tabs/github/components/shared/index.ts    |   11 +
 .../@settings/tabs/gitlab/GitLabTab.tsx       |  305 ++++
 .../gitlab/components/GitLabAuthDialog.tsx    |  186 +++
 .../gitlab/components/GitLabConnection.tsx    |  253 +++
 .../components/GitLabRepositorySelector.tsx   |  358 +++++
 .../components}/RepositoryCard.tsx            |    0
 .../components}/RepositoryList.tsx            |    0
 .../components}/StatsDisplay.tsx              |    0
 .../gitlab => gitlab/components}/index.ts     |    0
 .../@settings/tabs/netlify/NetlifyTab.tsx     | 1393 +++++++++++++++++
 .../components}/NetlifyConnection.tsx         |  235 ++-
 .../netlify => netlify/components}/index.ts   |    0
 .../providers/local/LocalProvidersTab.new.tsx |  556 -------
 .../@settings/tabs/supabase/SupabaseTab.tsx   | 1089 +++++++++++++
 .../@settings/tabs/vercel/VercelTab.tsx       |  909 +++++++++++
 .../components}/VercelConnection.tsx          |    0
 .../vercel => vercel/components}/index.ts     |    0
 app/components/chat/GitCloneButton.tsx        |   11 +-
 .../deploy/GitHubDeploymentDialog.tsx         |  157 +-
 .../deploy/GitLabDeploymentDialog.tsx         |   61 +-
 app/components/ui/BranchSelector.tsx          |  270 ++++
 app/components/ui/GlowingEffect.tsx           |    8 +-
 .../workbench/terminal/TerminalManager.tsx    |  131 +-
 .../workbench/terminal/TerminalTabs.tsx       |   14 -
 app/lib/hooks/index.ts                        |    6 +
 app/lib/hooks/useConnectionTest.ts            |   63 +
 app/lib/hooks/useGitHubAPI.ts                 |    6 +
 app/lib/hooks/useGitHubConnection.ts          |  250 +++
 app/lib/hooks/useGitHubStats.ts               |  321 ++++
 app/lib/hooks/useGitLabAPI.ts                 |    7 +
 app/lib/hooks/useGitLabConnection.ts          |  256 +++
 app/lib/hooks/useSupabaseConnection.ts        |   45 +-
 app/lib/modules/llm/providers/xai.ts          |    6 +-
 app/lib/security.ts                           |  245 +++
 app/lib/services/githubApiService.ts          |  662 ++++----
 app/lib/services/gitlabApiService.ts          |  101 +-
 app/lib/stores/github.ts                      |  136 ++
 app/lib/stores/gitlabConnection.ts            |   14 +-
 app/lib/stores/supabase.ts                    |   35 +
 app/lib/stores/vercel.ts                      |   12 +
 app/lib/utils/serviceErrorHandler.ts          |    7 +
 app/routes/api.github-branches.ts             |  166 ++
 app/routes/api.github-stats.ts                |  198 +++
 app/routes/api.github-user.ts                 |  287 ++++
 app/routes/api.gitlab-branches.ts             |  143 ++
 app/routes/api.gitlab-projects.ts             |  105 ++
 app/routes/api.netlify-user.ts                |  142 ++
 app/routes/api.supabase-user.ts               |  199 +++
 app/routes/api.vercel-user.ts                 |  161 ++
 app/types/GitHub.ts                           |   23 +
 app/types/netlify.ts                          |    2 +
 app/types/supabase.ts                         |   23 +
 app/types/vercel.ts                           |   31 +-
 app/utils/classNames.ts                       |   12 +-
 app/utils/cn.ts                               |    6 -
 app/utils/githubStats.ts                      |  168 +-
 app/utils/projectCommands.ts                  |   48 +-
 app/utils/types.ts                            |   21 -
 tests/preview/smoke.spec.ts                   |   83 -
 94 files changed, 12201 insertions(+), 2986 deletions(-)
 delete mode 100644 .eslintrc.json
 delete mode 100644 app/components/@settings/core/constants.ts
 create mode 100644 app/components/@settings/core/constants.tsx
 delete mode 100644 app/components/@settings/shared/components/DraggableTabList.tsx
 create mode 100644 app/components/@settings/shared/service-integration/ConnectionForm.tsx
 create mode 100644 app/components/@settings/shared/service-integration/ConnectionTestIndicator.tsx
 create mode 100644 app/components/@settings/shared/service-integration/ErrorState.tsx
 create mode 100644 app/components/@settings/shared/service-integration/LoadingState.tsx
 create mode 100644 app/components/@settings/shared/service-integration/ServiceHeader.tsx
 create mode 100644 app/components/@settings/shared/service-integration/index.ts
 delete mode 100644 app/components/@settings/tabs/connections/ConnectionsTab.tsx
 delete mode 100644 app/components/@settings/tabs/connections/github/AuthDialog.tsx
 delete mode 100644 app/components/@settings/tabs/connections/github/GitHubConnection.tsx
 delete mode 100644 app/components/@settings/tabs/connections/github/RepositoryCard.tsx
 delete mode 100644 app/components/@settings/tabs/connections/github/RepositoryList.tsx
 delete mode 100644 app/components/@settings/tabs/connections/github/StatsDisplay.tsx
 delete mode 100644 app/components/@settings/tabs/connections/github/index.ts
 delete mode 100644 app/components/@settings/tabs/connections/gitlab/GitLabConnection.tsx
 create mode 100644 app/components/@settings/tabs/github/GitHubTab.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubAuthDialog.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubCacheManager.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubConnection.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubErrorBoundary.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubProgressiveLoader.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubRepositoryCard.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubRepositorySelector.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubStats.tsx
 create mode 100644 app/components/@settings/tabs/github/components/GitHubUserProfile.tsx
 create mode 100644 app/components/@settings/tabs/github/components/shared/GitHubStateIndicators.tsx
 create mode 100644 app/components/@settings/tabs/github/components/shared/RepositoryCard.tsx
 create mode 100644 app/components/@settings/tabs/github/components/shared/index.ts
 create mode 100644 app/components/@settings/tabs/gitlab/GitLabTab.tsx
 create mode 100644 app/components/@settings/tabs/gitlab/components/GitLabAuthDialog.tsx
 create mode 100644 app/components/@settings/tabs/gitlab/components/GitLabConnection.tsx
 create mode 100644 app/components/@settings/tabs/gitlab/components/GitLabRepositorySelector.tsx
 rename app/components/@settings/tabs/{connections/gitlab => gitlab/components}/RepositoryCard.tsx (100%)
 rename app/components/@settings/tabs/{connections/gitlab => gitlab/components}/RepositoryList.tsx (100%)
 rename app/components/@settings/tabs/{connections/gitlab => gitlab/components}/StatsDisplay.tsx (100%)
 rename app/components/@settings/tabs/{connections/gitlab => gitlab/components}/index.ts (100%)
 create mode 100644 app/components/@settings/tabs/netlify/NetlifyTab.tsx
 rename app/components/@settings/tabs/{connections/netlify => netlify/components}/NetlifyConnection.tsx (81%)
 rename app/components/@settings/tabs/{connections/netlify => netlify/components}/index.ts (100%)
 delete mode 100644 app/components/@settings/tabs/providers/local/LocalProvidersTab.new.tsx
 create mode 100644 app/components/@settings/tabs/supabase/SupabaseTab.tsx
 create mode 100644 app/components/@settings/tabs/vercel/VercelTab.tsx
 rename app/components/@settings/tabs/{connections/vercel => vercel/components}/VercelConnection.tsx (100%)
 rename app/components/@settings/tabs/{connections/vercel => vercel/components}/index.ts (100%)
 create mode 100644 app/components/ui/BranchSelector.tsx
 create mode 100644 app/lib/hooks/useConnectionTest.ts
 create mode 100644 app/lib/hooks/useGitHubAPI.ts
 create mode 100644 app/lib/hooks/useGitHubConnection.ts
 create mode 100644 app/lib/hooks/useGitHubStats.ts
 create mode 100644 app/lib/hooks/useGitLabAPI.ts
 create mode 100644 app/lib/hooks/useGitLabConnection.ts
 create mode 100644 app/lib/security.ts
 create mode 100644 app/lib/stores/github.ts
 create mode 100644 app/lib/utils/serviceErrorHandler.ts
 create mode 100644 app/routes/api.github-branches.ts
 create mode 100644 app/routes/api.github-stats.ts
 create mode 100644 app/routes/api.github-user.ts
 create mode 100644 app/routes/api.gitlab-branches.ts
 create mode 100644 app/routes/api.gitlab-projects.ts
 create mode 100644 app/routes/api.netlify-user.ts
 create mode 100644 app/routes/api.supabase-user.ts
 create mode 100644 app/routes/api.vercel-user.ts
 delete mode 100644 app/utils/cn.ts
 delete mode 100644 app/utils/types.ts
 delete mode 100644 tests/preview/smoke.spec.ts

diff --git a/.env.example b/.env.example
index dc7a664..9bec51e 100644
--- a/.env.example
+++ b/.env.example
@@ -136,7 +136,7 @@ VITE_GITHUB_TOKEN_TYPE=classic
 # - api (for full API access including project creation and commits)
 # - read_repository (to clone/import repositories)
 # - write_repository (to push commits and update branches)
-VITE_GITLAB_ACCESS_TOKEN=
+VITE_GITLAB_ACCESS_TOKEN=your_gitlab_personal_access_token_here
 
 # Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
 VITE_GITLAB_URL=https://gitlab.com
@@ -145,9 +145,43 @@ VITE_GITLAB_URL=https://gitlab.com
 VITE_GITLAB_TOKEN_TYPE=personal-access-token
 
 # ======================================
-# DEVELOPMENT SETTINGS
+# VERCEL INTEGRATION
 # ======================================
 
+# Vercel Access Token
+# Get your access token from: https://vercel.com/account/tokens
+# This token is used for:
+# 1. Deploying projects to Vercel
+# 2. Managing Vercel projects and deployments
+# 3. Accessing project analytics and logs
+VITE_VERCEL_ACCESS_TOKEN=your_vercel_access_token_here
+
+# ======================================
+# NETLIFY INTEGRATION
+# ======================================
+
+# Netlify Access Token
+# Get your access token from: https://app.netlify.com/user/applications
+# This token is used for:
+# 1. Deploying sites to Netlify
+# 2. Managing Netlify sites and deployments
+# 3. Accessing build logs and analytics
+VITE_NETLIFY_ACCESS_TOKEN=your_netlify_access_token_here
+
+# ======================================
+# SUPABASE INTEGRATION
+# ======================================
+
+# Supabase Project Configuration
+# Get your project details from: https://supabase.com/dashboard
+# Select your project → Settings → API
+VITE_SUPABASE_URL=your_supabase_project_url_here
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
+
+# Supabase Access Token (for management operations)
+# Generate from: https://supabase.com/dashboard/account/tokens
+VITE_SUPABASE_ACCESS_TOKEN=your_supabase_access_token_here
+
 # ======================================
 # DEVELOPMENT SETTINGS
 # ======================================
@@ -155,8 +189,8 @@ VITE_GITLAB_TOKEN_TYPE=personal-access-token
 # Development Mode
 NODE_ENV=development
 
-# Application Port (optional, defaults to 3000)
-PORT=3000
+# Application Port (optional, defaults to 5173 for development)
+PORT=5173
 
 # Logging Level (debug, info, warn, error)
 VITE_LOG_LEVEL=debug
@@ -165,90 +199,11 @@ VITE_LOG_LEVEL=debug
 DEFAULT_NUM_CTX=32768
 
 # ======================================
-# INSTRUCTIONS
+# SETUP INSTRUCTIONS
 # ======================================
 # 1. Copy this file to .env.local: cp .env.example .env.local
-# 2. Fill in the API keys you want to use
-# 3. Restart your development server: npm run dev
-# 4. Go to Settings > Providers to enable/configure providers
-# ======================================
-# GITLAB INTEGRATION
-# ======================================
-
-# GitLab Personal Access Token
-# Get your GitLab Personal Access Token here:
-# https://gitlab.com/-/profile/personal_access_tokens
-#
-# This token is used for:
-# 1. Importing/cloning GitLab repositories
-# 2. Accessing private projects
-# 3. Creating/updating branches
-# 4. Creating/updating commits and pushing code
-# 5. Creating new GitLab projects via the API
-#
-# Make sure your token has the following scopes:
-# - api (for full API access including project creation and commits)
-# - read_repository (to clone/import repositories)
-# - write_repository (to push commits and update branches)
-VITE_GITLAB_ACCESS_TOKEN=
-
-# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
-VITE_GITLAB_URL=https://gitlab.com
-
-# GitLab token type should be 'personal-access-token'
-VITE_GITLAB_TOKEN_TYPE=personal-access-token
-
-# ======================================
-# GITLAB INTEGRATION
-# ======================================
-
-# GitLab Personal Access Token
-# Get your GitLab Personal Access Token here:
-# https://gitlab.com/-/profile/personal_access_tokens
-#
-# This token is used for:
-# 1. Importing/cloning GitLab repositories
-# 2. Accessing private projects  
-# 3. Creating/updating branches
-# 4. Creating/updating commits and pushing code
-# 5. Creating new GitLab projects via the API
-#
-# Make sure your token has the following scopes:
-# - api (for full API access including project creation and commits)
-# - read_repository (to clone/import repositories)
-# - write_repository (to push commits and update branches)
-VITE_GITLAB_ACCESS_TOKEN=
-
-# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
-VITE_GITLAB_URL=https://gitlab.com
-
-# GitLab token type should be 'personal-access-token'
-VITE_GITLAB_TOKEN_TYPE=personal-access-token
-
-
-# ======================================
-# GITLAB INTEGRATION
-# ======================================
-
-# GitLab Personal Access Token
-# Get your GitLab Personal Access Token here:
-# https://gitlab.com/-/profile/personal_access_tokens
-#
-# This token is used for:
-# 1. Importing/cloning GitLab repositories
-# 2. Accessing private projects
-# 3. Creating/updating branches
-# 4. Creating/updating commits and pushing code
-# 5. Creating new GitLab projects via the API
-#
-# Make sure your token has the following scopes:
-# - api (for full API access including project creation and commits)
-# - read_repository (to clone/import repositories)
-# - write_repository (to push commits and update branches)
-VITE_GITLAB_ACCESS_TOKEN=
-
-# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
-VITE_GITLAB_URL=https://gitlab.com
-
-# GitLab token type should be 'personal-access-token'
-VITE_GITLAB_TOKEN_TYPE=personal-access-token
+# 2. Fill in the API keys for the services you want to use
+# 3. All service integration keys use VITE_ prefix for auto-connection
+# 4. Restart your development server: pnpm run dev
+# 5. Services will auto-connect on startup if tokens are provided
+# 6. Go to Settings > Service tabs to manage connections manually if needed
diff --git a/.env.production b/.env.production
index 8fe4367..84d2d75 100644
--- a/.env.production
+++ b/.env.production
@@ -103,9 +103,36 @@ VITE_GITHUB_ACCESS_TOKEN=
 # Classic tokens are recommended for broader access
 VITE_GITHUB_TOKEN_TYPE=
 
-# Netlify Authentication
+# ======================================
+# SERVICE INTEGRATIONS
+# ======================================
+
+# GitLab Personal Access Token
+# Get your GitLab Personal Access Token here:
+# https://gitlab.com/-/profile/personal_access_tokens
+# Required scopes: api, read_repository, write_repository
+VITE_GITLAB_ACCESS_TOKEN=
+
+# GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
+VITE_GITLAB_URL=https://gitlab.com
+
+# GitLab token type
+VITE_GITLAB_TOKEN_TYPE=personal-access-token
+
+# Vercel Access Token
+# Get your access token from: https://vercel.com/account/tokens
+VITE_VERCEL_ACCESS_TOKEN=
+
+# Netlify Access Token
+# Get your access token from: https://app.netlify.com/user/applications
 VITE_NETLIFY_ACCESS_TOKEN=
 
+# Supabase Configuration
+# Get your project details from: https://supabase.com/dashboard
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_ACCESS_TOKEN=
+
 # Example Context Values for qwen2.5-coder:32b
 # 
 # DEFAULT_NUM_CTX=32768 # Consumes 36GB of VRAM
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 3f4eb97..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "env": {
-      "browser": true,
-      "es2021": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:prettier/recommended"
-    ],
-    "rules": {
-      // example: turn off console warnings
-      "no-console": "off"
-    }
-  }
-  
\ No newline at end of file
diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index 76a8bd4..cf97fe5 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -21,7 +21,11 @@ import NotificationsTab from '~/components/@settings/tabs/notifications/Notifica
 import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
 import { DataTab } from '~/components/@settings/tabs/data/DataTab';
 import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
-import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
+import GitHubTab from '~/components/@settings/tabs/github/GitHubTab';
+import GitLabTab from '~/components/@settings/tabs/gitlab/GitLabTab';
+import SupabaseTab from '~/components/@settings/tabs/supabase/SupabaseTab';
+import VercelTab from '~/components/@settings/tabs/vercel/VercelTab';
+import NetlifyTab from '~/components/@settings/tabs/netlify/NetlifyTab';
 import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
 import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
 import McpTab from '~/components/@settings/tabs/mcp/McpTab';
@@ -133,8 +137,16 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return <CloudProvidersTab />;
       case 'local-providers':
         return <LocalProvidersTab />;
-      case 'connection':
-        return <ConnectionsTab />;
+      case 'github':
+        return <GitHubTab />;
+      case 'gitlab':
+        return <GitLabTab />;
+      case 'supabase':
+        return <SupabaseTab />;
+      case 'vercel':
+        return <VercelTab />;
+      case 'netlify':
+        return <NetlifyTab />;
       case 'event-logs':
         return <EventLogsTab />;
       case 'mcp':
@@ -151,7 +163,11 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return hasNewFeatures;
       case 'notifications':
         return hasUnreadNotifications;
-      case 'connection':
+      case 'github':
+      case 'gitlab':
+      case 'supabase':
+      case 'vercel':
+      case 'netlify':
         return hasConnectionIssues;
       default:
         return false;
@@ -164,7 +180,11 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
       case 'notifications':
         return `${unreadNotifications.length} unread notification${unreadNotifications.length === 1 ? '' : 's'}`;
-      case 'connection':
+      case 'github':
+      case 'gitlab':
+      case 'supabase':
+      case 'vercel':
+      case 'netlify':
         return currentIssue === 'disconnected'
           ? 'Connection lost'
           : currentIssue === 'high-latency'
@@ -188,7 +208,11 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
       case 'notifications':
         markAllAsRead();
         break;
-      case 'connection':
+      case 'github':
+      case 'gitlab':
+      case 'supabase':
+      case 'vercel':
+      case 'netlify':
         acknowledgeIssue();
         break;
     }
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
deleted file mode 100644
index db17f1e..0000000
--- a/app/components/@settings/core/constants.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { TabType } from './types';
-
-export const TAB_ICONS: Record<TabType, string> = {
-  profile: 'i-ph:user-circle',
-  settings: 'i-ph:gear-six',
-  notifications: 'i-ph:bell',
-  features: 'i-ph:star',
-  data: 'i-ph:database',
-  'cloud-providers': 'i-ph:cloud',
-  'local-providers': 'i-ph:laptop',
-  connection: 'i-ph:wifi-high',
-  'event-logs': 'i-ph:list-bullets',
-  mcp: 'i-ph:wrench',
-};
-
-export const TAB_LABELS: Record<TabType, string> = {
-  profile: 'Profile',
-  settings: 'Settings',
-  notifications: 'Notifications',
-  features: 'Features',
-  data: 'Data Management',
-  'cloud-providers': 'Cloud Providers',
-  'local-providers': 'Local Providers',
-  connection: 'Connection',
-  'event-logs': 'Event Logs',
-  mcp: 'MCP Servers',
-};
-
-export const TAB_DESCRIPTIONS: Record<TabType, string> = {
-  profile: 'Manage your profile and account settings',
-  settings: 'Configure application preferences',
-  notifications: 'View and manage your notifications',
-  features: 'Explore new and upcoming features',
-  data: 'Manage your data and storage',
-  'cloud-providers': 'Configure cloud AI providers and models',
-  'local-providers': 'Configure local AI providers and models',
-  connection: 'Check connection status and settings',
-  'event-logs': 'View system events and logs',
-  mcp: 'Configure MCP (Model Context Protocol) servers',
-};
-
-export const DEFAULT_TAB_CONFIG = [
-  // User Window Tabs (Always visible by default)
-  { id: 'features', visible: true, window: 'user' as const, order: 0 },
-  { id: 'data', visible: true, window: 'user' as const, order: 1 },
-  { id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
-  { id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
-  { id: 'connection', visible: true, window: 'user' as const, order: 4 },
-  { id: 'notifications', visible: true, window: 'user' as const, order: 5 },
-  { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
-  { id: 'mcp', visible: true, window: 'user' as const, order: 7 },
-
-  { id: 'profile', visible: true, window: 'user' as const, order: 9 },
-  { id: 'settings', visible: true, window: 'user' as const, order: 10 },
-
-  // User Window Tabs (In dropdown, initially hidden)
-];
diff --git a/app/components/@settings/core/constants.tsx b/app/components/@settings/core/constants.tsx
new file mode 100644
index 0000000..88085a9
--- /dev/null
+++ b/app/components/@settings/core/constants.tsx
@@ -0,0 +1,108 @@
+import type { TabType } from './types';
+import { User, Settings, Bell, Star, Database, Cloud, Laptop, Github, Wrench, List } from 'lucide-react';
+
+// GitLab icon component
+const GitLabIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path
+      fill="currentColor"
+      d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
+    />
+  </svg>
+);
+
+// Vercel icon component
+const VercelIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path fill="currentColor" d="M12 2L2 19.777h20L12 2z" />
+  </svg>
+);
+
+// Netlify icon component
+const NetlifyIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path
+      fill="currentColor"
+      d="M16.934 8.519a1.044 1.044 0 0 1 .303-.23l2.349-1.045a.983.983 0 0 1 .905 0c.264.12.49.328.651.599l.518 1.065c.17.35.17.761 0 1.11l-.518 1.065a1.119 1.119 0 0 1-.651.599l-2.35 1.045a1.013 1.013 0 0 1-.904 0l-2.35-1.045a1.119 1.119 0 0 1-.651-.599L13.718 9.02a1.2 1.2 0 0 1 0-1.11l.518-1.065a1.119 1.119 0 0 1 .651-.599l2.35-1.045a.983.983 0 0 1 .697-.061zm-6.051 5.751a1.044 1.044 0 0 1 .303-.23l2.349-1.045a.983.983 0 0 1 .905 0c.264.12.49.328.651.599l.518 1.065c.17.35.17.761 0 1.11l-.518 1.065a1.119 1.119 0 0 1-.651.599l-2.35 1.045a1.013 1.013 0 0 1-.904 0l-2.35-1.045a1.119 1.119 0 0 1-.651-.599l-.518-1.065a1.2 1.2 0 0 1 0-1.11l.518-1.065a1.119 1.119 0 0 1 .651-.599l2.35-1.045a.983.983 0 0 1 .697-.061z"
+    />
+  </svg>
+);
+
+// Supabase icon component
+const SupabaseIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path
+      fill="currentColor"
+      d="M21.362 9.354H12V.396a.396.396 0 0 0-.716-.233L2.203 12.424l-.401.562a1.04 1.04 0 0 0 .836 1.659H12V21.6a.396.396 0 0 0 .716.233l9.081-12.261.401-.562a1.04 1.04 0 0 0-.836-1.656z"
+    />
+  </svg>
+);
+
+export const TAB_ICONS: Record<TabType, React.ComponentType<{ className?: string }>> = {
+  profile: User,
+  settings: Settings,
+  notifications: Bell,
+  features: Star,
+  data: Database,
+  'cloud-providers': Cloud,
+  'local-providers': Laptop,
+  github: Github,
+  gitlab: () => <GitLabIcon />,
+  netlify: () => <NetlifyIcon />,
+  vercel: () => <VercelIcon />,
+  supabase: () => <SupabaseIcon />,
+  'event-logs': List,
+  mcp: Wrench,
+};
+
+export const TAB_LABELS: Record<TabType, string> = {
+  profile: 'Profile',
+  settings: 'Settings',
+  notifications: 'Notifications',
+  features: 'Features',
+  data: 'Data Management',
+  'cloud-providers': 'Cloud Providers',
+  'local-providers': 'Local Providers',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  netlify: 'Netlify',
+  vercel: 'Vercel',
+  supabase: 'Supabase',
+  'event-logs': 'Event Logs',
+  mcp: 'MCP Servers',
+};
+
+export const TAB_DESCRIPTIONS: Record<TabType, string> = {
+  profile: 'Manage your profile and account settings',
+  settings: 'Configure application preferences',
+  notifications: 'View and manage your notifications',
+  features: 'Explore new and upcoming features',
+  data: 'Manage your data and storage',
+  'cloud-providers': 'Configure cloud AI providers and models',
+  'local-providers': 'Configure local AI providers and models',
+  github: 'Connect and manage GitHub integration',
+  gitlab: 'Connect and manage GitLab integration',
+  netlify: 'Configure Netlify deployment settings',
+  vercel: 'Manage Vercel projects and deployments',
+  supabase: 'Setup Supabase database connection',
+  'event-logs': 'View system events and logs',
+  mcp: 'Configure MCP (Model Context Protocol) servers',
+};
+
+export const DEFAULT_TAB_CONFIG = [
+  // User Window Tabs (Always visible by default)
+  { id: 'features', visible: true, window: 'user' as const, order: 0 },
+  { id: 'data', visible: true, window: 'user' as const, order: 1 },
+  { id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
+  { id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
+  { id: 'github', visible: true, window: 'user' as const, order: 4 },
+  { id: 'gitlab', visible: true, window: 'user' as const, order: 5 },
+  { id: 'netlify', visible: true, window: 'user' as const, order: 6 },
+  { id: 'vercel', visible: true, window: 'user' as const, order: 7 },
+  { id: 'supabase', visible: true, window: 'user' as const, order: 8 },
+  { id: 'notifications', visible: true, window: 'user' as const, order: 9 },
+  { id: 'event-logs', visible: true, window: 'user' as const, order: 10 },
+  { id: 'mcp', visible: true, window: 'user' as const, order: 11 },
+
+  // User Window Tabs (In dropdown, initially hidden)
+];
diff --git a/app/components/@settings/core/types.ts b/app/components/@settings/core/types.ts
index a679e9d..0b5dd57 100644
--- a/app/components/@settings/core/types.ts
+++ b/app/components/@settings/core/types.ts
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { User, Folder, Wifi, Settings, Box, Sliders } from 'lucide-react';
 
 export type SettingCategory = 'profile' | 'file_sharing' | 'connectivity' | 'system' | 'services' | 'preferences';
 
@@ -10,7 +11,11 @@ export type TabType =
   | 'data'
   | 'cloud-providers'
   | 'local-providers'
-  | 'connection'
+  | 'github'
+  | 'gitlab'
+  | 'netlify'
+  | 'vercel'
+  | 'supabase'
   | 'event-logs'
   | 'mcp';
 
@@ -69,7 +74,11 @@ export const TAB_LABELS: Record<TabType, string> = {
   data: 'Data Management',
   'cloud-providers': 'Cloud Providers',
   'local-providers': 'Local Providers',
-  connection: 'Connections',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  netlify: 'Netlify',
+  vercel: 'Vercel',
+  supabase: 'Supabase',
   'event-logs': 'Event Logs',
   mcp: 'MCP Servers',
 };
@@ -83,13 +92,13 @@ export const categoryLabels: Record<SettingCategory, string> = {
   preferences: 'Preferences',
 };
 
-export const categoryIcons: Record<SettingCategory, string> = {
-  profile: 'i-ph:user-circle',
-  file_sharing: 'i-ph:folder-simple',
-  connectivity: 'i-ph:wifi-high',
-  system: 'i-ph:gear',
-  services: 'i-ph:cube',
-  preferences: 'i-ph:sliders',
+export const categoryIcons: Record<SettingCategory, React.ComponentType<{ className?: string }>> = {
+  profile: User,
+  file_sharing: Folder,
+  connectivity: Wifi,
+  system: Settings,
+  services: Box,
+  preferences: Sliders,
 };
 
 export interface Profile {
diff --git a/app/components/@settings/shared/components/DraggableTabList.tsx b/app/components/@settings/shared/components/DraggableTabList.tsx
deleted file mode 100644
index a868183..0000000
--- a/app/components/@settings/shared/components/DraggableTabList.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { useDrag, useDrop } from 'react-dnd';
-import { motion } from 'framer-motion';
-import { classNames } from '~/utils/classNames';
-import type { TabVisibilityConfig } from '~/components/@settings/core/types';
-import { TAB_LABELS } from '~/components/@settings/core/types';
-import { Switch } from '~/components/ui/Switch';
-
-interface DraggableTabListProps {
-  tabs: TabVisibilityConfig[];
-  onReorder: (tabs: TabVisibilityConfig[]) => void;
-  onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
-  onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
-  showControls?: boolean;
-}
-
-interface DraggableTabItemProps {
-  tab: TabVisibilityConfig;
-  index: number;
-  moveTab: (dragIndex: number, hoverIndex: number) => void;
-  showControls?: boolean;
-  onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
-  onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
-}
-
-interface DragItem {
-  type: string;
-  index: number;
-  id: string;
-}
-
-const DraggableTabItem = ({
-  tab,
-  index,
-  moveTab,
-  showControls,
-  onWindowChange,
-  onVisibilityChange,
-}: DraggableTabItemProps) => {
-  const [{ isDragging }, dragRef] = useDrag({
-    type: 'tab',
-    item: { type: 'tab', index, id: tab.id },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  const [, dropRef] = useDrop({
-    accept: 'tab',
-    hover: (item: DragItem, monitor) => {
-      if (!monitor.isOver({ shallow: true })) {
-        return;
-      }
-
-      if (item.index === index) {
-        return;
-      }
-
-      if (item.id === tab.id) {
-        return;
-      }
-
-      moveTab(item.index, index);
-      item.index = index;
-    },
-  });
-
-  const ref = (node: HTMLDivElement | null) => {
-    dragRef(node);
-    dropRef(node);
-  };
-
-  return (
-    <motion.div
-      ref={ref}
-      initial={false}
-      animate={{
-        scale: isDragging ? 1.02 : 1,
-        boxShadow: isDragging ? '0 8px 16px rgba(0,0,0,0.1)' : 'none',
-      }}
-      className={classNames(
-        'flex items-center justify-between p-4 rounded-lg',
-        'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
-        'border border-[#E5E5E5] dark:border-[#333333]',
-        isDragging ? 'z-50' : '',
-      )}
-    >
-      <div className="flex items-center gap-4">
-        <div className="cursor-grab">
-          <div className="i-ph:dots-six-vertical w-4 h-4 text-bolt-elements-textSecondary" />
-        </div>
-        <div>
-          <div className="font-medium text-bolt-elements-textPrimary">{TAB_LABELS[tab.id]}</div>
-          {showControls && (
-            <div className="text-xs text-bolt-elements-textSecondary">
-              Order: {tab.order}, Window: {tab.window}
-            </div>
-          )}
-        </div>
-      </div>
-      {showControls && !tab.locked && (
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={tab.visible}
-              onCheckedChange={(checked: boolean) => onVisibilityChange?.(tab, checked)}
-              className="data-[state=checked]:bg-purple-500"
-              aria-label={`Toggle ${TAB_LABELS[tab.id]} visibility`}
-            />
-            <label className="text-sm text-bolt-elements-textSecondary">Visible</label>
-          </div>
-          <div className="flex items-center gap-2">
-            <label className="text-sm text-bolt-elements-textSecondary">User</label>
-            <Switch
-              checked={tab.window === 'developer'}
-              onCheckedChange={(checked: boolean) => onWindowChange?.(tab, checked ? 'developer' : 'user')}
-              className="data-[state=checked]:bg-purple-500"
-              aria-label={`Toggle ${TAB_LABELS[tab.id]} window assignment`}
-            />
-            <label className="text-sm text-bolt-elements-textSecondary">Dev</label>
-          </div>
-        </div>
-      )}
-    </motion.div>
-  );
-};
-
-export const DraggableTabList = ({
-  tabs,
-  onReorder,
-  onWindowChange,
-  onVisibilityChange,
-  showControls = false,
-}: DraggableTabListProps) => {
-  const moveTab = (dragIndex: number, hoverIndex: number) => {
-    const items = Array.from(tabs);
-    const [reorderedItem] = items.splice(dragIndex, 1);
-    items.splice(hoverIndex, 0, reorderedItem);
-
-    // Update order numbers based on position
-    const reorderedTabs = items.map((tab, index) => ({
-      ...tab,
-      order: index + 1,
-    }));
-
-    onReorder(reorderedTabs);
-  };
-
-  return (
-    <div className="space-y-2">
-      {tabs.map((tab, index) => (
-        <DraggableTabItem
-          key={tab.id}
-          tab={tab}
-          index={index}
-          moveTab={moveTab}
-          showControls={showControls}
-          onWindowChange={onWindowChange}
-          onVisibilityChange={onVisibilityChange}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/app/components/@settings/shared/components/TabTile.tsx b/app/components/@settings/shared/components/TabTile.tsx
index ebc0b19..a8a9383 100644
--- a/app/components/@settings/shared/components/TabTile.tsx
+++ b/app/components/@settings/shared/components/TabTile.tsx
@@ -70,16 +70,20 @@ export const TabTile: React.FC<TabTileProps> = ({
                     isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
                   )}
                 >
-                  <div
-                    className={classNames(
-                      TAB_ICONS[tab.id],
-                      'w-8 h-8',
-                      'text-gray-600 dark:text-gray-300',
-                      'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
-                      'transition-colors duration-100 ease-out',
-                      isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
-                    )}
-                  />
+                  {(() => {
+                    const IconComponent = TAB_ICONS[tab.id];
+                    return (
+                      <IconComponent
+                        className={classNames(
+                          'w-8 h-8',
+                          'text-gray-600 dark:text-gray-300',
+                          'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
+                          'transition-colors duration-100 ease-out',
+                          isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                        )}
+                      />
+                    );
+                  })()}
                 </div>
 
                 {/* Label and Description */}
diff --git a/app/components/@settings/shared/service-integration/ConnectionForm.tsx b/app/components/@settings/shared/service-integration/ConnectionForm.tsx
new file mode 100644
index 0000000..029de88
--- /dev/null
+++ b/app/components/@settings/shared/service-integration/ConnectionForm.tsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface TokenTypeOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+interface ConnectionFormProps {
+  isConnected: boolean;
+  isConnecting: boolean;
+  token: string;
+  onTokenChange: (token: string) => void;
+  onConnect: (e: React.FormEvent) => void;
+  onDisconnect: () => void;
+  error?: string;
+  serviceName: string;
+  tokenLabel?: string;
+  tokenPlaceholder?: string;
+  getTokenUrl: string;
+  environmentVariable?: string;
+  tokenTypes?: TokenTypeOption[];
+  selectedTokenType?: string;
+  onTokenTypeChange?: (type: string) => void;
+  connectedMessage?: string;
+  children?: React.ReactNode; // For additional form fields
+}
+
+export function ConnectionForm({
+  isConnected,
+  isConnecting,
+  token,
+  onTokenChange,
+  onConnect,
+  onDisconnect,
+  error,
+  serviceName,
+  tokenLabel = 'Access Token',
+  tokenPlaceholder,
+  getTokenUrl,
+  environmentVariable,
+  tokenTypes,
+  selectedTokenType,
+  onTokenTypeChange,
+  connectedMessage = `Connected to ${serviceName}`,
+  children,
+}: ConnectionFormProps) {
+  return (
+    <motion.div
+      className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        {!isConnected ? (
+          <div className="space-y-4">
+            {environmentVariable && (
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You can also set the{' '}
+                  <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                    {environmentVariable}
+                  </code>{' '}
+                  environment variable to connect automatically.
+                </p>
+              </div>
+            )}
+
+            <form onSubmit={onConnect} className="space-y-4">
+              {tokenTypes && tokenTypes.length > 1 && onTokenTypeChange && (
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                    Token Type
+                  </label>
+                  <select
+                    value={selectedTokenType}
+                    onChange={(e) => onTokenTypeChange(e.target.value)}
+                    disabled={isConnecting}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
+                      'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                      'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
+                      'disabled:opacity-50',
+                    )}
+                  >
+                    {tokenTypes.map((type) => (
+                      <option key={type.value} value={type.value}>
+                        {type.label}
+                      </option>
+                    ))}
+                  </select>
+                  {selectedTokenType && tokenTypes.find((t) => t.value === selectedTokenType)?.description && (
+                    <p className="mt-1 text-xs text-bolt-elements-textTertiary">
+                      {tokenTypes.find((t) => t.value === selectedTokenType)?.description}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">{tokenLabel}</label>
+                <input
+                  type="password"
+                  value={token}
+                  onChange={(e) => onTokenChange(e.target.value)}
+                  disabled={isConnecting}
+                  placeholder={tokenPlaceholder || `Enter your ${serviceName} access token`}
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-bolt-elements-background-depth-1',
+                    'border border-bolt-elements-borderColor',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                    'disabled:opacity-50',
+                  )}
+                />
+                <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                  <a
+                    href={getTokenUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                  >
+                    Get your token
+                    <div className="i-ph:arrow-square-out w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+
+              {children}
+
+              {error && (
+                <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+                  <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isConnecting || !token.trim()}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {isConnecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            </form>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={onDisconnect}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-red-500 text-white',
+                  'hover:bg-red-600',
+                )}
+              >
+                <div className="i-ph:plug w-4 h-4" />
+                Disconnect
+              </button>
+              <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                {connectedMessage}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/components/@settings/shared/service-integration/ConnectionTestIndicator.tsx b/app/components/@settings/shared/service-integration/ConnectionTestIndicator.tsx
new file mode 100644
index 0000000..0e65a80
--- /dev/null
+++ b/app/components/@settings/shared/service-integration/ConnectionTestIndicator.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+export interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface ConnectionTestIndicatorProps {
+  testResult: ConnectionTestResult | null;
+  className?: string;
+}
+
+export function ConnectionTestIndicator({ testResult, className }: ConnectionTestIndicatorProps) {
+  if (!testResult) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-4 rounded-lg border',
+        {
+          'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700': testResult.status === 'success',
+          'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700': testResult.status === 'error',
+          'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700': testResult.status === 'testing',
+        },
+        className,
+      )}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="flex items-center gap-2">
+        {testResult.status === 'success' && (
+          <div className="i-ph:check-circle w-5 h-5 text-green-600 dark:text-green-400" />
+        )}
+        {testResult.status === 'error' && (
+          <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400" />
+        )}
+        {testResult.status === 'testing' && (
+          <div className="i-ph:spinner-gap w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />
+        )}
+        <span
+          className={classNames('text-sm font-medium', {
+            'text-green-800 dark:text-green-200': testResult.status === 'success',
+            'text-red-800 dark:text-red-200': testResult.status === 'error',
+            'text-blue-800 dark:text-blue-200': testResult.status === 'testing',
+          })}
+        >
+          {testResult.message}
+        </span>
+      </div>
+      {testResult.timestamp && (
+        <p className="text-xs text-gray-500 mt-1">{new Date(testResult.timestamp).toLocaleString()}</p>
+      )}
+    </motion.div>
+  );
+}
diff --git a/app/components/@settings/shared/service-integration/ErrorState.tsx b/app/components/@settings/shared/service-integration/ErrorState.tsx
new file mode 100644
index 0000000..a6f618f
--- /dev/null
+++ b/app/components/@settings/shared/service-integration/ErrorState.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import type { ServiceError } from '~/lib/utils/serviceErrorHandler';
+
+interface ErrorStateProps {
+  error?: ServiceError | string;
+  title?: string;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  retryLabel?: string;
+  className?: string;
+  showDetails?: boolean;
+}
+
+export function ErrorState({
+  error,
+  title = 'Something went wrong',
+  onRetry,
+  onDismiss,
+  retryLabel = 'Try again',
+  className,
+  showDetails = false,
+}: ErrorStateProps) {
+  const errorMessage = typeof error === 'string' ? error : error?.message || 'An unknown error occurred';
+  const isServiceError = typeof error === 'object' && error !== null;
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-6 rounded-lg border border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20',
+        className,
+      )}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="flex items-start gap-3">
+        <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-medium text-red-800 dark:text-red-200 mb-1">{title}</h3>
+          <p className="text-sm text-red-700 dark:text-red-300">{errorMessage}</p>
+
+          {showDetails && isServiceError && error.details && (
+            <details className="mt-3">
+              <summary className="text-xs text-red-600 dark:text-red-400 cursor-pointer hover:underline">
+                Technical details
+              </summary>
+              <pre className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 p-2 rounded overflow-auto">
+                {JSON.stringify(error.details, null, 2)}
+              </pre>
+            </details>
+          )}
+
+          <div className="flex items-center gap-2 mt-4">
+            {onRetry && (
+              <Button
+                onClick={onRetry}
+                variant="outline"
+                size="sm"
+                className="text-red-700 border-red-300 hover:bg-red-100 dark:text-red-300 dark:border-red-600 dark:hover:bg-red-900/30"
+              >
+                <div className="i-ph:arrows-clockwise w-4 h-4 mr-1" />
+                {retryLabel}
+              </Button>
+            )}
+            {onDismiss && (
+              <Button
+                onClick={onDismiss}
+                variant="outline"
+                size="sm"
+                className="text-red-700 border-red-300 hover:bg-red-100 dark:text-red-300 dark:border-red-600 dark:hover:bg-red-900/30"
+              >
+                Dismiss
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+interface ConnectionErrorProps {
+  service: string;
+  error: ServiceError | string;
+  onRetryConnection: () => void;
+  onClearError?: () => void;
+}
+
+export function ConnectionError({ service, error, onRetryConnection, onClearError }: ConnectionErrorProps) {
+  return (
+    <ErrorState
+      error={error}
+      title={`Failed to connect to ${service}`}
+      onRetry={onRetryConnection}
+      onDismiss={onClearError}
+      retryLabel="Retry connection"
+      showDetails={true}
+    />
+  );
+}
diff --git a/app/components/@settings/shared/service-integration/LoadingState.tsx b/app/components/@settings/shared/service-integration/LoadingState.tsx
new file mode 100644
index 0000000..c9e486c
--- /dev/null
+++ b/app/components/@settings/shared/service-integration/LoadingState.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface LoadingStateProps {
+  message?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  showProgress?: boolean;
+  progress?: number;
+}
+
+export function LoadingState({
+  message = 'Loading...',
+  size = 'md',
+  className,
+  showProgress = false,
+  progress = 0,
+}: LoadingStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  return (
+    <motion.div
+      className={classNames('flex flex-col items-center justify-center gap-3', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    >
+      <div className="flex items-center gap-2">
+        <div
+          className={classNames(
+            'i-ph:spinner-gap animate-spin text-bolt-elements-item-contentAccent',
+            sizeClasses[size],
+          )}
+        />
+        <span className="text-bolt-elements-textSecondary">{message}</span>
+      </div>
+
+      {showProgress && (
+        <div className="w-full max-w-xs">
+          <div className="w-full bg-bolt-elements-background-depth-2 rounded-full h-1">
+            <motion.div
+              className="bg-bolt-elements-item-contentAccent h-1 rounded-full"
+              initial={{ width: 0 }}
+              animate={{ width: `${progress}%` }}
+              transition={{ duration: 0.3 }}
+            />
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+interface SkeletonProps {
+  className?: string;
+  lines?: number;
+}
+
+export function Skeleton({ className, lines = 1 }: SkeletonProps) {
+  return (
+    <div className={classNames('animate-pulse', className)}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className={classNames(
+            'bg-bolt-elements-background-depth-2 rounded',
+            i === lines - 1 ? 'h-4' : 'h-4 mb-2',
+            i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full',
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface ServiceLoadingProps {
+  serviceName: string;
+  operation: string;
+  progress?: number;
+}
+
+export function ServiceLoading({ serviceName, operation, progress }: ServiceLoadingProps) {
+  return (
+    <LoadingState
+      message={`${operation} ${serviceName}...`}
+      showProgress={progress !== undefined}
+      progress={progress}
+    />
+  );
+}
diff --git a/app/components/@settings/shared/service-integration/ServiceHeader.tsx b/app/components/@settings/shared/service-integration/ServiceHeader.tsx
new file mode 100644
index 0000000..d2fec07
--- /dev/null
+++ b/app/components/@settings/shared/service-integration/ServiceHeader.tsx
@@ -0,0 +1,72 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+
+interface ServiceHeaderProps {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+  onTestConnection?: () => void;
+  isTestingConnection?: boolean;
+  additionalInfo?: React.ReactNode;
+  delay?: number;
+}
+
+export const ServiceHeader = memo(
+  ({
+    icon: Icon, // eslint-disable-line @typescript-eslint/naming-convention
+    title,
+    description,
+    onTestConnection,
+    isTestingConnection,
+    additionalInfo,
+    delay = 0.1,
+  }: ServiceHeaderProps) => {
+    return (
+      <>
+        <motion.div
+          className="flex items-center justify-between gap-2"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay }}
+        >
+          <div className="flex items-center gap-2">
+            <Icon className="w-5 h-5" />
+            <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              {title}
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {additionalInfo}
+            {onTestConnection && (
+              <Button
+                onClick={onTestConnection}
+                disabled={isTestingConnection}
+                variant="outline"
+                className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+              >
+                {isTestingConnection ? (
+                  <>
+                    <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                    Testing...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Test Connection
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </motion.div>
+
+        {description && (
+          <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+            {description}
+          </p>
+        )}
+      </>
+    );
+  },
+);
diff --git a/app/components/@settings/shared/service-integration/index.ts b/app/components/@settings/shared/service-integration/index.ts
new file mode 100644
index 0000000..a4186a9
--- /dev/null
+++ b/app/components/@settings/shared/service-integration/index.ts
@@ -0,0 +1,6 @@
+export { ConnectionTestIndicator } from './ConnectionTestIndicator';
+export type { ConnectionTestResult } from './ConnectionTestIndicator';
+export { ServiceHeader } from './ServiceHeader';
+export { ConnectionForm } from './ConnectionForm';
+export { LoadingState, Skeleton, ServiceLoading } from './LoadingState';
+export { ErrorState, ConnectionError } from './ErrorState';
diff --git a/app/components/@settings/tabs/connections/ConnectionsTab.tsx b/app/components/@settings/tabs/connections/ConnectionsTab.tsx
deleted file mode 100644
index c1fae79..0000000
--- a/app/components/@settings/tabs/connections/ConnectionsTab.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { motion } from 'framer-motion';
-import React, { Suspense } from 'react';
-
-// Use React.lazy for dynamic imports
-const GitHubConnection = React.lazy(() => import('./github/GitHubConnection'));
-const GitlabConnection = React.lazy(() => import('./gitlab/GitLabConnection'));
-const NetlifyConnection = React.lazy(() => import('./netlify/NetlifyConnection'));
-const VercelConnection = React.lazy(() => import('./vercel/VercelConnection'));
-
-// Loading fallback component
-const LoadingFallback = () => (
-  <div className="p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor">
-    <div className="flex items-center justify-center gap-2 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
-      <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-      <span>Loading connection...</span>
-    </div>
-  </div>
-);
-
-export default function ConnectionsTab() {
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <motion.div
-        className="flex items-center gap-2"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.1 }}
-      >
-        <div className="i-ph:plugs-connected w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
-        <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
-          Connection Settings
-        </h2>
-      </motion.div>
-      <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
-        Manage your external service connections and integrations
-      </p>
-
-      <div className="grid grid-cols-1 gap-6">
-        <Suspense fallback={<LoadingFallback />}>
-          <GitHubConnection />
-        </Suspense>
-        <Suspense fallback={<LoadingFallback />}>
-          <GitlabConnection />
-        </Suspense>
-        <Suspense fallback={<LoadingFallback />}>
-          <NetlifyConnection />
-        </Suspense>
-        <Suspense fallback={<LoadingFallback />}>
-          <VercelConnection />
-        </Suspense>
-      </div>
-
-      {/* Additional help text */}
-      <div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 p-4 rounded-lg">
-        <p className="flex items-center gap-1 mb-2">
-          <span className="i-ph:lightbulb w-4 h-4 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
-          <span className="font-medium">Troubleshooting Tip:</span>
-        </p>
-        <p className="mb-2">
-          If you're having trouble with connections, here are some troubleshooting tips to help resolve common issues.
-        </p>
-        <p>For persistent issues:</p>
-        <ol className="list-decimal list-inside pl-4 mt-1">
-          <li>Check your browser console for errors</li>
-          <li>Verify that your tokens have the correct permissions</li>
-          <li>Try clearing your browser cache and cookies</li>
-          <li>Ensure your browser allows third-party cookies if using integrations</li>
-        </ol>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/@settings/tabs/connections/github/AuthDialog.tsx b/app/components/@settings/tabs/connections/github/AuthDialog.tsx
deleted file mode 100644
index dd4b4e1..0000000
--- a/app/components/@settings/tabs/connections/github/AuthDialog.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useState } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { motion } from 'framer-motion';
-import { toast } from 'react-toastify';
-import { Button } from '~/components/ui/Button';
-import { githubConnectionStore } from '~/lib/stores/githubConnection';
-
-interface AuthDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
-  const [token, setToken] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!token.trim()) {
-      toast.error('Please enter a valid GitHub token');
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    try {
-      await githubConnectionStore.connect(token.trim(), tokenType);
-      toast.success('Successfully connected to GitHub!');
-      onClose();
-      setToken('');
-    } catch (error) {
-      console.error('GitHub connection failed:', error);
-      toast.error(`Failed to connect to GitHub: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleClose = () => {
-    if (!isSubmitting) {
-      setToken('');
-      onClose();
-    }
-  };
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={handleClose}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
-        <Dialog.Content asChild>
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor shadow-xl z-50"
-          >
-            <div className="p-6">
-              <Dialog.Title className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">
-                Connect to GitHub
-              </Dialog.Title>
-
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-bolt-elements-textPrimary mb-2">Token Type</label>
-                  <div className="flex gap-2">
-                    <label className="flex items-center">
-                      <input
-                        type="radio"
-                        value="classic"
-                        checked={tokenType === 'classic'}
-                        onChange={(e) => setTokenType(e.target.value as 'classic')}
-                        className="mr-2"
-                      />
-                      <span className="text-sm text-bolt-elements-textSecondary">Classic Token</span>
-                    </label>
-                    <label className="flex items-center">
-                      <input
-                        type="radio"
-                        value="fine-grained"
-                        checked={tokenType === 'fine-grained'}
-                        onChange={(e) => setTokenType(e.target.value as 'fine-grained')}
-                        className="mr-2"
-                      />
-                      <span className="text-sm text-bolt-elements-textSecondary">Fine-grained Token</span>
-                    </label>
-                  </div>
-                </div>
-
-                <div>
-                  <label htmlFor="token" className="block text-sm font-medium text-bolt-elements-textPrimary mb-2">
-                    GitHub Personal Access Token
-                  </label>
-                  <input
-                    id="token"
-                    type="password"
-                    value={token}
-                    onChange={(e) => setToken(e.target.value)}
-                    placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-                    className="w-full px-3 py-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
-                    disabled={isSubmitting}
-                    autoComplete="off"
-                  />
-                </div>
-
-                <div className="bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-md p-4">
-                  <div className="flex items-start gap-3">
-                    <div className="i-ph:info w-5 h-5 text-bolt-elements-icon-info mt-0.5 flex-shrink-0" />
-                    <div className="text-sm text-bolt-elements-textSecondary space-y-2">
-                      <p>To create a GitHub Personal Access Token:</p>
-                      <ol className="list-decimal list-inside space-y-1 text-xs">
-                        <li>Go to GitHub Settings → Developer settings → Personal access tokens</li>
-                        <li>Click "Generate new token"</li>
-                        <li>Select appropriate scopes (repo, user, etc.)</li>
-                        <li>Copy and paste the token here</li>
-                      </ol>
-                      <p className="text-xs">
-                        <a
-                          href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-bolt-elements-textAccent hover:underline"
-                        >
-                          Learn more about creating tokens →
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex gap-3 pt-4">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleClose}
-                    disabled={isSubmitting}
-                    className="flex-1"
-                  >
-                    Cancel
-                  </Button>
-                  <Button type="submit" disabled={!token.trim() || isSubmitting} className="flex-1">
-                    {isSubmitting ? 'Connecting...' : 'Connect'}
-                  </Button>
-                </div>
-              </form>
-            </div>
-          </motion.div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
diff --git a/app/components/@settings/tabs/connections/github/GitHubConnection.tsx b/app/components/@settings/tabs/connections/github/GitHubConnection.tsx
deleted file mode 100644
index b762821..0000000
--- a/app/components/@settings/tabs/connections/github/GitHubConnection.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { toast } from 'react-toastify';
-import { useStore } from '@nanostores/react';
-import { classNames } from '~/utils/classNames';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
-import { Button } from '~/components/ui/Button';
-import {
-  githubConnectionAtom,
-  githubConnectionStore,
-  isGitHubConnected,
-  isGitHubConnecting,
-  isGitHubLoadingStats,
-} from '~/lib/stores/githubConnection';
-import { AuthDialog } from './AuthDialog';
-import { StatsDisplay } from './StatsDisplay';
-import { RepositoryList } from './RepositoryList';
-
-interface GitHubConnectionProps {
-  onCloneRepository?: (repoUrl: string) => void;
-}
-
-export default function GitHubConnection({ onCloneRepository }: GitHubConnectionProps = {}) {
-  const connection = useStore(githubConnectionAtom);
-  const isConnected = useStore(isGitHubConnected);
-  const isConnecting = useStore(isGitHubConnecting);
-  const isLoadingStats = useStore(isGitHubLoadingStats);
-
-  const [isAuthDialogOpen, setIsAuthDialogOpen] = useState(false);
-  const [isStatsExpanded, setIsStatsExpanded] = useState(false);
-  const [isReposExpanded, setIsReposExpanded] = useState(false);
-
-  const handleConnect = () => {
-    setIsAuthDialogOpen(true);
-  };
-
-  const handleDisconnect = () => {
-    githubConnectionStore.disconnect();
-    setIsStatsExpanded(false);
-    setIsReposExpanded(false);
-    toast.success('Disconnected from GitHub');
-  };
-
-  const handleRefreshStats = async () => {
-    try {
-      await githubConnectionStore.fetchStats();
-      toast.success('GitHub stats refreshed');
-    } catch (error) {
-      toast.error(`Failed to refresh stats: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  };
-
-  const handleTokenTypeChange = (tokenType: 'classic' | 'fine-grained') => {
-    githubConnectionStore.updateTokenType(tokenType);
-  };
-
-  const handleCloneRepository = (repoUrl: string) => {
-    if (onCloneRepository) {
-      onCloneRepository(repoUrl);
-    } else {
-      window.open(repoUrl, '_blank');
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor">
-            <div className="i-ph:git-repository text-bolt-elements-icon-primary w-5 h-5" />
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">GitHub</h3>
-            <p className="text-sm text-bolt-elements-textSecondary">
-              {isConnected
-                ? `Connected as ${connection.user?.login}`
-                : 'Connect your GitHub account to manage repositories'}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          {isConnected ? (
-            <>
-              <Button
-                onClick={handleRefreshStats}
-                disabled={isLoadingStats}
-                variant="outline"
-                size="sm"
-                className="flex items-center gap-2"
-              >
-                {isLoadingStats ? (
-                  <>
-                    <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-                    Refreshing...
-                  </>
-                ) : (
-                  <>
-                    <div className="i-ph:arrows-clockwise w-4 h-4" />
-                    Refresh Stats
-                  </>
-                )}
-              </Button>
-              <Button
-                onClick={handleDisconnect}
-                variant="outline"
-                size="sm"
-                className="text-bolt-elements-textDanger hover:text-bolt-elements-textDanger"
-              >
-                <div className="i-ph:sign-out w-4 h-4 mr-2" />
-                Disconnect
-              </Button>
-            </>
-          ) : (
-            <Button
-              onClick={handleConnect}
-              disabled={isConnecting}
-              variant="outline"
-              size="sm"
-              className="flex items-center gap-2"
-            >
-              {isConnecting ? (
-                <>
-                  <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-                  Connecting...
-                </>
-              ) : (
-                <>
-                  <div className="i-ph:plus w-4 h-4" />
-                  Connect
-                </>
-              )}
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Connection Status */}
-      <div className="p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor">
-        <div className="flex items-center gap-3">
-          <div
-            className={classNames(
-              'w-3 h-3 rounded-full',
-              isConnected ? 'bg-bolt-elements-icon-success' : 'bg-bolt-elements-icon-secondary',
-            )}
-          />
-          <span className="text-sm font-medium text-bolt-elements-textPrimary">
-            {isConnected ? 'Connected' : 'Not Connected'}
-          </span>
-
-          {connection.rateLimit && (
-            <span className="text-xs text-bolt-elements-textSecondary ml-auto">
-              Rate limit: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
-            </span>
-          )}
-        </div>
-
-        {/* Token Type Selection */}
-        {isConnected && (
-          <div className="mt-3 pt-3 border-t border-bolt-elements-borderColor">
-            <label className="block text-xs font-medium text-bolt-elements-textPrimary mb-2">Token Type</label>
-            <div className="flex gap-3">
-              {(['classic', 'fine-grained'] as const).map((type) => (
-                <label key={type} className="flex items-center cursor-pointer">
-                  <input
-                    type="radio"
-                    value={type}
-                    checked={connection.tokenType === type}
-                    onChange={() => handleTokenTypeChange(type)}
-                    className="mr-2 text-bolt-elements-item-contentAccent focus:ring-bolt-elements-item-contentAccent"
-                  />
-                  <span className="text-xs text-bolt-elements-textSecondary capitalize">
-                    {type.replace('-', ' ')} Token
-                  </span>
-                </label>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* User Profile */}
-      {isConnected && connection.user && (
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor"
-        >
-          <div className="flex items-center gap-4">
-            <img
-              src={connection.user.avatar_url}
-              alt={connection.user.login}
-              className="w-12 h-12 rounded-full border-2 border-bolt-elements-item-contentAccent"
-            />
-            <div className="flex-1">
-              <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
-                {connection.user.name || connection.user.login}
-              </h4>
-              <p className="text-sm text-bolt-elements-textSecondary">@{connection.user.login}</p>
-              {connection.user.bio && (
-                <p className="text-xs text-bolt-elements-textTertiary mt-1 line-clamp-2">{connection.user.bio}</p>
-              )}
-            </div>
-            <div className="text-right">
-              <div className="text-sm font-medium text-bolt-elements-textPrimary">
-                {connection.user.public_repos?.toLocaleString() || 0}
-              </div>
-              <div className="text-xs text-bolt-elements-textSecondary">repositories</div>
-            </div>
-          </div>
-        </motion.div>
-      )}
-
-      {/* Stats Section */}
-      {isConnected && connection.stats && (
-        <Collapsible open={isStatsExpanded} onOpenChange={setIsStatsExpanded}>
-          <CollapsibleTrigger asChild>
-            <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-all duration-200 cursor-pointer">
-              <div className="flex items-center gap-2">
-                <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent" />
-                <span className="text-sm font-medium text-bolt-elements-textPrimary">GitHub Stats</span>
-              </div>
-              <div
-                className={classNames(
-                  'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
-                  isStatsExpanded ? 'rotate-180' : '',
-                )}
-              />
-            </div>
-          </CollapsibleTrigger>
-          <CollapsibleContent className="overflow-hidden">
-            <div className="mt-4 p-4 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor">
-              <StatsDisplay stats={connection.stats} onRefresh={handleRefreshStats} isRefreshing={isLoadingStats} />
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      )}
-
-      {/* Repositories Section */}
-      {isConnected && connection.stats?.repos && connection.stats.repos.length > 0 && (
-        <Collapsible open={isReposExpanded} onOpenChange={setIsReposExpanded}>
-          <CollapsibleTrigger asChild>
-            <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-all duration-200 cursor-pointer">
-              <div className="flex items-center gap-2">
-                <div className="i-ph:git-repository w-4 h-4 text-bolt-elements-item-contentAccent" />
-                <span className="text-sm font-medium text-bolt-elements-textPrimary">
-                  Repositories ({connection.stats.repos.length})
-                </span>
-              </div>
-              <div
-                className={classNames(
-                  'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
-                  isReposExpanded ? 'rotate-180' : '',
-                )}
-              />
-            </div>
-          </CollapsibleTrigger>
-          <CollapsibleContent className="overflow-hidden">
-            <div className="mt-4 p-4 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor">
-              <RepositoryList
-                repositories={connection.stats.repos}
-                onClone={handleCloneRepository}
-                onRefresh={handleRefreshStats}
-                isRefreshing={isLoadingStats}
-              />
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      )}
-
-      {/* Auth Dialog */}
-      <AuthDialog isOpen={isAuthDialogOpen} onClose={() => setIsAuthDialogOpen(false)} />
-    </div>
-  );
-}
diff --git a/app/components/@settings/tabs/connections/github/RepositoryCard.tsx b/app/components/@settings/tabs/connections/github/RepositoryCard.tsx
deleted file mode 100644
index 780da30..0000000
--- a/app/components/@settings/tabs/connections/github/RepositoryCard.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import type { GitHubRepoInfo } from '~/types/GitHub';
-
-interface RepositoryCardProps {
-  repo: GitHubRepoInfo;
-  onClone?: (repoUrl: string) => void;
-}
-
-export function RepositoryCard({ repo, onClone }: RepositoryCardProps) {
-  return (
-    <a
-      key={repo.name}
-      href={repo.html_url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group block p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-all duration-200"
-    >
-      <div className="space-y-3">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-2">
-            <div className={`i-ph:${repo.private ? 'lock' : 'git-repository'} w-4 h-4 text-bolt-elements-icon-info`} />
-            <h5 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors">
-              {repo.name}
-            </h5>
-            {repo.private && (
-              <span className="px-2 py-0.5 text-xs rounded-full bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary border border-bolt-elements-borderColor">
-                Private
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
-            <span className="flex items-center gap-1" title="Stars">
-              <div className="i-ph:star w-3.5 h-3.5 text-bolt-elements-icon-warning" />
-              {repo.stargazers_count.toLocaleString()}
-            </span>
-            <span className="flex items-center gap-1" title="Forks">
-              <div className="i-ph:git-fork w-3.5 h-3.5 text-bolt-elements-icon-info" />
-              {repo.forks_count.toLocaleString()}
-            </span>
-          </div>
-        </div>
-
-        {repo.description && (
-          <p className="text-xs text-bolt-elements-textSecondary line-clamp-2">{repo.description}</p>
-        )}
-
-        {repo.topics && repo.topics.length > 0 && (
-          <div className="flex flex-wrap gap-1">
-            {repo.topics.slice(0, 3).map((topic) => (
-              <span
-                key={topic}
-                className="px-2 py-0.5 text-xs rounded-full bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary border border-bolt-elements-borderColor"
-              >
-                {topic}
-              </span>
-            ))}
-            {repo.topics.length > 3 && (
-              <span className="px-2 py-0.5 text-xs rounded-full bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary border border-bolt-elements-borderColor">
-                +{repo.topics.length - 3}
-              </span>
-            )}
-          </div>
-        )}
-
-        <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
-          {repo.language && (
-            <span className="flex items-center gap-1" title="Primary Language">
-              <div className="i-ph:circle-fill w-2 h-2 text-bolt-elements-icon-success" />
-              {repo.language}
-            </span>
-          )}
-          <span className="flex items-center gap-1" title="Default Branch">
-            <div className="i-ph:git-branch w-3.5 h-3.5" />
-            {repo.default_branch}
-          </span>
-          <span className="flex items-center gap-1" title="Last Updated">
-            <div className="i-ph:clock w-3.5 h-3.5" />
-            {new Date(repo.updated_at).toLocaleDateString(undefined, {
-              year: 'numeric',
-              month: 'short',
-              day: 'numeric',
-            })}
-          </span>
-          <div className="flex items-center gap-2 ml-auto">
-            {onClone && (
-              <button
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-
-                  const cloneUrl = `https://github.com/${repo.full_name}.git`;
-                  onClone(cloneUrl);
-                }}
-                className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
-                title="Clone repository"
-              >
-                <div className="i-ph:git-branch w-3.5 h-3.5" />
-                Clone
-              </button>
-            )}
-            <span className="flex items-center gap-1 group-hover:text-bolt-elements-item-contentAccent transition-colors">
-              <div className="i-ph:arrow-square-out w-3.5 h-3.5" />
-              View
-            </span>
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}
diff --git a/app/components/@settings/tabs/connections/github/RepositoryList.tsx b/app/components/@settings/tabs/connections/github/RepositoryList.tsx
deleted file mode 100644
index ba9e6ae..0000000
--- a/app/components/@settings/tabs/connections/github/RepositoryList.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Button } from '~/components/ui/Button';
-import { RepositoryCard } from './RepositoryCard';
-import type { GitHubRepoInfo } from '~/types/GitHub';
-
-interface RepositoryListProps {
-  repositories: GitHubRepoInfo[];
-  onClone?: (repoUrl: string) => void;
-  onRefresh?: () => void;
-  isRefreshing?: boolean;
-}
-
-const MAX_REPOS_PER_PAGE = 20;
-
-export function RepositoryList({ repositories, onClone, onRefresh, isRefreshing }: RepositoryListProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isSearching, setIsSearching] = useState(false);
-
-  const filteredRepositories = useMemo(() => {
-    if (!searchQuery) {
-      return repositories;
-    }
-
-    setIsSearching(true);
-
-    const filtered = repositories.filter(
-      (repo) =>
-        repo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        repo.full_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (repo.description && repo.description.toLowerCase().includes(searchQuery.toLowerCase())) ||
-        (repo.language && repo.language.toLowerCase().includes(searchQuery.toLowerCase())) ||
-        (repo.topics && repo.topics.some((topic) => topic.toLowerCase().includes(searchQuery.toLowerCase()))),
-    );
-
-    setIsSearching(false);
-
-    return filtered;
-  }, [repositories, searchQuery]);
-
-  const totalPages = Math.ceil(filteredRepositories.length / MAX_REPOS_PER_PAGE);
-  const startIndex = (currentPage - 1) * MAX_REPOS_PER_PAGE;
-  const endIndex = startIndex + MAX_REPOS_PER_PAGE;
-  const currentRepositories = filteredRepositories.slice(startIndex, endIndex);
-
-  const handleSearch = (query: string) => {
-    setSearchQuery(query);
-    setCurrentPage(1); // Reset to first page when searching
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
-          Repositories ({filteredRepositories.length})
-        </h4>
-        {onRefresh && (
-          <Button
-            onClick={onRefresh}
-            disabled={isRefreshing}
-            variant="outline"
-            size="sm"
-            className="flex items-center gap-2"
-          >
-            {isRefreshing ? (
-              <div className="i-ph:spinner animate-spin w-4 h-4" />
-            ) : (
-              <div className="i-ph:arrows-clockwise w-4 h-4" />
-            )}
-            Refresh
-          </Button>
-        )}
-      </div>
-
-      {/* Search Input */}
-      <div className="relative">
-        <input
-          type="text"
-          placeholder="Search repositories by name, description, language, or topics..."
-          value={searchQuery}
-          onChange={(e) => handleSearch(e.target.value)}
-          className="w-full px-4 py-2 pl-10 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
-        />
-        <div className="absolute left-3 top-1/2 -translate-y-1/2">
-          {isSearching ? (
-            <div className="i-ph:spinner animate-spin w-4 h-4 text-bolt-elements-textSecondary" />
-          ) : (
-            <div className="i-ph:magnifying-glass w-4 h-4 text-bolt-elements-textSecondary" />
-          )}
-        </div>
-      </div>
-
-      {/* Repository Grid */}
-      <div className="space-y-4">
-        {filteredRepositories.length === 0 ? (
-          <div className="text-center py-8 text-bolt-elements-textSecondary">
-            {searchQuery ? 'No repositories found matching your search.' : 'No repositories available.'}
-          </div>
-        ) : (
-          <>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {currentRepositories.map((repo) => (
-                <RepositoryCard key={repo.id} repo={repo} onClone={onClone} />
-              ))}
-            </div>
-
-            {/* Pagination Controls */}
-            {totalPages > 1 && (
-              <div className="flex items-center justify-between pt-4 border-t border-bolt-elements-borderColor">
-                <div className="text-sm text-bolt-elements-textSecondary">
-                  Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
-                  {Math.min(endIndex, filteredRepositories.length)} of {filteredRepositories.length} repositories
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
-                    disabled={currentPage === 1}
-                    variant="outline"
-                    size="sm"
-                  >
-                    <div className="i-ph:caret-left w-4 h-4" />
-                    Previous
-                  </Button>
-                  <span className="text-sm text-bolt-elements-textSecondary px-3">
-                    {currentPage} of {totalPages}
-                  </span>
-                  <Button
-                    onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
-                    disabled={currentPage === totalPages}
-                    variant="outline"
-                    size="sm"
-                  >
-                    Next
-                    <div className="i-ph:caret-right w-4 h-4" />
-                  </Button>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/@settings/tabs/connections/github/StatsDisplay.tsx b/app/components/@settings/tabs/connections/github/StatsDisplay.tsx
deleted file mode 100644
index 9f2b926..0000000
--- a/app/components/@settings/tabs/connections/github/StatsDisplay.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React from 'react';
-import { Button } from '~/components/ui/Button';
-import type { GitHubStats } from '~/types/GitHub';
-
-interface StatsDisplayProps {
-  stats: GitHubStats;
-  onRefresh?: () => void;
-  isRefreshing?: boolean;
-}
-
-export function StatsDisplay({ stats, onRefresh, isRefreshing }: StatsDisplayProps) {
-  // Calculate top languages for display
-  const topLanguages = Object.entries(stats.languages || {})
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, 5);
-
-  return (
-    <div className="space-y-4">
-      {/* Repository Stats */}
-      <div>
-        <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Repository Stats</h5>
-        <div className="grid grid-cols-2 gap-4">
-          {[
-            {
-              label: 'Public Repos',
-              value: stats.publicRepos || 0,
-            },
-            {
-              label: 'Private Repos',
-              value: stats.privateRepos || 0,
-            },
-          ].map((stat, index) => (
-            <div
-              key={index}
-              className="flex flex-col p-3 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor"
-            >
-              <span className="text-xs text-bolt-elements-textSecondary">{stat.label}</span>
-              <span className="text-lg font-medium text-bolt-elements-textPrimary">{stat.value.toLocaleString()}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Contribution Stats */}
-      <div>
-        <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Contribution Stats</h5>
-        <div className="grid grid-cols-3 gap-4">
-          {[
-            {
-              label: 'Stars',
-              value: stats.totalStars || stats.stars || 0,
-              icon: 'i-ph:star',
-              iconColor: 'text-bolt-elements-icon-warning',
-            },
-            {
-              label: 'Forks',
-              value: stats.totalForks || stats.forks || 0,
-              icon: 'i-ph:git-fork',
-              iconColor: 'text-bolt-elements-icon-info',
-            },
-            {
-              label: 'Followers',
-              value: stats.followers || 0,
-              icon: 'i-ph:users',
-              iconColor: 'text-bolt-elements-icon-success',
-            },
-          ].map((stat, index) => (
-            <div
-              key={index}
-              className="flex flex-col p-3 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor"
-            >
-              <span className="text-xs text-bolt-elements-textSecondary">{stat.label}</span>
-              <span className="text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-1">
-                <div className={`${stat.icon} w-4 h-4 ${stat.iconColor}`} />
-                {stat.value.toLocaleString()}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Gist Stats */}
-      <div>
-        <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Gist Stats</h5>
-        <div className="grid grid-cols-2 gap-4">
-          {[
-            {
-              label: 'Public Gists',
-              value: stats.publicGists || 0,
-              icon: 'i-ph:note',
-            },
-            {
-              label: 'Total Gists',
-              value: stats.totalGists || 0,
-              icon: 'i-ph:note-blank',
-            },
-          ].map((stat, index) => (
-            <div
-              key={index}
-              className="flex flex-col p-3 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor"
-            >
-              <span className="text-xs text-bolt-elements-textSecondary">{stat.label}</span>
-              <span className="text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-1">
-                <div className={`${stat.icon} w-4 h-4 text-bolt-elements-icon-tertiary`} />
-                {stat.value.toLocaleString()}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Top Languages */}
-      {topLanguages.length > 0 && (
-        <div>
-          <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Top Languages</h5>
-          <div className="space-y-2">
-            {topLanguages.map(([language, count]) => (
-              <div key={language} className="flex items-center justify-between">
-                <span className="text-sm text-bolt-elements-textPrimary">{language}</span>
-                <span className="text-sm text-bolt-elements-textSecondary">{count} repositories</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Recent Activity */}
-      {stats.recentActivity && stats.recentActivity.length > 0 && (
-        <div>
-          <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Recent Activity</h5>
-          <div className="space-y-2">
-            {stats.recentActivity.slice(0, 3).map((activity) => (
-              <div key={activity.id} className="flex items-center gap-2 text-sm">
-                <div className="i-ph:git-commit w-3 h-3 text-bolt-elements-icon-tertiary" />
-                <span className="text-bolt-elements-textSecondary">
-                  {activity.type.replace('Event', '')} in {activity.repo.name}
-                </span>
-                <span className="text-xs text-bolt-elements-textTertiary ml-auto">
-                  {new Date(activity.created_at).toLocaleDateString()}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <div className="pt-2 border-t border-bolt-elements-borderColor">
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-bolt-elements-textSecondary">
-            Last updated: {new Date(stats.lastUpdated).toLocaleString()}
-          </span>
-          {onRefresh && (
-            <Button onClick={onRefresh} disabled={isRefreshing} variant="outline" size="sm" className="text-xs">
-              {isRefreshing ? 'Refreshing...' : 'Refresh'}
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/@settings/tabs/connections/github/index.ts b/app/components/@settings/tabs/connections/github/index.ts
deleted file mode 100644
index 5b906f8..0000000
--- a/app/components/@settings/tabs/connections/github/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as GitHubConnection } from './GitHubConnection';
-export { RepositoryCard } from './RepositoryCard';
-export { RepositoryList } from './RepositoryList';
-export { StatsDisplay } from './StatsDisplay';
-export { AuthDialog } from './AuthDialog';
diff --git a/app/components/@settings/tabs/connections/gitlab/GitLabConnection.tsx b/app/components/@settings/tabs/connections/gitlab/GitLabConnection.tsx
deleted file mode 100644
index 28b4112..0000000
--- a/app/components/@settings/tabs/connections/gitlab/GitLabConnection.tsx
+++ /dev/null
@@ -1,389 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { toast } from 'react-toastify';
-import { classNames } from '~/utils/classNames';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
-import { Button } from '~/components/ui/Button';
-import { useGitLabConnection } from '~/lib/stores/gitlabConnection';
-import { RepositoryList } from './RepositoryList';
-import { StatsDisplay } from './StatsDisplay';
-import type { GitLabProjectInfo } from '~/types/GitLab';
-
-interface GitLabConnectionProps {
-  onCloneRepository?: (repoUrl: string) => void;
-}
-
-export default function GitLabConnection({ onCloneRepository }: GitLabConnectionProps = {}) {
-  const {
-    connection: connectionAtom,
-    isConnected,
-    user: userAtom,
-    stats,
-    gitlabUrl: gitlabUrlAtom,
-    connect,
-    disconnect,
-    fetchStats,
-    loadSavedConnection,
-    setGitLabUrl,
-    setToken,
-    autoConnect,
-  } = useGitLabConnection();
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [isFetchingStats, setIsFetchingStats] = useState(false);
-  const [isStatsExpanded, setIsStatsExpanded] = useState(false);
-
-  useEffect(() => {
-    const initializeConnection = async () => {
-      setIsLoading(true);
-
-      const saved = loadSavedConnection();
-
-      if (saved?.user && saved?.token) {
-        // If we have stats, no need to fetch them again
-        if (!saved.stats || !saved.stats.projects || saved.stats.projects.length === 0) {
-          await fetchStats();
-        }
-      } else if (import.meta.env?.VITE_GITLAB_ACCESS_TOKEN) {
-        // Auto-connect using environment variable if no saved connection
-        const result = await autoConnect();
-
-        if (result.success) {
-          toast.success('Connected to GitLab automatically');
-        }
-      }
-
-      setIsLoading(false);
-    };
-
-    initializeConnection();
-  }, [autoConnect, fetchStats, loadSavedConnection]);
-
-  const handleConnect = async (event: React.FormEvent) => {
-    event.preventDefault();
-    setIsConnecting(true);
-
-    try {
-      const result = await connect(connectionAtom.get().token, gitlabUrlAtom.get());
-
-      if (result.success) {
-        toast.success('Connected to GitLab successfully');
-        await fetchStats();
-      } else {
-        toast.error(`Failed to connect to GitLab: ${result.error}`);
-      }
-    } catch (error) {
-      console.error('Failed to connect to GitLab:', error);
-      toast.error(`Failed to connect to GitLab: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    } finally {
-      setIsConnecting(false);
-    }
-  };
-
-  const handleDisconnect = () => {
-    disconnect();
-    toast.success('Disconnected from GitLab');
-  };
-
-  const handleCloneRepository = (repoUrl: string) => {
-    if (onCloneRepository) {
-      onCloneRepository(repoUrl);
-    } else {
-      window.open(repoUrl, '_blank');
-    }
-  };
-
-  if (isLoading || isConnecting || isFetchingStats) {
-    return (
-      <div className="flex items-center justify-center p-4">
-        <div className="flex items-center gap-2">
-          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
-          <span className="text-bolt-elements-textSecondary">Loading...</span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <motion.div
-      className="bg-bolt-elements-background border border-bolt-elements-borderColor rounded-lg"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: 0.2 }}
-    >
-      <div className="p-6 space-y-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-5 h-5 text-orange-600">
-              <svg viewBox="0 0 24 24" className="w-5 h-5">
-                <path
-                  fill="currentColor"
-                  d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
-                />
-              </svg>
-            </div>
-            <h3 className="text-base font-medium text-bolt-elements-textPrimary">GitLab Connection</h3>
-          </div>
-        </div>
-
-        {!isConnected && (
-          <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
-            <p className="flex items-center gap-1 mb-1">
-              <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success" />
-              <span className="font-medium">Tip:</span> You can also set the{' '}
-              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 rounded">VITE_GITLAB_ACCESS_TOKEN</code>{' '}
-              environment variable to connect automatically.
-            </p>
-            <p>
-              For self-hosted GitLab instances, also set{' '}
-              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 rounded">
-                VITE_GITLAB_URL=https://your-gitlab-instance.com
-              </code>
-            </p>
-          </div>
-        )}
-
-        <div className="grid grid-cols-1 gap-4">
-          <div>
-            <label className="block text-sm text-bolt-elements-textSecondary mb-2">GitLab URL</label>
-            <input
-              type="text"
-              value={gitlabUrlAtom.get()}
-              onChange={(e) => setGitLabUrl(e.target.value)}
-              disabled={isConnecting || isConnected.get()}
-              placeholder="https://gitlab.com"
-              className={classNames(
-                'w-full px-3 py-2 rounded-lg text-sm',
-                'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
-                'border border-[#E5E5E5] dark:border-[#333333]',
-                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
-                'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
-                'disabled:opacity-50',
-              )}
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm text-bolt-elements-textSecondary mb-2">Access Token</label>
-            <input
-              type="password"
-              value={connectionAtom.get().token}
-              onChange={(e) => setToken(e.target.value)}
-              disabled={isConnecting || isConnected.get()}
-              placeholder="Enter your GitLab access token"
-              className={classNames(
-                'w-full px-3 py-2 rounded-lg text-sm',
-                'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
-                'border border-[#E5E5E5] dark:border-[#333333]',
-                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
-                'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
-                'disabled:opacity-50',
-              )}
-            />
-            <div className="mt-2 text-sm text-bolt-elements-textSecondary">
-              <a
-                href={`${gitlabUrlAtom.get()}/-/user_settings/personal_access_tokens`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
-              >
-                Get your token
-                <div className="i-ph:arrow-square-out w-4 h-4" />
-              </a>
-              <span className="mx-2">•</span>
-              <span>Required scopes: api, read_repository</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between">
-          {!isConnected ? (
-            <button
-              onClick={handleConnect}
-              disabled={isConnecting || !connectionAtom.get().token}
-              className={classNames(
-                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
-                'bg-[#FC6D26] text-white',
-                'hover:bg-[#E24329] hover:text-white',
-                'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
-                'transform active:scale-95',
-              )}
-            >
-              {isConnecting ? (
-                <>
-                  <div className="i-ph:spinner-gap animate-spin" />
-                  Connecting...
-                </>
-              ) : (
-                <>
-                  <div className="i-ph:plug-charging w-4 h-4" />
-                  Connect
-                </>
-              )}
-            </button>
-          ) : (
-            <>
-              <div className="flex items-center justify-between w-full">
-                <div className="flex items-center gap-4">
-                  <button
-                    onClick={handleDisconnect}
-                    className={classNames(
-                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
-                      'bg-red-500 text-white',
-                      'hover:bg-red-600',
-                    )}
-                  >
-                    <div className="i-ph:plug w-4 h-4" />
-                    Disconnect
-                  </button>
-                  <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
-                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
-                    Connected to GitLab
-                  </span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    onClick={() => window.open(`${gitlabUrlAtom.get()}/dashboard`, '_blank', 'noopener,noreferrer')}
-                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
-                  >
-                    <div className="i-ph:layout-dashboard w-4 h-4" />
-                    Dashboard
-                  </Button>
-                  <Button
-                    onClick={async () => {
-                      setIsFetchingStats(true);
-
-                      const result = await fetchStats();
-                      setIsFetchingStats(false);
-
-                      if (result.success) {
-                        toast.success('GitLab stats refreshed');
-                      } else {
-                        toast.error(`Failed to refresh stats: ${result.error}`);
-                      }
-                    }}
-                    disabled={isFetchingStats}
-                    variant="outline"
-                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
-                  >
-                    {isFetchingStats ? (
-                      <>
-                        <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-                        Refreshing...
-                      </>
-                    ) : (
-                      <>
-                        <div className="i-ph:arrows-clockwise w-4 h-4" />
-                        Refresh Stats
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-
-        {isConnected.get() && userAtom.get() && stats.get() && (
-          <div className="mt-6 border-t border-bolt-elements-borderColor pt-6">
-            <div className="flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 rounded-lg mb-4">
-              <div className="w-12 h-12 rounded-full border-2 border-bolt-elements-item-contentAccent flex items-center justify-center bg-bolt-elements-background-depth-2 overflow-hidden">
-                {userAtom.get()?.avatar_url &&
-                userAtom.get()?.avatar_url !== 'null' &&
-                userAtom.get()?.avatar_url !== '' ? (
-                  <img
-                    src={userAtom.get()?.avatar_url}
-                    alt={userAtom.get()?.username}
-                    className="w-full h-full rounded-full object-cover"
-                    onError={(e) => {
-                      // Fallback to initials if avatar fails to load
-                      const target = e.target as HTMLImageElement;
-                      target.style.display = 'none';
-
-                      const parent = target.parentElement;
-
-                      if (parent) {
-                        const user = userAtom.get();
-                        parent.innerHTML = (user?.name || user?.username || 'U').charAt(0).toUpperCase();
-
-                        parent.classList.add(
-                          'text-white',
-                          'font-semibold',
-                          'text-sm',
-                          'flex',
-                          'items-center',
-                          'justify-center',
-                        );
-                      }
-                    }}
-                  />
-                ) : (
-                  <div className="w-full h-full rounded-full bg-bolt-elements-item-contentAccent flex items-center justify-center text-white font-semibold text-sm">
-                    {(userAtom.get()?.name || userAtom.get()?.username || 'U').charAt(0).toUpperCase()}
-                  </div>
-                )}
-              </div>
-              <div>
-                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
-                  {userAtom.get()?.name || userAtom.get()?.username}
-                </h4>
-                <p className="text-sm text-bolt-elements-textSecondary">{userAtom.get()?.username}</p>
-              </div>
-            </div>
-
-            <Collapsible open={isStatsExpanded} onOpenChange={setIsStatsExpanded}>
-              <CollapsibleTrigger asChild>
-                <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
-                  <div className="flex items-center gap-2">
-                    <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent" />
-                    <span className="text-sm font-medium text-bolt-elements-textPrimary">GitLab Stats</span>
-                  </div>
-                  <div
-                    className={classNames(
-                      'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
-                      isStatsExpanded ? 'rotate-180' : '',
-                    )}
-                  />
-                </div>
-              </CollapsibleTrigger>
-              <CollapsibleContent className="overflow-hidden">
-                <div className="space-y-4 mt-4">
-                  <StatsDisplay
-                    stats={stats.get()!}
-                    onRefresh={async () => {
-                      const result = await fetchStats();
-
-                      if (result.success) {
-                        toast.success('Stats refreshed');
-                      } else {
-                        toast.error(`Failed to refresh stats: ${result.error}`);
-                      }
-                    }}
-                    isRefreshing={isFetchingStats}
-                  />
-
-                  <RepositoryList
-                    repositories={stats.get()?.projects || []}
-                    onClone={(repo: GitLabProjectInfo) => handleCloneRepository(repo.http_url_to_repo)}
-                    onRefresh={async () => {
-                      const result = await fetchStats(true); // Force refresh
-
-                      if (result.success) {
-                        toast.success('Repositories refreshed');
-                      } else {
-                        toast.error(`Failed to refresh repositories: ${result.error}`);
-                      }
-                    }}
-                    isRefreshing={isFetchingStats}
-                  />
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          </div>
-        )}
-      </div>
-    </motion.div>
-  );
-}
diff --git a/app/components/@settings/tabs/github/GitHubTab.tsx b/app/components/@settings/tabs/github/GitHubTab.tsx
new file mode 100644
index 0000000..b619fb5
--- /dev/null
+++ b/app/components/@settings/tabs/github/GitHubTab.tsx
@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useGitHubConnection, useGitHubStats } from '~/lib/hooks';
+import { LoadingState, ErrorState, ConnectionTestIndicator, RepositoryCard } from './components/shared';
+import { GitHubConnection } from './components/GitHubConnection';
+import { GitHubUserProfile } from './components/GitHubUserProfile';
+import { GitHubStats } from './components/GitHubStats';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { classNames } from '~/utils/classNames';
+import { ChevronDown } from 'lucide-react';
+import { GitHubErrorBoundary } from './components/GitHubErrorBoundary';
+import { GitHubProgressiveLoader } from './components/GitHubProgressiveLoader';
+import { GitHubCacheManager } from './components/GitHubCacheManager';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+// GitHub logo SVG component
+const GithubLogo = () => (
+  <svg viewBox="0 0 24 24" className="w-5 h-5">
+    <path
+      fill="currentColor"
+      d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+    />
+  </svg>
+);
+
+export default function GitHubTab() {
+  const { connection, isConnected, isLoading, error, testConnection } = useGitHubConnection();
+  const {
+    stats,
+    isLoading: isStatsLoading,
+    error: statsError,
+  } = useGitHubStats(
+    connection,
+    {
+      autoFetch: true,
+      cacheTimeout: 30 * 60 * 1000, // 30 minutes
+    },
+    isConnected && connection ? !connection.token : false,
+  ); // Use server-side when no token but connected
+
+  const [connectionTest, setConnectionTest] = useState<ConnectionTestResult | null>(null);
+  const [isStatsExpanded, setIsStatsExpanded] = useState(false);
+  const [isReposExpanded, setIsReposExpanded] = useState(false);
+
+  const handleTestConnection = async () => {
+    if (!connection?.user) {
+      setConnectionTest({
+        status: 'error',
+        message: 'No connection established',
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    setConnectionTest({
+      status: 'testing',
+      message: 'Testing connection...',
+    });
+
+    try {
+      const isValid = await testConnection();
+
+      if (isValid) {
+        setConnectionTest({
+          status: 'success',
+          message: `Connected successfully as ${connection.user.login}`,
+          timestamp: Date.now(),
+        });
+      } else {
+        setConnectionTest({
+          status: 'error',
+          message: 'Connection test failed',
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      setConnectionTest({
+        status: 'error',
+        message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  // Loading state for initial connection check
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GithubLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
+        </div>
+        <LoadingState message="Checking GitHub connection..." />
+      </div>
+    );
+  }
+
+  // Error state for connection issues
+  if (error && !connection) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GithubLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
+        </div>
+        <ErrorState
+          title="Connection Error"
+          message={error}
+          onRetry={() => window.location.reload()}
+          retryLabel="Reload Page"
+        />
+      </div>
+    );
+  }
+
+  // Not connected state
+  if (!isConnected || !connection) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GithubLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
+        </div>
+        <p className="text-sm text-bolt-elements-textSecondary">
+          Connect your GitHub account to enable advanced repository management features, statistics, and seamless
+          integration.
+        </p>
+        <GitHubConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
+      </div>
+    );
+  }
+
+  return (
+    <GitHubErrorBoundary>
+      <div className="space-y-6">
+        {/* Header */}
+        <motion.div
+          className="flex items-center justify-between gap-2"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+        >
+          <div className="flex items-center gap-2">
+            <GithubLogo />
+            <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              GitHub Integration
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {connection?.rateLimit && (
+              <div className="flex items-center gap-2 px-3 py-1 bg-bolt-elements-background-depth-1 rounded-lg text-xs">
+                <div className="i-ph:cloud w-4 h-4 text-bolt-elements-textSecondary" />
+                <span className="text-bolt-elements-textSecondary">
+                  API: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
+                </span>
+              </div>
+            )}
+          </div>
+        </motion.div>
+
+        <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+          Manage your GitHub integration with advanced repository features and comprehensive statistics
+        </p>
+
+        {/* Connection Test Results */}
+        <ConnectionTestIndicator
+          status={connectionTest?.status || null}
+          message={connectionTest?.message}
+          timestamp={connectionTest?.timestamp}
+        />
+
+        {/* Connection Component */}
+        <GitHubConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
+
+        {/* User Profile */}
+        {connection.user && <GitHubUserProfile user={connection.user} />}
+
+        {/* Stats Section */}
+        <GitHubStats connection={connection} isExpanded={isStatsExpanded} onToggleExpanded={setIsStatsExpanded} />
+
+        {/* Repositories Section */}
+        {stats?.repos && stats.repos.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+            className="border-t border-bolt-elements-borderColor pt-6"
+          >
+            <Collapsible open={isReposExpanded} onOpenChange={setIsReposExpanded}>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
+                  <div className="flex items-center gap-2">
+                    <div className="i-ph:folder w-4 h-4 text-bolt-elements-item-contentAccent" />
+                    <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                      All Repositories ({stats.repos.length})
+                    </span>
+                  </div>
+                  <ChevronDown
+                    className={classNames(
+                      'w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                      isReposExpanded ? 'rotate-180' : '',
+                    )}
+                  />
+                </div>
+              </CollapsibleTrigger>
+
+              <CollapsibleContent className="overflow-hidden">
+                <div className="mt-4 space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {(isReposExpanded ? stats.repos : stats.repos.slice(0, 12)).map((repo) => (
+                      <RepositoryCard
+                        key={repo.full_name}
+                        repository={repo}
+                        variant="detailed"
+                        showHealthScore
+                        showExtendedMetrics
+                        onSelect={() => window.open(repo.html_url, '_blank', 'noopener,noreferrer')}
+                      />
+                    ))}
+                  </div>
+
+                  {stats.repos.length > 12 && !isReposExpanded && (
+                    <div className="text-center">
+                      <Button
+                        variant="outline"
+                        onClick={() => setIsReposExpanded(true)}
+                        className="text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                      >
+                        Show {stats.repos.length - 12} more repositories
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </motion.div>
+        )}
+
+        {/* Stats Error State */}
+        {statsError && !stats && (
+          <ErrorState
+            title="Failed to Load Statistics"
+            message={statsError}
+            onRetry={() => window.location.reload()}
+            retryLabel="Retry"
+          />
+        )}
+
+        {/* Stats Loading State */}
+        {isStatsLoading && !stats && (
+          <GitHubProgressiveLoader
+            isLoading={isStatsLoading}
+            loadingMessage="Loading GitHub statistics..."
+            showProgress={true}
+            progressSteps={[
+              { key: 'user', label: 'Fetching user info', completed: !!connection?.user, loading: !connection?.user },
+              { key: 'repos', label: 'Loading repositories', completed: false, loading: true },
+              { key: 'stats', label: 'Calculating statistics', completed: false },
+              { key: 'cache', label: 'Updating cache', completed: false },
+            ]}
+          >
+            <div />
+          </GitHubProgressiveLoader>
+        )}
+
+        {/* Cache Management Section - Only show when connected */}
+        {isConnected && connection && (
+          <div className="mt-8 pt-6 border-t border-bolt-elements-borderColor">
+            <GitHubCacheManager showStats={true} />
+          </div>
+        )}
+      </div>
+    </GitHubErrorBoundary>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubAuthDialog.tsx b/app/components/@settings/tabs/github/components/GitHubAuthDialog.tsx
new file mode 100644
index 0000000..65a0486
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubAuthDialog.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { useGitHubConnection } from '~/lib/hooks';
+
+interface GitHubAuthDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function GitHubAuthDialog({ isOpen, onClose, onSuccess }: GitHubAuthDialogProps) {
+  const { connect, isConnecting, error } = useGitHubConnection();
+  const [token, setToken] = useState('');
+  const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
+
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!token.trim()) {
+      return;
+    }
+
+    try {
+      await connect(token, tokenType);
+      setToken(''); // Clear token on successful connection
+      onSuccess?.();
+      onClose();
+    } catch {
+      // Error handling is done in the hook
+    }
+  };
+
+  const handleClose = () => {
+    setToken('');
+    onClose();
+  };
+
+  return (
+    <Dialog.Root open={isOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-[200]" />
+        <Dialog.Content
+          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[201] w-full max-w-md"
+          onEscapeKeyDown={handleClose}
+          onPointerDownOutside={handleClose}
+        >
+          <motion.div
+            className="bg-bolt-elements-background border border-bolt-elements-borderColor rounded-lg shadow-lg"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+          >
+            <div className="p-6 space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Connect to GitHub</h2>
+                <button
+                  onClick={handleClose}
+                  className="p-1 rounded-md hover:bg-bolt-elements-item-backgroundActive/10"
+                >
+                  <div className="i-ph:x w-4 h-4 text-bolt-elements-textSecondary" />
+                </button>
+              </div>
+
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 p-3 rounded-lg">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You need a GitHub token to deploy repositories.
+                </p>
+                <p>Required scopes: repo, read:org, read:user</p>
+              </div>
+
+              <form onSubmit={handleConnect} className="space-y-4">
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary mb-2">Token Type</label>
+                  <select
+                    value={tokenType}
+                    onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
+                    disabled={isConnecting}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor',
+                      'text-bolt-elements-textPrimary',
+                      'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent',
+                      'disabled:opacity-50',
+                    )}
+                  >
+                    <option value="classic">Personal Access Token (Classic)</option>
+                    <option value="fine-grained">Fine-grained Token</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary mb-2">
+                    {tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+                  </label>
+                  <input
+                    type="password"
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    disabled={isConnecting}
+                    placeholder={`Enter your GitHub ${
+                      tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
+                    }`}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor',
+                      'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                      'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                      'disabled:opacity-50',
+                    )}
+                  />
+                  <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                    <a
+                      href={`https://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                    >
+                      Get your token
+                      <div className="i-ph:arrow-square-out w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+
+                {error && (
+                  <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+                    <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                  </div>
+                )}
+
+                <div className="flex items-center justify-end gap-3 pt-4">
+                  <button
+                    type="button"
+                    onClick={handleClose}
+                    className="px-4 py-2 text-sm text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={isConnecting || !token.trim()}
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                      'bg-[#303030] text-white',
+                      'hover:bg-[#5E41D0] hover:text-white',
+                      'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                    )}
+                  >
+                    {isConnecting ? (
+                      <>
+                        <div className="i-ph:spinner-gap animate-spin" />
+                        Connecting...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Connect
+                      </>
+                    )}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </motion.div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubCacheManager.tsx b/app/components/@settings/tabs/github/components/GitHubCacheManager.tsx
new file mode 100644
index 0000000..0496929
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubCacheManager.tsx
@@ -0,0 +1,367 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { Database, Trash2, RefreshCw, Clock, HardDrive, CheckCircle } from 'lucide-react';
+
+interface CacheEntry {
+  key: string;
+  size: number;
+  timestamp: number;
+  lastAccessed: number;
+  data: any;
+}
+
+interface CacheStats {
+  totalSize: number;
+  totalEntries: number;
+  oldestEntry: number;
+  newestEntry: number;
+  hitRate?: number;
+}
+
+interface GitHubCacheManagerProps {
+  className?: string;
+  showStats?: boolean;
+}
+
+// Cache management utilities
+class CacheManagerService {
+  private static readonly _cachePrefix = 'github_';
+  private static readonly _cacheKeys = [
+    'github_connection',
+    'github_stats_cache',
+    'github_repositories_cache',
+    'github_user_cache',
+    'github_rate_limits',
+  ];
+
+  static getCacheEntries(): CacheEntry[] {
+    const entries: CacheEntry[] = [];
+
+    for (const key of this._cacheKeys) {
+      try {
+        const data = localStorage.getItem(key);
+
+        if (data) {
+          const parsed = JSON.parse(data);
+          entries.push({
+            key,
+            size: new Blob([data]).size,
+            timestamp: parsed.timestamp || Date.now(),
+            lastAccessed: parsed.lastAccessed || Date.now(),
+            data: parsed,
+          });
+        }
+      } catch (error) {
+        console.warn(`Failed to parse cache entry: ${key}`, error);
+      }
+    }
+
+    return entries.sort((a, b) => b.lastAccessed - a.lastAccessed);
+  }
+
+  static getCacheStats(): CacheStats {
+    const entries = this.getCacheEntries();
+
+    if (entries.length === 0) {
+      return {
+        totalSize: 0,
+        totalEntries: 0,
+        oldestEntry: 0,
+        newestEntry: 0,
+      };
+    }
+
+    const totalSize = entries.reduce((sum, entry) => sum + entry.size, 0);
+    const timestamps = entries.map((e) => e.timestamp);
+
+    return {
+      totalSize,
+      totalEntries: entries.length,
+      oldestEntry: Math.min(...timestamps),
+      newestEntry: Math.max(...timestamps),
+    };
+  }
+
+  static clearCache(keys?: string[]): void {
+    const keysToRemove = keys || this._cacheKeys;
+
+    for (const key of keysToRemove) {
+      localStorage.removeItem(key);
+    }
+  }
+
+  static clearExpiredCache(maxAge: number = 24 * 60 * 60 * 1000): number {
+    const entries = this.getCacheEntries();
+    const now = Date.now();
+    let removedCount = 0;
+
+    for (const entry of entries) {
+      if (now - entry.timestamp > maxAge) {
+        localStorage.removeItem(entry.key);
+        removedCount++;
+      }
+    }
+
+    return removedCount;
+  }
+
+  static compactCache(): void {
+    const entries = this.getCacheEntries();
+
+    for (const entry of entries) {
+      try {
+        // Re-serialize with minimal data
+        const compacted = {
+          ...entry.data,
+          lastAccessed: Date.now(),
+        };
+        localStorage.setItem(entry.key, JSON.stringify(compacted));
+      } catch (error) {
+        console.warn(`Failed to compact cache entry: ${entry.key}`, error);
+      }
+    }
+  }
+
+  static formatSize(bytes: number): string {
+    if (bytes === 0) {
+      return '0 B';
+    }
+
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  }
+}
+
+export function GitHubCacheManager({ className = '', showStats = true }: GitHubCacheManagerProps) {
+  const [cacheEntries, setCacheEntries] = useState<CacheEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastClearTime, setLastClearTime] = useState<number | null>(null);
+
+  const refreshCacheData = useCallback(() => {
+    setCacheEntries(CacheManagerService.getCacheEntries());
+  }, []);
+
+  useEffect(() => {
+    refreshCacheData();
+  }, [refreshCacheData]);
+
+  const cacheStats = useMemo(() => CacheManagerService.getCacheStats(), [cacheEntries]);
+
+  const handleClearAll = useCallback(async () => {
+    setIsLoading(true);
+
+    try {
+      CacheManagerService.clearCache();
+      setLastClearTime(Date.now());
+      refreshCacheData();
+
+      // Trigger a page refresh to update all components
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } catch (error) {
+      console.error('Failed to clear cache:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshCacheData]);
+
+  const handleClearExpired = useCallback(() => {
+    setIsLoading(true);
+
+    try {
+      const removedCount = CacheManagerService.clearExpiredCache();
+      refreshCacheData();
+
+      if (removedCount > 0) {
+        // Show success message or trigger update
+        console.log(`Removed ${removedCount} expired cache entries`);
+      }
+    } catch (error) {
+      console.error('Failed to clear expired cache:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshCacheData]);
+
+  const handleCompactCache = useCallback(() => {
+    setIsLoading(true);
+
+    try {
+      CacheManagerService.compactCache();
+      refreshCacheData();
+    } catch (error) {
+      console.error('Failed to compact cache:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshCacheData]);
+
+  const handleClearSpecific = useCallback(
+    (key: string) => {
+      setIsLoading(true);
+
+      try {
+        CacheManagerService.clearCache([key]);
+        refreshCacheData();
+      } catch (error) {
+        console.error(`Failed to clear cache key: ${key}`, error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [refreshCacheData],
+  );
+
+  if (!showStats && cacheEntries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        'space-y-4 p-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Database className="w-4 h-4 text-bolt-elements-item-contentAccent" />
+          <h3 className="text-sm font-medium text-bolt-elements-textPrimary">GitHub Cache Management</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={refreshCacheData} disabled={isLoading}>
+            <RefreshCw className={classNames('w-3 h-3', isLoading ? 'animate-spin' : '')} />
+          </Button>
+        </div>
+      </div>
+
+      {showStats && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <HardDrive className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Total Size</span>
+            </div>
+            <p className="text-sm font-semibold text-bolt-elements-textPrimary">
+              {CacheManagerService.formatSize(cacheStats.totalSize)}
+            </p>
+          </div>
+
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <Database className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Entries</span>
+            </div>
+            <p className="text-sm font-semibold text-bolt-elements-textPrimary">{cacheStats.totalEntries}</p>
+          </div>
+
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <Clock className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Oldest</span>
+            </div>
+            <p className="text-xs text-bolt-elements-textSecondary">
+              {cacheStats.oldestEntry ? new Date(cacheStats.oldestEntry).toLocaleDateString() : 'N/A'}
+            </p>
+          </div>
+
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <CheckCircle className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Status</span>
+            </div>
+            <p className="text-xs text-green-600 dark:text-green-400">
+              {cacheStats.totalEntries > 0 ? 'Active' : 'Empty'}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {cacheEntries.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-xs font-medium text-bolt-elements-textSecondary">
+            Cache Entries ({cacheEntries.length})
+          </h4>
+
+          <div className="space-y-2 max-h-48 overflow-y-auto">
+            {cacheEntries.map((entry) => (
+              <div
+                key={entry.key}
+                className="flex items-center justify-between p-2 bg-bolt-elements-background-depth-2 rounded border border-bolt-elements-borderColor"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs font-medium text-bolt-elements-textPrimary truncate">
+                    {entry.key.replace('github_', '')}
+                  </p>
+                  <p className="text-xs text-bolt-elements-textSecondary">
+                    {CacheManagerService.formatSize(entry.size)} • {new Date(entry.lastAccessed).toLocaleString()}
+                  </p>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleClearSpecific(entry.key)}
+                  disabled={isLoading}
+                  className="ml-2"
+                >
+                  <Trash2 className="w-3 h-3 text-red-500" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-wrap gap-2 pt-2 border-t border-bolt-elements-borderColor">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleClearExpired}
+          disabled={isLoading}
+          className="flex items-center gap-1"
+        >
+          <Clock className="w-3 h-3" />
+          <span className="text-xs">Clear Expired</span>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleCompactCache}
+          disabled={isLoading}
+          className="flex items-center gap-1"
+        >
+          <RefreshCw className="w-3 h-3" />
+          <span className="text-xs">Compact</span>
+        </Button>
+
+        {cacheEntries.length > 0 && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClearAll}
+            disabled={isLoading}
+            className="flex items-center gap-1 text-red-600 hover:text-red-700 border-red-200 hover:border-red-300"
+          >
+            <Trash2 className="w-3 h-3" />
+            <span className="text-xs">Clear All</span>
+          </Button>
+        )}
+      </div>
+
+      {lastClearTime && (
+        <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded text-xs text-green-700 dark:text-green-400">
+          <CheckCircle className="w-3 h-3" />
+          <span>Cache cleared successfully at {new Date(lastClearTime).toLocaleTimeString()}</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubConnection.tsx b/app/components/@settings/tabs/github/components/GitHubConnection.tsx
new file mode 100644
index 0000000..f7f5d66
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubConnection.tsx
@@ -0,0 +1,233 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { useGitHubConnection } from '~/lib/hooks';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface GitHubConnectionProps {
+  connectionTest: ConnectionTestResult | null;
+  onTestConnection: () => void;
+}
+
+export function GitHubConnection({ connectionTest, onTestConnection }: GitHubConnectionProps) {
+  const { isConnected, isLoading, isConnecting, connect, disconnect, error } = useGitHubConnection();
+
+  const [token, setToken] = React.useState('');
+  const [tokenType, setTokenType] = React.useState<'classic' | 'fine-grained'>('classic');
+
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('handleConnect called with token:', token ? 'token provided' : 'no token', 'tokenType:', tokenType);
+
+    if (!token.trim()) {
+      console.log('No token provided, returning early');
+      return;
+    }
+
+    try {
+      console.log('Calling connect function...');
+      await connect(token, tokenType);
+      console.log('Connect function completed successfully');
+      setToken(''); // Clear token on successful connection
+    } catch (error) {
+      console.log('Connect function failed:', error);
+
+      // Error handling is done in the hook
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="flex items-center gap-2">
+          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+          <span className="text-bolt-elements-textSecondary">Loading connection...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        {!isConnected && (
+          <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+            <p className="flex items-center gap-1 mb-1">
+              <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+              <span className="font-medium">Tip:</span> You can also set the{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITHUB_ACCESS_TOKEN
+              </code>{' '}
+              environment variable to connect automatically.
+            </p>
+            <p>
+              For fine-grained tokens, also set{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITHUB_TOKEN_TYPE=fine-grained
+              </code>
+            </p>
+          </div>
+        )}
+
+        <form onSubmit={handleConnect} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                Token Type
+              </label>
+              <select
+                value={tokenType}
+                onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
+                disabled={isConnecting || isConnected}
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
+                  'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
+                  'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
+                  'disabled:opacity-50',
+                )}
+              >
+                <option value="classic">Personal Access Token (Classic)</option>
+                <option value="fine-grained">Fine-grained Token</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                {tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+              </label>
+              <input
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                disabled={isConnecting || isConnected}
+                placeholder={`Enter your GitHub ${
+                  tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
+                }`}
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                  'border border-[#E5E5E5] dark:border-[#333333]',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href={`https://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+                <span className="mx-2">•</span>
+                <span>
+                  Required scopes:{' '}
+                  {tokenType === 'classic' ? 'repo, read:org, read:user' : 'Repository access, Organization access'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+              <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            {!isConnected ? (
+              <button
+                type="submit"
+                disabled={isConnecting || !token.trim()}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {isConnecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            ) : (
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-4">
+                  <button
+                    onClick={disconnect}
+                    type="button"
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                      'bg-red-500 text-white',
+                      'hover:bg-red-600',
+                    )}
+                  >
+                    <div className="i-ph:plug w-4 h-4" />
+                    Disconnect
+                  </button>
+                  <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                    Connected to GitHub
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => window.open('https://github.com/dashboard', '_blank', 'noopener,noreferrer')}
+                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                  >
+                    <div className="i-ph:layout w-4 h-4" />
+                    Dashboard
+                  </Button>
+                  <Button
+                    onClick={onTestConnection}
+                    disabled={connectionTest?.status === 'testing'}
+                    variant="outline"
+                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                  >
+                    {connectionTest?.status === 'testing' ? (
+                      <>
+                        <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                        Testing...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Test Connection
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubErrorBoundary.tsx b/app/components/@settings/tabs/github/components/GitHubErrorBoundary.tsx
new file mode 100644
index 0000000..531f682
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubErrorBoundary.tsx
@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+import { Button } from '~/components/ui/Button';
+import { AlertTriangle } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class GitHubErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('GitHub Error Boundary caught an error:', error, errorInfo);
+
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center p-8 text-center space-y-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg">
+          <div className="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
+            <AlertTriangle className="w-6 h-6 text-red-500" />
+          </div>
+
+          <div>
+            <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Integration Error</h3>
+            <p className="text-sm text-bolt-elements-textSecondary mb-4 max-w-md">
+              Something went wrong while loading GitHub data. This could be due to network issues, API limits, or a
+              temporary problem.
+            </p>
+
+            {this.state.error && (
+              <details className="text-xs text-bolt-elements-textTertiary mb-4">
+                <summary className="cursor-pointer hover:text-bolt-elements-textSecondary">Show error details</summary>
+                <pre className="mt-2 p-2 bg-bolt-elements-background-depth-2 rounded text-left overflow-auto">
+                  {this.state.error.message}
+                </pre>
+              </details>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={this.handleRetry}>
+              Try Again
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => window.location.reload()}>
+              Reload Page
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Higher-order component for wrapping components with error boundary
+export function withGitHubErrorBoundary<P extends object>(component: React.ComponentType<P>) {
+  return function WrappedComponent(props: P) {
+    return <GitHubErrorBoundary>{React.createElement(component, props)}</GitHubErrorBoundary>;
+  };
+}
+
+// Hook for handling async errors in GitHub operations
+export function useGitHubErrorHandler() {
+  const handleError = React.useCallback((error: unknown, context?: string) => {
+    console.error(`GitHub Error ${context ? `(${context})` : ''}:`, error);
+
+    /*
+     * You could integrate with error tracking services here
+     * For example: Sentry, LogRocket, etc.
+     */
+
+    return error instanceof Error ? error.message : 'An unknown error occurred';
+  }, []);
+
+  return { handleError };
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubProgressiveLoader.tsx b/app/components/@settings/tabs/github/components/GitHubProgressiveLoader.tsx
new file mode 100644
index 0000000..7f28ee1
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubProgressiveLoader.tsx
@@ -0,0 +1,266 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { Loader2, ChevronDown, RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ProgressiveLoaderProps {
+  isLoading: boolean;
+  isRefreshing?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  onRefresh?: () => void;
+  children: React.ReactNode;
+  className?: string;
+  loadingMessage?: string;
+  refreshingMessage?: string;
+  showProgress?: boolean;
+  progressSteps?: Array<{
+    key: string;
+    label: string;
+    completed: boolean;
+    loading?: boolean;
+    error?: boolean;
+  }>;
+}
+
+export function GitHubProgressiveLoader({
+  isLoading,
+  isRefreshing = false,
+  error,
+  onRetry,
+  onRefresh,
+  children,
+  className = '',
+  loadingMessage = 'Loading...',
+  refreshingMessage = 'Refreshing...',
+  showProgress = false,
+  progressSteps = [],
+}: ProgressiveLoaderProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Calculate progress percentage
+  const progress = useMemo(() => {
+    if (!showProgress || progressSteps.length === 0) {
+      return 0;
+    }
+
+    const completed = progressSteps.filter((step) => step.completed).length;
+
+    return Math.round((completed / progressSteps.length) * 100);
+  }, [showProgress, progressSteps]);
+
+  const handleToggleExpanded = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  // Loading state with progressive steps
+  if (isLoading) {
+    return (
+      <div className={classNames('flex flex-col items-center justify-center py-8', className)}>
+        <div className="relative mb-4">
+          <Loader2 className="w-8 h-8 animate-spin text-bolt-elements-item-contentAccent" />
+          {showProgress && progress > 0 && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="text-xs font-medium text-bolt-elements-item-contentAccent">{progress}%</span>
+            </div>
+          )}
+        </div>
+
+        <div className="text-center space-y-2">
+          <p className="text-sm font-medium text-bolt-elements-textPrimary">{loadingMessage}</p>
+
+          {showProgress && progressSteps.length > 0 && (
+            <div className="w-full max-w-sm">
+              {/* Progress bar */}
+              <div className="w-full bg-bolt-elements-background-depth-2 rounded-full h-2 mb-3">
+                <motion.div
+                  className="bg-bolt-elements-item-contentAccent h-2 rounded-full"
+                  initial={{ width: 0 }}
+                  animate={{ width: `${progress}%` }}
+                  transition={{ duration: 0.5, ease: 'easeOut' }}
+                />
+              </div>
+
+              {/* Steps toggle */}
+              <button
+                onClick={handleToggleExpanded}
+                className="flex items-center justify-center gap-2 text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+              >
+                <span>Show details</span>
+                <ChevronDown
+                  className={classNames(
+                    'w-3 h-3 transform transition-transform duration-200',
+                    isExpanded ? 'rotate-180' : '',
+                  )}
+                />
+              </button>
+
+              {/* Progress steps */}
+              <AnimatePresence>
+                {isExpanded && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="mt-3 space-y-2 overflow-hidden"
+                  >
+                    {progressSteps.map((step) => (
+                      <div key={step.key} className="flex items-center gap-2 text-xs">
+                        {step.error ? (
+                          <AlertCircle className="w-3 h-3 text-red-500 flex-shrink-0" />
+                        ) : step.completed ? (
+                          <CheckCircle className="w-3 h-3 text-green-500 flex-shrink-0" />
+                        ) : step.loading ? (
+                          <Loader2 className="w-3 h-3 animate-spin text-bolt-elements-item-contentAccent flex-shrink-0" />
+                        ) : (
+                          <div className="w-3 h-3 rounded-full border border-bolt-elements-borderColor flex-shrink-0" />
+                        )}
+                        <span
+                          className={classNames(
+                            step.error
+                              ? 'text-red-500'
+                              : step.completed
+                                ? 'text-green-600 dark:text-green-400'
+                                : step.loading
+                                  ? 'text-bolt-elements-textPrimary'
+                                  : 'text-bolt-elements-textSecondary',
+                          )}
+                        >
+                          {step.label}
+                        </span>
+                      </div>
+                    ))}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={classNames('flex flex-col items-center justify-center py-8 text-center space-y-4', className)}>
+        <div className="w-10 h-10 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
+          <AlertCircle className="w-5 h-5 text-red-500" />
+        </div>
+
+        <div>
+          <h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-1">Failed to Load</h3>
+          <p className="text-xs text-bolt-elements-textSecondary mb-4 max-w-sm">{error}</p>
+        </div>
+
+        <div className="flex gap-2">
+          {onRetry && (
+            <Button variant="outline" size="sm" onClick={onRetry} className="text-xs">
+              <RefreshCw className="w-3 h-3 mr-1" />
+              Try Again
+            </Button>
+          )}
+          {onRefresh && (
+            <Button variant="outline" size="sm" onClick={onRefresh} className="text-xs">
+              <RefreshCw className="w-3 h-3 mr-1" />
+              Refresh
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Success state - render children with optional refresh indicator
+  return (
+    <div className={classNames('relative', className)}>
+      {isRefreshing && (
+        <div className="absolute top-0 right-0 z-10">
+          <div className="flex items-center gap-2 px-2 py-1 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg shadow-sm">
+            <Loader2 className="w-3 h-3 animate-spin text-bolt-elements-item-contentAccent" />
+            <span className="text-xs text-bolt-elements-textSecondary">{refreshingMessage}</span>
+          </div>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}
+
+// Hook for managing progressive loading steps
+export function useProgressiveLoader() {
+  const [steps, setSteps] = useState<
+    Array<{
+      key: string;
+      label: string;
+      completed: boolean;
+      loading?: boolean;
+      error?: boolean;
+    }>
+  >([]);
+
+  const addStep = useCallback((key: string, label: string) => {
+    setSteps((prev) => [
+      ...prev.filter((step) => step.key !== key),
+      { key, label, completed: false, loading: false, error: false },
+    ]);
+  }, []);
+
+  const updateStep = useCallback(
+    (
+      key: string,
+      updates: {
+        completed?: boolean;
+        loading?: boolean;
+        error?: boolean;
+        label?: string;
+      },
+    ) => {
+      setSteps((prev) => prev.map((step) => (step.key === key ? { ...step, ...updates } : step)));
+    },
+    [],
+  );
+
+  const removeStep = useCallback((key: string) => {
+    setSteps((prev) => prev.filter((step) => step.key !== key));
+  }, []);
+
+  const clearSteps = useCallback(() => {
+    setSteps([]);
+  }, []);
+
+  const startStep = useCallback(
+    (key: string) => {
+      updateStep(key, { loading: true, error: false });
+    },
+    [updateStep],
+  );
+
+  const completeStep = useCallback(
+    (key: string) => {
+      updateStep(key, { completed: true, loading: false, error: false });
+    },
+    [updateStep],
+  );
+
+  const errorStep = useCallback(
+    (key: string) => {
+      updateStep(key, { error: true, loading: false });
+    },
+    [updateStep],
+  );
+
+  return {
+    steps,
+    addStep,
+    updateStep,
+    removeStep,
+    clearSteps,
+    startStep,
+    completeStep,
+    errorStep,
+  };
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubRepositoryCard.tsx b/app/components/@settings/tabs/github/components/GitHubRepositoryCard.tsx
new file mode 100644
index 0000000..2f70906
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubRepositoryCard.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+
+interface GitHubRepositoryCardProps {
+  repo: GitHubRepoInfo;
+  onClone?: (repo: GitHubRepoInfo) => void;
+}
+
+export function GitHubRepositoryCard({ repo, onClone }: GitHubRepositoryCardProps) {
+  return (
+    <a
+      key={repo.name}
+      href={repo.html_url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-all duration-200"
+    >
+      <div className="flex flex-col h-full">
+        <div className="flex-1 space-y-3">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:git-repository w-4 h-4 text-bolt-elements-icon-info" />
+              <h5 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                {repo.name}
+              </h5>
+              {repo.private && (
+                <div className="i-ph:lock w-3 h-3 text-bolt-elements-textTertiary" title="Private repository" />
+              )}
+              {repo.fork && (
+                <div className="i-ph:git-fork w-3 h-3 text-bolt-elements-textTertiary" title="Forked repository" />
+              )}
+              {repo.archived && (
+                <div className="i-ph:archive w-3 h-3 text-bolt-elements-textTertiary" title="Archived repository" />
+              )}
+            </div>
+            <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+              <span className="flex items-center gap-1" title="Stars">
+                <div className="i-ph:star w-3.5 h-3.5 text-bolt-elements-icon-warning" />
+                {repo.stargazers_count.toLocaleString()}
+              </span>
+              <span className="flex items-center gap-1" title="Forks">
+                <div className="i-ph:git-fork w-3.5 h-3.5 text-bolt-elements-icon-info" />
+                {repo.forks_count.toLocaleString()}
+              </span>
+            </div>
+          </div>
+
+          {repo.description && (
+            <p className="text-xs text-bolt-elements-textSecondary line-clamp-2">{repo.description}</p>
+          )}
+
+          <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+            <span className="flex items-center gap-1" title="Default Branch">
+              <div className="i-ph:git-branch w-3.5 h-3.5" />
+              {repo.default_branch}
+            </span>
+            {repo.language && (
+              <span className="flex items-center gap-1" title="Primary Language">
+                <div className="w-2 h-2 rounded-full bg-current opacity-60" />
+                {repo.language}
+              </span>
+            )}
+            <span className="flex items-center gap-1" title="Last Updated">
+              <div className="i-ph:clock w-3.5 h-3.5" />
+              {new Date(repo.updated_at).toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })}
+            </span>
+          </div>
+
+          {/* Repository topics/tags */}
+          {repo.topics && repo.topics.length > 0 && (
+            <div className="flex items-center gap-2 text-xs">
+              {repo.topics.slice(0, 3).map((topic) => (
+                <span
+                  key={topic}
+                  className="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
+                  title={`Topic: ${topic}`}
+                >
+                  {topic}
+                </span>
+              ))}
+              {repo.topics.length > 3 && (
+                <span className="text-bolt-elements-textTertiary">+{repo.topics.length - 3} more</span>
+              )}
+            </div>
+          )}
+
+          {/* Repository size if available */}
+          {repo.size && (
+            <div className="text-xs text-bolt-elements-textTertiary">Size: {(repo.size / 1024).toFixed(1)} MB</div>
+          )}
+        </div>
+
+        {/* Bottom section with Clone button positioned at bottom right */}
+        <div className="flex items-center justify-between pt-3 mt-auto">
+          <span className="flex items-center gap-1 text-xs text-bolt-elements-textSecondary group-hover:text-bolt-elements-item-contentAccent transition-colors">
+            <div className="i-ph:arrow-square-out w-3.5 h-3.5" />
+            View
+          </span>
+          {onClone && (
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClone(repo);
+              }}
+              className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+              title="Clone repository"
+            >
+              <div className="i-ph:git-branch w-3.5 h-3.5" />
+              Clone
+            </button>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubRepositorySelector.tsx b/app/components/@settings/tabs/github/components/GitHubRepositorySelector.tsx
new file mode 100644
index 0000000..6fb0bed
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubRepositorySelector.tsx
@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { BranchSelector } from '~/components/ui/BranchSelector';
+import { GitHubRepositoryCard } from './GitHubRepositoryCard';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+import { useGitHubConnection, useGitHubStats } from '~/lib/hooks';
+import { classNames } from '~/utils/classNames';
+import { Search, RefreshCw, GitBranch, Calendar, Filter } from 'lucide-react';
+
+interface GitHubRepositorySelectorProps {
+  onClone?: (repoUrl: string, branch?: string) => void;
+  className?: string;
+}
+
+type SortOption = 'updated' | 'stars' | 'name' | 'created';
+type FilterOption = 'all' | 'own' | 'forks' | 'archived';
+
+export function GitHubRepositorySelector({ onClone, className }: GitHubRepositorySelectorProps) {
+  const { connection, isConnected } = useGitHubConnection();
+  const {
+    stats,
+    isLoading: isStatsLoading,
+    refreshStats,
+  } = useGitHubStats(connection, {
+    autoFetch: true,
+    cacheTimeout: 30 * 60 * 1000, // 30 minutes
+  });
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<SortOption>('updated');
+  const [filterBy, setFilterBy] = useState<FilterOption>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedRepo, setSelectedRepo] = useState<GitHubRepoInfo | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isBranchSelectorOpen, setIsBranchSelectorOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const repositories = stats?.repos || [];
+  const REPOS_PER_PAGE = 12;
+
+  // Filter and search repositories
+  const filteredRepositories = useMemo(() => {
+    if (!repositories) {
+      return [];
+    }
+
+    const filtered = repositories.filter((repo: GitHubRepoInfo) => {
+      // Search filter
+      const matchesSearch =
+        !searchQuery ||
+        repo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        repo.full_name.toLowerCase().includes(searchQuery.toLowerCase());
+
+      // Type filter
+      let matchesFilter = true;
+
+      switch (filterBy) {
+        case 'own':
+          matchesFilter = !repo.fork;
+          break;
+        case 'forks':
+          matchesFilter = repo.fork === true;
+          break;
+        case 'archived':
+          matchesFilter = repo.archived === true;
+          break;
+        case 'all':
+        default:
+          matchesFilter = true;
+          break;
+      }
+
+      return matchesSearch && matchesFilter;
+    });
+
+    // Sort repositories
+    filtered.sort((a: GitHubRepoInfo, b: GitHubRepoInfo) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'stars':
+          return b.stargazers_count - a.stargazers_count;
+        case 'created':
+          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(); // Using updated_at as proxy
+        case 'updated':
+        default:
+          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
+      }
+    });
+
+    return filtered;
+  }, [repositories, searchQuery, sortBy, filterBy]);
+
+  // Pagination
+  const totalPages = Math.ceil(filteredRepositories.length / REPOS_PER_PAGE);
+  const startIndex = (currentPage - 1) * REPOS_PER_PAGE;
+  const currentRepositories = filteredRepositories.slice(startIndex, startIndex + REPOS_PER_PAGE);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    setError(null);
+
+    try {
+      await refreshStats();
+    } catch (err) {
+      console.error('Failed to refresh GitHub repositories:', err);
+      setError(err instanceof Error ? err.message : 'Failed to refresh repositories');
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleCloneRepository = (repo: GitHubRepoInfo) => {
+    setSelectedRepo(repo);
+    setIsBranchSelectorOpen(true);
+  };
+
+  const handleBranchSelect = (branch: string) => {
+    if (onClone && selectedRepo) {
+      const cloneUrl = selectedRepo.html_url + '.git';
+      onClone(cloneUrl, branch);
+    }
+
+    setSelectedRepo(null);
+  };
+
+  const handleCloseBranchSelector = () => {
+    setIsBranchSelectorOpen(false);
+    setSelectedRepo(null);
+  };
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, sortBy, filterBy]);
+
+  if (!isConnected || !connection) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-bolt-elements-textSecondary mb-4">Please connect to GitHub first to browse repositories</p>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Refresh Connection
+        </Button>
+      </div>
+    );
+  }
+
+  if (isStatsLoading && !stats) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 space-y-4">
+        <div className="animate-spin w-8 h-8 border-2 border-bolt-elements-borderColorActive border-t-transparent rounded-full" />
+        <p className="text-sm text-bolt-elements-textSecondary">Loading repositories...</p>
+      </div>
+    );
+  }
+
+  if (!repositories.length) {
+    return (
+      <div className="text-center p-8">
+        <GitBranch className="w-12 h-12 text-bolt-elements-textTertiary mx-auto mb-4" />
+        <p className="text-bolt-elements-textSecondary mb-4">No repositories found</p>
+        <Button variant="outline" onClick={handleRefresh} disabled={isRefreshing}>
+          <RefreshCw className={classNames('w-4 h-4 mr-2', { 'animate-spin': isRefreshing })} />
+          Refresh
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className={classNames('space-y-6', className)}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Header with stats */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Select Repository to Clone</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">
+            {filteredRepositories.length} of {repositories.length} repositories
+          </p>
+        </div>
+        <Button
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          variant="outline"
+          size="sm"
+          className="flex items-center gap-2"
+        >
+          <RefreshCw className={classNames('w-4 h-4', { 'animate-spin': isRefreshing })} />
+          Refresh
+        </Button>
+      </div>
+
+      {error && repositories.length > 0 && (
+        <div className="p-3 rounded-lg bg-yellow-50 border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700">
+          <p className="text-sm text-yellow-800 dark:text-yellow-200">Warning: {error}. Showing cached data.</p>
+        </div>
+      )}
+
+      {/* Search and Filters */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        {/* Search */}
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bolt-elements-textTertiary" />
+          <input
+            type="text"
+            placeholder="Search repositories..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          />
+        </div>
+
+        {/* Sort */}
+        <div className="flex items-center gap-2">
+          <Calendar className="w-4 h-4 text-bolt-elements-textTertiary" />
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as SortOption)}
+            className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          >
+            <option value="updated">Recently updated</option>
+            <option value="stars">Most starred</option>
+            <option value="name">Name (A-Z)</option>
+            <option value="created">Recently created</option>
+          </select>
+        </div>
+
+        {/* Filter */}
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-bolt-elements-textTertiary" />
+          <select
+            value={filterBy}
+            onChange={(e) => setFilterBy(e.target.value as FilterOption)}
+            className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          >
+            <option value="all">All repositories</option>
+            <option value="own">Own repositories</option>
+            <option value="forks">Forked repositories</option>
+            <option value="archived">Archived repositories</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Repository Grid */}
+      {currentRepositories.length > 0 ? (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {currentRepositories.map((repo) => (
+              <GitHubRepositoryCard key={repo.id} repo={repo} onClone={() => handleCloneRepository(repo)} />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between pt-4 border-t border-bolt-elements-borderColor">
+              <div className="text-sm text-bolt-elements-textSecondary">
+                Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
+                {Math.min(startIndex + REPOS_PER_PAGE, filteredRepositories.length)} of {filteredRepositories.length}{' '}
+                repositories
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                  variant="outline"
+                  size="sm"
+                >
+                  Previous
+                </Button>
+                <span className="text-sm text-bolt-elements-textSecondary px-3">
+                  {currentPage} of {totalPages}
+                </span>
+                <Button
+                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                  variant="outline"
+                  size="sm"
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-center py-8">
+          <p className="text-bolt-elements-textSecondary">No repositories found matching your search criteria.</p>
+        </div>
+      )}
+
+      {/* Branch Selector Modal */}
+      {selectedRepo && (
+        <BranchSelector
+          provider="github"
+          repoOwner={selectedRepo.full_name.split('/')[0]}
+          repoName={selectedRepo.full_name.split('/')[1]}
+          token={connection?.token || ''}
+          defaultBranch={selectedRepo.default_branch}
+          onBranchSelect={handleBranchSelect}
+          onClose={handleCloseBranchSelector}
+          isOpen={isBranchSelectorOpen}
+        />
+      )}
+    </motion.div>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubStats.tsx b/app/components/@settings/tabs/github/components/GitHubStats.tsx
new file mode 100644
index 0000000..4b7d8fb
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubStats.tsx
@@ -0,0 +1,291 @@
+import React from 'react';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { classNames } from '~/utils/classNames';
+import { useGitHubStats } from '~/lib/hooks';
+import type { GitHubConnection, GitHubStats as GitHubStatsType } from '~/types/GitHub';
+import { GitHubErrorBoundary } from './GitHubErrorBoundary';
+
+interface GitHubStatsProps {
+  connection: GitHubConnection;
+  isExpanded: boolean;
+  onToggleExpanded: (expanded: boolean) => void;
+}
+
+export function GitHubStats({ connection, isExpanded, onToggleExpanded }: GitHubStatsProps) {
+  const { stats, isLoading, isRefreshing, refreshStats, isStale } = useGitHubStats(
+    connection,
+    {
+      autoFetch: true,
+      cacheTimeout: 30 * 60 * 1000, // 30 minutes
+    },
+    !connection?.token,
+  ); // Use server-side if no token
+
+  return (
+    <GitHubErrorBoundary>
+      <GitHubStatsContent
+        stats={stats}
+        isLoading={isLoading}
+        isRefreshing={isRefreshing}
+        refreshStats={refreshStats}
+        isStale={isStale}
+        isExpanded={isExpanded}
+        onToggleExpanded={onToggleExpanded}
+      />
+    </GitHubErrorBoundary>
+  );
+}
+
+function GitHubStatsContent({
+  stats,
+  isLoading,
+  isRefreshing,
+  refreshStats,
+  isStale,
+  isExpanded,
+  onToggleExpanded,
+}: {
+  stats: GitHubStatsType | null;
+  isLoading: boolean;
+  isRefreshing: boolean;
+  refreshStats: () => Promise<void>;
+  isStale: boolean;
+  isExpanded: boolean;
+  onToggleExpanded: (expanded: boolean) => void;
+}) {
+  if (!stats) {
+    return (
+      <div className="mt-6 border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor pt-6">
+        <div className="flex items-center justify-center p-8">
+          <div className="flex items-center gap-2">
+            {isLoading ? (
+              <>
+                <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                <span className="text-bolt-elements-textSecondary">Loading GitHub stats...</span>
+              </>
+            ) : (
+              <span className="text-bolt-elements-textSecondary">No stats available</span>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-6 border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor pt-6">
+      <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                GitHub Stats
+                {isStale && <span className="text-bolt-elements-textTertiary ml-1">(Stale)</span>}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  refreshStats();
+                }}
+                disabled={isRefreshing}
+                variant="outline"
+                size="sm"
+                className="text-xs"
+              >
+                {isRefreshing ? (
+                  <>
+                    <div className="i-ph:spinner-gap w-3 h-3 animate-spin" />
+                    Refreshing...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:arrows-clockwise w-3 h-3" />
+                    Refresh
+                  </>
+                )}
+              </Button>
+              <div
+                className={classNames(
+                  'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                  isExpanded ? 'rotate-180' : '',
+                )}
+              />
+            </div>
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="overflow-hidden">
+          <div className="space-y-4 mt-4">
+            {/* Languages Section */}
+            <div className="mb-6">
+              <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
+              {stats.mostUsedLanguages && stats.mostUsedLanguages.length > 0 ? (
+                <div className="space-y-3">
+                  <div className="flex flex-wrap gap-2">
+                    {stats.mostUsedLanguages.slice(0, 15).map(({ language, bytes, repos }) => (
+                      <span
+                        key={language}
+                        className="px-3 py-1 text-xs rounded-full bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText"
+                        title={`${language}: ${(bytes / 1024 / 1024).toFixed(2)}MB across ${repos} repos`}
+                      >
+                        {language} ({repos})
+                      </span>
+                    ))}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">
+                    Based on actual codebase size across repositories
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-wrap gap-2">
+                  {Object.entries(stats.languages)
+                    .sort(([, a], [, b]) => b - a)
+                    .slice(0, 5)
+                    .map(([language]) => (
+                      <span
+                        key={language}
+                        className="px-3 py-1 text-xs rounded-full bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText"
+                      >
+                        {language}
+                      </span>
+                    ))}
+                </div>
+              )}
+            </div>
+
+            {/* GitHub Overview Summary */}
+            <div className="mb-6 p-4 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+              <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">GitHub Overview</h4>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                    {(stats.publicRepos || 0) + (stats.privateRepos || 0)}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Total Repositories</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">{stats.totalBranches || 0}</div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Total Branches</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                    {stats.organizations?.length || 0}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Organizations</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                    {Object.keys(stats.languages).length}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Languages Used</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Activity Summary */}
+            <div className="mb-6">
+              <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Activity Summary</h5>
+              <div className="grid grid-cols-4 gap-4">
+                {[
+                  {
+                    label: 'Total Branches',
+                    value: stats.totalBranches || 0,
+                    icon: 'i-ph:git-branch',
+                    iconColor: 'text-bolt-elements-icon-info',
+                  },
+                  {
+                    label: 'Contributors',
+                    value: stats.totalContributors || 0,
+                    icon: 'i-ph:users',
+                    iconColor: 'text-bolt-elements-icon-success',
+                  },
+                  {
+                    label: 'Issues',
+                    value: stats.totalIssues || 0,
+                    icon: 'i-ph:circle',
+                    iconColor: 'text-bolt-elements-icon-warning',
+                  },
+                  {
+                    label: 'Pull Requests',
+                    value: stats.totalPullRequests || 0,
+                    icon: 'i-ph:git-pull-request',
+                    iconColor: 'text-bolt-elements-icon-accent',
+                  },
+                ].map((stat, index) => (
+                  <div
+                    key={index}
+                    className="flex flex-col p-3 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor"
+                  >
+                    <span className="text-xs text-bolt-elements-textSecondary">{stat.label}</span>
+                    <span className="text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-1">
+                      <div className={`${stat.icon} w-4 h-4 ${stat.iconColor}`} />
+                      {stat.value.toLocaleString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Organizations Section */}
+            {stats.organizations && stats.organizations.length > 0 && (
+              <div>
+                <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Organizations</h5>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {stats.organizations.map((org) => (
+                    <a
+                      key={org.login}
+                      href={org.html_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive dark:hover:border-bolt-elements-borderColorActive transition-all duration-200"
+                    >
+                      <img
+                        src={org.avatar_url}
+                        alt={org.login}
+                        className="w-8 h-8 rounded-full border border-bolt-elements-borderColor"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <h6 className="text-sm font-medium text-bolt-elements-textPrimary truncate">
+                          {org.name || org.login}
+                        </h6>
+                        <p className="text-xs text-bolt-elements-textSecondary truncate">{org.login}</p>
+                        {org.description && (
+                          <p className="text-xs text-bolt-elements-textTertiary truncate">{org.description}</p>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 text-xs text-bolt-elements-textSecondary">
+                        {org.public_repos && (
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:folder w-3 h-3" />
+                            {org.public_repos}
+                          </span>
+                        )}
+                        {org.followers && (
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:users w-3 h-3" />
+                            {org.followers}
+                          </span>
+                        )}
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Last Updated */}
+            <div className="pt-2 border-t border-bolt-elements-borderColor">
+              <span className="text-xs text-bolt-elements-textSecondary">
+                Last updated: {stats.lastUpdated ? new Date(stats.lastUpdated).toLocaleString() : 'Never'}
+              </span>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/GitHubUserProfile.tsx b/app/components/@settings/tabs/github/components/GitHubUserProfile.tsx
new file mode 100644
index 0000000..fd56860
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/GitHubUserProfile.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import type { GitHubUserResponse } from '~/types/GitHub';
+
+interface GitHubUserProfileProps {
+  user: GitHubUserResponse;
+  className?: string;
+}
+
+export function GitHubUserProfile({ user, className = '' }: GitHubUserProfileProps) {
+  return (
+    <div
+      className={`flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg ${className}`}
+    >
+      <img
+        src={user.avatar_url}
+        alt={user.login}
+        className="w-12 h-12 rounded-full border-2 border-bolt-elements-item-contentAccent dark:border-bolt-elements-item-contentAccent"
+      />
+      <div>
+        <h4 className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+          {user.name || user.login}
+        </h4>
+        <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">@{user.login}</p>
+        {user.bio && (
+          <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary mt-1">
+            {user.bio}
+          </p>
+        )}
+        <div className="flex items-center gap-4 mt-2 text-xs text-bolt-elements-textSecondary">
+          <span className="flex items-center gap-1">
+            <div className="i-ph:users w-3 h-3" />
+            {user.followers} followers
+          </span>
+          <span className="flex items-center gap-1">
+            <div className="i-ph:folder w-3 h-3" />
+            {user.public_repos} public repos
+          </span>
+          <span className="flex items-center gap-1">
+            <div className="i-ph:file-text w-3 h-3" />
+            {user.public_gists} gists
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/shared/GitHubStateIndicators.tsx b/app/components/@settings/tabs/github/components/shared/GitHubStateIndicators.tsx
new file mode 100644
index 0000000..c36fa09
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/shared/GitHubStateIndicators.tsx
@@ -0,0 +1,264 @@
+import React from 'react';
+import { Loader2, AlertCircle, CheckCircle, Info, Github } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+
+interface LoadingStateProps {
+  message?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function LoadingState({ message = 'Loading...', size = 'md', className = '' }: LoadingStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary',
+        className,
+      )}
+    >
+      <Loader2 className={classNames('animate-spin mb-2', sizeClasses[size])} />
+      <p className={classNames('text-bolt-elements-textSecondary', textSizeClasses[size])}>{message}</p>
+    </div>
+  );
+}
+
+interface ErrorStateProps {
+  title?: string;
+  message: string;
+  onRetry?: () => void;
+  retryLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function ErrorState({
+  title = 'Error',
+  message,
+  onRetry,
+  retryLabel = 'Try Again',
+  size = 'md',
+  className = '',
+}: ErrorStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
+      <AlertCircle className={classNames('text-red-500 mb-2', sizeClasses[size])} />
+      <h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
+      <p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
+        >
+          {retryLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface SuccessStateProps {
+  title?: string;
+  message: string;
+  onAction?: () => void;
+  actionLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function SuccessState({
+  title = 'Success',
+  message,
+  onAction,
+  actionLabel = 'Continue',
+  size = 'md',
+  className = '',
+}: SuccessStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
+      <CheckCircle className={classNames('text-green-500 mb-2', sizeClasses[size])} />
+      <h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
+      <p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
+      {onAction && (
+        <button
+          onClick={onAction}
+          className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface GitHubConnectionRequiredProps {
+  onConnect?: () => void;
+  className?: string;
+}
+
+export function GitHubConnectionRequired({ onConnect, className = '' }: GitHubConnectionRequiredProps) {
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-12 text-center', className)}>
+      <Github className="w-12 h-12 text-bolt-elements-textTertiary mb-4" />
+      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Connection Required</h3>
+      <p className="text-sm text-bolt-elements-textSecondary mb-6 max-w-md">
+        Please connect your GitHub account to access this feature. You'll be able to browse repositories, push code, and
+        manage your GitHub integration.
+      </p>
+      {onConnect && (
+        <button
+          onClick={onConnect}
+          className="px-6 py-3 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors flex items-center gap-2"
+        >
+          <Github className="w-4 h-4" />
+          Connect GitHub
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface InformationStateProps {
+  title: string;
+  message: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  onAction?: () => void;
+  actionLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function InformationState({
+  title,
+  message,
+  icon = Info,
+  onAction,
+  actionLabel = 'Got it',
+  size = 'md',
+  className = '',
+}: InformationStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
+      {React.createElement(icon, { className: classNames('text-blue-500 mb-2', sizeClasses[size]) })}
+      <h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
+      <p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
+      {onAction && (
+        <button
+          onClick={onAction}
+          className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface ConnectionTestIndicatorProps {
+  status: 'success' | 'error' | 'testing' | null;
+  message?: string;
+  timestamp?: number;
+  className?: string;
+}
+
+export function ConnectionTestIndicator({ status, message, timestamp, className = '' }: ConnectionTestIndicatorProps) {
+  if (!status) {
+    return null;
+  }
+
+  const getStatusColor = () => {
+    switch (status) {
+      case 'success':
+        return 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700';
+      case 'error':
+        return 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700';
+      case 'testing':
+        return 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700';
+      default:
+        return 'bg-gray-50 border-gray-200 dark:bg-gray-900/20 dark:border-gray-700';
+    }
+  };
+
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'success':
+        return <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />;
+      case 'error':
+        return <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400" />;
+      case 'testing':
+        return <Loader2 className="w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />;
+      default:
+        return <Info className="w-5 h-5 text-gray-600 dark:text-gray-400" />;
+    }
+  };
+
+  const getStatusTextColor = () => {
+    switch (status) {
+      case 'success':
+        return 'text-green-800 dark:text-green-200';
+      case 'error':
+        return 'text-red-800 dark:text-red-200';
+      case 'testing':
+        return 'text-blue-800 dark:text-blue-200';
+      default:
+        return 'text-gray-800 dark:text-gray-200';
+    }
+  };
+
+  return (
+    <div className={classNames(`p-4 rounded-lg border ${getStatusColor()}`, className)}>
+      <div className="flex items-center gap-2">
+        {getStatusIcon()}
+        <span className={classNames('text-sm font-medium', getStatusTextColor())}>{message || status}</span>
+      </div>
+      {timestamp && <p className="text-xs text-gray-500 mt-1">{new Date(timestamp).toLocaleString()}</p>}
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/shared/RepositoryCard.tsx b/app/components/@settings/tabs/github/components/shared/RepositoryCard.tsx
new file mode 100644
index 0000000..f0ff7fa
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/shared/RepositoryCard.tsx
@@ -0,0 +1,361 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { formatSize } from '~/utils/formatSize';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+import {
+  Star,
+  GitFork,
+  Clock,
+  Lock,
+  Archive,
+  GitBranch,
+  Users,
+  Database,
+  Tag,
+  Heart,
+  ExternalLink,
+  Circle,
+  GitPullRequest,
+} from 'lucide-react';
+
+interface RepositoryCardProps {
+  repository: GitHubRepoInfo;
+  variant?: 'default' | 'compact' | 'detailed';
+  onSelect?: () => void;
+  showHealthScore?: boolean;
+  showExtendedMetrics?: boolean;
+  className?: string;
+}
+
+export function RepositoryCard({
+  repository,
+  variant = 'default',
+  onSelect,
+  showHealthScore = false,
+  showExtendedMetrics = false,
+  className = '',
+}: RepositoryCardProps) {
+  const daysSinceUpdate = Math.floor((Date.now() - new Date(repository.updated_at).getTime()) / (1000 * 60 * 60 * 24));
+
+  const formatTimeAgo = () => {
+    if (daysSinceUpdate === 0) {
+      return 'Today';
+    }
+
+    if (daysSinceUpdate === 1) {
+      return '1 day ago';
+    }
+
+    if (daysSinceUpdate < 7) {
+      return `${daysSinceUpdate} days ago`;
+    }
+
+    if (daysSinceUpdate < 30) {
+      return `${Math.floor(daysSinceUpdate / 7)} weeks ago`;
+    }
+
+    return new Date(repository.updated_at).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const calculateHealthScore = () => {
+    const hasStars = repository.stargazers_count > 0;
+    const hasRecentActivity = daysSinceUpdate < 30;
+    const hasContributors = (repository.contributors_count || 0) > 1;
+    const hasDescription = !!repository.description;
+    const hasTopics = (repository.topics || []).length > 0;
+    const hasLicense = !!repository.license;
+
+    const healthScore = [hasStars, hasRecentActivity, hasContributors, hasDescription, hasTopics, hasLicense].filter(
+      Boolean,
+    ).length;
+
+    const maxScore = 6;
+    const percentage = Math.round((healthScore / maxScore) * 100);
+
+    const getScoreColor = (score: number) => {
+      if (score >= 5) {
+        return 'text-green-500';
+      }
+
+      if (score >= 3) {
+        return 'text-yellow-500';
+      }
+
+      return 'text-red-500';
+    };
+
+    return {
+      percentage,
+      color: getScoreColor(healthScore),
+      score: healthScore,
+      maxScore,
+    };
+  };
+
+  const getHealthIndicatorColor = () => {
+    const isActive = daysSinceUpdate < 7;
+    const isHealthy = daysSinceUpdate < 30 && !repository.archived && repository.stargazers_count > 0;
+
+    if (repository.archived) {
+      return 'bg-gray-500';
+    }
+
+    if (isActive) {
+      return 'bg-green-500';
+    }
+
+    if (isHealthy) {
+      return 'bg-blue-500';
+    }
+
+    return 'bg-yellow-500';
+  };
+
+  const getHealthTitle = () => {
+    if (repository.archived) {
+      return 'Archived';
+    }
+
+    if (daysSinceUpdate < 7) {
+      return 'Very Active';
+    }
+
+    if (daysSinceUpdate < 30 && repository.stargazers_count > 0) {
+      return 'Healthy';
+    }
+
+    return 'Needs Attention';
+  };
+
+  const health = showHealthScore ? calculateHealthScore() : null;
+
+  if (variant === 'compact') {
+    return (
+      <button
+        onClick={onSelect}
+        className={classNames(
+          'w-full text-left p-3 rounded-lg border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive hover:bg-bolt-elements-background-depth-1 transition-all duration-200',
+          className,
+        )}
+      >
+        <div className="flex items-start justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{repository.name}</h4>
+            {repository.private && <Lock className="w-3 h-3 text-bolt-elements-textTertiary" />}
+            {repository.fork && <GitFork className="w-3 h-3 text-bolt-elements-textTertiary" />}
+            {repository.archived && <Archive className="w-3 h-3 text-bolt-elements-textTertiary" />}
+          </div>
+
+          <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+            <span className="flex items-center gap-1">
+              <Star className="w-3 h-3" />
+              {repository.stargazers_count}
+            </span>
+            <span className="flex items-center gap-1">
+              <GitFork className="w-3 h-3" />
+              {repository.forks_count}
+            </span>
+          </div>
+        </div>
+
+        {repository.description && (
+          <p className="text-xs text-bolt-elements-textSecondary mb-2 line-clamp-2">{repository.description}</p>
+        )}
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 text-xs text-bolt-elements-textTertiary">
+            {repository.language && (
+              <span className="flex items-center gap-1">
+                <div className="w-2 h-2 rounded-full bg-current opacity-60" />
+                {repository.language}
+              </span>
+            )}
+            {repository.size && <span>{formatSize(repository.size * 1024)}</span>}
+          </div>
+
+          <span className="flex items-center gap-1 text-xs text-bolt-elements-textTertiary">
+            <Clock className="w-3 h-3" />
+            {formatTimeAgo()}
+          </span>
+        </div>
+      </button>
+    );
+  }
+
+  const Component = onSelect ? 'button' : 'div';
+  const interactiveProps = onSelect
+    ? {
+        onClick: onSelect,
+        className: classNames(
+          'group cursor-pointer hover:border-bolt-elements-borderColorActive dark:hover:border-bolt-elements-borderColorActive transition-all duration-200',
+          className,
+        ),
+      }
+    : { className };
+
+  return (
+    <Component
+      {...interactiveProps}
+      className={classNames(
+        'block p-4 rounded-lg bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor relative',
+        interactiveProps.className,
+      )}
+    >
+      {/* Repository Health Indicator */}
+      {variant === 'detailed' && (
+        <div
+          className={`absolute top-2 right-2 w-2 h-2 rounded-full ${getHealthIndicatorColor()}`}
+          title={`Repository Health: ${getHealthTitle()}`}
+        />
+      )}
+
+      <div className="space-y-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2">
+            <GitBranch className="w-4 h-4 text-bolt-elements-icon-tertiary" />
+            <h5
+              className={classNames(
+                'text-sm font-medium text-bolt-elements-textPrimary',
+                onSelect && 'group-hover:text-bolt-elements-item-contentAccent transition-colors',
+              )}
+            >
+              {repository.name}
+            </h5>
+            {repository.fork && (
+              <span title="Forked repository">
+                <GitFork className="w-3 h-3 text-bolt-elements-textTertiary" />
+              </span>
+            )}
+            {repository.archived && (
+              <span title="Archived repository">
+                <Archive className="w-3 h-3 text-bolt-elements-textTertiary" />
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+            <span className="flex items-center gap-1" title="Stars">
+              <Star className="w-3.5 h-3.5 text-bolt-elements-icon-warning" />
+              {repository.stargazers_count.toLocaleString()}
+            </span>
+            <span className="flex items-center gap-1" title="Forks">
+              <GitFork className="w-3.5 h-3.5 text-bolt-elements-icon-info" />
+              {repository.forks_count.toLocaleString()}
+            </span>
+            {showExtendedMetrics && repository.issues_count !== undefined && (
+              <span className="flex items-center gap-1" title="Open Issues">
+                <Circle className="w-3.5 h-3.5 text-bolt-elements-icon-error" />
+                {repository.issues_count}
+              </span>
+            )}
+            {showExtendedMetrics && repository.pull_requests_count !== undefined && (
+              <span className="flex items-center gap-1" title="Pull Requests">
+                <GitPullRequest className="w-3.5 h-3.5 text-bolt-elements-icon-success" />
+                {repository.pull_requests_count}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          {repository.description && (
+            <p className="text-xs text-bolt-elements-textSecondary line-clamp-2">{repository.description}</p>
+          )}
+
+          {/* Repository metrics bar */}
+          <div className="flex items-center gap-2 text-xs">
+            {repository.license && (
+              <span className="px-2 py-0.5 rounded-full bg-bolt-elements-background-depth-2 text-bolt-elements-textTertiary">
+                {repository.license.spdx_id || repository.license.name}
+              </span>
+            )}
+            {repository.topics &&
+              repository.topics.slice(0, 2).map((topic) => (
+                <span
+                  key={topic}
+                  className="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
+                >
+                  {topic}
+                </span>
+              ))}
+            {repository.archived && (
+              <span className="px-2 py-0.5 rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400">
+                Archived
+              </span>
+            )}
+            {repository.fork && (
+              <span className="px-2 py-0.5 rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400">
+                Fork
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+            <span className="flex items-center gap-1" title="Default Branch">
+              <GitBranch className="w-3.5 h-3.5" />
+              {repository.default_branch}
+            </span>
+            {showExtendedMetrics && repository.branches_count && (
+              <span className="flex items-center gap-1" title="Total Branches">
+                <GitFork className="w-3.5 h-3.5" />
+                {repository.branches_count}
+              </span>
+            )}
+            {showExtendedMetrics && repository.contributors_count && (
+              <span className="flex items-center gap-1" title="Contributors">
+                <Users className="w-3.5 h-3.5" />
+                {repository.contributors_count}
+              </span>
+            )}
+            {repository.size && (
+              <span className="flex items-center gap-1" title="Size">
+                <Database className="w-3.5 h-3.5" />
+                {(repository.size / 1024).toFixed(1)}MB
+              </span>
+            )}
+            <span className="flex items-center gap-1" title="Last Updated">
+              <Clock className="w-3.5 h-3.5" />
+              {formatTimeAgo()}
+            </span>
+            {repository.topics && repository.topics.length > 0 && (
+              <span className="flex items-center gap-1" title={`Topics: ${repository.topics.join(', ')}`}>
+                <Tag className="w-3.5 h-3.5" />
+                {repository.topics.length}
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* Repository Health Score */}
+            {health && (
+              <div
+                className="flex items-center gap-1"
+                title={`Health Score: ${health.percentage}% (${health.score}/${health.maxScore})`}
+              >
+                <Heart className={`w-3.5 h-3.5 ${health.color}`} />
+                <span className={`text-xs font-medium ${health.color}`}>{health.percentage}%</span>
+              </div>
+            )}
+
+            {onSelect && (
+              <span
+                className={classNames(
+                  'flex items-center gap-1 ml-2 transition-colors',
+                  'group-hover:text-bolt-elements-item-contentAccent',
+                )}
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+                View
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Component>
+  );
+}
diff --git a/app/components/@settings/tabs/github/components/shared/index.ts b/app/components/@settings/tabs/github/components/shared/index.ts
new file mode 100644
index 0000000..1564436
--- /dev/null
+++ b/app/components/@settings/tabs/github/components/shared/index.ts
@@ -0,0 +1,11 @@
+export { RepositoryCard } from './RepositoryCard';
+
+// GitHubDialog components not yet implemented
+export {
+  LoadingState,
+  ErrorState,
+  SuccessState,
+  GitHubConnectionRequired,
+  InformationState,
+  ConnectionTestIndicator,
+} from './GitHubStateIndicators';
diff --git a/app/components/@settings/tabs/gitlab/GitLabTab.tsx b/app/components/@settings/tabs/gitlab/GitLabTab.tsx
new file mode 100644
index 0000000..a2e4212
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/GitLabTab.tsx
@@ -0,0 +1,305 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useGitLabConnection } from '~/lib/hooks';
+import GitLabConnection from './components/GitLabConnection';
+import { StatsDisplay } from './components/StatsDisplay';
+import { RepositoryList } from './components/RepositoryList';
+
+// GitLab logo SVG component
+const GitLabLogo = () => (
+  <svg viewBox="0 0 24 24" className="w-5 h-5">
+    <path
+      fill="currentColor"
+      d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
+    />
+  </svg>
+);
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+export default function GitLabTab() {
+  const { connection, isConnected, isLoading, error, testConnection, refreshStats } = useGitLabConnection();
+  const [connectionTest, setConnectionTest] = useState<ConnectionTestResult | null>(null);
+  const [isRefreshingStats, setIsRefreshingStats] = useState(false);
+
+  const handleTestConnection = async () => {
+    if (!connection?.user) {
+      setConnectionTest({
+        status: 'error',
+        message: 'No connection established',
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    setConnectionTest({
+      status: 'testing',
+      message: 'Testing connection...',
+    });
+
+    try {
+      const isValid = await testConnection();
+
+      if (isValid) {
+        setConnectionTest({
+          status: 'success',
+          message: `Connected successfully as ${connection.user.username}`,
+          timestamp: Date.now(),
+        });
+      } else {
+        setConnectionTest({
+          status: 'error',
+          message: 'Connection test failed',
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      setConnectionTest({
+        status: 'error',
+        message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  // Loading state for initial connection check
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GitLabLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitLab Integration</h2>
+        </div>
+        <div className="flex items-center justify-center p-4">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            <span className="text-bolt-elements-textSecondary">Loading...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state for connection issues
+  if (error && !connection) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GitLabLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitLab Integration</h2>
+        </div>
+        <div className="text-sm text-red-600 dark:text-red-400 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  // Not connected state
+  if (!isConnected || !connection) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GitLabLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitLab Integration</h2>
+        </div>
+        <p className="text-sm text-bolt-elements-textSecondary">
+          Connect your GitLab account to enable advanced repository management features, statistics, and seamless
+          integration.
+        </p>
+        <GitLabConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <motion.div
+        className="flex items-center justify-between gap-2"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex items-center gap-2">
+          <GitLabLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+            GitLab Integration
+          </h2>
+        </div>
+        <div className="flex items-center gap-2">
+          {connection?.rateLimit && (
+            <div className="flex items-center gap-2 px-3 py-1 bg-bolt-elements-background-depth-1 rounded-lg text-xs">
+              <div className="i-ph:cloud w-4 h-4 text-bolt-elements-textSecondary" />
+              <span className="text-bolt-elements-textSecondary">
+                API: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
+              </span>
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+        Manage your GitLab integration with advanced repository features and comprehensive statistics
+      </p>
+
+      {/* Connection Test Results */}
+      {connectionTest && (
+        <div
+          className={`p-3 rounded-lg border ${
+            connectionTest.status === 'success'
+              ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
+              : connectionTest.status === 'error'
+                ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
+                : 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <div
+              className={`w-4 h-4 ${
+                connectionTest.status === 'success'
+                  ? 'text-green-600'
+                  : connectionTest.status === 'error'
+                    ? 'text-red-600'
+                    : 'text-blue-600'
+              }`}
+            >
+              {connectionTest.status === 'success' ? (
+                <div className="i-ph:check-circle" />
+              ) : connectionTest.status === 'error' ? (
+                <div className="i-ph:x-circle" />
+              ) : (
+                <div className="i-ph:spinner animate-spin" />
+              )}
+            </div>
+            <span
+              className={`text-sm ${
+                connectionTest.status === 'success'
+                  ? 'text-green-800 dark:text-green-200'
+                  : connectionTest.status === 'error'
+                    ? 'text-red-800 dark:text-red-200'
+                    : 'text-blue-800 dark:text-blue-200'
+              }`}
+            >
+              {connectionTest.message}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* GitLab Connection Component */}
+      <GitLabConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
+
+      {/* User Profile Section */}
+      {connection?.user && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="border-t border-bolt-elements-borderColor pt-6"
+        >
+          <div className="flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 rounded-lg">
+            <div className="w-12 h-12 rounded-full border-2 border-bolt-elements-item-contentAccent flex items-center justify-center bg-bolt-elements-background-depth-2 overflow-hidden">
+              {connection.user.avatar_url &&
+              connection.user.avatar_url !== 'null' &&
+              connection.user.avatar_url !== '' ? (
+                <img
+                  src={connection.user.avatar_url}
+                  alt={connection.user.username}
+                  className="w-full h-full rounded-full object-cover"
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement;
+                    target.style.display = 'none';
+
+                    const parent = target.parentElement;
+
+                    if (parent) {
+                      parent.innerHTML = (connection.user?.name || connection.user?.username || 'U')
+                        .charAt(0)
+                        .toUpperCase();
+                      parent.classList.add(
+                        'text-white',
+                        'font-semibold',
+                        'text-sm',
+                        'flex',
+                        'items-center',
+                        'justify-center',
+                      );
+                    }
+                  }}
+                />
+              ) : (
+                <div className="w-full h-full rounded-full bg-bolt-elements-item-contentAccent flex items-center justify-center text-white font-semibold text-sm">
+                  {(connection.user?.name || connection.user?.username || 'U').charAt(0).toUpperCase()}
+                </div>
+              )}
+            </div>
+            <div>
+              <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
+                {connection.user?.name || connection.user?.username}
+              </h4>
+              <p className="text-sm text-bolt-elements-textSecondary">{connection.user?.username}</p>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {/* GitLab Stats Section */}
+      {connection?.stats && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="border-t border-bolt-elements-borderColor pt-6"
+        >
+          <h3 className="text-base font-medium text-bolt-elements-textPrimary mb-4">Statistics</h3>
+          <StatsDisplay
+            stats={connection.stats}
+            onRefresh={async () => {
+              setIsRefreshingStats(true);
+
+              try {
+                await refreshStats();
+              } catch (error) {
+                console.error('Failed to refresh stats:', error);
+              } finally {
+                setIsRefreshingStats(false);
+              }
+            }}
+            isRefreshing={isRefreshingStats}
+          />
+        </motion.div>
+      )}
+
+      {/* GitLab Repositories Section */}
+      {connection?.stats?.projects && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+          className="border-t border-bolt-elements-borderColor pt-6"
+        >
+          <RepositoryList
+            repositories={connection.stats.projects}
+            onRefresh={async () => {
+              setIsRefreshingStats(true);
+
+              try {
+                await refreshStats();
+              } catch (error) {
+                console.error('Failed to refresh repositories:', error);
+              } finally {
+                setIsRefreshingStats(false);
+              }
+            }}
+            isRefreshing={isRefreshingStats}
+          />
+        </motion.div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/gitlab/components/GitLabAuthDialog.tsx b/app/components/@settings/tabs/gitlab/components/GitLabAuthDialog.tsx
new file mode 100644
index 0000000..da6b5be
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/GitLabAuthDialog.tsx
@@ -0,0 +1,186 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { classNames } from '~/utils/classNames';
+import { useGitLabConnection } from '~/lib/hooks';
+
+interface GitLabAuthDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function GitLabAuthDialog({ isOpen, onClose }: GitLabAuthDialogProps) {
+  const { isConnecting, error, connect } = useGitLabConnection();
+  const [token, setToken] = useState('');
+  const [gitlabUrl, setGitlabUrl] = useState('https://gitlab.com');
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!token.trim()) {
+      toast.error('Please enter your GitLab access token');
+      return;
+    }
+
+    try {
+      await connect(token, gitlabUrl);
+      toast.success('Successfully connected to GitLab!');
+      setToken('');
+      onClose();
+    } catch (error) {
+      // Error handling is done in the hook
+      console.error('GitLab connect failed:', error);
+    }
+  };
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[10000]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[10000]">
+          <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="gitlab-auth-description"
+            >
+              <Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-4">
+                Connect to GitLab
+              </Dialog.Title>
+
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 rounded-xl bg-orange-500/10 flex items-center justify-center text-orange-500">
+                  <svg viewBox="0 0 24 24" className="w-5 h-5">
+                    <path
+                      fill="currentColor"
+                      d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-base font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                    GitLab Connection
+                  </h3>
+                  <p
+                    id="gitlab-auth-description"
+                    className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                  >
+                    Connect your GitLab account to deploy your projects
+                  </p>
+                </div>
+              </div>
+
+              <form onSubmit={handleConnect} className="space-y-4">
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                    GitLab URL
+                  </label>
+                  <input
+                    type="url"
+                    value={gitlabUrl}
+                    onChange={(e) => setGitlabUrl(e.target.value)}
+                    disabled={isConnecting}
+                    placeholder="https://gitlab.com"
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      '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',
+                      'disabled:opacity-50 disabled:cursor-not-allowed',
+                    )}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                    Access Token
+                  </label>
+                  <input
+                    type="password"
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    disabled={isConnecting}
+                    placeholder="Enter your GitLab access token"
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      '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',
+                      'disabled:opacity-50 disabled:cursor-not-allowed',
+                    )}
+                    required
+                  />
+                  <div className="mt-2 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                    <a
+                      href={`${gitlabUrl}/-/user_settings/personal_access_tokens`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-orange-500 hover:text-orange-600 hover:underline inline-flex items-center gap-1"
+                    >
+                      Get your token
+                      <div className="i-ph:arrow-square-out w-3 h-3" />
+                    </a>
+                    <span className="mx-2">•</span>
+                    <span>Required scopes: api, read_repository</span>
+                  </div>
+                </div>
+
+                {error && (
+                  <div className="p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700">
+                    <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                  </div>
+                )}
+
+                <div className="flex justify-end gap-2 pt-2">
+                  <motion.button
+                    type="button"
+                    onClick={onClose}
+                    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 }}
+                    disabled={isConnecting}
+                  >
+                    Cancel
+                  </motion.button>
+                  <motion.button
+                    type="submit"
+                    disabled={isConnecting || !token.trim()}
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm inline-flex items-center gap-2',
+                      'bg-orange-500 text-white hover:bg-orange-600',
+                      'disabled:opacity-50 disabled:cursor-not-allowed',
+                    )}
+                    whileHover={!isConnecting && token.trim() ? { scale: 1.02 } : {}}
+                    whileTap={!isConnecting && token.trim() ? { scale: 0.98 } : {}}
+                  >
+                    {isConnecting ? (
+                      <>
+                        <div className="i-ph:spinner-gap animate-spin w-4 h-4" />
+                        Connecting...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Connect to GitLab
+                      </>
+                    )}
+                  </motion.button>
+                </div>
+              </form>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/app/components/@settings/tabs/gitlab/components/GitLabConnection.tsx b/app/components/@settings/tabs/gitlab/components/GitLabConnection.tsx
new file mode 100644
index 0000000..efdb6bd
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/GitLabConnection.tsx
@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { classNames } from '~/utils/classNames';
+import { Button } from '~/components/ui/Button';
+import { useGitLabConnection } from '~/lib/hooks';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface GitLabConnectionProps {
+  connectionTest: ConnectionTestResult | null;
+  onTestConnection: () => void;
+}
+
+export default function GitLabConnection({ connectionTest, onTestConnection }: GitLabConnectionProps) {
+  const { isConnected, isConnecting, connection, error, connect, disconnect } = useGitLabConnection();
+
+  const [token, setToken] = useState('');
+  const [gitlabUrl, setGitlabUrl] = useState('https://gitlab.com');
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    console.log('GitLab connect attempt:', {
+      token: token ? `${token.substring(0, 10)}...` : 'empty',
+      gitlabUrl,
+      tokenLength: token.length,
+    });
+
+    if (!token.trim()) {
+      console.log('Token is empty, not attempting connection');
+      return;
+    }
+
+    try {
+      console.log('Calling connect function...');
+      await connect(token, gitlabUrl);
+      console.log('Connect function completed successfully');
+      setToken(''); // Clear token on successful connection
+    } catch (error) {
+      console.error('GitLab connect failed:', error);
+
+      // Error handling is done in the hook
+    }
+  };
+
+  const handleDisconnect = () => {
+    disconnect();
+    toast.success('Disconnected from GitLab');
+  };
+
+  return (
+    <motion.div
+      className="bg-bolt-elements-background border border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 text-orange-600">
+              <svg viewBox="0 0 24 24" className="w-5 h-5">
+                <path
+                  fill="currentColor"
+                  d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
+                />
+              </svg>
+            </div>
+            <h3 className="text-base font-medium text-bolt-elements-textPrimary">GitLab Connection</h3>
+          </div>
+        </div>
+
+        {!isConnected && (
+          <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+            <p className="flex items-center gap-1 mb-1">
+              <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success" />
+              <span className="font-medium">Tip:</span> You can also set the{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 rounded">VITE_GITLAB_ACCESS_TOKEN</code>{' '}
+              environment variable to connect automatically.
+            </p>
+            <p>
+              For self-hosted GitLab instances, also set{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITLAB_URL=https://your-gitlab-instance.com
+              </code>
+            </p>
+          </div>
+        )}
+
+        <form onSubmit={handleConnect}>
+          <div className="grid grid-cols-1 gap-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">GitLab URL</label>
+              <input
+                type="text"
+                value={gitlabUrl}
+                onChange={(e) => setGitlabUrl(e.target.value)}
+                disabled={isConnecting || isConnected}
+                placeholder="https://gitlab.com"
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-bolt-elements-background-depth-1',
+                  'border border-bolt-elements-borderColor',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                  'disabled:opacity-50',
+                )}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Access Token</label>
+              <input
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                disabled={isConnecting || isConnected}
+                placeholder="Enter your GitLab access token"
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-bolt-elements-background-depth-1',
+                  'border border-bolt-elements-borderColor',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href={`${gitlabUrl}/-/user_settings/personal_access_tokens`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+                <span className="mx-2">•</span>
+                <span>Required scopes: api, read_repository</span>
+              </div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+              <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            {!isConnected ? (
+              <>
+                <button
+                  type="submit"
+                  disabled={isConnecting || !token.trim()}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-[#FC6D26] text-white',
+                    'hover:bg-[#E24329] hover:text-white',
+                    'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                    'transform active:scale-95',
+                  )}
+                >
+                  {isConnecting ? (
+                    <>
+                      <div className="i-ph:spinner-gap animate-spin" />
+                      Connecting...
+                    </>
+                  ) : (
+                    <>
+                      <div className="i-ph:plug-charging w-4 h-4" />
+                      Connect
+                    </>
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    console.log('Manual test:', { token: token ? `${token.substring(0, 10)}...` : 'empty', gitlabUrl })
+                  }
+                  className="px-4 py-2 rounded-lg text-sm bg-gray-500 text-white hover:bg-gray-600"
+                >
+                  Test Values
+                </button>
+              </>
+            ) : (
+              <>
+                <div className="flex items-center justify-between w-full">
+                  <div className="flex items-center gap-4">
+                    <button
+                      onClick={handleDisconnect}
+                      className={classNames(
+                        'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                        'bg-red-500 text-white',
+                        'hover:bg-red-600',
+                      )}
+                    >
+                      <div className="i-ph:plug w-4 h-4" />
+                      Disconnect
+                    </button>
+                    <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                      <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                      Connected to GitLab
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() =>
+                        window.open(
+                          `${connection?.gitlabUrl || 'https://gitlab.com'}/dashboard`,
+                          '_blank',
+                          'noopener,noreferrer',
+                        )
+                      }
+                      className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                    >
+                      <div className="i-ph:layout w-4 h-4" />
+                      Dashboard
+                    </Button>
+                    <Button
+                      onClick={onTestConnection}
+                      disabled={connectionTest?.status === 'testing'}
+                      variant="outline"
+                      className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                    >
+                      {connectionTest?.status === 'testing' ? (
+                        <>
+                          <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                          Testing...
+                        </>
+                      ) : (
+                        <>
+                          <div className="i-ph:plug-charging w-4 h-4" />
+                          Test Connection
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </form>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/components/@settings/tabs/gitlab/components/GitLabRepositorySelector.tsx b/app/components/@settings/tabs/gitlab/components/GitLabRepositorySelector.tsx
new file mode 100644
index 0000000..3f56bb1
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/GitLabRepositorySelector.tsx
@@ -0,0 +1,358 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { BranchSelector } from '~/components/ui/BranchSelector';
+import { RepositoryCard } from './RepositoryCard';
+import type { GitLabProjectInfo } from '~/types/GitLab';
+import { useGitLabConnection } from '~/lib/hooks';
+import { classNames } from '~/utils/classNames';
+import { Search, RefreshCw, GitBranch, Calendar, Filter } from 'lucide-react';
+
+interface GitLabRepositorySelectorProps {
+  onClone?: (repoUrl: string, branch?: string) => void;
+  className?: string;
+}
+
+type SortOption = 'updated' | 'stars' | 'name' | 'created';
+type FilterOption = 'all' | 'owned' | 'member';
+
+export function GitLabRepositorySelector({ onClone, className }: GitLabRepositorySelectorProps) {
+  const { connection, isConnected } = useGitLabConnection();
+  const [repositories, setRepositories] = useState<GitLabProjectInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<SortOption>('updated');
+  const [filterBy, setFilterBy] = useState<FilterOption>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [error, setError] = useState<string | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedRepo, setSelectedRepo] = useState<GitLabProjectInfo | null>(null);
+  const [isBranchSelectorOpen, setIsBranchSelectorOpen] = useState(false);
+
+  const REPOS_PER_PAGE = 12;
+
+  // Fetch repositories
+  const fetchRepositories = async (refresh = false) => {
+    if (!isConnected || !connection?.token) {
+      return;
+    }
+
+    const loadingState = refresh ? setIsRefreshing : setIsLoading;
+    loadingState(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/gitlab-projects', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          token: connection.token,
+          gitlabUrl: connection.gitlabUrl || 'https://gitlab.com',
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData: any = await response.json().catch(() => ({ error: 'Failed to fetch repositories' }));
+        throw new Error(errorData.error || 'Failed to fetch repositories');
+      }
+
+      const data: any = await response.json();
+      setRepositories(data.projects || []);
+    } catch (err) {
+      console.error('Failed to fetch GitLab repositories:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch repositories');
+
+      // Fallback to empty array on error
+      setRepositories([]);
+    } finally {
+      loadingState(false);
+    }
+  };
+
+  // Filter and search repositories
+  const filteredRepositories = useMemo(() => {
+    if (!repositories) {
+      return [];
+    }
+
+    const filtered = repositories.filter((repo: GitLabProjectInfo) => {
+      // Search filter
+      const matchesSearch =
+        !searchQuery ||
+        repo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        repo.path_with_namespace.toLowerCase().includes(searchQuery.toLowerCase());
+
+      // Type filter
+      let matchesFilter = true;
+
+      switch (filterBy) {
+        case 'owned':
+          // This would need owner information from the API response
+          matchesFilter = true; // For now, show all
+          break;
+        case 'member':
+          // This would need member information from the API response
+          matchesFilter = true; // For now, show all
+          break;
+        case 'all':
+        default:
+          matchesFilter = true;
+          break;
+      }
+
+      return matchesSearch && matchesFilter;
+    });
+
+    // Sort repositories
+    filtered.sort((a: GitLabProjectInfo, b: GitLabProjectInfo) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'stars':
+          return b.star_count - a.star_count;
+        case 'created':
+          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(); // Using updated_at as proxy
+        case 'updated':
+        default:
+          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
+      }
+    });
+
+    return filtered;
+  }, [repositories, searchQuery, sortBy, filterBy]);
+
+  // Pagination
+  const totalPages = Math.ceil(filteredRepositories.length / REPOS_PER_PAGE);
+  const startIndex = (currentPage - 1) * REPOS_PER_PAGE;
+  const currentRepositories = filteredRepositories.slice(startIndex, startIndex + REPOS_PER_PAGE);
+
+  const handleRefresh = () => {
+    fetchRepositories(true);
+  };
+
+  const handleCloneRepository = (repo: GitLabProjectInfo) => {
+    setSelectedRepo(repo);
+    setIsBranchSelectorOpen(true);
+  };
+
+  const handleBranchSelect = (branch: string) => {
+    if (onClone && selectedRepo) {
+      onClone(selectedRepo.http_url_to_repo, branch);
+    }
+
+    setSelectedRepo(null);
+  };
+
+  const handleCloseBranchSelector = () => {
+    setIsBranchSelectorOpen(false);
+    setSelectedRepo(null);
+  };
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, sortBy, filterBy]);
+
+  // Fetch repositories when connection is ready
+  useEffect(() => {
+    if (isConnected && connection?.token) {
+      fetchRepositories();
+    }
+  }, [isConnected, connection?.token]);
+
+  if (!isConnected || !connection) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-bolt-elements-textSecondary mb-4">Please connect to GitLab first to browse repositories</p>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Refresh Connection
+        </Button>
+      </div>
+    );
+  }
+
+  if (error && !repositories.length) {
+    return (
+      <div className="text-center p-8">
+        <div className="text-red-500 mb-4">
+          <GitBranch className="w-12 h-12 mx-auto mb-2" />
+          <p className="font-medium">Failed to load repositories</p>
+          <p className="text-sm text-bolt-elements-textSecondary mt-1">{error}</p>
+        </div>
+        <Button variant="outline" onClick={handleRefresh} disabled={isRefreshing}>
+          <RefreshCw className={classNames('w-4 h-4 mr-2', { 'animate-spin': isRefreshing })} />
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  if (isLoading && !repositories.length) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 space-y-4">
+        <div className="animate-spin w-8 h-8 border-2 border-bolt-elements-borderColorActive border-t-transparent rounded-full" />
+        <p className="text-sm text-bolt-elements-textSecondary">Loading repositories...</p>
+      </div>
+    );
+  }
+
+  if (!repositories.length && !isLoading) {
+    return (
+      <div className="text-center p-8">
+        <GitBranch className="w-12 h-12 text-bolt-elements-textTertiary mx-auto mb-4" />
+        <p className="text-bolt-elements-textSecondary mb-4">No repositories found</p>
+        <Button variant="outline" onClick={handleRefresh} disabled={isRefreshing}>
+          <RefreshCw className={classNames('w-4 h-4 mr-2', { 'animate-spin': isRefreshing })} />
+          Refresh
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className={classNames('space-y-6', className)}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Header with stats */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Select Repository to Clone</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">
+            {filteredRepositories.length} of {repositories.length} repositories
+          </p>
+        </div>
+        <Button
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          variant="outline"
+          size="sm"
+          className="flex items-center gap-2"
+        >
+          <RefreshCw className={classNames('w-4 h-4', { 'animate-spin': isRefreshing })} />
+          Refresh
+        </Button>
+      </div>
+
+      {error && repositories.length > 0 && (
+        <div className="p-3 rounded-lg bg-yellow-50 border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700">
+          <p className="text-sm text-yellow-800 dark:text-yellow-200">Warning: {error}. Showing cached data.</p>
+        </div>
+      )}
+
+      {/* Search and Filters */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        {/* Search */}
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bolt-elements-textTertiary" />
+          <input
+            type="text"
+            placeholder="Search repositories..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          />
+        </div>
+
+        {/* Sort */}
+        <div className="flex items-center gap-2">
+          <Calendar className="w-4 h-4 text-bolt-elements-textTertiary" />
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as SortOption)}
+            className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          >
+            <option value="updated">Recently updated</option>
+            <option value="stars">Most starred</option>
+            <option value="name">Name (A-Z)</option>
+            <option value="created">Recently created</option>
+          </select>
+        </div>
+
+        {/* Filter */}
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-bolt-elements-textTertiary" />
+          <select
+            value={filterBy}
+            onChange={(e) => setFilterBy(e.target.value as FilterOption)}
+            className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          >
+            <option value="all">All repositories</option>
+            <option value="owned">Owned repositories</option>
+            <option value="member">Member repositories</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Repository Grid */}
+      {currentRepositories.length > 0 ? (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {currentRepositories.map((repo) => (
+              <div key={repo.id} className="relative">
+                <RepositoryCard repo={repo} onClone={() => handleCloneRepository(repo)} />
+              </div>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between pt-4 border-t border-bolt-elements-borderColor">
+              <div className="text-sm text-bolt-elements-textSecondary">
+                Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
+                {Math.min(startIndex + REPOS_PER_PAGE, filteredRepositories.length)} of {filteredRepositories.length}{' '}
+                repositories
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                  variant="outline"
+                  size="sm"
+                >
+                  Previous
+                </Button>
+                <span className="text-sm text-bolt-elements-textSecondary px-3">
+                  {currentPage} of {totalPages}
+                </span>
+                <Button
+                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                  variant="outline"
+                  size="sm"
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-center py-8">
+          <p className="text-bolt-elements-textSecondary">No repositories found matching your search criteria.</p>
+        </div>
+      )}
+
+      {/* Branch Selector Modal */}
+      {selectedRepo && (
+        <BranchSelector
+          provider="gitlab"
+          repoOwner={selectedRepo.path_with_namespace.split('/')[0]}
+          repoName={selectedRepo.path_with_namespace.split('/')[1]}
+          projectId={selectedRepo.id}
+          token={connection?.token || ''}
+          gitlabUrl={connection?.gitlabUrl}
+          defaultBranch={selectedRepo.default_branch}
+          onBranchSelect={handleBranchSelect}
+          onClose={handleCloseBranchSelector}
+          isOpen={isBranchSelectorOpen}
+        />
+      )}
+    </motion.div>
+  );
+}
diff --git a/app/components/@settings/tabs/connections/gitlab/RepositoryCard.tsx b/app/components/@settings/tabs/gitlab/components/RepositoryCard.tsx
similarity index 100%
rename from app/components/@settings/tabs/connections/gitlab/RepositoryCard.tsx
rename to app/components/@settings/tabs/gitlab/components/RepositoryCard.tsx
diff --git a/app/components/@settings/tabs/connections/gitlab/RepositoryList.tsx b/app/components/@settings/tabs/gitlab/components/RepositoryList.tsx
similarity index 100%
rename from app/components/@settings/tabs/connections/gitlab/RepositoryList.tsx
rename to app/components/@settings/tabs/gitlab/components/RepositoryList.tsx
diff --git a/app/components/@settings/tabs/connections/gitlab/StatsDisplay.tsx b/app/components/@settings/tabs/gitlab/components/StatsDisplay.tsx
similarity index 100%
rename from app/components/@settings/tabs/connections/gitlab/StatsDisplay.tsx
rename to app/components/@settings/tabs/gitlab/components/StatsDisplay.tsx
diff --git a/app/components/@settings/tabs/connections/gitlab/index.ts b/app/components/@settings/tabs/gitlab/components/index.ts
similarity index 100%
rename from app/components/@settings/tabs/connections/gitlab/index.ts
rename to app/components/@settings/tabs/gitlab/components/index.ts
diff --git a/app/components/@settings/tabs/netlify/NetlifyTab.tsx b/app/components/@settings/tabs/netlify/NetlifyTab.tsx
new file mode 100644
index 0000000..7f41dab
--- /dev/null
+++ b/app/components/@settings/tabs/netlify/NetlifyTab.tsx
@@ -0,0 +1,1393 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { classNames } from '~/utils/classNames';
+import { useStore } from '@nanostores/react';
+import { netlifyConnection, updateNetlifyConnection, initializeNetlifyConnection } from '~/lib/stores/netlify';
+import type { NetlifySite, NetlifyDeploy, NetlifyBuild, NetlifyUser } from '~/types/netlify';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { formatDistanceToNow } from 'date-fns';
+import { Badge } from '~/components/ui/Badge';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface SiteAction {
+  name: string;
+  icon: string;
+  action: (siteId: string) => Promise<void>;
+  requiresConfirmation?: boolean;
+  variant?: 'default' | 'destructive' | 'outline';
+}
+
+// Netlify logo SVG component
+const NetlifyLogo = () => (
+  <svg viewBox="0 0 40 40" className="w-5 h-5">
+    <path
+      fill="currentColor"
+      d="M28.589 14.135l-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 0 1-.028-.093l.773-4.726 3.625 3.626-3.77 1.604a.083.083 0 0 1-.033.006h-.015c-.005-.003-.01-.007-.02-.017a1.716 1.716 0 0 0-.495-.381zm5.258-.288l3.876 3.876c.805.806 1.208 1.208 1.674 1.355a2 2 0 0 1 1.206 0c.466-.148.869-.55 1.674-1.356L8.73 28.73l2.349-3.643c.011-.018.022-.034.04-.047.025-.018.061-.01.091 0a2.434 2.434 0 0 0 1.638-.083c.027-.01.054-.017.075.002a.19.19 0 0 1 .028.032L21.95 38.05zM7.863 27.863L5.8 25.8l4.074-1.738a.084.084 0 0 1 .033-.007c.034 0 .054.034.072.065a2.91 2.91 0 0 0 .13.184l.013.016c.012.017.004.034-.008.05l-2.25 3.493zm-2.976-2.976l-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 0 0 .03.005c.049.008.103.017.103.063 0 .05-.059.073-.109.092l-.023.01-4.337 1.837zM.831 19.892a2 2 0 0 1 .09-.495c.148-.466.55-.868 1.356-1.674l3.34-3.34a2175.525 2175.525 0 0 0 4.626 6.687c.027.036.057.076.026.106-.146.161-.292.337-.395.528a.16.16 0 0 1-.05.062c-.013.008-.027.005-.042.002H9.78L.831 19.892zm5.68-6.403l4.491-4.491c.422.185 1.958.834 3.332 1.414 1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 0 0 .523 1.828c.03.03 0 .073-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.043.05-.024.015-.058.008-.086.001a2.274 2.274 0 0 0-.543-.074c-.164 0-.342.03-.522.063h-.001c-.02.003-.038.007-.054-.005a.21.21 0 0 1-.045-.051l-4.808-7.013zm5.398-5.398l5.814-5.814c.805-.805 1.208-1.208 1.674-1.355a2 2 0 0 1 1.206 0c.466.147.869.55 1.674 1.355l1.26 1.26-4.135 6.404a.155.155 0 0 1-.041.048c-.025.017-.06.01-.09 0a2.097 2.097 0 0 0-1.92.37c-.027.028-.067.012-.101-.003-.54-.235-4.74-2.01-5.341-2.265zm12.506-3.676l3.818 3.818-.92 5.698v.015a.135.135 0 0 1-.008.038c-.01.02-.03.024-.05.03a1.83 1.83 0 0 0-.548.273.154.154 0 0 0-.02.017c-.011.012-.022.023-.04.025a.114.114 0 0 1-.043-.007l-5.818-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 0 0-.31-.915c-.028-.046-.059-.094-.035-.141l4.066-6.303zm-3.932 8.606l5.454 2.31c.03.014.063.027.076.058a.106.106 0 0 1 0 .057c-.016.08-.03.171-.03.263v.153c0 .038-.039.054-.075.069l-.011.004c-.864.369-12.13 5.173-12.147 5.173-.017 0-.035 0-.052-.017-.03-.03 0-.072.027-.11a.76.76 0 0 0 .014-.02l4.482-6.94.008-.012c.026-.042.056-.089.104-.089l.045.007c.102.014.192.027.283.027.68 0 1.31-.331 1.69-.897a.16.16 0 0 1 .034-.04c.027-.02.067-.01.098.004zm-6.246 9.185l12.28-5.237s.018 0 .035.017c.067.067.124.112.179.154l.027.017c.025.014.05.03.052.056 0 .01 0 .016-.002.025L25.756 23.7l-.004.026c-.007.05-.014.107-.061.107a1.729 1.729 0 0 0-1.373.847l-.005.008c-.014.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.01-.002-.152-.519-.163-.52z"
+    />
+  </svg>
+);
+
+export default function NetlifyTab() {
+  const connection = useStore(netlifyConnection);
+  const [tokenInput, setTokenInput] = useState('');
+  const [fetchingStats, setFetchingStats] = useState(false);
+  const [sites, setSites] = useState<NetlifySite[]>([]);
+  const [deploys, setDeploys] = useState<NetlifyDeploy[]>([]);
+  const [deploymentCount, setDeploymentCount] = useState(0);
+  const [lastUpdated, setLastUpdated] = useState('');
+  const [isStatsOpen, setIsStatsOpen] = useState(false);
+  const [activeSiteIndex, setActiveSiteIndex] = useState(0);
+  const [isSitesExpanded, setIsSitesExpanded] = useState(false);
+  const [isDeploysExpanded, setIsDeploysExpanded] = useState(false);
+  const [isActionLoading, setIsActionLoading] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [connectionTest, setConnectionTest] = useState<ConnectionTestResult | null>(null);
+
+  // Connection testing function
+  const testConnection = async () => {
+    if (!connection.token) {
+      setConnectionTest({
+        status: 'error',
+        message: 'No token provided',
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    setConnectionTest({
+      status: 'testing',
+      message: 'Testing connection...',
+    });
+
+    try {
+      const response = await fetch('https://api.netlify.com/api/v1/user', {
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = (await response.json()) as any;
+        setConnectionTest({
+          status: 'success',
+          message: `Connected successfully as ${data.email}`,
+          timestamp: Date.now(),
+        });
+      } else {
+        setConnectionTest({
+          status: 'error',
+          message: `Connection failed: ${response.status} ${response.statusText}`,
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      setConnectionTest({
+        status: 'error',
+        message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  // Site actions
+  const siteActions: SiteAction[] = [
+    {
+      name: 'Clear Cache',
+      icon: 'i-ph:arrows-clockwise',
+      action: async (siteId: string) => {
+        try {
+          setIsActionLoading(true);
+
+          // Try to get site details first to check for build hooks
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            const errorText = await siteResponse.text();
+
+            if (siteResponse.status === 404) {
+              toast.error('Site not found. This may be a free account limitation.');
+              return;
+            }
+
+            throw new Error(`Failed to get site details: ${errorText}`);
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+
+          // Check if this looks like a free account (limited features)
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          // If site has build hooks, try triggering a build instead
+          if (siteData.build_settings && siteData.build_settings.repo_url) {
+            // Try to trigger a build by making a POST to the site's build endpoint
+            const buildResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/builds`, {
+              method: 'POST',
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                clear_cache: true,
+              }),
+            });
+
+            if (buildResponse.ok) {
+              toast.success('Build triggered with cache clear');
+              return;
+            } else if (buildResponse.status === 422) {
+              // Often indicates free account limitation
+              toast.warning('Build trigger failed. This feature may not be available on free accounts.');
+              return;
+            }
+          }
+
+          // Fallback: Try the standard cache purge endpoint
+          const cacheResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/purge_cache`, {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!cacheResponse.ok) {
+            if (cacheResponse.status === 404) {
+              if (isFreeAccount) {
+                toast.warning('Cache purge not available on free accounts. Try triggering a build instead.');
+              } else {
+                toast.error('Cache purge endpoint not found. This feature may not be available.');
+              }
+
+              return;
+            }
+
+            const errorText = await cacheResponse.text();
+            throw new Error(`Cache purge failed: ${errorText}`);
+          }
+
+          toast.success('Site cache cleared successfully');
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to clear site cache: ${error}`);
+        } finally {
+          setIsActionLoading(false);
+        }
+      },
+    },
+    {
+      name: 'Manage Environment',
+      icon: 'i-ph:gear',
+      action: async (siteId: string) => {
+        try {
+          setIsActionLoading(true);
+
+          // Get site info first to check account type
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            throw new Error('Failed to get site details');
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          // Get environment variables
+          const envResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/env`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (envResponse.ok) {
+            const envVars = (await envResponse.json()) as any[];
+            toast.success(`Environment variables loaded: ${envVars.length} variables`);
+          } else if (envResponse.status === 404) {
+            if (isFreeAccount) {
+              toast.info('Environment variables management is limited on free accounts');
+            } else {
+              toast.info('Site has no environment variables configured');
+            }
+          } else {
+            const errorText = await envResponse.text();
+            toast.error(`Failed to load environment variables: ${errorText}`);
+          }
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to load environment variables: ${error}`);
+        } finally {
+          setIsActionLoading(false);
+        }
+      },
+    },
+    {
+      name: 'Trigger Build',
+      icon: 'i-ph:rocket-launch',
+      action: async (siteId: string) => {
+        try {
+          setIsActionLoading(true);
+
+          const buildResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/builds`, {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+              'Content-Type': 'application/json',
+            },
+          });
+
+          if (!buildResponse.ok) {
+            throw new Error('Failed to trigger build');
+          }
+
+          const buildData = (await buildResponse.json()) as any;
+          toast.success(`Build triggered successfully! ID: ${buildData.id}`);
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to trigger build: ${error}`);
+        } finally {
+          setIsActionLoading(false);
+        }
+      },
+    },
+    {
+      name: 'View Functions',
+      icon: 'i-ph:code',
+      action: async (siteId: string) => {
+        try {
+          setIsActionLoading(true);
+
+          // Get site info first to check account type
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            throw new Error('Failed to get site details');
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          const functionsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/functions`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (functionsResponse.ok) {
+            const functions = (await functionsResponse.json()) as any[];
+            toast.success(`Site has ${functions.length} serverless functions`);
+          } else if (functionsResponse.status === 404) {
+            if (isFreeAccount) {
+              toast.info('Functions may be limited or unavailable on free accounts');
+            } else {
+              toast.info('Site has no serverless functions');
+            }
+          } else {
+            const errorText = await functionsResponse.text();
+            toast.error(`Failed to load functions: ${errorText}`);
+          }
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to load functions: ${error}`);
+        } finally {
+          setIsActionLoading(false);
+        }
+      },
+    },
+    {
+      name: 'Site Analytics',
+      icon: 'i-ph:chart-bar',
+      action: async (siteId: string) => {
+        try {
+          setIsActionLoading(true);
+
+          // Get site info first to check account type
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            throw new Error('Failed to get site details');
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          // Get site traffic data (if available)
+          const analyticsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/traffic`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (analyticsResponse.ok) {
+            await analyticsResponse.json(); // Analytics data received
+            toast.success('Site analytics loaded successfully');
+          } else if (analyticsResponse.status === 404) {
+            if (isFreeAccount) {
+              toast.info('Analytics not available on free accounts. Showing basic site info instead.');
+            }
+
+            // Fallback to basic site info
+            toast.info(`Site: ${siteData.name} - Status: ${siteData.state || 'Unknown'}`);
+          } else {
+            const errorText = await analyticsResponse.text();
+
+            if (isFreeAccount) {
+              toast.info(
+                'Analytics unavailable on free accounts. Site info: ' +
+                  `${siteData.name} (${siteData.state || 'Unknown'})`,
+              );
+            } else {
+              toast.error(`Failed to load analytics: ${errorText}`);
+            }
+          }
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to load site analytics: ${error}`);
+        } finally {
+          setIsActionLoading(false);
+        }
+      },
+    },
+    {
+      name: 'Delete Site',
+      icon: 'i-ph:trash',
+      action: async (siteId: string) => {
+        try {
+          const response = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            method: 'DELETE',
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to delete site');
+          }
+
+          toast.success('Site deleted successfully');
+          fetchNetlifyStats(connection.token);
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to delete site: ${error}`);
+        }
+      },
+      requiresConfirmation: true,
+      variant: 'destructive',
+    },
+  ];
+
+  // Deploy management functions
+  const handleDeploy = async (siteId: string, deployId: string, action: 'lock' | 'unlock' | 'publish') => {
+    try {
+      setIsActionLoading(true);
+
+      const endpoint =
+        action === 'publish'
+          ? `https://api.netlify.com/api/v1/sites/${siteId}/deploys/${deployId}/restore`
+          : `https://api.netlify.com/api/v1/deploys/${deployId}/${action}`;
+
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to ${action} deploy`);
+      }
+
+      toast.success(`Deploy ${action}ed successfully`);
+      fetchNetlifyStats(connection.token);
+    } catch (err: unknown) {
+      const error = err instanceof Error ? err.message : 'Unknown error';
+      toast.error(`Failed to ${action} deploy: ${error}`);
+    } finally {
+      setIsActionLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Initialize connection with environment token if available
+    initializeNetlifyConnection();
+  }, []);
+
+  useEffect(() => {
+    // Check if we have a connection with a token but no stats
+    if (connection.user && connection.token && (!connection.stats || !connection.stats.sites)) {
+      fetchNetlifyStats(connection.token);
+    }
+
+    // Update local state from connection
+    if (connection.stats) {
+      setSites(connection.stats.sites || []);
+      setDeploys(connection.stats.deploys || []);
+      setDeploymentCount(connection.stats.deploys?.length || 0);
+      setLastUpdated(connection.stats.lastDeployTime || '');
+    }
+  }, [connection]);
+
+  const handleConnect = async () => {
+    if (!tokenInput) {
+      toast.error('Please enter a Netlify API token');
+      return;
+    }
+
+    setIsConnecting(true);
+
+    try {
+      const response = await fetch('https://api.netlify.com/api/v1/user', {
+        headers: {
+          Authorization: `Bearer ${tokenInput}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const userData = (await response.json()) as NetlifyUser;
+
+      // Update the connection store
+      updateNetlifyConnection({
+        user: userData,
+        token: tokenInput,
+      });
+
+      toast.success('Connected to Netlify successfully');
+
+      // Fetch stats after successful connection
+      fetchNetlifyStats(tokenInput);
+    } catch (error) {
+      console.error('Error connecting to Netlify:', error);
+      toast.error(`Failed to connect to Netlify: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    } finally {
+      setIsConnecting(false);
+      setTokenInput('');
+    }
+  };
+
+  const handleDisconnect = () => {
+    // Clear from localStorage
+    localStorage.removeItem('netlify_connection');
+
+    // Remove cookies
+    document.cookie = 'netlifyToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+    // Update the store
+    updateNetlifyConnection({ user: null, token: '' });
+    setConnectionTest(null);
+    toast.success('Disconnected from Netlify');
+  };
+
+  const fetchNetlifyStats = async (token: string) => {
+    setFetchingStats(true);
+
+    try {
+      // Fetch sites
+      const sitesResponse = await fetch('https://api.netlify.com/api/v1/sites', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!sitesResponse.ok) {
+        throw new Error(`Failed to fetch sites: ${sitesResponse.statusText}`);
+      }
+
+      const sitesData = (await sitesResponse.json()) as NetlifySite[];
+      setSites(sitesData);
+
+      // Fetch deploys and builds for ALL sites
+      const allDeploysData: NetlifyDeploy[] = [];
+      const allBuildsData: NetlifyBuild[] = [];
+      let lastDeployTime = '';
+      let totalDeploymentCount = 0;
+
+      if (sitesData && sitesData.length > 0) {
+        // Process sites in batches to avoid overwhelming the API
+        const batchSize = 3;
+        const siteBatches = [];
+
+        for (let i = 0; i < sitesData.length; i += batchSize) {
+          siteBatches.push(sitesData.slice(i, i + batchSize));
+        }
+
+        for (const batch of siteBatches) {
+          const batchPromises = batch.map(async (site) => {
+            try {
+              // Fetch deploys for this site
+              const deploysResponse = await fetch(
+                `https://api.netlify.com/api/v1/sites/${site.id}/deploys?per_page=20`,
+                {
+                  headers: {
+                    Authorization: `Bearer ${token}`,
+                  },
+                },
+              );
+
+              let siteDeploys: NetlifyDeploy[] = [];
+
+              if (deploysResponse.ok) {
+                siteDeploys = (await deploysResponse.json()) as NetlifyDeploy[];
+              }
+
+              // Fetch builds for this site
+              const buildsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${site.id}/builds?per_page=10`, {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                },
+              });
+
+              let siteBuilds: NetlifyBuild[] = [];
+
+              if (buildsResponse.ok) {
+                siteBuilds = (await buildsResponse.json()) as NetlifyBuild[];
+              }
+
+              return { site, deploys: siteDeploys, builds: siteBuilds };
+            } catch (error) {
+              console.error(`Failed to fetch data for site ${site.name}:`, error);
+              return { site, deploys: [], builds: [] };
+            }
+          });
+
+          const batchResults = await Promise.all(batchPromises);
+
+          for (const result of batchResults) {
+            allDeploysData.push(...result.deploys);
+            allBuildsData.push(...result.builds);
+            totalDeploymentCount += result.deploys.length;
+          }
+
+          // Small delay between batches
+          if (batch !== siteBatches[siteBatches.length - 1]) {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+          }
+        }
+
+        // Sort deploys by creation date (newest first)
+        allDeploysData.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+
+        // Set the most recent deploy time
+        if (allDeploysData.length > 0) {
+          lastDeployTime = allDeploysData[0].created_at;
+          setLastUpdated(lastDeployTime);
+        }
+
+        setDeploys(allDeploysData);
+        setDeploymentCount(totalDeploymentCount);
+      }
+
+      // Update the stats in the store
+      updateNetlifyConnection({
+        stats: {
+          sites: sitesData,
+          deploys: allDeploysData,
+          builds: allBuildsData,
+          lastDeployTime,
+          totalSites: sitesData.length,
+          totalDeploys: totalDeploymentCount,
+          totalBuilds: allBuildsData.length,
+        },
+      });
+
+      toast.success('Netlify stats updated');
+    } catch (error) {
+      console.error('Error fetching Netlify stats:', error);
+      toast.error(`Failed to fetch Netlify stats: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    } finally {
+      setFetchingStats(false);
+    }
+  };
+
+  const renderStats = () => {
+    if (!connection.user || !connection.stats) {
+      return null;
+    }
+
+    return (
+      <div className="mt-6">
+        <Collapsible open={isStatsOpen} onOpenChange={setIsStatsOpen}>
+          <CollapsibleTrigger asChild>
+            <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 cursor-pointer">
+              <div className="flex items-center gap-2">
+                <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                <span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                  Netlify Stats
+                </span>
+              </div>
+              <div
+                className={classNames(
+                  'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                  isStatsOpen ? 'rotate-180' : '',
+                )}
+              />
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="overflow-hidden">
+            <div className="space-y-4 mt-4">
+              {/* Netlify Overview Dashboard */}
+              <div className="mb-6 p-4 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Netlify Overview</h4>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.totalSites}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Total Sites</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.totalDeploys || deploymentCount}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Total Deployments</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.totalBuilds || 0}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Total Builds</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {sites.filter((site) => site.published_deploy?.state === 'ready').length}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Live Sites</div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Advanced Analytics */}
+              <div className="mb-6 space-y-4">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">Deployment Analytics</h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                    <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                      <div className="i-ph:chart-pie w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      Success Rate
+                    </h6>
+                    <div className="space-y-1">
+                      {(() => {
+                        const successfulDeploys = deploys.filter((deploy) => deploy.state === 'ready').length;
+                        const failedDeploys = deploys.filter((deploy) => deploy.state === 'error').length;
+                        const successRate =
+                          deploys.length > 0 ? Math.round((successfulDeploys / deploys.length) * 100) : 0;
+
+                        return [
+                          { label: 'Success Rate', value: `${successRate}%` },
+                          { label: 'Successful', value: successfulDeploys },
+                          { label: 'Failed', value: failedDeploys },
+                        ];
+                      })().map((item, idx) => (
+                        <div key={idx} className="flex justify-between text-xs">
+                          <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                          <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                    <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                      <div className="i-ph:clock w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      Recent Activity
+                    </h6>
+                    <div className="space-y-1">
+                      {(() => {
+                        const now = Date.now();
+                        const last24Hours = deploys.filter(
+                          (deploy) => now - new Date(deploy.created_at).getTime() < 24 * 60 * 60 * 1000,
+                        ).length;
+                        const last7Days = deploys.filter(
+                          (deploy) => now - new Date(deploy.created_at).getTime() < 7 * 24 * 60 * 60 * 1000,
+                        ).length;
+                        const activeSites = sites.filter((site) => {
+                          const lastDeploy = site.published_deploy?.published_at;
+                          return lastDeploy && now - new Date(lastDeploy).getTime() < 7 * 24 * 60 * 60 * 1000;
+                        }).length;
+
+                        return [
+                          { label: 'Last 24 hours', value: last24Hours },
+                          { label: 'Last 7 days', value: last7Days },
+                          { label: 'Active sites', value: activeSites },
+                        ];
+                      })().map((item, idx) => (
+                        <div key={idx} className="flex justify-between text-xs">
+                          <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                          <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Site Health Metrics */}
+              <div className="mb-6">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Site Health Overview</h4>
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+                  {(() => {
+                    const healthySites = sites.filter(
+                      (site) => site.published_deploy?.state === 'ready' && site.ssl_url,
+                    ).length;
+                    const sslEnabled = sites.filter((site) => !!site.ssl_url).length;
+                    const customDomain = sites.filter((site) => !!site.custom_domain).length;
+                    const needsAttention = sites.filter(
+                      (site) => site.published_deploy?.state === 'error' || !site.published_deploy,
+                    ).length;
+                    const buildingSites = sites.filter(
+                      (site) =>
+                        site.published_deploy?.state === 'building' || site.published_deploy?.state === 'processing',
+                    ).length;
+
+                    return [
+                      {
+                        label: 'Healthy',
+                        value: healthySites,
+                        icon: 'i-ph:heart',
+                        color: 'text-green-500',
+                        bgColor: 'bg-green-100 dark:bg-green-900/20',
+                        textColor: 'text-green-800 dark:text-green-400',
+                      },
+                      {
+                        label: 'SSL Enabled',
+                        value: sslEnabled,
+                        icon: 'i-ph:lock',
+                        color: 'text-blue-500',
+                        bgColor: 'bg-blue-100 dark:bg-blue-900/20',
+                        textColor: 'text-blue-800 dark:text-blue-400',
+                      },
+                      {
+                        label: 'Custom Domain',
+                        value: customDomain,
+                        icon: 'i-ph:globe',
+                        color: 'text-purple-500',
+                        bgColor: 'bg-purple-100 dark:bg-purple-900/20',
+                        textColor: 'text-purple-800 dark:text-purple-400',
+                      },
+                      {
+                        label: 'Building',
+                        value: buildingSites,
+                        icon: 'i-ph:gear',
+                        color: 'text-yellow-500',
+                        bgColor: 'bg-yellow-100 dark:bg-yellow-900/20',
+                        textColor: 'text-yellow-800 dark:text-yellow-400',
+                      },
+                      {
+                        label: 'Needs Attention',
+                        value: needsAttention,
+                        icon: 'i-ph:warning',
+                        color: 'text-red-500',
+                        bgColor: 'bg-red-100 dark:bg-red-900/20',
+                        textColor: 'text-red-800 dark:text-red-400',
+                      },
+                    ];
+                  })().map((metric, index) => (
+                    <div
+                      key={index}
+                      className={`flex flex-col p-3 rounded-lg border border-bolt-elements-borderColor ${metric.bgColor}`}
+                    >
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className={`${metric.icon} w-4 h-4 ${metric.color}`} />
+                        <span className="text-xs text-bolt-elements-textSecondary">{metric.label}</span>
+                      </div>
+                      <span className={`text-lg font-medium ${metric.textColor}`}>{metric.value}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-4">
+                <Badge
+                  variant="outline"
+                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                >
+                  <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent" />
+                  <span>{connection.stats.totalSites} Sites</span>
+                </Badge>
+                <Badge
+                  variant="outline"
+                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                >
+                  <div className="i-ph:rocket-launch w-4 h-4 text-bolt-elements-item-contentAccent" />
+                  <span>{deploymentCount} Deployments</span>
+                </Badge>
+                <Badge
+                  variant="outline"
+                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                >
+                  <div className="i-ph:hammer w-4 h-4 text-bolt-elements-item-contentAccent" />
+                  <span>{connection.stats.totalBuilds || 0} Builds</span>
+                </Badge>
+                {lastUpdated && (
+                  <Badge
+                    variant="outline"
+                    className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                  >
+                    <div className="i-ph:clock w-4 h-4 text-bolt-elements-item-contentAccent" />
+                    <span>Updated {formatDistanceToNow(new Date(lastUpdated))} ago</span>
+                  </Badge>
+                )}
+              </div>
+              {sites.length > 0 && (
+                <div className="mt-4 space-y-4">
+                  <div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="flex items-center gap-4">
+                        <h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                          <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                          Your Sites ({sites.length})
+                        </h4>
+                        {sites.length > 8 && (
+                          <button
+                            onClick={() => setIsSitesExpanded(!isSitesExpanded)}
+                            className="text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+                          >
+                            {isSitesExpanded ? 'Show Less' : `Show All ${sites.length}`}
+                          </button>
+                        )}
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => fetchNetlifyStats(connection.token)}
+                        disabled={fetchingStats}
+                        className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10"
+                      >
+                        <div
+                          className={classNames(
+                            'i-ph:arrows-clockwise w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent',
+                            { 'animate-spin': fetchingStats },
+                          )}
+                        />
+                        {fetchingStats ? 'Refreshing...' : 'Refresh'}
+                      </Button>
+                    </div>
+                    <div className="space-y-3">
+                      {(isSitesExpanded ? sites : sites.slice(0, 8)).map((site, index) => (
+                        <div
+                          key={site.id}
+                          className={classNames(
+                            'bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border rounded-lg p-4 transition-all cursor-pointer',
+                            activeSiteIndex === index
+                              ? 'border-bolt-elements-item-contentAccent bg-bolt-elements-item-backgroundActive/10'
+                              : 'border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70',
+                          )}
+                          onClick={() => {
+                            setActiveSiteIndex(index);
+                          }}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <div className="i-ph:cloud w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                              <span className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                {site.name}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Badge
+                                variant={site.published_deploy?.state === 'ready' ? 'default' : 'destructive'}
+                                className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                              >
+                                {site.published_deploy?.state === 'ready' ? (
+                                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                                ) : (
+                                  <div className="i-ph:x-circle w-4 h-4 text-red-500" />
+                                )}
+                                <span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                  {site.published_deploy?.state || 'Unknown'}
+                                </span>
+                              </Badge>
+                            </div>
+                          </div>
+
+                          <div className="mt-3 space-y-2">
+                            <div className="flex items-center gap-2">
+                              <a
+                                href={site.ssl_url || site.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-sm flex items-center gap-1 transition-colors text-bolt-elements-link-text hover:text-bolt-elements-link-textHover dark:text-white dark:hover:text-bolt-elements-link-textHover"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <div className="i-ph:cloud w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                <span className="underline decoration-1 underline-offset-2">
+                                  {site.ssl_url || site.url}
+                                </span>
+                              </a>
+                            </div>
+                            <div className="flex items-center gap-4 text-xs text-bolt-elements-textSecondary">
+                              {site.published_deploy?.framework && (
+                                <div className="flex items-center gap-1">
+                                  <div className="i-ph:cube w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  <span>{site.published_deploy.framework}</span>
+                                </div>
+                              )}
+                              {site.custom_domain && (
+                                <div className="flex items-center gap-1">
+                                  <div className="i-ph:globe w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  <span>Custom Domain</span>
+                                </div>
+                              )}
+                              {site.branch && (
+                                <div className="flex items-center gap-1">
+                                  <div className="i-ph:code w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  <span>{site.branch}</span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {activeSiteIndex === index && (
+                            <>
+                              <div className="mt-4 pt-3 border-t border-bolt-elements-borderColor">
+                                <div className="flex items-center gap-2">
+                                  {siteActions.map((action) => (
+                                    <Button
+                                      key={action.name}
+                                      variant={action.variant || 'outline'}
+                                      size="sm"
+                                      onClick={async (e) => {
+                                        e.stopPropagation();
+
+                                        if (action.requiresConfirmation) {
+                                          if (!confirm(`Are you sure you want to ${action.name.toLowerCase()}?`)) {
+                                            return;
+                                          }
+                                        }
+
+                                        setIsActionLoading(true);
+                                        await action.action(site.id);
+                                        setIsActionLoading(false);
+                                      }}
+                                      disabled={isActionLoading}
+                                      className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                                    >
+                                      <div
+                                        className={`${action.icon} w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent`}
+                                      />
+                                      {action.name}
+                                    </Button>
+                                  ))}
+                                </div>
+                              </div>
+                              {site.published_deploy && (
+                                <div className="mt-3 text-sm">
+                                  <div className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                    <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                      Published {formatDistanceToNow(new Date(site.published_deploy.published_at))} ago
+                                    </span>
+                                  </div>
+                                  {site.published_deploy.branch && (
+                                    <div className="flex items-center gap-1 mt-1">
+                                      <div className="i-ph:code w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                      <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                        Branch: {site.published_deploy.branch}
+                                      </span>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                            </>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  {deploys.length > 0 && (
+                    <div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center gap-4">
+                          <h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                            <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                            All Deployments ({deploys.length})
+                          </h4>
+                          {deploys.length > 10 && (
+                            <button
+                              onClick={() => setIsDeploysExpanded(!isDeploysExpanded)}
+                              className="text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+                            >
+                              {isDeploysExpanded ? 'Show Less' : `Show All ${deploys.length}`}
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                      <div className="space-y-2">
+                        {(isDeploysExpanded ? deploys : deploys.slice(0, 10)).map((deploy) => (
+                          <div
+                            key={deploy.id}
+                            className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-3"
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <Badge
+                                  variant={
+                                    deploy.state === 'ready'
+                                      ? 'default'
+                                      : deploy.state === 'error'
+                                        ? 'destructive'
+                                        : 'outline'
+                                  }
+                                  className="flex items-center gap-1"
+                                >
+                                  {deploy.state === 'ready' ? (
+                                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                                  ) : deploy.state === 'error' ? (
+                                    <div className="i-ph:x-circle w-4 h-4 text-red-500" />
+                                  ) : (
+                                    <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent" />
+                                  )}
+                                  <span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                    {deploy.state}
+                                  </span>
+                                </Badge>
+                              </div>
+                              <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                {formatDistanceToNow(new Date(deploy.created_at))} ago
+                              </span>
+                            </div>
+                            {deploy.branch && (
+                              <div className="mt-2 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-1">
+                                <div className="i-ph:code w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                  Branch: {deploy.branch}
+                                </span>
+                              </div>
+                            )}
+                            {deploy.deploy_url && (
+                              <div className="mt-2 text-xs">
+                                <a
+                                  href={deploy.deploy_url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="flex items-center gap-1 transition-colors text-bolt-elements-link-text hover:text-bolt-elements-link-textHover dark:text-white dark:hover:text-bolt-elements-link-textHover"
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <div className="i-ph:cloud w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  <span className="underline decoration-1 underline-offset-2">{deploy.deploy_url}</span>
+                                </a>
+                              </div>
+                            )}
+                            <div className="flex items-center gap-2 mt-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
+                                  const siteForDeploy = sites.find((site) => site.id === deploy.site_id);
+
+                                  if (siteForDeploy) {
+                                    handleDeploy(siteForDeploy.id, deploy.id, 'publish');
+                                  }
+                                }}
+                                disabled={isActionLoading}
+                                className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                              >
+                                <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                Publish
+                              </Button>
+                              {deploy.state === 'ready' ? (
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => {
+                                    const siteForDeploy = sites.find((site) => site.id === deploy.site_id);
+
+                                    if (siteForDeploy) {
+                                      handleDeploy(siteForDeploy.id, deploy.id, 'lock');
+                                    }
+                                  }}
+                                  disabled={isActionLoading}
+                                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                                >
+                                  <div className="i-ph:lock-closed w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  Lock
+                                </Button>
+                              ) : (
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => {
+                                    const siteForDeploy = sites.find((site) => site.id === deploy.site_id);
+
+                                    if (siteForDeploy) {
+                                      handleDeploy(siteForDeploy.id, deploy.id, 'unlock');
+                                    }
+                                  }}
+                                  disabled={isActionLoading}
+                                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                                >
+                                  <div className="i-ph:lock-open w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  Unlock
+                                </Button>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Builds Section */}
+                  {connection.stats.builds && connection.stats.builds.length > 0 && (
+                    <div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
+                      <div className="flex items-center justify-between mb-3">
+                        <h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                          <div className="i-ph:hammer w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                          Recent Builds ({connection.stats.builds.length})
+                        </h4>
+                      </div>
+                      <div className="space-y-2">
+                        {connection.stats.builds.slice(0, 8).map((build: any) => (
+                          <div
+                            key={build.id}
+                            className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-3"
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <Badge variant={build.done ? 'default' : 'outline'} className="flex items-center gap-1">
+                                  {build.done ? (
+                                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                                  ) : (
+                                    <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent" />
+                                  )}
+                                  <span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                    {build.done ? 'Completed' : 'Building'}
+                                  </span>
+                                </Badge>
+                              </div>
+                              <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                {formatDistanceToNow(new Date(build.created_at))} ago
+                              </span>
+                            </div>
+                            {build.commit_ref && (
+                              <div className="mt-2 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-1">
+                                <div className="i-ph:code w-3 h-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                  {build.commit_ref.substring(0, 7)}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <motion.div
+        className="flex items-center justify-between gap-2"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex items-center gap-2">
+          <div className="text-[#00AD9F]">
+            <NetlifyLogo />
+          </div>
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+            Netlify Integration
+          </h2>
+        </div>
+        <div className="flex items-center gap-2">
+          {connection.user && (
+            <Button
+              onClick={testConnection}
+              disabled={connectionTest?.status === 'testing'}
+              variant="outline"
+              className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+            >
+              {connectionTest?.status === 'testing' ? (
+                <>
+                  <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                  Testing...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Test Connection
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </motion.div>
+
+      <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+        Connect and manage your Netlify sites with advanced deployment controls and site management
+      </p>
+
+      {/* Connection Test Results */}
+      {connectionTest && (
+        <motion.div
+          className={classNames('p-4 rounded-lg border', {
+            'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700':
+              connectionTest.status === 'success',
+            'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700': connectionTest.status === 'error',
+            'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700': connectionTest.status === 'testing',
+          })}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <div className="flex items-center gap-2">
+            {connectionTest.status === 'success' && (
+              <div className="i-ph:check-circle w-5 h-5 text-green-600 dark:text-green-400" />
+            )}
+            {connectionTest.status === 'error' && (
+              <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400" />
+            )}
+            {connectionTest.status === 'testing' && (
+              <div className="i-ph:spinner-gap w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />
+            )}
+            <span
+              className={classNames('text-sm font-medium', {
+                'text-green-800 dark:text-green-200': connectionTest.status === 'success',
+                'text-red-800 dark:text-red-200': connectionTest.status === 'error',
+                'text-blue-800 dark:text-blue-200': connectionTest.status === 'testing',
+              })}
+            >
+              {connectionTest.message}
+            </span>
+          </div>
+          {connectionTest.timestamp && (
+            <p className="text-xs text-gray-500 mt-1">{new Date(connectionTest.timestamp).toLocaleString()}</p>
+          )}
+        </motion.div>
+      )}
+
+      {/* Main Connection Component */}
+      <motion.div
+        className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="p-6">
+          {!connection.user ? (
+            <div className="space-y-4">
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You can also set the{' '}
+                  <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                    VITE_NETLIFY_ACCESS_TOKEN
+                  </code>{' '}
+                  environment variable to connect automatically.
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                  API Token
+                </label>
+                <input
+                  type="password"
+                  value={tokenInput}
+                  onChange={(e) => setTokenInput(e.target.value)}
+                  placeholder="Enter your Netlify API token"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#333333]',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                    'disabled:opacity-50',
+                  )}
+                />
+                <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                  <a
+                    href="https://app.netlify.com/user/applications#personal-access-tokens"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                  >
+                    Get your token
+                    <div className="i-ph:arrow-square-out w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <button
+                  onClick={handleConnect}
+                  disabled={isConnecting || !tokenInput}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-[#303030] text-white',
+                    'hover:bg-[#5E41D0] hover:text-white',
+                    'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                    'transform active:scale-95',
+                  )}
+                >
+                  {isConnecting ? (
+                    <>
+                      <div className="i-ph:spinner-gap animate-spin" />
+                      Connecting...
+                    </>
+                  ) : (
+                    <>
+                      <div className="i-ph:plug-charging w-4 h-4" />
+                      Connect
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={handleDisconnect}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-red-500 text-white',
+                    'hover:bg-red-600',
+                  )}
+                >
+                  <div className="i-ph:plug w-4 h-4" />
+                  Disconnect
+                </button>
+                <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                  Connected to Netlify
+                </span>
+              </div>
+              {renderStats()}
+            </div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/connections/netlify/NetlifyConnection.tsx b/app/components/@settings/tabs/netlify/components/NetlifyConnection.tsx
similarity index 81%
rename from app/components/@settings/tabs/connections/netlify/NetlifyConnection.tsx
rename to app/components/@settings/tabs/netlify/components/NetlifyConnection.tsx
index 7a0f238..d915087 100644
--- a/app/components/@settings/tabs/connections/netlify/NetlifyConnection.tsx
+++ b/app/components/@settings/tabs/netlify/components/NetlifyConnection.tsx
@@ -16,6 +16,8 @@ import {
   LockClosedIcon,
   LockOpenIcon,
   RocketLaunchIcon,
+  ChartBarIcon,
+  CogIcon,
 } from '@heroicons/react/24/outline';
 import { Button } from '~/components/ui/Button';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
@@ -73,15 +75,74 @@ export default function NetlifyConnection() {
       icon: ArrowPathIcon,
       action: async (siteId: string) => {
         try {
-          const response = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/cache`, {
+          // Try to get site details first to check for build hooks
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            const errorText = await siteResponse.text();
+
+            if (siteResponse.status === 404) {
+              toast.error('Site not found. This may be a free account limitation.');
+              return;
+            }
+
+            throw new Error(`Failed to get site details: ${errorText}`);
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+
+          // Check if this looks like a free account (limited features)
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          // If site has build hooks, try triggering a build instead
+          if (siteData.build_settings && siteData.build_settings.repo_url) {
+            // Try to trigger a build by making a POST to the site's build endpoint
+            const buildResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/builds`, {
+              method: 'POST',
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                clear_cache: true,
+              }),
+            });
+
+            if (buildResponse.ok) {
+              toast.success('Build triggered with cache clear');
+              return;
+            } else if (buildResponse.status === 422) {
+              // Often indicates free account limitation
+              toast.warning('Build trigger failed. This feature may not be available on free accounts.');
+              return;
+            }
+          }
+
+          // Fallback: Try the standard cache purge endpoint
+          const cacheResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/purge_cache`, {
             method: 'POST',
             headers: {
               Authorization: `Bearer ${connection.token}`,
             },
           });
 
-          if (!response.ok) {
-            throw new Error('Failed to clear cache');
+          if (!cacheResponse.ok) {
+            if (cacheResponse.status === 404) {
+              if (isFreeAccount) {
+                toast.warning('Cache purge not available on free accounts. Try triggering a build instead.');
+              } else {
+                toast.error('Cache purge endpoint not found. This feature may not be available.');
+              }
+
+              return;
+            }
+
+            const errorText = await cacheResponse.text();
+            throw new Error(`Cache purge failed: ${errorText}`);
           }
 
           toast.success('Site cache cleared successfully');
@@ -91,6 +152,174 @@ export default function NetlifyConnection() {
         }
       },
     },
+    {
+      name: 'Manage Environment',
+      icon: CogIcon,
+      action: async (siteId: string) => {
+        try {
+          // Get site info first to check account type
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            throw new Error('Failed to get site details');
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          // Get environment variables
+          const envResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/env`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (envResponse.ok) {
+            const envVars = (await envResponse.json()) as any[];
+            toast.success(`Environment variables loaded: ${envVars.length} variables`);
+          } else if (envResponse.status === 404) {
+            if (isFreeAccount) {
+              toast.info('Environment variables management is limited on free accounts');
+            } else {
+              toast.info('Site has no environment variables configured');
+            }
+          } else {
+            const errorText = await envResponse.text();
+            toast.error(`Failed to load environment variables: ${errorText}`);
+          }
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to load environment variables: ${error}`);
+        }
+      },
+    },
+    {
+      name: 'Trigger Build',
+      icon: RocketLaunchIcon,
+      action: async (siteId: string) => {
+        try {
+          const buildResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/builds`, {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+              'Content-Type': 'application/json',
+            },
+          });
+
+          if (!buildResponse.ok) {
+            throw new Error('Failed to trigger build');
+          }
+
+          const buildData = (await buildResponse.json()) as any;
+          toast.success(`Build triggered successfully! ID: ${buildData.id}`);
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to trigger build: ${error}`);
+        }
+      },
+    },
+    {
+      name: 'View Functions',
+      icon: CodeBracketIcon,
+      action: async (siteId: string) => {
+        try {
+          // Get site info first to check account type
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            throw new Error('Failed to get site details');
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          const functionsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/functions`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (functionsResponse.ok) {
+            const functions = (await functionsResponse.json()) as any[];
+            toast.success(`Site has ${functions.length} serverless functions`);
+          } else if (functionsResponse.status === 404) {
+            if (isFreeAccount) {
+              toast.info('Functions may be limited or unavailable on free accounts');
+            } else {
+              toast.info('Site has no serverless functions');
+            }
+          } else {
+            const errorText = await functionsResponse.text();
+            toast.error(`Failed to load functions: ${errorText}`);
+          }
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to load functions: ${error}`);
+        }
+      },
+    },
+    {
+      name: 'Site Analytics',
+      icon: ChartBarIcon,
+      action: async (siteId: string) => {
+        try {
+          // Get site info first to check account type
+          const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!siteResponse.ok) {
+            throw new Error('Failed to get site details');
+          }
+
+          const siteData = (await siteResponse.json()) as any;
+          const isFreeAccount = !siteData.plan || siteData.plan === 'free' || siteData.plan === 'starter';
+
+          // Get site traffic data (if available)
+          const analyticsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/traffic`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (analyticsResponse.ok) {
+            await analyticsResponse.json(); // Analytics data received
+            toast.success('Site analytics loaded successfully');
+          } else if (analyticsResponse.status === 404) {
+            if (isFreeAccount) {
+              toast.info('Analytics not available on free accounts. Showing basic site info instead.');
+            }
+
+            // Fallback to basic site info
+            toast.info(`Site: ${siteData.name} - Status: ${siteData.state || 'Unknown'}`);
+          } else {
+            const errorText = await analyticsResponse.text();
+
+            if (isFreeAccount) {
+              toast.info(
+                'Analytics unavailable on free accounts. Site info: ' +
+                  `${siteData.name} (${siteData.state || 'Unknown'})`,
+              );
+            } else {
+              toast.error(`Failed to load analytics: ${errorText}`);
+            }
+          }
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to load site analytics: ${error}`);
+        }
+      },
+    },
     {
       name: 'Delete Site',
       icon: TrashIcon,
diff --git a/app/components/@settings/tabs/connections/netlify/index.ts b/app/components/@settings/tabs/netlify/components/index.ts
similarity index 100%
rename from app/components/@settings/tabs/connections/netlify/index.ts
rename to app/components/@settings/tabs/netlify/components/index.ts
diff --git a/app/components/@settings/tabs/providers/local/LocalProvidersTab.new.tsx b/app/components/@settings/tabs/providers/local/LocalProvidersTab.new.tsx
deleted file mode 100644
index 5e0f611..0000000
--- a/app/components/@settings/tabs/providers/local/LocalProvidersTab.new.tsx
+++ /dev/null
@@ -1,556 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { Switch } from '~/components/ui/Switch';
-import { Card, CardContent, CardHeader } from '~/components/ui/Card';
-import { Button } from '~/components/ui/Button';
-import { useSettings } from '~/lib/hooks/useSettings';
-import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
-import type { IProviderConfig } from '~/types/model';
-import { logStore } from '~/lib/stores/logs';
-import { providerBaseUrlEnvKeys } from '~/utils/constants';
-import { useToast } from '~/components/ui/use-toast';
-import { useLocalModelHealth } from '~/lib/hooks/useLocalModelHealth';
-import ErrorBoundary from './ErrorBoundary';
-import { ModelCardSkeleton } from './LoadingSkeleton';
-import SetupGuide from './SetupGuide';
-import StatusDashboard from './StatusDashboard';
-import ProviderCard from './ProviderCard';
-import ModelCard from './ModelCard';
-import { OLLAMA_API_URL } from './types';
-import type { OllamaModel, LMStudioModel } from './types';
-import { Cpu, Server, BookOpen, Activity, PackageOpen, Monitor, Loader2, RotateCw, ExternalLink } from 'lucide-react';
-
-// Type definitions
-type ViewMode = 'dashboard' | 'guide' | 'status';
-
-export default function LocalProvidersTab() {
-  const { providers, updateProviderSettings } = useSettings();
-  const [viewMode, setViewMode] = useState<ViewMode>('dashboard');
-  const [editingProvider, setEditingProvider] = useState<string | null>(null);
-  const [ollamaModels, setOllamaModels] = useState<OllamaModel[]>([]);
-  const [lmStudioModels, setLMStudioModels] = useState<LMStudioModel[]>([]);
-  const [isLoadingModels, setIsLoadingModels] = useState(false);
-  const [isLoadingLMStudioModels, setIsLoadingLMStudioModels] = useState(false);
-  const { toast } = useToast();
-  const { startMonitoring, stopMonitoring } = useLocalModelHealth();
-
-  // Memoized filtered providers to prevent unnecessary re-renders
-  const filteredProviders = useMemo(() => {
-    return Object.entries(providers || {})
-      .filter(([key]) => [...LOCAL_PROVIDERS, 'OpenAILike'].includes(key))
-      .map(([key, value]) => {
-        const provider = value as IProviderConfig;
-        const envKey = providerBaseUrlEnvKeys[key]?.baseUrlKey;
-        const envUrl = envKey ? (import.meta.env[envKey] as string | undefined) : undefined;
-
-        // Set default base URLs for local providers
-        let defaultBaseUrl = provider.settings.baseUrl || envUrl;
-
-        if (!defaultBaseUrl) {
-          if (key === 'Ollama') {
-            defaultBaseUrl = 'http://127.0.0.1:11434';
-          } else if (key === 'LMStudio') {
-            defaultBaseUrl = 'http://127.0.0.1:1234';
-          }
-        }
-
-        return {
-          name: key,
-          settings: {
-            ...provider.settings,
-            baseUrl: defaultBaseUrl,
-          },
-          staticModels: provider.staticModels || [],
-          getDynamicModels: provider.getDynamicModels,
-          getApiKeyLink: provider.getApiKeyLink,
-          labelForGetApiKey: provider.labelForGetApiKey,
-          icon: provider.icon,
-        } as IProviderConfig;
-      })
-      .sort((a, b) => {
-        // Custom sort: Ollama first, then LMStudio, then OpenAILike
-        const order = { Ollama: 0, LMStudio: 1, OpenAILike: 2 };
-        return (order[a.name as keyof typeof order] || 3) - (order[b.name as keyof typeof order] || 3);
-      });
-  }, [providers]);
-
-  const categoryEnabled = useMemo(() => {
-    return filteredProviders.length > 0 && filteredProviders.every((p) => p.settings.enabled);
-  }, [filteredProviders]);
-
-  // Start/stop health monitoring for enabled providers
-  useEffect(() => {
-    filteredProviders.forEach((provider) => {
-      const baseUrl = provider.settings.baseUrl;
-
-      if (provider.settings.enabled && baseUrl) {
-        console.log(`[LocalProvidersTab] Starting monitoring for ${provider.name} at ${baseUrl}`);
-        startMonitoring(provider.name as 'Ollama' | 'LMStudio' | 'OpenAILike', baseUrl);
-      } else if (!provider.settings.enabled && baseUrl) {
-        console.log(`[LocalProvidersTab] Stopping monitoring for ${provider.name} at ${baseUrl}`);
-        stopMonitoring(provider.name as 'Ollama' | 'LMStudio' | 'OpenAILike', baseUrl);
-      }
-    });
-  }, [filteredProviders, startMonitoring, stopMonitoring]);
-
-  // Fetch Ollama models when enabled
-  useEffect(() => {
-    const ollamaProvider = filteredProviders.find((p) => p.name === 'Ollama');
-
-    if (ollamaProvider?.settings.enabled) {
-      fetchOllamaModels();
-    }
-  }, [filteredProviders]);
-
-  // Fetch LM Studio models when enabled
-  useEffect(() => {
-    const lmStudioProvider = filteredProviders.find((p) => p.name === 'LMStudio');
-
-    if (lmStudioProvider?.settings.enabled && lmStudioProvider.settings.baseUrl) {
-      fetchLMStudioModels(lmStudioProvider.settings.baseUrl);
-    }
-  }, [filteredProviders]);
-
-  const fetchOllamaModels = async () => {
-    try {
-      setIsLoadingModels(true);
-
-      const response = await fetch(`${OLLAMA_API_URL}/api/tags`);
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch models');
-      }
-
-      const data = (await response.json()) as { models: OllamaModel[] };
-      setOllamaModels(
-        data.models.map((model) => ({
-          ...model,
-          status: 'idle' as const,
-        })),
-      );
-    } catch {
-      console.error('Error fetching Ollama models');
-    } finally {
-      setIsLoadingModels(false);
-    }
-  };
-
-  const fetchLMStudioModels = async (baseUrl: string) => {
-    try {
-      setIsLoadingLMStudioModels(true);
-
-      const response = await fetch(`${baseUrl}/v1/models`);
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch LM Studio models');
-      }
-
-      const data = (await response.json()) as { data: LMStudioModel[] };
-      setLMStudioModels(data.data || []);
-    } catch {
-      console.error('Error fetching LM Studio models');
-      setLMStudioModels([]);
-    } finally {
-      setIsLoadingLMStudioModels(false);
-    }
-  };
-
-  const handleToggleCategory = useCallback(
-    async (enabled: boolean) => {
-      filteredProviders.forEach((provider) => {
-        updateProviderSettings(provider.name, { ...provider.settings, enabled });
-      });
-      toast(enabled ? 'All local providers enabled' : 'All local providers disabled');
-    },
-    [filteredProviders, updateProviderSettings, toast],
-  );
-
-  const handleToggleProvider = useCallback(
-    (provider: IProviderConfig, enabled: boolean) => {
-      updateProviderSettings(provider.name, {
-        ...provider.settings,
-        enabled,
-      });
-
-      logStore.logProvider(`Provider ${provider.name} ${enabled ? 'enabled' : 'disabled'}`, {
-        provider: provider.name,
-      });
-      toast(`${provider.name} ${enabled ? 'enabled' : 'disabled'}`);
-    },
-    [updateProviderSettings, toast],
-  );
-
-  const handleUpdateBaseUrl = useCallback(
-    (provider: IProviderConfig, newBaseUrl: string) => {
-      updateProviderSettings(provider.name, {
-        ...provider.settings,
-        baseUrl: newBaseUrl,
-      });
-      toast(`${provider.name} base URL updated`);
-    },
-    [updateProviderSettings, toast],
-  );
-
-  const handleUpdateOllamaModel = async (modelName: string) => {
-    try {
-      setOllamaModels((prev) => prev.map((m) => (m.name === modelName ? { ...m, status: 'updating' } : m)));
-
-      const response = await fetch(`${OLLAMA_API_URL}/api/pull`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: modelName }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`Failed to update ${modelName}`);
-      }
-
-      // Handle streaming response
-      const reader = response.body?.getReader();
-
-      if (!reader) {
-        throw new Error('No response reader available');
-      }
-
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        const text = new TextDecoder().decode(value);
-        const lines = text.split('\n').filter(Boolean);
-
-        for (const line of lines) {
-          try {
-            const data = JSON.parse(line);
-
-            if (data.status && data.completed && data.total) {
-              setOllamaModels((current) =>
-                current.map((m) =>
-                  m.name === modelName
-                    ? {
-                        ...m,
-                        progress: {
-                          current: data.completed,
-                          total: data.total,
-                          status: data.status,
-                        },
-                      }
-                    : m,
-                ),
-              );
-            }
-          } catch {
-            // Ignore parsing errors
-          }
-        }
-      }
-
-      setOllamaModels((prev) =>
-        prev.map((m) => (m.name === modelName ? { ...m, status: 'updated', progress: undefined } : m)),
-      );
-      toast(`Successfully updated ${modelName}`);
-    } catch {
-      setOllamaModels((prev) =>
-        prev.map((m) => (m.name === modelName ? { ...m, status: 'error', progress: undefined } : m)),
-      );
-      toast(`Failed to update ${modelName}`, { type: 'error' });
-    }
-  };
-
-  const handleDeleteOllamaModel = async (modelName: string) => {
-    if (!window.confirm(`Are you sure you want to delete ${modelName}?`)) {
-      return;
-    }
-
-    try {
-      const response = await fetch(`${OLLAMA_API_URL}/api/delete`, {
-        method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: modelName }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`Failed to delete ${modelName}`);
-      }
-
-      setOllamaModels((current) => current.filter((m) => m.name !== modelName));
-      toast(`Deleted ${modelName}`);
-    } catch {
-      toast(`Failed to delete ${modelName}`, { type: 'error' });
-    }
-  };
-
-  // Render different views based on viewMode
-  if (viewMode === 'guide') {
-    return (
-      <ErrorBoundary>
-        <SetupGuide onBack={() => setViewMode('dashboard')} />
-      </ErrorBoundary>
-    );
-  }
-
-  if (viewMode === 'status') {
-    return (
-      <ErrorBoundary>
-        <StatusDashboard onBack={() => setViewMode('dashboard')} />
-      </ErrorBoundary>
-    );
-  }
-
-  return (
-    <ErrorBoundary>
-      <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
-          <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500/20 to-blue-500/20 flex items-center justify-center ring-1 ring-purple-500/30">
-              <Cpu className="w-6 h-6 text-purple-500" />
-            </div>
-            <div>
-              <h2 className="text-2xl font-semibold text-bolt-elements-textPrimary">Local AI Providers</h2>
-              <p className="text-sm text-bolt-elements-textSecondary">Configure and manage your local AI models</p>
-            </div>
-          </div>
-          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium text-bolt-elements-textSecondary">Enable All</span>
-              <Switch
-                checked={categoryEnabled}
-                onCheckedChange={handleToggleCategory}
-                aria-label="Toggle all local providers"
-              />
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setViewMode('guide')}
-                className="bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 border-bolt-elements-borderColor hover:border-purple-500/30 transition-all duration-200 gap-2"
-              >
-                <BookOpen className="w-4 h-4" />
-                Setup Guide
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setViewMode('status')}
-                className="bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 border-bolt-elements-borderColor hover:border-purple-500/30 transition-all duration-200 gap-2"
-              >
-                <Activity className="w-4 h-4" />
-                Status
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        {/* Provider Cards */}
-        <div className="space-y-6">
-          {filteredProviders.map((provider) => (
-            <div key={provider.name} className="space-y-4">
-              <ProviderCard
-                provider={provider}
-                onToggle={(enabled) => handleToggleProvider(provider, enabled)}
-                onUpdateBaseUrl={(url) => handleUpdateBaseUrl(provider, url)}
-                isEditing={editingProvider === provider.name}
-                onStartEditing={() => setEditingProvider(provider.name)}
-                onStopEditing={() => setEditingProvider(null)}
-              />
-
-              {/* Ollama Models Section */}
-              {provider.name === 'Ollama' && provider.settings.enabled && (
-                <Card className="mt-4 bg-bolt-elements-background-depth-2">
-                  <CardHeader className="pb-3">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <PackageOpen className="w-5 h-5 text-purple-500" />
-                        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Installed Models</h3>
-                      </div>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={fetchOllamaModels}
-                        disabled={isLoadingModels}
-                        className="bg-transparent hover:bg-bolt-elements-background-depth-2"
-                      >
-                        {isLoadingModels ? (
-                          <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                        ) : (
-                          <RotateCw className="w-4 h-4 mr-2" />
-                        )}
-                        Refresh
-                      </Button>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    {isLoadingModels ? (
-                      <div className="space-y-4">
-                        {Array.from({ length: 3 }).map((_, i) => (
-                          <ModelCardSkeleton key={i} />
-                        ))}
-                      </div>
-                    ) : ollamaModels.length === 0 ? (
-                      <div className="text-center py-8">
-                        <PackageOpen className="w-16 h-16 mx-auto text-bolt-elements-textTertiary mb-4" />
-                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">No Models Installed</h3>
-                        <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                          Visit{' '}
-                          <a
-                            href="https://ollama.com/library"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-purple-500 hover:underline inline-flex items-center gap-1"
-                          >
-                            ollama.com/library
-                            <ExternalLink className="w-3 h-3" />
-                          </a>{' '}
-                          to browse available models
-                        </p>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="bg-gradient-to-r from-purple-500/8 to-purple-600/8 hover:from-purple-500/15 hover:to-purple-600/15 border-purple-500/25 hover:border-purple-500/40 transition-all duration-300 gap-2 group shadow-sm hover:shadow-md font-medium"
-                          _asChild
-                        >
-                          <a
-                            href="https://ollama.com/library"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-center gap-2"
-                          >
-                            <ExternalLink className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 flex-shrink-0" />
-                            <span className="flex-1 text-center font-medium">Browse Models</span>
-                          </a>
-                        </Button>
-                      </div>
-                    ) : (
-                      <div className="grid gap-4">
-                        {ollamaModels.map((model) => (
-                          <ModelCard
-                            key={model.name}
-                            model={model}
-                            onUpdate={() => handleUpdateOllamaModel(model.name)}
-                            onDelete={() => handleDeleteOllamaModel(model.name)}
-                          />
-                        ))}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              )}
-
-              {/* LM Studio Models Section */}
-              {provider.name === 'LMStudio' && provider.settings.enabled && (
-                <Card className="mt-4 bg-bolt-elements-background-depth-2">
-                  <CardHeader className="pb-3">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <Monitor className="w-5 h-5 text-blue-500" />
-                        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Available Models</h3>
-                      </div>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => fetchLMStudioModels(provider.settings.baseUrl!)}
-                        disabled={isLoadingLMStudioModels}
-                        className="bg-transparent hover:bg-bolt-elements-background-depth-2"
-                      >
-                        {isLoadingLMStudioModels ? (
-                          <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                        ) : (
-                          <RotateCw className="w-4 h-4 mr-2" />
-                        )}
-                        Refresh
-                      </Button>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    {isLoadingLMStudioModels ? (
-                      <div className="space-y-4">
-                        {Array.from({ length: 3 }).map((_, i) => (
-                          <ModelCardSkeleton key={i} />
-                        ))}
-                      </div>
-                    ) : lmStudioModels.length === 0 ? (
-                      <div className="text-center py-8">
-                        <Monitor className="w-16 h-16 mx-auto text-bolt-elements-textTertiary mb-4" />
-                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">No Models Available</h3>
-                        <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                          Make sure LM Studio is running with the local server started and CORS enabled.
-                        </p>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="bg-gradient-to-r from-blue-500/8 to-blue-600/8 hover:from-blue-500/15 hover:to-blue-600/15 border-blue-500/25 hover:border-blue-500/40 transition-all duration-300 gap-2 group shadow-sm hover:shadow-md font-medium"
-                          _asChild
-                        >
-                          <a
-                            href="https://lmstudio.ai/"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-center gap-2"
-                          >
-                            <ExternalLink className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 flex-shrink-0" />
-                            <span className="flex-1 text-center font-medium">Get LM Studio</span>
-                          </a>
-                        </Button>
-                      </div>
-                    ) : (
-                      <div className="grid gap-4">
-                        {lmStudioModels.map((model) => (
-                          <Card key={model.id} className="bg-bolt-elements-background-depth-3">
-                            <CardContent className="p-4">
-                              <div className="space-y-2">
-                                <div className="flex items-center gap-2">
-                                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
-                                    {model.id}
-                                  </h4>
-                                  <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-500">
-                                    Available
-                                  </span>
-                                </div>
-                                <div className="flex items-center gap-4 text-xs text-bolt-elements-textSecondary">
-                                  <div className="flex items-center gap-1">
-                                    <Server className="w-3 h-3" />
-                                    <span>{model.object}</span>
-                                  </div>
-                                  <div className="flex items-center gap-1">
-                                    <Activity className="w-3 h-3" />
-                                    <span>Owned by: {model.owned_by}</span>
-                                  </div>
-                                  {model.created && (
-                                    <div className="flex items-center gap-1">
-                                      <Activity className="w-3 h-3" />
-                                      <span>Created: {new Date(model.created * 1000).toLocaleDateString()}</span>
-                                    </div>
-                                  )}
-                                </div>
-                              </div>
-                            </CardContent>
-                          </Card>
-                        ))}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-          ))}
-        </div>
-
-        {filteredProviders.length === 0 && (
-          <Card className="bg-bolt-elements-background-depth-2">
-            <CardContent className="p-8 text-center">
-              <Server className="w-16 h-16 mx-auto text-bolt-elements-textTertiary mb-4" />
-              <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">No Local Providers Available</h3>
-              <p className="text-sm text-bolt-elements-textSecondary">
-                Local providers will appear here when they're configured in the system.
-              </p>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-    </ErrorBoundary>
-  );
-}
diff --git a/app/components/@settings/tabs/supabase/SupabaseTab.tsx b/app/components/@settings/tabs/supabase/SupabaseTab.tsx
new file mode 100644
index 0000000..cec555a
--- /dev/null
+++ b/app/components/@settings/tabs/supabase/SupabaseTab.tsx
@@ -0,0 +1,1089 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import {
+  supabaseConnection,
+  isConnecting,
+  isFetchingStats,
+  isFetchingApiKeys,
+  updateSupabaseConnection,
+  fetchSupabaseStats,
+  fetchProjectApiKeys,
+  initializeSupabaseConnection,
+  type SupabaseProject,
+} from '~/lib/stores/supabase';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface ProjectAction {
+  name: string;
+  icon: string;
+  action: (projectId: string) => Promise<void>;
+  requiresConfirmation?: boolean;
+  variant?: 'default' | 'destructive' | 'outline';
+}
+
+// Supabase logo SVG component
+const SupabaseLogo = () => (
+  <svg viewBox="0 0 109 113" className="w-5 h-5">
+    <path
+      fill="currentColor"
+      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+    />
+    <path
+      fillOpacity="0.2"
+      fill="currentColor"
+      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+    />
+    <path
+      fill="currentColor"
+      d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
+    />
+  </svg>
+);
+
+export default function SupabaseTab() {
+  const connection = useStore(supabaseConnection);
+  const connecting = useStore(isConnecting);
+  const fetchingStats = useStore(isFetchingStats);
+  const fetchingApiKeys = useStore(isFetchingApiKeys);
+
+  const [tokenInput, setTokenInput] = useState('');
+  const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
+  const [connectionTest, setConnectionTest] = useState<ConnectionTestResult | null>(null);
+  const [isProjectActionLoading, setIsProjectActionLoading] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState<string>('');
+
+  // Connection testing function - uses server-side API to test environment token
+  const testConnection = async () => {
+    setConnectionTest({
+      status: 'testing',
+      message: 'Testing connection...',
+    });
+
+    try {
+      const response = await fetch('/api/supabase-user', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (response.ok) {
+        const data = (await response.json()) as any;
+        setConnectionTest({
+          status: 'success',
+          message: `Connected successfully using environment token. Found ${data.projects?.length || 0} projects`,
+          timestamp: Date.now(),
+        });
+      } else {
+        const errorData = (await response.json().catch(() => ({}))) as { error?: string };
+        setConnectionTest({
+          status: 'error',
+          message: `Connection failed: ${errorData.error || `${response.status} ${response.statusText}`}`,
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      setConnectionTest({
+        status: 'error',
+        message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  // Project actions
+  const projectActions: ProjectAction[] = [
+    {
+      name: 'Get API Keys',
+      icon: 'i-ph:key',
+      action: async (projectId: string) => {
+        try {
+          await fetchProjectApiKeys(projectId, connection.token);
+          toast.success('API keys fetched successfully');
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to fetch API keys: ${error}`);
+        }
+      },
+    },
+    {
+      name: 'View Dashboard',
+      icon: 'i-ph:layout',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}`, '_blank');
+      },
+    },
+    {
+      name: 'View Database',
+      icon: 'i-ph:database',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/editor`, '_blank');
+      },
+    },
+    {
+      name: 'View Auth',
+      icon: 'i-ph:user-circle',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/auth/users`, '_blank');
+      },
+    },
+    {
+      name: 'View Storage',
+      icon: 'i-ph:folder',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/storage/buckets`, '_blank');
+      },
+    },
+    {
+      name: 'View Functions',
+      icon: 'i-ph:code',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/functions`, '_blank');
+      },
+    },
+    {
+      name: 'View Logs',
+      icon: 'i-ph:scroll',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/logs`, '_blank');
+      },
+    },
+    {
+      name: 'View Settings',
+      icon: 'i-ph:gear',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/settings`, '_blank');
+      },
+    },
+    {
+      name: 'View API Docs',
+      icon: 'i-ph:book',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/api`, '_blank');
+      },
+    },
+    {
+      name: 'View Realtime',
+      icon: 'i-ph:radio',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/realtime`, '_blank');
+      },
+    },
+    {
+      name: 'View Edge Functions',
+      icon: 'i-ph:terminal',
+      action: async (projectId: string) => {
+        window.open(`https://supabase.com/dashboard/project/${projectId}/functions`, '_blank');
+      },
+    },
+  ];
+
+  // Initialize connection on component mount - check server-side token first
+  useEffect(() => {
+    const initializeConnection = async () => {
+      try {
+        // First try to initialize using server-side token
+        await initializeSupabaseConnection();
+
+        // If no connection was established, the user will need to manually enter a token
+        const currentState = supabaseConnection.get();
+
+        if (!currentState.user) {
+          console.log('No server-side Supabase token available, manual connection required');
+        }
+      } catch (error) {
+        console.error('Failed to initialize Supabase connection:', error);
+      }
+    };
+    initializeConnection();
+  }, []);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      if (connection.user && connection.token && !connection.stats) {
+        await fetchSupabaseStats(connection.token);
+      }
+    };
+    fetchProjects();
+  }, [connection.user, connection.token]);
+
+  const handleConnect = async () => {
+    if (!tokenInput) {
+      toast.error('Please enter a Supabase access token');
+      return;
+    }
+
+    isConnecting.set(true);
+
+    try {
+      await fetchSupabaseStats(tokenInput);
+      updateSupabaseConnection({
+        token: tokenInput,
+        isConnected: true,
+      });
+      toast.success('Successfully connected to Supabase');
+      setTokenInput('');
+    } catch (error) {
+      console.error('Auth error:', error);
+      toast.error('Failed to connect to Supabase');
+      updateSupabaseConnection({ user: null, token: '' });
+    } finally {
+      isConnecting.set(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    updateSupabaseConnection({
+      user: null,
+      token: '',
+      stats: undefined,
+      selectedProjectId: undefined,
+      isConnected: false,
+      project: undefined,
+      credentials: undefined,
+    });
+    setConnectionTest(null);
+    setSelectedProjectId('');
+    toast.success('Disconnected from Supabase');
+  };
+
+  const handleProjectAction = async (projectId: string, action: ProjectAction) => {
+    if (action.requiresConfirmation) {
+      if (!confirm(`Are you sure you want to ${action.name.toLowerCase()}?`)) {
+        return;
+      }
+    }
+
+    setIsProjectActionLoading(true);
+    await action.action(projectId);
+    setIsProjectActionLoading(false);
+  };
+
+  const handleProjectSelect = async (projectId: string) => {
+    setSelectedProjectId(projectId);
+    updateSupabaseConnection({ selectedProjectId: projectId });
+
+    if (projectId && connection.token) {
+      try {
+        await fetchProjectApiKeys(projectId, connection.token);
+      } catch (error) {
+        console.error('Failed to fetch API keys:', error);
+      }
+    }
+  };
+
+  const renderProjects = () => {
+    if (fetchingStats) {
+      return (
+        <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+          <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          Fetching Supabase projects...
+        </div>
+      );
+    }
+
+    return (
+      <Collapsible open={isProjectsExpanded} onOpenChange={setIsProjectsExpanded}>
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 cursor-pointer">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:database w-4 h-4 text-bolt-elements-item-contentAccent" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                Your Projects ({connection.stats?.totalProjects || 0})
+              </span>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                isProjectsExpanded ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="overflow-hidden">
+          <div className="space-y-4 mt-4">
+            {/* Supabase Overview Dashboard */}
+            {connection.stats?.projects?.length ? (
+              <div className="mb-6 p-4 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Supabase Overview</h4>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.totalProjects}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Total Projects</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.projects.filter((p: SupabaseProject) => p.status === 'ACTIVE_HEALTHY').length}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Active Projects</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {new Set(connection.stats.projects.map((p: SupabaseProject) => p.region)).size}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Regions Used</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.projects.filter((p: SupabaseProject) => p.status !== 'ACTIVE_HEALTHY').length}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Inactive Projects</div>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {connection.stats?.projects?.length ? (
+              <div className="grid gap-3">
+                {connection.stats.projects.map((project: SupabaseProject) => (
+                  <div
+                    key={project.id}
+                    className={classNames(
+                      'p-4 rounded-lg border transition-colors bg-bolt-elements-background-depth-1 cursor-pointer',
+                      selectedProjectId === project.id
+                        ? 'border-bolt-elements-item-contentAccent bg-bolt-elements-item-backgroundActive/10'
+                        : 'border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70',
+                    )}
+                    onClick={() => handleProjectSelect(project.id)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex-1">
+                        <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                          <div className="i-ph:database w-4 h-4 text-bolt-elements-borderColorActive" />
+                          {project.name}
+                        </h5>
+                        <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:globe w-3 h-3" />
+                            {project.region}
+                          </span>
+                          <span>•</span>
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:clock w-3 h-3" />
+                            {new Date(project.created_at).toLocaleDateString()}
+                          </span>
+                          <span>•</span>
+                          <span
+                            className={classNames(
+                              'flex items-center gap-1 px-2 py-0.5 rounded-full text-xs',
+                              project.status === 'ACTIVE_HEALTHY'
+                                ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                                : project.status === 'SUSPENDED'
+                                  ? 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                                  : project.status === 'INACTIVE'
+                                    ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400'
+                                    : 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400',
+                            )}
+                          >
+                            <div
+                              className={classNames(
+                                'w-2 h-2 rounded-full',
+                                project.status === 'ACTIVE_HEALTHY'
+                                  ? 'bg-green-500'
+                                  : project.status === 'SUSPENDED'
+                                    ? 'bg-red-500'
+                                    : project.status === 'INACTIVE'
+                                      ? 'bg-yellow-500'
+                                      : 'bg-gray-500',
+                              )}
+                            />
+                            {project.status.replace('_', ' ')}
+                          </span>
+                        </div>
+
+                        {/* Project Details Grid */}
+                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-3 pt-3 border-t border-bolt-elements-borderColor">
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {project.stats?.database?.tables ?? '--'}
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:table w-3 h-3" />
+                              Tables
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {project.stats?.storage?.buckets ?? '--'}
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:folder w-3 h-3" />
+                              Buckets
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {project.stats?.functions?.deployed ?? '--'}
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:code w-3 h-3" />
+                              Functions
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {project.stats?.database?.size_mb ? `${project.stats.database.size_mb} MB` : '--'}
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:database w-3 h-3" />
+                              DB Size
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {selectedProjectId === project.id && (
+                      <div className="space-y-4 mt-4 pt-4 border-t border-bolt-elements-borderColor">
+                        <div className="flex flex-wrap items-center gap-1">
+                          {projectActions.map((action) => (
+                            <Button
+                              key={action.name}
+                              variant={action.variant || 'outline'}
+                              size="sm"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleProjectAction(project.id, action);
+                              }}
+                              disabled={isProjectActionLoading || (action.name === 'Get API Keys' && fetchingApiKeys)}
+                              className="flex items-center gap-1 text-xs px-2 py-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                            >
+                              <div className={`${action.icon} w-2.5 h-2.5`} />
+                              {action.name === 'Get API Keys' && fetchingApiKeys ? 'Fetching...' : action.name}
+                            </Button>
+                          ))}
+                        </div>
+
+                        {/* Project Details */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg space-y-2">
+                            <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:database w-4 h-4 text-bolt-elements-item-contentAccent" />
+                              Database Schema
+                            </h6>
+                            <div className="space-y-1 text-xs text-bolt-elements-textSecondary">
+                              <div className="flex justify-between">
+                                <span>Tables:</span>
+                                <span>{project.stats?.database?.tables ?? '--'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Views:</span>
+                                <span>{project.stats?.database?.views ?? '--'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Functions:</span>
+                                <span>{project.stats?.database?.functions ?? '--'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Size:</span>
+                                <span>
+                                  {project.stats?.database?.size_mb ? `${project.stats.database.size_mb} MB` : '--'}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg space-y-2">
+                            <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:folder w-4 h-4 text-bolt-elements-item-contentAccent" />
+                              Storage
+                            </h6>
+                            <div className="space-y-1 text-xs text-bolt-elements-textSecondary">
+                              <div className="flex justify-between">
+                                <span>Buckets:</span>
+                                <span>{project.stats?.storage?.buckets ?? '--'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Files:</span>
+                                <span>{project.stats?.storage?.files ?? '--'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Used:</span>
+                                <span>
+                                  {project.stats?.storage?.used_gb ? `${project.stats.storage.used_gb} GB` : '--'}
+                                </span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Available:</span>
+                                <span>
+                                  {project.stats?.storage?.available_gb
+                                    ? `${project.stats.storage.available_gb} GB`
+                                    : '--'}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        {connection.credentials && (
+                          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg space-y-2">
+                            <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:key w-4 h-4 text-bolt-elements-item-contentAccent" />
+                              Project Credentials
+                            </h6>
+                            <div className="space-y-2">
+                              <div>
+                                <label className="text-xs text-bolt-elements-textSecondary">Supabase URL:</label>
+                                <div className="flex items-center gap-2 mt-1">
+                                  <input
+                                    type="text"
+                                    value={connection.credentials.supabaseUrl || ''}
+                                    readOnly
+                                    className="flex-1 px-2 py-1 text-xs bg-bolt-elements-background border border-bolt-elements-borderColor rounded"
+                                  />
+                                  <Button
+                                    size="icon"
+                                    variant="outline"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+
+                                      if (connection.credentials?.supabaseUrl) {
+                                        navigator.clipboard.writeText(connection.credentials.supabaseUrl);
+                                        toast.success('URL copied to clipboard');
+                                      }
+                                    }}
+                                    className="w-8 h-8"
+                                  >
+                                    <div className="i-ph:copy w-3 h-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                              <div>
+                                <label className="text-xs text-bolt-elements-textSecondary">Anon Key:</label>
+                                <div className="flex items-center gap-2 mt-1">
+                                  <input
+                                    type="password"
+                                    value={connection.credentials.anonKey || ''}
+                                    readOnly
+                                    className="flex-1 px-2 py-1 text-xs bg-bolt-elements-background border border-bolt-elements-borderColor rounded"
+                                  />
+                                  <Button
+                                    size="icon"
+                                    variant="outline"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+
+                                      if (connection.credentials?.anonKey) {
+                                        navigator.clipboard.writeText(connection.credentials.anonKey);
+                                        toast.success('Key copied to clipboard');
+                                      }
+                                    }}
+                                    className="w-8 h-8"
+                                  >
+                                    <div className="i-ph:copy w-3 h-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2 p-4">
+                <div className="i-ph:info w-4 h-4" />
+                No projects found in your Supabase account
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <motion.div
+        className="flex items-center justify-between gap-2"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex items-center gap-2">
+          <div className="text-[#3ECF8E]">
+            <SupabaseLogo />
+          </div>
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+            Supabase Integration
+          </h2>
+        </div>
+        <div className="flex items-center gap-2">
+          {connection.user && (
+            <Button
+              onClick={testConnection}
+              disabled={connectionTest?.status === 'testing'}
+              variant="outline"
+              size="sm"
+              className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+            >
+              {connectionTest?.status === 'testing' ? (
+                <>
+                  <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                  Testing...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Test Connection
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </motion.div>
+
+      <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+        Connect and manage your Supabase projects with database access, authentication, and storage controls
+      </p>
+
+      {/* Connection Test Results */}
+      {connectionTest && (
+        <motion.div
+          className={classNames('p-4 rounded-lg border', {
+            'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700':
+              connectionTest.status === 'success',
+            'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700': connectionTest.status === 'error',
+            'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700': connectionTest.status === 'testing',
+          })}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <div className="flex items-center gap-2">
+            {connectionTest.status === 'success' && (
+              <div className="i-ph:check-circle w-5 h-5 text-green-600 dark:text-green-400" />
+            )}
+            {connectionTest.status === 'error' && (
+              <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400" />
+            )}
+            {connectionTest.status === 'testing' && (
+              <div className="i-ph:spinner-gap w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />
+            )}
+            <span
+              className={classNames('text-sm font-medium', {
+                'text-green-800 dark:text-green-200': connectionTest.status === 'success',
+                'text-red-800 dark:text-red-200': connectionTest.status === 'error',
+                'text-blue-800 dark:text-blue-200': connectionTest.status === 'testing',
+              })}
+            >
+              {connectionTest.message}
+            </span>
+          </div>
+          {connectionTest.timestamp && (
+            <p className="text-xs text-gray-500 mt-1">{new Date(connectionTest.timestamp).toLocaleString()}</p>
+          )}
+        </motion.div>
+      )}
+
+      {/* Main Connection Component */}
+      <motion.div
+        className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="p-6 space-y-6">
+          {!connection.user ? (
+            <div className="space-y-4">
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You can also set the{' '}
+                  <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                    VITE_SUPABASE_ACCESS_TOKEN
+                  </code>{' '}
+                  environment variable to connect automatically.
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">Access Token</label>
+                <input
+                  type="password"
+                  value={tokenInput}
+                  onChange={(e) => setTokenInput(e.target.value)}
+                  disabled={connecting}
+                  placeholder="Enter your Supabase access token"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#333333]',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                    'disabled:opacity-50',
+                  )}
+                />
+                <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                  <a
+                    href="https://supabase.com/dashboard/account/tokens"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                  >
+                    Get your token
+                    <div className="i-ph:arrow-square-out w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+
+              <button
+                onClick={handleConnect}
+                disabled={connecting || !tokenInput}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {connecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={handleDisconnect}
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                      'bg-red-500 text-white',
+                      'hover:bg-red-600',
+                    )}
+                  >
+                    <div className="i-ph:plug w-4 h-4" />
+                    Disconnect
+                  </button>
+                  <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                    Connected to Supabase
+                  </span>
+                </div>
+              </div>
+
+              {connection.user && (
+                <div className="space-y-4">
+                  <div className="flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
+                      <div className="i-ph:user w-6 h-6 text-white" />
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.email}</h4>
+                      <p className="text-sm text-bolt-elements-textSecondary">
+                        {connection.user.role} • Member since{' '}
+                        {new Date(connection.user.created_at).toLocaleDateString()}
+                      </p>
+                      <div className="flex items-center gap-4 mt-2 text-xs text-bolt-elements-textSecondary">
+                        <span className="flex items-center gap-1">
+                          <div className="i-ph:buildings w-3 h-3" />
+                          {connection.stats?.totalProjects || 0} Projects
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <div className="i-ph:globe w-3 h-3" />
+                          {new Set(connection.stats?.projects?.map((p: SupabaseProject) => p.region) || []).size}{' '}
+                          Regions
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <div className="i-ph:activity w-3 h-3" />
+                          {connection.stats?.projects?.filter((p: SupabaseProject) => p.status === 'ACTIVE_HEALTHY')
+                            .length || 0}{' '}
+                          Active
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Advanced Analytics */}
+                  <div className="mb-6 space-y-4">
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary">Performance Analytics</h4>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                        <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                          <div className="i-ph:chart-line w-4 h-4 text-bolt-elements-item-contentAccent" />
+                          Database Health
+                        </h6>
+                        <div className="space-y-1">
+                          {(() => {
+                            const totalProjects = connection.stats?.totalProjects || 0;
+                            const activeProjects =
+                              connection.stats?.projects?.filter((p: SupabaseProject) => p.status === 'ACTIVE_HEALTHY')
+                                .length || 0;
+                            const healthRate =
+                              totalProjects > 0 ? Math.round((activeProjects / totalProjects) * 100) : 0;
+                            const avgTablesPerProject =
+                              totalProjects > 0
+                                ? Math.round(
+                                    (connection.stats?.projects?.reduce(
+                                      (sum, p) => sum + (p.stats?.database?.tables || 0),
+                                      0,
+                                    ) || 0) / totalProjects,
+                                  )
+                                : 0;
+
+                            return [
+                              { label: 'Health Rate', value: `${healthRate}%` },
+                              { label: 'Active Projects', value: activeProjects },
+                              { label: 'Avg Tables/Project', value: avgTablesPerProject },
+                            ];
+                          })().map((item, idx) => (
+                            <div key={idx} className="flex justify-between text-xs">
+                              <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                              <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                        <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                          <div className="i-ph:shield-check w-4 h-4 text-bolt-elements-item-contentAccent" />
+                          Auth & Security
+                        </h6>
+                        <div className="space-y-1">
+                          {(() => {
+                            const totalProjects = connection.stats?.totalProjects || 0;
+                            const projectsWithAuth =
+                              connection.stats?.projects?.filter((p) => p.stats?.auth?.users !== undefined).length || 0;
+                            const authEnabledRate =
+                              totalProjects > 0 ? Math.round((projectsWithAuth / totalProjects) * 100) : 0;
+                            const totalUsers =
+                              connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.auth?.users || 0), 0) || 0;
+
+                            return [
+                              { label: 'Auth Enabled', value: `${authEnabledRate}%` },
+                              { label: 'Total Users', value: totalUsers },
+                              {
+                                label: 'Avg Users/Project',
+                                value: totalProjects > 0 ? Math.round(totalUsers / totalProjects) : 0,
+                              },
+                            ];
+                          })().map((item, idx) => (
+                            <div key={idx} className="flex justify-between text-xs">
+                              <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                              <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                        <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                          <div className="i-ph:globe w-4 h-4 text-bolt-elements-item-contentAccent" />
+                          Regional Distribution
+                        </h6>
+                        <div className="space-y-1">
+                          {(() => {
+                            const regions =
+                              connection.stats?.projects?.reduce(
+                                (acc, p: SupabaseProject) => {
+                                  acc[p.region] = (acc[p.region] || 0) + 1;
+                                  return acc;
+                                },
+                                {} as Record<string, number>,
+                              ) || {};
+
+                            return Object.entries(regions)
+                              .sort(([, a], [, b]) => b - a)
+                              .slice(0, 3)
+                              .map(([region, count]) => ({ label: region.toUpperCase(), value: count }));
+                          })().map((item, idx) => (
+                            <div key={idx} className="flex justify-between text-xs">
+                              <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                              <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Resource Utilization */}
+                  <div className="mb-6">
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Resource Overview</h4>
+                    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+                      {(() => {
+                        const totalDatabase =
+                          connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.database?.size_mb || 0), 0) ||
+                          0;
+                        const totalStorage =
+                          connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.storage?.used_gb || 0), 0) ||
+                          0;
+                        const totalFunctions =
+                          connection.stats?.projects?.reduce(
+                            (sum, p) => sum + (p.stats?.functions?.deployed || 0),
+                            0,
+                          ) || 0;
+                        const totalTables =
+                          connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.database?.tables || 0), 0) ||
+                          0;
+                        const totalBuckets =
+                          connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.storage?.buckets || 0), 0) ||
+                          0;
+
+                        return [
+                          {
+                            label: 'Database',
+                            value: totalDatabase > 0 ? `${totalDatabase} MB` : '--',
+                            icon: 'i-ph:database',
+                            color: 'text-blue-500',
+                            bgColor: 'bg-blue-100 dark:bg-blue-900/20',
+                            textColor: 'text-blue-800 dark:text-blue-400',
+                          },
+                          {
+                            label: 'Storage',
+                            value: totalStorage > 0 ? `${totalStorage} GB` : '--',
+                            icon: 'i-ph:folder',
+                            color: 'text-green-500',
+                            bgColor: 'bg-green-100 dark:bg-green-900/20',
+                            textColor: 'text-green-800 dark:text-green-400',
+                          },
+                          {
+                            label: 'Functions',
+                            value: totalFunctions,
+                            icon: 'i-ph:code',
+                            color: 'text-purple-500',
+                            bgColor: 'bg-purple-100 dark:bg-purple-900/20',
+                            textColor: 'text-purple-800 dark:text-purple-400',
+                          },
+                          {
+                            label: 'Tables',
+                            value: totalTables,
+                            icon: 'i-ph:table',
+                            color: 'text-orange-500',
+                            bgColor: 'bg-orange-100 dark:bg-orange-900/20',
+                            textColor: 'text-orange-800 dark:text-orange-400',
+                          },
+                          {
+                            label: 'Buckets',
+                            value: totalBuckets,
+                            icon: 'i-ph:archive',
+                            color: 'text-teal-500',
+                            bgColor: 'bg-teal-100 dark:bg-teal-900/20',
+                            textColor: 'text-teal-800 dark:text-teal-400',
+                          },
+                        ];
+                      })().map((metric, index) => (
+                        <div
+                          key={index}
+                          className={`flex flex-col p-3 rounded-lg border border-bolt-elements-borderColor ${metric.bgColor}`}
+                        >
+                          <div className="flex items-center gap-2 mb-1">
+                            <div className={`${metric.icon} w-4 h-4 ${metric.color}`} />
+                            <span className="text-xs text-bolt-elements-textSecondary">{metric.label}</span>
+                          </div>
+                          <span className={`text-lg font-medium ${metric.textColor}`}>{metric.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Usage Metrics */}
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="p-3 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="i-ph:database w-4 h-4 text-bolt-elements-item-contentAccent" />
+                        <span className="text-xs font-medium text-bolt-elements-textPrimary">Database</span>
+                      </div>
+                      <div className="text-sm text-bolt-elements-textSecondary">
+                        <div>
+                          Tables:{' '}
+                          {connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.database?.tables || 0), 0) ||
+                            '--'}
+                        </div>
+                        <div>
+                          Size:{' '}
+                          {(() => {
+                            const totalSize =
+                              connection.stats?.projects?.reduce(
+                                (sum, p) => sum + (p.stats?.database?.size_mb || 0),
+                                0,
+                              ) || 0;
+                            return totalSize > 0 ? `${totalSize} MB` : '--';
+                          })()}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="p-3 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="i-ph:folder w-4 h-4 text-bolt-elements-item-contentAccent" />
+                        <span className="text-xs font-medium text-bolt-elements-textPrimary">Storage</span>
+                      </div>
+                      <div className="text-sm text-bolt-elements-textSecondary">
+                        <div>
+                          Buckets:{' '}
+                          {connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.storage?.buckets || 0), 0) ||
+                            '--'}
+                        </div>
+                        <div>
+                          Used:{' '}
+                          {(() => {
+                            const totalUsed =
+                              connection.stats?.projects?.reduce(
+                                (sum, p) => sum + (p.stats?.storage?.used_gb || 0),
+                                0,
+                              ) || 0;
+                            return totalUsed > 0 ? `${totalUsed} GB` : '--';
+                          })()}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="p-3 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="i-ph:code w-4 h-4 text-bolt-elements-item-contentAccent" />
+                        <span className="text-xs font-medium text-bolt-elements-textPrimary">Functions</span>
+                      </div>
+                      <div className="text-sm text-bolt-elements-textSecondary">
+                        <div>
+                          Deployed:{' '}
+                          {connection.stats?.projects?.reduce(
+                            (sum, p) => sum + (p.stats?.functions?.deployed || 0),
+                            0,
+                          ) || '--'}
+                        </div>
+                        <div>
+                          Invocations:{' '}
+                          {connection.stats?.projects?.reduce(
+                            (sum, p) => sum + (p.stats?.functions?.invocations || 0),
+                            0,
+                          ) || '--'}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {renderProjects()}
+            </div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/vercel/VercelTab.tsx b/app/components/@settings/tabs/vercel/VercelTab.tsx
new file mode 100644
index 0000000..0aba33c
--- /dev/null
+++ b/app/components/@settings/tabs/vercel/VercelTab.tsx
@@ -0,0 +1,909 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { logStore } from '~/lib/stores/logs';
+import type { VercelUserResponse } from '~/types/vercel';
+import { classNames } from '~/utils/classNames';
+import { Button } from '~/components/ui/Button';
+import { ServiceHeader, ConnectionTestIndicator } from '~/components/@settings/shared/service-integration';
+import { useConnectionTest } from '~/lib/hooks';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import Cookies from 'js-cookie';
+import {
+  vercelConnection,
+  isConnecting,
+  isFetchingStats,
+  updateVercelConnection,
+  fetchVercelStats,
+  fetchVercelStatsViaAPI,
+  initializeVercelConnection,
+} from '~/lib/stores/vercel';
+
+interface ProjectAction {
+  name: string;
+  icon: string;
+  action: (projectId: string) => Promise<void>;
+  requiresConfirmation?: boolean;
+  variant?: 'default' | 'destructive' | 'outline';
+}
+
+// Vercel logo SVG component
+const VercelLogo = () => (
+  <svg viewBox="0 0 24 24" className="w-5 h-5">
+    <path fill="currentColor" d="m12 2 10 18H2z" />
+  </svg>
+);
+
+export default function VercelTab() {
+  const connection = useStore(vercelConnection);
+  const connecting = useStore(isConnecting);
+  const fetchingStats = useStore(isFetchingStats);
+  const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
+  const [isProjectActionLoading, setIsProjectActionLoading] = useState(false);
+
+  // Use shared connection test hook
+  const {
+    testResult: connectionTest,
+    testConnection,
+    isTestingConnection,
+  } = useConnectionTest({
+    testEndpoint: '/api/vercel-user',
+    serviceName: 'Vercel',
+    getUserIdentifier: (data: VercelUserResponse) =>
+      data.username || data.user?.username || data.email || data.user?.email || 'Vercel User',
+  });
+
+  // Memoize project actions to prevent unnecessary re-renders
+  const projectActions: ProjectAction[] = useMemo(
+    () => [
+      {
+        name: 'Redeploy',
+        icon: 'i-ph:arrows-clockwise',
+        action: async (projectId: string) => {
+          try {
+            const response = await fetch(`https://api.vercel.com/v1/deployments`, {
+              method: 'POST',
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                name: projectId,
+                target: 'production',
+              }),
+            });
+
+            if (!response.ok) {
+              throw new Error('Failed to redeploy project');
+            }
+
+            toast.success('Project redeployment initiated');
+            await fetchVercelStats(connection.token);
+          } catch (err: unknown) {
+            const error = err instanceof Error ? err.message : 'Unknown error';
+            toast.error(`Failed to redeploy project: ${error}`);
+          }
+        },
+      },
+      {
+        name: 'View Dashboard',
+        icon: 'i-ph:layout',
+        action: async (projectId: string) => {
+          window.open(`https://vercel.com/dashboard/${projectId}`, '_blank');
+        },
+      },
+      {
+        name: 'View Deployments',
+        icon: 'i-ph:rocket',
+        action: async (projectId: string) => {
+          window.open(`https://vercel.com/dashboard/${projectId}/deployments`, '_blank');
+        },
+      },
+      {
+        name: 'View Functions',
+        icon: 'i-ph:code',
+        action: async (projectId: string) => {
+          window.open(`https://vercel.com/dashboard/${projectId}/functions`, '_blank');
+        },
+      },
+      {
+        name: 'View Analytics',
+        icon: 'i-ph:chart-bar',
+        action: async (projectId: string) => {
+          const project = connection.stats?.projects.find((p) => p.id === projectId);
+
+          if (project) {
+            window.open(`https://vercel.com/${connection.user?.username}/${project.name}/analytics`, '_blank');
+          }
+        },
+      },
+      {
+        name: 'View Domains',
+        icon: 'i-ph:globe',
+        action: async (projectId: string) => {
+          window.open(`https://vercel.com/dashboard/${projectId}/domains`, '_blank');
+        },
+      },
+      {
+        name: 'View Settings',
+        icon: 'i-ph:gear',
+        action: async (projectId: string) => {
+          window.open(`https://vercel.com/dashboard/${projectId}/settings`, '_blank');
+        },
+      },
+      {
+        name: 'View Logs',
+        icon: 'i-ph:scroll',
+        action: async (projectId: string) => {
+          window.open(`https://vercel.com/dashboard/${projectId}/logs`, '_blank');
+        },
+      },
+      {
+        name: 'Delete Project',
+        icon: 'i-ph:trash',
+        action: async (projectId: string) => {
+          try {
+            const response = await fetch(`https://api.vercel.com/v1/projects/${projectId}`, {
+              method: 'DELETE',
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+              },
+            });
+
+            if (!response.ok) {
+              throw new Error('Failed to delete project');
+            }
+
+            toast.success('Project deleted successfully');
+            await fetchVercelStats(connection.token);
+          } catch (err: unknown) {
+            const error = err instanceof Error ? err.message : 'Unknown error';
+            toast.error(`Failed to delete project: ${error}`);
+          }
+        },
+        requiresConfirmation: true,
+        variant: 'destructive',
+      },
+    ],
+    [connection.token],
+  ); // Only re-create when token changes
+
+  // Initialize connection on component mount - check server-side token first
+  useEffect(() => {
+    const initializeConnection = async () => {
+      try {
+        // First try to initialize using server-side token
+        await initializeVercelConnection();
+
+        // If no connection was established, the user will need to manually enter a token
+        const currentState = vercelConnection.get();
+
+        if (!currentState.user) {
+          console.log('No server-side Vercel token available, manual connection required');
+        }
+      } catch (error) {
+        console.error('Failed to initialize Vercel connection:', error);
+      }
+    };
+    initializeConnection();
+  }, []);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      if (connection.user) {
+        // Use server-side API if we have a connected user
+        try {
+          await fetchVercelStatsViaAPI(connection.token);
+        } catch {
+          // Fallback to direct API if server-side fails and we have a token
+          if (connection.token) {
+            await fetchVercelStats(connection.token);
+          }
+        }
+      }
+    };
+    fetchProjects();
+  }, [connection.user, connection.token]);
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    isConnecting.set(true);
+
+    try {
+      const token = connection.token;
+
+      if (!token.trim()) {
+        throw new Error('Token is required');
+      }
+
+      // First test the token directly with Vercel API
+      const testResponse = await fetch('https://api.vercel.com/v2/user', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!testResponse.ok) {
+        if (testResponse.status === 401) {
+          throw new Error('Invalid Vercel token');
+        }
+
+        throw new Error(`Vercel API error: ${testResponse.status}`);
+      }
+
+      const userData = (await testResponse.json()) as VercelUserResponse;
+
+      // Set cookies for server-side API access
+      Cookies.set('VITE_VERCEL_ACCESS_TOKEN', token, { expires: 365 });
+
+      // Normalize the user data structure
+      const normalizedUser = userData.user || {
+        id: userData.id || '',
+        username: userData.username || '',
+        email: userData.email || '',
+        name: userData.name || '',
+        avatar: userData.avatar,
+      };
+
+      updateVercelConnection({
+        user: normalizedUser,
+        token,
+      });
+
+      await fetchVercelStats(token);
+      toast.success('Successfully connected to Vercel');
+    } catch (error) {
+      console.error('Auth error:', error);
+      logStore.logError('Failed to authenticate with Vercel', { error });
+
+      const errorMessage = error instanceof Error ? error.message : 'Failed to connect to Vercel';
+      toast.error(errorMessage);
+      updateVercelConnection({ user: null, token: '' });
+    } finally {
+      isConnecting.set(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    // Clear Vercel-related cookies
+    Cookies.remove('VITE_VERCEL_ACCESS_TOKEN');
+
+    updateVercelConnection({ user: null, token: '' });
+    toast.success('Disconnected from Vercel');
+  };
+
+  const handleProjectAction = useCallback(async (projectId: string, action: ProjectAction) => {
+    if (action.requiresConfirmation) {
+      if (!confirm(`Are you sure you want to ${action.name.toLowerCase()}?`)) {
+        return;
+      }
+    }
+
+    setIsProjectActionLoading(true);
+    await action.action(projectId);
+    setIsProjectActionLoading(false);
+  }, []);
+
+  const renderProjects = useCallback(() => {
+    if (fetchingStats) {
+      return (
+        <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+          <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          Fetching Vercel projects...
+        </div>
+      );
+    }
+
+    return (
+      <Collapsible open={isProjectsExpanded} onOpenChange={setIsProjectsExpanded}>
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 cursor-pointer">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                Your Projects ({connection.stats?.totalProjects || 0})
+              </span>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                isProjectsExpanded ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="overflow-hidden">
+          <div className="space-y-4 mt-4">
+            {/* Vercel Overview Dashboard */}
+            {connection.stats?.projects?.length ? (
+              <div className="mb-6 p-4 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Vercel Overview</h4>
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.totalProjects}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Total Projects</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {
+                        connection.stats.projects.filter(
+                          (p) => p.targets?.production?.alias && p.targets.production.alias.length > 0,
+                        ).length
+                      }
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Deployed Projects</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {new Set(connection.stats.projects.map((p) => p.framework).filter(Boolean)).size}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Frameworks Used</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                      {connection.stats.projects.filter((p) => p.latestDeployments?.[0]?.state === 'READY').length}
+                    </div>
+                    <div className="text-xs text-bolt-elements-textSecondary">Active Deployments</div>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {/* Performance Analytics */}
+            {connection.stats?.projects?.length ? (
+              <div className="mb-6 space-y-4">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">Performance Analytics</h4>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                    <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                      <div className="i-ph:rocket w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      Deployment Health
+                    </h6>
+                    <div className="space-y-1">
+                      {(() => {
+                        const totalDeployments = connection.stats.projects.reduce(
+                          (sum, p) => sum + (p.latestDeployments?.length || 0),
+                          0,
+                        );
+                        const readyDeployments = connection.stats.projects.filter(
+                          (p) => p.latestDeployments?.[0]?.state === 'READY',
+                        ).length;
+                        const errorDeployments = connection.stats.projects.filter(
+                          (p) => p.latestDeployments?.[0]?.state === 'ERROR',
+                        ).length;
+                        const successRate =
+                          totalDeployments > 0
+                            ? Math.round((readyDeployments / connection.stats.projects.length) * 100)
+                            : 0;
+
+                        return [
+                          { label: 'Success Rate', value: `${successRate}%` },
+                          { label: 'Active', value: readyDeployments },
+                          { label: 'Failed', value: errorDeployments },
+                        ];
+                      })().map((item, idx) => (
+                        <div key={idx} className="flex justify-between text-xs">
+                          <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                          <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                    <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                      <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      Framework Distribution
+                    </h6>
+                    <div className="space-y-1">
+                      {(() => {
+                        const frameworks = connection.stats.projects.reduce(
+                          (acc, p) => {
+                            if (p.framework) {
+                              acc[p.framework] = (acc[p.framework] || 0) + 1;
+                            }
+
+                            return acc;
+                          },
+                          {} as Record<string, number>,
+                        );
+
+                        return Object.entries(frameworks)
+                          .sort(([, a], [, b]) => b - a)
+                          .slice(0, 3)
+                          .map(([framework, count]) => ({ label: framework, value: count }));
+                      })().map((item, idx) => (
+                        <div key={idx} className="flex justify-between text-xs">
+                          <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                          <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor">
+                    <h6 className="text-xs font-medium text-bolt-elements-textPrimary flex items-center gap-2 mb-2">
+                      <div className="i-ph:activity w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      Activity Summary
+                    </h6>
+                    <div className="space-y-1">
+                      {(() => {
+                        const now = Date.now();
+                        const recentDeployments = connection.stats.projects.filter((p) => {
+                          const lastDeploy = p.latestDeployments?.[0]?.created;
+                          return lastDeploy && now - new Date(lastDeploy).getTime() < 7 * 24 * 60 * 60 * 1000;
+                        }).length;
+                        const totalDomains = connection.stats.projects.reduce(
+                          (sum, p) => sum + (p.targets?.production?.alias ? p.targets.production.alias.length : 0),
+                          0,
+                        );
+                        const avgDomainsPerProject =
+                          connection.stats.projects.length > 0
+                            ? Math.round((totalDomains / connection.stats.projects.length) * 10) / 10
+                            : 0;
+
+                        return [
+                          { label: 'Recent deploys', value: recentDeployments },
+                          { label: 'Total domains', value: totalDomains },
+                          { label: 'Avg domains/project', value: avgDomainsPerProject },
+                        ];
+                      })().map((item, idx) => (
+                        <div key={idx} className="flex justify-between text-xs">
+                          <span className="text-bolt-elements-textSecondary">{item.label}:</span>
+                          <span className="text-bolt-elements-textPrimary font-medium">{item.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {/* Project Health Overview */}
+            {connection.stats?.projects?.length ? (
+              <div className="mb-6">
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Project Health Overview</h4>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  {(() => {
+                    const healthyProjects = connection.stats.projects.filter(
+                      (p) =>
+                        p.latestDeployments?.[0]?.state === 'READY' && (p.targets?.production?.alias?.length ?? 0) > 0,
+                    ).length;
+                    const needsAttention = connection.stats.projects.filter(
+                      (p) =>
+                        p.latestDeployments?.[0]?.state === 'ERROR' || p.latestDeployments?.[0]?.state === 'CANCELED',
+                    ).length;
+                    const withCustomDomain = connection.stats.projects.filter((p) =>
+                      p.targets?.production?.alias?.some((alias: string) => !alias.includes('.vercel.app')),
+                    ).length;
+                    const buildingProjects = connection.stats.projects.filter(
+                      (p) => p.latestDeployments?.[0]?.state === 'BUILDING',
+                    ).length;
+
+                    return [
+                      {
+                        label: 'Healthy',
+                        value: healthyProjects,
+                        icon: 'i-ph:check-circle',
+                        color: 'text-green-500',
+                        bgColor: 'bg-green-100 dark:bg-green-900/20',
+                        textColor: 'text-green-800 dark:text-green-400',
+                      },
+                      {
+                        label: 'Custom Domain',
+                        value: withCustomDomain,
+                        icon: 'i-ph:globe',
+                        color: 'text-blue-500',
+                        bgColor: 'bg-blue-100 dark:bg-blue-900/20',
+                        textColor: 'text-blue-800 dark:text-blue-400',
+                      },
+                      {
+                        label: 'Building',
+                        value: buildingProjects,
+                        icon: 'i-ph:gear',
+                        color: 'text-yellow-500',
+                        bgColor: 'bg-yellow-100 dark:bg-yellow-900/20',
+                        textColor: 'text-yellow-800 dark:text-yellow-400',
+                      },
+                      {
+                        label: 'Issues',
+                        value: needsAttention,
+                        icon: 'i-ph:warning',
+                        color: 'text-red-500',
+                        bgColor: 'bg-red-100 dark:bg-red-900/20',
+                        textColor: 'text-red-800 dark:text-red-400',
+                      },
+                    ];
+                  })().map((metric, index) => (
+                    <div
+                      key={index}
+                      className={`flex flex-col p-3 rounded-lg border border-bolt-elements-borderColor ${metric.bgColor}`}
+                    >
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className={`${metric.icon} w-4 h-4 ${metric.color}`} />
+                        <span className="text-xs text-bolt-elements-textSecondary">{metric.label}</span>
+                      </div>
+                      <span className={`text-lg font-medium ${metric.textColor}`}>{metric.value}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            {connection.stats?.projects?.length ? (
+              <div className="grid gap-3">
+                {connection.stats.projects.map((project) => (
+                  <div
+                    key={project.id}
+                    className="p-4 rounded-lg border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 transition-colors bg-bolt-elements-background-depth-1"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex-1">
+                        <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                          <div className="i-ph:globe w-4 h-4 text-bolt-elements-borderColorActive" />
+                          {project.name}
+                        </h5>
+                        <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                          {project.targets?.production?.alias && project.targets.production.alias.length > 0 ? (
+                            <>
+                              <a
+                                href={`https://${project.targets.production.alias.find((a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app')) || project.targets.production.alias[0]}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="hover:text-bolt-elements-borderColorActive underline"
+                              >
+                                {project.targets.production.alias.find(
+                                  (a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
+                                ) || project.targets.production.alias[0]}
+                              </a>
+                              <span>•</span>
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:clock w-3 h-3" />
+                                {new Date(project.createdAt).toLocaleDateString()}
+                              </span>
+                            </>
+                          ) : project.latestDeployments && project.latestDeployments.length > 0 ? (
+                            <>
+                              <a
+                                href={`https://${project.latestDeployments[0].url}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="hover:text-bolt-elements-borderColorActive underline"
+                              >
+                                {project.latestDeployments[0].url}
+                              </a>
+                              <span>•</span>
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:clock w-3 h-3" />
+                                {new Date(project.latestDeployments[0].created).toLocaleDateString()}
+                              </span>
+                            </>
+                          ) : null}
+                        </div>
+
+                        {/* Project Details Grid */}
+                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mt-3 pt-3 border-t border-bolt-elements-borderColor">
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {/* Deployments - This would be fetched from API */}
+                              --
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:rocket w-3 h-3" />
+                              Deployments
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {/* Domains - This would be fetched from API */}
+                              --
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:globe w-3 h-3" />
+                              Domains
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {/* Team Members - This would be fetched from API */}
+                              --
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:users w-3 h-3" />
+                              Team
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-sm font-semibold text-bolt-elements-textPrimary">
+                              {/* Bandwidth - This would be fetched from API */}
+                              --
+                            </div>
+                            <div className="text-xs text-bolt-elements-textSecondary flex items-center justify-center gap-1">
+                              <div className="i-ph:activity w-3 h-3" />
+                              Bandwidth
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {project.latestDeployments && project.latestDeployments.length > 0 && (
+                          <div
+                            className={classNames(
+                              'flex items-center gap-1 px-2 py-1 rounded-full text-xs',
+                              project.latestDeployments[0].state === 'READY'
+                                ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                                : project.latestDeployments[0].state === 'ERROR'
+                                  ? 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
+                                  : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
+                            )}
+                          >
+                            <div
+                              className={classNames(
+                                'w-2 h-2 rounded-full',
+                                project.latestDeployments[0].state === 'READY'
+                                  ? 'bg-green-500'
+                                  : project.latestDeployments[0].state === 'ERROR'
+                                    ? 'bg-red-500'
+                                    : 'bg-yellow-500',
+                              )}
+                            />
+                            {project.latestDeployments[0].state}
+                          </div>
+                        )}
+                        {project.framework && (
+                          <div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-bolt-elements-background-depth-2">
+                            <span className="flex items-center gap-1">
+                              <div className="i-ph:code w-3 h-3" />
+                              {project.framework}
+                            </span>
+                          </div>
+                        )}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => window.open(`https://vercel.com/dashboard/${project.id}`, '_blank')}
+                          className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                        >
+                          <div className="i-ph:arrow-square-out w-3 h-3" />
+                          View
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center flex-wrap gap-1 mt-3 pt-3 border-t border-bolt-elements-borderColor">
+                      {projectActions.map((action) => (
+                        <Button
+                          key={action.name}
+                          variant={action.variant || 'outline'}
+                          size="sm"
+                          onClick={() => handleProjectAction(project.id, action)}
+                          disabled={isProjectActionLoading}
+                          className="flex items-center gap-1 text-xs px-2 py-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                        >
+                          <div className={`${action.icon} w-2.5 h-2.5`} />
+                          {action.name}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2 p-4">
+                <div className="i-ph:info w-4 h-4" />
+                No projects found in your Vercel account
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }, [
+    connection.stats,
+    fetchingStats,
+    isProjectsExpanded,
+    isProjectActionLoading,
+    handleProjectAction,
+    projectActions,
+  ]);
+
+  console.log('connection', connection);
+
+  return (
+    <div className="space-y-6">
+      <ServiceHeader
+        icon={VercelLogo}
+        title="Vercel Integration"
+        description="Connect and manage your Vercel projects with advanced deployment controls and analytics"
+        onTestConnection={connection.user ? () => testConnection() : undefined}
+        isTestingConnection={isTestingConnection}
+      />
+
+      <ConnectionTestIndicator testResult={connectionTest} />
+
+      {/* Main Connection Component */}
+      <motion.div
+        className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="p-6 space-y-6">
+          {!connection.user ? (
+            <div className="space-y-4">
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You can also set the{' '}
+                  <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                    VITE_VERCEL_ACCESS_TOKEN
+                  </code>{' '}
+                  environment variable to connect automatically.
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
+                <input
+                  type="password"
+                  value={connection.token}
+                  onChange={(e) => updateVercelConnection({ ...connection, token: e.target.value })}
+                  disabled={connecting}
+                  placeholder="Enter your Vercel personal access token"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#333333]',
+                    'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                    'disabled:opacity-50',
+                  )}
+                />
+                <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                  <a
+                    href="https://vercel.com/account/tokens"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                  >
+                    Get your token
+                    <div className="i-ph:arrow-square-out w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+
+              <button
+                onClick={handleConnect}
+                disabled={connecting || !connection.token}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {connecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={handleDisconnect}
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                      'bg-red-500 text-white',
+                      'hover:bg-red-600',
+                    )}
+                  >
+                    <div className="i-ph:plug w-4 h-4" />
+                    Disconnect
+                  </button>
+                  <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                    Connected to Vercel
+                  </span>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg">
+                  <img
+                    src={`https://vercel.com/api/www/avatar?u=${connection.user?.username}`}
+                    referrerPolicy="no-referrer"
+                    crossOrigin="anonymous"
+                    alt="User Avatar"
+                    className="w-12 h-12 rounded-full border-2 border-bolt-elements-borderColorActive"
+                  />
+                  <div className="flex-1">
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
+                      {connection.user?.username || 'Vercel User'}
+                    </h4>
+                    <p className="text-sm text-bolt-elements-textSecondary">
+                      {connection.user?.email || 'No email available'}
+                    </p>
+                    <div className="flex items-center gap-4 mt-2 text-xs text-bolt-elements-textSecondary">
+                      <span className="flex items-center gap-1">
+                        <div className="i-ph:buildings w-3 h-3" />
+                        {connection.stats?.totalProjects || 0} Projects
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <div className="i-ph:check-circle w-3 h-3" />
+                        {connection.stats?.projects.filter((p) => p.latestDeployments?.[0]?.state === 'READY').length ||
+                          0}{' '}
+                        Live
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <div className="i-ph:users w-3 h-3" />
+                        {/* Team size would be fetched from API */}
+                        --
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Usage Metrics */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="p-3 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="i-ph:buildings w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      <span className="text-xs font-medium text-bolt-elements-textPrimary">Projects</span>
+                    </div>
+                    <div className="text-sm text-bolt-elements-textSecondary">
+                      <div>
+                        Active:{' '}
+                        {connection.stats?.projects.filter((p) => p.latestDeployments?.[0]?.state === 'READY').length ||
+                          0}
+                      </div>
+                      <div>Total: {connection.stats?.totalProjects || 0}</div>
+                    </div>
+                  </div>
+                  <div className="p-3 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="i-ph:globe w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      <span className="text-xs font-medium text-bolt-elements-textPrimary">Domains</span>
+                    </div>
+                    <div className="text-sm text-bolt-elements-textSecondary">
+                      {/* Domain usage would be fetched from API */}
+                      <div>Custom: --</div>
+                      <div>Vercel: --</div>
+                    </div>
+                  </div>
+                  <div className="p-3 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="i-ph:activity w-4 h-4 text-bolt-elements-item-contentAccent" />
+                      <span className="text-xs font-medium text-bolt-elements-textPrimary">Usage</span>
+                    </div>
+                    <div className="text-sm text-bolt-elements-textSecondary">
+                      {/* Usage metrics would be fetched from API */}
+                      <div>Bandwidth: --</div>
+                      <div>Requests: --</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {renderProjects()}
+            </div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/connections/vercel/VercelConnection.tsx b/app/components/@settings/tabs/vercel/components/VercelConnection.tsx
similarity index 100%
rename from app/components/@settings/tabs/connections/vercel/VercelConnection.tsx
rename to app/components/@settings/tabs/vercel/components/VercelConnection.tsx
diff --git a/app/components/@settings/tabs/connections/vercel/index.ts b/app/components/@settings/tabs/vercel/components/index.ts
similarity index 100%
rename from app/components/@settings/tabs/connections/vercel/index.ts
rename to app/components/@settings/tabs/vercel/components/index.ts
diff --git a/app/components/chat/GitCloneButton.tsx b/app/components/chat/GitCloneButton.tsx
index 098480d..cd1fd75 100644
--- a/app/components/chat/GitCloneButton.tsx
+++ b/app/components/chat/GitCloneButton.tsx
@@ -7,15 +7,14 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
 
-// import { RepositorySelectionDialog } from '~/components/@settings/tabs/connections/components/RepositorySelectionDialog';
 import { classNames } from '~/utils/classNames';
 import { Button } from '~/components/ui/Button';
 import type { IChatMetadata } from '~/lib/persistence/db';
 import { X, Github, GitBranch } from 'lucide-react';
 
-// Import GitLab and GitHub connections for unified repository access
-import GitLabConnection from '~/components/@settings/tabs/connections/gitlab/GitLabConnection';
-import GitHubConnection from '~/components/@settings/tabs/connections/github/GitHubConnection';
+// Import the new repository selector components
+import { GitHubRepositorySelector } from '~/components/@settings/tabs/github/components/GitHubRepositorySelector';
+import { GitLabRepositorySelector } from '~/components/@settings/tabs/gitlab/components/GitLabRepositorySelector';
 
 const IGNORE_PATTERNS = [
   'node_modules/**',
@@ -280,7 +279,7 @@ ${escapeBoltTags(file.content)}
             </div>
 
             <div className="p-6 max-h-[calc(90vh-140px)] overflow-y-auto">
-              <GitHubConnection onCloneRepository={handleClone} />
+              <GitHubRepositorySelector onClone={handleClone} />
             </div>
           </div>
         </div>
@@ -316,7 +315,7 @@ ${escapeBoltTags(file.content)}
             </div>
 
             <div className="p-6 max-h-[calc(90vh-140px)] overflow-y-auto">
-              <GitLabConnection onCloneRepository={handleClone} />
+              <GitLabRepositorySelector onClone={handleClone} />
             </div>
           </div>
         </div>
diff --git a/app/components/deploy/GitHubDeploymentDialog.tsx b/app/components/deploy/GitHubDeploymentDialog.tsx
index 84885da..75cc114 100644
--- a/app/components/deploy/GitHubDeploymentDialog.tsx
+++ b/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 { AuthDialog as GitHubAuthDialog } from '~/components/@settings/tabs/connections/github/AuthDialog';
+import { GitHubAuthDialog } from '~/components/@settings/tabs/github/components/GitHubAuthDialog';
 import { SearchInput, EmptyState, StatusIndicator, Badge } from '~/components/ui';
 
 interface GitHubDeploymentDialogProps {
@@ -34,13 +34,33 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
   const [showAuthDialog, setShowAuthDialog] = useState(false);
   const currentChatId = useStore(chatId);
 
-  // Load GitHub connection on mount
+  /*
+   * Load GitHub connection on mount
+   * Helper function to sanitize repository name
+   */
+  const sanitizeRepoName = (name: string): string => {
+    return (
+      name
+        .toLowerCase()
+        // Replace spaces and underscores with hyphens
+        .replace(/[\s_]+/g, '-')
+        // Remove special characters except hyphens and alphanumeric
+        .replace(/[^a-z0-9-]/g, '')
+        // Remove multiple consecutive hyphens
+        .replace(/-+/g, '-')
+        // Remove leading/trailing hyphens
+        .replace(/^-+|-+$/g, '')
+        // Ensure it's not empty and has reasonable length
+        .substring(0, 100) || 'my-project'
+    );
+  };
+
   useEffect(() => {
     if (isOpen) {
       const connection = getLocalStorage('github_connection');
 
-      // Set a default repository name based on the project name
-      setRepoName(projectName.replace(/\s+/g, '-').toLowerCase());
+      // Set a default repository name based on the project name with proper sanitization
+      setRepoName(sanitizeRepoName(projectName));
 
       if (connection?.user && connection?.token) {
         setUser(connection.user);
@@ -180,6 +200,25 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
       return;
     }
 
+    // Validate repository name
+    const sanitizedName = sanitizeRepoName(repoName);
+
+    if (!sanitizedName || sanitizedName.length < 1) {
+      toast.error('Repository name must contain at least one alphanumeric character');
+      return;
+    }
+
+    if (sanitizedName.length > 100) {
+      toast.error('Repository name is too long (maximum 100 characters)');
+      return;
+    }
+
+    // Update the repo name field with the sanitized version if it was changed
+    if (sanitizedName !== repoName) {
+      setRepoName(sanitizedName);
+      toast.info(`Repository name sanitized to: ${sanitizedName}`);
+    }
+
     setIsLoading(true);
 
     try {
@@ -188,10 +227,11 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
       let repoExists = false;
 
       try {
-        // Check if the repository already exists
+        // Check if the repository already exists - ensure repo name is properly sanitized
+        const sanitizedRepoName = sanitizeRepoName(repoName);
         const { data: existingRepo } = await octokit.repos.get({
           owner: connection.user.login,
-          repo: repoName,
+          repo: sanitizedRepoName,
         });
 
         repoExists = true;
@@ -219,7 +259,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
         if (existingRepo.private !== isPrivate) {
           await octokit.repos.update({
             owner: connection.user.login,
-            repo: repoName,
+            repo: sanitizedRepoName,
             private: isPrivate,
           });
         }
@@ -232,8 +272,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
 
       // Create repository if it doesn't exist
       if (!repoExists) {
+        const sanitizedRepoName = sanitizeRepoName(repoName);
         const { data: newRepo } = await octokit.repos.createForAuthenticatedUser({
-          name: repoName,
+          name: sanitizedRepoName,
           private: isPrivate,
 
           // Initialize with a README to avoid empty repository issues
@@ -253,7 +294,8 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
         await new Promise((resolve) => setTimeout(resolve, 2000));
       } else {
         // Set URL for existing repo
-        setCreatedRepoUrl(`https://github.com/${connection.user.login}/${repoName}`);
+        const sanitizedRepoName = sanitizeRepoName(repoName);
+        setCreatedRepoUrl(`https://github.com/${connection.user.login}/${sanitizedRepoName}`);
       }
 
       // Process files to upload
@@ -279,9 +321,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
 
       try {
         // For both new and existing repos, get the repository info
+        const sanitizedRepoName = sanitizeRepoName(repoName);
         const { data: repo } = await octokit.repos.get({
           owner: connection.user.login,
-          repo: repoName,
+          repo: sanitizedRepoName,
         });
         defaultBranch = repo.default_branch || 'main';
         console.log(`Repository default branch: ${defaultBranch}`);
@@ -290,7 +333,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
         try {
           const { data: refData } = await octokit.git.getRef({
             owner: connection.user.login,
-            repo: repoName,
+            repo: sanitizedRepoName,
             ref: `heads/${defaultBranch}`,
           });
 
@@ -300,7 +343,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
           // Get the latest commit to use as a base for our tree
           const { data: commitData } = await octokit.git.getCommit({
             owner: connection.user.login,
-            repo: repoName,
+            repo: sanitizedRepoName,
             commit_sha: baseSha,
           });
 
@@ -331,9 +374,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
         console.log(`Creating tree with ${tree.length} files using base: ${baseSha || 'none'}`);
 
         // Create a tree with all the files, using the base tree if available
+        const sanitizedRepoName = sanitizeRepoName(repoName);
         const { data: treeData } = await octokit.git.createTree({
           owner: connection.user.login,
-          repo: repoName,
+          repo: sanitizedRepoName,
           tree,
           base_tree: baseSha || undefined,
         });
@@ -346,7 +390,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
         try {
           const { data: refData } = await octokit.git.getRef({
             owner: connection.user.login,
-            repo: repoName,
+            repo: sanitizedRepoName,
             ref: `heads/${defaultBranch}`,
           });
           parentCommitSha = refData.object.sha;
@@ -361,7 +405,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
 
         const { data: commitData } = await octokit.git.createCommit({
           owner: connection.user.login,
-          repo: repoName,
+          repo: sanitizedRepoName,
           message: !repoExists ? 'Initial commit from Bolt.diy' : 'Update from Bolt.diy',
           tree: treeData.sha,
           parents: parentCommitSha ? [parentCommitSha] : [], // Use parent if available
@@ -374,7 +418,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
           console.log(`Updating reference: heads/${defaultBranch} to ${commitData.sha}`);
           await octokit.git.updateRef({
             owner: connection.user.login,
-            repo: repoName,
+            repo: sanitizedRepoName,
             ref: `heads/${defaultBranch}`,
             sha: commitData.sha,
             force: true, // Use force to ensure the update works
@@ -387,7 +431,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
           try {
             await octokit.git.createRef({
               owner: connection.user.login,
-              repo: repoName,
+              repo: sanitizedRepoName,
               ref: `refs/heads/${defaultBranch}`,
               sha: commitData.sha,
             });
@@ -413,12 +457,13 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
       }
 
       // Save the repository information for this chat
+      const sanitizedRepoName = sanitizeRepoName(repoName);
       localStorage.setItem(
         `github-repo-${currentChatId}`,
         JSON.stringify({
           owner: connection.user.login,
-          name: repoName,
-          url: `https://github.com/${connection.user.login}/${repoName}`,
+          name: sanitizedRepoName,
+          url: `https://github.com/${connection.user.login}/${sanitizedRepoName}`,
         }),
       );
 
@@ -428,14 +473,42 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
       console.error('Error pushing to GitHub:', error);
 
       // Attempt to extract more specific error information
-      let errorMessage = 'Failed to push to GitHub.';
+      let errorMessage = 'Failed to push to GitHub';
+      let isRetryable = false;
 
       if (error instanceof Error) {
-        errorMessage = error.message;
+        const errorMsg = error.message.toLowerCase();
+
+        if (errorMsg.includes('network') || errorMsg.includes('fetch failed') || errorMsg.includes('connection')) {
+          errorMessage = 'Network error. Please check your internet connection and try again.';
+          isRetryable = true;
+        } else if (errorMsg.includes('401') || errorMsg.includes('unauthorized')) {
+          errorMessage = 'GitHub authentication failed. Please check your access token in Settings > Connections.';
+        } else if (errorMsg.includes('403') || errorMsg.includes('forbidden')) {
+          errorMessage =
+            'Access denied. Your GitHub token may not have sufficient permissions to create/modify repositories.';
+        } else if (errorMsg.includes('404') || errorMsg.includes('not found')) {
+          errorMessage = 'Repository or resource not found. Please check the repository name and your permissions.';
+        } else if (errorMsg.includes('422') || errorMsg.includes('validation failed')) {
+          if (errorMsg.includes('name already exists')) {
+            errorMessage =
+              'A repository with this name already exists in your account. Please choose a different name.';
+          } else {
+            errorMessage = 'Repository validation failed. Please check the repository name and settings.';
+          }
+        } else if (errorMsg.includes('rate limit') || errorMsg.includes('429')) {
+          errorMessage = 'GitHub API rate limit exceeded. Please wait a moment and try again.';
+          isRetryable = true;
+        } else if (errorMsg.includes('timeout')) {
+          errorMessage = 'Request timed out. Please check your connection and try again.';
+          isRetryable = true;
+        } else {
+          errorMessage = `GitHub error: ${error.message}`;
+        }
       } else if (typeof error === 'object' && error !== null) {
         // Octokit errors
         if ('message' in error) {
-          errorMessage = error.message as string;
+          errorMessage = `GitHub API error: ${error.message as string}`;
         }
 
         // GitHub API errors
@@ -444,7 +517,17 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
         }
       }
 
-      toast.error(`GitHub deployment failed: ${errorMessage}`);
+      // Show error with retry suggestion if applicable
+      const finalMessage = isRetryable ? `${errorMessage} Click to retry.` : errorMessage;
+      toast.error(finalMessage);
+
+      // Log detailed error for debugging
+      console.error('Detailed GitHub deployment error:', {
+        error,
+        repoName: sanitizeRepoName(repoName),
+        user: connection?.user?.login,
+        isRetryable,
+      });
     } finally {
       setIsLoading(false);
     }
@@ -488,6 +571,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
                 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 GitHub</Dialog.Title>
                 <div className="p-6 space-y-4">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
@@ -624,6 +708,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
                 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">GitHub Connection Required</Dialog.Title>
                 <div className="relative text-center space-y-4">
                   <Dialog.Close asChild>
                     <button
@@ -763,12 +848,36 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
                         id="repoName"
                         type="text"
                         value={repoName}
-                        onChange={(e) => setRepoName(e.target.value)}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          setRepoName(value);
+
+                          // Show real-time feedback for invalid characters
+                          const sanitized = sanitizeRepoName(value);
+
+                          if (value && value !== sanitized) {
+                            // Show preview of sanitized name without being too intrusive
+                            e.target.setAttribute('data-sanitized', sanitized);
+                          } else {
+                            e.target.removeAttribute('data-sanitized');
+                          }
+                        }}
                         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-purple-500"
                         required
+                        maxLength={100}
+                        pattern="[a-zA-Z0-9\-_\s]+"
+                        title="Repository name can contain letters, numbers, hyphens, underscores, and spaces"
                       />
                     </div>
+                    {repoName && sanitizeRepoName(repoName) !== repoName && (
+                      <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mt-1">
+                        Will be created as:{' '}
+                        <span className="font-mono text-purple-600 dark:text-purple-400">
+                          {sanitizeRepoName(repoName)}
+                        </span>
+                      </p>
+                    )}
                   </div>
 
                   <div className="space-y-2">
diff --git a/app/components/deploy/GitLabDeploymentDialog.tsx b/app/components/deploy/GitLabDeploymentDialog.tsx
index 7f2b5cb..773a844 100644
--- a/app/components/deploy/GitLabDeploymentDialog.tsx
+++ b/app/components/deploy/GitLabDeploymentDialog.tsx
@@ -11,6 +11,7 @@ import { useStore } from '@nanostores/react';
 import { GitLabApiService } from '~/lib/services/gitlabApiService';
 import { SearchInput, EmptyState, StatusIndicator, Badge } from '~/components/ui';
 import { formatSize } from '~/utils/formatSize';
+import { GitLabAuthDialog } from '~/components/@settings/tabs/gitlab/components/GitLabAuthDialog';
 
 interface GitLabDeploymentDialogProps {
   isOpen: boolean;
@@ -31,6 +32,7 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
   const [showSuccessDialog, setShowSuccessDialog] = useState(false);
   const [createdRepoUrl, setCreatedRepoUrl] = useState('');
   const [pushedFiles, setPushedFiles] = useState<{ path: string; size: number }[]>([]);
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
   const currentChatId = useStore(chatId);
 
   // Load GitLab connection on mount
@@ -114,12 +116,24 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
 
     setIsLoading(true);
 
+    // Sanitize repository name to match what the API will create
+    const sanitizedRepoName = repoName
+      .replace(/[^a-zA-Z0-9-_.]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '')
+      .toLowerCase();
+
     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}`;
+      // Warn user if repository name was changed
+      if (sanitizedRepoName !== repoName && sanitizedRepoName !== repoName.toLowerCase()) {
+        toast.info(`Repository name sanitized to "${sanitizedRepoName}" to meet GitLab requirements`);
+      }
+
+      // Check if project exists using the sanitized name
+      const projectPath = `${connection.user.username}/${sanitizedRepoName}`;
       const existingProject = await apiService.getProjectByPath(projectPath);
       const projectExists = existingProject !== null;
 
@@ -131,7 +145,7 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
             : '';
 
         const confirmOverwrite = window.confirm(
-          `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.${visibilityChange}`,
+          `Repository "${sanitizedRepoName}" already exists. Do you want to update it? This will add or modify files in the repository.${visibilityChange}`,
         );
 
         if (!confirmOverwrite) {
@@ -154,7 +168,7 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
         // Create new project with files
         toast.info('Creating new repository...');
 
-        const newProject = await apiService.createProjectWithFiles(repoName, isPrivate, files);
+        const newProject = await apiService.createProjectWithFiles(sanitizedRepoName, isPrivate, files);
         setCreatedRepoUrl(newProject.http_url_to_repo);
         toast.success('Repository created successfully!');
       }
@@ -173,7 +187,7 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
         `gitlab-repo-${currentChatId}`,
         JSON.stringify({
           owner: connection.user.username,
-          name: repoName,
+          name: sanitizedRepoName,
           url: createdRepoUrl,
         }),
       );
@@ -181,17 +195,18 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
       logStore.logInfo('GitLab deployment completed successfully', {
         type: 'system',
         message: `Successfully deployed ${fileList.length} files to ${projectExists ? 'existing' : 'new'} GitLab repository: ${projectPath}`,
-        repoName,
+        repoName: sanitizedRepoName,
         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}`,
+        repoName: sanitizedRepoName,
+        projectPath: `${connection.user.username}/${sanitizedRepoName}`,
       });
 
       // Provide specific error messages based on error type
@@ -233,6 +248,18 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
     onClose();
   };
 
+  const handleAuthDialogClose = () => {
+    setShowAuthDialog(false);
+
+    // Refresh user data after auth
+    const connection = getLocalStorage('gitlab_connection');
+
+    if (connection?.user && connection?.token) {
+      setUser(connection.user);
+      fetchRecentRepos(connection.token, connection.gitlabUrl || 'https://gitlab.com');
+    }
+  };
+
   // Success Dialog
   if (showSuccessDialog) {
     return (
@@ -425,21 +452,24 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
                     >
                       Close
                     </motion.button>
-                    <motion.a
-                      href="/settings/connections"
+                    <motion.button
+                      onClick={() => setShowAuthDialog(true)}
                       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 className="i-ph:gitlab-logo w-4 h-4" />
+                      Connect GitLab Account
+                    </motion.button>
                   </div>
                 </div>
               </Dialog.Content>
             </motion.div>
           </div>
         </Dialog.Portal>
+
+        {/* GitLab Auth Dialog */}
+        <GitLabAuthDialog isOpen={showAuthDialog} onClose={handleAuthDialogClose} />
       </Dialog.Root>
     );
   }
@@ -499,6 +529,8 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
                         src={user.avatar_url}
                         alt={user.username}
                         className="w-10 h-10 rounded-full object-cover"
+                        crossOrigin="anonymous"
+                        referrerPolicy="no-referrer"
                         onError={(e) => {
                           // Handle CORS/COEP errors by hiding the image and showing fallback
                           const target = e.target as HTMLImageElement;
@@ -724,6 +756,9 @@ export function GitLabDeploymentDialog({ isOpen, onClose, projectName, files }:
           </motion.div>
         </div>
       </Dialog.Portal>
+
+      {/* GitLab Auth Dialog */}
+      <GitLabAuthDialog isOpen={showAuthDialog} onClose={handleAuthDialogClose} />
     </Dialog.Root>
   );
 }
diff --git a/app/components/ui/BranchSelector.tsx b/app/components/ui/BranchSelector.tsx
new file mode 100644
index 0000000..235eb6f
--- /dev/null
+++ b/app/components/ui/BranchSelector.tsx
@@ -0,0 +1,270 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from './Button';
+import { classNames } from '~/utils/classNames';
+import { GitBranch, Check, Shield, Star, RefreshCw, X } from 'lucide-react';
+
+interface BranchInfo {
+  name: string;
+  sha: string;
+  protected: boolean;
+  isDefault: boolean;
+  canPush?: boolean; // GitLab specific
+}
+
+interface BranchSelectorProps {
+  provider: 'github' | 'gitlab';
+  repoOwner: string;
+  repoName: string;
+  projectId?: string | number; // GitLab specific
+  token: string;
+  gitlabUrl?: string;
+  defaultBranch?: string;
+  onBranchSelect: (branch: string) => void;
+  onClose: () => void;
+  isOpen: boolean;
+  className?: string;
+}
+
+export function BranchSelector({
+  provider,
+  repoOwner,
+  repoName,
+  projectId,
+  token,
+  gitlabUrl,
+  defaultBranch,
+  onBranchSelect,
+  onClose,
+  isOpen,
+  className,
+}: BranchSelectorProps) {
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedBranch, setSelectedBranch] = useState<string>('');
+
+  const filteredBranches = branches.filter((branch) => branch.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const fetchBranches = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      let response: Response;
+
+      if (provider === 'github') {
+        response = await fetch('/api/github-branches', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            owner: repoOwner,
+            repo: repoName,
+            token,
+          }),
+        });
+      } else {
+        // GitLab
+        if (!projectId) {
+          throw new Error('Project ID is required for GitLab repositories');
+        }
+
+        response = await fetch('/api/gitlab-branches', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            token,
+            gitlabUrl: gitlabUrl || 'https://gitlab.com',
+            projectId,
+          }),
+        });
+      }
+
+      if (!response.ok) {
+        const errorData: any = await response.json().catch(() => ({ error: 'Failed to fetch branches' }));
+        throw new Error(errorData.error || `HTTP ${response.status}`);
+      }
+
+      const data: any = await response.json();
+      setBranches(data.branches || []);
+
+      // Set default selected branch
+      const defaultBranchToSelect = data.defaultBranch || defaultBranch || 'main';
+      setSelectedBranch(defaultBranchToSelect);
+    } catch (err) {
+      console.error('Failed to fetch branches:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch branches');
+      setBranches([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleBranchSelect = (branchName: string) => {
+    setSelectedBranch(branchName);
+  };
+
+  const handleConfirmSelection = () => {
+    onBranchSelect(selectedBranch);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (isOpen && !branches.length) {
+      fetchBranches();
+    }
+  }, [isOpen, repoOwner, repoName, projectId]);
+
+  // Reset search when closing
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.95 }}
+          transition={{ duration: 0.2 }}
+          className={classNames(
+            'bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-bolt-elements-borderColor max-w-md w-full max-h-[80vh] flex flex-col',
+            className,
+          )}
+        >
+          {/* Header */}
+          <div className="p-6 border-b border-bolt-elements-borderColor flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                <GitBranch className="w-6 h-6 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Select Branch</h3>
+                <p className="text-sm text-bolt-elements-textSecondary">
+                  {repoOwner}/{repoName}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg hover:bg-bolt-elements-background-depth-1 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-all"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex flex-col">
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8 space-y-4">
+                <div className="animate-spin w-8 h-8 border-2 border-bolt-elements-borderColorActive border-t-transparent rounded-full" />
+                <p className="text-sm text-bolt-elements-textSecondary">Loading branches...</p>
+              </div>
+            ) : error ? (
+              <div className="flex flex-col items-center justify-center p-8 space-y-4">
+                <div className="text-red-500 mb-2">
+                  <GitBranch className="w-8 h-8 mx-auto" />
+                </div>
+                <p className="text-sm text-red-600 text-center">{error}</p>
+                <Button onClick={fetchBranches} variant="outline" size="sm">
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  Retry
+                </Button>
+              </div>
+            ) : (
+              <>
+                {/* Search */}
+                {branches.length > 10 && (
+                  <div className="p-4 border-b border-bolt-elements-borderColor">
+                    <input
+                      type="text"
+                      placeholder="Search branches..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="w-full px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+                    />
+                  </div>
+                )}
+
+                {/* Branch List */}
+                <div className="flex-1 overflow-y-auto">
+                  {filteredBranches.length > 0 ? (
+                    <div className="p-4 space-y-1">
+                      {filteredBranches.map((branch) => (
+                        <button
+                          key={branch.name}
+                          onClick={() => handleBranchSelect(branch.name)}
+                          className={classNames(
+                            'w-full text-left p-3 rounded-lg transition-all duration-200 border',
+                            selectedBranch === branch.name
+                              ? 'bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-100'
+                              : 'bg-bolt-elements-background-depth-1 border-transparent hover:bg-bolt-elements-background-depth-2',
+                          )}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <GitBranch className="w-4 h-4 flex-shrink-0 text-bolt-elements-textSecondary" />
+                              <span className="font-medium text-bolt-elements-textPrimary truncate">{branch.name}</span>
+                              <div className="flex items-center gap-1 flex-shrink-0">
+                                {branch.isDefault && <Star className="w-3 h-3 text-yellow-500" />}
+                                {branch.protected && <Shield className="w-3 h-3 text-red-500" />}
+                              </div>
+                            </div>
+                            {selectedBranch === branch.name && <Check className="w-4 h-4 text-blue-600" />}
+                          </div>
+                          <div className="text-xs text-bolt-elements-textSecondary mt-1 truncate">
+                            {branch.sha.substring(0, 8)}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center p-8">
+                      <p className="text-sm text-bolt-elements-textSecondary">
+                        {searchQuery ? 'No branches found matching your search.' : 'No branches available.'}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Footer */}
+          {!isLoading && !error && branches.length > 0 && (
+            <div className="p-6 border-t border-bolt-elements-borderColor flex items-center justify-between">
+              <div className="text-sm text-bolt-elements-textSecondary">
+                {selectedBranch && (
+                  <>
+                    Selected: <span className="font-medium">{selectedBranch}</span>
+                  </>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                <Button onClick={onClose} variant="outline" size="sm">
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleConfirmSelection}
+                  disabled={!selectedBranch}
+                  size="sm"
+                  className="bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  Clone Branch
+                </Button>
+              </div>
+            </div>
+          )}
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/app/components/ui/GlowingEffect.tsx b/app/components/ui/GlowingEffect.tsx
index 5c8a3e1..3344413 100644
--- a/app/components/ui/GlowingEffect.tsx
+++ b/app/components/ui/GlowingEffect.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useRef } from 'react';
-import { cn } from '~/utils/cn';
+import { classNames } from '~/utils/classNames';
 import { animate } from 'framer-motion';
 
 interface GlowingEffectProps {
@@ -122,7 +122,7 @@ const GlowingEffect = memo(
     return (
       <>
         <div
-          className={cn(
+          className={classNames(
             'pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity',
             glow && 'opacity-100',
             variant === 'white' && 'border-white',
@@ -160,7 +160,7 @@ const GlowingEffect = memo(
                     )`,
             } as React.CSSProperties
           }
-          className={cn(
+          className={classNames(
             'pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity',
             glow && 'opacity-100',
             blur > 0 && 'blur-[var(--blur)] ',
@@ -169,7 +169,7 @@ const GlowingEffect = memo(
           )}
         >
           <div
-            className={cn(
+            className={classNames(
               'glow',
               'rounded-[inherit]',
               'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
diff --git a/app/components/workbench/terminal/TerminalManager.tsx b/app/components/workbench/terminal/TerminalManager.tsx
index 5154f05..48cbf82 100644
--- a/app/components/workbench/terminal/TerminalManager.tsx
+++ b/app/components/workbench/terminal/TerminalManager.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useEffect } from 'react';
 import type { Terminal as XTerm } from '@xterm/xterm';
 import { createScopedLogger } from '~/utils/logger';
 
@@ -10,98 +10,10 @@ interface TerminalManagerProps {
   onReconnect?: () => void;
 }
 
-export const TerminalManager = memo(({ terminal, isActive, onReconnect }: TerminalManagerProps) => {
-  const [isHealthy, setIsHealthy] = useState(true);
-  const [lastActivity, setLastActivity] = useState(Date.now());
-  const healthCheckIntervalRef = useRef<NodeJS.Timeout>();
-  const reconnectAttemptsRef = useRef(0);
-  const MAX_RECONNECT_ATTEMPTS = 3;
-  const HEALTH_CHECK_INTERVAL = 5000; // 5 seconds
-  const INACTIVITY_THRESHOLD = 30000; // 30 seconds
+export const TerminalManager = memo(({ terminal, isActive }: TerminalManagerProps) => {
+  // Simplified terminal manager - removed aggressive health checking that was causing issues
 
-  // Monitor terminal health
-  const checkTerminalHealth = useCallback(() => {
-    if (!terminal || !isActive) {
-      return;
-    }
-
-    try {
-      // Check if terminal is still responsive
-      const currentTime = Date.now();
-      const inactivityDuration = currentTime - lastActivity;
-
-      // If terminal has been inactive for too long, attempt recovery
-      if (inactivityDuration > INACTIVITY_THRESHOLD) {
-        logger.warn(`Terminal inactive for ${inactivityDuration}ms, attempting recovery`);
-        handleTerminalRecovery();
-      }
-
-      // Test if terminal can write - check if terminal buffer exists
-      try {
-        // Try to access terminal buffer to check if it's still valid
-        const buffer = terminal.buffer;
-
-        if (!buffer || !buffer.active) {
-          logger.error('Terminal buffer invalid');
-          setIsHealthy(false);
-          handleTerminalRecovery();
-        }
-      } catch {
-        logger.error('Terminal buffer check failed');
-        setIsHealthy(false);
-        handleTerminalRecovery();
-      }
-    } catch (error) {
-      logger.error('Terminal health check failed:', error);
-      setIsHealthy(false);
-      handleTerminalRecovery();
-    }
-  }, [terminal, isActive, lastActivity]);
-
-  // Handle terminal recovery
-  const handleTerminalRecovery = useCallback(() => {
-    if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
-      logger.error('Max reconnection attempts reached');
-      terminal?.write('\x1b[31m\n⚠️ Terminal connection lost. Please refresh the page.\n\x1b[0m');
-
-      return;
-    }
-
-    reconnectAttemptsRef.current++;
-    logger.info(`Attempting terminal recovery (attempt ${reconnectAttemptsRef.current})`);
-
-    try {
-      // Clear any stuck event listeners
-      if (terminal) {
-        // Force focus back to terminal
-        terminal.focus();
-
-        // Clear selection if any
-        terminal.clearSelection();
-
-        // Reset cursor position
-        terminal.scrollToBottom();
-
-        // Write recovery message
-        terminal.write('\x1b[33m\n🔄 Reconnecting terminal...\n\x1b[0m');
-
-        // Trigger reconnection callback
-        onReconnect?.();
-
-        // Reset health status
-        setIsHealthy(true);
-        setLastActivity(Date.now());
-        reconnectAttemptsRef.current = 0;
-
-        terminal.write('\x1b[32m✓ Terminal reconnected successfully\n\x1b[0m');
-      }
-    } catch (error) {
-      logger.error('Terminal recovery failed:', error);
-      setIsHealthy(false);
-    }
-  }, [terminal, onReconnect]);
-
-  // Monitor terminal input/output
+  // Basic terminal event handling - no aggressive monitoring
   useEffect(() => {
     if (!terminal) {
       return undefined;
@@ -109,21 +21,6 @@ export const TerminalManager = memo(({ terminal, isActive, onReconnect }: Termin
 
     const disposables: Array<{ dispose: () => void }> = [];
 
-    // Track terminal activity
-    const onDataDisposable = terminal.onData(() => {
-      setLastActivity(Date.now());
-      setIsHealthy(true);
-      reconnectAttemptsRef.current = 0;
-    });
-
-    const onKeyDisposable = terminal.onKey(() => {
-      setLastActivity(Date.now());
-      setIsHealthy(true);
-    });
-
-    disposables.push(onDataDisposable);
-    disposables.push(onKeyDisposable);
-
     // Set up paste handler via terminal's onKey
     const onPasteKeyDisposable = terminal.onKey((e) => {
       // Detect Ctrl+V or Cmd+V
@@ -139,7 +36,6 @@ export const TerminalManager = memo(({ terminal, isActive, onReconnect }: Termin
             .then((text) => {
               if (text && terminal) {
                 terminal.paste(text);
-                setLastActivity(Date.now());
               }
             })
             .catch((err) => {
@@ -154,30 +50,17 @@ export const TerminalManager = memo(({ terminal, isActive, onReconnect }: Termin
     return () => {
       disposables.forEach((d) => d.dispose());
     };
-  }, [terminal, isActive, isHealthy, handleTerminalRecovery]);
-
-  // Set up health check interval
-  useEffect(() => {
-    if (isActive) {
-      healthCheckIntervalRef.current = setInterval(checkTerminalHealth, HEALTH_CHECK_INTERVAL);
-    }
-
-    return () => {
-      if (healthCheckIntervalRef.current) {
-        clearInterval(healthCheckIntervalRef.current);
-      }
-    };
-  }, [isActive, checkTerminalHealth]);
+  }, [terminal, isActive]);
 
   // Auto-focus terminal when it becomes active
   useEffect(() => {
-    if (isActive && terminal && isHealthy) {
+    if (isActive && terminal) {
       // Small delay to ensure DOM is ready
       setTimeout(() => {
         terminal.focus();
       }, 100);
     }
-  }, [isActive, terminal, isHealthy]);
+  }, [isActive, terminal]);
 
   return null; // This is a utility component, no UI
 });
diff --git a/app/components/workbench/terminal/TerminalTabs.tsx b/app/components/workbench/terminal/TerminalTabs.tsx
index 893b181..e6510c7 100644
--- a/app/components/workbench/terminal/TerminalTabs.tsx
+++ b/app/components/workbench/terminal/TerminalTabs.tsx
@@ -241,13 +241,6 @@ export const TerminalTabs = memo(() => {
                   <TerminalManager
                     terminal={terminalRefs.current.get(index)?.getTerminal() || null}
                     isActive={isActive}
-                    onReconnect={() => {
-                      const ref = terminalRefs.current.get(index);
-
-                      if (ref?.getTerminal()) {
-                        workbenchStore.attachBoltTerminal(ref.getTerminal()!);
-                      }
-                    }}
                   />
                 </React.Fragment>
               );
@@ -272,13 +265,6 @@ export const TerminalTabs = memo(() => {
                   <TerminalManager
                     terminal={terminalRefs.current.get(index)?.getTerminal() || null}
                     isActive={isActive}
-                    onReconnect={() => {
-                      const ref = terminalRefs.current.get(index);
-
-                      if (ref?.getTerminal()) {
-                        workbenchStore.attachTerminal(ref.getTerminal()!);
-                      }
-                    }}
                   />
                 </React.Fragment>
               );
diff --git a/app/lib/hooks/index.ts b/app/lib/hooks/index.ts
index 4fd4f8f..c1c870a 100644
--- a/app/lib/hooks/index.ts
+++ b/app/lib/hooks/index.ts
@@ -7,3 +7,9 @@ export { default } from './useViewport';
 export { useFeatures } from './useFeatures';
 export { useNotifications } from './useNotifications';
 export { useConnectionStatus } from './useConnectionStatus';
+export { useGitHubConnection } from './useGitHubConnection';
+export { useGitHubStats } from './useGitHubStats';
+export { useGitLabConnection } from './useGitLabConnection';
+export { useGitLabAPI } from './useGitLabAPI';
+export { useSupabaseConnection } from './useSupabaseConnection';
+export { useConnectionTest } from './useConnectionTest';
diff --git a/app/lib/hooks/useConnectionTest.ts b/app/lib/hooks/useConnectionTest.ts
new file mode 100644
index 0000000..d58ca75
--- /dev/null
+++ b/app/lib/hooks/useConnectionTest.ts
@@ -0,0 +1,63 @@
+import { useState, useCallback } from 'react';
+import type { ConnectionTestResult } from '~/components/@settings/shared/service-integration';
+
+interface UseConnectionTestOptions {
+  testEndpoint: string;
+  serviceName: string;
+  getUserIdentifier?: (data: any) => string;
+}
+
+export function useConnectionTest({ testEndpoint, serviceName, getUserIdentifier }: UseConnectionTestOptions) {
+  const [testResult, setTestResult] = useState<ConnectionTestResult | null>(null);
+
+  const testConnection = useCallback(async () => {
+    setTestResult({
+      status: 'testing',
+      message: 'Testing connection...',
+    });
+
+    try {
+      const response = await fetch(testEndpoint, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        const userIdentifier = getUserIdentifier ? getUserIdentifier(data) : 'User';
+
+        setTestResult({
+          status: 'success',
+          message: `Connected successfully to ${serviceName} as ${userIdentifier}`,
+          timestamp: Date.now(),
+        });
+      } else {
+        const errorData = (await response.json().catch(() => ({}))) as { error?: string };
+        setTestResult({
+          status: 'error',
+          message: `Connection failed: ${errorData.error || `${response.status} ${response.statusText}`}`,
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      setTestResult({
+        status: 'error',
+        message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      });
+    }
+  }, [testEndpoint, serviceName, getUserIdentifier]);
+
+  const clearTestResult = useCallback(() => {
+    setTestResult(null);
+  }, []);
+
+  return {
+    testResult,
+    testConnection,
+    clearTestResult,
+    isTestingConnection: testResult?.status === 'testing',
+  };
+}
diff --git a/app/lib/hooks/useGitHubAPI.ts b/app/lib/hooks/useGitHubAPI.ts
new file mode 100644
index 0000000..4da809f
--- /dev/null
+++ b/app/lib/hooks/useGitHubAPI.ts
@@ -0,0 +1,6 @@
+// Basic GitHub API hook placeholder
+export const useGitHubAPI = () => {
+  return {
+    // Placeholder implementation
+  };
+};
diff --git a/app/lib/hooks/useGitHubConnection.ts b/app/lib/hooks/useGitHubConnection.ts
new file mode 100644
index 0000000..f88671c
--- /dev/null
+++ b/app/lib/hooks/useGitHubConnection.ts
@@ -0,0 +1,250 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useStore } from '@nanostores/react';
+import { toast } from 'react-toastify';
+import Cookies from 'js-cookie';
+import type { GitHubUserResponse, GitHubConnection } from '~/types/GitHub';
+import { useGitHubAPI } from './useGitHubAPI';
+import { githubConnection, isConnecting, updateGitHubConnection } from '~/lib/stores/github';
+
+export interface ConnectionState {
+  isConnected: boolean;
+  isLoading: boolean;
+  isConnecting: boolean;
+  connection: GitHubConnection | null;
+  error: string | null;
+  isServerSide: boolean; // Indicates if this is a server-side connection
+}
+
+export interface UseGitHubConnectionReturn extends ConnectionState {
+  connect: (token: string, tokenType: 'classic' | 'fine-grained') => Promise<void>;
+  disconnect: () => void;
+  refreshConnection: () => Promise<void>;
+  testConnection: () => Promise<boolean>;
+}
+
+const STORAGE_KEY = 'github_connection';
+
+export function useGitHubConnection(): UseGitHubConnectionReturn {
+  const connection = useStore(githubConnection);
+  const connecting = useStore(isConnecting);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Create API instance - will update when connection changes
+  useGitHubAPI();
+
+  // Load saved connection on mount
+  useEffect(() => {
+    loadSavedConnection();
+  }, []);
+
+  const loadSavedConnection = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Check if connection already exists in store (likely from initialization)
+      if (connection?.user) {
+        setIsLoading(false);
+        return;
+      }
+
+      // If we have a token but no user, or incomplete data, refresh
+      if (connection?.token && (!connection.user || !connection.stats)) {
+        await refreshConnectionData(connection);
+      }
+
+      setIsLoading(false);
+    } catch (error) {
+      console.error('Error loading saved connection:', error);
+      setError('Failed to load saved connection');
+      setIsLoading(false);
+
+      // Clean up corrupted data
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  }, [connection]);
+
+  const refreshConnectionData = useCallback(async (connection: GitHubConnection) => {
+    if (!connection.token) {
+      return;
+    }
+
+    try {
+      // Make direct API call instead of using hook
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `${connection.tokenType === 'classic' ? 'token' : 'Bearer'} ${connection.token}`,
+          'User-Agent': 'Bolt.diy',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+
+      const userData = (await response.json()) as GitHubUserResponse;
+
+      const updatedConnection: GitHubConnection = {
+        ...connection,
+        user: userData,
+      };
+
+      updateGitHubConnection(updatedConnection);
+    } catch (error) {
+      console.error('Error refreshing connection data:', error);
+    }
+  }, []);
+
+  const connect = useCallback(async (token: string, tokenType: 'classic' | 'fine-grained') => {
+    console.log('useGitHubConnection.connect called with tokenType:', tokenType);
+
+    if (!token.trim()) {
+      console.log('Token validation failed - empty token');
+      setError('Token is required');
+
+      return;
+    }
+
+    console.log('Setting isConnecting to true');
+    isConnecting.set(true);
+    setError(null);
+
+    try {
+      console.log('Making API request to GitHub...');
+
+      // Test the token by fetching user info
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `${tokenType === 'classic' ? 'token' : 'Bearer'} ${token}`,
+          'User-Agent': 'Bolt.diy',
+        },
+      });
+
+      console.log('GitHub API response status:', response.status, response.statusText);
+
+      if (!response.ok) {
+        throw new Error(`Authentication failed: ${response.status} ${response.statusText}`);
+      }
+
+      const userData = (await response.json()) as GitHubUserResponse;
+
+      // Create connection object
+      const connectionData: GitHubConnection = {
+        user: userData,
+        token,
+        tokenType,
+      };
+
+      // Set cookies for API requests
+      Cookies.set('githubToken', token);
+      Cookies.set('githubUsername', userData.login);
+      Cookies.set(
+        'git:github.com',
+        JSON.stringify({
+          username: token,
+          password: 'x-oauth-basic',
+        }),
+      );
+
+      // Update the store
+      updateGitHubConnection(connectionData);
+
+      toast.success(`Connected to GitHub as ${userData.login}`);
+    } catch (error) {
+      console.error('Failed to connect to GitHub:', error);
+
+      const errorMessage = error instanceof Error ? error.message : 'Failed to connect to GitHub';
+
+      setError(errorMessage);
+      toast.error(`Failed to connect: ${errorMessage}`);
+      throw error;
+    } finally {
+      isConnecting.set(false);
+    }
+  }, []);
+
+  const disconnect = useCallback(() => {
+    // Clear localStorage
+    localStorage.removeItem(STORAGE_KEY);
+
+    // Clear all GitHub-related cookies
+    Cookies.remove('githubToken');
+    Cookies.remove('githubUsername');
+    Cookies.remove('git:github.com');
+
+    // Reset store
+    updateGitHubConnection({
+      user: null,
+      token: '',
+      tokenType: 'classic',
+    });
+
+    setError(null);
+    toast.success('Disconnected from GitHub');
+  }, []);
+
+  const refreshConnection = useCallback(async () => {
+    if (!connection?.token) {
+      throw new Error('No connection to refresh');
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await refreshConnectionData(connection);
+    } catch (error) {
+      console.error('Error refreshing connection:', error);
+      setError('Failed to refresh connection');
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [connection, refreshConnectionData]);
+
+  const testConnection = useCallback(async (): Promise<boolean> => {
+    if (!connection) {
+      return false;
+    }
+
+    try {
+      // For server-side connections, test via our API
+      const isServerSide = !connection.token;
+
+      if (isServerSide) {
+        const response = await fetch('/api/github-user');
+        return response.ok;
+      }
+
+      // For client-side connections, test directly
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `${connection.tokenType === 'classic' ? 'token' : 'Bearer'} ${connection.token}`,
+          'User-Agent': 'Bolt.diy',
+        },
+      });
+
+      return response.ok;
+    } catch (error) {
+      console.error('Connection test failed:', error);
+      return false;
+    }
+  }, [connection]);
+
+  return {
+    isConnected: !!connection?.user,
+    isLoading,
+    isConnecting: connecting,
+    connection,
+    error,
+    isServerSide: !connection?.token, // Server-side if no token
+    connect,
+    disconnect,
+    refreshConnection,
+    testConnection,
+  };
+}
diff --git a/app/lib/hooks/useGitHubStats.ts b/app/lib/hooks/useGitHubStats.ts
new file mode 100644
index 0000000..9fd4aa8
--- /dev/null
+++ b/app/lib/hooks/useGitHubStats.ts
@@ -0,0 +1,321 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { toast } from 'react-toastify';
+import type { GitHubStats, GitHubConnection } from '~/types/GitHub';
+import { gitHubApiService } from '~/lib/services/githubApiService';
+
+export interface UseGitHubStatsState {
+  stats: GitHubStats | null;
+  isLoading: boolean;
+  isRefreshing: boolean;
+  error: string | null;
+  lastUpdated: Date | null;
+}
+
+export interface UseGitHubStatsOptions {
+  autoFetch?: boolean;
+  refreshInterval?: number; // in milliseconds
+  cacheTimeout?: number; // in milliseconds
+}
+
+export interface UseGitHubStatsReturn extends UseGitHubStatsState {
+  fetchStats: () => Promise<void>;
+  refreshStats: () => Promise<void>;
+  clearStats: () => void;
+  isStale: boolean;
+}
+
+const STATS_CACHE_KEY = 'github_stats_cache';
+const DEFAULT_CACHE_TIMEOUT = 30 * 60 * 1000; // 30 minutes
+
+export function useGitHubStats(
+  connection: GitHubConnection | null,
+  options: UseGitHubStatsOptions = {},
+  isServerSide: boolean = false,
+): UseGitHubStatsReturn {
+  const { autoFetch = false, refreshInterval, cacheTimeout = DEFAULT_CACHE_TIMEOUT } = options;
+
+  const [state, setState] = useState<UseGitHubStatsState>({
+    stats: null,
+    isLoading: false,
+    isRefreshing: false,
+    error: null,
+    lastUpdated: null,
+  });
+
+  // Configure API service when connection is available
+  const apiService = useMemo(() => {
+    if (!connection?.token) {
+      return null;
+    }
+
+    // Configure the singleton instance with the current connection
+    gitHubApiService.configure({
+      token: connection.token,
+      tokenType: connection.tokenType,
+    });
+
+    return gitHubApiService;
+  }, [connection?.token, connection?.tokenType]);
+
+  // Check if stats are stale
+  const isStale = useMemo(() => {
+    if (!state.lastUpdated || !state.stats) {
+      return true;
+    }
+
+    return Date.now() - state.lastUpdated.getTime() > cacheTimeout;
+  }, [state.lastUpdated, state.stats, cacheTimeout]);
+
+  // Load cached stats on mount
+  useEffect(() => {
+    loadCachedStats();
+  }, []);
+
+  // Auto-fetch stats when connection changes - with better handling
+  useEffect(() => {
+    if (autoFetch && connection && (!state.stats || isStale)) {
+      /*
+       * For server-side connections, always try to fetch
+       * For client-side connections, only fetch if we have an API service
+       */
+      if (isServerSide || apiService) {
+        // Use a timeout to prevent immediate fetching on mount
+        const timeoutId = setTimeout(() => {
+          fetchStats().catch((error) => {
+            console.warn('Failed to auto-fetch stats:', error);
+
+            // Don't throw error on auto-fetch to prevent crashes
+          });
+        }, 100);
+
+        return () => clearTimeout(timeoutId);
+      }
+    }
+
+    return undefined;
+  }, [autoFetch, connection, apiService, state.stats, isStale, isServerSide]);
+
+  // Set up refresh interval if provided
+  useEffect(() => {
+    if (!refreshInterval || !connection) {
+      return undefined;
+    }
+
+    const interval = setInterval(() => {
+      if (isStale) {
+        refreshStats();
+      }
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [refreshInterval, connection, isStale]);
+
+  const loadCachedStats = useCallback(() => {
+    try {
+      const cached = localStorage.getItem(STATS_CACHE_KEY);
+
+      if (cached) {
+        const { stats, timestamp, userLogin } = JSON.parse(cached);
+
+        // Only use cached data if it's for the current user
+        if (userLogin === connection?.user?.login) {
+          setState((prev) => ({
+            ...prev,
+            stats,
+            lastUpdated: new Date(timestamp),
+          }));
+        }
+      }
+    } catch (error) {
+      console.error('Error loading cached stats:', error);
+
+      // Clear corrupted cache
+      localStorage.removeItem(STATS_CACHE_KEY);
+    }
+  }, [connection?.user?.login]);
+
+  const saveCachedStats = useCallback((stats: GitHubStats, userLogin: string) => {
+    try {
+      const cacheData = {
+        stats,
+        timestamp: Date.now(),
+        userLogin,
+      };
+      localStorage.setItem(STATS_CACHE_KEY, JSON.stringify(cacheData));
+    } catch (error) {
+      console.error('Error saving stats to cache:', error);
+    }
+  }, []);
+
+  const fetchStats = useCallback(async () => {
+    if (!connection?.user) {
+      setState((prev) => ({
+        ...prev,
+        error: 'GitHub connection not available',
+        isLoading: false,
+        isRefreshing: false,
+      }));
+      return;
+    }
+
+    setState((prev) => ({
+      ...prev,
+      isLoading: !prev.stats, // Show loading only if no stats yet
+      isRefreshing: !!prev.stats, // Show refreshing if stats exist
+      error: null,
+    }));
+
+    try {
+      let stats: GitHubStats;
+
+      if (isServerSide || !connection.token) {
+        // Use server-side API for stats
+        const response = await fetch('/api/github-stats');
+
+        if (!response.ok) {
+          if (response.status === 401) {
+            throw new Error('GitHub authentication required');
+          }
+
+          const errorData: any = await response.json();
+          throw new Error(errorData.error || 'Failed to fetch stats from server');
+        }
+
+        stats = await response.json();
+      } else {
+        // Use client-side API service for stats
+        if (!apiService) {
+          throw new Error('GitHub API service not available');
+        }
+
+        stats = await apiService.generateComprehensiveStats(connection.user);
+      }
+
+      const now = new Date();
+
+      setState((prev) => ({
+        ...prev,
+        stats,
+        isLoading: false,
+        isRefreshing: false,
+        lastUpdated: now,
+        error: null,
+      }));
+
+      // Cache the stats
+      saveCachedStats(stats, connection.user.login);
+
+      // Update the connection object with stats if needed
+      if (connection.stats?.lastUpdated !== stats.lastUpdated) {
+        const updatedConnection = {
+          ...connection,
+          stats,
+        };
+        localStorage.setItem('github_connection', JSON.stringify(updatedConnection));
+      }
+
+      // Only show success toast for manual refreshes, not auto-fetches
+      if (state.isRefreshing) {
+        toast.success('GitHub stats updated successfully');
+      }
+    } catch (error) {
+      console.error('Error fetching GitHub stats:', error);
+
+      const errorMessage = error instanceof Error ? error.message : 'Failed to fetch GitHub stats';
+
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        isRefreshing: false,
+        error: errorMessage,
+      }));
+
+      // Only show error toast for manual actions, not auto-fetches
+      if (state.isRefreshing) {
+        toast.error(`Failed to update GitHub stats: ${errorMessage}`);
+      }
+
+      throw error;
+    }
+  }, [apiService, connection, saveCachedStats, isServerSide]);
+
+  const refreshStats = useCallback(async () => {
+    if (state.isRefreshing || state.isLoading) {
+      return; // Prevent multiple simultaneous requests
+    }
+
+    await fetchStats();
+  }, [fetchStats, state.isRefreshing, state.isLoading]);
+
+  const clearStats = useCallback(() => {
+    setState({
+      stats: null,
+      isLoading: false,
+      isRefreshing: false,
+      error: null,
+      lastUpdated: null,
+    });
+
+    // Clear cache
+    localStorage.removeItem(STATS_CACHE_KEY);
+  }, []);
+
+  return {
+    ...state,
+    fetchStats,
+    refreshStats,
+    clearStats,
+    isStale,
+  };
+}
+
+// Helper hook for lightweight stats fetching (just repositories)
+export function useGitHubRepositories(connection: GitHubConnection | null) {
+  const [repositories, setRepositories] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const apiService = useMemo(() => {
+    if (!connection?.token) {
+      return null;
+    }
+
+    // Configure the singleton instance with the current connection
+    gitHubApiService.configure({
+      token: connection.token,
+      tokenType: connection.tokenType,
+    });
+
+    return gitHubApiService;
+  }, [connection?.token, connection?.tokenType]);
+
+  const fetchRepositories = useCallback(async () => {
+    if (!apiService) {
+      setError('GitHub connection not available');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const repos = await apiService.getAllUserRepositories();
+      setRepositories(repos);
+    } catch (error) {
+      console.error('Error fetching repositories:', error);
+
+      const errorMessage = error instanceof Error ? error.message : 'Failed to fetch repositories';
+      setError(errorMessage);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiService]);
+
+  return {
+    repositories,
+    isLoading,
+    error,
+    fetchRepositories,
+  };
+}
diff --git a/app/lib/hooks/useGitLabAPI.ts b/app/lib/hooks/useGitLabAPI.ts
new file mode 100644
index 0000000..16f2163
--- /dev/null
+++ b/app/lib/hooks/useGitLabAPI.ts
@@ -0,0 +1,7 @@
+// Basic GitLab API hook placeholder
+export const useGitLabAPI = (config?: { token: string; baseUrl: string }) => {
+  return {
+    // Placeholder implementation - will be expanded as needed
+    config,
+  };
+};
diff --git a/app/lib/hooks/useGitLabConnection.ts b/app/lib/hooks/useGitLabConnection.ts
new file mode 100644
index 0000000..ce62717
--- /dev/null
+++ b/app/lib/hooks/useGitLabConnection.ts
@@ -0,0 +1,256 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useStore } from '@nanostores/react';
+import { toast } from 'react-toastify';
+import Cookies from 'js-cookie';
+import type { GitLabConnection } from '~/types/GitLab';
+import { useGitLabAPI } from './useGitLabAPI';
+import { gitlabConnectionStore, gitlabConnection, isGitLabConnected } from '~/lib/stores/gitlabConnection';
+
+export interface ConnectionState {
+  isConnected: boolean;
+  isLoading: boolean;
+  isConnecting: boolean;
+  connection: GitLabConnection | null;
+  error: string | null;
+}
+
+export interface UseGitLabConnectionReturn extends ConnectionState {
+  connect: (token: string, gitlabUrl?: string) => Promise<void>;
+  disconnect: () => void;
+  refreshConnection: () => Promise<void>;
+  testConnection: () => Promise<boolean>;
+  refreshStats: () => Promise<void>;
+}
+
+const STORAGE_KEY = 'gitlab_connection';
+
+export function useGitLabConnection(): UseGitLabConnectionReturn {
+  const connection = useStore(gitlabConnection);
+  const isConnected = useStore(isGitLabConnected);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  // Create API instance - will update when connection changes
+  useGitLabAPI(
+    connection?.token
+      ? { token: connection.token, baseUrl: connection.gitlabUrl || 'https://gitlab.com' }
+      : { token: '', baseUrl: 'https://gitlab.com' },
+  );
+
+  // Load saved connection on mount
+  useEffect(() => {
+    loadSavedConnection();
+  }, []);
+
+  const loadSavedConnection = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Check if connection already exists in store (likely from initialization)
+      if (connection?.user) {
+        setIsLoading(false);
+        return;
+      }
+
+      // Load saved connection from localStorage
+      const savedConnection = localStorage.getItem(STORAGE_KEY);
+
+      if (savedConnection) {
+        const parsed = JSON.parse(savedConnection);
+
+        if (parsed.user && parsed.token) {
+          // Update the store with saved connection
+          gitlabConnectionStore.setGitLabUrl(parsed.gitlabUrl || 'https://gitlab.com');
+          gitlabConnectionStore.setToken(parsed.token);
+
+          // Test the connection to make sure it's still valid
+          await refreshConnectionData(parsed);
+        }
+      }
+
+      setIsLoading(false);
+    } catch (error) {
+      console.error('Error loading saved connection:', error);
+      setError('Failed to load saved connection');
+      setIsLoading(false);
+
+      // Clean up corrupted data
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  }, [connection]);
+
+  const refreshConnectionData = useCallback(async (connection: GitLabConnection) => {
+    if (!connection.token) {
+      return;
+    }
+
+    try {
+      // Make direct API call instead of using hook
+      const baseUrl = connection.gitlabUrl || 'https://gitlab.com';
+      const response = await fetch(`${baseUrl}/api/v4/user`, {
+        headers: {
+          'Content-Type': 'application/json',
+          'PRIVATE-TOKEN': connection.token,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+
+      // const userData = (await response.json()) as GitLabUserResponse;
+      await response.json(); // Parse response but don't store - data handled by store
+
+      /*
+       * Update connection with user data - unused variable removed
+       * const updatedConnection: GitLabConnection = {
+       *   ...connection,
+       *   user: userData,
+       * };
+       */
+
+      gitlabConnectionStore.setGitLabUrl(baseUrl);
+      gitlabConnectionStore.setToken(connection.token);
+    } catch (error) {
+      console.error('Error refreshing connection data:', error);
+    }
+  }, []);
+
+  const connect = useCallback(async (token: string, gitlabUrl = 'https://gitlab.com') => {
+    if (!token.trim()) {
+      setError('Token is required');
+      return;
+    }
+
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      console.log('Calling GitLab store connect method...');
+
+      // Use the store's connect method which handles everything properly
+      const result = await gitlabConnectionStore.connect(token, gitlabUrl);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Connection failed');
+      }
+
+      console.log('GitLab connection successful, now fetching stats...');
+
+      // Fetch stats after successful connection
+      try {
+        const statsResult = await gitlabConnectionStore.fetchStats(true);
+
+        if (statsResult.success) {
+          console.log('GitLab stats fetched successfully:', statsResult.stats);
+        } else {
+          console.error('Failed to fetch GitLab stats:', statsResult.error);
+        }
+      } catch (statsError) {
+        console.error('Failed to fetch GitLab stats:', statsError);
+
+        // Don't fail the connection if stats fail
+      }
+
+      toast.success('Connected to GitLab successfully!');
+    } catch (error) {
+      console.error('Failed to connect to GitLab:', error);
+
+      const errorMessage = error instanceof Error ? error.message : 'Failed to connect to GitLab';
+
+      setError(errorMessage);
+      toast.error(`Failed to connect: ${errorMessage}`);
+      throw error;
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  const disconnect = useCallback(() => {
+    // Clear localStorage
+    localStorage.removeItem(STORAGE_KEY);
+
+    // Clear all GitLab-related cookies
+    Cookies.remove('gitlabToken');
+    Cookies.remove('gitlabUsername');
+    Cookies.remove('gitlabUrl');
+
+    // Reset store
+    gitlabConnectionStore.disconnect();
+
+    setError(null);
+    toast.success('Disconnected from GitLab');
+  }, []);
+
+  const refreshConnection = useCallback(async () => {
+    if (!connection?.token) {
+      throw new Error('No connection to refresh');
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await refreshConnectionData(connection);
+    } catch (error) {
+      console.error('Error refreshing connection:', error);
+      setError('Failed to refresh connection');
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [connection, refreshConnectionData]);
+
+  const testConnection = useCallback(async (): Promise<boolean> => {
+    if (!connection?.token) {
+      return false;
+    }
+
+    try {
+      const baseUrl = connection.gitlabUrl || 'https://gitlab.com';
+      const response = await fetch(`${baseUrl}/api/v4/user`, {
+        headers: {
+          'Content-Type': 'application/json',
+          'PRIVATE-TOKEN': connection.token,
+        },
+      });
+
+      return response.ok;
+    } catch (error) {
+      console.error('Connection test failed:', error);
+      return false;
+    }
+  }, [connection]);
+
+  const refreshStats = useCallback(async () => {
+    if (!connection?.token) {
+      throw new Error('No connection to refresh stats');
+    }
+
+    try {
+      const statsResult = await gitlabConnectionStore.fetchStats(true);
+
+      if (!statsResult.success) {
+        throw new Error(statsResult.error || 'Failed to refresh stats');
+      }
+    } catch (error) {
+      console.error('Error refreshing GitLab stats:', error);
+      throw error;
+    }
+  }, [connection]);
+
+  return {
+    isConnected,
+    isLoading,
+    isConnecting,
+    connection,
+    error,
+    connect,
+    disconnect,
+    refreshConnection,
+    testConnection,
+    refreshStats,
+  };
+}
diff --git a/app/lib/hooks/useSupabaseConnection.ts b/app/lib/hooks/useSupabaseConnection.ts
index 8a2f811..918b41e 100644
--- a/app/lib/hooks/useSupabaseConnection.ts
+++ b/app/lib/hooks/useSupabaseConnection.ts
@@ -9,6 +9,7 @@ import {
   isFetchingApiKeys,
   updateSupabaseConnection,
   fetchProjectApiKeys,
+  initializeSupabaseConnection,
 } from '~/lib/stores/supabase';
 
 export function useSupabaseConnection() {
@@ -20,22 +21,44 @@ export function useSupabaseConnection() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   useEffect(() => {
-    const savedConnection = localStorage.getItem('supabase_connection');
-    const savedCredentials = localStorage.getItem('supabaseCredentials');
+    const initConnection = async () => {
+      console.log('useSupabaseConnection: Initializing connection...');
 
-    if (savedConnection) {
-      const parsed = JSON.parse(savedConnection);
-
-      if (savedCredentials && !parsed.credentials) {
-        parsed.credentials = JSON.parse(savedCredentials);
+      // First, try to initialize from server-side token
+      try {
+        await initializeSupabaseConnection();
+        console.log('useSupabaseConnection: Server-side initialization completed');
+      } catch {
+        console.log('useSupabaseConnection: Server-side initialization failed, trying localStorage');
       }
 
-      updateSupabaseConnection(parsed);
+      // Then check localStorage for additional data
+      const savedConnection = localStorage.getItem('supabase_connection');
+      const savedCredentials = localStorage.getItem('supabaseCredentials');
 
-      if (parsed.token && parsed.selectedProjectId && !parsed.credentials) {
-        fetchProjectApiKeys(parsed.selectedProjectId, parsed.token).catch(console.error);
+      if (savedConnection) {
+        console.log('useSupabaseConnection: Loading from localStorage');
+
+        const parsed = JSON.parse(savedConnection);
+
+        if (savedCredentials && !parsed.credentials) {
+          parsed.credentials = JSON.parse(savedCredentials);
+        }
+
+        // Only update if we don't already have a connection from server-side
+        const currentState = supabaseConnection.get();
+
+        if (!currentState.user) {
+          updateSupabaseConnection(parsed);
+        }
+
+        if (parsed.token && parsed.selectedProjectId && !parsed.credentials) {
+          fetchProjectApiKeys(parsed.selectedProjectId, parsed.token).catch(console.error);
+        }
       }
-    }
+    };
+
+    initConnection();
   }, []);
 
   const handleConnect = async () => {
diff --git a/app/lib/modules/llm/providers/xai.ts b/app/lib/modules/llm/providers/xai.ts
index 6785bdd..b896a9b 100644
--- a/app/lib/modules/llm/providers/xai.ts
+++ b/app/lib/modules/llm/providers/xai.ts
@@ -15,9 +15,9 @@ export default class XAIProvider extends BaseProvider {
   staticModels: ModelInfo[] = [
     { name: 'grok-4', label: 'xAI Grok 4', provider: 'xAI', maxTokenAllowed: 256000 },
     { name: 'grok-4-07-09', label: 'xAI Grok 4 (07-09)', provider: 'xAI', maxTokenAllowed: 256000 },
-    { name: 'grok-3-beta', label: 'xAI Grok 3 Beta', provider: 'xAI', maxTokenAllowed: 131000 },
-    { name: 'grok-3-mini-beta', label: 'xAI Grok 3 Mini Beta', provider: 'xAI', maxTokenAllowed: 131000 },
-    { name: 'grok-3-mini-fast-beta', label: 'xAI Grok 3 Mini Fast Beta', provider: 'xAI', maxTokenAllowed: 131000 },
+    { name: 'grok-3-mini', label: 'xAI Grok 3 Mini', provider: 'xAI', maxTokenAllowed: 131000 },
+    { name: 'grok-3-mini-fast', label: 'xAI Grok 3 Mini Fast', provider: 'xAI', maxTokenAllowed: 131000 },
+    { name: 'grok-code-fast-1', label: 'xAI Grok Code Fast 1', provider: 'xAI', maxTokenAllowed: 131000 },
   ];
 
   getModelInstance(options: {
diff --git a/app/lib/security.ts b/app/lib/security.ts
new file mode 100644
index 0000000..72a803f
--- /dev/null
+++ b/app/lib/security.ts
@@ -0,0 +1,245 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/cloudflare';
+
+// Rate limiting store (in-memory for serverless environments)
+const rateLimitStore = new Map<string, { count: number; resetTime: number }>();
+
+// Rate limit configuration
+const RATE_LIMITS = {
+  // General API endpoints
+  '/api/*': { windowMs: 15 * 60 * 1000, maxRequests: 100 }, // 100 requests per 15 minutes
+
+  // LLM API (more restrictive)
+  '/api/llmcall': { windowMs: 60 * 1000, maxRequests: 10 }, // 10 requests per minute
+
+  // GitHub API endpoints
+  '/api/github-*': { windowMs: 60 * 1000, maxRequests: 30 }, // 30 requests per minute
+
+  // Netlify API endpoints
+  '/api/netlify-*': { windowMs: 60 * 1000, maxRequests: 20 }, // 20 requests per minute
+};
+
+/**
+ * Rate limiting middleware
+ */
+export function checkRateLimit(request: Request, endpoint: string): { allowed: boolean; resetTime?: number } {
+  const clientIP = getClientIP(request);
+  const key = `${clientIP}:${endpoint}`;
+
+  // Find matching rate limit rule
+  const rule = Object.entries(RATE_LIMITS).find(([pattern]) => {
+    if (pattern.endsWith('/*')) {
+      const basePattern = pattern.slice(0, -2);
+      return endpoint.startsWith(basePattern);
+    }
+
+    return endpoint === pattern;
+  });
+
+  if (!rule) {
+    return { allowed: true }; // No rate limit for this endpoint
+  }
+
+  const [, config] = rule;
+  const now = Date.now();
+  const windowStart = now - config.windowMs;
+
+  // Clean up old entries
+  for (const [storedKey, data] of rateLimitStore.entries()) {
+    if (data.resetTime < windowStart) {
+      rateLimitStore.delete(storedKey);
+    }
+  }
+
+  // Get or create rate limit data
+  const rateLimitData = rateLimitStore.get(key) || { count: 0, resetTime: now + config.windowMs };
+
+  if (rateLimitData.count >= config.maxRequests) {
+    return { allowed: false, resetTime: rateLimitData.resetTime };
+  }
+
+  // Update rate limit data
+  rateLimitData.count++;
+  rateLimitStore.set(key, rateLimitData);
+
+  return { allowed: true };
+}
+
+/**
+ * Get client IP address from request
+ */
+function getClientIP(request: Request): string {
+  // Try various headers that might contain the real IP
+  const forwardedFor = request.headers.get('x-forwarded-for');
+  const realIP = request.headers.get('x-real-ip');
+  const cfConnectingIP = request.headers.get('cf-connecting-ip');
+
+  // Return the first available IP or a fallback
+  return cfConnectingIP || realIP || forwardedFor?.split(',')[0]?.trim() || 'unknown';
+}
+
+/**
+ * Security headers middleware
+ */
+export function createSecurityHeaders() {
+  return {
+    // Prevent clickjacking
+    'X-Frame-Options': 'DENY',
+
+    // Prevent MIME type sniffing
+    'X-Content-Type-Options': 'nosniff',
+
+    // Enable XSS protection
+    'X-XSS-Protection': '1; mode=block',
+
+    // Content Security Policy - restrict to same origin and trusted sources
+    'Content-Security-Policy': [
+      "default-src 'self'",
+      "script-src 'self' 'unsafe-inline' 'unsafe-eval'", // Allow inline scripts for React
+      "style-src 'self' 'unsafe-inline'", // Allow inline styles
+      "img-src 'self' data: https: blob:", // Allow images from same origin, data URLs, and HTTPS
+      "font-src 'self' data:", // Allow fonts from same origin and data URLs
+      "connect-src 'self' https://api.github.com https://api.netlify.com", // Allow connections to GitHub and Netlify APIs
+      "frame-src 'none'", // Prevent iframe embedding
+      "object-src 'none'", // Prevent object embedding
+      "base-uri 'self'",
+      "form-action 'self'",
+    ].join('; '),
+
+    // Referrer Policy
+    'Referrer-Policy': 'strict-origin-when-cross-origin',
+
+    // Permissions Policy (formerly Feature Policy)
+    'Permissions-Policy': ['camera=()', 'microphone=()', 'geolocation=()', 'payment=()'].join(', '),
+
+    // HSTS (HTTP Strict Transport Security) - only in production
+    ...(process.env.NODE_ENV === 'production'
+      ? {
+          'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
+        }
+      : {}),
+  };
+}
+
+/**
+ * Validate API key format (basic validation)
+ */
+export function validateApiKeyFormat(apiKey: string, provider: string): boolean {
+  if (!apiKey || typeof apiKey !== 'string') {
+    return false;
+  }
+
+  // Basic length checks for different providers
+  const minLengths: Record<string, number> = {
+    anthropic: 50,
+    openai: 50,
+    groq: 50,
+    google: 30,
+    github: 30,
+    netlify: 30,
+  };
+
+  const minLength = minLengths[provider.toLowerCase()] || 20;
+
+  return apiKey.length >= minLength && !apiKey.includes('your_') && !apiKey.includes('here');
+}
+
+/**
+ * Sanitize error messages to prevent information leakage
+ */
+export function sanitizeErrorMessage(error: unknown, isDevelopment = false): string {
+  if (isDevelopment) {
+    // In development, show full error details
+    return error instanceof Error ? error.message : String(error);
+  }
+
+  // In production, show generic messages to prevent information leakage
+  if (error instanceof Error) {
+    // Check for sensitive information in error messages
+    if (error.message.includes('API key') || error.message.includes('token') || error.message.includes('secret')) {
+      return 'Authentication failed';
+    }
+
+    if (error.message.includes('rate limit') || error.message.includes('429')) {
+      return 'Rate limit exceeded. Please try again later.';
+    }
+  }
+
+  return 'An unexpected error occurred';
+}
+
+/**
+ * Security wrapper for API routes
+ */
+export function withSecurity<T extends (args: ActionFunctionArgs | LoaderFunctionArgs) => Promise<Response>>(
+  handler: T,
+  options: {
+    requireAuth?: boolean;
+    rateLimit?: boolean;
+    allowedMethods?: string[];
+  } = {},
+) {
+  return async (args: ActionFunctionArgs | LoaderFunctionArgs): Promise<Response> => {
+    const { request } = args;
+    const url = new URL(request.url);
+    const endpoint = url.pathname;
+
+    // Check allowed methods
+    if (options.allowedMethods && !options.allowedMethods.includes(request.method)) {
+      return new Response('Method not allowed', {
+        status: 405,
+        headers: createSecurityHeaders(),
+      });
+    }
+
+    // Apply rate limiting
+    if (options.rateLimit !== false) {
+      const rateLimitResult = checkRateLimit(request, endpoint);
+
+      if (!rateLimitResult.allowed) {
+        return new Response('Rate limit exceeded', {
+          status: 429,
+          headers: {
+            ...createSecurityHeaders(),
+            'Retry-After': Math.ceil((rateLimitResult.resetTime! - Date.now()) / 1000).toString(),
+            'X-RateLimit-Reset': rateLimitResult.resetTime!.toString(),
+          },
+        });
+      }
+    }
+
+    try {
+      // Execute the handler
+      const response = await handler(args);
+
+      // Add security headers to response
+      const responseHeaders = new Headers(response.headers);
+      Object.entries(createSecurityHeaders()).forEach(([key, value]) => {
+        responseHeaders.set(key, value);
+      });
+
+      return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: responseHeaders,
+      });
+    } catch (error) {
+      console.error('Security-wrapped handler error:', error);
+
+      const errorMessage = sanitizeErrorMessage(error, process.env.NODE_ENV === 'development');
+
+      return new Response(
+        JSON.stringify({
+          error: true,
+          message: errorMessage,
+        }),
+        {
+          status: 500,
+          headers: {
+            ...createSecurityHeaders(),
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+    }
+  };
+}
diff --git a/app/lib/services/githubApiService.ts b/app/lib/services/githubApiService.ts
index a0f862c..6bbb572 100644
--- a/app/lib/services/githubApiService.ts
+++ b/app/lib/services/githubApiService.ts
@@ -1,338 +1,450 @@
 import type {
   GitHubUserResponse,
   GitHubRepoInfo,
-  GitHubEvent,
+  GitHubBranch,
+  GitHubOrganization,
   GitHubStats,
   GitHubLanguageStats,
-  GitHubRateLimits,
 } from '~/types/GitHub';
 
-const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
-
-interface CacheEntry<T> {
-  data: T;
-  timestamp: number;
-  expiresAt: number;
+export interface GitHubApiServiceConfig {
+  token?: string;
+  tokenType?: 'classic' | 'fine-grained';
+  baseURL?: string;
 }
 
-class GitHubCache {
-  private _cache = new Map<string, CacheEntry<any>>();
-
-  set<T>(key: string, data: T, duration = CACHE_DURATION): void {
-    const timestamp = Date.now();
-    this._cache.set(key, {
-      data,
-      timestamp,
-      expiresAt: timestamp + duration,
-    });
-  }
-
-  get<T>(key: string): T | null {
-    const entry = this._cache.get(key);
-
-    if (!entry) {
-      return null;
-    }
-
-    if (Date.now() > entry.expiresAt) {
-      this._cache.delete(key);
-      return null;
-    }
-
-    return entry.data;
-  }
-
-  clear(): void {
-    this._cache.clear();
-  }
-
-  isExpired(key: string): boolean {
-    const entry = this._cache.get(key);
-    return !entry || Date.now() > entry.expiresAt;
-  }
-
-  delete(key: string): void {
-    this._cache.delete(key);
-  }
+export interface DetailedRepoInfo extends GitHubRepoInfo {
+  branches_count?: number;
+  contributors_count?: number;
+  issues_count?: number;
+  pull_requests_count?: number;
 }
 
-class GitHubApiService {
-  private _cache = new GitHubCache();
-  private _baseUrl = 'https://api.github.com';
+export interface GitHubApiError {
+  message: string;
+  status: number;
+  code?: string;
+}
 
-  private async _makeRequest<T>(
-    endpoint: string,
-    token: string,
-    tokenType: 'classic' | 'fine-grained' = 'classic',
-    options: RequestInit = {},
-  ): Promise<{ data: T; rateLimit?: GitHubRateLimits }> {
-    const authHeader = tokenType === 'classic' ? `token ${token}` : `Bearer ${token}`;
+export class GitHubApiServiceClass {
+  private _config: GitHubApiServiceConfig;
+  private _baseURL: string;
 
-    const response = await fetch(`${this._baseUrl}${endpoint}`, {
-      ...options,
+  constructor(config: GitHubApiServiceConfig = {}) {
+    this._config = config;
+    this._baseURL = config.baseURL || 'https://api.github.com';
+  }
+
+  /**
+   * Configure the service with authentication details
+   */
+  configure(config: GitHubApiServiceConfig): void {
+    this._config = { ...this._config, ...config };
+    this._baseURL = config.baseURL || this._baseURL;
+  }
+
+  private async _makeRequestInternal<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    if (!this._config.token) {
+      throw new Error('GitHub token is required. Call configure() first.');
+    }
+
+    const response = await fetch(`${this._baseURL}${endpoint}`, {
       headers: {
-        'Content-Type': 'application/json',
-        Authorization: authHeader,
-        'User-Agent': 'bolt.diy-app',
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `${this._config.tokenType === 'classic' ? 'token' : 'Bearer'} ${this._config.token}`,
+        'User-Agent': 'Bolt.diy',
         ...options.headers,
       },
+      ...options,
+    });
+
+    if (!response.ok) {
+      const errorData: any = await response.json().catch(() => ({ message: response.statusText }));
+      const error: GitHubApiError = {
+        message: errorData.message || response.statusText,
+        status: response.status,
+        code: errorData.code,
+      };
+      throw error;
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Fetch all user repositories with pagination
+   */
+  async getAuthenticatedUser(): Promise<GitHubUserResponse> {
+    return this._makeRequestInternal<GitHubUserResponse>('/user');
+  }
+
+  async getAllUserRepositories(): Promise<GitHubRepoInfo[]> {
+    const allRepos: GitHubRepoInfo[] = [];
+    let page = 1;
+    let hasMore = true;
+
+    while (hasMore) {
+      const repos = await this._makeRequestInternal<GitHubRepoInfo[]>(
+        `/user/repos?per_page=100&page=${page}&sort=updated`,
+      );
+
+      allRepos.push(...repos);
+      hasMore = repos.length === 100; // If we got 100 repos, there might be more
+      page++;
+    }
+
+    return allRepos;
+  }
+
+  /**
+   * Fetch detailed information for a repository including additional metrics
+   */
+  async getDetailedRepositoryInfo(owner: string, repo: string): Promise<DetailedRepoInfo> {
+    const [repoInfo, branches] = await Promise.all([
+      this._makeRequestInternal<GitHubRepoInfo>(`/repos/${owner}/${repo}`),
+      this.getRepositoryBranches(owner, repo).catch(() => []),
+    ]);
+
+    // Try to get additional metrics
+    const [contributors, issues, pullRequests] = await Promise.allSettled([
+      this._getRepositoryContributorsCount(owner, repo),
+      this._getRepositoryIssuesCount(owner, repo),
+      this._getRepositoryPullRequestsCount(owner, repo),
+    ]);
+
+    const detailedInfo: DetailedRepoInfo = {
+      ...repoInfo,
+      branches_count: branches.length,
+      contributors_count: contributors.status === 'fulfilled' ? contributors.value : undefined,
+      issues_count: issues.status === 'fulfilled' ? issues.value : undefined,
+      pull_requests_count: pullRequests.status === 'fulfilled' ? pullRequests.value : undefined,
+    };
+
+    return detailedInfo;
+  }
+
+  /**
+   * Get repository branches
+   */
+  async getRepositoryBranches(owner: string, repo: string): Promise<GitHubBranch[]> {
+    return this._makeRequestInternal<GitHubBranch[]>(`/repos/${owner}/${repo}/branches`);
+  }
+
+  /**
+   * Get contributors count using Link header pagination info
+   */
+  private async _getRepositoryContributorsCount(owner: string, repo: string): Promise<number> {
+    const response = await fetch(`${this._baseURL}/repos/${owner}/${repo}/contributors?per_page=1`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `${this._config.tokenType === 'classic' ? 'token' : 'Bearer'} ${this._config.token}`,
+        'User-Agent': 'Bolt.diy',
+      },
     });
 
-    // Extract rate limit information
-    const rateLimit: GitHubRateLimits = {
-      limit: parseInt(response.headers.get('x-ratelimit-limit') || '5000'),
-      remaining: parseInt(response.headers.get('x-ratelimit-remaining') || '5000'),
-      reset: new Date(parseInt(response.headers.get('x-ratelimit-reset') || '0') * 1000),
-      used: parseInt(response.headers.get('x-ratelimit-used') || '0'),
-    };
+    if (!response.ok) {
+      return 0;
+    }
+
+    const linkHeader = response.headers.get('Link');
+
+    if (linkHeader) {
+      const match = linkHeader.match(/page=(\d+)>; rel="last"/);
+      return match ? parseInt(match[1], 10) : 1;
+    }
+
+    const data = await response.json();
+
+    return Array.isArray(data) ? data.length : 0;
+  }
+
+  /**
+   * Get issues count using Link header pagination info
+   */
+  private async _getRepositoryIssuesCount(owner: string, repo: string): Promise<number> {
+    const response = await fetch(`${this._baseURL}/repos/${owner}/${repo}/issues?state=all&per_page=1`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `${this._config.tokenType === 'classic' ? 'token' : 'Bearer'} ${this._config.token}`,
+        'User-Agent': 'Bolt.diy',
+      },
+    });
 
     if (!response.ok) {
-      const errorBody = await response.text();
-      throw new Error(`GitHub API Error (${response.status}): ${response.statusText}. ${errorBody}`);
+      return 0;
     }
 
-    const data = (await response.json()) as T;
+    const linkHeader = response.headers.get('Link');
 
-    return { data, rateLimit };
+    if (linkHeader) {
+      const match = linkHeader.match(/page=(\d+)>; rel="last"/);
+      return match ? parseInt(match[1], 10) : 1;
+    }
+
+    const data = await response.json();
+
+    return Array.isArray(data) ? data.length : 0;
   }
 
-  async fetchUser(
-    token: string,
-    _tokenType: 'classic' | 'fine-grained' = 'classic',
-  ): Promise<{
-    user: GitHubUserResponse;
-    rateLimit: GitHubRateLimits;
-  }> {
-    const cacheKey = `user:${token.slice(0, 8)}`;
-    const cached = this._cache.get<{ user: GitHubUserResponse; rateLimit: GitHubRateLimits }>(cacheKey);
+  /**
+   * Get pull requests count using Link header pagination info
+   */
+  private async _getRepositoryPullRequestsCount(owner: string, repo: string): Promise<number> {
+    const response = await fetch(`${this._baseURL}/repos/${owner}/${repo}/pulls?state=all&per_page=1`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `${this._config.tokenType === 'classic' ? 'token' : 'Bearer'} ${this._config.token}`,
+        'User-Agent': 'Bolt.diy',
+      },
+    });
 
-    if (cached) {
-      return cached;
+    if (!response.ok) {
+      return 0;
     }
 
-    try {
-      // Use server-side API endpoint for user validation
-      const response = await fetch('/api/system/git-info?action=getUser', {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-      });
+    const linkHeader = response.headers.get('Link');
 
-      if (!response.ok) {
-        throw new Error(`GitHub API Error (${response.status}): ${response.statusText}`);
-      }
-
-      // Get rate limit information from headers
-      const rateLimit: GitHubRateLimits = {
-        limit: parseInt(response.headers.get('x-ratelimit-limit') || '5000'),
-        remaining: parseInt(response.headers.get('x-ratelimit-remaining') || '5000'),
-        reset: new Date(parseInt(response.headers.get('x-ratelimit-reset') || '0') * 1000),
-        used: parseInt(response.headers.get('x-ratelimit-used') || '0'),
-      };
-
-      const data = (await response.json()) as { user: GitHubUserResponse };
-      const user = data.user;
-
-      if (!user || !user.login) {
-        throw new Error('Invalid user data received');
-      }
-
-      const result = { user, rateLimit };
-      this._cache.set(cacheKey, result);
-
-      return result;
-    } catch (error) {
-      console.error('Failed to fetch GitHub user:', error);
-      throw error;
+    if (linkHeader) {
+      const match = linkHeader.match(/page=(\d+)>; rel="last"/);
+      return match ? parseInt(match[1], 10) : 1;
     }
+
+    const data = await response.json();
+
+    return Array.isArray(data) ? data.length : 0;
   }
 
-  async fetchRepositories(token: string, tokenType: 'classic' | 'fine-grained' = 'classic'): Promise<GitHubRepoInfo[]> {
-    const cacheKey = `repos:${token.slice(0, 8)}`;
-    const cached = this._cache.get<GitHubRepoInfo[]>(cacheKey);
+  /**
+   * Fetch detailed information for multiple repositories in batches
+   */
+  async getDetailedRepositoriesInfo(
+    repos: GitHubRepoInfo[],
+    batchSize: number = 5,
+    delayMs: number = 100,
+  ): Promise<DetailedRepoInfo[]> {
+    const detailedRepos: DetailedRepoInfo[] = [];
 
-    if (cached) {
-      return cached;
-    }
-
-    try {
-      let allRepos: any[] = [];
-      let page = 1;
-      let hasMore = true;
-
-      while (hasMore) {
-        const { data: repos } = await this._makeRequest<any[]>(
-          `/user/repos?per_page=100&page=${page}`,
-          token,
-          tokenType,
-        );
-
-        allRepos = [...allRepos, ...repos];
-
-        hasMore = repos.length === 100;
-        page++;
-      }
-
-      const repositories: GitHubRepoInfo[] = allRepos.map((repo) => ({
-        id: repo.id.toString(),
-        name: repo.name,
-        full_name: repo.full_name,
-        html_url: repo.html_url,
-        description: repo.description || '',
-        stargazers_count: repo.stargazers_count || 0,
-        forks_count: repo.forks_count || 0,
-        default_branch: repo.default_branch || 'main',
-        updated_at: repo.updated_at,
-        language: repo.language || '',
-        languages_url: repo.languages_url,
-        private: repo.private || false,
-        topics: repo.topics || [],
-      }));
-
-      this._cache.set(cacheKey, repositories);
-
-      return repositories;
-    } catch (error) {
-      console.error('Failed to fetch GitHub repositories:', error);
-      throw error;
-    }
-  }
-
-  async fetchRecentActivity(
-    username: string,
-    token: string,
-    tokenType: 'classic' | 'fine-grained' = 'classic',
-  ): Promise<GitHubEvent[]> {
-    const cacheKey = `activity:${username}:${token.slice(0, 8)}`;
-    const cached = this._cache.get<GitHubEvent[]>(cacheKey);
-
-    if (cached) {
-      return cached;
-    }
-
-    try {
-      const { data: events } = await this._makeRequest<any[]>(
-        `/users/${username}/events?per_page=10`,
-        token,
-        tokenType,
+    for (let i = 0; i < repos.length; i += batchSize) {
+      const batch = repos.slice(i, i + batchSize);
+      const batchResults = await Promise.allSettled(
+        batch.map((repo) => {
+          const [owner, repoName] = repo.full_name.split('/');
+          return this.getDetailedRepositoryInfo(owner, repoName);
+        }),
       );
 
-      const recentActivity: GitHubEvent[] = events.slice(0, 5).map((event) => ({
-        id: event.id,
-        type: event.type,
-        created_at: event.created_at,
-        repo: {
-          name: event.repo?.name || '',
-          url: event.repo?.url || '',
-        },
-        payload: {
-          action: event.payload?.action,
-          ref: event.payload?.ref,
-          ref_type: event.payload?.ref_type,
-          description: event.payload?.description,
-        },
-      }));
+      // Collect successful results
+      batchResults.forEach((result, index) => {
+        if (result.status === 'fulfilled') {
+          detailedRepos.push(result.value);
+        } else {
+          console.error(`Failed to fetch details for ${batch[index].full_name}:`, result.reason);
 
-      this._cache.set(cacheKey, recentActivity);
-
-      return recentActivity;
-    } catch (error) {
-      console.error('Failed to fetch GitHub recent activity:', error);
-      throw error;
-    }
-  }
-
-  async fetchRepositoryLanguages(languagesUrl: string, token: string): Promise<GitHubLanguageStats> {
-    const cacheKey = `languages:${languagesUrl}`;
-    const cached = this._cache.get<GitHubLanguageStats>(cacheKey);
-
-    if (cached) {
-      return cached;
-    }
-
-    try {
-      const response = await fetch(languagesUrl, {
-        headers: {
-          Authorization: `token ${token}`,
-          'User-Agent': 'bolt.diy-app',
-        },
+          // Fallback to original repo data
+          detailedRepos.push(batch[index]);
+        }
       });
 
-      if (!response.ok) {
-        throw new Error(`Failed to fetch languages: ${response.statusText}`);
+      // Add delay between batches to be respectful to the API
+      if (i + batchSize < repos.length) {
+        await new Promise((resolve) => setTimeout(resolve, delayMs));
       }
-
-      const languages = (await response.json()) as GitHubLanguageStats;
-      this._cache.set(cacheKey, languages);
-
-      return languages;
-    } catch (error) {
-      console.error('Failed to fetch repository languages:', error);
-      return {};
     }
+
+    return detailedRepos;
   }
 
-  async fetchStats(token: string, tokenType: 'classic' | 'fine-grained' = 'classic'): Promise<GitHubStats> {
-    try {
-      // Fetch user data
-      const { user } = await this.fetchUser(token, tokenType);
+  /**
+   * Calculate comprehensive statistics from repositories
+   */
+  calculateRepositoryStats(repos: DetailedRepoInfo[]): {
+    languages: GitHubLanguageStats;
+    mostUsedLanguages: Array<{ language: string; bytes: number; repos: number }>;
+    totalBranches: number;
+    totalContributors: number;
+    totalIssues: number;
+    totalPullRequests: number;
+    repositoryHealth: {
+      healthy: number;
+      active: number;
+      archived: number;
+      forked: number;
+    };
+  } {
+    const languages: GitHubLanguageStats = {};
+    const languageBytes: Record<string, number> = {};
+    const languageRepos: Record<string, number> = {};
 
-      // Fetch repositories
-      const repositories = await this.fetchRepositories(token, tokenType);
+    let totalBranches = 0;
+    let totalContributors = 0;
+    let totalIssues = 0;
+    let totalPullRequests = 0;
 
-      // Fetch recent activity
-      const recentActivity = await this.fetchRecentActivity(user.login, token, tokenType);
+    let healthyRepos = 0;
+    let activeRepos = 0;
+    let archivedRepos = 0;
+    let forkedRepos = 0;
 
-      // Calculate stats
-      const totalStars = repositories.reduce((sum, repo) => sum + repo.stargazers_count, 0);
-      const totalForks = repositories.reduce((sum, repo) => sum + repo.forks_count, 0);
-      const privateRepos = repositories.filter((repo) => repo.private).length;
-
-      // Calculate language statistics
-      const languages: GitHubLanguageStats = {};
-
-      for (const repo of repositories) {
-        if (repo.language) {
-          languages[repo.language] = (languages[repo.language] || 0) + 1;
-        }
+    repos.forEach((repo) => {
+      // Language statistics
+      if (repo.language) {
+        languages[repo.language] = (languages[repo.language] || 0) + 1;
+        languageBytes[repo.language] = (languageBytes[repo.language] || 0) + (repo.size || 0);
+        languageRepos[repo.language] = (languageRepos[repo.language] || 0) + 1;
       }
 
-      const stats: GitHubStats = {
-        repos: repositories,
-        totalStars,
-        totalForks,
-        organizations: [], // TODO: Implement organizations fetching if needed
-        recentActivity,
-        languages,
-        totalGists: user.public_gists || 0,
-        publicRepos: user.public_repos || 0,
+      // Aggregate metrics
+      totalBranches += repo.branches_count || 0;
+      totalContributors += repo.contributors_count || 0;
+      totalIssues += repo.issues_count || 0;
+      totalPullRequests += repo.pull_requests_count || 0;
+
+      // Repository health analysis
+      const daysSinceUpdate = Math.floor((Date.now() - new Date(repo.updated_at).getTime()) / (1000 * 60 * 60 * 24));
+
+      if (repo.archived) {
+        archivedRepos++;
+      } else if (repo.fork) {
+        forkedRepos++;
+      } else if (daysSinceUpdate < 7) {
+        activeRepos++;
+      } else if (daysSinceUpdate < 30 && repo.stargazers_count > 0) {
+        healthyRepos++;
+      }
+    });
+
+    // Create most used languages array sorted by bytes
+    const mostUsedLanguages = Object.entries(languageBytes)
+      .map(([language, bytes]) => ({
+        language,
+        bytes,
+        repos: languageRepos[language] || 0,
+      }))
+      .sort((a, b) => b.bytes - a.bytes)
+      .slice(0, 20);
+
+    return {
+      languages,
+      mostUsedLanguages,
+      totalBranches,
+      totalContributors,
+      totalIssues,
+      totalPullRequests,
+      repositoryHealth: {
+        healthy: healthyRepos,
+        active: activeRepos,
+        archived: archivedRepos,
+        forked: forkedRepos,
+      },
+    };
+  }
+
+  /**
+   * Generate comprehensive GitHub stats for a user
+   */
+  async generateComprehensiveStats(userData: GitHubUserResponse): Promise<GitHubStats> {
+    try {
+      // Fetch all repositories
+      const allRepos = await this.getAllUserRepositories();
+
+      // Get detailed information for repositories (in batches)
+      const detailedRepos = await this.getDetailedRepositoriesInfo(allRepos);
+
+      // Calculate statistics
+      const stats = this.calculateRepositoryStats(detailedRepos);
+
+      // Fetch additional data in parallel
+      const [organizations, recentActivity] = await Promise.allSettled([
+        this._makeRequestInternal<GitHubOrganization[]>('/user/orgs'),
+        this._makeRequestInternal<any[]>(`/users/${userData.login}/events?per_page=10`),
+      ]);
+
+      // Calculate aggregated metrics
+      const totalStars = detailedRepos.reduce((sum, repo) => sum + repo.stargazers_count, 0);
+      const totalForks = detailedRepos.reduce((sum, repo) => sum + repo.forks_count, 0);
+      const privateRepos = detailedRepos.filter((repo) => repo.private).length;
+
+      const githubStats: GitHubStats = {
+        repos: detailedRepos,
+        recentActivity:
+          recentActivity.status === 'fulfilled'
+            ? recentActivity.value.slice(0, 10).map((event: any) => ({
+                id: event.id,
+                type: event.type,
+                repo: { name: event.repo.name, url: event.repo.url },
+                created_at: event.created_at,
+                payload: event.payload || {},
+              }))
+            : [],
+        languages: stats.languages,
+        totalGists: userData.public_gists || 0,
+        publicRepos: userData.public_repos || 0,
         privateRepos,
         stars: totalStars,
         forks: totalForks,
-        followers: user.followers || 0,
-        publicGists: user.public_gists || 0,
-        privateGists: 0, // GitHub API doesn't provide private gists count directly
+        followers: userData.followers || 0,
+        publicGists: userData.public_gists || 0,
+        privateGists: 0, // This would need additional API call
         lastUpdated: new Date().toISOString(),
+        totalStars,
+        totalForks,
+        organizations: organizations.status === 'fulfilled' ? organizations.value : [],
+        totalBranches: stats.totalBranches,
+        totalContributors: stats.totalContributors,
+        totalIssues: stats.totalIssues,
+        totalPullRequests: stats.totalPullRequests,
+        mostUsedLanguages: stats.mostUsedLanguages,
       };
 
-      return stats;
+      return githubStats;
     } catch (error) {
-      console.error('Failed to fetch GitHub stats:', error);
+      console.error('Error generating comprehensive stats:', error);
       throw error;
     }
   }
 
-  clearCache(): void {
-    this._cache.clear();
+  /**
+   * Fetch authenticated user and rate limit info
+   */
+  async fetchUser(
+    token: string,
+    tokenType: 'classic' | 'fine-grained' = 'classic',
+  ): Promise<{ user: GitHubUserResponse; rateLimit: any }> {
+    this.configure({ token, tokenType });
+
+    const [user, rateLimit] = await Promise.all([
+      this.getAuthenticatedUser(),
+      this._makeRequestInternal('/rate_limit'),
+    ]);
+
+    return { user, rateLimit };
   }
 
-  clearUserCache(token: string): void {
-    const keyPrefix = token.slice(0, 8);
-    this._cache.delete(`user:${keyPrefix}`);
-    this._cache.delete(`repos:${keyPrefix}`);
+  /**
+   * Fetch comprehensive GitHub stats for authenticated user
+   */
+  async fetchStats(token: string, tokenType: 'classic' | 'fine-grained' = 'classic'): Promise<GitHubStats> {
+    this.configure({ token, tokenType });
+
+    const user = await this.getAuthenticatedUser();
+
+    return this.generateComprehensiveStats(user);
+  }
+
+  /**
+   * Clear all cached data
+   */
+  clearCache(): void {
+    // This is a placeholder - implement caching if needed
+  }
+
+  /**
+   * Clear user-specific cache
+   */
+  clearUserCache(_token: string): void {
+    // This is a placeholder - implement user-specific caching if needed
   }
 }
 
-export const gitHubApiService = new GitHubApiService();
+// Export an instance of the service
+export const gitHubApiService = new GitHubApiServiceClass();
diff --git a/app/lib/services/gitlabApiService.ts b/app/lib/services/gitlabApiService.ts
index 05cd205..1c9fd3b 100644
--- a/app/lib/services/gitlabApiService.ts
+++ b/app/lib/services/gitlabApiService.ts
@@ -103,6 +103,13 @@ export class GitLabApiService {
   }
 
   private get _headers() {
+    // Log token format for debugging
+    console.log('GitLab API token info:', {
+      tokenLength: this._token.length,
+      tokenPrefix: this._token.substring(0, 10) + '...',
+      tokenType: this._token.startsWith('glpat-') ? 'personal-access-token' : 'unknown',
+    });
+
     return {
       'Content-Type': 'application/json',
       'PRIVATE-TOKEN': this._token,
@@ -124,7 +131,32 @@ export class GitLabApiService {
     const response = await this._request('/user');
 
     if (!response.ok) {
-      throw new Error(`Failed to fetch user: ${response.status}`);
+      let errorMessage = `Failed to fetch user: ${response.status}`;
+
+      // Provide more specific error messages based on status code
+      if (response.status === 401) {
+        errorMessage =
+          '401 Unauthorized: Invalid or expired GitLab access token. Please check your token and ensure it has the required scopes (api, read_repository).';
+      } else if (response.status === 403) {
+        errorMessage = '403 Forbidden: GitLab access token does not have sufficient permissions.';
+      } else if (response.status === 404) {
+        errorMessage = '404 Not Found: GitLab API endpoint not found. Please check your GitLab URL configuration.';
+      } else if (response.status === 429) {
+        errorMessage = '429 Too Many Requests: GitLab API rate limit exceeded. Please try again later.';
+      }
+
+      // Try to get more details from response body
+      try {
+        const errorData = (await response.json()) as any;
+
+        if (errorData.message) {
+          errorMessage += ` Details: ${errorData.message}`;
+        }
+      } catch {
+        // If we can't parse the error response, continue with the default message
+      }
+
+      throw new Error(errorMessage);
     }
 
     const user: GitLabUserResponse = await response.json();
@@ -163,7 +195,16 @@ export class GitLabApiService {
       );
 
       if (!response.ok) {
-        throw new Error(`Failed to fetch projects: ${response.statusText}`);
+        let errorMessage = `Failed to fetch projects: ${response.status} ${response.statusText}`;
+
+        try {
+          const errorData = await response.json();
+          console.error('GitLab projects API error:', errorData);
+          errorMessage = `Failed to fetch projects: ${JSON.stringify(errorData)}`;
+        } catch (parseError) {
+          console.error('Could not parse GitLab error response:', parseError);
+        }
+        throw new Error(errorMessage);
       }
 
       const projects: any[] = await response.json();
@@ -240,18 +281,47 @@ export class GitLabApiService {
   }
 
   async createProject(name: string, isPrivate: boolean = false): Promise<GitLabProjectResponse> {
+    // Sanitize project name to ensure it's valid for GitLab
+    const sanitizedName = name
+      .replace(/[^a-zA-Z0-9-_.]/g, '-') // Replace invalid chars with hyphens
+      .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
+      .replace(/^-|-$/g, '') // Remove leading/trailing hyphens
+      .toLowerCase();
+
     const response = await this._request('/projects', {
       method: 'POST',
       body: JSON.stringify({
-        name,
+        name: sanitizedName,
+        path: sanitizedName, // Explicitly set path to match name
         visibility: isPrivate ? 'private' : 'public',
         initialize_with_readme: false, // Don't initialize with README to avoid conflicts
         default_branch: 'main', // Explicitly set default branch
+        description: `Project created from Bolt.diy`,
       }),
     });
 
     if (!response.ok) {
-      throw new Error(`Failed to create project: ${response.statusText}`);
+      let errorMessage = `Failed to create project: ${response.status} ${response.statusText}`;
+
+      try {
+        const errorData = (await response.json()) as any;
+
+        if (errorData.message) {
+          if (typeof errorData.message === 'object') {
+            // Handle validation errors
+            const messages = Object.entries(errorData.message as Record<string, any>)
+              .map(([key, value]) => `${key}: ${Array.isArray(value) ? value.join(', ') : value}`)
+              .join('; ');
+            errorMessage = `Failed to create project: ${messages}`;
+          } else {
+            errorMessage = `Failed to create project: ${errorData.message}`;
+          }
+        }
+      } catch (parseError) {
+        console.error('Could not parse error response:', parseError);
+      }
+
+      throw new Error(errorMessage);
     }
 
     return await response.json();
@@ -316,19 +386,24 @@ export class GitLabApiService {
 
   async getProjectByPath(projectPath: string): Promise<GitLabProjectResponse | null> {
     try {
-      const response = await this._request(`/projects/${encodeURIComponent(projectPath)}`);
+      // Double encode the project path as GitLab API requires it
+      const encodedPath = encodeURIComponent(projectPath);
+      const response = await this._request(`/projects/${encodedPath}`);
 
       if (response.ok) {
         return await response.json();
       }
 
       if (response.status === 404) {
+        console.log(`Project not found: ${projectPath}`);
         return null;
       }
 
+      const errorText = await response.text();
+      console.error(`Failed to fetch project ${projectPath}:`, response.status, errorText);
       throw new Error(`Failed to fetch project: ${response.status} ${response.statusText}`);
     } catch (error) {
-      if (error instanceof Error && error.message.includes('404')) {
+      if (error instanceof Error && (error.message.includes('404') || error.message.includes('Not Found'))) {
         return null;
       }
 
@@ -357,6 +432,9 @@ export class GitLabApiService {
 
     // If we have files to commit, commit them
     if (Object.keys(files).length > 0) {
+      // Wait a moment for the project to be fully created
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
       const actions = Object.entries(files).map(([filePath, content]) => ({
         action: 'create' as const,
         file_path: filePath,
@@ -369,7 +447,16 @@ export class GitLabApiService {
         actions,
       };
 
-      await this.commitFiles(project.id, commitRequest);
+      try {
+        await this.commitFiles(project.id, commitRequest);
+      } catch (error) {
+        console.error('Failed to commit files to new project:', error);
+
+        /*
+         * Don't throw the error, as the project was created successfully
+         * The user can still access it and add files manually
+         */
+      }
     }
 
     return project;
diff --git a/app/lib/stores/github.ts b/app/lib/stores/github.ts
new file mode 100644
index 0000000..19e15d5
--- /dev/null
+++ b/app/lib/stores/github.ts
@@ -0,0 +1,136 @@
+import { atom } from 'nanostores';
+import type { GitHubConnection } from '~/types/GitHub';
+import { logStore } from './logs';
+
+// Initialize with stored connection or defaults
+const storedConnection = typeof window !== 'undefined' ? localStorage.getItem('github_connection') : null;
+const initialConnection: GitHubConnection = storedConnection
+  ? JSON.parse(storedConnection)
+  : {
+      user: null,
+      token: '',
+      tokenType: 'classic',
+    };
+
+export const githubConnection = atom<GitHubConnection>(initialConnection);
+export const isConnecting = atom<boolean>(false);
+export const isFetchingStats = atom<boolean>(false);
+
+// Function to initialize GitHub connection via server-side API
+export async function initializeGitHubConnection() {
+  const currentState = githubConnection.get();
+
+  // If we already have a connection, don't override it
+  if (currentState.user) {
+    return;
+  }
+
+  try {
+    isConnecting.set(true);
+
+    const response = await fetch('/api/github-user');
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        // No server-side token available, skip initialization
+        return;
+      }
+
+      throw new Error(`Failed to connect to GitHub: ${response.statusText}`);
+    }
+
+    const userData = await response.json();
+
+    // Update the connection state (no token stored client-side)
+    const connectionData: Partial<GitHubConnection> = {
+      user: userData as any,
+      token: '', // Token stored server-side only
+      tokenType: 'classic',
+    };
+
+    // Store in localStorage for persistence
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('github_connection', JSON.stringify(connectionData));
+    }
+
+    // Update the store
+    updateGitHubConnection(connectionData);
+
+    // Fetch initial stats
+    await fetchGitHubStatsViaAPI();
+
+    logStore.logSystem('GitHub connection initialized successfully');
+  } catch (error) {
+    console.error('Error initializing GitHub connection:', error);
+    logStore.logError('Failed to initialize GitHub connection', { error });
+  } finally {
+    isConnecting.set(false);
+  }
+}
+
+// Function to fetch GitHub stats via server-side API
+export async function fetchGitHubStatsViaAPI() {
+  try {
+    isFetchingStats.set(true);
+
+    const response = await fetch('/api/github-user', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ action: 'get_repos' }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch repositories: ${response.status}`);
+    }
+
+    const data = (await response.json()) as { repos: any[] };
+    const repos = data.repos || [];
+
+    const currentState = githubConnection.get();
+    updateGitHubConnection({
+      ...currentState,
+      stats: {
+        repos,
+        recentActivity: [],
+        languages: {},
+        totalGists: 0,
+        publicRepos: repos.filter((r: any) => !r.private).length,
+        privateRepos: repos.filter((r: any) => r.private).length,
+        stars: repos.reduce((sum: number, r: any) => sum + (r.stargazers_count || 0), 0),
+        forks: repos.reduce((sum: number, r: any) => sum + (r.forks_count || 0), 0),
+        totalStars: repos.reduce((sum: number, r: any) => sum + (r.stargazers_count || 0), 0),
+        totalForks: repos.reduce((sum: number, r: any) => sum + (r.forks_count || 0), 0),
+        followers: 0,
+        publicGists: 0,
+        privateGists: 0,
+        lastUpdated: new Date().toISOString(),
+        organizations: [],
+        totalBranches: 0,
+        totalContributors: 0,
+        totalIssues: 0,
+        totalPullRequests: 0,
+        mostUsedLanguages: [],
+      },
+    });
+
+    logStore.logSystem('GitHub stats fetched successfully');
+  } catch (error) {
+    console.error('GitHub API Error:', error);
+    logStore.logError('Failed to fetch GitHub stats', { error });
+  } finally {
+    isFetchingStats.set(false);
+  }
+}
+
+export const updateGitHubConnection = (updates: Partial<GitHubConnection>) => {
+  const currentState = githubConnection.get();
+  const newState = { ...currentState, ...updates };
+  githubConnection.set(newState);
+
+  // Persist to localStorage
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('github_connection', JSON.stringify(newState));
+  }
+};
diff --git a/app/lib/stores/gitlabConnection.ts b/app/lib/stores/gitlabConnection.ts
index fc56f90..a997007 100644
--- a/app/lib/stores/gitlabConnection.ts
+++ b/app/lib/stores/gitlabConnection.ts
@@ -224,7 +224,8 @@ class GitLabConnectionStore {
 
   // Auto-connect using environment token
   async autoConnect() {
-    if (!envToken) {
+    // Check if token exists and is not empty
+    if (!envToken || envToken.trim() === '') {
       return { success: false, error: 'No GitLab token found in environment' };
     }
 
@@ -266,14 +267,21 @@ class GitLabConnectionStore {
     } catch (error) {
       console.error('Failed to auto-connect to GitLab:', error);
 
-      logStore.logError(`GitLab auto-connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`, {
+      // Log more detailed error information
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      console.error('GitLab auto-connect error details:', {
+        token: envToken.substring(0, 10) + '...', // Log first 10 chars for debugging
+        error: errorMessage,
+      });
+
+      logStore.logError(`GitLab auto-connection failed: ${errorMessage}`, {
         type: 'system',
         message: 'GitLab auto-connection failed',
       });
 
       return {
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: errorMessage,
       };
     }
   }
diff --git a/app/lib/stores/supabase.ts b/app/lib/stores/supabase.ts
index 7254091..fbee139 100644
--- a/app/lib/stores/supabase.ts
+++ b/app/lib/stores/supabase.ts
@@ -14,6 +14,31 @@ export interface SupabaseProject {
     release_channel: string;
   };
   created_at: string;
+  stats?: {
+    database?: {
+      tables: number;
+      size: string;
+      size_mb?: number;
+      views?: number;
+      functions?: number;
+    };
+    storage?: {
+      objects: number;
+      size: string;
+      buckets?: number;
+      files?: number;
+      used_gb?: number;
+      available_gb?: number;
+    };
+    functions?: {
+      count: number;
+      deployed?: number;
+      invocations?: number;
+    };
+    auth?: {
+      users: number;
+    };
+  };
 }
 
 export interface SupabaseConnectionState {
@@ -111,6 +136,16 @@ export function updateSupabaseConnection(connection: Partial<SupabaseConnectionS
   }
 }
 
+export function initializeSupabaseConnection() {
+  // Auto-connect using environment variable if available
+  const envToken = import.meta.env?.VITE_SUPABASE_ACCESS_TOKEN;
+
+  if (envToken && !supabaseConnection.get().token) {
+    updateSupabaseConnection({ token: envToken });
+    fetchSupabaseStats(envToken).catch(console.error);
+  }
+}
+
 export async function fetchSupabaseStats(token: string) {
   isFetchingStats.set(true);
 
diff --git a/app/lib/stores/vercel.ts b/app/lib/stores/vercel.ts
index ed5ed38..7ea5cde 100644
--- a/app/lib/stores/vercel.ts
+++ b/app/lib/stores/vercel.ts
@@ -129,6 +129,18 @@ export async function autoConnectVercel() {
   }
 }
 
+export function initializeVercelConnection() {
+  // Auto-connect using environment variable if available
+  const envToken = import.meta.env?.VITE_VERCEL_ACCESS_TOKEN;
+
+  if (envToken && !vercelConnection.get().token) {
+    updateVercelConnection({ token: envToken });
+    fetchVercelStats(envToken).catch(console.error);
+  }
+}
+
+export const fetchVercelStatsViaAPI = fetchVercelStats;
+
 export async function fetchVercelStats(token: string) {
   try {
     isFetchingStats.set(true);
diff --git a/app/lib/utils/serviceErrorHandler.ts b/app/lib/utils/serviceErrorHandler.ts
new file mode 100644
index 0000000..44cb6ab
--- /dev/null
+++ b/app/lib/utils/serviceErrorHandler.ts
@@ -0,0 +1,7 @@
+export interface ServiceError {
+  code?: string;
+  message: string;
+  details?: any;
+  service: string;
+  operation: string;
+}
diff --git a/app/routes/api.github-branches.ts b/app/routes/api.github-branches.ts
new file mode 100644
index 0000000..a78ba07
--- /dev/null
+++ b/app/routes/api.github-branches.ts
@@ -0,0 +1,166 @@
+import { json } from '@remix-run/cloudflare';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
+import { withSecurity } from '~/lib/security';
+
+interface GitHubBranch {
+  name: string;
+  commit: {
+    sha: string;
+    url: string;
+  };
+  protected: boolean;
+}
+
+interface BranchInfo {
+  name: string;
+  sha: string;
+  protected: boolean;
+  isDefault: boolean;
+}
+
+async function githubBranchesLoader({ request, context }: { request: Request; context: any }) {
+  try {
+    let owner: string;
+    let repo: string;
+    let githubToken: string;
+
+    if (request.method === 'POST') {
+      // Handle POST request with token in body (from BranchSelector)
+      const body: any = await request.json();
+      owner = body.owner;
+      repo = body.repo;
+      githubToken = body.token;
+
+      if (!owner || !repo) {
+        return json({ error: 'Owner and repo parameters are required' }, { status: 400 });
+      }
+
+      if (!githubToken) {
+        return json({ error: 'GitHub token is required' }, { status: 400 });
+      }
+    } else {
+      // Handle GET request with params and cookie token (backwards compatibility)
+      const url = new URL(request.url);
+      owner = url.searchParams.get('owner') || '';
+      repo = url.searchParams.get('repo') || '';
+
+      if (!owner || !repo) {
+        return json({ error: 'Owner and repo parameters are required' }, { status: 400 });
+      }
+
+      // Get API keys from cookies (server-side only)
+      const cookieHeader = request.headers.get('Cookie');
+      const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+      // Try to get GitHub token from various sources
+      githubToken =
+        apiKeys.GITHUB_API_KEY ||
+        apiKeys.VITE_GITHUB_ACCESS_TOKEN ||
+        context?.cloudflare?.env?.GITHUB_TOKEN ||
+        context?.cloudflare?.env?.VITE_GITHUB_ACCESS_TOKEN ||
+        process.env.GITHUB_TOKEN ||
+        process.env.VITE_GITHUB_ACCESS_TOKEN ||
+        '';
+    }
+
+    if (!githubToken) {
+      return json({ error: 'GitHub token not found' }, { status: 401 });
+    }
+
+    // First, get repository info to know the default branch
+    const repoResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `Bearer ${githubToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!repoResponse.ok) {
+      if (repoResponse.status === 404) {
+        return json({ error: 'Repository not found' }, { status: 404 });
+      }
+
+      if (repoResponse.status === 401) {
+        return json({ error: 'Invalid GitHub token' }, { status: 401 });
+      }
+
+      throw new Error(`GitHub API error: ${repoResponse.status}`);
+    }
+
+    const repoInfo: any = await repoResponse.json();
+    const defaultBranch = repoInfo.default_branch;
+
+    // Fetch branches
+    const branchesResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/branches?per_page=100`, {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `Bearer ${githubToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!branchesResponse.ok) {
+      throw new Error(`Failed to fetch branches: ${branchesResponse.status}`);
+    }
+
+    const branches: GitHubBranch[] = await branchesResponse.json();
+
+    // Transform to our format
+    const transformedBranches: BranchInfo[] = branches.map((branch) => ({
+      name: branch.name,
+      sha: branch.commit.sha,
+      protected: branch.protected,
+      isDefault: branch.name === defaultBranch,
+    }));
+
+    // Sort branches with default branch first, then alphabetically
+    transformedBranches.sort((a, b) => {
+      if (a.isDefault) {
+        return -1;
+      }
+
+      if (b.isDefault) {
+        return 1;
+      }
+
+      return a.name.localeCompare(b.name);
+    });
+
+    return json({
+      branches: transformedBranches,
+      defaultBranch,
+      total: transformedBranches.length,
+    });
+  } catch (error) {
+    console.error('Failed to fetch GitHub branches:', error);
+
+    if (error instanceof Error) {
+      if (error.message.includes('fetch')) {
+        return json(
+          {
+            error: 'Failed to connect to GitHub. Please check your network connection.',
+          },
+          { status: 503 },
+        );
+      }
+
+      return json(
+        {
+          error: `Failed to fetch branches: ${error.message}`,
+        },
+        { status: 500 },
+      );
+    }
+
+    return json(
+      {
+        error: 'An unexpected error occurred while fetching branches',
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const loader = withSecurity(githubBranchesLoader);
+export const action = withSecurity(githubBranchesLoader);
diff --git a/app/routes/api.github-stats.ts b/app/routes/api.github-stats.ts
new file mode 100644
index 0000000..42f7499
--- /dev/null
+++ b/app/routes/api.github-stats.ts
@@ -0,0 +1,198 @@
+import { json } from '@remix-run/cloudflare';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
+import { withSecurity } from '~/lib/security';
+import type { GitHubUserResponse, GitHubStats } from '~/types/GitHub';
+
+async function githubStatsLoader({ request, context }: { request: Request; context: any }) {
+  try {
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get GitHub token from various sources
+    const githubToken =
+      apiKeys.GITHUB_API_KEY ||
+      apiKeys.VITE_GITHUB_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.GITHUB_TOKEN ||
+      context?.cloudflare?.env?.VITE_GITHUB_ACCESS_TOKEN ||
+      process.env.GITHUB_TOKEN ||
+      process.env.VITE_GITHUB_ACCESS_TOKEN;
+
+    if (!githubToken) {
+      return json({ error: 'GitHub token not found' }, { status: 401 });
+    }
+
+    // Get user info first
+    const userResponse = await fetch('https://api.github.com/user', {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `Bearer ${githubToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!userResponse.ok) {
+      if (userResponse.status === 401) {
+        return json({ error: 'Invalid GitHub token' }, { status: 401 });
+      }
+
+      throw new Error(`GitHub API error: ${userResponse.status}`);
+    }
+
+    const user = (await userResponse.json()) as GitHubUserResponse;
+
+    // Fetch repositories with pagination
+    let allRepos: any[] = [];
+    let page = 1;
+    let hasMore = true;
+
+    while (hasMore) {
+      const repoResponse = await fetch(
+        `https://api.github.com/user/repos?sort=updated&per_page=100&page=${page}&affiliation=owner,organization_member`,
+        {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${githubToken}`,
+            'User-Agent': 'bolt.diy-app',
+          },
+        },
+      );
+
+      if (!repoResponse.ok) {
+        throw new Error(`GitHub API error: ${repoResponse.status}`);
+      }
+
+      const repos: any[] = await repoResponse.json();
+      allRepos = allRepos.concat(repos);
+
+      if (repos.length < 100) {
+        hasMore = false;
+      } else {
+        page += 1;
+      }
+    }
+
+    // Fetch branch counts for repositories (limit to first 50 repos to avoid rate limits)
+    const reposWithBranches = await Promise.allSettled(
+      allRepos.slice(0, 50).map(async (repo) => {
+        try {
+          const branchesResponse = await fetch(`https://api.github.com/repos/${repo.full_name}/branches?per_page=1`, {
+            headers: {
+              Accept: 'application/vnd.github.v3+json',
+              Authorization: `Bearer ${githubToken}`,
+              'User-Agent': 'bolt.diy-app',
+            },
+          });
+
+          if (branchesResponse.ok) {
+            const linkHeader = branchesResponse.headers.get('Link');
+            let branchesCount = 1; // At least 1 branch (default)
+
+            if (linkHeader) {
+              const match = linkHeader.match(/page=(\d+)>; rel="last"/);
+
+              if (match) {
+                branchesCount = parseInt(match[1], 10);
+              }
+            }
+
+            return {
+              ...repo,
+              branches_count: branchesCount,
+            };
+          }
+
+          return repo;
+        } catch (error) {
+          console.warn(`Failed to fetch branches for ${repo.full_name}:`, error);
+          return repo;
+        }
+      }),
+    );
+
+    // Update repositories with branch information where available
+    allRepos = allRepos.map((repo, index) => {
+      if (index < reposWithBranches.length && reposWithBranches[index].status === 'fulfilled') {
+        return reposWithBranches[index].value;
+      }
+
+      return repo;
+    });
+
+    // Calculate comprehensive stats
+    const now = new Date();
+    const publicRepos = allRepos.filter((repo) => !repo.private).length;
+    const privateRepos = allRepos.filter((repo) => repo.private).length;
+
+    // Language statistics
+    const languageStats = new Map<string, number>();
+    allRepos.forEach((repo) => {
+      if (repo.language) {
+        languageStats.set(repo.language, (languageStats.get(repo.language) || 0) + 1);
+      }
+    });
+
+    // Activity stats
+    const totalStars = allRepos.reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
+    const totalForks = allRepos.reduce((sum, repo) => sum + (repo.forks_count || 0), 0);
+
+    // Recent activity (repos updated in last 30 days)
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+    // Popular repositories (top 10 by stars)
+
+    const stats: GitHubStats = {
+      repos: allRepos.map((repo) => ({
+        id: repo.id,
+        name: repo.name,
+        full_name: repo.full_name,
+        html_url: repo.html_url,
+        clone_url: repo.clone_url || '',
+        description: repo.description,
+        private: repo.private,
+        language: repo.language,
+        updated_at: repo.updated_at,
+        stargazers_count: repo.stargazers_count || 0,
+        forks_count: repo.forks_count || 0,
+        watchers_count: repo.watchers_count || 0,
+        topics: repo.topics || [],
+        fork: repo.fork || false,
+        archived: repo.archived || false,
+        size: repo.size || 0,
+        default_branch: repo.default_branch || 'main',
+        languages_url: repo.languages_url || '',
+      })),
+      organizations: [],
+      recentActivity: [],
+      languages: {},
+      totalGists: user.public_gists || 0,
+      publicRepos,
+      privateRepos,
+      stars: totalStars,
+      forks: totalForks,
+      totalStars,
+      totalForks,
+      followers: user.followers || 0,
+      publicGists: user.public_gists || 0,
+      privateGists: 0, // GitHub API doesn't provide private gists count directly
+      lastUpdated: now.toISOString(),
+    };
+
+    return json(stats);
+  } catch (error) {
+    console.error('Error fetching GitHub stats:', error);
+    return json(
+      {
+        error: 'Failed to fetch GitHub statistics',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const loader = withSecurity(githubStatsLoader, {
+  rateLimit: true,
+  allowedMethods: ['GET'],
+});
diff --git a/app/routes/api.github-user.ts b/app/routes/api.github-user.ts
new file mode 100644
index 0000000..15c532a
--- /dev/null
+++ b/app/routes/api.github-user.ts
@@ -0,0 +1,287 @@
+import { json } from '@remix-run/cloudflare';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
+import { withSecurity } from '~/lib/security';
+
+async function githubUserLoader({ request, context }: { request: Request; context: any }) {
+  try {
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get GitHub token from various sources
+    const githubToken =
+      apiKeys.GITHUB_API_KEY ||
+      apiKeys.VITE_GITHUB_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.GITHUB_TOKEN ||
+      context?.cloudflare?.env?.VITE_GITHUB_ACCESS_TOKEN ||
+      process.env.GITHUB_TOKEN ||
+      process.env.VITE_GITHUB_ACCESS_TOKEN;
+
+    if (!githubToken) {
+      return json({ error: 'GitHub token not found' }, { status: 401 });
+    }
+
+    // Make server-side request to GitHub API
+    const response = await fetch('https://api.github.com/user', {
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `Bearer ${githubToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return json({ error: 'Invalid GitHub token' }, { status: 401 });
+      }
+
+      throw new Error(`GitHub API error: ${response.status}`);
+    }
+
+    const userData = (await response.json()) as {
+      login: string;
+      name: string | null;
+      avatar_url: string;
+      html_url: string;
+      type: string;
+    };
+
+    return json({
+      login: userData.login,
+      name: userData.name,
+      avatar_url: userData.avatar_url,
+      html_url: userData.html_url,
+      type: userData.type,
+    });
+  } catch (error) {
+    console.error('Error fetching GitHub user:', error);
+    return json(
+      {
+        error: 'Failed to fetch GitHub user information',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const loader = withSecurity(githubUserLoader, {
+  rateLimit: true,
+  allowedMethods: ['GET'],
+});
+
+async function githubUserAction({ request, context }: { request: Request; context: any }) {
+  try {
+    let action: string | null = null;
+    let repoFullName: string | null = null;
+    let searchQuery: string | null = null;
+    let perPage: number = 30;
+
+    // Handle both JSON and form data
+    const contentType = request.headers.get('Content-Type') || '';
+
+    if (contentType.includes('application/json')) {
+      const jsonData = (await request.json()) as any;
+      action = jsonData.action;
+      repoFullName = jsonData.repo;
+      searchQuery = jsonData.query;
+      perPage = jsonData.per_page || 30;
+    } else {
+      const formData = await request.formData();
+      action = formData.get('action') as string;
+      repoFullName = formData.get('repo') as string;
+      searchQuery = formData.get('query') as string;
+      perPage = parseInt(formData.get('per_page') as string) || 30;
+    }
+
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get GitHub token from various sources
+    const githubToken =
+      apiKeys.GITHUB_API_KEY ||
+      apiKeys.VITE_GITHUB_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.GITHUB_TOKEN ||
+      context?.cloudflare?.env?.VITE_GITHUB_ACCESS_TOKEN ||
+      process.env.GITHUB_TOKEN ||
+      process.env.VITE_GITHUB_ACCESS_TOKEN;
+
+    if (!githubToken) {
+      return json({ error: 'GitHub token not found' }, { status: 401 });
+    }
+
+    if (action === 'get_repos') {
+      // Fetch user repositories
+      const response = await fetch('https://api.github.com/user/repos?sort=updated&per_page=100', {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `Bearer ${githubToken}`,
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status}`);
+      }
+
+      const repos = (await response.json()) as Array<{
+        id: number;
+        name: string;
+        full_name: string;
+        html_url: string;
+        description: string | null;
+        private: boolean;
+        language: string | null;
+        updated_at: string;
+        stargazers_count: number;
+        forks_count: number;
+        topics: string[];
+      }>;
+
+      return json({
+        repos: repos.map((repo) => ({
+          id: repo.id,
+          name: repo.name,
+          full_name: repo.full_name,
+          html_url: repo.html_url,
+          description: repo.description,
+          private: repo.private,
+          language: repo.language,
+          updated_at: repo.updated_at,
+          stargazers_count: repo.stargazers_count || 0,
+          forks_count: repo.forks_count || 0,
+          topics: repo.topics || [],
+        })),
+      });
+    }
+
+    if (action === 'get_branches') {
+      if (!repoFullName) {
+        return json({ error: 'Repository name is required' }, { status: 400 });
+      }
+
+      // Fetch repository branches
+      const response = await fetch(`https://api.github.com/repos/${repoFullName}/branches`, {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `Bearer ${githubToken}`,
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status}`);
+      }
+
+      const branches = (await response.json()) as Array<{
+        name: string;
+        commit: {
+          sha: string;
+          url: string;
+        };
+        protected: boolean;
+      }>;
+
+      return json({
+        branches: branches.map((branch) => ({
+          name: branch.name,
+          commit: {
+            sha: branch.commit.sha,
+            url: branch.commit.url,
+          },
+          protected: branch.protected,
+        })),
+      });
+    }
+
+    if (action === 'get_token') {
+      // Return the GitHub token for git authentication
+      return json({
+        token: githubToken,
+      });
+    }
+
+    if (action === 'search_repos') {
+      if (!searchQuery) {
+        return json({ error: 'Search query is required' }, { status: 400 });
+      }
+
+      // Search repositories using GitHub API
+      const response = await fetch(
+        `https://api.github.com/search/repositories?q=${encodeURIComponent(searchQuery)}&per_page=${perPage}&sort=updated`,
+        {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${githubToken}`,
+            'User-Agent': 'bolt.diy-app',
+          },
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status}`);
+      }
+
+      const searchData = (await response.json()) as {
+        total_count: number;
+        incomplete_results: boolean;
+        items: Array<{
+          id: number;
+          name: string;
+          full_name: string;
+          html_url: string;
+          description: string | null;
+          private: boolean;
+          language: string | null;
+          updated_at: string;
+          stargazers_count: number;
+          forks_count: number;
+          topics: string[];
+          owner: {
+            login: string;
+            avatar_url: string;
+          };
+        }>;
+      };
+
+      return json({
+        repos: searchData.items.map((repo) => ({
+          id: repo.id,
+          name: repo.name,
+          full_name: repo.full_name,
+          html_url: repo.html_url,
+          description: repo.description,
+          private: repo.private,
+          language: repo.language,
+          updated_at: repo.updated_at,
+          stargazers_count: repo.stargazers_count || 0,
+          forks_count: repo.forks_count || 0,
+          topics: repo.topics || [],
+          owner: {
+            login: repo.owner.login,
+            avatar_url: repo.owner.avatar_url,
+          },
+        })),
+        total_count: searchData.total_count,
+        incomplete_results: searchData.incomplete_results,
+      });
+    }
+
+    return json({ error: 'Invalid action' }, { status: 400 });
+  } catch (error) {
+    console.error('Error in GitHub user action:', error);
+    return json(
+      {
+        error: 'Failed to process GitHub request',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const action = withSecurity(githubUserAction, {
+  rateLimit: true,
+  allowedMethods: ['POST'],
+});
diff --git a/app/routes/api.gitlab-branches.ts b/app/routes/api.gitlab-branches.ts
new file mode 100644
index 0000000..2187338
--- /dev/null
+++ b/app/routes/api.gitlab-branches.ts
@@ -0,0 +1,143 @@
+import { json } from '@remix-run/cloudflare';
+import { withSecurity } from '~/lib/security';
+
+interface GitLabBranch {
+  name: string;
+  commit: {
+    id: string;
+    short_id: string;
+  };
+  protected: boolean;
+  default: boolean;
+  can_push: boolean;
+}
+
+interface BranchInfo {
+  name: string;
+  sha: string;
+  protected: boolean;
+  isDefault: boolean;
+  canPush: boolean;
+}
+
+async function gitlabBranchesLoader({ request }: { request: Request }) {
+  try {
+    const body: any = await request.json();
+    const { token, gitlabUrl = 'https://gitlab.com', projectId } = body;
+
+    if (!token) {
+      return json({ error: 'GitLab token is required' }, { status: 400 });
+    }
+
+    if (!projectId) {
+      return json({ error: 'Project ID is required' }, { status: 400 });
+    }
+
+    // Fetch branches from GitLab API
+    const branchesUrl = `${gitlabUrl}/api/v4/projects/${projectId}/repository/branches?per_page=100`;
+
+    const response = await fetch(branchesUrl, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return json({ error: 'Invalid GitLab token' }, { status: 401 });
+      }
+
+      if (response.status === 404) {
+        return json({ error: 'Project not found or no access' }, { status: 404 });
+      }
+
+      const errorText = await response.text().catch(() => 'Unknown error');
+      console.error('GitLab API error:', response.status, errorText);
+
+      return json(
+        {
+          error: `GitLab API error: ${response.status}`,
+        },
+        { status: response.status },
+      );
+    }
+
+    const branches: GitLabBranch[] = await response.json();
+
+    // Also fetch project info to get default branch name
+    const projectUrl = `${gitlabUrl}/api/v4/projects/${projectId}`;
+    const projectResponse = await fetch(projectUrl, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    let defaultBranchName = 'main'; // fallback
+
+    if (projectResponse.ok) {
+      const projectInfo: any = await projectResponse.json();
+      defaultBranchName = projectInfo.default_branch || 'main';
+    }
+
+    // Transform to our format
+    const transformedBranches: BranchInfo[] = branches.map((branch) => ({
+      name: branch.name,
+      sha: branch.commit.id,
+      protected: branch.protected,
+      isDefault: branch.name === defaultBranchName,
+      canPush: branch.can_push,
+    }));
+
+    // Sort branches with default branch first, then alphabetically
+    transformedBranches.sort((a, b) => {
+      if (a.isDefault) {
+        return -1;
+      }
+
+      if (b.isDefault) {
+        return 1;
+      }
+
+      return a.name.localeCompare(b.name);
+    });
+
+    return json({
+      branches: transformedBranches,
+      defaultBranch: defaultBranchName,
+      total: transformedBranches.length,
+    });
+  } catch (error) {
+    console.error('Failed to fetch GitLab branches:', error);
+
+    if (error instanceof Error) {
+      if (error.message.includes('fetch')) {
+        return json(
+          {
+            error: 'Failed to connect to GitLab. Please check your network connection.',
+          },
+          { status: 503 },
+        );
+      }
+
+      return json(
+        {
+          error: `Failed to fetch branches: ${error.message}`,
+        },
+        { status: 500 },
+      );
+    }
+
+    return json(
+      {
+        error: 'An unexpected error occurred while fetching branches',
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const action = withSecurity(gitlabBranchesLoader);
diff --git a/app/routes/api.gitlab-projects.ts b/app/routes/api.gitlab-projects.ts
new file mode 100644
index 0000000..8b8858b
--- /dev/null
+++ b/app/routes/api.gitlab-projects.ts
@@ -0,0 +1,105 @@
+import { json } from '@remix-run/cloudflare';
+import { withSecurity } from '~/lib/security';
+import type { GitLabProjectInfo } from '~/types/GitLab';
+
+interface GitLabProject {
+  id: number;
+  name: string;
+  path_with_namespace: string;
+  description: string;
+  web_url: string;
+  http_url_to_repo: string;
+  star_count: number;
+  forks_count: number;
+  updated_at: string;
+  default_branch: string;
+  visibility: string;
+}
+
+async function gitlabProjectsLoader({ request }: { request: Request }) {
+  try {
+    const body: any = await request.json();
+    const { token, gitlabUrl = 'https://gitlab.com' } = body;
+
+    if (!token) {
+      return json({ error: 'GitLab token is required' }, { status: 400 });
+    }
+
+    // Fetch user's projects from GitLab API
+    const url = `${gitlabUrl}/api/v4/projects?membership=true&per_page=100&order_by=updated_at&sort=desc`;
+
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return json({ error: 'Invalid GitLab token' }, { status: 401 });
+      }
+
+      const errorText = await response.text().catch(() => 'Unknown error');
+      console.error('GitLab API error:', response.status, errorText);
+
+      return json(
+        {
+          error: `GitLab API error: ${response.status}`,
+        },
+        { status: response.status },
+      );
+    }
+
+    const projects: GitLabProject[] = await response.json();
+
+    // Transform to our GitLabProjectInfo format
+    const transformedProjects: GitLabProjectInfo[] = projects.map((project) => ({
+      id: project.id,
+      name: project.name,
+      path_with_namespace: project.path_with_namespace,
+      description: project.description || '',
+      http_url_to_repo: project.http_url_to_repo,
+      star_count: project.star_count,
+      forks_count: project.forks_count,
+      updated_at: project.updated_at,
+      default_branch: project.default_branch,
+      visibility: project.visibility,
+    }));
+
+    return json({
+      projects: transformedProjects,
+      total: transformedProjects.length,
+    });
+  } catch (error) {
+    console.error('Failed to fetch GitLab projects:', error);
+
+    if (error instanceof Error) {
+      if (error.message.includes('fetch')) {
+        return json(
+          {
+            error: 'Failed to connect to GitLab. Please check your network connection.',
+          },
+          { status: 503 },
+        );
+      }
+
+      return json(
+        {
+          error: `Failed to fetch projects: ${error.message}`,
+        },
+        { status: 500 },
+      );
+    }
+
+    return json(
+      {
+        error: 'An unexpected error occurred while fetching projects',
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const action = withSecurity(gitlabProjectsLoader);
diff --git a/app/routes/api.netlify-user.ts b/app/routes/api.netlify-user.ts
new file mode 100644
index 0000000..68a1c3b
--- /dev/null
+++ b/app/routes/api.netlify-user.ts
@@ -0,0 +1,142 @@
+import { json } from '@remix-run/cloudflare';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
+import { withSecurity } from '~/lib/security';
+
+async function netlifyUserLoader({ request, context }: { request: Request; context: any }) {
+  try {
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get Netlify token from various sources
+    const netlifyToken =
+      apiKeys.VITE_NETLIFY_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.VITE_NETLIFY_ACCESS_TOKEN ||
+      process.env.VITE_NETLIFY_ACCESS_TOKEN;
+
+    if (!netlifyToken) {
+      return json({ error: 'Netlify token not found' }, { status: 401 });
+    }
+
+    // Make server-side request to Netlify API
+    const response = await fetch('https://api.netlify.com/api/v1/user', {
+      headers: {
+        Authorization: `Bearer ${netlifyToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return json({ error: 'Invalid Netlify token' }, { status: 401 });
+      }
+
+      throw new Error(`Netlify API error: ${response.status}`);
+    }
+
+    const userData = (await response.json()) as {
+      id: string;
+      name: string | null;
+      email: string;
+      avatar_url: string | null;
+      full_name: string | null;
+    };
+
+    return json({
+      id: userData.id,
+      name: userData.name,
+      email: userData.email,
+      avatar_url: userData.avatar_url,
+      full_name: userData.full_name,
+    });
+  } catch (error) {
+    console.error('Error fetching Netlify user:', error);
+    return json(
+      {
+        error: 'Failed to fetch Netlify user information',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const loader = withSecurity(netlifyUserLoader, {
+  rateLimit: true,
+  allowedMethods: ['GET'],
+});
+
+async function netlifyUserAction({ request, context }: { request: Request; context: any }) {
+  try {
+    const formData = await request.formData();
+    const action = formData.get('action');
+
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get Netlify token from various sources
+    const netlifyToken =
+      apiKeys.VITE_NETLIFY_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.VITE_NETLIFY_ACCESS_TOKEN ||
+      process.env.VITE_NETLIFY_ACCESS_TOKEN;
+
+    if (!netlifyToken) {
+      return json({ error: 'Netlify token not found' }, { status: 401 });
+    }
+
+    if (action === 'get_sites') {
+      // Fetch user sites
+      const response = await fetch('https://api.netlify.com/api/v1/sites', {
+        headers: {
+          Authorization: `Bearer ${netlifyToken}`,
+          'Content-Type': 'application/json',
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Netlify API error: ${response.status}`);
+      }
+
+      const sites = (await response.json()) as Array<{
+        id: string;
+        name: string;
+        url: string;
+        admin_url: string;
+        build_settings: any;
+        created_at: string;
+        updated_at: string;
+      }>;
+
+      return json({
+        sites: sites.map((site) => ({
+          id: site.id,
+          name: site.name,
+          url: site.url,
+          admin_url: site.admin_url,
+          build_settings: site.build_settings,
+          created_at: site.created_at,
+          updated_at: site.updated_at,
+        })),
+        totalSites: sites.length,
+      });
+    }
+
+    return json({ error: 'Invalid action' }, { status: 400 });
+  } catch (error) {
+    console.error('Error in Netlify user action:', error);
+    return json(
+      {
+        error: 'Failed to process Netlify request',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const action = withSecurity(netlifyUserAction, {
+  rateLimit: true,
+  allowedMethods: ['POST'],
+});
diff --git a/app/routes/api.supabase-user.ts b/app/routes/api.supabase-user.ts
new file mode 100644
index 0000000..bee64c3
--- /dev/null
+++ b/app/routes/api.supabase-user.ts
@@ -0,0 +1,199 @@
+import { json } from '@remix-run/cloudflare';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
+import { withSecurity } from '~/lib/security';
+
+async function supabaseUserLoader({ request, context }: { request: Request; context: any }) {
+  try {
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get Supabase token from various sources
+    const supabaseToken =
+      apiKeys.VITE_SUPABASE_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.VITE_SUPABASE_ACCESS_TOKEN ||
+      process.env.VITE_SUPABASE_ACCESS_TOKEN;
+
+    if (!supabaseToken) {
+      return json({ error: 'Supabase token not found' }, { status: 401 });
+    }
+
+    // Make server-side request to Supabase API
+    const response = await fetch('https://api.supabase.com/v1/projects', {
+      headers: {
+        Authorization: `Bearer ${supabaseToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return json({ error: 'Invalid Supabase token' }, { status: 401 });
+      }
+
+      throw new Error(`Supabase API error: ${response.status}`);
+    }
+
+    const projects = (await response.json()) as Array<{
+      id: string;
+      name: string;
+      region: string;
+      status: string;
+      organization_id: string;
+      created_at: string;
+    }>;
+
+    // Get user info from the first project (all projects belong to the same user)
+    const user =
+      projects.length > 0
+        ? {
+            id: projects[0].organization_id,
+            name: 'Supabase User', // Supabase doesn't provide user name in this endpoint
+            email: 'user@supabase.co', // Placeholder
+          }
+        : null;
+
+    return json({
+      user,
+      projects: projects.map((project) => ({
+        id: project.id,
+        name: project.name,
+        region: project.region,
+        status: project.status,
+        organization_id: project.organization_id,
+        created_at: project.created_at,
+      })),
+    });
+  } catch (error) {
+    console.error('Error fetching Supabase user:', error);
+    return json(
+      {
+        error: 'Failed to fetch Supabase user information',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const loader = withSecurity(supabaseUserLoader, {
+  rateLimit: true,
+  allowedMethods: ['GET'],
+});
+
+async function supabaseUserAction({ request, context }: { request: Request; context: any }) {
+  try {
+    const formData = await request.formData();
+    const action = formData.get('action');
+
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get Supabase token from various sources
+    const supabaseToken =
+      apiKeys.VITE_SUPABASE_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.VITE_SUPABASE_ACCESS_TOKEN ||
+      process.env.VITE_SUPABASE_ACCESS_TOKEN;
+
+    if (!supabaseToken) {
+      return json({ error: 'Supabase token not found' }, { status: 401 });
+    }
+
+    if (action === 'get_projects') {
+      // Fetch user projects
+      const response = await fetch('https://api.supabase.com/v1/projects', {
+        headers: {
+          Authorization: `Bearer ${supabaseToken}`,
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Supabase API error: ${response.status}`);
+      }
+
+      const projects = (await response.json()) as Array<{
+        id: string;
+        name: string;
+        region: string;
+        status: string;
+        organization_id: string;
+        created_at: string;
+      }>;
+
+      // Get user info from the first project
+      const user =
+        projects.length > 0
+          ? {
+              id: projects[0].organization_id,
+              name: 'Supabase User',
+              email: 'user@supabase.co',
+            }
+          : null;
+
+      return json({
+        user,
+        stats: {
+          projects: projects.map((project) => ({
+            id: project.id,
+            name: project.name,
+            region: project.region,
+            status: project.status,
+            organization_id: project.organization_id,
+            created_at: project.created_at,
+          })),
+          totalProjects: projects.length,
+        },
+      });
+    }
+
+    if (action === 'get_api_keys') {
+      const projectId = formData.get('projectId');
+
+      if (!projectId) {
+        return json({ error: 'Project ID is required' }, { status: 400 });
+      }
+
+      // Fetch project API keys
+      const response = await fetch(`https://api.supabase.com/v1/projects/${projectId}/api-keys`, {
+        headers: {
+          Authorization: `Bearer ${supabaseToken}`,
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Supabase API error: ${response.status}`);
+      }
+
+      const apiKeys = (await response.json()) as Array<{
+        name: string;
+        api_key: string;
+      }>;
+
+      return json({
+        apiKeys: apiKeys.map((key) => ({
+          name: key.name,
+          api_key: key.api_key,
+        })),
+      });
+    }
+
+    return json({ error: 'Invalid action' }, { status: 400 });
+  } catch (error) {
+    console.error('Error in Supabase user action:', error);
+    return json(
+      {
+        error: 'Failed to process Supabase request',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const action = withSecurity(supabaseUserAction, {
+  rateLimit: true,
+  allowedMethods: ['POST'],
+});
diff --git a/app/routes/api.vercel-user.ts b/app/routes/api.vercel-user.ts
new file mode 100644
index 0000000..f804631
--- /dev/null
+++ b/app/routes/api.vercel-user.ts
@@ -0,0 +1,161 @@
+import { json } from '@remix-run/cloudflare';
+import { getApiKeysFromCookie } from '~/lib/api/cookies';
+import { withSecurity } from '~/lib/security';
+
+async function vercelUserLoader({ request, context }: { request: Request; context: any }) {
+  try {
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get Vercel token from various sources
+    let vercelToken =
+      apiKeys.VITE_VERCEL_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.VITE_VERCEL_ACCESS_TOKEN ||
+      process.env.VITE_VERCEL_ACCESS_TOKEN;
+
+    // Also check for token in request headers (for direct API calls)
+    if (!vercelToken) {
+      const authHeader = request.headers.get('Authorization');
+
+      if (authHeader && authHeader.startsWith('Bearer ')) {
+        vercelToken = authHeader.substring(7);
+      }
+    }
+
+    if (!vercelToken) {
+      return json({ error: 'Vercel token not found' }, { status: 401 });
+    }
+
+    // Make server-side request to Vercel API
+    const response = await fetch('https://api.vercel.com/v2/user', {
+      headers: {
+        Authorization: `Bearer ${vercelToken}`,
+        'User-Agent': 'bolt.diy-app',
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return json({ error: 'Invalid Vercel token' }, { status: 401 });
+      }
+
+      throw new Error(`Vercel API error: ${response.status}`);
+    }
+
+    const userData = (await response.json()) as {
+      user: {
+        id: string;
+        name: string | null;
+        email: string;
+        avatar: string | null;
+        username: string;
+      };
+    };
+
+    return json({
+      id: userData.user.id,
+      name: userData.user.name,
+      email: userData.user.email,
+      avatar: userData.user.avatar,
+      username: userData.user.username,
+    });
+  } catch (error) {
+    console.error('Error fetching Vercel user:', error);
+    return json(
+      {
+        error: 'Failed to fetch Vercel user information',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const loader = withSecurity(vercelUserLoader, {
+  rateLimit: true,
+  allowedMethods: ['GET'],
+});
+
+async function vercelUserAction({ request, context }: { request: Request; context: any }) {
+  try {
+    const formData = await request.formData();
+    const action = formData.get('action');
+
+    // Get API keys from cookies (server-side only)
+    const cookieHeader = request.headers.get('Cookie');
+    const apiKeys = getApiKeysFromCookie(cookieHeader);
+
+    // Try to get Vercel token from various sources
+    let vercelToken =
+      apiKeys.VITE_VERCEL_ACCESS_TOKEN ||
+      context?.cloudflare?.env?.VITE_VERCEL_ACCESS_TOKEN ||
+      process.env.VITE_VERCEL_ACCESS_TOKEN;
+
+    // Also check for token in request headers (for direct API calls)
+    if (!vercelToken) {
+      const authHeader = request.headers.get('Authorization');
+
+      if (authHeader && authHeader.startsWith('Bearer ')) {
+        vercelToken = authHeader.substring(7);
+      }
+    }
+
+    if (!vercelToken) {
+      return json({ error: 'Vercel token not found' }, { status: 401 });
+    }
+
+    if (action === 'get_projects') {
+      // Fetch user projects
+      const response = await fetch('https://api.vercel.com/v13/projects', {
+        headers: {
+          Authorization: `Bearer ${vercelToken}`,
+          'User-Agent': 'bolt.diy-app',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Vercel API error: ${response.status}`);
+      }
+
+      const data = (await response.json()) as {
+        projects: Array<{
+          id: string;
+          name: string;
+          framework: string | null;
+          public: boolean;
+          createdAt: string;
+          updatedAt: string;
+        }>;
+      };
+
+      return json({
+        projects: data.projects.map((project) => ({
+          id: project.id,
+          name: project.name,
+          framework: project.framework,
+          public: project.public,
+          createdAt: project.createdAt,
+          updatedAt: project.updatedAt,
+        })),
+        totalProjects: data.projects.length,
+      });
+    }
+
+    return json({ error: 'Invalid action' }, { status: 400 });
+  } catch (error) {
+    console.error('Error in Vercel user action:', error);
+    return json(
+      {
+        error: 'Failed to process Vercel request',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export const action = withSecurity(vercelUserAction, {
+  rateLimit: true,
+  allowedMethods: ['POST'],
+});
diff --git a/app/types/GitHub.ts b/app/types/GitHub.ts
index 9f4e96b..4e0d8f3 100644
--- a/app/types/GitHub.ts
+++ b/app/types/GitHub.ts
@@ -40,6 +40,17 @@ export interface GitHubRepoInfo {
   languages_url: string;
   private?: boolean;
   topics?: string[];
+  archived?: boolean;
+  fork?: boolean;
+  size?: number;
+  contributors_count?: number;
+  branches_count?: number;
+  issues_count?: number;
+  pull_requests_count?: number;
+  license?: {
+    name: string;
+    spdx_id: string;
+  };
 }
 
 export interface GitHubContent {
@@ -74,9 +85,12 @@ export interface GitHubBlobResponse {
 
 export interface GitHubOrganization {
   login: string;
+  name?: string;
   avatar_url: string;
   description: string;
   html_url: string;
+  public_repos?: number;
+  followers?: number;
 }
 
 export interface GitHubEvent {
@@ -115,6 +129,15 @@ export interface GitHubStats {
   publicGists: number;
   privateGists: number;
   lastUpdated: string;
+  totalBranches?: number;
+  totalContributors?: number;
+  totalIssues?: number;
+  totalPullRequests?: number;
+  mostUsedLanguages?: Array<{
+    language: string;
+    bytes: number;
+    repos: number;
+  }>;
 }
 
 export interface GitHubConnection {
diff --git a/app/types/netlify.ts b/app/types/netlify.ts
index b587751..45e06a7 100644
--- a/app/types/netlify.ts
+++ b/app/types/netlify.ts
@@ -74,6 +74,8 @@ export interface NetlifyStats {
   deploys?: NetlifyDeploy[];
   builds?: NetlifyBuild[];
   lastDeployTime?: string;
+  totalDeploys?: number;
+  totalBuilds?: number;
 }
 
 export interface NetlifyConnection {
diff --git a/app/types/supabase.ts b/app/types/supabase.ts
index f99bbaf..5b8c370 100644
--- a/app/types/supabase.ts
+++ b/app/types/supabase.ts
@@ -13,6 +13,29 @@ export interface SupabaseProject {
   region: string;
   created_at: string;
   status: string;
+  stats?: {
+    database?: {
+      tables: number;
+      size: string;
+      size_mb?: number;
+    };
+    storage?: {
+      objects: number;
+      size: string;
+      buckets?: number;
+      files?: number;
+      used_gb?: number;
+      available_gb?: number;
+    };
+    functions?: {
+      count: number;
+      deployed?: number;
+      invocations?: number;
+    };
+    auth?: {
+      users: number;
+    };
+  };
 }
 
 export interface SupabaseStats {
diff --git a/app/types/vercel.ts b/app/types/vercel.ts
index 5a7d8db..45831b1 100644
--- a/app/types/vercel.ts
+++ b/app/types/vercel.ts
@@ -1,15 +1,40 @@
+export interface VercelUserResponse {
+  user?: {
+    id: string;
+    username: string;
+    email: string;
+    name: string;
+    avatar?: string;
+  };
+  id?: string;
+  username?: string;
+  email?: string;
+  name?: string;
+  avatar?: string;
+}
+
 export interface VercelUser {
-  user: any;
   id: string;
   username: string;
   email: string;
   name: string;
   avatar?: string;
+  user?: {
+    id: string;
+    username: string;
+    email: string;
+    name: string;
+    avatar?: string;
+  };
 }
 
 export interface VercelProject {
   createdAt: string | number | Date;
-  targets: any;
+  targets?: {
+    production?: {
+      alias?: string[];
+    };
+  };
   id: string;
   name: string;
   framework?: string;
@@ -17,7 +42,7 @@ export interface VercelProject {
     id: string;
     url: string;
     created: number;
-    state: string;
+    state: 'READY' | 'ERROR' | 'BUILDING' | 'CANCELED';
   }>;
 }
 
diff --git a/app/utils/classNames.ts b/app/utils/classNames.ts
index 0622c33..03cfd19 100644
--- a/app/utils/classNames.ts
+++ b/app/utils/classNames.ts
@@ -5,7 +5,7 @@
  * @link http://jedwatson.github.io/classnames
  */
 
-type ClassNamesArg = undefined | string | Record<string, boolean> | ClassNamesArg[];
+type ClassNamesArg = undefined | null | string | number | boolean | Record<string, boolean> | ClassNamesArg[];
 
 /**
  * A simple JavaScript utility for conditionally joining classNames together.
@@ -24,12 +24,16 @@ export function classNames(...args: ClassNamesArg[]): string {
   return classes;
 }
 
-function parseValue(arg: ClassNamesArg) {
-  if (typeof arg === 'string' || typeof arg === 'number') {
+function parseValue(arg: ClassNamesArg): string {
+  if (typeof arg === 'string') {
     return arg;
   }
 
-  if (typeof arg !== 'object') {
+  if (typeof arg === 'number') {
+    return String(arg);
+  }
+
+  if (typeof arg !== 'object' || arg === null) {
     return '';
   }
 
diff --git a/app/utils/cn.ts b/app/utils/cn.ts
deleted file mode 100644
index 9ad0df4..0000000
--- a/app/utils/cn.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/app/utils/githubStats.ts b/app/utils/githubStats.ts
index 6eff80d..3871730 100644
--- a/app/utils/githubStats.ts
+++ b/app/utils/githubStats.ts
@@ -1,167 +1,9 @@
-import type { GitHubStats, GitHubLanguageStats } from '~/types/GitHub';
-
-export interface GitHubStatsSummary {
-  totalRepositories: number;
-  totalStars: number;
-  totalForks: number;
-  publicRepositories: number;
-  privateRepositories: number;
-  followers: number;
-  publicGists: number;
-  topLanguages: Array<{ name: string; count: number; percentage: number }>;
-  recentActivityCount: number;
-  lastUpdated?: string;
-}
-
-export function calculateStatsSummary(stats: GitHubStats): GitHubStatsSummary {
-  // Calculate total repositories
-  const totalRepositories = stats.repos?.length || stats.publicRepos || 0;
-
-  // Calculate language statistics
-  const topLanguages = calculateTopLanguages(stats.languages || {});
+import type { GitHubStats } from '~/types/GitHub';
 
+export function calculateStatsSummary(stats: GitHubStats): GitHubStats {
   return {
-    totalRepositories,
-    totalStars: stats.totalStars || stats.stars || 0,
-    totalForks: stats.totalForks || stats.forks || 0,
-    publicRepositories: stats.publicRepos || 0,
-    privateRepositories: stats.privateRepos || 0,
-    followers: stats.followers || 0,
-    publicGists: stats.totalGists || stats.publicGists || 0,
-    topLanguages,
-    recentActivityCount: stats.recentActivity?.length || 0,
-    lastUpdated: stats.lastUpdated,
-  };
-}
-
-export function calculateTopLanguages(languages: GitHubLanguageStats): Array<{
-  name: string;
-  count: number;
-  percentage: number;
-}> {
-  if (!languages || Object.keys(languages).length === 0) {
-    return [];
-  }
-
-  const totalCount = Object.values(languages).reduce((sum, count) => sum + count, 0);
-
-  if (totalCount === 0) {
-    return [];
-  }
-
-  return Object.entries(languages)
-    .map(([name, count]) => ({
-      name,
-      count,
-      percentage: Math.round((count / totalCount) * 100),
-    }))
-    .sort((a, b) => b.count - a.count)
-    .slice(0, 10); // Top 10 languages
-}
-
-export function formatRepositoryStats(stats: GitHubStats) {
-  const repositories = stats.repos || [];
-
-  // Sort repositories by stars (descending)
-  const topStarredRepos = repositories
-    .filter((repo) => repo.stargazers_count > 0)
-    .sort((a, b) => b.stargazers_count - a.stargazers_count)
-    .slice(0, 5);
-
-  // Sort repositories by forks (descending)
-  const topForkedRepos = repositories
-    .filter((repo) => repo.forks_count > 0)
-    .sort((a, b) => b.forks_count - a.forks_count)
-    .slice(0, 5);
-
-  // Recent repositories (by update date)
-  const recentRepos = repositories
-    .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-    .slice(0, 10);
-
-  return {
-    total: repositories.length,
-    topStarredRepos,
-    topForkedRepos,
-    recentRepos,
-    totalStars: repositories.reduce((sum, repo) => sum + repo.stargazers_count, 0),
-    totalForks: repositories.reduce((sum, repo) => sum + repo.forks_count, 0),
-  };
-}
-
-export function formatActivitySummary(stats: GitHubStats) {
-  const activity = stats.recentActivity || [];
-
-  // Group activities by type
-  const activityByType = activity.reduce(
-    (acc, event) => {
-      acc[event.type] = (acc[event.type] || 0) + 1;
-      return acc;
-    },
-    {} as Record<string, number>,
-  );
-
-  // Format activity types for display
-  const formattedActivity = Object.entries(activityByType)
-    .map(([type, count]) => ({
-      type: formatActivityType(type),
-      count,
-    }))
-    .sort((a, b) => b.count - a.count);
-
-  return {
-    total: activity.length,
-    byType: formattedActivity,
-    recent: activity.slice(0, 5),
-  };
-}
-
-function formatActivityType(type: string): string {
-  const typeMap: Record<string, string> = {
-    PushEvent: 'Pushes',
-    CreateEvent: 'Created',
-    DeleteEvent: 'Deleted',
-    ForkEvent: 'Forks',
-    WatchEvent: 'Stars',
-    IssuesEvent: 'Issues',
-    PullRequestEvent: 'Pull Requests',
-    ReleaseEvent: 'Releases',
-    PublicEvent: 'Made Public',
-  };
-
-  return typeMap[type] || type.replace('Event', '');
-}
-
-export function calculateGrowthMetrics(currentStats: GitHubStats, previousStats?: GitHubStats) {
-  if (!previousStats) {
-    return null;
-  }
-
-  const starsDiff = (currentStats.totalStars || 0) - (previousStats.totalStars || 0);
-  const forksDiff = (currentStats.totalForks || 0) - (previousStats.totalForks || 0);
-  const followersDiff = (currentStats.followers || 0) - (previousStats.followers || 0);
-  const reposDiff = (currentStats.repos?.length || 0) - (previousStats.repos?.length || 0);
-
-  return {
-    stars: {
-      current: currentStats.totalStars || 0,
-      change: starsDiff,
-      percentage: previousStats.totalStars ? Math.round((starsDiff / previousStats.totalStars) * 100) : 0,
-    },
-    forks: {
-      current: currentStats.totalForks || 0,
-      change: forksDiff,
-      percentage: previousStats.totalForks ? Math.round((forksDiff / previousStats.totalForks) * 100) : 0,
-    },
-    followers: {
-      current: currentStats.followers || 0,
-      change: followersDiff,
-      percentage: previousStats.followers ? Math.round((followersDiff / previousStats.followers) * 100) : 0,
-    },
-    repositories: {
-      current: currentStats.repos?.length || 0,
-      change: reposDiff,
-      percentage: previousStats.repos?.length ? Math.round((reposDiff / previousStats.repos.length) * 100) : 0,
-    },
+    ...stats,
+
+    // Add any calculated fields that might be missing
   };
 }
diff --git a/app/utils/projectCommands.ts b/app/utils/projectCommands.ts
index f3a9f8b..916e9e3 100644
--- a/app/utils/projectCommands.ts
+++ b/app/utils/projectCommands.ts
@@ -13,8 +13,35 @@ interface FileContent {
   path: string;
 }
 
+// Helper function to make any command non-interactive
+function makeNonInteractive(command: string): string {
+  // Set environment variables for non-interactive mode
+  const envVars = 'export CI=true DEBIAN_FRONTEND=noninteractive FORCE_COLOR=0';
+
+  // Common interactive packages and their non-interactive flags
+  const interactivePackages = [
+    { pattern: /npx\s+([^@\s]+@?[^\s]*)\s+init/g, replacement: 'echo "y" | npx --yes $1 init --defaults --yes' },
+    { pattern: /npx\s+create-([^\s]+)/g, replacement: 'npx --yes create-$1 --template default' },
+    { pattern: /npx\s+([^@\s]+@?[^\s]*)\s+add/g, replacement: 'npx --yes $1 add --defaults --yes' },
+    { pattern: /npm\s+install(?!\s+--)/g, replacement: 'npm install --yes --no-audit --no-fund --silent' },
+    { pattern: /yarn\s+add(?!\s+--)/g, replacement: 'yarn add --non-interactive' },
+    { pattern: /pnpm\s+add(?!\s+--)/g, replacement: 'pnpm add --yes' },
+  ];
+
+  let processedCommand = command;
+
+  // Apply replacements for known interactive patterns
+  interactivePackages.forEach(({ pattern, replacement }) => {
+    processedCommand = processedCommand.replace(pattern, replacement);
+  });
+
+  return `${envVars} && ${processedCommand}`;
+}
+
 export async function detectProjectCommands(files: FileContent[]): Promise<ProjectCommands> {
   const hasFile = (name: string) => files.some((f) => f.path.endsWith(name));
+  const hasFileContent = (name: string, content: string) =>
+    files.some((f) => f.path.endsWith(name) && f.content.includes(content));
 
   if (hasFile('package.json')) {
     const packageJsonFile = files.find((f) => f.path.endsWith('package.json'));
@@ -26,15 +53,32 @@ export async function detectProjectCommands(files: FileContent[]): Promise<Proje
     try {
       const packageJson = JSON.parse(packageJsonFile.content);
       const scripts = packageJson?.scripts || {};
+      const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+
+      // Check if this is a shadcn project
+      const isShadcnProject =
+        hasFileContent('components.json', 'shadcn') ||
+        Object.keys(dependencies).some((dep) => dep.includes('shadcn')) ||
+        hasFile('components.json');
 
       // Check for preferred commands in priority order
       const preferredCommands = ['dev', 'start', 'preview'];
       const availableCommand = preferredCommands.find((cmd) => scripts[cmd]);
 
+      // Build setup command with non-interactive handling
+      let baseSetupCommand = 'npx update-browserslist-db@latest && npm install';
+
+      // Add shadcn init if it's a shadcn project
+      if (isShadcnProject) {
+        baseSetupCommand += ' && npx shadcn@latest init';
+      }
+
+      const setupCommand = makeNonInteractive(baseSetupCommand);
+
       if (availableCommand) {
         return {
           type: 'Node.js',
-          setupCommand: `npm install`,
+          setupCommand,
           startCommand: `npm run ${availableCommand}`,
           followupMessage: `Found "${availableCommand}" script in package.json. Running "npm run ${availableCommand}" after installation.`,
         };
@@ -42,7 +86,7 @@ export async function detectProjectCommands(files: FileContent[]): Promise<Proje
 
       return {
         type: 'Node.js',
-        setupCommand: 'npm install',
+        setupCommand,
         followupMessage:
           'Would you like me to inspect package.json to determine the available scripts for running this project?',
       };
diff --git a/app/utils/types.ts b/app/utils/types.ts
deleted file mode 100644
index 5f8bc39..0000000
--- a/app/utils/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-interface OllamaModelDetails {
-  parent_model: string;
-  format: string;
-  family: string;
-  families: string[];
-  parameter_size: string;
-  quantization_level: string;
-}
-
-export interface OllamaModel {
-  name: string;
-  model: string;
-  modified_at: string;
-  size: number;
-  digest: string;
-  details: OllamaModelDetails;
-}
-
-export interface OllamaApiResponse {
-  models: OllamaModel[];
-}
diff --git a/tests/preview/smoke.spec.ts b/tests/preview/smoke.spec.ts
deleted file mode 100644
index 5b5b5c6..0000000
--- a/tests/preview/smoke.spec.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// @ts-ignore - Playwright is only installed for testing environments
-import { test, expect } from '@playwright/test';
-
-/**
- * Basic smoke tests for preview deployments
- * These tests ensure the deployed preview is working correctly
- */
-
-test.describe('Preview Deployment Smoke Tests', () => {
-  test('homepage loads successfully', async ({ page }: any) => {
-    await page.goto('/');
-    
-    // Check that the page loads
-    await expect(page).toHaveTitle(/bolt\.diy/);
-    
-    // Check for key elements
-    await expect(page.locator('body')).toBeVisible();
-    
-    // Verify no console errors
-    const errors: string[] = [];
-    page.on('console', (msg: any) => {
-      if (msg.type() === 'error') {
-        errors.push(msg.text());
-      }
-    });
-    
-    await page.waitForLoadState('networkidle');
-    
-    // Allow some minor errors but fail on critical ones
-    const criticalErrors = errors.filter(error => 
-      !error.includes('favicon') && 
-      !error.includes('manifest')
-    );
-    
-    expect(criticalErrors).toHaveLength(0);
-  });
-
-  test('basic navigation works', async ({ page }: any) => {
-    await page.goto('/');
-    
-    // Wait for the page to be interactive
-    await page.waitForLoadState('domcontentloaded');
-    
-    // Check if we can interact with basic elements
-    const body = page.locator('body');
-    await expect(body).toBeVisible();
-    
-    // Verify no JavaScript runtime errors
-    let jsErrors = 0;
-    page.on('pageerror', () => {
-      jsErrors++;
-    });
-    
-    // Wait a bit for any async operations
-    await page.waitForTimeout(2000);
-    
-    expect(jsErrors).toBeLessThan(3); // Allow minor errors but not major failures
-  });
-
-  test('essential resources load', async ({ page }: any) => {
-    const responses: { url: string; status: number }[] = [];
-    
-    page.on('response', (response: any) => {
-      responses.push({
-        url: response.url(),
-        status: response.status()
-      });
-    });
-    
-    await page.goto('/');
-    await page.waitForLoadState('networkidle');
-    
-    // Check that we don't have too many 404s or 500s
-    const failedRequests = responses.filter(r => r.status >= 400);
-    const criticalFailures = failedRequests.filter(r => 
-      !r.url.includes('favicon') && 
-      !r.url.includes('manifest') &&
-      !r.url.includes('sw.js') // service worker is optional
-    );
-    
-    expect(criticalFailures.length).toBeLessThan(5);
-  });
-});
\ No newline at end of file