UI: Add tabs to dashboard and fix mcp capability regression
This commit is contained in:
Riz Ashraf committed
1 parent
d71b1e6e35
commit
34cf8fc8ca
3 files changed
+109
-44
No files matched your search
+107
-38
@@ -105,8 +105,9 @@
|
||||
}
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
}
|
||||
.panel {
|
||||
@@ -127,9 +128,11 @@
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.graph-panel {
|
||||
flex: 2;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Filter Bar */
|
||||
@@ -225,17 +228,58 @@
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.tab-button {
|
||||
padding: 8px 16px;
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.tab-button.active {
|
||||
opacity: 1;
|
||||
background: var(--bg-color);
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid var(--bg-color);
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
.tab-content {
|
||||
display: none;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: flex;
|
||||
}
|
||||
.right-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 300px;
|
||||
min-height: 0;
|
||||
}
|
||||
.right-column-panels {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.search-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
@@ -370,8 +414,9 @@
|
||||
}
|
||||
|
||||
.activity-panel {
|
||||
height: 180px;
|
||||
margin-top: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#activity-feed {
|
||||
overflow-y: auto;
|
||||
@@ -407,42 +452,50 @@
|
||||
</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 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 class="tabs">
|
||||
<button class="tab-button active" onclick="switchTab('graph-tab', this)">Graph Explorer</button>
|
||||
<button class="tab-button" onclick="switchTab('search-tab', this)">Omni-Search</button>
|
||||
<button class="tab-button" onclick="switchTab('task-tab', this)">Task Board</button>
|
||||
<button class="tab-button" onclick="switchTab('activity-tab', this)">Live Activity</button>
|
||||
</div>
|
||||
|
||||
<div id="graph-tab" class="tab-content active">
|
||||
<div class="panel graph-panel" style="flex:1;">
|
||||
<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 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>
|
||||
<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">
|
||||
|
||||
<div id="search-tab" class="tab-content">
|
||||
<div class="panel search-panel">
|
||||
<h2>Omni-Search</h2>
|
||||
<input type="text" id="search-box" placeholder="Search memory (e.g., 'database')..." onkeyup="handleSearch(event)">
|
||||
<div id="search-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="panel kanban-panel">
|
||||
<h2>Task Board</h2>
|
||||
<div class="kanban-board">
|
||||
</div>
|
||||
|
||||
<div id="task-tab" class="tab-content">
|
||||
<div class="panel kanban-panel" style="flex:1; display:flex; flex-direction:column;">
|
||||
<div class="kanban-board" style="flex:1;">
|
||||
<div class="kanban-column">
|
||||
<h3>TODO / IN PROGRESS</h3>
|
||||
<div class="kanban-items" id="tasks-active"></div>
|
||||
@@ -454,14 +507,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel activity-panel">
|
||||
<h2>Live Activity Feed</h2>
|
||||
<div id="activity-feed"></div>
|
||||
|
||||
<div id="activity-tab" class="tab-content">
|
||||
<div class="panel activity-panel" style="flex:1; display:flex; flex-direction:column;">
|
||||
<div id="activity-feed" style="flex:1;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Tabs ---
|
||||
function switchTab(tabId, btn) {
|
||||
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-button').forEach(el => el.classList.remove('active'));
|
||||
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
btn.classList.add('active');
|
||||
|
||||
if (tabId === 'graph-tab' && network) {
|
||||
// Resize graph when becoming visible again
|
||||
network.redraw();
|
||||
network.fit();
|
||||
}
|
||||
}
|
||||
|
||||
// --- Theme Toggle ---
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
|
||||
@@ -26,9 +26,7 @@ impl MemoryHandler {
|
||||
id,
|
||||
serde_json::json!({
|
||||
"protocolVersion": "2024-11-05",
|
||||
"capabilities": {
|
||||
"tools": {}
|
||||
},
|
||||
"capabilities": {},
|
||||
"serverInfo": {
|
||||
"name": "gemini-mcp-memory",
|
||||
"version": "3.0.0"
|
||||
|
||||
@@ -57,9 +57,7 @@ async fn main() {
|
||||
id,
|
||||
result: Some(json!({
|
||||
"protocolVersion": "2024-11-05",
|
||||
"capabilities": {
|
||||
"tools": {}
|
||||
},
|
||||
"capabilities": {},
|
||||
"serverInfo": {
|
||||
"name": "mcp-memory-win-nvim",
|
||||
"version": "0.1.0"
|
||||
|
||||
Reference in new issue
Block a user