claude-code-templates 1.10.1 → 1.12.0

package/src/analytics-web/components/App.js

@@ -0,0 +1,441 @@
+/**
+ * App - Main application component that handles routing and navigation
+ * Orchestrates the sidebar, dashboard, and agents pages
+ */
+class App {
+  constructor(container, services) {
+    this.container = container;
+    this.services = services;
+    
+    this.components = {};
+    this.currentPage = 'dashboard';
+    this.isInitialized = false;
+    
+    this.init();
+  }
+
+  /**
+   * Initialize the application
+   */
+  async init() {
+    if (this.isInitialized) return;
+    
+    try {
+      await this.render();
+      await this.initializeComponents();
+      await this.setupRouting();
+      this.bindEvents();
+      this.isInitialized = true;
+    } catch (error) {
+      console.error('Error initializing app:', error);
+      this.showError('Failed to initialize application');
+    }
+  }
+
+  /**
+   * Render the application structure
+   */
+  async render() {
+    this.container.innerHTML = `
+      <div class="app">
+        <!-- Sidebar Navigation -->
+        <aside class="app-sidebar" id="app-sidebar">
+          <!-- Sidebar component will be mounted here -->
+        </aside>
+        
+        <!-- Main Content Area -->
+        <main class="app-main" id="app-main">
+          <div class="app-content" id="app-content">
+            <!-- Page content will be mounted here -->
+          </div>
+        </main>
+        
+        <!-- Global Loading Overlay -->
+        <div class="global-loading" id="global-loading" style="display: none;">
+          <div class="loading-content">
+            <div class="loading-spinner large"></div>
+            <span class="loading-text">Loading...</span>
+          </div>
+        </div>
+        
+        <!-- Global Error Modal -->
+        <div class="error-modal" id="error-modal" style="display: none;">
+          <div class="error-modal-content">
+            <div class="error-modal-header">
+              <h3>Application Error</h3>
+              <button class="error-modal-close" id="error-modal-close">×</button>
+            </div>
+            <div class="error-modal-body">
+              <p class="error-modal-message" id="error-modal-message"></p>
+            </div>
+            <div class="error-modal-footer">
+              <button class="btn btn-primary" id="error-modal-retry">Retry</button>
+              <button class="btn btn-secondary" id="error-modal-dismiss">Dismiss</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Initialize child components
+   */
+  async initializeComponents() {
+    // Initialize Sidebar
+    const sidebarContainer = this.container.querySelector('#app-sidebar');
+    if (typeof Sidebar !== 'undefined') {
+      this.components.sidebar = new Sidebar(sidebarContainer, this.handleNavigation.bind(this));
+    } else {
+      throw new Error('Sidebar component not available. Check if components/Sidebar.js is loaded.');
+    }
+    
+    // Initialize pages
+    this.components.pages = {};
+    
+    // Load initial page
+    await this.loadPage(this.currentPage);
+  }
+
+  /**
+   * Setup routing (hash-based routing for SPA behavior)
+   */
+  setupRouting() {
+    // Handle browser navigation
+    window.addEventListener('hashchange', () => {
+      const hash = window.location.hash.slice(1) || 'dashboard';
+      this.navigateToPage(hash);
+    });
+    
+    // Set initial route
+    const initialHash = window.location.hash.slice(1) || 'dashboard';
+    if (initialHash !== this.currentPage) {
+      this.navigateToPage(initialHash);
+    }
+  }
+
+  /**
+   * Bind global event listeners
+   */
+  bindEvents() {
+    // Sidebar toggle handler
+    window.addEventListener('sidebar-toggle', (event) => {
+      this.handleSidebarToggle(event.detail.collapsed);
+    });
+    
+    // Error modal events
+    const errorModalClose = this.container.querySelector('#error-modal-close');
+    const errorModalDismiss = this.container.querySelector('#error-modal-dismiss');
+    const errorModalRetry = this.container.querySelector('#error-modal-retry');
+    
+    errorModalClose.addEventListener('click', () => this.hideError());
+    errorModalDismiss.addEventListener('click', () => this.hideError());
+    errorModalRetry.addEventListener('click', () => this.retryLastAction());
+    
+    // Global keyboard shortcuts
+    document.addEventListener('keydown', (e) => this.handleKeyboardShortcuts(e));
+  }
+
+  /**
+   * Handle navigation from sidebar
+   * @param {string} page - Page to navigate to
+   */
+  async handleNavigation(page) {
+    await this.navigateToPage(page);
+  }
+
+  /**
+   * Navigate to a specific page
+   * @param {string} page - Page to navigate to
+   */
+  async navigateToPage(page) {
+    if (page === this.currentPage) return;
+    
+    try {
+      this.showGlobalLoading();
+      
+      // Cleanup current page
+      await this.cleanupCurrentPage();
+      
+      // Load new page
+      await this.loadPage(page);
+      
+      // Update state
+      this.currentPage = page;
+      
+      // Update URL hash
+      window.location.hash = page;
+      
+      // Update sidebar active state
+      if (this.components.sidebar) {
+        this.components.sidebar.setActivePage(page);
+      }
+      
+    } catch (error) {
+      console.error('Error navigating to page:', page, error);
+      this.showError(`Failed to load ${page} page`);
+    } finally {
+      this.hideGlobalLoading();
+    }
+  }
+
+  /**
+   * Load a specific page
+   * @param {string} page - Page to load
+   */
+  async loadPage(page) {
+    const contentContainer = this.container.querySelector('#app-content');
+    
+    if (!contentContainer) {
+      throw new Error('App content container not found');
+    }
+    
+    console.log(`🔄 Loading page: ${page}`);
+    
+    // First, destroy any existing page component for this page
+    if (this.components.pages[page] && this.components.pages[page].destroy) {
+      console.log(`🧹 Destroying existing ${page} page component`);
+      this.components.pages[page].destroy();
+      this.components.pages[page] = null;
+    }
+    
+    // Always clear and recreate the page to ensure clean state
+    contentContainer.innerHTML = '';
+    
+    // Create or recreate page component
+    await this.createPageComponent(page, contentContainer);
+    
+    // Call showPage for any additional setup
+    await this.showPage(page);
+    
+    console.log(`✅ Page '${page}' loaded successfully`);
+  }
+
+  /**
+   * Create page component
+   * @param {string} page - Page type
+   * @param {HTMLElement} container - Container element
+   */
+  async createPageComponent(page, container) {
+    // Cleanup existing page component if it exists
+    if (this.components.pages[page] && this.components.pages[page].destroy) {
+      this.components.pages[page].destroy();
+    }
+    
+    switch (page) {
+      case 'dashboard':
+        if (typeof DashboardPage !== 'undefined') {
+          this.components.pages.dashboard = new DashboardPage(container, this.services);
+          await this.components.pages.dashboard.initialize();
+        } else {
+          throw new Error('DashboardPage component not available. Check if components/DashboardPage.js is loaded.');
+        }
+        break;
+        
+      case 'agents':
+        if (typeof AgentsPage !== 'undefined') {
+          this.components.pages.agents = new AgentsPage(container, this.services);
+          await this.components.pages.agents.initialize();
+          // Expose agentsPage globally for modal access
+          if (typeof window !== 'undefined' && window.claudeAnalyticsApp) {
+            window.claudeAnalyticsApp.agentsPage = this.components.pages.agents;
+            console.log('✅ Exposed agentsPage globally for modal access');
+          }
+        } else {
+          throw new Error('AgentsPage component not available. Check if components/AgentsPage.js is loaded.');
+        }
+        break;
+        
+      default:
+        throw new Error(`Unknown page: ${page}`);
+    }
+  }
+
+  /**
+   * Show a specific page (simplified - loadPage handles everything)
+   * @param {string} page - Page to show
+   */
+  async showPage(page) {
+    // This method is now mainly for compatibility
+    // The actual work is done in loadPage
+    if (this.components.pages[page] && this.components.pages[page].onActivate) {
+      try {
+        await this.components.pages[page].onActivate();
+      } catch (error) {
+        console.warn(`Warning: onActivate failed for ${page}:`, error);
+      }
+    }
+  }
+
+  /**
+   * Cleanup current page
+   */
+  async cleanupCurrentPage() {
+    // Clean up global references
+    if (this.currentPage === 'agents' && typeof window !== 'undefined' && window.claudeAnalyticsApp) {
+      window.claudeAnalyticsApp.agentsPage = undefined;
+      console.log('🧹 Cleaned up global agentsPage reference');
+    }
+    
+    const currentPageComponent = this.components.pages[this.currentPage];
+    if (currentPageComponent && currentPageComponent.onDeactivate) {
+      await currentPageComponent.onDeactivate();
+    }
+  }
+
+  /**
+   * Handle sidebar toggle
+   * @param {boolean} collapsed - Whether sidebar is collapsed
+   */
+  handleSidebarToggle(collapsed) {
+    const appMain = this.container.querySelector('#app-main');
+    appMain.classList.toggle('sidebar-collapsed', collapsed);
+  }
+
+  /**
+   * Handle keyboard shortcuts
+   * @param {KeyboardEvent} e - Keyboard event
+   */
+  handleKeyboardShortcuts(e) {
+    // Ctrl/Cmd + number keys for quick navigation
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+      switch (e.key) {
+        case '1':
+          e.preventDefault();
+          this.navigateToPage('dashboard');
+          break;
+        case '2':
+          e.preventDefault();
+          this.navigateToPage('agents');
+          break;
+        case 'r':
+          e.preventDefault();
+          this.refreshCurrentPage();
+          break;
+      }
+    }
+    
+    // Escape key to close modals
+    if (e.key === 'Escape') {
+      this.hideError();
+    }
+  }
+
+  /**
+   * Refresh current page
+   */
+  async refreshCurrentPage() {
+    const currentPageComponent = this.components.pages[this.currentPage];
+    if (currentPageComponent && currentPageComponent.refreshData) {
+      await currentPageComponent.refreshData();
+    }
+  }
+
+  /**
+   * Show global loading
+   */
+  showGlobalLoading() {
+    const loadingOverlay = this.container.querySelector('#global-loading');
+    loadingOverlay.style.display = 'flex';
+  }
+
+  /**
+   * Hide global loading
+   */
+  hideGlobalLoading() {
+    const loadingOverlay = this.container.querySelector('#global-loading');
+    loadingOverlay.style.display = 'none';
+  }
+
+  /**
+   * Show error modal
+   * @param {string} message - Error message
+   */
+  showError(message) {
+    const errorModal = this.container.querySelector('#error-modal');
+    const errorMessage = this.container.querySelector('#error-modal-message');
+    
+    errorMessage.textContent = message;
+    errorModal.style.display = 'flex';
+    
+    this.lastError = message;
+  }
+
+  /**
+   * Hide error modal
+   */
+  hideError() {
+    const errorModal = this.container.querySelector('#error-modal');
+    errorModal.style.display = 'none';
+  }
+
+  /**
+   * Retry last action that caused an error
+   */
+  async retryLastAction() {
+    this.hideError();
+    
+    try {
+      // Retry loading current page
+      await this.loadPage(this.currentPage);
+    } catch (error) {
+      console.error('Retry failed:', error);
+      this.showError('Retry failed. Please refresh the page.');
+    }
+  }
+
+  /**
+   * Get current page name
+   * @returns {string} Current page name
+   */
+  getCurrentPage() {
+    return this.currentPage;
+  }
+
+  /**
+   * Get page component
+   * @param {string} page - Page name
+   * @returns {Object|null} Page component
+   */
+  getPageComponent(page) {
+    return this.components.pages[page] || null;
+  }
+
+  /**
+   * Check if page is loaded
+   * @param {string} page - Page name
+   * @returns {boolean} Whether page is loaded
+   */
+  isPageLoaded(page) {
+    return !!this.components.pages[page];
+  }
+
+  /**
+   * Destroy application
+   */
+  destroy() {
+    // Cleanup pages
+    Object.values(this.components.pages).forEach(page => {
+      if (page.destroy) {
+        page.destroy();
+      }
+    });
+    
+    // Cleanup sidebar
+    if (this.components.sidebar && this.components.sidebar.destroy) {
+      this.components.sidebar.destroy();
+    }
+    
+    // Remove event listeners
+    window.removeEventListener('hashchange', this.handleNavigation);
+    window.removeEventListener('sidebar-toggle', this.handleSidebarToggle);
+    document.removeEventListener('keydown', this.handleKeyboardShortcuts);
+    
+    this.isInitialized = false;
+  }
+}
+
+// Export for module use
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = App;
+}

package/src/analytics-web/components/{Dashboard.js → Dashboard.js.deprecated}

@@ -24,8 +24,8 @@ class Dashboard {
     if (this.isInitialized) return;
     
     try {
-      this.stateService.setLoading(true);
       await this.render();
+      this.stateService.setLoading(true);
       await this.initializeComponents();
       await this.loadInitialData();
       this.startPeriodicRefresh();
@@ -419,7 +419,18 @@ class Dashboard {
    */
   updateLoadingState(isLoading) {
     const loadingOverlay = this.container.querySelector('#loading-overlay');
-    loadingOverlay.style.display = isLoading ? 'flex' : 'none';
+    if (loadingOverlay) {
+      loadingOverlay.style.display = isLoading ? 'flex' : 'none';
+    } else {
+      // If the DOM isn't ready yet, show a temporary loading state
+      if (isLoading && this.container) {
+        this.container.style.opacity = '0.5';
+        this.container.style.pointerEvents = 'none';
+      } else if (this.container) {
+        this.container.style.opacity = '1';
+        this.container.style.pointerEvents = 'auto';
+      }
+    }
   }
 
   /**
@@ -430,11 +441,16 @@ class Dashboard {
     const errorBanner = this.container.querySelector('#error-banner');
     const errorText = this.container.querySelector('.error-text');
     
-    if (error) {
-      errorText.textContent = error.message || error;
-      errorBanner.style.display = 'flex';
-    } else {
-      errorBanner.style.display = 'none';
+    if (errorBanner && errorText) {
+      if (error) {
+        errorText.textContent = error.message || error;
+        errorBanner.style.display = 'flex';
+      } else {
+        errorBanner.style.display = 'none';
+      }
+    } else if (error) {
+      // If DOM isn't ready, log error for now
+      console.error('Dashboard error (DOM not ready):', error.message || error);
     }
   }