superlocalmemory 2.4.2 → 2.5.1

package/ui/js/graph.js

@@ -0,0 +1,32 @@
+// SuperLocalMemory V2 - Knowledge Graph (D3.js force-directed)
+// Depends on: core.js, modal.js (openMemoryDetail)
+
+var graphData = { nodes: [], links: [] };
+
+async function loadGraph() {
+    var maxNodes = document.getElementById('graph-max-nodes').value;
+    try {
+        var response = await fetch('/api/graph?max_nodes=' + maxNodes);
+        graphData = await response.json();
+        renderGraph(graphData);
+    } catch (error) {
+        console.error('Error loading graph:', error);
+    }
+}
+
+function renderGraph(data) {
+    var container = document.getElementById('graph-container');
+    container.textContent = '';
+    var width = container.clientWidth || 1200;
+    var height = 600;
+    var svg = d3.select('#graph-container').append('svg').attr('width', width).attr('height', height);
+    var tooltip = d3.select('body').append('div').attr('class', 'tooltip-custom').style('opacity', 0);
+    var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+    var simulation = d3.forceSimulation(data.nodes).force('link', d3.forceLink(data.links).id(function(d) { return d.id; }).distance(100)).force('charge', d3.forceManyBody().strength(-200)).force('center', d3.forceCenter(width / 2, height / 2)).force('collision', d3.forceCollide().radius(20));
+    var link = svg.append('g').selectAll('line').data(data.links).enter().append('line').attr('class', 'link').attr('stroke-width', function(d) { return Math.sqrt(d.weight * 2); });
+    var node = svg.append('g').selectAll('circle').data(data.nodes).enter().append('circle').attr('class', 'node').attr('r', function(d) { return 5 + (d.importance || 5); }).attr('fill', function(d) { return colorScale(d.cluster_id || 0); }).call(d3.drag().on('start', dragStarted).on('drag', dragged).on('end', dragEnded)).on('mouseover', function(event, d) { tooltip.transition().duration(200).style('opacity', .9); var label = d.category || d.project_name || 'Memory #' + d.id; tooltip.text(label + ': ' + (d.content_preview || d.summary || 'No content')).style('left', (event.pageX + 10) + 'px').style('top', (event.pageY - 28) + 'px'); }).on('mouseout', function() { tooltip.transition().duration(500).style('opacity', 0); }).on('click', function(event, d) { openMemoryDetail(d); });
+    simulation.on('tick', function() { link.attr('x1', function(d) { return d.source.x; }).attr('y1', function(d) { return d.source.y; }).attr('x2', function(d) { return d.target.x; }).attr('y2', function(d) { return d.target.y; }); node.attr('cx', function(d) { return d.x; }).attr('cy', function(d) { return d.y; }); });
+    function dragStarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }
+    function dragged(event, d) { d.fx = event.x; d.fy = event.y; }
+    function dragEnded(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }
+}

package/ui/js/init.js

@@ -0,0 +1,31 @@
+// SuperLocalMemory V2 - Event Listener Wiring
+// Loads LAST — after all module scripts. Connects UI events to module functions.
+
+document.getElementById('memories-tab').addEventListener('shown.bs.tab', loadMemories);
+document.getElementById('clusters-tab').addEventListener('shown.bs.tab', loadClusters);
+document.getElementById('patterns-tab').addEventListener('shown.bs.tab', loadPatterns);
+document.getElementById('timeline-tab').addEventListener('shown.bs.tab', loadTimeline);
+document.getElementById('settings-tab').addEventListener('shown.bs.tab', loadSettings);
+document.getElementById('search-query').addEventListener('keypress', function(e) { if (e.key === 'Enter') searchMemories(); });
+
+document.getElementById('profile-select').addEventListener('change', function() {
+    switchProfile(this.value);
+});
+
+document.getElementById('add-profile-btn').addEventListener('click', function() {
+    createProfile();
+});
+
+var newProfileInput = document.getElementById('new-profile-name');
+if (newProfileInput) {
+    newProfileInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') createProfile();
+    });
+}
+
+// v2.5 tabs (graceful — elements may not exist on older installs)
+var eventsTab = document.getElementById('events-tab');
+if (eventsTab) eventsTab.addEventListener('shown.bs.tab', loadEventStats);
+
+var agentsTab = document.getElementById('agents-tab');
+if (agentsTab) agentsTab.addEventListener('shown.bs.tab', loadAgents);

package/ui/js/memories.js

