claude-code-templates 1.13.2 → 1.14.1

package/components/commands/generate-tests.md

@@ -0,0 +1,68 @@
+# Test Generator
+
+Generate comprehensive test suite for $ARGUMENTS following project testing conventions and best practices.
+
+## Task
+
+I'll analyze the target code and create complete test coverage including:
+
+1. Unit tests for individual functions and methods
+2. Integration tests for component interactions  
+3. Edge case and error handling tests
+4. Mock implementations for external dependencies
+5. Test utilities and helpers as needed
+6. Performance and snapshot tests where appropriate
+
+## Process
+
+I'll follow these steps:
+
+1. Analyze the target file/component structure
+2. Identify all testable functions, methods, and behaviors
+3. Examine existing test patterns in the project
+4. Create test files following project naming conventions
+5. Implement comprehensive test cases with proper setup/teardown
+6. Add necessary mocks and test utilities
+7. Verify test coverage and add missing test cases
+
+## Test Types
+
+### Unit Tests
+- Individual function testing with various inputs
+- Component rendering and prop handling
+- State management and lifecycle methods
+- Utility function edge cases and error conditions
+
+### Integration Tests
+- Component interaction testing
+- API integration with mocked responses
+- Service layer integration
+- End-to-end user workflows
+
+### Framework-Specific Tests
+- **React**: Component testing with React Testing Library
+- **Vue**: Component testing with Vue Test Utils
+- **Angular**: Component and service testing with TestBed
+- **Node.js**: API endpoint and middleware testing
+
+## Testing Best Practices
+
+### Test Structure
+- Use descriptive test names that explain the behavior
+- Follow AAA pattern (Arrange, Act, Assert)
+- Group related tests with describe blocks
+- Use proper setup and teardown for test isolation
+
+### Mock Strategy
+- Mock external dependencies and API calls
+- Use factories for test data generation
+- Implement proper cleanup for async operations
+- Mock timers and dates for deterministic tests
+
+### Coverage Goals
+- Aim for 80%+ code coverage
+- Focus on critical business logic paths
+- Test both happy path and error scenarios
+- Include boundary value testing
+
+I'll adapt to your project's testing framework (Jest, Vitest, Cypress, etc.) and follow established patterns.

package/components/mcps/deepgraph-nextjs.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "DeepGraph Next.js MCP": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "mcp-code-graph@latest",
+        "vercel/next.js"
+      ]
+    }
+  }
+}

package/components/mcps/deepgraph-react.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "DeepGraph React MCP": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "mcp-code-graph@latest",
+        "facebook/react"
+      ]
+    }
+  }
+}

package/components/mcps/deepgraph-typescript.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "DeepGraph TypeScript MCP": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "mcp-code-graph@latest",
+        "microsoft/TypeScript"
+      ]
+    }
+  }
+}

package/components/mcps/deepgraph-vue.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "DeepGraph Vue MCP": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "mcp-code-graph@latest",
+        "vuejs/core"
+      ]
+    }
+  }
+}

package/components/mcps/filesystem-access.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "filesystem": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-filesystem",
+        "/path/to/allowed/files"
+      ]
+    }
+  }
+}

package/components/mcps/github-integration.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "github": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-github"],
+      "env": {
+        "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
+      }
+    }
+  }
+}

package/components/mcps/memory-integration.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "memory": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-memory"]
+    }
+  }
+}

package/components/mcps/mysql-integration.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "mysql": {
+      "command": "uvx",
+      "args": ["mcp-server-mysql"],
+      "env": {
+        "MYSQL_CONNECTION_STRING": "mysql://user:password@localhost:3306/dbname"
+      }
+    }
+  }
+}

package/components/mcps/postgresql-integration.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "postgresql": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-postgres"],
+      "env": {
+        "POSTGRES_CONNECTION_STRING": "postgresql://user:password@localhost:5432/dbname"
+      }
+    }
+  }
+}

