Hugging Face's logo

Spaces:
dwarfplanet
/
fluxcx
Running

App Files Community
dwarfplanet commited on
Commit
cfdfcd6
·
verified ·
1 Parent(s): 417b8fb

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +752 -173
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>FluxCX Everywhere - AI for Every Contact Center</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -11,219 +11,798 @@
11
 
12
  body {
13
  font-family: 'Inter', sans-serif;
14
- color: #0E1E25;
15
  }
16
 
17
- .hero-shadow {
18
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
19
  }
20
 
21
- .btn-shadow {
22
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
23
  }
24
 
25
- .btn-arrow {
26
- transition: transform 0.2s ease;
 
 
27
  }
28
 
29
- .btn-primary:hover .btn-arrow {
30
- transform: translateX(4px);
31
  }
32
 
33
- .logo-hover {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  transition: all 0.2s ease;
35
  }
36
 
37
- .logo-hover:hover {
38
- filter: brightness(0) saturate(100%) invert(35%) sepia(22%) saturate(1493%) hue-rotate(143deg) brightness(91%) contrast(101%);
39
  }
40
 
41
- .video-container {
42
- position: relative;
43
- padding-bottom: 62.5%; /* 16:10 aspect ratio */
 
44
  }
45
 
46
- .video-container video {
47
- position: absolute;
48
- top: 0;
49
- left: 0;
50
- width: 100%;
51
- height: 100%;
52
- object-fit: cover;
53
  }
54
 
55
- @media (max-width: 768px) {
56
- .hero-grid {
57
- grid-template-columns: 1fr;
58
- }
59
-
60
- .video-container {
61
- padding-bottom: 75%; /* 4:3 for mobile */
62
- }
63
  }
64
  </style>
65
  </head>
66
- <body class="bg-white">
67
- <!-- Sticky Navigation -->
68
- <nav class="sticky top-0 z-50 bg-white border-b border-gray-200 px-6 py-4">
69
- <div class="max-w-7xl mx-auto flex justify-between items-center">
70
- <div class="flex items-center space-x-2">
71
- <i class="fas fa-bolt text-[#007C82] text-xl"></i>
72
- <span class="font-bold text-gray-900">FluxCX</span>
 
 
73
  </div>
74
- <button class="bg-[#007C82] hover:bg-[#006972] text-white px-4 py-2 rounded-lg font-medium btn-shadow transition-colors">
75
- Install extension
76
- </button>
77
- </div>
78
- </nav>
79
-
80
- <!-- Hero Section -->
81
- <section class="py-12 px-6 max-w-7xl mx-auto">
82
- <div class="grid hero-grid md:grid-cols-2 gap-12 items-center">
83
- <!-- Left Column - Content -->
84
- <div class="order-2 md:order-1">
85
- <h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6">
86
- FluxCX lives inside the tools you already use.
87
- </h1>
88
- <p class="text-xl text-gray-600 mb-8 max-w-lg">
89
- AI replies & summaries in Zendesk, Salesforce & more—no migration needed.
90
- </p>
91
-
92
- <div class="flex flex-col sm:flex-row gap-4 mb-8">
93
- <button class="btn-primary bg-[#007C82] hover:bg-[#006972] text-white px-6 py-3 rounded-lg font-medium btn-shadow transition-colors flex items-center justify-center">
94
- Install Chrome Extension <span class="btn-arrow ml-2">→</span>
95
- </button>
96
- <button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors flex items-center justify-center">
97
- <i class="fas fa-play mr-2"></i> Watch 90-sec demo
98
- </button>
 
 
 
 
 
 
99
  </div>
100
 
101
- <div class="flex items-center space-x-6">
102
- <div class="flex items-center text-sm text-gray-500">
103
- <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
104
- SOC 2 Type II
 
 
 
 
 
 
 
 
105
  </div>
106
- <div class="flex items-center text-sm text-gray-500">
107
- <i class="fas fa-shield-alt mr-2"></i>
108
- GDPR-ready
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </div>
110
  </div>
111
- </div>
112
 
113
- <!-- Right Column - Video Demo -->
114
- <div class="order-1 md:order-2 rounded-2xl overflow-hidden hero-shadow">
115
- <div class="video-container">
116
- <!-- Demo video placeholder - would be replaced with actual MP4/WebM -->
117
- <video autoplay loop muted playsinline poster="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
118
- <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
119
- Your browser does not support the video tag.
120
- </video>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  </div>
122
- </div>
123
- </div>
124
- </section>
125
-
126
- <!-- Integrations Strip -->
127
- <section class="py-8 px-6 max-w-7xl mx-auto">
128
- <div class="text-center mb-8">
129
- <p class="text-gray-500 mb-4">Works exactly the same in:</p>
130
- <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
131
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/z/zendesk.svg/1200px-zendesk.svg.png" alt="Zendesk" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Zendesk">
132
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Salesforce_logo.svg/1200px-Salesforce_logo.svg.png" alt="Salesforce" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Salesforce">
133
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Genesys_logo.svg/1200px-Genesys_logo.svg.png" alt="Genesys" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Genesys">
134
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/NICE_CXone_logo.svg/1200px-NICE_CXone_logo.svg.png" alt="NICE CXone" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in NICE CXone">
135
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Intercom_logo.svg/1200px-Intercom_logo.svg.png" alt="Intercom" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Intercom">
136
- </div>
137
- </div>
138
- </section>
139
-
140
- <!-- Benefits Section -->
141
- <section class="py-16 px-6 max-w-7xl mx-auto bg-gray-50 rounded-2xl">
142
- <div class="grid md:grid-cols-3 gap-8">
143
- <div class="bg-white p-8 rounded-xl border border-gray-200">
144
- <div class="w-14 h-14 bg-[#E3F0F1] rounded-lg flex items-center justify-center mb-6">
145
- <i class="fas fa-plug text-[#007C82] text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
- <h3 class="font-semibold text-xl text-gray-900 mb-3">One-click installation</h3>
148
- <p class="text-gray-600">No IT tickets required. Agents can install the Chrome extension themselves in seconds.</p>
149
- </div>
150
- <div class="bg-white p-8 rounded-xl border border-gray-200">
151
- <div class="w-14 h-14 bg-[#E3F0F1] rounded-lg flex items-center justify-center mb-6">
152
- <i class="fas fa-robot text-[#007C82] text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
153
  </div>
154
- <h3 class="font-semibold text-xl text-gray-900 mb-3">Same powerful AI</h3>
155
- <p class="text-gray-600">All the AI replies, knowledge retrieval, and coaching you get in FluxCX's native interface.</p>
156
- </div>
157
- <div class="bg-white p-8 rounded-xl border border-gray-200">
158
- <div class="w-14 h-14 bg-[#E3F0F1] rounded-lg flex items-center justify-center mb-6">
159
- <i class="fas fa-lock text-[#007C82] text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
160
  </div>
