Files
mcp-memory/server/src/dashboard.html
T

1160 lines
49 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: var(--bg-color);
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: var(--panel-bg);
padding: 15px 25px;
border-radius: 8px;
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: 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;
background-color: #2ecc71;
border-radius: 50%;
display: inline-block;
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-direction: column;
flex: 1;
gap: 10px;
min-height: 0;
}
.panel {
background: var(--panel-bg);
border-radius: 8px;
padding: 20px;
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: var(--text-primary);
font-size: 1.2em;
border-bottom: 2px solid var(--header-border);
padding-bottom: 10px;
}
.graph-panel {
flex: 1;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 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 var(--border-color);
border-radius: 6px;
background: var(--canvas-bg);
}
.graph-controls {
position: absolute;
top: 105px;
right: 35px;
z-index: 10;
display: flex;
flex-direction: column;
gap: 5px;
}
.graph-controls button {
background: var(--btn-bg);
border: 1px solid var(--btn-border);
border-radius: 4px;
width: 32px;
height: 32px;
cursor: pointer;
font-weight: bold;
color: var(--text-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: all 0.2s ease;
}
.graph-controls button:hover {
background: var(--btn-hover);
}
/* 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);
}
.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;
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%;
padding: 12px;
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 {
outline: none;
border-color: #3498db;
}
#search-results {
overflow-y: auto;
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 var(--header-border);
}
.search-result-item:hover {
background: var(--search-hover);
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item strong {
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;
}
.kanban-board {
display: flex;
gap: 15px;
flex: 1;
min-height: 0;
}
.kanban-column {
flex: 1;
background: var(--kanban-bg);
border-radius: 6px;
padding: 12px;
display: flex;
flex-direction: column;
min-height: 0;
border: 1px solid var(--border-color);
}
.kanban-column h3 {
margin: 0 0 12px 0;
font-size: 0.85em;
color: var(--text-secondary);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kanban-items {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 5px;
padding-bottom: 15px;
}
.kanban-items::-webkit-scrollbar {
width: 6px;
}
.kanban-items::-webkit-scrollbar-thumb {
background-color: var(--border-color);
border-radius: 3px;
}
.task-card {
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.15);
line-height: 1.4;
position: relative;
}
.task-card.completed {
border-left-color: #2ecc71;
background-color: var(--kanban-completed-bg);
color: var(--text-secondary);
}
.task-card strong {
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);
}
/* Sticky Notes */
.sticky-note {
background-color: #f1c40f;
color: #2c3e50;
padding: 15px;
border-radius: 4px;
width: 250px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
position: relative;
font-size: 0.9em;
line-height: 1.4;
}
.sticky-note:hover {
transform: scale(1.02);
box-shadow: 2px 4px 12px rgba(0,0,0,0.2);
transition: all 0.2s ease;
}
.activity-panel {
flex: 1;
display: flex;
flex-direction: column;
}
#activity-feed {
overflow-y: auto;
flex: 1;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.85em;
background: #111417;
color: #4cd137;
padding: 15px;
border-radius: 6px;
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;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="header-bar">
<div>
<h1 style="display:inline-block; margin:0;">🧠 Antigravity Memory Hub</h1>
<span id="app-version" style="font-size:0.8em; color:var(--text-secondary); margin-left:12px; font-family:monospace;"></span>
</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="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('sticky-tab', this)">Sticky Notes</button>
<button class="tab-button" onclick="switchTab('techdebt-tab', this)">Tech Debt</button>
<button class="tab-button" onclick="switchTab('adrs-tab', this)">Decisions (ADR)</button>
<button class="tab-button" onclick="switchTab('workspaces-tab', this)">Workspaces</button>
<button class="tab-button" onclick="switchTab('memos-tab', this)">Handoffs</button>
<button class="tab-button" onclick="switchTab('snippets-tab', this)">Snippets</button>
<button class="tab-button" onclick="switchTab('pr-tab', this)">PRs</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>
</div>
</div>
</div>
<div id="search-tab" class="tab-content">
<div class="panel search-panel">
<input type="text" id="search-box" placeholder="Search memory (e.g., 'database')..." onkeyup="handleSearch(event)">
<div id="search-results"></div>
</div>
</div>
<div id="task-tab" class="tab-content">
<div class="panel kanban-panel" style="flex:1; display:flex; flex-direction:column;">
<h3 style="margin-top:0;">Task Network (HTN)</h3>
<div class="kanban-items" id="task-tree-container" style="flex:1; border: 1px solid var(--border-color); padding:15px; border-radius:6px; background:var(--canvas-bg);"></div>
</div>
</div>
<div id="sticky-tab" class="tab-content">
<div class="panel sticky-panel" style="flex:1; display:flex; flex-direction:column;">
<h2>Sticky Notes</h2>
<div id="sticky-notes-container" style="flex:1; overflow-y:auto; display:flex; flex-wrap:wrap; gap:15px; align-items:flex-start; align-content:flex-start;"></div>
</div>
</div>
<div id="techdebt-tab" class="tab-content">
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
<h2>Tech Debt</h2>
<div id="techdebt-container" style="display:flex; flex-direction:column; gap:15px; margin-bottom: 20px;"></div>
<h2 style="border-top: 1px solid var(--border-color); padding-top: 15px;">Resolved Error Patterns</h2>
<div id="errorfixes-container" style="display:flex; flex-direction:column; gap:15px;"></div>
</div>
</div>
<div id="adrs-tab" class="tab-content">
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
<h2>Architecture Decision Records</h2>
<div id="adrs-container" style="display:flex; flex-direction:column; gap:15px;"></div>
</div>
</div>
<div id="workspaces-tab" class="tab-content">
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
<h2>Context Workspaces</h2>
<div id="workspaces-container" style="display:flex; flex-direction:column; gap:15px;"></div>
</div>
</div>
<div id="memos-tab" class="tab-content">
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
<h2>Handoff Memos & Milestones</h2>
<div id="memos-container" style="display:flex; flex-direction:column; gap:15px;"></div>
</div>
</div>
<div id="snippets-tab" class="tab-content">
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
<h2>Snippets Library</h2>
<div id="snippets-container" style="display:flex; flex-direction:column; gap:15px;"></div>
</div>
</div>
<div id="pr-tab" class="tab-content">
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
<h2>PR Checklists</h2>
<div id="pr-container" style="display:flex; flex-direction:column; gap:15px;"></div>
</div>
</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();
loadGraph();
} else if (tabId === 'activity-tab') {
const feed = document.getElementById('activity-feed');
feed.scrollTop = feed.scrollHeight;
} else if (tabId === 'task-tab') {
loadTasks();
} else if (tabId === 'sticky-tab') {
loadStickyNotes();
} else {
loadAllExtras();
}
}
// --- 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();
network.moveTo({ scale: currentScale * (1 + step) });
}
function resetGraph() {
if (!network) return;
network.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
}
// --- Graph Inspector ---
function closeInspector() {
document.getElementById('inspector-panel').classList.remove('open');
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.entity_type;
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.relation_type}</em> → <strong>${r.to}</strong></li>`;
return `<li>← <em>${r.relation_type}</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.entity_type);
// If filters are active, only show matching types
if (activeFilters.size > 0 && !activeFilters.has(entity.entity_type)) continue;
const color = getColorForType(entity.entity_type);
newNodes.push({
id: name,
label: name,
title: `${name}\nType: ${entity.entity_type}`,
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.relation_type,
from: r.from,
to: r.to,
label: r.relation_type,
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();
rawEntities = data.entities || {};
rawRelations = data.relations || [];
updateGraphData();
if (!network) {
const container = document.getElementById('network-container');
const options = {
nodes: { shape: 'dot', size: 16, font: { size: 12 } },
edges: { color: { inherit: 'from', opacity: 0.6 }, font: { size: 10, align: 'middle' }, smooth: { type: 'continuous' } },
physics: { barnesHut: { gravitationalConstant: -2000, centralGravity: 0.3, springLength: 95 } },
interaction: { hover: true, tooltipDelay: 100, zoomView: false }
};
network = new vis.Network(container, { nodes: nodesData, edges: edgesData }, options);
container.addEventListener('wheel', function(event) {
event.preventDefault();
const direction = event.deltaY > 0 ? -0.15 : 0.15;
zoomGraph(direction);
}, { passive: false });
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);
document.getElementById("network-container").innerHTML = '<div style="color:#e74c3c;padding:20px;font-weight:bold;">Error loading graph: ' + err.message + '</div>';
}
}
// --- Task Tree (HTN/DAG) ---
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); }
}
function buildTaskTreeHTML(tasks, parentId, depth = 0) {
let html = '';
const children = tasks.filter(t => {
const pid = t.parent_id;
if (!parentId) return !pid; // If looking for root, return tasks with no parent
return pid === parentId;
});
if (children.length === 0) return html;
children.forEach(t => {
const isCompleted = t.status === 'completed' || t.status === 'done';
const isCancelled = t.status === 'cancelled' || t.status === 'abandoned';
let cardClass = 'task-card';
if (isCompleted) cardClass += ' completed';
if (isCancelled) cardClass += ' cancelled';
// Find blockers
let isBlocked = false;
let blockers = [];
const deps = t.dependencies || [];
deps.forEach(depId => {
const depTask = tasks.find(dt => dt.id === depId);
if (depTask && depTask.status !== 'completed' && depTask.status !== 'done') {
isBlocked = true;
blockers.push(depTask.title);
}
});
// Child progress
const allChildren = tasks.filter(ct => (ct.parentId || ct.parent_id) === t.id);
const completedChildren = allChildren.filter(ct => ct.status === 'completed' || ct.status === 'done');
let progressHtml = '';
if (allChildren.length > 0) {
const pct = Math.round((completedChildren.length / allChildren.length) * 100);
progressHtml = `
<div style="margin-top:10px; background:#e1e8ed; border-radius:4px; height:8px; overflow:hidden;">
<div style="background:#3498db; width:${pct}%; height:100%; transition:width 0.3s;"></div>
</div>
<div style="font-size:0.8em; color:var(--text-secondary); text-align:right; margin-top:2px;">${pct}% (${completedChildren.length}/${allChildren.length} child tasks)</div>
`;
if (completedChildren.length < allChildren.length) {
isBlocked = true; // Implicitly blocked by children
}
}
html += `<div class="${cardClass}" style="margin-left: ${depth * 20}px; margin-bottom: 10px;">`;
if (isBlocked && !isCompleted && !isCancelled) {
html += `<div style="background:#e74c3c; color:white; font-size:0.75em; padding:2px 6px; border-radius:3px; display:inline-block; margin-bottom:6px; font-weight:bold;">[BLOCKED]</div>`;
if (blockers.length > 0) {
html += `<div style="font-size:0.8em; color:#e74c3c; margin-bottom:6px;">Waiting on: ${blockers.join(', ')}</div>`;
}
}
if (isCancelled) {
html += `<div style="background:#95a5a6; color:white; font-size:0.75em; padding:2px 6px; border-radius:3px; display:inline-block; margin-bottom:6px; font-weight:bold;">[CANCELLED]</div>`;
}
html += `<strong>${t.title}</strong>${t.description}`;
const criteria = t.acceptance_criteria || [];
if (criteria.length > 0) {
html += `<ul style="margin:8px 0 0 0; padding-left:20px; font-size: 0.9em; color: var(--text-secondary);">`;
let unmetCriteria = false;
criteria.forEach(c => {
const isMet = c.is_met;
if (!isMet) unmetCriteria = true;
const check = isMet ? '☑' : '☐';
const strike = isMet ? 'text-decoration: line-through;' : '';
html += `<li style="${strike}">${check} ${c.description}</li>`;
});
html += `</ul>`;
if (unmetCriteria && !isCompleted && !isCancelled) isBlocked = true;
}
html += progressHtml;
if (!isCompleted && !isCancelled && !isBlocked) {
html += `<button class="complete-btn" onclick="completeTask('${t.id}')" title="Mark Completed">✓</button>`;
}
// Recursively render children
if (allChildren.length > 0) {
html += `<div style="margin-top: 15px; border-left: 2px solid var(--border-color); padding-left: 10px;">`;
html += buildTaskTreeHTML(tasks, t.id, 0); // Reset depth since we use margin-left on wrapper
html += `</div>`;
}
html += `</div>`;
});
return html;
}
async function loadTasks() {
try {
const res = await fetch('/api/tasks');
const tasks = await res.json();
const taskContainer = document.getElementById('task-tree-container');
if (!taskContainer) return;
// Find root tasks (no parent)
const rootHtml = buildTaskTreeHTML(tasks, null, 0);
if (!rootHtml) {
taskContainer.innerHTML = '<div style="color:var(--text-secondary); padding:20px; text-align:center;">No active tasks.</div>';
} else {
taskContainer.innerHTML = rootHtml;
}
} catch (err) {
console.error("Failed to load tasks", err);
}
}
// --- 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) {
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;
}
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" onclick="if(rawEntities['${r.id}']){ showInspector('${r.id}'); network.selectNodes(['${r.id}']); network.focus('${r.id}', {scale:1.2, animation:true}); }" style="cursor:pointer;">
<div style="display:flex; justify-content:space-between; align-items:flex-start;">
<div>
<strong>${highlightText(r.title, q)}</strong>
<span style="font-size: 0.7em; color: var(--text-secondary); background: var(--canvas-bg); padding: 2px 6px; border-radius: 4px; margin-left: 8px; text-transform: uppercase; border: 1px solid var(--border-color);">${r.type_name}</span>
</div>
<div style="font-size:0.75em; color:var(--text-secondary);">${r.score.toFixed(2)}</div>
</div>
<div style="margin-top:6px; font-size:0.9em; line-height:1.4;">${highlightText(r.content.substring(0, 150), q)}${r.content.length > 150 ? '...' : ''}</div>
<div style="font-size:0.75em; color:var(--text-secondary); margin-top:8px; font-family:monospace; background: var(--canvas-bg); padding: 2px 4px; border-radius: 3px; display: inline-block;">ID: ${r.id}</div>
</div>
`).join('');
}
}
// --- WebSocket Activity Feed ---
const MAX_ACTIVITY_HISTORY = 100;
async function loadActivityHistory() {
try {
const response = await fetch('/api/activity');
const history = await response.json();
const feed = document.getElementById('activity-feed');
feed.innerHTML = '';
history.forEach(item => {
const div = document.createElement('div');
div.className = 'feed-entry';
const timeStr = new Date(item.time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
div.innerHTML = `<span class="time">[${timeStr}]</span> ${item.message || item.data}`;
feed.appendChild(div);
});
if (history.length > 0) {
feed.scrollTop = feed.scrollHeight;
}
} catch(e) {}
}
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') {
// Check scroll state before appending
const isScrolledToBottom = feed.scrollHeight - feed.clientHeight <= feed.scrollTop + 20;
const div = document.createElement('div');
div.className = 'feed-entry';
const timeStr = new Date(data.data.time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
div.innerHTML = `<span class="time">[${timeStr}]</span> ${data.data.message || data.data.data || data.data}`;
feed.appendChild(div);
// Enforce max history
while (feed.children.length > MAX_ACTIVITY_HISTORY) {
feed.removeChild(feed.firstChild);
}
// Auto-scroll logic
if (isScrolledToBottom) {
feed.scrollTop = feed.scrollHeight;
}
}
} catch (e) {
// Ignore non-JSON or other messages for now
}
};
ws.onclose = function() {
console.log("WebSocket closed, attempting to reconnect in 3s...");
setTimeout(setupWS, 3000);
};
}
async function loadStickyNotes() {
try {
const res = await fetch('/api/sticky');
const sticky = await res.json();
const container = document.getElementById('sticky-notes-container');
container.innerHTML = '';
sticky.forEach(note => {
const card = document.createElement('div');
card.className = 'sticky-note';
const date = new Date(note.timestamp * 1000).toLocaleString();
card.innerHTML = `<div style="font-size:0.75em; color:#7f8c8d; margin-bottom:8px;">${date}</div>
<div>${note.content}</div>`;
container.appendChild(card);
});
} catch (err) {
console.error("Failed to load sticky notes", err);
}
}
async function loadGenericList(endpoint, containerId, formatter) {
try {
const res = await fetch(endpoint);
const data = await res.json();
const container = document.getElementById(containerId);
if (!container) return;
if (!data || data.length === 0) {
container.innerHTML = '<div style="color:var(--text-secondary); padding:20px; text-align:center;">No items recorded.</div>';
return;
}
container.innerHTML = data.map(item => {
const date = item.timestamp ? new Date(item.timestamp * 1000).toLocaleString() : '';
return `<div class="task-card" style="border-left-color: #9b59b6;">
<div style="font-size:0.75em; color:var(--text-secondary); float:right;">${date}</div>
${formatter(item)}
</div>`;
}).join('');
} catch (err) {
console.error(`Failed to load ${endpoint}`, err);
}
}
function loadAllExtras() {
loadGenericList('/api/tech_debts', 'techdebt-container', item => `
<strong>${item.id}</strong> ${item.is_resolved ? '<span style="color:var(--success-color);">(Resolved)</span>' : '<span style="color:var(--error-color);">(Open)</span>'}
<div style="margin-top:5px;"><strong>Description:</strong> ${item.description}</div>
<div style="margin-top:5px;"><strong>Ideal Solution:</strong> ${item.ideal_solution}</div>
<div style="margin-top:10px;">
<span style="background:var(--canvas-bg); padding:2px 6px; border-radius:4px; font-size:0.8em; margin-right:8px; border:1px solid var(--border-color);">Git Commit: ${item.git_commit || 'None'}</span>
<span style="background:var(--canvas-bg); padding:2px 6px; border-radius:4px; font-size:0.8em; border:1px solid var(--border-color);">Branch: ${item.git_branch || 'None'}</span>
</div>
`);
loadGenericList('/api/error_fixes', 'errorfixes-container', item => `
<strong>${item.error_message || 'Error'}</strong>
<div style="font-size:0.9em; margin-bottom:8px;"><em>Fix:</em> ${item.fix_description || ''}</div>
<div style="font-family:monospace; font-size:0.85em; color:#e74c3c;">Files: ${(item.files_changed || []).join(', ')}</div>
`);
loadGenericList('/api/adrs', 'adrs-container', item => `
<strong>${item.id} | ${item.title}</strong>
<span style="float:right; background:var(--canvas-bg); padding:2px 6px; border-radius:4px; font-size:0.8em; border:1px solid var(--border-color); ${item.status === 'superseded' ? 'text-decoration: line-through; color:var(--error-color);' : 'color:var(--success-color);'}">${item.status}</span>
<div style="font-size:0.9em; margin-bottom:8px; margin-top:8px;"><em>Context:</em> ${item.context || ''}</div>
<div style="font-size:0.9em; margin-bottom:8px;"><em>Decision:</em> ${item.decision || ''}</div>
<div style="font-size:0.9em; margin-bottom:8px;"><em>Consequence:</em> ${item.consequence || ''}</div>
${item.supersedes ? `<div style="font-size:0.9em; font-weight:bold; color:var(--warning-color);">Supersedes: ${item.supersedes}</div>` : ''}
`);
loadGenericList('/api/context_workspaces', 'workspaces-container', item => `
<strong>${item.name}</strong>
<div style="margin-bottom:8px;">${item.description || ''}</div>
<div style="font-family:monospace; font-size:0.85em; color:#3498db;">${(item.paths || []).join(', ')}</div>
`);
loadGenericList('/api/handoff_memos', 'memos-container', item => `
<strong>Memo from ${item.author || 'System'}</strong>
<div style="white-space:pre-wrap; font-size:0.9em; line-height:1.4;">${item.content || item.summary || ''}</div>
`);
loadGenericList('/api/snippets', 'snippets-container', item => `
<strong>${item.description || 'Snippet'}</strong>
<div style="margin-bottom:8px; font-size:0.8em;">Language: ${item.language || 'txt'} | Tags: ${(item.tags || []).join(', ')}</div>
<pre style="background:#111417; color:#d1d8e0; padding:10px; border-radius:4px; overflow-x:auto; font-size:0.85em;">${item.content || item.code || ''}</pre>
`);
loadGenericList('/api/pr_checklists', 'pr-container', item => `
<strong>${item.name || 'Checklist'}</strong>
<ul style="padding-left:20px; font-size:0.9em;">
${(item.items || []).map(i => {
const check = i.is_completed ? '☑' : '☐';
const strike = i.is_completed ? 'text-decoration:line-through; color:var(--text-secondary);' : '';
return `<li style="${strike}">${check} ${i.description}</li>`;
}).join('')}
</ul>
`);
}
async function loadVersion() {
try {
const res = await fetch('/api/version');
const data = await res.json();
const verEl = document.getElementById('app-version');
if (verEl) {
verEl.textContent = `v${data.version}`;
}
} catch (err) {
console.error("Failed to load version", err);
}
}
// --- Start ---
loadVersion();
loadGraph();
loadTasks();
loadStickyNotes();
loadActivityHistory();
loadAllExtras();
setupWS();
// 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();
loadStickyNotes();
loadAllExtras();
}, 5000);
</script>
</body>
</html>