@@ -0,0 +1,149 @@
+// SuperLocalMemory V2 - Memories List + Sorting
+// Depends on: core.js, modal.js (openMemoryDetail)
+//
+// Security: All dynamic values are escaped via escapeHtml() before DOM insertion.
+// The innerHTML usage in renderMemoriesTable is safe because every interpolated
+// value passes through escapeHtml(). Data comes from our own local SQLite DB only.
+// nosemgrep: innerHTML-xss — all dynamic values escaped via escapeHtml()
+
+async function loadMemories() {
+    var category = document.getElementById('filter-category').value;
+    var project = document.getElementById('filter-project').value;
+    var url = '/api/memories?limit=50';
+    if (category) url += '&category=' + encodeURIComponent(category);
+    if (project) url += '&project_name=' + encodeURIComponent(project);
+
+    showLoading('memories-list', 'Loading memories...');
+    try {
+        var response = await fetch(url);
+        var data = await response.json();
+        lastSearchResults = null;
+        var exportBtn = document.getElementById('export-search-btn');
+        if (exportBtn) exportBtn.style.display = 'none';
+        renderMemoriesTable(data.memories, false);
+    } catch (error) {
+        console.error('Error loading memories:', error);
+        showEmpty('memories-list', 'exclamation-triangle', 'Failed to load memories');
+    }
+}
+
+function renderMemoriesTable(memories, showScores) {
+    var container = document.getElementById('memories-list');
+    if (!memories || memories.length === 0) {
+        showEmpty('memories-list', 'journal-x', 'No memories found. Try a different search or filter.');
+        return;
+    }
+
+    window._slmMemories = memories;
+    var scoreHeader = showScores ? '<th>Score</th>' : '';
+
+    var rows = '';
+    memories.forEach(function(mem, idx) {
+        var content = mem.summary || mem.content || '';
+        var contentPreview = content.length > 100 ? content.substring(0, 100) + '...' : content;
+        var importance = mem.importance || 5;
+        var importanceClass = importance >= 8 ? 'success' : importance >= 5 ? 'warning' : 'secondary';
+
+        var scoreCell = '';
+        if (showScores) {
+            var score = mem.score || 0;
+            var pct = Math.round(score * 100);
+            var barColor = pct >= 70 ? '#43e97b' : pct >= 40 ? '#f9c74f' : '#f94144';
+            scoreCell = '<td><span class="score-label">' + escapeHtml(String(pct)) + '%</span>'
+                + '<div class="score-bar-container"><div class="score-bar">'
+                + '<div class="score-bar-fill" style="width:' + pct + '%;background:' + barColor + '"></div>'
+                + '</div></div></td>';
+        }
+
+        rows += '<tr data-mem-idx="' + idx + '">'
+            + '<td>' + escapeHtml(String(mem.id)) + '</td>'
+            + '<td><span class="badge bg-primary">' + escapeHtml(mem.category || 'None') + '</span></td>'
+            + '<td><small>' + escapeHtml(mem.project_name || '-') + '</small></td>'
+            + '<td class="memory-content" title="' + escapeHtml(content) + '">' + escapeHtml(contentPreview) + '</td>'
+            + scoreCell
+            + '<td><span class="badge bg-' + importanceClass + ' badge-importance">' + escapeHtml(String(importance)) + '</span></td>'
+            + '<td>' + escapeHtml(String(mem.cluster_id || '-')) + '</td>'
+            + '<td><small>' + escapeHtml(formatDate(mem.created_at)) + '</small></td>'
+            + '</tr>';
+    });
+
+    var tableHtml = '<table class="table table-hover memory-table"><thead><tr>'
+        + '<th class="sortable" data-sort="id">ID</th>'
+        + '<th class="sortable" data-sort="category">Category</th>'
+        + '<th class="sortable" data-sort="project">Project</th>'
+        + '<th>Content</th>'
+        + scoreHeader
+        + '<th class="sortable" data-sort="importance">Importance</th>'
+        + '<th>Cluster</th>'
+        + '<th class="sortable" data-sort="created">Created</th>'
+        + '</tr></thead><tbody>' + rows + '</tbody></table>';
+
+    // All values above escaped via escapeHtml() — safe for trusted local data
+    container.textContent = '';
+    container.insertAdjacentHTML('beforeend', tableHtml);
+
+    var table = container.querySelector('table');
+    if (table) {
+        table.addEventListener('click', function(e) {
+            var th = e.target.closest('th.sortable');
+            if (th) { handleSort(th); return; }
+            var row = e.target.closest('tr[data-mem-idx]');
+            if (row) {
+                var idx = parseInt(row.getAttribute('data-mem-idx'), 10);
+                if (window._slmMemories && window._slmMemories[idx]) {
+                    openMemoryDetail(window._slmMemories[idx]);
+                }
+            }
+        });
+    }
+}
+
+// ============================================================================
+// Column Sorting
+// ============================================================================
+
+var currentSort = { column: null, direction: 'asc' };
+
+function handleSort(th) {
+    var col = th.getAttribute('data-sort');
+    if (!col) return;
+
+    if (currentSort.column === col) {
+        currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+    } else {
+        currentSort.column = col;
+        currentSort.direction = 'asc';
+    }
+
+    document.querySelectorAll('#memories-list th.sortable').forEach(function(h) {
+        h.classList.remove('sort-asc', 'sort-desc');
+    });
+    th.classList.add('sort-' + currentSort.direction);
+
+    if (!window._slmMemories) return;
+    var memories = window._slmMemories.slice();
+    var dir = currentSort.direction === 'asc' ? 1 : -1;
+
+    memories.sort(function(a, b) {
+        var av, bv;
+        switch (col) {
+            case 'id': return ((a.id || 0) - (b.id || 0)) * dir;
+            case 'importance': return ((a.importance || 0) - (b.importance || 0)) * dir;
+            case 'category':
+                av = (a.category || '').toLowerCase(); bv = (b.category || '').toLowerCase();
+                return av < bv ? -dir : av > bv ? dir : 0;
+            case 'project':
+                av = (a.project_name || '').toLowerCase(); bv = (b.project_name || '').toLowerCase();
+                return av < bv ? -dir : av > bv ? dir : 0;
+            case 'created':
+                av = a.created_at || ''; bv = b.created_at || '';
+                return av < bv ? -dir : av > bv ? dir : 0;
+            case 'score': return ((a.score || 0) - (b.score || 0)) * dir;
+            default: return 0;
+        }
+    });
+
+    window._slmMemories = memories;
+    var showScores = memories.length > 0 && typeof memories[0].score === 'number';
+    renderMemoriesTable(memories, showScores);
+}

