shell-mirror 1.5.109 → 1.5.111

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 (6) hide show
  1. package/package.json +1 -1
  2. package/public/app/dashboard.css +587 -1104
  3. package/public/app/dashboard.html +2 -5
  4. package/public/app/dashboard.js +24 -78
  5. package/public/app/terminal.html +16 -4
  6. package/public/app/terminal.js +4 -1
package/public/app/dashboard.css CHANGED
@@ -1,4 +1,21 @@
1
- /* Shell Mirror Dashboard Styles */
1
+ /* Shell Mirror Dashboard - Dark Theme (Kraken Pro Style) */
2
+
3
+ :root {
4
+ --bg-primary: #0a0b0d;
5
+ --bg-secondary: #141519;
6
+ --bg-tertiary: #1a1b20;
7
+ --bg-hover: #22232a;
8
+ --text-primary: #ffffff;
9
+ --text-secondary: #8a8f98;
10
+ --text-muted: #5a5f6a;
11
+ --accent: #5d5fef;
12
+ --accent-hover: #4a4cd6;
13
+ --success: #00c853;
14
+ --warning: #ff9800;
15
+ --danger: #ef4444;
16
+ --border: #2a2b30;
17
+ --border-light: #3a3b40;
18
+ }
2
19
 
3
20
  * {
4
21
  margin: 0;
@@ -8,91 +25,61 @@
8
25
 
9
26
  body {
10
27
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
11
- line-height: 1.6;
12
- color: #333;
13
- background: #f5f7fa;
28
+ line-height: 1.5;
29
+ color: var(--text-primary);
30
+ background: var(--bg-primary);
14
31
  min-height: 100vh;
15
32
  }
16
33
 
17
- /* Header */
34
+ /* Header - Minimal */
18
35
  .dashboard-header {
19
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
- color: white;
21
- padding: 20px 0;
22
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
36
+ background: var(--bg-secondary);
37
+ border-bottom: 1px solid var(--border);
38
+ padding: 12px 0;
23
39
  }
24
40
 
25
41
  .header-content {
26
- max-width: 1200px;
42
+ max-width: 800px;
27
43
  margin: 0 auto;
28
- padding: 0 20px;
44
+ padding: 0 16px;
29
45
  display: flex;
30
46
  justify-content: space-between;
31
47
  align-items: center;
32
48
  }
33
49
 
34
50
  .logo h1 {
35
- font-size: 1.8rem;
36
- font-weight: 700;
37
- margin-bottom: 2px;
51
+ font-size: 1.2rem;
52
+ font-weight: 600;
53
+ color: var(--text-primary);
38
54
  }
39
55
 
40
56
  .logo .subtitle {
41
- font-size: 0.9rem;
42
- opacity: 0.8;
57
+ display: none;
43
58
  }
44
59
 
45
60
  .header-right {
46
- display: flex;
47
- align-items: center;
48
- gap: 20px;
49
- }
50
-
51
- .user-section {
52
- display: flex;
53
- align-items: center;
54
- gap: 15px;
55
- }
56
-
57
- .dashboard-controls {
58
61
  display: flex;
59
62
  align-items: center;
60
63
  gap: 12px;
61
- padding: 8px 16px;
62
- background: rgba(255, 255, 255, 0.15);
63
- border-radius: 8px;
64
- backdrop-filter: blur(10px);
65
64
  }
66
65
 
67
- .help-button {
68
- background: rgba(255, 255, 255, 0.2);
69
- border: 1px solid rgba(255, 255, 255, 0.3);
70
- border-radius: 8px;
71
- color: white;
72
- padding: 8px 16px;
73
- cursor: pointer;
74
- transition: all 0.2s ease;
75
- font-size: 0.9rem;
76
- font-weight: 500;
66
+ .user-section {
77
67
  display: flex;
78
68
  align-items: center;
79
- gap: 6px;
80
- }
81
-
82
- .help-button:hover {
83
- background: rgba(255, 255, 255, 0.3);
84
- transform: translateY(-1px);
69
+ gap: 8px;
85
70
  }
86
71
 
72
+ /* User Dropdown */
87
73
  .user-info {
88
74
  display: flex;
89
75
  align-items: center;
90
- gap: 10px;
91
- position: relative;
76
+ gap: 8px;
92
77
  }
93
78
 
94
79
  .user-name {
80
+ font-size: 0.85rem;
95
81
  font-weight: 500;
82
+ color: var(--text-secondary);
96
83
  }
97
84
 
98
85
  .user-dropdown {
@@ -100,410 +87,246 @@ body {
100
87
  }
101
88
 
102
89
  .dropdown-btn {
103
- background: rgba(255, 255, 255, 0.2);
104
- border: 1px solid rgba(255, 255, 255, 0.3);
105
- border-radius: 8px;
106
- color: white;
107
- padding: 8px 12px;
90
+ background: var(--bg-tertiary);
91
+ border: 1px solid var(--border);
92
+ border-radius: 6px;
93
+ color: var(--text-secondary);
94
+ padding: 6px 10px;
108
95
  cursor: pointer;
109
- transition: all 0.2s ease;
96
+ transition: all 0.15s ease;
97
+ font-size: 0.85rem;
110
98
  }
111
99
 
112
100
  .dropdown-btn:hover {
113
- background: rgba(255, 255, 255, 0.3);
101
+ background: var(--bg-hover);
102
+ color: var(--text-primary);
114
103
  }
115
104
 
116
105
  .dropdown-content {
117
106
  display: none;
118
107
  position: absolute;
119
108
  right: 0;
120
- top: 100%;
121
- background: white;
122
- min-width: 150px;
123
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
109
+ top: calc(100% + 4px);
110
+ background: var(--bg-secondary);
111
+ border: 1px solid var(--border);
112
+ min-width: 140px;
124
113
  border-radius: 8px;
125
114
  overflow: hidden;
126
115
  z-index: 1000;
127
116
  }
128
117
 
129
118
  .dropdown-content a {
130
- color: #333;
131
- padding: 12px 16px;
119
+ color: var(--text-secondary);
120
+ padding: 10px 14px;
132
121
  text-decoration: none;
133
122
  display: block;
134
- transition: background 0.2s ease;
123
+ font-size: 0.85rem;
124
+ transition: all 0.15s ease;
135
125
  }
136
126
 
137
127
  .dropdown-content a:hover {
138
- background: #f8f9fa;
128
+ background: var(--bg-hover);
129
+ color: var(--text-primary);
139
130
  }
140
131
 
141
132
  .user-dropdown:hover .dropdown-content {
142
133
  display: block;
143
134
  }
144
135
 
145
- /* Dashboard Controls */
146
- .refresh-btn {
147
- background: rgba(255, 255, 255, 0.2);
148
- border: 1px solid rgba(255, 255, 255, 0.3);
149
- border-radius: 50%;
150
- color: white;
151
- width: 36px;
152
- height: 36px;
153
- cursor: pointer;
154
- transition: all 0.2s ease;
155
- display: flex;
156
- align-items: center;
157
- justify-content: center;
158
- font-size: 1rem;
159
- }
160
-
161
- .refresh-btn:hover:not(:disabled) {
162
- background: rgba(255, 255, 255, 0.3);
163
- transform: scale(1.05);
164
- }
165
-
166
- .refresh-btn.loading {
167
- opacity: 0.7;
168
- cursor: not-allowed;
169
- }
170
-
171
- .refresh-btn.loading .refresh-icon {
172
- animation: spin 1s linear infinite;
173
- }
174
-
175
- /* Inline Refresh Button */
176
- .refresh-btn-inline {
177
- background: #f8f9fa;
178
- border: 1px solid #e9ecef;
179
- border-radius: 50%;
180
- color: #666;
181
- width: 32px;
182
- height: 32px;
183
- cursor: pointer;
184
- transition: all 0.2s ease;
185
- display: flex;
186
- align-items: center;
187
- justify-content: center;
188
- font-size: 0.9rem;
189
- }
190
-
191
- .refresh-btn-inline:hover:not(:disabled) {
192
- background: #e9ecef;
193
- color: #333;
194
- transform: scale(1.05);
195
- }
196
-
197
- .refresh-btn-inline.loading {
198
- opacity: 0.7;
199
- cursor: not-allowed;
200
- }
201
-
202
- .refresh-btn-inline.loading .refresh-icon {
203
- animation: spin 1s linear infinite;
204
- }
205
-
206
- /* Cleanup Button */
207
- .cleanup-btn-inline {
208
- background: #ffebee;
209
- border: 1px solid #f48fb1;
210
- border-radius: 50%;
211
- color: #d32f2f;
212
- width: 32px;
213
- height: 32px;
214
- cursor: pointer;
215
- transition: all 0.2s ease;
216
- display: flex;
217
- align-items: center;
218
- justify-content: center;
219
- font-size: 0.9rem;
220
- }
221
-
222
- .cleanup-btn-inline:hover:not(:disabled) {
223
- background: #f8bbd9;
224
- color: #b71c1c;
225
- transform: scale(1.05);
226
- }
227
-
228
- /* Text Action Buttons (No Emoji) */
136
+ /* Hide unnecessary header elements */
137
+ .dashboard-controls,
138
+ .help-button,
139
+ .refresh-btn,
140
+ .cleanup-btn-inline,
229
141
  .btn-text-action {
230
- background: #f8f9fa;
231
- border: 1px solid #dee2e6;
232
- border-radius: 6px;
233
- color: #495057;
234
- padding: 6px 12px;
235
- font-size: 0.8rem;
236
- font-weight: 500;
237
- cursor: pointer;
238
- transition: all 0.15s ease;
239
- }
240
-
241
- .btn-text-action:hover:not(:disabled) {
242
- background: #e9ecef;
243
- border-color: #ced4da;
244
- color: #212529;
245
- }
246
-
247
- .btn-text-action.loading {
248
- opacity: 0.7;
249
- cursor: not-allowed;
250
- }
251
-
252
- .btn-text-action.btn-cleanup {
253
- background: #fff5f5;
254
- border-color: #feb2b2;
255
- color: #c53030;
256
- }
257
-
258
- .btn-text-action.btn-cleanup:hover:not(:disabled) {
259
- background: #fed7d7;
260
- border-color: #fc8181;
261
- }
262
-
263
- /* Refresh Time in Card Header */
264
- .refresh-time {
265
- font-size: 0.75rem;
266
- color: #718096;
267
- font-weight: 400;
268
- margin-left: 8px;
269
- }
270
-
271
- /* Animated Loading Dots */
272
- .loading-dots {
273
- display: inline-flex;
274
- gap: 2px;
275
- }
276
-
277
- .loading-dots span {
278
- animation: loadingDot 1.4s infinite;
279
- opacity: 0.2;
280
- }
281
-
282
- .loading-dots span:nth-child(1) {
283
- animation-delay: 0s;
284
- }
285
-
286
- .loading-dots span:nth-child(2) {
287
- animation-delay: 0.2s;
288
- }
289
-
290
- .loading-dots span:nth-child(3) {
291
- animation-delay: 0.4s;
292
- }
293
-
294
- @keyframes loadingDot {
295
- 0%, 80%, 100% {
296
- opacity: 0.2;
297
- }
298
- 40% {
299
- opacity: 1;
300
- }
301
- }
302
-
303
- .connection-status {
304
- font-size: 0.8rem;
305
- font-weight: 500;
306
- white-space: nowrap;
307
- padding: 4px 8px;
308
- border-radius: 12px;
309
- background: rgba(255, 255, 255, 0.1);
310
- }
311
-
312
- .connection-status.connected {
313
- color: #4caf50;
314
- }
315
-
316
- .connection-status.disconnected {
317
- color: #ff9800;
318
- }
319
-
320
- .connection-status.error,
321
- .connection-status.failed {
322
- color: #f44336;
323
- }
324
-
325
- .refresh-status {
326
- font-size: 0.75rem;
327
- opacity: 0.8;
328
- white-space: nowrap;
329
- }
330
-
331
- /* Buttons */
332
- .btn-primary {
333
- background: #4285F4;
334
- color: white;
335
- padding: 12px 24px;
336
- border: none;
337
- border-radius: 8px;
338
- font-weight: 600;
339
- cursor: pointer;
340
- transition: all 0.2s ease;
341
- display: inline-flex;
342
- align-items: center;
343
- text-decoration: none;
344
- }
345
-
346
- .btn-primary:hover {
347
- background: #3367d6;
348
- transform: translateY(-1px);
142
+ display: none !important;
349
143
  }
350
144
 
351
- .btn-primary.small {
352
- padding: 8px 16px;
353
- font-size: 0.9rem;
354
- }
355
-
356
- /* Main Dashboard */
145
+ /* Main Content */
357
146
  .dashboard-main {
358
- max-width: 1200px;
147
+ max-width: 800px;
359
148
  margin: 0 auto;
360
- padding: 40px 20px;
149
+ padding: 20px 16px;
361
150
  }
362
151
 
152
+ /* Hide Quick Actions completely */
363
153
  .dashboard-grid {
364
- display: grid;
365
- grid-template-columns: 1fr 300px;
366
- gap: 30px;
367
- margin-bottom: 30px;
154
+ display: block;
368
155
  }
369
156
 
157
+ /* Cards - Minimal */
370
158
  .dashboard-card {
371
- background: white;
372
- border-radius: 12px;
373
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
374
- padding: 24px;
375
- transition: all 0.2s ease;
159
+ background: var(--bg-secondary);
160
+ border: 1px solid var(--border);
161
+ border-radius: 8px;
162
+ padding: 16px;
163
+ margin-bottom: 16px;
376
164
  }
377
165
 
378
166
  .dashboard-card:hover {
379
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
167
+ box-shadow: none;
380
168
  }
381
169
 
382
170
  .dashboard-card.full-width {
383
- grid-column: 1 / -1;
171
+ display: block;
384
172
  }
385
173
 
174
+ /* Card Header */
386
175
  .card-header {
387
176
  display: flex;
388
177
  justify-content: space-between;
389
178
  align-items: center;
390
- margin-bottom: 20px;
179
+ margin-bottom: 12px;
391
180
  }
392
181
 
393
182
  .card-title-section {
394
- display: flex;
395
- align-items: center;
396
- gap: 12px;
397
- }
398
-
399
- .agent-actions-header {
400
183
  display: flex;
401
184
  align-items: center;
402
185
  gap: 8px;
403
186
  }
404
187
 
405
188
  .card-header h2 {
406
- font-size: 1.3rem;
189
+ font-size: 0.9rem;
407
190
  font-weight: 600;
408
- color: #333;
191
+ color: var(--text-secondary);
192
+ text-transform: uppercase;
193
+ letter-spacing: 0.5px;
409
194
  }
410
195
 
411
196
  .agent-count {
412
- background: #e3f2fd;
413
- color: #1976d2;
414
- padding: 4px 8px;
415
- border-radius: 12px;
416
- font-size: 0.8rem;
417
- font-weight: 500;
197
+ background: var(--accent);
198
+ color: white;
199
+ padding: 2px 8px;
200
+ border-radius: 10px;
201
+ font-size: 0.75rem;
202
+ font-weight: 600;
203
+ }
204
+
205
+ .refresh-time {
206
+ font-size: 0.7rem;
207
+ color: var(--text-muted);
418
208
  }
419
209
 
420
- .card-content {
421
- color: #666;
210
+ /* Hide header action buttons */
211
+ .agent-actions-header {
212
+ display: none;
422
213
  }
423
214
 
424
215
  /* Agent Items */
425
216
  .agent-item {
426
- display: flex;
427
- flex-direction: column;
428
- padding: 16px 0;
429
- border-bottom: 1px solid #f0f0f0;
217
+ padding: 12px 0;
218
+ border-bottom: 1px solid var(--border);
219
+ }
220
+
221
+ .agent-item:last-child {
222
+ border-bottom: none;
223
+ padding-bottom: 0;
224
+ }
225
+
226
+ .agent-item:first-child {
227
+ padding-top: 0;
430
228
  }
431
229
 
432
230
  .agent-header {
433
231
  display: flex;
434
232
  justify-content: space-between;
435
233
  align-items: center;
436
- width: 100%;
437
- }
438
-
439
- .agent-item:last-child {
440
- border-bottom: none;
441
234
  }
442
235
 
443
236
  .agent-info {
444
237
  flex: 1;
445
238
  }
446
239
 
240
+ .agent-name-row {
241
+ display: flex;
242
+ align-items: center;
243
+ gap: 8px;
244
+ margin-bottom: 4px;
245
+ }
246
+
447
247
  .agent-name {
448
248
  font-weight: 600;
449
- color: #333;
450
- margin-bottom: 4px;
249
+ font-size: 1rem;
250
+ color: var(--text-primary);
251
+ }
252
+
253
+ .btn-delete-agent {
254
+ background: none;
255
+ border: none;
256
+ cursor: pointer;
257
+ font-size: 0.8rem;
258
+ opacity: 0.3;
259
+ transition: opacity 0.15s ease;
260
+ padding: 4px;
261
+ color: var(--text-secondary);
262
+ }
263
+
264
+ .btn-delete-agent:hover {
265
+ opacity: 1;
266
+ color: var(--danger);
451
267
  }
452
268
 
453
269
  .agent-status {
454
- display: inline-block;
455
- padding: 2px 8px;
456
- border-radius: 10px;
457
- font-size: 0.75rem;
270
+ display: inline-flex;
271
+ align-items: center;
272
+ gap: 6px;
273
+ font-size: 0.8rem;
458
274
  font-weight: 500;
459
- text-transform: uppercase;
275
+ color: var(--text-secondary);
460
276
  }
461
277
 
462
278
  .agent-status.online {
463
- background: #e8f5e8;
464
- color: #2e7d32;
279
+ color: var(--success);
280
+ background: none;
281
+ padding: 0;
282
+ }
283
+
284
+ .agent-status.online::before {
285
+ content: '';
286
+ width: 8px;
287
+ height: 8px;
288
+ background: var(--success);
289
+ border-radius: 50%;
465
290
  }
466
291
 
467
292
  .agent-status.recent {
468
- background: #fff3e0;
469
- color: #f57c00;
293
+ color: var(--warning);
294
+ background: none;
295
+ padding: 0;
470
296
  }
471
297
 
472
298
  .agent-status.offline {
473
- background: #ffebee;
474
- color: #c62828;
299
+ color: var(--danger);
300
+ background: none;
301
+ padding: 0;
475
302
  }
476
303
 
477
- .agent-last-seen {
478
- font-size: 0.8rem;
479
- color: #999;
480
- margin-top: 2px;
304
+ .agent-session-count {
305
+ color: var(--text-muted);
306
+ font-weight: 400;
307
+ font-size: 0.75rem;
481
308
  }
482
309
 
483
- .agent-sessions {
484
- font-size: 0.8rem;
485
- color: #4285f4;
486
- margin-top: 2px;
487
- font-weight: 500;
310
+ .agent-last-seen {
311
+ display: none;
488
312
  }
489
313
 
490
- /* Inline Session List Styles */
314
+ /* Inline Sessions */
491
315
  .agent-sessions-inline {
492
316
  margin-top: 12px;
493
- padding-top: 12px;
494
- border-top: 1px solid #eee;
495
- width: 100%;
317
+ padding-top: 0;
318
+ border-top: none;
496
319
  }
497
320
 
498
321
  .sessions-label {
499
- font-size: 0.8rem;
500
- color: #666;
501
- font-weight: 500;
502
- margin-bottom: 8px;
322
+ display: none;
503
323
  }
504
324
 
505
325
  .sessions-list {
506
- margin-bottom: 10px;
326
+ display: flex;
327
+ flex-direction: column;
328
+ gap: 6px;
329
+ margin-bottom: 8px;
507
330
  }
508
331
 
509
332
  .inline-session-item {
@@ -511,16 +334,15 @@ body {
511
334
  align-items: center;
512
335
  gap: 10px;
513
336
  padding: 10px 12px;
514
- margin-bottom: 6px;
515
- background: #f8f9fa;
516
- border-radius: 8px;
517
- border: 1px solid #eee;
518
- transition: all 0.2s ease;
337
+ background: var(--bg-tertiary);
338
+ border-radius: 6px;
339
+ border: 1px solid var(--border);
340
+ transition: all 0.15s ease;
519
341
  }
520
342
 
521
343
  .inline-session-item:hover {
522
- background: #fff;
523
- border-color: #4285f4;
344
+ background: var(--bg-hover);
345
+ border-color: var(--border-light);
524
346
  }
525
347
 
526
348
  .session-status-dot {
@@ -530,956 +352,617 @@ body {
530
352
  flex-shrink: 0;
531
353
  }
532
354
 
533
- .session-status-dot.active {
534
- background: #34a853;
535
- }
536
-
537
- .session-status-dot.crashed {
538
- background: #ea4335;
539
- }
540
-
541
355
  .session-name {
542
356
  font-weight: 500;
543
- color: #333;
544
- flex: 1;
545
357
  font-size: 0.9rem;
358
+ flex: 1;
546
359
  }
547
360
 
548
361
  .session-activity {
549
- font-size: 0.75rem;
550
- color: #888;
551
- margin-right: 8px;
362
+ display: none;
552
363
  }
553
364
 
554
365
  .btn-session-connect {
555
- background: #4285f4;
556
- color: white;
557
- border: none;
558
- border-radius: 6px;
559
366
  padding: 6px 14px;
560
367
  font-size: 0.8rem;
561
368
  font-weight: 500;
369
+ border: none;
370
+ border-radius: 4px;
562
371
  cursor: pointer;
563
- transition: all 0.2s ease;
372
+ transition: all 0.15s ease;
373
+ color: white;
564
374
  }
565
375
 
566
376
  .btn-session-connect:hover {
567
- background: #3367d6;
568
- transform: translateY(-1px);
377
+ transform: none;
378
+ filter: brightness(1.1);
569
379
  }
570
380
 
381
+ /* New Session Button */
571
382
  .btn-new-session {
572
- background: #fff;
573
- color: #4285f4;
574
- border: 1px dashed #4285f4;
575
- border-radius: 8px;
383
+ background: transparent;
384
+ color: var(--accent);
385
+ border: 1px dashed var(--border-light);
386
+ border-radius: 6px;
576
387
  padding: 10px 16px;
577
388
  font-size: 0.85rem;
578
389
  font-weight: 500;
579
390
  cursor: pointer;
580
391
  width: 100%;
581
- transition: all 0.2s ease;
392
+ transition: all 0.15s ease;
582
393
  }
583
394
 
584
395
  .btn-new-session:hover {
585
- background: #f0f7ff;
396
+ background: var(--bg-tertiary);
397
+ border-color: var(--accent);
586
398
  border-style: solid;
587
399
  }
588
400
 
589
- .agent-offline-message {
590
- margin-top: 12px;
591
- padding: 10px;
592
- background: #f5f5f5;
593
- border-radius: 6px;
594
- color: #999;
595
- font-size: 0.85rem;
596
- text-align: center;
597
- }
598
-
599
- .agent-name-row {
600
- display: flex;
601
- align-items: center;
602
- gap: 8px;
603
- }
604
-
605
- .btn-delete-agent {
606
- background: none;
607
- border: none;
608
- cursor: pointer;
609
- font-size: 0.9rem;
610
- opacity: 0.4;
611
- transition: opacity 0.2s ease;
612
- padding: 2px 4px;
613
- }
614
-
615
- .btn-delete-agent:hover {
616
- opacity: 1;
617
- }
618
-
619
- .agent-session-count {
620
- font-weight: normal;
621
- font-size: 0.7rem;
622
- color: #666;
623
- margin-left: 6px;
624
- }
625
-
626
- .agent-actions {
627
- display: flex;
628
- gap: 8px;
629
- align-items: center;
630
- }
631
-
632
- .btn-connect {
633
- background: #4caf50;
634
- color: white;
635
- border: none;
636
- padding: 8px 16px;
637
- border-radius: 6px;
638
- font-weight: 500;
639
- cursor: pointer;
640
- transition: all 0.2s ease;
641
- font-size: 0.9rem;
401
+ /* Offline Agent */
402
+ .agent-item.agent-offline {
403
+ opacity: 0.5;
642
404
  }
643
405
 
644
- .btn-connect:hover {
645
- background: #45a049;
646
- transform: translateY(-1px);
406
+ .agent-offline-message {
407
+ margin-top: 8px;
408
+ padding: 8px;
409
+ background: var(--bg-tertiary);
410
+ border-radius: 4px;
411
+ color: var(--text-muted);
412
+ font-size: 0.8rem;
413
+ text-align: center;
647
414
  }
648
415
 
649
- .btn-sessions {
650
- background: #4285f4;
416
+ /* Primary Button */
417
+ .btn-primary {
418
+ background: var(--accent);
651
419
  color: white;
420
+ padding: 10px 20px;
652
421
  border: none;
653
- padding: 8px 16px;
654
422
  border-radius: 6px;
655
423
  font-weight: 500;
656
424
  cursor: pointer;
657
- transition: all 0.2s ease;
425
+ transition: all 0.15s ease;
426
+ display: inline-flex;
427
+ align-items: center;
428
+ text-decoration: none;
658
429
  font-size: 0.9rem;
659
430
  }
660
431
 
661
- .btn-sessions:hover {
662
- background: #3367d6;
663
- transform: translateY(-1px);
664
- }
665
-
666
- /* Disabled/Offline Agent Styles */
667
- .agent-item.agent-offline {
668
- opacity: 0.7;
669
- }
670
-
671
- .btn-disabled {
672
- background: #f5f5f5 !important;
673
- color: #999 !important;
674
- cursor: not-allowed !important;
675
- border: 1px solid #e0e0e0 !important;
432
+ .btn-primary:hover {
433
+ background: var(--accent-hover);
434
+ transform: none;
676
435
  }
677
436
 
678
- .btn-disabled:hover {
679
- background: #f5f5f5 !important;
680
- transform: none !important;
681
- color: #999 !important;
437
+ .btn-primary.large {
438
+ padding: 14px 28px;
439
+ font-size: 1rem;
440
+ border-radius: 8px;
682
441
  }
683
442
 
684
- /* Quick Actions */
685
- .action-buttons {
443
+ /* Loading */
444
+ .loading-overlay {
445
+ position: fixed;
446
+ top: 0;
447
+ left: 0;
448
+ width: 100%;
449
+ height: 100%;
450
+ background: var(--bg-primary);
686
451
  display: flex;
687
452
  flex-direction: column;
688
- gap: 12px;
689
- }
690
-
691
- .action-btn {
692
- display: flex;
693
453
  align-items: center;
694
- gap: 12px;
695
- padding: 16px;
696
- background: #f8f9fa;
697
- border: 1px solid #e9ecef;
698
- border-radius: 8px;
699
- cursor: pointer;
700
- transition: all 0.2s ease;
701
- text-align: left;
454
+ justify-content: center;
455
+ z-index: 2000;
702
456
  }
703
457
 
704
- .action-btn:hover {
705
- background: #e9ecef;
706
- border-color: #dee2e6;
458
+ .loading-spinner {
459
+ width: 32px;
460
+ height: 32px;
461
+ border: 3px solid var(--border);
462
+ border-top: 3px solid var(--accent);
463
+ border-radius: 50%;
464
+ animation: spin 0.8s linear infinite;
465
+ margin-bottom: 16px;
707
466
  }
708
467
 
709
- .action-icon {
710
- font-size: 1.2rem;
468
+ .loading-overlay p {
469
+ color: var(--text-secondary);
470
+ font-size: 0.9rem;
711
471
  }
712
472
 
713
- .action-text {
714
- font-weight: 500;
715
- color: #333;
473
+ @keyframes spin {
474
+ 0% { transform: rotate(0deg); }
475
+ 100% { transform: rotate(360deg); }
716
476
  }
717
477
 
718
- /* Session Items */
719
- .session-item {
478
+ /* Login Overlay */
479
+ .login-button-overlay {
480
+ position: fixed;
481
+ top: 0;
482
+ left: 0;
483
+ width: 100%;
484
+ height: 100%;
485
+ background: rgba(0, 0, 0, 0.8);
720
486
  display: flex;
721
- justify-content: space-between;
722
487
  align-items: center;
723
- padding: 16px 0;
724
- border-bottom: 1px solid #f0f0f0;
488
+ justify-content: center;
489
+ z-index: 1000;
725
490
  }
726
491
 
727
- .session-item.compact {
728
- padding: 12px 0;
492
+ .centered-login {
493
+ text-align: center;
729
494
  }
730
495
 
731
- .session-item:last-child {
732
- border-bottom: none;
496
+ /* Empty State */
497
+ .no-data {
498
+ text-align: center;
499
+ color: var(--text-muted);
500
+ padding: 20px;
501
+ font-size: 0.9rem;
733
502
  }
734
503
 
735
- .session-info {
736
- flex: 1;
504
+ .no-data a {
505
+ color: var(--accent);
506
+ text-decoration: none;
737
507
  }
738
508
 
739
- .session-agent {
740
- font-weight: 500;
741
- color: #333;
742
- font-family: monospace;
743
- font-size: 0.9rem;
509
+ .no-data a:hover {
510
+ text-decoration: underline;
744
511
  }
745
512
 
746
- .session-time {
747
- font-size: 0.8rem;
748
- color: #999;
749
- margin-top: 2px;
513
+ /* Empty Agent State - Minimal */
514
+ .empty-agent-state {
515
+ padding: 8px 0;
516
+ }
517
+
518
+ .empty-state-title {
519
+ color: var(--text-muted);
520
+ font-size: 0.9rem;
521
+ margin-bottom: 16px;
522
+ text-align: center;
750
523
  }
751
524
 
752
- .session-details {
525
+ .empty-state-steps {
753
526
  display: flex;
754
527
  flex-direction: column;
755
- align-items: flex-end;
756
- gap: 4px;
528
+ gap: 12px;
757
529
  }
758
530
 
759
- .session-duration {
760
- font-size: 0.8rem;
761
- color: #666;
531
+ .command-step {
532
+ display: flex;
533
+ flex-direction: column;
534
+ gap: 6px;
762
535
  }
763
536
 
764
- .session-status {
765
- padding: 2px 8px;
766
- border-radius: 10px;
767
- font-size: 0.7rem;
537
+ .step-label {
538
+ font-size: 0.75rem;
768
539
  font-weight: 500;
540
+ color: var(--text-muted);
769
541
  text-transform: uppercase;
542
+ letter-spacing: 0.5px;
770
543
  }
771
544
 
772
- .session-status.completed {
773
- background: #e8f5e8;
774
- color: #2e7d32;
775
- }
776
-
777
- .session-status.active {
778
- background: #fff3e0;
779
- color: #f57c00;
545
+ .command-box {
546
+ background: var(--bg-tertiary);
547
+ border: 1px solid var(--border);
548
+ border-radius: 6px;
549
+ padding: 10px 12px;
550
+ display: flex;
551
+ align-items: center;
552
+ justify-content: space-between;
553
+ gap: 10px;
780
554
  }
781
555
 
782
- .session-status.disconnected {
783
- background: #f5f5f5;
784
- color: #666;
556
+ .command-box code {
557
+ font-family: 'Monaco', 'Menlo', monospace;
558
+ font-size: 0.85rem;
559
+ color: var(--success);
560
+ flex: 1;
785
561
  }
786
562
 
787
- /* Empty States */
788
- .no-data {
563
+ .copy-btn {
564
+ background: var(--bg-hover);
565
+ color: var(--text-secondary);
566
+ border: 1px solid var(--border);
567
+ border-radius: 4px;
568
+ padding: 4px 10px;
569
+ font-size: 0.75rem;
570
+ cursor: pointer;
571
+ transition: all 0.15s ease;
572
+ min-width: 50px;
789
573
  text-align: center;
790
- color: #999;
791
- font-style: italic;
792
- }
793
-
794
- .no-data a {
795
- color: #4285F4;
796
- text-decoration: none;
797
574
  }
798
575
 
799
- .no-data a:hover {
800
- text-decoration: underline;
576
+ .copy-btn:hover {
577
+ background: var(--accent);
578
+ color: white;
579
+ border-color: var(--accent);
801
580
  }
802
581
 
803
- /* Centered Login Button Overlay */
804
- .login-button-overlay {
582
+ /* Modals */
583
+ .modal-overlay {
805
584
  position: fixed;
806
585
  top: 0;
807
586
  left: 0;
808
- width: 100%;
809
- height: 100%;
810
- background: rgba(0, 0, 0, 0.3);
587
+ right: 0;
588
+ bottom: 0;
589
+ background: rgba(0, 0, 0, 0.8);
811
590
  display: flex;
812
591
  align-items: center;
813
592
  justify-content: center;
814
- z-index: 1000;
593
+ z-index: 2000;
815
594
  }
816
595
 
817
- .centered-login {
818
- text-align: center;
596
+ .modal {
597
+ background: var(--bg-secondary);
598
+ border: 1px solid var(--border);
599
+ border-radius: 8px;
600
+ max-width: 400px;
601
+ width: 90%;
602
+ max-height: 80vh;
603
+ overflow: hidden;
819
604
  }
820
605
 
821
- .btn-primary.large {
822
- padding: 16px 32px;
823
- font-size: 1.1rem;
824
- border-radius: 12px;
606
+ .modal-header {
607
+ padding: 16px;
608
+ border-bottom: 1px solid var(--border);
609
+ display: flex;
610
+ justify-content: space-between;
611
+ align-items: center;
825
612
  }
826
613
 
827
- /* Blurred Dashboard (for unauthenticated preview) */
828
- .dashboard-grid.blurred {
829
- filter: blur(3px);
830
- opacity: 0.7;
831
- pointer-events: none;
614
+ .modal-header h3 {
615
+ font-size: 1rem;
616
+ font-weight: 600;
617
+ color: var(--text-primary);
832
618
  }
833
619
 
834
- .skeleton-content {
835
- display: flex;
836
- flex-direction: column;
837
- gap: 12px;
620
+ .modal-close {
621
+ background: none;
622
+ border: none;
623
+ font-size: 1.2rem;
624
+ cursor: pointer;
625
+ color: var(--text-muted);
626
+ padding: 4px;
627
+ border-radius: 4px;
838
628
  }
839
629
 
840
- .skeleton-agent,
841
- .skeleton-action,
842
- .skeleton-session {
843
- height: 60px;
844
- background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
845
- background-size: 200% 100%;
846
- animation: loading 1.5s infinite;
847
- border-radius: 8px;
630
+ .modal-close:hover {
631
+ background: var(--bg-hover);
632
+ color: var(--text-primary);
848
633
  }
849
634
 
850
- .skeleton-action {
851
- height: 50px;
635
+ .modal-body {
636
+ padding: 16px;
852
637
  }
853
638
 
854
- .skeleton-session {
855
- height: 40px;
639
+ /* Help Modal Content */
640
+ .help-modal-content {
641
+ color: var(--text-secondary);
856
642
  }
857
643
 
858
- @keyframes loading {
859
- 0% {
860
- background-position: 200% 0;
861
- }
862
- 100% {
863
- background-position: -200% 0;
864
- }
644
+ .help-intro {
645
+ margin-bottom: 16px;
646
+ font-size: 0.9rem;
865
647
  }
866
648
 
867
- /* Loading Overlay */
868
- .loading-overlay {
869
- position: fixed;
870
- top: 0;
871
- left: 0;
872
- width: 100%;
873
- height: 100%;
874
- background: rgba(255, 255, 255, 0.9);
649
+ .help-step {
875
650
  display: flex;
876
- flex-direction: column;
877
- align-items: center;
878
- justify-content: center;
879
- z-index: 2000;
651
+ gap: 12px;
652
+ margin-bottom: 16px;
880
653
  }
881
654
 
882
- .loading-spinner {
883
- width: 40px;
884
- height: 40px;
885
- border: 4px solid #f3f3f3;
886
- border-top: 4px solid #4285F4;
655
+ .help-step .step-number {
656
+ width: 24px;
657
+ height: 24px;
658
+ background: var(--accent);
659
+ color: white;
887
660
  border-radius: 50%;
888
- animation: spin 1s linear infinite;
889
- margin-bottom: 20px;
661
+ display: flex;
662
+ align-items: center;
663
+ justify-content: center;
664
+ font-size: 0.8rem;
665
+ font-weight: 600;
666
+ flex-shrink: 0;
890
667
  }
891
668
 
892
- @keyframes spin {
893
- 0% { transform: rotate(0deg); }
894
- 100% { transform: rotate(360deg); }
669
+ .help-step .step-content {
670
+ flex: 1;
895
671
  }
896
672
 
897
- /* Error State */
898
- .error-state {
899
- text-align: center;
900
- padding: 60px 20px;
901
- color: #666;
673
+ .help-step .step-content h4 {
674
+ font-size: 0.9rem;
675
+ color: var(--text-primary);
676
+ margin-bottom: 8px;
902
677
  }
903
678
 
904
- .error-state h2 {
905
- margin-bottom: 16px;
906
- color: #333;
679
+ .help-step .command-box {
680
+ background: var(--bg-tertiary);
681
+ border: 1px solid var(--border);
682
+ border-radius: 6px;
683
+ padding: 10px 12px;
684
+ display: flex;
685
+ align-items: center;
686
+ justify-content: space-between;
687
+ gap: 10px;
907
688
  }
908
689
 
909
- .error-state p {
910
- margin-bottom: 24px;
690
+ .help-step .command-box code {
691
+ font-family: 'Monaco', 'Menlo', monospace;
692
+ font-size: 0.85rem;
693
+ color: var(--success);
911
694
  }
912
695
 
913
- /* Responsive Design */
914
- @media (max-width: 768px) {
915
- .dashboard-grid {
916
- grid-template-columns: 1fr;
917
- gap: 20px;
918
- }
919
-
920
- .header-content {
921
- flex-direction: column;
922
- gap: 15px;
923
- text-align: center;
924
- }
925
-
926
- .header-right {
927
- flex-direction: column;
928
- gap: 10px;
929
- width: 100%;
930
- }
931
-
932
- .dashboard-controls {
933
- justify-content: center;
934
- flex-wrap: wrap;
935
- }
936
-
937
- .refresh-status,
938
- .connection-status {
939
- font-size: 0.7rem;
940
- }
941
-
942
- .agent-notification {
943
- right: 10px;
944
- left: 10px;
945
- text-align: center;
946
- }
947
-
948
- .dashboard-main {
949
- padding: 20px 15px;
950
- }
951
-
952
- .dashboard-card {
953
- padding: 20px;
954
- }
955
-
956
- .login-modal {
957
- padding: 30px 20px;
958
- }
959
-
960
- .dashboard-preview {
961
- grid-template-columns: 1fr;
962
- gap: 15px;
963
- }
964
-
965
- .agent-item,
966
- .session-item {
967
- flex-direction: column;
968
- align-items: flex-start;
969
- gap: 12px;
970
- }
971
-
972
- .session-details {
973
- align-items: flex-start;
974
- flex-direction: row;
975
- gap: 12px;
976
- }
977
-
978
- /* Mobile inline session styles */
979
- .inline-session-item {
980
- flex-wrap: wrap;
981
- gap: 8px;
982
- }
983
-
984
- .session-name {
985
- flex-basis: calc(100% - 30px);
986
- }
987
-
988
- .session-activity {
989
- order: 3;
990
- flex-basis: 50%;
991
- margin-right: 0;
992
- }
993
-
994
- .btn-session-connect {
995
- order: 4;
996
- padding: 8px 16px;
997
- }
998
- }
999
-
1000
- /* Modal Styles */
1001
- .modal-overlay {
1002
- position: fixed;
1003
- top: 0;
1004
- left: 0;
1005
- right: 0;
1006
- bottom: 0;
1007
- background: rgba(0, 0, 0, 0.5);
1008
- display: flex;
1009
- align-items: center;
1010
- justify-content: center;
1011
- z-index: 2000;
1012
- }
1013
-
1014
- .modal {
1015
- background: white;
1016
- border-radius: 12px;
1017
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
1018
- max-width: 500px;
1019
- width: 90%;
1020
- max-height: 80vh;
1021
- overflow: hidden;
1022
- }
1023
-
1024
- .modal-header {
1025
- padding: 20px 24px;
1026
- border-bottom: 1px solid #eee;
1027
- display: flex;
1028
- justify-content: space-between;
1029
- align-items: center;
1030
- }
1031
-
1032
- .modal-header h3 {
1033
- margin: 0;
1034
- font-size: 1.2rem;
1035
- font-weight: 600;
1036
- color: #333;
1037
- }
1038
-
1039
- .modal-close {
1040
- background: none;
1041
- border: none;
1042
- font-size: 1.5rem;
1043
- cursor: pointer;
1044
- padding: 0;
1045
- width: 30px;
1046
- height: 30px;
1047
- display: flex;
1048
- align-items: center;
1049
- justify-content: center;
1050
- border-radius: 50%;
1051
- color: #666;
1052
- }
1053
-
1054
- .modal-close:hover {
1055
- background: #f5f5f5;
1056
- color: #333;
1057
- }
1058
-
1059
- .modal-body {
1060
- padding: 24px;
1061
- max-height: 60vh;
1062
- overflow-y: auto;
1063
- }
1064
-
1065
- /* Session List Styles */
1066
- .sessions-modal-content p {
1067
- margin-top: 0;
1068
- margin-bottom: 16px;
1069
- color: #666;
1070
- }
1071
-
1072
- .session-list {
1073
- margin-bottom: 20px;
1074
- }
1075
-
1076
- .session-list-item {
1077
- display: flex;
1078
- justify-content: space-between;
1079
- align-items: center;
1080
- padding: 12px;
1081
- border: 1px solid #eee;
1082
- border-radius: 8px;
1083
- margin-bottom: 8px;
1084
- cursor: pointer;
1085
- transition: all 0.2s ease;
1086
- }
1087
-
1088
- .session-list-item:hover {
1089
- background: #f8f9fa;
1090
- border-color: #4285f4;
1091
- }
1092
-
1093
- .session-list-info {
1094
- flex: 1;
1095
- }
1096
-
1097
- .session-list-name {
1098
- font-weight: 600;
1099
- color: #333;
1100
- margin-bottom: 4px;
1101
- }
1102
-
1103
- .session-list-details {
1104
- display: flex;
1105
- gap: 12px;
696
+ .help-note {
1106
697
  font-size: 0.8rem;
1107
- color: #666;
1108
- }
1109
-
1110
- .session-list-id {
1111
- font-family: monospace;
1112
- background: #f5f5f5;
1113
- padding: 2px 6px;
1114
- border-radius: 4px;
1115
- }
1116
-
1117
- .session-list-status {
1118
- padding: 4px 8px;
1119
- border-radius: 12px;
1120
- font-size: 0.75rem;
1121
- font-weight: 500;
1122
- text-transform: uppercase;
1123
- }
1124
-
1125
- .session-list-status.active {
1126
- background: #e8f5e8;
1127
- color: #2e7d32;
698
+ color: var(--text-muted);
699
+ margin-top: 6px;
1128
700
  }
1129
701
 
1130
- .session-list-status.crashed {
1131
- background: #ffebee;
1132
- color: #c62828;
1133
- }
1134
-
1135
- .sessions-modal-actions {
1136
- border-top: 1px solid #eee;
702
+ .help-troubleshooting {
703
+ margin-top: 20px;
1137
704
  padding-top: 16px;
1138
- text-align: center;
1139
- }
1140
-
1141
- /* Empty Agent State Styles */
1142
- .empty-agent-state {
1143
- padding: 20px;
705
+ border-top: 1px solid var(--border);
1144
706
  }
1145
707
 
1146
- .empty-state-header {
1147
- text-align: center;
1148
- margin-bottom: 32px;
1149
- }
1150
-
1151
- .empty-state-header h3 {
1152
- margin: 0 0 8px 0;
1153
- font-size: 1.4rem;
1154
- color: #333;
1155
- font-weight: 600;
708
+ .help-troubleshooting h4 {
709
+ font-size: 0.85rem;
710
+ color: var(--text-primary);
711
+ margin-bottom: 10px;
1156
712
  }
1157
713
 
1158
- .empty-state-header p {
1159
- margin: 0;
1160
- color: #666;
1161
- font-size: 1rem;
714
+ .help-troubleshooting ul {
715
+ list-style: none;
716
+ font-size: 0.85rem;
1162
717
  }
1163
718
 
1164
- .empty-state-steps {
1165
- max-width: 600px;
1166
- margin: 0 auto;
719
+ .help-troubleshooting li {
720
+ padding: 4px 0;
721
+ padding-left: 16px;
722
+ position: relative;
1167
723
  }
1168
724
 
1169
- .empty-state-step {
1170
- display: flex;
1171
- gap: 16px;
1172
- margin-bottom: 24px;
1173
- align-items: flex-start;
725
+ .help-troubleshooting li::before {
726
+ content: '•';
727
+ position: absolute;
728
+ left: 0;
729
+ color: var(--text-muted);
1174
730
  }
1175
731
 
1176
- .empty-step-number {
1177
- flex-shrink: 0;
1178
- width: 36px;
1179
- height: 36px;
1180
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1181
- color: white;
1182
- border-radius: 50%;
1183
- display: flex;
1184
- align-items: center;
1185
- justify-content: center;
1186
- font-weight: 600;
1187
- font-size: 1.1rem;
732
+ /* Notifications */
733
+ .agent-notification {
734
+ position: fixed;
735
+ top: 60px;
736
+ right: 16px;
737
+ background: var(--bg-secondary);
738
+ border: 1px solid var(--border);
739
+ color: var(--text-primary);
740
+ padding: 10px 16px;
741
+ border-radius: 6px;
742
+ font-size: 0.85rem;
743
+ z-index: 3000;
744
+ animation: slideInRight 0.2s ease-out;
745
+ border-left: 3px solid;
1188
746
  }
1189
747
 
1190
- .empty-step-content {
1191
- flex: 1;
748
+ .agent-notification.connected {
749
+ border-left-color: var(--success);
1192
750
  }
1193
751
 
1194
- .empty-step-content h4 {
1195
- margin: 0 0 10px 0;
1196
- font-size: 1.05rem;
1197
- font-weight: 600;
1198
- color: #333;
752
+ .agent-notification.disconnected {
753
+ border-left-color: var(--danger);
1199
754
  }
1200
755
 
1201
- .inline-command-box {
1202
- background: #2d3748;
1203
- border-radius: 8px;
1204
- padding: 14px 16px;
1205
- display: flex;
1206
- align-items: center;
1207
- justify-content: space-between;
1208
- gap: 12px;
756
+ @keyframes slideInRight {
757
+ from {
758
+ transform: translateX(100%);
759
+ opacity: 0;
760
+ }
761
+ to {
762
+ transform: translateX(0);
763
+ opacity: 1;
764
+ }
1209
765
  }
1210
766
 
1211
- .inline-command-box code {
1212
- font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
1213
- font-size: 0.95rem;
1214
- color: #48bb78;
1215
- flex: 1;
1216
- font-weight: 500;
767
+ /* Animated Loading Dots */
768
+ .loading-dots {
769
+ display: inline-flex;
770
+ gap: 2px;
1217
771
  }
1218
772
 
1219
- .inline-copy-btn {
1220
- background: #667eea;
1221
- color: white;
1222
- border: none;
1223
- border-radius: 6px;
1224
- padding: 7px 14px;
1225
- font-size: 0.85rem;
1226
- cursor: pointer;
1227
- transition: all 0.2s ease;
1228
- flex-shrink: 0;
1229
- font-weight: 500;
773
+ .loading-dots span {
774
+ animation: loadingDot 1.2s infinite;
775
+ opacity: 0.3;
1230
776
  }
1231
777
 
1232
- .inline-copy-btn:hover {
1233
- background: #5568d3;
1234
- }
778
+ .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
779
+ .loading-dots span:nth-child(3) { animation-delay: 0.3s; }
1235
780
 
1236
- .inline-copy-btn:active {
1237
- transform: scale(0.95);
781
+ @keyframes loadingDot {
782
+ 0%, 80%, 100% { opacity: 0.3; }
783
+ 40% { opacity: 1; }
1238
784
  }
1239
785
 
1240
- .empty-state-footer {
1241
- text-align: center;
1242
- margin-top: 32px;
1243
- padding-top: 24px;
1244
- border-top: 1px solid #eee;
1245
- }
786
+ /* Mobile Responsive - Touch-friendly */
787
+ @media (max-width: 768px) {
788
+ .header-content {
789
+ padding: 0 12px;
790
+ }
1246
791
 
1247
- .empty-state-footer p {
1248
- margin: 0;
1249
- color: #666;
1250
- font-size: 0.95rem;
1251
- }
792
+ .logo h1 {
793
+ font-size: 1.1rem;
794
+ }
1252
795
 
1253
- /* Help Modal Styles */
1254
- .help-modal-content {
1255
- font-size: 0.95rem;
1256
- }
796
+ .user-name {
797
+ display: none;
798
+ }
1257
799
 
1258
- .help-intro {
1259
- margin-top: 0;
1260
- margin-bottom: 24px;
1261
- color: #666;
1262
- font-size: 1rem;
1263
- }
800
+ .dropdown-btn {
801
+ min-width: 44px;
802
+ min-height: 44px;
803
+ display: flex;
804
+ align-items: center;
805
+ justify-content: center;
806
+ }
1264
807
 
1265
- .help-step {
1266
- display: flex;
1267
- gap: 16px;
1268
- margin-bottom: 24px;
1269
- align-items: flex-start;
1270
- }
808
+ .dashboard-main {
809
+ padding: 12px 8px;
810
+ padding-bottom: 60px; /* Space for footer */
811
+ }
1271
812
 
1272
- .step-number {
1273
- flex-shrink: 0;
1274
- width: 32px;
1275
- height: 32px;
1276
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1277
- color: white;
1278
- border-radius: 50%;
1279
- display: flex;
1280
- align-items: center;
1281
- justify-content: center;
1282
- font-weight: 600;
1283
- font-size: 0.95rem;
1284
- }
813
+ .dashboard-card {
814
+ padding: 12px;
815
+ border-radius: 6px;
816
+ margin-bottom: 12px;
817
+ border-left: none;
818
+ border-right: none;
819
+ border-radius: 0;
820
+ }
1285
821
 
1286
- .step-content {
1287
- flex: 1;
1288
- }
822
+ .card-header h2 {
823
+ font-size: 0.85rem;
824
+ }
1289
825
 
1290
- .step-content h4 {
1291
- margin: 0 0 12px 0;
1292
- font-size: 1.05rem;
1293
- font-weight: 600;
1294
- color: #333;
1295
- }
826
+ .agent-item {
827
+ padding: 14px 0;
828
+ }
1296
829
 
1297
- .command-box {
1298
- background: #f8f9fa;
1299
- border: 1px solid #e1e4e8;
1300
- border-radius: 8px;
1301
- padding: 12px 14px;
1302
- display: flex;
1303
- align-items: center;
1304
- justify-content: space-between;
1305
- gap: 12px;
1306
- margin-bottom: 8px;
1307
- }
830
+ .agent-name-row {
831
+ margin-bottom: 6px;
832
+ }
1308
833
 
1309
- .command-box code {
1310
- font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
1311
- font-size: 0.9rem;
1312
- color: #1a1a1a;
1313
- flex: 1;
1314
- }
834
+ .agent-name {
835
+ font-size: 1rem;
836
+ }
1315
837
 
1316
- .copy-btn {
1317
- background: #667eea;
1318
- color: white;
1319
- border: none;
1320
- border-radius: 6px;
1321
- padding: 6px 12px;
1322
- font-size: 0.85rem;
1323
- cursor: pointer;
1324
- transition: all 0.2s ease;
1325
- flex-shrink: 0;
1326
- }
838
+ .btn-delete-agent {
839
+ min-width: 44px;
840
+ min-height: 44px;
841
+ display: flex;
842
+ align-items: center;
843
+ justify-content: center;
844
+ }
1327
845
 
1328
- .copy-btn:hover {
1329
- background: #5568d3;
1330
- }
846
+ .inline-session-item {
847
+ padding: 14px;
848
+ min-height: 52px;
849
+ }
1331
850
 
1332
- .copy-btn:active {
1333
- transform: scale(0.95);
1334
- }
851
+ .btn-session-connect {
852
+ padding: 10px 18px;
853
+ min-height: 44px;
854
+ font-size: 0.85rem;
855
+ }
1335
856
 
1336
- .help-note {
1337
- margin: 8px 0 0 0;
1338
- font-size: 0.85rem;
1339
- color: #666;
1340
- font-style: italic;
1341
- }
857
+ .btn-new-session {
858
+ padding: 14px 16px;
859
+ min-height: 48px;
860
+ font-size: 0.9rem;
861
+ }
1342
862
 
1343
- .help-troubleshooting {
1344
- margin-top: 32px;
1345
- padding: 16px;
1346
- background: #f8f9fa;
1347
- border-radius: 8px;
1348
- border-left: 4px solid #667eea;
1349
- }
863
+ /* Empty state mobile */
864
+ .empty-agent-state {
865
+ padding: 4px 0;
866
+ }
1350
867
 
1351
- .help-troubleshooting h4 {
1352
- margin: 0 0 12px 0;
1353
- font-size: 1rem;
1354
- font-weight: 600;
1355
- color: #333;
1356
- }
868
+ .command-box {
869
+ padding: 12px;
870
+ }
1357
871
 
1358
- .help-troubleshooting ul {
1359
- margin: 0;
1360
- padding-left: 20px;
1361
- list-style-type: disc;
1362
- }
872
+ .command-box code {
873
+ font-size: 0.8rem;
874
+ }
1363
875
 
1364
- .help-troubleshooting li {
1365
- margin-bottom: 8px;
1366
- color: #555;
1367
- font-size: 0.9rem;
1368
- }
876
+ .copy-btn {
877
+ min-height: 36px;
878
+ padding: 8px 12px;
879
+ }
1369
880
 
1370
- .help-troubleshooting li:last-child {
1371
- margin-bottom: 0;
1372
- }
881
+ /* Modal mobile */
882
+ .modal {
883
+ width: 95%;
884
+ max-height: 90vh;
885
+ }
1373
886
 
1374
- /* Agent Notifications */
1375
- .agent-notification {
1376
- position: fixed;
1377
- top: 100px;
1378
- right: 20px;
1379
- background: white;
1380
- color: #333;
1381
- padding: 12px 20px;
1382
- border-radius: 8px;
1383
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1384
- font-size: 0.9rem;
1385
- font-weight: 500;
1386
- z-index: 3000;
1387
- animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 4.7s forwards;
1388
- border-left: 4px solid;
887
+ .modal-body {
888
+ padding: 12px;
889
+ }
1389
890
  }
1390
891
 
1391
- .agent-notification.connected {
1392
- border-left-color: #4caf50;
1393
- }
892
+ /* Extra small screens */
893
+ @media (max-width: 375px) {
894
+ .dashboard-main {
895
+ padding: 8px 4px;
896
+ }
1394
897
 
1395
- .agent-notification.disconnected {
1396
- border-left-color: #f44336;
1397
- }
898
+ .dashboard-card {
899
+ padding: 10px 8px;
900
+ }
1398
901
 
1399
- @keyframes slideInRight {
1400
- from {
1401
- transform: translateX(100%);
1402
- opacity: 0;
902
+ .agent-name {
903
+ font-size: 0.95rem;
1403
904
  }
1404
- to {
1405
- transform: translateX(0);
1406
- opacity: 1;
905
+
906
+ .btn-session-connect {
907
+ padding: 8px 12px;
908
+ font-size: 0.8rem;
1407
909
  }
1408
- }
1409
910
 
1410
- @keyframes fadeOut {
1411
- to {
1412
- opacity: 0;
1413
- transform: translateX(100%);
911
+ .session-name {
912
+ font-size: 0.85rem;
1414
913
  }
1415
914
  }
1416
915
 
1417
- /* API Error Display */
1418
- .api-error {
1419
- text-align: center;
1420
- padding: 20px;
1421
- background: #fff5f5;
1422
- border: 1px solid #fed7d7;
1423
- border-radius: 8px;
1424
- color: #c53030;
916
+ /* Hide these sections completely via CSS */
917
+ .dashboard-card:has(.action-buttons) {
918
+ display: none !important;
1425
919
  }
1426
920
 
1427
- .api-error p {
1428
- margin-bottom: 15px;
1429
- font-weight: 500;
921
+ /* Skeleton loading - dark theme */
922
+ .skeleton-content {
923
+ display: flex;
924
+ flex-direction: column;
925
+ gap: 8px;
1430
926
  }
1431
927
 
1432
- .api-error button {
1433
- margin-top: 10px;
928
+ .skeleton-agent,
929
+ .skeleton-action,
930
+ .skeleton-session {
931
+ height: 50px;
932
+ background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
933
+ background-size: 200% 100%;
934
+ animation: loading 1.5s infinite;
935
+ border-radius: 6px;
1434
936
  }
1435
937
 
1436
- /* Connection Testing States */
1437
- .btn-connect.testing {
1438
- background: #ffc107 !important;
1439
- color: #333 !important;
1440
- cursor: wait !important;
938
+ @keyframes loading {
939
+ 0% { background-position: 200% 0; }
940
+ 100% { background-position: -200% 0; }
1441
941
  }
1442
942
 
1443
- /* Connection Error Notifications */
1444
- .connection-error-notification {
1445
- position: fixed;
1446
- top: 120px;
1447
- right: 20px;
1448
- background: #fff;
1449
- border-left: 4px solid #f44336;
1450
- border-radius: 8px;
1451
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1452
- padding: 16px 20px;
1453
- max-width: 350px;
1454
- z-index: 3000;
1455
- animation: slideInRight 0.3s ease-out;
1456
- display: flex;
1457
- align-items: flex-start;
1458
- gap: 12px;
943
+ /* Blurred preview */
944
+ .dashboard-grid.blurred {
945
+ filter: blur(2px);
946
+ opacity: 0.5;
947
+ pointer-events: none;
1459
948
  }
1460
949
 
1461
- .connection-error-notification .error-content {
1462
- flex: 1;
1463
- font-size: 0.9rem;
1464
- line-height: 1.4;
950
+ /* API Error */
951
+ .api-error {
952
+ text-align: center;
953
+ padding: 16px;
954
+ background: var(--bg-tertiary);
955
+ border: 1px solid var(--danger);
956
+ border-radius: 6px;
957
+ color: var(--danger);
1465
958
  }
1466
959
 
1467
- .connection-error-notification button {
1468
- background: none;
1469
- border: none;
1470
- font-size: 1.2rem;
1471
- cursor: pointer;
1472
- color: #999;
1473
- padding: 0;
1474
- width: 20px;
1475
- height: 20px;
1476
- display: flex;
1477
- align-items: center;
1478
- justify-content: center;
1479
- border-radius: 50%;
960
+ /* Connection status */
961
+ .connection-status {
962
+ font-size: 0.75rem;
963
+ color: var(--text-muted);
1480
964
  }
1481
965
 
1482
- .connection-error-notification button:hover {
1483
- background: #f5f5f5;
1484
- color: #333;
1485
- }
966
+ .connection-status.connected { color: var(--success); }
967
+ .connection-status.disconnected { color: var(--warning); }
968
+ .connection-status.error { color: var(--danger); }