package/components/mcps/web-fetch.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "fetch": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-fetch"]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.13.2",
+  "version": "1.14.1",
   "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": {
@@ -86,6 +86,7 @@
     "bin/",
     "src/",
     "templates/",
+    "components/",
     "README.md"
   ],
   "devDependencies": {

package/src/analytics-web/components/AgentsPage.js

@@ -16,6 +16,9 @@ class AgentsPage {
     };
     this.isInitialized = false;
     
+    // Initialize header component
+    this.headerComponent = null;
+    
     // Pagination state for conversations
     this.pagination = {
       currentPage: 0,
@@ -586,22 +589,8 @@ class AgentsPage {
   async render() {
     this.container.innerHTML = `
       <div class="agents-page">
-        <!-- Page Header -->
-        <div class="page-header conversations-header">
-          <div class="header-content">
-            <div class="header-left">
-              <div class="status-header">
-                <span class="session-timer-status-dot active"></span>
-                <h1 class="page-title">
-                  Claude Code web UI
-                </h1>
-              </div>
-              <div class="page-subtitle">
-                Monitor and analyze Claude Code agent interactions in real-time
-              </div>
-            </div>
-          </div>
-        </div>
+        <!-- Page Header (will be replaced by HeaderComponent) -->
+        <div id="agents-header-container"></div>
 
         <!-- Filters Section -->
         <div class="conversations-filters">
@@ -784,6 +773,28 @@ class AgentsPage {
 
     this.bindEvents();
     this.setupInfiniteScroll();
+    this.initializeHeaderComponent();
+  }
+
+  /**
+   * Initialize the header component
+   */
+  initializeHeaderComponent() {
+    const headerContainer = this.container.querySelector('#agents-header-container');
+    if (headerContainer && typeof HeaderComponent !== 'undefined') {
+      this.headerComponent = new HeaderComponent(headerContainer, {
+        title: 'Claude Code Chats',
+        subtitle: 'Monitor and analyze Claude Code agent interactions in real-time',
+        version: 'v1.13.2', // Fallback version
+        showVersionBadge: true,
+        showLastUpdate: true,
+        showThemeSwitch: true,
+        showGitHubLink: true,
+        dataService: this.dataService // Pass DataService for dynamic version loading
+      });
+      
+      this.headerComponent.render();
+    }
   }
 
   /**
@@ -4716,6 +4727,12 @@ class AgentsPage {
    * Destroy agents page
    */
   destroy() {
+    // Cleanup header component
+    if (this.headerComponent) {
+      this.headerComponent.destroy();
+      this.headerComponent = null;
+    }
+    
     // Cleanup components
     Object.values(this.components).forEach(component => {
       if (component.destroy) {

package/src/analytics-web/components/DashboardPage.js

@@ -13,6 +13,9 @@ class DashboardPage {
     this.refreshInterval = null;
     this.isInitialized = false;
     
+    // Initialize header component
+    this.headerComponent = null;
+    
     // Subscribe to state changes
     this.unsubscribe = this.stateService.subscribe(this.handleStateChange.bind(this));
   }
@@ -118,42 +121,8 @@ class DashboardPage {
   async render() {
     this.container.innerHTML = `
       <div class="dashboard-page">
-        <!-- Page Header -->
-        <div class="page-header">
-          <div class="header-content">
-            <div class="header-left">
-              <div class="status-header">
-                <span class="session-timer-status-dot active" id="session-status-dot"></span>
-                <h1 class="page-title">
-                  Claude Code Analytics Dashboard
-                  <span class="version-badge">v1.10.1</span>
-                </h1>
-              </div>
-              <div class="page-subtitle">
-                Real-time monitoring and analytics for Claude Code sessions
-              </div>
-              <div class="last-update-header">
-                <span class="last-update-label">last update:</span>
-                <span id="last-update-header-text">Never</span>
-              </div>
-            </div>
-            <div class="header-right">
-              <div class="theme-switch-container" title="Toggle light/dark theme">
-                <div class="theme-switch" id="header-theme-switch">
-                  <div class="theme-switch-track">
-                    <div class="theme-switch-thumb" id="header-theme-switch-thumb">
-                      <span class="theme-switch-icon">🌙</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-link" title="Star on GitHub">
-                <span class="github-icon">⭐</span>
-                Star on GitHub
-              </a>
-            </div>
-          </div>
-        </div>
+        <!-- Page Header (will be replaced by HeaderComponent) -->
+        <div id="dashboard-header-container"></div>
 
         <!-- Action Buttons -->
         <div class="action-buttons-container">
@@ -394,7 +363,28 @@ class DashboardPage {
     `;
 
     this.bindEvents();
-    this.initializeTheme();
+    this.initializeHeaderComponent();
+  }
+
+  /**
+   * Initialize the header component
+   */
+  initializeHeaderComponent() {
+    const headerContainer = this.container.querySelector('#dashboard-header-container');
+    if (headerContainer && typeof HeaderComponent !== 'undefined') {
+      this.headerComponent = new HeaderComponent(headerContainer, {
+        title: 'Claude Code Analytics Dashboard',
+        subtitle: 'Real-time monitoring and analytics for Claude Code sessions',
+        version: 'v1.13.2', // Fallback version
+        showVersionBadge: true,
+        showLastUpdate: true,
+        showThemeSwitch: true,
+        showGitHubLink: true,
+        dataService: this.dataService // Pass DataService for dynamic version loading
+      });
+      
+      this.headerComponent.render();
+    }
   }
 
   /**
@@ -884,11 +874,6 @@ class DashboardPage {
       retryBtn.addEventListener('click', () => this.loadInitialData());
     }
 
-    // Theme toggle (header)
-    const headerThemeSwitch = this.container.querySelector('#header-theme-switch');
-    if (headerThemeSwitch) {
-      headerThemeSwitch.addEventListener('click', () => this.toggleTheme());
-    }
   }
 
   /**
@@ -2105,74 +2090,13 @@ class DashboardPage {
     }
   }
 
-  /**
-   * Initialize theme from localStorage
-   */
-  initializeTheme() {
-    const savedTheme = localStorage.getItem('claude-analytics-theme') || 'dark';
-    const body = document.body;
-    const headerThumb = this.container.querySelector('#header-theme-switch-thumb');
-    const headerIcon = headerThumb?.querySelector('.theme-switch-icon');
-    
-    body.setAttribute('data-theme', savedTheme);
-    if (headerThumb && headerIcon) {
-      if (savedTheme === 'light') {
-        headerThumb.classList.add('light');
-        headerIcon.textContent = '☀️';
-      } else {
-        headerThumb.classList.remove('light');
-        headerIcon.textContent = '🌙';
-      }
-    }
-  }
-
-  /**
-   * Toggle theme between light and dark
-   */
-  toggleTheme() {
-    const body = document.body;
-    const headerThumb = this.container.querySelector('#header-theme-switch-thumb');
-    const headerIcon = headerThumb?.querySelector('.theme-switch-icon');
-    
-    // Also sync with global theme switch
-    const globalThumb = document.getElementById('themeSwitchThumb');
-    const globalIcon = globalThumb?.querySelector('.theme-switch-icon');
-    
-    const isLight = body.getAttribute('data-theme') === 'light';
-    const newTheme = isLight ? 'dark' : 'light';
-    
-    body.setAttribute('data-theme', newTheme);
-    
-    // Update header theme switch
-    if (headerThumb && headerIcon) {
-      headerThumb.classList.toggle('light', newTheme === 'light');
-      headerIcon.textContent = newTheme === 'light' ? '☀️' : '🌙';
-    }
-    
-    // Sync with global theme switch
-    if (globalThumb && globalIcon) {
-      globalThumb.classList.toggle('light', newTheme === 'light');
-      globalIcon.textContent = newTheme === 'light' ? '☀️' : '🌙';
-    }
-    
-    localStorage.setItem('claude-analytics-theme', newTheme);
-  }
 
   /**
    * Update last update time
    */
   updateLastUpdateTime() {
-    const currentTime = new Date().toLocaleTimeString();
-    
-    // Update both locations
-    const lastUpdateText = this.container.querySelector('#last-update-text');
-    const lastUpdateHeaderText = this.container.querySelector('#last-update-header-text');
-    
-    if (lastUpdateText) {
-      lastUpdateText.textContent = currentTime;
-    }
-    if (lastUpdateHeaderText) {
-      lastUpdateHeaderText.textContent = currentTime;
+    if (this.headerComponent) {
+      this.headerComponent.updateLastUpdateTime();
     }
   }
 
@@ -2252,6 +2176,12 @@ class DashboardPage {
   destroy() {
     this.stopPeriodicRefresh();
     
+    // Cleanup header component
+    if (this.headerComponent) {
+      this.headerComponent.destroy();
+      this.headerComponent = null;
+    }
+    
     // Cleanup Chart.js instances specifically
     if (this.components.tokenChart) {
       this.components.tokenChart.destroy();