fix: remove unused function call in getCurrentQueryPair

* fix: update type handling for selectColumns in useOptionsMenu

* chore: updated grammer for value, added parsetree for finding current context

* feat: added IS_NULL and IS_NOT_NULL operators and fixed support for not value operators

* feat: enhance query context to support detection of values wrapped in quotes

* feat: add support for negation context in query processing

* chore: added grammer parity for frontend grammer with main grammer

* feat: enhance query processing to support negation context and improve space handling

* fix: simplify condition for wrapping string values in quotes and comment out query context display

* feat: enhance IQueryPair to support multi-value operators and update query context handling

* fix(query): added fix for multi value context and in-place replacement

* fix: suggestions disappearing after dot

* fix(query): deduplicate key suggestions using a Map to preserve order

* fix(query): handle in-place operator type replacements in query context

* fix(query): add comment to clarify in-place operator replacement logic

* feat(query): suggestiong operators based on key type

* feat(query): add 'apply' property to value and number suggestions

* feat(query): enhance query pair extraction, removed dependency for conjunction

* fix(query): add isQueryPairComplete function and fixed querypair extraction logic

* feat(constants): introduce antlrQueryConstants for operators and key types

* refactor(query): replace OPERATORS.EXISTS with NON_VALUE_OPERATORS for improved claritya

* feat: enhance QuerySearch with improved fetching logic and state management for value suggestions

* feat: add custom key handling for CodeMirror in QuerySearch component

* fix: segment fragment to allow hyphen without trailing dot in FilterQuery grammar

.devenv/docker/clickhouse/compose.yaml

@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.128.0
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.128.0
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

@@ -7,38 +7,14 @@
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @SigNoz/devops
 .github @SigNoz/devops
-
-# Scaffold Owners
 /pkg/config/ @grandwizard28
 /pkg/errors/ @grandwizard28
 /pkg/factory/ @grandwizard28
 /pkg/types/ @grandwizard28
-/pkg/valuer/ @grandwizard28
-/cmd/ @grandwizard28
 .golangci.yml @grandwizard28
-
-# Zeus Owners
 /pkg/zeus/ @vikrantgupta25
-/ee/zeus/ @vikrantgupta25
 /pkg/licensing/ @vikrantgupta25
-/ee/licensing/ @vikrantgupta25
-
-# SQL Owners
 /pkg/sqlmigration/ @vikrantgupta25
-/ee/sqlmigration/ @vikrantgupta25
-/pkg/sqlschema/ @vikrantgupta25
-/ee/sqlschema/ @vikrantgupta25
-
-# Analytics Owners
-/pkg/analytics/ @vikrantgupta25
-/pkg/statsreporter/ @vikrantgupta25
-
-# Querier Owners
-/pkg/querier/ @srikanthccv
-/pkg/variables/ @srikanthccv
-/pkg/types/querybuildertypes/ @srikanthccv
-/pkg/querybuilder/ @srikanthccv
-/pkg/telemetrylogs/ @srikanthccv
-/pkg/telemetrymetadata/ @srikanthccv
-/pkg/telemetrymetrics/ @srikanthccv
-/pkg/telemetrytraces/ @srikanthccv
+/ee/zeus/ @vikrantgupta25
+/ee/licensing/ @vikrantgupta25
+/ee/sqlmigration/ @vikrantgupta25

.github/workflows/build-community.yaml

@@ -66,7 +66,7 @@ jobs:
       GO_NAME: signoz-community
       GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
-      GO_BUILD_CONTEXT: ./cmd/community
+      GO_BUILD_CONTEXT: ./pkg/query-service
       GO_BUILD_FLAGS: >-
         -tags timetzdata
         -ldflags='-linkmode external -extldflags \"-static\" -s -w
@@ -78,6 +78,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       GO_CGO_ENABLED: 1
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
-      DOCKER_DOCKERFILE_PATH: ./cmd/community/Dockerfile.multi-arch
+      DOCKER_DOCKERFILE_PATH: ./pkg/query-service/Dockerfile.multi-arch
       DOCKER_MANIFEST: true
       DOCKER_PROVIDERS: dockerhub

.github/workflows/build-enterprise.yaml

@@ -96,7 +96,7 @@ jobs:
       GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
-      GO_BUILD_CONTEXT: ./cmd/enterprise
+      GO_BUILD_CONTEXT: ./ee/query-service
       GO_BUILD_FLAGS: >-
         -tags timetzdata
         -ldflags='-linkmode external -extldflags \"-static\" -s -w
@@ -112,6 +112,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       GO_CGO_ENABLED: 1
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
-      DOCKER_DOCKERFILE_PATH: ./cmd/enterprise/Dockerfile.multi-arch
+      DOCKER_DOCKERFILE_PATH: ./ee/query-service/Dockerfile.multi-arch
       DOCKER_MANIFEST: true
       DOCKER_PROVIDERS: ${{ needs.prepare.outputs.docker_providers }}

.github/workflows/build-staging.yaml

@@ -95,7 +95,7 @@ jobs:
       GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
-      GO_BUILD_CONTEXT: ./cmd/enterprise
+      GO_BUILD_CONTEXT: ./ee/query-service
       GO_BUILD_FLAGS: >-
         -tags timetzdata
         -ldflags='-linkmode external -extldflags \"-static\" -s -w
@@ -111,7 +111,7 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       GO_CGO_ENABLED: 1
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
-      DOCKER_DOCKERFILE_PATH: ./cmd/enterprise/Dockerfile.multi-arch
+      DOCKER_DOCKERFILE_PATH: ./ee/query-service/Dockerfile.multi-arch
       DOCKER_MANIFEST: true
       DOCKER_PROVIDERS: gcp
   staging:

.github/workflows/gor-signoz-community.yaml

@@ -36,7 +36,7 @@ jobs:
           - ubuntu-latest
           - macos-latest
     env:
-      CONFIG_PATH: cmd/community/.goreleaser.yaml
+      CONFIG_PATH: pkg/query-service/.goreleaser.yaml
     runs-on: ${{ matrix.os }}
     steps:
       - name: checkout
@@ -100,7 +100,7 @@ jobs:
     needs: build
     env:
       DOCKER_CLI_EXPERIMENTAL: "enabled"
-      WORKDIR: cmd/community
+      WORKDIR: pkg/query-service
     steps:
       - name: checkout
         uses: actions/checkout@v4

.github/workflows/gor-signoz.yaml

@@ -50,7 +50,7 @@ jobs:
           - ubuntu-latest
           - macos-latest
     env:
-      CONFIG_PATH: cmd/enterprise/.goreleaser.yaml
+      CONFIG_PATH: ee/query-service/.goreleaser.yaml
     runs-on: ${{ matrix.os }}
     steps:
       - name: checkout

.github/workflows/integrationci.yaml

@@ -20,9 +20,9 @@ jobs:
           - sqlite
         clickhouse-version:
           - 24.1.2-alpine
-          - 25.5.6
+          - 24.12-alpine
         schema-migrator-version:
-          - v0.128.1
+          - v0.128.0
         postgres-version:
           - 15
     if: |

.github/workflows/prereleaser.yaml

@@ -1,6 +1,10 @@
 name: prereleaser
 
 on:
+  # schedule every wednesday 6:30 AM UTC (12:00 PM IST)
+  schedule:
+    - cron: '30 6 * * 3'
+
   # allow manual triggering of the workflow by a maintainer
   workflow_dispatch:
     inputs:

LICENSE

@@ -2,7 +2,7 @@ Copyright (c) 2020-present SigNoz Inc.
 
 Portions of this software are licensed as follows:
 
-* All content that resides under the "ee/" and the "cmd/enterprise/" directory of this repository, if that directory exists, is licensed under the license defined in "ee/LICENSE".
+* All content that resides under the "ee/" directory of this repository, if that directory exists, is licensed under the license defined in "ee/LICENSE".
 * All third party components incorporated into the SigNoz Software are licensed under the original license provided by the owner of the applicable component.
 * Content outside of the above mentioned directories or restrictions above is available under the "MIT Expat" license as defined below.
 

Makefile

@@ -20,18 +20,18 @@ GO_BUILD_LDFLAG_LICENSE_SIGNOZ_IO 	= -X github.com/SigNoz/signoz/ee/zeus.depreca
 
 GO_BUILD_VERSION_LDFLAGS 		= -X github.com/SigNoz/signoz/pkg/version.version=$(VERSION) -X github.com/SigNoz/signoz/pkg/version.hash=$(COMMIT_SHORT_SHA) -X github.com/SigNoz/signoz/pkg/version.time=$(TIMESTAMP) -X github.com/SigNoz/signoz/pkg/version.branch=$(BRANCH_NAME)
 GO_BUILD_ARCHS_COMMUNITY 		= $(addprefix go-build-community-,$(ARCHS))
-GO_BUILD_CONTEXT_COMMUNITY 		= $(SRC)/cmd/community
+GO_BUILD_CONTEXT_COMMUNITY 		= $(SRC)/pkg/query-service
 GO_BUILD_LDFLAGS_COMMUNITY 		= $(GO_BUILD_VERSION_LDFLAGS) -X github.com/SigNoz/signoz/pkg/version.variant=community
 GO_BUILD_ARCHS_ENTERPRISE 		= $(addprefix go-build-enterprise-,$(ARCHS))
 GO_BUILD_ARCHS_ENTERPRISE_RACE  = $(addprefix go-build-enterprise-race-,$(ARCHS))
-GO_BUILD_CONTEXT_ENTERPRISE 	= $(SRC)/cmd/enterprise
+GO_BUILD_CONTEXT_ENTERPRISE 	= $(SRC)/ee/query-service
 GO_BUILD_LDFLAGS_ENTERPRISE 	= $(GO_BUILD_VERSION_LDFLAGS) -X github.com/SigNoz/signoz/pkg/version.variant=enterprise $(GO_BUILD_LDFLAG_ZEUS_URL) $(GO_BUILD_LDFLAG_LICENSE_SIGNOZ_IO)
 
 DOCKER_BUILD_ARCHS_COMMUNITY 	= $(addprefix docker-build-community-,$(ARCHS))
-DOCKERFILE_COMMUNITY 			= $(SRC)/cmd/community/Dockerfile
+DOCKERFILE_COMMUNITY 			= $(SRC)/pkg/query-service/Dockerfile
 DOCKER_REGISTRY_COMMUNITY 		?= docker.io/signoz/signoz-community
 DOCKER_BUILD_ARCHS_ENTERPRISE 	= $(addprefix docker-build-enterprise-,$(ARCHS))
-DOCKERFILE_ENTERPRISE 			= $(SRC)/cmd/enterprise/Dockerfile
+DOCKERFILE_ENTERPRISE 			= $(SRC)/ee/query-service/Dockerfile
 DOCKER_REGISTRY_ENTERPRISE 		?= docker.io/signoz/signoz
 JS_BUILD_CONTEXT 				= $(SRC)/frontend
 
@@ -74,7 +74,7 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
 	go run -race \
