⚠️ This repository has been archived. BrainDrive is building a new personal AI system on top of the Personal AI Architecture — an MIT-licensed, open architecture with zero lock-in. See the architecture repo for the foundation, and visit braindrive.ai for updates.
A working demonstration plugin for BrainDrive's Settings Service Bridge functionality. This plugin showcases persistent configuration management within the BrainDrive platform through an interactive theme selector that demonstrates comprehensive error handling and best practices.
This plugin serves as a working demo of BrainDrive's Settings Service Bridge, demonstrating:
- How to store and retrieve user settings in BrainDrive
- Persistent configuration management across sessions
- Settings Service Bridge integration patterns
- Production-ready error handling and best practices
- Proper user scope management for settings
Theme Selector - Interactive theme switcher with comprehensive error handling
- Switch between light and dark themes
- Persistent theme storage using Settings Service Bridge
- Real-time theme application with CSS variables
- Production-ready error handling with retry logic
- Service validation and graceful degradation
- Complete Settings Service wrapper implementation
- Proper service bridge connection handling
- User-scoped settings management
- Comprehensive error categorization and handling
- Retry logic with exponential backoff
- BrainDrive platform (this plugin runs inside BrainDrive)
- Plugin Manager access in BrainDrive
- Install the plugin through BrainDrive's Plugin Manager
- The plugin will be available in your module library
- Create a new page in BrainDrive
- Add the demo module to your page:
- Drag "Theme Selector" module to the page
- Test the functionality:
- Click "Light Theme" or "Dark Theme" buttons
- Watch the theme change within the plugin component
- Refresh the page to see settings persistence
- Monitor error handling and retry behavior
Important Demo Note: This plugin demonstrates Settings Service Bridge usage only. Theme changes are saved to the database but don't affect the global app theme since this is an isolated demo. In a real implementation, the theme provider would listen for setting changes and update the entire application.
- Theme Switching: Toggle between light and dark themes
- Real-time Application: Immediate visual feedback with CSS variables
- Persistent Storage: Settings saved using Settings Service Bridge
- Error Handling: Comprehensive error categorization and recovery
- Service Status: Visual indicators for service availability
- Retry Logic: Automatic retry with exponential backoff for transient failures
- Graceful Degradation: Fallback to defaults when services fail
- Developer Insights: Real-time status updates and detailed logging
This plugin demonstrates key Settings Service Bridge concepts:
// How the Settings Service Bridge is used
await this.props.services.settings.getSetting('theme_settings', { userId: 'current' });
await this.props.services.settings.setSetting('theme_settings', settingsData, { userId: 'current' });// Get user-scoped settings
const themeSettings = await this.props.services.settings.getSetting(
'theme_settings',
{ userId: 'current' }
);
// Save user-scoped settings
await this.props.services.settings.setSetting(
'theme_settings',
{ theme: 'dark', useSystemTheme: false },
{ userId: 'current' }
);// Service validation
private async validateServices(): Promise<void> {
if (!this.props.services?.settings) {
throw new Error('Settings service is not available');
}
}
// Retry logic with exponential backoff
private async retryOperation<T>(operation: () => Promise<T>): Promise<T> {
// Implements 1s, 2s, 4s retry delays
}After using this demo, developers will understand:
- How BrainDrive's Settings Service Bridge works
- Patterns for persistent configuration management
- User-scoped settings storage and retrieval
- Production-ready error handling techniques
- Service validation and graceful degradation
- Retry logic implementation with exponential backoff
- Transactional operations with rollback capabilities
- Place the Theme Selector module on a BrainDrive page
- Click between "Light Theme" and "Dark Theme" buttons
- Watch the theme change in real-time
- Refresh the page to verify settings persistence
- Monitor the status indicators for service health
- Test with network disconnection to see retry behavior
- Monitor browser console for detailed error handling logs
- Test service unavailability scenarios
- Verify rollback behavior on failed operations
- Check settings persistence across browser sessions
- Class-based React components for BrainDrive compatibility
- Proper webpack configuration for plugin loading
- Service bridge integration following BrainDrive patterns
interface ThemeSettings {
theme: 'light' | 'dark'; // Current theme selection
useSystemTheme: boolean; // Whether to follow system theme
}- Network Errors: Connection issues, timeouts (retryable)
- Service Errors: Service unavailable (retryable)
- Permission Errors: Authorization failures (not retryable)
- Validation Errors: Invalid data provided (not retryable)
- Generic Errors: Unknown errors (potentially retryable)
- Service validation on component mount
- Proper settings loading with error handling
- Cleanup and error recovery patterns
This plugin serves as a reference implementation for:
- Settings Service Bridge integration
- Production-ready error handling patterns
- User-scoped configuration management
- Service validation and graceful degradation
- Retry logic with exponential backoff
src/components/ThemeSelector.tsx- Main demo component with comprehensive error handlingsrc/styles/theme-settings.css- Theme-aware CSS with CSS variableslifecycle_manager.py- Plugin lifecycle managementREADME.md- This comprehensive documentation
- BrainDrive Platform: This plugin must run inside BrainDrive
- Settings Service: Requires BrainDrive's Settings Service to be available
- User Authentication: Requires authenticated user for user-scoped settings
- Settings not persisting: Ensure Settings Service is available in BrainDrive
- Theme not applying: Check CSS variable support in browser
- Service errors: Verify Settings Service Bridge is properly initialized
- Check browser console for Settings Service logs
- Monitor service status indicators in the component
- Use retry count display to track error recovery attempts
- Verify user authentication for user-scoped settings
The component provides user-friendly error messages:
- "Settings service unavailable - using default theme"
- "Network connection issue. Please check your connection."
- "You do not have permission to access settings."
- "Invalid settings data provided."
Experience BrainDrive's Settings Service Bridge in Action! ⚙️
This is a demonstration plugin designed to run within the BrainDrive platform. It showcases persistent configuration management capabilities with production-ready error handling.