161
- <h3 class="font-semibold text-xl text-gray-900 mb-3">Enterprise-grade security</h3>
162
- <p class="text-gray-600">SOC 2 Type II certified and GDPR compliant, just like our core platform.</p>
163
- </div>
164
- </div>
165
- </section>
166
-
167
- <!-- CTA Section -->
168
- <section class="py-16 px-6 max-w-3xl mx-auto text-center">
169
- <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Ready to bring FluxCX to your contact center?</h2>
170
- <p class="text-xl text-gray-600 mb-8">
171
- Join our waitlist to be among the first to experience FluxCX integrated with your existing tools.
172
- </p>
173
- <div class="flex flex-col sm:flex-row justify-center gap-4">
174
- <button class="btn-primary bg-[#007C82] hover:bg-[#006972] text-white px-8 py-4 rounded-lg font-medium btn-shadow transition-colors flex items-center justify-center mx-auto sm:mx-0">
175
- Join waitlist <span class="btn-arrow ml-2">→</span>
176
- </button>
177
- <button class="border border-gray-300 bg-white hover:bg-gray-50 text-gray-700 px-8 py-4 rounded-lg font-medium transition-colors">
178
- Request demo
179
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  </div>
181
- </section>
182
 
183
  <script>
184
- // Track logo hover events
185
- document.querySelectorAll('[data-event="integration_logo_hover"]').forEach(logo => {
186
- logo.addEventListener('mouseenter', () => {
187
- console.log(`Tracking hover: ${logo.getAttribute('data-event')}`);
188
- // In a real implementation, this would send data to analytics
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  });
190
- });
191
-
192
- // Track CTA clicks
193
- document.querySelectorAll('.btn-primary').forEach(btn => {
194
- btn.addEventListener('click', () => {
195
- console.log('Tracking event: cta_install_extension');
196
- // In a real implementation:
197
- // gtag('event','cta_install_extension', {location:'hero'});
198
  });
199
  });
200
-
201
- // Video interaction
202
- const demoVideo = document.querySelector('video');
203
- if (demoVideo) {
204
- // Pause video at the end to show the "Copied" toast frame
205
- demoVideo.addEventListener('ended', () => {
206
- demoVideo.pause();
207
- });
208
-
209
- // Restart video on click
210
- demoVideo.addEventListener('click', () => {
211
- demoVideo.currentTime = 0;
212
- demoVideo.play();
213
  });
214
- }
215
-
216
- // Mobile responsive adjustments
217
- function handleMobileLayout() {
218
- if (window.innerWidth <= 768) {
219
- // For mobile, we might want to adjust some spacing
220
- document.querySelector('section.py-12').classList.add('pt-8');
221
- }
222
- }
223
 
224
- // Run on load and resize
225
- window.addEventListener('load', handleMobileLayout);
226
- window.addEventListener('resize', handleMobileLayout);
 
 
 
227
  </script>
228
  <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>
229
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GitHub Repo Sync Agent Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
11
 
12
  body {
13
  font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
  }
16
 
17
+ .sidebar {
18
+ transition: all 0.3s ease;
19
  }
20
 
21
+ .card-shadow {
22
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
23
  }
24
 
25
+ .progress-ring__circle {
26
+ transition: stroke-dashoffset 0.35s;
27
+ transform: rotate(-90deg);
28
+ transform-origin: 50% 50%;
29
  }
30
 
31
+ .pr-status--approved {
32
+ border-left: 4px solid #10b981;
33
  }
34
 
35
+ .pr-status--pending {
36
+ border-left: 4px solid #f59e0b;
37
+ }
38
+
39
+ .pr-status--rejected {
40
+ border-left: 4px solid #ef4444;
41
+ }
42
+
43
+ .animate-pulse {
44
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
45
+ }
46
+
47
+ @keyframes pulse {
48
+ 0%, 100% {
49
+ opacity: 1;
50
+ }
51
+ 50% {
52
+ opacity: 0.5;
53
+ }
54
+ }
55
+
56
+ .hover-grow {
57
  transition: all 0.2s ease;
58
  }
59
 
60
+ .hover-grow:hover {
61
+ transform: translateY(-2px);
62
  }
63
 
