forked from Rockachopa/Timmy-time-dashboard
320 lines
12 KiB
HTML
320 lines
12 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Mission Control — Timmy Time{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<h2 class="card-title">🎛️ Mission Control</h2>
|
||
|
|
<div>
|
||
|
|
<span class="badge badge-success" id="system-status">Loading...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sovereignty Score -->
|
||
|
|
<div style="margin-bottom: 24px;">
|
||
|
|
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;">
|
||
|
|
<div style="font-size: 3rem; font-weight: 700;" id="sov-score">-</div>
|
||
|
|
<div>
|
||
|
|
<div style="font-weight: 600;">Sovereignty Score</div>
|
||
|
|
<div style="font-size: 0.875rem; color: var(--text-muted);" id="sov-label">Calculating...</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="background: var(--bg-tertiary); height: 8px; border-radius: 4px; overflow: hidden;">
|
||
|
|
<div id="sov-bar" style="background: var(--success); height: 100%; width: 0%; transition: width 0.5s;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Dependency Grid -->
|
||
|
|
<h3 style="margin-bottom: 12px;">Dependencies</h3>
|
||
|
|
<div class="grid grid-2" id="dependency-grid" style="margin-bottom: 24px;">
|
||
|
|
<p style="color: var(--text-muted);">Loading...</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Recommendations -->
|
||
|
|
<h3 style="margin-bottom: 12px;">Recommendations</h3>
|
||
|
|
<div id="recommendations" style="margin-bottom: 24px;">
|
||
|
|
<p style="color: var(--text-muted);">Loading...</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- System Metrics -->
|
||
|
|
<h3 style="margin-bottom: 12px;">System Metrics</h3>
|
||
|
|
<div class="grid grid-4" id="metrics-grid">
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="metric-uptime">-</div>
|
||
|
|
<div class="stat-label">Uptime</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="metric-agents">-</div>
|
||
|
|
<div class="stat-label">Agents</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="metric-tasks">-</div>
|
||
|
|
<div class="stat-label">Tasks</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="metric-earned">-</div>
|
||
|
|
<div class="stat-label">Sats Earned</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Heartbeat Monitor -->
|
||
|
|
<div class="card" style="margin-top: 24px;">
|
||
|
|
<div class="card-header">
|
||
|
|
<h2 class="card-title">💓 Heartbeat Monitor</h2>
|
||
|
|
<div>
|
||
|
|
<span class="badge" id="heartbeat-status">Checking...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-3">
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="hb-tick">-</div>
|
||
|
|
<div class="stat-label">Last Tick</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="hb-backend">-</div>
|
||
|
|
<div class="stat-label">LLM Backend</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<div class="stat-value" id="hb-model">-</div>
|
||
|
|
<div class="stat-label">Model</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 16px;">
|
||
|
|
<div id="heartbeat-log" style="height: 100px; overflow-y: auto; background: var(--bg-tertiary); padding: 12px; border-radius: 8px; font-family: monospace; font-size: 0.75rem;">
|
||
|
|
<div style="color: var(--text-muted);">Waiting for heartbeat...</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Chat History -->
|
||
|
|
<div class="card" style="margin-top: 24px;">
|
||
|
|
<div class="card-header">
|
||
|
|
<h2 class="card-title">💬 Chat History</h2>
|
||
|
|
<div>
|
||
|
|
<button class="btn btn-sm" onclick="loadChatHistory()">Refresh</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="chat-history" style="max-height: 300px; overflow-y: auto;">
|
||
|
|
<p style="color: var(--text-muted);">Loading chat history...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Load sovereignty status
|
||
|
|
async function loadSovereignty() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/health/sovereignty');
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
// Update score
|
||
|
|
document.getElementById('sov-score').textContent = data.overall_score.toFixed(1);
|
||
|
|
document.getElementById('sov-score').style.color = data.overall_score >= 9 ? 'var(--success)' :
|
||
|
|
data.overall_score >= 7 ? 'var(--warning)' : 'var(--danger)';
|
||
|
|
document.getElementById('sov-bar').style.width = (data.overall_score * 10) + '%';
|
||
|
|
document.getElementById('sov-bar').style.background = data.overall_score >= 9 ? 'var(--success)' :
|
||
|
|
data.overall_score >= 7 ? 'var(--warning)' : 'var(--danger)';
|
||
|
|
|
||
|
|
// Update label
|
||
|
|
let label = 'Poor';
|
||
|
|
if (data.overall_score >= 9) label = 'Excellent';
|
||
|
|
else if (data.overall_score >= 8) label = 'Good';
|
||
|
|
else if (data.overall_score >= 6) label = 'Fair';
|
||
|
|
document.getElementById('sov-label').textContent = `${label} — ${data.dependencies.length} dependencies checked`;
|
||
|
|
|
||
|
|
// Update system status
|
||
|
|
const systemStatus = document.getElementById('system-status');
|
||
|
|
if (data.overall_score >= 9) {
|
||
|
|
systemStatus.textContent = 'Sovereign';
|
||
|
|
systemStatus.className = 'badge badge-success';
|
||
|
|
} else if (data.overall_score >= 7) {
|
||
|
|
systemStatus.textContent = 'Operational';
|
||
|
|
systemStatus.className = 'badge badge-warning';
|
||
|
|
} else {
|
||
|
|
systemStatus.textContent = 'Degraded';
|
||
|
|
systemStatus.className = 'badge badge-danger';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update dependency grid
|
||
|
|
const grid = document.getElementById('dependency-grid');
|
||
|
|
grid.innerHTML = '';
|
||
|
|
data.dependencies.forEach(dep => {
|
||
|
|
const card = document.createElement('div');
|
||
|
|
card.className = 'card';
|
||
|
|
card.style.padding = '12px';
|
||
|
|
|
||
|
|
const statusColor = dep.status === 'healthy' ? 'var(--success)' :
|
||
|
|
dep.status === 'degraded' ? 'var(--warning)' : 'var(--danger)';
|
||
|
|
const scoreColor = dep.sovereignty_score >= 9 ? 'var(--success)' :
|
||
|
|
dep.sovereignty_score >= 7 ? 'var(--warning)' : 'var(--danger)';
|
||
|
|
|
||
|
|
card.innerHTML = `
|
||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||
|
|
<strong>${dep.name}</strong>
|
||
|
|
<span class="badge" style="background: ${statusColor};">${dep.status}</span>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 0.875rem; color: var(--text-muted); margin-bottom: 8px;">
|
||
|
|
${dep.details.error || dep.details.note || 'Operating normally'}
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 0.75rem; color: ${scoreColor};">
|
||
|
|
Sovereignty: ${dep.sovereignty_score}/10
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
grid.appendChild(card);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update recommendations
|
||
|
|
const recs = document.getElementById('recommendations');
|
||
|
|
if (data.recommendations && data.recommendations.length > 0) {
|
||
|
|
recs.innerHTML = '<ul>' + data.recommendations.map(r => `<li>${r}</li>`).join('') + '</ul>';
|
||
|
|
} else {
|
||
|
|
recs.innerHTML = '<p style="color: var(--text-muted);">No recommendations — system optimal</p>';
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load sovereignty:', error);
|
||
|
|
document.getElementById('system-status').textContent = 'Error';
|
||
|
|
document.getElementById('system-status').className = 'badge badge-danger';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load basic health
|
||
|
|
async function loadHealth() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/health');
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
// Format uptime
|
||
|
|
const uptime = data.uptime_seconds;
|
||
|
|
let uptimeStr;
|
||
|
|
if (uptime < 60) uptimeStr = Math.floor(uptime) + 's';
|
||
|
|
else if (uptime < 3600) uptimeStr = Math.floor(uptime / 60) + 'm';
|
||
|
|
else uptimeStr = Math.floor(uptime / 3600) + 'h ' + Math.floor((uptime % 3600) / 60) + 'm';
|
||
|
|
|
||
|
|
document.getElementById('metric-uptime').textContent = uptimeStr;
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load health:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load swarm stats
|
||
|
|
async function loadSwarmStats() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/swarm');
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
document.getElementById('metric-agents').textContent = data.agents || 0;
|
||
|
|
document.getElementById('metric-tasks').textContent =
|
||
|
|
(data.tasks_pending || 0) + (data.tasks_running || 0);
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load swarm stats:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load Lightning stats
|
||
|
|
async function loadLightningStats() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/serve/status');
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
document.getElementById('metric-earned').textContent = data.total_earned_sats || 0;
|
||
|
|
|
||
|
|
// Update heartbeat backend
|
||
|
|
document.getElementById('hb-backend').textContent = data.backend || '-';
|
||
|
|
document.getElementById('hb-model').textContent = 'llama3.2'; // From config
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load lightning stats:', error);
|
||
|
|
document.getElementById('metric-earned').textContent = '-';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Heartbeat simulation
|
||
|
|
let tickCount = 0;
|
||
|
|
function updateHeartbeat() {
|
||
|
|
tickCount++;
|
||
|
|
const now = new Date().toLocaleTimeString();
|
||
|
|
document.getElementById('hb-tick').textContent = now;
|
||
|
|
document.getElementById('heartbeat-status').textContent = 'Active';
|
||
|
|
document.getElementById('heartbeat-status').className = 'badge badge-success';
|
||
|
|
|
||
|
|
const log = document.getElementById('heartbeat-log');
|
||
|
|
const entry = document.createElement('div');
|
||
|
|
entry.style.marginBottom = '2px';
|
||
|
|
entry.innerHTML = `<span style="color: var(--text-muted);">[${now}]</span> <span style="color: var(--success);">✓</span> Tick ${tickCount}`;
|
||
|
|
log.appendChild(entry);
|
||
|
|
log.scrollTop = log.scrollHeight;
|
||
|
|
|
||
|
|
// Keep only last 50 entries
|
||
|
|
while (log.children.length > 50) {
|
||
|
|
log.removeChild(log.firstChild);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load chat history
|
||
|
|
async function loadChatHistory() {
|
||
|
|
const container = document.getElementById('chat-history');
|
||
|
|
container.innerHTML = '<p style="color: var(--text-muted);">Loading...</p>';
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Try to load from the message log endpoint if available
|
||
|
|
const response = await fetch('/dashboard/messages');
|
||
|
|
const messages = await response.json();
|
||
|
|
|
||
|
|
if (messages.length === 0) {
|
||
|
|
container.innerHTML = '<p style="color: var(--text-muted);">No messages yet</p>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
container.innerHTML = '';
|
||
|
|
messages.slice(-20).forEach(msg => {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.style.marginBottom = '12px';
|
||
|
|
div.style.padding = '8px';
|
||
|
|
div.style.background = msg.role === 'user' ? 'var(--bg-tertiary)' : 'transparent';
|
||
|
|
div.style.borderRadius = '4px';
|
||
|
|
|
||
|
|
const role = document.createElement('strong');
|
||
|
|
role.textContent = msg.role === 'user' ? 'You: ' : 'Timmy: ';
|
||
|
|
role.style.color = msg.role === 'user' ? 'var(--accent)' : 'var(--success)';
|
||
|
|
|
||
|
|
const content = document.createElement('span');
|
||
|
|
content.textContent = msg.content;
|
||
|
|
|
||
|
|
div.appendChild(role);
|
||
|
|
div.appendChild(content);
|
||
|
|
container.appendChild(div);
|
||
|
|
});
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
// Fallback: show placeholder
|
||
|
|
container.innerHTML = `
|
||
|
|
<div style="color: var(--text-muted); text-align: center; padding: 20px;">
|
||
|
|
<p>Chat history persistence coming soon</p>
|
||
|
|
<p style="font-size: 0.875rem;">Messages are currently in-memory only</p>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initial load
|
||
|
|
loadSovereignty();
|
||
|
|
loadHealth();
|
||
|
|
loadSwarmStats();
|
||
|
|
loadLightningStats();
|
||
|
|
loadChatHistory();
|
||
|
|
|
||
|
|
// Periodic updates
|
||
|
|
setInterval(loadSovereignty, 30000); // Every 30s
|
||
|
|
setInterval(loadHealth, 10000); // Every 10s
|
||
|
|
setInterval(loadSwarmStats, 5000); // Every 5s
|
||
|
|
setInterval(updateHeartbeat, 5000); // Heartbeat every 5s
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|