Hugging Face's logo

Spaces:
anonymousatom
/
tmp-ai
Running

App Files Community
anonymousatom commited on
Commit
aed95dc
·
verified ·
1 Parent(s): 783bfeb

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1101 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tmp Ai
3
- emoji: 🌖
4
- colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tmp-ai
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1101 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI TestGenX - Advanced Test Automation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
9
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
10
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ .sidebar {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .chart-container {
17
+ height: 300px;
18
+ }
19
+ .animate-pulse {
20
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
21
+ }
22
+ @keyframes pulse {
23
+ 0%, 100% {
24
+ opacity: 1;
25
+ }
26
+ 50% {
27
+ opacity: 0.5;
28
+ }
29
+ }
30
+ .test-card:hover {
31
+ transform: translateY(-2px);
32
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
33
+ }
34
+ .file-upload {
35
+ border: 2px dashed #e5e7eb;
36
+ }
37
+ .file-upload:hover {
38
+ border-color: #9ca3af;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-white">
43
+ <div id="root"></div>
44
+
45
+ <script type="text/babel">
46
+ const { useState, useEffect } = React;
47
+
48
+ function App() {
49
+ const [sidebarOpen, setSidebarOpen] = useState(true);
50
+ const [activeTab, setActiveTab] = useState('dashboard');
51
+ const [testCases, setTestCases] = useState([]);
52
+ const [isGenerating, setIsGenerating] = useState(false);
53
+ const [executionStatus, setExecutionStatus] = useState('idle');
54
+ const [testResults, setTestResults] = useState([]);
55
+ const [projectName, setProjectName] = useState('My Project');
56
+ const [aiPrompt, setAiPrompt] = useState('');
57
+ const [websiteUrl, setWebsiteUrl] = useState('');
58
+ const [uploadedFile, setUploadedFile] = useState(null);
59
+ const [isAnalyzing, setIsAnalyzing] = useState(false);
60
+ const [analysisProgress, setAnalysisProgress] = useState(0);
61
+ const [failedTestsOnly, setFailedTestsOnly] = useState(false);
62
+ const [isDebugging, setIsDebugging] = useState(false);
63
+ const [debugSuggestions, setDebugSuggestions] = useState([]);
64
+
65
+ // Mock data initialization
66
+ useEffect(() => {
67
+ const mockTestCases = [
68
+ { id: 1, name: 'Login functionality', status: 'passed', generatedBy: 'AI', lastRun: '2 mins ago', type: 'UI' },
69
+ { id: 2, name: 'Checkout process', status: 'failed', generatedBy: 'AI', lastRun: '5 mins ago', type: 'API', error: 'Timeout waiting for payment button' },
70
+ { id: 3, name: 'Search feature', status: 'pending', generatedBy: 'Manual', lastRun: 'Never', type: 'UI' },
71
+ { id: 4, name: 'User profile update', status: 'passed', generatedBy: 'AI', lastRun: '10 mins ago', type: 'UI' },
72
+ { id: 5, name: 'Payment gateway integration', status: 'failed', generatedBy: 'AI', lastRun: 'Now', type: 'API', error: 'Invalid response from payment provider' },
73
+ ];
74
+ setTestCases(mockTestCases);
75
+
76
+ const mockResults = [
77
+ { day: 'Mon', passed: 45, failed: 5 },
78
+ { day: 'Tue', passed: 52, failed: 3 },
79
+ { day: 'Wed', passed: 48, failed: 7 },
80
+ { day: 'Thu', passed: 56, failed: 2 },
81
+ { day: 'Fri', passed: 50, failed: 4 },
82
+ { day: 'Sat', passed: 40, failed: 1 },
83
+ { day: 'Sun', passed: 38, failed: 2 },
84
+ ];
85
+ setTestResults(mockResults);
86
+ }, []);
87
+
88
+ const generateTests = () => {
89
+ setIsGenerating(true);
90
+ // Simulate AI generation
91
+ setTimeout(() => {
92
+ const newTest = {
93
+ id: testCases.length + 1,
94
+ name: `Test case for: ${aiPrompt || 'new feature'}`,
95
+ status: 'pending',
96
+ generatedBy: 'AI',
97
+ lastRun: 'Never',
98
+ type: aiPrompt.includes('API') ? 'API' : 'UI'
99
+ };
100
+ setTestCases([...testCases, newTest]);
101
+ setIsGenerating(false);
102
+ setAiPrompt('');
103
+ }, 2000);
104
+ };
105
+
106
+ const generateFromUrl = () => {
107
+ if (!websiteUrl) return;
108
+
109
+ setIsGenerating(true);
110
+ // Simulate URL analysis and test generation
111
+ const interval = setInterval(() => {
112
+ setAnalysisProgress(prev => {
113
+ if (prev >= 100) {
114
+ clearInterval(interval);
115
+ return 100;
116
+ }
117
+ return prev + 10;
118
+ });
119
+ }, 300);
120
+
121
+ setTimeout(() => {
122
+ const newTests = [
123
+ {
124
+ id: testCases.length + 1,
125
+ name: `Homepage load test for ${websiteUrl}`,
126
+ status: 'pending',
127
+ generatedBy: 'AI',
128
+ lastRun: 'Never',
129
+ type: 'UI'
130
+ },
131
+ {
132
+ id: testCases.length + 2,
133
+ name: `Navigation menu functionality for ${websiteUrl}`,
134
+ status: 'pending',
135
+ generatedBy: 'AI',
136
+ lastRun: 'Never',
137
+ type: 'UI'
138
+ },
139
+ {
140
+ id: testCases.length + 3,
141
+ name: `Form validation for ${websiteUrl}`,
142
+ status: 'pending',
143
+ generatedBy: 'AI',
144
+ lastRun: 'Never',
145
+ type: 'UI'
146
+ }
147
+ ];
148
+ setTestCases([...testCases, ...newTests]);
149
+ setIsGenerating(false);
150
+ setAnalysisProgress(0);
151
+ setWebsiteUrl('');
152
+ }, 3000);
153
+ };
154
+
155
+ const analyzeDocument = () => {
156
+ if (!uploadedFile) return;
157
+
158
+ setIsAnalyzing(true);
159
+ // Simulate document analysis
160
+ const interval = setInterval(() => {
161
+ setAnalysisProgress(prev => {
162
+ if (prev >= 100) {
163
+ clearInterval(interval);
164
+ return 100;
165
+ }
166
+ return prev + 10;
167
+ });
168
+ }, 400);
169
+
170
+ setTimeout(() => {
171
+ const newTests = [
172
+ {
173
+ id: testCases.length + 1,
174
+ name: `Test for requirement: User authentication`,
175
+ status: 'pending',
176
+ generatedBy: 'AI',
177
+ lastRun: 'Never',
178
+ type: 'UI'
179
+ },
180
+ {
181
+ id: testCases.length + 2,
182
+ name: `Test for requirement: Data validation`,
183
+ status: 'pending',
184
+ generatedBy: 'AI',
185
+ lastRun: 'Never',
186
+ type: 'API'
187
+ },
188
+ {
189
+ id: testCases.length + 3,
190
+ name: `Test for requirement: Performance thresholds`,
191
+ status: 'pending',
192
+ generatedBy: 'AI',
193
+ lastRun: 'Never',
194
+ type: 'Performance'
195
+ }
196
+ ];
197
+ setTestCases([...testCases, ...newTests]);
198
+ setIsAnalyzing(false);
199
+ setAnalysisProgress(0);
200
+ setUploadedFile(null);
201
+ }, 4000);
202
+ };
203
+
204
+ const executeTests = (onlyFailed = false) => {
205
+ setExecutionStatus('running');
206
+ setFailedTestsOnly(onlyFailed);
207
+ // Simulate test execution
208
+ setTimeout(() => {
209
+ const updatedTests = testCases.map(test => {
210
+ if (onlyFailed && test.status !== 'failed') return test;
211
+
212
+ return {
213
+ ...test,
214
+ status: Math.random() > 0.2 ? 'passed' : 'failed',
215
+ lastRun: 'Just now',
216
+ ...(Math.random() > 0.7 ? { error: `Error code: ${Math.floor(Math.random() * 1000)}` } : {})
217
+ };
218
+ });
219
+ setTestCases(updatedTests);
220
+ setExecutionStatus('completed');
221
+ }, 3000);
222
+ };
223
+
224
+ const debugFailedTests = () => {
225
+ setIsDebugging(true);
226
+ // Simulate AI debugging
227
+ setTimeout(() => {
228
+ const suggestions = [
229
+ {
230
+ testId: 2,
231
+ suggestion: "Increase wait time for payment button from 5s to 10s",
232
+ confidence: "85%"
233
+ },
234
+ {
235
+ testId: 5,
236
+ suggestion: "Add retry logic for payment API calls (3 attempts)",
237
+ confidence: "78%"
238
+ },
239
+ {
240
+ testId: 5,
241
+ suggestion: "Verify API response schema matches documentation",
242
+ confidence: "92%"
243
+ }
244
+ ];
245
+ setDebugSuggestions(suggestions);
246
+ setIsDebugging(false);
247
+ }, 2500);
248
+ };
249
+
250
+ const applyDebugSuggestion = (suggestion) => {
251
+ // Simulate applying the suggestion
252
+ const updatedTests = testCases.map(test => {
253
+ if (test.id === suggestion.testId) {
254
+ return {
255
+ ...test,
256
+ status: 'pending',
257
+ lastRun: 'Never',
258
+ debugApplied: suggestion.suggestion
259
+ };
260
+ }
261
+ return test;
262
+ });
263
+ setTestCases(updatedTests);
264
+ setDebugSuggestions(debugSuggestions.filter(s => s !== suggestion));
265
+ };
266
+
267
+ const getStatusColor = (status) => {
268
+ switch (status) {
269
+ case 'passed': return 'bg-gray-100 text-gray-800 border border-green-500';
270
+ case 'failed': return 'bg-gray-100 text-gray-800 border border-red-500';
271
+ case 'running': return 'bg-gray-100 text-gray-800 border border-blue-500';
272
+ case 'pending': return 'bg-gray-100 text-gray-800 border border-yellow-500';
273
+ default: return 'bg-gray-100 text-gray-800';
274
+ }
275
+ };
276
+
277
+ const getTypeColor = (type) => {
278
+ return type === 'UI' ? 'bg-gray-100 text-gray-800 border border-gray-300' :
279
+ type === 'API' ? 'bg-gray-100 text-gray-800 border border-gray-400' :
280
+ 'bg-gray-100 text-gray-800 border border-gray-500';
281
+ };
282
+
283
+ const TestChart = () => {
284
+ const maxValue = Math.max(...testResults.map(r => r.passed + r.failed));
285
+
286
+ return (
287
+ <div className="chart-container bg-white p-4 border border-gray-200 rounded">
288
+ <h3 className="text-lg font-medium mb-4 text-gray-800">Test Execution Trends</h3>
289
+ <div className="flex items-end h-48 space-x-2">
290
+ {testResults.map((result, index) => {
291
+ const total = result.passed + result.failed;
292
+ const passedHeight = (result.passed / maxValue) * 100;
293
+ const failedHeight = (result.failed / maxValue) * 100;
294
+
295
+ return (
296
+ <div key={index} className="flex flex-col items-center flex-1">
297
+ <div className="flex flex-col-reverse w-full h-40">
298
+ <div
299
+ className="bg-gray-800 rounded-t"
300
+ style={{ height: `${failedHeight}%` }}
301
+ ></div>
302
+ <div
303
+ className="bg-gray-300 rounded-t"
304
+ style={{ height: `${passedHeight}%` }}
305
+ ></div>
306
+ </div>
307
+ <span className="text-xs mt-2 text-gray-600">{result.day}</span>
308
+ </div>
309
+ );
310
+ })}
311
+ </div>
312
+ <div className="flex justify-center mt-4 space-x-4">
313
+ <div className="flex items-center">
314
+ <div className="w-3 h-3 bg-gray-300 rounded-full mr-1"></div>
315
+ <span className="text-xs text-gray-600">Passed</span>
316
+ </div>
317
+ <div className="flex items-center">
318
+ <div className="w-3 h-3 bg-gray-800 rounded-full mr-1"></div>
319
+ <span className="text-xs text-gray-600">Failed</span>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ );
324
+ };
325
+
326
+ return (
327
+ <div className="flex h-screen overflow-hidden bg-white">
328
+ {/* Sidebar */}
329
+ <div className={`sidebar ${sidebarOpen ? 'w-64' : 'w-20'} bg-black text-white transition-all duration-300 flex flex-col`}>
330
+ <div className="p-4 flex items-center justify-between border-b border-gray-800">
331
+ {sidebarOpen ? (
332
+ <h1 className="text-xl font-bold text-white">AI TestGenX</h1>
333
+ ) : (
334
+ <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
335
+ <i className="fas fa-robot text-black"></i>
336
+ </div>
337
+ )}
338
+ <button
339
+ onClick={() => setSidebarOpen(!sidebarOpen)}
340
+ className="text-gray-400 hover:text-white"
341
+ >
342
+ <i className={`fas ${sidebarOpen ? 'fa-times' : 'fa-bars'}`}></i>
343
+ </button>
344
+ </div>
345
+ <nav className="flex-1 p-4 space-y-2">
346
+ <button
347
+ onClick={() => setActiveTab('dashboard')}
348
+ className={`w-full flex items-center p-3 rounded ${activeTab === 'dashboard' ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-300'}`}
349
+ >
350
+ <i className="fas fa-tachometer-alt mr-3"></i>
351
+ {sidebarOpen && <span>Dashboard</span>}
352
+ </button>
353
+ <button
354
+ onClick={() => setActiveTab('tests')}
355
+ className={`w-full flex items-center p-3 rounded ${activeTab === 'tests' ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-300'}`}
356
+ >
357
+ <i className="fas fa-vial mr-3"></i>
358
+ {sidebarOpen && <span>Test Cases</span>}
359
+ </button>
360
+ <button
361
+ onClick={() => setActiveTab('generator')}
362
+ className={`w-full flex items-center p-3 rounded ${activeTab === 'generator' ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-300'}`}
363
+ >
364
+ <i className="fas fa-magic mr-3"></i>
365
+ {sidebarOpen && <span>AI Generator</span>}
366
+ </button>
367
+ <button
368
+ onClick={() => setActiveTab('execution')}
369
+ className={`w-full flex items-center p-3 rounded ${activeTab === 'execution' ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-300'}`}
370
+ >
371
+ <i className="fas fa-play-circle mr-3"></i>
372
+ {sidebarOpen && <span>Execution</span>}
373
+ </button>
374
+ <button
375
+ onClick={() => setActiveTab('reports')}
376
+ className={`w-full flex items-center p-3 rounded ${activeTab === 'reports' ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-300'}`}
377
+ >
378
+ <i className="fas fa-chart-bar mr-3"></i>
379
+ {sidebarOpen && <span>Reports</span>}
380
+ </button>
381
+ </nav>
382
+ <div className="p-4 border-t border-gray-800">
383
+ <div className="flex items-center">
384
+ <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
385
+ <i className="fas fa-user text-gray-300"></i>
386
+ </div>
387
+ {sidebarOpen && (
388
+ <div className="ml-3">
389
+ <p className="text-sm font-medium text-white">John Doe</p>
390
+ <p className="text-xs text-gray-400">Admin</p>
391
+ </div>
392
+ )}
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ {/* Main Content */}
398
+ <div className="flex-1 overflow-auto">
399
+ {/* Header */}
400
+ <header className="bg-white border-b border-gray-200">
401
+ <div className="px-6 py-4 flex justify-between items-center">
402
+ <h2 className="text-xl font-medium text-gray-900">
403
+ {activeTab === 'dashboard' && 'Dashboard'}
404
+ {activeTab === 'tests' && 'Test Cases'}
405
+ {activeTab === 'generator' && 'AI Test Generator'}
406
+ {activeTab === 'execution' && 'Test Execution'}
407
+ {activeTab === 'reports' && 'Test Reports'}
408
+ </h2>
409
+ <div className="flex items-center space-x-4">
410
+ <div className="relative">
411
+ <input
412
+ type="text"
413
+ placeholder="Search..."
414
+ className="pl-10 pr-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 bg-white"
415
+ />
416
+ <i className="fas fa-search absolute left-3 top-3 text-gray-400"></i>
417
+ </div>
418
+ <button className="p-2 text-gray-600 hover:text-gray-900">
419
+ <i className="fas fa-bell"></i>
420
+ </button>
421
+ </div>
422
+ </div>
423
+ </header>
424
+
425
+ {/* Content Area */}
426
+ <main className="p-6 bg-gray-50">
427
+ {activeTab === 'dashboard' && (
428
+ <div className="space-y-6">
429
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
430
+ <div className="bg-white p-6 border border-gray-200 rounded">
431
+ <div className="flex justify-between items-start">
432
+ <div>
433
+ <p className="text-sm text-gray-600">Total Test Cases</p>
434
+ <h3 className="text-2xl font-semibold mt-2 text-gray-800">{testCases.length}</h3>
435
+ </div>
436
+ <div className="bg-gray-100 p-3 rounded-full">
437
+ <i className="fas fa-vial text-gray-600"></i>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <div className="bg-white p-6 border border-gray-200 rounded">
442
+ <div className="flex justify-between items-start">
443
+ <div>
444
+ <p className="text-sm text-gray-600">Passed Tests</p>
445
+ <h3 className="text-2xl font-semibold mt-2 text-gray-800">
446
+ {testCases.filter(t => t.status === 'passed').length}
447
+ </h3>
448
+ </div>
449
+ <div className="bg-gray-100 p-3 rounded-full text-green-500">
450
+ <i className="fas fa-check-circle"></i>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ <div className="bg-white p-6 border border-gray-200 rounded">
455
+ <div className="flex justify-between items-start">
456
+ <div>
457
+ <p className="text-sm text-gray-600">Failed Tests</p>
458
+ <h3 className="text-2xl font-semibold mt-2 text-gray-800">
459
+ {testCases.filter(t => t.status === 'failed').length}
460
+ </h3>
461
+ </div>
462
+ <div className="bg-gray-100 p-3 rounded-full text-red-500">
463
+ <i className="fas fa-times-circle"></i>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
470
+ <TestChart />
471
+
472
+ <div className="bg-white p-6 border border-gray-200 rounded">
473
+ <h3 className="text-lg font-medium mb-4 text-gray-800">Recent Activities</h3>
474
+ <div className="space-y-4">
475
+ {testCases.slice(0, 5).map(test => (
476
+ <div key={test.id} className="flex items-start">
477
+ <div className={`p-2 rounded-full mr-3 ${getStatusColor(test.status)}`}>
478
+ {test.status === 'passed' && <i className="fas fa-check text-green-500"></i>}
479
+ {test.status === 'failed' && <i className="fas fa-times text-red-500"></i>}
480
+ {test.status === 'running' && <i className="fas fa-sync-alt fa-spin text-blue-500"></i>}
481
+ {test.status === 'pending' && <i className="fas fa-clock text-yellow-500"></i>}
482
+ </div>
483
+ <div className="flex-1">
484
+ <p className="font-medium text-gray-800">{test.name}</p>
485
+ <p className="text-sm text-gray-500">
486
+ {test.generatedBy === 'AI' ? 'AI Generated' : 'Manual'} • {test.lastRun}
487
+ </p>
488
+ </div>
489
+ <span className={`text-xs px-2 py-1 rounded ${getTypeColor(test.type)}`}>
490
+ {test.type}
491
+ </span>
492
+ </div>
493
+ ))}
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ )}
499
+
500
+ {activeTab === 'tests' && (
501
+ <div className="bg-white border border-gray-200 rounded overflow-hidden">
502
+ <div className="p-4 border-b border-gray-200 flex justify-between items-center">
503
+ <h3 className="text-lg font-medium text-gray-800">All Test Cases</h3>
504
+ <div className="flex space-x-3">
505
+ <button
506
+ onClick={() => setActiveTab('generator')}
507
+ className="flex items-center px-4 py-2 bg-black text-white rounded hover:bg-gray-800"
508
+ >
509
+ <i className="fas fa-plus mr-2"></i>
510
+ <span>Generate with AI</span>
511
+ </button>
512
+ <button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">
513
+ <i className="fas fa-filter mr-2"></i>
514
+ <span>Filter</span>
515
+ </button>
516
+ </div>
517
+ </div>
518
+ <div className="overflow-x-auto">
519
+ <table className="min-w-full divide-y divide-gray-200">
520
+ <thead className="bg-gray-50">
521
+ <tr>
522
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
523
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
524
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
525
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Generated By</th>
526
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Run</th>
527
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
528
+ </tr>
529
+ </thead>
530
+ <tbody className="bg-white divide-y divide-gray-200">
531
+ {testCases.map(test => (
532
+ <tr key={test.id} className="hover:bg-gray-50">
533
+ <td className="px-6 py-4 whitespace-nowrap">
534
+ <div className="flex items-center">
535
+ <div className="flex-shrink-0 h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center">
536
+ <i className="fas fa-vial text-gray-600"></i>
537
+ </div>
538
+ <div className="ml-4">
539
+ <div className="text-sm font-medium text-gray-900">{test.name}</div>
540
+ {test.debugApplied && (
541
+ <div className="text-xs text-gray-500 mt-1">
542
+ <i className="fas fa-lightbulb text-yellow-500 mr-1"></i>
543
+ {test.debugApplied}
544
+ </div>
545
+ )}
546
+ </div>
547
+ </div>
548
+ </td>
549
+ <td className="px-6 py-4 whitespace-nowrap">
550
+ <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded ${getTypeColor(test.type)}`}>
551
+ {test.type}
552
+ </span>
553
+ </td>
554
+ <td className="px-6 py-4 whitespace-nowrap">
555
+ <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded ${getStatusColor(test.status)}`}>
556
+ {test.status}
557
+ </span>
558
+ </td>
559
+ <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
560
+ {test.generatedBy === 'AI' ? (
561
+ <span className="flex items-center">
562
+ <i className="fas fa-robot text-gray-600 mr-1"></i>
563
+ AI
564
+ </span>
565
+ ) : 'Manual'}
566
+ </td>
567
+ <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{test.lastRun}</td>
568
+ <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
569
+ <button className="text-gray-600 hover:text-gray-900 mr-3">
570
+ <i className="fas fa-play"></i>
571
+ </button>
572
+ <button className="text-gray-600 hover:text-gray-900 mr-3">
573
+ <i className="fas fa-edit"></i>
574
+ </button>
575
+ <button className="text-gray-600 hover:text-gray-900">
576
+ <i className="fas fa-trash"></i>
577
+ </button>
578
+ </td>
579
+ </tr>
580
+ ))}
581
+ </tbody>
582
+ </table>
583
+ </div>
584
+ </div>
585
+ )}
586
+
587
+ {activeTab === 'generator' && (
588
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
589
+ <div className="lg:col-span-2 space-y-6">
590
+ <div className="bg-white p-6 border border-gray-200 rounded">
591
+ <h3 className="text-xl font-medium mb-4 text-gray-800">AI Test Generator</h3>
592
+ <div className="mb-6">
593
+ <label className="block text-sm font-medium text-gray-700 mb-2">Project Name</label>
594
+ <input
595
+ type="text"
596
+ value={projectName}
597
+ onChange={(e) => setProjectName(e.target.value)}
598
+ className="w-full px-4 py-2 border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400"
599
+ />
600
+ </div>
601
+ <div className="mb-6">
602
+ <label className="block text-sm font-medium text-gray-700 mb-2">
603
+ Describe what you want to test
604
+ </label>
605
+ <textarea
606
+ value={aiPrompt}
607
+ onChange={(e) => setAiPrompt(e.target.value)}
608
+ rows="5"
609
+ placeholder="Example: 'Generate UI tests for login page with email and password fields, including validation for incorrect credentials'"
610
+ className="w-full px-4 py-2 border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400"
611
+ ></textarea>
612
+ </div>
613
+ <div className="flex justify-end">
614
+ <button
615
+ onClick={generateTests}
616
+ disabled={isGenerating}
617
+ className="px-6 py-3 bg-black text-white rounded hover:bg-gray-800 disabled:opacity-50 flex items-center"
618
+ >
619
+ {isGenerating ? (
620
+ <>
621
+ <i className="fas fa-spinner fa-spin mr-2"></i>
622
+ Generating...
623
+ </>
624
+ ) : (
625
+ <>
626
+ <i className="fas fa-magic mr-2"></i>
627
+ Generate Test Cases
628
+ </>
629
+ )}
630
+ </button>
631
+ </div>
632
+ </div>
633
+
634
+ <div className="bg-white p-6 border border-gray-200 rounded">
635
+ <h3 className="text-xl font-medium mb-4 text-gray-800">Generate from Website URL</h3>
636
+ <div className="mb-6">
637
+ <label className="block text-sm font-medium text-gray-700 mb-2">Website URL</label>
638
+ <input
639
+ type="url"
640
+ value={websiteUrl}
641
+ onChange={(e) => setWebsiteUrl(e.target.value)}
642
+ placeholder="https://example.com"
643
+ className="w-full px-4 py-2 border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400"
644
+ />
645
+ </div>
646
+ {isGenerating && (
647
+ <div className="mb-4">
648
+ <div className="flex justify-between mb-1">
649
+ <span className="text-sm font-medium text-gray-700">Analyzing website...</span>
650
+ <span className="text-sm font-medium text-gray-700">{analysisProgress}%</span>
651
+ </div>
652
+ <div className="w-full bg-gray-200 rounded-full h-2.5">
653
+ <div
654
+ className="bg-gray-800 h-2.5 rounded-full"
655
+ style={{ width: `${analysisProgress}%` }}
656
+ ></div>
657
+ </div>
658
+ </div>
659
+ )}
660
+ <div className="flex justify-end">
661
+ <button
662
+ onClick={generateFromUrl}
663
+ disabled={isGenerating || !websiteUrl}
664
+ className="px-6 py-3 bg-black text-white rounded hover:bg-gray-800 disabled:opacity-50 flex items-center"
665
+ >
666
+ {isGenerating ? (
667
+ <>
668
+ <i className="fas fa-spinner fa-spin mr-2"></i>
669
+ Analyzing...
670
+ </>
671
+ ) : (
672
+ <>
673
+ <i className="fas fa-globe mr-2"></i>
674
+ Generate from URL
675
+ </>
676
+ )}
677
+ </button>
678
+ </div>
679
+ </div>
680
+
681
+ <div className="bg-white p-6 border border-gray-200 rounded">
682
+ <h3 className="text-xl font-medium mb-4 text-gray-800">Generate from Business Requirements</h3>
683
+ <div className="mb-6">
684
+ <label className="block text-sm font-medium text-gray-700 mb-2">Upload Document</label>
685
+ <div className="file-upload rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 transition-colors">
686
+ {uploadedFile ? (
687
+ <div className="flex items-center justify-center">
688
+ <i className="fas fa-file-alt text-gray-500 mr-2"></i>
689
+ <span className="text-gray-700">{uploadedFile.name}</span>
690
+ <button
691
+ onClick={(e) => {
692
+ e.stopPropagation();
693
+ setUploadedFile(null);
694
+ }}
695
+ className="ml-2 text-gray-500 hover:text-gray-700"
696
+ >
697
+ <i className="fas fa-times"></i>
698
+ </button>
699
+ </div>
700
+ ) : (
701
+ <div>
702
+ <i className="fas fa-cloud-upload-alt text-gray-400 text-4xl mb-2"></i>
703
+ <p className="text-sm text-gray-500 mb-1">Drag & drop your document here</p>
704
+ <p className="text-xs text-gray-400">or click to browse (PDF, DOCX, TXT)</p>
705
+ <input
706
+ type="file"
707
+ className="hidden"
708
+ id="file-upload"
709
+ onChange={(e) => setUploadedFile(e.target.files[0])}
710
+ />
711
+ <label
712
+ htmlFor="file-upload"
713
+ className="inline-block mt-3 px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 cursor-pointer"
714
+ >
715
+ Select File
716
+ </label>
717
+ </div>
718
+ )}
719
+ </div>
720
+ </div>
721
+ {isAnalyzing && (
722
+ <div className="mb-4">
723
+ <div className="flex justify-between mb-1">
724
+ <span className="text-sm font-medium text-gray-700">Analyzing document...</span>
725
+ <span className="text-sm font-medium text-gray-700">{analysisProgress}%</span>
726
+ </div>
727
+ <div className="w-full bg-gray-200 rounded-full h-2.5">
728
+ <div
729
+ className="bg-gray-800 h-2.5 rounded-full"
730
+ style={{ width: `${analysisProgress}%` }}
731
+ ></div>
732
+ </div>
733
+ </div>
734
+ )}
735
+ <div className="flex justify-end">
736
+ <button
737
+ onClick={analyzeDocument}
738
+ disabled={isAnalyzing || !uploadedFile}
739
+ className="px-6 py-3 bg-black text-white rounded hover:bg-gray-800 disabled:opacity-50 flex items-center"
740
+ >
741
+ {isAnalyzing ? (
742
+ <>
743
+ <i className="fas fa-spinner fa-spin mr-2"></i>
744
+ Processing...
745
+ </>
746
+ ) : (
747
+ <>
748
+ <i className="fas fa-file-import mr-2"></i>
749
+ Generate from Document
750
+ </>
751
+ )}
752
+ </button>
753
+ </div>
754
+ </div>
755
+ </div>
756
+
757
+ <div className="bg-white p-6 border border-gray-200 rounded">
758
+ <h3 className="text-xl font-medium mb-4 text-gray-800">AI Suggestions</h3>
759
+ <div className="space-y-4">
760
+ <div
761
+ className="p-4 border border-gray-200 rounded cursor-pointer hover:bg-gray-50 transition-colors"
762
+ onClick={() => setAiPrompt("Generate UI tests for login page with email and password fields, including validation for incorrect credentials")}
763
+ >
764
+ <h4 className="font-medium text-gray-800">Login Page Tests</h4>
765
+ <p className="text-sm text-gray-600 mt-1">Comprehensive UI tests for login functionality</p>
766
+ </div>
767
+ <div
768
+ className="p-4 border border-gray-200 rounded cursor-pointer hover:bg-gray-50 transition-colors"
769
+ onClick={() => setAiPrompt("Create API tests for user registration endpoint with validation for required fields")}
770
+ >
771
+ <h4 className="font-medium text-gray-800">Registration API Tests</h4>
772
+ <p className="text-sm text-gray-600 mt-1">Endpoint validation and error handling</p>
773
+ </div>
774
+ <div
775
+ className="p-4 border border-gray-200 rounded cursor-pointer hover:bg-gray-50 transition-colors"
776
+ onClick={() => setAiPrompt("Generate performance tests for product search functionality with 100 concurrent users")}
777
+ >
778
+ <h4 className="font-medium text-gray-800">Performance Tests</h4>
779
+ <p className="text-sm text-gray-600 mt-1">Load testing for critical features</p>
780
+ </div>
781
+ <div
782
+ className="p-4 border border-gray-200 rounded cursor-pointer hover:bg-gray-50 transition-colors"
783
+ onClick={() => setAiPrompt("Create accessibility tests for homepage to check WCAG 2.1 AA compliance")}
784
+ >
785
+ <h4 className="font-medium text-gray-800">Accessibility Tests</h4>
786
+ <p className="text-sm text-gray-600 mt-1">WCAG compliance validation</p>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ )}
792
+
793
+ {activeTab === 'execution' && (
794
+ <div className="space-y-6">
795
+ <div className="bg-white p-6 border border-gray-200 rounded">
796
+ <div className="flex justify-between items-center mb-6">
797
+ <h3 className="text-xl font-medium text-gray-800">Test Execution</h3>
798
+ <div className="flex space-x-3">
799
+ <button
800
+ onClick={() => executeTests(false)}
801
+ disabled={executionStatus === 'running' || testCases.length === 0}
802
+ className={`px-4 py-2 rounded flex items-center ${executionStatus === 'running' && !failedTestsOnly ? 'bg-gray-800 text-white' : 'bg-black text-white hover:bg-gray-800'} disabled:opacity-50`}
803
+ >
804
+ {executionStatus === 'running' && !failedTestsOnly ? (
805
+ <>
806
+ <i className="fas fa-sync-alt fa-spin mr-2"></i>
807
+ Running Tests...
808
+ </>
809
+ ) : (
810
+ <>
811
+ <i className="fas fa-play mr-2"></i>
812
+ Run All Tests
813
+ </>
814
+ )}
815
+ </button>
816
+ <button
817
+ onClick={() => executeTests(true)}
818
+ disabled={executionStatus === 'running' || testCases.filter(t => t.status === 'failed').length === 0}
819
+ className={`px-4 py-2 rounded flex items-center ${executionStatus === 'running' && failedTestsOnly ? 'bg-gray-800 text-white' : 'bg-gray-700 text-white hover:bg-gray-600'} disabled:opacity-50`}
820
+ >
821
+ {executionStatus === 'running' && failedTestsOnly ? (
822
+ <>
823
+ <i className="fas fa-sync-alt fa-spin mr-2"></i>
824
+ Debugging...
825
+ </>
826
+ ) : (
827
+ <>
828
+ <i className="fas fa-bug mr-2"></i>
829
+ Debug Failed Only
830
+ </>
831
+ )}
832
+ </button>
833
+ <button
834
+ onClick={debugFailedTests}
835
+ disabled={isDebugging || testCases.filter(t => t.status === 'failed').length === 0}
836
+ className="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 flex items-center disabled:opacity-50"
837
+ >
838
+ {isDebugging ? (
839
+ <>
840
+ <i className="fas fa-spinner fa-spin mr-2"></i>
841
+ Analyzing...
842
+ </>
843
+ ) : (
844
+ <>
845
+ <i className="fas fa-lightbulb mr-2"></i>
846
+ AI Debug Suggestions
847
+ </>
848
+ )}
849
+ </button>
850
+ </div>
851
+ </div>
852
+
853
+ {debugSuggestions.length > 0 && (
854
+ <div className="mb-6 bg-gray-50 p-4 rounded border border-gray-200">
855
+ <h4 className="font-medium text-gray-800 mb-3 flex items-center">
856
+ <i className="fas fa-robot text-gray-600 mr-2"></i>
857
+ AI Debugging Suggestions
858
+ </h4>
859
+ <div className="space-y-3">
860
+ {debugSuggestions.map((suggestion, index) => (
861
+ <div key={index} className="flex justify-between items-center p-3 bg-white border border-gray-200 rounded">
862
+ <div>
863
+ <p className="font-medium text-gray-800">
864
+ Test #{suggestion.testId}: {suggestion.suggestion}
865
+ </p>
866
+ <p className="text-xs text-gray-500 mt-1">
867
+ Confidence: {suggestion.confidence}
868
+ </p>
869
+ </div>
870
+ <button
871
+ onClick={() => applyDebugSuggestion(suggestion)}
872
+ className="px-3 py-1 bg-black text-white text-sm rounded hover:bg-gray-800"
873
+ >
874
+ Apply
875
+ </button>
876
+ </div>
877
+ ))}
878
+ </div>
879
+ </div>
880
+ )}
881
+
882
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
883
+ <div className="border border-gray-200 rounded p-4">
884
+ <div className="flex justify-between items-center">
885
+ <div>
886
+ <p className="text-sm text-gray-600">Total to Run</p>
887
+ <p className="text-xl font-semibold text-gray-800">
888
+ {failedTestsOnly ?
889
+ testCases.filter(t => t.status === 'failed').length :
890
+ testCases.length}
891
+ </p>
892
+ </div>
893
+ <div className="bg-gray-100 p-3 rounded-full">
894
+ <i className="fas fa-list text-gray-600"></i>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ <div className="border border-gray-200 rounded p-4">
899
+ <div className="flex justify-between items-center">
900
+ <div>
901
+ <p className="text-sm text-gray-600">Currently Running</p>
902
+ <p className="text-xl font-semibold text-blue-500">
903
+ {executionStatus === 'running' ? testCases.filter(t => t.status === 'running').length : 0}
904
+ </p>
905
+ </div>
906
+ <div className="bg-gray-100 p-3 rounded-full text-blue-500">
907
+ <i className="fas fa-sync-alt"></i>
908
+ </div>
909
+ </div>
910
+ </div>
911
+ <div className="border border-gray-200 rounded p-4">
912
+ <div className="flex justify-between items-center">
913
+ <div>
914
+ <p className="text-sm text-gray-600">Estimated Time</p>
915
+ <p className="text-xl font-semibold text-gray-800">
916
+ ~{failedTestsOnly ?
917
+ testCases.filter(t => t.status === 'failed').length * 2 :
918
+ testCases.length * 2}s
919
+ </p>
920
+ </div>
921
+ <div className="bg-gray-100 p-3 rounded-full text-gray-600">
922
+ <i className="fas fa-clock"></i>
923
+ </div>
924
+ </div>
925
+ </div>
926
+ </div>
927
+
928
+ <div className="overflow-x-auto">
929
+ <table className="min-w-full divide-y divide-gray-200">
930
+ <thead className="bg-gray-50">
931
+ <tr>
932
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Test Case</th>
933
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
934
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
935
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
936
+ <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
937
+ </tr>
938
+ </thead>
939
+ <tbody className="bg-white divide-y divide-gray-200">
940
+ {testCases
941
+ .filter(test => !failedTestsOnly || test.status === 'failed')
942
+ .map(test => (
943
+ <tr key={test.id}>
944
+ <td className="px-6 py-4 whitespace-nowrap">
945
+ <div className="text-sm font-medium text-gray-900">{test.name}</div>
946
+ <div className="text-sm text-gray-500">{test.type}</div>
947
+ {test.error && (
948
+ <div className="text-xs text-red-500 mt-1">
949
+ <i className="fas fa-exclamation-circle mr-1"></i>
950
+ {test.error}
951
+ </div>
952
+ )}
953
+ </td>
954
+ <td className="px-6 py-4 whitespace-nowrap">
955
+ <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded ${getStatusColor(test.status)}`}>
956
+ {test.status}
957
+ </span>
958
+ </td>
959
+ <td className="px-6 py-4 whitespace-nowrap">
960
+ {test.status === 'running' ? (
961
+ <div className="w-full bg-gray-200 rounded-full h-2">
962
+ <div
963
+ className="bg-blue-500 h-2 rounded-full animate-pulse"
964
+ style={{ width: '45%' }}
965
+ ></div>
966
+ </div>
967
+ ) : test.status === 'pending' ? (
968
+ <div className="w-full bg-gray-200 rounded-full h-2"></div>
969
+ ) : (
970
+ <div className="w-full bg-gray-200 rounded-full h-2">
971
+ <div
972
+ className={`h-2 rounded-full ${test.status === 'passed' ? 'bg-green-500' : 'bg-red-500'}`}
973
+ style={{ width: '100%' }}
974
+ ></div>
975
+ </div>
976
+ )}
977
+ </td>
978
+ <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
979
+ {test.status === 'running' ? 'In progress' :
980
+ test.status === 'pending' ? '--' : '2.4s'}
981
+ </td>
982
+ <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
983
+ <button className="text-gray-600 hover:text-gray-900">
984
+ View Logs
985
+ </button>
986
+ </td>
987
+ </tr>
988
+ ))}
989
+ </tbody>
990
+ </table>
991
+ </div>
992
+ </div>
993
+ </div>
994
+ )}
995
+
996
+ {activeTab === 'reports' && (
997
+ <div className="space-y-6">
998
+ <div className="bg-white p-6 border border-gray-200 rounded">
999
+ <h3 className="text-xl font-medium mb-6 text-gray-800">Test Reports</h3>
1000
+
1001
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
1002
+ <div className="border border-gray-200 rounded p-4">
1003
+ <div className="flex justify-between">
1004
+ <div>
1005
+ <p className="text-sm text-gray-600">Total Executions</p>
1006
+ <p className="text-xl font-semibold text-gray-800">127</p>
1007
+ </div>
1008
+ <div className="text-green-500">
1009
+ <i className="fas fa-arrow-up"></i> 12%
1010
+ </div>
1011
+ </div>
1012
+ <div className="mt-3 h-1 bg-gray-200 rounded-full">
1013
+ <div className="h-1 bg-gray-800 rounded-full" style={{ width: '70%' }}></div>
1014
+ </div>
1015
+ </div>
1016
+ <div className="border border-gray-200 rounded p-4">
1017
+ <div className="flex justify-between">
1018
+ <div>
1019
+ <p className="text-sm text-gray-600">Pass Rate</p>
1020
+ <p className="text-xl font-semibold text-gray-800">92%</p>
1021
+ </div>
1022
+ <div className="text-green-500">
1023
+ <i className="fas fa-arrow-up"></i> 5%
1024
+ </div>
1025
+ </div>
1026
+ <div className="mt-3 h-1 bg-gray-200 rounded-full">
1027
+ <div className="h-1 bg-gray-300 rounded-full" style={{ width: '92%' }}></div>
1028
+ </div>
1029
+ </div>
1030
+ <div className="border border-gray-200 rounded p-4">
1031
+ <div className="flex justify-between">
1032
+ <div>
1033
+ <p className="text-sm text-gray-600">Flaky Tests</p>
1034
+ <p className="text-xl font-semibold text-gray-800">4</p>
1035
+ </div>
1036
+ <div className="text-red-500">
1037
+ <i className="fas fa-arrow-down"></i> 2
1038
+ </div>
1039
+ </div>
1040
+ <div className="mt-3 h-1 bg-gray-200 rounded-full">
1041
+ <div className="h-1 bg-yellow-500 rounded-full" style={{ width: '15%' }}></div>
1042
+ </div>
1043
+ </div>
1044
+ <div className="border border-gray-200 rounded p-4">
1045
+ <div className="flex justify-between">
1046
+ <div>
1047
+ <p className="text-sm text-gray-600">Avg. Duration</p>
1048
+ <p className="text-xl font-semibold text-gray-800">3.2s</p>
1049
+ </div>
1050
+ <div className="text-green-500">
1051
+ <i className="fas fa-arrow-down"></i> 0.8s
1052
+ </div>
1053
+ </div>
1054
+ <div className="mt-3 h-1 bg-gray-200 rounded-full">
1055
+ <div className="h-1 bg-blue-500 rounded-full" style={{ width: '40%' }}></div>
1056
+ </div>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <TestChart />
1061
+
1062
+ <div className="mt-8">
1063
+ <h4 className="text-lg font-medium mb-4 text-gray-800">Failed Tests Analysis</h4>
1064
+ <div className="bg-gray-50 border border-gray-200 rounded p-4">
1065
+ <div className="flex items-start">
1066
+ <div className="bg-gray-100 p-3 rounded-full mr-4">
1067
+ <i className="fas fa-exclamation-triangle text-gray-600"></i>
1068
+ </div>
1069
+ <div>
1070
+ <h5 className="font-medium text-gray-800">Most Common Failure Patterns</h5>
1071
+ <ul className="mt-2 space-y-2">
1072
+ <li className="flex items-center">
1073
+ <span className="w-2 h-2 bg-gray-800 rounded-full mr-2"></span>
1074
+ <span>Timeout waiting for elements (42%)</span>
1075
+ </li>
1076
+ <li className="flex items-center">
1077
+ <span className="w-2 h-2 bg-gray-800 rounded-full mr-2"></span>
1078
+ <span>API response validation (33%)</span>
1079
+ </li>
1080
+ <li className="flex items-center">
1081
+ <span className="w-2 h-2 bg-gray-800 rounded-full mr-2"></span>
1082
+ <span>State management issues (25%)</span>
1083
+ </li>
1084
+ </ul>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ )}
1092
+ </main>
1093
+ </div>
1094
+ </div>
1095
+ );
1096
+ }
1097
+
1098
+ ReactDOM.render(<App />, document.getElementById('root'));
1099
+ </script>
1100
+ <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=anonymousatom/tmp-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1101
+ </html>
prompts.txt ADDED
File without changes