fixes

app/components/settings/CHANGELOG.md

@@ -0,0 +1,189 @@
+# Settings Components Changelog
+
+All notable changes to the settings components will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- New Settings Dashboard with improved UI/UX
+- Tab management system with drag-and-drop reordering
+- Enhanced developer tools window
+- Bulk update functionality for Ollama models
+- System performance monitoring in Debug tab
+- Data import/export functionality
+- Enhanced event logging system
+- Profile customization options
+- Auto energy saver mode in TaskManager
+- Energy savings tracking and statistics
+- Persistent settings storage using localStorage
+
+### Changed
+
+- Removed green status indicators from TaskManagerTab for cleaner UI
+- Changed connection status indicators to use neutral colors
+- Updated energy saver mode indicator to use neutral colors
+- Simplified process status display in TaskManager
+- Improved tab organization with window-specific grouping
+- Enhanced settings persistence with better localStorage handling
+
+### Fixed
+
+- Status indicator consistency across dark/light themes
+- Process status updates during energy saver mode
+- UI rendering issues in dark mode
+- Tab visibility state management
+- Settings import/export reliability
+
+## [1.0.0] - Initial Release
+
+### Added
+
+#### User Window Components
+
+- **Profile Tab**
+
+  - User profile and account settings management
+  - Avatar customization
+  - Account preferences
+
+- **Settings Tab**
+
+  - Application preferences configuration
+  - UI behavior customization
+  - General settings management
+
+- **Notifications Tab**
+
+  - Real-time notification center
+  - Unread notification tracking
+  - Notification preferences
+  - Support for different notification types
+  - Integration with logStore
+
+- **Cloud Providers Tab**
+
+  - Cloud-based AI provider configuration
+  - API key management
+  - Cloud model selection
+  - Provider-specific settings
+  - Status monitoring
+
+- **Local Providers Tab**
+
+  - Local AI model management
+  - Ollama integration and model updates
+  - LM Studio configuration
+  - Local inference settings
+  - Model download and updates
+
+- **Task Manager Tab**
+
+  - System resource monitoring
+  - Process management
+  - Performance metrics and graphs
+  - Battery status monitoring
+  - Energy saving features
+  - Alert configurations
+
+- **Connections Tab**
+
+  - Network status monitoring
+  - GitHub integration
+  - Connection health metrics
+  - Secure token storage
+  - Auto-reconnect settings
+
+- **Debug Tab**
+
+  - System diagnostics
+  - Performance monitoring
+  - Error tracking
+  - Provider status checks
+
+- **Event Logs Tab**
+
+  - Comprehensive system logs
+  - Filtered log views
+  - Log management tools
+  - Error tracking
+  - Performance metrics
+
+- **Update Tab**
+  - Version management
+  - Update notifications
+  - Release notes
+  - Auto-update configuration
+
+### Technical Enhancements
+
+#### State Management
+
+- Implemented Nano Stores for efficient state handling
+- Added persistent settings storage
+- Real-time state synchronization
+- Provider state management
+
+#### Performance
+
+- Lazy loading of tab contents
+- Efficient DOM updates
+- Optimized animations
+- Resource monitoring
+
+#### Accessibility
+
+- Keyboard navigation support
+- Screen reader compatibility
+- Focus management
+- ARIA attributes implementation
+
+#### UI/UX Features
+
+- Drag & Drop tab management
+- Dynamic status updates
+- Responsive design with Framer Motion
+- Dark/Light mode support
+- Enhanced provider management
+- Resource monitoring dashboard
+
+### Dependencies
+
+- Radix UI for accessible components
+- Framer Motion for animations
+- React DnD for drag and drop
+- Nano Stores for state management
+
+## Future Plans
+
+- Additional customization options
+- Enhanced theme support
+- Extended API integrations
+- Advanced monitoring capabilities
+- Custom provider plugins
+- Enhanced resource management
+- Advanced debugging features
+
+## Historical Changes
+
+### Task Manager
+
+- Added real-time system metrics monitoring
+- Implemented process tracking functionality
+- Added battery status monitoring
+- Integrated energy saving features
+
+### Connections
+
+- Added GitHub integration
+- Implemented secure token storage
+- Added connection status indicators
+
+### Notifications
+
+- Implemented centralized notification system
+- Added support for different notification types (error, warning, update)
+- Integrated with logStore for persistent storage

app/components/settings/connections/ConnectionsTab.tsx

