claude-code-templates 1.28.5 → 1.28.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.28.5",
+  "version": "1.28.7",
   "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": {

package/src/analytics/core/YearInReview2025.js

@@ -348,23 +348,41 @@ class YearInReview2025 {
    * @returns {Array} Heatmap data by week
    */
   generateActivityHeatmap(conversations) {
+    console.log(`\n🔥🔥🔥 GENERATING HEATMAP for ${conversations.length} conversations\n`);
+
     // Create map of day -> activity count, tools, and models
     const dailyActivity = new Map();
 
-    conversations.forEach(conv => {
+    conversations.forEach((conv, idx) => {
       if (conv.lastModified) {
         const date = new Date(conv.lastModified);
         const dayKey = date.toISOString().split('T')[0];
 
+        if (idx < 3) {
+          console.log(`  📝 Conv ${idx}: id=${conv.id}, tokens=${conv.tokens}, tokenUsage.total=${conv.tokenUsage?.total}`);
+        }
+
         const current = dailyActivity.get(dayKey) || {
           count: 0,
           tools: [],
           models: [],
           modelCounts: {},
-          toolCounts: {}
+          toolCounts: {},
+          tokens: 0
         };
         current.count += 1;
 
+        // Add tokens from this conversation
+        if (conv.tokenUsage && conv.tokenUsage.total) {
+          current.tokens += conv.tokenUsage.total;
+          if (idx < 3) console.log(`  💎 Added ${conv.tokenUsage.total} tokens from conv ${conv.id} to ${dayKey}`);
+        } else if (conv.tokens) {
+          current.tokens += conv.tokens;
+          if (idx < 3) console.log(`  💎 Added ${conv.tokens} tokens (fallback) from conv ${conv.id} to ${dayKey}`);
+        } else {
+          if (idx < 3) console.log(`  ⚠️  Conv ${conv.id} has NO token data`);
+        }
+
         // Count tool usage with actual numbers from toolStats
         if (conv.toolUsage && conv.toolUsage.toolStats) {
           Object.entries(conv.toolUsage.toolStats).forEach(([tool, count]) => {
@@ -411,7 +429,8 @@ class YearInReview2025 {
         tools: [],
         models: [],
         toolCounts: {},
-        modelCounts: {}
+        modelCounts: {},
+        tokens: 0
       };
 
       // Determine intensity level (0-4 like GitHub)
@@ -428,6 +447,7 @@ class YearInReview2025 {
         models: dayData.models,
         toolCounts: dayData.toolCounts,
         modelCounts: dayData.modelCounts,
+        tokens: dayData.tokens,
         level,
         day: currentDate.getDay()
       });

package/src/analytics-web/2025.html

@@ -60,10 +60,7 @@
         }
 
         .current-date {
-            font-size: 32px;
-            font-weight: 700;
-            color: var(--text-accent);
-            margin-bottom: 15px;
+            display: none;
         }
 
         .stat-line {
@@ -134,13 +131,7 @@
         }
 
         .timeline {
-            position: absolute;
-            bottom: 30px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 80%;
-            max-width: 1000px;
-            pointer-events: auto;
+            display: none;
         }
 
         .timeline-bar {
@@ -427,6 +418,7 @@
         let toolNodes = new Map(); // Map of tool name -> tool node
         let uniqueTools = new Map(); // Track unique tools with their colors
         let modelNodes = new Map(); // Map of model name -> model node
+        let toolQueue = []; // Queue for gradual tool processing
 
         // Mouse tracking
         let mouseX = 0;
@@ -1718,9 +1710,57 @@
             animate();
         }
 
+        // Frame counter for periodic recalculations
+        let frameCount = 0;
+
         // Animation loop
+        // Collision detection and resolution
+        function resolveCollisions() {
+            const allNodes = [];
+
+            // Collect all nodes
+            toolNodes.forEach(node => allNodes.push(node));
+            componentNodes.forEach(node => allNodes.push(node));
+            modelNodes.forEach(node => allNodes.push(node));
+
+            // Check each pair for collision
+            for (let i = 0; i < allNodes.length; i++) {
+                for (let j = i + 1; j < allNodes.length; j++) {
+                    const nodeA = allNodes[i];
+                    const nodeB = allNodes[j];
+
+                    const dx = nodeB.x - nodeA.x;
+                    const dy = nodeB.y - nodeA.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    const minDistance = nodeA.size + nodeB.size + 10; // 10px padding
+
+                    if (distance < minDistance && distance > 0) {
+                        // Nodes are overlapping, push them apart
+                        const overlap = minDistance - distance;
+                        const angle = Math.atan2(dy, dx);
+
+                        // Move each node half the overlap distance
+                        const moveX = Math.cos(angle) * overlap * 0.5;
+                        const moveY = Math.sin(angle) * overlap * 0.5;
+
+                        nodeA.x -= moveX;
+                        nodeA.y -= moveY;
+                        nodeB.x += moveX;
+                        nodeB.y += moveY;
+
+                        // Also update target positions to prevent snapping back
+                        nodeA.targetX -= moveX * 0.1;
+                        nodeA.targetY -= moveY * 0.1;
+                        nodeB.targetX += moveX * 0.1;
+                        nodeB.targetY += moveY * 0.1;
+                    }
+                }
+            }
+        }
+
         function animate() {
             requestAnimationFrame(animate);
+            frameCount++;
 
             // Clear canvas (before transform)
             ctx.fillStyle = '#0a0a0f';
@@ -1730,6 +1770,28 @@
                 updateAnimationState();
             }
 
+            // Recalculate percentages periodically (every 30 frames ~0.5s)
+            if (frameCount % 30 === 0) {
+                recalculateToolPercentages();
+                recalculateComponentPercentages();
+                recalculateModelPercentages();
+            }
+
+            // Process tool queue gradually (max 3 tools per frame to avoid lag)
+            const toolsToProcessPerFrame = 3;
+            for (let i = 0; i < toolsToProcessPerFrame && toolQueue.length > 0; i++) {
+                const { tool, count, color } = toolQueue.shift();
+                const node = getOrCreateToolNode(tool, color);
+
+                // Add all uses at once
+                for (let j = 0; j < count; j++) {
+                    node.addUse();
+                }
+
+                // Create only ONE visual beam per tool
+                setTimeout(() => addToolBeam(tool), Math.random() * 300);
+            }
+
             // Apply zoom and pan transformations
             ctx.save();
             ctx.translate(panX, panY);
@@ -1786,6 +1848,9 @@
                 node.draw(ctx);
             });
 
+            // Resolve collisions between all nodes
+            resolveCollisions();
+
             // Update and draw all nodes
             Object.values(branches).forEach(branch => {
                 branch.nodes.forEach(node => {
@@ -1844,15 +1909,13 @@
 
             currentDayIndex = rangeStart + Math.floor(progress * rangeDuration);
 
-            document.getElementById('timelineProgress').style.width = `${progress * 100}%`;
-
-            // Use startDate from data
-            const date = new Date(animationData.startDate);
-            const dayOffset = currentDayIndex - rangeStart;
-            date.setDate(date.getDate() + dayOffset);
-
-            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-            document.getElementById('currentDate').textContent = `${monthNames[date.getMonth()]} ${date.getDate()}`;
+            // Timeline and date display removed - no need to update
+            // document.getElementById('timelineProgress').style.width = `${progress * 100}%`;
+            // const date = new Date(animationData.startDate);
+            // const dayOffset = currentDayIndex - rangeStart;
+            // date.setDate(date.getDate() + dayOffset);
+            // const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            // document.getElementById('currentDate').textContent = `${monthNames[date.getMonth()]} ${date.getDate()}`;
 
             // Process events
             let eventsThisFrame = 0;
@@ -1871,20 +1934,32 @@
                         stats.conversations += event.count;
                         stats.tools += actualToolCount;
 
-                        // Add tool beams using actual counts
+                        // Add tool counts to queue for gradual processing
                         if (event.toolCounts) {
                             Object.entries(event.toolCounts).forEach(([tool, count]) => {
-                                console.log(`  🔧 Adding ${count} beams for tool: ${tool}`);
-                                // Create multiple beams based on actual usage count
-                                for (let i = 0; i < count; i++) {
-                                    setTimeout(() => addToolBeam(tool), Math.random() * 1000 + i * 50);
-                                }
+                                const toolColors = {
+                                    'Read': '#60a5fa', 'Write': '#34d399', 'Edit': '#fbbf24',
+                                    'Bash': '#f87171', 'TodoWrite': '#a78bfa', 'Task': '#fb923c',
+                                    'Glob': '#2dd4bf', 'Grep': '#c084fc', 'WebFetch': '#f472b6',
+                                    'WebSearch': '#818cf8', 'KillShell': '#ef4444', 'TaskOutput': '#06b6d4'
+                                };
+                                const color = toolColors[tool] || '#3b82f6';
+
+                                // Add to queue for gradual processing
+                                toolQueue.push({ tool, count, color });
                             });
                         } else {
                             // Fallback to old method if toolCounts not available
                             event.tools.forEach(tool => {
-                                console.log(`  🔧 Adding tool beam: ${tool}`);
-                                setTimeout(() => addToolBeam(tool), Math.random() * 500);
+                                const toolColors = {
+                                    'Read': '#60a5fa', 'Write': '#34d399', 'Edit': '#fbbf24',
+                                    'Bash': '#f87171', 'TodoWrite': '#a78bfa', 'Task': '#fb923c',
+                                    'Glob': '#2dd4bf', 'Grep': '#c084fc'
+                                };
+                                const color = toolColors[tool] || '#3b82f6';
+                                const node = getOrCreateToolNode(tool, color);
+                                node.addUse();
+                                setTimeout(() => addToolBeam(tool), Math.random() * 300);
                             });
                         }
 
@@ -2007,7 +2082,6 @@
                 item.innerHTML = `
                     <div class="legend-dot" style="background: ${model.color};"></div>
                     <span>${model.name}</span>
-                    <span style="margin-left: auto; color: rgba(255,255,255,0.5); font-size: 11px;">${model.count}</span>
                 `;
                 modelsList.appendChild(item);
             });
@@ -2037,7 +2111,6 @@
                 item.innerHTML = `
                     <div class="legend-dot" style="background: ${tool.color};"></div>
                     <span>${tool.name}</span>
-                    <span style="margin-left: auto; color: rgba(255,255,255,0.5); font-size: 11px;">${tool.count}</span>
                 `;
                 toolsList.appendChild(item);
             });
@@ -2074,7 +2147,6 @@
                 item.innerHTML = `
                     <div class="legend-dot" style="background: ${component.color};"></div>
                     <span>${component.name}</span>
-                    <span style="margin-left: auto; color: rgba(255,255,255,0.5); font-size: 11px;">${component.count}</span>
                 `;
                 componentsList.appendChild(item);
             });
@@ -2087,6 +2159,8 @@
             shownMilestones.clear();
             currentDayIndex = 0;
             beams = [];
+            permanentConnections.clear(); // Clear permanent connection beams
+            toolQueue = []; // Clear tool processing queue
             toolNodes.clear(); // Clear tool nodes
             uniqueTools.clear(); // Clear unique tools
             modelNodes.clear(); // Clear model nodes