superlocalmemory 2.7.3 → 2.7.4

package/ui/js/feedback.js

@@ -0,0 +1,333 @@
+/**
+ * SuperLocalMemory V2 - Feedback Module (v2.7.4)
+ * Copyright (c) 2026 Varun Pratap Bhardwaj
+ * Licensed under MIT License
+ *
+ * Collects implicit and explicit feedback signals from dashboard
+ * interactions. All data stays 100% local.
+ *
+ * Signals:
+ *   thumbs_up    - User clicks thumbs up on a memory card
+ *   thumbs_down  - User clicks thumbs down on a memory card
+ *   pin          - User pins/bookmarks a memory
+ *   dwell_time   - Time spent viewing memory detail modal
+ *   search_click - User clicks a search result (positive for clicked)
+ */
+
+// Module state
+var feedbackState = {
+    lastSearchQuery: '',
+    modalOpenTime: null,
+    modalMemoryId: null,
+    searchResultIds: [],
+};
+
+/**
+ * Record explicit feedback (thumbs up/down, pin).
+ * Sends POST /api/feedback to backend.
+ */
+function recordFeedback(memoryId, feedbackType, query) {
+    if (!memoryId || !feedbackType) return;
+
+    fetch('/api/feedback', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            memory_id: memoryId,
+            feedback_type: feedbackType,
+            query: query || feedbackState.lastSearchQuery || '',
+        }),
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+        if (data.success) {
+            showFeedbackToast(feedbackType, memoryId);
+            refreshFeedbackStats();
+        }
+    })
+    .catch(function() {
+        // Silent failure — feedback should never break UI
+    });
+}
+
+/**
+ * Start tracking dwell time when a memory detail modal opens.
+ */
+function startDwellTracking(memoryId) {
+    feedbackState.modalOpenTime = Date.now();
+    feedbackState.modalMemoryId = memoryId;
+}
+
+/**
+ * Stop tracking and record dwell time when modal closes.
+ */
+function stopDwellTracking() {
+    if (!feedbackState.modalOpenTime || !feedbackState.modalMemoryId) return;
+
+    var dwellMs = Date.now() - feedbackState.modalOpenTime;
+    var dwellSeconds = dwellMs / 1000;
+    var memId = feedbackState.modalMemoryId;
+
+    feedbackState.modalOpenTime = null;
+    feedbackState.modalMemoryId = null;
+
+    // Only record if meaningful (>1s)
+    if (dwellSeconds < 1.0) return;
+
+    fetch('/api/feedback/dwell', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            memory_id: memId,
+            dwell_time: dwellSeconds,
+            query: feedbackState.lastSearchQuery || '',
+        }),
+    })
+    .then(function(r) { return r.json(); })
+    .catch(function() {
+        // Silent failure
+    });
+}
+
+/**
+ * Track which search results are displayed.
+ */
+function trackSearchResults(query, resultIds) {
+    feedbackState.lastSearchQuery = query;
+    feedbackState.searchResultIds = resultIds || [];
+}
+
+/**
+ * Create feedback buttons (thumbs up/down + pin) for a memory card.
+ * Returns a DOM element containing the buttons.
+ * Uses safe DOM methods (no innerHTML with user data).
+ */
+function createFeedbackButtons(memoryId, query) {
+    var container = document.createElement('div');
+    container.className = 'feedback-buttons d-flex gap-1 align-items-center';
+    container.setAttribute('role', 'group');
+    container.setAttribute('aria-label', 'Feedback for memory ' + memoryId);
+
+    // Thumbs up
+    var upBtn = document.createElement('button');
+    upBtn.className = 'btn btn-outline-success btn-sm feedback-btn';
+    var upIcon = document.createElement('i');
+    upIcon.className = 'bi bi-hand-thumbs-up';
+    upBtn.appendChild(upIcon);
+    upBtn.title = 'This memory was useful';
+    upBtn.setAttribute('aria-label', 'Mark as useful');
+    upBtn.onclick = function(e) {
+        e.stopPropagation();
+        recordFeedback(memoryId, 'thumbs_up', query);
+        upBtn.classList.remove('btn-outline-success');
+        upBtn.classList.add('btn-success');
+        upBtn.disabled = true;
+        downBtn.disabled = true;
+    };
+
+    // Thumbs down
+    var downBtn = document.createElement('button');
+    downBtn.className = 'btn btn-outline-danger btn-sm feedback-btn';
+    var downIcon = document.createElement('i');
+    downIcon.className = 'bi bi-hand-thumbs-down';
+    downBtn.appendChild(downIcon);
+    downBtn.title = 'Not useful';
+    downBtn.setAttribute('aria-label', 'Mark as not useful');
+    downBtn.onclick = function(e) {
+        e.stopPropagation();
+        recordFeedback(memoryId, 'thumbs_down', query);
+        downBtn.classList.remove('btn-outline-danger');
+        downBtn.classList.add('btn-danger');
+        upBtn.disabled = true;
+        downBtn.disabled = true;
+    };
+
+    // Pin/Bookmark
+    var pinBtn = document.createElement('button');
+    pinBtn.className = 'btn btn-outline-warning btn-sm feedback-btn';
+    var pinIcon = document.createElement('i');
+    pinIcon.className = 'bi bi-pin-angle';
+    pinBtn.appendChild(pinIcon);
+    pinBtn.title = 'Pin this memory';
+    pinBtn.setAttribute('aria-label', 'Pin memory');
+    pinBtn.onclick = function(e) {
+        e.stopPropagation();
+        recordFeedback(memoryId, 'pin', query);
+        pinBtn.classList.remove('btn-outline-warning');
+        pinBtn.classList.add('btn-warning');
+        pinBtn.disabled = true;
+    };
+
+    container.appendChild(upBtn);
+    container.appendChild(downBtn);
+    container.appendChild(pinBtn);
+    return container;
+}
+
+/**
+ * Show a small toast notification after feedback.
+ */
+function showFeedbackToast(type, memoryId) {
+    var messages = {
+        thumbs_up: 'Thanks! This helps improve future results.',
+        thumbs_down: 'Noted. Results will improve over time.',
+        pin: 'Memory pinned!',
+    };
+    var msg = messages[type] || 'Feedback recorded';
+
+    // Use existing showToast if available
+    if (typeof showToast === 'function') {
+        showToast(msg, 'success');
+    }
+}
+
+/**
+ * Fetch and render feedback stats (progress bar, signal count).
+ */
+function refreshFeedbackStats() {
+    fetch('/api/feedback/stats')
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+        renderFeedbackProgress(data);
+    })
+    .catch(function() {});
+}
+
+/**
+ * Render the feedback progress bar using safe DOM methods.
+ */
+function renderFeedbackProgress(stats) {
+    var container = document.getElementById('feedback-progress');
+    if (!container) return;
+
+    var total = stats.total_signals || 0;
+    var phase = stats.ranking_phase || 'baseline';
+    var progress = stats.progress || 0;
+    var target = stats.target || 200;
+
+    var phaseLabels = {
+        baseline: 'Baseline (collecting data)',
+        rule_based: 'Rule-Based (learning your preferences)',
+        ml_model: 'ML-Powered (fully personalized)',
+    };
+    var phaseColors = {
+        baseline: 'bg-secondary',
+        rule_based: 'bg-info',
+        ml_model: 'bg-success',
+    };
+
+    // Clear container
+    while (container.firstChild) container.removeChild(container.firstChild);
+
+    // Header row
+    var headerRow = document.createElement('div');
+    headerRow.className = 'd-flex justify-content-between align-items-center mb-1';
+
+    var label = document.createElement('small');
+    label.className = 'text-muted';
+    var icon = document.createElement('i');
+    icon.className = 'bi bi-graph-up me-1';
+    label.appendChild(icon);
+    label.appendChild(document.createTextNode('Learning Progress'));
+
+    var badge = document.createElement('span');
+    badge.className = 'badge ' + (phaseColors[phase] || 'bg-secondary');
+    badge.textContent = phaseLabels[phase] || phase;
+
+    headerRow.appendChild(label);
+    headerRow.appendChild(badge);
+    container.appendChild(headerRow);
+
+    // Progress bar
+    var progressOuter = document.createElement('div');
+    progressOuter.className = 'progress';
+    progressOuter.style.height = '8px';
+
+    var progressBar = document.createElement('div');
+    progressBar.className = 'progress-bar ' + (phaseColors[phase] || 'bg-secondary');
+    progressBar.setAttribute('role', 'progressbar');
+    progressBar.style.width = progress + '%';
+    progressBar.setAttribute('aria-valuenow', String(total));
+    progressBar.setAttribute('aria-valuemin', '0');
+    progressBar.setAttribute('aria-valuemax', String(target));
+
+    progressOuter.appendChild(progressBar);
+    container.appendChild(progressOuter);
+
+    // Count text
+    var countText = document.createElement('small');
+    countText.className = 'text-muted';
+    countText.textContent = total + '/' + target + ' signals';
+    container.appendChild(countText);
+}
+
+/**
+ * Create the privacy notice banner using safe DOM methods.
+ */
+function createPrivacyNotice() {
+    var container = document.getElementById('privacy-notice');
+    if (!container) return;
+
+    var alert = document.createElement('div');
+    alert.className = 'alert alert-light border d-flex align-items-center py-2 mb-3';
+    alert.setAttribute('role', 'alert');
+
+    var lockIcon = document.createElement('i');
+    lockIcon.className = 'bi bi-shield-lock me-2 text-success';
+
+    var text = document.createElement('small');
+    text.appendChild(document.createTextNode('Learning is 100% local. Your behavioral data never leaves this machine. '));
+
+    var link = document.createElement('a');
+    link.href = '#';
+    link.className = 'ms-1';
+    link.textContent = 'Learn more';
+    link.onclick = function(e) {
+        e.preventDefault();
+        showPrivacyDetails();
+    };
+    text.appendChild(link);
+
+    alert.appendChild(lockIcon);
+    alert.appendChild(text);
+    container.appendChild(alert);
+}
+
+/**
+ * Show privacy details in an alert (safe, no raw HTML injection).
+ */
+function showPrivacyDetails() {
+    var info = 'What data is collected:\n' +
+        '- Which memories you find useful (thumbs up/down)\n' +
+        '- Time spent viewing memory details\n' +
+        '- Search patterns (queries are hashed, never stored as raw text)\n\n' +
+        'Where it is stored:\n' +
+        '~/.claude-memory/learning.db (local SQLite file)\n\n' +
+        'How to delete it:\n' +
+        'Use "Reset Learning Data" in Settings, or run:\n' +
+        'rm ~/.claude-memory/learning.db';
+    alert(info);
+}
+
+/**
+ * Reset all learning data.
+ */
+function resetLearningData() {
+    if (!confirm('Reset all learning data? Your memories will be preserved.')) return;
+
+    fetch('/api/learning/reset', {method: 'POST'})
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+        if (data.success) {
+            if (typeof showToast === 'function') showToast('Learning data reset', 'success');
+            refreshFeedbackStats();
+        }
+    })
+    .catch(function() {});
+}
+
+// Initialize: load stats on page ready
+document.addEventListener('DOMContentLoaded', function() {
+    createPrivacyNotice();
+    refreshFeedbackStats();
+});

