openclaw-smartmeter 0.5.1 → 0.5.2

package/canvas-template/app.js

@@ -123,6 +123,7 @@ function renderAll() {
   safe(updateModelDetails);
   safe(updateLastUpdated);
   safe(checkCostDataNotice);
+  safe(() => populateStepPanel(activeStep));
 }
 
 /* ─── KPIs ─── */
@@ -991,6 +992,228 @@ async function initGetStartedCard() {
   }
 }
 
+/* ─── Step Panels (Analyze / Evaluate / Guide) ─── */
+let activeStep = 1;
+
+function activateStep(n) {
+  activeStep = n;
+  // Toggle active class on step elements
+  for (let i = 1; i <= 3; i++) {
+    const step = document.getElementById('gsStep' + i);
+    if (step) step.classList.toggle('gs-step-active', i === n);
+  }
+  // Show/hide panels
+  for (let i = 1; i <= 3; i++) {
+    const panel = document.getElementById('gsPanel' + i);
+    if (panel) panel.style.display = (i === n) ? '' : 'none';
+  }
+  // Populate panel content
+  populateStepPanel(n);
+  // Update contextual info banner
+  updateContextualBanner(n);
+}
+
+function populateStepPanel(n) {
+  const d = analysisData;
+  if (n === 1) {
+    const panel = document.getElementById('gsPanel1');
+    if (!panel) return;
+    if (!d) {
+      panel.innerHTML = '<p class="panel-empty">Run an analysis to see your usage summary here.</p>';
+      return;
+    }
+    const days = d.days_analyzed || 0;
+    const tasks = d.total_tasks || 0;
+    const current = d.monthly_projected_current || 0;
+    const optimized = d.monthly_projected_optimized || 0;
+    const models = (d.model_breakdown || []).length;
+    panel.innerHTML = `
+      <h4>Analysis Summary</h4>
+      <p>${days} day${days !== 1 ? 's' : ''} analyzed &middot; ${tasks} task${tasks !== 1 ? 's' : ''} &middot; ${models} model${models !== 1 ? 's' : ''} detected</p>
+      <table>
+        <tr><td>Projected Monthly Cost</td><td style="text-align:right;font-weight:600">$${current.toFixed(2)}</td></tr>
+        <tr><td>Optimized Projection</td><td style="text-align:right;font-weight:600;color:var(--green)">$${optimized.toFixed(2)}</td></tr>
+        <tr><td>Potential Savings</td><td style="text-align:right;font-weight:600;color:var(--accent)">$${(current - optimized).toFixed(2)}</td></tr>
+      </table>`;
+  } else if (n === 2) {
+    const panel = document.getElementById('gsPanel2');
+    if (!panel) return;
+    const models = d ? (d.model_breakdown || []) : [];
+    if (models.length === 0) {
+      panel.innerHTML = '<p class="panel-empty">No model data available yet. Run an analysis first.</p>';
+      return;
+    }
+    const totalCost = models.reduce((s, m) => s + m.cost, 0);
+    panel.innerHTML = `
+      <h4>Model Cost Breakdown</h4>
+      <table>
+        <thead><tr>
+          <th>Model</th><th>Tasks</th><th>Cost</th><th>Avg/Task</th><th>Share</th>
+        </tr></thead>
+        <tbody>
+          ${models.map(m => {
+            const share = totalCost > 0 ? ((m.cost / totalCost) * 100).toFixed(1) : '0.0';
+            return `<tr>
+              <td>${escHtml(m.model)}</td>
+              <td>${m.tasks}</td>
+              <td>$${m.cost.toFixed(2)}</td>
+              <td>$${m.avg_cost_per_task.toFixed(3)}</td>
+              <td>${share}%</td>
+            </tr>`;
+          }).join('')}
+        </tbody>
+      </table>`;
+  } else if (n === 3) {
+    const panel = document.getElementById('gsPanel3');
+    if (!panel) return;
+    const recs = d ? (d.recommendations || []) : [];
+    if (recs.length === 0) {
+      panel.innerHTML = '<p class="panel-empty">No recommendations available yet. Run an analysis first.</p>';
+      return;
+    }
+    panel.innerHTML = `
+      <h4>Recommendations</h4>
+      <p>Toggle on the optimizations you want to activate, then hit Apply.</p>
+      <div class="gs-rec-list">
+        ${recs.map((r, i) => {
+          const impactClass = (r.impact || '').toLowerCase().includes('high') ? 'high'
+            : (r.impact || '').toLowerCase().includes('medium') ? 'medium' : 'low';
+          const checked = editedRecommendations[i] && editedRecommendations[i].selected ? 'checked' : '';
+          return `<label class="gs-rec-row" data-index="${i}">
+            <input type="checkbox" class="gs-rec-toggle" ${checked} onchange="toggleGuideRec(${i}, this.checked)">
+            <div class="gs-rec-body">
+              <div class="gs-rec-header">
+                <span class="rec-title">${escHtml(r.title)}</span>
+                ${r.impact ? `<span class="rec-impact ${impactClass}">${escHtml(r.impact)}</span>` : ''}
+              </div>
+              <div class="rec-desc">${escHtml(r.description)}</div>
+            </div>
+          </label>`;
+        }).join('')}
+      </div>
+      <div class="gs-rec-actions">
+        <button class="btn btn-primary" onclick="applyGuideRecommendations()">Apply Selected</button>
+        <span class="gs-rec-count" id="gsRecCount">${Object.values(editedRecommendations).filter(v => v.selected).length} selected</span>
+      </div>`;
+  }
+}
+
+function updateContextualBanner(n) {
+  const notice = document.getElementById('costDataNotice');
+  const content = document.getElementById('costDataNoticeContent');
+  if (!notice || !content) return;
+
+  const messages = {
+    1: {
+      title: 'About Cost Tracking',
+      text: 'Your OpenRouter API responses may not include cost data. SmartMeter still optimizes based on token usage.'
+    },
+    2: {
+      title: 'Understanding Model Costs',
+      text: 'Costs are based on token usage reported by OpenRouter. Compare models to find cheaper alternatives for similar tasks.'
+    },
+    3: {
+      title: 'Applying Recommendations',
+      text: 'Select recommendations below to apply them. Changes update your OpenClaw configuration for optimized model routing.'
+    }
+  };
+
+  const msg = messages[n] || messages[1];
+  const d = analysisData;
+  const hasCostData = d && (d.monthly_projected_current || 0) > 0;
+
+  // Show banner contextually: always for step 2/3 if data exists, or step 1 if no cost data
+  if (n === 1 && hasCostData) {
+    notice.style.display = 'none';
+  } else {
+    content.innerHTML = `<strong>${msg.title}</strong><p>${msg.text}</p>`;
+    notice.style.display = 'flex';
+  }
+}
+
+/* ─── Guide Panel Actions ─── */
+function toggleGuideRec(i, on) {
+  if (!editedRecommendations[i]) editedRecommendations[i] = {};
+  editedRecommendations[i].selected = on;
+  // Update count
+  const count = Object.values(editedRecommendations).filter(v => v.selected).length;
+  const el = document.getElementById('gsRecCount');
+  if (el) el.textContent = count + ' selected';
+  // Sync main recommendation cards if they exist
+  const card = document.querySelector(`.rec-card[data-index="${i}"]`);
+  if (card) card.classList.toggle('selected', on);
+}
+
+function applyGuideRecommendations() {
+  const selected = Object.entries(editedRecommendations)
+    .filter(([_, v]) => v.selected)
+    .map(([i]) => parseInt(i));
+
+  if (selected.length === 0) {
+    showToast('Toggle at least one recommendation to apply');
+    return;
+  }
+
+  // Build summary list for the modal
+  const recs = analysisData ? (analysisData.recommendations || []) : [];
+  const listEl = document.getElementById('applyModalList');
+  if (listEl) {
+    listEl.innerHTML = selected.map(i => {
+      const r = recs[i];
+      if (!r) return '';
+      const impactClass = (r.impact || '').toLowerCase().includes('high') ? 'high'
+        : (r.impact || '').toLowerCase().includes('medium') ? 'medium' : 'low';
+      return `<div class="apply-modal-item">
+        <span class="apply-modal-dot ${impactClass}"></span>
+        <span>${escHtml(r.title)}</span>
+        ${r.impact ? `<span class="rec-impact ${impactClass}">${escHtml(r.impact)}</span>` : ''}
+      </div>`;
+    }).join('');
+  }
+
+  // Show modal
+  const modal = document.getElementById('applyModal');
+  if (modal) modal.style.display = 'flex';
+}
+
+function closeApplyModal() {
+  const modal = document.getElementById('applyModal');
+  if (modal) modal.style.display = 'none';
+}
+
+async function confirmApplyRecommendations() {
+  const selected = Object.entries(editedRecommendations)
+    .filter(([_, v]) => v.selected)
+    .map(([i]) => parseInt(i));
+
+  const btn = document.getElementById('applyModalConfirmBtn');
+  if (btn) { btn.disabled = true; btn.textContent = 'Applying…'; }
+
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/apply`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ confirm: true })
+    });
+    const json = await res.json();
+    if (json.success) {
+      closeApplyModal();
+      showToast(`✅ ${selected.length} optimization(s) applied!`);
+      selected.forEach(i => {
+        if (editedRecommendations[i]) editedRecommendations[i].selected = false;
+      });
+      populateStepPanel(3);
+      updateRecommendations();
+    } else {
+      showToast(`Error: ${json.error || 'Apply failed'}`);
+    }
+  } catch (err) {
+    showToast(`Network error: ${err.message}`);
+  } finally {
+    if (btn) { btn.disabled = false; btn.textContent = 'Apply Now'; }
+  }
+}
+
 /* ─── OpenRouter Integration ─── */
 async function checkOpenRouterConfig() {
   try {
@@ -1270,16 +1493,8 @@ async function refreshDashboard() {
 
 /* ─── Cost Data Notice ─── */
 function checkCostDataNotice() {
-  const d = analysisData;
-  if (!d) return;
-  const hasCostData = (d.monthly_projected_current || 0) > 0;
-  const notice = document.getElementById('costDataNotice');
-  if (notice) {
-    // Only show when cost data is truly missing — keep hidden otherwise
-    if (!hasCostData) {
-      notice.style.display = 'flex';
-    }
-  }
+  // Delegate to contextual banner system
+  updateContextualBanner(activeStep);
 }
 
 /* ─── Helpers ─── */

package/canvas-template/index.html

@@ -119,21 +119,21 @@
 
                 <!-- 3-Step Flow -->
                 <div class="gs-steps">
-                    <div class="gs-step" id="gsStep1">
+                    <div class="gs-step gs-step-active" id="gsStep1" onclick="activateStep(1)">
                         <div class="gs-step-num">1</div>
                         <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="gs-step" id="gsStep2">
+                    <div class="gs-step" id="gsStep2" onclick="activateStep(2)">
                         <div class="gs-step-num">2</div>
                         <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="gs-step" id="gsStep3">
+                    <div class="gs-step" id="gsStep3" onclick="activateStep(3)">
                         <div class="gs-step-num">3</div>
                         <div>
                             <div class="gs-step-title">Guide</div>
@@ -141,12 +141,23 @@
                         </div>
                     </div>
                 </div>
+
+                <!-- Step Detail Panels -->
+                <div class="gs-step-panel" id="gsPanel1">
+                    <!-- Analyze: shown by default with analysis summary -->
+                </div>
+                <div class="gs-step-panel" id="gsPanel2" style="display:none">
+                    <!-- Evaluate: model cost breakdown table -->
+                </div>
+                <div class="gs-step-panel" id="gsPanel3" style="display:none">
+                    <!-- Guide: top recommendations -->
+                </div>
             </div>
 
-            <!-- Info Banner -->
+            <!-- Contextual Info Banner -->
             <div class="alert alert-info" id="costDataNotice" style="display:none;">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
-                <div>
+                <div id="costDataNoticeContent">
                     <strong>About Cost Tracking</strong>
                     <p>Your OpenRouter API responses may not include cost data. SmartMeter still optimizes based on token usage.</p>
                 </div>
@@ -160,7 +171,7 @@
                     <div class="kpi-sub" id="savingsPercentage">--</div>
                 </div>
                 <div class="kpi-card">
-                    <div class="kpi-label">Current Cost</div>
+                    <div class="kpi-label">Projected Monthly Cost</div>
                     <div class="kpi-value" id="currentCost">$0.00<small>/mo</small></div>
                 </div>
                 <div class="kpi-card kpi-success">
@@ -402,6 +413,31 @@
         </div>
     </div>
 
+    <!-- Apply Recommendations Modal -->
+    <div id="applyModal" class="modal-overlay" style="display:none">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>Apply Optimizations</h3>
+                <button class="btn-icon modal-close" onclick="closeApplyModal()">✕</button>
+            </div>
+            <div class="modal-body">
+                <p class="modal-desc">The following recommendations will be applied to your OpenClaw configuration at <code>~/.openclaw/openclaw.json</code>.</p>
+                <div id="applyModalList" class="apply-modal-list"></div>
+                <div class="apply-revert-info">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                    <div>
+                        <strong>Easy to undo</strong>
+                        <p>To revert, run <code>smartmeter reset</code> in your terminal, or edit <code>~/.openclaw/openclaw.json</code> directly. You can also toggle individual recommendations off here and re-apply.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-ghost" onclick="closeApplyModal()">Cancel</button>
+                <button class="btn btn-primary" id="applyModalConfirmBtn" onclick="confirmApplyRecommendations()">Apply Now</button>
+            </div>
+        </div>
+    </div>
+
     <!-- Preview Modal -->
     <div id="previewModal" class="modal-overlay" style="display:none">
         <div class="modal modal-lg">

package/canvas-template/styles.css

@@ -399,7 +399,12 @@ a:hover { color: var(--accent-hover); }
   background: var(--bg-surface);
   border-radius: var(--radius);
   border: 1px solid var(--border);
-  transition: border-color .2s;
+  transition: border-color .2s, background .2s;
+  cursor: pointer;
+}
+.gs-step:hover {
+  border-color: var(--border-light);
+  background: var(--bg-card-hover);
 }
 .gs-step.gs-step-active {
   border-color: var(--accent);
@@ -437,6 +442,167 @@ a:hover { color: var(--accent-hover); }
   line-height: 1.5;
 }
 
+/* Step detail panels */
+.gs-step-panel {
+  margin-top: 16px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  animation: fadeIn .25s ease;
+}
+.gs-step-panel h4 {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+}
+.gs-step-panel p {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 12px 0;
+  line-height: 1.5;
+}
+.gs-step-panel table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.gs-step-panel th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-muted);
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+.gs-step-panel td {
+  padding: 8px 10px;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
+}
+.gs-step-panel tr:last-child td {
+  border-bottom: none;
+}
+.gs-step-panel .panel-empty {
+  color: var(--text-muted);
+  font-style: italic;
+  font-size: 13px;
+}
+.gs-step-panel .rec-item {
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
+}
+.gs-step-panel .rec-item:last-child {
+  border-bottom: none;
+}
+.gs-step-panel .rec-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+.gs-step-panel .rec-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.gs-step-panel .rec-impact {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  margin-top: 4px;
+}
+.gs-step-panel .rec-impact.high {
+  background: var(--green-subtle);
+  color: var(--green);
+}
+.gs-step-panel .rec-impact.medium {
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+.gs-step-panel .rec-impact.low {
+  background: rgba(255,255,255,0.06);
+  color: var(--text-muted);
+}
+
+/* Guide panel – recommendation list */
+.gs-rec-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.gs-rec-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background .15s;
+}
+.gs-rec-row:hover {
+  background: rgba(255,255,255,0.03);
+}
+.gs-rec-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 38px;
+  min-width: 38px;
+  height: 22px;
+  border-radius: 11px;
+  background: var(--border);
+  position: relative;
+  cursor: pointer;
+  transition: background .2s;
+  margin-top: 2px;
+}
+.gs-rec-toggle::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  transition: transform .2s, background .2s;
+}
+.gs-rec-toggle:checked {
+  background: var(--accent);
+}
+.gs-rec-toggle:checked::after {
+  transform: translateX(16px);
+  background: #fff;
+}
+.gs-rec-body {
+  flex: 1;
+  min-width: 0;
+}
+.gs-rec-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+}
+.gs-rec-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.gs-rec-count {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
 @media (max-width: 768px) {
   .gs-steps {
     grid-template-columns: 1fr;
@@ -924,6 +1090,67 @@ a:hover { color: var(--accent-hover); }
   padding: 12px 24px 20px;
 }
 
+/* Apply Modal */
+.apply-modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.apply-modal-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  color: var(--text-primary);
+}
+.apply-modal-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.apply-modal-dot.high { background: var(--green); }
+.apply-modal-dot.medium { background: var(--accent); }
+.apply-modal-dot.low { background: var(--text-muted); }
+.apply-revert-info {
+  display: flex;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--accent-subtle);
+  border: 1px solid rgba(99,102,241,.2);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.apply-revert-info svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.apply-revert-info strong {
+  display: block;
+  color: var(--text-primary);
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+.apply-revert-info p {
+  margin: 0;
+}
+.apply-revert-info code {
+  background: rgba(255,255,255,.06);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
 /* Form */
 .form-label {
   display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openclaw-smartmeter",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "AI cost optimization for OpenClaw - analyze usage and reduce costs by 48%",
   "main": "src/cli/index.js",
   "bin": {