feat: added timeline v3

feat: add text to spans
feat: flamegraph canvas init
2026-03-05 13:22:00 +00:00 · 2026-03-05 12:31:17 +05:30 · 2026-03-03 12:20:06 +05:30 · 2026-03-02 19:21:23 +05:30
481 changed files with 9350 additions and 22791 deletions
--- a/.github/workflows/build-enterprise.yaml
+++ b/.github/workflows/build-enterprise.yaml
@@ -58,19 +58,19 @@ jobs:
        run: |
          mkdir -p frontend
          echo 'CI=1' > frontend/.env
-          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
-          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
-          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
-          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
-          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
+          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
+          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
+          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
+          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
+          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
+          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
+          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
+          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
+          echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
+          echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
+          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
      - name: cache-dotenv
        uses: actions/cache@v4
        with:
--- a/.github/workflows/build-staging.yaml
+++ b/.github/workflows/build-staging.yaml
@@ -64,12 +64,12 @@ jobs:
        run: |
          mkdir -p frontend
          echo 'CI=1' > frontend/.env
-          echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
-          echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
+          echo 'TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
+          echo 'TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
+          echo 'APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
+          echo 'PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
      - name: cache-dotenv
        uses: actions/cache@v4
        with:
--- a/.github/workflows/gor-signoz.yaml
+++ b/.github/workflows/gor-signoz.yaml
@@ -24,19 +24,19 @@ jobs:
      - name: dotenv-frontend
        working-directory: frontend
        run: |
-          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
-          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
-          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
-          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
-          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
-          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
-          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
-          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
+          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
+          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
+          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
+          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
+          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
+          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
+          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
+          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
+          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
+          echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
+          echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
+          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
+          echo 'DOCS_BASE_URL="https://signoz.io"' >> .env
      - name: node-setup
        uses: actions/setup-node@v5
        with:
--- a/.github/workflows/jsci.yaml
+++ b/.github/workflows/jsci.yaml
@@ -71,50 +71,3 @@ jobs:
        uses: actions/checkout@v4
      - name: validate md languages
        run: bash frontend/scripts/validate-md-languages.sh
-  authz:
-    if: |
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v5
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-
-      - name: Install frontend dependencies
-        working-directory: ./frontend
-        run: |
-          yarn install
-
-      - name: Install uv
-        uses: astral-sh/setup-uv@v5
-
-      - name: Install Python dependencies
-        working-directory: ./tests/integration
-        run: |
-          uv sync
-
-      - name: Start test environment
-        run: |
-          make py-test-setup
-
-      - name: Generate permissions.type.ts
-        working-directory: ./frontend
-        run: |
-          yarn generate:permissions-type
-
-      - name: Teardown test environment
-        if: always()
-        run: |
-          make py-test-teardown
-
-      - name: Check for changes
-        run: |
-          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
-            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
-            exit 1
-          fi
--- a/2
+++ b/2
@@ -238,4 +238,4 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"
-	@mockery --config .mockery.yml
+	@mockery --config .mockery.yml
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -1763,134 +1763,6 @@ components:
      - type
      - orgId
      type: object
-    ServiceaccounttypesFactorAPIKey:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        expires_at:
-          minimum: 0
-          type: integer
-        id:
-          type: string
-        key:
-          type: string
-        last_used:
-          format: date-time
-          type: string
-        name:
-          type: string
-        service_account_id:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - key
-      - expires_at
-      - last_used
-      - service_account_id
-      type: object
-    ServiceaccounttypesGettableFactorAPIKeyWithKey:
-      properties:
-        id:
-          type: string
-        key:
-          type: string
-      required:
-      - id
-      - key
-      type: object
-    ServiceaccounttypesPostableFactorAPIKey:
-      properties:
-        expires_at:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-      required:
-      - name
-      - expires_at
-      type: object
-    ServiceaccounttypesPostableServiceAccount:
-      properties:
-        email:
-          type: string
-        name:
-          type: string
-        roles:
-          items:
-            type: string
-          type: array
-      required:
-      - name
-      - email
-      - roles
-      type: object
-    ServiceaccounttypesServiceAccount:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        email:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgID:
-          type: string
-        roles:
-          items:
-            type: string
-          type: array
-        status:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - email
-      - roles
-      - status
-      - orgID
-      type: object
-    ServiceaccounttypesUpdatableFactorAPIKey:
-      properties:
-        expires_at:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-      required:
-      - name
-      - expires_at
-      type: object
-    ServiceaccounttypesUpdatableServiceAccount:
-      properties:
-        email:
-          type: string
-        name:
-          type: string
-        roles:
-          items:
-            type: string
-          type: array
-      required:
-      - name
-      - email
-      - roles
-      type: object
-    ServiceaccounttypesUpdatableServiceAccountStatus:
-      properties:
-        status:
-          type: string
-      required:
-      - status
-      type: object
    TelemetrytypesFieldContext:
      enum:
      - metric
@@ -4665,586 +4537,6 @@ paths:
      summary: Patch objects for a role by relation
      tags:
      - role
-  /api/v1/service_accounts:
-    get:
-      deprecated: false
-      description: This endpoint lists the service accounts for an organisation
-      operationId: ListServiceAccounts
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/ServiceaccounttypesServiceAccount'
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: List service accounts
-      tags:
-      - serviceaccount
-    post:
-      deprecated: false
-      description: This endpoint creates a service account
-      operationId: CreateServiceAccount
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create service account
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}:
-    delete:
-      deprecated: false
-      description: This endpoint deletes an existing service account
-      operationId: DeleteServiceAccount
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Deletes a service account
-      tags:
-      - serviceaccount
-    get:
-      deprecated: false
-      description: This endpoint gets an existing service account
-      operationId: GetServiceAccount
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/ServiceaccounttypesServiceAccount'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Gets a service account
-      tags:
-      - serviceaccount
-    put:
-      deprecated: false
-      description: This endpoint updates an existing service account
-      operationId: UpdateServiceAccount
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesUpdatableServiceAccount'
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Updates a service account
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}/keys:
-    get:
-      deprecated: false
-      description: This endpoint lists the service account keys
-      operationId: ListServiceAccountKeys
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/ServiceaccounttypesFactorAPIKey'
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: List service account keys
-      tags:
-      - serviceaccount
-    post:
-      deprecated: false
-      description: This endpoint creates a service account key
-      operationId: CreateServiceAccountKey
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesPostableFactorAPIKey'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/ServiceaccounttypesGettableFactorAPIKeyWithKey'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create a service account key
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}/keys/{fid}:
-    delete:
-      deprecated: false
-      description: This endpoint revokes an existing service account key
-      operationId: RevokeServiceAccountKey
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: fid
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Revoke a service account key
-      tags:
-      - serviceaccount
-    put:
-      deprecated: false
-      description: This endpoint updates an existing service account key
-      operationId: UpdateServiceAccountKey
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: fid
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesUpdatableFactorAPIKey'
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Updates a service account key
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}/status:
-    put:
-      deprecated: false
-      description: This endpoint updates an existing service account status
-      operationId: UpdateServiceAccountStatus
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesUpdatableServiceAccountStatus'
-      responses:
-        "204":
-          content:
-            application/json:
-              schema:
-                type: string
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Updates a service account status
-      tags:
-      - serviceaccount
  /api/v1/user:
    get:
      deprecated: false
@@ -6167,10 +5459,6 @@ paths:
        name: searchText
        schema:
          type: string
-      - in: query
-        name: source
-        schema:
-          type: string
      responses:
        "200":
          content:
--- a/ee/authz/openfgaauthz/provider.go
+++ b/ee/authz/openfgaauthz/provider.go
@@ -98,20 +98,16 @@ func (provider *provider) ListByOrgIDAndNames(ctx context.Context, orgID valuer.
 	return provider.pkgAuthzService.ListByOrgIDAndNames(ctx, orgID, names)
 }