-		$(GO_BUILD_CONTEXT_ENTERPRISE)/*.go \
+		$(GO_BUILD_CONTEXT_ENTERPRISE)/main.go \
 		--config ./conf/prometheus.yml \
 		--cluster cluster
 
@@ -92,7 +92,7 @@ go-run-community: ## Runs the community go backend server
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
 	go run -race \
-		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go \
+		$(GO_BUILD_CONTEXT_COMMUNITY)/main.go \
 		--config ./conf/prometheus.yml \
 		--cluster cluster
 

README.md

@@ -8,6 +8,7 @@
 <p align="center">All your logs, metrics, and traces in one place. Monitor your application, spot issues before they occur and troubleshoot downtime quickly with rich context. SigNoz is a cost-effective open-source alternative to Datadog and New Relic. Visit <a href="https://signoz.io" target="_blank">signoz.io</a> for the full documentation, tutorials, and guide.</p>
 
 <p align="center">
+    <img alt="Downloads" src="https://img.shields.io/docker/pulls/signoz/signoz.svg?label=Docker%20Downloads"> </a>
     <img alt="GitHub issues" src="https://img.shields.io/github/issues/signoz/signoz"> </a>
     <a href="https://twitter.com/intent/tweet?text=Monitor%20your%20applications%20and%20troubleshoot%20problems%20with%20SigNoz,%20an%20open-source%20alternative%20to%20DataDog,%20NewRelic.&url=https://signoz.io/&via=SigNozHQ&hashtags=opensource,signoz,observability"> 
         <img alt="tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a> 
@@ -230,8 +231,6 @@ Not sure how to get started? Just ping us on `#contributing` in our [slack commu
 - [Shaheer Kochai](https://github.com/ahmadshaheer)
 - [Amlan Kumar Nandy](https://github.com/amlannandy)
 - [Sahil Khan](https://github.com/sawhil)
-- [Aditya Singh](https://github.com/aks07)
-- [Abhi Kumar](https://github.com/ahrefabhi)
 
 #### DevOps
 

cmd/community/main.go

@@ -1,18 +0,0 @@
-package main
-
-import (
-	"log/slog"
-
-	"github.com/SigNoz/signoz/cmd"
-	"github.com/SigNoz/signoz/pkg/instrumentation"
-)
-
-func main() {
-	// initialize logger for logging in the cmd/ package. This logger is different from the logger used in the application.
-	logger := instrumentation.NewLogger(instrumentation.Config{Logs: instrumentation.LogsConfig{Level: slog.LevelInfo}})
-
-	// register a list of commands to the root command
-	registerServer(cmd.RootCmd, logger)
-
-	cmd.Execute(logger)
-}

cmd/community/server.go

@@ -1,116 +0,0 @@
-package main
-
-import (
-	"context"
-	"log/slog"
-	"time"
-
-	"github.com/SigNoz/signoz/cmd"
-	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
-	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/licensing/nooplicensing"
-	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/query-service/app"
-	"github.com/SigNoz/signoz/pkg/signoz"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/version"
-	"github.com/SigNoz/signoz/pkg/zeus"
-	"github.com/SigNoz/signoz/pkg/zeus/noopzeus"
-	"github.com/spf13/cobra"
-)
-
-func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
-	var flags signoz.DeprecatedFlags
-
-	serverCmd := &cobra.Command{
-		Use:                "server",
-		Short:              "Run the SigNoz server",
-		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
-		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
-			if err != nil {
-				return err
-			}
-
-			return runServer(currCmd.Context(), config, logger)
-		},
-	}
-
-	flags.RegisterFlags(serverCmd)
-	parentCmd.AddCommand(serverCmd)
-}
-
-func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) error {
-	// print the version
-	version.Info.PrettyPrint(config.Version)
-
-	// add enterprise sqlstore factories to the community sqlstore factories
-	sqlstoreFactories := signoz.NewSQLStoreProviderFactories()
-	if err := sqlstoreFactories.Add(postgressqlstore.NewFactory(sqlstorehook.NewLoggingFactory())); err != nil {
-		logger.ErrorContext(ctx, "failed to add postgressqlstore factory", "error", err)
-		return err
-	}
-
-	jwt := authtypes.NewJWT(cmd.NewJWTSecret(ctx, logger), 30*time.Minute, 30*24*time.Hour)
-
-	signoz, err := signoz.New(
-		ctx,
-		config,
-		jwt,
-		zeus.Config{},
-		noopzeus.NewProviderFactory(),
-		licensing.Config{},
-		func(_ sqlstore.SQLStore, _ zeus.Zeus, _ organization.Getter, _ analytics.Analytics) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
-			return nooplicensing.NewFactory()
-		},
-		signoz.NewEmailingProviderFactories(),
-		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
-		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
-			return signoz.NewSQLSchemaProviderFactories(sqlstore)
-		},
-		signoz.NewSQLStoreProviderFactories(),
-		signoz.NewTelemetryStoreProviderFactories(),
-	)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to create signoz", "error", err)
-		return err
-	}
-
-	server, err := app.NewServer(config, signoz, jwt)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to create server", "error", err)
-		return err
-	}
-
-	if err := server.Start(ctx); err != nil {
-		logger.ErrorContext(ctx, "failed to start server", "error", err)
-		return err
-	}
-
-	signoz.Start(ctx)
-
-	if err := signoz.Wait(ctx); err != nil {
-		logger.ErrorContext(ctx, "failed to start signoz", "error", err)
-		return err
-	}
-
-	err = server.Stop(ctx)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to stop server", "error", err)
-		return err
-	}
-
-	err = signoz.Stop(ctx)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to stop signoz", "error", err)
-		return err
-	}
-
-	return nil
-}

cmd/config.go

@@ -1,45 +0,0 @@
-package cmd
-
-import (
-	"context"
-	"fmt"
-	"log/slog"
-	"os"
-
-	"github.com/SigNoz/signoz/pkg/config"
-	"github.com/SigNoz/signoz/pkg/config/envprovider"
-	"github.com/SigNoz/signoz/pkg/config/fileprovider"
-	"github.com/SigNoz/signoz/pkg/signoz"
-)
-
-func NewSigNozConfig(ctx context.Context, flags signoz.DeprecatedFlags) (signoz.Config, error) {
-	config, err := signoz.NewConfig(
-		ctx,
-		config.ResolverConfig{
-			Uris: []string{"env:"},
-			ProviderFactories: []config.ProviderFactory{
-				envprovider.NewFactory(),
-				fileprovider.NewFactory(),
-			},
-		},
-		flags,
-	)
-	if err != nil {
-		return signoz.Config{}, err
-	}
-
-	return config, nil
-}
-
-func NewJWTSecret(_ context.Context, _ *slog.Logger) string {
-	jwtSecret := os.Getenv("SIGNOZ_JWT_SECRET")
-	if len(jwtSecret) == 0 {
-		fmt.Println("🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!")
-		fmt.Println("SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application.")
-		fmt.Println("Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access.")
-		fmt.Println("Please set the SIGNOZ_JWT_SECRET environment variable immediately.")
-		fmt.Println("For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
-	}
-
-	return jwtSecret
-}

cmd/enterprise/main.go

@@ -1,18 +0,0 @@
-package main
-
-import (
-	"log/slog"
-
-	"github.com/SigNoz/signoz/cmd"
-	"github.com/SigNoz/signoz/pkg/instrumentation"
-)
-
-func main() {
-	// initialize logger for logging in the cmd/ package. This logger is different from the logger used in the application.
-	logger := instrumentation.NewLogger(instrumentation.Config{Logs: instrumentation.LogsConfig{Level: slog.LevelInfo}})
-
-	// register a list of commands to the root command
-	registerServer(cmd.RootCmd, logger)
-
-	cmd.Execute(logger)
-}

cmd/enterprise/server.go

@@ -1,124 +0,0 @@
-package main
-
-import (
-	"context"
-	"log/slog"
-	"time"
-
-	"github.com/SigNoz/signoz/cmd"
-	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
-	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
-	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
-	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
-	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
-	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
-	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
-	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/signoz"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/version"
-	"github.com/SigNoz/signoz/pkg/zeus"
-	"github.com/spf13/cobra"
-)
-
-func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
-	var flags signoz.DeprecatedFlags
-
-	serverCmd := &cobra.Command{
-		Use:                "server",
-		Short:              "Run the SigNoz server",
-		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
-		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
-			if err != nil {
-				return err
-			}
-
-			return runServer(currCmd.Context(), config, logger)
-		},
-	}
-
-	flags.RegisterFlags(serverCmd)
-	parentCmd.AddCommand(serverCmd)
-}
-
-func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) error {
-	// print the version
-	version.Info.PrettyPrint(config.Version)
-
-	// add enterprise sqlstore factories to the community sqlstore factories
-	sqlstoreFactories := signoz.NewSQLStoreProviderFactories()
-	if err := sqlstoreFactories.Add(postgressqlstore.NewFactory(sqlstorehook.NewLoggingFactory())); err != nil {
-		logger.ErrorContext(ctx, "failed to add postgressqlstore factory", "error", err)
-		return err
-	}
-
-	jwt := authtypes.NewJWT(cmd.NewJWTSecret(ctx, logger), 30*time.Minute, 30*24*time.Hour)
-
-	signoz, err := signoz.New(
-		ctx,
-		config,
-		jwt,
-		enterprisezeus.Config(),
-		httpzeus.NewProviderFactory(),
-		enterpriselicensing.Config(24*time.Hour, 3),
-		func(sqlstore sqlstore.SQLStore, zeus zeus.Zeus, orgGetter organization.Getter, analytics analytics.Analytics) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
-			return httplicensing.NewProviderFactory(sqlstore, zeus, orgGetter, analytics)
-		},
-		signoz.NewEmailingProviderFactories(),
-		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
-		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
-			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
-			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {
-				panic(err)
-			}
-
-			return existingFactories
-		},
-		sqlstoreFactories,
-		signoz.NewTelemetryStoreProviderFactories(),
-	)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to create signoz", "error", err)
-		return err
-	}
-
-	server, err := enterpriseapp.NewServer(config, signoz, jwt)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to create server", "error", err)
-		return err
-	}
-
-	if err := server.Start(ctx); err != nil {
-		logger.ErrorContext(ctx, "failed to start server", "error", err)
-		return err
-	}
-
-	signoz.Start(ctx)
-
-	if err := signoz.Wait(ctx); err != nil {
-		logger.ErrorContext(ctx, "failed to start signoz", "error", err)
-		return err
-	}
-
-	err = server.Stop(ctx)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to stop server", "error", err)
-		return err
-	}
-
-	err = signoz.Stop(ctx)
-	if err != nil {
-		logger.ErrorContext(ctx, "failed to stop signoz", "error", err)
-		return err
-	}
-
-	return nil
-}

cmd/root.go

@@ -1,33 +0,0 @@
-package cmd
-
-import (
-	"log/slog"
-	"os"
-
-	"github.com/SigNoz/signoz/pkg/version"
-	"github.com/spf13/cobra"
-	"go.uber.org/zap" //nolint:depguard
-)
-
-var RootCmd = &cobra.Command{
-	Use:               "signoz",
-	Short:             "OpenTelemetry-Native Logs, Metrics and Traces in a single pane",
-	Version:           version.Info.Version(),
-	SilenceUsage:      true,
-	SilenceErrors:     true,
-	CompletionOptions: cobra.CompletionOptions{DisableDefaultCmd: true},
-}
-
-func Execute(logger *slog.Logger) {
-	zapLogger := newZapLogger()
-	zap.ReplaceGlobals(zapLogger)
-	defer func() {
-		_ = zapLogger.Sync()
-	}()
-
-	err := RootCmd.Execute()
-	if err != nil {
-		logger.ErrorContext(RootCmd.Context(), "error running command", "error", err)
-		os.Exit(1)
-	}
-}

cmd/zap.go

@@ -1,15 +0,0 @@
-package cmd
-
-import (
-	"go.uber.org/zap"         //nolint:depguard
-	"go.uber.org/zap/zapcore" //nolint:depguard
-)
-
-// Deprecated: Use `NewLogger` from `pkg/instrumentation` instead.
-func newZapLogger() *zap.Logger {
-	config := zap.NewProductionConfig()
-	config.EncoderConfig.TimeKey = "timestamp"
-	config.EncoderConfig.EncodeTime = zapcore.ISO8601TimeEncoder
-	logger, _ := config.Build()
-	return logger
-}

deploy/docker-swarm/docker-compose.ha.yaml

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.90.1
+    image: signoz/signoz:v0.88.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -207,7 +207,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.128.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -231,7 +231,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.128.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -115,7 +115,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.90.1
+    image: signoz/signoz:v0.88.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -148,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.128.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.128.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.90.1}
+    image: signoz/signoz:${VERSION:-v0.88.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -211,7 +211,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -237,7 +237,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -248,7 +248,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.90.1}
+    image: signoz/signoz:${VERSION:-v0.88.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -143,7 +143,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -165,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-async
     command:
       - async

ee/query-service/.dockerignore

@@ -0,0 +1,4 @@
+.vscode
+README.md
+signoz.db
+bin

ee/query-service/.goreleaser.yaml

@@ -11,7 +11,7 @@ before:
 builds:
   - id: signoz
     binary: bin/signoz
-    main: cmd/enterprise
+    main: ee/query-service/main.go
     env:
       - CGO_ENABLED=1
       - >-

ee/query-service/Dockerfile

@@ -16,4 +16,4 @@ COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz
 
-ENTRYPOINT ["./signoz", "server"]
+ENTRYPOINT ["./signoz"]

ee/query-service/Dockerfile.integration

@@ -23,7 +23,6 @@ COPY go.mod go.sum ./
 
 RUN go mod download
 
-COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
 COPY ./templates/email /root/templates
@@ -34,4 +33,4 @@ RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 RUN chmod 755 /root /root/signoz
 
-ENTRYPOINT ["/root/signoz", "server"]
+ENTRYPOINT ["/root/signoz"]

ee/query-service/Dockerfile.multi-arch

@@ -17,4 +17,4 @@ COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz
 
-ENTRYPOINT ["./signoz", "server"]
+ENTRYPOINT ["./signoz"]

ee/query-service/main.go

@@ -0,0 +1,189 @@
+package main
+
+import (
+	"context"
+	"flag"
+	"os"
+	"time"
+
+	"github.com/SigNoz/signoz/ee/licensing"
+	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
+	"github.com/SigNoz/signoz/ee/query-service/app"
+	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
+	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
+	"github.com/SigNoz/signoz/ee/zeus"
+	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
+	"github.com/SigNoz/signoz/pkg/analytics"
+	"github.com/SigNoz/signoz/pkg/config"
+	"github.com/SigNoz/signoz/pkg/config/envprovider"
+	"github.com/SigNoz/signoz/pkg/config/fileprovider"
+	"github.com/SigNoz/signoz/pkg/factory"
+	pkglicensing "github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/modules/organization"
+	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
+	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/version"
+	pkgzeus "github.com/SigNoz/signoz/pkg/zeus"
+
+	"go.uber.org/zap"
+	"go.uber.org/zap/zapcore"
+)
+
+// Deprecated: Please use the logger from pkg/instrumentation.
+func initZapLog() *zap.Logger {
+	config := zap.NewProductionConfig()
+	config.EncoderConfig.TimeKey = "timestamp"
+	config.EncoderConfig.EncodeTime = zapcore.ISO8601TimeEncoder
+	logger, _ := config.Build()
+	return logger
+}
+
+func main() {
+	var promConfigPath, skipTopLvlOpsPath string
+
+	// disables rule execution but allows change to the rule definition
+	var disableRules bool
+
+	// the url used to build link in the alert messages in slack and other systems
+	var ruleRepoURL string
+	var cluster string
+
+	var useLogsNewSchema bool
+	var useTraceNewSchema bool
+	var cacheConfigPath, fluxInterval, fluxIntervalForTraceDetail string
+	var preferSpanMetrics bool
+
+	var maxIdleConns int
+	var maxOpenConns int
+	var dialTimeout time.Duration
+	var gatewayUrl string
+	var useLicensesV3 bool
+
+	// Deprecated
+	flag.BoolVar(&useLogsNewSchema, "use-logs-new-schema", false, "use logs_v2 schema for logs")
+	// Deprecated
+	flag.BoolVar(&useTraceNewSchema, "use-trace-new-schema", false, "use new schema for traces")
+	// Deprecated
+	flag.StringVar(&promConfigPath, "config", "./config/prometheus.yml", "(prometheus config to read metrics)")
+	// Deprecated
+	flag.StringVar(&skipTopLvlOpsPath, "skip-top-level-ops", "", "(config file to skip top level operations)")
+	// Deprecated
+	flag.BoolVar(&disableRules, "rules.disable", false, "(disable rule evaluation)")
+	flag.BoolVar(&preferSpanMetrics, "prefer-span-metrics", false, "(prefer span metrics for service level metrics)")
+	// Deprecated
+	flag.IntVar(&maxIdleConns, "max-idle-conns", 50, "(number of connections to maintain in the pool.)")
+	// Deprecated
+	flag.IntVar(&maxOpenConns, "max-open-conns", 100, "(max connections for use at any time.)")
+	// Deprecated
+	flag.DurationVar(&dialTimeout, "dial-timeout", 5*time.Second, "(the maximum time to establish a connection.)")
+	// Deprecated
+	flag.StringVar(&ruleRepoURL, "rules.repo-url", baseconst.AlertHelpPage, "(host address used to build rule link in alert messages)")
+	// Deprecated
+	flag.StringVar(&cacheConfigPath, "experimental.cache-config", "", "(cache config to use)")
+	flag.StringVar(&fluxInterval, "flux-interval", "5m", "(the interval to exclude data from being cached to avoid incorrect cache for data in motion)")
+	flag.StringVar(&fluxIntervalForTraceDetail, "flux-interval-trace-detail", "2m", "(the interval to exclude data from being cached to avoid incorrect cache for trace data in motion)")
+	flag.StringVar(&cluster, "cluster", "cluster", "(cluster name - defaults to 'cluster')")
+	flag.StringVar(&gatewayUrl, "gateway-url", "", "(url to the gateway)")
+	// Deprecated
+	flag.BoolVar(&useLicensesV3, "use-licenses-v3", false, "use licenses_v3 schema for licenses")
+	flag.Parse()
+
+	loggerMgr := initZapLog()
+	zap.ReplaceGlobals(loggerMgr)
+	defer loggerMgr.Sync() // flushes buffer, if any
+	ctx := context.Background()
+
+	config, err := signoz.NewConfig(ctx, config.ResolverConfig{
+		Uris: []string{"env:"},
+		ProviderFactories: []config.ProviderFactory{
+			envprovider.NewFactory(),
+			fileprovider.NewFactory(),
+		},
+	}, signoz.DeprecatedFlags{
+		MaxIdleConns:               maxIdleConns,
+		MaxOpenConns:               maxOpenConns,
+		DialTimeout:                dialTimeout,
+		Config:                     promConfigPath,
+		FluxInterval:               fluxInterval,
+		FluxIntervalForTraceDetail: fluxIntervalForTraceDetail,
+		Cluster:                    cluster,
+		GatewayUrl:                 gatewayUrl,
+	})
+	if err != nil {
+		zap.L().Fatal("Failed to create config", zap.Error(err))
+	}
+
+	version.Info.PrettyPrint(config.Version)
+
+	sqlStoreFactories := signoz.NewSQLStoreProviderFactories()
+	if err := sqlStoreFactories.Add(postgressqlstore.NewFactory(sqlstorehook.NewLoggingFactory())); err != nil {
+		zap.L().Fatal("Failed to add postgressqlstore factory", zap.Error(err))
+	}
+
+	jwtSecret := os.Getenv("SIGNOZ_JWT_SECRET")
+
+	if len(jwtSecret) == 0 {
+		zap.L().Warn("No JWT secret key is specified.")
+	} else {
+		zap.L().Info("JWT secret key set successfully.")
+	}
+
+	jwt := authtypes.NewJWT(jwtSecret, 30*time.Minute, 30*24*time.Hour)
+
+	signoz, err := signoz.New(
+		context.Background(),
+		config,
+		jwt,
+		zeus.Config(),
+		httpzeus.NewProviderFactory(),
+		licensing.Config(24*time.Hour, 3),
+		func(sqlstore sqlstore.SQLStore, zeus pkgzeus.Zeus, orgGetter organization.Getter, analytics analytics.Analytics) factory.ProviderFactory[pkglicensing.Licensing, pkglicensing.Config] {
+			return httplicensing.NewProviderFactory(sqlstore, zeus, orgGetter, analytics)
+		},
+		signoz.NewEmailingProviderFactories(),
+		signoz.NewCacheProviderFactories(),
+		signoz.NewWebProviderFactories(),
+		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
+			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
+			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {
+				zap.L().Fatal("Failed to add postgressqlschema factory", zap.Error(err))
+			}
+
+			return existingFactories
+		},
+		sqlStoreFactories,
+		signoz.NewTelemetryStoreProviderFactories(),
+	)
+	if err != nil {
+		zap.L().Fatal("Failed to create signoz", zap.Error(err))
+	}
+
+	server, err := app.NewServer(config, signoz, jwt)
+	if err != nil {
+		zap.L().Fatal("Failed to create server", zap.Error(err))
+	}
+
+	if err := server.Start(ctx); err != nil {
+		zap.L().Fatal("Could not start server", zap.Error(err))
+	}
+
+	signoz.Start(ctx)
+
+	if err := signoz.Wait(ctx); err != nil {
+		zap.L().Fatal("Failed to start signoz", zap.Error(err))
+	}
+
+	err = server.Stop(ctx)
+	if err != nil {
+		zap.L().Fatal("Failed to stop server", zap.Error(err))
+	}
+
+	err = signoz.Stop(ctx)
+	if err != nil {
+		zap.L().Fatal("Failed to stop signoz", zap.Error(err))
+	}
+}

frontend/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+	ignorePatterns: ['src/parser/*.ts'],
 	env: {
 		browser: true,
 		es2021: true,

frontend/package.json

@@ -28,6 +28,8 @@
 	"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",
@@ -43,6 +45,8 @@
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
+		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/hierarchy": "3.12.0",
@@ -53,6 +57,7 @@
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
 		"axios": "1.8.2",
+		"antlr4": "4.13.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -213,9 +218,7 @@
 		"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",
+		"image-webpack-loader": "8.1.0",
 		"is-ci": "^3.0.1",
 		"jest-styled-components": "^7.0.8",
 		"lint-staged": "^12.5.0",
@@ -232,7 +235,6 @@
 		"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.0.1",
@@ -257,7 +259,6 @@
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
 		"serialize-javascript": "6.0.2",
-		"prismjs": "1.30.0",
-		"got": "11.8.5"
+		"prismjs": "1.30.0"
 	}
 }

frontend/public/Logos/azure-mysql.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><linearGradient id="a" x1="2.59" y1="10.16" x2="15.41" y2="10.16" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#005ba1"/><stop offset=".07" stop-color="#0060a9"/><stop offset=".36" stop-color="#0071c8"/><stop offset=".52" stop-color="#0078d4"/><stop offset=".64" stop-color="#0074cd"/><stop offset=".82" stop-color="#006abb"/><stop offset="1" stop-color="#005ba1"/></linearGradient></defs><path d="M9 5.14c-3.54 0-6.41-1-6.41-2.32v12.36c0 1.27 2.82 2.3 6.32 2.32H9c3.54 0 6.41-1 6.41-2.32V2.82c0 1.29-2.87 2.32-6.41 2.32z" fill="url(#a)"/><path d="M15.41 2.82c0 1.29-2.87 2.32-6.41 2.32s-6.41-1-6.41-2.32S5.46.5 9 .5s6.41 1 6.41 2.32" fill="#e8e8e8"/><path d="M13.92 2.63c0 .82-2.21 1.48-4.92 1.48s-4.92-.66-4.92-1.48S6.29 1.16 9 1.16s4.92.66 4.92 1.47" fill="#50e6ff"/><path d="M9 3a11.55 11.55 0 00-3.89.57A11.42 11.42 0 009 4.11a11.15 11.15 0 003.89-.58A11.84 11.84 0 009 3z" fill="#198ab3"/><path d="M12.64 9v1.63h-1a.39.39 0 01-.29-.14V9H10v1.78a.92.92 0 001 .89h1.49l.26-.13s-.11.41-.26.43h-2.38v1h2.66A1.21 1.21 0 0014 11.7V9zM9.53 9v-.49a.7.7 0 00-.48-.77 1.74 1.74 0 00-.5-.08.94.94 0 00-.91.58l-.78 1.9-1-1.9A.93.93 0 005 7.66a1.44 1.44 0 00-.51.09c-.35.11-.43.34-.43.73v3.31h1.17V9.56l.63 1.57a1.08 1.08 0 001 .66c.44 0 .62-.26.8-.66l.67-1.51v2.15h1.18V9z" fill="#f2f2f2"/></svg>

frontend/public/Logos/cloudflare.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64"><path d="M8.16 23h21.177v-5.86l-4.023-2.307-.694-.3-16.46.113z" fill="#fff"/><path d="M22.012 22.222c.197-.675.122-1.294-.206-1.754-.3-.422-.807-.666-1.416-.694l-11.545-.15c-.075 0-.14-.038-.178-.094s-.047-.13-.028-.206c.038-.113.15-.197.272-.206l11.648-.15c1.38-.066 2.88-1.182 3.404-2.55l.666-1.735a.38.38 0 0 0 .02-.225c-.75-3.395-3.78-5.927-7.4-5.927-3.34 0-6.17 2.157-7.184 5.15-.657-.488-1.5-.75-2.392-.666-1.604.16-2.9 1.444-3.048 3.048a3.58 3.58 0 0 0 .084 1.191A4.84 4.84 0 0 0 0 22.1c0 .234.02.47.047.703.02.113.113.197.225.197H21.58a.29.29 0 0 0 .272-.206l.16-.572z" fill="#f38020"/><path d="M25.688 14.803l-.32.01c-.075 0-.14.056-.17.13l-.45 1.566c-.197.675-.122 1.294.206 1.754.3.422.807.666 1.416.694l2.457.15c.075 0 .14.038.178.094s.047.14.028.206c-.038.113-.15.197-.272.206l-2.56.15c-1.388.066-2.88 1.182-3.404 2.55l-.188.478c-.038.094.028.188.13.188h8.797a.23.23 0 0 0 .225-.169A6.41 6.41 0 0 0 32 21.106a6.32 6.32 0 0 0-6.312-6.302" fill="#faae40"/></svg>

frontend/public/Logos/elk.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M255.96 134.393c0-21.521-13.373-40.117-33.223-47.43a75.239 75.239 0 0 0 1.253-13.791c0-39.909-32.386-72.295-72.295-72.295-23.193 0-44.923 11.074-58.505 30.088-6.686-5.224-14.835-7.94-23.402-7.94-21.104 0-38.446 17.133-38.446 38.446 0 4.597.836 9.194 2.298 13.373C13.582 81.739 0 100.962 0 122.274c0 21.522 13.373 40.327 33.431 47.64-.835 4.388-1.253 8.985-1.253 13.79 0 39.7 32.386 72.087 72.086 72.087 23.402 0 44.924-11.283 58.505-30.088 6.686 5.223 15.044 8.149 23.611 8.149 21.104 0 38.446-17.134 38.446-38.446 0-4.597-.836-9.194-2.298-13.373 19.64-7.104 33.431-26.327 33.431-47.64z" fill="#FFF"/><path d="M100.085 110.364l57.043 26.119 57.669-50.565a64.312 64.312 0 0 0 1.253-12.746c0-35.52-28.834-64.355-64.355-64.355-21.313 0-41.162 10.447-53.072 27.998l-9.612 49.73 11.074 23.82z" fill="#F4BD19"/><path d="M40.953 170.75c-.835 4.179-1.253 8.567-1.253 12.955 0 35.52 29.043 64.564 64.564 64.564 21.522 0 41.372-10.656 53.49-28.208l9.403-49.729-12.746-24.238-57.251-26.118-56.207 50.774z" fill="#3CBEB1"/><path d="M40.536 71.918l39.073 9.194 8.775-44.506c-5.432-4.179-11.91-6.268-18.805-6.268-16.925 0-30.924 13.79-30.924 30.924 0 3.552.627 7.313 1.88 10.656z" fill="#E9478C"/><path d="M37.192 81.32c-17.551 5.642-29.67 22.567-29.67 40.954 0 17.97 11.074 34.059 27.79 40.327l54.953-49.73-10.03-21.52-43.043-10.03z" fill="#2C458F"/><path d="M167.784 219.852c5.432 4.18 11.91 6.478 18.596 6.478 16.925 0 30.924-13.79 30.924-30.924 0-3.761-.627-7.314-1.88-10.657l-39.073-9.193-8.567 44.296z" fill="#95C63D"/><path d="M175.724 165.317l43.043 10.03c17.551-5.85 29.67-22.566 29.67-40.954 0-17.97-11.074-33.849-27.79-40.326l-56.415 49.311 11.492 21.94z" fill="#176655"/></svg>

frontend/public/Logos/external-api-monitoring.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	   width="800px" height="800px" viewBox="0 0 24 24" overflow="visible" xml:space="preserve">
-<g >
-	<rect y="0" fill="none" width="24" height="24"/>
-	<g transform="translate(1.000000, 8.000000)">
-		<path fill-rule="evenodd" fill="#5C85DE" d="M2-1.9c-1.1,0-2.3,1.1-2.3,2.2V10H2V5.5h2.2V10h2.2V0.3c0-1.1-1.1-2.2-2.3-2.2H2
-			L2-1.9z M2,3.2v-3h2.2v3H2L2,3.2z"/>
-		<path fill-rule="evenodd" fill="#5C85DE" d="M10.3-2C9.1-2,8-0.9,8,0.2V10l2.2,0V5.5h2.2c1.1,0,2.3-1.1,2.3-2.2l0-3
-			c0-1.1-1.1-2.2-2.3-2.2H10.3L10.3-2z M10.2,3.2v-3h2.2v3H10.2L10.2,3.2z"/>
-		<polygon fill-rule="evenodd" fill="#5C85DE" points="18.5,0.3 18.5,7.8 16.2,7.8 16.2,10 23,10 23,7.8 20.8,7.8 20.8,0.3 23,0.3 
-			23,-1.9 16.2,-1.9 16.2,0.3 		"/>
-		<polygon fill-rule="evenodd" fill="#3367D6" points="2,5.5 2,3.2 3.5,3.2 		"/>
-		<polygon fill-rule="evenodd" fill="#3367D6" points="10.2,5.5 10.2,3.2 11.5,3.2 		"/>
-		<polygon fill-rule="evenodd" fill="#3367D6" points="18.5,1.8 18.5,1.8 18.5,0.3 20.8,0.3 		"/>
-	</g>
-</g>

frontend/public/Logos/github-actions.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#2088ff" d="M26.666 0C11.97 0 0 11.97 0 26.666c0 12.87 9.181 23.651 21.334 26.13v37.87c0 11.77 9.68 21.334 21.332 21.334h.195c1.302 9.023 9.1 16 18.473 16C71.612 128 80 119.612 80 109.334s-8.388-18.668-18.666-18.668c-9.372 0-17.17 6.977-18.473 16h-.195c-8.737 0-16-7.152-16-16V63.779a18.514 18.514 0 0 0 13.24 5.555h2.955c1.303 9.023 9.1 16 18.473 16 9.372 0 17.169-6.977 18.47-16h11.057c1.303 9.023 9.1 16 18.473 16 10.278 0 18.666-8.39 18.666-18.668C128 56.388 119.612 48 109.334 48c-9.373 0-17.171 6.977-18.473 16H79.805c-1.301-9.023-9.098-16-18.471-16s-17.171 6.977-18.473 16h-2.955c-6.433 0-11.793-4.589-12.988-10.672 14.58-.136 26.416-12.05 26.416-26.662C53.334 11.97 41.362 0 26.666 0zm0 5.334A21.292 21.292 0 0 1 48 26.666 21.294 21.294 0 0 1 26.666 48 21.292 21.292 0 0 1 5.334 26.666 21.29 21.29 0 0 1 26.666 5.334zm-5.215 7.541C18.67 12.889 16 15.123 16 18.166v17.043c0 4.043 4.709 6.663 8.145 4.533l13.634-8.455c3.257-2.02 3.274-7.002.032-9.045l-13.635-8.59a5.024 5.024 0 0 0-2.725-.777zm-.117 5.291 13.635 8.588-13.635 8.455V18.166zm40 35.168a13.29 13.29 0 0 1 13.332 13.332A13.293 13.293 0 0 1 61.334 80 13.294 13.294 0 0 1 48 66.666a13.293 13.293 0 0 1 13.334-13.332zm48 0a13.29 13.29 0 0 1 13.332 13.332A13.293 13.293 0 0 1 109.334 80 13.294 13.294 0 0 1 96 66.666a13.293 13.293 0 0 1 13.334-13.332zm-42.568 6.951a2.667 2.667 0 0 0-1.887.78l-6.3 6.294-2.093-2.084a2.667 2.667 0 0 0-3.771.006 2.667 2.667 0 0 0 .008 3.772l3.974 3.96a2.667 2.667 0 0 0 3.766-.001l8.185-8.174a2.667 2.667 0 0 0 .002-3.772 2.667 2.667 0 0 0-1.884-.78zm48 0a2.667 2.667 0 0 0-1.887.78l-6.3 6.294-2.093-2.084a2.667 2.667 0 0 0-3.771.006 2.667 2.667 0 0 0 .008 3.772l3.974 3.96a2.667 2.667 0 0 0 3.766-.001l8.185-8.174a2.667 2.667 0 0 0 .002-3.772 2.667 2.667 0 0 0-1.884-.78zM61.334 96a13.293 13.293 0 0 1 13.332 13.334 13.29 13.29 0 0 1-13.332 13.332A13.293 13.293 0 0 1 48 109.334 13.294 13.294 0 0 1 61.334 96zM56 105.334c-2.193 0-4 1.807-4 4 0 2.195 1.808 4 4 4s4-1.805 4-4c0-2.193-1.807-4-4-4zm10.666 0c-2.193 0-4 1.807-4 4 0 2.195 1.808 4 4 4s4-1.805 4-4c0-2.193-1.807-4-4-4zM56 108c.75 0 1.334.585 1.334 1.334 0 .753-.583 1.332-1.334 1.332-.75 0-1.334-.58-1.334-1.332 0-.75.585-1.334 1.334-1.334zm10.666 0c.75 0 1.334.585 1.334 1.334 0 .753-.583 1.332-1.334 1.332-.75 0-1.332-.58-1.332-1.332 0-.75.583-1.334 1.332-1.334z"/><path fill="#79b8ff" d="M109.334 90.666c-9.383 0-17.188 6.993-18.477 16.031a2.667 2.667 0 0 0-.265-.011l-2.7.09a2.667 2.667 0 0 0-2.578 2.751 2.667 2.667 0 0 0 2.752 2.578l2.7-.087a2.667 2.667 0 0 0 .097-.006C92.17 121.029 99.965 128 109.334 128c10.278 0 18.666-8.388 18.666-18.666s-8.388-18.668-18.666-18.668zm0 5.334a13.293 13.293 0 0 1 13.332 13.334 13.29 13.29 0 0 1-13.332 13.332A13.293 13.293 0 0 1 96 109.334 13.294 13.294 0 0 1 109.334 96z"/></svg>

frontend/public/Logos/github.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="lucide/github">
-<path id="Vector" d="M15 22V18C15.1391 16.7473 14.7799 15.4901 14 14.5C17 14.5 20 12.5 20 9C20.08 7.75 19.73 6.52 19 5.5C19.28 4.35 19.28 3.15 19 2C19 2 18 2 16 3.5C13.36 3 10.64 3 8 3.5C6 2 5 2 5 2C4.7 3.15 4.7 4.35 5 5.5C4.27187 6.51588 3.91847 7.75279 4 9C4 12.5 7 14.5 10 14.5C9.61 14.99 9.32 15.55 9.15 16.15C8.98 16.75 8.93 17.38 9 18M9 18V22M9 18C4.49 20 4 16 2 16" stroke="#C0C1C3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>

frontend/public/Logos/http-monitoring.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 373.71 200"><defs><style type="text/css">.cls-1{fill:#008ec7;}.cls-2{fill:#005b9b;}.cls-3{fill:#fff;}</style></defs><title>IETF-Badge-HTTP</title><g id="Layer_2"><path class="cls-1" d="M326,0H47.73L0,100,47.73,200H326l47.73-100ZM310.05,183.36H58.22L18.43,100,58.22,16.64H310.05L349.84,100Z"/><polygon class="cls-2" points="349.84 100.01 310.05 183.37 58.22 183.37 18.43 100.01 58.22 16.64 310.05 16.64 349.84 100.01"/><path class="cls-3" d="M128.05,71.89v59.53H114.27V107h-27v24.41H73.46V71.89H87.23V95.36h27V71.89Z"/><path class="cls-3" d="M154.5,83.12H135.45V71.89h51.87V83.12h-19v48.3H154.5Z"/><path class="cls-3" d="M207.9,83.12H188.85V71.89h51.87V83.12H221.67v48.3H207.9Z"/><path class="cls-3" d="M287.62,74.53a20.45,20.45,0,0,1,9,7.48,20.67,20.67,0,0,1,3.14,11.48,20.73,20.73,0,0,1-3.14,11.44,20.06,20.06,0,0,1-9,7.48A33.55,33.55,0,0,1,273.88,115h-12v16.42H248.12V71.89h25.76A33.05,33.05,0,0,1,287.62,74.53Zm-5.06,26.57a9.33,9.33,0,0,0,3.23-7.61c0-3.34-1.08-5.91-3.23-7.69s-5.3-2.68-9.44-2.68H261.89v20.66h11.23Q279.33,103.78,282.56,101.1Z"/></g></svg>

frontend/public/Logos/newrelic.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 832.8 959.8" xmlns="http://www.w3.org/2000/svg" width="2169" height="2500"><path d="M672.6 332.3l160.2-92.4v480L416.4 959.8V775.2l256.2-147.6z" fill="#00ac69"/><path d="M416.4 184.6L160.2 332.3 0 239.9 416.4 0l416.4 239.9-160.2 92.4z" fill="#1ce783"/><path d="M256.2 572.3L0 424.6V239.9l416.4 240v479.9l-160.2-92.2z" fill="#1d252c"/></svg>

frontend/public/Logos/openai.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#fff" d="M44.559 19.646a11.957 11.957 0 0 0-1.028-9.822 12.094 12.094 0 0 0-13.026-5.802A11.962 11.962 0 0 0 21.485 0 12.097 12.097 0 0 0 9.95 8.373a11.964 11.964 0 0 0-7.997 5.8A12.097 12.097 0 0 0 3.44 28.356a11.957 11.957 0 0 0 1.028 9.822 12.094 12.094 0 0 0 13.026 5.802 11.953 11.953 0 0 0 9.02 4.02 12.096 12.096 0 0 0 11.54-8.379 11.964 11.964 0 0 0 7.997-5.8 12.099 12.099 0 0 0-1.491-14.177zM26.517 44.863a8.966 8.966 0 0 1-5.759-2.082 6.85 6.85 0 0 0 .284-.16L30.6 37.1c.49-.278.79-.799.786-1.361V22.265l4.04 2.332a.141.141 0 0 1 .078.111v11.16a9.006 9.006 0 0 1-8.987 8.995zM7.191 36.608a8.957 8.957 0 0 1-1.073-6.027c.071.042.195.119.284.17l9.558 5.52a1.556 1.556 0 0 0 1.57 0l11.67-6.738v4.665a.15.15 0 0 1-.057.124l-9.662 5.579a9.006 9.006 0 0 1-12.288-3.293zM4.675 15.744a8.966 8.966 0 0 1 4.682-3.943c0 .082-.005.228-.005.33v11.042a1.555 1.555 0 0 0 .785 1.359l11.669 6.736-4.04 2.333a.143.143 0 0 1-.136.012L7.967 28.03a9.006 9.006 0 0 1-3.293-12.284zm33.19 7.724L26.196 16.73l4.04-2.331a.143.143 0 0 1 .136-.012l9.664 5.579c4.302 2.485 5.776 7.989 3.29 12.29a8.991 8.991 0 0 1-4.68 3.943V24.827a1.553 1.553 0 0 0-.78-1.36zm4.02-6.051c-.07-.044-.195-.119-.283-.17l-9.558-5.52a1.556 1.556 0 0 0-1.57 0l-11.67 6.738V13.8a.15.15 0 0 1 .057-.124l9.662-5.574a8.995 8.995 0 0 1 13.36 9.315zm-25.277 8.315-4.04-2.333a.141.141 0 0 1-.079-.11v-11.16a8.997 8.997 0 0 1 14.753-6.91c-.073.04-.2.11-.283.161L17.4 10.9a1.552 1.552 0 0 0-.786 1.36l-.006 13.469zM18.803 21l5.198-3.002 5.197 3V27l-5.197 3-5.198-3z"/></svg>

frontend/public/Logos/s3.svg

@@ -1 +0,0 @@
-<svg height="2500" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><linearGradient id="a" x1="0%" y1="100%" y2="0%"><stop offset="0" stop-color="#1b660f"/><stop offset="1" stop-color="#6cae3e"/></linearGradient><g fill="none" fill-rule="evenodd"><path d="M0 0h80v80H0z" fill="url(#a)"/><path d="M60.836 42.893l.384-2.704c3.54 2.12 3.587 2.997 3.586 3.02-.006.006-.61.51-3.97-.316zm-1.943-.54C52.773 40.5 44.25 36.59 40.8 34.96c0-.014.004-.027.004-.041a2.406 2.406 0 0 0-2.404-2.403c-1.324 0-2.402 1.078-2.402 2.403s1.078 2.403 2.402 2.403c.582 0 1.11-.217 1.527-.562 4.058 1.92 12.515 5.774 18.68 7.594L56.17 61.56a.955.955 0 0 0-.01.14c0 1.516-6.707 4.299-17.666 4.299-11.075 0-17.853-2.783-17.853-4.298 0-.046-.003-.091-.01-.136l-5.093-37.207c4.409 3.035 13.892 4.64 22.962 4.64 9.056 0 18.523-1.6 22.94-4.625zM15 20.478C15.072 19.162 22.634 14 38.5 14c15.864 0 23.427 5.16 23.5 6.478v.449C61.13 23.877 51.33 27 38.5 27c-12.852 0-22.657-3.132-23.5-6.087zm49 .022c0-3.465-9.934-8.5-25.5-8.5S13 17.035 13 20.5l.094.754 5.548 40.524C18.775 66.31 30.86 68 38.494 68c9.472 0 19.535-2.178 19.665-6.22l2.396-16.896c1.333.319 2.43.482 3.31.482 1.184 0 1.984-.29 2.469-.867a1.95 1.95 0 0 0 .436-1.66c-.26-1.383-1.902-2.875-5.248-4.784l2.376-16.762z" fill="#fff"/></g></svg>

frontend/public/Logos/snowflake.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#29b5e8"><path d="M9.86 15.298l13.008 7.8a3.72 3.72 0 0 0 4.589-.601 4.01 4.01 0 0 0 1.227-2.908V3.956a3.81 3.81 0 0 0-1.861-3.42 3.81 3.81 0 0 0-3.893 0 3.81 3.81 0 0 0-1.861 3.42v8.896l-7.387-4.43a3.79 3.79 0 0 0-2.922-.4c-.986.265-1.818.94-2.3 1.844-1.057 1.9-.44 4.28 1.4 5.422m31.27 7.8l13.008-7.8c1.84-1.143 2.458-3.533 1.4-5.424a3.75 3.75 0 0 0-5.22-1.452l-7.3 4.37v-8.84a3.81 3.81 0 1 0-7.615 0v15.323a4.08 4.08 0 0 0 .494 2.367c.482.903 1.314 1.57 2.3 1.844a3.71 3.71 0 0 0 2.922-.4M29.552 31.97c.013-.25.108-.5.272-.68l1.52-1.58a1.06 1.06 0 0 1 .658-.282h.057a1.05 1.05 0 0 1 .656.282l1.52 1.58a1.12 1.12 0 0 1 .272.681v.06a1.13 1.13 0 0 1-.272.683l-1.52 1.58a1.04 1.04 0 0 1-.656.284h-.057c-.246-.014-.48-.115-.658-.284l-1.52-1.58a1.13 1.13 0 0 1-.272-.683zm-4.604-.65v1.364a1.54 1.54 0 0 0 .372.93l5.16 5.357a1.42 1.42 0 0 0 .895.386h1.312a1.42 1.42 0 0 0 .895-.386l5.16-5.357a1.54 1.54 0 0 0 .372-.93V31.32a1.54 1.54 0 0 0-.372-.93l-5.16-5.357a1.42 1.42 0 0 0-.895-.386h-1.312a1.42 1.42 0 0 0-.895.386L25.32 30.4a1.55 1.55 0 0 0-.372.93M3.13 27.62l7.365 4.417L3.13 36.45a4.06 4.06 0 0 0-1.399 5.424 3.75 3.75 0 0 0 2.3 1.844c.986.274 2.042.133 2.922-.392l13.008-7.8c1.2-.762 1.9-2.078 1.9-3.492a4.16 4.16 0 0 0-1.9-3.492l-13.008-7.8a3.79 3.79 0 0 0-2.922-.4c-.986.265-1.818.94-2.3 1.844-1.057 1.9-.44 4.278 1.4 5.422m38.995 4.442a4 4 0 0 0 1.91 3.477l13 7.8c.88.524 1.934.666 2.92.392s1.817-.94 2.3-1.843a4.05 4.05 0 0 0-1.4-5.424L53.5 32.038l7.365-4.417c1.84-1.143 2.457-3.53 1.4-5.422a3.74 3.74 0 0 0-2.3-1.844c-.987-.274-2.042-.134-2.92.4l-13 7.8a4 4 0 0 0-1.91 3.507M25.48 40.508a3.7 3.7 0 0 0-2.611.464l-13.008 7.8c-1.84 1.143-2.456 3.53-1.4 5.422.483.903 1.314 1.57 2.3 1.843a3.75 3.75 0 0 0 2.922-.392l7.387-4.43v8.83a3.81 3.81 0 1 0 7.614 0V44.4a3.91 3.91 0 0 0-3.205-3.903m28.66 8.276l-13.008-7.8a3.75 3.75 0 0 0-2.922-.392 3.74 3.74 0 0 0-2.3 1.843 4.09 4.09 0 0 0-.494 2.37v15.25a3.81 3.81 0 1 0 7.614 0V51.28l7.287 4.37a3.79 3.79 0 0 0 2.922.4c.986-.265 1.818-.94 2.3-1.844 1.057-1.9.44-4.28-1.4-5.422"/></svg>

frontend/public/Logos/sns.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
-    <title>Icon-Architecture/64/Arch_AWS-Simple-Notification-Service_64</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="linearGradient-1">
-            <stop stop-color="#B0084D" offset="0%"></stop>
-            <stop stop-color="#FF4F8B" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Icon-Architecture/64/Arch_AWS-Simple-Notification-Service_64" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icon-Architecture-BG/64/Application-Integration" fill="url(#linearGradient-1)">
-            <rect id="Rectangle" x="0" y="0" width="80" height="80"></rect>
-        </g>
-        <path d="M17,38 C18.103,38 19,38.897 19,40 C19,41.103 18.103,42 17,42 C15.897,42 15,41.103 15,40 C15,38.897 15.897,38 17,38 L17,38 Z M41,64 C29.314,64 19.289,55.466 17.194,43.98 C18.965,43.894 20.427,42.659 20.857,41 L27,41 L27,39 L20.857,39 C20.427,37.342 18.966,36.107 17.195,36.02 C19.285,24.71 29.511,16 41,16 C45.313,16 49.832,17.622 54.429,20.821 L55.571,19.179 C50.633,15.743 45.73,14 41,14 C28.27,14 16.949,23.865 15.063,36.521 C13.839,37.207 13,38.5 13,40 C13,41.5 13.839,42.793 15.063,43.478 C16.97,56.341 28.056,66 41,66 C46.407,66 51.942,64.157 56.585,60.811 L55.415,59.189 C51.11,62.292 45.991,64 41,64 L41,64 Z M30.101,36.442 C31.955,36.895 34.275,37 36,37 C37.642,37 39.823,36.905 41.629,36.506 L37.105,45.553 C37.036,45.691 37,45.845 37,46 L37,50.453 C36.199,50.964 34.833,51.812 34,51.986 L34,46 C34,45.868 33.974,45.737 33.923,45.615 L30.101,36.442 Z M36,33 C40.025,33 42.174,33.604 42.841,34 C42.174,34.396 40.025,35 36,35 C31.975,35 29.826,34.396 29.159,34 C29.826,33.604 31.975,33 36,33 L36,33 Z M33,54 L34,54 C34.043,54 34.086,53.997 34.128,53.992 C35.352,53.833 36.909,52.887 38.272,52.013 L38.535,51.845 C38.824,51.661 39,51.342 39,51 L39,46.236 L44.559,35.12 C44.833,34.801 45,34.434 45,34 C45,31.39 39.361,31 36,31 C32.639,31 27,31.39 27,34 C27,34.366 27.12,34.684 27.32,34.967 L32,46.2 L32,53 C32,53.552 32.447,54 33,54 L33,54 Z M62,53 C63.103,53 64,53.897 64,55 C64,56.103 63.103,57 62,57 C60.897,57 60,56.103 60,55 C60,53.897 60.897,53 62,53 L62,53 Z M62,23 C63.103,23 64,23.897 64,25 C64,26.103 63.103,27 62,27 C60.897,27 60,26.103 60,25 C60,23.897 60.897,23 62,23 L62,23 Z M64,38 C65.103,38 66,38.897 66,40 C66,41.103 65.103,42 64,42 C62.897,42 62,41.103 62,40 C62,38.897 62.897,38 64,38 L64,38 Z M54,41 L60.143,41 C60.589,42.72 62.142,44 64,44 C66.206,44 68,42.206 68,40 C68,37.794 66.206,36 64,36 C62.142,36 60.589,37.28 60.143,39 L54,39 L54,26 L58.143,26 C58.589,27.72 60.142,29 62,29 C64.206,29 66,27.206 66,25 C66,22.794 64.206,21 62,21 C60.142,21 58.589,22.28 58.143,24 L53,24 C52.447,24 52,24.448 52,25 L52,39 L45,39 L45,41 L52,41 L52,55 C52,55.552 52.447,56 53,56 L58.143,56 C58.589,57.72 60.142,59 62,59 C64.206,59 66,57.206 66,55 C66,52.794 64.206,51 62,51 C60.142,51 58.589,52.28 58.143,54 L54,54 L54,41 Z" id="AWS-Simple-Notification-Service_Icon_64_Squid" fill="#FFFFFF"></path>
-    </g>
-</svg>

frontend/public/Logos/systemd.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
-    <path fill="#fff" d="M0 0h300v200H0z"/>
-    <g transform="translate(30.667 -1141.475) scale(1.33333)">
-        <path d="M25 911.61v39h15v-6h-9v-27h9v-6zm114 0v6h9v27h-9v6h15v-39z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#201a26"/>
-        <path d="M92.5 931.11l27-15v30z" fill="#30d475"/>
-        <circle cx="70.002" cy="931.111" r="13.5" fill="#30d475"/>
-    </g>
-</svg>

frontend/public/Logos/wordpress.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#00749a"><path d="M2.26 16c0 5.45 3.13 10.145 7.7 12.348L3.478 10.435C2.725 12.174 2.26 14.03 2.26 16zm23.015-.696c0-1.68-.638-2.9-1.16-3.768-.696-1.16-1.333-2.087-1.333-3.246 0-1.275.986-2.435 2.32-2.435h.174C22.84 3.594 19.594 2.26 16 2.26A13.95 13.95 0 0 0 4.522 8.463h.87c1.45 0 3.652-.174 3.652-.174.754-.058.812 1.043.116 1.16 0 0-.754.116-1.565.116l4.986 14.84 3.014-8.986-2.145-5.855L12 9.45c-.754-.058-.638-1.16.058-1.16 0 0 2.26.174 3.594.174 1.45 0 3.652-.174 3.652-.174.754-.058.812 1.043.116 1.16 0 0-.754.116-1.565.116L22.84 24.35l1.4-4.58c.58-1.913 1.043-3.246 1.043-4.464zm-9.043 1.913L12.116 29.16c1.217.348 2.55.58 3.884.58 1.623 0 3.13-.3 4.58-.754-.058-.058-.058-.116-.116-.174zM28.058 9.45l.116 1.4c0 1.4-.232 2.957-1.043 4.928l-4.174 12.116c4.058-2.377 6.84-6.783 6.84-11.884-.058-2.377-.696-4.58-1.74-6.55zM16 0C7.188 0 0 7.188 0 16s7.188 16 16 16 16-7.188 16-16S24.812 0 16 0zm0 31.304C7.594 31.304.754 24.464.754 16A15.27 15.27 0 0 1 16 .754 15.27 15.27 0 0 1 31.246 16c0 8.464-6.84 15.304-15.246 15.304z"/></svg>

frontend/public/locales/en-GB/failedPayment.json

@@ -8,6 +8,5 @@
 	"actNow": "Act now to avoid any disruptions and continue where you left off.",
 	"contactAdmin": "Contact your admin to proceed with the upgrade.",
 	"continueMyJourney": "Settle your bill to continue",
-	"somethingWentWrong": "Something went wrong",
-	"refreshPaymentStatus": "Refresh Status"
+	"somethingWentWrong": "Something went wrong"
 }

frontend/public/locales/en/failedPayment.json

@@ -8,6 +8,5 @@
 	"actNow": "Act now to avoid any disruptions and continue where you left off.",
 	"contactAdmin": "Contact your admin to proceed with the upgrade.",
 	"continueMyJourney": "Settle your bill to continue",
-	"somethingWentWrong": "Something went wrong",
-	"refreshPaymentStatus": "Refresh Status"
+	"somethingWentWrong": "Something went wrong"
 }

frontend/src/AppRoutes/index.tsx

@@ -3,7 +3,6 @@ import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
-import AppLoading from 'components/AppLoading/AppLoading';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import UserpilotRouteTracker from 'components/UserpilotRouteTracker/UserpilotRouteTracker';
@@ -343,7 +342,7 @@ function App(): JSX.Element {
 	if (isLoggedInState) {
 		// if the setup calls are loading then return a spinner
 		if (isFetchingActiveLicense || isFetchingUser || isFetchingFeatureFlags) {
-			return <AppLoading />;
+			return <Spinner tip="Loading..." />;
 		}
 
 		// if the required calls fails then return a something went wrong error

frontend/src/api/apiV1.ts

@@ -3,6 +3,7 @@ const apiV1 = '/api/v1/';
 export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
 export const apiV4 = '/api/v4/';
+export const apiV5 = '/api/v5/';
 export const gatewayApiV1 = '/api/gateway/v1/';
 export const gatewayApiV2 = '/api/gateway/v2/';
 export const apiAlertManager = '/api/alertmanager/';

frontend/src/api/changelog/getChangelogByVersion.ts

@@ -1,32 +1,14 @@
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import axios, { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	ChangelogSchema,
-	DeploymentType,
-} from 'types/api/changelog/getChangelogByVersion';
+import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 
 const getChangelogByVersion = async (
 	versionId: string,
-	deployment_type?: DeploymentType,
 ): Promise<SuccessResponse<ChangelogSchema> | ErrorResponse> => {
 	try {
-		let queryParams = `filters[version][$eq]=${versionId}&populate[features][sort]=sort_order:asc&populate[features][populate][media][fields]=id,ext,url,mime,alternativeText`;
-
-		if (
-			deployment_type &&
-			Object.values(DeploymentType).includes(deployment_type)
-		) {
-			const excludedDeploymentType =
-				deployment_type === DeploymentType.CLOUD_ONLY
-					? DeploymentType.OSS_ONLY
-					: DeploymentType.CLOUD_ONLY;
-
-			queryParams = `${queryParams}&populate[features][filters][deployment_type][$notIn]=${excludedDeploymentType}`;
-		}
-
 		const response = await axios.get(`
-			https://cms.signoz.cloud/api/release-changelogs?${queryParams}
+			https://cms.signoz.cloud/api/release-changelogs?filters[version][$eq]=${versionId}&populate[features][sort]=sort_order:asc&populate[features][populate][media][fields]=id,ext,url,mime,alternativeText
         `);
 
 		if (!Array.isArray(response.data.data) || response.data.data.length === 0) {

frontend/src/api/index.ts

@@ -19,6 +19,7 @@ import apiV1, {
 	apiV2,
 	apiV3,
 	apiV4,
+	apiV5,
 	gatewayApiV1,
 	gatewayApiV2,
 } from './apiV1';
@@ -171,6 +172,18 @@ ApiV4Instance.interceptors.response.use(
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
+// axios V5
+export const ApiV5Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${apiV5}`,
+});
+
+ApiV5Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
 // axios Base
 export const ApiBaseInstance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,

frontend/src/api/metrics/getTopOperations.ts

@@ -2,20 +2,13 @@ import axios from 'api';
 import { PayloadProps, Props } from 'types/api/metrics/getTopOperations';
 
 const getTopOperations = async (props: Props): Promise<PayloadProps> => {
-	const endpoint = props.isEntryPoint
-		? '/service/entry_point_operations'
-		: '/service/top_operations';
-
-	const response = await axios.post(endpoint, {
+	const response = await axios.post(`/service/top_operations`, {
 		start: `${props.start}`,
 		end: `${props.end}`,
 		service: props.service,
 		tags: props.selectedTags,
 	});
 
-	if (props.isEntryPoint) {
-		return response.data.data;
-	}
 	return response.data;
 };
 

frontend/src/api/pipeline/post.ts

@@ -1,20 +1,24 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Pipeline } from 'types/api/pipeline/def';
 import { Props } from 'types/api/pipeline/post';
 
-const post = async (props: Props): Promise<SuccessResponseV2<Pipeline>> => {
+const post = async (
+	props: Props,
+): Promise<SuccessResponse<Pipeline> | ErrorResponse> => {
 	try {
 		const response = await axios.post('/logs/pipelines', props.data);
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -0,0 +1,22 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyRequestProps,
+	QueryKeySuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getKeySuggestions = (
+	props: QueryKeyRequestProps,
+): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> => {
+	const {
+		signal = '',
+		searchText = '',
+		metricName = '',
+		fieldContext = '',
+		fieldDataType = '',
+	} = props;
+
+	return axios.get(
+		`/fields/keys?signal=${signal}&searchText=${searchText}&metricName=${metricName}&fieldContext=${fieldContext}&fieldDataType=${fieldDataType}`,
+	);
+};

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -0,0 +1,20 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyValueRequestProps,
+	QueryKeyValueSuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getValueSuggestions = (
+	props: QueryKeyValueRequestProps,
+): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
+	const { signal, key, searchText } = props;
+
+	const encodedSignal = encodeURIComponent(signal);
+	const encodedKey = encodeURIComponent(key);
+	const encodedSearchText = encodeURIComponent(searchText);
+
+	return axios.get(
+		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}`,
+	);
+};

frontend/src/api/v3/licenses/post.ts

@@ -1,24 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/licenses/apply';
-
-const apply = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/licenses', {
-			key: props.key,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default apply;

frontend/src/api/v3/licenses/put.ts

@@ -2,11 +2,15 @@ import { ApiV3Instance as axios } from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps } from 'types/api/licenses/apply';
+import { PayloadProps, Props } from 'types/api/licenses/apply';
 
-const apply = async (): Promise<SuccessResponseV2<PayloadProps>> => {
+const apply = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put<PayloadProps>('/licenses');
+		const response = await axios.post<PayloadProps>('/licenses', {
+			key: props.key,
+		});
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/v5/queryRange/constants.ts

@@ -0,0 +1,168 @@
+// V5 Query Range Constants
+
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import {
+	FunctionName,
+	RequestType,
+	SignalType,
+	Step,
+} from 'types/api/v5/queryRange';
+
+// ===================== Schema and Version Constants =====================
+
+export const SCHEMA_VERSION_V5 = ENTITY_VERSION_V5;
+export const API_VERSION_V5 = 'v5';
+
+// ===================== Default Values =====================
+
+export const DEFAULT_STEP_INTERVAL: Step = '60s';
+export const DEFAULT_LIMIT = 100;
+export const DEFAULT_OFFSET = 0;
+
+// ===================== Request Type Constants =====================
+
+export const REQUEST_TYPES: Record<string, RequestType> = {
+	SCALAR: 'scalar',
+	TIME_SERIES: 'time_series',
+	RAW: 'raw',
+	DISTRIBUTION: 'distribution',
+} as const;
+
+// ===================== Signal Type Constants =====================
+
+export const SIGNAL_TYPES: Record<string, SignalType> = {
+	TRACES: 'traces',
+	LOGS: 'logs',
+	METRICS: 'metrics',
+} as const;
+
+// ===================== Common Aggregation Expressions =====================
+
+export const TRACE_AGGREGATIONS = {
+	COUNT: 'count()',
+	COUNT_DISTINCT_TRACE_ID: 'count_distinct(traceID)',
+	AVG_DURATION: 'avg(duration_nano)',
+	P50_DURATION: 'p50(duration_nano)',
+	P95_DURATION: 'p95(duration_nano)',
+	P99_DURATION: 'p99(duration_nano)',
+	MAX_DURATION: 'max(duration_nano)',
+	MIN_DURATION: 'min(duration_nano)',
+	SUM_DURATION: 'sum(duration_nano)',
+} as const;
+
+export const LOG_AGGREGATIONS = {
+	COUNT: 'count()',
+	COUNT_DISTINCT_HOST: 'count_distinct(host.name)',
+	COUNT_DISTINCT_SERVICE: 'count_distinct(service.name)',
+	COUNT_DISTINCT_CONTAINER: 'count_distinct(container.name)',
+} as const;
+
+// ===================== Common Filter Expressions =====================
+
+export const COMMON_FILTERS = {
+	// Trace filters
+	SERVER_SPANS: "kind_string = 'Server'",
+	CLIENT_SPANS: "kind_string = 'Client'",
+	INTERNAL_SPANS: "kind_string = 'Internal'",
+	ERROR_SPANS: 'http.status_code >= 400',
+	SUCCESS_SPANS: 'http.status_code < 400',
+
+	// Common service filters
+	EXCLUDE_HEALTH_CHECKS: "http.route != '/health' AND http.route != '/ping'",
+	HTTP_REQUESTS: "http.method != ''",
+
+	// Log filters
+	ERROR_LOGS: "severity_text = 'ERROR'",
+	WARN_LOGS: "severity_text = 'WARN'",
+	INFO_LOGS: "severity_text = 'INFO'",
+	DEBUG_LOGS: "severity_text = 'DEBUG'",
+} as const;
+
+// ===================== Common Group By Fields =====================
+
+export const COMMON_GROUP_BY_FIELDS = {
+	SERVICE_NAME: {
+		name: 'service.name',
+		fieldDataType: 'string' as const,
+		fieldContext: 'resource' as const,
+	},
+	HTTP_METHOD: {
+		name: 'http.method',
+		fieldDataType: 'string' as const,
+		fieldContext: 'attribute' as const,
+	},
+	HTTP_ROUTE: {
+		name: 'http.route',
+		fieldDataType: 'string' as const,
+		fieldContext: 'attribute' as const,
+	},
+	HTTP_STATUS_CODE: {
+		name: 'http.status_code',
+		fieldDataType: 'int64' as const,
+		fieldContext: 'attribute' as const,
+	},
+	HOST_NAME: {
+		name: 'host.name',
+		fieldDataType: 'string' as const,
+		fieldContext: 'resource' as const,
+	},
+	CONTAINER_NAME: {
+		name: 'container.name',
+		fieldDataType: 'string' as const,
+		fieldContext: 'resource' as const,
+	},
+} as const;
+
+// ===================== Function Names =====================
+
+export const FUNCTION_NAMES: Record<string, FunctionName> = {
+	CUT_OFF_MIN: 'cutOffMin',
+	CUT_OFF_MAX: 'cutOffMax',
+	CLAMP_MIN: 'clampMin',
+	CLAMP_MAX: 'clampMax',
+	ABSOLUTE: 'absolute',
+	RUNNING_DIFF: 'runningDiff',
+	LOG2: 'log2',
+	LOG10: 'log10',
+	CUM_SUM: 'cumSum',
+	EWMA3: 'ewma3',
+	EWMA5: 'ewma5',
+	EWMA7: 'ewma7',
+	MEDIAN3: 'median3',
+	MEDIAN5: 'median5',
+	MEDIAN7: 'median7',
+	TIME_SHIFT: 'timeShift',
+	ANOMALY: 'anomaly',
+} as const;
+
+// ===================== Common Step Intervals =====================
+
+export const STEP_INTERVALS = {
+	FIFTEEN_SECONDS: '15s',
+	THIRTY_SECONDS: '30s',
+	ONE_MINUTE: '60s',
+	FIVE_MINUTES: '300s',
+	TEN_MINUTES: '600s',
+	FIFTEEN_MINUTES: '900s',
+	THIRTY_MINUTES: '1800s',
+	ONE_HOUR: '3600s',
+	TWO_HOURS: '7200s',
+	SIX_HOURS: '21600s',
+	TWELVE_HOURS: '43200s',
+	ONE_DAY: '86400s',
+} as const;
+
+// ===================== Time Range Presets =====================
+
+export const TIME_RANGE_PRESETS = {
+	LAST_5_MINUTES: 5 * 60 * 1000,
+	LAST_15_MINUTES: 15 * 60 * 1000,
+	LAST_30_MINUTES: 30 * 60 * 1000,
+	LAST_HOUR: 60 * 60 * 1000,
+	LAST_3_HOURS: 3 * 60 * 60 * 1000,
+	LAST_6_HOURS: 6 * 60 * 60 * 1000,
+	LAST_12_HOURS: 12 * 60 * 60 * 1000,
+	LAST_24_HOURS: 24 * 60 * 60 * 1000,
+	LAST_3_DAYS: 3 * 24 * 60 * 60 * 1000,
+	LAST_7_DAYS: 7 * 24 * 60 * 60 * 1000,
+} as const;

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -0,0 +1,367 @@
+import { isEmpty } from 'lodash-es';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
+import {
+	DistributionData,
+	MetricRangePayloadV5,
+	QueryRangeRequestV5,
+	RawData,
+	ScalarData,
+	TimeSeriesData,
+} from 'types/api/v5/queryRange';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+function getColName(
+	col: ScalarData['columns'][number],
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): string {
+	const aggregation =
+		aggregationPerQuery?.[col.queryName]?.[col.aggregationIndex];
+	const legend = legendMap[col.queryName];
+	const aggregationName = aggregation?.alias || aggregation?.expression || '';
+
+	if (col.columnType === 'group') {
+		return col.name;
+	}
+
+	if (aggregationName && aggregationPerQuery[col.queryName].length > 1) {
+		if (legend) {
+			return `${aggregationName}-${legend}`;
+		}
+		return `${col.queryName}.${aggregationName}`;
+	}
+	return legend || col.queryName;
+}
+
+/**
+ * Converts V5 TimeSeriesData to legacy format
+ */
+function convertTimeSeriesData(
+	timeSeriesData: TimeSeriesData,
+	legendMap: Record<string, string>,
+): QueryDataV3 {
+	// Convert V5 time series format to legacy QueryDataV3 format
+
+	return {
+		queryName: timeSeriesData.queryName,
+		legend: legendMap[timeSeriesData.queryName] || timeSeriesData.queryName,
+		series: timeSeriesData?.aggregations?.flatMap((aggregation) => {
+			const { index, alias, series } = aggregation;
+
+			if (!series || !series.length) {
+				return [];
+			}
+
+			return series.map((series) => ({
+				labels: series.labels
+					? Object.fromEntries(
+							series.labels.map((label) => [label.key.name, label.value]),
+					  )
+					: {},
+				labelsArray: series.labels
+					? series.labels.map((label) => ({ [label.key.name]: label.value }))
+					: [],
+				values: series.values.map((value) => ({
+					timestamp: value.timestamp,
+					value: String(value.value),
+				})),
+				metaData: {
+					alias,
+					index,
+					queryName: timeSeriesData.queryName,
+				},
+			}));
+		}),
+		list: null,
+	};
+}
+
+/**
+ * Converts V5 ScalarData array to legacy format with table structure
+ */
+function convertScalarDataArrayToTable(
+	scalarDataArray: ScalarData[],
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): QueryDataV3[] {
+	// If no scalar data, return empty structure
+
+	if (!scalarDataArray || scalarDataArray.length === 0) {
+		return [];
+	}
+
+	// Process each scalar data separately to maintain query separation
+	return scalarDataArray?.map((scalarData) => {
+		// Get query name from the first column
+		const queryName = scalarData?.columns?.[0]?.queryName || '';
+
+		if ((scalarData as any)?.aggregations?.length > 0) {
+			return {
+				...convertTimeSeriesData(scalarData as any, legendMap),
+				table: {
+					columns: [],
+					rows: [],
+				},
+				list: null,
+			};
+		}
+
+		// Collect columns for this specific query
+		const columns = scalarData?.columns?.map((col) => ({
+			name: getColName(col, legendMap, aggregationPerQuery),
+			queryName: col.queryName,
+			isValueColumn: col.columnType === 'aggregation',
+		}));
+
+		// Process rows for this specific query
+		const rows = scalarData?.data?.map((dataRow) => {
+			const rowData: Record<string, any> = {};
+
+			scalarData?.columns?.forEach((col, colIndex) => {
+				const columnName = getColName(col, legendMap, aggregationPerQuery);
+				rowData[columnName] = dataRow[colIndex];
+			});
+
+			return { data: rowData };
+		});
+
+		return {
+			queryName,
+			legend: legendMap[queryName] || '',
+			series: null,
+			list: null,
+			table: {
+				columns,
+				rows,
+			},
+		};
+	});
+}
+
+function convertScalerWithFormatForWeb(
+	scalarDataArray: ScalarData[],
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): QueryDataV3[] {
+	if (!scalarDataArray || scalarDataArray.length === 0) {
+		return [];
+	}
+
+	return scalarDataArray.map((scalarData) => {
+		const columns =
+			scalarData.columns?.map((col) => {
+				const colName = getColName(col, legendMap, aggregationPerQuery);
+
+				return {
+					name: colName,
+					queryName: col.queryName,
+					isValueColumn: col.columnType === 'aggregation',
+				};
+			}) || [];
+
+		const rows =
+			scalarData.data?.map((dataRow) => {
+				const rowData: Record<string, any> = {};
+				columns?.forEach((col, colIndex) => {
+					rowData[col.name] = dataRow[colIndex];
+				});
+				return { data: rowData };
+			}) || [];
+
+		const queryName = scalarData.columns?.[0]?.queryName || '';
+
+		return {
+			queryName,
+			legend: legendMap[queryName] || queryName,
+			series: null,
+			list: null,
+			table: {
+				columns,
+				rows,
+			},
+		};
+	});
+}
+
+/**
+ * Converts V5 RawData to legacy format
+ */
+function convertRawData(
+	rawData: RawData,
+	legendMap: Record<string, string>,
+): QueryDataV3 {
+	// Convert V5 raw format to legacy QueryDataV3 format
+	return {
+		queryName: rawData.queryName,
+		legend: legendMap[rawData.queryName] || rawData.queryName,
+		series: null,
+		list: rawData.rows?.map((row) => ({
+			timestamp: row.timestamp,
+			data: {
+				// Map raw data to ILog structure - spread row.data first to include all properties
+				...row.data,
+				date: row.timestamp,
+			} as any,
+		})),
+	};
+}
+
+/**
+ * Converts V5 DistributionData to legacy format
+ */
+function convertDistributionData(
+	distributionData: DistributionData,
+	legendMap: Record<string, string>,
+): any {
+	// eslint-disable-line @typescript-eslint/no-explicit-any
+	// Convert V5 distribution format to legacy histogram format
+	return {
+		...distributionData,
+		legendMap,
+	};
+}
+
+/**
+ * Helper function to convert V5 data based on type
+ */
+function convertV5DataByType(
+	v5Data: any,
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): MetricRangePayloadV3['data'] {
+	switch (v5Data?.type) {
+		case 'time_series': {
+			const timeSeriesData = v5Data.data.results as TimeSeriesData[];
+			return {
+				resultType: 'time_series',
+				result: timeSeriesData.map((timeSeries) =>
+					convertTimeSeriesData(timeSeries, legendMap),
+				),
+			};
+		}
+		case 'scalar': {
+			const scalarData = v5Data.data.results as ScalarData[];
+			// For scalar data, combine all results into separate table entries
+			const combinedTables = convertScalarDataArrayToTable(
+				scalarData,
+				legendMap,
+				aggregationPerQuery,
+			);
+			return {
+				resultType: 'scalar',
+				result: combinedTables,
+			};
+		}
+		case 'raw': {
+			const rawData = v5Data.data.results as RawData[];
+			return {
+				resultType: 'raw',
+				result: rawData.map((raw) => convertRawData(raw, legendMap)),
+			};
+		}
+		case 'distribution': {
+			const distributionData = v5Data.data.results as DistributionData[];
+			return {
+				resultType: 'distribution',
+				result: distributionData.map((distribution) =>
+					convertDistributionData(distribution, legendMap),
+				),
+			};
+		}
+		default:
+			return {
+				resultType: '',
+				result: [],
+			};
+	}
+}
+
+/**
+ * Converts V5 API response to legacy format expected by frontend components
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function convertV5ResponseToLegacy(
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
+	legendMap: Record<string, string>,
+	formatForWeb?: boolean,
+): SuccessResponse<MetricRangePayloadV3> {
+	const { payload, params } = v5Response;
+	const v5Data = payload?.data;
+
+	const aggregationPerQuery =
+		(params as QueryRangeRequestV5)?.compositeQuery?.queries
+			?.filter((query) => query.type === 'builder_query')
+			.reduce((acc, query) => {
+				if (
+					query.type === 'builder_query' &&
+					'aggregations' in query.spec &&
+					query.spec.name
+				) {
+					acc[query.spec.name] = query.spec.aggregations;
+				}
+				return acc;
+			}, {} as Record<string, any>) || {};
+
+	// If formatForWeb is true, return as-is (like existing logic)
+	if (formatForWeb && v5Data?.type === 'scalar') {
+		const scalarData = v5Data.data.results as ScalarData[];
+		const webTables = convertScalerWithFormatForWeb(
+			scalarData,
+			legendMap,
+			aggregationPerQuery,
+		);
+		return {
+			...v5Response,
+			payload: {
+				data: {
+					resultType: 'scalar',
+					result: webTables,
+				},
+			},
+		};
+	}
+
+	// Convert based on V5 response type
+	const convertedData = convertV5DataByType(
+		v5Data,
+		legendMap,
+		aggregationPerQuery,
+	);
+
+	// Create legacy-compatible response structure
+	const legacyResponse: SuccessResponse<MetricRangePayloadV3> = {
+		...v5Response,
+		payload: {
+			data: convertedData,
+		},
+	};
+
+	// Apply legend mapping (similar to existing logic)
+	if (legacyResponse.payload?.data?.result) {
+		legacyResponse.payload.data.result = legacyResponse.payload.data.result.map(
+			(queryData: any) => {
+				// eslint-disable-line @typescript-eslint/no-explicit-any
+				const newQueryData = queryData;
+				newQueryData.legend = legendMap[queryData.queryName];
+
+				// If metric names is an empty object
+				if (isEmpty(queryData.metric)) {
+					// If metrics list is empty && the user haven't defined a legend then add the legend equal to the name of the query.
+					if (newQueryData.legend === undefined || newQueryData.legend === null) {
+						newQueryData.legend = queryData.queryName;
+					}
+					// If name of the query and the legend if inserted is same then add the same to the metrics object.
+					if (queryData.queryName === newQueryData.legend) {
+						newQueryData.metric = newQueryData.metric || {};
+						newQueryData.metric[queryData.queryName] = queryData.queryName;
+					}
+				}
+
+				return newQueryData;
+			},
+		);
+	}
+
+	return legacyResponse;
+}

frontend/src/api/v5/queryRange/getQueryRange.ts

@@ -0,0 +1,45 @@
+import { ApiV5Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	MetricRangePayloadV5,
+	QueryRangePayloadV5,
+} from 'types/api/v5/queryRange';
+
+export const getQueryRangeV5 = async (
+	props: QueryRangePayloadV5,
+	version: string,
+	signal: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
+	try {
+		if (version && version === ENTITY_VERSION_V5) {
+			const response = await ApiV5Instance.post('/query_range', props, {
+				signal,
+				headers,
+			});
+
+			return {
+				httpStatusCode: response.status,
+				data: response.data,
+			};
+		}
+
+		// Default V5 behavior
+		const response = await ApiV5Instance.post('/query_range', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getQueryRangeV5;

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -0,0 +1,408 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
+import { isEmpty } from 'lodash-es';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	BaseBuilderQuery,
+	FieldContext,
+	FieldDataType,
+	FunctionName,
+	GroupByKey,
+	LogAggregation,
+	MetricAggregation,
+	OrderBy,
+	QueryEnvelope,
+	QueryFunction,
+	QueryRangePayloadV5,
+	QueryType,
+	RequestType,
+	TelemetryFieldKey,
+	TraceAggregation,
+	VariableItem,
+} from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+type PrepareQueryRangePayloadV5Result = {
+	queryPayload: QueryRangePayloadV5;
+	legendMap: Record<string, string>;
+};
+
+/**
+ * Maps panel types to V5 request types
+ */
+function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
+	switch (panelType) {
+		case PANEL_TYPES.TIME_SERIES:
+		case PANEL_TYPES.BAR:
+			return 'time_series';
+		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.PIE:
+		case PANEL_TYPES.VALUE:
+		case PANEL_TYPES.TRACE:
+			return 'scalar';
+		case PANEL_TYPES.LIST:
+			return 'raw';
+		case PANEL_TYPES.HISTOGRAM:
+			return 'distribution';
+		default:
+			return '';
+	}
+}
+
+/**
+ * Gets signal type from data source
+ */
+function getSignalType(dataSource: string): 'traces' | 'logs' | 'metrics' {
+	if (dataSource === 'traces') return 'traces';
+	if (dataSource === 'logs') return 'logs';
+	return 'metrics';
+}
+
+/**
+ * Creates base spec for builder queries
+ */
+function createBaseSpec(
+	queryData: IBuilderQuery,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): BaseBuilderQuery {
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+
+	return {
+		stepInterval: queryData?.stepInterval || undefined,
+		disabled: queryData.disabled,
+		filter: queryData?.filter?.expression ? queryData.filter : undefined,
+		groupBy:
+			queryData.groupBy?.length > 0
+				? queryData.groupBy.map(
+						(item: any): GroupByKey => ({
+							name: item.key,
+							fieldDataType: item?.dataType,
+							fieldContext: item?.type,
+							description: item?.description,
+							unit: item?.unit,
+							signal: item?.signal,
+							materialized: item?.materialized,
+						}),
+				  )
+				: undefined,
+		limit:
+			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
+				? queryData.limit || queryData.pageSize || undefined
+				: queryData.limit || undefined,
+		offset: requestType === 'raw' ? queryData.offset : undefined,
+		order:
+			queryData.orderBy.length > 0
+				? queryData.orderBy.map(
+						(order: any): OrderBy => ({
+							key: {
+								name: order.columnName,
+							},
+							direction: order.order,
+						}),
+				  )
+				: undefined,
+		// legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
+		having: isEmpty(queryData.havingExpression)
+			? undefined
+			: queryData?.havingExpression,
+		functions: isEmpty(queryData.functions)
+			? undefined
+			: queryData.functions.map(
+					(func: QueryFunctionProps): QueryFunction => ({
+						name: func.name as FunctionName,
+						args: func.args.map((arg) => ({
+							// name: arg.name,
+							value: arg,
+						})),
+					}),
+			  ),
+		selectFields: isEmpty(nonEmptySelectColumns)
+			? undefined
+			: nonEmptySelectColumns?.map(
+					(column: any): TelemetryFieldKey => ({
+						name: column.name ?? column.key,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
+						signal: column?.signal ?? undefined,
+					}),
+			  ),
+	};
+}
+// Utility to parse aggregation expressions with optional alias
+export function parseAggregations(
+	expression: string,
+): { expression: string; alias?: string }[] {
+	const result: { expression: string; alias?: string }[] = [];
+	const regex = /([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+([a-zA-Z0-9_]+))?/g;
+	let match = regex.exec(expression);
+	while (match !== null) {
+		const expr = match[1];
+		const alias = match[2];
+		if (alias) {
+			result.push({ expression: expr, alias });
+		} else {
+			result.push({ expression: expr });
+		}
+		match = regex.exec(expression);
+	}
+	return result;
+}
+
+export function createAggregation(
+	queryData: any,
+): TraceAggregation[] | LogAggregation[] | MetricAggregation[] {
+	if (!queryData) {
+		return [];
+	}
+	if (queryData.dataSource === DataSource.METRICS) {
+		return [
+			{
+				metricName: queryData?.aggregateAttribute?.key,
+				temporality: queryData?.aggregateAttribute?.temporality,
+				timeAggregation: queryData?.timeAggregation,
+				spaceAggregation: queryData?.spaceAggregation,
+			},
+		];
+	}
+
+	if (queryData.aggregations?.length > 0) {
+		return isEmpty(parseAggregations(queryData.aggregations?.[0].expression))
+			? [{ expression: 'count()' }]
+			: parseAggregations(queryData.aggregations?.[0].expression);
+	}
+
+	return [{ expression: 'count()' }];
+}
+
+/**
+ * Converts query builder data to V5 builder queries
+ */
+function convertBuilderQueriesToV5(
+	builderQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): QueryEnvelope[] {
+	return Object.entries(builderQueries).map(
+		([queryName, queryData]): QueryEnvelope => {
+			const signal = getSignalType(queryData.dataSource);
+			const baseSpec = createBaseSpec(queryData, requestType, panelType);
+			let spec: QueryEnvelope['spec'];
+
+			const aggregations = createAggregation(queryData);
+
+			switch (signal) {
+				case 'traces':
+					spec = {
+						name: queryName,
+						signal: 'traces' as const,
+						...baseSpec,
+						aggregations: aggregations as TraceAggregation[],
+					};
+					break;
+				case 'logs':
+					spec = {
+						name: queryName,
+						signal: 'logs' as const,
+						...baseSpec,
+						aggregations: aggregations as LogAggregation[],
+					};
+					break;
+				case 'metrics':
+				default:
+					spec = {
+						name: queryName,
+						signal: 'metrics' as const,
+						...baseSpec,
+						aggregations: aggregations as MetricAggregation[],
+						// reduceTo: queryData.reduceTo,
+					};
+					break;
+			}
+
+			return {
+				type: 'builder_query' as QueryType,
+				spec,
+			};
+		},
+	);
+}
+
+/**
+ * Converts PromQL queries to V5 format
+ */
+function convertPromQueriesToV5(
+	promQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): QueryEnvelope[] {
+	return Object.entries(promQueries).map(
+		([queryName, queryData]): QueryEnvelope => ({
+			type: 'promql' as QueryType,
+			spec: {
+				name: queryName,
+				query: queryData.query,
+				disabled: queryData.disabled || false,
+				step: queryData?.stepInterval,
+				stats: false, // PromQL specific field
+			},
+		}),
+	);
+}
+
+/**
+ * Converts ClickHouse queries to V5 format
+ */
+function convertClickHouseQueriesToV5(
+	chQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): QueryEnvelope[] {
+	return Object.entries(chQueries).map(
+		([queryName, queryData]): QueryEnvelope => ({
+			type: 'clickhouse_sql' as QueryType,
+			spec: {
+				name: queryName,
+				query: queryData.query,
+				disabled: queryData.disabled || false,
+				// ClickHouse doesn't have step or stats like PromQL
+			},
+		}),
+	);
+}
+
+/**
+ * Converts query formulas to V5 format
+ */
+function convertFormulasToV5(
+	formulas: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): QueryEnvelope[] {
+	return Object.entries(formulas).map(
+		([queryName, formulaData]): QueryEnvelope => ({
+			type: 'builder_formula' as QueryType,
+			spec: {
+				name: queryName,
+				expression: formulaData.expression || '',
+				functions: formulaData.functions,
+			},
+		}),
+	);
+}
+
+/**
+ * Helper function to reduce query arrays to objects
+ */
+function reduceQueriesToObject(
+	queryArray: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
+): { queries: Record<string, any>; legends: Record<string, string> } {
+	// eslint-disable-line @typescript-eslint/no-explicit-any
+	const legends: Record<string, string> = {};
+	const queries = queryArray.reduce((acc, queryItem) => {
+		if (!queryItem.query) return acc;
+		acc[queryItem.name] = queryItem;
+		legends[queryItem.name] = queryItem.legend;
+		return acc;
+	}, {} as Record<string, any>); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+	return { queries, legends };
+}
+
+/**
+ * Prepares V5 query range payload from GetQueryResultsProps
+ */
+export const prepareQueryRangePayloadV5 = ({
+	query,
+	globalSelectedInterval,
+	graphType,
+	selectedTime,
+	tableParams,
+	variables = {},
+	start: startTime,
+	end: endTime,
+	formatForWeb,
+	originalGraphType,
+}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
+	let legendMap: Record<string, string> = {};
+	const requestType = mapPanelTypeToRequestType(graphType);
+	let queries: QueryEnvelope[] = [];
+
+	switch (query.queryType) {
+		case EQueryType.QUERY_BUILDER: {
+			const { queryData: data, queryFormulas } = query.builder;
+			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
+			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
+
+			// Combine legend maps
+			legendMap = {
+				...currentQueryData.newLegendMap,
+				...currentFormulas.newLegendMap,
+			};
+
+			// Convert builder queries
+			const builderQueries = convertBuilderQueriesToV5(
+				currentQueryData.data,
+				requestType,
+				graphType,
+			);
+
+			// Convert formulas as separate query type
+			const formulaQueries = convertFormulasToV5(currentFormulas.data);
+
+			// Combine both types
+			queries = [...builderQueries, ...formulaQueries];
+			break;
+		}
+		case EQueryType.PROM: {
+			const promQueries = reduceQueriesToObject(query[query.queryType]);
+			queries = convertPromQueriesToV5(promQueries.queries);
+			legendMap = promQueries.legends;
+			break;
+		}
+		case EQueryType.CLICKHOUSE: {
+			const chQueries = reduceQueriesToObject(query[query.queryType]);
+			queries = convertClickHouseQueriesToV5(chQueries.queries);
+			legendMap = chQueries.legends;
+			break;
+		}
+		default:
+			break;
+	}
+
+	// Calculate time range
+	const { start, end } = getStartEndRangeTime({
+		type: selectedTime,
+		interval: globalSelectedInterval,
+	});
+
+	// Create V5 payload
+	const queryPayload: QueryRangePayloadV5 = {
+		schemaVersion: 'v1',
+		start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3,
+		end: endTime ? endTime * 1e3 : parseInt(end, 10) * 1e3,
+		requestType,
+		compositeQuery: {
+			queries,
+		},
+		formatOptions: {
+			formatTableResultForUI:
+				!!formatForWeb ||
+				(originalGraphType
+					? originalGraphType === PANEL_TYPES.TABLE
+					: graphType === PANEL_TYPES.TABLE),
+		},
+		variables: Object.entries(variables).reduce((acc, [key, value]) => {
+			acc[key] = { value };
+			return acc;
+		}, {} as Record<string, VariableItem>),
+	};
+
+	return { legendMap, queryPayload };
+};

frontend/src/api/v5/v5.ts

@@ -0,0 +1,8 @@
+// V5 API exports
+export * from './queryRange/constants';
+export { convertV5ResponseToLegacy } from './queryRange/convertV5Response';
+export { getQueryRangeV5 } from './queryRange/getQueryRange';
+export { prepareQueryRangePayloadV5 } from './queryRange/prepareQueryRangePayloadV5';
+
+// Export types from proper location
+export * from 'types/api/v5/queryRange';

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -1,152 +0,0 @@
-.app-loading-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100vh;
-	background-color: var(--bg-ink-400, #121317); // Dark theme background
-
-	.app-loading-content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-
-		.brand {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 12px;
-
-			margin-bottom: 12px;
-
-			.brand-logo {
-				width: 40px;
-				height: 40px;
-			}
-
-			.brand-title {
-				font-size: 20px;
-				font-weight: 600;
-				color: var(--bg-vanilla-100, #ffffff); // White text for dark theme
-				margin: 0;
-			}
-		}
-
-		.brand-tagline {
-			margin-bottom: 24px;
-
-			.ant-typography {
-				color: var(--bg-vanilla-400, #c0c1c3); // Light gray text for dark theme
-			}
-		}
-
-		/* HTML: <div class="loader"></div> */
-		.loader {
-			width: 150px;
-			height: 12px;
-			border-radius: 2px;
-			color: var(--bg-robin-500, #4e74f8); // Primary blue color
-			border: 2px solid;
-			position: relative;
-		}
-		.loader::before {
-			content: '';
-			position: absolute;
-			margin: 2px;
-			inset: 0 100% 0 0;
-			border-radius: inherit;
-			background: currentColor;
-			animation: l6 2s infinite;
-		}
-		@keyframes l6 {
-			100% {
-				inset: 0;
-			}
-		}
-	}
-}
-
-// Light theme styles - more specific selector
-.app-loading-container.lightMode {
-	background-color: var(
-		--bg-vanilla-100,
-		#ffffff
-	) !important; // White background for light theme
-
-	.app-loading-content {
-		.brand {
-			.brand-title {
-				color: var(--bg-ink-400, #121317) !important; // Dark text for light theme
-			}
-		}
-
-		.brand-tagline {
-			.ant-typography {
-				color: var(
-					--bg-ink-300,
-					#6b7280
-				) !important; // Dark gray text for light theme
-			}
-		}
-
-		.loader {
-			color: var(
-				--bg-robin-500,
-				#4e74f8
-			) !important; // Keep primary blue color for consistency
-		}
-	}
-}
-
-.perilin-bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-
-	background: radial-gradient(circle, #fff 10%, transparent 0);
-	background-size: 12px 12px;
-	opacity: 1;
-
-	mask-image: radial-gradient(
-		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
-	);
-	-webkit-mask-image: radial-gradient(
-		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
-	);
-}
-
-// Dark theme styles - ensure dark theme is properly applied
-.app-loading-container.dark {
-	background-color: var(--bg-ink-400, #121317) !important; // Dark background
-
-	.app-loading-content {
-		.brand {
-			.brand-title {
-				color: var(
-					--bg-vanilla-100,
-					#ffffff
-				) !important; // White text for dark theme
-			}
-		}
-
-		.brand-tagline {
-			.ant-typography {
-				color: var(
-					--bg-vanilla-400,
-					#c0c1c3
-				) !important; // Light gray text for dark theme
-			}
-		}
-
-		.loader {
-			color: var(--bg-robin-500, #4e74f8) !important; // Primary blue color
-		}
-	}
-}

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,50 +0,0 @@
-import './AppLoading.styles.scss';
-
-import { Typography } from 'antd';
-import get from 'api/browser/localstorage/get';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { THEME_MODE } from 'hooks/useDarkMode/constant';
-
-function AppLoading(): JSX.Element {
-	// Get theme from localStorage directly to avoid context dependency
-	const getThemeFromStorage = (): boolean => {
-		try {
-			const theme = get(LOCALSTORAGE.THEME);
-			return theme !== THEME_MODE.LIGHT; // Return true for dark, false for light
-		} catch (error) {
-			// If localStorage is not available, default to dark theme
-			return true;
-		}
-	};
-
-	const isDarkMode = getThemeFromStorage();
-
-	return (
-		<div className={`app-loading-container ${isDarkMode ? 'dark' : 'lightMode'}`}>
-			<div className="perilin-bg" />
-			<div className="app-loading-content">
-				<div className="brand">
-					<img
-						src="/Logos/signoz-brand-logo.svg"
-						alt="SigNoz"
-						className="brand-logo"
-					/>
-
-					<Typography.Title level={2} className="brand-title">
-						SigNoz
-					</Typography.Title>
-				</div>
-
-				<div className="brand-tagline">
-					<Typography.Text>
-						OpenTelemetry-Native Logs, Metrics and Traces in a single pane
-					</Typography.Text>
-				</div>
-
-				<div className="loader" />
-			</div>
-		</div>
-	);
-}
-
-export default AppLoading;

frontend/src/components/AppLoading/__tests__/AppLoading.test.tsx

@@ -1,76 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import AppLoading from '../AppLoading';
-
-// Mock the localStorage API
-const mockGet = jest.fn();
-jest.mock('api/browser/localstorage/get', () => ({
-	__esModule: true,
-	default: mockGet,
-}));
-
-describe('AppLoading', () => {
-	const SIGNOZ_TEXT = 'SigNoz';
-	const TAGLINE_TEXT =
-		'OpenTelemetry-Native Logs, Metrics and Traces in a single pane';
-	const CONTAINER_SELECTOR = '.app-loading-container';
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should render loading screen with dark theme by default', () => {
-		// Mock localStorage to return dark theme (or undefined for default)
-		mockGet.mockReturnValue(undefined);
-
-		render(<AppLoading />);
-
-		// Check if main elements are rendered
-		expect(screen.getByAltText(SIGNOZ_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(SIGNOZ_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(TAGLINE_TEXT)).toBeInTheDocument();
-
-		// Check if dark theme class is applied
-		const container = screen.getByText(SIGNOZ_TEXT).closest(CONTAINER_SELECTOR);
-		expect(container).toHaveClass('dark');
-		expect(container).not.toHaveClass('lightMode');
-	});
-
-	it('should have proper structure and content', () => {
-		// Mock localStorage to return dark theme
-		mockGet.mockReturnValue(undefined);
-
-		render(<AppLoading />);
-
-		// Check for brand logo
-		const logo = screen.getByAltText(SIGNOZ_TEXT);
-		expect(logo).toBeInTheDocument();
-		expect(logo).toHaveAttribute('src', '/Logos/signoz-brand-logo.svg');
-
-		// Check for brand title
-		const title = screen.getByText(SIGNOZ_TEXT);
-		expect(title).toBeInTheDocument();
-
-		// Check for tagline
-		const tagline = screen.getByText(TAGLINE_TEXT);
-		expect(tagline).toBeInTheDocument();
-
-		// Check for loader
-		const loader = document.querySelector('.loader');
-		expect(loader).toBeInTheDocument();
-	});
-
-	it('should handle localStorage errors gracefully', () => {
-		// Mock localStorage to throw an error
-		mockGet.mockImplementation(() => {
-			throw new Error('localStorage not available');
-		});
-
-		render(<AppLoading />);
-
-		// Should still render with dark theme as fallback
-		expect(screen.getByText(SIGNOZ_TEXT)).toBeInTheDocument();
-		const container = screen.getByText(SIGNOZ_TEXT).closest(CONTAINER_SELECTOR);
-		expect(container).toHaveClass('dark');
-	});
-});

frontend/src/components/ChangelogModal/ChangelogModal.styles.scss

@@ -60,7 +60,6 @@
 
 		&-ctas {
 			display: flex;
-			margin-left: auto;
 
 			& svg {
 				font-size: 14px;
@@ -111,7 +110,7 @@
 	&-content {
 		max-height: calc(100vh - 300px);
 		overflow-y: auto;
-		padding: 16px 16px 18px 16px;
+		padding: 16px;
 		border: 1px solid var(--bg-slate-500, #161922);
 		border-top-width: 0;
 		border-bottom-width: 0;

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -2,62 +2,27 @@ import './ChangelogModal.styles.scss';
 
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { Button, Modal } from 'antd';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
-import { USER_PREFERENCES } from 'constants/userPreferences';
 import dayjs from 'dayjs';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
-import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
-import { UserPreference } from 'types/api/preferences/preference';
 
 import ChangelogRenderer from './components/ChangelogRenderer';
 
 interface Props {
-	changelog: ChangelogSchema;
 	onClose: () => void;
 }
 
-function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
+function ChangelogModal({ onClose }: Props): JSX.Element {
 	const [hasScroll, setHasScroll] = useState(false);
 	const changelogContentSectionRef = useRef<HTMLDivElement>(null);
-	const { userPreferences, updateUserPreferenceInContext } = useAppContext();
+	const { changelog } = useAppContext();
 
 	const formattedReleaseDate = dayjs(changelog?.release_date).format(
 		'MMMM D, YYYY',
 	);
 
-	const { isCloudUser } = useGetTenantLicense();
-
-	const seenChangelogVersion = userPreferences?.find(
-		(preference) =>
-			preference.name === USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
-	)?.value as string;
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-	);
-
-	useEffect(() => {
-		// Update the seen version
-		if (seenChangelogVersion !== changelog.version) {
-			const version = {
-				name: USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
-				value: changelog.version,
-			};
-			updateUserPreferenceInContext(version as UserPreference);
-			updateUserPreferenceMutation(version);
-		}
-	}, [
-		seenChangelogVersion,
-		changelog.version,
-		updateUserPreferenceMutation,
-		updateUserPreferenceInContext,
-	]);
-
 	const checkScroll = useCallback((): void => {
 		if (changelogContentSectionRef.current) {
 			const {
@@ -124,20 +89,18 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 							{changelog.features.length > 1 ? 'features' : 'feature'}
 						</span>
 					)}
-					{!isCloudUser && (
-						<div className="changelog-modal-footer-ctas">
-							<Button type="default" icon={<CloseOutlined />} onClick={onClose}>
-								Skip for now
-							</Button>
-							<Button
-								type="primary"
-								icon={<CheckOutlined />}
-								onClick={onClickUpdateWorkspace}
-							>
-								Update my workspace
-							</Button>
-						</div>
-					)}
+					<div className="changelog-modal-footer-ctas">
+						<Button type="default" icon={<CloseOutlined />} onClick={onClose}>
+							Skip for now
+						</Button>
+						<Button
+							type="primary"
+							icon={<CheckOutlined />}
+							onClick={onClickUpdateWorkspace}
+						>
+							Update my workspace
+						</Button>
+					</div>
 					{changelog && (
 						<div className="scroll-btn-container">
 							<button

frontend/src/components/ChangelogModal/__test__/ChangelogModal.test.tsx

@@ -3,22 +3,10 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import { fireEvent, render, screen } from '@testing-library/react';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-import {
-	ChangelogSchema,
-	DeploymentType,
-} from 'types/api/changelog/getChangelogByVersion';
 
 import ChangelogModal from '../ChangelogModal';
 
-const mockChangelog: ChangelogSchema = {
-	id: 1,
-	documentId: 'doc-1',
-	version: 'v1.0.0',
-	createdAt: '2025-06-09T12:00:00Z',
-	updatedAt: '2025-06-09T13:00:00Z',
-	publishedAt: '2025-06-09T14:00:00Z',
+const mockChangelog = {
 	release_date: '2025-06-10',
 	features: [
 		{
@@ -26,12 +14,6 @@ const mockChangelog: ChangelogSchema = {
 			title: 'Feature 1',
 			description: 'Description for feature 1',
 			media: null,
-			documentId: 'feature-1',
-			sort_order: 1,
-			createdAt: '2025-06-09T12:00:00Z',
-			updatedAt: '2025-06-09T13:00:00Z',
-			publishedAt: '2025-06-09T14:00:00Z',
-			deployment_type: DeploymentType.ALL,
 		},
 	],
 	bug_fixes: 'Bug fix details',
@@ -46,30 +28,15 @@ jest.mock(
 			return <div>{children}</div>;
 		},
 );
+
 // mock useAppContext
 jest.mock('providers/App/App', () => ({
-	useAppContext: jest.fn(() => ({
-		updateUserPreferenceInContext: jest.fn(),
-		userPreferences: [
-			{
-				name: USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
-				value: 'v1.0.0',
-			},
-		],
-	})),
+	useAppContext: jest.fn(() => ({ changelog: mockChangelog })),
 }));
 
-function renderChangelog(onClose: () => void = jest.fn()): void {
-	render(
-		<MockQueryClientProvider>
-			<ChangelogModal changelog={mockChangelog} onClose={onClose} />
-		</MockQueryClientProvider>,
-	);
-}
-
 describe('ChangelogModal', () => {
 	it('renders modal with changelog data', () => {
-		renderChangelog();
+		render(<ChangelogModal onClose={jest.fn()} />);
 		expect(
 			screen.getByText('What’s New ⎯ Changelog : June 10, 2025'),
 		).toBeInTheDocument();
@@ -81,14 +48,14 @@ describe('ChangelogModal', () => {
 
 	it('calls onClose when Skip for now is clicked', () => {
 		const onClose = jest.fn();
-		renderChangelog(onClose);
+		render(<ChangelogModal onClose={onClose} />);
 		fireEvent.click(screen.getByText('Skip for now'));
 		expect(onClose).toHaveBeenCalled();
 	});
 
 	it('opens migration docs when Update my workspace is clicked', () => {
 		window.open = jest.fn();
-		renderChangelog();
+		render(<ChangelogModal onClose={jest.fn()} />);
 		fireEvent.click(screen.getByText('Update my workspace'));
 		expect(window.open).toHaveBeenCalledWith(
 			'https://github.com/SigNoz/signoz/releases',
@@ -98,7 +65,7 @@ describe('ChangelogModal', () => {
 	});
 
 	it('scrolls for more when Scroll for more is clicked', () => {
-		renderChangelog();
+		render(<ChangelogModal onClose={jest.fn()} />);
 		const scrollBtn = screen.getByTestId('scroll-more-btn');
 		const contentDiv = screen.getByTestId('changelog-content');
 		if (contentDiv) {

frontend/src/components/ChangelogModal/__test__/ChangelogRenderer.test.tsx

@@ -3,10 +3,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import { render, screen } from '@testing-library/react';
-import {
-	ChangelogSchema,
-	DeploymentType,
-} from 'types/api/changelog/getChangelogByVersion';
 
 import ChangelogRenderer from '../components/ChangelogRenderer';
 
@@ -19,19 +15,23 @@ jest.mock(
 		},
 );
 
-const mockChangelog: ChangelogSchema = {
+const mockChangelog = {
 	id: 1,
-	documentId: 'doc-1',
-	version: 'v1.0.0',
+	documentId: 'changelog-doc-1',
+	version: '1.0.0',
 	createdAt: '2025-06-09T12:00:00Z',
-	updatedAt: '2025-06-09T13:00:00Z',
-	publishedAt: '2025-06-09T14:00:00Z',
 	release_date: '2025-06-10',
 	features: [
 		{
 			id: 1,
+			documentId: '1',
 			title: 'Feature 1',
 			description: 'Description for feature 1',
+			sort_order: 1,
+			createdAt: '',
+			updatedAt: '',
+			publishedAt: '',
+			deployment_type: 'All',
 			media: {
 				id: 1,
 				documentId: 'doc1',
@@ -40,15 +40,11 @@ const mockChangelog: ChangelogSchema = {
 				mime: 'image/webp',
 				alternativeText: null,
 			},
-			documentId: 'feature-1',
-			sort_order: 1,
-			createdAt: '2025-06-09T12:00:00Z',
-			updatedAt: '2025-06-09T13:00:00Z',
-			publishedAt: '2025-06-09T14:00:00Z',
-			deployment_type: DeploymentType.ALL,
 		},
 	],
 	bug_fixes: 'Bug fix details',
+	updatedAt: '2025-06-09T12:00:00Z',
+	publishedAt: '2025-06-09T12:00:00Z',
 	maintenance: 'Maintenance details',
 };
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -370,7 +370,6 @@ function CustomTimePicker({
 					onFocus={handleFocus}
 					onBlur={handleBlur}
 					onChange={handleInputChange}
-					data-1p-ignore
 					prefix={
 						inputValue && inputStatus === 'success' ? (
 							<CheckCircle size={14} color="#51E7A8" />

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -84,7 +84,6 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 					date.tz(timezone.value).format(DATE_TIME_FORMATS.ISO_DATETIME)
 				}
 				onOk={onModalOkHandler}
-				data-1p-ignore
 				{...(selectedTime === 'custom' &&
 					!onTimeChange && {
 						value: rangeValue,

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -72,7 +72,6 @@ function SearchBar({
 					onKeyDown={handleKeyDown}
 					tabIndex={0}
 					autoFocus
-					data-1p-ignore
 				/>
 			</div>
 			<kbd className="timezone-picker__esc-key">esc</kbd>

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -18,7 +18,7 @@ function ErrorContent({ error }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} = error.error.error;
+	} = error?.error?.error || {};
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -169,6 +169,7 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
+
 	.ant-drawer-close {
 		padding: 0px;
 	}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -13,6 +13,7 @@ import {
 	CustomTimeType,
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
@@ -86,6 +87,7 @@ function Metrics({
 	const isDarkMode = useIsDarkMode();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
+	const { currentQuery } = useQueryBuilder();
 
 	const chartData = useMemo(
 		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
@@ -144,9 +146,17 @@ function Metrics({
 					minTimeScale: graphTimeIntervals[idx].start,
 					maxTimeScale: graphTimeIntervals[idx].end,
 					onDragSelect: (start, end) => onDragSelect(start, end, idx),
+					query: currentQuery,
 				}),
 			),
-		[queries, isDarkMode, dimensions, graphTimeIntervals, onDragSelect],
+		[
+			queries,
+			isDarkMode,
+			dimensions,
+			graphTimeIntervals,
+			onDragSelect,
+			currentQuery,
+		],
 	);
 
 	const renderCardContent = (

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -0,0 +1,101 @@
+.input-with-label {
+	display: flex;
+	flex-direction: row;
+
+	border-radius: 2px 0px 0px 2px;
+
+	.label {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: 0.56px;
+
+		max-width: 150px;
+		min-width: 120px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		padding: 0px 8px;
+
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		font-weight: var(--font-weight-light);
+	}
+
+	.input {
+		flex: 1;
+		min-width: 150px;
+		font-family: 'Space Mono', monospace !important;
+
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+
+		border-right: none;
+		border-left: none;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
+	}
+
+	.close-btn {
+		border-radius: 0px 2px 2px 0px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		height: 38px;
+		width: 38px;
+	}
+
+	&.labelAfter {
+		.input {
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
+
+		.label {
+			border-left: none;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+	}
+}
+
+.lightMode {
+	.input-with-label {
+		.label {
+			color: var(--bg-ink-500) !important;
+
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.close-btn {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		&.labelAfter {
+			.input {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -0,0 +1,71 @@
+import './InputWithLabel.styles.scss';
+
+import { Button, Input, Typography } from 'antd';
+import cx from 'classnames';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+function InputWithLabel({
+	label,
+	initialValue,
+	placeholder,
+	type,
+	onClose,
+	labelAfter,
+	onChange,
+	className,
+}: {
+	label: string;
+	initialValue?: string | number;
+	placeholder: string;
+	type?: string;
+	onClose?: () => void;
+	labelAfter?: boolean;
+	onChange: (value: string) => void;
+	className?: string;
+}): JSX.Element {
+	const [inputValue, setInputValue] = useState<string>(
+		initialValue ? initialValue.toString() : '',
+	);
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		setInputValue(e.target.value);
+		onChange?.(e.target.value);
+	};
+
+	return (
+		<div
+			className={cx('input-with-label', className, {
+				labelAfter,
+			})}
+		>
+			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
+			<Input
+				className="input"
+				placeholder={placeholder}
+				type={type}
+				value={inputValue}
+				onChange={handleChange}
+				name={label.toLowerCase()}
+			/>
+			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
+			{onClose && (
+				<Button
+					className="periscope-btn ghost close-btn"
+					icon={<X size={16} />}
+					onClick={onClose}
+				/>
+			)}
+		</div>
+	);
+}
+
+InputWithLabel.defaultProps = {
+	type: 'text',
+	onClose: undefined,
+	labelAfter: false,
+	initialValue: undefined,
+	className: undefined,
+};
+
+export default InputWithLabel;

frontend/src/components/LogDetail/index.tsx

@@ -9,7 +9,6 @@ import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
@@ -27,7 +26,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
+import useUrlQuery from 'hooks/useUrlQuery';
 import {
 	BarChart2,
 	Braces,
@@ -72,7 +71,7 @@ function LogDetail({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>();
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
-	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
+	const { stagedQuery } = useQueryBuilder();
 
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
@@ -89,6 +88,7 @@ function LogDetail({
 	const isDarkMode = useIsDarkMode();
 	const location = useLocation();
 	const { safeNavigate } = useSafeNavigate();
+	const urlQuery = useUrlQuery();
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -136,19 +136,10 @@ function LogDetail({
 
 	// Go to logs explorer page with the log data
 	const handleOpenInExplorer = (): void => {
-		const queryParams = {
-			[QueryParams.activeLogId]: `"${log?.id}"`,
-			[QueryParams.startTime]: minTime?.toString() || '',
-			[QueryParams.endTime]: maxTime?.toString() || '',
-			[QueryParams.compositeQuery]: JSON.stringify(
-				updateAllQueriesOperators(
-					initialQueriesMap[DataSource.LOGS],
-					PANEL_TYPES.LIST,
-					DataSource.LOGS,
-				),
-			),
-		};
-		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
+		urlQuery.set(QueryParams.activeLogId, `"${log?.id}"`);
+		urlQuery.set(QueryParams.startTime, minTime?.toString() || '');
+		urlQuery.set(QueryParams.endTime, maxTime?.toString() || '');
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 	};
 
 	// Only show when opened from infra monitoring page

frontend/src/components/Logs/TableView/config.ts

@@ -15,7 +15,6 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		letterSpacing: '-0.07px',
 		marginBottom: '0px',
 		minWidth: '10rem',
-		width: '10rem',
 	};
 }
 

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -47,14 +47,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const bodyColumnStyle = useMemo(
-		() => ({
-			...defaultTableStyle,
-			...(fields.length > 2 ? { width: '50rem' } : {}),
-		}),
-		[fields.length],
-	);
-
 	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
 		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
 			.filter((e) => !['id', 'body', 'timestamp'].includes(e.name))
@@ -144,7 +136,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								field: string | number,
 							): ColumnTypeRender<Record<string, unknown>> => ({
 								props: {
-									style: bodyColumnStyle,
+									style: defaultTableStyle,
 								},
 								children: (
 									<TableBodyContent
@@ -174,7 +166,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		linesPerRow,
 		fontSize,
 		formatTimezoneAdjustedTimestamp,
-		bodyColumnStyle,
 	]);
 
 	return { columns, dataSource: flattenLogData };

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -410,18 +410,18 @@ export default function LogsFormatOptionsMenu({
 									)}
 
 									<div className="column-format">
-										{addColumn?.value?.map(({ key, id }) => (
-											<div className="column-name" key={id}>
+										{addColumn?.value?.map(({ name }) => (
+											<div className="column-name" key={name}>
 												<div className="name">
-													<Tooltip placement="left" title={key}>
-														{key}
+													<Tooltip placement="left" title={name}>
+														{name}
 													</Tooltip>
 												</div>
 												{addColumn?.value?.length > 1 && (
 													<X
 														className="delete-btn"
 														size={14}
-														onClick={(): void => addColumn.onRemove(id as string)}
+														onClick={(): void => addColumn.onRemove(name)}
 													/>
 												)}
 											</div>

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -0,0 +1,553 @@
+.query-builder-v2 {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+
+	width: 100%;
+
+	border-bottom: 1px solid var(--bg-slate-400);
+	border-top: 1px solid var(--bg-slate-400);
+
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', sans-serif;
+
+	border-right: none;
+	border-left: none;
+
+	.qb-content-container {
+		display: flex;
+		flex-direction: column;
+		width: calc(100% - 44px);
+
+		flex: 1;
+
+		position: relative;
+	}
+
+	.qb-content-section {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+
+		flex: 1;
+
+		.qb-header-container {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+
+			margin-left: 32px;
+
+			.query-actions-container {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+			}
+		}
+
+		.qb-elements-container {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			margin-left: 108px;
+
+			.code-mirror-where-clause,
+			.query-aggregation-container,
+			.query-add-ons,
+			.metrics-aggregation-section-content {
+				position: relative;
+
+				&::before {
+					content: '';
+					position: absolute;
+					left: -10px;
+					top: 12px;
+					width: 6px;
+					height: 6px;
+					border-left: 6px dotted #1d212d;
+				}
+
+				/* Horizontal line pointing from vertical to the item */
+				&::after {
+					content: '';
+					position: absolute;
+					left: -28px;
+					top: 15px;
+					width: 24px;
+					height: 1px;
+					background: repeating-linear-gradient(
+						to right,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+			}
+		}
+	}
+
+	.where-clause-view {
+		.qb-content-section {
+			.qb-elements-container {
+				margin-left: 0px;
+
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content {
+					&::before {
+						display: none;
+					}
+
+					&::after {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+
+	.query-names-section {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		width: 44px;
+		padding: 8px;
+
+		border-left: 1px solid var(--bg-slate-400);
+
+		.query-name {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: 10px;
+
+			padding: 4px;
+
+			border-radius: 0px 2px 2px 0px;
+
+			border-radius: 2px;
+			border: 1px solid rgba(242, 71, 105, 0.2);
+			background: rgba(242, 71, 105, 0.1);
+
+			color: var(--Sakura-400, #f56c87);
+			font-family: 'Space Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 128.571% */
+			text-transform: uppercase;
+		}
+
+		.formula-name {
+			display: flex;
+
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: 10px;
+
+			padding: 4px;
+
+			border-radius: 0px 2px 2px 0px;
+
+			border-radius: 2px;
+			border: 1px solid rgba(173, 127, 88, 0.2);
+			background: rgba(173, 127, 88, 0.1);
+
+			color: var(--Sienna-500, #ad7f58);
+			font-family: 'Space Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 128.571% */
+			text-transform: uppercase;
+		}
+	}
+
+	.qb-formulas-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		margin-left: 32px;
+		padding-bottom: 16px;
+		padding-left: 8px;
+
+		.qb-formula {
+			.ant-row {
+				row-gap: 0px !important;
+			}
+
+			.qb-entity-options {
+				margin-left: 8px;
+
+				padding-right: 8px;
+			}
+
+			.formula-container {
+				margin-left: 82px;
+				padding: 4px 0px;
+
+				.ant-col {
+					&::before {
+						content: '';
+						position: absolute;
+						left: -10px;
+						top: 12px;
+						width: 6px;
+						height: 6px;
+						border-left: 6px dotted #1d212d;
+					}
+
+					/* Horizontal line pointing from vertical to the item */
+					&::after {
+						content: '';
+						position: absolute;
+						left: -28px;
+						top: 15px;
+						width: 24px;
+						height: 1px;
+						background: repeating-linear-gradient(
+							to right,
+							#1d212d,
+							#1d212d 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+
+				.formula-expression {
+					border-bottom-left-radius: 0px !important;
+					border-bottom-right-radius: 0px !important;
+
+					font-family: 'Space Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 16px; /* 128.571% */
+
+					resize: none;
+				}
+
+				.formula-legend {
+					border-top-left-radius: 0px !important;
+					border-top-right-radius: 0px !important;
+
+					.ant-input-group-addon {
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
+					}
+
+					.ant-input {
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
+					}
+				}
+			}
+		}
+	}
+
+	.qb-footer {
+		padding: 0 8px 16px 8px;
+
+		.qb-footer-container {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+
+			margin-left: 32px;
+
+			.qb-add-new-query {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+
+				&::before {
+					content: '';
+					height: calc(100% - 82px);
+					content: '';
+					position: absolute;
+					left: 56px;
+					top: 31px;
+					bottom: 0;
+					width: 1px;
+					background: repeating-linear-gradient(
+						to bottom,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+			}
+		}
+	}
+
+	.qb-entity-options {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+
+		.options {
+			.query-name {
+				border-radius: 0px 2px 2px 0px !important;
+				border: 1px solid rgba(242, 71, 105, 0.2) !important;
+				background: rgba(242, 71, 105, 0.1) !important;
+
+				color: var(--Sakura-400, #f56c87) !important;
+				font-family: 'Space Mono';
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				text-transform: uppercase;
+
+				&::before {
+					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;
+				}
+			}
+
+			.formula-name {
+				border-radius: 0px 2px 2px 0px;
+				border: 1px solid rgba(173, 127, 88, 0.2);
+				background: rgba(173, 127, 88, 0.1);
+
+				font-family: 'Space Mono';
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				text-transform: uppercase;
+
+				&::before {
+					content: '';
+					height: 65px;
+					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;
+				}
+			}
+		}
+
+		.query-data-source {
+			margin-left: 8px;
+
+			.ant-select-selector {
+				min-width: 120px;
+
+				border-radius: 2px;
+				border: 1px solid var(--Slate-400, #1d212d);
+				background: var(--Ink-300, #16181d);
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+			}
+		}
+	}
+
+	.qb-search-container {
+		.metrics-select-container {
+			margin-bottom: 12px;
+		}
+	}
+
+	.qb-search-filter-container {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 8px;
+
+		flex-wrap: wrap;
+
+		.query-search-container {
+			flex: 1;
+		}
+
+		.traces-search-filter-container {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+
+			width: 180px;
+		}
+
+		.ant-select {
+			height: auto;
+		}
+
+		.ant-select-selector {
+			border-radius: 2px;
+			border: 1px solid var(--Slate-400, #1d212d) !important;
+			background: var(--Ink-300, #16181d) !important;
+			height: 34px !important;
+			box-sizing: border-box !important;
+		}
+
+		.ant-select-arrow {
+			color: var(--bg-vanilla-400) !important;
+		}
+	}
+
+	.query-actions-dropdown {
+		cursor: pointer;
+	}
+}
+
+.lightMode {
+	.query-builder-v2 {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+		border-top: 1px solid var(--bg-vanilla-300);
+
+		.qb-content-section {
+			.qb-elements-container {
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content {
+					&::before {
+						border-left: 6px dotted var(--bg-vanilla-300);
+					}
+
+					/* Horizontal line pointing from vertical to the item */
+					&::after {
+						background: repeating-linear-gradient(
+							to right,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.query-names-section {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+
+		.qb-formulas-container {
+			.qb-formula {
+				.formula-container {
+					.ant-col {
+						&::before {
+							border-left: 6px dotted var(--bg-vanilla-300);
+						}
+
+						/* Horizontal line pointing from vertical to the item */
+						&::after {
+							background: repeating-linear-gradient(
+								to right,
+								var(--bg-vanilla-300),
+								var(--bg-vanilla-300) 4px,
+								transparent 4px,
+								transparent 8px
+							);
+						}
+					}
+				}
+			}
+		}
+
+		.qb-footer {
+			.qb-footer-container {
+				.qb-add-new-query {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.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(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+						left: 15px;
+					}
+				}
+			}
+
+			.query-data-source {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+				}
+			}
+		}
+
+		.qb-search-filter-container {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+			}
+
+			.ant-select-arrow {
+				color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -0,0 +1,185 @@
+import './QueryBuilderV2.styles.scss';
+
+import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
+import { Formula } from 'container/QueryBuilder/components/Formula';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
+import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
+import { QueryV2 } from './QueryV2/QueryV2';
+
+export const QueryBuilderV2 = memo(function QueryBuilderV2({
+	config,
+	panelType: newPanelType,
+	filterConfigs = {},
+	queryComponents,
+	isListViewPanel = false,
+	showOnlyWhereClause = false,
+	version,
+}: QueryBuilderProps): JSX.Element {
+	const {
+		currentQuery,
+		addNewBuilderQuery,
+		addNewFormula,
+		handleSetConfig,
+		panelType,
+		initialDataSource,
+	} = useQueryBuilder();
+
+	const containerRef = useRef(null);
+
+	const currentDataSource = useMemo(
+		() =>
+			(config && config.queryVariant === 'static' && config.initialDataSource) ||
+			null,
+		[config],
+	);
+
+	useEffect(() => {
+		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
+			if (newPanelType === PANEL_TYPES.BAR) {
+				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
+				return;
+			}
+			handleSetConfig(newPanelType, currentDataSource);
+		}
+	}, [
+		handleSetConfig,
+		panelType,
+		initialDataSource,
+		currentDataSource,
+		newPanelType,
+	]);
+
+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, []);
+
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			limit: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, []);
+
+	const queryFilterConfigs = useMemo(() => {
+		if (isListViewPanel) {
+			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
+				? listViewTracesFilterConfigs
+				: listViewLogFilterConfigs;
+		}
+
+		return filterConfigs;
+	}, [
+		isListViewPanel,
+		filterConfigs,
+		currentQuery.builder.queryData,
+		listViewLogFilterConfigs,
+		listViewTracesFilterConfigs,
+	]);
+
+	return (
+		<QueryBuilderV2Provider>
+			<div className="query-builder-v2">
+				<div className="qb-content-container">
+					{isListViewPanel && (
+						<QueryV2
+							ref={containerRef}
+							key={currentQuery.builder.queryData[0].queryName}
+							index={0}
+							query={currentQuery.builder.queryData[0]}
+							filterConfigs={queryFilterConfigs}
+							queryComponents={queryComponents}
+							version={version}
+							isAvailableToDisable={false}
+							queryVariant={config?.queryVariant || 'dropdown'}
+							showOnlyWhereClause={showOnlyWhereClause}
+							isListViewPanel={isListViewPanel}
+						/>
+					)}
+
+					{!isListViewPanel &&
+						currentQuery.builder.queryData.map((query, index) => (
+							<QueryV2
+								ref={containerRef}
+								key={query.queryName}
+								index={index}
+								query={query}
+								filterConfigs={queryFilterConfigs}
+								queryComponents={queryComponents}
+								version={version}
+								isAvailableToDisable={false}
+								queryVariant={config?.queryVariant || 'dropdown'}
+								showOnlyWhereClause={showOnlyWhereClause}
+								isListViewPanel={isListViewPanel}
+							/>
+						))}
+
+					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
+						<div className="qb-formulas-container">
+							{currentQuery.builder.queryFormulas.map((formula, index) => {
+								const query =
+									currentQuery.builder.queryData[index] ||
+									currentQuery.builder.queryData[0];
+
+								return (
+									<div key={formula.queryName} className="qb-formula">
+										<Formula
+											filterConfigs={filterConfigs}
+											query={query}
+											formula={formula}
+											index={index}
+											isAdditionalFilterEnable={false}
+										/>
+									</div>
+								);
+							})}
+						</div>
+					)}
+
+					{!showOnlyWhereClause && !isListViewPanel && (
+						<QueryFooter
+							addNewBuilderQuery={addNewBuilderQuery}
+							addNewFormula={addNewFormula}
+						/>
+					)}
+				</div>
+
+				{!showOnlyWhereClause && !isListViewPanel && (
+					<div className="query-names-section">
+						{currentQuery.builder.queryData.map((query) => (
+							<div key={query.queryName} className="query-name">
+								{query.queryName}
+							</div>
+						))}
+
+						{currentQuery.builder.queryFormulas.map((formula) => (
+							<div key={formula.queryName} className="formula-name">
+								{formula.queryName}
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</QueryBuilderV2Provider>
+	);
+});

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

@@ -0,0 +1,62 @@
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+
+// Types for the context state
+export type AggregationOption = { func: string; arg: string };
+
+interface QueryBuilderV2ContextType {
+	searchText: string;
+	setSearchText: (text: string) => void;
+	aggregationOptions: AggregationOption[];
+	setAggregationOptions: (options: AggregationOption[]) => void;
+	aggregationInterval: string;
+	setAggregationInterval: (interval: string) => void;
+	queryAddValues: any; // Replace 'any' with a more specific type if available
+	setQueryAddValues: (values: any) => void;
+}
+
+const QueryBuilderV2Context = createContext<
+	QueryBuilderV2ContextType | undefined
+>(undefined);
+
+export function QueryBuilderV2Provider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const [searchText, setSearchText] = useState('');
+	const [aggregationOptions, setAggregationOptions] = useState<
+		AggregationOption[]
+	>([]);
+	const [aggregationInterval, setAggregationInterval] = useState('');
+	const [queryAddValues, setQueryAddValues] = useState<any>(null); // Replace 'any' if you have a type
+
+	return (
+		<QueryBuilderV2Context.Provider
+			value={useMemo(
+				() => ({
+					searchText,
+					setSearchText,
+					aggregationOptions,
+					setAggregationOptions,
+					aggregationInterval,
+					setAggregationInterval,
+					queryAddValues,
+					setQueryAddValues,
+				}),
+				[searchText, aggregationOptions, aggregationInterval, queryAddValues],
+			)}
+		>
+			{children}
+		</QueryBuilderV2Context.Provider>
+	);
+}
+
+export const useQueryBuilderV2Context = (): QueryBuilderV2ContextType => {
+	const context = useContext(QueryBuilderV2Context);
+	if (!context) {
+		throw new Error(
+			'useQueryBuilderV2Context must be used within a QueryBuilderV2Provider',
+		);
+	}
+	return context;
+};

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -0,0 +1,147 @@
+.metrics-aggregate-section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin: 4px 0;
+
+	.metrics-time-aggregation-section {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.non-histogram-container {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	&:not(.is-histogram) {
+		.metrics-time-aggregation-section,
+		.metrics-space-aggregation-section {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+
+			.metrics-aggregation-section-content {
+				flex-wrap: nowrap;
+			}
+		}
+	}
+
+	.metrics-space-aggregation-section {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		.metrics-space-aggregation-section-title {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			color: var(--Slate-50, #62687c);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px; /* 150% */
+			letter-spacing: 0.48px;
+		}
+	}
+
+	.metrics-aggregation-section-content {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 8px;
+
+		.group-by-filter-container {
+			min-width: 340px !important;
+		}
+
+		.metrics-aggregation-section-content-item {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+
+			.metrics-aggregation-section-content-item-label {
+				color: var(--Vanilla-400, #c0c1c3);
+				font-family: 'Geist Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+
+				&.main-label {
+					color: var(--Slate-50, #62687c);
+					font-family: 'Geist Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 18px; /* 150% */
+					letter-spacing: 0.48px;
+					display: flex;
+					align-items: center;
+					gap: 6px;
+				}
+			}
+
+			.metrics-aggregation-section-content-item-value {
+				min-width: 140px;
+
+				.ant-select {
+					width: 100%;
+				}
+
+				.ant-select-selector {
+					border-radius: 2px;
+					border: 1.005px solid var(--Slate-400, #1d212d);
+					background: var(--Ink-300, #16181d);
+				}
+
+				.input-with-label {
+					.label {
+						min-width: 80px;
+					}
+
+					.input {
+						flex: initial;
+						width: 100px !important;
+					}
+				}
+			}
+		}
+	}
+
+	&.is-histogram {
+		.group-by-filter-container {
+			width: 420px;
+		}
+
+		.histogram-every-input {
+			.input {
+				flex: initial;
+				width: 100px !important;
+			}
+
+			.label {
+				min-width: 80px;
+			}
+		}
+	}
+}
+
+.metrics-operators-select {
+	border-radius: 2px;
+	border: 1.005px solid var(--Slate-400, #1d212d);
+	background: var(--Ink-300, #16181d);
+
+	color: var(--Vanilla-400, #c0c1c3);
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px; /* 142.857% */
+	letter-spacing: -0.07px;
+}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -0,0 +1,226 @@
+import './MetricsAggregateSection.styles.scss';
+
+import { Tooltip } from 'antd';
+import cx from 'classnames';
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import SpaceAggregationOptions from 'container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions';
+import { GroupByFilter, OperatorsSelect } from 'container/QueryBuilder/filters';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Info } from 'lucide-react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
+
+const MetricsAggregateSection = memo(function MetricsAggregateSection({
+	query,
+	index,
+	version,
+	panelType,
+}: {
+	query: IBuilderQuery;
+	index: number;
+	version: string;
+	panelType: PANEL_TYPES | null;
+}): JSX.Element {
+	const { setAggregationOptions } = useQueryBuilderV2Context();
+	const {
+		operators,
+		spaceAggregationOptions,
+		handleChangeQueryData,
+		handleChangeOperator,
+		handleSpaceAggregationChange,
+	} = useQueryOperations({
+		index,
+		query,
+		entityVersion: version,
+	});
+
+	const isHistogram = useMemo(
+		() => query.aggregateAttribute.type === ATTRIBUTE_TYPES.HISTOGRAM,
+		[query.aggregateAttribute.type],
+	);
+
+	useEffect(() => {
+		setAggregationOptions([
+			{
+				func: query.spaceAggregation || 'count',
+				arg: query.aggregateAttribute.key || '',
+			},
+		]);
+	}, [
+		query.spaceAggregation,
+		query.aggregateAttribute.key,
+		setAggregationOptions,
+		query,
+	]);
+
+	const handleChangeGroupByKeys = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			handleChangeQueryData('groupBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: string) => {
+			handleChangeQueryData('stepInterval', Number(value));
+		},
+		[handleChangeQueryData],
+	);
+
+	const showAggregationInterval = useMemo(() => {
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
+		if (panelType === PANEL_TYPES.VALUE) {
+			return false;
+		}
+
+		return true;
+	}, [panelType]);
+
+	const disableOperatorSelector =
+		!query?.aggregateAttribute.key || query?.aggregateAttribute.key === '';
+
+	return (
+		<div
+			className={cx('metrics-aggregate-section', {
+				'is-histogram': isHistogram,
+			})}
+		>
+			{!isHistogram && (
+				<div className="non-histogram-container">
+					<div className="metrics-time-aggregation-section">
+						<div className="metrics-aggregation-section-content">
+							<div className="metrics-aggregation-section-content-item">
+								<div className="metrics-aggregation-section-content-item-label main-label">
+									AGGREGATE BY TIME{' '}
+									<Tooltip title="AGGREGATE BY TIME">
+										<Info size={12} />
+									</Tooltip>
+								</div>
+								<div className="metrics-aggregation-section-content-item-value">
+									<OperatorsSelect
+										value={query.aggregateOperator}
+										onChange={handleChangeOperator}
+										operators={operators}
+										className="metrics-operators-select"
+									/>
+								</div>
+							</div>
+
+							{showAggregationInterval && (
+								<div className="metrics-aggregation-section-content-item">
+									<div className="metrics-aggregation-section-content-item-label">
+										every
+									</div>
+
+									<div className="metrics-aggregation-section-content-item-value">
+										<InputWithLabel
+											onChange={handleChangeAggregateEvery}
+											label="Seconds"
+											placeholder="Auto"
+											labelAfter
+											initialValue={query?.stepInterval ?? undefined}
+										/>
+									</div>
+								</div>
+							)}
+						</div>
+					</div>
+					<div className="metrics-space-aggregation-section">
+						<div className="metrics-aggregation-section-content">
+							<div className="metrics-aggregation-section-content-item">
+								<div className="metrics-aggregation-section-content-item-label main-label">
+									AGGREGATE LABELS
+									<Tooltip title="AGGREGATE LABELS">
+										<Info size={12} />
+									</Tooltip>
+								</div>
+								<div className="metrics-aggregation-section-content-item-value">
+									<SpaceAggregationOptions
+										panelType={panelType}
+										key={`${panelType}${query.spaceAggregation}${query.timeAggregation}`}
+										aggregatorAttributeType={
+											query?.aggregateAttribute.type as ATTRIBUTE_TYPES
+										}
+										selectedValue={query.spaceAggregation}
+										disabled={disableOperatorSelector}
+										onSelect={handleSpaceAggregationChange}
+										operators={spaceAggregationOptions}
+										qbVersion="v3"
+									/>
+								</div>
+							</div>
+
+							<div className="metrics-aggregation-section-content-item">
+								<div className="metrics-aggregation-section-content-item-label">by</div>
+
+								<div className="metrics-aggregation-section-content-item-value group-by-filter-container">
+									<GroupByFilter
+										disabled={!query.aggregateAttribute.key}
+										query={query}
+										onChange={handleChangeGroupByKeys}
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{isHistogram && (
+				<div className="metrics-space-aggregation-section">
+					<div className="metrics-aggregation-section-content">
+						<div className="metrics-aggregation-section-content-item">
+							<div className="metrics-aggregation-section-content-item-value">
+								<SpaceAggregationOptions
+									panelType={panelType}
+									key={`${panelType}${query.spaceAggregation}${query.timeAggregation}`}
+									aggregatorAttributeType={
+										query?.aggregateAttribute.type as ATTRIBUTE_TYPES
+									}
+									selectedValue={query.spaceAggregation}
+									disabled={disableOperatorSelector}
+									onSelect={handleSpaceAggregationChange}
+									operators={spaceAggregationOptions}
+									qbVersion="v3"
+								/>
+							</div>
+						</div>
+
+						<div className="metrics-aggregation-section-content-item">
+							<div className="metrics-aggregation-section-content-item-label">by</div>
+
+							<div className="metrics-aggregation-section-content-item-value group-by-filter-container">
+								<GroupByFilter
+									disabled={!query.aggregateAttribute.key}
+									query={query}
+									onChange={handleChangeGroupByKeys}
+								/>
+							</div>
+						</div>
+						<div className="metrics-aggregation-section-content-item">
+							<div className="metrics-aggregation-section-content-item-label">
+								every
+							</div>
+
+							<div className="metrics-aggregation-section-content-item-value">
+								<InputWithLabel
+									onChange={handleChangeAggregateEvery}
+									label="Seconds"
+									placeholder="Auto"
+									labelAfter
+									initialValue={query?.stepInterval ?? undefined}
+									className="histogram-every-input"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+});
+
+export default MetricsAggregateSection;

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -0,0 +1,42 @@
+.metrics-select-container {
+	margin-bottom: 8px;
+
+	.ant-select-selector {
+		width: 100%;
+		border-radius: 2px;
+		border: 1px solid #1d212d !important;
+		background: #16181d;
+		color: #fff;
+		font-family: 'Geist Mono';
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		min-height: 36px;
+	}
+
+	.ant-select-dropdown {
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		.ant-select-item {
+			color: #fff;
+			font-family: 'Geist Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+
+			&:hover {
+				background: rgba(171, 189, 255, 0.04) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -0,0 +1,28 @@
+import './MetricsSelect.styles.scss';
+
+import { AggregatorFilter } from 'container/QueryBuilder/filters';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { memo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+export const MetricsSelect = memo(function MetricsSelect({
+	query,
+	index,
+	version,
+}: {
+	query: IBuilderQuery;
+	index: number;
+	version: string;
+}): JSX.Element {
+	const { handleChangeAggregatorAttribute } = useQueryOperations({
+		index,
+		query,
+		entityVersion: version,
+	});
+
+	return (
+		<div className="metrics-select-container">
+			<AggregatorFilter onChange={handleChangeAggregatorAttribute} query={query} />
+		</div>
+	);
+});

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -0,0 +1,375 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable sonarjs/cognitive-complexity */
+import {
+	autocompletion,
+	closeCompletion,
+	Completion,
+	CompletionContext,
+	completionKeymap,
+	CompletionResult,
+	startCompletion,
+} from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
+import { Button } from 'antd';
+import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
+import { X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+const havingOperators = [
+	{
+		label: '=',
+		value: '=',
+	},
+	{
+		label: '!=',
+		value: '!=',
+	},
+	{
+		label: '>',
+		value: '>',
+	},
+	{
+		label: '<',
+		value: '<',
+	},
+	{
+		label: '>=',
+		value: '>=',
+	},
+	{
+		label: '<=',
+		value: '<=',
+	},
+	{
+		label: 'IN',
+		value: 'IN',
+	},
+	{
+		label: 'NOT_IN',
+		value: 'NOT_IN',
+	},
+];
+
+const conjunctions = [
+	{ label: 'AND', value: 'AND ' },
+	{ label: 'OR', value: 'OR ' },
+];
+
+// Custom extension to stop events from propagating to global shortcuts
+const stopEventsExtension = EditorView.domEventHandlers({
+	keydown: (event) => {
+		// Stop all keyboard events from propagating to global shortcuts
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+		return false; // Important for CM to know you handled it
+	},
+	input: (event) => {
+		event.stopPropagation();
+		return false;
+	},
+	focus: (event) => {
+		// Ensure focus events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+	blur: (event) => {
+		// Ensure blur events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+});
+
+function HavingFilter({
+	onClose,
+	onChange,
+	queryData,
+}: {
+	onClose: () => void;
+	onChange: (value: string) => void;
+	queryData: IBuilderQuery;
+}): JSX.Element {
+	const { aggregationOptions } = useQueryBuilderV2Context();
+	const [input, setInput] = useState(
+		queryData?.havingExpression?.expression || '',
+	);
+
+	useEffect(() => {
+		setInput(queryData?.havingExpression?.expression || '');
+	}, [queryData?.havingExpression?.expression]);
+
+	const [isFocused, setIsFocused] = useState(false);
+
+	const editorRef = useRef<EditorView | null>(null);
+
+	const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
+
+	const handleChange = (value: string): void => {
+		setInput(value);
+		onChange(value);
+	};
+
+	useEffect(() => {
+		if (isFocused && editorRef.current && options.length > 0) {
+			startCompletion(editorRef.current);
+		}
+	}, [isFocused, options]);
+
+	// Update options when aggregation options change
+	useEffect(() => {
+		const newOptions = [];
+		for (let i = 0; i < aggregationOptions.length; i++) {
+			const opt = aggregationOptions[i];
+			for (let j = 0; j < havingOperators.length; j++) {
+				const operator = havingOperators[j];
+				newOptions.push({
+					label: `${opt.func}(${opt.arg}) ${operator.label}`,
+					value: `${opt.func}(${opt.arg}) ${operator.label} `,
+					apply: (
+						view: EditorView,
+						completion: { label: string; value: string },
+						from: number,
+						to: number,
+					): void => {
+						view.dispatch({
+							changes: { from, to, insert: completion.value },
+							selection: { anchor: from + completion.value.length },
+						});
+						// Trigger value suggestions immediately after operator
+						setTimeout(() => {
+							startCompletion(view);
+						}, 0);
+					},
+				});
+			}
+		}
+		setOptions(newOptions);
+	}, [aggregationOptions]);
+
+	// Helper to check if a string is a number
+	const isNumber = (token: string): boolean => /^-?\d+(\.\d+)?$/.test(token);
+
+	// Helper to check if we're after an operator
+	const isAfterOperator = (tokens: string[]): boolean => {
+		if (tokens.length === 0) return false;
+		const lastToken = tokens[tokens.length - 1];
+		// Check if the last token is exactly an operator or ends with an operator and space
+		return havingOperators.some((op) => {
+			const opWithSpace = `${op.value} `;
+			return lastToken === op.value || lastToken.endsWith(opWithSpace);
+		});
+	};
+
+	// Helper function for applying completion with space
+	const applyCompletionWithSpace = (
+		view: EditorView,
+		completion: Completion,
+		from: number,
+		to: number,
+	): void => {
+		const insertValue =
+			typeof completion.apply === 'string' ? completion.apply : completion.label;
+		const newText = `${insertValue} `;
+		const newPos = from + newText.length;
+
+		view.dispatch({
+			changes: { from, to, insert: newText },
+			selection: { anchor: newPos, head: newPos },
+			effects: EditorView.scrollIntoView(newPos),
+		});
+	};
+
+	const havingAutocomplete = useMemo(() => {
+		// Helper functions for applying completions
+		const forceCompletion = (view: EditorView): void => {
+			setTimeout(() => {
+				if (view) {
+					startCompletion(view);
+				}
+			}, 0);
+		};
+
+		const applyValueCompletion = (
+			view: EditorView,
+			completion: Completion,
+			from: number,
+			to: number,
+		): void => {
+			applyCompletionWithSpace(view, completion, from, to);
+			forceCompletion(view);
+		};
+
+		const applyOperatorCompletion = (
+			view: EditorView,
+			completion: Completion,
+			from: number,
+			to: number,
+		): void => {
+			const insertValue =
+				typeof completion.apply === 'string' ? completion.apply : completion.label;
+			const insertWithSpace = `${insertValue} `;
+			view.dispatch({
+				changes: { from, to, insert: insertWithSpace },
+				selection: { anchor: from + insertWithSpace.length },
+			});
+			forceCompletion(view);
+		};
+
+		return autocompletion({
+			override: [
+				(context: CompletionContext): CompletionResult | null => {
+					const text = context.state.sliceDoc(0, context.pos);
+					const trimmedText = text.trim();
+					const tokens = trimmedText.split(/\s+/).filter(Boolean);
+
+					// Handle empty state when no aggregation options are available
+					if (options.length === 0) {
+						return {
+							from: context.pos,
+							options: [
+								{
+									label:
+										'No aggregation functions available. Please add aggregation functions first.',
+									type: 'text',
+									apply: (): boolean => true,
+								},
+							],
+						};
+					}
+
+					// Close dropdown after operator to allow custom value entry
+					if (isAfterOperator(tokens)) {
+						return null;
+					}
+
+					// Hide suggestions while typing a value after an operator
+					if (
+						!text.endsWith(' ') &&
+						tokens.length >= 2 &&
+						havingOperators.some((op) => op.value === tokens[tokens.length - 2])
+					) {
+						return null;
+					}
+
+					// Suggest key/operator pairs and ( for grouping
+					if (
+						tokens.length === 0 ||
+						conjunctions.some((c) => tokens[tokens.length - 1] === c.value.trim()) ||
+						tokens[tokens.length - 1] === '('
+					) {
+						return {
+							from: context.pos,
+							options: options.map((opt) => ({
+								...opt,
+								apply: applyOperatorCompletion,
+							})),
+						};
+					}
+
+					// Show suggestions when typing
+					if (tokens.length > 0) {
+						const lastToken = tokens[tokens.length - 1];
+						const filteredOptions = options.filter((opt) =>
+							opt.label.toLowerCase().includes(lastToken.toLowerCase()),
+						);
+						if (filteredOptions.length > 0) {
+							return {
+								from: context.pos - lastToken.length,
+								options: filteredOptions.map((opt) => ({
+									...opt,
+									apply: applyOperatorCompletion,
+								})),
+							};
+						}
+					}
+
+					// Suggest conjunctions after a value and a space
+					if (
+						tokens.length > 0 &&
+						(isNumber(tokens[tokens.length - 1]) ||
+							tokens[tokens.length - 1] === ')') &&
+						text.endsWith(' ')
+					) {
+						return {
+							from: context.pos,
+							options: conjunctions.map((conj) => ({
+								...conj,
+								apply: applyValueCompletion,
+							})),
+						};
+					}
+
+					// Show all options if no other condition matches
+					return {
+						from: context.pos,
+						options: options.map((opt) => ({
+							...opt,
+							apply: applyOperatorCompletion,
+						})),
+					};
+				},
+			],
+			defaultKeymap: true,
+			closeOnBlur: true,
+			maxRenderedOptions: 200,
+			activateOnTyping: true,
+		});
+	}, [options]);
+
+	return (
+		<div className="having-filter-container">
+			<div className="having-filter-select-container">
+				<CodeMirror
+					value={input}
+					onChange={handleChange}
+					theme={copilot}
+					className="having-filter-select-editor"
+					width="100%"
+					extensions={[
+						havingAutocomplete,
+						javascript({ jsx: false, typescript: false }),
+						stopEventsExtension,
+						EditorView.lineWrapping,
+						keymap.of([
+							...completionKeymap,
+							{
+								key: 'Escape',
+								run: closeCompletion,
+							},
+						]),
+					]}
+					placeholder="Type Having query like count() > 10 ..."
+					basicSetup={{
+						lineNumbers: false,
+						autocompletion: true,
+						completionKeymap: true,
+					}}
+					onCreateEditor={(view: EditorView): void => {
+						editorRef.current = view;
+					}}
+					onFocus={(): void => {
+						setIsFocused(true);
+						if (editorRef.current) {
+							startCompletion(editorRef.current);
+						}
+					}}
+					onBlur={(): void => {
+						setIsFocused(false);
+						if (editorRef.current) {
+							closeCompletion(editorRef.current);
+						}
+					}}
+				/>
+				<Button
+					className="close-btn periscope-btn ghost"
+					icon={<X size={16} />}
+					onClick={onClose}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default HavingFilter;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -0,0 +1,377 @@
+.add-ons-list {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.add-ons-tabs {
+		display: flex;
+		flex-wrap: wrap;
+
+		.add-on-tab-title {
+			display: flex;
+			gap: var(--margin-2);
+			align-items: center;
+			justify-content: center;
+			font-size: var(--font-size-xs);
+			font-style: normal;
+			font-weight: var(--font-weight-normal);
+
+			color: var(--Vanilla-400, #c0c1c3);
+		}
+
+		.tab {
+			border: 1px solid var(--bg-slate-400);
+			border-left: none;
+			min-width: 120px;
+			height: 36px;
+			line-height: 36px;
+
+			&:first-child {
+				border-left: 1px solid var(--bg-slate-400);
+			}
+		}
+
+		.tab::before {
+			background: var(--bg-slate-400);
+		}
+
+		.selected-view {
+			color: var(--text-robin-500);
+			border: 1px solid var(--bg-slate-400);
+
+			display: none;
+		}
+
+		.selected-view::before {
+			background: var(--bg-slate-400);
+		}
+	}
+
+	.compass-button {
+		width: 30px;
+		height: 30px;
+
+		border-radius: 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+}
+
+.having-filter-container {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	.having-filter-select-container {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		.having-filter-select-editor {
+			border-radius: 2px;
+			flex: 1;
+			width: calc(100% - 40px);
+
+			.cm-content {
+				padding: 0;
+			}
+
+			.cm-editor {
+				border-radius: 2px;
+				background-color: transparent !important;
+				position: relative !important;
+
+				&:focus-within {
+					border-color: var(--bg-robin-500);
+				}
+
+				&.cm-focused {
+					outline: none !important;
+				}
+
+				.cm-content {
+					border-radius: 2px;
+					border: 1px solid var(--Slate-400, #1d212d);
+					border-top-right-radius: 0px;
+					border-bottom-right-radius: 0px;
+					padding: 0px !important;
+					background-color: #121317 !important;
+
+					&:focus-within {
+						border-color: var(--bg-ink-200);
+					}
+				}
+
+				.cm-tooltip-autocomplete {
+					background: var(--bg-ink-300) !important;
+					color: var(--bg-ink-500) !important;
+					border-radius: 2px !important;
+					font-size: 12px !important;
+					font-weight: 500 !important;
+					margin-top: -2px !important;
+					width: 100% !important;
+					position: absolute !important;
+					top: 38px !important;
+					left: 0px !important;
+
+					border-radius: 4px;
+					border: 1px solid var(--bg-slate-200, #1d212d);
+					border-top: none !important;
+					border-top-left-radius: 0px !important;
+					border-top-right-radius: 0px !important;
+					background: linear-gradient(
+						139deg,
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
+					) !important;
+					backdrop-filter: blur(20px);
+					box-sizing: border-box;
+					font-family: 'Space Mono', monospace !important;
+
+					ul {
+						width: 100% !important;
+						max-width: 100% !important;
+						font-family: 'Space Mono', monospace !important;
+						min-height: 200px !important;
+
+						&::-webkit-scrollbar {
+							width: 0.3rem;
+						}
+						&::-webkit-scrollbar-corner {
+							background: transparent;
+						}
+						&::-webkit-scrollbar-thumb {
+							background: rgb(136, 136, 136);
+							border-radius: 0.625rem;
+						}
+						&::-webkit-scrollbar-track {
+							background: transparent;
+						}
+
+						li {
+							width: 100% !important;
+							max-width: 100% !important;
+							line-height: 36px !important;
+							height: 36px !important;
+							padding: 4px 8px !important;
+
+							display: flex !important;
+							align-items: center !important;
+							gap: 8px !important;
+							box-sizing: border-box;
+							overflow: hidden;
+
+							font-family: 'Space Mono', monospace !important;
+							color: var(--bg-vanilla-100) !important;
+
+							.cm-completionIcon {
+								display: none !important;
+							}
+
+							&[aria-selected='true'] {
+								// background-color: rgba(78, 116, 248, 0.7) !important;
+								background: rgba(171, 189, 255, 0.04) !important;
+							}
+						}
+					}
+				}
+
+				.cm-gutters {
+					display: none !important;
+				}
+
+				.cm-scroller {
+					scrollbar-width: none;
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-thumb {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-track {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-corner {
+						display: none;
+					}
+				}
+
+				.cm-line {
+					line-height: 36px !important;
+					font-family: 'Space Mono', monospace !important;
+					background-color: #121317 !important;
+
+					::-moz-selection {
+						background: var(--bg-ink-100) !important;
+						opacity: 0.5 !important;
+					}
+
+					::selection {
+						background: var(--bg-ink-100) !important;
+						opacity: 0.5 !important;
+					}
+
+					.cm-function {
+						color: var(--bg-robin-500) !important;
+					}
+
+					.chip-decorator {
+						background: rgba(36, 40, 52, 1) !important;
+						color: var(--bg-vanilla-100) !important;
+						border-radius: 4px;
+						padding: 2px 4px;
+						margin-right: 4px;
+					}
+				}
+
+				.cm-selectionBackground {
+					background: var(--bg-ink-100) !important;
+					opacity: 0.5 !important;
+				}
+			}
+		}
+
+		.close-btn {
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			height: 38px;
+			width: 38px;
+
+			border-left: transparent;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+	}
+}
+
+.selected-add-ons-content {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+	gap: 8px;
+	padding-bottom: 8px;
+	position: relative;
+
+	.add-on-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		max-width: 100%;
+		min-width: 100%;
+		min-width: 420px;
+
+		box-sizing: border-box;
+		position: relative;
+	}
+}
+
+.lightMode {
+	.add-ons-list {
+		.add-ons-tabs {
+			.add-on-tab-title {
+				color: var(--bg-ink-500) !important;
+			}
+
+			.tab {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+
+				&:first-child {
+					border-left: 1px solid var(--bg-vanilla-300) !important;
+				}
+			}
+
+			.tab::before {
+				background: var(--bg-vanilla-300) !important;
+			}
+
+			.selected-view {
+				color: var(--bg-robin-500) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+			}
+
+			.selected-view::before {
+				background: var(--bg-vanilla-300) !important;
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+	}
+
+	.having-filter-container {
+		.having-filter-select-container {
+			.having-filter-select-editor {
+				.cm-editor {
+					&:focus-within {
+						border-color: var(--bg-vanilla-300) !important;
+					}
+
+					.cm-content {
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;
+
+						&:focus-within {
+							border-color: var(--bg-vanilla-300) !important;
+						}
+					}
+
+					.cm-tooltip-autocomplete {
+						background: var(--bg-vanilla-100) !important;
+						border: 1px solid var(--bg-vanilla-300) !important;
+						color: var(--bg-ink-500) !important;
+
+						ul {
+							li {
+								&:hover {
+									background: var(--bg-vanilla-300) !important;
+								}
+
+								&[aria-selected='true'] {
+									color: var(--bg-ink-500) !important;
+									background: var(--bg-vanilla-300) !important;
+								}
+							}
+						}
+					}
+
+					.cm-line {
+						background-color: var(--bg-vanilla-100) !important;
+
+						::-moz-selection {
+							background: var(--bg-vanilla-100) !important;
+						}
+
+						::selection {
+							background: var(--bg-ink-100) !important;
+						}
+
+						.chip-decorator {
+							background: var(--bg-robin-100) !important;
+							color: var(--bg-ink-400) !important;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--bg-vanilla-100) !important;
+					}
+				}
+			}
+
+			.close-btn {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -0,0 +1,340 @@
+import './QueryAddOns.styles.scss';
+
+import { Button, Radio, RadioChangeEvent } from 'antd';
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
+import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter';
+import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { isEmpty } from 'lodash-es';
+import { BarChart2, ScrollText, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import HavingFilter from './HavingFilter/HavingFilter';
+
+interface AddOn {
+	icon: React.ReactNode;
+	label: string;
+	key: string;
+}
+
+const ADD_ONS_KEYS = {
+	GROUP_BY: 'group_by',
+	HAVING: 'having',
+	ORDER_BY: 'order_by',
+	LIMIT: 'limit',
+	LEGEND_FORMAT: 'legend_format',
+};
+
+const ADD_ONS = [
+	{
+		icon: <BarChart2 size={14} />,
+		label: 'Group By',
+		key: 'group_by',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Having',
+		key: 'having',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Order By',
+		key: 'order_by',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Limit',
+		key: 'limit',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Legend format',
+		key: 'legend_format',
+	},
+];
+
+const REDUCE_TO = {
+	icon: <ScrollText size={14} />,
+	label: 'Reduce to',
+	key: 'reduce_to',
+};
+
+function QueryAddOns({
+	query,
+	version,
+	isListViewPanel,
+	showReduceTo,
+	panelType,
+	index,
+}: {
+	query: IBuilderQuery;
+	version: string;
+	isListViewPanel: boolean;
+	showReduceTo: boolean;
+	panelType: PANEL_TYPES | null;
+	index: number;
+}): JSX.Element {
+	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
+
+	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
+
+	const { handleChangeQueryData } = useQueryOperations({
+		index,
+		query,
+		entityVersion: '',
+	});
+
+	useEffect(() => {
+		if (isListViewPanel) {
+			setAddOns([]);
+
+			setSelectedViews([
+				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
+			]);
+
+			return;
+		}
+
+		let filteredAddOns: AddOn[];
+		if (panelType === PANEL_TYPES.VALUE) {
+			// Filter out all add-ons except legend format
+			filteredAddOns = ADD_ONS.filter(
+				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
+			);
+		} else {
+			filteredAddOns = Object.values(ADD_ONS);
+
+			// Filter out group_by for metrics data source
+			if (query.dataSource === DataSource.METRICS) {
+				filteredAddOns = filteredAddOns.filter(
+					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
+				);
+			}
+		}
+
+		// add reduce to if showReduceTo is true
+		if (showReduceTo) {
+			filteredAddOns = [...filteredAddOns, REDUCE_TO];
+		}
+
+		setAddOns(filteredAddOns);
+
+		// Filter selectedViews to only include add-ons present in filteredAddOns
+		setSelectedViews((prevSelectedViews) =>
+			prevSelectedViews.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
+			),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [panelType, isListViewPanel, query.dataSource]);
+
+	const handleOptionClick = (e: RadioChangeEvent): void => {
+		if (selectedViews.find((view) => view.key === e.target.value.key)) {
+			setSelectedViews(
+				selectedViews.filter((view) => view.key !== e.target.value.key),
+			);
+		} else {
+			setSelectedViews([...selectedViews, e.target.value]);
+		}
+	};
+
+	const handleChangeGroupByKeys = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			handleChangeQueryData('groupBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeOrderByKeys = useCallback(
+		(value: IBuilderQuery['orderBy']) => {
+			handleChangeQueryData('orderBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeReduceTo = useCallback(
+		(value: IBuilderQuery['reduceTo']) => {
+			handleChangeQueryData('reduceTo', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleRemoveView = useCallback(
+		(key: string): void => {
+			setSelectedViews(selectedViews.filter((view) => view.key !== key));
+		},
+		[selectedViews],
+	);
+
+	const handleChangeQueryLegend = useCallback(
+		(value: string) => {
+			handleChangeQueryData('legend', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeLimit = useCallback(
+		(value: string) => {
+			handleChangeQueryData('limit', Number(value) || null);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeHaving = useCallback(
+		(value: string) => {
+			handleChangeQueryData('havingExpression', {
+				expression: value,
+			});
+		},
+		[handleChangeQueryData],
+	);
+
+	return (
+		<div className="query-add-ons">
+			{selectedViews.length > 0 && (
+				<div className="selected-add-ons-content">
+					{selectedViews.find((view) => view.key === 'group_by') && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Group By</div>
+								<div className="input">
+									<GroupByFilter
+										disabled={
+											query.dataSource === DataSource.METRICS &&
+											!query.aggregateAttribute.key
+										}
+										query={query}
+										onChange={handleChangeGroupByKeys}
+									/>
+								</div>
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<X size={16} />}
+									onClick={(): void => handleRemoveView('group_by')}
+								/>
+							</div>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === 'having') && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Having</div>
+								<div className="input">
+									<HavingFilter
+										onClose={(): void => {
+											setSelectedViews(
+												selectedViews.filter((view) => view.key !== 'having'),
+											);
+										}}
+										onChange={handleChangeHaving}
+										queryData={query}
+									/>
+								</div>
+							</div>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === 'limit') && (
+						<div className="add-on-content">
+							<InputWithLabel
+								label="Limit"
+								onChange={handleChangeLimit}
+								initialValue={query?.limit ?? undefined}
+								placeholder="Enter limit"
+								onClose={(): void => {
+									setSelectedViews(selectedViews.filter((view) => view.key !== 'limit'));
+								}}
+							/>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === 'order_by') && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Order By</div>
+								<div className="input">
+									<OrderByFilter
+										entityVersion={version}
+										query={query}
+										onChange={handleChangeOrderByKeys}
+										isListViewPanel={isListViewPanel}
+										isNewQueryV2
+									/>
+								</div>
+								{!isListViewPanel && (
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<X size={16} />}
+										onClick={(): void => handleRemoveView('order_by')}
+									/>
+								)}
+							</div>
+						</div>
+					)}
+
+					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Reduce to</div>
+								<div className="input">
+									<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+								</div>
+
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<X size={16} />}
+									onClick={(): void => handleRemoveView('reduce_to')}
+								/>
+							</div>
+						</div>
+					)}
+
+					{selectedViews.find((view) => view.key === 'legend_format') && (
+						<div className="add-on-content">
+							<InputWithLabel
+								label="Legend format"
+								placeholder="Write legend format"
+								onChange={handleChangeQueryLegend}
+								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
+								onClose={(): void => {
+									setSelectedViews(
+										selectedViews.filter((view) => view.key !== 'legend_format'),
+									);
+								}}
+							/>
+						</div>
+					)}
+				</div>
+			)}
+
+			<div className="add-ons-list">
+				<Radio.Group
+					className="add-ons-tabs"
+					onChange={handleOptionClick}
+					value={selectedViews}
+				>
+					{addOns.map((addOn) => (
+						<Radio.Button
+							key={addOn.label}
+							className={
+								selectedViews.find((view) => view.key === addOn.key)
+									? 'selected-view tab'
+									: 'tab'
+							}
+							value={addOn}
+						>
+							<div className="add-on-tab-title">
+								{addOn.icon}
+								{addOn.label}
+							</div>
+						</Radio.Button>
+					))}
+				</Radio.Group>
+			</div>
+		</div>
+	);
+}
+
+export default QueryAddOns;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -0,0 +1,334 @@
+.query-aggregation-container {
+	display: block;
+
+	.aggregation-container {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		align-items: flex-start;
+		flex-wrap: wrap;
+
+		.query-aggregation-select-container {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex: 1;
+			min-width: 400px;
+			position: relative;
+
+			.query-aggregation-select-editor {
+				border-radius: 2px;
+				flex: 1;
+				min-width: 0;
+
+				&.error {
+					.cm-editor {
+						.cm-content {
+							border-color: var(--bg-cherry-500) !important;
+						}
+					}
+				}
+				.cm-content {
+					padding: 0;
+				}
+
+				.cm-editor {
+					border-radius: 2px;
+					background-color: transparent !important;
+					position: relative !important;
+
+					&.cm-focused {
+						outline: none !important;
+					}
+
+					&:focus-within {
+						border-color: var(--bg-robin-500);
+					}
+
+					.cm-content {
+						border-radius: 2px;
+						border: 1px solid var(--Slate-400, #1d212d);
+						border-top-right-radius: 0px;
+						border-bottom-right-radius: 0px;
+						padding: 0px !important;
+						background-color: #121317 !important;
+
+						&:focus-within {
+							border-color: var(--bg-ink-200);
+						}
+					}
+
+					.cm-tooltip-autocomplete {
+						background: var(--bg-ink-300) !important;
+						border-radius: 2px !important;
+						font-size: 12px !important;
+						font-weight: 500 !important;
+						margin-top: 8px !important;
+						min-width: 400px !important;
+						position: absolute !important;
+						left: 0px !important;
+						width: 100% !important;
+
+						border-radius: 4px;
+						border: 1px solid var(--bg-slate-200, #1d212d);
+						border-top: none !important;
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
+						background: linear-gradient(
+							139deg,
+							rgba(18, 19, 23, 0.8) 0%,
+							rgba(18, 19, 23, 0.9) 98.68%
+						) !important;
+						backdrop-filter: blur(20px);
+						box-sizing: border-box;
+						font-family: 'Space Mono', monospace !important;
+
+						ul {
+							width: 100% !important;
+							max-width: 100% !important;
+							font-family: 'Space Mono', monospace !important;
+							min-height: 200px !important;
+
+							&::-webkit-scrollbar {
+								width: 0.3rem;
+							}
+							&::-webkit-scrollbar-corner {
+								background: transparent;
+							}
+							&::-webkit-scrollbar-thumb {
+								background: rgb(136, 136, 136);
+								border-radius: 0.625rem;
+							}
+							&::-webkit-scrollbar-track {
+								background: transparent;
+							}
+
+							li {
+								width: 100% !important;
+								max-width: 100% !important;
+								line-height: 36px !important;
+								height: 36px !important;
+								padding: 4px 8px !important;
+
+								display: flex !important;
+								align-items: center !important;
+								gap: 8px !important;
+								box-sizing: border-box;
+								overflow: hidden;
+
+								font-family: 'Space Mono', monospace !important;
+
+								.cm-completionIcon {
+									display: none !important;
+								}
+
+								&[aria-selected='true'] {
+									// background-color: rgba(78, 116, 248, 0.7) !important;
+									background: rgba(171, 189, 255, 0.04) !important;
+								}
+							}
+						}
+					}
+
+					.cm-gutters {
+						display: none !important;
+					}
+
+					.cm-line {
+						line-height: 36px !important;
+						font-family: 'Space Mono', monospace !important;
+						background-color: #121317 !important;
+
+						::-moz-selection {
+							background: var(--bg-ink-100) !important;
+							opacity: 0.5 !important;
+						}
+
+						::selection {
+							background: var(--bg-ink-100) !important;
+							opacity: 0.5 !important;
+						}
+
+						.cm-function {
+							color: var(--bg-robin-500) !important;
+						}
+
+						.chip-decorator {
+							background: rgba(36, 40, 52, 1) !important;
+							color: var(--bg-vanilla-100) !important;
+							border-radius: 4px;
+							padding: 2px 4px;
+							margin-right: 4px;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--bg-ink-100) !important;
+						opacity: 0.5 !important;
+					}
+				}
+			}
+
+			.query-aggregation-error-container {
+				position: absolute;
+				right: 8px;
+				top: 50%;
+				transform: translateY(-50%);
+				z-index: 1;
+
+				.query-aggregation-error-content {
+					padding: 8px;
+					max-width: 300px;
+
+					.query-aggregation-error-message {
+						color: var(--bg-cherry-500);
+						font-size: 12px;
+						line-height: 16px;
+					}
+				}
+
+				.query-aggregation-error-btn {
+					padding: 4px;
+					height: auto;
+					min-width: auto;
+				}
+			}
+			.close-btn {
+				border-radius: 0px 2px 2px 0px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+				height: 38px;
+				width: 38px;
+
+				border-left: transparent;
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+			}
+		}
+
+		.query-aggregation-options-input {
+			width: 100%;
+			height: 36px;
+			line-height: 36px;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+			font-family: 'Space Mono', monospace !important;
+
+			&::placeholder {
+				color: var(--bg-vanilla-100);
+				opacity: 0.5;
+			}
+		}
+
+		.query-aggregation-interval {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+			max-width: 360px;
+
+			.query-aggregation-interval-input-container {
+				.query-aggregation-interval-input {
+					input {
+						max-width: 120px;
+					}
+				}
+			}
+		}
+	}
+}
+
+.lightMode {
+	.query-aggregation-container {
+		.aggregation-container {
+			.query-aggregation-options-input {
+				border-color: var(--bg-vanilla-300) !important;
+
+				&::placeholder {
+					color: var(--bg-ink-400) !important;
+					opacity: 0.5 !important;
+				}
+			}
+
+			.query-aggregation-select-container {
+				.query-aggregation-select-editor {
+					.cm-editor {
+						.cm-content {
+							border: 1px solid var(--bg-vanilla-300) !important;
+							background: var(--bg-vanilla-100) !important;
+							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+							&:focus-within {
+								border-color: var(--bg-vanilla-300) !important;
+							}
+						}
+
+						.cm-tooltip-autocomplete {
+							background: var(--bg-vanilla-100) !important;
+							border: 1px solid var(--bg-vanilla-300) !important;
+							color: var(--bg-ink-500) !important;
+
+							ul {
+								li {
+									&:hover {
+										background-color: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+									}
+
+									&[aria-selected='true'] {
+										background: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+									}
+								}
+							}
+						}
+
+						.cm-line {
+							background-color: var(--bg-vanilla-100) !important;
+
+							::-moz-selection {
+								background: var(--bg-vanilla-100) !important;
+								opacity: 0.5 !important;
+							}
+
+							::selection {
+								background: var(--bg-vanilla-100) !important;
+								opacity: 0.5 !important;
+							}
+
+							.cm-function {
+								color: var(--bg-robin-500) !important;
+							}
+
+							.chip-decorator {
+								background: var(--bg-robin-500) !important;
+								color: var(--bg-ink-400) !important;
+							}
+						}
+
+						// .cm-selectionBackground {
+						// 	background: var(--bg-vanilla-100) !important;
+						// 	opacity: 0.5 !important;
+						// }
+					}
+				}
+
+				.close-btn {
+					border-color: var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+				}
+			}
+		}
+	}
+}
+
+.query-aggregation-error-popover {
+	.ant-popover-inner {
+		background-color: var(--bg-slate-500);
+		border: 1px solid var(--bg-slate-400);
+		border-radius: 4px;
+		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -0,0 +1,83 @@
+import './QueryAggregation.styles.scss';
+
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useMemo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QueryAggregationSelect from './QueryAggregationSelect';
+
+function QueryAggregationOptions({
+	dataSource,
+	panelType,
+	onAggregationIntervalChange,
+	onChange,
+	queryData,
+}: {
+	dataSource: DataSource;
+	panelType?: string;
+	onAggregationIntervalChange: (value: number) => void;
+	onChange?: (value: string) => void;
+	queryData: IBuilderQuery;
+}): JSX.Element {
+	const showAggregationInterval = useMemo(() => {
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
+		if (panelType === PANEL_TYPES.VALUE) {
+			return false;
+		}
+
+		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
+			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
+		}
+
+		return true;
+	}, [dataSource, panelType]);
+
+	const handleAggregationIntervalChange = (value: string): void => {
+		onAggregationIntervalChange(Number(value));
+	};
+
+	return (
+		<div className="query-aggregation-container">
+			<div className="aggregation-container">
+				<QueryAggregationSelect
+					onChange={onChange}
+					queryData={queryData}
+					maxAggregations={
+						panelType === PANEL_TYPES.VALUE || panelType === PANEL_TYPES.PIE
+							? 1
+							: undefined
+					}
+				/>
+
+				{showAggregationInterval && (
+					<div className="query-aggregation-interval">
+						<div className="query-aggregation-interval-label">every</div>
+						<div className="query-aggregation-interval-input-container">
+							<InputWithLabel
+								initialValue={
+									queryData?.stepInterval ? queryData?.stepInterval : undefined
+								}
+								className="query-aggregation-interval-input"
+								label="Seconds"
+								placeholder="Auto"
+								type="number"
+								onChange={handleAggregationIntervalChange}
+								labelAfter
+								onClose={(): void => {}}
+							/>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+QueryAggregationOptions.defaultProps = {
+	panelType: null,
+	onChange: undefined,
+};
+
+export default QueryAggregationOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -0,0 +1,667 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable react/no-this-in-sfc */
+/* eslint-disable sonarjs/cognitive-complexity */
+import './QueryAggregation.styles.scss';
+
+import {
+	autocompletion,
+	closeCompletion,
+	Completion,
+	CompletionContext,
+	completionKeymap,
+	CompletionResult,
+	startCompletion,
+} from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorState, RangeSetBuilder, Transaction } from '@codemirror/state';
+import { Color } from '@signozhq/design-tokens';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+import CodeMirror, {
+	Decoration,
+	EditorView,
+	keymap,
+	ViewPlugin,
+	ViewUpdate,
+} from '@uiw/react-codemirror';
+import { Button, Popover } from 'antd';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
+import { TriangleAlert } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { TracesAggregatorOperator } from 'types/common/queryBuilder';
+
+import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
+
+const chipDecoration = Decoration.mark({
+	class: 'chip-decorator',
+});
+
+const operatorArgMeta: Record<
+	string,
+	{ acceptsArgs: boolean; multiple: boolean }
+> = {
+	[TracesAggregatorOperator.NOOP]: { acceptsArgs: false, multiple: false },
+	[TracesAggregatorOperator.COUNT]: { acceptsArgs: false, multiple: false },
+	[TracesAggregatorOperator.COUNT_DISTINCT]: {
+		acceptsArgs: true,
+		multiple: true,
+	},
+	[TracesAggregatorOperator.SUM]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.AVG]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.MAX]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.MIN]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P05]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P10]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P20]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P25]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P50]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P75]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P90]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P95]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P99]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_SUM]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_AVG]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_MIN]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_MAX]: { acceptsArgs: true, multiple: false },
+};
+
+function getFunctionContextAtCursor(
+	text: string,
+	cursorPos: number,
+): string | null {
+	// Find the nearest function name to the left of the nearest unmatched '('
+	let openParenIndex = -1;
+	let funcName: string | null = null;
+	let parenStack = 0;
+	for (let i = cursorPos - 1; i >= 0; i--) {
+		if (text[i] === ')') parenStack++;
+		else if (text[i] === '(') {
+			if (parenStack === 0) {
+				openParenIndex = i;
+				const before = text.slice(0, i);
+				const match = before.match(/(\w+)\s*$/);
+				if (match) funcName = match[1].toLowerCase();
+				break;
+			}
+			parenStack--;
+		}
+	}
+	if (openParenIndex === -1 || !funcName) return null;
+	// Scan forwards to find the matching closing parenthesis
+	let closeParenIndex = -1;
+	let depth = 1;
+	for (let j = openParenIndex + 1; j < text.length; j++) {
+		if (text[j] === '(') depth++;
+		else if (text[j] === ')') depth--;
+		if (depth === 0) {
+			closeParenIndex = j;
+			break;
+		}
+	}
+	if (
+		cursorPos > openParenIndex &&
+		(closeParenIndex === -1 || cursorPos <= closeParenIndex)
+	) {
+		return funcName;
+	}
+	return null;
+}
+
+// Custom extension to stop events from propagating to global shortcuts
+const stopEventsExtension = EditorView.domEventHandlers({
+	keydown: (event) => {
+		// Stop all keyboard events from propagating to global shortcuts
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+		return false; // Important for CM to know you handled it
+	},
+	input: (event) => {
+		event.stopPropagation();
+		return false;
+	},
+	focus: (event) => {
+		// Ensure focus events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+	blur: (event) => {
+		// Ensure blur events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+});
+
+// eslint-disable-next-line react/no-this-in-sfc
+function QueryAggregationSelect({
+	onChange,
+	queryData,
+	maxAggregations,
+}: {
+	onChange?: (value: string) => void;
+	queryData: IBuilderQuery;
+	maxAggregations?: number;
+}): JSX.Element {
+	const { setAggregationOptions } = useQueryBuilderV2Context();
+
+	const [input, setInput] = useState(
+		queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
+	);
+
+	useEffect(() => {
+		setInput(
+			queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
+		);
+	}, [queryData?.aggregations]);
+
+	const [cursorPos, setCursorPos] = useState(0);
+	const [functionArgPairs, setFunctionArgPairs] = useState<
+		{ func: string; arg: string }[]
+	>([]);
+	const [validationError, setValidationError] = useState<string | null>(null);
+	const editorRef = useRef<EditorView | null>(null);
+	const [isFocused, setIsFocused] = useState(false);
+
+	// Get valid function names (lowercase)
+	const validFunctions = useMemo(
+		() => tracesAggregateOperatorOptions.map((op) => op.value.toLowerCase()),
+		[],
+	);
+
+	// Helper function to safely start completion
+	const safeStartCompletion = useCallback((): void => {
+		requestAnimationFrame(() => {
+			if (editorRef.current) {
+				startCompletion(editorRef.current);
+			}
+		});
+	}, []);
+
+	// Update cursor position on every editor update
+	const handleUpdate = (update: { view: EditorView }): void => {
+		const pos = update.view.state.selection.main.from;
+		setCursorPos(pos);
+	};
+
+	// Effect to handle focus state and trigger suggestions
+	useEffect(() => {
+		if (isFocused) {
+			safeStartCompletion();
+		}
+	}, [isFocused, safeStartCompletion]);
+
+	// Extract all valid function-argument pairs from the input
+	useEffect(() => {
+		const pairs: { func: string; arg: string }[] = [];
+		const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
+		let match;
+		while ((match = regex.exec(input)) !== null) {
+			const func = match[1].toLowerCase();
+			const args = match[2]
+				.split(',')
+				.map((arg) => arg.trim())
+				.filter((arg) => arg.length > 0);
+
+			if (args.length === 0) {
+				// For functions with no arguments, add a pair with empty string as arg
+				pairs.push({ func, arg: '' });
+			} else {
+				args.forEach((arg) => {
+					pairs.push({ func, arg });
+				});
+			}
+		}
+
+		// Validation logic
+		const validateAggregations = (): string | null => {
+			// Check maxAggregations limit
+			if (maxAggregations !== undefined && pairs.length > maxAggregations) {
+				return `Maximum ${maxAggregations} aggregation${
+					maxAggregations === 1 ? '' : 's'
+				} allowed`;
+			}
+
+			// Check for invalid functions
+			const invalidFuncs = pairs.filter(
+				(pair) => !validFunctions.includes(pair.func),
+			);
+			if (invalidFuncs.length > 0) {
+				const funcs = invalidFuncs.map((f) => f.func).join(', ');
+				return `Invalid function${invalidFuncs.length === 1 ? '' : 's'}: ${funcs}`;
+			}
+
+			// Check for incomplete function calls
+			if (/([a-zA-Z_][\w]*)\s*\([^)]*$/g.test(input)) {
+				return 'Incomplete function call - missing closing parenthesis';
+			}
+
+			// Check for empty function calls that require arguments
+			const emptyFuncs = (input.match(/([a-zA-Z_][\w]*)\s*\(\s*\)/g) || [])
+				.map((call) => call.match(/([a-zA-Z_][\w]*)/)?.[1])
+				.filter((func): func is string => Boolean(func))
+				.filter((func) => operatorArgMeta[func.toLowerCase()]?.acceptsArgs);
+
+			if (emptyFuncs.length > 0) {
+				const isPlural = emptyFuncs.length > 1;
+				return `Function${isPlural ? 's' : ''} ${emptyFuncs.join(', ')} require${
+					isPlural ? '' : 's'
+				} arguments`;
+			}
+
+			return null;
+		};
+
+		setValidationError(validateAggregations());
+		setFunctionArgPairs(pairs);
+		setAggregationOptions(pairs);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [input, maxAggregations, validFunctions]);
+
+	// Transaction filter to limit aggregations
+	const transactionFilterExtension = useMemo(() => {
+		if (maxAggregations === undefined) return [];
+
+		return EditorState.transactionFilter.of((tr: Transaction) => {
+			if (!tr.docChanged) return tr;
+
+			const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
+			const oldMatches = [
+				...tr.startState.doc.toString().matchAll(regex),
+			].filter((match) => validFunctions.includes(match[1].toLowerCase()));
+			const newMatches = [
+				...tr.newDoc.toString().matchAll(regex),
+			].filter((match) => validFunctions.includes(match[1].toLowerCase()));
+
+			if (
+				newMatches.length > oldMatches.length &&
+				newMatches.length > maxAggregations
+			) {
+				return []; // Cancel transaction
+			}
+			return tr;
+		});
+	}, [maxAggregations, validFunctions]);
+
+	// Find function context for fetching suggestions
+	const functionContextForFetch = getFunctionContextAtCursor(input, cursorPos);
+
+	const { data: aggregateAttributeData, isLoading: isLoadingFields } = useQuery(
+		[
+			QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
+			functionContextForFetch,
+			queryData.dataSource,
+		],
+		() => {
+			const operatorsWithoutDataType: (string | undefined)[] = [
+				TracesAggregatorOperator.COUNT,
+				TracesAggregatorOperator.COUNT_DISTINCT,
+				TracesAggregatorOperator.RATE,
+			];
+
+			const fieldDataType =
+				functionContextForFetch &&
+				operatorsWithoutDataType.includes(functionContextForFetch)
+					? undefined
+					: 'number';
+
+			return getKeySuggestions({
+				signal: queryData.dataSource,
+				searchText: '',
+				fieldDataType,
+			});
+		},
+		{
+			enabled:
+				!!functionContextForFetch &&
+				!!operatorArgMeta[functionContextForFetch]?.acceptsArgs,
+		},
+	);
+
+	// Memoized chipPlugin that highlights valid function calls like count(), max(arg), min(arg)
+	const chipPlugin = useMemo(
+		() =>
+			ViewPlugin.fromClass(
+				class {
+					decorations: import('@codemirror/view').DecorationSet;
+
+					constructor(view: EditorView) {
+						this.decorations = this.buildDecorations(view);
+					}
+
+					update(update: ViewUpdate): void {
+						if (update.docChanged || update.viewportChanged) {
+							this.decorations = this.buildDecorations(update.view);
+						}
+					}
+
+					buildDecorations(
+						view: EditorView,
+					): import('@codemirror/view').DecorationSet {
+						const builder = new RangeSetBuilder<Decoration>();
+						for (const { from, to } of view.visibleRanges) {
+							const text = view.state.doc.sliceString(from, to);
+
+							const regex = /\b([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
+							let match;
+
+							while ((match = regex.exec(text)) !== null) {
+								const func = match[1].toLowerCase();
+
+								if (validFunctions.includes(func)) {
+									const start = from + match.index;
+									const end = start + match[0].length;
+									builder.add(start, end, chipDecoration);
+								}
+							}
+						}
+						return builder.finish();
+					}
+				},
+				{
+					decorations: (v: any): import('@codemirror/view').DecorationSet =>
+						v.decorations,
+				},
+			),
+		[validFunctions],
+	) as any;
+
+	const operatorCompletions: Completion[] = tracesAggregateOperatorOptions.map(
+		(op) => ({
+			label: op.value,
+			type: 'function',
+			info: op.label,
+			apply: (
+				view: EditorView,
+				completion: Completion,
+				from: number,
+				to: number,
+			): void => {
+				const acceptsArgs = operatorArgMeta[op.value]?.acceptsArgs;
+
+				let insertText: string;
+				let cursorPos: number;
+
+				if (!acceptsArgs) {
+					insertText = `${op.value}() `;
+					cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
+				} else {
+					insertText = `${op.value}(`;
+					cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
+				}
+
+				view.dispatch({
+					changes: { from, to, insert: insertText },
+					selection: { anchor: cursorPos },
+				});
+
+				// Trigger suggestions after a small delay
+				setTimeout(() => {
+					safeStartCompletion();
+				}, 50);
+			},
+		}),
+	);
+
+	// Memoize field suggestions from API (no filtering here)
+	const fieldSuggestions = useMemo(
+		() =>
+			Object.keys(aggregateAttributeData?.data.data.keys || {}).flatMap((key) => {
+				const attributeKeys = aggregateAttributeData?.data.data.keys[key];
+				if (!attributeKeys) return [];
+
+				return attributeKeys.map((attributeKey) => ({
+					label: attributeKey.name,
+					type: 'variable',
+					info: attributeKey.fieldDataType,
+					apply: (
+						view: EditorView,
+						completion: Completion,
+						from: number,
+						to: number,
+					): void => {
+						const text = view.state.sliceDoc(0, from);
+						const funcName = getFunctionContextAtCursor(text, from);
+						const multiple = funcName ? operatorArgMeta[funcName]?.multiple : false;
+
+						// Insert the selected key followed by either a comma or closing parenthesis
+						const insertText = multiple
+							? `${completion.label},`
+							: `${completion.label}) `;
+						const cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
+
+						view.dispatch({
+							changes: { from, to, insert: insertText },
+							selection: { anchor: cursorPos },
+						});
+
+						// Trigger next suggestions after a small delay
+						setTimeout(() => {
+							safeStartCompletion();
+						}, 50);
+					},
+				}));
+			}) || [],
+		[aggregateAttributeData, safeStartCompletion],
+	);
+
+	const aggregatorAutocomplete = useMemo(
+		() =>
+			autocompletion({
+				override: [
+					(context: CompletionContext): CompletionResult | null => {
+						const text = context.state.sliceDoc(0, context.state.doc.length);
+						const cursorPos = context.pos;
+						const funcName = getFunctionContextAtCursor(text, cursorPos);
+
+						// Check if over limit and not editing existing
+						if (maxAggregations !== undefined) {
+							const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
+							const matches = [...text.matchAll(regex)].filter((match) =>
+								validFunctions.includes(match[1].toLowerCase()),
+							);
+							if (matches.length >= maxAggregations) {
+								const isEditing = matches.some((match) => {
+									const start = match.index ?? 0;
+									return cursorPos >= start && cursorPos <= start + match[0].length;
+								});
+								if (!isEditing) return null;
+							}
+						}
+
+						// Do not show suggestions if inside count()
+						if (
+							funcName === TracesAggregatorOperator.COUNT &&
+							cursorPos > 0 &&
+							text[cursorPos - 1] !== ')'
+						) {
+							return null;
+						}
+
+						// If inside a function that accepts args, show field suggestions
+						if (funcName && operatorArgMeta[funcName]?.acceptsArgs) {
+							if (isLoadingFields) {
+								return {
+									from: cursorPos,
+									options: [
+										{
+											label: 'Loading suggestions...',
+											type: 'text',
+											apply: (): void => {},
+										},
+									],
+								};
+							}
+
+							const doc = context.state.sliceDoc(0, cursorPos);
+							const lastOpenParen = doc.lastIndexOf('(');
+							const lastComma = doc.lastIndexOf(',', cursorPos - 1);
+							const startOfArg =
+								lastComma > lastOpenParen ? lastComma + 1 : lastOpenParen + 1;
+							const inputText = doc.slice(startOfArg, cursorPos).trim();
+
+							// Parse arguments already present in the function call (before the cursor)
+							const usedArgs = new Set<string>();
+							if (lastOpenParen !== -1) {
+								const argsString = doc.slice(lastOpenParen + 1, cursorPos);
+								argsString.split(',').forEach((arg) => {
+									const trimmed = arg.trim();
+									if (trimmed) usedArgs.add(trimmed);
+								});
+							}
+
+							// Exclude arguments already paired with this function elsewhere in the input
+							const globalUsedArgs = new Set(
+								functionArgPairs
+									.filter((pair) => pair.func === funcName)
+									.map((pair) => pair.arg),
+							);
+
+							const availableSuggestions = fieldSuggestions.filter(
+								(suggestion) =>
+									!usedArgs.has(suggestion.label) &&
+									!globalUsedArgs.has(suggestion.label),
+							);
+
+							const filteredSuggestions =
+								inputText === ''
+									? availableSuggestions
+									: availableSuggestions.filter((suggestion) =>
+											suggestion.label.toLowerCase().includes(inputText.toLowerCase()),
+									  );
+
+							return {
+								from: startOfArg,
+								options: filteredSuggestions,
+							};
+						}
+
+						// Show operator suggestions if no function context or not accepting args
+						if (!funcName || !operatorArgMeta[funcName]?.acceptsArgs) {
+							// Check if 'count(' is present in the current input (case-insensitive)
+							const hasCount = text.toLowerCase().includes('count(');
+							const availableOperators = hasCount
+								? operatorCompletions.filter((op) => op.label.toLowerCase() !== 'count')
+								: operatorCompletions;
+
+							// Get the word before cursor if any
+							const word = context.matchBefore(/[\w\d_]+/);
+
+							// Show suggestions if:
+							// 1. There's a word match
+							// 2. The input is empty (cursor at start)
+							// 3. The user explicitly triggered completion
+							if (word || cursorPos === 0 || context.explicit) {
+								return {
+									from: word ? word.from : cursorPos,
+									options: availableOperators,
+								};
+							}
+						}
+
+						return null;
+					},
+				],
+				defaultKeymap: true,
+				closeOnBlur: true,
+				maxRenderedOptions: 50,
+				activateOnTyping: true,
+			}),
+		[
+			operatorCompletions,
+			isLoadingFields,
+			fieldSuggestions,
+			functionArgPairs,
+			maxAggregations,
+			validFunctions,
+		],
+	);
+
+	return (
+		<div className="query-aggregation-select-container">
+			<CodeMirror
+				value={input}
+				onChange={(value): void => {
+					setInput(value);
+					onChange?.(value);
+				}}
+				className={`query-aggregation-select-editor ${
+					validationError ? 'error' : ''
+				}`}
+				theme={copilot}
+				extensions={[
+					chipPlugin,
+					aggregatorAutocomplete,
+					transactionFilterExtension,
+					javascript({ jsx: false, typescript: false }),
+					EditorView.lineWrapping,
+					stopEventsExtension,
+					keymap.of([
+						...completionKeymap,
+						{
+							key: 'Escape',
+							run: closeCompletion,
+						},
+					]),
+				]}
+				placeholder={
+					maxAggregations !== undefined
+						? `Type aggregator functions (max ${maxAggregations}) like sum(), count_distinct(...), etc.`
+						: 'Type aggregator functions like sum(), count_distinct(...), etc.'
+				}
+				basicSetup={{
+					lineNumbers: false,
+					autocompletion: true,
+					completionKeymap: true,
+				}}
+				onUpdate={handleUpdate}
+				onCreateEditor={(view: EditorView): void => {
+					editorRef.current = view;
+				}}
+				onFocus={(): void => {
+					setIsFocused(true);
+					safeStartCompletion();
+				}}
+				onBlur={(): void => {
+					setIsFocused(false);
+
+					if (editorRef.current) {
+						closeCompletion(editorRef.current);
+					}
+				}}
+			/>
+			{validationError && (
+				<div className="query-aggregation-error-container">
+					<Popover
+						placement="bottomRight"
+						showArrow={false}
+						content={
+							<div className="query-aggregation-error-content">
+								<div className="query-aggregation-error-message">{validationError}</div>
+							</div>
+						}
+						overlayClassName="query-aggregation-error-popover"
+					>
+						<Button
+							type="text"
+							icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+							className="periscope-btn ghost query-aggregation-error-btn"
+						/>
+					</Popover>
+				</div>
+			)}
+		</div>
+	);
+}
+
+QueryAggregationSelect.defaultProps = {
+	onChange: undefined,
+	maxAggregations: undefined,
+};
+
+export default QueryAggregationSelect;

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -0,0 +1,35 @@
+import { Button } from 'antd';
+import { Plus, Sigma } from 'lucide-react';
+
+export default function QueryFooter({
+	addNewBuilderQuery,
+	addNewFormula,
+}: {
+	addNewBuilderQuery: () => void;
+	addNewFormula: () => void;
+}): JSX.Element {
+	return (
+		<div className="qb-footer">
+			<div className="qb-footer-container">
+				<div className="qb-add-new-query">
+					<Button
+						className="add-new-query-button periscope-btn secondary"
+						type="text"
+						icon={<Plus size={16} />}
+						onClick={addNewBuilderQuery}
+					/>
+				</div>
+
+				<div className="qb-add-formula">
+					<Button
+						className="add-formula-button periscope-btn secondary"
+						icon={<Sigma size={16} />}
+						onClick={addNewFormula}
+					>
+						Add Formula
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -0,0 +1,713 @@
+.code-mirror-where-clause {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', sans-serif;
+
+	.query-where-clause-editor-container {
+		display: flex;
+		flex-direction: row;
+
+		.query-where-clause-editor {
+			flex: 1;
+			min-width: 400px;
+		}
+
+		.query-status-container {
+			width: 32px;
+
+			background-color: #121317 !important;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border: 1px solid var(--bg-slate-200);
+			border-radius: 2px;
+			border-top-left-radius: 0px !important;
+			border-bottom-left-radius: 0px !important;
+			border-left: none !important;
+
+			&.hasErrors {
+				border-color: var(--bg-cherry-500);
+			}
+		}
+	}
+
+	.query-where-clause-editor {
+		&.hasErrors {
+			.cm-editor {
+				.cm-content {
+					border-color: var(--bg-cherry-500);
+					border-top-right-radius: 0px !important;
+					border-bottom-right-radius: 0px !important;
+				}
+			}
+		}
+	}
+
+	.cm-editor {
+		border-radius: 2px;
+		overflow: hidden;
+		background-color: transparent !important;
+
+		&:focus-within {
+			border-color: var(--bg-robin-500);
+		}
+
+		.cm-content {
+			border-radius: 2px;
+			border: 1px solid var(--Slate-400, #1d212d);
+			padding: 0px !important;
+			background-color: #121317 !important;
+
+			&:focus-within {
+				border-color: var(--bg-ink-200);
+			}
+		}
+
+		&.cm-focused {
+			outline: 1px solid var(--bg-slate-200);
+		}
+
+		.cm-tooltip-autocomplete {
+			background: var(--bg-ink-300) !important;
+			border-radius: 2px !important;
+			font-size: 12px !important;
+			font-weight: 500 !important;
+			margin-top: -2px !important;
+			min-width: 400px !important;
+			position: relative !important;
+			top: 0px !important;
+			left: 0px !important;
+
+			border-radius: 4px;
+			border: 0px;
+			background: linear-gradient(
+				139deg,
+				rgba(18, 19, 23, 0.8) 0%,
+				rgba(18, 19, 23, 0.9) 98.68%
+			) !important;
+			backdrop-filter: blur(20px);
+			box-sizing: border-box;
+			font-family: 'Space Mono', monospace !important;
+
+			ul {
+				width: 100% !important;
+				max-width: 100% !important;
+				font-family: 'Space Mono', monospace !important;
+				min-height: 200px !important;
+
+				&::-webkit-scrollbar {
+					width: 0.3rem;
+				}
+				&::-webkit-scrollbar-corner {
+					background: transparent;
+				}
+				&::-webkit-scrollbar-thumb {
+					background: rgb(136, 136, 136);
+					border-radius: 0.625rem;
+				}
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+
+				li {
+					width: 100% !important;
+					max-width: 100% !important;
+					line-height: 36px !important;
+					height: 36px !important;
+					padding: 4px 8px !important;
+
+					display: flex !important;
+					align-items: center !important;
+					gap: 8px !important;
+					box-sizing: border-box;
+					overflow: hidden;
+
+					font-family: 'Space Mono', monospace !important;
+
+					&:hover {
+						background: var(--bg-ink-100) !important;
+					}
+
+					.cm-completionIcon {
+						display: none !important;
+					}
+
+					&[aria-selected='true'] {
+						// background-color: rgba(78, 116, 248, 0.7) !important;
+						background: rgba(171, 189, 255, 0.04) !important;
+					}
+				}
+			}
+		}
+
+		.cm-gutters {
+			display: none !important;
+		}
+
+		.cm-line {
+			line-height: 34px !important;
+			font-family: 'Space Mono', monospace !important;
+			background-color: #121317 !important;
+
+			::-moz-selection {
+				background: var(--bg-ink-100) !important;
+				opacity: 0.5 !important;
+			}
+
+			::selection {
+				background: var(--bg-ink-100) !important;
+				opacity: 0.5 !important;
+			}
+		}
+
+		.cm-selectionBackground {
+			background: var(--bg-ink-100) !important;
+			opacity: 0.5 !important;
+		}
+	}
+
+	.cursor-position {
+		font-size: 12px;
+		color: var(--bg-ink-200);
+		padding: 6px;
+		background-color: var(--bg-vanilla-200);
+		border-radius: 4px;
+		display: inline-flex;
+		align-items: center;
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
+
+	.query-validation {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin-bottom: 8px;
+		margin-top: 16px;
+
+		.valid,
+		.invalid {
+			display: inline-flex;
+			align-items: center;
+			padding: 4px 8px;
+			border-radius: 4px;
+			font-weight: 500;
+			font-size: 12px;
+		}
+
+		.valid {
+			background-color: rgba(39, 174, 96, 0.1);
+			color: #27ae60;
+		}
+
+		.invalid {
+			background-color: rgba(235, 87, 87, 0.1);
+			color: #eb5757;
+		}
+
+		.query-validation-status {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.query-validation-errors {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.query-validation-error {
+				display: flex;
+				flex-direction: row;
+				gap: 16px;
+
+				font-size: 12px;
+				font-family: 'Space Mono', monospace !important;
+				color: var(--bg-cherry-500);
+			}
+		}
+	}
+
+	.query-context {
+		padding: 12px;
+		background-color: var(--bg-ink-400);
+		border-radius: 4px;
+		border-left: 3px solid var(--bg-robin-500);
+		color: var(--bg-ink-300) !important;
+
+		.ant-card-head {
+			color: var(--bg-vanilla-300) !important;
+		}
+
+		.context-details {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 12px;
+
+			p {
+				margin: 0;
+				font-size: 13px;
+
+				strong {
+					color: var(--bg-vanilla-300);
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+
+	.code-mirror-card {
+		.ant-card-body {
+			padding: 8px;
+		}
+	}
+
+	.query-text-preview-title {
+		font-size: 13px;
+		color: var(--bg-vanilla-100);
+		background-color: var(--bg-robin-500);
+		padding: 2px 6px;
+		border-radius: 2px;
+		margin-right: 4px;
+	}
+
+	.query-text-preview {
+		font-family: 'Space Mono', monospace;
+		font-size: 13px;
+		color: var(--bg-vanilla-200);
+		padding: 2px 6px;
+		font-style: italic;
+	}
+
+	.query-examples-card {
+		background-color: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-200);
+
+		.ant-card-body {
+			padding: 0;
+		}
+
+		.query-examples {
+			.ant-collapse-header {
+				padding: 8px 16px !important;
+				color: var(--bg-vanilla-300) !important;
+				font-weight: 500;
+			}
+
+			.ant-collapse-content {
+				background-color: transparent !important;
+			}
+
+			.query-examples-list {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				flex-wrap: wrap;
+			}
+
+			.query-example-tag {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+				padding: 8px 12px;
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-200);
+				border-radius: 4px;
+				cursor: pointer;
+				transition: all 0.2s ease;
+				outline: none;
+
+				&:hover {
+					background-color: var(--bg-ink-300);
+					border-color: var(--bg-robin-500);
+				}
+
+				&:focus-visible {
+					outline: 2px solid var(--bg-robin-500);
+					outline-offset: 2px;
+				}
+
+				.query-example-content {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+				}
+
+				.query-example-label {
+					font-weight: 500;
+					color: var(--bg-vanilla-300);
+					font-size: 13px;
+				}
+
+				.query-example-query {
+					font-family: 'Space Mono', monospace;
+					font-size: 12px;
+					color: var(--bg-vanilla-200);
+					background-color: var(--bg-ink-300);
+					padding: 2px 6px;
+					border-radius: 2px;
+				}
+
+				.query-example-description {
+					font-size: 12px;
+					color: var(--bg-vanilla-200);
+					opacity: 0.8;
+				}
+			}
+
+			.query-example-content {
+				display: inline-flex;
+
+				cursor: pointer;
+			}
+		}
+	}
+
+	// Context indicator styles
+	.context-indicator {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 8px 12px;
+		margin-bottom: 8px;
+		border-radius: 4px;
+		font-size: 13px;
+		background-color: #f5f5f5;
+		border-left: 4px solid #1890ff;
+
+		display: none;
+
+		.triplet-info {
+			margin-left: 16px;
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.query-pair-info {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			border-left: 1px solid rgba(0, 0, 0, 0.1);
+			padding-left: 8px;
+			background-color: rgba(0, 0, 0, 0.03);
+			padding: 4px 8px;
+			border-radius: 4px;
+		}
+
+		// Color variations based on context
+		&.context-indicator-key {
+			border-left-color: #1890ff; // blue
+			background-color: rgba(24, 144, 255, 0.1);
+		}
+
+		&.context-indicator-operator {
+			border-left-color: #722ed1; // purple
+			background-color: rgba(114, 46, 209, 0.1);
+		}
+
+		&.context-indicator-value {
+			border-left-color: #52c41a; // green
+			background-color: rgba(82, 196, 26, 0.1);
+		}
+
+		&.context-indicator-conjunction {
+			border-left-color: #fa8c16; // orange
+			background-color: rgba(250, 140, 22, 0.1);
+		}
+
+		&.context-indicator-function {
+			border-left-color: #13c2c2; // cyan
+			background-color: rgba(19, 194, 194, 0.1);
+		}
+
+		&.context-indicator-parenthesis {
+			border-left-color: #eb2f96; // magenta
+			background-color: rgba(235, 47, 150, 0.1);
+		}
+	}
+}
+
+.query-status-popover {
+	.ant-popover-arrow {
+		display: none !important;
+	}
+
+	.ant-popover-content {
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		margin-top: -6px !important;
+	}
+}
+
+// /* Dark mode support */
+// :global(.darkMode) {
+// 	.code-mirror-where-clause {
+// 		.cm-editor {
+// 			border-color: var(--bg-slate-500);
+// 			background-color: var(--bg-ink-400);
+// 		}
+
+// 		.cursor-position {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+// 		}
+
+// 		.query-context {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+
+// 			h3 {
+// 				color: var(--bg-vanilla-100);
+// 			}
+
+// 			.context-details {
+// 				p {
+// 					strong {
+// 						color: var(--bg-vanilla-200);
+// 					}
+// 				}
+// 			}
+// 		}
+
+// 		.query-examples-card {
+// 			background-color: var(--bg-ink-400);
+// 			border-color: var(--bg-slate-500);
+
+// 			.ant-collapse-header {
+// 				color: var(--bg-vanilla-100) !important;
+// 			}
+
+// 			.query-example-tag {
+// 				background-color: var(--bg-ink-400);
+// 				border-color: var(--bg-slate-500);
+
+// 				&:hover {
+// 					background-color: var(--bg-ink-300);
+// 					border-color: var(--bg-robin-500);
+// 				}
+
+// 				.query-example-label {
+// 					color: var(--bg-vanilla-100);
+// 				}
+
+// 				.query-example-query {
+// 					color: var(--bg-vanilla-100);
+// 					background-color: var(--bg-ink-300);
+// 				}
+
+// 				.query-example-description {
+// 					color: var(--bg-vanilla-100);
+// 				}
+// 			}
+// 		}
+
+// 		.context-indicator {
+// 			background-color: var(--bg-ink-300);
+// 			color: var(--bg-vanilla-100);
+
+// 			.query-pair-info {
+// 				border-left: 1px solid rgba(255, 255, 255, 0.1);
+// 				background-color: rgba(255, 255, 255, 0.05);
+// 			}
+// 		}
+// 	}
+// }
+
+.lightMode {
+	.code-mirror-where-clause {
+		.query-where-clause-editor-container {
+			.query-status-container {
+				background-color: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--bg-vanilla-300);
+
+				&.hasErrors {
+					border-color: var(--bg-cherry-500);
+				}
+			}
+		}
+
+		.query-where-clause-editor {
+			&.hasErrors {
+				.cm-editor {
+					.cm-content {
+						border-color: var(--bg-cherry-500);
+						border-top-right-radius: 0px !important;
+						border-bottom-right-radius: 0px !important;
+					}
+				}
+			}
+		}
+
+		.cm-editor {
+			&:focus-within {
+				border-color: var(--bg-robin-500);
+			}
+
+			&.cm-focused {
+				outline: 1px solid var(--bg-vanilla-300);
+			}
+
+			.cm-content {
+				border-radius: 2px;
+				border: 1px solid var(--bg-vanilla-300);
+				padding: 0px !important;
+				background-color: var(--bg-vanilla-100) !important;
+
+				&:focus-within {
+					border-color: var(--bg-vanilla-200);
+				}
+			}
+
+			.cm-tooltip-autocomplete {
+				background: var(--bg-vanilla-100) !important;
+
+				border: 0px;
+				backdrop-filter: blur(20px);
+
+				ul {
+					li {
+						background-color: var(--bg-vanilla-100) !important;
+						color: var(--bg-ink-300) !important;
+
+						&:hover {
+							background-color: var(--bg-vanilla-200) !important;
+						}
+					}
+				}
+			}
+
+			.cm-line {
+				background-color: var(--bg-vanilla-100) !important;
+
+				::-moz-selection {
+					background: var(--bg-vanilla-100) !important;
+				}
+
+				::selection {
+					background: var(--bg-vanilla-100) !important;
+				}
+			}
+
+			.cm-selectionBackground {
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+
+		.cursor-position {
+			color: var(--bg-vanilla-200);
+			background-color: var(--bg-vanilla-100);
+		}
+
+		.query-context {
+			background-color: var(--bg-vanilla-100);
+			border-left: 3px solid var(--bg-vanilla-300);
+			color: var(--bg-vanilla-300) !important;
+
+			.ant-card-head {
+				color: var(--bg-ink-300) !important;
+			}
+
+			.context-details {
+				p {
+					strong {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.query-examples-card {
+			background-color: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+
+			.query-examples {
+				.ant-collapse-header {
+					color: var(--bg-ink-300) !important;
+				}
+
+				.query-example-tag {
+					background-color: var(--bg-vanilla-100);
+					border: 1px solid var(--bg-vanilla-300);
+
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+						border-color: var(--bg-vanilla-300);
+					}
+
+					.query-example-label {
+						color: var(--bg-ink-300);
+					}
+
+					.query-example-query {
+						color: var(--bg-ink-300);
+						background-color: var(--bg-vanilla-100);
+					}
+
+					.query-example-description {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.context-indicator {
+			background-color: var(--bg-vanilla-100);
+			border-left: 4px solid var(--bg-vanilla-300);
+
+			display: none;
+
+			.query-pair-info {
+				border-left: 1px solid rgba(255, 255, 255, 0.1);
+				background-color: rgba(255, 255, 255, 0.03);
+			}
+
+			// Color variations based on context
+			&.context-indicator-key {
+				border-left-color: #1890ff; // blue
+				background-color: rgba(24, 144, 255, 0.1);
+			}
+
+			&.context-indicator-operator {
+				border-left-color: #722ed1; // purple
+				background-color: rgba(114, 46, 209, 0.1);
+			}
+
+			&.context-indicator-value {
+				border-left-color: #52c41a; // green
+				background-color: rgba(82, 196, 26, 0.1);
+			}
+
+			&.context-indicator-conjunction {
+				border-left-color: #fa8c16; // orange
+				background-color: rgba(250, 140, 22, 0.1);
+			}
+
+			&.context-indicator-function {
+				border-left-color: #13c2c2; // cyan
+				background-color: rgba(19, 194, 194, 0.1);
+			}
+
+			&.context-indicator-parenthesis {
+				border-left-color: #eb2f96; // magenta
+				background-color: rgba(235, 47, 150, 0.1);
+			}
+		}
+	}
+
+	.query-status-popover {
+		.ant-popover-content {
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
+}