package/ui/js/modal.js

@@ -0,0 +1,139 @@
+// SuperLocalMemory V2 - Memory Detail Modal + Copy/Export
+// Depends on: core.js
+//
+// Security: All dynamic values escaped via escapeHtml(). Data from local DB only.
+// nosemgrep: innerHTML-xss — all dynamic values escaped
+
+var currentMemoryDetail = null;
+
+function openMemoryDetail(mem) {
+    currentMemoryDetail = mem;
+    var body = document.getElementById('memory-detail-body');
+    if (!mem) {
+        body.textContent = 'No memory data';
+        return;
+    }
+
+    var content = mem.content || mem.summary || '(no content)';
+    var tags = mem.tags || '';
+    var importance = mem.importance || 5;
+    var importanceClass = importance >= 8 ? 'success' : importance >= 5 ? 'warning' : 'secondary';
+
+    // Build detail using DOM nodes for safety
+    body.textContent = '';
+
+    var contentDiv = document.createElement('div');
+    contentDiv.className = 'memory-detail-content';
+    contentDiv.textContent = content;
+    body.appendChild(contentDiv);
+
+    body.appendChild(document.createElement('hr'));
+
+    var dl = document.createElement('dl');
+    dl.className = 'memory-detail-meta row';
+
+    // Left column
+    var col1 = document.createElement('div');
+    col1.className = 'col-md-6';
+    addDetailRow(col1, 'ID', String(mem.id || '-'));
+    addDetailBadgeRow(col1, 'Category', mem.category || 'None', 'bg-primary');
+    addDetailRow(col1, 'Project', mem.project_name || '-');
+    addDetailTagsRow(col1, 'Tags', tags);
+    dl.appendChild(col1);
+
+    // Right column
+    var col2 = document.createElement('div');
+    col2.className = 'col-md-6';
+    addDetailBadgeRow(col2, 'Importance', importance + '/10', 'bg-' + importanceClass);
+    addDetailRow(col2, 'Cluster', String(mem.cluster_id || '-'));
+    addDetailRow(col2, 'Created', formatDateFull(mem.created_at));
+    if (mem.updated_at) addDetailRow(col2, 'Updated', formatDateFull(mem.updated_at));
+
+    if (typeof mem.score === 'number') {
+        var pct = Math.round(mem.score * 100);
+        addDetailRow(col2, 'Relevance Score', pct + '%');
+    }
+    dl.appendChild(col2);
+
+    body.appendChild(dl);
+
+    var modal = new bootstrap.Modal(document.getElementById('memoryDetailModal'));
+    modal.show();
+}
+
+function addDetailRow(parent, label, value) {
+    var dt = document.createElement('dt');
+    dt.textContent = label;
+    parent.appendChild(dt);
+    var dd = document.createElement('dd');
+    dd.textContent = value;
+    parent.appendChild(dd);
+}
+
+function addDetailBadgeRow(parent, label, value, badgeClass) {
+    var dt = document.createElement('dt');
+    dt.textContent = label;
+    parent.appendChild(dt);
+    var dd = document.createElement('dd');
+    var badge = document.createElement('span');
+    badge.className = 'badge ' + badgeClass;
+    badge.textContent = value;
+    dd.appendChild(badge);
+    parent.appendChild(dd);
+}
+
+function addDetailTagsRow(parent, label, tags) {
+    var dt = document.createElement('dt');
+    dt.textContent = label;
+    parent.appendChild(dt);
+    var dd = document.createElement('dd');
+    var tagList = typeof tags === 'string' ? tags.split(',') : (tags || []);
+    if (tagList.length === 0 || (tagList.length === 1 && !tagList[0].trim())) {
+        dd.className = 'text-muted';
+        dd.textContent = 'None';
+    } else {
+        tagList.forEach(function(t) {
+            var tag = t.trim();
+            if (tag) {
+                var badge = document.createElement('span');
+                badge.className = 'badge bg-secondary me-1';
+                badge.textContent = tag;
+                dd.appendChild(badge);
+            }
+        });
+    }
+    parent.appendChild(dd);
+}
+
+function copyMemoryToClipboard() {
+    if (!currentMemoryDetail) return;
+    var text = currentMemoryDetail.content || currentMemoryDetail.summary || '';
+    navigator.clipboard.writeText(text).then(function() {
+        showToast('Copied to clipboard');
+    }).catch(function() {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        showToast('Copied to clipboard');
+    });
+}
+
+function exportMemoryAsMarkdown() {
+    if (!currentMemoryDetail) return;
+    var mem = currentMemoryDetail;
+    var md = '# Memory #' + (mem.id || 'unknown') + '\n\n';
+    md += '**Category:** ' + (mem.category || 'None') + '  \n';
+    md += '**Project:** ' + (mem.project_name || '-') + '  \n';
+    md += '**Importance:** ' + (mem.importance || 5) + '/10  \n';
+    md += '**Tags:** ' + (mem.tags || 'None') + '  \n';
+    md += '**Created:** ' + (mem.created_at || '-') + '  \n';
+    if (mem.cluster_id) md += '**Cluster:** ' + mem.cluster_id + '  \n';
+    md += '\n---\n\n';
+    md += mem.content || mem.summary || '(no content)';
+    md += '\n\n---\n*Exported from SuperLocalMemory V2*\n';
+
+    downloadFile('memory-' + (mem.id || 'export') + '.md', md, 'text/markdown');
+}

