Hugging Face's logo

Spaces:
dwarfplanet
/
fluxcx
Running

App Files Community
fluxcx / index.html
dwarfplanet's picture
dwarfplanet
Add 2 files
cfdfcd6 verified
raw
history blame
52.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Repo Sync Agent 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>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
}
.sidebar {
transition: all 0.3s ease;
}
.card-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.pr-status--approved {
border-left: 4px solid #10b981;
}
.pr-status--pending {
border-left: 4px solid #f59e0b;
}
.pr-status--rejected {
border-left: 4px solid #ef4444;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.hover-grow {
transition: all 0.2s ease;
}
.hover-grow:hover {
transform: translateY(-2px);
}
.badge-premium {
background: linear-gradient(45deg, #f59e0b, #f97316);
color: white;
font-weight: 600;
}
.test-coverage-high {
background-color: #10b98120;
border-left: 4px solid #10b981;
}
.test-coverage-medium {
background-color: #f59e0b20;
border-left: 4px solid #f59e0b;
}
.test-coverage-low {
background-color: #ef444420;
border-left: 4px solid #ef4444;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 hidden md:block">
<div class="p-4 border-b border-gray-800">
<div class="flex items-center space-x-2">
<i class="fas fa-robot text-blue-400 text-2xl"></i>
<h1 class="text-xl font-bold">Repo Sync AI</h1>
</div>
</div>
<nav class="p-4">
<div class="space-y-2">
<a href="#" class="flex items-center space-x-3 px-3 py-2 bg-gray-800 rounded-lg text-blue-400">
<i class="fas fa-tachometer-alt w-5"></i>
<span>Dashboard</span>
</a>
<a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white">
<i class="fas fa-code-branch w-5"></i>
<span>Repositories</span>
</a>
<a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white">
<i class="fas fa-tasks w-5"></i>
<span>Agents</span>
</a>
<a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white">
<i class="fas fa-clock w-5"></i>
<span>Schedules</span>
</a>
<a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white">
<i class="fas fa-vial w-5"></i>
<span>Test Automation</span>
<span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
</a>
<a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white">
<i class="fas fa-shield-alt w-5"></i>
<span>Security</span>
</a>
<a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white">
<i class="fas fa-cog w-5"></i>
<span>Settings</span>
</a>
</div>
<div class="mt-8 pt-4 border-t border-gray-800">
<h3 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Recent Activity</h3>
<div class="mt-2 space-y-2">
<a href="#" class="block px-3 py-2 text-sm hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white truncate">
<span class="text-blue-400">#42</span> PR merged to react-app
</a>
<a href="#" class="block px-3 py-2 text-sm hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white truncate">
<span class="text-purple-400">Tests</span> generated for api-service
</a>
<a href="#" class="block px-3 py-2 text-sm hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white truncate">
<span class="text-green-400">+3</span> Architecture improvements
</a>
</div>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white border-b border-gray-200">
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center space-x-4">
<button class="md:hidden text-gray-500">
<i class="fas fa-bars"></i>
</button>
<h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-bell text-gray-500"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
<div class="flex items-center space-x-2">
<div class="relative">
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
<span class="absolute -bottom-1 -right-1 bg-green-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
<i class="fas fa-crown text-xs"></i>
</span>
</div>
<span class="hidden md:inline text-sm font-medium">John Developer</span>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="p-6">
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-lg card-shadow p-6 hover-grow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Active Repos</p>
<h3 class="text-2xl font-bold mt-1">12</h3>
<p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 2 new this week</p>
</div>
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
<i class="fas fa-code-branch text-blue-500 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg card-shadow p-6 hover-grow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">AI Agents</p>
<h3 class="text-2xl font-bold mt-1">8</h3>
<p class="text-xs text-blue-500 mt-1">4 running now</p>
</div>
<div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center">
<i class="fas fa-robot text-purple-500 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg card-shadow p-6 hover-grow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Open PRs</p>
<h3 class="text-2xl font-bold mt-1">7</h3>
<p class="text-xs text-yellow-500 mt-1">3 need review</p>
</div>
<div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center">
<i class="fas fa-code-pull-request text-green-500 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg card-shadow p-6 hover-grow relative">
<div class="absolute top-2 right-2">
<span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Test Coverage</p>
<h3 class="text-2xl font-bold mt-1">87%</h3>
<p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12% this month</p>
</div>
<div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center">
<i class="fas fa-vial text-indigo-500 text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Test Automation Section -->
<div class="mb-6">
<div class="bg-white rounded-lg card-shadow overflow-hidden">
<div class="p-5 border-b border-gray-200 flex items-center justify-between">
<div class="flex items-center">
<h3 class="font-semibold text-lg">Test Automation</h3>
<span class="badge-premium ml-2 text-xs px-2 py-1 rounded-full">PREMIUM</span>
</div>
<div>
<button class="text-sm text-blue-500 hover:text-blue-700 mr-3">View Reports</button>
<button class="text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded">Generate Tests</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200">
<!-- Test Coverage -->
<div class="p-5">
<h4 class="font-medium text-gray-700 mb-3">Test Coverage</h4>
<div class="space-y-3">
<div class="p-3 rounded test-coverage-high">
<div class="flex items-center justify-between">
<span class="font-medium">react-app</span>
<span class="font-bold text-green-600">92%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
<div class="bg-green-500 h-1.5 rounded-full" style="width: 92%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>Unit Tests</span>
<span>432/469</span>
</div>
</div>
<div class="p-3 rounded test-coverage-medium">
<div class="flex items-center justify-between">
<span class="font-medium">api-service</span>
<span class="font-bold text-yellow-600">78%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>Integration Tests</span>
<span>287/368</span>
</div>
</div>
<div class="p-3 rounded test-coverage-low">
<div class="flex items-center justify-between">
<span class="font-medium">data-service</span>
<span class="font-bold text-red-600">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
<div class="bg-red-500 h-1.5 rounded-full" style="width: 45%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>E2E Tests</span>
<span>89/198</span>
</div>
</div>
</div>
</div>
<!-- GitHub Actions -->
<div class="p-5">
<h4 class="font-medium text-gray-700 mb-3">GitHub Actions</h4>
<div class="space-y-4">
<div>
<div class="flex items-center justify-between mb-1">
<span class="font-medium">Test Workflows</span>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
</div>
<p class="text-sm text-gray-600">Automated test runs on push/pull requests</p>
</div>
<div>
<div class="flex items-center justify-between mb-1">
<span class="font-medium">Coverage Reports</span>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
</div>
<p class="text-sm text-gray-600">Detailed coverage reports in PR comments</p>
</div>
<div>
<div class="flex items-center justify-between mb-1">
<span class="font-medium">Flaky Test Detection</span>
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pending</span>
</div>
<p class="text-sm text-gray-600">Identify and fix unstable tests</p>
</div>
<div class="pt-2">
<button class="w-full text-sm border border-gray-300 hover:border-gray-400 rounded px-3 py-1.5 text-gray-700 hover:bg-gray-50 transition-colors">
<i class="fas fa-plus mr-1"></i> Add Workflow
</button>
</div>
</div>
</div>
<!-- Recent Test Runs -->
<div class="p-5">
<h4 class="font-medium text-gray-700 mb-3">Recent Test Runs</h4>
<div class="space-y-3">
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-medium">react-app</span>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Passed</span>
</div>
<p class="text-sm text-gray-600 mt-1">Unit Tests • 2m 34s</p>
<div class="flex justify-between text-xs text-gray-500 mt-2">
<span>#42</span>
<span>15 min ago</span>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-medium">api-service</span>
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">1 Failed</span>
</div>
<p class="text-sm text-gray-600 mt-1">Integration Tests • 4m 12s</p>
<div class="flex justify-between text-xs text-gray-500 mt-2">
<span>#43</span>
<span>1 hour ago</span>
</div>
</div>
<div class="p-3 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-medium">data-service</span>
<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">3 Failed</span>
</div>
<p class="text-sm text-gray-600 mt-1">E2E Tests • 8m 45s</p>
<div class="flex justify-between text-xs text-gray-500 mt-2">
<span>#41</span>
<span>3 hours ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Recent Activity -->
<div class="lg:col-span-2">
<div class="bg-white rounded-lg card-shadow overflow-hidden">
<div class="p-5 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="font-semibold text-lg">Recent Activity</h3>
<button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
</div>
</div>
<div class="divide-y divide-gray-200">
<div class="p-4 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
<i class="fas fa-check text-green-500"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">PR #42 merged</h4>
<span class="text-xs text-gray-500">2h ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Security improvements merged into <span class="font-medium">react-app</span></p>
<div class="mt-2 flex space-x-2">
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Security</span>
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">React</span>
</div>
</div>
</div>
</div>
<div class="p-4 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
<i class="fas fa-vial text-purple-500"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">Tests generated</h4>
<span class="text-xs text-gray-500">5h ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Added 23 unit tests for <span class="font-medium">api-service</span></p>
<div class="mt-2 flex space-x-2">
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Tests</span>
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Node.js</span>
</div>
</div>
</div>
</div>
<div class="p-4 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
<i class="fas fa-search text-yellow-500"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">Code review completed</h4>
<span class="text-xs text-gray-500">1d ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Found 3 potential bugs in <span class="font-medium">data-service</span></p>
<div class="mt-2 flex space-x-2">
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Bugs</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">TypeScript</span>
</div>
</div>
</div>
</div>
<div class="p-4 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-bolt text-red-500"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">Security alert</h4>
<span class="text-xs text-gray-500">2d ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Critical vulnerability patched in <span class="font-medium">auth-service</span></p>
<div class="mt-2 flex space-x-2">
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Critical</span>
<span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">Security</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Agent Status -->
<div>
<div class="bg-white rounded-lg card-shadow overflow-hidden">
<div class="p-5 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="font-semibold text-lg">Agent Status</h3>
<button class="text-sm text-blue-500 hover:text-blue-700">Manage</button>
</div>
</div>
<div class="p-5">
<div class="space-y-4">
<div class="flex items-center">
<div class="relative mr-3">
<svg class="w-12 h-12" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#e6e6e6"
stroke-width="3"
/>
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#10b981"
stroke-width="3"
stroke-dasharray="75, 100"
/>
<text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#10b981" font-weight="bold">75%</text>
</svg>
</div>
<div>
<h4 class="font-medium">Code Review Agent</h4>
<p class="text-sm text-gray-600">Analyzing react-app</p>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
Active
</div>
</div>
</div>
<div class="flex items-center">
<div class="relative mr-3">
<svg class="w-12 h-12" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#e6e6e6"
stroke-width="3"
/>
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#3b82f6"
stroke-width="3"
stroke-dasharray="42, 100"
/>
<text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#3b82f6" font-weight="bold">42%</text>
</svg>
</div>
<div>
<h4 class="font-medium">Security Scanner</h4>
<p class="text-sm text-gray-600">Scanning api-service</p>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span class="w-2 h-2 rounded-full bg-blue-500 mr-1"></span>
Running
</div>
</div>
</div>
<div class="flex items-center relative">
<div class="absolute top-0 right-0">
<span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
</div>
<div class="relative mr-3">
<svg class="w-12 h-12" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#e6e6e6"
stroke-width="3"
/>
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#8b5cf6"
stroke-width="3"
stroke-dasharray="90, 100"
/>
<text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#8b5cf6" font-weight="bold">90%</text>
</svg>
</div>
<div>
<h4 class="font-medium">Test Generator</h4>
<p class="text-sm text-gray-600">Updating tests for data-service</p>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span class="w-2 h-2 rounded-full bg-purple-500 mr-1"></span>
Running
</div>
</div>
</div>
<div class="flex items-center">
<div class="relative mr-3">
<svg class="w-12 h-12" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#e6e6e6"
stroke-width="3"
/>
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#f59e0b"
stroke-width="3"
stroke-dasharray="15, 100"
/>
<text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#f59e0b" font-weight="bold">15%</text>
</svg>
</div>
<div>
<h4 class="font-medium">Architecture Agent</h4>
<p class="text-sm text-gray-600">Optimizing data-service</p>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></span>
Pending
</div>
</div>
</div>
</div>
<button class="mt-6 w-full py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg font-medium transition-colors">
<i class="fas fa-plus mr-2"></i> Deploy New Agent
</button>
</div>
</div>
</div>
</div>
<!-- Pull Requests Section -->
<div class="mt-6">
<div class="bg-white rounded-lg card-shadow overflow-hidden">
<div class="p-5 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="font-semibold text-lg">Recent Pull Requests</h3>
<button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
</div>
</div>
<div class="divide-y divide-gray-200">
<div class="p-4 pr-status--approved hover:bg-gray-50 cursor-pointer">
<div class="flex items-start">
<div class="mr-3">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-check text-green-500"></i>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">#42 - Security improvements</h4>
<span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Approved</span>
</div>
<p class="text-sm text-gray-600 mt-1">Fixed 3 security vulnerabilities in authentication flow</p>
<div class="mt-2 flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-500"><i class="fas fa-code-branch mr-1"></i> react-app</span>
<span class="text-xs text-gray-500"><i class="fas fa-user mr-1"></i> AI Agent</span>
</div>
<span class="text-xs text-gray-500">2 hours ago</span>
</div>
</div>
</div>
</div>
<div class="p-4 pr-status--pending hover:bg-gray-50 cursor-pointer">
<div class="flex items-start">
<div class="mr-3">
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
<i class="fas fa-clock text-yellow-500"></i>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">#43 - Architecture refactor</h4>
<span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Pending</span>
</div>
<p class="text-sm text-gray-600 mt-1">Improved module separation and dependency management</p>
<div class="mt-2 flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-500"><i class="fas fa-code-branch mr-1"></i> api-service</span>
<span class="text-xs text-gray-500"><i class="fas fa-user mr-1"></i> AI Agent</span>
</div>
<span class="text-xs text-gray-500">5 hours ago</span>
</div>
</div>
</div>
</div>
<div class="p-4 pr-status--rejected hover:bg-gray-50 cursor-pointer relative">
<div class="absolute top-0 right-0 mt-4 mr-4">
<span class="badge-premium text-xs px-2 py-1 rounded-full">TESTS</span>
</div>
<div class="flex items-start">
<div class="mr-3">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-times text-red-500"></i>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">#41 - Performance optimizations</h4>
<span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">Rejected</span>
</div>
<p class="text-sm text-gray-600 mt-1">Tests failed (3/45) - Needs more testing before merging</p>
<div class="mt-2 flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-500"><i class="fas fa-code-branch mr-1"></i> data-service</span>
<span class="text-xs text-gray-500"><i class="fas fa-user mr-1"></i> AI Agent</span>
</div>
<span class="text-xs text-gray-500">1 day ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-plus text-blue-500 text-xl"></i>
</div>
<h4 class="font-medium">Add Repository</h4>
<p class="text-xs text-gray-500 mt-1">Connect a new GitHub repo</p>
</button>
<button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-robot text-green-500 text-xl"></i>
</div>
<h4 class="font-medium">Create Agent</h4>
<p class="text-xs text-gray-500 mt-1">Deploy a new AI agent</p>
</button>
<button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow relative">
<div class="absolute top-2 right-2">
<span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
</div>
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-vial text-purple-500 text-xl"></i>
</div>
<h4 class="font-medium">Generate Tests</h4>
<p class="text-xs text-gray-500 mt-1">AI-powered test generation</p>
</button>
<button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow">
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-shield-alt text-red-500 text-xl"></i>
</div>
<h4 class="font-medium">Security Audit</h4>
<p class="text-xs text-gray-500 mt-1">Run vulnerability scan</p>
</button>
</div>
</main>
</div>
</div>
<script>
// Sample data for the dashboard
const dashboardData = {
repositories: [
{ name: 'react-app', lastScan: '2 hours ago', issues: 3, prs: 1, coverage: 92 },
{ name: 'api-service', lastScan: '5 hours ago', issues: 7, prs: 1, coverage: 78 },
{ name: 'data-service', lastScan: '1 day ago', issues: 2, prs: 0, coverage: 45 },
{ name: 'auth-service', lastScan: '2 days ago', issues: 5, prs: 0, coverage: 63 }
],
agents: [
{ name: 'Code Review', status: 'active', progress: 75, repo: 'react-app' },
{ name: 'Security Scanner', status: 'running', progress: 42, repo: 'api-service' },
{ name: 'Test Generator', status: 'running', progress: 90, repo: 'data-service', premium: true },
{ name: 'Architecture', status: 'pending', progress: 15, repo: 'data-service' }
],
pullRequests: [
{ id: 42, title: 'Security improvements', status: 'approved', repo: 'react-app', author: 'AI Agent', time: '2 hours ago' },
{ id: 43, title: 'Architecture refactor', status: 'pending', repo: 'api-service', author: 'AI Agent', time: '5 hours ago' },
{ id: 41, title: 'Performance optimizations', status: 'rejected', repo: 'data-service', author: 'AI Agent', time: '1 day ago', testsFailed: true }
],
testRuns: [
{ repo: 'react-app', status: 'passed', type: 'Unit Tests', duration: '2m 34s', pr: 42, time: '15 min ago' },
{ repo: 'api-service', status: '1 failed', type: 'Integration Tests', duration: '4m 12s', pr: 43, time: '1 hour ago' },
{ repo: 'data-service', status: '3 failed', type: 'E2E Tests', duration: '8m 45s', pr: 41, time: '3 hours ago' }
]
};
// In a real app, you would fetch this data from an API
console.log('Dashboard data loaded:', dashboardData);
// Event listeners for interactive elements
document.querySelectorAll('.hover-grow').forEach(element => {
element.addEventListener('mouseenter', () => {
element.classList.add('transform', 'scale-105');
});
element.addEventListener('mouseleave', () => {
element.classList.remove('transform', 'scale-105');
});
});
// Simulate loading states
setTimeout(() => {
document.querySelectorAll('.animate-pulse').forEach(element => {
element.classList.remove('animate-pulse');
});
}, 2000);
// Generate tests button functionality
document.querySelectorAll('[data-action="generate-tests"]').forEach(button => {
button.addEventListener('click', () => {
alert('Initiating AI-powered test generation... This premium feature will analyze your codebase and generate comprehensive test suites.');
});
});
</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=dwarfplanet/fluxcx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>