ui: add network batcher for 1.21

Add a helper template to allow customizing the assets origin URL.
This gives users the ability to override the default S3 endpoint
construction when needed, while maintaining backward compatibility.
This can be used when try to use proxy the bucket like cloudfront or
some custom domain.

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>

.github/workflows/api-ee.yaml

@@ -10,8 +10,6 @@ on:
     branches:
       - dev
       - api-*
-      - v1.11.0-patch
-      - actions_test
     paths:
       - "ee/api/**"
       - "api/**"

.github/workflows/api.yaml

@@ -10,7 +10,6 @@ on:
     branches:
       - dev
       - api-*
-      - v1.11.0-patch
     paths:
       - "api/**"
       - "!api/.gitignore"

.github/workflows/assist-ee.yaml

@@ -9,7 +9,6 @@ on:
   push:
     branches:
       - dev
-      - api-*
     paths:
       - "ee/assist/**"
       - "assist/**"

.github/workflows/assist.yaml

@@ -9,7 +9,6 @@ on:
   push:
     branches:
       - dev
-      - api-*
     paths:
       - "assist/**"
       - "!assist/.gitignore"

.github/workflows/crons-ee.yaml

@@ -10,7 +10,6 @@ on:
     branches:
       - dev
       - api-*
-      - v1.11.0-patch
     paths:
       - "ee/api/**"
       - "api/**"

.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

.github/workflows/peers-ee.yaml

@@ -9,7 +9,6 @@ on:
   push:
     branches:
       - dev
-      - api-*
     paths:
       - "ee/peers/**"
       - "peers/**"

.github/workflows/peers.yaml

@@ -9,7 +9,6 @@ on:
   push:
     branches:
       - dev
-      - api-*
     paths:
       - "peers/**"
       - "!peers/.gitignore"

.github/workflows/release-deployment.yaml

@@ -0,0 +1,92 @@
+name: Release Deployment
+
+on:
+  workflow_dispatch:
+    inputs:
+      services:
+        description: 'Comma-separated list of services to deploy'
+        required: true
+      branch:
+        description: 'Branch to deploy (defaults to dev)'
+        required: false
+        default: 'dev'
+
+env:
+  IMAGE_REGISTRY_URL: ${{ secrets.OSS_REGISTRY_URL }}
+  DEPOT_PROJECT_ID: ${{ secrets.DEPOT_PROJECT_ID }}
+  DOCKER_REPO_OSS: ${{ secrets.OSS_REGISTRY_URL }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.inputs.branch }}
+    - name: Docker login
+      run: |
+        docker login ${{ secrets.OSS_REGISTRY_URL }} -u ${{ secrets.OSS_DOCKER_USERNAME }} -p "${{ secrets.OSS_REGISTRY_TOKEN }}"
+
+    - name: Set image tag with branch info
+      run: |
+        SHORT_SHA=$(git rev-parse --short HEAD)
+        echo "IMAGE_TAG=${IMAGE_TAG}-${{ github.event.inputs.branch }}-${SHORT_SHA}" >> $GITHUB_ENV
+        echo "Using image tag: ${IMAGE_TAG}-${{ github.event.inputs.branch }}-${SHORT_SHA}"
+
+    - uses: depot/setup-action@v1
+
+    - name: Build and push Docker images
+      run: |
+        # Parse the comma-separated services list into an array
+        IFS=',' read -ra SERVICES <<< "${{ github.event.inputs.services }}"
+        
+        # Define backend services (consider moving this to workflow inputs or repo config)
+        ls backend/cmd >> /tmp/backend.txt
+        
+        for SERVICE in "${SERVICES[@]}"; do
+          # Check if service is backend
+          if grep -q $SERVICE /tmp/backend.txt; then 
+            cd backend 
+            foss_build_args="nil $SERVICE"
+            ee_build_args="ee $SERVICE"
+          else 
+            [[ $SERVICE == 'chalice' || $SERVICE == 'alerts' || $SERVICE == 'crons' ]] && cd $working_dir/api || cd $SERVICE
+            [[ $SERVICE == 'alerts' || $SERVICE == 'crons' ]] && BUILD_SCRIPT_NAME="build_${SERVICE}.sh"
+            ee_build_args="ee"
+          fi  
+          echo IMAGE_TAG=$IMAGE_TAG DOCKER_RUNTIME="depot" DOCKER_BUILD_ARGS="--push" ARCH=amd64 DOCKER_REPO=$DOCKER_REPO_OSS PUSH_IMAGE=0 bash ${BUILD_SCRIPT_NAME} $foss_build_args
+          IMAGE_TAG=$IMAGE_TAG DOCKER_RUNTIME="depot" DOCKER_BUILD_ARGS="--push" ARCH=amd64 DOCKER_REPO=$DOCKER_REPO_OSS PUSH_IMAGE=0 bash ${BUILD_SCRIPT_NAME} $foss_build_args
+        done
+          
+    - uses: azure/k8s-set-context@v1
+      name: Using ee release cluster
+      with:
+        method: kubeconfig
+        kubeconfig: ${{ secrets.EE_RELEASE_KUBECONFIG }}
+
+    - name: Deploy to ee release Kubernetes
+      run: |
+        echo "Deploying services to EE cluster: ${{ github.event.inputs.services }}"
+        IFS=',' read -ra SERVICES <<< "${{ github.event.inputs.services }}" 
+        for SERVICE in "${SERVICES[@]}"; do
+          SERVICE=$(echo $SERVICE | xargs) # Trim whitespace
+          echo "Deploying $SERVICE to EE cluster with image tag: ${IMAGE_TAG}"
+          kubectl set image deployment/$SERVICE-openreplay -n app $SERVICE=${{ secrets.RELEASE_OSS_REGISTRY }}/$SERVICE:${IMAGE_TAG}
+        done
+
+    - uses: azure/k8s-set-context@v1
+      name: Using foss release cluster
+      with:
+        method: kubeconfig
+        kubeconfig: ${{ secrets.FOSS_RELEASE_KUBECONFIG }}
+
+    - name: Deploy to FOSS release Kubernetes
+      run: |
+        echo "Deploying services to FOSS cluster: ${{ github.event.inputs.services }}"
+        IFS=',' read -ra SERVICES <<< "${{ github.event.inputs.services }}" 
+        for SERVICE in "${SERVICES[@]}"; do
+          SERVICE=$(echo $SERVICE | xargs) # Trim whitespace
+          echo "Deploying $SERVICE to FOSS cluster with image tag: ${IMAGE_TAG}"
+          kubectl set image deployment/$SERVICE-openreplay -n app $SERVICE=${{ secrets.RELEASE_OSS_REGISTRY }}/$SERVICE:${IMAGE_TAG}
+        done

