@workflow-code/cli 0.2.4-20261011005.codex-cli-web → 0.2.4-20261011007.codex-cli-web

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2354 @@
1
+ /* src/web/ui/style.css */
2
+ :root {
3
+ color-scheme: light dark;
4
+ --border: var(--vscode-panel-border, #444);
5
+ --muted: var(--vscode-descriptionForeground);
6
+ }
7
+ * {
8
+ box-sizing: border-box;
9
+ letter-spacing: 0;
10
+ }
11
+ body {
12
+ margin: 0;
13
+ padding: 0;
14
+ color: var(--vscode-editor-foreground);
15
+ background: var(--vscode-editor-background);
16
+ font: 13px var(--vscode-font-family);
17
+ }
18
+ button,
19
+ input,
20
+ textarea,
21
+ select {
22
+ font: inherit;
23
+ }
24
+ button {
25
+ cursor: pointer;
26
+ color: inherit;
27
+ }
28
+ button:disabled {
29
+ cursor: default;
30
+ opacity: .45;
31
+ }
32
+ button:focus-visible,
33
+ input:focus-visible,
34
+ select:focus-visible,
35
+ textarea:focus-visible,
36
+ a:focus-visible,
37
+ summary:focus-visible {
38
+ outline: 1px solid var(--vscode-focusBorder);
39
+ outline-offset: 2px;
40
+ }
41
+ [hidden] {
42
+ display: none !important;
43
+ }
44
+ #app {
45
+ height: 100vh;
46
+ display: grid;
47
+ grid-template-areas: "toolbar" "main";
48
+ grid-template-columns: minmax(0, 1fr);
49
+ grid-template-rows: auto minmax(0, 1fr);
50
+ overflow: hidden;
51
+ }
52
+ #app.menu-open {
53
+ grid-template-areas: "menu toolbar" "menu main";
54
+ grid-template-columns: 264px minmax(0, 1fr);
55
+ }
56
+ .toolbar {
57
+ grid-area: toolbar;
58
+ display: flex;
59
+ min-height: 52px;
60
+ align-items: center;
61
+ justify-content: space-between;
62
+ gap: 12px;
63
+ padding: 8px 16px;
64
+ }
65
+ .project-title {
66
+ display: flex;
67
+ min-width: 0;
68
+ align-items: center;
69
+ gap: 8px;
70
+ }
71
+ .project-heading {
72
+ min-width: 0;
73
+ }
74
+ #assistant-folder {
75
+ display: block;
76
+ color: var(--muted);
77
+ font-size: 11px;
78
+ overflow: hidden;
79
+ text-overflow: ellipsis;
80
+ white-space: nowrap;
81
+ margin-top: 3px;
82
+ }
83
+ .assistant-welcome {
84
+ padding: 20px 16px;
85
+ color: var(--muted);
86
+ }
87
+ body[data-surface=assistant] {
88
+ background: var(--vscode-sideBar-background, var(--vscode-editor-background));
89
+ }
90
+ .project-icon {
91
+ width: 24px;
92
+ height: 24px;
93
+ display: grid;
94
+ place-items: center;
95
+ flex-shrink: 0;
96
+ color: var(--muted);
97
+ }
98
+ h1 {
99
+ font-size: 14px;
100
+ font-weight: 500;
101
+ margin: 0;
102
+ min-width: 0;
103
+ overflow: hidden;
104
+ text-overflow: ellipsis;
105
+ white-space: nowrap;
106
+ }
107
+ .project-name {
108
+ color: var(--muted);
109
+ font-size: 10px;
110
+ white-space: nowrap;
111
+ }
112
+ .toolbar-actions {
113
+ display: flex;
114
+ gap: 4px;
115
+ align-items: center;
116
+ min-width: 0;
117
+ flex-shrink: 0;
118
+ }
119
+ .icon-button {
120
+ display: inline-flex;
121
+ flex-shrink: 0;
122
+ width: 28px;
123
+ height: 28px;
124
+ padding: 0;
125
+ border: none;
126
+ border-radius: 4px;
127
+ align-items: center;
128
+ justify-content: center;
129
+ background: transparent;
130
+ }
131
+ .icon-button:hover:not(:disabled) {
132
+ background: var(--vscode-toolbar-hoverBackground);
133
+ }
134
+ .toolbar-actions [aria-expanded=true] {
135
+ background: var(--vscode-toolbar-activeBackground, var(--vscode-toolbar-hoverBackground));
136
+ }
137
+ .project-menu {
138
+ display: none;
139
+ grid-area: menu;
140
+ min-width: 0;
141
+ min-height: 0;
142
+ overflow: hidden;
143
+ background: var(--vscode-sideBar-background);
144
+ border-right: 1px solid var(--border);
145
+ }
146
+ .menu-open .project-menu {
147
+ display: flex;
148
+ flex-direction: column;
149
+ }
150
+ .menu-heading {
151
+ display: flex;
152
+ flex-shrink: 0;
153
+ align-items: center;
154
+ justify-content: space-between;
155
+ gap: 6px;
156
+ min-height: 52px;
157
+ padding: 8px 10px 8px 16px;
158
+ font-size: 12px;
159
+ color: var(--muted);
160
+ }
161
+ .menu-heading > span {
162
+ min-width: 0;
163
+ white-space: nowrap;
164
+ }
165
+ .menu-actions {
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 2px;
169
+ flex-shrink: 0;
170
+ }
171
+ .history-search {
172
+ display: flex;
173
+ align-items: center;
174
+ gap: 7px;
175
+ border-bottom: 1px solid var(--border);
176
+ margin: 12px 16px 8px;
177
+ padding: 0 0 8px;
178
+ color: var(--muted);
179
+ }
180
+ .history-search input {
181
+ flex: 1;
182
+ width: 100%;
183
+ border: none;
184
+ background: transparent;
185
+ min-height: 26px;
186
+ padding: 0;
187
+ font-size: 12px;
188
+ }
189
+ .history-search input::placeholder {
190
+ color: var(--muted);
191
+ }
192
+ #chats {
193
+ min-height: 0;
194
+ overflow: auto;
195
+ overflow-anchor: none;
196
+ }
197
+ #session-list {
198
+ padding: 0 8px;
199
+ }
200
+ .session {
201
+ display: flex;
202
+ align-items: center;
203
+ justify-content: space-between;
204
+ gap: 10px;
205
+ border: none;
206
+ background: transparent;
207
+ border-radius: 4px;
208
+ width: 100%;
209
+ min-width: 0;
210
+ height: 38px;
211
+ padding: 0 10px;
212
+ text-align: left;
213
+ }
214
+ .session > span {
215
+ min-width: 0;
216
+ white-space: nowrap;
217
+ overflow: hidden;
218
+ text-overflow: ellipsis;
219
+ }
220
+ .session time {
221
+ flex-shrink: 0;
222
+ color: var(--muted);
223
+ font-size: 10px;
224
+ }
225
+ .session > span > .codicon {
226
+ font-size: 12px;
227
+ margin-right: 6px;
228
+ }
229
+ .session:hover {
230
+ background: var(--vscode-list-hoverBackground);
231
+ }
232
+ .session.active {
233
+ background: var(--vscode-list-inactiveSelectionBackground);
234
+ }
235
+ .session.context-active {
236
+ background: var(--vscode-list-hoverBackground);
237
+ }
238
+ .session-menu {
239
+ position: fixed;
240
+ inset: auto;
241
+ margin: 0;
242
+ width: min(220px, calc(100vw - 16px));
243
+ max-height: calc(100vh - 16px);
244
+ overflow: auto;
245
+ padding: 4px;
246
+ color: var(--vscode-menu-foreground, var(--vscode-editor-foreground));
247
+ background: var(--vscode-menu-background, var(--vscode-editorWidget-background, var(--vscode-editor-background)));
248
+ border: 1px solid var(--vscode-menu-border, var(--border));
249
+ border-radius: 6px;
250
+ box-shadow: 0 4px 16px var(--vscode-widget-shadow, #0003);
251
+ }
252
+ .session-action {
253
+ display: flex;
254
+ align-items: center;
255
+ gap: 10px;
256
+ width: 100%;
257
+ min-height: 32px;
258
+ padding: 6px 10px;
259
+ border: none;
260
+ border-radius: 4px;
261
+ background: transparent;
262
+ text-align: left;
263
+ }
264
+ .session-action .codicon {
265
+ flex-shrink: 0;
266
+ }
267
+ .session-action > span:last-child {
268
+ overflow-wrap: anywhere;
269
+ }
270
+ .session-action[data-action=delete] {
271
+ color: var(--vscode-errorForeground);
272
+ }
273
+ .session-action:hover,
274
+ .session-action:focus {
275
+ color: var(--vscode-menu-selectionForeground, var(--vscode-list-activeSelectionForeground));
276
+ background: var(--vscode-menu-selectionBackground, var(--vscode-list-activeSelectionBackground));
277
+ outline: none;
278
+ }
279
+ .session-action:focus-visible {
280
+ outline: 1px solid var(--vscode-menu-selectionBorder, var(--vscode-focusBorder));
281
+ outline-offset: -1px;
282
+ }
283
+ .session-menu-separator {
284
+ height: 1px;
285
+ margin: 4px 6px;
286
+ background: var(--vscode-menu-separatorBackground, var(--border));
287
+ }
288
+ .all-history {
289
+ background: transparent;
290
+ border: none;
291
+ color: var(--muted);
292
+ font-size: 11px;
293
+ padding: 10px 18px;
294
+ text-align: left;
295
+ }
296
+ .all-history:hover {
297
+ color: var(--vscode-editor-foreground);
298
+ }
299
+ #load-more-history {
300
+ display: flex;
301
+ align-items: center;
302
+ gap: 6px;
303
+ }
304
+ .history-popover {
305
+ position: fixed;
306
+ inset: auto;
307
+ margin: 0;
308
+ width: min(520px, calc(100vw - 24px));
309
+ padding: 0;
310
+ color: inherit;
311
+ background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
312
+ border: 1px solid var(--border);
313
+ border-radius: 8px;
314
+ box-shadow: 0 8px 24px #0003;
315
+ }
316
+ .history-popover:popover-open {
317
+ display: flex;
318
+ flex-direction: column;
319
+ }
320
+ .history-popover-toolbar {
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 8px;
324
+ margin: 12px 12px 0;
325
+ padding-bottom: 8px;
326
+ border-bottom: 1px solid var(--border);
327
+ }
328
+ .history-popover .history-search {
329
+ flex: 1;
330
+ min-width: 0;
331
+ margin: 0;
332
+ padding: 0;
333
+ border: 0;
334
+ }
335
+ .history-popover input {
336
+ min-height: 28px;
337
+ }
338
+ #all-session-list {
339
+ overflow: auto;
340
+ min-height: 0;
341
+ padding: 6px 8px 10px;
342
+ }
343
+ .parameter-feedback {
344
+ display: flex;
345
+ flex-wrap: wrap;
346
+ align-items: center;
347
+ gap: 8px;
348
+ }
349
+ .parameter-status {
350
+ display: flex;
351
+ gap: 6px;
352
+ align-items: center;
353
+ padding-bottom: 8px;
354
+ color: var(--muted);
355
+ font-size: 11px;
356
+ }
357
+ .parameter-status .codicon,
358
+ .refreshing .codicon,
359
+ .pending .codicon {
360
+ animation: spin 1.2s linear infinite;
361
+ }
362
+ .parameter-error {
363
+ flex: 1;
364
+ min-width: 0;
365
+ font-size: 13px;
366
+ line-height: 1.6;
367
+ margin-bottom: 8px;
368
+ color: var(--vscode-errorForeground);
369
+ overflow-wrap: anywhere;
370
+ }
371
+ .no-history {
372
+ padding: 16px 18px;
373
+ color: var(--muted);
374
+ font-size: 12px;
375
+ }
376
+ summary::-webkit-details-marker {
377
+ display: none;
378
+ }
379
+ .param-field {
380
+ min-width: 0;
381
+ display: flex;
382
+ flex-direction: column;
383
+ gap: 7px;
384
+ }
385
+ .field-label {
386
+ display: flex;
387
+ align-items: center;
388
+ gap: 4px;
389
+ font-size: 12px;
390
+ min-width: 0;
391
+ color: var(--vscode-editor-foreground);
392
+ }
393
+ .field-label > span:first-child {
394
+ overflow-wrap: anywhere;
395
+ }
396
+ .field-label .codicon {
397
+ margin-left: auto;
398
+ color: var(--muted);
399
+ font-size: 12px;
400
+ }
401
+ .required {
402
+ color: var(--muted);
403
+ font-size: 10px;
404
+ }
405
+ input,
406
+ select {
407
+ min-width: 0;
408
+ min-height: 30px;
409
+ border: 1px solid var(--vscode-input-border, var(--border));
410
+ background: var(--vscode-input-background);
411
+ color: var(--vscode-input-foreground);
412
+ border-radius: 4px;
413
+ padding: 4px 8px;
414
+ }
415
+ .field-control {
416
+ width: 100%;
417
+ }
418
+ .field-control:disabled {
419
+ opacity: .55;
420
+ }
421
+ select option {
422
+ background: var(--vscode-dropdown-background);
423
+ color: var(--vscode-dropdown-foreground);
424
+ }
425
+ .boolean-field {
426
+ display: grid;
427
+ grid-template-columns: minmax(0, 1fr) 28px;
428
+ align-items: center;
429
+ gap: 7px;
430
+ }
431
+ .boolean-field .field-label {
432
+ grid-column: 1;
433
+ grid-row: 1;
434
+ }
435
+ input[role=switch] {
436
+ appearance: none;
437
+ position: relative;
438
+ width: 28px;
439
+ height: 16px;
440
+ min-height: 16px;
441
+ margin: 0;
442
+ padding: 0;
443
+ border-radius: 8px;
444
+ background: var(--vscode-input-background);
445
+ cursor: pointer;
446
+ }
447
+ input[role=switch]::before {
448
+ content: "";
449
+ position: absolute;
450
+ top: 2px;
451
+ left: 2px;
452
+ width: 10px;
453
+ height: 10px;
454
+ border-radius: 50%;
455
+ background: var(--muted);
456
+ transition: transform .15s;
457
+ }
458
+ input[role=switch]:checked {
459
+ background: var(--vscode-button-background);
460
+ border-color: var(--vscode-button-background);
461
+ }
462
+ input[role=switch]:checked::before {
463
+ transform: translateX(12px);
464
+ background: var(--vscode-button-foreground);
465
+ }
466
+ input[role=switch]:disabled {
467
+ cursor: default;
468
+ }
469
+ .option-description {
470
+ font-size: 12px;
471
+ line-height: 1.5;
472
+ color: var(--muted);
473
+ overflow-wrap: anywhere;
474
+ }
475
+ .field-choices {
476
+ display: flex;
477
+ flex-direction: column;
478
+ gap: 8px;
479
+ }
480
+ .field-choices label {
481
+ display: flex;
482
+ align-items: center;
483
+ gap: 7px;
484
+ font-size: 12px;
485
+ overflow-wrap: anywhere;
486
+ }
487
+ .field-choices input {
488
+ width: 14px;
489
+ height: 14px;
490
+ min-height: 14px;
491
+ margin: 0;
492
+ accent-color: var(--vscode-button-background);
493
+ }
494
+ .param-field textarea {
495
+ min-height: 72px;
496
+ border: 1px solid var(--border);
497
+ background: var(--vscode-input-background);
498
+ border-radius: 4px;
499
+ padding: 8px;
500
+ }
501
+ main {
502
+ grid-area: main;
503
+ min-width: 0;
504
+ min-height: 0;
505
+ display: flex;
506
+ flex-direction: column;
507
+ }
508
+ .transcript-area {
509
+ flex: 1;
510
+ min-height: 0;
511
+ position: relative;
512
+ }
513
+ .transcript {
514
+ height: 100%;
515
+ overflow: auto;
516
+ overflow-anchor: none;
517
+ scrollbar-gutter: stable;
518
+ padding: 18px max(28px, calc((100% - 820px) / 2)) 10px;
519
+ }
520
+ .empty {
521
+ min-height: 100px;
522
+ height: 100%;
523
+ display: flex;
524
+ align-items: center;
525
+ justify-content: center;
526
+ color: var(--muted);
527
+ opacity: .3;
528
+ }
529
+ .empty > .codicon {
530
+ font-size: 40px;
531
+ }
532
+ .message {
533
+ min-width: 0;
534
+ margin-bottom: 30px;
535
+ }
536
+ .message-body {
537
+ min-width: 0;
538
+ position: relative;
539
+ }
540
+ .message-date {
541
+ margin-left: auto;
542
+ flex-shrink: 0;
543
+ text-align: right;
544
+ white-space: nowrap;
545
+ font-size: 11px;
546
+ line-height: 1.6;
547
+ color: var(--muted);
548
+ opacity: 0;
549
+ }
550
+ .message:hover .message-date,
551
+ .message:has(:focus-visible) .message-date {
552
+ opacity: 1;
553
+ }
554
+ .user .message-body {
555
+ width: fit-content;
556
+ max-width: 84%;
557
+ margin-left: auto;
558
+ padding-bottom: 32px;
559
+ }
560
+ .message-header {
561
+ display: flex;
562
+ align-items: flex-start;
563
+ gap: 8px;
564
+ min-height: 26px;
565
+ padding-bottom: 8px;
566
+ margin-bottom: 12px;
567
+ border-bottom: 1px solid var(--border);
568
+ }
569
+ .user .message-header {
570
+ display: none;
571
+ }
572
+ .message-metadata {
573
+ flex: 1;
574
+ min-width: 0;
575
+ font-size: 11px;
576
+ line-height: 1.6;
577
+ color: var(--muted);
578
+ overflow-wrap: anywhere;
579
+ }
580
+ .message-actions {
581
+ display: flex;
582
+ align-items: center;
583
+ justify-content: flex-start;
584
+ gap: 4px;
585
+ min-height: 32px;
586
+ padding-top: 4px;
587
+ }
588
+ .user .message-actions {
589
+ position: absolute;
590
+ right: 0;
591
+ bottom: 0;
592
+ width: max-content;
593
+ justify-content: flex-end;
594
+ gap: 6px;
595
+ opacity: 0;
596
+ }
597
+ .user:hover .message-actions,
598
+ .user:has(:focus-visible) .message-actions {
599
+ opacity: 1;
600
+ }
601
+ .message-actions .icon-button {
602
+ width: 28px;
603
+ height: 28px;
604
+ color: var(--muted);
605
+ }
606
+ .message-content {
607
+ line-height: 1.85;
608
+ font-size: 13px;
609
+ overflow-wrap: anywhere;
610
+ min-width: 0;
611
+ }
612
+ .user .message-content {
613
+ background: var(--vscode-textCodeBlock-background);
614
+ border-radius: 8px;
615
+ padding: 14px 18px;
616
+ white-space: pre-wrap;
617
+ }
618
+ .message-content > :first-child {
619
+ margin-top: 0;
620
+ }
621
+ .message-content > :last-child {
622
+ margin-bottom: 0;
623
+ }
624
+ .message-content p {
625
+ margin: 8px 0 12px;
626
+ }
627
+ .message-content h1,
628
+ .message-content h2,
629
+ .message-content h3,
630
+ .message-content h4 {
631
+ font-size: 15px;
632
+ line-height: 1.5;
633
+ white-space: normal;
634
+ margin: 18px 0 8px;
635
+ font-weight: 600;
636
+ }
637
+ .message-content li {
638
+ padding-left: 2px;
639
+ margin: 4px 0;
640
+ }
641
+ .message-content ul,
642
+ .message-content ol {
643
+ padding-left: 22px;
644
+ margin: 10px 0;
645
+ }
646
+ .message-content li:has(> input[type=checkbox]),
647
+ .message-content li:has(> p > input[type=checkbox]) {
648
+ list-style: none;
649
+ }
650
+ .message-content input[type=checkbox] {
651
+ width: 14px;
652
+ height: 14px;
653
+ min-height: 14px;
654
+ padding: 0;
655
+ margin: 0 6px 0 -20px;
656
+ vertical-align: -2px;
657
+ accent-color: var(--vscode-button-background);
658
+ }
659
+ .message-content code {
660
+ font-family: var(--vscode-editor-font-family, monospace);
661
+ font-size: 12px;
662
+ background: var(--vscode-textCodeBlock-background);
663
+ padding: 2px 5px;
664
+ border-radius: 3px;
665
+ }
666
+ .code-block {
667
+ margin: 14px 0;
668
+ border: 1px solid var(--border);
669
+ border-radius: 6px;
670
+ overflow: hidden;
671
+ background: var(--vscode-textCodeBlock-background);
672
+ }
673
+ .code-toolbar {
674
+ display: flex;
675
+ align-items: center;
676
+ justify-content: space-between;
677
+ padding: 3px 8px 3px 12px;
678
+ min-height: 32px;
679
+ border-bottom: 1px solid var(--border);
680
+ font-size: 10px;
681
+ color: var(--muted);
682
+ }
683
+ .code-toolbar .icon-button {
684
+ width: 24px;
685
+ height: 24px;
686
+ }
687
+ .message-content pre {
688
+ overflow: auto;
689
+ max-width: 100%;
690
+ padding: 12px 14px;
691
+ margin: 0;
692
+ line-height: 1.65;
693
+ }
694
+ .message-content pre code {
695
+ padding: 0;
696
+ background: none;
697
+ }
698
+ .message-content blockquote {
699
+ border-left: 2px solid var(--vscode-textBlockQuote-border);
700
+ margin: 12px 0;
701
+ padding: 4px 14px;
702
+ background: var(--vscode-textBlockQuote-background);
703
+ color: var(--muted);
704
+ }
705
+ .message-content a {
706
+ color: var(--vscode-textLink-foreground);
707
+ text-decoration: none;
708
+ }
709
+ .message-content a:hover {
710
+ text-decoration: underline;
711
+ }
712
+ .message-content hr {
713
+ border: none;
714
+ border-top: 1px solid var(--border);
715
+ margin: 18px 0;
716
+ }
717
+ .message-content table {
718
+ display: block;
719
+ max-width: 100%;
720
+ overflow: auto;
721
+ border-collapse: collapse;
722
+ font-size: 12px;
723
+ margin: 12px 0;
724
+ }
725
+ .message-content th,
726
+ .message-content td {
727
+ border: 1px solid var(--border);
728
+ padding: 7px 12px;
729
+ text-align: left;
730
+ }
731
+ .message-content th {
732
+ background: var(--vscode-textCodeBlock-background);
733
+ }
734
+ .pending {
735
+ display: inline-flex;
736
+ gap: 8px;
737
+ align-items: center;
738
+ color: var(--muted);
739
+ font-size: 12px;
740
+ padding: 8px 0;
741
+ }
742
+ .output-detail {
743
+ margin: 12px 0 0;
744
+ color: var(--muted);
745
+ border-left: 2px solid var(--border);
746
+ padding-left: 10px;
747
+ }
748
+ .output-detail summary {
749
+ display: flex;
750
+ align-items: center;
751
+ gap: 6px;
752
+ cursor: pointer;
753
+ font-size: 12px;
754
+ padding: 4px 0;
755
+ list-style: none;
756
+ }
757
+ .output-detail[open] summary .codicon {
758
+ transform: rotate(90deg);
759
+ }
760
+ .output-detail pre {
761
+ white-space: pre-wrap;
762
+ overflow-wrap: anywhere;
763
+ font: 11px/1.6 var(--vscode-editor-font-family, monospace);
764
+ margin: 8px 0;
765
+ }
766
+ .plan-card {
767
+ border: 1px solid var(--border);
768
+ border-radius: 6px;
769
+ padding: 10px 14px;
770
+ color: inherit;
771
+ cursor: pointer;
772
+ }
773
+ .plan-card summary {
774
+ display: grid;
775
+ grid-template-columns: auto 1fr;
776
+ }
777
+ .plan-card .plan-preview {
778
+ grid-column: 1 / -1;
779
+ }
780
+ .message-output > .message-content + .message-content {
781
+ margin-top: 12px;
782
+ }
783
+ .activity-group {
784
+ margin: 16px 0;
785
+ min-width: 0;
786
+ color: var(--muted);
787
+ }
788
+ .activity-group-summary {
789
+ display: flex;
790
+ align-items: center;
791
+ gap: 8px;
792
+ min-height: 30px;
793
+ cursor: pointer;
794
+ list-style: none;
795
+ font-size: 12px;
796
+ }
797
+ .activity-group-summary > .codicon {
798
+ flex-shrink: 0;
799
+ font-size: 14px;
800
+ }
801
+ .activity-group-title {
802
+ min-width: 0;
803
+ overflow: hidden;
804
+ text-overflow: ellipsis;
805
+ white-space: nowrap;
806
+ }
807
+ .activity-group-summary > .codicon:last-child {
808
+ font-size: 12px;
809
+ }
810
+ .activity-group:not([open]) > summary > .codicon:last-child {
811
+ transform: rotate(-90deg);
812
+ }
813
+ .activity-group.single-activity > summary {
814
+ display: none;
815
+ }
816
+ .activity-list {
817
+ max-height: min(280px, 35vh);
818
+ overflow: auto;
819
+ overscroll-behavior-y: auto;
820
+ scrollbar-width: thin;
821
+ padding: 2px 8px 2px 0;
822
+ }
823
+ .agent-activity-item {
824
+ min-width: 0;
825
+ }
826
+ .agent-activity-item > summary {
827
+ display: flex;
828
+ align-items: center;
829
+ gap: 8px;
830
+ min-height: 30px;
831
+ padding: 4px 0;
832
+ cursor: pointer;
833
+ font-size: 12px;
834
+ list-style: none;
835
+ }
836
+ .activity-icon,
837
+ .activity-state,
838
+ .activity-chevron {
839
+ display: inline-flex;
840
+ align-items: center;
841
+ flex-shrink: 0;
842
+ width: 16px;
843
+ }
844
+ .activity-icon .codicon,
845
+ .activity-state .codicon {
846
+ font-size: 14px;
847
+ }
848
+ .activity-title {
849
+ min-width: 0;
850
+ overflow: hidden;
851
+ text-overflow: ellipsis;
852
+ white-space: nowrap;
853
+ }
854
+ .activity-title:has(.activity-file) {
855
+ display: flex;
856
+ align-items: center;
857
+ gap: 4px;
858
+ }
859
+ .activity-title > span {
860
+ flex-shrink: 0;
861
+ }
862
+ .activity-chevron {
863
+ opacity: 0;
864
+ }
865
+ .activity-chevron .codicon {
866
+ font-size: 12px;
867
+ }
868
+ .agent-activity-item[open] .activity-chevron {
869
+ opacity: 1;
870
+ transform: rotate(90deg);
871
+ }
872
+ .agent-activity-item > summary:hover .activity-chevron,
873
+ .agent-activity-item > summary:focus-within .activity-chevron {
874
+ opacity: 1;
875
+ }
876
+ .activity-state {
877
+ margin-left: auto;
878
+ }
879
+ .activity-state:empty {
880
+ display: none;
881
+ }
882
+ .agent-activity-item[data-state=running] .activity-state .codicon {
883
+ animation: spin 1.2s linear infinite;
884
+ }
885
+ .agent-activity-item[data-state=failed] > summary,
886
+ .activity-error {
887
+ color: var(--vscode-errorForeground);
888
+ }
889
+ .activity-file {
890
+ min-width: 0;
891
+ padding: 0;
892
+ border: 0;
893
+ border-radius: 0;
894
+ background: transparent;
895
+ color: inherit;
896
+ overflow: hidden;
897
+ text-overflow: ellipsis;
898
+ white-space: nowrap;
899
+ text-decoration: underline;
900
+ text-decoration-style: dotted;
901
+ text-underline-offset: 3px;
902
+ }
903
+ .activity-file:hover {
904
+ color: var(--vscode-textLink-foreground);
905
+ }
906
+ .activity-body {
907
+ max-height: 240px;
908
+ overflow: auto;
909
+ padding: 4px 0 10px 24px;
910
+ font-size: 12px;
911
+ scrollbar-width: thin;
912
+ }
913
+ .activity-section {
914
+ padding: 4px 0 8px;
915
+ }
916
+ .activity-section + .activity-section {
917
+ border-top: 1px solid var(--border);
918
+ }
919
+ .activity-section > header {
920
+ display: flex;
921
+ align-items: center;
922
+ justify-content: space-between;
923
+ gap: 8px;
924
+ min-height: 28px;
925
+ }
926
+ .activity-section pre {
927
+ margin: 0;
928
+ white-space: pre-wrap;
929
+ overflow-wrap: anywhere;
930
+ font: 11px/1.6 var(--vscode-editor-font-family, monospace);
931
+ color: var(--vscode-editor-foreground);
932
+ }
933
+ .activity-error pre {
934
+ color: var(--vscode-errorForeground);
935
+ }
936
+ .message-output > .pending {
937
+ display: flex;
938
+ min-width: 0;
939
+ max-width: 100%;
940
+ }
941
+ .message-output > .pending > span:last-child {
942
+ min-width: 0;
943
+ overflow: hidden;
944
+ text-overflow: ellipsis;
945
+ white-space: nowrap;
946
+ }
947
+ .timer-record .timer-duration {
948
+ margin-left: auto;
949
+ min-width: 48px;
950
+ text-align: right;
951
+ font-variant-numeric: tabular-nums;
952
+ }
953
+ .timer-details {
954
+ white-space: pre-line;
955
+ font-size: 12px;
956
+ line-height: 1.6;
957
+ }
958
+ .timer-record[open] summary .codicon {
959
+ transform: none;
960
+ }
961
+ .plain-output {
962
+ white-space: pre-wrap;
963
+ }
964
+ .preview-image {
965
+ cursor: zoom-in;
966
+ }
967
+ .image-preview {
968
+ display: block;
969
+ max-width: 100%;
970
+ max-height: calc(100vh - 148px);
971
+ margin: auto;
972
+ object-fit: contain;
973
+ }
974
+ .plan-preview {
975
+ margin: 6px 0 0;
976
+ font-size: 12px;
977
+ line-height: 1.6;
978
+ color: var(--muted);
979
+ white-space: pre-line;
980
+ overflow-wrap: anywhere;
981
+ pointer-events: none;
982
+ }
983
+ .output-detail audio,
984
+ .output-detail video {
985
+ max-width: 100%;
986
+ width: 100%;
987
+ margin: 12px 0;
988
+ }
989
+ .message-content img {
990
+ max-width: 100%;
991
+ height: auto;
992
+ border-radius: 6px;
993
+ }
994
+ .attachments {
995
+ display: flex;
996
+ flex-wrap: wrap;
997
+ gap: 8px;
998
+ margin: 12px 0;
999
+ }
1000
+ .attachment {
1001
+ display: flex;
1002
+ align-items: center;
1003
+ gap: 8px;
1004
+ max-width: min(260px, 100%);
1005
+ padding: 4px 8px 4px 4px;
1006
+ border: 1px solid var(--border);
1007
+ border-radius: 6px;
1008
+ background: var(--vscode-editor-background);
1009
+ }
1010
+ .attachment > span {
1011
+ min-width: 0;
1012
+ overflow: hidden;
1013
+ text-overflow: ellipsis;
1014
+ white-space: nowrap;
1015
+ font-size: 12px;
1016
+ }
1017
+ .attachment-preview {
1018
+ display: grid;
1019
+ place-items: center;
1020
+ width: 40px;
1021
+ height: 40px;
1022
+ flex-shrink: 0;
1023
+ border: 0;
1024
+ border-radius: 4px;
1025
+ background: var(--vscode-toolbar-hoverBackground);
1026
+ padding: 0;
1027
+ overflow: hidden;
1028
+ }
1029
+ .attachment-preview img {
1030
+ width: 100%;
1031
+ height: 100%;
1032
+ object-fit: cover;
1033
+ }
1034
+ #draft-attachments {
1035
+ padding: 0 16px;
1036
+ }
1037
+ .input-queue {
1038
+ max-height: 20vh;
1039
+ overflow: auto;
1040
+ margin-bottom: 8px;
1041
+ border-top: 1px solid var(--border);
1042
+ }
1043
+ .queue-heading,
1044
+ .queued-input,
1045
+ .editing-queue {
1046
+ display: flex;
1047
+ align-items: center;
1048
+ gap: 4px;
1049
+ min-height: 32px;
1050
+ }
1051
+ .queue-heading {
1052
+ justify-content: space-between;
1053
+ font-size: 11px;
1054
+ color: var(--muted);
1055
+ }
1056
+ .queued-input > span {
1057
+ flex: 1;
1058
+ min-width: 0;
1059
+ white-space: nowrap;
1060
+ overflow: hidden;
1061
+ text-overflow: ellipsis;
1062
+ }
1063
+ .editing-queue {
1064
+ justify-content: space-between;
1065
+ color: var(--muted);
1066
+ font-size: 11px;
1067
+ }
1068
+ .resource-cards {
1069
+ display: flex;
1070
+ flex-wrap: wrap;
1071
+ gap: 8px;
1072
+ margin-top: 12px;
1073
+ }
1074
+ .resource-card {
1075
+ display: flex;
1076
+ align-items: center;
1077
+ gap: 8px;
1078
+ min-width: 0;
1079
+ max-width: 100%;
1080
+ min-height: 36px;
1081
+ padding: 6px 10px;
1082
+ border: 1px solid var(--border);
1083
+ border-radius: 6px;
1084
+ background: var(--vscode-editor-background);
1085
+ text-align: left;
1086
+ }
1087
+ .resource-card > span:not(.codicon) {
1088
+ min-width: 0;
1089
+ overflow: hidden;
1090
+ text-overflow: ellipsis;
1091
+ white-space: nowrap;
1092
+ }
1093
+ .input-prompt {
1094
+ margin: 16px 0;
1095
+ padding: 16px 0;
1096
+ border-top: 1px solid var(--border);
1097
+ border-bottom: 1px solid var(--border);
1098
+ }
1099
+ .input-prompt h2 {
1100
+ font-size: 14px;
1101
+ margin: 0 0 8px;
1102
+ }
1103
+ .input-prompt > header {
1104
+ display: flex;
1105
+ align-items: center;
1106
+ justify-content: space-between;
1107
+ gap: 8px;
1108
+ }
1109
+ .input-prompt pre {
1110
+ white-space: pre-wrap;
1111
+ overflow-wrap: anywhere;
1112
+ font: 12px/1.6 var(--vscode-editor-font-family);
1113
+ }
1114
+ .input-prompt details {
1115
+ margin: 8px 0;
1116
+ }
1117
+ .input-prompt summary {
1118
+ cursor: pointer;
1119
+ color: var(--muted);
1120
+ }
1121
+ .param-file-summary {
1122
+ color: var(--muted);
1123
+ font-size: 12px;
1124
+ overflow-wrap: anywhere;
1125
+ }
1126
+ .input-prompt p {
1127
+ line-height: 1.6;
1128
+ margin: 4px 0 12px;
1129
+ color: var(--muted);
1130
+ overflow-wrap: anywhere;
1131
+ }
1132
+ .input-prompt form,
1133
+ .prompt-field {
1134
+ display: grid;
1135
+ gap: 10px;
1136
+ }
1137
+ .prompt-field > label {
1138
+ font-weight: 500;
1139
+ }
1140
+ .prompt-choice {
1141
+ display: flex;
1142
+ align-items: flex-start;
1143
+ gap: 10px;
1144
+ min-height: 40px;
1145
+ padding: 10px 12px;
1146
+ border: 1px solid var(--border);
1147
+ border-radius: 4px;
1148
+ font-weight: 400 !important;
1149
+ cursor: pointer;
1150
+ }
1151
+ .prompt-choice:has(input:checked) {
1152
+ border-color: var(--vscode-focusBorder);
1153
+ background: var(--vscode-list-inactiveSelectionBackground);
1154
+ }
1155
+ .prompt-choice > span {
1156
+ display: grid;
1157
+ gap: 4px;
1158
+ }
1159
+ .prompt-choice small {
1160
+ color: var(--muted);
1161
+ font-weight: 400;
1162
+ }
1163
+ .input-prompt input:not([type=radio]):not([type=checkbox]),
1164
+ .input-prompt textarea {
1165
+ width: 100%;
1166
+ min-height: 40px;
1167
+ padding: 8px;
1168
+ color: inherit;
1169
+ background: var(--vscode-input-background);
1170
+ border: 1px solid var(--vscode-input-border, var(--border));
1171
+ border-radius: 4px;
1172
+ resize: vertical;
1173
+ }
1174
+ .prompt-navigation {
1175
+ display: flex;
1176
+ align-items: center;
1177
+ flex-wrap: wrap;
1178
+ gap: 8px;
1179
+ }
1180
+ .prompt-button {
1181
+ min-height: 36px;
1182
+ padding: 6px 12px;
1183
+ color: var(--vscode-button-secondaryForeground);
1184
+ background: var(--vscode-button-secondaryBackground);
1185
+ border: 1px solid var(--border);
1186
+ border-radius: 4px;
1187
+ }
1188
+ .plan-approve {
1189
+ width: 100%;
1190
+ text-align: left;
1191
+ }
1192
+ .resolved-inputs {
1193
+ margin: 16px 0;
1194
+ }
1195
+ .resolved-input {
1196
+ margin: 8px 0;
1197
+ padding: 12px;
1198
+ background: var(--vscode-textBlockQuote-background);
1199
+ border-radius: 6px;
1200
+ overflow-wrap: anywhere;
1201
+ }
1202
+ .resolved-input strong {
1203
+ font-size: 12px;
1204
+ font-weight: 500;
1205
+ }
1206
+ .resolved-input p {
1207
+ margin: 4px 0 12px;
1208
+ white-space: pre-wrap;
1209
+ }
1210
+ .conversation-dialog {
1211
+ width: min(640px, calc(100vw - 32px));
1212
+ max-height: calc(100vh - 40px);
1213
+ padding: 0;
1214
+ color: inherit;
1215
+ background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
1216
+ border: 1px solid var(--border);
1217
+ border-radius: 8px;
1218
+ box-shadow: 0 8px 24px #0004;
1219
+ }
1220
+ .conversation-dialog::backdrop {
1221
+ background: #0005;
1222
+ }
1223
+ .conversation-dialog > header {
1224
+ display: flex;
1225
+ align-items: center;
1226
+ gap: 8px;
1227
+ padding: 10px 16px;
1228
+ border-bottom: 1px solid var(--border);
1229
+ }
1230
+ .conversation-dialog h2 {
1231
+ flex: 1;
1232
+ min-width: 0;
1233
+ margin: 0;
1234
+ font-size: 14px;
1235
+ }
1236
+ .dialog-body {
1237
+ max-height: calc(100vh - 108px);
1238
+ overflow: auto;
1239
+ padding: 16px;
1240
+ }
1241
+ .action-dialog {
1242
+ width: min(380px, calc(100vw - 32px));
1243
+ }
1244
+ .action-dialog label {
1245
+ display: grid;
1246
+ gap: 8px;
1247
+ }
1248
+ .action-dialog input {
1249
+ width: 100%;
1250
+ min-width: 0;
1251
+ padding: 8px;
1252
+ color: inherit;
1253
+ background: var(--vscode-input-background);
1254
+ border: 1px solid var(--border);
1255
+ border-radius: 4px;
1256
+ }
1257
+ .action-dialog .prompt-navigation {
1258
+ justify-content: flex-end;
1259
+ margin-top: 16px;
1260
+ }
1261
+ .action-dialog .danger {
1262
+ color: var(--vscode-errorForeground);
1263
+ }
1264
+ .permissions-table {
1265
+ width: 100%;
1266
+ border-collapse: collapse;
1267
+ text-align: left;
1268
+ }
1269
+ .permissions-table td,
1270
+ .permissions-table th {
1271
+ padding: 10px 8px;
1272
+ border-bottom: 1px solid var(--border);
1273
+ overflow-wrap: anywhere;
1274
+ }
1275
+ .permissions-table th {
1276
+ font-weight: 500;
1277
+ white-space: nowrap;
1278
+ }
1279
+ .permissions-table td:first-child {
1280
+ width: 65%;
1281
+ }
1282
+ .permissions-table td:not(:first-child) {
1283
+ text-align: center;
1284
+ }
1285
+ .usage-plan {
1286
+ padding: 12px 0;
1287
+ border-top: 1px solid var(--border);
1288
+ }
1289
+ .usage-plan h3 {
1290
+ margin: 0 0 12px;
1291
+ font-size: 13px;
1292
+ }
1293
+ .usage-plan > div {
1294
+ display: grid;
1295
+ gap: 6px;
1296
+ margin: 12px 0;
1297
+ font-size: 12px;
1298
+ }
1299
+ .usage-plan progress {
1300
+ width: 100%;
1301
+ height: 6px;
1302
+ accent-color: var(--vscode-progressBar-background);
1303
+ }
1304
+ .content-search {
1305
+ position: absolute;
1306
+ top: 4px;
1307
+ right: 16px;
1308
+ z-index: 5;
1309
+ display: flex;
1310
+ align-items: center;
1311
+ gap: 4px;
1312
+ padding: 4px;
1313
+ width: min(360px, calc(100% - 32px));
1314
+ background: var(--vscode-editorWidget-background);
1315
+ border: 1px solid var(--border);
1316
+ border-radius: 4px;
1317
+ box-shadow: 0 4px 16px #0003;
1318
+ }
1319
+ .content-search input {
1320
+ min-width: 0;
1321
+ width: 100%;
1322
+ padding: 6px;
1323
+ color: inherit;
1324
+ background: var(--vscode-input-background);
1325
+ border: 0;
1326
+ }
1327
+ .content-search > span {
1328
+ font-size: 11px;
1329
+ color: var(--muted);
1330
+ flex-shrink: 0;
1331
+ }
1332
+ .message-content mark,
1333
+ .resolved-inputs mark {
1334
+ color: inherit;
1335
+ background: var(--vscode-editor-findMatchHighlightBackground, #eab30855);
1336
+ }
1337
+ .message-content .current-match,
1338
+ .resolved-inputs .current-match {
1339
+ outline: 1px solid var(--vscode-editor-findMatchBorder, #eab308);
1340
+ }
1341
+ .message-error,
1342
+ .error {
1343
+ color: var(--vscode-errorForeground);
1344
+ white-space: pre-wrap;
1345
+ overflow-wrap: anywhere;
1346
+ font-size: 12px;
1347
+ line-height: 1.6;
1348
+ }
1349
+ .latest-button {
1350
+ position: absolute;
1351
+ right: 24px;
1352
+ bottom: 12px;
1353
+ width: 30px;
1354
+ height: 30px;
1355
+ border: 1px solid var(--border);
1356
+ background: var(--vscode-editor-background);
1357
+ box-shadow: 0 2px 6px #0002;
1358
+ }
1359
+ .composer-area {
1360
+ flex-shrink: 0;
1361
+ min-width: 0;
1362
+ padding: 8px 28px 14px;
1363
+ }
1364
+ .composer-area > * {
1365
+ width: 100%;
1366
+ max-width: 820px;
1367
+ margin-inline: auto;
1368
+ }
1369
+ .parameter-login {
1370
+ display: flex;
1371
+ align-items: center;
1372
+ gap: 6px;
1373
+ margin-bottom: 8px;
1374
+ padding: 6px 0;
1375
+ border: none;
1376
+ background: transparent;
1377
+ color: var(--vscode-textLink-foreground);
1378
+ font-size: 12px;
1379
+ }
1380
+ .composer {
1381
+ border: 1px solid var(--vscode-input-border, var(--border));
1382
+ border-radius: 24px;
1383
+ background: var(--vscode-input-background);
1384
+ overflow: hidden;
1385
+ box-shadow: 0 2px 8px #00000004;
1386
+ }
1387
+ .composer:focus-within {
1388
+ border-color: var(--vscode-focusBorder);
1389
+ }
1390
+ textarea {
1391
+ display: block;
1392
+ width: 100%;
1393
+ border: none;
1394
+ background: transparent;
1395
+ color: var(--vscode-input-foreground);
1396
+ padding: 17px 18px 6px;
1397
+ resize: none;
1398
+ min-height: 72px;
1399
+ max-height: 240px;
1400
+ line-height: 1.7;
1401
+ }
1402
+ textarea:focus-visible {
1403
+ outline: none;
1404
+ }
1405
+ textarea::placeholder {
1406
+ color: var(--vscode-input-placeholderForeground);
1407
+ }
1408
+ .composer-toolbar {
1409
+ min-height: 48px;
1410
+ display: flex;
1411
+ align-items: center;
1412
+ justify-content: space-between;
1413
+ gap: 8px;
1414
+ padding: 0 14px 12px;
1415
+ }
1416
+ .run-options,
1417
+ .composer-actions {
1418
+ min-width: 0;
1419
+ display: flex;
1420
+ gap: 10px;
1421
+ align-items: center;
1422
+ }
1423
+ .run-options {
1424
+ flex: 1;
1425
+ }
1426
+ .composer-actions {
1427
+ margin-left: auto;
1428
+ }
1429
+ .run-options select {
1430
+ max-width: 220px;
1431
+ font-size: 11px;
1432
+ }
1433
+ .composer-main-fields {
1434
+ display: grid;
1435
+ grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
1436
+ gap: 14px;
1437
+ max-height: 24vh;
1438
+ overflow: auto;
1439
+ padding: 16px 18px 8px;
1440
+ }
1441
+ .parameter-actions {
1442
+ display: flex;
1443
+ align-items: center;
1444
+ min-width: 0;
1445
+ gap: 4px;
1446
+ overflow-x: auto;
1447
+ scrollbar-width: thin;
1448
+ }
1449
+ .param-action {
1450
+ display: inline-flex;
1451
+ flex-shrink: 0;
1452
+ align-items: center;
1453
+ gap: 6px;
1454
+ max-width: 240px;
1455
+ height: 32px;
1456
+ padding: 0 7px;
1457
+ border: none;
1458
+ border-radius: 4px;
1459
+ background: transparent;
1460
+ color: var(--muted);
1461
+ font-size: 12px;
1462
+ }
1463
+ .param-action:hover:not(:disabled),
1464
+ .param-action[aria-expanded=true] {
1465
+ color: var(--vscode-editor-foreground);
1466
+ background: var(--vscode-toolbar-hoverBackground);
1467
+ }
1468
+ .param-action-label {
1469
+ min-width: 0;
1470
+ overflow: hidden;
1471
+ text-overflow: ellipsis;
1472
+ white-space: nowrap;
1473
+ }
1474
+ .param-action .codicon {
1475
+ flex-shrink: 0;
1476
+ font-size: 13px;
1477
+ }
1478
+ .param-action small {
1479
+ font-size: 10px;
1480
+ }
1481
+ .parameter-popover {
1482
+ position: fixed;
1483
+ z-index: 100;
1484
+ color: var(--vscode-editor-foreground);
1485
+ font-size: 12px;
1486
+ }
1487
+ .parameter-popover[data-kind=auxiliary],
1488
+ .quick-panel {
1489
+ border: 1px solid var(--border);
1490
+ border-radius: 8px;
1491
+ background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
1492
+ box-shadow: 0 8px 24px #0003;
1493
+ overflow: auto;
1494
+ }
1495
+ .parameter-popover-heading {
1496
+ display: flex;
1497
+ align-items: center;
1498
+ justify-content: space-between;
1499
+ gap: 8px;
1500
+ min-height: 40px;
1501
+ padding: 6px 12px;
1502
+ border-bottom: 1px solid var(--border);
1503
+ font-weight: 500;
1504
+ overflow-wrap: anywhere;
1505
+ }
1506
+ .parameter-popover-heading strong {
1507
+ font-weight: 500;
1508
+ }
1509
+ .parameter-popover[data-kind=auxiliary] {
1510
+ display: flex;
1511
+ flex-direction: column;
1512
+ overflow: hidden;
1513
+ }
1514
+ .parameter-popover-heading {
1515
+ flex-shrink: 0;
1516
+ }
1517
+ .parameter-popover-fields {
1518
+ display: grid;
1519
+ gap: 18px;
1520
+ min-height: 0;
1521
+ overflow: auto;
1522
+ padding: 16px;
1523
+ }
1524
+ .parameter-popover[data-kind=quick] {
1525
+ display: grid;
1526
+ grid-template-columns: minmax(0, 1fr);
1527
+ gap: 8px;
1528
+ align-items: end;
1529
+ }
1530
+ .parameter-popover[data-kind=quick]:has(.quick-detail):not([data-compact=true]) {
1531
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1532
+ }
1533
+ .parameter-popover[data-compact=true] .quick-menu:has(+ .quick-detail) {
1534
+ display: none;
1535
+ }
1536
+ .parameter-popover[data-detail-side=left]:not([data-compact=true]) .quick-detail {
1537
+ grid-column: 1;
1538
+ grid-row: 1;
1539
+ }
1540
+ .parameter-popover[data-detail-side=left]:not([data-compact=true]) .quick-menu {
1541
+ grid-column: 2;
1542
+ grid-row: 1;
1543
+ }
1544
+ .quick-panel {
1545
+ min-width: 0;
1546
+ max-height: inherit;
1547
+ }
1548
+ .quick-param-row,
1549
+ .quick-reset,
1550
+ .quick-detail-heading,
1551
+ .quick-option-row {
1552
+ display: flex;
1553
+ align-items: center;
1554
+ gap: 8px;
1555
+ width: 100%;
1556
+ min-width: 0;
1557
+ min-height: 38px;
1558
+ padding: 9px 12px;
1559
+ border: none;
1560
+ background: transparent;
1561
+ text-align: left;
1562
+ font-size: 12px;
1563
+ }
1564
+ .quick-param-row:hover:not(:disabled),
1565
+ .quick-reset:hover:not(:disabled),
1566
+ .quick-detail-heading:hover,
1567
+ .quick-option-row:hover:not(:disabled) {
1568
+ background: var(--vscode-list-hoverBackground);
1569
+ }
1570
+ .quick-param-row[aria-expanded=true] {
1571
+ background: var(--vscode-list-inactiveSelectionBackground);
1572
+ }
1573
+ .quick-param-row > span:first-child {
1574
+ overflow-wrap: anywhere;
1575
+ }
1576
+ .quick-param-value {
1577
+ margin-left: auto;
1578
+ color: var(--muted);
1579
+ overflow: hidden;
1580
+ white-space: nowrap;
1581
+ text-overflow: ellipsis;
1582
+ max-width: 60%;
1583
+ }
1584
+ .quick-param-row .codicon,
1585
+ .quick-reset .codicon {
1586
+ flex-shrink: 0;
1587
+ color: var(--muted);
1588
+ font-size: 13px;
1589
+ }
1590
+ .quick-reset {
1591
+ border-top: 1px solid var(--border);
1592
+ color: var(--muted);
1593
+ justify-content: space-between;
1594
+ }
1595
+ .quick-detail-heading {
1596
+ border-bottom: 1px solid var(--border);
1597
+ font-weight: 500;
1598
+ }
1599
+ .quick-detail {
1600
+ display: flex;
1601
+ flex-direction: column;
1602
+ }
1603
+ .quick-options-list {
1604
+ overflow: auto;
1605
+ min-height: 0;
1606
+ }
1607
+ .quick-option-check {
1608
+ display: inline-flex;
1609
+ flex-shrink: 0;
1610
+ width: 16px;
1611
+ }
1612
+ .quick-option-copy {
1613
+ min-width: 0;
1614
+ display: flex;
1615
+ flex-direction: column;
1616
+ gap: 4px;
1617
+ overflow-wrap: anywhere;
1618
+ }
1619
+ .quick-option-copy small {
1620
+ font-size: 12px;
1621
+ color: var(--muted);
1622
+ line-height: 1.5;
1623
+ }
1624
+ .send-button {
1625
+ width: 32px;
1626
+ height: 32px;
1627
+ display: flex;
1628
+ align-items: center;
1629
+ justify-content: center;
1630
+ border: none;
1631
+ border-radius: 50%;
1632
+ background: var(--muted, #888);
1633
+ color: var(--vscode-editor-background, #fff);
1634
+ flex-shrink: 0;
1635
+ }
1636
+ .send-button:hover:not(:disabled) {
1637
+ background: color-mix(in srgb, var(--vscode-editor-foreground) 80%, var(--vscode-editor-background));
1638
+ }
1639
+ .send-button.stop {
1640
+ background: var(--muted, #888);
1641
+ }
1642
+ .error {
1643
+ margin: 0 0 10px;
1644
+ }
1645
+ @keyframes spin {
1646
+ to {
1647
+ transform: rotate(360deg);
1648
+ }
1649
+ }
1650
+ @media (prefers-reduced-motion: reduce) {
1651
+ *,
1652
+ *::before {
1653
+ animation: none !important;
1654
+ transition: none !important;
1655
+ }
1656
+ }
1657
+ @media (max-width: 900px) {
1658
+ #app.menu-open {
1659
+ grid-template-columns: 248px minmax(0, 1fr);
1660
+ }
1661
+ .transcript {
1662
+ padding: 18px 22px 8px;
1663
+ }
1664
+ .composer-area {
1665
+ padding: 8px 22px 12px;
1666
+ }
1667
+ }
1668
+ @media (max-width: 680px) {
1669
+ #app.menu-open {
1670
+ grid-template-areas: "menu" "main";
1671
+ grid-template-columns: minmax(0, 1fr);
1672
+ grid-template-rows: auto minmax(0, 1fr);
1673
+ }
1674
+ .menu-open .toolbar {
1675
+ display: none;
1676
+ }
1677
+ .toolbar {
1678
+ padding: 8px 12px;
1679
+ gap: 6px;
1680
+ }
1681
+ .project-title {
1682
+ flex: 1;
1683
+ }
1684
+ .project-name {
1685
+ display: none;
1686
+ }
1687
+ .toolbar-actions {
1688
+ gap: 1px;
1689
+ }
1690
+ .project-menu {
1691
+ max-height: min(220px, 36vh);
1692
+ padding-bottom: 6px;
1693
+ border-right: none;
1694
+ border-bottom: 1px solid var(--border);
1695
+ background: var(--vscode-editor-background);
1696
+ }
1697
+ .menu-heading {
1698
+ min-height: 40px;
1699
+ padding: 6px 12px;
1700
+ font-size: 13px;
1701
+ }
1702
+ .project-menu .session {
1703
+ height: 34px;
1704
+ }
1705
+ .project-menu .all-history {
1706
+ padding: 6px 18px;
1707
+ }
1708
+ #hide-menu .codicon {
1709
+ transform: rotate(90deg);
1710
+ }
1711
+ .transcript {
1712
+ padding: 16px 18px 6px;
1713
+ }
1714
+ .composer-area {
1715
+ padding: 8px 18px 10px;
1716
+ }
1717
+ }
1718
+ @media (max-width: 420px) {
1719
+ .toolbar {
1720
+ padding: 8px;
1721
+ }
1722
+ .project-title {
1723
+ gap: 2px;
1724
+ }
1725
+ h1 {
1726
+ font-size: 13px;
1727
+ }
1728
+ .message {
1729
+ margin-bottom: 22px;
1730
+ }
1731
+ .user .message-body {
1732
+ max-width: 92%;
1733
+ }
1734
+ .transcript {
1735
+ padding: 14px 12px 6px;
1736
+ }
1737
+ .composer-area {
1738
+ padding: 8px 12px 10px;
1739
+ }
1740
+ .user .message-content {
1741
+ padding: 10px 12px;
1742
+ }
1743
+ .run-options select {
1744
+ max-width: 120px;
1745
+ }
1746
+ .param-action {
1747
+ max-width: 190px;
1748
+ }
1749
+ }
1750
+
1751
+ /* src/web/ui/kanban-style.css */
1752
+ #app.kanban-app.menu-open {
1753
+ grid-template-areas: "menu toolbar" "menu main";
1754
+ grid-template-columns: 280px minmax(0, 1fr);
1755
+ grid-template-rows: 52px minmax(0, 1fr);
1756
+ }
1757
+ #app.kanban-app:not(.menu-open) {
1758
+ grid-template-areas: "toolbar" "main";
1759
+ grid-template-columns: minmax(0, 1fr);
1760
+ }
1761
+ .kanban-app main {
1762
+ min-width: 0;
1763
+ min-height: 0;
1764
+ overflow: hidden;
1765
+ display: flex;
1766
+ flex-direction: column;
1767
+ padding: 0;
1768
+ }
1769
+ .kanban-app .toolbar {
1770
+ display: flex;
1771
+ }
1772
+ .kanban-app .project-menu {
1773
+ min-height: 0;
1774
+ overflow: hidden;
1775
+ padding-bottom: 0;
1776
+ }
1777
+ .kanban-app:not(.menu-open) > .project-menu {
1778
+ display: none;
1779
+ }
1780
+ .kanban-app .project-title {
1781
+ min-width: 60px;
1782
+ flex: 1;
1783
+ }
1784
+ .kanban-app .toolbar-actions {
1785
+ gap: 4px;
1786
+ flex-shrink: 0;
1787
+ }
1788
+ .kanban-modes {
1789
+ display: flex;
1790
+ flex-shrink: 0;
1791
+ align-items: center;
1792
+ gap: 2px;
1793
+ border-right: 1px solid var(--vscode-panel-border);
1794
+ padding-right: 6px;
1795
+ }
1796
+ .kanban-modes .icon-button[aria-pressed=true] {
1797
+ background: var(--vscode-list-activeSelectionBackground);
1798
+ color: var(--vscode-list-activeSelectionForeground);
1799
+ }
1800
+ .kanban-app #configuration-editor {
1801
+ flex: 1;
1802
+ min-height: 0;
1803
+ overflow: auto;
1804
+ padding: 0 14px 16px;
1805
+ }
1806
+ .kanban-configuration-controls {
1807
+ display: flex;
1808
+ gap: 4px;
1809
+ align-items: center;
1810
+ padding: 4px 0 14px;
1811
+ }
1812
+ .kanban-configuration-controls select {
1813
+ flex: 1;
1814
+ min-width: 0;
1815
+ width: 100%;
1816
+ height: 32px;
1817
+ padding: 0 6px;
1818
+ background: var(--vscode-input-background);
1819
+ color: var(--vscode-input-foreground);
1820
+ border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
1821
+ border-radius: 4px;
1822
+ }
1823
+ .kanban-app #kanban-fields {
1824
+ display: flex;
1825
+ flex-direction: column;
1826
+ gap: 16px;
1827
+ }
1828
+ .kanban-app .field-control {
1829
+ width: 100%;
1830
+ min-width: 0;
1831
+ max-width: 100%;
1832
+ }
1833
+ .kanban-app .field-label {
1834
+ font-size: 12px;
1835
+ margin-bottom: 6px;
1836
+ }
1837
+ .kanban-app .field-choices {
1838
+ display: flex;
1839
+ flex-wrap: wrap;
1840
+ gap: 10px;
1841
+ }
1842
+ .kanban-app .field-choices label {
1843
+ display: inline-flex;
1844
+ align-items: center;
1845
+ gap: 4px;
1846
+ }
1847
+ .kanban-app .option-description {
1848
+ display: block;
1849
+ margin-top: 5px;
1850
+ font-size: 11px;
1851
+ line-height: 1.5;
1852
+ color: var(--vscode-descriptionForeground);
1853
+ }
1854
+ .kanban-app .boolean-field {
1855
+ justify-content: space-between;
1856
+ }
1857
+ .kanban-app .param-file-summary {
1858
+ display: block;
1859
+ overflow-wrap: anywhere;
1860
+ font-size: 12px;
1861
+ }
1862
+ .kanban-app .param-file-row {
1863
+ display: flex;
1864
+ align-items: center;
1865
+ gap: 4px;
1866
+ margin-bottom: 4px;
1867
+ }
1868
+ .kanban-app .param-file-row > span {
1869
+ flex: 1;
1870
+ min-width: 0;
1871
+ }
1872
+ .kanban-app #save-error {
1873
+ display: flex;
1874
+ align-items: center;
1875
+ gap: 6px;
1876
+ margin: 0 0 12px;
1877
+ }
1878
+ .kanban-app #save-error > span {
1879
+ min-width: 0;
1880
+ flex: 1;
1881
+ overflow-wrap: anywhere;
1882
+ }
1883
+ .kanban-app .error {
1884
+ margin: 8px 12px;
1885
+ flex-shrink: 0;
1886
+ }
1887
+ .kanban-warning {
1888
+ padding: 8px 14px;
1889
+ border-bottom: 1px solid var(--vscode-panel-border);
1890
+ font-size: 12px;
1891
+ color: var(--vscode-editorWarning-foreground);
1892
+ flex-shrink: 0;
1893
+ }
1894
+ #preview-stage {
1895
+ flex: 1;
1896
+ min-height: 0;
1897
+ min-width: 0;
1898
+ position: relative;
1899
+ display: flex;
1900
+ align-items: center;
1901
+ justify-content: center;
1902
+ overflow: hidden;
1903
+ }
1904
+ #preview-viewport {
1905
+ position: relative;
1906
+ width: 100%;
1907
+ height: 100%;
1908
+ min-width: 0;
1909
+ flex-shrink: 0;
1910
+ }
1911
+ #kanban-preview {
1912
+ display: block;
1913
+ border: 0;
1914
+ transform-origin: top left;
1915
+ background: var(--vscode-editor-background);
1916
+ }
1917
+ .kanban-app[data-preview-mode=fullscreen] #preview-viewport {
1918
+ width: 100%;
1919
+ height: 100%;
1920
+ }
1921
+ .kanban-app:not([data-preview-mode=fullscreen]) #preview-viewport {
1922
+ outline: 1px solid var(--vscode-panel-border);
1923
+ box-shadow: 0 4px 20px #0002;
1924
+ }
1925
+ .kanban-app:not([data-preview-mode=fullscreen]) #preview-stage {
1926
+ background: var(--vscode-sideBar-background);
1927
+ }
1928
+ .kanban-resize {
1929
+ position: absolute;
1930
+ right: 0;
1931
+ bottom: 0;
1932
+ width: 22px;
1933
+ height: 22px;
1934
+ border: 1px solid var(--vscode-panel-border);
1935
+ background: var(--vscode-editor-background);
1936
+ color: var(--vscode-foreground);
1937
+ padding: 2px;
1938
+ cursor: nwse-resize;
1939
+ touch-action: none;
1940
+ }
1941
+ .kanban-status {
1942
+ position: absolute;
1943
+ inset: 0;
1944
+ display: flex;
1945
+ align-items: center;
1946
+ justify-content: center;
1947
+ gap: 10px;
1948
+ background: var(--vscode-editor-background);
1949
+ color: var(--vscode-descriptionForeground);
1950
+ font-size: 13px;
1951
+ }
1952
+ .kanban-status[data-error=false] > .codicon {
1953
+ animation: spin 1s linear infinite;
1954
+ }
1955
+ #preview-offline {
1956
+ position: absolute;
1957
+ inset: 0;
1958
+ cursor: not-allowed;
1959
+ background: transparent;
1960
+ }
1961
+ .configuration-command-list {
1962
+ display: flex;
1963
+ flex-direction: column;
1964
+ gap: 4px;
1965
+ }
1966
+ .configuration-command-list button {
1967
+ display: flex;
1968
+ align-items: center;
1969
+ gap: 10px;
1970
+ background: transparent;
1971
+ border: 0;
1972
+ color: var(--vscode-foreground);
1973
+ padding: 10px;
1974
+ text-align: left;
1975
+ border-radius: 4px;
1976
+ }
1977
+ .configuration-command-list button:hover {
1978
+ background: var(--vscode-list-hoverBackground);
1979
+ }
1980
+ #dimensions-dialog {
1981
+ max-width: 360px;
1982
+ }
1983
+ #dimensions-dialog form {
1984
+ display: flex;
1985
+ flex-direction: column;
1986
+ gap: 14px;
1987
+ }
1988
+ #dimensions-dialog label {
1989
+ display: flex;
1990
+ align-items: center;
1991
+ justify-content: space-between;
1992
+ gap: 14px;
1993
+ }
1994
+ #dimensions-dialog input {
1995
+ width: 150px;
1996
+ min-width: 0;
1997
+ padding: 7px;
1998
+ border: 1px solid var(--vscode-panel-border);
1999
+ color: var(--vscode-input-foreground);
2000
+ background: var(--vscode-input-background);
2001
+ }
2002
+ .dimension-actions {
2003
+ display: flex;
2004
+ justify-content: flex-end;
2005
+ gap: 8px;
2006
+ }
2007
+ .dimension-actions button,
2008
+ #invoke-method {
2009
+ display: flex;
2010
+ align-items: center;
2011
+ justify-content: center;
2012
+ gap: 6px;
2013
+ padding: 7px 12px;
2014
+ border-radius: 4px;
2015
+ border: 1px solid var(--vscode-panel-border);
2016
+ color: var(--vscode-foreground);
2017
+ background: var(--vscode-button-secondaryBackground);
2018
+ }
2019
+ #methods-dialog select,
2020
+ #method-args {
2021
+ width: 100%;
2022
+ padding: 8px;
2023
+ background: var(--vscode-input-background);
2024
+ color: var(--vscode-input-foreground);
2025
+ border: 1px solid var(--vscode-panel-border);
2026
+ border-radius: 4px;
2027
+ }
2028
+ #method-description {
2029
+ font-size: 12px;
2030
+ line-height: 1.6;
2031
+ color: var(--vscode-descriptionForeground);
2032
+ }
2033
+ #method-schema,
2034
+ #method-result {
2035
+ font-size: 12px;
2036
+ white-space: pre-wrap;
2037
+ overflow-wrap: anywhere;
2038
+ }
2039
+ .method-input {
2040
+ display: flex;
2041
+ flex-direction: column;
2042
+ gap: 7px;
2043
+ margin-bottom: 14px;
2044
+ font-size: 12px;
2045
+ }
2046
+ @media (max-width: 820px) {
2047
+ #app.kanban-app.menu-open {
2048
+ grid-template-areas: "toolbar" "menu" "main";
2049
+ grid-template-columns: minmax(0, 1fr);
2050
+ grid-template-rows: auto auto minmax(0, 1fr);
2051
+ }
2052
+ #app.kanban-app:not(.menu-open) {
2053
+ grid-template-areas: "toolbar" "main";
2054
+ grid-template-rows: auto minmax(0, 1fr);
2055
+ }
2056
+ .kanban-app .project-menu {
2057
+ border-right: 0;
2058
+ border-bottom: 1px solid var(--vscode-panel-border);
2059
+ max-height: min(46vh, 340px);
2060
+ }
2061
+ .kanban-app .menu-heading {
2062
+ min-height: 42px;
2063
+ }
2064
+ .kanban-app .toolbar {
2065
+ min-height: 50px;
2066
+ flex-wrap: wrap;
2067
+ height: auto;
2068
+ gap: 6px;
2069
+ padding: 6px 10px;
2070
+ }
2071
+ .kanban-app .toolbar-actions {
2072
+ margin-left: auto;
2073
+ max-width: 100%;
2074
+ flex-wrap: wrap;
2075
+ }
2076
+ .kanban-app .project-title h1 {
2077
+ font-size: 14px;
2078
+ }
2079
+ .kanban-app .web-account-button {
2080
+ min-height: 38px;
2081
+ }
2082
+ }
2083
+ @media (max-width: 480px) {
2084
+ .kanban-app .toolbar > .project-title {
2085
+ flex-basis: 100%;
2086
+ }
2087
+ .kanban-app .toolbar-actions {
2088
+ width: 100%;
2089
+ justify-content: flex-end;
2090
+ }
2091
+ .kanban-app .project-menu {
2092
+ max-height: 42vh;
2093
+ }
2094
+ }
2095
+
2096
+ /* src/web/ui/account.css */
2097
+ .web-account {
2098
+ display: flex;
2099
+ align-items: center;
2100
+ gap: 10px;
2101
+ width: calc(100% - 16px);
2102
+ min-width: 0;
2103
+ flex-shrink: 0;
2104
+ margin: auto 8px 8px;
2105
+ padding: 10px;
2106
+ min-height: 44px;
2107
+ border: none;
2108
+ border-top: 1px solid var(--border);
2109
+ border-radius: 4px;
2110
+ background: transparent;
2111
+ text-align: left;
2112
+ }
2113
+ .web-account-name {
2114
+ min-width: 0;
2115
+ overflow: hidden;
2116
+ text-overflow: ellipsis;
2117
+ white-space: nowrap;
2118
+ }
2119
+ .web-account:hover {
2120
+ background: var(--vscode-toolbar-hoverBackground);
2121
+ }
2122
+ .web-avatar,
2123
+ .account-avatar {
2124
+ display: grid;
2125
+ place-items: center;
2126
+ width: 24px;
2127
+ height: 24px;
2128
+ flex-shrink: 0;
2129
+ position: relative;
2130
+ overflow: hidden;
2131
+ border-radius: 50%;
2132
+ background: var(--vscode-button-secondaryBackground);
2133
+ color: var(--vscode-button-secondaryForeground);
2134
+ }
2135
+ .web-avatar img,
2136
+ .account-avatar img {
2137
+ position: absolute;
2138
+ inset: 0;
2139
+ width: 100%;
2140
+ height: 100%;
2141
+ object-fit: cover;
2142
+ }
2143
+ .account-dialog {
2144
+ width: min(460px, calc(100vw - 32px));
2145
+ }
2146
+ .account-body {
2147
+ padding: 24px;
2148
+ font-size: 13px;
2149
+ line-height: 1.6;
2150
+ }
2151
+ .account-body #account-status {
2152
+ margin-bottom: 24px;
2153
+ color: var(--muted);
2154
+ }
2155
+ .account-body #account-status.connected {
2156
+ color: var(--vscode-testing-iconPassed, #16825d);
2157
+ }
2158
+ .account-body form {
2159
+ display: grid;
2160
+ gap: 8px;
2161
+ }
2162
+ .account-body form > label:not(:first-child) {
2163
+ margin-top: 12px;
2164
+ }
2165
+ .account-body input {
2166
+ width: 100%;
2167
+ height: 36px;
2168
+ padding: 6px 10px;
2169
+ }
2170
+ .account-password {
2171
+ position: relative;
2172
+ }
2173
+ .account-password input {
2174
+ padding-right: 40px;
2175
+ }
2176
+ .account-password .icon-button {
2177
+ position: absolute;
2178
+ right: 2px;
2179
+ top: 2px;
2180
+ width: 32px;
2181
+ height: 32px;
2182
+ }
2183
+ .account-actions {
2184
+ display: flex;
2185
+ flex-wrap: wrap;
2186
+ align-items: center;
2187
+ gap: 10px;
2188
+ margin-top: 16px;
2189
+ }
2190
+ .account-primary,
2191
+ .account-secondary {
2192
+ display: inline-flex;
2193
+ align-items: center;
2194
+ justify-content: center;
2195
+ gap: 8px;
2196
+ min-height: 34px;
2197
+ padding: 6px 12px;
2198
+ border: none;
2199
+ border-radius: 4px;
2200
+ }
2201
+ .account-primary {
2202
+ background: var(--vscode-button-background);
2203
+ color: var(--vscode-button-foreground);
2204
+ }
2205
+ .account-primary:hover:not(:disabled) {
2206
+ background: var(--vscode-button-hoverBackground, var(--vscode-button-background));
2207
+ }
2208
+ .account-secondary {
2209
+ background: var(--vscode-button-secondaryBackground);
2210
+ color: var(--vscode-button-secondaryForeground);
2211
+ }
2212
+ .account-secondary:hover:not(:disabled) {
2213
+ background: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
2214
+ }
2215
+ .account-identity {
2216
+ display: flex;
2217
+ align-items: center;
2218
+ gap: 16px;
2219
+ padding-bottom: 24px;
2220
+ border-bottom: 1px solid var(--border);
2221
+ }
2222
+ .account-identity > div {
2223
+ min-width: 0;
2224
+ }
2225
+ .account-avatar {
2226
+ width: 48px;
2227
+ height: 48px;
2228
+ }
2229
+ .account-avatar > .codicon {
2230
+ font-size: 28px;
2231
+ }
2232
+ .account-identity h3 {
2233
+ margin: 0;
2234
+ font-size: 15px;
2235
+ font-weight: 500;
2236
+ overflow-wrap: anywhere;
2237
+ }
2238
+ .account-muted {
2239
+ color: var(--muted);
2240
+ overflow-wrap: anywhere;
2241
+ }
2242
+ .account-body dl {
2243
+ display: grid;
2244
+ grid-template-columns: auto minmax(0, 1fr);
2245
+ gap: 12px 16px;
2246
+ margin: 24px 0;
2247
+ }
2248
+ .account-body dt {
2249
+ color: var(--muted);
2250
+ }
2251
+ .account-body dd {
2252
+ margin: 0;
2253
+ overflow-wrap: anywhere;
2254
+ }
2255
+ .account-body #account-error {
2256
+ margin-top: 18px;
2257
+ color: var(--vscode-errorForeground);
2258
+ overflow-wrap: anywhere;
2259
+ }
2260
+ @media (max-width: 680px) {
2261
+ .project-menu {
2262
+ position: relative;
2263
+ }
2264
+ .project-menu .menu-heading {
2265
+ padding-right: 52px;
2266
+ }
2267
+ .web-account {
2268
+ position: absolute;
2269
+ right: 10px;
2270
+ top: 6px;
2271
+ margin: 0;
2272
+ width: 28px;
2273
+ height: 28px;
2274
+ min-height: 28px;
2275
+ padding: 2px;
2276
+ border: 0;
2277
+ }
2278
+ .web-account-name {
2279
+ display: none;
2280
+ }
2281
+ }
2282
+ @media (max-width: 420px) {
2283
+ .account-body {
2284
+ padding: 18px;
2285
+ }
2286
+ }
2287
+
2288
+ /* src/web/ui/connection.css */
2289
+ .connection-banner {
2290
+ display: flex;
2291
+ align-items: center;
2292
+ gap: 10px;
2293
+ flex-shrink: 0;
2294
+ min-width: 0;
2295
+ padding: 12px 20px;
2296
+ border-bottom: 1px solid var(--border);
2297
+ background: var(--vscode-sideBar-background);
2298
+ color: var(--muted);
2299
+ font-size: 12px;
2300
+ line-height: 1.6;
2301
+ }
2302
+ .connection-icon {
2303
+ display: grid;
2304
+ place-items: center;
2305
+ width: 20px;
2306
+ height: 20px;
2307
+ flex-shrink: 0;
2308
+ }
2309
+ .connection-banner[data-status=connecting] .connection-icon .codicon,
2310
+ .connection-banner[data-status=reconnecting] .connection-icon .codicon {
2311
+ animation: spin 1.2s linear infinite;
2312
+ }
2313
+ .connection-copy {
2314
+ display: flex;
2315
+ flex: 1;
2316
+ flex-wrap: wrap;
2317
+ align-items: baseline;
2318
+ gap: 2px 10px;
2319
+ min-width: 0;
2320
+ overflow-wrap: anywhere;
2321
+ }
2322
+ .connection-copy strong {
2323
+ font-weight: 500;
2324
+ color: var(--vscode-editor-foreground);
2325
+ }
2326
+ .connection-retry {
2327
+ display: inline-flex;
2328
+ align-items: center;
2329
+ gap: 6px;
2330
+ flex-shrink: 0;
2331
+ min-height: 30px;
2332
+ padding: 4px 8px;
2333
+ border: none;
2334
+ border-radius: 4px;
2335
+ background: transparent;
2336
+ color: var(--vscode-editor-foreground);
2337
+ font-size: 12px;
2338
+ }
2339
+ .connection-retry:hover:not(:disabled) {
2340
+ background: var(--vscode-toolbar-hoverBackground);
2341
+ }
2342
+ @media (max-width: 680px) {
2343
+ .connection-banner {
2344
+ padding: 10px 12px;
2345
+ align-items: flex-start;
2346
+ }
2347
+ .connection-copy {
2348
+ flex-direction: column;
2349
+ align-items: flex-start;
2350
+ }
2351
+ .connection-retry {
2352
+ margin-top: -3px;
2353
+ }
2354
+ }