@@ -194,7 +194,7 @@ export default function ConnectionsTab() {
               )}
 
               {connection.user && (
-                <span className="text-sm text-green-500 flex items-center gap-1">
+                <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>

app/components/settings/debug/DebugTab.tsx

@@ -4,13 +4,6 @@ import { classNames } from '~/utils/classNames';
 import { logStore } from '~/lib/stores/logs';
 import type { LogEntry } from '~/lib/stores/logs';
 
-interface ProviderStatus {
-  id: string;
-  name: string;
-  status: 'online' | 'offline' | 'error';
-  error?: string;
-}
-
 interface SystemInfo {
   os: string;
   arch: string;
@@ -90,14 +83,24 @@ interface SystemInfo {
   };
 }
 
+interface WebAppInfo {
+  name: string;
+  version: string;
+  description: string;
+  license: string;
+  nodeVersion: string;
+  dependencies: { [key: string]: string };
+  devDependencies: { [key: string]: string };
+}
+
 export default function DebugTab() {
-  const [providerStatuses, setProviderStatuses] = useState<ProviderStatus[]>([]);
   const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
+  const [webAppInfo, setWebAppInfo] = useState<WebAppInfo | null>(null);
   const [loading, setLoading] = useState({
     systemInfo: false,
-    providers: false,
     performance: false,
     errors: false,
+    webAppInfo: false,
   });
   const [errorLog, setErrorLog] = useState<{
     errors: any[];
@@ -109,8 +112,8 @@ export default function DebugTab() {
 
   // Fetch initial data
   useEffect(() => {
-    checkProviderStatus();
     getSystemInfo();
+    getWebAppInfo();
   }, []);
 
   // Set up error listeners when component mounts
@@ -146,75 +149,6 @@ export default function DebugTab() {
     };
   }, []);
 
-  const checkProviderStatus = async () => {
-    try {
-      setLoading((prev) => ({ ...prev, providers: true }));
-
-      // Fetch real provider statuses
-      const providers: ProviderStatus[] = [];
-
-      // Check OpenAI status
-      try {
-        const openaiResponse = await fetch('/api/providers/openai/status');
-        providers.push({
-          id: 'openai',
-          name: 'OpenAI',
-          status: openaiResponse.ok ? 'online' : 'error',
-          error: !openaiResponse.ok ? 'API Error' : undefined,
-        });
-      } catch {
-        providers.push({ id: 'openai', name: 'OpenAI', status: 'offline' });
-      }
-
-      // Check Anthropic status
-      try {
-        const anthropicResponse = await fetch('/api/providers/anthropic/status');
-        providers.push({
-          id: 'anthropic',
-          name: 'Anthropic',
-          status: anthropicResponse.ok ? 'online' : 'error',
-          error: !anthropicResponse.ok ? 'API Error' : undefined,
-        });
-      } catch {
-        providers.push({ id: 'anthropic', name: 'Anthropic', status: 'offline' });
-      }
-
-      // Check Local Models status
-      try {
-        const localResponse = await fetch('/api/providers/local/status');
-        providers.push({
-          id: 'local',
-          name: 'Local Models',
-          status: localResponse.ok ? 'online' : 'error',
-          error: !localResponse.ok ? 'API Error' : undefined,
-        });
-      } catch {
-        providers.push({ id: 'local', name: 'Local Models', status: 'offline' });
-      }
-
-      // Check Ollama status
-      try {
-        const ollamaResponse = await fetch('/api/providers/ollama/status');
-        providers.push({
-          id: 'ollama',
-          name: 'Ollama',
-          status: ollamaResponse.ok ? 'online' : 'error',
-          error: !ollamaResponse.ok ? 'API Error' : undefined,
-        });
-      } catch {
-        providers.push({ id: 'ollama', name: 'Ollama', status: 'offline' });
-      }
-
-      setProviderStatuses(providers);
-      toast.success('Provider status updated');
-    } catch (error) {
-      toast.error('Failed to check provider status');
-      console.error('Failed to check provider status:', error);
-    } finally {
-      setLoading((prev) => ({ ...prev, providers: false }));
-    }
-  };
-
   const getSystemInfo = async () => {
     try {
       setLoading((prev) => ({ ...prev, systemInfo: true }));
@@ -360,6 +294,26 @@ export default function DebugTab() {
     }
   };
 
+  const getWebAppInfo = async () => {
+    try {
+      setLoading((prev) => ({ ...prev, webAppInfo: true }));
+
+      const response = await fetch('/api/system/app-info');
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch webapp info');
+      }
+
+      const data = await response.json();
+      setWebAppInfo(data as WebAppInfo);
+    } catch (error) {
+      console.error('Failed to fetch webapp info:', error);
+      toast.error('Failed to fetch webapp information');
+    } 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'];
@@ -509,29 +463,40 @@ export default function DebugTab() {
     }
   };
 
+  const exportDebugInfo = () => {
+    try {
+      const debugData = {
+        timestamp: new Date().toISOString(),
+        system: systemInfo,
+        webApp: webAppInfo,
+        errors: errorLog.errors,
+        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');
+    }
+  };
+
   return (
     <div className="flex flex-col gap-6">
       {/* Action Buttons */}
       <div className="flex flex-wrap gap-4">
-        <button
-          onClick={checkProviderStatus}
-          disabled={loading.providers}
-          className={classNames(
-            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-            'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
-            { 'opacity-50 cursor-not-allowed': loading.providers },
-          )}
-        >
-          {loading.providers ? (
-            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-          ) : (
-            <div className="i-ph:plug w-4 h-4" />
-          )}
-          Check Providers
-        </button>
-
         <button
           onClick={getSystemInfo}
           disabled={loading.systemInfo}
@@ -588,6 +553,19 @@ export default function DebugTab() {
           )}
           Check Errors
         </button>
+
+        <button
+          onClick={exportDebugInfo}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
+            'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+          )}
+        >
+          <div className="i-ph:download w-4 h-4" />
+          Export Debug Info
+        </button>
       </div>
 
       {/* Error Log Display */}
@@ -772,53 +750,6 @@ export default function DebugTab() {
         )}
       </div>
 
-      {/* Provider Status */}
-      <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-3">
-            <div className="i-ph:robot text-purple-500 w-5 h-5" />
-            <h3 className="text-base font-medium text-bolt-elements-textPrimary">Provider Status</h3>
-          </div>
-          <button
-            onClick={checkProviderStatus}
-            className={classNames(
-              'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-              'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-              'transition-colors duration-200',
-              { 'opacity-50 cursor-not-allowed': loading.providers },
-            )}
-            disabled={loading.providers}
-          >
-            <div className={classNames('i-ph:arrows-clockwise w-4 h-4', loading.providers ? 'animate-spin' : '')} />
-            Refresh
-          </button>
-        </div>
-        <div className="grid grid-cols-2 gap-4">
-          {providerStatuses.map((provider) => (
-            <div
-              key={provider.id}
-              className="flex items-center justify-between p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]"
-            >
-              <div className="flex items-center gap-3">
-                <div
-                  className={classNames(
-                    'w-2 h-2 rounded-full',
-                    provider.status === 'online'
-                      ? 'bg-green-500'
-                      : provider.status === 'offline'
-                        ? 'bg-red-500'
-                        : 'bg-yellow-500',
-                  )}
-                />
-                <span className="text-sm text-bolt-elements-textPrimary">{provider.name}</span>
-              </div>
-              <span className="text-xs text-bolt-elements-textSecondary capitalize">{provider.status}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
       {/* Performance Metrics */}
       <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
         <div className="flex items-center justify-between mb-4">
@@ -906,6 +837,82 @@ export default function DebugTab() {
         )}
       </div>
 
+      {/* WebApp Information */}
+      <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+        <div className="flex items-center justify-between mb-4">
+          <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>
+          </div>
+          <button
+            onClick={getWebAppInfo}
+            className={classNames(
+              'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
+              'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
+              'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+              'transition-colors duration-200',
+              { 'opacity-50 cursor-not-allowed': loading.webAppInfo },
+            )}
+            disabled={loading.webAppInfo}
+          >
+            <div className={classNames('i-ph:arrows-clockwise w-4 h-4', loading.webAppInfo ? 'animate-spin' : '')} />
+            Refresh
+          </button>
+        </div>
+        {webAppInfo ? (
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <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:file-text text-bolt-elements-textSecondary w-4 h-4" />
+                <span className="text-bolt-elements-textSecondary">Description: </span>
+                <span className="text-bolt-elements-textPrimary">{webAppInfo.description}</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: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.nodeVersion}</span>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <div className="text-sm">
+                <div className="flex items-center gap-2 mb-2">
+                  <div className="i-ph:package text-bolt-elements-textSecondary w-4 h-4" />
+                  <span className="text-bolt-elements-textSecondary">Key Dependencies:</span>
+                </div>
+                <div className="pl-6 space-y-1">
+                  {Object.entries(webAppInfo.dependencies)
+                    .filter(([key]) => ['react', '@remix-run/react', 'next', 'typescript'].includes(key))
+                    .map(([key, version]) => (
+                      <div key={key} className="text-xs text-bolt-elements-textPrimary">
+                        {key}: {version}
+                      </div>
+                    ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="text-sm text-bolt-elements-textSecondary">
+            {loading.webAppInfo ? 'Loading webapp information...' : 'No webapp information available'}
+          </div>
+        )}
+      </div>
+
       {/* Error Check */}
       <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
         <div className="flex items-center justify-between mb-4">

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

@@ -1,515 +1,421 @@
-import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
-import { toast } from 'react-toastify';
+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 { motion } from 'framer-motion';
 
 interface SelectOption {
   value: string;
   label: string;
-  icon: string;
+  icon?: string;
   color?: string;
 }
 
 const logLevelOptions: SelectOption[] = [
-  { value: 'all', label: 'All Levels', icon: 'i-ph:funnel' },
-  { value: 'info', label: 'Info', icon: 'i-ph:info', color: 'text-blue-500' },
-  { value: 'warning', label: 'Warning', icon: 'i-ph:warning', color: 'text-yellow-500' },
-  { value: 'error', label: 'Error', icon: 'i-ph:x-circle', color: 'text-red-500' },
-  { value: 'debug', label: 'Debug', icon: 'i-ph:bug', color: 'text-gray-500' },
+  {
+    value: 'all',
+    label: 'All Levels',
+    icon: 'i-ph:funnel',
+    color: '#9333ea',
+  },
+  {
+    value: 'info',
+    label: 'Info',
+    icon: 'i-ph:info',
+    color: '#3b82f6',
+  },
+  {
+    value: 'warning',
+    label: 'Warning',
+    icon: 'i-ph:warning',
+    color: '#f59e0b',
+  },
+  {
+    value: 'error',
+    label: 'Error',
+    icon: 'i-ph:x-circle',
+    color: '#ef4444',
+  },
+  {
+    value: 'debug',
+    label: 'Debug',
+    icon: 'i-ph:bug',
+    color: '#6b7280',
+  },
 ];
 
 const logCategoryOptions: SelectOption[] = [
-  { value: 'all', label: 'All Categories', icon: 'i-ph:squares-four' },
-  { value: 'system', label: 'System', icon: 'i-ph:desktop' },
-  { value: 'provider', label: 'Provider', icon: 'i-ph:plug' },
-  { value: 'user', label: 'User', icon: 'i-ph:user' },
-  { value: 'error', label: 'Error', icon: 'i-ph:warning-octagon' },
+  {
+    value: 'all',
+    label: 'All Categories',
+    icon: 'i-ph:squares-four',
+    color: '#9333ea',
+  },
+  {
+    value: 'api',
+    label: 'API',
+    icon: 'i-ph:cloud',
+    color: '#3b82f6',
+  },
+  {
+    value: 'auth',
+    label: 'Auth',
+    icon: 'i-ph:key',
+    color: '#f59e0b',
+  },
+  {
+    value: 'database',
+    label: 'Database',
+    icon: 'i-ph:database',
+    color: '#10b981',
+  },
+  {
+    value: 'network',
+    label: 'Network',
+    icon: 'i-ph:wifi-high',
+    color: '#6366f1',
+  },
+  {
+    value: 'performance',
+    label: 'Performance',
+    icon: 'i-ph:chart-line-up',
+    color: '#8b5cf6',
+  },
 ];
 
-const SegmentedGroup = ({
-  value,
-  onChange,
-  options,
-  className,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  options: SelectOption[];
-  className?: string;
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const selectedOption = options.find((opt) => opt.value === value);
-
-  if (!isExpanded) {
-    return (
-      <button
-        type="button"
-        onClick={() => setIsExpanded(true)}
-        className={classNames(
-          'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm',
-          'bg-white/50 dark:bg-gray-800/30',
-          'hover:bg-gray-50 dark:hover:bg-gray-800/50',
-          'border border-gray-200/50 dark:border-gray-700/50',
-          'text-bolt-elements-textPrimary',
-          className,
-        )}
-      >
-        <div className={classNames(selectedOption?.icon, 'text-base text-purple-500')} />
-        <span className="text-sm">{selectedOption?.label}</span>
-        <div className="i-ph:caret-right text-sm text-bolt-elements-textTertiary" />
-      </button>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-0.5 p-0.5 rounded-lg bg-white/50 dark:bg-gray-800/30 border border-gray-200/50 dark:border-gray-700/50">
-      {options.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          onClick={() => {
-            onChange(option.value);
-            setIsExpanded(false);
-          }}
-          className={classNames(
-            'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors',
-            option.value === value
-              ? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
-              : 'text-bolt-elements-textSecondary hover:bg-gray-50 dark:hover:bg-gray-800/50',
-          )}
-        >
-          <div className={classNames(option.icon, 'text-base', option.value === value ? option.color : '')} />
-          <span className="truncate">{option.label}</span>
-        </button>
-      ))}
-    </div>
-  );
-};
-
-const LogEntryItem = ({
-  log,
-  isExpanded: forceExpanded,
-  use24Hour,
-}: {
+interface LogEntryItemProps {
   log: LogEntry;
   isExpanded: boolean;
   use24Hour: boolean;
-}) => {
-  const [isExpanded, setIsExpanded] = useState(forceExpanded);
-  const [isCopied, setIsCopied] = useState(false);
+  showTimestamp: boolean;
+}
 
+const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp }: LogEntryItemProps) => {
+  const [localExpanded, setLocalExpanded] = useState(forceExpanded);
+
+  // Update local expanded state when forceExpanded changes
   useEffect(() => {
-    setIsExpanded(forceExpanded);
+    setLocalExpanded(forceExpanded);
   }, [forceExpanded]);
 
-  const handleCopy = useCallback(() => {
-    const logText = `[${log.level.toUpperCase()}] ${log.message}\nTimestamp: ${new Date(
-      log.timestamp,
-    ).toLocaleString()}\nCategory: ${log.category}\nDetails: ${JSON.stringify(log.details, null, 2)}`;
-
-    navigator.clipboard.writeText(logText).then(() => {
-      setIsCopied(true);
-      toast.success('Log copied to clipboard');
-      setTimeout(() => setIsCopied(false), 2000);
-    });
-  }, [log]);
-
-  const formattedTime = useMemo(() => {
+  const timestamp = useMemo(() => {
     const date = new Date(log.timestamp);
-    const now = new Date();
-    const isToday = date.toDateString() === now.toDateString();
-    const isYesterday = new Date(now.setDate(now.getDate() - 1)).toDateString() === date.toDateString();
 
-    const timeStr = date.toLocaleTimeString(undefined, {
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: !use24Hour,
-    });
-
-    if (isToday) {
-      return {
-        primary: timeStr,
-        secondary: 'Today',
-      };
-    } else if (isYesterday) {
-      return {
-        primary: timeStr,
-        secondary: 'Yesterday',
-      };
-    } else {
-      const dateStr = date.toLocaleDateString(undefined, {
-        month: 'short',
-        day: 'numeric',
-        year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
-      });
-      return {
-        primary: dateStr,
-        secondary: timeStr,
-      };
+    if (use24Hour) {
+      return date.toLocaleTimeString('en-US', { hour12: false });
     }
+
+    return date.toLocaleTimeString('en-US', { hour12: true });
   }, [log.timestamp, use24Hour]);
 
-  return (
-    <div
-      className={classNames('group transition-colors', 'hover:bg-gray-50 dark:hover:bg-gray-800/50', 'py-3', {
-        'bg-red-50/20 dark:bg-red-900/5': log.level === 'error',
-        'bg-yellow-50/20 dark:bg-yellow-900/5': log.level === 'warning',
-        'bg-blue-50/20 dark:bg-blue-900/5': log.level === 'info',
-        'bg-gray-50/20 dark:bg-gray-800/5': log.level === 'debug',
-      })}
-    >
-      <div className="px-3">
-        <div className="flex items-center gap-3">
-          <span
-            className={classNames('px-2 py-0.5 text-xs font-medium rounded-full', {
-              'bg-red-100/80 text-red-800 dark:bg-red-500/10 dark:text-red-400': log.level === 'error',
-              'bg-yellow-100/80 text-yellow-800 dark:bg-yellow-500/10 dark:text-yellow-400': log.level === 'warning',
-              'bg-blue-100/80 text-blue-800 dark:bg-blue-500/10 dark:text-blue-400': log.level === 'info',
-              'bg-gray-100/80 text-gray-800 dark:bg-gray-500/10 dark:text-gray-400': log.level === 'debug',
-            })}
-          >
-            {log.level}
-          </span>
-          <p className="flex-1 text-sm text-bolt-elements-textPrimary">{log.message}</p>
-          <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-            <button onClick={handleCopy} className="p-1 transition-colors rounded focus:outline-none" title="Copy log">
-              <div
-                className={classNames(
-                  'text-base transition-colors',
-                  isCopied
-                    ? 'i-ph:check text-green-500'
-                    : 'i-ph:copy text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary',
-                )}
-              />
-            </button>
-            {log.details && (
-              <button
-                onClick={() => setIsExpanded(!isExpanded)}
-                className="p-1 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary transition-colors rounded focus:outline-none"
-                title="Toggle details"
-              >
-                <div
-                  className={classNames('text-base transition-transform', {
-                    'i-ph:caret-down rotate-180': isExpanded,
-                    'i-ph:caret-down': !isExpanded,
-                  })}
-                />
-              </button>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-2 mt-1 text-xs">
-          <div className="flex items-center gap-1">
-            <div className="i-ph:clock text-bolt-elements-textTertiary" />
-            <span className="text-bolt-elements-textSecondary">{formattedTime.primary}</span>
-            <span className="text-bolt-elements-textTertiary">·</span>
-            <span className="text-bolt-elements-textTertiary">{formattedTime.secondary}</span>
-          </div>
-          <span className="px-2 py-0.5 rounded-full bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3">
-            {log.category}
-          </span>
-        </div>
-      </div>
+  const levelColor = useMemo(() => {
+    switch (log.level) {
+      case 'error':
+        return 'text-red-500 bg-red-50 dark:bg-red-500/10';
+      case 'warning':
+        return 'text-yellow-500 bg-yellow-50 dark:bg-yellow-500/10';
+      case 'debug':
+        return 'text-gray-500 bg-gray-50 dark:bg-gray-500/10';
+      default:
+        return 'text-blue-500 bg-blue-50 dark:bg-blue-500/10';
+    }
+  }, [log.level]);
 
-      {isExpanded && log.details && (
-        <motion.div
-          initial={{ height: 0, opacity: 0 }}
-          animate={{ height: 'auto', opacity: 1 }}
-          exit={{ height: 0, opacity: 0 }}
-          transition={{ duration: 0.2 }}
-          className="mt-2 px-3"
-        >
-          <pre className="p-2 text-sm rounded-md overflow-auto bg-bolt-elements-background-depth-2/50 dark:bg-bolt-elements-background-depth-3/50 text-bolt-elements-textSecondary">
+  return (
+    <div className="p-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+      <div className="flex items-start gap-3">
+        <div className={classNames('px-2 py-0.5 rounded text-xs font-medium uppercase', levelColor)}>{log.level}</div>
+        {showTimestamp && <div className="text-sm text-bolt-elements-textTertiary">{timestamp}</div>}
+        <div className="flex-grow">
+          <div className="text-sm text-bolt-elements-textPrimary">{log.message}</div>
+          {log.details && (
+            <button
+              onClick={() => setLocalExpanded(!localExpanded)}
+              className="mt-1 text-xs text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary"
+            >
+              {localExpanded ? 'Hide' : 'Show'} Details
+            </button>
+          )}
+        </div>
+        {log.category && (
+          <div className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-800 text-bolt-elements-textSecondary">
+            {log.category}
+          </div>
+        )}
+      </div>
+      {localExpanded && log.details && (
+        <div className="mt-2 p-2 rounded bg-gray-50 dark:bg-gray-800/50">
+          <pre className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
             {JSON.stringify(log.details, null, 2)}
           </pre>
-        </motion.div>
+        </div>
       )}
     </div>
   );
 };
 
-/**
- * TODO: Future Enhancements
- *
- * 1. Advanced Features:
- *    - Add export to JSON/CSV functionality
- *    - Implement log retention policies
- *    - Add custom alert rules and notifications
- *    - Add pattern detection and highlighting
- *
- * 2. Visual Improvements:
- *    - Add dark/light mode specific styling
- *    - Implement collapsible JSON viewer
- *    - Add timeline view with zoom capabilities
- *
- * 3. Performance Optimizations:
- *    - Implement virtualized scrolling for large logs
- *    - Add lazy loading for log details
- *    - Optimize search with indexing
- */
-
 export function EventLogsTab() {
   const logs = useStore(logStore.logs);
-  const [logLevel, setLogLevel] = useState<LogEntry['level'] | 'all'>('all');
-  const [logCategory, setLogCategory] = useState<LogEntry['category'] | 'all'>('all');
-  const [autoScroll, setAutoScroll] = useState(true);
+  const [selectedLevel, setSelectedLevel] = useState('all');
+  const [selectedCategory, setSelectedCategory] = useState('all');
   const [searchQuery, setSearchQuery] = useState('');
-  const [expandAll, setExpandAll] = useState(false);
-  const [use24Hour, setUse24Hour] = useState(true);
+  const [use24Hour, setUse24Hour] = useState(false);
+  const [autoExpand, setAutoExpand] = useState(false);
+  const [showTimestamps, setShowTimestamps] = useState(true);
+  const [showLevelFilter, setShowLevelFilter] = useState(false);
+  const [showCategoryFilter, setShowCategoryFilter] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const logsContainerRef = useRef<HTMLDivElement>(null);
-  const [isScrolledToBottom, setIsScrolledToBottom] = useState(true);
-
-  // Add refresh function
-  const handleRefresh = useCallback(async () => {
-    setIsRefreshing(true);
-
-    try {
-      // Since logStore doesn't have refresh, we'll re-fetch logs
-      await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate refresh
-      toast.success('Logs refreshed');
-    } catch (err) {
-      console.error('Failed to refresh logs:', err);
-      toast.error('Failed to refresh logs');
-    } finally {
-      setIsRefreshing(false);
-    }
-  }, []);
+  const levelFilterRef = useRef<HTMLDivElement>(null);
+  const categoryFilterRef = useRef<HTMLDivElement>(null);
 
   const filteredLogs = useMemo(() => {
-    const allLogs = Object.values(logs);
-    const filtered = allLogs.filter((log) => {
-      const matchesLevel = logLevel === 'all' || log.level === logLevel;
-      const matchesCategory = logCategory === 'all' || log.category === logCategory;
-      const matchesSearch =
-        !searchQuery ||
-        log.message?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        JSON.stringify(log.details)?.toLowerCase()?.includes(searchQuery?.toLowerCase());
-
-      return matchesLevel && matchesCategory && matchesSearch;
-    });
-
-    return filtered.reverse();
-  }, [logs, logLevel, logCategory, searchQuery]);
-
-  const handleClearLogs = useCallback(() => {
-    if (confirm('Are you sure you want to clear all logs?')) {
-      logStore.clearLogs();
-      toast.success('Logs cleared successfully');
-    }
-  }, []);
+    return logStore.getFilteredLogs(
+      selectedLevel === 'all' ? undefined : (selectedLevel as LogEntry['level']),
+      selectedCategory === 'all' ? undefined : (selectedCategory as LogEntry['category']),
+      searchQuery,
+    );
+  }, [logs, selectedLevel, selectedCategory, searchQuery]);
 
   const handleExportLogs = useCallback(() => {
-    try {
-      const logText = logStore
-        .getLogs()
-        .map(
-          (log) =>
-            `[${log.level.toUpperCase()}] ${log.timestamp} - ${log.message}${
-              log.details ? '\nDetails: ' + JSON.stringify(log.details, null, 2) : ''
-            }`,
-        )
-        .join('\n\n');
+    const exportData = {
+      timestamp: new Date().toISOString(),
+      logs: filteredLogs,
+      filters: {
+        level: selectedLevel,
+        category: selectedCategory,
+        searchQuery,
+      },
+    };
 
-      const blob = new Blob([logText], { type: 'text/plain' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `event-logs-${new Date().toISOString()}.txt`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      toast.success('Logs exported successfully');
-    } catch (error) {
-      toast.error('Failed to export logs');
-      console.error('Export error:', error);
-    }
+    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-logs-${new Date().toISOString()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [filteredLogs, selectedLevel, selectedCategory, searchQuery]);
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    await logStore.refreshLogs();
+    setTimeout(() => setIsRefreshing(false), 500); // Keep animation visible for at least 500ms
   }, []);
 
-  const handleScroll = () => {
-    const container = logsContainerRef.current;
-
-    if (!container) {
-      return;
-    }
-
-    const { scrollTop, scrollHeight, clientHeight } = container;
-    const isBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 10;
-    setIsScrolledToBottom(isBottom);
-  };
-
+  // Close filters when clicking outside
   useEffect(() => {
-    const container = logsContainerRef.current;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (levelFilterRef.current && !levelFilterRef.current.contains(event.target as Node)) {
+        setShowLevelFilter(false);
+      }
 
-    if (container && (autoScroll || isScrolledToBottom)) {
-      container.scrollTop = container.scrollHeight;
-    }
-  }, [filteredLogs, autoScroll, isScrolledToBottom]);
+      if (categoryFilterRef.current && !categoryFilterRef.current.contains(event.target as Node)) {
+        setShowCategoryFilter(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const selectedLevelOption = logLevelOptions.find((opt) => opt.value === selectedLevel);
+  const selectedCategoryOption = logCategoryOptions.find((opt) => opt.value === selectedCategory);
 
   return (
     <div className="flex flex-col h-full gap-4 p-6">
-      {/* Header Section */}
-      <div className="flex flex-col gap-4 pb-4">
-        {/* Title and Refresh */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="i-ph:list text-xl text-purple-500" />
-            <div>
-              <h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Event Logs</h2>
-              <p className="text-sm text-bolt-elements-textSecondary">Track system events and debug information</p>
-            </div>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="i-ph:list text-xl text-purple-500" />
+          <div>
+            <h2 className="text-lg font-semibold">Event Logs</h2>
+            <p className="text-sm text-bolt-elements-textSecondary">Track system events and debug information</p>
           </div>
+        </div>
+        <div className="flex items-center gap-4">
           <motion.button
             onClick={handleRefresh}
-            disabled={isRefreshing}
-            className={classNames(
-              'p-2.5 rounded-lg',
-              'bg-purple-50/50 dark:bg-purple-900/10',
-              'text-purple-500 hover:text-purple-600',
-              'hover:bg-purple-100/50 dark:hover:bg-purple-900/20',
-              'focus:outline-none focus:ring-2 focus:ring-purple-500/20',
-              'transition-all duration-200 ease-in-out',
-              { 'opacity-50 cursor-not-allowed': isRefreshing },
-            )}
+            className="p-2 rounded-lg text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all duration-200"
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
-            title="Refresh logs"
+            animate={isRefreshing ? { rotate: 360 } : {}}
+            transition={isRefreshing ? { duration: 1, repeat: Infinity, ease: 'linear' } : {}}
           >
-            <div className={classNames('text-lg transition-all duration-300', { 'animate-spin': isRefreshing })}>
-              <div className="i-ph:arrows-clockwise" />
-            </div>
+            <div className="i-ph:arrows-clockwise text-xl" />
           </motion.button>
         </div>
-
-        {/* Controls Section */}
-        <div className="flex items-center justify-end gap-2 px-1">
-          <div className="flex items-center gap-6 p-1.5 rounded-lg bg-white/50 dark:bg-gray-800/30 border border-gray-200/50 dark:border-gray-700/50">
-            <motion.div
-              className="flex items-center gap-3"
-              whileHover={{ scale: 1.02 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 20 }}
-            >
-              <span className="text-sm font-medium text-bolt-elements-textSecondary">Auto-scroll</span>
-              <Switch
-                checked={autoScroll}
-                onCheckedChange={setAutoScroll}
-                className="data-[state=checked]:bg-purple-500"
-              />
-            </motion.div>
-
-            <div className="h-4 w-px bg-bolt-elements-borderColor" />
-
-            <motion.div
-              className="flex items-center gap-3"
-              whileHover={{ scale: 1.02 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 20 }}
-            >
-              <span className="text-sm font-medium text-bolt-elements-textSecondary">24h Time</span>
-              <Switch
-                checked={use24Hour}
-                onCheckedChange={setUse24Hour}
-                className="data-[state=checked]:bg-purple-500"
-              />
-            </motion.div>
-
-            <div className="h-4 w-px bg-bolt-elements-borderColor" />
-
-            <motion.div
-              className="flex items-center gap-3"
-              whileHover={{ scale: 1.02 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 20 }}
-            >
-              <span className="text-sm font-medium text-bolt-elements-textSecondary">Expand All</span>
-              <Switch
-                checked={expandAll}
-                onCheckedChange={setExpandAll}
-                className="data-[state=checked]:bg-purple-500"
-              />
-            </motion.div>
-          </div>
-        </div>
       </div>
 
-      {/* Header with Search */}
-      <div className="flex flex-col gap-4">
-        <div className="relative w-72">
-          <div className="absolute left-2.5 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary">
-            <div className="i-ph:magnifying-glass text-base" />
-          </div>
+      {/* Top Controls */}
+      <div className="flex items-center gap-4">
+        {/* Search */}
+        <div className="flex-grow relative">
           <input
             type="text"
             placeholder="Search logs..."
-            className={classNames(
-              'w-full pl-8 pr-3 py-1.5 rounded-md text-sm',
-              'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2',
-              'border border-bolt-elements-borderColor',
-              'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
-              'focus:outline-none focus:ring-1 focus:ring-purple-500/30 focus:border-purple-500/30',
-              'transition-all duration-200',
-            )}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full px-3 py-1.5 pl-9 rounded-lg text-sm bg-white/50 dark:bg-gray-800/30 border border-gray-200/50 dark:border-gray-700/50"
           />
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary">
+            <div className="i-ph:magnifying-glass text-base" />
+          </div>
         </div>
 
-        {/* Filters Row */}
-        <div className="flex items-center -ml-1">
-          <SegmentedGroup
-            value={logLevel}
-            onChange={(value) => setLogLevel(value as LogEntry['level'] | 'all')}
-            options={logLevelOptions}
-          />
-          <div className="mx-2 w-px h-4 bg-bolt-elements-borderColor" />
-          <SegmentedGroup
-            value={logCategory}
-            onChange={(value) => setLogCategory(value as LogEntry['category'] | 'all')}
-            options={logCategoryOptions}
-          />
-        </div>
-      </div>
+        {/* Right Controls */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch checked={showTimestamps} onCheckedChange={setShowTimestamps} />
+            <span className="text-sm text-bolt-elements-textSecondary whitespace-nowrap">Show Timestamps</span>
+          </div>
 
-      {/* Logs Display */}
-      <div
-        ref={logsContainerRef}
-        className="flex-1 overflow-auto rounded-lg bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2"
-        onScroll={handleScroll}
-      >
-        <div className="divide-y divide-bolt-elements-borderColor">
-          {filteredLogs.map((log) => (
-            <LogEntryItem key={log.id} log={log} isExpanded={expandAll} use24Hour={use24Hour} />
-          ))}
-        </div>
-      </div>
+          <div className="flex items-center gap-2">
+            <Switch checked={use24Hour} onCheckedChange={setUse24Hour} />
+            <span className="text-sm text-bolt-elements-textSecondary whitespace-nowrap">24h Time</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch checked={autoExpand} onCheckedChange={setAutoExpand} />
+            <span className="text-sm text-bolt-elements-textSecondary whitespace-nowrap">Auto Expand</span>
+          </div>
 
-      {/* Status Bar */}
-      <div className="flex items-center justify-between py-2 px-4 text-sm text-bolt-elements-textSecondary">
-        <div className="flex items-center gap-6">
-          <span>{filteredLogs.length} logs displayed</span>
-          <span>{isScrolledToBottom ? 'Watching for new logs...' : 'Scroll to bottom to watch new logs'}</span>
-        </div>
-        <div className="flex items-center gap-2">
           <motion.button
             onClick={handleExportLogs}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-purple-500/10 text-purple-600 dark:text-purple-400 hover:bg-purple-500/20 rounded-md transition-colors"
+            className="flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm bg-purple-500 hover:bg-purple-600 text-white transition-colors"
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
           >
-            <div className="i-ph:download-simple" />
-            Export
+            <div className="i-ph:download text-base" />
+            Export Logs
           </motion.button>
-          <motion.button
-            onClick={handleClearLogs}
-            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 rounded-md transition-colors"
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-4 -mt-2">
+        {/* Level Filter */}
+        <div ref={levelFilterRef} className="relative">
+          <button
+            onClick={() => {
+              setShowLevelFilter(!showLevelFilter);
+              setShowCategoryFilter(false);
+            }}
+            className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
           >
-            <div className="i-ph:trash" />
-            Clear
-          </motion.button>
+            <div
+              className={classNames('text-sm', selectedLevelOption?.icon || 'i-ph:funnel')}
+              style={{ color: selectedLevelOption?.color }}
+            />
+            <div className="text-sm text-bolt-elements-textSecondary">{selectedLevelOption?.label || 'All Levels'}</div>
+            <div
+              className={classNames(
+                'i-ph:caret-down text-sm text-bolt-elements-textTertiary transition-transform',
+                showLevelFilter ? 'rotate-180' : '',
+              )}
+            />
+          </button>
+
+          {showLevelFilter && (
+            <div className="absolute left-0 top-full mt-1 z-20">
+              <div className="p-1 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                {logLevelOptions.map((option) => (
+                  <button
+                    key={option.value}
+                    onClick={() => {
+                      setSelectedLevel(option.value);
+                      setShowLevelFilter(false);
+                    }}
+                    className={classNames(
+                      'flex items-center gap-2 w-full px-3 py-1.5 rounded-md text-sm transition-colors',
+                      option.value === selectedLevel
+                        ? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
+                        : 'hover:bg-gray-100 dark:hover:bg-gray-700/50',
+                    )}
+                  >
+                    <div className={classNames(option.icon, 'text-base', option.color)} />
+                    <span>{option.label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="w-px h-4 bg-gray-200 dark:bg-gray-700" />
+
+        {/* Category Filter */}
+        <div ref={categoryFilterRef} className="relative">
+          <button
+            onClick={() => {
+              setShowCategoryFilter(!showCategoryFilter);
+              setShowLevelFilter(false);
+            }}
+            className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <div
+              className={classNames('text-sm', selectedCategoryOption?.icon || 'i-ph:squares-four')}
+              style={{ color: selectedCategoryOption?.color }}
+            />
+            <div className="text-sm text-bolt-elements-textSecondary">
+              {selectedCategoryOption?.label || 'All Categories'}
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down text-sm text-bolt-elements-textTertiary transition-transform',
+                showCategoryFilter ? 'rotate-180' : '',
+              )}
+            />
+          </button>
+
+          {showCategoryFilter && (
+            <div className="absolute left-0 top-full mt-1 z-20">
+              <div className="p-1 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                {logCategoryOptions.map((option) => (
+                  <button
+                    key={option.value}
+                    onClick={() => {
+                      setSelectedCategory(option.value);
+                      setShowCategoryFilter(false);
+                    }}
+                    className={classNames(
+                      'flex items-center gap-2 w-full px-3 py-1.5 rounded-md text-sm transition-colors',
+                      option.value === selectedCategory
+                        ? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
+                        : 'hover:bg-gray-100 dark:hover:bg-gray-700/50',
+                    )}
+                  >
+                    <div className={classNames(option.icon, 'text-base', option.color)} />
+                    <span>{option.label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Logs Container */}
+      <div
+        ref={logsContainerRef}
+        className="flex-grow overflow-y-auto rounded-lg bg-white/50 dark:bg-gray-800/30 border border-gray-200/50 dark:border-gray-700/50"
+      >
+        <div className="divide-y divide-gray-200/50 dark:divide-gray-700/50">
+          {filteredLogs.map((log) => (
+            <LogEntryItem
+              key={log.id}
+              log={log}
+              isExpanded={autoExpand}
+              use24Hour={use24Hour}
+              showTimestamp={showTimestamps}
+            />
+          ))}
         </div>
       </div>
     </div>

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

@@ -11,6 +11,7 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
+import { toast } from 'react-toastify'; // Import toast
 
 // Register ChartJS components
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
@@ -120,8 +121,18 @@ export default function TaskManagerTab() {
     metrics: false,
     processes: false,
   });
-  const [energySaverMode, setEnergySaverMode] = useState(false);
-  const [autoEnergySaver, setAutoEnergySaver] = useState(true);
+  const [energySaverMode, setEnergySaverMode] = useState<boolean>(() => {
+    // Initialize from localStorage, default to false
+    const saved = localStorage.getItem('energySaverMode');
+    return saved ? JSON.parse(saved) : false;
+  });
+
+  const [autoEnergySaver, setAutoEnergySaver] = useState<boolean>(() => {
+    // Initialize from localStorage, default to false
+    const saved = localStorage.getItem('autoEnergySaver');
+    return saved ? JSON.parse(saved) : false;
+  });
+
   const [energySavings, setEnergySavings] = useState<EnergySavings>({
     updatesReduced: 0,
     timeInSaverMode: 0,
@@ -130,6 +141,26 @@ export default function TaskManagerTab() {
 
   const saverModeStartTime = useRef<number | null>(null);
 
+  // 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');
+    }
+  };
+
   // Calculate energy savings
   const updateEnergySavings = useCallback(() => {
     if (!energySaverMode) {
@@ -163,17 +194,25 @@ export default function TaskManagerTab() {
   }, [energySaverMode]);
 
   useEffect((): (() => void) | undefined => {
-    if (energySaverMode) {
-      const savingsInterval = setInterval(updateEnergySavings, 1000);
-      return () => clearInterval(savingsInterval);
+    if (!energySaverMode) {
+      // Clear any existing intervals and reset savings when disabled
+      setEnergySavings({
+        updatesReduced: 0,
+        timeInSaverMode: 0,
+        estimatedEnergySaved: 0,
+      });
+      return undefined;
     }
 
-    return undefined;
+    const savingsInterval = setInterval(updateEnergySavings, 1000);
+
+    return () => clearInterval(savingsInterval);
   }, [energySaverMode, updateEnergySavings]);
 
-  // Auto energy saver effect
   useEffect((): (() => void) | undefined => {
     if (!autoEnergySaver) {
+      // If auto mode is disabled, clear any forced energy saver state
+      setEnergySaverMode(false);
       return undefined;
     }
 
@@ -194,18 +233,6 @@ export default function TaskManagerTab() {
     return () => clearInterval(batteryCheckInterval);
   }, [autoEnergySaver]);
 
-  const getStatusColor = (status: 'active' | 'idle' | 'suspended'): string => {
-    if (status === 'active') {
-      return 'text-green-500';
-    }
-
-    if (status === 'suspended') {
-      return 'text-yellow-500';
-    }
-
-    return 'text-gray-400';
-  };
-
   const getUsageColor = (usage: number): string => {
     if (usage > 80) {
       return 'text-red-500';
@@ -215,7 +242,7 @@ export default function TaskManagerTab() {
       return 'text-yellow-500';
     }
 
-    return 'text-green-500';
+    return 'text-gray-500';
   };
 
   const getImpactColor = (impact: 'high' | 'medium' | 'low'): string => {
@@ -227,7 +254,7 @@ export default function TaskManagerTab() {
       return 'text-yellow-500';
     }
 
-    return 'text-green-500';
+    return 'text-gray-500';
   };
 
   const renderUsageGraph = (data: number[], label: string, color: string) => {
@@ -359,7 +386,7 @@ export default function TaskManagerTab() {
           type: 'Network',
           cpuUsage: Math.random() * 5,
           memoryUsage: Math.random() * 50,
-          status: 'active',
+          status: 'idle',
           lastUpdate: new Date().toISOString(),
           impact: 'high',
         },
@@ -368,7 +395,7 @@ export default function TaskManagerTab() {
           type: 'Animation',
           cpuUsage: Math.random() * 3,
           memoryUsage: Math.random() * 30,
-          status: 'active',
+          status: 'idle',
           lastUpdate: new Date().toISOString(),
           impact: 'medium',
         },
@@ -386,7 +413,7 @@ export default function TaskManagerTab() {
           type: 'Storage',
           cpuUsage: Math.random() * 1,
           memoryUsage: Math.random() * 15,
-          status: 'active',
+          status: 'idle',
           lastUpdate: new Date().toISOString(),
           impact: 'low',
         },
@@ -395,7 +422,7 @@ export default function TaskManagerTab() {
           type: 'Network',
           cpuUsage: Math.random() * 2,
           memoryUsage: Math.random() * 10,
-          status: 'active',
+          status: 'idle',
           lastUpdate: new Date().toISOString(),
           impact: 'medium',
         },
@@ -444,7 +471,7 @@ export default function TaskManagerTab() {
                 type="checkbox"
                 id="autoEnergySaver"
                 checked={autoEnergySaver}
-                onChange={(e) => setAutoEnergySaver(e.target.checked)}
+                onChange={(e) => handleAutoEnergySaverChange(e.target.checked)}
                 className="form-checkbox h-4 w-4 text-purple-600 rounded border-gray-300 dark:border-gray-700"
               />
               <label htmlFor="autoEnergySaver" className="text-sm text-bolt-elements-textSecondary">
@@ -456,7 +483,7 @@ export default function TaskManagerTab() {
                 type="checkbox"
                 id="energySaver"
                 checked={energySaverMode}
-                onChange={(e) => !autoEnergySaver && setEnergySaverMode(e.target.checked)}
+                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"
               />
@@ -465,7 +492,7 @@ export default function TaskManagerTab() {
                 className={classNames('text-sm text-bolt-elements-textSecondary', { 'opacity-50': autoEnergySaver })}
               >
                 Energy Saver
-                {energySaverMode && <span className="ml-2 text-xs text-green-500">Active</span>}
+                {energySaverMode && <span className="ml-2 text-xs text-bolt-elements-textSecondary">Active</span>}
               </label>
             </div>
           </div>
@@ -502,7 +529,7 @@ export default function TaskManagerTab() {
                 <p className="text-lg font-medium text-bolt-elements-textPrimary">
                   {Math.round(metrics.battery.level)}%
                   {metrics.battery.charging && (
-                    <span className="ml-2 text-green-500">
+                    <span className="ml-2 text-bolt-elements-textSecondary">
                       <div className="i-ph:lightning-fill w-4 h-4 inline-block" />
                     </span>
                   )}
@@ -597,10 +624,9 @@ export default function TaskManagerTab() {
                     </span>
                   </td>
                   <td className="py-3 px-4">
-                    <div className="flex items-center gap-2">
-                      <div className={classNames('w-2 h-2 rounded-full', getStatusColor(process.status))} />
-                      <span className="text-sm text-bolt-elements-textSecondary capitalize">{process.status}</span>
-                    </div>
+                    <span className={classNames('text-sm text-bolt-elements-textSecondary capitalize')}>
+                      {process.status}
+                    </span>
                   </td>
                   <td className="py-3 px-4">
                     <span className={classNames('text-sm', getImpactColor(process.impact))}>{process.impact}</span>

app/components/settings/update/UpdateTab.tsx

@@ -707,7 +707,7 @@ const UpdateTab = () => {
                       <div className="max-h-[400px] overflow-y-auto">
                         {categorizeChangelog(updateInfo.changelog).map(([category, messages]) => (
                           <div key={category} className="border-b last:border-b-0 border-bolt-elements-borderColor">
-                            <div className="p-3 bg-bolt-elements-bg-depth-4">
+                            <div className="p-3 bg-[#EAEAEA] dark:bg-[#2A2A2A]">
                               <h5 className="text-sm font-medium text-bolt-elements-textPrimary">
                                 {category}
                                 <span className="ml-2 text-xs text-bolt-elements-textSecondary">

app/lib/stores/logs.ts

@@ -10,10 +10,12 @@ export interface LogEntry {
   level: 'info' | 'warning' | 'error' | 'debug';
   message: string;
   details?: Record<string, any>;
-  category: 'system' | 'provider' | 'user' | 'error' | 'api' | 'auth' | 'database' | 'network';
+  category: 'system' | 'provider' | 'user' | 'error' | 'api' | 'auth' | 'database' | 'network' | 'performance';
   subCategory?: string;
   duration?: number;
   statusCode?: number;
+  source?: string;
+  stack?: string;
 }
 
 const MAX_LOGS = 1000; // Maximum number of logs to keep in memory
@@ -109,6 +111,8 @@ class LogStore {
     level: LogEntry['level'] = 'info',
     category: LogEntry['category'] = 'system',
     details?: Record<string, any>,
+    statusCode?: number,
+    duration?: number,
   ) {
     const id = this._generateId();
     const entry: LogEntry = {
@@ -118,6 +122,8 @@ class LogStore {
       message,
       details,
       category,
+      statusCode,
+      duration,
     };
 
     this._logs.setKey(id, entry);
@@ -262,6 +268,94 @@ class LogStore {
     this._readLogs.clear();
     this._saveReadLogs();
   }
+
+  // Network request logging
+  logNetworkRequest(
+    method: string,
+    url: string,
+    statusCode: number,
+    duration: number,
+    requestData?: any,
+    responseData?: any,
+  ) {
+    this.addLog(
+      `${method} ${url}`,
+      statusCode >= 400 ? 'error' : 'info',
+      'network',
+      {
+        method,
+        url,
+        statusCode,
+        duration,
+        request: requestData,
+        response: responseData,
+      },
+      statusCode,
+      duration,
+    );
+  }
+
+  // Authentication events
+  logAuthEvent(event: string, success: boolean, details?: Record<string, any>) {
+    this.addLog(`Auth ${event} ${success ? 'succeeded' : 'failed'}`, success ? 'info' : 'error', 'auth', details);
+  }
+
+  // API interactions
+  logApiCall(
+    endpoint: string,
+    method: string,
+    statusCode: number,
+    duration: number,
+    requestData?: any,
+    responseData?: any,
+  ) {
+    this.addLog(
+      `API ${method} ${endpoint}`,
+      statusCode >= 400 ? 'error' : 'info',
+      'api',
+      {
+        endpoint,
+        method,
+        statusCode,
+        duration,
+        request: requestData,
+        response: responseData,
+      },
+      statusCode,
+      duration,
+    );
+  }
+
+  // Performance monitoring
+  logPerformance(operation: string, duration: number, details?: Record<string, any>) {
+    this.addLog(
+      `Performance: ${operation}`,
+      duration > 1000 ? 'warning' : 'info',
+      'performance',
+      {
+        operation,
+        duration,
+        ...details,
+      },
+      undefined,
+      duration,
+    );
+  }
+
+  // Error logging with stack trace
+  logErrorWithStack(error: Error, category: LogEntry['category'] = 'error', details?: Record<string, any>) {
+    this.addLog(error.message, 'error', category, {
+      ...details,
+      name: error.name,
+      stack: error.stack,
+    });
+  }
+
+  // Refresh logs (useful for real-time updates)
+  refreshLogs() {
+    const currentLogs = this._logs.get();
+    this._logs.set({ ...currentLogs });
+  }
 }
 
 export const logStore = new LogStore();

app/routes/api.system.app-info.ts

@@ -0,0 +1,45 @@
+import type { ActionFunctionArgs } from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
+
+interface PackageJson {
+  name: string;
+  version: string;
+  description: string;
+  license: string;
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
+}
+
+const packageJson = {
+  name: 'bolt.diy',
+  version: '0.1.0',
+  description: 'A DIY LLM interface',
+  license: 'MIT',
+  dependencies: {
+    '@remix-run/cloudflare': '^2.0.0',
+    react: '^18.0.0',
+    'react-dom': '^18.0.0',
+    typescript: '^5.0.0',
+  },
+  devDependencies: {
+    '@types/react': '^18.0.0',
+    '@types/react-dom': '^18.0.0',
+  },
+} as PackageJson;
+
+export const action = async ({ request: _request }: ActionFunctionArgs) => {
+  try {
+    return json({
+      name: packageJson.name,
+      version: packageJson.version,
+      description: packageJson.description,
+      license: packageJson.license,
+      nodeVersion: process.version,
+      dependencies: packageJson.dependencies,
+      devDependencies: packageJson.devDependencies,
+    });
+  } catch (error) {
+    console.error('Failed to get webapp info:', error);
+    return json({ error: 'Failed to get webapp information' }, { status: 500 });
+  }
+};

changelogUI.md

@@ -1,214 +0,0 @@
-# Bolt DIY UI Overhaul
-
-## New User Interface Features
-
-### 🎨 Redesigned Control Panel
-
-The Bolt DIY interface has been completely redesigned with a modern, intuitive layout featuring two main components:
-
-1. **Users Window** - Main control panel for regular users
-2. **Developer Window** - Advanced settings and debugging tools
-
-### 💡 Core Features
-
-- **Drag & Drop Tab Management**: Customize tab order in both User and Developer windows
-- **Dynamic Status Updates**: Real-time status indicators for updates, notifications, and system health
-- **Responsive Design**: Beautiful transitions and animations using Framer Motion
-- **Dark/Light Mode Support**: Full theme support with consistent styling
-- **Improved Accessibility**: Using Radix UI primitives for better accessibility
-- **Enhanced Provider Management**: Split view for local and cloud providers
-- **Resource Monitoring**: New Task Manager for system performance tracking
-
-### 🎯 Tab Overview
-
-#### User Window Tabs
-
-1. **Profile**
-
-   - Manage user profile and account settings
-   - Avatar customization
-   - Account preferences
-
-2. **Settings**
-
-   - Configure application preferences
-   - Customize UI behavior
-   - Manage general settings
-
-3. **Notifications**
-
-   - Real-time notification center
-   - Unread notification tracking
-   - Notification preferences
-
-4. **Features**
-
-   - Explore new and upcoming features
-   - Feature preview toggles
-   - Early access options
-
-5. **Data**
-
-   - Data management tools
-   - Storage settings
-   - Backup and restore options
-
-6. **Cloud Providers**
-
-   - Configure cloud-based AI providers
-   - API key management
-   - Cloud model selection
-   - Provider-specific settings
-   - Status monitoring for each provider
-
-7. **Local Providers**
-
-   - Manage local AI models
-   - Ollama integration and model updates
-   - LM Studio configuration
-   - Local inference settings
-   - Model download and updates
-
-8. **Task Manager**
-
-   - System resource monitoring
-   - Process management
-   - Performance metrics
-   - Resource usage graphs
-   - Alert configurations
-
-9. **Connection**
-
-   - Network status monitoring
-   - Connection health metrics
-   - Troubleshooting tools
-   - Latency tracking
-   - Auto-reconnect settings
-
-10. **Debug**
-
-    - System diagnostics
-    - Performance monitoring
-    - Error tracking
-    - Provider status checks
-    - System information
-
-11. **Event Logs**
-
-    - Comprehensive system logs
-    - Filtered log views
-    - Log management tools
-    - Error tracking
-    - Performance metrics
-
-12. **Update**
-    - Version management
-    - Update notifications
-    - Release notes
-    - Auto-update configuration
-
-#### Developer Window Enhancements
-
-- **Advanced Tab Management**
-
-  - Fine-grained control over tab visibility
-  - Custom tab ordering
-  - Tab permission management
-  - Category-based organization
-
-- **Developer Tools**
-  - Enhanced debugging capabilities
-  - System metrics and monitoring
-  - Performance optimization tools
-  - Advanced logging features
-
-### 🚀 UI Improvements
-
-1. **Enhanced Navigation**
-
-   - Intuitive back navigation
-   - Breadcrumb-style header
-   - Context-aware menu system
-   - Improved tab organization
-
-2. **Status Indicators**
-
-   - Dynamic update badges
-   - Real-time connection status
-   - System health monitoring
-   - Provider status tracking
-
-3. **Profile Integration**
-
-   - Quick access profile menu
-   - Avatar support
-   - Fast settings access
-   - Personalization options
-
-4. **Accessibility Features**
-   - Keyboard navigation
-   - Screen reader support
-   - Focus management
-   - ARIA attributes
-
-### 🛠 Technical Enhancements
-
-- **State Management**
-
-  - Nano Stores for efficient state handling
-  - Persistent settings storage
-  - Real-time state synchronization
-  - Provider state management
-
-- **Performance Optimizations**
-
-  - Lazy loading of tab contents
-  - Efficient DOM updates
-  - Optimized animations
-  - Resource monitoring
-
-- **Developer Experience**
-  - Improved error handling
-  - Better debugging tools
-  - Enhanced logging system
-  - Performance profiling
-
-### 🎯 Future Roadmap
-
-- [ ] Additional customization options
-- [ ] Enhanced theme support
-- [ ] More developer tools
-- [ ] Extended API integrations
-- [ ] Advanced monitoring capabilities
-- [ ] Custom provider plugins
-- [ ] Enhanced resource management
-- [ ] Advanced debugging features
-
-## 🔧 Technical Details
-
-### Dependencies
-
-- Radix UI for accessible components
-- Framer Motion for animations
-- React DnD for drag and drop
-- Nano Stores for state management
-
-### Browser Support
-
-- Modern browsers (Chrome, Firefox, Safari, Edge)
-- Progressive enhancement for older browsers
-
-### Performance
-
-- Optimized bundle size
-- Efficient state updates
-- Minimal re-renders
-- Resource-aware operations
-
-## 📝 Contributing
-
-We welcome contributions! Please see our contributing guidelines for more information.
-
-## 📄 License
-
-MIT License - see LICENSE for details