claude-code-templates 1.12.2 → 1.13.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.
- package/package.json +1 -1
- package/src/analytics/core/AgentAnalyzer.js +341 -0
- package/src/analytics/core/SessionAnalyzer.js +101 -46
- package/src/analytics-web/components/AgentAnalytics.js +710 -0
- package/src/analytics-web/components/DashboardPage.js +810 -39
- package/src/analytics-web/components/SessionTimer.js +14 -11
- package/src/analytics-web/index.html +666 -65
- package/src/analytics.js +112 -10
- package/src/analytics-web/components/Dashboard.js.deprecated +0 -589
|
@@ -646,8 +646,8 @@
|
|
|
646
646
|
}
|
|
647
647
|
|
|
648
648
|
.session-timer-accordion {
|
|
649
|
-
background:
|
|
650
|
-
border: 1px solid
|
|
649
|
+
background: var(--bg-secondary);
|
|
650
|
+
border: 1px solid var(--border-primary);
|
|
651
651
|
border-radius: 6px;
|
|
652
652
|
margin-bottom: 15px;
|
|
653
653
|
position: relative;
|
|
@@ -659,12 +659,12 @@
|
|
|
659
659
|
align-items: center;
|
|
660
660
|
padding: 12px 16px;
|
|
661
661
|
cursor: pointer;
|
|
662
|
-
border-bottom: 1px solid
|
|
662
|
+
border-bottom: 1px solid var(--border-primary);
|
|
663
663
|
transition: background-color 0.2s ease;
|
|
664
664
|
}
|
|
665
665
|
|
|
666
666
|
.session-timer-header:hover {
|
|
667
|
-
background:
|
|
667
|
+
background: var(--bg-tertiary);
|
|
668
668
|
}
|
|
669
669
|
|
|
670
670
|
.session-timer-title-section {
|
|
@@ -675,12 +675,12 @@
|
|
|
675
675
|
|
|
676
676
|
.session-timer-chevron {
|
|
677
677
|
font-size: 0.75rem;
|
|
678
|
-
color:
|
|
678
|
+
color: var(--text-secondary);
|
|
679
679
|
transition: transform 0.2s ease;
|
|
680
680
|
}
|
|
681
681
|
|
|
682
682
|
.session-timer-title {
|
|
683
|
-
color:
|
|
683
|
+
color: var(--text-accent);
|
|
684
684
|
font-size: 0.9rem;
|
|
685
685
|
font-weight: 500;
|
|
686
686
|
margin: 0;
|
|
@@ -713,7 +713,7 @@
|
|
|
713
713
|
}
|
|
714
714
|
|
|
715
715
|
.session-timer-status-text {
|
|
716
|
-
color:
|
|
716
|
+
color: var(--text-primary);
|
|
717
717
|
}
|
|
718
718
|
|
|
719
719
|
.session-timer-content {
|
|
@@ -750,13 +750,13 @@
|
|
|
750
750
|
}
|
|
751
751
|
|
|
752
752
|
.session-timer-empty-text {
|
|
753
|
-
color:
|
|
753
|
+
color: var(--text-primary);
|
|
754
754
|
font-size: 0.9rem;
|
|
755
755
|
margin-bottom: 4px;
|
|
756
756
|
}
|
|
757
757
|
|
|
758
758
|
.session-timer-empty-subtext {
|
|
759
|
-
color:
|
|
759
|
+
color: var(--text-secondary);
|
|
760
760
|
font-size: 0.8rem;
|
|
761
761
|
}
|
|
762
762
|
|
|
@@ -780,13 +780,13 @@
|
|
|
780
780
|
.session-timer-time-value {
|
|
781
781
|
font-size: 1.5rem;
|
|
782
782
|
font-weight: 700;
|
|
783
|
-
color:
|
|
783
|
+
color: var(--text-accent);
|
|
784
784
|
line-height: 1;
|
|
785
785
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
786
786
|
}
|
|
787
787
|
|
|
788
788
|
.session-timer-time-label {
|
|
789
|
-
color:
|
|
789
|
+
color: var(--text-secondary);
|
|
790
790
|
font-size: 0.75rem;
|
|
791
791
|
margin-top: 2px;
|
|
792
792
|
}
|
|
@@ -811,13 +811,13 @@
|
|
|
811
811
|
}
|
|
812
812
|
|
|
813
813
|
.session-timer-progress-label {
|
|
814
|
-
color:
|
|
814
|
+
color: var(--text-primary);
|
|
815
815
|
font-size: 0.75rem;
|
|
816
816
|
font-weight: 500;
|
|
817
817
|
}
|
|
818
818
|
|
|
819
819
|
.session-timer-progress-value {
|
|
820
|
-
color:
|
|
820
|
+
color: var(--text-secondary);
|
|
821
821
|
font-size: 0.75rem;
|
|
822
822
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
823
823
|
display: inline-flex;
|
|
@@ -827,7 +827,7 @@
|
|
|
827
827
|
.session-timer-progress-bar {
|
|
828
828
|
width: 100%;
|
|
829
829
|
height: 4px;
|
|
830
|
-
background:
|
|
830
|
+
background: var(--border-primary);
|
|
831
831
|
border-radius: 2px;
|
|
832
832
|
overflow: hidden;
|
|
833
833
|
position: relative;
|
|
@@ -835,7 +835,7 @@
|
|
|
835
835
|
|
|
836
836
|
.session-timer-progress-fill {
|
|
837
837
|
height: 100%;
|
|
838
|
-
background:
|
|
838
|
+
background: var(--text-success);
|
|
839
839
|
transition: width 0.3s ease, background-color 0.3s ease;
|
|
840
840
|
border-radius: 2px;
|
|
841
841
|
}
|
|
@@ -844,7 +844,7 @@
|
|
|
844
844
|
display: flex;
|
|
845
845
|
gap: 12px;
|
|
846
846
|
padding-top: 8px;
|
|
847
|
-
border-top: 1px solid
|
|
847
|
+
border-top: 1px solid var(--border-primary);
|
|
848
848
|
flex-wrap: wrap;
|
|
849
849
|
}
|
|
850
850
|
|
|
@@ -857,13 +857,13 @@
|
|
|
857
857
|
}
|
|
858
858
|
|
|
859
859
|
.session-timer-stat-label {
|
|
860
|
-
color:
|
|
860
|
+
color: var(--text-secondary);
|
|
861
861
|
font-size: 0.75rem;
|
|
862
862
|
white-space: nowrap;
|
|
863
863
|
}
|
|
864
864
|
|
|
865
865
|
.session-timer-stat-value {
|
|
866
|
-
color:
|
|
866
|
+
color: var(--text-primary);
|
|
867
867
|
font-weight: 500;
|
|
868
868
|
font-size: 0.75rem;
|
|
869
869
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
@@ -875,7 +875,7 @@
|
|
|
875
875
|
.session-timer-error {
|
|
876
876
|
text-align: center;
|
|
877
877
|
padding: 20px;
|
|
878
|
-
color:
|
|
878
|
+
color: var(--text-error);
|
|
879
879
|
}
|
|
880
880
|
|
|
881
881
|
.session-timer-error-text {
|
|
@@ -884,9 +884,9 @@
|
|
|
884
884
|
}
|
|
885
885
|
|
|
886
886
|
.session-timer-retry-btn {
|
|
887
|
-
background:
|
|
888
|
-
border: 1px solid
|
|
889
|
-
color:
|
|
887
|
+
background: var(--text-error);
|
|
888
|
+
border: 1px solid var(--text-error);
|
|
889
|
+
color: var(--bg-primary);
|
|
890
890
|
padding: 6px 12px;
|
|
891
891
|
border-radius: 4px;
|
|
892
892
|
cursor: pointer;
|
|
@@ -895,8 +895,7 @@
|
|
|
895
895
|
}
|
|
896
896
|
|
|
897
897
|
.session-timer-retry-btn:hover {
|
|
898
|
-
|
|
899
|
-
border-color: #da3633;
|
|
898
|
+
opacity: 0.8;
|
|
900
899
|
}
|
|
901
900
|
|
|
902
901
|
.session-warnings {
|
|
@@ -946,7 +945,7 @@
|
|
|
946
945
|
}
|
|
947
946
|
|
|
948
947
|
.session-timer-info-icon {
|
|
949
|
-
color:
|
|
948
|
+
color: var(--text-secondary);
|
|
950
949
|
font-size: 0.7rem;
|
|
951
950
|
cursor: pointer;
|
|
952
951
|
transition: all 0.2s ease;
|
|
@@ -961,7 +960,7 @@
|
|
|
961
960
|
}
|
|
962
961
|
|
|
963
962
|
.session-timer-info-icon:hover {
|
|
964
|
-
color:
|
|
963
|
+
color: var(--text-info);
|
|
965
964
|
opacity: 1;
|
|
966
965
|
background-color: rgba(88, 166, 255, 0.1);
|
|
967
966
|
}
|
|
@@ -973,8 +972,8 @@
|
|
|
973
972
|
.session-timer-tooltip {
|
|
974
973
|
position: absolute;
|
|
975
974
|
z-index: 1000;
|
|
976
|
-
background:
|
|
977
|
-
border: 1px solid
|
|
975
|
+
background: var(--bg-primary);
|
|
976
|
+
border: 1px solid var(--border-primary);
|
|
978
977
|
border-radius: 6px;
|
|
979
978
|
padding: 0;
|
|
980
979
|
box-shadow: 0 16px 32px rgba(1, 4, 9, 0.85);
|
|
@@ -989,14 +988,14 @@
|
|
|
989
988
|
|
|
990
989
|
.session-timer-tooltip-content h4 {
|
|
991
990
|
margin: 0 0 8px 0;
|
|
992
|
-
color:
|
|
991
|
+
color: var(--text-primary);
|
|
993
992
|
font-size: 0.8rem;
|
|
994
993
|
font-weight: 600;
|
|
995
994
|
}
|
|
996
995
|
|
|
997
996
|
.session-timer-tooltip-content p {
|
|
998
997
|
margin: 0 0 8px 0;
|
|
999
|
-
color:
|
|
998
|
+
color: var(--text-primary);
|
|
1000
999
|
line-height: 1.5;
|
|
1001
1000
|
}
|
|
1002
1001
|
|
|
@@ -1005,12 +1004,12 @@
|
|
|
1005
1004
|
}
|
|
1006
1005
|
|
|
1007
1006
|
.session-timer-tooltip-link {
|
|
1008
|
-
border-top: 1px solid
|
|
1007
|
+
border-top: 1px solid var(--border-primary);
|
|
1009
1008
|
padding-top: 8px;
|
|
1010
1009
|
}
|
|
1011
1010
|
|
|
1012
1011
|
.session-timer-tooltip-link a {
|
|
1013
|
-
color:
|
|
1012
|
+
color: var(--text-info);
|
|
1014
1013
|
text-decoration: none;
|
|
1015
1014
|
display: inline-flex;
|
|
1016
1015
|
align-items: center;
|
|
@@ -1019,7 +1018,7 @@
|
|
|
1019
1018
|
}
|
|
1020
1019
|
|
|
1021
1020
|
.session-timer-tooltip-link a:hover {
|
|
1022
|
-
|
|
1021
|
+
opacity: 0.8;
|
|
1023
1022
|
}
|
|
1024
1023
|
|
|
1025
1024
|
.session-timer-tooltip-link i {
|
|
@@ -3056,7 +3055,7 @@
|
|
|
3056
3055
|
/* Metrics Cards */
|
|
3057
3056
|
.metrics-cards-container {
|
|
3058
3057
|
display: grid;
|
|
3059
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
3058
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
3060
3059
|
gap: 20px;
|
|
3061
3060
|
margin: 20px 0 30px 0;
|
|
3062
3061
|
}
|
|
@@ -3067,35 +3066,27 @@
|
|
|
3067
3066
|
border-radius: 8px;
|
|
3068
3067
|
padding: 20px;
|
|
3069
3068
|
transition: all 0.2s ease;
|
|
3069
|
+
display: flex;
|
|
3070
|
+
flex-direction: column;
|
|
3071
|
+
gap: 16px;
|
|
3072
|
+
min-height: 220px;
|
|
3073
|
+
max-height: 260px;
|
|
3074
|
+
overflow: hidden;
|
|
3070
3075
|
}
|
|
3071
3076
|
|
|
3072
3077
|
.metric-card:hover {
|
|
3073
3078
|
border-color: var(--text-accent);
|
|
3074
3079
|
background: var(--bg-tertiary);
|
|
3080
|
+
transform: translateY(-2px);
|
|
3081
|
+
box-shadow: 0 8px 16px var(--shadow-primary);
|
|
3075
3082
|
}
|
|
3076
3083
|
|
|
3077
|
-
.metric-
|
|
3084
|
+
.metric-primary {
|
|
3078
3085
|
display: flex;
|
|
3086
|
+
flex-direction: column;
|
|
3079
3087
|
align-items: center;
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
}
|
|
3083
|
-
|
|
3084
|
-
.metric-icon {
|
|
3085
|
-
font-size: 1.25rem;
|
|
3086
|
-
opacity: 0.8;
|
|
3087
|
-
}
|
|
3088
|
-
|
|
3089
|
-
.metric-title {
|
|
3090
|
-
font-size: 0.875rem;
|
|
3091
|
-
font-weight: 600;
|
|
3092
|
-
color: var(--text-secondary);
|
|
3093
|
-
text-transform: uppercase;
|
|
3094
|
-
letter-spacing: 0.5px;
|
|
3095
|
-
}
|
|
3096
|
-
|
|
3097
|
-
.metric-primary {
|
|
3098
|
-
margin-bottom: 16px;
|
|
3088
|
+
text-align: center;
|
|
3089
|
+
flex-shrink: 0;
|
|
3099
3090
|
}
|
|
3100
3091
|
|
|
3101
3092
|
.metric-primary-value {
|
|
@@ -3103,13 +3094,16 @@
|
|
|
3103
3094
|
font-size: 2rem;
|
|
3104
3095
|
font-weight: bold;
|
|
3105
3096
|
color: var(--text-accent);
|
|
3106
|
-
line-height: 1
|
|
3107
|
-
margin-bottom:
|
|
3097
|
+
line-height: 1;
|
|
3098
|
+
margin-bottom: 6px;
|
|
3099
|
+
word-break: break-all;
|
|
3100
|
+
overflow-wrap: break-word;
|
|
3108
3101
|
}
|
|
3109
3102
|
|
|
3110
3103
|
.metric-primary-label {
|
|
3111
|
-
font-size: 0.
|
|
3104
|
+
font-size: 0.9rem;
|
|
3112
3105
|
color: var(--text-secondary);
|
|
3106
|
+
font-weight: 600;
|
|
3113
3107
|
text-transform: uppercase;
|
|
3114
3108
|
letter-spacing: 0.5px;
|
|
3115
3109
|
}
|
|
@@ -3117,7 +3111,12 @@
|
|
|
3117
3111
|
.metric-secondary {
|
|
3118
3112
|
display: flex;
|
|
3119
3113
|
flex-direction: column;
|
|
3120
|
-
gap:
|
|
3114
|
+
gap: 6px;
|
|
3115
|
+
flex: 1;
|
|
3116
|
+
overflow-y: auto;
|
|
3117
|
+
padding: 14px 0 0 0;
|
|
3118
|
+
border-top: 1px solid var(--border-primary);
|
|
3119
|
+
min-height: 130px;
|
|
3121
3120
|
}
|
|
3122
3121
|
|
|
3123
3122
|
.metric-secondary-item {
|
|
@@ -3125,7 +3124,7 @@
|
|
|
3125
3124
|
justify-content: space-between;
|
|
3126
3125
|
align-items: center;
|
|
3127
3126
|
padding: 6px 0;
|
|
3128
|
-
|
|
3127
|
+
min-height: 28px;
|
|
3129
3128
|
}
|
|
3130
3129
|
|
|
3131
3130
|
.metric-secondary-item:last-child {
|
|
@@ -3133,17 +3132,31 @@
|
|
|
3133
3132
|
}
|
|
3134
3133
|
|
|
3135
3134
|
.metric-secondary-label {
|
|
3136
|
-
font-size: 0.
|
|
3135
|
+
font-size: 0.85rem;
|
|
3137
3136
|
color: var(--text-secondary);
|
|
3137
|
+
flex-shrink: 0;
|
|
3138
|
+
margin-right: 12px;
|
|
3138
3139
|
}
|
|
3139
3140
|
|
|
3140
3141
|
.metric-secondary-value {
|
|
3141
|
-
font-size: 0.
|
|
3142
|
+
font-size: 0.9rem;
|
|
3142
3143
|
font-weight: 600;
|
|
3143
3144
|
color: var(--text-primary);
|
|
3145
|
+
text-align: right;
|
|
3146
|
+
white-space: nowrap;
|
|
3147
|
+
overflow: hidden;
|
|
3148
|
+
text-overflow: ellipsis;
|
|
3149
|
+
max-width: 90%;
|
|
3144
3150
|
}
|
|
3145
3151
|
|
|
3146
3152
|
/* Responsive design for metrics cards */
|
|
3153
|
+
@media (max-width: 1024px) {
|
|
3154
|
+
.metrics-cards-container {
|
|
3155
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
3156
|
+
gap: 16px;
|
|
3157
|
+
}
|
|
3158
|
+
}
|
|
3159
|
+
|
|
3147
3160
|
@media (max-width: 768px) {
|
|
3148
3161
|
.metrics-cards-container {
|
|
3149
3162
|
grid-template-columns: 1fr;
|
|
@@ -3151,25 +3164,45 @@
|
|
|
3151
3164
|
}
|
|
3152
3165
|
|
|
3153
3166
|
.metric-card {
|
|
3154
|
-
padding:
|
|
3167
|
+
padding: 18px;
|
|
3168
|
+
min-height: 200px;
|
|
3169
|
+
max-height: 240px;
|
|
3170
|
+
gap: 14px;
|
|
3155
3171
|
}
|
|
3156
3172
|
|
|
3157
3173
|
.metric-primary-value {
|
|
3158
|
-
font-size: 1.
|
|
3174
|
+
font-size: 1.8rem;
|
|
3159
3175
|
}
|
|
3160
3176
|
}
|
|
3161
3177
|
|
|
3162
3178
|
@media (max-width: 480px) {
|
|
3179
|
+
.metric-card {
|
|
3180
|
+
padding: 16px;
|
|
3181
|
+
min-height: 180px;
|
|
3182
|
+
max-height: 220px;
|
|
3183
|
+
gap: 12px;
|
|
3184
|
+
}
|
|
3185
|
+
|
|
3163
3186
|
.metric-primary-value {
|
|
3164
|
-
font-size: 1.
|
|
3187
|
+
font-size: 1.6rem;
|
|
3165
3188
|
}
|
|
3166
3189
|
|
|
3167
3190
|
.metric-secondary {
|
|
3168
|
-
gap:
|
|
3191
|
+
gap: 4px;
|
|
3169
3192
|
}
|
|
3170
3193
|
|
|
3171
3194
|
.metric-secondary-item {
|
|
3172
3195
|
padding: 4px 0;
|
|
3196
|
+
min-height: 28px;
|
|
3197
|
+
}
|
|
3198
|
+
|
|
3199
|
+
.metric-secondary-label {
|
|
3200
|
+
font-size: 0.75rem;
|
|
3201
|
+
}
|
|
3202
|
+
|
|
3203
|
+
.metric-secondary-value {
|
|
3204
|
+
font-size: 0.8rem;
|
|
3205
|
+
max-width: 100%;
|
|
3173
3206
|
}
|
|
3174
3207
|
}
|
|
3175
3208
|
|
|
@@ -6513,6 +6546,574 @@
|
|
|
6513
6546
|
border-radius: 4px;
|
|
6514
6547
|
}
|
|
6515
6548
|
|
|
6549
|
+
/* Agent Analytics Styles */
|
|
6550
|
+
.agent-analytics {
|
|
6551
|
+
max-width: 1400px;
|
|
6552
|
+
margin: 0 auto;
|
|
6553
|
+
padding: 20px;
|
|
6554
|
+
}
|
|
6555
|
+
|
|
6556
|
+
.analytics-header {
|
|
6557
|
+
display: flex;
|
|
6558
|
+
justify-content: space-between;
|
|
6559
|
+
align-items: flex-start;
|
|
6560
|
+
margin-bottom: 30px;
|
|
6561
|
+
gap: 20px;
|
|
6562
|
+
}
|
|
6563
|
+
|
|
6564
|
+
.header-content {
|
|
6565
|
+
flex: 1;
|
|
6566
|
+
}
|
|
6567
|
+
|
|
6568
|
+
.analytics-title {
|
|
6569
|
+
color: var(--text-accent);
|
|
6570
|
+
font-size: 1.5rem;
|
|
6571
|
+
font-weight: normal;
|
|
6572
|
+
margin: 0 0 8px 0;
|
|
6573
|
+
display: flex;
|
|
6574
|
+
align-items: center;
|
|
6575
|
+
gap: 12px;
|
|
6576
|
+
}
|
|
6577
|
+
|
|
6578
|
+
.title-icon {
|
|
6579
|
+
font-size: 1.4em;
|
|
6580
|
+
}
|
|
6581
|
+
|
|
6582
|
+
.analytics-subtitle {
|
|
6583
|
+
color: var(--text-secondary);
|
|
6584
|
+
margin: 0;
|
|
6585
|
+
font-size: 0.9rem;
|
|
6586
|
+
}
|
|
6587
|
+
|
|
6588
|
+
.date-filters {
|
|
6589
|
+
display: flex;
|
|
6590
|
+
align-items: center;
|
|
6591
|
+
gap: 12px;
|
|
6592
|
+
background: var(--bg-secondary);
|
|
6593
|
+
border: 1px solid var(--border-primary);
|
|
6594
|
+
border-radius: 8px;
|
|
6595
|
+
padding: 12px 16px;
|
|
6596
|
+
}
|
|
6597
|
+
|
|
6598
|
+
.filter-group {
|
|
6599
|
+
display: flex;
|
|
6600
|
+
flex-direction: column;
|
|
6601
|
+
gap: 4px;
|
|
6602
|
+
}
|
|
6603
|
+
|
|
6604
|
+
.filter-group label {
|
|
6605
|
+
font-size: 0.8rem;
|
|
6606
|
+
color: var(--text-secondary);
|
|
6607
|
+
font-weight: 600;
|
|
6608
|
+
}
|
|
6609
|
+
|
|
6610
|
+
.date-input {
|
|
6611
|
+
background: var(--bg-tertiary);
|
|
6612
|
+
border: 1px solid var(--border-primary);
|
|
6613
|
+
border-radius: 4px;
|
|
6614
|
+
padding: 6px 8px;
|
|
6615
|
+
color: var(--text-primary);
|
|
6616
|
+
font-family: inherit;
|
|
6617
|
+
font-size: 0.85rem;
|
|
6618
|
+
}
|
|
6619
|
+
|
|
6620
|
+
.date-input:focus {
|
|
6621
|
+
outline: none;
|
|
6622
|
+
border-color: var(--text-accent);
|
|
6623
|
+
}
|
|
6624
|
+
|
|
6625
|
+
.refresh-btn {
|
|
6626
|
+
background: var(--text-accent);
|
|
6627
|
+
border: none;
|
|
6628
|
+
border-radius: 4px;
|
|
6629
|
+
padding: 8px 12px;
|
|
6630
|
+
color: white;
|
|
6631
|
+
cursor: pointer;
|
|
6632
|
+
display: flex;
|
|
6633
|
+
align-items: center;
|
|
6634
|
+
gap: 6px;
|
|
6635
|
+
font-family: inherit;
|
|
6636
|
+
font-size: 0.85rem;
|
|
6637
|
+
font-weight: 600;
|
|
6638
|
+
transition: all 0.2s ease;
|
|
6639
|
+
}
|
|
6640
|
+
|
|
6641
|
+
.refresh-btn:hover {
|
|
6642
|
+
background: var(--text-warning);
|
|
6643
|
+
transform: translateY(-1px);
|
|
6644
|
+
}
|
|
6645
|
+
|
|
6646
|
+
.refresh-btn:disabled {
|
|
6647
|
+
opacity: 0.6;
|
|
6648
|
+
cursor: not-allowed;
|
|
6649
|
+
transform: none;
|
|
6650
|
+
}
|
|
6651
|
+
|
|
6652
|
+
.btn-icon {
|
|
6653
|
+
font-size: 0.9em;
|
|
6654
|
+
}
|
|
6655
|
+
|
|
6656
|
+
/* Metrics Grid */
|
|
6657
|
+
.metrics-grid {
|
|
6658
|
+
display: grid;
|
|
6659
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
6660
|
+
gap: 16px;
|
|
6661
|
+
margin-bottom: 30px;
|
|
6662
|
+
}
|
|
6663
|
+
|
|
6664
|
+
.metric-card {
|
|
6665
|
+
background: var(--bg-secondary);
|
|
6666
|
+
border: 1px solid var(--border-primary);
|
|
6667
|
+
border-radius: 8px;
|
|
6668
|
+
padding: 20px;
|
|
6669
|
+
display: flex;
|
|
6670
|
+
align-items: center;
|
|
6671
|
+
gap: 16px;
|
|
6672
|
+
transition: all 0.2s ease;
|
|
6673
|
+
}
|
|
6674
|
+
|
|
6675
|
+
.metric-card:hover {
|
|
6676
|
+
border-color: var(--text-accent);
|
|
6677
|
+
box-shadow: 0 4px 12px var(--shadow-primary);
|
|
6678
|
+
}
|
|
6679
|
+
|
|
6680
|
+
.metric-card.primary {
|
|
6681
|
+
border-color: var(--text-accent);
|
|
6682
|
+
box-shadow: 0 0 0 1px rgba(213, 116, 85, 0.1);
|
|
6683
|
+
}
|
|
6684
|
+
|
|
6685
|
+
.metric-card.secondary {
|
|
6686
|
+
border-color: var(--text-info);
|
|
6687
|
+
box-shadow: 0 0 0 1px rgba(165, 214, 255, 0.1);
|
|
6688
|
+
}
|
|
6689
|
+
|
|
6690
|
+
.metric-card.success {
|
|
6691
|
+
border-color: var(--text-success);
|
|
6692
|
+
box-shadow: 0 0 0 1px rgba(63, 185, 80, 0.1);
|
|
6693
|
+
}
|
|
6694
|
+
|
|
6695
|
+
.metric-card.info {
|
|
6696
|
+
border-color: var(--text-warning);
|
|
6697
|
+
box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.1);
|
|
6698
|
+
}
|
|
6699
|
+
|
|
6700
|
+
.metric-icon {
|
|
6701
|
+
font-size: 2em;
|
|
6702
|
+
opacity: 0.8;
|
|
6703
|
+
}
|
|
6704
|
+
|
|
6705
|
+
.metric-content {
|
|
6706
|
+
flex: 1;
|
|
6707
|
+
}
|
|
6708
|
+
|
|
6709
|
+
.metric-value {
|
|
6710
|
+
font-size: 1.8rem;
|
|
6711
|
+
font-weight: bold;
|
|
6712
|
+
color: var(--text-primary);
|
|
6713
|
+
margin: 0 0 4px 0;
|
|
6714
|
+
}
|
|
6715
|
+
|
|
6716
|
+
.metric-label {
|
|
6717
|
+
font-size: 0.85rem;
|
|
6718
|
+
color: var(--text-secondary);
|
|
6719
|
+
font-weight: 500;
|
|
6720
|
+
}
|
|
6721
|
+
|
|
6722
|
+
/* Charts Container - Sectioned Layout */
|
|
6723
|
+
.charts-container {
|
|
6724
|
+
display: flex;
|
|
6725
|
+
flex-direction: column;
|
|
6726
|
+
gap: 40px;
|
|
6727
|
+
margin-bottom: 30px;
|
|
6728
|
+
}
|
|
6729
|
+
|
|
6730
|
+
.chart-section {
|
|
6731
|
+
display: flex;
|
|
6732
|
+
flex-direction: column;
|
|
6733
|
+
gap: 20px;
|
|
6734
|
+
}
|
|
6735
|
+
|
|
6736
|
+
.section-header {
|
|
6737
|
+
border-bottom: 2px solid var(--border-primary);
|
|
6738
|
+
padding-bottom: 12px;
|
|
6739
|
+
}
|
|
6740
|
+
|
|
6741
|
+
.section-title {
|
|
6742
|
+
color: var(--text-accent);
|
|
6743
|
+
font-size: 1.1rem;
|
|
6744
|
+
font-weight: 700;
|
|
6745
|
+
margin: 0 0 6px 0;
|
|
6746
|
+
display: flex;
|
|
6747
|
+
align-items: center;
|
|
6748
|
+
gap: 8px;
|
|
6749
|
+
}
|
|
6750
|
+
|
|
6751
|
+
.section-description {
|
|
6752
|
+
color: var(--text-secondary);
|
|
6753
|
+
font-size: 0.85rem;
|
|
6754
|
+
margin: 0;
|
|
6755
|
+
font-weight: 400;
|
|
6756
|
+
}
|
|
6757
|
+
|
|
6758
|
+
.section-charts {
|
|
6759
|
+
display: grid;
|
|
6760
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
6761
|
+
gap: 20px;
|
|
6762
|
+
}
|
|
6763
|
+
|
|
6764
|
+
.chart-card {
|
|
6765
|
+
background: var(--bg-secondary);
|
|
6766
|
+
border: 1px solid var(--border-primary);
|
|
6767
|
+
border-radius: 8px;
|
|
6768
|
+
padding: 20px;
|
|
6769
|
+
transition: all 0.2s ease;
|
|
6770
|
+
}
|
|
6771
|
+
|
|
6772
|
+
.chart-card:hover {
|
|
6773
|
+
border-color: var(--text-accent);
|
|
6774
|
+
box-shadow: 0 4px 12px var(--shadow-primary);
|
|
6775
|
+
}
|
|
6776
|
+
|
|
6777
|
+
.chart-header {
|
|
6778
|
+
margin-bottom: 20px;
|
|
6779
|
+
}
|
|
6780
|
+
|
|
6781
|
+
.chart-header h3 {
|
|
6782
|
+
color: var(--text-primary);
|
|
6783
|
+
font-size: 1.1rem;
|
|
6784
|
+
margin: 0 0 4px 0;
|
|
6785
|
+
font-weight: 600;
|
|
6786
|
+
}
|
|
6787
|
+
|
|
6788
|
+
.chart-header p {
|
|
6789
|
+
color: var(--text-secondary);
|
|
6790
|
+
font-size: 0.85rem;
|
|
6791
|
+
margin: 0;
|
|
6792
|
+
}
|
|
6793
|
+
|
|
6794
|
+
.chart-content {
|
|
6795
|
+
position: relative;
|
|
6796
|
+
height: 300px;
|
|
6797
|
+
}
|
|
6798
|
+
|
|
6799
|
+
.chart-content canvas {
|
|
6800
|
+
width: 100% !important;
|
|
6801
|
+
height: 100% !important;
|
|
6802
|
+
}
|
|
6803
|
+
|
|
6804
|
+
/* Efficiency Metrics */
|
|
6805
|
+
.efficiency-grid {
|
|
6806
|
+
display: grid;
|
|
6807
|
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
6808
|
+
gap: 16px;
|
|
6809
|
+
}
|
|
6810
|
+
|
|
6811
|
+
.efficiency-card {
|
|
6812
|
+
background: var(--bg-tertiary);
|
|
6813
|
+
border: 1px solid var(--border-primary);
|
|
6814
|
+
border-radius: 6px;
|
|
6815
|
+
padding: 16px;
|
|
6816
|
+
display: flex;
|
|
6817
|
+
align-items: center;
|
|
6818
|
+
gap: 12px;
|
|
6819
|
+
transition: all 0.2s ease;
|
|
6820
|
+
}
|
|
6821
|
+
|
|
6822
|
+
.efficiency-card:hover {
|
|
6823
|
+
border-color: var(--text-accent);
|
|
6824
|
+
}
|
|
6825
|
+
|
|
6826
|
+
.efficiency-icon {
|
|
6827
|
+
font-size: 1.5em;
|
|
6828
|
+
opacity: 0.8;
|
|
6829
|
+
}
|
|
6830
|
+
|
|
6831
|
+
.efficiency-content {
|
|
6832
|
+
flex: 1;
|
|
6833
|
+
}
|
|
6834
|
+
|
|
6835
|
+
.efficiency-value {
|
|
6836
|
+
font-size: 1.2rem;
|
|
6837
|
+
font-weight: bold;
|
|
6838
|
+
color: var(--text-primary);
|
|
6839
|
+
margin: 0 0 2px 0;
|
|
6840
|
+
}
|
|
6841
|
+
|
|
6842
|
+
.efficiency-label {
|
|
6843
|
+
font-size: 0.75rem;
|
|
6844
|
+
color: var(--text-secondary);
|
|
6845
|
+
}
|
|
6846
|
+
|
|
6847
|
+
.efficiency-loading {
|
|
6848
|
+
text-align: center;
|
|
6849
|
+
padding: 40px;
|
|
6850
|
+
color: var(--text-secondary);
|
|
6851
|
+
}
|
|
6852
|
+
|
|
6853
|
+
/* Agent Details Section */
|
|
6854
|
+
.agent-details-section {
|
|
6855
|
+
margin-bottom: 30px;
|
|
6856
|
+
}
|
|
6857
|
+
|
|
6858
|
+
.agent-details-section h3 {
|
|
6859
|
+
color: var(--text-primary);
|
|
6860
|
+
font-size: 1.2rem;
|
|
6861
|
+
margin: 0 0 16px 0;
|
|
6862
|
+
font-weight: 600;
|
|
6863
|
+
}
|
|
6864
|
+
|
|
6865
|
+
.agent-stats-grid {
|
|
6866
|
+
display: grid;
|
|
6867
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
6868
|
+
gap: 16px;
|
|
6869
|
+
}
|
|
6870
|
+
|
|
6871
|
+
.agent-stat-card {
|
|
6872
|
+
background: var(--bg-secondary);
|
|
6873
|
+
border: 1px solid var(--border-primary);
|
|
6874
|
+
border-radius: 8px;
|
|
6875
|
+
padding: 20px;
|
|
6876
|
+
transition: all 0.2s ease;
|
|
6877
|
+
}
|
|
6878
|
+
|
|
6879
|
+
.agent-stat-card:hover {
|
|
6880
|
+
border-color: var(--text-accent);
|
|
6881
|
+
box-shadow: 0 4px 12px var(--shadow-primary);
|
|
6882
|
+
}
|
|
6883
|
+
|
|
6884
|
+
.agent-stat-header {
|
|
6885
|
+
display: flex;
|
|
6886
|
+
align-items: flex-start;
|
|
6887
|
+
gap: 12px;
|
|
6888
|
+
margin-bottom: 16px;
|
|
6889
|
+
}
|
|
6890
|
+
|
|
6891
|
+
.agent-stat-icon {
|
|
6892
|
+
font-size: 1.8em;
|
|
6893
|
+
flex-shrink: 0;
|
|
6894
|
+
}
|
|
6895
|
+
|
|
6896
|
+
.agent-stat-info {
|
|
6897
|
+
flex: 1;
|
|
6898
|
+
}
|
|
6899
|
+
|
|
6900
|
+
.agent-stat-info h4 {
|
|
6901
|
+
color: var(--text-primary);
|
|
6902
|
+
font-size: 1rem;
|
|
6903
|
+
margin: 0 0 4px 0;
|
|
6904
|
+
font-weight: 600;
|
|
6905
|
+
}
|
|
6906
|
+
|
|
6907
|
+
.agent-stat-info p {
|
|
6908
|
+
color: var(--text-secondary);
|
|
6909
|
+
font-size: 0.85rem;
|
|
6910
|
+
margin: 0;
|
|
6911
|
+
}
|
|
6912
|
+
|
|
6913
|
+
.agent-stat-badge {
|
|
6914
|
+
background: var(--bg-tertiary);
|
|
6915
|
+
border-radius: 12px;
|
|
6916
|
+
padding: 4px 8px;
|
|
6917
|
+
font-size: 0.75rem;
|
|
6918
|
+
font-weight: 600;
|
|
6919
|
+
white-space: nowrap;
|
|
6920
|
+
}
|
|
6921
|
+
|
|
6922
|
+
.agent-stat-metrics {
|
|
6923
|
+
display: grid;
|
|
6924
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
6925
|
+
gap: 8px;
|
|
6926
|
+
}
|
|
6927
|
+
|
|
6928
|
+
.stat-metric {
|
|
6929
|
+
display: flex;
|
|
6930
|
+
justify-content: space-between;
|
|
6931
|
+
align-items: center;
|
|
6932
|
+
padding: 6px 0;
|
|
6933
|
+
border-bottom: 1px solid var(--border-primary);
|
|
6934
|
+
}
|
|
6935
|
+
|
|
6936
|
+
.stat-metric:last-child {
|
|
6937
|
+
border-bottom: none;
|
|
6938
|
+
}
|
|
6939
|
+
|
|
6940
|
+
.metric-label {
|
|
6941
|
+
font-size: 0.8rem;
|
|
6942
|
+
color: var(--text-secondary);
|
|
6943
|
+
}
|
|
6944
|
+
|
|
6945
|
+
.metric-value {
|
|
6946
|
+
font-size: 0.8rem;
|
|
6947
|
+
color: var(--text-primary);
|
|
6948
|
+
font-weight: 600;
|
|
6949
|
+
}
|
|
6950
|
+
|
|
6951
|
+
.stats-loading {
|
|
6952
|
+
text-align: center;
|
|
6953
|
+
padding: 40px;
|
|
6954
|
+
color: var(--text-secondary);
|
|
6955
|
+
}
|
|
6956
|
+
|
|
6957
|
+
/* Workflow Patterns */
|
|
6958
|
+
.workflow-patterns-section {
|
|
6959
|
+
margin-bottom: 30px;
|
|
6960
|
+
}
|
|
6961
|
+
|
|
6962
|
+
.workflow-patterns-section h3 {
|
|
6963
|
+
color: var(--text-primary);
|
|
6964
|
+
font-size: 1.2rem;
|
|
6965
|
+
margin: 0 0 8px 0;
|
|
6966
|
+
font-weight: 600;
|
|
6967
|
+
}
|
|
6968
|
+
|
|
6969
|
+
.workflow-patterns-section p {
|
|
6970
|
+
color: var(--text-secondary);
|
|
6971
|
+
font-size: 0.9rem;
|
|
6972
|
+
margin: 0 0 16px 0;
|
|
6973
|
+
}
|
|
6974
|
+
|
|
6975
|
+
.workflow-patterns {
|
|
6976
|
+
display: flex;
|
|
6977
|
+
flex-direction: column;
|
|
6978
|
+
gap: 12px;
|
|
6979
|
+
}
|
|
6980
|
+
|
|
6981
|
+
.workflow-pattern {
|
|
6982
|
+
background: var(--bg-secondary);
|
|
6983
|
+
border: 1px solid var(--border-primary);
|
|
6984
|
+
border-radius: 6px;
|
|
6985
|
+
padding: 16px 20px;
|
|
6986
|
+
display: flex;
|
|
6987
|
+
justify-content: space-between;
|
|
6988
|
+
align-items: center;
|
|
6989
|
+
transition: all 0.2s ease;
|
|
6990
|
+
}
|
|
6991
|
+
|
|
6992
|
+
.workflow-pattern:hover {
|
|
6993
|
+
border-color: var(--text-accent);
|
|
6994
|
+
}
|
|
6995
|
+
|
|
6996
|
+
.pattern-flow {
|
|
6997
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
6998
|
+
color: var(--text-primary);
|
|
6999
|
+
font-size: 0.9rem;
|
|
7000
|
+
}
|
|
7001
|
+
|
|
7002
|
+
.pattern-count {
|
|
7003
|
+
background: var(--text-accent);
|
|
7004
|
+
color: white;
|
|
7005
|
+
border-radius: 12px;
|
|
7006
|
+
padding: 4px 8px;
|
|
7007
|
+
font-size: 0.75rem;
|
|
7008
|
+
font-weight: 600;
|
|
7009
|
+
}
|
|
7010
|
+
|
|
7011
|
+
/* No Data States */
|
|
7012
|
+
.no-agent-data,
|
|
7013
|
+
.agent-analytics-error {
|
|
7014
|
+
text-align: center;
|
|
7015
|
+
padding: 60px 20px;
|
|
7016
|
+
}
|
|
7017
|
+
|
|
7018
|
+
.no-data-content,
|
|
7019
|
+
.error-content {
|
|
7020
|
+
max-width: 500px;
|
|
7021
|
+
margin: 0 auto;
|
|
7022
|
+
}
|
|
7023
|
+
|
|
7024
|
+
.no-data-icon,
|
|
7025
|
+
.error-icon {
|
|
7026
|
+
font-size: 4em;
|
|
7027
|
+
margin-bottom: 20px;
|
|
7028
|
+
opacity: 0.6;
|
|
7029
|
+
}
|
|
7030
|
+
|
|
7031
|
+
.no-agent-data h3,
|
|
7032
|
+
.agent-analytics-error h3 {
|
|
7033
|
+
color: var(--text-primary);
|
|
7034
|
+
font-size: 1.3rem;
|
|
7035
|
+
margin: 0 0 12px 0;
|
|
7036
|
+
font-weight: 600;
|
|
7037
|
+
}
|
|
7038
|
+
|
|
7039
|
+
.no-agent-data p,
|
|
7040
|
+
.agent-analytics-error p {
|
|
7041
|
+
color: var(--text-secondary);
|
|
7042
|
+
margin: 0 0 20px 0;
|
|
7043
|
+
line-height: 1.5;
|
|
7044
|
+
}
|
|
7045
|
+
|
|
7046
|
+
.agent-types {
|
|
7047
|
+
background: var(--bg-secondary);
|
|
7048
|
+
border: 1px solid var(--border-primary);
|
|
7049
|
+
border-radius: 8px;
|
|
7050
|
+
padding: 20px;
|
|
7051
|
+
margin: 20px 0;
|
|
7052
|
+
text-align: left;
|
|
7053
|
+
}
|
|
7054
|
+
|
|
7055
|
+
.agent-types h4 {
|
|
7056
|
+
color: var(--text-primary);
|
|
7057
|
+
font-size: 1rem;
|
|
7058
|
+
margin: 0 0 12px 0;
|
|
7059
|
+
font-weight: 600;
|
|
7060
|
+
}
|
|
7061
|
+
|
|
7062
|
+
.agent-types ul {
|
|
7063
|
+
list-style: none;
|
|
7064
|
+
padding: 0;
|
|
7065
|
+
margin: 0;
|
|
7066
|
+
}
|
|
7067
|
+
|
|
7068
|
+
.agent-types li {
|
|
7069
|
+
padding: 8px 0;
|
|
7070
|
+
border-bottom: 1px solid var(--border-primary);
|
|
7071
|
+
}
|
|
7072
|
+
|
|
7073
|
+
.agent-types li:last-child {
|
|
7074
|
+
border-bottom: none;
|
|
7075
|
+
}
|
|
7076
|
+
|
|
7077
|
+
.agent-types strong {
|
|
7078
|
+
color: var(--text-accent);
|
|
7079
|
+
font-weight: 600;
|
|
7080
|
+
}
|
|
7081
|
+
|
|
7082
|
+
/* Responsive Design */
|
|
7083
|
+
@media (max-width: 768px) {
|
|
7084
|
+
.analytics-header {
|
|
7085
|
+
flex-direction: column;
|
|
7086
|
+
gap: 16px;
|
|
7087
|
+
}
|
|
7088
|
+
|
|
7089
|
+
.date-filters {
|
|
7090
|
+
flex-wrap: wrap;
|
|
7091
|
+
gap: 8px;
|
|
7092
|
+
}
|
|
7093
|
+
|
|
7094
|
+
.metrics-grid {
|
|
7095
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
7096
|
+
gap: 12px;
|
|
7097
|
+
}
|
|
7098
|
+
|
|
7099
|
+
.charts-container {
|
|
7100
|
+
gap: 30px;
|
|
7101
|
+
}
|
|
7102
|
+
|
|
7103
|
+
.section-charts {
|
|
7104
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
7105
|
+
gap: 16px;
|
|
7106
|
+
}
|
|
7107
|
+
|
|
7108
|
+
.agent-stats-grid {
|
|
7109
|
+
grid-template-columns: 1fr;
|
|
7110
|
+
}
|
|
7111
|
+
|
|
7112
|
+
.efficiency-grid {
|
|
7113
|
+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
7114
|
+
}
|
|
7115
|
+
}
|
|
7116
|
+
|
|
6516
7117
|
</style>
|
|
6517
7118
|
</head>
|
|
6518
7119
|
<body>
|