Hugging Face's logo

Spaces:
dwarfplanet
/
fluxcx
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +310 -486
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,23 +3,35 @@
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>
10
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
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 {
@@ -28,145 +40,155 @@
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>
@@ -174,78 +196,103 @@
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>
@@ -253,43 +300,31 @@
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>
@@ -301,30 +336,22 @@
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>
@@ -334,40 +361,20 @@
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>
@@ -375,111 +382,19 @@
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
@@ -493,16 +408,15 @@
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
@@ -511,8 +425,8 @@
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
@@ -526,16 +440,15 @@
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
@@ -544,11 +457,8 @@
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
@@ -562,145 +472,98 @@
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>
@@ -708,44 +571,6 @@
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>
@@ -754,53 +579,52 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Repo Sync AI</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>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
 
12
  body {
13
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
14
+ background-color: #fbfbfd;
15
+ color: #1d1d1f;
16
+ -webkit-font-smoothing: antialiased;
17
  }
18
 
19
  .sidebar {
20
  transition: all 0.3s ease;
21
+ background-color: #f5f5f7;
22
  }
23
 
24
+ .card {
25
+ background: white;
26
+ border-radius: 12px;
27
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
28
+ border: 1px solid rgba(0, 0, 0, 0.03);
29
+ }
30
+
31
+ .badge-premium {
32
+ background: linear-gradient(45deg, #FF9A9E 0%, #FAD0C4 99%, #FAD0C4 100%);
33
+ color: white;
34
+ font-weight: 500;
35
  }
36
 
37
  .progress-ring__circle {
 
40
  transform-origin: 50% 50%;
41
  }
42
 
43
+ .hover-scale {
44
+ transition: all 0.2s ease;
45
  }
46
 
47
+ .hover-scale:hover {
48
+ transform: scale(1.02);
49
  }
50
 
51
+ .nav-item-active {
52
+ background: rgba(0, 122, 255, 0.1);
53
+ color: #007AFF;
54
  }
55
 
56
+ .nav-item-active svg {
57
+ color: #007AFF;
58
  }
59
 
60
+ .test-coverage-high {
61
+ background-color: rgba(52, 199, 89, 0.05);
62
+ border-left: 3px solid #34C759;
 
 
 
 
63
  }
64
 
65
+ .test-coverage-medium {
66
+ background-color: rgba(255, 204, 0, 0.05);
67
+ border-left: 3px solid #FFCC00;
68
  }
69
 
70
+ .test-coverage-low {
71
+ background-color: rgba(255, 59, 48, 0.05);
72
+ border-left: 3px solid #FF3B30;
73
  }
74
 
75
+ .status-badge {
76
+ font-size: 12px;
77
+ padding: 2px 8px;
78
+ border-radius: 10px;
79
+ font-weight: 500;
80
  }
81
 
82
+ .status-approved {
83
+ background-color: rgba(52, 199, 89, 0.1);
84
+ color: #34C759;
85
  }
86
 
87
+ .status-pending {
88
+ background-color: rgba(255, 204, 0, 0.1);
89
+ color: #FFCC00;
90
  }
91
 
92
+ .status-rejected {
93
+ background-color: rgba(255, 59, 48, 0.1);
94
+ color: #FF3B30;
95
+ }
96
+
97
+ .status-running {
98
+ background-color: rgba(0, 122, 255, 0.1);
99
+ color: #007AFF;
100
+ }
101
+
102
+ .status-passed {
103
+ background-color: rgba(52, 199, 89, 0.1);
104
+ color: #34C759;
105
+ }
106
+
107
+ .status-failed {
108
+ background-color: rgba(255, 59, 48, 0.1);
109
+ color: #FF3B30;
110
+ }
111
+
112
+ .quick-action-btn {
113
+ transition: all 0.2s ease;
114
+ border: 1px solid rgba(0, 0, 0, 0.05);
115
+ }
116
+
117
+ .quick-action-btn:hover {
118
+ transform: translateY(-2px);
119
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
120
+ }
121
+
122
+ .quick-action-btn i {
123
+ transition: transform 0.2s ease;
124
+ }
125
+
126
+ .quick-action-btn:hover i {
127
+ transform: scale(1.1);
128
  }
129
  </style>
130
  </head>
131
  <body class="bg-gray-50">
132
  <div class="flex h-screen overflow-hidden">
133
  <!-- Sidebar -->
134
+ <div class="sidebar w-20 md:w-56 flex-shrink-0 border-r border-gray-100">
135
+ <div class="p-4 flex items-center justify-center md:justify-start">
136
+ <i class="fas fa-robot text-blue-500 text-2xl"></i>
137
+ <h1 class="text-xl font-semibold ml-2 hidden md:block">Repo Sync</h1>
 
 
138
  </div>
139
+ <nav class="p-2 md:p-4">
140
+ <div class="space-y-1">
141
+ <a href="#" class="nav-item-active flex items-center justify-center md:justify-start p-3 rounded-lg">
142
+ <i class="fas fa-tachometer-alt w-5 text-gray-500"></i>
143
+ <span class="ml-3 hidden md:block">Dashboard</span>
 
 
 
 
144
  </a>
145
+ <a href="#" class="flex items-center justify-center md:justify-start p-3 rounded-lg hover:bg-gray-100">
146
+ <i class="fas fa-code-branch w-5 text-gray-500"></i>
147
+ <span class="ml-3 hidden md:block">Repositories</span>
148
  </a>
149
+ <a href="#" class="flex items-center justify-center md:justify-start p-3 rounded-lg hover:bg-gray-100">
150
+ <i class="fas fa-tasks w-5 text-gray-500"></i>
151
+ <span class="ml-3 hidden md:block">Agents</span>
152
  </a>
153
+ <a href="#" class="flex items-center justify-center md:justify-start p-3 rounded-lg hover:bg-gray-100">
154
+ <i class="fas fa-vial w-5 text-gray-500"></i>
155
+ <span class="ml-3 hidden md:block">Tests</span>
156
+ <span class="badge-premium text-xs px-2 py-1 rounded-full ml-2 hidden md:block">PRO</span>
157
  </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </div>
159
  </nav>
160
  </div>
161
 
162
  <!-- Main Content -->
163
  <div class="flex-1 overflow-auto">
164
+ <!-- Top Navigation with Quick Actions -->
165
+ <header class="bg-white border-b border-gray-100">
166
+ <div class="flex items-center justify-between px-6 py-3">
167
+ <h2 class="text-xl font-semibold">Dashboard</h2>
168
+ <div class="flex items-center space-x-2">
169
+ <!-- Quick Actions - Now in the header -->
170
+ <div class="hidden md:flex items-center space-x-2 mr-4">
171
+ <button class="quick-action-btn bg-white px-3 py-2 rounded-lg flex items-center text-sm">
172
+ <i class="fas fa-plus text-blue-500 mr-2"></i>
173
+ <span>Add Repo</span>
174
+ </button>
175
+ <button class="quick-action-btn bg-white px-3 py-2 rounded-lg flex items-center text-sm">
176
+ <i class="fas fa-robot text-green-500 mr-2"></i>
177
+ <span>New Agent</span>
178
+ </button>
179
+ <button class="quick-action-btn bg-white px-3 py-2 rounded-lg flex items-center text-sm relative">
180
+ <i class="fas fa-vial text-purple-500 mr-2"></i>
181
+ <span>Generate Tests</span>
182
+ </button>
183
+ </div>
184
+
185
  <div class="flex items-center space-x-2">
186
  <div class="relative">
187
  <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
188
+ <span class="absolute -bottom-1 -right-1 bg-gradient-to-r from-pink-500 to-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
189
  <i class="fas fa-crown text-xs"></i>
190
  </span>
191
  </div>
 
192
  </div>
193
  </div>
194
  </div>
 
196
 
197
  <!-- Main Content Area -->
198
  <main class="p-6">
199
+ <!-- Stats Cards with Quick Action Buttons for Mobile -->
200
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
201
+ <div class="card p-5 hover-scale">
202
  <div class="flex items-center justify-between">
203
  <div>
204
+ <p class="text-sm text-gray-500">Active Repos</p>
205
+ <h3 class="text-2xl font-semibold mt-1">12</h3>
 
206
  </div>
207
+ <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
208
+ <i class="fas fa-code-branch text-blue-500"></i>
209
  </div>
210
  </div>
211
  </div>
212
 
213
+ <div class="card p-5 hover-scale">
214
  <div class="flex items-center justify-between">
215
  <div>
216
+ <p class="text-sm text-gray-500">AI Agents</p>
217
+ <h3 class="text-2xl font-semibold mt-1">8</h3>
 
218
  </div>
219
+ <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center">
220
+ <i class="fas fa-robot text-purple-500"></i>
221
  </div>
222
  </div>
223
  </div>
224
 
225
+ <div class="card p-5 hover-scale">
226
  <div class="flex items-center justify-between">
227
  <div>
228
+ <p class="text-sm text-gray-500">Open PRs</p>
229
+ <h3 class="text-2xl font-semibold mt-1">7</h3>
 
230
  </div>
231
+ <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
232
+ <i class="fas fa-code-pull-request text-green-500"></i>
233
  </div>
234
  </div>
235
  </div>
236
 
237
+ <div class="card p-5 hover-scale relative">
238
+ <div class="absolute top-3 right-3">
239
+ <span class="badge-premium text-xs px-2 py-1 rounded-full">PRO</span>
240
  </div>
241
  <div class="flex items-center justify-between">
242
  <div>
243
+ <p class="text-sm text-gray-500">Test Coverage</p>
244
+ <h3 class="text-2xl font-semibold mt-1">87%</h3>
 
245
  </div>
246
+ <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
247
+ <i class="fas fa-vial text-indigo-500"></i>
248
  </div>
249
  </div>
250
  </div>
251
  </div>
252
 
253
+ <!-- Mobile Quick Actions (hidden on desktop) -->
254
+ <div class="mb-6 md:hidden">
255
+ <div class="grid grid-cols-2 gap-3">
256
+ <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center">
257
+ <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mb-2">
258
+ <i class="fas fa-plus text-blue-500"></i>
 
259
  </div>
260
+ <h4 class="font-medium text-sm">Add Repo</h4>
261
+ </button>
262
+
263
+ <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center">
264
+ <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mb-2">
265
+ <i class="fas fa-robot text-green-500"></i>
266
+ </div>
267
+ <h4 class="font-medium text-sm">New Agent</h4>
268
+ </button>
269
+
270
+ <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center relative">
271
+ <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mb-2">
272
+ <i class="fas fa-vial text-purple-500"></i>
273
  </div>
274
+ <h4 class="font-medium text-sm">Generate Tests</h4>
275
+ </button>
276
+
277
+ <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center">
278
+ <div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center mb-2">
279
+ <i class="fas fa-shield-alt text-red-500"></i>
280
+ </div>
281
+ <h4 class="font-medium text-sm">Security Scan</h4>
282
+ </button>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Test Automation Section -->
287
+ <div class="mb-6">
288
+ <div class="card overflow-hidden">
289
+ <div class="p-5 border-b border-gray-100 flex items-center justify-between">
290
+ <h3 class="font-semibold text-lg">Test Automation</h3>
291
+ <button class="text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-1.5 rounded-lg">
292
+ Generate Tests
293
+ </button>
294
  </div>
295
+ <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100">
296
  <!-- Test Coverage -->
297
  <div class="p-5">
298
  <h4 class="font-medium text-gray-700 mb-3">Test Coverage</h4>
 
300
  <div class="p-3 rounded test-coverage-high">
301
  <div class="flex items-center justify-between">
302
  <span class="font-medium">react-app</span>
303
+ <span class="font-semibold text-green-500">92%</span>
304
  </div>
305
+ <div class="w-full bg-gray-100 rounded-full h-1.5 mt-2">
306
  <div class="bg-green-500 h-1.5 rounded-full" style="width: 92%"></div>
307
  </div>
 
 
 
 
308
  </div>
309
 
310
  <div class="p-3 rounded test-coverage-medium">
311
  <div class="flex items-center justify-between">
312
  <span class="font-medium">api-service</span>
313
+ <span class="font-semibold text-yellow-500">78%</span>
314
  </div>
315
+ <div class="w-full bg-gray-100 rounded-full h-1.5 mt-2">
316
  <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78%"></div>
317
  </div>
 
 
 
 
318
  </div>
319
 
320
  <div class="p-3 rounded test-coverage-low">
321
  <div class="flex items-center justify-between">
322
  <span class="font-medium">data-service</span>
323
+ <span class="font-semibold text-red-500">45%</span>
324
  </div>
325
+ <div class="w-full bg-gray-100 rounded-full h-1.5 mt-2">
326
  <div class="bg-red-500 h-1.5 rounded-full" style="width: 45%"></div>
327
  </div>
 
 
 
 
328
  </div>
329
  </div>
330
  </div>
 
336
  <div>
337
  <div class="flex items-center justify-between mb-1">
338
  <span class="font-medium">Test Workflows</span>
339
+ <span class="status-badge status-running">Active</span>
340
  </div>
341
+ <p class="text-sm text-gray-500">Automated test runs</p>
342
  </div>
343
 
344
  <div>
345
  <div class="flex items-center justify-between mb-1">
346
  <span class="font-medium">Coverage Reports</span>
347
+ <span class="status-badge status-running">Active</span>
 
 
 
 
 
 
 
 
348
  </div>
349
+ <p class="text-sm text-gray-500">PR coverage reports</p>
350
  </div>
351
 
352
  <div class="pt-2">
353
+ <button class="w-full text-sm border border-gray-200 hover:border-gray-300 rounded-lg px-3 py-1.5 text-gray-700 hover:bg-gray-50 transition-colors">
354
+ Add Workflow
355
  </button>
356
  </div>
357
  </div>
 
361
  <div class="p-5">
362
  <h4 class="font-medium text-gray-700 mb-3">Recent Test Runs</h4>
363
  <div class="space-y-3">
364
+ <div class="p-3 border border-gray-100 rounded-lg">
365
  <div class="flex items-center justify-between">
366
  <span class="font-medium">react-app</span>
367
+ <span class="status-badge status-passed">Passed</span>
 
 
 
 
 
368
  </div>
369
+ <p class="text-sm text-gray-500 mt-1">Unit Tests • 2m 34s</p>
370
  </div>
371
 
372
+ <div class="p-3 border border-gray-100 rounded-lg">
373
  <div class="flex items-center justify-between">
374
  <span class="font-medium">api-service</span>
375
+ <span class="status-badge status-failed">1 Failed</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
  </div>
377
+ <p class="text-sm text-gray-500 mt-1">Integration Tests • 4m 12s</p>
378
  </div>
379
  </div>
380
  </div>
 
382
  </div>
383
  </div>
384
 
385
+ <!-- Two Column Layout -->
386
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
387
  <!-- Agent Status -->
388
  <div>
389
+ <div class="card overflow-hidden">
390
+ <div class="p-5 border-b border-gray-100">
391
+ <h3 class="font-semibold text-lg">Agent Status</h3>
 
 
 
392
  </div>
393
  <div class="p-5">
394
  <div class="space-y-4">
395
  <div class="flex items-center">
396
+ <div class="relative mr-4">
397
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
398
  <path
399
  d="M18 2.0845
400
  a 15.9155 15.9155 0 0 1 0 31.831
 
408
  a 15.9155 15.9155 0 0 1 0 31.831
409
  a 15.9155 15.9155 0 0 1 0 -31.831"
410
  fill="none"
411
+ stroke="#34C759"
412
  stroke-width="3"
413
  stroke-dasharray="75, 100"
414
  />
 
415
  </svg>
416
  </div>
417
  <div>
418
+ <h4 class="font-medium">Code Review</h4>
419
+ <p class="text-sm text-gray-500">react-app</p>
420
  <div class="mt-1 flex items-center text-xs text-gray-500">
421
  <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
422
  Active
 
425
  </div>
426
 
427
  <div class="flex items-center">
428
+ <div class="relative mr-4">
429
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
430
  <path
431
  d="M18 2.0845
432
  a 15.9155 15.9155 0 0 1 0 31.831
 
440
  a 15.9155 15.9155 0 0 1 0 31.831
441
  a 15.9155 15.9155 0 0 1 0 -31.831"
442
  fill="none"
443
+ stroke="#007AFF"
444
  stroke-width="3"
445
  stroke-dasharray="42, 100"
446
  />
 
447
  </svg>
448
  </div>
449
  <div>
450
  <h4 class="font-medium">Security Scanner</h4>
451
+ <p class="text-sm text-gray-500">api-service</p>
452
  <div class="mt-1 flex items-center text-xs text-gray-500">
453
  <span class="w-2 h-2 rounded-full bg-blue-500 mr-1"></span>
454
  Running
 
457
  </div>
458
 
459
  <div class="flex items-center relative">
460
+ <div class="relative mr-4">
461
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
 
 
 
462
  <path
463
  d="M18 2.0845
464
  a 15.9155 15.9155 0 0 1 0 31.831
 
472
  a 15.9155 15.9155 0 0 1 0 31.831
473
  a 15.9155 15.9155 0 0 1 0 -31.831"
474
  fill="none"
475
+ stroke="#AF52DE"
476
  stroke-width="3"
477
  stroke-dasharray="90, 100"
478
  />
 
479
  </svg>
480
  </div>
481
  <div>
482
  <h4 class="font-medium">Test Generator</h4>
483
+ <p class="text-sm text-gray-500">data-service</p>
484
  <div class="mt-1 flex items-center text-xs text-gray-500">
485
  <span class="w-2 h-2 rounded-full bg-purple-500 mr-1"></span>
486
  Running
487
  </div>
488
  </div>
489
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
490
  </div>
 
 
 
 
491
  </div>
492
  </div>
493
  </div>
494
+
495
+ <!-- Pull Requests -->
496
+ <div>
497
+ <div class="card overflow-hidden">
498
+ <div class="p-5 border-b border-gray-100">
499
+ <h3 class="font-semibold text-lg">Pull Requests</h3>
 
 
 
500
  </div>
501
+ <div class="divide-y divide-gray-100">
502
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
503
+ <div class="flex items-start">
504
+ <div class="mr-3">
505
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
506
+ <i class="fas fa-check text-green-500 text-sm"></i>
507
+ </div>
 
 
 
 
 
 
508
  </div>
509
+ <div class="flex-1">
510
+ <div class="flex items-center justify-between">
511
+ <h4 class="font-medium">Security improvements</h4>
512
+ <span class="status-badge status-approved">Approved</span>
513
+ </div>
514
+ <p class="text-sm text-gray-500 mt-1">Fixed 3 security vulnerabilities</p>
515
+ <div class="mt-2 flex items-center text-xs text-gray-400">
516
+ <span class="mr-3">#42</span>
517
+ <span>react-app</span>
518
+ <span class="mx-2">•</span>
519
+ <span>2h ago</span>
520
  </div>
 
521
  </div>
522
  </div>
523
  </div>
524
+
525
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
526
+ <div class="flex items-start">
527
+ <div class="mr-3">
528
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center">
529
+ <i class="fas fa-clock text-yellow-500 text-sm"></i>
530
+ </div>
 
 
 
 
 
 
531
  </div>
532
+ <div class="flex-1">
533
+ <div class="flex items-center justify-between">
534
+ <h4 class="font-medium">Architecture refactor</h4>
535
+ <span class="status-badge status-pending">Pending</span>
536
+ </div>
537
+ <p class="text-sm text-gray-500 mt-1">Improved module separation</p>
538
+ <div class="mt-2 flex items-center text-xs text-gray-400">
539
+ <span class="mr-3">#43</span>
540
+ <span>api-service</span>
541
+ <span class="mx-2">•</span>
542
+ <span>5h ago</span>
543
  </div>
 
544
  </div>
545
  </div>
546
  </div>
547
+
548
+ <div class="p-4 hover:bg-gray-50 cursor-pointer relative">
549
+ <div class="flex items-start">
550
+ <div class="mr-3">
551
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
552
+ <i class="fas fa-times text-red-500 text-sm"></i>
553
+ </div>
 
 
 
 
 
 
 
 
 
554
  </div>
555
+ <div class="flex-1">
556
+ <div class="flex items-center justify-between">
557
+ <h4 class="font-medium">Performance optimizations</h4>
558
+ <span class="status-badge status-rejected">Rejected</span>
559
+ </div>
560
+ <p class="text-sm text-gray-500 mt-1">Tests failed (3/45)</p>
561
+ <div class="mt-2 flex items-center text-xs text-gray-400">
562
+ <span class="mr-3">#41</span>
563
+ <span>data-service</span>
564
+ <span class="mx-2">•</span>
565
+ <span>1d ago</span>
566
  </div>
 
567
  </div>
568
  </div>
569
  </div>
 
571
  </div>
572
  </div>
573
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
574
  </main>
575
  </div>
576
  </div>
 
579
  // Sample data for the dashboard
580
  const dashboardData = {
581
  repositories: [
582
+ { name: 'react-app', coverage: 92 },
583
+ { name: 'api-service', coverage: 78 },
584
+ { name: 'data-service', coverage: 45 }
 
585
  ],
586
  agents: [
587
  { name: 'Code Review', status: 'active', progress: 75, repo: 'react-app' },
588
  { name: 'Security Scanner', status: 'running', progress: 42, repo: 'api-service' },
589
+ { name: 'Test Generator', status: 'running', progress: 90, repo: 'data-service' }
 
590
  ],
591
  pullRequests: [
592
+ { id: 42, title: 'Security improvements', status: 'approved', repo: 'react-app', time: '2h ago' },
593
+ { id: 43, title: 'Architecture refactor', status: 'pending', repo: 'api-service', time: '5h ago' },
594
+ { id: 41, title: 'Performance optimizations', status: 'rejected', repo: 'data-service', time: '1d ago' }
 
 
 
 
 
595
  ]
596
  };
597
 
 
 
 
598
  // Event listeners for interactive elements
599
+ document.querySelectorAll('.hover-scale').forEach(element => {
600
  element.addEventListener('mouseenter', () => {
601
+ element.style.transform = 'scale(1.02)';
602
  });
603
  element.addEventListener('mouseleave', () => {
604
+ element.style.transform = 'scale(1)';
605
  });
606
  });
607
 
608
+ // Quick action buttons hover effects
609
+ document.querySelectorAll('.quick-action-btn').forEach(button => {
610
+ button.addEventListener('mouseenter', () => {
611
+ const icon = button.querySelector('i');
612
+ if (icon) {
613
+ icon.style.transform = 'scale(1.1)';
614
+ }
615
  });
616
+ button.addEventListener('mouseleave', () => {
617
+ const icon = button.querySelector('i');
618
+ if (icon) {
619
+ icon.style.transform = 'scale(1)';
620
+ }
621
+ });
622
+ });
623
+
624
  // Generate tests button functionality
625
  document.querySelectorAll('[data-action="generate-tests"]').forEach(button => {
626
  button.addEventListener('click', () => {
627
+ alert('Initiating AI-powered test generation...');
628
  });
629
  });
630
  </script>
prompts.txt CHANGED
@@ -1,4 +1,6 @@
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
 
 
 
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
5
+ improve visual hierarchy and reduce clutter and information overload. ensure its a great design - like apple design very minimal and simple but beautiful and highly intuitive and functional
6
+ improve to have the quick action buttons not at the bottom of the dashboard but instead have a quick action widget or some better place of integrating them more prominently. Carefully think step by step about the best user experience and greatest experience fr developers and then update and improve the interface