feat: comprehensive service integration refactor with enhanced tabs architecture

.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,110 +145,65 @@ 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
+
 # ======================================
-# DEVELOPMENT SETTINGS
+# NETLIFY INTEGRATION
 # ======================================
 
-# Development Mode
-NODE_ENV=development
-
-# Application Port (optional, defaults to 3000)
-PORT=3000
-
-# Logging Level (debug, info, warn, error)
-VITE_LOG_LEVEL=debug
-
-# Default Context Window Size (for local models)
-DEFAULT_NUM_CTX=32768
+# 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
 
 # ======================================
-# INSTRUCTIONS
+# SUPABASE INTEGRATION
 # ======================================
-# 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
+# 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
 
-# GitLab token type should be 'personal-access-token'
-VITE_GITLAB_TOKEN_TYPE=personal-access-token
+# Supabase Access Token (for management operations)
+# Generate from: https://supabase.com/dashboard/account/tokens
+VITE_SUPABASE_ACCESS_TOKEN=your_supabase_access_token_here
 
 # ======================================
-# GITLAB INTEGRATION
+# DEVELOPMENT SETTINGS
 # ======================================
 
-# 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=
+# Development Mode
+NODE_ENV=development
 
-# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
-VITE_GITLAB_URL=https://gitlab.com
+# Application Port (optional, defaults to 5173 for development)
+PORT=5173
 
-# GitLab token type should be 'personal-access-token'
-VITE_GITLAB_TOKEN_TYPE=personal-access-token
+# Logging Level (debug, info, warn, error)
+VITE_LOG_LEVEL=debug
 
+# Default Context Window Size (for local models)
+DEFAULT_NUM_CTX=32768
 
 # ======================================
-# GITLAB INTEGRATION
+# SETUP INSTRUCTIONS
 # ======================================
-
-# 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
+# 1. Copy this file to .env.local: cp .env.example .env.local
+# 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

.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

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;
     }