package/ui/js/patterns.js

@@ -0,0 +1,93 @@
+// SuperLocalMemory V2 - Patterns View (Layer 4)
+// Depends on: core.js
+
+async function loadPatterns() {
+    showLoading('patterns-list', 'Loading patterns...');
+    try {
+        var response = await fetch('/api/patterns');
+        var data = await response.json();
+        renderPatterns(data.patterns);
+    } catch (error) {
+        console.error('Error loading patterns:', error);
+        showEmpty('patterns-list', 'puzzle', 'Failed to load patterns');
+    }
+}
+
+function renderPatterns(patterns) {
+    var container = document.getElementById('patterns-list');
+    if (!patterns || Object.keys(patterns).length === 0) {
+        showEmpty('patterns-list', 'puzzle', 'No patterns learned yet. Use SuperLocalMemory for a while to build patterns.');
+        return;
+    }
+
+    var typeIcons = { preference: 'heart', style: 'palette', terminology: 'code-slash' };
+    var typeLabels = { preference: 'Preferences', style: 'Coding Style', terminology: 'Terminology' };
+
+    container.textContent = '';
+
+    for (var type in patterns) {
+        if (!patterns.hasOwnProperty(type)) continue;
+        var items = patterns[type];
+
+        var header = document.createElement('h6');
+        header.className = 'mt-3 mb-2';
+        var icon = document.createElement('i');
+        icon.className = 'bi bi-' + (typeIcons[type] || 'puzzle') + ' me-1';
+        header.appendChild(icon);
+        header.appendChild(document.createTextNode(typeLabels[type] || type));
+        var countBadge = document.createElement('span');
+        countBadge.className = 'badge bg-secondary ms-2';
+        countBadge.textContent = items.length;
+        header.appendChild(countBadge);
+        container.appendChild(header);
+
+        var group = document.createElement('div');
+        group.className = 'list-group mb-3';
+
+        items.forEach(function(pattern) {
+            var pct = Math.round(pattern.confidence * 100);
+            var barColor = pct >= 60 ? '#43e97b' : pct >= 40 ? '#f9c74f' : '#6c757d';
+            var badgeClass = pct >= 60 ? 'bg-success' : pct >= 40 ? 'bg-warning text-dark' : 'bg-secondary';
+
+            var item = document.createElement('div');
+            item.className = 'list-group-item';
+
+            var topRow = document.createElement('div');
+            topRow.className = 'd-flex justify-content-between align-items-center';
+            var keyEl = document.createElement('strong');
+            keyEl.textContent = pattern.key;
+            var badge = document.createElement('span');
+            badge.className = 'badge ' + badgeClass;
+            badge.textContent = pct + '%';
+            topRow.appendChild(keyEl);
+            topRow.appendChild(badge);
+            item.appendChild(topRow);
+
+            var barContainer = document.createElement('div');
+            barContainer.className = 'confidence-bar';
+            var barFill = document.createElement('div');
+            barFill.className = 'confidence-fill';
+            barFill.style.width = pct + '%';
+            barFill.style.background = barColor;
+            barContainer.appendChild(barFill);
+            item.appendChild(barContainer);
+
+            var valueEl = document.createElement('div');
+            valueEl.className = 'mt-1';
+            var valueSmall = document.createElement('small');
+            valueSmall.className = 'text-muted';
+            valueSmall.textContent = typeof pattern.value === 'string' ? pattern.value : JSON.stringify(pattern.value);
+            valueEl.appendChild(valueSmall);
+            item.appendChild(valueEl);
+
+            var evidenceEl = document.createElement('small');
+            evidenceEl.className = 'text-muted';
+            evidenceEl.textContent = 'Evidence: ' + (pattern.evidence_count || '?') + ' memories';
+            item.appendChild(evidenceEl);
+
+            group.appendChild(item);
+        });
+
+        container.appendChild(group);
+    }
+}

