openclaw-smartmeter 0.4.1 → 0.5.1

package/canvas-template/app.js

@@ -23,6 +23,7 @@ async function initializeDashboard() {
     // Try to load data from local file first (works when served statically)
     await loadAnalysisData();
     hideLoading();
+    initGetStartedCard();
     checkOpenRouterConfig();
     startAutoRefresh();
   } catch (err) {
@@ -828,6 +829,168 @@ function updateModelDetails() {
     </table>`;
 }
 
+/* ─── Inline API Key (Get Started Card) ─── */
+async function validateInlineApiKey() {
+  const input = document.getElementById('gsApiKeyInput');
+  const key = input.value.trim();
+  const status = document.getElementById('gsKeyStatus');
+  const btn = document.getElementById('gsValidateBtn');
+
+  function showStatus(msg, type) {
+    status.textContent = msg;
+    status.className = 'config-status ' + type;
+    status.style.removeProperty('display');
+  }
+
+  if (!key) { showStatus('Please enter an API key.', 'error'); return; }
+  if (!key.startsWith('sk-or-')) { showStatus('Invalid format — key should start with sk-or-', 'error'); return; }
+
+  showStatus('Validating…', 'validating');
+  btn.disabled = true;
+  btn.textContent = 'Validating…';
+
+  let validated = false;
+  let errorMsg = '';
+  let usageData = null;
+
+  // Try API server first
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/config/openrouter-key`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ apiKey: key })
+    });
+    const json = await res.json();
+    if (json.success) {
+      validated = true;
+      // Fetch usage via API server
+      try {
+        const ur = await fetch(`${API_BASE_URL}/api/openrouter-usage`);
+        const uj = await ur.json();
+        if (uj.success && uj.configured) usageData = uj.data || uj;
+      } catch {}
+    } else {
+      errorMsg = json.error || 'Validation failed';
+    }
+  } catch (_) {
+    // API server not available — validate directly against OpenRouter
+    try {
+      const res = await fetch('https://openrouter.ai/api/v1/auth/key', {
+        headers: { 'Authorization': `Bearer ${key}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data && data.data) {
+          validated = true;
+          usageData = data.data;
+        } else {
+          errorMsg = 'Key not recognized by OpenRouter';
+        }
+      } else if (res.status === 401 || res.status === 403) {
+        errorMsg = 'Invalid API key — authentication failed';
+      } else {
+        errorMsg = `OpenRouter returned status ${res.status}`;
+      }
+    } catch (e2) {
+      errorMsg = 'Could not reach OpenRouter to validate — check your connection';
+    }
+  }
+
+  btn.disabled = false;
+  btn.textContent = 'Save & Validate';
+
+  if (validated) {
+    localStorage.setItem('smartmeter_openrouter_key', key);
+    showStatus('✅ API key saved and validated!', 'success');
+
+    // Show balance section, hide key input
+    setTimeout(() => {
+      showBalanceDisplay(usageData);
+      // Also sync the modal key input
+      const modalInput = document.getElementById('apiKeyInput');
+      if (modalInput) modalInput.value = key;
+      // Also update the OpenRouter sidebar section
+      fetchOpenRouterUsage();
+    }, 600);
+  } else {
+    showStatus(`❌ ${errorMsg}`, 'error');
+  }
+}
+
+function showBalanceDisplay(usageData) {
+  const keySection = document.getElementById('gsKeySection');
+  const balanceSection = document.getElementById('gsBalance');
+
+  keySection.style.display = 'none';
+  balanceSection.style.display = 'block';
+
+  if (usageData) {
+    // Handle both API server shape (credits.total/used/remaining, account.limit)
+    // and direct OpenRouter shape (usage, limit, rate_limit)
+    const credits = usageData.credits || {};
+    const account = usageData.account || {};
+    const usage = credits.used ?? usageData.usage ?? account.usageBalance ?? 0;
+    const limit = credits.total ?? usageData.limit ?? account.limit ?? 0;
+    const remaining = credits.remaining ?? (limit - usage);
+    const rate = usageData.rate_limit?.requests
+              || usageData.rateLimit?.requests
+              || usageData.rate?.requests
+              || '--';
+
+    setText('gsBalanceCredits', `$${Number(limit).toFixed(2)}`);
+    setText('gsBalanceUsage', `$${Number(usage).toFixed(2)}`);
+    setText('gsBalanceRemaining', `$${Number(remaining).toFixed(2)}`);
+    setText('gsBalanceRate', typeof rate === 'number' ? `${rate}/s` : rate);
+  }
+
+  // Highlight step 1 as done
+  const step1 = document.getElementById('gsStep1');
+  if (step1) { step1.classList.add('gs-step-done'); }
+}
+
+function showApiKeyInput() {
+  const keySection = document.getElementById('gsKeySection');
+  const balanceSection = document.getElementById('gsBalance');
+  keySection.style.display = 'block';
+  balanceSection.style.display = 'none';
+  document.getElementById('gsApiKeyInput').focus();
+}
+
+/** On init, check if key is already stored and auto-show balance */
+async function initGetStartedCard() {
+  const stored = localStorage.getItem('smartmeter_openrouter_key');
+  if (!stored) return;
+
+  // Pre-fill the input
+  const input = document.getElementById('gsApiKeyInput');
+  if (input) input.value = stored;
+
+  // Try to fetch balance
+  let usageData = null;
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/openrouter-usage`);
+    const json = await res.json();
+    if (json.success && json.configured) {
+      usageData = json.data || json;
+    }
+  } catch {
+    // Try direct OpenRouter
+    try {
+      const res = await fetch('https://openrouter.ai/api/v1/auth/key', {
+        headers: { 'Authorization': `Bearer ${stored}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data && data.data) usageData = data.data;
+      }
+    } catch {}
+  }
+
+  if (usageData) {
+    showBalanceDisplay(usageData);
+  }
+}
+
 /* ─── OpenRouter Integration ─── */
 async function checkOpenRouterConfig() {
   try {
@@ -849,26 +1012,35 @@ async function fetchOpenRouterUsage() {
     if (!res.ok) return;
     const json = await res.json();
     if (json.success && json.configured) {
-      const usage = json.data || json;
+      const raw = json.data || json;
+      const credits = raw.credits || {};
+      const account = raw.account || {};
+      const used = credits.used ?? raw.usage ?? account.usageBalance ?? 0;
+      const limit = credits.total ?? raw.limit ?? account.limit ?? 0;
+      const remaining = credits.remaining ?? (limit - used);
+      const rate = raw.rate_limit?.requests || raw.rate?.requests || '--';
       container.innerHTML = `
         <div class="or-stats-grid">
           <div class="or-stat-card">
             <div class="or-stat-label">Usage (USD)</div>
-            <div class="or-stat-value">$${(usage.usage || 0).toFixed(2)}</div>
+            <div class="or-stat-value">$${Number(used).toFixed(2)}</div>
           </div>
           <div class="or-stat-card">
             <div class="or-stat-label">Limit</div>
-            <div class="or-stat-value">$${(usage.limit || 0).toFixed(2)}</div>
+            <div class="or-stat-value">$${Number(limit).toFixed(2)}</div>
           </div>
           <div class="or-stat-card">
             <div class="or-stat-label">Remaining</div>
-            <div class="or-stat-value">$${((usage.limit || 0) - (usage.usage || 0)).toFixed(2)}</div>
+            <div class="or-stat-value">$${Number(remaining).toFixed(2)}</div>
           </div>
           <div class="or-stat-card">
             <div class="or-stat-label">Rate Limit</div>
-            <div class="or-stat-value">${usage.rate_limit?.requests || '--'}/s</div>
+            <div class="or-stat-value">${typeof rate === 'number' ? rate + '/s' : rate}</div>
           </div>
         </div>`;
+
+      // Also update Get Started balance card if visible
+      showBalanceDisplay(raw);
     }
   } catch {
     // noop
@@ -954,7 +1126,8 @@ async function saveApiKey() {
     setTimeout(() => {
       closeConfigModal();
       fetchOpenRouterUsage();
-      navigateTo('openrouter');
+      // Also sync the Get Started card
+      initGetStartedCard();
     }, 1200);
   } else {
     showStatus(`❌ ${errorMsg}`, 'error');

package/canvas-template/index.html

@@ -63,40 +63,84 @@
 
         <!-- Section: Overview -->
         <section class="page-section active" id="section-overview">
-            <!-- How It Works Banner -->
-            <div class="how-it-works-banner">
-                <div class="hiw-header">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-                    <strong>How SmartMeter Works</strong>
+            <!-- Get Started / Analyze Card -->
+            <div class="get-started-card" id="getStartedCard">
+                <div class="gs-header">
+                    <div class="gs-header-left">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                        <div>
+                            <strong class="gs-title">Get Started — Connect OpenRouter</strong>
+                            <p class="gs-subtitle">Enter your API key to analyze usage, view your balance, and get cost-saving recommendations.</p>
+                        </div>
+                    </div>
                 </div>
-                <p class="hiw-desc">SmartMeter currently analyzes AI usage routed through <strong>OpenRouter</strong>. Connect your OpenRouter API key to unlock the full workflow:</p>
-                <div class="hiw-steps">
-                    <div class="hiw-step">
-                        <div class="hiw-step-num">1</div>
+
+                <!-- API Key Input Row -->
+                <div class="gs-key-section" id="gsKeySection">
+                    <div class="gs-key-row">
+                        <div class="gs-key-input-wrap">
+                            <label class="gs-key-label" for="gsApiKeyInput">OpenRouter API Key</label>
+                            <div class="gs-key-field">
+                                <input type="password" id="gsApiKeyInput" placeholder="sk-or-v1-..." class="form-input gs-input">
+                                <button class="btn btn-primary gs-validate-btn" id="gsValidateBtn" onclick="validateInlineApiKey()">Save &amp; Validate</button>
+                            </div>
+                            <small class="form-hint">Your key is stored locally and never shared. <a href="https://openrouter.ai/keys" target="_blank">Get a key →</a></small>
+                        </div>
+                    </div>
+                    <div id="gsKeyStatus" class="config-status"></div>
+                </div>
+
+                <!-- Balance Display (shown after validation) -->
+                <div class="gs-balance" id="gsBalance" style="display:none">
+                    <div class="gs-balance-grid">
+                        <div class="gs-balance-item">
+                            <span class="gs-balance-label">Balance</span>
+                            <span class="gs-balance-value" id="gsBalanceCredits">--</span>
+                        </div>
+                        <div class="gs-balance-item">
+                            <span class="gs-balance-label">Usage</span>
+                            <span class="gs-balance-value" id="gsBalanceUsage">--</span>
+                        </div>
+                        <div class="gs-balance-item">
+                            <span class="gs-balance-label">Remaining</span>
+                            <span class="gs-balance-value gs-balance-green" id="gsBalanceRemaining">--</span>
+                        </div>
+                        <div class="gs-balance-item">
+                            <span class="gs-balance-label">Rate Limit</span>
+                            <span class="gs-balance-value" id="gsBalanceRate">--</span>
+                        </div>
+                    </div>
+                    <div class="gs-connected-badge">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+                        <span>Connected</span>
+                        <button class="btn-link gs-change-key" onclick="showApiKeyInput()">Change key</button>
+                    </div>
+                </div>
+
+                <!-- 3-Step Flow -->
+                <div class="gs-steps">
+                    <div class="gs-step" id="gsStep1">
+                        <div class="gs-step-num">1</div>
                         <div>
-                            <div class="hiw-step-title">Analyze</div>
-                            <div class="hiw-step-desc">Parse your session logs to classify tasks, track costs, and break down model usage across all your OpenClaw agents.</div>
+                            <div class="gs-step-title">Analyze</div>
+                            <div class="gs-step-desc">Parse session logs to classify tasks, track costs, and break down model usage.</div>
                         </div>
                     </div>
-                    <div class="hiw-step">
-                        <div class="hiw-step-num">2</div>
+                    <div class="gs-step" id="gsStep2">
+                        <div class="gs-step-num">2</div>
                         <div>
-                            <div class="hiw-step-title">Evaluate</div>
-                            <div class="hiw-step-desc">Compare models side-by-side. See which models cost the most, which handle the most tasks, and where cheaper alternatives can save money without losing quality.</div>
+                            <div class="gs-step-title">Evaluate</div>
+                            <div class="gs-step-desc">Compare models side-by-side — see which cost the most and where cheaper alternatives save money.</div>
                         </div>
                     </div>
-                    <div class="hiw-step">
-                        <div class="hiw-step-num">3</div>
+                    <div class="gs-step" id="gsStep3">
+                        <div class="gs-step-num">3</div>
                         <div>
-                            <div class="hiw-step-title">Guide</div>
-                            <div class="hiw-step-desc">Get actionable recommendations — model switches, caching strategies, budget controls, and specialized agent configs — then apply them directly to your OpenClaw setup.</div>
+                            <div class="gs-step-title">Guide</div>
+                            <div class="gs-step-desc">Get actionable recommendations — model switches, caching strategies, and budget controls.</div>
                         </div>
                     </div>
                 </div>
-                <div class="hiw-note">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
-                    <span>Requires an <strong>OpenRouter API key</strong>. Go to <a href="#" onclick="navigateTo('openrouter'); return false;">OpenRouter settings</a> to connect your account.</span>
-                </div>
             </div>
 
             <!-- Info Banner -->

package/canvas-template/styles.css

@@ -252,45 +252,163 @@ a:hover { color: var(--accent-hover); }
 .alert-info p { color: var(--text-secondary); margin-top: 2px; }
 
 /* ===== How It Works Banner ===== */
-.how-it-works-banner {
+/* ===== Get Started Card ===== */
+.get-started-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 22px 24px;
+  padding: 24px;
   margin-bottom: 20px;
 }
-.hiw-header {
+.gs-header {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 15px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+.gs-header-left {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.gs-header-left svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.gs-title {
+  font-size: 16px;
   color: var(--text-primary);
-  margin-bottom: 10px;
+  display: block;
+  margin-bottom: 4px;
 }
-.hiw-desc {
+.gs-subtitle {
   font-size: 13px;
   color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+/* API Key Section */
+.gs-key-section {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px 20px;
+  margin-bottom: 18px;
+}
+.gs-key-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+.gs-key-input-wrap {
+  flex: 1;
+}
+.gs-key-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+.gs-key-field {
+  display: flex;
+  gap: 10px;
+}
+.gs-input {
+  flex: 1;
+  min-width: 0;
+}
+.gs-validate-btn {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Balance Display */
+.gs-balance {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px 20px;
+  margin-bottom: 18px;
+}
+.gs-balance-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.gs-balance-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.gs-balance-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .5px;
 }
-.hiw-desc strong {
+.gs-balance-value {
+  font-size: 18px;
+  font-weight: 700;
   color: var(--text-primary);
+  font-family: var(--font-mono);
+}
+.gs-balance-green {
+  color: var(--green);
+}
+.gs-connected-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--green);
 }
-.hiw-steps {
+.gs-change-key {
+  margin-left: 8px;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 400;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.gs-change-key:hover {
+  color: var(--accent);
+}
+.btn-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* 3-Step Flow */
+.gs-steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
-  margin-bottom: 14px;
 }
-.hiw-step {
+.gs-step {
   display: flex;
   gap: 12px;
   padding: 14px;
   background: var(--bg-surface);
   border-radius: var(--radius);
   border: 1px solid var(--border);
+  transition: border-color .2s;
+}
+.gs-step.gs-step-active {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
 }
-.hiw-step-num {
+.gs-step.gs-step-done {
+  border-color: var(--green);
+}
+.gs-step-num {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
@@ -303,40 +421,32 @@ a:hover { color: var(--accent-hover); }
   font-size: 13px;
   font-weight: 700;
 }
-.hiw-step-title {
+.gs-step-done .gs-step-num {
+  background: var(--green-subtle);
+  color: var(--green);
+}
+.gs-step-title {
   font-size: 13px;
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 4px;
 }
-.hiw-step-desc {
+.gs-step-desc {
   font-size: 12px;
   color: var(--text-muted);
   line-height: 1.5;
 }
-.hiw-note {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--text-muted);
-  padding: 10px 14px;
-  background: var(--amber-subtle);
-  border-radius: var(--radius-sm);
-  border: 1px solid rgba(245,158,11,.15);
-}
-.hiw-note strong {
-  color: var(--amber);
-}
-.hiw-note a {
-  color: var(--amber);
-  font-weight: 600;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.hiw-note svg {
-  flex-shrink: 0;
-  color: var(--amber);
+
+@media (max-width: 768px) {
+  .gs-steps {
+    grid-template-columns: 1fr;
+  }
+  .gs-balance-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .gs-key-field {
+    flex-direction: column;
+  }
 }
 
 /* ===== Model Rec Explainer ===== */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openclaw-smartmeter",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "AI cost optimization for OpenClaw - analyze usage and reduce costs by 48%",
   "main": "src/cli/index.js",
   "bin": {
@@ -54,4 +54,4 @@
     "fs-extra": "^11.2.0",
     "open": "^9.1.0"
   }
-}
+}