fix(ui): sessions listings settings filter

Co-authored-by: GitHub Action <action@github.com>

.github/workflows/patch-build.yaml

@@ -83,6 +83,7 @@ jobs:
           [ -d $MSAAS_REPO_FOLDER ] || {
           git clone -b dev --recursive https://x-access-token:$MSAAS_REPO_CLONE_TOKEN@$MSAAS_REPO_URL $MSAAS_REPO_FOLDER
           cd $MSAAS_REPO_FOLDER
+          git log -1
           cd openreplay && git fetch origin && git checkout main # This have to be changed to specific tag
           git log -1
           cd $MSAAS_REPO_FOLDER

api/chalicelib/core/users.py

@@ -457,12 +457,6 @@ def set_password_invitation(user_id, new_password):
     user = update(tenant_id=-1, user_id=user_id, changes=changes)
     r = authenticate(user['email'], new_password)
 
-    tenant_id = r.pop("tenantId")
-    r["limits"] = {
-        "teamMember": -1,
-        "projects": -1,
-        "metadata": metadata.get_remaining_metadata_with_count(tenant_id)}
-
     return {
         "jwt": r.pop("jwt"),
         "refreshToken": r.pop("refreshToken"),
@@ -470,10 +464,7 @@ def set_password_invitation(user_id, new_password):
         "spotJwt": r.pop("spotJwt"),
         "spotRefreshToken": r.pop("spotRefreshToken"),
         "spotRefreshTokenMaxAge": r.pop("spotRefreshTokenMaxAge"),
-        'data': {
-            "scopeState": scope.get_scope(-1),
-            "user": r
-        }
+        **r
     }
 
 

api/chalicelib/core/webhook.py

@@ -129,13 +129,13 @@ def add_edit(tenant_id, data: schemas.WebhookSchema, replace_none=None):
         raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=f"name already exists.")
     if data.webhook_id is not None:
         return update(tenant_id=tenant_id, webhook_id=data.webhook_id,
-                      changes={"endpoint": data.endpoint.unicode_string(),
+                      changes={"endpoint": data.endpoint,
                                "authHeader": data.auth_header,
                                "name": data.name},
                       replace_none=replace_none)
     else:
         return add(tenant_id=tenant_id,
-                   endpoint=data.endpoint.unicode_string(),
+                   endpoint=data.endpoint,
                    auth_header=data.auth_header,
                    name=data.name,
                    replace_none=replace_none)

api/entrypoint.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
+export TZ=UTC
 
 uvicorn app:app --host 0.0.0.0 --port $LISTEN_PORT --proxy-headers --log-level ${S_LOGLEVEL:-warning}

api/entrypoint_alerts.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
+export TZ=UTC
 export ASSIST_KEY=ignore
 uvicorn app:app --host 0.0.0.0 --port 8888 --log-level ${S_LOGLEVEL:-warning}

api/run-alerts-dev.sh

@@ -1,3 +1,4 @@
 #!/bin/zsh
+export TZ=UTC
 
 uvicorn app_alerts:app --reload --port 8888 --log-level ${S_LOGLEVEL:-warning}

api/run-dev.sh

@@ -1,3 +1,4 @@
 #!/bin/zsh
+export TZ=UTC
 
 uvicorn app:app --reload --log-level ${S_LOGLEVEL:-warning}

api/schemas/schemas.py

@@ -211,7 +211,8 @@ class IssueTrackingJiraSchema(IssueTrackingIntegration):
 
 class WebhookSchema(BaseModel):
     webhook_id: Optional[int] = Field(default=None)
-    endpoint: AnyHttpUrl = Field(...)
+    processed_endpoint: AnyHttpUrl = Field(..., alias="endpoint")
+    endpoint: Optional[str] = Field(default=None, doc_hidden=True)
     auth_header: Optional[str] = Field(default=None)
     name: str = Field(default="", max_length=100, pattern=NAME_PATTERN)
 
@@ -754,6 +755,8 @@ class SessionsSearchPayloadSchema(_TimedSchema, _PaginatedSchema):
         for f in values.get("filters", []):
             vals = []
             for v in f.get("value", []):
+                if f.get("type", "") == FilterType.DURATION.value and v is None:
+                    v = 0
                 if v is not None and (f.get("type", "") != FilterType.DURATION.value
                                       or str(v).isnumeric()):
                     vals.append(v)
@@ -1020,33 +1023,51 @@ class CardSessionsSchema(_TimedSchema, _PaginatedSchema):
 
         return self
 
+    # We don't need this as the UI is expecting filters to override the full series' filters
+    # @model_validator(mode="after")
+    # def __merge_out_filters_with_series(self):
+    #     for f in self.filters:
+    #         for s in self.series:
+    #             found = False
+    #
+    #             if f.is_event:
+    #                 sub = s.filter.events
+    #             else:
+    #                 sub = s.filter.filters
+    #
+    #             for e in sub:
+    #                 if f.type == e.type and f.operator == e.operator:
+    #                     found = True
+    #                     if f.is_event:
+    #                         # If extra event: append value
+    #                         for v in f.value:
+    #                             if v not in e.value:
+    #                                 e.value.append(v)
+    #                     else:
+    #                         # If extra filter: override value
+    #                         e.value = f.value
+    #             if not found:
+    #                 sub.append(f)
+    #
+    #     self.filters = []
+    #
+    #     return self
+
+    # UI is expecting filters to override the full series' filters
     @model_validator(mode="after")
-    def __merge_out_filters_with_series(self):
-        for f in self.filters:
-            for s in self.series:
-                found = False
-
+    def __override_series_filters_with_outer_filters(self):
+        if len(self.filters) > 0:
+            events = []
+            filters = []
+            for f in self.filters:
                 if f.is_event:
-                    sub = s.filter.events
+                    events.append(f)
                 else:
-                    sub = s.filter.filters
-
-                for e in sub:
-                    if f.type == e.type and f.operator == e.operator:
-                        found = True
-                        if f.is_event:
-                            # If extra event: append value
-                            for v in f.value:
-                                if v not in e.value:
-                                    e.value.append(v)
-                        else:
-                            # If extra filter: override value
-                            e.value = f.value
-                if not found:
-                    sub.append(f)
-
+                    filters.append(f)
+            for s in self.series:
+                s.filter.events = events
+                s.filter.filters = filters
         self.filters = []
-
         return self
 
 
@@ -1357,6 +1378,7 @@ class LiveFilterType(str, Enum):
     USER_BROWSER = FilterType.USER_BROWSER.value
     USER_DEVICE = FilterType.USER_DEVICE.value
     USER_COUNTRY = FilterType.USER_COUNTRY.value
+    USER_CITY = FilterType.USER_CITY.value
     USER_STATE = FilterType.USER_STATE.value
     USER_ID = FilterType.USER_ID.value
     USER_ANONYMOUS_ID = FilterType.USER_ANONYMOUS_ID.value

backend/internal/assets/cacher/cacher.go

@@ -143,6 +143,7 @@ func (c *cacher) cacheURL(t *Task) {
 	if contentType == "" {
 		contentType = mime.TypeByExtension(filepath.Ext(res.Request.URL.Path))
 	}
+	contentEncoding := res.Header.Get("Content-Encoding")
 
 	// Skip html file (usually it's a CDN mock for 404 error)
 	if strings.HasPrefix(contentType, "text/html") {
@@ -159,7 +160,7 @@ func (c *cacher) cacheURL(t *Task) {
 
 	// TODO: implement in streams
 	start = time.Now()
-	err = c.objStorage.Upload(strings.NewReader(strData), t.cachePath, contentType, objectstorage.NoCompression)
+	err = c.objStorage.Upload(strings.NewReader(strData), t.cachePath, contentType, contentEncoding, objectstorage.NoCompression)
 	if err != nil {
 		metrics.RecordUploadDuration(float64(time.Now().Sub(start).Milliseconds()), true)
 		c.Errors <- errors.Wrap(err, t.urlContext)

backend/internal/storage/storage.go

@@ -385,7 +385,7 @@ func (s *Storage) uploadSession(payload interface{}) {
 			metrics.RecordSessionCompressionRatio(task.domsRawSize/float64(task.doms.Len()), DOM.String())
 			// Upload session to s3
 			start := time.Now()
-			if err := s.objStorage.Upload(task.doms, task.id+string(DOM)+"s", "application/octet-stream", task.compression); err != nil {
+			if err := s.objStorage.Upload(task.doms, task.id+string(DOM)+"s", "application/octet-stream", "", task.compression); err != nil {
 				s.log.Fatal(task.ctx, "failed to upload mob file, err: %s", err)
 			}
 			uploadDoms = time.Now().Sub(start).Milliseconds()
@@ -398,7 +398,7 @@ func (s *Storage) uploadSession(payload interface{}) {
 			metrics.RecordSessionCompressionRatio(task.domeRawSize/float64(task.dome.Len()), DOM.String())
 			// Upload session to s3
 			start := time.Now()
-			if err := s.objStorage.Upload(task.dome, task.id+string(DOM)+"e", "application/octet-stream", task.compression); err != nil {
+			if err := s.objStorage.Upload(task.dome, task.id+string(DOM)+"e", "application/octet-stream", "", task.compression); err != nil {
 				s.log.Fatal(task.ctx, "failed to upload mob file, err: %s", err)
 			}
 			uploadDome = time.Now().Sub(start).Milliseconds()
@@ -411,7 +411,7 @@ func (s *Storage) uploadSession(payload interface{}) {
 			metrics.RecordSessionCompressionRatio(task.devRawSize/float64(task.dev.Len()), DEV.String())
 			// Upload session to s3
 			start := time.Now()
-			if err := s.objStorage.Upload(task.dev, task.id+string(DEV), "application/octet-stream", task.compression); err != nil {
+			if err := s.objStorage.Upload(task.dev, task.id+string(DEV), "application/octet-stream", "", task.compression); err != nil {
 				s.log.Fatal(task.ctx, "failed to upload mob file, err: %s", err)
 			}
 			uploadDev = time.Now().Sub(start).Milliseconds()

backend/pkg/integrations/clients/sentry.go

@@ -48,12 +48,12 @@ func (s *sentryClient) FetchSessionData(credentials interface{}, sessionID uint6
 			cfg.Token = val
 		}
 	}
-	requestUrl := fmt.Sprintf("https://sentry.io/api/0/projects/%s/%s/events/", cfg.OrganizationSlug, cfg.ProjectSlug)
+	requestUrl := fmt.Sprintf("https://sentry.io/api/0/projects/%s/%s/issues/", cfg.OrganizationSlug, cfg.ProjectSlug)
 
 	testCallLimit := 1
 	params := url.Values{}
 	if sessionID != 0 {
-		params.Add("query", fmt.Sprintf("openReplaySession.id=%d", sessionID))
+		params.Add("query", fmt.Sprintf("openReplaySession.id:%d", sessionID))
 	} else {
 		params.Add("per_page", fmt.Sprintf("%d", testCallLimit))
 	}

backend/pkg/objectstorage/objectstorage.go

@@ -15,7 +15,7 @@ const (
 )
 
 type ObjectStorage interface {
-	Upload(reader io.Reader, key string, contentType string, compression CompressionType) error
+	Upload(reader io.Reader, key string, contentType, contentEncoding string, compression CompressionType) error
 	Get(key string) (io.ReadCloser, error)
 	Exists(key string) bool
 	GetCreationTime(key string) *time.Time

backend/pkg/objectstorage/s3/s3.go

@@ -67,19 +67,22 @@ func NewS3(cfg *objConfig.ObjectsConfig) (objectstorage.ObjectStorage, error) {
 	}, nil
 }
 
-func (s *storageImpl) Upload(reader io.Reader, key string, contentType string, compression objectstorage.CompressionType) error {
+func (s *storageImpl) Upload(reader io.Reader, key string, contentType, contentEncoding string, compression objectstorage.CompressionType) error {
 	cacheControl := "max-age=2628000, immutable, private"
-	var contentEncoding *string
+	var encoding *string
 	switch compression {
 	case objectstorage.Gzip:
 		encodeStr := "gzip"
-		contentEncoding = &encodeStr
+		encoding = &encodeStr
 	case objectstorage.Brotli:
 		encodeStr := "br"
-		contentEncoding = &encodeStr
+		encoding = &encodeStr
 	case objectstorage.Zstd:
 		// Have to ignore contentEncoding for Zstd (otherwise will be an error in browser)
 	}
+	if contentEncoding != "" {
+		encoding = &contentEncoding
+	}
 
 	_, err := s.uploader.Upload(&s3manager.UploadInput{
 		Body:            reader,
@@ -87,7 +90,7 @@ func (s *storageImpl) Upload(reader io.Reader, key string, contentType string, c
 		Key:             &key,
 		ContentType:     &contentType,
 		CacheControl:    &cacheControl,
-		ContentEncoding: contentEncoding,
+		ContentEncoding: encoding,
 		Tagging:         s.fileTag,
 	})
 	return err

ee/api/Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.11-alpine
+FROM python:3.12-alpine
 LABEL Maintainer="KRAIEM Taha Yassine<tahayk2@gmail.com>"
 RUN apk add --no-cache build-base libressl libffi-dev libressl-dev libxslt-dev libxml2-dev xmlsec-dev xmlsec tini
 
@@ -12,11 +12,9 @@ ENV SOURCE_MAP_VERSION=0.7.4 \
 
 WORKDIR /work
 COPY requirements.txt ./requirements.txt
-# Caching the source build
-RUN pip install --no-cache-dir --upgrade uv
-RUN uv pip install --no-cache-dir --upgrade pip setuptools wheel --system
-RUN uv pip install --no-cache-dir --upgrade python3-saml==1.16.0 --no-binary=lxml --system
-RUN uv pip install --no-cache-dir --upgrade -r requirements.txt --system
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+# This code is used to solve 'lxml & xmlsec libxml2 library version mismatch' error
+RUN pip uninstall -y lxml && pip install lxml
 
 COPY . .
 RUN mv env.default .env

ee/api/Dockerfile_alerts

@@ -1,4 +1,4 @@
-FROM python:3.11-alpine
+FROM python:3.12-alpine
 LABEL Maintainer="Rajesh Rajendran<rjshrjndrn@gmail.com>"
 LABEL Maintainer="KRAIEM Taha Yassine<tahayk2@gmail.com>"
 RUN apk add --no-cache build-base tini

ee/api/Dockerfile_crons

@@ -1,4 +1,4 @@
-FROM python:3.11-alpine
+FROM python:3.12-alpine
 LABEL Maintainer="Rajesh Rajendran<rjshrjndrn@gmail.com>"
 LABEL Maintainer="KRAIEM Taha Yassine<tahayk2@gmail.com>"
 RUN apk add --no-cache build-base tini

ee/api/Pipfile

@@ -20,6 +20,7 @@ python-decouple = "==3.8"
 pydantic = {extras = ["email"], version = "==2.9.2"}
 apscheduler = "==3.10.4"
 clickhouse-driver = {extras = ["lz4"], version = "==0.2.9"}
+lxml = "!=4.7.0,<=5.2.1,>=4.6.5"
 python3-saml = "==1.16.0"
 python-multipart = "==0.0.17"
 redis = "==5.2.0"

ee/api/chalicelib/core/roles.py

@@ -182,3 +182,20 @@ def delete(tenant_id, user_id, role_id):
                             {"tenant_id": tenant_id, "role_id": role_id})
         cur.execute(query=query)
     return get_roles(tenant_id=tenant_id)
+
+
+def get_role(tenant_id, role_id):
+    with pg_client.PostgresClient() as cur:
+        query = cur.mogrify("""SELECT roles.*
+                               FROM public.roles
+                               WHERE tenant_id =%(tenant_id)s
+                                    AND deleted_at IS NULL
+                                    AND not service_role
+                                    AND role_id = %(role_id)s
+                               LIMIT 1;""",
+                            {"tenant_id": tenant_id, "role_id": role_id})
+        cur.execute(query=query)
+        row = cur.fetchone()
+        if row is not None:
+            row["created_at"] = TimeUTC.datetime_to_timestamp(row["created_at"])
+    return helper.dict_to_camel_case(row)

ee/api/chalicelib/core/sessions_replay.py

@@ -19,7 +19,23 @@ def __group_metadata(session, project_metadata):
 
 
 def get_pre_replay(project_id, session_id):
+    with pg_client.PostgresClient() as cur:
+        query = cur.mogrify(
+            f"""\
+            SELECT encode(file_key,'hex') AS file_key
+            FROM public.sessions
+            WHERE project_id = %(project_id)s
+                AND session_id = %(session_id)s;""",
+            {"project_id": project_id, "session_id": session_id}
+        )
+        cur.execute(query=query)
+
+        data = cur.fetchone()
+        file_key = None
+        if data is not None:
+            file_key = data['file_key']
     return {
+        'fileKey': file_key,
         'domURL': [sessions_mobs.get_first_url(project_id=project_id, session_id=session_id, check_existence=False)]}
 
 

ee/api/chalicelib/core/users.py

@@ -199,6 +199,12 @@ def create_member(tenant_id, user_id, data: schemas.CreateMemberSchema, backgrou
     role_id = data.roleId
     if role_id is None:
         role_id = roles.get_role_by_name(tenant_id=tenant_id, name="member").get("roleId")
+    else:
+        role = roles.get_role(tenant_id=tenant_id, role_id=role_id)
+        if role is None:
+            return {"errors": ["role not found"]}
+        if role["name"].lower() == "owner" and role["protected"]:
+            return {"errors": ["invalid role"]}
     invitation_token = __generate_invitation_token()
     user = get_deleted_user_by_email(email=data.email)
     if user is not None and user["tenantId"] == tenant_id:
@@ -333,7 +339,7 @@ def edit_member(user_id_to_update, tenant_id, changes: schemas.EditMemberSchema,
     if editor_id != user_id_to_update:
         admin = get_user_role(tenant_id=tenant_id, user_id=editor_id)
         if not admin["superAdmin"] and not admin["admin"]:
-            return {"errors": ["unauthorized"]}
+            return {"errors": ["unauthorized, you must have admin privileges"]}
         if admin["admin"] and user["superAdmin"]:
             return {"errors": ["only the owner can edit his own details"]}
     else:
@@ -343,10 +349,10 @@ def edit_member(user_id_to_update, tenant_id, changes: schemas.EditMemberSchema,
             return {"errors": ["cannot change your own admin privileges"]}
         if changes.roleId:
             if user["superAdmin"] and changes.roleId != user["roleId"]:
-                changes.roleId = None
                 return {"errors": ["owner's role cannot be changed"]}
-
-            if changes.roleId != user["roleId"]:
+            elif user["superAdmin"]:
+                changes.roleId = None
+            elif changes.roleId != user["roleId"]:
                 return {"errors": ["cannot change your own role"]}
 
     if changes.name and len(changes.name) > 0:
@@ -357,6 +363,12 @@ def edit_member(user_id_to_update, tenant_id, changes: schemas.EditMemberSchema,
 
     if changes.roleId is not None:
         _changes["roleId"] = changes.roleId
+        role = roles.get_role(tenant_id=tenant_id, role_id=changes.roleId)
+        if role is None:
+            return {"errors": ["role not found"]}
+        else:
+            if role["name"].lower() == "owner" and role["protected"]:
+                return {"errors": ["invalid role"]}
 
     if len(_changes.keys()) > 0:
         update(tenant_id=tenant_id, user_id=user_id_to_update, changes=_changes, output=False)
@@ -540,12 +552,6 @@ def set_password_invitation(tenant_id, user_id, new_password):
     user = update(tenant_id=tenant_id, user_id=user_id, changes=changes)
     r = authenticate(user['email'], new_password)
 
-    tenant_id = r.pop("tenantId")
-    r["limits"] = {
-        "teamMember": -1,
-        "projects": -1,
-        "metadata": metadata.get_remaining_metadata_with_count(tenant_id)}
-
     return {
         "jwt": r.pop("jwt"),
         "refreshToken": r.pop("refreshToken"),
@@ -554,10 +560,7 @@ def set_password_invitation(tenant_id, user_id, new_password):
         "spotRefreshToken": r.pop("spotRefreshToken"),
         "spotRefreshTokenMaxAge": r.pop("spotRefreshTokenMaxAge"),
         "tenantId": tenant_id,
-        'data': {
-            "scopeState": scope.get_scope(tenant_id),
-            "user": r
-        }
+        **r
     }
 
 

ee/api/chalicelib/core/webhook.py

@@ -136,13 +136,13 @@ def add_edit(tenant_id, data: schemas.WebhookSchema, replace_none=None):
         raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=f"name already exists.")
     if data.webhook_id is not None:
         return update(tenant_id=tenant_id, webhook_id=data.webhook_id,
-                      changes={"endpoint": data.endpoint.unicode_string(),
+                      changes={"endpoint": data.endpoint,
                                "authHeader": data.auth_header,
                                "name": data.name},
                       replace_none=replace_none)
     else:
         return add(tenant_id=tenant_id,
-                   endpoint=data.endpoint.unicode_string(),
+                   endpoint=data.endpoint,
                    auth_header=data.auth_header,
                    name=data.name,
                    replace_none=replace_none)

ee/api/chalicelib/utils/exp_ch_helper.py

@@ -58,6 +58,7 @@ def get_event_type(event_type: Union[schemas.EventType, schemas.PerformanceEvent
         schemas.EventType.REQUEST: "REQUEST",
         schemas.EventType.REQUEST_DETAILS: "REQUEST",
         schemas.PerformanceEventType.FETCH_FAILED: "REQUEST",
+        schemas.GraphqlFilterType.GRAPHQL_NAME: "GRAPHQL",
         schemas.EventType.STATE_ACTION: "STATEACTION",
         schemas.EventType.ERROR: "ERROR",
         schemas.PerformanceEventType.LOCATION_AVG_CPU_LOAD: 'PERFORMANCE',

ee/api/entrypoint.sh

@@ -1,4 +1,5 @@
 #!/bin/sh
+export TZ=UTC
 sh env_vars.sh
 source /tmp/.env.override
 

ee/api/entrypoint_alerts.sh

@@ -1,4 +1,5 @@
 #!/bin/sh
+export TZ=UTC
 export ASSIST_KEY=ignore
 sh env_vars.sh
 source /tmp/.env.override

ee/api/entrypoint_crons.sh

@@ -1,4 +1,5 @@
 #!/bin/sh
+export TZ=UTC
 export ASSIST_KEY=ignore
 sh env_vars.sh
 source /tmp/.env.override

ee/api/requirements.txt

@@ -21,8 +21,8 @@ apscheduler==3.10.4
 clickhouse-driver[lz4]==0.2.9
 # TODO: enable after xmlsec fix https://github.com/xmlsec/python-xmlsec/issues/252
 #--no-binary is used to avoid libxml2 library version incompatibilities between xmlsec and lxml
-python3-saml==1.16.0
---no-binary=lxml
+lxml >= 4.6.5, !=4.7.0, <=5.2.1
+python3-saml==1.16.0 --no-binary=lxml
 python-multipart==0.0.17
 
 redis==5.2.0

ee/backend/pkg/objectstorage/azure/azure.go

@@ -50,16 +50,19 @@ func NewStorage(cfg *config.ObjectsConfig) (objectstorage.ObjectStorage, error)
 	}, nil
 }
 
-func (s *storageImpl) Upload(reader io.Reader, key string, contentType string, compression objectstorage.CompressionType) error {
+func (s *storageImpl) Upload(reader io.Reader, key string, contentType, contentEncoding string, compression objectstorage.CompressionType) error {
 	cacheControl := "max-age=2628000, immutable, private"
-	var contentEncoding *string
+	var encoding *string
 	switch compression {
 	case objectstorage.Gzip:
 		gzipStr := "gzip"
-		contentEncoding = &gzipStr
+		encoding = &gzipStr
 	case objectstorage.Brotli:
 		gzipStr := "br"
-		contentEncoding = &gzipStr
+		encoding = &gzipStr
+	}
+	if contentEncoding != "" {
+		encoding = &contentEncoding
 	}
 	// Remove leading slash to avoid empty folder creation
 	if strings.HasPrefix(key, "/") {
@@ -68,7 +71,7 @@ func (s *storageImpl) Upload(reader io.Reader, key string, contentType string, c
 	_, err := s.client.UploadStream(context.Background(), s.container, key, reader, &azblob.UploadStreamOptions{
 		HTTPHeaders: &blob.HTTPHeaders{
 			BlobCacheControl:    &cacheControl,
-			BlobContentEncoding: contentEncoding,
+			BlobContentEncoding: encoding,
 			BlobContentType:     &contentType,
 		},
 		Tags: s.tags,

ee/scripts/schema/db/init_dbs/postgresql/1.21.0/1.21.0.sql

@@ -93,6 +93,15 @@ DROP TYPE IF EXISTS events.resource_method;
 
 ALTER TYPE integration_provider ADD VALUE IF NOT EXISTS 'dynatrace';
 
+UPDATE users SET settings=COALESCE(settings, '{}'::jsonb) || '{
+  "modules": [
+    "usability-tests",
+    "feature-flags"
+  ]
+}'::jsonb
+WHERE settings IS NULL
+   OR settings -> 'modules' IS NULL;
+
 COMMIT;
 
 \elif :is_next

frontend/app/api_client.ts

@@ -198,6 +198,11 @@ export default class APIClient {
     }
 
     return fetch(edp + _path, init).then((response) => {
+      if (response.status === 403) {
+        console.warn('API returned 403. Clearing JWT token.');
+        this.onUpdateJwt({ jwt: undefined }); // Clear the token
+      }
+
       if (response.ok) {
         return response;
       } else {

frontend/app/components/Assist/AssistView.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import LiveSessionList from 'Shared/LiveSessionList';
 import LiveSessionSearch from 'Shared/LiveSessionSearch';
 import AssistSearchField from './AssistSearchField';
+import usePageTitle from '@/hooks/usePageTitle';
 
 function AssistView() {
+  usePageTitle('Co-Browse - OpenReplay');
   return (
     <div className="w-full mx-auto" style={{ maxWidth: '1360px'}}>
       <AssistSearchField />

frontend/app/components/Client/Users/components/UserForm/UserForm.tsx

@@ -18,7 +18,7 @@ function UserForm() {
   const isSaving = userStore.saving;
   const user: any = userStore.instance || userStore.initUser();
   const roles = roleStore.list
-    .filter((r) => (r.isProtected ? user.isSuperAdmin : true))
+    .filter((r) => (r.protected ? user.isSuperAdmin : true))
     .map((r) => ({ label: r.name, value: r.roleId }));
 
   const onChangeCheckbox = (e: any) => {

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx

@@ -18,7 +18,7 @@ interface Props {
 function SessionsBy(props: Props) {
   const { metric = {}, data = { values: [] }, onClick = () => null, isTemplate } = props;
   const [selected, setSelected] = React.useState<any>(null);
-  const total = data.count;
+  const total = data.total;
   const { openModal, closeModal } = useModal();
   const modalMetric = React.useMemo(() => Object.assign(new Widget(), metric), [metric]);
 

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx

@@ -9,7 +9,6 @@ import {
 import React from 'react';
 
 import ExCard from './ExCard';
-import { size } from '@floating-ui/react-dom-interactions';
 
 const TYPES = {
   Frustrations: 'frustrations',

frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx

@@ -41,6 +41,7 @@ function ExcludeFilters(props: Props) {
               onRemoveFilter={() => onRemoveFilter(index)}
               // saveRequestPayloads={saveRequestPayloads}
               disableDelete={false}
+              allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
               // excludeFilterKeys={excludeFilterKeys}
             />
           ))}

frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx

@@ -136,9 +136,10 @@ function FilterSeries(props: Props) {
                                     toggleExpand={() => setExpanded(!expanded)}/>
             )}
 
-            {expandable && (
+            {expandable && !expanded && (
                 <Space className="justify-between w-full px-5 py-2 cursor-pointer" onClick={() => setExpanded(!expanded)}>
-                    <div>{!expanded && <FilterCountLabels filters={series.filter.filters} toggleExpand={() => setExpanded(!expanded)}/>}</div>
+                    <FilterCountLabels filters={series.filter.filters} toggleExpand={() => setExpanded(!expanded)}/>
+                    {/*<div>{!expanded && <FilterCountLabels filters={series.filter.filters} toggleExpand={() => setExpanded(!expanded)}/>}</div>*/}
                     <Button size="small"
                             icon={expanded ? <ChevronUp size={16}/> : <ChevronDown size={16}/>}/>
                 </Space>
@@ -156,13 +157,13 @@ function FilterSeries(props: Props) {
                                 supportsEmpty={supportsEmpty}
                                 onFilterMove={onFilterMove}
                                 excludeFilterKeys={excludeFilterKeys}
-                                // actions={[
-                                //     expandable && (
-                                //         <Button onClick={() => setExpanded(!expanded)}
-                                //                 size="small"
-                                //                 icon={expanded ? <ChevronUp size={16}/> : <ChevronDown size={16}/>}/>
-                                //     )
-                                // ]}
+                                actions={[
+                                    expandable && (
+                                        <Button onClick={() => setExpanded(!expanded)}
+                                                size="small"
+                                                icon={expanded ? <ChevronUp size={16}/> : <ChevronDown size={16}/>}/>
+                                    )
+                                ]}
                             />
                         ) : (
                             <div className="color-gray-medium">{emptyMessage}</div>

frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx

@@ -1,6 +1,5 @@
 import { useStore } from 'App/mstore';
 import React from 'react';
-// import Select from 'Shared/Select';
 import { Select } from 'antd';
   
 const sortOptions = [

frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx

@@ -68,7 +68,7 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
   const eventsLength = metric.series[0].filter.filters.filter((i: any) => i && i.isEvent).length;
   // const cannotSaveFunnel = isFunnel && (!metric.series[0] || eventsLength <= 1);
 
-  const isSingleSeries = isTable || isFunnel || isClickMap || isInsights || isRetention;
+  const isSingleSeries = isTable || isFunnel || isClickMap || isInsights || isRetention || isPathAnalysis;
 
   // const onAddFilter = (filter: any) => {
   //     metric.series[0].filter.addFilter(filter);

frontend/app/components/FFlags/FFlagsList.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { numberWithCommas } from 'App/utils';
-import withPageTitle from 'HOCs/withPageTitle';
 import withPermissions from 'HOCs/withPermissions';
 import FFlagsListHeader from 'Components/FFlags/FFlagsListHeader';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@@ -9,8 +8,10 @@ import FFlagItem from './FFlagItem';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import Select from 'Shared/Select';
+import usePageTitle from '@/hooks/usePageTitle';
 
 function FFlagsList({ siteId }: { siteId: string }) {
+  usePageTitle('Feature Flags - OpenReplay');
   const { featureFlagsStore, userStore } = useStore();
 
   React.useEffect(() => {
@@ -31,7 +32,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
             options={[
               { label: 'All', value: '0' as const },
               { label: 'Enabled', value: '1' as const },
-              { label: 'Disabled', value: '2' as const },
+              { label: 'Disabled', value: '2' as const }
             ]}
             defaultValue={featureFlagsStore.activity}
             plain
@@ -45,7 +46,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
           <Select
             options={[
               { label: 'Newest', value: 'DESC' },
-              { label: 'Oldest', value: 'ASC' },
+              { label: 'Oldest', value: 'ASC' }
             ]}
             defaultValue={featureFlagsStore.sort.order}
             plain
@@ -65,7 +66,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
                 <AnimatedSVG name={ICONS.NO_FFLAGS} size={60} />
                 <div className="text-center  mt-4  text-lg font-medium">
                   {featureFlagsStore.sort.query === ''
-                    ? "You haven't created any feature flags yet"
+                    ? 'You haven\'t created any feature flags yet'
                     : 'No matching results'}
                 </div>
               </div>
@@ -121,6 +122,4 @@ function FFlagsList({ siteId }: { siteId: string }) {
   );
 }
 
-export default withPageTitle('Feature Flags')(
-  withPermissions(['FEATURE_FLAGS'])(observer(FFlagsList))
-);
+export default withPermissions(['FEATURE_FLAGS'])(observer(FFlagsList));

frontend/app/components/ForgotPassword/CreatePassword.tsx

@@ -32,13 +32,7 @@ function CreatePassword(props: Props) {
     if (!validatePassword(password)) {
       return;
     }
-    resetPassword({ invitation, pass, password }).then((response: any) => {
-      if (response && response.errors && response.errors.length > 0) {
-        setError(response.errors[0]);
-      } else {
-        setUpdated(true);
-      }
-    });
+    void resetPassword({ invitation, pass, password });
   };
 
   const onSubmit = (e: any) => {
@@ -102,7 +96,7 @@ function CreatePassword(props: Props) {
                   />
                 </Form.Field>
                 <Form.Field>
-                  <label>{'Cofirm password'}</label>
+                  <label>{'Confirm password'}</label>
                   <Input
                     autoComplete="new-password"
                     type="password"

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx

@@ -1,163 +1,187 @@
 import React, { useEffect } from 'react';
 import Widget from 'App/mstore/types/widget';
-import Funnelbar, { UxTFunnelBar } from "./FunnelBar";
+import Funnelbar, { UxTFunnelBar } from './FunnelBar';
 import cn from 'classnames';
 import stl from './FunnelWidget.module.css';
 import { observer } from 'mobx-react-lite';
 import { NoContent, Icon } from 'UI';
 import { Tag, Tooltip } from 'antd';
 import { useModal } from 'App/components/Modal';
+import { useStore } from '@/mstore';
+import Filter from '@/mstore/types/filter';
 
 interface Props {
-    metric?: Widget;
-    isWidget?: boolean;
-    data: any;
+  metric?: Widget;
+  isWidget?: boolean;
+  data: any;
 }
+
 function FunnelWidget(props: Props) {
-    const [focusedFilter, setFocusedFilter] = React.useState<number | null>(null);
-    const { isWidget = false, data, metric } = props;
-    const funnel = data.funnel || { stages: [] };
-    const totalSteps = funnel.stages.length;
-    const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
-    const hasMoreSteps = funnel.stages.length > 2;
-    const lastStage = funnel.stages[funnel.stages.length - 1];
-    const remainingSteps = totalSteps - 2;
-    const { hideModal } = useModal();
-    const metricLabel = metric?.metricFormat == 'userCount' ? 'Users' : 'Sessions';
+  const { dashboardStore, searchStore } = useStore();
+  const [focusedFilter, setFocusedFilter] = React.useState<number | null>(null);
+  const { isWidget = false, data, metric } = props;
+  const funnel = data.funnel || { stages: [] };
+  const totalSteps = funnel.stages.length;
+  const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
+  const hasMoreSteps = funnel.stages.length > 2;
+  const lastStage = funnel.stages[funnel.stages.length - 1];
+  const remainingSteps = totalSteps - 2;
+  const { hideModal } = useModal();
+  const metricLabel = metric?.metricFormat == 'userCount' ? 'Users' : 'Sessions';
+  const drillDownFilter = dashboardStore.drillDownFilter;
+  const drillDownPeriod = dashboardStore.drillDownPeriod;
+  const metricFilters = metric?.series[0]?.filter.filters || [];
 
-    useEffect(() => {
-        return () => {
-            if (isWidget) return;
-            hideModal();
+  const applyDrillDown = (index: number) => {
+    const filter = new Filter().fromData({ filters: metricFilters.slice(0, index + 1) });
+    const periodTimestamps = drillDownPeriod.toTimestamps();
+    drillDownFilter.merge({
+      filters: filter.toJson().filters,
+      startTimestamp: periodTimestamps.startTimestamp,
+      endTimestamp: periodTimestamps.endTimestamp
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (isWidget) return;
+      hideModal();
+    };
+  }, []);
+
+  const focusStage = (index: number) => {
+    funnel.stages.forEach((s, i) => {
+      // turning on all filters if one was focused already
+      if (focusedFilter === index) {
+        s.updateKey('isActive', true);
+        setFocusedFilter(null);
+      } else {
+        setFocusedFilter(index);
+        if (i === index) {
+          s.updateKey('isActive', true);
+        } else {
+          s.updateKey('isActive', false);
         }
-    }, []);
+      }
+    });
 
-    const focusStage = (index: number) => {
-        funnel.stages.forEach((s, i) => {
-            // turning on all filters if one was focused already
-            if (focusedFilter === index) {
-                s.updateKey('isActive', true)
-                setFocusedFilter(null)
-            } else {
-                setFocusedFilter(index)
-                if (i === index) {
-                    s.updateKey('isActive', true)
-                } else {
-                    s.updateKey('isActive', false)
-                }
-            }
-        })
-    }
+    applyDrillDown(focusedFilter === index ? -1 : index);
+  };
 
-    return (
-        <NoContent
-            style={{ minHeight: 220 }}
-            title={
-                <div className="flex items-center text-lg">
-                    <Icon name="info-circle" className="mr-2" size="18" />
-                    No data available for the selected period.
-                </div>
-            }
-            show={!stages || stages.length === 0}
-        >
-            <div className="w-full">
-                { !isWidget && (
-                    stages.map((filter: any, index: any) => (
-                        <Stage
-                          key={index}
-                          index={index + 1}
-                          isWidget={isWidget}
-                          stage={filter}
-                          focusStage={focusStage}
-                          focusedFilter={focusedFilter}
-                          metricLabel={metricLabel}
-                        />
-                    ))
-                )}
+  return (
+    <NoContent
+      style={{ minHeight: 220 }}
+      title={
+        <div className="flex items-center text-lg">
+          <Icon name="info-circle" className="mr-2" size="18" />
+          No data available for the selected period.
+        </div>
+      }
+      show={!stages || stages.length === 0}
+    >
+      <div className="w-full">
+        {!isWidget && (
+          stages.map((filter: any, index: any) => (
+            <Stage
+              key={index}
+              index={index + 1}
+              isWidget={isWidget}
+              stage={filter}
+              focusStage={focusStage}
+              focusedFilter={focusedFilter}
+              metricLabel={metricLabel}
+            />
+          ))
+        )}
 
-                { isWidget && (
-                    <>
-                        <Stage index={1} isWidget={isWidget} stage={stages[0]} />
+        {isWidget && (
+          <>
+            <Stage index={1} isWidget={isWidget} stage={stages[0]} />
 
-                        { hasMoreSteps && (
-                            <>
-                                <EmptyStage total={remainingSteps} />
-                            </>
-                        )}
+            {hasMoreSteps && (
+              <>
+                <EmptyStage total={remainingSteps} />
+              </>
+            )}
 
-                        {funnel.stages.length > 1 && (
-                            <Stage index={totalSteps} isWidget={isWidget} stage={lastStage} />
-                        )}
-                    </>
-                )}
-            </div>
-            <div className="flex items-center pb-4">
-                <div className="flex items-center">
-                    <span className="text-base font-medium mr-2">Lost conversion</span>
-                    <Tooltip title={`${funnel.lostConversions} Sessions ${funnel.lostConversionsPercentage}%`}>
-                        <Tag bordered={false} color="red" className='text-lg font-medium rounded-lg'>
-                        {funnel.lostConversions}
-                        </Tag>
-                    </Tooltip>
-                </div>
-                <div className="mx-3" />
-                <div className="flex items-center">
-                    <span className="text-base font-medium mr-2">Total conversion</span>
-                    <Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
-                        <Tag bordered={false} color="green" className='text-lg font-medium rounded-lg'>
-                        {funnel.totalConversions}
-                        </Tag>
-                    </Tooltip>
-                </div>
-            </div>
-            {funnel.totalDropDueToIssues > 0 && <div className="flex items-center mb-2"><Icon name="magic" /> <span className="ml-2">{funnel.totalDropDueToIssues} sessions dropped due to issues.</span></div>}
-        </NoContent>
-    );
+            {funnel.stages.length > 1 && (
+              <Stage index={totalSteps} isWidget={isWidget} stage={lastStage} />
+            )}
+          </>
+        )}
+      </div>
+      <div className="flex items-center pb-4">
+        <div className="flex items-center">
+          <span className="text-base font-medium mr-2">Lost conversion</span>
+          <Tooltip title={`${funnel.lostConversions} Sessions ${funnel.lostConversionsPercentage}%`}>
+            <Tag bordered={false} color="red" className="text-lg font-medium rounded-lg">
+              {funnel.lostConversions}
+            </Tag>
+          </Tooltip>
+        </div>
+        <div className="mx-3" />
+        <div className="flex items-center">
+          <span className="text-base font-medium mr-2">Total conversion</span>
+          <Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
+            <Tag bordered={false} color="green" className="text-lg font-medium rounded-lg">
+              {funnel.totalConversions}
+            </Tag>
+          </Tooltip>
+        </div>
+      </div>
+      {funnel.totalDropDueToIssues > 0 && <div className="flex items-center mb-2"><Icon name="magic" /> <span
+        className="ml-2">{funnel.totalDropDueToIssues} sessions dropped due to issues.</span></div>}
+    </NoContent>
+  );
 }
 
 export const EmptyStage = observer(({ total }: any) => {
-    return (
-        <div className={cn("flex items-center mb-4 pb-3", stl.step)}>
-            <IndexNumber index={0} />
-            <div className="w-fit px-2 border border-teal py-1 text-center justify-center bg-teal-lightest flex items-center rounded-full color-teal" style={{ width: '100px'}}>
-                {`+${total} ${total > 1 ? 'steps' : 'step'}`}
-            </div>
-            <div className="border-b w-full border-dashed"></div>
-        </div>
-    )
-})
+  return (
+    <div className={cn('flex items-center mb-4 pb-3', stl.step)}>
+      <IndexNumber index={0} />
+      <div
+        className="w-fit px-2 border border-teal py-1 text-center justify-center bg-teal-lightest flex items-center rounded-full color-teal"
+        style={{ width: '100px' }}>
+        {`+${total} ${total > 1 ? 'steps' : 'step'}`}
+      </div>
+      <div className="border-b w-full border-dashed"></div>
+    </div>
+  );
+});
 
 export const Stage = observer(({ metricLabel, stage, index, isWidget, uxt, focusStage, focusedFilter }: any) => {
-    return stage ? (
-        <div
-          className={cn('flex items-start', stl.step, { [stl['step-disabled']]: !stage.isActive })}
-        >
-          <IndexNumber index={index} />
-          {!uxt ? <Funnelbar metricLabel={metricLabel} index={index} filter={stage} focusStage={focusStage} focusedFilter={focusedFilter} /> : <UxTFunnelBar filter={stage} />}
-          {/*{!isWidget && !uxt && <BarActions bar={stage} />}*/}
-        </div>
-      ) : (
-        <></>
-      )
-})
+  return stage ? (
+    <div
+      className={cn('flex items-start', stl.step, { [stl['step-disabled']]: !stage.isActive })}
+    >
+      <IndexNumber index={index} />
+      {!uxt ? <Funnelbar metricLabel={metricLabel} index={index} filter={stage} focusStage={focusStage}
+                         focusedFilter={focusedFilter} /> : <UxTFunnelBar filter={stage} />}
+      {/*{!isWidget && !uxt && <BarActions bar={stage} />}*/}
+    </div>
+  ) : (
+    <></>
+  );
+});
 
 export const IndexNumber = observer(({ index }: any) => {
-    return (
-        <div className="z-10 w-6 h-6 border shrink-0 mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
-            {index === 0 ? <Icon size="14" color="gray-dark" name="list" /> : index}
-        </div>
-    );
-})
+  return (
+    <div
+      className="z-10 w-6 h-6 border shrink-0 mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
+      {index === 0 ? <Icon size="14" color="gray-dark" name="list" /> : index}
+    </div>
+  );
+});
 
 
 const BarActions = observer(({ bar }: any) => {
-    return (
-        <div className="self-end flex items-center justify-center ml-4" style={{ marginBottom: '49px'}}>
-            <button onClick={() => bar.updateKey('isActive', !bar.isActive)}>
-                <Icon name="eye-slash-fill" color={bar.isActive ? "gray-light" : "gray-darkest"} size="22" />
-            </button>
-        </div>
-    )
-})
+  return (
+    <div className="self-end flex items-center justify-center ml-4" style={{ marginBottom: '49px' }}>
+      <button onClick={() => bar.updateKey('isActive', !bar.isActive)}>
+        <Icon name="eye-slash-fill" color={bar.isActive ? 'gray-light' : 'gray-darkest'} size="22" />
+      </button>
+    </div>
+  );
+});
 
 export default observer(FunnelWidget);

frontend/app/components/Overview/Overview.tsx

@@ -1,8 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import withPageTitle from 'HOCs/withPageTitle';
-import NoSessionsMessage from 'Shared/NoSessionsMessage';
-import MainSearchBar from 'Shared/MainSearchBar';
-import SessionSearch from 'Shared/SessionSearch';
 import SessionsTabOverview from 'Shared/SessionsTabOverview/SessionsTabOverview';
 import FFlagsList from 'Components/FFlags';
 import NewFFlag from 'Components/FFlags/NewFFlag';
@@ -12,6 +9,8 @@ import { withRouter, RouteComponentProps, useLocation } from 'react-router-dom';
 import FlagView from 'Components/FFlags/FlagView/FlagView';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/mstore';
+import NotesList from 'Shared/SessionsTabOverview/components/Notes/NoteList';
+import Bookmarks from 'Shared/SessionsTabOverview/components/Bookmarks/Bookmarks';
 
 // @ts-ignore
 interface IProps extends RouteComponentProps {
@@ -36,15 +35,22 @@ function Overview({ match: { params } }: IProps) {
   return (
     <Switch>
       <Route exact strict
-             path={[withSiteId(sessions(), siteId), withSiteId(notes(), siteId), withSiteId(bookmarks(), siteId)]}>
+             path={withSiteId(sessions(), siteId)}>
         <div className="mb-5 w-full mx-auto" style={{ maxWidth: '1360px' }}>
-          <NoSessionsMessage siteId={siteId} />
-          <MainSearchBar />
-          <SessionSearch />
-          <div className="my-4" />
           <SessionsTabOverview />
         </div>
       </Route>
+      <Route exact strict
+             path={withSiteId(bookmarks(), siteId)}>
+        <div className="mb-5 w-full mx-auto" style={{ maxWidth: '1360px' }}>
+          <Bookmarks />
+        </div>
+      </Route>
+      <Route exact strict path={withSiteId(notes(), siteId)}>
+        <div className="mb-5 w-full mx-auto" style={{ maxWidth: '1360px' }}>
+          <NotesList />
+        </div>
+      </Route>
       <Route exact strict path={withSiteId(fflags(), siteId)}>
         <FFlagsList siteId={siteId} />
       </Route>

frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx

@@ -28,6 +28,7 @@ import {
 import { useStore } from 'App/mstore';
 import { session as sessionRoute, withSiteId } from 'App/routes';
 import { SummaryButton } from 'Components/Session_/Player/Controls/Controls';
+import { MobEventsList, WebEventsList } from "../../../Session_/Player/Controls/EventsList";
 import useShortcuts from '../ReplayPlayer/useShortcuts';
 
 export const SKIP_INTERVALS = {

frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx

@@ -105,7 +105,7 @@ function PlayerBlockHeader(props: any) {
           )}
         </div>
       </div>
-        <div className="relative border-l border-l-gray-lighter" style={{ minWidth: '270px' }}>
+        <div className="px-2 relative border-l border-l-gray-lighter" style={{ minWidth: '270px' }}>
           <Tabs
             tabs={TABS}
             active={activeTab}

frontend/app/components/Session/Player/SharedComponents/BackendLogs/BackendLogsPanel.tsx

@@ -1,8 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
-import { Segmented } from 'antd';
 import React from 'react';
 import { VList, VListHandle } from 'virtua';
-import { PlayerContext } from "App/components/Session/playerContext";
+import { PlayerContext } from 'App/components/Session/playerContext';
 import { processLog, UnifiedLog } from './utils';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
@@ -12,13 +11,12 @@ import {
 } from 'App/components/Client/Integrations/apiMethods';
 import BottomBlock from 'App/components/shared/DevTools/BottomBlock';
 import { capitalize } from 'App/utils';
-import { Icon, Input } from 'UI';
+import { Icon } from 'UI';
+import { Segmented, Input, Tooltip } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
 import { client } from 'App/mstore';
-import { FailedFetch, LoadingFetch } from "./StatusMessages";
-import {
-  TableHeader,
-  LogRow
-} from './Table'
+import { FailedFetch, LoadingFetch } from './StatusMessages';
+import { TableHeader, LogRow } from './Table';
 
 async function fetchLogs(
   tab: string,
@@ -30,23 +28,24 @@ async function fetchLogs(
   );
   const json = await data.json();
   try {
-    const logsResp = await fetch(json.url)
+    const logsResp = await fetch(json.url);
     if (logsResp.ok) {
-      const logJson = await logsResp.json()
-      if (logJson.length === 0) return []
-      return processLog(logJson)
+      const logJson = await logsResp.json();
+      if (logJson.length === 0) return [];
+      return processLog(logJson);
     } else {
-      throw new Error('Failed to fetch logs')
+      throw new Error('Failed to fetch logs');
     }
   } catch (e) {
-    console.log(e)
-    throw e
+    console.log(e);
+    throw e;
   }
 }
 
 function BackendLogsPanel() {
   const { projectsStore, sessionStore, integrationsStore } = useStore();
-  const integratedServices = integrationsStore.integrations.backendLogIntegrations;
+  const integratedServices =
+    integrationsStore.integrations.backendLogIntegrations;
   const defaultTab = integratedServices[0]!.name;
   const sessionId = sessionStore.currentId;
   const projectId = projectsStore.siteId!;
@@ -82,40 +81,59 @@ function BackendLogsPanel() {
   return (
     <BottomBlock style={{ height: '100%' }}>
       <BottomBlock.Header>
-        <div className={'flex gap-2 items-center w-full'}>
-          <div className={'font-semibold'}>Traces</div>
-          {tabs.length && tab ? (
-            <div>
-              <Segmented options={tabs} value={tab} onChange={setTab} />
-            </div>
-          ) : null}
+        <div className="flex items-center justify-between w-full">
+          <div className={'flex gap-2 items-center'}>
+            <div className={'font-semibold'}>Traces</div>
+            {tabs.length && tab ? (
+              <div>
+                <Segmented
+                  options={tabs}
+                  value={tab}
+                  onChange={setTab}
+                  size="small"
+                />
+              </div>
+            ) : null}
+          </div>
 
-          <div className={'ml-auto'} />
-          <Input
-            className="input-small h-8"
-            placeholder="Filter by keyword"
-            icon="search"
-            name="filter"
-            height={28}
-            onChange={onFilterChange}
-            value={filter}
-          />
+          <div className="flex items-center gap-2">
+            <Segmented
+              options={[
+                { label: 'All Tabs', value: 'all' },
+                {
+                  label: (
+                    <Tooltip title="Backend logs are fetched for all tabs combined.">
+                      <span>Current Tab</span>
+                    </Tooltip>
+                  ),
+                  value: 'current',
+                  disabled: true,
+                },
+              ]}
+              defaultValue="all"
+              size="small"
+              className="rounded-full font-medium"
+            />
+
+            <Input
+              className="rounded-lg"
+              placeholder="Filter by keyword"
+              name="filter"
+              onChange={onFilterChange}
+              value={filter}
+              size="small"
+              prefix={<SearchOutlined className="text-neutral-400" />}
+            />
+          </div>
         </div>
       </BottomBlock.Header>
 
       <BottomBlock.Content className="overflow-y-auto">
-        {isPending ? (
-          <LoadingFetch provider={capitalize(tab)} />
-        ) : null}
+        {isPending ? <LoadingFetch provider={capitalize(tab)} /> : null}
         {isError ? (
-          <FailedFetch
-            provider={capitalize(tab)}
-            onRetry={refetch}
-          />
-        ) : null}
-        {isSuccess ? (
-          <LogsTable data={data} />
+          <FailedFetch provider={capitalize(tab)} onRetry={refetch} />
         ) : null}
+        {isSuccess ? <LogsTable data={data} /> : null}
       </BottomBlock.Content>
     </BottomBlock>
   );
@@ -128,8 +146,10 @@ const LogsTable = observer(({ data }: { data: UnifiedLog[] }) => {
   const _list = React.useRef<VListHandle>(null);
   const activeIndex = React.useMemo(() => {
     const currTs = time + sessionStart;
-    const index = data.findIndex(
-      (log) => log.timestamp !== 'N/A' ? new Date(log.timestamp).getTime() >= currTs : false
+    const index = data.findIndex((log) =>
+      log.timestamp !== 'N/A'
+        ? new Date(log.timestamp).getTime() >= currTs
+        : false
     );
     return index === -1 ? data.length - 1 : index;
   }, [time, data.length]);
@@ -141,17 +161,22 @@ const LogsTable = observer(({ data }: { data: UnifiedLog[] }) => {
 
   const onJump = (ts: number) => {
     player.jump(ts - sessionStart);
-  }
+  };
   return (
     <>
       <TableHeader size={data.length} />
       <VList ref={_list} count={data.length}>
         {data.map((log, index) => (
-          <LogRow key={index} isActive={index === activeIndex} log={log} onJump={onJump} />
+          <LogRow
+            key={index}
+            isActive={index === activeIndex}
+            log={log}
+            onJump={onJump}
+          />
         ))}
       </VList>
     </>
-  )
+  );
 });
 
 export default observer(BackendLogsPanel);

frontend/app/components/Session/Player/SharedComponents/BackendLogs/StatusMessages.tsx

@@ -12,7 +12,7 @@ export function LoadingFetch({ provider }: { provider: string }) {
         'w-full h-full flex items-center justify-center flex-col gap-2'
       }
     >
-      <LoadingOutlined style={{ fontSize: 32 }} />
+      <LoadingOutlined size={32} />
       <div>Fetching logs from {provider}...</div>
     </div>
   );
@@ -33,16 +33,23 @@ export function FailedFetch({
         'w-full h-full flex flex-col items-center justify-center gap-2'
       }
     >
-      <Icon name={'exclamation-circle'} size={32} />
-      <div className={'flex items-center gap-1'}>
+      
+      <div className={'flex items-center gap-1 font-medium'}>
+        <Icon name={'exclamation-circle'} size={14} /> 
         <span>Failed to fetch logs from {provider}. </span>
-        <div className={'link'} onClick={onRetry}>
+      </div>
+
+      <div className='flex items-center gap-3'>
+
+      <Button  type='text' size='small' onClick={onRetry}>
           Retry
-        </div>
-      </div>
-      <div className={'link'} onClick={() => history.push(intPath)}>
+        </Button>
+
+      <Button  type='text' size='small'  onClick={() => history.push(intPath)}>
         Check Configuration
+      </Button>
       </div>
+      
     </div>
   );
 }

frontend/app/components/Session/Player/SharedComponents/BackendLogs/utils.ts

@@ -15,7 +15,7 @@ export function processLog(log: any): UnifiedLog[] {
   } else if (isDynatraceLog(log)) {
     return log.map(processDynatraceLog);
   } else {
-    throw new Error("Unknown log format");
+    console.error("Unknown log format");
   }
 }
 
@@ -37,7 +37,7 @@ function isElasticLog(log: any): boolean {
 }
 
 function isSentryLog(log: any): boolean {
-  return log && log[0].id && log[0].message && log[0].title;
+  return log && 'id' in log[0] && 'message' in log[0] && 'title' in log[0];
 }
 
 function processDynatraceLog(log: any): UnifiedLog {

frontend/app/components/Session/Player/TagWatch/TagWatch.tsx

@@ -2,14 +2,51 @@ import { useStore } from 'App/mstore';
 import SaveModal from 'Components/Session/Player/TagWatch/SaveModal';
 import React from 'react';
 import { PlayerContext } from 'Components/Session/playerContext';
-import { Button, Input } from 'antd';
-import { CopyButton } from 'UI';
-import { SearchOutlined, ZoomInOutlined } from '@ant-design/icons';
+import { Button, Input, Tooltip } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { ZoomInOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import { useModal } from 'App/components/Modal';
 import { toast } from 'react-toastify';
-import { FilterKey } from "App/types/filter/filterType";
-import { addOptionsToFilter } from "App/types/filter/newFilter";
+import { FilterKey } from 'App/types/filter/filterType';
+import { addOptionsToFilter } from 'App/types/filter/newFilter';
+
+interface CopyableTextAreaProps {
+  selector: string;
+  setSelector: (value: string) => void;
+}
+
+const CopyableTextArea: React.FC<CopyableTextAreaProps> = ({ selector, setSelector }) => {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(selector);
+  };
+
+  return (
+    <div className="w-full relative">
+      <Input.TextArea
+        value={selector}
+        onChange={(e) => setSelector(e.target.value)}
+        className="rounded-lg font-mono text-sm  placeholder:font-sans placeholder:text-base placeholder:text-gray-400"
+        rows={4}
+        style={{ paddingRight: '40px' }}
+        placeholder='Enter selector to tag elements. E.g. .btn-primary'
+      />
+      <Tooltip title="Copy">
+        <Button
+          type="text"
+          icon={<CopyOutlined />}
+          onClick={handleCopy}
+          style={{
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            zIndex: 1,
+          }}
+        />
+      </Tooltip>
+    </div>
+  );
+};
 
 function TagWatch() {
   const { tagWatchStore, searchStore } = useStore();
@@ -50,7 +87,7 @@ function TagWatch() {
         ignoreClickRage: ignoreClRage,
         ignoreDeadClick: ignoreDeadCl,
       });
-      const tags = await tagWatchStore.getTags()
+      const tags = await tagWatchStore.getTags();
       if (tags) {
         addOptionsToFilter(
           FilterKey.TAGGED_ELEMENT,
@@ -58,42 +95,41 @@ function TagWatch() {
         );
         searchStore.refreshFilterOptions();
       }
-      // @ts-ignore
       toast.success('Tag created');
       setSelector('');
-      return tag
+      return tag;
     } catch {
-      // @ts-ignore
       toast.error('Failed to create tag');
     }
   };
+
   const openSaveModal = () => {
     if (selector === '') {
       return;
     }
     showModal(<SaveModal onSave={onSave} hideModal={hideModal} />, { right: true, width: 400 });
   };
+
   return (
-    <div className={'w-full h-full p-2 flex flex-col gap-2'}>
-      <div className={'flex items-center justify-between'}>
-        <div className={'font-semibold text-xl'}>Element Selector</div>
-        <CopyButton content={selector} />
+    <div className="w-full h-full p-4 flex flex-col gap-2">
+      <div className="flex flex-col items-center justify-between">
+        <p>Select elements in the session play area to tag by class selector and filter sessions to verify their rendering.</p>
+        
       </div>
-      <Input.TextArea value={selector} onChange={(e) => setSelector(e.target.value)} />
+      
+      <CopyableTextArea selector={selector} setSelector={setSelector} />
+
       <Button
         onClick={openSaveModal}
-        type={'primary'}
+        type="primary"
         ghost
         icon={<ZoomInOutlined />}
         disabled={selector === ''}
       >
         Tag Element
       </Button>
-      <div className={'text-disabled-text text-sm'}>
-        Create and filter sessions by ‘watch elements’ to determine if they rendered or not.
-      </div>
     </div>
   );
 }
 
-export default observer(TagWatch);
+export default observer(TagWatch);

frontend/app/components/Session/RightBlock.tsx

@@ -18,7 +18,7 @@ function RightBlock({
   switch (activeTab) {
     case 'EVENTS':
       return (
-        <div className={cn('flex flex-col bg-white border-l', stl.panel)}>
+        <div className={cn('flex flex-col border-l', stl.panel)}>
           <EventsBlock setActiveTab={setActiveTab} />
         </div>
       );

frontend/app/components/Session/Tabs/Tabs.tsx

@@ -22,6 +22,7 @@ const Tabs = ({ tabs, active, onClick, border = true, className }: Props) => {
   return (
     <div className={cn(stl.tabs, className, { [stl.bordered]: border })} role="tablist">
       <Segmented
+        size="small"
         value={active}
         options={tabs.map(({ key, text, hidden = false, disabled = false, iconComp = null }) => ({
           label: (
@@ -29,14 +30,14 @@ const Tabs = ({ tabs, active, onClick, border = true, className }: Props) => {
               onClick={() => {
                 onClick(key);
               }}
-              className={'font-semibold flex gap-1 items-center'}
+              className={'font-medium flex gap-1 items-center hover:text-teal rounded-lg'}
             >
-              {iconComp ? iconComp : <Icon size={16} color={'black'} name={iconMap[key as keyof typeof iconMap]} />}
+              {iconComp ? iconComp : <Icon size={14} color="currentColor" style={{ fill: 'currentColor', strokeWidth:'0' }}  name={iconMap[key as keyof typeof iconMap]} />}
               <span>{text}</span>
             </div>
           ),
           value: key,
-          disabled: disabled,
+          disabled: disabled,          
         }))}
       />
     </div>

frontend/app/components/Session_/EventsBlock/Event.tsx

@@ -159,7 +159,7 @@ const Event: React.FC<Props> = ({
       >
         <div className={cn(cls.main, 'flex flex-col w-full')}>
           <div
-            className={cn('flex items-center w-full', { 'px-4': isLocation })}
+            className={cn('flex items-start w-full', { 'px-4': isLocation })}
           >
             <div style={{ minWidth: '16px' }}>
               {event.type && iconName ? (
@@ -169,20 +169,18 @@ const Event: React.FC<Props> = ({
               )}
             </div>
             <div className="ml-3 w-full">
-              <div className="flex w-full items-first justify-between">
+              <div className="flex w-full items-start">
                 <div
-                  className="flex items-center w-full"
+                  className="flex flex-col justify-center items-start w-full"
                   style={{ minWidth: '0' }}
                 >
-                  <span
-                    className={cn(cls.title, { 'font-medium': isLocation })}
-                  >
+                  <span className={cn(cls.title, 'font-medium')}>
                     {title}
                   </span>
                   {body && !isLocation && (
                     <TextEllipsis
-                      maxWidth="60%"
-                      className="w-full ml-2 text-sm color-gray-medium"
+                      maxWidth="80%"
+                      className="w-full text-sm color-gray-medium"
                       text={body}
                     />
                   )}
@@ -202,8 +200,7 @@ const Event: React.FC<Props> = ({
           {isLocation && (
             <div className="pt-1 px-4">
               <TextEllipsis
-                maxWidth="80%"
-                className="text-sm font-normal color-gray-medium"
+                className="text-sm ms-8 font-normal color-gray-medium"
                 text={body}
               />
             </div>

frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js

@@ -8,6 +8,7 @@ import { Icon, TextEllipsis } from 'UI';
 import Event from './Event';
 import NoteEvent from './NoteEvent';
 import stl from './eventGroupWrapper.module.css';
+import cn from 'classnames'
 
 function EventGroupWrapper(props) {
   const { userStore } = useStore();
@@ -132,7 +133,7 @@ function EventGroupWrapper(props) {
         {isFirst && isLocation && event.referrer && (
           <TextEllipsis>
             <div className={stl.referrer}>
-              Referrer: <span className={stl.url}>{safeRef}</span>
+              Referrer: <span className={cn(stl.url, '!font-normal')}>{safeRef}</span>
             </div>
           </TextEllipsis>
         )}

frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Input, Button } from 'UI';
+import {Input, Button, Tooltip} from 'antd';
+import {CloseOutlined, SearchOutlined} from '@ant-design/icons';
 import { PlayerContext } from 'App/components/Session/playerContext';
 
 function EventSearch(props) {
   const { player } = React.useContext(PlayerContext);
 
-  const { onChange, value, header, setActiveTab } = props;
+  const { onChange, value, header, setActiveTab, eventsText } = props;
 
   const toggleEvents = () => player.toggleEvents();
 
@@ -16,25 +17,25 @@ function EventSearch(props) {
           <Input
             autoFocus
             type="text"
-            placeholder="Filter"
-            className="inset-0 w-full"
+            placeholder={`Filter ${eventsText}`}
+            className="w-full rounded-lg"
             name="query"
             value={value}
             onChange={onChange}
-            wrapperClassName="w-full"
-            style={{ height: '32px' }}
-            autoComplete="off chromebugfix"
+            prefix={<SearchOutlined />}
           />
 
-          <Button
-            className="ml-2"
-            icon="close"
-            variant="text"
-            onClick={() => {
-              setActiveTab('');
-              toggleEvents();
-            }}
-          />
+          <Tooltip title="Close Panel" placement='bottom' >
+              <Button
+                className="ml-2"
+                type='text'
+                onClick={() => {
+                  setActiveTab('');
+                  toggleEvents();
+                }}
+                icon={<CloseOutlined />}
+              />
+          </Tooltip>
         </div>
       </div>
     </div>

frontend/app/components/Session_/EventsBlock/EventsBlock.tsx

@@ -196,7 +196,7 @@ function EventsBlock(props: IProps) {
 
   return (
     <>
-      <div className={cn(styles.header, 'p-4')}>
+      <div className={cn(styles.header, 'py-4 px-2 bg-gradient-to-t from-transparent to-neutral-50 h-[57px]'  )}>
         {uxtestingStore.isUxt() ? (
           <div style={{ width: 240, height: 130 }} className={'relative'}>
             <video
@@ -219,14 +219,14 @@ function EventsBlock(props: IProps) {
             </div>
           </div>
         ) : null}
-        <div className={cn(styles.hAndProgress, 'mt-3')}>
+        <div className={cn(styles.hAndProgress, 'mt-0')}>
           <EventSearch
             onChange={write}
             setActiveTab={setActiveTab}
             value={query}
+            eventsText={usedEvents.length ? `${usedEvents.length} Events` : '0 Events'}
           />
         </div>
-        <div className="mt-1 color-gray-medium">{eventsText}</div>
       </div>
       <div
         className={cn('flex-1 pb-4', styles.eventsList)}

frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx

@@ -1,4 +1,5 @@
 import { Segmented } from 'antd';
+import {InfoCircleOutlined} from '@ant-design/icons'
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
@@ -12,6 +13,7 @@ import SummaryBlock from 'Components/Session/Player/ReplayPlayer/SummaryBlock';
 import { SummaryButton } from 'Components/Session_/Player/Controls/Controls';
 import TimelineZoomButton from 'Components/Session_/Player/Controls/components/TimelineZoomButton';
 import { Icon, NoContent } from 'UI';
+import TabSelector from "../../shared/DevTools/TabSelector";
 
 import BottomBlock from '../BottomBlock';
 import EventRow from './components/EventRow';
@@ -136,14 +138,60 @@ function WebOverviewPanelCont() {
 
   const { endTime, currentTab, tabStates } = store.get();
 
-  const stackEventList = tabStates[currentTab]?.stackList || [];
-  const frustrationsList = tabStates[currentTab]?.frustrationsList || [];
-  const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
-  const resourceListUnmap = tabStates[currentTab]?.resourceList || [];
-  const fetchList = tabStates[currentTab]?.fetchList || [];
-  const graphqlList = tabStates[currentTab]?.graphqlList || [];
-  const performanceChartData =
-    tabStates[currentTab]?.performanceChartData || [];
+  const tabValues = Object.values(tabStates);
+  const dataSource = uiPlayerStore.dataSource;
+  const showSingleTab = dataSource === 'current';
+
+  const {
+    stackEventList = [],
+    frustrationsList = [],
+    exceptionsList = [],
+    resourceListUnmap = [],
+    fetchList = [],
+    graphqlList = [],
+    performanceChartData = [],
+  } = React.useMemo(() => {
+    if (showSingleTab) {
+      const stackEventList = tabStates[currentTab].stackList;
+      const frustrationsList = tabStates[currentTab].frustrationsList;
+      const exceptionsList = tabStates[currentTab].exceptionsList;
+      const resourceListUnmap = tabStates[currentTab].resourceList;
+      const fetchList = tabStates[currentTab].fetchList;
+      const graphqlList = tabStates[currentTab].graphqlList;
+      const performanceChartData =
+        tabStates[currentTab].performanceChartData;
+
+      return {
+        stackEventList,
+        frustrationsList,
+        exceptionsList,
+        resourceListUnmap,
+        fetchList,
+        graphqlList,
+        performanceChartData,
+      }
+    } else {
+      const stackEventList = tabValues.flatMap((tab) => tab.stackList);
+      // these two are global
+      const frustrationsList = tabValues[0].frustrationsList;
+      const exceptionsList = tabValues[0].exceptionsList;
+      // we can't compute global chart data because some tabs coexist
+      const performanceChartData: any = [];
+      const resourceListUnmap = tabValues.flatMap((tab) => tab.resourceList);
+      const fetchList = tabValues.flatMap((tab) => tab.fetchList);
+      const graphqlList = tabValues.flatMap((tab) => tab.graphqlList);
+
+      return {
+        stackEventList,
+        frustrationsList,
+        exceptionsList,
+        resourceListUnmap,
+        fetchList,
+        graphqlList,
+        performanceChartData,
+      }
+    }
+  }, [tabStates, currentTab, dataSource, tabValues]);
 
   const fetchPresented = fetchList.length > 0;
   const resourceList = resourceListUnmap
@@ -168,7 +216,18 @@ function WebOverviewPanelCont() {
       PERFORMANCE: checkInZoomRange(performanceChartData),
       FRUSTRATIONS: checkInZoomRange(frustrationsList),
     };
-  }, [tabStates, currentTab, zoomEnabled, zoomStartTs, zoomEndTs]);
+  }, [
+    tabStates,
+    currentTab,
+    zoomEnabled,
+    zoomStartTs,
+    zoomEndTs,
+    resourceList.length,
+    exceptionsList.length,
+    stackEventList.length,
+    performanceChartData.length,
+    frustrationsList.length,
+  ]);
 
   const originStr = window.env.ORIGIN || window.location.origin;
   const isSaas = /app\.openreplay\.com/.test(originStr);
@@ -187,6 +246,7 @@ function WebOverviewPanelCont() {
       sessionId={sessionId}
       setZoomTab={setZoomTab}
       zoomTab={zoomTab}
+      showSingleTab={showSingleTab}
     />
   );
 }
@@ -238,6 +298,7 @@ function PanelComponent({
   spotTime,
   spotEndTime,
   onClose,
+  showSingleTab,
 }: any) {
   return (
     <React.Fragment>
@@ -280,12 +341,13 @@ function PanelComponent({
             ) : null}
           </div>
           {isSpot ? null : (
-            <div className="flex items-center h-20 mr-4 gap-2">
-              <TimelineZoomButton />
+            <div className="flex items-center h-20 mr-4 gap-3">
               <FeatureSelection
                 list={selectedFeatures}
                 updateList={setSelectedFeatures}
               />
+              {!isMobile ? <TabSelector /> : null}
+              <TimelineZoomButton />
             </div>
           )}
         </BottomBlock.Header>
@@ -302,12 +364,19 @@ function PanelComponent({
                 style={{ height: '60px', minHeight: 'unset', padding: 0 }}
                 title={
                   <div className="flex items-center">
-                    <Icon name="info-circle" className="mr-2" size="18" />
+                    <InfoCircleOutlined size={18} />
                     Select a debug option to visualize on timeline.
                   </div>
                 }
               >
-                {isSpot ? <VerticalPointerLineComp time={spotTime} endTime={spotEndTime} /> : <VerticalPointerLine />}
+                {isSpot ? (
+                  <VerticalPointerLineComp
+                    time={spotTime}
+                    endTime={spotEndTime}
+                  />
+                ) : (
+                  <VerticalPointerLine />
+                )}
                 {selectedFeatures.map((feature: any, index: number) => (
                   <div
                     key={feature}
@@ -318,6 +387,7 @@ function PanelComponent({
                     <EventRow
                       isGraph={feature === 'PERFORMANCE'}
                       title={feature}
+                      disabled={!isMobile && !showSingleTab}
                       list={resources[feature]}
                       renderElement={(pointer: any[], isGrouped: boolean) => (
                         <TimelinePointer

frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import { getTimelinePosition } from 'App/utils';
-import { Icon, Tooltip } from 'UI';
+import { Icon } from 'UI';
+import { InfoCircleOutlined} from '@ant-design/icons'
+import {Tooltip} from 'antd';
 import PerformanceGraph from '../PerformanceGraph';
 interface Props {
   list?: any[];
@@ -13,9 +15,10 @@ interface Props {
   isGraph?: boolean;
   zIndex?: number;
   noMargin?: boolean;
+  disabled?: boolean;
 }
 const EventRow = React.memo((props: Props) => {
-  const { title, className, list = [], endTime = 0, isGraph = false, message = '' } = props;
+  const { title, className, list = [], endTime = 0, isGraph = false, message = '', disabled } = props;
   const scale = 100 / endTime;
   const _list =
     isGraph ? [] :
@@ -82,7 +85,7 @@ const EventRow = React.memo((props: Props) => {
       }
 
       return groupedItems;
-    }, [list]);
+    }, [list.length]);
 
   return (
     <div
@@ -91,21 +94,24 @@ const EventRow = React.memo((props: Props) => {
     >
       <div
         className={cn(
-          'uppercase text-sm flex items-center py-1',
+          'uppercase text-sm flex items-center py-1 gap-1',
           props.noMargin ? '' : 'ml-2'
         )}
       >
         <div
           style={{ zIndex: props.zIndex ? props.zIndex : undefined }}
-          className="mr-2 leading-none"
+          className="leading-none mt-0.5"
         >
           {title}
         </div>
-        {message ? <RowInfo message={message} /> : null}
+        
+        <Tooltip title={message} placement='left'>
+            <InfoCircleOutlined className='text-neutral-400' />
+        </Tooltip>
       </div>
       <div className="relative w-full" style={{ zIndex: props.zIndex ? props.zIndex : undefined }}>
         {isGraph ? (
-          <PerformanceGraph list={list} />
+          <PerformanceGraph disabled={disabled} list={list} />
         ) : _list.length > 0 ? (
           _list.map((item: { items: any[], left: number, isGrouped: boolean }, index: number) => {
             const left = item.left
@@ -123,7 +129,7 @@ const EventRow = React.memo((props: Props) => {
             );
           })
         ) : (
-          <div className={cn('color-gray-medium text-sm', props.noMargin ? '' : 'ml-4')}>
+          <div className={cn('color-gray-medium text-xs', props.noMargin ? '' : 'ml-2')}>
             None captured.
           </div>
         )}
@@ -133,11 +139,3 @@ const EventRow = React.memo((props: Props) => {
 });
 
 export default EventRow;
-
-function RowInfo({ message }: any) {
-  return (
-    <Tooltip title={message} delay={0}>
-      <Icon name="info-circle" color="gray-medium" />
-    </Tooltip>
-  );
-}

frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Popover, Checkbox } from 'antd';
+import { Popover, Checkbox, Button } from 'antd';
+import {EyeInvisibleOutlined} from '@ant-design/icons';
 import { Icon } from 'UI'
+import Funnel from '@/types/funnel';
 
 const NETWORK = 'NETWORK';
 const ERRORS = 'ERRORS';
@@ -59,7 +61,7 @@ function FeatureSelection(props: Props) {
       <Popover
         trigger="click"
         content={
-          <div>
+          <div className='flex flex-col gap-3'>
             <div
               className={'flex items-center gap-2 cursor-pointer'}
               onClick={() => toggleAllFeatures()}
@@ -81,10 +83,9 @@ function FeatureSelection(props: Props) {
           </div>
         }
       >
-        <div className={'font-semibold flex items-center gap-2 text-main cursor-pointer'}>
-          <Icon size={16} name={'funnel'} color={'main'} />
-          <div>X-Ray Events</div>
-        </div>
+        <Button color='primary' size='small' type='text' className={'font-medium'} icon={<EyeInvisibleOutlined size={12} />} >
+          Hide / Show
+        </Button>
       </Popover>
     </React.Fragment>
   );

frontend/app/components/Session_/OverviewPanel/components/PerformanceGraph/PerformanceGraph.tsx

@@ -1,82 +1,107 @@
 import React from 'react';
 import { AreaChart, Area, ResponsiveContainer } from 'recharts';
+import {InfoCircleOutlined} from '@ant-design/icons'
 
 interface Props {
-    list: any;
+  list: any;
+  disabled?: boolean;
 }
 const PerformanceGraph = React.memo((props: Props) => {
-    const { list } = props;
+  const { list, disabled } = props;
 
-    const finalValues = React.useMemo(() => {
-        const cpuMax = list.reduce((acc: number, item: any) => {
-            return Math.max(acc, item.cpu);
-        }, 0);
-        const cpuMin = list.reduce((acc: number, item: any) => {
-            return Math.min(acc, item.cpu);
-        }, Infinity);
+  const finalValues = React.useMemo(() => {
+    const cpuMax = list.reduce((acc: number, item: any) => {
+      return Math.max(acc, item.cpu);
+    }, 0);
+    const cpuMin = list.reduce((acc: number, item: any) => {
+      return Math.min(acc, item.cpu);
+    }, Infinity);
 
-        const memoryMin = list.reduce((acc: number, item: any) => {
-            return Math.min(acc, item.usedHeap);
-        }, Infinity);
-        const memoryMax = list.reduce((acc: number, item: any) => {
-            return Math.max(acc, item.usedHeap);
-        }, 0);
+    const memoryMin = list.reduce((acc: number, item: any) => {
+      return Math.min(acc, item.usedHeap);
+    }, Infinity);
+    const memoryMax = list.reduce((acc: number, item: any) => {
+      return Math.max(acc, item.usedHeap);
+    }, 0);
 
-        const convertToPercentage = (val: number, max: number, min: number) => {
-            return ((val - min) / (max - min)) * 100;
-        };
-        const cpuValues = list.map((item: any) => convertToPercentage(item.cpu, cpuMax, cpuMin));
-        const memoryValues = list.map((item: any) => convertToPercentage(item.usedHeap, memoryMax, memoryMin));
-        const mergeArraysWithMaxNumber = (arr1: any[], arr2: any[]) => {
-            const maxLength = Math.max(arr1.length, arr2.length);
-            const result = [];
-            for (let i = 0; i < maxLength; i++) {
-                const num = Math.round(Math.max(arr1[i] || 0, arr2[i] || 0));
-                result.push(num > 60 ? num : 1);
-            }
-            return result;
-        };
-        const finalValues = mergeArraysWithMaxNumber(cpuValues, memoryValues);
-        return finalValues;
-    }, []);
-
-    const data = list.map((item: any, index: number) => {
-        return {
-            time: item.time,
-            cpu: finalValues[index],
-        };
-    });
-
-    return (
-        <ResponsiveContainer height={35}>
-            <AreaChart
-                data={data}
-                margin={{
-                    top: 0,
-                    right: 0,
-                    left: 0,
-                    bottom: 0,
-                }}
-            >
-                <defs>
-                    <linearGradient id="cpuGradientTimeline" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="30%" stopColor="#CC0000" stopOpacity={0.5} />
-                        <stop offset="95%" stopColor="#3EAAAF" stopOpacity={0.8} />
-                    </linearGradient>
-                </defs>
-                {/* <Tooltip filterNull={false} /> */}
-                <Area
-                    dataKey="cpu"
-                    baseValue={5}
-                    type="monotone"
-                    stroke="none"
-                    activeDot={false}
-                    fill="url(#cpuGradientTimeline)"
-                    isAnimationActive={false}
-                />
-            </AreaChart>
-        </ResponsiveContainer>
+    const convertToPercentage = (val: number, max: number, min: number) => {
+      return ((val - min) / (max - min)) * 100;
+    };
+    const cpuValues = list.map((item: any) =>
+      convertToPercentage(item.cpu, cpuMax, cpuMin)
     );
+    const memoryValues = list.map((item: any) =>
+      convertToPercentage(item.usedHeap, memoryMax, memoryMin)
+    );
+    const mergeArraysWithMaxNumber = (arr1: any[], arr2: any[]) => {
+      const maxLength = Math.max(arr1.length, arr2.length);
+      const result = [];
+      for (let i = 0; i < maxLength; i++) {
+        const num = Math.round(Math.max(arr1[i] || 0, arr2[i] || 0));
+        result.push(num > 60 ? num : 1);
+      }
+      return result;
+    };
+    const finalValues = mergeArraysWithMaxNumber(cpuValues, memoryValues);
+    return finalValues;
+  }, [list.length]);
+
+  const data = list.map((item: any, index: number) => {
+    return {
+      time: item.time,
+      cpu: finalValues[index],
+    };
+  });
+
+  return (
+    <div className={'relative'}>
+      {disabled ? (
+        <div
+          className={
+            'flex justify-center'
+          }
+        >
+          <div className={'text-xs text-neutral-400 ps-2'}>
+            Multi-tab performance overview is not available.
+          </div>
+        </div>
+      ) : null}
+      <ResponsiveContainer height={35}>
+        <AreaChart
+          data={data}
+          margin={{
+            top: 0,
+            right: 0,
+            left: 0,
+            bottom: 0,
+          }}
+        >
+          <defs>
+            <linearGradient
+              id="cpuGradientTimeline"
+              x1="0"
+              y1="0"
+              x2="0"
+              y2="1"
+            >
+              <stop offset="30%" stopColor="#CC0000" stopOpacity={0.5} />
+              <stop offset="95%" stopColor="#3EAAAF" stopOpacity={0.8} />
+            </linearGradient>
+          </defs>
+          {/* <Tooltip filterNull={false} /> */}
+          <Area
+            dataKey="cpu"
+            baseValue={5}
+            type="monotone"
+            stroke="none"
+            activeDot={false}
+            fill="url(#cpuGradientTimeline)"
+            isAnimationActive={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
 });
 
 export default PerformanceGraph;

frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/Dots.tsx

@@ -71,7 +71,7 @@ export function FrustrationElement({ item, createEventClickHandler }: CommonProp
   const elData = getFrustration(item);
   return (
     <Tooltip
-      placement={'right'}
+      placement={'top'}
       title={
         <div className="">
           <b>{elData.name}</b>

frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx

@@ -168,7 +168,7 @@ function GroupedIssue({
       <div
         onClick={onClick}
         className={
-          'h-5 w-5 cursor-pointer rounded-full bg-red text-white font-bold flex items-center justify-center text-sm'
+          'h-5 w-5 cursor-pointer rounded-full bg-red text-white font-bold flex items-center justify-center text-xs'
         }
       >
         {items.length}

frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Loader, Icon } from 'UI';
+import { Loader } from 'UI';
+import {Button, Tooltip} from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import SelectorsList from './components/SelectorsList/SelectorsList';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { compareJsonObjects } from 'App/utils';
 
-import Select from 'Shared/Select';
+import {Select, Form} from 'antd';
 
 const JUMP_OFFSET = 1000;
 interface Props {
@@ -58,34 +60,29 @@ function PageInsightsPanel({ setActiveTab }: Props) {
     };
 
     return (
-        <div className="p-4 bg-white">
-            <div className="pb-3 flex items-center" style={{ maxWidth: '241px', paddingTop: '5px' }}>
-                <div className="flex items-center">
-                    <span className="mr-1 text-xl">Clicks</span>
-                </div>
-                <div
-                    onClick={() => {
-                        setActiveTab('');
-                    }}
-                    className="ml-auto flex items-center justify-center bg-white cursor-pointer"
-                >
-                    <Icon name="close" size="18" />
-                </div>
-            </div>
-            <div className="mb-4 flex items-center">
-                <div className="mr-2 flex-shrink-0">In Page</div>
-                <Select
-                    isSearchable={true}
-                    right
-                    placeholder="change"
-                    options={urlOptions}
-                    name="url"
-                    defaultValue={defaultValue}
-                    onChange={onPageSelect}
-                    id="change-dropdown"
-                    className="w-full"
-                    style={{ width: '100%' }}
+        <div className="p-2 py-4 bg-white">
+            <div className="flex items-center gap-2 mb-3 overflow-hidden">
+                <div className="flex-shrink-0 font-medium">Page</div>
+                <Form.Item name="url" className='mb-0 w-[176px]'>
+                    <Select
+                        showSearch
+                        placeholder="change"
+                        options={urlOptions}
+                        defaultValue={defaultValue}
+                        onChange={onPageSelect}
+                        id="change-dropdown"
+                        className="w-full rounded-lg max-w-[270px]"
+                        dropdownStyle={{ }}
+                    />
+                </Form.Item>
+                <Tooltip title="Close Panel" placement='bottomRight'>
+                <Button
+                    className="ml-2"
+                    type='text'
+                    onClick={() => { setActiveTab(''); }}
+                    icon={<CloseOutlined />}
                 />
+                </Tooltip>
             </div>
             <Loader loading={loading}>
                 <SelectorsList />

frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.module.css

@@ -1,7 +1,5 @@
 .wrapper {
-  padding: 10px;
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-  border-radius: 3px;  
+  padding: 1rem;
   background-color: $gray-lightest;
   margin-bottom: 15px;
 
@@ -18,8 +16,6 @@
     border-radius: 10px;
     background-color: $tealx;
     flex-shrink: 0;    
-    border: solid thin white;
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;

frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.tsx

@@ -17,20 +17,20 @@ export default function SelectorCard({ index = 1, target, showContent }: Props)
 
     return (
         // @ts-ignore TODO for Alex
-        <div className={cn(stl.wrapper, { [stl.active]: showContent })} onClick={() => activeTarget(index)}>
+        <div className={cn(stl.wrapper, 'rounded-xl', { [stl.active]: showContent })} onClick={() => activeTarget(index)}>
             <div className={stl.top}>
                 {/* @ts-ignore */}
                 <Tooltip position="top" title="Rank of the most clicked element">
                     <div className={stl.index}>{index + 1}</div>
                 </Tooltip>
-                <div className="truncate">{target.selector}</div>
+                <div className="truncate font-mono">{target.selector}</div>
             </div>
             {showContent && (
                 <div className={stl.counts}>
                     <div>
-                        {target.count} Clicks - {target.percent}%
+                    {target.count} Click{target.count > 1 ? 's' : ''} - {target.percent}%
                     </div>
-                    <div className="color-gray-medium">TOTAL CLICKS</div>
+                    <div className="text-neutral-400">TOTAL CLICKS</div>
                 </div>
             )}
         </div>

frontend/app/components/Session_/Performance/Performance.tsx

@@ -17,12 +17,14 @@ import {
 } from 'recharts';
 import { durationFromMsFormatted } from 'App/date';
 import { formatBytes } from 'App/utils';
+import {Tooltip as TooltipANT} from 'antd';
 
 import stl from './performance.module.css';
 
 import BottomBlock from '../BottomBlock';
 import InfoLine from '../BottomBlock/InfoLine';
 import { useStore } from 'App/mstore'
+import { Segmented } from 'antd'
 
 const CPU_VISUAL_OFFSET = 10;
 
@@ -457,15 +459,33 @@ function Performance() {
   return (
     <BottomBlock>
       <BottomBlock.Header>
-        <div className="flex items-center w-full">
-          <div className="font-semibold color-gray-medium mr-auto">Performance</div>
-          <InfoLine>
-            <InfoLine.Point
-              label="Device Heap Size"
-              value={formatBytes(userDeviceHeapSize)}
-              display={true}
-            />
-          </InfoLine>
+        <div className="flex items-center justify-between w-full">
+          <div className="flex gap-3 items-center">
+            <div className="font-semibold color-gray-medium mr-auto">Performance</div>
+            <InfoLine>
+                <InfoLine.Point
+                  label="Device Heap Size"
+                  value={formatBytes(userDeviceHeapSize)}
+                  display={true}
+                />
+              </InfoLine>
+          </div>
+          
+          <div className={'flex items-center gap-3'}>
+            <Segmented
+              options={[
+                {  label: (
+                  <TooltipANT title="Performance overview isn't supported across tabs.">
+                    <span>All Tabs</span>
+                  </TooltipANT>
+                ), value: 'all',  disabled: true, },
+                { label: 'Current Tab', value: 'current' },
+              ]}
+              defaultValue="current" 
+              size="small"
+              className="rounded-full font-medium"
+          />
+          </div>
         </div>
       </BottomBlock.Header>
       <BottomBlock.Content>

frontend/app/components/Session_/Player/Controls/Controls.tsx

@@ -34,6 +34,7 @@ import { Icon } from 'UI';
 import LogsButton from 'App/components/Session/Player/SharedComponents/BackendLogs/LogsButton';
 
 import ControlButton from './ControlButton';
+import { WebEventsList } from "./EventsList";
 import Timeline from './Timeline';
 import PlayerControls from './components/PlayerControls';
 import styles from './controls.module.css';

frontend/app/components/Session_/Player/Controls/EventsList.tsx

@@ -4,10 +4,12 @@ import { PlayerContext, MobilePlayerContext } from 'Components/Session/playerCon
 import { observer } from 'mobx-react-lite';
 import { getTimelinePosition } from './getTimelinePosition'
 
-function EventsList({ scale }: { scale: number }) {
+function EventsList() {
   const { store } = useContext(PlayerContext);
 
-  const { tabStates, eventCount } = store.get();
+  const { eventCount, endTime } = store.get();
+  const tabStates = store.get().tabStates;
+  const scale = 100 / endTime;
   const events = React.useMemo(() => {
     return Object.values(tabStates)[0]?.eventList.filter(e => e.time) || [];
   }, [eventCount]);
@@ -34,11 +36,12 @@ function EventsList({ scale }: { scale: number }) {
   );
 }
 
-function MobileEventsList({ scale }: { scale: number }) {
+function MobileEventsList() {
   const { store } = useContext(MobilePlayerContext);
-  const { eventList } = store.get();
+  const { eventList, endTime } = store.get();
   const events = eventList.filter(e => e.type !== 'SWIPE')
 
+  const scale = 100/endTime;
   return (
     <>
       {events.map((e) => (

frontend/app/components/Session_/Player/Controls/Timeline.tsx

@@ -13,11 +13,7 @@ import NotesList from './NotesList';
 import SkipIntervalsList from './SkipIntervalsList';
 import TimelineTracker from 'Components/Session_/Player/Controls/TimelineTracker';
 
-interface IProps {
-  isMobile?: boolean;
-}
-
-function Timeline(props: IProps) {
+function Timeline({ isMobile }: { isMobile: boolean }) {
   const { player, store } = useContext(PlayerContext);
   const [wasPlaying, setWasPlaying] = useState(false);
   const [maxWidth, setMaxWidth] = useState(0);
@@ -158,7 +154,7 @@ function Timeline(props: IProps) {
           {devtoolsLoading || domLoading || !ready ? <div className={stl.stripes} /> : null}
         </div>
 
-        {props.isMobile ? <MobEventsList scale={scale} /> : <WebEventsList scale={scale} />}
+        {isMobile ? <MobEventsList /> : <WebEventsList />}
         <NotesList scale={scale} />
         <SkipIntervalsList scale={scale} />
 

frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx

@@ -29,7 +29,7 @@ function TimelineZoomButton() {
   }, [])
   return (
     <Tooltip title="Select a portion of the timeline to view the x-ray and activity for that specific selection." placement='top'>
-    <Button onClick={onClickHandler} size={'small'} className={'flex items-center font-semibold'}>
+    <Button onClick={onClickHandler} size={'small'} className={'flex items-center font-medium'}>
       Focus Mode: {enabled ? 'On' : 'Off'}
     </Button>
     </Tooltip>

frontend/app/components/Session_/Storage/Storage.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
-import { useStore } from 'App/mstore'
+import { useStore } from 'App/mstore';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { JSONTree, NoContent, Tooltip } from 'UI';
 import { formatMs } from 'App/date';
-import diff from 'microdiff'
-import { STORAGE_TYPES, selectStorageList, selectStorageListNow, selectStorageType } from 'Player';
+import diff from 'microdiff';
+import {
+  STORAGE_TYPES,
+  selectStorageList,
+  selectStorageListNow,
+  selectStorageType,
+} from 'Player';
 import Autoscroll from '../Autoscroll';
 import BottomBlock from '../BottomBlock/index';
 import DiffRow from './DiffRow';
 import cn from 'classnames';
 import stl from './storage.module.css';
-import logger from "App/logger";
-import ReduxViewer from './ReduxViewer'
+import logger from 'App/logger';
+import ReduxViewer from './ReduxViewer';
+import { Segmented } from 'antd'
 
 function getActionsName(type: string) {
   switch (type) {
@@ -31,7 +37,7 @@ const storageDecodeKeys = {
   [STORAGE_TYPES.ZUSTAND]: ['state', 'mutation'],
   [STORAGE_TYPES.MOBX]: ['payload'],
   [STORAGE_TYPES.NONE]: ['state, action', 'payload', 'mutation'],
-}
+};
 
 function Storage() {
   const { uiPlayerStore } = useStore();
@@ -42,49 +48,48 @@ function Storage() {
   const [stateObject, setState] = React.useState({});
 
   const { player, store } = React.useContext(PlayerContext);
-  const { tabStates, currentTab } = store.get()
-  const state = tabStates[currentTab] || {}
+  const { tabStates, currentTab } = store.get();
+  const state = tabStates[currentTab] || {};
 
   const listNow = selectStorageListNow(state) || [];
   const list = selectStorageList(state) || [];
-  const type = selectStorageType(state) || STORAGE_TYPES.NONE
+  const type = selectStorageType(state) || STORAGE_TYPES.NONE;
 
   React.useEffect(() => {
     let currentState;
     if (listNow.length === 0) {
-      currentState = decodeMessage(list[0])
+      currentState = decodeMessage(list[0]);
     } else {
-      currentState = decodeMessage(listNow[listNow.length - 1])
+      currentState = decodeMessage(listNow[listNow.length - 1]);
     }
-    const stateObj = currentState?.state || currentState?.payload?.state || {}
+    const stateObj = currentState?.state || currentState?.payload?.state || {};
     const newState = Object.assign(stateObject, stateObj);
     setState(newState);
-
   }, [listNow.length]);
 
   const decodeMessage = (msg: any) => {
     const decoded = {};
-    const pureMSG = { ...msg }
+    const pureMSG = { ...msg };
     const keys = storageDecodeKeys[type];
     try {
-      keys.forEach(key => {
+      keys.forEach((key) => {
         if (pureMSG[key]) {
           // @ts-ignore TODO: types for decoder
           decoded[key] = player.decodeMessage(pureMSG[key]);
         }
       });
     } catch (e) {
-      logger.error("Error on message decoding: ", e, pureMSG);
+      logger.error('Error on message decoding: ', e, pureMSG);
       return null;
     }
     return { ...pureMSG, ...decoded };
-  }
+  };
 
   const decodedList = React.useMemo(() => {
-    return listNow.map(msg => {
-      return decodeMessage(msg)
-    })
-  }, [listNow.length])
+    return listNow.map((msg) => {
+      return decodeMessage(msg);
+    });
+  }, [listNow.length]);
 
   const focusNextButton = () => {
     if (lastBtnRef.current) {
@@ -99,7 +104,10 @@ function Storage() {
     focusNextButton();
   }, [listNow]);
 
-  const renderDiff = (item: Record<string, any>, prevItem?: Record<string, any>) => {
+  const renderDiff = (
+    item: Record<string, any>,
+    prevItem?: Record<string, any>
+  ) => {
     if (!showDiffs) {
       return;
     }
@@ -113,7 +121,10 @@ function Storage() {
 
     if (!stateDiff) {
       return (
-        <div style={{ flex: 3 }} className="flex flex-col p-2 pr-0 font-mono text-disabled-text">
+        <div
+          style={{ flex: 3 }}
+          className="flex flex-col p-2 pr-0 font-mono text-disabled-text"
+        >
           No diff
         </div>
       );
@@ -121,13 +132,15 @@ function Storage() {
 
     return (
       <div style={{ flex: 3 }} className="flex flex-col p-1 font-mono">
-        {stateDiff.map((d: Record<string, any>, i: number) => renderDiffs(d, i))}
+        {stateDiff.map((d: Record<string, any>, i: number) =>
+          renderDiffs(d, i)
+        )}
       </div>
     );
   };
 
   const renderDiffs = (diff: Record<string, any>, i: number) => {
-    const path = diff.path.join('.')
+    const path = diff.path.join('.');
     return (
       <React.Fragment key={i}>
         <DiffRow path={path} diff={diff} />
@@ -145,12 +158,16 @@ function Storage() {
     player.jump(list[listNow.length].time);
   };
 
-  const renderItem = (item: Record<string, any>, i: number, prevItem?: Record<string, any>) => {
+  const renderItem = (
+    item: Record<string, any>,
+    i: number,
+    prevItem?: Record<string, any>
+  ) => {
     let src;
     let name;
 
-    const itemD = item
-    const prevItemD = prevItem ? prevItem : undefined
+    const itemD = item;
+    const prevItemD = prevItem ? prevItem : undefined;
 
     switch (type) {
       case STORAGE_TYPES.REDUX:
@@ -177,7 +194,10 @@ function Storage() {
 
     return (
       <div
-        className={cn('flex justify-between items-start', src !== null ? 'border-b' : '')}
+        className={cn(
+          'flex justify-between items-start',
+          src !== null ? 'border-b' : ''
+        )}
         key={`store-${i}`}
       >
         {src === null ? (
@@ -187,7 +207,10 @@ function Storage() {
         ) : (
           <>
             {renderDiff(itemD, prevItemD)}
-            <div style={{ flex: 2 }} className={cn("flex pt-2", showDiffs && 'pl-10')}>
+            <div
+              style={{ flex: 2 }}
+              className={cn('flex pt-2', showDiffs && 'pl-10')}
+            >
               <JSONTree
                 name={ensureString(name)}
                 src={src}
@@ -202,11 +225,16 @@ function Storage() {
           className="flex-1 flex gap-2 pt-2 items-center justify-end self-start"
         >
           {typeof item?.duration === 'number' && (
-            <div className="font-size-12 color-gray-medium">{formatMs(itemD.duration)}</div>
+            <div className="font-size-12 color-gray-medium">
+              {formatMs(itemD.duration)}
+            </div>
           )}
           <div className="w-12">
             {i + 1 < listNow.length && (
-              <button className={stl.button} onClick={() => player.jump(item.time)}>
+              <button
+                className={stl.button}
+                onClick={() => player.jump(item.time)}
+              >
                 {'JUMP'}
               </button>
             )}
@@ -222,31 +250,36 @@ function Storage() {
   };
 
   if (type === STORAGE_TYPES.REDUX) {
-    return <ReduxViewer />
+    return <ReduxViewer />;
   }
   return (
     <BottomBlock>
       {/*@ts-ignore*/}
       <>
         <BottomBlock.Header>
-          {list.length > 0 && (
-            <div className="flex w-full">
-              <h3 style={{ width: '25%', marginRight: 20 }} className="font-semibold">
-                {'STATE'}
-              </h3>
-              {showDiffs ? (
-                <h3 style={{ width: '39%' }} className="font-semibold">
-                  DIFFS
-                </h3>
-              ) : null}
-              <h3 style={{ width: '30%' }} className="font-semibold">
-                {getActionsName(type)}
-              </h3>
-              <h3 style={{ paddingRight: 30, marginLeft: 'auto' }} className="font-semibold">
-                <Tooltip title="Time to execute">TTE</Tooltip>
-              </h3>
+          <div className="flex w-full items-center">
+            <div
+              style={{ width: '25%', marginRight: 20 }}
+              className="font-semibold flex items-center gap-2"
+            >
+              <h3>{'STATE'}</h3>
             </div>
-          )}
+            {showDiffs ? (
+              <h3 style={{ width: '39%' }} className="font-semibold">
+                DIFFS
+              </h3>
+            ) : null}
+            <h3 style={{ width: '30%' }} className="font-semibold">
+              {getActionsName(type)}
+            </h3>
+            <h3
+              style={{ paddingRight: 30, marginLeft: 'auto' }}
+              className="font-semibold"
+            >
+              <Tooltip title="Time to execute">TTE</Tooltip>
+            </h3>
+            <Segmented options={[{ label: 'Current Tab', value: 'all' }]} />
+          </div>
         </BottomBlock.Header>
         <BottomBlock.Content className="flex">
           <NoContent
@@ -307,7 +340,10 @@ function Storage() {
                   .
                   <br />
                   <br />
-                  <button className="color-teal" onClick={() => hideHint('storage')}>
+                  <button
+                    className="color-teal"
+                    onClick={() => hideHint('storage')}
+                  >
                     Got It!
                   </button>
                 </>
@@ -322,8 +358,7 @@ function Storage() {
                   {'Empty state.'}
                 </div>
               ) : (
-                <JSONTree collapsed={2} src={stateObject}
-                />
+                <JSONTree collapsed={2} src={stateObject} />
               )}
             </div>
             <div className="flex" style={{ width: '75%' }}>
@@ -342,7 +377,6 @@ function Storage() {
 
 export default observer(Storage);
 
-
 /**
  * TODO: compute diff and only decode the required parts
  * WIP example
@@ -384,4 +418,4 @@ export default observer(Storage);
  *   }, [list.length])
  * }
  *
- * */
+ * */

frontend/app/components/Spots/SpotPlayer/components/Panels/SpotConsole.tsx

@@ -70,6 +70,7 @@ function SpotConsole({ onClose }: { onClose: () => void }) {
                 jump={jump}
                 iconProps={getIconProps(log.level)}
                 renderWithNL={renderWithNL}
+                showSingleTab
               />
             ))}
           </VList>

frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx

@@ -143,7 +143,7 @@ function SpotPlayerHeader({
             {browserVersion && (
               <>
                 <div>·</div>
-                <div className="capitalize">Chrome v{browserVersion}</div>
+                <div>Chromium v{browserVersion}</div>
               </>
             )}
             {resolution && (

frontend/app/components/shared/DevTools/BottomBlock/InfoLine.js

@@ -3,15 +3,15 @@ import cn from 'classnames';
 import cls from './infoLine.module.css';
 
 const InfoLine = ({ children }) => (
-	<div className={ cls.info }>
+	<div className={ cn(cls.info, 'text-sm')}>
 		{ children }
 	</div>
 )
 
 const Point = ({ label = '', value = '', display=true, color, dotColor }) => display 
-	? <div className={ cls.infoPoint } style={{ color }}>
+	? <div className={ cn(cls.infoPoint, 'text-sm') } style={{ color }}>
 			{ dotColor != null && <div className={ cn(cls.dot, `bg-${dotColor}`) } />  } 
-			<span className={cls.label}>{ `${label}` }</span> { value }
+			<span className={cn(cls.label, 'text-sm')}>{ `${label}` }</span> { value }
 		</div>
 	: null;
 

frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { LogLevel, ILog } from 'Player';
 import BottomBlock from '../BottomBlock';
-import { Tabs, Input, Icon, NoContent } from 'UI';
+import { Tabs, Icon, NoContent } from 'UI';
+import {Input} from 'antd';
+import {SearchOutlined, InfoCircleOutlined} from '@ant-design/icons';
 import cn from 'classnames';
 import ConsoleRow from '../ConsoleRow';
 import { PlayerContext } from 'App/components/Session/playerContext';
@@ -9,6 +11,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 import { useModal } from 'App/components/Modal';
+import TabSelector from "../TabSelector";
 import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
 import { VList, VListHandle } from "virtua";
@@ -93,6 +96,7 @@ function ConsolePanel({
     sessionStore: { devTools },
     uiPlayerStore,
   } = useStore();
+
   const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
   const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
   const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
@@ -109,29 +113,34 @@ function ConsolePanel({
   const jump = (t: number) => player.jump(t);
 
   const { currentTab, tabStates } = store.get();
-  const {
-    logList = [],
-    exceptionsList = [],
-    logListNow = [],
-    exceptionsListNow = [],
-  } = tabStates[currentTab] ?? {};
+  const tabsArr = Object.keys(tabStates);
+  const tabValues = Object.values(tabStates);
+  const dataSource = uiPlayerStore.dataSource;
+  const showSingleTab = dataSource === 'current';
+  const { logList = [], exceptionsList = [], logListNow = [], exceptionsListNow = [] } = React.useMemo(() => {
+    if (showSingleTab) {
+      return tabStates[currentTab] ?? {};
+    } else {
+      const logList = tabValues.flatMap(tab => tab.logList);
+      const exceptionsList = tabValues.flatMap(tab => tab.exceptionsList);
+      const logListNow = isLive ? tabValues.flatMap(tab => tab.logListNow) : [];
+      const exceptionsListNow = isLive ? tabValues.flatMap(tab => tab.exceptionsListNow) : [];
+      return { logList, exceptionsList, logListNow, exceptionsListNow }
+    }
+  }, [currentTab, tabStates, dataSource, tabValues, isLive])
+  const getTabNum = (tab: string) => (tabsArr.findIndex((t) => t === tab) + 1);
 
-  const list = isLive
-    ? (useMemo(
-        () => logListNow.concat(exceptionsListNow).sort((a, b) => a.time - b.time),
-        [logListNow.length, exceptionsListNow.length]
-      ) as ILog[])
-    : (useMemo(
-        () => logList.concat(exceptionsList).sort((a, b) => a.time - b.time),
-        [logList.length, exceptionsList.length]
-      ).filter((l) =>
-        zoomEnabled ? l.time >= zoomStartTs && l.time <= zoomEndTs : true
-      ) as ILog[]);
+  const list = useMemo(() => {
+    if (isLive) {
+      return logListNow.concat(exceptionsListNow).sort((a, b) => a.time - b.time)
+    } else {
+      const logs = logList.concat(exceptionsList).sort((a, b) => a.time - b.time)
+      return zoomEnabled ? logs.filter(l => l.time >= zoomStartTs && l.time <= zoomEndTs) : logs
+    }
+  }, [isLive, logList.length, exceptionsList.length, logListNow.length, exceptionsListNow.length, zoomEnabled, zoomStartTs, zoomEndTs])
   let filteredList = useRegExListFilterMemo(list, (l) => l.value, filter);
   filteredList = useTabListFilterMemo(filteredList, (l) => LEVEL_TAB[l.level], ALL, activeTab);
 
-  React.useEffect(() => {
-  }, [activeTab, filter]);
   const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
   const onFilterChange = ({ target: { value } }: any) =>
     devTools.update(INDEX_KEY, { filter: value });
@@ -180,23 +189,26 @@ function ConsolePanel({
           <span className="font-semibold color-gray-medium mr-4">Console</span>
           <Tabs tabs={TABS} active={activeTab} onClick={onTabClick} border={false} />
         </div>
-        <Input
-          className="input-small h-8"
-          placeholder="Filter by keyword"
-          icon="search"
-          name="filter"
-          height={28}
-          onChange={onFilterChange}
-          value={filter}
-        />
+        <div className={'flex items-center gap-2'}>
+          <TabSelector />
+          <Input
+            className="rounded-lg"
+            placeholder="Filter by keyword"
+            name="filter"
+            onChange={onFilterChange}
+            value={filter}
+            size='small'
+            prefix={<SearchOutlined className='text-neutral-400' />}
+          />
+        </div>
         {/* @ts-ignore */}
       </BottomBlock.Header>
       {/* @ts-ignore */}
       <BottomBlock.Content className="overflow-y-auto">
         <NoContent
           title={
-            <div className="capitalize flex items-center mt-16">
-              <Icon name="info-circle" className="mr-2" size="18" />
+            <div className="capitalize flex items-center mt-16 gap-2">
+              <InfoCircleOutlined size={18} />
               No Data
             </div>
           }
@@ -211,6 +223,8 @@ function ConsolePanel({
                 iconProps={getIconProps(log.level)}
                 renderWithNL={renderWithNL}
                 onClick={() => showDetails(log)}
+                showSingleTab={showSingleTab}
+                getTabNum={getTabNum}
               />
             ))}
           </VList>

frontend/app/components/shared/DevTools/ConsolePanel/MobileConsolePanel.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { LogLevel, ILog } from 'Player';
 import BottomBlock from '../BottomBlock';
-import { Tabs, Input, Icon, NoContent } from 'UI';
+import { Tabs, Input, NoContent } from 'UI';
 import cn from 'classnames';
 import ConsoleRow from '../ConsoleRow';
-import { IOSPlayerContext, MobilePlayerContext } from 'App/components/Session/playerContext';
+import {
+  IOSPlayerContext,
+  MobilePlayerContext,
+} from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { VList, VListHandle } from 'virtua';
 import { useStore } from 'App/mstore';
@@ -12,6 +15,7 @@ import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorD
 import { useModal } from 'App/components/Modal';
 import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
+import { InfoCircleOutlined, SearchOutlined } from '@ant-design/icons';
 
 const ALL = 'ALL';
 const INFO = 'INFO';
@@ -26,7 +30,10 @@ const LEVEL_TAB = {
   [LogLevel.EXCEPTION]: ERRORS,
 } as const;
 
-const TABS = [ALL, ERRORS, WARNINGS, INFO].map((tab) => ({ text: tab, key: tab }));
+const TABS = [ALL, ERRORS, WARNINGS, INFO].map((tab) => ({
+  text: tab,
+  key: tab,
+}));
 
 function renderWithNL(s: string | null = '') {
   if (typeof s !== 'string') return '';
@@ -73,20 +80,23 @@ function MobileConsolePanel() {
   const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
   const { showModal } = useModal();
 
-  const { player, store } = React.useContext<IOSPlayerContext>(MobilePlayerContext);
+  const { player, store } =
+    React.useContext<IOSPlayerContext>(MobilePlayerContext);
   const jump = (t: number) => player.jump(t);
 
-  const {
-    logList,
-    logListNow,
-    exceptionsListNow,
-  } = store.get();
+  const { logList, logListNow, exceptionsListNow } = store.get();
 
   const list = logList as ILog[];
   let filteredList = useRegExListFilterMemo(list, (l) => l.value, filter);
-  filteredList = useTabListFilterMemo(filteredList, (l) => LEVEL_TAB[l.level], ALL, activeTab);
+  filteredList = useTabListFilterMemo(
+    filteredList,
+    (l) => LEVEL_TAB[l.level],
+    ALL,
+    activeTab
+  );
 
-  const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+  const onTabClick = (activeTab: any) =>
+    devTools.update(INDEX_KEY, { activeTab });
   const onFilterChange = ({ target: { value } }: any) =>
     devTools.update(INDEX_KEY, { filter: value });
 
@@ -136,34 +146,35 @@ function MobileConsolePanel() {
       <BottomBlock.Header>
         <div className="flex items-center">
           <span className="font-semibold color-gray-medium mr-4">Console</span>
-          <Tabs tabs={TABS} active={activeTab} onClick={onTabClick} border={false} />
+          <Tabs
+            tabs={TABS}
+            active={activeTab}
+            onClick={onTabClick}
+            border={false}
+          />
         </div>
         <Input
-          className="input-small h-8"
+          className="rounded-lg"
           placeholder="Filter by keyword"
-          icon="search"
           name="filter"
-          height={28}
           onChange={onFilterChange}
           value={filter}
+          size="small"
+          prefix={<SearchOutlined className="text-neutral-400" />}
         />
       </BottomBlock.Header>
       <BottomBlock.Content className="overflow-y-auto">
         <NoContent
           title={
-            <div className="capitalize flex items-center mt-16">
-              <Icon name="info-circle" className="mr-2" size="18" />
+            <div className="capitalize flex items-center mt-16 gap-2">
+              <InfoCircleOutlined size={18} />
               No Data
             </div>
           }
           size="small"
           show={filteredList.length === 0}
         >
-          <VList
-            ref={_list}
-            itemSize={25}
-            count={filteredList.length || 1}
-          >
+          <VList ref={_list} itemSize={25} count={filteredList.length || 1}>
             {filteredList.map((log, index) => (
               <ConsoleRow
                 key={log.time + index}
@@ -172,6 +183,7 @@ function MobileConsolePanel() {
                 iconProps={getIconProps(log.level)}
                 renderWithNL={renderWithNL}
                 onClick={() => showDetails(log)}
+                showSingleTab
               />
             ))}
           </VList>

frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import cn from 'classnames';
 import { Icon } from 'UI';
 import JumpButton from 'Shared/DevTools/JumpButton';
+import { Tag } from 'antd';
+import TabTag from "../TabTag";
 
 interface Props {
   log: any;
@@ -10,6 +12,8 @@ interface Props {
   renderWithNL?: any;
   style?: any;
   onClick?: () => void;
+  getTabNum?: (tab: string) => number;
+  showSingleTab: boolean;
 }
 function ConsoleRow(props: Props) {
   const { log, iconProps, jump, renderWithNL, style } = props;
@@ -41,11 +45,13 @@ function ConsoleRow(props: Props) {
 
   const titleLine = lines[0];
   const restLines = lines.slice(1);
+  const logSource = props.showSingleTab ? -1 : props.getTabNum?.(log.tabId);
+  const logTabId = log.tabId
   return (
     <div
       style={style}
       className={cn(
-        'border-b flex items-start py-1 px-4 pe-8 overflow-hidden group relative',
+        'border-b border-neutral-950/5 flex items-start gap-2 py-1 px-4 pe-8 overflow-hidden group relative',
         {
           info: !log.isYellow && !log.isRed,
           warn: log.isYellow,
@@ -55,11 +61,10 @@ function ConsoleRow(props: Props) {
       )}
       onClick={clickable ? () => (!!log.errorId ? props.onClick?.() : toggleExpand()) : undefined}
     >
-      <div className="mr-2">
-        <Icon size="14" {...iconProps} />
-      </div>
+      {logSource !== -1 && <TabTag logSource={logSource} logTabId={logTabId} />}
+      <Icon size="14" {...iconProps} className='mt-0.5' />
       <div key={log.key} data-scroll-item={log.isRed}>
-        <div className="flex items-start text-sm ">
+        <div className="flex items-start text-sm">
           <div className={cn('flex items-start', { 'cursor-pointer underline decoration-dotted decoration-gray-400': !!log.errorId })}>
             {canExpand && (
               <Icon name={expanded ? 'caret-down-fill' : 'caret-right-fill'} className="mr-2" />

frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Icon, Tooltip } from 'UI';
-import { shortDurationFromMs } from "App/date";
+import { Tooltip } from 'UI';
+import { CaretRightOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { shortDurationFromMs } from 'App/date';
 
 interface Props {
   onClick: any;
@@ -12,19 +14,24 @@ function JumpButton(props: Props) {
   return (
     <div className="absolute right-2 top-0 bottom-0 my-auto flex items-center">
       <Tooltip title={tooltip} disabled={!tooltip}>
-        <div
-          className="border cursor-pointer hidden group-hover:flex rounded bg-white text-xs items-center px-2 py-1 color-teal hover:shadow h-6"
+        <Button
+          type="default"
+          size="small"
+          className="hidden group-hover:flex rounded-lg text-xs p-1 py-0 gap-0 h-6"
+          iconPosition="end"
           onClick={(e: any) => {
             e.stopPropagation();
             props.onClick();
           }}
+          icon={<CaretRightOutlined />}
         >
-          <Icon name="caret-right-fill" size="12" color="teal" />
-          <span>JUMP</span>
-        </div>
-        {props.time ? <div className={'block group-hover:hidden mr-2'}>
-          {shortDurationFromMs(props.time)}
-        </div> : null}
+          JUMP
+        </Button>
+        {props.time ? (
+          <div className={'block group-hover:hidden mr-2 text-sm'}>
+            {shortDurationFromMs(props.time)}
+          </div>
+        ) : null}
       </Tooltip>
     </div>
   );

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -1,7 +1,6 @@
 import { ResourceType, Timed } from 'Player';
 import MobilePlayer from 'Player/mobile/IOSPlayer';
 import WebPlayer from 'Player/web/WebPlayer';
-import { Duration } from 'luxon';
 import { observer } from 'mobx-react-lite';
 import React, { useMemo, useState } from 'react';
 
@@ -13,17 +12,19 @@ import {
 import { formatMs } from 'App/date';
 import { useStore } from 'App/mstore';
 import { formatBytes } from 'App/utils';
-import { Icon, Input, NoContent, Tabs, Toggler, Tooltip } from 'UI';
+import { Icon, NoContent, Tabs } from 'UI';
+import { Tooltip, Input, Switch, Form } from 'antd';
+import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons';
 
 import FetchDetailsModal from 'Shared/FetchDetailsModal';
-import { WsChannel } from "App/player/web/messages";
+import { WsChannel } from 'App/player/web/messages';
 
 import BottomBlock from '../BottomBlock';
 import InfoLine from '../BottomBlock/InfoLine';
+import TabSelector from '../TabSelector';
 import TimeTable from '../TimeTable';
 import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
-import WSModal from './WSModal';
 import WSPanel from './WSPanel';
 
 const INDEX_KEY = 'network';
@@ -57,12 +58,6 @@ export const NETWORK_TABS = TAP_KEYS.map((tab) => ({
 const DOM_LOADED_TIME_COLOR = 'teal';
 const LOAD_TIME_COLOR = 'red';
 
-function compare(a: any, b: any, key: string) {
-  if (a[key] > b[key]) return 1;
-  if (a[key] < b[key]) return -1;
-  return 0;
-}
-
 export function renderType(r: any) {
   return (
     <Tooltip style={{ width: '100%' }} title={<div>{r.type}</div>}>
@@ -79,14 +74,6 @@ export function renderName(r: any) {
   );
 }
 
-export function renderStart(r: any) {
-  return (
-    <div className="flex justify-between items-center grow-0 w-full">
-      <span>{Duration.fromMillis(r.time).toFormat('mm:ss.SSS')}</span>
-    </div>
-  );
-}
-
 function renderSize(r: any) {
   if (r.responseBodySize) return formatBytes(r.responseBodySize);
   let triggerText;
@@ -125,13 +112,10 @@ export function renderDuration(r: any) {
   if (!r.isRed && !r.isYellow) return text;
 
   let tooltipText;
-  let className = 'w-full h-full flex items-center ';
   if (r.isYellow) {
     tooltipText = 'Slower than average';
-    className += 'warn color-orange';
   } else {
     tooltipText = 'Much slower than average';
-    className += 'error color-red';
   }
 
   return (
@@ -151,7 +135,7 @@ function renderStatus({
   error?: string;
 }) {
   const displayedStatus = error ? (
-    <Tooltip delay={0} title={error}>
+    <Tooltip title={error}>
       <div
         style={{ width: 90 }}
         className={'overflow-hidden overflow-ellipsis'}
@@ -165,7 +149,7 @@ function renderStatus({
   return (
     <>
       {cached ? (
-        <Tooltip title={'Served from cache'}>
+        <Tooltip title={'Served from cache'} placement="top">
           <div className="flex items-center">
             <span className="mr-1">{displayedStatus}</span>
             <Icon name="wifi" size={16} />
@@ -178,13 +162,10 @@ function renderStatus({
   );
 }
 
-function NetworkPanelCont({
-  panelHeight,
-}: {
-  panelHeight: number;
-}) {
+function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
   const { player, store } = React.useContext(PlayerContext);
-  const { sessionStore } = useStore();
+  const { sessionStore, uiPlayerStore } = useStore();
+
   const startedAt = sessionStore.current.startedAt;
   const {
     domContentLoadedTime,
@@ -192,7 +173,12 @@ function NetworkPanelCont({
     domBuildingTime,
     tabStates,
     currentTab,
+    tabNames,
   } = store.get();
+  const tabsArr = Object.keys(tabStates);
+  const tabValues = Object.values(tabStates);
+  const dataSource = uiPlayerStore.dataSource;
+  const showSingleTab = dataSource === 'current';
   const {
     fetchList = [],
     resourceList = [],
@@ -200,8 +186,34 @@ function NetworkPanelCont({
     resourceListNow = [],
     websocketList = [],
     websocketListNow = [],
-  } = tabStates[currentTab];
-
+  } = React.useMemo(() => {
+    if (showSingleTab) {
+      return tabStates[currentTab] ?? {};
+    } else {
+      const fetchList = tabValues.flatMap((tab) => tab.fetchList);
+      const resourceList = tabValues.flatMap((tab) => tab.resourceList);
+      const fetchListNow = tabValues
+        .flatMap((tab) => tab.fetchListNow)
+        .filter(Boolean);
+      const resourceListNow = tabValues
+        .flatMap((tab) => tab.resourceListNow)
+        .filter(Boolean);
+      const websocketList = tabValues.flatMap((tab) => tab.websocketList);
+      const websocketListNow = tabValues
+        .flatMap((tab) => tab.websocketListNow)
+        .filter(Boolean);
+      return {
+        fetchList,
+        resourceList,
+        fetchListNow,
+        resourceListNow,
+        websocketList,
+        websocketListNow,
+      };
+    }
+  }, [currentTab, tabStates, dataSource, tabValues]);
+  const getTabNum = (tab: string) => tabsArr.findIndex((t) => t === tab) + 1;
+  const getTabName = (tabId: string) => tabNames[tabId]
   return (
     <NetworkPanelComp
       loadTime={loadTime}
@@ -216,15 +228,14 @@ function NetworkPanelCont({
       startedAt={startedAt}
       websocketList={websocketList as WSMessage[]}
       websocketListNow={websocketListNow as WSMessage[]}
+      getTabNum={getTabNum}
+      getTabName={getTabName}
+      showSingleTab={showSingleTab}
     />
   );
 }
 
-function MobileNetworkPanelCont({
-  panelHeight,
-}: {
-  panelHeight: number;
-}) {
+function MobileNetworkPanelCont({ panelHeight }: { panelHeight: number }) {
   const { player, store } = React.useContext(MobilePlayerContext);
   const { uiPlayerStore, sessionStore } = useStore();
   const startedAt = sessionStore.current.startedAt;
@@ -301,6 +312,9 @@ interface Props {
   onClose?: () => void;
   activeOutsideIndex?: number;
   isSpot?: boolean;
+  getTabNum?: (tab: string) => number;
+  getTabName?: (tabId: string) => string;
+  showSingleTab?: boolean;
 }
 
 export const NetworkPanelComp = observer(
@@ -323,8 +337,13 @@ export const NetworkPanelComp = observer(
     onClose,
     activeOutsideIndex,
     isSpot,
+    getTabNum,
+    showSingleTab,
+    getTabName,
   }: Props) => {
-    const [selectedWsChannel, setSelectedWsChannel] = React.useState<WsChannel[] | null>(null)
+    const [selectedWsChannel, setSelectedWsChannel] = React.useState<
+      WsChannel[] | null
+    >(null);
     const { showModal } = useModal();
     const [showOnlyErrors, setShowOnlyErrors] = useState(false);
 
@@ -480,10 +499,10 @@ export const NetworkPanelComp = observer(
     const showDetailsModal = (item: any) => {
       if (item.type === 'websocket') {
         const socketMsgList = websocketList.filter(
-            (ws) => ws.channelName === item.channelName
-          );
+          (ws) => ws.channelName === item.channelName
+        );
 
-        return setSelectedWsChannel(socketMsgList)
+        return setSelectedWsChannel(socketMsgList);
       }
       setIsDetailsModalActive(true);
       showModal(
@@ -507,6 +526,61 @@ export const NetworkPanelComp = observer(
       stopAutoscroll();
     };
 
+    const tableCols = React.useMemo(() => {
+      const cols: any[] = [
+        {
+          label: 'Status',
+          dataKey: 'status',
+          width: 90,
+          render: renderStatus,
+        },
+        {
+          label: 'Type',
+          dataKey: 'type',
+          width: 90,
+          render: renderType,
+        },
+        {
+          label: 'Method',
+          width: 80,
+          dataKey: 'method',
+        },
+        {
+          label: 'Name',
+          width: 240,
+          dataKey: 'name',
+          render: renderName,
+        },
+        {
+          label: 'Size',
+          width: 80,
+          dataKey: 'decodedBodySize',
+          render: renderSize,
+          hidden: activeTab === XHR,
+        },
+        {
+          label: 'Duration',
+          width: 80,
+          dataKey: 'duration',
+          render: renderDuration,
+        },
+      ];
+      if (!showSingleTab && !isSpot) {
+        cols.unshift({
+          label: 'Source',
+          width: 64,
+          render: (r: Record<string, any>) => (
+            <Tooltip title={`${getTabName?.(r.tabId) ?? `Tab ${getTabNum?.(r.tabId) ?? 0}`}`} placement="left">
+              <div className="bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs cursor-default">
+                {getTabNum?.(r.tabId) ?? 0}
+              </div>
+            </Tooltip>
+          ),
+        });
+      }
+      return cols;
+    }, [showSingleTab]);
+
     return (
       <BottomBlock
         style={{ height: '100%' }}
@@ -529,26 +603,39 @@ export const NetworkPanelComp = observer(
               />
             )}
           </div>
-          <Input
-            className="input-small"
-            placeholder="Filter by name, type, method or value"
-            icon="search"
-            name="filter"
-            onChange={onFilterChange}
-            height={28}
-            width={280}
-            value={filter}
-          />
+          <div className={'flex items-center gap-2'}>
+            {!isMobile && !isSpot ? <TabSelector /> : null}
+            <Input
+              className="rounded-lg"
+              placeholder="Filter by name, type, method or value"
+              name="filter"
+              onChange={onFilterChange}
+              width={280}
+              value={filter}
+              size="small"
+              prefix={<SearchOutlined className="text-neutral-400" />}
+            />
+          </div>
         </BottomBlock.Header>
         <BottomBlock.Content>
           <div className="flex items-center justify-between px-4 border-b bg-teal/5 h-8">
             <div>
-              <Toggler
-                checked={showOnlyErrors}
-                name="show-errors-only"
-                onChange={() => setShowOnlyErrors(!showOnlyErrors)}
-                label="4xx-5xx Only"
-              />
+              <Form.Item name="show-errors-only" className="mb-0">
+                <label
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <Switch
+                    checked={showOnlyErrors}
+                    onChange={() => setShowOnlyErrors(!showOnlyErrors)}
+                    size="small"
+                  />
+                  <span className="text-sm ms-2">4xx-5xx Only</span>
+                </label>
+              </Form.Item>
             </div>
             <InfoLine>
               <InfoLine.Point
@@ -588,8 +675,8 @@ export const NetworkPanelComp = observer(
           </div>
           <NoContent
             title={
-              <div className="capitalize flex items-center">
-                <Icon name="info-circle" className="mr-2" size="18" />
+              <div className="capitalize flex items-center gap-2">
+                <InfoCircleOutlined size={18} />
                 No Data
               </div>
             }
@@ -613,52 +700,13 @@ export const NetworkPanelComp = observer(
               }}
               activeIndex={activeIndex}
             >
-              {[
-                // {
-                //   label: 'Start',
-                //   width: 120,
-                //   render: renderStart,
-                // },
-                {
-                  label: 'Status',
-                  dataKey: 'status',
-                  width: 90,
-                  render: renderStatus,
-                },
-                {
-                  label: 'Type',
-                  dataKey: 'type',
-                  width: 90,
-                  render: renderType,
-                },
-                {
-                  label: 'Method',
-                  width: 80,
-                  dataKey: 'method',
-                },
-                {
-                  label: 'Name',
-                  width: 240,
-                  dataKey: 'name',
-                  render: renderName,
-                },
-                {
-                  label: 'Size',
-                  width: 80,
-                  dataKey: 'decodedBodySize',
-                  render: renderSize,
-                  hidden: activeTab === XHR,
-                },
-                {
-                  label: 'Duration',
-                  width: 80,
-                  dataKey: 'duration',
-                  render: renderDuration,
-                },
-              ]}
+              {tableCols}
             </TimeTable>
             {selectedWsChannel ? (
-              <WSPanel socketMsgList={selectedWsChannel} onClose={() => setSelectedWsChannel(null)} />
+              <WSPanel
+                socketMsgList={selectedWsChannel}
+                onClose={() => setSelectedWsChannel(null)}
+              />
             ) : null}
           </NoContent>
         </BottomBlock.Content>

frontend/app/components/shared/DevTools/NetworkPanel/WSPanel.tsx

@@ -23,9 +23,9 @@ const lineLength = 40;
 function WSPanel({ socketMsgList, onClose }: Props) {
   const [query, setQuery] = React.useState('');
   const [list, setList] = React.useState(socketMsgList);
-  const [selectedRow, setSelectedRow] = React.useState<SocketMsg | null>(null);
+  const [selectedRow, setSelectedRow] = React.useState<{ msg: SocketMsg, id: number } | null>(null);
 
-  const onQueryChange = (e) => {
+  const onQueryChange = (e: any) => {
     setQuery(e.target.value);
     const newList = filterList(socketMsgList, e.target.value, [
       'data',
@@ -69,15 +69,16 @@ function WSPanel({ socketMsgList, onClose }: Props) {
           position: 'relative',
         }}
       >
-        {list.map((msg) => (
+        {list.map((msg, i) => (
           <Row
             msg={msg}
             key={msg.timestamp}
-            onSelect={() => setSelectedRow(msg)}
+            onSelect={() => setSelectedRow({ msg, id: i })}
+            isSelected={selectedRow ? selectedRow.id === i : false}
           />
         ))}
         {selectedRow ? (
-          <SelectedRow msg={selectedRow} onClose={() => setSelectedRow(null)} />
+          <SelectedRow msg={selectedRow.msg} onClose={() => setSelectedRow(null)} />
         ) : null}
       </div>
     </div>
@@ -127,7 +128,7 @@ function MsgDirection({ dir }: { dir: 'up' | 'down' }) {
   );
 }
 
-function Row({ msg, onSelect }: { msg: SocketMsg; onSelect: () => void }) {
+function Row({ msg, onSelect, isSelected }: { msg: SocketMsg; isSelected: boolean; onSelect: () => void }) {
   return (
     <>
       <div
@@ -149,7 +150,7 @@ function Row({ msg, onSelect }: { msg: SocketMsg; onSelect: () => void }) {
                 'rounded-full font-bold text-xl p-2 bg-white w-6 h-6 flex items-center justify-center'
               }
             >
-              <span>{isOpen ? '-' : '+'}</span>
+              <span>{isSelected ? '-' : '+'}</span>
             </div>
           ) : null}
         </div>

frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx

@@ -1,8 +1,13 @@
 import { Timed } from 'Player';
 import React, { useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Tabs, Input, NoContent, Icon } from 'UI';
-import { PlayerContext, MobilePlayerContext } from 'App/components/Session/playerContext';
+import { Tabs, NoContent, Icon } from 'UI';
+import { Input } from 'antd';
+import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import {
+  PlayerContext,
+  MobilePlayerContext,
+} from 'App/components/Session/playerContext';
 import BottomBlock from '../BottomBlock';
 import { useModal } from 'App/components/Modal';
 import { useStore } from 'App/mstore';
@@ -10,6 +15,7 @@ import { typeList } from 'Types/session/stackEvent';
 import StackEventRow from 'Shared/DevTools/StackEventRow';
 
 import StackEventModal from '../StackEventModal';
+import { Segmented, Tooltip } from 'antd';
 import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
 import { VList, VListHandle } from 'virtua';
@@ -24,198 +30,247 @@ const ALL = 'ALL';
 const TAB_KEYS = [ALL, ...typeList] as const;
 const TABS = TAB_KEYS.map((tab) => ({ text: tab, key: tab }));
 
-type EventsList = Array<Timed & { name: string; source: string; key: string; payload?: string[] }>;
+type EventsList = Array<
+  Timed & { name: string; source: string; key: string; payload?: string[] }
+>;
 
-const WebStackEventPanelComp = observer(
-  () => {
-    const { uiPlayerStore } = useStore();
-    const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
-    const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
-    const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
-    const { player, store } = React.useContext(PlayerContext);
-    const jump = (t: number) => player.jump(t);
-    const { currentTab, tabStates } = store.get();
+const WebStackEventPanelComp = observer(() => {
+  const { uiPlayerStore } = useStore();
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+  const { player, store } = React.useContext(PlayerContext);
+  const jump = (t: number) => player.jump(t);
+  const { currentTab, tabStates } = store.get();
 
-    const { stackList: list = [], stackListNow: listNow = [] } = tabStates[currentTab];
+  const { stackList: list = [], stackListNow: listNow = [] } =
+    tabStates[currentTab];
 
-    return (
-      <EventsPanel
-        list={list as EventsList}
-        listNow={listNow as EventsList}
-        jump={jump}
-        zoomEnabled={zoomEnabled}
-        zoomStartTs={zoomStartTs}
-        zoomEndTs={zoomEndTs}
-      />
-    );
-  }
-);
+  return (
+    <EventsPanel
+      list={list as EventsList}
+      listNow={listNow as EventsList}
+      jump={jump}
+      zoomEnabled={zoomEnabled}
+      zoomStartTs={zoomStartTs}
+      zoomEndTs={zoomEndTs}
+    />
+  );
+});
 
 export const WebStackEventPanel = WebStackEventPanelComp;
 
-const MobileStackEventPanelComp = observer(
-  () => {
-    const { uiPlayerStore } = useStore();
-    const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
-    const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
-    const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
-    const { player, store } = React.useContext(MobilePlayerContext);
-    const jump = (t: number) => player.jump(t);
-    const { eventList: list = [], eventListNow: listNow = [] } = store.get();
+const MobileStackEventPanelComp = observer(() => {
+  const { uiPlayerStore } = useStore();
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+  const { player, store } = React.useContext(MobilePlayerContext);
+  const jump = (t: number) => player.jump(t);
+  const { eventList: list = [], eventListNow: listNow = [] } = store.get();
 
-    return (
-      <EventsPanel
-        list={list as EventsList}
-        listNow={listNow as EventsList}
-        jump={jump}
-        zoomEnabled={zoomEnabled}
-        zoomStartTs={zoomStartTs}
-        zoomEndTs={zoomEndTs}
-      />
-    );
-  }
-);
+  return (
+    <EventsPanel
+      list={list as EventsList}
+      listNow={listNow as EventsList}
+      jump={jump}
+      isMobile
+      zoomEnabled={zoomEnabled}
+      zoomStartTs={zoomStartTs}
+      zoomEndTs={zoomEndTs}
+    />
+  );
+});
 
 export const MobileStackEventPanel = MobileStackEventPanelComp;
 
-const EventsPanel = observer(({
-  list,
-  listNow,
-  jump,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
-}: {
-  list: EventsList;
-  listNow: EventsList;
-  jump: (t: number) => void;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
-}) => {
-  const {
-    sessionStore: { devTools },
-  } = useStore();
-  const { showModal } = useModal();
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); // TODO:embed that into useModal
-  const filter = devTools[INDEX_KEY].filter;
-  const activeTab = devTools[INDEX_KEY].activeTab;
-  const activeIndex = devTools[INDEX_KEY].index;
+const EventsPanel = observer(
+  ({
+    list,
+    listNow,
+    jump,
+    zoomEnabled,
+    zoomStartTs,
+    zoomEndTs,
+    isMobile,
+  }: {
+    list: EventsList;
+    listNow: EventsList;
+    jump: (t: number) => void;
+    zoomEnabled: boolean;
+    zoomStartTs: number;
+    zoomEndTs: number;
+    isMobile?: boolean;
+  }) => {
+    const {
+      sessionStore: { devTools },
+    } = useStore();
+    const { showModal } = useModal();
+    const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); // TODO:embed that into useModal
+    const filter = devTools[INDEX_KEY].filter;
+    const activeTab = devTools[INDEX_KEY].activeTab;
+    const activeIndex = devTools[INDEX_KEY].index;
 
-  const inZoomRangeList = list.filter(({ time }) =>
-    zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
-  );
-  const inZoomRangeListNow = listNow.filter(({ time }) =>
-    zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
-  );
+    const inZoomRangeList = list.filter(({ time }) =>
+      zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
+    );
+    const inZoomRangeListNow = listNow.filter(({ time }) =>
+      zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
+    );
 
-  let filteredList = useRegExListFilterMemo(inZoomRangeList, (it) => {
-    const searchBy = [it.name]
-    if (it.payload) {
-    const payload = Array.isArray(it.payload) ? it.payload.join(',') : JSON.stringify(it.payload);
-      searchBy.push(payload);
-    }
-    return searchBy
-  }, filter);
-  filteredList = useTabListFilterMemo(filteredList, (it) => it.source, ALL, activeTab);
-
-  const onTabClick = (activeTab: (typeof TAB_KEYS)[number]) =>
-    devTools.update(INDEX_KEY, { activeTab });
-  const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => devTools.update(INDEX_KEY, { filter: value });
-  const tabs = useMemo(
-    () => TABS.filter(({ key }) => key === ALL || inZoomRangeList.some(({ source }) => key === source)),
-    [inZoomRangeList.length]
-  );
-
-  const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
-    filteredList,
-    getLastItemTime(inZoomRangeListNow),
-    activeIndex,
-    (index) => devTools.update(INDEX_KEY, { index })
-  );
-  const onMouseEnter = stopAutoscroll;
-  const onMouseLeave = () => {
-    if (isDetailsModalActive) {
-      return;
-    }
-    timeoutStartAutoscroll();
-  };
-
-  const showDetails = (item: any) => {
-    setIsDetailsModalActive(true);
-    showModal(<StackEventModal event={item} />, {
-      right: true,
-      width: 500,
-      onClose: () => {
-        setIsDetailsModalActive(false);
-        timeoutStartAutoscroll();
+    let filteredList = useRegExListFilterMemo(
+      inZoomRangeList,
+      (it) => {
+        const searchBy = [it.name];
+        if (it.payload) {
+          const payload = Array.isArray(it.payload)
+            ? it.payload.join(',')
+            : JSON.stringify(it.payload);
+          searchBy.push(payload);
+        }
+        return searchBy;
       },
-    });
-    devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
-    stopAutoscroll();
-  };
+      filter
+    );
+    filteredList = useTabListFilterMemo(
+      filteredList,
+      (it) => it.source,
+      ALL,
+      activeTab
+    );
 
-  const _list = React.useRef<VListHandle>(null);
-  useEffect(() => {
-    if (_list.current) {
-      _list.current.scrollToIndex(activeIndex);
-    }
-  }, [activeIndex]);
+    const onTabClick = (activeTab: (typeof TAB_KEYS)[number]) =>
+      devTools.update(INDEX_KEY, { activeTab });
+    const onFilterChange = ({
+      target: { value },
+    }: React.ChangeEvent<HTMLInputElement>) =>
+      devTools.update(INDEX_KEY, { filter: value });
+    const tabs = useMemo(
+      () =>
+        TABS.filter(
+          ({ key }) =>
+            key === ALL || inZoomRangeList.some(({ source }) => key === source)
+        ),
+      [inZoomRangeList.length]
+    );
 
-  return (
-    <BottomBlock style={{ height: '100%' }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-      <BottomBlock.Header>
-        <div className="flex items-center">
-          <span className="font-semibold color-gray-medium mr-4">Stack Events</span>
-          <Tabs
-            renameTab={mapNames}
-            tabs={tabs}
-            active={activeTab}
-            onClick={onTabClick}
-            border={false}
-          />
-        </div>
-        <Input
-          className="input-small h-8"
-          placeholder="Filter by keyword"
-          icon="search"
-          name="filter"
-          height={28}
-          onChange={onFilterChange}
-          value={filter}
-        />
-      </BottomBlock.Header>
-      <BottomBlock.Content className="overflow-y-auto">
-        <NoContent
-          title={
-            <div className="capitalize flex items-center mt-16">
-              <Icon name="info-circle" className="mr-2" size="18" />
-              No Data
-            </div>
-          }
-          size="small"
-          show={filteredList.length === 0}
-        >
-          <VList
-            ref={_list}
-            count={filteredList.length || 1}
-          >
-            {filteredList.map((item, index) => (
-              <StackEventRow
-                isActive={activeIndex === index}
-                key={item.key}
-                event={item}
-                onJump={() => {
-                  stopAutoscroll();
-                  devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
-                  jump(item.time);
-                }}
-                onClick={() => showDetails(item)}
+    const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
+      filteredList,
+      getLastItemTime(inZoomRangeListNow),
+      activeIndex,
+      (index) => devTools.update(INDEX_KEY, { index })
+    );
+    const onMouseEnter = stopAutoscroll;
+    const onMouseLeave = () => {
+      if (isDetailsModalActive) {
+        return;
+      }
+      timeoutStartAutoscroll();
+    };
+
+    const showDetails = (item: any) => {
+      setIsDetailsModalActive(true);
+      showModal(<StackEventModal event={item} />, {
+        right: true,
+        width: 500,
+        onClose: () => {
+          setIsDetailsModalActive(false);
+          timeoutStartAutoscroll();
+        },
+      });
+      devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+      stopAutoscroll();
+    };
+
+    const _list = React.useRef<VListHandle>(null);
+    useEffect(() => {
+      if (_list.current) {
+        _list.current.scrollToIndex(activeIndex);
+      }
+    }, [activeIndex]);
+
+    return (
+      <BottomBlock
+        style={{ height: '100%' }}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <BottomBlock.Header>
+          <div className="flex items-center">
+            <span className="font-semibold color-gray-medium mr-4">
+              Stack Events
+            </span>
+            <Tabs
+              renameTab={mapNames}
+              tabs={tabs}
+              active={activeTab}
+              onClick={onTabClick}
+              border={false}
+            />
+          </div>
+          <div className={'flex items-center gap-2'}>
+            {isMobile ? null : (
+              <Segmented
+                options={[
+                  { label: 'All Tabs', value: 'all' },
+                  {
+                    label: (
+                      <Tooltip title="Stack Events overview is available only for all tabs combined.">
+                        <span>Current Tab</span>
+                      </Tooltip>
+                    ),
+                    value: 'current',
+                    disabled: true,
+                  },
+                ]}
+                defaultValue="all"
+                size="small"
+                className="rounded-full font-medium"
               />
-            ))}
-          </VList>
-        </NoContent>
-      </BottomBlock.Content>
-    </BottomBlock>
-  );
-});
+            )}
+            <Input
+              className="rounded-lg"
+              placeholder="Filter by keyword"
+              name="filter"
+              height={28}
+              onChange={onFilterChange}
+              value={filter}
+              size="small"
+              prefix={<SearchOutlined className="text-neutral-400" />}
+            />
+          </div>
+        </BottomBlock.Header>
+        <BottomBlock.Content className="overflow-y-auto">
+          <NoContent
+            title={
+              <div className="capitalize flex items-center mt-16 gap-2">
+                <InfoCircleOutlined size={18} />
+                No Data
+              </div>
+            }
+            size="small"
+            show={filteredList.length === 0}
+          >
+            <VList ref={_list} count={filteredList.length || 1}>
+              {filteredList.map((item, index) => (
+                <StackEventRow
+                  isActive={activeIndex === index}
+                  key={item.key}
+                  event={item}
+                  onJump={() => {
+                    stopAutoscroll();
+                    devTools.update(INDEX_KEY, {
+                      index: filteredList.indexOf(item),
+                    });
+                    jump(item.time);
+                  }}
+                  onClick={() => showDetails(item)}
+                />
+              ))}
+            </VList>
+          </NoContent>
+        </BottomBlock.Content>
+      </BottomBlock>
+    );
+  }
+);

frontend/app/components/shared/DevTools/TabSelector.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Segmented } from 'antd'
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+function TabSelector() {
+  const { uiPlayerStore } = useStore();
+  const currentValue = uiPlayerStore.dataSource;
+  const options = [
+    { label: 'All Tabs', value: 'all' },
+    { label: 'Current Tab', value: 'current' }
+  ]
+
+  const onChange = (value: 'all' | 'current') => {
+    uiPlayerStore.changeDataSource(value)
+  }
+  return (
+    <Segmented options={options} value={currentValue} onChange={onChange} className='font-medium rounded-lg' size='small'  />
+  )
+}
+
+export default observer(TabSelector)

frontend/app/components/shared/DevTools/TabTag.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import { observer } from 'mobx-react-lite';
+import { PlayerContext } from 'Components/Session/playerContext';
+
+function TabTag({ logSource, logTabId }: { logSource: number; logTabId: string }) {
+  const { store } = React.useContext(PlayerContext);
+  const { tabNames } = store.get();
+
+  return (
+    <Tooltip title={`${tabNames[logTabId] ?? `Tab ${logSource}`}`} placement="left">
+      <div
+        className={
+          'bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs cursor-default'
+        }
+      >
+        {logSource}
+      </div>
+    </Tooltip>
+  );
+}
+
+export default observer(TabTag);

frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx

@@ -199,7 +199,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
     return (
       <div
         className={cn(
-          'dev-row border-b border-color-gray-light-shade group items-center',
+          'dev-row border-b border-neutral-950/5 group items-center text-sm',
           stl.row,
           {
             [stl.hoverable]: hoverable,
@@ -215,7 +215,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
         {columns
           .filter((i: any) => !i.hidden)
           .map(({ dataKey, render, width, label }) => (
-            <div key={parseInt(label.replace(' ', '')+dataKey, 36)} className={cn(stl.cell, 'overflow-ellipsis overflow-hidden')} style={{ width: `${width}px` }}>
+            <div key={parseInt(label.replace(' ', '')+dataKey, 36)} className={cn(stl.cell, 'overflow-ellipsis overflow-hidden !py-0.5')} style={{ width: `${width}px` }}>
               {render
                 ? render(row)
                 : row[dataKey || ''] || <i className="color-gray-light">{'empty'}</i>}

frontend/app/components/shared/Insights/SankeyChart/NodeDropdown.tsx

@@ -1,23 +1,11 @@
 import React from 'react';
-// import Select from 'Shared/Select';
-import { Dropdown, MenuProps, Select, Space } from 'antd';
-import { DownOutlined, SmileOutlined } from '@ant-design/icons';
+import { MenuProps, Select } from 'antd';
 
 interface Props {
   payload: any;
 }
 
 function NodeDropdown(props: Props) {
-  const items: MenuProps['items'] = [
-    {
-      key: '1',
-      label: (
-        <a target='_blank' rel='noopener noreferrer' href='https://www.antgroup.com'>
-          1st menu item
-        </a>
-      )
-    }
-  ];
   return (
     <Select style={{ width: 120 }} placeholder='Slect Event' dropdownStyle={{
       border: 'none'

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -24,15 +24,15 @@ function LiveSessionList() {
   const totalLiveSessions = sessionStore.totalLiveSessions;
   const loading = sessionStore.loadingLiveSessions;
   const { currentPage } = searchStoreLive;
-  const metaList = customFieldStore.list
+  const metaList = customFieldStore.list;
   const metaListLoading = customFieldStore.isLoading;
 
   let timeoutId: any;
   const { filters } = filter;
   const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
-  const sortOptions = [{ label: 'Start Time', value: 'timestamp' }].concat(
+  const sortOptions = [{ label: 'Start Time', value: 'timestamp' }, { label: 'Duration', value: 'duration' }].concat(
     metaList
-      .map(({ key} : any) => ({
+      .map(({ key }: any) => ({
         label: capitalize(key),
         value: key
       }))
@@ -40,21 +40,33 @@ function LiveSessionList() {
 
   useEffect(() => {
     if (metaListLoading) return;
+
     const _filter = { ...filter };
+    let shouldUpdate = false;
+
+    // Set default sort if not already set
     if (sortOptions[1] && !filter.sort) {
       _filter.sort = sortOptions[1].value;
+      shouldUpdate = true;
     }
-    searchStoreLive.edit(_filter);
+
+    // Only update filters if there's a change
+    if (shouldUpdate) {
+      searchStoreLive.edit(_filter);
+    }
+
+    // Start auto-refresh timeout
     timeout();
+
+    // Cleanup on component unmount or re-run
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [metaListLoading]);
+  }, [metaListLoading, filter.sort]); // Add necessary dependencies
 
   const refetch = () => {
-    searchStoreLive.edit({ ...filter })
     void searchStoreLive.fetchSessions();
-  }
+  };
 
   const onUserClick = (userId: string, userAnonymousId: string) => {
     if (userId) {
@@ -66,7 +78,6 @@ function LiveSessionList() {
 
   const onSortChange = ({ value }: any) => {
     searchStoreLive.edit({ sort: value.value });
-    void searchStoreLive.fetchSessions();
   };
 
   const timeout = () => {
@@ -102,8 +113,7 @@ function LiveSessionList() {
                 <div className="mx-2" />
                 <SortOrderButton
                   onChange={(state: any) => {
-                    searchStoreLive.edit({ order: state })
-                    void searchStoreLive.fetchSessions();
+                    searchStoreLive.edit({ order: state });
                   }}
                   sortOrder={filter.order}
                 />

frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx

@@ -22,7 +22,6 @@ function LiveSessionSearch() {
 
   const onUpdateFilter = (filterIndex: number, filter: any) => {
     searchStoreLive.updateFilter(filterIndex, filter);
-    void searchStoreLive.fetchSessions();
   };
 
   const onRemoveFilter = (filterIndex: number) => {
@@ -33,16 +32,12 @@ function LiveSessionSearch() {
     searchStoreLive.edit({
       filters: newFilters
     });
-
-    void searchStoreLive.fetchSessions();
   };
 
   const onChangeEventsOrder = (e: any, { name, value }: any) => {
     searchStoreLive.edit({
       eventsOrder: value
     });
-
-    void searchStoreLive.fetchSessions();
   };
 
   return (hasEvents || hasFilters) ? (

frontend/app/components/shared/SessionSearch/SessionSearch.tsx

@@ -11,50 +11,57 @@ import { useStore } from 'App/mstore';
 import { debounce } from 'App/utils';
 import useSessionSearchQueryHandler from 'App/hooks/useSessionSearchQueryHandler';
 
-let debounceFetch: any = () => {
-};
+let debounceFetch: () => void;
 
 function SessionSearch() {
   const { tagWatchStore, aiFiltersStore, searchStore, customFieldStore, projectsStore } = useStore();
   const appliedFilter = searchStore.instance;
   const metaLoading = customFieldStore.isLoading;
-  const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).length > 0;
-  const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).length > 0;
+  const hasEvents = appliedFilter.filters.some((i: any) => i.isEvent);
+  const hasFilters = appliedFilter.filters.some((i: any) => !i.isEvent);
   const saveRequestPayloads = projectsStore.instance?.saveRequestPayloads ?? false;
 
   useSessionSearchQueryHandler({
     appliedFilter,
     loading: metaLoading,
     onBeforeLoad: async () => {
-      const tags = await tagWatchStore.getTags();
-      if (tags) {
-        addOptionsToFilter(
-          FilterKey.TAGGED_ELEMENT,
-          tags.map((tag) => ({
-            label: tag.name,
-            value: tag.tagId.toString()
-          }))
-        );
-        searchStore.refreshFilterOptions();
+      try {
+        const tags = await tagWatchStore.getTags();
+        if (tags) {
+          addOptionsToFilter(
+            FilterKey.TAGGED_ELEMENT,
+            tags.map((tag) => ({
+              label: tag.name,
+              value: tag.tagId.toString()
+            }))
+          );
+          searchStore.refreshFilterOptions();
+        }
+      } catch (error) {
+        console.error('Error during onBeforeLoad:', error);
       }
     }
   });
 
   useEffect(() => {
     debounceFetch = debounce(() => searchStore.fetchSessions(), 500);
-    // void searchStore.fetchSessions(true)
   }, []);
 
   useEffect(() => {
+    if (searchStore.urlParsed) return;
     debounceFetch();
   }, [appliedFilter.filters]);
 
   const onAddFilter = (filter: any) => {
     searchStore.addFilter(filter);
+
+    debounceFetch();
   };
 
   const onUpdateFilter = (filterIndex: any, filter: any) => {
     searchStore.updateFilter(filterIndex, filter);
+
+    debounceFetch();
   };
 
   const onFilterMove = (newFilters: any) => {
@@ -85,49 +92,47 @@ function SessionSearch() {
   };
 
   const showPanel = hasEvents || hasFilters || aiFiltersStore.isLoading;
-  return !metaLoading ? (
-    <>
-      {showPanel ? (
-        <div className="border bg-white rounded-lg mt-4">
-          <div className="p-5">
-            {aiFiltersStore.isLoading ? (
-              <div className={'font-semibold flex items-center gap-2 mb-2'}>
-                <AnimatedSVG name={ICONS.LOADER} size={18} />
-                <span>Translating your query into search steps...</span>
-              </div>
-            ) : null}
-            {hasEvents || hasFilters ? (
-              <FilterList
-                filter={appliedFilter}
-                onUpdateFilter={onUpdateFilter}
-                onRemoveFilter={onRemoveFilter}
-                onChangeEventsOrder={onChangeEventsOrder}
-                onFilterMove={onFilterMove}
-                saveRequestPayloads={saveRequestPayloads}
-              />
-            ) : null}
-          </div>
 
-          {hasEvents || hasFilters ? (
-            <div className="border-t px-5 py-1 flex items-center -mx-2">
-              <div>
-                <FilterSelection filter={undefined} onFilterClick={onAddFilter}>
-                  <Button variant="text-primary" className="mr-2" icon="plus">
-                    ADD STEP
-                  </Button>
-                </FilterSelection>
-              </div>
-              <div className="ml-auto flex items-center">
-                <SaveFilterButton />
-              </div>
-            </div>
-          ) : null}
+  if (metaLoading) return null;
+  if (!showPanel) return null;
+
+  return (
+    <div className="border bg-white rounded-lg mt-4">
+      <div className="p-5">
+        {aiFiltersStore.isLoading ? (
+          <div className={'font-semibold flex items-center gap-2 mb-2'}>
+            <AnimatedSVG name={ICONS.LOADER} size={18} />
+            <span>Translating your query into search steps...</span>
+          </div>
+        ) : null}
+        {hasEvents || hasFilters ? (
+          <FilterList
+            filter={appliedFilter}
+            onUpdateFilter={onUpdateFilter}
+            onRemoveFilter={onRemoveFilter}
+            onChangeEventsOrder={onChangeEventsOrder}
+            onFilterMove={onFilterMove}
+            saveRequestPayloads={saveRequestPayloads}
+          />
+        ) : null}
+      </div>
+
+      {hasEvents || hasFilters ? (
+        <div className="border-t px-5 py-1 flex items-center -mx-2">
+          <div>
+            <FilterSelection filter={undefined} onFilterClick={onAddFilter}>
+              <Button variant="text-primary" className="mr-2" icon="plus">
+                ADD STEP
+              </Button>
+            </FilterSelection>
+          </div>
+          <div className="ml-auto flex items-center">
+            <SaveFilterButton />
+          </div>
         </div>
-      ) : (
-        <></>
-      )}
-    </>
-  ) : null;
+      ) : null}
+    </div>
+  );
 }
 
 export default observer(SessionSearch);

frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx

@@ -58,7 +58,7 @@ function ListingVisibility() {
                 </div>
                 <div className="col-span-3">
                     <Select
-                        defaultValue={periodOptions[1].value}
+                        defaultValue={durationSettings.countType || periodOptions[0].value}
                         options={periodOptions}
                         onChange={({ value }) => {
                             changeSettings({ countType: value.value })

frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx

@@ -3,16 +3,19 @@ import React from 'react';
 import { useStore } from 'App/mstore';
 
 import LatestSessionsMessage from './components/LatestSessionsMessage';
-import NotesList from './components/Notes/NoteList';
 import SessionHeader from './components/SessionHeader';
 import SessionList from './components/SessionList';
 import { observer } from 'mobx-react-lite';
+import NoSessionsMessage from 'Shared/NoSessionsMessage/NoSessionsMessage';
+import MainSearchBar from 'Shared/MainSearchBar/MainSearchBar';
+import SessionSearch from 'Shared/SessionSearch/SessionSearch';
+import usePageTitle from '@/hooks/usePageTitle';
 
 function SessionsTabOverview() {
   const [query, setQuery] = React.useState('');
   const { aiFiltersStore, searchStore } = useStore();
   const appliedFilter = searchStore.instance;
-  const isNotesRoute = searchStore.activeTab.type === 'notes';
+  usePageTitle('Sessions - OpenReplay');
 
   const handleKeyDown = (event: any) => {
     if (event.key === 'Enter') {
@@ -25,25 +28,27 @@ function SessionsTabOverview() {
 
   const testingKey = localStorage.getItem('__mauricio_testing_access') === 'true';
   return (
-    <div className="widget-wrapper">
-      {testingKey ? (
-        <Input
-          value={query}
-          onKeyDown={handleKeyDown}
-          onChange={(e) => setQuery(e.target.value)}
-          className={'mb-2'}
-          placeholder={'ask session ai'}
-        />
-      ) : null}
-      <SessionHeader />
-      <div className="border-b" />
-      <LatestSessionsMessage />
-      {!isNotesRoute ? (
+    <>
+      <NoSessionsMessage />
+      <MainSearchBar />
+      <SessionSearch />
+      <div className="my-4" />
+      <div className="widget-wrapper">
+        {testingKey ? (
+          <Input
+            value={query}
+            onKeyDown={handleKeyDown}
+            onChange={(e) => setQuery(e.target.value)}
+            className={'mb-2'}
+            placeholder={'ask session ai'}
+          />
+        ) : null}
+        <SessionHeader />
+        <div className="border-b" />
+        <LatestSessionsMessage />
         <SessionList />
-      ) : (
-        <NotesList />
-      )}
-    </div>
+      </div>
+    </>
   );
 }
 

frontend/app/components/shared/SessionsTabOverview/components/Bookmarks/Bookmarks.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import SessionList from 'Shared/SessionsTabOverview/components/SessionList/SessionList';
+import NoteTags from 'Shared/SessionsTabOverview/components/Notes/NoteTags';
+import { Loader, NoContent, Pagination } from 'UI';
+import AnimatedSVG from 'Shared/AnimatedSVG';
+import { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import NoteItem from 'Shared/SessionsTabOverview/components/Notes/NoteItem';
+import { useStore } from '@/mstore';
+import { observer } from 'mobx-react-lite';
+import SessionItem from 'Shared/SessionItem/SessionItem';
+import usePageTitle from '@/hooks/usePageTitle';
+
+function Bookmarks() {
+  const { projectsStore, sessionStore, customFieldStore, userStore, searchStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const isLoggedIn = userStore.isLoggedIn;
+  const bookmarks = sessionStore.bookmarks;
+
+  usePageTitle('Bookmarks - OpenReplay');
+
+  useEffect(() => {
+    void sessionStore.fetchBookmarkedSessions();
+  }, []);
+
+  return (
+    <div className="widget-wrapper">
+      <div className="flex items-center px-4 py-1 justify-between w-full">
+        <h2 className="text-2xl capitalize mr-4">Bookmarks</h2>
+      </div>
+      <div className="border-b" />
+      <Loader loading={bookmarks.loading}>
+        <NoContent
+          show={bookmarks.list.length === 0}
+          title={
+            <div className="flex flex-col items-center justify-center">
+              {/* <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" /> */}
+              <AnimatedSVG name={ICONS.NO_BOOKMARKS} size={60} />
+              <div className="text-center mt-4 text-lg font-medium">No sessions bookmarked</div>
+            </div>
+          }
+        >
+          <div className="border-b rounded bg-white">
+            {bookmarks.list.map((session: any) => (
+              <div key={session.sessionId} className="border-b">
+                <SessionItem
+                  session={session}
+                  hasUserFilter={false}
+                  // onUserClick={() => {}}
+                  // metaList={metaList}
+                  // lastPlayedSessionId={lastPlayedSessionId}
+                  bookmarked={true}
+                  // toggleFavorite={toggleFavorite}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className="w-full flex items-center justify-between py-4 px-6">
+            <div className="text-disabled-text">
+              Showing{' '}
+              <span className="font-semibold">{Math.min(bookmarks.list.length, bookmarks.pageSize)}</span> out
+              of <span className="font-semibold">{bookmarks.total}</span> sessions.
+            </div>
+            <Pagination
+              page={bookmarks.page}
+              total={bookmarks.total}
+              onPageChange={(page) => sessionStore.updateBookmarksPage(page)}
+              limit={bookmarks.pageSize}
+              debounceRequest={100}
+            />
+          </div>
+        </NoContent>
+      </Loader>
+    </div>
+  );
+}
+
+export default observer(Bookmarks);

frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx

@@ -7,11 +7,16 @@ import { observer } from 'mobx-react-lite';
 function LatestSessionsMessage() {
   const { searchStore } = useStore();
   const count = searchStore.latestList.size;
+
+  const onShowNewSessions = () => {
+    void searchStore.updateCurrentPage(1, true);
+  };
+
   return count > 0 ? (
     <div
       className="bg-amber-50 p-1 flex w-full border-b text-center justify-center link"
       style={{ backgroundColor: 'rgb(255 251 235)' }}
-      onClick={() => searchStore.updateCurrentPage(1)}
+      onClick={onShowNewSessions}
     >
       Show {numberWithCommas(count)} New {count > 1 ? 'Sessions' : 'Session'}
     </div>

frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx

@@ -5,57 +5,72 @@ import NoteItem from './NoteItem';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import NoteTags from 'Shared/SessionsTabOverview/components/Notes/NoteTags';
+import usePageTitle from '@/hooks/usePageTitle';
 
 function NotesList() {
+  usePageTitle('Notes - OpenReplay');
   const { notesStore } = useStore();
 
   React.useEffect(() => {
-      void notesStore.fetchNotes();
+    void notesStore.fetchNotes();
   }, [notesStore.page]);
 
   const list = notesStore.notes;
 
   return (
-    <Loader loading={notesStore.loading}>
-      <NoContent
-        show={list.length === 0}
-        title={
-          <div className="flex flex-col items-center justify-center">
-            {/* <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" /> */}
-            <AnimatedSVG name={ICONS.NO_NOTES} size={60} />
-            <div className="text-center mt-4 text-lg font-medium">No notes yet</div>
-          </div>
-        }
-        subtext={
-          <div className="text-center flex justify-center items-center flex-col">
-            Note observations during session replays and share them with your team.
-          </div>
-        }
-      >
-        <div className="border-b rounded bg-white">
-          {list.map((note) => (
-            <React.Fragment key={note.noteId}>
-              <NoteItem note={note} />
-            </React.Fragment>
-          ))}
-        </div>
+    <>
+      <div className="widget-wrapper">
+        <div className="flex items-center px-4 py-1 justify-between w-full">
+          <h2 className="text-2xl capitalize mr-4">Notes</h2>
 
-        <div className="w-full flex items-center justify-between py-4 px-6">
-          <div className="text-disabled-text">
-            Showing{' '}
-            <span className="font-semibold">{Math.min(list.length, notesStore.pageSize)}</span> out
-            of <span className="font-semibold">{notesStore.total}</span> notes
+          <div className="flex items-center justify-end w-full">
+            <NoteTags />
           </div>
-          <Pagination
-            page={notesStore.page}
-            total={notesStore.total}
-            onPageChange={(page) => notesStore.changePage(page)}
-            limit={notesStore.pageSize}
-            debounceRequest={100}
-          />
         </div>
-      </NoContent>
-    </Loader>
+        <div className="border-b" />
+        <Loader loading={notesStore.loading}>
+          <NoContent
+            show={list.length === 0}
+            title={
+              <div className="flex flex-col items-center justify-center">
+                {/* <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" /> */}
+                <AnimatedSVG name={ICONS.NO_NOTES} size={60} />
+                <div className="text-center mt-4 text-lg font-medium">No notes yet</div>
+              </div>
+            }
+            subtext={
+              <div className="text-center flex justify-center items-center flex-col">
+                Note observations during session replays and share them with your team.
+              </div>
+            }
+          >
+            <div className="border-b rounded bg-white">
+              {list.map((note) => (
+                <React.Fragment key={note.noteId}>
+                  <NoteItem note={note} />
+                </React.Fragment>
+              ))}
+            </div>
+
+            <div className="w-full flex items-center justify-between py-4 px-6">
+              <div className="text-disabled-text">
+                Showing{' '}
+                <span className="font-semibold">{Math.min(list.length, notesStore.pageSize)}</span> out
+                of <span className="font-semibold">{notesStore.total}</span> notes
+              </div>
+              <Pagination
+                page={notesStore.page}
+                total={notesStore.total}
+                onPageChange={(page) => notesStore.changePage(page)}
+                limit={notesStore.pageSize}
+                debounceRequest={100}
+              />
+            </div>
+          </NoContent>
+        </Loader>
+      </div>
+    </>
   );
 }
 

frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import Period from 'Types/app/period';
 import SelectDateRange from 'Shared/SelectDateRange';
 import SessionTags from '../SessionTags';
-import NoteTags from '../Notes/NoteTags';
 import SessionSort from '../SessionSort';
 import { Space } from 'antd';
 import { useStore } from 'App/mstore';
@@ -17,14 +16,12 @@ function SessionHeader() {
   const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
 
   const title = useMemo(() => {
-    if (activeTab.type === 'notes') {
-      return 'Notes';
-    }
+    if (!activeTab) return;
     if (activeTab.type === 'bookmarks') {
       return isEnterprise ? 'Vault' : 'Bookmarks';
     }
     return 'Sessions';
-  }, [activeTab.type, isEnterprise]);
+  }, [isEnterprise, activeTab]);
 
   const onDateChange = (e: any) => {
     const dateValues = e.toJSON();
@@ -35,26 +32,15 @@ function SessionHeader() {
   return (
     <div className="flex items-center px-4 py-1 justify-between w-full">
       <h2 className="text-2xl capitalize mr-4">{title}</h2>
-      {activeTab.type !== 'notes' ? (
-        <div className="flex items-center w-full justify-end">
-          {activeTab.type !== 'bookmarks' && (
-            <>
-              <SessionTags />
-              <div className="mr-auto" />
-              <Space>
-                <SelectDateRange isAnt period={period} onChange={onDateChange} right={true} />
-                <SessionSort />
-              </Space>
-            </>
-          )}
-        </div>
-      ) : null}
-
-      {activeTab.type === 'notes' && (
-        <div className="flex items-center justify-end w-full">
-          <NoteTags />
-        </div>
-      )}
+      <div className="flex items-center w-full justify-end">
+        {activeTab?.type !== 'bookmarks' && <SessionTags />}
+        <div className="mr-auto" />
+        <Space>
+          {activeTab?.type !== 'bookmarks' &&
+            <SelectDateRange isAnt period={period} onChange={onDateChange} right={true} />}
+          <SessionSort />
+        </Space>
+      </div>
     </div>
   );
 }

frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx

@@ -73,7 +73,6 @@ function SessionList() {
   }, [isBookmark, isVault, activeTab, location.pathname]);
   const [statusData, setStatusData] = React.useState<SessionStatus>({ status: 0, count: 0 });
 
-
   const fetchStatus = async () => {
     const response = await sessionService.getRecordingStatus();
     setStatusData({

frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx

@@ -6,28 +6,22 @@ interface Props {
   sortOrder: string;
   onChange?: (sortOrder: string) => void;
 }
+
 export default React.memo(function SortOrderButton(props: Props) {
   const { sortOrder, onChange = () => null } = props;
   const isAscending = sortOrder === 'asc';
 
   return (
     <div className="rounded-full">
-
-          <Segmented
-            size='small'
-            options={[
-              { label: 'Ascending', value: 'Ascending', icon: <ArrowUpOutlined /> },
-              { label: 'Descending', value: 'Descending', icon: <ArrowDownOutlined /> },
-            ]}
-            defaultValue="Ascending"
-            onChange={(value) => {
-              if (value === 'Ascending') {
-                onChange('asc');
-              } else if (value === 'Descending') {
-                onChange('desc');
-              }
-            }}
-          />
+      <Segmented
+        size="small"
+        options={[
+          { label: 'Ascending', value: 'asc', icon: <ArrowUpOutlined /> },
+          { label: 'Descending', value: 'desc', icon: <ArrowDownOutlined /> }
+        ]}
+        defaultValue={sortOrder}
+        onChange={onChange}
+      />
     </div>
   );
 });

frontend/app/date.ts

@@ -2,6 +2,8 @@
 
 import { DateTime, Duration } from 'luxon'; // TODO
 import { Timezone } from 'App/mstore/types/sessionSettings';
+import { LAST_24_HOURS, LAST_30_DAYS, LAST_7_DAYS } from 'Types/app/period';
+import { CUSTOM_RANGE } from '@/dateRange';
 
 export function getDateFromString(date: string, format = 'yyyy-MM-dd HH:mm:ss:SSS'): string {
   return DateTime.fromISO(date).toFormat(format);
@@ -191,3 +193,35 @@ export const countDaysFrom = (timestamp: number): number => {
   const d = new Date();
   return Math.round(Math.abs(d.getTime() - date.toJSDate().getTime()) / (1000 * 3600 * 24));
 }
+
+export const getDateRangeUTC = (rangeName: string, customStartDate?: number, customEndDate?: number): {
+  startDate: number;
+  endDate: number
+}  => {
+  let endDate = new Date().getTime();
+  let startDate: number;
+
+  switch (rangeName) {
+    case LAST_7_DAYS:
+      startDate = endDate - 7 * 24 * 60 * 60 * 1000;
+      break;
+    case LAST_30_DAYS:
+      startDate = endDate - 30 * 24 * 60 * 60 * 1000;
+      break;
+    case CUSTOM_RANGE:
+      if (!customStartDate || !customEndDate) {
+        throw new Error('Start date and end date must be provided for CUSTOM_RANGE.');
+      }
+      startDate = customStartDate;
+      endDate = customEndDate;
+      break;
+    case LAST_24_HOURS:
+    default:
+      startDate = endDate - 24 * 60 * 60 * 1000;
+  }
+
+  return {
+    startDate,
+    endDate
+  };
+}

frontend/app/hooks/useSessionSearchQueryHandler.ts

@@ -6,46 +6,59 @@ import Search from '@/mstore/types/search';
 import { getFilterFromJson } from 'Types/filter/newFilter';
 
 interface Props {
-  onBeforeLoad?: () => Promise<any>;
-  appliedFilter: any;
+  onBeforeLoad?: () => Promise<void>;
+  appliedFilter: Record<string, any>;
   loading: boolean;
 }
 
-const useSessionSearchQueryHandler = (props: Props) => {
+const useSessionSearchQueryHandler = ({ onBeforeLoad, appliedFilter, loading }: Props) => {
   const { searchStore } = useStore();
-  const [beforeHookLoaded, setBeforeHookLoaded] = useState(!props.onBeforeLoad);
-  const { appliedFilter, loading } = props;
+  const [beforeHookLoaded, setBeforeHookLoaded] = useState(!onBeforeLoad);
   const history = useHistory();
 
+  // Apply filter from the query string when the component mounts
   useEffect(() => {
     const applyFilterFromQuery = async () => {
       if (!loading && !searchStore.urlParsed) {
-        if (props.onBeforeLoad) {
-          await props.onBeforeLoad();
-          setBeforeHookLoaded(true);
-        }
+        try {
+          if (onBeforeLoad) {
+            await onBeforeLoad();
+            setBeforeHookLoaded(true);
+          }
 
-        const converter = JsonUrlConverter.urlParamsToJson(history.location.search);
-        const json: any = getFilterFromJson(converter.toJSON());
-        const filter = new Search(json);
-        searchStore.applyFilter(filter, true);
-        searchStore.setUrlParsed()
+          const converter = JsonUrlConverter.urlParamsToJson(history.location.search);
+          const json = getFilterFromJson(converter.toJSON());
+          const filter = new Search(json);
+          searchStore.applyFilter(filter, true);
+          searchStore.setUrlParsed();
+        } catch (error) {
+          console.error('Error applying filter from query:', error);
+        }
       }
     };
 
     void applyFilterFromQuery();
-  }, [loading]);
+  }, [loading, onBeforeLoad, searchStore, history.location.search]);
 
+  // Update the URL whenever the appliedFilter changes
   useEffect(() => {
-    const generateUrlQuery = () => {
+    const updateUrlWithFilter = () => {
       if (!loading && beforeHookLoaded) {
-        const converter = JsonUrlConverter.jsonToUrlParams(appliedFilter);
-        history.replace({ search: converter });
+        const query = JsonUrlConverter.jsonToUrlParams(appliedFilter);
+        history.replace({ search: query });
       }
     };
 
-    generateUrlQuery();
-  }, [appliedFilter, loading, beforeHookLoaded]);
+    updateUrlWithFilter();
+  }, [appliedFilter, loading, beforeHookLoaded, history]);
+
+  // Ensure the URL syncs on remount if already parsed
+  useEffect(() => {
+    if (searchStore.urlParsed) {
+      const query = JsonUrlConverter.jsonToUrlParams(appliedFilter);
+      history.replace({ search: query });
+    }
+  }, [appliedFilter, searchStore.urlParsed, history]);
 
   return null;
 };

frontend/app/mstore/filterStore.ts

@@ -20,7 +20,7 @@ export default class FilterStore {
   }
 
   setTopValues = (key: string, values: TopValue[]) => {
-    this.topValues[key] = values.filter((value) => value !== null && value.value !== '');
+    this.topValues[key] = values?.filter((value) => value !== null && value.value !== '');
   };
 
   fetchTopValues = async (key: string, source?: string) => {

frontend/app/mstore/index.tsx

@@ -38,6 +38,7 @@ const projectStore = new ProjectsStore();
 const sessionStore = new SessionStore();
 const searchStore = new SearchStore();
 const searchStoreLive = new SearchStoreLive();
+const settingsStore = new SettingsStore();
 
 function copyToClipboard(text: string) {
   const textArea = document.createElement('textarea');
@@ -114,7 +115,7 @@ export class RootStore {
     this.dashboardStore = new DashboardStore();
     this.metricStore = new MetricStore();
     this.funnelStore = new FunnelStore();
-    this.settingsStore = new SettingsStore();
+    this.settingsStore = settingsStore;
     this.userStore = userStore;
     this.roleStore = new RoleStore();
     this.auditStore = new AuditStore();
@@ -168,4 +169,4 @@ export const withStore = (Component: any) => (props: any) => {
   return <Component {...props} mstore={useStore()} />;
 };
 
-export { userStore, sessionStore, searchStore, searchStoreLive, projectStore, client };
+export { userStore, sessionStore, searchStore, searchStoreLive, projectStore, client, settingsStore };

frontend/app/mstore/searchStore.ts

@@ -13,7 +13,7 @@ import { searchService } from 'App/services';
 import Search from 'App/mstore/types/search';
 import { checkFilterValue } from 'App/mstore/types/filter';
 import FilterItem from 'App/mstore/types/filterItem';
-import { sessionStore } from 'App/mstore';
+import { sessionStore, settingsStore } from 'App/mstore';
 import SavedSearch, { ISavedSearch } from 'App/mstore/types/savedSearch';
 import { iTag } from '@/services/NotesService';
 import { issues_types } from 'Types/session/issue';
@@ -162,15 +162,14 @@ class SearchStore {
       });
   }
 
-  updateCurrentPage(page: number) {
+  updateCurrentPage(page: number, force = false) {
     this.currentPage = page;
-    void this.fetchSessions();
+    void this.fetchSessions(force);
   }
 
   setActiveTab(tab: string) {
     runInAction(() => {
       this.activeTab = TAB_MAP[tab];
-      this.currentPage = 1;
     });
   }
 
@@ -229,12 +228,13 @@ class SearchStore {
     if (this.latestRequestTime) {
       const period = Period({ rangeName: CUSTOM_RANGE, start: this.latestRequestTime, end: Date.now() });
       const newTimestamps: any = period.toJSON();
-      filter.startTimestamp = newTimestamps.startDate;
-      filter.endTimestamp = newTimestamps.endDate;
+      filter.startDate = newTimestamps.startDate;
+      filter.endDate = newTimestamps.endDate;
     }
     searchService.checkLatestSessions(filter).then((response: any) => {
-      this.latestList = response;
-      this.latestRequestTime = Date.now();
+      runInAction(() => {
+        this.latestList = List(response);
+      });
     });
   }
 
@@ -264,8 +264,10 @@ class SearchStore {
       });
     }
 
+    this.currentPage = 1;
+
     if (filter.value && filter.value[0] && filter.value[0] !== '') {
-      this.fetchSessions();
+      void this.fetchSessions();
     }
   }
 
@@ -327,6 +329,7 @@ class SearchStore {
 
     if (this.activeTags[0] && this.activeTags[0] !== 'all') {
       const tagFilter = filtersMap[FilterKey.ISSUE];
+      tagFilter.type = tagFilter.type.toLowerCase();
       tagFilter.value = [issues_types.find((i: any) => i.type === this.activeTags[0])?.type];
       delete tagFilter.operatorOptions;
       delete tagFilter.options;
@@ -336,6 +339,24 @@ class SearchStore {
       filter.filters = filter.filters.concat(tagFilter);
     }
 
+    if (!filter.filters.some((f: any) => f.type === FilterKey.DURATION)) {
+      const { durationFilter } = settingsStore.sessionSettings;
+      if (durationFilter?.count > 0) {
+        const multiplier = durationFilter.countType === 'sec' ? 1000 : 60000;
+        const amount = durationFilter.count * multiplier;
+        const value = durationFilter.operator === '<' ? [amount, 0] : [0, amount];
+
+        filter.filters.push({
+          type: FilterKey.DURATION,
+          value,
+          operator: 'is',
+        });
+      }
+    }
+
+    this.latestRequestTime = Date.now();
+    this.latestList = List();
+
     await sessionStore.fetchSessions({
       ...filter,
       page: this.currentPage,

frontend/app/mstore/searchStoreLive.ts

@@ -2,10 +2,10 @@ import { FilterCategory, FilterKey } from 'Types/filter/filterType';
 import {
   filtersMap,
   generateFilterOptions,
-  liveFiltersMap,
+  liveFiltersMap
 } from 'Types/filter/newFilter';
 import { List } from 'immutable';
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, reaction } from 'mobx';
 import Search from 'App/mstore/types/search';
 import { checkFilterValue, IFilter } from 'App/mstore/types/filter';
 import FilterItem from 'App/mstore/types/filterItem';
@@ -49,7 +49,7 @@ class SearchStoreLive {
   latestRequestTime: number | null = null;
   latestList = List();
   alertMetricId: number | null = null;
-  instance = new Search();
+  instance = new Search({ sort: 'timestamp', order: 'desc' });
   instanceLive = new Search();
   savedSearch = new Search();
   filterSearchList: any = {};
@@ -63,11 +63,29 @@ class SearchStoreLive {
 
   constructor() {
     makeAutoObservable(this);
+
+    // Reset currentPage to 1 only on filter changes
+    reaction(
+      () => this.instance,
+      () => {
+        this.currentPage = 1;
+        void this.fetchSessions();
+      }
+    );
+
+    // Fetch sessions when currentPage changes
+    reaction(
+      () => this.currentPage,
+      () => {
+        void this.fetchSessions();
+      }
+    );
   }
 
   get filterList() {
     return generateFilterOptions(filtersMap);
   }
+
   get filterListLive() {
     return generateFilterOptions(liveFiltersMap);
   }
@@ -96,14 +114,12 @@ class SearchStoreLive {
 
   edit(instance: Partial<Search>) {
     this.instance = new Search(Object.assign({ ...this.instance }, instance));
-    this.currentPage = 1;
   }
 
 
   apply(filter: any, fromUrl: boolean) {
     if (fromUrl) {
       this.instance = new Search(filter);
-      this.currentPage = 1;
     } else {
       this.instance = { ...this.instance, ...filter };
     }
@@ -115,7 +131,6 @@ class SearchStoreLive {
 
   updateCurrentPage(page: number) {
     this.currentPage = page;
-    this.fetchSessions();
   }
 
   clearSearch() {
@@ -140,22 +155,25 @@ class SearchStoreLive {
       : null;
 
     if (index > -1) {
-      const oldFilter = this.instance.filters[index];
-      const updatedFilter = {
-        ...oldFilter,
-        value: oldFilter.value.concat(filter.value)
+      // Update existing filter
+      // @ts-ignore
+      this.instance.filters[index] = {
+        ...this.instance.filters[index],
+        value: this.instance.filters[index].value.concat(filter.value)
       };
-      oldFilter.merge(updatedFilter);
     } else {
-      this.instance.filters.push(filter);
-      this.instance = new Search({
-        ...this.instance.toData()
-      });
+      // Add new filter (create a new array reference to notify MobX)
+      this.instance.filters = [...this.instance.filters, filter];
     }
 
-    if (filter.value && filter.value[0] && filter.value[0] !== '') {
-      this.fetchSessions();
-    }
+    // Update the instance to trigger reactions
+    this.instance = new Search({
+      ...this.instance.toData()
+    });
+
+    // if (filter.value && filter.value[0] && filter.value[0] !== '') {
+    //   void this.fetchSessions();
+    // }
   }
 
   addFilterByKeyAndValue(key: any, value: any, operator?: string, sourceOperator?: string, source?: string) {
@@ -200,7 +218,7 @@ class SearchStoreLive {
   };
 
   async fetchSessions() {
-    await sessionStore.fetchLiveSessions(this.instance.toSearch());
+    await sessionStore.fetchLiveSessions({ ...this.instance.toSearch(), page: this.currentPage });
   };
 }
 

frontend/app/mstore/sessionStore.ts

@@ -94,12 +94,19 @@ class DevTools {
   }
 }
 
-
+interface Bookmarks {
+  list: Session[];
+  page: number;
+  total: number;
+  pageSize: number;
+  loading: boolean;
+}
 
 export default class SessionStore {
   userFilter: UserFilter = new UserFilter();
   devTools: DevTools = new DevTools();
   list: Session[] = [];
+  bookmarks: Bookmarks = { list: [], page: 1, total: 0, pageSize: 10, loading: false };
   sessionIds: string[] = [];
   current = new Session();
   total = 0;
@@ -170,7 +177,7 @@ export default class SessionStore {
     }
     const nextEntryNum =
       keys.length > 0
-      ? Math.max(...keys.map((key) => this.prefetchedMobUrls[key].entryNum || 0)) + 1
+      ? Math.max(...keys.map((key) => this.prefetchedMobUrls[key]?.entryNum || 0)) + 1
       : 0;
     this.prefetchedMobUrls[sessionId] = {
       data: fileData,
@@ -194,11 +201,15 @@ export default class SessionStore {
     });
   }
 
-  fetchLiveSessions = async (params = {}) => {
+  fetchLiveSessions = async (params: any = {}) => {
     runInAction(() => {
       this.loadingLiveSessions = true;
     })
     try {
+      if (params.sort === 'duration') { // TODO ui hack to sort by duration, should be removed once the api addressed this issue
+        params.sort = 'timestamp';
+        params.order = params.order === 'asc' ? 'desc' : 'asc';
+      }
       const data: any = await sessionService.getLiveSessions(params);
       this.liveSessions = data.sessions.map((session: any) => new Session({ ...session, live: true }));
       this.totalLiveSessions = data.total;
@@ -529,9 +540,33 @@ export default class SessionStore {
     this.list = [];
     this.total = 0;
     this.sessionIds = [];
+    this.bookmarks = { list: [], page: 1, total: 0, pageSize: 10, loading: false };
   }
 
   setLastPlayedSessionId = (sessionId: string) => {
     this.lastPlayedSessionId = sessionId;
   }
+
+  async fetchBookmarkedSessions() {
+    try {
+      this.bookmarks.loading = true;
+      const params = {
+        page: this.bookmarks.page,
+        limit: this.bookmarks.pageSize,
+        bookmarked: true,
+      }
+      const data = await sessionService.getSessions(params);
+      this.bookmarks.list = data.sessions.map((s: any) => new Session(s));
+      this.bookmarks.total = data.total;
+    } catch (e) {
+      console.error(e);
+    } finally {
+      this.bookmarks.loading = false;
+    }
+  }
+
+  updateBookmarksPage(page: number) {
+    this.bookmarks.page = page;
+    void this.fetchBookmarkedSessions();
+  }
 }