claude-code-templates 1.28.4 → 1.28.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.28.4",
+  "version": "1.28.6",
   "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()
       });
@@ -904,19 +924,54 @@ class YearInReview2025 {
       }
 
       const subagents = Array.from(agentData.values());
-      const subagentEvents = subagents
-        .filter(agent => agent.timestamp && agent.timestamp.getFullYear() === 2025)
-        .map(agent => ({
-          name: `${agent.type}-${agent.id.substring(0, 4)}`, // e.g., "Plan-a68a" or "Explore-a1e4"
-          timestamp: agent.timestamp,
-          type: agent.type
-        }))
-        .sort((a, b) => a.timestamp - b.timestamp);
+
+      // Group subagents by type for cleaner visualization
+      const groupedByType = {};
+      subagents.forEach(agent => {
+        const type = agent.type || 'Unknown';
+        if (!groupedByType[type]) {
+          groupedByType[type] = { count: 0, timestamps: [] };
+        }
+        groupedByType[type].count++;
+        if (agent.timestamp && agent.timestamp.getFullYear() === 2025) {
+          groupedByType[type].timestamps.push(agent.timestamp);
+        }
+      });
+
+      // Create events grouped by type (one event per type per day)
+      const subagentEvents = [];
+      Object.entries(groupedByType).forEach(([type, data]) => {
+        // Group timestamps by day to avoid too many events
+        const dayMap = new Map();
+        data.timestamps.forEach(ts => {
+          const dayKey = ts.toISOString().split('T')[0];
+          if (!dayMap.has(dayKey)) {
+            dayMap.set(dayKey, { count: 0, timestamp: ts });
+          }
+          dayMap.get(dayKey).count++;
+        });
+
+        // Create one event per day per type
+        dayMap.forEach((dayData, dayKey) => {
+          subagentEvents.push({
+            name: type, // Just "Plan" or "Explore", not "Plan-a68a"
+            timestamp: dayData.timestamp,
+            type: type,
+            count: dayData.count // How many times used that day
+          });
+        });
+      });
+
+      subagentEvents.sort((a, b) => a.timestamp - b.timestamp);
 
       return {
-        subagents: subagents.map(a => ({ id: a.id, type: a.type })),
+        subagents: Object.entries(groupedByType).map(([type, data]) => ({
+          type,
+          count: data.count
+        })),
         total: subagents.length,
-        events: subagentEvents
+        events: subagentEvents,
+        grouped: groupedByType // Include grouped data for display
       };
     } catch (error) {
       console.warn('Could not analyze subagents:', error.message);

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 {
@@ -1637,19 +1628,20 @@
             }
 
             if (data.subagents && data.subagents.events) {
-                console.log(`🤖 Adding ${data.subagents.events.length} subagent events to timeline`);
+                console.log(`🤖 Adding ${data.subagents.events.length} subagent events to timeline (grouped by type)`);
                 data.subagents.events.forEach((event, index) => {
                     const eventDate = new Date(event.timestamp);
                     const eventDayOfYear = getDayOfYear(eventDate);
                     timeline.push({
                         type: 'component-layer2',
                         componentType: 'subagent',
-                        name: event.name,
+                        name: event.name, // Now just "Plan" or "Explore", not "Plan-a68a"
                         date: eventDate,
-                        dayOfYear: eventDayOfYear
+                        dayOfYear: eventDayOfYear,
+                        count: event.count || 1 // How many times used that day
                     });
                     if (index === 0) {
-                        console.log(`  - First subagent "${event.name}": date=${eventDate.toLocaleDateString()}, dayOfYear=${eventDayOfYear.toFixed(3)}`);
+                        console.log(`  - First subagent "${event.name}": date=${eventDate.toLocaleDateString()}, dayOfYear=${eventDayOfYear.toFixed(3)}, count=${event.count || 1}`);
                     }
                 });
             }
@@ -1717,9 +1709,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';
@@ -1729,6 +1769,13 @@
                 updateAnimationState();
             }
 
+            // Recalculate percentages periodically (every 30 frames ~0.5s)
+            if (frameCount % 30 === 0) {
+                recalculateToolPercentages();
+                recalculateComponentPercentages();
+                recalculateModelPercentages();
+            }
+
             // Apply zoom and pan transformations
             ctx.save();
             ctx.translate(panX, panY);
@@ -1785,6 +1832,9 @@
                 node.draw(ctx);
             });
 
+            // Resolve collisions between all nodes
+            resolveCollisions();
+
             // Update and draw all nodes
             Object.values(branches).forEach(branch => {
                 branch.nodes.forEach(node => {
@@ -1843,15 +1893,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;
@@ -1870,20 +1918,41 @@
                         stats.conversations += event.count;
                         stats.tools += actualToolCount;
 
-                        // Add tool beams using actual counts
+                        // Add tool counts directly (optimized - no individual beams)
                         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
+                                // Get or create tool node and update count directly
+                                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';
+                                const node = getOrCreateToolNode(tool, color);
+
+                                // Add all uses at once (much faster than creating beams)
                                 for (let i = 0; i < count; i++) {
-                                    setTimeout(() => addToolBeam(tool), Math.random() * 1000 + i * 50);
+                                    node.addUse();
                                 }
+
+                                // Create only ONE visual beam per tool (not per use)
+                                setTimeout(() => addToolBeam(tool), Math.random() * 300);
+
+                                console.log(`  🔧 Tool ${tool}: +${count} uses (total: ${node.count})`);
                             });
                         } 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);
                             });
                         }
 
@@ -1922,13 +1991,18 @@
                         // showEvent(`Installed: ${event.name}`); // Disabled - notifications removed
                     } else if (event.type === 'component-layer2') {
                         const node = getOrCreateComponentNode(event.name, event.componentType);
-                        node.addUse();
+
+                        // Add uses based on event count (for grouped subagents)
+                        const useCount = event.count || 1;
+                        for (let j = 0; j < useCount; j++) {
+                            node.addUse();
+                        }
 
                         // Create beam to this component node
                         const beam = new Beam(node, event.name);
                         beams.push(beam);
 
-                        console.log(`🔷 ${event.componentType}: ${event.name} at ${event.date?.toLocaleDateString()} (count: ${node.count}, size: ${node.targetSize.toFixed(1)})`);
+                        console.log(`🔷 ${event.componentType}: ${event.name} at ${event.date?.toLocaleDateString()} (added: ${useCount}, total: ${node.count}, size: ${node.targetSize.toFixed(1)})`);
                     }
                 }
             });
@@ -2001,7 +2075,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);
             });
@@ -2031,7 +2104,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);
             });
@@ -2068,7 +2140,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);
             });
@@ -2081,6 +2152,7 @@
             shownMilestones.clear();
             currentDayIndex = 0;
             beams = [];
+            permanentConnections.clear(); // Clear permanent connection beams
             toolNodes.clear(); // Clear tool nodes
             uniqueTools.clear(); // Clear unique tools
             modelNodes.clear(); // Clear model nodes