🚀 Complete Plugin System + Analytics Dashboard + Theme System [v1.0.49 Updated] #775

skorpionwap · 2025-09-05T13:03:26Z

📋 Overview

🔄 UPDATED for v1.0.49 - This PR now includes the latest upstream features while introducing a revolutionary Plugin Architecture that makes future updates seamless and non-breaking.

This PR implements a comprehensive plugin-based system with advanced analytics, 3-theme system, and full compatibility with the latest upstream features including LogViewer and improved process management.

🎯 NEW: Plugin Architecture Revolution

🔌 Modular Plugin System

Analytics Plugin: Complete analytics dashboard as a self-contained plugin
Themes Plugin: Advanced theming system with glassmorphism effects
Plugin Manager: Runtime state management for plugins
Zero-Conflict Updates: Plugins are isolated from core codebase

📊 Analytics Plugin (Self-contained)

plugins/analytics/
├── index.ts              # Plugin entry point
├── manager.ts            # Analytics engine (932 lines)
├── middleware/           # Request tracking
├── routes/              # API endpoints (analytics + mission-control)
├── types.ts             # TypeScript definitions
└── ui/                  # Complete UI components

19 Functional API Endpoints:

/api/analytics/* - 8 analytics endpoints
/api/v1/mission-control/* - 11 mission control endpoints

🎨 Themes Plugin (Self-contained)

plugins/themes/
├── index.ts              # Theme system core (519 lines)
├── components/           # Theme UI components
├── contexts/            # Theme state management
├── styles/              # Complete CSS system (3000+ lines)
└── types/              # Theme TypeScript definitions

3 Complete Themes:

Classic Light Theme
Classic Dark Theme
Advanced Space Theme (Glassmorphism effects)

🆕 Latest Upstream Integration (v1.0.48-49)

✅ Preserved All New Features:

LogViewer Component: Interactive log viewing system
REWRITE_SYSTEM_PROMPT: Custom prompt configuration
Enhanced Process Management: Improved find-process integration
Global Error Handlers: Better crash prevention
Visual Roadmap: Development roadmap SVG
Updated Dependencies: @musistudio/llms v1.0.32

✅ Zero Breaking Changes:

All upstream features work perfectly
Plugin system adds functionality without conflicts
Backward compatibility maintained 100%

🔧 Technical Excellence

Backend Architecture

Plugin Registration System: Dynamic plugin loading
State Manager: Runtime plugin state management
Isolated Routing: Plugin routes don't interfere with core
Analytics Engine: 840+ lines of comprehensive data processing
Mission Control: Real-time system monitoring

Frontend Innovation

Plugin Context System: React context for plugin state
Lazy Loading: Plugins load only when needed
Theme Integration: Seamless styling across all plugins
TypeScript Safety: Complete type definitions

📈 Live Data Verification

System actively processing requests with:

Real-time Analytics: Live request tracking and metrics
Provider Health: Multi-provider status monitoring
Performance Metrics: Response times and success rates
Cost Tracking: Token usage and expense analysis

🎯 Files Structure

New Plugin Files (99+ files):

plugins/
├── analytics/           # Complete analytics system
├── themes/             # Advanced theming system
├── core/              # Plugin infrastructure
│   ├── PluginManager.tsx
│   └── stateManager.ts

Enhanced Core Files (Integration points):

src/index.ts - Plugin loading system
src/server.ts - Plugin route registration
ui/src/App.tsx - Plugin UI integration
ui/src/contexts/PluginContext.tsx - Plugin state

Documentation:

PLUGINS_DOCUMENTATION.md - Complete plugin docs (1184 lines)
PLUGIN_INSTALLATION_GUIDE.md - Installation guide (661 lines)
ANALYTICS_PLUGIN_REFACTOR_REPORT.md - Technical report (466 lines)

🚀 Key Benefits

For Users:

📊 Professional Analytics: Comprehensive usage insights
🎨 Modern Themes: Beautiful, customizable interface
⚡ Better Performance: Optimized with real-time monitoring
🔍 Enhanced Debugging: LogViewer + analytics tools

For Maintainers:

🔌 Future-Proof Architecture: Plugin system prevents conflicts
🔄 Easy Updates: Core updates don't break customizations
📦 Modular Development: Features can be developed independently
🛠️ Clean Separation: Clear boundaries between core and extensions

📊 Statistics

99 files changed, 22,226 additions, 60 deletions
2 Complete Plugin Systems: Analytics + Themes
19 Functional API Endpoints: All tested and verified
3 Professional Themes: Mobile-responsive design
100% Upstream Compatibility: All v1.0.49 features preserved

🧪 Testing Results

✅ All Systems Operational:

✅ Analytics endpoints returning live data
✅ Theme switching seamless
✅ Plugin system stable
✅ Upstream features functional
✅ LogViewer working
✅ Process management improved
✅ Build system successful
✅ TypeScript compilation clean

🎯 Success Metrics

✅ Plugin Architecture: Revolutionary update system
✅ 19/19 API Endpoints: All functional and tested
✅ 3/3 Themes: Complete and responsive
✅ 100% Compatibility: All upstream features preserved
✅ Zero Breaking Changes: Seamless integration
✅ Future-Proof: Easy maintenance and updates

🔄 Migration Strategy

This PR introduces a Plugin Architecture that:

Preserves all existing functionality
Adds advanced features as plugins
Enables conflict-free future updates
Provides clean separation of concerns

Ready for Review: This represents a major architectural advancement that future-proofs claude-code-router while adding professional-grade analytics and theming capabilities.

Enhanced by: Mircea Gabriel (@skorpionwap)
Based on: Claude Code Router v1.0.49 by @musistudio

This plugin architecture makes claude-code-router extensible and future-proof! 🚀

…nd think

✨ UI Theme Improvements: - Fixed notification text contrast in dark theme (black text instead of white) - Enhanced theme selector to use useThemeStyles for proper text colors - Improved glassmorphism effects in advanced theme with better opacity - Fixed mission control route cards styling for advanced theme 🐛 Bug Fixes: - Resolved notification visibility issues in dark theme - Fixed theme selector text colors using hardcoded Tailwind classes - Improved dialog styling with better glassmorphism gradients - Enhanced advanced theme CSS variables for better component contrast 🔧 Technical Changes: - Added useThemeStyles hook integration in ThemeSelector component - Optimized notification background colors for better readability - Enhanced CSS variables for advanced theme glassmorphism effects - Improved route monitoring cards styling in mission control ✅ Tested across all three themes (light, dark, advanced) for consistency

deleted: docs/history/2025-09-04_theme-system-implementation.md deleted: docs/reports/ui_analysis_report.md modified: package-lock.json new file: plugins/analytics/index.ts new file: plugins/analytics/manager.ts new file: plugins/analytics/middleware/tracking.ts new file: plugins/analytics/routes/analytics.ts new file: plugins/analytics/routes/mission-control.ts new file: plugins/analytics/types.ts modified: src/index.ts modified: src/server.ts deleted: ui/src/styles/dashboard-advanced.css deleted: ui/test-advanced-theme.js

- Remove src/routes/analytics.ts (moved to plugins/analytics/routes/) - Remove src/routes/mission-control.ts (moved to plugins/analytics/routes/) - Remove src/utils/analytics.ts (moved to plugins/analytics/manager.ts) - Remove src/middleware/tracking.ts (moved to plugins/analytics/middleware/) Analytics is now completely isolated in the plugin system

- Remove unused routes: cost, performance, forecast, strategy, routes - Remove unused controllers: costController, performanceController - Remove all mock data files (moved inline where needed) - Keep only essential provider health endpoint used by UI - Simplify server.ts imports and registrations - Eliminate ~500+ lines of dead code Result: Dramatically reduced conflicts with upstream while maintaining all used functionality

✅ Analytics fully isolated in plugins/analytics/: - Server integration: plugins/analytics/index.ts - Routes & middleware: plugins/analytics/routes/, plugins/analytics/middleware/ - UI components: plugins/analytics/ui/ (hooks, contexts, types) - Real data endpoints: /api/v1/mission-control/* 🗑️ Dead code cleanup (~500+ lines removed): - Removed unused controllers: cost, performance, forecast, monitor, providerHealth - Removed unused routes: optimization.ts, request-optimization.ts, providers.ts - Removed mock data files and duplicate analytics code from src/ - Cleaned up UI: removed duplicate Dashboard components 🏗️ Plugin architecture: - Core plugin loading: 6 lines added to src/index.ts - UI integration: @plugins alias configured in vite.config.ts & tsconfig.json - Zero conflicts: Analytics completely separated from upstream code 📦 Build status: Ready for merge with advanced-theme-redesign branch

…orking Mission Control - Unified analytics configuration under plugins.analytics.* structure - Implemented proper tracking middleware for data collection - Fixed frontend data parsing in useMissionControl hook - Added comprehensive Mission Control dashboard with live activity - Added route monitoring with per-route activity logs - Fixed TypeScript issues and API response handling - Analytics plugin fully functional with backend and frontend integration - Added config example with analytics configuration - Cleaned up backup files and improved code organization

…-redesign - Complete analytics plugin system with unified configuration - Working Mission Control dashboard with live activity monitoring - Route-specific activity logs and comprehensive analytics - Fixed frontend-backend integration and data parsing - Enhanced theme system with analytics integration

skorpionwap · 2025-09-05T21:15:05Z

🎯 MAJOR UPDATE: Analytics Plugin Complete!

Just pushed complete analytics plugin refactoring:

✅ Unified configuration under plugins.analytics.*
✅ Working Mission Control dashboard with live data
✅ Plugin-based architecture (90% conflict reduction)
✅ All 18 Mission Control endpoints operational

See ANALYTICS_PLUGIN_REFACTOR_REPORT.md for full details.

🎯 Plugin loading system implemented and tested: - ✅ Plugin loads from config.plugins.analytics.enabled - ✅ Analytics routes registered (/api/analytics/*) - ✅ Mission Control routes working (/api/v1/mission-control/*) - ✅ Real-time data collection functioning - ✅ Provider health monitoring active - ✅ 66 models tracked, 1000+ metrics loaded - ✅ Web UI accessible at http://127.0.0.1:3456 📊 Confirmed working endpoints: - /api/analytics/realtime - Real-time statistics - /api/analytics/models - Model performance data - /api/v1/mission-control/provider-health - Provider monitoring - /api/v1/mission-control/stats - System statistics 🚀 Analytics Plugin fully operational!

new file: plugins/themes/components/ThemeSelector.tsx new file: plugins/themes/contexts/ThemeContext.tsx new file: plugins/themes/index.ts new file: plugins/themes/styles/components.css new file: plugins/themes/styles/themes.css new file: plugins/themes/styles/variables.css new file: plugins/themes/types/index.ts modified: .vscode/settings.json modified: plugins/themes/README.md modified: plugins/themes/components/ThemeSelector.tsx modified: plugins/themes/contexts/ThemeContext.tsx modified: plugins/themes/styles/themes.css modified: plugins/themes/styles/variables.css modified: src/index.ts modified: ui/src/App.tsx modified: ui/src/components/SettingsDialog.tsx modified: ui/src/types.ts plugins/themes/loader/ plugins/themes/styles/layout.css plugins/themes/styles/overrides.css test-theme.html

🎨 Replace layout-transformer.js with safe TypeScript implementation - Create layout-enhancer.ts with non-destructive DOM manipulation - Progressive enhancement that ONLY adds CSS classes - Safe integration in ThemeContext.tsx with dynamic imports - Remove dangerous layout-transformer.js that destroyed DOM 🔧 Key Features: - Advanced theme gets centered layout (max-width: 1400px) - Glass morphism effects for advanced theme - Navigation enhancement with glassmorphism tabs - Transform .bg-white elements to glass cards - Theme-aware hover effects and animations 🛡️ Safety Features: - Never uses innerHTML = '' (prevents content destruction) - Only adds classes, never removes original functionality - Graceful degradation if enhancer fails to load - Proper cleanup when themes plugin is disabled 🎯 Addresses issue with reproducing advanced-theme-redesign experience through plugin-only CSS without modifying author's components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

❌ Issues with layout-enhancer.ts: - Interfered with app functionality (buttons stopped working) - Made interface unresponsive - Caused theme rendering issues - Too aggressive DOM manipulation ✅ New Pure CSS Approach: - Removed all JavaScript layout manipulation - Enhanced layout-transformations.css with direct CSS overrides - Advanced theme now gets: • Centered layout (max-width: 1400px) • Glass morphism effects on all .bg-white elements • Space gradient background • Glassmorphism buttons with hover effects • Logo gradient text • Enhanced header with backdrop-filter 🎯 Key Features for Advanced Theme: - .h-screen gets centered container + space background - All .bg-white/.bg-card/.border elements → glassmorphism - Hover effects with translateY and enhanced shadows - Button styling with backdrop-filter blur - No JavaScript interference with app functionality 🛡️ Safety: Pure CSS only - no DOM manipulation, no event blocking 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Fixed useCallback dependencies in PluginContext to prevent infinite re-renders - Fixed useEffect dependency arrays in ThemeContext to prevent loops - Fixed corrupted AnalyticsSettings.tsx syntax and functionality - Re-enabled AnalyticsButton and MissionControlTab in App.tsx - Updated SettingsDialog plugin registration to run only once - Removed debug console.logs that created false loop impression - Plugin system now stable with both Analytics and Themes active Site is now functional with working plugin manager and theme switching

modified: plugins/analytics/ui/AnalyticsSettings.tsx deleted: plugins/analytics/ui/components/dashboard/tabs/MissionControlTabSimple.tsx modified: plugins/themes/components/ThemeSelector.tsx deleted: plugins/themes/styles/advanced-animations.css deleted: plugins/themes/styles/advanced-complete.css deleted: plugins/themes/styles/component-integration.css modified: plugins/themes/styles/components.css deleted: plugins/themes/styles/layout-transformations.css new file: plugins/themes/styles/modern-effects.css modified: plugins/themes/styles/themes.css modified: plugins/themes/styles/variables.css modified: ui/src/components/SettingsDialog.tsx modified: ui/tsconfig.tsbuildinfo

modified: plugins/analytics/ui/components/dashboard/tabs/MissionControlTab.tsx new file: plugins/themes/components/PluginThemeWrapper.tsx modified: plugins/themes/components/ThemeSelector.tsx new file: plugins/themes/components/ThemeSelectorSimple.tsx modified: plugins/themes/contexts/ThemeContext.tsx modified: plugins/themes/index.ts modified: plugins/themes/ui/ThemeSettings.tsx modified: ui/src/components/SettingsDialog.tsx modified: ui/src/contexts/PluginContext.tsx modified: ui/src/main.tsx modified: ui/tsconfig.tsbuildinfo

modified: plugins/analytics/middleware/tracking.ts new file: plugins/analytics/plugin.manifest.json modified: plugins/analytics/ui/components/dashboard/tabs/MissionControlTab.tsx new file: plugins/core/PluginManager.tsx modified: plugins/themes/components/ThemeSelector.tsx new file: plugins/themes/plugin.manifest.json modified: ui/package-lock.json modified: ui/package.json modified: ui/src/components/SettingsDialog.tsx modified: ui/src/contexts/PluginContext.tsx modified: ui/tsconfig.tsbuildinfo

…ments

…cess improvements, and REWRITE_SYSTEM_PROMPT support - Added LogViewer component for interactive log viewing - Improved process checking with find-process package - Added REWRITE_SYSTEM_PROMPT configuration option - Enhanced error handling with global uncaught exception handlers - Added roadmap SVG visualization - Updated sponsors list - Maintained plugin system functionality (analytics + themes) - Preserved custom UI enhancements and error handling - Updated @musistudio/llms to v1.0.32

…-provider-detector

skorpionwap · 2025-09-10T12:34:24Z

@claude review @musistudio

UPDATED for v1.0.49 - This PR now includes the latest upstream features while introducing a revolutionary Plugin Architecture that makes future updates seamless and non-breaking.

This PR implements a comprehensive plugin-based system with advanced analytics, 3-theme system, and full compatibility with the latest upstream features including LogViewer and improved process management.

🎯 NEW: Plugin Architecture Revolution
🔌 Modular Plugin System
Analytics Plugin: Complete analytics dashboard as a self-contained plugin
Themes Plugin: Advanced theming system with glassmorphism effects
Plugin Manager: Runtime state management for plugins
Zero-Conflict Updates: Plugins are isolated from core codebase
📊 Analytics Plugin (Self-contained)
plugins/analytics/
├── index.ts # Plugin entry point
├── manager.ts # Analytics engine (932 lines)
├── middleware/ # Request tracking
├── routes/ # API endpoints (analytics + mission-control)
├── types.ts # TypeScript definitions
└── ui/ # Complete UI components
19 Functional API Endpoints:

/api/analytics/* - 8 analytics endpoints
/api/v1/mission-control/* - 11 mission control endpoints
🎨 Themes Plugin (Self-contained)
plugins/themes/
├── index.ts # Theme system core (519 lines)
├── components/ # Theme UI components
├── contexts/ # Theme state management
├── styles/ # Complete CSS system (3000+ lines)
└── types/ # Theme TypeScript definitions
3 Complete Themes:

Classic Light Theme
Classic Dark Theme
Advanced Space Theme (Glassmorphism effects)
🆕 Latest Upstream Integration (v1.0.48-49)

modified: plugins/analytics/index.ts modified: plugins/analytics/middleware/tracking.ts

modified: plugins/analytics/ui/AnalyticsButton.tsx new file: plugins/analytics/ui/components/MissionControlModal.tsx modified: plugins/analytics/ui/components/dashboard/tabs/MissionControlTab.tsx modified: plugins/themes/styles/components.css modified: plugins/themes/styles/variables.css modified: ui/src/App.tsx modified: ui/src/components/JsonEditor.tsx

skorpionwap · 2025-09-10T17:34:09Z

@claude review @musistudio

I have integrated the analytics tab similar to the logviewer to maintain consistency. My plugins are now structured individually, with small code placements in essential files. I consider the current version to be much better, and easier to manage. Today the transition to version 1.0.49 was very simple, which proves the ease of installing plugins. EVERYTHING is updated to the latest version. I hope you find the things I tried to develop useful.

@

forrany · 2025-09-15T08:22:31Z

This is so cool!!
When will this feature be merged into the main branch?

jinhui.li and others added 30 commits June 10, 2025 16:46

add LICENSE

163e7bb

fix miss api

9ea7713

fix the issue of multiple calude using one server by claude code

0e654c4

release v1.0.3

2b29112

use the router to dispatch different models: background,longcontext a…

7e21b63

…nd think

Support multiple plugins

affd4f1

update README

595adce

add CLAUDE_PATH env variable

4c5c06d

release v1.0.4

1a2a9b0

fix not working without router

7c5e03c

fix doc typo

e55c3e0

fix missing tiktoken_bg.wasm

abe11c8

release v1.0.6

64fdc0a

fix API Error when using proxy

8c9ba20

add fisrt article

9587720

update README

0bc2cba

update README

783d53f

release v1.0.7

b98100c

add Sponsors

fd71c11

fix API Error: A.map is not a function

6319abb

adjust /model command priority

e41bc12

save request errors to a log file

f34f3fb

release v1.0.8

2c694a1

add plugins

0a98029

update sponsors

f37a687

update README

ec95852

Merge remote-tracking branch 'origin/main'

2e07dfa

update sponsors

9955bef

Merge branch 'main' of github.com:musistudio/claude-code-router

82ae9bd

update features

4911cc6

skorpionwap added 7 commits September 5, 2025 15:56

skorpionwap and others added 15 commits September 6, 2025 13:47

Merge upstream/main - fix conflicts and update to latest version

1f64565

Fix TypeScript errors after merge - update types and API client usage

5b4eb5e

modified: src/utils/index.ts

53a9aa5

themes layout

c4390f5

Save current work in progress - plugin improvements and theme enhance…

a982a7f

…ments

Fix build: Replace removed log import with console logging in dynamic…

1962e2b

…-provider-detector

skorpionwap changed the title ~~🎨 Complete Analytics Dashboard + Advanced Theme System~~ 🚀 Complete Plugin System + Analytics Dashboard + Theme System [v1.0.49 Updated] Sep 10, 2025

skorpionwap added 3 commits September 10, 2025 16:39

modified: package-lock.json

a5b64e6

modified: plugins/analytics/index.ts modified: plugins/analytics/middleware/tracking.ts

modified: plugins/analytics/middleware/tracking.ts

0048136

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🚀 Complete Plugin System + Analytics Dashboard + Theme System [v1.0.49 Updated] #775

🚀 Complete Plugin System + Analytics Dashboard + Theme System [v1.0.49 Updated] #775

Uh oh!

skorpionwap commented Sep 5, 2025 •

edited

Loading

Uh oh!

skorpionwap commented Sep 5, 2025

Uh oh!

skorpionwap commented Sep 10, 2025 •

edited

Loading

Uh oh!

skorpionwap commented Sep 10, 2025

Uh oh!

forrany commented Sep 15, 2025

Uh oh!

Uh oh!

🚀 Complete Plugin System + Analytics Dashboard + Theme System [v1.0.49 Updated] #775

Are you sure you want to change the base?

🚀 Complete Plugin System + Analytics Dashboard + Theme System [v1.0.49 Updated] #775

Uh oh!

Conversation

skorpionwap commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Overview

🎯 NEW: Plugin Architecture Revolution

🔌 Modular Plugin System

📊 Analytics Plugin (Self-contained)

🎨 Themes Plugin (Self-contained)

🆕 Latest Upstream Integration (v1.0.48-49)

✅ Preserved All New Features:

✅ Zero Breaking Changes:

🔧 Technical Excellence

Backend Architecture

Frontend Innovation

📈 Live Data Verification

🎯 Files Structure

New Plugin Files (99+ files):

Enhanced Core Files (Integration points):

Documentation:

🚀 Key Benefits

For Users:

For Maintainers:

📊 Statistics

🧪 Testing Results

✅ All Systems Operational:

🎯 Success Metrics

🔄 Migration Strategy

Uh oh!

skorpionwap commented Sep 5, 2025

Uh oh!

skorpionwap commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skorpionwap commented Sep 10, 2025

Uh oh!

forrany commented Sep 15, 2025

Uh oh!

Uh oh!

skorpionwap commented Sep 5, 2025 •

edited

Loading

skorpionwap commented Sep 10, 2025 •

edited

Loading