superlocalmemory 3.4.16 → 3.4.18

package/ui/js/graph-interactions.js

@@ -1,351 +0,0 @@
-// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - Interactions Module
-// Copyright (c) 2026 Varun Pratap Bhardwaj — Elastic License 2.0
-// Part of modular graph visualization system (split from monolithic graph-cytoscape.js)
-
-// ============================================================================
-// CYTOSCAPE INTERACTIONS
-// ============================================================================
-
-function addCytoscapeInteractions() {
-    if (!cy) return;
-
-    // Hover: Show tooltip
-    cy.on('mouseover', 'node', function(evt) {
-        const node = evt.target;
-        const pos = evt.renderedPosition;
-        showTooltip(node, pos.x, pos.y);
-
-        // Highlight connected nodes
-        node.addClass('highlighted');
-        node.connectedEdges().addClass('highlighted');
-        node.neighborhood('node').addClass('highlighted');
-
-        // Dim others
-        cy.nodes().not(node).not(node.neighborhood('node')).addClass('dimmed');
-        cy.edges().not(node.connectedEdges()).addClass('dimmed');
-    });
-
-    cy.on('mouseout', 'node', function(evt) {
-        hideTooltip();
-
-        // Remove highlighting
-        cy.elements().removeClass('highlighted').removeClass('dimmed');
-    });
-
-    // Single click: Open modal preview (source='graph' for context-aware buttons)
-    cy.on('tap', 'node', function(evt) {
-        const node = evt.target;
-        openMemoryModal(node);
-    });
-
-    // Double click: Navigate to Memories tab
-    cy.on('dbltap', 'node', function(evt) {
-        const node = evt.target;
-        navigateToMemoryTab(node.data('id'));
-    });
-
-    // Enable node dragging
-    cy.on('drag', 'node', function(evt) {
-        // Node position is automatically updated by Cytoscape
-    });
-
-    // Save layout when drag ends
-    cy.on('dragfree', 'node', function(evt) {
-        saveLayoutPositions();
-    });
-
-    // Pan & zoom events (for performance monitoring)
-    let panZoomTimeout;
-    cy.on('pan zoom', function() {
-        clearTimeout(panZoomTimeout);
-        panZoomTimeout = setTimeout(() => {
-            saveLayoutPositions();
-        }, 1000);
-    });
-
-    // Add keyboard navigation
-    setupKeyboardNavigation();
-}
-
-// ============================================================================
-// TOOLTIP
-// ============================================================================
-
-let tooltipTimeout;
-function showTooltip(node, x, y) {
-    clearTimeout(tooltipTimeout);
-    tooltipTimeout = setTimeout(() => {
-        let tooltip = document.getElementById('graph-tooltip');
-        if (!tooltip) {
-            tooltip = document.createElement('div');
-            tooltip.id = 'graph-tooltip';
-            tooltip.style.cssText = 'position:fixed; background:#333; color:#fff; padding:10px; border-radius:6px; font-size:12px; max-width:300px; z-index:10000; pointer-events:none; box-shadow: 0 4px 12px rgba(0,0,0,0.3);';
-            document.body.appendChild(tooltip);
-        }
-
-        // Build tooltip content safely (no innerHTML)
-        tooltip.textContent = ''; // Clear
-        const data = node.data();
-
-        const title = document.createElement('strong');
-        title.textContent = data.label;
-        tooltip.appendChild(title);
-
-        tooltip.appendChild(document.createElement('br'));
-
-        const meta = document.createElement('span');
-        meta.style.color = '#aaa';
-        meta.textContent = `Cluster ${data.cluster_id} • Importance ${data.importance}`;
-        tooltip.appendChild(meta);
-
-        tooltip.appendChild(document.createElement('br'));
-
-        const preview = document.createElement('span');
-        preview.style.cssText = 'font-size:11px; color:#ccc;';
-        preview.textContent = data.content_preview;
-        tooltip.appendChild(preview);
-
-        tooltip.style.display = 'block';
-        tooltip.style.left = (x + 20) + 'px';
-        tooltip.style.top = (y - 20) + 'px';
-    }, 200);
-}
-
-function hideTooltip() {
-    clearTimeout(tooltipTimeout);
-    const tooltip = document.getElementById('graph-tooltip');
-    if (tooltip) {
-        tooltip.style.display = 'none';
-    }
-}
-
-// ============================================================================
-// MODAL INTEGRATION
-// ============================================================================
-
-function openMemoryModal(node) {
-    const memoryData = {
-        id: node.data('id'),
-        content: node.data('content'),
-        summary: node.data('summary'),
-        category: node.data('category'),
-        project_name: node.data('project_name'),
-        cluster_id: node.data('cluster_id'),
-        importance: node.data('importance'),
-        tags: node.data('tags'),
-        created_at: node.data('created_at')
-    };
-
-    if (typeof openMemoryDetail === 'function') {
-        openMemoryDetail(memoryData, 'graph'); // source='graph': show Expand Neighbors, hide View Original
-    }
-}
-
-function navigateToMemoryTab(memoryId) {
-    // Switch to Memories tab
-    const memoriesTab = document.querySelector('a[href="#memories"]');
-    if (memoriesTab) {
-        memoriesTab.click();
-    }
-
-    // Scroll to memory after a short delay (for tab to load)
-    setTimeout(() => {
-        if (typeof scrollToMemory === 'function') {
-            scrollToMemory(memoryId);
-        } else {
-            console.warn('scrollToMemory function not found in memories.js');
-        }
-    }, 300);
-}
-
-// ============================================================================
-// KEYBOARD NAVIGATION
-// ============================================================================
-
-function setupKeyboardNavigation() {
-    if (!cy) return;
-
-    const container = document.getElementById('graph-container');
-    if (!container) return;
-
-    // Make container focusable
-    container.setAttribute('tabindex', '0');
-
-    // Focus handler - enable keyboard nav when container is focused
-    container.addEventListener('focus', function() {
-        keyboardNavigationEnabled = true;
-        if (cy.nodes().length > 0) {
-            focusNodeAtIndex(0);
-        }
-    });
-
-    container.addEventListener('blur', function() {
-        keyboardNavigationEnabled = false;
-        cy.nodes().removeClass('keyboard-focused');
-    });
-
-    // Keyboard event handler
-    container.addEventListener('keydown', function(e) {
-        if (!keyboardNavigationEnabled || !cy) return;
-
-        const nodes = cy.nodes();
-        if (nodes.length === 0) return;
-
-        const currentNode = nodes[focusedNodeIndex];
-
-        switch(e.key) {
-            case 'Tab':
-                e.preventDefault();
-                if (e.shiftKey) {
-                    // Shift+Tab: previous node
-                    focusedNodeIndex = (focusedNodeIndex - 1 + nodes.length) % nodes.length;
-                } else {
-                    // Tab: next node
-                    focusedNodeIndex = (focusedNodeIndex + 1) % nodes.length;
-                }
-                focusNodeAtIndex(focusedNodeIndex);
-                announceNode(nodes[focusedNodeIndex]);
-                break;
-
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (currentNode) {
-                    lastFocusedElement = container;
-                    openMemoryModal(currentNode);
-                }
-                break;
-
-            case 'ArrowRight':
-                e.preventDefault();
-                moveToAdjacentNode('right', currentNode);
-                break;
-
-            case 'ArrowLeft':
-                e.preventDefault();
-                moveToAdjacentNode('left', currentNode);
-                break;
-
-            case 'ArrowDown':
-                e.preventDefault();
-                moveToAdjacentNode('down', currentNode);
-                break;
-
-            case 'ArrowUp':
-                e.preventDefault();
-                moveToAdjacentNode('up', currentNode);
-                break;
-
-            case 'Escape':
-                e.preventDefault();
-                if (filterState.cluster_id || filterState.entity) {
-                    clearGraphFilters();
-                    updateScreenReaderStatus('Filters cleared, showing all memories');
-                } else {
-                    container.blur();
-                    keyboardNavigationEnabled = false;
-                }
-                break;
-
-            case 'Home':
-                e.preventDefault();
-                focusedNodeIndex = 0;
-                focusNodeAtIndex(0);
-                announceNode(nodes[0]);
-                break;
-
-            case 'End':
-                e.preventDefault();
-                focusedNodeIndex = nodes.length - 1;
-                focusNodeAtIndex(focusedNodeIndex);
-                announceNode(nodes[focusedNodeIndex]);
-                break;
-        }
-    });
-}
-
-function focusNodeAtIndex(index) {
-    if (!cy) return;
-
-    const nodes = cy.nodes();
-    if (index < 0 || index >= nodes.length) return;
-
-    // Remove focus from all nodes
-    cy.nodes().removeClass('keyboard-focused');
-
-    // Add focus to target node
-    const node = nodes[index];
-    node.addClass('keyboard-focused');
-
-    // Center node in viewport with smooth animation
-    cy.animate({
-        center: { eles: node },
-        zoom: Math.max(cy.zoom(), 1.0),
-        duration: 300,
-        easing: 'ease-in-out'
-    });
-}
-
-function moveToAdjacentNode(direction, currentNode) {
-    if (!currentNode) return;
-
-    const nodes = cy.nodes();
-    const currentPos = currentNode.position();
-    let bestNode = null;
-    let bestScore = Infinity;
-
-    // Find adjacent nodes based on direction
-    nodes.forEach((node, index) => {
-        if (node.id() === currentNode.id()) return;
-
-        const pos = node.position();
-        const dx = pos.x - currentPos.x;
-        const dy = pos.y - currentPos.y;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-
-        let isCorrectDirection = false;
-        let directionScore = 0;
-
-        switch(direction) {
-            case 'right':
-                isCorrectDirection = dx > 0;
-                directionScore = dx;
-                break;
-            case 'left':
-                isCorrectDirection = dx < 0;
-                directionScore = -dx;
-                break;
-            case 'down':
-                isCorrectDirection = dy > 0;
-                directionScore = dy;
-                break;
-            case 'up':
-                isCorrectDirection = dy < 0;
-                directionScore = -dy;
-                break;
-        }
-
-        // Combine distance with direction preference
-        if (isCorrectDirection) {
-            const score = distance - (directionScore * 0.5);
-            if (score < bestScore) {
-                bestScore = score;
-                bestNode = node;
-                focusedNodeIndex = index;
-            }
-        }
-    });
-
-    if (bestNode) {
-        focusNodeAtIndex(focusedNodeIndex);
-        announceNode(bestNode);
-    }
-}
-
-function announceNode(node) {
-    if (!node) return;
-
-    const data = node.data();
-    const message = `Memory ${data.id}: ${data.label}, Cluster ${data.cluster_id}, Importance ${data.importance} out of 10`;
-    updateScreenReaderStatus(message);
-}

