@julioborges/gantry 1.0.5 → 1.1.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.
@@ -1,74 +1,1215 @@
1
+ /* Gantry Dashboard Industrial Dark Theme — Matching Gantry Site Visual Language */
2
+
1
3
  :root {
2
- color-scheme: light dark;
3
- --border: #8888;
4
+ --obsidian-950: #05070a;
5
+ --obsidian-900: #0a0d14;
6
+ --obsidian-850: #0f141f;
7
+ --obsidian-800: #141a29;
8
+ --obsidian-700: #1f293d;
9
+ --obsidian-600: #2a3752;
10
+
11
+ --amber-glow: #ff9900;
12
+ --amber-accent: #f59e0b;
13
+ --amber-dim: rgba(255, 153, 0, 0.15);
14
+
15
+ --slate-100: #f1f5f9;
16
+ --slate-200: #e2e8f0;
17
+ --slate-300: #cbd5e1;
18
+ --slate-400: #94a3b8;
19
+ --slate-500: #64748b;
20
+
21
+ --red-alert: #ef4444;
22
+ --red-dim: rgba(239, 68, 68, 0.15);
23
+ --green-ok: #10b981;
24
+ --green-dim: rgba(16, 185, 129, 0.15);
25
+ --purple-accent: #a855f7;
26
+ --purple-dim: rgba(168, 85, 247, 0.15);
27
+
28
+ --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
29
+ }
30
+
31
+ * {
32
+ box-sizing: border-box;
33
+ margin: 0;
34
+ padding: 0;
4
35
  }
5
36
 
6
37
  body {
7
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
8
- margin: 1.5rem;
38
+ background-color: var(--obsidian-900);
39
+ color: var(--slate-300);
40
+ font-family: var(--font-mono);
41
+ font-size: 13px;
42
+ line-height: 1.5;
43
+ min-height: 100vh;
44
+ display: flex;
45
+ flex-col: column;
46
+ flex-direction: column;
47
+ overflow-x: hidden;
48
+ -webkit-font-smoothing: antialiased;
9
49
  }
10
50
 