.github/workflows/sourcemaps-reader-ee.yaml

@@ -9,7 +9,6 @@ on:
   push:
     branches:
       - dev
-      - api-*
     paths:
       - "sourcemap-reader/**"
       - "!sourcemap-reader/.gitignore"

.github/workflows/sourcemaps-reader.yaml

@@ -9,7 +9,6 @@ on:
   push:
     branches:
       - dev
-      - api-*
     paths:
       - "sourcemap-reader/**"
       - "!sourcemap-reader/.gitignore"

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/AssistSessionsModal/AssistSessionsModal.tsx

@@ -33,8 +33,8 @@ function AssistSessionsModal(props: ConnectProps) {
 
   const sortOptions = metaList
     .map((i: any) => ({
-      label: capitalize(i),
-      value: i
+      label: capitalize(i.key),
+      value: i.key
     }));
 
   React.useEffect(() => {

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,9 +1,16 @@
+/* eslint-disable i18next/no-literal-string */
 import { ResourceType, Timed } from 'Player';
+import { WsChannel } from 'Player/web/messages';
 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';
+import React, {
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from 'react';
 
 import { useModal } from 'App/components/Modal';
 import {
@@ -12,22 +19,26 @@ import {
 } from 'App/components/Session/playerContext';
 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 { formatBytes, debounceCall } from 'App/utils';
+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 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';
+import { mergeListsWithZoom, processInChunks } from './utils'
 
+// Constants remain the same
 const INDEX_KEY = 'network';
-
 const ALL = 'ALL';
 const XHR = 'xhr';
 const JS = 'js';
@@ -36,6 +47,7 @@ const IMG = 'img';
 const MEDIA = 'media';
 const OTHER = 'other';
 const WS = 'websocket';
+const GRAPHQL = 'graphql';
 
 const TYPE_TO_TAB = {
   [ResourceType.XHR]: XHR,
@@ -46,9 +58,10 @@ const TYPE_TO_TAB = {
   [ResourceType.MEDIA]: MEDIA,
   [ResourceType.WS]: WS,
   [ResourceType.OTHER]: OTHER,
+  [ResourceType.GRAPHQL]: GRAPHQL,
 };
 
-const TAP_KEYS = [ALL, XHR, JS, CSS, IMG, MEDIA, OTHER, WS] as const;
+const TAP_KEYS = [ALL, XHR, JS, CSS, IMG, MEDIA, OTHER, WS, GRAPHQL] as const;
 export const NETWORK_TABS = TAP_KEYS.map((tab) => ({
   text: tab === 'xhr' ? 'Fetch/XHR' : tab,
   key: tab,
@@ -57,11 +70,8 @@ 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;
-}
+const BATCH_SIZE = 2500;
+const INITIAL_LOAD_SIZE = 5000;
 
 export function renderType(r: any) {
   return (
@@ -79,21 +89,17 @@ 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);
+  const notCaptured = 'Not captured';
+  const resSizeStr = 'Resource size'
   let triggerText;
   let content;
-  if (r.decodedBodySize == null || r.decodedBodySize === 0) {
+  if (r.responseBodySize) {
+    triggerText = formatBytes(r.responseBodySize);
+    content = undefined;
+  } else if (r.decodedBodySize == null || r.decodedBodySize === 0) {
     triggerText = 'x';
-    content = 'Not captured';
+    content = notCaptured;
   } else {
     const headerSize = r.headerSize || 0;
     const showTransferred = r.headerSize != null;
@@ -102,11 +108,13 @@ function renderSize(r: any) {
     content = (
       <ul>
         {showTransferred && (
-          <li>{`${formatBytes(
-            r.encodedBodySize + headerSize
-          )} transferred over network`}</li>
+          <li>
+            {`${formatBytes(
+              r.encodedBodySize + headerSize,
+            )} transferred over network`}
+          </li>
         )}
-        <li>{`Resource size: ${formatBytes(r.decodedBodySize)} `}</li>
+        <li>{`${resSizeStr}: ${formatBytes(r.decodedBodySize)} `}</li>
       </ul>
     );
   }
@@ -125,13 +133,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,56 +156,78 @@ function renderStatus({
   error?: string;
 }) {
   const displayedStatus = error ? (
-    <Tooltip delay={0} title={error}>
-      <div
-        style={{ width: 90 }}
-        className={'overflow-hidden overflow-ellipsis'}
-      >
+    <Tooltip title={error}>
+      <div style={{ width: 90 }} className="overflow-hidden overflow-ellipsis">
         {error}
       </div>
     </Tooltip>
-  ) : (
-    status
-  );
+  ) : (status);
   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} />
           </div>
         </Tooltip>
       ) : (
-        displayedStatus
-      )}
+         displayedStatus
+       )}
     </>
   );
 }
 
-function NetworkPanelCont({
-  panelHeight,
-}: {
-  panelHeight: number;
-}) {
+
+// Main component for Network Panel
+function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
   const { player, store } = React.useContext(PlayerContext);
-  const { sessionStore } = useStore();
-  const startedAt = sessionStore.current.startedAt;
+  const { sessionStore, uiPlayerStore } = useStore();
+
+  const { startedAt } = sessionStore.current;
   const {
     domContentLoadedTime,
     loadTime,
     domBuildingTime,
     tabStates,
     currentTab,
+    tabNames,
   } = store.get();
-  const {
-    fetchList = [],
-    resourceList = [],
-    fetchListNow = [],
-    resourceListNow = [],
-    websocketList = [],
-    websocketListNow = [],
-  } = tabStates[currentTab];
+  const tabsArr = Object.keys(tabStates);
+  const tabValues = Object.values(tabStates);
+  const { dataSource } = uiPlayerStore;
+  const showSingleTab = dataSource === 'current';
+
+  let fetchList = [];
+  let resourceList = [];
+  let fetchListNow = [];
+  let resourceListNow = [];
+  let websocketList = [];
+  let websocketListNow = [];
+
+  if (showSingleTab) {
+    const state = tabStates[currentTab] ?? {};
+    fetchList = state.fetchList ?? [];
+    resourceList = state.resourceList ?? [];
+    fetchListNow = state.fetchListNow ?? [];
+    resourceListNow = state.resourceListNow ?? [];
+    websocketList = state.websocketList ?? [];
+    websocketListNow = state.websocketListNow ?? [];
+  } else {
+    fetchList = tabValues.flatMap((tab) => tab.fetchList);
+    resourceList = tabValues.flatMap((tab) => tab.resourceList);
+    fetchListNow = tabValues.flatMap((tab) => tab.fetchListNow).filter(Boolean);
+    resourceListNow = tabValues
+      .flatMap((tab) => tab.resourceListNow)
+      .filter(Boolean);
+    websocketList = tabValues.flatMap((tab) => tab.websocketList);
+    websocketListNow = tabValues
+      .flatMap((tab) => tab.websocketListNow)
+      .filter(Boolean);
+  }
+
+  const getTabNum = (tab: string) => tabsArr.findIndex((t) => t === tab) + 1;
+  const getTabName = (tabId: string) => tabNames[tabId];
 
   return (
     <NetworkPanelComp
@@ -214,20 +241,19 @@ function NetworkPanelCont({
       resourceListNow={resourceListNow}
       player={player}
       startedAt={startedAt}
-      websocketList={websocketList as WSMessage[]}
-      websocketListNow={websocketListNow as WSMessage[]}
+      websocketList={websocketList}
+      websocketListNow={websocketListNow}
+      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;
+  const { startedAt } = sessionStore.current;
   const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
   const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
   const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
@@ -256,9 +282,7 @@ function MobileNetworkPanelCont({
       resourceListNow={resourceListNow}
       player={player}
       startedAt={startedAt}
-      // @ts-ignore
       websocketList={websocketList}
-      // @ts-ignore
       websocketListNow={websocketListNow}
       zoomEnabled={zoomEnabled}
       zoomStartTs={zoomStartTs}
@@ -267,12 +291,35 @@ function MobileNetworkPanelCont({
   );
 }
 
-type WSMessage = Timed & {
-  channelName: string;
-  data: string;
-  timestamp: number;
-  dir: 'up' | 'down';
-  messageType: string;
+const useInfiniteScroll = (loadMoreCallback: () => void, hasMore: boolean) => {
+  const observerRef = useRef<IntersectionObserver>(null);
+  const loadingRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && hasMore) {
+          loadMoreCallback();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (loadingRef.current) {
+      observer.observe(loadingRef.current);
+    }
+
+    // @ts-ignore
+    observerRef.current = observer;
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [loadMoreCallback, hasMore, loadingRef]);
+
+  return loadingRef;
 };
 
 interface Props {
@@ -289,8 +336,8 @@ interface Props {
   resourceList: Timed[];
   fetchListNow: Timed[];
   resourceListNow: Timed[];
-  websocketList: Array<WSMessage>;
-  websocketListNow: Array<WSMessage>;
+  websocketList: Array<WsChannel>;
+  websocketListNow: Array<WsChannel>;
   player: WebPlayer | MobilePlayer;
   startedAt: number;
   isMobile?: boolean;
@@ -301,6 +348,9 @@ interface Props {
   onClose?: () => void;
   activeOutsideIndex?: number;
   isSpot?: boolean;
+  getTabNum?: (tab: string) => number;
+  getTabName?: (tabId: string) => string;
+  showSingleTab?: boolean;
 }
 
 export const NetworkPanelComp = observer(
@@ -323,116 +373,204 @@ 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);
-
     const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [displayedItems, setDisplayedItems] = useState([]);
+    const [totalItems, setTotalItems] = useState(0);
+    const [summaryStats, setSummaryStats] = useState({
+      resourcesSize: 0,
+      transferredSize: 0,
+    });
+
+    // Store original data in refs to avoid reprocessing
+    const originalListRef = useRef([]);
+    const socketListRef = useRef([]);
+
     const {
       sessionStore: { devTools },
     } = useStore();
-    const filter = devTools[INDEX_KEY].filter;
-    const activeTab = devTools[INDEX_KEY].activeTab;
+    const { filter } = devTools[INDEX_KEY];
+    const { activeTab } = devTools[INDEX_KEY];
     const activeIndex = activeOutsideIndex ?? devTools[INDEX_KEY].index;
+    const [inputFilterValue, setInputFilterValue] = useState(filter);
 
-    const socketList = useMemo(
-      () =>
-        websocketList.filter(
-          (ws, i, arr) =>
-            arr.findIndex((it) => it.channelName === ws.channelName) === i
-        ),
-      [websocketList]
+    const debouncedFilter = useCallback(
+      debounceCall((filterValue) => {
+        devTools.update(INDEX_KEY, { filter: filterValue });
+      }, 300),
+      [],
     );
 
-    const list = useMemo(
-      () =>
-        // TODO: better merge (with body size info) - do it in player
-        resourceList
-          .filter(
-            (res) =>
-              !fetchList.some((ft) => {
-                // res.url !== ft.url doesn't work on relative URLs appearing within fetchList (to-fix in player)
-                if (res.name === ft.name) {
-                  if (res.time === ft.time) return true;
-                  if (res.url.includes(ft.url)) {
-                    return (
-                      Math.abs(res.time - ft.time) < 350 ||
-                      Math.abs(res.timestamp - ft.timestamp) < 350
-                    );
-                  }
-                }
-
-                if (res.name !== ft.name) {
-                  return false;
-                }
-                if (Math.abs(res.time - ft.time) > 250) {
-                  return false;
-                } // TODO: find good epsilons
-                if (Math.abs(res.duration - ft.duration) > 200) {
-                  return false;
-                }
-
-                return true;
-              })
-          )
-          .concat(fetchList)
-          .concat(
-            socketList.map((ws) => ({
-              ...ws,
-              type: 'websocket',
-              method: 'ws',
-              url: ws.channelName,
-              name: ws.channelName,
-              status: '101',
-              duration: 0,
-              transferredBodySize: 0,
-            }))
-          )
-          .filter((req) =>
-            zoomEnabled
-              ? req.time >= zoomStartTs! && req.time <= zoomEndTs!
-              : true
-          )
-          .sort((a, b) => a.time - b.time),
-      [resourceList.length, fetchList.length, socketList]
-    );
-
-    let filteredList = useMemo(() => {
-      if (!showOnlyErrors) {
-        return list;
-      }
-      return list.filter(
-        (it) => parseInt(it.status) >= 400 || !it.success || it.error
+    // Process socket lists once
+    useEffect(() => {
+      const uniqueSocketList = websocketList.filter(
+        (ws, i, arr) =>
+          arr.findIndex((it) => it.channelName === ws.channelName) === i,
       );
-    }, [showOnlyErrors, list]);
-    filteredList = useRegExListFilterMemo(
-      filteredList,
-      (it) => [it.status, it.name, it.type, it.method],
-      filter
-    );
-    filteredList = useTabListFilterMemo(
-      filteredList,
-      (it) => TYPE_TO_TAB[it.type],
-      ALL,
-      activeTab
-    );
+      socketListRef.current = uniqueSocketList;
+    }, [websocketList.length]);
 
-    const onTabClick = (activeTab: (typeof TAP_KEYS)[number]) =>
+    // Initial data processing - do this only once when data changes
+    useEffect(() => {
+      setIsLoading(true);
+
+      // Heaviest operation here, will create a final merged network list
+      const processData = async () => {
+        const fetchUrls = new Set(
+          fetchList.map((ft) => {
+            return `${ft.name}-${Math.floor(ft.time / 100)}-${Math.floor(ft.duration / 100)}`;
+          }),
+        );
+
+        // We want to get resources that aren't in fetch list
+        const filteredResources = await processInChunks(resourceList, (chunk) =>
+            chunk.filter((res: any) => {
+              const key = `${res.name}-${Math.floor(res.time / 100)}-${Math.floor(res.duration / 100)}`;
+              return !fetchUrls.has(key);
+            }),
+          BATCH_SIZE,
+          25,
+        );
+
+        const processedSockets = socketListRef.current.map((ws: any) => ({
+          ...ws,
+          type: 'websocket',
+          method: 'ws',
+          url: ws.channelName,
+          name: ws.channelName,
+          status: '101',
+          duration: 0,
+          transferredBodySize: 0,
+        }));
+
+        const mergedList: Timed[] = mergeListsWithZoom(
+          filteredResources as Timed[],
+          fetchList,
+          processedSockets as Timed[],
+          { enabled: Boolean(zoomEnabled), start: zoomStartTs ?? 0, end: zoomEndTs ?? 0 }
+        )
+
+        originalListRef.current = mergedList;
+        setTotalItems(mergedList.length);
+
+        calculateResourceStats(resourceList);
+
+        // Only display initial chunk
+        setDisplayedItems(mergedList.slice(0, INITIAL_LOAD_SIZE));
+        setIsLoading(false);
+      };
+
+      void processData();
+    }, [
+      resourceList.length,
+      fetchList.length,
+      socketListRef.current.length,
+      zoomEnabled,
+      zoomStartTs,
+      zoomEndTs,
+    ]);
+
+    const calculateResourceStats = (resourceList: Record<string, any>) => {
+      setTimeout(() => {
+        let resourcesSize = 0
+        let transferredSize = 0
+        resourceList.forEach(({ decodedBodySize, headerSize, encodedBodySize }: any) => {
+          resourcesSize += decodedBodySize || 0
+          transferredSize += (headerSize || 0) + (encodedBodySize || 0)
+        })
+
+        setSummaryStats({
+          resourcesSize,
+          transferredSize,
+        });
+      }, 0);
+    }
+
+    useEffect(() => {
+      if (originalListRef.current.length === 0) return;
+      setIsProcessing(true);
+      const applyFilters = async () => {
+        let filteredItems: any[] = originalListRef.current;
+
+        filteredItems = await processInChunks(filteredItems, (chunk) =>
+          chunk.filter(
+            (it) => {
+              let valid = true;
+              if (showOnlyErrors) {
+                valid = parseInt(it.status) >= 400 || !it.success || it.error
+              }
+              if (filter) {
+                try {
+                  const regex = new RegExp(filter, 'i');
+                  valid = valid && regex.test(it.status) || regex.test(it.name) || regex.test(it.type) || regex.test(it.method);
+                } catch (e) {
+                  valid = valid && String(it.status).includes(filter) || it.name.includes(filter) || it.type.includes(filter) || (it.method && it.method.includes(filter));
+                }
+              }
+              if (activeTab !== ALL) {
+                valid = valid && TYPE_TO_TAB[it.type] === activeTab;
+              }
+
+              return valid;
+            },
+          ),
+        );
+
+        // Update displayed items
+        setDisplayedItems(filteredItems.slice(0, INITIAL_LOAD_SIZE));
+        setTotalItems(filteredItems.length);
+        setIsProcessing(false);
+      };
+
+      void applyFilters();
+    }, [filter, activeTab, showOnlyErrors]);
+
+    const loadMoreItems = useCallback(() => {
+      if (isProcessing) return;
+
+      setIsProcessing(true);
+      setTimeout(() => {
+        setDisplayedItems((prevItems) => {
+          const currentLength = prevItems.length;
+          const newItems = originalListRef.current.slice(
+            currentLength,
+            currentLength + BATCH_SIZE,
+          );
+          return [...prevItems, ...newItems];
+        });
+        setIsProcessing(false);
+      }, 10);
+    }, [isProcessing]);
+
+    const hasMoreItems = displayedItems.length < totalItems;
+    const loadingRef = useInfiniteScroll(loadMoreItems, hasMoreItems);
+
+    const onTabClick = (activeTab) => {
       devTools.update(INDEX_KEY, { activeTab });
-    const onFilterChange = ({
-      target: { value },
-    }: React.ChangeEvent<HTMLInputElement>) =>
-      devTools.update(INDEX_KEY, { filter: value });
+    };
+
+    const onFilterChange = ({ target: { value } }) => {
+      setInputFilterValue(value)
+      debouncedFilter(value);
+    };
 
-    // AutoScroll
     const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
-      filteredList,
+      displayedItems,
       getLastItemTime(fetchListNow, resourceListNow),
       activeIndex,
-      (index) => devTools.update(INDEX_KEY, { index })
+      (index) => devTools.update(INDEX_KEY, { index }),
     );
-    const onMouseEnter = stopAutoscroll;
+    const onMouseEnter = () => stopAutoscroll;
     const onMouseLeave = () => {
       if (isDetailsModalActive) {
         return;
@@ -440,24 +578,6 @@ export const NetworkPanelComp = observer(
       timeoutStartAutoscroll();
     };
 
-    const resourcesSize = useMemo(
-      () =>
-        resourceList.reduce(
-          (sum, { decodedBodySize }) => sum + (decodedBodySize || 0),
-          0
-        ),
-      [resourceList.length]
-    );
-    const transferredSize = useMemo(
-      () =>
-        resourceList.reduce(
-          (sum, { headerSize, encodedBodySize }) =>
-            sum + (headerSize || 0) + (encodedBodySize || 0),
-          0
-        ),
-      [resourceList.length]
-    );
-
     const referenceLines = useMemo(() => {
       const arr = [];
 
@@ -480,10 +600,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(
@@ -491,7 +611,7 @@ export const NetworkPanelComp = observer(
           isSpot={isSpot}
           time={item.time + startedAt}
           resource={item}
-          rows={filteredList}
+          rows={displayedItems}
           fetchPresented={fetchList.length > 0}
         />,
         {
@@ -501,12 +621,70 @@ export const NetworkPanelComp = observer(
             setIsDetailsModalActive(false);
             timeoutStartAutoscroll();
           },
-        }
+        },
       );
-      devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+      devTools.update(INDEX_KEY, { index: displayedItems.indexOf(item) });
       stopAutoscroll();
     };
 
+    const tableCols = useMemo(() => {
+      const cols = [
+        {
+          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, activeTab, getTabName, getTabNum, isSpot]);
+
     return (
       <BottomBlock
         style={{ height: '100%' }}
@@ -517,7 +695,7 @@ export const NetworkPanelComp = observer(
         <BottomBlock.Header onClose={onClose}>
           <div className="flex items-center">
             <span className="font-semibold color-gray-medium mr-4">
-              Network
+              {'Network'}
             </span>
             {isMobile ? null : (
               <Tabs
@@ -529,41 +707,62 @@ 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={inputFilterValue}
+              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"
-              />
+            <div className="flex items-center">
+              <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>
+
+              {isProcessing && (
+                <span className="text-xs text-gray-500 ml-4">
+                  Processing data...
+                </span>
+              )}
             </div>
             <InfoLine>
+              <InfoLine.Point label={`${totalItems}`} value="requests" />
               <InfoLine.Point
-                label={filteredList.length + ''}
-                value=" requests"
+                label={`${displayedItems.length}/${totalItems}`}
+                value="displayed"
+                display={displayedItems.length < totalItems}
               />
               <InfoLine.Point
-                label={formatBytes(transferredSize)}
+                label={formatBytes(summaryStats.transferredSize)}
                 value="transferred"
-                display={transferredSize > 0}
+                display={summaryStats.transferredSize > 0}
               />
               <InfoLine.Point
-                label={formatBytes(resourcesSize)}
+                label={formatBytes(summaryStats.resourcesSize)}
                 value="resources"
-                display={resourcesSize > 0}
+                display={summaryStats.resourcesSize > 0}
               />
               <InfoLine.Point
                 label={formatMs(domBuildingTime)}
@@ -586,89 +785,74 @@ export const NetworkPanelComp = observer(
               />
             </InfoLine>
           </div>
-          <NoContent
-            title={
-              <div className="capitalize flex items-center">
-                <Icon name="info-circle" className="mr-2" size="18" />
-                No Data
+
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-2"></div>
+                <p>Processing initial network data...</p>
               </div>
-            }
-            size="small"
-            show={filteredList.length === 0}
-          >
-            {/*@ts-ignore*/}
-            <TimeTable
-              rows={filteredList}
-              tableHeight={panelHeight - 102}
-              referenceLines={referenceLines}
-              renderPopup
-              onRowClick={showDetailsModal}
-              sortBy={'time'}
-              sortAscending
-              onJump={(row: any) => {
-                devTools.update(INDEX_KEY, {
-                  index: filteredList.indexOf(row),
-                });
-                player.jump(row.time);
-              }}
-              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,
-                },
-              ]}
-            </TimeTable>
-            {selectedWsChannel ? (
-              <WSPanel socketMsgList={selectedWsChannel} onClose={() => setSelectedWsChannel(null)} />
-            ) : null}
-          </NoContent>
+            </div>
+          ) : (
+             <NoContent
+               title={
+                 <div className="capitalize flex items-center gap-2">
+                   <InfoCircleOutlined size={18} />
+                   {'No Data'}
+                 </div>
+               }
+               size="small"
+               show={displayedItems.length === 0}
+             >
+               <div>
+                 <TimeTable
+                   rows={displayedItems}
+                   tableHeight={panelHeight - 102 - (hasMoreItems ? 30 : 0)}
+                   referenceLines={referenceLines}
+                   renderPopup
+                   onRowClick={showDetailsModal}
+                   sortBy="time"
+                   sortAscending
+                   onJump={(row) => {
+                     devTools.update(INDEX_KEY, {
+                       index: displayedItems.indexOf(row),
+                     });
+                     player.jump(row.time);
+                   }}
+                   activeIndex={activeIndex}
+                 >
+                   {tableCols}
+                 </TimeTable>
+
+                 {hasMoreItems && (
+                   <div
+                     ref={loadingRef}
+                     className="flex justify-center items-center text-xs text-gray-500"
+                   >
+                     <div className="flex items-center">
+                       <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"></div>
+                       Loading more data ({totalItems - displayedItems.length}{' '}
+                       remaining)
+                     </div>
+                   </div>
+                 )}
+               </div>
+
+               {selectedWsChannel ? (
+                 <WSPanel
+                   socketMsgList={selectedWsChannel}
+                   onClose={() => setSelectedWsChannel(null)}
+                 />
+               ) : null}
+             </NoContent>
+           )}
         </BottomBlock.Content>
       </BottomBlock>
     );
-  }
+  },
 );
 
 const WebNetworkPanel = observer(NetworkPanelCont);
-
 const MobileNetworkPanel = observer(MobileNetworkPanelCont);
 
-export { WebNetworkPanel, MobileNetworkPanel };
+export { WebNetworkPanel, MobileNetworkPanel };

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/NetworkPanel/utils.ts

@@ -0,0 +1,175 @@
+export function mergeListsWithZoom<
+  T extends Record<string, any>,
+  Y extends Record<string, any>,
+  Z extends Record<string, any>,
+>(
+  arr1: T[],
+  arr2: Y[],
+  arr3: Z[],
+  zoom?: { enabled: boolean; start: number; end: number },
+): Array<T | Y | Z> {
+  // Early return for empty arrays
+  if (arr1.length === 0 && arr2.length === 0 && arr3.length === 0) {
+    return [];
+  }
+
+  if (!zoom?.enabled) {
+    return mergeThreeSortedArrays(arr1, arr2, arr3);
+  }
+
+  // Binary search for start indexes (faster than linear search for large arrays)
+  const index1 = binarySearchStartIndex(arr1, zoom.start);
+  const index2 = binarySearchStartIndex(arr2, zoom.start);
+  const index3 = binarySearchStartIndex(arr3, zoom.start);
+
+  // Merge arrays within zoom range
+  return mergeThreeSortedArraysWithinRange(
+    arr1,
+    arr2,
+    arr3,
+    index1,
+    index2,
+    index3,
+    zoom.start,
+    zoom.end,
+  );
+}
+
+function binarySearchStartIndex<T extends Record<string, any>>(
+  arr: T[],
+  threshold: number,
+): number {
+  if (arr.length === 0) return 0;
+
+  let low = 0;
+  let high = arr.length - 1;
+
+  // Handle edge cases first for better performance
+  if (arr[high].time < threshold) return arr.length;
+  if (arr[low].time >= threshold) return 0;
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+
+    if (arr[mid].time < threshold) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+
+  return low;
+}
+
+function mergeThreeSortedArrays<
+  T extends Record<string, any>,
+  Y extends Record<string, any>,
+  Z extends Record<string, any>,
+>(arr1: T[], arr2: Y[], arr3: Z[]): Array<T | Y | Z> {
+  const totalLength = arr1.length + arr2.length + arr3.length;
+  const result = new Array(totalLength);
+
+  let i = 0,
+    j = 0,
+    k = 0,
+    index = 0;
+
+  while (i < arr1.length || j < arr2.length || k < arr3.length) {
+    const val1 = i < arr1.length ? arr1[i].time : Infinity;
+    const val2 = j < arr2.length ? arr2[j].time : Infinity;
+    const val3 = k < arr3.length ? arr3[k].time : Infinity;
+
+    if (val1 <= val2 && val1 <= val3) {
+      result[index++] = arr1[i++];
+    } else if (val2 <= val1 && val2 <= val3) {
+      result[index++] = arr2[j++];
+    } else {
+      result[index++] = arr3[k++];
+    }
+  }
+
+  return result;
+}
+
+function mergeThreeSortedArraysWithinRange<
+  T extends Record<string, any>,
+  Y extends Record<string, any>,
+  Z extends Record<string, any>,
+>(
+  arr1: T[],
+  arr2: Y[],
+  arr3: Z[],
+  startIdx1: number,
+  startIdx2: number,
+  startIdx3: number,
+  start: number,
+  end: number,
+): Array<T | Y | Z> {
+  // we don't know beforehand how many items will be there
+  const result = [];
+
+  let i = startIdx1;
+  let j = startIdx2;
+  let k = startIdx3;
+
+  while (i < arr1.length || j < arr2.length || k < arr3.length) {
+    const val1 = i < arr1.length ? arr1[i].time : Infinity;
+    const val2 = j < arr2.length ? arr2[j].time : Infinity;
+    const val3 = k < arr3.length ? arr3[k].time : Infinity;
+
+    // Early termination: if all remaining values exceed end time
+    if (Math.min(val1, val2, val3) > end) {
+      break;
+    }
+
+    if (val1 <= val2 && val1 <= val3) {
+      if (val1 <= end) {
+        result.push(arr1[i]);
+      }
+      i++;
+    } else if (val2 <= val1 && val2 <= val3) {
+      if (val2 <= end) {
+        result.push(arr2[j]);
+      }
+      j++;
+    } else {
+      if (val3 <= end) {
+        result.push(arr3[k]);
+      }
+      k++;
+    }
+  }
+
+  return result;
+}
+
+export function processInChunks(
+  items: any[],
+  processFn: (item: any) => any,
+  chunkSize = 1000,
+  overscan = 0,
+) {
+  return new Promise((resolve) => {
+    if (items.length === 0) {
+      resolve([]);
+      return;
+    }
+
+    let result: any[] = [];
+    let index = 0;
+
+    const processNextChunk = () => {
+      const chunk = items.slice(index, index + chunkSize + overscan);
+      result = result.concat(processFn(chunk));
+      index += chunkSize;
+
+      if (index < items.length) {
+        setTimeout(processNextChunk, 0);
+      } else {
+        resolve(result);
+      }
+    };
+
+    processNextChunk();
+  });
+}

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);