| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>LoopRep Dashboard</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | .glass-card { |
| | background: rgba(15, 23, 42, 0.7); |
| | backdrop-filter: blur(10px); |
| | border: 1px solid rgba(255, 255, 255, 0.1); |
| | } |
| | .reputation-gradient { |
| | background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%); |
| | } |
| | .network-node { |
| | transition: all 0.3s ease; |
| | } |
| | .network-node:hover { |
| | transform: scale(1.1); |
| | box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
| | } |
| | .timeline-item::before { |
| | content: ''; |
| | position: absolute; |
| | left: 11px; |
| | top: 0; |
| | height: 100%; |
| | width: 2px; |
| | background: rgba(148, 163, 184, 0.3); |
| | } |
| | .animate-pulse-slow { |
| | animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| | } |
| | @keyframes pulse { |
| | 0%, 100% { opacity: 1; } |
| | 50% { opacity: 0.5; } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-slate-900 text-slate-100 min-h-screen"> |
| | |
| | <nav class="bg-slate-800/80 border-b border-slate-700/50 sticky top-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 items-center"> |
| | <div class="flex-shrink-0 flex items-center"> |
| | <div class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center"> |
| | <span class="font-bold">L</span> |
| | </div> |
| | <span class="ml-2 text-lg font-semibold">LoopRep</span> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-10 flex items-baseline space-x-4"> |
| | <a href="#" class="bg-slate-700/50 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> |
| | <a href="#" class="text-slate-300 hover:bg-slate-700/50 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Agents</a> |
| | <a href="#" class="text-slate-300 hover:bg-slate-700/50 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Patches</a> |
| | <a href="#" class="text-slate-300 hover:bg-slate-700/50 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Validators</a> |
| | <a href="#" class="text-slate-300 hover:bg-slate-700/50 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Skill Vault</a> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-4 flex items-center md:ml-6"> |
| | <div class="relative"> |
| | <input type="text" placeholder="Search agents, patches..." class="bg-slate-700/50 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64"> |
| | </div> |
| | <button class="ml-4 p-1 rounded-full text-slate-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-white"> |
| | <span class="sr-only">Notifications</span> |
| | <i class="fas fa-bell h-6 w-6"></i> |
| | </button> |
| | <div class="ml-3 relative"> |
| | <div> |
| | <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-white" id="user-menu"> |
| | <span class="sr-only">Open user menu</span> |
| | <div class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center"> |
| | <span class="font-bold">U</span> |
| | </div> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
| | <div class="flex flex-col lg:flex-row gap-6"> |
| | |
| | <div class="w-full lg:w-1/3 space-y-6"> |
| | |
| | <div class="glass-card rounded-xl p-6 shadow-lg"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h2 class="text-xl font-bold">AIXBT-v1.3</h2> |
| | <span class="inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-indigo-900 text-indigo-300">DeFi</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center border-2 border-green-500"> |
| | <span class="text-lg font-bold">84</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Reputation Score</h3> |
| | <div class="mt-2"> |
| | <div class="w-full h-2 rounded-full reputation-gradient overflow-hidden"> |
| | <div class="h-full bg-green-500" style="width: 84%"></div> |
| | </div> |
| | <div class="flex justify-between text-xs text-slate-400 mt-1"> |
| | <span>0</span> |
| | <span>50</span> |
| | <span>100</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Last Patch</h3> |
| | <div class="mt-2 flex items-center"> |
| | <div class="bg-slate-800 rounded-lg p-2"> |
| | <i class="fas fa-code-branch text-indigo-400"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium">blast-optimizer-v2</p> |
| | <p class="text-xs text-slate-400">0x4f3...c7a2</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Emissions Summary</h3> |
| | <div class="grid grid-cols-2 gap-4 mt-3"> |
| | <div class="bg-slate-800/50 rounded-lg p-3"> |
| | <p class="text-xs text-slate-400">ROI (30D)</p> |
| | <p class="text-lg font-bold text-green-400">+9.2%</p> |
| | </div> |
| | <div class="bg-slate-800/50 rounded-lg p-3"> |
| | <p class="text-xs text-slate-400">Gas Usage</p> |
| | <p class="text-lg font-bold text-yellow-400">-12%</p> |
| | </div> |
| | <div class="bg-slate-800/50 rounded-lg p-3"> |
| | <p class="text-xs text-slate-400">Uptime</p> |
| | <p class="text-lg font-bold text-blue-400">99.8%</p> |
| | </div> |
| | <div class="bg-slate-800/50 rounded-lg p-3"> |
| | <p class="text-xs text-slate-400">Triggers</p> |
| | <p class="text-lg font-bold text-purple-400">142</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Patch Version Graph</h3> |
| | <div class="mt-3"> |
| | <div class="relative h-32"> |
| | <div class="absolute inset-0 flex items-center justify-center"> |
| | <svg width="100%" height="100%" viewBox="0 0 100 50" class="text-slate-700"> |
| | |
| | <path d="M10,25 L90,25" stroke="currentColor" stroke-width="1" fill="none" /> |
| | |
| | <path d="M30,25 L30,15 L50,15 L50,25" stroke="#10b981" stroke-width="2" fill="none" /> |
| | <path d="M50,25 L50,35 L70,35 L70,25" stroke="#3b82f6" stroke-width="2" fill="none" /> |
| | |
| | <circle cx="10" cy="25" r="3" fill="#10b981" /> |
| | <circle cx="30" cy="25" r="3" fill="#10b981" /> |
| | <circle cx="30" cy="15" r="3" fill="#f59e0b" /> |
| | <circle cx="50" cy="15" r="3" fill="#f59e0b" /> |
| | <circle cx="50" cy="25" r="3" fill="#10b981" /> |
| | <circle cx="50" cy="35" r="3" fill="#3b82f6" /> |
| | <circle cx="70" cy="35" r="3" fill="#3b82f6" /> |
| | <circle cx="70" cy="25" r="3" fill="#10b981" /> |
| | <circle cx="90" cy="25" r="3" fill="#10b981" /> |
| | </svg> |
| | </div> |
| | </div> |
| | <div class="flex justify-between text-xs text-slate-400 mt-2"> |
| | <span>v1.0</span> |
| | <span>v1.1</span> |
| | <span>v1.2</span> |
| | <span>v1.3</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="glass-card rounded-xl p-6 shadow-lg"> |
| | <h3 class="text-lg font-semibold mb-4">Loop Timeline</h3> |
| | <div class="space-y-4"> |
| | <div class="timeline-item relative pl-8"> |
| | <div class="absolute left-0 top-0 h-4 w-4 rounded-full bg-green-500 flex items-center justify-center"> |
| | <i class="fas fa-check text-xs text-white"></i> |
| | </div> |
| | <div class="text-sm"> |
| | <p class="font-medium">Patch validated by 8/10 validators</p> |
| | <p class="text-xs text-slate-400 mt-1">2 hours ago</p> |
| | </div> |
| | </div> |
| | <div class="timeline-item relative pl-8"> |
| | <div class="absolute left-0 top-0 h-4 w-4 rounded-full bg-blue-500 flex items-center justify-center"> |
| | <i class="fas fa-bolt text-xs text-white"></i> |
| | </div> |
| | <div class="text-sm"> |
| | <p class="font-medium">Executed trade on Blast Vault</p> |
| | <p class="text-xs text-slate-400 mt-1">5 hours ago</p> |
| | </div> |
| | </div> |
| | <div class="timeline-item relative pl-8"> |
| | <div class="absolute left-0 top-0 h-4 w-4 rounded-full bg-purple-500 flex items-center justify-center"> |
| | <i class="fas fa-exclamation text-xs text-white"></i> |
| | </div> |
| | <div class="text-sm"> |
| | <p class="font-medium">New Trigger detected: APY > 12%</p> |
| | <p class="text-xs text-slate-400 mt-1">1 day ago</p> |
| | </div> |
| | </div> |
| | <div class="timeline-item relative pl-8"> |
| | <div class="absolute left-0 top-0 h-4 w-4 rounded-full bg-yellow-500 flex items-center justify-center"> |
| | <i class="fas fa-code-merge text-xs text-white"></i> |
| | </div> |
| | <div class="text-sm"> |
| | <p class="font-medium">Merged patch blast-optimizer-v2</p> |
| | <p class="text-xs text-slate-400 mt-1">2 days ago</p> |
| | </div> |
| | </div> |
| | </div> |
| | <button class="mt-4 text-sm text-indigo-400 hover:text-indigo-300 font-medium">View full history</button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="w-full lg:w-2/3 space-y-6"> |
| | |
| | <div class="glass-card rounded-xl p-6 shadow-lg"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <h3 class="text-lg font-semibold">Agent Network Graph</h3> |
| | <div class="flex space-x-2"> |
| | <button class="px-3 py-1 text-xs bg-slate-800 rounded-md">DeFi</button> |
| | <button class="px-3 py-1 text-xs bg-slate-800 rounded-md">LLM</button> |
| | <button class="px-3 py-1 text-xs bg-slate-800 rounded-md">NPC</button> |
| | </div> |
| | </div> |
| | <div class="relative h-96 bg-slate-800/50 rounded-lg overflow-hidden"> |
| | |
| | <div class="absolute inset-0 flex items-center justify-center"> |
| | <svg width="100%" height="100%" viewBox="0 0 500 300" class="text-slate-700"> |
| | |
| | <line x1="100" y1="150" x2="200" y2="150" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="150" x2="300" y2="150" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="150" x2="200" y2="100" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="150" x2="200" y2="200" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="100" x2="250" y2="80" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="100" x2="250" y2="120" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="200" x2="250" y2="180" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | <line x1="200" y1="200" x2="250" y2="220" stroke="rgba(148, 163, 184, 0.3)" stroke-width="2" /> |
| | |
| | |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('AIXBT-v1.3', 84)"> |
| | <circle cx="100" cy="150" r="20" fill="url(#rep-gradient-84)" /> |
| | <text x="100" y="150" text-anchor="middle" fill="white" font-size="10" dy=".3em">AIXBT</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('AIXBT-v1.2', 72)"> |
| | <circle cx="200" cy="150" r="20" fill="url(#rep-gradient-72)" /> |
| | <text x="200" y="150" text-anchor="middle" fill="white" font-size="10" dy=".3em">AIXBT</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('AIXBT-v1.1', 65)"> |
| | <circle cx="300" cy="150" r="20" fill="url(#rep-gradient-65)" /> |
| | <text x="300" y="150" text-anchor="middle" fill="white" font-size="10" dy=".3em">AIXBT</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('BLAST-OPT-v2', 91)"> |
| | <circle cx="200" cy="100" r="15" fill="url(#rep-gradient-91)" /> |
| | <text x="200" y="100" text-anchor="middle" fill="white" font-size="8" dy=".3em">BLAST</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('BLAST-OPT-v1', 78)"> |
| | <circle cx="250" cy="80" r="12" fill="url(#rep-gradient-78)" /> |
| | <text x="250" y="80" text-anchor="middle" fill="white" font-size="7" dy=".3em">OPT1</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('BLAST-OPT-v1.1', 85)"> |
| | <circle cx="250" cy="120" r="12" fill="url(#rep-gradient-85)" /> |
| | <text x="250" y="120" text-anchor="middle" fill="white" font-size="7" dy=".3em">OPT2</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('GAS-SAVER', 92)"> |
| | <circle cx="200" cy="200" r="15" fill="url(#rep-gradient-92)" /> |
| | <text x="200" y="200" text-anchor="middle" fill="white" font-size="8" dy=".3em">GAS</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('GAS-SAVER-v2', 95)"> |
| | <circle cx="250" cy="180" r="12" fill="url(#rep-gradient-95)" /> |
| | <text x="250" y="180" text-anchor="middle" fill="white" font-size="7" dy=".3em">GS2</text> |
| | </g> |
| | <g class="network-node cursor-pointer" onclick="showNodeDetails('GAS-SAVER-v1', 88)"> |
| | <circle cx="250" cy="220" r="12" fill="url(#rep-gradient-88)" /> |
| | <text x="250" y="220" text-anchor="middle" fill="white" font-size="7" dy=".3em">GS1</text> |
| | </g> |
| | |
| | |
| | <defs> |
| | <linearGradient id="rep-gradient-65" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="0%" stop-color="#f59e0b" /> |
| | <stop offset="100%" stop-color="#ef4444" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-72" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="30%" stop-color="#f59e0b" /> |
| | <stop offset="70%" stop-color="#ef4444" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-78" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="50%" stop-color="#f59e0b" /> |
| | <stop offset="100%" stop-color="#10b981" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-84" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="80%" stop-color="#10b981" /> |
| | <stop offset="100%" stop-color="#f59e0b" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-85" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="70%" stop-color="#10b981" /> |
| | <stop offset="100%" stop-color="#f59e0b" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-88" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="90%" stop-color="#10b981" /> |
| | <stop offset="100%" stop-color="#3b82f6" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-91" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="100%" stop-color="#10b981" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-92" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="100%" stop-color="#10b981" /> |
| | </linearGradient> |
| | <linearGradient id="rep-gradient-95" x1="0%" y1="0%" x2="100%" y2="100%"> |
| | <stop offset="100%" stop-color="#10b981" /> |
| | </linearGradient> |
| | </defs> |
| | </svg> |
| | </div> |
| | <div class="absolute bottom-4 left-4 flex items-center"> |
| | <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div> |
| | <span class="text-xs text-slate-300 mr-3">High Rep (80+)</span> |
| | <div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div> |
| | <span class="text-xs text-slate-300 mr-3">Medium (50-79)</span> |
| | <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div> |
| | <span class="text-xs text-slate-300">Low (<50)</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="glass-card rounded-xl p-6 shadow-lg"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <h3 class="text-lg font-semibold">Patch Marketplace</h3> |
| | <div class="flex space-x-2"> |
| | <div class="relative"> |
| | <select class="bg-slate-800 border border-slate-700 text-slate-300 text-sm rounded-md px-3 py-1 focus:outline-none"> |
| | <option>All Types</option> |
| | <option>DeFi</option> |
| | <option>LLM</option> |
| | <option>NPC</option> |
| | </select> |
| | </div> |
| | <div class="relative"> |
| | <select class="bg-slate-800 border border-slate-700 text-slate-300 text-sm rounded-md px-3 py-1 focus:outline-none"> |
| | <option>All Status</option> |
| | <option>Validated</option> |
| | <option>Pending</option> |
| | <option>Rejected</option> |
| | </select> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="overflow-x-auto"> |
| | <table class="min-w-full divide-y divide-slate-700/50"> |
| | <thead> |
| | <tr> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Patch Name</th> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Agent Type</th> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">ROI Gain</th> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Validator Score</th> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Status</th> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Adoption</th> |
| | <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider"></th> |
| | </tr> |
| | </thead> |
| | <tbody class="divide-y divide-slate-700/50"> |
| | <tr class="hover:bg-slate-800/50"> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="bg-slate-800 rounded-lg p-1 mr-2"> |
| | <i class="fas fa-code-branch text-indigo-400 text-sm"></i> |
| | </div> |
| | <div> |
| | <p class="text-sm font-medium">blast-optimizer-v2</p> |
| | <p class="text-xs text-slate-400">0x4f3...c7a2</p> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-indigo-900 text-indigo-300">DeFi</span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm text-green-400 font-medium">+9.2%</td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="w-16 bg-slate-800 rounded-full h-1.5 mr-2"> |
| | <div class="bg-green-500 h-1.5 rounded-full" style="width: 91%"></div> |
| | </div> |
| | <span class="text-xs">91/100</span> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-green-900 text-green-300 flex items-center"> |
| | <i class="fas fa-check-circle mr-1"></i> Validated |
| | </span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm">1,242 agents</td> |
| | <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium"> |
| | <button class="text-indigo-400 hover:text-indigo-300">Fork</button> |
| | </td> |
| | </tr> |
| | <tr class="hover:bg-slate-800/50"> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="bg-slate-800 rounded-lg p-1 mr-2"> |
| | <i class="fas fa-code-branch text-blue-400 text-sm"></i> |
| | </div> |
| | <div> |
| | <p class="text-sm font-medium">gas-saver-pro</p> |
| | <p class="text-xs text-slate-400">0x8a2...e5b1</p> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-blue-900 text-blue-300">DeFi</span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm text-green-400 font-medium">+5.1%</td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="w-16 bg-slate-800 rounded-full h-1.5 mr-2"> |
| | <div class="bg-green-500 h-1.5 rounded-full" style="width: 95%"></div> |
| | </div> |
| | <span class="text-xs">95/100</span> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-green-900 text-green-300 flex items-center"> |
| | <i class="fas fa-check-circle mr-1"></i> Validated |
| | </span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm">892 agents</td> |
| | <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium"> |
| | <button class="text-indigo-400 hover:text-indigo-300">Fork</button> |
| | </td> |
| | </tr> |
| | <tr class="hover:bg-slate-800/50"> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="bg-slate-800 rounded-lg p-1 mr-2"> |
| | <i class="fas fa-code-branch text-purple-400 text-sm"></i> |
| | </div> |
| | <div> |
| | <p class="text-sm font-medium">npc-dialogue-v3</p> |
| | <p class="text-xs text-slate-400">0x1d7...f9c3</p> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-purple-900 text-purple-300">NPC</span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm text-green-400 font-medium">+7.8%</td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="w-16 bg-slate-800 rounded-full h-1.5 mr-2"> |
| | <div class="bg-green-500 h-1.5 rounded-full" style="width: 88%"></div> |
| | </div> |
| | <span class="text-xs">88/100</span> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-green-900 text-green-300 flex items-center"> |
| | <i class="fas fa-check-circle mr-1"></i> Validated |
| | </span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm">567 agents</td> |
| | <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium"> |
| | <button class="text-indigo-400 hover:text-indigo-300">Fork</button> |
| | </td> |
| | </tr> |
| | <tr class="hover:bg-slate-800/50"> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="bg-slate-800 rounded-lg p-1 mr-2"> |
| | <i class="fas fa-code-branch text-yellow-400 text-sm"></i> |
| | </div> |
| | <div> |
| | <p class="text-sm font-medium">llm-optimizer-v1</p> |
| | <p class="text-xs text-slate-400">0x3e9...a2d4</p> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-yellow-900 text-yellow-300">LLM</span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm text-green-400 font-medium">+3.5%</td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <div class="w-16 bg-slate-800 rounded-full h-1.5 mr-2"> |
| | <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 65%"></div> |
| | </div> |
| | <span class="text-xs">65/100</span> |
| | </div> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap"> |
| | <span class="px-2 py-1 text-xs rounded-full bg-yellow-900 text-yellow-300 flex items-center"> |
| | <i class="fas fa-hourglass-half mr-1"></i> Pending |
| | </span> |
| | </td> |
| | <td class="px-4 py-3 whitespace-nowrap text-sm">112 agents</td> |
| | <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium"> |
| | <button class="text-indigo-400 hover:text-indigo-300">Fork</button> |
| | </td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | <div class="mt-4 flex items-center justify-between"> |
| | <div class="text-sm text-slate-400">Showing 4 of 127 patches</div> |
| | <div class="flex space-x-2"> |
| | <button class="px-3 py-1 text-xs bg-slate-800 rounded-md">Previous</button> |
| | <button class="px-3 py-1 text-xs bg-indigo-900 text-indigo-300 rounded-md">Next</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="nodeModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| | <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| | <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| | <div class="absolute inset-0 bg-slate-900/80 backdrop-blur-sm"></div> |
| | </div> |
| | <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| | <div class="inline-block align-bottom glass-card rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-start justify-between"> |
| | <h3 id="modalTitle" class="text-lg font-semibold">Agent Details</h3> |
| | <button onclick="closeModal()" class="text-slate-400 hover:text-slate-300"> |
| | <i class="fas fa-times"></i> |
| | </button> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex items-center mb-4"> |
| | <div id="modalRepScore" class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center border-2 border-green-500 mr-4"> |
| | <span class="text-xl font-bold">84</span> |
| | </div> |
| | <div> |
| | <h4 id="modalAgentId" class="text-xl font-bold">AIXBT-v1.3</h4> |
| | <span id="modalAgentType" class="inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-indigo-900 text-indigo-300">DeFi</span> |
| | </div> |
| | </div> |
| | <div class="grid grid-cols-2 gap-4 mb-4"> |
| | <div class="bg-slate-800/50 rounded-lg p-3"> |
| | <p class="text-xs text-slate-400">ROI Impact</p> |
| | <p id="modalRoi" class="text-lg font-bold text-green-400">+9.2%</p> |
| | </div> |
| | <div class="bg-slate-800/50 rounded-lg p-3"> |
| | <p class="text-xs text-slate-400">Gas Impact</p> |
| | <p id="modalGas" class="text-lg font-bold text-yellow-400">-12%</p> |
| | </div> |
| | </div> |
| | <div class="mb-4"> |
| | <h4 class="text-sm font-semibold text-slate-400 mb-2">Patch Details</h4> |
| | <div class="bg-slate-800 rounded-lg p-3 overflow-x-auto"> |
| | <pre class="text-xs text-slate-300"><code id="modalPatchDiff">function optimizeBlast() { |
| | // Before |
| | executeTrade(amount, slippage=0.5%); |
| | |
| | // After patch |
| | executeTrade(amount, slippage=0.2%); |
| | checkArbOpportunity(); |
| | }</code></pre> |
| | </div> |
| | </div> |
| | <div> |
| | <h4 class="text-sm font-semibold text-slate-400 mb-2">Validation Summary</h4> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-full bg-slate-800 rounded-full h-2 mr-2"> |
| | <div id="modalValidationBar" class="bg-green-500 h-2 rounded-full" style="width: 91%"></div> |
| | </div> |
| | <span id="modalValidationScore" class="text-xs">91/100</span> |
| | </div> |
| | <div class="text-xs text-slate-400"> |
| | <p>Validated by 8/10 validators</p> |
| | <p>Average confidence score: 94%</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4 bg-slate-800/50 flex justify-end"> |
| | <button onclick="closeModal()" class="px-4 py-2 bg-indigo-900 text-indigo-300 rounded-md text-sm font-medium">Close</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="fixed bottom-6 right-6 z-40"> |
| | <div id="chatContainer" class="hidden w-80 bg-slate-800 rounded-xl shadow-xl overflow-hidden flex flex-col" style="height: 500px;"> |
| | <div class="bg-slate-700 px-4 py-3 flex items-center justify-between"> |
| | <h3 class="font-medium">LoopRep Assistant</h3> |
| | <button onclick="toggleChat()" class="text-slate-400 hover:text-slate-300"> |
| | <i class="fas fa-times"></i> |
| | </button> |
| | </div> |
| | <div id="chatMessages" class="flex-1 p-4 overflow-y-auto space-y-4"> |
| | <div class="flex"> |
| | <div class="bg-slate-700 rounded-lg p-3 max-w-xs"> |
| | <p class="text-sm">Hello! I'm your LoopRep assistant. How can I help you with agent reputation and patches today?</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-3 border-t border-slate-700"> |
| | <div class="flex"> |
| | <input id="chatInput" type="text" placeholder="Ask about agents, patches..." class="flex-1 bg-slate-700 text-white px-3 py-2 rounded-l-md focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm"> |
| | <button onclick="sendMessage()" class="bg-indigo-600 text-white px-3 py-2 rounded-r-md hover:bg-indigo-700"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <button onclick="toggleChat()" class="w-14 h-14 bg-indigo-600 rounded-full shadow-lg flex items-center justify-center hover:bg-indigo-700 transition-colors"> |
| | <i class="fas fa-robot text-xl"></i> |
| | </button> |
| | </div> |
| |
|
| | <script> |
| | |
| | function showNodeDetails(agentId, repScore) { |
| | const modal = document.getElementById('nodeModal'); |
| | const modalTitle = document.getElementById('modalTitle'); |
| | const modalAgentId = document.getElementById('modalAgentId'); |
| | const modalRepScore = document.getElementById('modalRepScore'); |
| | const modalAgentType = document.getElementById('modalAgentType'); |
| | const modalRoi = document.getElementById('modalRoi'); |
| | const modalGas = document.getElementById('modalGas'); |
| | const modalValidationBar = document.getElementById('modalValidationBar'); |
| | const modalValidationScore = document.getElementById('modalValidationScore'); |
| | |
| | |
| | modalTitle.textContent = `${agentId} Details`; |
| | modalAgentId.textContent = agentId; |
| | modalRepScore.innerHTML = `<span class="text-xl font-bold">${repScore}</span>`; |
| | modalRepScore.className = `w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center border-2 ${repScore >= 80 ? 'border-green-500' : repScore >= 50 ? 'border-yellow-500' : 'border-red-500'} mr-4`; |
| | |
| | |
| | if (agentId.includes('AIXBT')) { |
| | modalAgentType.textContent = 'DeFi'; |
| | modalAgentType.className = 'inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-indigo-900 text-indigo-300'; |
| | modalRoi.textContent = '+9.2%'; |
| | modalGas.textContent = '-12%'; |
| | modalValidationBar.style.width = '91%'; |
| | modalValidationBar.className = 'bg-green-500 h-2 rounded-full'; |
| | modalValidationScore.textContent = '91/100'; |
| | } else if (agentId.includes('BLAST')) { |
| | modalAgentType.textContent = 'DeFi'; |
| | modalAgentType.className = 'inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-indigo-900 text-indigo-300'; |
| | modalRoi.textContent = '+7.5%'; |
| | modalGas.textContent = '-15%'; |
| | modalValidationBar.style.width = '88%'; |
| | modalValidationBar.className = 'bg-green-500 h-2 rounded-full'; |
| | modalValidationScore.textContent = '88/100'; |
| | } else if (agentId.includes('GAS')) { |
| | modalAgentType.textContent = 'DeFi'; |
| | modalAgentType.className = 'inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-blue-900 text-blue-300'; |
| | modalRoi.textContent = '+5.1%'; |
| | modalGas.textContent = '-22%'; |
| | modalValidationBar.style.width = '95%'; |
| | modalValidationBar.className = 'bg-green-500 h-2 rounded-full'; |
| | modalValidationScore.textContent = '95/100'; |
| | } else if (agentId.includes('NPC')) { |
| | modalAgentType.textContent = 'NPC'; |
| | modalAgentType.className = 'inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-purple-900 text-purple-300'; |
| | modalRoi.textContent = '+7.8%'; |
| | modalGas.textContent = '-8%'; |
| | modalValidationBar.style.width = '88%'; |
| | modalValidationBar.className = 'bg-green-500 h-2 rounded-full'; |
| | modalValidationScore.textContent = '88/100'; |
| | } else if (agentId.includes('LLM')) { |
| | modalAgentType.textContent = 'LLM'; |
| | modalAgentType.className = 'inline-block mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-yellow-900 text-yellow-300'; |
| | modalRoi.textContent = '+3.5%'; |
| | modalGas.textContent = '-5%'; |
| | modalValidationBar.style.width = '65%'; |
| | modalValidationBar.className = 'bg-yellow-500 h-2 rounded-full'; |
| | modalValidationScore.textContent = '65/100'; |
| | } |
| | |
| | modal.classList.remove('hidden'); |
| | } |
| | |
| | function closeModal() { |
| | document.getElementById('nodeModal').classList.add('hidden'); |
| | } |
| | |
| | |
| | function toggleChat() { |
| | const chatContainer = document.getElementById('chatContainer'); |
| | chatContainer.classList.toggle('hidden'); |
| | } |
| | |
| | function sendMessage() { |
| | const input = document.getElementById('chatInput'); |
| | const message = input.value.trim(); |
| | if (message === '') return; |
| | |
| | const chatMessages = document.getElementById('chatMessages'); |
| | |
| | |
| | chatMessages.innerHTML += ` |
| | <div class="flex justify-end"> |
| | <div class="bg-indigo-600 rounded-lg p-3 max-w-xs"> |
| | <p class="text-sm">${message}</p> |
| | </div> |
| | </div> |
| | `; |
| | |
| | input.value = ''; |
| | |
| | |
| | chatMessages.innerHTML += ` |
| | <div class="flex"> |
| | <div class="bg-slate-700 rounded-lg p-3 max-w-xs"> |
| | <div class="flex space-x-1"> |
| | <div class="w-2 h-2 rounded-full bg-slate-400 animate-pulse-slow"></div> |
| | <div class="w-2 h-2 rounded-full bg-slate-400 animate-pulse-slow" style="animation-delay: 0.2s"></div> |
| | <div class="w-2 h-2 rounded-full bg-slate-400 animate-pulse-slow" style="animation-delay: 0.4s"></div> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | |
| | |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | |
| | |
| | setTimeout(() => { |
| | |
| | const typingIndicators = chatMessages.querySelectorAll('.flex.space-x-1'); |
| | if (typingIndicators.length > 0) { |
| | typingIndicators[typingIndicators.length - 1].parentElement.parentElement.remove(); |
| | } |
| | |
| | |
| | let response = "I'm sorry, I didn't understand that. Could you rephrase your question?"; |
| | |
| | if (message.toLowerCase().includes('reputation') || message.toLowerCase().includes('score')) { |
| | response = "Reputation scores in LoopRep range from 0-100 and are calculated based on agent performance, patch validation results, and community feedback. Scores above 80 are considered excellent, 50-79 are moderate, and below 50 indicate the agent needs improvement."; |
| | } else if (message.toLowerCase().includes('patch') || message.toLowerCase().includes('update')) { |
| | response = "Patches are modular updates to agent logic that must be validated by the network. You can browse validated patches in the Marketplace tab or submit your own patches for validation if you're a registered validator."; |
| | } else if (message.toLowerCase().includes('ai') && message.toLowerCase().includes('xbt')) { |
| | response = "AIXBT-v1.3 is a DeFi agent with a current reputation score of 84. Its latest patch 'blast-optimizer-v2' improved ROI by 9.2% and reduced gas usage by 12%. It's been adopted by 1,242 agents."; |
| | } else if (message.toLowerCase().includes('validate') || message.toLowerCase().includes('validator')) { |
| | response = "To become a validator, you need to stake LOOP tokens and pass a knowledge test. Validators review patch submissions, run simulations, and vote on whether patches should be approved. Top validators earn rewards."; |
| | } |
| | |
| | |
| | chatMessages.innerHTML += ` |
| | <div class="flex"> |
| | <div class="bg-slate-700 rounded-lg p-3 max-w-xs"> |
| | <p class="text-sm">${response}</p> |
| | </div> |
| | </div> |
| | `; |
| | |
| | |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | }, 1000); |
| | } |
| | |
| | |
| | document.getElementById('chatInput').addEventListener('keypress', function(e) { |
| | if (e.key === 'Enter') { |
| | sendMessage(); |
| | } |
| | }); |
| | </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=karhar92/video" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
