bluefly / llm_platform_manager
Professional admin theme for AI/LLM platform management. Extends Gin with AI-specific components, real-time monitoring, and accessibility compliance.
dev-feature/theme-api-first-tdd-20250802
2025-08-02 15:40 UTC
Requires
- php: >=8.1
Requires (Dev)
- drupal/coder: ^8.3
- phpstan/phpstan: ^1.10
- squizlabs/php_codesniffer: ^3.7
Suggests
- drupal/admin_toolbar: Enhanced admin toolbar compatibility
- drupal/ai: Core AI module for enhanced AI integration
- drupal/gin_toolbar: Enhanced toolbar for Gin-based themes
- drupal/llm: LLM module for language model integration
This package is auto-updated.
Last update: 2025-08-25 14:13:56 UTC
README
Enterprise-grade Drupal theme system with multiple industry-specific variants, powered by @bluefly/llm-ui React components.
Features
- 🎨 8 Industry Variants: Enterprise, Government, Healthcare, Financial, Developer, Education, Startup, Nonprofit
- ⚛️ React Components: Integrated @bluefly/llm-ui for modern UI components
- 🔐 Compliance Ready: SOC2, HIPAA, FedRAMP, PCI DSS, GDPR configurations
- 🌓 Dark/Light Modes: Automatic theme switching based on context
- ♿ WCAG AAA: Full accessibility compliance
- 📱 Responsive: Mobile-first design approach
- 🚀 Real-time: WebSocket support for live updates
- 🔌 Module Integration: Works with all LLM Platform custom modules
Installation
# Install the theme
cd web/themes/custom/llm_platform_manager
npm install
# Build assets
npm run build
# Enable in Drupal
drush theme:enable llm_platform_manager
drush config:set system.theme default llm_platform_manager
Theme Variants
Enterprise
- Fortune 500 focused
- SOC2, ISO27001 compliant
- Multi-tenant support
- Advanced audit trails
Government
- US Web Design System (USWDS)
- FedRAMP, FISMA compliant
- Classification banners
- PIV authentication ready
Healthcare
- HIPAA compliant
- EHR integration ready
- Clinical workflows
- Patient privacy focused
Financial
- Real-time trading dashboards
- SOX, PCI DSS compliant
- Risk analytics
- Fraud detection
Developer
- Dark mode by default
- Code editor integration
- API explorer
- DevOps dashboards
Education
- FERPA compliant
- LMS integration
- Accessibility tools
- Student/parent portals
Using @bluefly/llm-ui Components
The theme integrates with @bluefly/llm-ui v2.0.1 for React components:
// In a custom block or controller
$build = \Drupal::service('llm_platform_manager.ui_bridge')->renderComponent('AIDashboard', [
'title' => 'AI Control Center',
'providers' => $providers,
'metrics' => $metrics,
'websocketUrl' => 'ws://localhost:4000/ws'
]);
Available Components
- AIDashboard: Main AI platform control center
- ProviderCard: LLM provider status cards
- RealtimeMetrics: Live metric visualization
- DashboardStat: Enhanced statistics display
- ChatInterface: AI chat interface
- ModelSelector: Model selection dropdown
- TokenUsageIndicator: Token usage tracking
Configuration
Theme Settings
Edit llm_platform_manager.settings.yml
:
default_variant: enterprise
websocket_url: 'ws://localhost:4000/ws'
api_endpoint: 'http://localhost:4000/api/v1'
Per-User Variant Selection
Users can select their preferred theme variant in their account settings.
Domain-Based Variants
The theme automatically selects variants based on domain:
*.gov.*
→ Government variant*.health.*
or*.med.*
→ Healthcare variant*.finance.*
or*.bank.*
→ Financial variant
Development
File Structure
llm_platform_manager/
├── src/
│ ├── ThemeEngine/
│ │ ├── DesignSystem.php # Design tokens
│ │ ├── ComponentRegistry.php # Component management
│ │ └── ThemeVariantManager.php # Variant switching
│ ├── Plugin/Block/
│ │ └── AIDashboardBlock.php # Dashboard block
│ └── LLMUIBridge.php # React bridge
├── subthemes/ # Industry variants
│ ├── enterprise/
│ ├── government/
│ ├── healthcare/
│ ├── financial/
│ ├── developer/
│ └── education/
├── js/
│ └── llm-ui-bridge.js # React integration
├── css/ # Compiled styles
├── scss/ # Source styles
└── templates/ # Twig templates
Building Assets
# Watch for changes
npm run dev
# Production build
npm run build
# Compile SASS
npm run sass
Creating a Custom Variant
- Create a new subtheme directory
- Add
[variant].info.yml
configuration - Extend the base theme
- Register in ThemeVariantManager
API Integration
The theme connects to the LLM Gateway at http://localhost:4000/api/v1
for:
- Provider status
- Real-time metrics
- WebSocket updates
- Model management
Performance
- Lazy loading of React components
- CDN delivery via unpkg.com
- Aggressive caching
- Virtual scrolling for large datasets
- WebSocket connection pooling
Browser Support
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS 14+, Android 10+)
License
MIT