Merge remote-tracking branch 'origin/feat/add-support-for-fetch-in-orderBy-and-options' into feat/ai-o11y-trace-view-controls

# Conflicts:
#	frontend/src/container/LLMObservability/Explorer/constants.ts

.github/workflows/jsci.yaml

@@ -79,36 +79,6 @@ jobs:
         run: |
           cd frontend && pnpm generate:api
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run pnpm generate:api in frontend/ locally and commit."; exit 1)
-  storybook:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    container:
-      image: mcr.microsoft.com/playwright:v1.57.0-noble
-    strategy:
-      fail-fast: false
-      matrix:
-        shard: [1, 2, 3, 4]
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v4
-      - name: install-pnpm
-        uses: pnpm/action-setup@v6
-        with:
-          version: 10
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-          cache: pnpm
-          cache-dependency-path: frontend/pnpm-lock.yaml
-      - name: install-frontend
-        run: cd frontend && pnpm install
-      - name: test-storybook
-        run: cd frontend && pnpm test:storybook --shard=${{ matrix.shard }}/${{ strategy.job-total }}
   web-settings:
     if: |
       github.event_name == 'merge_group' ||

docs/api/openapi.yml

@@ -296,17 +296,6 @@ components:
       - jsmops
       - incidentio
       type: string
-    AlertmanagertypesChannelListOrder:
-      enum:
-      - asc
-      - desc
-      type: string
-    AlertmanagertypesChannelListSort:
-      enum:
-      - updated_at
-      - created_at
-      - name
-      type: string
     AlertmanagertypesChannelMSTeamsConfig:
       properties:
         sendResolved:
@@ -587,43 +576,6 @@ components:
         wont_fix_resolution:
           type: string
       type: object
-    AlertmanagertypesListableNotificationChannel:
-      properties:
-        channels:
-          items:
-            $ref: '#/components/schemas/AlertmanagertypesListedNotificationChannel'
-          type: array
-        total:
-          format: int64
-          type: integer
-      required:
-      - channels
-      - total
-      type: object
-    AlertmanagertypesListedNotificationChannel:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        displayName:
-          type: string
-        id:
-          type: string
-        kind:
-          $ref: '#/components/schemas/AlertmanagertypesChannelKind'
-        name:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - displayName
-      - kind
-      - createdAt
-      - updatedAt
-      type: object
     AlertmanagertypesMaintenanceKind:
       enum:
       - fixed
@@ -990,20 +942,6 @@ components:
       - timezone
       - startTime
       type: object
-    AlertmanagertypesTestableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-      required:
-      - config
-      type: object
-    AlertmanagertypesUpdatableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-      required:
-      - config
-      type: object
     AuthtypesAttributeMapping:
       properties:
         email:
@@ -3536,11 +3474,6 @@ components:
       - tags
       - spec
       type: object
-    DashboardtypesHeaderOptions:
-      properties:
-        hide:
-          type: boolean
-      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3898,7 +3831,6 @@ components:
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
-          signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
         propertyName: kind
       oneOf:
@@ -3909,7 +3841,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3920,7 +3851,6 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
-      - signoz/TextPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3994,18 +3924,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/TextPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesTextPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec:
       properties:
         kind:
@@ -4297,37 +4215,6 @@ components:
       - color
       - columnName
       type: object
-    DashboardtypesTextAlign:
-      enum:
-      - left
-      - center
-      - right
-      type: string
-    DashboardtypesTextMode:
-      enum:
-      - markdown
-      type: string
-    DashboardtypesTextPanelSpec:
-      properties:
-        headerOptions:
-          $ref: '#/components/schemas/DashboardtypesHeaderOptions'
-        mode:
-          $ref: '#/components/schemas/DashboardtypesTextMode'
-        presentation:
-          $ref: '#/components/schemas/DashboardtypesTextPresentation'
-        text:
-          type: string
-      type: object
-    DashboardtypesTextPresentation:
-      properties:
-        background:
-          nullable: true
-          type: string
-        textAlign:
-          $ref: '#/components/schemas/DashboardtypesTextAlign'
-        verticalAlign:
-          $ref: '#/components/schemas/DashboardtypesVerticalAlign'
-      type: object
     DashboardtypesTextVariableSpec:
       properties:
         constant:
@@ -4537,12 +4424,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesVerticalAlign:
-      enum:
-      - top
-      - center
-      - bottom
-      type: string
     ErrorsJSON:
       properties:
         code:
@@ -7514,7 +7395,10 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
           type: array
         meta:
-          $ref: '#/components/schemas/Querybuildertypesv5AggregationMeta'
+          properties:
+            unit:
+              type: string
+          type: object
         predictedSeries:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
@@ -7529,51 +7413,12 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
           type: array
       type: object
-    Querybuildertypesv5AggregationMeta:
+    Querybuildertypesv5Bucket:
       properties:
-        buckets:
-          items:
-            format: double
-            type: number
-          type: array
-        unit:
-          type: string
+        step:
+          format: double
+          type: number
       type: object
-    Querybuildertypesv5BucketOptions:
-      discriminator:
-        mapping:
-          linear: '#/components/schemas/Querybuildertypesv5BucketOptionsLinear'
-          log: '#/components/schemas/Querybuildertypesv5BucketOptionsLog'
-        propertyName: kind
-      oneOf:
-      - $ref: '#/components/schemas/Querybuildertypesv5BucketOptionsLinear'
-      - $ref: '#/components/schemas/Querybuildertypesv5BucketOptionsLog'
-      type: object
-    Querybuildertypesv5BucketOptionsLinear:
-      properties:
-        kind:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketsKind'
-        spec:
-          $ref: '#/components/schemas/Querybuildertypesv5LinearBucketsSpec'
-      required:
-      - kind
-      - spec
-      type: object
-    Querybuildertypesv5BucketOptionsLog:
-      properties:
-        kind:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketsKind'
-        spec:
-          $ref: '#/components/schemas/Querybuildertypesv5LogBucketsSpec'
-      required:
-      - kind
-      - spec
-      type: object
-    Querybuildertypesv5BucketsKind:
-      enum:
-      - linear
-      - log
-      type: string
     Querybuildertypesv5BuilderQuerySpec:
       discriminator:
         mapping:
@@ -7754,16 +7599,6 @@ components:
         value:
           type: string
       type: object
-    Querybuildertypesv5LinearBucketsSpec:
-      properties:
-        maxValue:
-          format: double
-          type: number
-        numBuckets:
-          type: integer
-      required:
-      - maxValue
-      type: object
     Querybuildertypesv5LogAggregation:
       properties:
         alias:
@@ -7771,12 +7606,6 @@ components:
         expression:
           type: string
       type: object
-    Querybuildertypesv5LogBucketsSpec:
-      properties:
-        scale:
-          nullable: true
-          type: integer
-      type: object
     Querybuildertypesv5MetricAggregation:
       properties:
         comparisonSpaceAggregationParam:
@@ -7857,8 +7686,6 @@ components:
       type: object
     Querybuildertypesv5QueryBuilderFormula:
       properties:
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
         disabled:
           type: boolean
         expression:
@@ -7889,8 +7716,6 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5LogAggregation'
           nullable: true
           type: array
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
         cursor:
           type: string
         disabled:
@@ -7952,8 +7777,6 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5MetricAggregation'
           nullable: true
           type: array
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
         cursor:
           type: string
         disabled:
@@ -8015,8 +7838,6 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
           nullable: true
           type: array
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
         cursor:
           type: string
         disabled:
@@ -8342,7 +8163,6 @@ components:
       - raw
       - raw_stream
       - trace
-      - heatmap
       type: string
     Querybuildertypesv5ScalarData:
       properties:
@@ -8417,6 +8237,8 @@ components:
       type: object
     Querybuildertypesv5TimeSeriesValue:
       properties:
+        bucket:
+          $ref: '#/components/schemas/Querybuildertypesv5Bucket'
         partial:
           type: boolean
         timestamp:
@@ -8527,8 +8349,6 @@ components:
           $ref: '#/components/schemas/RuletypesAlertState'
         overallStateChanged:
           type: boolean
-        relatedAITracesLink:
-          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8572,8 +8392,6 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5Label'
           nullable: true
           type: array
-        relatedAITracesLink:
-          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8679,7 +8497,6 @@ components:
       - TRACES_BASED_ALERT
       - LOGS_BASED_ALERT
       - EXCEPTIONS_BASED_ALERT
-      - AI_TRACES_BASED_ALERT
       type: string
     RuletypesBasicRuleThreshold:
       properties:
@@ -19903,86 +19720,6 @@ paths:
       tags:
       - metrics
   /api/v2/notification_channels:
-    get:
-      deprecated: false
-      description: Returns a page of notification channels for the org. Each entry
-        carries the channel's identity and kind but not its configuration; fetch a
-        channel by ID for that. Supports a case-insensitive display name search (`query`),
-        a kind filter (`kind`), sort (`updated_at`/`created_at`/`name`), order (`asc`/`desc`),
-        and offset-based pagination (`limit`/`offset`).
-      operationId: ListNotificationChannels
-      parameters:
-      - in: query
-        name: query
-        schema:
-          type: string
-      - in: query
-        name: kind
-        schema:
-          $ref: '#/components/schemas/AlertmanagertypesChannelKind'
-      - in: query
-        name: sort
-        schema:
-          $ref: '#/components/schemas/AlertmanagertypesChannelListSort'
-      - in: query
-        name: order
-        schema:
-          $ref: '#/components/schemas/AlertmanagertypesChannelListOrder'
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      - in: query
-        name: offset
-        schema:
-          type: integer
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesListableNotificationChannel'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:list
-      - tokenizer:
-        - notification-channel:list
-      summary: List notification channels
-      tags:
-      - channels
     post:
       deprecated: false
       description: This endpoint creates a notification channel
@@ -20045,239 +19782,6 @@ paths:
       summary: Create notification channel
       tags:
       - channels
-  /api/v2/notification_channels/{id}:
-    delete:
-      deprecated: false
-      description: This endpoint deletes a notification channel by ID
-      operationId: DeleteNotificationChannel
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:delete
-      - tokenizer:
-        - notification-channel:delete
-      summary: Delete notification channel
-      tags:
-      - channels
-    get:
-      deprecated: false
-      description: This endpoint returns a notification channel by ID. A channel written
-        by the v1 API can carry a configuration this API does not model.
-      operationId: GetNotificationChannel
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesGettableNotificationChannel'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:read
-      - tokenizer:
-        - notification-channel:read
-      summary: Get notification channel by ID
-      tags:
-      - channels
-    put:
-      deprecated: false
-      description: 'This endpoint replaces a notification channel''s configuration
-        in full. Neither name is part of the request body: both are immutable. The
-        kind may change, which replaces the channel''s notifier configuration.'
-      operationId: UpdateNotificationChannel
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AlertmanagertypesUpdatableNotificationChannel'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesGettableNotificationChannel'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:update
-      - tokenizer:
-        - notification-channel:update
-      summary: Update notification channel
-      tags:
-      - channels
-  /api/v2/notification_channels/test:
-    post:
-      deprecated: false
-      description: This endpoint sends a test notification for the configuration in
-        the request body. The channel need not exist and nothing is persisted, so
-        the body carries a configuration only.
-      operationId: TestNotificationChannel
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AlertmanagertypesTestableNotificationChannel'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:create
-      - tokenizer:
-        - notification-channel:create
-      summary: Test notification channel
-      tags:
-      - channels
   /api/v2/orgs/me:
     get:
       deprecated: false

docs/contributing/go/readme.md

@@ -21,5 +21,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
-- [SQL Compiler](sqlcompiler.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/sqlcompiler.md

@@ -1,84 +0,0 @@
-# SQL Compiler
-
-List pages (dashboards, alert rules) share one filter DSL in their search bars. [pkg/parser/filterquery/sqlcompiler](/pkg/parser/filterquery/sqlcompiler/compiler.go) compiles a DSL string into a WHERE clause for the relational store: `?`-placeholder SQL plus bind arguments, ready for bun on both SQLite and Postgres. Telemetry filters are a different pipeline. They stay on querybuilder's ClickHouse visitor.
-
-The package owns everything generic about the language. A module adopting it writes exactly one thing: a `FieldResolver` that says which keys exist and what each maps to.
-
-## What is the DSL?
-
-The grammar lives at [grammar/FilterQuery.g4](/grammar/FilterQuery.g4), with the ANTLR-generated parser in [pkg/parser/filterquery/grammar](/pkg/parser/filterquery/grammar). It is the same grammar the telemetry search bars use, so the query language feels identical everywhere. The shapes that matter:
-
-- Boolean structure: parentheses > `NOT` > `AND` > `OR`; adjacent terms with no connective are an implicit `AND`.
-- Comparisons: `key OP value`, e.g. `name CONTAINS cpu`, `created_at > '2025-01-01T00:00:00Z'`, `labels.team IN ('infra', 'platform')`, `labels.env EXISTS`. See the `comparison` rule in the grammar for the full operator list.
-- Free text: a bare or quoted token with no key. Quoting is the escape hatch for a phrase that looks like DSL.
-- Values: bare tokens or quoted strings; `IN` accepts `in(...)` and `[...]` forms.
-
-## What does the framework already cover?
-
-```go
-compiled, errs := sqlcompiler.Compile(query, formatter, resolver)
-```
-
-`Compile` returns either a non-nil `*Compiled` or a list of human-readable errors. An empty query compiles to an empty `Compiled`; callers gate on `IsEmpty()`, not nil. On top of parsing, the package handles:
-
-- Syntax errors, collected with line/column positions instead of failing on the first one.
-- The boolean tree: `AND`/`OR`/`NOT`, parentheses, implicit `AND`, and pruning of empty conditions.
-- Operator extraction, including inversion of `NOT LIKE`, `NOT IN`, `NOT EXISTS` and friends.
-- Predicate builders the resolver calls back into:
-
-| Builder                    | Handles                                                                                                                                                                                                     |
-| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `BuildStringOperation`     | `=`, `!=`, `LIKE`/`ILIKE`, `CONTAINS`, `IN` on a string column; escapes `%`/`_` for `CONTAINS`, rejects patterns ending in a dangling backslash, lowers both sides for `ILIKE` so SQLite and Postgres agree |
-| `BuildTimestampComparison` | equality, ranges and `BETWEEN` on RFC3339 timestamps                                                                                                                                                        |
-| `BuildBoolComparison`      | `= true/false`                                                                                                                                                                                              |
-| `BuildFreeTextContains`    | case-insensitive substring match, `COALESCE`d so `NOT (...)` does not drop rows where the column is NULL                                                                                                    |
-
-- Typed value extraction (`ExtractSingleStringValue`, `ExtractStringValueList`, ...) with accumulated errors: the user sees every problem in the query at once.
-- Argument binding through go-sqlbuilder; no value is ever interpolated into the SQL text.
-
-## When do I write a FieldResolver?
-
-Whenever a module adopts the DSL for its list page. The resolver is the per-module policy and the only code you write:
-
-```go
-type FieldResolver interface {
-	ResolveComparison(v *Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string
-	ResolveFreeText(v *Visitor, value string) string
-}
-```
-
-Rules for implementing one:
-
-- Declare the key namespace in `pkg/types/<domain>`: `DSLKey` constants plus a `ReservedOps` map of key to allowed operators. The list API advertises these as `reservedKeywords`, so the frontend suggestions never go stale.
-- Reject a disallowed operator with `v.AddError(...)` and return `""`. Never panic, never fail fast; the compile fails at the end with all errors.
-- Map a key to a column expression through `v.Formatter` (`JSONExtractString`, `LowerExpression`), never by hand, so the expression is valid on both SQLite and Postgres.
-- Delegate the predicate to the `Build*` helpers above; do not hand-build SQL or manage arguments yourself.
-- For a key that lives in a relation table (dashboard tags, rule labels), build an `EXISTS` subquery on a fresh `sqlbuilder.SelectBuilder` and pass that builder into `BuildStringOperation`, so its arguments thread through the compile. For a negative operator, build the positive predicate and toggle `NotExists` on the outer builder.
-
-The reference implementation is the dashboards resolver, [pkg/modules/dashboard/impldashboard/listfilter_resolver.go](/pkg/modules/dashboard/impldashboard/listfilter_resolver.go): reserved keys backed by columns and JSON paths, tag keys via `EXISTS` subqueries, free text across name, description and tags.
-
-## How to wire it in?
-
-Give the module a thin `Compile` wrapper that maps the error list onto the module's error code, as in [pkg/modules/dashboard/impldashboard/listfilter.go](/pkg/modules/dashboard/impldashboard/listfilter.go):
-
-```go
-func Compile(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
-	compiled, errs := sqlcompiler.Compile(query, formatter, dashboardFieldResolver{})
-	if len(errs) > 0 {
-		return nil, errors.NewInvalidInputf(dashboardtypes.ErrCodeDashboardListFilterInvalid,
-			"invalid filter query: %s", strings.Join(errs, "; "))
-	}
-	return compiled, nil
-}
-```
-
-The store then appends `compiled.SQL` with `compiled.Args` to its list query when `!compiled.IsEmpty()`.
-
-## What should I remember?
-
-- One DSL, one compiler; a new list page adds a `FieldResolver`, not a new parser or SQL layer.
-- Keys and allowed operators live in `pkg/types/<domain>` and are advertised as `reservedKeywords`.
-- Column expressions go through `v.Formatter`; predicates go through the `Build*` helpers.
-- Report problems with `v.AddError` and return `""`; errors accumulate.
-- Relation-table keys use `EXISTS` subqueries on their own builder; negation toggles `NotExists`.
-- This package is for the relational store only; telemetry filtering stays in querybuilder.

frontend/.storybook/preview-head.html

@@ -1,11 +1,9 @@
-<!--
-	`index.html` links Inter from Google Fonts here. The link is parsed before the
-	msw worker has started, so that one request escapes the iframe while every
-	other font request the app makes is answered with an empty stylesheet; the
-	local faces stand in for both.
--->
-<link rel="stylesheet" href="storybook-fonts.css" />
-
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+	rel="stylesheet"
+/>
 <link rel="stylesheet" href="css/uPlot.min.css" />
 
 <script>

frontend/.storybook/public/storybook-fonts.css

@@ -1,50 +0,0 @@
-/*
- * The five families the app pulls from Google Fonts, served from the files in
- * `public/fonts` instead. `msw/appShellHandlers.ts` answers the CDN with an
- * empty stylesheet so no request leaves the iframe, which without this left
- * every story on a fallback for the four families `src/styles.scss` imports at
- * runtime, and on whatever the Inter link in `index.html` happened to fetch
- * before the worker had started.
- */
-
-@font-face {
-	font-family: 'Inter';
-	/* The comma is part of the filename and the dev server serves it raw, so it
-	   stays literal inside the quoted url rather than percent-encoded. */
-	src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
-	font-weight: 100 900;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Work Sans';
-	src: url('fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
-	font-weight: 100 900;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Space Mono';
-	src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Fira Code';
-	src: url('fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
-	font-weight: 300 700;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Geist Mono';
-	src: url('fonts/GeistMonoVF.woff2') format('woff2');
-	font-weight: 100 900;
-	font-style: normal;
-	font-display: swap;
-}

frontend/.storybook/test-runner.ts

@@ -1,85 +0,0 @@
-import { getStoryContext } from '@storybook/test-runner';
-import type { TestRunnerConfig } from '@storybook/test-runner';
-import type { Page } from 'playwright';
-
-const IGNORED_MESSAGES = [
-	// `preview-head.html` swaps a local stylesheet in for Google Fonts, but the
-	// browser still warns on the real cross-origin one it briefly requests
-	// before msw starts (no CORS headers), regardless of story content.
-	/Can't access cssRules/,
-	// Pre-existing dev-server noise, unrelated to any story.
-	/Couldn't load preload assets/,
-	// Fires because a Jest-driven browser sets a global testing flag React
-	// checks for; unrelated to anything a story does.
-	/current testing environment is not configured to support act/,
-	// React and antd route dev-only warnings (missing keys, DOM nesting, API
-	// deprecations) through `console.error` under this prefix; app-wide and
-	// tracked separately from story regressions.
-	/^Warning: /,
-	// msw's own warning when its response listener count grows across many
-	// story visits in one browser session; not a story defect.
-	/MaxListenersExceededWarning/,
-	// `preview-head.html`'s CSP intentionally blocks third-party iframes
-	// (YouTube embeds, the docs pane) so they hit the real network instead of
-	// an unanswered msw request; the block is the point, not a bug.
-	/violates the following Content Security Policy directive/,
-];
-
-const messagesByPage = new WeakMap<Page, string[]>();
-
-/**
- * Only `console.error` fails a story. `console.warn` is dev-time advice from
- * app code (e.g. `aggregateData is null`) and from the runner itself; an
- * unmocked `/api/` call is a `console.error` in `src/storybook/msw/handlers.ts`.
- */
-const config: TestRunnerConfig = {
-	// msw logs every mocked request at `log`; keep it out of the failure dump
-	// unless the job is re-run with debug logging (GitHub sets RUNNER_DEBUG=1).
-	logLevel: process.env.RUNNER_DEBUG === '1' ? 'info' : 'warn',
-	async preVisit(page): Promise<void> {
-		const existing = messagesByPage.get(page);
-		if (existing) {
-			existing.length = 0;
-			return;
-		}
-
-		const messages: string[] = [];
-		messagesByPage.set(page, messages);
-		page.on('console', (message) => {
-			if (
-				message.type() === 'error' &&
-				!IGNORED_MESSAGES.some((pattern) => pattern.test(message.text()))
-			) {
-				messages.push(`[error] ${message.text()}`);
-			}
-		});
-		// The console message alone ("Failed to load resource") doesn't name the
-		// URL; pairing it with the response is what makes a missing mock
-		// actionable instead of just a status code.
-		page.on('response', (response) => {
-			if (response.status() >= 400) {
-				messages.push(`[response] ${response.status()} ${response.url()}`);
-			}
-		});
-	},
-	async postVisit(page, context): Promise<void> {
-		const messages = messagesByPage.get(page) ?? [];
-		if (messages.length === 0) {
-			return;
-		}
-
-		// A story that deliberately mocks a failure response (e.g. a 500 to test
-		// an error state) logs the error it's testing for; opt it out per-story
-		// with `parameters: { allowConsoleErrors: true }`.
-		const storyContext = await getStoryContext(page, context);
-		if (storyContext.parameters?.allowConsoleErrors) {
-			return;
-		}
-
-		throw new Error(
-			`Story "${context.name}" logged console error/warning:\n${messages.join('\n')}`,
-		);
-	},
-};
-
-export default config;

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|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)/)',
+		'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)/)',
 		// 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|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)',
+		'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)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -9,7 +9,6 @@
     "dev": "vite",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o storybook-static",
-    "test:storybook": "bash scripts/test-storybook.sh",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -163,7 +162,6 @@
     "@jest/types": "30.2.0",
     "@storybook/addon-a11y": "10.5.9",
     "@storybook/react-vite": "10.5.9",
-    "@storybook/test-runner": "0.24.5",
     "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -235,7 +233,7 @@
   },
   "overrides": {
     "@babel/core@<=7.29.0": ">=7.29.6 <8",
-    "@istanbuljs/load-nyc-config>js-yaml": ">=4.3.1 <5",
+    "@istanbuljs/load-nyc-config>js-yaml": ">=4.2.0 <5",
     "cookie@<0.7.0": ">=0.7.1 <1",
     "dompurify@<=3.4.10": ">=3.4.11 <4",
     "esbuild@>=0.27.3 <0.28.1": ">=0.28.1 <0.29.0",
@@ -244,14 +242,6 @@
     "prismjs@<1.30.0": ">=1.30.0 <2",
     "react-router@>=6.7.0 <6.30.4": ">=6.30.4 <7",
     "tmp@<0.2.6": ">=0.2.6 <0.3.0",
-    "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2",
-    "brace-expansion@<1.1.18": ">=1.1.18 <2",
-    "brace-expansion@>=2.0.0 <2.1.4": ">=2.1.4 <3",
-    "brace-expansion@>=5.0.0 <5.0.9": ">=5.0.9 <6",
-    "fast-uri@<3.1.5": ">=3.1.5 <4",
-    "immutable@<5.1.8": ">=5.1.8 <6",
-    "js-yaml@>=4.0.0 <4.3.1": ">=4.3.1 <5",
-    "less@<4.5.0": ">=4.5.0 <5",
-    "nanoid@<3.3.18": ">=3.3.18 <4"
+    "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
 }

frontend/scripts/test-storybook.sh

