openclaw-smartmeter 0.2.2 → 0.3.0

package/canvas-template/app.js

@@ -6,12 +6,15 @@ let modelChart = null;
 let taskChart = null;
 let activeTab = 'usage';
 let refreshInterval = null;
+let openRouterConfigured = false;
+let openRouterUsage = null;
 
 // Initialize dashboard on page load
 document.addEventListener('DOMContentLoaded', () => {
     console.log('SmartMeter Dashboard loading...');
     initializeDashboard();
     startAutoRefresh();
+    checkOpenRouterConfig();
 });
 
 // Initialize the dashboard
@@ -76,18 +79,45 @@ function updateHeroCard(data) {
     const savings = data.monthly_projected_current - data.monthly_projected_optimized;
     const savingsPercent = ((savings / data.monthly_projected_current) * 100).toFixed(1);
     
-    document.getElementById('savingsAmount').textContent = `$${savings.toFixed(2)}/mo`;
-    document.getElementById('savingsPercentage').textContent = `${savingsPercent}% savings`;
-    document.getElementById('currentCost').textContent = `$${data.monthly_projected_current.toFixed(2)}/mo`;
-    document.getElementById('optimizedCost').textContent = `$${data.monthly_projected_optimized.toFixed(2)}/mo`;
+    // Check if we have insufficient data for meaningful analysis
+    const hasInsufficientData = isInsufficientData(data);
     
-    // Update confidence badge
-    const badge = document.getElementById('confidenceBadge');
-    const confidenceText = getConfidenceText(data.confidence_level, data.days_analyzed);
-    badge.innerHTML = `
-        <span class="confidence-icon">${getConfidenceIcon(data.confidence_level)}</span>
-        <span class="confidence-text">${confidenceText}</span>
-    `;
+    // Show cost data notice if costs are zero but we have usage
+    const costDataNotice = document.getElementById('costDataNotice');
+    if (data.monthly_projected_current === 0 && data.total_tasks > 0) {
+        costDataNotice.style.display = 'flex';
+    } else {
+        costDataNotice.style.display = 'none';
+    }
+    
+    if (hasInsufficientData) {
+        // Show professional message about needing more data
+        document.getElementById('savingsAmount').textContent = '📊';
+        document.getElementById('savingsPercentage').textContent = 'Analyzing...';
+        document.getElementById('currentCost').innerHTML = '<span class="insufficient-data">Insufficient data</span>';
+        document.getElementById('optimizedCost').innerHTML = '<span class="insufficient-data">Gathering usage...</span>';
+        
+        // Show helpful message in confidence badge
+        const badge = document.getElementById('confidenceBadge');
+        badge.innerHTML = `
+            <span class="confidence-icon">💡</span>
+            <span class="confidence-text">Need more usage data for accurate cost analysis (${data.total_tasks} tasks, ${data.days_analyzed} days so far)</span>
+        `;
+    } else {
+        // Normal display with actual costs
+        document.getElementById('savingsAmount').textContent = `$${savings.toFixed(2)}/mo`;
+        document.getElementById('savingsPercentage').textContent = `${savingsPercent}% savings`;
+        document.getElementById('currentCost').textContent = `$${data.monthly_projected_current.toFixed(2)}/mo`;
+        document.getElementById('optimizedCost').textContent = `$${data.monthly_projected_optimized.toFixed(2)}/mo`;
+        
+        // Update confidence badge
+        const badge = document.getElementById('confidenceBadge');
+        const confidenceText = getConfidenceText(data.confidence_level, data.days_analyzed);
+        badge.innerHTML = `
+            <span class="confidence-icon">${getConfidenceIcon(data.confidence_level)}</span>
+            <span class="confidence-text">${confidenceText}</span>
+        `;
+    }
 }
 
 // Update stats cards
@@ -339,6 +369,18 @@ function generateTimelineDetails(data) {
 }
 
 // Helper functions
