feat(dashboard): huge feature upgrade - native dark mode, interactive graph inspector panel, type filtering and legend, actionable kanban completion via new POST endpoint, and fuzzy search highlighting

fix_main.py

@@ -0,0 +1,43 @@
+import re
+import sys
+
+main_rs_path = r"C:\Users\reazul.ashraf\workspace\rust\mcp-memory\server\src\main.rs"
+
+with open(main_rs_path, "r", encoding="utf-8") as f:
+    content = f.read()
+
+# Add the route
+route_code = """
+            .route("/api/tasks/:id/complete", post({
+                let state_clone = app_state.handler.state.clone();
+                move |axum::extract::Path(id): axum::extract::Path<String>| async move {
+                    if let Ok(mut tasks) = state_clone.tasks.write() {
+                        let mut found = false;
+                        for t in tasks.iter_mut() {
+                            if t.id == id {
+                                t.status = "completed".to_string();
+                                found = true;
+                                break;
+                            }
+                        }
+                        if found {
+                            let _ = state_clone.flush_store();
+                            return axum::Json(serde_json::json!({"status": "success"}));
+                        }
+                    }
+                    axum::Json(serde_json::json!({"status": "not_found"}))
+                }
+            }))
+"""
+
+# Find where to insert it (after /api/tasks)
+if ".route(\"/api/tasks/:id/complete\"" not in content:
+    content = content.replace(
+        '.route("/api/tasks", get({',
+        route_code + '\n            .route("/api/tasks", get({'
+    )
+
+with open(main_rs_path, "w", encoding="utf-8") as f:
+    f.write(content)
+
+print("Injected /api/tasks/:id/complete route successfully.")

fix_route.py

@@ -0,0 +1,49 @@
+import re
+
+main_rs_path = r"C:\Users\reazul.ashraf\workspace\rust\mcp-memory\server\src\main.rs"
+
+with open(main_rs_path, "r", encoding="utf-8") as f:
+    content = f.read()
+
+# Replace the broken route
+old_route = r"""            .route("/api/tasks/:id/complete", post({
+                let state_clone = app_state.handler.state.clone();
+                move |axum::extract::Path(id): axum::extract::Path<String>| async move {
+                    if let Ok(mut tasks) = state_clone.tasks.write() {
+                        let mut found = false;
+                        for t in tasks.iter_mut() {
+                            if t.id == id {
+                                t.status = "completed".to_string();
+                                found = true;
+                                break;
+                            }
+                        }
+                        if found {
+                            let _ = state_clone.flush_store();
+                            return axum::Json(serde_json::json!({"status": "success"}));
+                        }
+                    }
+                    axum::Json(serde_json::json!({"status": "not_found"}))
+                }
+            }))"""
+
+new_route = """            .route("/api/tasks/:id/complete", post({
+                let state_clone = app_state.handler.state.clone();
+                move |axum::extract::Path(id): axum::extract::Path<String>| async move {
+                    state_clone.tasks.modify(|tasks| {
+                        for t in tasks.iter_mut() {
+                            if t.id == id {
+                                t.status = "completed".to_string();
+                                break;
+                            }
+                        }
+                    });
+                    axum::Json(serde_json::json!({"status": "success"}))
+                }
+            }))"""
+
+content = content.replace(old_route, new_route)
+
+with open(main_rs_path, "w", encoding="utf-8") as f:
+    f.write(content)
+print("Replaced route.")

server/src/dashboard.html

@@ -5,35 +5,84 @@
     <title>Antigravity Memory Hub</title>
     <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
     <style>
