claude-code-templates 1.8.0 → 1.8.1

package/src/analytics-web/services/DataService.js

@@ -0,0 +1,357 @@
+/**
+ * DataService - Handles API communication and data caching
+ * Part of the modular frontend architecture
+ */
+class DataService {
+  constructor(webSocketService = null) {
+    this.cache = new Map();
+    this.eventListeners = new Set();
+    this.baseURL = '';
+    this.lastFetch = {};
+    this.webSocketService = webSocketService;
+    this.realTimeEnabled = false;
+    
+    // Setup WebSocket integration if available
+    if (this.webSocketService) {
+      this.setupWebSocketIntegration();
+    }
+  }
+
+  /**
+   * Add event listener for data changes
+   * @param {Function} callback - Callback function to call on data changes
+   */
+  addEventListener(callback) {
+    this.eventListeners.add(callback);
+  }
+
+  /**
+   * Remove event listener
+   * @param {Function} callback - Callback function to remove
+   */
+  removeEventListener(callback) {
+    this.eventListeners.delete(callback);
+  }
+
+  /**
+   * Notify all listeners of data changes
+   * @param {string} type - Type of data that changed
+   * @param {*} data - New data
+   */
+  notifyListeners(type, data) {
+    this.eventListeners.forEach(callback => {
+      try {
+        callback(type, data);
+      } catch (error) {
+        console.error('Error in DataService listener:', error);
+      }
+    });
+  }
+
+  /**
+   * Generic fetch with caching support
+   * @param {string} endpoint - API endpoint
+   * @param {Object} options - Fetch options
+   * @returns {Promise<*>} Response data
+   */
+  async cachedFetch(endpoint, options = {}) {
+    const cacheKey = `${endpoint}_${JSON.stringify(options)}`;
+    const now = Date.now();
+    const cacheDuration = options.cacheDuration || 30000; // 30 seconds default
+
+    // Check if we have cached data that's still valid
+    if (this.cache.has(cacheKey)) {
+      const cached = this.cache.get(cacheKey);
+      if (now - cached.timestamp < cacheDuration) {
+        return cached.data;
+      }
+    }
+
+    try {
+      const response = await fetch(this.baseURL + endpoint, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          ...options.headers
+        },
+        ...options
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      
+      // Cache the response
+      this.cache.set(cacheKey, {
+        data,
+        timestamp: now
+      });
+
+      return data;
+    } catch (error) {
+      console.error(`Error fetching ${endpoint}:`, error);
+      
+      // Return cached data if available, even if stale
+      if (this.cache.has(cacheKey)) {
+        console.warn('Using stale cached data due to fetch error');
+        return this.cache.get(cacheKey).data;
+      }
+      
+      throw error;
+    }
+  }
+
+  /**
+   * Get conversations data
+   * @returns {Promise<Object>} Conversations data
+   */
+  async getConversations() {
+    return await this.cachedFetch('/api/data');
+  }
+
+  /**
+   * Get conversation states for real-time updates
+   * @returns {Promise<Object>} Conversation states
+   */
+  async getConversationStates() {
+    const cacheDuration = this.realTimeEnabled ? 30000 : 5000; // Longer cache with real-time
+    return await this.cachedFetch('/api/conversation-state', {
+      cacheDuration
+    });
+  }
+
+  /**
+   * Get chart data for visualizations
+   * @returns {Promise<Object>} Chart data
+   */
+  async getChartData() {
+    return await this.cachedFetch('/api/charts');
+  }
+
+  /**
+   * Get session data for Max plan usage tracking
+   * @returns {Promise<Object>} Session data including timer and usage info
+   */
+  async getSessionData() {
+    const cacheDuration = this.realTimeEnabled ? 30000 : 5000; // 30s with real-time, 5s without
+    return await this.cachedFetch('/api/session/data', { cacheDuration });
+  }
+
+  /**
+   * Get project statistics
+   * @returns {Promise<Object>} Project statistics
+   */
+  async getProjectStats() {
+    return await this.cachedFetch('/api/session/projects');
+  }
+
+  /**
+   * Get system health information
+   * @returns {Promise<Object>} System health data
+   */
+  async getSystemHealth() {
+    return await this.cachedFetch('/api/system/health');
+  }
+
+  /**
+   * Clear all cached data
+   */
+  clearCache() {
+    this.cache.clear();
+    console.log('DataService cache cleared');
+  }
+
+  /**
+   * Clear specific cache entry
+   * @param {string} endpoint - Endpoint to clear from cache
+   */
+  clearCacheEntry(endpoint) {
+    const keysToDelete = [];
+    for (const key of this.cache.keys()) {
+      if (key.startsWith(endpoint)) {
+        keysToDelete.push(key);
+      }
+    }
+    keysToDelete.forEach(key => this.cache.delete(key));
+  }
+
+  /**
+   * Setup WebSocket integration for real-time updates
+   */
+  setupWebSocketIntegration() {
+    if (!this.webSocketService) return;
+    
+    console.log('🔌 Setting up WebSocket integration for DataService');
+    
+    // Listen for data refresh events
+    this.webSocketService.on('data_refresh', (data) => {
+      console.log('📊 Real-time data refresh received');
+      this.handleRealTimeDataRefresh(data);
+    });
+    
+    // Listen for conversation state changes
+    this.webSocketService.on('conversation_state_change', (data) => {
+      console.log('🔄 Real-time conversation state change');
+      this.handleRealTimeStateChange(data);
+    });
+    
+    // Listen for connection status
+    this.webSocketService.on('connected', () => {
+      console.log('✅ WebSocket connected - enabling real-time updates');
+      this.realTimeEnabled = true;
+      this.subscribeToChannels();
+    });
+    
+    this.webSocketService.on('disconnected', () => {
+      console.log('❌ WebSocket disconnected - falling back to polling');
+      this.realTimeEnabled = false;
+      this.startFallbackPolling();
+    });
+  }
+  
+  /**
+   * Subscribe to WebSocket channels
+   */
+  async subscribeToChannels() {
+    if (!this.webSocketService || !this.realTimeEnabled) return;
+    
+    try {
+      await this.webSocketService.subscribe('data_updates');
+      await this.webSocketService.subscribe('conversation_updates');
+      await this.webSocketService.subscribe('system_updates');
+      console.log('📡 Subscribed to real-time channels');
+    } catch (error) {
+      console.error('Error subscribing to channels:', error);
+    }
+  }
+  
+  /**
+   * Handle real-time data refresh
+   * @param {Object} data - Fresh data from server
+   */
+  handleRealTimeDataRefresh(data) {
+    // Clear relevant cache entries
+    this.clearCacheEntry('/api/data');
+    this.clearCacheEntry('/api/conversation-state');
+    
+    // Notify listeners
+    this.notifyListeners('data_refresh', data);
+  }
+  
+  /**
+   * Handle real-time conversation state change
+   * @param {Object} data - State change data
+   */
+  handleRealTimeStateChange(data) {
+    // Clear conversation state cache
+    this.clearCacheEntry('/api/conversation-state');
+    
+    // Notify listeners
+    this.notifyListeners('conversation_state_change', data);
+  }
+  
+  /**
+   * Start periodic data refresh (fallback when WebSocket unavailable)
+   * @param {number} interval - Refresh interval in milliseconds
+   */
+  startPeriodicRefresh(interval = 30000) {
+    // Don't start polling if real-time is enabled
+    if (this.realTimeEnabled) {
+      console.log('⚡ Real-time updates enabled - skipping periodic refresh');
+      return;
+    }
+    
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+    }
+
+    console.log('📅 Starting periodic refresh (fallback mode)');
+    this.refreshInterval = setInterval(async () => {
+      try {
+        // Only refresh if real-time is not available
+        if (!this.realTimeEnabled) {
+          const [conversations, states] = await Promise.all([
+            this.getConversations(),
+            this.getConversationStates()
+          ]);
+
+          // Notify listeners of fresh data
+          this.notifyListeners('conversations', conversations);
+          this.notifyListeners('states', states);
+        }
+      } catch (error) {
+        console.error('Error during periodic refresh:', error);
+      }
+    }, interval);
+  }
+  
+  /**
+   * Start fallback polling when WebSocket disconnects
+   */
+  startFallbackPolling() {
+    if (!this.refreshInterval) {
+      console.log('🔄 Starting fallback polling due to WebSocket disconnect');
+      this.startPeriodicRefresh(10000); // More frequent polling as fallback
+    }
+  }
+
+  /**
+   * Stop periodic refresh
+   */
+  stopPeriodicRefresh() {
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+      this.refreshInterval = null;
+    }
+  }
+
+  /**
+   * Request real-time data refresh
+   */
+  async requestRefresh() {
+    if (this.webSocketService && this.realTimeEnabled) {
+      console.log('🔄 Requesting refresh via WebSocket');
+      try {
+        await this.webSocketService.requestRefresh();
+        return true;
+      } catch (error) {
+        console.error('Error requesting WebSocket refresh:', error);
+      }
+    }
+    
+    // Fallback to cache clearing
+    console.log('🔄 Falling back to cache clear for refresh');
+    this.clearCache();
+    return false;
+  }
+  
+  /**
+   * Set WebSocket service (for late initialization)
+   * @param {WebSocketService} webSocketService - WebSocket service instance
+   */
+  setWebSocketService(webSocketService) {
+    this.webSocketService = webSocketService;
+    this.setupWebSocketIntegration();
+  }
+  
+  /**
+   * Get cache statistics
+   * @returns {Object} Cache statistics
+   */
+  getCacheStats() {
+    return {
+      size: this.cache.size,
+      keys: Array.from(this.cache.keys()),
+      listeners: this.eventListeners.size,
+      realTimeEnabled: this.realTimeEnabled,
+      webSocketConnected: this.webSocketService ? this.webSocketService.getStatus().isConnected : false
+    };
+  }
+}
+
+// Export for module use
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = DataService;
+}

