claude-code-templates 1.5.1 → 1.5.3

package/package.json

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

@@ -70,12 +70,33 @@ class ClaudeAnalytics {
     const conversations = [];
     
     try {
-      const files = await fs.readdir(this.claudeDir);
-      const jsonlFiles = files.filter(file => file.endsWith('.jsonl'));
+      // Search for .jsonl files recursively in all subdirectories
+      const findJsonlFiles = async (dir) => {
+        const files = [];
+        const items = await fs.readdir(dir);
+        
+        for (const item of items) {
+          const itemPath = path.join(dir, item);
+          const stats = await fs.stat(itemPath);
+          
+          if (stats.isDirectory()) {
+            // Recursively search subdirectories
+            const subFiles = await findJsonlFiles(itemPath);
+            files.push(...subFiles);
+          } else if (item.endsWith('.jsonl')) {
+            files.push(itemPath);
+          }
+        }
+        
+        return files;
+      };
       
-      for (const file of jsonlFiles) {
-        const filePath = path.join(this.claudeDir, file);
+      const jsonlFiles = await findJsonlFiles(this.claudeDir);
+      console.log(chalk.blue(`Found ${jsonlFiles.length} conversation files`));
+      
+      for (const filePath of jsonlFiles) {
         const stats = await fs.stat(filePath);
+        const filename = path.basename(filePath);
         
         try {
           const content = await fs.readFile(filePath, 'utf8');
@@ -88,21 +109,25 @@ class ClaudeAnalytics {
             }
           }).filter(Boolean);
           
+          // Extract project name from path
+          const projectFromPath = this.extractProjectFromPath(filePath);
+          
           const conversation = {
-            id: file.replace('.jsonl', ''),
-            filename: file,
+            id: filename.replace('.jsonl', ''),
+            filename: filename,
+            filePath: filePath,
             messageCount: messages.length,
             fileSize: stats.size,
             lastModified: stats.mtime,
             created: stats.birthtime,
             tokens: this.estimateTokens(content),
-            project: this.extractProjectFromConversation(messages),
+            project: projectFromPath || this.extractProjectFromConversation(messages),
             status: this.determineConversationStatus(messages, stats.mtime)
           };
           
           conversations.push(conversation);
         } catch (error) {
-          console.warn(chalk.yellow(`Warning: Could not parse ${file}:`, error.message));
+          console.warn(chalk.yellow(`Warning: Could not parse ${filename}:`, error.message));
         }
       }
       
@@ -160,6 +185,27 @@ class ClaudeAnalytics {
     return Math.ceil(text.length / 4);
   }
 
+  extractProjectFromPath(filePath) {
+    // Extract project name from file path like:
+    // /Users/user/.claude/projects/-Users-user-Projects-MyProject/conversation.jsonl
+    const pathParts = filePath.split('/');
+    const projectIndex = pathParts.findIndex(part => part === 'projects');
+    
+    if (projectIndex !== -1 && projectIndex + 1 < pathParts.length) {
+      const projectDir = pathParts[projectIndex + 1];
+      // Clean up the project directory name
+      const cleanName = projectDir
+        .replace(/^-/, '')
+        .replace(/-/g, '/')
+        .split('/')
+        .pop() || 'Unknown';
+      
+      return cleanName;
+    }
+    
+    return null;
+  }
+
   extractProjectFromConversation(messages) {
     // Try to extract project information from conversation
     for (const message of messages.slice(0, 5)) {
@@ -233,8 +279,10 @@ class ClaudeAnalytics {
   setupFileWatchers() {
     console.log(chalk.blue('👀 Setting up file watchers for real-time updates...'));
     
-    // Watch conversation files
-    const conversationWatcher = chokidar.watch(path.join(this.claudeDir, '*.jsonl'), {
+    // Watch conversation files recursively in all subdirectories
+    const conversationWatcher = chokidar.watch([
+      path.join(this.claudeDir, '**/*.jsonl')
+    ], {
       persistent: true,
       ignoreInitial: true
     });
@@ -257,7 +305,7 @@ class ClaudeAnalytics {
     const projectWatcher = chokidar.watch(this.claudeDir, {
       persistent: true,
       ignoreInitial: true,
-      depth: 1
+      depth: 2  // Increased depth to catch subdirectories
     });
     
     projectWatcher.on('addDir', async () => {
@@ -397,7 +445,7 @@ async function createWebDashboard() {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Claude Code Analytics Dashboard</title>
+    <title>Claude Code Analytics - Terminal</title>
     <style>
         * {
             margin: 0;
@@ -406,234 +454,292 @@ async function createWebDashboard() {
         }
         
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: #333;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            background: #0d1117;
+            color: #c9d1d9;
             min-height: 100vh;
+            line-height: 1.4;
         }
         
-        .container {
-            max-width: 1200px;
+        .terminal {
+            max-width: 1400px;
             margin: 0 auto;
             padding: 20px;
         }
         
-        .header {
-            text-align: center;
-            color: white;
-            margin-bottom: 30px;
+        .terminal-header {
+            border-bottom: 1px solid #30363d;
+            padding-bottom: 20px;
+            margin-bottom: 20px;
         }
         
-        .header h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
+        .terminal-title {
+            color: #58a6ff;
+            font-size: 1.25rem;
+            font-weight: normal;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         
-        .status-indicator {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
+        .status-dot {
+            width: 8px;
+            height: 8px;
             border-radius: 50%;
-            background: #4ade80;
+            background: #3fb950;
             animation: pulse 2s infinite;
-            margin-right: 8px;
         }
         
         @keyframes pulse {
             0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
+            50% { opacity: 0.6; }
         }
         
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
+        .terminal-subtitle {
+            color: #7d8590;
+            font-size: 0.875rem;
+            margin-top: 4px;
         }
         
-        .stat-card {
-            background: white;
-            border-radius: 12px;
-            padding: 24px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.2s ease;
+        .stats-bar {
+            display: flex;
+            gap: 40px;
+            margin: 20px 0;
+            flex-wrap: wrap;
         }
         
-        .stat-card:hover {
-            transform: translateY(-2px);
+        .stat {
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         
-        .stat-card h3 {
-            color: #6b7280;
+        .stat-label {
+            color: #7d8590;
             font-size: 0.875rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 8px;
         }
         
-        .stat-card .value {
-            font-size: 2rem;
+        .stat-value {
+            color: #58a6ff;
             font-weight: bold;
-            color: #1f2937;
-            margin-bottom: 4px;
         }
         
-        .stat-card .label {
-            color: #9ca3af;
+        .filter-bar {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin: 20px 0;
+            padding: 12px 0;
+            border-top: 1px solid #21262d;
+            border-bottom: 1px solid #21262d;
+        }
+        
+        .filter-label {
+            color: #7d8590;
             font-size: 0.875rem;
         }
         
-        .content-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
+        .filter-buttons {
+            display: flex;
+            gap: 8px;
         }
         
-        .panel {
-            background: white;
-            border-radius: 12px;
-            padding: 24px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        .filter-btn {
+            background: none;
+            border: 1px solid #30363d;
+            color: #7d8590;
+            padding: 4px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
         }
         
-        .panel h2 {
-            color: #1f2937;
-            margin-bottom: 20px;
-            font-size: 1.25rem;
+        .filter-btn:hover {
+            border-color: #58a6ff;
+            color: #58a6ff;
         }
         
-        .conversation-item, .project-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 12px 0;
-            border-bottom: 1px solid #f3f4f6;
+        .filter-btn.active {
+            background: #58a6ff;
+            border-color: #58a6ff;
+            color: #0d1117;
         }
         
-        .conversation-item:last-child, .project-item:last-child {
-            border-bottom: none;
+        .sessions-table {
+            width: 100%;
+            border-collapse: collapse;
         }
         
-        .item-info h4 {
-            color: #1f2937;
+        .sessions-table th {
+            text-align: left;
+            padding: 8px 12px;
+            color: #7d8590;
             font-size: 0.875rem;
-            margin-bottom: 4px;
+            font-weight: normal;
+            border-bottom: 1px solid #30363d;
         }
         
-        .item-info p {
-            color: #6b7280;
-            font-size: 0.75rem;
+        .sessions-table td {
+            padding: 8px 12px;
+            font-size: 0.875rem;
+            border-bottom: 1px solid #21262d;
         }
         
-        .status-badge {
-            padding: 4px 8px;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 500;
+        .sessions-table tr:hover {
+            background: #161b22;
+        }
+        
+        .session-id {
+            color: #58a6ff;
+            font-family: monospace;
+        }
+        
+        .session-project {
+            color: #c9d1d9;
+        }
+        
+        .session-messages {
+            color: #7d8590;
+        }
+        
+        .session-tokens {
+            color: #f85149;
+        }
+        
+        .session-time {
+            color: #7d8590;
+            font-size: 0.8rem;
         }
         
         .status-active {
-            background: #d1fae5;
-            color: #065f46;
+            color: #3fb950;
+            font-weight: bold;
         }
         
         .status-recent {
-            background: #fef3c7;
-            color: #92400e;
+            color: #d29922;
         }
         
         .status-inactive {
-            background: #f3f4f6;
-            color: #6b7280;
+            color: #7d8590;
         }
         
-        .loading {
+        .loading, .error {
             text-align: center;
-            color: white;
             padding: 40px;
+            color: #7d8590;
         }
         
         .error {
-            background: #fef2f2;
-            color: #dc2626;
-            padding: 16px;
-            border-radius: 8px;
-            margin: 20px 0;
+            color: #f85149;
+        }
+        
+        .no-sessions {
+            text-align: center;
+            padding: 40px;
+            color: #7d8590;
+            font-style: italic;
         }
         
         @media (max-width: 768px) {
-            .content-grid {
-                grid-template-columns: 1fr;
+            .stats-bar {
+                gap: 20px;
+            }
+            
+            .filter-bar {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+            
+            .sessions-table {
+                font-size: 0.8rem;
             }
             
-            .header h1 {
-                font-size: 2rem;
+            .sessions-table th,
+            .sessions-table td {
+                padding: 6px 8px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>
-                <span class="status-indicator"></span>
-                Claude Code Analytics
-            </h1>
-            <p>Real-time monitoring of your Claude Code usage</p>
-            <p id="lastUpdate" style="font-size: 0.75rem; opacity: 0.8;"></p>
+    <div class="terminal">
+        <div class="terminal-header">
+            <div class="terminal-title">
+                <span class="status-dot"></span>
+                claude-code-analytics
+            </div>
+            <div class="terminal-subtitle">real-time monitoring dashboard</div>
+            <div class="terminal-subtitle" id="lastUpdate"></div>
         </div>
         
         <div id="loading" class="loading">
-            <p>Loading analytics data...</p>
+            loading claude code data...
         </div>
         
         <div id="error" class="error" style="display: none;">
-            <p>Failed to load analytics data. Please check if Claude Code is installed.</p>
+            error: failed to load claude code data
         </div>
         
         <div id="dashboard" style="display: none;">
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <h3>Total Sessions</h3>
-                    <div class="value" id="totalSessions">0</div>
-                    <div class="label">Conversations</div>
+            <div class="stats-bar">
+                <div class="stat">
+                    <span class="stat-label">sessions:</span>
+                    <span class="stat-value" id="totalSessions">0</span>
                 </div>
-                <div class="stat-card">
-                    <h3>Total Tokens</h3>
-                    <div class="value" id="totalTokens">0</div>
-                    <div class="label">Estimated</div>
+                <div class="stat">
+                    <span class="stat-label">tokens:</span>
+                    <span class="stat-value" id="totalTokens">0</span>
                 </div>
-                <div class="stat-card">
-                    <h3>Active Projects</h3>
-                    <div class="value" id="activeProjects">0</div>
-                    <div class="label">Currently</div>
+                <div class="stat">
+                    <span class="stat-label">projects:</span>
+                    <span class="stat-value" id="activeProjects">0</span>
                 </div>
-                <div class="stat-card">
-                    <h3>Data Size</h3>
-                    <div class="value" id="dataSize">0</div>
-                    <div class="label">Total</div>
+                <div class="stat">
+                    <span class="stat-label">storage:</span>
+                    <span class="stat-value" id="dataSize">0</span>
                 </div>
             </div>
             
-            <div class="content-grid">
-                <div class="panel">
-                    <h2>Recent Conversations</h2>
-                    <div id="conversations">
-                        <!-- Conversations will be loaded here -->
-                    </div>
-                </div>
-                
-                <div class="panel">
-                    <h2>Active Projects</h2>
-                    <div id="projects">
-                        <!-- Projects will be loaded here -->
-                    </div>
+            <div class="filter-bar">
+                <span class="filter-label">filter sessions:</span>
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-filter="active">active</button>
+                    <button class="filter-btn" data-filter="recent">recent</button>
+                    <button class="filter-btn" data-filter="inactive">inactive</button>
+                    <button class="filter-btn" data-filter="all">all</button>
                 </div>
             </div>
+            
+            <table class="sessions-table">
+                <thead>
+                    <tr>
+                        <th>session id</th>
+                        <th>project</th>
+                        <th>messages</th>
+                        <th>tokens</th>
+                        <th>last activity</th>
+                        <th>status</th>
+                    </tr>
+                </thead>
+                <tbody id="sessionsTable">
+                    <!-- Sessions will be loaded here -->
+                </tbody>
+            </table>
+            
+            <div id="noSessions" class="no-sessions" style="display: none;">
+                no sessions found for current filter
+            </div>
         </div>
     </div>
 
     <script>
+        let allConversations = [];
+        let currentFilter = 'active';
+        
         async function loadData() {
             try {
                 const response = await fetch('/api/data');
@@ -646,11 +752,11 @@ async function createWebDashboard() {
                 
                 // Update timestamp
                 document.getElementById('lastUpdate').textContent = 
-                    \`Last updated: \${data.lastUpdate}\`;
+                    \`last update: \${data.lastUpdate}\`;
                 
                 updateStats(data.summary);
-                updateConversations(data.conversations);
-                updateProjects(data.activeProjects);
+                allConversations = data.conversations;
+                updateSessionsTable();
                 
             } catch (error) {
                 document.getElementById('loading').style.display = 'none';
@@ -666,44 +772,70 @@ async function createWebDashboard() {
             document.getElementById('dataSize').textContent = summary.totalFileSize;
         }
         
-        function updateConversations(conversations) {
-            const container = document.getElementById('conversations');
+        function updateSessionsTable() {
+            const tableBody = document.getElementById('sessionsTable');
+            const noSessionsDiv = document.getElementById('noSessions');
             
-            if (conversations.length === 0) {
-                container.innerHTML = '<p style="color: #6b7280; text-align: center; padding: 20px;">No conversations found</p>';
+            // Filter conversations based on current filter
+            let filteredConversations = allConversations;
+            if (currentFilter !== 'all') {
+                filteredConversations = allConversations.filter(conv => conv.status === currentFilter);
+            }
+            
+            if (filteredConversations.length === 0) {
+                tableBody.innerHTML = '';
+                noSessionsDiv.style.display = 'block';
                 return;
             }
             
-            container.innerHTML = conversations.slice(0, 10).map(conv => \`
-                <div class="conversation-item">
-                    <div class="item-info">
-                        <h4>\${conv.project}</h4>
-                        <p>\${conv.messageCount} messages • \${conv.tokens.toLocaleString()} tokens</p>
-                    </div>
-                    <span class="status-badge status-\${conv.status}">\${conv.status}</span>
-                </div>
+            noSessionsDiv.style.display = 'none';
+            
+            tableBody.innerHTML = filteredConversations.map(conv => \`
+                <tr>
+                    <td class="session-id">\${conv.id.substring(0, 8)}...</td>
+                    <td class="session-project">\${conv.project}</td>
+                    <td class="session-messages">\${conv.messageCount}</td>
+                    <td class="session-tokens">\${conv.tokens.toLocaleString()}</td>
+                    <td class="session-time">\${formatTime(conv.lastModified)}</td>
+                    <td class="status-\${conv.status}">\${conv.status}</td>
+                </tr>
             \`).join('');
         }
         
-        function updateProjects(projects) {
-            const container = document.getElementById('projects');
+        function formatTime(date) {
+            const now = new Date();
+            const diff = now - new Date(date);
+            const minutes = Math.floor(diff / (1000 * 60));
+            const hours = Math.floor(minutes / 60);
+            const days = Math.floor(hours / 24);
             
-            if (projects.length === 0) {
-                container.innerHTML = '<p style="color: #6b7280; text-align: center; padding: 20px;">No projects found</p>';
-                return;
-            }
-            
-            container.innerHTML = projects.slice(0, 10).map(project => \`
-                <div class="project-item">
-                    <div class="item-info">
-                        <h4>\${project.name}</h4>
-                        <p>\${project.todoFiles} todo files</p>
-                    </div>
-                    <span class="status-badge status-\${project.status}">\${project.status}</span>
-                </div>
-            \`).join('');
+            if (minutes < 1) return 'now';
+            if (minutes < 60) return \`\${minutes}m ago\`;
+            if (hours < 24) return \`\${hours}h ago\`;
+            return \`\${days}d ago\`;
         }
         
+        // Filter button handlers
+        document.addEventListener('DOMContentLoaded', function() {
+            const filterButtons = document.querySelectorAll('.filter-btn');
+            
+            filterButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Remove active class from all buttons
+                    filterButtons.forEach(btn => btn.classList.remove('active'));
+                    
+                    // Add active class to clicked button
+                    this.classList.add('active');
+                    
+                    // Update current filter
+                    currentFilter = this.dataset.filter;
+                    
+                    // Update table
+                    updateSessionsTable();
+                });
+            });
+        });
+        
         // Manual refresh function
         async function forceRefresh() {
             try {