aigo 1.0.0

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.
@@ -0,0 +1,545 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>vigo - Claude Code Terminal</title>
7
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>▸</text></svg>">
8
+
9
+ <!-- xterm.js from CDN (use older compatible CDN paths) -->
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
11
+
12
+ <style>
13
+ * {
14
+ margin: 0;
15
+ padding: 0;
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ :root {
20
+ --bg-primary: #0a0a0f;
21
+ --bg-secondary: #12121a;
22
+ --accent: #00ff88;
23
+ --accent-dim: #00cc6a;
24
+ --text-primary: #e0e0e0;
25
+ --text-secondary: #888;
26
+ --border: #1a1a25;
27
+ }
28
+
29
+ html, body {
30
+ height: 100%;
31
+ width: 100%;
32
+ overflow: hidden;
33
+ background: var(--bg-primary);
34
+ font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
35
+ }
36
+
37
+ #app {
38
+ display: flex;
39
+ flex-direction: column;
40
+ height: 100%;
41
+ width: 100%;
42
+ }
43
+
44
+ /* Header bar */
45
+ #header {
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: space-between;
49
+ padding: 8px 16px;
50
+ background: var(--bg-secondary);
51
+ border-bottom: 1px solid var(--border);
52
+ flex-shrink: 0;
53
+ }
54
+
55
+ #header .logo {
56
+ display: flex;
57
+ align-items: center;
58
+ gap: 8px;
59
+ color: var(--accent);
60
+ font-weight: 600;
61
+ font-size: 14px;
62
+ letter-spacing: 0.5px;
63
+ }
64
+
65
+ #header .logo::before {
66
+ content: '▸';
67
+ font-size: 12px;
68
+ }
69
+
70
+ #status {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 6px;
74
+ font-size: 12px;
75
+ color: var(--text-secondary);
76
+ }
77
+
78
+ #status .dot {
79
+ width: 8px;
80
+ height: 8px;
81
+ border-radius: 50%;
82
+ background: #444;
83
+ transition: background 0.3s, box-shadow 0.3s;
84
+ }
85
+
86
+ #status.connected .dot {
87
+ background: var(--accent);
88
+ box-shadow: 0 0 8px var(--accent);
89
+ }
90
+
91
+ #status.connecting .dot {
92
+ background: #ffaa00;
93
+ animation: pulse 1s ease-in-out infinite;
94
+ }
95
+
96
+ #status.disconnected .dot {
97
+ background: #ff4444;
98
+ }
99
+
100
+ .header-right {
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 16px;
104
+ }
105
+
106
+ .exit-btn {
107
+ padding: 4px 12px;
108
+ background: transparent;
109
+ color: var(--text-secondary);
110
+ border: 1px solid var(--border);
111
+ border-radius: 4px;
112
+ font-family: inherit;
113
+ font-size: 12px;
114
+ cursor: pointer;
115
+ transition: all 0.2s;
116
+ }
117
+
118
+ .exit-btn:hover {
119
+ color: #ff5555;
120
+ border-color: #ff5555;
121
+ background: rgba(255, 85, 85, 0.1);
122
+ }
123
+
124
+ /* Exit confirmation overlay */
125
+ #exit-overlay {
126
+ display: none;
127
+ position: fixed;
128
+ top: 0;
129
+ left: 0;
130
+ right: 0;
131
+ bottom: 0;
132
+ background: rgba(10, 10, 15, 0.95);
133
+ justify-content: center;
134
+ align-items: center;
135
+ z-index: 250;
136
+ }
137
+
138
+ #exit-overlay.visible {
139
+ display: flex;
140
+ }
141
+
142
+ .exit-box {
143
+ background: var(--bg-secondary);
144
+ border: 1px solid var(--border);
145
+ border-radius: 8px;
146
+ padding: 32px;
147
+ text-align: center;
148
+ min-width: 320px;
149
+ }
150
+
151
+ .exit-title {
152
+ color: #ff5555;
153
+ font-size: 18px;
154
+ font-weight: 600;
155
+ margin-bottom: 12px;
156
+ }
157
+
158
+ .exit-message {
159
+ color: var(--text-secondary);
160
+ font-size: 14px;
161
+ margin-bottom: 24px;
162
+ line-height: 1.5;
163
+ }
164
+
165
+ .exit-buttons {
166
+ display: flex;
167
+ gap: 12px;
168
+ justify-content: center;
169
+ }
170
+
171
+ .exit-buttons button {
172
+ padding: 10px 24px;
173
+ border: none;
174
+ border-radius: 4px;
175
+ font-family: inherit;
176
+ font-size: 14px;
177
+ font-weight: 600;
178
+ cursor: pointer;
179
+ transition: all 0.2s;
180
+ }
181
+
182
+ #exit-cancel {
183
+ background: var(--bg-primary);
184
+ color: var(--text-primary);
185
+ border: 1px solid var(--border);
186
+ }
187
+
188
+ #exit-cancel:hover {
189
+ background: var(--border);
190
+ }
191
+
192
+ #exit-confirm {
193
+ background: #ff5555;
194
+ color: white;
195
+ }
196
+
197
+ #exit-confirm:hover {
198
+ background: #ff3333;
199
+ }
200
+
201
+ @keyframes pulse {
202
+ 0%, 100% { opacity: 1; }
203
+ 50% { opacity: 0.4; }
204
+ }
205
+
206
+ /* Terminal container */
207
+ #terminal-container {
208
+ flex: 1;
209
+ padding: 4px;
210
+ background: var(--bg-primary);
211
+ overflow: hidden;
212
+ }
213
+
214
+ #terminal {
215
+ height: 100%;
216
+ width: 100%;
217
+ }
218
+
219
+ /* Custom scrollbar */
220
+ .xterm-viewport::-webkit-scrollbar {
221
+ width: 8px;
222
+ }
223
+
224
+ .xterm-viewport::-webkit-scrollbar-track {
225
+ background: var(--bg-primary);
226
+ }
227
+
228
+ .xterm-viewport::-webkit-scrollbar-thumb {
229
+ background: var(--border);
230
+ border-radius: 4px;
231
+ }
232
+
233
+ .xterm-viewport::-webkit-scrollbar-thumb:hover {
234
+ background: #2a2a35;
235
+ }
236
+
237
+ /* Terminal cursor glow */
238
+ .xterm-cursor-layer {
239
+ filter: drop-shadow(0 0 2px var(--accent));
240
+ }
241
+
242
+ /* Reconnect overlay */
243
+ #reconnect-overlay {
244
+ display: none;
245
+ position: fixed;
246
+ top: 0;
247
+ left: 0;
248
+ right: 0;
249
+ bottom: 0;
250
+ background: rgba(10, 10, 15, 0.9);
251
+ justify-content: center;
252
+ align-items: center;
253
+ flex-direction: column;
254
+ gap: 16px;
255
+ z-index: 100;
256
+ }
257
+
258
+ #reconnect-overlay.visible {
259
+ display: flex;
260
+ }
261
+
262
+ #reconnect-overlay .message {
263
+ color: var(--text-primary);
264
+ font-size: 16px;
265
+ }
266
+
267
+ #reconnect-overlay .spinner {
268
+ width: 32px;
269
+ height: 32px;
270
+ border: 3px solid var(--border);
271
+ border-top-color: var(--accent);
272
+ border-radius: 50%;
273
+ animation: spin 1s linear infinite;
274
+ }
275
+
276
+ @keyframes spin {
277
+ to { transform: rotate(360deg); }
278
+ }
279
+
280
+ #reconnect-overlay button {
281
+ padding: 8px 24px;
282
+ background: var(--accent);
283
+ color: var(--bg-primary);
284
+ border: none;
285
+ border-radius: 4px;
286
+ font-family: inherit;
287
+ font-size: 14px;
288
+ font-weight: 600;
289
+ cursor: pointer;
290
+ transition: background 0.2s;
291
+ }
292
+
293
+ #reconnect-overlay button:hover {
294
+ background: var(--accent-dim);
295
+ }
296
+
297
+ /* Auth overlay */
298
+ #auth-overlay {
299
+ display: none;
300
+ position: fixed;
301
+ top: 0;
302
+ left: 0;
303
+ right: 0;
304
+ bottom: 0;
305
+ background: var(--bg-primary);
306
+ justify-content: center;
307
+ align-items: center;
308
+ z-index: 200;
309
+ }
310
+
311
+ #auth-overlay.visible {
312
+ display: flex;
313
+ }
314
+
315
+ .auth-box {
316
+ background: var(--bg-secondary);
317
+ border: 1px solid var(--border);
318
+ border-radius: 8px;
319
+ padding: 32px;
320
+ text-align: center;
321
+ min-width: 280px;
322
+ }
323
+
324
+ .auth-title {
325
+ color: var(--accent);
326
+ font-size: 18px;
327
+ font-weight: 600;
328
+ margin-bottom: 24px;
329
+ }
330
+
331
+ #password-input {
332
+ width: 100%;
333
+ padding: 12px 16px;
334
+ background: var(--bg-primary);
335
+ border: 1px solid var(--border);
336
+ border-radius: 4px;
337
+ color: var(--text-primary);
338
+ font-family: inherit;
339
+ font-size: 24px;
340
+ text-align: center;
341
+ letter-spacing: 8px;
342
+ margin-bottom: 16px;
343
+ outline: none;
344
+ transition: border-color 0.2s;
345
+ }
346
+
347
+ #password-input:focus {
348
+ border-color: var(--accent);
349
+ }
350
+
351
+ #password-input::placeholder {
352
+ letter-spacing: 4px;
353
+ color: var(--text-secondary);
354
+ }
355
+
356
+ #auth-btn {
357
+ width: 100%;
358
+ padding: 12px 24px;
359
+ background: var(--accent);
360
+ color: var(--bg-primary);
361
+ border: none;
362
+ border-radius: 4px;
363
+ font-family: inherit;
364
+ font-size: 14px;
365
+ font-weight: 600;
366
+ cursor: pointer;
367
+ transition: background 0.2s;
368
+ }
369
+
370
+ #auth-btn:hover {
371
+ background: var(--accent-dim);
372
+ }
373
+
374
+ #auth-error {
375
+ color: #ff5555;
376
+ font-size: 13px;
377
+ margin-top: 12px;
378
+ min-height: 20px;
379
+ }
380
+
381
+ /* Mobile optimizations */
382
+ @media (max-width: 768px) {
383
+ #header {
384
+ padding: 6px 12px;
385
+ }
386
+
387
+ #header .logo {
388
+ font-size: 13px;
389
+ }
390
+
391
+ #status {
392
+ font-size: 11px;
393
+ }
394
+
395
+ #terminal-container {
396
+ padding: 2px;
397
+ padding-bottom: 60px; /* Space for mobile toggle button */
398
+ }
399
+ }
400
+
401
+ /* Mobile control buttons container */
402
+ #mobile-controls {
403
+ display: none;
404
+ position: fixed;
405
+ bottom: 12px;
406
+ left: 50%;
407
+ transform: translateX(-50%);
408
+ gap: 10px;
409
+ z-index: 50;
410
+ }
411
+
412
+ /* Show mobile controls only on mobile/touch devices */
413
+ @media (max-width: 768px), (pointer: coarse) {
414
+ #mobile-controls.visible {
415
+ display: flex;
416
+ }
417
+ }
418
+
419
+ /* Mobile control button base styles */
420
+ .mobile-btn {
421
+ padding: 12px 20px;
422
+ background: var(--bg-secondary);
423
+ border: 1px solid var(--border);
424
+ border-radius: 24px;
425
+ font-family: inherit;
426
+ font-size: 13px;
427
+ font-weight: 600;
428
+ cursor: pointer;
429
+ transition: all 0.2s;
430
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
431
+ white-space: nowrap;
432
+ }
433
+
434
+ /* Switch Mode button */
435
+ #mobile-mode-toggle {
436
+ color: var(--accent);
437
+ border-color: var(--accent);
438
+ }
439
+
440
+ #mobile-mode-toggle:hover,
441
+ #mobile-mode-toggle:active {
442
+ background: var(--accent);
443
+ color: var(--bg-primary);
444
+ }
445
+
446
+ /* Enter button */
447
+ #mobile-enter-btn {
448
+ color: #66aaff;
449
+ border-color: #66aaff;
450
+ }
451
+
452
+ #mobile-enter-btn:hover,
453
+ #mobile-enter-btn:active {
454
+ background: #66aaff;
455
+ color: var(--bg-primary);
456
+ }
457
+
458
+ /* Stop button (Ctrl+C) */
459
+ #mobile-stop-btn {
460
+ color: #ffaa00;
461
+ border-color: #ffaa00;
462
+ }
463
+
464
+ #mobile-stop-btn:hover,
465
+ #mobile-stop-btn:active {
466
+ background: #ffaa00;
467
+ color: var(--bg-primary);
468
+ }
469
+
470
+ /* Exit button */
471
+ #mobile-exit-btn {
472
+ color: #ff5555;
473
+ border-color: #ff5555;
474
+ }
475
+
476
+ #mobile-exit-btn:hover,
477
+ #mobile-exit-btn:active {
478
+ background: #ff5555;
479
+ color: white;
480
+ }
481
+ </style>
482
+ </head>
483
+ <body>
484
+ <div id="app">
485
+ <header id="header">
486
+ <div class="logo">vigo</div>
487
+ <div class="header-right">
488
+ <div id="status" class="connecting">
489
+ <span class="dot"></span>
490
+ <span class="text">Connecting...</span>
491
+ </div>
492
+ <button id="exit-btn" class="exit-btn" title="Exit and cleanup session">Exit</button>
493
+ </div>
494
+ </header>
495
+
496
+ <div id="terminal-container">
497
+ <div id="terminal"></div>
498
+ </div>
499
+
500
+ <div id="reconnect-overlay">
501
+ <div class="spinner"></div>
502
+ <div class="message">Connection lost. Reconnecting...</div>
503
+ <button id="reconnect-btn" style="display: none;">Reconnect Now</button>
504
+ </div>
505
+
506
+ <div id="auth-overlay">
507
+ <div class="auth-box">
508
+ <div class="auth-title">Enter Password</div>
509
+ <input type="password" id="password-input" maxlength="6" placeholder="••••••" autocomplete="off" autofocus>
510
+ <button id="auth-btn">Connect</button>
511
+ <div id="auth-error"></div>
512
+ </div>
513
+ </div>
514
+
515
+ <div id="exit-overlay">
516
+ <div class="exit-box">
517
+ <div class="exit-title">Exit Session?</div>
518
+ <div class="exit-message">
519
+ This will kill the tmux session and<br>
520
+ stop the AI assistant completely.
521
+ </div>
522
+ <div class="exit-buttons">
523
+ <button id="exit-cancel">Cancel</button>
524
+ <button id="exit-confirm">Exit &amp; Cleanup</button>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Mobile control buttons -->
530
+ <div id="mobile-controls">
531
+ <button id="mobile-mode-toggle" class="mobile-btn" title="Switch mode (Shift+Tab)">Mode</button>
532
+ <button id="mobile-enter-btn" class="mobile-btn" title="Send Enter key">Enter</button>
533
+ <button id="mobile-stop-btn" class="mobile-btn" title="Stop (Ctrl+C)">Stop</button>
534
+ <button id="mobile-exit-btn" class="mobile-btn" title="Exit session">Exit</button>
535
+ </div>
536
+ </div>
537
+
538
+ <!-- xterm.js scripts from CDN (non-scoped package names for UMD globals) -->
539
+ <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
540
+ <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
541
+ <script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.min.js"></script>
542
+
543
+ <script src="/static/terminal.js"></script>
544
+ </body>
545
+ </html>