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