@codeguide/core 0.0.27 → 0.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/README.md +50 -41
  2. package/__tests__/services/codespace/codespace-v2.test.ts +29 -18
  3. package/__tests__/services/usage/usage-service.test.ts +597 -85
  4. package/codeguide.ts +6 -0
  5. package/dist/codeguide.d.ts +3 -1
  6. package/dist/codeguide.js +2 -0
  7. package/dist/index.d.ts +4 -3
  8. package/dist/services/base/base-service.d.ts +21 -0
  9. package/dist/services/base/base-service.js +114 -0
  10. package/dist/services/codespace/codespace-service.d.ts +55 -1
  11. package/dist/services/codespace/codespace-service.js +260 -5
  12. package/dist/services/codespace/codespace-types.d.ts +193 -13
  13. package/dist/services/codespace/index.d.ts +1 -1
  14. package/dist/services/index.d.ts +4 -0
  15. package/dist/services/index.js +7 -1
  16. package/dist/services/projects/project-types.d.ts +66 -32
  17. package/dist/services/repository-analysis/repository-types.d.ts +1 -0
  18. package/dist/services/starter-kits/index.d.ts +2 -0
  19. package/dist/services/starter-kits/index.js +20 -0
  20. package/dist/services/starter-kits/starter-kits-service.d.ts +13 -0
  21. package/dist/services/starter-kits/starter-kits-service.js +27 -0
  22. package/dist/services/starter-kits/starter-kits-types.d.ts +34 -0
  23. package/dist/services/starter-kits/starter-kits-types.js +2 -0
  24. package/dist/services/tasks/task-service.d.ts +2 -1
  25. package/dist/services/tasks/task-service.js +8 -0
  26. package/dist/services/tasks/task-types.d.ts +26 -7
  27. package/dist/services/usage/usage-service.d.ts +5 -2
  28. package/dist/services/usage/usage-service.js +58 -9
  29. package/dist/services/usage/usage-types.d.ts +207 -34
  30. package/dist/services/users/index.d.ts +2 -0
  31. package/dist/services/users/index.js +20 -0
  32. package/dist/services/users/user-service.d.ts +12 -0
  33. package/dist/services/users/user-service.js +17 -0
  34. package/dist/services/users/user-types.d.ts +55 -0
  35. package/dist/services/users/user-types.js +2 -0
  36. package/docs/.vitepress/README.md +51 -0
  37. package/docs/.vitepress/config.ts +139 -0
  38. package/docs/.vitepress/theme/custom.css +80 -0
  39. package/docs/.vitepress/theme/index.ts +13 -0
  40. package/docs/.vitepress/tsconfig.json +19 -0
  41. package/docs/QUICKSTART.md +77 -0
  42. package/docs/README.md +134 -0
  43. package/docs/README_SETUP.md +46 -0
  44. package/docs/authentication.md +351 -0
  45. package/docs/codeguide-client.md +350 -0
  46. package/docs/codespace-models.md +1004 -0
  47. package/docs/codespace-service.md +558 -81
  48. package/docs/index.md +135 -0
  49. package/docs/package.json +14 -0
  50. package/docs/projects-service.md +688 -0
  51. package/docs/security-keys-service.md +773 -0
  52. package/docs/starter-kits-service.md +249 -0
  53. package/docs/task-service.md +955 -0
  54. package/docs/testsprite_tests/TC001_Homepage_Load_and_Hero_Section_Display.py +70 -0
  55. package/docs/testsprite_tests/TC002_Sidebar_Navigation_ExpandCollapse_Functionality.py +73 -0
  56. package/docs/testsprite_tests/TC003_Full_Text_Local_Search_with_Keyboard_Shortcut.py +90 -0
  57. package/docs/testsprite_tests/TC004_Dark_Mode_Toggle_and_Persistence.py +73 -0
  58. package/docs/testsprite_tests/TC005_Mobile_Responsiveness_and_Touch_Navigation.py +113 -0
  59. package/docs/testsprite_tests/TC006_GitHub_Integration_Edit_this_page_Links.py +73 -0
  60. package/docs/testsprite_tests/TC007_Syntax_Highlighting_and_Code_Copy_Functionality.py +73 -0
  61. package/docs/testsprite_tests/TC008_Auto_Generated_Table_of_Contents_Accuracy.py +73 -0
  62. package/docs/testsprite_tests/TC009_SEO_and_Content_Discoverability_Verification.py +73 -0
  63. package/docs/testsprite_tests/TC010_Accessibility_Compliance_WCAG_AA.py +73 -0
  64. package/docs/testsprite_tests/TC011_Local_Development_Workflow_Build_and_Hot_Reload.py +74 -0
  65. package/docs/testsprite_tests/TC012_Performance_Metrics_Compliance.py +73 -0
  66. package/docs/testsprite_tests/standard_prd.json +122 -0
  67. package/docs/testsprite_tests/testsprite-mcp-test-report.html +2508 -0
  68. package/docs/testsprite_tests/testsprite-mcp-test-report.md +273 -0
  69. package/docs/testsprite_tests/testsprite_frontend_test_plan.json +390 -0
  70. package/docs/usage-service.md +616 -0
  71. package/index.ts +11 -3
  72. package/package.json +16 -2
  73. package/plans/CODESPACE_LOGS_STREAMING_GUIDE.md +320 -0
  74. package/plans/CODESPACE_TASK_LOGS_API_COMPLETE_GUIDE.md +821 -0
  75. package/services/base/base-service.ts +130 -0
  76. package/services/codespace/codespace-service.ts +347 -8
  77. package/services/codespace/codespace-types.ts +263 -14
  78. package/services/codespace/index.ts +16 -1
  79. package/services/index.ts +4 -0
  80. package/services/projects/README.md +107 -34
  81. package/services/projects/project-types.ts +69 -32
  82. package/services/repository-analysis/repository-types.ts +1 -0
  83. package/services/starter-kits/index.ts +2 -0
  84. package/services/starter-kits/starter-kits-service.ts +33 -0
  85. package/services/starter-kits/starter-kits-types.ts +38 -0
  86. package/services/tasks/task-service.ts +10 -0
  87. package/services/tasks/task-types.ts +29 -7
  88. package/services/usage/usage-service.ts +59 -10
  89. package/services/usage/usage-types.ts +239 -34
  90. package/services/users/index.ts +2 -0
  91. package/services/users/user-service.ts +15 -0
  92. package/services/users/user-types.ts +59 -0
