claude-code-templates 1.5.8 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "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.js

@@ -138,7 +138,8 @@ class ClaudeAnalytics {
             tokens: this.estimateTokens(content),
             project: projectFromPath || this.extractProjectFromConversation(parsedMessages),
             status: this.determineConversationStatus(parsedMessages, stats.mtime),
-            conversationState: this.determineConversationState(parsedMessages, stats.mtime)
+            conversationState: this.determineConversationState(parsedMessages, stats.mtime),
+            statusSquares: this.generateStatusSquares(parsedMessages)
           };
           
           conversations.push(conversation);
@@ -303,6 +304,78 @@ class ClaudeAnalytics {
     return 'Inactive';
   }
 
+  generateStatusSquares(messages) {
+    if (!messages || messages.length === 0) {
+      return [];
+    }
+
+    // Sort messages by timestamp and take last 10 for status squares
+    const sortedMessages = messages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+    const recentMessages = sortedMessages.slice(-10);
+    
+    return recentMessages.map((message, index) => {
+      const messageNum = sortedMessages.length - recentMessages.length + index + 1;
+      
+      // Determine status based on message content and role
+      if (message.role === 'user') {
+        return {
+          type: 'pending',
+          tooltip: `Message #${messageNum}: User input`
+        };
+      } else if (message.role === 'assistant') {
+        // Check if the message contains tool usage or errors
+        const content = message.content || '';
+        
+        if (typeof content === 'string') {
+          if (content.includes('[Tool:') || content.includes('tool_use')) {
+            return {
+              type: 'tool',
+              tooltip: `Message #${messageNum}: Tool execution`
+            };
+          } else if (content.includes('error') || content.includes('Error') || content.includes('failed')) {
+            return {
+              type: 'error',
+              tooltip: `Message #${messageNum}: Error in response`
+            };
+          } else {
+            return {
+              type: 'success',
+              tooltip: `Message #${messageNum}: Successful response`
+            };
+          }
+        } else if (Array.isArray(content)) {
+          // Check for tool_use blocks in array content
+          const hasToolUse = content.some(block => block.type === 'tool_use');
+          const hasError = content.some(block => 
+            block.type === 'text' && (block.text?.includes('error') || block.text?.includes('Error'))
+          );
+          
+          if (hasError) {
+            return {
+              type: 'error',
+              tooltip: `Message #${messageNum}: Error in response`
+            };
+          } else if (hasToolUse) {
+            return {
+              type: 'tool',
+              tooltip: `Message #${messageNum}: Tool execution`
+            };
+          } else {
+            return {
+              type: 'success',
+              tooltip: `Message #${messageNum}: Successful response`
+            };
+          }
+        }
+      }
+      
+      return {
+        type: 'pending',
+        tooltip: `Message #${messageNum}: Unknown status`
+      };
+    });
+  }
+
   determineProjectStatus(lastActivity) {
     const now = new Date();
     const timeDiff = now - lastActivity;
@@ -731,6 +804,10 @@ async function createWebDashboard() {
         .session-id {
             color: #d57455;
             font-family: monospace;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 4px;
         }
         
         .session-project {
@@ -787,6 +864,66 @@ async function createWebDashboard() {
             50% { opacity: 0.6; }
         }
         
+        .status-squares {
+            display: flex;
+            gap: 2px;
+            align-items: center;
+            margin-left: 4px;
+            flex-wrap: wrap;
+        }
+        
+        .status-square {
+            width: 8px;
+            height: 8px;
+            border-radius: 1px;
+            cursor: help;
+            position: relative;
+        }
+        
+        .status-square.success {
+            background: #d57455;
+        }
+        
+        .status-square.tool {
+            background: #f97316;
+        }
+        
+        .status-square.error {
+            background: #dc2626;
+        }
+        
+        .status-square.pending {
+            background: #6b7280;
+        }
+        
+        .status-square:hover::after {
+            content: attr(data-tooltip);
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #1c1c1c;
+            color: #fff;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            white-space: nowrap;
+            z-index: 1000;
+            margin-bottom: 4px;
+            border: 1px solid #30363d;
+        }
+        
+        .status-square:hover::before {
+            content: '';
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 4px solid transparent;
+            border-top-color: #30363d;
+            z-index: 1000;
+        }
+        
         .loading, .error {
             text-align: center;
             padding: 40px;
@@ -1138,7 +1275,12 @@ async function createWebDashboard() {
             
             tableBody.innerHTML = filteredConversations.map(conv => \`
                 <tr onclick="showSessionDetail('\${conv.id}')" style="cursor: pointer;">
-                    <td class="session-id">\${conv.id.substring(0, 8)}...</td>
+                    <td class="session-id">
+                        \${conv.id.substring(0, 8)}...
+                        <div class="status-squares">
+                            \${generateStatusSquaresHTML(conv.statusSquares || [])}
+                        </div>
+                    </td>
                     <td class="session-project">\${conv.project}</td>
                     <td class="session-messages">\${conv.messageCount}</td>
                     <td class="session-tokens">\${conv.tokens.toLocaleString()}</td>
@@ -1182,6 +1324,16 @@ async function createWebDashboard() {
             return '';
         }
         
+        function generateStatusSquaresHTML(statusSquares) {
+            if (!statusSquares || statusSquares.length === 0) {
+                return '';
+            }
+            
+            return statusSquares.map(square => 
+                \`<div class="status-square \${square.type}" data-tooltip="\${square.tooltip}"></div>\`
+            ).join('');
+        }
+        
         // Filter button handlers
         document.addEventListener('DOMContentLoaded', function() {
             const filterButtons = document.querySelectorAll('.filter-btn');