@toby1123yjh/test-cli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1168 @@
1
+ /* Reset */
2
+ *,
3
+ *::before,
4
+ *::after {
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ html,
9
+ body {
10
+ height: 100%;
11
+ }
12
+
13
+ body {
14
+ margin: 0;
15
+ padding: 0;
16
+ font-family:
17
+ system-ui,
18
+ -apple-system,
19
+ "Segoe UI",
20
+ Roboto,
21
+ Helvetica,
22
+ Arial,
23
+ "Apple Color Emoji",
24
+ "Segoe UI Emoji";
25
+ line-height: 1.5;
26
+ background: var(--bg-primary);
27
+ color: var(--text-primary);
28
+ }
29
+
30
+ /* Layout */
31
+ .report-container {
32
+ display: grid;
33
+ grid-template-columns: 280px 1fr;
34
+ height: 100vh;
35
+ }
36
+
37
+ .sidebar {
38
+ width: 280px;
39
+ height: 100vh;
40
+ position: fixed;
41
+ top: 0;
42
+ left: 0;
43
+ overflow-y: auto;
44
+ background: var(--bg-secondary);
45
+ border-right: 1px solid var(--border);
46
+ padding: 12px;
47
+ }
48
+
49
+ .main-content {
50
+ grid-column: 2;
51
+ min-width: 0;
52
+ height: 100vh;
53
+ overflow-y: auto;
54
+ padding: 16px;
55
+ }
56
+
57
+ .sidebar-backdrop {
58
+ display: none;
59
+ }
60
+
61
+ .sidebar-toggle {
62
+ display: none;
63
+ width: 36px;
64
+ height: 36px;
65
+ border: 1px solid var(--border);
66
+ border-radius: 12px;
67
+ background: var(--bg-secondary);
68
+ color: var(--text-primary);
69
+ cursor: pointer;
70
+ align-items: center;
71
+ justify-content: center;
72
+ }
73
+
74
+ .sidebar-toggle:hover {
75
+ border-color: rgba(var(--accent-rgb), 0.4);
76
+ }
77
+
78
+ .sidebar-toggle:focus-visible {
79
+ outline: none;
80
+ box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
81
+ }
82
+
83
+ .sidebar-toggle__icon {
84
+ font-size: 18px;
85
+ line-height: 1;
86
+ }
87
+
88
+ .report-header__title-row {
89
+ display: flex;
90
+ align-items: center;
91
+ gap: 10px;
92
+ min-width: 0;
93
+ }
94
+
95
+ /* Sidebar */
96
+ .sidebar-search__wrapper {
97
+ margin-bottom: 12px;
98
+ }
99
+
100
+ .sidebar-search {
101
+ width: 100%;
102
+ border: 1px solid var(--border);
103
+ border-radius: 10px;
104
+ padding: 10px 12px;
105
+ font-size: 14px;
106
+ background: var(--bg-primary);
107
+ color: var(--text-primary);
108
+ outline: none;
109
+ }
110
+
111
+ .sidebar-search:focus {
112
+ border-color: var(--accent);
113
+ box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
114
+ }
115
+
116
+ .sidebar-modules {
117
+ display: grid;
118
+ gap: 10px;
119
+ }
120
+
121
+ .module-group {
122
+ background: var(--bg-primary);
123
+ border: 1px solid var(--border);
124
+ border-radius: var(--radius);
125
+ overflow: hidden;
126
+ }
127
+
128
+ .module-group__header {
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 8px;
132
+ padding: 10px 10px;
133
+ border-bottom: 1px solid var(--border);
134
+ }
135
+
136
+ .module-group__title {
137
+ margin: 0;
138
+ font-size: 13px;
139
+ font-weight: 650;
140
+ color: var(--text-primary);
141
+ min-width: 0;
142
+ overflow: hidden;
143
+ text-overflow: ellipsis;
144
+ white-space: nowrap;
145
+ }
146
+
147
+ .toggle-btn {
148
+ flex: 0 0 auto;
149
+ width: 26px;
150
+ height: 26px;
151
+ border: 1px solid var(--border);
152
+ border-radius: 8px;
153
+ background: var(--bg-secondary);
154
+ color: var(--text-secondary);
155
+ cursor: pointer;
156
+ line-height: 1;
157
+ display: inline-flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ }
161
+
162
+ .toggle-btn:hover {
163
+ color: var(--text-primary);
164
+ border-color: #d1d5db;
165
+ }
166
+
167
+ .module-group__cases {
168
+ list-style: none;
169
+ margin: 0;
170
+ padding: 6px;
171
+ display: grid;
172
+ gap: 2px;
173
+ }
174
+
175
+ .case-item {
176
+ margin: 0;
177
+ border-radius: 10px;
178
+ }
179
+
180
+ .case-link {
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 8px;
184
+ padding: 8px 10px;
185
+ color: var(--text-primary);
186
+ text-decoration: none;
187
+ border-radius: 10px;
188
+ }
189
+
190
+ .case-link:hover {
191
+ background: rgba(var(--accent-rgb), 0.08);
192
+ }
193
+
194
+ .case-status {
195
+ flex: 0 0 auto;
196
+ width: 18px;
197
+ text-align: center;
198
+ }
199
+
200
+ .case-name {
201
+ flex: 1 1 auto;
202
+ min-width: 0;
203
+ overflow: hidden;
204
+ text-overflow: ellipsis;
205
+ white-space: nowrap;
206
+ font-size: 13px;
207
+ }
208
+
209
+ .case-item.active > .case-link {
210
+ background: rgba(var(--accent-rgb), 0.16);
211
+ box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.25);
212
+ }
213
+
214
+ .module-group.collapsed .module-group__cases {
215
+ display: none;
216
+ }
217
+
218
+ /* Header */
219
+ .report-header {
220
+ display: flex;
221
+ align-items: flex-start;
222
+ justify-content: space-between;
223
+ gap: 16px;
224
+ padding: 16px;
225
+ margin: -16px -16px 16px;
226
+ background: var(--bg-primary);
227
+ border-bottom: 1px solid var(--border);
228
+ }
229
+
230
+ .report-header__title {
231
+ margin: 0;
232
+ font-size: 18px;
233
+ font-weight: 650;
234
+ letter-spacing: -0.01em;
235
+ }
236
+
237
+ .report-header__meta {
238
+ margin-top: 6px;
239
+ font-size: 12px;
240
+ color: var(--text-secondary);
241
+ display: flex;
242
+ align-items: center;
243
+ gap: 8px;
244
+ }
245
+
246
+ .report-header__right {
247
+ display: flex;
248
+ align-items: center;
249
+ gap: 8px;
250
+ }
251
+
252
+ .theme-toggle {
253
+ width: 36px;
254
+ height: 36px;
255
+ border: 1px solid var(--border);
256
+ border-radius: 12px;
257
+ background: var(--bg-secondary);
258
+ color: var(--text-primary);
259
+ cursor: pointer;
260
+ display: inline-flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+ }
264
+
265
+ .theme-toggle:hover {
266
+ border-color: rgba(var(--accent-rgb), 0.4);
267
+ }
268
+
269
+ .theme-toggle:focus-visible {
270
+ outline: none;
271
+ box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
272
+ }
273
+
274
+ .toggle-btn:focus-visible,
275
+ .case-link:focus-visible,
276
+ .tab-btn:focus-visible,
277
+ .request-toggle:focus-visible,
278
+ .request-filter:focus-visible,
279
+ .console-level-filter:focus-visible,
280
+ .failed-case-link:focus-visible {
281
+ outline: none;
282
+ box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
283
+ }
284
+
285
+ .toggle-btn:focus-visible,
286
+ .tab-btn:focus-visible,
287
+ .request-toggle:focus-visible,
288
+ .request-filter:focus-visible,
289
+ .console-level-filter:focus-visible,
290
+ .failed-case-link:focus-visible {
291
+ border-color: rgba(var(--accent-rgb), 0.4);
292
+ }
293
+
294
+ .case-link:focus-visible {
295
+ background: rgba(var(--accent-rgb), 0.08);
296
+ }
297
+
298
+ .theme-toggle__icon {
299
+ font-size: 16px;
300
+ line-height: 1;
301
+ }
302
+
303
+ @media (max-width: 900px) {
304
+ .report-container {
305
+ grid-template-columns: 1fr;
306
+ }
307
+
308
+ .main-content {
309
+ grid-column: 1;
310
+ }
311
+
312
+ .sidebar {
313
+ width: min(320px, 86vw);
314
+ transform: translateX(-110%);
315
+ transition: transform 180ms ease;
316
+ z-index: 1001;
317
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
318
+ }
319
+
320
+ html.sidebar-open .sidebar {
321
+ transform: translateX(0);
322
+ }
323
+
324
+ .sidebar-backdrop {
325
+ position: fixed;
326
+ inset: 0;
327
+ background: rgba(0, 0, 0, 0.35);
328
+ z-index: 1000;
329
+ }
330
+
331
+ html.sidebar-open .sidebar-backdrop {
332
+ display: block;
333
+ }
334
+
335
+ .sidebar-toggle {
336
+ display: inline-flex;
337
+ }
338
+ }
339
+
340
+ /* Overview */
341
+ .overview-section {
342
+ display: grid;
343
+ gap: 16px;
344
+ }
345
+
346
+ .overview-section__stats {
347
+ list-style: none;
348
+ margin: 0;
349
+ padding: 0;
350
+ display: grid;
351
+ grid-template-columns: repeat(4, minmax(0, 1fr));
352
+ gap: 12px;
353
+ }
354
+
355
+ .stat-card {
356
+ background: var(--bg-primary);
357
+ border: 1px solid var(--border);
358
+ border-radius: var(--radius);
359
+ box-shadow: var(--shadow-sm);
360
+ padding: 12px 14px;
361
+ }
362
+
363
+ .stat-label {
364
+ font-size: 12px;
365
+ color: var(--text-secondary);
366
+ }
367
+
368
+ .stat-value {
369
+ margin-top: 6px;
370
+ font-size: 22px;
371
+ font-weight: 650;
372
+ letter-spacing: -0.02em;
373
+ }
374
+
375
+ .stat-failed {
376
+ color: var(--danger);
377
+ }
378
+
379
+ .progress-section {
380
+ background: var(--bg-primary);
381
+ border: 1px solid var(--border);
382
+ border-radius: var(--radius);
383
+ box-shadow: var(--shadow-sm);
384
+ padding: 12px 14px;
385
+ }
386
+
387
+ .progress-header {
388
+ display: flex;
389
+ align-items: baseline;
390
+ justify-content: space-between;
391
+ gap: 12px;
392
+ margin-bottom: 10px;
393
+ }
394
+
395
+ .progress-title {
396
+ font-size: 12px;
397
+ color: var(--text-secondary);
398
+ }
399
+
400
+ .progress-percent {
401
+ font-size: 12px;
402
+ font-weight: 650;
403
+ color: var(--text-primary);
404
+ }
405
+
406
+ .progress-bar {
407
+ width: 100%;
408
+ height: 10px;
409
+ background: var(--border);
410
+ border-radius: 999px;
411
+ overflow: hidden;
412
+ }
413
+
414
+ .progress-bar__track {
415
+ width: 100%;
416
+ height: 100%;
417
+ }
418
+
419
+ .progress-bar__fill,
420
+ .progress-bar-fill {
421
+ height: 100%;
422
+ background: var(--success);
423
+ border-radius: 999px;
424
+ transition: width 250ms ease;
425
+ }
426
+
427
+ .failed-cases-section__title {
428
+ font-size: 12px;
429
+ font-weight: 650;
430
+ color: var(--text-secondary);
431
+ margin: 0 0 10px;
432
+ }
433
+
434
+ .failed-cases-section__list {
435
+ list-style: none;
436
+ margin: 0;
437
+ padding: 0;
438
+ display: flex;
439
+ flex-wrap: wrap;
440
+ gap: 8px;
441
+ }
442
+
443
+ .failed-case-link {
444
+ display: inline-flex;
445
+ align-items: center;
446
+ max-width: 280px;
447
+ padding: 6px 10px;
448
+ border-radius: 999px;
449
+ border: 1px solid var(--border);
450
+ background: var(--bg-secondary);
451
+ color: var(--text-primary);
452
+ text-decoration: none;
453
+ font-size: 12px;
454
+ overflow: hidden;
455
+ text-overflow: ellipsis;
456
+ white-space: nowrap;
457
+ }
458
+
459
+ .failed-case-link:hover {
460
+ background: rgba(var(--accent-rgb), 0.08);
461
+ border-color: rgba(var(--accent-rgb), 0.35);
462
+ }
463
+
464
+ @media (max-width: 900px) {
465
+ .overview-section__stats {
466
+ grid-template-columns: repeat(2, minmax(0, 1fr));
467
+ }
468
+ }
469
+
470
+ /* Case detail */
471
+ .case-details {
472
+ display: grid;
473
+ gap: 16px;
474
+ margin-top: 16px;
475
+ }
476
+
477
+ .case-detail {
478
+ background: var(--bg-primary);
479
+ border: 1px solid var(--border);
480
+ border-radius: var(--radius);
481
+ box-shadow: var(--shadow-sm);
482
+ padding: 14px;
483
+ scroll-margin-top: 12px;
484
+ }
485
+
486
+ .case-info {
487
+ display: grid;
488
+ gap: 8px;
489
+ padding-bottom: 12px;
490
+ border-bottom: 1px solid var(--border);
491
+ margin-bottom: 12px;
492
+ }
493
+
494
+ .case-detail__title-row {
495
+ display: flex;
496
+ align-items: center;
497
+ justify-content: space-between;
498
+ gap: 12px;
499
+ }
500
+
501
+ .case-detail__title {
502
+ margin: 0;
503
+ font-size: 16px;
504
+ font-weight: 650;
505
+ letter-spacing: -0.01em;
506
+ min-width: 0;
507
+ }
508
+
509
+ .case-status {
510
+ display: inline-flex;
511
+ align-items: center;
512
+ justify-content: center;
513
+ gap: 6px;
514
+ border-radius: 999px;
515
+ padding: 4px 10px;
516
+ font-size: 12px;
517
+ font-weight: 650;
518
+ white-space: nowrap;
519
+ }
520
+
521
+ .case-status--passed {
522
+ color: var(--success);
523
+ background: rgba(var(--success-rgb), 0.12);
524
+ }
525
+
526
+ .case-status--failed {
527
+ color: var(--danger);
528
+ background: rgba(var(--danger-rgb), 0.12);
529
+ }
530
+
531
+ .case-status--skipped {
532
+ color: var(--text-secondary);
533
+ background: rgba(107, 114, 128, 0.12);
534
+ }
535
+
536
+ .case-detail__meta {
537
+ font-size: 12px;
538
+ color: var(--text-secondary);
539
+ display: flex;
540
+ align-items: center;
541
+ gap: 8px;
542
+ }
543
+
544
+ .expected-behavior {
545
+ background: var(--bg-secondary);
546
+ border: 1px solid var(--border);
547
+ border-radius: var(--radius);
548
+ padding: 12px 14px;
549
+ margin-bottom: 12px;
550
+ }
551
+
552
+ .expected-behavior__title {
553
+ font-size: 12px;
554
+ font-weight: 650;
555
+ color: var(--text-secondary);
556
+ margin: 0 0 8px;
557
+ }
558
+
559
+ .expected-behavior__content {
560
+ font-size: 14px;
561
+ color: var(--text-primary);
562
+ white-space: pre-wrap;
563
+ }
564
+
565
+ .steps-section__title {
566
+ font-size: 12px;
567
+ font-weight: 650;
568
+ color: var(--text-secondary);
569
+ margin: 0 0 10px;
570
+ }
571
+
572
+ .steps-list {
573
+ list-style: none;
574
+ margin: 0;
575
+ padding: 0;
576
+ display: grid;
577
+ gap: 8px;
578
+ }
579
+
580
+ .step-item {
581
+ border: 1px solid var(--border);
582
+ border-radius: var(--radius);
583
+ padding: 10px 12px;
584
+ }
585
+
586
+ .step-status--passed {
587
+ border-left: 4px solid rgba(var(--success-rgb), 0.5);
588
+ }
589
+
590
+ .step-status--failed {
591
+ border-left: 4px solid rgba(var(--danger-rgb), 0.6);
592
+ }
593
+
594
+ .step-status--skipped {
595
+ border-left: 4px solid rgba(107, 114, 128, 0.45);
596
+ }
597
+
598
+ .step-row {
599
+ display: grid;
600
+ grid-template-columns: 32px 1fr auto;
601
+ align-items: center;
602
+ gap: 10px;
603
+ }
604
+
605
+ .step-index {
606
+ font-variant-numeric: tabular-nums;
607
+ font-size: 12px;
608
+ color: var(--text-secondary);
609
+ text-align: center;
610
+ }
611
+
612
+ .step-action {
613
+ font-size: 14px;
614
+ color: var(--text-primary);
615
+ min-width: 0;
616
+ }
617
+
618
+ .step-meta {
619
+ display: flex;
620
+ align-items: center;
621
+ gap: 10px;
622
+ font-size: 12px;
623
+ color: var(--text-secondary);
624
+ white-space: nowrap;
625
+ }
626
+
627
+ .step-status {
628
+ text-transform: uppercase;
629
+ letter-spacing: 0.02em;
630
+ }
631
+
632
+ .step-duration {
633
+ font-variant-numeric: tabular-nums;
634
+ }
635
+
636
+ .step-error {
637
+ margin-top: 10px;
638
+ background: rgba(var(--danger-rgb), 0.08);
639
+ border: 1px solid rgba(var(--danger-rgb), 0.25);
640
+ border-radius: 10px;
641
+ padding: 10px 12px;
642
+ }
643
+
644
+ .step-error__message {
645
+ font-size: 13px;
646
+ font-weight: 650;
647
+ color: var(--danger);
648
+ margin-bottom: 8px;
649
+ }
650
+
651
+ .step-error__stack {
652
+ margin: 0;
653
+ font-family:
654
+ ui-monospace,
655
+ SFMono-Regular,
656
+ Menlo,
657
+ Monaco,
658
+ Consolas,
659
+ "Liberation Mono",
660
+ "Courier New",
661
+ monospace;
662
+ font-size: 12px;
663
+ color: var(--text-primary);
664
+ overflow: auto;
665
+ padding: 10px 12px;
666
+ border-radius: 8px;
667
+ background: rgba(var(--ink-rgb), 0.06);
668
+ }
669
+
670
+ .video-section,
671
+ .evidence-section {
672
+ margin-top: 12px;
673
+ border: 1px dashed var(--border);
674
+ border-radius: var(--radius);
675
+ padding: 12px 14px;
676
+ background: var(--bg-secondary);
677
+ color: var(--text-secondary);
678
+ }
679
+
680
+ /* Video */
681
+ .video-player {
682
+ display: grid;
683
+ gap: 10px;
684
+ }
685
+
686
+ .video-player video {
687
+ width: 100%;
688
+ max-height: 420px;
689
+ border-radius: 10px;
690
+ background: #000;
691
+ display: block;
692
+ }
693
+
694
+ .video-placeholder {
695
+ margin: 0;
696
+ min-height: 160px;
697
+ border-radius: 10px;
698
+ background: rgba(var(--ink-rgb), 0.04);
699
+ display: flex;
700
+ align-items: center;
701
+ justify-content: center;
702
+ text-align: center;
703
+ font-size: 13px;
704
+ color: var(--text-secondary);
705
+ }
706
+
707
+ /* Tabs */
708
+ .evidence-tabs {
709
+ color: var(--text-primary);
710
+ }
711
+
712
+ .tabs-header {
713
+ display: flex;
714
+ gap: 8px;
715
+ flex-wrap: wrap;
716
+ margin-bottom: 12px;
717
+ }
718
+
719
+ .tab-btn {
720
+ appearance: none;
721
+ border: 1px solid var(--border);
722
+ background: var(--bg-primary);
723
+ color: var(--text-secondary);
724
+ border-radius: 999px;
725
+ padding: 6px 10px;
726
+ font-size: 12px;
727
+ font-weight: 650;
728
+ cursor: pointer;
729
+ }
730
+
731
+ .tab-btn:hover {
732
+ color: var(--text-primary);
733
+ border-color: #d1d5db;
734
+ }
735
+
736
+ .tab-btn.active {
737
+ background: rgba(var(--accent-rgb), 0.14);
738
+ border-color: rgba(var(--accent-rgb), 0.35);
739
+ color: var(--text-primary);
740
+ }
741
+
742
+ .tab-content {
743
+ display: block;
744
+ }
745
+
746
+ .tab-placeholder {
747
+ font-size: 13px;
748
+ color: var(--text-secondary);
749
+ padding: 10px 0;
750
+ }
751
+
752
+ /* Network */
753
+ .network-toolbar {
754
+ display: flex;
755
+ align-items: center;
756
+ justify-content: flex-end;
757
+ gap: 12px;
758
+ margin-bottom: 10px;
759
+ }
760
+
761
+ .truncation-hint {
762
+ margin-right: auto;
763
+ font-size: 12px;
764
+ color: var(--text-secondary);
765
+ background: rgba(var(--ink-rgb), 0.04);
766
+ border: 1px solid rgba(var(--ink-rgb), 0.08);
767
+ border-radius: 999px;
768
+ padding: 6px 10px;
769
+ }
770
+
771
+ .network-filter {
772
+ display: inline-flex;
773
+ align-items: center;
774
+ gap: 8px;
775
+ font-size: 12px;
776
+ color: var(--text-secondary);
777
+ }
778
+
779
+ .request-filter {
780
+ border: 1px solid var(--border);
781
+ border-radius: 10px;
782
+ padding: 6px 10px;
783
+ font-size: 12px;
784
+ background: var(--bg-primary);
785
+ color: var(--text-primary);
786
+ }
787
+
788
+ .network-empty {
789
+ font-size: 13px;
790
+ color: var(--text-secondary);
791
+ padding: 10px 0;
792
+ }
793
+
794
+ .network-table__wrapper {
795
+ overflow: auto;
796
+ border-radius: var(--radius);
797
+ border: 1px solid var(--border);
798
+ background: var(--bg-primary);
799
+ }
800
+
801
+ .network-table {
802
+ width: 100%;
803
+ border-collapse: collapse;
804
+ min-width: 720px;
805
+ }
806
+
807
+ .network-table th,
808
+ .network-table td {
809
+ padding: 10px 12px;
810
+ border-bottom: 1px solid var(--border);
811
+ vertical-align: top;
812
+ font-size: 12px;
813
+ }
814
+
815
+ .network-table th {
816
+ text-align: left;
817
+ color: var(--text-secondary);
818
+ font-weight: 650;
819
+ background: rgba(var(--ink-rgb), 0.02);
820
+ position: sticky;
821
+ top: 0;
822
+ z-index: 1;
823
+ }
824
+
825
+ .request-row:hover {
826
+ background: rgba(var(--accent-rgb), 0.06);
827
+ }
828
+
829
+ .request-failed {
830
+ background: rgba(var(--danger-rgb), 0.06);
831
+ }
832
+
833
+ .request-failed:hover {
834
+ background: rgba(var(--danger-rgb), 0.09);
835
+ }
836
+
837
+ .request-url {
838
+ display: flex;
839
+ align-items: flex-start;
840
+ gap: 8px;
841
+ min-width: 320px;
842
+ }
843
+
844
+ .request-toggle {
845
+ flex: 0 0 auto;
846
+ width: 22px;
847
+ height: 22px;
848
+ border: 1px solid var(--border);
849
+ border-radius: 8px;
850
+ background: var(--bg-secondary);
851
+ color: var(--text-secondary);
852
+ cursor: pointer;
853
+ line-height: 1;
854
+ display: inline-flex;
855
+ align-items: center;
856
+ justify-content: center;
857
+ }
858
+
859
+ .request-toggle:hover {
860
+ color: var(--text-primary);
861
+ }
862
+
863
+ .request-url__text {
864
+ word-break: break-all;
865
+ color: var(--text-primary);
866
+ }
867
+
868
+ .request-status {
869
+ font-variant-numeric: tabular-nums;
870
+ }
871
+
872
+ .request-duration {
873
+ font-variant-numeric: tabular-nums;
874
+ white-space: nowrap;
875
+ }
876
+
877
+ .request-detail td {
878
+ background: rgba(var(--ink-rgb), 0.02);
879
+ }
880
+
881
+ .request-detail__grid {
882
+ display: grid;
883
+ gap: 12px;
884
+ grid-template-columns: repeat(2, minmax(0, 1fr));
885
+ }
886
+
887
+ .request-detail__title {
888
+ font-size: 12px;
889
+ font-weight: 650;
890
+ color: var(--text-secondary);
891
+ margin-bottom: 8px;
892
+ }
893
+
894
+ .request-detail__body {
895
+ margin: 0;
896
+ font-family:
897
+ ui-monospace,
898
+ SFMono-Regular,
899
+ Menlo,
900
+ Monaco,
901
+ Consolas,
902
+ "Liberation Mono",
903
+ "Courier New",
904
+ monospace;
905
+ font-size: 12px;
906
+ color: var(--text-primary);
907
+ overflow: auto;
908
+ padding: 10px 12px;
909
+ border-radius: 10px;
910
+ border: 1px solid rgba(var(--ink-rgb), 0.08);
911
+ background: rgba(var(--ink-rgb), 0.04);
912
+ max-height: 220px;
913
+ white-space: pre-wrap;
914
+ }
915
+
916
+ @media (max-width: 900px) {
917
+ .request-detail__grid {
918
+ grid-template-columns: 1fr;
919
+ }
920
+ }
921
+
922
+ /* Console */
923
+ .console-toolbar {
924
+ display: flex;
925
+ align-items: center;
926
+ justify-content: flex-end;
927
+ gap: 12px;
928
+ margin-bottom: 10px;
929
+ }
930
+
931
+ .console-filter {
932
+ display: inline-flex;
933
+ align-items: center;
934
+ gap: 8px;
935
+ font-size: 12px;
936
+ color: var(--text-secondary);
937
+ }
938
+
939
+ .console-level-filter {
940
+ border: 1px solid var(--border);
941
+ border-radius: 10px;
942
+ padding: 6px 10px;
943
+ font-size: 12px;
944
+ background: var(--bg-primary);
945
+ color: var(--text-primary);
946
+ }
947
+
948
+ .console-empty,
949
+ .ai-empty,
950
+ .assert-empty {
951
+ font-size: 13px;
952
+ color: var(--text-secondary);
953
+ padding: 10px 0;
954
+ }
955
+
956
+ .console-list {
957
+ list-style: none;
958
+ margin: 0;
959
+ padding: 0;
960
+ display: grid;
961
+ gap: 6px;
962
+ }
963
+
964
+ .console-item {
965
+ display: grid;
966
+ grid-template-columns: 160px 80px 1fr;
967
+ gap: 10px;
968
+ align-items: start;
969
+ border: 1px solid rgba(var(--ink-rgb), 0.08);
970
+ background: rgba(var(--ink-rgb), 0.02);
971
+ border-radius: 10px;
972
+ padding: 10px 12px;
973
+ }
974
+
975
+ .console-time {
976
+ font-variant-numeric: tabular-nums;
977
+ font-size: 12px;
978
+ color: var(--text-secondary);
979
+ }
980
+
981
+ .console-level {
982
+ font-size: 12px;
983
+ font-weight: 650;
984
+ text-transform: uppercase;
985
+ letter-spacing: 0.03em;
986
+ }
987
+
988
+ .console-message {
989
+ font-size: 13px;
990
+ color: var(--text-primary);
991
+ white-space: pre-wrap;
992
+ word-break: break-word;
993
+ }
994
+
995
+ .log-level--error .console-level {
996
+ color: var(--danger);
997
+ }
998
+
999
+ .log-level--warning .console-level {
1000
+ color: var(--warning);
1001
+ }
1002
+
1003
+ .log-level--info .console-level {
1004
+ color: var(--accent);
1005
+ }
1006
+
1007
+ .log-level--log .console-level {
1008
+ color: var(--text-secondary);
1009
+ }
1010
+
1011
+ @media (max-width: 900px) {
1012
+ .console-item {
1013
+ grid-template-columns: 1fr;
1014
+ }
1015
+ }
1016
+
1017
+ /* AI Markdown */
1018
+ .ai-markdown-output {
1019
+ font-size: 14px;
1020
+ color: var(--text-primary);
1021
+ line-height: 1.6;
1022
+ }
1023
+
1024
+ .ai-markdown-output h1,
1025
+ .ai-markdown-output h2,
1026
+ .ai-markdown-output h3 {
1027
+ margin: 14px 0 8px;
1028
+ font-weight: 700;
1029
+ letter-spacing: -0.01em;
1030
+ }
1031
+
1032
+ .ai-markdown-output h1 {
1033
+ font-size: 18px;
1034
+ }
1035
+
1036
+ .ai-markdown-output h2 {
1037
+ font-size: 16px;
1038
+ }
1039
+
1040
+ .ai-markdown-output h3 {
1041
+ font-size: 14px;
1042
+ }
1043
+
1044
+ .ai-markdown-output p {
1045
+ margin: 8px 0;
1046
+ }
1047
+
1048
+ .ai-markdown-output ul,
1049
+ .ai-markdown-output ol {
1050
+ margin: 8px 0;
1051
+ padding-left: 18px;
1052
+ }
1053
+
1054
+ .ai-markdown-output pre {
1055
+ margin: 10px 0;
1056
+ padding: 12px 14px;
1057
+ border-radius: 12px;
1058
+ overflow: auto;
1059
+ background: rgba(var(--ink-rgb), 0.06);
1060
+ border: 1px solid rgba(var(--ink-rgb), 0.1);
1061
+ }
1062
+
1063
+ .ai-markdown-output code {
1064
+ font-family:
1065
+ ui-monospace,
1066
+ SFMono-Regular,
1067
+ Menlo,
1068
+ Monaco,
1069
+ Consolas,
1070
+ "Liberation Mono",
1071
+ "Courier New",
1072
+ monospace;
1073
+ font-size: 12px;
1074
+ }
1075
+
1076
+ .ai-markdown-output pre code {
1077
+ font-size: 12px;
1078
+ }
1079
+
1080
+ .ai-markdown-output blockquote {
1081
+ margin: 10px 0;
1082
+ padding: 8px 12px;
1083
+ border-left: 3px solid rgba(var(--accent-rgb), 0.45);
1084
+ background: rgba(var(--accent-rgb), 0.06);
1085
+ border-radius: 10px;
1086
+ color: var(--text-primary);
1087
+ }
1088
+
1089
+ /* Assert */
1090
+ .assert-table__wrapper {
1091
+ overflow: auto;
1092
+ border-radius: var(--radius);
1093
+ border: 1px solid var(--border);
1094
+ background: var(--bg-primary);
1095
+ }
1096
+
1097
+ .assert-table {
1098
+ width: 100%;
1099
+ border-collapse: collapse;
1100
+ min-width: 780px;
1101
+ }
1102
+
1103
+ .assert-table th,
1104
+ .assert-table td {
1105
+ padding: 10px 12px;
1106
+ border-bottom: 1px solid var(--border);
1107
+ vertical-align: top;
1108
+ font-size: 12px;
1109
+ }
1110
+
1111
+ .assert-table th {
1112
+ text-align: left;
1113
+ color: var(--text-secondary);
1114
+ font-weight: 650;
1115
+ background: rgba(var(--ink-rgb), 0.02);
1116
+ position: sticky;
1117
+ top: 0;
1118
+ z-index: 1;
1119
+ }
1120
+
1121
+ .assert-row:hover {
1122
+ background: rgba(var(--accent-rgb), 0.06);
1123
+ }
1124
+
1125
+ .assert-failed {
1126
+ background: rgba(var(--danger-rgb), 0.06);
1127
+ }
1128
+
1129
+ .assert-failed:hover {
1130
+ background: rgba(var(--danger-rgb), 0.09);
1131
+ }
1132
+
1133
+ .assert-status {
1134
+ font-weight: 650;
1135
+ text-transform: uppercase;
1136
+ letter-spacing: 0.03em;
1137
+ white-space: nowrap;
1138
+ }
1139
+
1140
+ .assert-failed .assert-status {
1141
+ color: var(--danger);
1142
+ }
1143
+
1144
+ .assert-row:not(.assert-failed) .assert-status {
1145
+ color: var(--success);
1146
+ }
1147
+
1148
+ .assert-table code {
1149
+ font-family:
1150
+ ui-monospace,
1151
+ SFMono-Regular,
1152
+ Menlo,
1153
+ Monaco,
1154
+ Consolas,
1155
+ "Liberation Mono",
1156
+ "Courier New",
1157
+ monospace;
1158
+ font-size: 12px;
1159
+ padding: 2px 6px;
1160
+ border-radius: 8px;
1161
+ border: 1px solid rgba(var(--ink-rgb), 0.08);
1162
+ background: rgba(var(--ink-rgb), 0.04);
1163
+ display: inline-block;
1164
+ max-width: 360px;
1165
+ overflow: auto;
1166
+ white-space: pre-wrap;
1167
+ word-break: break-word;
1168
+ }