claude-code-templates 1.8.2 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.8.2",
+  "version": "1.8.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": {
@@ -31,7 +31,7 @@
     "dev:link": "npm link",
     "dev:unlink": "npm unlink -g claude-code-templates",
     "pretest:commands": "npm run dev:link",
-    "prepublishOnly": "echo 'Skipping tests for emergency hotfix'",
+    "prepublishOnly-disabled": "npm run test:coverage",
     "analytics:start": "node src/analytics.js",
     "analytics:test": "npm run test:analytics"
   },

package/src/analytics-web/index.html

@@ -7,6 +7,42 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
     <script src="components/SessionTimer.js"></script>
     <style>
+        :root {
+            /* Dark theme colors (default) */
+            --bg-primary: #0d1117;
+            --bg-secondary: #161b22;
+            --bg-tertiary: #21262d;
+            --border-primary: #30363d;
+            --border-secondary: #21262d;
+            --text-primary: #c9d1d9;
+            --text-secondary: #7d8590;
+            --text-accent: #d57455;
+            --text-success: #3fb950;
+            --text-warning: #f97316;
+            --text-error: #f85149;
+            --text-info: #a5d6ff;
+            --shadow-primary: rgba(0, 0, 0, 0.4);
+            --shadow-secondary: rgba(1, 4, 9, 0.85);
+        }
+        
+        [data-theme="light"] {
+            /* Light theme colors */
+            --bg-primary: #ffffff;
+            --bg-secondary: #f6f8fa;
+            --bg-tertiary: #f1f3f4;
+            --border-primary: #d0d7de;
+            --border-secondary: #e5e5e5;
+            --text-primary: #24292f;
+            --text-secondary: #656d76;
+            --text-accent: #d73a49;
+            --text-success: #28a745;
+            --text-warning: #f97316;
+            --text-error: #d73a49;
+            --text-info: #0366d6;
+            --shadow-primary: rgba(0, 0, 0, 0.1);
+            --shadow-secondary: rgba(0, 0, 0, 0.2);
+        }
+        
         * {
             margin: 0;
             padding: 0;
@@ -15,10 +51,11 @@
         
         body {
             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            background: #0d1117;
-            color: #c9d1d9;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             min-height: 100vh;
             line-height: 1.4;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
         
         .terminal {
@@ -28,14 +65,14 @@
         }
         
         .terminal-header {
-            border-bottom: 1px solid #30363d;
+            border-bottom: 1px solid var(--border-primary);
             padding-bottom: 20px;
             margin-bottom: 20px;
             position: relative;
         }
         
         .terminal-title {
-            color: #d57455;
+            color: var(--text-accent);
             font-size: 1.25rem;
             font-weight: normal;
             display: flex;
@@ -47,7 +84,7 @@
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: #3fb950;
+            background: var(--text-success);
             animation: pulse 2s infinite;
         }
         
@@ -57,18 +94,94 @@
         }
         
         .terminal-subtitle {
-            color: #7d8590;
+            color: var(--text-secondary);
             font-size: 0.875rem;
             margin-top: 4px;
         }
         
-        .github-star-btn {
+        .header-actions {
             position: absolute;
             top: 0;
             right: 0;
-            background: #21262d;
-            border: 1px solid #30363d;
-            color: #c9d1d9;
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+        
+        .theme-switch-container {
+            display: flex;
+            align-items: center;
+            font-family: inherit;
+        }
+        
+        .theme-switch {
+            position: relative;
+            cursor: pointer;
+        }
+        
+        .theme-switch-track {
+            position: relative;
+            width: 48px;
+            height: 24px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            border-radius: 3px;
+            transition: all 0.3s ease;
+        }
+        
+        .theme-switch-track:hover {
+            border-color: var(--text-accent);
+            background: var(--border-primary);
+        }
+        
+        .theme-switch-thumb {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 18px;
+            height: 18px;
+            background: var(--text-accent);
+            border-radius: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transform: translateX(0);
+        }
+        
+        .theme-switch-thumb.light {
+            transform: translateX(22px);
+        }
+        
+        .theme-switch-icon {
+            font-size: 0.7rem;
+            color: var(--bg-primary);
+            transition: all 0.3s ease;
+        }
+        
+        
+        .theme-switch-track::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            background: linear-gradient(45deg, transparent, var(--text-accent));
+            border-radius: 3px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        
+        .theme-switch-track:hover::before {
+            opacity: 0.1;
+        }
+        
+        .github-star-btn {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            color: var(--text-primary);
             padding: 8px 12px;
             border-radius: 6px;
             text-decoration: none;
@@ -82,9 +195,9 @@
         }
         
         .github-star-btn:hover {
-            border-color: #d57455;
-            background: #30363d;
-            color: #d57455;
+            border-color: var(--text-accent);
+            background: var(--border-primary);
+            color: var(--text-accent);
             text-decoration: none;
         }
         
@@ -1317,12 +1430,20 @@
                 padding: 6px 8px;
             }
             
-            .github-star-btn {
+            .header-actions {
                 position: relative;
                 margin-top: 12px;
                 align-self: flex-start;
+                gap: 12px;
+            }
+            
+            .github-star-btn {
+                position: relative;
+                margin-top: 0;
+                align-self: flex-start;
             }
             
+            
             .terminal-header {
                 display: flex;
                 flex-direction: column;
@@ -1340,10 +1461,21 @@
             <div class="terminal-subtitle">real-time monitoring dashboard</div>
             <div class="terminal-subtitle" id="lastUpdate"></div>
             
-            <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-star-btn" title="Give us a star on GitHub to support the project!">
-                <span class="star-icon">⭐</span>
-                <span>Star on GitHub</span>
-            </a>
+            <div class="header-actions">
+                <div class="theme-switch-container" title="Toggle light/dark theme">
+                    <div class="theme-switch" id="themeSwitch">
+                        <div class="theme-switch-track">
+                            <div class="theme-switch-thumb" id="themeSwitchThumb">
+                                <span class="theme-switch-icon">🌙</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-star-btn" title="Give us a star on GitHub to support the project!">
+                    <span class="star-icon">⭐</span>
+                    <span>Star on GitHub</span>
+                </a>
+            </div>
         </div>
         
         <div id="loading" class="loading">
@@ -1962,11 +2094,11 @@
                     datasets: [{
                         label: 'Tokens',
                         data: dateRange.map(day => day.tokens),
-                        borderColor: '#d57455',
-                        backgroundColor: 'rgba(213, 116, 85, 0.1)',
+                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
+                        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim() + '20',
                         borderWidth: 2,
-                        pointBackgroundColor: '#d57455',
-                        pointBorderColor: '#d57455',
+                        pointBackgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
+                        pointBorderColor: getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
                         pointRadius: 4,
                         pointHoverRadius: 6,
                         fill: true,
@@ -2076,14 +2208,14 @@
                 sortedProjects.push(['others', othersTotal]);
             }
             
-            // Terminal-style colors
+            // Terminal-style colors using CSS variables
             const colors = [
-                '#d57455', // Orange
-                '#3fb950', // Green
-                '#a5d6ff', // Blue
-                '#f97316', // Orange variant
-                '#c9d1d9', // Light gray
-                '#7d8590'  // Gray
+                getComputedStyle(document.documentElement).getPropertyValue('--text-accent').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-success').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-info').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-warning').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim(),
+                getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim()
             ];
             
             const ctx = document.getElementById('projectChart').getContext('2d');
@@ -2099,7 +2231,7 @@
                     datasets: [{
                         data: sortedProjects.map(([,tokens]) => tokens),
                         backgroundColor: colors.slice(0, sortedProjects.length),
-                        borderColor: '#161b22',
+                        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--bg-secondary').trim(),
                         borderWidth: 2,
                         hoverBorderWidth: 3
                     }]
@@ -2646,6 +2778,9 @@
             document.getElementById('dateFrom').addEventListener('change', refreshCharts);
             document.getElementById('dateTo').addEventListener('change', refreshCharts);
             
+            // Initialize theme toggle
+            initializeTheme();
+            
             // Initialize notification button state
             updateNotificationButtonState();
         });
@@ -2668,7 +2803,11 @@
                 getSessionData: async () => {
                     try {
                         const response = await fetch('/api/session/data');
-                        return await response.json();
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        const data = await response.json();
+                        return data;
                     } catch (error) {
                         console.error('Error fetching session data:', error);
                         return null;
@@ -2707,6 +2846,49 @@
             }
         }
         
+        // Theme toggle functionality
+        function initializeTheme() {
+            const savedTheme = localStorage.getItem('claude-analytics-theme') || 'dark';
+            const body = document.body;
+            const themeSwitch = document.getElementById('themeSwitch');
+            const themeSwitchThumb = document.getElementById('themeSwitchThumb');
+            const themeIcon = themeSwitchThumb.querySelector('.theme-switch-icon');
+            
+            function setTheme(theme) {
+                if (theme === 'light') {
+                    body.setAttribute('data-theme', 'light');
+                    themeSwitchThumb.classList.add('light');
+                    themeIcon.textContent = '☀️';
+                } else {
+                    body.removeAttribute('data-theme');
+                    themeSwitchThumb.classList.remove('light');
+                    themeIcon.textContent = '🌙';
+                }
+                localStorage.setItem('claude-analytics-theme', theme);
+                
+                // Update charts if they exist to use new theme colors
+                if (tokenChart || projectChart) {
+                    setTimeout(() => {
+                        if (allData) {
+                            updateCharts(allData);
+                        }
+                    }, 100); // Small delay to let CSS variables update
+                }
+            }
+            
+            function toggleTheme() {
+                const currentTheme = body.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                setTheme(newTheme);
+            }
+            
+            // Set initial theme
+            setTheme(savedTheme);
+            
+            // Add click event listener
+            themeSwitch.addEventListener('click', toggleTheme);
+        }
+        
         // Add keyboard shortcut for refresh (F5 or Ctrl+R)
         document.addEventListener('keydown', function(e) {
             if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {