cache-overflow-mcp 0.2.0 → 0.3.1
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/.env.example +3 -3
- package/AGENTS.md +235 -0
- package/E2E-TESTING.md +5 -5
- package/LICENSE +21 -0
- package/README.md +13 -6
- package/dist/prompts/index.d.ts +14 -0
- package/dist/prompts/index.d.ts.map +1 -0
- package/dist/prompts/index.js +153 -0
- package/dist/prompts/index.js.map +1 -0
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +16 -2
- package/dist/server.js.map +1 -1
- package/dist/testing/mock-data.js +40 -40
- package/dist/tools/find-solution.d.ts.map +1 -1
- package/dist/tools/find-solution.js +25 -2
- package/dist/tools/find-solution.js.map +1 -1
- package/dist/tools/get-balance.d.ts +3 -0
- package/dist/tools/get-balance.d.ts.map +1 -0
- package/dist/tools/get-balance.js +34 -0
- package/dist/tools/get-balance.js.map +1 -0
- package/dist/tools/submit-feedback.js +1 -1
- package/dist/tools/submit-feedback.js.map +1 -1
- package/dist/tools/submit-verification.js +1 -1
- package/dist/tools/submit-verification.js.map +1 -1
- package/dist/tools/unlock-solution.d.ts.map +1 -1
- package/dist/tools/unlock-solution.js +3 -2
- package/dist/tools/unlock-solution.js.map +1 -1
- package/dist/ui/verification-dialog.js +267 -267
- package/package.json +3 -3
- package/{mock-server.js → scripts/mock-server.js} +1 -1
- package/src/cli.ts +10 -10
- package/src/client.test.ts +116 -116
- package/src/client.ts +76 -76
- package/src/config.ts +9 -9
- package/src/index.ts +3 -3
- package/src/prompts/index.ts +168 -0
- package/src/server.ts +19 -1
- package/src/testing/mock-data.ts +142 -142
- package/src/testing/mock-server.ts +176 -176
- package/src/tools/find-solution.ts +30 -2
- package/src/tools/index.ts +23 -23
- package/src/tools/submit-feedback.ts +1 -1
- package/src/tools/submit-verification.ts +1 -1
- package/src/tools/unlock-solution.ts +4 -2
- package/src/types.ts +39 -39
- package/src/ui/verification-dialog.ts +342 -342
- package/tsconfig.json +20 -20
- package/test-dialog.js +0 -37
|
@@ -1,342 +1,342 @@
|
|
|
1
|
-
import http from 'http';
|
|
2
|
-
import open from 'open';
|
|
3
|
-
|
|
4
|
-
const generateHTML = (title: string, body?: string): string => `
|
|
5
|
-
<!DOCTYPE html>
|
|
6
|
-
<html lang="en">
|
|
7
|
-
<head>
|
|
8
|
-
<meta charset="UTF-8">
|
|
9
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
10
|
-
<title>Verify Solution | cache.overflow</title>
|
|
11
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
12
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
13
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
14
|
-
<style>
|
|
15
|
-
* {
|
|
16
|
-
margin: 0;
|
|
17
|
-
padding: 0;
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
body {
|
|
22
|
-
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
23
|
-
background: #0A0A0B;
|
|
24
|
-
min-height: 100vh;
|
|
25
|
-
display: flex;
|
|
26
|
-
align-items: center;
|
|
27
|
-
justify-content: center;
|
|
28
|
-
padding: 24px;
|
|
29
|
-
color: #fff;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.card {
|
|
33
|
-
background: linear-gradient(145deg, rgba(30, 30, 32, 0.9), rgba(20, 20, 22, 0.95));
|
|
34
|
-
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
35
|
-
border-radius: 20px;
|
|
36
|
-
padding: 48px;
|
|
37
|
-
max-width: 800px;
|
|
38
|
-
width: 100%;
|
|
39
|
-
backdrop-filter: blur(20px);
|
|
40
|
-
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.badge {
|
|
44
|
-
display: inline-flex;
|
|
45
|
-
align-items: center;
|
|
46
|
-
gap: 8px;
|
|
47
|
-
background: rgba(139, 92, 246, 0.15);
|
|
48
|
-
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
49
|
-
color: #A78BFA;
|
|
50
|
-
font-size: 13px;
|
|
51
|
-
font-weight: 500;
|
|
52
|
-
text-transform: uppercase;
|
|
53
|
-
letter-spacing: 0.5px;
|
|
54
|
-
padding: 10px 18px;
|
|
55
|
-
border-radius: 24px;
|
|
56
|
-
margin-bottom: 28px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.badge::before {
|
|
60
|
-
content: "";
|
|
61
|
-
width: 6px;
|
|
62
|
-
height: 6px;
|
|
63
|
-
background: #8B5CF6;
|
|
64
|
-
border-radius: 50%;
|
|
65
|
-
animation: pulse 2s ease-in-out infinite;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@keyframes pulse {
|
|
69
|
-
0%, 100% { opacity: 1; transform: scale(1); }
|
|
70
|
-
50% { opacity: 0.5; transform: scale(1.2); }
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
h1 {
|
|
74
|
-
font-size: 32px;
|
|
75
|
-
font-weight: 600;
|
|
76
|
-
color: #fff;
|
|
77
|
-
margin-bottom: 12px;
|
|
78
|
-
letter-spacing: -0.5px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.subtitle {
|
|
82
|
-
font-size: 18px;
|
|
83
|
-
color: rgba(255, 255, 255, 0.5);
|
|
84
|
-
margin-bottom: 32px;
|
|
85
|
-
line-height: 1.5;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.solution-card {
|
|
89
|
-
background: rgba(255, 255, 255, 0.03);
|
|
90
|
-
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
91
|
-
border-radius: 16px;
|
|
92
|
-
padding: 28px;
|
|
93
|
-
margin-bottom: 36px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.solution-title {
|
|
97
|
-
font-size: 20px;
|
|
98
|
-
font-weight: 500;
|
|
99
|
-
color: #fff;
|
|
100
|
-
margin-bottom: 16px;
|
|
101
|
-
line-height: 1.4;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.solution-body {
|
|
105
|
-
font-size: 16px;
|
|
106
|
-
line-height: 1.8;
|
|
107
|
-
color: rgba(255, 255, 255, 0.6);
|
|
108
|
-
max-height: 280px;
|
|
109
|
-
overflow-y: auto;
|
|
110
|
-
white-space: pre-wrap;
|
|
111
|
-
word-wrap: break-word;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.solution-body::-webkit-scrollbar {
|
|
115
|
-
width: 4px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.solution-body::-webkit-scrollbar-track {
|
|
119
|
-
background: transparent;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.solution-body::-webkit-scrollbar-thumb {
|
|
123
|
-
background: rgba(255, 255, 255, 0.1);
|
|
124
|
-
border-radius: 2px;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.buttons {
|
|
128
|
-
display: flex;
|
|
129
|
-
gap: 16px;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.btn {
|
|
133
|
-
flex: 1;
|
|
134
|
-
padding: 22px 36px;
|
|
135
|
-
border: none;
|
|
136
|
-
border-radius: 14px;
|
|
137
|
-
font-family: inherit;
|
|
138
|
-
font-size: 20px;
|
|
139
|
-
font-weight: 600;
|
|
140
|
-
cursor: pointer;
|
|
141
|
-
transition: all 0.2s ease;
|
|
142
|
-
position: relative;
|
|
143
|
-
overflow: hidden;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.btn-safe {
|
|
147
|
-
background: linear-gradient(135deg, #00FF41 0%, #00CC33 100%);
|
|
148
|
-
color: #000;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.btn-safe:hover {
|
|
152
|
-
transform: translateY(-2px);
|
|
153
|
-
box-shadow: 0 8px 24px rgba(0, 255, 65, 0.35);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.btn-safe:active {
|
|
157
|
-
transform: translateY(0);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.btn-unsafe {
|
|
161
|
-
background: linear-gradient(135deg, #FF4444 0%, #CC2233 100%);
|
|
162
|
-
color: #fff;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.btn-unsafe:hover {
|
|
166
|
-
transform: translateY(-2px);
|
|
167
|
-
box-shadow: 0 8px 24px rgba(255, 51, 51, 0.35);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.btn-unsafe:active {
|
|
171
|
-
transform: translateY(0);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.hint {
|
|
175
|
-
text-align: center;
|
|
176
|
-
margin-top: 28px;
|
|
177
|
-
font-size: 15px;
|
|
178
|
-
color: rgba(255, 255, 255, 0.3);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.hint kbd {
|
|
182
|
-
background: rgba(255, 255, 255, 0.1);
|
|
183
|
-
padding: 4px 10px;
|
|
184
|
-
border-radius: 6px;
|
|
185
|
-
font-family: inherit;
|
|
186
|
-
font-size: 14px;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.completed {
|
|
190
|
-
text-align: center;
|
|
191
|
-
padding: 60px 20px;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.completed-icon {
|
|
195
|
-
width: 88px;
|
|
196
|
-
height: 88px;
|
|
197
|
-
border-radius: 50%;
|
|
198
|
-
display: flex;
|
|
199
|
-
align-items: center;
|
|
200
|
-
justify-content: center;
|
|
201
|
-
margin: 0 auto 28px;
|
|
202
|
-
font-size: 40px;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.completed-icon.safe {
|
|
206
|
-
background: linear-gradient(135deg, rgba(0, 255, 65, 0.2), rgba(0, 204, 51, 0.1));
|
|
207
|
-
border: 2px solid rgba(0, 255, 65, 0.5);
|
|
208
|
-
box-shadow: 0 0 32px rgba(0, 255, 65, 0.2);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.completed-icon.unsafe {
|
|
212
|
-
background: linear-gradient(135deg, rgba(255, 68, 68, 0.2), rgba(204, 34, 51, 0.1));
|
|
213
|
-
border: 2px solid rgba(255, 68, 68, 0.5);
|
|
214
|
-
box-shadow: 0 0 32px rgba(255, 68, 68, 0.2);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.completed h2 {
|
|
218
|
-
font-size: 28px;
|
|
219
|
-
font-weight: 600;
|
|
220
|
-
margin-bottom: 12px;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.completed p {
|
|
224
|
-
font-size: 18px;
|
|
225
|
-
color: rgba(255, 255, 255, 0.5);
|
|
226
|
-
}
|
|
227
|
-
</style>
|
|
228
|
-
</head>
|
|
229
|
-
<body>
|
|
230
|
-
<div class="card" id="main-card">
|
|
231
|
-
<div class="badge">Verification Required</div>
|
|
232
|
-
|
|
233
|
-
<h1>Is this solution safe?</h1>
|
|
234
|
-
<p class="subtitle">Review the code below and verify it's safe to use</p>
|
|
235
|
-
|
|
236
|
-
<div class="solution-card">
|
|
237
|
-
<div class="solution-title">${escapeHtml(title)}</div>
|
|
238
|
-
<div class="solution-body">${body ? escapeHtml(body) : 'Solution body not available.\nUnlock to view full content.'}</div>
|
|
239
|
-
</div>
|
|
240
|
-
|
|
241
|
-
<div class="buttons">
|
|
242
|
-
<button class="btn btn-safe" onclick="submit('safe')">Safe</button>
|
|
243
|
-
<button class="btn btn-unsafe" onclick="submit('unsafe')">Unsafe</button>
|
|
244
|
-
</div>
|
|
245
|
-
|
|
246
|
-
<div class="hint">
|
|
247
|
-
Press <kbd>S</kbd> for Safe or <kbd>U</kbd> for Unsafe
|
|
248
|
-
</div>
|
|
249
|
-
</div>
|
|
250
|
-
|
|
251
|
-
<script>
|
|
252
|
-
function submit(result) {
|
|
253
|
-
const isSafe = result === 'safe';
|
|
254
|
-
document.getElementById('main-card').innerHTML = \`
|
|
255
|
-
<div class="completed">
|
|
256
|
-
<div class="completed-icon \${result}">\${isSafe ? '✓' : '✕'}</div>
|
|
257
|
-
<h2>\${isSafe ? 'Marked as Safe' : 'Marked as Unsafe'}</h2>
|
|
258
|
-
<p>You can close this tab now</p>
|
|
259
|
-
</div>
|
|
260
|
-
\`;
|
|
261
|
-
fetch('/result?value=' + result).catch(() => {});
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
document.addEventListener('keydown', (e) => {
|
|
265
|
-
if (e.key === 's' || e.key === 'S') submit('safe');
|
|
266
|
-
if (e.key === 'u' || e.key === 'U') submit('unsafe');
|
|
267
|
-
});
|
|
268
|
-
</script>
|
|
269
|
-
</body>
|
|
270
|
-
</html>
|
|
271
|
-
`;
|
|
272
|
-
|
|
273
|
-
function escapeHtml(text: string): string {
|
|
274
|
-
return text
|
|
275
|
-
.replace(/&/g, '&')
|
|
276
|
-
.replace(/</g, '<')
|
|
277
|
-
.replace(/>/g, '>')
|
|
278
|
-
.replace(/"/g, '"')
|
|
279
|
-
.replace(/'/g, ''');
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Shows a modern verification dialog in the browser.
|
|
284
|
-
* @param title The solution's query title
|
|
285
|
-
* @param body The solution body (if available/unlocked)
|
|
286
|
-
* @returns true if user clicked "Safe", false if "Unsafe", null if cancelled
|
|
287
|
-
*/
|
|
288
|
-
export async function showVerificationDialog(
|
|
289
|
-
title: string,
|
|
290
|
-
body?: string
|
|
291
|
-
): Promise<boolean | null> {
|
|
292
|
-
return new Promise((resolve) => {
|
|
293
|
-
const html = generateHTML(title, body);
|
|
294
|
-
let resolved = false;
|
|
295
|
-
|
|
296
|
-
const server = http.createServer((req, res) => {
|
|
297
|
-
const url = new URL(req.url || '/', `http://localhost`);
|
|
298
|
-
|
|
299
|
-
if (url.pathname === '/result') {
|
|
300
|
-
const value = url.searchParams.get('value');
|
|
301
|
-
res.writeHead(200, { 'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*' });
|
|
302
|
-
res.end('OK');
|
|
303
|
-
|
|
304
|
-
if (!resolved) {
|
|
305
|
-
resolved = true;
|
|
306
|
-
server.close();
|
|
307
|
-
|
|
308
|
-
switch (value) {
|
|
309
|
-
case 'safe':
|
|
310
|
-
resolve(true);
|
|
311
|
-
break;
|
|
312
|
-
case 'unsafe':
|
|
313
|
-
resolve(false);
|
|
314
|
-
break;
|
|
315
|
-
default:
|
|
316
|
-
resolve(null);
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
} else {
|
|
320
|
-
res.writeHead(200, { 'Content-Type': 'text/html' });
|
|
321
|
-
res.end(html);
|
|
322
|
-
}
|
|
323
|
-
});
|
|
324
|
-
|
|
325
|
-
server.listen(0, 'localhost', () => {
|
|
326
|
-
const address = server.address();
|
|
327
|
-
if (address && typeof address === 'object') {
|
|
328
|
-
const url = `http://localhost:${address.port}`;
|
|
329
|
-
open(url);
|
|
330
|
-
|
|
331
|
-
// Timeout after 55 seconds (within MCP client default 60s limit)
|
|
332
|
-
setTimeout(() => {
|
|
333
|
-
if (!resolved) {
|
|
334
|
-
resolved = true;
|
|
335
|
-
server.close();
|
|
336
|
-
resolve(null);
|
|
337
|
-
}
|
|
338
|
-
}, 55 * 1000);
|
|
339
|
-
}
|
|
340
|
-
});
|
|
341
|
-
});
|
|
342
|
-
}
|
|
1
|
+
import http from 'http';
|
|
2
|
+
import open from 'open';
|
|
3
|
+
|
|
4
|
+
const generateHTML = (title: string, body?: string): string => `
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="en">
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="UTF-8">
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
10
|
+
<title>Verify Solution | cache.overflow</title>
|
|
11
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
12
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
13
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
14
|
+
<style>
|
|
15
|
+
* {
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body {
|
|
22
|
+
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
23
|
+
background: #0A0A0B;
|
|
24
|
+
min-height: 100vh;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
padding: 24px;
|
|
29
|
+
color: #fff;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.card {
|
|
33
|
+
background: linear-gradient(145deg, rgba(30, 30, 32, 0.9), rgba(20, 20, 22, 0.95));
|
|
34
|
+
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
35
|
+
border-radius: 20px;
|
|
36
|
+
padding: 48px;
|
|
37
|
+
max-width: 800px;
|
|
38
|
+
width: 100%;
|
|
39
|
+
backdrop-filter: blur(20px);
|
|
40
|
+
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.badge {
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
gap: 8px;
|
|
47
|
+
background: rgba(139, 92, 246, 0.15);
|
|
48
|
+
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
49
|
+
color: #A78BFA;
|
|
50
|
+
font-size: 13px;
|
|
51
|
+
font-weight: 500;
|
|
52
|
+
text-transform: uppercase;
|
|
53
|
+
letter-spacing: 0.5px;
|
|
54
|
+
padding: 10px 18px;
|
|
55
|
+
border-radius: 24px;
|
|
56
|
+
margin-bottom: 28px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.badge::before {
|
|
60
|
+
content: "";
|
|
61
|
+
width: 6px;
|
|
62
|
+
height: 6px;
|
|
63
|
+
background: #8B5CF6;
|
|
64
|
+
border-radius: 50%;
|
|
65
|
+
animation: pulse 2s ease-in-out infinite;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes pulse {
|
|
69
|
+
0%, 100% { opacity: 1; transform: scale(1); }
|
|
70
|
+
50% { opacity: 0.5; transform: scale(1.2); }
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
h1 {
|
|
74
|
+
font-size: 32px;
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
color: #fff;
|
|
77
|
+
margin-bottom: 12px;
|
|
78
|
+
letter-spacing: -0.5px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.subtitle {
|
|
82
|
+
font-size: 18px;
|
|
83
|
+
color: rgba(255, 255, 255, 0.5);
|
|
84
|
+
margin-bottom: 32px;
|
|
85
|
+
line-height: 1.5;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.solution-card {
|
|
89
|
+
background: rgba(255, 255, 255, 0.03);
|
|
90
|
+
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
91
|
+
border-radius: 16px;
|
|
92
|
+
padding: 28px;
|
|
93
|
+
margin-bottom: 36px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.solution-title {
|
|
97
|
+
font-size: 20px;
|
|
98
|
+
font-weight: 500;
|
|
99
|
+
color: #fff;
|
|
100
|
+
margin-bottom: 16px;
|
|
101
|
+
line-height: 1.4;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.solution-body {
|
|
105
|
+
font-size: 16px;
|
|
106
|
+
line-height: 1.8;
|
|
107
|
+
color: rgba(255, 255, 255, 0.6);
|
|
108
|
+
max-height: 280px;
|
|
109
|
+
overflow-y: auto;
|
|
110
|
+
white-space: pre-wrap;
|
|
111
|
+
word-wrap: break-word;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.solution-body::-webkit-scrollbar {
|
|
115
|
+
width: 4px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.solution-body::-webkit-scrollbar-track {
|
|
119
|
+
background: transparent;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.solution-body::-webkit-scrollbar-thumb {
|
|
123
|
+
background: rgba(255, 255, 255, 0.1);
|
|
124
|
+
border-radius: 2px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.buttons {
|
|
128
|
+
display: flex;
|
|
129
|
+
gap: 16px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.btn {
|
|
133
|
+
flex: 1;
|
|
134
|
+
padding: 22px 36px;
|
|
135
|
+
border: none;
|
|
136
|
+
border-radius: 14px;
|
|
137
|
+
font-family: inherit;
|
|
138
|
+
font-size: 20px;
|
|
139
|
+
font-weight: 600;
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
transition: all 0.2s ease;
|
|
142
|
+
position: relative;
|
|
143
|
+
overflow: hidden;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.btn-safe {
|
|
147
|
+
background: linear-gradient(135deg, #00FF41 0%, #00CC33 100%);
|
|
148
|
+
color: #000;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.btn-safe:hover {
|
|
152
|
+
transform: translateY(-2px);
|
|
153
|
+
box-shadow: 0 8px 24px rgba(0, 255, 65, 0.35);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.btn-safe:active {
|
|
157
|
+
transform: translateY(0);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.btn-unsafe {
|
|
161
|
+
background: linear-gradient(135deg, #FF4444 0%, #CC2233 100%);
|
|
162
|
+
color: #fff;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.btn-unsafe:hover {
|
|
166
|
+
transform: translateY(-2px);
|
|
167
|
+
box-shadow: 0 8px 24px rgba(255, 51, 51, 0.35);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.btn-unsafe:active {
|
|
171
|
+
transform: translateY(0);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.hint {
|
|
175
|
+
text-align: center;
|
|
176
|
+
margin-top: 28px;
|
|
177
|
+
font-size: 15px;
|
|
178
|
+
color: rgba(255, 255, 255, 0.3);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.hint kbd {
|
|
182
|
+
background: rgba(255, 255, 255, 0.1);
|
|
183
|
+
padding: 4px 10px;
|
|
184
|
+
border-radius: 6px;
|
|
185
|
+
font-family: inherit;
|
|
186
|
+
font-size: 14px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.completed {
|
|
190
|
+
text-align: center;
|
|
191
|
+
padding: 60px 20px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.completed-icon {
|
|
195
|
+
width: 88px;
|
|
196
|
+
height: 88px;
|
|
197
|
+
border-radius: 50%;
|
|
198
|
+
display: flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
margin: 0 auto 28px;
|
|
202
|
+
font-size: 40px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.completed-icon.safe {
|
|
206
|
+
background: linear-gradient(135deg, rgba(0, 255, 65, 0.2), rgba(0, 204, 51, 0.1));
|
|
207
|
+
border: 2px solid rgba(0, 255, 65, 0.5);
|
|
208
|
+
box-shadow: 0 0 32px rgba(0, 255, 65, 0.2);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.completed-icon.unsafe {
|
|
212
|
+
background: linear-gradient(135deg, rgba(255, 68, 68, 0.2), rgba(204, 34, 51, 0.1));
|
|
213
|
+
border: 2px solid rgba(255, 68, 68, 0.5);
|
|
214
|
+
box-shadow: 0 0 32px rgba(255, 68, 68, 0.2);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.completed h2 {
|
|
218
|
+
font-size: 28px;
|
|
219
|
+
font-weight: 600;
|
|
220
|
+
margin-bottom: 12px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.completed p {
|
|
224
|
+
font-size: 18px;
|
|
225
|
+
color: rgba(255, 255, 255, 0.5);
|
|
226
|
+
}
|
|
227
|
+
</style>
|
|
228
|
+
</head>
|
|
229
|
+
<body>
|
|
230
|
+
<div class="card" id="main-card">
|
|
231
|
+
<div class="badge">Verification Required</div>
|
|
232
|
+
|
|
233
|
+
<h1>Is this solution safe?</h1>
|
|
234
|
+
<p class="subtitle">Review the code below and verify it's safe to use</p>
|
|
235
|
+
|
|
236
|
+
<div class="solution-card">
|
|
237
|
+
<div class="solution-title">${escapeHtml(title)}</div>
|
|
238
|
+
<div class="solution-body">${body ? escapeHtml(body) : 'Solution body not available.\nUnlock to view full content.'}</div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div class="buttons">
|
|
242
|
+
<button class="btn btn-safe" onclick="submit('safe')">Safe</button>
|
|
243
|
+
<button class="btn btn-unsafe" onclick="submit('unsafe')">Unsafe</button>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="hint">
|
|
247
|
+
Press <kbd>S</kbd> for Safe or <kbd>U</kbd> for Unsafe
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<script>
|
|
252
|
+
function submit(result) {
|
|
253
|
+
const isSafe = result === 'safe';
|
|
254
|
+
document.getElementById('main-card').innerHTML = \`
|
|
255
|
+
<div class="completed">
|
|
256
|
+
<div class="completed-icon \${result}">\${isSafe ? '✓' : '✕'}</div>
|
|
257
|
+
<h2>\${isSafe ? 'Marked as Safe' : 'Marked as Unsafe'}</h2>
|
|
258
|
+
<p>You can close this tab now</p>
|
|
259
|
+
</div>
|
|
260
|
+
\`;
|
|
261
|
+
fetch('/result?value=' + result).catch(() => {});
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
document.addEventListener('keydown', (e) => {
|
|
265
|
+
if (e.key === 's' || e.key === 'S') submit('safe');
|
|
266
|
+
if (e.key === 'u' || e.key === 'U') submit('unsafe');
|
|
267
|
+
});
|
|
268
|
+
</script>
|
|
269
|
+
</body>
|
|
270
|
+
</html>
|
|
271
|
+
`;
|
|
272
|
+
|
|
273
|
+
function escapeHtml(text: string): string {
|
|
274
|
+
return text
|
|
275
|
+
.replace(/&/g, '&')
|
|
276
|
+
.replace(/</g, '<')
|
|
277
|
+
.replace(/>/g, '>')
|
|
278
|
+
.replace(/"/g, '"')
|
|
279
|
+
.replace(/'/g, ''');
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* Shows a modern verification dialog in the browser.
|
|
284
|
+
* @param title The solution's query title
|
|
285
|
+
* @param body The solution body (if available/unlocked)
|
|
286
|
+
* @returns true if user clicked "Safe", false if "Unsafe", null if cancelled
|
|
287
|
+
*/
|
|
288
|
+
export async function showVerificationDialog(
|
|
289
|
+
title: string,
|
|
290
|
+
body?: string
|
|
291
|
+
): Promise<boolean | null> {
|
|
292
|
+
return new Promise((resolve) => {
|
|
293
|
+
const html = generateHTML(title, body);
|
|
294
|
+
let resolved = false;
|
|
295
|
+
|
|
296
|
+
const server = http.createServer((req, res) => {
|
|
297
|
+
const url = new URL(req.url || '/', `http://localhost`);
|
|
298
|
+
|
|
299
|
+
if (url.pathname === '/result') {
|
|
300
|
+
const value = url.searchParams.get('value');
|
|
301
|
+
res.writeHead(200, { 'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*' });
|
|
302
|
+
res.end('OK');
|
|
303
|
+
|
|
304
|
+
if (!resolved) {
|
|
305
|
+
resolved = true;
|
|
306
|
+
server.close();
|
|
307
|
+
|
|
308
|
+
switch (value) {
|
|
309
|
+
case 'safe':
|
|
310
|
+
resolve(true);
|
|
311
|
+
break;
|
|
312
|
+
case 'unsafe':
|
|
313
|
+
resolve(false);
|
|
314
|
+
break;
|
|
315
|
+
default:
|
|
316
|
+
resolve(null);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
} else {
|
|
320
|
+
res.writeHead(200, { 'Content-Type': 'text/html' });
|
|
321
|
+
res.end(html);
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
server.listen(0, 'localhost', () => {
|
|
326
|
+
const address = server.address();
|
|
327
|
+
if (address && typeof address === 'object') {
|
|
328
|
+
const url = `http://localhost:${address.port}`;
|
|
329
|
+
open(url);
|
|
330
|
+
|
|
331
|
+
// Timeout after 55 seconds (within MCP client default 60s limit)
|
|
332
|
+
setTimeout(() => {
|
|
333
|
+
if (!resolved) {
|
|
334
|
+
resolved = true;
|
|
335
|
+
server.close();
|
|
336
|
+
resolve(null);
|
|
337
|
+
}
|
|
338
|
+
}, 55 * 1000);
|
|
339
|
+
}
|
|
340
|
+
});
|
|
341
|
+
});
|
|
342
|
+
}
|