oc-codex-multi-auth 6.9.1 → 6.10.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.
Files changed (43) hide show
  1. package/README.md +45 -14
  2. package/config/README.md +71 -22
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +35 -7
  5. package/dist/index.js.map +1 -1
  6. package/dist/lib/auth/server.d.ts.map +1 -1
  7. package/dist/lib/auth/server.js +7 -3
  8. package/dist/lib/auth/server.js.map +1 -1
  9. package/dist/lib/config.d.ts +6 -0
  10. package/dist/lib/config.d.ts.map +1 -1
  11. package/dist/lib/config.js +9 -0
  12. package/dist/lib/config.js.map +1 -1
  13. package/dist/lib/oauth-success.d.ts +1 -0
  14. package/dist/lib/oauth-success.d.ts.map +1 -1
  15. package/dist/lib/oauth-success.html +198 -707
  16. package/dist/lib/oauth-success.js +202 -708
  17. package/dist/lib/oauth-success.js.map +1 -1
  18. package/dist/lib/schemas.d.ts +1 -0
  19. package/dist/lib/schemas.d.ts.map +1 -1
  20. package/dist/lib/schemas.js +1 -0
  21. package/dist/lib/schemas.js.map +1 -1
  22. package/dist/lib/tools/codex-doctor.d.ts.map +1 -1
  23. package/dist/lib/tools/codex-doctor.js +168 -142
  24. package/dist/lib/tools/codex-doctor.js.map +1 -1
  25. package/dist/lib/tools/codex-health.d.ts.map +1 -1
  26. package/dist/lib/tools/codex-health.js +41 -38
  27. package/dist/lib/tools/codex-health.js.map +1 -1
  28. package/dist/lib/tools/codex-refresh.d.ts.map +1 -1
  29. package/dist/lib/tools/codex-refresh.js +24 -103
  30. package/dist/lib/tools/codex-refresh.js.map +1 -1
  31. package/dist/lib/tools/index.d.ts +1 -0
  32. package/dist/lib/tools/index.d.ts.map +1 -1
  33. package/dist/lib/tools/index.js.map +1 -1
  34. package/dist/lib/tools/refresh-account.d.ts +63 -0
  35. package/dist/lib/tools/refresh-account.d.ts.map +1 -0
  36. package/dist/lib/tools/refresh-account.js +159 -0
  37. package/dist/lib/tools/refresh-account.js.map +1 -0
  38. package/dist/lib/ui/beginner.d.ts +1 -0
  39. package/dist/lib/ui/beginner.d.ts.map +1 -1
  40. package/dist/lib/ui/beginner.js +12 -1
  41. package/dist/lib/ui/beginner.js.map +1 -1
  42. package/package.json +155 -155
  43. package/scripts/install-oc-codex-multi-auth-core.js +6 -6
package/dist/lib/oauth-success.js CHANGED
@@ -1,714 +1,208 @@
1
- export const oauthSuccessHtml = String.raw `<!DOCTYPE html>
1
+ export function renderOAuthSuccessHtml(styleNonce) {
2
+ return `<!doctype html>
2
3
  <html lang="en">
