claude-code-templates 1.14.16 → 1.15.1

package/src/analytics.js

@@ -4,6 +4,9 @@ const path = require('path');
 const express = require('express');
 const open = require('open');
 const os = require('os');
+const inquirer = require('inquirer');
+const boxen = require('boxen');
+const { spawn } = require('child_process');
 const packageJson = require('../package.json');
 const StateCalculator = require('./analytics/core/StateCalculator');
 const ProcessDetector = require('./analytics/core/ProcessDetector');
@@ -16,9 +19,12 @@ const WebSocketServer = require('./analytics/notifications/WebSocketServer');
 const NotificationManager = require('./analytics/notifications/NotificationManager');
 const PerformanceMonitor = require('./analytics/utils/PerformanceMonitor');
 const ConsoleBridge = require('./console-bridge');
+const ClaudeAPIProxy = require('./claude-api-proxy');
 
 class ClaudeAnalytics {
-  constructor() {
+  constructor(options = {}) {
+    this.options = options;
+    this.verbose = options.verbose || false;
     this.app = express();
     this.port = 3333;
     this.stateCalculator = new StateCalculator();
@@ -36,6 +42,9 @@ class ClaudeAnalytics {
     this.notificationManager = null;
     this.httpServer = null;
     this.consoleBridge = null;
+    this.cloudflareProcess = null;
+    this.publicUrl = null;
+    this.claudeApiProxy = null;
     this.data = {
       conversations: [],
       summary: {},
@@ -49,6 +58,29 @@ class ClaudeAnalytics {
     };
   }
 
+  /**
+   * Log messages only if verbose mode is enabled
+   * @param {string} level - Log level ('info', 'warn', 'error')
+   * @param {string} message - Message to log
+   * @param {...any} args - Additional arguments
+   */
+  log(level, message, ...args) {
+    if (!this.verbose) return;
+    
+    switch (level) {
+      case 'error':
+        console.error(message, ...args);
+        break;
+      case 'warn':
+        console.warn(message, ...args);
+        break;
+      case 'info':
+      default:
+        console.log(message, ...args);
+        break;
+    }
+  }
+
   async initialize() {
     const homeDir = os.homedir();
     this.claudeDir = path.join(homeDir, '.claude');
@@ -1181,7 +1213,7 @@ class ClaudeAnalytics {
   }
 
   async openBrowser(openTo = null) {
-    const baseUrl = `http://localhost:${this.port}`;
+    const baseUrl = this.publicUrl || `http://localhost:${this.port}`;
     let fullUrl = baseUrl;
     
     // Add fragment/hash for specific page
@@ -1200,6 +1232,191 @@ class ClaudeAnalytics {
     }
   }
 
+  /**
+   * Prompt user if they want to use Cloudflare Tunnel
+   */
+  async promptCloudflareSetup() {
+    console.log('');
+    console.log(chalk.yellow('🌐 Analytics Dashboard Access Options'));
+    console.log('');
+    console.log(chalk.cyan('🔒 About Cloudflare Tunnel:'));
+    console.log(chalk.gray('• Creates a secure connection between your localhost and the web'));
+    console.log(chalk.gray('• Only you will have access to the generated URL (not public)'));
+    console.log(chalk.gray('• The connection is end-to-end encrypted'));
+    console.log(chalk.gray('• Automatically closes when you end the session'));
+    console.log(chalk.gray('• No firewall or port configuration required'));
+    console.log('');
+    console.log(chalk.green('✅ It is completely secure - only you can access the dashboard'));
+    console.log('');
+    
+    const { useCloudflare } = await inquirer.prompt([{
+      type: 'confirm',
+      name: 'useCloudflare',
+      message: 'Enable Cloudflare Tunnel for secure remote access?',
+      default: true
+    }]);
+
+    return useCloudflare;
+  }
+
+  /**
+   * Start Cloudflare Tunnel
+   */
+  async startCloudflareTunnel() {
+    try {
+      console.log(chalk.blue('🔧 Starting Cloudflare Tunnel...'));
+      
+      // Check if cloudflared is installed
+      const checkProcess = spawn('cloudflared', ['version'], { stdio: 'pipe' });
+      
+      return new Promise((resolve, reject) => {
+        checkProcess.on('error', (error) => {
+          console.log(chalk.red('❌ Cloudflared is not installed.'));
+          console.log('');
+          console.log(chalk.yellow('📥 To install Cloudflare Tunnel:'));
+          console.log(chalk.gray('• macOS: brew install cloudflared'));
+          console.log(chalk.gray('• Windows: winget install --id Cloudflare.cloudflared'));
+          console.log(chalk.gray('• Linux: apt-get install cloudflared'));
+          console.log('');
+          console.log(chalk.blue('💡 More info: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/'));
+          resolve(false);
+        });
+
+        checkProcess.on('close', (code) => {
+          if (code === 0) {
+            this.createCloudflareTunnel();
+            resolve(true);
+          } else {
+            resolve(false);
+          }
+        });
+      });
+    } catch (error) {
+      console.log(chalk.red(`❌ Error checking Cloudflare Tunnel: ${error.message}`));
+      return false;
+    }
+  }
+
+  /**
+   * Create the actual Cloudflare Tunnel
+   */
+  async createCloudflareTunnel() {
+    try {
+      console.log(chalk.blue('🚀 Creating secure tunnel...'));
+      
+      // Start cloudflared tunnel normally, but filter the output to capture URL
+      this.cloudflareProcess = spawn('cloudflared', [
+        'tunnel',
+        '--url', `http://localhost:${this.port}`
+      ], { 
+        stdio: ['pipe', 'pipe', 'pipe']
+      });
+
+      let tunnelEstablished = false;
+
+      return new Promise((resolve) => {
+        // Monitor stderr for the tunnel URL (cloudflared outputs most info to stderr)
+        this.cloudflareProcess.stderr.on('data', (data) => {
+          const output = data.toString();
+          
+          // Use the cleaner regex to extract URL from the logs
+          const urlMatch = output.match(/https:\/\/[a-zA-Z0-9.-]+\.trycloudflare\.com/);
+          
+          if (urlMatch && !tunnelEstablished) {
+            tunnelEstablished = true;
+            this.publicUrl = urlMatch[0];
+            
+            // Create a prominent, boxed display for the tunnel URL
+            const tunnelMessage = chalk.green.bold('🌍 CLOUDFLARE TUNNEL ACTIVE') + '\n\n' +
+              chalk.cyan.bold('Public URL: ') + chalk.white.underline(this.publicUrl) + '\n\n' +
+              chalk.yellow('🔗 Share this URL to access your dashboard remotely') + '\n' +
+              chalk.gray('🔒 This tunnel is private and secure - only accessible by you');
+            
+            console.log('\n');
+            console.log(boxen(tunnelMessage, {
+              padding: 1,
+              margin: 1,
+              borderStyle: 'double',
+              borderColor: 'cyan',
+              backgroundColor: '#1a1a1a'
+            }));
+            console.log('\n');
+            resolve(true);
+          }
+        });
+
+        // Also check stdout just in case
+        this.cloudflareProcess.stdout.on('data', (data) => {
+          const output = data.toString();
+          const urlMatch = output.match(/https:\/\/[a-zA-Z0-9.-]+\.trycloudflare\.com/);
+          
+          if (urlMatch && !tunnelEstablished) {
+            tunnelEstablished = true;
+            this.publicUrl = urlMatch[0];
+            
+            // Create a prominent, boxed display for the tunnel URL
+            const tunnelMessage = chalk.green.bold('🌍 CLOUDFLARE TUNNEL ACTIVE') + '\n\n' +
+              chalk.cyan.bold('Public URL: ') + chalk.white.underline(this.publicUrl) + '\n\n' +
+              chalk.yellow('🔗 Share this URL to access your dashboard remotely') + '\n' +
+              chalk.gray('🔒 This tunnel is private and secure - only accessible by you');
+            
+            console.log('\n');
+            console.log(boxen(tunnelMessage, {
+              padding: 1,
+              margin: 1,
+              borderStyle: 'double',
+              borderColor: 'cyan',
+              backgroundColor: '#1a1a1a'
+            }));
+            console.log('\n');
+            resolve(true);
+          }
+        });
+
+        this.cloudflareProcess.on('close', (code) => {
+          if (code !== 0) {
+            console.log(chalk.red(`❌ Cloudflare Tunnel terminated with code: ${code}`));
+          }
+          this.publicUrl = null;
+          this.cloudflareProcess = null;
+          if (!tunnelEstablished) {
+            resolve(false);
+          }
+        });
+
+        this.cloudflareProcess.on('error', (error) => {
+          console.log(chalk.red(`❌ Error with Cloudflare Tunnel: ${error.message}`));
+          this.publicUrl = null;
+          this.cloudflareProcess = null;
+          resolve(false);
+        });
+
+        // Timeout after 15 seconds if tunnel doesn't establish
+        setTimeout(() => {
+          if (!tunnelEstablished) {
+            console.log(chalk.red('❌ Timeout waiting for Cloudflare Tunnel to establish'));
+            resolve(false);
+          }
+        }, 15000);
+      });
+    } catch (error) {
+      console.log(chalk.red(`❌ Error creating Cloudflare Tunnel: ${error.message}`));
+      return false;
+    }
+  }
+
+  /**
+   * Stop Cloudflare Tunnel
+   */
+  stopCloudflareTunnel() {
+    if (this.cloudflareProcess) {
+      console.log(chalk.yellow('🛑 Closing Cloudflare Tunnel...'));
+      this.cloudflareProcess.kill('SIGTERM');
+      this.cloudflareProcess = null;
+      this.publicUrl = null;
+    }
+  }
+
   /**
    * Initialize WebSocket server and notification manager
    */
@@ -1219,6 +1436,12 @@ class ClaudeAnalytics {
       // Connect notification manager to file watcher for typing detection
       this.fileWatcher.setNotificationManager(this.notificationManager);
       
+      // Initialize Claude API Proxy for bidirectional communication
+      console.log(chalk.blue('🌉 Initializing Claude API Proxy...'));
+      this.claudeApiProxy = new ClaudeAPIProxy();
+      await this.claudeApiProxy.start();
+      console.log(chalk.green('✅ Claude API Proxy initialized on port 3335'));
+      
       // Setup notification subscriptions
       this.setupNotificationSubscriptions();
       
@@ -1815,6 +2038,9 @@ class ClaudeAnalytics {
     // Stop file watchers
     this.fileWatcher.stop();
 
+    // Stop Cloudflare Tunnel
+    this.stopCloudflareTunnel();
+
     // Stop server
     // Close WebSocket server
     if (this.webSocketServer) {
@@ -1831,6 +2057,11 @@ class ClaudeAnalytics {
       this.consoleBridge.shutdown();
     }
     
+    // Stop Claude API Proxy
+    if (this.claudeApiProxy) {
+      this.claudeApiProxy.stop();
+    }
+    
     if (this.httpServer) {
       this.httpServer.close();
     }
@@ -1857,24 +2088,51 @@ async function runAnalytics(options = {}) {
     console.log(chalk.blue('📊 Starting Claude Code Analytics Dashboard...'));
   }
 
-  const analytics = new ClaudeAnalytics();
+  const analytics = new ClaudeAnalytics(options);
 
   try {
+    // Handle Cloudflare Tunnel prompt BEFORE initializing anything
+    let useCloudflare = false;
+    
+    if (options.tunnel) {
+      useCloudflare = await analytics.promptCloudflareSetup();
+    }
+
     await analytics.initialize();
 
     // Create web dashboard files
     // Web dashboard files are now static in analytics-web directory
 
     await analytics.startServer();
+    
+    // Start Cloudflare Tunnel BEFORE other services if requested and confirmed
+    if (useCloudflare) {
+      const cloudflareStarted = await analytics.startCloudflareTunnel();
+      if (!cloudflareStarted) {
+        console.log(chalk.yellow('⚠️  Continuing with localhost only...'));
+      }
+      // Wait a bit longer for tunnel to stabilize
+      await new Promise(resolve => setTimeout(resolve, 2000));
+    }
+
     await analytics.openBrowser(openTo);
 
+    const accessUrl = analytics.publicUrl || `http://localhost:${analytics.port}`;
+    
     if (openTo === 'agents') {
       console.log(chalk.green('✅ Claude Code Chats dashboard is running!'));
-      console.log(chalk.cyan(`📱 Access at: http://localhost:${analytics.port}/#agents`));
+      console.log(chalk.cyan(`📱 Access at: ${accessUrl}/#agents`));
     } else {
       console.log(chalk.green('✅ Analytics dashboard is running!'));
-      console.log(chalk.cyan(`📱 Access at: http://localhost:${analytics.port}`));
+      console.log(chalk.cyan(`📱 Access at: ${accessUrl}`));
     }
+    
+    if (analytics.publicUrl) {
+      console.log(chalk.gray('🔒 Secure access via Cloudflare Tunnel'));
+    } else {
+      console.log(chalk.gray('🏠 Local access only'));
+    }
+    
     console.log(chalk.gray('Press Ctrl+C to stop the server'));
 
     // Handle graceful shutdown