702 lines
26 KiB
HTML
702 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlackRoad OS - Live Agent Grid 🖤🛣️</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #000000;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
line-height: 1.618;
|
|
}
|
|
|
|
.command-center {
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: auto repeat(3, 1fr);
|
|
gap: 8px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.header {
|
|
grid-column: 1 / -1;
|
|
background: linear-gradient(135deg, #FF1D6C 0%, #F5A623 38.2%, #2979FF 61.8%, #9C27B0 100%);
|
|
padding: 21px 34px;
|
|
border-radius: 13px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 34px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.system-stats {
|
|
display: flex;
|
|
gap: 34px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.stat-label {
|
|
opacity: 0.8;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 21px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.agent-window {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 13px;
|
|
padding: 13px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.agent-window:hover {
|
|
border-color: #FF1D6C;
|
|
box-shadow: 0 0 34px rgba(255, 29, 108, 0.3);
|
|
}
|
|
|
|
.agent-window.active {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { border-color: rgba(255, 255, 255, 0.1); }
|
|
50% { border-color: #FF1D6C; }
|
|
}
|
|
|
|
.agent-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 13px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.agent-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.agent-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #00FF00;
|
|
animation: blink 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
.agent-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin-bottom: 13px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-label {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.info-value {
|
|
font-weight: 600;
|
|
color: #F5A623;
|
|
}
|
|
|
|
.agent-activity {
|
|
flex: 1;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
font-size: 10px;
|
|
font-family: 'SF Mono', 'Courier New', monospace;
|
|
}
|
|
|
|
.activity-log {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: 3px;
|
|
}
|
|
|
|
.activity-item {
|
|
padding: 3px 5px;
|
|
border-left: 2px solid transparent;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
.activity-item.info { border-left-color: #2979FF; }
|
|
.activity-item.success { border-left-color: #00FF00; }
|
|
.activity-item.warning { border-left-color: #F5A623; }
|
|
.activity-item.error { border-left-color: #FF1D6C; }
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.activity-timestamp {
|
|
opacity: 0.5;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.hash-display {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
font-size: 8px;
|
|
opacity: 0.3;
|
|
font-family: 'SF Mono', monospace;
|
|
}
|
|
|
|
.metric-bars {
|
|
display: flex;
|
|
gap: 3px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.metric-bar {
|
|
flex: 1;
|
|
height: 3px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.metric-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #FF1D6C, #F5A623);
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 29, 108, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #FF1D6C;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="command-center">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1>🖤🛣️ BlackRoad OS - Live Agent Grid</h1>
|
|
<div class="system-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Total Nodes</span>
|
|
<span class="stat-value" id="totalNodes">9</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Active Agents</span>
|
|
<span class="stat-value" id="activeAgents">9</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">TOPS Available</span>
|
|
<span class="stat-value" id="totalTOPS">104</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Hash Chain</span>
|
|
<span class="stat-value" id="hashChain">✓</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Windows (Brady Bunch Grid) -->
|
|
<div class="agent-window active" id="alice">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Alice (Pi 5)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">IP:</span>
|
|
<span class="info-value">192.168.4.49</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Hailo-8:</span>
|
|
<span class="info-value">26 TOPS</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">NVMe:</span>
|
|
<span class="info-value">847GB Free</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 73%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 45%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 89%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="alice-log"></div>
|
|
</div>
|
|
<div class="hash-display">6a1a51a7</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="aria">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Aria (Pi 5)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">IP:</span>
|
|
<span class="info-value">192.168.4.64</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Hailo-8:</span>
|
|
<span class="info-value">26 TOPS</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">NVMe:</span>
|
|
<span class="info-value">923GB Free</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 61%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 78%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 92%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="aria-log"></div>
|
|
</div>
|
|
<div class="hash-display">3a3d5a9b</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="octavia">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Octavia (Pi 5)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">IP:</span>
|
|
<span class="info-value">192.168.4.74</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Hailo-8:</span>
|
|
<span class="info-value">26 TOPS</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">NVMe:</span>
|
|
<span class="info-value">756GB Free</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 84%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 56%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 67%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="octavia-log"></div>
|
|
</div>
|
|
<div class="hash-display">8aa29eff</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="lucidia">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Lucidia (Pi 5)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">IP:</span>
|
|
<span class="info-value">192.168.4.38</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Hailo-8:</span>
|
|
<span class="info-value">26 TOPS</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">NVMe:</span>
|
|
<span class="info-value">681GB Free</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 91%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 72%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 83%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="lucidia-log"></div>
|
|
</div>
|
|
<div class="hash-display">1372d802</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="shellfish">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Shellfish (DO Droplet)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">IP:</span>
|
|
<span class="info-value">174.138.44.45</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Role:</span>
|
|
<span class="info-value">NATS Hub</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">K8s:</span>
|
|
<span class="info-value">K3s Controller</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 38%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 95%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 76%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="shellfish-log"></div>
|
|
</div>
|
|
<div class="hash-display">10116a02</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="cecilia">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Cecilia (Logic Core)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">Type:</span>
|
|
<span class="info-value">Repository Enhancer</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Repos:</span>
|
|
<span class="info-value">226 managed</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Running on:</span>
|
|
<span class="info-value">Aria</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 67%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 88%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 54%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="cecilia-log"></div>
|
|
</div>
|
|
<div class="hash-display">c08eb525</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="cadence">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Cadence (UX Core)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">Type:</span>
|
|
<span class="info-value">Design System</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Projects:</span>
|
|
<span class="info-value">89 enhanced</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Running on:</span>
|
|
<span class="info-value">Alice</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 52%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 74%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 91%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="cadence-log"></div>
|
|
</div>
|
|
<div class="hash-display">37bf3efd</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="silas">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Silas (Systems Core)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">Type:</span>
|
|
<span class="info-value">Infrastructure</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Services:</span>
|
|
<span class="info-value">42 monitored</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Running on:</span>
|
|
<span class="info-value">Octavia</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 79%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 63%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 85%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="silas-log"></div>
|
|
</div>
|
|
<div class="hash-display">453ecfd1</div>
|
|
</div>
|
|
|
|
<div class="agent-window active" id="willow">
|
|
<div class="agent-header">
|
|
<div class="agent-name">Willow (Architect)</div>
|
|
<div class="agent-status">
|
|
<span class="status-dot"></span>
|
|
<span>ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="info-row">
|
|
<span class="info-label">Type:</span>
|
|
<span class="info-value">System Orchestrator</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Task:</span>
|
|
<span class="info-value">Dashboard Builder</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Running on:</span>
|
|
<span class="info-value">Lucidia</span>
|
|
</div>
|
|
<div class="metric-bars">
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 96%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 87%"></div></div>
|
|
<div class="metric-bar"><div class="metric-fill" style="width: 93%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="agent-activity">
|
|
<div class="activity-log" id="willow-log"></div>
|
|
</div>
|
|
<div class="hash-display">dc6fd280</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Simulated activity logs for each agent
|
|
const agents = [
|
|
{ id: 'alice', activities: [
|
|
'Loaded Phi-3 model (3.8B params)',
|
|
'Processing inference request #1847',
|
|
'Context window: 4096 tokens',
|
|
'Hailo-8 utilization: 73%',
|
|
'Memory continuity verified',
|
|
'Hash rotation: 6a1a51a7 → 8c3d7a9f'
|
|
]},
|
|
{ id: 'aria', activities: [
|
|
'Cecilia agent running: enhancing repos',
|
|
'Processing repository #142/226',
|
|
'Git operations: 23 commits/hour',
|
|
'NATS message rate: 847/sec',
|
|
'NVMe read speed: 3200MB/s',
|
|
'SHA-256 chain validated'
|
|
]},
|
|
{ id: 'octavia', activities: [
|
|
'Silas monitoring infrastructure',
|
|
'Container health checks: all green',
|
|
'Docker image builds: 3 in queue',
|
|
'Multi-arch compile: arm64 complete',
|
|
'Zero Trust validation passed',
|
|
'K8s pod status: 12/12 ready'
|
|
]},
|
|
{ id: 'lucidia', activities: [
|
|
'Willow orchestrating dashboard',
|
|
'Real-time metrics collection active',
|
|
'WebSocket connections: 9/9',
|
|
'Roadchain integrity: verified',
|
|
'Memory sync in progress',
|
|
'Local LLM response time: 47ms'
|
|
]},
|
|
{ id: 'shellfish', activities: [
|
|
'NATS cluster: 4 nodes online',
|
|
'Message throughput: 8,476 msg/sec',
|
|
'K3s controller healthy',
|
|
'Identity hashing queue: 23 pending',
|
|
'Cloudflare tunnel: active',
|
|
'Zero Trust policies: 47 enforced'
|
|
]},
|
|
{ id: 'cecilia', activities: [
|
|
'Enhanced blackroad-os-dashboard',
|
|
'Added TypeScript types to repo #89',
|
|
'Updated README with API docs',
|
|
'Fixed 3 security vulnerabilities',
|
|
'Committed to branch: feature/enhance',
|
|
'PR status: ready for merge'
|
|
]},
|
|
{ id: 'cadence', activities: [
|
|
'Applied BlackRoad design system',
|
|
'Updated color palette: Hot Pink primary',
|
|
'Golden Ratio spacing implemented',
|
|
'Responsive breakpoints optimized',
|
|
'Component library: 127 components',
|
|
'Cloudflare Pages deployed'
|
|
]},
|
|
{ id: 'silas', activities: [
|
|
'Monitoring 42 services across fleet',
|
|
'Prometheus metrics scraped: 1.2M/min',
|
|
'Alert evaluation: 0 critical',
|
|
'System uptime: 99.97%',
|
|
'Container orchestration: optimal',
|
|
'Resource allocation: balanced'
|
|
]},
|
|
{ id: 'willow', activities: [
|
|
'Building Brady Bunch dashboard',
|
|
'Real-time data pipeline active',
|
|
'WebSocket server running on :3000',
|
|
'Agent coordination: 9/9 synced',
|
|
'Memory system integration complete',
|
|
'Preparing Cloudflare deployment'
|
|
]}
|
|
];
|
|
|
|
const activityTypes = ['info', 'success', 'warning', 'info', 'success'];
|
|
|
|
// Add activity to a specific agent's log
|
|
function addActivity(agentId, message, type = 'info') {
|
|
const log = document.getElementById(`${agentId}-log`);
|
|
if (!log) return;
|
|
|
|
const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
|
|
const item = document.createElement('div');
|
|
item.className = `activity-item ${type}`;
|
|
item.innerHTML = `<span class="activity-timestamp">${timestamp}</span>${message}`;
|
|
|
|
log.insertBefore(item, log.firstChild);
|
|
|
|
// Keep only last 50 items
|
|
while (log.children.length > 50) {
|
|
log.removeChild(log.lastChild);
|
|
}
|
|
}
|
|
|
|
// Initialize with some activity
|
|
agents.forEach(agent => {
|
|
agent.activities.forEach((activity, i) => {
|
|
setTimeout(() => {
|
|
addActivity(agent.id, activity, activityTypes[i % activityTypes.length]);
|
|
}, i * 200 + Math.random() * 500);
|
|
});
|
|
});
|
|
|
|
// Simulate ongoing activity
|
|
setInterval(() => {
|
|
const randomAgent = agents[Math.floor(Math.random() * agents.length)];
|
|
const randomActivity = randomAgent.activities[Math.floor(Math.random() * randomAgent.activities.length)];
|
|
const randomType = activityTypes[Math.floor(Math.random() * activityTypes.length)];
|
|
addActivity(randomAgent.id, randomActivity, randomType);
|
|
}, 2000 + Math.random() * 3000);
|
|
|
|
// Update metrics randomly
|
|
setInterval(() => {
|
|
document.querySelectorAll('.metric-fill').forEach(fill => {
|
|
const currentWidth = parseInt(fill.style.width);
|
|
const change = (Math.random() - 0.5) * 10;
|
|
const newWidth = Math.max(10, Math.min(100, currentWidth + change));
|
|
fill.style.width = newWidth + '%';
|
|
});
|
|
}, 5000);
|
|
|
|
// Update total stats
|
|
setInterval(() => {
|
|
const active = document.querySelectorAll('.agent-window.active').length;
|
|
document.getElementById('activeAgents').textContent = active;
|
|
}, 10000);
|
|
</script>
|
|
</body>
|
|
</html>
|