@@ -92,66 +44,6 @@ const BetaLabel = () => (
);
-const AnimatedSwitch = ({ checked, onCheckedChange, id, label }: AnimatedSwitchProps) => {
- return (
-
-
-
-
- Toggle {label}
-
-
- );
-};
-
export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
// State
const [activeTab, setActiveTab] = useState
-
-
-
-
-
+ {
onPointerDownOutside={handleClose}
className="relative z-[101]"
>
-
-
+
- {/* Mode Toggle */}
-
-
-
{/* Avatar and Dropdown */}
-
+
- {showTabManagement ? (
-
-
- {(visibleTabs as TabWithDevType[]).map((tab: TabWithDevType) => (
-
- handleTabClick(tab.id as TabType)}
- isActive={activeTab === tab.id}
- hasUpdate={getTabUpdateStatus(tab.id)}
- statusMessage={getStatusMessage(tab.id)}
- description={TAB_DESCRIPTIONS[tab.id]}
- isLoading={loadingTab === tab.id}
- className="h-full relative"
- >
- {BETA_TABS.has(tab.id) &&
-
- ))}
-
-
+
+
+ {visibleTabs.map((tab, index) => (
+
)}
-
+ handleTabClick(tab.id as TabType)}
+ isActive={activeTab === tab.id}
+ hasUpdate={getTabUpdateStatus(tab.id)}
+ statusMessage={getStatusMessage(tab.id)}
+ description={TAB_DESCRIPTIONS[tab.id]}
+ isLoading={loadingTab === tab.id}
+ className="h-full relative"
+ >
+ {BETA_TABS.has(tab.id) &&
+
+ ))}
+
-
- {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/TabManagement.tsx b/app/components/@settings/shared/components/TabManagement.tsx
deleted file mode 100644
index 9ae16017192..00000000000
--- a/app/components/@settings/shared/components/TabManagement.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { useStore } from '@nanostores/react';
-import { Switch } from '~/components/ui/Switch';
-import { classNames } from '~/utils/classNames';
-import { tabConfigurationStore } from '~/lib/stores/settings';
-import { TAB_LABELS } from '~/components/@settings/core/constants';
-import type { TabType } from '~/components/@settings/core/types';
-import { toast } from 'react-toastify';
-import { TbLayoutGrid } from 'react-icons/tb';
-import { useSettingsStore } from '~/lib/stores/settings';
-
-// Define tab icons mapping
-const TAB_ICONS: Record
-
- {/* Header */}
-
-
- );
-};
diff --git a/app/components/@settings/shared/components/TabTile.tsx b/app/components/@settings/shared/components/TabTile.tsx
index ea409d690d1..a8a9383adb0 100644
--- a/app/components/@settings/shared/components/TabTile.tsx
+++ b/app/components/@settings/shared/components/TabTile.tsx
@@ -1,8 +1,8 @@
-import { motion } from 'framer-motion';
import * as Tooltip from '@radix-ui/react-tooltip';
import { classNames } from '~/utils/classNames';
import type { TabVisibilityConfig } from '~/components/@settings/core/types';
import { TAB_LABELS, TAB_ICONS } from '~/components/@settings/core/constants';
+import { GlowingEffect } from '~/components/ui/GlowingEffect';
interface TabTileProps {
tab: TabVisibilityConfig;
@@ -28,106 +28,122 @@ export const TabTile: React.FC
-
-
- {/* Tab Grid */}
-
-
-
- {/* Search */}
-
-
-
-
- Tab Management
-Configure visible tabs and their order
-
-
-
-
-
- setSearchQuery(e.target.value)}
- placeholder="Search tabs..."
- className={classNames(
- 'w-full pl-10 pr-4 py-2 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-2 focus:ring-purple-500/30',
- 'transition-all duration-200',
- )}
- />
-
- {/* Default Section Header */}
- {filteredTabs.some((tab) => DEFAULT_USER_TABS.includes(tab.id)) && (
-
- {/* Status Badges */}
-
- ))}
-
- {/* Optional Section Header */}
- {filteredTabs.some((tab) => OPTIONAL_USER_TABS.includes(tab.id)) && (
-
- {/* Status Badges */}
-
- ))}
-
-
-
- Default Tabs
-
- )}
-
- {/* Default Tabs */}
- {filteredTabs
- .filter((tab) => DEFAULT_USER_TABS.includes(tab.id))
- .map((tab, index) => (
-
-
- Default
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- const isDisabled =
- !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
-
- if (!isDisabled) {
- handleTabVisibilityChange(tab.id, checked);
- }
- }}
- className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
- 'opacity-50 pointer-events-none':
- !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
- })}
- />
-
-
-
-
-
- - {TAB_LABELS[tab.id]} -
- {BETA_TABS.has(tab.id) &&- {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'} -
-
-
- Optional Tabs
-
- )}
-
- {/* Optional Tabs */}
- {filteredTabs
- .filter((tab) => OPTIONAL_USER_TABS.includes(tab.id))
- .map((tab, index) => (
-
-
- Optional
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- const isDisabled =
- !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
-
- if (!isDisabled) {
- handleTabVisibilityChange(tab.id, checked);
- }
- }}
- className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
- 'opacity-50 pointer-events-none':
- !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
- })}
- />
-
-
-
-
-
- - {TAB_LABELS[tab.id]} -
- {BETA_TABS.has(tab.id) &&- {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'} -
-
- {/* Icon */}
-
+
-
- {statusMessage}
-
-
-
- )}
-
- {/* Children (e.g. Beta Label) */}
- {children}
-
+
+
-
- {/* Update Indicator with Tooltip */}
- {hasUpdate && (
- <>
-
-
-
+
+ {statusMessage}
+
+
+
)}
+
+ {/* Children (e.g. Beta Label) */}
+ {children}
-
+
+ {/* Label and Description */}
+ - {TAB_LABELS[tab.id]} -
- {description && ( - {
+ const IconComponent = TAB_ICONS[tab.id];
+ return (
+
+
+
+ {/* Update Indicator with Tooltip */}
+ {hasUpdate && (
+ <>
+
+ - {description} - + {TAB_LABELS[tab.id]} +
+ {description && ( ++ {description} +
+ )} +
+ {!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 && (
+ (null);
- const [isRunning, setIsRunning] = useState(false);
- const [showDetails, setShowDetails] = useState(false);
-
- // Run diagnostics when requested
- const runDiagnostics = async () => {
- try {
- setIsRunning(true);
- setDiagnosticResults(null);
-
- // Check browser-side storage
- const localStorageChecks = {
- githubConnection: localStorage.getItem('github_connection'),
- netlifyConnection: localStorage.getItem('netlify_connection'),
- vercelConnection: localStorage.getItem('vercel_connection'),
- supabaseConnection: localStorage.getItem('supabase_connection'),
- };
-
- // Get diagnostic data from server
- const response = await fetch('/api/system/diagnostics');
-
- if (!response.ok) {
- throw new Error(`Diagnostics API error: ${response.status}`);
- }
-
- const serverDiagnostics = await response.json();
-
- // === GitHub Checks ===
- const githubConnectionParsed = safeJsonParse(localStorageChecks.githubConnection);
- const githubToken = githubConnectionParsed?.token;
- const githubAuthHeaders = {
- ...(githubToken ? { Authorization: `Bearer ${githubToken}` } : {}),
- 'Content-Type': 'application/json',
- };
- console.log('Testing GitHub endpoints with token:', githubToken ? 'present' : 'missing');
-
- const githubEndpoints = [
- { name: 'User', url: '/api/system/git-info?action=getUser' },
- { name: 'Repos', url: '/api/system/git-info?action=getRepos' },
- { name: 'Default', url: '/api/system/git-info' },
- ];
- const githubResults = await Promise.all(
- githubEndpoints.map(async (endpoint) => {
- try {
- const resp = await fetch(endpoint.url, { headers: githubAuthHeaders });
- return { endpoint: endpoint.name, status: resp.status, ok: resp.ok };
- } catch (error) {
- return {
- endpoint: endpoint.name,
- error: error instanceof Error ? error.message : String(error),
- ok: false,
- };
- }
- }),
- );
-
- // === Netlify Checks ===
- const netlifyConnectionParsed = safeJsonParse(localStorageChecks.netlifyConnection);
- const netlifyToken = netlifyConnectionParsed?.token;
- let netlifyUserCheck = null;
-
- if (netlifyToken) {
- try {
- const netlifyResp = await fetch('https://api.netlify.com/api/v1/user', {
- headers: { Authorization: `Bearer ${netlifyToken}` },
- });
- netlifyUserCheck = { status: netlifyResp.status, ok: netlifyResp.ok };
- } catch (error) {
- netlifyUserCheck = {
- error: error instanceof Error ? error.message : String(error),
- ok: false,
- };
- }
- }
-
- // === Vercel Checks ===
- const vercelConnectionParsed = safeJsonParse(localStorageChecks.vercelConnection);
- const vercelToken = vercelConnectionParsed?.token;
- let vercelUserCheck = null;
-
- if (vercelToken) {
- try {
- const vercelResp = await fetch('https://api.vercel.com/v2/user', {
- headers: { Authorization: `Bearer ${vercelToken}` },
- });
- vercelUserCheck = { status: vercelResp.status, ok: vercelResp.ok };
- } catch (error) {
- vercelUserCheck = {
- error: error instanceof Error ? error.message : String(error),
- ok: false,
- };
- }
- }
-
- // === Supabase Checks ===
- const supabaseConnectionParsed = safeJsonParse(localStorageChecks.supabaseConnection);
- const supabaseUrl = supabaseConnectionParsed?.projectUrl;
- const supabaseAnonKey = supabaseConnectionParsed?.anonKey;
- let supabaseCheck = null;
-
- if (supabaseUrl && supabaseAnonKey) {
- supabaseCheck = { ok: true, status: 200, message: 'URL and Key present in localStorage' };
- } else {
- supabaseCheck = { ok: false, message: 'URL or Key missing in localStorage' };
- }
-
- // Compile results
- const results = {
- timestamp: new Date().toISOString(),
- localStorage: {
- hasGithubConnection: Boolean(localStorageChecks.githubConnection),
- hasNetlifyConnection: Boolean(localStorageChecks.netlifyConnection),
- hasVercelConnection: Boolean(localStorageChecks.vercelConnection),
- hasSupabaseConnection: Boolean(localStorageChecks.supabaseConnection),
- githubConnectionParsed,
- netlifyConnectionParsed,
- vercelConnectionParsed,
- supabaseConnectionParsed,
- },
- apiEndpoints: {
- github: githubResults,
- netlify: netlifyUserCheck,
- vercel: vercelUserCheck,
- supabase: supabaseCheck,
- },
- serverDiagnostics,
- };
-
- setDiagnosticResults(results);
-
- // Display simple results
- if (results.localStorage.hasGithubConnection && results.apiEndpoints.github.some((r: { ok: boolean }) => !r.ok)) {
- toast.error('GitHub API connections are failing. Try reconnecting.');
- }
-
- if (results.localStorage.hasNetlifyConnection && netlifyUserCheck && !netlifyUserCheck.ok) {
- toast.error('Netlify API connection is failing. Try reconnecting.');
- }
-
- if (results.localStorage.hasVercelConnection && vercelUserCheck && !vercelUserCheck.ok) {
- toast.error('Vercel API connection is failing. Try reconnecting.');
- }
-
- if (results.localStorage.hasSupabaseConnection && supabaseCheck && !supabaseCheck.ok) {
- toast.warning('Supabase connection check failed or missing details. Verify settings.');
- }
-
- if (
- !results.localStorage.hasGithubConnection &&
- !results.localStorage.hasNetlifyConnection &&
- !results.localStorage.hasVercelConnection &&
- !results.localStorage.hasSupabaseConnection
- ) {
- toast.info('No connection data found in browser storage.');
- }
- } catch (error) {
- console.error('Diagnostics error:', error);
- toast.error('Error running diagnostics');
- setDiagnosticResults({ error: error instanceof Error ? error.message : String(error) });
- } finally {
- setIsRunning(false);
- }
- };
-
- // Helper to reset GitHub connection
- const resetGitHubConnection = () => {
- try {
- localStorage.removeItem('github_connection');
- document.cookie = 'githubToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
- document.cookie = 'githubUsername=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
- document.cookie = 'git:github.com=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
- toast.success('GitHub connection data cleared. Please refresh the page and reconnect.');
- setDiagnosticResults(null);
- } catch (error) {
- console.error('Error clearing GitHub data:', error);
- toast.error('Failed to clear GitHub connection data');
- }
- };
-
- // Helper to reset Netlify connection
- const resetNetlifyConnection = () => {
- try {
- localStorage.removeItem('netlify_connection');
- document.cookie = 'netlifyToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
- toast.success('Netlify connection data cleared. Please refresh the page and reconnect.');
- setDiagnosticResults(null);
- } catch (error) {
- console.error('Error clearing Netlify data:', error);
- toast.error('Failed to clear Netlify connection data');
- }
- };
-
- // Helper to reset Vercel connection
- const resetVercelConnection = () => {
- try {
- localStorage.removeItem('vercel_connection');
- toast.success('Vercel connection data cleared. Please refresh the page and reconnect.');
- setDiagnosticResults(null);
- } catch (error) {
- console.error('Error clearing Vercel data:', error);
- toast.error('Failed to clear Vercel connection data');
- }
- };
-
- // Helper to reset Supabase connection
- const resetSupabaseConnection = () => {
- try {
- localStorage.removeItem('supabase_connection');
- toast.success('Supabase connection data cleared. Please refresh the page and reconnect.');
- setDiagnosticResults(null);
- } catch (error) {
- console.error('Error clearing Supabase data:', error);
- toast.error('Failed to clear Supabase connection data');
- }
- };
-
- return (
- ({
- user: null,
- token: '',
- tokenType: 'classic',
- });
- const [isLoading, setIsLoading] = useState(true);
- const [isConnecting, setIsConnecting] = useState(false);
- const [isFetchingStats, setIsFetchingStats] = useState(false);
- const [isStatsExpanded, setIsStatsExpanded] = useState(false);
- const tokenTypeRef = React.useRef<'classic' | 'fine-grained'>('classic');
-
- const fetchGithubUser = async (token: string) => {
- try {
- console.log('Fetching GitHub user with token:', token.substring(0, 5) + '...');
-
- // Use server-side API endpoint instead of direct GitHub API call
- const response = await fetch(`/api/system/git-info?action=getUser`, {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`, // Include token in headers for validation
- },
- });
-
- if (!response.ok) {
- console.error('Error fetching GitHub user. Status:', response.status);
- throw new Error(`Error: ${response.status}`);
- }
-
- // Get rate limit information from headers
- const rateLimit = {
- limit: parseInt(response.headers.get('x-ratelimit-limit') || '0'),
- remaining: parseInt(response.headers.get('x-ratelimit-remaining') || '0'),
- reset: parseInt(response.headers.get('x-ratelimit-reset') || '0'),
- };
-
- const data = await response.json();
- console.log('GitHub user API response:', data);
-
- const { user } = data as { user: GitHubUserResponse };
-
- // Validate that we received a user object
- if (!user || !user.login) {
- console.error('Invalid user data received:', user);
- throw new Error('Invalid user data received');
- }
-
- // Use the response data
- setConnection((prev) => ({
- ...prev,
- user,
- token,
- tokenType: tokenTypeRef.current,
- rateLimit,
- }));
-
- // Set cookies for client-side access
- Cookies.set('githubUsername', user.login);
- Cookies.set('githubToken', token);
- Cookies.set('git:github.com', JSON.stringify({ username: token, password: 'x-oauth-basic' }));
-
- // Store connection details in localStorage
- localStorage.setItem(
- 'github_connection',
- JSON.stringify({
- user,
- token,
- tokenType: tokenTypeRef.current,
- }),
- );
-
- logStore.logInfo('Connected to GitHub', {
- type: 'system',
- message: `Connected to GitHub as ${user.login}`,
- });
-
- // Fetch additional GitHub stats
- fetchGitHubStats(token);
- } catch (error) {
- console.error('Failed to fetch GitHub user:', error);
- logStore.logError(`GitHub authentication failed: ${error instanceof Error ? error.message : 'Unknown error'}`, {
- type: 'system',
- message: 'GitHub authentication failed',
- });
-
- toast.error(`Authentication failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
- throw error; // Rethrow to allow handling in the calling function
- }
- };
-
- const fetchGitHubStats = async (token: string) => {
- setIsFetchingStats(true);
-
- try {
- // Get the current user first to ensure we have the latest value
- const userResponse = await fetch('https://api.github.com/user', {
- headers: {
- Authorization: `${connection.tokenType === 'classic' ? 'token' : 'Bearer'} ${token}`,
- },
- });
-
- if (!userResponse.ok) {
- if (userResponse.status === 401) {
- toast.error('Your GitHub token has expired. Please reconnect your account.');
- handleDisconnect();
-
- return;
- }
-
- throw new Error(`Failed to fetch user data: ${userResponse.statusText}`);
- }
-
- const userData = (await userResponse.json()) as any;
-
- // Fetch repositories with pagination
- let allRepos: any[] = [];
- let page = 1;
- let hasMore = true;
-
- while (hasMore) {
- const reposResponse = await fetch(`https://api.github.com/user/repos?per_page=100&page=${page}`, {
- headers: {
- Authorization: `${connection.tokenType === 'classic' ? 'token' : 'Bearer'} ${token}`,
- },
- });
-
- if (!reposResponse.ok) {
- throw new Error(`Failed to fetch repositories: ${reposResponse.statusText}`);
- }
-
- const repos = (await reposResponse.json()) as any[];
- allRepos = [...allRepos, ...repos];
-
- // Check if there are more pages
- const linkHeader = reposResponse.headers.get('Link');
- hasMore = linkHeader?.includes('rel="next"') ?? false;
- page++;
- }
-
- // Calculate stats
- const repoStats = calculateRepoStats(allRepos);
-
- // Fetch recent activity
- const eventsResponse = await fetch(`https://api.github.com/users/${userData.login}/events?per_page=10`, {
- headers: {
- Authorization: `${connection.tokenType === 'classic' ? 'token' : 'Bearer'} ${token}`,
- },
- });
-
- if (!eventsResponse.ok) {
- throw new Error(`Failed to fetch events: ${eventsResponse.statusText}`);
- }
-
- const events = (await eventsResponse.json()) as any[];
- const recentActivity = events.slice(0, 5).map((event: any) => ({
- id: event.id,
- type: event.type,
- repo: event.repo.name,
- created_at: event.created_at,
- }));
-
- // Calculate total stars and forks
- const totalStars = allRepos.reduce((sum: number, repo: any) => sum + repo.stargazers_count, 0);
- const totalForks = allRepos.reduce((sum: number, repo: any) => sum + repo.forks_count, 0);
- const privateRepos = allRepos.filter((repo: any) => repo.private).length;
-
- // Update the stats in the store
- const stats: GitHubStats = {
- repos: repoStats.repos,
- recentActivity,
- languages: repoStats.languages || {},
- totalGists: repoStats.totalGists || 0,
- publicRepos: userData.public_repos || 0,
- privateRepos: privateRepos || 0,
- stars: totalStars || 0,
- forks: totalForks || 0,
- followers: userData.followers || 0,
- publicGists: userData.public_gists || 0,
- privateGists: userData.private_gists || 0,
- lastUpdated: new Date().toISOString(),
-
- // For backward compatibility
- totalStars: totalStars || 0,
- totalForks: totalForks || 0,
- organizations: [],
- };
-
- // Get the current user first to ensure we have the latest value
- const currentConnection = JSON.parse(localStorage.getItem('github_connection') || '{}');
- const currentUser = currentConnection.user || connection.user;
-
- // Update connection with stats
- const updatedConnection: GitHubConnection = {
- user: currentUser,
- token,
- tokenType: connection.tokenType,
- stats,
- rateLimit: connection.rateLimit,
- };
-
- // Update localStorage
- localStorage.setItem('github_connection', JSON.stringify(updatedConnection));
-
- // Update state
- setConnection(updatedConnection);
-
- toast.success('GitHub stats refreshed');
- } catch (error) {
- console.error('Error fetching GitHub stats:', error);
- toast.error(`Failed to fetch GitHub stats: ${error instanceof Error ? error.message : 'Unknown error'}`);
- } finally {
- setIsFetchingStats(false);
- }
- };
-
- const calculateRepoStats = (repos: any[]) => {
- const repoStats = {
- repos: repos.map((repo: any) => ({
- name: repo.name,
- full_name: repo.full_name,
- html_url: repo.html_url,
- description: repo.description,
- stargazers_count: repo.stargazers_count,
- forks_count: repo.forks_count,
- default_branch: repo.default_branch,
- updated_at: repo.updated_at,
- languages_url: repo.languages_url,
- })),
-
- languages: {} as Record,
- totalGists: 0,
- };
-
- repos.forEach((repo: any) => {
- fetch(repo.languages_url)
- .then((response) => response.json())
- .then((languages: any) => {
- const typedLanguages = languages as Record;
- Object.keys(typedLanguages).forEach((language) => {
- if (!repoStats.languages[language]) {
- repoStats.languages[language] = 0;
- }
-
- repoStats.languages[language] += 1;
- });
- });
- });
-
- return repoStats;
- };
-
- useEffect(() => {
- const loadSavedConnection = async () => {
- setIsLoading(true);
-
- const savedConnection = localStorage.getItem('github_connection');
-
- if (savedConnection) {
- try {
- const parsed = JSON.parse(savedConnection);
-
- if (!parsed.tokenType) {
- parsed.tokenType = 'classic';
- }
-
- // Update the ref with the parsed token type
- tokenTypeRef.current = parsed.tokenType;
-
- // Set the connection
- setConnection(parsed);
-
- // If we have a token but no stats or incomplete stats, fetch them
- if (
- parsed.user &&
- parsed.token &&
- (!parsed.stats || !parsed.stats.repos || parsed.stats.repos.length === 0)
- ) {
- console.log('Fetching missing GitHub stats for saved connection');
- await fetchGitHubStats(parsed.token);
- }
- } catch (error) {
- console.error('Error parsing saved GitHub connection:', error);
- localStorage.removeItem('github_connection');
- }
- } else {
- // Check for environment variable token
- const envToken = import.meta.env.VITE_GITHUB_ACCESS_TOKEN;
-
- if (envToken) {
- // Check if token type is specified in environment variables
- const envTokenType = import.meta.env.VITE_GITHUB_TOKEN_TYPE;
- console.log('Environment token type:', envTokenType);
-
- const tokenType =
- envTokenType === 'classic' || envTokenType === 'fine-grained'
- ? (envTokenType as 'classic' | 'fine-grained')
- : 'classic';
-
- console.log('Using token type:', tokenType);
-
- // Update both the state and the ref
- tokenTypeRef.current = tokenType;
- setConnection((prev) => ({
- ...prev,
- tokenType,
- }));
-
- try {
- // Fetch user data with the environment token
- await fetchGithubUser(envToken);
- } catch (error) {
- console.error('Failed to connect with environment token:', error);
- }
- }
- }
-
- setIsLoading(false);
- };
-
- loadSavedConnection();
- }, []);
-
- // Ensure cookies are updated when connection changes
- useEffect(() => {
- if (!connection) {
- return;
- }
-
- const token = connection.token;
- const data = connection.user;
-
- if (token) {
- Cookies.set('githubToken', token);
- Cookies.set('git:github.com', JSON.stringify({ username: token, password: 'x-oauth-basic' }));
- }
-
- if (data) {
- Cookies.set('githubUsername', data.login);
- }
- }, [connection]);
-
- // Add function to update rate limits
- const updateRateLimits = async (token: string) => {
- try {
- const response = await fetch('https://api.github.com/rate_limit', {
- headers: {
- Authorization: `Bearer ${token}`,
- Accept: 'application/vnd.github.v3+json',
- },
- });
-
- if (response.ok) {
- const rateLimit = {
- limit: parseInt(response.headers.get('x-ratelimit-limit') || '0'),
- remaining: parseInt(response.headers.get('x-ratelimit-remaining') || '0'),
- reset: parseInt(response.headers.get('x-ratelimit-reset') || '0'),
- };
-
- setConnection((prev) => ({
- ...prev,
- rateLimit,
- }));
- }
- } catch (error) {
- console.error('Failed to fetch rate limits:', error);
- }
- };
-
- // Add effect to update rate limits periodically
- useEffect(() => {
- let interval: NodeJS.Timeout;
-
- if (connection.token && connection.user) {
- updateRateLimits(connection.token);
- interval = setInterval(() => updateRateLimits(connection.token), 60000); // Update every minute
- }
-
- return () => {
- if (interval) {
- clearInterval(interval);
- }
- };
- }, [connection.token, connection.user]);
-
- if (isLoading || isConnecting || isFetchingStats) {
- return
-
- );
-}
-
-function LoadingSpinner() {
- return (
- >;
- onSave: (e: React.FormEvent) => void;
- onDisconnect: () => void;
-}
-
-export function ConnectionForm({ authState, setAuthState, onSave, onDisconnect }: ConnectionFormProps) {
- // Check for saved token on mount
- useEffect(() => {
- const savedToken = Cookies.get(GITHUB_TOKEN_KEY) || Cookies.get('githubToken') || getLocalStorage(GITHUB_TOKEN_KEY);
-
- if (savedToken && !authState.tokenInfo?.token) {
- setAuthState((prev: GitHubAuthState) => ({
- ...prev,
- tokenInfo: {
- token: savedToken,
- scope: [],
- avatar_url: '',
- name: null,
- created_at: new Date().toISOString(),
- followers: 0,
- },
- }));
-
- // Ensure the token is also saved with the correct key for API requests
- Cookies.set('githubToken', savedToken);
- }
- }, []);
-
- return (
-
-
-
-
- Create New Branch
-
-
-
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/GitHubAuthDialog.tsx b/app/components/@settings/tabs/connections/components/GitHubAuthDialog.tsx
deleted file mode 100644
index b53a64d4cdc..00000000000
--- a/app/components/@settings/tabs/connections/components/GitHubAuthDialog.tsx
+++ /dev/null
@@ -1,190 +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 Cookies from 'js-cookie';
-import type { GitHubUserResponse } from '~/types/GitHub';
-
-interface GitHubAuthDialogProps {
- isOpen: boolean;
- onClose: () => void;
-}
-
-export function GitHubAuthDialog({ isOpen, onClose }: GitHubAuthDialogProps) {
- 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()) {
- return;
- }
-
- setIsSubmitting(true);
-
- try {
- const response = await fetch('https://api.github.com/user', {
- headers: {
- Accept: 'application/vnd.github.v3+json',
- Authorization: `Bearer ${token}`,
- },
- });
-
- if (response.ok) {
- const userData = (await response.json()) as GitHubUserResponse;
-
- // Save connection data
- const connectionData = {
- token,
- tokenType,
- user: {
- login: userData.login,
- avatar_url: userData.avatar_url,
- name: userData.name || userData.login,
- },
- connected_at: new Date().toISOString(),
- };
-
- localStorage.setItem('github_connection', JSON.stringify(connectionData));
-
- // 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' }));
-
- toast.success(`Successfully connected as ${userData.login}`);
- setToken('');
- onClose();
- } else {
- if (response.status === 401) {
- toast.error('Invalid GitHub token. Please check and try again.');
- } else {
- toast.error(`GitHub API error: ${response.status} ${response.statusText}`);
- }
- }
- } catch (error) {
- console.error('Error connecting to GitHub:', error);
- toast.error('Failed to connect to GitHub. Please try again.');
- } finally {
- setIsSubmitting(false);
- }
- };
-
- return (
- !open && onClose()}>
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/RepositoryCard.tsx b/app/components/@settings/tabs/connections/components/RepositoryCard.tsx
deleted file mode 100644
index 0d63277cd3c..00000000000
--- a/app/components/@settings/tabs/connections/components/RepositoryCard.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import type { GitHubRepoInfo } from '~/types/GitHub';
-
-interface RepositoryCardProps {
- repo: GitHubRepoInfo;
- onSelect: () => void;
-}
-
-import { useMemo } from 'react';
-
-export function RepositoryCard({ repo, onSelect }: RepositoryCardProps) {
- // Use a consistent styling for all repository cards
- const getCardStyle = () => {
- return 'from-bolt-elements-background-depth-1 to-bolt-elements-background-depth-1 dark:from-bolt-elements-background-depth-2-dark dark:to-bolt-elements-background-depth-2-dark';
- };
-
- // Format the date in a more readable format
- const formatDate = (dateString: string) => {
- const date = new Date(dateString);
- const now = new Date();
- const diffTime = Math.abs(now.getTime() - date.getTime());
- const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-
- if (diffDays <= 1) {
- return 'Today';
- }
-
- if (diffDays <= 2) {
- return 'Yesterday';
- }
-
- if (diffDays <= 7) {
- return `${diffDays} days ago`;
- }
-
- if (diffDays <= 30) {
- return `${Math.floor(diffDays / 7)} weeks ago`;
- }
-
- return date.toLocaleDateString(undefined, {
- year: 'numeric',
- month: 'short',
- day: 'numeric',
- });
- };
-
- const cardStyle = useMemo(() => getCardStyle(), []);
-
- // const formattedDate = useMemo(() => formatDate(repo.updated_at), [repo.updated_at]);
-
- return (
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/RepositoryDialogContext.tsx b/app/components/@settings/tabs/connections/components/RepositoryDialogContext.tsx
deleted file mode 100644
index 8a0490e2f5a..00000000000
--- a/app/components/@settings/tabs/connections/components/RepositoryDialogContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-
-// Create a context to share the setShowAuthDialog function with child components
-export interface RepositoryDialogContextType {
- setShowAuthDialog: React.Dispatch>;
-}
-
-// Default context value with a no-op function
-export const RepositoryDialogContext = createContext({
- // This is intentionally empty as it will be overridden by the provider
- setShowAuthDialog: () => {
- // No operation
- },
-});
diff --git a/app/components/@settings/tabs/connections/components/RepositoryList.tsx b/app/components/@settings/tabs/connections/components/RepositoryList.tsx
deleted file mode 100644
index d6f0abdae4f..00000000000
--- a/app/components/@settings/tabs/connections/components/RepositoryList.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useContext } from 'react';
-import type { GitHubRepoInfo } from '~/types/GitHub';
-import { EmptyState, StatusIndicator } from '~/components/ui';
-import { RepositoryCard } from './RepositoryCard';
-import { RepositoryDialogContext } from './RepositoryDialogContext';
-
-interface RepositoryListProps {
- repos: GitHubRepoInfo[];
- isLoading: boolean;
- onSelect: (repo: GitHubRepoInfo) => void;
- activeTab: string;
-}
-
-export function RepositoryList({ repos, isLoading, onSelect, activeTab }: RepositoryListProps) {
- // Access the parent component's setShowAuthDialog function
- const { setShowAuthDialog } = useContext(RepositoryDialogContext);
-
- if (isLoading) {
- return (
- setShowAuthDialog(true)}
- />
- );
- } else {
- return (
- (null);
- const [isLoading, setIsLoading] = useState(false);
- const [repositories, setRepositories] = useState([]);
- const [searchQuery, setSearchQuery] = useState('');
- const [searchResults, setSearchResults] = useState([]);
- const [activeTab, setActiveTab] = useState<'my-repos' | 'search' | 'url'>('my-repos');
- const [customUrl, setCustomUrl] = useState('');
- const [branches, setBranches] = useState<{ name: string; default?: boolean }[]>([]);
- const [selectedBranch, setSelectedBranch] = useState('');
- const [filters, setFilters] = useState({});
- const [showStatsDialog, setShowStatsDialog] = useState(false);
- const [currentStats, setCurrentStats] = useState(null);
- const [pendingGitUrl, setPendingGitUrl] = useState('');
- const [showAuthDialog, setShowAuthDialog] = useState(false);
-
- // Handle GitHub auth dialog close and refresh repositories
- const handleAuthDialogClose = () => {
- setShowAuthDialog(false);
-
- // If we're on the my-repos tab, refresh the repository list
- if (activeTab === 'my-repos') {
- fetchUserRepos();
- }
- };
-
- // Initialize GitHub connection and fetch repositories
- useEffect(() => {
- const savedConnection = getLocalStorage('github_connection');
-
- // If no connection exists but environment variables are set, create a connection
- if (!savedConnection && import.meta.env.VITE_GITHUB_ACCESS_TOKEN) {
- const token = import.meta.env.VITE_GITHUB_ACCESS_TOKEN;
- const tokenType = import.meta.env.VITE_GITHUB_TOKEN_TYPE === 'fine-grained' ? 'fine-grained' : 'classic';
-
- // Fetch GitHub user info to initialize the connection
- fetch('https://api.github.com/user', {
- headers: {
- Accept: 'application/vnd.github.v3+json',
- Authorization: `Bearer ${token}`,
- },
- })
- .then((response) => {
- if (!response.ok) {
- throw new Error('Invalid token or unauthorized');
- }
-
- return response.json();
- })
- .then((data: unknown) => {
- const userData = data as GitHubUserResponse;
-
- // Save connection to local storage
- const newConnection = {
- token,
- tokenType,
- user: {
- login: userData.login,
- avatar_url: userData.avatar_url,
- name: userData.name || userData.login,
- },
- connected_at: new Date().toISOString(),
- };
-
- localStorage.setItem('github_connection', JSON.stringify(newConnection));
-
- // Also save as 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' }));
-
- // Refresh repositories after connection is established
- if (isOpen && activeTab === 'my-repos') {
- fetchUserRepos();
- }
- })
- .catch((error) => {
- console.error('Failed to initialize GitHub connection from environment variables:', error);
- });
- }
- }, [isOpen]);
-
- // Fetch repositories when dialog opens or tab changes
- useEffect(() => {
- if (isOpen && activeTab === 'my-repos') {
- fetchUserRepos();
- }
- }, [isOpen, activeTab]);
-
- const fetchUserRepos = async () => {
- const connection = getLocalStorage('github_connection');
-
- if (!connection?.token) {
- toast.error('Please connect your GitHub account first');
- return;
- }
-
- setIsLoading(true);
-
- try {
- const response = await fetch('https://api.github.com/user/repos?sort=updated&per_page=100&type=all', {
- headers: {
- Accept: 'application/vnd.github.v3+json',
- Authorization: `Bearer ${connection.token}`,
- },
- });
-
- if (!response.ok) {
- throw new Error('Failed to fetch repositories');
- }
-
- const data = await response.json();
-
- // Add type assertion and validation
- if (
- Array.isArray(data) &&
- data.every((item) => typeof item === 'object' && item !== null && 'full_name' in item)
- ) {
- setRepositories(data as GitHubRepoInfo[]);
- } else {
- throw new Error('Invalid repository data format');
- }
- } catch (error) {
- console.error('Error fetching repos:', error);
- toast.error('Failed to fetch your repositories');
- } finally {
- setIsLoading(false);
- }
- };
-
- const handleSearch = async (query: string) => {
- setIsLoading(true);
- setSearchResults([]);
-
- try {
- let searchQuery = query;
-
- if (filters.language) {
- searchQuery += ` language:${filters.language}`;
- }
-
- if (filters.stars) {
- searchQuery += ` stars:>${filters.stars}`;
- }
-
- if (filters.forks) {
- searchQuery += ` forks:>${filters.forks}`;
- }
-
- const response = await fetch(
- `https://api.github.com/search/repositories?q=${encodeURIComponent(searchQuery)}&sort=stars&order=desc`,
- {
- headers: {
- Accept: 'application/vnd.github.v3+json',
- },
- },
- );
-
- if (!response.ok) {
- throw new Error('Failed to search repositories');
- }
-
- const data = await response.json();
-
- // Add type assertion and validation
- if (typeof data === 'object' && data !== null && 'items' in data && Array.isArray(data.items)) {
- setSearchResults(data.items as GitHubRepoInfo[]);
- } else {
- throw new Error('Invalid search results format');
- }
- } catch (error) {
- console.error('Error searching repos:', error);
- toast.error('Failed to search repositories');
- } finally {
- setIsLoading(false);
- }
- };
-
- const fetchBranches = async (repo: GitHubRepoInfo) => {
- setIsLoading(true);
-
- try {
- const connection = getLocalStorage('github_connection');
- const headers: HeadersInit = connection?.token
- ? {
- Accept: 'application/vnd.github.v3+json',
- Authorization: `Bearer ${connection.token}`,
- }
- : {};
- const response = await fetch(`https://api.github.com/repos/${repo.full_name}/branches`, {
- headers,
- });
-
- if (!response.ok) {
- throw new Error('Failed to fetch branches');
- }
-
- const data = await response.json();
-
- // Add type assertion and validation
- if (Array.isArray(data) && data.every((item) => typeof item === 'object' && item !== null && 'name' in item)) {
- setBranches(
- data.map((branch) => ({
- name: branch.name,
- default: branch.name === repo.default_branch,
- })),
- );
- } else {
- throw new Error('Invalid branch data format');
- }
- } catch (error) {
- console.error('Error fetching branches:', error);
- toast.error('Failed to fetch branches');
- } finally {
- setIsLoading(false);
- }
- };
-
- const handleRepoSelect = async (repo: GitHubRepoInfo) => {
- setSelectedRepository(repo);
- await fetchBranches(repo);
- };
-
- const formatGitUrl = (url: string): string => {
- // Remove any tree references and ensure .git extension
- const baseUrl = url
- .replace(/\/tree\/[^/]+/, '') // Remove /tree/branch-name
- .replace(/\/$/, '') // Remove trailing slash
- .replace(/\.git$/, ''); // Remove .git if present
- return `${baseUrl}.git`;
- };
-
- const verifyRepository = async (repoUrl: string): Promise => {
- try {
- // Extract branch from URL if present (format: url#branch)
- let branch: string | null = null;
- let cleanUrl = repoUrl;
-
- if (repoUrl.includes('#')) {
- const parts = repoUrl.split('#');
- cleanUrl = parts[0];
- branch = parts[1];
- }
-
- const [owner, repo] = cleanUrl
- .replace(/\.git$/, '')
- .split('/')
- .slice(-2);
-
- // Try to get token from local storage first
- const connection = getLocalStorage('github_connection');
-
- // If no connection in local storage, check environment variables
- let headers: HeadersInit = {};
-
- if (connection?.token) {
- headers = {
- Accept: 'application/vnd.github.v3+json',
- Authorization: `Bearer ${connection.token}`,
- };
- } else if (import.meta.env.VITE_GITHUB_ACCESS_TOKEN) {
- // Use token from environment variables
- headers = {
- Accept: 'application/vnd.github.v3+json',
- Authorization: `Bearer ${import.meta.env.VITE_GITHUB_ACCESS_TOKEN}`,
- };
- }
-
- // First, get the repository info to determine the default branch
- const repoInfoResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}`, {
- headers,
- });
-
- if (!repoInfoResponse.ok) {
- if (repoInfoResponse.status === 401 || repoInfoResponse.status === 403) {
- throw new Error(
- `Authentication failed (${repoInfoResponse.status}). Your GitHub token may be invalid or missing the required permissions.`,
- );
- } else if (repoInfoResponse.status === 404) {
- throw new Error(
- `Repository not found or is private (${repoInfoResponse.status}). To access private repositories, you need to connect your GitHub account or provide a valid token with appropriate permissions.`,
- );
- } else {
- throw new Error(
- `Failed to fetch repository information: ${repoInfoResponse.statusText} (${repoInfoResponse.status})`,
- );
- }
- }
-
- const repoInfo = (await repoInfoResponse.json()) as { default_branch: string };
- let defaultBranch = repoInfo.default_branch || 'main';
-
- // If a branch was specified in the URL, use that instead of the default
- if (branch) {
- defaultBranch = branch;
- }
-
- // Try to fetch the repository tree using the selected branch
- let treeResponse = await fetch(
- `https://api.github.com/repos/${owner}/${repo}/git/trees/${defaultBranch}?recursive=1`,
- {
- headers,
- },
- );
-
- // If the selected branch doesn't work, try common branch names
- if (!treeResponse.ok) {
- // Try 'master' branch if default branch failed
- treeResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/master?recursive=1`, {
- headers,
- });
-
- // If master also fails, try 'main' branch
- if (!treeResponse.ok) {
- treeResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/main?recursive=1`, {
- headers,
- });
- }
-
- // If all common branches fail, throw an error
- if (!treeResponse.ok) {
- throw new Error(
- 'Failed to fetch repository structure. Please check the repository URL and your access permissions.',
- );
- }
- }
-
- const treeData = (await treeResponse.json()) as GitHubTreeResponse;
-
- // Calculate repository stats
- let totalSize = 0;
- let totalFiles = 0;
- const languages: { [key: string]: number } = {};
- let hasPackageJson = false;
- let hasDependencies = false;
-
- for (const file of treeData.tree) {
- if (file.type === 'blob') {
- totalFiles++;
-
- if (file.size) {
- totalSize += file.size;
- }
-
- // Check for package.json
- if (file.path === 'package.json') {
- hasPackageJson = true;
-
- // Fetch package.json content to check dependencies
- const contentResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/package.json`, {
- headers,
- });
-
- if (contentResponse.ok) {
- const content = (await contentResponse.json()) as GitHubContent;
- const packageJson = JSON.parse(Buffer.from(content.content, 'base64').toString());
- hasDependencies = !!(
- packageJson.dependencies ||
- packageJson.devDependencies ||
- packageJson.peerDependencies
- );
- }
- }
-
- // Detect language based on file extension
- const ext = file.path.split('.').pop()?.toLowerCase();
-
- if (ext) {
- languages[ext] = (languages[ext] || 0) + (file.size || 0);
- }
- }
- }
-
- const stats: RepositoryStats = {
- totalFiles,
- totalSize,
- languages,
- hasPackageJson,
- hasDependencies,
- };
-
- return stats;
- } catch (error) {
- console.error('Error verifying repository:', error);
-
- // Check if it's an authentication error and show the auth dialog
- const errorMessage = error instanceof Error ? error.message : 'Failed to verify repository';
-
- if (
- errorMessage.includes('Authentication failed') ||
- errorMessage.includes('may be private') ||
- errorMessage.includes('Repository not found or is private') ||
- errorMessage.includes('Unauthorized') ||
- errorMessage.includes('401') ||
- errorMessage.includes('403') ||
- errorMessage.includes('404') ||
- errorMessage.includes('access permissions')
- ) {
- setShowAuthDialog(true);
- }
-
- toast.error(errorMessage);
-
- return null;
- }
- };
-
- const handleImport = async () => {
- try {
- let gitUrl: string;
-
- if (activeTab === 'url' && customUrl) {
- gitUrl = formatGitUrl(customUrl);
- } else if (selectedRepository) {
- gitUrl = formatGitUrl(selectedRepository.html_url);
-
- if (selectedBranch) {
- gitUrl = `${gitUrl}#${selectedBranch}`;
- }
- } else {
- return;
- }
-
- // Verify repository before importing
- const stats = await verifyRepository(gitUrl);
-
- if (!stats) {
- return;
- }
-
- setCurrentStats(stats);
- setPendingGitUrl(gitUrl);
- setShowStatsDialog(true);
- } catch (error) {
- console.error('Error preparing repository:', error);
-
- // Check if it's an authentication error
- const errorMessage = error instanceof Error ? error.message : 'Failed to prepare repository. Please try again.';
-
- // Show the GitHub auth dialog for any authentication or permission errors
- if (
- errorMessage.includes('Authentication failed') ||
- errorMessage.includes('may be private') ||
- errorMessage.includes('Repository not found or is private') ||
- errorMessage.includes('Unauthorized') ||
- errorMessage.includes('401') ||
- errorMessage.includes('403') ||
- errorMessage.includes('404') ||
- errorMessage.includes('access permissions')
- ) {
- // Directly show the auth dialog instead of just showing a toast
- setShowAuthDialog(true);
-
- toast.error(
-
- {
- if (!open) {
- handleClose();
- }
- }}
- >
-
-
- {/* Header */}
-
-
-
- {/* GitHub Auth Dialog */}
- setShowStatsDialog(false)}
- onConfirm={handleStatsConfirm}
- stats={currentStats}
- isLargeRepo={currentStats.totalSize > 50 * 1024 * 1024}
- />
- )}
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/StatsDialog.tsx b/app/components/@settings/tabs/connections/components/StatsDialog.tsx
deleted file mode 100644
index 933ae2254a6..00000000000
--- a/app/components/@settings/tabs/connections/components/StatsDialog.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { motion } from 'framer-motion';
-import type { RepositoryStats } from '~/types/GitHub';
-import { formatSize } from '~/utils/formatSize';
-import { RepositoryStats as RepoStats } from '~/components/ui';
-
-interface StatsDialogProps {
- isOpen: boolean;
- onClose: () => void;
- onConfirm: () => void;
- stats: RepositoryStats;
- isLargeRepo?: boolean;
-}
-
-export function StatsDialog({ isOpen, onClose, onConfirm, stats, isLargeRepo }: StatsDialogProps) {
- return (
- !open && onClose()}>
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/types/GitHub.ts b/app/components/@settings/tabs/connections/types/GitHub.ts
deleted file mode 100644
index f2f1af6bcaa..00000000000
--- a/app/components/@settings/tabs/connections/types/GitHub.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-export interface GitHubUserResponse {
- login: string;
- avatar_url: string;
- html_url: string;
- name: string;
- bio: string;
- public_repos: number;
- followers: number;
- following: number;
- public_gists: number;
- created_at: string;
- updated_at: string;
-}
-
-export interface GitHubRepoInfo {
- name: string;
- full_name: string;
- html_url: string;
- description: string;
- stargazers_count: number;
- forks_count: number;
- default_branch: string;
- updated_at: string;
- language: string;
- languages_url: string;
-}
-
-export interface GitHubOrganization {
- login: string;
- avatar_url: string;
- description: string;
- html_url: string;
-}
-
-export interface GitHubEvent {
- id: string;
- type: string;
- created_at: string;
- repo: {
- name: string;
- url: string;
- };
- payload: {
- action?: string;
- ref?: string;
- ref_type?: string;
- description?: string;
- };
-}
-
-export interface GitHubLanguageStats {
- [key: string]: number;
-}
-
-export interface GitHubStats {
- repos: GitHubRepoInfo[];
- totalStars: number;
- totalForks: number;
- organizations: GitHubOrganization[];
- recentActivity: GitHubEvent[];
- languages: GitHubLanguageStats;
- totalGists: number;
-}
-
-export interface GitHubConnection {
- user: GitHubUserResponse | null;
- token: string;
- tokenType: 'classic' | 'fine-grained';
- stats?: GitHubStats;
-}
-
-export interface GitHubTokenInfo {
- token: string;
- scope: string[];
- avatar_url: string;
- name: string | null;
- created_at: string;
- followers: number;
-}
-
-export interface GitHubRateLimits {
- limit: number;
- remaining: number;
- reset: Date;
- used: number;
-}
-
-export interface GitHubAuthState {
- username: string;
- tokenInfo: GitHubTokenInfo | null;
- isConnected: boolean;
- isVerifying: boolean;
- isLoadingRepos: boolean;
- rateLimits?: GitHubRateLimits;
-}
diff --git a/app/components/@settings/tabs/debug/DebugTab.tsx b/app/components/@settings/tabs/debug/DebugTab.tsx
deleted file mode 100644
index 24931aaf62c..00000000000
--- a/app/components/@settings/tabs/debug/DebugTab.tsx
+++ /dev/null
@@ -1,2110 +0,0 @@
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { classNames } from '~/utils/classNames';
-import { logStore, type LogEntry } from '~/lib/stores/logs';
-import { useStore } from '@nanostores/react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/Collapsible';
-import { Progress } from '~/components/ui/Progress';
-import { ScrollArea } from '~/components/ui/ScrollArea';
-import { Badge } from '~/components/ui/Badge';
-import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
-import { jsPDF } from 'jspdf';
-import { useSettings } from '~/lib/hooks/useSettings';
-
-interface SystemInfo {
- os: string;
- arch: string;
- platform: string;
- cpus: string;
- memory: {
- total: string;
- free: string;
- used: string;
- percentage: number;
- };
- node: string;
- browser: {
- name: string;
- version: string;
- language: string;
- userAgent: string;
- cookiesEnabled: boolean;
- online: boolean;
- platform: string;
- cores: number;
- };
- screen: {
- width: number;
- height: number;
- colorDepth: number;
- pixelRatio: number;
- };
- time: {
- timezone: string;
- offset: number;
- locale: string;
- };
- performance: {
- memory: {
- jsHeapSizeLimit: number;
- totalJSHeapSize: number;
- usedJSHeapSize: number;
- usagePercentage: number;
- };
- timing: {
- loadTime: number;
- domReadyTime: number;
- readyStart: number;
- redirectTime: number;
- appcacheTime: number;
- unloadEventTime: number;
- lookupDomainTime: number;
- connectTime: number;
- requestTime: number;
- initDomTreeTime: number;
- loadEventTime: number;
- };
- navigation: {
- type: number;
- redirectCount: number;
- };
- };
- network: {
- downlink: number;
- effectiveType: string;
- rtt: number;
- saveData: boolean;
- type: string;
- };
- battery?: {
- charging: boolean;
- chargingTime: number;
- dischargingTime: number;
- level: number;
- };
- storage: {
- quota: number;
- usage: number;
- persistent: boolean;
- temporary: boolean;
- };
-}
-
-interface GitHubRepoInfo {
- fullName: string;
- defaultBranch: string;
- stars: number;
- forks: number;
- openIssues?: number;
-}
-
-interface GitInfo {
- local: {
- commitHash: string;
- branch: string;
- commitTime: string;
- author: string;
- email: string;
- remoteUrl: string;
- repoName: string;
- };
- github?: {
- currentRepo: GitHubRepoInfo;
- upstream?: GitHubRepoInfo;
- };
- isForked?: boolean;
-}
-
-interface WebAppInfo {
- name: string;
- version: string;
- description: string;
- license: string;
- environment: string;
- timestamp: string;
- runtimeInfo: {
- nodeVersion: string;
- };
- dependencies: {
- production: Array<{ name: string; version: string; type: string }>;
- development: Array<{ name: string; version: string; type: string }>;
- peer: Array<{ name: string; version: string; type: string }>;
- optional: Array<{ name: string; version: string; type: string }>;
- };
- gitInfo: GitInfo;
-}
-
-// Add Ollama service status interface
-interface OllamaServiceStatus {
- isRunning: boolean;
- lastChecked: Date;
- error?: string;
- models?: Array<{
- name: string;
- size: string;
- quantization: string;
- }>;
-}
-
-interface ExportFormat {
- id: string;
- label: string;
- icon: string;
- handler: () => void;
-}
-
-const DependencySection = ({
- title,
- deps,
-}: {
- title: string;
- deps: Array<{ name: string; version: string; type: string }>;
-}) => {
- const [isOpen, setIsOpen] = useState(false);
-
- if (deps.length === 0) {
- return null;
- }
-
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-export default function DebugTab() {
- const [systemInfo, setSystemInfo] = useState(null);
- const [webAppInfo, setWebAppInfo] = useState(null);
- const [ollamaStatus, setOllamaStatus] = useState({
- isRunning: false,
- lastChecked: new Date(),
- });
- const [loading, setLoading] = useState({
- systemInfo: false,
- webAppInfo: false,
- errors: false,
- performance: false,
- });
- const [openSections, setOpenSections] = useState({
- system: false,
- webapp: false,
- errors: false,
- performance: false,
- });
-
- const { providers } = useSettings();
-
- // Subscribe to logStore updates
- const logs = useStore(logStore.logs);
- const errorLogs = useMemo(() => {
- return Object.values(logs).filter(
- (log): log is LogEntry => typeof log === 'object' && log !== null && 'level' in log && log.level === 'error',
- );
- }, [logs]);
-
- // Set up error listeners when component mounts
- useEffect(() => {
- const handleError = (event: ErrorEvent) => {
- logStore.logError(event.message, event.error, {
- filename: event.filename,
- lineNumber: event.lineno,
- columnNumber: event.colno,
- });
- };
-
- const handleRejection = (event: PromiseRejectionEvent) => {
- logStore.logError('Unhandled Promise Rejection', event.reason);
- };
-
- window.addEventListener('error', handleError);
- window.addEventListener('unhandledrejection', handleRejection);
-
- return () => {
- window.removeEventListener('error', handleError);
- window.removeEventListener('unhandledrejection', handleRejection);
- };
- }, []);
-
- // Check for errors when the errors section is opened
- useEffect(() => {
- if (openSections.errors) {
- checkErrors();
- }
- }, [openSections.errors]);
-
- // Load initial data when component mounts
- useEffect(() => {
- const loadInitialData = async () => {
- await Promise.all([getSystemInfo(), getWebAppInfo()]);
- };
-
- loadInitialData();
- }, []);
-
- // Refresh data when sections are opened
- useEffect(() => {
- if (openSections.system) {
- getSystemInfo();
- }
-
- if (openSections.webapp) {
- getWebAppInfo();
- }
- }, [openSections.system, openSections.webapp]);
-
- // Add periodic refresh of git info
- useEffect(() => {
- if (!openSections.webapp) {
- return undefined;
- }
-
- // Initial fetch
- const fetchGitInfo = async () => {
- try {
- const response = await fetch('/api/system/git-info');
- const updatedGitInfo = (await response.json()) as GitInfo;
-
- setWebAppInfo((prev) => {
- if (!prev) {
- return null;
- }
-
- // Only update if the data has changed
- if (JSON.stringify(prev.gitInfo) === JSON.stringify(updatedGitInfo)) {
- return prev;
- }
-
- return {
- ...prev,
- gitInfo: updatedGitInfo,
- };
- });
- } catch (error) {
- console.error('Failed to fetch git info:', error);
- }
- };
-
- fetchGitInfo();
-
- // Refresh every 5 minutes instead of every second
- const interval = setInterval(fetchGitInfo, 5 * 60 * 1000);
-
- return () => clearInterval(interval);
- }, [openSections.webapp]);
-
- const getSystemInfo = async () => {
- try {
- setLoading((prev) => ({ ...prev, systemInfo: true }));
-
- // Get better OS detection
- const userAgent = navigator.userAgent;
- let detectedOS = 'Unknown';
- let detectedArch = 'unknown';
-
- // Improved OS detection
- if (userAgent.indexOf('Win') !== -1) {
- detectedOS = 'Windows';
- } else if (userAgent.indexOf('Mac') !== -1) {
- detectedOS = 'macOS';
- } else if (userAgent.indexOf('Linux') !== -1) {
- detectedOS = 'Linux';
- } else if (userAgent.indexOf('Android') !== -1) {
- detectedOS = 'Android';
- } else if (/iPhone|iPad|iPod/.test(userAgent)) {
- detectedOS = 'iOS';
- }
-
- // Better architecture detection
- if (userAgent.indexOf('x86_64') !== -1 || userAgent.indexOf('x64') !== -1 || userAgent.indexOf('WOW64') !== -1) {
- detectedArch = 'x64';
- } else if (userAgent.indexOf('x86') !== -1 || userAgent.indexOf('i686') !== -1) {
- detectedArch = 'x86';
- } else if (userAgent.indexOf('arm64') !== -1 || userAgent.indexOf('aarch64') !== -1) {
- detectedArch = 'arm64';
- } else if (userAgent.indexOf('arm') !== -1) {
- detectedArch = 'arm';
- }
-
- // Get browser info with improved detection
- const browserName = (() => {
- if (userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Edg/') !== -1) {
- return 'Edge';
- }
-
- if (userAgent.indexOf('Chrome') !== -1) {
- return 'Chrome';
- }
-
- if (userAgent.indexOf('Firefox') !== -1) {
- return 'Firefox';
- }
-
- if (userAgent.indexOf('Safari') !== -1) {
- return 'Safari';
- }
-
- return 'Unknown';
- })();
-
- const browserVersionMatch = userAgent.match(/(Edge|Edg|Chrome|Firefox|Safari)[\s/](\d+(\.\d+)*)/);
- const browserVersion = browserVersionMatch ? browserVersionMatch[2] : 'Unknown';
-
- // Get performance metrics
- const memory = (performance as any).memory || {};
- const timing = performance.timing;
- const navigation = performance.navigation;
- const connection = (navigator as any).connection || {};
-
- // Try to use Navigation Timing API Level 2 when available
- let loadTime = 0;
- let domReadyTime = 0;
-
- try {
- const navEntries = performance.getEntriesByType('navigation');
-
- if (navEntries.length > 0) {
- const navTiming = navEntries[0] as PerformanceNavigationTiming;
- loadTime = navTiming.loadEventEnd - navTiming.startTime;
- domReadyTime = navTiming.domContentLoadedEventEnd - navTiming.startTime;
- } else {
- // Fall back to older API
- loadTime = timing.loadEventEnd - timing.navigationStart;
- domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
- }
- } catch {
- // Fall back to older API if Navigation Timing API Level 2 is not available
- loadTime = timing.loadEventEnd - timing.navigationStart;
- domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
- }
-
- // Get battery info
- let batteryInfo;
-
- try {
- const battery = await (navigator as any).getBattery();
- batteryInfo = {
- charging: battery.charging,
- chargingTime: battery.chargingTime,
- dischargingTime: battery.dischargingTime,
- level: battery.level * 100,
- };
- } catch {
- console.log('Battery API not supported');
- }
-
- // Get storage info
- let storageInfo = {
- quota: 0,
- usage: 0,
- persistent: false,
- temporary: false,
- };
-
- try {
- const storage = await navigator.storage.estimate();
- const persistent = await navigator.storage.persist();
- storageInfo = {
- quota: storage.quota || 0,
- usage: storage.usage || 0,
- persistent,
- temporary: !persistent,
- };
- } catch {
- console.log('Storage API not supported');
- }
-
- // Get memory info from browser performance API
- const performanceMemory = (performance as any).memory || {};
- const totalMemory = performanceMemory.jsHeapSizeLimit || 0;
- const usedMemory = performanceMemory.usedJSHeapSize || 0;
- const freeMemory = totalMemory - usedMemory;
- const memoryPercentage = totalMemory ? (usedMemory / totalMemory) * 100 : 0;
-
- const systemInfo: SystemInfo = {
- os: detectedOS,
- arch: detectedArch,
- platform: navigator.platform || 'unknown',
- cpus: navigator.hardwareConcurrency + ' cores',
- memory: {
- total: formatBytes(totalMemory),
- free: formatBytes(freeMemory),
- used: formatBytes(usedMemory),
- percentage: Math.round(memoryPercentage),
- },
- node: 'browser',
- browser: {
- name: browserName,
- version: browserVersion,
- language: navigator.language,
- userAgent: navigator.userAgent,
- cookiesEnabled: navigator.cookieEnabled,
- online: navigator.onLine,
- platform: navigator.platform || 'unknown',
- cores: navigator.hardwareConcurrency,
- },
- screen: {
- width: window.screen.width,
- height: window.screen.height,
- colorDepth: window.screen.colorDepth,
- pixelRatio: window.devicePixelRatio,
- },
- time: {
- timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
- offset: new Date().getTimezoneOffset(),
- locale: navigator.language,
- },
- performance: {
- memory: {
- jsHeapSizeLimit: memory.jsHeapSizeLimit || 0,
- totalJSHeapSize: memory.totalJSHeapSize || 0,
- usedJSHeapSize: memory.usedJSHeapSize || 0,
- usagePercentage: memory.totalJSHeapSize ? (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100 : 0,
- },
- timing: {
- loadTime,
- domReadyTime,
- readyStart: timing.fetchStart - timing.navigationStart,
- redirectTime: timing.redirectEnd - timing.redirectStart,
- appcacheTime: timing.domainLookupStart - timing.fetchStart,
- unloadEventTime: timing.unloadEventEnd - timing.unloadEventStart,
- lookupDomainTime: timing.domainLookupEnd - timing.domainLookupStart,
- connectTime: timing.connectEnd - timing.connectStart,
- requestTime: timing.responseEnd - timing.requestStart,
- initDomTreeTime: timing.domInteractive - timing.responseEnd,
- loadEventTime: timing.loadEventEnd - timing.loadEventStart,
- },
- navigation: {
- type: navigation.type,
- redirectCount: navigation.redirectCount,
- },
- },
- network: {
- downlink: connection?.downlink || 0,
- effectiveType: connection?.effectiveType || 'unknown',
- rtt: connection?.rtt || 0,
- saveData: connection?.saveData || false,
- type: connection?.type || 'unknown',
- },
- battery: batteryInfo,
- storage: storageInfo,
- };
-
- setSystemInfo(systemInfo);
- toast.success('System information updated');
- } catch (error) {
- toast.error('Failed to get system information');
- console.error('Failed to get system information:', error);
- } finally {
- setLoading((prev) => ({ ...prev, systemInfo: false }));
- }
- };
-
- // Helper function to format bytes to human readable format with better precision
- const formatBytes = (bytes: number) => {
- if (bytes === 0) {
- return '0 B';
- }
-
- const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
- const i = Math.floor(Math.log(bytes) / Math.log(1024));
-
- // Return with proper precision based on unit size
- if (i === 0) {
- return `${bytes} ${units[i]}`;
- }
-
- return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
- };
-
- const getWebAppInfo = async () => {
- try {
- setLoading((prev) => ({ ...prev, webAppInfo: true }));
-
- const [appResponse, gitResponse] = await Promise.all([
- fetch('/api/system/app-info'),
- fetch('/api/system/git-info'),
- ]);
-
- if (!appResponse.ok || !gitResponse.ok) {
- throw new Error('Failed to fetch webapp info');
- }
-
- const appData = (await appResponse.json()) as Omit;
- const gitData = (await gitResponse.json()) as GitInfo;
-
- console.log('Git Info Response:', gitData); // Add logging to debug
-
- setWebAppInfo({
- ...appData,
- gitInfo: gitData,
- });
-
- toast.success('WebApp information updated');
-
- return true;
- } catch (error) {
- console.error('Failed to fetch webapp info:', error);
- toast.error('Failed to fetch webapp information');
- setWebAppInfo(null);
-
- return false;
- } finally {
- setLoading((prev) => ({ ...prev, webAppInfo: false }));
- }
- };
-
- const handleLogPerformance = () => {
- try {
- setLoading((prev) => ({ ...prev, performance: true }));
-
- // Get performance metrics using modern Performance API
- const performanceEntries = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
- const memory = (performance as any).memory;
-
- // Calculate timing metrics
- const timingMetrics = {
- loadTime: performanceEntries.loadEventEnd - performanceEntries.startTime,
- domReadyTime: performanceEntries.domContentLoadedEventEnd - performanceEntries.startTime,
- fetchTime: performanceEntries.responseEnd - performanceEntries.fetchStart,
- redirectTime: performanceEntries.redirectEnd - performanceEntries.redirectStart,
- dnsTime: performanceEntries.domainLookupEnd - performanceEntries.domainLookupStart,
- tcpTime: performanceEntries.connectEnd - performanceEntries.connectStart,
- ttfb: performanceEntries.responseStart - performanceEntries.requestStart,
- processingTime: performanceEntries.loadEventEnd - performanceEntries.responseEnd,
- };
-
- // Get resource timing data
- const resourceEntries = performance.getEntriesByType('resource');
- const resourceStats = {
- totalResources: resourceEntries.length,
- totalSize: resourceEntries.reduce((total, entry) => total + ((entry as any).transferSize || 0), 0),
- totalTime: Math.max(...resourceEntries.map((entry) => entry.duration)),
- };
-
- // Get memory metrics
- const memoryMetrics = memory
- ? {
- jsHeapSizeLimit: memory.jsHeapSizeLimit,
- totalJSHeapSize: memory.totalJSHeapSize,
- usedJSHeapSize: memory.usedJSHeapSize,
- heapUtilization: (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100,
- }
- : null;
-
- // Get frame rate metrics
- let fps = 0;
-
- if ('requestAnimationFrame' in window) {
- const times: number[] = [];
-
- function calculateFPS(now: number) {
- times.push(now);
-
- if (times.length > 10) {
- const fps = Math.round((1000 * 10) / (now - times[0]));
- times.shift();
-
- return fps;
- }
-
- requestAnimationFrame(calculateFPS);
-
- return 0;
- }
-
- fps = calculateFPS(performance.now());
- }
-
- // Log all performance metrics
- logStore.logSystem('Performance Metrics', {
- timing: timingMetrics,
- resources: resourceStats,
- memory: memoryMetrics,
- fps,
- timestamp: new Date().toISOString(),
- navigationEntry: {
- type: performanceEntries.type,
- redirectCount: performanceEntries.redirectCount,
- },
- });
-
- toast.success('Performance metrics logged');
- } catch (error) {
- toast.error('Failed to log performance metrics');
- console.error('Failed to log performance metrics:', error);
- } finally {
- setLoading((prev) => ({ ...prev, performance: false }));
- }
- };
-
- const checkErrors = async () => {
- try {
- setLoading((prev) => ({ ...prev, errors: true }));
-
- // Get errors from log store
- const storedErrors = errorLogs;
-
- if (storedErrors.length === 0) {
- toast.success('No errors found');
- } else {
- toast.warning(`Found ${storedErrors.length} error(s)`);
- }
- } catch (error) {
- toast.error('Failed to check errors');
- console.error('Failed to check errors:', error);
- } finally {
- setLoading((prev) => ({ ...prev, errors: false }));
- }
- };
-
- const exportDebugInfo = () => {
- try {
- const debugData = {
- timestamp: new Date().toISOString(),
- system: systemInfo,
- webApp: webAppInfo,
- errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
- performance: {
- memory: (performance as any).memory || {},
- timing: performance.timing,
- navigation: performance.navigation,
- },
- };
-
- const blob = new Blob([JSON.stringify(debugData, null, 2)], { type: 'application/json' });
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = `bolt-debug-info-${new Date().toISOString()}.json`;
- document.body.appendChild(a);
- a.click();
- window.URL.revokeObjectURL(url);
- document.body.removeChild(a);
- toast.success('Debug information exported successfully');
- } catch (error) {
- console.error('Failed to export debug info:', error);
- toast.error('Failed to export debug information');
- }
- };
-
- const exportAsCSV = () => {
- try {
- const debugData = {
- system: systemInfo,
- webApp: webAppInfo,
- errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
- performance: {
- memory: (performance as any).memory || {},
- timing: performance.timing,
- navigation: performance.navigation,
- },
- };
-
- // Convert the data to CSV format
- const csvData = [
- ['Category', 'Key', 'Value'],
- ...Object.entries(debugData).flatMap(([category, data]) =>
- Object.entries(data || {}).map(([key, value]) => [
- category,
- key,
- typeof value === 'object' ? JSON.stringify(value) : String(value),
- ]),
- ),
- ];
-
- // Create CSV content
- const csvContent = csvData.map((row) => row.join(',')).join('\n');
- const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = `bolt-debug-info-${new Date().toISOString()}.csv`;
- document.body.appendChild(a);
- a.click();
- window.URL.revokeObjectURL(url);
- document.body.removeChild(a);
- toast.success('Debug information exported as CSV');
- } catch (error) {
- console.error('Failed to export CSV:', error);
- toast.error('Failed to export debug information as CSV');
- }
- };
-
- const exportAsPDF = () => {
- try {
- const debugData = {
- system: systemInfo,
- webApp: webAppInfo,
- errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
- performance: {
- memory: (performance as any).memory || {},
- timing: performance.timing,
- navigation: performance.navigation,
- },
- };
-
- // Create new PDF document
- const doc = new jsPDF();
- const lineHeight = 7;
- let yPos = 20;
- const margin = 20;
- const pageWidth = doc.internal.pageSize.getWidth();
- const maxLineWidth = pageWidth - 2 * margin;
-
- // Add key-value pair with better formatting
- const addKeyValue = (key: string, value: any, indent = 0) => {
- // Check if we need a new page
- if (yPos > doc.internal.pageSize.getHeight() - 20) {
- doc.addPage();
- yPos = margin;
- }
-
- doc.setFontSize(10);
- doc.setTextColor('#374151');
- doc.setFont('helvetica', 'bold');
-
- // Format the key with proper spacing
- const formattedKey = key.replace(/([A-Z])/g, ' $1').trim();
- doc.text(formattedKey + ':', margin + indent, yPos);
- doc.setFont('helvetica', 'normal');
- doc.setTextColor('#6B7280');
-
- let valueText;
-
- if (typeof value === 'object' && value !== null) {
- // Skip rendering if value is empty object
- if (Object.keys(value).length === 0) {
- return;
- }
-
- yPos += lineHeight;
- Object.entries(value).forEach(([subKey, subValue]) => {
- // Check for page break before each sub-item
- if (yPos > doc.internal.pageSize.getHeight() - 20) {
- doc.addPage();
- yPos = margin;
- }
-
- const formattedSubKey = subKey.replace(/([A-Z])/g, ' $1').trim();
- addKeyValue(formattedSubKey, subValue, indent + 10);
- });
-
- return;
- } else {
- valueText = String(value);
- }
-
- const valueX = margin + indent + doc.getTextWidth(formattedKey + ': ');
- const maxValueWidth = maxLineWidth - indent - doc.getTextWidth(formattedKey + ': ');
- const lines = doc.splitTextToSize(valueText, maxValueWidth);
-
- // Check if we need a new page for the value
- if (yPos + lines.length * lineHeight > doc.internal.pageSize.getHeight() - 20) {
- doc.addPage();
- yPos = margin;
- }
-
- doc.text(lines, valueX, yPos);
- yPos += lines.length * lineHeight;
- };
-
- // Add section header with page break check
- const addSectionHeader = (title: string) => {
- // Check if we need a new page
- if (yPos + 20 > doc.internal.pageSize.getHeight() - 20) {
- doc.addPage();
- yPos = margin;
- }
-
- yPos += lineHeight;
- doc.setFillColor('#F3F4F6');
- doc.rect(margin - 2, yPos - 5, pageWidth - 2 * (margin - 2), lineHeight + 6, 'F');
- doc.setFont('helvetica', 'bold');
- doc.setTextColor('#111827');
- doc.setFontSize(12);
- doc.text(title.toUpperCase(), margin, yPos);
- doc.setFont('helvetica', 'normal');
- yPos += lineHeight * 1.5;
- };
-
- // Add horizontal line with page break check
- const addHorizontalLine = () => {
- // Check if we need a new page
- if (yPos + 10 > doc.internal.pageSize.getHeight() - 20) {
- doc.addPage();
- yPos = margin;
-
- return; // Skip drawing line if we just started a new page
- }
-
- doc.setDrawColor('#E5E5E5');
- doc.line(margin, yPos, pageWidth - margin, yPos);
- yPos += lineHeight;
- };
-
- // Helper function to add footer to all pages
- const addFooters = () => {
- const totalPages = doc.internal.pages.length - 1;
-
- for (let i = 1; i <= totalPages; i++) {
- doc.setPage(i);
- doc.setFontSize(8);
- doc.setTextColor('#9CA3AF');
- doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
- align: 'center',
- });
- }
- };
-
- // Title and Header (first page only)
- doc.setFillColor('#6366F1');
- doc.rect(0, 0, pageWidth, 40, 'F');
- doc.setTextColor('#FFFFFF');
- doc.setFontSize(24);
- doc.setFont('helvetica', 'bold');
- doc.text('Debug Information Report', margin, 25);
- yPos = 50;
-
- // Timestamp and metadata
- doc.setTextColor('#6B7280');
- doc.setFontSize(10);
- doc.setFont('helvetica', 'normal');
-
- const timestamp = new Date().toLocaleString(undefined, {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- });
- doc.text(`Generated: ${timestamp}`, margin, yPos);
- yPos += lineHeight * 2;
-
- // System Information Section
- if (debugData.system) {
- addSectionHeader('System Information');
-
- // OS and Architecture
- addKeyValue('Operating System', debugData.system.os);
- addKeyValue('Architecture', debugData.system.arch);
- addKeyValue('Platform', debugData.system.platform);
- addKeyValue('CPU Cores', debugData.system.cpus);
-
- // Memory
- const memory = debugData.system.memory;
- addKeyValue('Memory', {
- 'Total Memory': memory.total,
- 'Used Memory': memory.used,
- 'Free Memory': memory.free,
- Usage: memory.percentage + '%',
- });
-
- // Browser Information
- const browser = debugData.system.browser;
- addKeyValue('Browser', {
- Name: browser.name,
- Version: browser.version,
- Language: browser.language,
- Platform: browser.platform,
- 'Cookies Enabled': browser.cookiesEnabled ? 'Yes' : 'No',
- 'Online Status': browser.online ? 'Online' : 'Offline',
- });
-
- // Screen Information
- const screen = debugData.system.screen;
- addKeyValue('Screen', {
- Resolution: `${screen.width}x${screen.height}`,
- 'Color Depth': screen.colorDepth + ' bit',
- 'Pixel Ratio': screen.pixelRatio + 'x',
- });
-
- // Time Information
- const time = debugData.system.time;
- addKeyValue('Time Settings', {
- Timezone: time.timezone,
- 'UTC Offset': time.offset / 60 + ' hours',
- Locale: time.locale,
- });
-
- addHorizontalLine();
- }
-
- // Web App Information Section
- if (debugData.webApp) {
- addSectionHeader('Web App Information');
-
- // Basic Info
- addKeyValue('Application', {
- Name: debugData.webApp.name,
- Version: debugData.webApp.version,
- Environment: debugData.webApp.environment,
- 'Node Version': debugData.webApp.runtimeInfo.nodeVersion,
- });
-
- // Git Information
- if (debugData.webApp.gitInfo) {
- const gitInfo = debugData.webApp.gitInfo.local;
- addKeyValue('Git Information', {
- Branch: gitInfo.branch,
- Commit: gitInfo.commitHash,
- Author: gitInfo.author,
- 'Commit Time': gitInfo.commitTime,
- Repository: gitInfo.repoName,
- });
-
- if (debugData.webApp.gitInfo.github) {
- const githubInfo = debugData.webApp.gitInfo.github.currentRepo;
- addKeyValue('GitHub Information', {
- Repository: githubInfo.fullName,
- 'Default Branch': githubInfo.defaultBranch,
- Stars: githubInfo.stars,
- Forks: githubInfo.forks,
- 'Open Issues': githubInfo.openIssues || 0,
- });
- }
- }
-
- addHorizontalLine();
- }
-
- // Performance Section
- if (debugData.performance) {
- addSectionHeader('Performance Metrics');
-
- // Memory Usage
- const memory = debugData.performance.memory || {};
- const totalHeap = memory.totalJSHeapSize || 0;
- const usedHeap = memory.usedJSHeapSize || 0;
- const usagePercentage = memory.usagePercentage || 0;
-
- addKeyValue('Memory Usage', {
- 'Total Heap Size': formatBytes(totalHeap),
- 'Used Heap Size': formatBytes(usedHeap),
- Usage: usagePercentage.toFixed(1) + '%',
- });
-
- // Timing Metrics
- const timing = debugData.performance.timing || {};
- const navigationStart = timing.navigationStart || 0;
- const loadEventEnd = timing.loadEventEnd || 0;
- const domContentLoadedEventEnd = timing.domContentLoadedEventEnd || 0;
- const responseEnd = timing.responseEnd || 0;
- const requestStart = timing.requestStart || 0;
-
- const loadTime = loadEventEnd > navigationStart ? loadEventEnd - navigationStart : 0;
- const domReadyTime =
- domContentLoadedEventEnd > navigationStart ? domContentLoadedEventEnd - navigationStart : 0;
- const requestTime = responseEnd > requestStart ? responseEnd - requestStart : 0;
-
- addKeyValue('Page Load Metrics', {
- 'Total Load Time': (loadTime / 1000).toFixed(2) + ' seconds',
- 'DOM Ready Time': (domReadyTime / 1000).toFixed(2) + ' seconds',
- 'Request Time': (requestTime / 1000).toFixed(2) + ' seconds',
- });
-
- // Network Information
- if (debugData.system?.network) {
- const network = debugData.system.network;
- addKeyValue('Network Information', {
- 'Connection Type': network.type || 'Unknown',
- 'Effective Type': network.effectiveType || 'Unknown',
- 'Download Speed': (network.downlink || 0) + ' Mbps',
- 'Latency (RTT)': (network.rtt || 0) + ' ms',
- 'Data Saver': network.saveData ? 'Enabled' : 'Disabled',
- });
- }
-
- addHorizontalLine();
- }
-
- // Errors Section
- if (debugData.errors && debugData.errors.length > 0) {
- addSectionHeader('Error Log');
-
- debugData.errors.forEach((error: LogEntry, index: number) => {
- doc.setTextColor('#DC2626');
- doc.setFontSize(10);
- doc.setFont('helvetica', 'bold');
- doc.text(`Error ${index + 1}:`, margin, yPos);
- yPos += lineHeight;
-
- doc.setFont('helvetica', 'normal');
- doc.setTextColor('#6B7280');
- addKeyValue('Message', error.message, 10);
-
- if (error.stack) {
- addKeyValue('Stack', error.stack, 10);
- }
-
- if (error.source) {
- addKeyValue('Source', error.source, 10);
- }
-
- yPos += lineHeight;
- });
- }
-
- // Add footers to all pages at the end
- addFooters();
-
- // Save the PDF
- doc.save(`bolt-debug-info-${new Date().toISOString()}.pdf`);
- toast.success('Debug information exported as PDF');
- } catch (error) {
- console.error('Failed to export PDF:', error);
- toast.error('Failed to export debug information as PDF');
- }
- };
-
- const exportAsText = () => {
- try {
- const debugData = {
- system: systemInfo,
- webApp: webAppInfo,
- errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
- performance: {
- memory: (performance as any).memory || {},
- timing: performance.timing,
- navigation: performance.navigation,
- },
- };
-
- const textContent = Object.entries(debugData)
- .map(([category, data]) => {
- return `${category.toUpperCase()}\n${'-'.repeat(30)}\n${JSON.stringify(data, null, 2)}\n\n`;
- })
- .join('\n');
-
- const blob = new Blob([textContent], { type: 'text/plain' });
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = `bolt-debug-info-${new Date().toISOString()}.txt`;
- document.body.appendChild(a);
- a.click();
- window.URL.revokeObjectURL(url);
- document.body.removeChild(a);
- toast.success('Debug information exported as text file');
- } catch (error) {
- console.error('Failed to export text file:', error);
- toast.error('Failed to export debug information as text file');
- }
- };
-
- const exportFormats: ExportFormat[] = [
- {
- id: 'json',
- label: 'Export as JSON',
- icon: 'i-ph:file-js',
- handler: exportDebugInfo,
- },
- {
- id: 'csv',
- label: 'Export as CSV',
- icon: 'i-ph:file-csv',
- handler: exportAsCSV,
- },
- {
- id: 'pdf',
- label: 'Export as PDF',
- icon: 'i-ph:file-pdf',
- handler: exportAsPDF,
- },
- {
- id: 'txt',
- label: 'Export as Text',
- icon: 'i-ph:file-text',
- handler: exportAsText,
- },
- ];
-
- // Add Ollama health check function
- const checkOllamaStatus = useCallback(async () => {
- try {
- const ollamaProvider = providers?.Ollama;
- const baseUrl = ollamaProvider?.settings?.baseUrl || 'http://127.0.0.1:11434';
-
- // First check if service is running
- const versionResponse = await fetch(`${baseUrl}/api/version`);
-
- if (!versionResponse.ok) {
- throw new Error('Service not running');
- }
-
- // Then fetch installed models
- const modelsResponse = await fetch(`${baseUrl}/api/tags`);
-
- const modelsData = (await modelsResponse.json()) as {
- models: Array<{ name: string; size: string; quantization: string }>;
- };
-
- setOllamaStatus({
- isRunning: true,
- lastChecked: new Date(),
- models: modelsData.models,
- });
- } catch {
- setOllamaStatus({
- isRunning: false,
- error: 'Connection failed',
- lastChecked: new Date(),
- models: undefined,
- });
- }
- }, [providers]);
-
- // Monitor Ollama provider status and check periodically
- useEffect(() => {
- const ollamaProvider = providers?.Ollama;
-
- if (ollamaProvider?.settings?.enabled) {
- // Check immediately when provider is enabled
- checkOllamaStatus();
-
- // Set up periodic checks every 10 seconds
- const intervalId = setInterval(checkOllamaStatus, 10000);
-
- return () => clearInterval(intervalId);
- }
-
- return undefined;
- }, [providers, checkOllamaStatus]);
-
- // Replace the existing export button with this new component
- const ExportButton = () => {
- const [isOpen, setIsOpen] = useState(false);
-
- const handleOpenChange = useCallback((open: boolean) => {
- setIsOpen(open);
- }, []);
-
- const handleFormatClick = useCallback((handler: () => void) => {
- handler();
- setIsOpen(false);
- }, []);
-
- return (
-
-
-
-
-
- );
- };
-
- // Add helper function to get Ollama status text and color
- const getOllamaStatus = () => {
- const ollamaProvider = providers?.Ollama;
- const isOllamaEnabled = ollamaProvider?.settings?.enabled;
-
- if (!isOllamaEnabled) {
- return {
- status: 'Disabled',
- color: 'text-red-500',
- bgColor: 'bg-red-500',
- message: 'Ollama provider is disabled in settings',
- };
- }
-
- if (!ollamaStatus.isRunning) {
- return {
- status: 'Not Running',
- color: 'text-red-500',
- bgColor: 'bg-red-500',
- message: ollamaStatus.error || 'Ollama service is not running',
- };
- }
-
- const modelCount = ollamaStatus.models?.length ?? 0;
-
- return {
- status: 'Running',
- color: 'text-green-500',
- bgColor: 'bg-green-500',
- message: `Ollama service is running with ${modelCount} installed models (Provider: Enabled)`,
- };
- };
-
- // Add type for status result
- type StatusResult = {
- status: string;
- color: string;
- bgColor: string;
- message: string;
- };
-
- const status = getOllamaStatus() as StatusResult;
-
- 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 00000000000..a4186a9bac6 --- /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/ConnectionDiagnostics.tsx b/app/components/@settings/tabs/connections/ConnectionDiagnostics.tsx deleted file mode 100644 index c14d4f9621f..00000000000 --- a/app/components/@settings/tabs/connections/ConnectionDiagnostics.tsx +++ /dev/null @@ -1,595 +0,0 @@ -import React, { useState } from 'react'; -import { toast } from 'react-toastify'; -import { Button } from '~/components/ui/Button'; -import { Badge } from '~/components/ui/Badge'; -import { classNames } from '~/utils/classNames'; -import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible'; -import { CodeBracketIcon, ChevronDownIcon } from '@heroicons/react/24/outline'; - -// Helper function to safely parse JSON -const safeJsonParse = (item: string | null) => { - if (!item) { - return null; - } - - try { - return JSON.parse(item); - } catch (e) { - console.error('Failed to parse JSON from localStorage:', e); - return null; - } -}; - -/** - * A diagnostics component to help troubleshoot connection issues - */ -export default function ConnectionDiagnostics() { - const [diagnosticResults, setDiagnosticResults] = useState
- {/* Connection Status Cards */}
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/ConnectionsTab.tsx b/app/components/@settings/tabs/connections/ConnectionsTab.tsx
deleted file mode 100644
index d61b6fdc1a2..00000000000
--- a/app/components/@settings/tabs/connections/ConnectionsTab.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { motion } from 'framer-motion';
-import React, { Suspense, useState } from 'react';
-import { classNames } from '~/utils/classNames';
-import ConnectionDiagnostics from './ConnectionDiagnostics';
-import { Button } from '~/components/ui/Button';
-import VercelConnection from './VercelConnection';
-
-// Use React.lazy for dynamic imports
-const GitHubConnection = React.lazy(() => import('./GithubConnection'));
-const NetlifyConnection = React.lazy(() => import('./NetlifyConnection'));
-
-// Loading fallback component
-const LoadingFallback = () => (
-
- {/* GitHub Connection Card */}
-
-
- {/* Action Buttons */}
-
-
-
- {/* Netlify Connection Card */}
-
-
-
- {diagnosticResults ? (
- <>
-
- GitHub Connection
-
-
-
- {diagnosticResults.localStorage.hasGithubConnection ? 'Connected' : 'Not Connected'}
-
-
- {diagnosticResults.localStorage.hasGithubConnection && (
- <>
-
-
- User: {diagnosticResults.localStorage.githubConnectionParsed?.user?.login || 'N/A'}
-
-
-
- API Status:{' '}
- r.ok)
- ? 'default'
- : 'destructive'
- }
- className="ml-1"
- >
- {diagnosticResults.apiEndpoints.github.every((r: { ok: boolean }) => r.ok) ? 'OK' : 'Failed'}
-
-
-
- )}
- {!diagnosticResults.localStorage.hasGithubConnection && (
-
- )}
-
- ) : (
-
-
- )}
-
-
- Run diagnostics to check connection status
-
-
-
-
- {/* Vercel Connection Card */}
-
-
-
- {diagnosticResults ? (
- <>
-
- Netlify Connection
-
-
-
- {diagnosticResults.localStorage.hasNetlifyConnection ? 'Connected' : 'Not Connected'}
-
-
- {diagnosticResults.localStorage.hasNetlifyConnection && (
- <>
-
-
- User:{' '}
- {diagnosticResults.localStorage.netlifyConnectionParsed?.user?.full_name ||
- diagnosticResults.localStorage.netlifyConnectionParsed?.user?.email ||
- 'N/A'}
-
-
-
- API Status:{' '}
-
- {diagnosticResults.apiEndpoints.netlify?.ok ? 'OK' : 'Failed'}
-
-
-
- )}
- {!diagnosticResults.localStorage.hasNetlifyConnection && (
-
- )}
-
- ) : (
-
-
- )}
-
-
- Run diagnostics to check connection status
-
-
-
-
- {/* Supabase Connection Card */}
-
-
-
- {diagnosticResults ? (
- <>
-
- Vercel Connection
-
-
-
- {diagnosticResults.localStorage.hasVercelConnection ? 'Connected' : 'Not Connected'}
-
-
- {diagnosticResults.localStorage.hasVercelConnection && (
- <>
-
-
- User:{' '}
- {diagnosticResults.localStorage.vercelConnectionParsed?.user?.username ||
- diagnosticResults.localStorage.vercelConnectionParsed?.user?.user?.username ||
- 'N/A'}
-
-
-
- API Status:{' '}
-
- {diagnosticResults.apiEndpoints.vercel?.ok ? 'OK' : 'Failed'}
-
-
-
- )}
- {!diagnosticResults.localStorage.hasVercelConnection && (
-
- )}
-
- ) : (
-
-
- )}
-
-
- Run diagnostics to check connection status
-
-
-
-
-
-
- {diagnosticResults ? (
- <>
-
- Supabase Connection
-
-
-
- {diagnosticResults.localStorage.hasSupabaseConnection ? 'Configured' : 'Not Configured'}
-
-
- {diagnosticResults.localStorage.hasSupabaseConnection && (
- <>
-
-
- Project URL: {diagnosticResults.localStorage.supabaseConnectionParsed?.projectUrl || 'N/A'}
-
-
-
- Config Status:{' '}
-
- {diagnosticResults.apiEndpoints.supabase?.ok ? 'OK' : 'Check Failed'}
-
-
-
- )}
- {!diagnosticResults.localStorage.hasSupabaseConnection && (
-
- )}
-
- ) : (
-
-
- )}
-
-
- Run diagnostics to check connection status
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Details Panel */}
- {diagnosticResults && (
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
- {JSON.stringify(diagnosticResults, null, 2)}
-
-
-
-);
-
-export default function ConnectionsTab() {
- const [isEnvVarsExpanded, setIsEnvVarsExpanded] = useState(false);
- const [showDiagnostics, setShowDiagnostics] = useState(false);
-
- return (
-
-
- Loading connection...
-
-
- {/* Header */}
-
-
-
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/GithubConnection.tsx b/app/components/@settings/tabs/connections/GithubConnection.tsx
deleted file mode 100644
index f57c4d16bf8..00000000000
--- a/app/components/@settings/tabs/connections/GithubConnection.tsx
+++ /dev/null
@@ -1,980 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { toast } from 'react-toastify';
-import { logStore } from '~/lib/stores/logs';
-import { classNames } from '~/utils/classNames';
-import Cookies from 'js-cookie';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
-import { Button } from '~/components/ui/Button';
-
-interface GitHubUserResponse {
- login: string;
- avatar_url: string;
- html_url: string;
- name: string;
- bio: string;
- public_repos: number;
- followers: number;
- following: number;
- created_at: string;
- public_gists: number;
-}
-
-interface GitHubRepoInfo {
- name: string;
- full_name: string;
- html_url: string;
- description: string;
- stargazers_count: number;
- forks_count: number;
- default_branch: string;
- updated_at: string;
- languages_url: string;
-}
-
-interface GitHubOrganization {
- login: string;
- avatar_url: string;
- html_url: string;
-}
-
-interface GitHubEvent {
- id: string;
- type: string;
- repo: {
- name: string;
- };
- created_at: string;
-}
-
-interface GitHubLanguageStats {
- [language: string]: number;
-}
-
-interface GitHubStats {
- repos: GitHubRepoInfo[];
- recentActivity: GitHubEvent[];
- languages: GitHubLanguageStats;
- totalGists: number;
- publicRepos: number;
- privateRepos: number;
- stars: number;
- forks: number;
- followers: number;
- publicGists: number;
- privateGists: number;
- lastUpdated: string;
-
- // Keep these for backward compatibility
- totalStars?: number;
- totalForks?: number;
- organizations?: GitHubOrganization[];
-}
-
-interface GitHubConnection {
- user: GitHubUserResponse | null;
- token: string;
- tokenType: 'classic' | 'fine-grained';
- stats?: GitHubStats;
- rateLimit?: {
- limit: number;
- remaining: number;
- reset: number;
- };
-}
-
-// Add the GitHub logo SVG component
-const GithubLogo = () => (
-
-);
-
-export default function GitHubConnection() {
- const [connection, setConnection] = useState
-
-
-
- - Connection Settings -
-- Manage your external service connections and integrations -
- - {/* Diagnostics Tool - Conditionally rendered */} - {showDiagnostics &&
-
-
- {isEnvVarsExpanded && (
-
-
-
- )}
-
- You can configure connections using environment variables in your{' '}
-
- .env.local
- {' '}
- file:
-
-
-
- # GitHub Authentication
-
-
- VITE_GITHUB_ACCESS_TOKEN=your_token_here
-
-
- # Optional: Specify token type (defaults to 'classic' if not specified)
-
-
- VITE_GITHUB_TOKEN_TYPE=classic|fine-grained
-
-
- # Netlify Authentication
-
-
- VITE_NETLIFY_ACCESS_TOKEN=your_token_here
-
-
-
- - Token types: -
--
-
-
- classic - Personal Access Token with{' '}
-
- repo, read:org, read:user -{' '} - scopes -
- - - fine-grained - Fine-grained token with Repository and - Organization access - -
- When set, these variables will be used automatically without requiring manual connection. -
-
-
-
- {/* Additional help text */}
-
-
- - - Troubleshooting Tip: -
-- If you're having trouble with connections, try using the troubleshooting tool at the top of this page. It can - help diagnose and fix common connection 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 -
-
-
-
-
- {!connection.user && (
-
-
- - GitHub Connection -
-
-
- )}
-
-
- 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
-
-
-
-
-
-
-
-
-
-
-
- setConnection((prev) => ({ ...prev, token: e.target.value }))}
- disabled={isConnecting || !!connection.user}
- placeholder={`Enter your GitHub ${
- connection.tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
- }`}
- className={classNames(
- 'w-full px-3 py-2 rounded-lg text-sm',
- 'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
- 'border border-[#E5E5E5] dark:border-[#333333]',
- 'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
- 'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
- 'disabled:opacity-50',
- )}
- />
-
-
-
- Get your token
-
-
- โข
-
- Required scopes:{' '}
- {connection.tokenType === 'classic'
- ? 'repo, read:org, read:user'
- : 'Repository access, Organization access'}
-
-
-
- {!connection.user ? (
-
- ) : (
- <>
-
-
- {connection.user && connection.stats && (
-
-
-
- )}
-
-
-
-
- Connected to GitHub
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- 
-
-
-
-
- - {connection.user.name || connection.user.login} -
-- {connection.user.login} -
-
-
-
-
- GitHub Stats
-
-
-
- {/* Languages Section */}
-
-
-
-
- {/* Additional Stats */}
- Top Languages
-
- {Object.entries(connection.stats.languages)
- .sort(([, a], [, b]) => b - a)
- .slice(0, 5)
- .map(([language]) => (
-
- {language}
-
- ))}
-
-
- {[
- {
- label: 'Member Since',
- value: new Date(connection.user.created_at).toLocaleDateString(),
- },
- {
- label: 'Public Gists',
- value: connection.stats.publicGists,
- },
- {
- label: 'Organizations',
- value: connection.stats.organizations ? connection.stats.organizations.length : 0,
- },
- {
- label: 'Languages',
- value: Object.keys(connection.stats.languages).length,
- },
- ].map((stat, index) => (
-
-
- {/* Repository Stats */}
-
- {stat.label}
- {stat.value}
-
- ))}
-
-
-
- {/* Repositories Section */}
-
-
-
-
-
- Repository Stats
-
- {[
- {
- label: 'Public Repos',
- value: connection.stats.publicRepos,
- },
- {
- label: 'Private Repos',
- value: connection.stats.privateRepos,
- },
- ].map((stat, index) => (
-
-
- {stat.label}
- {stat.value}
-
- ))}
-
-
-
- Contribution Stats
-
- {[
- {
- label: 'Stars',
- value: connection.stats.stars || 0,
- icon: 'i-ph:star',
- iconColor: 'text-bolt-elements-icon-warning',
- },
- {
- label: 'Forks',
- value: connection.stats.forks || 0,
- icon: 'i-ph:git-fork',
- iconColor: 'text-bolt-elements-icon-info',
- },
- {
- label: 'Followers',
- value: connection.stats.followers || 0,
- icon: 'i-ph:users',
- iconColor: 'text-bolt-elements-icon-success',
- },
- ].map((stat, index) => (
-
-
- {stat.label}
-
-
- {stat.value}
-
-
- ))}
-
-
-
- Gists
-
- {[
- {
- label: 'Public',
- value: connection.stats.publicGists,
- },
- {
- label: 'Private',
- value: connection.stats.privateGists || 0,
- },
- ].map((stat, index) => (
-
-
- {stat.label}
- {stat.value}
-
- ))}
-
-
- Last updated: {new Date(connection.stats.lastUpdated).toLocaleString()}
-
-
-
-
- Recent Repositories
-
- {connection.stats.repos.map((repo) => (
-
-
-
-
-
- ))}
-
-
-
- {repo.description && (
-
-
-
- - {repo.name} -
-
-
-
- {repo.stargazers_count.toLocaleString()}
-
-
-
- {repo.forks_count.toLocaleString()}
-
-
- - {repo.description} -
- )} - -
-
-
- {repo.default_branch}
-
-
-
- {new Date(repo.updated_at).toLocaleDateString(undefined, {
- year: 'numeric',
- month: 'short',
- day: 'numeric',
- })}
-
-
-
- View
-
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/ConnectionForm.tsx b/app/components/@settings/tabs/connections/components/ConnectionForm.tsx
deleted file mode 100644
index 2c9876b6eae..00000000000
--- a/app/components/@settings/tabs/connections/components/ConnectionForm.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, { useEffect } from 'react';
-import { classNames } from '~/utils/classNames';
-import type { GitHubAuthState } from '~/components/@settings/tabs/connections/types/GitHub';
-import Cookies from 'js-cookie';
-import { getLocalStorage } from '~/lib/persistence';
-
-const GITHUB_TOKEN_KEY = 'github_token';
-
-interface ConnectionFormProps {
- authState: GitHubAuthState;
- setAuthState: React.Dispatch
-
- Loading...
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/CreateBranchDialog.tsx b/app/components/@settings/tabs/connections/components/CreateBranchDialog.tsx
deleted file mode 100644
index 3fd32ff275a..00000000000
--- a/app/components/@settings/tabs/connections/components/CreateBranchDialog.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useState } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { classNames } from '~/utils/classNames';
-import type { GitHubRepoInfo } from '~/components/@settings/tabs/connections/types/GitHub';
-import { GitBranch } from '@phosphor-icons/react';
-
-interface GitHubBranch {
- name: string;
- default?: boolean;
-}
-
-interface CreateBranchDialogProps {
- isOpen: boolean;
- onClose: () => void;
- onConfirm: (branchName: string, sourceBranch: string) => void;
- repository: GitHubRepoInfo;
- branches?: GitHubBranch[];
-}
-
-export function CreateBranchDialog({ isOpen, onClose, onConfirm, repository, branches }: CreateBranchDialogProps) {
- const [branchName, setBranchName] = useState('');
- const [sourceBranch, setSourceBranch] = useState(branches?.find((b) => b.default)?.name || 'main');
-
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- onConfirm(branchName, sourceBranch);
- setBranchName('');
- onClose();
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- Connection Settings
-Configure your GitHub connection
-
-
-
-
-
-
-
-
-
- Access Private Repositories
- -- To access private repositories, you need to connect your GitHub account by providing a personal access - token. -
- -
-
-
- Connect with GitHub Token
- - -
-
- - - Accessing Private Repositories -
-- Important things to know about accessing private repositories: -
--
-
- You must be granted access to the repository by its owner -
- Your GitHub token must have the 'repo' scope -
- For organization repositories, you may need additional permissions -
- No token can give you access to repositories you don't have permission for -
-
-
-
-
-
-
-
- Import
-
-
-
- {repo.description && (
-
-
-
-
-
-
-
- - {repo.name} -
-- - {repo.full_name.split('/')[0]} -
-
-
- )}
-
- - {repo.description} -
-
- {repo.private && (
-
-
- Private
-
- )}
- {repo.language && (
-
-
- {repo.language}
-
- )}
-
-
- {repo.stargazers_count.toLocaleString()}
-
- {repo.forks_count > 0 && (
-
-
- {repo.forks_count.toLocaleString()}
-
- )}
-
-
-
-
-
- Updated {formatDate(repo.updated_at)}
-
-
- {repo.topics && repo.topics.length > 0 && (
-
- {repo.topics.slice(0, 1).map((topic) => (
-
- {topic}
-
- ))}
- {repo.topics.length > 1 && +{repo.topics.length - 1}}
-
- )}
-
-
-
- );
- }
-
- if (repos.length === 0) {
- if (activeTab === 'my-repos') {
- return (
- - This may take a moment -
-
- {repos.map((repo) => (
- onSelect(repo)} />
- ))}
-
- );
-}
diff --git a/app/components/@settings/tabs/connections/components/RepositorySelectionDialog.tsx b/app/components/@settings/tabs/connections/components/RepositorySelectionDialog.tsx
deleted file mode 100644
index 82e1fbc4831..00000000000
--- a/app/components/@settings/tabs/connections/components/RepositorySelectionDialog.tsx
+++ /dev/null
@@ -1,993 +0,0 @@
-import type { GitHubRepoInfo, GitHubContent, RepositoryStats, GitHubUserResponse } from '~/types/GitHub';
-import { useState, useEffect } from 'react';
-import { toast } from 'react-toastify';
-import * as Dialog from '@radix-ui/react-dialog';
-import { classNames } from '~/utils/classNames';
-import { getLocalStorage } from '~/lib/persistence';
-import { motion, AnimatePresence } from 'framer-motion';
-import Cookies from 'js-cookie';
-
-// Import UI components
-import { Input, SearchInput, Badge, FilterChip } from '~/components/ui';
-
-// Import the components we've extracted
-import { RepositoryList } from './RepositoryList';
-import { StatsDialog } from './StatsDialog';
-import { GitHubAuthDialog } from './GitHubAuthDialog';
-import { RepositoryDialogContext } from './RepositoryDialogContext';
-
-interface GitHubTreeResponse {
- tree: Array<{
- path: string;
- type: string;
- size?: number;
- }>;
-}
-
-interface RepositorySelectionDialogProps {
- isOpen: boolean;
- onClose: () => void;
- onSelect: (url: string) => void;
-}
-
-interface SearchFilters {
- language?: string;
- stars?: number;
- forks?: number;
-}
-
-export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: RepositorySelectionDialogProps) {
- const [selectedRepository, setSelectedRepository] = useState
-
,
- { autoClose: 10000 }, // Keep the toast visible longer
- );
- } else {
- toast.error(errorMessage);
- }
- }
- };
-
- const handleStatsConfirm = () => {
- setShowStatsDialog(false);
-
- if (pendingGitUrl) {
- onSelect(pendingGitUrl);
- onClose();
- }
- };
-
- const handleFilterChange = (key: keyof SearchFilters, value: string) => {
- let parsedValue: string | number | undefined = value;
-
- if (key === 'stars' || key === 'forks') {
- parsedValue = value ? parseInt(value, 10) : undefined;
- }
-
- setFilters((prev) => ({ ...prev, [key]: parsedValue }));
- handleSearch(searchQuery);
- };
-
- // Handle dialog close properly
- const handleClose = () => {
- setIsLoading(false); // Reset loading state
- setSearchQuery(''); // Reset search
- setSearchResults([]); // Reset results
- onClose();
- };
-
- return (
- {errorMessage}
- -
-
-
- Close dialog
-
-
-
- {/* Auth Info Banner */}
-
-
-
-
-
-
-
- Import GitHub Repository
-
-
- - Clone a repository from GitHub to your workspace -
-
- setShowAuthDialog(true)}
- className="px-3 py-1.5 rounded-lg bg-purple-500 hover:bg-purple-600 text-white text-sm transition-colors flex items-center gap-1.5 shadow-sm"
- whileHover={{ scale: 1.02, boxShadow: '0 4px 8px rgba(124, 58, 237, 0.2)' }}
- whileTap={{ scale: 0.98 }}
- >
-
- Connect GitHub Account
-
-
-
- {/* Content */}
-
-
-
- Need to access private repositories?
-
-
-
- {/* Tabs */}
-
-
-
-
- {activeTab === 'url' ? (
-
-
-
-
-
-
-
-
-
-
- Import Repository
-
-
- ) : (
- <>
- {activeTab === 'search' && (
-
-
-
- - - Repository URL -
- -
-
-
-
-
-
- setCustomUrl(e.target.value)}
- className="w-full pl-10 py-3 border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- />
-
-
-
-
-
- You can paste any GitHub repository URL, including specific branches or tags.
-
-
- Example: https://github.com/username/repository/tree/branch-name
-
-
-
-
- Ready to import?
-
-
-
-
-
- )}
-
-
-
- - - Search GitHub -
- -
- setFilters({})}
- className="px-3 py-2 rounded-lg bg-white dark:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-sm"
- whileHover={{ scale: 1.05 }}
- whileTap={{ scale: 0.95 }}
- title="Clear filters"
- >
-
-
-
-
-
- {
- setSearchQuery(e.target.value);
-
- if (e.target.value.length > 2) {
- handleSearch(e.target.value);
- }
- }}
- onKeyDown={(e) => {
- if (e.key === 'Enter' && searchQuery.length > 2) {
- handleSearch(searchQuery);
- }
- }}
- onClear={() => {
- setSearchQuery('');
- setSearchResults([]);
- }}
- iconClassName="text-blue-500"
- className="py-3 bg-white dark:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
- loading={isLoading}
- />
-
-
-
-
-
- Filters
-
-
- {/* Active filters */}
- {(filters.language || filters.stars || filters.forks) && (
-
-
- {filters.language && (
- {
- const newFilters = { ...filters };
- delete newFilters.language;
- setFilters(newFilters);
-
- if (searchQuery.length > 2) {
- handleSearch(searchQuery);
- }
- }}
- />
- )}
- {filters.stars && (
- ${filters.stars}`}
- icon="i-ph:star"
- active
- onRemove={() => {
- const newFilters = { ...filters };
- delete newFilters.stars;
- setFilters(newFilters);
-
- if (searchQuery.length > 2) {
- handleSearch(searchQuery);
- }
- }}
- />
- )}
- {filters.forks && (
- ${filters.forks}`}
- icon="i-ph:git-fork"
- active
- onRemove={() => {
- const newFilters = { ...filters };
- delete newFilters.forks;
- setFilters(newFilters);
-
- if (searchQuery.length > 2) {
- handleSearch(searchQuery);
- }
- }}
- />
- )}
-
-
- )}
-
-
-
-
-
-
-
-
- {
- setFilters({ ...filters, language: e.target.value });
-
- if (searchQuery.length > 2) {
- handleSearch(searchQuery);
- }
- }}
- className="w-full pl-8 px-3 py-2 text-sm rounded-lg bg-white dark:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark focus:outline-none focus:ring-2 focus:ring-blue-500"
- />
-
-
-
-
-
- handleFilterChange('stars', e.target.value)}
- className="w-full pl-8 px-3 py-2 text-sm rounded-lg bg-white dark:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark focus:outline-none focus:ring-2 focus:ring-blue-500"
- />
-
-
-
-
-
- handleFilterChange('forks', e.target.value)}
- className="w-full pl-8 px-3 py-2 text-sm rounded-lg bg-white dark:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark focus:outline-none focus:ring-2 focus:ring-blue-500"
- />
-
-
- - - - Search for repositories by name, description, or topics. Use filters to narrow down - results. - -
-
- {selectedRepository ? (
-
-
- )}
-
-
-
- Import {selectedRepository.name}
-
-
- ) : (
-
-
- Private
-
- )}
-
-
- {selectedRepository.description && (
-
- setSelectedRepository(null)}
- className="p-2 rounded-lg hover:bg-white dark:hover:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary shadow-sm"
- whileHover={{ scale: 1.1 }}
- whileTap={{ scale: 0.9 }}
- >
-
-
-
-
- {selectedRepository.private && (
-
-
- - {selectedRepository.name} -
-- - {selectedRepository.full_name.split('/')[0]} -
-
-
- )}
-
- - {selectedRepository.description} -
-
- {selectedRepository.language && (
-
- {selectedRepository.language}
-
- )}
-
- {selectedRepository.stargazers_count.toLocaleString()}
-
- {selectedRepository.forks_count > 0 && (
-
- {selectedRepository.forks_count.toLocaleString()}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- Ready to import?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Repository Overview -
-- Review repository details before importing -
-
-
-
- {isLargeRepo && (
-
-
-
- )}
-
- This repository is quite large ({formatSize(stats.totalSize)}). Importing it might take a while
- and could impact performance.
-
-
-
- Cancel
-
-
- Import Repository
-
-
-
-
-
- {title} Dependencies ({deps.length})
-
-
-
- {isOpen ? 'Hide' : 'Show'}
-
-
-
- {deps.map((dep) => (
-
-
- {dep.name}
- {dep.version}
-
- ))}
-
- {/* Quick Stats Banner */}
- (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 00000000000..65a0486ff16
--- /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 00000000000..0496929e322
--- /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 00000000000..531f682ee31
--- /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 00000000000..4b7d8fbf72f
--- /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 00000000000..15644367388
--- /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 00000000000..a2e42128cc0
--- /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 00000000000..efdb6bdf237
--- /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 00000000000..3f56bb13dc2
--- /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/gitlab/components/RepositoryCard.tsx b/app/components/@settings/tabs/gitlab/components/RepositoryCard.tsx
new file mode 100644
index 00000000000..7f40211d58e
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/RepositoryCard.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import type { GitLabProjectInfo } from '~/types/GitLab';
+
+interface RepositoryCardProps {
+ repo: GitLabProjectInfo;
+ onClone?: (repo: GitLabProjectInfo) => void;
+}
+
+export function RepositoryCard({ repo, onClone }: RepositoryCardProps) {
+ return (
+
+ ;
+ required?: string[];
+ };
+};
+
+type McpToolProps = {
+ toolName: string;
+ toolSchema: Tool;
+};
+
+export default function McpServerListItem({ toolName, toolSchema }: McpToolProps) {
+ if (!toolSchema) {
+ return null;
+ }
+
+ const parameters = (toolSchema.parameters as ToolParameters)?.jsonSchema.properties || {};
+ const requiredParams = (toolSchema.parameters as ToolParameters)?.jsonSchema.required || [];
+
+ return (
+ (null);
+ const [isCheckingServers, setIsCheckingServers] = useState(false);
+ const [expandedServer, setExpandedServer] = useState(null);
+
+ useEffect(() => {
+ if (!isInitialized) {
+ initialize().catch((err) => {
+ setError(`Failed to initialize MCP settings: ${err instanceof Error ? err.message : String(err)}`);
+ toast.error('Failed to load MCP configuration');
+ });
+ }
+ }, [isInitialized]);
+
+ useEffect(() => {
+ setMCPConfigText(JSON.stringify(settings.mcpConfig, null, 2));
+ setMaxLLMSteps(settings.maxLLMSteps);
+ setError(null);
+ }, [settings]);
+
+ const parsedConfig = useMemo(() => {
+ try {
+ setError(null);
+ return JSON.parse(mcpConfigText) as MCPConfig;
+ } catch (e) {
+ setError(`Invalid JSON format: ${e instanceof Error ? e.message : String(e)}`);
+ return null;
+ }
+ }, [mcpConfigText]);
+
+ const handleMaxLLMCallChange = (value: string) => {
+ setMaxLLMSteps(parseInt(value, 10));
+ };
+
+ const handleSave = async () => {
+ if (!parsedConfig) {
+ return;
+ }
+
+ setIsSaving(true);
+
+ try {
+ await updateSettings({
+ mcpConfig: parsedConfig,
+ maxLLMSteps,
+ });
+ toast.success('MCP configuration saved');
+
+ setError(null);
+ } catch (e) {
+ setError(e instanceof Error ? e.message : 'Failed to save configuration');
+ toast.error('Failed to save MCP configuration');
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ const handleLoadExample = () => {
+ setMCPConfigText(JSON.stringify(EXAMPLE_MCP_CONFIG, null, 2));
+ setError(null);
+ };
+
+ const checkServerAvailability = async () => {
+ if (serverEntries.length === 0) {
+ return;
+ }
+
+ setIsCheckingServers(true);
+ setError(null);
+
+ try {
+ await checkServersAvailabilities();
+ } catch (e) {
+ setError(`Failed to check server availability: ${e instanceof Error ? e.message : String(e)}`);
+ } finally {
+ setIsCheckingServers(false);
+ }
+ };
+
+ const toggleServerExpanded = (serverName: string) => {
+ setExpandedServer(expandedServer === serverName ? null : serverName);
+ };
+
+ const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
+
+ return (
+
- {/* Errors Card */}
- setOpenSections((prev) => ({ ...prev, system: open }))}
- className="w-full"
- >
-
-
-
-
-
-
-
- {/* Performance Metrics */}
- setOpenSections((prev) => ({ ...prev, performance: open }))}
- className="w-full"
- >
-
-
-
-
-
-
-
- {/* WebApp Information */}
- setOpenSections((prev) => ({ ...prev, webapp: open }))}
- className="w-full"
- >
-
-
-
-
-
-
-
- {/* Error Check */}
- setOpenSections((prev) => ({ ...prev, errors: open }))}
- className="w-full"
- >
-
-
-
-
-
-
-
- );
-}
diff --git a/app/components/@settings/tabs/github/GitHubTab.tsx b/app/components/@settings/tabs/github/GitHubTab.tsx
new file mode 100644
index 00000000000..b619fb5f020
--- /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
-
-
- {/* Action Buttons */}
-
-
-
- Errors
-
- 0 ? 'text-red-500' : 'text-green-500')}
- >
- {errorLogs.length}
-
-
-
-
-
- {/* Memory Usage Card */}
- 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
- )}
- />
- {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
-
-
-
-
- {/* Page Load Time Card */}
-
-
-
- Memory Usage
-
- 80
- ? 'text-red-500'
- : (systemInfo?.memory?.percentage ?? 0) > 60
- ? 'text-yellow-500'
- : 'text-green-500',
- )}
- >
- {systemInfo?.memory?.percentage ?? 0}%
-
-
-
-
-
- {/* Network Speed Card */}
-
-
-
- Page Load Time
-
- 2000
- ? 'text-red-500'
- : (systemInfo?.performance.timing.loadTime ?? 0) > 1000
- ? 'text-yellow-500'
- : 'text-green-500',
- )}
- >
- {systemInfo ? (systemInfo.performance.timing.loadTime / 1000).toFixed(2) : '-'}s
-
-
-
-
- DOM Ready: {systemInfo ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2) : '-'}s
-
-
-
-
- {/* Ollama Service Card - Now spans all 4 columns */}
-
-
-
- Network Speed
-
-
- {systemInfo?.network.downlink ?? '-'} Mbps
-
-
-
-
- RTT: {systemInfo?.network.rtt ?? '-'} ms
-
-
-
-
-
-
-
-
-
-
-
- Ollama Service
- {status.message}
-
-
-
-
-
- {status.status}
-
-
-
-
- {ollamaStatus.lastChecked.toLocaleTimeString()}
-
-
- {status.status === 'Running' && ollamaStatus.models && ollamaStatus.models.length > 0 ? (
- <>
-
-
-
-
-
- Installed Models
-
- {ollamaStatus.models.length}
-
-
-
-
-
- ) : (
-
- {ollamaStatus.models.map((model) => (
-
-
-
- {Math.round(parseInt(model.size) / 1024 / 1024)}MB
-
-
- ))}
-
-
- {model.name}
-
-
-
- )}
-
-
- {status.message}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* System Information */}
-
-
-
-
-
-
- System Information
-
- {systemInfo ? (
-
-
-
- ) : (
-
-
-
-
- OS:
- {systemInfo.os}
-
-
-
- Platform:
- {systemInfo.platform}
-
-
-
- Architecture:
- {systemInfo.arch}
-
-
-
- CPU Cores:
- {systemInfo.cpus}
-
-
-
- Node Version:
- {systemInfo.node}
-
-
-
- Network Type:
-
- {systemInfo.network.type} ({systemInfo.network.effectiveType})
-
-
-
-
- Network Speed:
-
- {systemInfo.network.downlink}Mbps (RTT: {systemInfo.network.rtt}ms)
-
-
- {systemInfo.battery && (
-
-
- Battery:
-
- {systemInfo.battery.level.toFixed(1)}% {systemInfo.battery.charging ? '(Charging)' : ''}
-
-
- )}
-
-
- Storage:
-
- {(systemInfo.storage.usage / (1024 * 1024 * 1024)).toFixed(2)}GB /{' '}
- {(systemInfo.storage.quota / (1024 * 1024 * 1024)).toFixed(2)}GB
-
-
-
-
-
-
- Memory Usage:
-
- {systemInfo.memory.used} / {systemInfo.memory.total} ({systemInfo.memory.percentage}%)
-
-
-
-
- Browser:
-
- {systemInfo.browser.name} {systemInfo.browser.version}
-
-
-
-
- Screen:
-
- {systemInfo.screen.width}x{systemInfo.screen.height} ({systemInfo.screen.pixelRatio}x)
-
-
-
-
- Timezone:
- {systemInfo.time.timezone}
-
-
-
- Language:
- {systemInfo.browser.language}
-
-
-
- JS Heap:
-
- {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
- {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB (
- {systemInfo.performance.memory.usagePercentage.toFixed(1)}%)
-
-
-
-
- Page Load:
-
- {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
-
-
-
-
- DOM Ready:
-
- {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
-
-
- Loading system information...
- )}
-
-
-
-
-
-
- Performance Metrics
-
- {systemInfo && (
-
-
-
- )}
-
-
-
- Page Load Time:
-
- {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
-
-
-
- DOM Ready Time:
-
- {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
-
-
-
- Request Time:
-
- {(systemInfo.performance.timing.requestTime / 1000).toFixed(2)}s
-
-
-
- Redirect Time:
-
- {(systemInfo.performance.timing.redirectTime / 1000).toFixed(2)}s
-
-
-
-
-
- JS Heap Usage:
-
- {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
- {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB
-
-
-
- Heap Utilization:
-
- {systemInfo.performance.memory.usagePercentage.toFixed(1)}%
-
-
-
- Navigation Type:
-
- {systemInfo.performance.navigation.type === 0
- ? 'Navigate'
- : systemInfo.performance.navigation.type === 1
- ? 'Reload'
- : systemInfo.performance.navigation.type === 2
- ? 'Back/Forward'
- : 'Other'}
-
-
-
- Redirects:
-
- {systemInfo.performance.navigation.redirectCount}
-
-
-
-
-
-
-
-
- WebApp Information
- {loading.webAppInfo && } -
- {loading.webAppInfo ? (
-
-
-
-
- ) : !webAppInfo ? (
-
-
-
- ) : (
- Failed to load WebApp information
- -
-
- )}
-
- {webAppInfo && (
-
-
-
- Basic Information
-
-
-
-
- Name:
- {webAppInfo.name}
-
-
-
- Version:
- {webAppInfo.version}
-
-
-
- License:
- {webAppInfo.license}
-
-
-
- Environment:
- {webAppInfo.environment}
-
-
-
- Node Version:
- {webAppInfo.runtimeInfo.nodeVersion}
-
-
-
- Git Information
-
-
-
-
- Branch:
- {webAppInfo.gitInfo.local.branch}
-
-
-
- Commit:
- {webAppInfo.gitInfo.local.commitHash}
-
-
-
- Author:
- {webAppInfo.gitInfo.local.author}
-
-
-
- Commit Time:
- {webAppInfo.gitInfo.local.commitTime}
-
-
- {webAppInfo.gitInfo.github && (
- <>
-
-
-
- {webAppInfo.gitInfo.github.upstream && (
-
-
- Repository:
-
- {webAppInfo.gitInfo.github.currentRepo.fullName}
- {webAppInfo.gitInfo.isForked && ' (fork)'}
-
-
-
-
-
-
-
-
- {webAppInfo.gitInfo.github.currentRepo.stars}
-
-
-
-
-
- {webAppInfo.gitInfo.github.currentRepo.forks}
-
-
-
-
-
- {webAppInfo.gitInfo.github.currentRepo.openIssues}
-
-
-
-
- )}
-
- )}
-
-
- Upstream:
-
- {webAppInfo.gitInfo.github.upstream.fullName}
-
-
-
-
-
-
-
-
- {webAppInfo.gitInfo.github.upstream.stars}
-
-
-
-
-
- {webAppInfo.gitInfo.github.upstream.forks}
-
-
-
-
- )}
- Dependencies
-
-
-
-
-
-
-
- {errorLogs.length} Errors
-
- )}
-
-
- Error Check
- {errorLogs.length > 0 && ( -
-
-
-
-
-
-
- Checks for:
-
- -
-
- Unhandled JavaScript errors -
- Unhandled Promise rejections -
- Runtime exceptions -
- Network errors -
- Status:
-
- {loading.errors
- ? 'Checking...'
- : errorLogs.length > 0
- ? `${errorLogs.length} errors found`
- : 'No errors found'}
-
-
- {errorLogs.length > 0 && (
-
-
- )}
- Recent Errors:
-
- {errorLogs.map((error) => (
-
-
-
- ))}
- {error.message}
- {error.source && (
-
- Source: {error.source}
- {error.details?.lineNumber && `:${error.details.lineNumber}`}
-
- )}
- {error.stack && (
- {error.stack}
- )}
-
+
+ );
+ }
+
+ // 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 00000000000..f7f5d667bbb
--- /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 00000000000..2f70906a6dc
--- /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 00000000000..6fb0bed713d
--- /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 00000000000..fd568600808
--- /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 00000000000..c36fa09c0f4
--- /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 00000000000..f0ff7fa1306
--- /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 00000000000..da6b5be6e70
--- /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.
+
+
+
+ );
+}
diff --git a/app/components/@settings/tabs/gitlab/components/RepositoryList.tsx b/app/components/@settings/tabs/gitlab/components/RepositoryList.tsx
new file mode 100644
index 00000000000..80062d9022f
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/RepositoryList.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useMemo } from 'react';
+import { Button } from '~/components/ui/Button';
+import { RepositoryCard } from './RepositoryCard';
+import type { GitLabProjectInfo } from '~/types/GitLab';
+
+interface RepositoryListProps {
+ repositories: GitLabProjectInfo[];
+ onClone?: (repo: GitLabProjectInfo) => 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.path_with_namespace.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ (repo.description && repo.description.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.star_count.toLocaleString()}
+
+
+
+ {repo.forks_count.toLocaleString()}
+
+
+ {repo.description}
+ )} + +
+
+
+ {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/gitlab/components/StatsDisplay.tsx b/app/components/@settings/tabs/gitlab/components/StatsDisplay.tsx
new file mode 100644
index 00000000000..a3955b62509
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/StatsDisplay.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Button } from '~/components/ui/Button';
+import type { GitLabStats } from '~/types/GitLab';
+
+interface StatsDisplayProps {
+ stats: GitLabStats;
+ onRefresh?: () => void;
+ isRefreshing?: boolean;
+}
+
+export function StatsDisplay({ stats, onRefresh, isRefreshing }: StatsDisplayProps) {
+ 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/gitlab/components/index.ts b/app/components/@settings/tabs/gitlab/components/index.ts
new file mode 100644
index 00000000000..2664902aacb
--- /dev/null
+++ b/app/components/@settings/tabs/gitlab/components/index.ts
@@ -0,0 +1,4 @@
+export { default as GitLabConnection } from './GitLabConnection';
+export { RepositoryCard } from './RepositoryCard';
+export { RepositoryList } from './RepositoryList';
+export { StatsDisplay } from './StatsDisplay';
diff --git a/app/components/@settings/tabs/mcp/McpServerList.tsx b/app/components/@settings/tabs/mcp/McpServerList.tsx
new file mode 100644
index 00000000000..6e15fa9ed09
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpServerList.tsx
@@ -0,0 +1,99 @@
+import type { MCPServer } from '~/lib/services/mcpService';
+import McpStatusBadge from '~/components/@settings/tabs/mcp/McpStatusBadge';
+import McpServerListItem from '~/components/@settings/tabs/mcp/McpServerListItem';
+
+type McpServerListProps = {
+ serverEntries: [string, MCPServer][];
+ expandedServer: string | null;
+ checkingServers: boolean;
+ onlyShowAvailableServers?: boolean;
+ toggleServerExpanded: (serverName: string) => void;
+};
+
+export default function McpServerList({
+ serverEntries,
+ expandedServer,
+ checkingServers,
+ onlyShowAvailableServers = false,
+ toggleServerExpanded,
+}: McpServerListProps) {
+ if (serverEntries.length === 0) {
+ return
+
+
+ {/* Contribution Stats */}
+ Repository Stats
+
+ {[
+ {
+ label: 'Public Repos',
+ value: stats.publicProjects,
+ },
+ {
+ label: 'Private Repos',
+ value: stats.privateProjects,
+ },
+ ].map((stat, index) => (
+
+
+ {stat.label}
+ {stat.value}
+
+ ))}
+
+
+
+ Contribution Stats
+
+ {[
+ {
+ label: 'Stars',
+ value: stats.stars || 0,
+ icon: 'i-ph:star',
+ iconColor: 'text-bolt-elements-icon-warning',
+ },
+ {
+ label: 'Forks',
+ value: 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}
+
+
+ ))}
+
+
+
+
+ Last updated: {new Date(stats.lastUpdated).toLocaleString()}
+
+ {onRefresh && (
+
+ )}
+
+ No MCP servers configured
; + } + + const filteredEntries = onlyShowAvailableServers + ? serverEntries.filter(([, s]) => s.status === 'available') + : serverEntries; + + return ( +
+ {filteredEntries.map(([serverName, mcpServer]) => {
+ const isAvailable = mcpServer.status === 'available';
+ const isExpanded = expandedServer === serverName;
+ const serverTools = isAvailable ? Object.entries(mcpServer.tools) : [];
+
+ return (
+
+ );
+}
diff --git a/app/components/@settings/tabs/mcp/McpServerListItem.tsx b/app/components/@settings/tabs/mcp/McpServerListItem.tsx
new file mode 100644
index 00000000000..7013ddeedcc
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpServerListItem.tsx
@@ -0,0 +1,70 @@
+import type { Tool } from 'ai';
+
+type ParameterProperty = {
+ type?: string;
+ description?: string;
+};
+
+type ToolParameters = {
+ jsonSchema: {
+ properties?: Record
+
+ );
+ })}
+
+
+
+ {/* Error message */}
+ {!isAvailable && mcpServer.error && (
+
+
+
+ toggleServerExpanded(serverName)}
+ className="flex items-center gap-1.5 text-bolt-elements-textPrimary"
+ aria-expanded={isExpanded}
+ >
+
+ {serverName}
+
+
+
+ {mcpServer.config.type === 'sse' || mcpServer.config.type === 'streamable-http' ? (
+ {mcpServer.config.url}
+ ) : (
+
+ {mcpServer.config.command} {mcpServer.config.args?.join(' ')}
+
+ )}
+
+
+ {checkingServers ? (
+
+ Error: {mcpServer.error}
+ )}
+
+ {/* Tool list */}
+ {isExpanded && isAvailable && (
+
+
+ )}
+ Available Tools:
+ {serverTools.length === 0 ? (
+ No tools available
+ ) : (
+
+ {serverTools.map(([toolName, toolSchema]) => (
+
+ )}
+
+
+ );
+}
diff --git a/app/components/@settings/tabs/mcp/McpStatusBadge.tsx b/app/components/@settings/tabs/mcp/McpStatusBadge.tsx
new file mode 100644
index 00000000000..3cbbb1f1f48
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpStatusBadge.tsx
@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+export default function McpStatusBadge({ status }: { status: 'checking' | 'available' | 'unavailable' }) {
+ const { styles, label, icon, ariaLabel } = useMemo(() => {
+ const base = 'px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 transition-colors';
+
+ const config = {
+ checking: {
+ styles: `${base} bg-blue-100 text-blue-800 dark:bg-blue-900/80 dark:text-blue-200`,
+ label: 'Checking...',
+ ariaLabel: 'Checking server status',
+ icon: ,
+ },
+ available: {
+ styles: `${base} bg-green-100 text-green-800 dark:bg-green-900/80 dark:text-green-200`,
+ label: 'Available',
+ ariaLabel: 'Server available',
+ icon: ,
+ },
+ unavailable: {
+ styles: `${base} bg-red-100 text-red-800 dark:bg-red-900/80 dark:text-red-200`,
+ label: 'Unavailable',
+ ariaLabel: 'Server unavailable',
+ icon: ,
+ },
+ };
+
+ return config[status];
+ }, [status]);
+
+ return (
+
+ {icon}
+ {label}
+
+ );
+}
diff --git a/app/components/@settings/tabs/mcp/McpTab.tsx b/app/components/@settings/tabs/mcp/McpTab.tsx
new file mode 100644
index 00000000000..9fb765be848
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpTab.tsx
@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import type { MCPConfig } from '~/lib/services/mcpService';
+import { toast } from 'react-toastify';
+import { useMCPStore } from '~/lib/stores/mcp';
+import McpServerList from '~/components/@settings/tabs/mcp/McpServerList';
+
+const EXAMPLE_MCP_CONFIG: MCPConfig = {
+ mcpServers: {
+ everything: {
+ type: 'stdio',
+ command: 'npx',
+ args: ['-y', '@modelcontextprotocol/server-everything'],
+ },
+ deepwiki: {
+ type: 'streamable-http',
+ url: 'https://mcp.deepwiki.com/mcp',
+ },
+ 'local-sse': {
+ type: 'sse',
+ url: 'http://localhost:8000/sse',
+ headers: {
+ Authorization: 'Bearer mytoken123',
+ },
+ },
+ },
+};
+
+export default function McpTab() {
+ const settings = useMCPStore((state) => state.settings);
+ const isInitialized = useMCPStore((state) => state.isInitialized);
+ const serverTools = useMCPStore((state) => state.serverTools);
+ const initialize = useMCPStore((state) => state.initialize);
+ const updateSettings = useMCPStore((state) => state.updateSettings);
+ const checkServersAvailabilities = useMCPStore((state) => state.checkServersAvailabilities);
+
+ const [isSaving, setIsSaving] = useState(false);
+ const [mcpConfigText, setMCPConfigText] = useState('');
+ const [maxLLMSteps, setMaxLLMSteps] = useState(1);
+ const [error, setError] = useState
+
+ + {toolName} +
+ +{toolSchema.description || 'No description available'}
+ + {Object.keys(parameters).length > 0 && ( +
+
+ )}
+ Parameters:
+-
+ {Object.entries(parameters).map(([paramName, paramDetails]) => (
+
-
+ + + {paramName} + {requiredParams.includes(paramName) && ( + * + )} + + + โข + +++ {paramDetails.type && ( + {paramDetails.type} + )} + {paramDetails.description && ( ++{paramDetails.description}+ )} +
+ ))}
+
+
+
+
+
+
+
+ MCP Servers Configured
{' '} + +Configuration
+ +
+
+
+