claude-code-templates 1.8.1 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects",
   "main": "src/index.js",
   "bin": {
@@ -31,7 +31,7 @@
     "dev:link": "npm link",
     "dev:unlink": "npm unlink -g claude-code-templates",
     "pretest:commands": "npm run dev:link",
-    "prepublishOnly": "echo 'Skipping tests for emergency publish'",
+    "prepublishOnly-disabled": "npm run test:coverage",
     "analytics:start": "node src/analytics.js",
     "analytics:test": "npm run test:analytics"
   },

package/src/analytics/core/ConversationAnalyzer.js

@@ -125,7 +125,7 @@ class ConversationAnalyzer {
             status: stateCalculator.determineConversationStatus(parsedMessages, stats.mtime),
             conversationState: stateCalculator.determineConversationState(parsedMessages, stats.mtime),
             statusSquares: await this.getCachedStatusSquares(filePath, parsedMessages),
-            parsedMessages: parsedMessages, // Include parsed messages for session analysis
+            // parsedMessages removed to prevent memory leak - available via cache when needed
           };
 
           conversations.push(conversation);

package/src/analytics/core/FileWatcher.js

@@ -96,20 +96,20 @@ class FileWatcher {
    * Setup periodic refresh intervals
    */
   setupPeriodicRefresh() {
-    // Periodic refresh to catch any missed changes
+    // Periodic refresh to catch any missed changes (reduced frequency)
     const dataRefreshInterval = setInterval(async () => {
       console.log(chalk.blue('⏱️  Periodic data refresh...'));
       await this.triggerDataRefresh();
-    }, 30000); // Every 30 seconds
+    }, 120000); // Every 2 minutes (reduced from 30 seconds)
 
     this.intervals.push(dataRefreshInterval);
 
-    // More frequent updates for active processes (every 10 seconds)
+    // Process updates for active processes (reduced frequency)
     const processRefreshInterval = setInterval(async () => {
       if (this.processRefreshCallback) {
         await this.processRefreshCallback();
       }
-    }, 10000);
+    }, 30000); // Every 30 seconds (reduced from 10 seconds)
 
     this.intervals.push(processRefreshInterval);
   }

package/src/analytics/core/SessionAnalyzer.js

@@ -127,6 +127,38 @@ class SessionAnalyzer {
     };
   }
 
