@firstpick/pi-package-webui 0.1.2 → 0.1.3

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 (9) hide show
  1. package/README.md +16 -9
  2. package/bin/pi-webui.mjs +1039 -33
  3. package/index.ts +136 -29
  4. package/package.json +3 -2
  5. package/public/app.js +2419 -132
  6. package/public/index.html +13 -3
  7. package/public/service-worker.js +13 -1
  8. package/public/styles.css +669 -124
  9. package/tests/mobile-static.test.mjs +202 -2
package/public/styles.css CHANGED
@@ -1,5 +1,6 @@
1
1
  :root {
2
- color-scheme: dark;
2
+ --theme-color-scheme: dark;
3
+ color-scheme: var(--theme-color-scheme);
3
4
 
4
5
  /* Catppuccin Mocha core */
5
6
  --ctp-rosewater: #f5e0dc;
@@ -23,11 +24,18 @@
23
24
  --ctp-base: #1e1e2e;
24
25
  --ctp-mantle: #181825;
25
26
  --ctp-crust: #11111b;
27
+ --ctp-text-rgb: 205, 214, 244;
28
+ --ctp-subtext-rgb: 186, 194, 222;
29
+ --ctp-overlay-rgb: 108, 112, 134;
30
+ --ctp-surface-rgb: 49, 50, 68;
31
+ --ctp-base-rgb: 30, 30, 46;
32
+ --ctp-mantle-rgb: 24, 24, 37;
33
+ --ctp-crust-rgb: 17, 17, 27;
26
34
 
27
35
  --bg: var(--ctp-crust);
28
- --panel: rgba(30, 30, 46, 0.72);
29
- --panel-2: rgba(49, 50, 68, 0.78);
30
- --panel-3: rgba(24, 24, 37, 0.92);
36
+ --panel: rgba(var(--ctp-base-rgb), 0.72);
37
+ --panel-2: rgba(var(--ctp-surface-rgb), 0.78);
38
+ --panel-3: rgba(var(--ctp-mantle-rgb), 0.92);
31
39
  --text: var(--ctp-text);
32
40
  --muted: var(--ctp-subtext);
33
41
  --border: rgba(180, 190, 254, 0.22);
@@ -37,13 +45,20 @@
37
45
  --danger: var(--ctp-red);
38
46
  --warning: var(--ctp-yellow);
39
47
  --ok: var(--ctp-green);
40
- --shadow: rgba(17, 17, 27, 0.78);
48
+ --shadow: rgba(var(--ctp-crust-rgb), 0.78);
41
49
  --glow-mauve: rgba(203, 166, 247, 0.42);
42
50
  --glow-blue: rgba(137, 180, 250, 0.36);
43
51
  --glow-pink: rgba(245, 194, 231, 0.34);
44
52
  --glow-teal: rgba(148, 226, 213, 0.26);
45
- --panel-gradient: linear-gradient(145deg, rgba(49, 50, 68, 0.78), rgba(24, 24, 37, 0.86) 52%, rgba(17, 17, 27, 0.9));
53
+ --panel-gradient: linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.78), rgba(var(--ctp-mantle-rgb), 0.86) 52%, rgba(var(--ctp-crust-rgb), 0.9));
46
54
  --neon-gradient: linear-gradient(120deg, var(--ctp-pink), var(--ctp-mauve) 32%, var(--ctp-blue) 66%, var(--ctp-teal));
55
+ --context-card-gradient: linear-gradient(100deg, rgba(166, 227, 161, 0.62) 0%, rgba(249, 226, 175, 0.66) 36%, rgba(137, 180, 250, 0.64) 62%, rgba(243, 139, 168, 0.78) 100%);
56
+ --context-active-color: var(--ctp-green);
57
+ --context-active-glow: rgba(166, 227, 161, 0.42);
58
+ --background-glow-pink: rgba(245, 194, 231, 0.34);
59
+ --background-glow-blue: rgba(137, 180, 250, 0.32);
60
+ --background-glow-teal: rgba(148, 226, 213, 0.20);
61
+ --button-primary-text: #11111b;
47
62
  --visual-viewport-height: 100dvh;
48
63
  --visual-viewport-offset-top: 0px;
49
64
  --keyboard-inset-bottom: 0px;
@@ -60,10 +75,10 @@ body {
60
75
  overflow: hidden;
61
76
  color: var(--text);
62
77
  background:
63
- radial-gradient(circle at 8% -8%, rgba(245, 194, 231, 0.34) 0, transparent 31rem),
64
- radial-gradient(circle at 82% 2%, rgba(137, 180, 250, 0.32) 0, transparent 34rem),
65
- radial-gradient(circle at 52% 112%, rgba(148, 226, 213, 0.20) 0, transparent 30rem),
66
- linear-gradient(135deg, #11111b 0%, #181825 45%, #1e1e2e 100%);
78
+ radial-gradient(circle at 8% -8%, var(--background-glow-pink) 0, transparent 31rem),
79
+ radial-gradient(circle at 82% 2%, var(--background-glow-blue) 0, transparent 34rem),
80
+ radial-gradient(circle at 52% 112%, var(--background-glow-teal) 0, transparent 30rem),
81
+ linear-gradient(135deg, var(--ctp-crust) 0%, var(--ctp-mantle) 45%, var(--ctp-base) 100%);
67
82
  }
68
83
  body::before,
69
84
  body::after {
@@ -83,13 +98,13 @@ body::before {
83
98
  }
84
99
  body::after {
85
100
  opacity: 0.14;
86
- background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(205, 214, 244, 0.36) 5px, transparent 6px);
101
+ background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(var(--ctp-text-rgb), 0.36) 5px, transparent 6px);
87
102
  mix-blend-mode: screen;
88
103
  }
89
104
 
90
105
  button, select, textarea, input {
91
106
  color: var(--text);
92
- background: linear-gradient(180deg, rgba(49, 50, 68, 0.9), rgba(24, 24, 37, 0.88));
107
+ background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
93
108
  border: 1px solid var(--border);
94
109
  border-radius: 0.7rem;
95
110
  font: inherit;
@@ -112,14 +127,14 @@ button:hover {
112
127
  }
113
128
  button:active { transform: translateY(0); }
114
129
  button.primary {
115
- color: #11111b;
130
+ color: var(--button-primary-text);
116
131
  font-weight: 800;
117
132
  border-color: transparent;
118
133
  background: var(--neon-gradient);
119
134
  box-shadow: 0 0 1.4rem var(--glow-mauve), 0 0.7rem 1.8rem rgba(0, 0, 0, 0.35);
120
135
  }
121
136
  button.danger {
122
- color: #11111b;
137
+ color: var(--button-primary-text);
123
138
  font-weight: 800;
124
139
  background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
125
140
  border-color: rgba(243, 139, 168, 0.82);
@@ -136,7 +151,7 @@ select {
136
151
  padding: 0.5rem 2.15rem 0.5rem 0.7rem;
137
152
  min-width: 8rem;
138
153
  color: var(--ctp-text);
139
- color-scheme: dark;
154
+ color-scheme: var(--theme-color-scheme);
140
155
  accent-color: var(--ctp-mauve);
141
156
  border-color: rgba(180, 190, 254, 0.30);
142
157
  background-color: var(--ctp-base);
@@ -144,7 +159,7 @@ select {
144
159
  linear-gradient(45deg, transparent 50%, var(--ctp-teal) 50%),
145
160
  linear-gradient(135deg, var(--ctp-teal) 50%, transparent 50%),
146
161
  linear-gradient(135deg, rgba(245, 194, 231, 0.16), rgba(137, 180, 250, 0.10) 45%, rgba(148, 226, 213, 0.12)),
147
- linear-gradient(180deg, rgba(49, 50, 68, 0.98), rgba(24, 24, 37, 0.96));
162
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.98), rgba(var(--ctp-mantle-rgb), 0.96));
148
163
  background-position:
149
164
  calc(100% - 1.05rem) 50%,
150
165
  calc(100% - 0.72rem) 50%,
@@ -156,7 +171,7 @@ select {
156
171
  100% 100%,
157
172
  100% 100%;
158
173
  background-repeat: no-repeat;
159
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0.55rem 1.3rem rgba(17, 17, 27, 0.22);
174
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0.55rem 1.3rem rgba(var(--ctp-crust-rgb), 0.22);
160
175
  }
161
176
  select:hover {
162
177
  border-color: rgba(203, 166, 247, 0.58);
@@ -184,11 +199,11 @@ textarea {
184
199
  color: var(--ctp-text);
185
200
  caret-color: var(--ctp-pink);
186
201
  background:
187
- linear-gradient(180deg, rgba(17, 17, 27, 0.78), rgba(30, 30, 46, 0.8)),
188
- radial-gradient(circle at 0 0, rgba(203, 166, 247, 0.14), transparent 18rem);
189
- box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), inset 0 0 2rem rgba(17, 17, 27, 0.42);
202
+ linear-gradient(180deg, var(--panel-3), var(--panel)),
203
+ radial-gradient(circle at 0 0, var(--glow-mauve), transparent 18rem);
204
+ box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), inset 0 0 2rem rgba(var(--ctp-crust-rgb), 0.42);
190
205
  }
191
- textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
206
+ textarea::placeholder { color: rgba(var(--ctp-subtext-rgb), 0.62); }
192
207
  #promptInput {
193
208
  min-height: calc(1.5em + 1.8rem);
194
209
  max-height: min(38vh, 18rem);
@@ -206,9 +221,9 @@ textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
206
221
  justify-content: space-between;
207
222
  padding: 1rem 1.25rem;
208
223
  border-bottom: 1px solid rgba(180, 190, 254, 0.22);
209
- background: linear-gradient(90deg, rgba(17, 17, 27, 0.9), rgba(30, 30, 46, 0.7), rgba(24, 24, 37, 0.88));
224
+ background: linear-gradient(90deg, rgba(var(--ctp-crust-rgb), 0.9), rgba(var(--ctp-base-rgb), 0.7), rgba(var(--ctp-mantle-rgb), 0.88));
210
225
  backdrop-filter: blur(18px) saturate(150%);
211
- box-shadow: 0 0.75rem 2.5rem rgba(17, 17, 27, 0.56), 0 0 2rem rgba(203, 166, 247, 0.10);
226
+ box-shadow: 0 0.75rem 2.5rem rgba(var(--ctp-crust-rgb), 0.56), 0 0 2rem rgba(203, 166, 247, 0.10);
212
227
  }
