@openqa/cli 1.3.1 → 1.3.2
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.
- package/dist/cli/index.js +462 -170
- package/dist/cli/server.js +462 -170
- package/package.json +1 -1
package/dist/cli/index.js
CHANGED
|
@@ -434,158 +434,482 @@ async function startWebServer() {
|
|
|
434
434
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
435
435
|
<script src="https://cdn.jsdelivr.net/npm/@xyflow/react@11/dist/umd/index.js"></script>
|
|
436
436
|
<style>
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
437
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
438
|
+
|
|
439
|
+
body {
|
|
440
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
441
|
+
background: #0a0a0a;
|
|
442
|
+
color: #ffffff;
|
|
443
|
+
min-height: 100vh;
|
|
444
|
+
overflow-x: hidden;
|
|
445
|
+
line-height: 1.6;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.dashboard-container {
|
|
449
|
+
max-width: 1920px;
|
|
450
|
+
margin: 0 auto;
|
|
451
|
+
padding: 20px;
|
|
452
|
+
min-height: 100vh;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.dashboard-header {
|
|
456
|
+
display: flex;
|
|
457
|
+
justify-content: space-between;
|
|
458
|
+
align-items: center;
|
|
459
|
+
margin-bottom: 32px;
|
|
460
|
+
padding: 24px 32px;
|
|
461
|
+
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
|
|
462
|
+
border-radius: 16px;
|
|
463
|
+
border: 1px solid #333333;
|
|
464
|
+
backdrop-filter: blur(10px);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.dashboard-title {
|
|
468
|
+
font-size: 32px;
|
|
469
|
+
font-weight: 700;
|
|
470
|
+
color: #f97316;
|
|
471
|
+
margin: 0;
|
|
472
|
+
letter-spacing: -0.5px;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.nav {
|
|
476
|
+
display: flex;
|
|
477
|
+
gap: 8px;
|
|
478
|
+
background: rgba(255, 255, 255, 0.05);
|
|
479
|
+
padding: 4px;
|
|
480
|
+
border-radius: 12px;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.nav-links a {
|
|
484
|
+
color: #9ca3af;
|
|
485
|
+
text-decoration: none;
|
|
486
|
+
font-weight: 500;
|
|
487
|
+
padding: 12px 24px;
|
|
488
|
+
border-radius: 8px;
|
|
489
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
490
|
+
display: flex;
|
|
491
|
+
align-items: center;
|
|
492
|
+
gap: 8px;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.nav-links a:hover, .nav-links a.active {
|
|
496
|
+
color: #ffffff;
|
|
497
|
+
background: #f97316;
|
|
498
|
+
transform: translateY(-1px);
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.connection-status {
|
|
502
|
+
padding: 8px 16px;
|
|
503
|
+
border-radius: 20px;
|
|
504
|
+
font-size: 12px;
|
|
505
|
+
font-weight: 600;
|
|
506
|
+
text-transform: uppercase;
|
|
507
|
+
letter-spacing: 0.5px;
|
|
508
|
+
}
|
|
509
|
+
|
|
443
510
|
.status.running { background: linear-gradient(135deg, #10b981, #059669); color: white; }
|
|
444
511
|
.status.idle { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
|
|
445
512
|
.status.error { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
|
|
446
513
|
.status.paused { background: linear-gradient(135deg, #64748b, #475569); color: white; }
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
.
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
border
|
|
459
|
-
|
|
460
|
-
|
|
514
|
+
|
|
515
|
+
/* Metrics Grid */
|
|
516
|
+
.metrics-grid {
|
|
517
|
+
display: grid;
|
|
518
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
519
|
+
gap: 24px;
|
|
520
|
+
margin-bottom: 32px;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.metric-card {
|
|
524
|
+
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
|
525
|
+
border: 1px solid #333333;
|
|
526
|
+
border-radius: 16px;
|
|
527
|
+
padding: 28px 24px;
|
|
461
528
|
position: relative;
|
|
462
529
|
overflow: hidden;
|
|
530
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
531
|
+
min-height: 160px;
|
|
532
|
+
display: flex;
|
|
533
|
+
flex-direction: column;
|
|
534
|
+
justify-content: space-between;
|
|
463
535
|
}
|
|
464
|
-
|
|
465
|
-
.metric-
|
|
466
|
-
|
|
467
|
-
|
|
536
|
+
|
|
537
|
+
.metric-card::before {
|
|
538
|
+
content: '';
|
|
539
|
+
position: absolute;
|
|
540
|
+
top: 0;
|
|
541
|
+
left: 0;
|
|
542
|
+
right: 0;
|
|
543
|
+
height: 4px;
|
|
544
|
+
background: linear-gradient(90deg, #f97316, #ea580c, #f59e0b);
|
|
545
|
+
background-size: 200% 100%;
|
|
546
|
+
animation: shimmer 3s ease-in-out infinite;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
@keyframes shimmer {
|
|
550
|
+
0%, 100% { background-position: -200% 0; }
|
|
551
|
+
50% { background-position: 200% 0; }
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.metric-card:hover {
|
|
555
|
+
transform: translateY(-4px);
|
|
556
|
+
border-color: #f97316;
|
|
557
|
+
box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.metric-header {
|
|
561
|
+
display: flex;
|
|
562
|
+
justify-content: space-between;
|
|
563
|
+
align-items: flex-start;
|
|
564
|
+
margin-bottom: 16px;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.metric-label {
|
|
568
|
+
color: #9ca3af;
|
|
569
|
+
font-size: 14px;
|
|
570
|
+
font-weight: 500;
|
|
571
|
+
text-transform: uppercase;
|
|
572
|
+
letter-spacing: 0.5px;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.metric-icon {
|
|
576
|
+
width: 40px;
|
|
577
|
+
height: 40px;
|
|
578
|
+
background: rgba(249, 115, 22, 0.1);
|
|
579
|
+
border-radius: 12px;
|
|
580
|
+
display: flex;
|
|
581
|
+
align-items: center;
|
|
582
|
+
justify-content: center;
|
|
583
|
+
font-size: 20px;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.metric-value {
|
|
587
|
+
font-size: 42px;
|
|
588
|
+
font-weight: 700;
|
|
589
|
+
color: #f97316;
|
|
590
|
+
margin: 8px 0;
|
|
591
|
+
line-height: 1;
|
|
592
|
+
background: linear-gradient(135deg, #f97316, #fbbf24);
|
|
593
|
+
-webkit-background-clip: text;
|
|
594
|
+
-webkit-text-fill-color: transparent;
|
|
595
|
+
background-clip: text;
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
.metric-change {
|
|
599
|
+
font-size: 13px;
|
|
600
|
+
font-weight: 600;
|
|
601
|
+
display: flex;
|
|
602
|
+
align-items: center;
|
|
603
|
+
gap: 4px;
|
|
604
|
+
}
|
|
605
|
+
|
|
468
606
|
.metric-change.positive { color: #10b981; }
|
|
469
607
|
.metric-change.negative { color: #ef4444; }
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
.
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
608
|
+
|
|
609
|
+
/* Main Content Grid */
|
|
610
|
+
.main-grid {
|
|
611
|
+
display: grid;
|
|
612
|
+
grid-template-columns: 1fr 1fr;
|
|
613
|
+
gap: 24px;
|
|
614
|
+
margin-bottom: 32px;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.card {
|
|
618
|
+
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
|
619
|
+
border: 1px solid #333333;
|
|
620
|
+
border-radius: 16px;
|
|
621
|
+
padding: 28px;
|
|
622
|
+
position: relative;
|
|
623
|
+
overflow: hidden;
|
|
624
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.card:hover {
|
|
628
|
+
border-color: #444444;
|
|
629
|
+
transform: translateY(-2px);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.card-header {
|
|
633
|
+
display: flex;
|
|
634
|
+
justify-content: space-between;
|
|
635
|
+
align-items: center;
|
|
636
|
+
margin-bottom: 24px;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.card-title {
|
|
640
|
+
font-size: 20px;
|
|
641
|
+
font-weight: 600;
|
|
642
|
+
color: #ffffff;
|
|
643
|
+
margin: 0;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.tabs {
|
|
647
|
+
display: flex;
|
|
648
|
+
gap: 4px;
|
|
649
|
+
background: rgba(255, 255, 255, 0.05);
|
|
650
|
+
padding: 4px;
|
|
651
|
+
border-radius: 12px;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.tab {
|
|
655
|
+
padding: 10px 20px;
|
|
656
|
+
background: transparent;
|
|
657
|
+
border: none;
|
|
658
|
+
border-radius: 8px;
|
|
659
|
+
color: #9ca3af;
|
|
660
|
+
font-weight: 500;
|
|
661
|
+
cursor: pointer;
|
|
662
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
.tab.active {
|
|
666
|
+
background: #f97316;
|
|
667
|
+
color: white;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.tab:hover:not(.active) {
|
|
671
|
+
color: #ffffff;
|
|
672
|
+
background: rgba(255, 255, 255, 0.1);
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
.chart-container {
|
|
676
|
+
position: relative;
|
|
677
|
+
height: 320px;
|
|
678
|
+
margin: 20px 0;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.hierarchy-container {
|
|
682
|
+
height: 420px;
|
|
683
|
+
border: 1px solid #333333;
|
|
684
|
+
border-radius: 12px;
|
|
685
|
+
background: #0a0a0a;
|
|
686
|
+
overflow: hidden;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
/* Activity Feed */
|
|
690
|
+
.activity-feed {
|
|
691
|
+
max-height: 400px;
|
|
692
|
+
overflow-y: auto;
|
|
693
|
+
padding-right: 8px;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.activity-feed::-webkit-scrollbar {
|
|
697
|
+
width: 6px;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.activity-feed::-webkit-scrollbar-track {
|
|
701
|
+
background: rgba(255, 255, 255, 0.05);
|
|
702
|
+
border-radius: 3px;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.activity-feed::-webkit-scrollbar-thumb {
|
|
706
|
+
background: #f97316;
|
|
707
|
+
border-radius: 3px;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.activity-item {
|
|
711
|
+
background: rgba(255, 255, 255, 0.03);
|
|
712
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
477
713
|
border-left: 4px solid #f97316;
|
|
714
|
+
border-radius: 12px;
|
|
715
|
+
padding: 16px 20px;
|
|
716
|
+
margin-bottom: 12px;
|
|
478
717
|
font-size: 14px;
|
|
479
|
-
transition: all 0.
|
|
718
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
719
|
+
position: relative;
|
|
720
|
+
overflow: hidden;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.activity-item::before {
|
|
724
|
+
content: '';
|
|
725
|
+
position: absolute;
|
|
726
|
+
top: 0;
|
|
727
|
+
left: 0;
|
|
728
|
+
right: 0;
|
|
729
|
+
height: 1px;
|
|
730
|
+
background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.3), transparent);
|
|
731
|
+
opacity: 0;
|
|
732
|
+
transition: opacity 0.3s;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.activity-item:hover {
|
|
736
|
+
background: rgba(255, 255, 255, 0.06);
|
|
737
|
+
border-left-color: #fbbf24;
|
|
738
|
+
transform: translateX(8px);
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.activity-item:hover::before {
|
|
742
|
+
opacity: 1;
|
|
480
743
|
}
|
|
481
|
-
|
|
744
|
+
|
|
482
745
|
.activity-item.error { border-left-color: #ef4444; }
|
|
483
746
|
.activity-item.success { border-left-color: #10b981; }
|
|
484
747
|
.activity-item.warning { border-left-color: #f59e0b; }
|
|
485
|
-
|
|
486
|
-
.
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
748
|
+
|
|
749
|
+
.activity-time {
|
|
750
|
+
color: #6b7280;
|
|
751
|
+
font-size: 12px;
|
|
752
|
+
margin-top: 8px;
|
|
753
|
+
display: flex;
|
|
754
|
+
align-items: center;
|
|
755
|
+
gap: 4px;
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
/* Buttons */
|
|
759
|
+
.btn {
|
|
760
|
+
background: linear-gradient(135deg, #f97316, #ea580c);
|
|
761
|
+
color: white;
|
|
762
|
+
border: none;
|
|
763
|
+
padding: 12px 24px;
|
|
764
|
+
border-radius: 10px;
|
|
765
|
+
cursor: pointer;
|
|
766
|
+
font-size: 14px;
|
|
767
|
+
font-weight: 600;
|
|
768
|
+
margin: 4px;
|
|
769
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
492
770
|
position: relative;
|
|
771
|
+
overflow: hidden;
|
|
493
772
|
}
|
|
494
|
-
|
|
495
|
-
.
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
font-weight: 500;
|
|
505
|
-
margin: 5px;
|
|
506
|
-
transition: all 0.2s;
|
|
773
|
+
|
|
774
|
+
.btn::before {
|
|
775
|
+
content: '';
|
|
776
|
+
position: absolute;
|
|
777
|
+
top: 0;
|
|
778
|
+
left: -100%;
|
|
779
|
+
width: 100%;
|
|
780
|
+
height: 100%;
|
|
781
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
782
|
+
transition: left 0.5s;
|
|
507
783
|
}
|
|
508
|
-
|
|
784
|
+
|
|
785
|
+
.btn:hover {
|
|
786
|
+
transform: translateY(-2px);
|
|
787
|
+
box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
.btn:hover::before {
|
|
791
|
+
left: 100%;
|
|
792
|
+
}
|
|
793
|
+
|
|
509
794
|
.btn-success { background: linear-gradient(135deg, #10b981, #059669); }
|
|
510
|
-
.btn-success:hover { box-shadow: 0
|
|
795
|
+
.btn-success:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3); }
|
|
511
796
|
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
|
|
512
|
-
.btn-danger:hover { box-shadow: 0
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
.
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
.agent-node {
|
|
522
|
-
background: #1e293b;
|
|
523
|
-
border: 2px solid #f97316;
|
|
524
|
-
border-radius: 8px;
|
|
525
|
-
padding: 10px;
|
|
526
|
-
margin: 10px;
|
|
527
|
-
text-align: center;
|
|
528
|
-
}
|
|
529
|
-
.performance-bar {
|
|
530
|
-
height: 8px;
|
|
531
|
-
background: #334155;
|
|
532
|
-
border-radius: 4px;
|
|
533
|
-
overflow: hidden;
|
|
534
|
-
margin: 10px 0;
|
|
797
|
+
.btn-danger:hover { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3); }
|
|
798
|
+
|
|
799
|
+
/* Performance bars */
|
|
800
|
+
.performance-bar {
|
|
801
|
+
height: 6px;
|
|
802
|
+
background: rgba(255, 255, 255, 0.1);
|
|
803
|
+
border-radius: 3px;
|
|
804
|
+
overflow: hidden;
|
|
805
|
+
margin: 8px 0;
|
|
535
806
|
}
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
807
|
+
|
|
808
|
+
.performance-fill {
|
|
809
|
+
height: 100%;
|
|
810
|
+
background: linear-gradient(90deg, #10b981, #f97316);
|
|
811
|
+
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
812
|
+
border-radius: 3px;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
/* Responsive */
|
|
816
|
+
@media (max-width: 1200px) {
|
|
817
|
+
.main-grid {
|
|
818
|
+
grid-template-columns: 1fr;
|
|
819
|
+
}
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
@media (max-width: 768px) {
|
|
823
|
+
.dashboard-container {
|
|
824
|
+
padding: 16px;
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
.metrics-grid {
|
|
828
|
+
grid-template-columns: 1fr;
|
|
829
|
+
gap: 16px;
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
.dashboard-header {
|
|
833
|
+
flex-direction: column;
|
|
834
|
+
gap: 16px;
|
|
835
|
+
padding: 20px;
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
.dashboard-title {
|
|
839
|
+
font-size: 24px;
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.metric-value {
|
|
843
|
+
font-size: 32px;
|
|
844
|
+
}
|
|
540
845
|
}
|
|
846
|
+
|
|
847
|
+
/* Loading animation */
|
|
848
|
+
.pulse { animation: pulse 2s infinite; }
|
|
849
|
+
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
|
|
850
|
+
</style>
|
|
541
851
|
</style>
|
|
542
852
|
</head>
|
|
543
853
|
<body>
|
|
544
|
-
<div class="
|
|
545
|
-
<
|
|
546
|
-
<
|
|
547
|
-
<
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
<div class="metric-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
<div class="metric-
|
|
854
|
+
<div class="dashboard-container">
|
|
855
|
+
<header class="dashboard-header">
|
|
856
|
+
<h1 class="dashboard-title">\u{1F916} OpenQA Professional Dashboard</h1>
|
|
857
|
+
<nav class="nav">
|
|
858
|
+
<div class="nav-links">
|
|
859
|
+
<a href="/" class="active">\u{1F4CA} Dashboard</a>
|
|
860
|
+
<a href="/kanban">\u{1F4CB} Kanban</a>
|
|
861
|
+
<a href="/config">\u2699\uFE0F Config</a>
|
|
862
|
+
</div>
|
|
863
|
+
<span id="connection-status" class="connection-status status idle">\u{1F50C} Connecting...</span>
|
|
864
|
+
</nav>
|
|
865
|
+
</header>
|
|
866
|
+
|
|
867
|
+
<!-- Key Metrics -->
|
|
868
|
+
<div class="metrics-grid">
|
|
869
|
+
<div class="metric-card">
|
|
870
|
+
<div class="metric-header">
|
|
871
|
+
<div class="metric-label">\u{1F916} Active Agents</div>
|
|
872
|
+
<div class="metric-icon">\u{1F916}</div>
|
|
873
|
+
</div>
|
|
874
|
+
<div class="metric-value" id="active-agents">0</div>
|
|
875
|
+
<div class="metric-change positive">\u2191 2 from last hour</div>
|
|
876
|
+
</div>
|
|
877
|
+
<div class="metric-card">
|
|
878
|
+
<div class="metric-header">
|
|
879
|
+
<div class="metric-label">\u{1F4CB} Total Actions</div>
|
|
880
|
+
<div class="metric-icon">\u{1F4CB}</div>
|
|
881
|
+
</div>
|
|
882
|
+
<div class="metric-value" id="total-actions">0</div>
|
|
883
|
+
<div class="metric-change positive">\u2191 12% increase</div>
|
|
884
|
+
</div>
|
|
885
|
+
<div class="metric-card">
|
|
886
|
+
<div class="metric-header">
|
|
887
|
+
<div class="metric-label">\u{1F41B} Bugs Found</div>
|
|
888
|
+
<div class="metric-icon">\u{1F41B}</div>
|
|
889
|
+
</div>
|
|
890
|
+
<div class="metric-value" id="bugs-found">0</div>
|
|
891
|
+
<div class="metric-change negative">\u2193 3 from yesterday</div>
|
|
892
|
+
</div>
|
|
893
|
+
<div class="metric-card">
|
|
894
|
+
<div class="metric-header">
|
|
895
|
+
<div class="metric-label">\u26A1 Success Rate</div>
|
|
896
|
+
<div class="metric-icon">\u26A1</div>
|
|
897
|
+
</div>
|
|
898
|
+
<div class="metric-value" id="success-rate">0%</div>
|
|
899
|
+
<div class="metric-change positive">\u2191 5% improvement</div>
|
|
900
|
+
</div>
|
|
576
901
|
</div>
|
|
577
|
-
</div>
|
|
578
902
|
|
|
579
903
|
<!-- Charts and Hierarchy -->
|
|
580
|
-
<div class="grid
|
|
904
|
+
<div class="main-grid">
|
|
581
905
|
<div class="card">
|
|
582
906
|
<div class="card-header">
|
|
583
907
|
<h2 class="card-title">\u{1F4C8} Performance Metrics</h2>
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
908
|
+
<div class="tabs">
|
|
909
|
+
<div class="tab active" onclick="switchTab('performance')">Performance</div>
|
|
910
|
+
<div class="tab" onclick="switchTab('activity')">Activity</div>
|
|
911
|
+
<div class="tab" onclick="switchTab('errors')">Error Rate</div>
|
|
912
|
+
</div>
|
|
589
913
|
</div>
|
|
590
914
|
<div class="chart-container">
|
|
591
915
|
<canvas id="performanceChart"></canvas>
|
|
@@ -610,36 +934,36 @@ async function startWebServer() {
|
|
|
610
934
|
<div class="card">
|
|
611
935
|
<div class="card-header">
|
|
612
936
|
<h2 class="card-title">\u{1F916} Agent Details</h2>
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
937
|
+
<div class="tabs">
|
|
938
|
+
<div class="tab active" onclick="switchAgentTab('active')">Active Agents</div>
|
|
939
|
+
<div class="tab" onclick="switchAgentTab('specialists')">Specialists</div>
|
|
940
|
+
<div class="tab" onclick="switchAgentTab('performance')">Performance</div>
|
|
941
|
+
</div>
|
|
618
942
|
</div>
|
|
619
943
|
<div id="active-agents-content" class="tab-content active">
|
|
620
944
|
<div id="active-agents-list">
|
|
621
|
-
<p style="color: #
|
|
945
|
+
<p style="color: #9ca3af;">Loading agents...</p>
|
|
622
946
|
</div>
|
|
623
947
|
</div>
|
|
624
948
|
<div id="specialists-content" class="tab-content">
|
|
625
949
|
<div id="specialists-list">
|
|
626
|
-
<p style="color: #
|
|
950
|
+
<p style="color: #9ca3af;">No specialists active</p>
|
|
627
951
|
</div>
|
|
628
952
|
</div>
|
|
629
953
|
<div id="performance-content" class="tab-content">
|
|
630
954
|
<div id="performance-metrics">
|
|
631
|
-
<p style="color: #
|
|
955
|
+
<p style="color: #9ca3af;">Performance data loading...</p>
|
|
632
956
|
</div>
|
|
633
957
|
</div>
|
|
634
958
|
</div>
|
|
635
959
|
|
|
636
960
|
<!-- Activity and Interventions -->
|
|
637
|
-
<div class="grid
|
|
961
|
+
<div class="main-grid">
|
|
638
962
|
<div class="card">
|
|
639
963
|
<div class="card-header">
|
|
640
964
|
<h2 class="card-title">\u26A1 Recent Activity</h2>
|
|
641
965
|
</div>
|
|
642
|
-
<div
|
|
966
|
+
<div class="activity-feed" id="recent-activities">
|
|
643
967
|
<div class="activity-item">
|
|
644
968
|
<div>\u{1F504} Waiting for agent activity...</div>
|
|
645
969
|
<div class="activity-time">System ready</div>
|
|
@@ -651,20 +975,20 @@ async function startWebServer() {
|
|
|
651
975
|
<div class="card-header">
|
|
652
976
|
<h2 class="card-title">\u{1F6A8} Human Interventions</h2>
|
|
653
977
|
</div>
|
|
654
|
-
<div
|
|
655
|
-
<p style="color: #
|
|
978
|
+
<div class="activity-feed" id="interventions-list">
|
|
979
|
+
<p style="color: #9ca3af;">No interventions required</p>
|
|
656
980
|
</div>
|
|
657
981
|
</div>
|
|
658
982
|
</div>
|
|
659
983
|
|
|
660
984
|
<!-- Tasks and Issues -->
|
|
661
|
-
<div class="grid
|
|
985
|
+
<div class="main-grid">
|
|
662
986
|
<div class="card">
|
|
663
987
|
<div class="card-header">
|
|
664
988
|
<h2 class="card-title">\u{1F4DD} Current Tasks</h2>
|
|
665
989
|
</div>
|
|
666
|
-
<div
|
|
667
|
-
<p style="color: #
|
|
990
|
+
<div class="activity-feed" id="current-tasks">
|
|
991
|
+
<p style="color: #9ca3af;">No active tasks</p>
|
|
668
992
|
</div>
|
|
669
993
|
</div>
|
|
670
994
|
|
|
@@ -672,40 +996,8 @@ async function startWebServer() {
|
|
|
672
996
|
<div class="card-header">
|
|
673
997
|
<h2 class="card-title">\u26A0\uFE0F Issues Encountered</h2>
|
|
674
998
|
</div>
|
|
675
|
-
<div
|
|
676
|
-
<p style="color: #
|
|
677
|
-
</div>
|
|
678
|
-
</div>
|
|
679
|
-
</div>
|
|
680
|
-
|
|
681
|
-
<div class="grid">
|
|
682
|
-
<div class="card">
|
|
683
|
-
<h2>\u{1F916} Active Agents</h2>
|
|
684
|
-
<div id="active-agents-list">
|
|
685
|
-
<p style="color: #64748b;">No active agents</p>
|
|
686
|
-
</div>
|
|
687
|
-
</div>
|
|
688
|
-
|
|
689
|
-
<div class="card">
|
|
690
|
-
<h2>\u{1F6A8} Human Interventions</h2>
|
|
691
|
-
<div id="interventions-list">
|
|
692
|
-
<p style="color: #64748b;">No interventions required</p>
|
|
693
|
-
</div>
|
|
694
|
-
</div>
|
|
695
|
-
</div>
|
|
696
|
-
|
|
697
|
-
<div class="grid">
|
|
698
|
-
<div class="card">
|
|
699
|
-
<h2>\u{1F4DD} Current Tasks</h2>
|
|
700
|
-
<div id="current-tasks">
|
|
701
|
-
<p style="color: #64748b;">No active tasks</p>
|
|
702
|
-
</div>
|
|
703
|
-
</div>
|
|
704
|
-
|
|
705
|
-
<div class="card">
|
|
706
|
-
<h2>\u26A0\uFE0F Issues Encountered</h2>
|
|
707
|
-
<div id="issues-list">
|
|
708
|
-
<p style="color: #64748b;">No issues</p>
|
|
999
|
+
<div class="activity-feed" id="issues-list">
|
|
1000
|
+
<p style="color: #9ca3af;">No issues</p>
|
|
709
1001
|
</div>
|
|
710
1002
|
</div>
|
|
711
1003
|
</div>
|