+function isInsufficientData(data) {
+    // Insufficient data if:
+    // 1. Total costs are zero or near-zero (< $0.01)
+    // 2. Less than 5 tasks analyzed
+    // 3. Less than 1 day of data
+    const hasNoCosts = data.monthly_projected_current < 0.01;
+    const hasMinimalTasks = data.total_tasks < 5;
+    const hasMinimalDays = data.days_analyzed < 1;
+    
+    return hasNoCosts || hasMinimalTasks || hasMinimalDays;
+}
+
 function getConfidenceIcon(level) {
     const icons = {
         'high': '✅',
@@ -504,6 +546,219 @@ async function applyOptimizations() {
     }
 }
 
+// ============================================
+// OpenRouter Integration Functions
+// ============================================
+
+/**
+ * Check if OpenRouter API key is configured
+ */
+async function checkOpenRouterConfig() {
+    // Always show OpenRouter section
+    document.getElementById('openRouterSection').style.display = 'block';
+    
+    try {
+        const response = await fetch(`${API_BASE_URL}/config/openrouter-key`);
+        if (response.ok) {
+            const data = await response.json();
+            openRouterConfigured = data.configured;
+            
+            if (openRouterConfigured) {
+                await fetchOpenRouterUsage();
+            } else {
+                // Show configure prompt
+                updateOpenRouterDisplay({ configured: false });
+            }
+        }
+    } catch (error) {
+        console.log('OpenRouter config check failed (API server may not be running):', error.message);
+        // Still show section with configuration prompt
+        updateOpenRouterDisplay({ configured: false });
+    }
+}
+
+/**
+ * Fetch actual OpenRouter usage from API
+ */
+async function fetchOpenRouterUsage() {
+    try {
+        const response = await fetch(`${API_BASE_URL}/openrouter-usage`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch OpenRouter usage');
+        }
+        
+        const data = await response.json();
+        openRouterUsage = data;
+        
+        updateOpenRouterDisplay(data);
+    } catch (error) {
+        console.error('Failed to fetch OpenRouter usage:', error);
+        updateOpenRouterDisplay({ success: false, error: error.message });
+    }
+}
+
+/**
+ * Update OpenRouter usage display in dashboard
+ */
+function updateOpenRouterDisplay(data) {
+    const content = document.getElementById('openRouterContent');
+    
+    if (!data.configured) {
+        content.innerHTML = `
+            <div class="openrouter-notice">
+                <p>⚙️ Configure your OpenRouter API key to view actual usage and compare with analyzed data.</p>
+                <button class="btn btn-primary" onclick="openConfigModal()">Configure API Key</button>
+            </div>
+        `;
+        return;
+    }
+    
+    if (!data.success) {
+        content.innerHTML = `
+            <div class="openrouter-error">
+                <p>❌ Error fetching OpenRouter usage: ${data.error || 'Unknown error'}</p>
+                <button class="btn btn-secondary" onclick="openConfigModal()">Update API Key</button>
+            </div>
+        `;
+        return;
+    }
+    
+    // Display actual usage
+    const totalSpent = data.totalSpent !== null ? `$${data.totalSpent.toFixed(4)}` : 'N/A';
+    const accountInfo = data.account || {};
+    
+    content.innerHTML = `
+        <div class="openrouter-data">
+            <div class="usage-grid">
+                <div class="usage-item">
+                    <div class="usage-label">Account</div>
+                    <div class="usage-value">${accountInfo.label || 'Unknown'}</div>
+                </div>
+                <div class="usage-item">
+                    <div class="usage-label">Total Spent</div>
+                    <div class="usage-value highlight">${totalSpent}</div>
+                </div>
+                <div class="usage-item">
+                    <div class="usage-label">Usage Balance</div>
+                    <div class="usage-value">${accountInfo.usageBalance !== null ? `$${(accountInfo.usageBalance / 100).toFixed(2)}` : 'N/A'}</div>
+                </div>
+                <div class="usage-item">
+                    <div class="usage-label">Account Type</div>
+                    <div class="usage-value">${accountInfo.isFreeTier ? 'Free Tier' : 'Paid'}</div>
+                </div>
+            </div>
+            ${getComparisonHtml(data)}
+            <div class="openrouter-footer">
+                <small>Last updated: ${new Date(data.timestamp).toLocaleString()}</small>
+                <button class="btn-link" onclick="fetchOpenRouterUsage()">🔄 Refresh</button>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Generate comparison HTML between analyzed and actual usage
+ */
+function getComparisonHtml(openRouterData) {
+    if (!currentData || !openRouterData.totalSpent) {
+        return '';
+    }
+    
+    const analyzed = currentData.monthly_projected_current;
+    const actual = openRouterData.totalSpent;
+    const difference = Math.abs(analyzed - actual);
+    const percentDiff = analyzed > 0 ? ((difference / analyzed) * 100).toFixed(1) : 0;
+    
+    return `
+        <div class="comparison-section">
+            <h4>📊 Comparison</h4>
+            <div class="comparison-grid">
+                <div class="comparison-item">
+                    <span class="comparison-label">SmartMeter Analyzed:</span>
+                    <span class="comparison-value">$${analyzed.toFixed(4)}</span>
+                </div>
+                <div class="comparison-item">
+                    <span class="comparison-label">OpenRouter Actual:</span>
+                    <span class="comparison-value">$${actual.toFixed(4)}</span>
+                </div>
+                <div class="comparison-item">
+                    <span class="comparison-label">Difference:</span>
+                    <span class="comparison-value ${analyzed > actual ? 'positive' : 'negative'}">
+                        ${analyzed > actual ? '-' : '+'}$${difference.toFixed(4)} (${percentDiff}%)
+                    </span>
+                </div>
+            </div>
+            ${analyzed === 0 && actual > 0 ? `
+                <div class="comparison-note">
+                    ℹ️ SmartMeter shows $0 because OpenRouter isn't including cost data in API responses. 
+                    Your actual usage is ${totalSpent} as shown above.
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+/**
+ * Open API key configuration modal
+ */
+function openConfigModal() {
+    document.getElementById('configModal').style.display = 'flex';
+    document.getElementById('configStatus').innerHTML = '';
+}
+
+/**
+ * Close API key configuration modal
+ */
+function closeConfigModal() {
+    document.getElementById('configModal').style.display = 'none';
+    document.getElementById('apiKeyInput').value = '';
+    document.getElementById('configStatus').innerHTML = '';
+}
+
+/**
+ * Save and validate API key
+ */
+async function saveApiKey() {
+    const apiKey = document.getElementById('apiKeyInput').value.trim();
+    const statusDiv = document.getElementById('configStatus');
+    
+    if (!apiKey) {
+        statusDiv.innerHTML = '<div class="status-error">⚠️ Please enter an API key</div>';
+        return;
+    }
+    
+    if (!apiKey.startsWith('sk-or-')) {
+        statusDiv.innerHTML = '<div class="status-error">⚠️ Invalid API key format (should start with "sk-or-")</div>';
+        return;
+    }
+    
+    statusDiv.innerHTML = '<div class="status-loading">⏳ Validating API key...</div>';
+    
+    try {
+        const response = await fetch(`${API_BASE_URL}/config/openrouter-key`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ apiKey })
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            statusDiv.innerHTML = '<div class="status-success">✅ API key saved and validated!</div>';
+            setTimeout(() => {
+                closeConfigModal();
+                window.location.reload(); // Reload to show OpenRouter section
+            }, 1500);
+        } else {
+            statusDiv.innerHTML = `<div class="status-error">❌ ${data.error || 'Validation failed'}</div>`;
+        }
+    } catch (error) {
+        statusDiv.innerHTML = `<div class="status-error">❌ Failed to save: ${error.message}</div>`;
+    }
+}
+
 // Export functions for inline onclick handlers
 window.refreshDashboard = refreshDashboard;
 window.switchTab = switchTab;
@@ -511,3 +766,10 @@ window.viewRecommendationDetails = viewRecommendationDetails;
 window.exportReport = exportReport;
 window.viewConfig = viewConfig;
 window.applyOptimizations = applyOptimizations;
+window.openConfigModal = openConfigModal;
+window.closeConfigModal = closeConfigModal;
+window.saveApiKey = saveApiKey;
+window.fetchOpenRouterUsage = fetchOpenRouterUsage;
+
+window.viewConfig = viewConfig;
+window.applyOptimizations = applyOptimizations;

package/canvas-template/index.html

@@ -36,6 +36,32 @@
 
         <!-- Main Dashboard -->
         <main class="dashboard">
+            <!-- Info Banner - Cost Data Notice -->
+            <div class="info-banner" id="costDataNotice" style="display: none;">
+                <div class="info-banner-icon">ℹ️</div>
+                <div class="info-banner-content">
+                    <div class="info-banner-title">About Cost Tracking</div>
+                    <div class="info-banner-text">
+                        SmartMeter analyzes cost data from your OpenClaw session files. If costs show as $0.00, 
+                        your OpenRouter API responses may not include cost information. SmartMeter will still 
+                        provide optimization recommendations based on token usage patterns.
+                    </div>
+                </div>
+            </div>
+
+            <!-- OpenRouter Live Usage Section -->
+            <section class="openrouter-section" id="openRouterSection">
+                <div class="openrouter-card">
+                    <div class="openrouter-header">
+                        <h3>🔗 OpenRouter Actual Usage</h3>
+                        <button class="btn-config" onclick="openConfigModal()">⚙️ Configure API Key</button>
+                    </div>
+                    <div id="openRouterContent">
+                        <div class="openrouter-loading">Loading actual usage...</div>
+                    </div>
+                </div>
+            </section>
+
             <!-- Hero Section - Savings Display -->
             <section class="hero-card">
                 <div class="savings-display">
@@ -146,6 +172,29 @@
                 </div>
             </footer>
         </main>
+
+        <!-- OpenRouter API Key Configuration Modal -->
+        <div id="configModal" class="modal" style="display: none;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2>Configure OpenRouter API Key</h2>
+                    <button class="modal-close" onclick="closeConfigModal()">×</button>
+                </div>
+                <div class="modal-body">
+                    <p>Enter your OpenRouter API key to view actual usage and compare with analyzed data.</p>
+                    <div class="form-group">
+                        <label for="apiKeyInput">OpenRouter API Key:</label>
+                        <input type="password" id="apiKeyInput" placeholder="sk-or-v1-..." class="api-key-input">
+                        <small class="form-hint">Your API key is stored locally and never shared.</small>
+                    </div>
+                    <div id="configStatus" class="config-status"></div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" onclick="closeConfigModal()">Cancel</button>
+                    <button class="btn btn-primary" onclick="saveApiKey()">Save & Validate</button>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Toast Notifications -->