claude-code-templates 1.5.7 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.5.7",
+  "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;
@@ -830,6 +967,28 @@ async function createWebDashboard() {
         .detail-actions {
             display: flex;
             gap: 12px;
+            align-items: center;
+        }
+        
+        .export-format-select {
+            background: #21262d;
+            border: 1px solid #30363d;
+            color: #c9d1d9;
+            padding: 6px 12px;
+            border-radius: 4px;
+            font-family: inherit;
+            font-size: 0.875rem;
+            cursor: pointer;
+        }
+        
+        .export-format-select:focus {
+            outline: none;
+            border-color: #d57455;
+        }
+        
+        .export-format-select option {
+            background: #21262d;
+            color: #c9d1d9;
         }
         
         .btn {
@@ -1036,7 +1195,11 @@ async function createWebDashboard() {
                 <div class="detail-header">
                     <div class="detail-title" id="detailTitle">session details</div>
                     <div class="detail-actions">
-                        <button class="btn" onclick="exportSessionCSV()">export csv</button>
+                        <select id="exportFormat" class="export-format-select">
+                            <option value="csv">CSV</option>
+                            <option value="json">JSON</option>
+                        </select>
+                        <button class="btn" onclick="exportSession()">export</button>
                         <button class="btn btn-primary" onclick="refreshSessionDetail()">refresh</button>
                     </div>
                 </div>
@@ -1112,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>
@@ -1156,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');
@@ -1295,43 +1473,89 @@ async function createWebDashboard() {
             return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
         }
         
-        function exportSessionCSV() {
+        function exportSession() {
             if (!currentSession) return;
             
-            // Create CSV content
-            let csvContent = 'Session ID,Project,Message Count,Tokens,File Size,Created,Last Modified,Status\\n';
-            csvContent += \`"\${currentSession.id}","\${currentSession.project}",\${currentSession.messageCount},\${currentSession.tokens},\${currentSession.fileSize},"\${new Date(currentSession.created).toISOString()}","\${new Date(currentSession.lastModified).toISOString()}","\${currentSession.status}"\\n\\n\`;
-            
-            csvContent += 'Message #,Role,Content\\n';
+            const format = document.getElementById('exportFormat').value;
             
-            // Add conversation history if loaded
+            // Fetch conversation history and export
             fetch(\`/api/session/\${currentSession.id}\`)
                 .then(response => response.json())
                 .then(sessionData => {
-                    if (sessionData.messages) {
-                        sessionData.messages.forEach((message, index) => {
-                            const content = (message.content || 'no content').replace(/"/g, '""');
-                            csvContent += \`\${index + 1},"\${message.role}","\${content}"\\n\`;
-                        });
+                    if (format === 'csv') {
+                        exportSessionAsCSV(sessionData);
+                    } else if (format === 'json') {
+                        exportSessionAsJSON(sessionData);
                     }
-                    
-                    // Download CSV
-                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-                    const link = document.createElement('a');
-                    const url = URL.createObjectURL(blob);
-                    link.setAttribute('href', url);
-                    link.setAttribute('download', \`claude-session-\${currentSession.id.substring(0, 8)}.csv\`);
-                    link.style.visibility = 'hidden';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
                 })
                 .catch(error => {
-                    console.error('Failed to export CSV:', error);
-                    alert('Failed to export CSV. Please try again.');
+                    console.error(\`Failed to export \${format.toUpperCase()}:\`, error);
+                    alert(\`Failed to export \${format.toUpperCase()}. Please try again.\`);
                 });
         }
         
+        function exportSessionAsCSV(sessionData) {
+            // Create CSV content
+            let csvContent = 'Session ID,Project,Message Count,Tokens,File Size,Created,Last Modified,Conversation State,Status\\n';
+            csvContent += \`"\${currentSession.id}","\${currentSession.project}",\${currentSession.messageCount},\${currentSession.tokens},\${currentSession.fileSize},"\${new Date(currentSession.created).toISOString()}","\${new Date(currentSession.lastModified).toISOString()}","\${currentSession.conversationState}","\${currentSession.status}"\\n\\n\`;
+            
+            csvContent += 'Message #,Role,Timestamp,Content\\n';
+            
+            // Add conversation history
+            if (sessionData.messages) {
+                sessionData.messages.forEach((message, index) => {
+                    const content = (message.content || 'no content').replace(/"/g, '""');
+                    const timestamp = message.timestamp ? new Date(message.timestamp).toISOString() : 'unknown';
+                    csvContent += \`\${index + 1},"\${message.role}","\${timestamp}","\${content}"\\n\`;
+                });
+            }
+            
+            // Download CSV
+            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+            downloadFile(blob, \`claude-session-\${currentSession.id.substring(0, 8)}.csv\`);
+        }
+        
+        function exportSessionAsJSON(sessionData) {
+            // Create comprehensive JSON export
+            const exportData = {
+                session: {
+                    id: currentSession.id,
+                    filename: currentSession.filename,
+                    project: currentSession.project,
+                    messageCount: currentSession.messageCount,
+                    tokens: currentSession.tokens,
+                    fileSize: currentSession.fileSize,
+                    created: currentSession.created,
+                    lastModified: currentSession.lastModified,
+                    conversationState: currentSession.conversationState,
+                    status: currentSession.status
+                },
+                messages: sessionData.messages || [],
+                metadata: {
+                    exportedAt: new Date().toISOString(),
+                    exportFormat: 'json',
+                    toolVersion: '1.5.7'
+                }
+            };
+            
+            // Download JSON
+            const jsonString = JSON.stringify(exportData, null, 2);
+            const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' });
+            downloadFile(blob, \`claude-session-\${currentSession.id.substring(0, 8)}.json\`);
+        }
+        
+        function downloadFile(blob, filename) {
+            const link = document.createElement('a');
+            const url = URL.createObjectURL(blob);
+            link.setAttribute('href', url);
+            link.setAttribute('download', filename);
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        }
+        
         function refreshSessionDetail() {
             if (currentSession) {
                 loadConversationHistory(currentSession);