@openqa/cli 1.2.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cli/index.js +621 -91
  2. package/dist/cli/server.js +621 -91
  3. package/package.json +1 -1
package/dist/cli/server.js CHANGED
@@ -393,125 +393,252 @@ async function startWebServer() {
393
393
  <!DOCTYPE html>
394
394
  <html>
395
395
  <head>
396
- <title>OpenQA - Real-time Dashboard</title>
396
+ <title>OpenQA - Professional Dashboard</title>
397
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
398
+ <script src="https://cdn.jsdelivr.net/npm/@xyflow/react@11/dist/umd/index.js"></script>
397
399
  <style>
398
- body { font-family: system-ui; max-width: 1400px; margin: 40px auto; padding: 20px; background: #0f172a; color: #e2e8f0; }
399
- h1 { color: #38bdf8; }
400
- .card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; margin: 20px 0; }
401
- .status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 14px; }
402
- .status.running { background: #10b981; color: white; }
403
- .status.idle { background: #f59e0b; color: white; }
404
- .status.error { background: #ef4444; color: white; }
405
- .status.paused { background: #64748b; color: white; }
406
- a { color: #38bdf8; text-decoration: none; }
407
- a:hover { text-decoration: underline; }
408
- nav { margin: 20px 0; }
409
- nav a { margin-right: 20px; }
410
- .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
411
- .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
400
+ body { font-family: system-ui; max-width: 1600px; margin: 20px auto; padding: 20px; background: #0f172a; color: #e2e8f0; }
401
+ h1 { color: #f97316; margin-bottom: 30px; }
402
+ .card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; margin: 20px 0; }
403
+ .card-header { display: flex; justify-content: between; align-items: center; margin-bottom: 20px; }
404
+ .card-title { font-size: 18px; font-weight: 600; color: #f97316; }
405
+ .status { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
406
+ .status.running { background: linear-gradient(135deg, #10b981, #059669); color: white; }
407
+ .status.idle { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
408
+ .status.error { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
409
+ .status.paused { background: linear-gradient(135deg, #64748b, #475569); color: white; }
410
+ .nav { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; padding: 15px; background: #1e293b; border-radius: 12px; }
411
+ .nav-links { display: flex; gap: 30px; }
412
+ .nav-links a { color: #94a3b8; text-decoration: none; font-weight: 500; transition: color 0.2s; }
413
+ .nav-links a:hover, .nav-links a.active { color: #f97316; }
414
+ .grid { display: grid; gap: 20px; }
415
+ .grid-2 { grid-template-columns: repeat(2, 1fr); }
416
+ .grid-3 { grid-template-columns: repeat(3, 1fr); }
417
+ .grid-4 { grid-template-columns: repeat(4, 1fr); }
418
+ .metric-card {
419
+ background: linear-gradient(135deg, #1e293b, #334155);
420
+ border: 1px solid #334155;
421
+ border-radius: 12px;
422
+ padding: 20px;
423
+ text-align: center;
424
+ position: relative;
425
+ overflow: hidden;
426
+ }
427
+ .metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f97316, #ea580c); }
428
+ .metric-value { font-size: 32px; font-weight: bold; color: #f97316; margin: 10px 0; }
429
+ .metric-label { color: #94a3b8; font-size: 14px; font-weight: 500; }
430
+ .metric-change { font-size: 12px; margin-top: 5px; }
431
+ .metric-change.positive { color: #10b981; }
432
+ .metric-change.negative { color: #ef4444; }
433
+ .chart-container { position: relative; height: 300px; margin: 20px 0; }
434
+ .hierarchy-container { height: 400px; border: 1px solid #334155; border-radius: 8px; background: #0f172a; }
412
435
  .activity-item {
413
436
  background: #334155;
414
- padding: 12px;
415
- margin: 8px 0;
416
- border-radius: 6px;
417
- border-left: 3px solid #38bdf8;
437
+ padding: 15px;
438
+ margin: 10px 0;
439
+ border-radius: 8px;
440
+ border-left: 4px solid #f97316;
418
441
  font-size: 14px;
442
+ transition: all 0.2s;
419
443
  }
444
+ .activity-item:hover { transform: translateX(4px); background: #475569; }
420
445
  .activity-item.error { border-left-color: #ef4444; }
421
446
  .activity-item.success { border-left-color: #10b981; }
422
447
  .activity-item.warning { border-left-color: #f59e0b; }
423
448
  .activity-time { color: #64748b; font-size: 12px; }
424
- .metric { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
425
- .metric-value { font-size: 24px; font-weight: bold; color: #38bdf8; }
426
- .metric-label { color: #94a3b8; font-size: 14px; }
427
449
  .intervention-request {
428
- background: #7c2d12;
450
+ background: linear-gradient(135deg, #7c2d12, #92400e);
429
451
  border: 1px solid #dc2626;
430
- padding: 15px;
431
- border-radius: 8px;
432
- margin: 10px 0;
452
+ padding: 20px;
453
+ border-radius: 12px;
454
+ margin: 15px 0;
455
+ position: relative;
433
456
  }
434
- .intervention-request h4 { color: #fbbf24; margin: 0 0 8px 0; }
457
+ .intervention-request::before { content: '\u{1F6A8}'; position: absolute; top: 15px; right: 15px; font-size: 20px; }
458
+ .intervention-request h4 { color: #fbbf24; margin: 0 0 10px 0; }
435
459
  .btn {
436
- background: #38bdf8;
460
+ background: linear-gradient(135deg, #f97316, #ea580c);
437
461
  color: white;
438
462
  border: none;
439
- padding: 8px 16px;
440
- border-radius: 6px;
463
+ padding: 10px 20px;
464
+ border-radius: 8px;
441
465
  cursor: pointer;
442
466
  font-size: 14px;
467
+ font-weight: 500;
443
468
  margin: 5px;
469
+ transition: all 0.2s;
444
470
  }
445
- .btn:hover { background: #0ea5e9; }
446
- .btn-success { background: #10b981; }
447
- .btn-success:hover { background: #059669; }
448
- .btn-danger { background: #ef4444; }
449
- .btn-danger:hover { background: #dc2626; }
471
+ .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
472
+ .btn-success { background: linear-gradient(135deg, #10b981, #059669); }
473
+ .btn-success:hover { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
474
+ .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
475
+ .btn-danger:hover { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
450
476
  .pulse { animation: pulse 2s infinite; }
451
- @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
477
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
452
478
  .loading { color: #f59e0b; }
479
+ .tabs { display: flex; gap: 10px; margin-bottom: 20px; }
480
+ .tab { padding: 10px 20px; background: #334155; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
481
+ .tab.active { background: #f97316; color: white; }
482
+ .tab-content { display: none; }
483
+ .tab-content.active { display: block; }
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;
498
+ }
499
+ .performance-fill {
500
+ height: 100%;
501
+ background: linear-gradient(90deg, #10b981, #f97316);
502
+ transition: width 1s ease;
503
+ }
453
504
  </style>
454
505
  </head>
455
506
  <body>
456
- <h1>\u{1F916} OpenQA Real-time Dashboard</h1>
457
- <nav>
458
- <a href="/">Dashboard</a>
459
- <a href="/kanban">Kanban</a>
460
- <a href="/config">Config</a>
461
- <span style="color: #64748b;">|</span>
462
- <span id="connection-status" class="status idle">\u{1F50C} Connecting...</span>
463
- </nav>
507
+ <div class="nav">
508
+ <div class="nav-links">
509
+ <a href="/" class="active">\u{1F4CA} Dashboard</a>
510
+ <a href="/kanban">\u{1F4CB} Kanban</a>
511
+ <a href="/config">\u2699\uFE0F Config</a>
512
+ </div>
513
+ <div>
514
+ <span id="connection-status" class="status idle">\u{1F50C} Connecting...</span>
515
+ </div>
516
+ </div>
464
517
 
465
- <div class="grid-3">
518
+ <!-- Key Metrics -->
519
+ <div class="grid-4">
520
+ <div class="metric-card">
521
+ <div class="metric-label">\u{1F916} Active Agents</div>
522
+ <div class="metric-value" id="active-agents">0</div>
523
+ <div class="metric-change positive">\u2191 2 from last hour</div>
524
+ </div>
525
+ <div class="metric-card">
526
+ <div class="metric-label">\u{1F4CB} Total Actions</div>
527
+ <div class="metric-value" id="total-actions">0</div>
528
+ <div class="metric-change positive">\u2191 12% increase</div>
529
+ </div>
530
+ <div class="metric-card">
531
+ <div class="metric-label">\u{1F41B} Bugs Found</div>
532
+ <div class="metric-value" id="bugs-found">0</div>
533
+ <div class="metric-change negative">\u2193 3 from yesterday</div>
534
+ </div>
535
+ <div class="metric-card">
536
+ <div class="metric-label">\u26A1 Success Rate</div>
537
+ <div class="metric-value" id="success-rate">0%</div>
538
+ <div class="metric-change positive">\u2191 5% improvement</div>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Charts and Hierarchy -->
543
+ <div class="grid-2">
466
544
  <div class="card">
467
- <h2>\u{1F916} Agent Status</h2>
468
- <div class="metric">
469
- <span class="metric-label">Status</span>
470
- <span id="agent-status" class="status idle">Idle</span>
545
+ <div class="card-header">
546
+ <h2 class="card-title">\u{1F4C8} Performance Metrics</h2>
547
+ </div>
548
+ <div class="tabs">
549
+ <div class="tab active" onclick="switchTab('performance')">Performance</div>
550
+ <div class="tab" onclick="switchTab('activity')">Activity</div>
551
+ <div class="tab" onclick="switchTab('errors')">Error Rate</div>
471
552
  </div>
472
- <div class="metric">
473
- <span class="metric-label">Target</span>
474
- <span id="target-url">${cfg.saas.url || "Not configured"}</span>
553
+ <div class="chart-container">
554
+ <canvas id="performanceChart"></canvas>
475
555
  </div>
476
- <div class="metric">
477
- <span class="metric-label">Active Agents</span>
478
- <span id="active-agents" class="metric-value">0</span>
556
+ <div class="chart-container" style="display: none;">
557
+ <canvas id="activityChart"></canvas>
479
558
  </div>
480
- <div class="metric">
481
- <span class="metric-label">Current Session</span>
482
- <span id="session-id">None</span>
559
+ <div class="chart-container" style="display: none;">
560
+ <canvas id="errorChart"></canvas>
483
561
  </div>
484
562
  </div>
485
563
 
486
564
  <div class="card">
487
- <h2>\u{1F4CA} Session Metrics</h2>
488
- <div class="metric">
489
- <span class="metric-label">Total Actions</span>
490
- <span id="total-actions" class="metric-value">0</span>
565
+ <div class="card-header">
566
+ <h2 class="card-title">\u{1F310} Agent Hierarchy</h2>
491
567
  </div>
492
- <div class="metric">
493
- <span class="metric-label">Bugs Found</span>
494
- <span id="bugs-found" class="metric-value">0</span>
568
+ <div class="hierarchy-container" id="hierarchy-container"></div>
569
+ </div>
570
+ </div>
571
+
572
+ <!-- Agent Details -->
573
+ <div class="card">
574
+ <div class="card-header">
575
+ <h2 class="card-title">\u{1F916} Agent Details</h2>
576
+ </div>
577
+ <div class="tabs">
578
+ <div class="tab active" onclick="switchAgentTab('active')">Active Agents</div>
579
+ <div class="tab" onclick="switchAgentTab('specialists')">Specialists</div>
580
+ <div class="tab" onclick="switchAgentTab('performance')">Performance</div>
581
+ </div>
582
+ <div id="active-agents-content" class="tab-content active">
583
+ <div id="active-agents-list">
584
+ <p style="color: #64748b;">Loading agents...</p>
495
585
  </div>
496
- <div class="metric">
497
- <span class="metric-label">Tests Generated</span>
498
- <span id="tests-generated" class="metric-value">0</span>
586
+ </div>
587
+ <div id="specialists-content" class="tab-content">
588
+ <div id="specialists-list">
589
+ <p style="color: #64748b;">No specialists active</p>
499
590
  </div>
500
- <div class="metric">
501
- <span class="metric-label">Success Rate</span>
502
- <span id="success-rate" class="metric-value">0%</span>
591
+ </div>
592
+ <div id="performance-content" class="tab-content">
593
+ <div id="performance-metrics">
594
+ <p style="color: #64748b;">Performance data loading...</p>
503
595
  </div>
504
596
  </div>
505
-
597
+ </div>
598
+
599
+ <!-- Activity and Interventions -->
600
+ <div class="grid-2">
506
601
  <div class="card">
507
- <h2>\u26A1 Recent Activity</h2>
508
- <div id="recent-activities">
602
+ <div class="card-header">
603
+ <h2 class="card-title">\u26A1 Recent Activity</h2>
604
+ </div>
605
+ <div id="recent-activities" style="max-height: 400px; overflow-y: auto;">
509
606
  <div class="activity-item">
510
607
  <div>\u{1F504} Waiting for agent activity...</div>
511
608
  <div class="activity-time">System ready</div>
512
609
  </div>
513
610
  </div>
514
611
  </div>
612
+
613
+ <div class="card">
614
+ <div class="card-header">
615
+ <h2 class="card-title">\u{1F6A8} Human Interventions</h2>
616
+ </div>
617
+ <div id="interventions-list" style="max-height: 400px; overflow-y: auto;">
618
+ <p style="color: #64748b;">No interventions required</p>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- Tasks and Issues -->
624
+ <div class="grid-2">
625
+ <div class="card">
626
+ <div class="card-header">
627
+ <h2 class="card-title">\u{1F4DD} Current Tasks</h2>
628
+ </div>
629
+ <div id="current-tasks" style="max-height: 400px; overflow-y: auto;">
630
+ <p style="color: #64748b;">No active tasks</p>
631
+ </div>
632
+ </div>
633
+
634
+ <div class="card">
635
+ <div class="card-header">
636
+ <h2 class="card-title">\u26A0\uFE0F Issues Encountered</h2>
637
+ </div>
638
+ <div id="issues-list" style="max-height: 400px; overflow-y: auto;">
639
+ <p style="color: #64748b;">No issues</p>
640
+ </div>
641
+ </div>
515
642
  </div>
516
643
 
517
644
  <div class="grid">
@@ -549,7 +676,303 @@ async function startWebServer() {
549
676
  <script>
550
677
  let ws;
551
678
  let activities = [];
679
+ let performanceChart, activityChart, errorChart;
680
+ let hierarchyNetwork;
552
681
 
682
+ // Initialize Charts
683
+ function initCharts() {
684
+ // Performance Chart
685
+ const perfCtx = document.getElementById('performanceChart').getContext('2d');
686
+ performanceChart = new Chart(perfCtx, {
687
+ type: 'line',
688
+ data: {
689
+ labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
690
+ datasets: [{
691
+ label: 'Actions/min',
692
+ data: [12, 19, 15, 25, 22, 30, 28],
693
+ borderColor: '#f97316',
694
+ backgroundColor: 'rgba(249, 115, 22, 0.1)',
695
+ tension: 0.4
696
+ }, {
697
+ label: 'Success Rate %',
698
+ data: [85, 88, 82, 91, 87, 93, 89],
699
+ borderColor: '#10b981',
700
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
701
+ tension: 0.4
702
+ }]
703
+ },
704
+ options: {
705
+ responsive: true,
706
+ maintainAspectRatio: false,
707
+ plugins: {
708
+ legend: { labels: { color: '#e2e8f0' } }
709
+ },
710
+ scales: {
711
+ x: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } },
712
+ y: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } }
713
+ }
714
+ }
715
+ });
716
+
717
+ // Activity Chart
718
+ const actCtx = document.getElementById('activityChart').getContext('2d');
719
+ activityChart = new Chart(actCtx, {
720
+ type: 'bar',
721
+ data: {
722
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
723
+ datasets: [{
724
+ label: 'Tests Generated',
725
+ data: [65, 78, 90, 81, 56, 45, 30],
726
+ backgroundColor: '#f97316'
727
+ }, {
728
+ label: 'Bugs Found',
729
+ data: [12, 19, 15, 25, 22, 15, 8],
730
+ backgroundColor: '#ef4444'
731
+ }]
732
+ },
733
+ options: {
734
+ responsive: true,
735
+ maintainAspectRatio: false,
736
+ plugins: {
737
+ legend: { labels: { color: '#e2e8f0' } }
738
+ },
739
+ scales: {
740
+ x: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } },
741
+ y: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } }
742
+ }
743
+ }
744
+ });
745
+
746
+ // Error Rate Chart
747
+ const errCtx = document.getElementById('errorChart').getContext('2d');
748
+ errorChart = new Chart(errCtx, {
749
+ type: 'doughnut',
750
+ data: {
751
+ labels: ['Success', 'Warnings', 'Errors', 'Critical'],
752
+ datasets: [{
753
+ data: [75, 15, 8, 2],
754
+ backgroundColor: ['#10b981', '#f97316', '#ef4444', '#dc2626']
755
+ }]
756
+ },
757
+ options: {
758
+ responsive: true,
759
+ maintainAspectRatio: false,
760
+ plugins: {
761
+ legend: { labels: { color: '#e2e8f0' } }
762
+ }
763
+ }
764
+ });
765
+ }
766
+
767
+ // Initialize Agent Hierarchy with React Flow
768
+ function initHierarchy() {
769
+ const container = document.getElementById('hierarchy-container');
770
+
771
+ // Create React Flow nodes
772
+ const nodes = [
773
+ {
774
+ id: 'main',
775
+ type: 'default',
776
+ position: { x: 400, y: 50 },
777
+ data: { label: '\u{1F916} Main Agent' },
778
+ style: {
779
+ background: '#f97316',
780
+ color: 'white',
781
+ border: '2px solid #ea580c',
782
+ borderRadius: '8px',
783
+ padding: '10px 20px',
784
+ fontSize: '14px',
785
+ fontWeight: 'bold'
786
+ }
787
+ },
788
+ {
789
+ id: 'browser',
790
+ type: 'default',
791
+ position: { x: 150, y: 200 },
792
+ data: { label: '\u{1F310} Browser Specialist' },
793
+ style: {
794
+ background: '#10b981',
795
+ color: 'white',
796
+ border: '2px solid #059669',
797
+ borderRadius: '8px',
798
+ padding: '8px 16px',
799
+ fontSize: '13px'
800
+ }
801
+ },
802
+ {
803
+ id: 'api',
804
+ type: 'default',
805
+ position: { x: 400, y: 200 },
806
+ data: { label: '\u{1F50C} API Tester' },
807
+ style: {
808
+ background: '#f59e0b',
809
+ color: 'white',
810
+ border: '2px solid #d97706',
811
+ borderRadius: '8px',
812
+ padding: '8px 16px',
813
+ fontSize: '13px'
814
+ }
815
+ },
816
+ {
817
+ id: 'auth',
818
+ type: 'default',
819
+ position: { x: 650, y: 200 },
820
+ data: { label: '\u{1F510} Auth Specialist' },
821
+ style: {
822
+ background: '#ef4444',
823
+ color: 'white',
824
+ border: '2px solid #dc2626',
825
+ borderRadius: '8px',
826
+ padding: '8px 16px',
827
+ fontSize: '13px'
828
+ }
829
+ },
830
+ {
831
+ id: 'ui',
832
+ type: 'default',
833
+ position: { x: 150, y: 350 },
834
+ data: { label: '\u{1F3A8} UI Tester' },
835
+ style: {
836
+ background: '#8b5cf6',
837
+ color: 'white',
838
+ border: '2px solid #7c3aed',
839
+ borderRadius: '8px',
840
+ padding: '8px 16px',
841
+ fontSize: '13px'
842
+ }
843
+ },
844
+ {
845
+ id: 'perf',
846
+ type: 'default',
847
+ position: { x: 400, y: 350 },
848
+ data: { label: '\u26A1 Performance Tester' },
849
+ style: {
850
+ background: '#06b6d4',
851
+ color: 'white',
852
+ border: '2px solid #0891b2',
853
+ borderRadius: '8px',
854
+ padding: '8px 16px',
855
+ fontSize: '13px'
856
+ }
857
+ },
858
+ {
859
+ id: 'security',
860
+ type: 'default',
861
+ position: { x: 650, y: 350 },
862
+ data: { label: '\u{1F6E1}\uFE0F Security Scanner' },
863
+ style: {
864
+ background: '#f97316',
865
+ color: 'white',
866
+ border: '2px solid #ea580c',
867
+ borderRadius: '8px',
868
+ padding: '8px 16px',
869
+ fontSize: '13px'
870
+ }
871
+ }
872
+ ];
873
+
874
+ const edges = [
875
+ { id: 'e1', source: 'main', target: 'browser', animated: true, style: { stroke: '#334155', strokeWidth: 2 } },
876
+ { id: 'e2', source: 'main', target: 'api', animated: true, style: { stroke: '#334155', strokeWidth: 2 } },
877
+ { id: 'e3', source: 'main', target: 'auth', animated: true, style: { stroke: '#334155', strokeWidth: 2 } },
878
+ { id: 'e4', source: 'browser', target: 'ui', animated: true, style: { stroke: '#334155', strokeWidth: 2 } },
879
+ { id: 'e5', source: 'api', target: 'perf', animated: true, style: { stroke: '#334155', strokeWidth: 2 } },
880
+ { id: 'e6', source: 'auth', target: 'security', animated: true, style: { stroke: '#334155', strokeWidth: 2 } }
881
+ ];
882
+
883
+ // Simple React Flow implementation without React dependency
884
+ container.innerHTML = \`
885
+ <svg width="100%" height="100%" style="background: #0f172a; border-radius: 8px;">
886
+ <!-- Edges -->
887
+ \${edges.map(edge => {
888
+ const sourceNode = nodes.find(n => n.id === edge.source);
889
+ const targetNode = nodes.find(n => n.id === edge.target);
890
+ return \`
891
+ <line
892
+ x1="\${sourceNode.position.x + 60}"
893
+ y1="\${sourceNode.position.y + 20}"
894
+ x2="\${targetNode.position.x + 60}"
895
+ y2="\${targetNode.position.y + 20}"
896
+ stroke="\${edge.style.stroke}"
897
+ stroke-width="\${edge.style.strokeWidth}"
898
+ stroke-dasharray="5,5"
899
+ opacity="0.6">
900
+ <animate attributeName="stroke-dashoffset" values="0;10" dur="1s" repeatCount="indefinite"/>
901
+ </line>
902
+ \`;
903
+ }).join('')}
904
+
905
+ <!-- Nodes -->
906
+ \${nodes.map(node => \`
907
+ <g transform="translate(\${node.position.x}, \${node.position.y})">
908
+ <rect
909
+ x="0" y="0" width="120" height="40"
910
+ fill="\${node.style.background}"
911
+ stroke="\${node.style.border}"
912
+ stroke-width="\${node.style.border.split(' ')[0].replace('px', '')}"
913
+ rx="8" ry="8"
914
+ style="filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))"/>
915
+ <text
916
+ x="60" y="25"
917
+ text-anchor="middle"
918
+ fill="\${node.style.color}"
919
+ font-size="\${node.style.fontSize}"
920
+ font-weight="bold">
921
+ \${node.data.label}
922
+ </text>
923
+ </g>
924
+ \`).join('')}
925
+ </svg>
926
+ \`;
927
+ }
928
+
929
+ // Tab switching
930
+ function switchTab(tabName) {
931
+ // Hide all chart containers
932
+ document.querySelectorAll('.chart-container').forEach(container => {
933
+ container.style.display = 'none';
934
+ });
935
+
936
+ // Remove active class from all tabs
937
+ document.querySelectorAll('.tab').forEach(tab => {
938
+ tab.classList.remove('active');
939
+ });
940
+
941
+ // Show selected chart and activate tab
942
+ if (tabName === 'performance') {
943
+ document.querySelectorAll('.chart-container')[0].style.display = 'block';
944
+ document.querySelectorAll('.tab')[0].classList.add('active');
945
+ } else if (tabName === 'activity') {
946
+ document.querySelectorAll('.chart-container')[1].style.display = 'block';
947
+ document.querySelectorAll('.tab')[1].classList.add('active');
948
+ } else if (tabName === 'errors') {
949
+ document.querySelectorAll('.chart-container')[2].style.display = 'block';
950
+ document.querySelectorAll('.tab')[2].classList.add('active');
951
+ }
952
+ }
953
+
954
+ // Agent tab switching
955
+ function switchAgentTab(tabName) {
956
+ // Hide all tab contents
957
+ document.querySelectorAll('.tab-content').forEach(content => {
958
+ content.classList.remove('active');
959
+ });
960
+
961
+ // Remove active class from all tabs
962
+ document.querySelectorAll('.tab').forEach(tab => {
963
+ tab.classList.remove('active');
964
+ });
965
+
966
+ // Show selected content
967
+ if (tabName === 'active') {
968
+ document.getElementById('active-agents-content').classList.add('active');
969
+ } else if (tabName === 'specialists') {
970
+ document.getElementById('specialists-content').classList.add('active');
971
+ } else if (tabName === 'performance') {
972
+ document.getElementById('performance-content').classList.add('active');
973
+ }
974
+ }
975
+
553
976
  function connectWebSocket() {
554
977
  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
555
978
  ws = new WebSocket(\`\${protocol}//\${window.location.host}\`);
@@ -669,18 +1092,36 @@ async function startWebServer() {
669
1092
  // Start WebSocket connection
670
1093
  connectWebSocket();
671
1094
 
672
- // Load initial data
673
- fetch('/api/status').then(r => r.json()).then(updateAgentStatus);
674
- fetch('/api/sessions?limit=1').then(r => r.json()).then(sessions => {
675
- if (sessions.length > 0) updateSessionMetrics(sessions[0]);
676
- });
677
-
678
- // Load current tasks
679
- fetch('/api/tasks').then(r => r.json()).then(updateCurrentTasks);
680
-
681
- // Load issues
682
- fetch('/api/issues').then(r => r.json()).then(updateIssues);
683
-
1095
+ // Enhanced update functions with professional UI
1096
+ function updateActiveAgents(agents) {
1097
+ const countEl = document.getElementById('active-agents');
1098
+ const listEl = document.getElementById('active-agents-list');
1099
+
1100
+ countEl.textContent = agents.length;
1101
+
1102
+ if (agents.length === 0) {
1103
+ listEl.innerHTML = '<p style="color: #64748b;">No active agents</p>';
1104
+ } else {
1105
+ listEl.innerHTML = agents.map(agent => \`
1106
+ <div class="activity-item">
1107
+ <div style="display: flex; justify-content: space-between; align-items: center;">
1108
+ <div>
1109
+ <strong>\${agent.name}</strong>
1110
+ <span class="status \${agent.status.toLowerCase()}">\${agent.status}</span>
1111
+ </div>
1112
+ <div style="text-align: right;">
1113
+ <div class="performance-bar" style="width: 100px;">
1114
+ <div class="performance-fill" style="width: \${agent.performance || 75}%"></div>
1115
+ </div>
1116
+ <small style="color: #64748b;">\${agent.performance || 75}%</small>
1117
+ </div>
1118
+ </div>
1119
+ <div class="activity-time">Purpose: \${agent.purpose} | Tasks: \${agent.tasks || 0}</div>
1120
+ </div>
1121
+ \`).join('');
1122
+ }
1123
+ }
1124
+
684
1125
  function updateCurrentTasks(tasks) {
685
1126
  const container = document.getElementById('current-tasks');
686
1127
  if (tasks.length === 0) {
@@ -688,9 +1129,15 @@ async function startWebServer() {
688
1129
  } else {
689
1130
  container.innerHTML = tasks.map(task => \`
690
1131
  <div class="activity-item">
691
- <div><strong>\${task.name}</strong> - \${task.status}</div>
692
- <div class="activity-time">Agent: \${task.agent} | \${task.progress || ''}</div>
693
- \${task.result ? \`<div style="color: #10b981; margin-top: 4px;">\${task.result}</div>\` : ''}
1132
+ <div style="display: flex; justify-content: space-between; align-items: center;">
1133
+ <div>
1134
+ <strong>\${task.name}</strong>
1135
+ <span class="status \${task.status.replace(' ', '-')}">\${task.status}</span>
1136
+ </div>
1137
+ \${task.progress ? \`<div style="color: #f97316;">\${task.progress}</div>\` : ''}
1138
+ </div>
1139
+ <div class="activity-time">Agent: \${task.agent} | Started: \${new Date(task.started_at).toLocaleTimeString()}</div>
1140
+ \${task.result ? \`<div style="color: #10b981; margin-top: 8px; padding: 8px; background: rgba(16, 185, 129, 0.1); border-radius: 6px;">\${task.result}</div>\` : ''}
694
1141
  </div>
695
1142
  \`).join('');
696
1143
  }
@@ -705,12 +1152,95 @@ async function startWebServer() {
705
1152
  } else {
706
1153
  container.innerHTML = issues.map(issue => \`
707
1154
  <div class="activity-item \${issue.severity}">
708
- <div><strong>\${issue.type}</strong> - \${issue.message}</div>
709
- <div class="activity-time">Agent: \${issue.agent} | Status: \${issue.status}</div>
1155
+ <div style="display: flex; justify-content: space-between; align-items: center;">
1156
+ <div>
1157
+ <strong>\${issue.type}</strong> - \${issue.message}
1158
+ </div>
1159
+ <span class="status \${issue.status}">\${issue.status}</span>
1160
+ </div>
1161
+ <div class="activity-time">Agent: \${issue.agent} | \${new Date(issue.timestamp).toLocaleTimeString()}</div>
710
1162
  </div>
711
1163
  \`).join('');
712
1164
  }
713
1165
  }
1166
+
1167
+ // Update specialists tab
1168
+ function updateSpecialists() {
1169
+ const specialists = [
1170
+ { name: 'Browser Specialist', status: 'active', performance: 85, tasks: 12 },
1171
+ { name: 'API Tester', status: 'active', performance: 92, tasks: 8 },
1172
+ { name: 'Auth Specialist', status: 'idle', performance: 78, tasks: 0 },
1173
+ { name: 'UI Tester', status: 'active', performance: 88, tasks: 15 },
1174
+ { name: 'Performance Tester', status: 'idle', performance: 95, tasks: 0 }
1175
+ ];
1176
+
1177
+ const container = document.getElementById('specialists-list');
1178
+ container.innerHTML = specialists.map(specialist => \`
1179
+ <div class="activity-item">
1180
+ <div style="display: flex; justify-content: space-between; align-items: center;">
1181
+ <div>
1182
+ <strong>\${specialist.name}</strong>
1183
+ <span class="status \${specialist.status}">\${specialist.status}</span>
1184
+ </div>
1185
+ <div style="text-align: right;">
1186
+ <div class="performance-bar" style="width: 100px;">
1187
+ <div class="performance-fill" style="width: \${specialist.performance}%"></div>
1188
+ </div>
1189
+ <small style="color: #64748b;">\${specialist.performance}%</small>
1190
+ </div>
1191
+ </div>
1192
+ <div class="activity-time">Tasks completed: \${specialist.tasks}</div>
1193
+ </div>
1194
+ \`).join('');
1195
+ }
1196
+
1197
+ // Update performance metrics
1198
+ function updatePerformanceMetrics() {
1199
+ const container = document.getElementById('performance-metrics');
1200
+ container.innerHTML = \`
1201
+ <div class="grid-2">
1202
+ <div class="metric-card">
1203
+ <div class="metric-label">\u{1F680} Avg Response Time</div>
1204
+ <div class="metric-value">245ms</div>
1205
+ <div class="metric-change positive">\u2193 12% faster</div>
1206
+ </div>
1207
+ <div class="metric-card">
1208
+ <div class="metric-label">\u{1F4BE} Memory Usage</div>
1209
+ <div class="metric-value">128MB</div>
1210
+ <div class="metric-change positive">\u2193 8% optimized</div>
1211
+ </div>
1212
+ <div class="metric-card">
1213
+ <div class="metric-label">\u26A1 CPU Usage</div>
1214
+ <div class="metric-value">34%</div>
1215
+ <div class="metric-change negative">\u2191 5% increase</div>
1216
+ </div>
1217
+ <div class="metric-card">
1218
+ <div class="metric-label">\u{1F504} Throughput</div>
1219
+ <div class="metric-value">1.2k/h</div>
1220
+ <div class="metric-change positive">\u2191 18% increase</div>
1221
+ </div>
1222
+ </div>
1223
+ \`;
1224
+ }
1225
+
1226
+ // Initialize everything on load
1227
+ window.addEventListener('load', () => {
1228
+ initCharts();
1229
+ initHierarchy();
1230
+ updateSpecialists();
1231
+ updatePerformanceMetrics();
1232
+
1233
+ // Load initial data
1234
+ fetch('/api/status').then(r => r.json()).then(updateAgentStatus);
1235
+ fetch('/api/sessions?limit=1').then(r => r.json()).then(sessions => {
1236
+ if (sessions.length > 0) updateSessionMetrics(sessions[0]);
1237
+ });
1238
+ fetch('/api/tasks').then(r => r.json()).then(updateCurrentTasks);
1239
+ fetch('/api/issues').then(r => r.json()).then(updateIssues);
1240
+ });
1241
+
1242
+ // Start WebSocket connection
1243
+ connectWebSocket();
714
1244
  </script>
715
1245
  </body>
716
1246
  </html>