-func (provider *provider) ListByOrgIDAndIDs(ctx context.Context, orgID valuer.UUID, ids []valuer.UUID) ([]*roletypes.Role, error) {
-	return provider.pkgAuthzService.ListByOrgIDAndIDs(ctx, orgID, ids)
+func (provider *provider) Grant(ctx context.Context, orgID valuer.UUID, name string, subject string) error {
+	return provider.pkgAuthzService.Grant(ctx, orgID, name, subject)
 }

-func (provider *provider) Grant(ctx context.Context, orgID valuer.UUID, names []string, subject string) error {
-	return provider.pkgAuthzService.Grant(ctx, orgID, names, subject)
+func (provider *provider) ModifyGrant(ctx context.Context, orgID valuer.UUID, existingRoleName string, updatedRoleName string, subject string) error {
+	return provider.pkgAuthzService.ModifyGrant(ctx, orgID, existingRoleName, updatedRoleName, subject)
 }

-func (provider *provider) ModifyGrant(ctx context.Context, orgID valuer.UUID, existingRoleNames []string, updatedRoleNames []string, subject string) error {
-	return provider.pkgAuthzService.ModifyGrant(ctx, orgID, existingRoleNames, updatedRoleNames, subject)
-}
-
-func (provider *provider) Revoke(ctx context.Context, orgID valuer.UUID, names []string, subject string) error {
-	return provider.pkgAuthzService.Revoke(ctx, orgID, names, subject)
+func (provider *provider) Revoke(ctx context.Context, orgID valuer.UUID, name string, subject string) error {
+	return provider.pkgAuthzService.Revoke(ctx, orgID, name, subject)
 }

 func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.UUID, managedRoles []*roletypes.Role) error {
--- a/frontend/.babelrc
+++ b/frontend/.babelrc
@@ -0,0 +1,16 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		["@babel/preset-react", { "runtime": "automatic" }],
+		"@babel/preset-typescript"
+	],
+	"plugins": [
+		"react-hot-loader/babel",
+		"@babel/plugin-proposal-class-properties"
+	],
+	"env": {
+		"production": {
+			"presets": ["minify"]
+		}
+	}
+}
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -2,15 +2,12 @@
 * ESLint Configuration for SigNoz Frontend
 */
 module.exports = {
-	ignorePatterns: [
-		'src/parser/*.ts',
-		'scripts/update-registry.js',
-		'scripts/generate-permissions-type.js',
-	],
+	ignorePatterns: ['src/parser/*.ts', 'scripts/update-registry.js'],
 	env: {
 		browser: true,
 		es2021: true,
 		node: true,
+		'jest/globals': true,
 	},
 	extends: [
 		'eslint:recommended',
@@ -24,7 +21,6 @@ module.exports = {
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		project: './tsconfig.json',
-		tsconfigRootDir: __dirname,
 		ecmaFeatures: {
 			jsx: true,
 		},
@@ -37,7 +33,7 @@ module.exports = {
 		'simple-import-sort', // Auto-sort imports
 		'react-hooks', // React Hooks rules
 		'prettier', // Code formatting
-		// 'jest', // TODO: Wait support on Biome to enable again
+		'jest', // Jest test rules
 		'jsx-a11y', // Accessibility rules
 		'import', // Import/export linting
 		'sonarjs', // Code quality/complexity
--- a/frontend/.nvmrc
+++ b/frontend/.nvmrc
@@ -1 +1 @@
-22
+16.15.0
--- a/frontend/mocks/env.ts
+++ b/frontend/mocks/env.ts
@@ -1,4 +0,0 @@
-export const ENVIRONMENT = {
-	baseURL: process.env.VITE_FRONTEND_API_ENDPOINT || '',
-	wsURL: process.env.VITE_WEBSOCKET_API_ENDPOINT || '',
-};
--- a/frontend/babel.config.cjs
+++ b/frontend/babel.config.cjs
@@ -1,20 +0,0 @@
-module.exports = {
-	presets: [
-		['@babel/preset-env', { modules: 'auto' }],
-		['@babel/preset-react', { runtime: 'automatic' }],
-		['@babel/preset-typescript'],
-	],
-	plugins: ['@babel/plugin-proposal-class-properties'],
-	env: {
-		test: {
-			presets: [
-				[
-					'@babel/preset-env',
-					{ modules: 'commonjs', targets: { node: 'current' } },
-				],
-				['@babel/preset-react', { runtime: 'automatic' }],
-				['@babel/preset-typescript'],
-			],
-		},
-	},
-};
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	presets: [
+		['@babel/preset-env', { targets: { node: 'current' } }],
+		'@babel/preset-typescript',
+	],
+};
--- a/frontend/bundlesize.config.json
+++ b/frontend/bundlesize.config.json
@@ -0,0 +1,8 @@
+{
+	"files": [
+		{
+			"path": "./build/**.js",
+			"maxSize": "1.2MB"
+		}
+	]
+}
--- a/frontend/example.env
+++ b/frontend/example.env
@@ -1,8 +1,8 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
-VITE_PYLON_APP_ID="pylon-app-id"
-VITE_APPCUES_APP_ID="appcess-app-id"
-VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
+FRONTEND_API_ENDPOINT="http://localhost:8080/"
+PYLON_APP_ID="pylon-app-id"
+APPCUES_APP_ID="appcess-app-id"
+PYLON_IDENTITY_SECRET="pylon-identity-secret"

-CI="1"
+CI="1"
--- a/frontend/i18-generate-hash.cjs
+++ b/frontend/i18-generate-hash.cjs
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -17,31 +17,29 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^constants/env$': '<rootDir>/__mocks__/env.ts',
-		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$':
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/([^/]+)$': '<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
-	extensionsToTreatAsEsm: ['.ts'],
+	globals: {
+		extensionsToTreatAsEsm: ['.ts'],
+		'ts-jest': {
+			useESM: true,
+			isolatedModules: true,
+			tsconfig: '<rootDir>/tsconfig.jest.json',
+		},
+	},
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
 	preset: 'ts-jest/presets/js-with-ts-esm',
 	transform: {
-		'^.+\\.(ts|tsx)?$': [
-			'ts-jest',
-			{
-				useESM: true,
-				tsconfig: '<rootDir>/tsconfig.jest.json',
-			},
-		],
+		'^.+\\.(ts|tsx)?$': 'ts-jest',
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
 	],
-	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
 	testEnvironment: 'jest-environment-jsdom',
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -7,10 +7,9 @@
 */
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
+import './src/styles.scss';

 import { server } from './src/mocks-server/server';
-
-import './src/styles.scss';
 // Establish API mocking before all tests.

 // Mock window.matchMedia
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,286 +1,292 @@
 {
-  "name": "frontend",
-  "version": "1.0.0",
-  "description": "",
-  "type": "module",
-  "scripts": {
-    "i18n:generate-hash": "node ./i18-generate-hash.cjs",
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "prettify": "prettier --write .",
-    "fmt": "prettier --check .",
-    "lint": "eslint ./src",
-    "lint:fix": "eslint ./src --fix",
-    "jest": "jest",
-    "jest:coverage": "jest --coverage",
-    "jest:watch": "jest --watch",
-    "postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.cjs",
-    "husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
-    "commitlint": "commitlint --edit $1",
-    "test": "jest",
-    "test:changedsince": "jest --changedSince=main --coverage --silent",
-    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:permissions-type": "node scripts/generate-permissions-type.cjs"
-  },
-  "engines": {
-    "node": ">=22.0.0"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@ant-design/colors": "6.0.0",
-    "@ant-design/icons": "4.8.0",
-    "@codemirror/autocomplete": "6.18.6",
-    "@codemirror/lang-javascript": "6.2.3",
-    "@dnd-kit/core": "6.1.0",
-    "@dnd-kit/modifiers": "7.0.0",
-    "@dnd-kit/sortable": "8.0.0",
-    "@dnd-kit/utilities": "3.2.2",
-    "@grafana/data": "^11.2.3",
-    "@mdx-js/loader": "2.3.0",
-    "@mdx-js/react": "2.3.0",
-    "@monaco-editor/react": "^4.3.1",
-    "@playwright/test": "1.55.1",
-    "@radix-ui/react-tabs": "1.0.4",
-    "@radix-ui/react-tooltip": "1.0.7",
-    "@sentry/react": "8.41.0",
-    "@sentry/vite-plugin": "2.22.6",
-    "@signozhq/badge": "0.0.2",
-    "@signozhq/button": "0.0.2",
-    "@signozhq/calendar": "0.0.0",
-    "@signozhq/callout": "0.0.2",
-    "@signozhq/checkbox": "0.0.2",
-    "@signozhq/combobox": "0.0.2",
-    "@signozhq/command": "0.0.0",
-    "@signozhq/design-tokens": "2.1.1",
-    "@signozhq/dialog": "^0.0.2",
-    "@signozhq/drawer": "0.0.4",
-    "@signozhq/icons": "0.1.0",
-    "@signozhq/input": "0.0.2",
-    "@signozhq/popover": "0.0.0",
-    "@signozhq/radio-group": "0.0.2",
-    "@signozhq/resizable": "0.0.0",
-    "@signozhq/sonner": "0.1.0",
-    "@signozhq/switch": "0.0.2",
-    "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "^0.0.1",
-    "@signozhq/tooltip": "0.0.2",
-    "@tanstack/react-table": "8.20.6",
-    "@tanstack/react-virtual": "3.11.2",
-    "@uiw/codemirror-theme-copilot": "4.23.11",
-    "@uiw/codemirror-theme-github": "4.24.1",
-    "@uiw/react-codemirror": "4.23.10",
-    "@uiw/react-md-editor": "3.23.5",
-    "@visx/group": "3.3.0",
-    "@visx/hierarchy": "3.12.0",
-    "@visx/shape": "3.5.0",
-    "@visx/tooltip": "3.3.0",
-    "@vitejs/plugin-react": "5.1.4",
-    "@xstate/react": "^3.0.0",
-    "ansi-to-html": "0.7.2",
-    "antd": "5.11.0",
-    "antd-table-saveas-excel": "2.2.1",
-    "antlr4": "4.13.2",
-    "axios": "1.12.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.6.4",
-    "babel-loader": "9.1.3",
-    "babel-plugin-named-asset-import": "^0.3.7",
-    "babel-preset-minify": "^0.5.1",
-    "babel-preset-react-app": "^10.0.1",
-    "chart.js": "3.9.1",
-    "chartjs-adapter-date-fns": "^2.0.0",
-    "chartjs-plugin-annotation": "^1.4.0",
-    "classnames": "2.3.2",
-    "color": "^4.2.1",
-    "color-alpha": "2.0.0",
-    "cross-env": "^7.0.3",
-    "crypto-js": "4.2.0",
-    "d3-hierarchy": "3.1.2",
-    "dayjs": "^1.10.7",
-    "dompurify": "3.2.4",
-    "dotenv": "8.2.0",
-    "event-source-polyfill": "1.0.31",
-    "eventemitter3": "5.0.1",
-    "fontfaceobserver": "2.3.0",
-    "history": "4.10.1",
-    "http-proxy-middleware": "3.0.5",
-    "http-status-codes": "2.3.0",
-    "i18next": "^21.6.12",
-    "i18next-browser-languagedetector": "^6.1.3",
-    "i18next-http-backend": "^1.3.2",
-    "immer": "11.1.3",
-    "jest": "30.2.0",
-    "js-base64": "^3.7.2",
-    "lodash-es": "^4.17.21",
-    "lucide-react": "0.498.0",
-    "mini-css-extract-plugin": "2.4.5",
-    "motion": "12.4.13",
-    "nuqs": "2.8.8",
-    "overlayscrollbars": "^2.8.1",
-    "overlayscrollbars-react": "^0.5.6",
-    "papaparse": "5.4.1",
-    "posthog-js": "1.298.0",
-    "rc-tween-one": "3.0.6",
-    "react": "18.2.0",
-    "react-addons-update": "15.6.3",
-    "react-beautiful-dnd": "13.1.1",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "18.2.0",
-    "react-drag-listview": "2.0.0",
-    "react-error-boundary": "4.0.11",
-    "react-force-graph-2d": "^1.29.1",
-    "react-full-screen": "1.1.1",
-    "react-grid-layout": "^1.3.4",
-    "react-helmet-async": "1.3.0",
-    "react-i18next": "^11.16.1",
-    "react-lottie": "1.2.10",
-    "react-markdown": "8.0.7",
-    "react-query": "3.39.3",
-    "react-redux": "^7.2.2",
-    "react-router-dom": "^5.2.0",
-    "react-router-dom-v5-compat": "6.27.0",
-    "react-syntax-highlighter": "15.5.0",
-    "react-use": "^17.3.2",
-    "react-virtuoso": "4.0.3",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "rehype-raw": "7.0.0",
-    "rollup-plugin-visualizer": "7.0.0",
-    "rrule": "2.8.1",
-    "stream": "^0.0.2",
-    "styled-components": "^5.3.11",
-    "timestamp-nano": "^1.0.0",
-    "ts-node": "^10.2.1",
-    "typescript": "5.9.3",
-    "uplot": "1.6.31",
-    "uuid": "^8.3.2",
-    "vite": "npm:rolldown-vite@7.3.1",
-    "vite-plugin-html": "3.2.2",
-    "web-vitals": "^0.2.4",
-    "xstate": "^4.31.0",
-    "zustand": "5.0.11"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-jsx": "^7.12.13",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.21.4",
-    "@commitlint/cli": "^20.4.2",
-    "@commitlint/config-conventional": "^20.4.2",
-    "@faker-js/faker": "9.3.0",
-    "@jest/globals": "30.2.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/color": "^3.0.3",
-    "@types/crypto-js": "4.2.2",
-    "@types/dompurify": "^2.4.0",
-    "@types/event-source-polyfill": "^1.0.0",
-    "@types/fontfaceobserver": "2.1.0",
-    "@types/jest": "30.0.0",
-    "@types/lodash-es": "^4.17.4",
-    "@types/mini-css-extract-plugin": "^2.5.1",
-    "@types/node": "^16.10.3",
-    "@types/papaparse": "5.3.7",
-    "@types/react": "18.0.26",
-    "@types/react-addons-update": "0.14.21",
-    "@types/react-beautiful-dnd": "13.1.8",
-    "@types/react-dom": "18.0.10",
-    "@types/react-grid-layout": "^1.1.2",
-    "@types/react-helmet-async": "1.0.3",
-    "@types/react-lottie": "1.2.10",
-    "@types/react-redux": "^7.1.11",
-    "@types/react-resizable": "3.0.3",
-    "@types/react-router-dom": "^5.1.6",
-    "@types/react-syntax-highlighter": "15.5.13",
-    "@types/redux-mock-store": "1.0.4",
-    "@types/styled-components": "^5.1.4",
-    "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "autoprefixer": "10.4.19",
-    "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^29.15.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-sonarjs": "^0.12.0",
-    "husky": "^7.0.4",
-    "imagemin": "^8.0.1",
-    "imagemin-svgo": "^10.0.1",
-    "is-ci": "^3.0.1",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-environment-node": "29.7.0",
-    "jest-styled-components": "^7.2.0",
-    "lint-staged": "^12.5.0",
-    "msw": "1.3.2",
-    "npm-run-all": "latest",
-    "orval": "7.18.0",
-    "portfinder-sync": "^0.0.2",
-    "postcss": "8.5.6",
-    "prettier": "2.2.1",
-    "prop-types": "15.8.1",
-    "react-hooks-testing-library": "0.6.0",
-    "react-resizable": "3.0.4",
-    "redux-mock-store": "1.5.4",
-    "sass": "1.97.3",
-    "sharp": "0.34.5",
-    "svgo": "4.0.0",
-    "ts-api-utils": "2.4.0",
-    "ts-jest": "29.4.6",
-    "ts-node": "^10.2.1",
-    "typescript-plugin-css-modules": "5.2.0",
-    "vite-plugin-checker": "0.12.0",
-    "vite-plugin-compression": "0.5.1",
-    "vite-plugin-image-optimizer": "2.0.3",
-    "vite-tsconfig-paths": "6.1.1"
-  },
-  "lint-staged": {
-    "*.(js|jsx|ts|tsx)": [
-      "eslint --fix",
-      "sh scripts/typecheck-staged.sh"
-    ]
-  },
-  "resolutions": {
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "debug": "4.3.4",
-    "semver": "7.5.4",
-    "xml2js": "0.5.0",
-    "phin": "^3.7.1",
-    "body-parser": "1.20.3",
-    "http-proxy-middleware": "3.0.5",
-    "cross-spawn": "7.0.5",
-    "cookie": "^0.7.1",
-    "serialize-javascript": "6.0.2",
-    "prismjs": "1.30.0",
-    "got": "11.8.5",
-    "form-data": "4.0.4",
-    "brace-expansion": "^2.0.2",
-    "on-headers": "^1.1.0",
-    "tmp": "0.2.4",
-    "vite": "npm:rolldown-vite@7.3.1"
-  }
-}
+	"name": "frontend",
+	"version": "1.0.0",
+	"description": "",
+	"main": "webpack.config.js",
+	"scripts": {
+		"i18n:generate-hash": "node ./i18-generate-hash.js",
+		"dev": "cross-env NODE_ENV=development webpack serve --progress",
+		"build": "webpack --config=webpack.config.prod.js --progress",
+		"prettify": "prettier --write .",
+		"fmt": "prettier --check .",
+		"lint": "eslint ./src",
+		"lint:fix": "eslint ./src --fix",
+		"jest": "jest",
+		"jest:coverage": "jest --coverage",
+		"jest:watch": "jest --watch",
+		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.js",
+		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
+		"commitlint": "commitlint --edit $1",
+		"test": "jest",
+		"test:changedsince": "jest --changedSince=main --coverage --silent",
+		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
+	},
+	"engines": {
+		"node": ">=16.15.0"
+	},
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"@ant-design/colors": "6.0.0",
+		"@ant-design/icons": "4.8.0",
+		"@codemirror/autocomplete": "6.18.6",
+		"@codemirror/lang-javascript": "6.2.3",
+		"@dnd-kit/core": "6.1.0",
+		"@dnd-kit/modifiers": "7.0.0",
+		"@dnd-kit/sortable": "8.0.0",
+		"@dnd-kit/utilities": "3.2.2",
+		"@grafana/data": "^11.2.3",
+		"@mdx-js/loader": "2.3.0",
+		"@mdx-js/react": "2.3.0",
+		"@monaco-editor/react": "^4.3.1",
+		"@playwright/test": "1.55.1",
+		"@radix-ui/react-tabs": "1.0.4",
+		"@radix-ui/react-tooltip": "1.0.7",
+		"@sentry/react": "8.41.0",
+		"@sentry/webpack-plugin": "2.22.6",
+		"@signozhq/badge": "0.0.2",
+		"@signozhq/button": "0.0.2",
+		"@signozhq/calendar": "0.0.0",
+		"@signozhq/callout": "0.0.2",
+		"@signozhq/checkbox": "0.0.2",
+		"@signozhq/combobox": "0.0.2",
+		"@signozhq/command": "0.0.0",
+		"@signozhq/design-tokens": "2.1.1",
+		"@signozhq/icons": "0.1.0",
+		"@signozhq/input": "0.0.2",
+		"@signozhq/popover": "0.0.0",
+		"@signozhq/radio-group": "0.0.2",
+		"@signozhq/resizable": "0.0.0",
+		"@signozhq/sonner": "0.1.0",
+		"@signozhq/switch": "0.0.2",
+		"@signozhq/table": "0.3.7",
+		"@signozhq/tooltip": "0.0.2",
+		"@tanstack/react-table": "8.20.6",
+		"@tanstack/react-virtual": "3.11.2",
+		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/codemirror-theme-github": "4.24.1",
+		"@uiw/react-codemirror": "4.23.10",
+		"@uiw/react-md-editor": "3.23.5",
+		"@visx/group": "3.3.0",
+		"@visx/hierarchy": "3.12.0",
+		"@visx/shape": "3.5.0",
+		"@visx/tooltip": "3.3.0",
+		"@xstate/react": "^3.0.0",
+		"ansi-to-html": "0.7.2",
+		"antd": "5.11.0",
+		"antd-table-saveas-excel": "2.2.1",
+		"antlr4": "4.13.2",
+		"axios": "1.12.0",
+		"babel-eslint": "^10.1.0",
+		"babel-jest": "^29.6.4",
+		"babel-loader": "9.1.3",
+		"babel-plugin-named-asset-import": "^0.3.7",
+		"babel-preset-minify": "^0.5.1",
+		"babel-preset-react-app": "^10.0.1",
+		"chart.js": "3.9.1",
+		"chartjs-adapter-date-fns": "^2.0.0",
+		"chartjs-plugin-annotation": "^1.4.0",
+		"classnames": "2.3.2",
+		"color": "^4.2.1",
+		"color-alpha": "1.1.3",
+		"cross-env": "^7.0.3",
+		"crypto-js": "4.2.0",
+		"css-loader": "5.0.0",
+		"css-minimizer-webpack-plugin": "5.0.1",
+		"d3-hierarchy": "3.1.2",
+		"dayjs": "^1.10.7",
+		"dompurify": "3.2.4",
+		"dotenv": "8.2.0",
+		"event-source-polyfill": "1.0.31",
+		"eventemitter3": "5.0.1",
+		"file-loader": "6.1.1",
+		"fontfaceobserver": "2.3.0",
+		"history": "4.10.1",
+		"html-webpack-plugin": "5.5.0",
+		"http-proxy-middleware": "3.0.5",
+		"http-status-codes": "2.3.0",
+		"i18next": "^21.6.12",
+		"i18next-browser-languagedetector": "^6.1.3",
+		"i18next-http-backend": "^1.3.2",
+		"immer": "11.1.3",
+		"jest": "^27.5.1",
+		"js-base64": "^3.7.2",
+		"less": "^4.1.2",
+		"less-loader": "^10.2.0",
+		"lodash-es": "^4.17.21",
+		"lucide-react": "0.498.0",
+		"mini-css-extract-plugin": "2.4.5",
+		"motion": "12.4.13",
+		"nuqs": "2.8.8",
+		"overlayscrollbars": "^2.8.1",
+		"overlayscrollbars-react": "^0.5.6",
+		"papaparse": "5.4.1",
+		"posthog-js": "1.298.0",
+		"rc-tween-one": "3.0.6",
+		"react": "18.2.0",
+		"react-addons-update": "15.6.3",
+		"react-beautiful-dnd": "13.1.1",
+		"react-dnd": "16.0.1",
+		"react-dnd-html5-backend": "16.0.1",
+		"react-dom": "18.2.0",
+		"react-drag-listview": "2.0.0",
+		"react-error-boundary": "4.0.11",
+		"react-force-graph-2d": "^1.29.1",
+		"react-full-screen": "1.1.1",
+		"react-grid-layout": "^1.3.4",
+		"react-helmet-async": "1.3.0",
+		"react-i18next": "^11.16.1",
+		"react-lottie": "1.2.10",
+		"react-markdown": "8.0.7",
+		"react-query": "3.39.3",
+		"react-redux": "^7.2.2",
+		"react-router-dom": "^5.2.0",
+		"react-router-dom-v5-compat": "6.27.0",
+		"react-syntax-highlighter": "15.5.0",
+		"react-use": "^17.3.2",
+		"react-virtuoso": "4.0.3",
+		"redux": "^4.0.5",
+		"redux-thunk": "^2.3.0",
+		"rehype-raw": "7.0.0",
+		"rrule": "2.8.1",
+		"stream": "^0.0.2",
+		"style-loader": "1.3.0",
+		"styled-components": "^5.3.11",
+		"terser-webpack-plugin": "^5.2.5",
+		"timestamp-nano": "^1.0.0",
+		"ts-node": "^10.2.1",
+		"tsconfig-paths-webpack-plugin": "^3.5.1",
+		"typescript": "^4.0.5",
+		"uplot": "1.6.31",
+		"uuid": "^8.3.2",
+		"web-vitals": "^0.2.4",
+		"webpack": "5.94.0",
+		"webpack-dev-server": "^5.2.1",
+		"webpack-retry-chunk-load-plugin": "3.1.1",
+		"xstate": "^4.31.0",
+		"zustand": "5.0.11"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"@babel/core": "^7.22.11",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/plugin-syntax-jsx": "^7.12.13",
+		"@babel/preset-env": "^7.22.14",
+		"@babel/preset-react": "^7.12.13",
+		"@babel/preset-typescript": "^7.21.4",
+		"@commitlint/cli": "^16.3.0",
+		"@commitlint/config-conventional": "^16.2.4",
+		"@faker-js/faker": "9.3.0",
+		"@jest/globals": "^27.5.1",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "13.4.0",
+		"@testing-library/user-event": "14.4.3",
+		"@types/color": "^3.0.3",
+		"@types/compression-webpack-plugin": "^9.0.0",
+		"@types/copy-webpack-plugin": "^8.0.1",
+		"@types/crypto-js": "4.2.2",
+		"@types/dompurify": "^2.4.0",
+		"@types/event-source-polyfill": "^1.0.0",
+		"@types/fontfaceobserver": "2.1.0",
+		"@types/jest": "^27.5.1",
+		"@types/lodash-es": "^4.17.4",
+		"@types/mini-css-extract-plugin": "^2.5.1",
+		"@types/node": "^16.10.3",
+		"@types/papaparse": "5.3.7",
+		"@types/react": "18.0.26",
+		"@types/react-addons-update": "0.14.21",
+		"@types/react-beautiful-dnd": "13.1.8",
+		"@types/react-dom": "18.0.10",
+		"@types/react-grid-layout": "^1.1.2",
+		"@types/react-helmet-async": "1.0.3",
+		"@types/react-lottie": "1.2.10",
+		"@types/react-redux": "^7.1.11",
+		"@types/react-resizable": "3.0.3",
+		"@types/react-router-dom": "^5.1.6",
+		"@types/react-syntax-highlighter": "15.5.13",
+		"@types/redux-mock-store": "1.0.4",
+		"@types/styled-components": "^5.1.4",
+		"@types/uuid": "^8.3.1",
+		"@types/webpack": "^5.28.0",
+		"@types/webpack-dev-server": "^4.7.2",
+		"@typescript-eslint/eslint-plugin": "^4.33.0",
+		"@typescript-eslint/parser": "^4.33.0",
+		"autoprefixer": "10.4.19",
+		"babel-plugin-styled-components": "^1.12.0",
+		"compression-webpack-plugin": "9.0.0",
+		"copy-webpack-plugin": "^11.0.0",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-import": "^2.28.1",
+		"eslint-plugin-jest": "^26.9.0",
+		"eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-react": "^7.24.0",
+		"eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-plugin-simple-import-sort": "^7.0.0",
+		"eslint-plugin-sonarjs": "^0.12.0",
+		"husky": "^7.0.4",
+		"image-minimizer-webpack-plugin": "^4.0.0",
+		"imagemin": "^8.0.1",
+		"imagemin-svgo": "^10.0.1",
+		"is-ci": "^3.0.1",
+		"jest-styled-components": "^7.0.8",
+		"lint-staged": "^12.5.0",
+		"msw": "1.3.2",
+		"npm-run-all": "latest",
+		"orval": "7.18.0",
+		"portfinder-sync": "^0.0.2",
+		"postcss": "8.4.38",
+		"prettier": "2.2.1",
+		"prop-types": "15.8.1",
+		"raw-loader": "4.0.2",
+		"react-hooks-testing-library": "0.6.0",
+		"react-hot-loader": "^4.13.0",
+		"react-resizable": "3.0.4",
+		"redux-mock-store": "1.5.4",
+		"sass": "1.66.1",
+		"sass-loader": "13.3.2",
+		"sharp": "^0.33.4",
+		"ts-jest": "^27.1.5",
+		"ts-node": "^10.2.1",
+		"typescript-plugin-css-modules": "5.2.0",
+		"webpack-bundle-analyzer": "^4.5.0",
+		"webpack-cli": "^5.1.4"
+	},
+	"lint-staged": {
+		"*.(js|jsx|ts|tsx)": [
+			"eslint --fix",
+			"sh scripts/typecheck-staged.sh"
+		]
+	},
+	"resolutions": {
+		"@types/react": "18.0.26",
+		"@types/react-dom": "18.0.10",
+		"debug": "4.3.4",
+		"semver": "7.5.4",
+		"xml2js": "0.5.0",
+		"phin": "^3.7.1",
+		"body-parser": "1.20.3",
+		"http-proxy-middleware": "3.0.5",
+		"cross-spawn": "7.0.5",
+		"cookie": "^0.7.1",
+		"serialize-javascript": "6.0.2",
+		"prismjs": "1.30.0",
+		"got": "11.8.5",
+		"form-data": "4.0.4",
+		"brace-expansion": "^2.0.2",
+		"on-headers": "^1.1.0",
+		"tmp": "0.2.4"
+	}
+}
--- a/frontend/public/locales/en-GB/routes.json
+++ b/frontend/public/locales/en-GB/routes.json
@@ -13,7 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"role_details": "Role Details",
-	"members": "Members"
+	"roles": "Roles"
 }
--- a/frontend/public/locales/en/routes.json
+++ b/frontend/public/locales/en/routes.json
@@ -13,7 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"role_details": "Role Details",
-	"members": "Members"
+	"roles": "Roles"
 }
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -74,6 +74,5 @@
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members"
+	"ROLES_SETTINGS": "SigNoz | Roles"
 }