package/src/analytics-web/services/StateService.js

@@ -0,0 +1,276 @@
+/**
+ * StateService - Manages application state and state changes
+ * Part of the modular frontend architecture
+ */
+class StateService {
+  constructor() {
+    this.state = {
+      conversations: [],
+      summary: {},
+      chartData: {},
+      selectedConversation: null,
+      conversationStates: {},
+      systemHealth: {},
+      isLoading: false,
+      error: null,
+      lastUpdate: null
+    };
+    
+    this.subscribers = new Set();
+    this.stateHistory = [];
+    this.maxHistorySize = 50;
+  }
+
+  /**
+   * Subscribe to state changes
+   * @param {Function} callback - Callback to call on state changes
+   * @returns {Function} Unsubscribe function
+   */
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    
+    // Return unsubscribe function
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+
+  /**
+   * Get current state
+   * @returns {Object} Current state
+   */
+  getState() {
+    return { ...this.state };
+  }
+
+  /**
+   * Get specific state property
+   * @param {string} key - State property key
+   * @returns {*} State property value
+   */
+  getStateProperty(key) {
+    return this.state[key];
+  }
+
+  /**
+   * Update state and notify subscribers
+   * @param {Object} newState - New state object
+   * @param {string} action - Action that caused the state change
+   */
+  setState(newState, action = 'setState') {
+    // Save current state to history
+    this.saveStateToHistory(action);
+
+    // Update state
+    this.state = {
+      ...this.state,
+      ...newState,
+      lastUpdate: Date.now()
+    };
+
+    // Notify all subscribers
+    this.notifySubscribers(action, newState);
+  }
+
+  /**
+   * Update specific state property
+   * @param {string} key - State property key
+   * @param {*} value - New value
+   * @param {string} action - Action that caused the change
+   */
+  setStateProperty(key, value, action = `set_${key}`) {
+    this.setState({ [key]: value }, action);
+  }
+
+  /**
+   * Save current state to history
+   * @param {string} action - Action that caused the state change
+   */
+  saveStateToHistory(action) {
+    this.stateHistory.push({
+      state: { ...this.state },
+      action,
+      timestamp: Date.now()
+    });
+
+    // Keep history size manageable
+    if (this.stateHistory.length > this.maxHistorySize) {
+      this.stateHistory.shift();
+    }
+  }
+
+  /**
+   * Notify all subscribers of state changes
+   * @param {string} action - Action that caused the change
+   * @param {Object} changedState - The state that changed
+   */
+  notifySubscribers(action, changedState) {
+    this.subscribers.forEach(callback => {
+      try {
+        callback(this.state, action, changedState);
+      } catch (error) {
+        console.error('Error in StateService subscriber:', error);
+      }
+    });
+  }
+
+  /**
+   * Update conversations data
+   * @param {Array} conversations - New conversations data
+   */
+  updateConversations(conversations) {
+    this.setState({ conversations }, 'update_conversations');
+  }
+
+  /**
+   * Update conversation states for real-time updates
+   * @param {Object} states - New conversation states
+   */
+  updateConversationStates(states) {
+    this.setState({ conversationStates: states }, 'update_conversation_states');
+  }
+
+  /**
+   * Update summary statistics
+   * @param {Object} summary - New summary data
+   */
+  updateSummary(summary) {
+    this.setState({ summary }, 'update_summary');
+  }
+
+  /**
+   * Update chart data
+   * @param {Object} chartData - New chart data
+   */
+  updateChartData(chartData) {
+    this.setState({ chartData }, 'update_chart_data');
+  }
+
+  /**
+   * Set selected conversation
+   * @param {Object} conversation - Selected conversation
+   */
+  setSelectedConversation(conversation) {
+    this.setState({ selectedConversation: conversation }, 'select_conversation');
+  }
+
+  /**
+   * Set loading state
+   * @param {boolean} isLoading - Loading state
+   */
+  setLoading(isLoading) {
+    this.setState({ isLoading }, 'set_loading');
+  }
+
+  /**
+   * Set error state
+   * @param {Error|string} error - Error object or message
+   */
+  setError(error) {
+    this.setState({ error }, 'set_error');
+  }
+
+  /**
+   * Clear error state
+   */
+  clearError() {
+    this.setState({ error: null }, 'clear_error');
+  }
+
+  /**
+   * Update system health
+   * @param {Object} health - System health data
+   */
+  updateSystemHealth(health) {
+    this.setState({ systemHealth: health }, 'update_system_health');
+  }
+
+  /**
+   * Handle conversation state change notification
+   * @param {string} conversationId - ID of the conversation that changed
+   * @param {string} newState - New state of the conversation
+   */
+  notifyConversationStateChange(conversationId, newState) {
+    const currentStates = { ...this.state.conversationStates };
+    currentStates[conversationId] = newState;
+    
+    this.setState({ conversationStates: currentStates }, 'conversation_state_change');
+    
+    // Also update the conversation in the conversations array
+    const updatedConversations = this.state.conversations.map(conv => 
+      conv.id === conversationId ? { ...conv, status: newState } : conv
+    );
+    
+    this.setState({ conversations: updatedConversations }, 'update_conversation_status');
+  }
+
+  /**
+   * Get conversation by ID
+   * @param {string} conversationId - Conversation ID
+   * @returns {Object|null} Conversation object or null if not found
+   */
+  getConversationById(conversationId) {
+    return this.state.conversations.find(conv => conv.id === conversationId) || null;
+  }
+
+  /**
+   * Get conversations by status
+   * @param {string} status - Conversation status
+   * @returns {Array} Array of conversations with specified status
+   */
+  getConversationsByStatus(status) {
+    return this.state.conversations.filter(conv => conv.status === status);
+  }
+
+  /**
+   * Get state history
+   * @returns {Array} State history
+   */
+  getStateHistory() {
+    return [...this.stateHistory];
+  }
+
+  /**
+   * Clear state history
+   */
+  clearStateHistory() {
+    this.stateHistory = [];
+  }
+
+  /**
+   * Reset state to initial values
+   */
+  resetState() {
+    this.setState({
+      conversations: [],
+      summary: {},
+      chartData: {},
+      selectedConversation: null,
+      conversationStates: {},
+      systemHealth: {},
+      isLoading: false,
+      error: null,
+      lastUpdate: null
+    }, 'reset_state');
+  }
+
+  /**
+   * Get state statistics
+   * @returns {Object} State statistics
+   */
+  getStateStats() {
+    return {
+      subscribers: this.subscribers.size,
+      historySize: this.stateHistory.length,
+      conversationsCount: this.state.conversations.length,
+      lastUpdate: this.state.lastUpdate,
+      hasError: !!this.state.error,
+      isLoading: this.state.isLoading
+    };
+  }
+}
+
+// Export for module use
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = StateService;
+}