package/ui/js/profiles.js

@@ -0,0 +1,202 @@
+// SuperLocalMemory V2 - Profile Management
+// Depends on: core.js
+
+async function loadProfiles() {
+    try {
+        var response = await fetch('/api/profiles');
+        var data = await response.json();
+        var select = document.getElementById('profile-select');
+        select.textContent = '';
+        var profiles = data.profiles || [];
+        var active = data.active_profile || 'default';
+
+        profiles.forEach(function(p) {
+            var opt = document.createElement('option');
+            opt.value = p.name;
+            opt.textContent = p.name + (p.memory_count ? ' (' + p.memory_count + ')' : '');
+            if (p.name === active) opt.selected = true;
+            select.appendChild(opt);
+        });
+    } catch (error) {
+        console.error('Error loading profiles:', error);
+    }
+}
+
+async function createProfile(nameOverride) {
+    var name = nameOverride || document.getElementById('new-profile-name').value.trim();
+    if (!name) {
+        name = prompt('Enter new profile name:');
+        if (!name || !name.trim()) return;
+        name = name.trim();
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
+        showToast('Invalid name. Use letters, numbers, dashes, underscores.');
+        return;
+    }
+
+    try {
+        var response = await fetch('/api/profiles/create', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profile_name: name })
+        });
+        var data = await response.json();
+        if (response.status === 409) {
+            showToast('Profile "' + name + '" already exists');
+            return;
+        }
+        if (!response.ok) {
+            showToast(data.detail || 'Failed to create profile');
+            return;
+        }
+        showToast('Profile "' + name + '" created');
+        var input = document.getElementById('new-profile-name');
+        if (input) input.value = '';
+        loadProfiles();
+        loadProfilesTable();
+    } catch (error) {
+        console.error('Error creating profile:', error);
+        showToast('Error creating profile');
+    }
+}
+
+async function deleteProfile(name) {
+    if (name === 'default') {
+        showToast('Cannot delete the default profile');
+        return;
+    }
+    if (!confirm('Delete profile "' + name + '"?\nIts memories will be moved to the default profile.')) {
+        return;
+    }
+    try {
+        var response = await fetch('/api/profiles/' + encodeURIComponent(name), {
+            method: 'DELETE'
+        });
+        var data = await response.json();
+        if (!response.ok) {
+            showToast(data.detail || 'Failed to delete profile');
+            return;
+        }
+        showToast(data.message || 'Profile deleted');
+        loadProfiles();
+        loadProfilesTable();
+        loadStats();
+    } catch (error) {
+        console.error('Error deleting profile:', error);
+        showToast('Error deleting profile');
+    }
+}
+
+async function loadProfilesTable() {
+    var container = document.getElementById('profiles-table');
+    if (!container) return;
+    try {
+        var response = await fetch('/api/profiles');
+        var data = await response.json();
+        var profiles = data.profiles || [];
+        var active = data.active_profile || 'default';
+
+        if (profiles.length === 0) {
+            showEmpty('profiles-table', 'people', 'No profiles found.');
+            return;
+        }
+
+        var table = document.createElement('table');
+        table.className = 'table table-sm mb-0';
+        var thead = document.createElement('thead');
+        var headRow = document.createElement('tr');
+        ['Name', 'Memories', 'Status', 'Actions'].forEach(function(h) {
+            var th = document.createElement('th');
+            th.textContent = h;
+            headRow.appendChild(th);
+        });
+        thead.appendChild(headRow);
+        table.appendChild(thead);
+
+        var tbody = document.createElement('tbody');
+        profiles.forEach(function(p) {
+            var row = document.createElement('tr');
+
+            var nameCell = document.createElement('td');
+            var nameIcon = document.createElement('i');
+            nameIcon.className = 'bi bi-person me-1';
+            nameCell.appendChild(nameIcon);
+            nameCell.appendChild(document.createTextNode(p.name));
+            row.appendChild(nameCell);
+
+            var countCell = document.createElement('td');
+            countCell.textContent = (p.memory_count || 0) + ' memories';
+            row.appendChild(countCell);
+
+            var statusCell = document.createElement('td');
+            if (p.name === active) {
+                var badge = document.createElement('span');
+                badge.className = 'badge bg-success';
+                badge.textContent = 'Active';
+                statusCell.appendChild(badge);
+            } else {
+                var switchBtn = document.createElement('button');
+                switchBtn.className = 'btn btn-sm btn-outline-primary';
+                switchBtn.textContent = 'Switch';
+                switchBtn.addEventListener('click', (function(n) {
+                    return function() { switchProfile(n); };
+                })(p.name));
+                statusCell.appendChild(switchBtn);
+            }
+            row.appendChild(statusCell);
+
+            var actionsCell = document.createElement('td');
+            if (p.name !== 'default') {
+                var delBtn = document.createElement('button');
+                delBtn.className = 'btn btn-sm btn-outline-danger btn-delete-profile';
+                delBtn.title = 'Delete profile';
+                var delIcon = document.createElement('i');
+                delIcon.className = 'bi bi-trash';
+                delBtn.appendChild(delIcon);
+                delBtn.addEventListener('click', (function(n) {
+                    return function() { deleteProfile(n); };
+                })(p.name));
+                actionsCell.appendChild(delBtn);
+            } else {
+                var protectedBadge = document.createElement('span');
+                protectedBadge.className = 'badge bg-secondary';
+                protectedBadge.textContent = 'Protected';
+                actionsCell.appendChild(protectedBadge);
+            }
+            row.appendChild(actionsCell);
+
+            tbody.appendChild(row);
+        });
+        table.appendChild(tbody);
+
+        container.textContent = '';
+        container.appendChild(table);
+    } catch (error) {
+        console.error('Error loading profiles table:', error);
+        showEmpty('profiles-table', 'exclamation-triangle', 'Failed to load profiles');
+    }
+}
+
+async function switchProfile(profileName) {
+    try {
+        var response = await fetch('/api/profiles/' + encodeURIComponent(profileName) + '/switch', {
+            method: 'POST'
+        });
+        var data = await response.json();
+        if (data.success || data.active_profile) {
+            showToast('Switched to profile: ' + profileName);
+            loadProfiles();
+            loadStats();
+            loadGraph();
+            loadProfilesTable();
+            var activeTab = document.querySelector('#mainTabs .nav-link.active');
+            if (activeTab) activeTab.click();
+        } else {
+            showToast('Failed to switch profile');
+        }
+    } catch (error) {
+        console.error('Error switching profile:', error);
+        showToast('Error switching profile');
+    }
+}