feat(dashboards): add the Text panel's Markdown renderer

MarkdownContent renders an authored body. It is panel-local rather than shared
because the shared MarkdownRenderer enables rehype-raw, which is safe only for
the trusted content it was built for; this one never gets it, so raw HTML in a
user-authored body renders as text with no dangerouslySetInnerHTML on the path.
A rejected `javascript:` href drops the anchor rather than rendering
react-markdown's inert stand-in.

Its stylesheet reverts the subtree to user-agent styling so no global rule
reaches the rendered body. Custom properties survive `all`, so theming still
flows in, as does `text-align`, which the panel's presentation options will set
on an ancestor. Injected UI islands opt out through `[data-md-ui]`, matched
inside `:where()` so the exemption adds no specificity of its own.

Fenced blocks highlight with Prism at `useInlineStyles: false`, keeping the
token palette on design tokens, and load their language per fence. Each block
carries the shared periscope copy button, revealed on hover or focus, copying
the source exactly as fenced.

jest.config gains remark-gfm and its ESM-only dependencies; nothing had
exercised the plugin under jest before.

.github/CODEOWNERS

@@ -152,39 +152,29 @@ go.mod @therealpandey
 
 ## Dashboard Types
 
-/frontend/src/api/types/dashboard/ @SigNoz/pulse-frontend
+/frontend/src/types/api/dashboard/ @SigNoz/pulse-frontend
+/frontend/src/types/api/widgets/ @SigNoz/pulse-frontend
 
-## Dashboard List
+## Widget Card
 
-/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
-/frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
-
-# Dashboard Widget Page
-
-/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
-/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
-
-## Dashboard Page
-
-/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
-/frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
-/frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
+/frontend/src/container/WidgetCard/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
-/frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
 
 ## Dashboard Libs + Components
 
 /frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
+/frontend/src/lib/visualization/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
 
-## Dashboard V2
-/frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
-/frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
+## Dashboard Pages
+
+/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
 
 ## Infrastructure Monitoring
 /frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend

.github/workflows/build-enterprise.yaml

@@ -103,7 +103,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
-        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./cmd/enterprise/Dockerfile.multi-arch

.github/workflows/build-staging.yaml

@@ -109,7 +109,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.staging.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.staging.signoz.cloud
-        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.staging.signoz.cloud/api/v1
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./cmd/enterprise/Dockerfile.multi-arch

.github/workflows/integrationci.yaml

@@ -50,6 +50,7 @@ jobs:
           - logspipelines
           - passwordauthn
           - preference
+          - quickfilter
           - querierlogs
           - queriertraces
           - queriermetrics
@@ -58,6 +59,7 @@ jobs:
           - querierai
           - rawexportdata
           - promqlconformance
+          - promapiconformance
           - querierauthz
           - role
           - rootuser

cmd/authz.go

@@ -96,6 +96,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
 		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,

cmd/community/server.go

@@ -44,8 +44,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/subscription"
+	"github.com/SigNoz/signoz/pkg/subscription/noopsubscription"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -86,6 +89,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ zeus.Zeus, _ organization.Getter, _ analytics.Analytics) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
 			return nooplicensing.NewFactory()
 		},
+		func(_ zeus.Zeus, _ licensing.Licensing) subscription.Subscription {
+			return noopsubscription.New()
+		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
 		signoz.NewWebProviderFactories(config.Global),
@@ -103,8 +109,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module) dashboard.Module {
-			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()

cmd/enterprise/.goreleaser.yaml

@@ -31,7 +31,6 @@ builds:
       - -X github.com/SigNoz/signoz/pkg/version.branch={{ .Branch }}
       - -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
       - -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
-      - -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
       - -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr
     mod_timestamp: "{{ .CommitTimestamp }}"
     tags:

cmd/enterprise/server.go

@@ -28,6 +28,7 @@ import (
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
+	"github.com/SigNoz/signoz/ee/subscription/httpsubscription"
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
@@ -60,9 +61,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/subscription"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -102,6 +105,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		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)
 		},
+		func(zeus zeus.Zeus, licensing licensing.Licensing) subscription.Subscription {
+			return httpsubscription.New(zeus, licensing)
+		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
 		signoz.NewWebProviderFactories(config.Global),
@@ -136,8 +142,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule, systemDashboardRegistry)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)

docs/contributing/prometheus.md

@@ -299,8 +299,11 @@ substituted. One subtlety makes it exact: we write stale markers at absent
 grid points. Without them, the engine's lookback would resurrect a point
 from up to `lookback` earlier. The marker encodes "absent here" the way the
 engine itself encodes it. Units evaluate concurrently. Each unit is one
-series lookup plus one grid statement. A step of 0 is an instant query: a
-single evaluation at `end`.
+grid statement: the group-key join resolves the matchers, and the samples
+primary key takes the metric name straight from the selector. Only a
+selector without a static `__name__` runs the series lookup first, to learn
+the concrete metric names. A step of 0 is an instant query: a single
+evaluation at `end`.
 
 A note on the window sliver: when the window is narrower than the step, the
 grid windows cover only `window/step` of the timeline. A sample in a gap
@@ -315,8 +318,9 @@ selectors and `last_over_time` transpile at window < step too.
 
 ## Series lookup
 
-Both paths resolve matchers the same way, once per selector
-(`selectSeries`). The series tables hold one row per (fingerprint, bucket)
+The engine path resolves matchers once per selector (`selectSeries`); the
+transpiled path builds the same conditions into its group-key join. Both
+read the same tables. The series tables hold one row per (fingerprint, bucket)
 at 1h/6h/1d/1w granularities. The shared schema package
 (`pkg/telemetryschema/metricstelemetryschema`) picks the table whose bucket
 fits the window. It rounds the window start down to the bucket boundary, so

ee/gateway/httpgateway/provider.go

@@ -108,6 +108,20 @@ func (provider *Provider) SearchIngestionKeysByName(ctx context.Context, orgID v
 	}, nil
 }
 
+func (provider *Provider) GetIngestionKey(ctx context.Context, orgID valuer.UUID, keyID string) (*gatewaytypes.IngestionKey, error) {
+	responseBody, err := provider.do(ctx, orgID, http.MethodGet, "/v1/workspaces/me/keys/"+keyID, nil, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	var ingestionKey gatewaytypes.IngestionKey
+	if err := json.Unmarshal([]byte(gjson.GetBytes(responseBody, "data").String()), &ingestionKey); err != nil {
+		return nil, err
+	}
+
+	return &ingestionKey, nil
+}
+
 func (provider *Provider) CreateIngestionKey(ctx context.Context, orgID valuer.UUID, name string, tags []string, expiresAt time.Time) (*gatewaytypes.GettableCreatedIngestionKey, error) {
 	requestBody := gatewaytypes.PostableIngestionKey{
 		Name:      name,
@@ -161,7 +175,7 @@ func (provider *Provider) DeleteIngestionKey(ctx context.Context, orgID valuer.U
 }
 
 func (provider *Provider) CreateIngestionKeyLimit(ctx context.Context, orgID valuer.UUID, keyID string, signal string, limitConfig gatewaytypes.LimitConfig, tags []string) (*gatewaytypes.GettableCreatedIngestionKeyLimit, error) {
-	requestBody := gatewaytypes.PostableIngestionKeyLimit{
+	requestBody := gatewaytypes.DeprecatedPostableIngestionKeyLimit{
 		Signal: signal,
 		Config: limitConfig,
 		Tags:   tags,
@@ -184,6 +198,34 @@ func (provider *Provider) CreateIngestionKeyLimit(ctx context.Context, orgID val
 	return &createdIngestionKeyLimitResponse, nil
 }
 
+func (provider *Provider) GetIngestionKeyLimit(ctx context.Context, orgID valuer.UUID, limitID string) (*gatewaytypes.Limit, error) {
+	responseBody, err := provider.do(ctx, orgID, http.MethodGet, "/v1/workspaces/me/limits/"+limitID, nil, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	var limit gatewaytypes.Limit
+	if err := json.Unmarshal([]byte(gjson.GetBytes(responseBody, "data").String()), &limit); err != nil {
+		return nil, err
+	}
+
+	return &limit, nil
+}
+
+func (provider *Provider) GetIngestionKeyLimits(ctx context.Context, orgID valuer.UUID, keyID string) ([]gatewaytypes.Limit, error) {
+	responseBody, err := provider.do(ctx, orgID, http.MethodGet, "/v1/workspaces/me/keys/"+keyID+"/limits", nil, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	var limits []gatewaytypes.Limit
+	if err := json.Unmarshal([]byte(gjson.GetBytes(responseBody, "data").String()), &limits); err != nil {
+		return nil, err
+	}
+
+	return limits, nil
+}
+
 func (provider *Provider) UpdateIngestionKeyLimit(ctx context.Context, orgID valuer.UUID, limitID string, limitConfig gatewaytypes.LimitConfig, tags []string) error {
 	requestBody := gatewaytypes.UpdatableIngestionKeyLimit{
 		Config: limitConfig,

ee/licensing/httplicensing/api.go

@@ -22,89 +22,6 @@ func NewLicensingAPI(licensing licensing.Licensing) licensing.API {
 	return &licensingAPI{licensing: licensing}
 }
 
-func (api *licensingAPI) Activate(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	req := new(licensetypes.PostableLicense)
-	err = json.NewDecoder(r.Body).Decode(&req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	err = api.licensing.Activate(r.Context(), orgID, req.Key)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusAccepted, nil)
-}
-
-func (api *licensingAPI) GetActive(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	license, err := api.licensing.GetActive(r.Context(), orgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	gettableLicense := licensetypes.NewGettableLicense(license.Data, license.Key)
-	render.Success(rw, http.StatusOK, gettableLicense)
-}
-
-func (api *licensingAPI) Refresh(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	err = api.licensing.Refresh(r.Context(), orgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusNoContent, nil)
-}
-
 func (api *licensingAPI) Checkout(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()

ee/licensing/httplicensing/provider.go

@@ -95,24 +95,65 @@ func (provider *provider) Validate(ctx context.Context) error {
 	return nil
 }
 
-func (provider *provider) Activate(ctx context.Context, organizationID valuer.UUID, key string) error {
-	data, err := provider.zeus.GetLicense(ctx, key)
+func (provider *provider) Activate(ctx context.Context, organizationID valuer.UUID, key string) (*licensetypes.License, error) {
+	zeusLicense, err := provider.zeus.GetLicense(ctx, key)
 	if err != nil {
-		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "unable to fetch license data with upstream server")
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "unable to fetch license data with upstream server")
 	}
 
-	license, err := licensetypes.NewLicense(data, organizationID)
+	license, err := licensetypes.NewLicense(zeusLicense, organizationID)
 	if err != nil {
-		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create license entity")
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create license entity")
 	}
 
 	storableLicense := licensetypes.NewStorableLicenseFromLicense(license)
 	err = provider.store.Create(ctx, storableLicense)
+	if err != nil {
+		return nil, err
+	}
+
+	return license, nil
+}
+
+func (provider *provider) Get(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) (*licensetypes.License, error) {
+	storableLicense, err := provider.store.Get(ctx, organizationID, licenseID)
+	if err != nil {
+		return nil, err
+	}
+
+	return licensetypes.NewLicenseFromStorableLicense(storableLicense)
+}
+
+func (provider *provider) List(ctx context.Context, organizationID valuer.UUID) ([]*licensetypes.License, error) {
+	storableLicenses, err := provider.store.GetAll(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	licenses := make([]*licensetypes.License, 0, len(storableLicenses))
+	for _, storableLicense := range storableLicenses {
+		license, err := licensetypes.NewLicenseFromStorableLicense(storableLicense)
+		if err != nil {
+			return nil, err
+		}
+
+		licenses = append(licenses, license)
+	}
+
+	return licenses, nil
+}
+
+func (provider *provider) Delete(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) error {
+	license, err := provider.Get(ctx, organizationID, licenseID)
 	if err != nil {
 		return err
 	}
 
-	return nil
+	if err := license.ErrIfCloud(); err != nil {
+		return errors.WithAdditionalf(err, "license %s cannot be deleted", licenseID.StringValue())
+	}
+
+	return provider.store.Delete(ctx, organizationID, licenseID)
 }
 
 func (provider *provider) GetActive(ctx context.Context, organizationID valuer.UUID) (*licensetypes.License, error) {
@@ -139,7 +180,7 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 		return err
 	}
 
-	data, err := provider.zeus.GetLicense(ctx, activeLicense.Key)
+	zeusLicense, err := provider.zeus.GetLicense(ctx, activeLicense.Key)
 	if err != nil {
 		if time.Since(activeLicense.LastValidatedAt) > time.Duration(provider.config.FailureThreshold)*provider.config.PollInterval {
 			activeLicense.UpdateFeatures(licensetypes.BasicPlan)
@@ -154,7 +195,7 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 		return err
 	}
 
-	err = activeLicense.Update(data)
+	err = activeLicense.Update(zeusLicense)
 	if err != nil {
 		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create license entity from license data")
 	}

ee/licensing/licensingstore/sqllicensingstore/store.go

@@ -64,6 +64,22 @@ func (store *store) GetAll(ctx context.Context, organizationID valuer.UUID) ([]*
 	return storableLicenses, nil
 }
 
+func (store *store) Delete(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) error {
+	_, err := store.
+		sqlstore.
+		BunDB().
+		NewDelete().
+		Model(new(licensetypes.StorableLicense)).
+		Where("org_id = ?", organizationID).
+		Where("id = ?", licenseID).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "unable to delete license with ID: %s", licenseID)
+	}
+
+	return nil
+}
+
 func (store *store) Update(ctx context.Context, organizationID valuer.UUID, storableLicense *licensetypes.StorableLicense) error {
 	_, err := store.
 		sqlstore.

ee/modules/dashboard/impldashboard/module.go

@@ -32,9 +32,9 @@ type module struct {
 	tagModule          tag.Module
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
+func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
-	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule)
+	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
 
 	return &module{
 		pkgDashboardModule: pkgDashboardModule,
@@ -361,6 +361,14 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
 
+func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID valuer.UUID) error {
+	return module.pkgDashboardModule.ReconcileSystemDashboards(ctx, orgID)
+}
+
+func (module *module) GetSystemDashboard(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.GetSystemDashboard(ctx, orgID, name)
+}
+
 func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
 	return module.store.RunInTx(ctx, func(ctx context.Context) error {
 		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {

ee/query-service/app/api/api.go

@@ -76,11 +76,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.LicensingAPI.Portal)).Methods(http.MethodPost)
 
-	// v3
-	router.HandleFunc("/api/v3/licenses", am.AdminAccess(ah.LicensingAPI.Activate)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v3/licenses", am.AdminAccess(ah.LicensingAPI.Refresh)).Methods(http.MethodPut)
-	router.HandleFunc("/api/v3/licenses/active", am.ViewAccess(ah.LicensingAPI.GetActive)).Methods(http.MethodGet)
-
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 

ee/query-service/app/api/license.go

@@ -5,12 +5,7 @@ import (
 	"fmt"
 	"net/http"
 
-	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/ee/query-service/model"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type DayWiseBreakdown struct {
@@ -57,11 +52,6 @@ type billingData struct {
 	SubscriptionStatus string  `json:"subscriptionStatus"`
 }
 
-type billingDetails struct {
-	Status string      `json:"status"`
-	Data   billingData `json:"data"`
-}
-
 func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
 	licenseKey := r.URL.Query().Get("licenseKey")
 
@@ -70,53 +60,17 @@ func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	claims, err := authtypes.ClaimsFromContext(r.Context())
+	data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
 	if err != nil {
 		RespondError(w, model.InternalError(err), nil)
 		return
 	}
 
-	orgID := valuer.MustNewUUID(claims.OrgID)
-	evalCtx := featuretypes.NewFlaggerEvaluationContext(orgID)
-	useZeus := ah.Signoz.Flagger.BooleanOrEmpty(r.Context(), flagger.FeatureGetMetersFromZeus, evalCtx)
-
-	if useZeus {
-		data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
-		if err != nil {
-			RespondError(w, model.InternalError(err), nil)
-			return
-		}
-
-		var billing billingData
-		if err := json.Unmarshal(data, &billing); err != nil {
-			RespondError(w, model.InternalError(err), nil)
-			return
-		}
-
-		ah.Respond(w, billing)
-		return
-	}
-
-	billingURL := fmt.Sprintf("%s/usage?licenseKey=%s", constants.LicenseSignozIo, licenseKey)
-
-	hClient := &http.Client{}
-	req, err := http.NewRequest("GET", billingURL, nil)
-	if err != nil {
-		RespondError(w, model.InternalError(err), nil)
-		return
-	}
-	req.Header.Add("X-SigNoz-SecretKey", constants.LicenseAPIKey)
-	billingResp, err := hClient.Do(req)
-	if err != nil {
+	var billing billingData
+	if err := json.Unmarshal(data, &billing); err != nil {
 		RespondError(w, model.InternalError(err), nil)
 		return
 	}
 
-	var billingResponse billingDetails
-	if err := json.NewDecoder(billingResp.Body).Decode(&billingResponse); err != nil {
-		RespondError(w, model.InternalError(err), nil)
-		return
-	}
-
-	ah.Respond(w, billingResponse.Data)
+	ah.Respond(w, billing)
 }

ee/query-service/constants/constants.go

@@ -4,8 +4,6 @@ import (
 	"os"
 )
 
-var LicenseSignozIo = "https://license.signoz.io/api/v1"
-var LicenseAPIKey = GetOrDefaultEnv("SIGNOZ_LICENSE_API_KEY", "")
 var SaasSegmentKey = GetOrDefaultEnv("SIGNOZ_SAAS_SEGMENT_KEY", "")
 var FetchFeatures = GetOrDefaultEnv("FETCH_FEATURES", "false")
 var ZeusFeaturesURL = GetOrDefaultEnv("ZEUS_FEATURES_URL", "ZeusFeaturesURL")

ee/subscription/httpsubscription/provider.go

@@ -0,0 +1,95 @@
+package httpsubscription
+
+import (
+	"context"
+	"encoding/json"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/subscription"
+	"github.com/SigNoz/signoz/pkg/types/subscriptiontypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/SigNoz/signoz/pkg/zeus"
+	"github.com/tidwall/gjson"
+)
+
+const upstreamTimeout = 10 * time.Second
+
+type provider struct {
+	zeus      zeus.Zeus
+	licensing licensing.Licensing
+}
+
+func New(zeus zeus.Zeus, licensing licensing.Licensing) subscription.Subscription {
+	return &provider{
+		zeus:      zeus,
+		licensing: licensing,
+	}
+}
+
+func (provider *provider) Create(ctx context.Context, organizationID valuer.UUID, postableSubscription *subscriptiontypes.PostableSubscription) (*subscriptiontypes.GettableSubscription, error) {
+	ctx, cancel := context.WithTimeout(ctx, upstreamTimeout)
+	defer cancel()
+
+	license, err := provider.licensing.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := json.Marshal(postableSubscription)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal subscription payload")
+	}
+
+	response, err := provider.zeus.GetCheckoutURL(ctx, license.Key, body)
+	if err != nil {
+		if errors.Ast(err, errors.TypeAlreadyExists) {
+			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
+		}
+		return nil, err
+	}
+
+	return &subscriptiontypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
+}
+
+func (provider *provider) Update(ctx context.Context, organizationID valuer.UUID, postableSubscription *subscriptiontypes.PostableSubscription) (*subscriptiontypes.GettableSubscription, error) {
+	ctx, cancel := context.WithTimeout(ctx, upstreamTimeout)
+	defer cancel()
+
+	license, err := provider.licensing.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := json.Marshal(postableSubscription)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal subscription payload")
+	}
+
+	response, err := provider.zeus.GetPortalURL(ctx, license.Key, body)
+	if err != nil {
+		return nil, err
+	}
+
+	return &subscriptiontypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
+}
+
+func (provider *provider) Get(ctx context.Context, organizationID valuer.UUID) (*subscriptiontypes.GettableSubscriptionUsage, error) {
+	license, err := provider.licensing.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	data, err := provider.zeus.GetMeters(ctx, license.Key)
+	if err != nil {
+		return nil, err
+	}
+
+	usage, err := subscriptiontypes.NewGettableSubscriptionUsage(data)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, zeus.ErrCodeResponseMalformed, "failed to unmarshal subscription usage")
+	}
+
+	return usage, nil
+}

ee/zeus/httpzeus/provider.go

@@ -51,7 +51,7 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 	}, nil
 }
 
-func (provider *Provider) GetLicense(ctx context.Context, key string) ([]byte, error) {
+func (provider *Provider) GetLicense(ctx context.Context, key string) (*zeustypes.License, error) {
 	response, err := provider.do(
 		ctx,
 		provider.config.URL.JoinPath("/v2/licenses/me"),
@@ -63,7 +63,12 @@ func (provider *Provider) GetLicense(ctx context.Context, key string) ([]byte, e
 		return nil, err
 	}
 
-	return []byte(gjson.GetBytes(response, "data").String()), nil
+	license := new(zeustypes.License)
+	if err := json.Unmarshal([]byte(gjson.GetBytes(response, "data").String()), license); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, zeus.ErrCodeResponseMalformed, "failed to unmarshal license data")
+	}
+
+	return license, nil
 }
 
 func (provider *Provider) GetCheckoutURL(ctx context.Context, key string, body []byte) ([]byte, error) {

frontend/.oxlintrc.json

@@ -323,9 +323,10 @@
             "name": "react",
             "importNames": [
               "createContext",
-              "useContext"
+              "useContext",
+              "useSyncExternalStore"
             ],
-            "message": "[State mgmt] React Context is deprecated. Migrate shared state to Zustand."
+            "message": "[State mgmt] React Context and hand-rolled external stores are deprecated. Migrate shared state to Zustand."
           },
           {
             "name": "immer",
@@ -565,12 +566,12 @@
       }
     },
     {
-      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
+      // Root dashboard pages own the fetch lifecycle; useDashboardFetchRequired wraps it.
       // Everywhere else must use useDashboardFetchRequired().
       "files": [
-        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
-        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
-        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
+        "src/pages/DashboardPage/DashboardPage.tsx",
+        "src/pages/DashboardPage/PanelEditorPage/PanelEditorPage.tsx",
+        "src/pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired.ts"
       ],
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"

frontend/jest.config.ts

@@ -56,10 +56,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
+		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

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

@@ -26,6 +26,75 @@
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
   "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
   "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
+  "field_jira_site": "Site URL",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
+  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
+  "jira_required_fields": "Site URL, email, API token, project and issue type are required",
+  "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
+  "jira_service_account_tip_link": "Learn how",
+  "field_jira_email": "Email",
+  "help_jira_email": "The Atlassian account email used for authentication.",
+  "field_jira_api_token": "API token",
+  "help_jira_api_token": "Create one at id.atlassian.com under Security → API tokens.",
+  "field_jira_project": "Project key",
+  "field_jira_issue_type": "Issue type",
+  "help_jira_issue_type": "An issue type that exists in the project, e.g. Task, Bug or Incident.",
+  "field_jira_summary": "Summary (issue title)",
+  "help_jira_summary": "Template for the Jira issue title.",
+  "field_jira_description": "Description",
+  "help_jira_description": "Template for the issue description. Rendered as rich text with a status panel and links back to SigNoz.",
+  "jira_advanced_section": "Advanced Options",
+  "field_jira_priority": "Priority",
+  "placeholder_jira_priority": "Leave empty to use the project default",
+  "help_jira_priority": "Must match a priority in the project's scheme, e.g. High.",
+  "field_jira_labels": "Labels",
+  "placeholder_jira_labels": "Type a label and press Enter",
+  "help_jira_labels": "signoz and a deduplication label are added automatically.",
+  "field_jira_resolve_transition": "Resolve transition",
+  "field_jira_reopen_transition": "Reopen transition",
+  "help_jira_resolve_transition": "When the alert resolves, SigNoz moves the Jira issue to a \"Done\" status via a workflow transition. This is auto-detected — leave it empty unless your project has more than one \"Done\" transition (e.g. Done vs. Won't Do) and you want to force a specific one by name.",
+  "help_jira_reopen_transition": "When a resolved alert fires again (within the reopen window), SigNoz moves the issue back out of \"Done\" to an active status via a workflow transition. This is auto-detected — leave it empty unless you want to force a specific one by name (e.g. To Do or Reopen).",
+  "placeholder_jira_resolve_transition": "Auto-detected, e.g. Done",
+  "placeholder_jira_reopen_transition": "Auto-detected, e.g. To Do",
+  "field_jira_wont_fix_resolution": "Won't-fix resolution",
+  "help_jira_wont_fix_resolution": "If the issue was resolved with this resolution (e.g. Won't Do), SigNoz won't reopen it when the alert fires again; a new issue is created instead. Leave empty to always reopen.",
+  "placeholder_jira_wont_fix_resolution": "e.g. Won't Do",
+  "field_jira_reopen_duration": "Reopen window",
+  "placeholder_jira_reopen_duration": "e.g. 72h",
+  "help_jira_reopen_duration": "If a resolved alert fires again within this window, the same ticket is reopened; after the window, a re-fire opens a new ticket instead. Default: 3d.",
+  "tooltip_jira_reopen_duration": "Accepted units: m (minutes), h (hours), d (days), w (weeks), y (years) — e.g. 30m, 72h or 3d. Minimum 1m.",
+  "jira_reopen_duration_invalid": "Reopen window must be a duration like 30m, 72h or 3d (minimum 1m)",
+  "jsmops_tip": "Create an API integration on your JSM team's Operations page and paste its key below.",
+  "jsmops_tip_link": "Learn how",
+  "field_jsmops_api_key": "API key",
+  "help_jsmops_api_key": "The JSM Ops integration API key, from your team's Operations → Integrations → API. Make sure the integration is turned on.",
+  "field_jsmops_message": "Message (alert title)",
+  "help_jsmops_message": "Template for the alert title. Truncated to 130 characters.",
+  "field_jsmops_description": "Description",
+  "help_jsmops_description": "Template for the alert description. Rendered as rich text; kept under 15,000 characters.",
+  "jsmops_advanced_section": "Advanced Options",
+  "field_jsmops_priority": "Priority",
+  "help_jsmops_priority": "Template resolving to one of P1–P5. Leave as-is to map from alert severity.",
+  "field_jsmops_tags": "Tags",
+  "placeholder_jsmops_tags": "Type a tag and press Enter",
+  "help_jsmops_tags": "Tags added to every alert.",
+  "incidentio_tip": "Create an HTTP alert source in incident.io (On-call \u2192 Alert routing \u2192 Sources) and paste its URL and token below.",
+  "incidentio_tip_link": "Learn how",
+  "field_incidentio_url": "Alert source URL",
+  "help_incidentio_url": "The alert events URL from the source's setup page, e.g. https://api.incident.io/v2/alert_events/http/<source_config_id>.",
+  "field_incidentio_token": "Token",
+  "help_incidentio_token": "The alert source's secret token, from the same setup page.",
+  "field_incidentio_title": "Title",
+  "help_incidentio_title": "Template for the alert title. Kept stable while the alert fires \u2014 incident.io ignores content updates on repeat events.",
+  "field_incidentio_description": "Description",
+  "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
+  "incidentio_required_fields": "Alert source URL and token are required",
+  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
+  "field_incidentio_metadata": "Additional metadata",
+  "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
+  "placeholder_incidentio_metadata_key": "Key",
+  "placeholder_incidentio_metadata_value": "Value",
+  "button_incidentio_add_metadata": "Add metadata",
 
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",

frontend/public/locales/en/channels.json

@@ -26,6 +26,75 @@
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
   "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
   "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
+  "field_jira_site": "Site URL",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
+  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
+  "jira_required_fields": "Site URL, email, API token, project and issue type are required",
+  "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
+  "jira_service_account_tip_link": "Learn how",
+  "field_jira_email": "Email",
+  "help_jira_email": "The Atlassian account email used for authentication.",
+  "field_jira_api_token": "API token",
+  "help_jira_api_token": "Create one at id.atlassian.com under Security → API tokens.",
+  "field_jira_project": "Project key",
+  "field_jira_issue_type": "Issue type",
+  "help_jira_issue_type": "An issue type that exists in the project, e.g. Task, Bug or Incident.",
+  "field_jira_summary": "Summary (issue title)",
+  "help_jira_summary": "Template for the Jira issue title.",
+  "field_jira_description": "Description",
+  "help_jira_description": "Template for the issue description. Rendered as rich text with a status panel and links back to SigNoz.",
+  "jira_advanced_section": "Advanced Options",
+  "field_jira_priority": "Priority",
+  "placeholder_jira_priority": "Leave empty to use the project default",
+  "help_jira_priority": "Must match a priority in the project's scheme, e.g. High.",
+  "field_jira_labels": "Labels",
+  "placeholder_jira_labels": "Type a label and press Enter",
+  "help_jira_labels": "signoz and a deduplication label are added automatically.",
+  "field_jira_resolve_transition": "Resolve transition",
+  "field_jira_reopen_transition": "Reopen transition",
+  "help_jira_resolve_transition": "When the alert resolves, SigNoz moves the Jira issue to a \"Done\" status via a workflow transition. This is auto-detected — leave it empty unless your project has more than one \"Done\" transition (e.g. Done vs. Won't Do) and you want to force a specific one by name.",
+  "help_jira_reopen_transition": "When a resolved alert fires again (within the reopen window), SigNoz moves the issue back out of \"Done\" to an active status via a workflow transition. This is auto-detected — leave it empty unless you want to force a specific one by name (e.g. To Do or Reopen).",
+  "placeholder_jira_resolve_transition": "Auto-detected, e.g. Done",
+  "placeholder_jira_reopen_transition": "Auto-detected, e.g. To Do",
+  "field_jira_wont_fix_resolution": "Won't-fix resolution",
+  "help_jira_wont_fix_resolution": "If the issue was resolved with this resolution (e.g. Won't Do), SigNoz won't reopen it when the alert fires again; a new issue is created instead. Leave empty to always reopen.",
+  "placeholder_jira_wont_fix_resolution": "e.g. Won't Do",
+  "field_jira_reopen_duration": "Reopen window",
+  "placeholder_jira_reopen_duration": "e.g. 72h",
+  "help_jira_reopen_duration": "If a resolved alert fires again within this window, the same ticket is reopened; after the window, a re-fire opens a new ticket instead. Default: 3d.",
+  "tooltip_jira_reopen_duration": "Accepted units: m (minutes), h (hours), d (days), w (weeks), y (years) — e.g. 30m, 72h or 3d. Minimum 1m.",
+  "jira_reopen_duration_invalid": "Reopen window must be a duration like 30m, 72h or 3d (minimum 1m)",
+  "jsmops_tip": "Create an API integration on your JSM team's Operations page and paste its key below.",
+  "jsmops_tip_link": "Learn how",
+  "field_jsmops_api_key": "API key",
+  "help_jsmops_api_key": "The JSM Ops integration API key, from your team's Operations → Integrations → API. Make sure the integration is turned on.",
+  "field_jsmops_message": "Message (alert title)",
+  "help_jsmops_message": "Template for the alert title. Truncated to 130 characters.",
+  "field_jsmops_description": "Description",
+  "help_jsmops_description": "Template for the alert description. Rendered as rich text; kept under 15,000 characters.",
+  "jsmops_advanced_section": "Advanced Options",
+  "field_jsmops_priority": "Priority",
+  "help_jsmops_priority": "Template resolving to one of P1–P5. Leave as-is to map from alert severity.",
+  "field_jsmops_tags": "Tags",
+  "placeholder_jsmops_tags": "Type a tag and press Enter",
+  "help_jsmops_tags": "Tags added to every alert.",
+  "incidentio_tip": "Create an HTTP alert source in incident.io (On-call \u2192 Alert routing \u2192 Sources) and paste its URL and token below.",
+  "incidentio_tip_link": "Learn how",
+  "field_incidentio_url": "Alert source URL",
+  "help_incidentio_url": "The alert events URL from the source's setup page, e.g. https://api.incident.io/v2/alert_events/http/<source_config_id>.",
+  "field_incidentio_token": "Token",
+  "help_incidentio_token": "The alert source's secret token, from the same setup page.",
+  "field_incidentio_title": "Title",
+  "help_incidentio_title": "Template for the alert title. Kept stable while the alert fires \u2014 incident.io ignores content updates on repeat events.",
+  "field_incidentio_description": "Description",
+  "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
+  "incidentio_required_fields": "Alert source URL and token are required",
+  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
+  "field_incidentio_metadata": "Additional metadata",
+  "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
+  "placeholder_incidentio_metadata_key": "Key",
+  "placeholder_incidentio_metadata_value": "Value",
+  "button_incidentio_add_metadata": "Add metadata",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -103,30 +103,30 @@ function createMockLicense(
 	overrides: Partial<LicenseResModel> = {},
 ): LicenseResModel {
 	return {
-		key: 'test-key',
-		event_queue: {
-			created_at: '0',
+		id: 'test-license-id',
+		eventQueue: {
+			createdAt: '0',
 			event: LicenseEvent.NO_EVENT,
-			scheduled_at: '0',
+			scheduledAt: '0',
 			status: '',
-			updated_at: '0',
+			updatedAt: '0',
 		},
 		state: LicenseState.ACTIVATED,
 		status: LicenseStatus.VALID,
 		platform: LicensePlatform.CLOUD,
-		created_at: '0',
+		createdAt: '0',
 		plan: {
-			created_at: '0',
+			id: '0',
+			createdAt: '0',
 			description: '',
-			is_active: true,
+			isActive: true,
 			name: '',
-			updated_at: '0',
+			updatedAt: '0',
 		},
-		plan_id: '0',
-		free_until: '0',
-		updated_at: '0',
-		valid_from: 0,
-		valid_until: 0,
+		freeUntil: '0',
+		updatedAt: '0',
+		validFrom: 0,
+		validUntil: 0,
 		...overrides,
 	};
 }
@@ -850,6 +850,22 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});
 
+		it('should keep a custom role (ANONYMOUS) on workspace locked instead of bouncing to unauthorized', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.WORKSPACE_LOCKED,
+				appContext: {
+					isLoggedIn: true,
+					isFetchingActiveLicense: false,
+					activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD }),
+					trialInfo: createMockTrialInfo({ workSpaceBlock: true }),
+					user: createMockUser({ role: USER_ROLES.ANONYMOUS as ROLES }),
+				},
+				isCloudUser: true,
+			});
+
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
+		});
+
 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1024,6 +1040,24 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
+		it('should keep a custom role (ANONYMOUS) on workspace suspended instead of bouncing to unauthorized', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.WORKSPACE_SUSPENDED,
+				appContext: {
+					isLoggedIn: true,
+					isFetchingActiveLicense: false,
+					activeLicense: createMockLicense({
+						platform: LicensePlatform.CLOUD,
+						state: LicenseState.DEFAULTED,
+					}),
+					user: createMockUser({ role: USER_ROLES.ANONYMOUS as ROLES }),
+				},
+				isCloudUser: true,
+			});
+
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
+		});
+
 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1580,6 +1614,18 @@ describe('PrivateRoute', () => {
 				path: ROUTES.SUPPORT,
 				deniedRoles: [USER_ROLES.AUTHOR as ROLES],
 			},
+			WORKSPACE_LOCKED: {
+				path: ROUTES.WORKSPACE_LOCKED,
+				deniedRoles: DENIED_ROLES,
+			},
+			WORKSPACE_SUSPENDED: {
+				path: ROUTES.WORKSPACE_SUSPENDED,
+				deniedRoles: DENIED_ROLES,
+			},
+			WORKSPACE_ACCESS_RESTRICTED: {
+				path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
+				deniedRoles: DENIED_ROLES,
+			},
 		};
 
 		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(

frontend/src/AppRoutes/pageComponents.ts

@@ -102,15 +102,10 @@ export const DashboardPage = Loadable(
 	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPage'),
 );
 
-export const DashboardWidget = Loadable(
-	() =>
-		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
-);
-
 export const DashboardPanelEditorPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPageV2/PanelEditorPage/PanelEditorPage'
+			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPage/PanelEditorPage/PanelEditorPage'
 		),
 );
 

