| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LIQUIDITY AGENTIC TERRAFORMING</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .animate-pulse-slow { |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| .sidebar-item.active { |
| border-left: 4px solid #3b82f6; |
| background-color: rgba(59, 130, 246, 0.1); |
| } |
| .node { |
| transition: all 0.3s ease; |
| } |
| .node:hover { |
| transform: scale(1.1); |
| filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7)); |
| } |
| .connection { |
| stroke-dasharray: 5; |
| animation: dash 30s linear infinite; |
| } |
| @keyframes dash { |
| to { |
| stroke-dashoffset: 1000; |
| } |
| } |
| .log-entry { |
| border-left: 3px solid transparent; |
| transition: all 0.2s; |
| } |
| .log-entry:hover { |
| border-left-color: #3b82f6; |
| background-color: rgba(59, 130, 246, 0.05); |
| } |
| .dark .log-entry:hover { |
| background-color: rgba(59, 130, 246, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen transition-colors duration-300"> |
| |
| <nav class="bg-white dark:bg-gray-800 shadow-md fixed top-0 left-0 right-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| |
| <div class="flex-shrink-0 flex items-center"> |
| <span class="text-xl font-bold text-blue-600 dark:text-blue-400">LIQUIDITY AGENTIC TERRAFORMING</span> |
| </div> |
| |
| |
| <div class="flex space-x-4"> |
| <div class="flex items-center space-x-1"> |
| <span class="relative flex h-3 w-3"> |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> |
| </span> |
| <span class="text-sm">DIGS Live</span> |
| </div> |
| <div class="flex items-center space-x-1"> |
| <span class="relative flex h-3 w-3"> |
| <span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span> |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span> |
| </span> |
| <span class="text-sm">Backend Running</span> |
| </div> |
| <div class="flex items-center space-x-1"> |
| <span class="relative flex h-3 w-3"> |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span> |
| </span> |
| <span class="text-sm">Auth Linked</span> |
| </div> |
| </div> |
| |
| |
| <button id="themeToggle" class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="flex pt-16"> |
| |
| <div class="w-64 bg-white dark:bg-gray-800 shadow-md fixed left-0 top-16 bottom-0 overflow-y-auto transition-all duration-300 z-40"> |
| <div class="p-4"> |
| <div class="relative mb-4"> |
| <input type="text" placeholder="Search modules..." class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> |
| </div> |
| |
| <div class="space-y-1"> |
| <button class="sidebar-item active w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-home text-blue-500"></i> |
| <span>Dashboard</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-brain text-purple-500"></i> |
| <span>Agent Modules</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-database text-green-500"></i> |
| <span>DIGS Memory</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-project-diagram text-red-500"></i> |
| <span>Orchestration</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-file-upload text-yellow-500"></i> |
| <span>File Uploads</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-chart-line text-indigo-500"></i> |
| <span>Analytics</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-terminal text-blue-400"></i> |
| <span>Logs</span> |
| </button> |
| |
| <button class="sidebar-item w-full text-left px-4 py-3 rounded-lg flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-cogs text-gray-500"></i> |
| <span>Settings</span> |
| </button> |
| </div> |
| |
| <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700"> |
| <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Quick Actions</h3> |
| <div class="mt-2 space-y-1"> |
| <button class="w-full text-left px-4 py-2 text-sm rounded-lg flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-bolt text-yellow-500"></i> |
| <span>New Agent</span> |
| </button> |
| <button class="w-full text-left px-4 py-2 text-sm rounded-lg flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-sync-alt text-blue-500"></i> |
| <span>Refresh All</span> |
| </button> |
| <button class="w-full text-left px-4 py-2 text-sm rounded-lg flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-shield-alt text-green-500"></i> |
| <span>Security Scan</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 ml-64 p-8"> |
| <div class="max-w-7xl mx-auto"> |
| |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Agentic Orchestration Dashboard</h1> |
| <div class="flex space-x-4"> |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center space-x-2 transition"> |
| <i class="fas fa-plus"></i> |
| <span>New Module</span> |
| </button> |
| <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center space-x-2 transition"> |
| <i class="fas fa-upload"></i> |
| <span>Import</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-blue-500"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Agents</p> |
| <p class="text-3xl font-semibold text-gray-800 dark:text-white mt-2">18</p> |
| </div> |
| <div class="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> |
| <i class="fas fa-robot text-blue-600 dark:text-blue-400 text-xl"></i> |
| </div> |
| </div> |
| <p class="text-xs text-green-500 mt-2 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last week |
| </p> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-green-500"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Memory Usage</p> |
| <p class="text-3xl font-semibold text-gray-800 dark:text-white mt-2">64%</p> |
| </div> |
| <div class="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> |
| <i class="fas fa-memory text-green-600 dark:text-green-400 text-xl"></i> |
| </div> |
| </div> |
| <p class="text-xs text-yellow-500 mt-2 flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 8% from last week |
| </p> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-purple-500"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Tasks Completed</p> |
| <p class="text-3xl font-semibold text-gray-800 dark:text-white mt-2">1,284</p> |
| </div> |
| <div class="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> |
| <i class="fas fa-tasks text-purple-600 dark:text-purple-400 text-xl"></i> |
| </div> |
| </div> |
| <p class="text-xs text-green-500 mt-2 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 23% from last week |
| </p> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-red-500"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Errors</p> |
| <p class="text-3xl font-semibold text-gray-800 dark:text-white mt-2">4</p> |
| </div> |
| <div class="h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center"> |
| <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 text-xl"></i> |
| </div> |
| </div> |
| <p class="text-xs text-green-500 mt-2 flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 50% from last week |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Agent Network Visualization</h2> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-expand text-gray-500 dark:text-gray-400"></i> |
| </button> |
| <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-sync-alt text-gray-500 dark:text-gray-400"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="relative h-96 bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden"> |
| <svg id="networkGraph" width="100%" height="100%" class="cursor-move"> |
| |
| <line x1="20%" y1="30%" x2="40%" y2="50%" class="connection stroke-blue-400 dark:stroke-blue-500" stroke-width="2" /> |
| <line x1="40%" y1="50%" x2="60%" y2="30%" class="connection stroke-blue-400 dark:stroke-blue-500" stroke-width="2" /> |
| <line x1="40%" y1="50%" x2="40%" y2="70%" class="connection stroke-blue-400 dark:stroke-blue-500" stroke-width="2" /> |
| <line x1="60%" y1="30%" x2="80%" y2="50%" class="connection stroke-blue-400 dark:stroke-blue-500" stroke-width="2" /> |
| <line x1="40%" y1="70%" x2="60%" y2="70%" class="connection stroke-blue-400 dark:stroke-blue-500" stroke-width="2" /> |
| <line x1="60%" y1="70%" x2="80%" y2="50%" class="connection stroke-blue-400 dark:stroke-blue-500" stroke-width="2" /> |
| |
| |
| <g class="node" onclick="showAgentDetails('input-processor')"> |
| <circle cx="20%" cy="30%" r="30" fill="#3B82F6" class="shadow-lg" /> |
| <text x="20%" y="30%" text-anchor="middle" fill="white" dy=".3em" font-size="12" font-weight="bold">Input</text> |
| </g> |
| |
| <g class="node" onclick="showAgentDetails('logic-engine')"> |
| <circle cx="40%" cy="50%" r="40" fill="#8B5CF6" class="shadow-lg" /> |
| <text x="40%" y="50%" text-anchor="middle" fill="white" dy=".3em" font-size="14" font-weight="bold">Logic</text> |
| </g> |
| |
| <g class="node" onclick="showAgentDetails('output-generator')"> |
| <circle cx="60%" cy="30%" r="30" fill="#10B981" class="shadow-lg" /> |
| <text x="60%" y="30%" text-anchor="middle" fill="white" dy=".3em" font-size="12" font-weight="bold">Output</text> |
| </g> |
| |
| <g class="node" onclick="showAgentDetails('memory-module')"> |
| <circle cx="40%" cy="70%" r="30" fill="#EC4899" class="shadow-lg" /> |
| <text x="40%" y="70%" text-anchor="middle" fill="white" dy=".3em" font-size="12" font-weight="bold">Memory</text> |
| </g> |
| |
| <g class="node" onclick="showAgentDetails('monitoring')"> |
| <circle cx="60%" cy="70%" r="30" fill="#F59E0B" class="shadow-lg" /> |
| <text x="60%" y="70%" text-anchor="middle" fill="white" dy=".3em" font-size="12" font-weight="bold">Monitor</text> |
| </g> |
| |
| <g class="node" onclick="showAgentDetails('api-gateway')"> |
| <circle cx="80%" cy="50%" r="40" fill="#6366F1" class="shadow-lg" /> |
| <text x="80%" y="50%" text-anchor="middle" fill="white" dy=".3em" font-size="14" font-weight="bold">API</text> |
| </g> |
| </svg> |
| |
| <div id="agentDetails" class="absolute top-4 right-4 bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 w-64 hidden"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-bold text-lg" id="agentName">Agent Details</h3> |
| <button onclick="hideAgentDetails()" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="space-y-2 text-sm"> |
| <p><span class="font-medium">Status:</span> <span id="agentStatus" class="text-green-500">Active</span></p> |
| <p><span class="font-medium">Type:</span> <span id="agentType">Processor</span></p> |
| <p><span class="font-medium">Load:</span> <span id="agentLoad">42%</span></p> |
| <p><span class="font-medium">Connections:</span> <span id="agentConnections">3</span></p> |
| </div> |
| <div class="mt-4 pt-2 border-t border-gray-200 dark:border-gray-700"> |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition"> |
| Configure Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Resource Utilization</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition"> |
| <i class="fas fa-chart-line mr-1"></i> Live |
| </button> |
| <button class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition"> |
| <i class="fas fa-history mr-1"></i> History |
| </button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="resourceChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Task Throughput</h2> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-500 dark:text-gray-400">Last 24 hours</span> |
| <button class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| <i class="fas fa-ellipsis-h text-gray-500 dark:text-gray-400"></i> |
| </button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="throughputChart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden mb-8"> |
| <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Recent Activity</h2> |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center space-x-2 transition"> |
| <i class="fas fa-filter"></i> |
| <span>Filter</span> |
| </button> |
| </div> |
| <div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-96 overflow-y-auto"> |
| |
| <div class="log-entry px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> |
| <i class="fas fa-check-circle text-green-600 dark:text-green-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white"> |
| Task completed successfully |
| </p> |
| <p class="text-sm text-gray-500 dark:text-gray-400 truncate"> |
| Agent "Data Processor" completed task #1842 in 342ms |
| </p> |
| <p class="text-xs text-gray-400 dark:text-gray-500 mt-1"> |
| 2 minutes ago |
| </p> |
| </div> |
| <div class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"> |
| Success |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="log-entry px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> |
| <i class="fas fa-info-circle text-blue-600 dark:text-blue-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white"> |
| New agent registered |
| </p> |
| <p class="text-sm text-gray-500 dark:text-gray-400 truncate"> |
| "Security Validator" joined the network from 192.168.1.42 |
| </p> |
| <p class="text-xs text-gray-400 dark:text-gray-500 mt-1"> |
| 12 minutes ago |
| </p> |
| </div> |
| <div class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"> |
| Info |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="log-entry px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center"> |
| <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white"> |
| High memory usage detected |
| </p> |
| <p class="text-sm text-gray-500 dark:text-gray-400 truncate"> |
| "Data Analyzer" reached 92% memory utilization |
| </p> |
| <p class="text-xs text-gray-400 dark:text-gray-500 mt-1"> |
| 24 minutes ago |
| </p> |
| </div> |
| <div class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"> |
| Warning |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="log-entry px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center"> |
| <i class="fas fa-times-circle text-red-600 dark:text-red-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white"> |
| Connection timeout |
| </p> |
| <p class="text-sm text-gray-500 dark:text-gray-400 truncate"> |
| Failed to connect to "API Gateway" (timeout after 5000ms) |
| </p> |
| <p class="text-xs text-gray-400 dark:text-gray-500 mt-1"> |
| 1 hour ago |
| </p> |
| </div> |
| <div class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"> |
| Error |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="log-entry px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> |
| <i class="fas fa-sync-alt text-purple-600 dark:text-purple-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-white"> |
| System update initiated |
| </p> |
| <p class="text-sm text-gray-500 dark:text-gray-400 truncate"> |
| Updating core modules to version 2.3.1 |
| </p> |
| <p class="text-xs text-gray-400 dark:text-gray-500 mt-1"> |
| 2 hours ago |
| </p> |
| </div> |
| <div class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"> |
| Maintenance |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-center border-t border-gray-200 dark:border-gray-700"> |
| <button class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition"> |
| View all activity |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Upload Data</h3> |
| <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 dark:text-gray-500 mb-3"></i> |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Drag & drop files here or click to browse</p> |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"> |
| Select Files |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">System Controls</h3> |
| <div class="space-y-3"> |
| <button class="w-full px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center justify-between transition"> |
| <span>Start All Agents</span> |
| <i class="fas fa-play"></i> |
| </button> |
| <button class="w-full px-4 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center justify-between transition"> |
| <span>Restart System</span> |
| <i class="fas fa-redo"></i> |
| </button> |
| <button class="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center justify-between transition"> |
| <span>Emergency Stop</span> |
| <i class="fas fa-stop"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Memory Analysis</h3> |
| <div class="h-40 mb-4"> |
| <canvas id="memoryChart"></canvas> |
| </div> |
| <div class="space-y-2"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600 dark:text-gray-300">DIGS Usage</span> |
| <span class="font-medium">78%</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 78%"></div> |
| </div> |
| <button class="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition"> |
| Optimize Memory |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('themeToggle'); |
| const html = document.documentElement; |
| |
| themeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark'); |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); |
| updateThemeIcon(); |
| }); |
| |
| function updateThemeIcon() { |
| const icon = themeToggle.querySelector('i'); |
| if (html.classList.contains('dark')) { |
| icon.classList.remove('fa-moon'); |
| icon.classList.add('fa-sun'); |
| } else { |
| icon.classList.remove('fa-sun'); |
| icon.classList.add('fa-moon'); |
| } |
| } |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| html.classList.add('dark'); |
| } else { |
| html.classList.remove('dark'); |
| } |
| updateThemeIcon(); |
| |
| |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); |
| sidebarItems.forEach(item => { |
| item.addEventListener('click', () => { |
| sidebarItems.forEach(i => i.classList.remove('active')); |
| item.classList.add('active'); |
| }); |
| }); |
| |
| |
| function showAgentDetails(agentId) { |
| const detailsPanel = document.getElementById('agentDetails'); |
| const agentName = document.getElementById('agentName'); |
| const agentStatus = document.getElementById('agentStatus'); |
| const agentType = document.getElementById('agentType'); |
| const agentLoad = document.getElementById('agentLoad'); |
| const agentConnections = document.getElementById('agentConnections'); |
| |
| |
| switch(agentId) { |
| case 'input-processor': |
| agentName.textContent = 'Input Processor'; |
| agentStatus.textContent = 'Active'; |
| agentStatus.className = 'text-green-500'; |
| agentType.textContent = 'Data Ingestion'; |
| agentLoad.textContent = '65%'; |
| agentConnections.textContent = '2'; |
| break; |
| case 'logic-engine': |
| agentName.textContent = 'Logic Engine'; |
| agentStatus.textContent = 'Active'; |
| agentStatus.className = 'text-green-500'; |
| agentType.textContent = 'Core Processor'; |
| agentLoad.textContent = '78%'; |
| agentConnections.textContent = '4'; |
| break; |
| case 'output-generator': |
| agentName.textContent = 'Output Generator'; |
| agentStatus.textContent = 'Idle'; |
| agentStatus.className = 'text-yellow-500'; |
| agentType.textContent = 'Data Export'; |
| agentLoad.textContent = '12%'; |
| agentConnections.textContent = '2'; |
| break; |
| case 'memory-module': |
| agentName.textContent = 'Memory Module'; |
| agentStatus.textContent = 'Active'; |
| agentStatus.className = 'text-green-500'; |
| agentType.textContent = 'Data Storage'; |
| agentLoad.textContent = '83%'; |
| agentConnections.textContent = '3'; |
| break; |
| case 'monitoring': |
| agentName.textContent = 'Monitoring Agent'; |
| agentStatus.textContent = 'Active'; |
| agentStatus.className = 'text-green-500'; |
| agentType.textContent = 'System Health'; |
| agentLoad.textContent = '45%'; |
| agentConnections.textContent = '2'; |
| break; |
| case 'api-gateway': |
| agentName.textContent = 'API Gateway'; |
| agentStatus.textContent = 'Active'; |
| agentStatus.className = 'text-green-500'; |
| agentType.textContent = 'External Interface'; |
| agentLoad.textContent = '91%'; |
| agentConnections.textContent = '5'; |
| break; |
| } |
| |
| detailsPanel.classList.remove('hidden'); |
| } |
| |
| function hideAgentDetails() { |
| document.getElementById('agentDetails').classList.add('hidden'); |
| } |
| |
| |
| const networkGraph = document.getElementById('networkGraph'); |
| let isDragging = false; |
| let startX, startY, translateX = 0, translateY = 0; |
| |
| networkGraph.addEventListener('mousedown', (e) => { |
| if (e.target.tagName === 'svg') { |
| isDragging = true; |
| startX = e.clientX; |
| startY = e.clientY; |
| networkGraph.style.cursor = 'grabbing'; |
| } |
| }); |
| |
| document.addEventListener('mousemove', (e) => { |
| if (!isDragging) return; |
| |
| const dx = e.clientX - startX; |
| const dy = e.clientY - startY; |
| |
| |
| const nodes = document.querySelectorAll('.node'); |
| const connections = document.querySelectorAll('.connection'); |
| |
| nodes.forEach(node => { |
| const circle = node.querySelector('circle'); |
| const text = node.querySelector('text'); |
| |
| const currentX = parseFloat(circle.getAttribute('cx')); |
| const currentY = parseFloat(circle.getAttribute('cy')); |
| |
| circle.setAttribute('cx', currentX + dx/100); |
| circle.setAttribute('cy', currentY + dy/100); |
| text.setAttribute('x', currentX + dx/100); |
| text.setAttribute('y', currentY + dy/100); |
| }); |
| |
| connections.forEach(conn => { |
| const x1 = parseFloat(conn.getAttribute('x1')); |
| const y1 = parseFloat(conn.getAttribute('y1')); |
| const x2 = parseFloat(conn.getAttribute('x2')); |
| const y2 = parseFloat(conn.getAttribute('y2')); |
| |
| conn.setAttribute('x1', x1 + dx/100); |
| conn.setAttribute('y1', y1 + dy/100); |
| conn.setAttribute('x2', x2 + dx/100); |
| conn.setAttribute('y2', y2 + dy/100); |
| }); |
| |
| startX = e.clientX; |
| startY = e.clientY; |
| }); |
| |
| document.addEventListener('mouseup', () => { |
| isDragging = false; |
| networkGraph.style.cursor = 'move'; |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const resourceCtx = document.getElementById('resourceChart').getContext('2d'); |
| const resourceChart = new Chart(resourceCtx, { |
| type: 'line', |
| data: { |
| labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'], |
| datasets: [ |
| { |
| label: 'CPU Usage', |
| data: [30, 45, 60, 55, 70, 65, 50, 40], |
| borderColor: '#3B82F6', |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true |
| }, |
| { |
| label: 'Memory Usage', |
| data: [40, 50, 45, 60, 55, 70, 65, 50], |
| borderColor: '#10B981', |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'top', |
| labels: { |
| color: '#6B7280' |
| } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| max: 100, |
| ticks: { |
| color: '#6B7280' |
| }, |
| grid: { |
| color: 'rgba(209, 213, 219, 0.3)' |
| } |
| }, |
| x: { |
| ticks: { |
| color: '#6B7280' |
| }, |
| grid: { |
| color: 'rgba(209, 213, 219, 0.3)' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const throughputCtx = document.getElementById('throughputChart').getContext('2d'); |
| const throughputChart = new Chart(throughputCtx, { |
| type: 'bar', |
| data: { |
| labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'], |
| datasets: [ |
| { |
| label: 'Tasks Completed', |
| data: [120, 180, 150, 210, 240, 190, 160, 130], |
| backgroundColor: '#8B5CF6', |
| borderColor: '#7C3AED', |
| borderWidth: 1 |
| }, |
| { |
| label: 'Tasks Failed', |
| data: [5, 8, 12, 6, 3, 10, 7, 4], |
| backgroundColor: '#EC4899', |
| borderColor: '#DB2777', |
| borderWidth: 1 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'top', |
| labels: { |
| color: '#6B7280' |
| } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| ticks: { |
| color: '#6B7280' |
| }, |
| grid: { |
| color: 'rgba(209, 213, 219, 0.3)' |
| } |
| }, |
| x: { |
| ticks: { |
| color: '#6B7280' |
| }, |
| grid: { |
| color: 'rgba(209, 213, 219, 0.3)' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const memoryCtx = document.getElementById('memoryChart').getContext('2d'); |
| const memoryChart = new Chart(memoryCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Used', 'Cached', 'Free'], |
| datasets: [{ |
| data: [78, 15, 7], |
| backgroundColor: [ |
| '#8B5CF6', |
| '#A78BFA', |
| '#C4B5FD' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| cutout: '70%', |
| plugins: { |
| legend: { |
| position: 'right', |
| labels: { |
| color: '#6B7280' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| setInterval(() => { |
| |
| const resourceData = resourceChart.data.datasets[0].data; |
| resourceData.shift(); |
| resourceData.push(Math.floor(Math.random() * 30) + 50); |
| |
| const memoryData = resourceChart.data.datasets[1].data; |
| memoryData.shift(); |
| memoryData.push(Math.floor(Math.random() * 30) + 45); |
| |
| resourceChart.update(); |
| |
| |
| const throughputData = throughputChart.data.datasets[0].data; |
| throughputData.shift(); |
| throughputData.push(Math.floor(Math.random() * 100) + 100); |
| |
| const failedData = throughputChart.data.datasets[1].data; |
| failedData.shift(); |
| failedData.push(Math.floor(Math.random() * 10) + 2); |
| |
| throughputChart.update(); |
| |
| |
| const newUsed = Math.floor(Math.random() * 10) + 75; |
| const newCached = Math.floor(Math.random() * 10) + 10; |
| memoryChart.data.datasets[0].data = [newUsed, newCached, 100 - newUsed - newCached]; |
| memoryChart.update(); |
| |
| |
| document.querySelector('.bg-purple-600').style.width = `${newUsed}%`; |
| document.querySelector('.flex.justify-between.text-sm span.font-medium').textContent = `${newUsed}%`; |
| }, 3000); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AIEONE/late-io" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