64
+ .badge-premium {
65
+ background: linear-gradient(45deg, #f59e0b, #f97316);
66
+ color: white;
67
+ font-weight: 600;
68
  }
69
 
70
+ .test-coverage-high {
71
+ background-color: #10b98120;
72
+ border-left: 4px solid #10b981;
 
 
 
 
73
  }
74
 
75
+ .test-coverage-medium {
76
+ background-color: #f59e0b20;
77
+ border-left: 4px solid #f59e0b;
78
+ }
79
+
80
+ .test-coverage-low {
81
+ background-color: #ef444420;
82
+ border-left: 4px solid #ef4444;
83
  }
84
  </style>
85
  </head>
86
+ <body class="bg-gray-50">
87
+ <div class="flex h-screen overflow-hidden">
88
+ <!-- Sidebar -->
89
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 hidden md:block">
90
+ <div class="p-4 border-b border-gray-800">
91
+ <div class="flex items-center space-x-2">
92
+ <i class="fas fa-robot text-blue-400 text-2xl"></i>
93
+ <h1 class="text-xl font-bold">Repo Sync AI</h1>
94
+ </div>
95
  </div>
96
+ <nav class="p-4">
97
+ <div class="space-y-2">
98
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 bg-gray-800 rounded-lg text-blue-400">
99
+ <i class="fas fa-tachometer-alt w-5"></i>
100
+ <span>Dashboard</span>
101
+ </a>
102
+ <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">
103
+ <i class="fas fa-code-branch w-5"></i>
104
+ <span>Repositories</span>
105
+ </a>
106
+ <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">
107
+ <i class="fas fa-tasks w-5"></i>
108
+ <span>Agents</span>
109
+ </a>
110
+ <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">
111
+ <i class="fas fa-clock w-5"></i>
112
+ <span>Schedules</span>
113
+ </a>
114
+ <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">
115
+ <i class="fas fa-vial w-5"></i>
116
+ <span>Test Automation</span>
117
+ <span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
118
+ </a>
119
+ <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">
120
+ <i class="fas fa-shield-alt w-5"></i>
121
+ <span>Security</span>
122
+ </a>
123
+ <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">
124
+ <i class="fas fa-cog w-5"></i>
125
+ <span>Settings</span>
126
+ </a>
127
  </div>
128
 
129
+ <div class="mt-8 pt-4 border-t border-gray-800">
130
+ <h3 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Recent Activity</h3>
131
+ <div class="mt-2 space-y-2">
132
+ <a href="#" class="block px-3 py-2 text-sm hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white truncate">
133
+ <span class="text-blue-400">#42</span> PR merged to react-app
134
+ </a>
135
+ <a href="#" class="block px-3 py-2 text-sm hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white truncate">
136
+ <span class="text-purple-400">Tests</span> generated for api-service
137
+ </a>
138
+ <a href="#" class="block px-3 py-2 text-sm hover:bg-gray-800 rounded-lg text-gray-300 hover:text-white truncate">
139
+ <span class="text-green-400">+3</span> Architecture improvements
140
+ </a>
141
  </div>
142
+ </div>
143
+ </nav>
144
+ </div>
145
+
146
+ <!-- Main Content -->
147
+ <div class="flex-1 overflow-auto">
148
+ <!-- Top Navigation -->
149
+ <header class="bg-white border-b border-gray-200">
150
+ <div class="flex items-center justify-between px-6 py-4">
151
+ <div class="flex items-center space-x-4">
152
+ <button class="md:hidden text-gray-500">
153
+ <i class="fas fa-bars"></i>
154
+ </button>
155
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
156
+ </div>
157
+ <div class="flex items-center space-x-4">
158
+ <button class="p-2 rounded-full hover:bg-gray-100">
159
+ <i class="fas fa-bell text-gray-500"></i>
160
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
161
+ </button>
162
+ <div class="flex items-center space-x-2">
163
+ <div class="relative">
164
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
165
+ <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">
166
+ <i class="fas fa-crown text-xs"></i>
167
+ </span>
168
+ </div>
169
+ <span class="hidden md:inline text-sm font-medium">John Developer</span>
170
+ </div>
171
  </div>
172
  </div>
173
+ </header>
174
 
175
+ <!-- Main Content Area -->
176
+ <main class="p-6">
177
+ <!-- Stats Cards -->
178
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
179
+ <div class="bg-white rounded-lg card-shadow p-6 hover-grow">
180
+ <div class="flex items-center justify-between">
181
+ <div>
182
+ <p class="text-sm font-medium text-gray-500">Active Repos</p>
183
+ <h3 class="text-2xl font-bold mt-1">12</h3>
184
+ <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 2 new this week</p>
185
+ </div>
186
+ <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
187
+ <i class="fas fa-code-branch text-blue-500 text-xl"></i>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="bg-white rounded-lg card-shadow p-6 hover-grow">
193
+ <div class="flex items-center justify-between">
194
+ <div>
195
+ <p class="text-sm font-medium text-gray-500">AI Agents</p>
196
+ <h3 class="text-2xl font-bold mt-1">8</h3>
197
+ <p class="text-xs text-blue-500 mt-1">4 running now</p>
198
+ </div>
199
+ <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center">
200
+ <i class="fas fa-robot text-purple-500 text-xl"></i>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="bg-white rounded-lg card-shadow p-6 hover-grow">
206
+ <div class="flex items-center justify-between">
207
+ <div>
208
+ <p class="text-sm font-medium text-gray-500">Open PRs</p>
209
+ <h3 class="text-2xl font-bold mt-1">7</h3>
210
+ <p class="text-xs text-yellow-500 mt-1">3 need review</p>
211
+ </div>
212
+ <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center">
213
+ <i class="fas fa-code-pull-request text-green-500 text-xl"></i>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="bg-white rounded-lg card-shadow p-6 hover-grow relative">
219
+ <div class="absolute top-2 right-2">
220
+ <span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
221
+ </div>
222
+ <div class="flex items-center justify-between">
223
+ <div>
224
+ <p class="text-sm font-medium text-gray-500">Test Coverage</p>
225
+ <h3 class="text-2xl font-bold mt-1">87%</h3>
226
+ <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12% this month</p>
227
+ </div>
228
+ <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center">
229
+ <i class="fas fa-vial text-indigo-500 text-xl"></i>
230
+ </div>
231
+ </div>
232
+ </div>
233
  </div>
234
+
235
+ <!-- Test Automation Section -->
236
+ <div class="mb-6">
237
+ <div class="bg-white rounded-lg card-shadow overflow-hidden">
238
+ <div class="p-5 border-b border-gray-200 flex items-center justify-between">
239
+ <div class="flex items-center">
240
+ <h3 class="font-semibold text-lg">Test Automation</h3>
241
+ <span class="badge-premium ml-2 text-xs px-2 py-1 rounded-full">PREMIUM</span>
242
+ </div>
243
+ <div>
244
+ <button class="text-sm text-blue-500 hover:text-blue-700 mr-3">View Reports</button>
245
+ <button class="text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded">Generate Tests</button>
246
+ </div>
247
+ </div>
248
+ <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200">
249
+ <!-- Test Coverage -->
250
+ <div class="p-5">
251
+ <h4 class="font-medium text-gray-700 mb-3">Test Coverage</h4>
252
+ <div class="space-y-3">
253
+ <div class="p-3 rounded test-coverage-high">
254
+ <div class="flex items-center justify-between">
255
+ <span class="font-medium">react-app</span>
256
+ <span class="font-bold text-green-600">92%</span>
257
+ </div>
258
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
259
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 92%"></div>
260
+ </div>
261
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
262
+ <span>Unit Tests</span>
263
+ <span>432/469</span>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="p-3 rounded test-coverage-medium">
268
+ <div class="flex items-center justify-between">
269
+ <span class="font-medium">api-service</span>
270
+ <span class="font-bold text-yellow-600">78%</span>
271
+ </div>
272
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
273
+ <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78%"></div>
274
+ </div>
275
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
276
+ <span>Integration Tests</span>
277
+ <span>287/368</span>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="p-3 rounded test-coverage-low">
282
+ <div class="flex items-center justify-between">
283
+ <span class="font-medium">data-service</span>
284
+ <span class="font-bold text-red-600">45%</span>
285
+ </div>
286
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
287
+ <div class="bg-red-500 h-1.5 rounded-full" style="width: 45%"></div>
288
+ </div>
289
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
290
+ <span>E2E Tests</span>
291
+ <span>89/198</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- GitHub Actions -->
298
+ <div class="p-5">
299
+ <h4 class="font-medium text-gray-700 mb-3">GitHub Actions</h4>
300
+ <div class="space-y-4">
301
+ <div>
302
+ <div class="flex items-center justify-between mb-1">
303
+ <span class="font-medium">Test Workflows</span>
304
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
305
+ </div>
306
+ <p class="text-sm text-gray-600">Automated test runs on push/pull requests</p>
307
+ </div>
308
+
309
+ <div>
310
+ <div class="flex items-center justify-between mb-1">
311
+ <span class="font-medium">Coverage Reports</span>
312
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
313
+ </div>
314
+ <p class="text-sm text-gray-600">Detailed coverage reports in PR comments</p>
315
+ </div>
316
+
317
+ <div>
318
+ <div class="flex items-center justify-between mb-1">
319
+ <span class="font-medium">Flaky Test Detection</span>
320
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pending</span>
321
+ </div>
322
+ <p class="text-sm text-gray-600">Identify and fix unstable tests</p>
323
+ </div>
324
+
325
+ <div class="pt-2">
326
+ <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">
327
+ <i class="fas fa-plus mr-1"></i> Add Workflow
328
+ </button>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Recent Test Runs -->
334
+ <div class="p-5">
335
+ <h4 class="font-medium text-gray-700 mb-3">Recent Test Runs</h4>
336
+ <div class="space-y-3">
337
+ <div class="p-3 border border-gray-200 rounded-lg">
338
+ <div class="flex items-center justify-between">
339
+ <span class="font-medium">react-app</span>
340
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Passed</span>
341
+ </div>
342
+ <p class="text-sm text-gray-600 mt-1">Unit Tests • 2m 34s</p>
343
+ <div class="flex justify-between text-xs text-gray-500 mt-2">
344
+ <span>#42</span>
345
+ <span>15 min ago</span>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="p-3 border border-gray-200 rounded-lg">
350
+ <div class="flex items-center justify-between">
351
+ <span class="font-medium">api-service</span>
352
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">1 Failed</span>
353
+ </div>
354
+ <p class="text-sm text-gray-600 mt-1">Integration Tests • 4m 12s</p>
355
+ <div class="flex justify-between text-xs text-gray-500 mt-2">
356
+ <span>#43</span>
357
+ <span>1 hour ago</span>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="p-3 border border-gray-200 rounded-lg">
362
+ <div class="flex items-center justify-between">
363
+ <span class="font-medium">data-service</span>
364
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">3 Failed</span>
365
+ </div>
366
+ <p class="text-sm text-gray-600 mt-1">E2E Tests • 8m 45s</p>
367
+ <div class="flex justify-between text-xs text-gray-500 mt-2">
368
+ <span>#41</span>
369
+ <span>3 hours ago</span>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
  </div>
377
+
378
+ <!-- Main Grid -->
379
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
380
+ <!-- Recent Activity -->
381
+ <div class="lg:col-span-2">
382
+ <div class="bg-white rounded-lg card-shadow overflow-hidden">
383
+ <div class="p-5 border-b border-gray-200">
384
+ <div class="flex items-center justify-between">
385
+ <h3 class="font-semibold text-lg">Recent Activity</h3>
386
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
387
+ </div>
388
+ </div>
389
+ <div class="divide-y divide-gray-200">
390
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
391
+ <div class="flex items-start">
392
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
393
+ <i class="fas fa-check text-green-500"></i>
394
+ </div>
395
+ <div class="flex-1">
396
+ <div class="flex items-center justify-between">
397
+ <h4 class="font-medium">PR #42 merged</h4>
398
+ <span class="text-xs text-gray-500">2h ago</span>
399
+ </div>
400
+ <p class="text-sm text-gray-600 mt-1">Security improvements merged into <span class="font-medium">react-app</span></p>
401
+ <div class="mt-2 flex space-x-2">
402
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Security</span>
403
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">React</span>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
410
+ <div class="flex items-start">
411
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
412
+ <i class="fas fa-vial text-purple-500"></i>
413
+ </div>
414
+ <div class="flex-1">
415
+ <div class="flex items-center justify-between">
416
+ <h4 class="font-medium">Tests generated</h4>
417
+ <span class="text-xs text-gray-500">5h ago</span>
418
+ </div>
419
+ <p class="text-sm text-gray-600 mt-1">Added 23 unit tests for <span class="font-medium">api-service</span></p>
420
+ <div class="mt-2 flex space-x-2">
421
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Tests</span>
422
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Node.js</span>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
429
+ <div class="flex items-start">
430
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
431
+ <i class="fas fa-search text-yellow-500"></i>
432
+ </div>
433
+ <div class="flex-1">
434
+ <div class="flex items-center justify-between">
435
+ <h4 class="font-medium">Code review completed</h4>
436
+ <span class="text-xs text-gray-500">1d ago</span>
437
+ </div>
438
+ <p class="text-sm text-gray-600 mt-1">Found 3 potential bugs in <span class="font-medium">data-service</span></p>
439
+ <div class="mt-2 flex space-x-2">
440
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Bugs</span>
441
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">TypeScript</span>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
448
+ <div class="flex items-start">
449
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
450
+ <i class="fas fa-bolt text-red-500"></i>
451
+ </div>
452
+ <div class="flex-1">
453
+ <div class="flex items-center justify-between">
454
+ <h4 class="font-medium">Security alert</h4>
455
+ <span class="text-xs text-gray-500">2d ago</span>
456
+ </div>
457
+ <p class="text-sm text-gray-600 mt-1">Critical vulnerability patched in <span class="font-medium">auth-service</span></p>
458
+ <div class="mt-2 flex space-x-2">
459
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Critical</span>
460
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">Security</span>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Agent Status -->
470
+ <div>
471
+ <div class="bg-white rounded-lg card-shadow overflow-hidden">
472
+ <div class="p-5 border-b border-gray-200">
473
+ <div class="flex items-center justify-between">
474
+ <h3 class="font-semibold text-lg">Agent Status</h3>
475
+ <button class="text-sm text-blue-500 hover:text-blue-700">Manage</button>
476
+ </div>
477
+ </div>
478
+ <div class="p-5">
479
+ <div class="space-y-4">
480
+ <div class="flex items-center">
481
+ <div class="relative mr-3">
482
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
483
+ <path
484
+ d="M18 2.0845
485
+ a 15.9155 15.9155 0 0 1 0 31.831
486
+ a 15.9155 15.9155 0 0 1 0 -31.831"
487
+ fill="none"
488
+ stroke="#e6e6e6"
489
+ stroke-width="3"
490
+ />
491
+ <path
492
+ d="M18 2.0845
493
+ a 15.9155 15.9155 0 0 1 0 31.831
494
+ a 15.9155 15.9155 0 0 1 0 -31.831"
495
+ fill="none"
496
+ stroke="#10b981"
497
+ stroke-width="3"
498
+ stroke-dasharray="75, 100"
499
+ />
500
+ <text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#10b981" font-weight="bold">75%</text>
501
+ </svg>
502
+ </div>
503
+ <div>
504
+ <h4 class="font-medium">Code Review Agent</h4>
505
+ <p class="text-sm text-gray-600">Analyzing react-app</p>
506
+ <div class="mt-1 flex items-center text-xs text-gray-500">
507
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
508
+ Active
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="flex items-center">
514
+ <div class="relative mr-3">
515
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
516
+ <path
517
+ d="M18 2.0845
518
+ a 15.9155 15.9155 0 0 1 0 31.831
519
+ a 15.9155 15.9155 0 0 1 0 -31.831"
520
+ fill="none"
521
+ stroke="#e6e6e6"
522
+ stroke-width="3"
523
+ />
524
+ <path
525
+ d="M18 2.0845
526
+ a 15.9155 15.9155 0 0 1 0 31.831
527
+ a 15.9155 15.9155 0 0 1 0 -31.831"
528
+ fill="none"
529
+ stroke="#3b82f6"
530
+ stroke-width="3"
531
+ stroke-dasharray="42, 100"
532
+ />
533
+ <text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#3b82f6" font-weight="bold">42%</text>
534
+ </svg>
535
+ </div>
536
+ <div>
537
+ <h4 class="font-medium">Security Scanner</h4>
538
+ <p class="text-sm text-gray-600">Scanning api-service</p>
539
+ <div class="mt-1 flex items-center text-xs text-gray-500">
540
+ <span class="w-2 h-2 rounded-full bg-blue-500 mr-1"></span>
541
+ Running
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="flex items-center relative">
547
+ <div class="absolute top-0 right-0">
548
+ <span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
549
+ </div>
550
+ <div class="relative mr-3">
551
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
552
+ <path
553
+ d="M18 2.0845
554
+ a 15.9155 15.9155 0 0 1 0 31.831
555
+ a 15.9155 15.9155 0 0 1 0 -31.831"
556
+ fill="none"
557
+ stroke="#e6e6e6"
558
+ stroke-width="3"
559
+ />
560
+ <path
561
+ d="M18 2.0845
562
+ a 15.9155 15.9155 0 0 1 0 31.831
563
+ a 15.9155 15.9155 0 0 1 0 -31.831"
564
+ fill="none"
565
+ stroke="#8b5cf6"
566
+ stroke-width="3"
567
+ stroke-dasharray="90, 100"
568
+ />
569
+ <text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#8b5cf6" font-weight="bold">90%</text>
570
+ </svg>
571
+ </div>
572
+ <div>
573
+ <h4 class="font-medium">Test Generator</h4>
574
+ <p class="text-sm text-gray-600">Updating tests for data-service</p>
575
+ <div class="mt-1 flex items-center text-xs text-gray-500">
576
+ <span class="w-2 h-2 rounded-full bg-purple-500 mr-1"></span>
577
+ Running
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="flex items-center">
583
+ <div class="relative mr-3">
584
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
585
+ <path
586
+ d="M18 2.0845
587
+ a 15.9155 15.9155 0 0 1 0 31.831
588
+ a 15.9155 15.9155 0 0 1 0 -31.831"
589
+ fill="none"
590
+ stroke="#e6e6e6"
591
+ stroke-width="3"
592
+ />
593
+ <path
594
+ d="M18 2.0845
595
+ a 15.9155 15.9155 0 0 1 0 31.831
596
+ a 15.9155 15.9155 0 0 1 0 -31.831"
597
+ fill="none"
598
+ stroke="#f59e0b"
599
+ stroke-width="3"
600
+ stroke-dasharray="15, 100"
601
+ />
602
+ <text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#f59e0b" font-weight="bold">15%</text>
603
+ </svg>
604
+ </div>
605
+ <div>
606
+ <h4 class="font-medium">Architecture Agent</h4>
607
+ <p class="text-sm text-gray-600">Optimizing data-service</p>
608
+ <div class="mt-1 flex items-center text-xs text-gray-500">
609
+ <span class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></span>
610
+ Pending
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <button class="mt-6 w-full py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg font-medium transition-colors">
617
+ <i class="fas fa-plus mr-2"></i> Deploy New Agent
618
+ </button>
619
+ </div>
620
+ </div>
621
+ </div>
622
  </div>
623
+
624
+ <!-- Pull Requests Section -->
625
+ <div class="mt-6">
626
+ <div class="bg-white rounded-lg card-shadow overflow-hidden">
627
+ <div class="p-5 border-b border-gray-200">
628
+ <div class="flex items-center justify-between">
629
+ <h3 class="font-semibold text-lg">Recent Pull Requests</h3>
630
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
631
+ </div>
632
+ </div>
633
+ <div class="divide-y divide-gray-200">
634
+ <div class="p-4 pr-status--approved hover:bg-gray-50 cursor-pointer">
635
+ <div class="flex items-start">
636
+ <div class="mr-3">
637
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
638
+ <i class="fas fa-check text-green-500"></i>
639
+ </div>
640
+ </div>
641
+ <div class="flex-1">
642
+ <div class="flex items-center justify-between">
643
+ <h4 class="font-medium">#42 - Security improvements</h4>
644
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Approved</span>
645
+ </div>
646
+ <p class="text-sm text-gray-600 mt-1">Fixed 3 security vulnerabilities in authentication flow</p>
647
+ <div class="mt-2 flex items-center justify-between">
648
+ <div class="flex items-center space-x-2">
649
+ <span class="text-xs text-gray-500"><i class="fas fa-code-branch mr-1"></i> react-app</span>
650
+ <span class="text-xs text-gray-500"><i class="fas fa-user mr-1"></i> AI Agent</span>
651
+ </div>
652
+ <span class="text-xs text-gray-500">2 hours ago</span>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+
658
+ <div class="p-4 pr-status--pending hover:bg-gray-50 cursor-pointer">
659
+ <div class="flex items-start">
660
+ <div class="mr-3">
661
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
662
+ <i class="fas fa-clock text-yellow-500"></i>
663
+ </div>
664
+ </div>
665
+ <div class="flex-1">
666
+ <div class="flex items-center justify-between">
667
+ <h4 class="font-medium">#43 - Architecture refactor</h4>
668
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Pending</span>
669
+ </div>
670
+ <p class="text-sm text-gray-600 mt-1">Improved module separation and dependency management</p>
671
+ <div class="mt-2 flex items-center justify-between">
672
+ <div class="flex items-center space-x-2">
673
+ <span class="text-xs text-gray-500"><i class="fas fa-code-branch mr-1"></i> api-service</span>
674
+ <span class="text-xs text-gray-500"><i class="fas fa-user mr-1"></i> AI Agent</span>
675
+ </div>
676
+ <span class="text-xs text-gray-500">5 hours ago</span>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+
682
+ <div class="p-4 pr-status--rejected hover:bg-gray-50 cursor-pointer relative">
683
+ <div class="absolute top-0 right-0 mt-4 mr-4">
684
+ <span class="badge-premium text-xs px-2 py-1 rounded-full">TESTS</span>
685
+ </div>
686
+ <div class="flex items-start">
687
+ <div class="mr-3">
688
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
689
+ <i class="fas fa-times text-red-500"></i>
690
+ </div>
691
+ </div>
692
+ <div class="flex-1">
693
+ <div class="flex items-center justify-between">
694
+ <h4 class="font-medium">#41 - Performance optimizations</h4>
695
+ <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">Rejected</span>
696
+ </div>
697
+ <p class="text-sm text-gray-600 mt-1">Tests failed (3/45) - Needs more testing before merging</p>
698
+ <div class="mt-2 flex items-center justify-between">
699
+ <div class="flex items-center space-x-2">
700
+ <span class="text-xs text-gray-500"><i class="fas fa-code-branch mr-1"></i> data-service</span>
701
+ <span class="text-xs text-gray-500"><i class="fas fa-user mr-1"></i> AI Agent</span>
702
+ </div>
703
+ <span class="text-xs text-gray-500">1 day ago</span>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </div>
710
  </div>
711
+
712
+ <!-- Quick Actions -->
713
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
714
+ <button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow">
715
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
716
+ <i class="fas fa-plus text-blue-500 text-xl"></i>
717
+ </div>
718
+ <h4 class="font-medium">Add Repository</h4>
719
+ <p class="text-xs text-gray-500 mt-1">Connect a new GitHub repo</p>
720
+ </button>
721
+
722
+ <button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow">
723
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
724
+ <i class="fas fa-robot text-green-500 text-xl"></i>
725
+ </div>
726
+ <h4 class="font-medium">Create Agent</h4>
727
+ <p class="text-xs text-gray-500 mt-1">Deploy a new AI agent</p>
728
+ </button>
729
+
730
+ <button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow relative">
731
+ <div class="absolute top-2 right-2">
732
+ <span class="badge-premium text-xs px-2 py-1 rounded-full">PREMIUM</span>
733
+ </div>
734
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-3">
735
+ <i class="fas fa-vial text-purple-500 text-xl"></i>
736
+ </div>
737
+ <h4 class="font-medium">Generate Tests</h4>
738
+ <p class="text-xs text-gray-500 mt-1">AI-powered test generation</p>
739
+ </button>
740
+
741
+ <button class="bg-white hover:bg-gray-50 rounded-lg card-shadow p-4 text-center transition-colors hover-grow">
742
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
743
+ <i class="fas fa-shield-alt text-red-500 text-xl"></i>
744
+ </div>
745
+ <h4 class="font-medium">Security Audit</h4>
746
+ <p class="text-xs text-gray-500 mt-1">Run vulnerability scan</p>
747
+ </button>
748
+ </div>
749
+ </main>
750
  </div>
751
+ </div>
752
 
753
  <script>
754
+ // Sample data for the dashboard
755
+ const dashboardData = {
756
+ repositories: [
757
+ { name: 'react-app', lastScan: '2 hours ago', issues: 3, prs: 1, coverage: 92 },
758
+ { name: 'api-service', lastScan: '5 hours ago', issues: 7, prs: 1, coverage: 78 },
759
+ { name: 'data-service', lastScan: '1 day ago', issues: 2, prs: 0, coverage: 45 },
760
+ { name: 'auth-service', lastScan: '2 days ago', issues: 5, prs: 0, coverage: 63 }
761
+ ],
762
+ agents: [
763
+ { name: 'Code Review', status: 'active', progress: 75, repo: 'react-app' },
764
+ { name: 'Security Scanner', status: 'running', progress: 42, repo: 'api-service' },
765
+ { name: 'Test Generator', status: 'running', progress: 90, repo: 'data-service', premium: true },
766
+ { name: 'Architecture', status: 'pending', progress: 15, repo: 'data-service' }
767
+ ],
768
+ pullRequests: [
769
+ { id: 42, title: 'Security improvements', status: 'approved', repo: 'react-app', author: 'AI Agent', time: '2 hours ago' },
770
+ { id: 43, title: 'Architecture refactor', status: 'pending', repo: 'api-service', author: 'AI Agent', time: '5 hours ago' },
771
+ { id: 41, title: 'Performance optimizations', status: 'rejected', repo: 'data-service', author: 'AI Agent', time: '1 day ago', testsFailed: true }
772
+ ],
773
+ testRuns: [
774
+ { repo: 'react-app', status: 'passed', type: 'Unit Tests', duration: '2m 34s', pr: 42, time: '15 min ago' },
775
+ { repo: 'api-service', status: '1 failed', type: 'Integration Tests', duration: '4m 12s', pr: 43, time: '1 hour ago' },
776
+ { repo: 'data-service', status: '3 failed', type: 'E2E Tests', duration: '8m 45s', pr: 41, time: '3 hours ago' }
777
+ ]
778
+ };
779
+
780
+ // In a real app, you would fetch this data from an API
781
+ console.log('Dashboard data loaded:', dashboardData);
782
+
783
+ // Event listeners for interactive elements
784
+ document.querySelectorAll('.hover-grow').forEach(element => {
785
+ element.addEventListener('mouseenter', () => {
786
+ element.classList.add('transform', 'scale-105');
787
  });
788
+ element.addEventListener('mouseleave', () => {
789
+ element.classList.remove('transform', 'scale-105');
 
 
 
 
 
 
790
  });
791
  });
792
+
793
+ // Simulate loading states
794
+ setTimeout(() => {
795
+ document.querySelectorAll('.animate-pulse').forEach(element => {
796
+ element.classList.remove('animate-pulse');
 
 
 
 
 
 
 
 
797
  });
798
+ }, 2000);
 
 
 
 
 
 
 
 
799
 
800
+ // Generate tests button functionality
801
+ document.querySelectorAll('[data-action="generate-tests"]').forEach(button => {
802
+ button.addEventListener('click', () => {
803
+ alert('Initiating AI-powered test generation... This premium feature will analyze your codebase and generate comprehensive test suites.');
804
+ });
805
+ });
806
  </script>
807
  <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>
808
  </html>
prompts.txt CHANGED
@@ -1,2 +1,4 @@
1
  ### Integration Vision & Implementation-Prompt — **“FluxCX Everywhere” widget** > **Goal** Re-position FluxCX as an *overlay add-on* that snaps into the agent desks of ​_any_​ modern contact-centre stack (Zendesk, Salesforce Service Cloud, Intercom, Genesys, NICE CXone, Talkdesk, Freshdesk, Amazon Connect, etc.) with zero-switching cost for agents. --- ## 1 Product framing (for website & sales deck) | Message pillar | Supporting UI / copy element | |----------------|------------------------------| | **Works inside the tools you already use** | Carousel of ticket-view screenshots: Zendesk, Salesforce, Genesys – each shows right-side FluxCX widget. | | **One-click browser add-on** (Chrome/Edge) | “Install extension” CTA + gif of side-panel sliding in. | | **Same AI super-powers, no migration** | Short bullet list: real-time suggestions, knowledge retrieval, after-call work. | | **Secure & compliant** | SOC 2 / GDPR badges persist. | --- ## 2 Widget design spec (hand to UI designer) 1. **Form factor** * 360 px fixed width side-panel. * Dark-on-light FluxCX theme to contrast with host tool. * Docking modes: ▸ right rail (default), ▸ floating pop-over (mobile). 2. **Top bar (48 px)** * FluxCX bolt icon • word “FluxCX” • “Live” green dot. * Collapse ▼ icon. 3. **Tab ribbon (40 px high)** * **AI Replies** | Knowledge | Coaching | ACW • hot-key badges (Alt + 1-4). * Channel-icon pill shows source (voice/chat/email). 4. **Content area** * Card list identical to agent workspace design – **reuse component tokens**. * Copy button reveals “Copied ✓” toast inline (no global toast). 5. **Footer** * Latency badge + Zendesk/SF logo toggle to show which API target the push goes to. 6. **Host-tool theming guidelines** * No shadows; rely on 1 px mint border to delineate widget. * Respect host font stack; fall back to Inter if none detected. --- ## 3 Technical integration brief (hand to front-end engineer) | Layer | Approach | |-------|----------| | **Delivery** | Publish as Manifest v3 Chrome extension (Edge compatible). | | **Mounting** | `content.js` polls DOM for recognizable layouts (`#zendesk_root`, `.genesys-workspace-main`, etc.) then injects `<div id="fluxcx-widget"></div>` right before native sidebar. | | **Sandbox** | Render widget in React+Vite with Shadow DOM* to avoid CSS bleed (*fallback: CSS Module scoping). | | **APIs** | Background script maintains JWT with FluxCX API; communicates via `window.postMessage`. | | **Event hooks** | Listens for ticket ID changes → calls `/context` endpoint to refresh transcript & suggestions. | | **Error handling** | If host DOM not detected within 4 s show unobtrusive toast: “FluxCX widget not supported on this page.” | --- ## 4 Website section prompt (persuasive web design) ``` Section title: “FluxCX meets your stack.” Sub-headline (≤15 words): “Plug-in AI that lives inside Zendesk, Salesforce, and every leading contact-centre platform.” Visual: • 3-screen collage (angled) – Zendesk ticket, Salesforce console, Genesys workspace – each with teal FluxCX sidebar highlighted. • Logos row: Zendesk, Salesforce, Genesys, NICE, Talkdesk, Freshdesk, Intercom, Amazon Connect (monochrome). Copy bullets (✓): ✓ One-click Chrome add-on – no IT tickets ✓ Same AI replies & summaries, wherever agents work ✓ SOC 2 Type II, GDPR-ready CTA: <Button variant="brand">Join wait-list →</Button> SEO filename for hero: `[email protected]` ``` *Exclude* pricing, footers, or extra nav; keep page single-purpose for wait-list. --- ## 5 Deliverables checklist 1. **Figma** * Widget component spec (collapsed + expanded). * Landing-page “Meets your stack” section desktop & mobile. 2. **Chrome extension repo** (`fluxcx-widget/`) * `manifest.json`, `content.js`, `background.js`, React build in `/dist`. 3. **Website update** * New section inserted below initial fold on `/ai-copilot-beta`. * Ally attribute: `<section aria-label="Platform integrations">`. 4. **Tracking** * Add `data-event="integration_logo_click"` to each logo link (GA4). Merge under feature flag `NEXT_PUBLIC_FLUX_WIDGET_PROMO=true`; keep existing functionality unchanged.
2
- ### **Design-refresh brief — Section “FluxCX meets your stack”** *(turn the current mock-up into a polished, conversion-oriented hero with an embedded product demo)* --- #### 1 Objectives | Priority | What must improve | Why | |----------|------------------|-----| | 1 | **Visual clarity & hierarchy** (headline, benefits, CTA) | Current type/CTA compete with large widget mock-up → cognitive overload. | | 2 | **Embedded demo** above the fold | Persuasive principle: *“show, don’t tell”* boosts comprehension & intent. | | 3 | **Professional polish** (spacing, contrast, alignment) | Screenshot + copy feel disconnected; needs cohesive grid & brand consistency. | --- #### 2 Layout & content guidelines | Zone | Spec | |------|------| | **A — Navigation (sticky, 64 px)** | 1-row *minimal* nav: word-mark + bolt → right-aligned CTA **“Install extension”** (brand teal #007C82). Hide “Product/Solutions/Pricing” on /ai-copilot-beta to keep focus. | | **B — Hero grid (12-col, 1280 px max)** | **Left 6 cols**<br>• H1 (Inter ExtraBold 48/52) → “FluxCX lives inside the tools you already use.”<br>• Subhead (H4 20/28, 400) ≤ 15 words → “AI replies & summaries in Zendesk, Salesforce & more—no migration needed.”<br>• Primary CTA “Install Chrome Extension →” (solid teal) <br>• Secondary CTA “Watch 90-sec demo” (ghost w/ ▲ play icon).<br><br>**Right 6 cols**<br>• **Interactive browser mock-up** (720 × 450 px)<br>&nbsp;&nbsp;— Plays muted looped MP4/GIF on hover/autoplay.<br>&nbsp;&nbsp;— Shows Zendesk ticket, agent clicks FluxCX tab, AI reply appears, pushes to Zendesk.<br>&nbsp;&nbsp;— Rounded 16 px, subtle shadow 0 12 32 rgba(0,0,0,.08). | | **C — Integrations strip** | Row of monochrome logos (48 px height, 24 px gap): Zendesk • Salesforce Service Cloud • Intercom • Genesys • NICE CXone. Tooltip on hover: “Works exactly the same in …”. | | **D — Trust footer (mini)** | SOC 2, GDPR chips inline under CTAs (14 px) → satisfy risk-averse CX personas without crowding. | > **Mobile ≤ 640 px** > • Stack blocks: demo video first, then headline/CTA (above-the-fold engagement). > • CTAs full-width, 20 px vertical gap. --- #### 3 Visual style tokens | Token | Value / Rule | |-------|--------------| | Brand teal | #007C82 (buttons, active states) | | Mint accent | #E3F0F1 (active tab underline) | | Text primary | #0E1E25 | | Background | #FFFFFF | | Shadow | 0 4 16 rgba(0,0,0,.06) (controls), 0 12 32 rgba(0,0,0,.08) (hero card) | | Radius | 8 px components; 16 px hero container | | Spacing | 8-pt grid; min 48 px outer padding desktop / 24 px mobile | --- #### 4 Micro-interaction & persuasion touches * **Demo overlay** – when video ends, pause on frame with “AI Reply copied ✓” toast → proof of value. * **CTAs** – add micro-arrow `→` that animates 4 px on hover (Framer Motion). * **Logo hover** – brand teal tint + `data-event="integration_logo_hover"` for GA4. * **Social proof deferred** – hide testimonial carousel until real quotes ready; avoids fake credibility issues. --- #### 5 Deliverables for designer / FE dev 1. **Figma** * Desktop & mobile frames of the hero + integrations strip. * Component styles (buttons, chips, video frame). 2. **Assets** * 720×450 MP4 demo (loop 6 s, 2 MB max) + WebM fallback. * SVG logos (monochrome #4B585E, 48 px height). 3. **Next.js implementation** (`/components/HeroWithDemo.tsx`) * Uses `next/video` + `poster` image; LCP target < 1 s after first interact. * Accepts props for headline, subhead, videoSrc, ctaHref (reuse across pages). 4. **Tracking hooks** ```ts onClickInstall => gtag('event','cta_install_extension', {location:'hero'}); onClickWatchDemo => gtag('event','cta_watch_demo'); ``` 5. **QA checklist** - [ ] Lighthouse ≥ 95 Perf / 95 Acc. - [ ] Contrast passes WCAG 2.1 AA. - [ ] Video lazy-loads below 1280 px wide, otherwise `preload="metadata"`. - [ ] Mobile CLS < 0.1 (test iPhone SE). Keep all existing page functions, forms, and wait-list mechanics unchanged.
 
 
 
1
  ### Integration Vision & Implementation-Prompt — **“FluxCX Everywhere” widget** > **Goal** Re-position FluxCX as an *overlay add-on* that snaps into the agent desks of ​_any_​ modern contact-centre stack (Zendesk, Salesforce Service Cloud, Intercom, Genesys, NICE CXone, Talkdesk, Freshdesk, Amazon Connect, etc.) with zero-switching cost for agents. --- ## 1 Product framing (for website & sales deck) | Message pillar | Supporting UI / copy element | |----------------|------------------------------| | **Works inside the tools you already use** | Carousel of ticket-view screenshots: Zendesk, Salesforce, Genesys – each shows right-side FluxCX widget. | | **One-click browser add-on** (Chrome/Edge) | “Install extension” CTA + gif of side-panel sliding in. | | **Same AI super-powers, no migration** | Short bullet list: real-time suggestions, knowledge retrieval, after-call work. | | **Secure & compliant** | SOC 2 / GDPR badges persist. | --- ## 2 Widget design spec (hand to UI designer) 1. **Form factor** * 360 px fixed width side-panel. * Dark-on-light FluxCX theme to contrast with host tool. * Docking modes: ▸ right rail (default), ▸ floating pop-over (mobile). 2. **Top bar (48 px)** * FluxCX bolt icon • word “FluxCX” • “Live” green dot. * Collapse ▼ icon. 3. **Tab ribbon (40 px high)** * **AI Replies** | Knowledge | Coaching | ACW • hot-key badges (Alt + 1-4). * Channel-icon pill shows source (voice/chat/email). 4. **Content area** * Card list identical to agent workspace design – **reuse component tokens**. * Copy button reveals “Copied ✓” toast inline (no global toast). 5. **Footer** * Latency badge + Zendesk/SF logo toggle to show which API target the push goes to. 6. **Host-tool theming guidelines** * No shadows; rely on 1 px mint border to delineate widget. * Respect host font stack; fall back to Inter if none detected. --- ## 3 Technical integration brief (hand to front-end engineer) | Layer | Approach | |-------|----------| | **Delivery** | Publish as Manifest v3 Chrome extension (Edge compatible). | | **Mounting** | `content.js` polls DOM for recognizable layouts (`#zendesk_root`, `.genesys-workspace-main`, etc.) then injects `<div id="fluxcx-widget"></div>` right before native sidebar. | | **Sandbox** | Render widget in React+Vite with Shadow DOM* to avoid CSS bleed (*fallback: CSS Module scoping). | | **APIs** | Background script maintains JWT with FluxCX API; communicates via `window.postMessage`. | | **Event hooks** | Listens for ticket ID changes → calls `/context` endpoint to refresh transcript & suggestions. | | **Error handling** | If host DOM not detected within 4 s show unobtrusive toast: “FluxCX widget not supported on this page.” | --- ## 4 Website section prompt (persuasive web design) ``` Section title: “FluxCX meets your stack.” Sub-headline (≤15 words): “Plug-in AI that lives inside Zendesk, Salesforce, and every leading contact-centre platform.” Visual: • 3-screen collage (angled) – Zendesk ticket, Salesforce console, Genesys workspace – each with teal FluxCX sidebar highlighted. • Logos row: Zendesk, Salesforce, Genesys, NICE, Talkdesk, Freshdesk, Intercom, Amazon Connect (monochrome). Copy bullets (✓): ✓ One-click Chrome add-on – no IT tickets ✓ Same AI replies & summaries, wherever agents work ✓ SOC 2 Type II, GDPR-ready CTA: <Button variant="brand">Join wait-list →</Button> SEO filename for hero: `[email protected]` ``` *Exclude* pricing, footers, or extra nav; keep page single-purpose for wait-list. --- ## 5 Deliverables checklist 1. **Figma** * Widget component spec (collapsed + expanded). * Landing-page “Meets your stack” section desktop & mobile. 2. **Chrome extension repo** (`fluxcx-widget/`) * `manifest.json`, `content.js`, `background.js`, React build in `/dist`. 3. **Website update** * New section inserted below initial fold on `/ai-copilot-beta`. * Ally attribute: `<section aria-label="Platform integrations">`. 4. **Tracking** * Add `data-event="integration_logo_click"` to each logo link (GA4). Merge under feature flag `NEXT_PUBLIC_FLUX_WIDGET_PROMO=true`; keep existing functionality unchanged.
2
+ ### **Design-refresh brief — Section “FluxCX meets your stack”** *(turn the current mock-up into a polished, conversion-oriented hero with an embedded product demo)* --- #### 1 Objectives | Priority | What must improve | Why | |----------|------------------|-----| | 1 | **Visual clarity & hierarchy** (headline, benefits, CTA) | Current type/CTA compete with large widget mock-up → cognitive overload. | | 2 | **Embedded demo** above the fold | Persuasive principle: *“show, don’t tell”* boosts comprehension & intent. | | 3 | **Professional polish** (spacing, contrast, alignment) | Screenshot + copy feel disconnected; needs cohesive grid & brand consistency. | --- #### 2 Layout & content guidelines | Zone | Spec | |------|------| | **A — Navigation (sticky, 64 px)** | 1-row *minimal* nav: word-mark + bolt → right-aligned CTA **“Install extension”** (brand teal #007C82). Hide “Product/Solutions/Pricing” on /ai-copilot-beta to keep focus. | | **B — Hero grid (12-col, 1280 px max)** | **Left 6 cols**<br>• H1 (Inter ExtraBold 48/52) → “FluxCX lives inside the tools you already use.”<br>• Subhead (H4 20/28, 400) ≤ 15 words → “AI replies & summaries in Zendesk, Salesforce & more—no migration needed.”<br>• Primary CTA “Install Chrome Extension →” (solid teal) <br>• Secondary CTA “Watch 90-sec demo” (ghost w/ ▲ play icon).<br><br>**Right 6 cols**<br>• **Interactive browser mock-up** (720 × 450 px)<br>&nbsp;&nbsp;— Plays muted looped MP4/GIF on hover/autoplay.<br>&nbsp;&nbsp;— Shows Zendesk ticket, agent clicks FluxCX tab, AI reply appears, pushes to Zendesk.<br>&nbsp;&nbsp;— Rounded 16 px, subtle shadow 0 12 32 rgba(0,0,0,.08). | | **C — Integrations strip** | Row of monochrome logos (48 px height, 24 px gap): Zendesk • Salesforce Service Cloud • Intercom • Genesys • NICE CXone. Tooltip on hover: “Works exactly the same in …”. | | **D — Trust footer (mini)** | SOC 2, GDPR chips inline under CTAs (14 px) → satisfy risk-averse CX personas without crowding. | > **Mobile ≤ 640 px** > • Stack blocks: demo video first, then headline/CTA (above-the-fold engagement). > • CTAs full-width, 20 px vertical gap. --- #### 3 Visual style tokens | Token | Value / Rule | |-------|--------------| | Brand teal | #007C82 (buttons, active states) | | Mint accent | #E3F0F1 (active tab underline) | | Text primary | #0E1E25 | | Background | #FFFFFF | | Shadow | 0 4 16 rgba(0,0,0,.06) (controls), 0 12 32 rgba(0,0,0,.08) (hero card) | | Radius | 8 px components; 16 px hero container | | Spacing | 8-pt grid; min 48 px outer padding desktop / 24 px mobile | --- #### 4 Micro-interaction & persuasion touches * **Demo overlay** – when video ends, pause on frame with “AI Reply copied ✓” toast → proof of value. * **CTAs** – add micro-arrow `→` that animates 4 px on hover (Framer Motion). * **Logo hover** – brand teal tint + `data-event="integration_logo_hover"` for GA4. * **Social proof deferred** – hide testimonial carousel until real quotes ready; avoids fake credibility issues. --- #### 5 Deliverables for designer / FE dev 1. **Figma** * Desktop & mobile frames of the hero + integrations strip. * Component styles (buttons, chips, video frame). 2. **Assets** * 720×450 MP4 demo (loop 6 s, 2 MB max) + WebM fallback. * SVG logos (monochrome #4B585E, 48 px height). 3. **Next.js implementation** (`/components/HeroWithDemo.tsx`) * Uses `next/video` + `poster` image; LCP target < 1 s after first interact. * Accepts props for headline, subhead, videoSrc, ctaHref (reuse across pages). 4. **Tracking hooks** ```ts onClickInstall => gtag('event','cta_install_extension', {location:'hero'}); onClickWatchDemo => gtag('event','cta_watch_demo'); ``` 5. **QA checklist** - [ ] Lighthouse ≥ 95 Perf / 95 Acc. - [ ] Contrast passes WCAG 2.1 AA. - [ ] Video lazy-loads below 1280 px wide, otherwise `preload="metadata"`. - [ ] Mobile CLS < 0.1 (test iPhone SE). Keep all existing page functions, forms, and wait-list mechanics unchanged.
3
+ generate a dashboard for github repo sync agent a plattform to manage your ai agents that will cater and update your selected github repos by runninng scheduled analysis and improvements in arhcitecture, code reviews, security and more and generate high quality pull requests
4
+ one premium feature is to generate tests and entire test reports that integrate with github actions workflow and are being maintained and automatically updated