package/ui/js/graph-ui.js

@@ -1,214 +0,0 @@
-// SuperLocalMemory V2.6.5 - Interactive Knowledge Graph - UI Elements Module
-// Copyright (c) 2026 Varun Pratap Bhardwaj — Elastic License 2.0
-// Part of modular graph visualization system (split from monolithic graph-cytoscape.js)
-
-// ============================================================================
-// FILTER BADGE UI
-// ============================================================================
-
-function updateFilterBadge() {
-    const statusFull = document.getElementById('graph-status-full');
-    const statusFiltered = document.getElementById('graph-status-filtered');
-    const filterDescription = document.getElementById('graph-filter-description');
-    const filterCount = document.getElementById('graph-filter-count');
-    const statusFullText = document.getElementById('graph-status-full-text');
-
-    const hasFilter = filterState.cluster_id || filterState.entity;
-
-    if (hasFilter) {
-        // FILTERED STATE - Show prominent alert with "Show All Memories" button
-        if (statusFull) statusFull.style.display = 'none';
-        if (statusFiltered) statusFiltered.style.display = 'block';
-
-        // Update filter description
-        if (filterDescription) {
-            const text = filterState.cluster_id
-                ? `Viewing Cluster ${filterState.cluster_id}`
-                : `Viewing: ${filterState.entity}`;
-            filterDescription.textContent = text;
-        }
-
-        // Update count (will be set after graph renders)
-        if (filterCount && graphData && graphData.nodes) {
-            filterCount.textContent = `(${graphData.nodes.length} ${graphData.nodes.length === 1 ? 'memory' : 'memories'})`;
-        }
-
-        console.log('[updateFilterBadge] Showing FILTERED state');
-    } else {
-        // FULL GRAPH STATE - Show normal status with refresh button
-        if (statusFull) statusFull.style.display = 'block';
-        if (statusFiltered) statusFiltered.style.display = 'none';
-
-        // Update count
-        if (statusFullText && graphData && graphData.nodes) {
-            const maxNodes = document.getElementById('graph-max-nodes')?.value || 50;
-            statusFullText.textContent = `Showing ${graphData.nodes.length} of ${maxNodes} memories`;
-        }
-
-        console.log('[updateFilterBadge] Showing FULL state');
-    }
-}
-
-// ============================================================================
-// GRAPH STATS
-// ============================================================================
-
-function updateGraphStats(data) {
-    const statsEl = document.getElementById('graph-stats');
-    if (statsEl) {
-        // Clear and rebuild safely
-        statsEl.textContent = '';
-
-        const nodeBadge = document.createElement('span');
-        nodeBadge.className = 'badge bg-primary';
-        nodeBadge.textContent = `${data.nodes.length} nodes`;
-        statsEl.appendChild(nodeBadge);
-
-        const edgeBadge = document.createElement('span');
-        edgeBadge.className = 'badge bg-secondary';
-        edgeBadge.textContent = `${data.links.length} edges`;
-        statsEl.appendChild(document.createTextNode(' '));
-        statsEl.appendChild(edgeBadge);
-
-        const clusterBadge = document.createElement('span');
-        clusterBadge.className = 'badge bg-info';
-        clusterBadge.textContent = `${data.clusters?.length || 0} clusters`;
-        statsEl.appendChild(document.createTextNode(' '));
-        statsEl.appendChild(clusterBadge);
-    }
-}
-
-// ============================================================================
-// LOADING SPINNER
-// ============================================================================
-
-function showLoadingSpinner() {
-    const container = document.getElementById('graph-container');
-    if (container) {
-        container.textContent = ''; // Clear safely
-
-        const wrapper = document.createElement('div');
-        wrapper.style.cssText = 'text-align:center; padding:100px;';
-
-        const spinner = document.createElement('div');
-        spinner.className = 'spinner-border text-primary';
-        spinner.setAttribute('role', 'status');
-        wrapper.appendChild(spinner);
-
-        const text = document.createElement('p');
-        text.style.marginTop = '20px';
-        text.textContent = 'Loading graph...';
-        wrapper.appendChild(text);
-
-        container.appendChild(wrapper);
-    }
-}
-
-function hideLoadingSpinner() {
-    // Do nothing - renderGraph() already cleared the spinner
-    // If we clear here, we destroy the Cytoscape canvas!
-    console.log('[hideLoadingSpinner] Graph already rendered, spinner cleared by renderGraph()');
-}
-
-function showError(message) {
-    const container = document.getElementById('graph-container');
-    if (container) {
-        container.textContent = ''; // Clear safely
-
-        const alert = document.createElement('div');
-        alert.className = 'alert alert-danger';
-        alert.setAttribute('role', 'alert');
-        alert.style.margin = '50px';
-        alert.textContent = message;
-        container.appendChild(alert);
-    }
-}
-
-// ============================================================================
-// LAYOUT MANAGEMENT
-// ============================================================================
-
-function saveLayoutPositions() {
-    if (!cy) return;
-
-    const positions = {};
-    cy.nodes().forEach(node => {
-        positions[node.id()] = node.position();
-    });
-
-    try {
-        localStorage.setItem('slm_graph_layout', JSON.stringify(positions));
-    } catch (e) {
-        console.warn('Failed to save graph layout:', e);
-    }
-}
-
-function restoreSavedLayout() {
-    if (!cy) return;
-
-    try {
-        const saved = localStorage.getItem('slm_graph_layout');
-        if (saved) {
-            const positions = JSON.parse(saved);
-            cy.nodes().forEach(node => {
-                const pos = positions[node.id()];
-                if (pos) {
-                    node.position(pos);
-                }
-            });
-        }
-    } catch (e) {
-        console.warn('Failed to restore graph layout:', e);
-    }
-}
-
-function changeGraphLayout(layoutName) {
-    if (!cy) return;
-
-    currentLayout = layoutName;
-    const layout = cy.layout(getLayoutConfig(layoutName));
-    layout.run();
-
-    // Save preference
-    localStorage.setItem('slm_graph_layout_preference', layoutName);
-}
-
-// ============================================================================
-// EXPAND NEIGHBORS
-// ============================================================================
-
-function expandNeighbors(memoryId) {
-    if (!cy) return;
-
-    const node = cy.getElementById(String(memoryId));
-    if (!node || node.length === 0) return;
-
-    // Hide all nodes and edges
-    cy.elements().addClass('dimmed');
-
-    // Show target node + neighbors + connecting edges
-    node.removeClass('dimmed');
-    node.neighborhood().removeClass('dimmed');
-    node.connectedEdges().removeClass('dimmed');
-
-    // Fit view to visible elements
-    cy.fit(node.neighborhood().union(node), 50);
-}
-
-// ============================================================================
-// SCREEN READER STATUS
-// ============================================================================
-
-function updateScreenReaderStatus(message) {
-    let statusRegion = document.getElementById('graph-sr-status');
-    if (!statusRegion) {
-        statusRegion = document.createElement('div');
-        statusRegion.id = 'graph-sr-status';
-        statusRegion.setAttribute('role', 'status');
-        statusRegion.setAttribute('aria-live', 'polite');
-        statusRegion.setAttribute('aria-atomic', 'true');
-        statusRegion.style.cssText = 'position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;';
-        document.body.appendChild(statusRegion);
-    }
-    statusRegion.textContent = message;
-}

