claude-code-templates 1.5.3 → 1.5.4

package/package.json

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

@@ -364,6 +364,39 @@ class ClaudeAnalytics {
       });
     });
     
+    // Session detail endpoint
+    this.app.get('/api/session/:sessionId', async (req, res) => {
+      const sessionId = req.params.sessionId;
+      
+      try {
+        const session = this.data.conversations.find(conv => conv.id === sessionId);
+        if (!session) {
+          return res.status(404).json({ error: 'Session not found' });
+        }
+        
+        // Read the actual conversation file
+        const content = await fs.readFile(session.filePath, 'utf8');
+        const lines = content.trim().split('\n').filter(line => line.trim());
+        const messages = lines.map(line => {
+          try {
+            return JSON.parse(line);
+          } catch {
+            return null;
+          }
+        }).filter(Boolean);
+        
+        res.json({
+          session: session,
+          messages: messages,
+          timestamp: new Date().toISOString()
+        });
+        
+      } catch (error) {
+        console.error(chalk.red('Error loading session details:'), error.message);
+        res.status(500).json({ error: 'Failed to load session details' });
+      }
+    });
+    
     // Main dashboard route
     this.app.get('/', (req, res) => {
       res.sendFile(path.join(__dirname, 'analytics-web', 'index.html'));
@@ -643,6 +676,140 @@ async function createWebDashboard() {
             font-style: italic;
         }
         
+        .session-detail {
+            display: none;
+            margin-top: 20px;
+        }
+        
+        .session-detail.active {
+            display: block;
+        }
+        
+        .detail-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 0;
+            border-bottom: 1px solid #30363d;
+            margin-bottom: 20px;
+        }
+        
+        .detail-title {
+            color: #58a6ff;
+            font-size: 1.1rem;
+        }
+        
+        .detail-actions {
+            display: flex;
+            gap: 12px;
+        }
+        
+        .btn {
+            background: none;
+            border: 1px solid #30363d;
+            color: #7d8590;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+        }
+        
+        .btn:hover {
+            border-color: #58a6ff;
+            color: #58a6ff;
+        }
+        
+        .btn-primary {
+            background: #58a6ff;
+            border-color: #58a6ff;
+            color: #0d1117;
+        }
+        
+        .btn-primary:hover {
+            background: #79c0ff;
+            border-color: #79c0ff;
+        }
+        
+        .session-info {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .info-item {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        
+        .info-label {
+            color: #7d8590;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+        }
+        
+        .info-value {
+            color: #c9d1d9;
+            font-size: 0.875rem;
+        }
+        
+        .conversation-history {
+            border: 1px solid #30363d;
+            border-radius: 6px;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        
+        .message {
+            padding: 16px;
+            border-bottom: 1px solid #21262d;
+        }
+        
+        .message:last-child {
+            border-bottom: none;
+        }
+        
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        
+        .message-role {
+            color: #58a6ff;
+            font-size: 0.875rem;
+            font-weight: bold;
+        }
+        
+        .message-role.user {
+            color: #3fb950;
+        }
+        
+        .message-role.assistant {
+            color: #58a6ff;
+        }
+        
+        .message-time {
+            color: #7d8590;
+            font-size: 0.75rem;
+        }
+        
+        .message-content {
+            color: #c9d1d9;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        
+        .back-btn {
+            margin-bottom: 20px;
+        }
+        
         @media (max-width: 768px) {
             .stats-bar {
                 gap: 20px;
@@ -733,12 +900,36 @@ async function createWebDashboard() {
             <div id="noSessions" class="no-sessions" style="display: none;">
                 no sessions found for current filter
             </div>
+            
+            <div id="sessionDetail" class="session-detail">
+                <button class="btn back-btn" onclick="showSessionsList()">← back to sessions</button>
+                
+                <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>
+                        <button class="btn btn-primary" onclick="refreshSessionDetail()">refresh</button>
+                    </div>
+                </div>
+                
+                <div class="session-info" id="sessionInfo">
+                    <!-- Session info will be loaded here -->
+                </div>
+                
+                <div>
+                    <h3 style="color: #7d8590; margin-bottom: 16px; font-size: 0.875rem; text-transform: uppercase;">conversation history</h3>
+                    <div class="conversation-history" id="conversationHistory">
+                        <!-- Conversation history will be loaded here -->
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
     <script>
         let allConversations = [];
         let currentFilter = 'active';
+        let currentSession = null;
         
         async function loadData() {
             try {
@@ -791,7 +982,7 @@ async function createWebDashboard() {
             noSessionsDiv.style.display = 'none';
             
             tableBody.innerHTML = filteredConversations.map(conv => \`
-                <tr>
+                <tr onclick="showSessionDetail('\${conv.id}')" style="cursor: pointer;">
                     <td class="session-id">\${conv.id.substring(0, 8)}...</td>
                     <td class="session-project">\${conv.project}</td>
                     <td class="session-messages">\${conv.messageCount}</td>
@@ -836,6 +1027,160 @@ async function createWebDashboard() {
             });
         });
         
+        // Session detail functions
+        async function showSessionDetail(sessionId) {
+            currentSession = allConversations.find(conv => conv.id === sessionId);
+            if (!currentSession) return;
+            
+            // Hide sessions list and show detail
+            document.querySelector('.filter-bar').style.display = 'none';
+            document.querySelector('.sessions-table').style.display = 'none';
+            document.getElementById('noSessions').style.display = 'none';
+            document.getElementById('sessionDetail').classList.add('active');
+            
+            // Update title
+            document.getElementById('detailTitle').textContent = \`session: \${sessionId.substring(0, 8)}...\`;
+            
+            // Load session info
+            updateSessionInfo(currentSession);
+            
+            // Load conversation history
+            await loadConversationHistory(currentSession);
+        }
+        
+        function showSessionsList() {
+            document.getElementById('sessionDetail').classList.remove('active');
+            document.querySelector('.filter-bar').style.display = 'flex';
+            document.querySelector('.sessions-table').style.display = 'table';
+            updateSessionsTable();
+            currentSession = null;
+        }
+        
+        function updateSessionInfo(session) {
+            const container = document.getElementById('sessionInfo');
+            
+            container.innerHTML = \`
+                <div class="info-item">
+                    <div class="info-label">session id</div>
+                    <div class="info-value">\${session.id}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">project</div>
+                    <div class="info-value">\${session.project}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">messages</div>
+                    <div class="info-value">\${session.messageCount}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">tokens (estimated)</div>
+                    <div class="info-value">\${session.tokens.toLocaleString()}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">file size</div>
+                    <div class="info-value">\${formatBytes(session.fileSize)}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">created</div>
+                    <div class="info-value">\${new Date(session.created).toLocaleString()}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">last modified</div>
+                    <div class="info-value">\${new Date(session.lastModified).toLocaleString()}</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">status</div>
+                    <div class="info-value status-\${session.status}">\${session.status}</div>
+                </div>
+            \`;
+        }
+        
+        async function loadConversationHistory(session) {
+            try {
+                const response = await fetch(\`/api/session/\${session.id}\`);
+                const sessionData = await response.json();
+                
+                const container = document.getElementById('conversationHistory');
+                
+                if (!sessionData.messages || sessionData.messages.length === 0) {
+                    container.innerHTML = '<div style="padding: 20px; text-align: center; color: #7d8590;">no messages found</div>';
+                    return;
+                }
+                
+                container.innerHTML = sessionData.messages.map((message, index) => \`
+                    <div class="message">
+                        <div class="message-header">
+                            <div class="message-role \${message.role}">\${message.role}</div>
+                            <div class="message-time">message #\${index + 1}</div>
+                        </div>
+                        <div class="message-content">\${truncateContent(message.content || 'no content')}</div>
+                    </div>
+                \`).join('');
+                
+            } catch (error) {
+                document.getElementById('conversationHistory').innerHTML = 
+                    '<div style="padding: 20px; text-align: center; color: #f85149;">error loading conversation history</div>';
+                console.error('Failed to load conversation history:', error);
+            }
+        }
+        
+        function truncateContent(content, maxLength = 500) {
+            if (typeof content !== 'string') return 'no content';
+            if (content.length <= maxLength) return content;
+            return content.substring(0, maxLength) + '...';
+        }
+        
+        function formatBytes(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        
+        function exportSessionCSV() {
+            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';
+            
+            // Add conversation history if loaded
+            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\`;
+                        });
+                    }
+                    
+                    // 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.');
+                });
+        }
+        
+        function refreshSessionDetail() {
+            if (currentSession) {
+                loadConversationHistory(currentSession);
+            }
+        }
+        
         // Manual refresh function
         async function forceRefresh() {
             try {