--- a/frontend/scripts/generate-permissions-type.cjs
+++ b/frontend/scripts/generate-permissions-type.cjs
@@ -1,199 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const axios = require('axios');
-
-const PERMISSIONS_TYPE_FILE = path.join(
-	__dirname,
-	'../src/hooks/useAuthZ/permissions.type.ts',
-);
-
-const SIGNOZ_INTEGRATION_IMAGE = 'signoz:integration';
-const LOCAL_BACKEND_URL = 'http://localhost:8080';
-
-function log(message) {
-	console.log(`[generate-permissions-type] ${message}`);
-}
-
-function getBackendUrlFromDocker() {
-	try {
-		const output = execSync(
-			`docker ps --filter "ancestor=${SIGNOZ_INTEGRATION_IMAGE}" --format "{{.Ports}}"`,
-			{ encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
-		).trim();
-
-		if (!output) {
-			return null;
-		}
-
-		const portMatch = output.match(/0\.0\.0\.0:(\d+)->8080\/tcp/);
-		if (portMatch) {
-			return `http://localhost:${portMatch[1]}`;
-		}
-
-		const ipv6Match = output.match(/:::(\d+)->8080\/tcp/);
-		if (ipv6Match) {
-			return `http://localhost:${ipv6Match[1]}`;
-		}
-	} catch (err) {
-		log(`Warning: Could not get port from docker: ${err.message}`);
-	}
-	return null;
-}
-
-async function checkBackendHealth(url, maxAttempts = 3, delayMs = 1000) {
-	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-		try {
-			await axios.get(`${url}/api/v1/health`, {
-				timeout: 5000,
-				validateStatus: (status) => status === 200,
-			});
-			return true;
-		} catch (err) {
-			if (attempt < maxAttempts) {
-				await new Promise((r) => setTimeout(r, delayMs));
-			}
-		}
-	}
-	return false;
-}
-
-async function discoverBackendUrl() {
-	const dockerUrl = getBackendUrlFromDocker();
-	if (dockerUrl) {
-		log(`Found ${SIGNOZ_INTEGRATION_IMAGE} container, trying ${dockerUrl}...`);
-		if (await checkBackendHealth(dockerUrl)) {
-			log(`Backend found at ${dockerUrl} (from py-test-setup)`);
-			return dockerUrl;
-		}
-		log(`Backend at ${dockerUrl} is not responding`);
-	}
-
-	log(`Trying local backend at ${LOCAL_BACKEND_URL}...`);
-	if (await checkBackendHealth(LOCAL_BACKEND_URL)) {
-		log(`Backend found at ${LOCAL_BACKEND_URL}`);
-		return LOCAL_BACKEND_URL;
-	}
-
-	return null;
-}
-
-async function fetchResources(backendUrl) {
-	log('Fetching resources from API...');
-	const resourcesUrl = `${backendUrl}/api/v1/authz/resources`;
-
-	const { data: response } = await axios.get(resourcesUrl);
-
-	return response;
-}
-
-function transformResponse(apiResponse) {
-	if (!apiResponse.data) {
-		throw new Error('Invalid API response: missing data field');
-	}
-
-	const { resources, relations } = apiResponse.data;
-
-	return {
-		status: apiResponse.status || 'success',
-		data: {
-			resources: resources,
-			relations: relations,
-		},
-	};
-}
-
-function generateTypeScriptFile(data) {
-	const resourcesStr = data.data.resources
-		.map(
-			(r) =>
-				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t}`,
-		)
-		.join(',\n');
-
-	const relationsStr = Object.entries(data.data.relations)
-		.map(
-			([type, relations]) =>
-				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}]`,
-		)
-		.join(',\n');
-
-	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
-export default {
-\tstatus: '${data.status}',
-\tdata: {
-\t\tresources: [
-${resourcesStr}
-\t\t],
-\t\trelations: {
-${relationsStr}
-\t\t},
-\t},
-} as const;
-`;
-}
-
-async function main() {
-	try {
-		log('Starting permissions type generation...');
-
-		const backendUrl = await discoverBackendUrl();
-
-		if (!backendUrl) {
-			console.error('\n' + '='.repeat(80));
-			console.error('ERROR: No running SigNoz backend found!');
-			console.error('='.repeat(80));
-			console.error(
-				'\nThe permissions type generator requires a running SigNoz backend.',
-			);
-			console.error('\nFor local development, start the backend with:');
-			console.error('  make go-run-enterprise');
-			console.error(
-				'\nFor CI or integration testing, start the test environment with:',
-			);
-			console.error('  make py-test-setup');
-			console.error(
-				'\nIf running in CI and seeing this error, check that the py-test-setup',
-			);
-			console.error('step completed successfully before this step runs.');
-			console.error('='.repeat(80) + '\n');
-			process.exit(1);
-		}
-
-		log('Fetching resources...');
-		const apiResponse = await fetchResources(backendUrl);
-
-		log('Transforming response...');
-		const transformed = transformResponse(apiResponse);
-
-		log('Generating TypeScript file...');
-		const content = generateTypeScriptFile(transformed);
-
-		log(`Writing to ${PERMISSIONS_TYPE_FILE}...`);
-		fs.writeFileSync(PERMISSIONS_TYPE_FILE, content, 'utf8');
-
-		const rootDir = path.join(__dirname, '../..');
-		const relativePath = path.relative(
-			path.join(rootDir, 'frontend'),
-			PERMISSIONS_TYPE_FILE,
-		);
-		log('Linting generated file...');
-		execSync(`cd frontend && yarn eslint --fix ${relativePath}`, {
-			cwd: rootDir,
-			stdio: 'inherit',
-		});
-
-		log('Successfully generated permissions.type.ts');
-	} catch (error) {
-		log(`Error: ${error.message}`);
-		process.exit(1);
-	}
-}
-
-if (require.main === module) {
-	main();
-}
-
-module.exports = { main };
--- a/frontend/scripts/update-registry.cjs
+++ b/frontend/scripts/update-registry.cjs
@@ -27,7 +27,7 @@ const signozPackages = Object.keys(allDeps).filter((dep) =>
 const fileContent = `// -------------------------------------------------------------------------
 // AUTO-GENERATED FILE
 // -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.cjs automatically
+// This file is generated by scripts/update-registry.js automatically
 // whenever you run 'yarn install' or 'npm install'.
 //
 // It forces VS Code to index these specific packages to fix auto-import
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -218,9 +218,9 @@ function App(): JSX.Element {
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/')
 		) {
-			window.Pylon?.('hideChatBubble');
+			window.Pylon('hideChatBubble');
 		} else {
-			window.Pylon?.('showChatBubble');
+			window.Pylon('showChatBubble');
 		}
 	}, [pathname]);

--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -165,6 +165,11 @@ export const MySettings = Loadable(
 	() => import(/* webpackChunkName: "All MySettings" */ 'pages/Settings'),
 );

+export const CustomDomainSettings = Loadable(
+	() =>
+		import(/* webpackChunkName: "Custom Domain Settings" */ 'pages/Settings'),
+);
+
 export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
--- a/frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts
+++ b/frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts
@@ -2,7 +2,7 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';

-// @deprecated Use convertToApiError instead
+// Handles errors from generated API hooks (which use RenderErrorResponseDTO)
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
 ): never {
@@ -46,34 +46,3 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 		},
 	});
 }
-
-// convertToApiError converts an AxiosError from generated API
-// hooks into an APIError.
-export function convertToApiError(
-	error: AxiosError<RenderErrorResponseDTO> | null,
-): APIError | undefined {
-	if (!error) {
-		return undefined;
-	}
-
-	const response = error.response;
-	const errorData = response?.data?.error;
-
-	return new APIError({
-		httpStatusCode: response?.status || error.status || 500,
-		error: {
-			code:
-				errorData?.code ||
-				String(response?.status || error.code || 'unknown_error'),
-			message:
-				errorData?.message ||
-				response?.statusText ||
-				error.message ||
-				'Something went wrong',
-			url: errorData?.url ?? '',
-			errors: (errorData?.errors ?? []).map((e) => ({
-				message: e.message ?? '',
-			})),
-		},
-	});
-}
--- a/frontend/src/api/generated/services/authdomains/index.ts
+++ b/frontend/src/api/generated/services/authdomains/index.ts
@@ -29,6 +29,10 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint lists all auth domains
 * @summary List all auth domains
--- a/frontend/src/api/generated/services/authz/index.ts
+++ b/frontend/src/api/generated/services/authz/index.ts
@@ -26,6 +26,10 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * Checks if the authenticated user has permissions for given transactions
 * @summary Check permissions
--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -35,6 +35,10 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
 * @summary Delete public dashboard