frontend/src/AppRoutes/routes.ts

@@ -13,7 +13,6 @@ import {
 	DashboardPage,
 	DashboardPanelEditorPage,
 	DashboardsListPage,
-	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
 	ForgotPassword,
@@ -183,13 +182,6 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
-	{
-		path: ROUTES.DASHBOARD_WIDGET,
-		exact: true,
-		component: DashboardWidget,
-		isPrivate: true,
-		key: 'DASHBOARD_WIDGET',
-	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
 		exact: true,

frontend/src/api/dashboard/public/createPublicDashboard.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
-import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
-
-/**
- * @deprecated Use the generated `useCreatePublicDashboard` hook (or `createPublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const createPublicDashboard = async (
-	props: CreatePublicDashboardProps,
-): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {
-
-    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
-
-	try {
-		const response = await axios.post(
-			`/dashboards/${dashboardId}/public`,
-			{ timeRangeEnabled, defaultTimeRange },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default createPublicDashboard;

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
-
-/**
- * @deprecated Use the generated `useGetPublicDashboardData` hook (or `getPublicDashboardData` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardData;

frontend/src/api/dashboard/public/getPublicDashboardMeta.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardMetaProps, PayloadProps,PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
-
-/**
- * @deprecated Use the generated `useGetPublicDashboard` hook (or `getPublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const getPublicDashboardMeta = async (props: GetPublicDashboardMetaProps): Promise<SuccessResponseV2<PublicDashboardMetaProps>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}/public`);
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardMeta;

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -1,34 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { MetricRangePayloadV5 } from 'api/v5/v5';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
-
-
-/**
- * @deprecated Use the generated `useGetPublicDashboardWidgetQueryRange` hook (or `getPublicDashboardWidgetQueryRange` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
-	try {
-		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {
-			params: {
-				startTime: props.startTime,
-				endTime: props.endTime,
-			},
-		});
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardWidgetData;

frontend/src/api/dashboard/public/revokePublicDashboardAccess.ts

@@ -1,29 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps,RevokePublicDashboardAccessProps } from 'types/api/dashboard/public/delete';
-
-/**
- * @deprecated Use the generated `useDeletePublicDashboard` hook (or `deletePublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const revokePublicDashboardAccess = async (
-	props: RevokePublicDashboardAccessProps,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}/public`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default revokePublicDashboardAccess;

frontend/src/api/dashboard/public/updatePublicDashboard.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
-
-/**
- * @deprecated Use the generated `useUpdatePublicDashboard` hook (or `updatePublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const updatePublicDashboard = async (
-	props: UpdatePublicDashboardProps,
-): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {
-
-    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
-
-	try {
-		const response = await axios.put(
-			`/dashboards/${dashboardId}/public`,
-			{ timeRangeEnabled, defaultTimeRange },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default updatePublicDashboard;

frontend/src/api/generated/services/dashboard/index.ts

@@ -46,6 +46,8 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	GetSystemDashboard200,
+	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
@@ -1885,6 +1887,108 @@ export const useMigrateDashboardV2 = <
 > => {
 	return useMutation(getMigrateDashboardV2MutationOptions(options));
 };
+/**
+ * Returns a dashboard SigNoz ships and owns, addressed by its stable definition name (e.g. `ai-o11y-overview`) rather than its id. System dashboards are read-only and upgraded through releases. The dashboard's own `name` field carries a reserved prefix that the path segment must not include.
+ * @summary Get system dashboard
+ */
+export const getSystemDashboard = (
+	{ name }: GetSystemDashboardPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetSystemDashboard200>({
+		url: `/api/v2/dashboards/system/${name}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetSystemDashboardQueryKey = ({
+	name,
+}: GetSystemDashboardPathParameters) => {
+	return [`/api/v2/dashboards/system/${name}`] as const;
+};
+
+export const getGetSystemDashboardQueryOptions = <
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ name }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetSystemDashboardQueryKey({ name });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getSystemDashboard>>
+	> = ({ signal }) => getSystemDashboard({ name }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!name,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getSystemDashboard>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetSystemDashboardQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getSystemDashboard>>
+>;
+export type GetSystemDashboardQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get system dashboard
+ */
+
+export function useGetSystemDashboard<
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ name }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetSystemDashboardQueryOptions({ name }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get system dashboard
+ */
+export const invalidateGetSystemDashboard = async (
+	queryClient: QueryClient,
+	{ name }: GetSystemDashboardPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetSystemDashboardQueryKey({ name }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

frontend/src/api/generated/services/gateway/index.ts

@@ -21,18 +21,28 @@ import type {
 	CreateIngestionKey201,
 	CreateIngestionKeyLimit201,
 	CreateIngestionKeyLimitPathParameters,
+	CreateIngestionLimit201,
 	DeleteIngestionKeyLimitPathParameters,
 	DeleteIngestionKeyPathParameters,
+	DeleteIngestionLimitPathParameters,
+	GatewaytypesDeprecatedPostableIngestionKeyLimitDTO,
 	GatewaytypesPostableIngestionKeyDTO,
 	GatewaytypesPostableIngestionKeyLimitDTO,
 	GatewaytypesUpdatableIngestionKeyLimitDTO,
+	GetIngestionKey200,
+	GetIngestionKeyLimits200,
+	GetIngestionKeyLimitsPathParameters,
+	GetIngestionKeyPathParameters,
 	GetIngestionKeys200,
 	GetIngestionKeysParams,
+	GetIngestionLimit200,
+	GetIngestionLimitPathParameters,
 	RenderErrorResponseDTO,
 	SearchIngestionKeys200,
 	SearchIngestionKeysParams,
 	UpdateIngestionKeyLimitPathParameters,
 	UpdateIngestionKeyPathParameters,
+	UpdateIngestionLimitPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -300,6 +310,108 @@ export const useDeleteIngestionKey = <
 > => {
 	return useMutation(getDeleteIngestionKeyMutationOptions(options));
 };
+/**
+ * This endpoint returns an ingestion key for the workspace
+ * @summary Get ingestion key for workspace
+ */
+export const getIngestionKey = (
+	{ keyId }: GetIngestionKeyPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetIngestionKey200>({
+		url: `/api/v2/gateway/ingestion_keys/${keyId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetIngestionKeyQueryKey = ({
+	keyId,
+}: GetIngestionKeyPathParameters) => {
+	return [`/api/v2/gateway/ingestion_keys/${keyId}`] as const;
+};
+
+export const getGetIngestionKeyQueryOptions = <
+	TData = Awaited<ReturnType<typeof getIngestionKey>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKey>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetIngestionKeyQueryKey({ keyId });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getIngestionKey>>> = ({
+		signal,
+	}) => getIngestionKey({ keyId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!keyId,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionKey>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetIngestionKeyQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getIngestionKey>>
+>;
+export type GetIngestionKeyQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get ingestion key for workspace
+ */
+
+export function useGetIngestionKey<
+	TData = Awaited<ReturnType<typeof getIngestionKey>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKey>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeyQueryOptions({ keyId }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get ingestion key for workspace
+ */
+export const invalidateGetIngestionKey = async (
+	queryClient: QueryClient,
+	{ keyId }: GetIngestionKeyPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetIngestionKeyQueryKey({ keyId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates an ingestion key for the workspace
  * @summary Update ingestion key for workspace
@@ -400,19 +512,122 @@ export const useUpdateIngestionKey = <
 	return useMutation(getUpdateIngestionKeyMutationOptions(options));
 };
 /**
- * This endpoint creates an ingestion key limit
+ * This endpoint returns the ingestion limits for an ingestion key
+ * @summary Get limits for the ingestion key
+ */
+export const getIngestionKeyLimits = (
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetIngestionKeyLimits200>({
+		url: `/api/v2/gateway/ingestion_keys/${keyId}/limits`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetIngestionKeyLimitsQueryKey = ({
+	keyId,
+}: GetIngestionKeyLimitsPathParameters) => {
+	return [`/api/v2/gateway/ingestion_keys/${keyId}/limits`] as const;
+};
+
+export const getGetIngestionKeyLimitsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetIngestionKeyLimitsQueryKey({ keyId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getIngestionKeyLimits>>
+	> = ({ signal }) => getIngestionKeyLimits({ keyId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!keyId,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetIngestionKeyLimitsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getIngestionKeyLimits>>
+>;
+export type GetIngestionKeyLimitsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get limits for the ingestion key
+ */
+
+export function useGetIngestionKeyLimits<
+	TData = Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeyLimitsQueryOptions({ keyId }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get limits for the ingestion key
+ */
+export const invalidateGetIngestionKeyLimits = async (
+	queryClient: QueryClient,
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetIngestionKeyLimitsQueryKey({ keyId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates an ingestion key limit.
+ * @deprecated
  * @summary Create limit for the ingestion key
  */
 export const createIngestionKeyLimit = (
 	{ keyId }: CreateIngestionKeyLimitPathParameters,
-	gatewaytypesPostableIngestionKeyLimitDTO?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>,
+	gatewaytypesDeprecatedPostableIngestionKeyLimitDTO?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateIngestionKeyLimit201>({
 		url: `/api/v2/gateway/ingestion_keys/${keyId}/limits`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: gatewaytypesPostableIngestionKeyLimitDTO,
+		data: gatewaytypesDeprecatedPostableIngestionKeyLimitDTO,
 		signal,
 	});
 };
@@ -426,7 +641,7 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 		TError,
 		{
 			pathParams: CreateIngestionKeyLimitPathParameters;
-			data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+			data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 		},
 		TContext
 	>;
@@ -435,7 +650,7 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 	TError,
 	{
 		pathParams: CreateIngestionKeyLimitPathParameters;
-		data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+		data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 	},
 	TContext
 > => {
@@ -452,7 +667,7 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 		Awaited<ReturnType<typeof createIngestionKeyLimit>>,
 		{
 			pathParams: CreateIngestionKeyLimitPathParameters;
-			data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+			data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -467,12 +682,13 @@ export type CreateIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createIngestionKeyLimit>>
 >;
 export type CreateIngestionKeyLimitMutationBody =
-	| BodyType<GatewaytypesPostableIngestionKeyLimitDTO>
+	| BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>
 	| undefined;
 export type CreateIngestionKeyLimitMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Create limit for the ingestion key
  */
 export const useCreateIngestionKeyLimit = <
@@ -484,7 +700,7 @@ export const useCreateIngestionKeyLimit = <
 		TError,
 		{
 			pathParams: CreateIngestionKeyLimitPathParameters;
-			data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+			data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 		},
 		TContext
 	>;
@@ -493,7 +709,7 @@ export const useCreateIngestionKeyLimit = <
 	TError,
 	{
 		pathParams: CreateIngestionKeyLimitPathParameters;
-		data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+		data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 	},
 	TContext
 > => {
@@ -501,6 +717,7 @@ export const useCreateIngestionKeyLimit = <
 };
 /**
  * This endpoint deletes an ingestion key limit
+ * @deprecated
  * @summary Delete limit for the ingestion key
  */
 export const deleteIngestionKeyLimit = (
@@ -559,6 +776,7 @@ export type DeleteIngestionKeyLimitMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Delete limit for the ingestion key
  */
 export const useDeleteIngestionKeyLimit = <
@@ -580,7 +798,8 @@ export const useDeleteIngestionKeyLimit = <
 	return useMutation(getDeleteIngestionKeyLimitMutationOptions(options));
 };
 /**
- * This endpoint updates an ingestion key limit
+ * This endpoint updates an ingestion key limit.
+ * @deprecated
  * @summary Update limit for the ingestion key
  */
 export const updateIngestionKeyLimit = (
@@ -653,6 +872,7 @@ export type UpdateIngestionKeyLimitMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Update limit for the ingestion key
  */
 export const useUpdateIngestionKeyLimit = <
@@ -779,3 +999,370 @@ export const invalidateSearchIngestionKeys = async (
 
 	return queryClient;
 };
+
+/**
+ * This endpoint creates an ingestion limit for the ingestion key referenced by keyId
+ * @summary Create ingestion limit
+ */
+export const createIngestionLimit = (
+	gatewaytypesPostableIngestionKeyLimitDTO?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateIngestionLimit201>({
+		url: `/api/v2/gateway/ingestion_limits`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: gatewaytypesPostableIngestionKeyLimitDTO,
+		signal,
+	});
+};
+
+export const getCreateIngestionLimitMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createIngestionLimit>>,
+		TError,
+		{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createIngestionLimit>>,
+	TError,
+	{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+	TContext
+> => {
+	const mutationKey = ['createIngestionLimit'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createIngestionLimit>>,
+		{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createIngestionLimit(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateIngestionLimitMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createIngestionLimit>>
+>;
+export type CreateIngestionLimitMutationBody =
+	| BodyType<GatewaytypesPostableIngestionKeyLimitDTO>
+	| undefined;
+export type CreateIngestionLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create ingestion limit
+ */
+export const useCreateIngestionLimit = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createIngestionLimit>>,
+		TError,
+		{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createIngestionLimit>>,
+	TError,
+	{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+	TContext
+> => {
+	return useMutation(getCreateIngestionLimitMutationOptions(options));
+};
+/**
+ * This endpoint deletes an ingestion limit
+ * @summary Delete ingestion limit
+ */
+export const deleteIngestionLimit = (
+	{ limitId }: DeleteIngestionLimitPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/gateway/ingestion_limits/${limitId}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteIngestionLimitMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteIngestionLimit>>,
+		TError,
+		{ pathParams: DeleteIngestionLimitPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteIngestionLimit>>,
+	TError,
+	{ pathParams: DeleteIngestionLimitPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteIngestionLimit'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof deleteIngestionLimit>>,
+		{ pathParams: DeleteIngestionLimitPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteIngestionLimit(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteIngestionLimitMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteIngestionLimit>>
+>;
+
+export type DeleteIngestionLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete ingestion limit
+ */
+export const useDeleteIngestionLimit = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteIngestionLimit>>,
+		TError,
+		{ pathParams: DeleteIngestionLimitPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteIngestionLimit>>,
+	TError,
+	{ pathParams: DeleteIngestionLimitPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteIngestionLimitMutationOptions(options));
+};
+/**
+ * This endpoint returns an ingestion limit
+ * @summary Get ingestion limit
+ */
+export const getIngestionLimit = (
+	{ limitId }: GetIngestionLimitPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetIngestionLimit200>({
+		url: `/api/v2/gateway/ingestion_limits/${limitId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetIngestionLimitQueryKey = ({
+	limitId,
+}: GetIngestionLimitPathParameters) => {
+	return [`/api/v2/gateway/ingestion_limits/${limitId}`] as const;
+};
+
+export const getGetIngestionLimitQueryOptions = <
+	TData = Awaited<ReturnType<typeof getIngestionLimit>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ limitId }: GetIngestionLimitPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionLimit>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetIngestionLimitQueryKey({ limitId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getIngestionLimit>>
+	> = ({ signal }) => getIngestionLimit({ limitId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!limitId,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionLimit>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetIngestionLimitQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getIngestionLimit>>
+>;
+export type GetIngestionLimitQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get ingestion limit
+ */
+
+export function useGetIngestionLimit<
+	TData = Awaited<ReturnType<typeof getIngestionLimit>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ limitId }: GetIngestionLimitPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionLimit>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionLimitQueryOptions({ limitId }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get ingestion limit
+ */
+export const invalidateGetIngestionLimit = async (
+	queryClient: QueryClient,
+	{ limitId }: GetIngestionLimitPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetIngestionLimitQueryKey({ limitId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint updates an ingestion limit
+ * @summary Update ingestion limit
+ */
+export const updateIngestionLimit = (
+	{ limitId }: UpdateIngestionLimitPathParameters,
+	gatewaytypesUpdatableIngestionKeyLimitDTO?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/gateway/ingestion_limits/${limitId}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: gatewaytypesUpdatableIngestionKeyLimitDTO,
+		signal,
+	});
+};
+
+export const getUpdateIngestionLimitMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateIngestionLimit>>,
+		TError,
+		{
+			pathParams: UpdateIngestionLimitPathParameters;
+			data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateIngestionLimit>>,
+	TError,
+	{
+		pathParams: UpdateIngestionLimitPathParameters;
+		data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateIngestionLimit'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateIngestionLimit>>,
+		{
+			pathParams: UpdateIngestionLimitPathParameters;
+			data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateIngestionLimit(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateIngestionLimitMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateIngestionLimit>>
+>;
+export type UpdateIngestionLimitMutationBody =
+	| BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>
+	| undefined;
+export type UpdateIngestionLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update ingestion limit
+ */
+export const useUpdateIngestionLimit = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateIngestionLimit>>,
+		TError,
+		{
+			pathParams: UpdateIngestionLimitPathParameters;
+			data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateIngestionLimit>>,
+	TError,
+	{
+		pathParams: UpdateIngestionLimitPathParameters;
+		data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateIngestionLimitMutationOptions(options));
+};

frontend/src/api/generated/services/licenses/index.ts

@@ -0,0 +1,702 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	ActivateLicense201,
+	DeleteLicensePathParameters,
+	GetActiveLicense200,
+	GetLicense200,
+	GetLicensePathParameters,
+	LicensetypesPostableLicenseDTO,
+	ListLicenses200,
+	RefreshLicensePathParameters,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint validates the license key with the upstream server and activates the license for the organization.
+ * @deprecated
+ * @summary Activate a license.
+ */
+export const activateLicenseDeprecated = (
+	licensetypesPostableLicenseDTO?: BodyType<LicensetypesPostableLicenseDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v3/licenses`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: licensetypesPostableLicenseDTO,
+		signal,
+	});
+};
+
+export const getActivateLicenseDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	const mutationKey = ['activateLicenseDeprecated'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return activateLicenseDeprecated(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ActivateLicenseDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof activateLicenseDeprecated>>
+>;
+export type ActivateLicenseDeprecatedMutationBody =
+	| BodyType<LicensetypesPostableLicenseDTO>
+	| undefined;
+export type ActivateLicenseDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Activate a license.
+ */
+export const useActivateLicenseDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	return useMutation(getActivateLicenseDeprecatedMutationOptions(options));
+};
+/**
+ * This endpoint refreshes the active license of the organization from the upstream server.
+ * @deprecated
+ * @summary Refresh a license.
+ */
+export const refreshLicenseDeprecated = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v3/licenses`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getRefreshLicenseDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+		TError,
+		void,
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+	TError,
+	void,
+	TContext
+> => {
+	const mutationKey = ['refreshLicenseDeprecated'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+		void
+	> = () => {
+		return refreshLicenseDeprecated();
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RefreshLicenseDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof refreshLicenseDeprecated>>
+>;
+
+export type RefreshLicenseDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Refresh a license.
+ */
+export const useRefreshLicenseDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+		TError,
+		void,
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+	TError,
+	void,
+	TContext
+> => {
+	return useMutation(getRefreshLicenseDeprecatedMutationOptions(options));
+};
+/**
+ * This endpoint lists all the licenses of the organization.
+ * @summary List licenses.
+ */
+export const listLicenses = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListLicenses200>({
+		url: `/api/v4/licenses`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListLicensesQueryKey = () => {
+	return [`/api/v4/licenses`] as const;
+};
+
+export const getListLicensesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listLicenses>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listLicenses>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListLicensesQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listLicenses>>> = ({
+		signal,
+	}) => listLicenses(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listLicenses>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListLicensesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listLicenses>>
+>;
+export type ListLicensesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List licenses.
+ */
+
+export function useListLicenses<
+	TData = Awaited<ReturnType<typeof listLicenses>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listLicenses>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListLicensesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List licenses.
+ */
+export const invalidateListLicenses = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListLicensesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint validates the license key with the upstream server and activates the license for the organization.
+ * @summary Activate a license.
+ */
+export const activateLicense = (
+	licensetypesPostableLicenseDTO?: BodyType<LicensetypesPostableLicenseDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ActivateLicense201>({
+		url: `/api/v4/licenses`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: licensetypesPostableLicenseDTO,
+		signal,
+	});
+};
+
+export const getActivateLicenseMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicense>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof activateLicense>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	const mutationKey = ['activateLicense'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof activateLicense>>,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return activateLicense(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ActivateLicenseMutationResult = NonNullable<
+	Awaited<ReturnType<typeof activateLicense>>
+>;
+export type ActivateLicenseMutationBody =
+	| BodyType<LicensetypesPostableLicenseDTO>
+	| undefined;
+export type ActivateLicenseMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Activate a license.
+ */
+export const useActivateLicense = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicense>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof activateLicense>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	return useMutation(getActivateLicenseMutationOptions(options));
+};
+/**
+ * This endpoint deletes the license by id. Licenses managed by SigNoz Cloud cannot be deleted.
+ * @summary Delete a license.
+ */
+export const deleteLicense = (
+	{ id }: DeleteLicensePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v4/licenses/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteLicenseMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteLicense>>,
+		TError,
+		{ pathParams: DeleteLicensePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteLicense>>,
+	TError,
+	{ pathParams: DeleteLicensePathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteLicense'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof deleteLicense>>,
+		{ pathParams: DeleteLicensePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteLicense(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteLicenseMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteLicense>>
+>;
+
+export type DeleteLicenseMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete a license.
+ */
+export const useDeleteLicense = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteLicense>>,
+		TError,
+		{ pathParams: DeleteLicensePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteLicense>>,
+	TError,
+	{ pathParams: DeleteLicensePathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteLicenseMutationOptions(options));
+};
+/**
+ * This endpoint gets the license by id.
+ * @summary Get a license.
+ */
+export const getLicense = (
+	{ id }: GetLicensePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetLicense200>({
+		url: `/api/v4/licenses/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetLicenseQueryKey = ({ id }: GetLicensePathParameters) => {
+	return [`/api/v4/licenses/${id}`] as const;
+};
+
+export const getGetLicenseQueryOptions = <
+	TData = Awaited<ReturnType<typeof getLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetLicensePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getLicense>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetLicenseQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getLicense>>> = ({
+		signal,
+	}) => getLicense({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<Awaited<ReturnType<typeof getLicense>>, TError, TData> & {
+		queryKey: QueryKey;
+	};
+};
+
+export type GetLicenseQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getLicense>>
+>;
+export type GetLicenseQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get a license.
+ */
+
+export function useGetLicense<
+	TData = Awaited<ReturnType<typeof getLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetLicensePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getLicense>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetLicenseQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get a license.
+ */
+export const invalidateGetLicense = async (
+	queryClient: QueryClient,
+	{ id }: GetLicensePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetLicenseQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint refreshes the active license of the organization from the upstream server.
+ * @summary Refresh a license.
+ */
+export const refreshLicense = (
+	{ id }: RefreshLicensePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v4/licenses/${id}`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getRefreshLicenseMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicense>>,
+		TError,
+		{ pathParams: RefreshLicensePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof refreshLicense>>,
+	TError,
+	{ pathParams: RefreshLicensePathParameters },
+	TContext
+> => {
+	const mutationKey = ['refreshLicense'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof refreshLicense>>,
+		{ pathParams: RefreshLicensePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return refreshLicense(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RefreshLicenseMutationResult = NonNullable<
+	Awaited<ReturnType<typeof refreshLicense>>
+>;
+
+export type RefreshLicenseMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Refresh a license.
+ */
+export const useRefreshLicense = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicense>>,
+		TError,
+		{ pathParams: RefreshLicensePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof refreshLicense>>,
+	TError,
+	{ pathParams: RefreshLicensePathParameters },
+	TContext
+> => {
+	return useMutation(getRefreshLicenseMutationOptions(options));
+};
+/**
+ * This endpoint gets the active license of the organization.
+ * @summary Get the active license.
+ */
+export const getActiveLicense = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetActiveLicense200>({
+		url: `/api/v4/licenses/active`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetActiveLicenseQueryKey = () => {
+	return [`/api/v4/licenses/active`] as const;
+};
+
+export const getGetActiveLicenseQueryOptions = <
+	TData = Awaited<ReturnType<typeof getActiveLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getActiveLicense>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetActiveLicenseQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getActiveLicense>>> = ({
+		signal,
+	}) => getActiveLicense(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getActiveLicense>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetActiveLicenseQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getActiveLicense>>
+>;
+export type GetActiveLicenseQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get the active license.
+ */
+
+export function useGetActiveLicense<
+	TData = Awaited<ReturnType<typeof getActiveLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getActiveLicense>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetActiveLicenseQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get the active license.
+ */
+export const invalidateGetActiveLicense = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetActiveLicenseQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

frontend/src/api/generated/services/prometheus/index.ts

@@ -0,0 +1,396 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	PrometheusErrorResponseSchemaDTO,
+	PrometheusQueryParams,
+	PrometheusQueryPostParams,
+	PrometheusQueryRangeParams,
+	PrometheusQueryRangePostParams,
+	PrometheusSuccessResponseSchemaDTO,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus instant query
+ */
+export const prometheusQuery = (
+	params: PrometheusQueryParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryQueryKey = (params?: PrometheusQueryParams) => {
+	return [`/prometheus/api/v1/query`, ...(params ? [params] : [])] as const;
+};
+
+export const getPrometheusQueryQueryOptions = <
+	TData = Awaited<ReturnType<typeof prometheusQuery>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQuery>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getPrometheusQueryQueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof prometheusQuery>>> = ({
+		signal,
+	}) => prometheusQuery(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof prometheusQuery>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type PrometheusQueryQueryResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQuery>>
+>;
+export type PrometheusQueryQueryError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus instant query
+ */
+
+export function usePrometheusQuery<
+	TData = Awaited<ReturnType<typeof prometheusQuery>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQuery>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getPrometheusQueryQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Prometheus instant query
+ */
+export const invalidatePrometheusQuery = async (
+	queryClient: QueryClient,
+	params: PrometheusQueryParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getPrometheusQueryQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus instant query
+ */
+export const prometheusQueryPost = (
+	params: PrometheusQueryPostParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query`,
+		method: 'POST',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryPostMutationOptions = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryPost>>,
+		TError,
+		{ params: PrometheusQueryPostParams },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof prometheusQueryPost>>,
+	TError,
+	{ params: PrometheusQueryPostParams },
+	TContext
+> => {
+	const mutationKey = ['prometheusQueryPost'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof prometheusQueryPost>>,
+		{ params: PrometheusQueryPostParams }
+	> = (props) => {
+		const { params } = props ?? {};
+
+		return prometheusQueryPost(params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PrometheusQueryPostMutationResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQueryPost>>
+>;
+
+export type PrometheusQueryPostMutationError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus instant query
+ */
+export const usePrometheusQueryPost = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryPost>>,
+		TError,
+		{ params: PrometheusQueryPostParams },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof prometheusQueryPost>>,
+	TError,
+	{ params: PrometheusQueryPostParams },
+	TContext
+> => {
+	return useMutation(getPrometheusQueryPostMutationOptions(options));
+};
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus range query
+ */
+export const prometheusQueryRange = (
+	params: PrometheusQueryRangeParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query_range`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryRangeQueryKey = (
+	params?: PrometheusQueryRangeParams,
+) => {
+	return [
+		`/prometheus/api/v1/query_range`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getPrometheusQueryRangeQueryOptions = <
+	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryRangeParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getPrometheusQueryRangeQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof prometheusQueryRange>>
+	> = ({ signal }) => prometheusQueryRange(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof prometheusQueryRange>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type PrometheusQueryRangeQueryResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQueryRange>>
+>;
+export type PrometheusQueryRangeQueryError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus range query
+ */
+
+export function usePrometheusQueryRange<
+	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryRangeParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getPrometheusQueryRangeQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Prometheus range query
+ */
+export const invalidatePrometheusQueryRange = async (
+	queryClient: QueryClient,
+	params: PrometheusQueryRangeParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getPrometheusQueryRangeQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus range query
+ */
+export const prometheusQueryRangePost = (
+	params: PrometheusQueryRangePostParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query_range`,
+		method: 'POST',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryRangePostMutationOptions = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+		TError,
+		{ params: PrometheusQueryRangePostParams },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+	TError,
+	{ params: PrometheusQueryRangePostParams },
+	TContext
+> => {
+	const mutationKey = ['prometheusQueryRangePost'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+		{ params: PrometheusQueryRangePostParams }
+	> = (props) => {
+		const { params } = props ?? {};
+
+		return prometheusQueryRangePost(params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PrometheusQueryRangePostMutationResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQueryRangePost>>
+>;
+
+export type PrometheusQueryRangePostMutationError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus range query
+ */
+export const usePrometheusQueryRangePost = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+		TError,
+		{ params: PrometheusQueryRangePostParams },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+	TError,
+	{ params: PrometheusQueryRangePostParams },
+	TContext
+> => {
+	return useMutation(getPrometheusQueryRangePostMutationOptions(options));
+};

frontend/src/api/generated/services/quick-filter/index.ts

@@ -0,0 +1,316 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	GetQuickFilters200,
+	GetQuickFiltersPathParameters,
+	ListQuickFilters200,
+	QuickfiltertypesUpdatableQuickFiltersDTO,
+	RenderErrorResponseDTO,
+	UpdateQuickFiltersPathParameters,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * Returns the org's quick filters for every source, each filter as a telemetry field key.
+ * @summary List quick filters
+ */
+export const listQuickFilters = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListQuickFilters200>({
+		url: `/api/v2/quick_filters`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListQuickFiltersQueryKey = () => {
+	return [`/api/v2/quick_filters`] as const;
+};
+
+export const getListQuickFiltersQueryOptions = <
+	TData = Awaited<ReturnType<typeof listQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listQuickFilters>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListQuickFiltersQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listQuickFilters>>> = ({
+		signal,
+	}) => listQuickFilters(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listQuickFilters>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListQuickFiltersQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listQuickFilters>>
+>;
+export type ListQuickFiltersQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List quick filters
+ */
+
+export function useListQuickFilters<
+	TData = Awaited<ReturnType<typeof listQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listQuickFilters>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListQuickFiltersQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List quick filters
+ */
+export const invalidateListQuickFilters = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListQuickFiltersQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Returns the org's quick filters for one source, each filter as a telemetry field key.
+ * @summary Get a source's quick filters
+ */
+export const getQuickFilters = (
+	{ source }: GetQuickFiltersPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetQuickFilters200>({
+		url: `/api/v2/quick_filters/${source}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetQuickFiltersQueryKey = ({
+	source,
+}: GetQuickFiltersPathParameters) => {
+	return [`/api/v2/quick_filters/${source}`] as const;
+};
+
+export const getGetQuickFiltersQueryOptions = <
+	TData = Awaited<ReturnType<typeof getQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ source }: GetQuickFiltersPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getQuickFilters>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetQuickFiltersQueryKey({ source });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getQuickFilters>>> = ({
+		signal,
+	}) => getQuickFilters({ source }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!source,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getQuickFilters>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetQuickFiltersQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getQuickFilters>>
+>;
+export type GetQuickFiltersQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get a source's quick filters
+ */
+
+export function useGetQuickFilters<
+	TData = Awaited<ReturnType<typeof getQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ source }: GetQuickFiltersPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getQuickFilters>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetQuickFiltersQueryOptions({ source }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get a source's quick filters
+ */
+export const invalidateGetQuickFilters = async (
+	queryClient: QueryClient,
+	{ source }: GetQuickFiltersPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetQuickFiltersQueryKey({ source }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Replaces the org's quick filters for the source named in the path.
+ * @summary Update quick filters
+ */
+export const updateQuickFilters = (
+	{ source }: UpdateQuickFiltersPathParameters,
+	quickfiltertypesUpdatableQuickFiltersDTO?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/quick_filters/${source}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: quickfiltertypesUpdatableQuickFiltersDTO,
+		signal,
+	});
+};
+
+export const getUpdateQuickFiltersMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateQuickFilters>>,
+		TError,
+		{
+			pathParams: UpdateQuickFiltersPathParameters;
+			data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateQuickFilters>>,
+	TError,
+	{
+		pathParams: UpdateQuickFiltersPathParameters;
+		data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateQuickFilters'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateQuickFilters>>,
+		{
+			pathParams: UpdateQuickFiltersPathParameters;
+			data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateQuickFilters(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateQuickFiltersMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateQuickFilters>>
+>;
+export type UpdateQuickFiltersMutationBody =
+	| BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>
+	| undefined;
+export type UpdateQuickFiltersMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update quick filters
+ */
+export const useUpdateQuickFilters = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateQuickFilters>>,
+		TError,
+		{
+			pathParams: UpdateQuickFiltersPathParameters;
+			data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateQuickFilters>>,
+	TError,
+	{
+		pathParams: UpdateQuickFiltersPathParameters;
+		data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateQuickFiltersMutationOptions(options));
+};

frontend/src/api/generated/services/subscriptions/index.ts

@@ -0,0 +1,280 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	CreateSubscription201,
+	GetSubscription200,
+	RenderErrorResponseDTO,
+	SubscriptiontypesPostableSubscriptionDTO,
+	UpdateSubscription200,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint gets the organization's subscription along with its usage and billing details.
+ * @summary Get the subscription.
+ */
+export const getSubscription = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetSubscription200>({
+		url: `/api/v1/subscriptions`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetSubscriptionQueryKey = () => {
+	return [`/api/v1/subscriptions`] as const;
+};
+
+export const getGetSubscriptionQueryOptions = <
+	TData = Awaited<ReturnType<typeof getSubscription>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getSubscription>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetSubscriptionQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getSubscription>>> = ({
+		signal,
+	}) => getSubscription(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getSubscription>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetSubscriptionQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getSubscription>>
+>;
+export type GetSubscriptionQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get the subscription.
+ */
+
+export function useGetSubscription<
+	TData = Awaited<ReturnType<typeof getSubscription>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getSubscription>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetSubscriptionQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get the subscription.
+ */
+export const invalidateGetSubscription = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetSubscriptionQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a subscription for the organization.
+ * @summary Create a subscription.
+ */
+export const createSubscription = (
+	subscriptiontypesPostableSubscriptionDTO?: BodyType<SubscriptiontypesPostableSubscriptionDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateSubscription201>({
+		url: `/api/v1/subscriptions`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: subscriptiontypesPostableSubscriptionDTO,
+		signal,
+	});
+};
+
+export const getCreateSubscriptionMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createSubscription>>,
+		TError,
+		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createSubscription>>,
+	TError,
+	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	const mutationKey = ['createSubscription'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createSubscription>>,
+		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createSubscription(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateSubscriptionMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createSubscription>>
+>;
+export type CreateSubscriptionMutationBody =
+	| BodyType<SubscriptiontypesPostableSubscriptionDTO>
+	| undefined;
+export type CreateSubscriptionMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create a subscription.
+ */
+export const useCreateSubscription = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createSubscription>>,
+		TError,
+		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createSubscription>>,
+	TError,
+	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	return useMutation(getCreateSubscriptionMutationOptions(options));
+};
+/**
+ * This endpoint updates the organization's subscription.
+ * @summary Update the subscription.
+ */
+export const updateSubscription = (
+	subscriptiontypesPostableSubscriptionDTO?: BodyType<SubscriptiontypesPostableSubscriptionDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateSubscription200>({
+		url: `/api/v1/subscriptions`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: subscriptiontypesPostableSubscriptionDTO,
+		signal,
+	});
+};
+
+export const getUpdateSubscriptionMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateSubscription>>,
+		TError,
+		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateSubscription>>,
+	TError,
+	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	const mutationKey = ['updateSubscription'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateSubscription>>,
+		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return updateSubscription(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateSubscriptionMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateSubscription>>
+>;
+export type UpdateSubscriptionMutationBody =
+	| BodyType<SubscriptiontypesPostableSubscriptionDTO>
+	| undefined;
+export type UpdateSubscriptionMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update the subscription.
+ */
+export const useUpdateSubscription = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateSubscription>>,
+		TError,
+		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateSubscription>>,
+	TError,
+	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	return useMutation(getUpdateSubscriptionMutationOptions(options));
+};

frontend/src/api/v1/dashboards/create.ts

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

frontend/src/api/v1/dashboards/getAll.ts

@@ -1,19 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { Dashboard, PayloadProps } from 'types/api/dashboard/getAll';
-
-const getAll = async (): Promise<SuccessResponseV2<Dashboard[]>> => {
-	try {
-		const response = await axios.get<PayloadProps>('/dashboards');
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getAll;

frontend/src/api/v1/dashboards/id/delete.ts

@@ -1,21 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/delete';
-
-const deleteDashboard = async (
-	props: Props,
-): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}`);
-		return {
-			httpStatusCode: response.status,
-			data: null,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default deleteDashboard;

frontend/src/api/v1/dashboards/id/get.ts

@@ -1,20 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/get';
-import { Dashboard } from 'types/api/dashboard/getAll';
-
-const get = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}`);
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default get;

frontend/src/api/v1/dashboards/id/lock.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/lockUnlock';
-
-const lock = async (props: Props): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.put<PayloadProps>(
-			`/dashboards/${props.id}/lock`,
-			{ lock: props.lock },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default lock;

frontend/src/api/v1/dashboards/id/update.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { PayloadProps, Props } from 'types/api/dashboard/update';
-
-const update = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
-	try {
-		const response = await axios.put<PayloadProps>(`/dashboards/${props.id}`, {
-			...props.data,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default update;

frontend/src/api/v3/licenses/active/get.ts

@@ -1,25 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	LicenseEventQueueResModel,
-	PayloadProps,
-} from 'types/api/licensesV3/getActive';
-
-const getActive = async (): Promise<
-	SuccessResponseV2<LicenseEventQueueResModel>
-> => {
-	try {
-		const response = await axios.get<PayloadProps>('/licenses/active');
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getActive;

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

@@ -1,20 +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 } from 'types/api/licenses/apply';
-
-const apply = async (): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.put<PayloadProps>('/licenses');
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default apply;

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

@@ -6,6 +6,7 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty } from 'lodash-es';
+import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -545,20 +546,22 @@ function reduceQueriesToObject(queryArray: any[]): {
 /**
  * Prepares V5 query range payload from GetQueryResultsProps
  */
-export const prepareQueryRangePayloadV5 = ({
-	query,
-	globalSelectedInterval,
-	graphType,
-	selectedTime,
-	tableParams,
-	variables = {},
-	start: startTime,
-	end: endTime,
-	formatForWeb,
-	originalGraphType,
-	fillGaps,
-	dynamicVariables,
-}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
+export const prepareQueryRangePayloadV5 = (
+	{
+		query,
+		globalSelectedInterval,
+		graphType,
+		selectedTime,
+		tableParams,
+		variables = {},
+		start: startTime,
+		end: endTime,
+		formatForWeb,
+		originalGraphType,
+		fillGaps,
+	}: GetQueryResultsProps,
+	dynamicVariables: DynamicVariableSuggestion[] = [],
+): PrepareQueryRangePayloadV5Result => {
 	let legendMap: Record<string, string> = {};
 	const requestType = mapPanelTypeToRequestType(graphType);
 	let queries: QueryEnvelope[] = [];
@@ -671,9 +674,9 @@ export const prepareQueryRangePayloadV5 = ({
 			(acc, [key, value]) => {
 				acc[key] = {
 					value,
-					type: dynamicVariables
-						?.find((v) => v.name === key)
-						?.type?.toLowerCase() as VariableType,
+					type: dynamicVariables.some((v) => v.name === key)
+						? ('dynamic' as VariableType)
+						: undefined,
 				};
 				return acc;
 			},

frontend/src/assets/CustomIcons/ApacheIcon.tsx

@@ -1,176 +0,0 @@
-export default function ApacheIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M8.7112 1.05739C8.3796 1.30831 8.08524 1.60498 7.83691 1.93853L8.17977 2.58567C8.40218 2.26279 8.64677 1.95576 8.91177 1.66681C8.93063 1.64581 8.94091 1.63596 8.94091 1.63596L8.91177 1.66681C8.66003 1.95965 8.43081 2.27111 8.22606 2.59853C8.67305 2.56672 9.11808 2.51165 9.55934 2.43353C9.60936 2.25525 9.62374 2.06886 9.60168 1.88502C9.57962 1.70118 9.52154 1.52349 9.43077 1.3621C9.43077 1.3621 9.09991 0.828957 8.7112 1.05739Z"
-				fill="url(#paint0_linear_2061_4195)"
-			/>
-			<path
-				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
-				fill="#BE202E"
-			/>
-			<path
-				opacity="0.35"
-				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
-				fill="#BE202E"
-			/>
-			<path
-				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
-				fill="#BE202E"
-			/>
-			<path
-				opacity="0.35"
-				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
-				fill="#BE202E"
-			/>
-			<path
-				d="M7.16872 4.25736C7.273 4.0625 7.37858 3.87221 7.48543 3.6865C7.59629 3.49393 7.70829 3.3075 7.82143 3.12721L7.84115 3.09507C7.95315 2.91793 8.066 2.74779 8.17972 2.58464L7.83686 1.9375L7.75886 2.03393C7.65986 2.15736 7.55743 2.29107 7.452 2.43036C7.33329 2.58893 7.21115 2.75779 7.08729 2.93564C6.97286 3.09979 6.85672 3.27164 6.74058 3.44993C6.64158 3.60121 6.54258 3.75721 6.444 3.91707L6.43286 3.93507L6.879 4.8145C6.97443 4.62707 7.071 4.44136 7.16872 4.25736Z"
-				fill="url(#paint1_linear_2061_4195)"
-			/>
-			<path
-				d="M5.13606 9.22519C5.07692 9.38748 5.01763 9.55305 4.95821 9.72191L4.95563 9.72919L4.93035 9.80076C4.89049 9.91476 4.85535 10.015 4.77563 10.2503C4.92444 10.3467 5.0416 10.4847 5.11249 10.6472C5.10283 10.4581 5.01907 10.2804 4.87935 10.1526C5.16043 10.1981 5.44862 10.1654 5.71236 10.0581C5.97609 9.95074 6.20521 9.77291 6.37463 9.54405C6.40102 9.50088 6.42464 9.45607 6.44535 9.40991C6.37459 9.49741 6.28141 9.56408 6.17575 9.6028C6.07008 9.64152 5.95589 9.65084 5.84535 9.62976C6.20937 9.49539 6.51802 9.24316 6.72221 8.91319C6.76978 8.83691 6.81563 8.75376 6.86278 8.66162C6.6974 8.84328 6.48756 8.97872 6.25393 9.05463C6.02029 9.13053 5.77091 9.14426 5.53035 9.09448L5.16949 9.13391C5.15706 9.16434 5.14721 9.19476 5.13606 9.22519Z"
-				fill="url(#paint2_linear_2061_4195)"
-			/>
-			<path
-				d="M5.30448 8.417C5.38248 8.21528 5.46276 8.01157 5.54533 7.80586C5.62419 7.60871 5.70519 7.41057 5.78833 7.21143C5.87148 7.01228 5.95633 6.81228 6.0429 6.61143C6.1309 6.40828 6.22076 6.20557 6.31248 6.00328C6.40419 5.801 6.49633 5.60257 6.5889 5.408C6.62262 5.33714 6.65662 5.26643 6.6909 5.19586C6.75005 5.07414 6.80962 4.95343 6.86962 4.83371C6.87262 4.82728 6.87605 4.82086 6.87948 4.81443L6.4329 3.93457L6.41105 3.97014C6.30733 4.14157 6.20362 4.313 6.10205 4.49128C6.00048 4.66957 5.89848 4.853 5.80205 5.03814C5.7189 5.19443 5.63776 5.35157 5.55862 5.50957L5.51148 5.606C5.41419 5.80614 5.32633 5.99943 5.24705 6.18543C5.15705 6.396 5.07762 6.59686 5.00876 6.788C4.9629 6.91357 4.92305 7.03486 4.88362 7.151C4.85233 7.25043 4.82276 7.34986 4.79448 7.451C4.72762 7.68471 4.67048 7.91771 4.62305 8.15L5.07133 9.035C5.13076 8.87671 5.19162 8.71614 5.2539 8.55328L5.30448 8.417Z"
-				fill="url(#paint3_linear_2061_4195)"
-			/>
-			<path
-				d="M4.615 8.18082C4.55868 8.46014 4.51975 8.74268 4.49843 9.02682C4.49843 9.03668 4.49843 9.04653 4.49629 9.05639C4.3547 8.8778 4.1801 8.72808 3.982 8.61539C4.24526 8.95089 4.41819 9.34823 4.48429 9.76953C4.28982 9.78674 4.0942 9.75338 3.91643 9.67268C4.05057 9.80984 4.21714 9.91096 4.40072 9.96668C4.14974 10.0146 3.9168 10.1307 3.72743 10.3022C3.97375 10.178 4.25059 10.1271 4.525 10.1557C4.21858 11.024 3.91129 11.9827 3.604 13.0001C3.64664 12.988 3.6856 12.9655 3.71739 12.9346C3.74918 12.9037 3.7728 12.8654 3.78615 12.8231C3.841 12.6388 4.20443 11.4298 4.77443 9.84068L4.82372 9.70439L4.83743 9.66625C4.89772 9.49968 4.96015 9.32968 5.02472 9.15625L5.06758 9.03753V9.03539L4.62143 8.15039C4.61929 8.16025 4.61672 8.17053 4.615 8.18082Z"
-				fill="url(#paint4_linear_2061_4195)"
-			/>
-			<path
-				d="M6.94843 4.89059L6.90986 4.96987C6.87129 5.04959 6.83214 5.13102 6.79243 5.21416C6.74957 5.30416 6.70671 5.3963 6.66386 5.49059C6.64157 5.53816 6.621 5.58573 6.59743 5.63416C6.53057 5.7793 6.46286 5.92916 6.39429 6.08373C6.30857 6.27402 6.22286 6.47173 6.13714 6.67687C6.054 6.87259 5.96971 7.07516 5.88429 7.28459C5.80314 7.48459 5.721 7.68973 5.63786 7.90002C5.56386 8.08888 5.48914 8.28273 5.41371 8.48159C5.40986 8.49145 5.40643 8.50087 5.403 8.51073C5.32814 8.70873 5.25257 8.91187 5.17629 9.12016L5.17114 9.1343L5.532 9.09487L5.51057 9.09102C6.039 8.98351 6.52026 8.7126 6.88629 8.31659C7.0686 8.1182 7.22683 7.89896 7.35771 7.66345C7.47147 7.46033 7.57252 7.25036 7.66029 7.03473C7.74386 6.83245 7.824 6.61387 7.90114 6.37645C7.79448 6.43086 7.68084 6.47037 7.56343 6.49388C7.54157 6.49859 7.52057 6.50287 7.49657 6.50673C7.47257 6.51059 7.45071 6.51445 7.42757 6.51745C7.80325 6.36305 8.10458 6.06924 8.26843 5.69759C8.12155 5.79773 7.95733 5.86966 7.78414 5.90973C7.75586 5.91616 7.72757 5.92087 7.69843 5.92516L7.677 5.92816C7.80484 5.87656 7.92565 5.80903 8.03657 5.72716C8.05843 5.71087 8.07943 5.69373 8.1 5.67573C8.13129 5.64873 8.16086 5.62045 8.18914 5.59002C8.20714 5.57116 8.22471 5.55145 8.24186 5.53087C8.28293 5.48179 8.32059 5.42996 8.35457 5.37573C8.36529 5.35859 8.376 5.34145 8.38629 5.32345C8.39957 5.29773 8.41243 5.27245 8.42486 5.24716C8.481 5.13402 8.526 5.03288 8.56157 4.94459C8.57957 4.90173 8.595 4.85888 8.60829 4.82116C8.61386 4.80616 8.619 4.79116 8.62371 4.7783C8.63786 4.73545 8.64943 4.69816 8.65843 4.66473C8.66941 4.62595 8.67828 4.58661 8.685 4.54688C8.67015 4.5586 8.65454 4.56934 8.63829 4.57902C8.4822 4.66169 8.31419 4.71953 8.14029 4.75045H8.13257L8.08157 4.75859L8.09057 4.75473L6.957 4.87902L6.94843 4.89059Z"
-				fill="url(#paint5_linear_2061_4195)"
-			/>
-			<path
-				d="M8.22475 2.59871C8.12404 2.75343 8.01389 2.92914 7.89561 3.12843L7.87675 3.16014C7.77446 3.33157 7.66604 3.52114 7.55147 3.72886C7.45261 3.90771 7.34989 4.10014 7.24332 4.30614C7.15018 4.48586 7.05418 4.67671 6.95532 4.87871L8.08889 4.75443C8.33914 4.65567 8.55501 4.48583 8.70989 4.26586C8.74804 4.211 8.78618 4.15357 8.82432 4.09443C8.94089 3.91271 9.05489 3.71257 9.15689 3.51371C9.25018 3.33322 9.33429 3.14813 9.40889 2.95914C9.44758 2.86102 9.48092 2.76087 9.50875 2.65914C9.52932 2.58028 9.54561 2.50571 9.55804 2.43457C9.11675 2.51236 8.67172 2.56715 8.22475 2.59871Z"
-				fill="url(#paint6_linear_2061_4195)"
-			/>
-			<path
-				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
-				fill="#BE202E"
-			/>
-			<path
-				opacity="0.35"
-				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
-				fill="#BE202E"
-			/>
-			<path
-				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
-				fill="url(#paint7_linear_2061_4195)"
-			/>
-			<defs>
-				<linearGradient
-					id="paint0_linear_2061_4195"
-					x1="7.26579"
-					y1="1.16584"
-					x2="9.7782"
-					y2="0.46843"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#F69923" />
-					<stop offset="0.312" stopColor="#F79A23" />
-					<stop offset="0.838" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint1_linear_2061_4195"
-					x1="1.76109"
-					y1="12.4382"
-					x2="6.87606"
-					y2="1.48267"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint2_linear_2061_4195"
-					x1="3.47784"
-					y1="11.6287"
-					x2="6.5258"
-					y2="5.10046"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#282662" />
-					<stop offset="0.095" stopColor="#662E8D" />
-					<stop offset="0.788" stopColor="#9F2064" />
-					<stop offset="0.949" stopColor="#CD2032" />
-				</linearGradient>
-				<linearGradient
-					id="paint3_linear_2061_4195"
-					x1="1.94596"
-					y1="11.7748"
-					x2="7.06094"
-					y2="0.819304"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint4_linear_2061_4195"
-					x1="2.46768"
-					y1="11.0455"
-					x2="5.15578"
-					y2="5.28798"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#282662" />
-					<stop offset="0.095" stopColor="#662E8D" />
-					<stop offset="0.788" stopColor="#9F2064" />
-					<stop offset="0.949" stopColor="#CD2032" />
-				</linearGradient>
-				<linearGradient
-					id="paint5_linear_2061_4195"
-					x1="3.08048"
-					y1="12.3044"
-					x2="8.19546"
-					y2="1.3489"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint6_linear_2061_4195"
-					x1="2.70679"
-					y1="12.9581"
-					x2="7.82195"
-					y2="2.00223"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint7_linear_2061_4195"
-					x1="3.41759"
-					y1="12.4619"
-					x2="8.53277"
-					y2="1.50629"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-			</defs>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/DockerIcon.tsx

@@ -1,28 +0,0 @@
-export default function DockerIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clipPath="url(#clip0_2061_4220)">
-				<path
-					d="M13.574 5.82107C13.2652 5.60679 12.5575 5.52644 12.0042 5.63358C11.9398 5.09788 11.6439 4.62915 11.1292 4.21399L10.8332 3.99971L10.6274 4.30774C10.37 4.70951 10.2413 5.27198 10.2799 5.80768C10.2928 5.99517 10.3571 6.32998 10.5502 6.62461C10.37 6.73175 9.99686 6.86567 9.50789 6.86567H0.204685L0.17895 6.97281C0.0888774 7.5085 0.0888774 9.18254 1.14401 10.4682C1.9418 11.4458 3.12561 11.9414 4.68258 11.9414C8.05386 11.9414 10.5502 10.3209 11.7211 7.38797C12.1843 7.40136 13.1751 7.38797 13.677 6.38354C13.6898 6.35676 13.7156 6.30319 13.8056 6.10231L13.8571 5.99517L13.574 5.82107ZM7.6421 2.04443H6.22668V3.38367H7.6421V2.04443ZM7.6421 3.65151H6.22668V4.99074H7.6421V3.65151ZM5.96933 3.65151H4.5539V4.99074H5.96933V3.65151ZM4.29655 3.65151H2.88113V4.99074H4.29655V3.65151ZM2.62378 5.25859H1.20835V6.59782H2.62378V5.25859ZM4.29655 5.25859H2.88113V6.59782H4.29655V5.25859ZM5.96933 5.25859H4.5539V6.59782H5.96933V5.25859ZM7.6421 5.25859H6.22668V6.59782H7.6421V5.25859ZM9.31488 5.25859H7.89945V6.59782H9.31488V5.25859Z"
-					fill="#2396ED"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_2061_4220">
-					<rect
-						width="13.7143"
-						height="13.7143"
-						fill="white"
-						transform="translate(0.142822 0.143066)"
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/ElasticSearchIcon.tsx

@@ -1,36 +0,0 @@
-export default function ElasticSearchIcon(): JSX.Element {
-	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M6.38041 6.94508L9.70241 8.45858L13.0524 5.52158C13.1019 5.27892 13.1255 5.03171 13.1229 4.78408C13.1236 3.9846 12.8681 3.20592 12.3941 2.56216C11.92 1.9184 11.2522 1.44339 10.4885 1.20675C9.72487 0.970101 8.9055 0.984259 8.15047 1.24714C7.39544 1.51003 6.74446 2.00782 6.29291 2.66758L5.73291 5.56008L6.38041 6.94508Z"
-				fill="#FED10A"
-			/>
-			<path
-				d="M2.943 10.4593C2.89356 10.7062 2.86994 10.9575 2.8725 11.2093C2.87361 12.012 3.13177 12.7932 3.60915 13.4385C4.08654 14.0838 4.75804 14.5592 5.52528 14.7952C6.29252 15.0311 7.11514 15.0151 7.87262 14.7495C8.63009 14.4839 9.28259 13.9827 9.7345 13.3193L10.2845 10.4398L9.55 9.02928L6.215 7.50928L2.943 10.4593Z"
-				fill="#24BBB1"
-			/>
-			<path
-				d="M2.92394 4.71302L5.19994 5.25002L5.69994 2.66552C5.39077 2.43015 5.01365 2.30134 4.62509 2.29839C4.23654 2.29544 3.8575 2.41852 3.54479 2.64916C3.23208 2.8798 3.00256 3.20559 2.89063 3.57768C2.77869 3.94978 2.79039 4.34813 2.92394 4.71302Z"
-				fill="#EF5098"
-			/>
-			<path
-				d="M2.72503 5.2583C2.23266 5.42016 1.80253 5.73058 1.49379 6.14687C1.18505 6.56317 1.01286 7.0649 1.00091 7.58305C0.988962 8.1012 1.13784 8.61033 1.42706 9.04041C1.71628 9.4705 2.13164 9.80042 2.61603 9.9848L5.81003 7.0998L5.22653 5.8498L2.72503 5.2583Z"
-				fill="#17A8E0"
-			/>
-			<path
-				d="M10.312 13.3197C10.6209 13.5543 10.9975 13.6825 11.3853 13.6851C11.7732 13.6877 12.1514 13.5646 12.4634 13.3342C12.7755 13.1038 13.0044 12.7785 13.116 12.407C13.2276 12.0356 13.2159 11.6379 13.0825 11.2737L10.812 10.7412L10.312 13.3197Z"
-				fill="#93C83E"
-			/>
-			<path
-				d="M10.7735 10.145L13.2735 10.7285C13.7666 10.5672 14.1976 10.257 14.507 9.84058C14.8165 9.42415 14.9891 8.922 15.0013 8.40333C15.0134 7.88467 14.8643 7.375 14.5747 6.94457C14.2851 6.51414 13.8691 6.18413 13.384 6L10.1135 8.8665L10.7735 10.145Z"
-				fill="#0779A1"
-			/>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/HerokuIcon.tsx

@@ -1,27 +0,0 @@
-function HerokuIcon(): JSX.Element {
-	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clipPath="url(#clip0_2061_4245)">
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M13.6285 0H2.10787C1.31283 0 0.666748 0.644312 0.666748 1.44112V14.5602C0.666748 15.3557 1.31283 16 2.10787 16H13.6285C14.4237 16 15.0678 15.3557 15.0678 14.5602V1.44112C15.0678 0.644312 14.4237 0 13.6285 0ZM14.2677 14.5602C14.2677 14.9135 13.9815 15.1994 13.6285 15.1994H2.10787C1.75506 15.1994 1.46688 14.9135 1.46688 14.5602V1.44112C1.46688 1.08654 1.75506 0.800133 2.10787 0.800133H13.6285C13.9815 0.800133 14.2677 1.08654 14.2677 1.44112V14.5602ZM4.26699 13.6009L6.06823 12.0002L4.26699 10.3999V13.6009ZM10.7719 7.11485C10.4481 6.78927 9.8569 6.40038 8.86819 6.40038C7.78342 6.40038 6.66611 6.68302 5.86752 6.94177V2.40082H4.26704V9.33907L5.39807 8.82667C5.41688 8.81826 7.24025 8.00086 8.86819 8.00086C9.68027 8.00086 9.86022 8.44796 9.86885 8.82158V13.6009H11.4676V8.801C11.4693 8.6983 11.4592 7.81051 10.7719 7.11485ZM8.66761 5.00027H10.2681C10.9912 4.1811 11.3597 3.30903 11.4677 2.40066H9.86881C9.69063 3.30726 9.29643 4.17424 8.66761 5.00027Z"
-					fill="#6762A6"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_2061_4245">
-					<rect width="16" height="16" fill="white" />
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}
-
-export default HerokuIcon;

frontend/src/assets/CustomIcons/MongoDBIcon.tsx

@@ -1,68 +0,0 @@
-export default function MongoDBIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M7.26568 13.0004L6.94382 12.8937C6.94382 12.8937 6.98668 11.2651 6.39739 11.1507C6.01168 10.7015 6.45439 -8.02403 7.86439 11.0868C7.59687 11.2225 7.39217 11.4564 7.29311 11.7395C7.24001 12.1577 7.23082 12.5803 7.26568 13.0004Z"
-				fill="url(#paint0_linear_2061_4238)"
-			/>
-			<path
-				d="M7.43957 11.4272C8.29654 10.7821 8.95282 9.90701 9.33214 8.90369C9.71147 7.90037 9.79826 6.81 9.58243 5.75931C8.95243 2.98002 7.46058 2.06631 7.29986 1.71745C7.1612 1.50022 7.04284 1.27068 6.94629 1.03174L7.065 8.7756C7.065 8.7756 6.819 11.1422 7.43957 11.4272Z"
-				fill="url(#paint1_linear_2061_4238)"
-			/>
-			<path
-				d="M6.78015 11.5296C6.78015 11.5296 4.15687 9.74286 4.30858 6.58214C4.32273 5.62928 4.54121 4.69054 4.94926 3.82935C5.3573 2.96816 5.94542 2.20456 6.67387 1.59014C6.759 1.51782 6.82663 1.42715 6.87168 1.32493C6.91674 1.22272 6.93805 1.11163 6.93401 1C7.0973 1.35143 7.07072 6.247 7.08787 6.81957C7.1543 9.04686 6.96401 11.1091 6.78015 11.5296Z"
-				fill="url(#paint2_linear_2061_4238)"
-			/>
-			<defs>
-				<linearGradient
-					id="paint0_linear_2061_4238"
-					x1="5.1021"
-					y1="7.10853"
-					x2="8.80138"
-					y2="8.36386"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.231" stopColor="#999875" />
-					<stop offset="0.563" stopColor="#9B9977" />
-					<stop offset="0.683" stopColor="#A09F7E" />
-					<stop offset="0.768" stopColor="#A9A889" />
-					<stop offset="0.837" stopColor="#B7B69A" />
-					<stop offset="0.896" stopColor="#C9C7B0" />
-					<stop offset="0.948" stopColor="#DEDDCB" />
-					<stop offset="0.994" stopColor="#F8F6EB" />
-					<stop offset="1" stopColor="#FBF9EF" />
-				</linearGradient>
-				<linearGradient
-					id="paint1_linear_2061_4238"
-					x1="6.45855"
-					y1="0.976404"
-					x2="8.09399"
-					y2="11.1888"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#48A547" />
-					<stop offset="1" stopColor="#3F9143" />
-				</linearGradient>
-				<linearGradient
-					id="paint2_linear_2061_4238"
-					x1="4.08293"
-					y1="6.89501"
-					x2="8.47176"
-					y2="5.42519"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#41A247" />
-					<stop offset="0.352" stopColor="#4BA74B" />
-					<stop offset="0.956" stopColor="#67B554" />
-					<stop offset="1" stopColor="#69B655" />
-				</linearGradient>
-			</defs>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/NginxIcon.tsx

@@ -1,22 +0,0 @@
-function NginxIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M6.97775 1H7.00561C7.14837 1.068 7.28743 1.14353 7.42218 1.22629C8.97332 2.11829 10.5245 3.01057 12.0756 3.90314C12.1356 3.93517 12.1846 3.9845 12.2163 4.04472C12.2479 4.10493 12.2607 4.17327 12.253 4.24086C12.2496 6.12186 12.253 8.00243 12.2509 9.88257C12.2307 9.9723 12.1759 10.0504 12.0983 10.0999C10.4489 11.0496 8.79932 11.9987 7.14961 12.9473C7.10963 12.9778 7.06144 12.9956 7.01125 12.9984C6.96106 13.0012 6.91118 12.9889 6.86803 12.9631C5.21661 12.0163 3.56675 11.0677 1.91846 10.1174C1.86489 10.0921 1.82003 10.0515 1.78952 10.0007C1.75901 9.94988 1.74423 9.89119 1.74703 9.832C1.74703 7.95143 1.74703 6.071 1.74703 4.19071C1.74299 4.13178 1.75661 4.07299 1.78616 4.02184C1.8157 3.97069 1.85983 3.92951 1.91289 3.90357C3.46203 3.01271 5.01118 2.12129 6.56032 1.22929C6.69832 1.15043 6.83375 1.06686 6.97775 1Z"
-				fill="#019639"
-			/>
-			<path
-				d="M3.90007 4.65924C3.90007 6.21039 3.90007 7.76167 3.90007 9.3131C3.89809 9.39901 3.91326 9.48446 3.94468 9.56445C3.9761 9.64444 4.02315 9.71736 4.08307 9.77896C4.19794 9.89243 4.34824 9.96309 4.5089 9.97916C4.66956 9.99522 4.83087 9.95572 4.96593 9.86724C5.05634 9.80581 5.13035 9.72321 5.18152 9.62662C5.23269 9.53003 5.25946 9.4224 5.2595 9.3131C5.2595 8.19024 5.25736 7.06739 5.2595 5.94453C6.28322 7.17024 7.30907 8.39424 8.33707 9.61653C8.4799 9.76122 8.65676 9.86772 8.85145 9.92628C9.04614 9.98484 9.25242 9.99357 9.45136 9.95167C9.59184 9.924 9.71973 9.85198 9.81624 9.74622C9.91275 9.64045 9.97278 9.50652 9.9875 9.3641C9.98979 7.78096 9.98979 6.19796 9.9875 4.6151C9.97275 4.44614 9.8952 4.28884 9.77016 4.17425C9.64512 4.05966 9.48168 3.99609 9.31207 3.99609C9.14247 3.99609 8.97902 4.05966 8.85399 4.17425C8.72895 4.28884 8.6514 4.44614 8.63665 4.6151C8.63665 5.75596 8.62979 6.89553 8.63665 8.03596C7.63122 6.85053 6.63822 5.65481 5.63665 4.4651C5.5046 4.29578 5.32979 4.16474 5.13023 4.08549C4.93067 4.00624 4.71359 3.98165 4.50136 4.01424C4.34059 4.03214 4.19154 4.10704 4.08124 4.22536C3.97093 4.34369 3.90666 4.49761 3.90007 4.65924Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
-
-export default NginxIcon;

frontend/src/assets/CustomIcons/RedisIcon.tsx

@@ -1,60 +0,0 @@
-export default function RedisIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clipPath="url(#clip0_2061_4282)">
-				<path
-					d="M13.3198 10.158C12.5879 10.5395 8.79654 12.0984 7.98938 12.5192C7.18221 12.94 6.73382 12.936 6.09616 12.6312C5.45855 12.3263 1.42388 10.6966 0.697072 10.3492C0.333858 10.1756 0.142822 10.029 0.142822 9.8906V8.50438C0.142822 8.50438 5.3955 7.3609 6.24348 7.05667C7.09141 6.75244 7.38563 6.74145 8.10723 7.00578C8.82895 7.2702 13.1439 8.0487 13.8571 8.30992L13.8568 9.67653C13.8569 9.81356 13.6923 9.96388 13.3198 10.158Z"
-					fill="#912626"
-				/>
-				<path
-					d="M13.3195 8.77972C12.5877 9.16104 8.79642 10.72 7.98926 11.1407C7.18215 11.5616 6.73376 11.5575 6.09615 11.2527C5.45849 10.9481 1.42397 9.31805 0.697221 8.97086C-0.029529 8.62345 -0.0447433 8.38436 0.66915 8.10482C1.38304 7.82518 5.39544 6.25098 6.24353 5.94675C7.09145 5.64263 7.38561 5.63154 8.10722 5.89597C8.82888 6.16029 12.5975 7.66034 13.3106 7.9215C14.024 8.18298 14.0513 8.39829 13.3195 8.77972Z"
-					fill="#C6302B"
-				/>
-				<path
-					d="M13.3198 7.91483C12.5879 8.29637 8.79654 9.85519 7.98938 10.2762C7.18221 10.6968 6.73382 10.6928 6.09616 10.388C5.4585 10.0833 1.42388 8.45338 0.697072 8.10597C0.333858 7.9324 0.142822 7.78604 0.142822 7.64756V6.26119C0.142822 6.26119 5.3955 5.11776 6.24348 4.81353C7.09141 4.50929 7.38563 4.49826 8.10723 4.76263C8.829 5.02701 13.144 5.80535 13.8571 6.06661L13.8568 7.43338C13.8569 7.57036 13.6923 7.72069 13.3198 7.91483Z"
-					fill="#912626"
-				/>
-				<path
-					d="M13.3195 6.53701C12.5877 6.91844 8.79642 8.47726 7.98926 8.89817C7.18215 9.31892 6.73376 9.3148 6.09615 9.00998C5.45849 8.70537 1.42397 7.07541 0.697221 6.72816C-0.029529 6.38085 -0.0447433 6.14171 0.66915 5.86207C1.38304 5.58258 5.39549 4.00828 6.24353 3.7041C7.09145 3.39992 7.38561 3.38889 8.10722 3.65326C8.82888 3.91758 12.5975 5.41753 13.3106 5.6788C14.024 5.94023 14.0513 6.15558 13.3195 6.53701Z"
-					fill="#C6302B"
-				/>
-				<path
-					d="M13.3198 5.58855C12.5879 5.96998 8.79654 7.5289 7.98938 7.94987C7.18221 8.37062 6.73382 8.36649 6.09616 8.06167C5.4585 7.75701 1.42388 6.12705 0.697072 5.7798C0.333858 5.60607 0.142822 5.45965 0.142822 5.32133V3.9349C0.142822 3.9349 5.3955 2.79153 6.24348 2.48735C7.09141 2.18307 7.38563 2.17214 8.10723 2.43646C8.829 2.70083 13.144 3.47917 13.8571 3.74044L13.8568 5.10715C13.8569 5.24403 13.6923 5.39435 13.3198 5.58855Z"
-					fill="#912626"
-				/>
-				<path
-					d="M13.3195 4.21078C12.5876 4.59221 8.79639 6.15113 7.98923 6.57188C7.18212 6.99263 6.73373 6.98851 6.09612 6.68385C5.45852 6.37903 1.42394 4.74917 0.697248 4.40187C-0.0295558 4.05462 -0.0447165 3.81542 0.669123 3.53583C1.38302 3.2563 5.39546 1.68221 6.2435 1.37792C7.09143 1.07369 7.38559 1.06276 8.1072 1.32714C8.82886 1.59151 12.5975 3.09146 13.3106 3.35272C14.0239 3.61394 14.0513 3.82935 13.3195 4.21078Z"
-					fill="#C6302B"
-				/>
-				<path
-					d="M8.67572 2.86218L7.49661 2.9846L7.23267 3.61974L6.80635 2.91099L5.44483 2.78863L6.46076 2.42226L6.15594 1.85986L7.1071 2.23186L8.00378 1.93829L7.76142 2.51981L8.67572 2.86218ZM7.16228 5.94351L4.96172 5.03081L8.11494 4.54679L7.16228 5.94351ZM4.11138 3.21522C5.04219 3.21522 5.79674 3.50772 5.79674 3.86847C5.79674 4.22933 5.04219 4.52177 4.11138 4.52177C3.18058 4.52177 2.42603 4.22927 2.42603 3.86847C2.42603 3.50772 3.18058 3.21522 4.11138 3.21522Z"
-					fill="white"
-				/>
-				<path
-					d="M10.0693 3.0357L11.9355 3.77316L10.0709 4.50993L10.0693 3.0357Z"
-					fill="#621B1C"
-				/>
-				<path
-					d="M8.00464 3.85234L10.0693 3.03564L10.0709 4.50988L9.86844 4.58906L8.00464 3.85234Z"
-					fill="#9A2928"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_2061_4282">
-					<rect
-						width="13.7143"
-						height="13.7143"
-						fill="white"
-						transform="translate(0.142822 0.143066)"
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from '@signozhq/icons';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/widgets/widget';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -5,16 +5,16 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/GridCardLayout/config';
-import GridCard from 'container/GridCardLayout/GridCard';
-import { Card } from 'container/GridCardLayout/styles';
+import { ViewMenuAction } from 'container/WidgetCard/config';
+import GridCard from 'container/WidgetCard/Card';
+import { Card } from 'container/WidgetCard/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/widgets/widget';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,15 +5,15 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/GridCardLayout/config';
-import GridCard from 'container/GridCardLayout/GridCard';
-import { Card } from 'container/GridCardLayout/styles';
+import { ViewMenuAction } from 'container/WidgetCard/config';
+import GridCard from 'container/WidgetCard/Card';
+import { Card } from 'container/WidgetCard/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/widgets/widget';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { Card } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { CardContainer } from 'container/GridCardLayout/styles';
+import { CardContainer } from 'container/WidgetCard/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import { AppState } from 'store/reducers';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -1,7 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/widgets/widget';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -6,9 +6,9 @@ import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/GridCardLayout/config';
-import GridCard from 'container/GridCardLayout/GridCard';
-import { Card } from 'container/GridCardLayout/styles';
+import { ViewMenuAction } from 'container/WidgetCard/config';
+import GridCard from 'container/WidgetCard/Card';
+import { Card } from 'container/WidgetCard/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -8,7 +8,7 @@ import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/widgets/widget';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/widgets/widget';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -4,10 +4,9 @@ import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
+import useUpdatedQuery from 'container/WidgetCard/hooks/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
@@ -80,7 +79,6 @@ export function useNavigateToExplorer(): (
 	);
 
 	const { getUpdatedQuery } = useUpdatedQuery();
-	const { dashboardData } = useDashboardStore();
 	const { notifications } = useNotifications();
 
 	return useCallback(
@@ -112,7 +110,6 @@ export function useNavigateToExplorer(): (
 						panelTypes: PANEL_TYPES.TIME_SERIES,
 						timePreferance: 'GLOBAL_TIME',
 					},
-					dashboardData,
 				})
 					.then((query) => {
 						preparedQuery = query;
@@ -136,13 +133,6 @@ export function useNavigateToExplorer(): (
 
 			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
-		[
-			prepareQuery,
-			minTime,
-			maxTime,
-			getUpdatedQuery,
-			dashboardData,
-			notifications,
-		],
+		[prepareQuery, minTime, maxTime, getUpdatedQuery, notifications],
 	);
 }

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -7,9 +7,8 @@ import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
@@ -69,9 +68,7 @@ function ExplorerCard({
 		setIsOpen(newOpen);
 	};
 
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
-
-	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
+	const { viewName, viewKey } = useGetSavedViewParams();
 
 	const { options } = useOptionsMenu({
 		storageKey:

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -57,8 +57,8 @@ function MenuItemGenerator({
 
 			handleExplorerTabChange(currentPanelType, {
 				query,
-				name,
-				id,
+				viewName: name,
+				viewKey: id,
 			});
 		},
 		[viewData, handleExplorerTabChange],

frontend/src/components/ExplorerCard/constants.ts

@@ -1,5 +1,3 @@
-import { QueryParams } from 'constants/query';
-
 export const ExploreHeaderToolTip = {
 	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
@@ -9,5 +7,3 @@ export const SaveButtonText = {
 	SAVE_AS_NEW_VIEW: 'Save as new view',
 	SAVE_VIEW: 'Save view',
 };
-
-export type QuerySearchParamNames = QueryParams.viewName | QueryParams.viewKey;

frontend/src/components/Graph/index.tsx

@@ -28,7 +28,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { generateGridTitle } from 'container/GridPanelSwitch/utils';
+import { generateGridTitle } from 'utils/generateGridTitle';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';

frontend/src/components/MarkdownEditor/EditorStatusBar.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import type { CursorPosition } from './types';
+
+import styles from './MarkdownEditor.module.scss';
+
+interface EditorStatusBarProps {
+	cursor: CursorPosition;
+	length: number;
+	maxLength: number;
+	hint?: ReactNode;
+}
+
+function EditorStatusBar({
+	cursor,
+	length,
+	maxLength,
+	hint,
+}: EditorStatusBarProps): JSX.Element {
+	const isOverLimit = length > maxLength;
+
+	return (
+		<div className={styles.statusBar} data-testid="markdown-editor-status">
+			<Typography.Text className={styles.statusPosition}>
+				{`Ln ${cursor.line}, Col ${cursor.column}`}
+				<span className={styles.statusSeparator}>·</span>
+				<span
+					className={cx(styles.statusCount, {
+						[styles.statusCountOverLimit]: isOverLimit,
+					})}
+					data-testid="markdown-editor-char-count"
+				>
+					{isOverLimit
+						? `${length} / ${maxLength} chars`
+						: `${length} chars`}
+				</span>
+			</Typography.Text>
+			{hint && (
+				<Typography.Text className={styles.statusHint}>{hint}</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+export default EditorStatusBar;

frontend/src/components/MarkdownEditor/EditorToolbar.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react';
+import {
+	Bold,
+	CodeXml,
+	Heading,
+	Italic,
+	Link,
+	List,
+	ListOrdered,
+	Table,
+	Type,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+
+import InsertVariableMenu from './InsertVariableMenu';
+import MarkdownHelp from './MarkdownHelp';
+import type { EditorCommand, EditorVariable } from './types';
+
+import styles from './MarkdownEditor.module.scss';
+
+const COMMAND_ICONS: Record<string, ReactNode> = {
+	heading: <Heading size={14} />,
+	bold: <Bold size={14} />,
+	italic: <Italic size={14} />,
+	'bulleted-list': <List size={14} />,
+	'numbered-list': <ListOrdered size={14} />,
+	link: <Link size={14} />,
+	code: <CodeXml size={14} />,
+	table: <Table size={14} />,
+};
+
+interface EditorToolbarProps {
+	formatLabel: string;
+	commands: EditorCommand[];
+	onRunCommand: (command: EditorCommand) => void;
+	variables: EditorVariable[];
+	onInsertVariable: (name: string) => void;
+	disabled: boolean;
+	extra?: ReactNode;
+}
+
+function EditorToolbar({
+	formatLabel,
+	commands,
+	onRunCommand,
+	variables,
+	onInsertVariable,
+	disabled,
+	extra,
+}: EditorToolbarProps): JSX.Element {
+	return (
+		<div className={styles.toolbar} data-testid="markdown-editor-toolbar">
+			<span className={styles.formatChip}>
+				<Type size={14} />
+				<Typography.Text className={styles.formatLabel}>
+					{formatLabel}
+				</Typography.Text>
+			</span>
+			<span className={styles.toolbarDivider} />
+			<div className={styles.commands}>
+				{commands.map((command) => (
+					<TooltipSimple key={command.id} title={command.label}>
+						<Button
+							type="button"
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							disabled={disabled}
+							aria-label={command.label}
+							data-testid={`markdown-command-${command.id}`}
+							onClick={(): void => onRunCommand(command)}
+						>
+							{COMMAND_ICONS[command.id]}
+						</Button>
+					</TooltipSimple>
+				))}
+			</div>
+			<div className={styles.toolbarEnd}>
+				{extra}
+				<InsertVariableMenu
+					variables={variables}
+					onSelect={onInsertVariable}
+					disabled={disabled}
+				/>
+				<MarkdownHelp />
+			</div>
+		</div>
+	);
+}
+
+export default EditorToolbar;

frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx

@@ -0,0 +1,91 @@
+import { useMemo, useState } from 'react';
+import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import type { EditorVariable } from './types';
+
+import styles from './MarkdownEditor.module.scss';
+
+interface InsertVariableMenuProps {
+	variables: EditorVariable[];
+	/** Receives the variable name; the caller decides the token syntax. */
+	onSelect: (name: string) => void;
+	disabled: boolean;
+}
+
+function toMenuItems(
+	variables: EditorVariable[],
+	onSelect: (name: string) => void,
+): MenuItem[] {
+	return variables.map((variable) => ({
+		key: variable.name,
+		label: (
+			<span
+				className={styles.variableRow}
+				data-testid={`markdown-variable-${variable.name}`}
+			>
+				<span className={styles.variableName}>{`$${variable.name}`}</span>
+				{variable.badge && (
+					<span className={styles.variableBadge}>{variable.badge}</span>
+				)}
+			</span>
+		),
+		onClick: (): void => onSelect(variable.name),
+	}));
+}
+
+/** Searchable variable picker; hidden entirely when there is nothing to insert. */
+function InsertVariableMenu({
+	variables,
+	onSelect,
+	disabled,
+}: InsertVariableMenuProps): JSX.Element | null {
+	const [search, setSearch] = useState('');
+
+	const matches = useMemo(() => {
+		const query = search.trim().toLowerCase();
+		return query
+			? variables.filter((variable) => variable.name.toLowerCase().includes(query))
+			: variables;
+	}, [variables, search]);
+
+	const items = useMemo(
+		() => toMenuItems(matches, onSelect),
+		[matches, onSelect],
+	);
+
+	if (variables.length === 0) {
+		return null;
+	}
+
+	return (
+		<DropdownMenuSimple
+			className={styles.variableMenu}
+			menu={{
+				items,
+				search: {
+					placeholder: 'Search variables',
+					searchIcon: <Search size={14} />,
+					onSearchChange: setSearch,
+				},
+			}}
+		>
+			<Button
+				type="button"
+				variant="outlined"
+				color="secondary"
+				size="sm"
+				disabled={disabled}
+				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
+				suffix={<ChevronDown size={14} />}
+				className={styles.insertVariable}
+				data-testid="markdown-insert-variable"
+			>
+				Insert variable
+			</Button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default InsertVariableMenu;

frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -0,0 +1,253 @@
+@use '../../styles/scrollbar' as *;
+
+.container {
+	// Read by the decoration theme in `markdownHighlight`, which can't see SCSS.
+	--md-syntax-heading: var(--text-vanilla-100);
+	--md-syntax-strong: var(--text-vanilla-100);
+	--md-syntax-emphasis: var(--text-vanilla-300);
+	--md-syntax-quote: var(--text-vanilla-400);
+	--md-syntax-marker: var(--text-robin-300);
+	--md-syntax-code: var(--text-forest-400);
+	--md-syntax-link: var(--text-robin-400);
+	--md-syntax-variable: var(--text-amber-400);
+
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	background: var(--l1-background);
+}
+
+:global(body.lightMode) .container {
+	--md-syntax-heading: var(--text-ink-400);
+	--md-syntax-strong: var(--text-ink-400);
+	--md-syntax-emphasis: var(--text-ink-200);
+	--md-syntax-quote: var(--text-neutral-light-100);
+	--md-syntax-marker: var(--text-robin-500);
+	--md-syntax-code: var(--text-forest-700);
+	--md-syntax-link: var(--text-robin-500);
+	--md-syntax-variable: var(--text-sienna-500);
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.formatChip {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	color: var(--text-sienna-400);
+}
+
+.formatLabel {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.toolbarDivider {
+	width: 1px;
+	height: 16px;
+	flex-shrink: 0;
+	background: var(--l1-border);
+}
+
+.commands {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.toolbarEnd {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-left: auto;
+}
+
+.insertVariable {
+	white-space: nowrap;
+}
+
+.insertVariableIcon {
+	color: var(--text-amber-400);
+}
+
+// The ui library's dropdown assumes a global border-box reset this app doesn't
+// have (`box-sizing` is set on `body` only and doesn't inherit): its items are
+// `width: 100%` + padding, so in the portal they lay out content-box and
+// overflow the popup by the padding — clipping the flush-right badge.
+.variableMenu,
+.variableMenu * {
+	box-sizing: border-box;
+}
+
+.variableMenu {
+	width: 320px;
+}
+
+// Shrinkable, so a clamped popup truncates the name instead of clipping the
+// badge at the content's `overflow: hidden` edge.
+.variableRow {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex: 1;
+	min-width: 0;
+}
+
+.variableName {
+	font-family: var(--font-family-sf-mono);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.variableBadge {
+	flex-shrink: 0;
+	margin-left: auto;
+	padding: 2px 6px;
+	border: 1px solid color-mix(in srgb, var(--text-amber-400) 40%, transparent);
+	border-radius: 4px;
+	font-family: var(--font-family-sf-mono);
+	font-size: 10px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--text-amber-400);
+}
+
+.editorArea {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.codeMirror {
+	height: 100%;
+	font-family: var(--font-family-sf-mono);
+	font-size: 13px;
+
+	:global(.cm-editor) {
+		height: 100%;
+		background: transparent;
+	}
+
+	:global(.cm-editor.cm-focused) {
+		outline: none;
+	}
+
+	:global(.cm-gutters) {
+		background: transparent;
+		border-right: none;
+		color: var(--text-neutral-dark-200);
+	}
+
+	:global(.cm-scroller) {
+		line-height: 20px;
+		padding: 0 12px;
+		@include custom-scrollbar;
+	}
+
+	:global(.cm-content) {
+		padding: 8px 0;
+	}
+}
+
+.statusBar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	flex-shrink: 0;
+	padding: 6px 12px;
+	border-top: 1px solid var(--l1-border);
+}
+
+.statusPosition {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-family: var(--font-family-sf-mono);
+	font-size: 11px;
+	color: var(--text-neutral-dark-200);
+}
+
+.statusSeparator {
+	color: var(--l1-border);
+}
+
+.statusCount {
+	color: inherit;
+}
+
+.statusCountOverLimit {
+	color: var(--text-cherry-400);
+	font-weight: 600;
+}
+
+.statusHint {
+	font-size: 11px;
+	color: var(--text-neutral-dark-200);
+}
+
+.helpContent {
+	width: 280px;
+	max-height: 320px;
+	overflow-y: auto;
+	@include custom-scrollbar;
+}
+
+.helpTitle {
+	display: block;
+	margin-bottom: 8px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--text-neutral-dark-200);
+}
+
+.helpList {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin: 0;
+}
+
+.helpRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+
+	dt {
+		margin: 0;
+
+		code {
+			font-family: var(--font-family-sf-mono);
+			font-size: 11px;
+			color: var(--text-forest-400);
+		}
+	}
+
+	dd {
+		margin: 0;
+		font-size: 11px;
+		color: var(--text-neutral-dark-200);
+	}
+}
+
+// The help popover portals out of `.container`, so it can't inherit its tokens.
+:global(body.lightMode) .helpRow dt code {
+	color: var(--text-forest-700);
+}

frontend/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -0,0 +1,245 @@
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+import { githubLight } from '@uiw/codemirror-theme-github';
+import CodeMirror, {
+	type BasicSetupOptions,
+	EditorView,
+	type ViewUpdate,
+} from '@uiw/react-codemirror';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { formatVariableToken, MARKDOWN_MAX_LENGTH } from './constants';
+import EditorStatusBar from './EditorStatusBar';
+import EditorToolbar from './EditorToolbar';
+import { applyTransform, replaceDocument } from './editorDocument';
+import { insertText, MARKDOWN_COMMANDS } from './markdownCommands';
+import { markdownHighlight } from './markdownHighlight';
+import type {
+	CursorPosition,
+	EditorCommand,
+	EditorTransform,
+	EditorVariable,
+} from './types';
+
+import styles from './MarkdownEditor.module.scss';
+
+/** What the status bar reports. */
+type DocumentStatus = CursorPosition & { length: number };
+
+// No language grammar is loaded, so bracket/indent/completion behaviour would only
+// get in the way of prose. `indentWithTab` stays off so Tab keeps moving focus.
+const BASIC_SETUP: BasicSetupOptions = {
+	lineNumbers: true,
+	highlightActiveLine: true,
+	highlightActiveLineGutter: true,
+	foldGutter: false,
+	autocompletion: false,
+	bracketMatching: false,
+	closeBrackets: false,
+	indentOnInput: false,
+	syntaxHighlighting: false,
+	highlightSelectionMatches: false,
+	rectangularSelection: false,
+	crosshairCursor: false,
+	searchKeymap: false,
+	foldKeymap: false,
+	lintKeymap: false,
+	completionKeymap: false,
+	closeBracketsKeymap: false,
+};
+
+const EMPTY_VARIABLES: EditorVariable[] = [];
+
+export interface MarkdownEditorProps {
+	/** Seeds the document; replaced only from outside. See the sync effect. */
+	value: string;
+	onChange: (value: string) => void;
+	/** Offered by the "Insert variable" menu; the button disables when empty. */
+	variables?: EditorVariable[];
+	/** What the character counter reports against. */
+	maxLength?: number;
+	placeholder?: string;
+	readOnly?: boolean;
+	/** Shown on the toolbar chip. */
+	formatLabel?: string;
+	/** Rendered before the "Insert variable" menu. */
+	toolbarExtra?: ReactNode;
+	/** Right-hand status-bar note, e.g. "Preview updates as you type". */
+	statusHint?: ReactNode;
+	autoFocus?: boolean;
+	className?: string;
+	testId?: string;
+}
+
+/**
+ * Source editor for Markdown bodies. Source-only: it neither parses nor renders
+ * the body, so the preview surface and its sanitisation stay the caller's concern.
+ */
+function MarkdownEditor({
+	value,
+	onChange,
+	variables = EMPTY_VARIABLES,
+	maxLength = MARKDOWN_MAX_LENGTH,
+	placeholder = 'Write Markdown…',
+	readOnly = false,
+	formatLabel = 'Markdown',
+	toolbarExtra,
+	statusHint,
+	autoFocus = false,
+	className,
+	testId = 'markdown-editor',
+}: MarkdownEditorProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const viewRef = useRef<EditorView | null>(null);
+	// Set while a programmatic replacement is in flight, so the caller isn't told
+	// about a change it asked for. `dispatch` runs listeners synchronously, so the
+	// window is exactly one call.
+	const isSyncingRef = useRef(false);
+	const previousValueRef = useRef(value);
+	const hasSeededRef = useRef(false);
+	const [isEditorReady, setIsEditorReady] = useState(false);
+	const [status, setStatus] = useState<DocumentStatus>(() => ({
+		line: 1,
+		column: 1,
+		length: value.length,
+	}));
+
+	const syncDocument = useCallback((view: EditorView, next: string): void => {
+		isSyncingRef.current = true;
+		replaceDocument(view, next);
+		isSyncingRef.current = false;
+	}, []);
+
+	const onCreateEditor = useCallback((view: EditorView): void => {
+		viewRef.current = view;
+		setIsEditorReady(true);
+	}, []);
+
+	/**
+	 * Seeds the document, then applies external replacements — nothing else. Keeping
+	 * keystrokes out of this round-trip is what stops a stale `value` from replacing
+	 * the document and resetting the caret when typing outpaces React.
+	 *
+	 * The seed can't go in `onCreateEditor`: the wrapper defaults its own `value` to
+	 * `''` and reconciles against it once the view exists, wiping anything written
+	 * before that. `isEditorReady` puts this effect after that pass, since a parent's
+	 * effects flush after its children's.
+	 *
+	 * Focus marks ownership: a replacement arriving mid-typing is dropped rather than
+	 * applied over the author.
+	 */
+	useEffect(() => {
+		const view = viewRef.current;
+		if (!view) {
+			return;
+		}
+
+		const previous = previousValueRef.current;
+		previousValueRef.current = value;
+		const isSeeding = !hasSeededRef.current;
+		hasSeededRef.current = true;
+
+		if (!isSeeding && (value === previous || view.hasFocus)) {
+			return;
+		}
+		if (view.state.doc.toString() !== value) {
+			syncDocument(view, value);
+		}
+	}, [value, isEditorReady, syncDocument]);
+
+	const handleChange = useCallback(
+		(next: string): void => {
+			if (!isSyncingRef.current) {
+				onChange(next);
+			}
+		},
+		[onChange],
+	);
+
+	const runTransform = useCallback((transform: EditorTransform): void => {
+		const view = viewRef.current;
+		if (view) {
+			applyTransform(view, transform);
+		}
+	}, []);
+
+	const onRunCommand = useCallback(
+		(command: EditorCommand): void => runTransform(command.run),
+		[runTransform],
+	);
+
+	const onInsertVariable = useCallback(
+		(name: string): void =>
+			runTransform((snapshot) => insertText(snapshot, formatVariableToken(name))),
+		[runTransform],
+	);
+
+	const extensions = useMemo(
+		() => [markdownHighlight(), EditorView.lineWrapping],
+		[],
+	);
+
+	// From the document, not `value`: the caller may debounce or drop a change, and
+	// the counter has to match what the author sees.
+	const onUpdate = useCallback((update: ViewUpdate): void => {
+		if (!update.selectionSet && !update.docChanged) {
+			return;
+		}
+		const { head } = update.state.selection.main;
+		const line = update.state.doc.lineAt(head);
+		setStatus({
+			line: line.number,
+			column: head - line.from + 1,
+			length: update.state.doc.length,
+		});
+	}, []);
+
+	return (
+		<div className={cx(styles.container, className)} data-testid={testId}>
+			<EditorToolbar
+				formatLabel={formatLabel}
+				commands={MARKDOWN_COMMANDS}
+				onRunCommand={onRunCommand}
+				variables={variables}
+				onInsertVariable={onInsertVariable}
+				disabled={readOnly}
+				extra={toolbarExtra}
+			/>
+			<div className={styles.editorArea}>
+				<CodeMirror
+					className={styles.codeMirror}
+					// No `value`: passing it re-enables the wrapper's own reconciliation,
+					// and with it the caret reset.
+					onCreateEditor={onCreateEditor}
+					onChange={handleChange}
+					onUpdate={onUpdate}
+					theme={isDarkMode ? copilot : githubLight}
+					basicSetup={BASIC_SETUP}
+					placeholder={placeholder}
+					editable={!readOnly}
+					readOnly={readOnly}
+					indentWithTab={false}
+					autoFocus={autoFocus}
+					extensions={extensions}
+					height="100%"
+				/>
+			</div>
+			<EditorStatusBar
+				cursor={status}
+				length={status.length}
+				maxLength={maxLength}
+				hint={statusHint}
+			/>
+		</div>
+	);
+}
+
+export default MarkdownEditor;

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -0,0 +1,44 @@
+import { CircleHelp } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import { Typography } from '@signozhq/ui/typography';
+
+import { MARKDOWN_HELP_ITEMS } from './constants';
+
+import styles from './MarkdownEditor.module.scss';
+
+function MarkdownHelp(): JSX.Element {
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					type="button"
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label="Markdown syntax help"
+					data-testid="markdown-help-trigger"
+				>
+					<CircleHelp size={14} />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent align="end" className={styles.helpContent}>
+				<Typography.Text className={styles.helpTitle}>
+					Markdown syntax
+				</Typography.Text>
+				<dl className={styles.helpList}>
+					{MARKDOWN_HELP_ITEMS.map((item) => (
+						<div key={item.syntax} className={styles.helpRow}>
+							<dt>
+								<code>{item.syntax}</code>
+							</dt>
+							<dd>{item.label}</dd>
+						</div>
+					))}
+				</dl>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export default MarkdownHelp;

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

@@ -0,0 +1,270 @@
+import { useCallback, useRef, useState } from 'react';
+import { EditorView } from '@uiw/react-codemirror';
+import { mockCodeMirrorDomApis } from 'components/QueryBuilderV2/QueryV2/__tests__/codemirrorDomMocks';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+
+import MarkdownEditor from '../MarkdownEditor';
+import type { EditorVariable } from '../types';
+
+beforeAll(() => {
+	mockCodeMirrorDomApis();
+});
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => true,
+}));
+
+const VARIABLES: EditorVariable[] = [
+	{ name: 'environment', badge: 'QUERY' },
+	{ name: 'service', badge: 'CUSTOM' },
+];
+
+/** A caller whose state trails the editor by one keystroke. */
+function LaggingHarness(): JSX.Element {
+	const [value, setValue] = useState('');
+	const previousRef = useRef('');
+	const onChange = useCallback((next: string): void => {
+		setValue(previousRef.current);
+		previousRef.current = next;
+	}, []);
+
+	return <MarkdownEditor value={value} onChange={onChange} />;
+}
+
+/** Pushes a replacement in from outside the editor. */
+function ExternalHarness(): JSX.Element {
+	const [value, setValue] = useState('before');
+
+	return (
+		<>
+			<button type="button" onClick={(): void => setValue('after')}>
+				push
+			</button>
+			<MarkdownEditor value={value} onChange={setValue} />
+		</>
+	);
+}
+
+function Harness({
+	initialValue = '',
+	maxLength,
+	variables = VARIABLES,
+}: {
+	initialValue?: string;
+	maxLength?: number;
+	variables?: EditorVariable[];
+}): JSX.Element {
+	const [value, setValue] = useState(initialValue);
+	return (
+		<MarkdownEditor
+			value={value}
+			onChange={setValue}
+			variables={variables}
+			maxLength={maxLength}
+			statusHint="Preview updates as you type"
+		/>
+	);
+}
+
+const getView = (): EditorView => {
+	const dom = document.querySelector('.cm-editor');
+	const view = dom ? EditorView.findFromDOM(dom as HTMLElement) : null;
+	if (!view) {
+		throw new Error('editor view not mounted');
+	}
+	return view;
+};
+
+const select = (from: number, to: number): void => {
+	act(() => {
+		getView().dispatch({ selection: { anchor: from, head: to } });
+	});
+};
+
+const documentText = (): string => getView().state.doc.toString();
+
+describe('MarkdownEditor', () => {
+	it('reports the caret position and character count', async () => {
+		render(<Harness initialValue={'one\ntwo'} />);
+
+		select(5, 5);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('markdown-editor-status')).toHaveTextContent(
+				'Ln 2, Col 2',
+			);
+		});
+		expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
+			'7 chars',
+		);
+	});
+
+	it('flags a body over the character cap', async () => {
+		render(<Harness initialValue="123456" maxLength={5} />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
+				'6 / 5 chars',
+			);
+		});
+	});
+
+	it('applies a toolbar command to the selection', async () => {
+		render(<Harness initialValue="a word b" />);
+
+		select(2, 6);
+		await userEvent.click(screen.getByTestId('markdown-command-bold'));
+
+		await waitFor(() => {
+			expect(documentText()).toBe('a **word** b');
+		});
+	});
+
+	it('inserts a variable token at the caret', async () => {
+		render(<Harness initialValue="env: " />);
+
+		select(5, 5);
+		await userEvent.click(screen.getByTestId('markdown-insert-variable'));
+
+		// The row shows the name and kind badge.
+		const row = await screen.findByTestId('markdown-variable-environment');
+		expect(row).toHaveTextContent('$environment');
+		expect(row).toHaveTextContent('QUERY');
+
+		// fireEvent: userEvent's pointer-down path walks DOM selection APIs the
+		// CodeMirror mocks stub out.
+		fireEvent.click(row);
+
+		await waitFor(() => {
+			expect(documentText()).toBe('env: $environment');
+		});
+	});
+
+	it('colours Markdown syntax and variable tokens in the source', async () => {
+		render(<Harness initialValue={'## Runbook\nowner {{team}}'} />);
+
+		await waitFor(() => {
+			expect(document.querySelector('.cm-md-heading')).toBeInTheDocument();
+		});
+		expect(document.querySelector('.cm-md-variable')).toHaveTextContent(
+			'{{team}}',
+		);
+	});
+
+	describe('uncontrolled document', () => {
+		const type = (at: number, text: string): void => {
+			act(() => {
+				getView().dispatch({
+					changes: { from: at, insert: text },
+					selection: { anchor: at + text.length },
+				});
+			});
+		};
+
+		const focusEditor = (): void => {
+			act(() => {
+				getView().focus();
+			});
+		};
+
+		it('keeps the document and caret while the caller lags behind the typing', () => {
+			render(<LaggingHarness />);
+			focusEditor();
+
+			type(0, 'a');
+			type(1, 'b');
+			type(2, 'c');
+
+			expect(documentText()).toBe('abc');
+			expect(getView().state.selection.main.head).toBe(3);
+		});
+
+		it('reports every keystroke to the caller', () => {
+			const onChange = jest.fn();
+			render(<MarkdownEditor value="ab" onChange={onChange} />);
+
+			type(2, 'c');
+
+			expect(onChange).toHaveBeenLastCalledWith('abc');
+		});
+
+		it('does not report the seed back as a change', () => {
+			const onChange = jest.fn();
+			render(<MarkdownEditor value="seeded" onChange={onChange} />);
+
+			expect(documentText()).toBe('seeded');
+			expect(onChange).not.toHaveBeenCalled();
+		});
+
+		it('applies an external replacement while the editor is unfocused', async () => {
+			render(<ExternalHarness />);
+
+			await userEvent.click(screen.getByRole('button', { name: 'push' }));
+
+			expect(documentText()).toBe('after');
+		});
+
+		it('ignores a replacement that arrives while the author is still typing', () => {
+			render(<ExternalHarness />);
+			focusEditor();
+
+			// fireEvent: a real click would blur the editor first. This covers an update
+			// arriving on its own, while the author is still in the document.
+			fireEvent.click(screen.getByRole('button', { name: 'push' }));
+
+			expect(documentText()).toBe('before');
+		});
+
+		it('counts characters from the document, not from the lagging value', async () => {
+			render(<MarkdownEditor value="ab" onChange={jest.fn()} />);
+
+			type(2, 'cde');
+
+			await waitFor(() => {
+				expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
+					'5 chars',
+				);
+			});
+		});
+	});
+
+	it('offers both list kinds in the toolbar', () => {
+		render(<Harness />);
+
+		expect(
+			screen.getByTestId('markdown-command-bulleted-list'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId('markdown-command-numbered-list'),
+		).toBeInTheDocument();
+	});
+
+	it('disables authoring affordances when read-only', () => {
+		render(
+			<MarkdownEditor
+				value="body"
+				onChange={jest.fn()}
+				variables={VARIABLES}
+				readOnly
+			/>,
+		);
+
+		expect(screen.getByTestId('markdown-command-bold')).toBeDisabled();
+		expect(screen.getByTestId('markdown-insert-variable')).toBeDisabled();
+	});
+
+	it('hides the insert-variable control when none are available', () => {
+		render(<Harness variables={[]} />);
+
+		expect(
+			screen.queryByTestId('markdown-insert-variable'),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/components/MarkdownEditor/__tests__/markdownCommands.test.ts

@@ -0,0 +1,258 @@
+import { insertText, MARKDOWN_COMMANDS } from '../markdownCommands';
+import type { EditorSnapshot, EditorTransform } from '../types';
+
+const commandById = (id: string): EditorTransform => {
+	const command = MARKDOWN_COMMANDS.find((entry) => entry.id === id);
+	if (!command) {
+		throw new Error(`unknown command: ${id}`);
+	}
+	return command.run;
+};
+
+const heading = commandById('heading');
+const bold = commandById('bold');
+const italic = commandById('italic');
+const bulletedList = commandById('bulleted-list');
+const numberedList = commandById('numbered-list');
+const link = commandById('link');
+const code = commandById('code');
+const table = commandById('table');
+
+/** `|` marks a caret, `[...]` a range, so expectations read like the editor looks. */
+const snapshot = (marked: string): EditorSnapshot => {
+	if (marked.includes('|')) {
+		const caret = marked.indexOf('|');
+		return {
+			text: marked.replace('|', ''),
+			selectionStart: caret,
+			selectionEnd: caret,
+		};
+	}
+	const start = marked.indexOf('[');
+	const end = marked.indexOf(']') - 1;
+	return {
+		text: marked.replace('[', '').replace(']', ''),
+		selectionStart: start,
+		selectionEnd: end,
+	};
+};
+
+const selectionOf = (result: EditorSnapshot): string =>
+	result.text.slice(result.selectionStart, result.selectionEnd);
+
+describe('heading', () => {
+	it('prefixes the caret line and keeps the caret on the same character', () => {
+		const result = heading(snapshot('Chec|kout'));
+
+		expect(result.text).toBe('## Checkout');
+		expect(result.selectionStart).toBe(7);
+	});
+
+	it('strips the prefix when every selected line already has one', () => {
+		const result = heading({
+			text: '## one\n### two',
+			selectionStart: 0,
+			selectionEnd: 13,
+		});
+
+		expect(result.text).toBe('one\ntwo');
+	});
+
+	it('adds the prefix when only some selected lines have one', () => {
+		const result = heading({
+			text: '## one\ntwo',
+			selectionStart: 0,
+			selectionEnd: 10,
+		});
+
+		expect(result.text).toBe('## ## one\n## two');
+	});
+
+	it('does not pull in the line after a selection ending on a line break', () => {
+		const result = heading({
+			text: 'one\ntwo',
+			selectionStart: 0,
+			selectionEnd: 4,
+		});
+
+		expect(result.text).toBe('## one\ntwo');
+	});
+});
+
+describe('bulleted list', () => {
+	it('bullets every line of a multi-line selection', () => {
+		const result = bulletedList({
+			text: 'one\ntwo',
+			selectionStart: 0,
+			selectionEnd: 7,
+		});
+
+		expect(result.text).toBe('- one\n- two');
+		expect(selectionOf(result)).toBe('- one\n- two');
+	});
+
+	it('unbullets a list written with a different marker', () => {
+		const result = bulletedList({
+			text: '* one\n+ two',
+			selectionStart: 0,
+			selectionEnd: 11,
+		});
+
+		expect(result.text).toBe('one\ntwo');
+	});
+});
+
+describe('numbered list', () => {
+	it('numbers each line of the selection in order', () => {
+		const result = numberedList({
+			text: 'one\ntwo\nthree',
+			selectionStart: 0,
+			selectionEnd: 13,
+		});
+
+		expect(result.text).toBe('1. one\n2. two\n3. three');
+	});
+
+	it('unnumbers a list whose numbering is not sequential', () => {
+		const result = numberedList({
+			text: '1. one\n5. two',
+			selectionStart: 0,
+			selectionEnd: 13,
+		});
+
+		expect(result.text).toBe('one\ntwo');
+	});
+});
+
+describe('switching between list kinds', () => {
+	it('converts bullets to numbers rather than marking them twice', () => {
+		const result = numberedList({
+			text: '- one\n- two',
+			selectionStart: 0,
+			selectionEnd: 11,
+		});
+
+		expect(result.text).toBe('1. one\n2. two');
+	});
+
+	it('converts numbers to bullets', () => {
+		const result = bulletedList({
+			text: '1. one\n2. two',
+			selectionStart: 0,
+			selectionEnd: 13,
+		});
+
+		expect(result.text).toBe('- one\n- two');
+	});
+
+	it('keeps indentation so nested items stay nested', () => {
+		const result = numberedList({
+			text: 'one\n    - nested',
+			selectionStart: 0,
+			selectionEnd: 16,
+		});
+
+		expect(result.text).toBe('1. one\n    2. nested');
+	});
+});
+
+describe('bold and italic', () => {
+	it('wraps the selection and keeps the original text selected', () => {
+		const result = bold(snapshot('a [word] b'));
+
+		expect(result.text).toBe('a **word** b');
+		expect(selectionOf(result)).toBe('word');
+	});
+
+	it('unwraps when the markers sit inside the selection', () => {
+		const result = bold({
+			text: 'a **word** b',
+			selectionStart: 2,
+			selectionEnd: 10,
+		});
+
+		expect(result.text).toBe('a word b');
+		expect(selectionOf(result)).toBe('word');
+	});
+
+	it('unwraps when the markers sit just outside the selection', () => {
+		const result = bold({
+			text: 'a **word** b',
+			selectionStart: 4,
+			selectionEnd: 8,
+		});
+
+		expect(result.text).toBe('a word b');
+		expect(selectionOf(result)).toBe('word');
+	});
+
+	it('leaves the caret between the markers when nothing is selected', () => {
+		const result = italic(snapshot('a |b'));
+
+		expect(result.text).toBe('a __b');
+		expect(result.selectionStart).toBe(3);
+		expect(result.selectionEnd).toBe(3);
+	});
+
+	it('does not mistake a leading document boundary for a marker', () => {
+		const result = bold(snapshot('[word] tail'));
+
+		expect(result.text).toBe('**word** tail');
+	});
+});
+
+describe('link', () => {
+	it('selects the url when the label came from the selection', () => {
+		const result = link(snapshot('see [docs] now'));
+
+		expect(result.text).toBe('see [docs](https://) now');
+		expect(selectionOf(result)).toBe('https://');
+	});
+
+	it('selects the label placeholder when nothing was selected', () => {
+		const result = link(snapshot('see |'));
+
+		expect(result.text).toBe('see [text](https://)');
+		expect(selectionOf(result)).toBe('text');
+	});
+});
+
+describe('code', () => {
+	it('uses backticks for a single-line selection', () => {
+		const result = code(snapshot('run [npm] here'));
+
+		expect(result.text).toBe('run `npm` here');
+	});
+
+	it('fences a multi-line selection and selects its content', () => {
+		const result = code({
+			text: 'one\ntwo',
+			selectionStart: 0,
+			selectionEnd: 7,
+		});
+
+		expect(result.text).toBe('```\none\ntwo\n```');
+		expect(selectionOf(result)).toBe('one\ntwo');
+	});
+});
+
+describe('table', () => {
+	it('starts the skeleton on its own line and selects the first header cell', () => {
+		const result = table(snapshot('intro|'));
+
+		expect(result.text).toBe(
+			'intro\n| Column | Column |\n| --- | --- |\n|  |  |',
+		);
+		expect(selectionOf(result)).toBe('Column');
+	});
+});
+
+describe('insertText', () => {
+	it('replaces the selection and leaves the caret after the insertion', () => {
+		const result = insertText(snapshot('env is [old]'), '{{env}}');
+
+		expect(result.text).toBe('env is {{env}}');
+		expect(result.selectionStart).toBe(14);
+		expect(result.selectionEnd).toBe(14);
+	});
+});

frontend/src/components/MarkdownEditor/constants.ts

@@ -0,0 +1,24 @@
+// The body is persisted inline in the dashboard JSON, so its length is capped.
+export const MARKDOWN_MAX_LENGTH = 16000;
+
+/** The canonical syntax; the renderer resolves the other three too. */
+export const formatVariableToken = (name: string): string => `$${name}`;
+
+export const MARKDOWN_HELP_ITEMS: { syntax: string; label: string }[] = [
+	// First: consecutive lines joining into one paragraph is the CommonMark rule
+	// authors trip over before any of the formatting syntax.
+	{ syntax: 'blank line', label: 'New paragraph' },
+	{ syntax: '2 spaces + ⏎', label: 'Line break' },
+	{ syntax: '# Heading', label: 'Heading (1–6 #)' },
+	{ syntax: '**bold**', label: 'Bold' },
+	{ syntax: '_italic_', label: 'Italic' },
+	{ syntax: '- item', label: 'Bulleted list' },
+	{ syntax: '1. item', label: 'Numbered list' },
+	{ syntax: '- [ ] task', label: 'Task list' },
+	{ syntax: '[label](url)', label: 'Link' },
+	{ syntax: '![alt](url)', label: 'Image' },
+	{ syntax: '`code`', label: 'Inline code' },
+	{ syntax: '```lang', label: 'Code block' },
+	{ syntax: '> quote', label: 'Blockquote' },
+	{ syntax: '| a | b |', label: 'Table' },
+];

frontend/src/components/MarkdownEditor/editorDocument.ts

@@ -0,0 +1,69 @@
+import { EditorView } from '@uiw/react-codemirror';
+
+import type { EditorSnapshot, EditorTransform } from './types';
+
+// Narrows a whole-document replacement to the range that changed, so a toolbar
+// action doesn't invalidate the document's decorations or scroll position.
+function toChangeSpec(
+	previous: string,
+	next: string,
+): { from: number; to: number; insert: string } | null {
+	if (previous === next) {
+		return null;
+	}
+
+	const shorter = Math.min(previous.length, next.length);
+	let start = 0;
+	while (start < shorter && previous[start] === next[start]) {
+		start += 1;
+	}
+
+	let previousEnd = previous.length;
+	let nextEnd = next.length;
+	while (
+		previousEnd > start &&
+		nextEnd > start &&
+		previous[previousEnd - 1] === next[nextEnd - 1]
+	) {
+		previousEnd -= 1;
+		nextEnd -= 1;
+	}
+
+	return { from: start, to: previousEnd, insert: next.slice(start, nextEnd) };
+}
+
+export function readSnapshot(view: EditorView): EditorSnapshot {
+	const range = view.state.selection.main;
+	return {
+		text: view.state.doc.toString(),
+		selectionStart: range.from,
+		selectionEnd: range.to,
+	};
+}
+
+/** Returns whether the transform ran, as CodeMirror's keymap contract expects. */
+export function applyTransform(
+	view: EditorView,
+	transform: EditorTransform,
+): boolean {
+	if (view.state.readOnly) {
+		return false;
+	}
+
+	const next = transform(readSnapshot(view));
+	const changes = toChangeSpec(view.state.doc.toString(), next.text);
+	view.dispatch({
+		...(changes ? { changes } : {}),
+		selection: { anchor: next.selectionStart, head: next.selectionEnd },
+		scrollIntoView: true,
+	});
+	view.focus();
+	return true;
+}
+
+/** Replaces the whole document, for seeding and external replacements. */
+export function replaceDocument(view: EditorView, next: string): void {
+	view.dispatch({
+		changes: { from: 0, to: view.state.doc.length, insert: next },
+	});
+}

frontend/src/components/MarkdownEditor/markdownCommands.ts

@@ -0,0 +1,269 @@
+import type { EditorCommand, EditorSnapshot, EditorTransform } from './types';
+
+const BOLD_MARKER = '**';
+const ITALIC_MARKER = '_';
+const INLINE_CODE_MARKER = '`';
+const CODE_FENCE = '```';
+const HEADING_PREFIX = '## ';
+const BULLET_MARKER = '- ';
+
+const HEADING_PATTERN = /^ {0,3}#{1,6} /;
+const BULLET_LIST_PATTERN = /^[ \t]*[-*+] /;
+const ORDERED_LIST_PATTERN = /^[ \t]*\d+\. /;
+// Either kind of marker, matched after the indent has been split off.
+const LIST_MARKER_PATTERN = /^(?:[-*+]|\d+\.) /;
+const INDENT_PATTERN = /^[ \t]*/;
+
+const LINK_LABEL_PLACEHOLDER = 'text';
+const LINK_URL_PLACEHOLDER = 'https://';
+const TABLE_CELL_PLACEHOLDER = 'Column';
+const TABLE_SNIPPET = [
+	`| ${TABLE_CELL_PLACEHOLDER} | ${TABLE_CELL_PLACEHOLDER} |`,
+	'| --- | --- |',
+	'|  |  |',
+].join('\n');
+
+interface LineRange {
+	start: number;
+	end: number;
+}
+
+// A selection ending exactly on a line break stops there rather than pulling in
+// the next line, so "select the line, hit list" doesn't bullet the line below too.
+function expandToLines(text: string, from: number, to: number): LineRange {
+	const end = to > from && text[to - 1] === '\n' ? to - 1 : to;
+	const breakBefore = from === 0 ? -1 : text.lastIndexOf('\n', from - 1);
+	const breakAfter = text.indexOf('\n', end);
+	return {
+		start: breakBefore + 1,
+		end: breakAfter === -1 ? text.length : breakAfter,
+	};
+}
+
+/** Pads `block` so it starts and ends on its own line. */
+function replaceWithBlock(
+	snapshot: EditorSnapshot,
+	block: string,
+): { text: string; blockStart: number } {
+	const { text, selectionStart, selectionEnd } = snapshot;
+	const before = text.slice(0, selectionStart);
+	const after = text.slice(selectionEnd);
+	const lead = before === '' || before.endsWith('\n') ? '' : '\n';
+	const trail = after === '' || after.startsWith('\n') ? '' : '\n';
+	return {
+		text: before + lead + block + trail + after,
+		blockStart: before.length + lead.length,
+	};
+}
+
+/** Rewrites every line the selection touches. */
+function replaceLines(
+	snapshot: EditorSnapshot,
+	mapLines: (lines: string[]) => string[],
+): EditorSnapshot {
+	const { text, selectionStart, selectionEnd } = snapshot;
+	const { start, end } = expandToLines(text, selectionStart, selectionEnd);
+	const lines = text.slice(start, end).split('\n');
+	const nextLines = mapLines(lines);
+	const block = nextLines.join('\n');
+	const nextText = text.slice(0, start) + block + text.slice(end);
+
+	if (selectionStart !== selectionEnd) {
+		return {
+			text: nextText,
+			selectionStart: start,
+			selectionEnd: start + block.length,
+		};
+	}
+
+	// Caret-only: the range covers one line, so shift by that line's delta.
+	const shifted = selectionStart + nextLines[0].length - lines[0].length;
+	const caret = Math.min(Math.max(shifted, start), start + nextLines[0].length);
+	return { text: nextText, selectionStart: caret, selectionEnd: caret };
+}
+
+/** Strips `prefix` when every selected line already matches `pattern`, else adds it. */
+function toggleLinePrefix(prefix: string, pattern: RegExp): EditorTransform {
+	return (snapshot): EditorSnapshot =>
+		replaceLines(snapshot, (lines) => {
+			const isApplied = lines.every((line) => pattern.test(line));
+			return lines.map((line) =>
+				isApplied ? line.replace(pattern, '') : `${prefix}${line}`,
+			);
+		});
+}
+
+/**
+ * Toggles this kind of list marker. A line carrying the *other* kind is converted
+ * rather than marked twice, and indentation is preserved so nesting survives.
+ * `markerAt` takes the line's position, which is what lets an ordered list number.
+ */
+function toggleList(
+	pattern: RegExp,
+	markerAt: (index: number) => string,
+): EditorTransform {
+	return (snapshot): EditorSnapshot =>
+		replaceLines(snapshot, (lines) => {
+			const isApplied = lines.every((line) => pattern.test(line));
+			return lines.map((line, index) => {
+				const indent = INDENT_PATTERN.exec(line)?.[0] ?? '';
+				const body = line.slice(indent.length).replace(LIST_MARKER_PATTERN, '');
+				return isApplied
+					? `${indent}${body}`
+					: `${indent}${markerAt(index)}${body}`;
+			});
+		});
+}
+
+/**
+ * Unwraps when the markers are already there, whether they sit inside the selection
+ * (`**bold**` selected whole) or just outside it (only `bold` selected).
+ */
+function toggleWrap(marker: string): EditorTransform {
+	return ({ text, selectionStart, selectionEnd }): EditorSnapshot => {
+		const selected = text.slice(selectionStart, selectionEnd);
+		const width = marker.length;
+
+		if (
+			selected.length >= width * 2 &&
+			selected.startsWith(marker) &&
+			selected.endsWith(marker)
+		) {
+			const inner = selected.slice(width, -width);
+			return {
+				text: text.slice(0, selectionStart) + inner + text.slice(selectionEnd),
+				selectionStart,
+				selectionEnd: selectionStart + inner.length,
+			};
+		}
+
+		if (
+			selectionStart >= width &&
+			text.slice(selectionStart - width, selectionStart) === marker &&
+			text.slice(selectionEnd, selectionEnd + width) === marker
+		) {
+			return {
+				text:
+					text.slice(0, selectionStart - width) +
+					selected +
+					text.slice(selectionEnd + width),
+				selectionStart: selectionStart - width,
+				selectionEnd: selectionStart - width + selected.length,
+			};
+		}
+
+		return {
+			text:
+				text.slice(0, selectionStart) +
+				marker +
+				selected +
+				marker +
+				text.slice(selectionEnd),
+			selectionStart: selectionStart + width,
+			selectionEnd: selectionStart + width + selected.length,
+		};
+	};
+}
+
+/** Lands the selection on whichever half is still a placeholder. */
+const insertLink: EditorTransform = ({
+	text,
+	selectionStart,
+	selectionEnd,
+}): EditorSnapshot => {
+	const selected = text.slice(selectionStart, selectionEnd);
+	const label = selected || LINK_LABEL_PLACEHOLDER;
+	const snippet = `[${label}](${LINK_URL_PLACEHOLDER})`;
+	const nextText =
+		text.slice(0, selectionStart) + snippet + text.slice(selectionEnd);
+	// `[` + label + `](` is label.length + 3 characters.
+	const target = selected
+		? {
+				from: selectionStart + label.length + 3,
+				length: LINK_URL_PLACEHOLDER.length,
+			}
+		: { from: selectionStart + 1, length: label.length };
+
+	return {
+		text: nextText,
+		selectionStart: target.from,
+		selectionEnd: target.from + target.length,
+	};
+};
+
+/** Backticks for a single-line selection, a fence for a multi-line one. */
+const insertCode: EditorTransform = (snapshot): EditorSnapshot => {
+	const { text, selectionStart, selectionEnd } = snapshot;
+	const selected = text.slice(selectionStart, selectionEnd);
+	if (!selected.includes('\n')) {
+		return toggleWrap(INLINE_CODE_MARKER)(snapshot);
+	}
+
+	const { text: nextText, blockStart } = replaceWithBlock(
+		snapshot,
+		`${CODE_FENCE}\n${selected}\n${CODE_FENCE}`,
+	);
+	const contentStart = blockStart + CODE_FENCE.length + 1;
+	return {
+		text: nextText,
+		selectionStart: contentStart,
+		selectionEnd: contentStart + selected.length,
+	};
+};
+
+/** Selects the first header cell, for immediate typing. */
+const insertTable: EditorTransform = (snapshot): EditorSnapshot => {
+	const { text, blockStart } = replaceWithBlock(snapshot, TABLE_SNIPPET);
+	const firstCell = blockStart + TABLE_SNIPPET.indexOf(TABLE_CELL_PLACEHOLDER);
+	return {
+		text,
+		selectionStart: firstCell,
+		selectionEnd: firstCell + TABLE_CELL_PLACEHOLDER.length,
+	};
+};
+
+/** Replaces the selection and leaves the caret after the insertion. */
+export function insertText(
+	snapshot: EditorSnapshot,
+	value: string,
+): EditorSnapshot {
+	const { text, selectionStart, selectionEnd } = snapshot;
+	const caret = selectionStart + value.length;
+	return {
+		text: text.slice(0, selectionStart) + value + text.slice(selectionEnd),
+		selectionStart: caret,
+		selectionEnd: caret,
+	};
+}
+
+/** Display order. A new action is an entry here plus an icon in `EditorToolbar`. */
+export const MARKDOWN_COMMANDS: EditorCommand[] = [
+	{
+		id: 'heading',
+		label: 'Heading',
+		run: toggleLinePrefix(HEADING_PREFIX, HEADING_PATTERN),
+	},
+	{
+		id: 'bold',
+		label: 'Bold',
+		run: toggleWrap(BOLD_MARKER),
+	},
+	{
+		id: 'italic',
+		label: 'Italic',
+		run: toggleWrap(ITALIC_MARKER),
+	},
+	{
+		id: 'bulleted-list',
+		label: 'Bulleted list',
+		run: toggleList(BULLET_LIST_PATTERN, () => BULLET_MARKER),
+	},
+	{
+		id: 'numbered-list',
+		label: 'Numbered list',
+		run: toggleList(ORDERED_LIST_PATTERN, (index) => `${index + 1}. `),
+	},
+	{ id: 'link', label: 'Link', run: insertLink },
+	{ id: 'code', label: 'Code', run: insertCode },
+	{ id: 'table', label: 'Table', run: insertTable },
+];

frontend/src/components/MarkdownEditor/markdownHighlight.ts

@@ -0,0 +1,149 @@
+import type { Extension, Line, Range } from '@codemirror/state';
+import {
+	Decoration,
+	type DecorationSet,
+	EditorView,
+	ViewPlugin,
+	type ViewUpdate,
+} from '@codemirror/view';
+
+const FENCE_PATTERN = /^ {0,3}(```|~~~)/;
+const HEADING_PATTERN = /^ {0,3}#{1,6} /;
+const QUOTE_PATTERN = /^ {0,3}> ?/;
+const LIST_MARKER_PATTERN = /^ {0,3}([-*+]|\d+\.) /;
+
+/**
+ * Convention: capture group 1, when present, is a left guard the token excludes —
+ * the token runs from the end of that group to the end of the match. Lookbehind is
+ * avoided for Safari compatibility, so guards are captured rather than asserted.
+ */
+const INLINE_PATTERNS: { pattern: RegExp; className: string }[] = [
+	{ pattern: /`[^`\n]+`/g, className: 'cm-md-code' },
+	{ pattern: /\*\*[^*\n]+\*\*/g, className: 'cm-md-strong' },
+	{ pattern: /(^|[^\w*_`])_[^_\n]+_(?![\w_])/g, className: 'cm-md-emphasis' },
+	{ pattern: /!?\[[^\]\n]*\]\([^)\n]*\)/g, className: 'cm-md-link' },
+	{
+		// The four variable syntaxes a dashboard body may carry.
+		pattern:
+			/\{\{\s*\.?[\w.-]+\s*\}\}|\[\[\s*[\w.-]+\s*\]\]|\$(?!__)[A-Za-z_]\w*(?:\.\w+)*/g,
+		className: 'cm-md-variable',
+	},
+];
+
+const MARKS = {
+	heading: Decoration.mark({ class: 'cm-md-heading' }),
+	quote: Decoration.mark({ class: 'cm-md-quote' }),
+	listMarker: Decoration.mark({ class: 'cm-md-list-marker' }),
+	code: Decoration.mark({ class: 'cm-md-code' }),
+} as const;
+
+const INLINE_MARKS = INLINE_PATTERNS.map(({ pattern, className }) => ({
+	pattern,
+	mark: Decoration.mark({ class: className }),
+}));
+
+function pushInlineMarks(
+	lineText: string,
+	lineFrom: number,
+	ranges: Range<Decoration>[],
+): void {
+	INLINE_MARKS.forEach(({ pattern, mark }) => {
+		pattern.lastIndex = 0;
+		let match = pattern.exec(lineText);
+		while (match !== null) {
+			const guardLength = match[1]?.length ?? 0;
+			const from = lineFrom + match.index + guardLength;
+			const to = lineFrom + match.index + match[0].length;
+			if (to > from) {
+				ranges.push(mark.range(from, to));
+			}
+			match = pattern.exec(lineText);
+		}
+	});
+}
+
+function pushBlockMark(line: Line, ranges: Range<Decoration>[]): void {
+	if (HEADING_PATTERN.test(line.text)) {
+		ranges.push(MARKS.heading.range(line.from, line.to));
+		return;
+	}
+	if (QUOTE_PATTERN.test(line.text)) {
+		ranges.push(MARKS.quote.range(line.from, line.to));
+		return;
+	}
+	const listMarker = LIST_MARKER_PATTERN.exec(line.text);
+	if (listMarker) {
+		ranges.push(
+			MARKS.listMarker.range(line.from, line.from + listMarker[0].length),
+		);
+	}
+}
+
+// Scans the whole document rather than the viewport: fenced blocks opening above
+// the visible range would otherwise be mis-detected. Bounded by the length cap.
+function buildDecorations(view: EditorView): DecorationSet {
+	const { doc } = view.state;
+	const ranges: Range<Decoration>[] = [];
+	let isInsideFence = false;
+
+	for (let lineNumber = 1; lineNumber <= doc.lines; lineNumber += 1) {
+		const line = doc.line(lineNumber);
+		const isFenceDelimiter = FENCE_PATTERN.test(line.text);
+
+		if (isFenceDelimiter || isInsideFence) {
+			if (line.to > line.from) {
+				ranges.push(MARKS.code.range(line.from, line.to));
+			}
+			isInsideFence = isFenceDelimiter ? !isInsideFence : isInsideFence;
+		} else {
+			pushBlockMark(line, ranges);
+			pushInlineMarks(line.text, line.from, ranges);
+		}
+	}
+
+	return Decoration.set(ranges, true);
+}
+
+// Colours come from custom properties so the SCSS module owns light/dark.
+const syntaxTheme = EditorView.theme({
+	'.cm-md-heading': {
+		color: 'var(--md-syntax-heading)',
+		fontWeight: '600',
+	},
+	'.cm-md-quote': { color: 'var(--md-syntax-quote)', fontStyle: 'italic' },
+	'.cm-md-list-marker': { color: 'var(--md-syntax-marker)' },
+	'.cm-md-code': { color: 'var(--md-syntax-code)' },
+	'.cm-md-strong': { color: 'var(--md-syntax-strong)', fontWeight: '600' },
+	'.cm-md-emphasis': {
+		color: 'var(--md-syntax-emphasis)',
+		fontStyle: 'italic',
+	},
+	'.cm-md-link': { color: 'var(--md-syntax-link)' },
+	'.cm-md-variable': { color: 'var(--md-syntax-variable)' },
+});
+
+const highlightPlugin = ViewPlugin.fromClass(
+	class {
+		decorations: DecorationSet;
+
+		constructor(view: EditorView) {
+			this.decorations = buildDecorations(view);
+		}
+
+		update(update: ViewUpdate): void {
+			if (update.docChanged || update.viewportChanged) {
+				this.decorations = buildDecorations(update.view);
+			}
+		}
+	},
+	{ decorations: (plugin): DecorationSet => plugin.decorations },
+);
+
+/**
+ * Decorations rather than a grammar, so the editor stays on the CodeMirror packages
+ * already bundled — no `@codemirror/lang-markdown` / `@lezer` for what is only a
+ * colouring pass over a body the renderer parses for real.
+ */
+export function markdownHighlight(): Extension {
+	return [highlightPlugin, syntaxTheme];
+}

frontend/src/components/MarkdownEditor/types.ts

@@ -0,0 +1,27 @@
+/** The value every editor command reads and returns. */
+export interface EditorSnapshot {
+	text: string;
+	selectionStart: number;
+	selectionEnd: number;
+}
+
+export type EditorTransform = (snapshot: EditorSnapshot) => EditorSnapshot;
+
+export interface EditorVariable {
+	name: string;
+	/** Short tag for the variable's kind, e.g. "QUERY". */
+	badge?: string;
+}
+
+export interface EditorCommand {
+	id: string;
+	/** Accessible name and tooltip for the toolbar button. */
+	label: string;
+	run: EditorTransform;
+}
+
+/** 1-based, as the status bar reports it. */
+export interface CursorPosition {
+	line: number;
+	column: number;
+}

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -1,585 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import configureStore from 'redux-mock-store';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import VariableItem from '../../../container/DashboardContainer/DashboardVariablesSelection/VariableItem';
-
-// Mock the dashboard variables query
-jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() =>
-		Promise.resolve({
-			payload: {
-				variableValues: ['option1', 'option2', 'option3', 'option4'],
-			},
-		}),
-	),
-}));
-
-// Mock scrollIntoView which isn't available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Constants
-const TEST_VARIABLE_NAME = 'test_variable';
-const TEST_VARIABLE_ID = 'test-var-id';
-
-// Create a mock store
-const mockStore = configureStore([])({
-	globalTime: {
-		minTime: Date.now() - 3600000, // 1 hour ago
-		maxTime: Date.now(),
-	},
-});
-
-// Test data
-const createMockVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: TEST_VARIABLE_ID,
-	name: TEST_VARIABLE_NAME,
-	description: 'Test variable description',
-	type: 'QUERY',
-	queryValue: 'SELECT DISTINCT value FROM table',
-	customValue: '',
-	sort: 'ASC',
-	multiSelect: false,
-	showALLOption: true,
-	selectedValue: [],
-	allSelected: false,
-	...overrides,
-});
-
-function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { retry: false },
-		},
-	});
-
-	return (
-		<Provider store={mockStore}>
-			<QueryClientProvider client={queryClient}>
-				<VirtuosoMockContext.Provider
-					value={{ viewportHeight: 300, itemHeight: 40 }}
-				>
-					{children}
-				</VirtuosoMockContext.Provider>
-			</QueryClientProvider>
-		</Provider>
-	);
-}
-
-describe('VariableItem Integration Tests', () => {
-	let user: ReturnType<typeof userEvent.setup>;
-	let mockOnValueUpdate: jest.Mock;
-
-	beforeEach(() => {
-		user = userEvent.setup();
-		mockOnValueUpdate = jest.fn();
-		jest.clearAllMocks();
-	});
-
-	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
-	describe('CustomSelect Integration (VI)', () => {
-		it('VI-01: Single select variable integration', async () => {
-			const variable = createMockVariable({
-				multiSelect: false,
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render with CustomSelect
-			const combobox = screen.getByRole('combobox');
-			expect(combobox).toBeInTheDocument();
-
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('option1')).toBeInTheDocument();
-				expect(screen.getByText('option2')).toBeInTheDocument();
-				expect(screen.getByText('option3')).toBeInTheDocument();
-			});
-
-			// Select an option
-			const option1 = screen.getByText('option1');
-			await user.click(option1);
-
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				TEST_VARIABLE_NAME,
-				TEST_VARIABLE_ID,
-				'option1',
-				false,
-			);
-		});
-	});
-
-	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
-	describe('CustomMultiSelect Integration (VI)', () => {
-		it('VI-02: Multi select variable integration', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3,option4',
-				showALLOption: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render with CustomMultiSelect
-			const combobox = screen.getByRole('combobox');
-			expect(combobox).toBeInTheDocument();
-
-			await user.click(combobox);
-
-			await waitFor(() => {
-				// Should show ALL option
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			// Wait for Virtuoso to render the custom options
-			await waitFor(
-				() => {
-					expect(screen.getByText('option1')).toBeInTheDocument();
-					expect(screen.getByText('option2')).toBeInTheDocument();
-					expect(screen.getByText('option3')).toBeInTheDocument();
-					expect(screen.getByText('option4')).toBeInTheDocument();
-				},
-				{ timeout: 5000 },
-			);
-		});
-	});
-
-	// ===== 3. TEXTBOX VARIABLE TYPE =====
-	describe('Textbox Variable Integration', () => {
-		it('VI-03: Textbox variable handling', async () => {
-			const variable = createMockVariable({
-				type: 'TEXTBOX',
-				selectedValue: 'initial-value',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render a regular input
-			const textInput = screen.getByDisplayValue('initial-value');
-			expect(textInput).toBeInTheDocument();
-			expect(textInput.tagName).toBe('INPUT');
-
-			// Clear and type new value
-			await user.clear(textInput);
-			await user.type(textInput, 'new-text-value');
-
-			// Blur the input to trigger the value update
-			await user.tab();
-
-			// Should call onValueUpdate after blur
-			await waitFor(
-				() => {
-					expect(mockOnValueUpdate).toHaveBeenCalledWith(
-						TEST_VARIABLE_NAME,
-						TEST_VARIABLE_ID,
-						'new-text-value',
-						false,
-					);
-				},
-				{ timeout: 1000 },
-			);
-		});
-	});
-
-	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
-	describe('Value Persistence and State Management', () => {
-		it('VI-04: All selected state handling', () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'service1,service2,service3',
-				selectedValue: ['service1', 'service2', 'service3'],
-				allSelected: true,
-				showALLOption: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show "ALL" instead of individual values
-			expect(screen.getByText('ALL')).toBeInTheDocument();
-		});
-
-		it('VI-05: Dropdown behavior with temporary selections', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'item1,item2,item3',
-				selectedValue: ['item1'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Wait for dropdown to open
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-		});
-	});
-
-	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
-	describe('Accessibility and User Experience', () => {
-		it('VI-06: Variable description tooltip', async () => {
-			const variable = createMockVariable({
-				description: 'This variable controls the service selection',
-				type: 'CUSTOM',
-				customValue: 'service1,service2',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show info icon
-			const infoIcon = document.querySelector('.info-icon');
-			expect(infoIcon).toBeInTheDocument();
-
-			// Hover to show tooltip
-			if (infoIcon) {
-				await user.hover(infoIcon);
-			}
-
-			await waitFor(() => {
-				expect(
-					screen.getByText('This variable controls the service selection'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('VI-07: Variable name display', () => {
-			const variable = createMockVariable({
-				name: 'service_name',
-				type: 'CUSTOM',
-				customValue: 'service1,service2',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show variable name with $ prefix
-			expect(screen.getByText('$service_name')).toBeInTheDocument();
-		});
-
-		it('VI-08: Max tag count behavior', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'tag1,tag2,tag3,tag4,tag5,tag6,tag7',
-				selectedValue: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to render
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			// Should show limited number of tags with "+ X more"
-			const tags = document.querySelectorAll('.ant-select-selection-item');
-
-			// The component should render without crashing
-			expect(tags.length).toBeGreaterThanOrEqual(0);
-		});
-	});
-
-	// ===== 8. SEARCH INTERACTION TESTS =====
-	describe('Search Interaction Tests', () => {
-		it('VI-14: Search persistence across dropdown open/close', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			const searchInput = document.querySelector(
-				'.ant-select-selection-search-input',
-			);
-			expect(searchInput).toBeInTheDocument();
-
-			if (searchInput) {
-				await user.type(searchInput, 'search-text');
-			}
-
-			// Verify search text is in input
-			await waitFor(() => {
-				expect(searchInput).toHaveValue('search-text');
-			});
-
-			// Press Escape to close dropdown
-			await user.keyboard('{Escape}');
-
-			// Dropdown should close and search text should be cleared
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
-				expect(searchInput).toHaveValue('');
-			});
-		});
-	});
-
-	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
-	describe('Advanced Keyboard Navigation (VI)', () => {
-		it('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-				selectedValue: ['option1', 'option2', 'option3'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Navigate to chips using arrow keys
-			await user.keyboard('{ArrowLeft}');
-
-			// Use Shift + Arrow to navigate between chips
-			await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
-
-			// Use Del to delete the active chip
-			await user.keyboard('{Delete}');
-
-			// Note: The component may not immediately call onValueUpdate
-			// This test verifies the chip deletion behavior
-			await waitFor(() => {
-				// Check if a chip was removed from the selection
-				const selectionItems = document.querySelectorAll(
-					'.ant-select-selection-item',
-				);
-				expect(selectionItems.length).toBeLessThan(3);
-			});
-		});
-	});
-
-	// ===== 11. ADVANCED UI STATES =====
-	describe('Advanced UI States (VI)', () => {
-		it('VI-19: No data with previous value selected in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: '',
-				multiSelect: true,
-				selectedValue: ['previous-value'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to initialize
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Should show no data message (the component may not show this exact text)
-			await waitFor(() => {
-				// Check if dropdown is empty or shows no data indication
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-		});
-
-		it('VI-20: Always editable accessibility in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-
-			// Should be editable
-			expect(combobox).not.toBeDisabled();
-			await user.click(combobox);
-			expect(combobox).toHaveFocus();
-
-			// Should still be interactive
-			expect(combobox).not.toBeDisabled();
-		});
-	});
-
-	// ===== 13. DROPDOWN PERSISTENCE =====
-	describe('Dropdown Persistence (VI)', () => {
-		it('VI-24: Dropdown stays open for non-save actions in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to initialize
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			// Navigate with arrow keys (non-save action)
-			await user.keyboard('{ArrowDown}');
-			await user.keyboard('{ArrowDown}');
-
-			// Dropdown should still be open
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-
-			// Only ESC should close the dropdown
-			await user.keyboard('{Escape}');
-
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
-			});
-		});
-	});
-});

frontend/src/components/NewSelect/utils.ts

@@ -1,11 +1,26 @@
-import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-
 import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
 export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
 
+/** De-duplicate options by `value`, keeping the first occurrence. */
+export const uniqueOptions = (options: OptionData[]): OptionData[] => {
+	const deduped: OptionData[] = [];
+	const seenValues = new Set<string>();
+
+	options.forEach((option) => {
+		const value = option.value || '';
+		if (seenValues.has(value)) {
+			return;
+		}
+		seenValues.add(value);
+		deduped.push(option);
+	});
+
+	return deduped;
+};
+
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,

frontend/src/components/PlotTag/PlotTag.tsx

@@ -2,7 +2,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Spline } from '@signozhq/icons';
 import { EQueryType } from 'types/common/dashboard';
 
-import QueryTypeTag from '../QueryTypeTag';
+import QueryTypeTag from 'components/QueryTypeTag/QueryTypeTag';
 
 interface IPlotTagProps {
 	queryType: EQueryType;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -241,28 +241,29 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						))
 					)}
 
-					{!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];
+					{!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}
-											isQBV2
-										/>
-									</div>
-								);
-							})}
-						</div>
-					)}
+									return (
+										<div key={formula.queryName} className="qb-formula">
+											<Formula
+												filterConfigs={filterConfigs}
+												query={query}
+												formula={formula}
+												index={index}
+												isAdditionalFilterEnable={false}
+												isQBV2
+											/>
+										</div>
+									);
+								})}
+							</div>
+						)}
 
 					{shouldShowFooter && (
 						<QueryFooter
@@ -290,7 +291,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							</div>
 						))}
 
-						{currentQuery.builder.queryFormulas.map((formula) => (
+						{currentQuery.builder.queryFormulas?.map((formula) => (
 							<div key={formula.queryName} className="formula-name">
 								{formula.queryName}
 							</div>

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

@@ -27,7 +27,7 @@ import {
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
 } from 'constants/antlrQueryConstants';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
@@ -258,10 +258,7 @@ function QuerySearch({
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
 	const generateOptions = (keys: {
@@ -1188,8 +1185,8 @@ function QuerySearch({
 			);
 
 			// Add dynamic variables suggestions for the current key
-			const variableName = dashboardDynamicVariables?.find(
-				(variable) => variable?.dynamicVariablesAttribute === keyName,
+			const variableName = dashboardDynamicVariables.find(
+				(variable) => variable.attribute === keyName,
 			)?.name;
 
 			if (variableName) {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -17,12 +17,6 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): { dashboardData: undefined } => ({
-		dashboardData: undefined,
-	}),
-}));
-
 // Shrink the suggestion-fetch debounce (300ms in prod) so these integration
 // tests aren't paced by it; coalescing semantics stay intact.
 jest.mock('../QuerySearch/constants', () => ({

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -21,12 +21,6 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): { dashboardData: undefined } => ({
-		dashboardData: undefined,
-	}),
-}));
-
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {
@@ -152,15 +146,16 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			/>,
 		);
 
-		// Wait for debounced API call (300ms debounce + some buffer)
-		await waitFor(() => expect(mockedGetKeysOnMount).toHaveBeenCalled(), {
-			timeout: 2000,
-		});
-
-		const lastArgs = mockedGetKeysOnMount.mock.calls[
-			mockedGetKeysOnMount.mock.calls.length - 1
-		]?.[0] as { signal: unknown; searchText: string };
-		expect(lastArgs).toMatchObject({ signal: DataSource.LOGS, searchText: '' });
+		// Wait for the mount fetch specifically. A debounced fetch from an earlier test
+		// can still land after mockClear(), so waiting on "any call" would let this
+		// assert against that one instead and make the result order-dependent.
+		await waitFor(
+			() =>
+				expect(mockedGetKeysOnMount).toHaveBeenCalledWith(
+					expect.objectContaining({ signal: DataSource.LOGS, searchText: '' }),
+				),
+			{ timeout: 2000 },
+		);
 	});
 
 	it('calls provided onRun on Mod-Enter', async () => {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -212,6 +212,32 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		expect(handleRunQueryMock).toHaveBeenCalled();
 	});
 
+	it('does not crash when builder.queryFormulas/queryTraceOperator are missing (partial/legacy query)', () => {
+		const currentQueryBase = baseQBContext.currentQuery as Query;
+
+		mockedUseQueryBuilder.mockReturnValue({
+			...baseQBContext,
+			currentQuery: {
+				...currentQueryBase,
+				builder: {
+					queryData: currentQueryBase.builder.queryData,
+					queryFormulas: undefined as unknown as [],
+					queryTraceOperator: undefined as unknown as [],
+				},
+			},
+		});
+
+		expect(() =>
+			render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />),
+		).not.toThrow();
+
+		// query list still renders from queryData, formulas block is skipped
+		expect(document.querySelector('.query-names-section')).toBeInTheDocument();
+		expect(
+			document.querySelector('.qb-formulas-container'),
+		).not.toBeInTheDocument();
+	});
+
 	it('fx button is disabled when functions already exist', () => {
 		const currentQueryBase = baseQBContext.currentQuery as Query;
 		const supersetQueryBase = baseQBContext.supersetQuery as Query;

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/RecentSearches.test.tsx

@@ -31,12 +31,6 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): { dashboardData: undefined } => ({
-		dashboardData: undefined,
-	}),
-}));
-
 jest.mock('api/querySuggestions/getKeySuggestions', () => ({
 	getKeySuggestions: jest.fn().mockResolvedValue({
 		data: { data: { keys: {} } },

frontend/src/components/QueryBuilderV2/utils.ts

@@ -525,6 +525,34 @@ export const convertFiltersToExpressionWithExistingQuery = (
 	};
 };
 
+/**
+ * Canonical name for a comparison's operator, limited to the equality and
+ * membership forms. Every other shape (LIKE, BETWEEN, EXISTS, CONTAINS, REGEXP,
+ * the ordering operators) returns undefined, so an operator-restricted removal
+ * leaves it in place.
+ *
+ * The ANTLR4 runtime returns null for an absent token or rule despite the
+ * non-nullable TypeScript signatures.
+ */
+const getComparisonOperator = (ctx: ComparisonContext): string | undefined => {
+	if ((ctx.inClause() as unknown) !== null) {
+		return 'in';
+	}
+	if ((ctx.notInClause() as unknown) !== null) {
+		return 'not in';
+	}
+	if ((ctx.EQUALS() as unknown) !== null) {
+		return '=';
+	}
+	if (
+		(ctx.NOT_EQUALS() as unknown) !== null ||
+		(ctx.NEQ() as unknown) !== null
+	) {
+		return '!=';
+	}
+	return undefined;
+};
+
 /**
  * Removes clauses for specified keys from a filter query expression.
  *
@@ -542,12 +570,16 @@ export const convertFiltersToExpressionWithExistingQuery = (
  *   - `true`: removes only the first clause whose value contains any `$`.
  *   - `string` (e.g. `"$service.name"`): removes only the clause whose value exactly
  *     matches that string — preferred when the specific variable reference is known.
+ * @param operatorsToRemove - When given, restricts removal to clauses whose operator
+ *   is in this set (`=`, `!=`, `in`, `not in`); every other clause on the key is kept.
+ *   Omit to remove a matching key's clauses whatever their operator.
  * @returns The rewritten expression, or an empty string if all clauses were removed.
  */
 export const removeKeysFromExpression = (
 	expression: string,
 	keysToRemove: string[],
 	removeOnlyVariableExpressions: string | boolean = false,
+	operatorsToRemove?: string[],
 ): string => {
 	if (!keysToRemove || keysToRemove.length === 0) {
 		return expression;
@@ -557,6 +589,9 @@ export const removeKeysFromExpression = (
 	}
 
 	const keysSet = new Set(keysToRemove.map((k) => k.trim().toLowerCase()));
+	const operatorsSet = operatorsToRemove
+		? new Set(operatorsToRemove.map((op) => op.trim().toLowerCase()))
+		: null;
 	// Tracks keys for which a variable expression has already been removed.
 	// Having multiple $-value clauses for the same key is invalid; we remove at most one.
 	const removedVariableKeys = new Set<string>();
@@ -658,6 +693,13 @@ export const removeKeysFromExpression = (
 			return src(ctx);
 		}
 
+		if (operatorsSet) {
+			const operator = getComparisonOperator(ctx);
+			if (!operator || !operatorsSet.has(operator)) {
+				return src(ctx);
+			}
+		}
+
 		if (removeOnlyVariableExpressions) {
 			// Scope the value check to value nodes only — not the full comparison text —
 			// so a key that contains '$' does not trigger removal when the value is a

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.test.ts

@@ -0,0 +1,526 @@
+import {
+	convertFiltersToExpression,
+	convertFiltersToExpressionWithExistingQuery,
+} from 'components/QueryBuilderV2/utils';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
+import {
+	Query,
+	TagFilter,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	applyCheckboxToggle,
+	clearFilterFromQuery,
+	deriveCheckboxState,
+	getNotInOperator,
+} from './checkboxFilterQuery';
+import { CheckedState } from '../../types';
+import { SectionType } from './v2/itemRules';
+
+const KEY = 'service.name';
+
+/**
+ * Mini test framework
+ * -------------------
+ * `filters.items` is the source of truth the checkbox algebra mutates.
+ * `filter.expression` is the derived value the backend actually reads, and it is
+ * authoritatively rebuilt from the items on every URL round trip
+ * (`useGetCompositeQueryParam` -> `convertFiltersToExpressionWithExistingQuery`).
+ * That rebuild is additive, so `applyCheckboxToggle` re-derives its own clauses
+ * into the expression itself: otherwise the round trip resurrects a clause the
+ * toggle removed, or appends a duplicate of one it replaced.
+ *
+ * So a case does not assert the intermediate expression the toggle emits. It
+ * asserts the pair that has to stay consistent:
+ *   - `items`      : exact structured clauses after the toggle
+ *   - `expression` : the expression AFTER the round trip, which is what ships
+ *
+ * `runToggle` runs the real reducer, then feeds its output through the real
+ * converter to get the shipped expression.
+ */
+
+type SimpleItem = {
+	key: string;
+	op: string;
+	value: TagFilterItem['value'];
+};
+
+function toTagItem(item: SimpleItem, idx: number): TagFilterItem {
+	return {
+		id: `id-${idx}`,
+		key: { key: item.key, type: 'tag' } as TagFilterItem['key'],
+		op: item.op,
+		value: item.value,
+	};
+}
+
+// Serialises items into an expression (via the app's own converter) so a case's
+// starting state is self-consistent (items and expression agree), the way it
+// would be in the app after a prior round trip.
+const serializeItems = (items: SimpleItem[]): string =>
+	convertFiltersToExpression({ items: items.map(toTagItem), op: 'AND' })
+		.expression;
+
+function buildQuery(items: SimpleItem[], expression: string): Query {
+	return {
+		builder: {
+			queryData: [
+				{
+					filters: { items: items.map(toTagItem), op: 'AND' },
+					filter: { expression },
+				},
+			],
+		},
+	} as unknown as Query;
+}
+
+// Simulates the URL round trip: rebuild the shipped expression from the items,
+// reconciled against whatever expression the toggle left behind. Trimmed to
+// absorb a converter quirk that leaves a trailing space when it widens an
+// operator in place (e.g. `=` -> `IN`).
+function roundTripExpression(
+	items: TagFilterItem[],
+	emittedExpression: string,
+): string {
+	const filters: TagFilter = { items, op: 'AND' };
+	const { filter } = convertFiltersToExpressionWithExistingQuery(
+		filters,
+		emittedExpression,
+	);
+	return (filter?.expression ?? '').trim();
+}
+
+interface ToggleAction {
+	value: string;
+	checked: boolean;
+	isOnlyOrAllClicked?: boolean;
+	previousState?: CheckedState;
+	sectionType?: SectionType;
+	source?: QuickFiltersSource;
+	attributeValues?: string[];
+}
+
+interface ToggleCase {
+	name: string;
+	initial?: { items?: SimpleItem[]; expression?: string };
+	action: ToggleAction;
+	expected: { items: SimpleItem[]; expression: string };
+}
+
+function runToggle(c: ToggleCase): { items: SimpleItem[]; expression: string } {
+	const initialItems = c.initial?.items ?? [];
+	const initialExpression =
+		c.initial?.expression ?? serializeItems(initialItems);
+
+	const result = applyCheckboxToggle({
+		currentQuery: buildQuery(initialItems, initialExpression),
+		activeQueryIndex: 0,
+		filter: { attributeKey: { key: KEY, type: 'tag' } } as never,
+		source: c.action.source ?? QuickFiltersSource.LOGS_EXPLORER,
+		attributeValues: c.action.attributeValues ?? ['a', 'b', 'c'],
+		value: c.action.value,
+		checked: c.action.checked,
+		isOnlyOrAllClicked: c.action.isOnlyOrAllClicked ?? false,
+		previousState: c.action.previousState,
+		sectionType: c.action.sectionType,
+	});
+
+	const active = result.builder.queryData[0];
+	const items = active?.filters?.items ?? [];
+	return {
+		items: items.map((item) => ({
+			key: item.key?.key ?? '',
+			op: item.op,
+			value: item.value,
+		})),
+		expression: roundTripExpression(items, active?.filter?.expression ?? ''),
+	};
+}
+
+// Flat list. Every row asserts both the structured items and the shipped
+// (round-tripped) expression, which must stay in sync.
+const TOGGLE_CASES: ToggleCase[] = [
+	{
+		name: 'no clause, checked -> IN',
+		action: { value: 'a', checked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: 'a' }],
+			expression: `service.name in ['a']`,
+		},
+	},
+	{
+		name: 'no clause, unchecked -> NOT IN',
+		action: { value: 'a', checked: false },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: 'a' }],
+			expression: `service.name not in ['a']`,
+		},
+	},
+	{
+		name: 'no clause, unchecked on infra -> not in',
+		action: {
+			value: 'a',
+			checked: false,
+			source: QuickFiltersSource.INFRA_MONITORING,
+		},
+		// `nin` is what the source asks for, but re-deriving the expression
+		// normalises it. Nothing observes the difference: both infra pages send
+		// `filter.expression` and never `filters.items`.
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: 'a' }],
+			expression: `service.name not in ['a']`,
+		},
+	},
+	{
+		name: 'IN, check another value -> appended',
+		initial: { items: [{ key: KEY, op: 'in', value: ['a'] }] },
+		action: { value: 'b', checked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
+			expression: `service.name in ['a', 'b']`,
+		},
+	},
+	{
+		name: 'IN, check when value is scalar -> promoted to array',
+		initial: { items: [{ key: KEY, op: 'in', value: 'a' }] },
+		action: { value: 'b', checked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
+			expression: `service.name in ['a', 'b']`,
+		},
+	},
+	{
+		name: 'IN, uncheck one of many -> filtered out',
+		initial: { items: [{ key: KEY, op: 'in', value: ['a', 'b'] }] },
+		action: { value: 'a', checked: false },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: ['b'] }],
+			expression: `service.name in ['b']`,
+		},
+	},
+	{
+		name: 'IN, uncheck last value in array -> clause gone',
+		initial: { items: [{ key: KEY, op: 'in', value: ['a'] }] },
+		action: { value: 'a', checked: false },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'IN, uncheck scalar value -> clause gone',
+		initial: { items: [{ key: KEY, op: 'in', value: 'a' }] },
+		action: { value: 'a', checked: false },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'IN, uncheck in RELATED section -> replaced by NOT IN for that value',
+		initial: { items: [{ key: KEY, op: 'in', value: ['a', 'b'] }] },
+		action: { value: 'a', checked: false, sectionType: SectionType.RELATED },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: 'a' }],
+			expression: `service.name not in ['a']`,
+		},
+	},
+	{
+		name: 'NOT IN, was unchecked then checked -> replaced by IN for that value',
+		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
+		action: { value: 'b', checked: true, previousState: 'unchecked' },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: 'b' }],
+			expression: `service.name in ['b']`,
+		},
+	},
+	{
+		name: 'NOT IN, re-checking an excluded value clears it, not flips it to IN',
+		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
+		action: { value: 'a', checked: true, previousState: 'unchecked' },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'NOT IN, re-checking one of several excluded values keeps the rest',
+		initial: { items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }] },
+		action: { value: 'a', checked: true, previousState: 'unchecked' },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: ['b'] }],
+			expression: `service.name not in ['b']`,
+		},
+	},
+	{
+		name: 'NOT IN, exclude another value -> appended',
+		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
+		action: { value: 'b', checked: false },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
+			expression: `service.name not in ['a', 'b']`,
+		},
+	},
+	{
+		name: 'NOT IN, exclude when scalar -> promoted to array',
+		initial: { items: [{ key: KEY, op: 'not in', value: 'a' }] },
+		action: { value: 'b', checked: false },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
+			expression: `service.name not in ['a', 'b']`,
+		},
+	},
+	{
+		name: 'NOT IN, check an excluded value -> removed from array',
+		initial: { items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }] },
+		action: { value: 'a', checked: true },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: ['b'] }],
+			expression: `service.name not in ['b']`,
+		},
+	},
+	{
+		name: 'NOT IN, check last excluded value in array -> clause gone',
+		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
+		action: { value: 'a', checked: true },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'NOT IN, check excluded scalar value -> clause gone',
+		initial: { items: [{ key: KEY, op: 'not in', value: 'a' }] },
+		action: { value: 'a', checked: true },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: '= check another value -> promoted to IN array',
+		initial: { items: [{ key: KEY, op: '=', value: 'a' }] },
+		action: { value: 'b', checked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
+			expression: `service.name in ['a', 'b']`,
+		},
+	},
+	{
+		name: '= uncheck -> clause gone',
+		initial: { items: [{ key: KEY, op: '=', value: 'a' }] },
+		action: { value: 'a', checked: false },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: '!= exclude another value -> promoted to NOT IN array',
+		initial: { items: [{ key: KEY, op: '!=', value: 'a' }] },
+		action: { value: 'b', checked: false },
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
+			expression: `service.name not in ['a', 'b']`,
+		},
+	},
+	{
+		name: '!= exclude another value on infra -> not in array',
+		initial: { items: [{ key: KEY, op: '!=', value: 'a' }] },
+		action: {
+			value: 'b',
+			checked: false,
+			source: QuickFiltersSource.INFRA_MONITORING,
+		},
+		expected: {
+			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
+			expression: `service.name not in ['a', 'b']`,
+		},
+	},
+	{
+		name: '!= check -> clause gone',
+		initial: { items: [{ key: KEY, op: '!=', value: 'a' }] },
+		action: { value: 'a', checked: true },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'Only with no clause -> IN scalar',
+		action: { value: 'a', checked: true, isOnlyOrAllClicked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: 'a' }],
+			expression: `service.name in ['a']`,
+		},
+	},
+	{
+		name: 'Only replaces a multi-value IN with a single value',
+		initial: { items: [{ key: KEY, op: 'in', value: ['a', 'b'] }] },
+		action: { value: 'a', checked: true, isOnlyOrAllClicked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: 'a' }],
+			expression: `service.name in ['a']`,
+		},
+	},
+	{
+		name: 'All (clicking the sole selected value) -> clause gone',
+		initial: { items: [{ key: KEY, op: 'in', value: ['a'] }] },
+		action: { value: 'a', checked: true, isOnlyOrAllClicked: true },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'dropping the last clause keeps other keys in the expression',
+		initial: {
+			items: [{ key: KEY, op: 'in', value: 'a' }],
+			expression: `${KEY} = 'a' AND http.method = 'GET'`,
+		},
+		action: { value: 'a', checked: false },
+		// The seeded items omit the http.method clause the expression carries;
+		// re-deriving reconciles it back, which is why items is not empty here.
+		expected: {
+			items: [{ key: 'http.method', op: '=', value: 'GET' }],
+			expression: `http.method = 'GET'`,
+		},
+	},
+	{
+		name: 'dropping the last clause strips the prefixed spelling too',
+		initial: {
+			items: [{ key: 'resource.service.name', op: 'in', value: 'a' }],
+			expression: `resource.service.name = 'a'`,
+		},
+		action: { value: 'a', checked: false },
+		expected: { items: [], expression: '' },
+	},
+	{
+		name: 'removing the value must keep a free-form clause on the same key',
+		initial: {
+			items: [{ key: KEY, op: '=', value: 'a' }],
+			expression: `${KEY} = 'a' AND ${KEY} CONTAINS 'keepme'`,
+		},
+		action: { value: 'a', checked: false },
+		expected: {
+			items: [{ key: KEY, op: 'contains', value: 'keepme' }],
+			expression: `service.name CONTAINS 'keepme'`,
+		},
+	},
+	{
+		name: 'a second clause on the same key must not survive an add',
+		initial: {
+			items: [{ key: KEY, op: 'in', value: ['a'] }],
+			expression: `${KEY} IN ['a'] AND ${KEY} != 'z'`,
+		},
+		action: { value: 'b', checked: true },
+		expected: {
+			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
+			expression: `service.name in ['a', 'b']`,
+		},
+	},
+];
+
+describe('applyCheckboxToggle (items + shipped expression stay in sync)', () => {
+	it.each(TOGGLE_CASES)('$name', (c) => {
+		const got = runToggle(c);
+		expect(got.items).toStrictEqual(c.expected.items);
+		expect(got.expression).toBe(c.expected.expression);
+	});
+});
+
+describe('getNotInOperator', () => {
+	it('returns short "nin" for infra monitoring', () => {
+		expect(getNotInOperator(QuickFiltersSource.INFRA_MONITORING)).toBe('nin');
+	});
+
+	it('returns long "not in" for other sources', () => {
+		expect(getNotInOperator(QuickFiltersSource.LOGS_EXPLORER)).toBe('not in');
+		expect(getNotInOperator(QuickFiltersSource.TRACES_EXPLORER)).toBe('not in');
+	});
+});
+
+describe('deriveCheckboxState', () => {
+	const attributeValues = ['a', 'b', 'c'];
+
+	const state = (items: TagFilterItem[] | undefined): Record<string, boolean> =>
+		deriveCheckboxState({ attributeValues, filterItems: items, filterKey: KEY });
+
+	it('no clause for key -> everything checked', () => {
+		expect(state([])).toStrictEqual({ a: true, b: true, c: true });
+		expect(state(undefined)).toStrictEqual({ a: true, b: true, c: true });
+	});
+
+	it('unrelated clause only -> everything checked', () => {
+		expect(
+			state([toTagItem({ key: 'other', op: 'in', value: ['a'] }, 0)]),
+		).toStrictEqual({ a: true, b: true, c: true });
+	});
+
+	it('IN [list] -> only listed values checked', () => {
+		expect(
+			state([toTagItem({ key: KEY, op: 'in', value: ['a', 'c'] }, 0)]),
+		).toStrictEqual({ a: true, b: false, c: true });
+	});
+
+	it('= "value" -> only that value checked', () => {
+		expect(
+			state([toTagItem({ key: KEY, op: '=', value: 'b' }, 0)]),
+		).toStrictEqual({ a: false, b: true, c: false });
+	});
+
+	it('NOT IN [list] -> everything except excluded checked', () => {
+		expect(
+			state([toTagItem({ key: KEY, op: 'not in', value: ['a'] }, 0)]),
+		).toStrictEqual({ a: false, b: true, c: true });
+	});
+
+	it('!= "value" -> everything except that value checked', () => {
+		expect(
+			state([toTagItem({ key: KEY, op: '!=', value: 'b' }, 0)]),
+		).toStrictEqual({ a: true, b: false, c: true });
+	});
+
+	it('matches by base key across context prefixes', () => {
+		expect(
+			state([
+				toTagItem({ key: 'resource.service.name', op: 'in', value: ['a'] }, 0),
+			]),
+		).toStrictEqual({ a: true, b: false, c: false });
+	});
+
+	it('coerces boolean / number values to string keys', () => {
+		expect(
+			deriveCheckboxState({
+				attributeValues: ['true', '42'],
+				filterItems: [toTagItem({ key: KEY, op: '=', value: true }, 0)],
+				filterKey: KEY,
+			}),
+		).toStrictEqual({ true: true, '42': false });
+	});
+});
+
+describe('clearFilterFromQuery', () => {
+	it('removes the key from items and expression at the active index only', () => {
+		const query = {
+			builder: {
+				queryData: [
+					{
+						filters: {
+							items: [
+								toTagItem({ key: KEY, op: 'in', value: ['a'] }, 0),
+								toTagItem({ key: 'http.method', op: '=', value: 'GET' }, 1),
+							],
+							op: 'AND',
+						},
+						filter: { expression: `${KEY} = 'a' AND http.method = 'GET'` },
+					},
+					{
+						filters: {
+							items: [toTagItem({ key: KEY, op: 'in', value: ['a'] }, 2)],
+							op: 'AND',
+						},
+						filter: { expression: `${KEY} = 'a'` },
+					},
+				],
+			},
+		} as unknown as Query;
+
+		const result = clearFilterFromQuery({
+			currentQuery: query,
+			filter: { attributeKey: { key: KEY, type: 'tag' } } as never,
+			activeQueryIndex: 0,
+		});
+
+		const active = result.builder.queryData[0];
+		expect(active.filters?.items).toStrictEqual([
+			expect.objectContaining({
+				key: expect.objectContaining({ key: 'http.method' }),
+			}),
+		]);
+		expect(active.filter?.expression).toBe(`http.method = 'GET'`);
+
+		// Other queries keep both halves: stripping their expression while leaving
+		// their items alone only churned a clause the round trip put straight back.
+		const other = result.builder.queryData[1];
+		expect(other.filters?.items).toHaveLength(1);
+		expect(other.filter?.expression).toBe(`${KEY} = 'a'`);
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -1,5 +1,8 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
+import {
+	convertFiltersToExpressionWithExistingQuery,
+	removeKeysFromExpression,
+} from 'components/QueryBuilderV2/utils';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
@@ -10,13 +13,33 @@ import { cloneDeep, isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { isKeyMatch } from './utils';
+import { getKeySpellings, isKeyMatch } from './utils';
 import { CheckedState } from '../../types';
 import { SectionType } from './v2/itemRules';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
 
+// The operators this algebra emits, and so the only ones it may rewrite out of an
+// expression. A hand-written clause on the same key (CONTAINS, EXISTS, a range) is
+// none of its business and has to survive a toggle.
+const MANAGED_OPERATORS = [OPERATORS['='], OPERATORS['!='], 'in', 'not in'];
+
+/**
+ * Drops this filter's own clauses for `key` from `expression`, leaving every other
+ * key and any clause the checkbox does not manage untouched. Matches all context
+ * prefixes, since `isKeyMatch` treats `service.name` and `resource.service.name` as
+ * the same filter but expression rewrites match keys literally.
+ */
+function removeManagedClauses(expression: string, key: string): string {
+	return removeKeysFromExpression(
+		expression,
+		getKeySpellings(key),
+		false,
+		MANAGED_OPERATORS,
+	);
+}
+
 // Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
 const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
 
@@ -102,8 +125,8 @@ export function deriveCheckboxState({
 }
 
 /**
- * Returns a new query with every clause for this attribute key removed, both
- * from the structured filter items and the raw filter expression.
+ * Returns a new query with this filter's clauses for the attribute key removed from
+ * the active query, both from the structured filter items and the raw expression.
  */
 export function clearFilterFromQuery({
 	currentQuery,
@@ -118,24 +141,28 @@ export function clearFilterFromQuery({
 		...currentQuery,
 		builder: {
 			...currentQuery.builder,
-			queryData: currentQuery.builder.queryData.map((item, idx) => ({
-				...item,
-				filter: {
-					expression: removeKeysFromExpression(item.filter?.expression ?? '', [
-						filter.attributeKey.key,
-					]),
-				},
-				filters: {
-					...item.filters,
-					items:
-						idx === activeQueryIndex
-							? item.filters?.items?.filter(
-									(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
-								) || []
-							: [...(item.filters?.items || [])],
-					op: item.filters?.op || 'AND',
-				},
-			})),
+			queryData: currentQuery.builder.queryData.map((item, idx) => {
+				if (idx !== activeQueryIndex) {
+					return item;
+				}
+				return {
+					...item,
+					filter: {
+						expression: removeManagedClauses(
+							item.filter?.expression ?? '',
+							filter.attributeKey.key,
+						),
+					},
+					filters: {
+						...item.filters,
+						items:
+							item.filters?.items?.filter(
+								(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+							) || [],
+						op: item.filters?.op || 'AND',
+					},
+				};
+			}),
 		},
 	};
 }
@@ -194,12 +221,6 @@ export function applyCheckboxToggle({
 			(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
 		);
 
-		if (query.filter?.expression) {
-			query.filter.expression = removeKeysFromExpression(query.filter.expression, [
-				filter.attributeKey.key,
-			]);
-		}
-
 		if (isOnlyOrAll === 'Only') {
 			const newFilterItem: TagFilterItem = {
 				id: uuid(),
@@ -267,12 +288,6 @@ export function applyCheckboxToggle({
 									}
 									return item;
 								});
-								if (query.filter?.expression) {
-									query.filter.expression = removeKeysFromExpression(
-										query.filter.expression,
-										[filter.attributeKey.key],
-									);
-								}
 							} else if (isArray(currentFilter.value)) {
 								// if we are removing some value when the running operator is IN we filter.
 								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
@@ -309,9 +324,10 @@ export function applyCheckboxToggle({
 							? currentFilter.value.includes(value)
 							: currentFilter.value === value;
 
-						// When clicking unchecked "Other" item, user wants to SELECT it
-						// Replace NOT IN filter with IN [value]
-						if (previousState === 'unchecked' && checked) {
+						// When clicking an unchecked value that is not itself excluded, the user
+						// wants to SELECT it: replace the NOT IN filter with IN [value]. A value
+						// that IS in the exclusion list falls through to the removal branch below.
+						if (previousState === 'unchecked' && checked && !isValueInFilter) {
 							const newFilter: TagFilterItem = {
 								id: uuid(),
 								op: getOperatorValue(OPERATORS.IN),
@@ -324,12 +340,6 @@ export function applyCheckboxToggle({
 								}
 								return item;
 							});
-							if (query.filter?.expression) {
-								query.filter.expression = removeKeysFromExpression(
-									query.filter.expression,
-									[filter.attributeKey.key],
-								);
-							}
 						} else if (!checked || !isValueInFilter) {
 							// Add to NOT IN when:
 							// - checked=false (user explicitly unchecked to exclude)
@@ -369,12 +379,6 @@ export function applyCheckboxToggle({
 									query.filters.items = query.filters.items.filter(
 										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
-									if (query.filter?.expression) {
-										query.filter.expression = removeKeysFromExpression(
-											query.filter.expression,
-											[filter.attributeKey.key],
-										);
-									}
 								} else {
 									query.filters.items = query.filters.items.map((item) => {
 										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
@@ -384,16 +388,6 @@ export function applyCheckboxToggle({
 									});
 								}
 							} else {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value === value ? null : currentFilter.value,
-								};
-								if (newFilter.value === null && query.filter?.expression) {
-									query.filter.expression = removeKeysFromExpression(
-										query.filter.expression,
-										[filter.attributeKey.key],
-									);
-								}
 								query.filters.items = query.filters.items.filter(
 									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
@@ -456,6 +450,18 @@ export function applyCheckboxToggle({
 		}
 	}
 
+	if (query) {
+		const synced = convertFiltersToExpressionWithExistingQuery(
+			query.filters ?? { items: [], op: 'AND' },
+			removeManagedClauses(
+				query.filter?.expression ?? '',
+				filter.attributeKey.key,
+			),
+		);
+		query.filter = synced.filter;
+		query.filters = synced.filters;
+	}
+
 	return {
 		...currentQuery,
 		builder: {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts

@@ -39,3 +39,16 @@ export function isKeyMatch(
 ): boolean {
 	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
 }
+
+/**
+ * Every spelling of a key that `isKeyMatch` treats as equal: the base name plus
+ * each context-prefixed form. Expression rewrites match keys literally, so they
+ * need the whole list where the items side only needs `isKeyMatch`.
+ */
+export function getKeySpellings(key: string | undefined): string[] {
+	const base = getKeyWithoutPrefix(key);
+	if (!base) {
+		return [];
+	}
+	return [base, ...FIELD_CONTEXT_PREFIXES.map((prefix) => `${prefix}.${base}`)];
+}