11
- header p {
12
- opacity: 0.75;
51
+ /* Technical Grid Pattern */
52
+ .industrial-grid {
53
+ background-size: 32px 32px;
54
+ background-image:
55
+ linear-gradient(to right, rgba(255, 153, 0, 0.04) 1px, transparent 1px),
56
+ linear-gradient(to bottom, rgba(255, 153, 0, 0.04) 1px, transparent 1px);
13
57
  }
14
58
 
59
+ /* Scrollbars */
60
+ ::-webkit-scrollbar {
61
+ width: 8px;
62
+ height: 8px;
63
+ }
64
+ ::-webkit-scrollbar-track {
65
+ background: var(--obsidian-900);
66
+ border-left: 1px solid var(--obsidian-700);
67
+ }
68
+ ::-webkit-scrollbar-thumb {
69
+ background: var(--obsidian-700);
70
+ border-radius: 2px;
71
+ }
72
+ ::-webkit-scrollbar-thumb:hover {
73
+ background: var(--amber-accent);
74
+ }
75
+
76
+ /* Header */
77
+ .rig-header {
78
+ position: sticky;
79
+ top: 0;
80
+ z-index: 50;
81
+ border-bottom: 1px solid var(--obsidian-700);
82
+ background-color: rgba(10, 13, 20, 0.95);
83
+ backdrop-filter: blur(8px);
84
+ }
85
+
86
+ .header-inner {
87
+ max-width: 1600px;
88
+ margin: 0 auto;
89
+ padding: 0 1.5rem;
90
+ height: 3.5rem;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: space-between;
94
+ gap: 1rem;
95
+ }
96
+
97
+ .brand-group {
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 0.75rem;
101
+ }
102
+
103
+ .brand-mark {
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 0.5rem;
107
+ font-weight: 700;
108
+ font-size: 1rem;
109
+ letter-spacing: 0.05em;
110
+ color: var(--slate-100);
111
+ }
112
+
113
+ .diamond {
114
+ display: inline-block;
115
+ width: 10px;
116
+ height: 10px;
117
+ background-color: var(--amber-glow);
118
+ transform: rotate(45deg);
119
+ box-shadow: 0 0 8px rgba(255, 153, 0, 0.6);
120
+ }
121
+
122
+ .accent {
123
+ color: var(--amber-accent);
124
+ }
125
+
126
+ .telemetry-badge {
127
+ display: inline-flex;
128
+ align-items: center;
129
+ padding: 0.15rem 0.5rem;
130
+ font-size: 11px;
131
+ background-color: var(--obsidian-800);
132
+ color: var(--amber-accent);
133
+ border: 1px solid var(--obsidian-700);
134
+ font-weight: 600;
135
+ }
136
+
137
+ .header-controls {
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 1rem;
141
+ }
142
+
143
+ .project-selector-group {
144
+ display: flex;
145
+ align-items: center;
146
+ gap: 0.5rem;
147
+ }
148
+
149
+ .selector-label {
150
+ font-size: 11px;
151
+ font-weight: 700;
152
+ color: var(--amber-accent);
153
+ letter-spacing: 0.05em;
154
+ }
155
+
156
+ .project-select {
157
+ background-color: var(--obsidian-850);
158
+ color: var(--slate-100);
159
+ border: 1px solid var(--obsidian-700);
160
+ font-family: var(--font-mono);
161
+ font-size: 11px;
162
+ font-weight: 600;
163
+ padding: 0.25rem 0.6rem;
164
+ border-radius: 2px;
165
+ outline: none;
166
+ cursor: pointer;
167
+ transition: border-color 0.15s ease;
168
+ }
169
+
170
+ .project-select:hover,
171
+ .project-select:focus {
172
+ border-color: var(--amber-glow);
173
+ box-shadow: 0 0 6px rgba(255, 153, 0, 0.3);
174
+ }
175
+
176
+ .project-select option {
177
+ background-color: var(--obsidian-900);
178
+ color: var(--slate-100);
179
+ }
180
+
181
+ .header-status {
182
+ display: flex;
183
+ align-items: center;
184
+ gap: 0.5rem;
185
+ font-size: 11px;
186
+ color: var(--slate-400);
187
+ }
188
+
189
+ .status-indicator {
190
+ width: 8px;
191
+ height: 8px;
192
+ background-color: var(--amber-glow);
193
+ border-radius: 50%;
194
+ box-shadow: 0 0 8px var(--amber-glow);
195
+ animation: pulse-glow 2s infinite ease-in-out;
196
+ }
197
+
198
+ @keyframes pulse-glow {
199
+ 0%, 100% { opacity: 1; transform: scale(1); }
200
+ 50% { opacity: 0.4; transform: scale(0.85); }
201
+ }
202
+
203
+ /* Status Sub-strip */
204
+ .status-strip {
205
+ border-bottom: 1px solid var(--obsidian-700);
206
+ background-color: rgba(5, 7, 10, 0.8);
207
+ font-size: 11px;
208
+ }
209
+
210
+ .status-strip-inner {
211
+ max-width: 1600px;
212
+ margin: 0 auto;
213
+ padding: 0.5rem 1.5rem;
214
+ display: flex;
215
+ flex-wrap: wrap;
216
+ align-items: center;
217
+ justify-content: space-between;
218
+ gap: 0.75rem;
219
+ }
220
+
221
+ .status-strip-left {
222
+ display: flex;
223
+ align-items: center;
224
+ gap: 0.5rem;
225
+ color: var(--amber-accent);
226
+ font-weight: 600;
227
+ }
228
+
229
+ .signal-dot {
230
+ width: 6px;
231
+ height: 6px;
232
+ background-color: var(--amber-glow);
233
+ }
234
+
235
+ .status-strip-badges {
236
+ display: flex;
237
+ flex-wrap: wrap;
238
+ align-items: center;
239
+ gap: 0.5rem;
240
+ }
241
+
242
+ .badge-tag {
243
+ padding: 0.15rem 0.5rem;
244
+ background-color: var(--obsidian-900);
245
+ border: 1px solid var(--obsidian-700);
246
+ color: var(--slate-400);
247
+ font-size: 10px;
248
+ text-transform: uppercase;
249
+ }
250
+
251
+ .badge-tag.accent-tag {
252
+ border-color: rgba(245, 158, 11, 0.5);
253
+ color: var(--amber-glow);
254
+ }
255
+
256
+ /* Main Workspace */
257
+ .dashboard-main {
258
+ flex: 1;
259
+ max-width: 1600px;
260
+ width: 100%;
261
+ margin: 0 auto;
262
+ padding: 1.5rem;
263
+ }
264
+
265
+ /* Empty state */
266
+ .empty-state {
267
+ border: 1px dashed var(--obsidian-700);
268
+ background-color: var(--obsidian-950);
269
+ padding: 3rem 2rem;
270
+ text-align: center;
271
+ color: var(--slate-500);
272
+ }
273
+ .empty-state-title {
274
+ color: var(--amber-accent);
275
+ font-size: 14px;
276
+ font-weight: 700;
277
+ margin-bottom: 0.5rem;
278
+ }
279
+
280
+ /* Swimlane / Execution Rig */
15
281
  .swimlane {
16
- border: 1px solid var(--border);
17
- border-radius: 0.5rem;
18
- margin-bottom: 1.5rem;
19
- padding: 0.75rem;
282
+ border: 1px solid var(--obsidian-700);
283
+ background-color: rgba(15, 20, 31, 0.85);
284
+ margin-bottom: 2rem;
285
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
286
+ position: relative;
287
+ transition: border-color 0.2s ease;
20
288
  }
21
289
 
22
290
  .swimlane.stale {
23
- border-color: #c0392b;
291
+ border-color: var(--red-alert);
292
+ }
293
+
294
+ .swimlane.stale .swimlane-header {
295
+ border-bottom-color: var(--red-alert);
296
+ }
297
+
298
+ /* Corner brackets on swimlane (matching site rig style) */
299
+ .swimlane::before,
300
+ .swimlane::after {
301
+ content: "";
302
+ position: absolute;
303
+ width: 8px;
304
+ height: 8px;
305
+ pointer-events: none;
306
+ }
307
+ .swimlane::before {
308
+ top: -1px;
309
+ left: -1px;
310
+ border-top: 2px solid var(--amber-glow);
311
+ border-left: 2px solid var(--amber-glow);
312
+ }
313
+ .swimlane::after {
314
+ bottom: -1px;
315
+ right: -1px;
316
+ border-bottom: 2px solid var(--amber-glow);
317
+ border-right: 2px solid var(--amber-glow);
318
+ }
319
+
320
+ .swimlane-header {
321
+ padding: 0.75rem 1rem;
322
+ border-bottom: 1px solid var(--obsidian-700);
323
+ background-color: var(--obsidian-950);
324
+ display: flex;
325
+ flex-wrap: wrap;
326
+ align-items: center;
327
+ justify-content: space-between;
328
+ gap: 0.75rem;
329
+ }
330
+
331
+ .swimlane-title-group {
332
+ display: flex;
333
+ flex-wrap: wrap;
334
+ align-items: center;
335
+ gap: 0.5rem;
24
336
  }
25
337
 
26
338
  .swimlane h2 {
27
- margin: 0 0 0.5rem 0;
28
- font-size: 1rem;
339
+ font-size: 12px;
340
+ font-weight: 700;
341
+ color: var(--slate-100);
342
+ letter-spacing: 0.03em;
343
+ text-transform: uppercase;
29
344
  }
30
345
 
346
+ .swimlane-meta {
347
+ display: flex;
348
+ flex-wrap: wrap;
349
+ align-items: center;
350
+ gap: 0.5rem;
351
+ }
352
+
353
+ /* Kanban Columns Grid */
31
354
  .columns {
32
355
  display: grid;
33
- grid-template-columns: repeat(8, minmax(8rem, 1fr));
34
- gap: 0.5rem;
356
+ grid-template-columns: repeat(8, minmax(130px, 1fr));
357
+ gap: 1px;
358
+ background-color: var(--obsidian-700);
359
+ overflow-x: auto;
35
360
  }
36
361
 
37
362
  .column {
38
- border: 1px dashed var(--border);
39
- border-radius: 0.375rem;
40
- padding: 0.5rem;
41
- min-height: 4rem;
363
+ background-color: var(--obsidian-900);
364
+ min-height: 180px;
365
+ padding: 0.65rem 0.5rem;
366
+ display: flex;
367
+ flex-direction: column;
42
368
  }
43
369
 
44
- .column h3 {
45
- margin: 0 0 0.5rem 0;
46
- font-size: 0.8rem;
370
+ .column-header {
371
+ display: flex;
372
+ align-items: center;
373
+ justify-content: space-between;
374
+ margin-bottom: 0.65rem;
375
+ padding-bottom: 0.4rem;
376
+ border-bottom: 1px solid var(--obsidian-800);
377
+ }
378
+
379
+ .column-title {
380
+ font-size: 10px;
381
+ font-weight: 700;
47
382
  text-transform: uppercase;
48
- opacity: 0.7;
383
+ letter-spacing: 0.08em;
384
+ color: var(--slate-400);
385
+ }
386
+
387
+ .column-count {
388
+ font-size: 9px;
389
+ padding: 0.1rem 0.35rem;
390
+ background-color: var(--obsidian-800);
391
+ border: 1px solid var(--obsidian-700);
392
+ color: var(--slate-500);
393
+ font-weight: 600;
394
+ }
395
+
396
+ .column-cards {
397
+ display: flex;
398
+ flex-direction: column;
399
+ gap: 0.5rem;
400
+ flex: 1;
49
401
  }
50
402
 
403
+ /* Card Rig */
51
404
  .card {
52
- border: 1px solid var(--border);
53
- border-radius: 0.25rem;
54
- padding: 0.35rem;
55
- margin-bottom: 0.35rem;
56
- font-size: 0.8rem;
405
+ border: 1px solid var(--obsidian-700);
406
+ background-color: var(--obsidian-950);
407
+ padding: 0.6rem;
408
+ transition: all 0.15s ease;
409
+ position: relative;
410
+ }
411
+
412
+ .card:hover {
413
+ border-color: var(--amber-accent);
414
+ transform: translateY(-1px);
415
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
416
+ }
417
+
418
+ .card-title {
419
+ display: flex;
420
+ align-items: center;
421
+ justify-content: space-between;
422
+ font-size: 11px;
423
+ font-weight: 700;
424
+ color: var(--slate-100);
425
+ margin-bottom: 0.45rem;
57
426
  }
58
427
 
428
+ .card-badges {
429
+ display: flex;
430
+ flex-wrap: wrap;
431
+ gap: 0.25rem;
432
+ }
433
+
434
+ /* Badges */
59
435
  .badge {
60
- display: inline-block;
61
- border-radius: 0.25rem;
62
- padding: 0 0.25rem;
63
- margin-right: 0.25rem;
64
- font-size: 0.7rem;
65
- border: 1px solid var(--border);
436
+ display: inline-flex;
437
+ align-items: center;
438
+ font-size: 9px;
439
+ font-weight: 500;
440
+ padding: 0.15rem 0.35rem;
441
+ border: 1px solid var(--obsidian-700);
442
+ background-color: var(--obsidian-850);
443
+ color: var(--slate-300);
444
+ text-transform: uppercase;
445
+ letter-spacing: 0.02em;
446
+ line-height: 1;
447
+ white-space: nowrap;
448
+ }
449
+
450
+ .badge.tier {
451
+ border-color: var(--amber-glow);
452
+ color: var(--amber-glow);
453
+ background-color: var(--amber-dim);
454
+ font-weight: 700;
455
+ }
456
+
457
+ .badge.stale {
458
+ border-color: var(--red-alert);
459
+ color: var(--red-alert);
460
+ background-color: var(--red-dim);
461
+ font-weight: 700;
462
+ }
463
+
464
+ .badge.live {
465
+ border-color: var(--green-ok);
466
+ color: var(--green-ok);
467
+ background-color: var(--green-dim);
66
468
  }
67
469
 
68
470
  .badge.waiting {
69
- border-color: #e67e22;
471
+ border-color: var(--amber-glow);
472
+ color: var(--amber-glow);
473
+ background-color: var(--amber-dim);
474
+ animation: pulse-glow 1.5s infinite;
475
+ font-weight: 700;
70
476
  }
71
477
 
72
478
  .badge.compaction {
73
- border-color: #8e44ad;
479
+ border-color: var(--purple-accent);
480
+ color: var(--purple-accent);
481
+ background-color: var(--purple-dim);
482
+ }
483
+
484
+ .badge.budget {
485
+ border-color: var(--obsidian-600);
486
+ color: var(--amber-accent);
487
+ }
488
+
489
+ .badge.elapsed {
490
+ border-color: var(--obsidian-600);
491
+ color: var(--slate-400);
492
+ }
493
+
494
+ .badge.model {
495
+ border-color: var(--obsidian-600);
496
+ color: var(--slate-300);
497
+ }
498
+
499
+ .badge.branch {
500
+ border-color: var(--obsidian-700);
501
+ color: var(--slate-400);
502
+ }
503
+
504
+ .badge.worktree {
505
+ display: inline-block;
506
+ white-space: normal;
507
+ word-break: break-all;
508
+ overflow-wrap: anywhere;
509
+ line-height: 1.35;
510
+ max-width: 100%;
511
+ }
512
+
513
+ .badge.project {
514
+ border-color: rgba(255, 153, 0, 0.4);
515
+ color: var(--amber-glow);
516
+ background-color: var(--amber-dim);
517
+ font-weight: 700;
518
+ }
519
+
520
+ .badge.total-cycle {
521
+ border-color: rgba(34, 197, 94, 0.4);
522
+ color: #4ade80;
523
+ background-color: rgba(34, 197, 94, 0.1);
524
+ font-weight: 600;
525
+ }
526
+
527
+ /* Footer */
528
+ .rig-footer {
529
+ border-top: 1px solid var(--obsidian-700);
530
+ background-color: var(--obsidian-950);
531
+ font-size: 11px;
532
+ padding: 1.25rem 0;
533
+ margin-top: auto;
534
+ }
535
+
536
+ .footer-inner {
537
+ max-width: 1600px;
538
+ margin: 0 auto;
539
+ padding: 0 1.5rem;
540
+ display: flex;
541
+ flex-wrap: wrap;
542
+ align-items: center;
543
+ justify-content: space-between;
544
+ gap: 0.75rem;
545
+ color: var(--slate-500);
546
+ }
547
+
548
+ .footer-left {
549
+ display: flex;
550
+ flex-wrap: wrap;
551
+ align-items: center;
552
+ gap: 0.5rem;
553
+ }
554
+
555
+ .accent-diamond {
556
+ color: var(--amber-glow);
557
+ }
558
+
559
+ .footer-right {
560
+ font-size: 10px;
561
+ letter-spacing: 0.05em;
562
+ }
563
+
564
+ @media (max-width: 1200px) {
565
+ .columns {
566
+ grid-template-columns: repeat(4, minmax(140px, 1fr));
567
+ }
568
+ }
569
+
570
+ @media (max-width: 768px) {
571
+ .rig-header {
572
+ height: auto;
573
+ }
574
+ .header-inner {
575
+ height: auto;
576
+ flex-wrap: wrap;
577
+ padding: 0.5rem 1rem;
578
+ gap: 0.5rem;
579
+ }
580
+ .telemetry-badge {
581
+ display: none;
582
+ }
583
+ .header-status {
584
+ display: none;
585
+ }
586
+ .columns {
587
+ grid-template-columns: repeat(2, minmax(130px, 1fr));
588
+ }
589
+ }
590
+
591
+ /* Modal Backdrop & Dialog */
592
+ .modal-backdrop {
593
+ position: fixed;
594
+ top: 0;
595
+ left: 0;
596
+ width: 100vw;
597
+ height: 100vh;
598
+ background-color: rgba(5, 7, 10, 0.85);
599
+ backdrop-filter: blur(4px);
600
+ display: flex;
601
+ align-items: center;
602
+ justify-content: center;
603
+ z-index: 100;
604
+ padding: 1.5rem;
605
+ }
606
+
607
+ .modal-backdrop.hidden {
608
+ display: none !important;
609
+ }
610
+
611
+ .modal-dialog {
612
+ background-color: var(--obsidian-900);
613
+ border: 1px solid var(--obsidian-600);
614
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
615
+ width: 100%;
616
+ max-width: 900px;
617
+ max-height: 85vh;
618
+ display: flex;
619
+ flex-direction: column;
620
+ border-radius: 2px;
621
+ }
622
+
623
+ .modal-header {
624
+ display: flex;
625
+ align-items: center;
626
+ justify-content: space-between;
627
+ padding: 0.85rem 1.25rem;
628
+ border-bottom: 1px solid var(--obsidian-700);
629
+ background-color: var(--obsidian-950);
630
+ }
631
+
632
+ .modal-header-left {
633
+ display: flex;
634
+ align-items: center;
635
+ gap: 0.75rem;
636
+ }
637
+
638
+ .modal-diamond {
639
+ display: inline-block;
640
+ width: 10px;
641
+ height: 10px;
642
+ background-color: var(--amber-glow);
643
+ transform: rotate(45deg);
644
+ box-shadow: 0 0 8px rgba(255, 153, 0, 0.6);
645
+ }
646
+
647
+ .modal-title {
648
+ font-size: 13px;
649
+ font-weight: 700;
650
+ letter-spacing: 0.05em;
651
+ color: var(--slate-100);
652
+ }
653
+
654
+ .modal-close {
655
+ background: transparent;
656
+ border: 1px solid var(--obsidian-700);
657
+ color: var(--slate-400);
658
+ font-size: 18px;
659
+ line-height: 1;
660
+ padding: 0.2rem 0.5rem;
661
+ cursor: pointer;
662
+ }
663
+
664
+ .modal-close:hover {
665
+ border-color: var(--amber-accent);
666
+ color: var(--slate-100);
667
+ }
668
+
669
+ .modal-meta-strip {
670
+ display: flex;
671
+ flex-wrap: wrap;
672
+ gap: 1rem;
673
+ padding: 0.5rem 1.25rem;
674
+ background-color: var(--obsidian-850);
675
+ border-bottom: 1px solid var(--obsidian-700);
676
+ font-size: 11px;
677
+ color: var(--slate-400);
678
+ }
679
+
680
+ .modal-meta-strip .meta-item {
681
+ display: inline-flex;
682
+ align-items: center;
683
+ }
684
+
685
+ .modal-durations-strip {
686
+ display: flex;
687
+ flex-wrap: wrap;
688
+ align-items: center;
689
+ gap: 0.6rem 1.25rem;
690
+ padding: 0.45rem 1.25rem;
691
+ background-color: var(--obsidian-900);
692
+ border-bottom: 1px solid var(--obsidian-700);
693
+ font-size: 11px;
694
+ }
695
+
696
+ .modal-durations-strip .duration-item {
697
+ display: inline-flex;
698
+ align-items: center;
699
+ gap: 0.35rem;
700
+ }
701
+
702
+ .modal-durations-strip .duration-label {
703
+ color: var(--slate-400);
704
+ text-transform: uppercase;
705
+ font-weight: 600;
706
+ font-size: 10px;
707
+ }
708
+
709
+ .modal-durations-strip .duration-value {
710
+ color: var(--slate-200);
711
+ font-family: var(--font-mono, monospace);
712
+ font-weight: 500;
713
+ }
714
+
715
+ .modal-durations-strip .duration-item.total-item .duration-label {
716
+ color: var(--amber-glow);
717
+ }
718
+
719
+ .modal-durations-strip .duration-item.total-item .duration-value {
720
+ color: #4ade80;
721
+ font-weight: 700;
722
+ }
723
+
724
+ .modal-body {
725
+ padding: 1.25rem;
726
+ overflow-y: auto;
727
+ flex: 1;
728
+ display: flex;
729
+ flex-direction: column;
730
+ gap: 1rem;
731
+ }
732
+
733
+ .transcript-stream {
734
+ display: flex;
735
+ flex-direction: column;
736
+ gap: 0.75rem;
737
+ }
738
+
739
+ .transcript-loading {
740
+ color: var(--slate-500);
741
+ font-style: italic;
742
+ }
743
+
744
+ /* Collapsible Thinking Block */
745
+ .thinking-block {
746
+ border: 1px solid var(--obsidian-700);
747
+ background-color: var(--obsidian-950);
748
+ border-radius: 2px;
749
+ }
750
+
751
+ .thinking-header {
752
+ display: flex;
753
+ align-items: center;
754
+ justify-content: space-between;
755
+ padding: 0.5rem 0.75rem;
756
+ background-color: var(--obsidian-850);
757
+ cursor: pointer;
758
+ user-select: none;
759
+ font-weight: 600;
760
+ font-size: 11px;
761
+ color: var(--amber-accent);
762
+ }
763
+
764
+ .thinking-header:hover {
765
+ background-color: var(--obsidian-800);
766
+ }
767
+
768
+ .thinking-content {
769
+ padding: 0.75rem;
770
+ border-top: 1px solid var(--obsidian-700);
771
+ font-size: 12px;
772
+ color: var(--slate-300);
773
+ white-space: pre-wrap;
774
+ line-height: 1.6;
775
+ }
776
+
777
+ .thinking-content.collapsed {
778
+ display: none;
779
+ }
780
+
781
+ /* Tool Call Records */
782
+ .tool-record {
783
+ border: 1px solid var(--obsidian-700);
784
+ background-color: var(--obsidian-950);
785
+ padding: 0.75rem;
786
+ border-left: 3px solid var(--purple-accent);
787
+ }
788
+
789
+ .tool-name {
790
+ font-weight: 700;
791
+ color: var(--slate-100);
792
+ margin-bottom: 0.4rem;
793
+ display: flex;
794
+ align-items: center;
795
+ gap: 0.5rem;
796
+ }
797
+
798
+ .tool-args {
799
+ background-color: var(--obsidian-900);
800
+ border: 1px solid var(--obsidian-800);
801
+ padding: 0.5rem;
802
+ font-size: 11px;
803
+ color: var(--slate-300);
804
+ overflow-x: auto;
805
+ margin-bottom: 0.4rem;
806
+ }
807
+
808
+ /* Diffs and Code Changes */
809
+ .diff-record {
810
+ border: 1px solid var(--obsidian-700);
811
+ background-color: var(--obsidian-950);
812
+ border-left: 3px solid var(--green-ok);
813
+ padding: 0.75rem;
814
+ }
815
+
816
+ .diff-content {
817
+ background-color: var(--obsidian-900);
818
+ border: 1px solid var(--obsidian-800);
819
+ padding: 0.5rem;
820
+ font-size: 11px;
821
+ line-height: 1.4;
822
+ overflow-x: auto;
823
+ }
824
+
825
+ .diff-line-add {
826
+ color: var(--green-ok);
827
+ background-color: var(--green-dim);
828
+ display: block;
829
+ }
830
+
831
+ .diff-line-del {
832
+ color: var(--red-alert);
833
+ background-color: var(--red-dim);
834
+ display: block;
835
+ }
836
+
837
+ .diff-line-info {
838
+ color: var(--slate-500);
839
+ display: block;
840
+ }
841
+
842
+ .card {
843
+ cursor: pointer;
844
+ }
845
+
846
+ /* Gate Approval Alerts and Buttons */
847
+ .gate-alert {
848
+ display: flex;
849
+ align-items: center;
850
+ justify-content: space-between;
851
+ gap: 1rem;
852
+ padding: 0.75rem 1.25rem;
853
+ background-color: rgba(255, 153, 0, 0.12);
854
+ border-bottom: 1px solid var(--amber-glow);
855
+ color: var(--amber-accent);
856
+ font-size: 11px;
857
+ font-weight: 600;
858
+ }
859
+
860
+ .gate-alert.hidden {
861
+ display: none !important;
862
+ }
863
+
864
+ .gate-alert.success {
865
+ background-color: var(--green-dim);
866
+ border-bottom-color: var(--green-ok);
867
+ color: var(--green-ok);
868
+ }
869
+
870
+ .gate-alert-content {
871
+ display: flex;
872
+ align-items: center;
873
+ gap: 0.5rem;
874
+ }
875
+
876
+ .btn-approve-gate {
877
+ background-color: var(--amber-glow);
878
+ color: var(--obsidian-950);
879
+ border: 1px solid var(--amber-glow);
880
+ font-family: var(--font-mono);
881
+ font-size: 11px;
882
+ font-weight: 700;
883
+ padding: 0.35rem 0.75rem;
884
+ border-radius: 2px;
885
+ cursor: pointer;
886
+ text-transform: uppercase;
887
+ letter-spacing: 0.05em;
888
+ transition: all 0.15s ease;
889
+ white-space: nowrap;
890
+ }
891
+
892
+ .btn-approve-gate:hover {
893
+ background-color: #ffa726;
894
+ box-shadow: 0 0 10px rgba(255, 153, 0, 0.6);
895
+ transform: translateY(-1px);
896
+ }
897
+
898
+ .btn-approve-gate:active {
899
+ transform: translateY(0);
900
+ }
901
+
902
+ .btn-approve-gate.approved {
903
+ background-color: var(--green-ok);
904
+ border-color: var(--green-ok);
905
+ color: #fff;
906
+ cursor: default;
907
+ box-shadow: none;
908
+ }
909
+
910
+ .card-action-bar {
911
+ margin-top: 0.5rem;
912
+ padding-top: 0.4rem;
913
+ border-top: 1px solid var(--obsidian-800);
914
+ display: flex;
915
+ justify-content: flex-end;
916
+ }
917
+
918
+ .card-action-bar .btn-approve-gate {
919
+ font-size: 9px;
920
+ padding: 0.2rem 0.5rem;
921
+ width: 100%;
922
+ text-align: center;
923
+ }
924
+
925
+ /* Modal Tabs */
926
+ .modal-tabs {
927
+ display: flex;
928
+ background-color: var(--obsidian-950);
929
+ border-bottom: 1px solid var(--obsidian-700);
930
+ padding: 0 1.25rem;
931
+ gap: 0.5rem;
932
+ }
933
+
934
+ .modal-tab {
935
+ background: transparent;
936
+ border: none;
937
+ border-bottom: 2px solid transparent;
938
+ color: var(--slate-400);
939
+ font-family: var(--font-mono);
940
+ font-size: 11px;
941
+ font-weight: 600;
942
+ padding: 0.75rem 1rem;
943
+ cursor: pointer;
944
+ transition: all 0.15s ease;
945
+ text-transform: uppercase;
946
+ letter-spacing: 0.05em;
947
+ }
948
+
949
+ .modal-tab:hover {
950
+ color: var(--slate-200);
951
+ }
952
+
953
+ .modal-tab.active {
954
+ color: var(--amber-glow);
955
+ border-bottom-color: var(--amber-glow);
956
+ }
957
+
958
+ .tab-pane.hidden {
959
+ display: none !important;
960
+ }
961
+
962
+ /* Gate Verdicts Display */
963
+ .gates-container {
964
+ display: flex;
965
+ flex-direction: column;
966
+ gap: 1rem;
967
+ }
968
+
969
+ .gate-card {
970
+ background-color: var(--obsidian-950);
971
+ border: 1px solid var(--obsidian-700);
972
+ border-radius: 2px;
973
+ overflow: hidden;
974
+ }
975
+
976
+ .gate-card-header {
977
+ display: flex;
978
+ align-items: center;
979
+ justify-content: space-between;
980
+ padding: 0.6rem 0.85rem;
981
+ background-color: var(--obsidian-850);
982
+ border-bottom: 1px solid var(--obsidian-700);
983
+ }
984
+
985
+ .gate-card-title {
986
+ font-weight: 700;
987
+ font-size: 11px;
988
+ color: var(--slate-100);
989
+ letter-spacing: 0.05em;
990
+ text-transform: uppercase;
991
+ }
992
+
993
+ .gate-card-body {
994
+ padding: 0.85rem;
995
+ display: flex;
996
+ flex-direction: column;
997
+ gap: 0.6rem;
998
+ font-size: 11px;
999
+ }
1000
+
1001
+ .gate-metric {
1002
+ display: flex;
1003
+ align-items: flex-start;
1004
+ gap: 0.5rem;
1005
+ color: var(--slate-300);
1006
+ }
1007
+
1008
+ .gate-metric-label {
1009
+ font-weight: 600;
1010
+ color: var(--slate-400);
1011
+ min-width: 140px;
1012
+ }
1013
+
1014
+ .gate-checklist {
1015
+ list-style: none;
1016
+ display: flex;
1017
+ flex-direction: column;
1018
+ gap: 0.35rem;
1019
+ margin-top: 0.25rem;
1020
+ }
1021
+
1022
+ .gate-checklist-item {
1023
+ display: flex;
1024
+ align-items: center;
1025
+ gap: 0.4rem;
1026
+ color: var(--slate-300);
1027
+ }
1028
+
1029
+ /* History Toolbar */
1030
+ .history-toolbar {
1031
+ display: flex;
1032
+ align-items: center;
1033
+ justify-content: space-between;
1034
+ margin-bottom: 0.75rem;
1035
+ padding-bottom: 0.5rem;
1036
+ border-bottom: 1px solid var(--obsidian-800);
1037
+ }
1038
+
1039
+ .history-hint {
1040
+ font-size: 10px;
1041
+ color: var(--slate-500);
1042
+ text-transform: uppercase;
1043
+ }
1044
+
1045
+ .btn-popout {
1046
+ background: var(--obsidian-850);
1047
+ border: 1px solid var(--obsidian-700);
1048
+ color: var(--amber-accent);
1049
+ font-family: var(--font-mono);
1050
+ font-size: 10px;
1051
+ font-weight: 600;
1052
+ padding: 0.25rem 0.6rem;
1053
+ border-radius: 2px;
1054
+ cursor: pointer;
1055
+ transition: all 0.15s ease;
1056
+ }
1057
+
1058
+ .btn-popout:hover {
1059
+ border-color: var(--amber-glow);
1060
+ color: var(--slate-100);
1061
+ box-shadow: 0 0 6px rgba(255, 153, 0, 0.3);
1062
+ }
1063
+
1064
+ /* Shutdown Control & Modal */
1065
+ .btn-shutdown {
1066
+ background-color: rgba(248, 81, 73, 0.1);
1067
+ color: var(--red-err);
1068
+ border: 1px solid var(--red-err);
1069
+ font-family: var(--font-mono);
1070
+ font-size: 11px;
1071
+ font-weight: 700;
1072
+ padding: 0.35rem 0.75rem;
1073
+ border-radius: 2px;
1074
+ cursor: pointer;
1075
+ text-transform: uppercase;
1076
+ letter-spacing: 0.05em;
1077
+ transition: all 0.15s ease;
1078
+ white-space: nowrap;
1079
+ }
1080
+
1081
+ .btn-shutdown:hover {
1082
+ background-color: var(--red-err);
1083
+ color: #fff;
1084
+ box-shadow: 0 0 10px rgba(248, 81, 73, 0.5);
1085
+ }
1086
+
1087
+ .modal-dialog-sm {
1088
+ max-width: 480px;
1089
+ }
1090
+
1091
+ .alert-diamond {
1092
+ background-color: var(--red-err) !important;
1093
+ box-shadow: 0 0 8px rgba(248, 81, 73, 0.6) !important;
1094
+ }
1095
+
1096
+ .shutdown-message {
1097
+ color: var(--slate-300);
1098
+ font-size: 12px;
1099
+ line-height: 1.6;
1100
+ padding: 1rem 1.25rem;
1101
+ }
1102
+
1103
+ .modal-footer {
1104
+ display: flex;
1105
+ align-items: center;
1106
+ justify-content: flex-end;
1107
+ gap: 0.75rem;
1108
+ padding: 0.85rem 1.25rem;
1109
+ border-top: 1px solid var(--obsidian-700);
1110
+ background-color: var(--obsidian-950);
1111
+ }
1112
+
1113
+ .btn-secondary {
1114
+ background: transparent;
1115
+ color: var(--slate-300);
1116
+ border: 1px solid var(--obsidian-600);
1117
+ font-family: var(--font-mono);
1118
+ font-size: 11px;
1119
+ font-weight: 700;
1120
+ padding: 0.35rem 0.75rem;
1121
+ border-radius: 2px;
1122
+ cursor: pointer;
1123
+ }
1124
+
1125
+ .btn-secondary:hover {
1126
+ border-color: var(--slate-100);
1127
+ color: #fff;
1128
+ }
1129
+
1130
+ .btn-danger {
1131
+ background-color: var(--red-err);
1132
+ color: #fff;
1133
+ border: 1px solid var(--red-err);
1134
+ font-family: var(--font-mono);
1135
+ font-size: 11px;
1136
+ font-weight: 700;
1137
+ padding: 0.35rem 0.75rem;
1138
+ border-radius: 2px;
1139
+ cursor: pointer;
1140
+ letter-spacing: 0.05em;
1141
+ }
1142
+
1143
+ .btn-danger:hover {
1144
+ background-color: #ff6b6b;
1145
+ box-shadow: 0 0 10px rgba(248, 81, 73, 0.6);
1146
+ }
1147
+
1148
+ /* Stopped Overlay */
1149
+ .stopped-overlay {
1150
+ position: fixed;
1151
+ top: 3.5rem;
1152
+ left: 0;
1153
+ right: 0;
1154
+ bottom: 0;
1155
+ background-color: rgba(10, 13, 20, 0.96);
1156
+ z-index: 40;
1157
+ display: flex;
1158
+ align-items: center;
1159
+ justify-content: center;
1160
+ padding: 2rem;
1161
+ }
1162
+
1163
+ .stopped-overlay.hidden {
1164
+ display: none !important;
1165
+ }
1166
+
1167
+ .stopped-card {
1168
+ background-color: var(--obsidian-900);
1169
+ border: 1px solid var(--red-err);
1170
+ padding: 2.5rem 3rem;
1171
+ text-align: center;
1172
+ max-width: 500px;
1173
+ border-radius: 4px;
1174
+ box-shadow: 0 0 30px rgba(248, 81, 73, 0.2);
1175
+ }
1176
+
1177
+ .stopped-icon {
1178
+ font-size: 32px;
1179
+ color: var(--red-err);
1180
+ margin-bottom: 1rem;
1181
+ display: inline-block;
1182
+ }
1183
+
1184
+ .stopped-heading {
1185
+ font-size: 20px;
1186
+ font-weight: 700;
1187
+ color: var(--red-err);
1188
+ letter-spacing: 0.1em;
1189
+ margin-bottom: 0.5rem;
1190
+ }
1191
+
1192
+ .stopped-subtext {
1193
+ font-size: 12px;
1194
+ color: var(--slate-400);
1195
+ letter-spacing: 0.05em;
1196
+ margin-bottom: 1.5rem;
1197
+ }
1198
+
1199
+ .stopped-hint {
1200
+ font-size: 11px;
1201
+ color: var(--slate-400);
1202
+ background-color: var(--obsidian-950);
1203
+ padding: 0.75rem;
1204
+ border: 1px solid var(--obsidian-700);
1205
+ border-radius: 2px;
1206
+ }
1207
+
1208
+ .stopped-hint code {
1209
+ color: var(--amber-glow);
1210
+ }
1211
+
1212
+ .status-indicator.stopped {
1213
+ background-color: var(--red-err);
1214
+ box-shadow: 0 0 6px var(--red-err);
74
1215
  }