@@ -1,31 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-story_count=$(find src -name '*.stories.tsx' | wc -l)
-if [ "$story_count" -eq 0 ]; then
-	echo "No *.stories.tsx found under src/" >&2
-	exit 1
-fi
-
-# jest splits the sorted story files into contiguous shards and exits 1 when a
-# shard is empty, which happens on every shard above the file count. The runner
-# rejects jest's own `--passWithNoTests`, so skip those shards here.
-for arg in "$@"; do
-	if [[ $arg == --shard=* ]]; then
-		shard_index=${arg#--shard=}
-		if [ "${shard_index%%/*}" -gt "$story_count" ]; then
-			echo "Skipping ${arg#--shard=}: only ${story_count} story files"
-			exit 0
-		fi
-	fi
-done
-
-pnpm storybook --ci --quiet &
-SB_PID=$!
-trap 'kill "$SB_PID" 2>/dev/null || true' EXIT
-
-until curl -sf http://127.0.0.1:6006/index.json >/dev/null 2>&1; do
-	sleep 1
-done
-
-pnpm exec test-storybook --ci --maxWorkers=2 "$@"

frontend/src/api/ErrorResponseHandler.ts

@@ -1,4 +1,4 @@
-import { AxiosError, AxiosResponse, isCancel } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import { ErrorResponse } from 'types/api';
 import { ErrorStatusCode } from 'types/common';
 
@@ -42,16 +42,6 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		};
 	}
 	if (request) {
-		// Avoid logging error when the request was just cancelled for whatever reason
-		if (isCancel(error)) {
-			return {
-				statusCode: 500,
-				payload: null,
-				error: 'Something went wrong',
-				message: null,
-			};
-		}
-
 		// client never received a response, or request never left
 		console.error('client never received a response, or request never left');
 

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

@@ -21,23 +21,14 @@ import type {
 	AlertmanagertypesPostableChannelDTO,
 	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
-	AlertmanagertypesTestableNotificationChannelDTO,
-	AlertmanagertypesUpdatableNotificationChannelDTO,
 	CreateChannel201,
 	CreateNotificationChannel201,
 	DeleteChannelByIDPathParameters,
-	DeleteNotificationChannelPathParameters,
 	GetChannelByID200,
 	GetChannelByIDPathParameters,
-	GetNotificationChannel200,
-	GetNotificationChannelPathParameters,
 	ListChannels200,
-	ListNotificationChannels200,
-	ListNotificationChannelsParams,
 	RenderErrorResponseDTO,
 	UpdateChannelByIDPathParameters,
-	UpdateNotificationChannel200,
-	UpdateNotificationChannelPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -658,105 +649,6 @@ export const useTestChannelDeprecated = <
 > => {
 	return useMutation(getTestChannelDeprecatedMutationOptions(options));
 };
-/**
- * Returns a page of notification channels for the org. Each entry carries the channel's identity and kind but not its configuration; fetch a channel by ID for that. Supports a case-insensitive display name search (`query`), a kind filter (`kind`), sort (`updated_at`/`created_at`/`name`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`).
- * @summary List notification channels
- */
-export const listNotificationChannels = (
-	params?: ListNotificationChannelsParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListNotificationChannels200>({
-		url: `/api/v2/notification_channels`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListNotificationChannelsQueryKey = (
-	params?: ListNotificationChannelsParams,
-) => {
-	return [`/api/v2/notification_channels`, ...(params ? [params] : [])] as const;
-};
-
-export const getListNotificationChannelsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listNotificationChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListNotificationChannelsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listNotificationChannels>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListNotificationChannelsQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listNotificationChannels>>
-	> = ({ signal }) => listNotificationChannels(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listNotificationChannels>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListNotificationChannelsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listNotificationChannels>>
->;
-export type ListNotificationChannelsQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List notification channels
- */
-
-export function useListNotificationChannels<
-	TData = Awaited<ReturnType<typeof listNotificationChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListNotificationChannelsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listNotificationChannels>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListNotificationChannelsQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List notification channels
- */
-export const invalidateListNotificationChannels = async (
-	queryClient: QueryClient,
-	params?: ListNotificationChannelsParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListNotificationChannelsQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint creates a notification channel
  * @summary Create notification channel
@@ -841,370 +733,3 @@ export const useCreateNotificationChannel = <
 > => {
 	return useMutation(getCreateNotificationChannelMutationOptions(options));
 };
-/**
- * This endpoint deletes a notification channel by ID
- * @summary Delete notification channel
- */
-export const deleteNotificationChannel = (
-	{ id }: DeleteNotificationChannelPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/notification_channels/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteNotificationChannel>>,
-		TError,
-		{ pathParams: DeleteNotificationChannelPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteNotificationChannel>>,
-	TError,
-	{ pathParams: DeleteNotificationChannelPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteNotificationChannel'];
-	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 deleteNotificationChannel>>,
-		{ pathParams: DeleteNotificationChannelPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteNotificationChannel(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteNotificationChannel>>
->;
-
-export type DeleteNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete notification channel
- */
-export const useDeleteNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteNotificationChannel>>,
-		TError,
-		{ pathParams: DeleteNotificationChannelPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteNotificationChannel>>,
-	TError,
-	{ pathParams: DeleteNotificationChannelPathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteNotificationChannelMutationOptions(options));
-};
-/**
- * This endpoint returns a notification channel by ID. A channel written by the v1 API can carry a configuration this API does not model.
- * @summary Get notification channel by ID
- */
-export const getNotificationChannel = (
-	{ id }: GetNotificationChannelPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetNotificationChannel200>({
-		url: `/api/v2/notification_channels/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetNotificationChannelQueryKey = ({
-	id,
-}: GetNotificationChannelPathParameters) => {
-	return [`/api/v2/notification_channels/${id}`] as const;
-};
-
-export const getGetNotificationChannelQueryOptions = <
-	TData = Awaited<ReturnType<typeof getNotificationChannel>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetNotificationChannelPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getNotificationChannel>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetNotificationChannelQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getNotificationChannel>>
-	> = ({ signal }) => getNotificationChannel({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getNotificationChannel>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetNotificationChannelQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getNotificationChannel>>
->;
-export type GetNotificationChannelQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get notification channel by ID
- */
-
-export function useGetNotificationChannel<
-	TData = Awaited<ReturnType<typeof getNotificationChannel>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetNotificationChannelPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getNotificationChannel>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetNotificationChannelQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get notification channel by ID
- */
-export const invalidateGetNotificationChannel = async (
-	queryClient: QueryClient,
-	{ id }: GetNotificationChannelPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetNotificationChannelQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint replaces a notification channel's configuration in full. Neither name is part of the request body: both are immutable. The kind may change, which replaces the channel's notifier configuration.
- * @summary Update notification channel
- */
-export const updateNotificationChannel = (
-	{ id }: UpdateNotificationChannelPathParameters,
-	alertmanagertypesUpdatableNotificationChannelDTO?: BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateNotificationChannel200>({
-		url: `/api/v2/notification_channels/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesUpdatableNotificationChannelDTO,
-		signal,
-	});
-};
-
-export const getUpdateNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateNotificationChannel>>,
-		TError,
-		{
-			pathParams: UpdateNotificationChannelPathParameters;
-			data?: BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateNotificationChannel>>,
-	TError,
-	{
-		pathParams: UpdateNotificationChannelPathParameters;
-		data?: BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateNotificationChannel'];
-	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 updateNotificationChannel>>,
-		{
-			pathParams: UpdateNotificationChannelPathParameters;
-			data?: BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateNotificationChannel(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateNotificationChannel>>
->;
-export type UpdateNotificationChannelMutationBody =
-	| BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>
-	| undefined;
-export type UpdateNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update notification channel
- */
-export const useUpdateNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateNotificationChannel>>,
-		TError,
-		{
-			pathParams: UpdateNotificationChannelPathParameters;
-			data?: BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateNotificationChannel>>,
-	TError,
-	{
-		pathParams: UpdateNotificationChannelPathParameters;
-		data?: BodyType<AlertmanagertypesUpdatableNotificationChannelDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateNotificationChannelMutationOptions(options));
-};
-/**
- * This endpoint sends a test notification for the configuration in the request body. The channel need not exist and nothing is persisted, so the body carries a configuration only.
- * @summary Test notification channel
- */
-export const testNotificationChannel = (
-	alertmanagertypesTestableNotificationChannelDTO?: BodyType<AlertmanagertypesTestableNotificationChannelDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/notification_channels/test`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesTestableNotificationChannelDTO,
-		signal,
-	});
-};
-
-export const getTestNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesTestableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof testNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesTestableNotificationChannelDTO> },
-	TContext
-> => {
-	const mutationKey = ['testNotificationChannel'];
-	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 testNotificationChannel>>,
-		{ data?: BodyType<AlertmanagertypesTestableNotificationChannelDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return testNotificationChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type TestNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof testNotificationChannel>>
->;
-export type TestNotificationChannelMutationBody =
-	| BodyType<AlertmanagertypesTestableNotificationChannelDTO>
-	| undefined;
-export type TestNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Test notification channel
- */
-export const useTestNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesTestableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof testNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesTestableNotificationChannelDTO> },
-	TContext
-> => {
-	return useMutation(getTestNotificationChannelMutationOptions(options));
-};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -507,15 +507,6 @@ export enum AlertmanagertypesChannelKindDTO {
 	jsmops = 'jsmops',
 	incidentio = 'incidentio',
 }
-export enum AlertmanagertypesChannelListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum AlertmanagertypesChannelListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-}
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -1009,44 +1000,6 @@ export interface AlertmanagertypesJiraReceiverConfigDTO {
 	wont_fix_resolution?: string;
 }
 
-export interface AlertmanagertypesListedNotificationChannelDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesChannelKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
-export interface AlertmanagertypesListableNotificationChannelDTO {
-	/**
-	 * @type array
-	 */
-	channels: AlertmanagertypesListedNotificationChannelDTO[];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	total: number;
-}
-
 export enum AlertmanagertypesMaintenanceKindDTO {
 	fixed = 'fixed',
 	recurring = 'recurring',
@@ -2438,14 +2391,6 @@ export interface AlertmanagertypesReceiverDTO {
 	wechat_configs?: ConfigWechatConfigDTO[];
 }
 
-export interface AlertmanagertypesTestableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-}
-
-export interface AlertmanagertypesUpdatableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-}
-
 export interface AuthtypesAttributeMappingDTO {
 	/**
 	 * @type string
@@ -4134,53 +4079,6 @@ export interface Querybuildertypesv5LogAggregationDTO {
 	expression?: string;
 }
 
-export enum Querybuildertypesv5BucketOptionsLinearDTOKind {
-	linear = 'linear',
-}
-export interface Querybuildertypesv5LinearBucketsSpecDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	maxValue: number;
-	/**
-	 * @type integer
-	 */
-	numBuckets?: number;
-}
-
-export interface Querybuildertypesv5BucketOptionsLinearDTO {
-	/**
-	 * @type string
-	 * @enum linear
-	 */
-	kind: Querybuildertypesv5BucketOptionsLinearDTOKind;
-	spec: Querybuildertypesv5LinearBucketsSpecDTO;
-}
-
-export enum Querybuildertypesv5BucketOptionsLogDTOKind {
-	log = 'log',
-}
-export interface Querybuildertypesv5LogBucketsSpecDTO {
-	/**
-	 * @type integer,null
-	 */
-	scale?: number | null;
-}
-
-export interface Querybuildertypesv5BucketOptionsLogDTO {
-	/**
-	 * @type string
-	 * @enum log
-	 */
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind;
-	spec: Querybuildertypesv5LogBucketsSpecDTO;
-}
-
-export type Querybuildertypesv5BucketOptionsDTO =
-	| Querybuildertypesv5BucketOptionsLinearDTO
-	| Querybuildertypesv5BucketOptionsLogDTO;
-
 export interface Querybuildertypesv5FilterDTO {
 	/**
 	 * @type string
@@ -4374,7 +4272,6 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 * @type array,null
 	 */
 	aggregations?: Querybuildertypesv5LogAggregationDTO[] | null;
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
 	/**
 	 * @type string
 	 */
@@ -4502,7 +4399,6 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 * @type array,null
 	 */
 	aggregations?: Querybuildertypesv5MetricAggregationDTO[] | null;
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
 	/**
 	 * @type string
 	 */
@@ -4578,7 +4474,6 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 * @type array,null
 	 */
 	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
 	/**
 	 * @type string
 	 */
@@ -5019,57 +4914,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesListPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTOKind {
-	'signoz/TextPanel' = 'signoz/TextPanel',
-}
-export interface DashboardtypesHeaderOptionsDTO {
-	/**
-	 * @type boolean
-	 */
-	hide?: boolean;
-}
-
-export enum DashboardtypesTextModeDTO {
-	markdown = 'markdown',
-}
-export enum DashboardtypesTextAlignDTO {
-	left = 'left',
-	center = 'center',
-	right = 'right',
-}
-export enum DashboardtypesVerticalAlignDTO {
-	top = 'top',
-	center = 'center',
-	bottom = 'bottom',
-}
-export interface DashboardtypesTextPresentationDTO {
-	/**
-	 * @type string,null
-	 */
-	background?: string | null;
-	textAlign?: DashboardtypesTextAlignDTO;
-	verticalAlign?: DashboardtypesVerticalAlignDTO;
-}
-
-export interface DashboardtypesTextPanelSpecDTO {
-	headerOptions?: DashboardtypesHeaderOptionsDTO;
-	mode?: DashboardtypesTextModeDTO;
-	presentation?: DashboardtypesTextPresentationDTO;
-	/**
-	 * @type string
-	 */
-	text?: string;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO {
-	/**
-	 * @enum signoz/TextPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTOKind;
-	spec: DashboardtypesTextPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5077,8 +4921,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -5086,7 +4929,6 @@ export enum Querybuildertypesv5RequestTypeDTO {
 	raw = 'raw',
 	raw_stream = 'raw_stream',
 	trace = 'trace',
-	heatmap = 'heatmap',
 }
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
@@ -5133,7 +4975,6 @@ export interface Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
 }
 
 export interface Querybuildertypesv5QueryBuilderFormulaDTO {
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
 	/**
 	 * @type boolean
 	 */
@@ -6002,7 +5843,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
-	'signoz/TextPanel' = 'signoz/TextPanel',
 }
 /**
  * @nullable
@@ -8702,7 +8542,16 @@ export interface Querybuildertypesv5LabelDTO {
 	value?: Querybuildertypesv5LabelDTOValue;
 }
 
+export interface Querybuildertypesv5BucketDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	step?: number;
+}
+
 export interface Querybuildertypesv5TimeSeriesValueDTO {
+	bucket?: Querybuildertypesv5BucketDTO;
 	/**
 	 * @type boolean
 	 */
@@ -9253,16 +9102,12 @@ export interface PromotetypesPromotePathDTO {
 	promote?: boolean;
 }
 
-export interface Querybuildertypesv5AggregationMetaDTO {
-	/**
-	 * @type array
-	 */
-	buckets?: number[];
+export type Querybuildertypesv5AggregationBucketDTOMeta = {
 	/**
 	 * @type string
 	 */
 	unit?: string;
-}
+};
 
 export interface Querybuildertypesv5AggregationBucketDTO {
 	/**
@@ -9281,7 +9126,10 @@ export interface Querybuildertypesv5AggregationBucketDTO {
 	 * @type array
 	 */
 	lowerBoundSeries?: Querybuildertypesv5TimeSeriesDTO[];
-	meta?: Querybuildertypesv5AggregationMetaDTO;
+	/**
+	 * @type object
+	 */
+	meta?: Querybuildertypesv5AggregationBucketDTOMeta;
 	/**
 	 * @type array
 	 */
@@ -9296,10 +9144,6 @@ export interface Querybuildertypesv5AggregationBucketDTO {
 	upperBoundSeries?: Querybuildertypesv5TimeSeriesDTO[];
 }
 
-export enum Querybuildertypesv5BucketsKindDTO {
-	linear = 'linear',
-	log = 'log',
-}
 export type Querybuildertypesv5ColumnDescriptorDTOMeta = {
 	/**
 	 * @type string
@@ -9766,10 +9610,6 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
-	/**
-	 * @type string
-	 */
-	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9818,10 +9658,6 @@ export interface RulestatehistorytypesGettableRuleStateHistoryContributorDTO {
 	 * @type array,null
 	 */
 	labels: Querybuildertypesv5LabelDTO[] | null;
-	/**
-	 * @type string
-	 */
-	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9917,7 +9753,6 @@ export enum RuletypesAlertTypeDTO {
 	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
 	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
 	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
-	AI_TRACES_BASED_ALERT = 'AI_TRACES_BASED_ALERT',
 }
 export enum RuletypesMatchTypeDTO {
 	at_least_once = 'at_least_once',
@@ -13327,44 +13162,6 @@ export type GetMetricsTreemap200 = {
 	status: string;
 };
 
-export type ListNotificationChannelsParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	query?: string;
-	/**
-	 * @description undefined
-	 */
-	kind?: AlertmanagertypesChannelKindDTO;
-	/**
-	 * @description undefined
-	 */
-	sort?: AlertmanagertypesChannelListSortDTO;
-	/**
-	 * @description undefined
-	 */
-	order?: AlertmanagertypesChannelListOrderDTO;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-};
-
-export type ListNotificationChannels200 = {
-	data: AlertmanagertypesListableNotificationChannelDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type CreateNotificationChannel201 = {
 	data: AlertmanagertypesGettableNotificationChannelDTO;
 	/**
@@ -13373,31 +13170,6 @@ export type CreateNotificationChannel201 = {
 	status: string;
 };
 
-export type DeleteNotificationChannelPathParameters = {
-	id: string;
-};
-export type GetNotificationChannelPathParameters = {
-	id: string;
-};
-export type GetNotificationChannel200 = {
-	data: AlertmanagertypesGettableNotificationChannelDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateNotificationChannelPathParameters = {
-	id: string;
-};
-export type UpdateNotificationChannel200 = {
-	data: AlertmanagertypesGettableNotificationChannelDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**

frontend/src/api/querySuggestions/getFieldKeySuggestions.ts

@@ -0,0 +1,14 @@
+import { getAIObservabilityFieldsKeys } from 'api/generated/services/ai-observability';
+import { getFieldsKeys } from 'api/generated/services/fields';
+import type { BuilderQueryType } from 'types/api/v5/queryRange';
+
+import { FieldKeysFilterConfig, FieldKeysResponse } from './types';
+
+export const getFieldKeySuggestions = (
+	filterConfig: FieldKeysFilterConfig,
+	builderQueryType?: BuilderQueryType,
+	signal?: AbortSignal,
+): Promise<FieldKeysResponse> =>
+	builderQueryType === 'builder_ai_query'
+		? getAIObservabilityFieldsKeys(filterConfig, signal)
+		: getFieldsKeys(filterConfig, signal);

frontend/src/api/querySuggestions/getFieldValueSuggestions.ts

@@ -0,0 +1,14 @@
+import { getAIObservabilityFieldsValues } from 'api/generated/services/ai-observability';
+import { getFieldsValues } from 'api/generated/services/fields';
+import type { BuilderQueryType } from 'types/api/v5/queryRange';
+
+import { FieldValuesFilterConfig, FieldValuesResponse } from './types';
+
+export const getFieldValueSuggestions = (
+	filterConfig: FieldValuesFilterConfig,
+	builderQueryType?: BuilderQueryType,
+	signal?: AbortSignal,
+): Promise<FieldValuesResponse> =>
+	builderQueryType === 'builder_ai_query'
+		? getAIObservabilityFieldsValues(filterConfig, signal)
+		: getFieldsValues(filterConfig, signal);

frontend/src/api/querySuggestions/types.ts

@@ -0,0 +1,26 @@
+import type {
+	GetAIObservabilityFieldsKeys200,
+	GetAIObservabilityFieldsKeysParams,
+	GetAIObservabilityFieldsValues200,
+	GetAIObservabilityFieldsValuesParams,
+	GetFieldsKeys200,
+	GetFieldsKeysParams,
+	GetFieldsValues200,
+	GetFieldsValuesParams,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type FieldKeysFilterConfig =
+	| GetFieldsKeysParams
+	| GetAIObservabilityFieldsKeysParams;
+
+export type FieldValuesFilterConfig =
+	| GetFieldsValuesParams
+	| GetAIObservabilityFieldsValuesParams;
+
+export type FieldKeysResponse =
+	| GetFieldsKeys200
+	| GetAIObservabilityFieldsKeys200;
+
+export type FieldValuesResponse =
+	| GetFieldsValues200
+	| GetAIObservabilityFieldsValues200;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -10,6 +10,7 @@ import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 import AddedFields from './AddedFields';
+import { UseFieldApis } from 'types/common/fieldSuggestion';
 import OtherFields from './OtherFields';
 
 import styles from './FieldsSelector.module.scss';
@@ -31,6 +32,7 @@ interface FieldsSelectorProps {
 	// Lets users add a free-typed field which
 	// does not show up in the suggestions
 	allowCustomFields?: boolean;
+	useFieldApis?: UseFieldApis;
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
@@ -50,6 +52,7 @@ function FieldsSelectorContent({
 	maxFields,
 	requiredFields,
 	allowCustomFields,
+	useFieldApis,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
@@ -158,6 +161,7 @@ function FieldsSelectorContent({
 					onAdd={handleAdd}
 					isAtLimit={isAtLimit}
 					allowCustomFields={allowCustomFields}
+					useFieldApis={useFieldApis}
 				/>
 
 				{hasUnsavedChanges && (

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -3,9 +3,7 @@ import { Button } from '@signozhq/ui/button';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
 	SignalType,
@@ -14,6 +12,13 @@ import {
 import { DataSource } from 'types/common/queryBuilder';
 
 import styles from './FieldsSelector.module.scss';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
+import { UseFieldApis } from 'types/common/fieldSuggestion';
+import { mergeStaticFields } from 'utils/staticFields';
+
+const EMPTY_FIELD_APIS: UseFieldApis = {};
+
+const EMPTY_STATIC_FIELDS: TelemetryFieldKey[] = [];
 
 interface OtherFieldsProps {
 	signal: DataSource;
@@ -22,6 +27,7 @@ interface OtherFieldsProps {
 	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
 	allowCustomFields?: boolean;
+	useFieldApis?: UseFieldApis;
 }
 
 function OtherFields({
@@ -31,26 +37,23 @@ function OtherFields({
 	onAdd,
 	isAtLimit,
 	allowCustomFields,
+	useFieldApis = EMPTY_FIELD_APIS,
 }: OtherFieldsProps): JSX.Element {
-	const { data, isFetching } = useGetQueryKeySuggestions(
-		{
-			signal,
-			searchText: debouncedInputValue,
-		},
-		{
-			queryKey: [
-				REACT_QUERY_KEY.GET_FIELDS_SELECTOR_SUGGESTIONS,
-				signal,
-				debouncedInputValue,
-			],
-			enabled: true,
-		},
+	const { staticFields = EMPTY_STATIC_FIELDS, ...keysConfig } = useFieldApis;
+
+	const { data: fetchedFields, isFetching } = useFieldKeysSuggestion(
+		keysConfig,
+		signal,
+		debouncedInputValue,
 	);
 
 	const otherFields = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data.data.keys || {}).flat();
 		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
+		const suggestions: TelemetryFieldKey[] = mergeStaticFields(
+			staticFields,
+			fetchedFields ?? [],
+			debouncedInputValue,
+		).map((attr) => ({
 			...attr,
 			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
 			signal: attr.signal as SignalType,
@@ -87,7 +90,13 @@ function OtherFields({
 			key: buildCompositeKey(typed, ''),
 		};
 		return [customField, ...available];
-	}, [data, addedFields, allowCustomFields, debouncedInputValue]);
+	}, [
+		staticFields,
+		fetchedFields,
+		addedFields,
+		allowCustomFields,
+		debouncedInputValue,
+	]);
 
 	if (isFetching) {
 		return (

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

@@ -1,11 +1,17 @@
 import { act, fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 import FieldsSelector from '../FieldsSelector';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
 
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
+jest.mock('hooks/querySuggestions/useFieldKeysSuggestion', () => ({
+	useFieldKeysSuggestion: jest.fn(() => ({
+		data: undefined,
+		isFetching: false,
+		isFetched: true,
+	})),
+}));
 
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
@@ -21,22 +27,15 @@ jest.mock('periscope/components/FloatingPanel', () => ({
 }));
 
 const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
+	(useFieldKeysSuggestion as jest.Mock).mockReturnValue({
+		data: names.map((name) => ({
+			name,
+			signal: 'logs',
+			fieldDataType: 'string',
+			fieldContext: '',
+		})),
 		isFetching: false,
+		isFetched: true,
 	});
 };
 

frontend/src/components/FieldsSelector/__tests__/OtherFields.test.tsx

@@ -1,29 +1,30 @@
 import { fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
+import { UseFieldApis } from 'types/common/fieldSuggestion';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 import OtherFields from '../OtherFields';
 
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
+jest.mock('hooks/querySuggestions/useFieldKeysSuggestion', () => ({
+	useFieldKeysSuggestion: jest.fn(() => ({
+		data: undefined,
+		isFetching: false,
+		isFetched: true,
+	})),
+}));
 
 const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
+	(useFieldKeysSuggestion as jest.Mock).mockReturnValue({
+		data: names.map((name) => ({
+			name,
+			signal: 'logs',
+			fieldDataType: 'string',
+			fieldContext: '',
+		})),
 		isFetching: false,
+		isFetched: true,
 	});
 };
 
@@ -82,7 +83,6 @@ describe('OtherFields — custom (free-typed) option', () => {
 		mockSuggestions(['orderId']);
 		renderOtherFields({ debouncedInputValue: 'orderid' });
 
-		// the real suggestion shows, the lowercased custom name does not
 		expect(screen.getByText('orderId')).toBeInTheDocument();
 		expect(screen.queryByText('orderid')).not.toBeInTheDocument();
 	});
@@ -116,10 +116,87 @@ describe('OtherFields — custom (free-typed) option', () => {
 	it('shows the custom option at the field limit but hides its Add button', () => {
 		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c', isAtLimit: true });
 
-		// same as every other row at the limit: name shown, no Add button
 		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
 		expect(
 			screen.queryByRole('button', { name: /add/i }),
 		).not.toBeInTheDocument();
 	});
 });
+
+describe('OtherFields — useFieldApis', () => {
+	const pool: TelemetryFieldKey[] = [
+		{ name: 'total_tokens', fieldContext: 'trace', fieldDataType: 'float64' },
+		{ name: 'llm_call_count', fieldContext: 'trace', fieldDataType: 'float64' },
+	];
+
+	const useFieldApis: UseFieldApis = {
+		builderQueryType: 'builder_ai_query',
+		fieldContext: TelemetrytypesFieldContextDTO.trace,
+	};
+
+	const mockPool = (fields: TelemetryFieldKey[]): void => {
+		(useFieldKeysSuggestion as jest.Mock).mockReturnValue({
+			data: fields,
+			isFetching: false,
+			isFetched: true,
+		});
+	};
+
+	beforeEach(() => {
+		mockPool(pool);
+	});
+
+	it('lists the pool it is handed', () => {
+		renderOtherFields({ useFieldApis, allowCustomFields: false });
+
+		expect(screen.getByText('total_tokens')).toBeInTheDocument();
+		expect(screen.getByText('llm_call_count')).toBeInTheDocument();
+	});
+
+	it('forwards the fetch params and search to the shared keys hook', () => {
+		renderOtherFields({
+			useFieldApis,
+			allowCustomFields: false,
+			debouncedInputValue: 'llm',
+		});
+
+		expect(useFieldKeysSuggestion).toHaveBeenCalledWith(
+			useFieldApis,
+			DataSource.LOGS,
+			'llm',
+		);
+	});
+
+	it('lists static fields the keys endpoint never returns', () => {
+		mockPool([{ name: 'total_tokens' } as TelemetryFieldKey]);
+
+		renderOtherFields({
+			useFieldApis: {
+				...useFieldApis,
+				staticFields: [{ name: 'last_activity_time' } as TelemetryFieldKey],
+			},
+			allowCustomFields: false,
+		});
+
+		expect(screen.getByText('last_activity_time')).toBeInTheDocument();
+		expect(screen.getByText('total_tokens')).toBeInTheDocument();
+	});
+
+	it('omits pool fields that are already added', () => {
+		renderOtherFields({
+			useFieldApis,
+			allowCustomFields: false,
+			addedFields: [
+				{
+					name: 'total_tokens',
+					fieldContext: 'trace',
+					fieldDataType: 'float64',
+					key: 'trace:total_tokens:float64',
+				},
+			],
+		});
+
+		expect(screen.queryByText('total_tokens')).not.toBeInTheDocument();
+		expect(screen.getByText('llm_call_count')).toBeInTheDocument();
+	});
+});

frontend/src/components/MarkdownEditor/EditorStatusBar.tsx

@@ -1,45 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,253 +0,0 @@
-@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

@@ -1,245 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,270 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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

@@ -1,24 +0,0 @@
-// 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

@@ -1,69 +0,0 @@
-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

@@ -1,269 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/** 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/OrderBy/ListViewOrderBy.tsx

@@ -1,16 +1,23 @@
 import { useEffect, useRef, useState } from 'react';
-import { useQuery } from 'react-query';
 import { Select, Spin } from 'antd';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { UseFieldApis } from 'types/common/fieldSuggestion';
 import { DataSource } from 'types/common/queryBuilder';
 
 import './ListViewOrderBy.styles.scss';
 
+const DEFAULT_STATIC_FIELDS: TelemetryFieldKey[] = [
+	{ name: 'timestamp' } as TelemetryFieldKey,
+];
+
+const DEFAULT_FIELD_APIS: UseFieldApis = {};
+
 interface ListViewOrderByProps {
 	value: string;
 	onChange: (value: string) => void;
 	dataSource: DataSource;
+	useFieldApis?: UseFieldApis;
 }
 
 // Loader component for the dropdown when loading or no results
@@ -26,7 +33,9 @@ function ListViewOrderBy({
 	value,
 	onChange,
 	dataSource,
+	useFieldApis = DEFAULT_FIELD_APIS,
 }: ListViewOrderByProps): JSX.Element {
+	const { staticFields = DEFAULT_STATIC_FIELDS, ...keysConfig } = useFieldApis;
 	const [searchInput, setSearchInput] = useState('');
 	const [debouncedInput, setDebouncedInput] = useState('');
 	const [selectOptions, setSelectOptions] = useState<
@@ -35,16 +44,11 @@ function ListViewOrderBy({
 	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	// Fetch key suggestions based on debounced input
-	const { data, isLoading } = useQuery({
-		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
-		queryFn: async () => {
-			const response = await getKeySuggestions({
-				signal: dataSource,
-				searchText: debouncedInput,
-			});
-			return response.data;
-		},
-	});
+	const { data, isLoading } = useFieldKeysSuggestion(
+		keysConfig,
+		dataSource,
+		debouncedInput,
+	);
 
 	useEffect(
 		() => (): void => {
@@ -55,24 +59,24 @@ function ListViewOrderBy({
 		[],
 	);
 
+	const staticKeysSignature = staticFields.map((field) => field.name).join(',');
+
 	// Update options when API data changes
 	useEffect(() => {
-		const rawKeys: QueryKeyDataSuggestionsProps[] = data?.data?.keys
-			? Object.values(data.data?.keys).flat()
-			: [];
+		const keyNames = (data ?? []).map((field) => field.name);
+		const search = searchInput.trim().toLowerCase();
+		const staticMatches = staticKeysSignature
+			.split(',')
+			.filter((key) => key.length > 0 && key.toLowerCase().includes(search));
+		const uniqueKeys = [...new Set([...staticMatches, ...keyNames])];
 
-		const keyNames = rawKeys.map((key) => key.name);
-		const uniqueKeys = [
-			...new Set(searchInput ? keyNames : ['timestamp', ...keyNames]),
-		];
-
-		const updatedOptions = uniqueKeys.flatMap((key) => [
-			{ label: `${key} (desc)`, value: `${key}:desc` },
-			{ label: `${key} (asc)`, value: `${key}:asc` },
-		]);
-
-		setSelectOptions(updatedOptions);
-	}, [data, searchInput]);
+		setSelectOptions(
+			uniqueKeys.flatMap((key) => [
+				{ label: `${key} (desc)`, value: `${key}:desc` },
+				{ label: `${key} (asc)`, value: `${key}:asc` },
+			]),
+		);
+	}, [data, searchInput, staticKeysSignature]);
 
 	// Handle search input with debounce
 	const handleSearch = (input: string): void => {

frontend/src/components/OrderBy/__tests__/ListViewOrderBy.test.tsx

@@ -0,0 +1,159 @@
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import { ENVIRONMENT } from 'constants/env';
+import { TRACE_VIEW_ORDER_BY_FIELDS } from 'container/LLMObservability/Explorer/constants';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+import ListViewOrderBy from '../ListViewOrderBy';
+
+const seenAI: URLSearchParams[] = [];
+const seenGeneric: URLSearchParams[] = [];
+
+const mockAIKeys = (names: string[]): void => {
+	server.use(
+		rest.get(
+			`${ENVIRONMENT.baseURL}/api/v1/ai_observability/fields/keys`,
+			(req, res, ctx) => {
+				seenAI.push(req.url.searchParams);
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							complete: true,
+							keys: Object.fromEntries(names.map((name) => [name, [{ name }]])),
+						},
+					}),
+				);
+			},
+		),
+	);
+};
+
+const mockGenericKeys = (names: string[]): void => {
+	server.use(
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (req, res, ctx) => {
+			seenGeneric.push(req.url.searchParams);
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						complete: true,
+						keys: Object.fromEntries(names.map((name) => [name, [{ name }]])),
+					},
+				}),
+			);
+		}),
+	);
+};
+
+const openDropdown = (): void => {
+	fireEvent.mouseDown(screen.getByRole('combobox'));
+};
+
+const getOptionLabels = (): string[] =>
+	Array.from(document.querySelectorAll('.ant-select-item-option-content')).map(
+		(node) => node.textContent ?? '',
+	);
+
+describe('ListViewOrderBy', () => {
+	beforeEach(() => {
+		seenAI.length = 0;
+		seenGeneric.length = 0;
+	});
+
+	it('reads the ai_observability trace context for an AI query', async () => {
+		mockAIKeys(['total_tokens']);
+
+		render(
+			<ListViewOrderBy
+				value="last_activity_time:desc"
+				onChange={jest.fn()}
+				dataSource={DataSource.TRACES}
+				useFieldApis={TRACE_VIEW_ORDER_BY_FIELDS}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(seenAI).toHaveLength(1);
+		});
+		expect(seenAI[0]?.get('searchText')).toBe('');
+		expect(seenAI[0]?.get('fieldContext')).toBe(
+			TelemetrytypesFieldContextDTO.trace,
+		);
+		expect(seenGeneric).toHaveLength(0);
+	});
+
+	it('offers the static keys alongside the ones the endpoint reports', async () => {
+		mockAIKeys(['total_tokens']);
+
+		render(
+			<ListViewOrderBy
+				value="last_activity_time:desc"
+				onChange={jest.fn()}
+				dataSource={DataSource.TRACES}
+				useFieldApis={TRACE_VIEW_ORDER_BY_FIELDS}
+			/>,
+		);
+
+		openDropdown();
+
+		await waitFor(() => {
+			expect(getOptionLabels()).toContain('total_tokens (desc)');
+		});
+		expect(getOptionLabels()).toContain('last_activity_time (asc)');
+	});
+
+	it('keeps a matching static key while searching', async () => {
+		mockAIKeys([]);
+
+		render(
+			<ListViewOrderBy
+				value="last_activity_time:desc"
+				onChange={jest.fn()}
+				dataSource={DataSource.TRACES}
+				useFieldApis={TRACE_VIEW_ORDER_BY_FIELDS}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(seenAI.length).toBeGreaterThan(0);
+		});
+
+		openDropdown();
+		fireEvent.change(screen.getByRole('combobox'), {
+			target: { value: 'activity' },
+		});
+
+		await waitFor(() => {
+			expect(getOptionLabels()).toContain('last_activity_time (desc)');
+		});
+	});
+
+	it('defaults to timestamp and the generic endpoint', async () => {
+		mockGenericKeys(['service.name']);
+
+		render(
+			<ListViewOrderBy
+				value="timestamp:desc"
+				onChange={jest.fn()}
+				dataSource={DataSource.TRACES}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(seenGeneric).toHaveLength(1);
+		});
+		expect(seenGeneric[0]?.get('signal')).toBe(DataSource.TRACES);
+		expect(seenGeneric[0]?.get('searchText')).toBe('');
+
+		openDropdown();
+
+		await waitFor(() => {
+			expect(getOptionLabels()).toContain('timestamp (desc)');
+		});
+	});
+});

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

@@ -17,6 +17,7 @@ import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
+import { DATA_SOURCE_TO_SIGNAL } from 'constants/fieldSuggestions';
 import {
 	negationQueryOperatorSuggestions,
 	OPERATORS,
@@ -45,6 +46,13 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { getRecentQueries } from 'lib/recentQueries/getRecentQueries';
+import type {
+	TelemetrytypesGettableFieldKeysDTOKeysAnyOf,
+	TelemetrytypesSourceDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getFieldKeySuggestions } from 'api/querySuggestions/getFieldKeySuggestions';
+import { getFieldValueSuggestions } from 'api/querySuggestions/getFieldValueSuggestions';
 import type { SignalType } from 'types/api/v5/queryRange';
 
 import {
@@ -52,12 +60,6 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-	SuggestedFieldKey,
-	SuggestedFieldKeysByName,
-} from './fieldSuggestions';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -265,8 +267,10 @@ function QuerySearch({
 	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
-	const generateOptions = (keys: SuggestedFieldKeysByName): any[] =>
-		Object.values(keys).flatMap((items: SuggestedFieldKey[]) =>
+	const generateOptions = (
+		keys: TelemetrytypesGettableFieldKeysDTOKeysAnyOf,
+	): any[] =>
+		Object.values(keys).flatMap((items: TelemetrytypesTelemetryFieldKeyDTO[]) =>
 			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -319,17 +323,19 @@ function QuerySearch({
 
 			lastFetchedKeyRef.current = searchText || '';
 
-			const response = await fetchFieldKeysForQuery({
-				builderQueryType: queryData.builderQueryType,
-				dataSource,
-				searchText: searchText || '',
-				metricName: debouncedMetricName ?? undefined,
-				signalSource: signalSource as 'meter' | '',
-				metricNamespace,
-			});
+			const response = await getFieldKeySuggestions(
+				{
+					signal: DATA_SOURCE_TO_SIGNAL[dataSource],
+					searchText: searchText || '',
+					metricName: debouncedMetricName ?? undefined,
+					source: signalSource as TelemetrytypesSourceDTO,
+					metricNamespace,
+				},
+				queryData.builderQueryType,
+			);
 
-			if (response.data.data) {
-				const { keys } = response.data.data;
+			if (response.data.keys) {
+				const { keys } = response.data;
 				const options = generateOptions(keys);
 				// Deduplicate by full variant identity (name + context + data type), NOT by
 				// label. deduping by label removes varient which is not expected. If we need
@@ -497,21 +503,23 @@ function QuerySearch({
 			try {
 				const values = valueSuggestionsOverride
 					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await fetchFieldValuesForQuery({
-							builderQueryType: queryData.builderQueryType,
-							dataSource,
-							key,
-							searchText: sanitizedSearchText,
-							signalSource: signalSource as 'meter' | '',
-							metricName: debouncedMetricName ?? undefined,
-						}).then((response) => {
-							const responseData = response.data as any;
-							const data = responseData.data || {};
-							const values = data.values || {};
+					: await getFieldValueSuggestions(
+							{
+								signal: DATA_SOURCE_TO_SIGNAL[dataSource],
+								name: key,
+								searchText: sanitizedSearchText,
+								source: signalSource as TelemetrytypesSourceDTO,
+								metricName: debouncedMetricName ?? undefined,
+							},
+							queryData.builderQueryType,
+						).then((response) => {
+							const responseData = response.data;
+							const responseDataValues = responseData.values;
+
 							return {
-								stringValues: values.stringValues || [],
-								numberValues: values.numberValues || [],
-								complete: data.complete ?? false,
+								stringValues: responseDataValues.stringValues ?? [],
+								numberValues: responseDataValues.numberValues ?? [],
+								complete: responseData.complete ?? false,
 							};
 						});
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/fieldSuggestions.test.ts

@@ -1,215 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-} from '../fieldSuggestions';
-
-jest.mock('api/generated/services/ai-observability', () => ({
-	getAIObservabilityFieldsKeys: jest.fn(),
-	getAIObservabilityFieldsValues: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn(),
-}));
-
-const mockedAIKeys = getAIObservabilityFieldsKeys as jest.MockedFunction<
-	typeof getAIObservabilityFieldsKeys
->;
-const mockedGenericKeys = getKeySuggestions as jest.MockedFunction<
-	typeof getKeySuggestions
->;
-const mockedAIValues = getAIObservabilityFieldsValues as jest.MockedFunction<
-	typeof getAIObservabilityFieldsValues
->;
-const mockedGenericValues = getValueSuggestions as jest.MockedFunction<
-	typeof getValueSuggestions
->;
-
-const aiValuesResponse = (
-	values: { stringValues?: string[]; numberValues?: number[] } | null,
-	complete = true,
-): Awaited<ReturnType<typeof getAIObservabilityFieldsValues>> =>
-	({
-		status: 'success',
-		data: { complete, values },
-	}) as Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>;
-
-describe('fetchFieldKeysForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: {
-				complete: true,
-				keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-			},
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const keys = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: 'llm',
-		});
-
-		expect(mockedAIKeys).toHaveBeenCalledWith({ searchText: 'llm' });
-		expect(mockedGenericKeys).not.toHaveBeenCalled();
-		expect(keys.data.data).toStrictEqual({
-			complete: true,
-			keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		mockedGenericKeys.mockResolvedValue({
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as Awaited<ReturnType<typeof getKeySuggestions>>);
-
-		await fetchFieldKeysForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			searchText: 'svc',
-		});
-
-		expect(mockedAIKeys).not.toHaveBeenCalled();
-		expect(mockedGenericKeys).toHaveBeenCalledWith(
-			expect.objectContaining({ signal: DataSource.TRACES, searchText: 'svc' }),
-		);
-	});
-
-	it('normalizes a null ai_observability keys payload to an empty map', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: { complete: false, keys: null },
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const response = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: '',
-		});
-
-		expect(response.data.data).toStrictEqual({ complete: false, keys: {} });
-	});
-
-	it('passes the generic response through untouched', async () => {
-		const genericResponse = {
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as unknown as Awaited<ReturnType<typeof getKeySuggestions>>;
-		mockedGenericKeys.mockResolvedValue(genericResponse);
-
-		await expect(
-			fetchFieldKeysForQuery({
-				builderQueryType: 'builder_query',
-				dataSource: DataSource.TRACES,
-				searchText: '',
-			}),
-		).resolves.toBe(genericResponse);
-	});
-});
-
-describe('fetchFieldValuesForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIValues.mockResolvedValue(
-			aiValuesResponse({ stringValues: ['gpt-4o'], numberValues: [] }),
-		);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'gen_ai.request.model',
-			searchText: 'gpt',
-		});
-
-		expect(mockedGenericValues).not.toHaveBeenCalled();
-		expect(response).toStrictEqual({
-			data: {
-				data: {
-					complete: true,
-					values: { stringValues: ['gpt-4o'], numberValues: [] },
-				},
-			},
-		});
-	});
-
-	it('forwards the key as the name the endpoint expects', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse({}));
-
-		await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'total_tokens',
-			searchText: '',
-		});
-
-		expect(mockedAIValues).toHaveBeenCalledWith({
-			name: 'total_tokens',
-			searchText: '',
-		});
-	});
-
-	it('wraps the ai_observability payload in the envelope the call site unwraps', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse(null, false));
-
-		await expect(
-			fetchFieldValuesForQuery({
-				builderQueryType: 'builder_ai_query',
-				dataSource: DataSource.TRACES,
-				key: 'llm_call_count',
-				searchText: '',
-			}),
-		).resolves.toStrictEqual({
-			data: { data: { complete: false, values: null } },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		const genericResponse = {
-			data: {
-				data: { complete: false, values: { stringValues: ['frontend'] } },
-			},
-		} as unknown as Awaited<ReturnType<typeof getValueSuggestions>>;
-		mockedGenericValues.mockResolvedValue(genericResponse);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			key: 'service.name',
-			searchText: 'front',
-		});
-
-		expect(mockedAIValues).not.toHaveBeenCalled();
-		expect(mockedGenericValues).toHaveBeenCalledWith(
-			expect.objectContaining({
-				signal: DataSource.TRACES,
-				key: 'service.name',
-				searchText: 'front',
-			}),
-		);
-		expect(response).toBe(genericResponse);
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/fieldSuggestions.ts

@@ -1,111 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export interface SuggestedFieldKey {
-	name: string;
-	fieldContext?: string;
-	fieldDataType?: string;
-}
-
-export type SuggestedFieldKeysByName = Record<string, SuggestedFieldKey[]>;
-
-export interface SuggestedFieldKeysPayload {
-	complete: boolean;
-	keys: SuggestedFieldKeysByName;
-}
-
-export interface SuggestedFieldKeysResponse {
-	data: { data?: SuggestedFieldKeysPayload };
-}
-
-export interface SuggestedFieldValuesPayload {
-	complete?: boolean;
-	values?: {
-		stringValues?: string[] | null;
-		numberValues?: number[] | null;
-	} | null;
-}
-
-export interface SuggestedFieldValuesResponse {
-	data: { data?: SuggestedFieldValuesPayload };
-}
-
-interface FetchFieldKeysParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-	metricNamespace?: string;
-}
-
-interface FetchFieldValuesParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	key: string;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-}
-
-export const fetchFieldKeysForQuery = async ({
-	builderQueryType,
-	dataSource,
-	searchText,
-	metricName,
-	signalSource,
-	metricNamespace,
-}: FetchFieldKeysParams): Promise<SuggestedFieldKeysResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsKeys({ searchText });
-
-		return {
-			data: {
-				data: response.data
-					? { complete: response.data.complete, keys: response.data.keys ?? {} }
-					: undefined,
-			},
-		};
-	}
-
-	return getKeySuggestions({
-		signal: dataSource,
-		searchText,
-		metricName,
-		signalSource,
-		metricNamespace,
-	});
-};
-
-export const fetchFieldValuesForQuery = async ({
-	builderQueryType,
-	dataSource,
-	key,
-	searchText,
-	metricName,
-	signalSource,
-}: FetchFieldValuesParams): Promise<SuggestedFieldValuesResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsValues({
-			name: key,
-			searchText,
-		});
-
-		return { data: { data: response.data } };
-	}
-
-	// getValueSuggestions' declared response type does not match what the endpoint returns.
-	return getValueSuggestions({
-		signal: dataSource,
-		key,
-		searchText,
-		signalSource,
-		metricName,
-	}) as unknown as Promise<SuggestedFieldValuesResponse>;
-};

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

@@ -1,10 +1,15 @@
 import { EditorView } from '@uiw/react-codemirror';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { getFieldKeySuggestions } from 'api/querySuggestions/getFieldKeySuggestions';
+import { getFieldValueSuggestions } from 'api/querySuggestions/getFieldValueSuggestions';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { fireEvent, render, userEvent, waitFor } from 'tests/test-utils';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import type { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
 
 import QuerySearch from '../QuerySearch/QuerySearch';
@@ -30,17 +35,25 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	};
 });
 
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn().mockResolvedValue({
-		data: {
-			data: { keys: {} as Record<string, QueryKeyDataSuggestionsProps[]> },
-		},
+jest.mock('api/querySuggestions/getFieldKeySuggestions', () => ({
+	getFieldKeySuggestions: jest.fn().mockResolvedValue({
+		status: 'success',
+		data: { complete: true, keys: {} },
 	}),
 }));
 
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn().mockResolvedValue({
-		data: { data: { values: { stringValues: [], numberValues: [] } } },
+jest.mock('api/querySuggestions/getFieldValueSuggestions', () => ({
+	getFieldValueSuggestions: jest.fn().mockResolvedValue({
+		status: 'success',
+		data: {
+			complete: true,
+			values: {
+				stringValues: [],
+				numberValues: [],
+				boolValues: [],
+				relatedValues: [],
+			},
+		},
 	}),
 }));
 
@@ -68,8 +81,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 
 	it('fetches key suggestions when typing a key (debounced)', async () => {
 		// Use real timers for CodeMirror integration tests
-		const mockedGetKeys = getKeySuggestions as jest.MockedFunction<
-			typeof getKeySuggestions
+		const mockedGetKeys = getFieldKeySuggestions as jest.MockedFunction<
+			typeof getFieldKeySuggestions
 		>;
 		mockedGetKeys.mockClear();
 
@@ -102,10 +115,22 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 
 	it('fetches value suggestions when editing value context', async () => {
 		// Use real timers for CodeMirror integration tests
-		const mockedGetValues = getValueSuggestions as jest.MockedFunction<
-			typeof getValueSuggestions
+		const mockedGetValues = getFieldValueSuggestions as jest.MockedFunction<
+			typeof getFieldValueSuggestions
 		>;
 		mockedGetValues.mockClear();
+		mockedGetValues.mockResolvedValueOnce({
+			status: 'success',
+			data: {
+				complete: true,
+				values: {
+					stringValues: ['payment-service'],
+					numberValues: [200],
+					boolValues: [],
+					relatedValues: [],
+				},
+			},
+		});
 
 		render(
 			<QuerySearch
@@ -129,12 +154,18 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		await waitFor(() => expect(mockedGetValues).toHaveBeenCalled(), {
 			timeout: 2000,
 		});
+
+		// the string and number values off the response both reach the dropdown
+		await expect(
+			screen.findByText('payment-service'),
+		).resolves.toBeInTheDocument();
+		await expect(screen.findByText('200')).resolves.toBeInTheDocument();
 	});
 
 	it('fetches key suggestions on mount for LOGS', async () => {
 		// Use real timers for CodeMirror integration tests
-		const mockedGetKeysOnMount = getKeySuggestions as jest.MockedFunction<
-			typeof getKeySuggestions
+		const mockedGetKeysOnMount = getFieldKeySuggestions as jest.MockedFunction<
+			typeof getFieldKeySuggestions
 		>;
 		mockedGetKeysOnMount.mockClear();
 
@@ -153,6 +184,7 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			() =>
 				expect(mockedGetKeysOnMount).toHaveBeenCalledWith(
 					expect.objectContaining({ signal: DataSource.LOGS, searchText: '' }),
+					undefined,
 				),
 			{ timeout: 2000 },
 		);
@@ -357,8 +389,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 	});
 
 	it('fetches key suggestions for metrics even without aggregateAttribute.key when showFilterSuggestionsWithoutMetric is true', async () => {
-		const mockedGetKeys = getKeySuggestions as jest.MockedFunction<
-			typeof getKeySuggestions
+		const mockedGetKeys = getFieldKeySuggestions as jest.MockedFunction<
+			typeof getFieldKeySuggestions
 		>;
 		mockedGetKeys.mockClear();
 

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

@@ -1,9 +1,12 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { jest } from '@jest/globals';
 import { fireEvent, waitFor } from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { render, screen, userEvent } from 'tests/test-utils';
 import {
 	Having,
@@ -42,6 +45,22 @@ jest.mock(
 jest.mock('hooks/queryBuilder/useQueryBuilder');
 jest.mock('hooks/queryBuilder/useQueryBuilderOperations');
 
+const mockFieldKeys = (): void => {
+	server.use(
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { complete: true, keys: {} } }),
+			),
+		),
+	);
+};
+
+// server.resetHandlers() runs after every test, so the handler is re-registered here.
+beforeEach(() => {
+	mockFieldKeys();
+});
+
 const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
 const mockedUseQueryOperations = jest.mocked(
 	useQueryOperations,

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

@@ -31,15 +31,25 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn().mockResolvedValue({
-		data: { data: { keys: {} } },
+jest.mock('api/querySuggestions/getFieldKeySuggestions', () => ({
+	getFieldKeySuggestions: jest.fn().mockResolvedValue({
+		status: 'success',
+		data: { complete: true, keys: {} },
 	}),
 }));
 
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn().mockResolvedValue({
-		data: { data: { values: { stringValues: [], numberValues: [] } } },
+jest.mock('api/querySuggestions/getFieldValueSuggestions', () => ({
+	getFieldValueSuggestions: jest.fn().mockResolvedValue({
+		status: 'success',
+		data: {
+			complete: true,
+			values: {
+				stringValues: [],
+				numberValues: [],
+				boolValues: [],
+				relatedValues: [],
+			},
+		},
 	}),
 }));
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,14 +1,11 @@
 import { useMemo } from 'react';
 import { useGetFieldsValues } from 'api/generated/services/fields';
-import {
-	TelemetrytypesSignalDTO,
-	TelemetrytypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { DataSource } from 'types/common/queryBuilder';
+import { DATA_SOURCE_TO_SIGNAL } from 'constants/fieldSuggestions';
 import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
 
 interface UseFieldValuesProps {
@@ -29,15 +26,6 @@ interface UseFieldValuesReturn {
 	isFetching: boolean;
 }
 
-export const DATA_SOURCE_TO_SIGNAL: Record<
-	DataSource,
-	TelemetrytypesSignalDTO
-> = {
-	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
-	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
-	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
-};
-
 const QUICK_FILTERS_SOURCE_TO_SOURCE: Partial<
 	Record<QuickFiltersSource, TelemetrytypesSourceDTO>
 > = {

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -3,9 +3,9 @@ import { Button, Skeleton } from 'antd';
 import { useGetFieldsKeys } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DATA_SOURCE_TO_SIGNAL } from 'components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
+import { DATA_SOURCE_TO_SIGNAL } from 'constants/fieldSuggestions';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import {
 	FieldContext,

frontend/src/constants/fieldSuggestions.ts

@@ -0,0 +1,13 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const DATA_SOURCE_TO_SIGNAL: Record<
+	DataSource,
+	TelemetrytypesSignalDTO
+> = {
+	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
+	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
+	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
+};
+
+export const FIELD_SUGGESTION_CACHE_TIME = 60_000;

frontend/src/constants/localStorage.ts

@@ -12,6 +12,8 @@ export enum LOCALSTORAGE {
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
+	AI_OBSERVABILITY_TRACE_VIEW_COLUMNS = 'AI_OBSERVABILITY_TRACE_VIEW_COLUMNS',
+	AI_OBSERVABILITY_LIST_COLUMNS = 'AI_OBSERVABILITY_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/constants/panelTypes.ts

@@ -31,8 +31,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
-		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
-		[PANEL_TYPES.TEXT]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -376,7 +376,6 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
-	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 

frontend/src/constants/reactQueryKeys.ts

@@ -106,9 +106,6 @@ export const REACT_QUERY_KEY = {
 	// Dashboard Grid Card Query Keys
 	DASHBOARD_GRID_CARD_QUERY_RANGE: 'DASHBOARD_GRID_CARD_QUERY_RANGE',
 
-	// Fields Selector Query Keys
-	GET_FIELDS_SELECTOR_SUGGESTIONS: 'GET_FIELDS_SELECTOR_SUGGESTIONS',
-
 	// AI Assistant Query Keys
 	AI_ASSISTANT_EMPTY_STATE_CHIPS: 'AI_ASSISTANT_EMPTY_STATE_CHIPS',
 } as const;

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -376,9 +376,7 @@ export default function BillingContainer(): JSX.Element {
 				</Typography.Link>
 			</AuthZTooltip>
 			{` if your payment information has changed. Email us at `}
-			<Typography.Text as="span" color="muted">
-				cloud-support@signoz.io
-			</Typography.Text>
+			<Typography.Text color="muted">cloud-support@signoz.io</Typography.Text>
 			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
 		</Typography>
 	);

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -174,7 +174,6 @@ export default function ServiceTraces({
 						columns={columns}
 						dataSource={top5Services}
 						pagination={false}
-						rowKey="serviceName"
 						className="services-table"
 						onRow={(record: ServicesList): Record<string, unknown> => ({
 							onClick: (event: React.MouseEvent): void => {

frontend/src/container/InfraMonitoringK8sV2/Base/K8sOptionsSidePanel.tsx

@@ -216,7 +216,7 @@ function K8sOptionsSidePanel<TData>({
 					);
 					return (
 						<div className={styles.columnItem} key={column.id}>
-							<Typography.Text as="span" size="sm" className={styles.columnLabel}>
+							<Typography.Text size="sm" className={styles.columnLabel}>
 								{column.label}
 							</Typography.Text>
 							{column.canBeHidden ? (

frontend/src/container/LLMObservability/Explorer/Controls/index.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Settings } from '@signozhq/icons';
 import FieldsSelector from 'components/FieldsSelector';
 import Controls, { ControlsProps } from 'container/Controls';
+import { UseFieldApis } from 'types/common/fieldSuggestion';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
 import { DataSource } from 'types/common/queryBuilder';
@@ -14,7 +15,8 @@ function TraceExplorerControls({
 	totalCount,
 	perPageOptions,
 	config,
-	showSizeChanger = true,
+	useFieldApis,
+	requiredFields,
 }: TraceExplorerControlsProps): JSX.Element | null {
 	const { t } = useTranslation(['trace']);
 	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
@@ -44,6 +46,8 @@ function TraceExplorerControls({
 						onFieldsChange={config.fieldsSelector.onFieldsChange}
 						onClose={(): void => setIsFieldsSelectorOpen(false)}
 						signal={DataSource.TRACES}
+						useFieldApis={useFieldApis}
+						requiredFields={requiredFields}
 					/>
 				</>
 			)}
@@ -57,26 +61,24 @@ function TraceExplorerControls({
 				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
 				handleNavigateNext={handleNavigateNext}
 				handleNavigatePrevious={handleNavigatePrevious}
-				showSizeChanger={showSizeChanger}
 			/>
 		</div>
 	);
 }
 
-TraceExplorerControls.defaultProps = {
-	config: null,
-};
-
 type TraceExplorerControlsProps = Pick<
 	ControlsProps,
 	'isLoading' | 'totalCount' | 'perPageOptions'
 > & {
 	config?: OptionsMenuConfig | null;
-	showSizeChanger?: boolean;
+	useFieldApis?: UseFieldApis;
+	requiredFields?: readonly string[];
 };
 
 TraceExplorerControls.defaultProps = {
-	showSizeChanger: true,
+	config: null,
+	useFieldApis: undefined,
+	requiredFields: undefined,
 };
 
 export default memo(TraceExplorerControls);

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -10,16 +10,10 @@ import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -28,7 +22,6 @@ import {
 	useHandleExplorerTabChange,
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
@@ -37,7 +30,7 @@ import {
 	tracesChangeViewAction,
 	tracesRunQueryAction,
 	tracesSaveViewAction,
-} from 'pages/TracesExplorer/aiActions';
+} from './aiActions';
 import { Warning } from 'types/api';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -45,12 +38,10 @@ import {
 	explorerViewToPanelType,
 	getExplorerViewFromUrl,
 } from 'utils/explorerUtils';
-import { v4 } from 'uuid';
 
-import { TOOLBAR_VIEWS } from './constants';
-import { getExportQueryData, getQueryByPanelType } from './explorerUtils';
+import LeftToolbarActions from '../ToolbarActions/LeftToolbarActions';
+import { DEFAULT_PANEL_TYPE, TOOLBAR_VIEWS } from './constants';
 import ListView from './ListView/ListView';
-import { defaultSelectedColumns } from './ListView/configs';
 import QuerySection from './QuerySection/QuerySection';
 import TableView from './TableView/TableView';
 import TimeSeriesView from './TimeSeriesView/TimeSeriesView';
@@ -60,7 +51,6 @@ import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
 	const {
-		panelType,
 		updateAllQueriesOperators,
 		handleRunQuery,
 		stagedQuery,
@@ -72,20 +62,12 @@ function Explorer(): JSX.Element {
 
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 
-	const { options } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'noop',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
 	const [searchParams] = useSearchParams();
 	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();
 
 	// Get panel type from URL
-	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const panelTypesFromUrl = useGetPanelTypesQueryParam(DEFAULT_PANEL_TYPE);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 	const [isCancelled, setIsCancelled] = useState(false);
 
@@ -116,15 +98,13 @@ function Explorer(): JSX.Element {
 		(): Query =>
 			updateAllQueriesOperators(
 				initialQueryAIWithType,
-				PANEL_TYPES.LIST,
+				DEFAULT_PANEL_TYPE,
 				DataSource.TRACES,
 			),
 		[updateAllQueriesOperators],
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { safeNavigate } = useSafeNavigate();
-	const getExportToDashboardLink = useGetExportToDashboardLink();
 
 	const handleChangeSelectedView = useCallback(
 		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
@@ -139,7 +119,7 @@ function Explorer(): JSX.Element {
 		},
 		[handleExplorerTabChange, handleSetConfig],
 	);
-
+	//TODO: check if we need to enable AI Assistant page actions on LLM o11y
 	// ─── AI Assistant page actions (only when license feature is on) ───────────
 	const aiActions = useMemo(
 		() =>
@@ -179,59 +159,6 @@ function Explorer(): JSX.Element {
 	usePageActions('traces-explorer', aiActions);
 	// ───────────────────────────────────────────────────────────────────────────
 
-	const exportDefaultQuery = useMemo(
-		() =>
-			getQueryByPanelType(
-				stagedQuery || initialQueryAIWithType,
-				panelType || PANEL_TYPES.LIST,
-			),
-		[stagedQuery, panelType],
-	);
-
-	const handleExport = useCallback(
-		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
-			if (!dashboard || !panelType) {
-				return;
-			}
-
-			const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
-				? panelType
-				: PANEL_TYPES.TIME_SERIES;
-
-			const widgetId = v4();
-
-			const query = getExportQueryData(
-				exportDefaultQuery,
-				panelTypeParam,
-				options,
-			);
-
-			logEvent('Traces Explorer: Add to dashboard successful', {
-				panelType,
-				isNewDashboard,
-				dashboardName: dashboard?.title,
-			});
-
-			const dashboardEditView = getExportToDashboardLink({
-				query,
-				panelType: panelTypeParam,
-				dashboardId: dashboard.id,
-				widgetId,
-			});
-
-			if (dashboardEditView) {
-				safeNavigate(dashboardEditView);
-			}
-		},
-		[
-			exportDefaultQuery,
-			panelType,
-			safeNavigate,
-			options,
-			getExportToDashboardLink,
-		],
-	);
-
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	const logEventCalledRef = useRef(false);
@@ -354,14 +281,6 @@ function Explorer(): JSX.Element {
 							</div>
 						)}
 					</div>
-
-					<ExplorerOptionWrapper
-						disabled={!stagedQuery}
-						query={exportDefaultQuery}
-						sourcepage={DataSource.TRACES}
-						onExport={handleExport}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
 				</div>
 			</div>
 		</Sentry.ErrorBoundary>

frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx

@@ -12,25 +12,17 @@ import { QueryKey } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import {
-	getTraceLink,
-	transformSpanRows,
-} from 'container/TracesExplorer/ListView/utils';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { getTraceLink, transformSpanRows } from './utils';
+import { getFieldColumn, TracesTableRow } from '../TracesTable/getFieldColumn';
+import TracesTable from '../TracesTable/TracesTable';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
@@ -42,6 +34,7 @@ import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import TraceExplorerControls from '../Controls';
 import { getListViewQuery } from '../explorerUtils';
 import {
 	defaultSelectedColumns,
@@ -79,14 +72,6 @@ function ListView({
 		loading: timeRangeUpdateLoading,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	const { options, config } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'count',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
 	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
 		QueryParams.pagination,
 	);
@@ -98,19 +83,6 @@ function ListView({
 		[stagedQuery, orderBy],
 	);
 
-	// Stable sorted-name signature for the queryKey.
-	// - Drag updates selectColumns; raw queryKey would churn on reorder.
-	// - Trace API fetches only listed columns → add/remove must refetch.
-	// - Sorted-name signature: stable on reorder, changes on add/remove.
-	const selectColumnsSignature = useMemo(
-		() =>
-			(options?.selectColumns ?? [])
-				.map((c) => c.name)
-				.sort()
-				.join(','),
-		[options?.selectColumns],
-	);
-
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -120,7 +92,6 @@ function ListView({
 			stagedQuery,
 			panelType,
 			paginationConfig,
-			selectColumnsSignature,
 			orderBy,
 		],
 		[
@@ -128,7 +99,6 @@ function ListView({
 			panelType,
 			globalSelectedTime,
 			paginationConfig,
-			selectColumnsSignature,
 			maxTime,
 			minTime,
 			orderBy,
@@ -150,7 +120,7 @@ function ListView({
 			},
 			tableParams: {
 				pagination: paginationConfig,
-				selectColumns: options?.selectColumns,
+				selectColumns: defaultSelectedColumns,
 			},
 		},
 		ENTITY_VERSION_V5,
@@ -158,10 +128,7 @@ function ListView({
 			queryKey,
 			enabled:
 				// don't make api call while the time range state in redux is loading
-				!timeRangeUpdateLoading &&
-				!!stagedQuery &&
-				panelType === PANEL_TYPES.LIST &&
-				!!options?.selectColumns?.length,
+				!timeRangeUpdateLoading && !!stagedQuery && panelType === PANEL_TYPES.LIST,
 		},
 	);
 
@@ -186,28 +153,20 @@ function ListView({
 		[queryTableDataResult],
 	);
 
-	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
-		const fields = [
-			TIMESTAMP_FIELD,
-			...(options?.selectColumns ?? []).filter(
-				(field) => field.name !== TIMESTAMP_FIELD.name,
+	// TODO(ai-explorer): static columns until the preferences framework lands.
+	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(
+		() =>
+			[TIMESTAMP_FIELD, ...defaultSelectedColumns].map((field) =>
+				getFieldColumn(field),
 			),
-		];
-		return fields.map((field) => getFieldColumn(field));
-	}, [options?.selectColumns]);
+		[],
+	);
 
 	const rows = useMemo(
 		() => transformSpanRows(queryTableData),
 		[queryTableData],
 	);
 
-	const handleColumnOrderChange = useCallback(
-		(reordered: TableColumnDef<TracesTableRow>[]): void => {
-			config?.addColumn?.onReorder(reordered.map((column) => column.id));
-		},
-		[config],
-	);
-
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
@@ -235,15 +194,9 @@ function ListView({
 					/>
 				</div>
 
-				<DownloadOptionsMenu
-					dataSource={DataSource.TRACES}
-					selectedColumns={options?.selectColumns}
-				/>
-
 				<TraceExplorerControls
 					isLoading={isFetching}
 					totalCount={rows.length}
-					config={config}
 					perPageOptions={PER_PAGE_OPTIONS}
 				/>
 			</div>
@@ -251,6 +204,8 @@ function ListView({
 			<TracesTable
 				data={rows}
 				columns={columns}
+				columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_LIST_COLUMNS}
+				respectColumnOrder
 				panelType="LIST"
 				getRowHref={getTraceLink}
 				isLoading={isLoading}
@@ -258,8 +213,6 @@ function ListView({
 				isError={isError}
 				error={error}
 				isFilterApplied={isFilterApplied}
-				onColumnOrderChange={handleColumnOrderChange}
-				onColumnRemove={config?.addColumn?.onRemove}
 			/>
 		</div>
 	);

frontend/src/container/LLMObservability/Explorer/ListView/configs.ts

@@ -1,19 +1,41 @@
 import type { TelemetryFieldKey } from 'api/v5/v5';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
-export const defaultSelectedColumns: string[] = [
-	'service.name',
-	'name',
-	'duration_nano',
-	'http_method',
-	'response_status_code',
-	'timestamp',
-];
-
-export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
-
 // Pinned timestamp column
+// The list query returns timestamp, trace_id and span_id whether or not they are selected.
 export const TIMESTAMP_FIELD = {
 	name: 'timestamp',
 	fieldContext: 'span',
 } as TelemetryFieldKey;
+
+export const defaultSelectedColumns: TelemetryFieldKey[] = [
+	{
+		name: 'service.name',
+		signal: 'traces',
+		fieldContext: 'resource',
+		fieldDataType: 'string',
+	},
+	{
+		name: 'name',
+		signal: 'traces',
+		fieldContext: 'span',
+		fieldDataType: 'string',
+	},
+	{
+		name: 'duration_nano',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+	{
+		name: 'http_method',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+	{
+		name: 'response_status_code',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+];
+
+export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx

@@ -1,47 +1,8 @@
-import { Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { TelemetryFieldKey } from 'api/v5/v5';
 import type { TracesTableRow } from '../TracesTable/getFieldColumn';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { ILog } from 'types/api/logs/log';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-export function BlockLink({
-	children,
-	to,
-	openInNewTab,
-}: {
-	children: React.ReactNode;
-	to: string;
-	openInNewTab: boolean;
-}): any {
-	// Display block to make the whole cell clickable
-	return (
-		<Link
-			to={to}
-			style={{ display: 'block' }}
-			target={openInNewTab ? '_blank' : '_self'}
-		>
-			{children}
-		</Link>
-	);
-}
-
-export const transformDataWithDate = (
-	data: QueryDataV3[],
-): Omit<ILog, 'timestamp'>[] =>
-	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
-	[];
-
 export const getTraceLink = (record: Record<string, unknown>): string => {
 	function readId(value: unknown): string {
 		if (typeof value === 'string' || typeof value === 'number') {
@@ -60,95 +21,6 @@ export const getTraceLink = (record: Record<string, unknown>): string => {
 	})}`;
 };
 
-export const getListColumns = (
-	selectedColumns: TelemetryFieldKey[],
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string | number,
-): ColumnsType<RowData> => {
-	const initialColumns: ColumnsType<RowData> = [
-		{
-			dataIndex: 'date',
-			key: 'date',
-			title: 'Timestamp',
-			width: 145,
-			render: (value, item): JSX.Element => {
-				const date =
-					typeof value === 'string'
-						? formatTimezoneAdjustedTimestamp(
-								value,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							)
-						: formatTimezoneAdjustedTimestamp(
-								value / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return (
-					<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-						<Typography.Text>{date}</Typography.Text>
-					</BlockLink>
-				);
-			},
-		},
-	];
-
-	const columns: ColumnsType<RowData> =
-		selectedColumns.map((props) => {
-			const name = props?.name || (props as any)?.key;
-			const fieldContext = props?.fieldContext || (props as any)?.type;
-			return {
-				title: name,
-				dataIndex: name,
-				key: buildCompositeKey(name, fieldContext),
-				width: 145,
-				render: (value, item): JSX.Element => {
-					if (value === '') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>N/A</Typography>
-							</BlockLink>
-						);
-					}
-
-					if (
-						name === 'httpMethod' ||
-						name === 'responseStatusCode' ||
-						name === 'response_status_code' ||
-						name === 'http_method'
-					) {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Badge data-testid={name} color="sakura" variant="outline">
-									{value}
-								</Badge>
-							</BlockLink>
-						);
-					}
-
-					if (name === 'durationNano' || name === 'duration_nano') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>{getMs(value)}ms</Typography>
-							</BlockLink>
-						);
-					}
-
-					return (
-						<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-							<Typography data-testid={name}>
-								<LineClampedText text={value} lines={3} />
-							</Typography>
-						</BlockLink>
-					);
-				},
-				responsive: ['md'],
-			};
-		}) || [];
-
-	return [...initialColumns, ...columns];
-};
-
 // Reshapes the query-range list payload into table rows. `id` mirrors span_id so
 // TanStack sees genuine row changes on orderBy toggles instead of falling back to
 // positional ids; `timestamp` is lifted from the wrapping ListItem.

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -5,8 +5,10 @@ import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interface
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { DEFAULT_PANEL_TYPE } from '../constants';
+
 function QuerySection(): JSX.Element {
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const panelTypes = useGetPanelTypesQueryParam(DEFAULT_PANEL_TYPE);
 
 	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(

frontend/src/container/LLMObservability/Explorer/TableView/TableView.tsx

@@ -107,7 +107,7 @@ function TableView({
 						dataSource={DataSource.TRACES}
 						data={data}
 						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
+						fileName="ai-traces-table"
 					/>
 				</div>
 			)}

frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.tsx

@@ -126,6 +126,7 @@ function TimeSeriesViewContainer({
 				dataSource={dataSource}
 				setWarning={setWarning}
 				allowExport
+				exportFileName="ai-traces-timeseries"
 			/>
 		</div>
 	);

frontend/src/container/LLMObservability/Explorer/TracesTable/TracesTable.tsx

@@ -55,6 +55,12 @@ function TracesTable({
 	const isDataAbsent =
 		!isLoading && !isFetching && !isError && data.length === 0;
 
+	// TanStackTable initialises the column store on mount. If that happens with
+	// columns=[] (rows can land before field keys), empty hiddenColumnIds is
+	// persisted and default-hidden columns stay visible forever.
+	const canMountTable =
+		!isError && !isLoading && columns.length > 0 && data.length !== 0;
+
 	const handleRowClick = useCallback(
 		(row: TracesTableRow): void => {
 			history.push(getRowHref(row));
@@ -83,7 +89,7 @@ function TracesTable({
 				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
 			)}
 
-			{!isError && data.length !== 0 && (
+			{canMountTable && (
 				<div className={styles.tableWrapper}>
 					<TanStackTable<TracesTableRow>
 						data={data}

frontend/src/container/LLMObservability/Explorer/TracesTable/__tests__/TracesTable.test.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { useColumnStore } from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import { buildTraceViewColumns } from '../../TracesView/configs';
+import TracesTable from '../TracesTable';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
+
+const ROWS = [{ id: 't1', trace_id: 'abc', 'service.name': 'checkout' }];
+
+const COLUMNS = buildTraceViewColumns([
+	{ name: 'trace_id' },
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'start_time' },
+]);
+
+function RaceHarness(): JSX.Element {
+	const [columnsReady, setColumnsReady] = useState(false);
+
+	return (
+		<>
+			<button type="button" onClick={(): void => setColumnsReady(true)}>
+				columns-ready
+			</button>
+			<TracesTable
+				data={ROWS}
+				columns={columnsReady ? COLUMNS : []}
+				columnStorageKey={STORAGE_KEY}
+				respectColumnOrder
+				panelType="TRACE"
+				getRowHref={(): string => '/trace/abc'}
+				isLoading={!columnsReady}
+				isFetching={false}
+				isError={false}
+				error={null}
+				isFilterApplied={false}
+			/>
+		</>
+	);
+}
+
+const persistedState = (): { hiddenColumnIds: string[] } | null => {
+	const raw = localStorage.getItem(PERSISTED_KEY);
+	return raw ? (JSON.parse(raw) as { hiddenColumnIds: string[] }) : null;
+};
+
+describe('TracesTable column-init race', () => {
+	beforeEach(() => {
+		useColumnStore.setState({ tables: {} });
+		localStorage.clear();
+	});
+
+	it('does not persist empty defaults when rows land before columns', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<RaceHarness />);
+
+		expect(screen.getByText(/pending_data_placeholder/i)).toBeInTheDocument();
+		expect(screen.queryByRole('table')).not.toBeInTheDocument();
+		expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		expect(persistedState()).toBeNull();
+
+		await user.click(screen.getByRole('button', { name: 'columns-ready' }));
+
+		await expect(screen.findByRole('table')).resolves.toBeInTheDocument();
+		expect(screen.getByText('trace_id')).toBeInTheDocument();
+		expect(screen.queryByText('start_time')).not.toBeInTheDocument();
+		expect(persistedState()?.hiddenColumnIds).toStrictEqual(['start_time']);
+	});
+});

frontend/src/container/LLMObservability/Explorer/TracesTable/constants.ts

@@ -1,6 +1,13 @@
 // Field-name allowlists that drive signal-specific cell rendering. Both legacy
 // camelCase and snake_case variants are listed because the API has shipped both.
-export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
+
+// start/end/last_activity_time come from the per-trace query, unlike span timestamp.
+export const TIMESTAMP_FIELD_NAMES = new Set([
+	'timestamp',
+	'start_time',
+	'end_time',
+	'last_activity_time',
+]);
 
 export const STATUS_FIELD_NAMES = new Set([
 	'httpMethod',
@@ -13,6 +20,12 @@ export const STATUS_FIELD_NAMES = new Set([
 	'http.response.status_code',
 ]);
 
-export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
+// trace_/max_llm_duration_nano are trace-level durations the per-trace query computes.
+export const DURATION_FIELD_NAMES = new Set([
+	'durationNano',
+	'duration_nano',
+	'trace_duration_nano',
+	'max_llm_duration_nano',
+]);
 
 export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.module.scss

@@ -10,6 +10,25 @@
 
 .actionsContainer {
 	display: flex;
-	justify-content: space-between;
+	justify-content: flex-end;
 	align-items: center;
 }
+
+.orderByContainer {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.orderByLabel {
+	color: var(--muted-foreground);
+	// Between --periscope-font-size-small (11px) and -base (13px), so literal.
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 16px; /* 133.333% */
+
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx

@@ -3,35 +3,43 @@ import {
 	memo,
 	MutableRefObject,
 	SetStateAction,
+	useCallback,
 	useEffect,
 	useMemo,
+	useState,
 } from 'react';
 import { QueryKey } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { getTraceLink } from '../ListView/utils';
+import { TracesTableRow } from '../TracesTable/getFieldColumn';
+import TracesTable from '../TracesTable/TracesTable';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
+import { ArrowUp10, Minus } from '@signozhq/icons';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import DOCLINKS from 'utils/docLinks';
 
+import TraceExplorerControls from '../Controls';
+import {
+	TRACE_VIEW_COLUMN_FIELDS,
+	TRACE_VIEW_DEFAULT_ORDER_BY,
+	TRACE_VIEW_ORDER_BY_FIELDS,
+} from '../constants';
 import { getListViewQuery } from '../explorerUtils';
-import { columns, PER_PAGE_OPTIONS } from './configs';
+import { PER_PAGE_OPTIONS } from './configs';
+import { useTraceViewColumns } from './useTraceViewColumns';
 import styles from './TracesView.module.scss';
 
 interface TracesViewProps {
@@ -49,6 +57,16 @@ function TracesView({
 }: TracesViewProps): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 
+	const [orderBy, setOrderBy] = useState<string>(TRACE_VIEW_DEFAULT_ORDER_BY);
+
+	const {
+		columns,
+		selectedFields,
+		onFieldsChange,
+		requiredFields,
+		isLoading: isColumnsLoading,
+	} = useTraceViewColumns();
+
 	const {
 		selectedTime: globalSelectedTime,
 		maxTime,
@@ -60,8 +78,8 @@ function TracesView({
 	);
 
 	const transformedQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueryAIWithType),
-		[stagedQuery],
+		() => getListViewQuery(stagedQuery || initialQueryAIWithType, orderBy),
+		[stagedQuery, orderBy],
 	);
 
 	const queryKey = useMemo(
@@ -73,6 +91,7 @@ function TracesView({
 			stagedQuery,
 			panelType,
 			paginationQueryData,
+			orderBy,
 		],
 		[
 			globalSelectedTime,
@@ -81,6 +100,7 @@ function TracesView({
 			stagedQuery,
 			panelType,
 			paginationQueryData,
+			orderBy,
 		],
 	);
 
@@ -142,27 +162,39 @@ function TracesView({
 		}
 	}, [isLoading, isFetching, isError, rows.length]);
 
+	const handleOrderChange = useCallback((value: string): void => {
+		setOrderBy(value);
+	}, []);
+
+	const fieldsSelectorConfig = useMemo(
+		() => ({ fieldsSelector: { value: selectedFields, onFieldsChange } }),
+		[selectedFields, onFieldsChange],
+	);
+
 	return (
 		<div className={styles.container}>
 			<div className={styles.actionsContainer}>
-				<Typography>
-					This tab only shows Root Spans. More details
-					<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
-						{' '}
-						here
-					</Typography.Link>
-				</Typography>
-
 				<div className="trace-explorer-controls">
-					<DownloadOptionsMenu
-						dataSource={DataSource.TRACES}
-						panelType={PANEL_TYPES.TRACE}
-					/>
+					<div className={styles.orderByContainer}>
+						<div className={styles.orderByLabel}>
+							Order by <Minus size={14} /> <ArrowUp10 size={14} />
+						</div>
+
+						<ListViewOrderBy
+							value={orderBy}
+							onChange={handleOrderChange}
+							dataSource={DataSource.TRACES}
+							useFieldApis={TRACE_VIEW_ORDER_BY_FIELDS}
+						/>
+					</div>
 
 					<TraceExplorerControls
 						isLoading={isLoading}
 						totalCount={rows.length}
 						perPageOptions={PER_PAGE_OPTIONS}
+						config={fieldsSelectorConfig}
+						useFieldApis={TRACE_VIEW_COLUMN_FIELDS}
+						requiredFields={requiredFields}
 					/>
 				</div>
 			</div>
@@ -170,10 +202,11 @@ function TracesView({
 			<TracesTable
 				data={rows}
 				columns={columns}
+				columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS}
 				respectColumnOrder
 				panelType="TRACE"
 				getRowHref={getTraceLink}
-				isLoading={isLoading}
+				isLoading={isLoading || isColumnsLoading}
 				isFetching={isFetching}
 				isError={isError}
 				error={error}

frontend/src/container/LLMObservability/Explorer/TracesView/__tests__/useTraceViewColumns.test.tsx

@@ -0,0 +1,219 @@
+/* eslint-disable no-restricted-syntax */
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useColumnStore } from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import { useTraceViewColumns } from '../useTraceViewColumns';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+
+const AGGREGATE_KEYS = [
+	'llm_call_count',
+	'tool_call_count',
+	'distinct_tool_count',
+	'input_tokens',
+	'output_tokens',
+	'total_tokens',
+	'estimated_total_cost',
+	'max_llm_duration_nano',
+];
+
+const fieldNames = (fields: TelemetryFieldKey[]): string[] =>
+	fields.map((field) => field.name);
+
+const columnNames = (columns: { header?: unknown }[]): string[] =>
+	columns.map((column) => column.header as string);
+
+function wrapper({ children }: { children: ReactNode }): JSX.Element {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+}
+
+const seenAI: URLSearchParams[] = [];
+
+const mockAggregateKeys = (names: string[]): void => {
+	server.use(
+		rest.get(
+			`${ENVIRONMENT.baseURL}/api/v1/ai_observability/fields/keys`,
+			(req, res, ctx) => {
+				seenAI.push(req.url.searchParams);
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							complete: true,
+							keys: Object.fromEntries(
+								names.map((name) => [
+									name,
+									[
+										{
+											name,
+											fieldContext: TelemetrytypesFieldContextDTO.trace,
+											fieldDataType: TelemetrytypesFieldDataTypeDTO.float64,
+										},
+									],
+								]),
+							),
+						},
+					}),
+				);
+			},
+		),
+	);
+};
+
+const renderColumns = async (): Promise<
+	ReturnType<typeof renderHook<ReturnType<typeof useTraceViewColumns>, unknown>>
+> => {
+	const rendered = renderHook(() => useTraceViewColumns(), { wrapper });
+	await waitFor(() => {
+		expect(rendered.result.current.isLoading).toBe(false);
+	});
+	return rendered;
+};
+
+describe('useTraceViewColumns', () => {
+	beforeEach(() => {
+		seenAI.length = 0;
+		useColumnStore.getState().tables = {};
+		localStorage.clear();
+		mockAggregateKeys(AGGREGATE_KEYS);
+	});
+
+	it('reads the aggregates from the trace context of the keys endpoint', async () => {
+		await renderColumns();
+
+		expect(seenAI).toHaveLength(1);
+		expect(seenAI[0]?.get('searchText')).toBe('');
+		expect(seenAI[0]?.get('fieldContext')).toBe(
+			TelemetrytypesFieldContextDTO.trace,
+		);
+	});
+
+	it('pools the hardcoded display-only columns with the endpoint aggregates', async () => {
+		const { result } = await renderColumns();
+
+		expect(columnNames(result.current.columns)).toStrictEqual([
+			'service.name',
+			'root_span_name',
+			'trace_duration_nano',
+			'span_count',
+			'trace_id',
+			'start_time',
+			'end_time',
+			'error_count',
+			'input',
+			'output',
+			...AGGREGATE_KEYS,
+		]);
+	});
+
+	it('selects only the default-visible columns on first render', async () => {
+		const { result } = await renderColumns();
+
+		expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+			'service.name',
+			'root_span_name',
+			'trace_duration_nano',
+			'span_count',
+			'trace_id',
+			'llm_call_count',
+			'total_tokens',
+			'estimated_total_cost',
+		]);
+	});
+
+	it('keeps a newly reported aggregate hidden until it is picked', async () => {
+		mockAggregateKeys(['brand_new_aggregate']);
+
+		const { result } = await renderColumns();
+
+		expect(columnNames(result.current.columns)).toContain('brand_new_aggregate');
+		expect(fieldNames(result.current.selectedFields)).not.toContain(
+			'brand_new_aggregate',
+		);
+	});
+
+	it('hides the columns dropped from the selection', async () => {
+		const { result } = await renderColumns();
+
+		act(() => {
+			result.current.onFieldsChange([
+				{ name: 'trace_id' },
+				{ name: 'total_tokens', fieldContext: 'trace', fieldDataType: 'float64' },
+			]);
+		});
+
+		expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+			'trace_id',
+			'total_tokens',
+		]);
+	});
+
+	it('shows a column added back from the pool', async () => {
+		const { result } = await renderColumns();
+
+		act(() => {
+			result.current.onFieldsChange([{ name: 'trace_id' }]);
+		});
+		act(() => {
+			result.current.onFieldsChange([{ name: 'trace_id' }, { name: 'input' }]);
+		});
+
+		expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+			'trace_id',
+			'input',
+		]);
+	});
+
+	it('keeps the trace id column even when the selection drops it', async () => {
+		const { result } = await renderColumns();
+
+		act(() => {
+			result.current.onFieldsChange([{ name: 'span_count' }]);
+		});
+
+		expect(fieldNames(result.current.selectedFields)).toContain('trace_id');
+		expect(result.current.requiredFields).toStrictEqual(['trace_id']);
+	});
+
+	it('persists the selection order', async () => {
+		const { result } = await renderColumns();
+
+		act(() => {
+			result.current.onFieldsChange([
+				{ name: 'total_tokens', fieldContext: 'trace', fieldDataType: 'float64' },
+				{ name: 'trace_id' },
+				{ name: 'service.name', fieldContext: 'resource' },
+			]);
+		});
+
+		expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+			'total_tokens',
+			'trace_id',
+			'service.name',
+		]);
+		expect(
+			useColumnStore.getState().tables[STORAGE_KEY].columnOrder,
+		).toStrictEqual([
+			'trace:total_tokens:float64',
+			'trace_id',
+			'resource:service.name',
+		]);
+	});
+});

frontend/src/container/LLMObservability/Explorer/TracesView/configs.tsx

@@ -5,18 +5,29 @@ import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-const TRACE_FIELDS = [
-	{ name: 'service.name', fieldContext: 'resource' },
-	{ name: 'name' },
-	{ name: 'duration_nano' },
-	{ name: 'span_count' },
-	{ name: 'trace_id' },
-] as TelemetryFieldKey[];
+/** Always visible: it is the row's link to the trace. */
+export const TRACE_ID_COLUMN_ID = 'trace_id';
 
-export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
-	(field) => ({
+/** Everything else starts hidden, including any aggregate the endpoint adds later. */
+const DEFAULT_VISIBLE_FIELDS = new Set([
+	'service.name',
+	'root_span_name',
+	'trace_duration_nano',
+	'span_count',
+	'llm_call_count',
+	'total_tokens',
+	'estimated_total_cost',
+	TRACE_ID_COLUMN_ID,
+]);
+
+export const buildTraceViewColumns = (
+	fields: TelemetryFieldKey[],
+): TableColumnDef<TracesTableRow>[] =>
+	fields.map((field) => ({
 		...getFieldColumn(field),
-		enableRemove: false,
-		canBeHidden: false,
-	}),
-);
+		defaultVisibility: DEFAULT_VISIBLE_FIELDS.has(field.name),
+		// The shared column builder pins anything in TIMESTAMP_FIELD_NAMES; these stay movable.
+		enableMove: field.name !== TRACE_ID_COLUMN_ID,
+		enableRemove: field.name !== TRACE_ID_COLUMN_ID,
+		canBeHidden: field.name !== TRACE_ID_COLUMN_ID,
+	}));

frontend/src/container/LLMObservability/Explorer/TracesView/useTraceViewColumns.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
+import { mergeStaticFields } from 'utils/staticFields';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import {
+	hideColumn,
+	initializeFromDefaults,
+	setColumnOrder,
+	showColumn,
+	useColumnOrder,
+	useHiddenColumnIds,
+} from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
+import { TracesTableRow } from '../TracesTable/getFieldColumn';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { TRACE_VIEW_COLUMN_FIELDS } from '../constants';
+import { buildTraceViewColumns, TRACE_ID_COLUMN_ID } from './configs';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+
+const { staticFields: COLUMN_STATIC_FIELDS = [], ...COLUMN_KEYS_CONFIG } =
+	TRACE_VIEW_COLUMN_FIELDS;
+
+/** Matches the id getFieldColumn derives, so fields and columns address alike. */
+const columnIdOf = (field: TelemetryFieldKey): string =>
+	buildCompositeKey(field.name, field.fieldContext, field.fieldDataType);
+
+interface UseTraceViewColumns {
+	columns: TableColumnDef<TracesTableRow>[];
+	selectedFields: TelemetryFieldKey[];
+	onFieldsChange: (next: TelemetryFieldKey[]) => void;
+	requiredFields: readonly string[];
+	isLoading: boolean;
+}
+
+// TODO(ai-explorer): browser-local only, unlike the list views' `?options=` columns.
+export function useTraceViewColumns(): UseTraceViewColumns {
+	const { data: fetchedFields = [], isFetched } = useFieldKeysSuggestion(
+		COLUMN_KEYS_CONFIG,
+		DataSource.TRACES,
+		'',
+	);
+
+	const availableFields = useMemo(
+		() => mergeStaticFields(COLUMN_STATIC_FIELDS, fetchedFields, ''),
+		[fetchedFields],
+	);
+
+	const columns = useMemo(
+		() => buildTraceViewColumns(availableFields),
+		[availableFields],
+	);
+
+	// Defaults from a partial column set would persist as the user's own choice.
+	useEffect(() => {
+		if (isFetched) {
+			initializeFromDefaults(STORAGE_KEY, columns);
+		}
+	}, [isFetched, columns]);
+
+	const hiddenColumnIds = useHiddenColumnIds(STORAGE_KEY);
+	const columnOrder = useColumnOrder(STORAGE_KEY);
+
+	const selectedFields = useMemo(() => {
+		const hidden = new Set(hiddenColumnIds);
+		const orderIndex = new Map(columnOrder.map((id, index) => [id, index]));
+
+		return availableFields
+			.filter((field) => !hidden.has(columnIdOf(field)))
+			.sort(
+				(a, b) =>
+					(orderIndex.get(columnIdOf(a)) ?? Infinity) -
+					(orderIndex.get(columnIdOf(b)) ?? Infinity),
+			);
+	}, [availableFields, hiddenColumnIds, columnOrder]);
+
+	const onFieldsChange = useCallback(
+		(next: TelemetryFieldKey[]): void => {
+			const keptIds = new Set(next.map(columnIdOf));
+
+			columns.forEach((column) => {
+				if (keptIds.has(column.id) || column.id === TRACE_ID_COLUMN_ID) {
+					showColumn(STORAGE_KEY, column.id);
+				} else {
+					hideColumn(STORAGE_KEY, column.id);
+				}
+			});
+
+			// Columns missing from the order sort last, so the visible ones suffice.
+			setColumnOrder(STORAGE_KEY, next.map(columnIdOf));
+		},
+		[columns],
+	);
+
+	return {
+		columns,
+		selectedFields,
+		onFieldsChange,
+		requiredFields: [TRACE_ID_COLUMN_ID],
+		isLoading: !isFetched,
+	};
+}

frontend/src/container/LLMObservability/Explorer/constants.ts

@@ -1,4 +1,18 @@
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { UseFieldApis } from 'types/common/fieldSuggestion';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+export const DEFAULT_PANEL_TYPE = PANEL_TYPES.TRACE;
+
 export const TOOLBAR_VIEWS = {
+	trace: {
+		name: 'trace',
+		label: 'Trace',
+		disabled: false,
+		show: true,
+		key: 'trace',
+	},
 	list: {
 		name: 'list',
 		label: 'List',
@@ -12,13 +26,6 @@ export const TOOLBAR_VIEWS = {
 		show: true,
 		key: 'timeseries',
 	},
-	trace: {
-		name: 'trace',
-		label: 'Trace',
-		disabled: false,
-		show: true,
-		key: 'trace',
-	},
 	table: {
 		name: 'table',
 		label: 'Table',
@@ -34,3 +41,34 @@ export const TOOLBAR_VIEWS = {
 		key: 'clickhouse',
 	},
 };
+
+export const TRACE_VIEW_DEFAULT_ORDER_BY = 'last_activity_time:desc';
+
+/** Display-only: ordering or filtering on one is an error, so the keys endpoint omits them. */
+export const AI_O11Y_DISPLAY_ONLY_FIELDS: TelemetryFieldKey[] = [
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'root_span_name' },
+	{ name: 'trace_duration_nano' },
+	{ name: 'span_count' },
+	{ name: 'trace_id' },
+	{ name: 'start_time' },
+	{ name: 'end_time' },
+	{ name: 'error_count' },
+	{ name: 'input' },
+	{ name: 'output' },
+] as TelemetryFieldKey[];
+
+const TRACE_VIEW_KEYS = {
+	builderQueryType: 'builder_ai_query',
+	fieldContext: TelemetrytypesFieldContextDTO.trace,
+} as const;
+
+export const TRACE_VIEW_ORDER_BY_FIELDS: UseFieldApis = {
+	...TRACE_VIEW_KEYS,
+	staticFields: [{ name: 'last_activity_time' } as TelemetryFieldKey],
+};
+
+export const TRACE_VIEW_COLUMN_FIELDS: UseFieldApis = {
+	...TRACE_VIEW_KEYS,
+	staticFields: AI_O11Y_DISPLAY_ONLY_FIELDS,
+};

frontend/src/container/LLMObservability/Explorer/explorerUtils.ts

@@ -1,6 +1,5 @@
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { cloneDeep, set } from 'lodash-es';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { cloneDeep } from 'lodash-es';
 import { OrderByPayload, Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export const getListViewQuery = (
@@ -31,31 +30,3 @@ export const getListViewQuery = (
 
 	return query;
 };
-
-export const getQueryByPanelType = (
-	stagedQuery: Query,
-	panelType: PANEL_TYPES,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
-		return getListViewQuery(stagedQuery);
-	}
-	return stagedQuery;
-};
-
-export const getExportQueryData = (
-	query: Query,
-	panelType: PANEL_TYPES,
-	options: OptionsQuery,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST) {
-		const updatedQuery = cloneDeep(query);
-		set(
-			updatedQuery,
-			'builder.queryData[0].selectColumns',
-			options.selectColumns,
-		);
-
-		return updatedQuery;
-	}
-	return query;
-};

frontend/src/container/LLMObservability/ToolbarActions/LeftToolbarActions.tsx

@@ -1,19 +1,21 @@
-import {
-	ArrowUpToLine,
-	Atom,
-	Filter,
-	SquareMousePointer,
-	Terminal,
-	Binoculars,
-} from '@signozhq/icons';
+import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 
+import { TOOLBAR_VIEW_CONFIG } from './toolbarViewsConfig';
+
 import './ToolbarActions.styles.scss';
 
+interface ToolbarViewItem {
+	name: string;
+	key: string;
+	show?: boolean;
+	disabled?: boolean;
+}
+
 interface LeftToolbarActionsProps {
-	items: any;
+	items: Record<string, ToolbarViewItem>;
 	selectedView: string;
 	onChangeSelectedView: (view: ExplorerViews) => void;
 	showFilter: boolean;
@@ -29,8 +31,6 @@ export default function LeftToolbarActions({
 	showFilter,
 	handleFilterVisibilityChange,
 }: LeftToolbarActionsProps): JSX.Element {
-	const { clickhouse, list, timeseries, table, trace } = items;
-
 	return (
 		<div className="left-toolbar">
 			{!showFilter && (
@@ -41,91 +41,34 @@ export default function LeftToolbarActions({
 					</Button>
 				</Tooltip>
 			)}
+			{/* Buttons render in the order the caller declares its views. */}
 			<div className="left-toolbar-query-actions">
-				{list?.show && (
-					<Tooltip title="List View">
-						<Button
-							disabled={list.disabled}
-							className={cx(
-								'list-view-tab',
-								'explorer-view-option',
-								selectedView === list.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(list.key)}
-						>
-							<SquareMousePointer size={14} data-testid="search-view" />
-							List View
-						</Button>
-					</Tooltip>
-				)}
+				{Object.values(items).map((item) => {
+					const config = TOOLBAR_VIEW_CONFIG[item?.key];
 
-				{trace?.show && (
-					<Tooltip title="Trace View">
-						<Button
-							disabled={trace.disabled}
-							className={cx(
-								'trace-view-tab',
-								'explorer-view-option',
-								selectedView === trace.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(trace.key)}
-						>
-							<SquareMousePointer size={14} data-testid="trace-view" />
-							Trace View
-						</Button>
-					</Tooltip>
-				)}
+					if (!item?.show || !config) {
+						return null;
+					}
 
-				{timeseries?.show && (
-					<Tooltip title="Time Series">
-						<Button
-							disabled={timeseries.disabled}
-							className={cx(
-								'timeseries-view-tab',
-								'explorer-view-option',
-								selectedView === timeseries.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(timeseries.key)}
-						>
-							<Atom size={14} data-testid="query-builder-view" />
-							Time Series
-						</Button>
-					</Tooltip>
-				)}
+					const { icon: Icon, label, className, testId } = config;
 
-				{clickhouse?.show && (
-					<Tooltip title="Clickhouse">
-						<Button
-							disabled={clickhouse.disabled}
-							className={cx(
-								'clickhouse-view-tab',
-								'explorer-view-option',
-								selectedView === clickhouse.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(clickhouse.key)}
-						>
-							<Terminal size={14} data-testid="clickhouse-view" />
-							Clickhouse
-						</Button>
-					</Tooltip>
-				)}
-
-				{table?.show && (
-					<Tooltip title="Table">
-						<Button
-							disabled={table.disabled}
-							className={cx(
-								'table-view-tab',
-								'explorer-view-option',
-								selectedView === table.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(table.key)}
-						>
-							<Binoculars size={14} data-testid="query-builder-view-v2" />
-							Table
-						</Button>
-					</Tooltip>
-				)}
+					return (
+						<Tooltip key={item.key} title={label}>
+							<Button
+								disabled={item.disabled}
+								className={cx(
+									className,
+									'explorer-view-option',
+									selectedView === item.key ? activeTab : '',
+								)}
+								onClick={(): void => onChangeSelectedView(item.key as ExplorerViews)}
+							>
+								<Icon size={14} data-testid={testId} />
+								{label}
+							</Button>
+						</Tooltip>
+					);
+				})}
 			</div>
 		</div>
 	);

frontend/src/container/LLMObservability/ToolbarActions/toolbarViewsConfig.ts

@@ -0,0 +1,47 @@
+import {
+	Atom,
+	Binoculars,
+	SquareMousePointer,
+	Terminal,
+} from '@signozhq/icons';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+
+export interface ToolbarViewConfig {
+	icon: typeof Atom;
+	label: string;
+	className: string;
+	testId: string;
+}
+
+export const TOOLBAR_VIEW_CONFIG: Record<string, ToolbarViewConfig> = {
+	[ExplorerViews.LIST]: {
+		icon: SquareMousePointer,
+		label: 'List View',
+		className: 'list-view-tab',
+		testId: 'search-view',
+	},
+	[ExplorerViews.TRACE]: {
+		icon: SquareMousePointer,
+		label: 'Trace View',
+		className: 'trace-view-tab',
+		testId: 'trace-view',
+	},
+	[ExplorerViews.TIMESERIES]: {
+		icon: Atom,
+		label: 'Time Series',
+		className: 'timeseries-view-tab',
+		testId: 'query-builder-view',
+	},
+	[ExplorerViews.CLICKHOUSE]: {
+		icon: Terminal,
+		label: 'Clickhouse',
+		className: 'clickhouse-view-tab',
+		testId: 'clickhouse-view',
+	},
+	[ExplorerViews.TABLE]: {
+		icon: Binoculars,
+		label: 'Table',
+		className: 'table-view-tab',
+		testId: 'query-builder-view-v2',
+	},
+};

frontend/src/container/LogExplorerQuerySection/LogExplorerQuerySection.test.tsx

@@ -92,17 +92,25 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn().mockResolvedValue({
-		data: {
-			data: { keys: {} },
-		},
+jest.mock('api/querySuggestions/getFieldKeySuggestions', () => ({
+	getFieldKeySuggestions: jest.fn().mockResolvedValue({
+		status: 'success',
+		data: { complete: true, keys: {} },
 	}),
 }));
 
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn().mockResolvedValue({
-		data: { data: { values: { stringValues: [], numberValues: [] } } },
+jest.mock('api/querySuggestions/getFieldValueSuggestions', () => ({
+	getFieldValueSuggestions: jest.fn().mockResolvedValue({
+		status: 'success',
+		data: {
+			complete: true,
+			values: {
+				stringValues: [],
+				numberValues: [],
+				boolValues: [],
+				relatedValues: [],
+			},
+		},
 	}),
 }));
 

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -179,7 +179,10 @@ const setupServer = (capturedPayloads: QueryRangePayloadV5[]): void => {
 		),
 		// Add handler for the fields endpoint that's causing warnings
 		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, async (req, res, ctx) =>
-			res(ctx.status(200), ctx.json([])),
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { complete: true, keys: {} } }),
+			),
 		),
 	);
 };

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -64,6 +64,7 @@ function TimeSeriesView({
 	panelType = PANEL_TYPES.TIME_SERIES,
 	stackBarChart = false,
 	allowExport = false,
+	exportFileName,
 	onYAxisUnitChange,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -270,7 +271,7 @@ function TimeSeriesView({
 							yAxisUnit={yAxisUnit}
 							data={data}
 							query={currentQuery}
-							fileName={`${dataSource}-timeseries`}
+							fileName={exportFileName ?? `${dataSource}-timeseries`}
 						/>
 					)}
 				</div>
@@ -339,6 +340,7 @@ interface TimeSeriesViewProps {
 	stackBarChart?: boolean;
 	// Opt-in: render the client-side export menu (Logs explorer for now).
 	allowExport?: boolean;
+	exportFileName?: string;
 	// Opt-in: render the y-axis unit selector in the header (views without their
 	// own selector, e.g. Logs). Metrics keeps its separate YAxisUnitSelector.
 	onYAxisUnitChange?: (value: string) => void;
@@ -351,6 +353,7 @@ TimeSeriesView.defaultProps = {
 	setWarning: undefined,
 	panelType: PANEL_TYPES.TIME_SERIES,
 	stackBarChart: false,
+	exportFileName: undefined,
 };
 
 export default TimeSeriesView;

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -29,6 +29,5 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		BAR: true,
 		PIE: false,
 		HISTOGRAM: false,
-		TEXT: false,
 		EMPTY_WIDGET: false,
 	};

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -14,8 +14,6 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,
 	[PANEL_TYPES.TRACE]: null,
-	// Dashboards v2 renders this kind; the V1 wrapper map is never asked for it.
-	[PANEL_TYPES.TEXT]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,

frontend/src/hooks/querySuggestions/__tests__/useFieldKeysSuggestion.test.ts

@@ -0,0 +1,183 @@
+import { QueryClient } from 'react-query';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { FieldKeysResponse } from 'api/querySuggestions/types';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import { FieldKeysConfig } from 'types/common/fieldSuggestion';
+
+import {
+	getFieldKeysQueryOptions,
+	toFieldKeys,
+} from '../useFieldKeysSuggestion';
+
+/** Drives the options object the way react-query does, without a client. */
+const fetchKeys = async (
+	config: FieldKeysConfig,
+	dataSource: DataSource,
+	searchText: string,
+): Promise<TelemetryFieldKey[]> => {
+	const { queryFn, select } = getFieldKeysQueryOptions(
+		config,
+		dataSource,
+		searchText,
+	);
+	const response = await (
+		queryFn as (context: { signal: AbortSignal }) => Promise<FieldKeysResponse>
+	)({ signal: new AbortController().signal });
+
+	return select?.(response) ?? [];
+};
+
+const mockKeys = (
+	path: '/api/v1/ai_observability/fields/keys' | '/api/v1/fields/keys',
+	names: string[],
+	onRequest?: (params: URLSearchParams) => void,
+): void => {
+	server.use(
+		rest.get(`${ENVIRONMENT.baseURL}${path}`, (req, res, ctx) => {
+			onRequest?.(req.url.searchParams);
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						complete: true,
+						keys: Object.fromEntries(names.map((name) => [name, [{ name }]])),
+					},
+				}),
+			);
+		}),
+	);
+};
+
+describe('useFieldKeysSuggestion', () => {
+	let queryClient: QueryClient;
+
+	beforeEach(() => {
+		queryClient = new QueryClient({
+			defaultOptions: { queries: { retry: false } },
+		});
+	});
+
+	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
+		const seen: URLSearchParams[] = [];
+		mockKeys(
+			'/api/v1/ai_observability/fields/keys',
+			['total_tokens'],
+			(params) => {
+				seen.push(params);
+			},
+		);
+
+		const keys = await fetchKeys(
+			{
+				builderQueryType: 'builder_ai_query',
+				fieldContext: TelemetrytypesFieldContextDTO.trace,
+			},
+			DataSource.TRACES,
+			'llm',
+		);
+
+		expect(seen).toHaveLength(1);
+		expect(seen[0]?.get('searchText')).toBe('llm');
+		expect(seen[0]?.get('fieldContext')).toBe(
+			TelemetrytypesFieldContextDTO.trace,
+		);
+		expect(keys.map((key) => key.name)).toStrictEqual(['total_tokens']);
+	});
+
+	it('reads the generic endpoint for an unmarked query', async () => {
+		const seen: URLSearchParams[] = [];
+		mockKeys('/api/v1/fields/keys', ['service.name'], (params) => {
+			seen.push(params);
+		});
+
+		const keys = await fetchKeys({}, DataSource.TRACES, 'svc');
+
+		expect(seen).toHaveLength(1);
+		expect(seen[0]?.get('signal')).toBe(DataSource.TRACES);
+		expect(seen[0]?.get('searchText')).toBe('svc');
+		expect(keys.map((key) => key.name)).toStrictEqual(['service.name']);
+	});
+
+	it('reads the trace context of the ai_observability endpoint', async () => {
+		const seen: URLSearchParams[] = [];
+		mockKeys(
+			'/api/v1/ai_observability/fields/keys',
+			['total_tokens'],
+			(params) => {
+				seen.push(params);
+			},
+		);
+
+		const keys = await fetchKeys(
+			{
+				builderQueryType: 'builder_ai_query',
+				fieldContext: TelemetrytypesFieldContextDTO.trace,
+			},
+			DataSource.TRACES,
+			'',
+		);
+
+		expect(seen[0]?.get('searchText')).toBe('');
+		expect(keys.map((key) => key.name)).toStrictEqual(['total_tokens']);
+	});
+
+	it('reuses the cached keys response for a second empty search', async () => {
+		const seen: URLSearchParams[] = [];
+		mockKeys(
+			'/api/v1/ai_observability/fields/keys',
+			['total_tokens'],
+			(params) => {
+				seen.push(params);
+			},
+		);
+
+		const config = {
+			builderQueryType: 'builder_ai_query' as const,
+			fieldContext: TelemetrytypesFieldContextDTO.trace,
+		};
+
+		// Built twice: equal keys must resolve to one cache entry, not two requests.
+		await queryClient.fetchQuery(
+			getFieldKeysQueryOptions(config, DataSource.TRACES, ''),
+		);
+		await queryClient.fetchQuery(
+			getFieldKeysQueryOptions(config, DataSource.TRACES, ''),
+		);
+
+		expect(seen).toHaveLength(1);
+	});
+
+	it('hands the query signal to the fetcher so a superseded search aborts', async () => {
+		server.use(
+			rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (_req, res, ctx) =>
+				res(ctx.delay(500), ctx.status(200), ctx.json({ status: 'success' })),
+			),
+		);
+
+		const controller = new AbortController();
+		const { queryFn } = getFieldKeysQueryOptions({}, DataSource.LOGS, 'svc');
+		const pending = (
+			queryFn as (context: { signal: AbortSignal }) => Promise<unknown>
+		)({ signal: controller.signal });
+
+		controller.abort();
+
+		await expect(pending).rejects.toBeDefined();
+	});
+
+	it('treats a null keys map as empty', () => {
+		expect(
+			toFieldKeys({
+				status: 'success',
+				data: { complete: false, keys: null },
+			}),
+		).toStrictEqual([]);
+	});
+});

frontend/src/hooks/querySuggestions/useFieldKeysSuggestion.ts

@@ -0,0 +1,76 @@
+import {
+	QueryKey,
+	useQuery,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { ErrorType } from 'api/generatedAPIInstance';
+import {
+	RenderErrorResponseDTO,
+	TelemetrytypesSignalDTO,
+	TelemetrytypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getFieldKeySuggestions } from 'api/querySuggestions/getFieldKeySuggestions';
+import { FIELD_SUGGESTION_CACHE_TIME } from 'constants/fieldSuggestions';
+import {
+	FieldKeysFilterConfig,
+	FieldKeysResponse,
+} from 'api/querySuggestions/types';
+import { FieldKeysConfig } from 'types/common/fieldSuggestion';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+/** One entry per (query type, params) pair; the fetcher picks the endpoint. */
+const FIELD_KEYS_QUERY_KEY = 'fieldKeysSuggestion';
+
+export type FieldKeysQueryOptions = UseQueryOptions<
+	FieldKeysResponse,
+	ErrorType<RenderErrorResponseDTO>,
+	TelemetryFieldKey[]
+> & { queryKey: QueryKey };
+
+export const toFieldKeys = (
+	res: FieldKeysResponse | undefined,
+): TelemetryFieldKey[] =>
+	Object.values(res?.data?.keys ?? {})
+		.flat()
+		.map((key) => ({ ...key }) as TelemetryFieldKey);
+
+export const getFieldKeysQueryOptions = (
+	{
+		builderQueryType,
+		fieldContext,
+		metricName,
+		metricNamespace,
+		signalSource,
+	}: FieldKeysConfig,
+	dataSource: DataSource,
+	searchText: string,
+): FieldKeysQueryOptions => {
+	const filterConfig: FieldKeysFilterConfig = {
+		signal: dataSource as unknown as TelemetrytypesSignalDTO,
+		searchText,
+		fieldContext,
+		metricName,
+		metricNamespace,
+		source: signalSource as TelemetrytypesSourceDTO | undefined,
+	};
+
+	return {
+		queryKey: [FIELD_KEYS_QUERY_KEY, builderQueryType, filterConfig],
+		queryFn: ({ signal }): Promise<FieldKeysResponse> =>
+			getFieldKeySuggestions(filterConfig, builderQueryType, signal),
+		select: toFieldKeys,
+		staleTime: FIELD_SUGGESTION_CACHE_TIME,
+		cacheTime: FIELD_SUGGESTION_CACHE_TIME,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+	};
+};
+
+export const useFieldKeysSuggestion = (
+	config: FieldKeysConfig,
+	dataSource: DataSource,
+	searchText: string,
+): UseQueryResult<TelemetryFieldKey[], ErrorType<RenderErrorResponseDTO>> =>
+	useQuery(getFieldKeysQueryOptions(config, dataSource, searchText));

frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss

@@ -1,57 +0,0 @@
-@use '../../../../styles/scrollbar' as *;
-
-.container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	// Let the flex children shrink below their content height so the series list
-	// scrolls within the capped legend height instead of overflowing the wrapper
-	// (the default min-height:auto would block the shrink).
-	min-height: 0;
-}
-
-.scroller {
-	// flex:1 + min-height:0 pins the scroller to the space left after the
-	// toolbar instead of growing to fit every row.
-	flex: 1;
-	min-height: 0;
-	height: 100%;
-	width: 100%;
-	padding-right: var(--spacing-2);
-	overflow-x: hidden;
-	overscroll-behavior: contain;
-
-	@include custom-scrollbar;
-}
-
-.gridItem {
-	// Or the item keeps its content width and the label never ellipsizes.
-	min-width: 0;
-	max-width: 100%;
-}
-
-.gridList {
-	min-width: 0;
-	display: grid;
-	grid-auto-flow: row;
-	// min() keeps the column inside a narrow panel, where a wider one would push
-	// the row's actions out of the clipped area.
-	grid-template-columns: repeat(
-		auto-fill,
-		minmax(min(var(--legend-item-width, 240px), 100%), 1fr)
-	);
-	gap: var(--spacing-1) var(--spacing-4);
-}
-
-.container.isRight .gridList {
-	grid-template-columns: 1fr;
-}
-
-.emptyState {
-	padding: var(--spacing-16) 0;
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-	text-align: center;
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -0,0 +1,204 @@
+@use '../../../../styles/scrollbar' as *;
+
+.legend-search-container {
+	flex-shrink: 0;
+	width: 100%;
+	padding-right: 8px;
+
+	.legend-search-input {
+		font-size: 12px;
+	}
+}
+
+.legend-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	height: 100%;
+	width: 100%;
+	// Allow the flex children to shrink below their content height so the
+	// virtualized grid scrolls within the capped legend height instead of
+	// overflowing the wrapper (default min-height:auto would block the shrink).
+	min-height: 0;
+
+	&:has(.legend-item-focused) .legend-item {
+		opacity: 0.3;
+	}
+
+	&:has(.legend-item-focused) .legend-item.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-empty-state {
+		font-size: 12px;
+		color: var(--l2-foreground);
+		text-align: center;
+		padding: 12px;
+		padding: 2rem 0;
+	}
+
+	.legend-virtuoso-container {
+		// flex:1 + min-height:0 pins the scroller to the space left after the
+		// search box (RIGHT legend) and lets it scroll instead of growing to fit
+		// every row — without this the grid overflows a BOTTOM legend's fixed height.
+		flex: 1;
+		min-height: 0;
+		height: 100%;
+		width: 100%;
+
+		.virtuoso-grid-list {
+			min-width: 0;
+			display: grid;
+			grid-auto-flow: row;
+			grid-template-columns: repeat(
+				auto-fill,
+				minmax(var(--legend-average-width, 240px), 1fr)
+			);
+			column-gap: 12px;
+		}
+
+		.virtuoso-grid-item {
+			min-width: 0;
+		}
+
+		&.legend-virtuoso-container-right {
+			.virtuoso-grid-list {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		&.legend-virtuoso-container-single-row {
+			.virtuoso-grid-list {
+				grid-template-columns: repeat(
+					auto-fit,
+					minmax(var(--legend-average-width, 240px), max-content)
+				);
+				justify-content: center;
+			}
+		}
+
+		@include custom-scrollbar;
+	}
+}
+
+.legend-row {
+	padding: 4px 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+
+	&.legend-single-row {
+		justify-content: center;
+	}
+
+	&.legend-row-right {
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+	}
+	&.legend-row-bottom {
+		flex-direction: row;
+	}
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	// Include padding within the width so a full-width row (legend-item-right) fits its
+	// column instead of overflowing by the 16px horizontal padding — there is no global
+	// border-box reset, so the default content-box would make it overflow.
+	box-sizing: border-box;
+	max-width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+	cursor: pointer;
+
+	&.legend-item-right {
+		width: 100%;
+	}
+
+	&.legend-item-off {
+		opacity: 0.3;
+		text-decoration: line-through;
+		text-decoration-thickness: 1px;
+	}
+
+	&.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-item-label-trigger {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+	}
+
+	.legend-marker {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 50%;
+		min-width: 11px;
+		min-height: 11px;
+		width: 11px;
+		height: 11px;
+		flex-shrink: 0;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+		position: relative;
+
+		&:hover {
+			transform: scale(1.2);
+			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+		}
+
+		&:active {
+			transform: scale(0.9);
+		}
+	}
+
+	.legend-label {
+		flex: 1;
+		font-size: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.legend-copy-button {
+		// Always laid out (space reserved) but transparent, so revealing it on
+		// hover fades the icon in without reflowing the row / shifting the label.
+		// Shrink the shared icon Button (defaults to a 2rem square) to the
+		// compact legend row via its size tokens.
+		--button-height: auto;
+		--button-width: auto;
+		--button-padding: 2px;
+
+		opacity: 0;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		border-radius: 4px;
+		transition:
+			opacity 0.15s ease,
+			color 0.15s ease;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
+	&:hover {
+		background: var(--l3-background);
+		.legend-copy-button {
+			opacity: 1;
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -1,106 +1,139 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
+import { Input } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
+import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendItem } from 'lib/uPlotV2/config/types';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 
-import { LegendAction, LegendPosition, LegendProps } from '../types';
+import { LegendPosition, LegendProps } from '../types';
 
-import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
-import LegendRow from './LegendRow';
-import LegendToolbar from './LegendToolbar';
-import { filterLegendItems, getShownSeriesState } from './utils';
+import './Legend.styles.scss';
 
-import styles from './Legend.module.scss';
+export const MAX_LEGEND_WIDTH = 240;
 
 /**
- * Presentational legend, source-agnostic: the uPlot charts feed it via
- * UPlotLegend, Pie feeds it directly. Every state change is delegated.
+ * Presentational legend. Renders the supplied `items` (markers + labels, an
+ * optional copy button, and a search box for the RIGHT position) and delegates
+ * all interaction to the container handlers. Source-agnostic — the uPlot
+ * charts feed it via UPlotLegend; Pie feeds it directly.
  */
 export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
 	focusedSeriesIndex,
-	onAction,
+	onClick,
+	onMouseMove,
+	onMouseLeave,
 	showCopy = true,
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [filterQuery, setFilterQuery] = useState('');
+	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 
-	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
-	const isRightPosition = position === LegendPosition.RIGHT;
+	// Search is intrinsic to the right-positioned legend.
+	const searchEnabled = position === LegendPosition.RIGHT;
+	const { width: containerWidth } = useResizeObserver(legendContainerRef);
 
-	const { visibleCount, soleShownSeriesIndex } = useMemo(
-		() => getShownSeriesState(items),
-		[items],
-	);
+	const isSingleRow = useMemo(() => {
+		if (position !== LegendPosition.BOTTOM || containerWidth <= 0) {
+			return false;
+		}
+		const totalLegendWidth = items.length * (averageLegendWidth + 16);
+		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
+		return totalRows <= 1;
+	}, [averageLegendWidth, items.length, position, containerWidth]);
 
-	// A bottom legend gets two rows; spending one on chrome costs more chart than
-	// the readout is worth.
-	const showToolbar = isRightPosition && items.length > 0;
-	const showFilter = showToolbar;
+	const visibleLegendItems = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return items;
+		}
 
-	const effectiveQuery = showFilter ? filterQuery : '';
-
-	const visibleLegendItems = useMemo(
-		() => filterLegendItems(items, effectiveQuery),
-		[items, effectiveQuery],
-	);
-
-	const isEmptyState =
-		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
-
-	const isAllShown = visibleCount === items.length;
-
-	// A row that unmounts under the pointer never fires its own mouseleave.
-	const handleMouseLeave = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex: null }),
-		[onAction],
-	);
+		const query = legendSearchQuery.trim().toLowerCase();
+		return items.filter((item) => item.label?.toLowerCase().includes(query));
+	}, [searchEnabled, legendSearchQuery, items]);
 
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => (
-			<LegendRow
-				key={item.seriesIndex}
-				item={item}
-				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
-				isAllShown={isAllShown}
-				isFocused={focusedSeriesIndex === item.seriesIndex}
-				showCopy={showCopy}
-				onAction={onAction}
-			/>
-		),
-		[soleShownSeriesIndex, isAllShown, focusedSeriesIndex, showCopy, onAction],
+		(item: LegendItem): JSX.Element => {
+			// `color` is uPlot's stroke union (string | fn | gradient); only a string
+			// is a usable CSS colour for the marker.
+			const markerColor = typeof item.color === 'string' ? item.color : undefined;
+			return (
+				<div
+					key={item.seriesIndex}
+					data-legend-item-id={item.seriesIndex}
+					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
+						'legend-item-off': !item.show,
+						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+					})}
+				>
+					<TooltipSimple title={item.label} arrow side="top" disableHoverableContent>
+						<div className="legend-item-label-trigger">
+							<div
+								className="legend-marker"
+								style={{ borderColor: markerColor }}
+								data-is-legend-marker={true}
+							/>
+							<span className="legend-label">{item.label}</span>
+						</div>
+					</TooltipSimple>
+					{showCopy && (
+						<CopyButton
+							value={item.label ?? ''}
+							size={12}
+							className="legend-copy-button"
+							ariaLabel={`Copy ${item.label}`}
+							testId="legend-copy"
+						/>
+					)}
+				</div>
+			);
+		},
+		[focusedSeriesIndex, position, showCopy],
 	);
 
+	const isEmptyState = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return false;
+		}
+		return visibleLegendItems.length === 0;
+	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+
 	return (
 		<div
 			ref={legendContainerRef}
-			className={cx(styles.container, {
-				[styles.isRight]: isRightPosition,
-			})}
-			style={{ ['--legend-item-width' as string]: `${itemWidth}px` }}
-			onMouseLeave={handleMouseLeave}
-			data-testid="legend-container"
+			className="legend-container"
+			onClick={onClick}
+			onMouseMove={onMouseMove}
+			onMouseLeave={onMouseLeave}
+			style={{
+				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
+			}}
 		>
-			{showToolbar && (
-				<LegendToolbar
-					visibleCount={visibleCount}
-					totalCount={items.length}
-					showFilter={showFilter}
-					filterQuery={filterQuery}
-					onFilterQueryChange={setFilterQuery}
-				/>
+			{searchEnabled && (
+				<div className="legend-search-container">
+					<Input
+						allowClear
+						placeholder="Search..."
+						value={legendSearchQuery}
+						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						data-testid="legend-search-input"
+						className="legend-search-input"
+					/>
+				</div>
 			)}
 			{isEmptyState ? (
-				<div className={styles.emptyState}>
-					No series found matching &quot;{effectiveQuery}&quot;
+				<div className="legend-empty-state">
+					No series found matching &quot;{legendSearchQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid
-					className={styles.scroller}
-					listClassName={styles.gridList}
-					itemClassName={styles.gridItem}
+					className={cx(
+						'legend-virtuoso-container',
+						`legend-virtuoso-container-${position.toLowerCase()}`,
+						{ 'legend-virtuoso-container-single-row': isSingleRow },
+					)}
 					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>

frontend/src/lib/uPlotV2/components/Legend/LegendRow.module.scss

@@ -1,170 +0,0 @@
-.row {
-	// Width of the revealed actions, given up by the label on hover only.
-	--legend-actions-reserve: 78px;
-
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	height: 28px;
-	padding: 0 var(--spacing-3) 0 var(--spacing-4);
-	box-sizing: border-box;
-	width: 100%;
-	max-width: 100%;
-	min-width: 0;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition: background 160ms linear;
-
-	&:hover,
-	&:focus-visible {
-		background: var(--l3-background);
-	}
-}
-
-.isFocused {
-	background: var(--l3-background);
-}
-
-.marker {
-	// Reads as a checkbox without being one: filled when shown, hollow when
-	// hidden, deliberately not a check glyph.
-	flex: 0 0 auto;
-	box-sizing: border-box;
-	position: relative;
-	// Above the actions, so a narrow row's chip never covers the series colour.
-	z-index: 4;
-	width: 12px;
-	height: 12px;
-	padding: 0;
-	appearance: none;
-	border-width: 1.5px;
-	border-style: solid;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition:
-		transform 200ms ease,
-		box-shadow 200ms ease,
-		background-color 160ms linear,
-		opacity 160ms linear;
-
-	&:hover {
-		transform: scale(1.2);
-		box-shadow: 0 0 0 2px
-			color-mix(in srgb, var(--l1-foreground) 30%, transparent);
-	}
-
-	&:active {
-		transform: scale(0.9);
-	}
-
-	&:disabled {
-		cursor: default;
-	}
-
-	&:disabled:hover {
-		transform: none;
-		box-shadow: none;
-	}
-}
-
-// Series names run long and have no spaces to break on, so they need both a
-// cap and a break rule or the tooltip becomes one panel-wide line.
-.rowTooltip {
-	max-width: 420px;
-	white-space: normal;
-	overflow-wrap: anywhere;
-}
-
-.label {
-	flex: 1 1 auto;
-	box-sizing: border-box;
-	width: 100%;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-	color: var(--l2-foreground);
-	user-select: none;
-}
-
-.isHidden .marker {
-	opacity: 0.45;
-}
-
-.isHidden .label {
-	color: var(--l3-foreground);
-	text-decoration: line-through;
-	text-decoration-thickness: 1px;
-}
-
-/* Row actions */
-
-.actions {
-	position: absolute;
-	top: var(--spacing-2);
-	right: var(--spacing-3);
-	z-index: 3;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding-left: var(--spacing-5, 10px);
-	// Sits on the row's hover background and masks the label's tail behind it.
-	background: var(--l3-background);
-	box-shadow: -8px 0 8px var(--l3-background);
-	opacity: 0;
-	transform: translateX(10px);
-	pointer-events: none;
-	transition:
-		opacity 180ms cubic-bezier(0.08, 0.52, 0.52, 1),
-		transform 180ms cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-// :focus-visible, not :focus-within — the latter also matches the click that
-// just toggled the series, leaving the actions stuck open.
-.row:hover .actions,
-.row:focus-visible .actions,
-.row:has(:focus-visible) .actions {
-	opacity: 1;
-	transform: translateX(0);
-	pointer-events: auto;
-}
-
-// The cap spares rows sized to their actions, not their label.
-.row:hover .label,
-.row:focus-visible .label,
-.row:has(:focus-visible) .label {
-	padding-right: min(var(--legend-actions-reserve), 50%);
-}
-
-.actionTrigger {
-	display: inline-flex;
-}
-
-.actionButton {
-	--button-height: 20px;
-	--button-width: 20px;
-	--button-padding: 0;
-	--button-variant-ghost-color: var(--l3-foreground);
-	--button-variant-ghost-hover-color: var(--l1-foreground);
-
-	flex-shrink: 0;
-}
-
-.actionButton.scopeButton {
-	--button-width: auto;
-	--button-padding: 0 var(--spacing-4);
-	--button-font-size: var(--font-size-xs);
-	--button-border-radius: calc(var(--radius) * 4);
-	--button-base-border-width: 1px;
-	// --l2-border is the actions bar's own background: one step up reads.
-	--button-base-border-color: var(--l3-border);
-
-	border-style: solid;
-}
-.actionButton.scopeButton:hover {
-	border-color: var(--l2-border);
-}

frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx

@@ -1,182 +0,0 @@
-import { KeyboardEvent, memo, MouseEvent, useCallback } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-
-import { LegendAction, OnLegendAction } from '../types';
-
-import { LEGEND_TOOLTIP_DELAY_MS } from './constants';
-import styles from './LegendRow.module.scss';
-
-export interface LegendRowProps {
-	item: LegendItem;
-	/** The only series currently shown, so hiding it is refused. */
-	isSoleShown: boolean;
-	/** Nothing is hidden, so the row's action can only narrow the selection. */
-	isAllShown: boolean;
-	isFocused: boolean;
-	showCopy: boolean;
-	onAction: OnLegendAction;
-}
-
-/**
- * One legend row. The marker is its own target for excluding a single series —
- * the one thing the row click can't do while everything is showing. The actions
- * overlay the label's tail rather than taking layout width, and their reveal is
- * pure CSS.
- */
-function LegendRow({
-	item,
-	isSoleShown,
-	isAllShown,
-	isFocused,
-	showCopy,
-	onAction,
-}: LegendRowProps): JSX.Element {
-	const { seriesIndex, show } = item;
-	const label = item.label ?? '';
-	const isShowAllAction = show && !isAllShown;
-	const scopeActionLabel = isShowAllAction
-		? 'Show all series'
-		: 'Show only current series';
-	// `color` is uPlot's stroke union (string | fn | gradient); only a string is
-	// a usable CSS colour for the marker.
-	const seriesColor = typeof item.color === 'string' ? item.color : undefined;
-
-	/** Everything showing -> isolate; showing alone -> restore all. */
-	const handleRowClick = useCallback((): void => {
-		if (isSoleShown) {
-			onAction({ type: LegendAction.SHOW_ALL });
-			return;
-		}
-		onAction({
-			type: isAllShown ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
-			seriesIndex,
-		});
-	}, [isSoleShown, isAllShown, onAction, seriesIndex]);
-
-	const handleMarkerClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			onAction({ type: LegendAction.TOGGLE, seriesIndex });
-		},
-		[onAction, seriesIndex],
-	);
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent<HTMLDivElement>): void => {
-			// Let the row actions handle their own keys.
-			if (event.target !== event.currentTarget) {
-				return;
-			}
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault();
-				handleRowClick();
-			}
-		},
-		[handleRowClick],
-	);
-
-	const handleScopeClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			if (isShowAllAction) {
-				onAction({ type: LegendAction.SHOW_ALL });
-				return;
-			}
-			onAction({ type: LegendAction.SHOW_ONLY, seriesIndex });
-		},
-		[isShowAllAction, onAction, seriesIndex],
-	);
-
-	const handleMouseEnter = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex }),
-		[onAction, seriesIndex],
-	);
-
-	const handleMouseLeave = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex: null }),
-		[onAction],
-	);
-
-	return (
-		<div
-			className={cx(styles.row, {
-				[styles.isHidden]: !show,
-				[styles.isFocused]: isFocused,
-			})}
-			data-legend-item-id={seriesIndex}
-			data-testid={`legend-item-${seriesIndex}`}
-			role="switch"
-			tabIndex={0}
-			aria-checked={show}
-			aria-label={label}
-			onClick={handleRowClick}
-			onKeyDown={handleKeyDown}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			<button
-				type="button"
-				className={styles.marker}
-				style={{
-					borderColor: seriesColor,
-					backgroundColor: show ? seriesColor : 'transparent',
-				}}
-				onClick={handleMarkerClick}
-				disabled={isSoleShown}
-				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
-				data-is-legend-marker={true}
-				data-testid={`legend-marker-${seriesIndex}`}
-			/>
-			<TooltipSimple
-				title={label}
-				arrow
-				side="top"
-				delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-				disableHoverableContent
-				tooltipContentProps={{ className: styles.rowTooltip }}
-			>
-				<span className={styles.label}>{label}</span>
-			</TooltipSimple>
-			<div className={styles.actions}>
-				<TooltipSimple
-					title={scopeActionLabel}
-					arrow
-					side="top"
-					delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-					disableHoverableContent
-					tooltipContentProps={{ className: styles.rowTooltip }}
-				>
-					{/* Radix's asChild merge strips the button's own data-testid. */}
-					<span className={styles.actionTrigger}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="sm"
-							className={cx(styles.actionButton, styles.scopeButton)}
-							onClick={handleScopeClick}
-							aria-label={scopeActionLabel}
-							testId={`legend-scope-${seriesIndex}`}
-						>
-							{isShowAllAction ? 'All' : 'Only'}
-						</Button>
-					</span>
-				</TooltipSimple>
-				{showCopy && (
-					<CopyButton
-						value={label}
-						size={13}
-						className={styles.actionButton}
-						ariaLabel={`Copy ${label}`}
-						testId={`legend-copy-${seriesIndex}`}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default memo(LegendRow);

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss

@@ -1,35 +0,0 @@
-.toolbar {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--spacing-5, 10px);
-	padding: 0 var(--spacing-4) var(--spacing-5, 10px);
-	flex-shrink: 0;
-
-	> * {
-		flex: 0 1 auto;
-	}
-}
-
-.status {
-	// Wraps rather than losing the count at its end.
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.searchContainer {
-	flex-shrink: 0;
-	width: 100%;
-	padding-right: var(--spacing-4);
-	padding-bottom: var(--spacing-5, 10px);
-}
-
-.searchInput {
-	font-size: var(--font-size-xs);
-}
-
-.searchIcon {
-	color: var(--l3-foreground);
-}

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -1,56 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-import { Input } from 'antd';
-import { Search } from '@signozhq/icons';
-
-import styles from './LegendToolbar.module.scss';
-
-export interface LegendToolbarProps {
-	visibleCount: number;
-	totalCount: number;
-	/** Search is intrinsic to the right-positioned legend. */
-	showFilter: boolean;
-	filterQuery: string;
-	onFilterQueryChange: (query: string) => void;
-}
-
-/** Legend chrome: the series search box and the "Showing N of M" readout. */
-export default function LegendToolbar({
-	visibleCount,
-	totalCount,
-	showFilter,
-	filterQuery,
-	onFilterQueryChange,
-}: LegendToolbarProps): JSX.Element {
-	const handleFilterChange = useCallback(
-		(event: ChangeEvent<HTMLInputElement>): void =>
-			onFilterQueryChange(event.target.value),
-		[onFilterQueryChange],
-	);
-
-	return (
-		<>
-			{showFilter && (
-				<div className={styles.searchContainer}>
-					<Input
-						allowClear
-						prefix={<Search size={12} className={styles.searchIcon} />}
-						placeholder="Search..."
-						value={filterQuery}
-						onChange={handleFilterChange}
-						className={styles.searchInput}
-						data-testid="legend-search-input"
-					/>
-				</div>
-			)}
-			<div className={styles.toolbar}>
-				<span
-					className={styles.status}
-					aria-live="polite"
-					data-testid="legend-status"
-				>
-					{`Showing ${visibleCount} of ${totalCount} series`}
-				</span>
-			</div>
-		</>
-	);
-}

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -8,8 +8,8 @@ import Legend from './Legend';
 
 /**
  * uPlot legend controller. Derives the legend items + focus/visibility state
- * from the chart config (useLegendsSync) and the series interactions from the
- * plot context (useLegendActions), then renders the presentational Legend.
+ * from the chart config (useLegendsSync) and the toggle/focus interactions from
+ * the plot context (useLegendActions), then renders the presentational Legend.
  * Must be rendered inside a PlotContextProvider.
  */
 export default function UPlotLegend({
@@ -17,8 +17,13 @@ export default function UPlotLegend({
 	config,
 	averageLegendWidth,
 }: UPlotLegendProps): JSX.Element {
-	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
-	const onAction = useLegendActions();
+	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
+		useLegendsSync({ config });
+	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
+		useLegendActions({
+			setFocusedSeriesIndex,
+			focusedSeriesIndex,
+		});
 
 	const items = useMemo(() => Object.values(legendItemsMap), [legendItemsMap]);
 
@@ -28,7 +33,9 @@ export default function UPlotLegend({
 			position={position}
 			averageLegendWidth={averageLegendWidth}
 			focusedSeriesIndex={focusedSeriesIndex}
-			onAction={onAction}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
 		/>
 	);
 }

frontend/src/lib/uPlotV2/components/Legend/__tests__/UPlotLegend.test.tsx

@@ -1,419 +0,0 @@
-import React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../../hooks/useLegendActions';
-import UPlotLegend from '../UPlotLegend';
-import { LegendAction, LegendActionPayload, LegendPosition } from '../../types';
-
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-		className,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-		className?: string;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid" className={className}>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync');
-jest.mock('lib/uPlotV2/hooks/useLegendActions');
-
-const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
-	typeof useLegendsSync
->;
-const mockUseLegendActions = useLegendActions as jest.MockedFunction<
-	typeof useLegendActions
->;
-
-/** The payloads of one action type, in dispatch order. */
-const dispatched = (
-	onAction: jest.Mock,
-	type: LegendAction,
-): LegendActionPayload[] =>
-	onAction.mock.calls
-		.map(([payload]) => payload as LegendActionPayload)
-		.filter((payload) => payload.type === type);
-
-describe('UPlotLegend', () => {
-	const baseLegendItemsMap = {
-		0: {
-			seriesIndex: 0,
-			label: 'A',
-			show: true,
-			color: '#ff0000',
-		},
-		1: {
-			seriesIndex: 1,
-			label: 'B',
-			show: false,
-			color: '#00ff00',
-		},
-		2: {
-			seriesIndex: 2,
-			label: 'C',
-			show: true,
-			color: '#0000ff',
-		},
-	};
-
-	let onAction: jest.Mock;
-
-	beforeEach(() => {
-		onAction = jest.fn();
-
-		mockUseLegendsSync.mockReturnValue({
-			legendItemsMap: baseLegendItemsMap,
-			focusedSeriesIndex: 1,
-			setFocusedSeriesIndex: jest.fn(),
-		});
-
-		mockUseLegendActions.mockReturnValue(onAction);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const renderLegend = (position?: LegendPosition): RenderResult =>
-		render(
-			<TooltipProvider>
-				<UPlotLegend
-					position={position}
-					// config is consumed by the mocked useLegendsSync hook, not directly
-					config={{} as any}
-				/>
-			</TooltipProvider>,
-		);
-
-	describe('layout and position', () => {
-		it('renders the search input on a RIGHT legend', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
-
-		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
-			renderLegend();
-
-			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
-			// The row interactions are the same in both placements.
-			expect(screen.getByTestId('legend-item-0')).toBeInTheDocument();
-			expect(screen.getByTestId('legend-scope-0')).toBeInTheDocument();
-		});
-
-		it('renders the marker with the series colour, filled only when shown', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({
-				'border-color': '#ff0000',
-				'background-color': '#ff0000',
-			});
-			// Hidden series read as an empty checkbox.
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({ 'background-color': 'transparent' });
-		});
-
-		it('renders all legend items in the grid by default', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('status readout', () => {
-		it('reports how many series are showing', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-status')).toHaveTextContent(
-				'Showing 2 of 3 series',
-			);
-		});
-	});
-
-	describe('filter behavior', () => {
-		it('filters legend items based on the query (case-insensitive)', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'a');
-
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.queryByText('B')).not.toBeInTheDocument();
-			expect(screen.queryByText('C')).not.toBeInTheDocument();
-		});
-
-		it('shows the empty state when nothing matches', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'network');
-
-			expect(
-				screen.getByText(/No series found matching "network"/i),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
-		});
-
-		it('ignores a whitespace-only query', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), '   ');
-
-			expect(
-				screen.queryByText(/No series found matching/i),
-			).not.toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('row interactions', () => {
-		const allShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1], show: true },
-			2: { ...baseLegendItemsMap[2] },
-		};
-
-		const mockAllShown = (): void => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: allShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		};
-
-		it('isolates the series when everything is showing', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			// Nothing the user can see is there to exclude, so the click means Only.
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toStrictEqual([
-				{ type: LegendAction.SHOW_ONLY, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-		});
-
-		it('toggles the series once something is already hidden', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('excludes just that series when its marker is clicked', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-marker-0'));
-
-			// The marker is the one way to exclude a single series while
-			// everything is showing — the row click isolates instead.
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('stops the marker offering to hide the last series showing', () => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toBeDisabled();
-			expect(screen.getByTestId('legend-marker-1')).toBeEnabled();
-		});
-
-		it('labels the marker with what clicking it does', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toHaveAttribute(
-				'aria-label',
-				'Hide A',
-			);
-			expect(screen.getByTestId('legend-marker-1')).toHaveAttribute(
-				'aria-label',
-				'Show B',
-			);
-		});
-
-		it('adds the clicked series to the selection while one is alone', async () => {
-			const user = userEvent.setup();
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is showing alone; clicking another row builds the selection
-			// up rather than moving the isolation.
-			await user.click(screen.getByText('B'));
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 1 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('toggles the series on Enter and Space', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			row.focus();
-			await user.keyboard('{Enter}');
-			await user.keyboard(' ');
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-		});
-
-		it('reflects visibility on the row for assistive tech', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-item-0')).toHaveAttribute(
-				'aria-checked',
-				'true',
-			);
-			expect(screen.getByTestId('legend-item-1')).toHaveAttribute(
-				'aria-checked',
-				'false',
-			);
-		});
-
-		it('restores every series from All without also toggling the row', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is shown while B is hidden, so its action is All.
-			await user.click(screen.getByTestId('legend-scope-0'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('isolates the series from Only on a hidden row', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-scope-1'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toStrictEqual([
-				{ type: LegendAction.SHOW_ONLY, seriesIndex: 1 },
-			]);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-		});
-
-		it('highlights the hovered series and clears it on leave', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			await user.hover(row);
-			expect(onAction).toHaveBeenCalledWith({
-				type: LegendAction.HOVER,
-				seriesIndex: 0,
-			});
-
-			await user.unhover(row);
-			expect(onAction).toHaveBeenCalledWith({
-				type: LegendAction.HOVER,
-				seriesIndex: null,
-			});
-		});
-	});
-
-	describe('one-series state', () => {
-		const soleShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1] },
-			2: { ...baseLegendItemsMap[2], show: false },
-		};
-
-		beforeEach(() => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: soleShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		});
-
-		it('offers All on the shown row and Only on the hidden ones', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-scope-0')).toHaveTextContent('All');
-			expect(screen.getByTestId('legend-scope-1')).toHaveTextContent('Only');
-			expect(screen.getByTestId('legend-scope-2')).toHaveTextContent('Only');
-		});
-
-		it('restores everything from All', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-scope-0'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-		});
-
-		it('restores everything when the row showing alone is clicked again', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-	});
-});

frontend/src/lib/uPlotV2/components/Legend/__tests__/utils.test.ts

@@ -1,45 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-import { filterLegendItems, getShownSeriesState } from '../utils';
-
-const items = (shown: boolean[]): LegendItem[] =>
-	shown.map((show, index) => ({
-		seriesIndex: index + 1,
-		label: `series-${index}`,
-		color: '#000',
-		show,
-	}));
-
-describe('getShownSeriesState', () => {
-	it('counts the shown series', () => {
-		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
-			visibleCount: 2,
-			soleShownSeriesIndex: null,
-		});
-	});
-
-	it('names the series when exactly one is shown', () => {
-		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
-			visibleCount: 1,
-			soleShownSeriesIndex: 2,
-		});
-	});
-
-	it('reports nothing shown', () => {
-		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
-			visibleCount: 0,
-			soleShownSeriesIndex: null,
-		});
-	});
-});
-
-describe('filterLegendItems', () => {
-	it('matches case-insensitively on the label', () => {
-		const filtered = filterLegendItems(items([true, true, true]), 'SERIES-1');
-		expect(filtered.map((item) => item.label)).toStrictEqual(['series-1']);
-	});
-
-	it('returns every item for a blank query', () => {
-		expect(filterLegendItems(items([true, true]), '   ')).toHaveLength(2);
-	});
-});