3
4
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>OpenCode - Authentication Successful</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=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
10
- <style>
11
- * {
12
- margin: 0;
13
- padding: 0;
14
- box-sizing: border-box;
15
- }
16
-
17
- body {
18
- font-family: "IBM Plex Mono", monospace;
19
- font-weight: 400;
20
- background: #0a0a0a;
21
- color: #B7B1B1;
22
- overflow: hidden;
23
- height: 100vh;
24
- display: flex;
25
- align-items: center;
26
- justify-content: center;
27
- position: relative;
28
- }
29
-
30
- /* Matrix rain background */
31
- .matrix {
32
- position: fixed;
33
- top: 0;
34
- left: 0;
35
- width: 100%;
36
- height: 100%;
37
- z-index: 1;
38
- opacity: 0.35;
39
- }
40
-
41
- /* Scan lines effect */
42
- .scanline {
43
- position: fixed;
44
- top: 0;
45
- left: 0;
46
- width: 100%;
47
- height: 100%;
48
- background: linear-gradient(
49
- transparent 50%,
50
- rgba(0, 0, 0, 0.1) 50%
51
- );
52
- background-size: 100% 4px;
53
- z-index: 2;
54
- pointer-events: none;
55
- animation: scan 8s linear infinite;
56
- }
57
-
58
- @keyframes scan {
59
- 0% { transform: translateY(0); }
60
- 100% { transform: translateY(4px); }
61
- }
62
-
63
- /* Vignette effect */
64
- .vignette {
65
- position: fixed;
66
- top: 0;
67
- left: 0;
68
- width: 100%;
69
- height: 100%;
70
- box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.8);
71
- z-index: 2;
72
- pointer-events: none;
73
- }
74
-
75
- .container {
76
- width: 90%;
77
- max-width: 650px;
78
- text-align: center;
79
- z-index: 10;
80
- position: relative;
81
- animation: fadeIn 0.8s ease-out;
82
- }
83
-
84
- @keyframes fadeIn {
85
- from {
86
- opacity: 0;
87
- transform: scale(0.95);
88
- }
89
- to {
90
- opacity: 1;
91
- transform: scale(1);
92
- }
93
- }
94
-
95
- .logo {
96
- margin-bottom: 60px;
97
- opacity: 0;
98
- animation: logoEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
99
- position: relative;
100
- }
101
-
102
- @keyframes logoEntrance {
103
- 0% {
104
- opacity: 0;
105
- transform: translateY(-50px) rotateX(90deg);
106
- }
107
- 100% {
108
- opacity: 1;
109
- transform: translateY(0) rotateX(0);
110
- }
111
- }
112
-
113
- .logo svg {
114
- width: 300px;
115
- height: auto;
116
- filter: drop-shadow(0 0 30px rgba(241, 236, 236, 0.3));
117
- animation: pulse 3s ease-in-out infinite;
118
- }
119
-
120
- @keyframes pulse {
121
- 0%, 100% {
122
- filter: drop-shadow(0 0 30px rgba(241, 236, 236, 0.3));
123
- }
124
- 50% {
125
- filter: drop-shadow(0 0 50px rgba(241, 236, 236, 0.5));
126
- }
127
- }
128
-
129
- /* Glowing orb behind logo */
130
- .logo::before {
131
- content: '';
132
- position: absolute;
133
- top: 50%;
134
- left: 50%;
135
- transform: translate(-50%, -50%);
136
- width: 200px;
137
- height: 200px;
138
- background: radial-gradient(circle, rgba(241, 236, 236, 0.1) 0%, transparent 70%);
139
- border-radius: 50%;
140
- animation: orbPulse 4s ease-in-out infinite;
141
- z-index: -1;
142
- }
143
-
144
- @keyframes orbPulse {
145
- 0%, 100% {
146
- transform: translate(-50%, -50%) scale(1);
147
- opacity: 0.3;
148
- }
149
- 50% {
150
- transform: translate(-50%, -50%) scale(1.2);
151
- opacity: 0.6;
152
- }
153
- }
154
-
155
- .terminal-window {
156
- background: rgba(26, 26, 26, 0.95);
157
- backdrop-filter: blur(10px);
158
- -webkit-backdrop-filter: blur(10px);
159
- border: 1px solid rgba(75, 70, 70, 0.3);
160
- border-radius: 12px;
161
- margin: 30px 0;
162
- opacity: 0;
163
- animation: boxEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
164
- position: relative;
165
- overflow: hidden;
166
- box-shadow:
167
- 0 0 60px rgba(0, 0, 0, 0.5),
168
- inset 0 1px 0 rgba(255, 255, 255, 0.05);
169
- }
170
-
171
- .terminal-header {
172
- background: rgba(15, 15, 15, 0.9);
173
- padding: 14px 18px;
174
- display: flex;
175
- align-items: center;
176
- gap: 8px;
177
- border-bottom: 1px solid rgba(75, 70, 70, 0.3);
178
- position: relative;
179
- }
180
-
181
- .terminal-button {
182
- width: 12px;
183
- height: 12px;
184
- border-radius: 50%;
185
- transition: transform 0.2s;
186
- }
187
-
188
- .terminal-button:hover {
189
- transform: scale(1.2);
190
- }
191
-
192
- .terminal-button.red {
193
- background: #ff5f56;
194
- box-shadow: 0 0 10px rgba(255, 95, 86, 0.3);
195
- animation: pulse 2s infinite;
196
- }
197
-
198
- .terminal-button.yellow {
199
- background: #ffbd2e;
200
- box-shadow: 0 0 10px rgba(255, 189, 46, 0.3);
201
- animation: pulse 2s infinite 0.3s;
202
- }
203
-
204
- .terminal-button.green {
205
- background: #27c93f;
206
- box-shadow: 0 0 10px rgba(39, 201, 63, 0.3);
207
- animation: pulse 2s infinite 0.6s;
208
- }
209
-
210
- @keyframes pulse {
211
- 0%, 100% { opacity: 1; }
212
- 50% { opacity: 0.6; }
213
- }
214
-
215
- .terminal-title {
216
- flex: 1;
217
- text-align: center;
218
- font-size: 12px;
219
- color: #6a6565;
220
- opacity: 0.8;
221
- letter-spacing: 0.5px;
222
- }
223
-
224
- .status-box {
225
- padding: 50px 40px;
226
- position: relative;
227
- }
228
-
229
- @keyframes boxEntrance {
230
- from {
231
- opacity: 0;
232
- transform: translateY(30px);
233
- }
234
- to {
235
- opacity: 1;
236
- transform: translateY(0);
237
- }
238
- }
239
-
240
- /* Animated border gradient */
241
- .terminal-window::before {
242
- content: '';
243
- position: absolute;
244
- top: -2px;
245
- left: -2px;
246
- right: -2px;
247
- bottom: -2px;
248
- background: linear-gradient(
249
- 45deg,
250
- transparent,
251
- rgba(241, 236, 236, 0.1),
252
- transparent,
253
- rgba(241, 236, 236, 0.1)
254
- );
255
- background-size: 400% 400%;
256
- border-radius: 12px;
257
- z-index: -1;
258
- animation: gradientShift 8s ease infinite;
259
- }
260
-
261
- @keyframes gradientShift {
262
- 0%, 100% { background-position: 0% 50%; }
263
- 50% { background-position: 100% 50%; }
264
- }
265
-
266
- .checkmark-container {
267
- width: 100px;
268
- height: 100px;
269
- margin: 0 auto 40px;
270
- position: relative;
271
- }
272
-
273
- .checkmark-circle {
274
- width: 100px;
275
- height: 100px;
276
- border-radius: 50%;
277
- border: 4px solid transparent;
278
- display: flex;
279
- align-items: center;
280
- justify-content: center;
281
- position: relative;
282
- animation: circleAppear 0.6s ease-out 1s both;
283
- }
284
-
285
- @keyframes circleAppear {
286
- from {
287
- transform: scale(0) rotate(-180deg);
288
- border-color: transparent;
289
- }
290
- to {
291
- transform: scale(1) rotate(0);
292
- border-color: #4B4646;
293
- }
294
- }
295
-
296
- /* Spinning rings around checkmark */
297
- .checkmark-circle::before,
298
- .checkmark-circle::after {
299
- content: '';
300
- position: absolute;
301
- width: 120%;
302
- height: 120%;
303
- border: 2px solid transparent;
304
- border-top-color: rgba(241, 236, 236, 0.2);
305
- border-radius: 50%;
306
- animation: rotate 3s linear infinite;
307
- }
308
-
309
- .checkmark-circle::after {
310
- width: 140%;
311
- height: 140%;
312
- border-top-color: rgba(183, 177, 177, 0.1);
313
- animation: rotate 4s linear infinite reverse;
314
- }
315
-
316
- @keyframes rotate {
317
- to { transform: rotate(360deg); }
318
- }
319
-
320
- .checkmark {
321
- width: 35px;
322
- height: 18px;
323
- border-left: 5px solid #F1ECEC;
324
- border-bottom: 5px solid #F1ECEC;
325
- transform: rotate(-45deg) scale(0);
326
- animation: checkmarkDraw 0.5s cubic-bezier(0.65, 0, 0.45, 1) 1.3s forwards;
327
- filter: drop-shadow(0 0 10px rgba(241, 236, 236, 0.5));
328
- }
329
-
330
- @keyframes checkmarkDraw {
331
- 0% {
332
- transform: rotate(-45deg) scale(0);
333
- }
334
- 50% {
335
- transform: rotate(-45deg) scale(1.1);
336
- }
337
- 100% {
338
- transform: rotate(-45deg) scale(1);
339
- }
340
- }
341
-
342
- .title {
343
- font-size: 32px;
344
- color: #00ff41;
345
- margin-bottom: 20px;
346
- font-weight: 500;
347
- letter-spacing: 1px;
348
- text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
349
- opacity: 0;
350
- animation: fadeInUp 0.6s ease-out 1.8s forwards;
351
- }
352
-
353
- @keyframes fadeInUp {
354
- from {
355
- opacity: 0;
356
- transform: translateY(20px);
357
- }
358
- to {
359
- opacity: 1;
360
- transform: translateY(0);
361
- }
362
- }
363
-
364
- .message {
365
- font-size: 16px;
366
- color: #9a9595;
367
- line-height: 1.8;
368
- margin-bottom: 30px;
369
- opacity: 0;
370
- animation: fadeInUp 0.6s ease-out 2s forwards;
371
- }
372
-
373
- .terminal-output {
374
- background: rgba(10, 10, 10, 0.6);
375
- border: 1px solid rgba(75, 70, 70, 0.2);
376
- border-radius: 8px;
377
- padding: 25px;
378
- text-align: left;
379
- font-size: 14px;
380
- line-height: 2;
381
- margin-top: 25px;
382
- position: relative;
383
- overflow: hidden;
384
- }
385
-
386
- /* Terminal typing effect */
387
- .terminal-output::before {
388
- content: '';
389
- position: absolute;
390
- top: 0;
391
- left: 0;
392
- width: 100%;
393
- height: 2px;
394
- background: linear-gradient(90deg, transparent, #4B4646, transparent);
395
- animation: scanProgress 2s ease-out 2.2s forwards;
396
- }
397
-
398
- @keyframes scanProgress {
399
- from {
400
- transform: translateX(-100%);
401
- }
402
- to {
403
- transform: translateX(100%);
404
- }
405
- }
406
-
407
- .terminal-line {
408
- opacity: 0;
409
- transform: translateX(-20px);
410
- animation: terminalType 0.4s ease-out forwards;
411
- display: flex;
412
- align-items: center;
413
- gap: 12px;
414
- }
415
-
416
- .terminal-line:nth-child(1) { animation-delay: 2.2s; }
417
- .terminal-line:nth-child(2) { animation-delay: 2.4s; }
418
- .terminal-line:nth-child(3) { animation-delay: 2.6s; }
419
- .terminal-line:nth-child(4) { animation-delay: 2.8s; }
420
-
421
- @keyframes terminalType {
422
- to {
423
- opacity: 1;
424
- transform: translateX(0);
425
- }
426
- }
427
-
428
- .prompt {
429
- color: #6a6565;
430
- font-weight: 500;
431
- }
432
-
433
- .success {
434
- color: #B7B1B1;
435
- }
436
-
437
- .terminal-line::after {
438
- content: '';
439
- flex: 1;
440
- height: 1px;
441
- background: linear-gradient(90deg, rgba(75, 70, 70, 0.3), transparent);
442
- }
443
-
444
- .footer {
445
- margin-top: 40px;
446
- font-size: 14px;
447
- color: #6a6565;
448
- opacity: 0;
449
- animation: fadeInUp 0.6s ease-out 3.2s forwards;
450
- text-shadow: 0 0 10px rgba(106, 101, 101, 0.5);
451
- }
452
-
453
- .cursor {
454
- display: inline-block;
455
- width: 2px;
456
- height: 16px;
457
- background: #8a8585;
458
- margin-left: 6px;
459
- animation: blink 1s infinite;
460
- box-shadow: 0 0 8px #8a8585;
461
- }
462
-
463
- @keyframes blink {
464
- 0%, 49% { opacity: 1; }
465
- 50%, 100% { opacity: 0; }
466
- }
467
-
468
- /* Floating particles */
469
- .particle {
470
- position: fixed;
471
- width: 2px;
472
- height: 2px;
473
- background: rgba(183, 177, 177, 0.3);
474
- border-radius: 50%;
475
- pointer-events: none;
476
- z-index: 5;
477
- animation: float 8s linear infinite;
478
- }
479
-
480
- @keyframes float {
481
- 0% {
482
- transform: translateY(100vh) translateX(0) scale(0);
483
- opacity: 0;
484
- }
485
- 10% {
486
- opacity: 1;
487
- transform: translateY(90vh) translateX(10px) scale(1);
488
- }
489
- 90% {
490
- opacity: 1;
491
- }
492
- 100% {
493
- transform: translateY(-10vh) translateX(-10px) scale(0);
494
- opacity: 0;
495
- }
496
- }
497
-
498
- /* Success glow effect */
499
- @keyframes successGlow {
500
- 0%, 100% {
501
- box-shadow:
502
- 0 0 60px rgba(0, 0, 0, 0.5),
503
- inset 0 1px 0 rgba(255, 255, 255, 0.05);
504
- }
505
- 50% {
506
- box-shadow:
507
- 0 0 80px rgba(241, 236, 236, 0.1),
508
- inset 0 1px 0 rgba(255, 255, 255, 0.05);
509
- }
510
- }
511
-
512
- .terminal-window {
513
- animation:
514
- boxEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards,
515
- successGlow 4s ease-in-out 2s infinite;
516
- }
517
- </style>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <meta name="color-scheme" content="dark">
8
+ <title>OpenCode - Authentication complete</title>
9
+ <style nonce="${styleNonce}">
10
+ :root {
11
+ color-scheme: dark;
12
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
13
+ font-synthesis: none;
14
+ }
15
+
16
+ * {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ body {
21
+ min-width: 320px;
22
+ min-height: 100vh;
23
+ margin: 0;
24
+ display: grid;
25
+ place-items: center;
26
+ padding: 32px 20px;
27
+ background:
28
+ radial-gradient(circle at 50% 0%, rgba(42, 195, 126, 0.12), transparent 38rem),
29
+ #080b0a;
30
+ color: #f2f5f3;
31
+ }
32
+
33
+ main {
34
+ width: min(100%, 540px);
35
+ }
36
+
37
+ .brand {
38
+ display: flex;
39
+ margin: 0 0 24px 0;
40
+ justify-content: center;
41
+ }
42
+
43
+ .brand svg {
44
+ height: 22px;
45
+ width: auto;
46
+ }
47
+
48
+ .card {
49
+ position: relative;
50
+ overflow: hidden;
51
+ padding: 44px;
52
+ border: 1px solid #26312c;
53
+ border-radius: 20px;
54
+ background: linear-gradient(145deg, rgba(22, 28, 25, 0.98), rgba(13, 17, 15, 0.98));
55
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
56
+ }
57
+
58
+ .card::before {
59
+ content: "";
60
+ position: absolute;
61
+ inset: 0 0 auto;
62
+ height: 1px;
63
+ background: linear-gradient(90deg, transparent, rgba(86, 224, 157, 0.7), transparent);
64
+ }
65
+
66
+ .success-icon {
67
+ width: 58px;
68
+ height: 58px;
69
+ display: grid;
70
+ place-items: center;
71
+ margin-bottom: 28px;
72
+ border: 1px solid rgba(86, 224, 157, 0.45);
73
+ border-radius: 16px;
74
+ background: rgba(42, 195, 126, 0.1);
75
+ color: #56e09d;
76
+ box-shadow: inset 0 0 28px rgba(42, 195, 126, 0.08);
77
+ }
78
+
79
+ .success-icon svg {
80
+ width: 28px;
81
+ height: 28px;
82
+ }
83
+
84
+ h1 {
85
+ margin: 0;
86
+ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
87
+ font-size: clamp(28px, 6vw, 38px);
88
+ font-weight: 650;
89
+ letter-spacing: -0.035em;
90
+ line-height: 1.12;
91
+ }
92
+
93
+ .lead {
94
+ margin: 16px 0 0;
95
+ color: #aeb8b3;
96
+ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
97
+ font-size: 17px;
98
+ line-height: 1.6;
99
+ }
100
+
101
+ .status {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 12px;
105
+ margin-top: 30px;
106
+ padding: 15px 16px;
107
+ border: 1px solid #29362f;
108
+ border-radius: 12px;
109
+ background: #0b100d;
110
+ color: #c9d2cd;
111
+ font-size: 13px;
112
+ line-height: 1.5;
113
+ }
114
+
115
+ .status-dot {
116
+ width: 8px;
117
+ height: 8px;
118
+ flex: 0 0 auto;
119
+ border-radius: 50%;
120
+ background: #56e09d;
121
+ box-shadow: 0 0 0 4px rgba(86, 224, 157, 0.1);
122
+ }
123
+
124
+ .next-step {
125
+ margin: 24px 0 0;
126
+ color: #7f8c85;
127
+ font-size: 13px;
128
+ line-height: 1.6;
129
+ }
130
+
131
+ .next-step strong {
132
+ color: #b9c3be;
133
+ font-weight: 600;
134
+ }
135
+
136
+ @media (max-width: 520px) {
137
+ body {
138
+ padding: 24px 16px;
139
+ }
140
+
141
+ .card {
142
+ padding: 32px 24px;
143
+ border-radius: 16px;
144
+ }
145
+
146
+ .success-icon {
147
+ width: 52px;
148
+ height: 52px;
149
+ margin-bottom: 24px;
150
+ }
151
+ }
152
+
153
+ @media (prefers-reduced-motion: reduce) {
154
+ *, *::before, *::after {
155
+ scroll-behavior: auto !important;
156
+ animation-duration: 0.01ms !important;
157
+ animation-iteration-count: 1 !important;
158
+ }
159
+ }
160
+ </style>
518
161
  </head>
519
162
  <body>
520
- <canvas class="matrix" id="matrix"></canvas>
521
- <div class="scanline"></div>
522
- <div class="vignette"></div>
523
-
524
- <div class="container">
525
- <div class="logo">
526
- <svg width="300" height="54" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
527
- <path d="M18 30H6V18H18V30Z" fill="#4B4646"/>
528
- <path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#B7B1B1"/>
529
- <path d="M48 30H36V18H48V30Z" fill="#4B4646"/>
530
- <path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#B7B1B1"/>
531
- <path d="M84 24V30H66V24H84Z" fill="#4B4646"/>
532
- <path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#B7B1B1"/>
533
- <path d="M108 36H96V18H108V36Z" fill="#4B4646"/>
534
- <path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#B7B1B1"/>
535
- <path d="M144 30H126V18H144V30Z" fill="#4B4646"/>
536
- <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#F1ECEC"/>
537
- <path d="M168 30H156V18H168V30Z" fill="#4B4646"/>
538
- <path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#F1ECEC"/>
539
- <path d="M198 30H186V18H198V30Z" fill="#4B4646"/>
540
- <path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#F1ECEC"/>
541
- <path d="M234 24V30H216V24H234Z" fill="#4B4646"/>
542
- <path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#F1ECEC"/>
543
- </svg>
544
- </div>
545
-
546
- <div class="terminal-window">
547
- <div class="terminal-header">
548
- <div class="terminal-button red"></div>
549
- <div class="terminal-button yellow"></div>
550
- <div class="terminal-button green"></div>
551
- <div class="terminal-title">oc-codex-multi-auth — OAuth Authentication</div>
552
- </div>
553
-
554
- <div class="status-box">
555
- <div class="checkmark-container">
556
- <div class="checkmark-circle">
557
- <div class="checkmark"></div>
558
- </div>
559
- </div>
560
-
561
- <div class="title">ACCESS GRANTED</div>
562
- <div class="message">
563
- OpenAI ChatGPT authentication successful<br>
564
- Your credentials have been securely stored
565
- </div>
566
-
567
- <div class="terminal-output">
568
- <div class="terminal-line">
569
- <span class="prompt">▸</span>
570
- <span class="success">Initializing OAuth handshake...</span>
571
- </div>
572
- <div class="terminal-line">
573
- <span class="prompt">▸</span>
574
- <span class="success">Token exchange verified</span>
575
- </div>
576
- <div class="terminal-line">
577
- <span class="prompt">▸</span>
578
- <span class="success">Credentials encrypted & stored</span>
579
- </div>
580
- <div class="terminal-line">
581
- <span class="prompt">✓</span>
582
- <span class="success">OpenCode ready for deployment</span>
583
- </div>
584
- </div>
585
- </div>
586
- </div>
587
-
588
- <div class="footer">
589
- Return to your terminal to continue<span class="cursor"></span>
590
- </div>
591
- </div>
592
-
593
- <script>
594
- // Enhanced Matrix rain effect with mouse interaction
595
- const canvas = document.getElementById('matrix');
596
- const ctx = canvas.getContext('2d');
597
-
598
- canvas.width = window.innerWidth;
599
- canvas.height = window.innerHeight;
600
-
601
- // Mix of characters including OpenCode themed ones
602
- const chars = 'OPENCODE▸✓▹▸◂◃◄►◀▶←→↑↓⟨⟩∧∨∩∪⊂⊃⊆⊇∈∉∀∃∄∅∞≡≠≤≥±∓⊕⊗⊙01';
603
- const fontSize = 16;
604
- const columns = Math.floor(canvas.width / fontSize);
605
-
606
- const drops = Array(columns).fill(1);
607
- const speeds = Array(columns).fill(0).map(() => Math.random() * 0.5 + 0.5);
608
-
609
- // Track mouse position
610
- let mouseX = -1000;
611
- let mouseY = -1000;
612
-
613
- canvas.addEventListener('mousemove', (e) => {
614
- mouseX = e.clientX;
615
- mouseY = e.clientY;
616
- });
617
-
618
- canvas.addEventListener('mouseleave', () => {
619
- mouseX = -1000;
620
- mouseY = -1000;
621
- });
622
-
623
- function drawMatrix() {
624
- ctx.fillStyle = 'rgba(10, 10, 10, 0.08)';
625
- ctx.fillRect(0, 0, canvas.width, canvas.height);
626
-
627
- ctx.font = fontSize + 'px "IBM Plex Mono"';
628
-
629
- for (let i = 0; i < drops.length; i++) {
630
- const text = chars[Math.floor(Math.random() * chars.length)];
631
- const x = i * fontSize;
632
- const y = drops[i] * fontSize;
633
-
634
- // Check distance from mouse
635
- const distanceFromMouse = Math.sqrt(
636
- Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2)
637
- );
638
-
639
- const hoverRadius = 80;
640
- const isNearMouse = distanceFromMouse < hoverRadius;
641
-
642
- if (isNearMouse) {
643
- // Matrix green color when near mouse
644
- const intensity = 1 - (distanceFromMouse / hoverRadius);
645
- ctx.fillStyle = \`rgba(0, 255, 65, \${intensity * 0.95})\`;
646
- ctx.shadowBlur = 20 * intensity;
647
- ctx.shadowColor = '#00ff41';
648
- } else {
649
- // Bright white gradient by default
650
- const gradient = ctx.createLinearGradient(0, y - fontSize * 10, 0, y);
651
- gradient.addColorStop(0, 'rgba(200, 200, 200, 0)');
652
- gradient.addColorStop(0.5, 'rgba(241, 236, 236, 0.8)');
653
- gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');
654
- ctx.fillStyle = gradient;
655
- ctx.shadowBlur = 0;
656
- }
657
-
658
- ctx.fillText(text, x, y);
659
-
660
- // Randomly reset drops
661
- if (drops[i] * fontSize > canvas.height && Math.random() > 0.98) {
662
- drops[i] = 0;
663
- speeds[i] = Math.random() * 0.5 + 0.5;
664
- }
665
-
666
- drops[i] += speeds[i];
667
- }
668
-
669
- // Reset shadow for next frame
670
- ctx.shadowBlur = 0;
671
- }
672
-
673
- setInterval(drawMatrix, 40);
674
-
675
- // Create floating particles
676
- function createParticle() {
677
- const particle = document.createElement('div');
678
- particle.className = 'particle';
679
- particle.style.left = Math.random() * 100 + '%';
680
- particle.style.animationDelay = Math.random() * 8 + 's';
681
- particle.style.animationDuration = (Math.random() * 4 + 6) + 's';
682
- document.body.appendChild(particle);
683
-
684
- setTimeout(() => particle.remove(), 10000);
685
- }
686
-
687
- // Generate particles periodically
688
- for (let i = 0; i < 20; i++) {
689
- setTimeout(createParticle, i * 400);
690
- }
691
-
692
- setInterval(() => {
693
- if (Math.random() > 0.7) createParticle();
694
- }, 2000);
695
-
696
- // Resize handler
697
- window.addEventListener('resize', () => {
698
- canvas.width = window.innerWidth;
699
- canvas.height = window.innerHeight;
700
- });
701
-
702
- // Add subtle mouse parallax effect
703
- document.addEventListener('mousemove', (e) => {
704
- const moveX = (e.clientX - window.innerWidth / 2) / 50;
705
- const moveY = (e.clientY - window.innerHeight / 2) / 50;
706
-
707
- document.querySelector('.container').style.transform =
708
- \`translate(\${moveX}px, \${moveY}px)\`;
709
- });
710
- </script>
163
+ <main>
164
+ <div class="brand" aria-label="OpenCode">
165
+ <svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
166
+ <path d="M18 30H6V18H18V30Z" fill="#4B4646"/>
167
+ <path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#B7B1B1"/>
168
+ <path d="M48 30H36V18H48V30Z" fill="#4B4646"/>
169
+ <path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#B7B1B1"/>
170
+ <path d="M84 24V30H66V24H84Z" fill="#4B4646"/>
171
+ <path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#B7B1B1"/>
172
+ <path d="M108 36H96V18H108V36Z" fill="#4B4646"/>
173
+ <path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#B7B1B1"/>
174
+ <path d="M144 30H126V18H144V30Z" fill="#4B4646"/>
175
+ <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#F1ECEC"/>
176
+ <path d="M168 30H156V18H168V30Z" fill="#4B4646"/>
177
+ <path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#F1ECEC"/>
178
+ <path d="M198 30H186V18H198V30Z" fill="#4B4646"/>
179
+ <path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#F1ECEC"/>
180
+ <path d="M234 24V30H216V24H234Z" fill="#4B4646"/>
181
+ <path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#F1ECEC"/>
182
+ </svg>
183
+ </div>
184
+
185
+ <section class="card" aria-labelledby="success-title">
186
+ <div class="success-icon" aria-hidden="true">
187
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
188
+ <path d="M5 12.5 9.25 17 19 7" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
189
+ </svg>
190
+ </div>
191
+
192
+ <h1 id="success-title">Authentication complete</h1>
193
+ <p class="lead">Your OpenAI account is connected securely and ready to use with OpenCode.</p>
194
+
195
+ <div class="status" role="status">
196
+ <span class="status-dot" aria-hidden="true"></span>
197
+ <span>Credentials encrypted and stored</span>
198
+ </div>
199
+
200
+ <p class="next-step"><strong>You can close this tab.</strong> Return to your terminal to continue.</p>
201
+ </section>
202
+ </main>
711
203
  </body>
712
- </html>
713
- `;
204
+ </html>`;
205
+ }
206
+ // Retained for the standalone HTML artifact generated by the package build.
207
+ export const oauthSuccessHtml = renderOAuthSuccessHtml("");
714
208
  //# sourceMappingURL=oauth-success.js.map