213
228
  .topbar::before {
214
229
  content: "";
@@ -231,7 +246,7 @@ textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
231
246
  color: transparent;
232
247
  text-shadow: 0 0 1.6rem var(--glow-mauve);
233
248
  }
234
- .topbar p { margin: 0.25rem 0 0; color: rgba(205, 214, 244, 0.72); }
249
+ .topbar p { margin: 0.25rem 0 0; color: rgba(var(--ctp-text-rgb), 0.72); }
235
250
  .top-actions {
236
251
  display: flex;
237
252
  align-items: center;
@@ -281,7 +296,7 @@ body.side-panel-collapsed .side-panel {
281
296
  color: var(--ctp-teal);
282
297
  background:
283
298
  linear-gradient(120deg, rgba(148, 226, 213, 0.14), rgba(203, 166, 247, 0.10)),
284
- linear-gradient(145deg, rgba(30, 30, 46, 0.94), rgba(17, 17, 27, 0.96));
299
+ linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.94), rgba(var(--ctp-crust-rgb), 0.96));
285
300
  box-shadow: 0 0 1.15rem rgba(148, 226, 213, 0.22), 0 0.8rem 2rem rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.06);
286
301
  }
287
302
  .side-panel-expand-button::before,
@@ -312,7 +327,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
312
327
  height: 1.08rem;
313
328
  border: 1px solid rgba(180, 190, 254, 0.34);
314
329
  border-radius: 0.34rem;
315
- background: rgba(17, 17, 27, 0.50);
330
+ background: rgba(var(--ctp-crust-rgb), 0.50);
316
331
  box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), 0 0 0.75rem rgba(148, 226, 213, 0.10);
317
332
  }
318
333
  .side-panel-button-icon::before {
@@ -383,7 +398,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
383
398
  margin: 0;
384
399
  padding: 0.9rem 0.95rem;
385
400
  border-bottom: 1px solid rgba(180, 190, 254, 0.16);
386
- background: linear-gradient(90deg, rgba(17, 17, 27, 0.96), rgba(30, 30, 46, 0.82));
401
+ background: linear-gradient(90deg, rgba(var(--ctp-crust-rgb), 0.96), rgba(var(--ctp-base-rgb), 0.82));
387
402
  backdrop-filter: blur(14px) saturate(150%);
388
403
  }
389
404
  .side-panel-header strong {
@@ -424,7 +439,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
424
439
  color: var(--ctp-teal);
425
440
  background:
426
441
  linear-gradient(120deg, rgba(148, 226, 213, 0.12), rgba(203, 166, 247, 0.10)),
427
- linear-gradient(145deg, rgba(49, 50, 68, 0.78), rgba(17, 17, 27, 0.86));
442
+ linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.78), rgba(var(--ctp-crust-rgb), 0.86));
428
443
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0.8rem rgba(148, 226, 213, 0.08);
429
444
  }
430
445
  .side-panel-toggle-button:hover,
@@ -454,7 +469,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
454
469
  padding: 0.72rem;
455
470
  border: 1px solid rgba(180, 190, 254, 0.16);
456
471
  border-radius: 0.85rem;
457
- background: rgba(17, 17, 27, 0.46);
472
+ background: rgba(var(--ctp-crust-rgb), 0.46);
458
473
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(203, 166, 247, 0.06);
459
474
  }
460
475
  .control-field {
@@ -462,7 +477,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
462
477
  gap: 0.42rem;
463
478
  }
