onOpenChange(false)}
+ />
+ )}
+
+ {/* Modal container - exact same structure as LogViewer */}
+
+ {/* Header - same style as LogViewer */}
+
+
+
Mission Control Dashboard
+
+
+
+
+ {/* Content container - full height with scrolling */}
+
+
+
+ );
+};
+
+export default MissionControlModal;
diff --git a/plugins/analytics/ui/components/dashboard/tabs/MissionControlTab.tsx b/plugins/analytics/ui/components/dashboard/tabs/MissionControlTab.tsx
new file mode 100644
index 00000000..033ee55a
--- /dev/null
+++ b/plugins/analytics/ui/components/dashboard/tabs/MissionControlTab.tsx
@@ -0,0 +1,1417 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';
+import { useMissionControl, type Activity } from '@plugins/analytics/ui/hooks/useMissionControl';
+import { useRealTimeMissionControl, useProviderHistory } from '@plugins/analytics/ui/hooks/useMissionControlData';
+import { useConfig } from '@/components/ConfigProvider';
+import { formatResponseTime, formatPercentage, formatTokens, getResponseTimeColor, formatSuccessRate, getErrorRateColor } from '@/lib/formatters';
+import type { MissionControlData, ModelStat, HealthHistoryData } from '@plugins/analytics/ui/types/missionControl';
+import { api } from '@/lib/api';
+import { analyticsAPI } from '@plugins/analytics/ui/lib/analytics';
+import type { RealtimeStats, ModelStats } from '@plugins/analytics/ui/lib/analytics';
+import '@plugins/analytics/styles/mission-control.css';
+
+interface RouteCardData {
+ route: string;
+ displayName: string;
+ config: {
+ enabled: boolean;
+ provider: string;
+ model: string;
+ description: string;
+ };
+ stats: {
+ totalRequests: number;
+ successfulRequests: number;
+ failedRequests: number;
+ avgResponseTime: number;
+ successRate: number;
+ errorRate: number;
+ totalTokens: number;
+ totalCost: number;
+ lastUsed: number;
+ } | null;
+ recentActivity: Activity[];
+ score: number;
+ status: 'healthy' | 'warning' | 'error' | 'inactive' | 'low_success' | 'slow_response';
+}
+
+interface RequestData {
+ time: string;
+ requests: number;
+ errors: number;
+ latency: number;
+}
+
+interface RequestLog {
+ id: string;
+ timestamp: string;
+ method: string;
+ model: string;
+ status: 'success' | 'error' | 'pending';
+ responseTime: number;
+ tokens: number;
+}
+
+interface ServiceStatus {
+ name: string;
+ status: 'online' | 'offline' | 'loading';
+ port?: string;
+ icon: string;
+ details: string;
+}
+
+export function MissionControlTab() {
+ const [activeTab, setActiveTab] = useState<'routes' | 'overview' | 'providers' | 'analytics' | 'activity'>('routes');
+
+ // Hook-uri pentru date în timp real
+ const { routerConfig, routeStats, liveActivity, loading: basicLoading, error: basicError } = useMissionControl();
+ const { data: missionControlData, loading: mcLoading, error: mcError } = useRealTimeMissionControl(); // Too aggressive - 2s polling
+ const { data: providerHistory, loading: historyLoading } = useProviderHistory();
+
+ // Theme context
+ // Independent theme configuration for analytics (when themes plugin is disabled)
+ const isAdvanced = false; // Use standard UI styling for analytics dashboard
+
+ // Analytics state
+ const { config } = useConfig();
+ const [timeRange, setTimeRange] = useState('1h');
+ const [chartData, setChartData] = useState
([]);
+ const [requestLogs, setRequestLogs] = useState([]);
+ const [isLiveMode, setIsLiveMode] = useState(true);
+
+ // Activity logs state
+ const [activityTimeRange, setActivityTimeRange] = useState<'10m' | '1h' | '6h' | '24h' | 'all'>('1h');
+ const [activityLimit, setActivityLimit] = useState(50);
+
+ // Overview state - integrated from OverviewTab
+ const [realtimeStats, setRealtimeStats] = useState(null);
+ const [modelStats, setModelStats] = useState([]);
+ const [overviewLoading, setOverviewLoading] = useState(true);
+ const [services, setServices] = useState([
+ {
+ name: 'Proxy Service',
+ status: 'loading',
+ port: '8001',
+ icon: 'exchange-alt',
+ details: 'AI Request Proxy'
+ },
+ {
+ name: 'Web Interface',
+ status: 'online',
+ port: '3456',
+ icon: 'globe',
+ details: 'Management UI'
+ },
+ {
+ name: 'Socket Connections',
+ status: 'loading',
+ icon: 'plug',
+ details: 'WebSocket'
+ },
+ {
+ name: 'API Endpoints',
+ status: 'loading',
+ icon: 'code',
+ details: 'REST API'
+ }
+ ]);
+
+ // Real stats from config
+ const providers = Array.isArray(config?.Providers) ? config.Providers : [];
+ const totalProviders = providers.length;
+ const configuredProviders = providers.filter(p => p.api_key).length;
+ const totalModels = providers.reduce((acc, provider) => acc + (provider.models?.length || 0), 0);
+ const activeModel = config?.Router?.default || 'None selected';
+ const hasActiveModel = activeModel !== 'None selected' && activeModel !== '';
+
+ // Procesează datele pentru cardurile de rute
+ const routeCards: RouteCardData[] = useMemo(() => {
+ if (!routerConfig) return [];
+
+ const routes = [
+ { key: 'default', name: 'Default Route', icon: 'fa-home', color: 'cyan' },
+ { key: 'background', name: 'Background Tasks', icon: 'fa-tasks', color: isAdvanced ? 'blue' : 'green' },
+ { key: 'think', name: 'Thinking & Planning', icon: 'fa-brain', color: 'purple' },
+ { key: 'longContext', name: 'Long Context', icon: 'fa-scroll', color: 'blue' },
+ { key: 'webSearch', name: 'Web Search', icon: 'fa-search', color: 'orange' }
+ ];
+
+ return routes.map(route => {
+ const config = routerConfig[route.key as keyof typeof routerConfig];
+
+ // Găsește statisticile pentru această rută din routeStats
+ const routeStat = Array.isArray(routeStats)
+ ? routeStats.find(stat => stat.route === route.key)
+ : routeStats?.[route.key];
+
+ // Filtrează activitatea recentă pentru această rută
+ const safeActivity = Array.isArray(liveActivity) ? liveActivity : [];
+ const routeActivity = safeActivity.filter(activity => {
+ // Verifică dacă activitatea aparține acestei rute prin diverse metode
+ if (activity.route === route.key) return true;
+
+ // Fallback: încearcă să determine ruta din mesaj sau model
+ const message = activity.message.toLowerCase();
+ const model = (activity.actualModel || activity.model).toLowerCase();
+
+ switch (route.key) {
+ case 'background':
+ return message.includes('background') || message.includes('task');
+ case 'think':
+ return message.includes('think') || message.includes('reasoning') || message.includes('planning');
+ case 'longContext':
+ return message.includes('long') || message.includes('context') || message.includes('large');
+ case 'webSearch':
+ return message.includes('search') || message.includes('web') || message.includes('browse');
+ case 'default':
+ // Default primește tot ce nu se potrivește altundeva
+ return !['background', 'think', 'long', 'context', 'search', 'web'].some(keyword =>
+ message.includes(keyword) || model.includes(keyword)
+ );
+ default:
+ return false;
+ }
+ }).slice(0, 10); // Limitează la ultimele 10 activități
+
+ // Calculează scorul pentru această rută
+ const calculateScore = (stats: any) => {
+ if (!stats || stats.totalRequests === 0) return 0;
+
+ const successWeight = 0.7; // Creștem ponderea succesului
+ const performanceWeight = 0.3; // Reducem ponderea performanței
+
+ const successScore = (stats.successfulRequests / stats.totalRequests) * 100;
+ // Ajustăm formula pentru performance - permițând timpi mai lungi (până la 30 secunde)
+ const performanceScore = Math.max(0, 100 - Math.min(100, (stats.avgResponseTime / 300))); // 0-100 scale based on response time (30s max)
+
+ return Math.round(successScore * successWeight + performanceScore * performanceWeight);
+ };
+
+ const score = calculateScore(routeStat);
+
+ // Determină statusul
+ const getStatus = (config: any, stats: any, score: number) => {
+ if (!config.enabled) return 'inactive';
+ if (!stats || stats.totalRequests === 0) return 'inactive';
+ if (score >= 80) return 'healthy';
+ if (score >= 60) return 'warning';
+ // Pentru scoruri sub 60, determinăm cauza specifică
+ if (stats && stats.totalRequests > 0) {
+ const successRate = (stats.successfulRequests / stats.totalRequests) * 100;
+ if (successRate < 70) return 'low_success';
+ if (stats.avgResponseTime > 15000) return 'slow_response';
+ }
+ return 'warning';
+ };
+
+ return {
+ route: route.key,
+ displayName: route.name,
+ config,
+ stats: routeStat || null,
+ recentActivity: routeActivity,
+ score: Math.round(score),
+ status: getStatus(config, routeStat, score)
+ };
+ });
+ }, [routerConfig, routeStats, liveActivity]);
+
+ // Calculăm statistici agregate pentru celelalte taburi
+ const aggregatedStats = useMemo(() => {
+ if (!missionControlData?.aggregated) return null;
+
+ const { modelStats, totalRequests, successRate, avgResponseTime } = missionControlData.aggregated;
+
+ return {
+ totalRequests,
+ successRate,
+ avgResponseTime,
+ modelStats
+ };
+ }, [missionControlData]);
+
+ // Status sistem
+ const systemStatus = useMemo(() => {
+ if (!missionControlData?.live) return null;
+
+ const { queue, rateLimiting, deduplication } = missionControlData.live;
+
+ return {
+ queueStatus: queue.currentSize > 0 ? 'active' : 'idle',
+ circuitBreaker: rateLimiting.circuitBreakerState,
+ cacheHealth: deduplication.cacheHitRate > 50 ? 'good' : deduplication.cacheHitRate > 20 ? 'warning' : 'poor',
+ isProcessing: queue.processing
+ };
+ }, [missionControlData]);
+
+ // Filter activities based on time range and limit
+ const filteredActivities = useMemo(() => {
+ if (!liveActivity || !Array.isArray(liveActivity)) return [];
+
+ let filtered = [...liveActivity];
+
+ // Filter by time range
+ if (activityTimeRange !== 'all') {
+ const now = Date.now();
+ let timeRangeMs: number;
+
+ switch (activityTimeRange) {
+ case '10m': timeRangeMs = 10 * 60 * 1000; break;
+ case '1h': timeRangeMs = 60 * 60 * 1000; break;
+ case '6h': timeRangeMs = 6 * 60 * 60 * 1000; break;
+ case '24h': timeRangeMs = 24 * 60 * 60 * 1000; break;
+ default: timeRangeMs = 0;
+ }
+
+ filtered = filtered.filter(activity => {
+ // Convert timestamp to number if it's a string
+ const activityTimestamp = typeof activity.timestamp === 'string'
+ ? new Date(activity.timestamp).getTime()
+ : activity.timestamp;
+ return now - activityTimestamp <= timeRangeMs;
+ });
+ }
+
+ // Apply limit
+ if (activityLimit > 0) {
+ filtered = filtered.slice(0, activityLimit);
+ }
+
+ return filtered;
+ }, [liveActivity, activityTimeRange, activityLimit]);
+
+ // Provider status
+ const providerStatus = useMemo(() => {
+ if (!missionControlData?.live?.providers) return [];
+
+ return Object.entries(missionControlData.live.providers).map(([provider, stats]) => ({
+ provider,
+ status: stats.failureCount > 5 ? 'degraded' : stats.inRecovery ? 'recovery' : 'healthy',
+ healthScore: Math.max(0, 100 - (stats.failureCount * 10)),
+ ...stats
+ }));
+ }, [missionControlData]);
+
+ // Funcții helper pentru culori și iconițe
+ const getRouteColor = (route: string) => {
+ const colors = {
+ default: 'cyan',
+ background: isAdvanced ? 'blue' : 'green',
+ think: 'purple',
+ longContext: 'blue',
+ webSearch: 'orange'
+ };
+ return colors[route as keyof typeof colors] || 'gray';
+ };
+
+ // Analytics data loading effect
+ useEffect(() => {
+ const loadRealData = async () => {
+ try {
+ // Load realtime stats
+ const realtimeResponse = await fetch('/api/analytics/realtime');
+ const realtimeData = await realtimeResponse.json();
+
+ // Load recent requests
+ const requestsResponse = await fetch('/api/analytics/requests?limit=50');
+ const requestsData = await requestsResponse.json();
+
+ // Generate chart data from real analytics time-series data
+ const generateChartDataFromReal = async () => {
+ try {
+ // Get time-series data based on selected time range
+ let hours = 1;
+ switch (timeRange) {
+ case '1h': hours = 1; break;
+ case '6h': hours = 6; break;
+ case '24h': hours = 24; break;
+ case '7d': hours = 24 * 7; break;
+ }
+
+ const timeSeriesResponse = await fetch(`/api/analytics/timeseries?hours=${hours}`);
+ const timeSeriesData = await timeSeriesResponse.json();
+
+ if (timeSeriesData.success && timeSeriesData.data && Array.isArray(timeSeriesData.data)) {
+ // Convert backend time-series data to chart format
+ const chartData: RequestData[] = timeSeriesData.data.map((point: any) => ({
+ time: point.time,
+ requests: point.requests || 0,
+ errors: point.errors || 0,
+ latency: point.avgResponseTime || 0
+ }));
+ setChartData(chartData);
+ } else {
+ // Fallback to empty data if no time-series available
+ const data: RequestData[] = [];
+ const now = new Date();
+ for (let i = 23; i >= 0; i--) {
+ const time = new Date(now.getTime() - i * 5 * 60 * 1000);
+ data.push({
+ time: time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+ requests: 0,
+ errors: 0,
+ latency: 0
+ });
+ }
+ setChartData(data);
+ }
+ } catch (error) {
+ console.error('Error loading time-series data:', error);
+ // Fallback to empty data
+ setChartData([]);
+ }
+ };
+
+ // Convert real requests to request logs
+ if (requestsData.success && requestsData.data && Array.isArray(requestsData.data)) {
+ const realLogs: RequestLog[] = requestsData.data.map((req: any, i: number) => ({
+ id: req.id || `req-${i}`,
+ timestamp: new Date(req.timestamp).toLocaleTimeString(),
+ method: `${req.method} ${req.endpoint}`,
+ model: req.actualModel || req.model,
+ status: req.statusCode < 400 ? 'success' : 'error',
+ responseTime: req.responseTime,
+ tokens: req.tokenCount || 0
+ }));
+ setRequestLogs(realLogs);
+ } else {
+ // No real data, show empty
+ setRequestLogs([]);
+ }
+
+ await generateChartDataFromReal();
+ } catch (error) {
+ console.error('Error loading real analytics data:', error);
+ // Fallback to empty data instead of fake data
+ setChartData([]);
+ setRequestLogs([]);
+ }
+ };
+
+ // Only load analytics data when analytics tab is active
+ if (activeTab === 'analytics') {
+ loadRealData();
+
+ // Update data every 5 seconds if live mode is on
+ const interval = isLiveMode ? setInterval(() => {
+ loadRealData();
+ }, 5000) : null;
+
+ return () => {
+ if (interval) clearInterval(interval);
+ };
+ }
+ }, [isLiveMode, timeRange, config, activeTab]);
+
+ // Overview data loading effect - integrated from OverviewTab
+ useEffect(() => {
+ let cleanup: (() => void) | null = null;
+
+ const loadOverviewData = async () => {
+ if (activeTab !== 'overview') return;
+
+ try {
+ setOverviewLoading(true);
+
+ // Load initial data
+ const [realtimeData, modelData] = await Promise.all([
+ analyticsAPI.getRealtimeStats(),
+ analyticsAPI.getModelStats()
+ ]);
+
+ setRealtimeStats(realtimeData);
+ setModelStats(modelData);
+
+ // Check service statuses
+ await checkServices();
+
+ // Set up real-time subscription
+ cleanup = analyticsAPI.subscribeToRealtimeStats((stats) => {
+ setRealtimeStats(stats);
+ }, 30000); // Update every 30 seconds
+
+ } catch (error) {
+ console.error('Error loading overview analytics data:', error);
+ // Fallback to config-only data if analytics fail
+ } finally {
+ setOverviewLoading(false);
+ }
+ };
+
+ loadOverviewData();
+
+ return () => {
+ if (cleanup) cleanup();
+ };
+ }, [activeTab]);
+
+ const checkServices = async () => {
+ try {
+ // Test if we can reach the API (since we're using it)
+ await api.getConfig();
+
+ setServices(prev => prev.map(service => {
+ if (service.name === 'API Endpoints') {
+ return { ...service, status: 'online' };
+ }
+ if (service.name === 'Proxy Service') {
+ return { ...service, status: 'online' }; // Assume online if we can reach API
+ }
+ // For other services, mark as online if we can reach the API, otherwise offline
+ return { ...service, status: 'online' };
+ }));
+ } catch (error) {
+ console.error('Error checking services:', error);
+ setServices(prev => prev.map(service => ({
+ ...service,
+ status: service.name === 'Web Interface' ? 'online' : 'offline'
+ })));
+ }
+ };
+
+ // Analytics calculations
+ const totalRequests = chartData.reduce((sum, data) => sum + data.requests, 0);
+ const totalErrors = chartData.reduce((sum, data) => sum + data.errors, 0);
+ const avgLatency = Math.round(chartData.reduce((sum, data) => sum + data.latency, 0) / chartData.length) || 0;
+ const errorRate = totalRequests > 0 ? (totalErrors / totalRequests) * 100 : 0;
+
+ const getRouteIcon = (route: string) => {
+ const icons = {
+ default: 'fa-home',
+ background: 'fa-tasks',
+ think: 'fa-brain',
+ longContext: 'fa-scroll',
+ webSearch: 'fa-search'
+ };
+ return icons[route as keyof typeof icons] || 'fa-circle';
+ };
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'healthy':
+ return isAdvanced ? 'text-blue-400 border-blue-400/30' : 'text-green-400 border-green-400/30';
+ case 'warning':
+ return 'text-yellow-400 border-yellow-400/30';
+ case 'error':
+ return 'text-red-400 border-red-400/30';
+ case 'low_success':
+ return 'text-orange-400 border-orange-400/30';
+ case 'slow_response':
+ return 'text-blue-400 border-blue-400/30';
+ case 'inactive':
+ return 'text-gray-400 border-gray-400/30';
+ default:
+ return 'text-gray-400 border-gray-400/30';
+ }
+ };
+
+ const getStatusBg = (status: string) => {
+ switch (status) {
+ case 'healthy':
+ return isAdvanced ? 'bg-blue-400/10 hover:bg-blue-400/20' : 'bg-green-400/10 hover:bg-green-400/20';
+ case 'warning':
+ return 'bg-yellow-400/10 hover:bg-yellow-400/20';
+ case 'error':
+ return 'bg-red-400/10 hover:bg-red-400/20';
+ case 'low_success':
+ return 'bg-orange-400/10 hover:bg-orange-400/20';
+ case 'slow_response':
+ return 'bg-blue-400/10 hover:bg-blue-400/20';
+ case 'inactive':
+ return 'bg-gray-400/10 hover:bg-gray-400/20';
+ default:
+ return 'bg-gray-400/10 hover:bg-gray-400/20';
+ }
+ };
+
+ const getScoreColor = (score: number) => {
+ if (score >= 80) return isAdvanced ? 'text-blue-400' : 'text-green-400';
+ if (score >= 60) return 'text-yellow-400';
+ return 'text-red-400';
+ };
+
+ const getActivityStatusColor = (type: string) => {
+ switch (type) {
+ case 'success':
+ return isAdvanced ? 'bg-blue-400' : 'bg-green-400';
+ case 'error':
+ return 'bg-red-400';
+ case 'warning':
+ return 'bg-yellow-400';
+ default:
+ return 'bg-blue-400';
+ }
+ };
+
+ // Loading state combinat
+ const isLoading = basicLoading || mcLoading || historyLoading;
+ const error = basicError || mcError;
+
+ return (
+
+ {/* Header */}
+
+ Mission Control
+ Monitorizare completă a sistemului în timp real.
+
+
+ {/* Navigation */}
+
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+ {isLoading && Se încarcă datele...
}
+ {error && Eroare: {error}
}
+
+ {/* Enhanced Overview Tab - Integrated from OverviewTab */}
+ {activeTab === 'overview' && (
+
+ {/* System Overview - Real Stats from Config and Analytics */}
+
+
+
+
System Overview
+ {overviewLoading && (
+
+
+ Loading real-time data...
+
+ )}
+
+
+ {realtimeStats?.last24h.totalRequests || 0}
+ Total Requests (24h)
+
+
+
+ {totalProviders}
+ Total Providers
+
+
+
+ {formatResponseTime(realtimeStats?.last24h.avgResponseTime || 0)}
+ Avg Response Time
+
+
+
+ {formatSuccessRate(realtimeStats?.last24h.errorRate || 0)}
+ Success Rate
+
+
+
+
+
Live Performance
+ ● Live
+
+
+
+
+
Current Activity
+
+
+ Active Requests:
+ {realtimeStats.current.activeRequests}
+
+
+ Avg Response:
+
+ {formatResponseTime(realtimeStats.current.avgResponseTime)}
+
+
+
+ Error Rate:
+
+ {formatPercentage(realtimeStats?.current?.errorRate || 0)}
+
+
+
+
+
+
+
Last Hour
+
+
+ Total Requests:
+ {realtimeStats.last1h.totalRequests}
+
+
+ Avg Response:
+
+ {formatResponseTime(realtimeStats.last1h.avgResponseTime)}
+
+
+
+ Top Model:
+
+ {realtimeStats.last1h.topModels[0]?.model.substring(0, 15) || 'None'}
+
+
+
+
+
+
+
Top Models (24h)
+
+ {realtimeStats?.last24h?.topModels && Array.isArray(realtimeStats.last24h.topModels) ?
+ realtimeStats.last24h.topModels.slice(0, 3).map((model, index) => (
+
+ {model.model.substring(0, 12)}:
+ {model.count}
+
+ )) : (
+
No data available
+ )
+ }
+
+
+
+
+
+
+
Current Configuration
+
+
+
+ {/* Active Model */}
+
+
Active Router
+
+
+ Default Model:
+
+ {activeModel}
+
+
+
+ Background Model:
+ {config?.Router?.background || 'Not set'}
+
+
+ Long Context:
+ {config?.Router?.longContext || 'Not set'}
+
+
+
+
+ {/* Provider Summary */}
+
+
Provider Status
+
+ {providers.slice(0, 3).map((provider, index) => (
+
+
{provider.name || `Provider ${index + 1}`}:
+
+
+ {provider.models?.length || 0} models
+
+
+ ))}
+ {providers.length > 3 && (
+
+ +{providers.length - 3} more providers
+
+ )}
+
+
+
+
+
+ {/* Services Status */}
+
+
+
+
+
Services Status
+
+
+
+ {services.map((service, index) => (
+
+
+
+
+
+
{service.name}
+
{service.details}
+ {service.port &&
Port {service.port}
}
+
+ ))}
+
+
+
+
Live Route Monitoring
+
+ Actualizat în timp real • {routeCards.length} rute active
+
+
+
+ {!routerConfig && !isLoading && (
+
+
+
+ Nu s-au putut încărca configurațiile rutelor. Verificați conexiunea API.
+
+
+ )}
+
+ {routeCards.length > 0 && (
+
+ {routeCards.map((card, index) => {
+ const color = getRouteColor(card.route);
+ const icon = getRouteIcon(card.route);
+ const statusColors = getStatusColor(card.status);
+ const scoreColor = getScoreColor(card.score);
+
+ return (
+
+ {/* Header - more compact */}
+
+
+
+
+
+
+
+
{card.displayName}
+
{card.config.description}
+
+
+
+
+ {card.score}
+
+
Score
+
+
+
+ {/* Status Badge - more compact */}
+
+
+ {card.status === 'healthy' ? 'Sănătos' :
+ card.status === 'warning' ? 'Atenție' :
+ card.status === 'error' ? 'Eroare' :
+ card.status === 'low_success' ? 'Succes scăzut' :
+ card.status === 'slow_response' ? 'Răspuns lent' : 'Inactiv'}
+
+
+
+
+ Model:
+
+ {card.config.model || 'N/A'}
+
+
+
+ Provider:
+
+ {card.config.provider || 'N/A'}
+
+
+
+
+
+
+
+ {card.stats.totalRequests.toLocaleString()}
+
+
Cereri
+
+
+
+ {card.stats.successRate.toFixed(1)}%
+
+
Succes
+
+
+
+ {formatResponseTime(card.stats.avgResponseTime)}
+
+
Timp
+
+
+
+
+
Activitate
+
+ {card.recentActivity.length}
+
+
+
+ {card.recentActivity.length > 0 ? (
+ card.recentActivity.map((activity, idx) => (
+
+ {/* Single compact row: Status + Time */}
+
+
+
+
+ {new Date(activity.timestamp).toLocaleTimeString('ro-RO', {
+ hour: '2-digit',
+ minute: '2-digit'
+ })}
+
+
+
+ {formatResponseTime(activity.responseTime)}
+
+
+ {/* Message row */}
+
+ {activity.message.replace('Request successful', '✓').replace('Request failed', '✗')}
+
+
+ ))
+ ) : (
+
+
+
Nicio activitate recentă
+
+ )}
+
+
+ );
+ })}
+
+ )}
+
+ {routeCards.length === 0 && !isLoading && (
+
+
+
Nu sunt configurate rute
+
Configurați rutele pentru a vedea monitorizarea în timp real
+
+ )}
+
+
Status Providers
+
+ {!providerStatus.length && !isLoading && (
+
+
+
+ Nu s-au putut încărca informațiile despre provideri. Verificați conexiunea API.
+
+
+ )}
+
+ {providerStatus.length > 0 && (
+
+ {providerStatus.map((provider) => (
+
+
+
{provider.provider}
+
+
+
+ {provider.healthScore}%
+
+
+
+
+
+
+ Failures:
+ {provider.failureCount}
+
+
+ Recovering:
+ {provider.inRecovery ? 'Da' : 'Nu'}
+
+
+
+ ))}
+
+ )}
+
+ {!providerStatus.length && !isLoading && (
+
+
+
Nu sunt disponibile informații despre provideri
+
Verificați conexiunea la API
+
+ )}
+
+ {/* Controls */}
+
+
+
+
+
Request Tracking
+
+
+
+
+ Live Mode
+
+
+
+
+
+
+
+
{totalRequests > 999 ? formatTokens(totalRequests) : totalRequests}
+
Total Requests
+
+
+
{totalErrors}
+
Errors
+
+
+
{formatResponseTime(avgLatency)}
+
Avg Latency
+
+
+
{formatPercentage(errorRate)}
+
Error Rate
+
+
+
+ {/* Charts */}
+
+ {/* Request Volume Chart */}
+
+
+
+ Request Volume
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Latency Chart */}
+
+
+
+ Response Latency
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Controls */}
+
+
+
Detailed Activity Logs
+
Filtrează și navighează prin logs
+
+
+
+
+ Interval:
+
+
+
+
+ Limită:
+
+
+
+
+
+
+
+
+
Afișare: {activityLimit === 0 ? 'Toate' : activityLimit} logs
+
{filteredActivities.length} evenimente găsite
+
+
+
+
+
+
+
+ | Time |
+ Type |
+ Provider |
+ Model |
+ Route |
+ Message |
+ Response Time |
+ Tokens |
+
+
+
+ {filteredActivities.map((activity: Activity) => (
+
+
+ {new Date(activity.timestamp).toLocaleString('ro-RO', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ })}
+ |
+
+
+
+ {activity.type}
+
+ |
+
+ {activity.provider || 'N/A'}
+ |
+
+ {activity.actualModel}
+ |
+
+ {activity.route || 'N/A'}
+ |
+
+ {activity.message}
+ |
+
+ {activity.responseTime ? formatResponseTime(activity.responseTime) : 'N/A'}
+ |
+
+ {activity.tokens !== undefined && activity.tokens !== null ? formatTokens(activity.tokens) : 'N/A'}
+ |
+
+ ))}
+
+
+
+
+ {filteredActivities.length === 0 && (
+
+
+
No Activity Logs
+
Waiting for system activity...
+
+ )}
+
+
+
+
+
Discovering plugins...
+
+
+
🔌
+
No plugins available
+
Place plugins in the plugins/ directory
+
+
+
🔌 Plugin Management
+ {plugins.length} plugins
+
+
+ {plugins.map((plugin) => (
+
+ {/* Plugin Card */}
+
+
+
+
{plugin.name}
+
v{plugin.version}
+
+
+
{plugin.description}
+
+
+
+
+ {/* Plugin Settings - doar dacă e enabled */}
+ {plugin.enabled && plugin.component && (
+
+ )}
+
+ ))}
+
+
Dashboard
+
+ Content here...
+
+
+
+
+
+
+
+// Statistics grid
+
+
+
1,234
+
Total Requests
+
+
+
Current theme: {currentTheme}
+
+
+ Enable Advanced Themes plugin to access theme options
+
+ );
+ }
+
+ return (
+
+
+
+
+ {THEME_OPTIONS.map((option) => (
+
+ ))}
+
+
+
+
+
+ Current: {currentTheme}
+
+
+ Glassmorphism effects available in Advanced themes.
+
+
+
+ Enable Advanced Themes plugin to access theme options
+
+ );
+ }
+
+ return (
+
+
+
+
+ {themeOptions.map((option) => (
+
+ ))}
+
+
+
+
+
+ Current: {currentTheme}
+
+
+ Glassmorphism effects available in Advanced themes.
+
+
+
+
Select Theme:
+
+ {themes.map((theme) => (
+
+ ))}
+
+
+
+
+ 🎨
+
Advanced Themes
+
+
+
+ Glassmorphism effects and premium theming
+
+
+
+
+
+
+
🎨 Layout Enhancer Test
+
+
+ Checking layout enhancer status...
+
+
+
+
Theme Controls
+
+
+
+
+
+
+
Layout Enhancer Controls
+
+
+
+
+
+
+
Mock App Structure
+
+
+
+ Providers Section
+
(should get glass effect in advanced theme)
+
+
+ Router Section
+
(should get glass effect in advanced theme)
+
+
+
+
+
+
Analytics plugin not available
}))
+);
+
+// Lazy load AnalyticsButton from plugin
+const AnalyticsButton = React.lazy(() =>
+ import('@plugins/analytics/ui/AnalyticsButton')
+ .then(module => ({ default: module.AnalyticsButton }))
+ .catch(() => ({ default: () => null }))
+);
+
+// Lazy load MissionControlModal from plugin (similar to LogViewer approach)
+const MissionControlModal = React.lazy(() =>
+ import('@plugins/analytics/ui/components/MissionControlModal')
+ .then(module => ({ default: module.MissionControlModal }))
+ .catch(() => ({ default: ({ open }: { open: boolean }) => open ? Analytics plugin not available
: null }))
+);
import {
Popover,
PopoverContent,
@@ -34,6 +56,9 @@ function App() {
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [isJsonEditorOpen, setIsJsonEditorOpen] = useState(false);
const [isLogViewerOpen, setIsLogViewerOpen] = useState(false);
+ const [isMissionControlModalOpen, setIsMissionControlModalOpen] = useState(false);
+ const [currentView, setCurrentView] = useState<'dashboard' | 'analytics'>('dashboard');
+ const [activeTab, setActiveTab] = useState<'dashboard' | 'analytics'>('dashboard');
const [isCheckingAuth, setIsCheckingAuth] = useState(true);
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'warning' } | null>(null);
// 版本检查状态
@@ -44,6 +69,27 @@ function App() {
const [hasCheckedUpdate, setHasCheckedUpdate] = useState(false);
const hasAutoCheckedUpdate = useRef(false);
+ // Listen for analytics plugin events
+ useEffect(() => {
+ const handleOpenMissionControl = () => {
+ // Instead of switching tab, open modal (like LogViewer)
+ setIsMissionControlModalOpen(true);
+ };
+
+ const handleCloseMissionControl = () => {
+ // Close modal
+ setIsMissionControlModalOpen(false);
+ };
+
+ document.addEventListener('open-mission-control', handleOpenMissionControl);
+ document.addEventListener('close-mission-control', handleCloseMissionControl);
+
+ return () => {
+ document.removeEventListener('open-mission-control', handleOpenMissionControl);
+ document.removeEventListener('close-mission-control', handleCloseMissionControl);
+ };
+ }, []);
+
const saveConfig = async () => {
// Handle case where config might be null or undefined
if (!config) {
@@ -161,7 +207,7 @@ function App() {
} finally {
setIsCheckingUpdate(false);
}
- }, [hasCheckedUpdate, isNewVersionAvailable, t]);
+ }, [isNewVersionAvailable, t]);
useEffect(() => {
const checkAuth = async () => {
@@ -169,7 +215,7 @@ function App() {
if (config) {
setIsCheckingAuth(false);
// 自动检查更新，但不显示对话框
- if (!hasCheckedUpdate && !hasAutoCheckedUpdate.current) {
+ if (!hasAutoCheckedUpdate.current) {
hasAutoCheckedUpdate.current = true;
checkForUpdates(false);
}
@@ -199,7 +245,7 @@ function App() {
} finally {
setIsCheckingAuth(false);
// 在获取配置完成后检查更新，但不显示对话框
- if (!hasCheckedUpdate && !hasAutoCheckedUpdate.current) {
+ if (!hasAutoCheckedUpdate.current) {
hasAutoCheckedUpdate.current = true;
checkForUpdates(false);
}
@@ -218,7 +264,7 @@ function App() {
return () => {
window.removeEventListener('unauthorized', handleUnauthorized);
};
- }, [config, navigate, hasCheckedUpdate, checkForUpdates]);
+ }, [config, navigate]);
// 执行更新函数
const performUpdate = async () => {
@@ -268,9 +314,32 @@ function App() {
}
return (
-
+
+ {/* Analytics Button - self-contained plugin component */}
+
+
+
+
+
- {t('app.title')}
+
+
{t('app.title')}
+
+ {/* Tab indicator (only shows when on Analytics) */}
+ {activeTab === 'analytics' && (
+
+
+ Analytics Mode
+
+
+ )}
+
+
-
-
-
-
-
-
-
+ {activeTab === 'analytics' ? (
+
+
+ 📊
+
Analytics
+
+
+ Loading Analytics...
}>
+
+
+
-
+ import('../../../plugins/core/PluginManager'));
import {
Dialog,
DialogContent,
@@ -13,7 +16,6 @@ import { Switch } from "@/components/ui/switch";
import { Combobox } from "@/components/ui/combobox";
import { useConfig } from "./ConfigProvider";
import { StatusLineConfigDialog } from "./StatusLineConfigDialog";
-import { useState } from "react";
import type { StatusLineConfig } from "@/types";
interface SettingsDialogProps {
@@ -21,6 +23,7 @@ interface SettingsDialogProps {
onOpenChange: (isOpen: boolean) => void;
}
+
export function SettingsDialog({ isOpen, onOpenChange }: SettingsDialogProps) {
const { t } = useTranslation();
const { config, setConfig } = useConfig();
@@ -59,7 +62,10 @@ export function SettingsDialog({ isOpen, onOpenChange }: SettingsDialogProps) {
return (