claude-code-templates 1.13.2 → 1.14.1

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

@@ -0,0 +1,307 @@
+/**
+ * HeaderComponent - Unified header for all analytics pages
+ * Provides consistent branding, navigation, and controls across the application
+ */
+class HeaderComponent {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      title: options.title || 'Claude Code Analytics Dashboard',
+      subtitle: options.subtitle || 'Real-time monitoring and analytics for Claude Code sessions',
+      showVersionBadge: options.showVersionBadge !== false,
+      showLastUpdate: options.showLastUpdate !== false,
+      showThemeSwitch: options.showThemeSwitch !== false,
+      showGitHubLink: options.showGitHubLink !== false,
+      version: options.version || 'v1.13.2', // Default fallback
+      customActions: options.customActions || [],
+      dataService: options.dataService || null, // DataService for dynamic version loading
+      ...options
+    };
+    
+    this.lastUpdateTime = null;
+    this.updateInterval = null;
+    this.actualVersion = this.options.version; // Will be updated dynamically
+  }
+
+  /**
+   * Render the header component
+   */
+  render() {
+    const headerHTML = `
+      <div class="page-header">
+        <div class="header-content">
+          <div class="header-left">
+            <div class="status-header">
+              <span class="session-timer-status-dot active" id="session-status-dot"></span>
+              <h1 class="page-title">
+                ${this.options.title}
+                ${this.options.showVersionBadge ? `<span class="version-badge" id="version-badge">${this.actualVersion}</span>` : ''}
+              </h1>
+            </div>
+            <div class="page-subtitle">
+              ${this.options.subtitle}
+            </div>
+            ${this.options.showLastUpdate ? `
+              <div class="last-update-header">
+                <span class="last-update-label">last update:</span>
+                <span id="last-update-header-text">Never</span>
+              </div>
+            ` : ''}
+          </div>
+          <div class="header-right">
+            ${this.options.showThemeSwitch ? `
+              <div class="theme-switch-container" title="Toggle light/dark theme">
+                <div class="theme-switch" id="header-theme-switch">
+                  <div class="theme-switch-track">
+                    <div class="theme-switch-thumb" id="header-theme-switch-thumb">
+                      <span class="theme-switch-icon">🌙</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ` : ''}
+            ${this.options.showGitHubLink ? `
+              <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-link" title="Star on GitHub">
+                <span class="github-icon">⭐</span>
+                Star on GitHub
+              </a>
+            ` : ''}
+            ${this.renderCustomActions()}
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.container.innerHTML = headerHTML;
+    this.bindEvents();
+    this.initializeTheme();
+    
+    if (this.options.showLastUpdate) {
+      this.updateLastUpdateTime();
+      this.startUpdateInterval();
+    }
+
+    // Load version dynamically if DataService is available
+    if (this.options.dataService) {
+      this.loadVersion();
+    }
+  }
+
+  /**
+   * Render custom actions in header
+   */
+  renderCustomActions() {
+    if (!this.options.customActions || this.options.customActions.length === 0) {
+      return '';
+    }
+
+    return this.options.customActions.map(action => `
+      <button class="header-action-btn" id="${action.id}" title="${action.title || action.label}">
+        ${action.icon ? `<span class="btn-icon">${action.icon}</span>` : ''}
+        ${action.label}
+      </button>
+    `).join('');
+  }
+
+  /**
+   * Bind event listeners
+   */
+  bindEvents() {
+    // Theme toggle
+    if (this.options.showThemeSwitch) {
+      const themeSwitch = this.container.querySelector('#header-theme-switch');
+      if (themeSwitch) {
+        themeSwitch.addEventListener('click', () => this.toggleTheme());
+      }
+    }
+
+    // Custom action handlers
+    this.options.customActions.forEach(action => {
+      const btn = this.container.querySelector(`#${action.id}`);
+      if (btn && action.handler) {
+        btn.addEventListener('click', action.handler);
+      }
+    });
+  }
+
+  /**
+   * Initialize theme from localStorage
+   */
+  initializeTheme() {
+    if (!this.options.showThemeSwitch) return;
+
+    const savedTheme = localStorage.getItem('claude-analytics-theme') || 'dark';
+    const body = document.body;
+    const headerThumb = this.container.querySelector('#header-theme-switch-thumb');
+    const headerIcon = headerThumb?.querySelector('.theme-switch-icon');
+    
+    body.setAttribute('data-theme', savedTheme);
+    if (headerThumb && headerIcon) {
+      if (savedTheme === 'light') {
+        headerThumb.classList.add('light');
+        headerIcon.textContent = '☀️';
+      } else {
+        headerThumb.classList.remove('light');
+        headerIcon.textContent = '🌙';
+      }
+    }
+  }
+
+  /**
+   * Toggle theme between light and dark
+   */
+  toggleTheme() {
+    const body = document.body;
+    const headerThumb = this.container.querySelector('#header-theme-switch-thumb');
+    const headerIcon = headerThumb?.querySelector('.theme-switch-icon');
+    
+    // Also sync with global theme switch if exists
+    const globalThumb = document.getElementById('themeSwitchThumb');
+    const globalIcon = globalThumb?.querySelector('.theme-switch-icon');
+    
+    const isLight = body.getAttribute('data-theme') === 'light';
+    const newTheme = isLight ? 'dark' : 'light';
+    
+    body.setAttribute('data-theme', newTheme);
+    
+    // Update header theme switch
+    if (headerThumb && headerIcon) {
+      headerThumb.classList.toggle('light', newTheme === 'light');
+      headerIcon.textContent = newTheme === 'light' ? '☀️' : '🌙';
+    }
+    
+    // Sync with global theme switch
+    if (globalThumb && globalIcon) {
+      globalThumb.classList.toggle('light', newTheme === 'light');
+      globalIcon.textContent = newTheme === 'light' ? '☀️' : '🌙';
+    }
+    
+    localStorage.setItem('claude-analytics-theme', newTheme);
+  }
+
+  /**
+   * Update last update time
+   */
+  updateLastUpdateTime() {
+    if (!this.options.showLastUpdate) return;
+
+    const currentTime = new Date().toLocaleTimeString();
+    const lastUpdateText = this.container.querySelector('#last-update-header-text');
+    
+    if (lastUpdateText) {
+      lastUpdateText.textContent = currentTime;
+    }
+    
+    this.lastUpdateTime = currentTime;
+  }
+
+  /**
+   * Start periodic update of timestamp
+   */
+  startUpdateInterval() {
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval);
+    }
+    
+    // Update every 30 seconds
+    this.updateInterval = setInterval(() => {
+      this.updateLastUpdateTime();
+    }, 30000);
+  }
+
+  /**
+   * Stop update interval
+   */
+  stopUpdateInterval() {
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+  }
+
+  /**
+   * Load version dynamically from backend
+   */
+  async loadVersion() {
+    if (!this.options.dataService) return;
+
+    try {
+      const versionData = await this.options.dataService.getVersion();
+      if (versionData && versionData.version) {
+        this.actualVersion = `v${versionData.version}`;
+        this.updateVersionBadge();
+      }
+    } catch (error) {
+      console.error('Error loading version:', error);
+    }
+  }
+
+  /**
+   * Update version badge in the DOM
+   */
+  updateVersionBadge() {
+    const versionBadge = this.container.querySelector('#version-badge');
+    if (versionBadge) {
+      versionBadge.textContent = this.actualVersion;
+    }
+  }
+
+  /**
+   * Update header title
+   * @param {string} title - New title
+   */
+  updateTitle(title) {
+    this.options.title = title;
+    const titleElement = this.container.querySelector('.page-title');
+    if (titleElement) {
+      titleElement.innerHTML = `
+        ${title}
+        ${this.options.showVersionBadge ? `<span class="version-badge" id="version-badge">${this.actualVersion}</span>` : ''}
+      `;
+    }
+  }
+
+  /**
+   * Update header subtitle
+   * @param {string} subtitle - New subtitle
+   */
+  updateSubtitle(subtitle) {
+    this.options.subtitle = subtitle;
+    const subtitleElement = this.container.querySelector('.page-subtitle');
+    if (subtitleElement) {
+      subtitleElement.textContent = subtitle;
+    }
+  }
+
+  /**
+   * Update status dot state
+   * @param {boolean} active - Whether status should be active
+   */
+  updateStatusDot(active) {
+    const statusDot = this.container.querySelector('#session-status-dot');
+    if (statusDot) {
+      statusDot.classList.toggle('active', active);
+    }
+  }
+
+  /**
+   * Get current theme
+   * @returns {string} Current theme ('light' or 'dark')
+   */
+  getCurrentTheme() {
+    return document.body.getAttribute('data-theme') || 'dark';
+  }
+
+  /**
+   * Destroy header component
+   */
+  destroy() {
+    this.stopUpdateInterval();
+    this.container.innerHTML = '';
+  }
+}
+
+// Export for module use
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = HeaderComponent;
+}