464
479
  .control-field label {
465
- color: rgba(205, 214, 244, 0.74);
480
+ color: rgba(var(--ctp-text-rgb), 0.74);
466
481
  font-size: 0.72rem;
467
482
  font-weight: 900;
468
483
  letter-spacing: 0.12em;
@@ -480,11 +495,11 @@ body.side-panel-collapsed .terminal-tabs-shell {
480
495
  min-height: 5.6rem;
481
496
  padding: 0.68rem 0.72rem;
482
497
  overflow-wrap: anywhere;
483
- color: rgba(205, 214, 244, 0.88);
498
+ color: rgba(var(--ctp-text-rgb), 0.88);
484
499
  white-space: normal;
485
500
  border: 1px solid rgba(180, 190, 254, 0.16);
486
501
  border-radius: 0.72rem;
487
- background: rgba(17, 17, 27, 0.62);
502
+ background: rgba(var(--ctp-crust-rgb), 0.62);
488
503
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
489
504
  font-size: 0.78rem;
490
505
  font-weight: 800;
@@ -495,12 +510,13 @@ body.side-panel-collapsed .terminal-tabs-shell {
495
510
  border-color: rgba(249, 226, 175, 0.34);
496
511
  box-shadow: 0 0 0.9rem rgba(249, 226, 175, 0.10);
497
512
  }
498
- .network-status.opening {
513
+ .network-status.opening,
514
+ .network-status.closing {
499
515
  color: var(--ctp-teal);
500
516
  border-color: rgba(148, 226, 213, 0.34);
501
517
  }
502
518
  .network-status.closed {
503
- color: rgba(186, 194, 222, 0.72);
519
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
504
520
  }
505
521
  .network-status-heading {
506
522
  color: var(--ctp-text);
@@ -509,7 +525,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
509
525
  }
510
526
  .network-status-detail,
511
527
  .network-status-empty {
512
- color: rgba(186, 194, 222, 0.68);
528
+ color: rgba(var(--ctp-subtext-rgb), 0.68);
513
529
  font-family: inherit;
514
530
  font-size: 0.72rem;
515
531
  font-weight: 700;
@@ -527,7 +543,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
527
543
  min-width: 0;
528
544
  }
529
545
  .network-status-url-label {
530
- color: rgba(186, 194, 222, 0.70);
546
+ color: rgba(var(--ctp-subtext-rgb), 0.70);
531
547
  font-size: 0.68rem;
532
548
  font-weight: 900;
533
549
  letter-spacing: 0.08em;
@@ -558,6 +574,8 @@ body.side-panel-collapsed .terminal-tabs-shell {
558
574
  }
559
575
 
560
576
  .terminal-tabs-shell {
577
+ position: relative;
578
+ z-index: 20;
561
579
  flex: 0 0 auto;
562
580
  display: flex;
563
581
  align-items: center;
@@ -566,9 +584,9 @@ body.side-panel-collapsed .terminal-tabs-shell {
566
584
  padding: 0.62rem 0.78rem;
567
585
  border-bottom: 1px solid rgba(180, 190, 254, 0.16);
568
586
  background:
569
- linear-gradient(90deg, rgba(17, 17, 27, 0.96), rgba(30, 30, 46, 0.82), rgba(24, 24, 37, 0.92)),
587
+ linear-gradient(90deg, rgba(var(--ctp-crust-rgb), 0.96), rgba(var(--ctp-base-rgb), 0.82), rgba(var(--ctp-mantle-rgb), 0.92)),
570
588
  radial-gradient(circle at 0% 0%, rgba(245, 194, 231, 0.12), transparent 18rem);
571
- box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(17, 17, 27, 0.20);
589
+ box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.20);
572
590
  }
573
591
  .terminal-tabs-toggle-button { display: none; }
574
592
  .terminal-tabs {
@@ -580,6 +598,16 @@ body.side-panel-collapsed .terminal-tabs-shell {
580
598
  overflow-x: auto;
581
599
  scrollbar-width: thin;
582
600
  }
601
+ .terminal-tabs-shell:has(.terminal-tab-group:hover),
602
+ .terminal-tabs-shell:has(.terminal-tab-group:focus-within),
603
+ .terminal-tabs-shell:has(.terminal-tab-group.menu-open) {
604
+ z-index: 90;
605
+ }
606
+ .terminal-tabs:has(.terminal-tab-group:hover),
607
+ .terminal-tabs:has(.terminal-tab-group:focus-within),
608
+ .terminal-tabs:has(.terminal-tab-group.menu-open) {
609
+ overflow: visible;
610
+ }
583
611
  .terminal-tab {
584
612
  display: inline-flex;
585
613
  align-items: stretch;
@@ -588,20 +616,139 @@ body.side-panel-collapsed .terminal-tabs-shell {
588
616
  border: 1px solid rgba(180, 190, 254, 0.16);
589
617
  border-radius: 0.82rem;
590
618
  overflow: hidden;
591
- background: rgba(17, 17, 27, 0.54);
619
+ background: rgba(var(--ctp-crust-rgb), 0.54);
592
620
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
593
621
  }
622
+ .terminal-tab-group {
623
+ position: relative;
624
+ z-index: 1;
625
+ overflow: visible;
626
+ isolation: isolate;
627
+ background: var(--ctp-crust);
628
+ }
629
+ .terminal-tab-group:hover,
630
+ .terminal-tab-group:focus-within {
631
+ z-index: 100;
632
+ }
633
+ .terminal-tab-group-button {
634
+ width: 100%;
635
+ }
636
+ .terminal-tab-group-count {
637
+ flex: 0 0 auto;
638
+ min-width: 1.35rem;
639
+ padding: 0.04rem 0.36rem;
640
+ border: 1px solid rgba(180, 190, 254, 0.18);
641
+ border-radius: 999px;
642
+ color: rgba(var(--ctp-subtext-rgb), 0.82);
643
+ background: rgba(var(--ctp-surface-rgb), 0.46);
644
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
645
+ font-size: 0.66rem;
646
+ font-weight: 800;
647
+ line-height: 1.15;
648
+ text-align: center;
649
+ }
650
+ .terminal-tab-group-menu {
651
+ position: absolute;
652
+ z-index: 100;
653
+ inset: 100% auto auto 0;
654
+ display: none;
655
+ flex-direction: column;
656
+ align-items: stretch;
657
+ gap: 0.38rem;
658
+ width: max-content;
659
+ padding-top: 0.38rem;
660
+ min-width: 100%;
661
+ max-width: min(18rem, calc(100vw - 2rem));
662
+ max-height: min(60vh, 24rem);
663
+ overflow: auto;
664
+ scrollbar-width: thin;
665
+ }
666
+ .terminal-tab-group:hover .terminal-tab-group-menu,
667
+ .terminal-tab-group:focus-within .terminal-tab-group-menu,
668
+ .terminal-tab-group.menu-open .terminal-tab-group-menu {
669
+ display: flex;
670
+ }
671
+ .terminal-tab-group-item {
672
+ display: inline-flex;
673
+ align-items: stretch;
674
+ width: min(16rem, calc(100vw - 2rem));
675
+ min-width: 9rem;
676
+ max-width: 16rem;
677
+ border: 1px solid rgba(180, 190, 254, 0.16);
678
+ border-radius: 0.82rem;
679
+ overflow: hidden;
680
+ background: var(--ctp-crust);
681
+ box-shadow: 0 0.75rem 1.6rem rgba(var(--ctp-crust-rgb), 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
682
+ }
683
+ .terminal-tab-group-item.active {
684
+ border-color: rgba(148, 226, 213, 0.54);
685
+ background:
686
+ linear-gradient(120deg, rgba(148, 226, 213, 0.19), rgba(203, 166, 247, 0.13)),
687
+ var(--ctp-crust);
688
+ box-shadow: 0 0 1rem rgba(148, 226, 213, 0.20), inset 0 1px 0 rgba(255,255,255,0.05);
689
+ }
690
+ .terminal-tab-group-item.stopped {
691
+ opacity: 1;
692
+ border-color: rgba(243, 139, 168, 0.28);
693
+ }
694
+ .terminal-tab-group-item.activity-working {
695
+ border-color: rgba(249, 226, 175, 0.56);
696
+ }
697
+ .terminal-tab-group-item.activity-blocked {
698
+ border-color: rgba(250, 179, 135, 0.62);
699
+ }
700
+ .terminal-tab-group-item.activity-done {
701
+ border-color: rgba(166, 227, 161, 0.52);
702
+ }
703
+ .terminal-tab-group-add {
704
+ width: min(16rem, calc(100vw - 2rem));
705
+ min-height: 2.35rem;
706
+ padding: 0.38rem 0.72rem;
707
+ color: var(--ctp-pink);
708
+ white-space: nowrap;
709
+ border: 1px solid rgba(245, 194, 231, 0.30);
710
+ border-radius: 0.78rem;
711
+ background:
712
+ linear-gradient(120deg, rgba(245, 194, 231, 0.14), rgba(137, 180, 250, 0.10)),
713
+ var(--ctp-crust);
714
+ box-shadow: 0 0.75rem 1.6rem rgba(var(--ctp-crust-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.045);
715
+ }
716
+ .terminal-tab-group-add:hover {
717
+ color: #11111b;
718
+ border-color: transparent;
719
+ background: linear-gradient(120deg, var(--ctp-pink), var(--ctp-blue));
720
+ }
594
721
  .terminal-tab.active {
595
722
  border-color: rgba(148, 226, 213, 0.54);
596
723
  background:
597
724
  linear-gradient(120deg, rgba(148, 226, 213, 0.17), rgba(203, 166, 247, 0.12)),
598
- rgba(17, 17, 27, 0.60);
725
+ rgba(var(--ctp-crust-rgb), 0.60);
599
726
  box-shadow: 0 0 1rem rgba(148, 226, 213, 0.18), inset 0 1px 0 rgba(255,255,255,0.05);
600
727
  }
728
+ .terminal-tab-group.active {
729
+ background:
730
+ linear-gradient(120deg, rgba(148, 226, 213, 0.17), rgba(203, 166, 247, 0.12)),
731
+ var(--ctp-crust);
732
+ }
601
733
  .terminal-tab.stopped {
602
734
  opacity: 0.72;
603
735
  border-color: rgba(243, 139, 168, 0.28);
604
736
  }
737
+ .terminal-tab-group.stopped {
738
+ opacity: 1;
739
+ }
740
+ .terminal-tab.activity-working {
741
+ border-color: rgba(249, 226, 175, 0.56);
742
+ box-shadow: 0 0 1rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.045);
743
+ }
744
+ .terminal-tab.activity-blocked {
745
+ border-color: rgba(250, 179, 135, 0.62);
746
+ box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20), inset 0 1px 0 rgba(255,255,255,0.045);
747
+ }
748
+ .terminal-tab.activity-done {
749
+ border-color: rgba(166, 227, 161, 0.52);
750
+ box-shadow: 0 0 1rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.045);
751
+ }
605
752
  .terminal-tab-button,
606
753
  .terminal-tab-close,
607
754
  .terminal-new-tab-button {
@@ -620,6 +767,60 @@ body.side-panel-collapsed .terminal-tabs-shell {
620
767
  padding: 0.38rem 0.66rem;
621
768
  text-align: left;
622
769
  }
770
+ .terminal-tab-title-row {
771
+ display: flex;
772
+ align-items: center;
773
+ gap: 0.38rem;
774
+ min-width: 0;
775
+ }
776
+ .terminal-tab-activity-indicator {
777
+ flex: 0 0 0.58rem;
778
+ width: 0.58rem;
779
+ height: 0.58rem;
780
+ border-radius: 999px;
781
+ background: rgba(var(--ctp-subtext-rgb), 0.38);
782
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 0.45rem rgba(var(--ctp-subtext-rgb), 0.10);
783
+ }
784
+ .terminal-tab.activity-working .terminal-tab-activity-indicator {
785
+ background: var(--ctp-yellow);
786
+ box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
787
+ animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
788
+ }
789
+ .terminal-tab.activity-blocked .terminal-tab-activity-indicator {
790
+ background: var(--ctp-peach);
791
+ box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
792
+ animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
793
+ }
794
+ .terminal-tab.activity-done .terminal-tab-activity-indicator {
795
+ background: var(--ctp-green);
796
+ box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
797
+ }
798
+ .terminal-tab.stopped .terminal-tab-activity-indicator {
799
+ background: var(--ctp-red);
800
+ box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
801
+ }
802
+ .terminal-tab-group-item.activity-working .terminal-tab-activity-indicator {
803
+ background: var(--ctp-yellow);
804
+ box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
805
+ animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
806
+ }
807
+ .terminal-tab-group-item.activity-blocked .terminal-tab-activity-indicator {
808
+ background: var(--ctp-peach);
809
+ box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
810
+ animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
811
+ }
812
+ .terminal-tab-group-item.activity-done .terminal-tab-activity-indicator {
813
+ background: var(--ctp-green);
814
+ box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
815
+ }
816
+ .terminal-tab-group-item.stopped .terminal-tab-activity-indicator {
817
+ background: var(--ctp-red);
818
+ box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
819
+ }
820
+ @keyframes terminal-tab-working-pulse {
821
+ 0%, 100% { transform: scale(0.86); opacity: 0.68; }
822
+ 50% { transform: scale(1.08); opacity: 1; }
823
+ }
623
824
  .terminal-tab-button:hover,
624
825
  .terminal-tab-close:hover,
625
826
  .terminal-new-tab-button:hover {
@@ -633,23 +834,31 @@ body.side-panel-collapsed .terminal-tabs-shell {
633
834
  white-space: nowrap;
634
835
  }
635
836
  .terminal-tab-title {
837
+ flex: 1 1 auto;
636
838
  color: var(--ctp-text);
637
839
  font-size: 0.84rem;
638
840
  font-weight: 900;
639
841
  letter-spacing: 0.03em;
640
842
  }
641
843
  .terminal-tab-meta {
642
- color: rgba(186, 194, 222, 0.62);
844
+ color: rgba(var(--ctp-subtext-rgb), 0.62);
643
845
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
644
846
  font-size: 0.68rem;
645
847
  }
646
- .terminal-tab.active .terminal-tab-title {
848
+ .terminal-tab.active .terminal-tab-title,
849
+ .terminal-tab-group-item.active .terminal-tab-title {
647
850
  color: var(--ctp-teal);
648
851
  text-shadow: 0 0 0.8rem var(--glow-teal);
649
852
  }
853
+ .terminal-tab.activity-working .terminal-tab-meta,
854
+ .terminal-tab-group-item.activity-working .terminal-tab-meta { color: rgba(249, 226, 175, 0.82); }
855
+ .terminal-tab.activity-blocked .terminal-tab-meta,
856
+ .terminal-tab-group-item.activity-blocked .terminal-tab-meta { color: rgba(250, 179, 135, 0.88); }
857
+ .terminal-tab.activity-done .terminal-tab-meta,
858
+ .terminal-tab-group-item.activity-done .terminal-tab-meta { color: rgba(166, 227, 161, 0.82); }
650
859
  .terminal-tab-close {
651
860
  flex: 0 0 2.1rem;
652
- color: rgba(186, 194, 222, 0.72);
861
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
653
862
  border-left: 1px solid rgba(180, 190, 254, 0.10);
654
863
  font-size: 1.2rem;
655
864
  line-height: 1;
@@ -666,7 +875,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
666
875
  border-radius: 0.78rem;
667
876
  background:
668
877
  linear-gradient(120deg, rgba(245, 194, 231, 0.12), rgba(137, 180, 250, 0.08)),
669
- rgba(17, 17, 27, 0.58);
878
+ rgba(var(--ctp-crust-rgb), 0.58);
670
879
  }
671
880
  .terminal-new-tab-button:hover {
672
881
  color: #11111b;
@@ -678,7 +887,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
678
887
  flex: 0 0 auto;
679
888
  border-bottom: 1px solid rgba(180, 190, 254, 0.16);
680
889
  padding: 0.72rem 0.95rem;
681
- color: rgba(205, 214, 244, 0.78);
890
+ color: rgba(var(--ctp-text-rgb), 0.78);
682
891
  background: linear-gradient(90deg, rgba(203, 166, 247, 0.10), rgba(137, 180, 250, 0.05), rgba(148, 226, 213, 0.08));
683
892
  }
684
893
  .statusbar {
@@ -687,14 +896,14 @@ body.side-panel-collapsed .terminal-tabs-shell {
687
896
  display: grid;
688
897
  gap: 0.58rem;
689
898
  padding: 0.78rem 0.95rem 0.82rem;
690
- color: rgba(205, 214, 244, 0.84);
899
+ color: rgba(var(--ctp-text-rgb), 0.84);
691
900
  border-top: 1px solid rgba(245, 194, 231, 0.18);
692
901
  border-bottom: 1px solid rgba(148, 226, 213, 0.22);
693
902
  background:
694
903
  radial-gradient(circle at 6% 0%, rgba(245, 194, 231, 0.13), transparent 15rem),
695
904
  radial-gradient(circle at 82% 50%, rgba(148, 226, 213, 0.10), transparent 18rem),
696
- linear-gradient(135deg, rgba(17, 17, 27, 0.94), rgba(30, 30, 46, 0.80) 48%, rgba(24, 24, 37, 0.92));
697
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 -0.45rem 1.2rem rgba(17, 17, 27, 0.28);
905
+ linear-gradient(135deg, rgba(var(--ctp-crust-rgb), 0.94), rgba(var(--ctp-base-rgb), 0.80) 48%, rgba(var(--ctp-mantle-rgb), 0.92));
906
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 -0.45rem 1.2rem rgba(var(--ctp-crust-rgb), 0.28);
698
907
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
699
908
  font-size: 0.76rem;
700
909
  line-height: 1.35;
@@ -723,7 +932,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
723
932
  display: grid;
724
933
  grid-template-columns: minmax(10rem, 1.9fr) minmax(5rem, 0.55fr) minmax(6.5rem, 0.6fr) minmax(7rem, 0.65fr) minmax(12rem, 1.2fr);
725
934
  gap: 0.5rem;
726
- color: rgba(186, 194, 222, 0.76);
935
+ color: rgba(var(--ctp-subtext-rgb), 0.76);
727
936
  }
728
937
  .footer-details-toggle { display: none; }
729
938
  .footer-metric,
@@ -731,7 +940,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
731
940
  min-width: 0;
732
941
  border: 1px solid rgba(180, 190, 254, 0.16);
733
942
  background:
734
- linear-gradient(180deg, rgba(49, 50, 68, 0.46), rgba(17, 17, 27, 0.34)),
943
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.46), rgba(var(--ctp-crust-rgb), 0.34)),
735
944
  linear-gradient(90deg, rgba(203, 166, 247, 0.06), rgba(148, 226, 213, 0.03));
736
945
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(0, 0, 0, 0.10);
737
946
  }
@@ -759,7 +968,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
759
968
  }
760
969
  .footer-metric-label,
761
970
  .footer-meta-label {
762
- color: rgba(186, 194, 222, 0.62);
971
+ color: rgba(var(--ctp-subtext-rgb), 0.62);
763
972
  font-size: 0.64rem;
764
973
  font-weight: 950;
765
974
  letter-spacing: 0.12em;
@@ -769,7 +978,7 @@ body.side-panel-collapsed .terminal-tabs-shell {
769
978
  .footer-meta-value {
770
979
  min-width: 0;
771
980
  overflow: hidden;
772
- color: rgba(205, 214, 244, 0.94);
981
+ color: rgba(var(--ctp-text-rgb), 0.94);
773
982
  font-weight: 800;
774
983
  text-overflow: ellipsis;
775
984
  white-space: nowrap;
@@ -803,6 +1012,37 @@ button.footer-meta {
803
1012
  color: var(--ctp-green);
804
1013
  }
805
1014
  .footer-context { display: none; }
1015
+ .footer-context-card {
1016
+ --context-usage: 0%;
1017
+ --context-active-color: var(--ctp-green);
1018
+ --context-active-glow: rgba(166, 227, 161, 0.42);
1019
+ position: relative;
1020
+ isolation: isolate;
1021
+ overflow: hidden;
1022
+ }
1023
+ .footer-context-card.has-context-usage {
1024
+ border-color: rgba(148, 226, 213, 0.30);
1025
+ }
1026
+ .footer-context-card.has-context-usage::before {
1027
+ content: "";
1028
+ position: absolute;
1029
+ inset: 0;
1030
+ z-index: 0;
1031
+ pointer-events: none;
1032
+ background: var(--context-card-gradient);
1033
+ clip-path: inset(0 calc(100% - var(--context-usage)) 0 0);
1034
+ }
1035
+ .footer-context-card > * {
1036
+ position: relative;
1037
+ z-index: 1;
1038
+ }
1039
+ .footer-context-card.has-context-usage .footer-metric-label,
1040
+ .footer-context-card.has-context-usage .footer-metric-value,
1041
+ .footer-context-card.has-context-usage .footer-meta-label,
1042
+ .footer-context-card.has-context-usage .footer-meta-value {
1043
+ color: var(--context-active-color);
1044
+ text-shadow: 0 0 0.65rem var(--context-active-glow);
1045
+ }
806
1046
  .footer-context .footer-meta-value {
807
1047
  color: var(--ctp-teal);
808
1048
  text-shadow: 0 0 0.6rem rgba(148, 226, 213, 0.22);
@@ -829,8 +1069,8 @@ button.footer-meta {
829
1069
  border-radius: 0.95rem;
830
1070
  background:
831
1071
  radial-gradient(circle at 8% 0%, rgba(148, 226, 213, 0.13), transparent 12rem),
832
- linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
833
- box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
1072
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
1073
+ box-shadow: 0 1.2rem 2.8rem rgba(var(--ctp-crust-rgb), 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
834
1074
  }
835
1075
  .footer-model-picker-title {
836
1076
  color: var(--ctp-teal);
@@ -845,7 +1085,7 @@ button.footer-meta {
845
1085
  overflow-wrap: anywhere;
846
1086
  }
847
1087
  .footer-model-picker-source {
848
- color: rgba(186, 194, 222, 0.68);
1088
+ color: rgba(var(--ctp-subtext-rgb), 0.68);
849
1089
  font-size: 0.74rem;
850
1090
  }
851
1091
  .footer-model-picker-empty {
@@ -854,7 +1094,7 @@ button.footer-meta {
854
1094
  padding: 0.58rem 0.62rem;
855
1095
  border: 1px solid rgba(249, 226, 175, 0.18);
856
1096
  border-radius: 0.72rem;
857
- background: rgba(17, 17, 27, 0.48);
1097
+ background: rgba(var(--ctp-crust-rgb), 0.48);
858
1098
  }
859
1099
  .footer-model-picker-empty strong {
860
1100
  color: var(--ctp-yellow);
@@ -884,7 +1124,7 @@ button.footer-meta {
884
1124
  font-weight: 850;
885
1125
  }
886
1126
  .footer-model-option-name {
887
- color: rgba(186, 194, 222, 0.68);
1127
+ color: rgba(var(--ctp-subtext-rgb), 0.68);
888
1128
  font-size: 0.72rem;
889
1129
  }
890
1130
  .footer-branch .footer-meta-value {
@@ -914,8 +1154,8 @@ button.footer-meta {
914
1154
  background:
915
1155
  radial-gradient(circle at 10% 10%, rgba(166, 227, 161, 0.10), transparent 16rem),
916
1156
  radial-gradient(circle at 92% 0%, rgba(203, 166, 247, 0.14), transparent 18rem),
917
- linear-gradient(145deg, rgba(17, 17, 27, 0.94), rgba(30, 30, 46, 0.82));
918
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 -0.5rem 1.4rem rgba(17, 17, 27, 0.22);
1157
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.94), rgba(var(--ctp-base-rgb), 0.82));
1158
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 -0.5rem 1.4rem rgba(var(--ctp-crust-rgb), 0.22);
919
1159
  }
920
1160
  .git-workflow-header {
921
1161
  display: flex;
@@ -953,8 +1193,8 @@ button.footer-meta {
953
1193
  padding: 0.38rem 0.72rem 0.38rem 1.62rem;
954
1194
  border: 1px solid rgba(180, 190, 254, 0.16);
955
1195
  border-radius: 999px;
956
- color: rgba(186, 194, 222, 0.76);
957
- background: rgba(17, 17, 27, 0.42);
1196
+ color: rgba(var(--ctp-subtext-rgb), 0.76);
1197
+ background: rgba(var(--ctp-crust-rgb), 0.42);
958
1198
  font-size: 0.76rem;
959
1199
  font-weight: 900;
960
1200
  letter-spacing: 0.08em;
@@ -968,7 +1208,7 @@ button.footer-meta {
968
1208
  width: 0.52rem;
969
1209
  height: 0.52rem;
970
1210
  border-radius: 999px;
971
- background: rgba(108, 112, 134, 0.72);
1211
+ background: rgba(var(--ctp-overlay-rgb), 0.72);
972
1212
  transform: translateY(-50%);
973
1213
  }
974
1214
  .git-workflow-step.active {
@@ -997,9 +1237,9 @@ button.footer-meta {
997
1237
  padding: 0.78rem;
998
1238
  border: 1px solid rgba(180, 190, 254, 0.16);
999
1239
  border-radius: 0.82rem;
1000
- color: rgba(205, 214, 244, 0.88);
1240
+ color: rgba(var(--ctp-text-rgb), 0.88);
1001
1241
  background:
1002
- linear-gradient(180deg, rgba(17, 17, 27, 0.76), rgba(17, 17, 27, 0.58)),
1242
+ linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.76), rgba(var(--ctp-crust-rgb), 0.58)),
1003
1243
  radial-gradient(circle at 0 0, rgba(148, 226, 213, 0.08), transparent 14rem);
1004
1244
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1005
1245
  font-size: 0.82rem;
@@ -1012,7 +1252,7 @@ button.footer-meta {
1012
1252
  }
1013
1253
  .widget-area:empty { display: none; }
1014
1254
  .widget {
1015
- background: rgba(17, 17, 27, 0.72);
1255
+ background: rgba(var(--ctp-crust-rgb), 0.72);
1016
1256
  border: 1px solid rgba(148, 226, 213, 0.24);
1017
1257
  border-radius: 0.8rem;
1018
1258
  padding: 0.7rem;
@@ -1028,7 +1268,7 @@ button.footer-meta {
1028
1268
  border-color: rgba(137, 180, 250, 0.32);
1029
1269
  background:
1030
1270
  radial-gradient(circle at 4% 0%, rgba(137, 180, 250, 0.18), transparent 12rem),
1031
- linear-gradient(145deg, rgba(17, 17, 27, 0.88), rgba(30, 30, 46, 0.74));
1271
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.88), rgba(var(--ctp-base-rgb), 0.74));
1032
1272
  }
1033
1273
  .todo-widget-header {
1034
1274
  display: flex;
@@ -1050,7 +1290,7 @@ button.footer-meta {
1050
1290
  padding: 0.12rem 0.42rem;
1051
1291
  border: 1px solid rgba(137, 180, 250, 0.24);
1052
1292
  border-radius: 999px;
1053
- background: rgba(17, 17, 27, 0.48);
1293
+ background: rgba(var(--ctp-crust-rgb), 0.48);
1054
1294
  font-size: 0.72rem;
1055
1295
  font-weight: 850;
1056
1296
  }
@@ -1060,7 +1300,7 @@ button.footer-meta {
1060
1300
  height: 0.38rem;
1061
1301
  overflow: hidden;
1062
1302
  border-radius: 999px;
1063
- background: rgba(49, 50, 68, 0.78);
1303
+ background: rgba(var(--ctp-surface-rgb), 0.78);
1064
1304
  box-shadow: inset 0 0 0 1px rgba(180, 190, 254, 0.10);
1065
1305
  }
1066
1306
  .todo-widget-progress-fill {
@@ -1083,7 +1323,7 @@ button.footer-meta {
1083
1323
  align-items: start;
1084
1324
  gap: 0.48rem;
1085
1325
  min-width: 0;
1086
- color: rgba(205, 214, 244, 0.92);
1326
+ color: rgba(var(--ctp-text-rgb), 0.92);
1087
1327
  }
1088
1328
  .todo-widget-marker {
1089
1329
  display: inline-grid;
@@ -1097,7 +1337,7 @@ button.footer-meta {
1097
1337
  font-size: 0.74rem;
1098
1338
  font-weight: 950;
1099
1339
  line-height: 1;
1100
- background: rgba(49, 50, 68, 0.88);
1340
+ background: rgba(var(--ctp-surface-rgb), 0.88);
1101
1341
  }
1102
1342
  .todo-widget-item.done .todo-widget-marker {
1103
1343
  border-color: transparent;
@@ -1118,16 +1358,67 @@ button.footer-meta {
1118
1358
  line-height: 1.35;
1119
1359
  }
1120
1360
  .todo-widget-footer {
1121
- color: rgba(186, 194, 222, 0.64);
1361
+ color: rgba(var(--ctp-subtext-rgb), 0.64);
1122
1362
  font-size: 0.72rem;
1123
1363
  }
1124
1364
  .chat {
1365
+ position: relative;
1125
1366
  flex: 1 1 auto;
1126
1367
  min-height: 0;
1127
1368
  overflow: auto;
1128
1369
  padding: 1rem;
1129
1370
  scroll-behavior: smooth;
1130
1371
  }
1372
+ .sticky-user-prompt-button[hidden] { display: none; }
1373
+ .sticky-user-prompt-button {
1374
+ position: sticky;
1375
+ top: 0;
1376
+ z-index: 12;
1377
+ display: grid;
1378
+ grid-template-columns: auto minmax(0, 1fr) auto;
1379
+ align-items: center;
1380
+ gap: 0.62rem;
1381
+ width: 100%;
1382
+ min-height: 44px;
1383
+ margin: 0 0 0.75rem;
1384
+ padding: 0.52rem 0.72rem;
1385
+ overflow: hidden;
1386
+ text-align: left;
1387
+ border-color: rgba(137, 180, 250, 0.42);
1388
+ border-radius: 0.88rem;
1389
+ backdrop-filter: blur(14px) saturate(145%);
1390
+ background:
1391
+ linear-gradient(120deg, rgba(137, 180, 250, 0.18), rgba(203, 166, 247, 0.16), rgba(148, 226, 213, 0.14)),
1392
+ linear-gradient(180deg, rgba(var(--ctp-mantle-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.94));
1393
+ box-shadow: 0 0.75rem 1.65rem rgba(var(--ctp-crust-rgb), 0.36), 0 0 1rem rgba(137, 180, 250, 0.16);
1394
+ }
1395
+ .sticky-user-prompt-button:hover {
1396
+ border-color: rgba(148, 226, 213, 0.62);
1397
+ box-shadow: 0 0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.4), 0 0 1.2rem rgba(148, 226, 213, 0.24);
1398
+ }
1399
+ .sticky-user-prompt-label {
1400
+ color: var(--ctp-blue);
1401
+ font-size: 0.7rem;
1402
+ font-weight: 900;
1403
+ letter-spacing: 0.1em;
1404
+ text-transform: uppercase;
1405
+ white-space: nowrap;
1406
+ }
1407
+ .sticky-user-prompt-text {
1408
+ min-width: 0;
1409
+ overflow: hidden;
1410
+ color: rgba(var(--ctp-text-rgb), 0.94);
1411
+ font-size: 0.82rem;
1412
+ font-weight: 700;
1413
+ text-overflow: ellipsis;
1414
+ white-space: nowrap;
1415
+ }
1416
+ .sticky-user-prompt-meta {
1417
+ color: var(--ctp-teal);
1418
+ font-size: 0.72rem;
1419
+ font-weight: 900;
1420
+ white-space: nowrap;
1421
+ }
1131
1422
  .jump-to-latest-button[hidden] { display: none; }
1132
1423
  .jump-to-latest-button {
1133
1424
  align-self: center;
@@ -1139,14 +1430,39 @@ button.footer-meta {
1139
1430
  border-color: transparent;
1140
1431
  box-shadow: 0 0 1.2rem var(--glow-teal), 0 0.7rem 1.6rem rgba(0, 0, 0, 0.28);
1141
1432
  }
1433
+ .feedback-tray[hidden] { display: none; }
1434
+ .feedback-tray {
1435
+ display: flex;
1436
+ align-items: center;
1437
+ justify-content: space-between;
1438
+ gap: 0.75rem;
1439
+ margin: 0 1rem 0.65rem;
1440
+ padding: 0.55rem 0.7rem;
1441
+ border: 1px solid rgba(203, 166, 247, 0.30);
1442
+ border-radius: 0.85rem;
1443
+ color: rgba(var(--ctp-text-rgb), 0.88);
1444
+ background: linear-gradient(145deg, rgba(203, 166, 247, 0.14), rgba(var(--ctp-mantle-rgb), 0.9));
1445
+ box-shadow: 0 0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.32), 0 0 1rem rgba(203, 166, 247, 0.16);
1446
+ }
1447
+ .feedback-tray span {
1448
+ font-size: 0.78rem;
1449
+ font-weight: 800;
1450
+ letter-spacing: 0.03em;
1451
+ }
1452
+ .feedback-tray button {
1453
+ min-height: 44px;
1454
+ padding: 0.42rem 0.72rem;
1455
+ font-size: 0.78rem;
1456
+ font-weight: 900;
1457
+ }
1142
1458
  .message {
1143
1459
  position: relative;
1144
1460
  margin: 0 0 0.9rem;
1145
1461
  padding: 0.86rem;
1146
1462
  border: 1px solid rgba(180, 190, 254, 0.18);
1147
1463
  border-radius: 0.95rem;
1148
- background: linear-gradient(145deg, rgba(49, 50, 68, 0.66), rgba(24, 24, 37, 0.7));
1149
- box-shadow: 0 0.8rem 1.8rem rgba(17, 17, 27, 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
1464
+ background: linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.66), rgba(var(--ctp-mantle-rgb), 0.7));
1465
+ box-shadow: 0 0.8rem 1.8rem rgba(var(--ctp-crust-rgb), 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
1150
1466
  }
1151
1467
  .message::before {
1152
1468
  content: "";
@@ -1160,17 +1476,34 @@ button.footer-meta {
1160
1476
  }
1161
1477
  .message.user {
1162
1478
  border-color: rgba(137, 180, 250, 0.34);
1163
- background: linear-gradient(145deg, rgba(137, 180, 250, 0.16), rgba(49, 50, 68, 0.58));
1479
+ background: linear-gradient(145deg, rgba(137, 180, 250, 0.16), rgba(var(--ctp-surface-rgb), 0.58));
1164
1480
  }
1165
1481
  .message.assistant {
1166
1482
  border-color: rgba(148, 226, 213, 0.30);
1167
- background: linear-gradient(145deg, rgba(148, 226, 213, 0.12), rgba(49, 50, 68, 0.58));
1483
+ background: linear-gradient(145deg, rgba(148, 226, 213, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
1484
+ }
1485
+ .message.thinking,
1486
+ .message.toolCall,
1487
+ .message.assistantEvent {
1488
+ border-color: rgba(203, 166, 247, 0.26);
1489
+ background: linear-gradient(145deg, rgba(203, 166, 247, 0.10), rgba(var(--ctp-surface-rgb), 0.54));
1490
+ }
1491
+ .message.thinking .message-role,
1492
+ .message.toolCall .message-role,
1493
+ .message.assistantEvent .message-role {
1494
+ color: var(--ctp-mauve);
1495
+ text-shadow: 0 0 0.8rem rgba(203, 166, 247, 0.22);
1496
+ }
1497
+ .message.thinking.streaming.complete .message-role::after {
1498
+ content: " done";
1499
+ color: var(--ctp-green);
1500
+ text-shadow: 0 0 0.7rem var(--glow-teal);
1168
1501
  }
1169
1502
  .message.extension,
1170
1503
  .message.native,
1171
1504
  .message.notice {
1172
1505
  border-color: rgba(203, 166, 247, 0.30);
1173
- background: linear-gradient(145deg, rgba(203, 166, 247, 0.12), rgba(49, 50, 68, 0.58));
1506
+ background: linear-gradient(145deg, rgba(203, 166, 247, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
1174
1507
  }
1175
1508
  .message.extension .message-role,
1176
1509
  .message.native .message-role,
@@ -1182,14 +1515,66 @@ button.footer-meta {
1182
1515
  border-color: rgba(249, 226, 175, 0.46);
1183
1516
  }
1184
1517
  .message.warn .message-role { color: var(--ctp-yellow); }
1185
- .message.toolResult, .message.bashExecution {
1518
+ .message.toolResult, .message.bashExecution, .message.compactionSummary {
1186
1519
  border-color: rgba(249, 226, 175, 0.30);
1187
- background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(49, 50, 68, 0.58));
1520
+ background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(var(--ctp-surface-rgb), 0.58));
1188
1521
  padding: 0;
1189
1522
  }
1190
1523
  .message.streaming {
1191
1524
  outline: 1px solid rgba(148, 226, 213, 0.72);
1192
- box-shadow: 0 0 1.7rem var(--glow-teal), 0 0.8rem 2rem rgba(17, 17, 27, 0.4);
1525
+ box-shadow: 0 0 1.7rem var(--glow-teal), 0 0.8rem 2rem rgba(var(--ctp-crust-rgb), 0.4);
1526
+ }
1527
+ .message.run-indicator-message {
1528
+ margin-bottom: 0.5rem;
1529
+ padding: 0.52rem 0.64rem;
1530
+ border-color: rgba(148, 226, 213, 0.46);
1531
+ border-radius: 0.72rem;
1532
+ background:
1533
+ linear-gradient(120deg, rgba(148, 226, 213, 0.13), rgba(137, 180, 250, 0.08), rgba(203, 166, 247, 0.08)),
1534
+ rgba(var(--ctp-mantle-rgb), 0.82);
1535
+ }
1536
+ .message.run-indicator-message.streaming {
1537
+ outline-color: rgba(148, 226, 213, 0.42);
1538
+ box-shadow: 0 0 0.85rem rgba(148, 226, 213, 0.20), 0 0.45rem 1.1rem rgba(var(--ctp-crust-rgb), 0.32);
1539
+ }
1540
+ .message.run-indicator-message::before {
1541
+ width: 2px;
1542
+ background: linear-gradient(180deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
1543
+ animation: run-indicator-bar-pulse 1.35s ease-in-out infinite;
1544
+ }
1545
+ .run-indicator-row {
1546
+ display: flex;
1547
+ align-items: center;
1548
+ gap: 0.42rem;
1549
+ flex-wrap: wrap;
1550
+ font-size: 0.82rem;
1551
+ }
1552
+ .run-indicator-pulse {
1553
+ flex: 0 0 auto;
1554
+ width: 0.5rem;
1555
+ height: 0.5rem;
1556
+ border-radius: 999px;
1557
+ background: var(--ctp-green);
1558
+ box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.30), 0 0 0.55rem rgba(166, 227, 161, 0.45);
1559
+ animation: run-indicator-pulse 1.1s ease-in-out infinite;
1560
+ }
1561
+ .run-indicator-text {
1562
+ color: var(--ctp-teal);
1563
+ font-size: 0.8rem;
1564
+ font-weight: 900;
1565
+ letter-spacing: 0.025em;
1566
+ }
1567
+ .run-indicator-meta {
1568
+ color: rgba(var(--ctp-text-rgb), 0.72);
1569
+ font-size: 0.72rem;
1570
+ }
1571
+ @keyframes run-indicator-pulse {
1572
+ 0%, 100% { transform: scale(0.78); opacity: 0.62; }
1573
+ 50% { transform: scale(1.16); opacity: 1; }
1574
+ }
1575
+ @keyframes run-indicator-bar-pulse {
1576
+ 0%, 100% { opacity: 0.55; box-shadow: 0 0 0.75rem rgba(148, 226, 213, 0.35); }
1577
+ 50% { opacity: 1; box-shadow: 0 0 1.25rem rgba(166, 227, 161, 0.52); }
1193
1578
  }
1194
1579
  .message.error {
1195
1580
  border-color: rgba(243, 139, 168, 0.72);
@@ -1201,7 +1586,7 @@ button.footer-meta {
1201
1586
  justify-content: space-between;
1202
1587
  gap: 1rem;
1203
1588
  margin-bottom: 0.48rem;
1204
- color: rgba(186, 194, 222, 0.78);
1589
+ color: rgba(var(--ctp-subtext-rgb), 0.78);
1205
1590
  font-size: 0.78rem;
1206
1591
  }
1207
1592
  .message-collapse {
@@ -1230,11 +1615,13 @@ button.footer-meta {
1230
1615
  border-top: 1px solid rgba(249, 226, 175, 0.12);
1231
1616
  }
1232
1617
  .message.toolResult:not(.error) .message-collapse:not([open]) > summary.message-header,
1233
- .message.bashExecution .message-collapse:not([open]) > summary.message-header {
1234
- color: rgba(186, 194, 222, 0.72);
1618
+ .message.bashExecution .message-collapse:not([open]) > summary.message-header,
1619
+ .message.compactionSummary .message-collapse:not([open]) > summary.message-header {
1620
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
1235
1621
  }
1236
1622
  .message.toolResult:not(.error) .message-collapse:not([open]) .message-role,
1237
- .message.bashExecution .message-collapse:not([open]) .message-role {
1623
+ .message.bashExecution .message-collapse:not([open]) .message-role,
1624
+ .message.compactionSummary .message-collapse:not([open]) .message-role {
1238
1625
  color: var(--ctp-yellow);
1239
1626
  text-shadow: 0 0 0.8rem rgba(249, 226, 175, 0.28);
1240
1627
  }
@@ -1245,6 +1632,52 @@ button.footer-meta {
1245
1632
  letter-spacing: 0.12em;
1246
1633
  text-shadow: 0 0 1rem var(--glow-teal);
1247
1634
  }
1635
+ .action-feedback-controls {
1636
+ position: absolute;
1637
+ top: calc(100% - 0.18rem);
1638
+ right: 0.55rem;
1639
+ z-index: 8;
1640
+ display: flex;
1641
+ justify-content: flex-end;
1642
+ gap: 0.35rem;
1643
+ opacity: 0;
1644
+ pointer-events: auto;
1645
+ transform: translateY(-0.12rem) scale(0.98);
1646
+ transition: opacity 140ms ease, transform 140ms ease;
1647
+ }
1648
+ .action-feedback-controls:hover,
1649
+ .action-feedback-controls:focus-within {
1650
+ opacity: 1;
1651
+ transform: translateY(0) scale(1);
1652
+ }
1653
+ .action-feedback-controls:not(:hover):not(:focus-within) .action-feedback-button {
1654
+ pointer-events: none;
1655
+ }
1656
+ .action-feedback-button {
1657
+ min-width: 44px;
1658
+ padding: 0.24rem 0.5rem;
1659
+ border-radius: 0.72rem;
1660
+ color: rgba(var(--ctp-text-rgb), 0.86);
1661
+ background: linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.86), rgba(var(--ctp-crust-rgb), 0.92));
1662
+ box-shadow: 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.34);
1663
+ }
1664
+ .action-feedback-button:hover,
1665
+ .action-feedback-button.active {
1666
+ border-color: rgba(148, 226, 213, 0.72);
1667
+ box-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.20), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.34);
1668
+ }
1669
+ .action-feedback-button.feedback-up.active {
1670
+ color: #11111b;
1671
+ background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal));
1672
+ }
1673
+ .action-feedback-button.feedback-down.active {
1674
+ color: #11111b;
1675
+ background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
1676
+ }
1677
+ .action-feedback-button.feedback-question.active {
1678
+ color: #11111b;
1679
+ background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-mauve));
1680
+ }
1248
1681
  .text-block, .code-block {
1249
1682
  margin: 0.35rem 0;
1250
1683
  white-space: pre-wrap;
@@ -1252,7 +1685,7 @@ button.footer-meta {
1252
1685
  }
1253
1686
  .code-block {
1254
1687
  overflow: auto;
1255
- background: rgba(17, 17, 27, 0.82);
1688
+ background: rgba(var(--ctp-crust-rgb), 0.82);
1256
1689
  border: 1px solid rgba(203, 166, 247, 0.20);
1257
1690
  border-radius: 0.75rem;
1258
1691
  padding: 0.72rem;
@@ -1263,7 +1696,7 @@ button.footer-meta {
1263
1696
  details {
1264
1697
  margin: 0.5rem 0;
1265
1698
  padding: 0.6rem;
1266
- background: rgba(17, 17, 27, 0.46);
1699
+ background: rgba(var(--ctp-crust-rgb), 0.46);
1267
1700
  border: 1px solid rgba(249, 226, 175, 0.15);
1268
1701
  border-radius: 0.72rem;
1269
1702
  }
@@ -1272,7 +1705,7 @@ summary { cursor: pointer; color: var(--warning); }
1272
1705
  border-color: rgba(203, 166, 247, 0.30);
1273
1706
  background:
1274
1707
  linear-gradient(120deg, rgba(203, 166, 247, 0.12), rgba(137, 180, 250, 0.08), rgba(148, 226, 213, 0.06)),
1275
- rgba(17, 17, 27, 0.55);
1708
+ rgba(var(--ctp-crust-rgb), 0.55);
1276
1709
  box-shadow: inset 0 0 1.1rem rgba(203, 166, 247, 0.06), 0 0 1rem rgba(203, 166, 247, 0.08);
1277
1710
  }
1278
1711
  .thinking-block > summary {
@@ -1295,7 +1728,7 @@ summary { cursor: pointer; color: var(--warning); }
1295
1728
  color: var(--ctp-green);
1296
1729
  }
1297
1730
  .thinking-text {
1298
- color: rgba(205, 214, 244, 0.82);
1731
+ color: rgba(var(--ctp-text-rgb), 0.82);
1299
1732
  margin-top: 0.55rem;
1300
1733
  font-style: italic;
1301
1734
  white-space: pre-wrap;
@@ -1308,7 +1741,7 @@ summary { cursor: pointer; color: var(--warning); }
1308
1741
  min-height: 0;
1309
1742
  border-top: 1px solid rgba(180, 190, 254, 0.18);
1310
1743
  padding: 0.9rem;
1311
- background: linear-gradient(180deg, rgba(17, 17, 27, 0.48), rgba(17, 17, 27, 0.82));
1744
+ background: linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.48), rgba(var(--ctp-crust-rgb), 0.82));
1312
1745
  }
1313
1746
  .composer::before {
1314
1747
  content: "";
@@ -1325,7 +1758,7 @@ summary { cursor: pointer; color: var(--warning); }
1325
1758
  margin-top: 0.5rem;
1326
1759
  max-height: 15rem;
1327
1760
  overflow: auto;
1328
- background: rgba(17, 17, 27, 0.94);
1761
+ background: rgba(var(--ctp-crust-rgb), 0.94);
1329
1762
  border: 1px solid rgba(203, 166, 247, 0.34);
1330
1763
  border-radius: 0.85rem;
1331
1764
  box-shadow: 0 0.75rem 2rem var(--shadow), 0 0 1.4rem rgba(203, 166, 247, 0.18);
@@ -1356,6 +1789,18 @@ summary { cursor: pointer; color: var(--warning); }
1356
1789
  font-weight: 900;
1357
1790
  text-shadow: 0 0 0.8rem rgba(166, 227, 161, 0.34);
1358
1791
  }
1792
+ .path-suggest-name {
1793
+ color: var(--ctp-teal);
1794
+ min-width: 0;
1795
+ overflow: hidden;
1796
+ text-overflow: ellipsis;
1797
+ white-space: nowrap;
1798
+ text-shadow: 0 0 0.8rem rgba(148, 226, 213, 0.28);
1799
+ }
1800
+ .path-suggest-item.directory .path-suggest-name {
1801
+ color: var(--ctp-yellow);
1802
+ text-shadow: 0 0 0.8rem rgba(249, 226, 175, 0.26);
1803
+ }
1359
1804
  .command-suggest-desc {
1360
1805
  color: var(--text);
1361
1806
  overflow: hidden;
@@ -1363,7 +1808,7 @@ summary { cursor: pointer; color: var(--warning); }
1363
1808
  white-space: nowrap;
1364
1809
  }
1365
1810
  .command-suggest-source {
1366
- color: rgba(186, 194, 222, 0.68);
1811
+ color: rgba(var(--ctp-subtext-rgb), 0.68);
1367
1812
  font-size: 0.72rem;
1368
1813
  text-transform: uppercase;
1369
1814
  letter-spacing: 0.08em;
@@ -1385,7 +1830,7 @@ summary { cursor: pointer; color: var(--warning); }
1385
1830
  display: flex;
1386
1831
  align-items: center;
1387
1832
  gap: 0.45rem;
1388
- color: rgba(205, 214, 244, 0.74);
1833
+ color: rgba(var(--ctp-text-rgb), 0.74);
1389
1834
  font-size: 0.88rem;
1390
1835
  text-transform: uppercase;
1391
1836
  letter-spacing: 0.06em;
@@ -1402,7 +1847,7 @@ summary { cursor: pointer; color: var(--warning); }
1402
1847
  border-color: rgba(148, 226, 213, 0.36);
1403
1848
  background:
1404
1849
  linear-gradient(120deg, rgba(148, 226, 213, 0.13), rgba(203, 166, 247, 0.10)),
1405
- linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
1850
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
1406
1851
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0.85rem rgba(148, 226, 213, 0.08);
1407
1852
  }
1408
1853
  .composer-git-button {
@@ -1410,7 +1855,7 @@ summary { cursor: pointer; color: var(--warning); }
1410
1855
  border-color: rgba(166, 227, 161, 0.38);
1411
1856
  background:
1412
1857
  linear-gradient(120deg, rgba(166, 227, 161, 0.13), rgba(148, 226, 213, 0.10)),
1413
- linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
1858
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
1414
1859
  }
1415
1860
  .composer-compact-button:hover,
1416
1861
  .composer-git-button:hover {
@@ -1434,7 +1879,7 @@ summary { cursor: pointer; color: var(--warning); }
1434
1879
  bottom: calc(100% + 0.42rem);
1435
1880
  width: 0.72rem;
1436
1881
  height: 0.72rem;
1437
- background: rgba(17, 17, 27, 0.96);
1882
+ background: rgba(var(--ctp-crust-rgb), 0.96);
1438
1883
  border-right: 1px solid rgba(166, 227, 161, 0.28);
1439
1884
  border-bottom: 1px solid rgba(166, 227, 161, 0.28);
1440
1885
  transform: translate(-1.2rem, 0.24rem) rotate(45deg);
@@ -1455,8 +1900,8 @@ summary { cursor: pointer; color: var(--warning); }
1455
1900
  border-radius: 0.86rem;
1456
1901
  background:
1457
1902
  radial-gradient(circle at 8% 0%, rgba(166, 227, 161, 0.13), transparent 12rem),
1458
- linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.94));
1459
- box-shadow: 0 1rem 2.4rem rgba(17, 17, 27, 0.58), 0 0 1.2rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.055);
1903
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.94));
1904
+ box-shadow: 0 1rem 2.4rem rgba(var(--ctp-crust-rgb), 0.58), 0 0 1.2rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.055);
1460
1905
  font-size: 0.82rem;
1461
1906
  font-weight: 650;
1462
1907
  text-transform: none;
@@ -1485,21 +1930,38 @@ summary { cursor: pointer; color: var(--warning); }
1485
1930
  margin: 0;
1486
1931
  font-size: 0.9rem;
1487
1932
  }
1488
- .details dt { color: rgba(186, 194, 222, 0.66); }
1933
+ .details dt { color: rgba(var(--ctp-subtext-rgb), 0.66); }
1489
1934
  .details dd { margin: 0; overflow-wrap: anywhere; }
1490
1935
  .queue-box, .commands-box, .event-log {
1491
- background: rgba(17, 17, 27, 0.72);
1936
+ background: rgba(var(--ctp-crust-rgb), 0.72);
1492
1937
  border: 1px solid rgba(180, 190, 254, 0.18);
1493
1938
  border-radius: 0.82rem;
1494
1939
  padding: 0.72rem;
1495
1940
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
1496
1941
  }
1497
1942
  .commands-box {
1498
- max-height: 13rem;
1943
+ max-height: min(32rem, 52vh);
1499
1944
  overflow: auto;
1500
1945
  font-size: 0.86rem;
1501
1946
  }
1502
- .command-item { margin-bottom: 0.5rem; }
1947
+ .command-item {
1948
+ display: block;
1949
+ width: 100%;
1950
+ min-height: auto;
1951
+ margin: 0 0 0.5rem;
1952
+ padding: 0.48rem 0.56rem;
1953
+ text-align: left;
1954
+ background: rgba(var(--ctp-surface-rgb), 0.18);
1955
+ border-color: rgba(180, 190, 254, 0.12);
1956
+ box-shadow: none;
1957
+ }
1958
+ .command-item:last-child { margin-bottom: 0; }
1959
+ .command-item:hover,
1960
+ .command-item:focus-visible {
1961
+ transform: none;
1962
+ background: linear-gradient(90deg, rgba(203, 166, 247, 0.16), rgba(137, 180, 250, 0.08));
1963
+ border-color: rgba(148, 226, 213, 0.45);
1964
+ }
1503
1965
  .command-item code {
1504
1966
  color: var(--ctp-green);
1505
1967
  text-shadow: 0 0 0.7rem rgba(166, 227, 161, 0.25);
@@ -1513,18 +1975,49 @@ summary { cursor: pointer; color: var(--warning); }
1513
1975
  .event { padding: 0.3rem 0; border-bottom: 1px solid rgba(180, 190, 254, 0.06); }
1514
1976
  .event.warn { color: var(--warning); }
1515
1977
  .event.error { color: var(--danger); }
1516
- .muted { color: rgba(186, 194, 222, 0.68); }
1978
+ .muted { color: rgba(var(--ctp-subtext-rgb), 0.68); }
1517
1979
 
1518
1980
  .extension-dialog {
1519
1981
  position: relative;
1520
1982
  width: min(42rem, calc(100vw - 2rem));
1521
1983
  border: 1px solid rgba(203, 166, 247, 0.35);
1522
1984
  border-radius: 1rem;
1523
- background: linear-gradient(145deg, rgba(30, 30, 46, 0.98), rgba(17, 17, 27, 0.98));
1985
+ background: linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.98), rgba(var(--ctp-crust-rgb), 0.98));
1524
1986
  color: var(--text);
1525
1987
  box-shadow: 0 2rem 5rem var(--shadow), 0 0 2rem var(--glow-mauve);
1526
1988
  }
1527
- .extension-dialog::backdrop { background: rgba(17, 17, 27, 0.78); backdrop-filter: blur(4px); }
1989
+ .extension-dialog::backdrop { background: rgba(var(--ctp-crust-rgb), 0.78); backdrop-filter: blur(4px); }
1990
+ #dialogMessage {
1991
+ white-space: pre-wrap;
1992
+ overflow-wrap: anywhere;
1993
+ line-height: 1.45;
1994
+ }
1995
+ .extension-dialog.guardrail-dialog {
1996
+ border-color: rgba(249, 226, 175, 0.62);
1997
+ box-shadow: 0 2rem 5rem var(--shadow), 0 0 2rem rgba(249, 226, 175, 0.24);
1998
+ }
1999
+ .extension-dialog.guardrail-dialog #dialogTitle {
2000
+ color: var(--ctp-yellow);
2001
+ text-shadow: 0 0 1rem rgba(249, 226, 175, 0.22);
2002
+ }
2003
+ .extension-dialog.guardrail-dialog #dialogMessage {
2004
+ margin: 0.6rem 0 0;
2005
+ padding: 0.78rem 0.85rem;
2006
+ border: 1px solid rgba(249, 226, 175, 0.24);
2007
+ border-radius: 0.78rem;
2008
+ background: rgba(var(--ctp-crust-rgb), 0.62);
2009
+ color: var(--ctp-text);
2010
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2011
+ font-size: 0.88rem;
2012
+ }
2013
+ .extension-dialog.guardrail-dialog .dialog-options button.guardrail-safe-action {
2014
+ border-color: rgba(166, 227, 161, 0.58);
2015
+ box-shadow: 0 0 1rem rgba(166, 227, 161, 0.18);
2016
+ }
2017
+ .extension-dialog.guardrail-dialog .dialog-options button.guardrail-allow-action {
2018
+ border-color: rgba(249, 226, 175, 0.46);
2019
+ color: var(--ctp-yellow);
2020
+ }
1528
2021
  .extension-dialog menu {
1529
2022
  display: flex;
1530
2023
  justify-content: flex-end;
@@ -1556,7 +2049,7 @@ summary { cursor: pointer; color: var(--warning); }
1556
2049
  overflow-wrap: anywhere;
1557
2050
  border: 1px solid rgba(166, 227, 161, 0.24);
1558
2051
  border-radius: 0.82rem;
1559
- background: rgba(17, 17, 27, 0.64);
2052
+ background: rgba(var(--ctp-crust-rgb), 0.64);
1560
2053
  color: var(--ctp-green);
1561
2054
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
1562
2055
  font-weight: 850;
@@ -1579,7 +2072,7 @@ summary { cursor: pointer; color: var(--warning); }
1579
2072
  padding: 0.5rem;
1580
2073
  border: 1px solid rgba(249, 226, 175, 0.14);
1581
2074
  border-radius: 0.82rem;
1582
- background: rgba(17, 17, 27, 0.34);
2075
+ background: rgba(var(--ctp-crust-rgb), 0.34);
1583
2076
  }
1584
2077
  .path-picker-fast-pick {
1585
2078
  display: grid;
@@ -1589,7 +2082,7 @@ summary { cursor: pointer; color: var(--warning); }
1589
2082
  width: 100%;
1590
2083
  border: 1px solid rgba(249, 226, 175, 0.22);
1591
2084
  border-radius: 0.72rem;
1592
- background: rgba(49, 50, 68, 0.36);
2085
+ background: rgba(var(--ctp-surface-rgb), 0.36);
1593
2086
  }
1594
2087
  .path-picker-fast-pick-button,
1595
2088
  .path-picker-fast-pick-remove {
@@ -1612,7 +2105,7 @@ summary { cursor: pointer; color: var(--warning); }
1612
2105
  min-width: 1.45rem;
1613
2106
  width: 1.45rem;
1614
2107
  padding: 0;
1615
- color: rgba(186, 194, 222, 0.72);
2108
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
1616
2109
  border-left: 1px solid rgba(249, 226, 175, 0.14);
1617
2110
  font-size: 0.78rem;
1618
2111
  }
@@ -1649,16 +2142,16 @@ summary { cursor: pointer; color: var(--warning); }
1649
2142
  padding: 0.4rem;
1650
2143
  border: 1px solid rgba(180, 190, 254, 0.16);
1651
2144
  border-radius: 0.82rem;
1652
- background: rgba(17, 17, 27, 0.48);
2145
+ background: rgba(var(--ctp-crust-rgb), 0.48);
1653
2146
  }
1654
2147
  .path-picker-directory {
1655
2148
  justify-content: flex-start;
1656
2149
  width: 100%;
1657
2150
  padding: 0.58rem 0.72rem;
1658
- color: rgba(205, 214, 244, 0.94);
2151
+ color: rgba(var(--ctp-text-rgb), 0.94);
1659
2152
  text-align: left;
1660
2153
  border-color: rgba(180, 190, 254, 0.14);
1661
- background: rgba(49, 50, 68, 0.36);
2154
+ background: rgba(var(--ctp-surface-rgb), 0.36);
1662
2155
  }
1663
2156
  .path-picker-directory:hover,
1664
2157
  .path-picker-directory:focus-visible,
@@ -1669,7 +2162,7 @@ summary { cursor: pointer; color: var(--warning); }
1669
2162
  background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
1670
2163
  }
1671
2164
  .path-picker-directory.hidden-directory {
1672
- color: rgba(186, 194, 222, 0.68);
2165
+ color: rgba(var(--ctp-subtext-rgb), 0.68);
1673
2166
  }
1674
2167
  .path-picker-empty,
1675
2168
  .path-picker-error {
@@ -1680,10 +2173,10 @@ summary { cursor: pointer; color: var(--warning); }
1680
2173
  }
1681
2174
 
1682
2175
  ::-webkit-scrollbar { width: 0.75rem; height: 0.75rem; }
1683
- ::-webkit-scrollbar-track { background: rgba(17, 17, 27, 0.55); }
2176
+ ::-webkit-scrollbar-track { background: rgba(var(--ctp-crust-rgb), 0.55); }
1684
2177
  ::-webkit-scrollbar-thumb {
1685
2178
  background: linear-gradient(180deg, var(--ctp-mauve), var(--ctp-blue), var(--ctp-teal));
1686
- border: 2px solid rgba(17, 17, 27, 0.88);
2179
+ border: 2px solid rgba(var(--ctp-crust-rgb), 0.88);
1687
2180
  border-radius: 999px;
1688
2181
  }
1689
2182
  ::selection { color: #11111b; background: var(--ctp-pink); }
@@ -1758,7 +2251,7 @@ summary { cursor: pointer; color: var(--warning); }
1758
2251
  line-height: 1.1;
1759
2252
  background:
1760
2253
  linear-gradient(120deg, rgba(148, 226, 213, 0.12), rgba(203, 166, 247, 0.10)),
1761
- linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
2254
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
1762
2255
  }
1763
2256
  .side-panel-toggle-button,
1764
2257
  .side-panel-expand-button {
@@ -1788,14 +2281,47 @@ summary { cursor: pointer; color: var(--warning); }
1788
2281
  border-radius: 0.95rem;
1789
2282
  background:
1790
2283
  radial-gradient(circle at 8% 0%, rgba(148, 226, 213, 0.12), transparent 12rem),
1791
- linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
1792
- box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
2284
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
2285
+ box-shadow: 0 1.2rem 2.8rem rgba(var(--ctp-crust-rgb), 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
1793
2286
  }
1794
2287
  body.mobile-tabs-expanded .terminal-tabs { display: flex; }
2288
+ .terminal-tabs:has(.terminal-tab-group:hover),
2289
+ .terminal-tabs:has(.terminal-tab-group:focus-within),
2290
+ .terminal-tabs:has(.terminal-tab-group.menu-open) {
2291
+ overflow: auto;
2292
+ }
1795
2293
  .terminal-tab { min-width: min(11rem, 100%); max-width: 100%; flex: 1 1 9rem; }
2294
+ .terminal-tab-group {
2295
+ flex-wrap: wrap;
2296
+ }
2297
+ .terminal-tab-group:hover,
2298
+ .terminal-tab-group:focus-within,
2299
+ .terminal-tab-group.menu-open {
2300
+ flex-basis: 100%;
2301
+ }
2302
+ .terminal-tab-group-menu {
2303
+ position: static;
2304
+ flex-direction: column;
2305
+ flex-wrap: nowrap;
2306
+ width: 100%;
2307
+ max-width: none;
2308
+ max-height: none;
2309
+ min-width: 0;
2310
+ margin: 0.34rem;
2311
+ padding-top: 0;
2312
+ overflow: visible;
2313
+ }
2314
+ .terminal-tab-group-item,
2315
+ .terminal-tab-group-add {
2316
+ width: 100%;
2317
+ min-width: min(11rem, 100%);
2318
+ max-width: 100%;
2319
+ flex: 0 0 auto;
2320
+ }
1796
2321
  .terminal-tab-button,
1797
2322
  .terminal-tab-close,
1798
- .terminal-new-tab-button { min-height: 44px; }
2323
+ .terminal-new-tab-button,
2324
+ .terminal-tab-group-add { min-height: 44px; }
1799
2325
  .terminal-tab-button { padding: 0.32rem 0.52rem; }
1800
2326
  .terminal-tab-title { font-size: 0.78rem; }
1801
2327
  .terminal-tab-meta { display: none; }
@@ -1841,6 +2367,14 @@ summary { cursor: pointer; color: var(--warning); }
1841
2367
  padding: 0.62rem 0.58rem;
1842
2368
  scroll-padding-bottom: calc(12rem + var(--keyboard-inset-bottom, 0px));
1843
2369
  }
2370
+ .sticky-user-prompt-button {
2371
+ grid-template-columns: minmax(0, 1fr) auto;
2372
+ margin: 0 0 0.5rem;
2373
+ padding: 0.48rem 0.58rem;
2374
+ gap: 0.48rem;
2375
+ }
2376
+ .sticky-user-prompt-label { display: none; }
2377
+ .sticky-user-prompt-text { font-size: 0.78rem; }
1844
2378
  .jump-to-latest-button {
1845
2379
  min-height: 44px;
1846
2380
  margin: 0.35rem auto;
@@ -1858,6 +2392,17 @@ summary { cursor: pointer; color: var(--warning); }
1858
2392
  font-size: 0.72rem;
1859
2393
  }
1860
2394
  .message-role { letter-spacing: 0.08em; }
2395
+ .feedback-tray {
2396
+ align-items: stretch;
2397
+ flex-direction: column;
2398
+ margin: 0 0.58rem 0.52rem;
2399
+ }
2400
+ .feedback-tray button { width: 100%; }
2401
+ .action-feedback-controls {
2402
+ top: calc(100% - 0.12rem);
2403
+ right: 0.34rem;
2404
+ gap: 0.28rem;
2405
+ }
1861
2406
  .code-block {
1862
2407
  padding: 0.58rem;
1863
2408
  font-size: 0.78rem;
@@ -1930,8 +2475,8 @@ summary { cursor: pointer; color: var(--warning); }
1930
2475
  position: sticky;
1931
2476
  bottom: 0;
1932
2477
  padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
1933
- background: linear-gradient(180deg, rgba(17, 17, 27, 0.92), rgba(17, 17, 27, 0.98));
1934
- box-shadow: 0 -0.85rem 1.8rem rgba(17, 17, 27, 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
2478
+ background: linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-crust-rgb), 0.98));
2479
+ box-shadow: 0 -0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
1935
2480
  }
1936
2481
  #promptInput {
1937
2482
  min-height: calc(1.45em + 1.5rem);
@@ -1955,7 +2500,7 @@ summary { cursor: pointer; color: var(--warning); }
1955
2500
  border-color: rgba(249, 226, 175, 0.34);
1956
2501
  background:
1957
2502
  linear-gradient(120deg, rgba(249, 226, 175, 0.12), rgba(203, 166, 247, 0.10)),
1958
- linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
2503
+ linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
1959
2504
  }
1960
2505
  body.mobile-keyboard-open .terminal-tabs-shell,
1961
2506
  body.mobile-keyboard-open .widget-area,
@@ -2004,8 +2549,8 @@ summary { cursor: pointer; color: var(--warning); }
2004
2549
  border-radius: 0.95rem;
2005
2550
  background:
2006
2551
  radial-gradient(circle at 8% 0%, rgba(249, 226, 175, 0.12), transparent 12rem),
2007
- linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
2008
- box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
2552
+ linear-gradient(145deg, rgba(var(--ctp-crust-rgb), 0.98), rgba(var(--ctp-base-rgb), 0.96));
2553
+ box-shadow: 0 1.2rem 2.8rem rgba(var(--ctp-crust-rgb), 0.68), 0 0 1.4rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
2009
2554
  }
2010
2555
  body.composer-actions-open .composer-actions-panel { display: grid; }
2011
2556
  .composer-actions-panel label {
@@ -2058,7 +2603,7 @@ summary { cursor: pointer; color: var(--warning); }
2058
2603
  padding: 0;
2059
2604
  border: 0;
2060
2605
  border-radius: 0;
2061
- background: rgba(17, 17, 27, 0.62);
2606
+ background: rgba(var(--ctp-crust-rgb), 0.62);
2062
2607
  box-shadow: none;
2063
2608
  backdrop-filter: blur(4px);
2064
2609
  }
@@ -2097,7 +2642,7 @@ summary { cursor: pointer; color: var(--warning); }
2097
2642
  bottom: 0;
2098
2643
  flex-wrap: wrap;
2099
2644
  padding-bottom: env(safe-area-inset-bottom);
2100
- background: linear-gradient(180deg, transparent, rgba(17, 17, 27, 0.96) 35%);
2645
+ background: linear-gradient(180deg, transparent, rgba(var(--ctp-crust-rgb), 0.96) 35%);
2101
2646
  }
2102
2647
  .extension-dialog menu button { flex: 1 1 9rem; }
2103
2648
  .composer-row button[data-tooltip]:not(.tooltip-open)::before,