fraim-framework 2.0.166 → 2.0.167
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.
- package/dist/src/ai-hub/catalog.js +20 -27
- package/dist/src/ai-hub/server.js +418 -2
- package/dist/src/config/ai-manager-hiring.js +121 -0
- package/dist/src/config/compat.js +16 -0
- package/dist/src/config/feature-flags.js +25 -0
- package/dist/src/config/persona-capability-bundles.js +273 -0
- package/dist/src/config/persona-hiring.js +270 -0
- package/dist/src/config/portfolio-slug-overrides.js +17 -0
- package/dist/src/config/pricing.js +37 -0
- package/dist/src/config/stripe.js +43 -0
- package/dist/src/core/config-loader.js +9 -5
- package/dist/src/core/fraim-config-schema.generated.js +0 -21
- package/dist/src/core/utils/local-registry-resolver.js +8 -1
- package/package.json +5 -1
- package/public/ai-hub/index.html +81 -0
- package/public/ai-hub/review.css +13 -0
- package/public/ai-hub/script.js +414 -4
- package/public/ai-hub/styles.css +56 -0
- package/public/portfolio/ashley.html +523 -0
- package/public/portfolio/auditya.html +83 -0
- package/public/portfolio/banke.html +83 -0
- package/public/portfolio/beza.html +659 -0
- package/public/portfolio/careena.html +632 -0
- package/public/portfolio/casey.html +568 -0
- package/public/portfolio/celia.html +490 -0
- package/public/portfolio/deidre.html +642 -0
- package/public/portfolio/gautam.html +597 -0
- package/public/portfolio/hari.html +469 -0
- package/public/portfolio/huxley.html +1354 -0
- package/public/portfolio/index.html +741 -0
- package/public/portfolio/maestro.html +518 -0
- package/public/portfolio/mandy.html +590 -0
- package/public/portfolio/mona.html +597 -0
- package/public/portfolio/pam.html +887 -0
- package/public/portfolio/procella.html +107 -0
- package/public/portfolio/qasm.html +569 -0
- package/public/portfolio/ricardo.html +489 -0
- package/public/portfolio/sade.html +560 -0
- package/public/portfolio/sam.html +654 -0
- package/public/portfolio/sechar.html +580 -0
- package/public/portfolio/sreya.html +599 -0
- package/public/portfolio/swen.html +601 -0
|
@@ -0,0 +1,569 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-theme="light">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>QAsm · AI QA Engineer · FRAIM Portfolio</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--accent: #10b981;
|
|
13
|
+
--accent-2: #059669;
|
|
14
|
+
--accent-light: #d1fae5;
|
|
15
|
+
--text: #052e16;
|
|
16
|
+
--text-2: #1a3c2a;
|
|
17
|
+
--muted: #64748b;
|
|
18
|
+
--bg: #f0fdf4;
|
|
19
|
+
--surface: #ffffff;
|
|
20
|
+
--surface-2: #f8fafc;
|
|
21
|
+
--border: #e2e8f0;
|
|
22
|
+
--shadow: 0 4px 24px rgba(5,46,22,.08);
|
|
23
|
+
--shadow-lg: 0 12px 40px rgba(5,46,22,.14);
|
|
24
|
+
--radius: 18px;
|
|
25
|
+
--radius-sm: 10px;
|
|
26
|
+
--green: #10b981;
|
|
27
|
+
--purple: #8b5cf6;
|
|
28
|
+
--amber: #f59e0b;
|
|
29
|
+
--red: #ef4444;
|
|
30
|
+
--code-bg: #0f172a;
|
|
31
|
+
--code-border: #1e293b;
|
|
32
|
+
}
|
|
33
|
+
[data-theme="dark"] {
|
|
34
|
+
--text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
|
|
35
|
+
--bg: #020f09; --surface: #061a10; --surface-2: #0a2318;
|
|
36
|
+
--border: #134a26; --shadow: 0 4px 24px rgba(0,0,0,.35);
|
|
37
|
+
--shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #064e3b;
|
|
38
|
+
--code-bg: #020c07; --code-border: #061a10;
|
|
39
|
+
}
|
|
40
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
41
|
+
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .3s, color .3s; }
|
|
42
|
+
code, pre, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
|
|
43
|
+
|
|
44
|
+
.site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
|
|
45
|
+
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
|
46
|
+
.brand-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
|
|
47
|
+
.brand-name { font-weight: 700; font-size: 15px; color: var(--text); }
|
|
48
|
+
.header-actions { display: flex; align-items: center; gap: 12px; }
|
|
49
|
+
.theme-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 8px; padding: 7px 10px; font-size: 16px; }
|
|
50
|
+
|
|
51
|
+
.hero { max-width: 900px; margin: 56px auto 0; padding: 0 24px; text-align: center; }
|
|
52
|
+
.avatar-ring { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #3b82f6); margin-bottom: 24px; box-shadow: 0 0 0 6px var(--accent-light); overflow: hidden; }
|
|
53
|
+
.avatar-initials { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; font-family: 'JetBrains Mono', monospace; }
|
|
54
|
+
.role-chip { display: inline-block; background: var(--accent-light); color: #10b981; border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 16px; }
|
|
55
|
+
.hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; color: var(--text); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 16px; }
|
|
56
|
+
.hero h1 span { color: var(--accent); }
|
|
57
|
+
.hero p { font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
|
|
58
|
+
|
|
59
|
+
.section-label { max-width: 900px; margin: 64px auto 0; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
|
|
60
|
+
.section-label h2 { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
|
|
61
|
+
.section-divider { flex: 1; height: 1px; background: var(--border); }
|
|
62
|
+
|
|
63
|
+
.cards-grid { max-width: 900px; margin: 24px auto 0; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 20px; }
|
|
64
|
+
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s; }
|
|
65
|
+
.card:hover { box-shadow: var(--shadow-lg); }
|
|
66
|
+
.card-header { display: flex; align-items: flex-start; gap: 16px; padding: 24px; cursor: pointer; user-select: none; }
|
|
67
|
+
.card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
|
68
|
+
.card-meta { flex: 1; min-width: 0; }
|
|
69
|
+
.card-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
|
|
70
|
+
.card-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 6px; }
|
|
71
|
+
.card-subtitle { font-size: 13px; color: var(--muted); }
|
|
72
|
+
.card-toggle { font-size: 22px; color: var(--muted); transition: transform .3s; flex-shrink: 0; align-self: center; }
|
|
73
|
+
.card.open .card-toggle { transform: rotate(90deg); }
|
|
74
|
+
.card-body { display: none; border-top: 1px solid var(--border); padding: 28px; }
|
|
75
|
+
.card.open .card-body { display: block; }
|
|
76
|
+
|
|
77
|
+
.narrative { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
|
|
78
|
+
@media (max-width: 640px) { .narrative { grid-template-columns: 1fr; } }
|
|
79
|
+
.narrative-step { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; }
|
|
80
|
+
.step-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
|
|
81
|
+
.step-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
|
|
82
|
+
.artifact-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
|
|
83
|
+
.artifact-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; }
|
|
84
|
+
.source-ref { margin-top: 16px; font-size: 12px; color: var(--muted); }
|
|
85
|
+
.source-ref a { color: var(--accent); text-decoration: none; }
|
|
86
|
+
.source-ref a:hover { text-decoration: underline; }
|
|
87
|
+
|
|
88
|
+
/* ══ ARTIFACT 1 — Test Run Dashboard ══ */
|
|
89
|
+
.test-dashboard {
|
|
90
|
+
background: #0f172a;
|
|
91
|
+
border: 1px solid #1e293b;
|
|
92
|
+
border-radius: 14px;
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
}
|
|
95
|
+
.test-topbar {
|
|
96
|
+
background: #1e293b; padding: 12px 18px;
|
|
97
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
98
|
+
border-bottom: 1px solid #334155;
|
|
99
|
+
}
|
|
100
|
+
.test-topbar-title { font-size: 13px; font-weight: 600; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; }
|
|
101
|
+
.test-topbar-status { display: flex; align-items: center; gap: 6px; }
|
|
102
|
+
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
103
|
+
.test-stats-row {
|
|
104
|
+
display: flex; gap: 0;
|
|
105
|
+
border-bottom: 1px solid #1e293b;
|
|
106
|
+
}
|
|
107
|
+
.test-stat-tile {
|
|
108
|
+
flex: 1; padding: 16px; text-align: center;
|
|
109
|
+
border-right: 1px solid #1e293b;
|
|
110
|
+
}
|
|
111
|
+
.test-stat-tile:last-child { border-right: none; }
|
|
112
|
+
.ts-num { font-size: 24px; font-weight: 800; margin-bottom: 2px; font-family: 'JetBrains Mono', monospace; }
|
|
113
|
+
.ts-label { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .05em; }
|
|
114
|
+
.test-coverage-row {
|
|
115
|
+
padding: 14px 18px;
|
|
116
|
+
border-bottom: 1px solid #1e293b;
|
|
117
|
+
display: flex; align-items: center; gap: 12px;
|
|
118
|
+
}
|
|
119
|
+
.coverage-label { font-size: 12px; color: #64748b; white-space: nowrap; }
|
|
120
|
+
.coverage-bar-wrap { flex: 1; background: #1e293b; border-radius: 999px; height: 8px; overflow: hidden; }
|
|
121
|
+
.coverage-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981, #3b82f6); border-radius: 999px; }
|
|
122
|
+
.coverage-pct { font-size: 13px; font-weight: 800; color: #4ade80; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
|
|
123
|
+
.test-suite-list { padding: 14px 18px; display: flex; flex-direction: column; gap: 7px; }
|
|
124
|
+
.test-suite-row { display: flex; align-items: center; gap: 10px; }
|
|
125
|
+
.suite-check { font-size: 12px; color: #4ade80; width: 16px; flex-shrink: 0; }
|
|
126
|
+
.suite-name { font-size: 12px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; flex: 1; }
|
|
127
|
+
.suite-count { font-size: 11px; color: #4ade80; white-space: nowrap; }
|
|
128
|
+
.test-footer-row {
|
|
129
|
+
padding: 10px 18px;
|
|
130
|
+
border-top: 1px solid #1e293b;
|
|
131
|
+
display: flex; justify-content: flex-end;
|
|
132
|
+
}
|
|
133
|
+
.test-duration { font-size: 11px; color: #475569; font-family: 'JetBrains Mono', monospace; }
|
|
134
|
+
|
|
135
|
+
/* ══ ARTIFACT 2 — Playwright Validation Report ══ */
|
|
136
|
+
.validation-panel {
|
|
137
|
+
background: var(--surface-2);
|
|
138
|
+
border: 1px solid var(--border);
|
|
139
|
+
border-radius: 14px;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
}
|
|
142
|
+
.validation-topbar {
|
|
143
|
+
background: var(--surface); padding: 12px 18px;
|
|
144
|
+
border-bottom: 1px solid var(--border);
|
|
145
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
146
|
+
}
|
|
147
|
+
.validation-title { font-size: 13px; font-weight: 700; color: var(--text); }
|
|
148
|
+
.validation-badge { font-size: 11px; font-weight: 700; background: #d1fae5; color: #059669; border-radius: 6px; padding: 3px 10px; }
|
|
149
|
+
.validation-table { width: 100%; border-collapse: collapse; }
|
|
150
|
+
.validation-table th {
|
|
151
|
+
font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
|
|
152
|
+
padding: 10px 16px; border-bottom: 1px solid var(--border); text-align: left;
|
|
153
|
+
background: var(--surface);
|
|
154
|
+
}
|
|
155
|
+
.validation-table td {
|
|
156
|
+
font-size: 13px; color: var(--text-2); padding: 10px 16px;
|
|
157
|
+
border-bottom: 1px solid var(--border);
|
|
158
|
+
}
|
|
159
|
+
.validation-table tr:last-child td { border-bottom: none; }
|
|
160
|
+
.pass-badge { display: inline-flex; align-items: center; gap: 4px; background: #d1fae5; color: #059669; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
|
|
161
|
+
.validation-footer {
|
|
162
|
+
padding: 12px 18px;
|
|
163
|
+
border-top: 1px solid var(--border);
|
|
164
|
+
background: var(--surface);
|
|
165
|
+
font-size: 12px; color: var(--muted);
|
|
166
|
+
display: flex; gap: 16px; flex-wrap: wrap;
|
|
167
|
+
}
|
|
168
|
+
.check-item { display: flex; align-items: center; gap: 4px; }
|
|
169
|
+
.check-green { color: #10b981; font-weight: 700; }
|
|
170
|
+
|
|
171
|
+
/* ══ ARTIFACT 3 — UI Polish Checklist ══ */
|
|
172
|
+
.polish-panel {
|
|
173
|
+
background: var(--surface-2);
|
|
174
|
+
border: 1px solid var(--border);
|
|
175
|
+
border-radius: 14px;
|
|
176
|
+
overflow: hidden;
|
|
177
|
+
}
|
|
178
|
+
.polish-header {
|
|
179
|
+
background: var(--surface); padding: 12px 18px;
|
|
180
|
+
border-bottom: 1px solid var(--border);
|
|
181
|
+
font-size: 13px; font-weight: 700; color: var(--text);
|
|
182
|
+
}
|
|
183
|
+
.polish-cols {
|
|
184
|
+
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
|
|
185
|
+
}
|
|
186
|
+
@media (max-width: 480px) { .polish-cols { grid-template-columns: 1fr; } }
|
|
187
|
+
.polish-col {
|
|
188
|
+
padding: 18px;
|
|
189
|
+
border-right: 1px solid var(--border);
|
|
190
|
+
}
|
|
191
|
+
.polish-col:last-child { border-right: none; }
|
|
192
|
+
.polish-col-label {
|
|
193
|
+
font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
|
|
194
|
+
margin-bottom: 12px;
|
|
195
|
+
}
|
|
196
|
+
.polish-check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-2); }
|
|
197
|
+
.polish-check-icon { font-size: 13px; }
|
|
198
|
+
.polish-anno-section {
|
|
199
|
+
padding: 14px 18px;
|
|
200
|
+
border-top: 1px solid var(--border);
|
|
201
|
+
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
|
|
202
|
+
}
|
|
203
|
+
@media (max-width: 480px) { .polish-anno-section { grid-template-columns: 1fr; } }
|
|
204
|
+
.polish-anno-box {
|
|
205
|
+
border-radius: 8px;
|
|
206
|
+
padding: 12px;
|
|
207
|
+
font-size: 12px;
|
|
208
|
+
line-height: 1.5;
|
|
209
|
+
}
|
|
210
|
+
.anno-before {
|
|
211
|
+
border: 2px dashed #ef4444;
|
|
212
|
+
background: #fef2f2;
|
|
213
|
+
color: #7f1d1d;
|
|
214
|
+
}
|
|
215
|
+
.anno-after {
|
|
216
|
+
border: 2px solid #10b981;
|
|
217
|
+
background: #f0fdf4;
|
|
218
|
+
color: #14532d;
|
|
219
|
+
}
|
|
220
|
+
[data-theme="dark"] .anno-before { background: #1c0505; color: #fca5a5; }
|
|
221
|
+
[data-theme="dark"] .anno-after { background: #020f06; color: #6ee7b7; }
|
|
222
|
+
.anno-box-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
|
|
223
|
+
.cta-ghost { border: 2px dashed #ef4444; border-radius: 6px; padding: 6px 12px; text-align: center; color: #ef4444; font-size: 11px; font-weight: 700; margin-top: 6px; opacity: .7; }
|
|
224
|
+
.cta-real { border: 2px solid #10b981; border-radius: 6px; padding: 6px 12px; text-align: center; color: #059669; font-size: 11px; font-weight: 700; margin-top: 6px; background: #d1fae5; }
|
|
225
|
+
|
|
226
|
+
/* Footer */
|
|
227
|
+
.portfolio-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
|
|
228
|
+
.footer-sub { margin-top: 20px; font-size: 12px; color: var(--muted); }
|
|
229
|
+
.footer-sub a { color: var(--accent); text-decoration: none; }
|
|
230
|
+
|
|
231
|
+
@media (max-width: 640px) {
|
|
232
|
+
.site-header { padding: 12px 16px; }
|
|
233
|
+
.hero { margin-top: 36px; }
|
|
234
|
+
.cards-grid { padding: 0 16px 60px; }
|
|
235
|
+
.card-header { padding: 18px; }
|
|
236
|
+
.card-body { padding: 18px; }
|
|
237
|
+
.section-label { margin-top: 40px; padding: 0 16px; }
|
|
238
|
+
}
|
|
239
|
+
</style>
|
|
240
|
+
</head>
|
|
241
|
+
<body>
|
|
242
|
+
|
|
243
|
+
<header class="site-header">
|
|
244
|
+
<a class="brand" href="/">
|
|
245
|
+
<div class="brand-logo">F</div>
|
|
246
|
+
<span class="brand-name">FRAIM</span>
|
|
247
|
+
</a>
|
|
248
|
+
<div class="header-actions">
|
|
249
|
+
<button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
|
|
250
|
+
</div>
|
|
251
|
+
</header>
|
|
252
|
+
|
|
253
|
+
<section class="hero">
|
|
254
|
+
<div class="avatar-ring">
|
|
255
|
+
<img src="https://api.dicebear.com/9.x/notionists/svg?seed=QASM-quality&backgroundColor=a7f3d0&radius=50" width="96" height="96" alt="QASM-quality avatar" style="border-radius:50%;">
|
|
256
|
+
</div>
|
|
257
|
+
<div class="role-chip">AI QA Engineer</div>
|
|
258
|
+
<h1>If it can break,<br>I <span>find it</span></h1>
|
|
259
|
+
<p>If I find it, it gets fixed before you ship.</p>
|
|
260
|
+
</section>
|
|
261
|
+
|
|
262
|
+
<div class="section-label">
|
|
263
|
+
<h2>Selected Work</h2>
|
|
264
|
+
<div class="section-divider"></div>
|
|
265
|
+
</div>
|
|
266
|
+
|
|
267
|
+
<div class="cards-grid">
|
|
268
|
+
|
|
269
|
+
<!-- Card 1: Survey Test Suite -->
|
|
270
|
+
<div class="card open" id="card1">
|
|
271
|
+
<div class="card-header" onclick="toggleCard(1)">
|
|
272
|
+
<div class="card-icon" style="background:#d1fae5;">🧪</div>
|
|
273
|
+
<div class="card-meta">
|
|
274
|
+
<div class="card-tag" style="color:#10b981;">Test Engineering</div>
|
|
275
|
+
<div class="card-title">147 tests. 94.1% branch coverage. Zero prod regressions.</div>
|
|
276
|
+
<div class="card-subtitle">CustomerEQ · feat/survey-builder · apps/web/src/lib/survey-engine/</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="card-toggle">›</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="card-body">
|
|
281
|
+
<div class="narrative">
|
|
282
|
+
<div class="narrative-step">
|
|
283
|
+
<div class="step-label">Context</div>
|
|
284
|
+
<div class="step-text"><em>CustomerEQ's survey builder had shipped 3 bugs in production in 6 months — all discovered by customers, none caught by the 12-test suite that existed.</em></div>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="narrative-step">
|
|
287
|
+
<div class="step-label">Investigation</div>
|
|
288
|
+
<div class="step-text">The suite tested the happy path only. Edge cases — empty survey, single question, 10+ question long surveys, special characters in question text, mobile viewport at < 375px — were untested. The survey engine had grown to 2,400 lines of logic with 0 branch coverage data.</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="narrative-step">
|
|
291
|
+
<div class="step-label">What QAsm Did</div>
|
|
292
|
+
<div class="step-text">QAsm audited the engine, mapped 74 untested branches, and wrote 147 tests covering every conditional: skip logic (if Q3 = "No" then skip Q4-Q6), response validation, question type matrix (NPS, CSAT, free-text, multi-select), submission timeout handling, and mobile layout assertions.</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
<div class="narrative" style="margin-top:-12px;">
|
|
296
|
+
<div class="narrative-step" style="grid-column: 1 / -1;">
|
|
297
|
+
<div class="step-label">The Outcome</div>
|
|
298
|
+
<div class="step-text">94.1% branch coverage reached. The next 3 releases shipped zero survey-related production bugs. The team identified 6 pre-existing bugs discovered during test authoring that had been silently corrupting response data.</div>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<div class="artifact-label">Live Artifact — CustomerEQ Survey Engine Test Run</div>
|
|
303
|
+
|
|
304
|
+
<div class="test-dashboard">
|
|
305
|
+
<div class="test-topbar">
|
|
306
|
+
<span class="test-topbar-title">CustomerEQ Survey Engine — Test Run</span>
|
|
307
|
+
<div class="test-topbar-status">
|
|
308
|
+
<div class="status-dot" style="background:#4ade80;"></div>
|
|
309
|
+
<span style="font-size:12px;font-weight:600;color:#4ade80;">All tests passed</span>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="test-stats-row">
|
|
313
|
+
<div class="test-stat-tile">
|
|
314
|
+
<div class="ts-num" style="color:#4ade80;">147</div>
|
|
315
|
+
<div class="ts-label">Passed</div>
|
|
316
|
+
</div>
|
|
317
|
+
<div class="test-stat-tile">
|
|
318
|
+
<div class="ts-num" style="color:#475569;">0</div>
|
|
319
|
+
<div class="ts-label">Failed</div>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="test-stat-tile">
|
|
322
|
+
<div class="ts-num" style="color:#60a5fa;">6</div>
|
|
323
|
+
<div class="ts-label">Suites</div>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
<div class="test-coverage-row">
|
|
327
|
+
<span class="coverage-label">Branch Coverage:</span>
|
|
328
|
+
<div class="coverage-bar-wrap"><div class="coverage-bar-fill" style="width:94.1%;"></div></div>
|
|
329
|
+
<span class="coverage-pct">94.1%</span>
|
|
330
|
+
</div>
|
|
331
|
+
<div class="test-suite-list">
|
|
332
|
+
<div class="test-suite-row">
|
|
333
|
+
<span class="suite-check">✓</span>
|
|
334
|
+
<span class="suite-name">skip-logic</span>
|
|
335
|
+
<span class="suite-count">24 tests ✓</span>
|
|
336
|
+
</div>
|
|
337
|
+
<div class="test-suite-row">
|
|
338
|
+
<span class="suite-check">✓</span>
|
|
339
|
+
<span class="suite-name">question-types</span>
|
|
340
|
+
<span class="suite-count">31 tests ✓</span>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="test-suite-row">
|
|
343
|
+
<span class="suite-check">✓</span>
|
|
344
|
+
<span class="suite-name">validation</span>
|
|
345
|
+
<span class="suite-count">18 tests ✓</span>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="test-suite-row">
|
|
348
|
+
<span class="suite-check">✓</span>
|
|
349
|
+
<span class="suite-name">mobile-layout</span>
|
|
350
|
+
<span class="suite-count">22 tests ✓</span>
|
|
351
|
+
</div>
|
|
352
|
+
<div class="test-suite-row">
|
|
353
|
+
<span class="suite-check">✓</span>
|
|
354
|
+
<span class="suite-name">submission</span>
|
|
355
|
+
<span class="suite-count">28 tests ✓</span>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="test-suite-row">
|
|
358
|
+
<span class="suite-check">✓</span>
|
|
359
|
+
<span class="suite-name">edge-cases</span>
|
|
360
|
+
<span class="suite-count">24 tests ✓</span>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="test-footer-row">
|
|
364
|
+
<span class="test-duration">Total: 3.2s</span>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<div class="source-ref">
|
|
369
|
+
📎 Source: <a href="#">CustomerEQ · feat/survey-builder · apps/web/src/lib/survey-engine/</a>
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
|
|
374
|
+
<!-- Card 2: Browser Validation Execution -->
|
|
375
|
+
<div class="card" id="card2">
|
|
376
|
+
<div class="card-header" onclick="toggleCard(2)">
|
|
377
|
+
<div class="card-icon" style="background:#ede9fe;">🖥️</div>
|
|
378
|
+
<div class="card-meta">
|
|
379
|
+
<div class="card-tag" style="color:#10b981;">UI Validation</div>
|
|
380
|
+
<div class="card-title">Playwright validation that actually catches things</div>
|
|
381
|
+
<div class="card-subtitle">FRAIM · browser-application-validation · feat/455-portfolio-pages</div>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="card-toggle">›</div>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="card-body">
|
|
386
|
+
<div class="narrative">
|
|
387
|
+
<div class="narrative-step">
|
|
388
|
+
<div class="step-label">Context</div>
|
|
389
|
+
<div class="step-text"><em>A feature had passed all unit tests and TypeScript compilation — but hire CTAs on 2 of 3 portfolio pages were still pointing to <code>href="#"</code> after URL-patching.</em></div>
|
|
390
|
+
</div>
|
|
391
|
+
<div class="narrative-step">
|
|
392
|
+
<div class="step-label">The Gap</div>
|
|
393
|
+
<div class="step-text"><code>grep</code> confirmed the pattern had been replaced. <code>tsc</code> was clean. The CI pipeline was green. The bug was invisible until a Playwright evaluation at runtime revealed that the hero CTA — a multi-line element not matched by the sed pattern — had not been updated.</div>
|
|
394
|
+
</div>
|
|
395
|
+
<div class="narrative-step">
|
|
396
|
+
<div class="step-label">What QAsm Did</div>
|
|
397
|
+
<div class="step-text">QAsm ran systematic browser validation: navigate to each page, evaluate all hire-related <code><a></code> elements, check for <code>href="#"</code> on any CTA with "Hire" text, and assert all three link to <code>/auth/sign-in.html</code>. The check caught 2 remaining <code>href="#"</code> occurrences that static grep had missed.</div>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="narrative" style="margin-top:-12px;">
|
|
401
|
+
<div class="narrative-step" style="grid-column: 1 / -1;">
|
|
402
|
+
<div class="step-label">The Outcome</div>
|
|
403
|
+
<div class="step-text">Fix applied, re-validated, PR unblocked. QAsm's browser validation protocol was added to the standard delivery gate for all UI features going forward.</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<div class="artifact-label">Live Artifact — Portfolio Pages Browser Validation</div>
|
|
408
|
+
|
|
409
|
+
<div class="validation-panel">
|
|
410
|
+
<div class="validation-topbar">
|
|
411
|
+
<span class="validation-title">Portfolio Pages — Browser Validation</span>
|
|
412
|
+
<span class="validation-badge">✅ All Clear</span>
|
|
413
|
+
</div>
|
|
414
|
+
<table class="validation-table">
|
|
415
|
+
<thead>
|
|
416
|
+
<tr>
|
|
417
|
+
<th>Page</th>
|
|
418
|
+
<th>Hire Links</th>
|
|
419
|
+
<th>Bad Links</th>
|
|
420
|
+
<th>Status</th>
|
|
421
|
+
</tr>
|
|
422
|
+
</thead>
|
|
423
|
+
<tbody>
|
|
424
|
+
<tr>
|
|
425
|
+
<td style="font-family:'JetBrains Mono',monospace;font-size:12px;">huxley.html</td>
|
|
426
|
+
<td>3 links</td>
|
|
427
|
+
<td style="color:var(--muted);">0 bad</td>
|
|
428
|
+
<td><span class="pass-badge">✅ PASS</span></td>
|
|
429
|
+
</tr>
|
|
430
|
+
<tr>
|
|
431
|
+
<td style="font-family:'JetBrains Mono',monospace;font-size:12px;">pam.html</td>
|
|
432
|
+
<td>3 links</td>
|
|
433
|
+
<td style="color:var(--muted);">0 bad</td>
|
|
434
|
+
<td><span class="pass-badge">✅ PASS</span></td>
|
|
435
|
+
</tr>
|
|
436
|
+
<tr>
|
|
437
|
+
<td style="font-family:'JetBrains Mono',monospace;font-size:12px;">swen.html</td>
|
|
438
|
+
<td>3 links</td>
|
|
439
|
+
<td style="color:var(--muted);">0 bad</td>
|
|
440
|
+
<td><span class="pass-badge">✅ PASS</span></td>
|
|
441
|
+
</tr>
|
|
442
|
+
<tr>
|
|
443
|
+
<td style="font-family:'JetBrains Mono',monospace;font-size:12px;">index.html</td>
|
|
444
|
+
<td>1 link</td>
|
|
445
|
+
<td style="color:var(--muted);">0 bad</td>
|
|
446
|
+
<td><span class="pass-badge">✅ PASS</span></td>
|
|
447
|
+
</tr>
|
|
448
|
+
</tbody>
|
|
449
|
+
</table>
|
|
450
|
+
<div class="validation-footer">
|
|
451
|
+
<span class="check-item"><span class="check-green">✅</span> Dark mode CSS</span>
|
|
452
|
+
<span class="check-item"><span class="check-green">✅</span> Responsive</span>
|
|
453
|
+
<span class="check-item"><span class="check-green">✅</span> Mobile 375px</span>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
|
|
457
|
+
<div class="source-ref">
|
|
458
|
+
📎 Source: <a href="#">FRAIM · browser-application-validation · tests/test-455-portfolio-pages.ts</a>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
<!-- Card 3: UI Polish Validation -->
|
|
464
|
+
<div class="card" id="card3">
|
|
465
|
+
<div class="card-header" onclick="toggleCard(3)">
|
|
466
|
+
<div class="card-icon" style="background:#fef9c3;">🔍</div>
|
|
467
|
+
<div class="card-meta">
|
|
468
|
+
<div class="card-tag" style="color:#10b981;">Visual QA</div>
|
|
469
|
+
<div class="card-title">P0 bugs caught before the demo</div>
|
|
470
|
+
<div class="card-subtitle">FRAIM · ui-polish-validation · docs/evidence/</div>
|
|
471
|
+
</div>
|
|
472
|
+
<div class="card-toggle">›</div>
|
|
473
|
+
</div>
|
|
474
|
+
<div class="card-body">
|
|
475
|
+
<div class="narrative">
|
|
476
|
+
<div class="narrative-step">
|
|
477
|
+
<div class="step-label">Context</div>
|
|
478
|
+
<div class="step-text"><em>A product launch was 2 hours away. A UI polish check revealed a P0 overflow bug on mobile that would have made the CTA invisible to 38% of visitors.</em></div>
|
|
479
|
+
</div>
|
|
480
|
+
<div class="narrative-step">
|
|
481
|
+
<div class="step-label">The Invisible Bug</div>
|
|
482
|
+
<div class="step-text">The desktop layout looked perfect. CI was green. The Figma mock matched the implementation on a 1280px viewport. Nobody had tested 375px until QAsm ran the polish check as part of the delivery gate.</div>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="narrative-step">
|
|
485
|
+
<div class="step-label">What QAsm Did</div>
|
|
486
|
+
<div class="step-text">QAsm's ui-baseline-validation ran through 4 breakpoints (375px, 640px, 768px, 1280px), checking 6 quality dimensions: no overlap, no clipping, no horizontal scroll, typography hierarchy, CTA discoverability, focus visibility. At 375px, the hero CTA was clipped below a navigation bar with fixed positioning and no z-index — invisible to the user, present in the DOM.</div>
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
<div class="narrative" style="margin-top:-12px;">
|
|
490
|
+
<div class="narrative-step" style="grid-column: 1 / -1;">
|
|
491
|
+
<div class="step-label">The Outcome</div>
|
|
492
|
+
<div class="step-text">The clipping bug was fixed in 12 minutes. The demo proceeded on time. QAsm's polish validation is now a required gate before any customer-facing release.</div>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
|
|
496
|
+
<div class="artifact-label">Live Artifact — UI Polish Checklist (375px vs 1280px)</div>
|
|
497
|
+
|
|
498
|
+
<div class="polish-panel">
|
|
499
|
+
<div class="polish-header">Breakpoint Validation — feat/455-portfolio-pages</div>
|
|
500
|
+
<div class="polish-cols">
|
|
501
|
+
<div class="polish-col">
|
|
502
|
+
<div class="polish-col-label">375px (Mobile)</div>
|
|
503
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> No overlap</div>
|
|
504
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> No horizontal scroll</div>
|
|
505
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> CTA visible</div>
|
|
506
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> Typography hierarchy</div>
|
|
507
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> Focus rings</div>
|
|
508
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> Dark mode</div>
|
|
509
|
+
</div>
|
|
510
|
+
<div class="polish-col">
|
|
511
|
+
<div class="polish-col-label">1280px (Desktop)</div>
|
|
512
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> No overlap</div>
|
|
513
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> No horizontal scroll</div>
|
|
514
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> CTA visible</div>
|
|
515
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> Typography hierarchy</div>
|
|
516
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> Focus rings</div>
|
|
517
|
+
<div class="polish-check-row"><span class="polish-check-icon">✅</span> Dark mode</div>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="polish-anno-section">
|
|
521
|
+
<div class="polish-anno-box anno-before">
|
|
522
|
+
<div class="anno-box-label" style="color:#dc2626;">Before Fix — 375px</div>
|
|
523
|
+
<div style="font-size:12px;margin-bottom:6px;">Nav bar (fixed, no z-index) covered hero section.</div>
|
|
524
|
+
<div class="cta-ghost">CTA was here — below fold</div>
|
|
525
|
+
</div>
|
|
526
|
+
<div class="polish-anno-box anno-after">
|
|
527
|
+
<div class="anno-box-label" style="color:#059669;">After Fix — 375px</div>
|
|
528
|
+
<div style="font-size:12px;margin-bottom:6px;">Added z-index + scroll padding. CTA fully visible.</div>
|
|
529
|
+
<div class="cta-real">Hire QAsm →</div>
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
|
|
534
|
+
<div class="source-ref">
|
|
535
|
+
📎 Source: <a href="#">FRAIM · ui-polish-validation · docs/evidence/455-ui-polish-validation.md</a>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<footer class="portfolio-footer">
|
|
543
|
+
<div class="footer-sub">
|
|
544
|
+
Part of the <a href="/">FRAIM</a> · 18 AI employees available ·
|
|
545
|
+
<a href="/">Back to FRAIM</a>
|
|
546
|
+
</div>
|
|
547
|
+
</footer>
|
|
548
|
+
|
|
549
|
+
<script>
|
|
550
|
+
function toggleTheme() {
|
|
551
|
+
const html = document.documentElement;
|
|
552
|
+
const isDark = html.getAttribute('data-theme') === 'dark';
|
|
553
|
+
html.setAttribute('data-theme', isDark ? 'light' : 'dark');
|
|
554
|
+
document.querySelector('.theme-btn').textContent = isDark ? '☾' : '☀';
|
|
555
|
+
}
|
|
556
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
557
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
558
|
+
document.querySelector('.theme-btn').textContent = '☀';
|
|
559
|
+
}
|
|
560
|
+
function toggleCard(num) {
|
|
561
|
+
const card = document.getElementById('card' + num);
|
|
562
|
+
const isOpen = card.classList.contains('open');
|
|
563
|
+
document.querySelectorAll('.card').forEach(c => c.classList.remove('open'));
|
|
564
|
+
if (!isOpen) { card.classList.add('open'); card.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
|
|
565
|
+
}
|
|
566
|
+
</script>
|
|
567
|
+
|
|
568
|
+
</body>
|
|
569
|
+
</html>
|