+  /**
+   * Generate estimated messages for session analysis when parsedMessages is not available
+   * @param {Object} conversation - Conversation object
+   * @returns {Array} Array of estimated message objects
+   */
+  generateEstimatedMessages(conversation) {
+    const messages = [];
+    const messageCount = conversation.messageCount || 0;
+    const created = new Date(conversation.created);
+    const lastModified = new Date(conversation.lastModified);
+    
+    if (messageCount === 0) return messages;
+    
+    // Estimate message distribution over time
+    const timeDiff = lastModified - created;
+    const timePerMessage = timeDiff / messageCount;
+    
+    // Generate alternating user/assistant messages
+    for (let i = 0; i < messageCount; i++) {
+      const timestamp = new Date(created.getTime() + (i * timePerMessage));
+      const role = i % 2 === 0 ? 'user' : 'assistant';
+      
+      messages.push({
+        timestamp: timestamp,
+        role: role,
+        usage: conversation.tokenUsage || null
+      });
+    }
+    
+    return messages;
+  }
+
   /**
    * Extract 5-hour sliding window sessions from conversations
    * @param {Array} conversations - Array of conversation objects
@@ -137,15 +169,16 @@ class SessionAnalyzer {
     const allMessages = [];
     
     conversations.forEach(conversation => {
-      if (!conversation.parsedMessages || conversation.parsedMessages.length === 0) {
+      // Skip conversations without message count or with zero messages
+      if (!conversation.messageCount || conversation.messageCount === 0) {
         return;
       }
 
-      const sortedMessages = conversation.parsedMessages.sort((a, b) => 
-        new Date(a.timestamp) - new Date(b.timestamp)
-      );
+      // Generate estimated messages based on token usage and timestamps
+      // This is a fallback when parsedMessages is not available
+      const estimatedMessages = this.generateEstimatedMessages(conversation);
 
-      sortedMessages.forEach(message => {
+      estimatedMessages.forEach(message => {
         allMessages.push({
           timestamp: message.timestamp,
           role: message.role,
@@ -268,15 +301,16 @@ class SessionAnalyzer {
     const allMessages = [];
     
     conversations.forEach(conversation => {
-      if (!conversation.parsedMessages || conversation.parsedMessages.length === 0) {
+      // Skip conversations without message count or with zero messages
+      if (!conversation.messageCount || conversation.messageCount === 0) {
         return;
       }
 
-      const sortedMessages = conversation.parsedMessages.sort((a, b) => 
-        new Date(a.timestamp) - new Date(b.timestamp)
-      );
+      // Generate estimated messages based on token usage and timestamps
+      // This is a fallback when parsedMessages is not available
+      const estimatedMessages = this.generateEstimatedMessages(conversation);
 
-      sortedMessages.forEach(message => {
+      estimatedMessages.forEach(message => {
         allMessages.push({
           timestamp: message.timestamp,
           role: message.role,

package/src/analytics/data/DataCache.js

@@ -32,14 +32,14 @@ class DataCache {
       projectStats: new Map(), // projectPath -> { data, timestamp }
     };
     
-    // Cache configuration
+    // Cache configuration (reduced TTL for aggressive memory management)
     this.config = {
-      fileContentTTL: 60000, // 1 minute for file content
-      parsedDataTTL: 30000, // 30 seconds for parsed data
-      computationTTL: 20000, // 20 seconds for expensive computations
-      metadataTTL: 10000, // 10 seconds for metadata
+      fileContentTTL: 30000, // 30 seconds for file content (reduced from 60s)
+      parsedDataTTL: 15000, // 15 seconds for parsed data (reduced from 30s)
+      computationTTL: 10000, // 10 seconds for expensive computations (reduced from 20s)
+      metadataTTL: 5000, // 5 seconds for metadata (reduced from 10s)
       processTTL: 500, // 500ms for process data
-      maxCacheSize: 100, // Reduced from 1000 to 100 to prevent memory buildup
+      maxCacheSize: 25, // Aggressively reduced to 25 to prevent memory buildup
     };
     
     // Dependency tracking for smart invalidation
@@ -55,11 +55,11 @@ class DataCache {
       evictions: 0
     };
     
-    // Start automatic cleanup interval
+    // Start automatic cleanup interval (more aggressive)
     this.cleanupInterval = setInterval(() => {
       this.evictOldEntries();
       this.enforceSizeLimits();
-    }, 30000); // Every 30 seconds
+    }, 15000); // Every 15 seconds (reduced from 30 seconds)
   }
 
   /**

package/src/analytics-web/index.html

@@ -7,6 +7,42 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
     <script src="components/SessionTimer.js"></script>
     <style>
+        :root {
+            /* Dark theme colors (default) */
+            --bg-primary: #0d1117;
+            --bg-secondary: #161b22;
+            --bg-tertiary: #21262d;
+            --border-primary: #30363d;
+            --border-secondary: #21262d;
+            --text-primary: #c9d1d9;
+            --text-secondary: #7d8590;
+            --text-accent: #d57455;
+            --text-success: #3fb950;
+            --text-warning: #f97316;
+            --text-error: #f85149;
+            --text-info: #a5d6ff;
+            --shadow-primary: rgba(0, 0, 0, 0.4);
+            --shadow-secondary: rgba(1, 4, 9, 0.85);
+        }
+        
+        [data-theme="light"] {
+            /* Light theme colors */
+            --bg-primary: #ffffff;
+            --bg-secondary: #f6f8fa;
+            --bg-tertiary: #f1f3f4;
+            --border-primary: #d0d7de;
+            --border-secondary: #e5e5e5;
+            --text-primary: #24292f;
+            --text-secondary: #656d76;
+            --text-accent: #d73a49;
+            --text-success: #28a745;
+            --text-warning: #f97316;
+            --text-error: #d73a49;
+            --text-info: #0366d6;
+            --shadow-primary: rgba(0, 0, 0, 0.1);
+            --shadow-secondary: rgba(0, 0, 0, 0.2);
+        }
+        
         * {
             margin: 0;
             padding: 0;
@@ -15,10 +51,11 @@
         
         body {
             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            background: #0d1117;
-            color: #c9d1d9;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             min-height: 100vh;
             line-height: 1.4;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
         
         .terminal {
@@ -28,14 +65,14 @@
         }
         
         .terminal-header {
-            border-bottom: 1px solid #30363d;
+            border-bottom: 1px solid var(--border-primary);
             padding-bottom: 20px;
             margin-bottom: 20px;
             position: relative;
         }
         
         .terminal-title {
-            color: #d57455;
+            color: var(--text-accent);
             font-size: 1.25rem;
             font-weight: normal;
             display: flex;
@@ -47,7 +84,7 @@
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: #3fb950;
+            background: var(--text-success);
             animation: pulse 2s infinite;
         }
         
@@ -57,18 +94,94 @@
         }
         
         .terminal-subtitle {
-            color: #7d8590;
+            color: var(--text-secondary);
             font-size: 0.875rem;
             margin-top: 4px;
         }
         
-        .github-star-btn {
+        .header-actions {
             position: absolute;
             top: 0;
             right: 0;
-            background: #21262d;
-            border: 1px solid #30363d;
-            color: #c9d1d9;
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+        
+        .theme-switch-container {
+            display: flex;
+            align-items: center;
+            font-family: inherit;
+        }
+        
+        .theme-switch {
+            position: relative;
+            cursor: pointer;
+        }
+        
+        .theme-switch-track {
+            position: relative;
+            width: 48px;
+            height: 24px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            border-radius: 3px;
+            transition: all 0.3s ease;
+        }
+        
+        .theme-switch-track:hover {
+            border-color: var(--text-accent);
+            background: var(--border-primary);
+        }
+        
+        .theme-switch-thumb {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 18px;
+            height: 18px;
+            background: var(--text-accent);
+            border-radius: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transform: translateX(0);
+        }
+        
+        .theme-switch-thumb.light {
+            transform: translateX(22px);
+        }
+        
+        .theme-switch-icon {
+            font-size: 0.7rem;
+            color: var(--bg-primary);
+            transition: all 0.3s ease;
+        }
+        
+        
+        .theme-switch-track::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            background: linear-gradient(45deg, transparent, var(--text-accent));
+            border-radius: 3px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        
+        .theme-switch-track:hover::before {
+            opacity: 0.1;
+        }
+        
+        .github-star-btn {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            color: var(--text-primary);
             padding: 8px 12px;
             border-radius: 6px;
             text-decoration: none;
@@ -82,9 +195,9 @@
         }
         
         .github-star-btn:hover {
-            border-color: #d57455;
-            background: #30363d;
-            color: #d57455;
+            border-color: var(--text-accent);
+            background: var(--border-primary);
+            color: var(--text-accent);
             text-decoration: none;
         }
         
@@ -1317,12 +1430,20 @@
                 padding: 6px 8px;
             }
             
-            .github-star-btn {
+            .header-actions {
                 position: relative;
                 margin-top: 12px;
                 align-self: flex-start;
+                gap: 12px;
+            }
+            
+            .github-star-btn {
+                position: relative;
+                margin-top: 0;
+                align-self: flex-start;
             }
             
+            
             .terminal-header {
                 display: flex;
                 flex-direction: column;
@@ -1340,10 +1461,21 @@
             <div class="terminal-subtitle">real-time monitoring dashboard</div>
             <div class="terminal-subtitle" id="lastUpdate"></div>
             
-            <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-star-btn" title="Give us a star on GitHub to support the project!">
-                <span class="star-icon">⭐</span>
-                <span>Star on GitHub</span>
-            </a>
+            <div class="header-actions">
+                <div class="theme-switch-container" title="Toggle light/dark theme">
+                    <div class="theme-switch" id="themeSwitch">
+                        <div class="theme-switch-track">
+                            <div class="theme-switch-thumb" id="themeSwitchThumb">
+                                <span class="theme-switch-icon">🌙</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-star-btn" title="Give us a star on GitHub to support the project!">
+                    <span class="star-icon">⭐</span>
+                    <span>Star on GitHub</span>
+                </a>
+            </div>
         </div>
         
         <div id="loading" class="loading">
@@ -1962,11 +2094,11 @@
                     datasets: [{
                         label: 'Tokens',
                         data: dateRange.map(day => day.tokens),
-                        borderColor: '#d57455',
-                        backgroundColor: 'rgba(213, 116, 85, 0.1)',
+                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
+                        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim() + '20',
                         borderWidth: 2,
-                        pointBackgroundColor: '#d57455',
-                        pointBorderColor: '#d57455',
+                        pointBackgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
+                        pointBorderColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
                         pointRadius: 4,
                         pointHoverRadius: 6,
                         fill: true,
@@ -2076,14 +2208,14 @@
                 sortedProjects.push(['others', othersTotal]);
             }
             
-            // Terminal-style colors
+            // Terminal-style colors using CSS variables
             const colors = [
-                '#d57455', // Orange
-                '#3fb950', // Green
-                '#a5d6ff', // Blue
-                '#f97316', // Orange variant
-                '#c9d1d9', // Light gray
-                '#7d8590'  // Gray
+                getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-success').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-info').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-warning').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim()
             ];
             
             const ctx = document.getElementById('projectChart').getContext('2d');
@@ -2099,7 +2231,7 @@
                     datasets: [{
                         data: sortedProjects.map(([,tokens]) => tokens),
                         backgroundColor: colors.slice(0, sortedProjects.length),
-                        borderColor: '#161b22',
+                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--bg-secondary').trim(),
                         borderWidth: 2,
                         hoverBorderWidth: 3
                     }]
@@ -2646,6 +2778,9 @@
             document.getElementById('dateFrom').addEventListener('change', refreshCharts);
             document.getElementById('dateTo').addEventListener('change', refreshCharts);
             
+            // Initialize theme toggle
+            initializeTheme();
+            
             // Initialize notification button state
             updateNotificationButtonState();
         });
@@ -2668,7 +2803,11 @@
                 getSessionData: async () => {
                     try {
                         const response = await fetch('/api/session/data');
-                        return await response.json();
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        const data = await response.json();
+                        return data;
                     } catch (error) {
                         console.error('Error fetching session data:', error);
                         return null;
@@ -2707,6 +2846,49 @@
             }
         }
         
+        // Theme toggle functionality
+        function initializeTheme() {
+            const savedTheme = localStorage.getItem('claude-analytics-theme') || 'dark';
+            const body = document.body;
+            const themeSwitch = document.getElementById('themeSwitch');
+            const themeSwitchThumb = document.getElementById('themeSwitchThumb');
+            const themeIcon = themeSwitchThumb.querySelector('.theme-switch-icon');
+            
+            function setTheme(theme) {
+                if (theme === 'light') {
+                    body.setAttribute('data-theme', 'light');
+                    themeSwitchThumb.classList.add('light');
+                    themeIcon.textContent = '☀️';
+                } else {
+                    body.removeAttribute('data-theme');
+                    themeSwitchThumb.classList.remove('light');
+                    themeIcon.textContent = '🌙';
+                }
+                localStorage.setItem('claude-analytics-theme', theme);
+                
+                // Update charts if they exist to use new theme colors
+                if (tokenChart || projectChart) {
+                    setTimeout(() => {
+                        if (allData) {
+                            updateCharts(allData);
+                        }
+                    }, 100); // Small delay to let CSS variables update
+                }
+            }
+            
+            function toggleTheme() {
+                const currentTheme = body.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                setTheme(newTheme);
+            }
+            
+            // Set initial theme
+            setTheme(savedTheme);
+            
+            // Add click event listener
+            themeSwitch.addEventListener('click', toggleTheme);
+        }
+        
         // Add keyboard shortcut for refresh (F5 or Ctrl+R)
         document.addEventListener('keydown', function(e) {
             if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {

package/src/analytics.js

@@ -530,6 +530,14 @@ class ClaudeAnalytics {
         // Calculate detailed token usage
         const detailedTokenUsage = this.calculateDetailedTokenUsage();
         
+        // Memory cleanup: limit conversation history to prevent memory buildup
+        if (this.data.conversations && this.data.conversations.length > 150) {
+          console.log(chalk.yellow(`🧹 Cleaning up conversation history: ${this.data.conversations.length} -> 150`));
+          this.data.conversations = this.data.conversations
+            .sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified))
+            .slice(0, 150);
+        }
+        
         // Add timestamp to verify data freshness
         const dataWithTimestamp = {
           ...this.data,
@@ -798,6 +806,19 @@ class ClaudeAnalytics {
           }
         }
         
+        // Memory cleanup: limit conversation history to prevent memory buildup
+        if (this.data.conversations.length > 100) {
+          console.log(chalk.yellow(`🧹 Cleaning up conversation history: ${this.data.conversations.length} -> 100`));
+          this.data.conversations = this.data.conversations
+            .sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified))
+            .slice(0, 100);
+        }
+        
+        // Force garbage collection hint
+        if (global.gc) {
+          global.gc();
+        }
+        
         const dataWithTimestamp = {
           conversations: this.data.conversations,
           summary: this.data.summary,