1172 lines
49 KiB
HTML
1172 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('pinned-tab', this)">Pinned Files</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="pinned-tab" class="tab-content">
|
|
<div class="panel" style="flex:1; display:flex; flex-direction:column; overflow-y:auto;">
|
|
<h2>Pinned Files</h2>
|
|
<div id="pinned-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 & Session Summaries</h2>
|
|
<div id="memos-container" style="display:flex; flex-direction:column; gap:15px; margin-bottom: 30px;"></div>
|
|
<h2>Project Milestones</h2>
|
|
<div id="milestones-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 = 0;
|
|
} 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 = 0;
|
|
}
|
|
} 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 (isScrolledToTop) {
|
|
feed.scrollTop = 0;
|
|
}
|
|
}
|
|
} 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>
|