frontend/src/lib/uPlotV2/components/Legend/constants.ts

@@ -1,20 +0,0 @@
-/** Widest a single legend item is allowed to get when sizing the legend grid. */
-export const MAX_LEGEND_WIDTH = 240;
-
-/**
- * Enough for a row to contain its own hover actions, which a short label would
- * otherwise size a column too narrow for. Little room for the label is intended.
- */
-export const MIN_LEGEND_ITEM_WIDTH = 110;
-
-/** Marker + row padding, on top of the estimated label width. */
-export const LEGEND_ITEM_EXTRA_WIDTH = 16;
-
-/** Must match `.row`'s height and the grid's row gap, or the reserved
- * rectangle clips a row. */
-export const LEGEND_ROW_HEIGHT = 28;
-export const LEGEND_ROW_GAP = 2;
-export const LEGEND_MAX_BOTTOM_ROWS = 2;
-
-/** Hover delay before a row's full-name tooltip opens. */
-export const LEGEND_TOOLTIP_DELAY_MS = 500;

frontend/src/lib/uPlotV2/components/Legend/utils.ts

@@ -1,34 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-export interface ShownSeriesState {
-	visibleCount: number;
-	/** The series index when exactly one series is shown, else null. */
-	soleShownSeriesIndex: number | null;
-}
-
-/**
- * Driven by what is actually shown, never a remembered isolation: hiding series
- * one at a time down to a single one is the same state as "Only".
- */
-export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
-	const shown = items.filter((item) => item.show);
-
-	return {
-		visibleCount: shown.length,
-		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
-	};
-}
-
-export function filterLegendItems(
-	items: LegendItem[],
-	query: string,
-): LegendItem[] {
-	const normalisedQuery = query.trim().toLowerCase();
-	if (!normalisedQuery) {
-		return items;
-	}
-
-	return items.filter((item) =>
-		item.label?.toLowerCase().includes(normalisedQuery),
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.module.scss

@@ -12,11 +12,10 @@
 	}
 }
 
