riz/mcp-memory
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): enhance live activity formatting, add empty state placeholder, and add API unit tests

Browse Source
This commit is contained in:
Riz Ashraf committed 2026-10-05 13:05:08 +01:00
1 parent 19f9c7ace7
commit da3700d1d5
3 files changed
+154 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

server/src/api/setup.rs
+36
View File
@@ -713,6 +713,42 @@ mod tests {
assert!(js_str.contains("refreshActiveTab"));
assert!(js_str.contains("parseActivityPayload"));
}
#[tokio::test]
async fn test_activity_feed_and_empty_state() {
let (_app, app_state, _dir) = setup_app().await;
// 1. Initial GET /api/activity should return empty array []
let app_act = create_router(app_state.clone());
let req_act = Request::builder().uri("/api/activity").body(Body::empty()).unwrap();
let resp_act = app_act.oneshot(req_act).await.unwrap();
assert_eq!(resp_act.status(), StatusCode::OK);
let body_bytes = axum::body::to_bytes(resp_act.into_body(), usize::MAX).await.unwrap();
let json_str = String::from_utf8(body_bytes.to_vec()).unwrap();
assert_eq!(json_str.trim(), "[]");
// 2. Record an activity
app_state.handler.state.record_activity("code_change", "Refactored live activity UI", Some("Added empty state placeholder"));
// 3. GET /api/activity should now return recorded item
let app_act2 = create_router(app_state.clone());
let req_act2 = Request::builder().uri("/api/activity").body(Body::empty()).unwrap();
let resp_act2 = app_act2.oneshot(req_act2).await.unwrap();
assert_eq!(resp_act2.status(), StatusCode::OK);
let body_bytes2 = axum::body::to_bytes(resp_act2.into_body(), usize::MAX).await.unwrap();
let json_str2 = String::from_utf8(body_bytes2.to_vec()).unwrap();
assert!(json_str2.contains("CODE_CHANGE"));
assert!(json_str2.contains("Refactored live activity UI"));
// 4. Verify /dashboard.js contains empty state text
let app_js = create_router(app_state.clone());
let req_js = Request::builder().uri("/dashboard.js").body(Body::empty()).unwrap();
let resp_js = app_js.oneshot(req_js).await.unwrap();
assert_eq!(resp_js.status(), StatusCode::OK);
let js_bytes = axum::body::to_bytes(resp_js.into_body(), usize::MAX).await.unwrap();
let js_str = String::from_utf8(js_bytes.to_vec()).unwrap();
assert!(js_str.contains("No recent activity recorded yet."));
}
}
server/src/dashboard.js
+59 -5
View File
@@ -344,8 +344,40 @@ function parseActivityPayload(item) {
return parseActivityPayload(item.params);
}
category = (item.category || item.type || "TOOL").toUpperCase();
summary = item.summary || item.message || item.description || item.data || "";
details = item.details || "";
let rawSum = item.summary || item.message || item.description || item.data;
if (rawSum !== undefined && rawSum !== null) {
if (typeof rawSum === "object") {
summary = JSON.stringify(rawSum);
} else {
summary = String(rawSum);
}
}
if (!summary) {
if (item.title)
summary = String(item.title);
else if (item.name)
summary = String(item.name);
else if (item.action)
summary = String(item.action);
else if (item.content)
summary = String(item.content);
else {
const { timestamp: _t, time: _tm, updated_at: _u, category: _c, type: _tp, method: _m, params: _p, jsonrpc: _j, ...rest } = item;
if (Object.keys(rest).length > 0) {
summary = JSON.stringify(rest);
} else {
summary = JSON.stringify(item);
}
}
}
let rawDet = item.details;
if (rawDet !== undefined && rawDet !== null) {
if (typeof rawDet === "object") {
details = JSON.stringify(rawDet);
} else {
details = String(rawDet);
}
}
timestamp = item.timestamp || item.time || item.updated_at || timestamp;
if (typeof timestamp === "number" && timestamp < 10000000000) {
timestamp = timestamp * 1000;
@@ -356,15 +388,23 @@ function parseActivityPayload(item) {
GRAPH: "#2ecc71",
DECISION: "#f39c12",
CODE: "#3498db",
CODE_CHANGE: "#3498db",
TASK: "#1abc9c",
TASK_CREATE: "#1abc9c",
TASK_UPDATE: "#1abc9c",
CLIPBOARD: "#9b59b6",
STICKY_NOTE: "#e67e22",
CHECKPOINT: "#e74c3c",
ERROR_FIX: "#e74c3c",
TECH_DEBT: "#d35400",
SUBAGENT: "#8e44ad",
AGENT_SIGNAL: "#8e44ad",
SNIPPET: "#16a085",
TOOL: "#3498db",
EDITOR: "#9b59b6",
TERMINAL: "#27ae60",
SNAPSHOT: "#f1c40f",
NAMESPACE: "#e67e22",
SYSTEM: "#95a5a6"
};
const badgeColor = colorMap[catUpper] || "#3498db";
@@ -391,6 +431,10 @@ async function loadActivityHistory() {
if (!feed)
return;
feed.innerHTML = "";
if (!history || history.length === 0) {
feed.innerHTML = '<div style="padding:40px 20px; color:#a4b0be; text-align:center; font-family:sans-serif;">No recent activity recorded yet.<br/><span style="font-size:0.85em; opacity:0.8;">Live activity will stream here in real-time as MCP tools and system events execute.</span></div>';
return;
}
const getMillis = (item) => {
if (!item)
return 0;
@@ -427,18 +471,23 @@ async function loadActivityHistory() {
function setupWS() {
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
const ws = new WebSocket(`${protocol}//${location.host}/ws?client=ui`);
const feed = document.getElementById("activity-feed");
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.type === "activity" || data.method === "notifications/activity" || data.method === "notifications/task/completed" || data.method === "notifications/resources/updated") {
if (currentTabId !== "activity-tab") {
refreshActiveTab();
const isScrolledToTop = feed ? feed.scrollTop <= 20 : true;
}
const feed = document.getElementById("activity-feed");
if (feed) {
if (feed.querySelector(".feed-entry") === null) {
feed.innerHTML = "";
}
const isScrolledToTop = feed.scrollTop <= 20;
const div = document.createElement("div");
div.className = "feed-entry";
const payload = data.params || data.data || data;
div.innerHTML = parseActivityPayload(payload);
if (feed) {
feed.prepend(div);
while (feed.children.length > MAX_ACTIVITY_HISTORY && feed.lastChild) {
feed.removeChild(feed.lastChild);
@@ -619,9 +668,14 @@ function setupSSE() {
sse.onmessage = function(event) {
if (event.data) {
try {
if (currentTabId !== "activity-tab") {
refreshActiveTab();
}
const feed = document.getElementById("activity-feed");
if (feed) {
if (feed.querySelector(".feed-entry") === null) {
feed.innerHTML = "";
}
const isScrolledToTop = feed.scrollTop <= 20;
const div = document.createElement("div");
div.className = "feed-entry";
server/src/dashboard.ts
+59 -6
View File
@@ -538,8 +538,39 @@ function parseActivityPayload(item: any): string {
return parseActivityPayload(item.params);
}
category = (item.category || item.type || 'TOOL').toUpperCase();
summary = item.summary || item.message || item.description || item.data || '';
details = item.details || '';
let rawSum = item.summary || item.message || item.description || item.data;
if (rawSum !== undefined && rawSum !== null) {
if (typeof rawSum === 'object') {
summary = JSON.stringify(rawSum);
} else {
summary = String(rawSum);
}
}
if (!summary) {
if (item.title) summary = String(item.title);
else if (item.name) summary = String(item.name);
else if (item.action) summary = String(item.action);
else if (item.content) summary = String(item.content);
else {
const { timestamp: _t, time: _tm, updated_at: _u, category: _c, type: _tp, method: _m, params: _p, jsonrpc: _j, ...rest } = item;
if (Object.keys(rest).length > 0) {
summary = JSON.stringify(rest);
} else {
summary = JSON.stringify(item);
}
}
}
let rawDet = item.details;
if (rawDet !== undefined && rawDet !== null) {
if (typeof rawDet === 'object') {
details = JSON.stringify(rawDet);
} else {
details = String(rawDet);
}
}
timestamp = item.timestamp || item.time || item.updated_at || timestamp;
if (typeof timestamp === 'number' && timestamp < 10000000000) {
@@ -552,15 +583,23 @@ function parseActivityPayload(item: any): string {
'GRAPH': '#2ecc71',
'DECISION': '#f39c12',
'CODE': '#3498db',
'CODE_CHANGE': '#3498db',
'TASK': '#1abc9c',
'TASK_CREATE': '#1abc9c',
'TASK_UPDATE': '#1abc9c',
'CLIPBOARD': '#9b59b6',
'STICKY_NOTE': '#e67e22',
'CHECKPOINT': '#e74c3c',
'ERROR_FIX': '#e74c3c',
'TECH_DEBT': '#d35400',
'SUBAGENT': '#8e44ad',
'AGENT_SIGNAL': '#8e44ad',
'SNIPPET': '#16a085',
'TOOL': '#3498db',
'EDITOR': '#9b59b6',
'TERMINAL': '#27ae60',
'SNAPSHOT': '#f1c40f',
'NAMESPACE': '#e67e22',
'SYSTEM': '#95a5a6'
};
const badgeColor = colorMap[catUpper] || '#3498db';
@@ -586,6 +625,11 @@ async function loadActivityHistory(): Promise<void> {
if (!feed) return;
feed.innerHTML = '';
if (!history || history.length === 0) {
feed.innerHTML = '<div style="padding:40px 20px; color:#a4b0be; text-align:center; font-family:sans-serif;">No recent activity recorded yet.<br/><span style="font-size:0.85em; opacity:0.8;">Live activity will stream here in real-time as MCP tools and system events execute.</span></div>';
return;
}
const getMillis = (item: any): number => {
if (!item) return 0;
if (typeof item === 'string') {
@@ -620,20 +664,24 @@ async function loadActivityHistory(): Promise<void> {
function setupWS(): void {
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(`${protocol}//${location.host}/ws?client=ui`);
const feed = document.getElementById('activity-feed');
ws.onmessage = function(event: MessageEvent) {
try {
const data = JSON.parse(event.data);
if (data.type === 'activity' || data.method === 'notifications/activity' || data.method === 'notifications/task/completed' || data.method === 'notifications/resources/updated') {
if (currentTabId !== 'activity-tab') {
refreshActiveTab();
const isScrolledToTop = feed ? feed.scrollTop <= 20 : true;
}
const feed = document.getElementById('activity-feed');
if (feed) {
if (feed.querySelector('.feed-entry') === null) {
feed.innerHTML = '';
}
const isScrolledToTop = feed.scrollTop <= 20;
const div = document.createElement('div');
div.className = 'feed-entry';
const payload = data.params || data.data || data;
div.innerHTML = parseActivityPayload(payload);
if (feed) {
feed.prepend(div);
while (feed.children.length > MAX_ACTIVITY_HISTORY && feed.lastChild) {
feed.removeChild(feed.lastChild);
@@ -871,9 +919,14 @@ function setupSSE(): void {
sse.onmessage = function(event: MessageEvent) {
if (event.data) {
try {
if (currentTabId !== 'activity-tab') {
refreshActiveTab();
}
const feed = document.getElementById('activity-feed');
if (feed) {
if (feed.querySelector('.feed-entry') === null) {
feed.innerHTML = '';
}
const isScrolledToTop = feed.scrollTop <= 20;
const div = document.createElement('div');
div.className = 'feed-entry';