package/src/analytics-web/index.html

@@ -12,6 +12,7 @@
     <script src="services/StateService.js"></script>
     
     <!-- Component Scripts -->
+    <script src="components/HeaderComponent.js"></script>
     <script src="components/Charts.js"></script>
     <!-- Dashboard.js removed - deprecated architecture -->
     <script src="components/SessionTimer.js"></script>
@@ -2644,6 +2645,7 @@
             flex: 1;
             display: flex;
             flex-direction: column;
+            margin-left: 56px;
             transition: margin-left 0.3s ease;
         }
         
@@ -2662,7 +2664,9 @@
             display: flex;
             flex-direction: column;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
+            position: fixed;
+            top: 0;
+            left: 0;
             z-index: 1000;
             box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
             overflow: visible;
@@ -2673,6 +2677,10 @@
             background: var(--bg-secondary);
             border-right: 1px solid var(--text-accent);
             box-shadow: 4px 0 16px rgba(213, 116, 85, 0.1);
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 100vh;
         }
         
         .sidebar-header {
@@ -4616,32 +4624,7 @@
             margin: 0 auto;
         }
 
-        /* App Layout Styles (App.js + Sidebar.js) */
-        .app {
-            display: flex;
-            min-height: 100vh;
-            background: var(--bg-primary);
-        }
-
-        .app-sidebar {
-            width: 60px;
-            background: var(--bg-secondary);
-            border-right: 1px solid var(--border-primary);
-            transition: width 0.3s ease;
-        }
-
-        .app-main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-        }
-
-        .app-content {
-            flex: 1;
-            padding: 20px;
-            overflow-y: auto;
-        }
+        /* App Layout Styles (App.js + Sidebar.js) - Duplicates removed, using definitions above */
         
         /* Metrics Section */
         .metrics-section {

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

@@ -409,6 +409,19 @@ class DataService {
     this.setupWebSocketIntegration();
   }
   
+  /**
+   * Get application version from backend
+   * @returns {Promise<Object>} Version information
+   */
+  async getVersion() {
+    try {
+      return await this.cachedFetch('/api/version', 300000); // Cache for 5 minutes
+    } catch (error) {
+      console.error('Error fetching version:', error);
+      return { version: '1.13.2', name: 'claude-code-templates' }; // Fallback
+    }
+  }
+
   /**
    * Get cache statistics
    * @returns {Object} Cache statistics

package/src/health-check.js

@@ -394,58 +394,62 @@ class HealthChecker {
   }
 
   checkAuthentication() {
+    const homeDir = os.homedir();
+    
+    // Check for Claude Code OAuth authentication in ~/.claude.json
+    const claudeJsonPath = path.join(homeDir, '.claude.json');
+    
     try {
-      // Try to run claude command to check authentication status
-      const output = execSync('claude auth status 2>&1', { 
-        encoding: 'utf8', 
-        stdio: 'pipe',
-        timeout: 5000 
-      });
+      if (fs.existsSync(claudeJsonPath)) {
+        const claudeConfig = JSON.parse(fs.readFileSync(claudeJsonPath, 'utf8'));
+        
+        // Check for OAuth authentication
+        if (claudeConfig.oauthAccount && claudeConfig.oauthAccount.accountUuid) {
+          const email = claudeConfig.oauthAccount.emailAddress || 'OAuth user';
+          return {
+            status: 'pass',
+            message: `Authenticated via OAuth (${email})`
+          };
+        }
+        
+        // Check for API key authentication
+        if (claudeConfig.apiKey) {
+          return {
+            status: 'pass',
+            message: 'Authenticated via API key'
+          };
+        }
+      }
       
-      if (output.includes('authenticated') || output.includes('logged in') || output.includes('active')) {
+      // Check for environment variable API key
+      if (process.env.ANTHROPIC_API_KEY) {
         return {
           status: 'pass',
-          message: 'Authenticated and active'
+          message: 'Authenticated via ANTHROPIC_API_KEY environment variable'
         };
       }
       
-      // If command runs but no clear authentication status
-      return {
-        status: 'warn',
-        message: 'Authentication status unclear'
-      };
-      
-    } catch (error) {
-      // Try alternative method - check for session/config files
-      const homeDir = os.homedir();
-      const possibleAuthPaths = [
-        path.join(homeDir, '.claude', 'session'),
-        path.join(homeDir, '.claude', 'config'),
-        path.join(homeDir, '.config', 'claude', 'session'),
-        path.join(homeDir, '.config', 'claude', 'config'),
-        path.join(homeDir, '.anthropic', 'session'),
-        path.join(homeDir, '.anthropic', 'config')
-      ];
-      
-      for (const authPath of possibleAuthPaths) {
-        if (fs.existsSync(authPath)) {
-          try {
-            const stats = fs.statSync(authPath);
-            // Check if file was modified recently (within last 30 days)
-            const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
-            if (stats.mtime > thirtyDaysAgo) {
-              return {
-                status: 'pass',
-                message: 'Authentication session found'
-              };
-            }
-          } catch (statError) {
-            // Continue to next path
-          }
-        }
+      // Try to check if we can make a simple claude command
+      try {
+        execSync('claude --version', { 
+          encoding: 'utf8', 
+          stdio: 'pipe',
+          timeout: 3000 
+        });
+        
+        return {
+          status: 'warn',
+          message: 'Claude CLI available but authentication not configured'
+        };
+      } catch (cliError) {
+        return {
+          status: 'fail',
+          message: 'Claude CLI not available or not authenticated'
+        };
       }
       
-      // Try to check if we can make a simple claude command
+    } catch (error) {
+      // If we can't read the config file, check if CLI is at least installed
       try {
         execSync('claude --version', { 
           encoding: 'utf8', 
@@ -460,7 +464,7 @@ class HealthChecker {
       } catch (cliError) {
         return {
           status: 'fail',
-          message: 'Claude CLI not available or not authenticated'
+          message: 'Claude CLI not available or authentication check failed'
         };
       }
     }

package/src/index.js

@@ -14,6 +14,7 @@ const { runHookStats } = require('./hook-stats');
 const { runMCPStats } = require('./mcp-stats');
 const { runAnalytics } = require('./analytics');
 const { runHealthCheck } = require('./health-check');
+const { trackingService } = require('./tracking-service');
 
 async function showMainMenu() {
   console.log('');
@@ -49,12 +50,14 @@ async function showMainMenu() {
   
   if (initialChoice.action === 'analytics') {
     console.log(chalk.blue('📊 Launching Claude Code Analytics Dashboard...'));
+    trackingService.trackAnalyticsDashboard({ page: 'dashboard', source: 'interactive_menu' });
     await runAnalytics({});
     return;
   }
   
   if (initialChoice.action === 'chats') {
     console.log(chalk.blue('💬 Launching Claude Code Chats Dashboard...'));
+    trackingService.trackAnalyticsDashboard({ page: 'agents', source: 'interactive_menu' });
     await runAnalytics({ openTo: 'agents' });
     return;
   }
@@ -62,6 +65,13 @@ async function showMainMenu() {
   if (initialChoice.action === 'health') {
     console.log(chalk.blue('🔍 Running Health Check...'));
     const healthResult = await runHealthCheck();
+    
+    // Track health check usage
+    trackingService.trackHealthCheck({
+      setup_recommended: healthResult.runSetup,
+      issues_found: healthResult.issues || 0
+    });
+    
     if (healthResult.runSetup) {
       console.log(chalk.blue('⚙️  Starting Project Setup...'));
       // Continue with setup flow
@@ -116,12 +126,14 @@ async function createClaudeConfig(options = {}) {
   
   // Handle analytics dashboard
   if (options.analytics) {
+    trackingService.trackAnalyticsDashboard({ page: 'dashboard', source: 'command_line' });
     await runAnalytics(options);
     return;
   }
   
   // Handle chats/agents dashboard
   if (options.chats || options.agents) {
+    trackingService.trackAnalyticsDashboard({ page: 'agents', source: 'command_line' });
     await runAnalytics({ ...options, openTo: 'agents' });
     return;
   }
@@ -130,6 +142,14 @@ async function createClaudeConfig(options = {}) {
   let shouldRunSetup = false;
   if (options.healthCheck || options.health || options.check || options.verify) {
     const healthResult = await runHealthCheck();
+    
+    // Track health check usage
+    trackingService.trackHealthCheck({
+      setup_recommended: healthResult.runSetup,
+      issues_found: healthResult.issues || 0,
+      source: 'command_line'
+    });
+    
     if (healthResult.runSetup) {
       console.log(chalk.blue('⚙️  Starting Project Setup...'));
       shouldRunSetup = true;
@@ -244,8 +264,8 @@ async function createClaudeConfig(options = {}) {
   console.log(chalk.white('  2. Customize the configuration for your project'));
   console.log(chalk.white('  3. Start using Claude Code with: claude'));
   console.log('');
-  console.log(chalk.blue('🌐 View all available templates at: https://davila7.github.io/claude-code-templates/'));
-  console.log(chalk.blue('📖 Read the complete documentation at: https://davila7.github.io/claude-code-templates/docu/'));
+  console.log(chalk.blue('🌐 View all available templates at: https://aitmpl.com/'));
+  console.log(chalk.blue('📖 Read the complete documentation at: https://aitmpl.com/docu/'));
   
   if (config.language !== 'common') {
     console.log(chalk.yellow(`💡 Language-specific features for ${config.language} have been configured`));
@@ -262,6 +282,17 @@ async function createClaudeConfig(options = {}) {
   if (config.mcps && config.mcps.length > 0) {
     console.log(chalk.blue(`🔧 ${config.mcps.length} MCP servers have been configured`));
   }
+
+  // Track successful template installation
+  if (!options.agent && !options.command && !options.mcp) {
+    trackingService.trackTemplateInstallation(config.language, config.framework, {
+      installation_method: options.setupFromMenu ? 'interactive_menu' : 'command_line',
+      dry_run: options.dryRun || false,
+      hooks_count: config.hooks ? config.hooks.length : 0,
+      mcps_count: config.mcps ? config.mcps.length : 0,
+      project_detected: !!options.detectedProject
+    });
+  }
   
   // Run post-installation validation
   if (!options.dryRun) {
@@ -315,6 +346,14 @@ async function installIndividualAgent(agentName, targetDir, options) {
     
     console.log(chalk.green(`✅ Agent "${agentName}" installed successfully!`));
     
+    // Track successful agent installation
+    trackingService.trackDownload('agent', agentName, {
+      language: language,
+      framework: framework,
+      installation_type: 'individual_agent',
+      template_installed: true
+    });
+    
   } catch (error) {
     console.log(chalk.red(`❌ Error installing agent: ${error.message}`));
   }
@@ -353,6 +392,12 @@ async function installIndividualCommand(commandName, targetDir, options) {
     console.log(chalk.green(`✅ Command "${commandName}" installed successfully!`));
     console.log(chalk.cyan(`📁 Installed to: ${path.relative(targetDir, targetFile)}`));
     
+    // Track successful command installation
+    trackingService.trackDownload('command', commandName, {
+      installation_type: 'individual_command',
+      target_directory: path.relative(process.cwd(), targetDir)
+    });
+    
   } catch (error) {
     console.log(chalk.red(`❌ Error installing command: ${error.message}`));
   }
@@ -404,6 +449,13 @@ async function installIndividualMCP(mcpName, targetDir, options) {
     console.log(chalk.green(`✅ MCP "${mcpName}" installed successfully!`));
     console.log(chalk.cyan(`📁 Configuration merged into: ${path.relative(targetDir, targetMcpFile)}`));
     
+    // Track successful MCP installation
+    trackingService.trackDownload('mcp', mcpName, {
+      installation_type: 'individual_mcp',
+      merged_with_existing: existingConfig !== null,
+      servers_count: Object.keys(mergedConfig.mcpServers || {}).length
+    });
+    
   } catch (error) {
     console.log(chalk.red(`❌ Error installing MCP: ${error.message}`));
   }