+        :root {
+            --bg-color: #f4f7f6;
+            --panel-bg: white;
+            --text-primary: #2c3e50;
+            --text-secondary: #7f8c8d;
+            --border-color: #e1e8ed;
+            --header-border: #f0f2f5;
+            --canvas-bg: #fafbfc;
+            --card-bg: white;
+            --kanban-bg: #f8f9fa;
+            --kanban-card: white;
+            --kanban-completed-bg: #fcfcfc;
+            --btn-bg: white;
+            --btn-border: #dcdde1;
+            --btn-hover: #f8f9fa;
+            --search-hover: #f0f2f5;
+            --input-bg: white;
+            --input-text: #2c3e50;
+            --inspector-bg: rgba(255,255,255,0.98);
+        }
+
+        [data-theme="dark"] {
+            --bg-color: #12151a;
+            --panel-bg: #1e242b;
+            --text-primary: #d1d8e0;
+            --text-secondary: #a4b0be;
+            --border-color: #2c3643;
+            --header-border: #2c3643;
+            --canvas-bg: #171b21;
+            --card-bg: #2b333d;
+            --kanban-bg: #1a1e24;
+            --kanban-card: #2b333d;
+            --kanban-completed-bg: #222831;
+            --btn-bg: #2b333d;
+            --btn-border: #3d4a57;
+            --btn-hover: #3d4a57;
+            --search-hover: #2c3643;
+            --input-bg: #171b21;
+            --input-text: #d1d8e0;
+            --inspector-bg: rgba(30, 36, 43, 0.98);
+        }
+
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             margin: 0;
             padding: 20px;
-            background-color: #f4f7f6;
+            background-color: var(--bg-color);
-            color: #2c3e50;
+            color: var(--text-primary);
             display: flex;
             flex-direction: column;
             height: 100vh;
             box-sizing: border-box;
+            transition: background-color 0.3s, color 0.3s;
         }
         .header-bar {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            background: white;
+            background: var(--panel-bg);
             padding: 15px 25px;
             border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             margin-bottom: 20px;
+            transition: background-color 0.3s;
         }
         .header-bar h1 {
             margin: 0;
             font-size: 1.5em;
-            color: #2c3e50;
+            color: var(--text-primary);
             display: flex;
             align-items: center;
             gap: 10px;
         }
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
         .status-dot {
             height: 12px;
             width: 12px;
@@ -43,6 +92,17 @@
             margin-right: 8px;
             box-shadow: 0 0 5px #2ecc71;
         }
+        .theme-toggle {
+            cursor: pointer;
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 1.5em;
+            padding: 0;
+        }
+        .theme-toggle:hover {
+            color: var(--text-primary);
+        }
         .main-container {
             display: flex;
             flex: 1;
@@ -50,36 +110,62 @@
             min-height: 0;
         }
         .panel {
-            background: white;
+            background: var(--panel-bg);
             border-radius: 8px;
             padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             display: flex;
             flex-direction: column;
+            transition: background-color 0.3s;
         }
         .panel h2 {
             margin-top: 0;
             margin-bottom: 15px;
-            color: #34495e;
+            color: var(--text-primary);
             font-size: 1.2em;
-            border-bottom: 2px solid #f0f2f5;
+            border-bottom: 2px solid var(--header-border);
             padding-bottom: 10px;
         }
         .graph-panel {
             flex: 2;
             position: relative;
+            overflow: hidden;
         }
