-
- {showControls && !tab.locked && (
-
-
-
-
-
- {TAB_LABELS[tab.id]}
- {showControls && (
-
- Order: {tab.order}, Window: {tab.window}
-
- )}
-
-
- )}
-
- onVisibilityChange?.(tab, checked)}
- className="data-[state=checked]:bg-purple-500"
- aria-label={`Toggle ${TAB_LABELS[tab.id]} visibility`}
- />
-
-
-
-
- onWindowChange?.(tab, checked ? 'developer' : 'user')}
- className="data-[state=checked]:bg-purple-500"
- aria-label={`Toggle ${TAB_LABELS[tab.id]} window assignment`}
- />
-
-
-
- {tabs.map((tab, index) => (
-
- );
-};
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
+ {!isConnected ? (
+
+
+ {environmentVariable && (
+
+ ) : (
+
+
+ )}
+
+
+
+
+ Tip: You can also set the{' '}
+
+ {environmentVariable}
+ {' '}
+ environment variable to connect automatically.
+
+
+ )}
+
+
+
+
+ {connectedMessage}
+
+
+
+ {testResult.status === 'success' && (
+
+ )}
+ {testResult.status === 'error' && (
+
+ )}
+ {testResult.status === 'testing' && (
+
+ )}
+
+ {testResult.message}
+
+
+ {testResult.timestamp && (
+ {new Date(testResult.timestamp).toLocaleString()}
+ )} +
+
+
+
+
+ {title}
+{errorMessage}
+ + {showDetails && isServiceError && error.details && ( +
+
+ )}
+
+ + Technical details +
+
+ {JSON.stringify(error.details, null, 2)}
+
+
+ {onRetry && (
+
+ )}
+ {onDismiss && (
+
+ )}
+
+
+
+ {message}
+
+
+ {showProgress && (
+
+
+ )}
+
+
+
+ {Array.from({ length: lines }, (_, i) => (
+
+
+
+ {description && (
+
-
-
-
-
-
-
-
- );
-}
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 (
-
-
- );
-}
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 = () => (
+
+);
+
+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(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 (
+
+
+ );
+}
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 (
+
+
+
+
+
+
+
+
+ );
+}
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([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [lastClearTime, setLastClearTime] = useState(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 (
+
+
+ );
+}
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 {
+ 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 (
+ ('updated');
+ const [filterBy, setFilterBy] = useState('all');
+ const [currentPage, setCurrentPage] = useState(1);
+ const [selectedRepo, setSelectedRepo] = useState(null);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+ const [isBranchSelectorOpen, setIsBranchSelectorOpen] = useState(false);
+ const [error, setError] = useState(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 (
+
+ {/* Header with stats */}
+
+ );
+}
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 (
+
+
+ );
+}
+
+function GitHubStatsContent({
+ stats,
+ isLoading,
+ isRefreshing,
+ refreshStats,
+ isStale,
+ isExpanded,
+ onToggleExpanded,
+}: {
+ stats: GitHubStatsType | null;
+ isLoading: boolean;
+ isRefreshing: boolean;
+ refreshStats: () => Promise;
+ isStale: boolean;
+ isExpanded: boolean;
+ onToggleExpanded: (expanded: boolean) => void;
+}) {
+ if (!stats) {
+ return (
+
+ {/* Repository Health Indicator */}
+ {variant === 'detailed' && (
+
+ )}
+
+
+ );
+}
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 = () => (
+
+);
+
+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(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 (
+ !open && onClose()}>
+
+
+
+ );
+}
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 (
+
+
+ );
+}
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([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [sortBy, setSortBy] = useState('updated');
+ const [filterBy, setFilterBy] = useState('all');
+ const [currentPage, setCurrentPage] = useState(1);
+ const [error, setError] = useState(null);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+ const [selectedRepo, setSelectedRepo] = useState(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 (
+
+ {/* Header with stats */}
+
+ );
+}
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;
+ requiresConfirmation?: boolean;
+ variant?: 'default' | 'destructive' | 'outline';
+}
+
+// Netlify logo SVG component
+const NetlifyLogo = () => (
+
+);
+
+export default function NetlifyTab() {
+ const connection = useStore(netlifyConnection);
+ const [tokenInput, setTokenInput] = useState('');
+ const [fetchingStats, setFetchingStats] = useState(false);
+ const [sites, setSites] = useState([]);
+ const [deploys, setDeploys] = useState([]);
+ 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(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 (
+ ('dashboard');
- const [editingProvider, setEditingProvider] = useState(null);
- const [ollamaModels, setOllamaModels] = useState([]);
- const [lmStudioModels, setLMStudioModels] = useState([]);
- 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 (
-
- setViewMode('dashboard')} />
-
- );
- }
-
- if (viewMode === 'status') {
- return (
-
- setViewMode('dashboard')} />
-
- );
- }
-
- return (
-
-
- );
-}
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;
+ requiresConfirmation?: boolean;
+ variant?: 'default' | 'destructive' | 'outline';
+}
+
+// Supabase logo SVG component
+const SupabaseLogo = () => (
+
+);
+
+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(null);
+ const [isProjectActionLoading, setIsProjectActionLoading] = useState(false);
+ const [selectedProjectId, setSelectedProjectId] = useState('');
+
+ // 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 (
+
+
+
+
+
+
+ );
+ };
+
+ return (
+ ;
+ requiresConfirmation?: boolean;
+ variant?: 'default' | 'destructive' | 'outline';
+}
+
+// Vercel logo SVG component
+const VercelLogo = () => (
+
+);
+
+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 (
+
+
+
+
+
+
+ );
+ }, [
+ connection.stats,
+ fetchingStats,
+ isProjectsExpanded,
+ isProjectActionLoading,
+ handleProjectAction,
+ projectActions,
+ ]);
+
+ console.log('connection', connection);
+
+ return (
+
1 ? 'w-3/4' : 'w-full',
+ )}
+ />
+ ))}
+
+ );
+}
+
+interface ServiceLoadingProps {
+ serviceName: string;
+ operation: string;
+ progress?: number;
+}
+
+export function ServiceLoading({ serviceName, operation, progress }: ServiceLoadingProps) {
+ return (
+
+
+ + {title} +
+
+ {additionalInfo}
+ {onTestConnection && (
+
+ )}
+
+ + {description} +
+ )} + + ); + }, +); 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 = () => ( -
-
-);
-
-export default function ConnectionsTab() {
- return (
-
-
- Loading connection...
-
-
- {/* Header */}
-
-
-
-
- );
-}
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 (
- - Connection Settings -
-- Manage your external service connections and integrations -
- -
-
-
- {/* Additional help text */}
-
-
- - - Troubleshooting Tip: -
-- If you're having trouble with connections, here are some troubleshooting tips to help resolve common issues. -
-For persistent issues:
--
-
- Check your browser console for errors -
- Verify that your tokens have the correct permissions -
- Try clearing your browser cache and cookies -
- Ensure your browser allows third-party cookies if using integrations -
-
- Connect to GitHub
-
-
-
-
-
- {/* Header */}
-
-
- )}
-
- {/* Stats Section */}
- {isConnected && connection.stats && (
-
-
-
-
-
-
- )}
-
- {/* Repositories Section */}
- {isConnected && connection.stats?.repos && connection.stats.repos.length > 0 && (
-
-
-
-
-
-
- )}
-
- {/* Auth Dialog */}
- setIsAuthDialogOpen(false)} />
-
- );
-}
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 (
-
-
-
-
- {/* Connection Status */}
-
-
-
-
-
-
-
-
- GitHub
-- {isConnected - ? `Connected as ${connection.user?.login}` - : 'Connect your GitHub account to manage repositories'} -
-
- {isConnected ? (
- <>
-
-
-
- ) : (
-
- )}
-
-
-
-
- {/* User Profile */}
- {isConnected && connection.user && (
-
-
-
- {isConnected ? 'Connected' : 'Not Connected'}
-
-
- {connection.rateLimit && (
-
- Rate limit: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
-
- )}
-
-
- {/* Token Type Selection */}
- {isConnected && (
-
-
-
- )}
-
- {(['classic', 'fine-grained'] as const).map((type) => (
-
- ))}
-
-
- 
-
-
-
- - {connection.user.name || connection.user.login} -
-@{connection.user.login}
- {connection.user.bio && ( -{connection.user.bio}
- )} -
-
-
- {connection.user.public_repos?.toLocaleString() || 0}
-
- repositories
-
-
-
-
- GitHub Stats
-
-
-
-
-
-
-
-
-
- Repositories ({connection.stats.repos.length})
-
-
-
-
-
-
-
-
- );
-}
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 (
-
-
-
- {repo.description && (
-
-
-
- - {repo.name} -
- {repo.private && ( - - Private - - )} -
-
-
- {repo.stargazers_count.toLocaleString()}
-
-
-
- {repo.forks_count.toLocaleString()}
-
-
- {repo.description}
- )} - - {repo.topics && repo.topics.length > 0 && ( -
- {repo.topics.slice(0, 3).map((topic) => (
-
- {topic}
-
- ))}
- {repo.topics.length > 3 && (
-
- +{repo.topics.length - 3}
-
- )}
-
- )}
-
-
- {repo.language && (
-
-
- {repo.language}
-
- )}
-
-
- {repo.default_branch}
-
-
-
- {new Date(repo.updated_at).toLocaleDateString(undefined, {
- year: 'numeric',
- month: 'short',
- day: 'numeric',
- })}
-
-
-
- {onClone && (
-
- )}
-
-
- View
-
-
-
-
- );
-}
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 (
-
-
-
- {/* Search Input */}
- - Repositories ({filteredRepositories.length}) -
- {onRefresh && ( - - )} -
- 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"
- />
-
-
- {/* Repository Grid */}
-
- {isSearching ? (
-
- ) : (
-
- )}
-
-
- {filteredRepositories.length === 0 ? (
-
-
- {searchQuery ? 'No repositories found matching your search.' : 'No repositories available.'}
-
- ) : (
- <>
-
- {currentRepositories.map((repo) => (
-
-
- {/* Pagination Controls */}
- {totalPages > 1 && (
-
-
- )}
-
- )}
-
- Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
- {Math.min(endIndex, filteredRepositories.length)} of {filteredRepositories.length} repositories
-
-
-
-
- {currentPage} of {totalPages}
-
-
-
-
- {/* Repository Stats */}
-
- );
-}
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 (
-
-
-
- {/* Contribution Stats */}
- Repository Stats
-
- {[
- {
- label: 'Public Repos',
- value: stats.publicRepos || 0,
- },
- {
- label: 'Private Repos',
- value: stats.privateRepos || 0,
- },
- ].map((stat, index) => (
-
-
- {stat.label}
- {stat.value.toLocaleString()}
-
- ))}
-
-
-
- {/* Gist Stats */}
- Contribution Stats
-
- {[
- {
- 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) => (
-
-
- {stat.label}
-
-
- {stat.value.toLocaleString()}
-
-
- ))}
-
-
-
- {/* Top Languages */}
- {topLanguages.length > 0 && (
- Gist Stats
-
- {[
- {
- 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) => (
-
-
- {stat.label}
-
-
- {stat.value.toLocaleString()}
-
-
- ))}
-
-
- )}
-
- {/* Recent Activity */}
- {stats.recentActivity && stats.recentActivity.length > 0 && (
- Top Languages
-
- {topLanguages.map(([language, count]) => (
-
-
- {language}
- {count} repositories
-
- ))}
-
-
- )}
-
- Recent Activity
-
- {stats.recentActivity.slice(0, 3).map((activity) => (
-
-
-
-
- {activity.type.replace('Event', '')} in {activity.repo.name}
-
-
- {new Date(activity.created_at).toLocaleDateString()}
-
-
- ))}
-
-
-
-
- Last updated: {new Date(stats.lastUpdated).toLocaleString()}
-
- {onRefresh && (
-
- )}
-
-
-
- );
- }
-
- return (
-
-
- Loading...
-
-
-
-
-
-
- {!isConnected && (
-
-
-
-
-
- GitLab Connection
-
-
- )}
-
-
-
- Tip: You can also set the{' '}
- VITE_GITLAB_ACCESS_TOKEN{' '}
- environment variable to connect automatically.
-
- For self-hosted GitLab instances, also set{' '}
-
- VITE_GITLAB_URL=https://your-gitlab-instance.com
-
-
-
-
-
-
- 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',
- )}
- />
-
-
-
-
- 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',
- )}
- />
-
-
-
- {!isConnected ? (
-
- ) : (
- <>
-
-
- {isConnected.get() && userAtom.get() && stats.get() && (
-
-
-
- )}
-
-
-
-
- Connected to GitLab
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
- {userAtom.get()?.avatar_url &&
- userAtom.get()?.avatar_url !== 'null' &&
- userAtom.get()?.avatar_url !== '' ? (
- ?.avatar_url})
{
- // 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',
- );
- }
- }}
- />
- ) : (
-
-
- {(userAtom.get()?.name || userAtom.get()?.username || 'U').charAt(0).toUpperCase()}
-
- )}
-
-
- - {userAtom.get()?.name || userAtom.get()?.username} -
-{userAtom.get()?.username}
-
-
-
-
- GitLab Stats
-
-
-
- {
- const result = await fetchStats();
-
- if (result.success) {
- toast.success('Stats refreshed');
- } else {
- toast.error(`Failed to refresh stats: ${result.error}`);
- }
- }}
- isRefreshing={isFetchingStats}
- />
-
- 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}
- />
-
-
+
+ );
+ }
+
+ // Error state for connection issues
+ if (error && !connection) {
+ return (
+
+
+ GitHub Integration
+
+ window.location.reload()}
+ retryLabel="Reload Page"
+ />
+
+ );
+ }
+
+ // Not connected state
+ if (!isConnected || !connection) {
+ return (
+
+
+ GitHub Integration
+
+
+ );
+ }
+
+ return (
+
+
+ GitHub Integration
++ Connect your GitHub account to enable advanced repository management features, statistics, and seamless + integration. +
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Stats Error State */}
+ {statsError && !stats && (
+ window.location.reload()}
+ retryLabel="Retry"
+ />
+ )}
+
+ {/* Stats Loading State */}
+ {isStatsLoading && !stats && (
+
+
+
+ )}
+
+ {/* Cache Management Section - Only show when connected */}
+ {isConnected && connection && (
+
+
+
+ + GitHub Integration +
+
+ {connection?.rateLimit && (
+
+
+
+
+ API: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
+
+
+ )}
+ + Manage your GitHub integration with advanced repository features and comprehensive statistics +
+ + {/* Connection Test Results */} +
+
+
+
+
+ All Repositories ({stats.repos.length})
+
+
+
+
+
+ {(isReposExpanded ? stats.repos : stats.repos.slice(0, 12)).map((repo) => (
+ window.open(repo.html_url, '_blank', 'noopener,noreferrer')}
+ />
+ ))}
+
+
+ {stats.repos.length > 12 && !isReposExpanded && (
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+ Connect to GitHub
+ +
+
+
+
+ + + Tip: You need a GitHub token to deploy repositories. +
+Required scopes: repo, read:org, read:user
+
+
+ );
+}
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 (
+
+
+
+ {showStats && (
+
+
+
+ GitHub Cache Management
+
+
+
+
+
+ )}
+
+ {cacheEntries.length > 0 && (
+
+
+
+
+
+ + {CacheManagerService.formatSize(cacheStats.totalSize)} +
+
+
+
+
+
+ {cacheStats.totalEntries}
+
+
+
+
+
+ + {cacheStats.oldestEntry ? new Date(cacheStats.oldestEntry).toLocaleDateString() : 'N/A'} +
+
+
+
+
+ + {cacheStats.totalEntries > 0 ? 'Active' : 'Empty'} +
+
+
+ )}
+
+ + Cache Entries ({cacheEntries.length}) +
+ +
+ {cacheEntries.map((entry) => (
+
+
+
+ ))}
+
+
+
+
+ + {entry.key.replace('github_', '')} +
++ {CacheManagerService.formatSize(entry.size)} • {new Date(entry.lastAccessed).toLocaleString()} +
+
+
+
+
+
+ {cacheEntries.length > 0 && (
+
+ )}
+
+
+ {lastClearTime && (
+
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+ Loading connection...
+
+
+ {!isConnected && (
+
+
+
+ )}
+
+
+
+
+ Tip: You can also set the{' '}
+
+ VITE_GITHUB_ACCESS_TOKEN
+ {' '}
+ environment variable to connect automatically.
+
+ For fine-grained tokens, also set{' '}
+
+ VITE_GITHUB_TOKEN_TYPE=fine-grained
+
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+// Higher-order component for wrapping components with error boundary
+export function withGitHubErrorBoundary
+
+
+
+
+
+ GitHub Integration Error
++ Something went wrong while loading GitHub data. This could be due to network issues, API limits, or a + temporary problem. +
+ + {this.state.error && ( +
+
+ )}
+ Show error details
+
+ {this.state.error.message}
+
+
+
+
+
+ (component: React.ComponentType
) {
+ return function WrappedComponent(props: P) {
+ return
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ return (
+
+
+
+
+ {progress}%
+
+ )}
+
+
+ {loadingMessage}
+ + {showProgress && progressSteps.length > 0 && ( +
+ {/* Progress bar */}
+
+ {isExpanded && (
+
+ {progressSteps.map((step) => (
+
+ )}
+
+
+ )}
+
+
+
+ {/* Steps toggle */}
+
+
+ {/* Progress steps */}
+
+ {step.error ? (
+
+ ))}
+
+
+ );
+ }
+
+ // Success state - render children with optional refresh indicator
+ return (
+
+
+
+
+
+
+ Failed to Load
+{error}
+
+ {onRetry && (
+
+ )}
+ {onRefresh && (
+
+ )}
+
+
+ {isRefreshing && (
+
+ );
+}
+
+// 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 (
+
+
+
+ )}
+
+ {children}
+
+
+
+
+
+ );
+}
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
+
+
+ {/* Bottom section with Clone button positioned at bottom right */}
+
+
+
+ {repo.description && (
+
+
+
+ + {repo.name} +
+ {repo.private && ( + + )} + {repo.fork && ( + + )} + {repo.archived && ( + + )} +
+
+
+ {repo.stargazers_count.toLocaleString()}
+
+
+
+ {repo.forks_count.toLocaleString()}
+
+
+ {repo.description}
+ )} + +
+
+
+ {repo.default_branch}
+
+ {repo.language && (
+
+
+ {repo.language}
+
+ )}
+
+
+ {new Date(repo.updated_at).toLocaleDateString(undefined, {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ })}
+
+
+
+ {/* Repository topics/tags */}
+ {repo.topics && repo.topics.length > 0 && (
+
+ {repo.topics.slice(0, 3).map((topic) => (
+
+ {topic}
+
+ ))}
+ {repo.topics.length > 3 && (
+ +{repo.topics.length - 3} more
+ )}
+
+ )}
+
+ {/* Repository size if available */}
+ {repo.size && (
+ Size: {(repo.size / 1024).toFixed(1)} MB
+ )}
+
+
+
+ View
+
+ {onClone && (
+
+ )}
+
+
+
+ );
+ }
+
+ if (isStatsLoading && !stats) {
+ return (
+ Please connect to GitHub first to browse repositories
+ +
+
+
+ );
+ }
+
+ if (!repositories.length) {
+ return (
+ Loading repositories...
+
+
+ );
+ }
+
+ return (
+ No repositories found
+ +
+
+
+ {error && repositories.length > 0 && (
+
+
+
+ Select Repository to Clone
++ {filteredRepositories.length} of {repositories.length} repositories +
+
+
+ )}
+
+ {/* Search and Filters */}
+ Warning: {error}. Showing cached data.
+
+ {/* Search */}
+
+
+ {/* Repository Grid */}
+ {currentRepositories.length > 0 ? (
+ <>
+
+
+
+ {/* Sort */}
+
+
+
+ {/* Filter */}
+
+
+
+ {currentRepositories.map((repo) => (
+ handleCloneRepository(repo)} />
+ ))}
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
+ )}
+
+ ) : (
+
+ Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
+ {Math.min(startIndex + REPOS_PER_PAGE, filteredRepositories.length)} of {filteredRepositories.length}{' '}
+ repositories
+
+
+
+
+ {currentPage} of {totalPages}
+
+
+
+
+
+ )}
+
+ {/* Branch Selector Modal */}
+ {selectedRepo && (
+ No repositories found matching your search criteria.
+
+
+ );
+ }
+
+ return (
+
+
+
+ {isLoading ? (
+ <>
+
+ Loading GitHub stats...
+
+ ) : (
+ No stats available
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+}
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 (
+
+
+
+
+
+ GitHub Stats
+ {isStale && (Stale)}
+
+
+
+
+
+
+
+ {/* Languages Section */}
+
+
+
+
+ {/* GitHub Overview Summary */}
+ Top Languages
+ {stats.mostUsedLanguages && stats.mostUsedLanguages.length > 0 ? ( +
+
+ ) : (
+
+ {stats.mostUsedLanguages.slice(0, 15).map(({ language, bytes, repos }) => (
+
+ {language} ({repos})
+
+ ))}
+
+
+ Based on actual codebase size across repositories
+
+
+ {Object.entries(stats.languages)
+ .sort(([, a], [, b]) => b - a)
+ .slice(0, 5)
+ .map(([language]) => (
+
+ {language}
+
+ ))}
+
+ )}
+
+
+
+ {/* Activity Summary */}
+ GitHub Overview
+
+
+
+
+
+ {(stats.publicRepos || 0) + (stats.privateRepos || 0)}
+
+ Total Repositories
+
+
+ {stats.totalBranches || 0}
+ Total Branches
+
+
+
+ {stats.organizations?.length || 0}
+
+ Organizations
+
+
+
+ {Object.keys(stats.languages).length}
+
+ Languages Used
+
+
+
+ {/* Organizations Section */}
+ {stats.organizations && stats.organizations.length > 0 && (
+ Activity Summary
+
+ {[
+ {
+ 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) => (
+
+
+ {stat.label}
+
+
+ {stat.value.toLocaleString()}
+
+
+ ))}
+
+
+ )}
+
+ {/* Last Updated */}
+ Organizations
+ +
+
+ Last updated: {stats.lastUpdated ? new Date(stats.lastUpdated).toLocaleString() : 'Never'}
+
+
+
+ 
+
+ );
+}
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 (
+
+
+ + {user.name || user.login} +
+@{user.login}
+ {user.bio && ( ++ {user.bio} +
+ )} +
+
+
+ {user.followers} followers
+
+
+
+ {user.public_repos} public repos
+
+
+
+ {user.public_gists} gists
+
+
+
+
+ );
+}
+
+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 (
+ {message}
+
+
+ );
+}
+
+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 (
+ {title}
+{message}
+ {onRetry && ( + + )} +
+
+ );
+}
+
+interface GitHubConnectionRequiredProps {
+ onConnect?: () => void;
+ className?: string;
+}
+
+export function GitHubConnectionRequired({ onConnect, className = '' }: GitHubConnectionRequiredProps) {
+ return (
+ {title}
+{message}
+ {onAction && ( + + )} +
+
+ );
+}
+
+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 (
+ GitHub Connection Required
++ Please connect your GitHub account to access this feature. You'll be able to browse repositories, push code, and + manage your GitHub integration. +
+ {onConnect && ( + + )} +
+ {React.createElement(icon, { className: classNames('text-blue-500 mb-2', sizeClasses[size]) })}
+
+ );
+}
+
+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 {title}
+{message}
+ {onAction && ( + + )} +
+
+ );
+}
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 (
+
+ );
+ }
+
+ 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 (
+
+ {getStatusIcon()}
+ {message || status}
+
+ {timestamp && {new Date(timestamp).toLocaleString()}
} +
+
+
+
+
+
+
+ + {repository.name} +
+ {repository.fork && ( + +
+
+
+
+ {repository.description && (
+
+
+ {repository.description}
+ )} + + {/* Repository metrics bar */} +
+ {repository.license && (
+
+ {repository.license.spdx_id || repository.license.name}
+
+ )}
+ {repository.topics &&
+ repository.topics.slice(0, 2).map((topic) => (
+
+ {topic}
+
+ ))}
+ {repository.archived && (
+
+ Archived
+
+ )}
+ {repository.fork && (
+
+ Fork
+
+ )}
+
+
+
+
+
+
+
+
+ {/* Repository Health Score */}
+ {health && (
+
+
+
+ )}
+
+ {onSelect && (
+
+
+
+ );
+ }
+
+ // Error state for connection issues
+ if (error && !connection) {
+ return (
+
+
+ GitLab Integration
+
+
+
+
+ Loading...
+
+
+
+ );
+ }
+
+ // Not connected state
+ if (!isConnected || !connection) {
+ return (
+
+
+ GitLab Integration
+
+ {error}
+
+
+
+ );
+ }
+
+ return (
+
+
+ GitLab Integration
++ Connect your GitLab account to enable advanced repository management features, statistics, and seamless + integration. +
+
+ {/* Header */}
+
+
+
+
+
+ )}
+
+ {/* GitLab Stats Section */}
+ {connection?.stats && (
+
+ {
+ setIsRefreshingStats(true);
+
+ try {
+ await refreshStats();
+ } catch (error) {
+ console.error('Failed to refresh stats:', error);
+ } finally {
+ setIsRefreshingStats(false);
+ }
+ }}
+ isRefreshing={isRefreshingStats}
+ />
+
+ )}
+
+ {/* GitLab Repositories Section */}
+ {connection?.stats?.projects && (
+
+ {
+ setIsRefreshingStats(true);
+
+ try {
+ await refreshStats();
+ } catch (error) {
+ console.error('Failed to refresh repositories:', error);
+ } finally {
+ setIsRefreshingStats(false);
+ }
+ }}
+ isRefreshing={isRefreshingStats}
+ />
+
+ )}
+
+ );
+}
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 (
+
+
+ + GitLab Integration +
+
+ {connection?.rateLimit && (
+
+
+
+
+ API: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
+
+
+ )}
+ + Manage your GitLab integration with advanced repository features and comprehensive statistics +
+ + {/* Connection Test Results */} + {connectionTest && ( +
+
+ )}
+
+ {/* GitLab Connection Component */}
+
+
+
+ {connectionTest.status === 'success' ? (
+
+ ) : connectionTest.status === 'error' ? (
+
+ ) : (
+
+ )}
+
+
+ {connectionTest.message}
+
+
+
+
+ {connection.user.avatar_url &&
+ connection.user.avatar_url !== 'null' &&
+ connection.user.avatar_url !== '' ? (
+ {
+ 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',
+ );
+ }
+ }}
+ />
+ ) : (
+
+
+ {(connection.user?.name || connection.user?.username || 'U').charAt(0).toUpperCase()}
+
+ )}
+
+
+ + {connection.user?.name || connection.user?.username} +
+{connection.user?.username}
+Statistics
+
+
+
+
+ Connect to GitLab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + GitLab Connection +
++ Connect your GitLab account to deploy your projects +
+
+
+
+
+
+ {!isConnected && (
+
+
+
+
+
+ GitLab Connection
+
+
+ )}
+
+
+
+
+ Tip: You can also set the{' '}
+ VITE_GITLAB_ACCESS_TOKEN{' '}
+ environment variable to connect automatically.
+
+ For self-hosted GitLab instances, also set{' '}
+
+ VITE_GITLAB_URL=https://your-gitlab-instance.com
+
+
+
+ );
+ }
+
+ if (error && !repositories.length) {
+ return (
+ Please connect to GitLab first to browse repositories
+ +
+
+ );
+ }
+
+ if (isLoading && !repositories.length) {
+ return (
+
+
+
+ Failed to load repositories
+{error}
+
+
+
+ );
+ }
+
+ if (!repositories.length && !isLoading) {
+ return (
+ Loading repositories...
+
+
+ );
+ }
+
+ return (
+ No repositories found
+ +
+
+
+ {error && repositories.length > 0 && (
+
+
+
+ Select Repository to Clone
++ {filteredRepositories.length} of {repositories.length} repositories +
+
+
+ )}
+
+ {/* Search and Filters */}
+ Warning: {error}. Showing cached data.
+
+ {/* Search */}
+
+
+ {/* Repository Grid */}
+ {currentRepositories.length > 0 ? (
+ <>
+
+
+
+ {/* Sort */}
+
+
+
+ {/* Filter */}
+
+
+
+ {currentRepositories.map((repo) => (
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+ handleCloneRepository(repo)} />
+
+ ))}
+
+
+ )}
+
+ ) : (
+
+ Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
+ {Math.min(startIndex + REPOS_PER_PAGE, filteredRepositories.length)} of {filteredRepositories.length}{' '}
+ repositories
+
+
+
+
+ {currentPage} of {totalPages}
+
+
+
+
+
+ )}
+
+ {/* Branch Selector Modal */}
+ {selectedRepo && (
+ No repositories found matching your search criteria.
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ Netlify Stats
+
+
+
+
+ {/* Netlify Overview Dashboard */}
+
+
+
+
+ {/* Advanced Analytics */}
+ Netlify Overview
+
+
+
+
+
+ {connection.stats.totalSites}
+
+ Total Sites
+
+
+
+ {connection.stats.totalDeploys || deploymentCount}
+
+ Total Deployments
+
+
+
+ {connection.stats.totalBuilds || 0}
+
+ Total Builds
+
+
+
+ {sites.filter((site) => site.published_deploy?.state === 'ready').length}
+
+ Live Sites
+
+
+
+ {/* Site Health Metrics */}
+ Deployment Analytics
+
+
+
+
+
+ + + Success Rate +
+
+ {(() => {
+ 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) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+ + + Recent Activity +
+
+ {(() => {
+ 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) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+
+ Site Health Overview
+
+ {(() => {
+ 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) => (
+
+
+
+ ))}
+
+
+ {metric.label}
+
+ {metric.value}
+
+
+
+ {connection.stats.totalSites} Sites
+
+
+
+ {deploymentCount} Deployments
+
+
+
+ {connection.stats.totalBuilds || 0} Builds
+
+ {lastUpdated && (
+
+
+ Updated {formatDistanceToNow(new Date(lastUpdated))} ago
+
+ )}
+
+ {sites.length > 0 && (
+
+
+ )}
+
+
+ {deploys.length > 0 && (
+
+
+
+
+
+ + + Your Sites ({sites.length}) +
+ {sites.length > 8 && ( + + )} +
+ {(isSitesExpanded ? sites : sites.slice(0, 8)).map((site, index) => (
+
+ {
+ setActiveSiteIndex(index);
+ }}
+ >
+
+ ))}
+
+
+
+
+
+
+ {site.name}
+
+
+
+
+ {site.published_deploy?.state === 'ready' ? (
+
+ ) : (
+
+ )}
+
+ {site.published_deploy?.state || 'Unknown'}
+
+
+
+
+
+
+
+ {activeSiteIndex === index && (
+ <>
+
+ {site.published_deploy?.framework && (
+
+
+
+ {site.published_deploy.framework}
+
+ )}
+ {site.custom_domain && (
+
+
+ Custom Domain
+
+ )}
+ {site.branch && (
+
+
+ {site.branch}
+
+ )}
+
+
+ {site.published_deploy && (
+
+ {siteActions.map((action) => (
+
+ ))}
+
+
+
+ )}
+
+ )}
+
+
+
+ Published {formatDistanceToNow(new Date(site.published_deploy.published_at))} ago
+
+
+ {site.published_deploy.branch && (
+
+
+
+ Branch: {site.published_deploy.branch}
+
+
+ )}
+
+
+ )}
+
+ {/* Builds Section */}
+ {connection.stats.builds && connection.stats.builds.length > 0 && (
+
+
+
+
+ + + All Deployments ({deploys.length}) +
+ {deploys.length > 10 && ( + + )} +
+ {(isDeploysExpanded ? deploys : deploys.slice(0, 10)).map((deploy) => (
+
+
+
+ ))}
+
+
+ {deploy.branch && (
+
+
+ {deploy.state === 'ready' ? (
+
+ ) : deploy.state === 'error' ? (
+
+ ) : (
+
+ )}
+
+ {deploy.state}
+
+
+
+
+ {formatDistanceToNow(new Date(deploy.created_at))} ago
+
+
+
+
+ Branch: {deploy.branch}
+
+
+ )}
+ {deploy.deploy_url && (
+
+ )}
+
+
+ {deploy.state === 'ready' ? (
+
+ ) : (
+
+ )}
+
+
+
+ )}
+
+
+ + + Recent Builds ({connection.stats.builds.length}) +
+
+ {connection.stats.builds.slice(0, 8).map((build: any) => (
+
+
+
+ ))}
+
+
+ {build.commit_ref && (
+
+
+ {build.done ? (
+
+ ) : (
+
+ )}
+
+ {build.done ? 'Completed' : 'Building'}
+
+
+
+
+ {formatDistanceToNow(new Date(build.created_at))} ago
+
+
+
+
+ {build.commit_ref.substring(0, 7)}
+
+
+ )}
+
+ {/* Header */}
+
+
+
+
+
+ )}
+
+ {/* Main Connection Component */}
+
+
+
+ );
+}
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
+
+
+
+ + Netlify Integration +
+
+ {connection.user && (
+
+ )}
+
+ + Connect and manage your Netlify sites with advanced deployment controls and site management +
+ + {/* Connection Test Results */} + {connectionTest && ( +
+ {connectionTest.status === 'success' && (
+
+ )}
+ {connectionTest.status === 'error' && (
+
+ )}
+ {connectionTest.status === 'testing' && (
+
+ )}
+
+ {connectionTest.message}
+
+
+ {connectionTest.timestamp && (
+ {new Date(connectionTest.timestamp).toLocaleString()}
+ )} +
+ {!connection.user ? (
+
+
+
+ ) : (
+
+
+
+
+
+ Tip: You can also set the{' '}
+
+ VITE_NETLIFY_ACCESS_TOKEN
+ {' '}
+ environment variable to connect automatically.
+
+
+ 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',
+ )}
+ />
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ Connected to Netlify
+
+
+ {renderStats()}
+
- {/* Header */}
-
-
-
-
- )}
-
-
-
-
- {/* Provider Cards */}
-
-
-
-
-
-
- Local AI Providers
-Configure and manage your local AI models
-
-
-
- Enable All
-
-
-
-
-
-
- {filteredProviders.map((provider) => (
-
-
- {filteredProviders.length === 0 && (
-
- 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 && (
-
-
-
-
- {isLoadingModels ? (
-
-
- )}
-
- {/* LM Studio Models Section */}
- {provider.name === 'LMStudio' && provider.settings.enabled && (
-
-
-
-
- {isLoadingLMStudioModels ? (
-
-
- )}
-
- ))}
-
-
-
-
-
- Installed Models
-
- {Array.from({ length: 3 }).map((_, i) => (
-
- ) : ollamaModels.length === 0 ? (
-
-
- ) : (
- No Models Installed
-
- Visit{' '}
-
- ollama.com/library
-
- {ollamaModels.map((model) => (
- handleUpdateOllamaModel(model.name)}
- onDelete={() => handleDeleteOllamaModel(model.name)}
- />
- ))}
-
- )}
-
-
-
-
-
- Available Models
-
- {Array.from({ length: 3 }).map((_, i) => (
-
- ) : lmStudioModels.length === 0 ? (
-
-
- ) : (
- No Models Available
-- Make sure LM Studio is running with the local server started and CORS enabled. -
- -
- {lmStudioModels.map((model) => (
-
-
-
-
- ))}
-
- )}
-
-
-
-
- - {model.id} -
- - Available - -
-
-
-
-
-
- {model.created && (
-
-
- )}
- No Local Providers Available
-- Local providers will appear here when they're configured in the system. -
-
+
+ Fetching Supabase projects...
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Your Projects ({connection.stats?.totalProjects || 0})
+
+
+
+
+ {/* Supabase Overview Dashboard */}
+ {connection.stats?.projects?.length ? (
+
+
+
+ ) : null}
+
+ {connection.stats?.projects?.length ? (
+ Supabase Overview
+
+
+
+
+
+ {connection.stats.totalProjects}
+
+ Total Projects
+
+
+
+ {connection.stats.projects.filter((p: SupabaseProject) => p.status === 'ACTIVE_HEALTHY').length}
+
+ Active Projects
+
+
+
+ {new Set(connection.stats.projects.map((p: SupabaseProject) => p.region)).size}
+
+ Regions Used
+
+
+
+ {connection.stats.projects.filter((p: SupabaseProject) => p.status !== 'ACTIVE_HEALTHY').length}
+
+ Inactive Projects
+
+ {connection.stats.projects.map((project: SupabaseProject) => (
+
+ ) : (
+ handleProjectSelect(project.id)}
+ >
+
+ ))}
+
+
+
+ {selectedProjectId === project.id && (
+
+
+ + + {project.name} +
+
+
+
+ {project.region}
+
+ •
+
+
+ {new Date(project.created_at).toLocaleDateString()}
+
+ •
+
+
+ {project.status.replace('_', ' ')}
+
+
+
+ {/* Project Details Grid */}
+
+
+
+
+
+ {project.stats?.database?.tables ?? '--'}
+
+
+
+ Tables
+
+
+
+
+ {project.stats?.storage?.buckets ?? '--'}
+
+
+
+ Buckets
+
+
+
+
+ {project.stats?.functions?.deployed ?? '--'}
+
+
+
+ Functions
+
+
+
+
+ {project.stats?.database?.size_mb ? `${project.stats.database.size_mb} MB` : '--'}
+
+
+
+ DB Size
+
+
+
+ )}
+
+ {projectActions.map((action) => (
+
+ ))}
+
+
+ {/* Project Details */}
+
+
+
+ {connection.credentials && (
+
+
+
+ + + Database Schema +
+
+
+
+ Tables:
+ {project.stats?.database?.tables ?? '--'}
+
+
+ Views:
+ {project.stats?.database?.views ?? '--'}
+
+
+ Functions:
+ {project.stats?.database?.functions ?? '--'}
+
+
+ Size:
+
+ {project.stats?.database?.size_mb ? `${project.stats.database.size_mb} MB` : '--'}
+
+
+
+
+ + + Storage +
+
+
+
+ Buckets:
+ {project.stats?.storage?.buckets ?? '--'}
+
+
+ Files:
+ {project.stats?.storage?.files ?? '--'}
+
+
+ Used:
+
+ {project.stats?.storage?.used_gb ? `${project.stats.storage.used_gb} GB` : '--'}
+
+
+
+ Available:
+
+ {project.stats?.storage?.available_gb
+ ? `${project.stats.storage.available_gb} GB`
+ : '--'}
+
+
+
+
+ )}
+ + + Project Credentials +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No projects found in your Supabase account
+
+ )}
+
+ {/* Header */}
+
+
+
+
+
+ )}
+
+ {/* Main Connection Component */}
+
+
+
+ );
+}
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
+
+
+
+ + Supabase Integration +
+
+ {connection.user && (
+
+ )}
+
+ + Connect and manage your Supabase projects with database access, authentication, and storage controls +
+ + {/* Connection Test Results */} + {connectionTest && ( +
+ {connectionTest.status === 'success' && (
+
+ )}
+ {connectionTest.status === 'error' && (
+
+ )}
+ {connectionTest.status === 'testing' && (
+
+ )}
+
+ {connectionTest.message}
+
+
+ {connectionTest.timestamp && (
+ {new Date(connectionTest.timestamp).toLocaleString()}
+ )} +
+ {!connection.user ? (
+
+
+
+ ) : (
+
+
+
+
+
+ Tip: You can also set the{' '}
+
+ VITE_SUPABASE_ACCESS_TOKEN
+ {' '}
+ environment variable to connect automatically.
+
+
+ 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',
+ )}
+ />
+
+
+
+
+
+
+ )}
+
+
+
+ {connection.user && (
+
+
+
+
+ Connected to Supabase
+
+
+
+
+ )}
+
+ {renderProjects()}
+
+
+
+ {/* Advanced Analytics */}
+
+
+
+
+
+ {connection.user.email}
++ {connection.user.role} • Member since{' '} + {new Date(connection.user.created_at).toLocaleDateString()} +
+
+
+
+ {connection.stats?.totalProjects || 0} Projects
+
+
+
+ {new Set(connection.stats?.projects?.map((p: SupabaseProject) => p.region) || []).size}{' '}
+ Regions
+
+
+
+ {connection.stats?.projects?.filter((p: SupabaseProject) => p.status === 'ACTIVE_HEALTHY')
+ .length || 0}{' '}
+ Active
+
+
+
+
+
+ {/* Resource Utilization */}
+ Performance Analytics
+
+
+
+
+
+ + + Database Health +
+
+ {(() => {
+ 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) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+
+ + + Auth & Security +
+
+ {(() => {
+ 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) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+ + + Regional Distribution +
+
+ {(() => {
+ const regions =
+ connection.stats?.projects?.reduce(
+ (acc, p: SupabaseProject) => {
+ acc[p.region] = (acc[p.region] || 0) + 1;
+ return acc;
+ },
+ {} as Record,
+ ) || {};
+
+ return Object.entries(regions)
+ .sort(([, a], [, b]) => b - a)
+ .slice(0, 3)
+ .map(([region, count]) => ({ label: region.toUpperCase(), value: count }));
+ })().map((item, idx) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+
+ {/* Usage Metrics */}
+ Resource Overview
+
+ {(() => {
+ 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) => (
+
+
+
+ ))}
+
+
+ {metric.label}
+
+ {metric.value}
+
+
+
+
+
+
+ Database
+
+
+
+
+ Tables:{' '}
+ {connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.database?.tables || 0), 0) ||
+ '--'}
+
+
+ Size:{' '}
+ {(() => {
+ const totalSize =
+ connection.stats?.projects?.reduce(
+ (sum, p) => sum + (p.stats?.database?.size_mb || 0),
+ 0,
+ ) || 0;
+ return totalSize > 0 ? `${totalSize} MB` : '--';
+ })()}
+
+
+
+
+
+ Storage
+
+
+
+
+ Buckets:{' '}
+ {connection.stats?.projects?.reduce((sum, p) => sum + (p.stats?.storage?.buckets || 0), 0) ||
+ '--'}
+
+
+ Used:{' '}
+ {(() => {
+ const totalUsed =
+ connection.stats?.projects?.reduce(
+ (sum, p) => sum + (p.stats?.storage?.used_gb || 0),
+ 0,
+ ) || 0;
+ return totalUsed > 0 ? `${totalUsed} GB` : '--';
+ })()}
+
+
+
+
+
+ Functions
+
+
+
+
+ Deployed:{' '}
+ {connection.stats?.projects?.reduce(
+ (sum, p) => sum + (p.stats?.functions?.deployed || 0),
+ 0,
+ ) || '--'}
+
+
+ Invocations:{' '}
+ {connection.stats?.projects?.reduce(
+ (sum, p) => sum + (p.stats?.functions?.invocations || 0),
+ 0,
+ ) || '--'}
+
+
+
+ Fetching Vercel projects...
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Your Projects ({connection.stats?.totalProjects || 0})
+
+
+
+
+ {/* Vercel Overview Dashboard */}
+ {connection.stats?.projects?.length ? (
+
+
+
+ ) : null}
+
+ {/* Performance Analytics */}
+ {connection.stats?.projects?.length ? (
+ Vercel Overview
+
+
+
+
+
+ {connection.stats.totalProjects}
+
+ Total Projects
+
+
+
+ {
+ connection.stats.projects.filter(
+ (p) => p.targets?.production?.alias && p.targets.production.alias.length > 0,
+ ).length
+ }
+
+ Deployed Projects
+
+
+
+ {new Set(connection.stats.projects.map((p) => p.framework).filter(Boolean)).size}
+
+ Frameworks Used
+
+
+
+ {connection.stats.projects.filter((p) => p.latestDeployments?.[0]?.state === 'READY').length}
+
+ Active Deployments
+
+
+ ) : null}
+
+ {/* Project Health Overview */}
+ {connection.stats?.projects?.length ? (
+ Performance Analytics
+
+
+
+
+
+ + + Deployment Health +
+
+ {(() => {
+ 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) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+
+ + + Framework Distribution +
+
+ {(() => {
+ const frameworks = connection.stats.projects.reduce(
+ (acc, p) => {
+ if (p.framework) {
+ acc[p.framework] = (acc[p.framework] || 0) + 1;
+ }
+
+ return acc;
+ },
+ {} as Record,
+ );
+
+ return Object.entries(frameworks)
+ .sort(([, a], [, b]) => b - a)
+ .slice(0, 3)
+ .map(([framework, count]) => ({ label: framework, value: count }));
+ })().map((item, idx) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+ + + Activity Summary +
+
+ {(() => {
+ 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) => (
+
+
+ {item.label}:
+ {item.value}
+
+ ))}
+
+
+ ) : null}
+
+ {connection.stats?.projects?.length ? (
+ Project Health Overview
+
+ {(() => {
+ 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) => (
+
+
+
+ ))}
+
+
+ {metric.label}
+
+ {metric.value}
+
+ {connection.stats.projects.map((project) => (
+
+ ) : (
+
+
+ ))}
+
+
+
+
+
+ + + {project.name} +
+
+ {project.targets?.production?.alias && project.targets.production.alias.length > 0 ? (
+ <>
+ 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]}
+
+ •
+
+
+ {new Date(project.createdAt).toLocaleDateString()}
+
+
+ ) : project.latestDeployments && project.latestDeployments.length > 0 ? (
+ <>
+
+ {project.latestDeployments[0].url}
+
+ •
+
+
+ {new Date(project.latestDeployments[0].created).toLocaleDateString()}
+
+
+ ) : null}
+
+
+ {/* Project Details Grid */}
+
+
+
+
+
+ {/* Deployments - This would be fetched from API */}
+ --
+
+
+
+ Deployments
+
+
+
+
+ {/* Domains - This would be fetched from API */}
+ --
+
+
+
+ Domains
+
+
+
+
+ {/* Team Members - This would be fetched from API */}
+ --
+
+
+
+ Team
+
+
+
+
+ {/* Bandwidth - This would be fetched from API */}
+ --
+
+
+
+ Bandwidth
+
+
+ {project.latestDeployments && project.latestDeployments.length > 0 && (
+
+
+
+ {project.latestDeployments[0].state}
+
+ )}
+ {project.framework && (
+
+
+
+ {project.framework}
+
+
+ )}
+
+
+ {projectActions.map((action) => (
+
+ ))}
+
+
+
+ No projects found in your Vercel account
+
+ )}
+
+ testConnection() : undefined}
+ isTestingConnection={isTestingConnection}
+ />
+
+
+
+
+ );
+}
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)}
+ {!connection.user ? (
+
+
+
+ ) : (
+
+
+
+
+
+ Tip: You can also set the{' '}
+
+ VITE_VERCEL_ACCESS_TOKEN
+ {' '}
+ environment variable to connect automatically.
+
+
+ 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',
+ )}
+ />
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ Connected to Vercel
+
+
+
+
+
+ {renderProjects()}
+
+ 
+
+
+ {/* Usage Metrics */}
+
+
+ + {connection.user?.username || 'Vercel User'} +
++ {connection.user?.email || 'No email available'} +
+
+
+
+ {connection.stats?.totalProjects || 0} Projects
+
+
+
+ {connection.stats?.projects.filter((p) => p.latestDeployments?.[0]?.state === 'READY').length ||
+ 0}{' '}
+ Live
+
+
+
+ {/* Team size would be fetched from API */}
+ --
+
+
+
+
+
+
+
+
+ Projects
+
+
+
+
+ Active:{' '}
+ {connection.stats?.projects.filter((p) => p.latestDeployments?.[0]?.state === 'READY').length ||
+ 0}
+
+ Total: {connection.stats?.totalProjects || 0}
+
+
+
+
+ Domains
+
+
+ {/* Domain usage would be fetched from API */}
+
+ Custom: --
+ Vercel: --
+
+
+
+
+ Usage
+
+
+ {/* Usage metrics would be fetched from API */}
+
+ Bandwidth: --
+ Requests: --
+
-
@@ -316,7 +315,7 @@ ${escapeBoltTags(file.content)}
-
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"
>
+
@@ -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"
>
+ GitHub Connection Required
+ {repoName && sanitizeRepoName(repoName) !== repoName && (
+
+ Will be created as:{' '} + + {sanitizeRepoName(repoName)} + +
+ )}
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
- 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 }}
>
-
- Go to Settings
-
+
+ Connect GitLab Account
+
+
+ {/* Header */}
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+ Select Branch
++ {repoOwner}/{repoName} +
+
+ {isLoading ? (
+
+
+ {/* Footer */}
+ {!isLoading && !error && branches.length > 0 && (
+
+
+
+ ) : error ? (
+ Loading branches...
+
+
+ ) : (
+ <>
+ {/* Search */}
+ {branches.length > 10 && (
+
+
+ {error}
+ +
+ 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"
+ />
+
+ )}
+
+ {/* Branch List */}
+
+ {filteredBranches.length > 0 ? (
+
+
+ )}
+
+ {filteredBranches.map((branch) => (
+
+ ))}
+
+ ) : (
+
+
+ )}
+ + {searchQuery ? 'No branches found matching your search.' : 'No branches available.'} +
+
+
+ )}
+
+ {selectedBranch && (
+ <>
+ Selected: {selectedBranch}
+
+ )}
+
+
+
+
+
+ 0 && 'blur-[var(--blur)] ',
@@ -169,7 +169,7 @@ const GlowingEffect = memo(
)}
>
void;
}
-export const TerminalManager = memo(({ terminal, isActive, onReconnect }: TerminalManagerProps) => {
- const [isHealthy, setIsHealthy] = useState(true);
- const [lastActivity, setLastActivity] = useState(Date.now());
- const healthCheckIntervalRef = useRef();
- 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(() => {
{
- const ref = terminalRefs.current.get(index);
-
- if (ref?.getTerminal()) {
- workbenchStore.attachBoltTerminal(ref.getTerminal()!);
- }
- }}
/>
);
@@ -272,13 +265,6 @@ export const TerminalTabs = memo(() => {
{
- const ref = terminalRefs.current.get(index);
-
- if (ref?.getTerminal()) {
- workbenchStore.attachTerminal(ref.getTerminal()!);
- }
- }}
/>
);
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(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;
+ disconnect: () => void;
+ refreshConnection: () => Promise;
+ testConnection: () => Promise;
+}
+
+const STORAGE_KEY = 'github_connection';
+
+export function useGitHubConnection(): UseGitHubConnectionReturn {
+ const connection = useStore(githubConnection);
+ const connecting = useStore(isConnecting);
+ const [error, setError] = useState(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 => {
+ 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;
+ refreshStats: () => Promise;
+ 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({
+ 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([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(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;
+ disconnect: () => void;
+ refreshConnection: () => Promise;
+ testConnection: () => Promise;
+ refreshStats: () => Promise;
+}
+
+const STORAGE_KEY = 'gitlab_connection';
+
+export function useGitLabConnection(): UseGitLabConnectionReturn {
+ const connection = useStore(gitlabConnection);
+ const isConnected = useStore(isGitLabConnected);
+ const [error, setError] = useState(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 => {
+ 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();
+
+// 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 = {
+ 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 Promise>(
+ handler: T,
+ options: {
+ requireAuth?: boolean;
+ rateLimit?: boolean;
+ allowedMethods?: string[];
+ } = {},
+) {
+ return async (args: ActionFunctionArgs | LoaderFunctionArgs): Promise => {
+ 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 {
- data: T;
- timestamp: number;
- expiresAt: number;
+export interface GitHubApiServiceConfig {
+ token?: string;
+ tokenType?: 'classic' | 'fine-grained';
+ baseURL?: string;
}
-class GitHubCache {
- private _cache = new Map>();
-
- set(key: string, data: T, duration = CACHE_DURATION): void {
- const timestamp = Date.now();
- this._cache.set(key, {
- data,
- timestamp,
- expiresAt: timestamp + duration,
- });
- }
-
- get(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(
- 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(endpoint: string, options: RequestInit = {}): Promise {
+ 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 {
+ return this._makeRequestInternal('/user');
+ }
+
+ async getAllUserRepositories(): Promise {
+ const allRepos: GitHubRepoInfo[] = [];
+ let page = 1;
+ let hasMore = true;
+
+ while (hasMore) {
+ const repos = await this._makeRequestInternal(
+ `/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 {
+ const [repoInfo, branches] = await Promise.all([
+ this._makeRequestInternal(`/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 {
+ return this._makeRequestInternal(`/repos/${owner}/${repo}/branches`);
+ }
+
+ /**
+ * Get contributors count using Link header pagination info
+ */
+ private async _getRepositoryContributorsCount(owner: string, repo: string): Promise {
+ 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 {
+ 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 {
+ 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 {
- const cacheKey = `repos:${token.slice(0, 8)}`;
- const cached = this._cache.get(cacheKey);
+ /**
+ * Fetch detailed information for multiple repositories in batches
+ */
+ async getDetailedRepositoriesInfo(
+ repos: GitHubRepoInfo[],
+ batchSize: number = 5,
+ delayMs: number = 100,
+ ): Promise {
+ 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(
- `/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 {
- const cacheKey = `activity:${username}:${token.slice(0, 8)}`;
- const cached = this._cache.get(cacheKey);
-
- if (cached) {
- return cached;
- }
-
- try {
- const { data: events } = await this._makeRequest(
- `/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 {
- const cacheKey = `languages:${languagesUrl}`;
- const cached = this._cache.get(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 {
- 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 = {};
+ const languageRepos: Record = {};
- // 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 {
+ 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('/user/orgs'),
+ this._makeRequestInternal(`/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 {
+ 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 {
+ // 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)
+ .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 {
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(initialConnection);
+export const isConnecting = atom(false);
+export const isFetchingStats = atom(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 = {
+ 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) => {
+ 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 ({
+ 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();
+ 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 | ClassNamesArg[];
+type ClassNamesArg = undefined | null | string | number | boolean | Record | 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,
- );
-
- // 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 = {
- 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 {
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 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 {
- 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