Upload folder using huggingface_hub

app/components/@settings/core/AvatarDropdown.tsx

@@ -0,0 +1,158 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { motion } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import { profileStore } from '~/lib/stores/profile';
+import type { TabType, Profile } from './types';
+
+const BetaLabel = () => (
+  <span className="px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20 text-[10px] font-medium text-purple-600 dark:text-purple-400 ml-2">
+    BETA
+  </span>
+);
+
+interface AvatarDropdownProps {
+  onSelectTab: (tab: TabType) => void;
+}
+
+export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
+  const profile = useStore(profileStore) as Profile;
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <motion.button
+          className="w-10 h-10 rounded-full bg-transparent flex items-center justify-center focus:outline-none"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {profile?.avatar ? (
+            <img
+              src={profile.avatar}
+              alt={profile?.username || 'Profile'}
+              className="w-full h-full rounded-full object-cover"
+              loading="eager"
+              decoding="sync"
+            />
+          ) : (
+            <div className="w-full h-full rounded-full flex items-center justify-center bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500">
+              <div className="i-ph:question w-6 h-6" />
+            </div>
+          )}
+        </motion.button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className={classNames(
+            'min-w-[240px] z-[250]',
+            'bg-white dark:bg-[#141414]',
+            'rounded-lg shadow-lg',
+            'border border-gray-200/50 dark:border-gray-800/50',
+            'animate-in fade-in-0 zoom-in-95',
+            'py-1',
+          )}
+          sideOffset={5}
+          align="end"
+        >
+          <div
+            className={classNames(
+              'px-4 py-3 flex items-center gap-3',
+              'border-b border-gray-200/50 dark:border-gray-800/50',
+            )}
+          >
+            <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0 bg-white dark:bg-gray-800 shadow-sm">
+              {profile?.avatar ? (
+                <img
+                  src={profile.avatar}
+                  alt={profile?.username || 'Profile'}
+                  className={classNames('w-full h-full', 'object-cover', 'transform-gpu', 'image-rendering-crisp')}
+                  loading="eager"
+                  decoding="sync"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-400 dark:text-gray-500 font-medium text-lg">
+                  <span className="relative -top-0.5">?</span>
+                </div>
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-sm text-gray-900 dark:text-white truncate">
+                {profile?.username || 'Guest User'}
+              </div>
+              {profile?.bio && <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{profile.bio}</div>}
+            </div>
+          </div>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => onSelectTab('profile')}
+          >
+            <div className="i-ph:user-circle w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Edit Profile
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => onSelectTab('settings')}
+          >
+            <div className="i-ph:gear-six w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Settings
+          </DropdownMenu.Item>
+
+          <div className="my-1 border-t border-gray-200/50 dark:border-gray-800/50" />
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => onSelectTab('task-manager')}
+          >
+            <div className="i-ph:activity w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Task Manager
+            <BetaLabel />
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => onSelectTab('service-status')}
+          >
+            <div className="i-ph:heartbeat w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Service Status
+            <BetaLabel />
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

app/components/@settings/core/ControlPanel.tsx

@@ -0,0 +1,555 @@
+import { useState, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { Switch } from '@radix-ui/react-switch';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { classNames } from '~/utils/classNames';
+import { TabManagement } from '~/components/@settings/shared/components/TabManagement';
+import { TabTile } from '~/components/@settings/shared/components/TabTile';
+import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
+import { useFeatures } from '~/lib/hooks/useFeatures';
+import { useNotifications } from '~/lib/hooks/useNotifications';
+import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
+import { useDebugStatus } from '~/lib/hooks/useDebugStatus';
+import {
+  tabConfigurationStore,
+  developerModeStore,
+  setDeveloperMode,
+  resetTabConfiguration,
+} from '~/lib/stores/settings';
+import { profileStore } from '~/lib/stores/profile';
+import type { TabType, TabVisibilityConfig, Profile } from './types';
+import { TAB_LABELS, DEFAULT_TAB_CONFIG } from './constants';
+import { DialogTitle } from '~/components/ui/Dialog';
+import { AvatarDropdown } from './AvatarDropdown';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+
+// Import all tab components
+import ProfileTab from '~/components/@settings/tabs/profile/ProfileTab';
+import SettingsTab from '~/components/@settings/tabs/settings/SettingsTab';
+import NotificationsTab from '~/components/@settings/tabs/notifications/NotificationsTab';
+import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
+import DataTab from '~/components/@settings/tabs/data/DataTab';
+import DebugTab from '~/components/@settings/tabs/debug/DebugTab';
+import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
+import UpdateTab from '~/components/@settings/tabs/update/UpdateTab';
+import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
+import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
+import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
+import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
+import TaskManagerTab from '~/components/@settings/tabs/task-manager/TaskManagerTab';
+
+interface ControlPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface TabWithDevType extends TabVisibilityConfig {
+  isExtraDevTab?: boolean;
+}
+
+interface ExtendedTabConfig extends TabVisibilityConfig {
+  isExtraDevTab?: boolean;
+}
+
+interface BaseTabConfig {
+  id: TabType;
+  visible: boolean;
+  window: 'user' | 'developer';
+  order: number;
+}
+
+interface AnimatedSwitchProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  id: string;
+  label: string;
+}
+
+const TAB_DESCRIPTIONS: Record<TabType, string> = {
+  profile: 'Manage your profile and account settings',
+  settings: 'Configure application preferences',
+  notifications: 'View and manage your notifications',
+  features: 'Explore new and upcoming features',
+  data: 'Manage your data and storage',
+  'cloud-providers': 'Configure cloud AI providers and models',
+  'local-providers': 'Configure local AI providers and models',
+  'service-status': 'Monitor cloud LLM service status',
+  connection: 'Check connection status and settings',
+  debug: 'Debug tools and system information',
+  'event-logs': 'View system events and logs',
+  update: 'Check for updates and release notes',
+  'task-manager': 'Monitor system resources and processes',
+  'tab-management': 'Configure visible tabs and their order',
+};
+
+// Beta status for experimental features
+const BETA_TABS = new Set<TabType>(['task-manager', 'service-status', 'update', 'local-providers']);
+
+const BetaLabel = () => (
+  <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
+    <span className="text-[10px] font-medium text-purple-600 dark:text-purple-400">BETA</span>
+  </div>
+);
+
+const AnimatedSwitch = ({ checked, onCheckedChange, id, label }: AnimatedSwitchProps) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch
+        id={id}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        className={classNames(
+          'relative inline-flex h-6 w-11 items-center rounded-full',
+          'transition-all duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]',
+          'bg-gray-200 dark:bg-gray-700',
+          'data-[state=checked]:bg-purple-500',
+          'focus:outline-none focus:ring-2 focus:ring-purple-500/20',
+          'cursor-pointer',
+          'group',
+        )}
+      >
+        <motion.span
+          className={classNames(
+            'absolute left-[2px] top-[2px]',
+            'inline-block h-5 w-5 rounded-full',
+            'bg-white shadow-lg',
+            'transition-shadow duration-300',
+            'group-hover:shadow-md group-active:shadow-sm',
+            'group-hover:scale-95 group-active:scale-90',
+          )}
+          initial={false}
+          transition={{
+            type: 'spring',
+            stiffness: 500,
+            damping: 30,
+            duration: 0.2,
+          }}
+          animate={{
+            x: checked ? '1.25rem' : '0rem',
+          }}
+        >
+          <motion.div
+            className="absolute inset-0 rounded-full bg-white"
+            initial={false}
+            animate={{
+              scale: checked ? 1 : 0.8,
+            }}
+            transition={{ duration: 0.2 }}
+          />
+        </motion.span>
+        <span className="sr-only">Toggle {label}</span>
+      </Switch>
+      <div className="flex items-center gap-2">
+        <label
+          htmlFor={id}
+          className="text-sm text-gray-500 dark:text-gray-400 select-none cursor-pointer whitespace-nowrap w-[88px]"
+        >
+          {label}
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
+  // State
+  const [activeTab, setActiveTab] = useState<TabType | null>(null);
+  const [loadingTab, setLoadingTab] = useState<TabType | null>(null);
+  const [showTabManagement, setShowTabManagement] = useState(false);
+
+  // Store values
+  const tabConfiguration = useStore(tabConfigurationStore);
+  const developerMode = useStore(developerModeStore);
+  const profile = useStore(profileStore) as Profile;
+
+  // Status hooks
+  const { hasUpdate, currentVersion, acknowledgeUpdate } = useUpdateCheck();
+  const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
+  const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
+  const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
+  const { hasActiveWarnings, activeIssues, acknowledgeAllIssues } = useDebugStatus();
+
+  // Memoize the base tab configurations to avoid recalculation
+  const baseTabConfig = useMemo(() => {
+    return new Map(DEFAULT_TAB_CONFIG.map((tab) => [tab.id, tab]));
+  }, []);
+
+  // Add visibleTabs logic using useMemo with optimized calculations
+  const visibleTabs = useMemo(() => {
+    if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
+      console.warn('Invalid tab configuration, resetting to defaults');
+      resetTabConfiguration();
+
+      return [];
+    }
+
+    const notificationsDisabled = profile?.preferences?.notifications === false;
+
+    // In developer mode, show ALL tabs without restrictions
+    if (developerMode) {
+      const seenTabs = new Set<TabType>();
+      const devTabs: ExtendedTabConfig[] = [];
+
+      // Process tabs in order of priority: developer, user, default
+      const processTab = (tab: BaseTabConfig) => {
+        if (!seenTabs.has(tab.id)) {
+          seenTabs.add(tab.id);
+          devTabs.push({
+            id: tab.id,
+            visible: true,
+            window: 'developer',
+            order: tab.order || devTabs.length,
+          });
+        }
+      };
+
+      // Process tabs in priority order
+      tabConfiguration.developerTabs?.forEach((tab) => processTab(tab as BaseTabConfig));
+      tabConfiguration.userTabs.forEach((tab) => processTab(tab as BaseTabConfig));
+      DEFAULT_TAB_CONFIG.forEach((tab) => processTab(tab as BaseTabConfig));
+
+      // Add Tab Management tile
+      devTabs.push({
+        id: 'tab-management' as TabType,
+        visible: true,
+        window: 'developer',
+        order: devTabs.length,
+        isExtraDevTab: true,
+      });
+
+      return devTabs.sort((a, b) => a.order - b.order);
+    }
+
+    // Optimize user mode tab filtering
+    return tabConfiguration.userTabs
+      .filter((tab) => {
+        if (!tab?.id) {
+          return false;
+        }
+
+        if (tab.id === 'notifications' && notificationsDisabled) {
+          return false;
+        }
+
+        return tab.visible && tab.window === 'user';
+      })
+      .sort((a, b) => a.order - b.order);
+  }, [tabConfiguration, developerMode, profile?.preferences?.notifications, baseTabConfig]);
+
+  // Optimize animation performance with layout animations
+  const gridLayoutVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 200,
+        damping: 20,
+        mass: 0.6,
+      },
+    },
+  };
+
+  // Reset to default view when modal opens/closes
+  useEffect(() => {
+    if (!open) {
+      // Reset when closing
+      setActiveTab(null);
+      setLoadingTab(null);
+      setShowTabManagement(false);
+    } else {
+      // When opening, set to null to show the main view
+      setActiveTab(null);
+    }
+  }, [open]);
+
+  // Handle closing
+  const handleClose = () => {
+    setActiveTab(null);
+    setLoadingTab(null);
+    setShowTabManagement(false);
+    onClose();
+  };
+
+  // Handlers
+  const handleBack = () => {
+    if (showTabManagement) {
+      setShowTabManagement(false);
+    } else if (activeTab) {
+      setActiveTab(null);
+    }
+  };
+
+  const handleDeveloperModeChange = (checked: boolean) => {
+    console.log('Developer mode changed:', checked);
+    setDeveloperMode(checked);
+  };
+
+  // Add effect to log developer mode changes
+  useEffect(() => {
+    console.log('Current developer mode:', developerMode);
+  }, [developerMode]);
+
+  const getTabComponent = (tabId: TabType | 'tab-management') => {
+    if (tabId === 'tab-management') {
+      return <TabManagement />;
+    }
+
+    switch (tabId) {
+      case 'profile':
+        return <ProfileTab />;
+      case 'settings':
+        return <SettingsTab />;
+      case 'notifications':
+        return <NotificationsTab />;
+      case 'features':
+        return <FeaturesTab />;
+      case 'data':
+        return <DataTab />;
+      case 'cloud-providers':
+        return <CloudProvidersTab />;
+      case 'local-providers':
+        return <LocalProvidersTab />;
+      case 'connection':
+        return <ConnectionsTab />;
+      case 'debug':
+        return <DebugTab />;
+      case 'event-logs':
+        return <EventLogsTab />;
+      case 'update':
+        return <UpdateTab />;
+      case 'task-manager':
+        return <TaskManagerTab />;
+      case 'service-status':
+        return <ServiceStatusTab />;
+      default:
+        return null;
+    }
+  };
+
+  const getTabUpdateStatus = (tabId: TabType): boolean => {
+    switch (tabId) {
+      case 'update':
+        return hasUpdate;
+      case 'features':
+        return hasNewFeatures;
+      case 'notifications':
+        return hasUnreadNotifications;
+      case 'connection':
+        return hasConnectionIssues;
+      case 'debug':
+        return hasActiveWarnings;
+      default:
+        return false;
+    }
+  };
+
+  const getStatusMessage = (tabId: TabType): string => {
+    switch (tabId) {
+      case 'update':
+        return `New update available (v${currentVersion})`;
+      case 'features':
+        return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
+      case 'notifications':
+        return `${unreadNotifications.length} unread notification${unreadNotifications.length === 1 ? '' : 's'}`;
+      case 'connection':
+        return currentIssue === 'disconnected'
+          ? 'Connection lost'
+          : currentIssue === 'high-latency'
+            ? 'High latency detected'
+            : 'Connection issues detected';
+      case 'debug': {
+        const warnings = activeIssues.filter((i) => i.type === 'warning').length;
+        const errors = activeIssues.filter((i) => i.type === 'error').length;
+
+        return `${warnings} warning${warnings === 1 ? '' : 's'}, ${errors} error${errors === 1 ? '' : 's'}`;
+      }
+      default:
+        return '';
+    }
+  };
+
+  const handleTabClick = (tabId: TabType) => {
+    setLoadingTab(tabId);
+    setActiveTab(tabId);
+    setShowTabManagement(false);
+
+    // Acknowledge notifications based on tab
+    switch (tabId) {
+      case 'update':
+        acknowledgeUpdate();
+        break;
+      case 'features':
+        acknowledgeAllFeatures();
+        break;
+      case 'notifications':
+        markAllAsRead();
+        break;
+      case 'connection':
+        acknowledgeIssue();
+        break;
+      case 'debug':
+        acknowledgeAllIssues();
+        break;
+    }
+
+    // Clear loading state after a delay
+    setTimeout(() => setLoadingTab(null), 500);
+  };
+
+  return (
+    <RadixDialog.Root open={open}>
+      <RadixDialog.Portal>
+        <div className="fixed inset-0 flex items-center justify-center z-[100]">
+          <RadixDialog.Overlay asChild>
+            <motion.div
+              className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+            />
+          </RadixDialog.Overlay>
+
+          <RadixDialog.Content
+            aria-describedby={undefined}
+            onEscapeKeyDown={handleClose}
+            onPointerDownOutside={handleClose}
+            className="relative z-[101]"
+          >
+            <motion.div
+              className={classNames(
+                'w-[1200px] h-[90vh]',
+                'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                'rounded-2xl shadow-2xl',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'flex flex-col overflow-hidden',
+                'relative',
+              )}
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              transition={{ duration: 0.2 }}
+            >
+              <div className="absolute inset-0 overflow-hidden rounded-2xl">
+                <BackgroundRays />
+              </div>
+              <div className="relative z-10 flex flex-col h-full">
+                {/* Header */}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                  <div className="flex items-center space-x-4">
+                    {(activeTab || showTabManagement) && (
+                      <button
+                        onClick={handleBack}
+                        className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
+                      >
+                        <div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+                      </button>
+                    )}
+                    <DialogTitle className="text-xl font-semibold text-gray-900 dark:text-white">
+                      {showTabManagement ? 'Tab Management' : activeTab ? TAB_LABELS[activeTab] : 'Control Panel'}
+                    </DialogTitle>
+                  </div>
+
+                  <div className="flex items-center gap-6">
+                    {/* Mode Toggle */}
+                    <div className="flex items-center gap-2 min-w-[140px] border-r border-gray-200 dark:border-gray-800 pr-6">
+                      <AnimatedSwitch
+                        id="developer-mode"
+                        checked={developerMode}
+                        onCheckedChange={handleDeveloperModeChange}
+                        label={developerMode ? 'Developer Mode' : 'User Mode'}
+                      />
+                    </div>
+
+                    {/* Avatar and Dropdown */}
+                    <div className="border-l border-gray-200 dark:border-gray-800 pl-6">
+                      <AvatarDropdown onSelectTab={handleTabClick} />
+                    </div>
+
+                    {/* Close Button */}
+                    <button
+                      onClick={handleClose}
+                      className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
+                    >
+                      <div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Content */}
+                <div
+                  className={classNames(
+                    'flex-1',
+                    'overflow-y-auto',
+                    'hover:overflow-y-auto',
+                    'scrollbar scrollbar-w-2',
+                    'scrollbar-track-transparent',
+                    'scrollbar-thumb-[#E5E5E5] hover:scrollbar-thumb-[#CCCCCC]',
+                    'dark:scrollbar-thumb-[#333333] dark:hover:scrollbar-thumb-[#444444]',
+                    'will-change-scroll',
+                    'touch-auto',
+                  )}
+                >
+                  <motion.div
+                    key={activeTab || 'home'}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="p-6"
+                  >
+                    {showTabManagement ? (
+                      <TabManagement />
+                    ) : activeTab ? (
+                      getTabComponent(activeTab)
+                    ) : (
+                      <motion.div
+                        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative"
+                        variants={gridLayoutVariants}
+                        initial="hidden"
+                        animate="visible"
+                      >
+                        <AnimatePresence mode="popLayout">
+                          {(visibleTabs as TabWithDevType[]).map((tab: TabWithDevType) => (
+                            <motion.div key={tab.id} layout variants={itemVariants} className="aspect-[1.5/1]">
+                              <TabTile
+                                tab={tab}
+                                onClick={() => 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) && <BetaLabel />}
+                              </TabTile>
+                            </motion.div>
+                          ))}
+                        </AnimatePresence>
+                      </motion.div>
+                    )}
+                  </motion.div>
+                </div>
+              </div>
+            </motion.div>
+          </RadixDialog.Content>
+        </div>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+};

app/components/@settings/core/constants.ts

@@ -0,0 +1,88 @@
+import type { TabType } from './types';
+
+export const TAB_ICONS: Record<TabType, string> = {
+  profile: 'i-ph:user-circle-fill',
+  settings: 'i-ph:gear-six-fill',
+  notifications: 'i-ph:bell-fill',
+  features: 'i-ph:star-fill',
+  data: 'i-ph:database-fill',
+  'cloud-providers': 'i-ph:cloud-fill',
+  'local-providers': 'i-ph:desktop-fill',
+  'service-status': 'i-ph:activity-bold',
+  connection: 'i-ph:wifi-high-fill',
+  debug: 'i-ph:bug-fill',
+  'event-logs': 'i-ph:list-bullets-fill',
+  update: 'i-ph:arrow-clockwise-fill',
+  'task-manager': 'i-ph:chart-line-fill',
+  'tab-management': 'i-ph:squares-four-fill',
+};
+
+export const TAB_LABELS: Record<TabType, string> = {
+  profile: 'Profile',
+  settings: 'Settings',
+  notifications: 'Notifications',
+  features: 'Features',
+  data: 'Data Management',
+  'cloud-providers': 'Cloud Providers',
+  'local-providers': 'Local Providers',
+  'service-status': 'Service Status',
+  connection: 'Connection',
+  debug: 'Debug',
+  'event-logs': 'Event Logs',
+  update: 'Updates',
+  'task-manager': 'Task Manager',
+  'tab-management': 'Tab Management',
+};
+
+export const TAB_DESCRIPTIONS: Record<TabType, string> = {
+  profile: 'Manage your profile and account settings',
+  settings: 'Configure application preferences',
+  notifications: 'View and manage your notifications',
+  features: 'Explore new and upcoming features',
+  data: 'Manage your data and storage',
+  'cloud-providers': 'Configure cloud AI providers and models',
+  'local-providers': 'Configure local AI providers and models',
+  'service-status': 'Monitor cloud LLM service status',
+  connection: 'Check connection status and settings',
+  debug: 'Debug tools and system information',
+  'event-logs': 'View system events and logs',
+  update: 'Check for updates and release notes',
+  'task-manager': 'Monitor system resources and processes',
+  'tab-management': 'Configure visible tabs and their order',
+};
+
+export const DEFAULT_TAB_CONFIG = [
+  // User Window Tabs (Always visible by default)
+  { id: 'features', visible: true, window: 'user' as const, order: 0 },
+  { id: 'data', visible: true, window: 'user' as const, order: 1 },
+  { id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
+  { id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
+  { id: 'connection', visible: true, window: 'user' as const, order: 4 },
+  { id: 'notifications', visible: true, window: 'user' as const, order: 5 },
+  { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
+
+  // User Window Tabs (In dropdown, initially hidden)
+  { id: 'profile', visible: false, window: 'user' as const, order: 7 },
+  { id: 'settings', visible: false, window: 'user' as const, order: 8 },
+  { id: 'task-manager', visible: false, window: 'user' as const, order: 9 },
+  { id: 'service-status', visible: false, window: 'user' as const, order: 10 },
+
+  // User Window Tabs (Hidden, controlled by TaskManagerTab)
+  { id: 'debug', visible: false, window: 'user' as const, order: 11 },
+  { id: 'update', visible: false, window: 'user' as const, order: 12 },
+
+  // Developer Window Tabs (All visible by default)
+  { id: 'features', visible: true, window: 'developer' as const, order: 0 },
+  { id: 'data', visible: true, window: 'developer' as const, order: 1 },
+  { id: 'cloud-providers', visible: true, window: 'developer' as const, order: 2 },
+  { id: 'local-providers', visible: true, window: 'developer' as const, order: 3 },
+  { id: 'connection', visible: true, window: 'developer' as const, order: 4 },
+  { id: 'notifications', visible: true, window: 'developer' as const, order: 5 },
+  { id: 'event-logs', visible: true, window: 'developer' as const, order: 6 },
+  { id: 'profile', visible: true, window: 'developer' as const, order: 7 },
+  { id: 'settings', visible: true, window: 'developer' as const, order: 8 },
+  { id: 'task-manager', visible: true, window: 'developer' as const, order: 9 },
+  { id: 'service-status', visible: true, window: 'developer' as const, order: 10 },
+  { id: 'debug', visible: true, window: 'developer' as const, order: 11 },
+  { id: 'update', visible: true, window: 'developer' as const, order: 12 },
+];

app/components/@settings/core/types.ts

@@ -0,0 +1,114 @@
+import type { ReactNode } from 'react';
+
+export type SettingCategory = 'profile' | 'file_sharing' | 'connectivity' | 'system' | 'services' | 'preferences';
+
+export type TabType =
+  | 'profile'
+  | 'settings'
+  | 'notifications'
+  | 'features'
+  | 'data'
+  | 'cloud-providers'
+  | 'local-providers'
+  | 'service-status'
+  | 'connection'
+  | 'debug'
+  | 'event-logs'
+  | 'update'
+  | 'task-manager'
+  | 'tab-management';
+
+export type WindowType = 'user' | 'developer';
+
+export interface UserProfile {
+  nickname: any;
+  name: string;
+  email: string;
+  avatar?: string;
+  theme: 'light' | 'dark' | 'system';
+  notifications: boolean;
+  password?: string;
+  bio?: string;
+  language: string;
+  timezone: string;
+}
+
+export interface SettingItem {
+  id: TabType;
+  label: string;
+  icon: string;
+  category: SettingCategory;
+  description?: string;
+  component: () => ReactNode;
+  badge?: string;
+  keywords?: string[];
+}
+
+export interface TabVisibilityConfig {
+  id: TabType;
+  visible: boolean;
+  window: WindowType;
+  order: number;
+  isExtraDevTab?: boolean;
+  locked?: boolean;
+}
+
+export interface DevTabConfig extends TabVisibilityConfig {
+  window: 'developer';
+}
+
+export interface UserTabConfig extends TabVisibilityConfig {
+  window: 'user';
+}
+
+export interface TabWindowConfig {
+  userTabs: UserTabConfig[];
+  developerTabs: DevTabConfig[];
+}
+
+export const TAB_LABELS: Record<TabType, string> = {
+  profile: 'Profile',
+  settings: 'Settings',
+  notifications: 'Notifications',
+  features: 'Features',
+  data: 'Data Management',
+  'cloud-providers': 'Cloud Providers',
+  'local-providers': 'Local Providers',
+  'service-status': 'Service Status',
+  connection: 'Connections',
+  debug: 'Debug',
+  'event-logs': 'Event Logs',
+  update: 'Updates',
+  'task-manager': 'Task Manager',
+  'tab-management': 'Tab Management',
+};
+
+export const categoryLabels: Record<SettingCategory, string> = {
+  profile: 'Profile & Account',
+  file_sharing: 'File Sharing',
+  connectivity: 'Connectivity',
+  system: 'System',
+  services: 'Services',
+  preferences: 'Preferences',
+};
+
+export const categoryIcons: Record<SettingCategory, string> = {
+  profile: 'i-ph:user-circle',
+  file_sharing: 'i-ph:folder-simple',
+  connectivity: 'i-ph:wifi-high',
+  system: 'i-ph:gear',
+  services: 'i-ph:cube',
+  preferences: 'i-ph:sliders',
+};
+
+export interface Profile {
+  username?: string;
+  bio?: string;
+  avatar?: string;
+  preferences?: {
+    notifications?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    language?: string;
+    timezone?: string;
+  };
+}

app/components/@settings/index.ts

@@ -0,0 +1,14 @@
+// Core exports
+export { ControlPanel } from './core/ControlPanel';
+export type { TabType, TabVisibilityConfig } from './core/types';
+
+// Constants
+export { TAB_LABELS, TAB_DESCRIPTIONS, DEFAULT_TAB_CONFIG } from './core/constants';
+
+// Shared components
+export { TabTile } from './shared/components/TabTile';
+export { TabManagement } from './shared/components/TabManagement';
+
+// Utils
+export { getVisibleTabs, reorderTabs, resetToDefaultConfig } from './utils/tab-helpers';
+export * from './utils/animations';

app/components/@settings/shared/components/DraggableTabList.tsx

@@ -0,0 +1,163 @@
+import { useDrag, useDrop } from 'react-dnd';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import type { TabVisibilityConfig } from '~/components/@settings/core/types';
+import { TAB_LABELS } from '~/components/@settings/core/types';
+import { Switch } from '~/components/ui/Switch';
+
+interface DraggableTabListProps {
+  tabs: TabVisibilityConfig[];
+  onReorder: (tabs: TabVisibilityConfig[]) => void;
+  onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
+  onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
+  showControls?: boolean;
+}
+
+interface DraggableTabItemProps {
+  tab: TabVisibilityConfig;
+  index: number;
+  moveTab: (dragIndex: number, hoverIndex: number) => void;
+  showControls?: boolean;
+  onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
+  onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
+}
+
+interface DragItem {
+  type: string;
+  index: number;
+  id: string;
+}
+
+const DraggableTabItem = ({
+  tab,
+  index,
+  moveTab,
+  showControls,
+  onWindowChange,
+  onVisibilityChange,
+}: DraggableTabItemProps) => {
+  const [{ isDragging }, dragRef] = useDrag({
+    type: 'tab',
+    item: { type: 'tab', index, id: tab.id },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [, dropRef] = useDrop({
+    accept: 'tab',
+    hover: (item: DragItem, monitor) => {
+      if (!monitor.isOver({ shallow: true })) {
+        return;
+      }
+
+      if (item.index === index) {
+        return;
+      }
+
+      if (item.id === tab.id) {
+        return;
+      }
+
+      moveTab(item.index, index);
+      item.index = index;
+    },
+  });
+
+  const ref = (node: HTMLDivElement | null) => {
+    dragRef(node);
+    dropRef(node);
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={false}
+      animate={{
+        scale: isDragging ? 1.02 : 1,
+        boxShadow: isDragging ? '0 8px 16px rgba(0,0,0,0.1)' : 'none',
+      }}
+      className={classNames(
+        'flex items-center justify-between p-4 rounded-lg',
+        'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+        'border border-[#E5E5E5] dark:border-[#333333]',
+        isDragging ? 'z-50' : '',
+      )}
+    >
+      <div className="flex items-center gap-4">
+        <div className="cursor-grab">
+          <div className="i-ph:dots-six-vertical w-4 h-4 text-bolt-elements-textSecondary" />
+        </div>
+        <div>
+          <div className="font-medium text-bolt-elements-textPrimary">{TAB_LABELS[tab.id]}</div>
+          {showControls && (
+            <div className="text-xs text-bolt-elements-textSecondary">
+              Order: {tab.order}, Window: {tab.window}
+            </div>
+          )}
+        </div>
+      </div>
+      {showControls && !tab.locked && (
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={tab.visible}
+              onCheckedChange={(checked: boolean) => onVisibilityChange?.(tab, checked)}
+              className="data-[state=checked]:bg-purple-500"
+              aria-label={`Toggle ${TAB_LABELS[tab.id]} visibility`}
+            />
+            <label className="text-sm text-bolt-elements-textSecondary">Visible</label>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-bolt-elements-textSecondary">User</label>
+            <Switch
+              checked={tab.window === 'developer'}
+              onCheckedChange={(checked: boolean) => onWindowChange?.(tab, checked ? 'developer' : 'user')}
+              className="data-[state=checked]:bg-purple-500"
+              aria-label={`Toggle ${TAB_LABELS[tab.id]} window assignment`}
+            />
+            <label className="text-sm text-bolt-elements-textSecondary">Dev</label>
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+};
+
+export const DraggableTabList = ({
+  tabs,
+  onReorder,
+  onWindowChange,
+  onVisibilityChange,
+  showControls = false,
+}: DraggableTabListProps) => {
+  const moveTab = (dragIndex: number, hoverIndex: number) => {
+    const items = Array.from(tabs);
+    const [reorderedItem] = items.splice(dragIndex, 1);
+    items.splice(hoverIndex, 0, reorderedItem);
+
+    // Update order numbers based on position
+    const reorderedTabs = items.map((tab, index) => ({
+      ...tab,
+      order: index + 1,
+    }));
+
+    onReorder(reorderedTabs);
+  };
+
+  return (
+    <div className="space-y-2">
+      {tabs.map((tab, index) => (
+        <DraggableTabItem
+          key={tab.id}
+          tab={tab}
+          index={index}
+          moveTab={moveTab}
+          showControls={showControls}
+          onWindowChange={onWindowChange}
+          onVisibilityChange={onVisibilityChange}
+        />
+      ))}
+    </div>
+  );
+};

app/components/@settings/shared/components/TabManagement.tsx

@@ -0,0 +1,380 @@
+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<TabType, string> = {
+  profile: 'i-ph:user-circle-fill',
+  settings: 'i-ph:gear-six-fill',
+  notifications: 'i-ph:bell-fill',
+  features: 'i-ph:star-fill',
+  data: 'i-ph:database-fill',
+  'cloud-providers': 'i-ph:cloud-fill',
+  'local-providers': 'i-ph:desktop-fill',
+  'service-status': 'i-ph:activity-fill',
+  connection: 'i-ph:wifi-high-fill',
+  debug: 'i-ph:bug-fill',
+  'event-logs': 'i-ph:list-bullets-fill',
+  update: 'i-ph:arrow-clockwise-fill',
+  'task-manager': 'i-ph:chart-line-fill',
+  'tab-management': 'i-ph:squares-four-fill',
+};
+
+// Define which tabs are default in user mode
+const DEFAULT_USER_TABS: TabType[] = [
+  'features',
+  'data',
+  'cloud-providers',
+  'local-providers',
+  'connection',
+  'notifications',
+  'event-logs',
+];
+
+// Define which tabs can be added to user mode
+const OPTIONAL_USER_TABS: TabType[] = ['profile', 'settings', 'task-manager', 'service-status', 'debug', 'update'];
+
+// All available tabs for user mode
+const ALL_USER_TABS = [...DEFAULT_USER_TABS, ...OPTIONAL_USER_TABS];
+
+// Define which tabs are beta
+const BETA_TABS = new Set<TabType>(['task-manager', 'service-status', 'update', 'local-providers']);
+
+// Beta label component
+const BetaLabel = () => (
+  <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-purple-500/10 text-purple-500 font-medium">BETA</span>
+);
+
+export const TabManagement = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const tabConfiguration = useStore(tabConfigurationStore);
+  const { setSelectedTab } = useSettingsStore();
+
+  const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
+    // Get current tab configuration
+    const currentTab = tabConfiguration.userTabs.find((tab) => tab.id === tabId);
+
+    // If tab doesn't exist in configuration, create it
+    if (!currentTab) {
+      const newTab = {
+        id: tabId,
+        visible: checked,
+        window: 'user' as const,
+        order: tabConfiguration.userTabs.length,
+      };
+
+      const updatedTabs = [...tabConfiguration.userTabs, newTab];
+
+      tabConfigurationStore.set({
+        ...tabConfiguration,
+        userTabs: updatedTabs,
+      });
+
+      toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
+
+      return;
+    }
+
+    // Check if tab can be enabled in user mode
+    const canBeEnabled = DEFAULT_USER_TABS.includes(tabId) || OPTIONAL_USER_TABS.includes(tabId);
+
+    if (!canBeEnabled && checked) {
+      toast.error('This tab cannot be enabled in user mode');
+      return;
+    }
+
+    // Update tab visibility
+    const updatedTabs = tabConfiguration.userTabs.map((tab) => {
+      if (tab.id === tabId) {
+        return { ...tab, visible: checked };
+      }
+
+      return tab;
+    });
+
+    // Update store
+    tabConfigurationStore.set({
+      ...tabConfiguration,
+      userTabs: updatedTabs,
+    });
+
+    // Show success message
+    toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
+  };
+
+  // Create a map of existing tab configurations
+  const tabConfigMap = new Map(tabConfiguration.userTabs.map((tab) => [tab.id, tab]));
+
+  // Generate the complete list of tabs, including those not in the configuration
+  const allTabs = ALL_USER_TABS.map((tabId) => {
+    return (
+      tabConfigMap.get(tabId) || {
+        id: tabId,
+        visible: false,
+        window: 'user' as const,
+        order: -1,
+      }
+    );
+  });
+
+  // Filter tabs based on search query
+  const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
+
+  useEffect(() => {
+    // Reset to first tab when component unmounts
+    return () => {
+      setSelectedTab('user'); // Reset to user tab when unmounting
+    };
+  }, [setSelectedTab]);
+
+  return (
+    <div className="space-y-6">
+      <motion.div
+        className="space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between gap-4 mt-8 mb-4">
+          <div className="flex items-center gap-2">
+            <div
+              className={classNames(
+                'w-8 h-8 flex items-center justify-center rounded-lg',
+                'bg-bolt-elements-background-depth-3',
+                'text-purple-500',
+              )}
+            >
+              <TbLayoutGrid className="w-5 h-5" />
+            </div>
+            <div>
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary">Tab Management</h4>
+              <p className="text-sm text-bolt-elements-textSecondary">Configure visible tabs and their order</p>
+            </div>
+          </div>
+
+          {/* Search */}
+          <div className="relative w-64">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="i-ph:magnifying-glass w-4 h-4 text-gray-400" />
+            </div>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => 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',
+              )}
+            />
+          </div>
+        </div>
+
+        {/* Tab Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* Default Section Header */}
+          {filteredTabs.some((tab) => DEFAULT_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-4 mb-2">
+              <div className="i-ph:star-fill w-4 h-4 text-purple-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Default Tabs</span>
+            </div>
+          )}
+
+          {/* Default Tabs */}
+          {filteredTabs
+            .filter((tab) => DEFAULT_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium mr-2">
+                    Default
+                  </span>
+                </div>
+
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
+                    </div>
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          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),
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
+
+          {/* Optional Section Header */}
+          {filteredTabs.some((tab) => OPTIONAL_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-8 mb-2">
+              <div className="i-ph:plus-circle-fill w-4 h-4 text-blue-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Optional Tabs</span>
+            </div>
+          )}
+
+          {/* Optional Tabs */}
+          {filteredTabs
+            .filter((tab) => OPTIONAL_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium mr-2">
+                    Optional
+                  </span>
+                </div>
+
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
+                    </div>
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          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),
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+};

app/components/@settings/shared/components/TabTile.tsx

@@ -0,0 +1,135 @@
+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';
+
+interface TabTileProps {
+  tab: TabVisibilityConfig;
+  onClick?: () => void;
+  isActive?: boolean;
+  hasUpdate?: boolean;
+  statusMessage?: string;
+  description?: string;
+  isLoading?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const TabTile: React.FC<TabTileProps> = ({
+  tab,
+  onClick,
+  isActive,
+  hasUpdate,
+  statusMessage,
+  description,
+  isLoading,
+  className,
+  children,
+}: TabTileProps) => {
+  return (
+    <Tooltip.Provider delayDuration={200}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <motion.div
+            onClick={onClick}
+            className={classNames(
+              'relative flex flex-col items-center p-6 rounded-xl',
+              'w-full h-full min-h-[160px]',
+              'bg-white dark:bg-[#141414]',
+              'border border-[#E5E5E5] dark:border-[#333333]',
+              'group',
+              'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+              'hover:border-purple-200 dark:hover:border-purple-900/30',
+              isActive ? 'border-purple-500 dark:border-purple-500/50 bg-purple-500/5 dark:bg-purple-500/10' : '',
+              isLoading ? 'cursor-wait opacity-70' : '',
+              className || '',
+            )}
+          >
+            {/* Main Content */}
+            <div className="flex flex-col items-center justify-center flex-1 w-full">
+              {/* Icon */}
+              <motion.div
+                className={classNames(
+                  'relative',
+                  'w-14 h-14',
+                  'flex items-center justify-center',
+                  'rounded-xl',
+                  'bg-gray-100 dark:bg-gray-800',
+                  'ring-1 ring-gray-200 dark:ring-gray-700',
+                  'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
+                  'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
+                  isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
+                )}
+              >
+                <motion.div
+                  className={classNames(
+                    TAB_ICONS[tab.id],
+                    'w-8 h-8',
+                    'text-gray-600 dark:text-gray-300',
+                    'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
+                    isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                  )}
+                />
+              </motion.div>
+
+              {/* Label and Description */}
+              <div className="flex flex-col items-center mt-5 w-full">
+                <h3
+                  className={classNames(
+                    'text-[15px] font-medium leading-snug mb-2',
+                    'text-gray-700 dark:text-gray-200',
+                    'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
+                    isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                  )}
+                >
+                  {TAB_LABELS[tab.id]}
+                </h3>
+                {description && (
+                  <p
+                    className={classNames(
+                      'text-[13px] leading-relaxed',
+                      'text-gray-500 dark:text-gray-400',
+                      'max-w-[85%]',
+                      'text-center',
+                      'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
+                      isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
+                    )}
+                  >
+                    {description}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Update Indicator with Tooltip */}
+            {hasUpdate && (
+              <>
+                <div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
+                <Tooltip.Portal>
+                  <Tooltip.Content
+                    className={classNames(
+                      'px-3 py-1.5 rounded-lg',
+                      'bg-[#18181B] text-white',
+                      'text-sm font-medium',
+                      'select-none',
+                      'z-[100]',
+                    )}
+                    side="top"
+                    sideOffset={5}
+                  >
+                    {statusMessage}
+                    <Tooltip.Arrow className="fill-[#18181B]" />
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </>
+            )}
+
+            {/* Children (e.g. Beta Label) */}
+            {children}
+          </motion.div>
+        </Tooltip.Trigger>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};

app/components/@settings/tabs/connections/ConnectionsTab.tsx

@@ -0,0 +1,28 @@
+import { motion } from 'framer-motion';
+import { GithubConnection } from './GithubConnection';
+import { NetlifyConnection } from './NetlifyConnection';
+
+export default function ConnectionsTab() {
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <motion.div
+        className="flex items-center gap-2 mb-2"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="i-ph:plugs-connected w-5 h-5 text-purple-500" />
+        <h2 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h2>
+      </motion.div>
+      <p className="text-sm text-bolt-elements-textSecondary mb-6">
+        Manage your external service connections and integrations
+      </p>
+
+      <div className="grid grid-cols-1 gap-4">
+        <GithubConnection />
+        <NetlifyConnection />
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/connections/GithubConnection.tsx

@@ -0,0 +1,557 @@
+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';
+
+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[];
+  totalStars: number;
+  totalForks: number;
+  organizations: GitHubOrganization[];
+  recentActivity: GitHubEvent[];
+  languages: GitHubLanguageStats;
+  totalGists: number;
+}
+
+interface GitHubConnection {
+  user: GitHubUserResponse | null;
+  token: string;
+  tokenType: 'classic' | 'fine-grained';
+  stats?: GitHubStats;
+}
+
+export function GithubConnection() {
+  const [connection, setConnection] = useState<GitHubConnection>({
+    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 fetchGitHubStats = async (token: string) => {
+    try {
+      setIsFetchingStats(true);
+
+      const reposResponse = await fetch(
+        'https://api.github.com/user/repos?sort=updated&per_page=10&affiliation=owner,organization_member,collaborator',
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+
+      if (!reposResponse.ok) {
+        throw new Error('Failed to fetch repositories');
+      }
+
+      const repos = (await reposResponse.json()) as GitHubRepoInfo[];
+
+      const orgsResponse = await fetch('https://api.github.com/user/orgs', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!orgsResponse.ok) {
+        throw new Error('Failed to fetch organizations');
+      }
+
+      const organizations = (await orgsResponse.json()) as GitHubOrganization[];
+
+      const eventsResponse = await fetch('https://api.github.com/users/' + connection.user?.login + '/events/public', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!eventsResponse.ok) {
+        throw new Error('Failed to fetch events');
+      }
+
+      const recentActivity = ((await eventsResponse.json()) as GitHubEvent[]).slice(0, 5);
+
+      const languagePromises = repos.map((repo) =>
+        fetch(repo.languages_url, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }).then((res) => res.json() as Promise<Record<string, number>>),
+      );
+
+      const repoLanguages = await Promise.all(languagePromises);
+      const languages: GitHubLanguageStats = {};
+
+      repoLanguages.forEach((repoLang) => {
+        Object.entries(repoLang).forEach(([lang, bytes]) => {
+          languages[lang] = (languages[lang] || 0) + bytes;
+        });
+      });
+
+      const totalStars = repos.reduce((acc, repo) => acc + repo.stargazers_count, 0);
+      const totalForks = repos.reduce((acc, repo) => acc + repo.forks_count, 0);
+      const totalGists = connection.user?.public_gists || 0;
+
+      setConnection((prev) => ({
+        ...prev,
+        stats: {
+          repos,
+          totalStars,
+          totalForks,
+          organizations,
+          recentActivity,
+          languages,
+          totalGists,
+        },
+      }));
+    } catch (error) {
+      logStore.logError('Failed to fetch GitHub stats', { error });
+      toast.error('Failed to fetch GitHub statistics');
+    } finally {
+      setIsFetchingStats(false);
+    }
+  };
+
+  useEffect(() => {
+    const savedConnection = localStorage.getItem('github_connection');
+
+    if (savedConnection) {
+      const parsed = JSON.parse(savedConnection);
+
+      if (!parsed.tokenType) {
+        parsed.tokenType = 'classic';
+      }
+
+      setConnection(parsed);
+
+      if (parsed.user && parsed.token) {
+        fetchGitHubStats(parsed.token);
+      }
+    }
+
+    setIsLoading(false);
+  }, []);
+
+  if (isLoading || isConnecting || isFetchingStats) {
+    return <LoadingSpinner />;
+  }
+
+  const fetchGithubUser = async (token: string) => {
+    try {
+      setIsConnecting(true);
+
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
+      }
+
+      const data = (await response.json()) as GitHubUserResponse;
+      const newConnection: GitHubConnection = {
+        user: data,
+        token,
+        tokenType: connection.tokenType,
+      };
+
+      localStorage.setItem('github_connection', JSON.stringify(newConnection));
+      setConnection(newConnection);
+
+      await fetchGitHubStats(token);
+
+      toast.success('Successfully connected to GitHub');
+    } catch (error) {
+      logStore.logError('Failed to authenticate with GitHub', { error });
+      toast.error('Failed to connect to GitHub');
+      setConnection({ user: null, token: '', tokenType: 'classic' });
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    await fetchGithubUser(connection.token);
+  };
+
+  const handleDisconnect = () => {
+    localStorage.removeItem('github_connection');
+    setConnection({ user: null, token: '', tokenType: 'classic' });
+    toast.success('Disconnected from GitHub');
+  };
+
+  return (
+    <motion.div
+      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center gap-2">
+          <div className="i-ph:github-logo w-5 h-5 text-bolt-elements-textPrimary" />
+          <h3 className="text-base font-medium text-bolt-elements-textPrimary">GitHub Connection</h3>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm text-bolt-elements-textSecondary mb-2">Token Type</label>
+            <select
+              value={connection.tokenType}
+              onChange={(e) =>
+                setConnection((prev) => ({ ...prev, tokenType: e.target.value as 'classic' | 'fine-grained' }))
+              }
+              disabled={isConnecting || !!connection.user}
+              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',
+                'focus:outline-none focus:ring-1 focus:ring-purple-500',
+                'disabled:opacity-50',
+              )}
+            >
+              <option value="classic">Personal Access Token (Classic)</option>
+              <option value="fine-grained">Fine-grained Token</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm text-bolt-elements-textSecondary mb-2">
+              {connection.tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+            </label>
+            <input
+              type="password"
+              value={connection.token}
+              onChange={(e) => 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-purple-500',
+                'disabled:opacity-50',
+              )}
+            />
+            <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+              <a
+                href={`https://github.com/settings/tokens${connection.tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-purple-500 hover:underline inline-flex items-center gap-1"
+              >
+                Get your token
+                <div className="i-ph:arrow-square-out w-10 h-5" />
+              </a>
+              <span className="mx-2">•</span>
+              <span>
+                Required scopes:{' '}
+                {connection.tokenType === 'classic'
+                  ? 'repo, read:org, read:user'
+                  : 'Repository access, Organization access'}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {!connection.user ? (
+            <button
+              onClick={handleConnect}
+              disabled={isConnecting || !connection.token}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-purple-500 text-white',
+                'hover:bg-purple-600',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {isConnecting ? (
+                <>
+                  <div className="i-ph:spinner-gap animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Connect
+                </>
+              )}
+            </button>
+          ) : (
+            <button
+              onClick={handleDisconnect}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-red-500 text-white',
+                'hover:bg-red-600',
+              )}
+            >
+              <div className="i-ph:plug-x w-4 h-4" />
+              Disconnect
+            </button>
+          )}
+
+          {connection.user && (
+            <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+              <div className="i-ph:check-circle w-4 h-4" />
+              Connected to GitHub
+            </span>
+          )}
+        </div>
+
+        {connection.user && connection.stats && (
+          <div className="mt-6 border-t border-[#E5E5E5] dark:border-[#1A1A1A] pt-6">
+            <button onClick={() => setIsStatsExpanded(!isStatsExpanded)} className="w-full bg-transparent">
+              <div className="flex items-center gap-4">
+                <img src={connection.user.avatar_url} alt={connection.user.login} className="w-16 h-16 rounded-full" />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.user.name || connection.user.login}
+                    </h3>
+                    <div
+                      className={classNames(
+                        'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary transition-transform',
+                        isStatsExpanded ? 'rotate-180' : '',
+                      )}
+                    />
+                  </div>
+                  {connection.user.bio && (
+                    <p className="text-sm text-start text-bolt-elements-textSecondary">{connection.user.bio}</p>
+                  )}
+                  <div className="flex gap-4 mt-2 text-sm text-bolt-elements-textSecondary">
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:users w-4 h-4" />
+                      {connection.user.followers} followers
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:book-bookmark w-4 h-4" />
+                      {connection.user.public_repos} public repos
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:star w-4 h-4" />
+                      {connection.stats.totalStars} stars
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:git-fork w-4 h-4" />
+                      {connection.stats.totalForks} forks
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+
+            {isStatsExpanded && (
+              <div className="pt-4">
+                {connection.stats.organizations.length > 0 && (
+                  <div className="mb-6">
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Organizations</h4>
+                    <div className="flex flex-wrap gap-3">
+                      {connection.stats.organizations.map((org) => (
+                        <a
+                          key={org.login}
+                          href={org.html_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-2 p-2 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
+                        >
+                          <img src={org.avatar_url} alt={org.login} className="w-6 h-6 rounded-md" />
+                          <span className="text-sm text-bolt-elements-textPrimary">{org.login}</span>
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Languages Section */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {Object.entries(connection.stats.languages)
+                      .sort(([, a], [, b]) => b - a)
+                      .slice(0, 5)
+                      .map(([language]) => (
+                        <span
+                          key={language}
+                          className="px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-500 dark:bg-purple-500/20"
+                        >
+                          {language}
+                        </span>
+                      ))}
+                  </div>
+                </div>
+
+                {/* Recent Activity Section */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Activity</h4>
+                  <div className="space-y-3">
+                    {connection.stats.recentActivity.map((event) => (
+                      <div key={event.id} className="p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] text-sm">
+                        <div className="flex items-center gap-2 text-bolt-elements-textPrimary">
+                          <div className="i-ph:git-commit w-4 h-4 text-bolt-elements-textSecondary" />
+                          <span className="font-medium">{event.type.replace('Event', '')}</span>
+                          <span>on</span>
+                          <a
+                            href={`https://github.com/${event.repo.name}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline"
+                          >
+                            {event.repo.name}
+                          </a>
+                        </div>
+                        <div className="mt-1 text-xs text-bolt-elements-textSecondary">
+                          {new Date(event.created_at).toLocaleDateString()} at{' '}
+                          {new Date(event.created_at).toLocaleTimeString()}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Additional Stats */}
+                <div className="grid grid-cols-4 gap-4 mb-6">
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Member Since</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {new Date(connection.user.created_at).toLocaleDateString()}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Public Gists</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.stats.totalGists}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Organizations</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.stats.organizations.length}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Languages</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {Object.keys(connection.stats.languages).length}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Repositories Section */}
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Repositories</h4>
+                <div className="space-y-3">
+                  {connection.stats.repos.map((repo) => (
+                    <a
+                      key={repo.full_name}
+                      href={repo.html_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                            <div className="i-ph:git-repository w-4 h-4 text-bolt-elements-textSecondary" />
+                            {repo.name}
+                          </h5>
+                          {repo.description && (
+                            <p className="text-xs text-bolt-elements-textSecondary mt-1">{repo.description}</p>
+                          )}
+                          <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                            <span className="flex items-center gap-1">
+                              <div className="i-ph:git-branch w-3 h-3" />
+                              {repo.default_branch}
+                            </span>
+                            <span>•</span>
+                            <span>Updated {new Date(repo.updated_at).toLocaleDateString()}</span>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:star w-3 h-3" />
+                            {repo.stargazers_count}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:git-fork w-3 h-3" />
+                            {repo.forks_count}
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center p-4">
+      <div className="flex items-center gap-2">
+        <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+        <span className="text-bolt-elements-textSecondary">Loading...</span>
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/connections/NetlifyConnection.tsx

@@ -0,0 +1,263 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import {
+  netlifyConnection,
+  isConnecting,
+  isFetchingStats,
+  updateNetlifyConnection,
+  fetchNetlifyStats,
+} from '~/lib/stores/netlify';
+import type { NetlifyUser } from '~/types/netlify';
+
+export function NetlifyConnection() {
+  const connection = useStore(netlifyConnection);
+  const connecting = useStore(isConnecting);
+  const fetchingStats = useStore(isFetchingStats);
+  const [isSitesExpanded, setIsSitesExpanded] = useState(false);
+
+  useEffect(() => {
+    const fetchSites = async () => {
+      if (connection.user && connection.token) {
+        await fetchNetlifyStats(connection.token);
+      }
+    };
+    fetchSites();
+  }, [connection.user, connection.token]);
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    isConnecting.set(true);
+
+    try {
+      const response = await fetch('https://api.netlify.com/api/v1/user', {
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
+      }
+
+      const userData = (await response.json()) as NetlifyUser;
+      updateNetlifyConnection({
+        user: userData,
+        token: connection.token,
+      });
+
+      await fetchNetlifyStats(connection.token);
+      toast.success('Successfully connected to Netlify');
+    } catch (error) {
+      console.error('Auth error:', error);
+      logStore.logError('Failed to authenticate with Netlify', { error });
+      toast.error('Failed to connect to Netlify');
+      updateNetlifyConnection({ user: null, token: '' });
+    } finally {
+      isConnecting.set(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    updateNetlifyConnection({ user: null, token: '' });
+    toast.success('Disconnected from Netlify');
+  };
+
+  return (
+    <motion.div
+      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <img
+              className="w-5 h-5"
+              height="24"
+              width="24"
+              crossOrigin="anonymous"
+              src="https://cdn.simpleicons.org/netlify"
+            />
+            <h3 className="text-base font-medium text-bolt-elements-textPrimary">Netlify Connection</h3>
+          </div>
+        </div>
+
+        {!connection.user ? (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
+              <input
+                type="password"
+                value={connection.token}
+                onChange={(e) => updateNetlifyConnection({ ...connection, token: e.target.value })}
+                disabled={connecting}
+                placeholder="Enter your Netlify personal access token"
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                  'border border-[#E5E5E5] dark:border-[#333333]',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-[#00AD9F]',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href="https://app.netlify.com/user/applications#personal-access-tokens"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#00AD9F] hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+              </div>
+            </div>
+
+            <button
+              onClick={handleConnect}
+              disabled={connecting || !connection.token}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-[#00AD9F] text-white',
+                'hover:bg-[#00968A]',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {connecting ? (
+                <>
+                  <div className="i-ph:spinner-gap animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Connect
+                </>
+              )}
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={handleDisconnect}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-red-500 text-white',
+                    'hover:bg-red-600',
+                  )}
+                >
+                  <div className="i-ph:plug w-4 h-4" />
+                  Disconnect
+                </button>
+                <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                  Connected to Netlify
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
+              <img
+                src={connection.user.avatar_url}
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                alt={connection.user.full_name}
+                className="w-12 h-12 rounded-full border-2 border-[#00AD9F]"
+              />
+              <div>
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.full_name}</h4>
+                <p className="text-sm text-bolt-elements-textSecondary">{connection.user.email}</p>
+              </div>
+            </div>
+
+            {fetchingStats ? (
+              <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+                <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                Fetching Netlify sites...
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => setIsSitesExpanded(!isSitesExpanded)}
+                  className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
+                >
+                  <div className="i-ph:buildings w-4 h-4" />
+                  Your Sites ({connection.stats?.totalSites || 0})
+                  <div
+                    className={classNames(
+                      'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
+                      isSitesExpanded ? 'rotate-180' : '',
+                    )}
+                  />
+                </button>
+                {isSitesExpanded && connection.stats?.sites?.length ? (
+                  <div className="grid gap-3">
+                    {connection.stats.sites.map((site) => (
+                      <a
+                        key={site.id}
+                        href={site.admin_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="block p-4 rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-[#00AD9F] dark:hover:border-[#00AD9F] transition-colors"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:globe w-4 h-4 text-[#00AD9F]" />
+                              {site.name}
+                            </h5>
+                            <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                              <a
+                                href={site.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="hover:text-[#00AD9F]"
+                              >
+                                {site.url}
+                              </a>
+                              {site.published_deploy && (
+                                <>
+                                  <span>•</span>
+                                  <span className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-3 h-3" />
+                                    {new Date(site.published_deploy.published_at).toLocaleDateString()}
+                                  </span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                          {site.build_settings?.provider && (
+                            <div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:git-branch w-3 h-3" />
+                                {site.build_settings.provider}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                ) : isSitesExpanded ? (
+                  <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
+                    <div className="i-ph:info w-4 h-4" />
+                    No sites found in your Netlify account
+                  </div>
+                ) : null}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

app/components/@settings/tabs/connections/components/ConnectionForm.tsx

@@ -0,0 +1,180 @@
+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<React.SetStateAction<GitHubAuthState>>;
+  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) || 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,
+        },
+      }));
+    }
+  }, []);
+
+  return (
+    <div className="rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] overflow-hidden">
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+              <div className="i-ph:plug-fill text-bolt-elements-textTertiary" />
+            </div>
+            <div>
+              <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">Configure your GitHub connection</p>
+            </div>
+          </div>
+        </div>
+
+        <form onSubmit={onSave} className="space-y-4">
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-bolt-elements-textSecondary mb-2">
+              GitHub Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={authState.username}
+              onChange={(e) => setAuthState((prev: GitHubAuthState) => ({ ...prev, username: e.target.value }))}
+              className={classNames(
+                'w-full px-4 py-2.5 bg-[#F5F5F5] dark:bg-[#1A1A1A] border rounded-lg',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary text-base',
+                'border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500',
+                'transition-all duration-200',
+              )}
+              placeholder="e.g., octocat"
+            />
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label htmlFor="token" className="block text-sm font-medium text-bolt-elements-textSecondary">
+                Personal Access Token
+              </label>
+              <a
+                href="https://github.com/settings/tokens/new?scopes=repo,user,read:org,workflow,delete_repo,write:packages,read:packages"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={classNames(
+                  'inline-flex items-center gap-1.5 text-xs',
+                  'text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300',
+                  'transition-colors duration-200',
+                )}
+              >
+                <span>Generate new token</span>
+                <div className="i-ph:plus-circle" />
+              </a>
+            </div>
+            <input
+              id="token"
+              type="password"
+              value={authState.tokenInfo?.token || ''}
+              onChange={(e) =>
+                setAuthState((prev: GitHubAuthState) => ({
+                  ...prev,
+                  tokenInfo: {
+                    token: e.target.value,
+                    scope: [],
+                    avatar_url: '',
+                    name: null,
+                    created_at: new Date().toISOString(),
+                    followers: 0,
+                  },
+                  username: '',
+                  isConnected: false,
+                  isVerifying: false,
+                  isLoadingRepos: false,
+                }))
+              }
+              className={classNames(
+                'w-full px-4 py-2.5 bg-[#F5F5F5] dark:bg-[#1A1A1A] border rounded-lg',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary text-base',
+                'border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500',
+                'transition-all duration-200',
+              )}
+              placeholder="ghp_xxxxxxxxxxxx"
+            />
+          </div>
+
+          <div className="flex items-center justify-between pt-4 border-t border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-4">
+              {!authState.isConnected ? (
+                <button
+                  type="submit"
+                  disabled={authState.isVerifying || !authState.username || !authState.tokenInfo?.token}
+                  className={classNames(
+                    'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                    'bg-purple-500 hover:bg-purple-600',
+                    'text-white',
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                  )}
+                >
+                  {authState.isVerifying ? (
+                    <>
+                      <div className="i-ph:spinner animate-spin" />
+                      <span>Verifying...</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="i-ph:plug-fill" />
+                      <span>Connect</span>
+                    </>
+                  )}
+                </button>
+              ) : (
+                <>
+                  <button
+                    onClick={onDisconnect}
+                    className={classNames(
+                      'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                      'bg-[#F5F5F5] hover:bg-red-500/10 hover:text-red-500',
+                      'dark:bg-[#1A1A1A] dark:hover:bg-red-500/20 dark:hover:text-red-500',
+                      'text-bolt-elements-textPrimary',
+                    )}
+                  >
+                    <div className="i-ph:plug-fill" />
+                    <span>Disconnect</span>
+                  </button>
+                  <span className="inline-flex items-center gap-2 px-3 py-1.5 text-sm text-green-600 dark:text-green-400 bg-green-500/5 rounded-lg border border-green-500/20">
+                    <div className="i-ph:check-circle-fill" />
+                    <span>Connected</span>
+                  </span>
+                </>
+              )}
+            </div>
+            {authState.rateLimits && (
+              <div className="flex items-center gap-2 text-sm text-bolt-elements-textTertiary">
+                <div className="i-ph:clock-countdown opacity-60" />
+                <span>Rate limit resets at {authState.rateLimits.reset.toLocaleTimeString()}</span>
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/connections/components/CreateBranchDialog.tsx

@@ -0,0 +1,150 @@
+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 (
+    <Dialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 dark:bg-black/80" />
+        <Dialog.Content
+          className={classNames(
+            'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+            'w-full max-w-md p-6 rounded-xl shadow-lg',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+          )}
+        >
+          <Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary mb-4">
+            Create New Branch
+          </Dialog.Title>
+
+          <form onSubmit={handleSubmit}>
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="branchName" className="block text-sm font-medium text-bolt-elements-textSecondary mb-2">
+                  Branch Name
+                </label>
+                <input
+                  id="branchName"
+                  type="text"
+                  value={branchName}
+                  onChange={(e) => setBranchName(e.target.value)}
+                  placeholder="feature/my-new-branch"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg',
+                    'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
+                  )}
+                  required
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="sourceBranch"
+                  className="block text-sm font-medium text-bolt-elements-textSecondary mb-2"
+                >
+                  Source Branch
+                </label>
+                <select
+                  id="sourceBranch"
+                  value={sourceBranch}
+                  onChange={(e) => setSourceBranch(e.target.value)}
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg',
+                    'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'text-bolt-elements-textPrimary',
+                    'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
+                  )}
+                >
+                  {branches?.map((branch) => (
+                    <option key={branch.name} value={branch.name}>
+                      {branch.name} {branch.default ? '(default)' : ''}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="mt-4 p-3 bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg">
+                <h4 className="text-sm font-medium text-bolt-elements-textSecondary mb-2">Branch Overview</h4>
+                <ul className="space-y-2 text-sm text-bolt-elements-textSecondary">
+                  <li className="flex items-center gap-2">
+                    <GitBranch className="text-lg" />
+                    Repository: {repository.name}
+                  </li>
+                  {branchName && (
+                    <li className="flex items-center gap-2">
+                      <div className="i-ph:check-circle text-green-500" />
+                      New branch will be created as: {branchName}
+                    </li>
+                  )}
+                  <li className="flex items-center gap-2">
+                    <div className="i-ph:check-circle text-green-500" />
+                    Based on: {sourceBranch}
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-6 flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={onClose}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm font-medium',
+                  'text-bolt-elements-textPrimary',
+                  'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                  'hover:bg-purple-500/10 hover:text-purple-500',
+                  'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+                  'transition-colors',
+                )}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm font-medium',
+                  'text-white bg-purple-500',
+                  'hover:bg-purple-600',
+                  'transition-colors',
+                )}
+              >
+                Create Branch
+              </button>
+            </div>
+          </form>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

app/components/@settings/tabs/connections/components/PushToGitHubDialog.tsx

@@ -0,0 +1,528 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { motion } from 'framer-motion';
+import { getLocalStorage } from '~/lib/persistence';
+import { classNames } from '~/utils/classNames';
+import type { GitHubUserResponse } from '~/types/GitHub';
+import { logStore } from '~/lib/stores/logs';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { extractRelativePath } from '~/utils/diff';
+import { formatSize } from '~/utils/formatSize';
+import type { FileMap, File } from '~/lib/stores/files';
+import { Octokit } from '@octokit/rest';
+
+interface PushToGitHubDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onPush: (repoName: string, username?: string, token?: string, isPrivate?: boolean) => Promise<string>;
+}
+
+interface GitHubRepo {
+  name: string;
+  full_name: string;
+  html_url: string;
+  description: string;
+  stargazers_count: number;
+  forks_count: number;
+  default_branch: string;
+  updated_at: string;
+  language: string;
+  private: boolean;
+}
+
+export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDialogProps) {
+  const [repoName, setRepoName] = useState('');
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [user, setUser] = useState<GitHubUserResponse | null>(null);
+  const [recentRepos, setRecentRepos] = useState<GitHubRepo[]>([]);
+  const [isFetchingRepos, setIsFetchingRepos] = useState(false);
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
+  const [createdRepoUrl, setCreatedRepoUrl] = useState('');
+  const [pushedFiles, setPushedFiles] = useState<{ path: string; size: number }[]>([]);
+
+  // Load GitHub connection on mount
+  useEffect(() => {
+    if (isOpen) {
+      const connection = getLocalStorage('github_connection');
+
+      if (connection?.user && connection?.token) {
+        setUser(connection.user);
+
+        // Only fetch if we have both user and token
+        if (connection.token.trim()) {
+          fetchRecentRepos(connection.token);
+        }
+      }
+    }
+  }, [isOpen]);
+
+  const fetchRecentRepos = async (token: string) => {
+    if (!token) {
+      logStore.logError('No GitHub token available');
+      toast.error('GitHub authentication required');
+
+      return;
+    }
+
+    try {
+      setIsFetchingRepos(true);
+
+      const response = await fetch(
+        'https://api.github.com/user/repos?sort=updated&per_page=5&type=all&affiliation=owner,organization_member',
+        {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token.trim()}`,
+          },
+        },
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+
+        if (response.status === 401) {
+          toast.error('GitHub token expired. Please reconnect your account.');
+
+          // Clear invalid token
+          const connection = getLocalStorage('github_connection');
+
+          if (connection) {
+            localStorage.removeItem('github_connection');
+            setUser(null);
+          }
+        } else {
+          logStore.logError('Failed to fetch GitHub repositories', {
+            status: response.status,
+            statusText: response.statusText,
+            error: errorData,
+          });
+          toast.error(`Failed to fetch repositories: ${response.statusText}`);
+        }
+
+        return;
+      }
+
+      const repos = (await response.json()) as GitHubRepo[];
+      setRecentRepos(repos);
+    } catch (error) {
+      logStore.logError('Failed to fetch GitHub repositories', { error });
+      toast.error('Failed to fetch recent repositories');
+    } finally {
+      setIsFetchingRepos(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const connection = getLocalStorage('github_connection');
+
+    if (!connection?.token || !connection?.user) {
+      toast.error('Please connect your GitHub account in Settings > Connections first');
+      return;
+    }
+
+    if (!repoName.trim()) {
+      toast.error('Repository name is required');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // Check if repository exists first
+      const octokit = new Octokit({ auth: connection.token });
+
+      try {
+        await octokit.repos.get({
+          owner: connection.user.login,
+          repo: repoName,
+        });
+
+        // If we get here, the repo exists
+        const confirmOverwrite = window.confirm(
+          `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`,
+        );
+
+        if (!confirmOverwrite) {
+          setIsLoading(false);
+          return;
+        }
+      } catch (error) {
+        // 404 means repo doesn't exist, which is what we want for new repos
+        if (error instanceof Error && 'status' in error && error.status !== 404) {
+          throw error;
+        }
+      }
+
+      const repoUrl = await onPush(repoName, connection.user.login, connection.token, isPrivate);
+      setCreatedRepoUrl(repoUrl);
+
+      // Get list of pushed files
+      const files = workbenchStore.files.get();
+      const filesList = Object.entries(files as FileMap)
+        .filter(([, dirent]) => dirent?.type === 'file' && !dirent.isBinary)
+        .map(([path, dirent]) => ({
+          path: extractRelativePath(path),
+          size: new TextEncoder().encode((dirent as File).content || '').length,
+        }));
+
+      setPushedFiles(filesList);
+      setShowSuccessDialog(true);
+    } catch (error) {
+      console.error('Error pushing to GitHub:', error);
+      toast.error('Failed to push to GitHub. Please check your repository name and try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setRepoName('');
+    setIsPrivate(false);
+    setShowSuccessDialog(false);
+    setCreatedRepoUrl('');
+    onClose();
+  };
+
+  // Success Dialog
+  if (showSuccessDialog) {
+    return (
+      <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+          <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+              className="w-[90vw] md:w-[600px] max-h-[85vh] overflow-y-auto"
+            >
+              <Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
+                <div className="p-6 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2 text-green-500">
+                      <div className="i-ph:check-circle w-5 h-5" />
+                      <h3 className="text-lg font-medium">Successfully pushed to GitHub</h3>
+                    </div>
+                    <Dialog.Close
+                      onClick={handleClose}
+                      className="p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
+                    >
+                      <div className="i-ph:x w-5 h-5" />
+                    </Dialog.Close>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3 text-left">
+                    <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                      Repository URL
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <code className="flex-1 text-sm bg-bolt-elements-background dark:bg-bolt-elements-background-dark px-3 py-2 rounded border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark font-mono">
+                        {createdRepoUrl}
+                      </code>
+                      <motion.button
+                        onClick={() => {
+                          navigator.clipboard.writeText(createdRepoUrl);
+                          toast.success('URL copied to clipboard');
+                        }}
+                        className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.9 }}
+                      >
+                        <div className="i-ph:copy w-4 h-4" />
+                      </motion.button>
+                    </div>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3">
+                    <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                      Pushed Files ({pushedFiles.length})
+                    </p>
+                    <div className="max-h-[200px] overflow-y-auto custom-scrollbar">
+                      {pushedFiles.map((file) => (
+                        <div
+                          key={file.path}
+                          className="flex items-center justify-between py-1 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                        >
+                          <span className="font-mono truncate flex-1">{file.path}</span>
+                          <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
+                            {formatSize(file.size)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-2 pt-2">
+                    <motion.a
+                      href={createdRepoUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 text-sm inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:github-logo w-4 h-4" />
+                      View Repository
+                    </motion.a>
+                    <motion.button
+                      onClick={() => {
+                        navigator.clipboard.writeText(createdRepoUrl);
+                        toast.success('URL copied to clipboard');
+                      }}
+                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:copy w-4 h-4" />
+                      Copy URL
+                    </motion.button>
+                    <motion.button
+                      onClick={handleClose}
+                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      Close
+                    </motion.button>
+                  </div>
+                </div>
+              </Dialog.Content>
+            </motion.div>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+          <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+              className="w-[90vw] md:w-[500px]"
+            >
+              <Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
+                <div className="text-center space-y-4">
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="mx-auto w-12 h-12 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
+                  >
+                    <div className="i-ph:github-logo w-6 h-6" />
+                  </motion.div>
+                  <h3 className="text-lg font-medium text-gray-900 dark:text-white">GitHub Connection Required</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Please connect your GitHub account in Settings {'>'} Connections to push your code to GitHub.
+                  </p>
+                  <motion.button
+                    className="px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600 inline-flex items-center gap-2"
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={handleClose}
+                  >
+                    <div className="i-ph:x-circle" />
+                    Close
+                  </motion.button>
+                </div>
+              </Dialog.Content>
+            </motion.div>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="w-[90vw] md:w-[500px]"
+          >
+            <Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
+              <div className="p-6">
+                <div className="flex items-center gap-4 mb-6">
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
+                  >
+                    <div className="i-ph:git-branch w-5 h-5" />
+                  </motion.div>
+                  <div>
+                    <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
+                      Push to GitHub
+                    </Dialog.Title>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Push your code to a new or existing GitHub repository
+                    </p>
+                  </div>
+                  <Dialog.Close
+                    className="ml-auto p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
+                    onClick={handleClose}
+                  >
+                    <div className="i-ph:x w-5 h-5" />
+                  </Dialog.Close>
+                </div>
+
+                <div className="flex items-center gap-3 mb-6 p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg">
+                  <img src={user.avatar_url} alt={user.login} className="w-10 h-10 rounded-full" />
+                  <div>
+                    <p className="text-sm font-medium text-gray-900 dark:text-white">{user.name || user.login}</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">@{user.login}</p>
+                  </div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="space-y-2">
+                    <label htmlFor="repoName" className="text-sm text-gray-600 dark:text-gray-400">
+                      Repository Name
+                    </label>
+                    <input
+                      id="repoName"
+                      type="text"
+                      value={repoName}
+                      onChange={(e) => setRepoName(e.target.value)}
+                      placeholder="my-awesome-project"
+                      className="w-full px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-[#E5E5E5] dark:border-[#1A1A1A] text-gray-900 dark:text-white placeholder-gray-400"
+                      required
+                    />
+                  </div>
+
+                  {recentRepos.length > 0 && (
+                    <div className="space-y-2">
+                      <label className="text-sm text-gray-600 dark:text-gray-400">Recent Repositories</label>
+                      <div className="space-y-2">
+                        {recentRepos.map((repo) => (
+                          <motion.button
+                            key={repo.full_name}
+                            type="button"
+                            onClick={() => setRepoName(repo.name)}
+                            className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group"
+                            whileHover={{ scale: 1.01 }}
+                            whileTap={{ scale: 0.99 }}
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <div className="i-ph:git-repository w-4 h-4 text-purple-500" />
+                                <span className="text-sm font-medium text-gray-900 dark:text-white group-hover:text-purple-500">
+                                  {repo.name}
+                                </span>
+                              </div>
+                              {repo.private && (
+                                <span className="text-xs px-2 py-1 rounded-full bg-purple-500/10 text-purple-500">
+                                  Private
+                                </span>
+                              )}
+                            </div>
+                            {repo.description && (
+                              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+                                {repo.description}
+                              </p>
+                            )}
+                            <div className="mt-2 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+                              {repo.language && (
+                                <span className="flex items-center gap-1">
+                                  <div className="i-ph:code w-3 h-3" />
+                                  {repo.language}
+                                </span>
+                              )}
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:star w-3 h-3" />
+                                {repo.stargazers_count.toLocaleString()}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:git-fork w-3 h-3" />
+                                {repo.forks_count.toLocaleString()}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:clock w-3 h-3" />
+                                {new Date(repo.updated_at).toLocaleDateString()}
+                              </span>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {isFetchingRepos && (
+                    <div className="flex items-center justify-center py-4 text-gray-500 dark:text-gray-400">
+                      <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Loading repositories...
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="private"
+                      checked={isPrivate}
+                      onChange={(e) => setIsPrivate(e.target.checked)}
+                      className="rounded border-[#E5E5E5] dark:border-[#1A1A1A] text-purple-500 focus:ring-purple-500 dark:bg-[#0A0A0A]"
+                    />
+                    <label htmlFor="private" className="text-sm text-gray-600 dark:text-gray-400">
+                      Make repository private
+                    </label>
+                  </div>
+
+                  <div className="pt-4 flex gap-2">
+                    <motion.button
+                      type="button"
+                      onClick={handleClose}
+                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      Cancel
+                    </motion.button>
+                    <motion.button
+                      type="submit"
+                      disabled={isLoading}
+                      className={classNames(
+                        'flex-1 px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 text-sm inline-flex items-center justify-center gap-2',
+                        isLoading ? 'opacity-50 cursor-not-allowed' : '',
+                      )}
+                      whileHover={!isLoading ? { scale: 1.02 } : {}}
+                      whileTap={!isLoading ? { scale: 0.98 } : {}}
+                    >
+                      {isLoading ? (
+                        <>
+                          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                          Pushing...
+                        </>
+                      ) : (
+                        <>
+                          <div className="i-ph:git-branch w-4 h-4" />
+                          Push to GitHub
+                        </>
+                      )}
+                    </motion.button>
+                  </div>
+                </form>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

app/components/@settings/tabs/connections/components/RepositorySelectionDialog.tsx

@@ -0,0 +1,693 @@
+import type { GitHubRepoInfo, GitHubContent, RepositoryStats } 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 } from 'framer-motion';
+import { formatSize } from '~/utils/formatSize';
+import { Input } from '~/components/ui/Input';
+
+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;
+}
+
+interface StatsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  stats: RepositoryStats;
+  isLargeRepo?: boolean;
+}
+
+function StatsDialog({ isOpen, onClose, onConfirm, stats, isLargeRepo }: StatsDialogProps) {
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="w-[90vw] md:w-[500px]"
+          >
+            <Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
+              <div className="p-6 space-y-4">
+                <div>
+                  <h3 className="text-lg font-medium text-[#111111] dark:text-white">Repository Overview</h3>
+                  <div className="mt-4 space-y-2">
+                    <p className="text-sm text-[#666666] dark:text-[#999999]">Repository Statistics:</p>
+                    <div className="space-y-2 text-sm text-[#111111] dark:text-white">
+                      <div className="flex items-center gap-2">
+                        <span className="i-ph:files text-purple-500 w-4 h-4" />
+                        <span>Total Files: {stats.totalFiles}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="i-ph:database text-purple-500 w-4 h-4" />
+                        <span>Total Size: {formatSize(stats.totalSize)}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="i-ph:code text-purple-500 w-4 h-4" />
+                        <span>
+                          Languages:{' '}
+                          {Object.entries(stats.languages)
+                            .sort(([, a], [, b]) => b - a)
+                            .slice(0, 3)
+                            .map(([lang, size]) => `${lang} (${formatSize(size)})`)
+                            .join(', ')}
+                        </span>
+                      </div>
+                      {stats.hasPackageJson && (
+                        <div className="flex items-center gap-2">
+                          <span className="i-ph:package text-purple-500 w-4 h-4" />
+                          <span>Has package.json</span>
+                        </div>
+                      )}
+                      {stats.hasDependencies && (
+                        <div className="flex items-center gap-2">
+                          <span className="i-ph:tree-structure text-purple-500 w-4 h-4" />
+                          <span>Has dependencies</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  {isLargeRepo && (
+                    <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-500/10 rounded-lg text-sm flex items-start gap-2">
+                      <span className="i-ph:warning text-yellow-600 dark:text-yellow-500 w-4 h-4 flex-shrink-0 mt-0.5" />
+                      <div className="text-yellow-800 dark:text-yellow-500">
+                        This repository is quite large ({formatSize(stats.totalSize)}). Importing it might take a while
+                        and could impact performance.
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="border-t border-[#E5E5E5] dark:border-[#333333] p-4 flex justify-end gap-3 bg-[#F9F9F9] dark:bg-[#252525] rounded-b-lg">
+                <button
+                  onClick={onClose}
+                  className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#333333] text-[#666666] hover:text-[#111111] dark:text-[#999999] dark:hover:text-white transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onConfirm}
+                  className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-colors"
+                >
+                  OK
+                </button>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: RepositorySelectionDialogProps) {
+  const [selectedRepository, setSelectedRepository] = useState<GitHubRepoInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [repositories, setRepositories] = useState<GitHubRepoInfo[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<GitHubRepoInfo[]>([]);
+  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<SearchFilters>({});
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [stats, setStats] = useState<RepositoryStats | null>(null);
+  const [showStatsDialog, setShowStatsDialog] = useState(false);
+  const [currentStats, setCurrentStats] = useState<RepositoryStats | null>(null);
+  const [pendingGitUrl, setPendingGitUrl] = useState<string>('');
+
+  // Fetch user's repositories when dialog opens
+  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: {
+          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 response = await fetch(`https://api.github.com/repos/${repo.full_name}/branches`, {
+        headers: {
+          Authorization: `Bearer ${getLocalStorage('github_connection')?.token}`,
+        },
+      });
+
+      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<RepositoryStats | null> => {
+    try {
+      const [owner, repo] = repoUrl
+        .replace(/\.git$/, '')
+        .split('/')
+        .slice(-2);
+
+      const connection = getLocalStorage('github_connection');
+      const headers: HeadersInit = connection?.token ? { Authorization: `Bearer ${connection.token}` } : {};
+
+      // Fetch repository tree
+      const treeResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/main?recursive=1`, {
+        headers,
+      });
+
+      if (!treeResponse.ok) {
+        throw new Error('Failed to fetch repository structure');
+      }
+
+      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,
+      };
+
+      setStats(stats);
+
+      return stats;
+    } catch (error) {
+      console.error('Error verifying repository:', error);
+      toast.error('Failed to verify repository');
+
+      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);
+      toast.error('Failed to prepare repository. Please try again.');
+    }
+  };
+
+  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 (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50" />
+        <Dialog.Content className="fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 w-[90vw] md:w-[600px] max-h-[85vh] overflow-hidden bg-white dark:bg-[#1A1A1A] rounded-xl shadow-xl z-[51] border border-[#E5E5E5] dark:border-[#333333]">
+          <div className="p-4 border-b border-[#E5E5E5] dark:border-[#333333] flex items-center justify-between">
+            <Dialog.Title className="text-lg font-semibold text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+              Import GitHub Repository
+            </Dialog.Title>
+            <Dialog.Close
+              onClick={handleClose}
+              className={classNames(
+                'p-2 rounded-lg transition-all duration-200 ease-in-out',
+                'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary',
+                'dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark',
+                'hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
+                'focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark',
+              )}
+            >
+              <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+              <span className="sr-only">Close dialog</span>
+            </Dialog.Close>
+          </div>
+
+          <div className="p-4">
+            <div className="flex gap-2 mb-4">
+              <TabButton active={activeTab === 'my-repos'} onClick={() => setActiveTab('my-repos')}>
+                <span className="i-ph:book-bookmark" />
+                My Repos
+              </TabButton>
+              <TabButton active={activeTab === 'search'} onClick={() => setActiveTab('search')}>
+                <span className="i-ph:magnifying-glass" />
+                Search
+              </TabButton>
+              <TabButton active={activeTab === 'url'} onClick={() => setActiveTab('url')}>
+                <span className="i-ph:link" />
+                URL
+              </TabButton>
+            </div>
+
+            {activeTab === 'url' ? (
+              <div className="space-y-4">
+                <Input
+                  placeholder="Enter repository URL"
+                  value={customUrl}
+                  onChange={(e) => setCustomUrl(e.target.value)}
+                  className={classNames('w-full', {
+                    'border-red-500': false,
+                  })}
+                />
+                <button
+                  onClick={handleImport}
+                  disabled={!customUrl}
+                  className="w-full h-10 px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2 justify-center"
+                >
+                  Import Repository
+                </button>
+              </div>
+            ) : (
+              <>
+                {activeTab === 'search' && (
+                  <div className="space-y-4 mb-4">
+                    <div className="flex gap-2">
+                      <input
+                        type="text"
+                        placeholder="Search repositories..."
+                        value={searchQuery}
+                        onChange={(e) => {
+                          setSearchQuery(e.target.value);
+                          handleSearch(e.target.value);
+                        }}
+                        className="flex-1 px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] text-bolt-elements-textPrimary"
+                      />
+                      <button
+                        onClick={() => setFilters({})}
+                        className="px-3 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                      >
+                        <span className="i-ph:funnel-simple" />
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <input
+                        type="text"
+                        placeholder="Filter by language..."
+                        value={filters.language || ''}
+                        onChange={(e) => {
+                          setFilters({ ...filters, language: e.target.value });
+                          handleSearch(searchQuery);
+                        }}
+                        className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
+                      />
+                      <input
+                        type="number"
+                        placeholder="Min stars..."
+                        value={filters.stars || ''}
+                        onChange={(e) => handleFilterChange('stars', e.target.value)}
+                        className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
+                      />
+                    </div>
+                    <input
+                      type="number"
+                      placeholder="Min forks..."
+                      value={filters.forks || ''}
+                      onChange={(e) => handleFilterChange('forks', e.target.value)}
+                      className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
+                    />
+                  </div>
+                )}
+
+                <div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
+                  {selectedRepository ? (
+                    <div className="space-y-4">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setSelectedRepository(null)}
+                          className="p-1.5 rounded-lg hover:bg-[#F5F5F5] dark:hover:bg-[#252525]"
+                        >
+                          <span className="i-ph:arrow-left w-4 h-4" />
+                        </button>
+                        <h3 className="font-medium">{selectedRepository.full_name}</h3>
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm text-bolt-elements-textSecondary">Select Branch</label>
+                        <select
+                          value={selectedBranch}
+                          onChange={(e) => setSelectedBranch(e.target.value)}
+                          className="w-full px-3 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                        >
+                          {branches.map((branch) => (
+                            <option
+                              key={branch.name}
+                              value={branch.name}
+                              className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                            >
+                              {branch.name} {branch.default ? '(default)' : ''}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          onClick={handleImport}
+                          className="w-full h-10 px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 justify-center"
+                        >
+                          Import Selected Branch
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <RepositoryList
+                      repos={activeTab === 'my-repos' ? repositories : searchResults}
+                      isLoading={isLoading}
+                      onSelect={handleRepoSelect}
+                      activeTab={activeTab}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+      {currentStats && (
+        <StatsDialog
+          isOpen={showStatsDialog}
+          onClose={handleStatsConfirm}
+          onConfirm={handleStatsConfirm}
+          stats={currentStats}
+          isLargeRepo={currentStats.totalSize > 50 * 1024 * 1024}
+        />
+      )}
+    </Dialog.Root>
+  );
+}
+
+function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      className={classNames(
+        'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center',
+        active
+          ? 'bg-purple-500 text-white hover:bg-purple-600'
+          : 'bg-[#F5F5F5] dark:bg-[#252525] text-bolt-elements-textPrimary dark:text-white hover:bg-[#E5E5E5] dark:hover:bg-[#333333] border border-[#E5E5E5] dark:border-[#333333]',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function RepositoryList({
+  repos,
+  isLoading,
+  onSelect,
+  activeTab,
+}: {
+  repos: GitHubRepoInfo[];
+  isLoading: boolean;
+  onSelect: (repo: GitHubRepoInfo) => void;
+  activeTab: string;
+}) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8 text-bolt-elements-textSecondary">
+        <span className="i-ph:spinner animate-spin mr-2" />
+        Loading repositories...
+      </div>
+    );
+  }
+
+  if (repos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary">
+        <span className="i-ph:folder-simple-dashed w-12 h-12 mb-2 opacity-50" />
+        <p>{activeTab === 'my-repos' ? 'No repositories found' : 'Search for repositories'}</p>
+      </div>
+    );
+  }
+
+  return repos.map((repo) => <RepositoryCard key={repo.full_name} repo={repo} onSelect={() => onSelect(repo)} />);
+}
+
+function RepositoryCard({ repo, onSelect }: { repo: GitHubRepoInfo; onSelect: () => void }) {
+  return (
+    <div className="p-4 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] hover:border-purple-500/50 transition-colors">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <span className="i-ph:git-repository text-bolt-elements-textTertiary" />
+          <h3 className="font-medium text-bolt-elements-textPrimary dark:text-white">{repo.name}</h3>
+        </div>
+        <button
+          onClick={onSelect}
+          className="px-4 py-2 h-10 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center"
+        >
+          <span className="i-ph:download-simple w-4 h-4" />
+          Import
+        </button>
+      </div>
+      {repo.description && <p className="text-sm text-bolt-elements-textSecondary mb-3">{repo.description}</p>}
+      <div className="flex items-center gap-4 text-sm text-bolt-elements-textTertiary">
+        {repo.language && (
+          <span className="flex items-center gap-1">
+            <span className="i-ph:code" />
+            {repo.language}
+          </span>
+        )}
+        <span className="flex items-center gap-1">
+          <span className="i-ph:star" />
+          {repo.stargazers_count.toLocaleString()}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="i-ph:clock" />
+          {new Date(repo.updated_at).toLocaleDateString()}
+        </span>
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/connections/types/GitHub.ts

@@ -0,0 +1,95 @@
+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;
+}

app/components/@settings/tabs/data/DataTab.tsx

@@ -0,0 +1,452 @@
+import { useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { DialogRoot, DialogClose, Dialog, DialogTitle } from '~/components/ui/Dialog';
+import { db, getAll, deleteById } from '~/lib/persistence';
+
+export default function DataTab() {
+  const [isDownloadingTemplate, setIsDownloadingTemplate] = useState(false);
+  const [isImportingKeys, setIsImportingKeys] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showResetInlineConfirm, setShowResetInlineConfirm] = useState(false);
+  const [showDeleteInlineConfirm, setShowDeleteInlineConfirm] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const apiKeyFileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleExportAllChats = async () => {
+    try {
+      if (!db) {
+        throw new Error('Database not initialized');
+      }
+
+      // Get all chats from IndexedDB
+      const allChats = await getAll(db);
+      const exportData = {
+        chats: allChats,
+        exportDate: new Date().toISOString(),
+      };
+
+      // Download as JSON
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-chats-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success('Chats exported successfully');
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error('Failed to export chats');
+    }
+  };
+
+  const handleExportSettings = () => {
+    try {
+      const settings = {
+        userProfile: localStorage.getItem('bolt_user_profile'),
+        settings: localStorage.getItem('bolt_settings'),
+        exportDate: new Date().toISOString(),
+      };
+
+      const blob = new Blob([JSON.stringify(settings, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-settings-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success('Settings exported successfully');
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error('Failed to export settings');
+    }
+  };
+
+  const handleImportSettings = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      const content = await file.text();
+      const settings = JSON.parse(content);
+
+      if (settings.userProfile) {
+        localStorage.setItem('bolt_user_profile', settings.userProfile);
+      }
+
+      if (settings.settings) {
+        localStorage.setItem('bolt_settings', settings.settings);
+      }
+
+      window.location.reload(); // Reload to apply settings
+      toast.success('Settings imported successfully');
+    } catch (error) {
+      console.error('Import error:', error);
+      toast.error('Failed to import settings');
+    }
+  };
+
+  const handleImportAPIKeys = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    setIsImportingKeys(true);
+
+    try {
+      const content = await file.text();
+      const keys = JSON.parse(content);
+
+      // Validate and save each key
+      Object.entries(keys).forEach(([key, value]) => {
+        if (typeof value !== 'string') {
+          throw new Error(`Invalid value for key: ${key}`);
+        }
+
+        localStorage.setItem(`bolt_${key.toLowerCase()}`, value);
+      });
+
+      toast.success('API keys imported successfully');
+    } catch (error) {
+      console.error('Error importing API keys:', error);
+      toast.error('Failed to import API keys');
+    } finally {
+      setIsImportingKeys(false);
+
+      if (apiKeyFileInputRef.current) {
+        apiKeyFileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleDownloadTemplate = () => {
+    setIsDownloadingTemplate(true);
+
+    try {
+      const template = {
+        Anthropic_API_KEY: '',
+        OpenAI_API_KEY: '',
+        Google_API_KEY: '',
+        Groq_API_KEY: '',
+        HuggingFace_API_KEY: '',
+        OpenRouter_API_KEY: '',
+        Deepseek_API_KEY: '',
+        Mistral_API_KEY: '',
+        OpenAILike_API_KEY: '',
+        Together_API_KEY: '',
+        xAI_API_KEY: '',
+        Perplexity_API_KEY: '',
+        Cohere_API_KEY: '',
+        AzureOpenAI_API_KEY: '',
+        OPENAI_LIKE_API_BASE_URL: '',
+        LMSTUDIO_API_BASE_URL: '',
+        OLLAMA_API_BASE_URL: '',
+        TOGETHER_API_BASE_URL: '',
+      };
+
+      const blob = new Blob([JSON.stringify(template, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'bolt-api-keys-template.json';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success('Template downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading template:', error);
+      toast.error('Failed to download template');
+    } finally {
+      setIsDownloadingTemplate(false);
+    }
+  };
+
+  const handleResetSettings = async () => {
+    setIsResetting(true);
+
+    try {
+      // Clear all stored settings from localStorage
+      localStorage.removeItem('bolt_user_profile');
+      localStorage.removeItem('bolt_settings');
+      localStorage.removeItem('bolt_chat_history');
+
+      // Clear all data from IndexedDB
+      if (!db) {
+        throw new Error('Database not initialized');
+      }
+
+      // Get all chats and delete them
+      const chats = await getAll(db as IDBDatabase);
+      const deletePromises = chats.map((chat) => deleteById(db as IDBDatabase, chat.id));
+      await Promise.all(deletePromises);
+
+      // Close the dialog first
+      setShowResetInlineConfirm(false);
+
+      // Then reload and show success message
+      window.location.reload();
+      toast.success('Settings reset successfully');
+    } catch (error) {
+      console.error('Reset error:', error);
+      setShowResetInlineConfirm(false);
+      toast.error('Failed to reset settings');
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  const handleDeleteAllChats = async () => {
+    setIsDeleting(true);
+
+    try {
+      // Clear chat history from localStorage
+      localStorage.removeItem('bolt_chat_history');
+
+      // Clear chats from IndexedDB
+      if (!db) {
+        throw new Error('Database not initialized');
+      }
+
+      // Get all chats and delete them one by one
+      const chats = await getAll(db as IDBDatabase);
+      const deletePromises = chats.map((chat) => deleteById(db as IDBDatabase, chat.id));
+      await Promise.all(deletePromises);
+
+      // Close the dialog first
+      setShowDeleteInlineConfirm(false);
+
+      // Then show the success message
+      toast.success('Chat history deleted successfully');
+    } catch (error) {
+      console.error('Delete error:', error);
+      setShowDeleteInlineConfirm(false);
+      toast.error('Failed to delete chat history');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <input ref={fileInputRef} type="file" accept=".json" onChange={handleImportSettings} className="hidden" />
+      {/* Reset Settings Dialog */}
+      <DialogRoot open={showResetInlineConfirm} onOpenChange={setShowResetInlineConfirm}>
+        <Dialog showCloseButton={false} className="z-[1000]">
+          <div className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning-circle-fill w-5 h-5 text-yellow-500" />
+              <DialogTitle>Reset All Settings?</DialogTitle>
+            </div>
+            <p className="text-sm text-bolt-elements-textSecondary mt-2">
+              This will reset all your settings to their default values. This action cannot be undone.
+            </p>
+            <div className="flex justify-end items-center gap-3 mt-6">
+              <DialogClose asChild>
+                <button className="px-4 py-2 rounded-lg text-sm bg-[#F5F5F5] dark:bg-[#1A1A1A] text-[#666666] dark:text-[#999999] hover:text-[#333333] dark:hover:text-white">
+                  Cancel
+                </button>
+              </DialogClose>
+              <motion.button
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm bg-white dark:bg-[#1A1A1A] text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-500/10 border border-transparent hover:border-yellow-500/10 dark:hover:border-yellow-500/20"
+                onClick={handleResetSettings}
+                disabled={isResetting}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {isResetting ? (
+                  <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                ) : (
+                  <div className="i-ph:arrow-counter-clockwise w-4 h-4" />
+                )}
+                Reset Settings
+              </motion.button>
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+
+      {/* Delete Confirmation Dialog */}
+      <DialogRoot open={showDeleteInlineConfirm} onOpenChange={setShowDeleteInlineConfirm}>
+        <Dialog showCloseButton={false} className="z-[1000]">
+          <div className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning-circle-fill w-5 h-5 text-red-500" />
+              <DialogTitle>Delete All Chats?</DialogTitle>
+            </div>
+            <p className="text-sm text-bolt-elements-textSecondary mt-2">
+              This will permanently delete all your chat history. This action cannot be undone.
+            </p>
+            <div className="flex justify-end items-center gap-3 mt-6">
+              <DialogClose asChild>
+                <button className="px-4 py-2 rounded-lg text-sm bg-[#F5F5F5] dark:bg-[#1A1A1A] text-[#666666] dark:text-[#999999] hover:text-[#333333] dark:hover:text-white">
+                  Cancel
+                </button>
+              </DialogClose>
+              <motion.button
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm bg-white dark:bg-[#1A1A1A] text-red-500 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 border border-transparent hover:border-red-500/10 dark:hover:border-red-500/20"
+                onClick={handleDeleteAllChats}
+                disabled={isDeleting}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {isDeleting ? (
+                  <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                ) : (
+                  <div className="i-ph:trash w-4 h-4" />
+                )}
+                Delete All
+              </motion.button>
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+
+      {/* Chat History Section */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <div className="i-ph:chat-circle-duotone w-5 h-5 text-purple-500" />
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Chat History</h3>
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Export or delete all your chat history.</p>
+        <div className="flex gap-4">
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={handleExportAllChats}
+          >
+            <div className="i-ph:download-simple w-4 h-4" />
+            Export All Chats
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-50 text-red-500 text-sm hover:bg-red-100 dark:bg-red-500/10 dark:hover:bg-red-500/20"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => setShowDeleteInlineConfirm(true)}
+          >
+            <div className="i-ph:trash w-4 h-4" />
+            Delete All Chats
+          </motion.button>
+        </div>
+      </motion.div>
+
+      {/* Settings Backup Section */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <div className="i-ph:gear-duotone w-5 h-5 text-purple-500" />
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Settings Backup</h3>
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Export your settings to a JSON file or import settings from a previously exported file.
+        </p>
+        <div className="flex gap-4">
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={handleExportSettings}
+          >
+            <div className="i-ph:download-simple w-4 h-4" />
+            Export Settings
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <div className="i-ph:upload-simple w-4 h-4" />
+            Import Settings
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-50 text-yellow-600 text-sm hover:bg-yellow-100 dark:bg-yellow-500/10 dark:hover:bg-yellow-500/20 dark:text-yellow-500"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => setShowResetInlineConfirm(true)}
+          >
+            <div className="i-ph:arrow-counter-clockwise w-4 h-4" />
+            Reset Settings
+          </motion.button>
+        </div>
+      </motion.div>
+
+      {/* API Keys Management Section */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <div className="i-ph:key-duotone w-5 h-5 text-purple-500" />
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">API Keys Management</h3>
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Import API keys from a JSON file or download a template to fill in your keys.
+        </p>
+        <div className="flex gap-4">
+          <input
+            ref={apiKeyFileInputRef}
+            type="file"
+            accept=".json"
+            onChange={handleImportAPIKeys}
+            className="hidden"
+          />
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={handleDownloadTemplate}
+            disabled={isDownloadingTemplate}
+          >
+            {isDownloadingTemplate ? (
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            ) : (
+              <div className="i-ph:download-simple w-4 h-4" />
+            )}
+            Download Template
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => apiKeyFileInputRef.current?.click()}
+            disabled={isImportingKeys}
+          >
+            {isImportingKeys ? (
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            ) : (
+              <div className="i-ph:upload-simple w-4 h-4" />
+            )}
+            Import API Keys
+          </motion.button>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

app/components/@settings/tabs/debug/DebugTab.tsx

@@ -0,0 +1,2045 @@
+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 (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger
+        className={classNames(
+          'flex w-full items-center justify-between p-4',
+          'bg-white dark:bg-[#0A0A0A]',
+          'hover:bg-purple-50/50 dark:hover:bg-[#1a1a1a]',
+          'border-b border-[#E5E5E5] dark:border-[#1A1A1A]',
+          'transition-colors duration-200',
+          'first:rounded-t-lg last:rounded-b-lg',
+          { 'hover:rounded-lg': !isOpen },
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <div className="i-ph:package text-bolt-elements-textSecondary w-4 h-4" />
+          <span className="text-base text-bolt-elements-textPrimary">
+            {title} Dependencies ({deps.length})
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-bolt-elements-textSecondary">{isOpen ? 'Hide' : 'Show'}</span>
+          <div
+            className={classNames(
+              'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+              isOpen ? 'rotate-180' : '',
+            )}
+          />
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ScrollArea
+          className={classNames(
+            'h-[200px] w-full',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border-b border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'last:rounded-b-lg last:border-b-0',
+          )}
+        >
+          <div className="space-y-2 p-4">
+            {deps.map((dep) => (
+              <div key={dep.name} className="flex items-center justify-between text-sm">
+                <span className="text-bolt-elements-textPrimary">{dep.name}</span>
+                <span className="text-bolt-elements-textSecondary">{dep.version}</span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default function DebugTab() {
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
+  const [webAppInfo, setWebAppInfo] = useState<WebAppInfo | null>(null);
+  const [ollamaStatus, setOllamaStatus] = useState<OllamaServiceStatus>({
+    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 browser info
+      const ua = navigator.userAgent;
+      const browserName = ua.includes('Firefox')
+        ? 'Firefox'
+        : ua.includes('Chrome')
+          ? 'Chrome'
+          : ua.includes('Safari')
+            ? 'Safari'
+            : ua.includes('Edge')
+              ? 'Edge'
+              : 'Unknown';
+      const browserVersion = ua.match(/(Firefox|Chrome|Safari|Edge)\/([0-9.]+)/)?.[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;
+
+      // 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: navigator.platform,
+        arch: navigator.userAgent.includes('x64') ? 'x64' : navigator.userAgent.includes('arm') ? 'arm' : 'unknown',
+        platform: navigator.platform,
+        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,
+          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: timing.loadEventEnd - timing.navigationStart,
+            domReadyTime: timing.domContentLoadedEventEnd - timing.navigationStart,
+            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 }));
+    }
+  };
+
+  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<WebAppInfo, 'gitInfo'>;
+      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 }));
+    }
+  };
+
+  // Helper function to format bytes to human readable format
+  const formatBytes = (bytes: number) => {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+
+    return `${Math.round(size)} ${units[unitIndex]}`;
+  };
+
+  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-json',
+      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 (
+      <DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={classNames(
+            'group flex items-center gap-2',
+            'rounded-lg px-3 py-1.5',
+            'text-sm text-gray-900 dark:text-white',
+            'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+            'transition-all duration-200',
+          )}
+        >
+          <span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+          Export
+        </button>
+
+        <Dialog showCloseButton>
+          <div className="p-6">
+            <DialogTitle className="flex items-center gap-2">
+              <div className="i-ph:download w-5 h-5" />
+              Export Debug Information
+            </DialogTitle>
+
+            <div className="mt-4 flex flex-col gap-2">
+              {exportFormats.map((format) => (
+                <button
+                  key={format.id}
+                  onClick={() => handleFormatClick(format.handler)}
+                  className={classNames(
+                    'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
+                    'bg-white dark:bg-[#0A0A0A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+                    'hover:border-purple-200 dark:hover:border-purple-900/30',
+                    'text-bolt-elements-textPrimary',
+                  )}
+                >
+                  <div className={classNames(format.icon, 'w-5 h-5')} />
+                  <div>
+                    <div className="font-medium">{format.label}</div>
+                    <div className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                      {format.id === 'json' && 'Export as a structured JSON file'}
+                      {format.id === 'csv' && 'Export as a CSV spreadsheet'}
+                      {format.id === 'pdf' && 'Export as a formatted PDF document'}
+                      {format.id === 'txt' && 'Export as a formatted text file'}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+    );
+  };
+
+  // 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 (
+    <div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
+      {/* Quick Stats Banner */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        {/* Errors Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
+            >
+              {errorLogs.length}
+            </span>
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div
+              className={classNames(
+                'w-3.5 h-3.5',
+                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
+              )}
+            />
+            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
+          </div>
+        </div>
+
+        {/* Memory Usage Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:cpu text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Memory Usage</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames(
+                'text-2xl font-semibold',
+                (systemInfo?.memory?.percentage ?? 0) > 80
+                  ? 'text-red-500'
+                  : (systemInfo?.memory?.percentage ?? 0) > 60
+                    ? 'text-yellow-500'
+                    : 'text-green-500',
+              )}
+            >
+              {systemInfo?.memory?.percentage ?? 0}%
+            </span>
+          </div>
+          <Progress
+            value={systemInfo?.memory?.percentage ?? 0}
+            className={classNames(
+              'mt-2',
+              (systemInfo?.memory?.percentage ?? 0) > 80
+                ? '[&>div]:bg-red-500'
+                : (systemInfo?.memory?.percentage ?? 0) > 60
+                  ? '[&>div]:bg-yellow-500'
+                  : '[&>div]:bg-green-500',
+            )}
+          />
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div className="i-ph:info w-3.5 h-3.5 text-purple-500" />
+            Used: {systemInfo?.memory.used ?? '0 GB'} / {systemInfo?.memory.total ?? '0 GB'}
+          </div>
+        </div>
+
+        {/* Page Load Time Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:timer text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Page Load Time</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames(
+                'text-2xl font-semibold',
+                (systemInfo?.performance.timing.loadTime ?? 0) > 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
+            </span>
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div className="i-ph:code w-3.5 h-3.5 text-purple-500" />
+            DOM Ready: {systemInfo ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2) : '-'}s
+          </div>
+        </div>
+
+        {/* Network Speed Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:wifi-high text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Network Speed</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames(
+                'text-2xl font-semibold',
+                (systemInfo?.network.downlink ?? 0) < 5
+                  ? 'text-red-500'
+                  : (systemInfo?.network.downlink ?? 0) < 10
+                    ? 'text-yellow-500'
+                    : 'text-green-500',
+              )}
+            >
+              {systemInfo?.network.downlink ?? '-'} Mbps
+            </span>
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div className="i-ph:activity w-3.5 h-3.5 text-purple-500" />
+            RTT: {systemInfo?.network.rtt ?? '-'} ms
+          </div>
+        </div>
+
+        {/* Ollama Service Card - Now spans all 4 columns */}
+        <div className="md:col-span-4 p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[260px] flex flex-col">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:robot text-purple-500 w-5 h-5" />
+              <div>
+                <div className="text-base font-medium text-bolt-elements-textPrimary">Ollama Service</div>
+                <div className="text-xs text-bolt-elements-textSecondary mt-0.5">{status.message}</div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-bolt-elements-background-depth-3">
+                <div
+                  className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
+                    'shadow-lg shadow-green-500/20': status.status === 'Running',
+                    'shadow-lg shadow-red-500/20': status.status === 'Not Running',
+                  })}
+                />
+                <span className={classNames('text-xs font-medium flex items-center gap-1', status.color)}>
+                  {status.status}
+                </span>
+              </div>
+              <div className="text-[10px] text-bolt-elements-textTertiary flex items-center gap-1.5">
+                <div className="i-ph:clock w-3 h-3" />
+                {ollamaStatus.lastChecked.toLocaleTimeString()}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 flex-1 min-h-0 flex flex-col">
+            {status.status === 'Running' && ollamaStatus.models && ollamaStatus.models.length > 0 ? (
+              <>
+                <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div className="i-ph:cube-duotone w-4 h-4 text-purple-500" />
+                    <span>Installed Models</span>
+                    <Badge variant="secondary" className="ml-1">
+                      {ollamaStatus.models.length}
+                    </Badge>
+                  </div>
+                </div>
+                <div className="overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-600">
+                  <div className="grid grid-cols-2 gap-3 pr-2">
+                    {ollamaStatus.models.map((model) => (
+                      <div
+                        key={model.name}
+                        className="text-sm bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4 rounded-lg px-4 py-3 flex items-center justify-between transition-colors group"
+                      >
+                        <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                          <div className="i-ph:cube w-4 h-4 text-purple-500/70 group-hover:text-purple-500 transition-colors" />
+                          <span className="font-mono truncate">{model.name}</span>
+                        </div>
+                        <Badge variant="outline" className="ml-2 text-xs font-mono">
+                          {Math.round(parseInt(model.size) / 1024 / 1024)}MB
+                        </Badge>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-3 max-w-[280px] text-center">
+                  <div
+                    className={classNames('w-12 h-12', {
+                      'i-ph:warning-circle text-red-500/80':
+                        status.status === 'Not Running' || status.status === 'Disabled',
+                      'i-ph:cube-duotone text-purple-500/80': status.status === 'Running',
+                    })}
+                  />
+                  <span className="text-sm text-bolt-elements-textSecondary">{status.message}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-4">
+        <button
+          onClick={getSystemInfo}
+          disabled={loading.systemInfo}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+            'hover:border-purple-200 dark:hover:border-purple-900/30',
+            'text-bolt-elements-textPrimary',
+            { 'opacity-50 cursor-not-allowed': loading.systemInfo },
+          )}
+        >
+          {loading.systemInfo ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:gear w-4 h-4" />
+          )}
+          Update System Info
+        </button>
+
+        <button
+          onClick={handleLogPerformance}
+          disabled={loading.performance}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+            'hover:border-purple-200 dark:hover:border-purple-900/30',
+            'text-bolt-elements-textPrimary',
+            { 'opacity-50 cursor-not-allowed': loading.performance },
+          )}
+        >
+          {loading.performance ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:chart-bar w-4 h-4" />
+          )}
+          Log Performance
+        </button>
+
+        <button
+          onClick={checkErrors}
+          disabled={loading.errors}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+            'hover:border-purple-200 dark:hover:border-purple-900/30',
+            'text-bolt-elements-textPrimary',
+            { 'opacity-50 cursor-not-allowed': loading.errors },
+          )}
+        >
+          {loading.errors ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:warning w-4 h-4" />
+          )}
+          Check Errors
+        </button>
+
+        <button
+          onClick={getWebAppInfo}
+          disabled={loading.webAppInfo}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+            'hover:border-purple-200 dark:hover:border-purple-900/30',
+            'text-bolt-elements-textPrimary',
+            { 'opacity-50 cursor-not-allowed': loading.webAppInfo },
+          )}
+        >
+          {loading.webAppInfo ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:info w-4 h-4" />
+          )}
+          Fetch WebApp Info
+        </button>
+
+        <ExportButton />
+      </div>
+
+      {/* System Information */}
+      <Collapsible
+        open={openSections.system}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, system: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:cpu text-purple-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Information</h3>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.system ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {systemInfo ? (
+              <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:desktop text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">OS: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.os}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:device-mobile text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Platform: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:microchip text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Architecture: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:cpu text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">CPU Cores: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Node Version: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:wifi-high text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Network Type: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.network.type} ({systemInfo.network.effectiveType})
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:gauge text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Network Speed: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.network.downlink}Mbps (RTT: {systemInfo.network.rtt}ms)
+                    </span>
+                  </div>
+                  {systemInfo.battery && (
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:battery-charging text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Battery: </span>
+                      <span className="text-bolt-elements-textPrimary">
+                        {systemInfo.battery.level.toFixed(1)}% {systemInfo.battery.charging ? '(Charging)' : ''}
+                      </span>
+                    </div>
+                  )}
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:hard-drive text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Storage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.storage.usage / (1024 * 1024 * 1024)).toFixed(2)}GB /{' '}
+                      {(systemInfo.storage.quota / (1024 * 1024 * 1024)).toFixed(2)}GB
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:database text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Memory Usage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.memory.used} / {systemInfo.memory.total} ({systemInfo.memory.percentage}%)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:browser text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Browser: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.browser.name} {systemInfo.browser.version}
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:monitor text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Screen: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.screen.width}x{systemInfo.screen.height} ({systemInfo.screen.pixelRatio}x)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Timezone: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.time.timezone}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:translate text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Language: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.browser.language}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:chart-pie text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">JS Heap: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
+                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB (
+                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:timer text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Page Load: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:code text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">DOM Ready: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary">Loading system information...</div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Performance Metrics */}
+      <Collapsible
+        open={openSections.performance}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, performance: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:chart-line text-purple-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Performance Metrics</h3>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.performance ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {systemInfo && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Page Load Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">DOM Ready Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Request Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.requestTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Redirect Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.redirectTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">JS Heap Usage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
+                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Heap Utilization: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Navigation Type: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.navigation.type === 0
+                        ? 'Navigate'
+                        : systemInfo.performance.navigation.type === 1
+                          ? 'Reload'
+                          : systemInfo.performance.navigation.type === 2
+                            ? 'Back/Forward'
+                            : 'Other'}
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Redirects: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.navigation.redirectCount}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* WebApp Information */}
+      <Collapsible
+        open={openSections.webapp}
+        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, webapp: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:info text-blue-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">WebApp Information</h3>
+              {loading.webAppInfo && <span className="loading loading-spinner loading-sm" />}
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.webapp ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {loading.webAppInfo ? (
+              <div className="flex items-center justify-center p-8">
+                <span className="loading loading-spinner loading-lg" />
+              </div>
+            ) : !webAppInfo ? (
+              <div className="flex flex-col items-center justify-center p-8 text-bolt-elements-textSecondary">
+                <div className="i-ph:warning-circle w-8 h-8 mb-2" />
+                <p>Failed to load WebApp information</p>
+                <button
+                  onClick={() => getWebAppInfo()}
+                  className="mt-4 px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                >
+                  Retry
+                </button>
+              </div>
+            ) : (
+              <div className="grid grid-cols-2 gap-6">
+                <div>
+                  <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Basic Information</h3>
+                  <div className="space-y-3">
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:app-window text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Name:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.name}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:tag text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Version:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.version}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:certificate text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">License:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.license}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:cloud text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Environment:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Node Version:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.runtimeInfo.nodeVersion}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Git Information</h3>
+                  <div className="space-y-3">
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:git-branch text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Branch:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.branch}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:git-commit text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Commit:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.commitHash}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:user text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Author:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.author}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Commit Time:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.commitTime}</span>
+                    </div>
+
+                    {webAppInfo.gitInfo.github && (
+                      <>
+                        <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+                          <div className="text-sm flex items-center gap-2">
+                            <div className="i-ph:git-repository text-bolt-elements-textSecondary w-4 h-4" />
+                            <span className="text-bolt-elements-textSecondary">Repository:</span>
+                            <span className="text-bolt-elements-textPrimary">
+                              {webAppInfo.gitInfo.github.currentRepo.fullName}
+                              {webAppInfo.gitInfo.isForked && ' (fork)'}
+                            </span>
+                          </div>
+
+                          <div className="mt-2 flex items-center gap-4 text-sm">
+                            <div className="flex items-center gap-1">
+                              <div className="i-ph:star text-yellow-500 w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">
+                                {webAppInfo.gitInfo.github.currentRepo.stars}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="i-ph:git-fork text-blue-500 w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">
+                                {webAppInfo.gitInfo.github.currentRepo.forks}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="i-ph:warning-circle text-red-500 w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">
+                                {webAppInfo.gitInfo.github.currentRepo.openIssues}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+
+                        {webAppInfo.gitInfo.github.upstream && (
+                          <div className="mt-2">
+                            <div className="text-sm flex items-center gap-2">
+                              <div className="i-ph:git-fork text-bolt-elements-textSecondary w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">Upstream:</span>
+                              <span className="text-bolt-elements-textPrimary">
+                                {webAppInfo.gitInfo.github.upstream.fullName}
+                              </span>
+                            </div>
+
+                            <div className="mt-2 flex items-center gap-4 text-sm">
+                              <div className="flex items-center gap-1">
+                                <div className="i-ph:star text-yellow-500 w-4 h-4" />
+                                <span className="text-bolt-elements-textSecondary">
+                                  {webAppInfo.gitInfo.github.upstream.stars}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <div className="i-ph:git-fork text-blue-500 w-4 h-4" />
+                                <span className="text-bolt-elements-textSecondary">
+                                  {webAppInfo.gitInfo.github.upstream.forks}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {webAppInfo && (
+              <div className="mt-6">
+                <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Dependencies</h3>
+                <div className="bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded-lg divide-y divide-[#E5E5E5] dark:divide-[#1A1A1A]">
+                  <DependencySection title="Production" deps={webAppInfo.dependencies.production} />
+                  <DependencySection title="Development" deps={webAppInfo.dependencies.development} />
+                  <DependencySection title="Peer" deps={webAppInfo.dependencies.peer} />
+                  <DependencySection title="Optional" deps={webAppInfo.dependencies.optional} />
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Error Check */}
+      <Collapsible
+        open={openSections.errors}
+        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, errors: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning text-red-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Error Check</h3>
+              {errorLogs.length > 0 && (
+                <Badge variant="destructive" className="ml-2">
+                  {errorLogs.length} Errors
+                </Badge>
+              )}
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.errors ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <ScrollArea className="h-[300px]">
+              <div className="space-y-4">
+                <div className="text-sm text-bolt-elements-textSecondary">
+                  Checks for:
+                  <ul className="list-disc list-inside mt-2 space-y-1">
+                    <li>Unhandled JavaScript errors</li>
+                    <li>Unhandled Promise rejections</li>
+                    <li>Runtime exceptions</li>
+                    <li>Network errors</li>
+                  </ul>
+                </div>
+                <div className="text-sm">
+                  <span className="text-bolt-elements-textSecondary">Status: </span>
+                  <span className="text-bolt-elements-textPrimary">
+                    {loading.errors
+                      ? 'Checking...'
+                      : errorLogs.length > 0
+                        ? `${errorLogs.length} errors found`
+                        : 'No errors found'}
+                  </span>
+                </div>
+                {errorLogs.length > 0 && (
+                  <div className="mt-4">
+                    <div className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Recent Errors:</div>
+                    <div className="space-y-2">
+                      {errorLogs.map((error) => (
+                        <div key={error.id} className="text-sm text-red-500 dark:text-red-400 p-2 rounded bg-red-500/5">
+                          <div className="font-medium">{error.message}</div>
+                          {error.source && (
+                            <div className="text-xs mt-1 text-red-400">
+                              Source: {error.source}
+                              {error.details?.lineNumber && `:${error.details.lineNumber}`}
+                            </div>
+                          )}
+                          {error.stack && (
+                            <div className="text-xs mt-1 text-red-400 font-mono whitespace-pre-wrap">{error.stack}</div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

app/components/@settings/tabs/event-logs/EventLogsTab.tsx

@@ -0,0 +1,1013 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Switch } from '~/components/ui/Switch';
+import { logStore, type LogEntry } from '~/lib/stores/logs';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
+import { jsPDF } from 'jspdf';
+import { toast } from 'react-toastify';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  icon?: string;
+  color?: string;
+}
+
+const logLevelOptions: SelectOption[] = [
+  {
+    value: 'all',
+    label: 'All Types',
+    icon: 'i-ph:funnel',
+    color: '#9333ea',
+  },
+  {
+    value: 'provider',
+    label: 'LLM',
+    icon: 'i-ph:robot',
+    color: '#10b981',
+  },
+  {
+    value: 'api',
+    label: 'API',
+    icon: 'i-ph:cloud',
+    color: '#3b82f6',
+  },
+  {
+    value: 'error',
+    label: 'Errors',
+    icon: 'i-ph:warning-circle',
+    color: '#ef4444',
+  },
+  {
+    value: 'warning',
+    label: 'Warnings',
+    icon: 'i-ph:warning',
+    color: '#f59e0b',
+  },
+  {
+    value: 'info',
+    label: 'Info',
+    icon: 'i-ph:info',
+    color: '#3b82f6',
+  },
+  {
+    value: 'debug',
+    label: 'Debug',
+    icon: 'i-ph:bug',
+    color: '#6b7280',
+  },
+];
+
+interface LogEntryItemProps {
+  log: LogEntry;
+  isExpanded: boolean;
+  use24Hour: boolean;
+  showTimestamp: boolean;
+}
+
+const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp }: LogEntryItemProps) => {
+  const [localExpanded, setLocalExpanded] = useState(forceExpanded);
+
+  useEffect(() => {
+    setLocalExpanded(forceExpanded);
+  }, [forceExpanded]);
+
+  const timestamp = useMemo(() => {
+    const date = new Date(log.timestamp);
+    return date.toLocaleTimeString('en-US', { hour12: !use24Hour });
+  }, [log.timestamp, use24Hour]);
+
+  const style = useMemo(() => {
+    if (log.category === 'provider') {
+      return {
+        icon: 'i-ph:robot',
+        color: 'text-emerald-500 dark:text-emerald-400',
+        bg: 'hover:bg-emerald-500/10 dark:hover:bg-emerald-500/20',
+        badge: 'text-emerald-500 bg-emerald-50 dark:bg-emerald-500/10',
+      };
+    }
+
+    if (log.category === 'api') {
+      return {
+        icon: 'i-ph:cloud',
+        color: 'text-blue-500 dark:text-blue-400',
+        bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+        badge: 'text-blue-500 bg-blue-50 dark:bg-blue-500/10',
+      };
+    }
+
+    switch (log.level) {
+      case 'error':
+        return {
+          icon: 'i-ph:warning-circle',
+          color: 'text-red-500 dark:text-red-400',
+          bg: 'hover:bg-red-500/10 dark:hover:bg-red-500/20',
+          badge: 'text-red-500 bg-red-50 dark:bg-red-500/10',
+        };
+      case 'warning':
+        return {
+          icon: 'i-ph:warning',
+          color: 'text-yellow-500 dark:text-yellow-400',
+          bg: 'hover:bg-yellow-500/10 dark:hover:bg-yellow-500/20',
+          badge: 'text-yellow-500 bg-yellow-50 dark:bg-yellow-500/10',
+        };
+      case 'debug':
+        return {
+          icon: 'i-ph:bug',
+          color: 'text-gray-500 dark:text-gray-400',
+          bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
+          badge: 'text-gray-500 bg-gray-50 dark:bg-gray-500/10',
+        };
+      default:
+        return {
+          icon: 'i-ph:info',
+          color: 'text-blue-500 dark:text-blue-400',
+          bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+          badge: 'text-blue-500 bg-blue-50 dark:bg-blue-500/10',
+        };
+    }
+  }, [log.level, log.category]);
+
+  const renderDetails = (details: any) => {
+    if (log.category === 'provider') {
+      return (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+            <span>Model: {details.model}</span>
+            <span>•</span>
+            <span>Tokens: {details.totalTokens}</span>
+            <span>•</span>
+            <span>Duration: {details.duration}ms</span>
+          </div>
+          {details.prompt && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Prompt:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {details.prompt}
+              </pre>
+            </div>
+          )}
+          {details.response && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Response:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {details.response}
+              </pre>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    if (log.category === 'api') {
+      return (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+            <span className={details.method === 'GET' ? 'text-green-500' : 'text-blue-500'}>{details.method}</span>
+            <span>•</span>
+            <span>Status: {details.statusCode}</span>
+            <span>•</span>
+            <span>Duration: {details.duration}ms</span>
+          </div>
+          <div className="text-xs text-gray-600 dark:text-gray-400 break-all">{details.url}</div>
+          {details.request && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Request:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {JSON.stringify(details.request, null, 2)}
+              </pre>
+            </div>
+          )}
+          {details.response && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Response:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {JSON.stringify(details.response, null, 2)}
+              </pre>
+            </div>
+          )}
+          {details.error && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-red-500">Error:</div>
+              <pre className="text-xs text-red-400 bg-red-50 dark:bg-red-500/10 rounded p-2 whitespace-pre-wrap">
+                {JSON.stringify(details.error, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded whitespace-pre-wrap">
+        {JSON.stringify(details, null, 2)}
+      </pre>
+    );
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={classNames(
+        'flex flex-col gap-2',
+        'rounded-lg p-4',
+        'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+        'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+        style.bg,
+        'transition-all duration-200',
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-start gap-3">
+          <span className={classNames('text-lg', style.icon, style.color)} />
+          <div className="flex flex-col gap-1">
+            <div className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</div>
+            {log.details && (
+              <>
+                <button
+                  onClick={() => setLocalExpanded(!localExpanded)}
+                  className="text-xs text-gray-500 dark:text-gray-400 hover:text-purple-500 dark:hover:text-purple-400 transition-colors"
+                >
+                  {localExpanded ? 'Hide' : 'Show'} Details
+                </button>
+                {localExpanded && renderDetails(log.details)}
+              </>
+            )}
+            <div className="flex items-center gap-2">
+              <div className={classNames('px-2 py-0.5 rounded text-xs font-medium uppercase', style.badge)}>
+                {log.level}
+              </div>
+              {log.category && (
+                <div className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+                  {log.category}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        {showTimestamp && <time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">{timestamp}</time>}
+      </div>
+    </motion.div>
+  );
+};
+
+interface ExportFormat {
+  id: string;
+  label: string;
+  icon: string;
+  handler: () => void;
+}
+
+export function EventLogsTab() {
+  const logs = useStore(logStore.logs);
+  const [selectedLevel, setSelectedLevel] = useState<'all' | string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [use24Hour, setUse24Hour] = useState(false);
+  const [autoExpand, setAutoExpand] = useState(false);
+  const [showTimestamps, setShowTimestamps] = useState(true);
+  const [showLevelFilter, setShowLevelFilter] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const levelFilterRef = useRef<HTMLDivElement>(null);
+
+  const filteredLogs = useMemo(() => {
+    const allLogs = Object.values(logs);
+
+    if (selectedLevel === 'all') {
+      return allLogs.filter((log) =>
+        searchQuery ? log.message.toLowerCase().includes(searchQuery.toLowerCase()) : true,
+      );
+    }
+
+    return allLogs.filter((log) => {
+      const matchesType = log.category === selectedLevel || log.level === selectedLevel;
+      const matchesSearch = searchQuery ? log.message.toLowerCase().includes(searchQuery.toLowerCase()) : true;
+
+      return matchesType && matchesSearch;
+    });
+  }, [logs, selectedLevel, searchQuery]);
+
+  // Add performance tracking on mount
+  useEffect(() => {
+    const startTime = performance.now();
+
+    logStore.logInfo('Event Logs tab mounted', {
+      type: 'component_mount',
+      message: 'Event Logs tab component mounted',
+      component: 'EventLogsTab',
+    });
+
+    return () => {
+      const duration = performance.now() - startTime;
+      logStore.logPerformanceMetric('EventLogsTab', 'mount-duration', duration);
+    };
+  }, []);
+
+  // Log filter changes
+  const handleLevelFilterChange = useCallback(
+    (newLevel: string) => {
+      logStore.logInfo('Log level filter changed', {
+        type: 'filter_change',
+        message: `Log level filter changed from ${selectedLevel} to ${newLevel}`,
+        component: 'EventLogsTab',
+        previousLevel: selectedLevel,
+        newLevel,
+      });
+      setSelectedLevel(newLevel as string);
+      setShowLevelFilter(false);
+    },
+    [selectedLevel],
+  );
+
+  // Log search changes with debounce
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (searchQuery) {
+        logStore.logInfo('Log search performed', {
+          type: 'search',
+          message: `Search performed with query "${searchQuery}" (${filteredLogs.length} results)`,
+          component: 'EventLogsTab',
+          query: searchQuery,
+          resultsCount: filteredLogs.length,
+        });
+      }
+    }, 1000);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery, filteredLogs.length]);
+
+  // Enhanced refresh handler
+  const handleRefresh = useCallback(async () => {
+    const startTime = performance.now();
+    setIsRefreshing(true);
+
+    try {
+      await logStore.refreshLogs();
+
+      const duration = performance.now() - startTime;
+
+      logStore.logSuccess('Logs refreshed successfully', {
+        type: 'refresh',
+        message: `Successfully refreshed ${Object.keys(logs).length} logs`,
+        component: 'EventLogsTab',
+        duration,
+        logsCount: Object.keys(logs).length,
+      });
+    } catch (error) {
+      logStore.logError('Failed to refresh logs', error, {
+        type: 'refresh_error',
+        message: 'Failed to refresh logs',
+        component: 'EventLogsTab',
+      });
+    } finally {
+      setTimeout(() => setIsRefreshing(false), 500);
+    }
+  }, [logs]);
+
+  // Log preference changes
+  const handlePreferenceChange = useCallback((type: string, value: boolean) => {
+    logStore.logInfo('Log preference changed', {
+      type: 'preference_change',
+      message: `Log preference "${type}" changed to ${value}`,
+      component: 'EventLogsTab',
+      preference: type,
+      value,
+    });
+
+    switch (type) {
+      case 'timestamps':
+        setShowTimestamps(value);
+        break;
+      case '24hour':
+        setUse24Hour(value);
+        break;
+      case 'autoExpand':
+        setAutoExpand(value);
+        break;
+    }
+  }, []);
+
+  // Close filters when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (levelFilterRef.current && !levelFilterRef.current.contains(event.target as Node)) {
+        setShowLevelFilter(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const selectedLevelOption = logLevelOptions.find((opt) => opt.value === selectedLevel);
+
+  // Export functions
+  const exportAsJSON = () => {
+    try {
+      const exportData = {
+        timestamp: new Date().toISOString(),
+        logs: filteredLogs,
+        filters: {
+          level: selectedLevel,
+          searchQuery,
+        },
+        preferences: {
+          use24Hour,
+          showTimestamps,
+          autoExpand,
+        },
+      };
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-event-logs-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Event logs exported successfully as JSON');
+    } catch (error) {
+      console.error('Failed to export JSON:', error);
+      toast.error('Failed to export event logs as JSON');
+    }
+  };
+
+  const exportAsCSV = () => {
+    try {
+      // Convert logs to CSV format
+      const headers = ['Timestamp', 'Level', 'Category', 'Message', 'Details'];
+      const csvData = [
+        headers,
+        ...filteredLogs.map((log) => [
+          new Date(log.timestamp).toISOString(),
+          log.level,
+          log.category || '',
+          log.message,
+          log.details ? JSON.stringify(log.details) : '',
+        ]),
+      ];
+
+      const csvContent = csvData
+        .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).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-event-logs-${new Date().toISOString()}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Event logs exported successfully as CSV');
+    } catch (error) {
+      console.error('Failed to export CSV:', error);
+      toast.error('Failed to export event logs as CSV');
+    }
+  };
+
+  const exportAsPDF = () => {
+    try {
+      // 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;
+
+      // Helper function to add section header
+      const addSectionHeader = (title: string) => {
+        // Check if we need a new page
+        if (yPos > doc.internal.pageSize.getHeight() - 30) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        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);
+        yPos += lineHeight * 2;
+      };
+
+      // Add title and header
+      doc.setFillColor('#6366F1');
+      doc.rect(0, 0, pageWidth, 50, 'F');
+      doc.setTextColor('#FFFFFF');
+      doc.setFontSize(24);
+      doc.setFont('helvetica', 'bold');
+      doc.text('Event Logs Report', margin, 35);
+
+      // Add subtitle with bolt.diy
+      doc.setFontSize(12);
+      doc.setFont('helvetica', 'normal');
+      doc.text('bolt.diy - AI Development Platform', margin, 45);
+      yPos = 70;
+
+      // Add report summary section
+      addSectionHeader('Report Summary');
+
+      doc.setFontSize(10);
+      doc.setFont('helvetica', 'normal');
+      doc.setTextColor('#374151');
+
+      const summaryItems = [
+        { label: 'Generated', value: new Date().toLocaleString() },
+        { label: 'Total Logs', value: filteredLogs.length.toString() },
+        { label: 'Filter Applied', value: selectedLevel === 'all' ? 'All Types' : selectedLevel },
+        { label: 'Search Query', value: searchQuery || 'None' },
+        { label: 'Time Format', value: use24Hour ? '24-hour' : '12-hour' },
+      ];
+
+      summaryItems.forEach((item) => {
+        doc.setFont('helvetica', 'bold');
+        doc.text(`${item.label}:`, margin, yPos);
+        doc.setFont('helvetica', 'normal');
+        doc.text(item.value, margin + 60, yPos);
+        yPos += lineHeight;
+      });
+
+      yPos += lineHeight * 2;
+
+      // Add statistics section
+      addSectionHeader('Log Statistics');
+
+      // Calculate statistics
+      const stats = {
+        error: filteredLogs.filter((log) => log.level === 'error').length,
+        warning: filteredLogs.filter((log) => log.level === 'warning').length,
+        info: filteredLogs.filter((log) => log.level === 'info').length,
+        debug: filteredLogs.filter((log) => log.level === 'debug').length,
+        provider: filteredLogs.filter((log) => log.category === 'provider').length,
+        api: filteredLogs.filter((log) => log.category === 'api').length,
+      };
+
+      // Create two columns for statistics
+      const leftStats = [
+        { label: 'Error Logs', value: stats.error, color: '#DC2626' },
+        { label: 'Warning Logs', value: stats.warning, color: '#F59E0B' },
+        { label: 'Info Logs', value: stats.info, color: '#3B82F6' },
+      ];
+
+      const rightStats = [
+        { label: 'Debug Logs', value: stats.debug, color: '#6B7280' },
+        { label: 'LLM Logs', value: stats.provider, color: '#10B981' },
+        { label: 'API Logs', value: stats.api, color: '#3B82F6' },
+      ];
+
+      const colWidth = (pageWidth - 2 * margin) / 2;
+
+      // Draw statistics in two columns
+      leftStats.forEach((stat, index) => {
+        doc.setTextColor(stat.color);
+        doc.setFont('helvetica', 'bold');
+        doc.text(stat.value.toString(), margin, yPos);
+        doc.setTextColor('#374151');
+        doc.setFont('helvetica', 'normal');
+        doc.text(stat.label, margin + 20, yPos);
+
+        if (rightStats[index]) {
+          doc.setTextColor(rightStats[index].color);
+          doc.setFont('helvetica', 'bold');
+          doc.text(rightStats[index].value.toString(), margin + colWidth, yPos);
+          doc.setTextColor('#374151');
+          doc.setFont('helvetica', 'normal');
+          doc.text(rightStats[index].label, margin + colWidth + 20, yPos);
+        }
+
+        yPos += lineHeight;
+      });
+
+      yPos += lineHeight * 2;
+
+      // Add logs section
+      addSectionHeader('Event Logs');
+
+      // Helper function to add a log entry with improved formatting
+      const addLogEntry = (log: LogEntry) => {
+        const entryHeight = 20 + (log.details ? 40 : 0); // Estimate entry height
+
+        // Check if we need a new page
+        if (yPos + entryHeight > doc.internal.pageSize.getHeight() - 20) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        // Add timestamp and level
+        const timestamp = new Date(log.timestamp).toLocaleString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: !use24Hour,
+        });
+
+        // Draw log level badge background
+        const levelColors: Record<string, string> = {
+          error: '#FEE2E2',
+          warning: '#FEF3C7',
+          info: '#DBEAFE',
+          debug: '#F3F4F6',
+        };
+
+        const textColors: Record<string, string> = {
+          error: '#DC2626',
+          warning: '#F59E0B',
+          info: '#3B82F6',
+          debug: '#6B7280',
+        };
+
+        const levelWidth = doc.getTextWidth(log.level.toUpperCase()) + 10;
+        doc.setFillColor(levelColors[log.level] || '#F3F4F6');
+        doc.roundedRect(margin, yPos - 4, levelWidth, lineHeight + 4, 1, 1, 'F');
+
+        // Add log level text
+        doc.setTextColor(textColors[log.level] || '#6B7280');
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(8);
+        doc.text(log.level.toUpperCase(), margin + 5, yPos);
+
+        // Add timestamp
+        doc.setTextColor('#6B7280');
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(9);
+        doc.text(timestamp, margin + levelWidth + 10, yPos);
+
+        // Add category if present
+        if (log.category) {
+          const categoryX = margin + levelWidth + doc.getTextWidth(timestamp) + 20;
+          doc.setFillColor('#F3F4F6');
+
+          const categoryWidth = doc.getTextWidth(log.category) + 10;
+          doc.roundedRect(categoryX, yPos - 4, categoryWidth, lineHeight + 4, 2, 2, 'F');
+          doc.setTextColor('#6B7280');
+          doc.text(log.category, categoryX + 5, yPos);
+        }
+
+        yPos += lineHeight * 1.5;
+
+        // Add message
+        doc.setTextColor('#111827');
+        doc.setFontSize(10);
+
+        const messageLines = doc.splitTextToSize(log.message, maxLineWidth - 10);
+        doc.text(messageLines, margin + 5, yPos);
+        yPos += messageLines.length * lineHeight;
+
+        // Add details if present
+        if (log.details) {
+          doc.setTextColor('#6B7280');
+          doc.setFontSize(8);
+
+          const detailsStr = JSON.stringify(log.details, null, 2);
+          const detailsLines = doc.splitTextToSize(detailsStr, maxLineWidth - 15);
+
+          // Add details background
+          doc.setFillColor('#F9FAFB');
+          doc.roundedRect(margin + 5, yPos - 2, maxLineWidth - 10, detailsLines.length * lineHeight + 8, 1, 1, 'F');
+
+          doc.text(detailsLines, margin + 10, yPos + 4);
+          yPos += detailsLines.length * lineHeight + 10;
+        }
+
+        // Add separator line
+        doc.setDrawColor('#E5E7EB');
+        doc.setLineWidth(0.1);
+        doc.line(margin, yPos, pageWidth - margin, yPos);
+        yPos += lineHeight * 1.5;
+      };
+
+      // Add all logs
+      filteredLogs.forEach((log) => {
+        addLogEntry(log);
+      });
+
+      // Add footer to all pages
+      const totalPages = doc.internal.pages.length - 1;
+
+      for (let i = 1; i <= totalPages; i++) {
+        doc.setPage(i);
+        doc.setFontSize(8);
+        doc.setTextColor('#9CA3AF');
+
+        // Add page numbers
+        doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
+          align: 'center',
+        });
+
+        // Add footer text
+        doc.text('Generated by bolt.diy', margin, doc.internal.pageSize.getHeight() - 10);
+
+        const dateStr = new Date().toLocaleDateString();
+        doc.text(dateStr, pageWidth - margin, doc.internal.pageSize.getHeight() - 10, { align: 'right' });
+      }
+
+      // Save the PDF
+      doc.save(`bolt-event-logs-${new Date().toISOString()}.pdf`);
+      toast.success('Event logs exported successfully as PDF');
+    } catch (error) {
+      console.error('Failed to export PDF:', error);
+      toast.error('Failed to export event logs as PDF');
+    }
+  };
+
+  const exportAsText = () => {
+    try {
+      const textContent = filteredLogs
+        .map((log) => {
+          const timestamp = new Date(log.timestamp).toLocaleString();
+          let content = `[${timestamp}] ${log.level.toUpperCase()}: ${log.message}\n`;
+
+          if (log.category) {
+            content += `Category: ${log.category}\n`;
+          }
+
+          if (log.details) {
+            content += `Details:\n${JSON.stringify(log.details, null, 2)}\n`;
+          }
+
+          return content + '-'.repeat(80) + '\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-event-logs-${new Date().toISOString()}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Event logs exported successfully as text file');
+    } catch (error) {
+      console.error('Failed to export text file:', error);
+      toast.error('Failed to export event logs as text file');
+    }
+  };
+
+  const exportFormats: ExportFormat[] = [
+    {
+      id: 'json',
+      label: 'Export as JSON',
+      icon: 'i-ph:file-json',
+      handler: exportAsJSON,
+    },
+    {
+      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,
+    },
+  ];
+
+  const ExportButton = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpenChange = useCallback((open: boolean) => {
+      setIsOpen(open);
+    }, []);
+
+    const handleFormatClick = useCallback((handler: () => void) => {
+      handler();
+      setIsOpen(false);
+    }, []);
+
+    return (
+      <DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={classNames(
+            'group flex items-center gap-2',
+            'rounded-lg px-3 py-1.5',
+            'text-sm text-gray-900 dark:text-white',
+            'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+            'transition-all duration-200',
+          )}
+        >
+          <span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+          Export
+        </button>
+
+        <Dialog showCloseButton>
+          <div className="p-6">
+            <DialogTitle className="flex items-center gap-2">
+              <div className="i-ph:download w-5 h-5" />
+              Export Event Logs
+            </DialogTitle>
+
+            <div className="mt-4 flex flex-col gap-2">
+              {exportFormats.map((format) => (
+                <button
+                  key={format.id}
+                  onClick={() => handleFormatClick(format.handler)}
+                  className={classNames(
+                    'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
+                    'bg-white dark:bg-[#0A0A0A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+                    'hover:border-purple-200 dark:hover:border-purple-900/30',
+                    'text-bolt-elements-textPrimary',
+                  )}
+                >
+                  <div className={classNames(format.icon, 'w-5 h-5')} />
+                  <div>
+                    <div className="font-medium">{format.label}</div>
+                    <div className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                      {format.id === 'json' && 'Export as a structured JSON file'}
+                      {format.id === 'csv' && 'Export as a CSV spreadsheet'}
+                      {format.id === 'pdf' && 'Export as a formatted PDF document'}
+                      {format.id === 'txt' && 'Export as a formatted text file'}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+    );
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <DropdownMenu.Root open={showLevelFilter} onOpenChange={setShowLevelFilter}>
+          <DropdownMenu.Trigger asChild>
+            <button
+              className={classNames(
+                'flex items-center gap-2',
+                'rounded-lg px-3 py-1.5',
+                'text-sm text-gray-900 dark:text-white',
+                'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+                'transition-all duration-200',
+              )}
+            >
+              <span
+                className={classNames('text-lg', selectedLevelOption?.icon || 'i-ph:funnel')}
+                style={{ color: selectedLevelOption?.color }}
+              />
+              {selectedLevelOption?.label || 'All Types'}
+              <span className="i-ph:caret-down text-lg text-gray-500 dark:text-gray-400" />
+            </button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              className="min-w-[200px] bg-white dark:bg-[#0A0A0A] rounded-lg shadow-lg py-1 z-[250] animate-in fade-in-0 zoom-in-95 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+              sideOffset={5}
+              align="start"
+              side="bottom"
+            >
+              {logLevelOptions.map((option) => (
+                <DropdownMenu.Item
+                  key={option.value}
+                  className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
+                  onClick={() => handleLevelFilterChange(option.value)}
+                >
+                  <div className="mr-3 flex h-5 w-5 items-center justify-center">
+                    <div
+                      className={classNames(option.icon, 'text-lg group-hover:text-purple-500 transition-colors')}
+                      style={{ color: option.color }}
+                    />
+                  </div>
+                  <span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={showTimestamps}
+              onCheckedChange={(value) => handlePreferenceChange('timestamps', value)}
+              className="data-[state=checked]:bg-purple-500"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400">Show Timestamps</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={use24Hour}
+              onCheckedChange={(value) => handlePreferenceChange('24hour', value)}
+              className="data-[state=checked]:bg-purple-500"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400">24h Time</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={autoExpand}
+              onCheckedChange={(value) => handlePreferenceChange('autoExpand', value)}
+              className="data-[state=checked]:bg-purple-500"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400">Auto Expand</span>
+          </div>
+
+          <div className="w-px h-4 bg-gray-200 dark:bg-gray-700" />
+
+          <button
+            onClick={handleRefresh}
+            className={classNames(
+              'group flex items-center gap-2',
+              'rounded-lg px-3 py-1.5',
+              'text-sm text-gray-900 dark:text-white',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+              'transition-all duration-200',
+              { 'animate-spin': isRefreshing },
+            )}
+          >
+            <span className="i-ph:arrows-clockwise text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+            Refresh
+          </button>
+
+          <ExportButton />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search logs..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className={classNames(
+              'w-full px-4 py-2 pl-10 rounded-lg',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500',
+              'transition-all duration-200',
+            )}
+          />
+          <div className="absolute left-3 top-1/2 -translate-y-1/2">
+            <div className="i-ph:magnifying-glass text-lg text-gray-500 dark:text-gray-400" />
+          </div>
+        </div>
+
+        {filteredLogs.length === 0 ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={classNames(
+              'flex flex-col items-center justify-center gap-4',
+              'rounded-lg p-8 text-center',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            )}
+          >
+            <span className="i-ph:clipboard-text text-4xl text-gray-400 dark:text-gray-600" />
+            <div className="flex flex-col gap-1">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">No Logs Found</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Try adjusting your search or filters</p>
+            </div>
+          </motion.div>
+        ) : (
+          filteredLogs.map((log) => (
+            <LogEntryItem
+              key={log.id}
+              log={log}
+              isExpanded={autoExpand}
+              use24Hour={use24Hour}
+              showTimestamp={showTimestamps}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/features/FeaturesTab.tsx

@@ -0,0 +1,295 @@
+// Remove unused imports
+import React, { memo, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { Switch } from '~/components/ui/Switch';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'react-toastify';
+import { PromptLibrary } from '~/lib/common/prompt-library';
+
+interface FeatureToggle {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  enabled: boolean;
+  beta?: boolean;
+  experimental?: boolean;
+  tooltip?: string;
+}
+
+const FeatureCard = memo(
+  ({
+    feature,
+    index,
+    onToggle,
+  }: {
+    feature: FeatureToggle;
+    index: number;
+    onToggle: (id: string, enabled: boolean) => void;
+  }) => (
+    <motion.div
+      key={feature.id}
+      layoutId={feature.id}
+      className={classNames(
+        'relative group cursor-pointer',
+        'bg-bolt-elements-background-depth-2',
+        'hover:bg-bolt-elements-background-depth-3',
+        'transition-colors duration-200',
+        'rounded-lg overflow-hidden',
+      )}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+    >
+      <div className="p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={classNames(feature.icon, 'w-5 h-5 text-bolt-elements-textSecondary')} />
+            <div className="flex items-center gap-2">
+              <h4 className="font-medium text-bolt-elements-textPrimary">{feature.title}</h4>
+              {feature.beta && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium">Beta</span>
+              )}
+              {feature.experimental && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-orange-500/10 text-orange-500 font-medium">
+                  Experimental
+                </span>
+              )}
+            </div>
+          </div>
+          <Switch checked={feature.enabled} onCheckedChange={(checked) => onToggle(feature.id, checked)} />
+        </div>
+        <p className="mt-2 text-sm text-bolt-elements-textSecondary">{feature.description}</p>
+        {feature.tooltip && <p className="mt-1 text-xs text-bolt-elements-textTertiary">{feature.tooltip}</p>}
+      </div>
+    </motion.div>
+  ),
+);
+
+const FeatureSection = memo(
+  ({
+    title,
+    features,
+    icon,
+    description,
+    onToggleFeature,
+  }: {
+    title: string;
+    features: FeatureToggle[];
+    icon: string;
+    description: string;
+    onToggleFeature: (id: string, enabled: boolean) => void;
+  }) => (
+    <motion.div
+      layout
+      className="flex flex-col gap-4"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="flex items-center gap-3">
+        <div className={classNames(icon, 'text-xl text-purple-500')} />
+        <div>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">{title}</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">{description}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {features.map((feature, index) => (
+          <FeatureCard key={feature.id} feature={feature} index={index} onToggle={onToggleFeature} />
+        ))}
+      </div>
+    </motion.div>
+  ),
+);
+
+export default function FeaturesTab() {
+  const {
+    autoSelectTemplate,
+    isLatestBranch,
+    contextOptimizationEnabled,
+    eventLogs,
+    setAutoSelectTemplate,
+    enableLatestBranch,
+    enableContextOptimization,
+    setEventLogs,
+    setPromptId,
+    promptId,
+  } = useSettings();
+
+  // Enable features by default on first load
+  React.useEffect(() => {
+    // Only set defaults if values are undefined
+    if (isLatestBranch === undefined) {
+      enableLatestBranch(false); // Default: OFF - Don't auto-update from main branch
+    }
+
+    if (contextOptimizationEnabled === undefined) {
+      enableContextOptimization(true); // Default: ON - Enable context optimization
+    }
+
+    if (autoSelectTemplate === undefined) {
+      setAutoSelectTemplate(true); // Default: ON - Enable auto-select templates
+    }
+
+    if (promptId === undefined) {
+      setPromptId('default'); // Default: 'default'
+    }
+
+    if (eventLogs === undefined) {
+      setEventLogs(true); // Default: ON - Enable event logging
+    }
+  }, []); // Only run once on component mount
+
+  const handleToggleFeature = useCallback(
+    (id: string, enabled: boolean) => {
+      switch (id) {
+        case 'latestBranch': {
+          enableLatestBranch(enabled);
+          toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        case 'autoSelectTemplate': {
+          setAutoSelectTemplate(enabled);
+          toast.success(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        case 'contextOptimization': {
+          enableContextOptimization(enabled);
+          toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        case 'eventLogs': {
+          setEventLogs(enabled);
+          toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        default:
+          break;
+      }
+    },
+    [enableLatestBranch, setAutoSelectTemplate, enableContextOptimization, setEventLogs],
+  );
+
+  const features = {
+    stable: [
+      {
+        id: 'latestBranch',
+        title: 'Main Branch Updates',
+        description: 'Get the latest updates from the main branch',
+        icon: 'i-ph:git-branch',
+        enabled: isLatestBranch,
+        tooltip: 'Enabled by default to receive updates from the main development branch',
+      },
+      {
+        id: 'autoSelectTemplate',
+        title: 'Auto Select Template',
+        description: 'Automatically select starter template',
+        icon: 'i-ph:selection',
+        enabled: autoSelectTemplate,
+        tooltip: 'Enabled by default to automatically select the most appropriate starter template',
+      },
+      {
+        id: 'contextOptimization',
+        title: 'Context Optimization',
+        description: 'Optimize context for better responses',
+        icon: 'i-ph:brain',
+        enabled: contextOptimizationEnabled,
+        tooltip: 'Enabled by default for improved AI responses',
+      },
+      {
+        id: 'eventLogs',
+        title: 'Event Logging',
+        description: 'Enable detailed event logging and history',
+        icon: 'i-ph:list-bullets',
+        enabled: eventLogs,
+        tooltip: 'Enabled by default to record detailed logs of system events and user actions',
+      },
+    ],
+    beta: [],
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <FeatureSection
+        title="Core Features"
+        features={features.stable}
+        icon="i-ph:check-circle"
+        description="Essential features that are enabled by default for optimal performance"
+        onToggleFeature={handleToggleFeature}
+      />
+
+      {features.beta.length > 0 && (
+        <FeatureSection
+          title="Beta Features"
+          features={features.beta}
+          icon="i-ph:test-tube"
+          description="New features that are ready for testing but may have some rough edges"
+          onToggleFeature={handleToggleFeature}
+        />
+      )}
+
+      <motion.div
+        layout
+        className={classNames(
+          'bg-bolt-elements-background-depth-2',
+          'hover:bg-bolt-elements-background-depth-3',
+          'transition-all duration-200',
+          'rounded-lg p-4',
+          'group',
+        )}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        <div className="flex items-center gap-4">
+          <div
+            className={classNames(
+              'p-2 rounded-lg text-xl',
+              'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+              'transition-colors duration-200',
+              'text-purple-500',
+            )}
+          >
+            <div className="i-ph:book" />
+          </div>
+          <div className="flex-1">
+            <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+              Prompt Library
+            </h4>
+            <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+              Choose a prompt from the library to use as the system prompt
+            </p>
+          </div>
+          <select
+            value={promptId}
+            onChange={(e) => {
+              setPromptId(e.target.value);
+              toast.success('Prompt template updated');
+            }}
+            className={classNames(
+              'p-2 rounded-lg text-sm min-w-[200px]',
+              'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+              'text-bolt-elements-textPrimary',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+              'group-hover:border-purple-500/30',
+              'transition-all duration-200',
+            )}
+          >
+            {PromptLibrary.getList().map((x) => (
+              <option key={x.id} value={x.id}>
+                {x.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

app/components/@settings/tabs/notifications/NotificationsTab.tsx

@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { logStore } from '~/lib/stores/logs';
+import { useStore } from '@nanostores/react';
+import { formatDistanceToNow } from 'date-fns';
+import { classNames } from '~/utils/classNames';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+interface NotificationDetails {
+  type?: string;
+  message?: string;
+  currentVersion?: string;
+  latestVersion?: string;
+  branch?: string;
+  updateUrl?: string;
+}
+
+type FilterType = 'all' | 'system' | 'error' | 'warning' | 'update' | 'info' | 'provider' | 'network';
+
+const NotificationsTab = () => {
+  const [filter, setFilter] = useState<FilterType>('all');
+  const logs = useStore(logStore.logs);
+
+  useEffect(() => {
+    const startTime = performance.now();
+
+    return () => {
+      const duration = performance.now() - startTime;
+      logStore.logPerformanceMetric('NotificationsTab', 'mount-duration', duration);
+    };
+  }, []);
+
+  const handleClearNotifications = () => {
+    const count = Object.keys(logs).length;
+    logStore.logInfo('Cleared notifications', {
+      type: 'notification_clear',
+      message: `Cleared ${count} notifications`,
+      clearedCount: count,
+      component: 'notifications',
+    });
+    logStore.clearLogs();
+  };
+
+  const handleUpdateAction = (updateUrl: string) => {
+    logStore.logInfo('Update link clicked', {
+      type: 'update_click',
+      message: 'User clicked update link',
+      updateUrl,
+      component: 'notifications',
+    });
+    window.open(updateUrl, '_blank');
+  };
+
+  const handleFilterChange = (newFilter: FilterType) => {
+    logStore.logInfo('Notification filter changed', {
+      type: 'filter_change',
+      message: `Filter changed to ${newFilter}`,
+      previousFilter: filter,
+      newFilter,
+      component: 'notifications',
+    });
+    setFilter(newFilter);
+  };
+
+  const filteredLogs = Object.values(logs)
+    .filter((log) => {
+      if (filter === 'all') {
+        return true;
+      }
+
+      if (filter === 'update') {
+        return log.details?.type === 'update';
+      }
+
+      if (filter === 'system') {
+        return log.category === 'system';
+      }
+
+      if (filter === 'provider') {
+        return log.category === 'provider';
+      }
+
+      if (filter === 'network') {
+        return log.category === 'network';
+      }
+
+      return log.level === filter;
+    })
+    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+
+  const getNotificationStyle = (level: string, type?: string) => {
+    if (type === 'update') {
+      return {
+        icon: 'i-ph:arrow-circle-up',
+        color: 'text-purple-500 dark:text-purple-400',
+        bg: 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+      };
+    }
+
+    switch (level) {
+      case 'error':
+        return {
+          icon: 'i-ph:warning-circle',
+          color: 'text-red-500 dark:text-red-400',
+          bg: 'hover:bg-red-500/10 dark:hover:bg-red-500/20',
+        };
+      case 'warning':
+        return {
+          icon: 'i-ph:warning',
+          color: 'text-yellow-500 dark:text-yellow-400',
+          bg: 'hover:bg-yellow-500/10 dark:hover:bg-yellow-500/20',
+        };
+      case 'info':
+        return {
+          icon: 'i-ph:info',
+          color: 'text-blue-500 dark:text-blue-400',
+          bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+        };
+      default:
+        return {
+          icon: 'i-ph:bell',
+          color: 'text-gray-500 dark:text-gray-400',
+          bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
+        };
+    }
+  };
+
+  const renderNotificationDetails = (details: NotificationDetails) => {
+    if (details.type === 'update') {
+      return (
+        <div className="flex flex-col gap-2">
+          <p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p>
+          <div className="flex flex-col gap-1 text-xs text-gray-500 dark:text-gray-500">
+            <p>Current Version: {details.currentVersion}</p>
+            <p>Latest Version: {details.latestVersion}</p>
+            <p>Branch: {details.branch}</p>
+          </div>
+          <button
+            onClick={() => details.updateUrl && handleUpdateAction(details.updateUrl)}
+            className={classNames(
+              'mt-2 inline-flex items-center gap-2',
+              'rounded-lg px-3 py-1.5',
+              'text-sm font-medium',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'text-gray-900 dark:text-white',
+              'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+              'transition-all duration-200',
+            )}
+          >
+            <span className="i-ph:git-branch text-lg" />
+            View Changes
+          </button>
+        </div>
+      );
+    }
+
+    return details.message ? <p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p> : null;
+  };
+
+  const filterOptions: { id: FilterType; label: string; icon: string; color: string }[] = [
+    { id: 'all', label: 'All Notifications', icon: 'i-ph:bell', color: '#9333ea' },
+    { id: 'system', label: 'System', icon: 'i-ph:gear', color: '#6b7280' },
+    { id: 'update', label: 'Updates', icon: 'i-ph:arrow-circle-up', color: '#9333ea' },
+    { id: 'error', label: 'Errors', icon: 'i-ph:warning-circle', color: '#ef4444' },
+    { id: 'warning', label: 'Warnings', icon: 'i-ph:warning', color: '#f59e0b' },
+    { id: 'info', label: 'Information', icon: 'i-ph:info', color: '#3b82f6' },
+    { id: 'provider', label: 'Providers', icon: 'i-ph:robot', color: '#10b981' },
+    { id: 'network', label: 'Network', icon: 'i-ph:wifi-high', color: '#6366f1' },
+  ];
+
+  return (
+    <div className="flex h-full flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <button
+              className={classNames(
+                'flex items-center gap-2',
+                'rounded-lg px-3 py-1.5',
+                'text-sm text-gray-900 dark:text-white',
+                'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+                'transition-all duration-200',
+              )}
+            >
+              <span
+                className={classNames('text-lg', filterOptions.find((opt) => opt.id === filter)?.icon || 'i-ph:funnel')}
+                style={{ color: filterOptions.find((opt) => opt.id === filter)?.color }}
+              />
+              {filterOptions.find((opt) => opt.id === filter)?.label || 'Filter Notifications'}
+              <span className="i-ph:caret-down text-lg text-gray-500 dark:text-gray-400" />
+            </button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              className="min-w-[200px] bg-white dark:bg-[#0A0A0A] rounded-lg shadow-lg py-1 z-[250] animate-in fade-in-0 zoom-in-95 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+              sideOffset={5}
+              align="start"
+              side="bottom"
+            >
+              {filterOptions.map((option) => (
+                <DropdownMenu.Item
+                  key={option.id}
+                  className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
+                  onClick={() => handleFilterChange(option.id)}
+                >
+                  <div className="mr-3 flex h-5 w-5 items-center justify-center">
+                    <div
+                      className={classNames(option.icon, 'text-lg group-hover:text-purple-500 transition-colors')}
+                      style={{ color: option.color }}
+                    />
+                  </div>
+                  <span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+
+        <button
+          onClick={handleClearNotifications}
+          className={classNames(
+            'group flex items-center gap-2',
+            'rounded-lg px-3 py-1.5',
+            'text-sm text-gray-900 dark:text-white',
+            'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+            'transition-all duration-200',
+          )}
+        >
+          <span className="i-ph:trash text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+          Clear All
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        {filteredLogs.length === 0 ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={classNames(
+              'flex flex-col items-center justify-center gap-4',
+              'rounded-lg p-8 text-center',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            )}
+          >
+            <span className="i-ph:bell-slash text-4xl text-gray-400 dark:text-gray-600" />
+            <div className="flex flex-col gap-1">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">No Notifications</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">You're all caught up!</p>
+            </div>
+          </motion.div>
+        ) : (
+          filteredLogs.map((log) => {
+            const style = getNotificationStyle(log.level, log.details?.type);
+            return (
+              <motion.div
+                key={log.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className={classNames(
+                  'flex flex-col gap-2',
+                  'rounded-lg p-4',
+                  'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                  'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                  style.bg,
+                  'transition-all duration-200',
+                )}
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex items-start gap-3">
+                    <span className={classNames('text-lg', style.icon, style.color)} />
+                    <div className="flex flex-col gap-1">
+                      <h3 className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</h3>
+                      {log.details && renderNotificationDetails(log.details as NotificationDetails)}
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        Category: {log.category}
+                        {log.subCategory ? ` > ${log.subCategory}` : ''}
+                      </p>
+                    </div>
+                  </div>
+                  <time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">
+                    {formatDistanceToNow(new Date(log.timestamp), { addSuffix: true })}
+                  </time>
+                </div>
+              </motion.div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationsTab;

app/components/@settings/tabs/profile/ProfileTab.tsx

@@ -0,0 +1,181 @@
+import { useState, useCallback } from 'react';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import { profileStore, updateProfile } from '~/lib/stores/profile';
+import { toast } from 'react-toastify';
+import { debounce } from '~/utils/debounce';
+
+export default function ProfileTab() {
+  const profile = useStore(profileStore);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // Create debounced update functions
+  const debouncedUpdate = useCallback(
+    debounce((field: 'username' | 'bio', value: string) => {
+      updateProfile({ [field]: value });
+      toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
+    }, 1000),
+    [],
+  );
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+
+      // Convert the file to base64
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        const base64String = reader.result as string;
+        updateProfile({ avatar: base64String });
+        setIsUploading(false);
+        toast.success('Profile picture updated');
+      };
+
+      reader.onerror = () => {
+        console.error('Error reading file:', reader.error);
+        setIsUploading(false);
+        toast.error('Failed to update profile picture');
+      };
+      reader.readAsDataURL(file);
+    } catch (error) {
+      console.error('Error uploading avatar:', error);
+      setIsUploading(false);
+      toast.error('Failed to update profile picture');
+    }
+  };
+
+  const handleProfileUpdate = (field: 'username' | 'bio', value: string) => {
+    // Update the store immediately for UI responsiveness
+    updateProfile({ [field]: value });
+
+    // Debounce the toast notification
+    debouncedUpdate(field, value);
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="space-y-6">
+        {/* Personal Information Section */}
+        <div>
+          {/* Avatar Upload */}
+          <div className="flex items-start gap-6 mb-8">
+            <div
+              className={classNames(
+                'w-24 h-24 rounded-full overflow-hidden',
+                'bg-gray-100 dark:bg-gray-800/50',
+                'flex items-center justify-center',
+                'ring-1 ring-gray-200 dark:ring-gray-700',
+                'relative group',
+                'transition-all duration-300 ease-out',
+                'hover:ring-purple-500/30 dark:hover:ring-purple-500/30',
+                'hover:shadow-lg hover:shadow-purple-500/10',
+              )}
+            >
+              {profile.avatar ? (
+                <img
+                  src={profile.avatar}
+                  alt="Profile"
+                  className={classNames(
+                    'w-full h-full object-cover',
+                    'transition-all duration-300 ease-out',
+                    'group-hover:scale-105 group-hover:brightness-90',
+                  )}
+                />
+              ) : (
+                <div className="i-ph:robot-fill w-16 h-16 text-gray-400 dark:text-gray-500 transition-colors group-hover:text-purple-500/70 transform -translate-y-1" />
+              )}
+
+              <label
+                className={classNames(
+                  'absolute inset-0',
+                  'flex items-center justify-center',
+                  'bg-black/0 group-hover:bg-black/40',
+                  'cursor-pointer transition-all duration-300 ease-out',
+                  isUploading ? 'cursor-wait' : '',
+                )}
+              >
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleAvatarUpload}
+                  disabled={isUploading}
+                />
+                {isUploading ? (
+                  <div className="i-ph:spinner-gap w-6 h-6 text-white animate-spin" />
+                ) : (
+                  <div className="i-ph:camera-plus w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out transform group-hover:scale-110" />
+                )}
+              </label>
+            </div>
+
+            <div className="flex-1 pt-1">
+              <label className="block text-base font-medium text-gray-900 dark:text-gray-100 mb-1">
+                Profile Picture
+              </label>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Upload a profile picture or avatar</p>
+            </div>
+          </div>
+
+          {/* Username Input */}
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Username</label>
+            <div className="relative group">
+              <div className="absolute left-3.5 top-1/2 -translate-y-1/2">
+                <div className="i-ph:user-circle-fill w-5 h-5 text-gray-400 dark:text-gray-500 transition-colors group-focus-within:text-purple-500" />
+              </div>
+              <input
+                type="text"
+                value={profile.username}
+                onChange={(e) => handleProfileUpdate('username', e.target.value)}
+                className={classNames(
+                  'w-full pl-11 pr-4 py-2.5 rounded-xl',
+                  'bg-white dark:bg-gray-800/50',
+                  'border border-gray-200 dark:border-gray-700/50',
+                  'text-gray-900 dark:text-white',
+                  'placeholder-gray-400 dark:placeholder-gray-500',
+                  'focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50',
+                  'transition-all duration-300 ease-out',
+                )}
+                placeholder="Enter your username"
+              />
+            </div>
+          </div>
+
+          {/* Bio Input */}
+          <div className="mb-8">
+            <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Bio</label>
+            <div className="relative group">
+              <div className="absolute left-3.5 top-3">
+                <div className="i-ph:text-aa w-5 h-5 text-gray-400 dark:text-gray-500 transition-colors group-focus-within:text-purple-500" />
+              </div>
+              <textarea
+                value={profile.bio}
+                onChange={(e) => handleProfileUpdate('bio', e.target.value)}
+                className={classNames(
+                  'w-full pl-11 pr-4 py-2.5 rounded-xl',
+                  'bg-white dark:bg-gray-800/50',
+                  'border border-gray-200 dark:border-gray-700/50',
+                  'text-gray-900 dark:text-white',
+                  'placeholder-gray-400 dark:placeholder-gray-500',
+                  'focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50',
+                  'transition-all duration-300 ease-out',
+                  'resize-none',
+                  'h-32',
+                )}
+                placeholder="Tell us about yourself"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/providers/cloud/CloudProvidersTab.tsx

@@ -0,0 +1,305 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Switch } from '~/components/ui/Switch';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
+import type { IProviderConfig } from '~/types/model';
+import { logStore } from '~/lib/stores/logs';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'react-toastify';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
+import { BsRobot, BsCloud } from 'react-icons/bs';
+import { TbBrain, TbCloudComputing } from 'react-icons/tb';
+import { BiCodeBlock, BiChip } from 'react-icons/bi';
+import { FaCloud, FaBrain } from 'react-icons/fa';
+import type { IconType } from 'react-icons';
+
+// Add type for provider names to ensure type safety
+type ProviderName =
+  | 'AmazonBedrock'
+  | 'Anthropic'
+  | 'Cohere'
+  | 'Deepseek'
+  | 'Google'
+  | 'Groq'
+  | 'HuggingFace'
+  | 'Hyperbolic'
+  | 'Mistral'
+  | 'OpenAI'
+  | 'OpenRouter'
+  | 'Perplexity'
+  | 'Together'
+  | 'XAI';
+
+// Update the PROVIDER_ICONS type to use the ProviderName type
+const PROVIDER_ICONS: Record<ProviderName, IconType> = {
+  AmazonBedrock: SiAmazon,
+  Anthropic: FaBrain,
+  Cohere: BiChip,
+  Deepseek: BiCodeBlock,
+  Google: SiGoogle,
+  Groq: BsCloud,
+  HuggingFace: SiHuggingface,
+  Hyperbolic: TbCloudComputing,
+  Mistral: TbBrain,
+  OpenAI: SiOpenai,
+  OpenRouter: FaCloud,
+  Perplexity: SiPerplexity,
+  Together: BsCloud,
+  XAI: BsRobot,
+};
+
+// Update PROVIDER_DESCRIPTIONS to use the same type
+const PROVIDER_DESCRIPTIONS: Partial<Record<ProviderName, string>> = {
+  Anthropic: 'Access Claude and other Anthropic models',
+  OpenAI: 'Use GPT-4, GPT-3.5, and other OpenAI models',
+};
+
+const CloudProvidersTab = () => {
+  const settings = useSettings();
+  const [editingProvider, setEditingProvider] = useState<string | null>(null);
+  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
+  const [categoryEnabled, setCategoryEnabled] = useState<boolean>(false);
+
+  // Load and filter providers
+  useEffect(() => {
+    const newFilteredProviders = Object.entries(settings.providers || {})
+      .filter(([key]) => !['Ollama', 'LMStudio', 'OpenAILike'].includes(key))
+      .map(([key, value]) => ({
+        name: key,
+        settings: value.settings,
+        staticModels: value.staticModels || [],
+        getDynamicModels: value.getDynamicModels,
+        getApiKeyLink: value.getApiKeyLink,
+        labelForGetApiKey: value.labelForGetApiKey,
+        icon: value.icon,
+      }));
+
+    const sorted = newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
+    setFilteredProviders(sorted);
+
+    // Update category enabled state
+    const allEnabled = newFilteredProviders.every((p) => p.settings.enabled);
+    setCategoryEnabled(allEnabled);
+  }, [settings.providers]);
+
+  const handleToggleCategory = useCallback(
+    (enabled: boolean) => {
+      // Update all providers
+      filteredProviders.forEach((provider) => {
+        settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
+      });
+
+      setCategoryEnabled(enabled);
+      toast.success(enabled ? 'All cloud providers enabled' : 'All cloud providers disabled');
+    },
+    [filteredProviders, settings],
+  );
+
+  const handleToggleProvider = useCallback(
+    (provider: IProviderConfig, enabled: boolean) => {
+      // Update the provider settings in the store
+      settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
+
+      if (enabled) {
+        logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+        toast.success(`${provider.name} enabled`);
+      } else {
+        logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+        toast.success(`${provider.name} disabled`);
+      }
+    },
+    [settings],
+  );
+
+  const handleUpdateBaseUrl = useCallback(
+    (provider: IProviderConfig, baseUrl: string) => {
+      const newBaseUrl: string | undefined = baseUrl.trim() || undefined;
+
+      // Update the provider settings in the store
+      settings.updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
+
+      logStore.logProvider(`Base URL updated for ${provider.name}`, {
+        provider: provider.name,
+        baseUrl: newBaseUrl,
+      });
+      toast.success(`${provider.name} base URL updated`);
+      setEditingProvider(null);
+    },
+    [settings],
+  );
+
+  return (
+    <div className="space-y-6">
+      <motion.div
+        className="space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="flex items-center justify-between gap-4 mt-8 mb-4">
+          <div className="flex items-center gap-2">
+            <div
+              className={classNames(
+                'w-8 h-8 flex items-center justify-center rounded-lg',
+                'bg-bolt-elements-background-depth-3',
+                'text-purple-500',
+              )}
+            >
+              <TbCloudComputing className="w-5 h-5" />
+            </div>
+            <div>
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary">Cloud Providers</h4>
+              <p className="text-sm text-bolt-elements-textSecondary">Connect to cloud-based AI models and services</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-bolt-elements-textSecondary">Enable All Cloud</span>
+            <Switch checked={categoryEnabled} onCheckedChange={handleToggleCategory} />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {filteredProviders.map((provider, index) => (
+            <motion.div
+              key={provider.name}
+              className={classNames(
+                'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm',
+                'bg-bolt-elements-background-depth-2',
+                'hover:bg-bolt-elements-background-depth-3',
+                'transition-all duration-200',
+                'relative overflow-hidden group',
+                'flex flex-col',
+              )}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              whileHover={{ scale: 1.02 }}
+            >
+              <div className="absolute top-0 right-0 p-2 flex gap-1">
+                {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                  <motion.span
+                    className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium"
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    Configurable
+                  </motion.span>
+                )}
+              </div>
+
+              <div className="flex items-start gap-4 p-4">
+                <motion.div
+                  className={classNames(
+                    'w-10 h-10 flex items-center justify-center rounded-xl',
+                    'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                    'transition-all duration-200',
+                    provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                  )}
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  <div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
+                    {React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
+                      className: 'w-full h-full',
+                      'aria-label': `${provider.name} logo`,
+                    })}
+                  </div>
+                </motion.div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-4 mb-2">
+                    <div>
+                      <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                        {provider.name}
+                      </h4>
+                      <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                        {PROVIDER_DESCRIPTIONS[provider.name as keyof typeof PROVIDER_DESCRIPTIONS] ||
+                          (URL_CONFIGURABLE_PROVIDERS.includes(provider.name)
+                            ? 'Configure custom endpoint for this provider'
+                            : 'Standard AI provider integration')}
+                      </p>
+                    </div>
+                    <Switch
+                      checked={provider.settings.enabled}
+                      onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
+                    />
+                  </div>
+
+                  {provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: 'auto' }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <div className="flex items-center gap-2 mt-4">
+                        {editingProvider === provider.name ? (
+                          <input
+                            type="text"
+                            defaultValue={provider.settings.baseUrl}
+                            placeholder={`Enter ${provider.name} base URL`}
+                            className={classNames(
+                              'flex-1 px-3 py-1.5 rounded-lg text-sm',
+                              'bg-bolt-elements-background-depth-3 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',
+                            )}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                handleUpdateBaseUrl(provider, e.currentTarget.value);
+                              } else if (e.key === 'Escape') {
+                                setEditingProvider(null);
+                              }
+                            }}
+                            onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                            autoFocus
+                          />
+                        ) : (
+                          <div
+                            className="flex-1 px-3 py-1.5 rounded-lg text-sm cursor-pointer group/url"
+                            onClick={() => setEditingProvider(provider.name)}
+                          >
+                            <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                              <div className="i-ph:link text-sm" />
+                              <span className="group-hover/url:text-purple-500 transition-colors">
+                                {provider.settings.baseUrl || 'Click to set base URL'}
+                              </span>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+
+                      {providerBaseUrlEnvKeys[provider.name]?.baseUrlKey && (
+                        <div className="mt-2 text-xs text-green-500">
+                          <div className="flex items-center gap-1">
+                            <div className="i-ph:info" />
+                            <span>Environment URL set in .env file</span>
+                          </div>
+                        </div>
+                      )}
+                    </motion.div>
+                  )}
+                </div>
+              </div>
+
+              <motion.div
+                className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                animate={{
+                  borderColor: provider.settings.enabled ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                  scale: provider.settings.enabled ? 1 : 0.98,
+                }}
+                transition={{ duration: 0.2 }}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default CloudProvidersTab;

app/components/@settings/tabs/providers/local/LocalProvidersTab.tsx

@@ -0,0 +1,777 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Switch } from '~/components/ui/Switch';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
+import type { IProviderConfig } from '~/types/model';
+import { logStore } from '~/lib/stores/logs';
+import { motion, AnimatePresence } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { BsRobot } from 'react-icons/bs';
+import type { IconType } from 'react-icons';
+import { BiChip } from 'react-icons/bi';
+import { TbBrandOpenai } from 'react-icons/tb';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+import { useToast } from '~/components/ui/use-toast';
+import { Progress } from '~/components/ui/Progress';
+import OllamaModelInstaller from './OllamaModelInstaller';
+
+// Add type for provider names to ensure type safety
+type ProviderName = 'Ollama' | 'LMStudio' | 'OpenAILike';
+
+// Update the PROVIDER_ICONS type to use the ProviderName type
+const PROVIDER_ICONS: Record<ProviderName, IconType> = {
+  Ollama: BsRobot,
+  LMStudio: BsRobot,
+  OpenAILike: TbBrandOpenai,
+};
+
+// Update PROVIDER_DESCRIPTIONS to use the same type
+const PROVIDER_DESCRIPTIONS: Record<ProviderName, string> = {
+  Ollama: 'Run open-source models locally on your machine',
+  LMStudio: 'Local model inference with LM Studio',
+  OpenAILike: 'Connect to OpenAI-compatible API endpoints',
+};
+
+// Add a constant for the Ollama API base URL
+const OLLAMA_API_URL = 'http://127.0.0.1:11434';
+
+interface OllamaModel {
+  name: string;
+  digest: string;
+  size: number;
+  modified_at: string;
+  details?: {
+    family: string;
+    parameter_size: string;
+    quantization_level: string;
+  };
+  status?: 'idle' | 'updating' | 'updated' | 'error' | 'checking';
+  error?: string;
+  newDigest?: string;
+  progress?: {
+    current: number;
+    total: number;
+    status: string;
+  };
+}
+
+interface OllamaPullResponse {
+  status: string;
+  completed?: number;
+  total?: number;
+  digest?: string;
+}
+
+const isOllamaPullResponse = (data: unknown): data is OllamaPullResponse => {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'status' in data &&
+    typeof (data as OllamaPullResponse).status === 'string'
+  );
+};
+
+export default function LocalProvidersTab() {
+  const { providers, updateProviderSettings } = useSettings();
+  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
+  const [categoryEnabled, setCategoryEnabled] = useState(false);
+  const [ollamaModels, setOllamaModels] = useState<OllamaModel[]>([]);
+  const [isLoadingModels, setIsLoadingModels] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  // Effect to filter and sort providers
+  useEffect(() => {
+    const newFilteredProviders = Object.entries(providers || {})
+      .filter(([key]) => [...LOCAL_PROVIDERS, 'OpenAILike'].includes(key))
+      .map(([key, value]) => {
+        const provider = value as IProviderConfig;
+        const envKey = providerBaseUrlEnvKeys[key]?.baseUrlKey;
+        const envUrl = envKey ? (import.meta.env[envKey] as string | undefined) : undefined;
+
+        // Set base URL if provided by environment
+        if (envUrl && !provider.settings.baseUrl) {
+          updateProviderSettings(key, {
+            ...provider.settings,
+            baseUrl: envUrl,
+          });
+        }
+
+        return {
+          name: key,
+          settings: {
+            ...provider.settings,
+            baseUrl: provider.settings.baseUrl || envUrl,
+          },
+          staticModels: provider.staticModels || [],
+          getDynamicModels: provider.getDynamicModels,
+          getApiKeyLink: provider.getApiKeyLink,
+          labelForGetApiKey: provider.labelForGetApiKey,
+          icon: provider.icon,
+        } as IProviderConfig;
+      });
+
+    // Custom sort function to ensure LMStudio appears before OpenAILike
+    const sorted = newFilteredProviders.sort((a, b) => {
+      if (a.name === 'LMStudio') {
+        return -1;
+      }
+
+      if (b.name === 'LMStudio') {
+        return 1;
+      }
+
+      if (a.name === 'OpenAILike') {
+        return 1;
+      }
+
+      if (b.name === 'OpenAILike') {
+        return -1;
+      }
+
+      return a.name.localeCompare(b.name);
+    });
+    setFilteredProviders(sorted);
+  }, [providers, updateProviderSettings]);
+
+  // Add effect to update category toggle state based on provider states
+  useEffect(() => {
+    const newCategoryState = filteredProviders.every((p) => p.settings.enabled);
+    setCategoryEnabled(newCategoryState);
+  }, [filteredProviders]);
+
+  // Fetch Ollama models when enabled
+  useEffect(() => {
+    const ollamaProvider = filteredProviders.find((p) => p.name === 'Ollama');
+
+    if (ollamaProvider?.settings.enabled) {
+      fetchOllamaModels();
+    }
+  }, [filteredProviders]);
+
+  const fetchOllamaModels = async () => {
+    try {
+      setIsLoadingModels(true);
+
+      const response = await fetch('http://127.0.0.1:11434/api/tags');
+      const data = (await response.json()) as { models: OllamaModel[] };
+
+      setOllamaModels(
+        data.models.map((model) => ({
+          ...model,
+          status: 'idle' as const,
+        })),
+      );
+    } catch (error) {
+      console.error('Error fetching Ollama models:', error);
+    } finally {
+      setIsLoadingModels(false);
+    }
+  };
+
+  const updateOllamaModel = async (modelName: string): Promise<boolean> => {
+    try {
+      const response = await fetch(`${OLLAMA_API_URL}/api/pull`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: modelName }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to update ${modelName}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('No response reader available');
+      }
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const text = new TextDecoder().decode(value);
+        const lines = text.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          const rawData = JSON.parse(line);
+
+          if (!isOllamaPullResponse(rawData)) {
+            console.error('Invalid response format:', rawData);
+            continue;
+          }
+
+          setOllamaModels((current) =>
+            current.map((m) =>
+              m.name === modelName
+                ? {
+                    ...m,
+                    progress: {
+                      current: rawData.completed || 0,
+                      total: rawData.total || 0,
+                      status: rawData.status,
+                    },
+                    newDigest: rawData.digest,
+                  }
+                : m,
+            ),
+          );
+        }
+      }
+
+      const updatedResponse = await fetch('http://127.0.0.1:11434/api/tags');
+      const updatedData = (await updatedResponse.json()) as { models: OllamaModel[] };
+      const updatedModel = updatedData.models.find((m) => m.name === modelName);
+
+      return updatedModel !== undefined;
+    } catch (error) {
+      console.error(`Error updating ${modelName}:`, error);
+      return false;
+    }
+  };
+
+  const handleToggleCategory = useCallback(
+    async (enabled: boolean) => {
+      filteredProviders.forEach((provider) => {
+        updateProviderSettings(provider.name, { ...provider.settings, enabled });
+      });
+      toast(enabled ? 'All local providers enabled' : 'All local providers disabled');
+    },
+    [filteredProviders, updateProviderSettings],
+  );
+
+  const handleToggleProvider = (provider: IProviderConfig, enabled: boolean) => {
+    updateProviderSettings(provider.name, {
+      ...provider.settings,
+      enabled,
+    });
+
+    if (enabled) {
+      logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+      toast(`${provider.name} enabled`);
+    } else {
+      logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+      toast(`${provider.name} disabled`);
+    }
+  };
+
+  const handleUpdateBaseUrl = (provider: IProviderConfig, newBaseUrl: string) => {
+    updateProviderSettings(provider.name, {
+      ...provider.settings,
+      baseUrl: newBaseUrl,
+    });
+    toast(`${provider.name} base URL updated`);
+    setEditingProvider(null);
+  };
+
+  const handleUpdateOllamaModel = async (modelName: string) => {
+    const updateSuccess = await updateOllamaModel(modelName);
+
+    if (updateSuccess) {
+      toast(`Updated ${modelName}`);
+    } else {
+      toast(`Failed to update ${modelName}`);
+    }
+  };
+
+  const handleDeleteOllamaModel = async (modelName: string) => {
+    try {
+      const response = await fetch(`${OLLAMA_API_URL}/api/delete`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: modelName }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to delete ${modelName}`);
+      }
+
+      setOllamaModels((current) => current.filter((m) => m.name !== modelName));
+      toast(`Deleted ${modelName}`);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error deleting ${modelName}:`, errorMessage);
+      toast(`Failed to delete ${modelName}`);
+    }
+  };
+
+  // Update model details display
+  const ModelDetails = ({ model }: { model: OllamaModel }) => (
+    <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+      <div className="flex items-center gap-1">
+        <div className="i-ph:code text-purple-500" />
+        <span>{model.digest.substring(0, 7)}</span>
+      </div>
+      {model.details && (
+        <>
+          <div className="flex items-center gap-1">
+            <div className="i-ph:database text-purple-500" />
+            <span>{model.details.parameter_size}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="i-ph:cube text-purple-500" />
+            <span>{model.details.quantization_level}</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  // Update model actions to not use Tooltip
+  const ModelActions = ({
+    model,
+    onUpdate,
+    onDelete,
+  }: {
+    model: OllamaModel;
+    onUpdate: () => void;
+    onDelete: () => void;
+  }) => (
+    <div className="flex items-center gap-2">
+      <motion.button
+        onClick={onUpdate}
+        disabled={model.status === 'updating'}
+        className={classNames(
+          'rounded-lg p-2',
+          'bg-purple-500/10 text-purple-500',
+          'hover:bg-purple-500/20',
+          'transition-all duration-200',
+          { 'opacity-50 cursor-not-allowed': model.status === 'updating' },
+        )}
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        title="Update model"
+      >
+        {model.status === 'updating' ? (
+          <div className="flex items-center gap-2">
+            <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            <span className="text-sm">Updating...</span>
+          </div>
+        ) : (
+          <div className="i-ph:arrows-clockwise text-lg" />
+        )}
+      </motion.button>
+      <motion.button
+        onClick={onDelete}
+        disabled={model.status === 'updating'}
+        className={classNames(
+          'rounded-lg p-2',
+          'bg-red-500/10 text-red-500',
+          'hover:bg-red-500/20',
+          'transition-all duration-200',
+          { 'opacity-50 cursor-not-allowed': model.status === 'updating' },
+        )}
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        title="Delete model"
+      >
+        <div className="i-ph:trash text-lg" />
+      </motion.button>
+    </div>
+  );
+
+  return (
+    <div
+      className={classNames(
+        'rounded-lg bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm p-4',
+        'hover:bg-bolt-elements-background-depth-2',
+        'transition-all duration-200',
+      )}
+      role="region"
+      aria-label="Local Providers Configuration"
+    >
+      <motion.div
+        className="space-y-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {/* Header section */}
+        <div className="flex items-center justify-between gap-4 border-b border-bolt-elements-borderColor pb-4">
+          <div className="flex items-center gap-3">
+            <motion.div
+              className={classNames(
+                'w-10 h-10 flex items-center justify-center rounded-xl',
+                'bg-purple-500/10 text-purple-500',
+              )}
+              whileHover={{ scale: 1.05 }}
+            >
+              <BiChip className="w-6 h-6" />
+            </motion.div>
+            <div>
+              <div className="flex items-center gap-2">
+                <h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Local AI Models</h2>
+              </div>
+              <p className="text-sm text-bolt-elements-textSecondary">Configure and manage your local AI providers</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-bolt-elements-textSecondary">Enable All</span>
+            <Switch
+              checked={categoryEnabled}
+              onCheckedChange={handleToggleCategory}
+              aria-label="Toggle all local providers"
+            />
+          </div>
+        </div>
+
+        {/* Ollama Section */}
+        {filteredProviders
+          .filter((provider) => provider.name === 'Ollama')
+          .map((provider) => (
+            <motion.div
+              key={provider.name}
+              className={classNames(
+                'bg-bolt-elements-background-depth-2 rounded-xl',
+                'hover:bg-bolt-elements-background-depth-3',
+                'transition-all duration-200 p-5',
+                'relative overflow-hidden group',
+              )}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              whileHover={{ scale: 1.01 }}
+            >
+              {/* Provider Header */}
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex items-start gap-4">
+                  <motion.div
+                    className={classNames(
+                      'w-12 h-12 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3',
+                      provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1, rotate: 5 }}
+                  >
+                    {React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
+                      className: 'w-7 h-7',
+                      'aria-label': `${provider.name} icon`,
+                    })}
+                  </motion.div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
+                      <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">Local</span>
+                    </div>
+                    <p className="text-sm text-bolt-elements-textSecondary mt-1">
+                      {PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
+                    </p>
+                  </div>
+                </div>
+                <Switch
+                  checked={provider.settings.enabled}
+                  onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
+                  aria-label={`Toggle ${provider.name} provider`}
+                />
+              </div>
+
+              {/* URL Configuration Section */}
+              <AnimatePresence>
+                {provider.settings.enabled && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="mt-4"
+                  >
+                    <div className="flex flex-col gap-2">
+                      <label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
+                      {editingProvider === provider.name ? (
+                        <input
+                          type="text"
+                          defaultValue={provider.settings.baseUrl || OLLAMA_API_URL}
+                          placeholder="Enter Ollama base URL"
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm',
+                            'bg-bolt-elements-background-depth-3 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',
+                          )}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              handleUpdateBaseUrl(provider, e.currentTarget.value);
+                            } else if (e.key === 'Escape') {
+                              setEditingProvider(null);
+                            }
+                          }}
+                          onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                          autoFocus
+                        />
+                      ) : (
+                        <div
+                          onClick={() => setEditingProvider(provider.name)}
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
+                            'transition-all duration-200',
+                          )}
+                        >
+                          <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                            <div className="i-ph:link text-sm" />
+                            <span>{provider.settings.baseUrl || OLLAMA_API_URL}</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Ollama Models Section */}
+              {provider.settings.enabled && (
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mt-6 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="i-ph:cube-duotone text-purple-500" />
+                      <h4 className="text-sm font-medium text-bolt-elements-textPrimary">Installed Models</h4>
+                    </div>
+                    {isLoadingModels ? (
+                      <div className="flex items-center gap-2">
+                        <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                        <span className="text-sm text-bolt-elements-textSecondary">Loading models...</span>
+                      </div>
+                    ) : (
+                      <span className="text-sm text-bolt-elements-textSecondary">
+                        {ollamaModels.length} models available
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="space-y-3">
+                    {isLoadingModels ? (
+                      <div className="space-y-3">
+                        {Array.from({ length: 3 }).map((_, i) => (
+                          <div
+                            key={i}
+                            className="h-20 w-full bg-bolt-elements-background-depth-3 rounded-lg animate-pulse"
+                          />
+                        ))}
+                      </div>
+                    ) : ollamaModels.length === 0 ? (
+                      <div className="text-center py-8 text-bolt-elements-textSecondary">
+                        <div className="i-ph:cube-transparent text-4xl mx-auto mb-2" />
+                        <p>No models installed yet</p>
+                        <p className="text-sm text-bolt-elements-textTertiary px-1">
+                          Browse models at{' '}
+                          <a
+                            href="https://ollama.com/library"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline inline-flex items-center gap-0.5 text-base font-medium"
+                          >
+                            ollama.com/library
+                            <div className="i-ph:arrow-square-out text-xs" />
+                          </a>{' '}
+                          and copy model names to install
+                        </p>
+                      </div>
+                    ) : (
+                      ollamaModels.map((model) => (
+                        <motion.div
+                          key={model.name}
+                          className={classNames(
+                            'p-4 rounded-xl',
+                            'bg-bolt-elements-background-depth-3',
+                            'hover:bg-bolt-elements-background-depth-4',
+                            'transition-all duration-200',
+                          )}
+                          whileHover={{ scale: 1.01 }}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="space-y-2">
+                              <div className="flex items-center gap-2">
+                                <h5 className="text-sm font-medium text-bolt-elements-textPrimary">{model.name}</h5>
+                                <ModelStatusBadge status={model.status} />
+                              </div>
+                              <ModelDetails model={model} />
+                            </div>
+                            <ModelActions
+                              model={model}
+                              onUpdate={() => handleUpdateOllamaModel(model.name)}
+                              onDelete={() => {
+                                if (window.confirm(`Are you sure you want to delete ${model.name}?`)) {
+                                  handleDeleteOllamaModel(model.name);
+                                }
+                              }}
+                            />
+                          </div>
+                          {model.progress && (
+                            <div className="mt-3">
+                              <Progress
+                                value={Math.round((model.progress.current / model.progress.total) * 100)}
+                                className="h-1"
+                              />
+                              <div className="flex justify-between mt-1 text-xs text-bolt-elements-textSecondary">
+                                <span>{model.progress.status}</span>
+                                <span>{Math.round((model.progress.current / model.progress.total) * 100)}%</span>
+                              </div>
+                            </div>
+                          )}
+                        </motion.div>
+                      ))
+                    )}
+                  </div>
+
+                  {/* Model Installation Section */}
+                  <OllamaModelInstaller onModelInstalled={fetchOllamaModels} />
+                </motion.div>
+              )}
+            </motion.div>
+          ))}
+
+        {/* Other Providers Section */}
+        <div className="border-t border-bolt-elements-borderColor pt-6 mt-8">
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Other Local Providers</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {filteredProviders
+              .filter((provider) => provider.name !== 'Ollama')
+              .map((provider, index) => (
+                <motion.div
+                  key={provider.name}
+                  className={classNames(
+                    'bg-bolt-elements-background-depth-2 rounded-xl',
+                    'hover:bg-bolt-elements-background-depth-3',
+                    'transition-all duration-200 p-5',
+                    'relative overflow-hidden group',
+                  )}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                  whileHover={{ scale: 1.01 }}
+                >
+                  {/* Provider Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex items-start gap-4">
+                      <motion.div
+                        className={classNames(
+                          'w-12 h-12 flex items-center justify-center rounded-xl',
+                          'bg-bolt-elements-background-depth-3',
+                          provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                        )}
+                        whileHover={{ scale: 1.1, rotate: 5 }}
+                      >
+                        {React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
+                          className: 'w-7 h-7',
+                          'aria-label': `${provider.name} icon`,
+                        })}
+                      </motion.div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
+                          <div className="flex gap-1">
+                            <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">
+                              Local
+                            </span>
+                            {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                              <span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500">
+                                Configurable
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <p className="text-sm text-bolt-elements-textSecondary mt-1">
+                          {PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
+                        </p>
+                      </div>
+                    </div>
+                    <Switch
+                      checked={provider.settings.enabled}
+                      onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
+                      aria-label={`Toggle ${provider.name} provider`}
+                    />
+                  </div>
+
+                  {/* URL Configuration Section */}
+                  <AnimatePresence>
+                    {provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                      <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        className="mt-4"
+                      >
+                        <div className="flex flex-col gap-2">
+                          <label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
+                          {editingProvider === provider.name ? (
+                            <input
+                              type="text"
+                              defaultValue={provider.settings.baseUrl}
+                              placeholder={`Enter ${provider.name} base URL`}
+                              className={classNames(
+                                'w-full px-3 py-2 rounded-lg text-sm',
+                                'bg-bolt-elements-background-depth-3 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',
+                              )}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                  handleUpdateBaseUrl(provider, e.currentTarget.value);
+                                } else if (e.key === 'Escape') {
+                                  setEditingProvider(null);
+                                }
+                              }}
+                              onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                              autoFocus
+                            />
+                          ) : (
+                            <div
+                              onClick={() => setEditingProvider(provider.name)}
+                              className={classNames(
+                                'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
+                                'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                                'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
+                                'transition-all duration-200',
+                              )}
+                            >
+                              <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                                <div className="i-ph:link text-sm" />
+                                <span>{provider.settings.baseUrl || 'Click to set base URL'}</span>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </motion.div>
+              ))}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+
+// Helper component for model status badge
+function ModelStatusBadge({ status }: { status?: string }) {
+  if (!status || status === 'idle') {
+    return null;
+  }
+
+  const statusConfig = {
+    updating: { bg: 'bg-yellow-500/10', text: 'text-yellow-500', label: 'Updating' },
+    updated: { bg: 'bg-green-500/10', text: 'text-green-500', label: 'Updated' },
+    error: { bg: 'bg-red-500/10', text: 'text-red-500', label: 'Error' },
+  };
+
+  const config = statusConfig[status as keyof typeof statusConfig];
+
+  if (!config) {
+    return null;
+  }
+
+  return (
+    <span className={classNames('px-2 py-0.5 rounded-full text-xs font-medium', config.bg, config.text)}>
+      {config.label}
+    </span>
+  );
+}

app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx

@@ -0,0 +1,603 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { Progress } from '~/components/ui/Progress';
+import { useToast } from '~/components/ui/use-toast';
+import { useSettings } from '~/lib/hooks/useSettings';
+
+interface OllamaModelInstallerProps {
+  onModelInstalled: () => void;
+}
+
+interface InstallProgress {
+  status: string;
+  progress: number;
+  downloadedSize?: string;
+  totalSize?: string;
+  speed?: string;
+}
+
+interface ModelInfo {
+  name: string;
+  desc: string;
+  size: string;
+  tags: string[];
+  installedVersion?: string;
+  latestVersion?: string;
+  needsUpdate?: boolean;
+  status?: 'idle' | 'installing' | 'updating' | 'updated' | 'error';
+  details?: {
+    family: string;
+    parameter_size: string;
+    quantization_level: string;
+  };
+}
+
+const POPULAR_MODELS: ModelInfo[] = [
+  {
+    name: 'deepseek-coder:6.7b',
+    desc: "DeepSeek's code generation model",
+    size: '4.1GB',
+    tags: ['coding', 'popular'],
+  },
+  {
+    name: 'llama2:7b',
+    desc: "Meta's Llama 2 (7B parameters)",
+    size: '3.8GB',
+    tags: ['general', 'popular'],
+  },
+  {
+    name: 'mistral:7b',
+    desc: "Mistral's 7B model",
+    size: '4.1GB',
+    tags: ['general', 'popular'],
+  },
+  {
+    name: 'gemma:7b',
+    desc: "Google's Gemma model",
+    size: '4.0GB',
+    tags: ['general', 'new'],
+  },
+  {
+    name: 'codellama:7b',
+    desc: "Meta's Code Llama model",
+    size: '4.1GB',
+    tags: ['coding', 'popular'],
+  },
+  {
+    name: 'neural-chat:7b',
+    desc: "Intel's Neural Chat model",
+    size: '4.1GB',
+    tags: ['chat', 'popular'],
+  },
+  {
+    name: 'phi:latest',
+    desc: "Microsoft's Phi-2 model",
+    size: '2.7GB',
+    tags: ['small', 'fast'],
+  },
+  {
+    name: 'qwen:7b',
+    desc: "Alibaba's Qwen model",
+    size: '4.1GB',
+    tags: ['general'],
+  },
+  {
+    name: 'solar:10.7b',
+    desc: "Upstage's Solar model",
+    size: '6.1GB',
+    tags: ['large', 'powerful'],
+  },
+  {
+    name: 'openchat:7b',
+    desc: 'Open-source chat model',
+    size: '4.1GB',
+    tags: ['chat', 'popular'],
+  },
+  {
+    name: 'dolphin-phi:2.7b',
+    desc: 'Lightweight chat model',
+    size: '1.6GB',
+    tags: ['small', 'fast'],
+  },
+  {
+    name: 'stable-code:3b',
+    desc: 'Lightweight coding model',
+    size: '1.8GB',
+    tags: ['coding', 'small'],
+  },
+];
+
+function formatBytes(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]}`;
+}
+
+function formatSpeed(bytesPerSecond: number): string {
+  return `${formatBytes(bytesPerSecond)}/s`;
+}
+
+// Add Ollama Icon SVG component
+function OllamaIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 1024 1024" className={className} fill="currentColor">
+      <path d="M684.3 322.2H339.8c-9.5.1-17.7 6.8-19.6 16.1-8.2 41.4-12.4 83.5-12.4 125.7 0 42.2 4.2 84.3 12.4 125.7 1.9 9.3 10.1 16 19.6 16.1h344.5c9.5-.1 17.7-6.8 19.6-16.1 8.2-41.4 12.4-83.5 12.4-125.7 0-42.2-4.2-84.3-12.4-125.7-1.9-9.3-10.1-16-19.6-16.1zM512 640c-176.7 0-320-143.3-320-320S335.3 0 512 0s320 143.3 320 320-143.3 320-320 320z" />
+    </svg>
+  );
+}
+
+export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelInstallerProps) {
+  const [modelString, setModelString] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
+  const [installProgress, setInstallProgress] = useState<InstallProgress | null>(null);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
+  const { toast } = useToast();
+  const { providers } = useSettings();
+
+  // Get base URL from provider settings
+  const baseUrl = providers?.Ollama?.settings?.baseUrl || 'http://127.0.0.1:11434';
+
+  // Function to check installed models and their versions
+  const checkInstalledModels = async () => {
+    try {
+      const response = await fetch(`${baseUrl}/api/tags`, {
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch installed models');
+      }
+
+      const data = (await response.json()) as { models: Array<{ name: string; digest: string; latest: string }> };
+      const installedModels = data.models || [];
+
+      // Update models with installed versions
+      setModels((prevModels) =>
+        prevModels.map((model) => {
+          const installed = installedModels.find((m) => m.name.toLowerCase() === model.name.toLowerCase());
+
+          if (installed) {
+            return {
+              ...model,
+              installedVersion: installed.digest.substring(0, 8),
+              needsUpdate: installed.digest !== installed.latest,
+              latestVersion: installed.latest?.substring(0, 8),
+            };
+          }
+
+          return model;
+        }),
+      );
+    } catch (error) {
+      console.error('Error checking installed models:', error);
+    }
+  };
+
+  // Check installed models on mount and after installation
+  useEffect(() => {
+    checkInstalledModels();
+  }, [baseUrl]);
+
+  const handleCheckUpdates = async () => {
+    setIsChecking(true);
+
+    try {
+      await checkInstalledModels();
+      toast('Model versions checked');
+    } catch (err) {
+      console.error('Failed to check model versions:', err);
+      toast('Failed to check model versions');
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  const filteredModels = models.filter((model) => {
+    const matchesSearch =
+      searchQuery === '' ||
+      model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      model.desc.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => model.tags.includes(tag));
+
+    return matchesSearch && matchesTags;
+  });
+
+  const handleInstallModel = async (modelToInstall: string) => {
+    if (!modelToInstall) {
+      return;
+    }
+
+    try {
+      setIsInstalling(true);
+      setInstallProgress({
+        status: 'Starting download...',
+        progress: 0,
+        downloadedSize: '0 B',
+        totalSize: 'Calculating...',
+        speed: '0 B/s',
+      });
+      setModelString('');
+      setSearchQuery('');
+
+      const response = await fetch(`${baseUrl}/api/pull`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: modelToInstall }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('Failed to get response reader');
+      }
+
+      let lastTime = Date.now();
+      let lastBytes = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const text = new TextDecoder().decode(value);
+        const lines = text.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          try {
+            const data = JSON.parse(line);
+
+            if ('status' in data) {
+              const currentTime = Date.now();
+              const timeDiff = (currentTime - lastTime) / 1000; // Convert to seconds
+              const bytesDiff = (data.completed || 0) - lastBytes;
+              const speed = bytesDiff / timeDiff;
+
+              setInstallProgress({
+                status: data.status,
+                progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
+                downloadedSize: formatBytes(data.completed || 0),
+                totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
+                speed: formatSpeed(speed),
+              });
+
+              lastTime = currentTime;
+              lastBytes = data.completed || 0;
+            }
+          } catch (err) {
+            console.error('Error parsing progress:', err);
+          }
+        }
+      }
+
+      toast('Successfully installed ' + modelToInstall + '. The model list will refresh automatically.');
+
+      // Ensure we call onModelInstalled after successful installation
+      setTimeout(() => {
+        onModelInstalled();
+      }, 1000);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error installing ${modelToInstall}:`, errorMessage);
+      toast(`Failed to install ${modelToInstall}. ${errorMessage}`);
+    } finally {
+      setIsInstalling(false);
+      setInstallProgress(null);
+    }
+  };
+
+  const handleUpdateModel = async (modelToUpdate: string) => {
+    try {
+      setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
+
+      const response = await fetch(`${baseUrl}/api/pull`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: modelToUpdate }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('Failed to get response reader');
+      }
+
+      let lastTime = Date.now();
+      let lastBytes = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const text = new TextDecoder().decode(value);
+        const lines = text.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          try {
+            const data = JSON.parse(line);
+
+            if ('status' in data) {
+              const currentTime = Date.now();
+              const timeDiff = (currentTime - lastTime) / 1000;
+              const bytesDiff = (data.completed || 0) - lastBytes;
+              const speed = bytesDiff / timeDiff;
+
+              setInstallProgress({
+                status: data.status,
+                progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
+                downloadedSize: formatBytes(data.completed || 0),
+                totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
+                speed: formatSpeed(speed),
+              });
+
+              lastTime = currentTime;
+              lastBytes = data.completed || 0;
+            }
+          } catch (err) {
+            console.error('Error parsing progress:', err);
+          }
+        }
+      }
+
+      toast('Successfully updated ' + modelToUpdate);
+
+      // Refresh model list after update
+      await checkInstalledModels();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error updating ${modelToUpdate}:`, errorMessage);
+      toast(`Failed to update ${modelToUpdate}. ${errorMessage}`);
+      setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'error' } : m)));
+    } finally {
+      setInstallProgress(null);
+    }
+  };
+
+  const allTags = Array.from(new Set(POPULAR_MODELS.flatMap((model) => model.tags)));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between pt-6">
+        <div className="flex items-center gap-3">
+          <OllamaIcon className="w-8 h-8 text-purple-500" />
+          <div>
+            <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Ollama Models</h3>
+            <p className="text-sm text-bolt-elements-textSecondary mt-1">Install and manage your Ollama models</p>
+          </div>
+        </div>
+        <motion.button
+          onClick={handleCheckUpdates}
+          disabled={isChecking}
+          className={classNames(
+            'px-4 py-2 rounded-lg',
+            'bg-purple-500/10 text-purple-500',
+            'hover:bg-purple-500/20',
+            'transition-all duration-200',
+            'flex items-center gap-2',
+          )}
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {isChecking ? (
+            <div className="i-ph:spinner-gap-bold animate-spin" />
+          ) : (
+            <div className="i-ph:arrows-clockwise" />
+          )}
+          Check Updates
+        </motion.button>
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <div className="space-y-1">
+            <input
+              type="text"
+              className={classNames(
+                'w-full px-4 py-3 rounded-xl',
+                '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',
+              )}
+              placeholder="Search models or enter custom model name..."
+              value={searchQuery || modelString}
+              onChange={(e) => {
+                const value = e.target.value;
+                setSearchQuery(value);
+                setModelString(value);
+              }}
+              disabled={isInstalling}
+            />
+            <p className="text-sm text-bolt-elements-textSecondary px-1">
+              Browse models at{' '}
+              <a
+                href="https://ollama.com/library"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-purple-500 hover:underline inline-flex items-center gap-1 text-base font-medium"
+              >
+                ollama.com/library
+                <div className="i-ph:arrow-square-out text-sm" />
+              </a>{' '}
+              and copy model names to install
+            </p>
+          </div>
+        </div>
+        <motion.button
+          onClick={() => handleInstallModel(modelString)}
+          disabled={!modelString || isInstalling}
+          className={classNames(
+            'rounded-lg px-4 py-2',
+            'bg-purple-500 text-white text-sm',
+            'hover:bg-purple-600',
+            'transition-all duration-200',
+            'flex items-center gap-2',
+            { 'opacity-50 cursor-not-allowed': !modelString || isInstalling },
+          )}
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {isInstalling ? (
+            <div className="flex items-center gap-2">
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+              <span>Installing...</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <OllamaIcon className="w-4 h-4" />
+              <span>Install Model</span>
+            </div>
+          )}
+        </motion.button>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {allTags.map((tag) => (
+          <button
+            key={tag}
+            onClick={() => {
+              setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
+            }}
+            className={classNames(
+              'px-3 py-1 rounded-full text-xs font-medium transition-all duration-200',
+              selectedTags.includes(tag)
+                ? 'bg-purple-500 text-white'
+                : 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-4',
+            )}
+          >
+            {tag}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 gap-2">
+        {filteredModels.map((model) => (
+          <motion.div
+            key={model.name}
+            className={classNames(
+              'flex items-start gap-2 p-3 rounded-lg',
+              'bg-bolt-elements-background-depth-3',
+              'hover:bg-bolt-elements-background-depth-4',
+              'transition-all duration-200',
+              'relative group',
+            )}
+          >
+            <OllamaIcon className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" />
+            <div className="flex-1 space-y-1.5">
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className="text-bolt-elements-textPrimary font-mono text-sm">{model.name}</p>
+                  <p className="text-xs text-bolt-elements-textSecondary mt-0.5">{model.desc}</p>
+                </div>
+                <div className="text-right">
+                  <span className="text-xs text-bolt-elements-textTertiary">{model.size}</span>
+                  {model.installedVersion && (
+                    <div className="mt-0.5 flex flex-col items-end gap-0.5">
+                      <span className="text-xs text-bolt-elements-textTertiary">v{model.installedVersion}</span>
+                      {model.needsUpdate && model.latestVersion && (
+                        <span className="text-xs text-purple-500">v{model.latestVersion} available</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="flex flex-wrap gap-1">
+                  {model.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-1.5 py-0.5 rounded-full text-[10px] bg-bolt-elements-background-depth-4 text-bolt-elements-textTertiary"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <div className="flex gap-2">
+                  {model.installedVersion ? (
+                    model.needsUpdate ? (
+                      <motion.button
+                        onClick={() => handleUpdateModel(model.name)}
+                        className={classNames(
+                          'px-2 py-0.5 rounded-lg text-xs',
+                          'bg-purple-500 text-white',
+                          'hover:bg-purple-600',
+                          'transition-all duration-200',
+                          'flex items-center gap-1',
+                        )}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                      >
+                        <div className="i-ph:arrows-clockwise text-xs" />
+                        Update
+                      </motion.button>
+                    ) : (
+                      <span className="px-2 py-0.5 rounded-lg text-xs text-green-500 bg-green-500/10">Up to date</span>
+                    )
+                  ) : (
+                    <motion.button
+                      onClick={() => handleInstallModel(model.name)}
+                      className={classNames(
+                        'px-2 py-0.5 rounded-lg text-xs',
+                        'bg-purple-500 text-white',
+                        'hover:bg-purple-600',
+                        'transition-all duration-200',
+                        'flex items-center gap-1',
+                      )}
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:download text-xs" />
+                      Install
+                    </motion.button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+
+      {installProgress && (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-bolt-elements-textSecondary">{installProgress.status}</span>
+            <div className="flex items-center gap-4">
+              <span className="text-bolt-elements-textTertiary">
+                {installProgress.downloadedSize} / {installProgress.totalSize}
+              </span>
+              <span className="text-bolt-elements-textTertiary">{installProgress.speed}</span>
+              <span className="text-bolt-elements-textSecondary">{Math.round(installProgress.progress)}%</span>
+            </div>
+          </div>
+          <Progress value={installProgress.progress} className="h-1" />
+        </motion.div>
+      )}
+    </div>
+  );
+}

app/components/@settings/tabs/providers/service-status/ServiceStatusTab.tsx

@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import type { ServiceStatus } from './types';
+import { ProviderStatusCheckerFactory } from './provider-factory';
+
+export default function ServiceStatusTab() {
+  const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const checkAllProviders = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const providers = ProviderStatusCheckerFactory.getProviderNames();
+        const statuses: ServiceStatus[] = [];
+
+        for (const provider of providers) {
+          try {
+            const checker = ProviderStatusCheckerFactory.getChecker(provider);
+            const result = await checker.checkStatus();
+
+            statuses.push({
+              provider,
+              ...result,
+              lastChecked: new Date().toISOString(),
+            });
+          } catch (err) {
+            console.error(`Error checking ${provider} status:`, err);
+            statuses.push({
+              provider,
+              status: 'degraded',
+              message: 'Unable to check service status',
+              incidents: ['Error checking service status'],
+              lastChecked: new Date().toISOString(),
+            });
+          }
+        }
+
+        setServiceStatuses(statuses);
+      } catch (err) {
+        console.error('Error checking provider statuses:', err);
+        setError('Failed to check service statuses');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAllProviders();
+
+    // Set up periodic checks every 5 minutes
+    const interval = setInterval(checkAllProviders, 5 * 60 * 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const getStatusColor = (status: ServiceStatus['status']) => {
+    switch (status) {
+      case 'operational':
+        return 'text-green-500 dark:text-green-400';
+      case 'degraded':
+        return 'text-yellow-500 dark:text-yellow-400';
+      case 'down':
+        return 'text-red-500 dark:text-red-400';
+      default:
+        return 'text-gray-500 dark:text-gray-400';
+    }
+  };
+
+  const getStatusIcon = (status: ServiceStatus['status']) => {
+    switch (status) {
+      case 'operational':
+        return 'i-ph:check-circle';
+      case 'degraded':
+        return 'i-ph:warning';
+      case 'down':
+        return 'i-ph:x-circle';
+      default:
+        return 'i-ph:question';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin i-ph:circle-notch w-8 h-8 text-purple-500" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-red-500 dark:text-red-400">
+        <div className="i-ph:warning w-8 h-8 mb-2" />
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4">
+        {serviceStatuses.map((service) => (
+          <div
+            key={service.provider}
+            className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{service.provider}</h3>
+              <div className={`flex items-center ${getStatusColor(service.status)}`}>
+                <div className={`${getStatusIcon(service.status)} w-5 h-5 mr-2`} />
+                <span className="capitalize">{service.status}</span>
+              </div>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-2">{service.message}</p>
+            {service.incidents && service.incidents.length > 0 && (
+              <div className="mt-2">
+                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Recent Incidents:</h4>
+                <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  {service.incidents.map((incident, index) => (
+                    <li key={index}>{incident}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+              Last checked: {new Date(service.lastChecked).toLocaleString()}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/providers/service-status/base-provider.ts

@@ -0,0 +1,121 @@
+import type { ProviderConfig, StatusCheckResult, ApiResponse } from './types';
+
+export abstract class BaseProviderChecker {
+  protected config: ProviderConfig;
+
+  constructor(config: ProviderConfig) {
+    this.config = config;
+  }
+
+  protected async checkApiEndpoint(
+    url: string,
+    headers?: Record<string, string>,
+    testModel?: string,
+  ): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 10000);
+
+      const startTime = performance.now();
+
+      // Add common headers
+      const processedHeaders = {
+        'Content-Type': 'application/json',
+        ...headers,
+      };
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: processedHeaders,
+        signal: controller.signal,
+      });
+
+      const endTime = performance.now();
+      const responseTime = endTime - startTime;
+
+      clearTimeout(timeoutId);
+
+      const data = (await response.json()) as ApiResponse;
+
+      if (!response.ok) {
+        let errorMessage = `API returned status: ${response.status}`;
+
+        if (data.error?.message) {
+          errorMessage = data.error.message;
+        } else if (data.message) {
+          errorMessage = data.message;
+        }
+
+        return {
+          ok: false,
+          status: response.status,
+          message: errorMessage,
+          responseTime,
+        };
+      }
+
+      // Different providers have different model list formats
+      let models: string[] = [];
+
+      if (Array.isArray(data)) {
+        models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
+      } else if (data.data && Array.isArray(data.data)) {
+        models = data.data.map((model) => model.id || model.name || '');
+      } else if (data.models && Array.isArray(data.models)) {
+        models = data.models.map((model) => model.id || model.name || '');
+      } else if (data.model) {
+        models = [data.model];
+      }
+
+      if (!testModel || models.length > 0) {
+        return {
+          ok: true,
+          status: response.status,
+          responseTime,
+          message: 'API key is valid',
+        };
+      }
+
+      if (testModel && !models.includes(testModel)) {
+        return {
+          ok: true,
+          status: 'model_not_found',
+          message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
+          responseTime,
+        };
+      }
+
+      return {
+        ok: true,
+        status: response.status,
+        message: 'API key is valid',
+        responseTime,
+      };
+    } catch (error) {
+      console.error(`Error checking API endpoint ${url}:`, error);
+      return {
+        ok: false,
+        status: error instanceof Error ? error.message : 'Unknown error',
+        message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
+        responseTime: 0,
+      };
+    }
+  }
+
+  protected async checkEndpoint(url: string): Promise<'reachable' | 'unreachable'> {
+    try {
+      const response = await fetch(url, {
+        mode: 'no-cors',
+        headers: {
+          Accept: 'text/html',
+        },
+      });
+      return response.type === 'opaque' ? 'reachable' : 'unreachable';
+    } catch (error) {
+      console.error(`Error checking ${url}:`, error);
+      return 'unreachable';
+    }
+  }
+
+  abstract checkStatus(): Promise<StatusCheckResult>;
+}

app/components/@settings/tabs/providers/service-status/provider-factory.ts

@@ -0,0 +1,154 @@
+import type { ProviderName, ProviderConfig, StatusCheckResult } from './types';
+import { BaseProviderChecker } from './base-provider';
+
+import { AmazonBedrockStatusChecker } from './providers/amazon-bedrock';
+import { CohereStatusChecker } from './providers/cohere';
+import { DeepseekStatusChecker } from './providers/deepseek';
+import { GoogleStatusChecker } from './providers/google';
+import { GroqStatusChecker } from './providers/groq';
+import { HuggingFaceStatusChecker } from './providers/huggingface';
+import { HyperbolicStatusChecker } from './providers/hyperbolic';
+import { MistralStatusChecker } from './providers/mistral';
+import { OpenRouterStatusChecker } from './providers/openrouter';
+import { PerplexityStatusChecker } from './providers/perplexity';
+import { TogetherStatusChecker } from './providers/together';
+import { XAIStatusChecker } from './providers/xai';
+
+export class ProviderStatusCheckerFactory {
+  private static _providerConfigs: Record<ProviderName, ProviderConfig> = {
+    AmazonBedrock: {
+      statusUrl: 'https://health.aws.amazon.com/health/status',
+      apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
+      headers: {},
+      testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
+    },
+    Cohere: {
+      statusUrl: 'https://status.cohere.com/',
+      apiUrl: 'https://api.cohere.ai/v1/models',
+      headers: {},
+      testModel: 'command',
+    },
+    Deepseek: {
+      statusUrl: 'https://status.deepseek.com/',
+      apiUrl: 'https://api.deepseek.com/v1/models',
+      headers: {},
+      testModel: 'deepseek-chat',
+    },
+    Google: {
+      statusUrl: 'https://status.cloud.google.com/',
+      apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
+      headers: {},
+      testModel: 'gemini-pro',
+    },
+    Groq: {
+      statusUrl: 'https://groqstatus.com/',
+      apiUrl: 'https://api.groq.com/v1/models',
+      headers: {},
+      testModel: 'mixtral-8x7b-32768',
+    },
+    HuggingFace: {
+      statusUrl: 'https://status.huggingface.co/',
+      apiUrl: 'https://api-inference.huggingface.co/models',
+      headers: {},
+      testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+    },
+    Hyperbolic: {
+      statusUrl: 'https://status.hyperbolic.ai/',
+      apiUrl: 'https://api.hyperbolic.ai/v1/models',
+      headers: {},
+      testModel: 'hyperbolic-1',
+    },
+    Mistral: {
+      statusUrl: 'https://status.mistral.ai/',
+      apiUrl: 'https://api.mistral.ai/v1/models',
+      headers: {},
+      testModel: 'mistral-tiny',
+    },
+    OpenRouter: {
+      statusUrl: 'https://status.openrouter.ai/',
+      apiUrl: 'https://openrouter.ai/api/v1/models',
+      headers: {},
+      testModel: 'anthropic/claude-3-sonnet',
+    },
+    Perplexity: {
+      statusUrl: 'https://status.perplexity.com/',
+      apiUrl: 'https://api.perplexity.ai/v1/models',
+      headers: {},
+      testModel: 'pplx-7b-chat',
+    },
+    Together: {
+      statusUrl: 'https://status.together.ai/',
+      apiUrl: 'https://api.together.xyz/v1/models',
+      headers: {},
+      testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+    },
+    XAI: {
+      statusUrl: 'https://status.x.ai/',
+      apiUrl: 'https://api.x.ai/v1/models',
+      headers: {},
+      testModel: 'grok-1',
+    },
+  };
+
+  static getChecker(provider: ProviderName): BaseProviderChecker {
+    const config = this._providerConfigs[provider];
+
+    if (!config) {
+      throw new Error(`No configuration found for provider: ${provider}`);
+    }
+
+    switch (provider) {
+      case 'AmazonBedrock':
+        return new AmazonBedrockStatusChecker(config);
+      case 'Cohere':
+        return new CohereStatusChecker(config);
+      case 'Deepseek':
+        return new DeepseekStatusChecker(config);
+      case 'Google':
+        return new GoogleStatusChecker(config);
+      case 'Groq':
+        return new GroqStatusChecker(config);
+      case 'HuggingFace':
+        return new HuggingFaceStatusChecker(config);
+      case 'Hyperbolic':
+        return new HyperbolicStatusChecker(config);
+      case 'Mistral':
+        return new MistralStatusChecker(config);
+      case 'OpenRouter':
+        return new OpenRouterStatusChecker(config);
+      case 'Perplexity':
+        return new PerplexityStatusChecker(config);
+      case 'Together':
+        return new TogetherStatusChecker(config);
+      case 'XAI':
+        return new XAIStatusChecker(config);
+      default:
+        return new (class extends BaseProviderChecker {
+          async checkStatus(): Promise<StatusCheckResult> {
+            const endpointStatus = await this.checkEndpoint(this.config.statusUrl);
+            const apiStatus = await this.checkEndpoint(this.config.apiUrl);
+
+            return {
+              status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+              message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+              incidents: ['Note: Limited status information due to CORS restrictions'],
+            };
+          }
+        })(config);
+    }
+  }
+
+  static getProviderNames(): ProviderName[] {
+    return Object.keys(this._providerConfigs) as ProviderName[];
+  }
+
+  static getProviderConfig(provider: ProviderName): ProviderConfig {
+    const config = this._providerConfigs[provider];
+
+    if (!config) {
+      throw new Error(`Unknown provider: ${provider}`);
+    }
+
+    return config;
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/amazon-bedrock.ts

@@ -0,0 +1,76 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class AmazonBedrockStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check AWS health status page
+      const statusPageResponse = await fetch('https://health.aws.amazon.com/health/status');
+      const text = await statusPageResponse.text();
+
+      // Check for Bedrock and general AWS status
+      const hasBedrockIssues =
+        text.includes('Amazon Bedrock') &&
+        (text.includes('Service is experiencing elevated error rates') ||
+          text.includes('Service disruption') ||
+          text.includes('Degraded Service'));
+
+      const hasGeneralIssues = text.includes('Service disruption') || text.includes('Multiple services affected');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
+
+      for (const match of incidentMatches) {
+        const [, date, title, impact] = match;
+
+        if (title.includes('Bedrock') || title.includes('AWS')) {
+          incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
+        }
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All services operational';
+
+      if (hasBedrockIssues) {
+        status = 'degraded';
+        message = 'Amazon Bedrock service issues reported';
+      } else if (hasGeneralIssues) {
+        status = 'degraded';
+        message = 'AWS experiencing general issues';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
+        const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: incidents.slice(0, 5),
+      };
+    } catch (error) {
+      console.error('Error checking Amazon Bedrock status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
+      const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/anthropic.ts

@@ -0,0 +1,80 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class AnthropicStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.anthropic.com/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific Anthropic status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasDegradedPerformance = text.includes('Degraded Performance');
+      const hasPartialOutage = text.includes('Partial Outage');
+      const hasMajorOutage = text.includes('Major Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (hasMajorOutage) {
+        status = 'down';
+        message = 'Major service outage';
+      } else if (hasPartialOutage) {
+        status = 'down';
+        message = 'Partial service outage';
+      } else if (hasDegradedPerformance) {
+        status = 'degraded';
+        message = 'Service experiencing degraded performance';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
+        const apiEndpoint = 'https://api.anthropic.com/v1/messages';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Anthropic status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
+      const apiEndpoint = 'https://api.anthropic.com/v1/messages';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/cohere.ts

@@ -0,0 +1,91 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class CohereStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.cohere.com/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific Cohere status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      // Check specific services
+      const services = {
+        api: {
+          operational: text.includes('API Service') && text.includes('Operational'),
+          degraded: text.includes('API Service') && text.includes('Degraded Performance'),
+          outage: text.includes('API Service') && text.includes('Service Outage'),
+        },
+        generation: {
+          operational: text.includes('Generation Service') && text.includes('Operational'),
+          degraded: text.includes('Generation Service') && text.includes('Degraded Performance'),
+          outage: text.includes('Generation Service') && text.includes('Service Outage'),
+        },
+      };
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (services.api.outage || services.generation.outage || hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (services.api.degraded || services.generation.degraded || hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
+        const apiEndpoint = 'https://api.cohere.ai/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Cohere status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
+      const apiEndpoint = 'https://api.cohere.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/deepseek.ts

@@ -0,0 +1,40 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class DeepseekStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      /*
+       * Check status page - Note: Deepseek doesn't have a public status page yet
+       * so we'll check their API endpoint directly
+       */
+      const apiEndpoint = 'https://api.deepseek.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      // Check their website as a secondary indicator
+      const websiteStatus = await this.checkEndpoint('https://deepseek.com');
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
+        status = apiStatus !== 'reachable' ? 'down' : 'degraded';
+        message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
+      }
+
+      return {
+        status,
+        message,
+        incidents: [], // No public incident tracking available yet
+      };
+    } catch (error) {
+      console.error('Error checking Deepseek status:', error);
+
+      return {
+        status: 'degraded',
+        message: 'Unable to determine service status',
+        incidents: ['Note: Limited status information available'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/google.ts

@@ -0,0 +1,77 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class GoogleStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.cloud.google.com/');
+      const text = await statusPageResponse.text();
+
+      // Check for Vertex AI and general cloud status
+      const hasVertexAIIssues =
+        text.includes('Vertex AI') &&
+        (text.includes('Incident') ||
+          text.includes('Disruption') ||
+          text.includes('Outage') ||
+          text.includes('degraded'));
+
+      const hasGeneralIssues = text.includes('Major Incidents') || text.includes('Service Disruption');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
+
+      for (const match of incidentMatches) {
+        const [, date, title, impact] = match;
+
+        if (title.includes('Vertex AI') || title.includes('Cloud')) {
+          incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
+        }
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All services operational';
+
+      if (hasVertexAIIssues) {
+        status = 'degraded';
+        message = 'Vertex AI service issues reported';
+      } else if (hasGeneralIssues) {
+        status = 'degraded';
+        message = 'Google Cloud experiencing issues';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
+        const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: incidents.slice(0, 5),
+      };
+    } catch (error) {
+      console.error('Error checking Google status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
+      const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/groq.ts

@@ -0,0 +1,72 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class GroqStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://groqstatus.com/');
+      const text = await statusPageResponse.text();
+
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Status:(.*?)(?=\n|$)/g);
+
+      for (const match of incidentMatches) {
+        const [, date, title, status] = match;
+        incidents.push(`${date}: ${title.trim()} - ${status.trim()}`);
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
+        const apiEndpoint = 'https://api.groq.com/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: incidents.slice(0, 5),
+      };
+    } catch (error) {
+      console.error('Error checking Groq status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
+      const apiEndpoint = 'https://api.groq.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/huggingface.ts

@@ -0,0 +1,98 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class HuggingFaceStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.huggingface.co/');
+      const text = await statusPageResponse.text();
+
+      // Check for "All services are online" message
+      const allServicesOnline = text.includes('All services are online');
+
+      // Get last update time
+      const lastUpdateMatch = text.match(/Last updated on (.*?)(EST|PST|GMT)/);
+      const lastUpdate = lastUpdateMatch ? `${lastUpdateMatch[1]}${lastUpdateMatch[2]}` : '';
+
+      // Check individual services and their uptime percentages
+      const services = {
+        'Huggingface Hub': {
+          operational: text.includes('Huggingface Hub') && text.includes('Operational'),
+          uptime: text.match(/Huggingface Hub[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        'Git Hosting and Serving': {
+          operational: text.includes('Git Hosting and Serving') && text.includes('Operational'),
+          uptime: text.match(/Git Hosting and Serving[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        'Inference API': {
+          operational: text.includes('Inference API') && text.includes('Operational'),
+          uptime: text.match(/Inference API[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        'HF Endpoints': {
+          operational: text.includes('HF Endpoints') && text.includes('Operational'),
+          uptime: text.match(/HF Endpoints[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        Spaces: {
+          operational: text.includes('Spaces') && text.includes('Operational'),
+          uptime: text.match(/Spaces[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+      };
+
+      // Create service status messages with uptime
+      const serviceMessages = Object.entries(services).map(([name, info]) => {
+        if (info.uptime) {
+          return `${name}: ${info.uptime}% uptime`;
+        }
+
+        return `${name}: ${info.operational ? 'Operational' : 'Issues detected'}`;
+      });
+
+      // Determine overall status
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = allServicesOnline
+        ? `All services are online (Last updated on ${lastUpdate})`
+        : 'Checking individual services';
+
+      // Only mark as degraded if we explicitly detect issues
+      const hasIssues = Object.values(services).some((service) => !service.operational);
+
+      if (hasIssues) {
+        status = 'degraded';
+        message = `Service issues detected (Last updated on ${lastUpdate})`;
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
+        const apiEndpoint = 'https://api-inference.huggingface.co/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: serviceMessages,
+      };
+    } catch (error) {
+      console.error('Error checking HuggingFace status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
+      const apiEndpoint = 'https://api-inference.huggingface.co/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/hyperbolic.ts

@@ -0,0 +1,40 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class HyperbolicStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      /*
+       * Check API endpoint directly since Hyperbolic is a newer provider
+       * and may not have a public status page yet
+       */
+      const apiEndpoint = 'https://api.hyperbolic.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      // Check their website as a secondary indicator
+      const websiteStatus = await this.checkEndpoint('https://hyperbolic.ai');
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
+        status = apiStatus !== 'reachable' ? 'down' : 'degraded';
+        message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
+      }
+
+      return {
+        status,
+        message,
+        incidents: [], // No public incident tracking available yet
+      };
+    } catch (error) {
+      console.error('Error checking Hyperbolic status:', error);
+
+      return {
+        status: 'degraded',
+        message: 'Unable to determine service status',
+        incidents: ['Note: Limited status information available'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/mistral.ts

@@ -0,0 +1,76 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class MistralStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.mistral.ai/');
+      const text = await statusPageResponse.text();
+
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Recent Events(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && !line.includes('No incidents'));
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.mistral.ai/');
+        const apiEndpoint = 'https://api.mistral.ai/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Mistral status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.mistral.ai/');
+      const apiEndpoint = 'https://api.mistral.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/openai.ts

@@ -0,0 +1,99 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class OpenAIStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.openai.com/');
+      const text = await statusPageResponse.text();
+
+      // Check individual services
+      const services = {
+        api: {
+          operational: text.includes('API ?  Operational'),
+          degraded: text.includes('API ?  Degraded Performance'),
+          outage: text.includes('API ?  Major Outage') || text.includes('API ?  Partial Outage'),
+        },
+        chat: {
+          operational: text.includes('ChatGPT ?  Operational'),
+          degraded: text.includes('ChatGPT ?  Degraded Performance'),
+          outage: text.includes('ChatGPT ?  Major Outage') || text.includes('ChatGPT ?  Partial Outage'),
+        },
+      };
+
+      // Extract recent incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.match(/Past Incidents(.*?)(?=\w+ \d+, \d{4})/s);
+
+      if (incidentMatches) {
+        const recentIncidents = incidentMatches[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Get only dated incidents
+
+        incidents.push(...recentIncidents.slice(0, 5));
+      }
+
+      // Determine overall status
+      let status: StatusCheckResult['status'] = 'operational';
+      const messages: string[] = [];
+
+      if (services.api.outage || services.chat.outage) {
+        status = 'down';
+
+        if (services.api.outage) {
+          messages.push('API: Major Outage');
+        }
+
+        if (services.chat.outage) {
+          messages.push('ChatGPT: Major Outage');
+        }
+      } else if (services.api.degraded || services.chat.degraded) {
+        status = 'degraded';
+
+        if (services.api.degraded) {
+          messages.push('API: Degraded Performance');
+        }
+
+        if (services.chat.degraded) {
+          messages.push('ChatGPT: Degraded Performance');
+        }
+      } else if (services.api.operational) {
+        messages.push('API: Operational');
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.openai.com/');
+        const apiEndpoint = 'https://api.openai.com/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message: messages.join(', ') || 'Status unknown',
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking OpenAI status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.openai.com/');
+      const apiEndpoint = 'https://api.openai.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/openrouter.ts

@@ -0,0 +1,91 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class OpenRouterStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.openrouter.ai/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific OpenRouter status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      // Check specific services
+      const services = {
+        api: {
+          operational: text.includes('API Service') && text.includes('Operational'),
+          degraded: text.includes('API Service') && text.includes('Degraded Performance'),
+          outage: text.includes('API Service') && text.includes('Service Outage'),
+        },
+        routing: {
+          operational: text.includes('Routing Service') && text.includes('Operational'),
+          degraded: text.includes('Routing Service') && text.includes('Degraded Performance'),
+          outage: text.includes('Routing Service') && text.includes('Service Outage'),
+        },
+      };
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (services.api.outage || services.routing.outage || hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (services.api.degraded || services.routing.degraded || hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.openrouter.ai/');
+        const apiEndpoint = 'https://openrouter.ai/api/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking OpenRouter status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.openrouter.ai/');
+      const apiEndpoint = 'https://openrouter.ai/api/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/perplexity.ts

@@ -0,0 +1,91 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class PerplexityStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.perplexity.ai/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific Perplexity status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      // Check specific services
+      const services = {
+        api: {
+          operational: text.includes('API Service') && text.includes('Operational'),
+          degraded: text.includes('API Service') && text.includes('Degraded Performance'),
+          outage: text.includes('API Service') && text.includes('Service Outage'),
+        },
+        inference: {
+          operational: text.includes('Inference Service') && text.includes('Operational'),
+          degraded: text.includes('Inference Service') && text.includes('Degraded Performance'),
+          outage: text.includes('Inference Service') && text.includes('Service Outage'),
+        },
+      };
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (services.api.outage || services.inference.outage || hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (services.api.degraded || services.inference.degraded || hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.perplexity.ai/');
+        const apiEndpoint = 'https://api.perplexity.ai/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Perplexity status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.perplexity.ai/');
+      const apiEndpoint = 'https://api.perplexity.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/together.ts

@@ -0,0 +1,91 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class TogetherStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.together.ai/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific Together status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      // Check specific services
+      const services = {
+        api: {
+          operational: text.includes('API Service') && text.includes('Operational'),
+          degraded: text.includes('API Service') && text.includes('Degraded Performance'),
+          outage: text.includes('API Service') && text.includes('Service Outage'),
+        },
+        inference: {
+          operational: text.includes('Inference Service') && text.includes('Operational'),
+          degraded: text.includes('Inference Service') && text.includes('Degraded Performance'),
+          outage: text.includes('Inference Service') && text.includes('Service Outage'),
+        },
+      };
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (services.api.outage || services.inference.outage || hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (services.api.degraded || services.inference.degraded || hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.together.ai/');
+        const apiEndpoint = 'https://api.together.ai/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Together status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.together.ai/');
+      const apiEndpoint = 'https://api.together.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/xai.ts

@@ -0,0 +1,40 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class XAIStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      /*
+       * Check API endpoint directly since XAI is a newer provider
+       * and may not have a public status page yet
+       */
+      const apiEndpoint = 'https://api.xai.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      // Check their website as a secondary indicator
+      const websiteStatus = await this.checkEndpoint('https://x.ai');
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
+        status = apiStatus !== 'reachable' ? 'down' : 'degraded';
+        message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
+      }
+
+      return {
+        status,
+        message,
+        incidents: [], // No public incident tracking available yet
+      };
+    } catch (error) {
+      console.error('Error checking XAI status:', error);
+
+      return {
+        status: 'degraded',
+        message: 'Unable to determine service status',
+        incidents: ['Note: Limited status information available'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/types.ts

@@ -0,0 +1,55 @@
+import type { IconType } from 'react-icons';
+
+export type ProviderName =
+  | 'AmazonBedrock'
+  | 'Cohere'
+  | 'Deepseek'
+  | 'Google'
+  | 'Groq'
+  | 'HuggingFace'
+  | 'Hyperbolic'
+  | 'Mistral'
+  | 'OpenRouter'
+  | 'Perplexity'
+  | 'Together'
+  | 'XAI';
+
+export type ServiceStatus = {
+  provider: ProviderName;
+  status: 'operational' | 'degraded' | 'down';
+  lastChecked: string;
+  statusUrl?: string;
+  icon?: IconType;
+  message?: string;
+  responseTime?: number;
+  incidents?: string[];
+};
+
+export interface ProviderConfig {
+  statusUrl: string;
+  apiUrl: string;
+  headers: Record<string, string>;
+  testModel: string;
+}
+
+export type ApiResponse = {
+  error?: {
+    message: string;
+  };
+  message?: string;
+  model?: string;
+  models?: Array<{
+    id?: string;
+    name?: string;
+  }>;
+  data?: Array<{
+    id?: string;
+    name?: string;
+  }>;
+};
+
+export type StatusCheckResult = {
+  status: 'operational' | 'degraded' | 'down';
+  message: string;
+  incidents: string[];
+};

app/components/@settings/tabs/providers/status/ServiceStatusTab.tsx

@@ -0,0 +1,886 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { TbActivityHeartbeat } from 'react-icons/tb';
+import { BsCheckCircleFill, BsXCircleFill, BsExclamationCircleFill } from 'react-icons/bs';
+import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
+import { BsRobot, BsCloud } from 'react-icons/bs';
+import { TbBrain } from 'react-icons/tb';
+import { BiChip, BiCodeBlock } from 'react-icons/bi';
+import { FaCloud, FaBrain } from 'react-icons/fa';
+import type { IconType } from 'react-icons';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { useToast } from '~/components/ui/use-toast';
+
+// Types
+type ProviderName =
+  | 'AmazonBedrock'
+  | 'Anthropic'
+  | 'Cohere'
+  | 'Deepseek'
+  | 'Google'
+  | 'Groq'
+  | 'HuggingFace'
+  | 'Mistral'
+  | 'OpenAI'
+  | 'OpenRouter'
+  | 'Perplexity'
+  | 'Together'
+  | 'XAI';
+
+type ServiceStatus = {
+  provider: ProviderName;
+  status: 'operational' | 'degraded' | 'down';
+  lastChecked: string;
+  statusUrl?: string;
+  icon?: IconType;
+  message?: string;
+  responseTime?: number;
+  incidents?: string[];
+};
+
+type ProviderConfig = {
+  statusUrl: string;
+  apiUrl: string;
+  headers: Record<string, string>;
+  testModel: string;
+};
+
+// Types for API responses
+type ApiResponse = {
+  error?: {
+    message: string;
+  };
+  message?: string;
+  model?: string;
+  models?: Array<{
+    id?: string;
+    name?: string;
+  }>;
+  data?: Array<{
+    id?: string;
+    name?: string;
+  }>;
+};
+
+// Constants
+const PROVIDER_STATUS_URLS: Record<ProviderName, ProviderConfig> = {
+  OpenAI: {
+    statusUrl: 'https://status.openai.com/',
+    apiUrl: 'https://api.openai.com/v1/models',
+    headers: {
+      Authorization: 'Bearer $OPENAI_API_KEY',
+    },
+    testModel: 'gpt-3.5-turbo',
+  },
+  Anthropic: {
+    statusUrl: 'https://status.anthropic.com/',
+    apiUrl: 'https://api.anthropic.com/v1/messages',
+    headers: {
+      'x-api-key': '$ANTHROPIC_API_KEY',
+      'anthropic-version': '2024-02-29',
+    },
+    testModel: 'claude-3-sonnet-20240229',
+  },
+  Cohere: {
+    statusUrl: 'https://status.cohere.com/',
+    apiUrl: 'https://api.cohere.ai/v1/models',
+    headers: {
+      Authorization: 'Bearer $COHERE_API_KEY',
+    },
+    testModel: 'command',
+  },
+  Google: {
+    statusUrl: 'https://status.cloud.google.com/',
+    apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
+    headers: {
+      'x-goog-api-key': '$GOOGLE_API_KEY',
+    },
+    testModel: 'gemini-pro',
+  },
+  HuggingFace: {
+    statusUrl: 'https://status.huggingface.co/',
+    apiUrl: 'https://api-inference.huggingface.co/models',
+    headers: {
+      Authorization: 'Bearer $HUGGINGFACE_API_KEY',
+    },
+    testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+  },
+  Mistral: {
+    statusUrl: 'https://status.mistral.ai/',
+    apiUrl: 'https://api.mistral.ai/v1/models',
+    headers: {
+      Authorization: 'Bearer $MISTRAL_API_KEY',
+    },
+    testModel: 'mistral-tiny',
+  },
+  Perplexity: {
+    statusUrl: 'https://status.perplexity.com/',
+    apiUrl: 'https://api.perplexity.ai/v1/models',
+    headers: {
+      Authorization: 'Bearer $PERPLEXITY_API_KEY',
+    },
+    testModel: 'pplx-7b-chat',
+  },
+  Together: {
+    statusUrl: 'https://status.together.ai/',
+    apiUrl: 'https://api.together.xyz/v1/models',
+    headers: {
+      Authorization: 'Bearer $TOGETHER_API_KEY',
+    },
+    testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+  },
+  AmazonBedrock: {
+    statusUrl: 'https://health.aws.amazon.com/health/status',
+    apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
+    headers: {
+      Authorization: 'Bearer $AWS_BEDROCK_CONFIG',
+    },
+    testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
+  },
+  Groq: {
+    statusUrl: 'https://groqstatus.com/',
+    apiUrl: 'https://api.groq.com/v1/models',
+    headers: {
+      Authorization: 'Bearer $GROQ_API_KEY',
+    },
+    testModel: 'mixtral-8x7b-32768',
+  },
+  OpenRouter: {
+    statusUrl: 'https://status.openrouter.ai/',
+    apiUrl: 'https://openrouter.ai/api/v1/models',
+    headers: {
+      Authorization: 'Bearer $OPEN_ROUTER_API_KEY',
+    },
+    testModel: 'anthropic/claude-3-sonnet',
+  },
+  XAI: {
+    statusUrl: 'https://status.x.ai/',
+    apiUrl: 'https://api.x.ai/v1/models',
+    headers: {
+      Authorization: 'Bearer $XAI_API_KEY',
+    },
+    testModel: 'grok-1',
+  },
+  Deepseek: {
+    statusUrl: 'https://status.deepseek.com/',
+    apiUrl: 'https://api.deepseek.com/v1/models',
+    headers: {
+      Authorization: 'Bearer $DEEPSEEK_API_KEY',
+    },
+    testModel: 'deepseek-chat',
+  },
+};
+
+const PROVIDER_ICONS: Record<ProviderName, IconType> = {
+  AmazonBedrock: SiAmazon,
+  Anthropic: FaBrain,
+  Cohere: BiChip,
+  Google: SiGoogle,
+  Groq: BsCloud,
+  HuggingFace: SiHuggingface,
+  Mistral: TbBrain,
+  OpenAI: SiOpenai,
+  OpenRouter: FaCloud,
+  Perplexity: SiPerplexity,
+  Together: BsCloud,
+  XAI: BsRobot,
+  Deepseek: BiCodeBlock,
+};
+
+const ServiceStatusTab = () => {
+  const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+  const [testApiKey, setTestApiKey] = useState<string>('');
+  const [testProvider, setTestProvider] = useState<ProviderName | ''>('');
+  const [testingStatus, setTestingStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle');
+  const settings = useSettings();
+  const { success, error } = useToast();
+
+  // Function to get the API key for a provider from environment variables
+  const getApiKey = useCallback(
+    (provider: ProviderName): string | null => {
+      if (!settings.providers) {
+        return null;
+      }
+
+      // Map provider names to environment variable names
+      const envKeyMap: Record<ProviderName, string> = {
+        OpenAI: 'OPENAI_API_KEY',
+        Anthropic: 'ANTHROPIC_API_KEY',
+        Cohere: 'COHERE_API_KEY',
+        Google: 'GOOGLE_GENERATIVE_AI_API_KEY',
+        HuggingFace: 'HuggingFace_API_KEY',
+        Mistral: 'MISTRAL_API_KEY',
+        Perplexity: 'PERPLEXITY_API_KEY',
+        Together: 'TOGETHER_API_KEY',
+        AmazonBedrock: 'AWS_BEDROCK_CONFIG',
+        Groq: 'GROQ_API_KEY',
+        OpenRouter: 'OPEN_ROUTER_API_KEY',
+        XAI: 'XAI_API_KEY',
+        Deepseek: 'DEEPSEEK_API_KEY',
+      };
+
+      const envKey = envKeyMap[provider];
+
+      if (!envKey) {
+        return null;
+      }
+
+      // Get the API key from environment variables
+      const apiKey = (import.meta.env[envKey] as string) || null;
+
+      // Special handling for providers with base URLs
+      if (provider === 'Together' && apiKey) {
+        const baseUrl = import.meta.env.TOGETHER_API_BASE_URL;
+
+        if (!baseUrl) {
+          return null;
+        }
+      }
+
+      return apiKey;
+    },
+    [settings.providers],
+  );
+
+  // Update provider configurations based on available API keys
+  const getProviderConfig = useCallback((provider: ProviderName): ProviderConfig | null => {
+    const config = PROVIDER_STATUS_URLS[provider];
+
+    if (!config) {
+      return null;
+    }
+
+    // Handle special cases for providers with base URLs
+    let updatedConfig = { ...config };
+    const togetherBaseUrl = import.meta.env.TOGETHER_API_BASE_URL;
+
+    if (provider === 'Together' && togetherBaseUrl) {
+      updatedConfig = {
+        ...config,
+        apiUrl: `${togetherBaseUrl}/models`,
+      };
+    }
+
+    return updatedConfig;
+  }, []);
+
+  // Function to check if an API endpoint is accessible with model verification
+  const checkApiEndpoint = useCallback(
+    async (
+      url: string,
+      headers?: Record<string, string>,
+      testModel?: string,
+    ): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> => {
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000);
+
+        const startTime = performance.now();
+
+        // Add common headers
+        const processedHeaders = {
+          'Content-Type': 'application/json',
+          ...headers,
+        };
+
+        // First check if the API is accessible
+        const response = await fetch(url, {
+          method: 'GET',
+          headers: processedHeaders,
+          signal: controller.signal,
+        });
+
+        const endTime = performance.now();
+        const responseTime = endTime - startTime;
+
+        clearTimeout(timeoutId);
+
+        // Get response data
+        const data = (await response.json()) as ApiResponse;
+
+        // Special handling for different provider responses
+        if (!response.ok) {
+          let errorMessage = `API returned status: ${response.status}`;
+
+          // Handle provider-specific error messages
+          if (data.error?.message) {
+            errorMessage = data.error.message;
+          } else if (data.message) {
+            errorMessage = data.message;
+          }
+
+          return {
+            ok: false,
+            status: response.status,
+            message: errorMessage,
+            responseTime,
+          };
+        }
+
+        // Different providers have different model list formats
+        let models: string[] = [];
+
+        if (Array.isArray(data)) {
+          models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
+        } else if (data.data && Array.isArray(data.data)) {
+          models = data.data.map((model) => model.id || model.name || '');
+        } else if (data.models && Array.isArray(data.models)) {
+          models = data.models.map((model) => model.id || model.name || '');
+        } else if (data.model) {
+          // Some providers return single model info
+          models = [data.model];
+        }
+
+        // For some providers, just having a successful response is enough
+        if (!testModel || models.length > 0) {
+          return {
+            ok: true,
+            status: response.status,
+            responseTime,
+            message: 'API key is valid',
+          };
+        }
+
+        // If a specific model was requested, verify it exists
+        if (testModel && !models.includes(testModel)) {
+          return {
+            ok: true, // Still mark as ok since API works
+            status: 'model_not_found',
+            message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
+            responseTime,
+          };
+        }
+
+        return {
+          ok: true,
+          status: response.status,
+          message: 'API key is valid',
+          responseTime,
+        };
+      } catch (error) {
+        console.error(`Error checking API endpoint ${url}:`, error);
+        return {
+          ok: false,
+          status: error instanceof Error ? error.message : 'Unknown error',
+          message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
+          responseTime: 0,
+        };
+      }
+    },
+    [getApiKey],
+  );
+
+  // Function to fetch real status from provider status pages
+  const fetchPublicStatus = useCallback(
+    async (
+      provider: ProviderName,
+    ): Promise<{
+      status: ServiceStatus['status'];
+      message?: string;
+      incidents?: string[];
+    }> => {
+      try {
+        // Due to CORS restrictions, we can only check if the endpoints are reachable
+        const checkEndpoint = async (url: string) => {
+          try {
+            const response = await fetch(url, {
+              mode: 'no-cors',
+              headers: {
+                Accept: 'text/html',
+              },
+            });
+
+            // With no-cors, we can only know if the request succeeded
+            return response.type === 'opaque' ? 'reachable' : 'unreachable';
+          } catch (error) {
+            console.error(`Error checking ${url}:`, error);
+            return 'unreachable';
+          }
+        };
+
+        switch (provider) {
+          case 'HuggingFace': {
+            const endpointStatus = await checkEndpoint('https://status.huggingface.co/');
+
+            // Check API endpoint as fallback
+            const apiEndpoint = 'https://api-inference.huggingface.co/models';
+            const apiStatus = await checkEndpoint(apiEndpoint);
+
+            return {
+              status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+              message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+              incidents: ['Note: Limited status information due to CORS restrictions'],
+            };
+          }
+
+          case 'OpenAI': {
+            const endpointStatus = await checkEndpoint('https://status.openai.com/');
+            const apiEndpoint = 'https://api.openai.com/v1/models';
+            const apiStatus = await checkEndpoint(apiEndpoint);
+
+            return {
+              status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+              message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+              incidents: ['Note: Limited status information due to CORS restrictions'],
+            };
+          }
+
+          case 'Google': {
+            const endpointStatus = await checkEndpoint('https://status.cloud.google.com/');
+            const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
+            const apiStatus = await checkEndpoint(apiEndpoint);
+
+            return {
+              status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+              message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+              incidents: ['Note: Limited status information due to CORS restrictions'],
+            };
+          }
+
+          // Similar pattern for other providers...
+          default:
+            return {
+              status: 'operational',
+              message: 'Basic reachability check only',
+              incidents: ['Note: Limited status information due to CORS restrictions'],
+            };
+        }
+      } catch (error) {
+        console.error(`Error fetching status for ${provider}:`, error);
+        return {
+          status: 'degraded',
+          message: 'Unable to fetch status due to CORS restrictions',
+          incidents: ['Error: Unable to check service status'],
+        };
+      }
+    },
+    [],
+  );
+
+  // Function to fetch status for a provider with retries
+  const fetchProviderStatus = useCallback(
+    async (provider: ProviderName, config: ProviderConfig): Promise<ServiceStatus> => {
+      const MAX_RETRIES = 2;
+      const RETRY_DELAY = 2000; // 2 seconds
+
+      const attemptCheck = async (attempt: number): Promise<ServiceStatus> => {
+        try {
+          // First check the public status page if available
+          const hasPublicStatus = [
+            'Anthropic',
+            'OpenAI',
+            'Google',
+            'HuggingFace',
+            'Mistral',
+            'Groq',
+            'Perplexity',
+            'Together',
+          ].includes(provider);
+
+          if (hasPublicStatus) {
+            const publicStatus = await fetchPublicStatus(provider);
+
+            return {
+              provider,
+              status: publicStatus.status,
+              lastChecked: new Date().toISOString(),
+              statusUrl: config.statusUrl,
+              icon: PROVIDER_ICONS[provider],
+              message: publicStatus.message,
+              incidents: publicStatus.incidents,
+            };
+          }
+
+          // For other providers, we'll show status but mark API check as separate
+          const apiKey = getApiKey(provider);
+          const providerConfig = getProviderConfig(provider);
+
+          if (!apiKey || !providerConfig) {
+            return {
+              provider,
+              status: 'operational',
+              lastChecked: new Date().toISOString(),
+              statusUrl: config.statusUrl,
+              icon: PROVIDER_ICONS[provider],
+              message: !apiKey
+                ? 'Status operational (API key needed for usage)'
+                : 'Status operational (configuration needed for usage)',
+              incidents: [],
+            };
+          }
+
+          // If we have API access, let's verify that too
+          const { ok, status, message, responseTime } = await checkApiEndpoint(
+            providerConfig.apiUrl,
+            providerConfig.headers,
+            providerConfig.testModel,
+          );
+
+          if (!ok && attempt < MAX_RETRIES) {
+            await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+            return attemptCheck(attempt + 1);
+          }
+
+          return {
+            provider,
+            status: ok ? 'operational' : 'degraded',
+            lastChecked: new Date().toISOString(),
+            statusUrl: providerConfig.statusUrl,
+            icon: PROVIDER_ICONS[provider],
+            message: ok ? 'Service and API operational' : `Service operational (API: ${message || status})`,
+            responseTime,
+            incidents: [],
+          };
+        } catch (error) {
+          console.error(`Error fetching status for ${provider} (attempt ${attempt}):`, error);
+
+          if (attempt < MAX_RETRIES) {
+            await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+            return attemptCheck(attempt + 1);
+          }
+
+          return {
+            provider,
+            status: 'degraded',
+            lastChecked: new Date().toISOString(),
+            statusUrl: config.statusUrl,
+            icon: PROVIDER_ICONS[provider],
+            message: 'Service operational (Status check error)',
+            responseTime: 0,
+            incidents: [],
+          };
+        }
+      };
+
+      return attemptCheck(1);
+    },
+    [checkApiEndpoint, getApiKey, getProviderConfig, fetchPublicStatus],
+  );
+
+  // Memoize the fetchAllStatuses function
+  const fetchAllStatuses = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      const statuses = await Promise.all(
+        Object.entries(PROVIDER_STATUS_URLS).map(([provider, config]) =>
+          fetchProviderStatus(provider as ProviderName, config),
+        ),
+      );
+
+      setServiceStatuses(statuses.sort((a, b) => a.provider.localeCompare(b.provider)));
+      setLastRefresh(new Date());
+      success('Service statuses updated successfully');
+    } catch (err) {
+      console.error('Error fetching all statuses:', err);
+      error('Failed to update service statuses');
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchProviderStatus, success, error]);
+
+  useEffect(() => {
+    fetchAllStatuses();
+
+    // Refresh status every 2 minutes
+    const interval = setInterval(fetchAllStatuses, 2 * 60 * 1000);
+
+    return () => clearInterval(interval);
+  }, [fetchAllStatuses]);
+
+  // Function to test an API key
+  const testApiKeyForProvider = useCallback(
+    async (provider: ProviderName, apiKey: string) => {
+      try {
+        setTestingStatus('testing');
+
+        const config = PROVIDER_STATUS_URLS[provider];
+
+        if (!config) {
+          throw new Error('Provider configuration not found');
+        }
+
+        const headers = { ...config.headers };
+
+        // Replace the placeholder API key with the test key
+        Object.keys(headers).forEach((key) => {
+          if (headers[key].startsWith('$')) {
+            headers[key] = headers[key].replace(/\$.*/, apiKey);
+          }
+        });
+
+        // Special handling for certain providers
+        switch (provider) {
+          case 'Anthropic':
+            headers['anthropic-version'] = '2024-02-29';
+            break;
+          case 'OpenAI':
+            if (!headers.Authorization?.startsWith('Bearer ')) {
+              headers.Authorization = `Bearer ${apiKey}`;
+            }
+
+            break;
+          case 'Google': {
+            // Google uses the API key directly in the URL
+            const googleUrl = `${config.apiUrl}?key=${apiKey}`;
+            const result = await checkApiEndpoint(googleUrl, {}, config.testModel);
+
+            if (result.ok) {
+              setTestingStatus('success');
+              success('API key is valid!');
+            } else {
+              setTestingStatus('error');
+              error(`API key test failed: ${result.message}`);
+            }
+
+            return;
+          }
+        }
+
+        const { ok, message } = await checkApiEndpoint(config.apiUrl, headers, config.testModel);
+
+        if (ok) {
+          setTestingStatus('success');
+          success('API key is valid!');
+        } else {
+          setTestingStatus('error');
+          error(`API key test failed: ${message}`);
+        }
+      } catch (err: unknown) {
+        setTestingStatus('error');
+        error('Failed to test API key: ' + (err instanceof Error ? err.message : 'Unknown error'));
+      } finally {
+        // Reset testing status after a delay
+        setTimeout(() => setTestingStatus('idle'), 3000);
+      }
+    },
+    [checkApiEndpoint, success, error],
+  );
+
+  const getStatusColor = (status: ServiceStatus['status']) => {
+    switch (status) {
+      case 'operational':
+        return 'text-green-500';
+      case 'degraded':
+        return 'text-yellow-500';
+      case 'down':
+        return 'text-red-500';
+      default:
+        return 'text-gray-500';
+    }
+  };
+
+  const getStatusIcon = (status: ServiceStatus['status']) => {
+    switch (status) {
+      case 'operational':
+        return <BsCheckCircleFill className="w-4 h-4" />;
+      case 'degraded':
+        return <BsExclamationCircleFill className="w-4 h-4" />;
+      case 'down':
+        return <BsXCircleFill className="w-4 h-4" />;
+      default:
+        return <BsXCircleFill className="w-4 h-4" />;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <motion.div
+        className="space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="flex items-center justify-between gap-2 mt-8 mb-4">
+          <div className="flex items-center gap-2">
+            <div
+              className={classNames(
+                'w-8 h-8 flex items-center justify-center rounded-lg',
+                'bg-bolt-elements-background-depth-3',
+                'text-purple-500',
+              )}
+            >
+              <TbActivityHeartbeat className="w-5 h-5" />
+            </div>
+            <div>
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary">Service Status</h4>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                Monitor and test the operational status of cloud LLM providers
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-bolt-elements-textSecondary">
+              Last updated: {lastRefresh.toLocaleTimeString()}
+            </span>
+            <button
+              onClick={() => fetchAllStatuses()}
+              className={classNames(
+                'px-3 py-1.5 rounded-lg text-sm',
+                'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+                'text-bolt-elements-textPrimary',
+                'transition-all duration-200',
+                'flex items-center gap-2',
+                loading ? 'opacity-50 cursor-not-allowed' : '',
+              )}
+              disabled={loading}
+            >
+              <div className={`i-ph:arrows-clockwise w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+              <span>{loading ? 'Refreshing...' : 'Refresh'}</span>
+            </button>
+          </div>
+        </div>
+
+        {/* API Key Test Section */}
+        <div className="p-4 bg-bolt-elements-background-depth-2 rounded-lg">
+          <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Test API Key</h5>
+          <div className="flex gap-2">
+            <select
+              value={testProvider}
+              onChange={(e) => setTestProvider(e.target.value as ProviderName)}
+              className={classNames(
+                'flex-1 px-3 py-1.5 rounded-lg text-sm max-w-[200px]',
+                'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                'text-bolt-elements-textPrimary',
+                'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+              )}
+            >
+              <option value="">Select Provider</option>
+              {Object.keys(PROVIDER_STATUS_URLS).map((provider) => (
+                <option key={provider} value={provider}>
+                  {provider}
+                </option>
+              ))}
+            </select>
+            <input
+              type="password"
+              value={testApiKey}
+              onChange={(e) => setTestApiKey(e.target.value)}
+              placeholder="Enter API key to test"
+              className={classNames(
+                'flex-1 px-3 py-1.5 rounded-lg text-sm',
+                'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+              )}
+            />
+            <button
+              onClick={() =>
+                testProvider && testApiKey && testApiKeyForProvider(testProvider as ProviderName, testApiKey)
+              }
+              disabled={!testProvider || !testApiKey || testingStatus === 'testing'}
+              className={classNames(
+                'px-4 py-1.5 rounded-lg text-sm',
+                'bg-purple-500 hover:bg-purple-600',
+                'text-white',
+                'transition-all duration-200',
+                'flex items-center gap-2',
+                !testProvider || !testApiKey || testingStatus === 'testing' ? 'opacity-50 cursor-not-allowed' : '',
+              )}
+            >
+              {testingStatus === 'testing' ? (
+                <>
+                  <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                  <span>Testing...</span>
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:key w-4 h-4" />
+                  <span>Test Key</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Status Grid */}
+        {loading && serviceStatuses.length === 0 ? (
+          <div className="text-center py-8 text-bolt-elements-textSecondary">Loading service statuses...</div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {serviceStatuses.map((service, index) => (
+              <motion.div
+                key={service.provider}
+                className={classNames(
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden rounded-lg',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                <div
+                  className={classNames('block p-4', service.statusUrl ? 'cursor-pointer' : '')}
+                  onClick={() => service.statusUrl && window.open(service.statusUrl, '_blank')}
+                >
+                  <div className="flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                      {service.icon && (
+                        <div
+                          className={classNames(
+                            'w-8 h-8 flex items-center justify-center rounded-lg',
+                            'bg-bolt-elements-background-depth-3',
+                            getStatusColor(service.status),
+                          )}
+                        >
+                          {React.createElement(service.icon, {
+                            className: 'w-5 h-5',
+                          })}
+                        </div>
+                      )}
+                      <div>
+                        <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{service.provider}</h4>
+                        <div className="space-y-1">
+                          <p className="text-xs text-bolt-elements-textSecondary">
+                            Last checked: {new Date(service.lastChecked).toLocaleTimeString()}
+                          </p>
+                          {service.responseTime && (
+                            <p className="text-xs text-bolt-elements-textTertiary">
+                              Response time: {Math.round(service.responseTime)}ms
+                            </p>
+                          )}
+                          {service.message && (
+                            <p className="text-xs text-bolt-elements-textTertiary">{service.message}</p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className={classNames('flex items-center gap-2', getStatusColor(service.status))}>
+                      <span className="text-sm capitalize">{service.status}</span>
+                      {getStatusIcon(service.status)}
+                    </div>
+                  </div>
+                  {service.incidents && service.incidents.length > 0 && (
+                    <div className="mt-2 border-t border-bolt-elements-borderColor pt-2">
+                      <p className="text-xs font-medium text-bolt-elements-textSecondary mb-1">Recent Incidents:</p>
+                      <ul className="text-xs text-bolt-elements-textTertiary space-y-1">
+                        {service.incidents.map((incident, i) => (
+                          <li key={i}>{incident}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </motion.div>
+    </div>
+  );
+};
+
+// Add tab metadata
+ServiceStatusTab.tabMetadata = {
+  icon: 'i-ph:activity-bold',
+  description: 'Monitor and test LLM provider service status',
+  category: 'services',
+};
+
+export default ServiceStatusTab;

app/components/@settings/tabs/settings/SettingsTab.tsx

@@ -0,0 +1,215 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { classNames } from '~/utils/classNames';
+import { Switch } from '~/components/ui/Switch';
+import type { UserProfile } from '~/components/@settings/core/types';
+import { isMac } from '~/utils/os';
+
+// Helper to get modifier key symbols/text
+const getModifierSymbol = (modifier: string): string => {
+  switch (modifier) {
+    case 'meta':
+      return isMac ? '⌘' : 'Win';
+    case 'alt':
+      return isMac ? '⌥' : 'Alt';
+    case 'shift':
+      return '⇧';
+    default:
+      return modifier;
+  }
+};
+
+export default function SettingsTab() {
+  const [currentTimezone, setCurrentTimezone] = useState('');
+  const [settings, setSettings] = useState<UserProfile>(() => {
+    const saved = localStorage.getItem('bolt_user_profile');
+    return saved
+      ? JSON.parse(saved)
+      : {
+          notifications: true,
+          language: 'en',
+          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        };
+  });
+
+  useEffect(() => {
+    setCurrentTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+
+  // Save settings automatically when they change
+  useEffect(() => {
+    try {
+      // Get existing profile data
+      const existingProfile = JSON.parse(localStorage.getItem('bolt_user_profile') || '{}');
+
+      // Merge with new settings
+      const updatedProfile = {
+        ...existingProfile,
+        notifications: settings.notifications,
+        language: settings.language,
+        timezone: settings.timezone,
+      };
+
+      localStorage.setItem('bolt_user_profile', JSON.stringify(updatedProfile));
+      toast.success('Settings updated');
+    } catch (error) {
+      console.error('Error saving settings:', error);
+      toast.error('Failed to update settings');
+    }
+  }, [settings]);
+
+  return (
+    <div className="space-y-4">
+      {/* Language & Notifications */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4 space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex items-center gap-2 mb-4">
+          <div className="i-ph:palette-fill w-4 h-4 text-purple-500" />
+          <span className="text-sm font-medium text-bolt-elements-textPrimary">Preferences</span>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="i-ph:translate-fill w-4 h-4 text-bolt-elements-textSecondary" />
+            <label className="block text-sm text-bolt-elements-textSecondary">Language</label>
+          </div>
+          <select
+            value={settings.language}
+            onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
+            className={classNames(
+              'w-full px-3 py-2 rounded-lg text-sm',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'text-bolt-elements-textPrimary',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+              'transition-all duration-200',
+            )}
+          >
+            <option value="en">English</option>
+            <option value="es">Español</option>
+            <option value="fr">Français</option>
+            <option value="de">Deutsch</option>
+            <option value="it">Italiano</option>
+            <option value="pt">Português</option>
+            <option value="ru">Русский</option>
+            <option value="zh">中文</option>
+            <option value="ja">日本語</option>
+            <option value="ko">한국어</option>
+          </select>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="i-ph:bell-fill w-4 h-4 text-bolt-elements-textSecondary" />
+            <label className="block text-sm text-bolt-elements-textSecondary">Notifications</label>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-bolt-elements-textSecondary">
+              {settings.notifications ? 'Notifications are enabled' : 'Notifications are disabled'}
+            </span>
+            <Switch
+              checked={settings.notifications}
+              onCheckedChange={(checked) => {
+                // Update local state
+                setSettings((prev) => ({ ...prev, notifications: checked }));
+
+                // Update localStorage immediately
+                const existingProfile = JSON.parse(localStorage.getItem('bolt_user_profile') || '{}');
+                const updatedProfile = {
+                  ...existingProfile,
+                  notifications: checked,
+                };
+                localStorage.setItem('bolt_user_profile', JSON.stringify(updatedProfile));
+
+                // Dispatch storage event for other components
+                window.dispatchEvent(
+                  new StorageEvent('storage', {
+                    key: 'bolt_user_profile',
+                    newValue: JSON.stringify(updatedProfile),
+                  }),
+                );
+
+                toast.success(`Notifications ${checked ? 'enabled' : 'disabled'}`);
+              }}
+            />
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Timezone */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="flex items-center gap-2 mb-4">
+          <div className="i-ph:clock-fill w-4 h-4 text-purple-500" />
+          <span className="text-sm font-medium text-bolt-elements-textPrimary">Time Settings</span>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="i-ph:globe-fill w-4 h-4 text-bolt-elements-textSecondary" />
+            <label className="block text-sm text-bolt-elements-textSecondary">Timezone</label>
+          </div>
+          <select
+            value={settings.timezone}
+            onChange={(e) => setSettings((prev) => ({ ...prev, timezone: e.target.value }))}
+            className={classNames(
+              'w-full px-3 py-2 rounded-lg text-sm',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'text-bolt-elements-textPrimary',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+              'transition-all duration-200',
+            )}
+          >
+            <option value={currentTimezone}>{currentTimezone}</option>
+          </select>
+        </div>
+      </motion.div>
+
+      {/* Simplified Keyboard Shortcuts */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        <div className="flex items-center gap-2 mb-4">
+          <div className="i-ph:keyboard-fill w-4 h-4 text-purple-500" />
+          <span className="text-sm font-medium text-bolt-elements-textPrimary">Keyboard Shortcuts</span>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A]">
+            <div className="flex flex-col">
+              <span className="text-sm text-bolt-elements-textPrimary">Toggle Theme</span>
+              <span className="text-xs text-bolt-elements-textSecondary">Switch between light and dark mode</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('meta')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('alt')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('shift')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                D
+              </kbd>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

app/components/@settings/tabs/task-manager/TaskManagerTab.tsx

@@ -0,0 +1,1265 @@
+import * as React from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { toast } from 'react-toastify'; // Import toast
+import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
+import { tabConfigurationStore, type TabConfig } from '~/lib/stores/tabConfigurationStore';
+import { useStore } from 'zustand';
+
+// Register ChartJS components
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+interface BatteryManager extends EventTarget {
+  charging: boolean;
+  chargingTime: number;
+  dischargingTime: number;
+  level: number;
+}
+
+interface SystemMetrics {
+  cpu: {
+    usage: number;
+    cores: number[];
+    temperature?: number;
+    frequency?: number;
+  };
+  memory: {
+    used: number;
+    total: number;
+    percentage: number;
+    heap: {
+      used: number;
+      total: number;
+      limit: number;
+    };
+    cache?: number;
+  };
+  uptime: number;
+  battery?: {
+    level: number;
+    charging: boolean;
+    timeRemaining?: number;
+    temperature?: number;
+    cycles?: number;
+    health?: number;
+  };
+  network: {
+    downlink: number;
+    uplink?: number;
+    latency: number;
+    type: string;
+    activeConnections?: number;
+    bytesReceived: number;
+    bytesSent: number;
+  };
+  performance: {
+    fps: number;
+    pageLoad: number;
+    domReady: number;
+    resources: {
+      total: number;
+      size: number;
+      loadTime: number;
+    };
+    timing: {
+      ttfb: number;
+      fcp: number;
+      lcp: number;
+    };
+  };
+  health: {
+    score: number;
+    issues: string[];
+    suggestions: string[];
+  };
+}
+
+interface MetricsHistory {
+  timestamps: string[];
+  cpu: number[];
+  memory: number[];
+  battery: number[];
+  network: number[];
+}
+
+interface EnergySavings {
+  updatesReduced: number;
+  timeInSaverMode: number;
+  estimatedEnergySaved: number; // in mWh (milliwatt-hours)
+}
+
+interface PowerProfile {
+  name: string;
+  description: string;
+  settings: {
+    updateInterval: number;
+    enableAnimations: boolean;
+    backgroundProcessing: boolean;
+    networkThrottling: boolean;
+  };
+}
+
+interface PerformanceAlert {
+  type: 'warning' | 'error' | 'info';
+  message: string;
+  timestamp: number;
+  metric: string;
+  threshold: number;
+  value: number;
+}
+
+declare global {
+  interface Navigator {
+    getBattery(): Promise<BatteryManager>;
+  }
+  interface Performance {
+    memory?: {
+      jsHeapSizeLimit: number;
+      totalJSHeapSize: number;
+      usedJSHeapSize: number;
+    };
+  }
+}
+
+// Constants for update intervals
+const UPDATE_INTERVALS = {
+  normal: {
+    metrics: 1000, // 1 second
+    animation: 16, // ~60fps
+  },
+  energySaver: {
+    metrics: 5000, // 5 seconds
+    animation: 32, // ~30fps
+  },
+};
+
+// Constants for performance thresholds
+const PERFORMANCE_THRESHOLDS = {
+  cpu: {
+    warning: 70,
+    critical: 90,
+  },
+  memory: {
+    warning: 80,
+    critical: 95,
+  },
+  fps: {
+    warning: 30,
+    critical: 15,
+  },
+};
+
+// Constants for energy calculations
+const ENERGY_COSTS = {
+  update: 0.1, // mWh per update
+};
+
+// Default power profiles
+const POWER_PROFILES: PowerProfile[] = [
+  {
+    name: 'Performance',
+    description: 'Maximum performance with frequent updates',
+    settings: {
+      updateInterval: UPDATE_INTERVALS.normal.metrics,
+      enableAnimations: true,
+      backgroundProcessing: true,
+      networkThrottling: false,
+    },
+  },
+  {
+    name: 'Balanced',
+    description: 'Optimal balance between performance and energy efficiency',
+    settings: {
+      updateInterval: 2000,
+      enableAnimations: true,
+      backgroundProcessing: true,
+      networkThrottling: false,
+    },
+  },
+  {
+    name: 'Energy Saver',
+    description: 'Maximum energy efficiency with reduced updates',
+    settings: {
+      updateInterval: UPDATE_INTERVALS.energySaver.metrics,
+      enableAnimations: false,
+      backgroundProcessing: false,
+      networkThrottling: true,
+    },
+  },
+];
+
+// Default metrics state
+const DEFAULT_METRICS_STATE: SystemMetrics = {
+  cpu: {
+    usage: 0,
+    cores: [],
+  },
+  memory: {
+    used: 0,
+    total: 0,
+    percentage: 0,
+    heap: {
+      used: 0,
+      total: 0,
+      limit: 0,
+    },
+  },
+  uptime: 0,
+  network: {
+    downlink: 0,
+    latency: 0,
+    type: 'unknown',
+    bytesReceived: 0,
+    bytesSent: 0,
+  },
+  performance: {
+    fps: 0,
+    pageLoad: 0,
+    domReady: 0,
+    resources: {
+      total: 0,
+      size: 0,
+      loadTime: 0,
+    },
+    timing: {
+      ttfb: 0,
+      fcp: 0,
+      lcp: 0,
+    },
+  },
+  health: {
+    score: 0,
+    issues: [],
+    suggestions: [],
+  },
+};
+
+// Default metrics history
+const DEFAULT_METRICS_HISTORY: MetricsHistory = {
+  timestamps: Array(10).fill(new Date().toLocaleTimeString()),
+  cpu: Array(10).fill(0),
+  memory: Array(10).fill(0),
+  battery: Array(10).fill(0),
+  network: Array(10).fill(0),
+};
+
+// Battery threshold for auto energy saver mode
+const BATTERY_THRESHOLD = 20; // percentage
+
+// Maximum number of history points to keep
+const MAX_HISTORY_POINTS = 10;
+
+const TaskManagerTab: React.FC = () => {
+  // Initialize metrics state with defaults
+  const [metrics, setMetrics] = useState<SystemMetrics>(() => DEFAULT_METRICS_STATE);
+  const [metricsHistory, setMetricsHistory] = useState<MetricsHistory>(() => DEFAULT_METRICS_HISTORY);
+  const [energySaverMode, setEnergySaverMode] = useState<boolean>(false);
+  const [autoEnergySaver, setAutoEnergySaver] = useState<boolean>(false);
+  const [energySavings, setEnergySavings] = useState<EnergySavings>(() => ({
+    updatesReduced: 0,
+    timeInSaverMode: 0,
+    estimatedEnergySaved: 0,
+  }));
+  const [selectedProfile, setSelectedProfile] = useState<PowerProfile>(() => POWER_PROFILES[1]);
+  const [alerts, setAlerts] = useState<PerformanceAlert[]>([]);
+  const saverModeStartTime = useRef<number | null>(null);
+
+  // Get update status and tab configuration
+  const { hasUpdate } = useUpdateCheck();
+  const tabConfig = useStore(tabConfigurationStore);
+
+  const resetTabConfiguration = useCallback(() => {
+    tabConfig.reset();
+    return tabConfig.get();
+  }, [tabConfig]);
+
+  // Effect to handle tab visibility
+  useEffect(() => {
+    const handleTabVisibility = () => {
+      const currentConfig = tabConfig.get();
+      const controlledTabs = ['debug', 'update'];
+
+      // Update visibility based on conditions
+      const updatedTabs = currentConfig.userTabs.map((tab: TabConfig) => {
+        if (controlledTabs.includes(tab.id)) {
+          return {
+            ...tab,
+            visible: tab.id === 'debug' ? metrics.cpu.usage > 80 : hasUpdate,
+          };
+        }
+
+        return tab;
+      });
+
+      tabConfig.set({
+        ...currentConfig,
+        userTabs: updatedTabs,
+      });
+    };
+
+    const checkInterval = setInterval(handleTabVisibility, 5000);
+
+    return () => {
+      clearInterval(checkInterval);
+    };
+  }, [metrics.cpu.usage, hasUpdate, tabConfig]);
+
+  // Effect to handle reset and initialization
+  useEffect(() => {
+    const resetToDefaults = () => {
+      console.log('TaskManagerTab: Resetting to defaults');
+
+      // Reset metrics and local state
+      setMetrics(DEFAULT_METRICS_STATE);
+      setMetricsHistory(DEFAULT_METRICS_HISTORY);
+      setEnergySaverMode(false);
+      setAutoEnergySaver(false);
+      setEnergySavings({
+        updatesReduced: 0,
+        timeInSaverMode: 0,
+        estimatedEnergySaved: 0,
+      });
+      setSelectedProfile(POWER_PROFILES[1]);
+      setAlerts([]);
+      saverModeStartTime.current = null;
+
+      // Reset tab configuration to ensure proper visibility
+      const defaultConfig = resetTabConfiguration();
+      console.log('TaskManagerTab: Reset tab configuration:', defaultConfig);
+    };
+
+    // Listen for both storage changes and custom reset event
+    const handleReset = (event: Event | StorageEvent) => {
+      if (event instanceof StorageEvent) {
+        if (event.key === 'tabConfiguration' && event.newValue === null) {
+          resetToDefaults();
+        }
+      } else if (event instanceof CustomEvent && event.type === 'tabConfigReset') {
+        resetToDefaults();
+      }
+    };
+
+    // Initial setup
+    const initializeTab = async () => {
+      try {
+        // Load saved preferences
+        const savedEnergySaver = localStorage.getItem('energySaverMode');
+        const savedAutoSaver = localStorage.getItem('autoEnergySaver');
+        const savedProfile = localStorage.getItem('selectedProfile');
+
+        if (savedEnergySaver) {
+          setEnergySaverMode(JSON.parse(savedEnergySaver));
+        }
+
+        if (savedAutoSaver) {
+          setAutoEnergySaver(JSON.parse(savedAutoSaver));
+        }
+
+        if (savedProfile) {
+          const profile = POWER_PROFILES.find((p) => p.name === savedProfile);
+
+          if (profile) {
+            setSelectedProfile(profile);
+          }
+        }
+
+        await updateMetrics();
+      } catch (error) {
+        console.error('Failed to initialize TaskManagerTab:', error);
+        resetToDefaults();
+      }
+    };
+
+    window.addEventListener('storage', handleReset);
+    window.addEventListener('tabConfigReset', handleReset);
+    initializeTab();
+
+    return () => {
+      window.removeEventListener('storage', handleReset);
+      window.removeEventListener('tabConfigReset', handleReset);
+    };
+  }, []);
+
+  // Get detailed performance metrics
+  const getPerformanceMetrics = async (): Promise<Partial<SystemMetrics['performance']>> => {
+    try {
+      // Get FPS
+      const fps = await measureFrameRate();
+
+      // Get page load metrics
+      const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+      const pageLoad = navigation.loadEventEnd - navigation.startTime;
+      const domReady = navigation.domContentLoadedEventEnd - navigation.startTime;
+
+      // Get resource metrics
+      const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
+      const resourceMetrics = {
+        total: resources.length,
+        size: resources.reduce((total, r) => total + (r.transferSize || 0), 0),
+        loadTime: Math.max(0, ...resources.map((r) => r.duration)),
+      };
+
+      // Get Web Vitals
+      const ttfb = navigation.responseStart - navigation.requestStart;
+      const paintEntries = performance.getEntriesByType('paint');
+      const fcp = paintEntries.find((entry) => entry.name === 'first-contentful-paint')?.startTime || 0;
+      const lcpEntry = await getLargestContentfulPaint();
+
+      return {
+        fps,
+        pageLoad,
+        domReady,
+        resources: resourceMetrics,
+        timing: {
+          ttfb,
+          fcp,
+          lcp: lcpEntry?.startTime || 0,
+        },
+      };
+    } catch (error) {
+      console.error('Failed to get performance metrics:', error);
+      return {};
+    }
+  };
+
+  // Single useEffect for metrics updates
+  useEffect(() => {
+    let isComponentMounted = true;
+
+    const updateMetricsWrapper = async () => {
+      if (!isComponentMounted) {
+        return;
+      }
+
+      try {
+        await updateMetrics();
+      } catch (error) {
+        console.error('Failed to update metrics:', error);
+      }
+    };
+
+    // Initial update
+    updateMetricsWrapper();
+
+    // Set up interval with immediate assignment
+    const metricsInterval = setInterval(
+      updateMetricsWrapper,
+      energySaverMode ? UPDATE_INTERVALS.energySaver.metrics : UPDATE_INTERVALS.normal.metrics,
+    );
+
+    // Cleanup function
+    return () => {
+      isComponentMounted = false;
+      clearInterval(metricsInterval);
+    };
+  }, [energySaverMode]); // Only depend on energySaverMode
+
+  // Handle energy saver mode changes
+  const handleEnergySaverChange = (checked: boolean) => {
+    setEnergySaverMode(checked);
+    localStorage.setItem('energySaverMode', JSON.stringify(checked));
+    toast.success(checked ? 'Energy Saver mode enabled' : 'Energy Saver mode disabled');
+  };
+
+  // Handle auto energy saver changes
+  const handleAutoEnergySaverChange = (checked: boolean) => {
+    setAutoEnergySaver(checked);
+    localStorage.setItem('autoEnergySaver', JSON.stringify(checked));
+    toast.success(checked ? 'Auto Energy Saver enabled' : 'Auto Energy Saver disabled');
+
+    if (!checked) {
+      // When disabling auto mode, also disable energy saver mode
+      setEnergySaverMode(false);
+      localStorage.setItem('energySaverMode', 'false');
+    }
+  };
+
+  // Update energy savings calculation
+  const updateEnergySavings = useCallback(() => {
+    if (!energySaverMode) {
+      saverModeStartTime.current = null;
+      setEnergySavings({
+        updatesReduced: 0,
+        timeInSaverMode: 0,
+        estimatedEnergySaved: 0,
+      });
+
+      return;
+    }
+
+    if (!saverModeStartTime.current) {
+      saverModeStartTime.current = Date.now();
+    }
+
+    const timeInSaverMode = Math.max(0, (Date.now() - (saverModeStartTime.current || Date.now())) / 1000);
+
+    const normalUpdatesPerMinute = 60 / (UPDATE_INTERVALS.normal.metrics / 1000);
+    const saverUpdatesPerMinute = 60 / (UPDATE_INTERVALS.energySaver.metrics / 1000);
+    const updatesReduced = Math.floor((normalUpdatesPerMinute - saverUpdatesPerMinute) * (timeInSaverMode / 60));
+
+    const energyPerUpdate = ENERGY_COSTS.update;
+    const energySaved = (updatesReduced * energyPerUpdate) / 3600;
+
+    setEnergySavings({
+      updatesReduced,
+      timeInSaverMode,
+      estimatedEnergySaved: energySaved,
+    });
+  }, [energySaverMode]);
+
+  // Add interval for energy savings updates
+  useEffect(() => {
+    const interval = setInterval(updateEnergySavings, 1000);
+    return () => clearInterval(interval);
+  }, [updateEnergySavings]);
+
+  // Measure frame rate
+  const measureFrameRate = async (): Promise<number> => {
+    return new Promise((resolve) => {
+      const frameCount = { value: 0 };
+      const startTime = performance.now();
+
+      const countFrame = (time: number) => {
+        frameCount.value++;
+
+        if (time - startTime >= 1000) {
+          resolve(Math.round((frameCount.value * 1000) / (time - startTime)));
+        } else {
+          requestAnimationFrame(countFrame);
+        }
+      };
+
+      requestAnimationFrame(countFrame);
+    });
+  };
+
+  // Get Largest Contentful Paint
+  const getLargestContentfulPaint = async (): Promise<PerformanceEntry | undefined> => {
+    return new Promise((resolve) => {
+      new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        resolve(entries[entries.length - 1]);
+      }).observe({ entryTypes: ['largest-contentful-paint'] });
+
+      // Resolve after 3 seconds if no LCP entry is found
+      setTimeout(() => resolve(undefined), 3000);
+    });
+  };
+
+  // Analyze system health
+  const analyzeSystemHealth = (currentMetrics: SystemMetrics): SystemMetrics['health'] => {
+    const issues: string[] = [];
+    const suggestions: string[] = [];
+    let score = 100;
+
+    // CPU analysis
+    if (currentMetrics.cpu.usage > PERFORMANCE_THRESHOLDS.cpu.critical) {
+      score -= 30;
+      issues.push('Critical CPU usage');
+      suggestions.push('Consider closing resource-intensive applications');
+    } else if (currentMetrics.cpu.usage > PERFORMANCE_THRESHOLDS.cpu.warning) {
+      score -= 15;
+      issues.push('High CPU usage');
+      suggestions.push('Monitor system processes for unusual activity');
+    }
+
+    // Memory analysis
+    if (currentMetrics.memory.percentage > PERFORMANCE_THRESHOLDS.memory.critical) {
+      score -= 30;
+      issues.push('Critical memory usage');
+      suggestions.push('Close unused applications to free up memory');
+    } else if (currentMetrics.memory.percentage > PERFORMANCE_THRESHOLDS.memory.warning) {
+      score -= 15;
+      issues.push('High memory usage');
+      suggestions.push('Consider freeing up memory by closing background applications');
+    }
+
+    // Performance analysis
+    if (currentMetrics.performance.fps < PERFORMANCE_THRESHOLDS.fps.critical) {
+      score -= 20;
+      issues.push('Very low frame rate');
+      suggestions.push('Disable animations or switch to power saver mode');
+    } else if (currentMetrics.performance.fps < PERFORMANCE_THRESHOLDS.fps.warning) {
+      score -= 10;
+      issues.push('Low frame rate');
+      suggestions.push('Consider reducing visual effects');
+    }
+
+    // Battery analysis
+    if (currentMetrics.battery && !currentMetrics.battery.charging && currentMetrics.battery.level < 20) {
+      score -= 10;
+      issues.push('Low battery');
+      suggestions.push('Connect to power source or enable power saver mode');
+    }
+
+    return {
+      score: Math.max(0, score),
+      issues,
+      suggestions,
+    };
+  };
+
+  // Update metrics with enhanced data
+  const updateMetrics = async () => {
+    try {
+      // Get memory info using Performance API
+      const memory = performance.memory || {
+        jsHeapSizeLimit: 0,
+        totalJSHeapSize: 0,
+        usedJSHeapSize: 0,
+      };
+      const totalMem = memory.totalJSHeapSize / (1024 * 1024);
+      const usedMem = memory.usedJSHeapSize / (1024 * 1024);
+      const memPercentage = (usedMem / totalMem) * 100;
+
+      // Get CPU usage using Performance API
+      const cpuUsage = await getCPUUsage();
+
+      // Get battery info
+      let batteryInfo: SystemMetrics['battery'] | undefined;
+
+      try {
+        const battery = await navigator.getBattery();
+        batteryInfo = {
+          level: battery.level * 100,
+          charging: battery.charging,
+          timeRemaining: battery.charging ? battery.chargingTime : battery.dischargingTime,
+        };
+      } catch {
+        console.log('Battery API not available');
+      }
+
+      // Get network info using Network Information API
+      const connection =
+        (navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
+      const networkInfo = {
+        downlink: connection?.downlink || 0,
+        uplink: connection?.uplink,
+        latency: connection?.rtt || 0,
+        type: connection?.type || 'unknown',
+        activeConnections: connection?.activeConnections,
+        bytesReceived: connection?.bytesReceived || 0,
+        bytesSent: connection?.bytesSent || 0,
+      };
+
+      // Get enhanced performance metrics
+      const performanceMetrics = await getPerformanceMetrics();
+
+      const metrics: SystemMetrics = {
+        cpu: { usage: cpuUsage, cores: [], temperature: undefined, frequency: undefined },
+        memory: {
+          used: Math.round(usedMem),
+          total: Math.round(totalMem),
+          percentage: Math.round(memPercentage),
+          heap: {
+            used: Math.round(usedMem),
+            total: Math.round(totalMem),
+            limit: Math.round(totalMem),
+          },
+        },
+        uptime: performance.now() / 1000,
+        battery: batteryInfo,
+        network: networkInfo,
+        performance: performanceMetrics as SystemMetrics['performance'],
+        health: { score: 0, issues: [], suggestions: [] },
+      };
+
+      // Analyze system health
+      metrics.health = analyzeSystemHealth(metrics);
+
+      // Check for alerts
+      checkPerformanceAlerts(metrics);
+
+      setMetrics(metrics);
+
+      // Update metrics history
+      const now = new Date().toLocaleTimeString();
+      setMetricsHistory((prev) => {
+        const timestamps = [...prev.timestamps, now].slice(-MAX_HISTORY_POINTS);
+        const cpu = [...prev.cpu, metrics.cpu.usage].slice(-MAX_HISTORY_POINTS);
+        const memory = [...prev.memory, metrics.memory.percentage].slice(-MAX_HISTORY_POINTS);
+        const battery = [...prev.battery, batteryInfo?.level || 0].slice(-MAX_HISTORY_POINTS);
+        const network = [...prev.network, networkInfo.downlink].slice(-MAX_HISTORY_POINTS);
+
+        return { timestamps, cpu, memory, battery, network };
+      });
+    } catch (error) {
+      console.error('Failed to update system metrics:', error);
+    }
+  };
+
+  // Get real CPU usage using Performance API
+  const getCPUUsage = async (): Promise<number> => {
+    try {
+      const t0 = performance.now();
+
+      // Create some actual work to measure and use the result
+      let result = 0;
+
+      for (let i = 0; i < 10000; i++) {
+        result += Math.random();
+      }
+
+      // Use result to prevent optimization
+      if (result < 0) {
+        console.log('Unexpected negative result');
+      }
+
+      const t1 = performance.now();
+      const timeTaken = t1 - t0;
+
+      /*
+       * Normalize to percentage (0-100)
+       * Lower time = higher CPU availability
+       */
+      const maxExpectedTime = 50; // baseline in ms
+      const cpuAvailability = Math.max(0, Math.min(100, ((maxExpectedTime - timeTaken) / maxExpectedTime) * 100));
+
+      return 100 - cpuAvailability; // Convert availability to usage
+    } catch (error) {
+      console.error('Failed to get CPU usage:', error);
+      return 0;
+    }
+  };
+
+  // Add network change listener
+  useEffect(() => {
+    const connection =
+      (navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
+
+    if (!connection) {
+      return;
+    }
+
+    const updateNetworkInfo = () => {
+      setMetrics((prev) => ({
+        ...prev,
+        network: {
+          downlink: connection.downlink || 0,
+          latency: connection.rtt || 0,
+          type: connection.type || 'unknown',
+          bytesReceived: connection.bytesReceived || 0,
+          bytesSent: connection.bytesSent || 0,
+        },
+      }));
+    };
+
+    connection.addEventListener('change', updateNetworkInfo);
+
+    // eslint-disable-next-line consistent-return
+    return () => connection.removeEventListener('change', updateNetworkInfo);
+  }, []);
+
+  // Remove all animation and process monitoring
+  useEffect(() => {
+    const metricsInterval = setInterval(
+      () => {
+        if (!energySaverMode) {
+          updateMetrics();
+        }
+      },
+      energySaverMode ? UPDATE_INTERVALS.energySaver.metrics : UPDATE_INTERVALS.normal.metrics,
+    );
+
+    return () => {
+      clearInterval(metricsInterval);
+    };
+  }, [energySaverMode]);
+
+  const getUsageColor = (usage: number): string => {
+    if (usage > 80) {
+      return 'text-red-500';
+    }
+
+    if (usage > 50) {
+      return 'text-yellow-500';
+    }
+
+    return 'text-gray-500';
+  };
+
+  const renderUsageGraph = (data: number[], label: string, color: string) => {
+    const chartData = {
+      labels: metricsHistory.timestamps,
+      datasets: [
+        {
+          label,
+          data,
+          borderColor: color,
+          fill: false,
+          tension: 0.4,
+        },
+      ],
+    };
+
+    const options = {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          beginAtZero: true,
+          max: 100,
+          grid: {
+            color: 'rgba(255, 255, 255, 0.1)',
+          },
+        },
+        x: {
+          grid: {
+            display: false,
+          },
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      animation: {
+        duration: 0,
+      } as const,
+    };
+
+    return (
+      <div className="h-32">
+        <Line data={chartData} options={options} />
+      </div>
+    );
+  };
+
+  useEffect((): (() => void) | undefined => {
+    if (!autoEnergySaver) {
+      // If auto mode is disabled, clear any forced energy saver state
+      setEnergySaverMode(false);
+      return undefined;
+    }
+
+    const checkBatteryStatus = async () => {
+      try {
+        const battery = await navigator.getBattery();
+        const shouldEnableSaver = !battery.charging && battery.level * 100 <= BATTERY_THRESHOLD;
+        setEnergySaverMode(shouldEnableSaver);
+      } catch {
+        console.log('Battery API not available');
+      }
+    };
+
+    checkBatteryStatus();
+
+    const batteryCheckInterval = setInterval(checkBatteryStatus, 60000);
+
+    return () => clearInterval(batteryCheckInterval);
+  }, [autoEnergySaver]);
+
+  // Check for performance alerts
+  const checkPerformanceAlerts = (currentMetrics: SystemMetrics) => {
+    const newAlerts: PerformanceAlert[] = [];
+
+    // CPU alert
+    if (currentMetrics.cpu.usage > PERFORMANCE_THRESHOLDS.cpu.critical) {
+      newAlerts.push({
+        type: 'error',
+        message: 'Critical CPU usage detected',
+        timestamp: Date.now(),
+        metric: 'cpu',
+        threshold: PERFORMANCE_THRESHOLDS.cpu.critical,
+        value: currentMetrics.cpu.usage,
+      });
+    }
+
+    // Memory alert
+    if (currentMetrics.memory.percentage > PERFORMANCE_THRESHOLDS.memory.critical) {
+      newAlerts.push({
+        type: 'error',
+        message: 'Critical memory usage detected',
+        timestamp: Date.now(),
+        metric: 'memory',
+        threshold: PERFORMANCE_THRESHOLDS.memory.critical,
+        value: currentMetrics.memory.percentage,
+      });
+    }
+
+    // Performance alert
+    if (currentMetrics.performance.fps < PERFORMANCE_THRESHOLDS.fps.critical) {
+      newAlerts.push({
+        type: 'warning',
+        message: 'Very low frame rate detected',
+        timestamp: Date.now(),
+        metric: 'fps',
+        threshold: PERFORMANCE_THRESHOLDS.fps.critical,
+        value: currentMetrics.performance.fps,
+      });
+    }
+
+    if (newAlerts.length > 0) {
+      setAlerts((prev) => [...prev, ...newAlerts]);
+      newAlerts.forEach((alert) => {
+        toast.warning(alert.message);
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Power Profile Selection */}
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-medium text-bolt-elements-textPrimary">Power Management</h3>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="autoEnergySaver"
+                checked={autoEnergySaver}
+                onChange={(e) => handleAutoEnergySaverChange(e.target.checked)}
+                className="form-checkbox h-4 w-4 text-purple-600 rounded border-gray-300 dark:border-gray-700"
+              />
+              <div className="i-ph:gauge-duotone w-4 h-4 text-bolt-elements-textSecondary" />
+              <label htmlFor="autoEnergySaver" className="text-sm text-bolt-elements-textSecondary">
+                Auto Energy Saver
+              </label>
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="energySaver"
+                checked={energySaverMode}
+                onChange={(e) => !autoEnergySaver && handleEnergySaverChange(e.target.checked)}
+                disabled={autoEnergySaver}
+                className="form-checkbox h-4 w-4 text-purple-600 rounded border-gray-300 dark:border-gray-700 disabled:opacity-50"
+              />
+              <div className="i-ph:leaf-duotone w-4 h-4 text-bolt-elements-textSecondary" />
+              <label
+                htmlFor="energySaver"
+                className={classNames('text-sm text-bolt-elements-textSecondary', { 'opacity-50': autoEnergySaver })}
+              >
+                Energy Saver
+                {energySaverMode && <span className="ml-2 text-xs text-bolt-elements-textSecondary">Active</span>}
+              </label>
+            </div>
+            <div className="relative">
+              <select
+                value={selectedProfile.name}
+                onChange={(e) => {
+                  const profile = POWER_PROFILES.find((p) => p.name === e.target.value);
+
+                  if (profile) {
+                    setSelectedProfile(profile);
+                    toast.success(`Switched to ${profile.name} power profile`);
+                  }
+                }}
+                className="pl-8 pr-8 py-1.5 rounded-md bg-bolt-background-secondary dark:bg-[#1E1E1E] border border-bolt-border dark:border-bolt-borderDark text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimaryDark hover:border-bolt-action-primary dark:hover:border-bolt-action-primary focus:outline-none focus:ring-1 focus:ring-bolt-action-primary appearance-none min-w-[160px] cursor-pointer transition-colors duration-150"
+                style={{ WebkitAppearance: 'none', MozAppearance: 'none' }}
+              >
+                {POWER_PROFILES.map((profile) => (
+                  <option
+                    key={profile.name}
+                    value={profile.name}
+                    className="py-2 px-3 bg-bolt-background-secondary dark:bg-[#1E1E1E] text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimaryDark hover:bg-bolt-background-tertiary dark:hover:bg-bolt-backgroundDark-tertiary cursor-pointer"
+                  >
+                    {profile.name}
+                  </option>
+                ))}
+              </select>
+              <div className="absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none">
+                <div
+                  className={classNames('w-4 h-4 text-bolt-elements-textSecondary', {
+                    'i-ph:lightning-fill text-yellow-500': selectedProfile.name === 'Performance',
+                    'i-ph:scales-fill text-blue-500': selectedProfile.name === 'Balanced',
+                    'i-ph:leaf-fill text-green-500': selectedProfile.name === 'Energy Saver',
+                  })}
+                />
+              </div>
+              <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
+                <div className="i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary opacity-75" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-sm text-bolt-elements-textSecondary">{selectedProfile.description}</div>
+      </div>
+
+      {/* System Health Score */}
+      <div className="flex flex-col gap-4">
+        <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Health</h3>
+        <div className="grid grid-cols-1 gap-4">
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-bolt-elements-textSecondary">Health Score</span>
+              <span
+                className={classNames('text-lg font-medium', {
+                  'text-green-500': metrics.health.score >= 80,
+                  'text-yellow-500': metrics.health.score >= 60 && metrics.health.score < 80,
+                  'text-red-500': metrics.health.score < 60,
+                })}
+              >
+                {metrics.health.score}%
+              </span>
+            </div>
+            {metrics.health.issues.length > 0 && (
+              <div className="mt-2">
+                <div className="text-sm font-medium text-bolt-elements-textSecondary mb-1">Issues:</div>
+                <ul className="text-sm text-bolt-elements-textSecondary space-y-1">
+                  {metrics.health.issues.map((issue, index) => (
+                    <li key={index} className="flex items-center gap-2">
+                      <div className="i-ph:warning-circle-fill text-yellow-500 w-4 h-4" />
+                      {issue}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {metrics.health.suggestions.length > 0 && (
+              <div className="mt-2">
+                <div className="text-sm font-medium text-bolt-elements-textSecondary mb-1">Suggestions:</div>
+                <ul className="text-sm text-bolt-elements-textSecondary space-y-1">
+                  {metrics.health.suggestions.map((suggestion, index) => (
+                    <li key={index} className="flex items-center gap-2">
+                      <div className="i-ph:lightbulb-fill text-purple-500 w-4 h-4" />
+                      {suggestion}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* System Metrics */}
+      <div className="flex flex-col gap-4">
+        <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Metrics</h3>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {/* CPU Usage */}
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-bolt-elements-textSecondary">CPU Usage</span>
+              <span className={classNames('text-sm font-medium', getUsageColor(metrics.cpu.usage))}>
+                {Math.round(metrics.cpu.usage)}%
+              </span>
+            </div>
+            {renderUsageGraph(metricsHistory.cpu, 'CPU', '#9333ea')}
+            {metrics.cpu.temperature && (
+              <div className="text-xs text-bolt-elements-textSecondary mt-2">
+                Temperature: {metrics.cpu.temperature}°C
+              </div>
+            )}
+            {metrics.cpu.frequency && (
+              <div className="text-xs text-bolt-elements-textSecondary">
+                Frequency: {(metrics.cpu.frequency / 1000).toFixed(1)} GHz
+              </div>
+            )}
+          </div>
+
+          {/* Memory Usage */}
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-bolt-elements-textSecondary">Memory Usage</span>
+              <span className={classNames('text-sm font-medium', getUsageColor(metrics.memory.percentage))}>
+                {Math.round(metrics.memory.percentage)}%
+              </span>
+            </div>
+            {renderUsageGraph(metricsHistory.memory, 'Memory', '#2563eb')}
+            <div className="text-xs text-bolt-elements-textSecondary mt-2">
+              Used: {formatBytes(metrics.memory.used)}
+            </div>
+            <div className="text-xs text-bolt-elements-textSecondary">Total: {formatBytes(metrics.memory.total)}</div>
+            <div className="text-xs text-bolt-elements-textSecondary">
+              Heap: {formatBytes(metrics.memory.heap.used)} / {formatBytes(metrics.memory.heap.total)}
+            </div>
+          </div>
+
+          {/* Performance */}
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-bolt-elements-textSecondary">Performance</span>
+              <span
+                className={classNames('text-sm font-medium', {
+                  'text-red-500': metrics.performance.fps < PERFORMANCE_THRESHOLDS.fps.critical,
+                  'text-yellow-500': metrics.performance.fps < PERFORMANCE_THRESHOLDS.fps.warning,
+                  'text-green-500': metrics.performance.fps >= PERFORMANCE_THRESHOLDS.fps.warning,
+                })}
+              >
+                {Math.round(metrics.performance.fps)} FPS
+              </span>
+            </div>
+            <div className="text-xs text-bolt-elements-textSecondary mt-2">
+              Page Load: {(metrics.performance.pageLoad / 1000).toFixed(2)}s
+            </div>
+            <div className="text-xs text-bolt-elements-textSecondary">
+              DOM Ready: {(metrics.performance.domReady / 1000).toFixed(2)}s
+            </div>
+            <div className="text-xs text-bolt-elements-textSecondary">
+              TTFB: {(metrics.performance.timing.ttfb / 1000).toFixed(2)}s
+            </div>
+            <div className="text-xs text-bolt-elements-textSecondary">
+              Resources: {metrics.performance.resources.total} ({formatBytes(metrics.performance.resources.size)})
+            </div>
+          </div>
+
+          {/* Network */}
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-bolt-elements-textSecondary">Network</span>
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                {metrics.network.downlink.toFixed(1)} Mbps
+              </span>
+            </div>
+            {renderUsageGraph(metricsHistory.network, 'Network', '#f59e0b')}
+            <div className="text-xs text-bolt-elements-textSecondary mt-2">Type: {metrics.network.type}</div>
+            <div className="text-xs text-bolt-elements-textSecondary">Latency: {metrics.network.latency}ms</div>
+            <div className="text-xs text-bolt-elements-textSecondary">
+              Received: {formatBytes(metrics.network.bytesReceived)}
+            </div>
+            <div className="text-xs text-bolt-elements-textSecondary">
+              Sent: {formatBytes(metrics.network.bytesSent)}
+            </div>
+          </div>
+        </div>
+
+        {/* Battery Section */}
+        {metrics.battery && (
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-bolt-elements-textSecondary">Battery</span>
+              <div className="flex items-center gap-2">
+                {metrics.battery.charging && <div className="i-ph:lightning-fill w-4 h-4 text-bolt-action-primary" />}
+                <span
+                  className={classNames(
+                    'text-sm font-medium',
+                    metrics.battery.level > 20 ? 'text-bolt-elements-textPrimary' : 'text-red-500',
+                  )}
+                >
+                  {Math.round(metrics.battery.level)}%
+                </span>
+              </div>
+            </div>
+            {renderUsageGraph(metricsHistory.battery, 'Battery', '#22c55e')}
+            {metrics.battery.timeRemaining && (
+              <div className="text-xs text-bolt-elements-textSecondary mt-2">
+                {metrics.battery.charging ? 'Time to full: ' : 'Time remaining: '}
+                {formatTime(metrics.battery.timeRemaining)}
+              </div>
+            )}
+            {metrics.battery.temperature && (
+              <div className="text-xs text-bolt-elements-textSecondary">
+                Temperature: {metrics.battery.temperature}°C
+              </div>
+            )}
+            {metrics.battery.cycles && (
+              <div className="text-xs text-bolt-elements-textSecondary">Charge cycles: {metrics.battery.cycles}</div>
+            )}
+            {metrics.battery.health && (
+              <div className="text-xs text-bolt-elements-textSecondary">Battery health: {metrics.battery.health}%</div>
+            )}
+          </div>
+        )}
+
+        {/* Performance Alerts */}
+        {alerts.length > 0 && (
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Recent Alerts</span>
+              <button
+                onClick={() => setAlerts([])}
+                className="text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+              >
+                Clear All
+              </button>
+            </div>
+            <div className="space-y-2">
+              {alerts.slice(-5).map((alert, index) => (
+                <div
+                  key={index}
+                  className={classNames('flex items-center gap-2 text-sm', {
+                    'text-red-500': alert.type === 'error',
+                    'text-yellow-500': alert.type === 'warning',
+                    'text-blue-500': alert.type === 'info',
+                  })}
+                >
+                  <div
+                    className={classNames('w-4 h-4', {
+                      'i-ph:warning-circle-fill': alert.type === 'warning',
+                      'i-ph:x-circle-fill': alert.type === 'error',
+                      'i-ph:info-fill': alert.type === 'info',
+                    })}
+                  />
+                  <span>{alert.message}</span>
+                  <span className="text-xs text-bolt-elements-textSecondary ml-auto">
+                    {new Date(alert.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Energy Savings */}
+        {energySaverMode && (
+          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
+            <h4 className="text-sm font-medium text-bolt-elements-textPrimary">Energy Savings</h4>
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <span className="text-sm text-bolt-elements-textSecondary">Updates Reduced</span>
+                <p className="text-lg font-medium text-bolt-elements-textPrimary">{energySavings.updatesReduced}</p>
+              </div>
+              <div>
+                <span className="text-sm text-bolt-elements-textSecondary">Time in Saver Mode</span>
+                <p className="text-lg font-medium text-bolt-elements-textPrimary">
+                  {Math.floor(energySavings.timeInSaverMode / 60)}m {Math.floor(energySavings.timeInSaverMode % 60)}s
+                </p>
+              </div>
+              <div>
+                <span className="text-sm text-bolt-elements-textSecondary">Energy Saved</span>
+                <p className="text-lg font-medium text-bolt-elements-textPrimary">
+                  {energySavings.estimatedEnergySaved.toFixed(2)} mWh
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(TaskManagerTab);
+
+// Helper function to format bytes
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) {
+    return '0 B';
+  }
+
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+};
+
+// Helper function to format time
+const formatTime = (seconds: number): string => {
+  if (!isFinite(seconds) || seconds === 0) {
+    return 'Unknown';
+  }
+
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  }
+
+  return `${minutes}m`;
+};

app/components/@settings/tabs/update/UpdateTab.tsx

@@ -0,0 +1,628 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { logStore } from '~/lib/stores/logs';
+import { toast } from 'react-toastify';
+import { Dialog, DialogRoot, DialogTitle, DialogDescription, DialogButton } from '~/components/ui/Dialog';
+import { classNames } from '~/utils/classNames';
+import { Markdown } from '~/components/chat/Markdown';
+
+interface UpdateProgress {
+  stage: 'fetch' | 'pull' | 'install' | 'build' | 'complete';
+  message: string;
+  progress?: number;
+  error?: string;
+  details?: {
+    changedFiles?: string[];
+    additions?: number;
+    deletions?: number;
+    commitMessages?: string[];
+    totalSize?: string;
+    currentCommit?: string;
+    remoteCommit?: string;
+    updateReady?: boolean;
+    changelog?: string;
+    compareUrl?: string;
+  };
+}
+
+interface UpdateSettings {
+  autoUpdate: boolean;
+  notifyInApp: boolean;
+  checkInterval: number;
+}
+
+const ProgressBar = ({ progress }: { progress: number }) => (
+  <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+    <motion.div
+      className="h-full bg-blue-500"
+      initial={{ width: 0 }}
+      animate={{ width: `${progress}%` }}
+      transition={{ duration: 0.3 }}
+    />
+  </div>
+);
+
+const UpdateProgressDisplay = ({ progress }: { progress: UpdateProgress }) => (
+  <div className="mt-4 space-y-2">
+    <div className="flex justify-between items-center">
+      <span className="text-sm font-medium">{progress.message}</span>
+      <span className="text-sm text-gray-500">{progress.progress}%</span>
+    </div>
+    <ProgressBar progress={progress.progress || 0} />
+    {progress.details && (
+      <div className="mt-2 text-sm text-gray-600">
+        {progress.details.changedFiles && progress.details.changedFiles.length > 0 && (
+          <div className="mt-4">
+            <div className="font-medium mb-2">Changed Files:</div>
+            <div className="space-y-2">
+              {/* Group files by type */}
+              {['Modified', 'Added', 'Deleted'].map((type) => {
+                const filesOfType = progress.details?.changedFiles?.filter((file) => file.startsWith(type)) || [];
+
+                if (filesOfType.length === 0) {
+                  return null;
+                }
+
+                return (
+                  <div key={type} className="space-y-1">
+                    <div
+                      className={classNames('text-sm font-medium', {
+                        'text-blue-500': type === 'Modified',
+                        'text-green-500': type === 'Added',
+                        'text-red-500': type === 'Deleted',
+                      })}
+                    >
+                      {type} ({filesOfType.length})
+                    </div>
+                    <div className="pl-4 space-y-1">
+                      {filesOfType.map((file, index) => {
+                        const fileName = file.split(': ')[1];
+                        return (
+                          <div key={index} className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
+                            <div
+                              className={classNames('w-4 h-4', {
+                                'i-ph:pencil-simple': type === 'Modified',
+                                'i-ph:plus': type === 'Added',
+                                'i-ph:trash': type === 'Deleted',
+                                'text-blue-500': type === 'Modified',
+                                'text-green-500': type === 'Added',
+                                'text-red-500': type === 'Deleted',
+                              })}
+                            />
+                            <span className="font-mono text-xs">{fileName}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        {progress.details.totalSize && <div className="mt-1">Total size: {progress.details.totalSize}</div>}
+        {progress.details.additions !== undefined && progress.details.deletions !== undefined && (
+          <div className="mt-1">
+            Changes: <span className="text-green-600">+{progress.details.additions}</span>{' '}
+            <span className="text-red-600">-{progress.details.deletions}</span>
+          </div>
+        )}
+        {progress.details.currentCommit && progress.details.remoteCommit && (
+          <div className="mt-1">
+            Updating from {progress.details.currentCommit} to {progress.details.remoteCommit}
+          </div>
+        )}
+      </div>
+    )}
+  </div>
+);
+
+const UpdateTab = () => {
+  const { isLatestBranch } = useSettings();
+  const [isChecking, setIsChecking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [updateSettings, setUpdateSettings] = useState<UpdateSettings>(() => {
+    const stored = localStorage.getItem('update_settings');
+    return stored
+      ? JSON.parse(stored)
+      : {
+          autoUpdate: false,
+          notifyInApp: true,
+          checkInterval: 24,
+        };
+  });
+  const [showUpdateDialog, setShowUpdateDialog] = useState(false);
+  const [updateProgress, setUpdateProgress] = useState<UpdateProgress | null>(null);
+
+  useEffect(() => {
+    localStorage.setItem('update_settings', JSON.stringify(updateSettings));
+  }, [updateSettings]);
+
+  const checkForUpdates = async () => {
+    console.log('Starting update check...');
+    setIsChecking(true);
+    setError(null);
+    setUpdateProgress(null);
+
+    try {
+      const branchToCheck = isLatestBranch ? 'main' : 'stable';
+
+      // Start the update check with streaming progress
+      const response = await fetch('/api/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          branch: branchToCheck,
+          autoUpdate: updateSettings.autoUpdate,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Update check failed: ${response.statusText}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('No response stream available');
+      }
+
+      // Read the stream
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        // Convert the chunk to text and parse the JSON
+        const chunk = new TextDecoder().decode(value);
+        const lines = chunk.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          try {
+            const progress = JSON.parse(line) as UpdateProgress;
+            setUpdateProgress(progress);
+
+            if (progress.error) {
+              setError(progress.error);
+            }
+
+            // If we're done, update the UI accordingly
+            if (progress.stage === 'complete') {
+              setIsChecking(false);
+
+              if (!progress.error) {
+                // Update check completed
+                toast.success('Update check completed');
+
+                // Show update dialog only if there are changes and auto-update is disabled
+                if (progress.details?.changedFiles?.length && progress.details.updateReady) {
+                  setShowUpdateDialog(true);
+                }
+              }
+            }
+          } catch (e) {
+            console.error('Error parsing progress update:', e);
+          }
+        }
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Unknown error occurred');
+      logStore.logWarning('Update Check Failed', {
+        type: 'update',
+        message: error instanceof Error ? error.message : 'Unknown error occurred',
+      });
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  const handleUpdate = async () => {
+    setShowUpdateDialog(false);
+
+    try {
+      const branchToCheck = isLatestBranch ? 'main' : 'stable';
+
+      // Start the update with autoUpdate set to true to force the update
+      const response = await fetch('/api/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          branch: branchToCheck,
+          autoUpdate: true,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Update failed: ${response.statusText}`);
+      }
+
+      // Handle the update progress stream
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('No response stream available');
+      }
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const chunk = new TextDecoder().decode(value);
+        const lines = chunk.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          try {
+            const progress = JSON.parse(line) as UpdateProgress;
+            setUpdateProgress(progress);
+
+            if (progress.error) {
+              setError(progress.error);
+              toast.error('Update failed');
+            }
+
+            if (progress.stage === 'complete' && !progress.error) {
+              toast.success('Update completed successfully');
+            }
+          } catch (e) {
+            console.error('Error parsing update progress:', e);
+          }
+        }
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Unknown error occurred');
+      toast.error('Update failed');
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <motion.div
+        className="flex items-center gap-3"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="i-ph:arrow-circle-up text-xl text-purple-500" />
+        <div>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Updates</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">Check for and manage application updates</p>
+        </div>
+      </motion.div>
+
+      {/* Update Settings Card */}
+      <motion.div
+        className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.1 }}
+      >
+        <div className="flex items-center gap-3 mb-6">
+          <div className="i-ph:gear text-purple-500 w-5 h-5" />
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Settings</h3>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-bolt-elements-textPrimary">Automatic Updates</span>
+              <p className="text-xs text-bolt-elements-textSecondary">
+                Automatically check and apply updates when available
+              </p>
+            </div>
+            <button
+              onClick={() => setUpdateSettings((prev) => ({ ...prev, autoUpdate: !prev.autoUpdate }))}
+              className={classNames(
+                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+                updateSettings.autoUpdate ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
+              )}
+            >
+              <span
+                className={classNames(
+                  'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
+                  updateSettings.autoUpdate ? 'translate-x-6' : 'translate-x-1',
+                )}
+              />
+            </button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-bolt-elements-textPrimary">In-App Notifications</span>
+              <p className="text-xs text-bolt-elements-textSecondary">Show notifications when updates are available</p>
+            </div>
+            <button
+              onClick={() => setUpdateSettings((prev) => ({ ...prev, notifyInApp: !prev.notifyInApp }))}
+              className={classNames(
+                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+                updateSettings.notifyInApp ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
+              )}
+            >
+              <span
+                className={classNames(
+                  'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
+                  updateSettings.notifyInApp ? 'translate-x-6' : 'translate-x-1',
+                )}
+              />
+            </button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-bolt-elements-textPrimary">Check Interval</span>
+              <p className="text-xs text-bolt-elements-textSecondary">How often to check for updates</p>
+            </div>
+            <select
+              value={updateSettings.checkInterval}
+              onChange={(e) => setUpdateSettings((prev) => ({ ...prev, checkInterval: Number(e.target.value) }))}
+              className={classNames(
+                'px-3 py-2 rounded-lg text-sm',
+                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'text-bolt-elements-textPrimary',
+                'hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
+                'transition-colors duration-200',
+              )}
+            >
+              <option value="6">6 hours</option>
+              <option value="12">12 hours</option>
+              <option value="24">24 hours</option>
+              <option value="48">48 hours</option>
+            </select>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Update Status Card */}
+      <motion.div
+        className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.2 }}
+      >
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="i-ph:arrows-clockwise text-purple-500 w-5 h-5" />
+            <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Status</h3>
+          </div>
+          <div className="flex items-center gap-2">
+            {updateProgress?.details?.updateReady && !updateSettings.autoUpdate && (
+              <button
+                onClick={handleUpdate}
+                className={classNames(
+                  'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
+                  'bg-purple-500 text-white',
+                  'hover:bg-purple-600',
+                  'transition-colors duration-200',
+                )}
+              >
+                <div className="i-ph:arrow-circle-up w-4 h-4" />
+                Update Now
+              </button>
+            )}
+            <button
+              onClick={() => {
+                setError(null);
+                checkForUpdates();
+              }}
+              className={classNames(
+                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
+                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                'hover:bg-purple-500/10 hover:text-purple-500',
+                'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+                'text-bolt-elements-textPrimary',
+                'transition-colors duration-200',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+              disabled={isChecking}
+            >
+              {isChecking ? (
+                <div className="flex items-center gap-2">
+                  <motion.div
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+                    className="i-ph:arrows-clockwise w-4 h-4"
+                  />
+                  Checking...
+                </div>
+              ) : (
+                <>
+                  <div className="i-ph:arrows-clockwise w-4 h-4" />
+                  Check for Updates
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Show progress information */}
+        {updateProgress && <UpdateProgressDisplay progress={updateProgress} />}
+
+        {error && <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">{error}</div>}
+
+        {/* Show update source information */}
+        {updateProgress?.details?.currentCommit && updateProgress?.details?.remoteCommit && (
+          <div className="mt-4 text-sm text-bolt-elements-textSecondary">
+            <div className="flex items-center justify-between">
+              <div>
+                <p>
+                  Updates are fetched from: <span className="font-mono">stackblitz-labs/bolt.diy</span> (
+                  {isLatestBranch ? 'main' : 'stable'} branch)
+                </p>
+                <p className="mt-1">
+                  Current version: <span className="font-mono">{updateProgress.details.currentCommit}</span>
+                  <span className="mx-2">→</span>
+                  Latest version: <span className="font-mono">{updateProgress.details.remoteCommit}</span>
+                </p>
+              </div>
+              {updateProgress?.details?.compareUrl && (
+                <a
+                  href={updateProgress.details.compareUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={classNames(
+                    'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
+                    'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                    'hover:bg-purple-500/10 hover:text-purple-500',
+                    'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+                    'text-bolt-elements-textPrimary',
+                    'transition-colors duration-200',
+                    'w-fit',
+                  )}
+                >
+                  <div className="i-ph:github-logo w-4 h-4" />
+                  View Changes on GitHub
+                </a>
+              )}
+            </div>
+            {updateProgress?.details?.additions !== undefined && updateProgress?.details?.deletions !== undefined && (
+              <div className="mt-2 flex items-center gap-2">
+                <div className="i-ph:git-diff text-purple-500 w-4 h-4" />
+                Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
+                <span className="text-red-600">-{updateProgress.details.deletions}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Add this before the changed files section */}
+        {updateProgress?.details?.changelog && (
+          <div className="mb-6">
+            <div className="flex items-center gap-2 mb-2">
+              <div className="i-ph:scroll text-purple-500 w-5 h-5" />
+              <p className="font-medium">Changelog</p>
+            </div>
+            <div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-4 overflow-auto max-h-[300px]">
+              <div className="prose dark:prose-invert prose-sm max-w-none">
+                <Markdown>{updateProgress.details.changelog}</Markdown>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Add this in the update status card, after the commit info */}
+        {updateProgress?.details?.compareUrl && (
+          <div className="mt-4">
+            <a
+              href={updateProgress.details.compareUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={classNames(
+                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
+                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                'hover:bg-purple-500/10 hover:text-purple-500',
+                'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+                'text-bolt-elements-textPrimary',
+                'transition-colors duration-200',
+                'w-fit',
+              )}
+            >
+              <div className="i-ph:github-logo w-4 h-4" />
+              View Changes on GitHub
+            </a>
+          </div>
+        )}
+
+        {updateProgress?.details?.commitMessages && updateProgress.details.commitMessages.length > 0 && (
+          <div className="mb-6">
+            <p className="font-medium mb-2">Changes in this Update:</p>
+            <div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-4 overflow-auto max-h-[400px]">
+              <div className="prose dark:prose-invert prose-sm max-w-none">
+                {updateProgress.details.commitMessages.map((section, index) => (
+                  <Markdown key={index}>{section}</Markdown>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </motion.div>
+
+      {/* Update dialog */}
+      <DialogRoot open={showUpdateDialog} onOpenChange={setShowUpdateDialog}>
+        <Dialog>
+          <DialogTitle>Update Available</DialogTitle>
+          <DialogDescription>
+            <div className="mt-4">
+              <p className="text-sm text-bolt-elements-textSecondary mb-4">
+                A new version is available from <span className="font-mono">stackblitz-labs/bolt.diy</span> (
+                {isLatestBranch ? 'main' : 'stable'} branch)
+              </p>
+
+              {updateProgress?.details?.compareUrl && (
+                <div className="mb-6">
+                  <a
+                    href={updateProgress.details.compareUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={classNames(
+                      'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
+                      'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                      'hover:bg-purple-500/10 hover:text-purple-500',
+                      'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+                      'text-bolt-elements-textPrimary',
+                      'transition-colors duration-200',
+                      'w-fit',
+                    )}
+                  >
+                    <div className="i-ph:github-logo w-4 h-4" />
+                    View Changes on GitHub
+                  </a>
+                </div>
+              )}
+
+              {updateProgress?.details?.commitMessages && updateProgress.details.commitMessages.length > 0 && (
+                <div className="mb-6">
+                  <p className="font-medium mb-2">Commit Messages:</p>
+                  <div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-3 space-y-2">
+                    {updateProgress.details.commitMessages.map((msg, index) => (
+                      <div key={index} className="text-sm text-bolt-elements-textSecondary flex items-start gap-2">
+                        <div className="i-ph:git-commit text-purple-500 w-4 h-4 mt-0.5 flex-shrink-0" />
+                        <span>{msg}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {updateProgress?.details?.totalSize && (
+                <div className="flex items-center gap-4 text-sm text-bolt-elements-textSecondary">
+                  <div className="flex items-center gap-2">
+                    <div className="i-ph:file text-purple-500 w-4 h-4" />
+                    Total size: {updateProgress.details.totalSize}
+                  </div>
+                  {updateProgress?.details?.additions !== undefined &&
+                    updateProgress?.details?.deletions !== undefined && (
+                      <div className="flex items-center gap-2">
+                        <div className="i-ph:git-diff text-purple-500 w-4 h-4" />
+                        Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
+                        <span className="text-red-600">-{updateProgress.details.deletions}</span>
+                      </div>
+                    )}
+                </div>
+              )}
+            </div>
+          </DialogDescription>
+          <div className="flex justify-end gap-2 mt-6">
+            <DialogButton type="secondary" onClick={() => setShowUpdateDialog(false)}>
+              Cancel
+            </DialogButton>
+            <DialogButton type="primary" onClick={handleUpdate}>
+              Update Now
+            </DialogButton>
+          </div>
+        </Dialog>
+      </DialogRoot>
+    </div>
+  );
+};
+
+export default UpdateTab;

app/components/@settings/utils/animations.ts

@@ -0,0 +1,41 @@
+import type { Variants } from 'framer-motion';
+
+export const fadeIn: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export const slideIn: Variants = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+};
+
+export const scaleIn: Variants = {
+  initial: { opacity: 0, scale: 0.8 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.8 },
+};
+
+export const tabAnimation: Variants = {
+  initial: { opacity: 0, scale: 0.8, y: 20 },
+  animate: { opacity: 1, scale: 1, y: 0 },
+  exit: { opacity: 0, scale: 0.8, y: -20 },
+};
+
+export const overlayAnimation: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export const modalAnimation: Variants = {
+  initial: { opacity: 0, scale: 0.95, y: 20 },
+  animate: { opacity: 1, scale: 1, y: 0 },
+  exit: { opacity: 0, scale: 0.95, y: 20 },
+};
+
+export const transition = {
+  duration: 0.2,
+};

app/components/@settings/utils/tab-helpers.ts

@@ -0,0 +1,89 @@
+import type { TabType, TabVisibilityConfig } from '~/components/@settings/core/types';
+import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
+
+export const getVisibleTabs = (
+  tabConfiguration: { userTabs: TabVisibilityConfig[]; developerTabs?: TabVisibilityConfig[] },
+  isDeveloperMode: boolean,
+  notificationsEnabled: boolean,
+): TabVisibilityConfig[] => {
+  if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
+    console.warn('Invalid tab configuration, using defaults');
+    return DEFAULT_TAB_CONFIG as TabVisibilityConfig[];
+  }
+
+  // In developer mode, show ALL tabs without restrictions
+  if (isDeveloperMode) {
+    // Combine all unique tabs from both user and developer configurations
+    const allTabs = new Set([
+      ...DEFAULT_TAB_CONFIG.map((tab) => tab.id),
+      ...tabConfiguration.userTabs.map((tab) => tab.id),
+      ...(tabConfiguration.developerTabs || []).map((tab) => tab.id),
+      'task-manager' as TabType, // Always include task-manager in developer mode
+    ]);
+
+    // Create a complete tab list with all tabs visible
+    const devTabs = Array.from(allTabs).map((tabId) => {
+      // Try to find existing configuration for this tab
+      const existingTab =
+        tabConfiguration.developerTabs?.find((t) => t.id === tabId) ||
+        tabConfiguration.userTabs?.find((t) => t.id === tabId) ||
+        DEFAULT_TAB_CONFIG.find((t) => t.id === tabId);
+
+      return {
+        id: tabId as TabType,
+        visible: true,
+        window: 'developer' as const,
+        order: existingTab?.order || DEFAULT_TAB_CONFIG.findIndex((t) => t.id === tabId),
+      } as TabVisibilityConfig;
+    });
+
+    return devTabs.sort((a, b) => a.order - b.order);
+  }
+
+  // In user mode, only show visible user tabs
+  return tabConfiguration.userTabs
+    .filter((tab) => {
+      if (!tab || typeof tab.id !== 'string') {
+        console.warn('Invalid tab entry:', tab);
+        return false;
+      }
+
+      // Hide notifications tab if notifications are disabled
+      if (tab.id === 'notifications' && !notificationsEnabled) {
+        return false;
+      }
+
+      // Always show task-manager in user mode if it's configured as visible
+      if (tab.id === 'task-manager') {
+        return tab.visible;
+      }
+
+      // Only show tabs that are explicitly visible and assigned to the user window
+      return tab.visible && tab.window === 'user';
+    })
+    .sort((a, b) => a.order - b.order);
+};
+
+export const reorderTabs = (
+  tabs: TabVisibilityConfig[],
+  startIndex: number,
+  endIndex: number,
+): TabVisibilityConfig[] => {
+  const result = Array.from(tabs);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  // Update order property
+  return result.map((tab, index) => ({
+    ...tab,
+    order: index,
+  }));
+};
+
+export const resetToDefaultConfig = (isDeveloperMode: boolean): TabVisibilityConfig[] => {
+  return DEFAULT_TAB_CONFIG.map((tab) => ({
+    ...tab,
+    visible: isDeveloperMode ? true : tab.window === 'user',
+    window: isDeveloperMode ? 'developer' : tab.window,
+  })) as TabVisibilityConfig[];
+};

app/components/chat/APIKeyManager.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { IconButton } from '~/components/ui/IconButton';
+import { Switch } from '~/components/ui/Switch';
+import type { ProviderInfo } from '~/types/model';
+import Cookies from 'js-cookie';
+interface APIKeyManagerProps {
+  provider: ProviderInfo;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+  getApiKeyLink?: string;
+  labelForGetApiKey?: string;
+}
+
+// cache which stores whether the provider's API key is set via environment variable
+const providerEnvKeyStatusCache: Record<string, boolean> = {};
+
+const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};
+
+export function getApiKeysFromCookies() {
+  const storedApiKeys = Cookies.get('apiKeys');
+  let parsedKeys: Record<string, string> = {};
+
+  if (storedApiKeys) {
+    parsedKeys = apiKeyMemoizeCache[storedApiKeys];
+
+    if (!parsedKeys) {
+      parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys);
+    }
+  }
+
+  return parsedKeys;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempKey, setTempKey] = useState(apiKey);
+  const [isPromptCachingEnabled, setIsPromptCachingEnabled] = useState(() => {
+    // Read initial state from localStorage, defaulting to true
+    const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
+    return savedState !== null ? JSON.parse(savedState) : true;
+  });
+  const [isEnvKeySet, setIsEnvKeySet] = useState(false);
+
+  useEffect(() => {
+    // Update localStorage whenever the prompt caching state changes
+    localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
+  }, [isPromptCachingEnabled]);
+
+  // Reset states and load saved key when provider changes
+  useEffect(() => {
+    // Load saved API key from cookies for this provider
+    const savedKeys = getApiKeysFromCookies();
+    const savedKey = savedKeys[provider.name] || '';
+
+    setTempKey(savedKey);
+    setApiKey(savedKey);
+    setIsEditing(false);
+  }, [provider.name]);
+
+  const checkEnvApiKey = useCallback(async () => {
+    // Check cache first
+    if (providerEnvKeyStatusCache[provider.name] !== undefined) {
+      setIsEnvKeySet(providerEnvKeyStatusCache[provider.name]);
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/check-env-key?provider=${encodeURIComponent(provider.name)}`);
+      const data = await response.json();
+      const isSet = (data as { isSet: boolean }).isSet;
+
+      // Cache the result
+      providerEnvKeyStatusCache[provider.name] = isSet;
+      setIsEnvKeySet(isSet);
+    } catch (error) {
+      console.error('Failed to check environment API key:', error);
+      setIsEnvKeySet(false);
+    }
+  }, [provider.name]);
+
+  useEffect(() => {
+    checkEnvApiKey();
+  }, [checkEnvApiKey]);
+
+  const handleSave = () => {
+    // Save to parent state
+    setApiKey(tempKey);
+
+    // Save to cookies
+    const currentKeys = getApiKeysFromCookies();
+    const newKeys = { ...currentKeys, [provider.name]: tempKey };
+    Cookies.set('apiKeys', JSON.stringify(newKeys));
+
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="flex flex-col items-left justify-between py-3 px-1">
+      <div className="flex">
+        <div className="flex items-center gap-2 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
+            {!isEditing && (
+              <div className="flex items-center gap-2">
+                {apiKey ? (
+                  <>
+                    <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                    <span className="text-xs text-green-500">Set via UI</span>
+                  </>
+                ) : isEnvKeySet ? (
+                  <>
+                    <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                    <span className="text-xs text-green-500">Set via environment variable</span>
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:x-circle-fill text-red-500 w-4 h-4" />
+                    <span className="text-xs text-red-500">Not Set (Please set via UI or ENV_VAR)</span>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {isEditing ? (
+            <div className="flex items-center gap-2">
+              <input
+                type="password"
+                value={tempKey}
+                placeholder="Enter API Key"
+                onChange={(e) => setTempKey(e.target.value)}
+                className="w-[300px] px-3 py-1.5 text-sm rounded border border-bolt-elements-borderColor 
+                          bg-bolt-elements-prompt-background text-bolt-elements-textPrimary 
+                          focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
+              />
+              <IconButton
+                onClick={handleSave}
+                title="Save API Key"
+                className="bg-green-500/10 hover:bg-green-500/20 text-green-500"
+              >
+                <div className="i-ph:check w-4 h-4" />
+              </IconButton>
+              <IconButton
+                onClick={() => setIsEditing(false)}
+                title="Cancel"
+                className="bg-red-500/10 hover:bg-red-500/20 text-red-500"
+              >
+                <div className="i-ph:x w-4 h-4" />
+              </IconButton>
+            </div>
+          ) : (
+            <>
+              {
+                <IconButton
+                  onClick={() => setIsEditing(true)}
+                  title="Edit API Key"
+                  className="bg-blue-500/10 hover:bg-blue-500/20 text-blue-500"
+                >
+                  <div className="i-ph:pencil-simple w-4 h-4" />
+                </IconButton>
+              }
+              {provider?.getApiKeyLink && !apiKey && (
+                <IconButton
+                  onClick={() => window.open(provider?.getApiKeyLink)}
+                  title="Get API Key"
+                  className="bg-purple-500/10 hover:bg-purple-500/20 text-purple-500 flex items-center gap-2"
+                >
+                  <span className="text-xs whitespace-nowrap">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+                  <div className={`${provider?.icon || 'i-ph:key'} w-4 h-4`} />
+                </IconButton>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {provider?.name === 'Anthropic' && (
+        <div className="border-t mt-4 pt-4 pb-2 -mt-4">
+          <div className="flex items-center space-x-2">
+            <Switch checked={isPromptCachingEnabled} onCheckedChange={setIsPromptCachingEnabled} />
+            <label htmlFor="prompt-caching" className="text-sm text-bolt-elements-textSecondary">
+              Enable Prompt Caching
+            </label>
+          </div>
+          <p className="text-xs text-bolt-elements-textTertiary mt-2">
+            When enabled, generates 10x cheaper responses if re-prompted within 5 mins (Recommended)
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};