package/docs/testsprite_tests/testsprite-mcp-test-report.html ADDED
@@ -0,0 +1,2508 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>TestSprite AI Project Test Report</title>
8
+ <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NSA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI0N181MzEpIj4KPHBhdGggZD0iTTMxLjA3MDcgMjguNzMzNEwxNi43Mjg5IDM3LjA5NjVDMTUuODc5NiAzNy41OTE4IDE1LjQzNzcgMzguNDQwMiAxNS40MDQ5IDM5LjMwMzFMOS43MDMyOCAzNS43OTM3QzkuMjg3ODQgMzUuNTM3NiA5LjAzNTE4IDM1LjA4NDMgOS4wMzUwMSAzNC41OTYyVjM0LjQ4NjFDOS44ODU5MSAzMi45MTUgMTEuMTczNSAzMS41MzAyIDEyLjg5NzkgMzAuNTI0OEwyMy41MTk4IDI0LjMzMDdMMzEuMDcwNyAyOC43MzM0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQ5LjAzOTggOS40NTE4NUM1NS44OTM4IDUuNDU1OTMgNjQuNDk4NyAxMC4zOTk4IDY0LjQ5OSAxOC4zMzM2TDY0LjUgMzQuNTk2MkM2NC41IDM1LjE2MjggNjQuNDUyNiAzNS43MjI4IDY0LjM2MTkgMzYuMjcxN0M2NC4zMTc4IDM2LjE5NDEgNjQuMjcxNSAzNi4xMTcgNjQuMjIyOCAzNi4wNDA5QzYyLjcxMzEgMzMuNjgyNiA1OS41NzcyIDMyLjk5NDMgNTcuMjE4NSAzNC41MDM1TDU3LjA4OTEgMzQuNTg1NkM1Ny4wMjYxIDM0LjQ0NzMgNTYuOTYxNyAzNC4zMDk0IDU2Ljg5MyAzNC4xNzMyVjE4LjMzNDVDNTYuODkzIDE2LjI3MDUgNTQuNjU0OSAxNC45ODQzIDUyLjg3MTggMTYuMDIzNkw0MS4xMzkzIDIyLjg2MzdMMzMuNTg3NCAxOC40NjFMNDkuMDM5OCA5LjQ1MTg1WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTAuNSAxOC45NjY4QzAuNTAwMDA2IDExLjA5NTYgOC45ODM4IDYuMTQzMjcgMTUuODM3NSAxMC4wMTM2TDUyLjYyNDYgMzAuNzlDNTQuNDMxOSAzMS44MTA3IDU1Ljc3MDEgMzMuMjQzNyA1Ni42NCAzNC44NzRMNTAuMTQ2NSAzOS4wMjk1QzQ5Ljk3MDIgMzguMzgxMiA0OS41NDk3IDM3Ljc4OTIgNDguODgzNCAzNy40MTI5TDEyLjA5NzMgMTYuNjM3NEMxMC4zMTQyIDE1LjYzMDQgOC4xMDY5NSAxNi45MTg5IDguMTA2OTUgMTguOTY2OFYzNC43MTI4QzguMTA3MDIgMzUuNjQxNSA4LjU4ODg5IDM2LjUwNDEgOS4zNzk3NyAzNi45OTA5TDE1LjA2NTkgNDAuNDkwNkMxMy41ODE5IDQwLjY3MzggMTIuMTkzMyA0MS41MDg2IDExLjM1NDcgNDIuODg0N0MxMC42MTQyIDQ0LjA5OTggMTAuNDQ2MyA0NS41MDI2IDEwLjc3MzMgNDYuNzgwNEw1LjM5MjMyIDQzLjQ2ODlDMi4zNTIyMyA0MS41OTc2IDAuNTAwMDQ4IDM4LjI4MjYgMC41IDM0LjcxMjhWMTguOTY2OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xNS44MDcxIDQ1LjQzNjFMMjcuNDEzNSA1Mi41MDg3QzMwLjg4MiA1NC42MjI0IDM1LjI1MiA1NC41NzQzIDM4LjY3MzIgNTIuMzg0N0w2MC4wNzQyIDM4LjY4OCIgc3Ryb2tlPSIjMTlDMzc5IiBzdHJva2Utd2lkdGg9IjcuNDg3NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjQ3XzUzMSI+CjxyZWN0IHg9IjAuNSIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==">
9
+ <style>
10
+ @import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');
11
+ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
12
+
13
+ /* Custom CSS Variables for Design System */
14
+ :root {
15
+ --fg-highlighted: #19c379;
16
+ --fg-default: #f7f7f8;
17
+ --fg-muted: #e4e4e4;
18
+ --fg-secondary: #959597;
19
+ --fg-primary: #f7f7f8;
20
+ --fg-success: #19c379;
21
+ --fg-error: #ef4146;
22
+
23
+ --bg-default: #000000;
24
+ --bg-default-rgb: 9, 9, 9;
25
+ --bg-lifted: #101011;
26
+ --bg-elevated: #17181A;
27
+ --bg-success: #10a36333;
28
+ --bg-error: #c2353933;
29
+
30
+ --border-default: #17181A;
31
+ --border-elevated: #212224;
32
+ --border-primary: #10a363;
33
+
34
+ --interactive-bg-default: #212224;
35
+ --interactive-bg-primary: #1a7f53;
36
+ --interactive-fg-primary: #ffffff;
37
+
38
+ --logo-icon-color: #19c379;
39
+ --logo-text-color: #f7f7f8;
40
+
41
+ /* Status tag colors */
42
+ --status-success-bg: rgba(16, 163, 99, 0.2);
43
+ --status-success-border: rgba(16, 163, 99, 0.2);
44
+ --status-success-text: #93E6C2;
45
+ --status-warning-bg: rgba(183, 112, 28, 0.2);
46
+ --status-warning-border: rgba(183, 112, 28, 0.2);
47
+ --status-warning-text: #F4C47D;
48
+ --status-error-bg: rgba(194, 53, 57, 0.2);
49
+ --status-error-border: rgba(194, 53, 57, 0.2);
50
+ --status-error-text: #FFB3B3;
51
+
52
+ --border-radius-medium: 6px;
53
+ --border-radius-large: 8px;
54
+ }
55
+
56
+ /* Light Theme Variables */
57
+ [data-theme="light"] {
58
+ --fg-highlighted: #10a363;
59
+ --fg-default: #090909;
60
+ --fg-muted: #6b6b6d;
61
+ --fg-secondary: #88888B;
62
+ --fg-primary: #f7f7f8;
63
+ --fg-success: #10a363;
64
+ --fg-error: #c23539;
65
+
66
+ --bg-default: #ffffff;
67
+ --bg-default-rgb: 255, 255, 255;
68
+ --bg-lifted: #FAFAFA;
69
+ --bg-elevated: #ffffff;
70
+ --bg-success: #10a36333;
71
+ --bg-error: #c2353933;
72
+
73
+ --border-default: #eeeeef;
74
+ --border-elevated: #eaeaeb;
75
+ --border-primary: #1a7f53;
76
+
77
+ --interactive-bg-default: #ffffff;
78
+ --interactive-bg-primary: #10a363;
79
+ --interactive-fg-primary: #ffffff;
80
+
81
+ --logo-icon-color: #10a363;
82
+ --logo-text-color: #090909;
83
+
84
+ /* Status tag colors */
85
+ --status-success-bg: rgba(16, 163, 99, 0.1);
86
+ --status-success-border: rgba(16, 163, 99, 0.15);
87
+ --status-success-text: #10A363;
88
+ --status-warning-bg: rgba(183, 112, 28, 0.1);
89
+ --status-warning-border: rgba(183, 112, 28, 0.15);
90
+ --status-warning-text: #B7701C;
91
+ --status-error-bg: rgba(194, 53, 57, 0.1);
92
+ --status-error-border: rgba(194, 53, 57, 0.15);
93
+ --status-error-text: #C23539;
94
+ }
95
+
96
+ /* Reset and Base Styles */
97
+ * {
98
+ margin: 0;
99
+ padding: 0;
100
+ box-sizing: border-box;
101
+ }
102
+
103
+ body {
104
+ font-family: 'Geist', sans-serif;
105
+ background-color: var(--bg-default);
106
+ color: var(--fg-default);
107
+ line-height: 1.6;
108
+ margin: 0;
109
+ padding: 0;
110
+ padding-top: 72px; /* Account for fixed header height */
111
+ }
112
+
113
+ /* Layout Components */
114
+ .header {
115
+ position: fixed;
116
+ top: 0;
117
+ left: 0;
118
+ right: 0;
119
+ z-index: 1000;
120
+ background-color: rgba(var(--bg-default-rgb), 0.6);
121
+ backdrop-filter: blur(10px);
122
+ -webkit-backdrop-filter: blur(20px);
123
+ border-bottom: 1px solid var(--border-default);
124
+ }
125
+
126
+ .header-container {
127
+ max-width: 1200px;
128
+ margin: 0 auto;
129
+ padding: 12px 60px;
130
+ width: 100%;
131
+ }
132
+
133
+ .header-content {
134
+ display: flex;
135
+ align-items: center;
136
+ justify-content: space-between;
137
+ gap: 10px;
138
+ }
139
+
140
+ .logo-section {
141
+ display: flex;
142
+ align-items: center;
143
+ gap: 12px;
144
+ flex: 1;
145
+ }
146
+
147
+ .logo-image {
148
+ width: auto;
149
+ }
150
+
151
+ .logo-link {
152
+ display: inline-block;
153
+ text-decoration: none;
154
+ }
155
+
156
+ .logo-divider {
157
+ width: 1px;
158
+ height: 24px;
159
+ background-color: var(--border-elevated);
160
+ margin: 0 8px;
161
+ }
162
+
163
+ .logo-text {
164
+ font-size: 20px;
165
+ font-weight: 550;
166
+ letter-spacing: -0.02em;
167
+ }
168
+
169
+ .logo-text-test {
170
+ color: var(--fg-default);
171
+ }
172
+
173
+ .logo-text-report {
174
+ color: var(--fg-highlighted);
175
+ }
176
+
177
+ /* Theme Toggle Button */
178
+ .theme-toggle {
179
+ background: var(--bg-lifted);
180
+ border: 1px solid var(--border-default);
181
+ border-radius: var(--border-radius-medium);
182
+ padding: 6px;
183
+ cursor: pointer;
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: center;
187
+ width: 36px;
188
+ height: 36px;
189
+ transition: all 0.2s ease;
190
+ position: relative;
191
+ }
192
+
193
+ .theme-toggle:hover {
194
+ background: var(--border-default);
195
+ border-color: var(--border-elevated);
196
+ }
197
+
198
+ .theme-icon {
199
+ transition: all 0.2s ease;
200
+ position: absolute;
201
+ }
202
+
203
+ .sun-icon {
204
+ opacity: 0;
205
+ transform: rotate(180deg);
206
+ }
207
+
208
+ .moon-icon {
209
+ opacity: 1;
210
+ transform: rotate(0deg);
211
+ }
212
+
213
+ /* Light theme toggle states */
214
+ [data-theme="light"] .sun-icon {
215
+ opacity: 1;
216
+ transform: rotate(0deg);
217
+ }
218
+
219
+ [data-theme="light"] .moon-icon {
220
+ opacity: 0;
221
+ transform: rotate(-180deg);
222
+ }
223
+
224
+ .main-content {
225
+ padding: 90px 60px;
226
+ display: flex;
227
+ justify-content: center;
228
+ gap: 120px;
229
+ max-width: 1200px;
230
+ margin: 0 auto;
231
+ width: 100%;
232
+ }
233
+
234
+ .content-section {
235
+ flex: 1;
236
+ max-width: 800px;
237
+ display: flex;
238
+ flex-direction: column;
239
+ gap: 40px;
240
+ }
241
+
242
+ .sidebar {
243
+ position: sticky;
244
+ top: 120px; /* Stick below the fixed header with additional spacing when scrolling */
245
+ display: flex;
246
+ flex-direction: column;
247
+ gap: 10px;
248
+ width: 260px;
249
+ height: fit-content;
250
+ max-height: calc(100vh - 92px); /* Don't exceed viewport height minus header and spacing */
251
+ overflow-y: auto; /* Allow scrolling if content is too long */
252
+ }
253
+
254
+ /* Typography */
255
+ .title-group {
256
+ display: flex;
257
+ flex-direction: column;
258
+ gap: 4px;
259
+ }
260
+
261
+ .title-main {
262
+ font-family: 'Geist', sans-serif;
263
+ font-weight: 550;
264
+ font-size: 36px;
265
+ line-height: 42px;
266
+ letter-spacing: -0.4px;
267
+ color: var(--fg-default);
268
+ margin: 0;
269
+ }
270
+
271
+ .title-subtitle {
272
+ font-family: 'Geist', sans-serif;
273
+ font-weight: 400;
274
+ font-size: 18px;
275
+ line-height: 26px;
276
+ letter-spacing: -0.18px;
277
+ color: var(--fg-secondary);
278
+ margin: 0;
279
+ }
280
+
281
+ .section-subtitle {
282
+ font-family: 'Geist', sans-serif;
283
+ font-weight: 400;
284
+ font-size: 16px;
285
+ line-height: 24px;
286
+ letter-spacing: -0.16px;
287
+ color: var(--fg-secondary);
288
+ margin: 0;
289
+ }
290
+
291
+ .title-section {
292
+ font-family: 'Geist', sans-serif;
293
+ font-weight: 500;
294
+ font-size: 24px;
295
+ line-height: 32px;
296
+ letter-spacing: -0.3px;
297
+ color: var(--fg-default);
298
+ margin: 0;
299
+ }
300
+
301
+ .title-requirement {
302
+ font-family: 'Geist', sans-serif;
303
+ font-weight:480;
304
+ font-size: 18px;
305
+ line-height: 24px;
306
+ letter-spacing: -0.2px;
307
+ color: var(--fg-default);
308
+ margin: 0;
309
+ }
310
+
311
+ .title-requirement::before {
312
+ counter-increment: accordion-counter;
313
+ content: counter(accordion-counter) ". ";
314
+ color: var(--fg-secondary);
315
+ margin-right: 4px;
316
+ }
317
+
318
+ .text-body {
319
+ font-family: 'Geist', sans-serif;
320
+ font-weight: 400;
321
+ font-size: 16px;
322
+ line-height: 24px;
323
+ letter-spacing: -0.16px;
324
+ color: var(--fg-default);
325
+ margin: 0;
326
+ }
327
+
328
+ .text-body-medium {
329
+ font-family: 'Geist', sans-serif;
330
+ font-weight: 400;
331
+ font-size: 16px;
332
+ line-height: 24px;
333
+ letter-spacing: -0.16px;
334
+ color: var(--fg-secondary);
335
+ margin: 0;
336
+ }
337
+
338
+ .text-link {
339
+ color: var(--fg-default);
340
+ text-decoration: underline;
341
+ word-wrap: break-word;
342
+ overflow-wrap: break-word;
343
+ word-break: break-all;
344
+ transition: color 0.2s ease;
345
+ }
346
+
347
+ .text-link:hover {
348
+ color: var(--fg-secondary);
349
+ }
350
+
351
+ /* Metadata Section */
352
+ .metadata-section {
353
+ display: flex;
354
+ flex-direction: column;
355
+ gap: 40px;
356
+ }
357
+
358
+ .metadata-container {
359
+ padding: 0px;
360
+ display: flex;
361
+ flex-direction: column;
362
+ gap: 16px;
363
+ }
364
+
365
+ .metadata-row {
366
+ display: flex;
367
+ gap: 10px;
368
+ align-items: flex-start;
369
+ }
370
+
371
+ .metadata-label {
372
+ width: 200px;
373
+ flex-shrink: 0;
374
+ }
375
+
376
+ .metadata-value {
377
+ flex: 1;
378
+ }
379
+
380
+ /* Divider */
381
+ .divider {
382
+ height: 1px;
383
+ background-color: var(--border-default);
384
+ width: 100%;
385
+ }
386
+
387
+ /* Requirements Section */
388
+ .requirements-section {
389
+ display: flex;
390
+ flex-direction: column;
391
+ gap: 40px;
392
+ }
393
+
394
+ .requirement-wrapper {
395
+ display: flex;
396
+ flex-direction: column;
397
+ }
398
+
399
+ .requirement-description {
400
+ color: var(--fg-secondary);
401
+ }
402
+
403
+ /* Accordion Styles */
404
+ .accordion-container {
405
+ border: 1px solid var(--border-default);
406
+ border-radius: var(--border-radius-large);
407
+ overflow: hidden;
408
+ counter-reset: accordion-counter;
409
+ }
410
+
411
+ .accordion-item {
412
+ border: none;
413
+ border-radius: 0;
414
+ overflow: hidden;
415
+ }
416
+
417
+ .accordion-item:not(:last-child) {
418
+ border-bottom: 1px solid var(--border-default);
419
+ }
420
+
421
+ .accordion-header {
422
+ padding: 16px;
423
+ cursor: pointer;
424
+ display: flex;
425
+ align-items: flex-start;
426
+ justify-content: space-between;
427
+ gap: 16px;
428
+ background-color: var(--bg-lifted);
429
+ transition: background-color 0.2s ease;
430
+ }
431
+
432
+ .requirement-content {
433
+ flex: 1;
434
+ }
435
+
436
+ .requirement-title-row {
437
+ display: flex;
438
+ align-items: center;
439
+ gap: 12px;
440
+ margin-bottom: 4px;
441
+ }
442
+
443
+ .requirement-status-tag {
444
+ display: flex;
445
+ align-items: center;
446
+ gap: 4px;
447
+ padding: 2px 4px 2px 2px;
448
+ border-radius: var(--border-radius-medium);
449
+ font-family: 'Geist', sans-serif;
450
+ font-size: 14px;
451
+ font-weight: 400;
452
+ line-height: 16px;
453
+ letter-spacing: -0.24px;
454
+ flex-shrink: 0;
455
+ }
456
+
457
+ .requirement-description {
458
+ margin: 0;
459
+ }
460
+
461
+ .requirement-status-tag.status-success {
462
+ background-color: var(--status-success-bg);
463
+ border: 1px solid var(--status-success-border);
464
+ color: var(--status-success-text);
465
+ }
466
+
467
+ .requirement-status-tag.status-warning {
468
+ background-color: var(--status-warning-bg);
469
+ border: 1px solid var(--status-warning-border);
470
+ color: var(--status-warning-text);
471
+ }
472
+
473
+ .requirement-status-tag.status-error {
474
+ background-color: var(--status-error-bg);
475
+ border: 1px solid var(--status-error-border);
476
+ color: var(--status-error-text);
477
+ }
478
+
479
+ .accordion-header:hover {
480
+ background-color: var(--bg-elevated);
481
+ }
482
+
483
+ /* Light mode specific hover - darker than bg-lifted */
484
+ [data-theme="light"] .accordion-header:hover {
485
+ background-color: #F0F0F0;
486
+ }
487
+
488
+ .accordion-icon {
489
+ flex-shrink: 0;
490
+ transition: transform 0.3s ease;
491
+ margin-top: 2px;
492
+ }
493
+
494
+ .accordion-item.active .accordion-icon {
495
+ transform: rotate(180deg);
496
+ }
497
+
498
+ .accordion-content {
499
+ max-height: 0;
500
+ overflow: hidden;
501
+ transition: max-height 0.3s ease-out;
502
+ background-color: var(--bg-lifted);
503
+ }
504
+
505
+ .accordion-item.active .accordion-content {
506
+ max-height: 100%; /* Arbitrary large value to allow full expansion */
507
+ transition: max-height 0.5s ease-in;
508
+ }
509
+
510
+ .accordion-content .test-wrapper {
511
+ padding: 16px;
512
+ gap: 16px;
513
+ display: flex;
514
+ flex-direction: column;
515
+ }
516
+
517
+ /* Test Cards */
518
+ .test-wrapper {
519
+ display: flex;
520
+ flex-direction: column;
521
+ gap: 16px;
522
+ }
523
+
524
+ .test-card {
525
+ background-color: var(--bg-lifted);
526
+ border: 1px solid var(--border-elevated);
527
+ border-radius: var(--border-radius-large);
528
+ overflow: hidden;
529
+ }
530
+
531
+ .test-header {
532
+ background-color: var(--bg-elevated);
533
+ border-bottom: 1px solid var(--border-elevated);
534
+ padding: 10px 16px;
535
+ }
536
+
537
+ .test-content {
538
+ padding: 16px;
539
+ display: flex;
540
+ flex-direction: column;
541
+ gap: 16px;
542
+ }
543
+
544
+ .test-field {
545
+ display: flex;
546
+ gap: 10px;
547
+ align-items: flex-start;
548
+ }
549
+
550
+ .test-field-label {
551
+ width: 200px;
552
+ flex-shrink: 0;
553
+ word-wrap: break-word;
554
+ overflow-wrap: break-word;
555
+ }
556
+
557
+ .test-field-value {
558
+ flex: 1;
559
+ word-wrap: break-word;
560
+ overflow-wrap: break-word;
561
+ word-break: break-word;
562
+ min-width: 0;
563
+ }
564
+
565
+ /* Status Components */
566
+ .status-wrapper {
567
+ display: flex;
568
+ align-items: center;
569
+ gap: 4px;
570
+ }
571
+
572
+ .status-icon {
573
+ width: 18px;
574
+ height: 18px;
575
+ }
576
+
577
+ .status-pass {
578
+ color: var(--fg-success);
579
+ }
580
+
581
+ .status-fail {
582
+ color: var(--fg-error);
583
+ }
584
+
585
+ /* Coverage Metrics */
586
+ .coverage-section {
587
+ display: flex;
588
+ flex-direction: column;
589
+ gap: 40px;
590
+ }
591
+
592
+ .coverage-summary {
593
+ background-color: var(--bg-lifted);
594
+ border: 1px solid var(--border-default);
595
+ border-radius: var(--border-radius-large);
596
+ padding: 16px;
597
+ }
598
+
599
+ .coverage-list {
600
+ list-style: disc;
601
+ list-style-position: outside;
602
+ margin-left: 21px;
603
+ color: var(--fg-secondary);
604
+ }
605
+
606
+ .coverage-list li {
607
+ padding-left: 12px;
608
+ margin-bottom: 12px;
609
+ }
610
+
611
+ .coverage-list li:last-child {
612
+ margin-bottom: 0;
613
+ }
614
+
615
+ .coverage-highlight {
616
+ color: var(--fg-default);
617
+ font-weight: 500;
618
+ }
619
+
620
+ /* Data Table */
621
+ .data-table {
622
+ border-radius: var(--border-radius-large);
623
+ overflow: hidden;
624
+ }
625
+
626
+ .table-header {
627
+ background-color: var(--bg-default);
628
+ display: flex;
629
+ border-bottom: 1px solid var(--border-elevated);
630
+ }
631
+
632
+ .table-header-cell {
633
+ padding: 8px 0;
634
+ display: flex;
635
+ align-items: center;
636
+ justify-content: flex-start;
637
+ flex: 1;
638
+ min-width: 100px;
639
+ color: var(--fg-default);
640
+ font-weight: 500;
641
+ font-size: 14px;
642
+ line-height: 20px;
643
+ letter-spacing: -0.14px;
644
+ }
645
+
646
+ .table-header-cell:first-child {
647
+ flex: 3;
648
+ }
649
+
650
+ .table-rows {
651
+ display: flex;
652
+ flex-direction: column;
653
+ }
654
+
655
+ .table-row {
656
+ display: flex;
657
+ border-bottom: 1px solid var(--border-default);
658
+ transition: background-color 0.2s ease;
659
+ }
660
+
661
+ .table-row:last-child {
662
+ border-bottom: none;
663
+ }
664
+
665
+ .table-row:hover {
666
+ background-color: var(--bg-lifted);
667
+ }
668
+
669
+ .table-cell {
670
+ padding: 8px 0;
671
+ display: flex;
672
+ align-items: center;
673
+ justify-content: flex-start;
674
+ flex: 1;
675
+ min-width: 100px;
676
+ background-color: var(--bg-default);
677
+ color: var(--fg-secondary);
678
+ }
679
+
680
+ .table-cell:first-child {
681
+ flex: 3;
682
+ color: var(--fg-default);
683
+ font-weight: 500;
684
+ }
685
+
686
+ .table-cell .text-body {
687
+ color: var(--fg-secondary);
688
+ }
689
+
690
+ .table-cell:first-child .text-body {
691
+ color: var(--fg-default);
692
+ font-weight: 500;
693
+ }
694
+
695
+ .table-header-cell .text-body-medium {
696
+ color: var(--fg-default);
697
+ font-weight: 500;
698
+ }
699
+
700
+ /* Footer */
701
+ .footer {
702
+ background-color: var(--bg-default);
703
+ border-top: 1px solid var(--border-default);
704
+ margin-top: 80px;
705
+ }
706
+
707
+ .footer-container {
708
+ max-width: 1200px;
709
+ margin: 0 auto;
710
+ padding: 60px 60px 60px 60px;
711
+ width: 100%;
712
+ }
713
+
714
+ .footer-content {
715
+ display: flex;
716
+ justify-content: space-between;
717
+ gap: 80px;
718
+ }
719
+
720
+ .footer-brand {
721
+ display: flex;
722
+ flex-direction: column;
723
+ gap: 16px;
724
+ flex-shrink: 0;
725
+ align-items: flex-start;
726
+ }
727
+
728
+ .footer-logo {
729
+ width: auto;
730
+ margin-left: -8px;
731
+ }
732
+
733
+ .footer-copyright {
734
+ font-family: 'Geist', sans-serif;
735
+ font-weight: 400;
736
+ font-size: 14px;
737
+ line-height: 20px;
738
+ color: var(--fg-secondary);
739
+ margin: 0;
740
+ margin-left: -8px;
741
+ }
742
+
743
+ .footer-links {
744
+ display: flex;
745
+ gap: 60px;
746
+ }
747
+
748
+ .footer-column {
749
+ display: flex;
750
+ flex-direction: column;
751
+ gap: 20px;
752
+ min-width: 140px;
753
+ }
754
+
755
+ .footer-column-title {
756
+ font-family: 'Geist', sans-serif;
757
+ font-weight: 400;
758
+ font-size: 16px;
759
+ line-height: 24px;
760
+ color: var(--fg-default);
761
+ margin: 0;
762
+ }
763
+
764
+ .footer-link-list {
765
+ list-style: none;
766
+ margin: 0;
767
+ padding: 0;
768
+ display: flex;
769
+ flex-direction: column;
770
+ gap: 20px;
771
+ }
772
+
773
+ .footer-link {
774
+ font-family: 'Geist', sans-serif;
775
+ font-weight: 400;
776
+ font-size: 16px;
777
+ line-height: 24px;
778
+ color: var(--fg-secondary);
779
+ text-decoration: none;
780
+ transition: color 0.2s ease;
781
+ }
782
+
783
+ .footer-link:hover {
784
+ color: var(--fg-default);
785
+ }
786
+
787
+ /* Footer responsive adjustments for larger screens */
788
+ @media (max-width: 1200px) {
789
+ .footer-content {
790
+ flex-direction: column;
791
+ gap: 40px;
792
+ }
793
+
794
+ .footer-links {
795
+ gap: 40px;
796
+ }
797
+ }
798
+
799
+ @media (max-width: 900px) {
800
+ .footer-content {
801
+ flex-direction: column;
802
+ gap: 30px;
803
+ }
804
+
805
+ .footer-links {
806
+ gap: 30px;
807
+ }
808
+
809
+ .footer-column {
810
+ min-width: 130px;
811
+ }
812
+ }
813
+
814
+ /* References Section */
815
+ .references-section {
816
+ display: flex;
817
+ flex-direction: column;
818
+ gap: 30px;
819
+ }
820
+
821
+ /* Sidebar */
822
+ .sidebar-title {
823
+ padding: 0;
824
+ color: var(--fg-muted);
825
+ font-weight: 400;
826
+ font-size: 14px;
827
+ line-height: 20px;
828
+ letter-spacing: -0.14px;
829
+ display: flex;
830
+ align-items: center;
831
+ gap: 8px;
832
+ }
833
+
834
+ .sidebar-title-icon {
835
+ color: var(--fg-secondary);
836
+ flex-shrink: 0;
837
+ }
838
+
839
+ .sidebar-nav {
840
+ display: flex;
841
+ flex-direction: column;
842
+ gap: 2px;
843
+ position: relative;
844
+ }
845
+
846
+ .sidebar-nav::before {
847
+ content: '';
848
+ position: absolute;
849
+ left: 0;
850
+ top: 0;
851
+ bottom: 0;
852
+ width: 2px;
853
+ background-color: var(--border-default);
854
+ z-index: 0;
855
+ }
856
+
857
+ .sidebar-nav-item {
858
+ padding: 6px 16px;
859
+ color: var(--fg-secondary);
860
+ font-weight: 400;
861
+ font-size: 14px;
862
+ line-height: 20px;
863
+ letter-spacing: -0.14px;
864
+ text-decoration: none;
865
+ display: block;
866
+ cursor: pointer;
867
+ position: relative;
868
+ border-left: 2px solid transparent;
869
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
870
+ z-index: 1;
871
+ }
872
+
873
+ .sidebar-nav-item.active {
874
+ color: var(--fg-highlighted);
875
+ border-left: 2px solid var(--fg-highlighted);
876
+ background-color: transparent;
877
+ font-size: 14.5px;
878
+ font-weight: 400;
879
+ }
880
+
881
+ .sidebar-nav-item:hover:not(.active) {
882
+ color: var(--fg-default);
883
+ }
884
+
885
+ /* Responsive Design */
886
+ @media (max-width: 1024px) {
887
+ .main-content {
888
+ flex-direction: column;
889
+ gap: 30px;
890
+ padding: 40px 20px;
891
+ align-items: center;
892
+ }
893
+
894
+ .content-section {
895
+ width: 100%;
896
+ max-width: 800px;
897
+ }
898
+
899
+ .sidebar {
900
+ order: -1;
901
+ width: 100%;
902
+ max-width: 700px;
903
+ margin: 0 auto;
904
+ }
905
+
906
+ .sidebar-nav {
907
+ flex-direction: row;
908
+ flex-wrap: wrap;
909
+ gap: 8px;
910
+ }
911
+
912
+ .sidebar-nav-item {
913
+ flex: 1;
914
+ min-width: 200px;
915
+ text-align: center;
916
+ }
917
+ }
918
+
919
+ @media (max-width: 1200px) {
920
+ .sidebar {
921
+ display: none;
922
+ }
923
+ }
924
+
925
+ @media (max-width: 768px) {
926
+ .header-container {
927
+ padding: 12px 20px;
928
+ }
929
+
930
+ .main-content {
931
+ padding: 30px 20px;
932
+ }
933
+
934
+ .title-main {
935
+ font-size: 30px;
936
+ line-height: 36px;
937
+ }
938
+
939
+ .title-section {
940
+ font-size: 20px;
941
+ line-height: 28px;
942
+ }
943
+
944
+ .metadata-row {
945
+ flex-direction: column;
946
+ gap: 4px;
947
+ }
948
+
949
+ .metadata-label {
950
+ width: auto;
951
+ }
952
+
953
+ .test-field {
954
+ flex-direction: column;
955
+ gap: 4px;
956
+ }
957
+
958
+ .test-field-label {
959
+ width: auto;
960
+ }
961
+
962
+ .table-header-cell,
963
+ .table-cell {
964
+ padding: 8px 4px;
965
+ font-size: 14px;
966
+ min-width: 80px;
967
+ overflow: hidden;
968
+ text-overflow: ellipsis;
969
+ white-space: nowrap;
970
+ }
971
+
972
+ .table-header-cell:first-child,
973
+ .table-cell:first-child {
974
+ flex: 2;
975
+ padding-right: 8px;
976
+ white-space: normal;
977
+ overflow: visible;
978
+ }
979
+
980
+ .table-header-cell:not(:first-child),
981
+ .table-cell:not(:first-child) {
982
+ flex: 1;
983
+ text-align: center;
984
+ }
985
+
986
+ .footer-container {
987
+ padding: 40px 20px;
988
+ max-width: 100%;
989
+ box-sizing: border-box;
990
+ }
991
+
992
+ .footer-content {
993
+ flex-direction: column;
994
+ gap: 30px;
995
+ }
996
+
997
+ .footer-links {
998
+ flex-wrap: wrap;
999
+ gap: 20px;
1000
+ justify-content: flex-start;
1001
+ }
1002
+
1003
+ .footer-column {
1004
+ min-width: 120px;
1005
+ max-width: 150px;
1006
+ flex: 0 0 auto;
1007
+ }
1008
+ }
1009
+
1010
+ @media (max-width: 480px) {
1011
+ .header-content {
1012
+ flex-direction: column;
1013
+ gap: 12px;
1014
+ align-items: stretch;
1015
+ }
1016
+
1017
+ .logo-section {
1018
+ justify-content: center;
1019
+ }
1020
+
1021
+ .theme-toggle {
1022
+ position: absolute;
1023
+ top: 16px;
1024
+ right: 16px;
1025
+ }
1026
+
1027
+ .open-app-btn {
1028
+ align-self: center;
1029
+ }
1030
+
1031
+ .sidebar-nav {
1032
+ flex-direction: column;
1033
+ }
1034
+
1035
+ .sidebar-nav-item {
1036
+ min-width: auto;
1037
+ text-align: left;
1038
+ }
1039
+ }
1040
+ </style>
1041
+ </head>
1042
+ <body>
1043
+ <!-- Header Section -->
1044
+ <header class="header">
1045
+ <div class="header-container">
1046
+ <div class="header-content">
1047
+ <div class="logo-section">
1048
+ <a href="https://www.testsprite.com/" target="_blank" class="logo-link">
1049
+ <svg class="logo-image" width="28" height="28" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
1050
+ <g clip-path="url(#clip0_header_logo_unified)">
1051
+ <path d="M31.0707 28.7334L16.7289 37.0965C15.8796 37.5918 15.4377 38.4402 15.4049 39.3031L9.70328 35.7937C9.28784 35.5376 9.03518 35.0843 9.03501 34.5962V34.4861C9.88591 32.915 11.1735 31.5302 12.8979 30.5248L23.5198 24.3307L31.0707 28.7334Z" fill="var(--logo-text-color)"/>
1052
+ <path d="M49.0398 9.45185C55.8938 5.45593 64.4987 10.3998 64.499 18.3336L64.5 34.5962C64.5 35.1628 64.4526 35.7228 64.3619 36.2717C64.3178 36.1941 64.2715 36.117 64.2228 36.0409C62.7131 33.6826 59.5772 32.9943 57.2185 34.5035L57.0891 34.5856C57.0261 34.4473 56.9617 34.3094 56.893 34.1732V18.3345C56.893 16.2705 54.6549 14.9843 52.8718 16.0236L41.1393 22.8637L33.5874 18.461L49.0398 9.45185Z" fill="var(--logo-text-color)"/>
1053
+ <path d="M0.5 18.9668C0.500006 11.0956 8.9838 6.14327 15.8375 10.0136L52.6246 30.79C54.4319 31.8107 55.7701 33.2437 56.64 34.874L50.1465 39.0295C49.9702 38.3812 49.5497 37.7892 48.8834 37.4129L12.0973 16.6374C10.3142 15.6304 8.10695 16.9189 8.10695 18.9668V34.7128C8.10702 35.6415 8.58889 36.5041 9.37977 36.9909L15.0659 40.4906C13.5819 40.6738 12.1933 41.5086 11.3547 42.8847C10.6142 44.0998 10.4463 45.5026 10.7733 46.7804L5.39232 43.4689C2.35223 41.5976 0.500048 38.2826 0.5 34.7128V18.9668Z" fill="var(--logo-text-color)"/>
1054
+ <path d="M15.8071 45.4361L27.4135 52.5087C30.882 54.6224 35.252 54.5743 38.6732 52.3847L60.0742 38.688" stroke="#19C379" stroke-width="7.4877" stroke-linecap="round"/>
1055
+ </g>
1056
+ <defs>
1057
+ <clipPath id="clip0_header_logo_unified">
1058
+ <rect x="0.5" width="64" height="64" rx="12" fill="white"/>
1059
+ </clipPath>
1060
+ </defs>
1061
+ </svg>
1062
+ </a>
1063
+ <div class="logo-divider"></div>
1064
+ <span class="logo-text">
1065
+ <span class="logo-text-test">Test</span>
1066
+ <span class="logo-text-report">Report</span>
1067
+ </span>
1068
+ </div>
1069
+
1070
+ <!-- Theme Toggle Button -->
1071
+ <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
1072
+ <svg class="theme-icon sun-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1073
+ <g clip-path="url(#clip0_sun)">
1074
+ <path d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z" stroke="var(--fg-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1075
+ <path d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4" stroke="var(--fg-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1076
+ </g>
1077
+ <defs>
1078
+ <clipPath id="clip0_sun">
1079
+ <rect width="24" height="24" fill="white"/>
1080
+ </clipPath>
1081
+ </defs>
1082
+ </svg>
1083
+ <svg class="theme-icon moon-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1084
+ <g clip-path="url(#clip0_moon)">
1085
+ <path d="M11.9998 2.99994C12.1318 2.99994 12.2628 2.99994 12.3928 2.99994C11.1081 4.19365 10.2824 5.79979 10.0591 7.53916C9.83577 9.27854 10.229 11.0412 11.1705 12.5207C12.112 14.0002 13.5422 15.103 15.2124 15.6374C16.8826 16.1718 18.6873 16.1041 20.3128 15.4459C19.6875 16.9504 18.6656 18.257 17.356 19.2262C16.0464 20.1954 14.4982 20.791 12.8767 20.9493C11.2552 21.1077 9.62104 20.8229 8.14867 20.1253C6.6763 19.4278 5.42089 18.3436 4.51637 16.9885C3.61185 15.6334 3.09213 14.0582 3.01267 12.4309C2.9332 10.8036 3.29696 9.18524 4.06515 7.74846C4.83334 6.31167 5.97714 5.11037 7.37454 4.27268C8.77195 3.43499 10.3705 2.99234 11.9998 2.99194V2.99994Z" stroke="var(--fg-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1086
+ </g>
1087
+ <defs>
1088
+ <clipPath id="clip0_moon">
1089
+ <rect width="24" height="24" fill="white"/>
1090
+ </clipPath>
1091
+ </defs>
1092
+ </svg>
1093
+ </button>
1094
+ </div>
1095
+ </div>
1096
+ </header>
1097
+
1098
+ <!-- Main Content -->
1099
+ <main class="main-content">
1100
+ <div class="content-section">
1101
+ <!-- Metadata Section -->
1102
+ <div id="metadata" class="metadata-section">
1103
+ <!-- Title -->
1104
+ <div class="title-group">
1105
+ <h1 class="title-main">TestSprite AI Test Report</h1>
1106
+ <p class="title-subtitle">Generated automatically by TestSprite AI Agent – providing detailed test results.</p>
1107
+ </div>
1108
+ <div class="metadata-container">
1109
+ <div class="metadata-row">
1110
+ <div class="metadata-label text-body-medium">Project Name</div>
1111
+ <div class="metadata-value text-body">docs</div>
1112
+ </div>
1113
+ <div class="metadata-row">
1114
+ <div class="metadata-label text-body-medium">Date</div>
1115
+ <div class="metadata-value text-body">11/7/2025</div>
1116
+ </div>
1117
+ <div class="metadata-row">
1118
+ <div class="metadata-label text-body-medium">Prepared by</div>
1119
+ <div class="metadata-value text-body">TestSprite AI Agent</div>
1120
+ </div>
1121
+ </div>
1122
+ </div>
1123
+
1124
+ <!-- Divider -->
1125
+ <div class="divider"></div>
1126
+
1127
+ <!-- Coverage & Matching Metrics -->
1128
+ <div id="coverage" class="coverage-section">
1129
+ <div class="title-group">
1130
+ <h2 class="title-section">Coverage & Matching Metrics</h2>
1131
+ <p class="section-subtitle">High-level overview of test outcomes and requirement validation results.</p>
1132
+ </div>
1133
+
1134
+ <div class="coverage-summary">
1135
+ <ul class="coverage-list text-body">
1136
+ <li><span class="coverage-highlight">3/12</span> of tests passed</li>
1137
+ <li><span class="coverage-highlight">Key gaps / risks:</span>
1138
+
1139
+ <h3>Critical Issues</h3>
1140
+ <ol>
1141
+ <li>
1142
+ <p><strong>Markdown Parsing Error (Blocking Multiple Tests)</strong></p>
1143
+ <ul>
1144
+ <li><strong>Issue:</strong> Missing end tag in <code>codeguide-client.md</code> causing Vue compilation errors and 500 server errors</li>
1145
+ <li><strong>Impact:</strong> Blocks 8 out of 12 tests (67% of test suite)</li>
1146
+ <li><strong>Affected Features:</strong> Navigation, dark mode, GitHub links, TOC navigation, SEO verification, accessibility testing, performance metrics</li>
1147
+ <li><strong>Priority:</strong> 🔴 CRITICAL - Must be fixed immediately</li>
1148
+ <li><strong>Recommendation:</strong> Review <code>codeguide-client.md</code> for unclosed HTML tags or malformed markdown syntax. Check for Vue component syntax errors in markdown files.</li>
1149
+ </ul>
1150
+ </li>
1151
+ <li>
1152
+ <p><strong>Copy-to-Clipboard Component Error</strong></p>
1153
+ <ul>
1154
+ <li><strong>Issue:</strong> Vue component error when clicking copy button on code blocks</li>
1155
+ <li><strong>Impact:</strong> Code copy functionality not working despite syntax highlighting working correctly</li>
1156
+ <li><strong>Priority:</strong> 🟡 MEDIUM - Affects user experience but doesn't block core functionality</li>
1157
+ <li><strong>Recommendation:</strong> Investigate VitePress copy button component integration and clipboard API permissions</li>
1158
+ </ul>
1159
+ </li>
1160
+ </ol>
1161
+ <h3>Test Environment Limitations</h3>
1162
+ <ol start="3">
1163
+ <li><strong>Mobile Responsiveness Testing</strong>
1164
+ <ul>
1165
+ <li><strong>Issue:</strong> Test environment cannot programmatically resize viewport</li>
1166
+ <li><strong>Impact:</strong> Mobile responsiveness cannot be verified automatically</li>
1167
+ <li><strong>Priority:</strong> 🟡 MEDIUM - Requires manual testing or different test environment</li>
1168
+ <li><strong>Recommendation:</strong> Perform manual testing on actual mobile devices or use a test environment with viewport manipulation capabilities</li>
1169
+ </ul>
1170
+ </li>
1171
+ </ol>
1172
+ <h3>Summary</h3>
1173
+ <ul>
1174
+ <li><strong>25% test pass rate</strong> indicates significant issues that need immediate attention</li>
1175
+ <li><strong>Primary blocker:</strong> Markdown parsing error in <code>codeguide-client.md</code> affecting majority of functionality</li>
1176
+ <li><strong>Working features:</strong> Homepage loading, search functionality, and development workflow are functioning correctly</li>
1177
+ <li><strong>Next steps:</strong>
1178
+ <ol>
1179
+ <li>Fix markdown parsing error in <code>codeguide-client.md</code></li>
1180
+ <li>Resolve copy-to-clipboard component error</li>
1181
+ <li>Retest all blocked functionality</li>
1182
+ <li>Perform manual mobile responsiveness testing</li>
1183
+ </ol>
1184
+ </li>
1185
+ </ul>
1186
+ <hr>
1187
+
1188
+ </li>
1189
+ </ul>
1190
+ </div>
1191
+
1192
+ <!-- Data Table -->
1193
+ <div class="data-table">
1194
+ <div class="table-header">
1195
+ <div class="table-header-cell">
1196
+ <span class="text-body-medium">Requirement</span>
1197
+ </div>
1198
+ <div class="table-header-cell">
1199
+ <span class="text-body-medium">Total Tests</span>
1200
+ </div>
1201
+ <div class="table-header-cell">
1202
+ <span class="text-body-medium">Passed</span>
1203
+ </div>
1204
+ <div class="table-header-cell">
1205
+ <span class="text-body-medium">Failed</span>
1206
+ </div>
1207
+ </div>
1208
+ <div class="table-rows">
1209
+
1210
+ <div class="table-row">
1211
+ <div class="table-cell"><span class="text-body">Core Page Loading and Display</span></div>
1212
+ <div class="table-cell"><span class="text-body">1</span></div>
1213
+ <div class="table-cell"><span class="text-body">1</span></div>
1214
+ <div class="table-cell"><span class="text-body">0</span></div>
1215
+ </div>
1216
+
1217
+
1218
+ <div class="table-row">
1219
+ <div class="table-cell"><span class="text-body">Navigation Functionality</span></div>
1220
+ <div class="table-cell"><span class="text-body">1</span></div>
1221
+ <div class="table-cell"><span class="text-body">0</span></div>
1222
+ <div class="table-cell"><span class="text-body">1</span></div>
1223
+ </div>
1224
+
1225
+
1226
+ <div class="table-row">
1227
+ <div class="table-cell"><span class="text-body">Search Functionality</span></div>
1228
+ <div class="table-cell"><span class="text-body">1</span></div>
1229
+ <div class="table-cell"><span class="text-body">1</span></div>
1230
+ <div class="table-cell"><span class="text-body">0</span></div>
1231
+ </div>
1232
+
1233
+
1234
+ <div class="table-row">
1235
+ <div class="table-cell"><span class="text-body">Theme Management</span></div>
1236
+ <div class="table-cell"><span class="text-body">1</span></div>
1237
+ <div class="table-cell"><span class="text-body">0</span></div>
1238
+ <div class="table-cell"><span class="text-body">1</span></div>
1239
+ </div>
1240
+
1241
+
1242
+ <div class="table-row">
1243
+ <div class="table-cell"><span class="text-body">Mobile Responsiveness</span></div>
1244
+ <div class="table-cell"><span class="text-body">1</span></div>
1245
+ <div class="table-cell"><span class="text-body">0</span></div>
1246
+ <div class="table-cell"><span class="text-body">1</span></div>
1247
+ </div>
1248
+
1249
+
1250
+ <div class="table-row">
1251
+ <div class="table-cell"><span class="text-body">GitHub Integration</span></div>
1252
+ <div class="table-cell"><span class="text-body">1</span></div>
1253
+ <div class="table-cell"><span class="text-body">0</span></div>
1254
+ <div class="table-cell"><span class="text-body">1</span></div>
1255
+ </div>
1256
+
1257
+
1258
+ <div class="table-row">
1259
+ <div class="table-cell"><span class="text-body">Code Block Features</span></div>
1260
+ <div class="table-cell"><span class="text-body">1</span></div>
1261
+ <div class="table-cell"><span class="text-body">0</span></div>
1262
+ <div class="table-cell"><span class="text-body">1</span></div>
1263
+ </div>
1264
+
1265
+
1266
+ <div class="table-row">
1267
+ <div class="table-cell"><span class="text-body">Table of Contents</span></div>
1268
+ <div class="table-cell"><span class="text-body">1</span></div>
1269
+ <div class="table-cell"><span class="text-body">0</span></div>
1270
+ <div class="table-cell"><span class="text-body">1</span></div>
1271
+ </div>
1272
+
1273
+
1274
+ <div class="table-row">
1275
+ <div class="table-cell"><span class="text-body">SEO Optimization</span></div>
1276
+ <div class="table-cell"><span class="text-body">1</span></div>
1277
+ <div class="table-cell"><span class="text-body">0</span></div>
1278
+ <div class="table-cell"><span class="text-body">1</span></div>
1279
+ </div>
1280
+
1281
+
1282
+ <div class="table-row">
1283
+ <div class="table-cell"><span class="text-body">Accessibility Compliance</span></div>
1284
+ <div class="table-cell"><span class="text-body">1</span></div>
1285
+ <div class="table-cell"><span class="text-body">0</span></div>
1286
+ <div class="table-cell"><span class="text-body">1</span></div>
1287
+ </div>
1288
+
1289
+
1290
+ <div class="table-row">
1291
+ <div class="table-cell"><span class="text-body">Development Workflow</span></div>
1292
+ <div class="table-cell"><span class="text-body">1</span></div>
1293
+ <div class="table-cell"><span class="text-body">1</span></div>
1294
+ <div class="table-cell"><span class="text-body">0</span></div>
1295
+ </div>
1296
+
1297
+
1298
+ <div class="table-row">
1299
+ <div class="table-cell"><span class="text-body">Performance Standards</span></div>
1300
+ <div class="table-cell"><span class="text-body">1</span></div>
1301
+ <div class="table-cell"><span class="text-body">0</span></div>
1302
+ <div class="table-cell"><span class="text-body">1</span></div>
1303
+ </div>
1304
+
1305
+ </div>
1306
+ </div>
1307
+ </div>
1308
+
1309
+ <!-- Divider -->
1310
+ <div class="divider"></div>
1311
+ <!-- Requirements Section -->
1312
+ <div id="requirements" class="requirements-section">
1313
+ <div class="title-group">
1314
+ <h2 class="title-section">Requirement Validation Summary</h2>
1315
+ <p class="section-subtitle">Detailed test results and validation status for each functional requirement.</p>
1316
+ </div>
1317
+
1318
+ <div class="accordion-container">
1319
+
1320
+
1321
+ <div class="requirement-wrapper accordion-item active">
1322
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1323
+ <div class="requirement-content">
1324
+ <div class="requirement-title-row">
1325
+ <h3 class="title-requirement">Core Page Loading and Display</h3>
1326
+ <div class="requirement-status-tag status-success">
1327
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1328
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#10A363" fill-opacity="0.2"/>
1329
+ <path d="M5.59961 8.00002L7.19961 9.60002L10.3996 6.40002" stroke="#19C379" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
1330
+ </svg>
1331
+ <span>1/1</span>
1332
+ </div>
1333
+ </div>
1334
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1335
+ </div>
1336
+ <div class="accordion-icon">
1337
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1338
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1339
+ </svg>
1340
+ </div>
1341
+ </div>
1342
+
1343
+ <div class="accordion-content">
1344
+ <div class="test-wrapper">
1345
+ <div class="test-card">
1346
+ <div class="test-header">
1347
+ <h4 class="text-body-medium">TC001</h4>
1348
+ </div>
1349
+ <div class="test-content">
1350
+ <div class="test-field">
1351
+ <div class="test-field-label text-body-medium">Test Name</div>
1352
+ <div class="test-field-value text-body">Homepage Load and Hero Section Display</div>
1353
+ </div>
1354
+ <div class="test-field">
1355
+ <div class="test-field-label text-body-medium">Test Code</div>
1356
+ <div class="test-field-value text-body">
1357
+ <a href="./TC001_Homepage_Load_and_Hero_Section_Display.py" class="text-link">TC001_Homepage_Load_and_Hero_Section_Display.py</a>
1358
+ </div>
1359
+ </div>
1360
+ <div class="test-field">
1361
+ <div class="test-field-label text-body-medium">Test Error</div>
1362
+ <div class="test-field-value text-body">- **Test Visualization and Result:** https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/811074ee-0ad5-45b2-8f7f-5edafa00ab80</div>
1363
+ </div>
1364
+ <div class="test-field">
1365
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1366
+ <div class="test-field-value text-body">
1367
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/811074ee-0ad5-45b2-8f7f-5edafa00ab80" class="text-link">View Results</a>
1368
+ </div>
1369
+ </div>
1370
+ <div class="test-field">
1371
+ <div class="test-field-label text-body-medium">Status</div>
1372
+ <div class="test-field-value">
1373
+ <div class="status-wrapper">
1374
+ <div class="status-icon">
1375
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1376
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#10A363" fill-opacity="0.2"/>
1377
+ <path d="M5.59961 8.00002L7.19961 9.60002L10.3996 6.40002" stroke="#19C379" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
1378
+ </svg>
1379
+ </div>
1380
+ <span class="text-body status-pass">Pass</span>
1381
+ </div>
1382
+ </div>
1383
+ </div>
1384
+ <div class="test-field">
1385
+ <div class="test-field-label text-body-medium">Severity</div>
1386
+ <div class="test-field-value text-body">HIGH</div>
1387
+ </div>
1388
+ <div class="test-field">
1389
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1390
+ <div class="test-field-value text-body">Homepage loads successfully within acceptable time limits. Hero section displays correctly with all expected elements including quick start guidance and feature highlights. No performance or rendering issues detected on the homepage.</div>
1391
+ </div>
1392
+ </div>
1393
+ </div>
1394
+ </div>
1395
+ </div>
1396
+ </div>
1397
+
1398
+ <div class="requirement-wrapper accordion-item active">
1399
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1400
+ <div class="requirement-content">
1401
+ <div class="requirement-title-row">
1402
+ <h3 class="title-requirement">Navigation Functionality</h3>
1403
+ <div class="requirement-status-tag status-error">
1404
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1405
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1406
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1407
+ </svg>
1408
+ <span>0/1</span>
1409
+ </div>
1410
+ </div>
1411
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1412
+ </div>
1413
+ <div class="accordion-icon">
1414
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1415
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1416
+ </svg>
1417
+ </div>
1418
+ </div>
1419
+
1420
+ <div class="accordion-content">
1421
+ <div class="test-wrapper">
1422
+ <div class="test-card">
1423
+ <div class="test-header">
1424
+ <h4 class="text-body-medium">TC002</h4>
1425
+ </div>
1426
+ <div class="test-content">
1427
+ <div class="test-field">
1428
+ <div class="test-field-label text-body-medium">Test Name</div>
1429
+ <div class="test-field-value text-body">Sidebar Navigation Expand/Collapse Functionality</div>
1430
+ </div>
1431
+ <div class="test-field">
1432
+ <div class="test-field-label text-body-medium">Test Code</div>
1433
+ <div class="test-field-value text-body">
1434
+ <a href="./TC002_Sidebar_Navigation_ExpandCollapse_Functionality.py" class="text-link">TC002_Sidebar_Navigation_ExpandCollapse_Functionality.py</a>
1435
+ </div>
1436
+ </div>
1437
+ <div class="test-field">
1438
+ <div class="test-field-label text-body-medium">Test Error</div>
1439
+ <div class="test-field-value text-body">Testing stopped due to critical page error overlay caused by missing end tag in the code. Sidebar navigation expand/collapse and routing validation cannot proceed until this is fixed.</div>
1440
+ </div>
1441
+ <div class="test-field">
1442
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1443
+ <div class="test-field-value text-body">
1444
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/16510094-984f-48e7-ae86-c01639b46414" class="text-link">View Results</a>
1445
+ </div>
1446
+ </div>
1447
+ <div class="test-field">
1448
+ <div class="test-field-label text-body-medium">Status</div>
1449
+ <div class="test-field-value">
1450
+
1451
+ <div class="status-wrapper">
1452
+ <div class="status-icon">
1453
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1454
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1455
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1456
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1457
+ </svg>
1458
+ </div>
1459
+ <span class="text-body status-fail">Failed</span>
1460
+ </div>
1461
+
1462
+ </div>
1463
+ </div>
1464
+ <div class="test-field">
1465
+ <div class="test-field-label text-body-medium">Severity</div>
1466
+ <div class="test-field-value text-body">HIGH</div>
1467
+ </div>
1468
+ <div class="test-field">
1469
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1470
+ <div class="test-field-value text-body">Critical blocking issue: Missing end tag in markdown file (`codeguide-client.md`) causes Vue compilation errors and prevents navigation testing. The error overlay blocks all page interactions. This is a high-priority issue that must be fixed before navigation functionality can be verified. The 500 error suggests a markdown parsing or Vue component compilation issue.</div>
1471
+ </div>
1472
+ </div>
1473
+ </div>
1474
+ </div>
1475
+ </div>
1476
+ </div>
1477
+
1478
+ <div class="requirement-wrapper accordion-item active">
1479
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1480
+ <div class="requirement-content">
1481
+ <div class="requirement-title-row">
1482
+ <h3 class="title-requirement">Search Functionality</h3>
1483
+ <div class="requirement-status-tag status-success">
1484
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1485
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#10A363" fill-opacity="0.2"/>
1486
+ <path d="M5.59961 8.00002L7.19961 9.60002L10.3996 6.40002" stroke="#19C379" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
1487
+ </svg>
1488
+ <span>1/1</span>
1489
+ </div>
1490
+ </div>
1491
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1492
+ </div>
1493
+ <div class="accordion-icon">
1494
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1495
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1496
+ </svg>
1497
+ </div>
1498
+ </div>
1499
+
1500
+ <div class="accordion-content">
1501
+ <div class="test-wrapper">
1502
+ <div class="test-card">
1503
+ <div class="test-header">
1504
+ <h4 class="text-body-medium">TC003</h4>
1505
+ </div>
1506
+ <div class="test-content">
1507
+ <div class="test-field">
1508
+ <div class="test-field-label text-body-medium">Test Name</div>
1509
+ <div class="test-field-value text-body">Full-Text Local Search with Keyboard Shortcut</div>
1510
+ </div>
1511
+ <div class="test-field">
1512
+ <div class="test-field-label text-body-medium">Test Code</div>
1513
+ <div class="test-field-value text-body">
1514
+ <a href="./TC003_Full_Text_Local_Search_with_Keyboard_Shortcut.py" class="text-link">TC003_Full_Text_Local_Search_with_Keyboard_Shortcut.py</a>
1515
+ </div>
1516
+ </div>
1517
+ <div class="test-field">
1518
+ <div class="test-field-label text-body-medium">Test Error</div>
1519
+ <div class="test-field-value text-body">- **Test Visualization and Result:** https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/6be01331-f41b-4a15-8e53-9d6dc18c3ccc</div>
1520
+ </div>
1521
+ <div class="test-field">
1522
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1523
+ <div class="test-field-value text-body">
1524
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/6be01331-f41b-4a15-8e53-9d6dc18c3ccc" class="text-link">View Results</a>
1525
+ </div>
1526
+ </div>
1527
+ <div class="test-field">
1528
+ <div class="test-field-label text-body-medium">Status</div>
1529
+ <div class="test-field-value">
1530
+ <div class="status-wrapper">
1531
+ <div class="status-icon">
1532
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1533
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#10A363" fill-opacity="0.2"/>
1534
+ <path d="M5.59961 8.00002L7.19961 9.60002L10.3996 6.40002" stroke="#19C379" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
1535
+ </svg>
1536
+ </div>
1537
+ <span class="text-body status-pass">Pass</span>
1538
+ </div>
1539
+ </div>
1540
+ </div>
1541
+ <div class="test-field">
1542
+ <div class="test-field-label text-body-medium">Severity</div>
1543
+ <div class="test-field-value text-body">HIGH</div>
1544
+ </div>
1545
+ <div class="test-field">
1546
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1547
+ <div class="test-field-value text-body">Search functionality works correctly. Keyboard shortcut (Ctrl/Cmd+K) opens search modal, search returns accurate results with proper highlighting, and keyboard navigation through results functions as expected. Search successfully navigates to correct documentation pages when results are selected.</div>
1548
+ </div>
1549
+ </div>
1550
+ </div>
1551
+ </div>
1552
+ </div>
1553
+ </div>
1554
+
1555
+ <div class="requirement-wrapper accordion-item active">
1556
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1557
+ <div class="requirement-content">
1558
+ <div class="requirement-title-row">
1559
+ <h3 class="title-requirement">Theme Management</h3>
1560
+ <div class="requirement-status-tag status-error">
1561
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1562
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1563
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1564
+ </svg>
1565
+ <span>0/1</span>
1566
+ </div>
1567
+ </div>
1568
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1569
+ </div>
1570
+ <div class="accordion-icon">
1571
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1572
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1573
+ </svg>
1574
+ </div>
1575
+ </div>
1576
+
1577
+ <div class="accordion-content">
1578
+ <div class="test-wrapper">
1579
+ <div class="test-card">
1580
+ <div class="test-header">
1581
+ <h4 class="text-body-medium">TC004</h4>
1582
+ </div>
1583
+ <div class="test-content">
1584
+ <div class="test-field">
1585
+ <div class="test-field-label text-body-medium">Test Name</div>
1586
+ <div class="test-field-value text-body">Dark Mode Toggle and Persistence</div>
1587
+ </div>
1588
+ <div class="test-field">
1589
+ <div class="test-field-label text-body-medium">Test Code</div>
1590
+ <div class="test-field-value text-body">
1591
+ <a href="./TC004_Dark_Mode_Toggle_and_Persistence.py" class="text-link">TC004_Dark_Mode_Toggle_and_Persistence.py</a>
1592
+ </div>
1593
+ </div>
1594
+ <div class="test-field">
1595
+ <div class="test-field-label text-body-medium">Test Error</div>
1596
+ <div class="test-field-value text-body">Testing stopped due to persistent error overlay about a missing end tag blocking interaction and preventing verification of dark mode toggle functionality and persistence.</div>
1597
+ </div>
1598
+ <div class="test-field">
1599
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1600
+ <div class="test-field-value text-body">
1601
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/0ba9efa8-be12-4c24-9541-d047774965b6" class="text-link">View Results</a>
1602
+ </div>
1603
+ </div>
1604
+ <div class="test-field">
1605
+ <div class="test-field-label text-body-medium">Status</div>
1606
+ <div class="test-field-value">
1607
+
1608
+ <div class="status-wrapper">
1609
+ <div class="status-icon">
1610
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1611
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1612
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1613
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1614
+ </svg>
1615
+ </div>
1616
+ <span class="text-body status-fail">Failed</span>
1617
+ </div>
1618
+
1619
+ </div>
1620
+ </div>
1621
+ <div class="test-field">
1622
+ <div class="test-field-label text-body-medium">Severity</div>
1623
+ <div class="test-field-value text-body">HIGH</div>
1624
+ </div>
1625
+ <div class="test-field">
1626
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1627
+ <div class="test-field-value text-body">Cannot verify dark mode functionality due to the same blocking error overlay issue. Once the markdown parsing error is resolved, dark mode testing should be retried to verify theme persistence and system preference detection.</div>
1628
+ </div>
1629
+ </div>
1630
+ </div>
1631
+ </div>
1632
+ </div>
1633
+ </div>
1634
+
1635
+ <div class="requirement-wrapper accordion-item active">
1636
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1637
+ <div class="requirement-content">
1638
+ <div class="requirement-title-row">
1639
+ <h3 class="title-requirement">Mobile Responsiveness</h3>
1640
+ <div class="requirement-status-tag status-error">
1641
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1642
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1643
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1644
+ </svg>
1645
+ <span>0/1</span>
1646
+ </div>
1647
+ </div>
1648
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1649
+ </div>
1650
+ <div class="accordion-icon">
1651
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1652
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1653
+ </svg>
1654
+ </div>
1655
+ </div>
1656
+
1657
+ <div class="accordion-content">
1658
+ <div class="test-wrapper">
1659
+ <div class="test-card">
1660
+ <div class="test-header">
1661
+ <h4 class="text-body-medium">TC005</h4>
1662
+ </div>
1663
+ <div class="test-content">
1664
+ <div class="test-field">
1665
+ <div class="test-field-label text-body-medium">Test Name</div>
1666
+ <div class="test-field-value text-body">Mobile Responsiveness and Touch Navigation</div>
1667
+ </div>
1668
+ <div class="test-field">
1669
+ <div class="test-field-label text-body-medium">Test Code</div>
1670
+ <div class="test-field-value text-body">
1671
+ <a href="./TC005_Mobile_Responsiveness_and_Touch_Navigation.py" class="text-link">TC005_Mobile_Responsiveness_and_Touch_Navigation.py</a>
1672
+ </div>
1673
+ </div>
1674
+ <div class="test-field">
1675
+ <div class="test-field-label text-body-medium">Test Error</div>
1676
+ <div class="test-field-value text-body">The documentation site loaded successfully at desktop viewport size. Due to environment limitations, I was unable to programmatically resize the viewport to test responsiveness at mobile screen sizes ranging from 320px to 768px. Consequently, I could not verify the absence of horizontal scrolling or test the touch-friendly navigation menu usability, including opening, expanding, collapsing, and navigating through the mobile menu. Therefore, the task is only partially completed. Further testing in an environment that supports viewport resizing and touch event simulation is recommended to fully verify mobile responsiveness and navigation usability.</div>
1677
+ </div>
1678
+ <div class="test-field">
1679
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1680
+ <div class="test-field-value text-body">
1681
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/ee144c04-e4e1-4266-979a-cf8c49ca1aef" class="text-link">View Results</a>
1682
+ </div>
1683
+ </div>
1684
+ <div class="test-field">
1685
+ <div class="test-field-label text-body-medium">Status</div>
1686
+ <div class="test-field-value">
1687
+
1688
+ <div class="status-wrapper">
1689
+ <div class="status-icon">
1690
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1691
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1692
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1693
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1694
+ </svg>
1695
+ </div>
1696
+ <span class="text-body status-fail">Failed</span>
1697
+ </div>
1698
+
1699
+ </div>
1700
+ </div>
1701
+ <div class="test-field">
1702
+ <div class="test-field-label text-body-medium">Severity</div>
1703
+ <div class="test-field-value text-body">HIGH</div>
1704
+ </div>
1705
+ <div class="test-field">
1706
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1707
+ <div class="test-field-value text-body">Test environment limitations prevented mobile viewport testing. Desktop viewport loads correctly, but mobile responsiveness cannot be verified without viewport resizing capabilities. Manual testing or a different test environment with viewport manipulation support is recommended to complete this validation.</div>
1708
+ </div>
1709
+ </div>
1710
+ </div>
1711
+ </div>
1712
+ </div>
1713
+ </div>
1714
+
1715
+ <div class="requirement-wrapper accordion-item active">
1716
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1717
+ <div class="requirement-content">
1718
+ <div class="requirement-title-row">
1719
+ <h3 class="title-requirement">GitHub Integration</h3>
1720
+ <div class="requirement-status-tag status-error">
1721
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1722
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1723
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1724
+ </svg>
1725
+ <span>0/1</span>
1726
+ </div>
1727
+ </div>
1728
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1729
+ </div>
1730
+ <div class="accordion-icon">
1731
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1732
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1733
+ </svg>
1734
+ </div>
1735
+ </div>
1736
+
1737
+ <div class="accordion-content">
1738
+ <div class="test-wrapper">
1739
+ <div class="test-card">
1740
+ <div class="test-header">
1741
+ <h4 class="text-body-medium">TC006</h4>
1742
+ </div>
1743
+ <div class="test-content">
1744
+ <div class="test-field">
1745
+ <div class="test-field-label text-body-medium">Test Name</div>
1746
+ <div class="test-field-value text-body">GitHub Integration 'Edit this page' Links</div>
1747
+ </div>
1748
+ <div class="test-field">
1749
+ <div class="test-field-label text-body-medium">Test Code</div>
1750
+ <div class="test-field-value text-body">
1751
+ <a href="./TC006_GitHub_Integration_Edit_this_page_Links.py" class="text-link">TC006_GitHub_Integration_Edit_this_page_Links.py</a>
1752
+ </div>
1753
+ </div>
1754
+ <div class="test-field">
1755
+ <div class="test-field-label text-body-medium">Test Error</div>
1756
+ <div class="test-field-value text-body">Testing stopped due to critical page rendering error caused by missing end tag in markdown file. Unable to verify 'Edit this page' links. Issue reported for resolution.</div>
1757
+ </div>
1758
+ <div class="test-field">
1759
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1760
+ <div class="test-field-value text-body">
1761
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/f45e4433-f917-4c90-b7a9-237e1493278a" class="text-link">View Results</a>
1762
+ </div>
1763
+ </div>
1764
+ <div class="test-field">
1765
+ <div class="test-field-label text-body-medium">Status</div>
1766
+ <div class="test-field-value">
1767
+
1768
+ <div class="status-wrapper">
1769
+ <div class="status-icon">
1770
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1771
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1772
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1773
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1774
+ </svg>
1775
+ </div>
1776
+ <span class="text-body status-fail">Failed</span>
1777
+ </div>
1778
+
1779
+ </div>
1780
+ </div>
1781
+ <div class="test-field">
1782
+ <div class="test-field-label text-body-medium">Severity</div>
1783
+ <div class="test-field-value text-body">MEDIUM</div>
1784
+ </div>
1785
+ <div class="test-field">
1786
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1787
+ <div class="test-field-value text-body">Blocked by the same markdown parsing error. Once resolved, GitHub edit links should be verified to ensure they correctly point to the right file paths in the repository and open in edit mode on GitHub.</div>
1788
+ </div>
1789
+ </div>
1790
+ </div>
1791
+ </div>
1792
+ </div>
1793
+ </div>
1794
+
1795
+ <div class="requirement-wrapper accordion-item active">
1796
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1797
+ <div class="requirement-content">
1798
+ <div class="requirement-title-row">
1799
+ <h3 class="title-requirement">Code Block Features</h3>
1800
+ <div class="requirement-status-tag status-error">
1801
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1802
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1803
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1804
+ </svg>
1805
+ <span>0/1</span>
1806
+ </div>
1807
+ </div>
1808
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1809
+ </div>
1810
+ <div class="accordion-icon">
1811
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1812
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1813
+ </svg>
1814
+ </div>
1815
+ </div>
1816
+
1817
+ <div class="accordion-content">
1818
+ <div class="test-wrapper">
1819
+ <div class="test-card">
1820
+ <div class="test-header">
1821
+ <h4 class="text-body-medium">TC007</h4>
1822
+ </div>
1823
+ <div class="test-content">
1824
+ <div class="test-field">
1825
+ <div class="test-field-label text-body-medium">Test Name</div>
1826
+ <div class="test-field-value text-body">Syntax Highlighting and Code Copy Functionality</div>
1827
+ </div>
1828
+ <div class="test-field">
1829
+ <div class="test-field-label text-body-medium">Test Code</div>
1830
+ <div class="test-field-value text-body">
1831
+ <a href="./TC007_Syntax_Highlighting_and_Code_Copy_Functionality.py" class="text-link">TC007_Syntax_Highlighting_and_Code_Copy_Functionality.py</a>
1832
+ </div>
1833
+ </div>
1834
+ <div class="test-field">
1835
+ <div class="test-field-label text-body-medium">Test Error</div>
1836
+ <div class="test-field-value text-body">Testing stopped due to a persistent Vue compilation error overlay triggered by the copy-to-clipboard button. Syntax highlighting and line numbers are confirmed working, but copy functionality cannot be verified. Please fix the Vue component error to proceed.</div>
1837
+ </div>
1838
+ <div class="test-field">
1839
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1840
+ <div class="test-field-value text-body">
1841
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/fee0345b-013b-4ae5-b475-e913f694320c" class="text-link">View Results</a>
1842
+ </div>
1843
+ </div>
1844
+ <div class="test-field">
1845
+ <div class="test-field-label text-body-medium">Status</div>
1846
+ <div class="test-field-value">
1847
+
1848
+ <div class="status-wrapper">
1849
+ <div class="status-icon">
1850
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1851
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1852
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1853
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1854
+ </svg>
1855
+ </div>
1856
+ <span class="text-body status-fail">Failed</span>
1857
+ </div>
1858
+
1859
+ </div>
1860
+ </div>
1861
+ <div class="test-field">
1862
+ <div class="test-field-label text-body-medium">Severity</div>
1863
+ <div class="test-field-value text-body">MEDIUM</div>
1864
+ </div>
1865
+ <div class="test-field">
1866
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1867
+ <div class="test-field-value text-body">Partial success: Syntax highlighting and line numbers work correctly for TypeScript and JavaScript code blocks. However, the copy-to-clipboard button triggers a Vue component error, preventing verification of copy functionality. This suggests an issue with the VitePress copy button component or clipboard API integration.</div>
1868
+ </div>
1869
+ </div>
1870
+ </div>
1871
+ </div>
1872
+ </div>
1873
+ </div>
1874
+
1875
+ <div class="requirement-wrapper accordion-item active">
1876
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1877
+ <div class="requirement-content">
1878
+ <div class="requirement-title-row">
1879
+ <h3 class="title-requirement">Table of Contents</h3>
1880
+ <div class="requirement-status-tag status-error">
1881
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1882
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1883
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1884
+ </svg>
1885
+ <span>0/1</span>
1886
+ </div>
1887
+ </div>
1888
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1889
+ </div>
1890
+ <div class="accordion-icon">
1891
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1892
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1893
+ </svg>
1894
+ </div>
1895
+ </div>
1896
+
1897
+ <div class="accordion-content">
1898
+ <div class="test-wrapper">
1899
+ <div class="test-card">
1900
+ <div class="test-header">
1901
+ <h4 class="text-body-medium">TC008</h4>
1902
+ </div>
1903
+ <div class="test-content">
1904
+ <div class="test-field">
1905
+ <div class="test-field-label text-body-medium">Test Name</div>
1906
+ <div class="test-field-value text-body">Auto-Generated Table of Contents Accuracy</div>
1907
+ </div>
1908
+ <div class="test-field">
1909
+ <div class="test-field-label text-body-medium">Test Code</div>
1910
+ <div class="test-field-value text-body">
1911
+ <a href="./TC008_Auto_Generated_Table_of_Contents_Accuracy.py" class="text-link">TC008_Auto_Generated_Table_of_Contents_Accuracy.py</a>
1912
+ </div>
1913
+ </div>
1914
+ <div class="test-field">
1915
+ <div class="test-field-label text-body-medium">Test Error</div>
1916
+ <div class="test-field-value text-body">The table of contents was verified to be generated correctly based on page headings. However, clicking TOC entries triggers a critical error overlay due to a missing end tag in the source markdown file, preventing navigation testing. The issue has been reported. Stopping further testing.</div>
1917
+ </div>
1918
+ <div class="test-field">
1919
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
1920
+ <div class="test-field-value text-body">
1921
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/9868315d-b626-4e51-a2f2-4d67ce8e80de" class="text-link">View Results</a>
1922
+ </div>
1923
+ </div>
1924
+ <div class="test-field">
1925
+ <div class="test-field-label text-body-medium">Status</div>
1926
+ <div class="test-field-value">
1927
+
1928
+ <div class="status-wrapper">
1929
+ <div class="status-icon">
1930
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1931
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1932
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1933
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1934
+ </svg>
1935
+ </div>
1936
+ <span class="text-body status-fail">Failed</span>
1937
+ </div>
1938
+
1939
+ </div>
1940
+ </div>
1941
+ <div class="test-field">
1942
+ <div class="test-field-label text-body-medium">Severity</div>
1943
+ <div class="test-field-value text-body">MEDIUM</div>
1944
+ </div>
1945
+ <div class="test-field">
1946
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
1947
+ <div class="test-field-value text-body">TOC generation works correctly and accurately reflects page structure. However, clicking TOC links triggers the same markdown parsing error, preventing verification of smooth scrolling to sections. Once the underlying markdown issue is fixed, TOC navigation should function properly.</div>
1948
+ </div>
1949
+ </div>
1950
+ </div>
1951
+ </div>
1952
+ </div>
1953
+ </div>
1954
+
1955
+ <div class="requirement-wrapper accordion-item active">
1956
+ <div class="accordion-header" onclick="toggleAccordion(this)">
1957
+ <div class="requirement-content">
1958
+ <div class="requirement-title-row">
1959
+ <h3 class="title-requirement">SEO Optimization</h3>
1960
+ <div class="requirement-status-tag status-error">
1961
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1962
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
1963
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
1964
+ </svg>
1965
+ <span>0/1</span>
1966
+ </div>
1967
+ </div>
1968
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
1969
+ </div>
1970
+ <div class="accordion-icon">
1971
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1972
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
1973
+ </svg>
1974
+ </div>
1975
+ </div>
1976
+
1977
+ <div class="accordion-content">
1978
+ <div class="test-wrapper">
1979
+ <div class="test-card">
1980
+ <div class="test-header">
1981
+ <h4 class="text-body-medium">TC009</h4>
1982
+ </div>
1983
+ <div class="test-content">
1984
+ <div class="test-field">
1985
+ <div class="test-field-label text-body-medium">Test Name</div>
1986
+ <div class="test-field-value text-body">SEO and Content Discoverability Verification</div>
1987
+ </div>
1988
+ <div class="test-field">
1989
+ <div class="test-field-label text-body-medium">Test Code</div>
1990
+ <div class="test-field-value text-body">
1991
+ <a href="./TC009_SEO_and_Content_Discoverability_Verification.py" class="text-link">TC009_SEO_and_Content_Discoverability_Verification.py</a>
1992
+ </div>
1993
+ </div>
1994
+ <div class="test-field">
1995
+ <div class="test-field-label text-body-medium">Test Error</div>
1996
+ <div class="test-field-value text-body">Stopped SEO inspection due to persistent rendering error caused by missing end tag in the documentation code. Reported the issue for developer fix. No further SEO checks possible until resolved.</div>
1997
+ </div>
1998
+ <div class="test-field">
1999
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
2000
+ <div class="test-field-value text-body">
2001
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/a1c4e159-9730-4c87-b2c2-d5bcb1c35fb9" class="text-link">View Results</a>
2002
+ </div>
2003
+ </div>
2004
+ <div class="test-field">
2005
+ <div class="test-field-label text-body-medium">Status</div>
2006
+ <div class="test-field-value">
2007
+
2008
+ <div class="status-wrapper">
2009
+ <div class="status-icon">
2010
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2011
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
2012
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2013
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2014
+ </svg>
2015
+ </div>
2016
+ <span class="text-body status-fail">Failed</span>
2017
+ </div>
2018
+
2019
+ </div>
2020
+ </div>
2021
+ <div class="test-field">
2022
+ <div class="test-field-label text-body-medium">Severity</div>
2023
+ <div class="test-field-value text-body">MEDIUM</div>
2024
+ </div>
2025
+ <div class="test-field">
2026
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
2027
+ <div class="test-field-value text-body">SEO verification blocked by rendering errors. Once pages load correctly, meta tags, titles, descriptions, and structured markup (schema.org, Open Graph) should be verified to ensure proper search engine discoverability.</div>
2028
+ </div>
2029
+ </div>
2030
+ </div>
2031
+ </div>
2032
+ </div>
2033
+ </div>
2034
+
2035
+ <div class="requirement-wrapper accordion-item active">
2036
+ <div class="accordion-header" onclick="toggleAccordion(this)">
2037
+ <div class="requirement-content">
2038
+ <div class="requirement-title-row">
2039
+ <h3 class="title-requirement">Accessibility Compliance</h3>
2040
+ <div class="requirement-status-tag status-error">
2041
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2042
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
2043
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2044
+ </svg>
2045
+ <span>0/1</span>
2046
+ </div>
2047
+ </div>
2048
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
2049
+ </div>
2050
+ <div class="accordion-icon">
2051
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2052
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
2053
+ </svg>
2054
+ </div>
2055
+ </div>
2056
+
2057
+ <div class="accordion-content">
2058
+ <div class="test-wrapper">
2059
+ <div class="test-card">
2060
+ <div class="test-header">
2061
+ <h4 class="text-body-medium">TC010</h4>
2062
+ </div>
2063
+ <div class="test-content">
2064
+ <div class="test-field">
2065
+ <div class="test-field-label text-body-medium">Test Name</div>
2066
+ <div class="test-field-value text-body">Accessibility Compliance WCAG AA</div>
2067
+ </div>
2068
+ <div class="test-field">
2069
+ <div class="test-field-label text-body-medium">Test Code</div>
2070
+ <div class="test-field-value text-body">
2071
+ <a href="./TC010_Accessibility_Compliance_WCAG_AA.py" class="text-link">TC010_Accessibility_Compliance_WCAG_AA.py</a>
2072
+ </div>
2073
+ </div>
2074
+ <div class="test-field">
2075
+ <div class="test-field-label text-body-medium">Test Error</div>
2076
+ <div class="test-field-value text-body">Accessibility testing cannot proceed due to a critical code error causing an error overlay that blocks interaction. The issue has been reported. Please fix the missing end tag in the code to continue testing.</div>
2077
+ </div>
2078
+ <div class="test-field">
2079
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
2080
+ <div class="test-field-value text-body">
2081
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/ad57cc76-7b61-4fb6-96bc-dafec6c89be4" class="text-link">View Results</a>
2082
+ </div>
2083
+ </div>
2084
+ <div class="test-field">
2085
+ <div class="test-field-label text-body-medium">Status</div>
2086
+ <div class="test-field-value">
2087
+
2088
+ <div class="status-wrapper">
2089
+ <div class="status-icon">
2090
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2091
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
2092
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2093
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2094
+ </svg>
2095
+ </div>
2096
+ <span class="text-body status-fail">Failed</span>
2097
+ </div>
2098
+
2099
+ </div>
2100
+ </div>
2101
+ <div class="test-field">
2102
+ <div class="test-field-label text-body-medium">Severity</div>
2103
+ <div class="test-field-value text-body">HIGH</div>
2104
+ </div>
2105
+ <div class="test-field">
2106
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
2107
+ <div class="test-field-value text-body">Critical accessibility testing blocked by rendering errors. Once resolved, comprehensive accessibility audit should verify keyboard navigation, color contrast ratios, ARIA labels, alt texts, and screen reader compatibility to ensure WCAG AA compliance.</div>
2108
+ </div>
2109
+ </div>
2110
+ </div>
2111
+ </div>
2112
+ </div>
2113
+ </div>
2114
+
2115
+ <div class="requirement-wrapper accordion-item active">
2116
+ <div class="accordion-header" onclick="toggleAccordion(this)">
2117
+ <div class="requirement-content">
2118
+ <div class="requirement-title-row">
2119
+ <h3 class="title-requirement">Development Workflow</h3>
2120
+ <div class="requirement-status-tag status-success">
2121
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2122
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#10A363" fill-opacity="0.2"/>
2123
+ <path d="M5.59961 8.00002L7.19961 9.60002L10.3996 6.40002" stroke="#19C379" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
2124
+ </svg>
2125
+ <span>1/1</span>
2126
+ </div>
2127
+ </div>
2128
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
2129
+ </div>
2130
+ <div class="accordion-icon">
2131
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2132
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
2133
+ </svg>
2134
+ </div>
2135
+ </div>
2136
+
2137
+ <div class="accordion-content">
2138
+ <div class="test-wrapper">
2139
+ <div class="test-card">
2140
+ <div class="test-header">
2141
+ <h4 class="text-body-medium">TC011</h4>
2142
+ </div>
2143
+ <div class="test-content">
2144
+ <div class="test-field">
2145
+ <div class="test-field-label text-body-medium">Test Name</div>
2146
+ <div class="test-field-value text-body">Local Development Workflow Build and Hot Reload</div>
2147
+ </div>
2148
+ <div class="test-field">
2149
+ <div class="test-field-label text-body-medium">Test Code</div>
2150
+ <div class="test-field-value text-body">
2151
+ <a href="./TC011_Local_Development_Workflow_Build_and_Hot_Reload.py" class="text-link">TC011_Local_Development_Workflow_Build_and_Hot_Reload.py</a>
2152
+ </div>
2153
+ </div>
2154
+ <div class="test-field">
2155
+ <div class="test-field-label text-body-medium">Test Error</div>
2156
+ <div class="test-field-value text-body">- **Test Visualization and Result:** https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/0982e8e2-d59f-4b63-b1e5-5e020a2985c8</div>
2157
+ </div>
2158
+ <div class="test-field">
2159
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
2160
+ <div class="test-field-value text-body">
2161
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/0982e8e2-d59f-4b63-b1e5-5e020a2985c8" class="text-link">View Results</a>
2162
+ </div>
2163
+ </div>
2164
+ <div class="test-field">
2165
+ <div class="test-field-label text-body-medium">Status</div>
2166
+ <div class="test-field-value">
2167
+ <div class="status-wrapper">
2168
+ <div class="status-icon">
2169
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2170
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#10A363" fill-opacity="0.2"/>
2171
+ <path d="M5.59961 8.00002L7.19961 9.60002L10.3996 6.40002" stroke="#19C379" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
2172
+ </svg>
2173
+ </div>
2174
+ <span class="text-body status-pass">Pass</span>
2175
+ </div>
2176
+ </div>
2177
+ </div>
2178
+ <div class="test-field">
2179
+ <div class="test-field-label text-body-medium">Severity</div>
2180
+ <div class="test-field-value text-body">HIGH</div>
2181
+ </div>
2182
+ <div class="test-field">
2183
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
2184
+ <div class="test-field-value text-body">Development workflow functions correctly. Development server starts without errors, hot module replacement works as expected with immediate content updates, and production build completes successfully without errors. Static assets are generated correctly.</div>
2185
+ </div>
2186
+ </div>
2187
+ </div>
2188
+ </div>
2189
+ </div>
2190
+ </div>
2191
+
2192
+ <div class="requirement-wrapper accordion-item active">
2193
+ <div class="accordion-header" onclick="toggleAccordion(this)">
2194
+ <div class="requirement-content">
2195
+ <div class="requirement-title-row">
2196
+ <h3 class="title-requirement">Performance Standards</h3>
2197
+ <div class="requirement-status-tag status-error">
2198
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2199
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
2200
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2201
+ </svg>
2202
+ <span>0/1</span>
2203
+ </div>
2204
+ </div>
2205
+ <p class="text-body-medium requirement-description">Proper error handling for API calls and invalid data scenarios.</p>
2206
+ </div>
2207
+ <div class="accordion-icon">
2208
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2209
+ <path d="M11.4276 6C11.9145 6 12.1687 6.61626 11.875 7.01439L11.8316 7.06689L8.40295 10.817C8.30455 10.9246 8.17364 10.9892 8.03476 10.9988C7.89589 11.0083 7.7586 10.9621 7.64865 10.8688L7.59493 10.817L4.16629 7.06689L4.11886 7.00814L4.088 6.96002L4.05714 6.90002L4.04743 6.87752L4.032 6.83564L4.01371 6.76814L4.008 6.73501L4.00229 6.69751L4 6.66189V6.58814L4.00286 6.55188L4.008 6.51438L4.01371 6.48188L4.032 6.41438L4.04743 6.37251L4.08743 6.29L4.12457 6.23375L4.16629 6.18313L4.22 6.13125L4.26401 6.0975L4.31886 6.06375L4.33944 6.05313L4.37772 6.03625L4.43944 6.01625L4.46972 6.01L4.50401 6.00375L4.53658 6.00125L11.4276 6Z" fill="var(--fg-secondary)"/>
2210
+ </svg>
2211
+ </div>
2212
+ </div>
2213
+
2214
+ <div class="accordion-content">
2215
+ <div class="test-wrapper">
2216
+ <div class="test-card">
2217
+ <div class="test-header">
2218
+ <h4 class="text-body-medium">TC012</h4>
2219
+ </div>
2220
+ <div class="test-content">
2221
+ <div class="test-field">
2222
+ <div class="test-field-label text-body-medium">Test Name</div>
2223
+ <div class="test-field-value text-body">Performance Metrics Compliance</div>
2224
+ </div>
2225
+ <div class="test-field">
2226
+ <div class="test-field-label text-body-medium">Test Code</div>
2227
+ <div class="test-field-value text-body">
2228
+ <a href="./TC012_Performance_Metrics_Compliance.py" class="text-link">TC012_Performance_Metrics_Compliance.py</a>
2229
+ </div>
2230
+ </div>
2231
+ <div class="test-field">
2232
+ <div class="test-field-label text-body-medium">Test Error</div>
2233
+ <div class="test-field-value text-body">Stopped testing due to critical content error on documentation page preventing performance measurements. Reported issue for developer fix.</div>
2234
+ </div>
2235
+ <div class="test-field">
2236
+ <div class="test-field-label text-body-medium">Test Visualization and Result</div>
2237
+ <div class="test-field-value text-body">
2238
+ <a href="https://www.testsprite.com/dashboard/mcp/tests/224532f7-2e10-4c90-906f-c7cdc4615042/82c4e517-cc87-4f9f-9401-8bf7fe751c76" class="text-link">View Results</a>
2239
+ </div>
2240
+ </div>
2241
+ <div class="test-field">
2242
+ <div class="test-field-label text-body-medium">Status</div>
2243
+ <div class="test-field-value">
2244
+
2245
+ <div class="status-wrapper">
2246
+ <div class="status-icon">
2247
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2248
+ <circle cx="7.99961" cy="7.99998" r="6.4" fill="#C23539" fill-opacity="0.2"/>
2249
+ <path d="M8 5.59998V7.99698" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2250
+ <path d="M8 10.394V10.3995" stroke="#EF4146" stroke-width="1.38478" stroke-linecap="round" stroke-linejoin="round"/>
2251
+ </svg>
2252
+ </div>
2253
+ <span class="text-body status-fail">Failed</span>
2254
+ </div>
2255
+
2256
+ </div>
2257
+ </div>
2258
+ <div class="test-field">
2259
+ <div class="test-field-label text-body-medium">Severity</div>
2260
+ <div class="test-field-value text-body">HIGH</div>
2261
+ </div>
2262
+ <div class="test-field">
2263
+ <div class="test-field-label text-body-medium">Analysis / Findings</div>
2264
+ <div class="test-field-value text-body">Performance metrics cannot be measured due to page rendering errors. Once pages load correctly, performance should be verified against targets: FCP < 1.5s, CLS < 0.1, and full page load within 2 seconds on standard broadband.</div>
2265
+ </div>
2266
+ </div>
2267
+ </div>
2268
+ </div>
2269
+ </div>
2270
+ </div>
2271
+
2272
+ </div>
2273
+ </div>
2274
+
2275
+ <!-- Divider -->
2276
+ <div class="divider"></div>
2277
+
2278
+ <!-- References Section -->
2279
+ <div id="references" class="references-section">
2280
+ <h2 class="title-section">References</h2>
2281
+ <div class="metadata-container">
2282
+ <div class="metadata-row">
2283
+ <div class="metadata-label text-body-medium">Product Spec</div>
2284
+ <div class="metadata-value text-body">prd.md</div>
2285
+ </div>
2286
+ <div class="metadata-row">
2287
+ <div class="metadata-label text-body-medium">Code Repo</div>
2288
+ <div class="metadata-value text-body">docs</div>
2289
+ </div>
2290
+ <div class="metadata-row">
2291
+ <div class="metadata-label text-body-medium">Test Results</div>
2292
+ <div class="metadata-value text-body">testsprite-mcp-test-report.md</div>
2293
+ </div>
2294
+ </div>
2295
+ </div>
2296
+ </div>
2297
+
2298
+ <!-- Sidebar -->
2299
+ <aside class="sidebar">
2300
+ <div class="sidebar-title">
2301
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sidebar-title-icon">
2302
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
2303
+ <path d="M4 6l16 0" />
2304
+ <path d="M4 12l10 0" />
2305
+ <path d="M4 18l14 0" />
2306
+ </svg>
2307
+ In This Report
2308
+ </div>
2309
+ <nav class="sidebar-nav">
2310
+ <a href="#metadata" class="sidebar-nav-item active">Report Metadata</a>
2311
+ <a href="#coverage" class="sidebar-nav-item">Coverage & Matching Metrics</a>
2312
+ <a href="#requirements" class="sidebar-nav-item">Requirement Validation Summary</a>
2313
+ <a href="#references" class="sidebar-nav-item">References</a>
2314
+ </nav>
2315
+ </aside>
2316
+ </main>
2317
+
2318
+ <!-- Footer -->
2319
+ <footer class="footer">
2320
+ <div class="footer-container">
2321
+ <div class="footer-content">
2322
+ <div class="footer-brand">
2323
+ <a href="https://www.testsprite.com/" target="_blank" class="logo-link">
2324
+ <svg class="footer-logo" height="32" viewBox="0 0 313 64" fill="none" xmlns="http://www.w3.org/2000/svg">
2325
+ <path d="M30.4218 27.7334L16.568 35.8119C15.5541 36.4033 15.037 37.4273 15.0227 38.4581L9.91201 35.3131C9.74859 35.2124 9.60821 35.0839 9.49047 34.9393C10.2246 33.1396 11.5402 31.5349 13.432 30.4319L24.2397 24.1293L30.4218 27.7334Z" fill="var(--logo-text-color)"/>
2326
+ <path d="M48.1752 10.1743C54.4027 6.54349 62.2223 11.0361 62.2223 18.2448V33.8769C62.2222 34.3558 62.1847 34.8296 62.1132 35.2949C60.7357 33.3198 58.0409 32.759 55.9856 34.0428C55.9886 33.988 55.9946 33.9333 55.9947 33.878V18.2448C55.9947 15.8419 53.387 14.3439 51.3112 15.5543L39.4366 22.4772L33.2544 18.8731L48.1752 10.1743Z" fill="var(--logo-text-color)"/>
2327
+ <path d="M1.77783 18.8521C1.77784 11.7005 9.48639 7.20114 15.7135 10.718L51.0783 30.6915C52.8432 31.6885 54.1162 33.1175 54.8971 34.7376L49.5285 38.1724C49.3552 37.3489 48.8511 36.5858 48.015 36.1135L12.6503 16.1411C10.5746 14.9689 8.00544 16.4683 8.00543 18.8521V33.9899C8.00559 35.0709 8.56647 36.0752 9.48706 36.6419L14.858 39.9471C13.6912 40.204 12.6268 40.9179 11.9561 42.0184C11.3708 42.9791 11.1858 44.0711 11.3516 45.101L6.22271 41.9446C3.46075 40.2444 1.77803 37.2332 1.77783 33.9899V18.8521Z" fill="var(--logo-text-color)"/>
2328
+ <path d="M15.9481 44.2971L27.0192 51.0435C30.4065 53.1077 34.6742 53.0607 38.0153 50.9224L58.5033 37.81" stroke="#19C379" stroke-width="6.22759" stroke-linecap="round"/>
2329
+ <path d="M219.332 50.889L225.554 18.889H234.887V21.0781C234.887 21.0917 234.903 21.0995 234.914 21.0913L235.885 20.3626C236.403 19.9745 236.969 19.6562 237.57 19.416C238.44 19.0679 239.369 18.889 240.306 18.889H259.776V12.6668L268.665 10.0001V18.889H273.998L271.776 26.889H265.998L263.854 39.3279C263.802 39.6273 263.776 39.9306 263.776 40.2345V41.5017C263.776 42.1054 264.016 42.6843 264.443 43.1112C264.869 43.5381 265.448 43.7779 266.052 43.7779H269.554L267.776 50.889H261.341C259.497 50.889 257.742 50.1007 256.517 48.7229C255.467 47.5415 254.887 46.0159 254.887 44.4353V43.7779L257.109 26.889H252.665L248.665 50.889H238.887L242.887 26.889H240.087C238.409 26.889 236.742 27.1594 235.151 27.6899C234.977 27.7481 234.814 27.8367 234.67 27.9516L232.665 29.5557L229.109 50.889H219.332Z" fill="var(--logo-text-color)"/>
2330
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M187.776 62L195.332 19.3333H212.985C215.057 19.3333 217.043 20.1562 218.508 21.621C220.155 23.2684 220.981 25.5651 220.761 27.8843L220.473 30.9085C220.306 32.6581 219.817 34.3619 219.031 35.9339L218.25 37.4971C216.915 40.1661 214.978 42.4876 212.59 44.278C211.458 45.1271 210.236 45.8486 208.945 46.4293L205.735 47.874C203.25 48.9921 200.658 49.8534 197.998 50.4444L196.221 62H187.776ZM202.887 26.8889L200.665 42.8889L202.869 41.9705C204.929 41.1123 206.768 39.8006 208.251 38.133L208.606 37.7336C209.235 37.0254 209.769 36.2374 210.192 35.3899L210.682 34.4099C211.109 33.5558 211.332 32.614 211.332 31.659V30.6825C211.332 29.6763 210.932 28.7114 210.221 28C209.509 27.2886 208.544 26.8889 207.538 26.8889H202.887Z" fill="var(--logo-text-color)"/>
2331
+ <path d="M74 16.2223L74.8889 6.889H110.889L109.111 16.6668H96.6666L90.4444 51.3334H78L85.5555 16.2223H74Z" fill="var(--logo-text-color)"/>
2332
+ <path d="M256.667 8.66666C256.667 12.3486 252.793 15.3333 249.111 15.3333C245.429 15.3333 243.333 12.3486 243.333 8.66666C243.333 4.98477 246.763 2 250.444 2C254.126 2 256.667 4.98477 256.667 8.66666Z" fill="var(--logo-text-color)"/>
2333
+ <path d="M312.667 46.0001C312.667 49.682 308.794 52.6667 305.112 52.6667C301.43 52.6667 299.334 49.682 299.334 46.0001C299.334 42.3182 302.763 39.3334 306.445 39.3334C310.127 39.3334 312.667 42.3182 312.667 46.0001Z" fill="var(--logo-text-color)"/>
2334
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M111.509 43.2001L117.625 38.6135C119.346 37.3226 120.869 35.7867 122.145 34.0546L125.184 29.9296C126.002 28.8206 126.443 27.4791 126.443 26.1015C126.443 24.8742 126.093 23.6723 125.434 22.6368L125.336 22.4833C124.081 20.5121 121.935 19.2868 119.6 19.209L113.851 19.0174C111.319 18.933 108.804 19.4547 106.514 20.5392C103.3 22.0616 100.689 24.6175 99.099 27.7984L99.0363 27.9238C97.4951 31.0063 96.97 34.4979 97.5366 37.8973L97.714 38.9613C98.1879 41.8048 99.5384 44.4291 101.577 46.4675C103.025 47.9156 104.776 49.024 106.705 49.7127L107.291 49.922C109.082 50.5618 110.971 50.8889 112.873 50.8889H132.371C134.579 50.8889 136.725 50.1591 138.474 48.8131C140.455 47.2894 141.794 45.0798 142.229 42.6187L142.248 42.5071C142.661 40.1672 142.253 37.7564 141.092 35.6833L136.694 27.8308C136.681 27.8071 136.698 27.7778 136.725 27.7778H148.489C148.58 27.7778 148.649 27.8607 148.631 27.95L146.187 40.5797C146.061 41.2288 145.998 41.8884 145.998 42.5495V44.3045C145.998 45.684 146.499 47.0168 147.407 48.055C148.489 49.291 150.051 50 151.694 50H177.889C180.281 50 182.624 49.3121 184.636 48.0182L185.622 47.3846C187.027 46.4813 188.137 45.1867 188.816 43.6602C189.302 42.5656 189.553 41.3811 189.553 40.1833V39.6597C189.553 37.4212 188.872 35.2357 187.6 33.3936L176.743 17.6692C176.71 17.6211 176.744 17.5556 176.803 17.5556H191.917C192.349 17.5556 192.719 17.2448 192.793 16.819L194.432 7.39403C194.437 7.36237 194.413 7.3334 194.381 7.3334H178.335C175.548 7.3334 172.865 8.39109 170.827 10.2929C168.597 12.374 167.331 15.2873 167.331 18.3374V19.4171C167.331 21.9751 168.059 24.4804 169.429 26.6407L178.815 41.4421C178.846 41.4913 178.811 41.5556 178.752 41.5556H156.83C156.279 41.5556 155.861 41.0595 155.954 40.5165L158.316 26.7387C158.389 26.312 158.759 26 159.192 26H162.991C163.439 26 163.817 25.6662 163.873 25.2214L164.54 19.8881C164.606 19.3575 164.192 18.8889 163.658 18.8889H160.665C160.174 18.8889 159.776 18.491 159.776 18.0001V10.9037C159.776 10.2655 159.123 9.83525 158.537 10.0866L150.981 13.3247C150.654 13.4648 150.442 13.7862 150.442 14.1417V18.8419C150.442 18.8679 150.421 18.8889 150.395 18.8889H135.302C133.319 18.8889 131.407 19.628 129.94 20.9617C128.279 22.4722 127.331 24.6136 127.331 26.8592V29.1231C127.331 30.8751 127.683 32.6092 128.366 34.2227L132.184 43.248C132.201 43.2885 132.172 43.3334 132.128 43.3334H111.554C111.482 43.3334 111.452 43.2428 111.509 43.2001ZM105.999 36.6665L111.447 33.9423C111.961 33.6853 112.442 33.3663 112.878 32.9923L113.735 32.2584C114.749 31.3891 115.332 30.1199 115.332 28.7841V27.8315C115.332 27.2279 115.093 26.6489 114.666 26.2221C114.239 25.7952 113.66 25.5554 113.056 25.5554H111.168C110.399 25.5554 109.641 25.7343 108.954 26.0779C107.907 26.6015 107.079 27.4792 106.618 28.5552L106.478 28.8826C106.162 29.6197 105.999 30.4134 105.999 31.2154V36.6665Z" fill="var(--logo-text-color)"/>
2335
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M296.663 43.7776L294.885 49.9998H287.891C284.904 49.9998 281.971 49.2068 279.391 47.7019L279.12 47.5443C278.373 47.1082 277.669 46.6018 277.017 46.032L276.102 45.2311C275.012 44.277 274.175 43.0675 273.666 41.7109C273.297 40.7264 273.108 39.6835 273.108 38.632V32.5579C273.108 30.2953 273.669 28.0682 274.742 26.076C275.714 24.2706 277.08 22.707 278.738 21.5009L279.293 21.0972C280.492 20.2256 281.847 19.5929 283.284 19.2335C284.2 19.0045 285.141 18.8887 286.085 18.8887H294.749C295.712 18.8887 296.659 19.14 297.495 19.6177C298.676 20.2931 299.568 21.3805 299.998 22.6719L300.266 23.4741C300.529 24.2639 300.663 25.091 300.663 25.9235V26.2072C300.663 27.5357 300.384 28.8493 299.845 30.0633L299.776 30.2183C299.189 31.5393 298.33 32.7219 297.256 33.6889L295.57 35.206C294.818 35.8825 294.019 36.5036 293.177 37.0646L286.452 41.5483C286.446 41.5518 286.446 41.5595 286.451 41.5636C288.168 42.9942 290.331 43.7776 292.566 43.7776H296.663ZM280.662 37.1108L286.11 34.3866C286.624 34.1297 287.105 33.8106 287.541 33.4367L288.397 32.7027C289.412 31.8334 289.995 30.5643 289.995 29.2285V28.2759C289.995 27.6722 289.755 27.0933 289.329 26.6664C288.902 26.2395 288.323 25.9997 287.719 25.9997H285.83C285.062 25.9997 284.304 26.1786 283.617 26.5223C282.57 27.0458 281.742 27.9235 281.281 28.9995L281.141 29.3269C280.825 30.0641 280.662 30.8577 280.662 31.6597V37.1108Z" fill="var(--logo-text-color)"/>
2336
+ </svg>
2337
+
2338
+ </a>
2339
+ <p class="footer-copyright">Copyright © 2025 TestSprite</p>
2340
+ </div>
2341
+
2342
+ <div class="footer-links">
2343
+ <div class="footer-column">
2344
+ <h4 class="footer-column-title">Solutions</h4>
2345
+ <ul class="footer-link-list">
2346
+ <li><a href="https://www.testsprite.com/solutions/mcp" class="footer-link" target="_blank">MCP Server</a></li>
2347
+ <li><a href="https://www.testsprite.com/solutions/backend" class="footer-link" target="_blank">Backend Testing</a></li>
2348
+ <li><a href="https://www.testsprite.com/solutions/frontend" class="footer-link" target="_blank">Frontend Testing</a></li>
2349
+ <li><a href="#" class="footer-link">Data Testing</a></li>
2350
+ <li><a href="#" class="footer-link">AI Agent/Model Testing</a></li>
2351
+ </ul>
2352
+ </div>
2353
+
2354
+ <div class="footer-column">
2355
+ <h4 class="footer-column-title">Connect</h4>
2356
+ <ul class="footer-link-list">
2357
+ <li><a href="https://calendly.com/contact-hmul/schedule" class="footer-link" target="_blank">Contact Us</a></li>
2358
+ <li><a href="https://discord.com/invite/GXWFjCe4an" class="footer-link" target="_blank">Discord</a></li>
2359
+ <li><a href="https://www.linkedin.com/company/testsprite" class="footer-link" target="_blank">Linkedin</a></li>
2360
+ <li><a href="https://x.com/test_sprite?s=21" class="footer-link" target="_blank">Twitter</a></li>
2361
+ </ul>
2362
+ </div>
2363
+
2364
+ <div class="footer-column">
2365
+ <h4 class="footer-column-title">Resources</h4>
2366
+ <ul class="footer-link-list">
2367
+ <li><a href="https://docs.testsprite.com/" class="footer-link" target="_blank">Docs</a></li>
2368
+ <li><a href="https://www.testsprite.com/about" class="footer-link" target="_blank">About</a></li>
2369
+ <li><a href="https://www.testsprite.com/blog" class="footer-link" target="_blank">Blog</a></li>
2370
+ </ul>
2371
+ </div>
2372
+
2373
+ <div class="footer-column">
2374
+ <h4 class="footer-column-title">Legal</h4>
2375
+ <ul class="footer-link-list">
2376
+ <li><a href="https://www.testsprite.com/terms" class="footer-link" target="_blank">Terms & Conditions</a></li>
2377
+ <li><a href="https://www.testsprite.com/privacy" class="footer-link" target="_blank">Privacy Policy</a></li>
2378
+ </ul>
2379
+ </div>
2380
+ </div>
2381
+ </div>
2382
+ </div>
2383
+ </footer>
2384
+
2385
+ <script>
2386
+ // Theme switching functionality
2387
+ function initTheme() {
2388
+ // Check for saved theme preference or default to 'dark'
2389
+ const savedTheme = localStorage.getItem('theme') || 'dark';
2390
+ document.documentElement.setAttribute('data-theme', savedTheme);
2391
+
2392
+ // Add event listener to theme toggle button
2393
+ const themeToggle = document.getElementById('theme-toggle');
2394
+ if (themeToggle) {
2395
+ themeToggle.addEventListener('click', toggleTheme);
2396
+ }
2397
+ }
2398
+
2399
+ function toggleTheme() {
2400
+ const currentTheme = document.documentElement.getAttribute('data-theme');
2401
+ const newTheme = currentTheme === 'light' ? 'dark' : 'light';
2402
+
2403
+ document.documentElement.setAttribute('data-theme', newTheme);
2404
+ localStorage.setItem('theme', newTheme);
2405
+ }
2406
+
2407
+ function toggleAccordion(element) {
2408
+ const accordionItem = element.parentElement;
2409
+
2410
+ // Simply toggle the current accordion item
2411
+ accordionItem.classList.toggle('active');
2412
+ }
2413
+
2414
+ // Scroll-based navigation highlighting
2415
+ function updateActiveNavItem() {
2416
+ const sections = document.querySelectorAll('#metadata, #coverage, #requirements, #references');
2417
+ const navItems = document.querySelectorAll('.sidebar-nav-item');
2418
+
2419
+ if (sections.length === 0) return;
2420
+
2421
+ const scrollTop = window.scrollY;
2422
+ const windowHeight = window.innerHeight;
2423
+ const documentHeight = document.documentElement.scrollHeight;
2424
+ const headerOffset = 150; // Increased offset for better detection
2425
+
2426
+ let currentSection = sections[0].getAttribute('id'); // Default to first section
2427
+
2428
+ // Check if we're near the bottom of the page (more generous threshold)
2429
+ if (scrollTop + windowHeight >= documentHeight - 50) {
2430
+ currentSection = sections[sections.length - 1].getAttribute('id');
2431
+ } else {
2432
+ // Find the section that's currently most visible
2433
+ sections.forEach(section => {
2434
+ const sectionTop = section.offsetTop;
2435
+ const sectionBottom = sectionTop + section.offsetHeight;
2436
+ const viewportTop = scrollTop + headerOffset;
2437
+
2438
+ // If the section is in view, make it active
2439
+ if (viewportTop >= sectionTop && viewportTop < sectionBottom) {
2440
+ currentSection = section.getAttribute('id');
2441
+ }
2442
+ });
2443
+ }
2444
+
2445
+ // Update active state
2446
+ navItems.forEach(item => {
2447
+ item.classList.remove('active');
2448
+ if (item.getAttribute('href') === '#' + currentSection) {
2449
+ item.classList.add('active');
2450
+ }
2451
+ });
2452
+ }
2453
+
2454
+ // Smooth scroll for navigation links
2455
+ function setupSmoothScroll() {
2456
+ const navItems = document.querySelectorAll('.sidebar-nav-item');
2457
+
2458
+ navItems.forEach(item => {
2459
+ item.addEventListener('click', function(e) {
2460
+ e.preventDefault();
2461
+ const targetId = this.getAttribute('href').substring(1);
2462
+ const targetSection = document.getElementById(targetId);
2463
+
2464
+ if (targetSection) {
2465
+ const headerHeight = 72; // Account for fixed header
2466
+ let targetPosition = targetSection.offsetTop - headerHeight;
2467
+
2468
+ // Special handling for metadata section to include the title
2469
+ if (targetId === 'metadata') {
2470
+ const titleElement = document.querySelector('.title-main');
2471
+ if (titleElement) {
2472
+ targetPosition = titleElement.offsetTop - headerHeight - 20; // Extra 20px padding
2473
+ }
2474
+ }
2475
+
2476
+ window.scrollTo({
2477
+ top: targetPosition,
2478
+ behavior: 'smooth'
2479
+ });
2480
+ }
2481
+ });
2482
+ });
2483
+ }
2484
+
2485
+ // Initialize everything
2486
+ document.addEventListener('DOMContentLoaded', function() {
2487
+ // Initialize theme
2488
+ initTheme();
2489
+
2490
+ // Initialize first accordion as open
2491
+ const firstAccordion = document.querySelector('.accordion-item');
2492
+ if (firstAccordion) {
2493
+ firstAccordion.classList.add('active');
2494
+ }
2495
+
2496
+ // Setup navigation
2497
+ setupSmoothScroll();
2498
+
2499
+ // Set initial active state and delay scroll listener to prevent conflicts
2500
+ setTimeout(() => {
2501
+ updateActiveNavItem();
2502
+ window.addEventListener('scroll', updateActiveNavItem);
2503
+ }, 100);
2504
+ });
2505
+ </script>
2506
+ </body>
2507
+ </html>
2508
+