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

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

  1. Create a new subtheme directory
  2. Add [variant].info.yml configuration
  3. Extend the base theme
  4. 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