← back to Melanie Project
public/agents.html
275 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Melanie - Agent Dashboard</title>
<link rel="stylesheet" href="agents-style.css">
</head>
<body>
<div class="dashboard-container">
<header class="dashboard-header">
<div class="header-left">
<h1>🤖 Melanie Self-Fixing Agents</h1>
<p class="subtitle">Autonomous monitoring and healing system</p>
</div>
<div class="header-right">
<div class="system-status" id="systemStatus">
<span class="status-indicator"></span>
<span class="status-text">Initializing...</span>
</div>
</div>
</header>
<nav class="nav-tabs">
<button class="nav-tab active" data-view="agents">Agents</button>
<button class="nav-tab" data-view="monitoring">Monitoring</button>
<button class="nav-tab" data-view="logs">Logs</button>
<button class="nav-tab" data-view="settings">Settings</button>
</nav>
<main class="dashboard-main">
<!-- Agents View -->
<div id="agentsView" class="view-container active">
<div class="agents-grid">
<!-- Server Health Agent -->
<div class="agent-card" data-agent="server-health">
<div class="agent-header">
<div class="agent-icon">🖥️</div>
<div class="agent-title">
<h3>Server Health Agent</h3>
<p class="agent-description">Monitors HTTPS server uptime and performance</p>
</div>
<div class="agent-status">
<span class="status-badge status-active">Active</span>
</div>
</div>
<div class="agent-metrics">
<div class="metric">
<span class="metric-label">Uptime</span>
<span class="metric-value" id="server-uptime">0s</span>
</div>
<div class="metric">
<span class="metric-label">Last Check</span>
<span class="metric-value" id="server-lastcheck">Never</span>
</div>
<div class="metric">
<span class="metric-label">Restarts</span>
<span class="metric-value" id="server-restarts">0</span>
</div>
</div>
<div class="agent-actions">
<button class="action-btn" onclick="restartAgent('server-health')">Restart Check</button>
<button class="action-btn secondary" onclick="viewLogs('server-health')">View Logs</button>
</div>
</div>
<!-- API Monitor Agent -->
<div class="agent-card" data-agent="api-monitor">
<div class="agent-header">
<div class="agent-icon">🔌</div>
<div class="agent-title">
<h3>API Monitor Agent</h3>
<p class="agent-description">Tracks Anthropic API health and implements retry logic</p>
</div>
<div class="agent-status">
<span class="status-badge status-active">Active</span>
</div>
</div>
<div class="agent-metrics">
<div class="metric">
<span class="metric-label">Success Rate</span>
<span class="metric-value" id="api-success">100%</span>
</div>
<div class="metric">
<span class="metric-label">Avg Response</span>
<span class="metric-value" id="api-response">0ms</span>
</div>
<div class="metric">
<span class="metric-label">Auto-Fixes</span>
<span class="metric-value" id="api-fixes">0</span>
</div>
</div>
<div class="agent-actions">
<button class="action-btn" onclick="testAPI()">Test API</button>
<button class="action-btn secondary" onclick="viewLogs('api-monitor')">View Logs</button>
</div>
</div>
<!-- Upload Guardian Agent -->
<div class="agent-card" data-agent="upload-guardian">
<div class="agent-header">
<div class="agent-icon">📤</div>
<div class="agent-title">
<h3>Upload Guardian Agent</h3>
<p class="agent-description">Monitors file uploads and fixes size/format issues</p>
</div>
<div class="agent-status">
<span class="status-badge status-active">Active</span>
</div>
</div>
<div class="agent-metrics">
<div class="metric">
<span class="metric-label">Uploads Today</span>
<span class="metric-value" id="upload-count">0</span>
</div>
<div class="metric">
<span class="metric-label">Failed</span>
<span class="metric-value" id="upload-failed">0</span>
</div>
<div class="metric">
<span class="metric-label">Auto-Fixed</span>
<span class="metric-value" id="upload-fixed">0</span>
</div>
</div>
<div class="agent-actions">
<button class="action-btn" onclick="testUpload()">Test Upload</button>
<button class="action-btn secondary" onclick="viewLogs('upload-guardian')">View Logs</button>
</div>
</div>
<!-- SSL Certificate Agent -->
<div class="agent-card" data-agent="ssl-cert">
<div class="agent-header">
<div class="agent-icon">🔒</div>
<div class="agent-title">
<h3>SSL Certificate Agent</h3>
<p class="agent-description">Monitors SSL cert expiry and auto-renews</p>
</div>
<div class="agent-status">
<span class="status-badge status-active">Active</span>
</div>
</div>
<div class="agent-metrics">
<div class="metric">
<span class="metric-label">Expires In</span>
<span class="metric-value" id="ssl-expiry">Unknown</span>
</div>
<div class="metric">
<span class="metric-label">Status</span>
<span class="metric-value" id="ssl-status">Valid</span>
</div>
<div class="metric">
<span class="metric-label">Auto-Renews</span>
<span class="metric-value" id="ssl-renewals">0</span>
</div>
</div>
<div class="agent-actions">
<button class="action-btn" onclick="checkSSL()">Check SSL</button>
<button class="action-btn secondary" onclick="viewLogs('ssl-cert')">View Logs</button>
</div>
</div>
</div>
</div>
<!-- Monitoring View -->
<div id="monitoringView" class="view-container">
<div class="monitoring-grid">
<div class="chart-card">
<h3>System Health (Last 24h)</h3>
<canvas id="healthChart"></canvas>
</div>
<div class="chart-card">
<h3>API Response Times</h3>
<canvas id="apiChart"></canvas>
</div>
</div>
<div class="metrics-summary">
<div class="summary-card">
<h4>Total Requests</h4>
<p class="big-number" id="total-requests">0</p>
</div>
<div class="summary-card">
<h4>Auto-Fixes Applied</h4>
<p class="big-number" id="total-fixes">0</p>
</div>
<div class="summary-card">
<h4>Uptime</h4>
<p class="big-number" id="total-uptime">100%</p>
</div>
<div class="summary-card">
<h4>Avg Response</h4>
<p class="big-number" id="avg-response">0ms</p>
</div>
</div>
</div>
<!-- Logs View -->
<div id="logsView" class="view-container">
<div class="logs-controls">
<select id="logFilter" class="log-filter">
<option value="all">All Logs</option>
<option value="server-health">Server Health</option>
<option value="api-monitor">API Monitor</option>
<option value="upload-guardian">Upload Guardian</option>
<option value="ssl-cert">SSL Certificate</option>
</select>
<select id="logLevel" class="log-filter">
<option value="all">All Levels</option>
<option value="info">Info</option>
<option value="warning">Warning</option>
<option value="error">Error</option>
<option value="fix">Auto-Fix</option>
</select>
<button class="action-btn" onclick="clearLogs()">Clear Logs</button>
</div>
<div id="logsContainer" class="logs-container">
<!-- Logs will be populated here -->
</div>
</div>
<!-- Settings View -->
<div id="settingsView" class="view-container">
<div class="settings-grid">
<div class="settings-card">
<h3>Agent Settings</h3>
<div class="setting-item">
<label>
<input type="checkbox" id="autoRestart" checked>
Auto-restart server on crash
</label>
</div>
<div class="setting-item">
<label>
<input type="checkbox" id="autoRetry" checked>
Auto-retry failed API calls
</label>
</div>
<div class="setting-item">
<label>
<input type="checkbox" id="autoRenewSSL" checked>
Auto-renew SSL certificates
</label>
</div>
<div class="setting-item">
<label>
<input type="checkbox" id="autoCompressUploads" checked>
Auto-compress large uploads
</label>
</div>
</div>
<div class="settings-card">
<h3>Check Intervals</h3>
<div class="setting-item">
<label>Server Health Check (seconds)</label>
<input type="number" id="serverCheckInterval" value="30" min="10" max="300">
</div>
<div class="setting-item">
<label>API Monitor Check (seconds)</label>
<input type="number" id="apiCheckInterval" value="60" min="30" max="600">
</div>
<div class="setting-item">
<label>SSL Check (hours)</label>
<input type="number" id="sslCheckInterval" value="24" min="1" max="168">
</div>
<button class="action-btn" onclick="saveSettings()">Save Settings</button>
</div>
</div>
</div>
</main>
</div>
<script src="agents-app.js"></script>
</body>
</html>