+        
+        /* Filter Bar */
+        .graph-filters {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .filter-chip {
+            background: var(--btn-bg);
+            border: 1px solid var(--btn-border);
+            color: var(--text-secondary);
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 0.8em;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .filter-chip.active {
+            background: #3498db;
+            color: white;
+            border-color: #2980b9;
+        }
+
         #network-container {
             flex: 1;
             min-height: 400px;
             position: relative;
-            border: 1px solid #e1e8ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
-            background: #fafbfc;
+            background: var(--canvas-bg);
         }
         .graph-controls {
             position: absolute;
-            top: 65px;
+            top: 105px;
             right: 35px;
             z-index: 10;
             display: flex;
@@ -87,21 +173,58 @@
             gap: 5px;
         }
         .graph-controls button {
-            background: white;
+            background: var(--btn-bg);
-            border: 1px solid #dcdde1;
+            border: 1px solid var(--btn-border);
             border-radius: 4px;
             width: 32px;
             height: 32px;
             cursor: pointer;
             font-weight: bold;
-            color: #34495e;
+            color: var(--text-primary);
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
             transition: all 0.2s ease;
         }
         .graph-controls button:hover {
-            background: #f8f9fa;
+            background: var(--btn-hover);
-            border-color: #bdc3c7;
         }
+
+        /* Inspector Panel */
+        #inspector-panel {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: 350px;
+            background: var(--inspector-bg);
+            border-left: 1px solid var(--border-color);
+            z-index: 20;
+            padding: 20px;
+            box-shadow: -4px 0 15px rgba(0,0,0,0.1);
+            overflow-y: auto;
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            backdrop-filter: blur(5px);
+        }
+        #inspector-panel.open {
+            transform: translateX(0);
+        }
+        #inspector-close {
+            float: right;
+            cursor: pointer;
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 1.2em;
+        }
+        #inspector-close:hover { color: #e74c3c; }
+        .inspector-meta {
+            font-size: 0.85em;
+            color: var(--text-secondary);
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
         .right-column {
             flex: 1;
             display: flex;
@@ -117,11 +240,13 @@
         input[type="text"] {
             width: 100%;
             padding: 12px;
-            border: 1px solid #dcdde1;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             box-sizing: border-box;
             margin-bottom: 15px;
             font-size: 0.95em;
+            background: var(--input-bg);
+            color: var(--input-text);
             transition: border-color 0.2s ease;
         }
         input[type="text"]:focus {
@@ -133,18 +258,28 @@
             flex: 1;
             font-size: 0.9em;
         }
+        #search-results::-webkit-scrollbar { width: 6px; }
+        #search-results::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }
         .search-result-item {
             padding: 12px;
-            border-bottom: 1px solid #f0f2f5;
+            border-bottom: 1px solid var(--header-border);
+        }
+        .search-result-item:hover {
+            background: var(--search-hover);
         }
         .search-result-item:last-child {
             border-bottom: none;
         }
         .search-result-item strong {
-            color: #2980b9;
+            color: #3498db;
             display: block;
             margin-bottom: 4px;
         }
+        .search-highlight {
+            background: rgba(241, 196, 15, 0.3);
+            border-radius: 3px;
+            padding: 0 2px;
+        }
         .kanban-panel {
             flex: 1.5;
             min-height: 0;
@@ -157,18 +292,18 @@
         }
         .kanban-column {
             flex: 1;
-            background: #f8f9fa;
+            background: var(--kanban-bg);
             border-radius: 6px;
             padding: 12px;
             display: flex;
             flex-direction: column;
             min-height: 0;
-            border: 1px solid #e1e8ed;
+            border: 1px solid var(--border-color);
         }
         .kanban-column h3 {
             margin: 0 0 12px 0;
             font-size: 0.85em;
-            color: #7f8c8d;
+            color: var(--text-secondary);
             text-align: center;
             text-transform: uppercase;
             letter-spacing: 0.5px;
@@ -186,29 +321,54 @@
             width: 6px;
         }
         .kanban-items::-webkit-scrollbar-thumb {
-            background-color: #bdc3c7;
+            background-color: var(--border-color);
             border-radius: 3px;
         }
         .task-card {
-            background: white;
+            background: var(--kanban-card);
             padding: 12px;
             border-radius: 6px;
             border-left: 4px solid #3498db;
             font-size: 0.85em;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
             line-height: 1.4;
+            position: relative;
         }
         .task-card.completed {
             border-left-color: #2ecc71;
-            background-color: #fcfcfc;
+            background-color: var(--kanban-completed-bg);
-            color: #7f8c8d;
+            color: var(--text-secondary);
         }
         .task-card strong {
-            color: #2c3e50;
+            color: var(--text-primary);
             display: block;
             margin-bottom: 6px;
             font-size: 1.05em;
+            padding-right: 25px; /* space for check button */
         }
+        .task-card.completed strong {
+            text-decoration: line-through;
+            color: var(--text-secondary);
+        }
+        .complete-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: none;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            font-size: 1em;
+            transition: all 0.2s;
+        }
+        .complete-btn:hover {
+            color: #2ecc71;
+            border-color: #2ecc71;
+            background: rgba(46, 204, 113, 0.1);
+        }
+        
         .activity-panel {
             height: 180px;
             margin-top: 20px;
@@ -218,15 +378,18 @@
             flex: 1;
             font-family: 'Consolas', 'Courier New', monospace;
             font-size: 0.85em;
-            background: #1e272e;
+            background: #111417;
             color: #4cd137;
             padding: 15px;
             border-radius: 6px;
-            box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
+            box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
         }
+        #activity-feed::-webkit-scrollbar { width: 6px; }
+        #activity-feed::-webkit-scrollbar-thumb { background-color: #2c3643; border-radius: 3px; }
         .feed-entry {
             margin-bottom: 6px;
             line-height: 1.4;
+            word-wrap: break-word;
         }
         .feed-entry .time {
             color: #7f8c8d;
@@ -237,18 +400,37 @@
 <body>
     <div class="header-bar">
         <h1>🧠 Antigravity Memory Hub</h1>
-        <div style="font-weight: 500;"><span class="status-dot"></span>System Online</div>
+        <div class="header-actions">
+            <button class="theme-toggle" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
+            <div style="font-weight: 500;"><span class="status-dot"></span>System Online</div>
+        </div>
     </div>
     
     <div class="main-container">
         <div class="panel graph-panel">
             <h2>Knowledge Graph</h2>
+            <div class="graph-filters" id="graph-filters">
+                <!-- Filters injected dynamically -->
+            </div>
             <div class="graph-controls">
                 <button onclick="zoomGraph(0.2)" title="Zoom In">+</button>
                 <button onclick="zoomGraph(-0.2)" title="Zoom Out">-</button>
                 <button onclick="resetGraph()" title="Reset View">⌂</button>
             </div>
-            <div id="network-container"></div>
+            <div id="network-container">
+                <div id="inspector-panel">
+                    <button id="inspector-close" onclick="closeInspector()">✕</button>
+                    <h2 id="inspector-title" style="margin-top:0; color:var(--text-primary);"></h2>
+                    <div class="inspector-meta">
+                        <div><strong>Type:</strong> <span id="inspector-type"></span></div>
+                        <div><strong>Namespace:</strong> <span id="inspector-namespace"></span></div>
+                    </div>
+                    <h4 style="margin:10px 0 5px 0;">Observations</h4>
+                    <ul id="inspector-observations" style="padding-left:20px; font-size:0.9em; line-height:1.4;"></ul>
+                    <h4 style="margin:15px 0 5px 0;">Relations</h4>
+                    <ul id="inspector-relations" style="padding-left:20px; font-size:0.9em; line-height:1.4;"></ul>
+                </div>
+            </div>
         </div>
         
         <div class="right-column">
@@ -280,7 +462,48 @@
     </div>
 
     <script>
-        // Graph Controls
+        // --- Theme Toggle ---
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+        }
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMatchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+
+        // --- Global Graph Data ---
+        let network = null;
+        let nodesData = new vis.DataSet();
+        let edgesData = new vis.DataSet();
+        let rawEntities = {};
+        let rawRelations = [];
+        let activeFilters = new Set();
+        let allTypes = new Set();
+
+        const typeColors = {
+            'Concept': { bg: '#9b59b6', border: '#8e44ad' },
+            'Technology': { bg: '#3498db', border: '#2980b9' },
+            'Infrastructure': { bg: '#e67e22', border: '#d35400' },
+            'Database_Table': { bg: '#f1c40f', border: '#f39c12' },
+            'Service': { bg: '#1abc9c', border: '#f39c12' },
+            'Tool': { bg: '#e74c3c', border: '#c0392b' },
+            'Integration': { bg: '#2ecc71', border: '#27ae60' },
+            'System': { bg: '#34495e', border: '#2c3e50' },
+            'Rule': { bg: '#fd79a8', border: '#e84393' }
+        };
+
+        function getColorForType(type) {
+            if (typeColors[type]) return typeColors[type];
+            // Hash string to color
+            let hash = 0;
+            for (let i = 0; i < type.length; i++) hash = type.charCodeAt(i) + ((hash << 5) - hash);
+            const hue = hash % 360;
+            return { background: `hsl(${hue}, 70%, 60%)`, border: `hsl(${hue}, 70%, 40%)` };
+        }
+
+        // --- Graph Controls ---
         function zoomGraph(step) {
             if (!network) return;
             const currentScale = network.getScale();
@@ -291,75 +514,124 @@
             network.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
         }
 
-        // Graph Initialization
+        // --- Graph Inspector ---
-        let network = null;
+        function closeInspector() {
-        let nodesData = new vis.DataSet();
+            document.getElementById('inspector-panel').classList.remove('open');
-        let edgesData = new vis.DataSet();
+            if (network) network.unselectAll();
+        }
+        function showInspector(nodeId) {
+            const entity = rawEntities[nodeId];
+            if (!entity) return;
+            
+            document.getElementById('inspector-title').innerText = entity.name;
+            document.getElementById('inspector-type').innerText = entity.entityType;
+            document.getElementById('inspector-namespace').innerText = entity.namespace || 'global';
+            
+            const obsHtml = (entity.observations || []).map(o => `<li>${o}</li>`).join('');
+            document.getElementById('inspector-observations').innerHTML = obsHtml || '<li><em>No observations recorded.</em></li>';
+            
+            const rels = rawRelations.filter(r => r.from === nodeId || r.to === nodeId);
+            const relHtml = rels.map(r => {
+                if (r.from === nodeId) return `<li>→ <em>${r.relationType}</em> → <strong>${r.to}</strong></li>`;
+                return `<li>← <em>${r.relationType}</em> ← <strong>${r.from}</strong></li>`;
+            }).join('');
+            document.getElementById('inspector-relations').innerHTML = relHtml || '<li><em>No direct relations.</em></li>';
+            
+            document.getElementById('inspector-panel').classList.add('open');
+        }
+
+        function toggleFilter(type) {
+            if (activeFilters.has(type)) activeFilters.delete(type);
+            else activeFilters.add(type);
+            renderFilters();
+            updateGraphData();
+        }
+
+        function renderFilters() {
+            const container = document.getElementById('graph-filters');
+            container.innerHTML = Array.from(allTypes).sort().map(type => {
+                const isActive = activeFilters.has(type);
+                const color = getColorForType(type).background;
+                return `<button class="filter-chip ${isActive ? 'active' : ''}" onclick="toggleFilter('${type}')">
+                    <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${color};margin-right:4px;"></span>
+                    ${type}
+                </button>`;
+            }).join('');
+        }
+
+        function updateGraphData() {
+            const newNodes = [];
+            const newEdges = [];
+            const nodeIds = new Set();
+            
+            for (const [name, entity] of Object.entries(rawEntities)) {
+                allTypes.add(entity.entityType);
+                // If filters are active, only show matching types
+                if (activeFilters.size > 0 && !activeFilters.has(entity.entityType)) continue;
+
+                const color = getColorForType(entity.entityType);
+                
+                newNodes.push({ 
+                    id: name, 
+                    label: name, 
+                    title: `<strong>${name}</strong><br/>${entity.entityType}`, 
+                    color: { background: color.bg || color.background, border: color.border },
+                    font: { color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#eee' : '#333' }
+                });
+                nodeIds.add(name);
+            }
+            
+            rawRelations.forEach(r => {
+                if (nodeIds.has(r.from) && nodeIds.has(r.to)) {
+                    newEdges.push({ 
+                        id: r.from + '-' + r.to + '-' + r.relationType, 
+                        from: r.from, 
+                        to: r.to, 
+                        label: r.relationType, 
+                        arrows: 'to',
+                        font: { color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#aaa' : '#666', strokeWidth: 0 }
+                    });
+                }
+            });
+            
+            const currentNodes = nodesData.getIds();
+            nodesData.remove(currentNodes.filter(id => !nodeIds.has(id)));
+            nodesData.update(newNodes);
+
+            const currentEdges = edgesData.getIds();
+            const newEdgeIds = new Set(newEdges.map(e => e.id));
+            edgesData.remove(currentEdges.filter(id => !newEdgeIds.has(id)));
+            edgesData.update(newEdges);
+            
+            renderFilters();
+        }
 
         async function loadGraph() {
             try {
                 const res = await fetch('/api/graph');
                 const data = await res.json();
                 
-                const newNodes = [];
+                rawEntities = data.entities || {};
-                const newEdges = [];
+                rawRelations = data.relations || [];
-                const nodeIds = new Set();
                 
-                for (const [name, entity] of Object.entries(data.entities)) {
+                updateGraphData();
-                    newNodes.push({ 
-                        id: name, 
-                        label: name, 
-                        title: entity.observations.join('\n') 
-                    });
-                    nodeIds.add(name);
-                }
-                
-                data.relations.forEach(r => {
-                    if (nodeIds.has(r.from) && nodeIds.has(r.to)) {
-                        newEdges.push({ 
-                            id: r.from + '-' + r.to + '-' + r.relationType, 
-                            from: r.from, 
-                            to: r.to, 
-                            label: r.relationType, 
-                            arrows: 'to' 
-                        });
-                    }
-                });
-                
-                // Sync nodes
-                const currentNodes = nodesData.getIds();
-                const toRemoveNodes = currentNodes.filter(id => !nodeIds.has(id));
-                nodesData.remove(toRemoveNodes);
-                nodesData.update(newNodes);
-
-                // Sync edges
-                const currentEdges = edgesData.getIds();
-                const newEdgeIds = new Set(newEdges.map(e => e.id));
-                const toRemoveEdges = currentEdges.filter(id => !newEdgeIds.has(id));
-                edgesData.remove(toRemoveEdges);
-                edgesData.update(newEdges);
                 
                 if (!network) {
                     const container = document.getElementById('network-container');
                     const options = {
-                        nodes: { 
+                        nodes: { shape: 'dot', size: 16, font: { size: 12 } },
-                            shape: 'dot', 
+                        edges: { color: { inherit: 'from', opacity: 0.6 }, font: { size: 10, align: 'middle' }, smooth: { type: 'continuous' } },
-                            size: 16, 
+                        physics: { barnesHut: { gravitationalConstant: -2000, centralGravity: 0.3, springLength: 95 } },
-                            font: { size: 12, color: '#333' }, 
-                            color: { background: '#3498db', border: '#2980b9' },
-                            shadow: true
-                        },
-                        edges: { 
-                            color: { color: '#bdc3c7' }, 
-                            font: { size: 10, align: 'middle' },
-                            smooth: { type: 'continuous' }
-                        },
-                        physics: { 
-                            barnesHut: { gravitationalConstant: -2000, centralGravity: 0.3, springLength: 95 } 
-                        },
                         interaction: { hover: true, tooltipDelay: 100 }
                     };
                     network = new vis.Network(container, { nodes: nodesData, edges: edgesData }, options);
+                    
+                    network.on("selectNode", function(params) {
+                        if (params.nodes.length > 0) showInspector(params.nodes[0]);
+                    });
+                    network.on("deselectNode", function(params) {
+                        if (params.nodes.length === 0) closeInspector();
+                    });
                 }
             } catch (err) {
                 console.error("Failed to load graph", err);
@@ -367,7 +639,14 @@
             }
         }
 
-        // Kanban Board Initialization
+        // --- Kanban Board ---
+        async function completeTask(id) {
+            try {
+                await fetch(`/api/tasks/${id}/complete`, { method: 'POST' });
+                loadTasks(); // Refresh UI instantly
+            } catch(e) { console.error("Failed to complete task", e); }
+        }
+
         async function loadTasks() {
             try {
                 const res = await fetch('/api/tasks');
@@ -380,24 +659,34 @@
                 
                 tasks.forEach(t => {
                     const card = document.createElement('div');
-                    card.className = `task-card ${t.status === 'completed' ? 'completed' : ''}`;
+                    const isCompleted = t.status === 'completed';
-                    card.innerHTML = `<strong>${t.title}</strong>${t.description}`;
+                    card.className = `task-card ${isCompleted ? 'completed' : ''}`;
                     
-                    if (t.status === 'completed') {
+                    let html = `<strong>${t.title}</strong>${t.description}`;
-                        doneContainer.appendChild(card);
+                    if (!isCompleted) {
-                    } else {
+                        html += `<button class="complete-btn" onclick="completeTask('${t.id}')" title="Mark Completed">✓</button>`;
-                        activeContainer.appendChild(card);
                     }
+                    card.innerHTML = html;
+                    
+                    if (isCompleted) doneContainer.appendChild(card);
+                    else activeContainer.appendChild(card);
                 });
             } catch (err) {
                 console.error("Failed to load tasks", err);
             }
         }
 
-        // Search
+        // --- Fuzzy-ish Search ---
+        function highlightText(text, query) {
+            if (!query) return text;
+            const regex = new RegExp(`(${query})`, 'gi');
+            return text.replace(regex, '<span class="search-highlight">$1</span>');
+        }
+
         async function handleSearch(e) {
-            if (e.key === 'Enter') {
+            const q = e.target.value;
-                const q = e.target.value;
+            // Provide live feedback if they type at least 3 characters, or hit Enter
+            if (e.key === 'Enter' || q.length >= 3 || q.length === 0) {
                 if (!q) {
                     document.getElementById('search-results').innerHTML = '';
                     return;
@@ -405,23 +694,28 @@
                 const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
                 const data = await res.json();
                 const container = document.getElementById('search-results');
+                
+                if (data.results.length === 0) {
+                    container.innerHTML = '<div style="padding:15px;color:var(--text-secondary);">No results found.</div>';
+                    return;
+                }
+                
                 container.innerHTML = data.results.map(r => `
-                    <div class="search-result-item">
+                    <div class="search-result-item" onclick="if(rawEntities['${r.type_name}']){ showInspector('${r.type_name}'); network.selectNodes(['${r.type_name}']); network.focus('${r.type_name}', {scale:1.2, animation:true}); }" style="cursor:pointer;">
-                        <strong>${r.type_name}</strong>
+                        <strong>${highlightText(r.type_name, q)}</strong>
-                        <div>${r.content.substring(0, 100)}...</div>
+                        <div>${highlightText(r.content.substring(0, 150), q)}...</div>
-                        <div style="font-size:0.85em;color:#95a5a6;margin-top:4px;">Score: ${r.score.toFixed(2)}</div>
+                        <div style="font-size:0.85em;color:var(--text-secondary);margin-top:4px;">Score: ${r.score.toFixed(2)}</div>
                     </div>
                 `).join('');
             }
         }
 
-        // SSE Activity Feed
+        // --- SSE Activity Feed ---
         function setupSSE() {
             const es = new EventSource('/sse');
             const feed = document.getElementById('activity-feed');
             
             es.addEventListener('activity', function(event) {
-                // If it's the endpoint initialization message, ignore it visually
                 if (event.data.startsWith('/messages?')) return;
                 
                 const div = document.createElement('div');
@@ -429,15 +723,24 @@
                 const time = new Date().toLocaleTimeString();
                 div.innerHTML = `<span class="time">[${time}]</span> ${event.data}`;
                 feed.appendChild(div);
-                feed.scrollTop = feed.scrollHeight;
+                
+                // Auto-scroll logic
+                const isScrolledToBottom = feed.scrollHeight - feed.clientHeight <= feed.scrollTop + 20;
+                if (isScrolledToBottom) {
+                    feed.scrollTop = feed.scrollHeight;
+                }
             });
         }
 
-        // Start
+        // --- Start ---
         loadGraph();
         loadTasks();
         setupSSE();
         
+        // Listen to theme toggle changes to update graph font colors
+        const observer = new MutationObserver(() => updateGraphData());
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+        
         setInterval(() => {
             loadGraph();
             loadTasks();
@@ -445,4 +748,3 @@
     </script>
 </body>
 </html>
-

server/src/main.rs

@@ -275,6 +275,22 @@ fn run_server(state: Arc<MemoryState>) -> Result<(), Box<dyn std::error::Error>>
                     axum::Json(graph)
                 }
             }))
+            
+            .route("/api/tasks/:id/complete", post({
+                let state_clone = app_state.handler.state.clone();
+                move |axum::extract::Path(id): axum::extract::Path<String>| async move {
+                    state_clone.tasks.modify(|tasks| {
+                        for t in tasks.iter_mut() {
+                            if t.id == id {
+                                t.status = "completed".to_string();
+                                break;
+                            }
+                        }
+                    });
+                    axum::Json(serde_json::json!({"status": "success"}))
+                }
+            }))
+
             .route("/api/tasks", get({
                 let state_clone = app_state.handler.state.clone();
                 move || async move {