vibesurf 0.1.9a5__py3-none-any.whl → 0.1.10__py3-none-any.whl

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 (41) hide show
  1. vibe_surf/_version.py +2 -2
  2. vibe_surf/agents/vibe_surf_agent.py +25 -15
  3. vibe_surf/backend/api/browser.py +66 -0
  4. vibe_surf/backend/api/task.py +2 -1
  5. vibe_surf/backend/main.py +76 -1
  6. vibe_surf/backend/shared_state.py +2 -0
  7. vibe_surf/browser/agent_browser_session.py +312 -62
  8. vibe_surf/browser/browser_manager.py +57 -92
  9. vibe_surf/browser/watchdogs/dom_watchdog.py +43 -43
  10. vibe_surf/chrome_extension/background.js +84 -0
  11. vibe_surf/chrome_extension/manifest.json +3 -1
  12. vibe_surf/chrome_extension/scripts/file-manager.js +526 -0
  13. vibe_surf/chrome_extension/scripts/history-manager.js +658 -0
  14. vibe_surf/chrome_extension/scripts/modal-manager.js +487 -0
  15. vibe_surf/chrome_extension/scripts/session-manager.js +31 -8
  16. vibe_surf/chrome_extension/scripts/settings-manager.js +1214 -0
  17. vibe_surf/chrome_extension/scripts/ui-manager.js +770 -3186
  18. vibe_surf/chrome_extension/sidepanel.html +27 -4
  19. vibe_surf/chrome_extension/styles/activity.css +574 -0
  20. vibe_surf/chrome_extension/styles/base.css +76 -0
  21. vibe_surf/chrome_extension/styles/history-modal.css +791 -0
  22. vibe_surf/chrome_extension/styles/input.css +429 -0
  23. vibe_surf/chrome_extension/styles/layout.css +186 -0
  24. vibe_surf/chrome_extension/styles/responsive.css +454 -0
  25. vibe_surf/chrome_extension/styles/settings-environment.css +165 -0
  26. vibe_surf/chrome_extension/styles/settings-forms.css +389 -0
  27. vibe_surf/chrome_extension/styles/settings-modal.css +141 -0
  28. vibe_surf/chrome_extension/styles/settings-profiles.css +244 -0
  29. vibe_surf/chrome_extension/styles/settings-responsive.css +144 -0
  30. vibe_surf/chrome_extension/styles/settings-utilities.css +25 -0
  31. vibe_surf/chrome_extension/styles/variables.css +54 -0
  32. vibe_surf/cli.py +1 -0
  33. vibe_surf/controller/vibesurf_tools.py +0 -2
  34. {vibesurf-0.1.9a5.dist-info → vibesurf-0.1.10.dist-info}/METADATA +18 -2
  35. {vibesurf-0.1.9a5.dist-info → vibesurf-0.1.10.dist-info}/RECORD +39 -23
  36. vibe_surf/chrome_extension/styles/main.css +0 -2338
  37. vibe_surf/chrome_extension/styles/settings.css +0 -1100
  38. {vibesurf-0.1.9a5.dist-info → vibesurf-0.1.10.dist-info}/WHEEL +0 -0
  39. {vibesurf-0.1.9a5.dist-info → vibesurf-0.1.10.dist-info}/entry_points.txt +0 -0
  40. {vibesurf-0.1.9a5.dist-info → vibesurf-0.1.10.dist-info}/licenses/LICENSE +0 -0
  41. {vibesurf-0.1.9a5.dist-info → vibesurf-0.1.10.dist-info}/top_level.txt +0 -0