--- a/frontend/src/api/generated/services/features/index.ts
+++ b/frontend/src/api/generated/services/features/index.ts
@@ -18,6 +18,10 @@ import type { ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint returns the supported features and their details
 * @summary Get features
--- a/frontend/src/api/generated/services/fields/index.ts
+++ b/frontend/src/api/generated/services/fields/index.ts
@@ -24,6 +24,10 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint returns field keys
 * @summary Get field keys
--- a/frontend/src/api/generated/services/gateway/index.ts
+++ b/frontend/src/api/generated/services/gateway/index.ts
@@ -37,6 +37,10 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint returns the ingestion keys for a workspace
 * @summary Get ingestion keys for workspace
--- a/frontend/src/api/generated/services/global/index.ts
+++ b/frontend/src/api/generated/services/global/index.ts
@@ -21,6 +21,10 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint returns global config
 * @summary Get global config
--- a/frontend/src/api/generated/services/logs/index.ts
+++ b/frontend/src/api/generated/services/logs/index.ts
@@ -25,6 +25,10 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoints promotes and indexes paths
 * @summary Promote and index paths
--- a/frontend/src/api/generated/services/metrics/index.ts
+++ b/frontend/src/api/generated/services/metrics/index.ts
@@ -42,6 +42,10 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint returns a list of distinct metric names within the specified time range
 * @summary List metric names
--- a/frontend/src/api/generated/services/orgs/index.ts
+++ b/frontend/src/api/generated/services/orgs/index.ts
@@ -25,6 +25,10 @@ import type {
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint returns the organization I belong to
 * @summary Get my organization
--- a/frontend/src/api/generated/services/preferences/index.ts
+++ b/frontend/src/api/generated/services/preferences/index.ts
@@ -32,6 +32,10 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint lists all org preferences
 * @summary List org preferences
--- a/frontend/src/api/generated/services/querier/index.ts
+++ b/frontend/src/api/generated/services/querier/index.ts
@@ -20,6 +20,10 @@ import type {
 	ReplaceVariables200,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
 * @summary Query range
--- a/frontend/src/api/generated/services/role/index.ts
+++ b/frontend/src/api/generated/services/role/index.ts
@@ -35,6 +35,10 @@ import type {
 	RoletypesPostableRoleDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint lists all roles
 * @summary List roles
--- a/frontend/src/api/generated/services/serviceaccount/index.ts
+++ b/frontend/src/api/generated/services/serviceaccount/index.ts
@@ -1,969 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	CreateServiceAccount201,
-	CreateServiceAccountKey201,
-	CreateServiceAccountKeyPathParameters,
-	DeleteServiceAccountPathParameters,
-	GetServiceAccount200,
-	GetServiceAccountPathParameters,
-	ListServiceAccountKeys200,
-	ListServiceAccountKeysPathParameters,
-	ListServiceAccounts200,
-	RenderErrorResponseDTO,
-	RevokeServiceAccountKeyPathParameters,
-	ServiceaccounttypesPostableFactorAPIKeyDTO,
-	ServiceaccounttypesPostableServiceAccountDTO,
-	ServiceaccounttypesUpdatableFactorAPIKeyDTO,
-	ServiceaccounttypesUpdatableServiceAccountDTO,
-	ServiceaccounttypesUpdatableServiceAccountStatusDTO,
-	UpdateServiceAccountKeyPathParameters,
-	UpdateServiceAccountPathParameters,
-	UpdateServiceAccountStatusPathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * This endpoint lists the service accounts for an organisation
- * @summary List service accounts
- */
-export const listServiceAccounts = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListServiceAccounts200>({
-		url: `/api/v1/service_accounts`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListServiceAccountsQueryKey = () => {
-	return [`/api/v1/service_accounts`] as const;
-};
-
-export const getListServiceAccountsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listServiceAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listServiceAccounts>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListServiceAccountsQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listServiceAccounts>>
-	> = ({ signal }) => listServiceAccounts(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listServiceAccounts>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListServiceAccountsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listServiceAccounts>>
->;
-export type ListServiceAccountsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List service accounts
- */
-
-export function useListServiceAccounts<
-	TData = Awaited<ReturnType<typeof listServiceAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listServiceAccounts>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListServiceAccountsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List service accounts
- */
-export const invalidateListServiceAccounts = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListServiceAccountsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a service account
- * @summary Create service account
- */
-export const createServiceAccount = (
-	serviceaccounttypesPostableServiceAccountDTO: BodyType<ServiceaccounttypesPostableServiceAccountDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateServiceAccount201>({
-		url: `/api/v1/service_accounts`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesPostableServiceAccountDTO,
-		signal,
-	});
-};
-
-export const getCreateServiceAccountMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccount>>,
-		TError,
-		{ data: BodyType<ServiceaccounttypesPostableServiceAccountDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccount>>,
-	TError,
-	{ data: BodyType<ServiceaccounttypesPostableServiceAccountDTO> },
-	TContext
-> => {
-	const mutationKey = ['createServiceAccount'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createServiceAccount>>,
-		{ data: BodyType<ServiceaccounttypesPostableServiceAccountDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createServiceAccount(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateServiceAccountMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccount>>
->;
-export type CreateServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type CreateServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create service account
- */
-export const useCreateServiceAccount = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccount>>,
-		TError,
-		{ data: BodyType<ServiceaccounttypesPostableServiceAccountDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccount>>,
-	TError,
-	{ data: BodyType<ServiceaccounttypesPostableServiceAccountDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateServiceAccountMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes an existing service account
- * @summary Deletes a service account
- */
-export const deleteServiceAccount = ({
-	id,
-}: DeleteServiceAccountPathParameters) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v1/service_accounts/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteServiceAccountMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccount>>,
-		TError,
-		{ pathParams: DeleteServiceAccountPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccount>>,
-	TError,
-	{ pathParams: DeleteServiceAccountPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteServiceAccount'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteServiceAccount>>,
-		{ pathParams: DeleteServiceAccountPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteServiceAccount(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteServiceAccountMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccount>>
->;
-
-export type DeleteServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Deletes a service account
- */
-export const useDeleteServiceAccount = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccount>>,
-		TError,
-		{ pathParams: DeleteServiceAccountPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccount>>,
-	TError,
-	{ pathParams: DeleteServiceAccountPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteServiceAccountMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint gets an existing service account
- * @summary Gets a service account
- */
-export const getServiceAccount = (
-	{ id }: GetServiceAccountPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetServiceAccount200>({
-		url: `/api/v1/service_accounts/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetServiceAccountQueryKey = ({
-	id,
-}: GetServiceAccountPathParameters) => {
-	return [`/api/v1/service_accounts/${id}`] as const;
-};
-
-export const getGetServiceAccountQueryOptions = <
-	TData = Awaited<ReturnType<typeof getServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetServiceAccountPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getServiceAccount>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetServiceAccountQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getServiceAccount>>
-	> = ({ signal }) => getServiceAccount({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getServiceAccount>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetServiceAccountQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getServiceAccount>>
->;
-export type GetServiceAccountQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Gets a service account
- */
-
-export function useGetServiceAccount<
-	TData = Awaited<ReturnType<typeof getServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetServiceAccountPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getServiceAccount>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetServiceAccountQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Gets a service account
- */
-export const invalidateGetServiceAccount = async (
-	queryClient: QueryClient,
-	{ id }: GetServiceAccountPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetServiceAccountQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint updates an existing service account
- * @summary Updates a service account
- */
-export const updateServiceAccount = (
-	{ id }: UpdateServiceAccountPathParameters,
-	serviceaccounttypesUpdatableServiceAccountDTO: BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v1/service_accounts/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesUpdatableServiceAccountDTO,
-	});
-};
-
-export const getUpdateServiceAccountMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateServiceAccount>>,
-		TError,
-		{
-			pathParams: UpdateServiceAccountPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateServiceAccount>>,
-	TError,
-	{
-		pathParams: UpdateServiceAccountPathParameters;
-		data: BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateServiceAccount'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateServiceAccount>>,
-		{
-			pathParams: UpdateServiceAccountPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateServiceAccount(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceAccountMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateServiceAccount>>
->;
-export type UpdateServiceAccountMutationBody = BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>;
-export type UpdateServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Updates a service account
- */
-export const useUpdateServiceAccount = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateServiceAccount>>,
-		TError,
-		{
-			pathParams: UpdateServiceAccountPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateServiceAccount>>,
-	TError,
-	{
-		pathParams: UpdateServiceAccountPathParameters;
-		data: BodyType<ServiceaccounttypesUpdatableServiceAccountDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceAccountMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint lists the service account keys
- * @summary List service account keys
- */
-export const listServiceAccountKeys = (
-	{ id }: ListServiceAccountKeysPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListServiceAccountKeys200>({
-		url: `/api/v1/service_accounts/${id}/keys`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListServiceAccountKeysQueryKey = ({
-	id,
-}: ListServiceAccountKeysPathParameters) => {
-	return [`/api/v1/service_accounts/${id}/keys`] as const;
-};
-
-export const getListServiceAccountKeysQueryOptions = <
-	TData = Awaited<ReturnType<typeof listServiceAccountKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: ListServiceAccountKeysPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listServiceAccountKeys>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListServiceAccountKeysQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listServiceAccountKeys>>
-	> = ({ signal }) => listServiceAccountKeys({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof listServiceAccountKeys>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListServiceAccountKeysQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listServiceAccountKeys>>
->;
-export type ListServiceAccountKeysQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List service account keys
- */
-
-export function useListServiceAccountKeys<
-	TData = Awaited<ReturnType<typeof listServiceAccountKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: ListServiceAccountKeysPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listServiceAccountKeys>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListServiceAccountKeysQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List service account keys
- */
-export const invalidateListServiceAccountKeys = async (
-	queryClient: QueryClient,
-	{ id }: ListServiceAccountKeysPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListServiceAccountKeysQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a service account key
- * @summary Create a service account key
- */
-export const createServiceAccountKey = (
-	{ id }: CreateServiceAccountKeyPathParameters,
-	serviceaccounttypesPostableFactorAPIKeyDTO: BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateServiceAccountKey201>({
-		url: `/api/v1/service_accounts/${id}/keys`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesPostableFactorAPIKeyDTO,
-		signal,
-	});
-};
-
-export const getCreateServiceAccountKeyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountKey>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountKeyPathParameters;
-			data: BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountKey>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountKeyPathParameters;
-		data: BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['createServiceAccountKey'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createServiceAccountKey>>,
-		{
-			pathParams: CreateServiceAccountKeyPathParameters;
-			data: BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return createServiceAccountKey(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateServiceAccountKeyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountKey>>
->;
-export type CreateServiceAccountKeyMutationBody = BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-export type CreateServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create a service account key
- */
-export const useCreateServiceAccountKey = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountKey>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountKeyPathParameters;
-			data: BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountKey>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountKeyPathParameters;
-		data: BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getCreateServiceAccountKeyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint revokes an existing service account key
- * @summary Revoke a service account key
- */
-export const revokeServiceAccountKey = ({
-	id,
-	fid,
-}: RevokeServiceAccountKeyPathParameters) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v1/service_accounts/${id}/keys/${fid}`,
-		method: 'DELETE',
-	});
-};
-
-export const getRevokeServiceAccountKeyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
-		TError,
-		{ pathParams: RevokeServiceAccountKeyPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof revokeServiceAccountKey>>,
-	TError,
-	{ pathParams: RevokeServiceAccountKeyPathParameters },
-	TContext
-> => {
-	const mutationKey = ['revokeServiceAccountKey'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
-		{ pathParams: RevokeServiceAccountKeyPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return revokeServiceAccountKey(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type RevokeServiceAccountKeyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof revokeServiceAccountKey>>
->;
-
-export type RevokeServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Revoke a service account key
- */
-export const useRevokeServiceAccountKey = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
-		TError,
-		{ pathParams: RevokeServiceAccountKeyPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof revokeServiceAccountKey>>,
-	TError,
-	{ pathParams: RevokeServiceAccountKeyPathParameters },
-	TContext
-> => {
-	const mutationOptions = getRevokeServiceAccountKeyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint updates an existing service account key
- * @summary Updates a service account key
- */
-export const updateServiceAccountKey = (
-	{ id, fid }: UpdateServiceAccountKeyPathParameters,
-	serviceaccounttypesUpdatableFactorAPIKeyDTO: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v1/service_accounts/${id}/keys/${fid}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesUpdatableFactorAPIKeyDTO,
-	});
-};
-
-export const getUpdateServiceAccountKeyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateServiceAccountKey>>,
-		TError,
-		{
-			pathParams: UpdateServiceAccountKeyPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateServiceAccountKey>>,
-	TError,
-	{
-		pathParams: UpdateServiceAccountKeyPathParameters;
-		data: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateServiceAccountKey'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateServiceAccountKey>>,
-		{
-			pathParams: UpdateServiceAccountKeyPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateServiceAccountKey(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceAccountKeyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateServiceAccountKey>>
->;
-export type UpdateServiceAccountKeyMutationBody = BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-export type UpdateServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Updates a service account key
- */
-export const useUpdateServiceAccountKey = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateServiceAccountKey>>,
-		TError,
-		{
-			pathParams: UpdateServiceAccountKeyPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateServiceAccountKey>>,
-	TError,
-	{
-		pathParams: UpdateServiceAccountKeyPathParameters;
-		data: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceAccountKeyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint updates an existing service account status
- * @summary Updates a service account status
- */
-export const updateServiceAccountStatus = (
-	{ id }: UpdateServiceAccountStatusPathParameters,
-	serviceaccounttypesUpdatableServiceAccountStatusDTO: BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v1/service_accounts/${id}/status`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesUpdatableServiceAccountStatusDTO,
-	});
-};
-
-export const getUpdateServiceAccountStatusMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateServiceAccountStatus>>,
-		TError,
-		{
-			pathParams: UpdateServiceAccountStatusPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateServiceAccountStatus>>,
-	TError,
-	{
-		pathParams: UpdateServiceAccountStatusPathParameters;
-		data: BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateServiceAccountStatus'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateServiceAccountStatus>>,
-		{
-			pathParams: UpdateServiceAccountStatusPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateServiceAccountStatus(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceAccountStatusMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateServiceAccountStatus>>
->;
-export type UpdateServiceAccountStatusMutationBody = BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>;
-export type UpdateServiceAccountStatusMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Updates a service account status
- */
-export const useUpdateServiceAccountStatus = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateServiceAccountStatus>>,
-		TError,
-		{
-			pathParams: UpdateServiceAccountStatusPathParameters;
-			data: BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateServiceAccountStatus>>,
-	TError,
-	{
-		pathParams: UpdateServiceAccountStatusPathParameters;
-		data: BodyType<ServiceaccounttypesUpdatableServiceAccountStatusDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceAccountStatusMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
--- a/frontend/src/api/generated/services/sessions/index.ts
+++ b/frontend/src/api/generated/services/sessions/index.ts
@@ -33,6 +33,10 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint creates a session for a user using google callback
 * @summary Create session by google callback
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -2090,154 +2090,6 @@ export interface RoletypesRoleDTO {
 	updatedAt?: Date;
 }

-export interface ServiceaccounttypesFactorAPIKeyDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	expires_at: number;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	key: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	last_used: Date;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	service_account_id: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
-export interface ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	key: string;
-}
-
-export interface ServiceaccounttypesPostableFactorAPIKeyDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	expires_at: number;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
-export interface ServiceaccounttypesPostableServiceAccountDTO {
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type array
-	 */
-	roles: string[];
-}
-
-export interface ServiceaccounttypesServiceAccountDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgID: string;
-	/**
-	 * @type array
-	 */
-	roles: string[];
-	/**
-	 * @type string
-	 */
-	status: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
-export interface ServiceaccounttypesUpdatableFactorAPIKeyDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	expires_at: number;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
-export interface ServiceaccounttypesUpdatableServiceAccountDTO {
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type array
-	 */
-	roles: string[];
-}
-
-export interface ServiceaccounttypesUpdatableServiceAccountStatusDTO {
-	/**
-	 * @type string
-	 */
-	status: string;
-}
-
 export enum TelemetrytypesFieldContextDTO {
 	metric = 'metric',
 	log = 'log',
@@ -3198,78 +3050,6 @@ export type PatchObjectsPathParameters = {
 	id: string;
 	relation: string;
 };
-export type ListServiceAccounts200 = {
-	/**
-	 * @type array
-	 */
-	data: ServiceaccounttypesServiceAccountDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateServiceAccount201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteServiceAccountPathParameters = {
-	id: string;
-};
-export type GetServiceAccountPathParameters = {
-	id: string;
-};
-export type GetServiceAccount200 = {
-	data: ServiceaccounttypesServiceAccountDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateServiceAccountPathParameters = {
-	id: string;
-};
-export type ListServiceAccountKeysPathParameters = {
-	id: string;
-};
-export type ListServiceAccountKeys200 = {
-	/**
-	 * @type array
-	 */
-	data: ServiceaccounttypesFactorAPIKeyDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateServiceAccountKeyPathParameters = {
-	id: string;
-};
-export type CreateServiceAccountKey201 = {
-	data: ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type RevokeServiceAccountKeyPathParameters = {
-	id: string;
-	fid: string;
-};
-export type UpdateServiceAccountKeyPathParameters = {
-	id: string;
-	fid: string;
-};
-export type UpdateServiceAccountStatusPathParameters = {
-	id: string;
-};
 export type ListUsers200 = {
 	/**
 	 * @type array
@@ -3451,11 +3231,6 @@ export type ListMetricsParams = {
 	 * @description undefined
 	 */
 	searchText?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	source?: string;
 };

 export type ListMetrics200 = {
--- a/frontend/src/api/generated/services/users/index.ts
+++ b/frontend/src/api/generated/services/users/index.ts
@@ -51,6 +51,10 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint changes the password by id
 * @summary Change password
--- a/frontend/src/api/generated/services/zeus/index.ts
+++ b/frontend/src/api/generated/services/zeus/index.ts
@@ -26,6 +26,10 @@ import type {
 	ZeustypesPostableProfileDTO,
 } from '../sigNoz.schemas';

+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
 /**
 * This endpoint gets the host info from zeus.
 * @summary Get host info from Zeus.
--- a/frontend/src/api/metricsExplorer/getMetricsTreeMap.ts
+++ b/frontend/src/api/metricsExplorer/getMetricsTreeMap.ts
@@ -0,0 +1,54 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { TreemapViewType } from 'container/MetricsExplorer/Summary/types';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface MetricsTreeMapPayload {
+	filters: TagFilter;
+	limit?: number;
+	treemap?: TreemapViewType;
+}
+
+export interface MetricsTreeMapResponse {
+	status: string;
+	data: {
+		[TreemapViewType.TIMESERIES]: TimeseriesData[];
+		[TreemapViewType.SAMPLES]: SamplesData[];
+	};
+}
+
+export interface TimeseriesData {
+	percentage: number;
+	total_value: number;
+	metric_name: string;
+}
+
+export interface SamplesData {
+	percentage: number;
+	metric_name: string;
+}
+
+export const getMetricsTreeMap = async (
+	props: MetricsTreeMapPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<MetricsTreeMapResponse> | ErrorResponse> => {
+	try {
+		const response = await axios.post('/metrics/treemap', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+			params: props,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
--- a/frontend/src/api/metricsExplorer/updateMetricMetadata.ts
+++ b/frontend/src/api/metricsExplorer/updateMetricMetadata.ts
@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+import { Temporality } from './getMetricDetails';
+import { MetricType } from './getMetricsList';
+
+export interface UpdateMetricMetadataProps {
+	description: string;
+	metricType: MetricType;
+	temporality?: Temporality;
+	isMonotonic?: boolean;
+	unit?: string;
+}
+
+export interface UpdateMetricMetadataResponse {
+	success: boolean;
+	message: string;
+}
+
+const updateMetricMetadata = async (
+	metricName: string,
+	props: UpdateMetricMetadataProps,
+): Promise<SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse> => {
+	const response = await axios.post(`/metrics/${metricName}/metadata`, {
+		...props,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default updateMetricMetadata;
--- a/frontend/src/api/querySuggestions/getKeySuggestions.ts
+++ b/frontend/src/api/querySuggestions/getKeySuggestions.ts
@@ -1,6 +1,5 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
-import store from 'store';
 import {
 	QueryKeyRequestProps,
 	QueryKeySuggestionsResponseProps,
@@ -18,12 +17,6 @@ export const getKeySuggestions = (
 		signalSource = '',
 	} = props;

-	const { globalTime } = store.getState();
-	const resolvedTimeRange = {
-		startUnixMilli: Math.floor(globalTime.minTime / 1000000),
-		endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
-	};
-
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedMetricName = encodeURIComponent(metricName);
@@ -31,14 +24,7 @@ export const getKeySuggestions = (
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
 	const encodedSource = encodeURIComponent(signalSource);

-	let url = `/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`;
-
-	if (resolvedTimeRange.startUnixMilli !== undefined) {
-		url += `&startUnixMilli=${resolvedTimeRange.startUnixMilli}`;
-	}
-	if (resolvedTimeRange.endUnixMilli !== undefined) {
-		url += `&endUnixMilli=${resolvedTimeRange.endUnixMilli}`;
-	}
-
-	return axios.get(url);
+	return axios.get(
+		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
+	);
 };
--- a/frontend/src/api/querySuggestions/getValueSuggestion.ts
+++ b/frontend/src/api/querySuggestions/getValueSuggestion.ts
@@ -1,6 +1,5 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
-import store from 'store';
 import {
 	QueryKeyValueRequestProps,
 	QueryKeyValueSuggestionsResponseProps,
@@ -9,20 +8,7 @@ import {
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
-	const {
-		signal,
-		key,
-		searchText,
-		signalSource,
-		metricName,
-		existingQuery,
-	} = props;
-
-	const { globalTime } = store.getState();
-	const resolvedTimeRange = {
-		startUnixMilli: Math.floor(globalTime.minTime / 1000000),
-		endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
-	};
+	const { signal, key, searchText, signalSource, metricName } = props;

 	const encodedSignal = encodeURIComponent(signal);
 	const encodedKey = encodeURIComponent(key);
@@ -30,17 +16,7 @@ export const getValueSuggestions = (
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedSource = encodeURIComponent(signalSource || '');

-	let url = `/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`;
-
-	if (resolvedTimeRange.startUnixMilli !== undefined) {
-		url += `&startUnixMilli=${resolvedTimeRange.startUnixMilli}`;
-	}
-	if (resolvedTimeRange.endUnixMilli !== undefined) {
-		url += `&endUnixMilli=${resolvedTimeRange.endUnixMilli}`;
-	}
-	if (existingQuery) {
-		url += `&existingQuery=${encodeURIComponent(existingQuery)}`;
-	}
-
-	return axios.get(url);
+	return axios.get(
+		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
+	);
 };
--- a/frontend/src/auto-import-registry.d.ts
+++ b/frontend/src/auto-import-registry.d.ts
@@ -1,7 +1,7 @@
 // -------------------------------------------------------------------------
 // AUTO-GENERATED FILE
 // -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.cjs automatically
+// This file is generated by scripts/update-registry.js automatically
 // whenever you run 'yarn install' or 'npm install'.
 //
 // It forces VS Code to index these specific packages to fix auto-import
@@ -18,8 +18,6 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
-import '@signozhq/dialog';
-import '@signozhq/drawer';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
@@ -28,5 +26,4 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
-import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
--- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx
+++ b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx
@@ -16,7 +16,7 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import type { FilterDropdownProps } from 'antd/lib/table/interface';
+import { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {
 	getQueueOverview,
--- a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import type { DefaultOptionType } from 'antd/es/select';
+import { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
--- a/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts
+++ b/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { DefaultOptionType } from 'antd/es/select';
+import { DefaultOptionType } from 'antd/es/select';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
--- a/frontend/src/components/DraggableTableRow/tests/snapshots/DraggableTableRow.test.tsx.snap
+++ b/frontend/src/components/DraggableTableRow/tests/snapshots/DraggableTableRow.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
 <DocumentFragment>
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss
@@ -1,304 +0,0 @@
-.edit-member-drawer {
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
-	&__body {
-		flex: 1;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		padding: var(--padding-5) var(--padding-4);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		cursor: default;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__input-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 8px;
-		border-radius: 2px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-
-		&--disabled {
-			cursor: not-allowed;
-			opacity: 0.8;
-		}
-	}
-
-	&__email-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-	}
-
-	&__lock-icon {
-		color: var(--foreground);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__role-select {
-		width: 100%;
-		height: 32px;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: 0 var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			line-height: 32px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		margin-top: var(--margin-1);
-	}
-
-	&__meta-item {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-
-	&__meta-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: 56px;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--border);
-		flex-shrink: 0;
-		background: var(--card);
-	}
-
-	&__footer-left {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-8);
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-6);
-	}
-
-	&__footer-divider {
-		width: 1px;
-		height: 21px;
-		background: var(--border);
-		flex-shrink: 0;
-	}
-
-	&__footer-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-3);
-		padding: 0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		font-family: Inter, sans-serif;
-		font-size: var(--label-small-400-font-size);
-		font-weight: var(--label-small-400-font-weight);
-		line-height: var(--label-small-400-line-height);
-		letter-spacing: var(--label-small-400-letter-spacing);
-		transition: opacity 0.15s ease;
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		&:not(:disabled):hover {
-			opacity: 0.8;
-		}
-
-		&--danger {
-			color: var(--destructive);
-		}
-
-		&--warning {
-			color: var(--accent-amber);
-		}
-	}
-}
-
-.delete-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-
-	[data-slot='dialog-title'] {
-		color: var(--l1-foreground);
-	}
-
-	&__body {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
-		}
-	}
-
-	&__footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--spacing-4);
-		margin-top: 24px;
-	}
-}
-
-.reset-link-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-
-	[data-slot='dialog-header'] {
-		border-color: var(--l2-border);
-		color: var(--l1-foreground);
-	}
-
-	[data-slot='dialog-description'] {
-		width: 510px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-	}
-
-	&__description {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-		white-space: normal;
-		word-break: break-word;
-	}
-
-	&__link-row {
-		display: flex;
-		align-items: center;
-		height: 32px;
-		overflow: hidden;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-	}
-
-	&__link-text-wrap {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-	}
-
-	&__link-text {
-		display: block;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		padding: 0 var(--padding-2);
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-	}
-
-	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px;
-		border-radius: 0 2px 2px 0;
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
-		border-left: 1px solid var(--border);
-		min-width: 64px;
-	}
-}
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -1,472 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { DrawerWrapper } from '@signozhq/drawer';
-import {
-	Check,
-	ChevronDown,
-	Copy,
-	Link,
-	LockKeyhole,
-	RefreshCw,
-	Trash2,
-	X,
-} from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Select } from 'antd';
-import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
-import sendInvite from 'api/v1/invite/create';
-import cancelInvite from 'api/v1/invite/id/delete';
-import deleteUser from 'api/v1/user/id/delete';
-import update from 'api/v1/user/id/update';
-import { MemberRow } from 'components/MembersTable/MembersTable';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { INVITE_PREFIX, MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './EditMemberDrawer.styles.scss';
-
-export interface EditMemberDrawerProps {
-	member: MemberRow | null;
-	open: boolean;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function EditMemberDrawer({
-	member,
-	open,
-	onClose,
-	onSuccess,
-}: EditMemberDrawerProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const [displayName, setDisplayName] = useState('');
-	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
-	const [isSaving, setIsSaving] = useState(false);
-	const [isDeleting, setIsDeleting] = useState(false);
-	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
-	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-	const [resetLink, setResetLink] = useState<string | null>(null);
-	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
-	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
-
-	const isInvited = member?.status === MemberStatus.Invited;
-	// Invited member IDs are prefixed with 'invite-'; strip it to get the real invite ID
-	const inviteId =
-		isInvited && member ? member.id.slice(INVITE_PREFIX.length) : null;
-
-	useEffect(() => {
-		if (member) {
-			setDisplayName(member.name ?? '');
-			setSelectedRole(member.role);
-		}
-	}, [member]);
-
-	const isDirty =
-		member !== null &&
-		(displayName !== member.name || selectedRole !== member.role);
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
-			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
-		},
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!member || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				await sendInvite({
-					email: member.email,
-					name: displayName,
-					role: selectedRole,
-					frontendBaseUrl: window.location.origin,
-				});
-				toast.success('Invite updated successfully', { richColors: true });
-			} else {
-				await update({
-					userId: member.id,
-					displayName,
-					role: selectedRole,
-				});
-				toast.success('Member details updated successfully', { richColors: true });
-			}
-			onSuccess();
-			onClose();
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to update invite' : 'Failed to update member details',
-				{ richColors: true },
-			);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		member,
-		isDirty,
-		isInvited,
-		inviteId,
-		displayName,
-		selectedRole,
-		onSuccess,
-		onClose,
-	]);
-
-	const handleDelete = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		setIsDeleting(true);
-		try {
-			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				toast.success('Invitation cancelled successfully', { richColors: true });
-			} else {
-				await deleteUser({ userId: member.id });
-				toast.success('Member deleted successfully', { richColors: true });
-			}
-			setShowDeleteConfirm(false);
-			onSuccess();
-			onClose();
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to cancel invitation' : 'Failed to delete member',
-				{ richColors: true },
-			);
-		} finally {
-			setIsDeleting(false);
-		}
-	}, [member, isInvited, inviteId, onSuccess, onClose]);
-
-	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		setIsGeneratingLink(true);
-		try {
-			const response = await getResetPasswordToken({ userId: member.id });
-			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
-				setResetLink(link);
-				setHasCopiedResetLink(false);
-				setShowResetLinkDialog(true);
-				onClose();
-			}
-		} catch {
-			toast.error('Failed to generate password reset link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} finally {
-			setIsGeneratingLink(false);
-		}
-	}, [member, onClose]);
-
-	const handleCopyResetLink = useCallback(async (): Promise<void> => {
-		if (!resetLink) {
-			return;
-		}
-		try {
-			await navigator.clipboard.writeText(resetLink);
-			setHasCopiedResetLink(true);
-			setTimeout(() => setHasCopiedResetLink(false), 2000);
-			toast.success('Reset link copied to clipboard', { richColors: true });
-		} catch {
-			toast.error('Failed to copy link', {
-				richColors: true,
-			});
-		}
-	}, [resetLink]);
-
-	const handleCopyInviteLink = useCallback(async (): Promise<void> => {
-		if (!member?.token) {
-			toast.error('Invite link is not available', {
-				richColors: true,
-				position: 'top-right',
-			});
-			return;
-		}
-		const inviteLink = `${window.location.origin}${ROUTES.SIGN_UP}?token=${member.token}`;
-		try {
-			await navigator.clipboard.writeText(inviteLink);
-			toast.success('Invite link copied to clipboard', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} catch {
-			toast.error('Failed to copy invite link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		}
-	}, [member]);
-
-	const handleClose = useCallback((): void => {
-		setShowDeleteConfirm(false);
-		onClose();
-	}, [onClose]);
-
-	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
-
-	const drawerContent = (
-		<div className="edit-member-drawer__layout">
-			<div className="edit-member-drawer__body">
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-name">
-						Name
-					</label>
-					<Input
-						id="member-name"
-						value={displayName}
-						onChange={(e): void => setDisplayName(e.target.value)}
-						className="edit-member-drawer__input"
-						placeholder="Enter name"
-					/>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-email">
-						Email Address
-					</label>
-					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-						<span className="edit-member-drawer__email-text">
-							{member?.email || '—'}
-						</span>
-						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-					</div>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-role">
-						Roles
-					</label>
-					<Select
-						id="member-role"
-						value={selectedRole}
-						onChange={(role): void => setSelectedRole(role as ROLES)}
-						className="edit-member-drawer__role-select"
-						suffixIcon={<ChevronDown size={14} />}
-						getPopupContainer={(triggerNode): HTMLElement =>
-							(triggerNode?.closest('.edit-member-drawer') as HTMLElement) ||
-							document.body
-						}
-					>
-						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
-						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
-						<Select.Option value="VIEWER">{capitalize('VIEWER')}</Select.Option>
-					</Select>
-				</div>
-
-				<div className="edit-member-drawer__meta">
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">Status</span>
-						{member?.status === MemberStatus.Active ? (
-							<Badge color="forest" variant="outline">
-								ACTIVE
-							</Badge>
-						) : (
-							<Badge color="amber" variant="outline">
-								INVITED
-							</Badge>
-						)}
-					</div>
-
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
-					</div>
-					{!isInvited && (
-						<div className="edit-member-drawer__meta-item">
-							<span className="edit-member-drawer__meta-label">Last Modified</span>
-							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
-						</div>
-					)}
-				</div>
-			</div>
-
-			<div className="edit-member-drawer__footer">
-				<div className="edit-member-drawer__footer-left">
-					<Button
-						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-						onClick={(): void => setShowDeleteConfirm(true)}
-					>
-						<Trash2 size={12} />
-						{isInvited ? 'Cancel Invite' : 'Delete Member'}
-					</Button>
-
-					<div className="edit-member-drawer__footer-divider" />
-
-					{isInvited ? (
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleCopyInviteLink}
-							disabled={!member?.token}
-						>
-							<Link size={12} />
-							Copy Invite Link
-						</Button>
-					) : (
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleGenerateResetLink}
-							disabled={isGeneratingLink}
-						>
-							<RefreshCw size={12} />
-							{isGeneratingLink ? 'Generating...' : 'Generate Password Reset Link'}
-						</Button>
-					)}
-				</div>
-
-				<div className="edit-member-drawer__footer-right">
-					<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-						<X size={14} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={!isDirty || isSaving}
-						onClick={handleSave}
-					>
-						{isSaving ? 'Saving...' : 'Save Member Details'}
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-
-	const deleteDialogTitle = isInvited ? 'Cancel Invitation' : 'Delete Member';
-	const deleteDialogBody = isInvited ? (
-		<>
-			Are you sure you want to cancel the invitation for{' '}
-			<strong>{member?.email}</strong>? They will no longer be able to join the
-			workspace using this invite.
-		</>
-	) : (
-		<>
-			Are you sure you want to delete{' '}
-			<strong>{member?.name || member?.email}</strong>? This will permanently
-			remove their access to the workspace.
-		</>
-	);
-	const deleteConfirmLabel = isInvited ? 'Cancel Invite' : 'Delete Member';
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				type="panel"
-				showCloseButton
-				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Member Details' }}
-				content={drawerContent}
-				className="edit-member-drawer"
-			/>
-
-			<DialogWrapper
-				open={showResetLinkDialog}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowResetLinkDialog(false);
-					}
-				}}
-				title="Password Reset Link"
-				showCloseButton
-				width="base"
-				className="reset-link-dialog"
-			>
-				<div className="reset-link-dialog__content">
-					<p className="reset-link-dialog__description">
-						This creates a one-time link the team member can use to set a new password
-						for their SigNoz account.
-					</p>
-					<div className="reset-link-dialog__link-row">
-						<div className="reset-link-dialog__link-text-wrap">
-							<span className="reset-link-dialog__link-text">{resetLink}</span>
-						</div>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="sm"
-							onClick={handleCopyResetLink}
-							prefixIcon={
-								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
-							}
-							className="reset-link-dialog__copy-btn"
-						>
-							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
-						</Button>
-					</div>
-				</div>
-			</DialogWrapper>
-
-			<DialogWrapper
-				open={showDeleteConfirm}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowDeleteConfirm(false);
-					}
-				}}
-				title={deleteDialogTitle}
-				width="narrow"
-				className="alert-dialog delete-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="delete-dialog__body">{deleteDialogBody}</p>
-
-				<DialogFooter className="delete-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setShowDeleteConfirm(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDeleting}
-						onClick={handleDelete}
-					>
-						<Trash2 size={12} />
-						{isDeleting ? 'Processing...' : deleteConfirmLabel}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-		</>
-	);
-}
-
-export default EditMemberDrawer;
--- a/frontend/src/components/Editor/snapshots/Editor.test.tsx.snap
+++ b/frontend/src/components/Editor/snapshots/Editor.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Editor renders correctly with custom props 1`] = `
 <div>
--- a/frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx
+++ b/frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx
@@ -13,8 +13,7 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));

-jest.mock('antd', () => ({
-	...jest.requireActual('antd'),
+jest.mock('antd/es/form/Form', () => ({
 	useForm: jest.fn().mockReturnValue({
 		onFinish: jest.fn(),
 	}),
--- a/frontend/src/components/ExplorerCard/types.ts
+++ b/frontend/src/components/ExplorerCard/types.ts
@@ -1,6 +1,6 @@
 import { UseMutateAsyncFunction } from 'react-query';
 import { FormInstance } from 'antd';
-import type { NotificationInstance } from 'antd/es/notification/interface';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import { AxiosResponse } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { OptionsQuery } from 'container/OptionsMenu/types';
--- a/frontend/src/components/ExplorerCard/utils.ts
+++ b/frontend/src/components/ExplorerCard/utils.ts
@@ -1,4 +1,4 @@
-import type { NotificationInstance } from 'antd/es/notification/interface';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
--- a/frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx
+++ b/frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx
@@ -1,321 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ENVIRONMENT } from 'constants/env';
-import { BrandedPermission } from 'hooks/useAuthZ/types';
-import { buildPermission } from 'hooks/useAuthZ/utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import { GuardAuthZ } from './GuardAuthZ';
-
-const BASE_URL = ENVIRONMENT.baseURL || '';
-const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
-describe('GuardAuthZ', () => {
-	const TestChild = (): ReactElement => <div>Protected Content</div>;
-	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
-	const ErrorFallback = (error: Error): ReactElement => (
-		<div>Error occurred: {error.message}</div>
-	);
-	const NoPermissionFallback = (_response: {
-		requiredPermissionName: BrandedPermission;
-	}): ReactElement => <div>Access denied</div>;
-	const NoPermissionFallbackWithSuggestions = (response: {
-		requiredPermissionName: BrandedPermission;
-	}): ReactElement => (
-		<div>
-			Access denied. Required permission: {response.requiredPermissionName}
-		</div>
-	);
-
-	it('should render children when permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-
-	it('should render fallbackOnLoading when loading', () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
-				return res(
-					ctx.delay('infinite'),
-					ctx.status(200),
-					ctx.json({ data: [], status: 'success' }),
-				);
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnLoading={<LoadingFallback />}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		expect(screen.getByText('Loading...')).toBeInTheDocument();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when loading and no fallbackOnLoading provided', () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
-				return res(
-					ctx.delay('infinite'),
-					ctx.status(200),
-					ctx.json({ data: [], status: 'success' }),
-				);
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		expect(container.firstChild).toBeNull();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render fallbackOnError when API error occurs', async () => {
-		const errorMessage = 'Internal Server Error';
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnError={ErrorFallback}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText(/Error occurred:/)).toBeInTheDocument();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should pass error object to fallbackOnError function', async () => {
-		const errorMessage = 'Network request failed';
-		let receivedError: Error | null = null;
-
-		const errorFallbackWithCapture = (error: Error): ReactElement => {
-			receivedError = error;
-			return <div>Captured error: {error.message}</div>;
-		};
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnError={errorFallbackWithCapture}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(receivedError).not.toBeNull();
-		});
-
-		expect(receivedError).toBeInstanceOf(Error);
-		expect(screen.getByText(/Captured error:/)).toBeInTheDocument();
-	});
-
-	it('should render null when error occurs and no fallbackOnError provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render fallbackOnNoPermissions when permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="update"
-				object="dashboard:123"
-				fallbackOnNoPermissions={NoPermissionFallback}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Access denied')).toBeInTheDocument();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when permission is denied and no fallbackOnNoPermissions provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="update" object="dashboard:123">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when permissions object is null', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="update"
-				object="dashboard:123"
-				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(
-				screen.getByText(/Access denied. Required permission:/),
-			).toBeInTheDocument();
-		});
-
-		expect(
-			screen.getAllByText(
-				new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
-			).length,
-		).toBeGreaterThan(0);
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should handle different relation and object combinations', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const { rerender } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-
-		rerender(
-			<GuardAuthZ relation="delete" object="dashboard:456">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-});
--- a/frontend/src/components/GuardAuthZ/GuardAuthZ.tsx
+++ b/frontend/src/components/GuardAuthZ/GuardAuthZ.tsx
@@ -1,50 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'hooks/useAuthZ/types';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { buildPermission } from 'hooks/useAuthZ/utils';
-
-export type GuardAuthZProps<R extends AuthZRelation> = {
-	children: ReactElement;
-	relation: R;
-	object: AuthZObject<R>;
-	fallbackOnLoading?: JSX.Element;
-	fallbackOnError?: (error: Error) => JSX.Element;
-	fallbackOnNoPermissions?: (response: {
-		requiredPermissionName: BrandedPermission;
-	}) => JSX.Element;
-};
-
-export function GuardAuthZ<R extends AuthZRelation>({
-	children,
-	relation,
-	object,
-	fallbackOnLoading,
-	fallbackOnError,
-	fallbackOnNoPermissions,
-}: GuardAuthZProps<R>): JSX.Element | null {
-	const permission = buildPermission<R>(relation, object);
-
-	const { permissions, isLoading, error } = useAuthZ([permission]);
-
-	if (isLoading) {
-		return fallbackOnLoading ?? null;
-	}
-
-	if (error) {
-		return fallbackOnError?.(error) ?? null;
-	}
-
-	if (!permissions?.[permission]?.isGranted) {
-		return (
-			fallbackOnNoPermissions?.({
-				requiredPermissionName: permission,
-			}) ?? null
-		);
-	}
-
-	return children;
-}
--- a/frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx
@@ -1,4 +1,5 @@
-import { TableColumnsType as ColumnsType, Tag, Typography } from 'antd';
+import { Tag, Typography } from 'antd';
+import { ColumnsType } from 'antd/es/table';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {
--- a/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
@@ -12,7 +12,7 @@ import {
 	Tag,
 	Typography,
 } from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
+import { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
@@ -1,264 +0,0 @@
-.invite-members-modal {
-	max-width: 700px;
-	background: var(--popover);
-	border: 1px solid var(--secondary);
-	border-radius: 4px;
-	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
-
-	[data-slot='dialog-header'] {
-		padding: var(--padding-4);
-		border-bottom: 1px solid var(--secondary);
-		flex-shrink: 0;
-		background: transparent;
-		margin: 0;
-	}
-
-	[data-slot='dialog-title'] {
-		font-family: Inter, sans-serif;
-		font-size: var(--label-base-400-font-size);
-		font-weight: var(--label-base-400-font-weight);
-		line-height: var(--label-base-400-line-height);
-		letter-spacing: -0.065px;
-		color: var(--bg-base-white);
-		margin: 0;
-	}
-
-	[data-slot='dialog-description'] {
-		padding: 0;
-
-		.invite-members-modal__content {
-			display: flex;
-			flex-direction: column;
-			gap: var(--spacing-8);
-			padding: var(--padding-4);
-		}
-	}
-}
-
-.invite-members-modal__table {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	width: 100%;
-}
-
-.invite-members-modal__table-header {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-8);
-	width: 100%;
-
-	.email-header {
-		flex: 0 0 240px;
-	}
-
-	.role-header {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	.action-header {
-		flex: 0 0 32px;
-	}
-
-	.table-header-cell {
-		font-family: Inter, sans-serif;
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-}
-
-.invite-members-modal__container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	width: 100%;
-}
-
-.team-member-row {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--spacing-8);
-	width: 100%;
-
-	> .email-cell {
-		flex: 0 0 240px;
-	}
-
-	> .role-cell {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	> .action-cell {
-		flex: 0 0 32px;
-	}
-}
-
-.team-member-cell {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-
-	&.action-cell {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 32px;
-	}
-}
-
-.team-member-email-input {
-	width: 100%;
-	height: 32px;
-	color: var(--l1-foreground);
-	background-color: var(--l2-background);
-	border-color: var(--border);
-	font-size: var(--paragraph-base-400-font-size);
-
-	&::placeholder {
-		color: var(--l3-foreground);
-	}
-
-	&:focus {
-		border-color: var(--primary);
-		box-shadow: none;
-	}
-}
-.team-member-role-select {
-	width: 100%;
-
-	.ant-select-selector {
-		height: 32px;
-		border-radius: 2px;
-		background-color: var(--l2-background) !important;
-		border: 1px solid var(--border) !important;
-		padding: 0 var(--padding-2) !important;
-
-		.ant-select-selection-placeholder {
-			color: var(--l3-foreground);
-			opacity: 0.4;
-			font-size: var(--paragraph-base-400-font-size);
-			letter-spacing: -0.07px;
-			line-height: 32px;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--paragraph-base-400-font-size);
-			letter-spacing: -0.07px;
-			color: var(--bg-base-white);
-			line-height: 32px;
-		}
-	}
-
-	.ant-select-arrow {
-		color: var(--foreground);
-	}
-
-	&.ant-select-focused .ant-select-selector,
-	&:not(.ant-select-disabled):hover .ant-select-selector {
-		border-color: var(--primary);
-	}
-}
-
-.remove-team-member-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	min-width: 32px;
-	border: none;
-	border-radius: 2px;
-	background: transparent;
-	color: var(--destructive);
-	opacity: 0.6;
-	padding: 0;
-	transition: background-color 0.2s, opacity 0.2s;
-	box-shadow: none;
-
-	&:hover {
-		background: rgba(229, 72, 77, 0.1);
-		opacity: 0.9;
-	}
-}
-
-.email-error-message {
-	display: block;
-	font-family: Inter, sans-serif;
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-normal);
-	line-height: var(--line-height-18);
-	color: var(--destructive);
-}
-
-.invite-team-members-error-callout {
-	background: rgba(229, 72, 77, 0.1);
-	border: 1px solid rgba(229, 72, 77, 0.2);
-	border-radius: 4px;
-	animation: horizontal-shaking 300ms ease-out;
-}
-
-@keyframes horizontal-shaking {
-	0% {
-		transform: translateX(0);
-	}
-	25% {
-		transform: translateX(5px);
-	}
-	50% {
-		transform: translateX(-5px);
-	}
-	75% {
-		transform: translateX(5px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-
-.invite-members-modal__footer {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 var(--padding-4);
-	height: 56px;
-	min-height: 56px;
-	border-top: 1px solid var(--secondary);
-	gap: 0;
-	flex-shrink: 0;
-}
-
-.invite-members-modal__footer-right {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.add-another-member-button {
-	&:hover {
-		border-color: var(--primary);
-		border-style: dashed;
-		color: var(--l1-foreground);
-	}
-}
-
-.lightMode {
-	.invite-members-modal {
-		[data-slot='dialog-title'] {
-			color: var(--bg-base-black);
-		}
-	}
-
-	.team-member-role-select {
-		.ant-select-selector {
-			.ant-select-selection-item {
-				color: var(--bg-base-black);
-			}
-		}
-	}
-}
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
@@ -1,333 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { Style } from '@signozhq/design-tokens';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Select } from 'antd';
-import sendInvite from 'api/v1/invite/create';
-import { cloneDeep, debounce } from 'lodash-es';
-import { ROLES } from 'types/roles';
-import { v4 as uuid } from 'uuid';
-
-import './InviteMembersModal.styles.scss';
-
-interface InviteRow {
-	id: string;
-	email: string;
-	role: ROLES | '';
-}
-
-export interface InviteMembersModalProps {
-	open: boolean;
-	onClose: () => void;
-	onSuccess?: () => void;
-}
-
-const EMPTY_ROW = (): InviteRow => ({ id: uuid(), email: '', role: '' });
-
-const isRowTouched = (row: InviteRow): boolean =>
-	row.email.trim() !== '' || Boolean(row.role && row.role.trim() !== '');
-
-function InviteMembersModal({
-	open,
-	onClose,
-	onSuccess,
-}: InviteMembersModalProps): JSX.Element {
-	const [rows, setRows] = useState<InviteRow[]>([]);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
-
-	const resetAndClose = useCallback((): void => {
-		setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
-		setEmailValidity({});
-		setHasInvalidEmails(false);
-		setHasInvalidRoles(false);
-		onClose();
-	}, [onClose]);
-
-	useEffect(() => {
-		if (open) {
-			setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
-		}
-	}, [open]);
-
-	const getValidationErrorMessage = (): string => {
-		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for team members';
-		}
-		if (hasInvalidEmails) {
-			return 'Please enter valid emails for team members';
-		}
-		return 'Please select roles for team members';
-	};
-
-	const validateAllUsers = useCallback((): boolean => {
-		let isValid = true;
-		let hasEmailErrors = false;
-		let hasRoleErrors = false;
-
-		const updatedEmailValidity: Record<string, boolean> = {};
-
-		const touchedRows = rows.filter(isRowTouched);
-
-		touchedRows.forEach((row) => {
-			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.email);
-			const roleValid = Boolean(row.role && row.role.trim() !== '');
-
-			if (!emailValid || !row.email) {
-				isValid = false;
-				hasEmailErrors = true;
-			}
-			if (!roleValid) {
-				isValid = false;
-				hasRoleErrors = true;
-			}
-
-			if (row.id) {
-				updatedEmailValidity[row.id] = emailValid;
-			}
-		});
-
-		setEmailValidity(updatedEmailValidity);
-		setHasInvalidEmails(hasEmailErrors);
-		setHasInvalidRoles(hasRoleErrors);
-
-		return isValid;
-	}, [rows]);
-
-	const debouncedValidateEmail = useMemo(
-		() =>
-			debounce((email: string, rowId: string) => {
-				const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-				setEmailValidity((prev) => ({ ...prev, [rowId]: isValid }));
-			}, 500),
-		[],
-	);
-
-	const updateEmail = (id: string, email: string): void => {
-		const updatedRows = cloneDeep(rows);
-		const rowToUpdate = updatedRows.find((r) => r.id === id);
-		if (rowToUpdate) {
-			rowToUpdate.email = email;
-			setRows(updatedRows);
-
-			if (hasInvalidEmails) {
-				setHasInvalidEmails(false);
-			}
-			if (emailValidity[id] === false) {
-				setEmailValidity((prev) => ({ ...prev, [id]: true }));
-			}
-
-			debouncedValidateEmail(email, id);
-		}
-	};
-
-	const updateRole = (id: string, role: ROLES): void => {
-		const updatedRows = cloneDeep(rows);
-		const rowToUpdate = updatedRows.find((r) => r.id === id);
-		if (rowToUpdate) {
-			rowToUpdate.role = role;
-			setRows(updatedRows);
-
-			if (hasInvalidRoles) {
-				setHasInvalidRoles(false);
-			}
-		}
-	};
-
-	const addRow = (): void => {
-		setRows((prev) => [...prev, EMPTY_ROW()]);
-	};
-
-	const removeRow = (id: string): void => {
-		setRows((prev) => prev.filter((r) => r.id !== id));
-	};
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		if (!validateAllUsers()) {
-			return;
-		}
-
-		const touchedRows = rows.filter(isRowTouched);
-		if (touchedRows.length === 0) {
-			return;
-		}
-
-		setIsSubmitting(true);
-		let hasError = false;
-
-		await Promise.all(
-			touchedRows.map(
-				async (row): Promise<void> => {
-					try {
-						await sendInvite({
-							email: row.email.trim(),
-							name: '',
-							role: row.role as ROLES,
-							frontendBaseUrl: window.location.origin,
-						});
-					} catch (err: unknown) {
-						hasError = true;
-						const apiErr = err as {
-							response?: { status: number };
-							getErrorMessage?: () => string;
-						};
-						if (apiErr?.response?.status === 409) {
-							toast.error(`${row.email} is already a member`, { richColors: true });
-						} else {
-							const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-							toast.error(`Failed to invite ${row.email}: ${errorMessage}`, {
-								richColors: true,
-							});
-						}
-					}
-				},
-			),
-		);
-
-		setIsSubmitting(false);
-
-		if (!hasError) {
-			toast.success('Invites sent successfully', { richColors: true });
-			resetAndClose();
-			onSuccess?.();
-		} else {
-			onSuccess?.();
-		}
-	}, [rows, onSuccess, resetAndClose, validateAllUsers]);
-
-	const touchedRows = rows.filter(isRowTouched);
-	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
-
-	return (
-		<DialogWrapper
-			title="Invite Team Members"
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					resetAndClose();
-				}
-			}}
-			showCloseButton
-			width="wide"
-			className="invite-members-modal"
-			disableOutsideClick={false}
-		>
-			<div className="invite-members-modal__content">
-				<div className="invite-members-modal__table">
-					<div className="invite-members-modal__table-header">
-						<div className="table-header-cell email-header">Email address</div>
-						<div className="table-header-cell role-header">Roles</div>
-						<div className="table-header-cell action-header" />
-					</div>
-					<div className="invite-members-modal__container">
-						{rows.map(
-							(row): JSX.Element => (
-								<div key={row.id} className="team-member-row">
-									<div className="team-member-cell email-cell">
-										<Input
-											type="email"
-											placeholder="john@signoz.io"
-											value={row.email}
-											onChange={(e): void => updateEmail(row.id, e.target.value)}
-											className="team-member-email-input"
-										/>
-										{emailValidity[row.id] === false && row.email.trim() !== '' && (
-											<span className="email-error-message">Invalid email address</span>
-										)}
-									</div>
-									<div className="team-member-cell role-cell">
-										<Select
-											value={row.role || undefined}
-											onChange={(role): void => updateRole(row.id, role as ROLES)}
-											className="team-member-role-select"
-											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={(triggerNode): HTMLElement =>
-												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-												document.body
-											}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
-									</div>
-									<div className="team-member-cell action-cell">
-										{rows.length > 1 && (
-											<Button
-												variant="ghost"
-												color="destructive"
-												className="remove-team-member-button"
-												onClick={(): void => removeRow(row.id)}
-												aria-label="Remove row"
-											>
-												<Trash2 size={12} />
-											</Button>
-										)}
-									</div>
-								</div>
-							),
-						)}
-					</div>
-				</div>
-
-				{(hasInvalidEmails || hasInvalidRoles) && (
-					<Callout
-						type="error"
-						size="small"
-						showIcon
-						icon={<CircleAlert size={12} />}
-						className="invite-team-members-error-callout"
-						description={getValidationErrorMessage()}
-					/>
-				)}
-			</div>
-
-			<DialogFooter className="invite-members-modal__footer">
-				<Button
-					variant="dashed"
-					color="secondary"
-					size="sm"
-					className="add-another-member-button"
-					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
-					onClick={addRow}
-				>
-					Add another
-				</Button>
-
-				<div className="invite-members-modal__footer-right">
-					<Button
-						type="button"
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={resetAndClose}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						onClick={handleSubmit}
-						disabled={isSubmitDisabled}
-					>
-						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
-					</Button>
-				</div>
-			</DialogFooter>
-		</DialogWrapper>
-	);
-}
-
-export default InviteMembersModal;
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
+import { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
--- a/frontend/src/components/Logs/TableView/types.ts
+++ b/frontend/src/components/Logs/TableView/types.ts
@@ -1,7 +1,4 @@
-import {
-	TableColumnsType as ColumnsType,
-	TableColumnType as ColumnType,
-} from 'antd';
+import { ColumnsType, ColumnType } from 'antd/es/table';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { TableColumnsType as ColumnsType, Typography } from 'antd';
+import { Typography } from 'antd';
+import { ColumnsType } from 'antd/es/table';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
+import { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
--- a/frontend/src/components/MembersTable/MembersTable.styles.scss
+++ b/frontend/src/components/MembersTable/MembersTable.styles.scss
@@ -1,204 +0,0 @@
-.members-table-wrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border-radius: 4px;
-}
-
-.members-table {
-	.ant-table {
-		background: transparent;
-		font-size: 13px;
-	}
-
-	.ant-table-container {
-		border-radius: 0 !important;
-		border: none !important;
-	}
-
-	.ant-table-thead {
-		> tr > th,
-		> tr > td {
-			background: var(--background);
-			font-size: var(--paragraph-small-600-font-size);
-			font-weight: var(--paragraph-small-600-font-weight);
-			line-height: var(--paragraph-small-600-line-height);
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-			color: var(--foreground);
-			padding: var(--padding-2) var(--padding-4);
-			border-bottom: none !important;
-			border-top: none !important;
-
-			&::before {
-				display: none !important;
-			}
-			.ant-table-column-sorter {
-				color: var(--foreground);
-				opacity: 0.6;
-			}
-
-			.ant-table-column-sorter-up.active,
-			.ant-table-column-sorter-down.active {
-				color: var(--bg-base-white);
-				opacity: 1;
-			}
-		}
-	}
-
-	.ant-table-tbody {
-		> tr > td {
-			border-bottom: none !important;
-			padding: var(--padding-2) var(--padding-4);
-			background: transparent;
-			transition: none;
-		}
-
-		> tr.members-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
-		}
-		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
-		}
-	}
-
-	.ant-table-wrapper,
-	.ant-table-container,
-	.ant-spin-nested-loading,
-	.ant-spin-container {
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	.member-status-cell {
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-}
-.member-name-email-cell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	height: 22px;
-	overflow: hidden;
-
-	.member-name {
-		font-size: var(--paragraph-base-500-font-size);
-		font-weight: var(--paragraph-base-500-font-weight);
-		color: var(--foreground);
-		line-height: var(--paragraph-base-500-line-height);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.member-email {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l3-foreground-hover);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.07px;
-		flex: 1 0 0;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-.member-joined-date {
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	color: var(--foreground);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.07px;
-	white-space: nowrap;
-}
-
-.member-joined-dash {
-	font-size: var(--paragraph-base-400-font-size);
-	color: var(--l3-foreground-hover);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.07px;
-}
-
-.members-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--padding-12) var(--padding-4);
-	gap: var(--spacing-4);
-	color: var(--foreground);
-
-	&__emoji {
-		font-size: var(--font-size-2xl);
-		line-height: 1;
-	}
-
-	&__text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		margin: 0;
-		line-height: var(--paragraph-base-400-font-height);
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--bg-base-white);
-		}
-	}
-}
-
-.members-table-pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: var(--padding-2) var(--padding-4);
-
-	.ant-pagination-total-text {
-		margin-right: auto;
-	}
-
-	.members-pagination-range {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-	}
-
-	.members-pagination-total {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-}
-
-.lightMode {
-	.members-table {
-		.ant-table-tbody {
-			> tr.members-table-row--tinted > td {
-				background: rgba(0, 0, 0, 0.015);
-			}
-
-			> tr:hover > td {
-				background: rgba(0, 0, 0, 0.03) !important;
-			}
-		}
-	}
-
-	.members-empty-state {
-		&__text {
-			strong {
-				color: var(--bg-base-black);
-			}
-		}
-	}
-}
--- a/frontend/src/components/MembersTable/MembersTable.tsx
+++ b/frontend/src/components/MembersTable/MembersTable.tsx
@@ -1,236 +0,0 @@
-import type React from 'react';
-import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
-import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './MembersTable.styles.scss';
-
-export interface MemberRow {
-	id: string;
-	name?: string;
-	email: string;
-	role: ROLES;
-	status: MemberStatus;
-	joinedOn: string | null;
-	updatedAt?: string | null;
-	token?: string | null;
-}
-
-interface MembersTableProps {
-	data: MemberRow[];
-	loading: boolean;
-	total: number;
-	currentPage: number;
-	pageSize: number;
-	searchQuery: string;
-	onPageChange: (page: number) => void;
-	onRowClick?: (member: MemberRow) => void;
-	onSortChange?: (
-		sorter: SorterResult<MemberRow> | SorterResult<MemberRow>[],
-	) => void;
-}
-
-function NameEmailCell({
-	name,
-	email,
-}: {
-	name?: string;
-	email: string;
-}): JSX.Element {
-	return (
-		<div className="member-name-email-cell">
-			{name && (
-				<span className="member-name" title={name}>
-					{name}
-				</span>
-			)}
-			<Tooltip title={email} overlayClassName="member-tooltip">
-				<span className="member-email">{email}</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
-	if (status === MemberStatus.Active) {
-		return (
-			<Badge color="forest" variant="outline">
-				ACTIVE
-			</Badge>
-		);
-	}
-	return (
-		<Badge color="amber" variant="outline">
-			INVITED
-		</Badge>
-	);
-}
-
-function MembersEmptyState({
-	searchQuery,
-}: {
-	searchQuery: string;
-}): JSX.Element {
-	return (
-		<div className="members-empty-state">
-			<span
-				className="members-empty-state__emoji"
-				role="img"
-				aria-label="monocle face"
-			>
-				🧐
-			</span>
-			{searchQuery ? (
-				<p className="members-empty-state__text">
-					No results for <strong>{searchQuery}</strong>
-				</p>
-			) : (
-				<p className="members-empty-state__text">No members found</p>
-			)}
-		</div>
-	);
-}
-
-function MembersTable({
-	data,
-	loading,
-	total,
-	currentPage,
-	pageSize,
-	searchQuery,
-	onPageChange,
-	onRowClick,
-	onSortChange,
-}: MembersTableProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const formatJoinedOn = (date: string | null): string => {
-		if (!date) {
-			return '—';
-		}
-		const d = new Date(date);
-		if (Number.isNaN(d.getTime())) {
-			return '—';
-		}
-		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
-	};
-
-	const columns: ColumnsType<MemberRow> = [
-		{
-			title: 'Name / Email',
-			dataIndex: 'name',
-			key: 'name',
-			render: (_, record): JSX.Element => (
-				<NameEmailCell name={record.name} email={record.email} />
-			),
-		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{capitalize(role)}</Badge>
-			),
-		},
-
-		{
-			title: 'Status',
-			dataIndex: 'status',
-			key: 'status',
-			width: 100,
-			align: 'right' as const,
-			className: 'member-status-cell',
-			sorter: (a, b): number => a.status.localeCompare(b.status),
-			render: (status: MemberRow['status']): JSX.Element => (
-				<StatusBadge status={status} />
-			),
-		},
-		{
-			title: 'Joined On',
-			dataIndex: 'joinedOn',
-			key: 'joinedOn',
-			width: 250,
-			align: 'right' as const,
-			sorter: (a, b): number => {
-				if (!a.joinedOn && !b.joinedOn) {
-					return 0;
-				}
-				if (!a.joinedOn) {
-					return 1;
-				}
-				if (!b.joinedOn) {
-					return -1;
-				}
-				return new Date(a.joinedOn).getTime() - new Date(b.joinedOn).getTime();
-			},
-			render: (joinedOn: string | null): JSX.Element => {
-				const formatted = formatJoinedOn(joinedOn);
-				const isDash = formatted === '—';
-				return (
-					<span className={isDash ? 'member-joined-dash' : 'member-joined-date'}>
-						{formatted}
-					</span>
-				);
-			},
-		},
-	];
-
-	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="members-pagination-range">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="members-pagination-total"> of {_total}</span>
-		</>
-	);
-
-	return (
-		<div className="members-table-wrapper">
-			<Table<MemberRow>
-				columns={columns}
-				dataSource={data}
-				rowKey="id"
-				loading={loading}
-				pagination={false}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'members-table-row--tinted' : ''
-				}
-				onRow={(record): React.HTMLAttributes<HTMLElement> => ({
-					onClick: (): void => onRowClick?.(record),
-					style: onRowClick ? { cursor: 'pointer' } : undefined,
-				})}
-				onChange={(_, __, sorter): void => {
-					if (onSortChange) {
-						onSortChange(
-							sorter as SorterResult<MemberRow> | SorterResult<MemberRow>[],
-						);
-					}
-				}}
-				showSorterTooltip={false}
-				locale={{
-					emptyText: <MembersEmptyState searchQuery={searchQuery} />,
-				}}
-				className="members-table"
-			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="members-table-pagination"
-				/>
-			)}
-		</div>
-	);
-}
-
-export default MembersTable;
--- a/frontend/src/components/MessageTip/snapshots/MessageTip.test.tsx.snap
+++ b/frontend/src/components/MessageTip/snapshots/MessageTip.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`MessageTip custom action 1`] = `
 .c0 {
--- a/frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx
+++ b/frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx
@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
+import { DefaultOptionType } from 'antd/es/select';
 import { Info } from 'lucide-react';

 import './MQCommon.styles.scss';
--- a/frontend/src/components/NotFound/snapshots/NotFound.test.tsx.snap
+++ b/frontend/src/components/NotFound/snapshots/NotFound.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Not Found page test should render Not Found page without errors 1`] = `
 <DocumentFragment>
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -60,30 +60,11 @@
 			gap: 8px;

 			margin-left: 108px;
-			position: relative;
-
-			/* Vertical dashed line connecting query elements */
-			&::after {
-				content: '';
-				position: absolute;
-				left: -28px;
-				top: 0;
-				bottom: 0;
-				width: 1px;
-				background: repeating-linear-gradient(
-					to bottom,
-					#1d212d,
-					#1d212d 4px,
-					transparent 4px,
-					transparent 8px
-				);
-			}

 			.code-mirror-where-clause,
 			.query-aggregation-container,
 			.query-add-ons,
-			.metrics-aggregation-section-content,
-			.metrics-container {
+			.metrics-aggregation-section-content {
 				position: relative;

 				&::before {
@@ -121,10 +102,6 @@
 			.qb-elements-container {
 				margin-left: 0px;

-				&::after {
-					display: none;
-				}
-
 				.code-mirror-where-clause,
 				.query-aggregation-container,
 				.query-add-ons,
@@ -356,7 +333,28 @@
 				text-transform: uppercase;

 				&::before {
-					display: none;
+					content: '';
+					height: 120px;
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 31px;
+					bottom: 0;
+					width: 1px;
+					background: repeating-linear-gradient(
+						to bottom,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+					left: 15px;
+				}
+
+				&.has-trace-operator {
+					&::before {
+						height: 0px;
+					}
 				}
 			}

@@ -464,21 +462,10 @@

 		.qb-content-section {
 			.qb-elements-container {
-				&::after {
-					background: repeating-linear-gradient(
-						to bottom,
-						var(--bg-vanilla-300),
-						var(--bg-vanilla-300) 4px,
-						transparent 4px,
-						transparent 8px
-					);
-				}
-
 				.code-mirror-where-clause,
 				.query-aggregation-container,
 				.query-add-ons,
-				.metrics-aggregation-section-content,
-				.metrics-container {
+				.metrics-aggregation-section-content {
 					&::before {
 						border-left: 6px dotted var(--bg-vanilla-300);
 					}
@@ -542,6 +529,18 @@

 		.qb-entity-options {
 			.options {
+				.query-name {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+
 				.formula-name {
 					&::before {
 						background: repeating-linear-gradient(
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -207,7 +207,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
-							signalSource={currentQuery.builder.queryData[0].source as 'meter' | ''}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
 							queriesCount={1}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
@@ -1,13 +1,14 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { Select } from 'antd';
 import {
 	initialQueriesMap,
 	initialQueryMeterWithType,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
-import { MetricNameSelector } from 'container/QueryBuilder/filters';
+import { AggregatorFilter } from 'container/QueryBuilder/filters';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
@@ -43,12 +44,21 @@ export const MetricsSelect = memo(function MetricsSelect({
 	signalSourceChangeEnabled: boolean;
 	savePreviousQuery: boolean;
 }): JSX.Element {
+	const [attributeKeys, setAttributeKeys] = useState<BaseAutocompleteData[]>([]);
+
 	const { handleChangeAggregatorAttribute } = useQueryOperations({
 		index,
 		query,
 		entityVersion: version,
 	});

+	const handleAggregatorAttributeChange = useCallback(
+		(value: BaseAutocompleteData, isEditMode?: boolean) => {
+			handleChangeAggregatorAttribute(value, isEditMode, attributeKeys || []);
+		},
+		[handleChangeAggregatorAttribute, attributeKeys],
+	);
+
 	const {
 		updateAllQueriesOperators,
 		handleSetQueryData,
@@ -154,10 +164,12 @@ export const MetricsSelect = memo(function MetricsSelect({
 				/>
 			)}

-			<MetricNameSelector
-				onChange={handleChangeAggregatorAttribute}
+			<AggregatorFilter
+				onChange={handleAggregatorAttributeChange}
 				query={query}
+				index={index}
 				signalSource={signalSource || ''}
+				setAttributeKeys={setAttributeKeys}
 			/>
 		</div>
 	);
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -202,8 +202,8 @@ function QueryAddOns({
 		} else {
 			filteredAddOns = Object.values(ADD_ONS);

+			// Filter out group_by for metrics data source
 			if (query.dataSource === DataSource.METRICS) {
-				// Filter out group_by for metrics data source (handled in MetricsAggregateSection)
 				filteredAddOns = filteredAddOns.filter(
 					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
 				);
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -272,6 +272,7 @@ function QuerySearch({
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
 			});
+
 			if (response.data.data) {
 				const { keys } = response.data.data;
 				const options = generateOptions(keys);
@@ -431,7 +432,6 @@ function QuerySearch({
 			}

 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
-			const existingQuery = queryData.filter?.expression || '';

 			try {
 				const response = await getValueSuggestions({
@@ -440,9 +440,9 @@ function QuerySearch({
 					signal: dataSource,
 					signalSource: signalSource as 'meter' | '',
 					metricName: debouncedMetricName ?? undefined,
-					existingQuery,
-				}); // Skip updates if component unmounted or key changed
+				});

+				// Skip updates if component unmounted or key changed
 				if (
 					!isMountedRef.current ||
 					lastKeyRef.current !== key ||
@@ -454,9 +454,7 @@ function QuerySearch({
 				// Process the response data
 				const responseData = response.data as any;
 				const values = responseData.data?.values || {};
-				const relatedValues = values.relatedValues || [];
-				const stringValues =
-					relatedValues.length > 0 ? relatedValues : values.stringValues || [];
+				const stringValues = values.stringValues || [];
 				const numberValues = values.numberValues || [];

 				// Generate options from string values - explicitly handle empty strings
@@ -531,12 +529,11 @@ function QuerySearch({
 		},
 		[
 			activeKey,
-			isLoadingSuggestions,
-			queryData.filter?.expression,
-			toggleSuggestions,
 			dataSource,
-			signalSource,
+			isLoadingSuggestions,
 			debouncedMetricName,
+			signalSource,
+			toggleSuggestions,
 		],
 	);

@@ -1243,17 +1240,19 @@ function QuerySearch({
 		if (!queryContext) {
 			return;
 		}
-		// Only trigger suggestions and fetch if editor is focused (i.e., user is interacting)
-		if (isFocused && editorRef.current) {
+		// Trigger suggestions based on context
+		if (editorRef.current) {
 			toggleSuggestions(10);
-			// Handle value suggestions for value context
-			if (queryContext.isInValue) {
-				const { keyToken, currentToken } = queryContext;
-				const key = keyToken || currentToken;
-				// Only fetch if needed and if we have a valid key
-				if (key && key !== activeKey && !isLoadingSuggestions) {
-					fetchValueSuggestions({ key });
-				}
+		}
+
+		// Handle value suggestions for value context
+		if (queryContext.isInValue) {
+			const { keyToken, currentToken } = queryContext;
+			const key = keyToken || currentToken;
+
+			// Only fetch if needed and if we have a valid key
+			if (key && key !== activeKey && !isLoadingSuggestions) {
+				fetchValueSuggestions({ key });
 			}
 		}
 	}, [
@@ -1262,7 +1261,6 @@ function QuerySearch({
 		isLoadingSuggestions,
 		activeKey,
 		fetchValueSuggestions,
-		isFocused,
 	]);

 	const getTooltipContent = (): JSX.Element => (
--- a/frontend/src/components/QueryBuilderV2/tests/QueryBuilder.PrevQuery.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/tests/QueryBuilder.PrevQuery.test.tsx
@@ -43,7 +43,6 @@ jest.mock(
 );
 jest.mock('container/QueryBuilder/filters', () => ({
 	AggregatorFilter: (): JSX.Element => <div />,
-	MetricNameSelector: (): JSX.Element => <div />,
 }));
 // Mock hooks
 jest.mock('hooks/queryBuilder/useQueryBuilder');
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -48,12 +48,7 @@
 		.filter-separator {
 			height: 1px;
 			background-color: var(--bg-slate-400);
-			margin: 7px 0;
-
-			&.related-separator {
-				opacity: 0.5;
-				margin: 0.5px 0;
-			}
+			margin: 4px 0;
 		}

 		.value {
@@ -143,93 +138,6 @@
 			cursor: pointer;
 		}
 	}
-
-	.search-prompt {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		padding: 10px 12px;
-		margin-top: 4px;
-		border: 1px dashed var(--bg-amber-500);
-		border-radius: 10px;
-		color: var(--bg-amber-200);
-		background: linear-gradient(
-			90deg,
-			var(--bg-ink-500) 0%,
-			var(--bg-ink-400) 100%
-		);
-		cursor: pointer;
-		transition: all 0.16s ease, transform 0.12s ease;
-		text-align: left;
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
-
-		&:hover {
-			background: linear-gradient(
-				90deg,
-				var(--bg-ink-400) 0%,
-				var(--bg-ink-300) 100%
-			);
-			box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
-		}
-
-		&:active {
-			transform: translateY(1px);
-		}
-
-		&__icon {
-			color: var(--bg-amber-400);
-			flex-shrink: 0;
-		}
-
-		&__text {
-			display: flex;
-			flex-direction: column;
-			gap: 2px;
-		}
-
-		&__title {
-			color: var(--bg-amber-200);
-		}
-
-		&__subtitle {
-			color: var(--bg-amber-300);
-			font-size: 12px;
-		}
-	}
-	.lightMode & {
-		.search-prompt {
-			border: 1px dashed var(--bg-amber-500);
-			color: var(--bg-amber-800);
-			background: linear-gradient(
-				90deg,
-				var(--bg-vanilla-200) 0%,
-				var(--bg-vanilla-100) 100%
-			);
-			box-shadow: 0 2px 12px rgba(184, 107, 0, 0.08);
-
-			&:hover {
-				background: linear-gradient(
-					90deg,
-					var(--bg-vanilla-100) 0%,
-					var(--bg-vanilla-50) 100%
-				);
-				box-shadow: 0 4px 16px rgba(184, 107, 0, 0.15);
-			}
-
-			&__icon {
-				color: var(--bg-amber-600);
-			}
-
-			&__title {
-				color: var(--bg-amber-800);
-			}
-
-			&__subtitle {
-				color: var(--bg-amber-800);
-			}
-		}
-	}
 	.go-to-docs {
 		display: flex;
 		flex-direction: column;
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx
@@ -150,8 +150,7 @@ describe('CheckboxFilter - User Flows', () => {
 		// User should see the filter is automatically opened (not collapsed)
 		expect(screen.getByText('Service Name')).toBeInTheDocument();
 		await waitFor(() => {
-			// eslint-disable-next-line sonarjs/no-duplicate-string
-			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});

 		// User should see visual separator between checked and unchecked items
@@ -185,7 +184,7 @@ describe('CheckboxFilter - User Flows', () => {

 		// Initially auto-opened due to active filters
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});

 		// User manually closes the filter
@@ -193,7 +192,7 @@ describe('CheckboxFilter - User Flows', () => {

 		// User should see filter is now closed (respecting user preference)
 		expect(
-			screen.queryByPlaceholderText('Search values'),
+			screen.queryByPlaceholderText('Filter values'),
 		).not.toBeInTheDocument();

 		// User manually opens the filter again
@@ -201,7 +200,7 @@ describe('CheckboxFilter - User Flows', () => {

 		// User should see filter is now open (respecting user preference)
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 	});

--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -1,15 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import {
-	Fragment,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { Button, Checkbox, Input, InputRef, Skeleton, Typography } from 'antd';
+import { Fragment, useMemo, useState } from 'react';
+import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -17,14 +8,19 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
-import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
@@ -61,7 +57,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	// null = no user action, true = user opened, false = user closed
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
-	const [visibleUncheckedCount, setVisibleUncheckedCount] = useState<number>(5);

 	const {
 		lastUsedQuery,
@@ -83,12 +78,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		return lastUsedQuery || 0;
 	}, [isListView, source, lastUsedQuery]);

-	// Extract current filter expression for the active query
-	const currentFilterExpression = useMemo(() => {
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
-		return queryData?.filter?.expression || '';
-	}, [currentQuery.builder.queryData, activeQueryIndex]);
-
 	// Check if this filter has active filters in the query
 	const isSomeFilterPresentForCurrentAttribute = useMemo(
 		() =>
@@ -120,125 +109,54 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		filter.defaultOpen,
 	]);

+	const { data, isLoading } = useGetAggregateValues(
+		{
+			aggregateOperator: filter.aggregateOperator || 'noop',
+			dataSource: filter.dataSource || DataSource.LOGS,
+			aggregateAttribute: filter.aggregateAttribute || '',
+			attributeKey: filter.attributeKey.key,
+			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
+			tagType: filter.attributeKey.type || '',
+			searchText: searchText ?? '',
+		},
+		{
+			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
+			keepPreviousData: true,
+		},
+	);
+
 	const {
 		data: keyValueSuggestions,
 		isLoading: isLoadingKeyValueSuggestions,
-		refetch: refetchKeyValueSuggestions,
 	} = useGetQueryKeyValueSuggestions({
 		key: filter.attributeKey.key,
 		signal: filter.dataSource || DataSource.LOGS,
 		signalSource: 'meter',
-		searchText: searchText || '',
-		existingQuery: currentFilterExpression,
 		options: {
-			enabled: isOpen,
+			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
 			keepPreviousData: true,
 		},
 	});

-	const searchInputRef = useRef<InputRef | null>(null);
-	const searchContainerRef = useRef<HTMLDivElement | null>(null);
-	const previousFiltersItemsRef = useRef(
-		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items,
-	);
+	const attributeValues: string[] = useMemo(() => {
+		const dataType = filter.attributeKey.dataType || DataTypes.String;

-	// Refetch when other filters change (not this filter)
-	// Watch for when filters.items is different from previous value, indicating other filters changed
-	useEffect(() => {
-		const currentFiltersItems =
-			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
-
-		const previousFiltersItems = previousFiltersItemsRef.current;
-
-		// Check if filters items have changed (not the same)
-		const filtersChanged = !isEqual(previousFiltersItems, currentFiltersItems);
-
-		if (isOpen && filtersChanged) {
-			// Check if OTHER filters (not this filter) have changed
-			const currentOtherFilters = currentFiltersItems?.filter(
-				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
-			);
-			const previousOtherFilters = previousFiltersItems?.filter(
-				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
-			);
-
-			// Refetch if other filters changed (not just this filter's values)
-			const otherFiltersChanged = !isEqual(
-				currentOtherFilters,
-				previousOtherFilters,
-			);
-
-			// Only update ref if we have valid API data or if filters actually changed
-			// Don't update if search returned 0 results to preserve unchecked values
-			const hasValidData = keyValueSuggestions && !isLoadingKeyValueSuggestions;
-			if (otherFiltersChanged || hasValidData) {
-				previousFiltersItemsRef.current = currentFiltersItems;
-			}
-
-			if (otherFiltersChanged) {
-				refetchKeyValueSuggestions();
-			}
-		} else {
-			previousFiltersItemsRef.current = currentFiltersItems;
-		}
-	}, [
-		activeQueryIndex,
-		isOpen,
-		refetchKeyValueSuggestions,
-		filter.attributeKey.key,
-		currentQuery.builder.queryData,
-		keyValueSuggestions,
-		isLoadingKeyValueSuggestions,
-	]);
-
-	const handleSearchPromptClick = useCallback((): void => {
-		if (searchContainerRef.current) {
-			searchContainerRef.current.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-		}
-		if (searchInputRef.current) {
-			setTimeout(() => searchInputRef.current?.focus({ cursor: 'end' }), 120);
-		}
-	}, []);
-
-	const isDataComplete = useMemo(() => {
-		if (keyValueSuggestions) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			const responseData = keyValueSuggestions?.data as any;
-			return responseData.data?.complete || false;
-		}
-		return false;
-	}, [keyValueSuggestions]);
-
-	const previousUncheckedValuesRef = useRef<string[]>([]);
-
-	const { attributeValues, relatedValuesSet } = useMemo(() => {
-		if (keyValueSuggestions) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
+			// Process the response data
 			const responseData = keyValueSuggestions?.data as any;
 			const values = responseData.data?.values || {};
-			const relatedValues: string[] = values.relatedValues || [];
-			const stringValues: string[] = values.stringValues || [];
-			const numberValues: number[] = values.numberValues || [];
+			const stringValues = values.stringValues || [];
+			const numberValues = values.numberValues || [];

-			const valuesToUse = [
-				...relatedValues,
-				...stringValues.filter(
-					(value: string | null | undefined) =>
-						value !== null &&
-						value !== undefined &&
-						value !== '' &&
-						!relatedValues.includes(value),
-				),
-			];
-
-			const stringOptions = valuesToUse.filter(
-				(value: string | null | undefined): value is string =>
-					value !== null && value !== undefined && value !== '',
-			);
+			// Generate options from string values - explicitly handle empty strings
+			const stringOptions = stringValues
+				// Strict filtering for empty string - we'll handle it as a special case if needed
+				.filter(
+					(value: string | null | undefined): value is string =>
+						value !== null && value !== undefined && value !== '',
+				);

+			// Generate options from number values
 			const numberOptions = numberValues
 				.filter(
 					(value: number | null | undefined): value is number =>
@@ -246,27 +164,15 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				)
 				.map((value: number) => value.toString());

-			const filteredRelated = new Set(
-				relatedValues.filter(
-					(v): v is string => v !== null && v !== undefined && v !== '',
-				),
-			);
-
-			const baseValues = [...stringOptions, ...numberOptions];
-			const previousUnchecked = previousUncheckedValuesRef.current || [];
-			const preservedUnchecked = previousUnchecked.filter(
-				(value) => !baseValues.includes(value),
-			);
-			return {
-				attributeValues: [...baseValues, ...preservedUnchecked],
-				relatedValuesSet: filteredRelated,
-			};
+			// Combine all options and make sure we don't have duplicate labels
+			return [...stringOptions, ...numberOptions];
 		}
-		return {
-			attributeValues: [] as string[],
-			relatedValuesSet: new Set<string>(),
-		};
-	}, [keyValueSuggestions]);
+
+		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
+	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);

 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
@@ -340,51 +246,22 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const isMultipleValuesTrueForTheKey =
 		Object.values(currentFilterState).filter((val) => val).length > 1;

-	// Sort checked items to the top; always show unchecked items beneath, regardless of pagination
-	const {
-		visibleCheckedValues,
-		uncheckedValues,
-		visibleUncheckedValues,
-		visibleCheckedCount,
-		hasMoreChecked,
-		hasMoreUnchecked,
-		checkedSeparatorIndex,
-	} = useMemo(() => {
+	// Sort checked items to the top, then unchecked items
+	const currentAttributeKeys = useMemo(() => {
 		const checkedValues = attributeValues.filter(
 			(val) => currentFilterState[val],
 		);
-		const unchecked = attributeValues.filter((val) => !currentFilterState[val]);
-		const visibleChecked = checkedValues.slice(0, visibleItemsCount);
-		const visibleUnchecked = unchecked.slice(0, visibleUncheckedCount);
+		const uncheckedValues = attributeValues.filter(
+			(val) => !currentFilterState[val],
+		);
+		return [...checkedValues, ...uncheckedValues].slice(0, visibleItemsCount);
+	}, [attributeValues, currentFilterState, visibleItemsCount]);

-		const findSeparatorIndex = (list: string[]): number => {
-			if (relatedValuesSet.size === 0) {
-				return -1;
-			}
-			const firstNonRelated = list.findIndex((v) => !relatedValuesSet.has(v));
-			return firstNonRelated > 0 ? firstNonRelated : -1;
-		};
-
-		return {
-			visibleCheckedValues: visibleChecked,
-			uncheckedValues: unchecked,
-			visibleUncheckedValues: visibleUnchecked,
-			visibleCheckedCount: visibleChecked.length,
-			hasMoreChecked: checkedValues.length > visibleChecked.length,
-			hasMoreUnchecked: unchecked.length > visibleUnchecked.length,
-			checkedSeparatorIndex: findSeparatorIndex(visibleChecked),
-		};
-	}, [
-		attributeValues,
-		currentFilterState,
-		visibleItemsCount,
-		visibleUncheckedCount,
-		relatedValuesSet,
-	]);
-
-	useEffect(() => {
-		previousUncheckedValuesRef.current = uncheckedValues;
-	}, [uncheckedValues]);
+	// Count of checked values in the currently visible items
+	const checkedValuesCount = useMemo(
+		() => currentAttributeKeys.filter((val) => currentFilterState[val]).length,
+		[currentAttributeKeys, currentFilterState],
+	);

 	const handleClearFilterAttribute = (): void => {
 		const preparedQuery: Query = {
@@ -425,7 +302,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		isOnlyOrAllClicked: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
-		setVisibleUncheckedCount(5);
 		const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);

 		// if only or all are clicked we do not need to worry about anything just override whatever we have
@@ -686,7 +562,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					if (isOpen) {
 						setUserToggleState(false);
 						setVisibleItemsCount(10);
-						setVisibleUncheckedCount(5);
 					} else {
 						setUserToggleState(true);
 					}
@@ -715,93 +590,35 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 				</section>
 			</section>
-			{isOpen && isLoadingKeyValueSuggestions && !attributeValues.length && (
-				<section className="loading">
-					<Skeleton paragraph={{ rows: 4 }} />
-				</section>
-			)}
-			{isOpen && !isLoadingKeyValueSuggestions && (
+			{isOpen &&
+				(isLoading || isLoadingKeyValueSuggestions) &&
+				!attributeValues.length && (
+					<section className="loading">
+						<Skeleton paragraph={{ rows: 4 }} />
+					</section>
+				)}
+			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
-						<section className="search" ref={searchContainerRef}>
+						<section className="search">
 							<Input
-								placeholder="Search values"
+								placeholder="Filter values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}
-								ref={searchInputRef}
 							/>
 						</section>
 					)}
 					{attributeValues.length > 0 ? (
 						<section className="values">
-							{visibleCheckedValues.map((value: string, index: number) => (
+							{currentAttributeKeys.map((value: string, index: number) => (
 								<Fragment key={value}>
-									{index === checkedSeparatorIndex && (
-										<div className="filter-separator related-separator" />
-									)}
-									<div className="value">
-										<Checkbox
-											onChange={(e): void => onChange(value, e.target.checked, false)}
-											checked={currentFilterState[value]}
-											disabled={isFilterDisabled}
-											rootClassName="check-box"
-										/>
-
+									{index === checkedValuesCount && checkedValuesCount > 0 && (
 										<div
-											className={cx(
-												'checkbox-value-section',
-												isFilterDisabled ? 'filter-disabled' : '',
-											)}
-											onClick={(): void => {
-												if (isFilterDisabled) {
-													return;
-												}
-												onChange(value, currentFilterState[value], true);
-											}}
-										>
-											<div className={`${filter.title} label-${value}`} />
-											{filter.customRendererForValue ? (
-												filter.customRendererForValue(value)
-											) : (
-												<Typography.Text
-													className="value-string"
-													ellipsis={{ tooltip: { placement: 'top' } }}
-												>
-													{String(value)}
-												</Typography.Text>
-											)}
-											<Button type="text" className="only-btn">
-												{isSomeFilterPresentForCurrentAttribute
-													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-														? 'All'
-														: 'Only'
-													: 'Only'}
-											</Button>
-											<Button type="text" className="toggle-btn">
-												Toggle
-											</Button>
-										</div>
-									</div>
-								</Fragment>
-							))}
-
-							{hasMoreChecked && (
-								<section className="show-more">
-									<Typography.Text
-										className="show-more-text"
-										onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
-									>
-										Show More...
-									</Typography.Text>
-								</section>
-							)}
-
-							{visibleCheckedCount > 0 && uncheckedValues.length > 0 && (
-								<div className="filter-separator" data-testid="filter-separator" />
-							)}
-
-							{visibleUncheckedValues.map((value: string) => (
-								<Fragment key={value}>
+											key="separator"
+											className="filter-separator"
+											data-testid="filter-separator"
+										/>
+									)}
 									<div className="value">
 										<Checkbox
 											onChange={(e): void => onChange(value, e.target.checked, false)}
@@ -853,17 +670,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									</div>
 								</Fragment>
 							))}
-
-							{hasMoreUnchecked && (
-								<section className="show-more">
-									<Typography.Text
-										className="show-more-text"
-										onClick={(): void => setVisibleUncheckedCount((prev) => prev + 5)}
-									>
-										Show More...
-									</Typography.Text>
-								</section>
-							)}
 						</section>
 					) : isEmptyStateWithDocsEnabled ? (
 						<LogsQuickFilterEmptyState attributeKey={filter.attributeKey.key} />
@@ -872,18 +678,16 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							<Typography.Text>No values found</Typography.Text>{' '}
 						</section>
 					)}
-					{visibleItemsCount >= attributeValues?.length &&
-						attributeValues?.length > 0 &&
-						!isDataComplete && (
-							<section className="search-prompt" onClick={handleSearchPromptClick}>
-								<AlertTriangle size={16} className="search-prompt__icon" />
-								<span className="search-prompt__text">
-									<Typography.Text className="search-prompt__subtitle">
-										Tap to search and load more suggestions.
-									</Typography.Text>
-								</span>
-							</section>
-						)}
+					{visibleItemsCount < attributeValues?.length && (
+						<section className="show-more">
+							<Typography.Text
+								className="show-more-text"
+								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+							>
+								Show More...
+							</Typography.Text>
+						</section>
+					)}
 				</>
 			)}
 		</div>
--- a/frontend/src/components/QuickFilters/QuickFilters.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFilters.styles.scss
@@ -127,34 +127,6 @@
 		align-items: center;
 		padding: 8px;
 	}
-
-	.filters-info {
-		display: flex;
-		align-items: center;
-		padding: 6px 10px 0 10px;
-		color: var(--bg-vanilla-400);
-		gap: 6px;
-		flex-wrap: wrap;
-
-		.filters-info-toggle {
-			display: inline-flex;
-			align-items: center;
-			gap: 6px;
-			padding: 0;
-			height: auto;
-			color: var(--bg-vanilla-400);
-
-			&:hover {
-				color: var(--bg-robin-500);
-			}
-		}
-
-		.filters-info-text {
-			color: var(--bg-vanilla-400);
-			font-size: 13px;
-			line-height: 16px;
-		}
-	}
 }

 .perilin-bg {
@@ -208,30 +180,5 @@
 				}
 			}
 		}
-
-		.filters-info {
-			color: var(--bg-ink-400);
-
-			.filters-info-toggle {
-				color: var(--bg-ink-400);
-
-				&:hover {
-					color: var(--bg-ink-300);
-				}
-			}
-
-			.filters-info-text {
-				color: var(--bg-ink-400);
-			}
-		}
 	}
 }
-
-.filters-info-tooltip-title {
-	font-weight: var(--font-weight-bold);
-	margin-bottom: 4px;
-}
-
-.filters-info-tooltip-detail {
-	margin-top: 4px;
-}
--- a/frontend/src/components/QuickFilters/QuickFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFilters.tsx
@@ -23,7 +23,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { isFunction, isNull } from 'lodash-es';
-import { Frown, Lightbulb, Settings2 as SettingsIcon } from 'lucide-react';
+import { Frown, Settings2 as SettingsIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
@@ -291,27 +291,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 					/>
 				</div>
 			)}
-			<section className="filters-info">
-				<Tooltip
-					title={
-						<div className="filters-info-tooltip">
-							<div className="filters-info-tooltip-title">Adaptive Filters</div>
-							<div>Values update automatically as you apply filters.</div>
-							<div className="filters-info-tooltip-detail">
-								The most relevant values are shown first, followed by all other
-								available options.
-							</div>
-						</div>
-					}
-					placement="right"
-					mouseEnterDelay={0.3}
-				>
-					<Typography.Text className="filters-info-toggle">
-						<Lightbulb size={15} />
-						Adaptive filters
-					</Typography.Text>
-				</Tooltip>
-			</section>
 			<section className="filters">
 				{filterConfig.map((filter) => {
 					switch (filter.type) {
--- a/frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx
+++ b/frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx
@@ -4,7 +4,6 @@ import {
 	useApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import {
 	otherFiltersResponse,
 	quickFiltersAttributeValuesResponse,
@@ -25,8 +24,6 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 }));
 jest.mock('container/ApiMonitoring/queryParams');

-jest.mock('hooks/querySuggestions/useGetQueryKeyValueSuggestions');
-
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
@@ -35,15 +32,13 @@ const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
 >;
 const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);

-const mockUseGetQueryKeyValueSuggestions = jest.mocked(
-	useGetQueryKeyValueSuggestions,
-);
-
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
 const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
 const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
 const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
+const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;

 const FILTER_OS_DESCRIPTION = 'os.description';
 const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
@@ -67,7 +62,10 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-		rest.get('*/api/v1/fields/values*', (_req, res, ctx) =>
+		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+		rest.get(fieldsValuesURL, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -137,28 +135,18 @@ beforeEach(() => {
 				queryData: [
 					{
 						queryName: QUERY_NAME,
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
+						filters: { items: [{ key: 'test', value: 'value' }] },
 					},
 				],
 			},
 		},
 		lastUsedQuery: 0,
-		panelType: 'logs',
 		redirectWithQueryBuilderData,
 	});
 	mockUseApiMonitoringParams.mockReturnValue([
 		{ showIP: true } as ApiMonitoringParams,
 		mockSetApiMonitoringParams,
 	]);
-
-	// Mock the hook to return data with mq-kafka
-	mockUseGetQueryKeyValueSuggestions.mockReturnValue({
-		data: quickFiltersAttributeValuesResponse,
-		isLoading: false,
-		refetch: jest.fn(),
-	} as any);
-
 	setupServer();
 });

@@ -271,9 +259,8 @@ describe('Quick Filters', () => {

 		render(<TestQuickFilters />);

-		// Wait for the filter to load with data
-		const target = await screen.findByText('mq-kafka', {}, { timeout: 5000 });
-
+		// Prefer role if possible; if label text isn’t wired to input, clicking the label text is OK
+		const target = await screen.findByText('mq-kafka');
 		await user.click(target);

 		await waitFor(() => {
--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
@@ -1,10 +1,7 @@
 import { memo, useEffect, useState } from 'react';
-import type {
-	TableColumnGroupType as ColumnGroupType,
-	TableColumnsType as ColumnsType,
-	TableColumnType as ColumnType,
-} from 'antd';
 import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { ColumnGroupType, ColumnType } from 'antd/es/table';
+import { ColumnsType } from 'antd/lib/table';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
--- a/frontend/src/components/ResizeTable/ResizeTable.tsx
+++ b/frontend/src/components/ResizeTable/ResizeTable.tsx
@@ -9,7 +9,7 @@ import {
 import ReactDragListView from 'react-drag-listview';
 import { ResizeCallbackData } from 'react-resizable';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/lib/table';
+import { ColumnsType } from 'antd/lib/table';
 import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
--- a/frontend/src/components/ResizeTable/types.ts
+++ b/frontend/src/components/ResizeTable/types.ts
@@ -1,7 +1,7 @@
 import { TableProps } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
-import type { PaginationProps } from 'antd/lib';
-import type { ColumnGroupType, ColumnType } from 'antd/lib/table';
+import { ColumnsType } from 'antd/es/table';
+import { PaginationProps } from 'antd/lib';
+import { ColumnGroupType, ColumnType } from 'antd/lib/table';
 import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatSupport';

 import { TableDataSource } from './contants';
--- a/frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx
+++ b/frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx
@@ -1,4 +1,5 @@
-import { Radio, RadioChangeEvent } from 'antd';
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio';

 import './SignozRadioGroup.styles.scss';

--- a/frontend/src/components/Styled/index.ts
+++ b/frontend/src/components/Styled/index.ts
@@ -13,8 +13,8 @@ import {
 	TabsProps,
 	Typography,
 } from 'antd';
-import type { TextProps } from 'antd/lib/typography/Text';
-import type { TitleProps } from 'antd/lib/typography/Title';
+import { TextProps } from 'antd/lib/typography/Text';
+import { TitleProps } from 'antd/lib/typography/Title';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';

 import { IStyledClass } from './types';
--- a/frontend/src/components/TableRenderer/utils.ts
+++ b/frontend/src/components/TableRenderer/utils.ts
@@ -1,7 +1,5 @@
-import type {
-	TableColumnsType as ColumnsType,
-	TableColumnType as ColumnType,
-} from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { ColumnsType } from 'antd/lib/table';

 export const generatorResizeTableColumns = <T>({
 	baseColumnOptions,
--- a/frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx
+++ b/frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Radio } from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
+import { RadioChangeEvent } from 'antd/lib';
 import { History, Table } from 'lucide-react';

 import { ALERT_TABS } from '../constants';
--- a/frontend/src/components/Tags/Tags.tsx
+++ b/frontend/src/components/Tags/Tags.tsx
@@ -1,6 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Tag } from 'antd';
+import { Button } from 'antd';
+import { Tag } from 'antd/lib';
 import Input from 'components/Input';
 import { Check, X } from 'lucide-react';

--- a/frontend/src/components/TimelineV3/TimelineV3.styles.scss
+++ b/frontend/src/components/TimelineV3/TimelineV3.styles.scss
@@ -0,0 +1,4 @@
+.timeline-v3-container {
+	// flex: 1;
+	overflow: visible;
+}
--- a/frontend/src/components/TimelineV3/TimelineV3.tsx
+++ b/frontend/src/components/TimelineV3/TimelineV3.tsx
@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import {
+	getIntervals,
+	getMinimumIntervalsBasedOnWidth,
+	Interval,
+} from './utils';
+
+import './TimelineV3.styles.scss';
+
+interface ITimelineV3Props {
+	startTimestamp: number;
+	endTimestamp: number;
+	timelineHeight: number;
+	offsetTimestamp: number;
+}
+
+function TimelineV3(props: ITimelineV3Props): JSX.Element {
+	const {
+		startTimestamp,
+		endTimestamp,
+		timelineHeight,
+		offsetTimestamp,
+	} = props;
+	const [intervals, setIntervals] = useState<Interval[]>([]);
+	const [ref, { width }] = useMeasure<HTMLDivElement>();
+	const isDarkMode = useIsDarkMode();
+
+	useEffect(() => {
+		const spread = endTimestamp - startTimestamp;
+		if (spread < 0) {
+			return;
+		}
+
+		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
+		const intervalisedSpread = (spread / minIntervals) * 1.0;
+		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
+
+		setIntervals(intervals);
+	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
+
+	if (endTimestamp < startTimestamp) {
+		console.error(
+			'endTimestamp cannot be less than startTimestamp',
+			startTimestamp,
+			endTimestamp,
+		);
+		return <div />;
+	}
+
+	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
+
+	return (
+		<div ref={ref as never} className="timeline-v3-container">
+			<svg
+				width={width}
+				height={timelineHeight}
+				xmlns="http://www.w3.org/2000/svg"
+				overflow="visible"
+			>
+				<line
+					x1="0"
+					y1={timelineHeight}
+					x2={width}
+					y2={timelineHeight}
+					stroke={strokeColor}
+					strokeWidth="1"
+				/>
+				{intervals &&
+					intervals.length > 0 &&
+					intervals.map((interval, index) => (
+						<g
+							transform={`translate(${(interval.percentage * width) / 100},0)`}
+							key={`${interval.percentage + interval.label + index}`}
+							textAnchor="middle"
+							fontSize="0.6rem"
+						>
+							<text
+								x={index === intervals.length - 1 ? -10 : 0}
+								y={2 * Math.floor(timelineHeight / 4)}
+								fill={strokeColor}
+							>
+								{interval.label}
+							</text>
+							<line
+								y1={3 * Math.floor(timelineHeight / 4)}
+								y2={timelineHeight + 0.5}
+								stroke={strokeColor}
+								strokeWidth="1"
+							/>
+						</g>
+					))}
+			</svg>
+		</div>
+	);
+}
+
+export default TimelineV3;
--- a/frontend/src/components/TimelineV3/utils.ts
+++ b/frontend/src/components/TimelineV3/utils.ts
@@ -0,0 +1,78 @@
+import {
+	getMinimumIntervalsBasedOnWidth,
+	IIntervalUnit,
+	Interval,
+	INTERVAL_UNITS,
+	resolveTimeFromInterval,
+} from 'components/TimelineV2/utils';
+import { toFixed } from 'utils/toFixed';
+
+export type { Interval };
+
+export { getMinimumIntervalsBasedOnWidth };
+
+/**
+ * Computes timeline intervals with offset-aware labels.
+ * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
+ * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
+ */
+export function getIntervals(
+	intervalSpread: number,
+	baseSpread: number,
+	offsetTimestamp: number,
+): Interval[] {
+	const integerPartString = intervalSpread.toString().split('.')[0];
+	const integerPartLength = integerPartString.length;
+
+	const intervalSpreadNormalized =
+		intervalSpread < 1.0
+			? intervalSpread
+			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
+			  10 ** (integerPartLength - 1);
+
+	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		const standardInterval = INTERVAL_UNITS[idx];
+		if (intervalSpread * standardInterval.multiplier >= 1) {
+			intervalUnit = INTERVAL_UNITS[idx];
+			break;
+		}
+	}
+
+	const intervals: Interval[] = [
+		{
+			label: `${toFixed(
+				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
+			percentage: 0,
+		},
+	];
+
+	let tempBaseSpread = baseSpread;
+	let elapsedIntervals = 0;
+
+	while (tempBaseSpread && intervals.length < 20) {
+		let intervalTime: number;
+
+		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
+			intervalTime = elapsedIntervals + tempBaseSpread;
+			tempBaseSpread = 0;
+		} else {
+			intervalTime = elapsedIntervals + intervalSpreadNormalized;
+			tempBaseSpread -= intervalSpreadNormalized;
+		}
+
+		elapsedIntervals = intervalTime;
+		const labelTime = offsetTimestamp + intervalTime;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (intervalTime / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}
--- a/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
+++ b/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { WarningFilled } from '@ant-design/icons';
 import { Select, Tooltip } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
+import { DefaultOptionType } from 'antd/es/select';
 import classNames from 'classnames';

 import { UniversalYAxisUnitMappings } from './constants';
--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.styles.scss
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.styles.scss
@@ -1,41 +0,0 @@
-.guard-authz-error-no-authz {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: 100%;
-
-	padding: 24px;
-
-	.guard-authz-error-no-authz-content {
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		gap: 8px;
-		max-width: 500px;
-	}
-
-	img {
-		width: 32px;
-		height: 32px;
-	}
-
-	h3 {
-		font-size: 18px;
-		color: var(--l1-foreground);
-		line-height: 18px;
-	}
-
-	p {
-		font-size: 14px;
-		color: var(--l3-foreground);
-		line-height: 18px;
-
-		span {
-			background-color: var(--l3-background);
-			white-space: nowrap;
-			padding: 0 2px;
-		}
-	}
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
aks07	8e325ba8b3	feat: added timeline v3	2026-03-05 12:31:17 +05:30
aks07	884f516766	feat: add text to spans	2026-03-03 12:20:06 +05:30
aks07	4bcbb4ffc3	feat: flamegraph canvas init	2026-03-02 19:21:23 +05:30
@@ -1 +1 @@
 
 .15.0