-// Matches the legend row's marker.
 .uplotTooltipItemMarker {
-	border-radius: var(--radius);
+	border-radius: 50%;
 	border-style: solid;
-	border-width: 1.5px;
+	border-width: 2px;
 	width: 12px;
 	height: 12px;
 	box-sizing: border-box;
@@ -31,23 +30,11 @@
 	justify-content: space-between;
 }
 
-// The legend's mono type; the container's Inter stays for the header.
-.uplotTooltipItemLabel,
-.uplotTooltipItemValue {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-}
-
 .uplotTooltipItemLabel {
 	white-space: normal;
 	overflow-wrap: anywhere;
 }
 
-.uplotTooltipItemValue {
-	white-space: nowrap;
-}
-
 .uplotTooltipItemContentSeparator {
 	flex: 1;
 	border-width: 0.5px;

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.tsx

@@ -25,7 +25,7 @@ export default function TooltipItem({
 		>
 			<div
 				className={Styles.uplotTooltipItemMarker}
-				style={{ borderColor: item.color, backgroundColor: item.color }}
+				style={{ borderColor: item.color }}
 				data-is-legend-marker={true}
 				data-testid={markerTestId}
 			/>
@@ -39,7 +39,7 @@ export default function TooltipItem({
 					className={Styles.uplotTooltipItemContentSeparator}
 					style={{ borderColor: item.color }}
 				/>
-				<span className={Styles.uplotTooltipItemValue}>{item.tooltipValue}</span>
+				<span>{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

frontend/src/lib/uPlotV2/components/__tests__/UPlotLegend.test.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { render, RenderResult, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { LegendItem } from 'lib/uPlotV2/config/types';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+
+import { useLegendActions } from '../../hooks/useLegendActions';
+import UPlotLegend from '../Legend/UPlotLegend';
+import { LegendPosition } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	VirtuosoGrid: ({
+		data,
+		itemContent,
+		className,
+	}: {
+		data: LegendItem[];
+		itemContent: (index: number, item: LegendItem) => React.ReactNode;
+		className?: string;
+	}): JSX.Element => (
+		<div data-testid="virtuoso-grid" className={className}>
+			{data.map((item, index) => (
+				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
+					{itemContent(index, item)}
+				</div>
+			))}
+		</div>
+	),
+}));
+
+jest.mock('lib/uPlotV2/hooks/useLegendsSync');
+jest.mock('lib/uPlotV2/hooks/useLegendActions');
+
+const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
+	typeof useLegendsSync
+>;
+const mockUseLegendActions = useLegendActions as jest.MockedFunction<
+	typeof useLegendActions
+>;
+
+describe('UPlotLegend', () => {
+	const baseLegendItemsMap = {
+		0: {
+			seriesIndex: 0,
+			label: 'A',
+			show: true,
+			color: '#ff0000',
+		},
+		1: {
+			seriesIndex: 1,
+			label: 'B',
+			show: false,
+			color: '#00ff00',
+		},
+		2: {
+			seriesIndex: 2,
+			label: 'C',
+			show: true,
+			color: '#0000ff',
+		},
+	};
+
+	let onLegendClick: jest.Mock;
+	let onLegendMouseMove: jest.Mock;
+	let onLegendMouseLeave: jest.Mock;
+	let onFocusSeries: jest.Mock;
+
+	beforeEach(() => {
+		onLegendClick = jest.fn();
+		onLegendMouseMove = jest.fn();
+		onLegendMouseLeave = jest.fn();
+		onFocusSeries = jest.fn();
+
+		mockUseLegendsSync.mockReturnValue({
+			legendItemsMap: baseLegendItemsMap,
+			focusedSeriesIndex: 1,
+			setFocusedSeriesIndex: jest.fn(),
+		});
+
+		mockUseLegendActions.mockReturnValue({
+			onLegendClick,
+			onLegendMouseMove,
+			onLegendMouseLeave,
+			onFocusSeries,
+		});
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const renderLegend = (position?: LegendPosition): RenderResult =>
+		render(
+			<TooltipProvider>
+				<UPlotLegend
+					position={position}
+					// config is consumed by the mocked useLegendsSync hook, not directly
+					config={{} as any}
+				/>
+			</TooltipProvider>,
+		);
+
+	describe('layout and position', () => {
+		it('renders search input when legend position is RIGHT', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+		});
+
+		it('does not render search input when legend position is BOTTOM (default)', () => {
+			renderLegend();
+
+			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
+		});
+
+		it('renders the marker with the correct border color', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendMarker = document.querySelector(
+				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
+			) as HTMLElement;
+
+			expect(legendMarker).toHaveStyle({
+				'border-color': '#ff0000',
+			});
+		});
+
+		it('renders all legend items in the grid by default', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('search behavior (RIGHT position)', () => {
+		it('filters legend items based on search query (case-insensitive)', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'A');
+
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.queryByText('B')).not.toBeInTheDocument();
+			expect(screen.queryByText('C')).not.toBeInTheDocument();
+		});
+
+		it('shows empty state when no legend items match the search query', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'network');
+
+			expect(
+				screen.getByText(/No series found matching "network"/i),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
+		});
+
+		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, '   ');
+
+			expect(
+				screen.queryByText(/No series found matching/i),
+			).not.toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('legend actions', () => {
+		it('calls onLegendClick when a legend item is clicked', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			await user.click(screen.getByText('A'));
+
+			expect(onLegendClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls mouseMove when the mouse moves over a legend item', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendItem = document.querySelector(
+				'[data-legend-item-id="0"]',
+			) as HTMLElement;
+
+			await user.hover(legendItem);
+
+			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const container = document.querySelector('.legend-container') as HTMLElement;
+
+			await user.hover(container);
+			await user.unhover(container);
+
+			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
+		});
+	});
+});

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
@@ -115,39 +115,26 @@ export enum LegendPosition {
 export interface LegendConfig {
 	position: LegendPosition;
 }
-export enum LegendAction {
-	TOGGLE = 'toggle',
-	SHOW_ONLY = 'showOnly',
-	SHOW_ALL = 'showAll',
-	HOVER = 'hover',
-}
-
-/** Everything the legend can ask of its container, as one dispatch. */
-export type LegendActionPayload =
-	/** Row click / Space / Enter / marker click: hide or show that one series. */
-	| { type: LegendAction.TOGGLE; seriesIndex: number }
-	/** Show that series alone. */
-	| { type: LegendAction.SHOW_ONLY; seriesIndex: number }
-	/** Leave the narrowed selection and show every series. */
-	| { type: LegendAction.SHOW_ALL }
-	/** Row hover, for the chart-side highlight; null on leave. */
-	| { type: LegendAction.HOVER; seriesIndex: number | null };
-
-export type OnLegendAction = (payload: LegendActionPayload) => void;
-
 /**
  * Presentational legend props. Source-agnostic: it renders whatever `items`
  * it's given and delegates interaction to the container handlers, so it serves
- * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
+ * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie). The search
+ * box is intrinsic to the RIGHT position (derived from `position`, not a flag).
  */
 export interface LegendProps {
 	items: LegendItem[];
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Series index highlighted by the chart cursor. */
+	/** Series index to highlight (hovered/focused). */
 	focusedSeriesIndex: number | null;
-	onAction: OnLegendAction;
+	/**
+	 * Container-delegated handlers. Items carry `data-legend-item-id`, so the
+	 * handler reads the target's id rather than binding per item.
+	 */
+	onClick: MouseEventHandler<HTMLDivElement>;
+	onMouseMove: MouseEventHandler<HTMLDivElement>;
+	onMouseLeave: () => void;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
 }

frontend/src/lib/uPlotV2/constants.ts

@@ -6,11 +6,6 @@ export const DEFAULT_HOVER_PROXIMITY_VALUE = 30; // only snap if within 30px hor
 export const DEFAULT_FOCUS_PROXIMITY_VALUE = 1e6;
 export const STEP_INTERVAL_MULTIPLIER = 3; // multiply the width computed by STEP_INTERVAL_MULTIPLIER to get the hover prox value
 
-/** Opacity applied to the series that are NOT highlighted while a legend row is hovered. */
-export const LEGEND_HIGHLIGHT_DIM_ALPHA = 0.16;
-/** Stroke-width multiplier applied to the series highlighted from the legend. */
-export const LEGEND_HIGHLIGHT_WIDTH_RATIO = 1.6;
-
 export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
 	focus: {
 		alpha: 0.3,

frontend/src/lib/uPlotV2/context/PlotContext.tsx

@@ -8,10 +8,6 @@ import {
 	useMemo,
 	useRef,
 } from 'react';
-import {
-	LEGEND_HIGHLIGHT_DIM_ALPHA,
-	LEGEND_HIGHLIGHT_WIDTH_RATIO,
-} from 'lib/uPlotV2/constants';
 import type { SeriesVisibilityItem } from 'lib/visualization/panels/types';
 import { updateSeriesVisibilityToLocalStorage } from 'lib/visualization/panels/utils/legendVisibilityUtils';
 import type uPlot from 'uplot';
@@ -24,26 +20,12 @@ export interface IPlotContext {
 	setPlotContextInitialState: (state: PlotContextInitialState) => void;
 	onToggleSeriesVisibility: (seriesIndex: number) => void;
 	onToggleSeriesOnOff: (seriesIndex: number) => void;
-	/** Show this series alone. */
-	onShowOnlySeries: (seriesIndex: number) => void;
-	/** Show every series again. */
-	onShowAllSeries: () => void;
 	onFocusSeries: (seriesIndex: number | null) => void;
-	/** Lift one series above the rest (dim + thicken) without changing visibility. */
-	onHighlightSeries: (seriesIndex: number | null) => void;
 	syncSeriesVisibilityToLocalStorage: () => void;
 }
 
 export const PlotContext = createContext<IPlotContext | null>(null);
 
-/** Data series (index 0 is the x-axis) currently drawn. */
-const countShownSeries = (plot: uPlot): number =>
-	plot.series.reduce(
-		(count, series, index) =>
-			index > 0 && series.show !== false ? count + 1 : count,
-		0,
-	);
-
 export const PlotContextProvider = ({
 	children,
 }: PropsWithChildren): JSX.Element => {
@@ -51,9 +33,6 @@ export const PlotContextProvider = ({
 	const activeSeriesIndex = useRef<number | undefined>(undefined);
 	const idRef = useRef<string | undefined>(undefined);
 	const shouldSavePreferencesRef = useRef<boolean>(false);
-	/** Pre-highlight stroke widths, captured on the first highlight so it can be undone. */
-	const baseSeriesWidthsRef = useRef<Map<number, number | undefined>>(new Map());
-	const highlightedSeriesIndexRef = useRef<number | null>(null);
 
 	const setPlotContextInitialState = useCallback(
 		({
@@ -64,8 +43,6 @@ export const PlotContextProvider = ({
 			uPlotInstanceRef.current = uPlotInstance;
 			idRef.current = id;
 			activeSeriesIndex.current = undefined;
-			baseSeriesWidthsRef.current = new Map();
-			highlightedSeriesIndexRef.current = null;
 			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
 		[],
@@ -87,54 +64,6 @@ export const PlotContextProvider = ({
 		updateSeriesVisibilityToLocalStorage(idRef.current, seriesVisibility);
 	}, []);
 
-	const onHighlightSeries = useCallback((seriesIndex: number | null): void => {
-		const plot = uPlotInstanceRef.current;
-		if (!plot) {
-			return;
-		}
-
-		highlightedSeriesIndexRef.current = seriesIndex;
-
-		plot.series.forEach((series, index) => {
-			if (index === 0) {
-				return;
-			}
-			if (!baseSeriesWidthsRef.current.has(index)) {
-				baseSeriesWidthsRef.current.set(index, series.width);
-			}
-			const baseWidth = baseSeriesWidthsRef.current.get(index);
-			const isHighlighted = index === seriesIndex;
-
-			/* eslint-disable no-param-reassign */
-			series.alpha =
-				seriesIndex === null || isHighlighted ? 1 : LEGEND_HIGHLIGHT_DIM_ALPHA;
-			series.width =
-				isHighlighted && baseWidth !== undefined
-					? baseWidth * LEGEND_HIGHLIGHT_WIDTH_RATIO
-					: baseWidth;
-			/* eslint-enable no-param-reassign */
-		});
-
-		// Only the stroke style changed, so the cached paths stay valid.
-		plot.redraw(false);
-	}, []);
-
-	/**
-	 * Leaving the dim on a hidden series leaves every other one faded, which
-	 * reads as an isolation rather than as one series being excluded.
-	 */
-	const clearHighlightIfHidden = useCallback((): void => {
-		const plot = uPlotInstanceRef.current;
-		const highlightedIndex = highlightedSeriesIndexRef.current;
-		if (!plot || highlightedIndex === null) {
-			return;
-		}
-
-		if (plot.series[highlightedIndex]?.show === false) {
-			onHighlightSeries(null);
-		}
-	}, [onHighlightSeries]);
-
 	const onToggleSeriesVisibility = useCallback(
 		(seriesIndex: number): void => {
 			const plot = uPlotInstanceRef.current;
@@ -174,61 +103,14 @@ export const PlotContextProvider = ({
 			if (!series) {
 				return;
 			}
-
-			// An empty chart is never worth reaching.
-			const isHiding = series.show !== false;
-			if (isHiding && countShownSeries(plot) <= 1) {
-				return;
-			}
-
 			plot.setSeries(seriesIndex, { show: !series.show });
 			if (idRef.current && shouldSavePreferencesRef.current) {
 				syncSeriesVisibilityToLocalStorage();
 			}
-
-			clearHighlightIfHidden();
 		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
+		[syncSeriesVisibilityToLocalStorage],
 	);
 
-	/** Applies `resolveShow` to every data series in one batch, then persists. */
-	const setSeriesVisibility = useCallback(
-		(resolveShow: (seriesIndex: number) => boolean): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
-
-			activeSeriesIndex.current = undefined;
-
-			plot.batch(() => {
-				plot.series.forEach((_, index) => {
-					if (index === 0) {
-						return;
-					}
-					plot.setSeries(index, { show: resolveShow(index) });
-				});
-				if (idRef.current && shouldSavePreferencesRef.current) {
-					syncSeriesVisibilityToLocalStorage();
-				}
-			});
-
-			clearHighlightIfHidden();
-		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
-	);
-
-	const onShowOnlySeries = useCallback(
-		(seriesIndex: number): void => {
-			setSeriesVisibility((index) => index === seriesIndex);
-		},
-		[setSeriesVisibility],
-	);
-
-	const onShowAllSeries = useCallback((): void => {
-		setSeriesVisibility(() => true);
-	}, [setSeriesVisibility]);
-
 	const onFocusSeries = useCallback((seriesIndex: number | null): void => {
 		const plot = uPlotInstanceRef.current;
 		if (!plot) {
@@ -249,20 +131,14 @@ export const PlotContextProvider = ({
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		}),
 		[
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		],
 	);

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -26,7 +26,6 @@ const createMockPlot = (series: MockSeries[] = []): uPlot =>
 		series,
 		batch: jest.fn((fn: () => void) => fn()),
 		setSeries: jest.fn(),
-		redraw: jest.fn(),
 	}) as unknown as uPlot;
 
 interface TestComponentProps {
@@ -45,10 +44,7 @@ const TestComponent = ({
 		syncSeriesVisibilityToLocalStorage,
 		onToggleSeriesVisibility,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowAllSeries,
 		onFocusSeries,
-		onHighlightSeries,
 	} = usePlotContext();
 	const handleInit = (): void => {
 		if (!plot || !id || typeof shouldSaveSelectionPreference !== 'boolean') {
@@ -88,13 +84,6 @@ const TestComponent = ({
 			>
 				Toggle on/off 1
 			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-2"
-				onClick={(): void => onToggleSeriesOnOff(2)}
-			>
-				Toggle on/off 2
-			</button>
 			<button
 				type="button"
 				data-testid="toggle-on-off-5"
@@ -109,34 +98,6 @@ const TestComponent = ({
 			>
 				Focus series
 			</button>
-			<button
-				type="button"
-				data-testid="show-only-1"
-				onClick={(): void => onShowOnlySeries(1)}
-			>
-				Show only 1
-			</button>
-			<button
-				type="button"
-				data-testid="show-all"
-				onClick={(): void => onShowAllSeries()}
-			>
-				Show all
-			</button>
-			<button
-				type="button"
-				data-testid="highlight-1"
-				onClick={(): void => onHighlightSeries(1)}
-			>
-				Highlight 1
-			</button>
-			<button
-				type="button"
-				data-testid="clear-highlight"
-				onClick={(): void => onHighlightSeries(null)}
-			>
-				Clear highlight
-			</button>
 		</div>
 	);
 };
@@ -312,7 +273,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -364,7 +324,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -384,48 +343,6 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
 			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
 		});
-
-		it('refuses to hide the last series showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// An empty chart is never a state worth reaching.
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('still shows a hidden series when only one is left showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-		});
 	});
 
 	describe('onFocusSeries', () => {
@@ -464,193 +381,4 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
 		});
 	});
-	describe('onShowOnlySeries', () => {
-		const renderWithSeries = (
-			series: MockSeries[],
-		): { plot: uPlot; user: ReturnType<typeof userEvent.setup> } => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			return { plot, user };
-		};
-
-		it('hides every other series, leaving the x-axis alone', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalled();
-		});
-
-		it('keeps isolating the series that is already the only one shown', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-		});
-	});
-
-	describe('onShowAllSeries', () => {
-		it('shows every hidden series again', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-all'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: true });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-		});
-	});
-
-	describe('onHighlightSeries', () => {
-		const series = (): MockSeries[] => [
-			{ label: 'x-axis', show: true },
-			{ label: 'CPU', show: true, width: 2 },
-			{ label: 'Memory', show: true, width: 2 },
-		];
-
-		it('dims the other series and thickens the highlighted one', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(3.2);
-			expect(plot.series[2].alpha).toBe(0.16);
-			expect(plot.series[2].width).toBe(2);
-			// Only the stroke changed, so the cached paths are reused.
-			expect(plot.redraw).toHaveBeenCalledWith(false);
-		});
-
-		it('restores every series when the highlight is cleared', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('clear-highlight'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(2);
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('drops the dim when the highlighted series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			// The mock's setSeries doesn't mutate, so mirror what uPlot would do.
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// Otherwise every remaining series stays faded and the panel reads as
-			// an isolation instead of one series being excluded.
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('keeps the dim when a different series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-2'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[2].alpha).toBe(0.16);
-		});
-
-		it('leaves visibility untouched', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-	});
 });

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -1,5 +1,4 @@
 import { renderHook } from '@testing-library/react';
-import { LegendAction } from 'lib/uPlotV2/components/types';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import { useLegendActions } from 'lib/uPlotV2/hooks/useLegendActions';
 
@@ -12,12 +11,10 @@ const mockUsePlotContext = usePlotContext as jest.MockedFunction<
 describe('useLegendActions', () => {
 	let onToggleSeriesVisibility: jest.Mock;
 	let onToggleSeriesOnOff: jest.Mock;
-	let onShowOnlySeries: jest.Mock;
-	let onShowAllSeries: jest.Mock;
-	let onFocusSeries: jest.Mock;
-	let onHighlightSeries: jest.Mock;
+	let onFocusSeriesPlot: jest.Mock;
 	let setPlotContextInitialState: jest.Mock;
 	let syncSeriesVisibilityToLocalStorage: jest.Mock;
+	let setFocusedSeriesIndexMock: jest.Mock;
 	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
 
 	beforeAll(() => {
@@ -40,20 +37,15 @@ describe('useLegendActions', () => {
 	beforeEach(() => {
 		onToggleSeriesVisibility = jest.fn();
 		onToggleSeriesOnOff = jest.fn();
-		onShowOnlySeries = jest.fn();
-		onShowAllSeries = jest.fn();
-		onFocusSeries = jest.fn();
-		onHighlightSeries = jest.fn();
+		onFocusSeriesPlot = jest.fn();
 		setPlotContextInitialState = jest.fn();
 		syncSeriesVisibilityToLocalStorage = jest.fn();
+		setFocusedSeriesIndexMock = jest.fn();
 
 		mockUsePlotContext.mockReturnValue({
 			onToggleSeriesVisibility,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
-			onFocusSeries,
-			onHighlightSeries,
+			onFocusSeries: onFocusSeriesPlot,
 			setPlotContextInitialState,
 			syncSeriesVisibilityToLocalStorage,
 		});
@@ -61,65 +53,149 @@ describe('useLegendActions', () => {
 		cancelAnimationFrameSpy.mockClear();
 	});
 
-	describe('visibility actions', () => {
-		it('toggles a single series on row click', () => {
-			const { result } = renderHook(() => useLegendActions());
+	const createMouseEvent = (options: {
+		legendItemId?: number;
+		isMarker?: boolean;
+	}): any => {
+		const { legendItemId, isMarker = false } = options;
 
-			result.current({ type: LegendAction.TOGGLE, seriesIndex: 2 });
+		return {
+			target: {
+				dataset: {
+					...(isMarker ? { isLegendMarker: 'true' } : {}),
+				},
+				closest: jest.fn(() =>
+					legendItemId !== undefined
+						? { dataset: { legendItemId: String(legendItemId) } }
+						: null,
+				),
+			},
+		};
+	};
 
-			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(2);
-			// The row must never isolate — that is what "Only" is for.
+	describe('onLegendClick', () => {
+		it('toggles series visibility when clicking on legend label', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(createMouseEvent({ legendItemId: 0 }));
+
+			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+		});
+
+		it('toggles series on/off when clicking on marker', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(
+				createMouseEvent({ legendItemId: 0, isMarker: true }),
+			);
+
+			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
 			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 
-		it('forwards the Only and All actions to the plot', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('does nothing when click target is not inside a legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.SHOW_ONLY, seriesIndex: 1 });
-			result.current({ type: LegendAction.SHOW_ALL });
+			result.current.onLegendClick(createMouseEvent({}));
 
-			expect(onShowOnlySeries).toHaveBeenCalledWith(1);
-			expect(onShowAllSeries).toHaveBeenCalled();
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 	});
 
-	describe('hover highlight', () => {
-		it('highlights the hovered series', () => {
-			const { result } = renderHook(() => useLegendActions());
+	describe('onFocusSeries', () => {
+		it('schedules focus update and calls plot focus handler via mouse move', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.HOVER, seriesIndex: 2 });
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(2);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
 		});
 
-		it('clears the highlight on leave', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.HOVER, seriesIndex: null });
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(null);
-		});
-
-		it('coalesces rapid hovers into one frame', () => {
-			const { result } = renderHook(() => useLegendActions());
-
-			result.current({ type: LegendAction.HOVER, seriesIndex: 1 });
-			result.current({ type: LegendAction.HOVER, seriesIndex: 2 });
-
-			// Each new hover cancels the frame the previous one queued.
 			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
 		});
+	});
 
-		it('cancels a pending highlight frame on unmount', () => {
-			jest
-				.spyOn(global, 'requestAnimationFrame')
-				.mockImplementation((): number => 7);
+	describe('onLegendMouseMove', () => {
+		it('focuses new series when hovering over different legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 0,
+				}),
+			);
 
-			const { result, unmount } = renderHook(() => useLegendActions());
-			result.current({ type: LegendAction.HOVER, seriesIndex: 1 });
-			unmount();
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(7);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
+		});
+
+		it('does nothing when hovering over already focused series', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 1,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
+
+			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
+			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onLegendMouseLeave', () => {
+		it('cancels pending animation frame and clears focus state', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseLeave();
+
+			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
 		});
 	});
 });

frontend/src/lib/uPlotV2/hooks/useLegendActions.ts

@@ -1,66 +1,117 @@
-import { useCallback, useEffect, useRef } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 
-import {
-	LegendAction,
-	LegendActionPayload,
-	OnLegendAction,
-} from '../components/types';
-
-/**
- * Legend interactions, bound to the plot through PlotContext. Hover is coalesced
- * to one chart redraw per frame.
- */
-export function useLegendActions(): OnLegendAction {
+export function useLegendActions({
+	setFocusedSeriesIndex,
+	focusedSeriesIndex,
+}: {
+	setFocusedSeriesIndex: Dispatch<SetStateAction<number | null>>;
+	focusedSeriesIndex: number | null;
+}): {
+	onLegendClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onFocusSeries: (seriesIndex: number | null) => void;
+	onLegendMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+} {
 	const {
+		onFocusSeries: onFocusSeriesPlot,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowAllSeries,
-		onHighlightSeries,
+		onToggleSeriesVisibility,
 	} = usePlotContext();
 
-	const rafIdRef = useRef<number | null>(null);
+	const rafId = useRef<number | null>(null); // requestAnimationFrame id
 
-	const cancelPendingHighlight = useCallback((): void => {
-		if (rafIdRef.current != null) {
-			cancelAnimationFrame(rafIdRef.current);
-			rafIdRef.current = null;
+	const getLegendItemIdFromEvent = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): string | undefined => {
+			const target = e.target as HTMLElement | null;
+			if (!target) {
+				return undefined;
+			}
+
+			const legendItemElement = target.closest<HTMLElement>(
+				'[data-legend-item-id]',
+			);
+
+			return legendItemElement?.dataset.legendItemId;
+		},
+		[],
+	);
+
+	const onLegendClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): void => {
+			const legendItemId = getLegendItemIdFromEvent(e);
+			if (!legendItemId) {
+				return;
+			}
+			const isLegendMarker = (e.target as HTMLElement).dataset.isLegendMarker;
+			const seriesIndex = Number(legendItemId);
+
+			if (isLegendMarker) {
+				onToggleSeriesOnOff(seriesIndex);
+				return;
+			}
+
+			onToggleSeriesVisibility(seriesIndex);
+		},
+		[onToggleSeriesVisibility, onToggleSeriesOnOff, getLegendItemIdFromEvent],
+	);
+
+	const onFocusSeries = useCallback(
+		(seriesIndex: number | null): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+			}
+			rafId.current = requestAnimationFrame(() => {
+				setFocusedSeriesIndex(seriesIndex);
+				onFocusSeriesPlot(seriesIndex);
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeriesPlot],
+	);
+
+	const onLegendMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
+		const legendItemId = getLegendItemIdFromEvent(e);
+		const seriesIndex = legendItemId ? Number(legendItemId) : null;
+		if (seriesIndex === focusedSeriesIndex) {
+			return;
 		}
-	}, []);
+		onFocusSeries(seriesIndex);
+	};
 
-	useEffect(() => cancelPendingHighlight, [cancelPendingHighlight]);
+	const onLegendMouseLeave = useCallback(
+		(): void => {
+			// Cancel any pending RAF from handleFocusSeries to prevent race condition
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+				rafId.current = null;
+			}
+			setFocusedSeriesIndex(null);
+			onFocusSeries(null);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeries],
+	);
 
-	return useCallback(
-		(payload: LegendActionPayload): void => {
-			switch (payload.type) {
-				case LegendAction.TOGGLE:
-					onToggleSeriesOnOff(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ONLY:
-					onShowOnlySeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ALL:
-					onShowAllSeries();
-					break;
-				case LegendAction.HOVER: {
-					const { seriesIndex } = payload;
-					cancelPendingHighlight();
-					rafIdRef.current = requestAnimationFrame(() => {
-						rafIdRef.current = null;
-						onHighlightSeries(seriesIndex);
-					});
-					break;
-				}
-				default:
-					break;
+	// Cleanup pending animation frames on unmount
+	useEffect(
+		() => (): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
 			}
 		},
-		[
-			cancelPendingHighlight,
-			onHighlightSeries,
-			onShowAllSeries,
-			onShowOnlySeries,
-			onToggleSeriesOnOff,
-		],
+		[],
 	);
+	return {
+		onLegendClick,
+		onFocusSeries,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	};
 }