package/ui/js/learning.js

@@ -24,12 +24,129 @@ function renderLearningStatus(data) {
     renderFeedbackCount(data.stats);
     renderEngagementHealth(data.engagement);
     renderProgressBar(data.stats ? data.stats.feedback_count : 0);
+    renderWhatWeLearned(data);
     renderTechPreferences(data.tech_preferences || []);
     renderWorkflowPatterns(data.workflow_patterns || []);
     renderSourceQuality(data.source_scores || {});
     renderPrivacyStats(data.stats);
 }
 
+function renderWhatWeLearned(data) {
+    var container = document.getElementById('what-we-learned-content');
+    var profileBadge = document.getElementById('learned-profile-badge');
+    if (!container) return;
+    container.textContent = '';
+
+    // Show active profile
+    if (profileBadge && data.stats && data.stats.active_profile) {
+        profileBadge.textContent = data.stats.active_profile;
+    }
+
+    var insights = [];
+
+    // Collect tech preference insights
+    var techPrefs = data.tech_preferences || [];
+    var highConfTech = techPrefs.filter(function(p) { return p.confidence >= 0.6; });
+    if (highConfTech.length > 0) {
+        var techNames = highConfTech.map(function(p) { return p.value; }).slice(0, 5);
+        insights.push({
+            icon: 'bi-cpu',
+            color: 'text-primary',
+            text: 'You prefer: ' + techNames.join(', '),
+            detail: highConfTech.length + ' tech preferences learned',
+        });
+    }
+
+    // Collect workflow insights
+    var workflows = data.workflow_patterns || [];
+    var sequences = workflows.filter(function(w) { return w.type === 'sequence'; });
+    var temporal = workflows.filter(function(w) { return w.type === 'temporal'; });
+    if (sequences.length > 0) {
+        insights.push({
+            icon: 'bi-diagram-3',
+            color: 'text-info',
+            text: sequences.length + ' workflow sequence' + (sequences.length > 1 ? 's' : '') + ' detected',
+            detail: 'Common patterns in how you work',
+        });
+    }
+    if (temporal.length > 0) {
+        insights.push({
+            icon: 'bi-clock',
+            color: 'text-warning',
+            text: temporal.length + ' time-based pattern' + (temporal.length > 1 ? 's' : '') + ' found',
+            detail: 'When you tend to work on what',
+        });
+    }
+
+    // Source quality insights
+    var sources = data.source_scores || {};
+    var sourceCount = Object.keys(sources).length;
+    if (sourceCount > 0) {
+        var bestSource = Object.entries(sources).sort(function(a, b) { return b[1] - a[1]; })[0];
+        insights.push({
+            icon: 'bi-trophy',
+            color: 'text-success',
+            text: 'Best source: ' + bestSource[0] + ' (' + Math.round(bestSource[1] * 100) + '% quality)',
+            detail: sourceCount + ' sources tracked',
+        });
+    }
+
+    // Feedback volume insight
+    var feedbackCount = (data.stats && data.stats.feedback_count) || 0;
+    if (feedbackCount > 0) {
+        var phase = data.ranking_phase || 'baseline';
+        var phaseLabel = {baseline: 'collecting data', rule_based: 'learning your preferences', ml_model: 'fully personalized'}[phase] || phase;
+        insights.push({
+            icon: 'bi-graph-up',
+            color: 'text-success',
+            text: feedbackCount + ' feedback signals collected',
+            detail: 'Currently ' + phaseLabel,
+        });
+    }
+
+    // Render insights
+    if (insights.length === 0) {
+        var empty = document.createElement('div');
+        empty.className = 'text-center text-muted py-3';
+        var emptyIcon = document.createElement('i');
+        emptyIcon.className = 'bi bi-lightbulb';
+        emptyIcon.style.fontSize = '2rem';
+        empty.appendChild(emptyIcon);
+        var emptyText = document.createElement('p');
+        emptyText.className = 'mt-2 mb-0 small';
+        emptyText.textContent = 'Start using recall and giving feedback. SuperLocalMemory will learn your preferences automatically.';
+        empty.appendChild(emptyText);
+        container.appendChild(empty);
+        return;
+    }
+
+    for (var i = 0; i < insights.length; i++) {
+        var insight = insights[i];
+        var row = document.createElement('div');
+        row.className = 'd-flex align-items-start mb-2 p-2 rounded';
+        row.style.backgroundColor = 'var(--bs-body-bg)';
+
+        var icon = document.createElement('i');
+        icon.className = 'bi ' + insight.icon + ' ' + insight.color + ' me-3';
+        icon.style.fontSize = '1.3rem';
+        icon.style.marginTop = '2px';
+
+        var textDiv = document.createElement('div');
+        var mainText = document.createElement('div');
+        mainText.className = 'fw-semibold';
+        mainText.textContent = insight.text;
+        var detailText = document.createElement('small');
+        detailText.className = 'text-muted';
+        detailText.textContent = insight.detail;
+        textDiv.appendChild(mainText);
+        textDiv.appendChild(detailText);
+
+        row.appendChild(icon);
+        row.appendChild(textDiv);
+        container.appendChild(row);
+    }
+}
+
 function renderPhase(data) {
     var phaseEl = document.getElementById('learning-phase');
     var phaseDetail = document.getElementById('learning-phase-detail');

package/ui/js/modal.js

@@ -142,9 +142,26 @@ function openMemoryDetail(mem) {
         body.appendChild(actionsDiv);
     }
 
+    // v2.7.4: Add feedback buttons to modal body
+    if (typeof createFeedbackButtons === 'function' && mem && mem.id) {
+        var feedbackDiv = document.createElement('div');
+        feedbackDiv.className = 'mt-3 pt-2 border-top';
+        var feedbackLabel = document.createElement('small');
+        feedbackLabel.className = 'text-muted d-block mb-1';
+        feedbackLabel.textContent = 'Was this memory useful?';
+        feedbackDiv.appendChild(feedbackLabel);
+        feedbackDiv.appendChild(createFeedbackButtons(mem.id));
+        body.appendChild(feedbackDiv);
+    }
+
     var modalEl = document.getElementById('memoryDetailModal');
     var modal = new bootstrap.Modal(modalEl);
 
+    // v2.7.4: Start dwell time tracking
+    if (typeof startDwellTracking === 'function' && mem && mem.id) {
+        startDwellTracking(mem.id);
+    }
+
     // Focus first interactive element when modal opens
     modalEl.addEventListener('shown.bs.modal', function() {
         const firstButton = modalEl.querySelector('button, a[href]');
@@ -153,8 +170,12 @@ function openMemoryDetail(mem) {
         }
     }, { once: true });
 
-    // Return focus when modal closes
+    // Return focus when modal closes + stop dwell tracking
     modalEl.addEventListener('hidden.bs.modal', function() {
+        // v2.7.4: Stop dwell time tracking
+        if (typeof stopDwellTracking === 'function') {
+            stopDwellTracking();
+        }
         if (window.lastFocusedElement && typeof window.lastFocusedElement.focus === 'function') {
             window.lastFocusedElement.focus();
             window.lastFocusedElement = null;

package/ui/js/profiles.js

@@ -190,6 +190,14 @@ async function switchProfile(profileName) {
             loadStats();
             loadGraph();
             loadProfilesTable();
+            // v2.7.4: Reload ALL tabs for new profile
+            if (typeof loadLearning === 'function') loadLearning();
+            if (typeof refreshFeedbackStats === 'function') refreshFeedbackStats();
+            if (typeof loadLearningDataStats === 'function') loadLearningDataStats();
+            if (typeof loadAgents === 'function') loadAgents();
+            if (typeof loadMemories === 'function') loadMemories();
+            if (typeof loadTimeline === 'function') loadTimeline();
+            if (typeof loadEvents === 'function') loadEvents();
             var activeTab = document.querySelector('#mainTabs .nav-link.active');
             if (activeTab) activeTab.click();
         } else {

package/ui/js/settings.js

@@ -5,6 +5,61 @@ async function loadSettings() {
     loadProfilesTable();
     loadBackupStatus();
     loadBackupList();
+    loadLearningDataStats();
+}
+
+async function loadLearningDataStats() {
+    try {
+        var response = await fetch('/api/feedback/stats');
+        var data = await response.json();
+        var container = document.getElementById('learning-data-stats');
+        if (!container) return;
+
+        container.textContent = '';
+        var row = document.createElement('div');
+        row.className = 'row g-2';
+
+        var stats = [
+            { value: String(data.total_signals || 0), label: 'Feedback Signals' },
+            { value: data.ranking_phase || 'baseline', label: 'Ranking Phase' },
+            { value: Math.round(data.progress || 0) + '%', label: 'ML Progress' },
+        ];
+
+        stats.forEach(function(s) {
+            var col = document.createElement('div');
+            col.className = 'col-4';
+            var stat = document.createElement('div');
+            stat.className = 'backup-stat';
+            var val = document.createElement('div');
+            val.className = 'value';
+            val.textContent = s.value;
+            var lbl = document.createElement('div');
+            lbl.className = 'label';
+            lbl.textContent = s.label;
+            stat.appendChild(val);
+            stat.appendChild(lbl);
+            col.appendChild(stat);
+            row.appendChild(col);
+        });
+        container.appendChild(row);
+    } catch (error) {
+        // Silent — learning stats are optional
+    }
+}
+
+async function backupLearningDb() {
+    try {
+        var response = await fetch('/api/learning/backup', { method: 'POST' });
+        var data = await response.json();
+        if (data.success) {
+            showToast('Learning DB backed up: ' + (data.filename || 'learning.db.bak'));
+        } else {
+            showToast('Backup created at ~/.claude-memory/learning.db.bak');
+        }
+    } catch (error) {
+        // Fallback: just tell user the manual path
+        showToast('Manual backup: cp ~/.claude-memory/learning.db ~/.claude-memory/learning.db.bak');
+    }
 }
 
 async function loadBackupStatus() {
@@ -92,7 +147,9 @@ async function saveBackupConfig() {
             })
         });
         var data = await response.json();
-        renderBackupStatus(data);
+        // API wraps status inside data.status on configure response
+        var status = data.status || data;
+        renderBackupStatus(status);
         showToast('Backup settings saved');
     } catch (error) {
         console.error('Error saving backup config:', error);