vibe_surf/chrome_extension/styles/input.css ADDED
@@ -0,0 +1,429 @@
1
+ /* Input and Control Styles - VibeSurf Extension */
2
+
3
+ /* Control Panel */
4
+ .control-panel {
5
+ padding: var(--spacing-md);
6
+ background-color: var(--bg-secondary);
7
+ border-bottom: 1px solid var(--border-color);
8
+ display: flex;
9
+ gap: var(--spacing-sm);
10
+ align-items: center;
11
+ }
12
+
13
+ .control-btn {
14
+ display: flex;
15
+ align-items: center;
16
+ gap: var(--spacing-xs);
17
+ padding: var(--spacing-sm) var(--spacing-md);
18
+ border: 1px solid var(--border-color);
19
+ border-radius: var(--radius-md);
20
+ background-color: var(--bg-primary);
21
+ color: var(--text-primary);
22
+ font-size: var(--font-size-sm);
23
+ font-weight: var(--font-weight-medium);
24
+ cursor: pointer;
25
+ transition: all var(--transition-fast);
26
+ }
27
+
28
+ .control-btn:hover {
29
+ border-color: var(--border-hover);
30
+ background-color: var(--bg-hover);
31
+ }
32
+
33
+ .control-btn:active {
34
+ transform: scale(0.98);
35
+ }
36
+
37
+ .cancel-btn {
38
+ color: var(--danger-color);
39
+ border-color: var(--danger-color);
40
+ }
41
+
42
+ .cancel-btn:hover {
43
+ background-color: rgba(220, 53, 69, 0.1);
44
+ }
45
+
46
+ .resume-btn {
47
+ color: var(--accent-color);
48
+ border-color: var(--accent-color);
49
+ }
50
+
51
+ .resume-btn:hover {
52
+ background-color: rgba(40, 167, 69, 0.1);
53
+ }
54
+
55
+ .terminate-btn {
56
+ color: var(--danger-color);
57
+ border-color: var(--danger-color);
58
+ }
59
+
60
+ .terminate-btn:hover {
61
+ background-color: rgba(220, 53, 69, 0.1);
62
+ }
63
+
64
+ /* Control Panel Error State */
65
+ .control-panel.error-state {
66
+ background-color: rgba(220, 53, 69, 0.05);
67
+ border-left: 4px solid var(--danger-color);
68
+ border-color: rgba(220, 53, 69, 0.2);
69
+ box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
70
+ }
71
+
72
+ .control-panel.error-state::before {
73
+ content: '⚠️ Error occurred - task controls remain available';
74
+ display: block;
75
+ font-size: var(--font-size-xs);
76
+ color: var(--danger-color);
77
+ margin-bottom: var(--spacing-sm);
78
+ padding: var(--spacing-xs) var(--spacing-sm);
79
+ background-color: rgba(220, 53, 69, 0.1);
80
+ border-radius: var(--radius-sm);
81
+ border: 1px solid rgba(220, 53, 69, 0.2);
82
+ font-weight: var(--font-weight-medium);
83
+ }
84
+
85
+ .control-panel.error-state .control-btn {
86
+ border-color: rgba(220, 53, 69, 0.3);
87
+ background-color: rgba(255, 255, 255, 0.9);
88
+ }
89
+
90
+ .control-panel.error-state .control-btn:hover {
91
+ background-color: var(--bg-primary);
92
+ box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
93
+ }
94
+
95
+ /* Input Section */
96
+ .input-section {
97
+ background-color: var(--bg-primary);
98
+ border-top: 1px solid var(--border-color);
99
+ padding: var(--spacing-md);
100
+ }
101
+
102
+ .input-container {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: var(--spacing-sm);
106
+ }
107
+
108
+ .input-main {
109
+ display: flex;
110
+ flex-direction: column;
111
+ }
112
+
113
+ .textarea-container {
114
+ position: relative;
115
+ display: flex;
116
+ flex-direction: column;
117
+ }
118
+
119
+ .input-footer {
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: flex-start;
123
+ margin-top: calc(var(--spacing-xs) / 2);
124
+ }
125
+
126
+ .llm-select {
127
+ padding: var(--spacing-sm) var(--spacing-md);
128
+ border: 1px solid var(--border-color);
129
+ border-radius: var(--radius-md);
130
+ background-color: var(--bg-primary);
131
+ font-size: var(--font-size-sm);
132
+ color: var(--text-primary);
133
+ cursor: pointer;
134
+ transition: border-color var(--transition-fast);
135
+ min-width: 120px;
136
+ }
137
+
138
+ .llm-select.compact {
139
+ max-width: 100px;
140
+ font-size: var(--font-size-xs);
141
+ padding: var(--spacing-xs) var(--spacing-sm);
142
+ }
143
+
144
+ .llm-select:focus {
145
+ outline: none;
146
+ border-color: var(--primary-color);
147
+ box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
148
+ }
149
+
150
+ .task-input {
151
+ width: 100%;
152
+ padding: var(--spacing-md);
153
+ padding-right: 80px; /* Make space for buttons */
154
+ border: 1px solid var(--border-color);
155
+ border-radius: var(--radius-lg);
156
+ background-color: var(--bg-primary);
157
+ font-size: var(--font-size-sm);
158
+ font-family: inherit;
159
+ line-height: 1.5;
160
+ resize: vertical;
161
+ transition: all var(--transition-fast);
162
+ min-height: 44px;
163
+ max-height: 200px;
164
+ overflow-y: auto;
165
+ }
166
+
167
+ .task-input:focus {
168
+ outline: none;
169
+ border-color: var(--primary-color);
170
+ box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
171
+ }
172
+
173
+ .task-input::placeholder {
174
+ color: var(--text-muted);
175
+ }
176
+
177
+ .input-actions {
178
+ position: absolute;
179
+ right: var(--spacing-sm);
180
+ bottom: var(--spacing-sm);
181
+ display: flex;
182
+ gap: var(--spacing-xs);
183
+ z-index: 1;
184
+ }
185
+
186
+ .send-btn {
187
+ background-color: var(--primary-color);
188
+ border-color: var(--primary-color);
189
+ color: white;
190
+ }
191
+
192
+ .send-btn:hover {
193
+ background-color: var(--primary-hover);
194
+ border-color: var(--primary-hover);
195
+ }
196
+
197
+ .send-btn:disabled {
198
+ background-color: var(--border-color);
199
+ border-color: var(--border-color);
200
+ color: var(--text-muted);
201
+ cursor: not-allowed;
202
+ transform: none;
203
+ opacity: 0.5;
204
+ }
205
+
206
+ /* Task Running Disabled State */
207
+ .task-running-disabled {
208
+ opacity: 0.5 !important;
209
+ cursor: not-allowed !important;
210
+ pointer-events: none !important;
211
+ position: relative;
212
+ }
213
+
214
+ .task-running-disabled::after {
215
+ content: '🔒';
216
+ position: absolute;
217
+ top: 50%;
218
+ right: 8px;
219
+ transform: translateY(-50%);
220
+ font-size: 12px;
221
+ opacity: 0.7;
222
+ pointer-events: none;
223
+ }
224
+
225
+ /* Specific styles for different elements when disabled */
226
+ button.task-running-disabled {
227
+ background-color: #f0f0f0 !important;
228
+ border-color: #ddd !important;
229
+ color: #999 !important;
230
+ }
231
+
232
+ input.task-running-disabled,
233
+ textarea.task-running-disabled,
234
+ select.task-running-disabled {
235
+ background-color: #f9f9f9 !important;
236
+ border-color: #ddd !important;
237
+ color: #999 !important;
238
+ }
239
+
240
+ /* Task status indicator in control panel */
241
+ .control-panel .task-status-indicator {
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 8px;
245
+ padding: 8px 12px;
246
+ background: rgba(255, 193, 7, 0.1);
247
+ border: 1px solid rgba(255, 193, 7, 0.3);
248
+ border-radius: 6px;
249
+ font-size: 12px;
250
+ color: #856404;
251
+ margin-bottom: 8px;
252
+ }
253
+
254
+ .control-panel .task-status-indicator::before {
255
+ content: '⚠️';
256
+ font-size: 14px;
257
+ }
258
+
259
+ /* Enhanced warning modal styles */
260
+ .modal-overlay.warning-modal {
261
+ z-index: 15000;
262
+ }
263
+
264
+ .warning-modal .modal-content {
265
+ max-width: 500px;
266
+ background: white;
267
+ border-radius: 12px;
268
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
269
+ }
270
+
271
+ .warning-header {
272
+ display: flex;
273
+ align-items: center;
274
+ gap: 12px;
275
+ padding: 20px 20px 0;
276
+ border-bottom: 1px solid #eee;
277
+ margin-bottom: 16px;
278
+ }
279
+
280
+ .warning-icon {
281
+ font-size: 24px;
282
+ }
283
+
284
+ .warning-header h3 {
285
+ margin: 0;
286
+ color: #dc3545;
287
+ font-size: 18px;
288
+ }
289
+
290
+ .warning-body {
291
+ padding: 0 20px 16px;
292
+ }
293
+
294
+ .warning-body p {
295
+ margin: 0 0 12px;
296
+ color: #666;
297
+ line-height: 1.5;
298
+ }
299
+
300
+ .warning-details {
301
+ background: #f8f9fa;
302
+ border: 1px solid #e9ecef;
303
+ border-radius: 4px;
304
+ padding: 12px;
305
+ font-family: monospace;
306
+ font-size: 12px;
307
+ color: #495057;
308
+ white-space: pre-wrap;
309
+ margin: 0;
310
+ }
311
+
312
+ .warning-actions {
313
+ display: flex;
314
+ gap: 8px;
315
+ padding: 16px 20px 20px;
316
+ justify-content: flex-end;
317
+ }
318
+
319
+ .warning-actions .btn {
320
+ padding: 8px 16px;
321
+ border: none;
322
+ border-radius: 6px;
323
+ font-size: 14px;
324
+ cursor: pointer;
325
+ transition: all 0.2s ease;
326
+ }
327
+
328
+ .warning-actions .btn-danger {
329
+ background: #dc3545;
330
+ color: white;
331
+ }
332
+
333
+ .warning-actions .btn-danger:hover {
334
+ background: #c82333;
335
+ }
336
+
337
+ .warning-actions .btn-secondary {
338
+ background: #6c757d;
339
+ color: white;
340
+ }
341
+
342
+ .warning-actions .btn-secondary:hover {
343
+ background: #545b62;
344
+ }
345
+
346
+ .warning-actions .btn-primary {
347
+ background: #007bff;
348
+ color: white;
349
+ }
350
+
351
+ .warning-actions .btn-primary:hover {
352
+ background: #0056b3;
353
+ }
354
+
355
+ /* File Upload Styles */
356
+ .uploaded-files-container {
357
+ margin-top: var(--spacing-sm);
358
+ margin-bottom: var(--spacing-sm);
359
+ padding: var(--spacing-sm);
360
+ background-color: var(--bg-secondary);
361
+ border: 1px solid var(--border-color);
362
+ border-radius: var(--radius-md);
363
+ max-height: 120px;
364
+ overflow-y: auto;
365
+ display: none; /* Hidden by default */
366
+ }
367
+
368
+ .uploaded-files-container .files-items {
369
+ display: flex;
370
+ flex-direction: column;
371
+ gap: var(--spacing-xs);
372
+ }
373
+
374
+ .uploaded-files-container .file-item {
375
+ display: flex;
376
+ align-items: center;
377
+ justify-content: space-between;
378
+ padding: var(--spacing-xs) var(--spacing-sm);
379
+ background-color: var(--bg-primary);
380
+ border: 1px solid var(--border-color);
381
+ border-radius: var(--radius-sm);
382
+ font-size: var(--font-size-sm);
383
+ }
384
+
385
+ .uploaded-files-container .file-name {
386
+ flex: 1;
387
+ color: var(--text-primary);
388
+ font-weight: var(--font-weight-medium);
389
+ overflow: hidden;
390
+ text-overflow: ellipsis;
391
+ white-space: nowrap;
392
+ margin-right: var(--spacing-sm);
393
+ }
394
+
395
+ .uploaded-files-container .file-remove-btn {
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
399
+ width: 20px;
400
+ height: 20px;
401
+ border: none;
402
+ border-radius: var(--radius-sm);
403
+ background-color: var(--danger-color);
404
+ color: white;
405
+ font-size: 14px;
406
+ font-weight: bold;
407
+ cursor: pointer;
408
+ transition: all var(--transition-fast);
409
+ flex-shrink: 0;
410
+ }
411
+
412
+ .uploaded-files-container .file-remove-btn:hover {
413
+ background-color: #c82333;
414
+ transform: scale(1.1);
415
+ }
416
+
417
+ .uploaded-files-container .file-remove-btn:active {
418
+ transform: scale(0.95);
419
+ }
420
+
421
+ .uploaded-files-container .error-message {
422
+ padding: var(--spacing-sm);
423
+ background-color: rgba(220, 53, 69, 0.1);
424
+ border: 1px solid var(--danger-color);
425
+ border-radius: var(--radius-sm);
426
+ color: var(--danger-color);
427
+ font-size: var(--font-size-sm);
428
+ text-align: center;
429
+ }
vibe_surf/chrome_extension/styles/layout.css ADDED
@@ -0,0 +1,186 @@
1
+ /* Layout Styles - VibeSurf Extension */
2
+
3
+ /* Container */
4
+ .vibesurf-container {
5
+ display: flex;
6
+ flex-direction: column;
7
+ height: 100vh;
8
+ width: 100%;
9
+ min-width: 320px;
10
+ background-color: var(--bg-primary);
11
+ resize: horizontal;
12
+ overflow: auto;
13
+ }
14
+
15
+ /* Header */
16
+ .header {
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: space-between;
20
+ padding: var(--spacing-lg);
21
+ background-color: var(--bg-primary);
22
+ border-bottom: 1px solid var(--border-color);
23
+ min-height: 56px;
24
+ }
25
+
26
+ .header-left {
27
+ display: flex;
28
+ align-items: center;
29
+ }
30
+
31
+ .logo {
32
+ display: flex;
33
+ align-items: center;
34
+ color: var(--primary-color);
35
+ font-weight: var(--font-weight-semibold);
36
+ }
37
+
38
+ .logo-brand {
39
+ display: flex;
40
+ align-items: center;
41
+ gap: var(--spacing-sm);
42
+ color: var(--primary-color);
43
+ font-weight: var(--font-weight-semibold);
44
+ }
45
+
46
+ .logo-image {
47
+ width: 24px;
48
+ height: 24px;
49
+ border-radius: var(--radius-sm);
50
+ object-fit: contain;
51
+ flex-shrink: 0;
52
+ }
53
+
54
+ .logo-content {
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: var(--spacing-xs);
58
+ }
59
+
60
+ .logo-text {
61
+ font-size: var(--font-size-lg);
62
+ line-height: 1.2;
63
+ }
64
+
65
+ .session-info {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: var(--spacing-xs);
69
+ font-size: var(--font-size-xs);
70
+ color: var(--text-secondary);
71
+ }
72
+
73
+ .session-label {
74
+ font-weight: var(--font-weight-medium);
75
+ }
76
+
77
+ #session-id {
78
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
79
+ background-color: var(--bg-tertiary);
80
+ padding: 2px 4px;
81
+ border-radius: var(--radius-sm);
82
+ max-width: 120px;
83
+ overflow: hidden;
84
+ text-overflow: ellipsis;
85
+ white-space: nowrap;
86
+ }
87
+
88
+ .copy-btn {
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ width: 20px;
93
+ height: 20px;
94
+ border: none;
95
+ border-radius: var(--radius-sm);
96
+ background-color: transparent;
97
+ color: var(--text-muted);
98
+ cursor: pointer;
99
+ transition: all var(--transition-fast);
100
+ }
101
+
102
+ .copy-btn:hover {
103
+ background-color: var(--bg-hover);
104
+ color: var(--text-secondary);
105
+ }
106
+
107
+ .copy-btn:active {
108
+ background-color: var(--bg-active);
109
+ transform: scale(0.95);
110
+ }
111
+
112
+ .header-right {
113
+ display: flex;
114
+ align-items: center;
115
+ gap: var(--spacing-xs);
116
+ }
117
+
118
+ .icon-btn {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ width: 32px;
123
+ height: 32px;
124
+ border: none;
125
+ border-radius: var(--radius-md);
126
+ background-color: transparent;
127
+ color: var(--text-secondary);
128
+ cursor: pointer;
129
+ transition: all var(--transition-fast);
130
+ }
131
+
132
+ .icon-btn:hover {
133
+ background-color: var(--bg-hover);
134
+ color: var(--text-primary);
135
+ }
136
+
137
+ .icon-btn:active {
138
+ background-color: var(--bg-active);
139
+ transform: scale(0.95);
140
+ }
141
+
142
+ /* Main Content */
143
+ .main-content {
144
+ flex: 1;
145
+ display: flex;
146
+ flex-direction: column;
147
+ overflow: hidden;
148
+ background-color: var(--bg-primary);
149
+ }
150
+
151
+ /* Common Button Styles */
152
+ .action-btn {
153
+ display: flex;
154
+ align-items: center;
155
+ justify-content: center;
156
+ width: 32px;
157
+ height: 32px;
158
+ border: 1px solid var(--border-color);
159
+ border-radius: var(--radius-md);
160
+ background-color: var(--bg-secondary);
161
+ color: var(--text-secondary);
162
+ cursor: pointer;
163
+ transition: all var(--transition-fast);
164
+ opacity: 0.8;
165
+ }
166
+
167
+ .action-btn:hover {
168
+ border-color: var(--border-hover);
169
+ background-color: var(--bg-hover);
170
+ color: var(--text-primary);
171
+ opacity: 1;
172
+ transform: scale(1.05);
173
+ }
174
+
175
+ .action-btn:active {
176
+ transform: scale(0.95);
177
+ }
178
+
179
+ .action-btn:disabled {
180
+ background-color: var(--border-color);
181
+ border-color: var(--border-color);
182
+ color: var(--text-muted);
183
+ cursor: not-allowed;
184
+ transform: none;
185
+ opacity: 0.5;
186
+ }