claude-code-templates 1.8.3 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "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,6 @@
     "dev:link": "npm link",
     "dev:unlink": "npm unlink -g claude-code-templates",
     "pretest:commands": "npm run dev:link",
-    "prepublishOnly-disabled": "npm run test:coverage",
     "analytics:start": "node src/analytics.js",
     "analytics:test": "npm run test:analytics"
   },

package/src/analytics/core/ConversationAnalyzer.js

@@ -110,6 +110,9 @@ class ConversationAnalyzer {
           const tokenUsage = await this.getCachedTokenUsage(filePath, parsedMessages);
           const modelInfo = await this.getCachedModelInfo(filePath, parsedMessages);
 
+          // Calculate tool usage data with caching
+          const toolUsage = await this.getCachedToolUsage(filePath, parsedMessages);
+
           const conversation = {
             id: filename.replace('.jsonl', ''),
             filename: filename,
@@ -121,6 +124,7 @@ class ConversationAnalyzer {
             tokens: tokenUsage.total > 0 ? tokenUsage.total : this.estimateTokens(await this.getFileContent(filePath)),
             tokenUsage: tokenUsage,
             modelInfo: modelInfo,
+            toolUsage: toolUsage,
             project: projectFromPath || this.extractProjectFromConversation(parsedMessages),
             status: stateCalculator.determineConversationStatus(parsedMessages, stats.mtime),
             conversationState: stateCalculator.determineConversationState(parsedMessages, stats.mtime),
@@ -279,6 +283,21 @@ class ConversationAnalyzer {
     return this.generateStatusSquares(parsedMessages);
   }
 
+  /**
+   * Get cached tool usage analysis
+   * @param {string} filepath - File path
+   * @param {Array} parsedMessages - Parsed messages array
+   * @returns {Promise<Object>} Tool usage data
+   */
+  async getCachedToolUsage(filepath, parsedMessages) {
+    if (this.dataCache) {
+      return await this.dataCache.getCachedToolUsage(filepath, () => {
+        return this.extractToolUsage(parsedMessages);
+      });
+    }
+    return this.extractToolUsage(parsedMessages);
+  }
+
   /**
    * Calculate real token usage from message usage data
    * @param {Array} parsedMessages - Array of parsed message objects
@@ -387,6 +406,65 @@ class ConversationAnalyzer {
     return 'Unknown';
   }
 
+  /**
+   * Extract tool usage statistics from parsed messages
+   * @param {Array} parsedMessages - Array of parsed message objects
+   * @returns {Object} Tool usage statistics
+   */
+  extractToolUsage(parsedMessages) {
+    const toolStats = {};
+    const toolTimeline = [];
+    let totalToolCalls = 0;
+
+    parsedMessages.forEach(message => {
+      if (message.role === 'assistant' && message.content) {
+        const content = message.content;
+        const timestamp = message.timestamp;
+
+        // Handle string content with tool indicators
+        if (typeof content === 'string') {
+          const toolMatches = content.match(/\[Tool:\s*([^\]]+)\]/g);
+          if (toolMatches) {
+            toolMatches.forEach(match => {
+              const toolName = match.replace(/\[Tool:\s*([^\]]+)\]/, '$1').trim();
+              toolStats[toolName] = (toolStats[toolName] || 0) + 1;
+              totalToolCalls++;
+              toolTimeline.push({
+                tool: toolName,
+                timestamp: timestamp,
+                type: 'usage'
+              });
+            });
+          }
+        }
+
+        // Handle array content with tool_use blocks
+        if (Array.isArray(content)) {
+          content.forEach(block => {
+            if (block.type === 'tool_use') {
+              const toolName = block.name || 'Unknown Tool';
+              toolStats[toolName] = (toolStats[toolName] || 0) + 1;
+              totalToolCalls++;
+              toolTimeline.push({
+                tool: toolName,
+                timestamp: timestamp,
+                type: 'usage',
+                parameters: block.input || {}
+              });
+            }
+          });
+        }
+      }
+    });
+
+    return {
+      toolStats,
+      toolTimeline: toolTimeline.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)),
+      totalToolCalls,
+      uniqueTools: Object.keys(toolStats).length
+    };
+  }
+
   /**
    * Generate status indicators for conversation messages
    * @param {Array} messages - Array of message objects

package/src/analytics/data/DataCache.js

@@ -19,6 +19,7 @@ class DataCache {
       tokenUsage: new Map(), // filepath -> { usage, timestamp }
       modelInfo: new Map(), // filepath -> { info, timestamp }
       statusSquares: new Map(), // filepath -> { squares, timestamp }
+      toolUsage: new Map(), // filepath -> { usage, timestamp }
       
       // Expensive computations cache
       sessions: { data: null, timestamp: 0, dependencies: new Set() },
@@ -319,6 +320,32 @@ class DataCache {
     return squares;
   }
 
+  /**
+   * Cache tool usage analysis
+   * @param {string} filepath - File path
+   * @param {Function} extractFn - Tool usage extraction function
+   * @returns {Promise<Object>} Tool usage data
+   */
+  async getCachedToolUsage(filepath, extractFn) {
+    const cached = this.caches.toolUsage.get(filepath);
+    const fileStats = await this.getFileStats(filepath);
+    
+    if (cached && cached.timestamp >= fileStats.mtime.getTime()) {
+      this.metrics.hits++;
+      return cached.usage;
+    }
+    
+    this.metrics.misses++;
+    const usage = await extractFn();
+    
+    this.caches.toolUsage.set(filepath, {
+      usage,
+      timestamp: fileStats.mtime.getTime()
+    });
+    
+    return usage;
+  }
+
   /**
    * Smart invalidation based on file changes
    * @param {string} filepath - Path of changed file
@@ -332,6 +359,7 @@ class DataCache {
     this.caches.tokenUsage.delete(filepath);
     this.caches.modelInfo.delete(filepath);
     this.caches.statusSquares.delete(filepath);
+    this.caches.toolUsage.delete(filepath);
     this.caches.fileStats.delete(filepath);
     
     // Invalidate computations that depend on this file
@@ -450,6 +478,7 @@ class DataCache {
       ['tokenUsage', this.caches.tokenUsage],
       ['modelInfo', this.caches.modelInfo],
       ['statusSquares', this.caches.statusSquares],
+      ['toolUsage', this.caches.toolUsage],
       ['fileStats', this.caches.fileStats],
       ['projectStats', this.caches.projectStats]
     ];
@@ -507,6 +536,7 @@ class DataCache {
         tokenUsage: this.caches.tokenUsage.size,
         modelInfo: this.caches.modelInfo.size,
         statusSquares: this.caches.statusSquares.size,
+        toolUsage: this.caches.toolUsage.size,
         fileStats: this.caches.fileStats.size,
         projectStats: this.caches.projectStats.size,
       },

package/src/analytics-web/index.html

@@ -823,7 +823,7 @@
         
         .charts-container {
             display: grid;
-            grid-template-columns: 2fr 1fr;
+            grid-template-columns: 1fr 1fr;
             gap: 30px;
             margin: 20px 0 30px 0;
         }
@@ -851,6 +851,85 @@
             height: 200px !important;
         }
         
+        .tool-summary {
+            padding: 20px;
+            height: 200px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow-y: auto;
+        }
+        
+        .tool-stat {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-secondary);
+            border-radius: 4px;
+            transition: all 0.2s ease;
+            font-size: 0.8rem;
+        }
+        
+        .tool-stat:hover {
+            background: var(--bg-secondary);
+            border-color: var(--border-primary);
+        }
+        
+        .tool-stat-label {
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        
+        .tool-stat-value {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+        
+        .tool-stat-accent {
+            color: var(--text-accent);
+        }
+        
+        .tool-top-tool {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-secondary);
+            border-radius: 4px;
+            margin-top: auto;
+        }
+        
+        .tool-icon {
+            width: 24px;
+            height: 24px;
+            background: var(--text-accent);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            color: white;
+        }
+        
+        .tool-info {
+            flex: 1;
+        }
+        
+        .tool-name {
+            color: var(--text-primary);
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-bottom: 2px;
+        }
+        
+        .tool-usage {
+            color: var(--text-secondary);
+            font-size: 0.7rem;
+        }
+        
         .filter-bar {
             display: flex;
             align-items: center;
@@ -1585,6 +1664,22 @@
                     </div>
                     <canvas id="projectChart" class="chart-canvas"></canvas>
                 </div>
+                
+                <div class="chart-card">
+                    <div class="chart-title">
+                        🛠️ tool usage trends
+                    </div>
+                    <canvas id="toolChart" class="chart-canvas"></canvas>
+                </div>
+                
+                <div class="chart-card">
+                    <div class="chart-title">
+                        ⚡ tool activity summary
+                    </div>
+                    <div id="toolSummary" class="tool-summary">
+                        <!-- Tool summary will be loaded here -->
+                    </div>
+                </div>
             </div>
             
             <div class="filter-bar">
@@ -1662,6 +1757,7 @@
         let currentSession = null;
         let tokenChart = null;
         let projectChart = null;
+        let toolChart = null;
         let allData = null;
         let notificationsEnabled = false;
         let previousConversationStates = new Map();
@@ -2031,6 +2127,12 @@
             
             // Update Project Activity Distribution Chart  
             updateProjectChart(data.conversations);
+            
+            // Update Tool Usage Trends Chart
+            updateToolChart(data.conversations);
+            
+            // Update Tool Activity Summary
+            updateToolSummary(data.conversations);
         }
         
         async function refreshCharts() {
@@ -2279,6 +2381,329 @@
             });
         }
         
+        function updateToolChart(conversations) {
+            // Check if Chart.js is available
+            if (typeof Chart === 'undefined') {
+                console.warn('Chart.js not available for updateToolChart');
+                return;
+            }
+            
+            // Apply date filtering to conversations first
+            const { fromDate, toDate } = getDateRange();
+            const filteredConversations = conversations.filter(conv => {
+                const convDate = new Date(conv.lastModified);
+                return convDate >= fromDate && convDate <= toDate;
+            });
+            
+            // Aggregate tool usage across filtered conversations
+            const toolTimeline = [];
+            const toolStats = {};
+            
+            filteredConversations.forEach(conv => {
+                if (conv.toolUsage && conv.toolUsage.toolTimeline) {
+                    conv.toolUsage.toolTimeline.forEach(entry => {
+                        const entryDate = new Date(entry.timestamp);
+                        // Only include tool usage within date range
+                        if (entryDate >= fromDate && entryDate <= toDate) {
+                            toolTimeline.push({
+                                tool: entry.tool,
+                                timestamp: entryDate,
+                                date: entryDate.toDateString()
+                            });
+                            
+                            toolStats[entry.tool] = (toolStats[entry.tool] || 0) + 1;
+                        }
+                    });
+                }
+            });
+            
+            const ctx = document.getElementById('toolChart').getContext('2d');
+            
+            if (toolChart) {
+                toolChart.destroy();
+            }
+            
+            if (Object.keys(toolStats).length === 0) {
+                // No tool usage data available
+                toolChart = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: ['No Data'],
+                        datasets: [{
+                            label: 'Tool Usage',
+                            data: [0],
+                            backgroundColor: 'rgba(109, 40, 217, 0.6)',
+                            borderColor: 'rgba(109, 40, 217, 1)',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        interaction: {
+                            intersect: false,
+                            mode: 'nearest'
+                        },
+                        plugins: {
+                            legend: {
+                                display: false
+                            },
+                            tooltip: {
+                                enabled: true,
+                                position: 'nearest',
+                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                                titleColor: '#fff',
+                                bodyColor: '#fff',
+                                borderColor: 'rgba(255, 255, 255, 0.1)',
+                                borderWidth: 1
+                            }
+                        },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim()
+                                },
+                                grid: {
+                                    color: getComputedStyle(document.documentElement).getPropertyValue('--border-primary').trim()
+                                }
+                            },
+                            x: {
+                                ticks: {
+                                    color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim()
+                                },
+                                grid: {
+                                    color: getComputedStyle(document.documentElement).getPropertyValue('--border-primary').trim()
+                                }
+                            }
+                        }
+                    }
+                });
+                return;
+            }
+            
+            // Get top 10 most used tools
+            const sortedTools = Object.entries(toolStats)
+                .sort((a, b) => b[1] - a[1])
+                .slice(0, 10);
+            
+            // Generate colors for different tools
+            const colors = [
+                'rgba(75, 192, 192, 0.6)',
+                'rgba(255, 99, 132, 0.6)',
+                'rgba(54, 162, 235, 0.6)',
+                'rgba(255, 206, 86, 0.6)',
+                'rgba(153, 102, 255, 0.6)',
+                'rgba(255, 159, 64, 0.6)',
+                'rgba(199, 199, 199, 0.6)',
+                'rgba(83, 102, 255, 0.6)',
+                'rgba(255, 99, 255, 0.6)',
+                'rgba(99, 255, 132, 0.6)'
+            ];
+            
+            const borderColors = [
+                'rgba(75, 192, 192, 1)',
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)',
+                'rgba(199, 199, 199, 1)',
+                'rgba(83, 102, 255, 1)',
+                'rgba(255, 99, 255, 1)',
+                'rgba(99, 255, 132, 1)'
+            ];
+            
+            // Store sorted tools data for reliable tooltip access
+            window.currentToolData = sortedTools;
+            
+            toolChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: sortedTools.map(([tool]) => {
+                        // Truncate long tool names for display
+                        return tool.length > 15 ? tool.substring(0, 15) + '...' : tool;
+                    }),
+                    datasets: [{
+                        label: 'Usage Count',
+                        data: sortedTools.map(([, count]) => count),
+                        backgroundColor: colors.slice(0, sortedTools.length),
+                        borderColor: borderColors.slice(0, sortedTools.length),
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: {
+                        intersect: false,
+                        mode: 'nearest'
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            enabled: true,
+                            position: 'nearest',
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            titleColor: '#fff',
+                            bodyColor: '#fff',
+                            borderColor: 'rgba(255, 255, 255, 0.1)',
+                            borderWidth: 1,
+                            callbacks: {
+                                title: function(tooltipItems) {
+                                    const index = tooltipItems[0].dataIndex;
+                                    // Use the stored tool data for reliable access
+                                    return window.currentToolData && window.currentToolData[index] 
+                                        ? window.currentToolData[index][0] 
+                                        : 'Tool';
+                                },
+                                label: function(context) {
+                                    const value = context.parsed.y;
+                                    const total = window.currentToolData ? 
+                                        window.currentToolData.reduce((sum, [, count]) => sum + count, 0) : 
+                                        context.dataset.data.reduce((sum, val) => sum + val, 0);
+                                    const percentage = ((value / total) * 100).toFixed(1);
+                                    return `Used ${value} times (${percentage}%)`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim(),
+                                stepSize: 1
+                            },
+                            grid: {
+                                color: getComputedStyle(document.documentElement).getPropertyValue('--border-primary').trim()
+                            }
+                        },
+                        x: {
+                            ticks: {
+                                color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim(),
+                                maxRotation: 45,
+                                minRotation: 0
+                            },
+                            grid: {
+                                color: getComputedStyle(document.documentElement).getPropertyValue('--border-primary').trim()
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        function updateToolSummary(conversations) {
+            // Apply date filtering to conversations first
+            const { fromDate, toDate } = getDateRange();
+            const filteredConversations = conversations.filter(conv => {
+                const convDate = new Date(conv.lastModified);
+                return convDate >= fromDate && convDate <= toDate;
+            });
+            
+            // Aggregate tool usage across filtered conversations
+            const toolStats = {};
+            let totalToolCalls = 0;
+            let conversationsWithTools = 0;
+            let totalUniqueTools = new Set();
+            
+            filteredConversations.forEach(conv => {
+                if (conv.toolUsage && conv.toolUsage.toolTimeline) {
+                    let convHasTools = false;
+                    conv.toolUsage.toolTimeline.forEach(entry => {
+                        const entryDate = new Date(entry.timestamp);
+                        // Only include tool usage within date range
+                        if (entryDate >= fromDate && entryDate <= toDate) {
+                            toolStats[entry.tool] = (toolStats[entry.tool] || 0) + 1;
+                            totalToolCalls++;
+                            totalUniqueTools.add(entry.tool);
+                            convHasTools = true;
+                        }
+                    });
+                    if (convHasTools) {
+                        conversationsWithTools++;
+                    }
+                }
+            });
+            
+            const summaryElement = document.getElementById('toolSummary');
+            
+            if (totalToolCalls === 0) {
+                summaryElement.innerHTML = `
+                    <div class="tool-stat">
+                        <span class="tool-stat-label">No tool usage data available</span>
+                        <span class="tool-stat-value">📊</span>
+                    </div>
+                `;
+                return;
+            }
+            
+            // Find most used tool
+            const sortedTools = Object.entries(toolStats).sort((a, b) => b[1] - a[1]);
+            const topTool = sortedTools[0];
+            const avgToolsPerConv = conversationsWithTools > 0 ? (totalToolCalls / conversationsWithTools).toFixed(1) : 0;
+            
+            // Calculate tool diversity using Shannon Diversity Index (more accurate)
+            const toolCount = sortedTools.length;
+            let shannonIndex = 0;
+            let diversityScore = 0;
+            
+            if (toolCount > 1) {
+                // Calculate Shannon diversity index
+                sortedTools.forEach(([, count]) => {
+                    const proportion = count / totalToolCalls;
+                    if (proportion > 0) {
+                        shannonIndex -= proportion * Math.log2(proportion);
+                    }
+                });
+                
+                // Normalize to 0-100% scale
+                const maxDiversity = Math.log2(toolCount); // Maximum possible diversity
+                diversityScore = (shannonIndex / maxDiversity) * 100;
+            }
+            // If only one tool used, diversityScore remains 0
+            
+            summaryElement.innerHTML = `
+                <div class="tool-stat">
+                    <span class="tool-stat-label">Total Tool Calls</span>
+                    <span class="tool-stat-value tool-stat-accent">${totalToolCalls}</span>
+                </div>
+                
+                <div class="tool-stat">
+                    <span class="tool-stat-label">Unique Tools Used</span>
+                    <span class="tool-stat-value">${totalUniqueTools.size}</span>
+                </div>
+                
+                <div class="tool-stat">
+                    <span class="tool-stat-label">Conversations with Tools</span>
+                    <span class="tool-stat-value">${conversationsWithTools}/${filteredConversations.length}</span>
+                </div>
+                
+                <div class="tool-stat">
+                    <span class="tool-stat-label">Avg Tools per Conversation</span>
+                    <span class="tool-stat-value">${avgToolsPerConv}</span>
+                </div>
+                
+                <div class="tool-stat" title="How evenly distributed tool usage is. 100% = perfectly balanced, 0% = concentrated in few tools">
+                    <span class="tool-stat-label">Tool Balance Score</span>
+                    <span class="tool-stat-value">${diversityScore.toFixed(0)}%</span>
+                </div>
+                
+                ${topTool ? `
+                <div class="tool-top-tool">
+                    <div class="tool-icon">🏆</div>
+                    <div class="tool-info">
+                        <div class="tool-name">Most Used: ${topTool[0]}</div>
+                        <div class="tool-usage">${topTool[1]} calls (${((topTool[1] / totalToolCalls) * 100).toFixed(1)}%)</div>
+                    </div>
+                </div>
+                ` : ''}
+            `;
+        }
+        
         function updateSessionsTable() {
             const tableBody = document.getElementById('sessionsTable');
             const noSessionsDiv = document.getElementById('noSessions');
@@ -2867,7 +3292,7 @@
                 localStorage.setItem('claude-analytics-theme', theme);
                 
                 // Update charts if they exist to use new theme colors
-                if (tokenChart || projectChart) {
+                if (tokenChart || projectChart || toolChart) {
                     setTimeout(() => {
                         if (allData) {
                             updateCharts(allData);