package/ui/js/ide-status.js

@@ -1,102 +0,0 @@
-// SuperLocalMemory V3 — IDE Connections
-// Displays detected IDEs and allows connecting them to SLM.
-
-async function loadIDEStatus() {
-    try {
-        var response = await fetch('/api/v3/ide/status');
-        if (!response.ok) return;
-        var data = await response.json();
-
-        var tbody = document.getElementById('ide-list-body');
-        tbody.textContent = '';
-        (data.ides || []).forEach(function(ide) {
-            var tr = document.createElement('tr');
-
-            // IDE name cell
-            var tdName = document.createElement('td');
-            var strong = document.createElement('strong');
-            strong.textContent = ide.name;
-            tdName.appendChild(strong);
-            tr.appendChild(tdName);
-
-            // Installed status cell
-            var tdInstalled = document.createElement('td');
-            var badge = document.createElement('span');
-            if (ide.installed) {
-                badge.className = 'badge bg-success';
-                badge.textContent = 'Installed';
-            } else {
-                badge.className = 'badge bg-secondary';
-                badge.textContent = 'Not Found';
-            }
-            tdInstalled.appendChild(badge);
-            tr.appendChild(tdInstalled);
-
-            // Config path cell
-            var tdPath = document.createElement('td');
-            tdPath.className = 'text-muted small';
-            tdPath.textContent = ide.config_path || '';
-            tr.appendChild(tdPath);
-
-            // Action cell
-            var tdAction = document.createElement('td');
-            if (ide.installed) {
-                var btn = document.createElement('button');
-                btn.className = 'btn btn-sm btn-outline-primary ide-connect-btn';
-                btn.dataset.ide = ide.id;
-                btn.textContent = 'Connect';
-                tdAction.appendChild(btn);
-            }
-            tr.appendChild(tdAction);
-
-            tbody.appendChild(tr);
-        });
-    } catch (e) {
-        console.log('IDE status error:', e);
-    }
-}
-
-// Delegate click handler for individual IDE connect buttons
-document.addEventListener('click', function(e) {
-    var btn = e.target.closest('.ide-connect-btn');
-    if (!btn) return;
-
-    var ideId = btn.dataset.ide;
-    fetch('/api/v3/ide/connect', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ide: ideId })
-    }).then(function(r) {
-        return r.json();
-    }).then(function(data) {
-        alert(data.success ? 'Connected: ' + ideId : 'Failed to connect');
-        loadIDEStatus();
-    }).catch(function(e) {
-        console.log('IDE connect error:', e);
-    });
-});
-
-// Connect all detected IDEs
-var connectAllBtn = document.getElementById('ide-connect-all-btn');
-if (connectAllBtn) {
-    connectAllBtn.addEventListener('click', function() {
-        fetch('/api/v3/ide/connect', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({})
-        }).then(function(r) {
-            return r.json();
-        }).then(function(data) {
-            var results = data.results || {};
-            var count = Object.values(results).filter(function(s) {
-                return s === 'connected';
-            }).length;
-            alert('Connected ' + count + ' IDEs');
-            loadIDEStatus();
-        }).catch(function(e) {
-            console.log('IDE connect-all error:', e);
-        });
-    });
-}
-
-document.getElementById('ide-tab')?.addEventListener('shown.bs.tab', loadIDEStatus);