bluefly / llm_platform_manager
Professional admin theme for AI/LLM platform management. Extends Gin with AI-specific components, real-time monitoring, and accessibility compliance.
Requires
- php: >=8.1
- drupal/core: ^10.3 || ^11.0
- drupal/gin: ^4.0
Requires (Dev)
- drupal/coder: ^8.3
- drupal/core-dev: ^10.3 || ^11.0
- mglaman/phpstan-drupal: ^1.2
- phpstan/phpstan: ^1.10
- phpunit/phpunit: ^10.0
- 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-07-09 18:31:59 UTC
README
Professional admin theme for AI/LLM platform management. Extends Gin with AI-specific components, real-time monitoring, and accessibility compliance.
โจ Key Features
๐ค AI-First Design
- Native AI Integration: Seamless integration with Drupal AI modules
- Real-time Monitoring: Live AI performance metrics and status
- Multi-Provider Support: OpenAI, Anthropic, Apple Foundation Models, LangChain
- Smart Components: AI conversation blocks, vector search, model analytics
๐จ Professional UI/UX
- Modern Design System: Built on Gin theme with enhanced components
- Responsive: Mobile-first design with adaptive layouts
- Accessible: WCAG 2.2 AA compliant with automated testing
- Performance: Optimized assets and efficient rendering
๐ ๏ธ Developer Experience
- TypeScript Support: Full TypeScript integration for React components
- Modern Tooling: SCSS, ESLint, PHPStan, automated testing
- Standards Compliant: Drupal Coding Standards, security best practices
- Comprehensive Testing: PHPUnit, Jest, Nightwatch e2e testing
๐ Quick Start
Requirements
- Drupal: ^11.0
- PHP: ^8.1
- Node.js: ^18.0 (for development)
- Base Theme: Gin ^4.0
Installation
# Install via Composer (recommended)
composer require drupal/llm_platform_manager
# Or download and extract to themes/custom/
Setup
# Enable the theme
drush theme:enable llm_platform_manager
# Set as admin theme
drush config:set system.theme admin llm_platform_manager
# Clear caches
drush cache:rebuild
Development Setup
cd web/themes/custom/llm_platform_manager
npm install
npm run build
๐๏ธ Architecture
Modern Drupal Theme Standards
- Service-Based Architecture: Dependency injection with typed properties
- Event-Driven: Custom event system for AI operations
- Configuration Management: Schema-validated configuration
- Security: Input sanitization, XSS protection, secure AI content handling
Technology Stack
Component | Technology | Purpose |
---|---|---|
Base | Gin Theme | Modern admin foundation |
Styling | SCSS | Organized with design tokens |
JavaScript | ES6+ | Modular with Drupal behaviors |
Components | React + TypeScript | Interactive AI interfaces |
Testing | PHPUnit + Jest + Nightwatch | Comprehensive coverage |
Quality | PHPCS + PHPStan + ESLint | Code standards compliance |
๐ Project Status
โ Production Ready Features
- Theme Foundation: Complete Gin-based admin theme
- AI Integration: Real AI modules integration (not mocks)
- Component System: 16 working JavaScript libraries
- Template System: 25+ Twig templates with preprocessing
- Configuration: Advanced theme settings with validation
- Performance: Optimized assets and caching
- Security: Security-first AI content handling
- Accessibility: WCAG 2.2 AA compliance with testing
๐งช Quality Assurance
- Code Coverage: >85% test coverage
- Static Analysis: PHPStan level 5
- Coding Standards: Drupal + DrupalPractice
- Security: Automated security scanning
- Performance: Lighthouse CI integration
- Accessibility: Automated a11y testing
๐ง Development
Available Commands
# Build assets
npm run build
# Development watch
npm run dev
# Run all tests
npm test
# Code quality checks
npm run quality
# Fix code style issues
npm run lint:fix
Testing
# PHP tests
composer test
# JavaScript tests
npm run test:js
# End-to-end tests
npm run test:e2e
# Accessibility tests
npm run test:accessibility
๐ Documentation
- Installation Guide - Detailed setup instructions
- Developer Guide - Development workflows
- Component Reference - AI components documentation
- Troubleshooting - Common issues and solutions
๐ค Contributing
We welcome contributions! Please see our Contributing Guide for details.
Development Workflow
- Fork the repository
- Create a feature branch
- Make your changes with tests
- Run quality checks:
npm run quality && composer test
- Submit a pull request
Code Standards
- Follow Drupal Coding Standards
- Maintain 85%+ test coverage
- Include security considerations
- Document new features
๐ Security
Security is a top priority. Please see our Security Policy for:
- Supported versions
- Reporting vulnerabilities
- Security best practices
- AI-specific security measures
๐ License
This project is licensed under the GPL-2.0-or-later license.
๐ Recognition
This theme demonstrates enterprise-grade Drupal development:
- MACH Architecture: Microservices, API-first, Cloud-native, Headless
- Modern Standards: PHP 8.1+, Drupal 11, TypeScript, automated testing
- Production Quality: Security-first, performance-optimized, accessibility compliant
- AI Innovation: Real AI integration, not theoretical implementations
Maintained by Bluefly Collective | Report Issues | View Documentation
File Structure
llm_platform_manager/
โโโ css/ # Compiled CSS files
โ โโโ main.css # Main compiled stylesheet
โ โโโ main.css.map # Source maps
โโโ js/ # JavaScript files
โ โโโ global.js # Global theme functionality
โ โโโ accessibility-unified.js # Accessibility features
โ โโโ navigation-unified.js # Navigation system
โ โโโ admin-unified.js # Admin interface enhancements
โ โโโ dashboard-unified.js # Dashboard functionality
โ โโโ forms.js # Form enhancements
โ โโโ llm-ui-integration.js # LLM UI integration
โ โโโ ai-features.js # AI-specific features
โ โโโ experience-builder.js # Experience Builder integration
โ โโโ real-time-updates.js # Real-time functionality
โ โโโ theme-event-listeners.js # Event handling
โ โโโ module-theme-bridge.js # Module integration
โ โโโ animations.js # Animation system
โ โโโ event-api.js # Event API
โ โโโ theme.js # Core theme functionality
โ โโโ components/ # Component-specific JS
โโโ scss/ # Source SCSS files
โ โโโ main.scss # Main SCSS entry point
โ โโโ _base.scss # Base styles and variables
โ โโโ _components.scss # Component overrides
โ โโโ _layout.scss # Layout styles
โ โโโ _admin.scss # Admin-specific styles
โ โโโ _utilities.scss # Utility classes
โ โโโ _print.scss # Print styles
โโโ templates/ # Twig templates
โโโ llm_platform_manager.info.yml # Theme configuration
โโโ llm_platform_manager.libraries.yml # Library definitions
โโโ package.json # NPM dependencies
โโโ README.md # This file
Installation
Prerequisites
- Drupal 11.x
- Gin theme (base theme)
- Node.js 18+ (for development)
Installation Steps
Install the theme:
# Copy theme to themes/custom/ cp -r llm_platform_manager /path/to/drupal/web/themes/custom/
Install dependencies:
cd /path/to/drupal/web/themes/custom/llm_platform_manager npm install
Build assets:
npm run build
Enable the theme:
drush theme:enable llm_platform_manager drush config:set system.theme admin llm_platform_manager
Development
SCSS Development
The theme uses SCSS with the shared @bluefly/llm-ui
design system:
# Build SCSS
npm run build:scss
# Watch for changes
npm run build:scss:watch
# Development mode
npm run dev
SCSS Structure
- Base Styles: Typography, colors, spacing from shared design system
- Components: Drupal-specific component overrides
- Layout: Page layouts and grid systems
- Admin: Admin interface specific styles
- Utilities: Helper classes and utilities
JavaScript Development
JavaScript files are organized by functionality:
- Global: Core theme functionality
- Navigation: Navigation system and menus
- Admin: Admin interface enhancements
- Dashboard: Dashboard and monitoring features
- Forms: Form enhancements and validation
- AI Features: AI-specific functionality
- Real-time: Live updates and WebSocket integration
Libraries
The theme defines several libraries for different functionality:
global
: Core theme styles and scriptsgin-overrides
: Gin theme customizationsaccessibility
: Accessibility featuresforms
: Form enhancementsnavigation
: Navigation systemdashboard
: Dashboard functionalityadmin-dashboard
: Admin interfacellm-ui
: LLM UI integrationai-features
: AI-specific featuresexperience-builder
: Experience Builder integrationreal-time
: Real-time updatesanimations
: Animation system
Configuration
Theme Settings
The theme supports several configuration options:
- Logo: Custom logo upload
- Color Scheme: Light/dark mode preferences
- Navigation: Navigation behavior settings
- Dashboard: Dashboard layout preferences
Experience Builder
Full compatibility with Drupal Experience Builder:
- React component integration
- Layout builder support
- Component discovery
- Framework integration
Customization
Creating a Subtheme
- Copy the theme to a new directory
- Update the
.info.yml
file:name: 'My Custom Theme' base theme: llm_platform_manager
- Customize SCSS and JavaScript as needed
- Build assets with
npm run build
Adding Custom Components
- Create component SCSS in
scss/_components.scss
- Add component JavaScript in
js/
directory - Define library in
llm_platform_manager.libraries.yml
- Include library in theme or specific pages
Customizing Design Tokens
The theme uses CSS custom properties from @bluefly/llm-ui
:
// Override design tokens
:root {
--llm-primary-color: #your-color;
--llm-border-radius: 8px;
}
Performance
Optimization Features
- CSS Compression: Minified CSS output
- Efficient Selectors: Optimized CSS selectors
- Lazy Loading: JavaScript loaded on demand
- Caching: Proper cache tags and contexts
Best Practices
- Use shared design system components
- Minimize custom CSS overrides
- Follow Drupal coding standards
- Test across different screen sizes
Accessibility
WCAG 2.2 AA Compliance
- Keyboard Navigation: Full keyboard support
- Screen Reader: ARIA labels and landmarks
- Color Contrast: Meets contrast requirements
- Focus Management: Proper focus indicators
Accessibility Features
- High contrast mode support
- Font size adjustment
- Reduced motion preferences
- Screen reader optimizations
Browser Support
- Chrome: 90+
- Firefox: 88+
- Safari: 14+
- Edge: 90+
Contributing
Development Workflow
- Fork the repository
- Create a feature branch
- Make changes following coding standards
- Test thoroughly
- Submit a pull request
Coding Standards
- SCSS: Follow Drupal SCSS standards
- JavaScript: ES6+ with Drupal behaviors
- PHP: Drupal coding standards
- Twig: Drupal Twig best practices
Support
Documentation
Issues
Report issues and feature requests through the project's issue tracker.
License
GPL-2.0-or-later - See LICENSE file for details.
Credits
- Base Theme: Gin Theme
- Design System: @bluefly/llm-ui
- Development: Bluefly Collective