feat(charts): draw axis lines in the grid's style by default

Padding the scatter range moved the plot edges off the outer grid lines, which
had stood in for the axes.

Assisted-by: Claude Opus 5.5

docs/api/openapi.yml

@@ -184,7 +184,6 @@ components:
         headers:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         html:
           type: string
@@ -218,7 +217,6 @@ components:
         metadata:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         sendResolved:
           nullable: true
@@ -260,7 +258,6 @@ components:
           type: string
         customFields:
           additionalProperties: {}
-          nullable: true
           type: object
         description:
           type: string
@@ -271,7 +268,6 @@ components:
         labels:
           items:
             type: string
-          nullable: true
           type: array
         priority:
           type: string
@@ -350,7 +346,6 @@ components:
         details:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         message:
           type: string
@@ -379,7 +374,6 @@ components:
         details:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         group:
           type: string
@@ -457,7 +451,6 @@ components:
         actions:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
-          nullable: true
           type: array
         apiUrl:
           format: password
@@ -471,7 +464,6 @@ components:
         fields:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
-          nullable: true
           type: array
         footer:
           type: string
@@ -1771,15 +1763,12 @@ components:
           additionalProperties: {}
           nullable: true
           type: object
-        syncState:
-          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
         timestampMillis:
           format: int64
           type: integer
       required:
       - timestampMillis
       - data
-      - syncState
       type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
@@ -2024,8 +2013,6 @@ components:
           format: date-time
           nullable: true
           type: string
-        syncState:
-          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
       required:
       - account_id
       - cloud_account_id
@@ -2035,7 +2022,6 @@ components:
       - providerAccountId
       - integrationConfig
       - removedAt
-      - syncState
       type: object
     CloudintegrationtypesGettableServicesMetadata:
       properties:
@@ -2135,9 +2121,6 @@ components:
           type: object
         providerAccountId:
           type: string
-        syncedVersion:
-          nullable: true
-          type: integer
       required:
       - data
       type: object
@@ -2150,18 +2133,6 @@ components:
         gcp:
           $ref: '#/components/schemas/CloudintegrationtypesGCPIntegrationConfig'
       type: object
-    CloudintegrationtypesRegionState:
-      enum:
-      - enabled
-      - disabled
-      type: string
-    CloudintegrationtypesRegionSyncState:
-      properties:
-        state:
-          $ref: '#/components/schemas/CloudintegrationtypesRegionState'
-      required:
-      - state
-      type: object
     CloudintegrationtypesService:
       properties:
         assets:
@@ -2303,23 +2274,6 @@ components:
         metrics:
           type: boolean
       type: object
-    CloudintegrationtypesSyncState:
-      nullable: true
-      properties:
-        inSync:
-          type: boolean
-        regions:
-          additionalProperties:
-            $ref: '#/components/schemas/CloudintegrationtypesRegionSyncState'
-          type: object
-        version:
-          format: int64
-          type: integer
-      required:
-      - version
-      - inSync
-      - regions
-      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -3425,6 +3379,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4088,6 +4049,7 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4102,6 +4064,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4114,6 +4077,7 @@ components:
       - signoz/HistogramPanel
       - signoz/ListPanel
       - signoz/TextPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4187,6 +4151,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4266,6 +4242,16 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4439,6 +4425,87 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+        "y":
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none.
+          type: string
+        scale:
+          $ref: '#/components/schemas/DashboardtypesAxisScale'
+        softMax:
+          nullable: true
+          type: number
+        softMin:
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        color:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values colour dots and drive the legend. Empty colours by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        size:
+          description: Value column key that scales dot size. Empty draws every dot
+            at the default size.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty uses the first value
+            column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty uses the second
+            value column.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+        dimensions:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesTableFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        minSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        opacity:
+          $ref: '#/components/schemas/DashboardtypesPointOpacity'
+        size:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -21186,9 +21253,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - role:read
+        - ADMIN
       - tokenizer:
-        - role:read
+        - ADMIN
       summary: Get users by role id
       tags:
       - users
@@ -25774,11 +25841,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user role
       tags:
       - users
@@ -25829,11 +25894,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:detach
-        - role:detach
+        - ADMIN
       - tokenizer:
-        - user:detach
-        - role:detach
+        - ADMIN
       summary: Delete user role
       tags:
       - users
@@ -25895,9 +25958,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user role
       tags:
       - users
@@ -25944,9 +26007,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:list
+        - ADMIN
       - tokenizer:
-        - user:list
+        - ADMIN
       summary: List users v2
       tags:
       - users
@@ -26007,13 +26070,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user
       tags:
       - users
@@ -26058,9 +26117,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:delete
+        - ADMIN
       - tokenizer:
-        - user:delete
+        - ADMIN
       summary: Delete user
       tags:
       - users
@@ -26116,9 +26175,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user by user id
       tags:
       - users
@@ -26173,9 +26232,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:update
+        - ADMIN
       - tokenizer:
-        - user:update
+        - ADMIN
       summary: Update user v2
       tags:
       - users
@@ -26232,9 +26291,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:list
+        - ADMIN
       - tokenizer:
-        - factor-password:list
+        - ADMIN
       summary: Get reset password token for a user
       tags:
       - users
@@ -26298,11 +26357,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       - tokenizer:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       summary: Create or regenerate reset password token for a user
       tags:
       - users
@@ -26361,9 +26418,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user roles
       tags:
       - users
@@ -26677,7 +26734,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: Updates my password
       tags:
       - users

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -183,52 +183,32 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
 	}
 
-	storableAccount, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
 	if err != nil {
 		return nil, err
 	}
 
-	account, err := cloudintegrationtypes.NewAccountFromStorable(storableAccount)
-	if err != nil {
-		return nil, err
-	}
-
-	syncState := account.NextSyncState(req.SyncedVersion)
-
 	// If account has been removed (disconnected), return a minimal response with empty integration config.
+	// The agent uses this response to clean up resources
 	if account.RemovedAt != nil {
-		// Heartbeat stays frozen after removal, only the sync state is updated.
-		if account.AgentReport != nil && syncState != nil {
-			account.UpdateSyncState(syncState)
-
-			storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
-			if err != nil {
-				return nil, err
-			}
-
-			err = module.store.UpdateAgentReport(ctx, storableAccount)
-			if err != nil {
-				return nil, err
-			}
-		}
-
 		return cloudintegrationtypes.NewAgentCheckInResponse(
 			req.ProviderAccountID,
 			account.ID.StringValue(),
 			new(cloudintegrationtypes.ProviderIntegrationConfig),
 			account.RemovedAt,
-			syncState,
 		), nil
 	}
 
-	account.UpdateAgentReport(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data, syncState))
+	// update account with cloud provider account id and agent report (heartbeat)
+	account.Update(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data))
 
-	storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
+	err = module.store.UpdateAccount(ctx, account)
 	if err != nil {
 		return nil, err
 	}
 
-	err = module.store.UpdateAgentReport(ctx, storableAccount)
+	// Get account as domain object for config access (enabled regions, etc.)
+	domainAccount, err := cloudintegrationtypes.NewAccountFromStorable(account)
 	if err != nil {
 		return nil, err
 	}
@@ -243,7 +223,8 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, err
 	}
 
-	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, account, storedServices)
+	// Delegate integration config building entirely to the provider module
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, domainAccount, storedServices)
 	if err != nil {
 		return nil, err
 	}
@@ -253,7 +234,6 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		account.ID.StringValue(),
 		integrationConfig,
 		account.RemovedAt,
-		syncState,
 	), nil
 }
 

frontend/.storybook/preview-head.html

@@ -70,49 +70,3 @@
 		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
 	})();
 </script>
-
-<script>
-	// Storybook has no microphone. Chromium's recognizer asks for one and for
-	// Google's speech service, and the `not-allowed` or `network` it reports makes
-	// the assistant hide its mic for the rest of the tab. This one starts
-	// listening at once and hears only what a story passes to `hear`.
-	(() => {
-		class StorySpeechRecognition extends EventTarget {
-			static listening = null;
-			lang = 'en-US';
-			continuous = false;
-			interimResults = false;
-			onstart = null;
-			onresult = null;
-			onerror = null;
-			onend = null;
-
-			start() {
-				StorySpeechRecognition.listening = this;
-				setTimeout(() => this.onstart?.());
-			}
-
-			stop() {
-				if (StorySpeechRecognition.listening === this) {
-					StorySpeechRecognition.listening = null;
-				}
-				setTimeout(() => this.onend?.());
-			}
-
-			abort() {
-				this.stop();
-			}
-
-			/** An interim result: the words so far, still listening. */
-			hear(transcript) {
-				const result = Object.assign([{ transcript, confidence: 1 }], {
-					isFinal: false,
-				});
-				this.onresult?.({ resultIndex: 0, results: [result] });
-			}
-		}
-
-		window.SpeechRecognition = StorySpeechRecognition;
-		window.webkitSpeechRecognition = StorySpeechRecognition;
-	})();
-</script>

frontend/.storybook/preview.tsx

@@ -122,21 +122,7 @@ const preview: Preview = {
 							['List', 'New', 'Edit'],
 						],
 						'Dashboards',
-						[
-							'List',
-							'Detail',
-							[
-								'Overview',
-								'Settings',
-								'Variables',
-								'New Variable',
-								'Edit Variable',
-								'Authz',
-							],
-							'Panel Editor',
-							['Overview', 'Chart Options', 'Thresholds and Links'],
-							'Public',
-						],
+						['List', 'Detail', 'Panel Editor', 'Public'],
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',

frontend/.storybook/test-runner.ts

@@ -23,13 +23,6 @@ const IGNORED_MESSAGES = [
 	// (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/,
-	// The filter editor's ANTLR parser reports every syntax error through
-	// `console.error` (`line 1:14 missing ...`), so each partial expression
-	// typed into it logs one; the editor shows the same errors on screen.
-	/^line \d+:\d+ /,
-	// Chromium's echo of a 4xx/5xx response, which the `[response]` entry below
-	// already reports with its URL and the time its request left.
-	/^Failed to load resource: the server responded with a status of /,
 ];
 
 interface CapturedMessage {
@@ -93,9 +86,7 @@ const config: TestRunnerConfig = {
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
 				messages.push({
-					// The browser's clock, when the request left: a busy runner receives
-					// the outgoing story's responses after the next story has started.
-					at: response.request().timing().startTime,
+					at: Date.now(),
 					text: `[response] ${response.status()} ${response.url()}`,
 				});
 			}

frontend/__mocks__/uplotMock.ts

@@ -48,6 +48,7 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
+const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -61,6 +62,9 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
+// Pinned so canvas-space maths in path builders is deterministic under jsdom.
+MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

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

@@ -33,6 +33,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"LIVE_LOGS": "SigNoz | Live Logs",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",

frontend/public/locales/en/titles.json

@@ -42,6 +42,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",

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

@@ -300,6 +300,14 @@ describe('PrivateRoute', () => {
 			);
 		});
 
+		it('should redirect /logs-explorer/live to /logs/logs-explorer/live', () => {
+			renderPrivateRoute({ initialRoute: '/logs-explorer/live' });
+
+			expect(screen.getByTestId('location-display')).toHaveTextContent(
+				'/logs/logs-explorer/live',
+			);
+		});
+
 		it('should redirect /logs-save-views to /logs/saved-views', () => {
 			renderPrivateRoute({ initialRoute: '/logs-save-views' });
 
@@ -1588,6 +1596,7 @@ describe('PrivateRoute', () => {
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
+			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/index.tsx

@@ -12,14 +12,13 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -59,6 +58,7 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
+		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,8 +66,6 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isSavedViewEnabled = useSavedViewEnabled();
-	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -255,9 +253,7 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
-		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
-			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -267,32 +263,71 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname, isSavedViewEnabled]);
+	}, [pathname]);
 
-	// Identity for the Pylon widget. Whether this user gets Pylon at all is
-	// `useChatSupport`'s call — this only fills in who they are.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		if (chatSupport !== ChatSupportState.Pylon) {
-			return;
+		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
+		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
+		// to something went wrong which would ideally need a reload.
+		if (
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo
+		) {
+			let isChatSupportEnabled = false;
+			let isPremiumSupportEnabled = false;
+			if (featureFlags && featureFlags.length > 0) {
+				isChatSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
+						?.active || false;
+
+				isPremiumSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
+						?.active || false;
+			}
+			const showAddCreditCardModal =
+				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
+
+			if (
+				isLoggedInState &&
+				isChatSupportEnabled &&
+				!showAddCreditCardModal &&
+				(isCloudUser || isEnterpriseSelfHostedUser) &&
+				window.signozBootData?.settings?.pylon?.enabled
+			) {
+				const email = user.email || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+				let emailHash = '';
+
+				if (email && secret) {
+					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+				}
+
+				window.pylon = {
+					chat_settings: {
+						app_id: window.signozBootData?.settings?.pylon?.appId,
+						email: user.email,
+						name: user.displayName || user.email,
+						email_hash: emailHash,
+					},
+				};
+			}
 		}
-
-		const email = user.email || '';
-		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-		let emailHash = '';
-
-		if (email && secret) {
-			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-		}
-
-		window.pylon = {
-			chat_settings: {
-				app_id: window.signozBootData?.settings?.pylon?.appId,
-				email: user.email,
-				name: user.displayName || user.email,
-				email_hash: emailHash,
-			},
-		};
-	}, [chatSupport, user]);
+	}, [
+		isLoggedInState,
+		user,
+		pathname,
+		trialInfo?.trialConvertedToSubscription,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
+		activeLicense,
+		trialInfo,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/AppRoutes/pageComponents.ts

@@ -154,6 +154,10 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
+export const LiveLogs = Loadable(
+	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
+);
+
 export const PipelinePage = Loadable(
 	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -23,6 +23,7 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
+	LiveLogs,
 	Login,
 	Logs,
 	LogsIndexToFields,
@@ -281,6 +282,13 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LIVE_LOGS,
+		exact: true,
+		component: LiveLogs,
+		key: 'LIVE_LOGS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
 		exact: true,
@@ -513,6 +521,7 @@ export const LIST_LICENSES: AppRoutes = {
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
+	'/logs-explorer/live': '/logs/logs-explorer/live',
 	'/logs-save-views': '/logs/saved-views',
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/service-accounts',

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

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
+	actions?: AlertmanagertypesChannelSlackActionDTO[];
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
+	fields?: AlertmanagertypesChannelSlackFieldDTO[];
 	/**
 	 * @type string
 	 */
@@ -166,19 +166,13 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
+export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelEmailConfigDTOHeaders =
-	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
-
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -245,16 +239,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
-	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
-
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -277,7 +265,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -319,16 +307,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
-	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
-
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -344,7 +326,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -441,16 +423,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
 	[key: string]: unknown;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
-	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
-
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -458,7 +434,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -474,9 +450,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	labels?: string[] | null;
+	labels?: string[];
 	/**
 	 * @type string
 	 */
@@ -567,23 +543,17 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
-	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
-
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**
@@ -3396,37 +3366,6 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
-export enum CloudintegrationtypesRegionStateDTO {
-	enabled = 'enabled',
-	disabled = 'disabled',
-}
-export interface CloudintegrationtypesRegionSyncStateDTO {
-	state: CloudintegrationtypesRegionStateDTO;
-}
-
-export type CloudintegrationtypesSyncStateDTORegions = {
-	[key: string]: CloudintegrationtypesRegionSyncStateDTO;
-};
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesSyncStateDTO = {
-	/**
-	 * @type boolean
-	 */
-	inSync: boolean;
-	/**
-	 * @type object
-	 */
-	regions: CloudintegrationtypesSyncStateDTORegions;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	version: number;
-} | null;
-
 export type CloudintegrationtypesAgentReportDTODataAnyOf = {
 	[key: string]: unknown;
 };
@@ -3445,7 +3384,6 @@ export type CloudintegrationtypesAgentReportDTO = {
 	 * @type object,null
 	 */
 	data: CloudintegrationtypesAgentReportDTOData;
-	syncState: CloudintegrationtypesSyncStateDTO | null;
 	/**
 	 * @type integer
 	 * @format int64
@@ -3874,7 +3812,6 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @format date-time
 	 */
 	removedAt: string | null;
-	syncState: CloudintegrationtypesSyncStateDTO | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3945,10 +3882,6 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type string
 	 */
 	providerAccountId?: string;
-	/**
-	 * @type integer,null
-	 */
-	syncedVersion?: number | null;
 }
 
 export interface CloudintegrationtypesStorableIntegrationDashboardDTO {

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -1,103 +0,0 @@
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
-
-interface AddCreditCardModalProps {
-	open: boolean;
-	onClose: () => void;
-	onAddCreditCard?: () => void;
-}
-
-/**
- * Shown to trial users who have not added a card, in place of chat support.
- * Submitting creates the subscription and opens the returned billing URL.
- */
-function AddCreditCardModal({
-	open,
-	onClose,
-	onAddCreditCard,
-}: AddCreditCardModalProps): JSX.Element {
-	const { notifications } = useNotifications();
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
-	);
-
-	const handleAddCreditCard = (): void => {
-		onAddCreditCard?.();
-		updateCreditCard({ url: getBaseUrl() });
-	};
-
-	return (
-		<Modal
-			className="add-credit-card-modal"
-			title={<span className="title">Add Credit Card for Chat Support</span>}
-			open={open}
-			closable
-			onCancel={onClose}
-			destroyOnClose
-			footer={[
-				<Button
-					key="cancel"
-					onClick={onClose}
-					className="cancel-btn"
-					icon={<X size={16} />}
-				>
-					Cancel
-				</Button>,
-				<AuthZTooltip
-					key="submit"
-					checks={[SubscriptionCreatePermission]}
-					withPortal={false}
-				>
-					<Button
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>
-				</AuthZTooltip>,
-			]}
-		>
-			<Typography.Text className="add-credit-card-text">
-				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
-				Add a credit card to access SigNoz chat support to your workspace.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
-
-export default AddCreditCardModal;

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.mocks.tsx

@@ -1,9 +0,0 @@
-import { rest } from 'msw';
-
-const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
-
-export const createSubscriptionHandlers = [
-	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
-		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
-	),
-];

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -1,54 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from '@signozhq/ui/button';
-import { screen, userEvent, within } from 'storybook/test';
-
-import { withCanvas } from '@/storybook/decorators/withCanvas';
-
-import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
-
-import AddCreditCardModal from '../AddCreditCardModal';
-
-/** Stands in for the surfaces that open it: the strip's Support button, and
- * `LaunchChatSupport` in the custom domain and onboarding flows. */
-function ModalFixture(): JSX.Element {
-	const [open, setOpen] = useState(false);
-
-	return (
-		<>
-			<Button
-				data-testid="open-add-credit-card"
-				onClick={(): void => setOpen(true)}
-			>
-				Contact support
-			</Button>
-			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
-		</>
-	);
-}
-
-const meta = {
-	title: 'Components/Add Credit Card Modal',
-	component: ModalFixture,
-	tags: ['play'],
-	decorators: [withCanvas({ maxWidth: 400 })],
-	parameters: {
-		msw: { handlers: createSubscriptionHandlers },
-	},
-} satisfies Meta<typeof ModalFixture>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/** What a trial user without a card sees in place of chat support. */
-export const Default: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.click(
-			within(canvasElement).getByTestId('open-add-credit-card'),
-		);
-		await screen.findByRole('dialog', {
-			name: /Add Credit Card for Chat Support/i,
-		});
-	},
-};

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,15 +1,63 @@
 import { useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { MessageSquareText } from '@signozhq/icons';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
+	const { notifications } = useNotifications();
+
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
 	const { pathname } = useLocation();
 
+	const handleAddCreditCard = (): void => {
+		logEvent('Add Credit card modal: Clicked', {
+			source: `chat support icon`,
+			page: pathname,
+		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
+	};
+
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -28,16 +76,47 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={(): void => {
-					logEvent('Add Credit card modal: Clicked', {
-						source: `chat support icon`,
-						page: pathname,
-					});
-				}}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</>
 	);
 }

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveAccessibleName('Download');
+		expect(button).toHaveClass('periscope-btn', 'ghost');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,12 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Popover, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Popover, Tooltip } from 'antd';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
-import { Download } from '@signozhq/icons';
+import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -112,9 +111,8 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
-					variant="solid"
-					color="primary"
-					prefix={<Download size={16} />}
+					type="primary"
+					icon={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
@@ -146,14 +144,16 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					prefix={<Download size={14} />}
-					aria-label="Download"
+					className="periscope-btn ghost"
+					icon={
+						isDownloading ? (
+							<LoaderCircle size={14} className="animate-spin" />
+						) : (
+							<Download size={14} />
+						)
+					}
 					data-testid={`periscope-btn-download-${dataSource}`}
 					disabled={isDownloading}
-					loading={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,14 +1,22 @@
 import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Tooltip } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp } from '@signozhq/icons';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -33,6 +41,7 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -110,12 +119,43 @@ function LaunchChatSupport({
 		}
 	};
 
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
+
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -135,11 +175,47 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={handleAddCreditCard}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</div>
 	) : null;
 }

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,7 +1,7 @@
 import { DrawerProps } from 'antd';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
-import { ActionItemProps } from 'container/LogDetailedView/LogDetailedView.types';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

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

@@ -19,6 +19,10 @@ jest.mock('periscope/components/DataViewer', () => ({
 }));
 
 // Force v2 for these tests regardless of route.
+jest.mock('../useIsLogDetailsV2', () => ({
+	useIsLogDetailsV2: (): boolean => true,
+}));
+
 const mockLog: ILog = {
 	id: 'log-1',
 	timestamp: '2024-01-15T09:45:30Z',
@@ -54,7 +58,7 @@ function renderDrawer(props: Partial<LogDetailProps> = {}): void {
 	);
 }
 
-describe('LogDetail drawer — header', () => {
+describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 	afterEach(() => {
 		jest.clearAllMocks();
 		localStorage.clear();

frontend/src/components/LogDetail/index.tsx

@@ -1,10 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import cx from 'classnames';
+import LogStateIndicator, {
+	LogType,
+} from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -13,24 +19,33 @@ import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import Overview from 'container/LogDetailedView/Overview';
 import {
+	aggregateAttributesResourcesToString,
 	getSanitizedLogBody,
 	removeEscapeCharacters,
 } from 'container/LogDetailedView/utils';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
 	ArrowUp,
+	Braces,
+	ChevronDown,
+	ChevronUp,
+	Compass,
+	Copy,
 	Filter,
 	Histogram,
 	Table,
 	TextSelect,
 	X,
 } from '@signozhq/icons';
+import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -41,6 +56,7 @@ import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
 import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
 import LogHighlights from './LogHighlights/LogHighlights';
+import { useIsLogDetailsV2 } from './useIsLogDetailsV2';
 
 import './LogDetails.styles.scss';
 
@@ -48,8 +64,11 @@ import './LogDetails.styles.scss';
 function LogDetailInner({
 	log,
 	onClose,
+	onAddToQuery,
+	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
+	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	logs,
 	onNavigateLog,
@@ -62,6 +81,7 @@ function LogDetailInner({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
 		initialContextQuery,
 	);
+	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
@@ -74,6 +94,8 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();
 
+	const isLogDetailsV2 = useIsLogDetailsV2();
+
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {
@@ -151,6 +173,12 @@ function LogDetailInner({
 
 	const isDarkMode = useIsDarkMode();
 
+	const { notifications } = useNotifications();
+
+	const { onLogCopy } = useCopyLogLink(log?.id);
+
+	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
+
 	const handleModeChange = (value: string): void => {
 		setSelectedView(value as VIEWS);
 		setIsEdit(false);
@@ -192,6 +220,13 @@ function LogDetailInner({
 		[logBody],
 	);
 
+	const handleJSONCopy = (): void => {
+		copyToClipboard(LogJsonData);
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};
+
 	const handleQueryExpressionChange = useCallback(
 		(value: string, queryIndex: number) => {
 			// update the query at the given index
@@ -260,6 +295,8 @@ function LogDetailInner({
 		}
 	};
 
+	const logType = log?.attributes_string?.log_level || LogType.INFO;
+
 	return (
 		<Drawer
 			width="60%"
@@ -267,15 +304,69 @@ function LogDetailInner({
 			maskClosable={false}
 			getContainer={getContainer}
 			title={
-				<LogDetailsHeader
-					log={log}
-					onNavigatePrev={goToPrev}
-					onNavigateNext={goToNext}
-					isPrevDisabled={isPrevDisabled}
-					isNextDisabled={isNextDisabled}
-					showOpenInExplorer={!!handleOpenInExplorer}
-					onOpenInExplorer={handleOpenInExplorer}
-				/>
+				isLogDetailsV2 ? (
+					<LogDetailsHeader
+						log={log}
+						onNavigatePrev={goToPrev}
+						onNavigateNext={goToNext}
+						isPrevDisabled={isPrevDisabled}
+						isNextDisabled={isNextDisabled}
+						showOpenInExplorer={!!handleOpenInExplorer}
+						onOpenInExplorer={handleOpenInExplorer}
+					/>
+				) : (
+					<div className="log-detail-drawer__title" data-log-detail-ignore="true">
+						<div className="log-detail-drawer__title-left">
+							<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
+							<Typography.Text className="title">Log details</Typography.Text>
+						</div>
+						<div className="log-detail-drawer__title-right">
+							<div className="log-arrows">
+								<Tooltip
+									title={isPrevDisabled ? '' : 'Move to previous log'}
+									placement="top"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<ChevronUp size={14} />}
+										className="log-arrow-btn log-arrow-btn-up"
+										disabled={isPrevDisabled}
+										onClick={goToPrev}
+									/>
+								</Tooltip>
+								<Tooltip
+									title={isNextDisabled ? '' : 'Move to next log'}
+									placement="top"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<ChevronDown size={14} />}
+										className="log-arrow-btn log-arrow-btn-down"
+										disabled={isNextDisabled}
+										onClick={goToNext}
+									/>
+								</Tooltip>
+							</div>
+							{handleOpenInExplorer && (
+								<div>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<Compass size={16} />}
+										className="open-in-explorer-btn"
+										onClick={handleOpenInExplorer}
+									>
+										Open in Explorer
+									</Button>
+								</div>
+							)}
+						</div>
+					</div>
+				)
 			}
 			placement="right"
 			onClose={drawerCloseHandler}
@@ -294,11 +385,15 @@ function LogDetailInner({
 				data-testid="log-detail-drawer"
 			>
 				<div className="log-detail-drawer__log">
-					<LogStateIndicator
-						severityText={log.severity_text}
-						severityNumber={log.severity_number}
-						fontSize={options?.fontSize ?? FontSize.MEDIUM}
-					/>
+					{isLogDetailsV2 ? (
+						<LogStateIndicator
+							severityText={log.severity_text}
+							severityNumber={log.severity_number}
+							fontSize={options?.fontSize ?? FontSize.MEDIUM}
+						/>
+					) : (
+						<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					)}
 					<Tooltip
 						title={removeEscapeCharacters(logBody)}
 						placement="left"
@@ -310,9 +405,9 @@ function LogDetailInner({
 					<div className="log-overflow-shadow">&nbsp;</div>
 				</div>
 
-				<LogHighlights log={log} />
+				{isLogDetailsV2 && <LogHighlights log={log} />}
 
-				<div className="log-detail-drawer__section-divider" />
+				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
 
 				<div className="tabs-and-search">
 					<ToggleGroupSimple
@@ -330,6 +425,21 @@ function LogDetailInner({
 									</div>
 								),
 							},
+							// V2's DataViewer has its own Pretty/JSON toggle, so the separate
+							// JSON tab is redundant.
+							...(isLogDetailsV2
+								? []
+								: [
+										{
+											value: VIEW_TYPES.JSON,
+											label: (
+												<div className="view-title">
+													<Braces size={14} />
+													JSON
+												</div>
+											),
+										},
+									]),
 							{
 								value: VIEW_TYPES.CONTEXT,
 								label: (
@@ -368,6 +478,26 @@ function LogDetailInner({
 								/>
 							</Tooltip>
 						)}
+
+						{/* V2 moves copy actions into the header ⋯ menu */}
+						{!isLogDetailsV2 && (
+							<Tooltip
+								title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+								placement="topLeft"
+								aria-label={
+									selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+								}
+								mouseLeaveDelay={0}
+							>
+								<Button
+									variant="link"
+									color="secondary"
+									size="sm"
+									prefix={<Copy size={12} />}
+									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+								/>
+							</Tooltip>
+						)}
 					</div>
 				</div>
 				{isFilterVisible && contextQuery?.builder.queryData[0] && (
@@ -384,11 +514,19 @@ function LogDetailInner({
 				{selectedView === VIEW_TYPES.OVERVIEW && (
 					<Overview
 						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
 						isListViewPanel={isListViewPanel}
+						selectedOptions={options}
+						listViewPanelSelectedFields={listViewPanelSelectedFields}
 						handleChangeSelectedView={handleChangeSelectedView}
 						onApplyLogFilter={onApplyLogFilter}
 					/>
 				)}
+				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (
+					<JsonView data={LogJsonData} height="68vh" />
+				)}
+
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView
 						log={log}

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -0,0 +1,11 @@
+import ROUTES from 'constants/routes';
+import { useLocation } from 'react-router-dom';
+
+export function useIsLogDetailsV2(): boolean {
+	const { pathname } = useLocation();
+	return (
+		pathname === ROUTES.LOGS_EXPLORER ||
+		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
+		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
+	);
+}

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -0,0 +1,54 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Popover } from 'antd';
+import { useNotifications } from 'hooks/useNotifications';
+
+function CopyClipboardHOC({
+	entityKey,
+	textToCopy,
+	tooltipText = 'Copy to clipboard',
+	children,
+}: CopyClipboardHOCProps): JSX.Element {
+	const [value, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+	useEffect(() => {
+		if (value.value) {
+			const key = entityKey || '';
+
+			const notificationMessage = `${key} copied to clipboard`;
+
+			notifications.success({
+				message: notificationMessage,
+				key: notificationMessage,
+			});
+		}
+	}, [value, notifications, entityKey]);
+
+	const onClick = useCallback((): void => {
+		setCopy(textToCopy);
+	}, [setCopy, textToCopy]);
+
+	return (
+		<span onClick={onClick} role="presentation" tabIndex={-1}>
+			<Popover
+				placement="top"
+				overlayClassName="drawer-popover"
+				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
+			>
+				{children}
+			</Popover>
+		</span>
+	);
+}
+
+interface CopyClipboardHOCProps {
+	entityKey: string | undefined;
+	textToCopy: string;
+	tooltipText?: string;
+	children: ReactNode;
+}
+
+export default CopyClipboardHOC;
+CopyClipboardHOC.defaultProps = {
+	tooltipText: 'Copy to clipboard',
+};

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/stories/__story_mockdata__/querySearch.play.ts

@@ -1,229 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { userEvent, waitFor, within } from 'storybook/test';
-
-/** Suggestions wait on a 300ms debounce and a fetch, past the 1s default. */
-const untilLoaded = { timeout: 15_000 };
-
-/** Throws until `found` holds something, which is what `waitFor` retries on. */
-const present = <TValue>(
-	found: TValue | null | undefined,
-	what: string,
-): TValue => {
-	if (found === null || found === undefined) {
-		throw new Error(`${what} not found`);
-	}
-
-	return found;
-};
-
-const suggestionList = (canvasElement: HTMLElement): HTMLElement | null =>
-	canvasElement.querySelector<HTMLElement>('.cm-tooltip-autocomplete');
-
-const suggestionRow = (
-	canvasElement: HTMLElement,
-	text: string,
-): HTMLElement | undefined => {
-	const list = suggestionList(canvasElement);
-
-	return list
-		? within(list)
-				.queryAllByRole('option')
-				.find((option) => option.textContent?.includes(text))
-		: undefined;
-};
-
-/** Ctrl+Space, the editor's own shortcut for asking for suggestions. */
-const requestSuggestions = (editor: HTMLElement): void => {
-	editor.dispatchEvent(
-		new KeyboardEvent('keydown', {
-			key: ' ',
-			code: 'Space',
-			ctrlKey: true,
-			bubbles: true,
-		}),
-	);
-};
-
-const currentView = (
-	canvasElement: HTMLElement,
-): { editor: HTMLElement; view: EditorView } => {
-	// An explorer renders one editor per query; the first is the one on screen.
-	const editor = present(
-		canvasElement.querySelector<HTMLElement>(
-			'.code-mirror-where-clause .cm-content',
-		),
-		'filter editor',
-	);
-
-	return {
-		editor,
-		view: present(EditorView.findFromDOM(editor), 'editor view'),
-	};
-};
-
-/**
- * The explorers wrap the filter in `OverlayScrollbar`, which initialises when
- * the browser is idle. Initialising moves the content, the editor with it, and
- * focuses the editor again through the DOM, which puts the caret back at the
- * start and swaps the suggestions for the key list. Throws until every wrapper
- * around the filter has initialised.
- */
-const assertScrollbarsReady = (editor: HTMLElement): void => {
-	for (
-		let wrapper = editor.closest('.overlay-scrollbar');
-		wrapper;
-		wrapper = wrapper.parentElement?.closest('.overlay-scrollbar') ?? null
-	) {
-		if (!wrapper.hasAttribute('data-overlayscrollbars')) {
-			throw new Error('scrollbars around the filter still initialising');
-		}
-	}
-};
-
-/**
- * Waits until `text` shows in the suggestion list, asking for suggestions
- * whenever the list is shut. Focus and typing only open it once the keys have
- * loaded, and moving the caret never does.
- */
-const waitForSuggestion = (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<HTMLElement> =>
-	waitFor(
-		() => {
-			const { editor } = currentView(canvasElement);
-
-			if (!suggestionList(canvasElement)) {
-				requestSuggestions(editor);
-			}
-
-			return present(suggestionRow(canvasElement, text), `suggestion "${text}"`);
-		},
-		{ ...untilLoaded, interval: 250 },
-	);
-
-/**
- * Focuses the filter once the scrollbars around it have initialised, and waits
- * for its suggestion list.
- */
-const focusFilter = async (canvasElement: HTMLElement): Promise<EditorView> => {
-	await waitFor(
-		() => {
-			const { editor, view } = currentView(canvasElement);
-
-			assertScrollbarsReady(editor);
-
-			if (!view.hasFocus) {
-				view.focus();
-			}
-
-			if (!suggestionList(canvasElement)) {
-				requestSuggestions(editor);
-			}
-
-			return present(suggestionList(canvasElement), 'suggestion list');
-		},
-		{ ...untilLoaded, interval: 250 },
-	);
-
-	return currentView(canvasElement).view;
-};
-
-/** Waits for a row of the suggestion list. */
-export const findSuggestion = (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<HTMLElement> => waitForSuggestion(canvasElement, text);
-
-/** Focuses the empty filter: every key, with any recent filters above them. */
-export const openKeySuggestions = async (
-	canvasElement: HTMLElement,
-	row: string,
-): Promise<void> => {
-	await focusFilter(canvasElement);
-	await waitForSuggestion(canvasElement, row);
-};
-
-/**
- * Focuses the filter and types onto the end of it one character at a time,
- * each as the transaction a keystroke makes, leaving the caret at the end so
- * the suggestion list follows what was typed. Quotes and brackets are not
- * closed for it: type both.
- *
- * `userEvent.type` cannot be used: CodeMirror redraws the line as tokens are
- * highlighted, which strands the caret `userEvent` tracks.
- */
-export const typeFilter = async (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<void> => {
-	const view = await focusFilter(canvasElement);
-
-	for (const character of text) {
-		const at = view.state.doc.length;
-
-		view.dispatch({
-			changes: { from: at, insert: character },
-			selection: { anchor: at + character.length },
-			userEvent: 'input.type',
-		});
-	}
-};
-
-/**
- * Types an expression, then steps the caret back inside it, before a closing
- * bracket or parenthesis, where the suggestions are about what goes in there.
- */
-export const typeFilterWithCaretBack = async (
-	canvasElement: HTMLElement,
-	text: string,
-	stepsBack: number,
-	row: string,
-): Promise<void> => {
-	await typeFilter(canvasElement, text);
-
-	const { view } = currentView(canvasElement);
-
-	view.dispatch({
-		selection: { anchor: view.state.doc.length - stepsBack },
-		userEvent: 'select',
-	});
-	await waitForSuggestion(canvasElement, row);
-};
-
-/**
- * Moves focus off the filter, which is when the expression is validated and
- * the error marker can show.
- */
-export const blurFilter = async (canvasElement: HTMLElement): Promise<void> => {
-	await userEvent.keyboard('{Escape}');
-	await userEvent.click(canvasElement.ownerDocument.body);
-};
-
-/** Types an expression, leaves the filter and opens its validation errors. */
-export const showFilterErrors = async (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<void> => {
-	await typeFilter(canvasElement, text);
-	await blurFilter(canvasElement);
-
-	const marker = await waitFor(
-		() =>
-			present(
-				canvasElement.querySelector<HTMLElement>('.query-status-container button'),
-				'error marker',
-			),
-		untilLoaded,
-	);
-
-	await userEvent.hover(marker);
-	await waitFor(
-		() =>
-			present(
-				canvasElement.ownerDocument.querySelector('.query-validation-error'),
-				'validation error',
-			),
-		untilLoaded,
-	);
-};

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -233,23 +233,12 @@ function TanStackTableInner<TData, TItemKey = string>(
 		[effectiveColumns],
 	);
 
-	// A rebuilt column def is a new cell component to React, which remounts every
-	// cell it renders. Read the row callbacks through refs so inline ones do not.
-	const isRowActiveRef = useRef(isRowActive);
-	isRowActiveRef.current = isRowActive;
-	const getRowKeyDataRef = useRef(getRowKeyData);
-	getRowKeyDataRef.current = getRowKeyData;
-
 	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
 		() =>
 			effectiveColumns.map((colDef) =>
-				buildTanstackColumnDef<TData, TItemKey>(
-					colDef,
-					(row) => isRowActiveRef.current?.(row) ?? false,
-					(index) => getRowKeyDataRef.current(index),
-				),
+				buildTanstackColumnDef<TData, TItemKey>(colDef, isRowActive, getRowKeyData),
 			),
-		[effectiveColumns],
+		[effectiveColumns, isRowActive, getRowKeyData],
 	);
 
 	const getRowId = useCallback(

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

@@ -1,16 +1,8 @@
-import { useEffect, useState } from 'react';
 import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UrlUpdateEvent } from 'nuqs/adapters/testing';
 
-import TanStackTable from '../index';
-import type { TableColumnDef } from '../types';
-import {
-	defaultData,
-	renderTanStackTable,
-	renderWithProviders,
-	type TestRow,
-} from './testUtils';
+import { renderTanStackTable } from './testUtils';
 
 jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
@@ -818,58 +810,6 @@ describe('TanStackTableView Integration', () => {
 		});
 	});
 
-	describe('cell identity', () => {
-		it('keeps cells mounted across re-renders that pass new inline row callbacks', async () => {
-			const user = userEvent.setup();
-			const onMount = jest.fn();
-
-			function MountTracker({ id }: { id: string }): JSX.Element {
-				useEffect(() => onMount(id), [id]);
-				return <span data-testid={`tracked-${id}`}>Row {id}</span>;
-			}
-
-			const columns: TableColumnDef<TestRow>[] = [
-				{
-					id: 'id',
-					header: 'ID',
-					accessorKey: 'id',
-					cell: ({ row }): JSX.Element => <MountTracker id={row.id} />,
-				},
-			];
-
-			function Harness(): JSX.Element {
-				const [, setRenders] = useState(0);
-
-				return (
-					<>
-						<button
-							type="button"
-							data-testid="rerender"
-							onClick={(): void => setRenders((count) => count + 1)}
-						>
-							Re-render
-						</button>
-						<TanStackTable<TestRow>
-							data={defaultData}
-							columns={columns}
-							getRowKey={(row): string => row.id}
-							isRowActive={(row): boolean => row.id === '1'}
-						/>
-					</>
-				);
-			}
-
-			renderWithProviders(<Harness />);
-			await screen.findByTestId('tracked-2');
-			onMount.mockClear();
-
-			await user.click(screen.getByTestId('rerender'));
-			await user.hover(screen.getByTestId('tracked-2'));
-
-			expect(onMount).not.toHaveBeenCalled();
-		});
-	});
-
 	describe('disableVirtualScroll', () => {
 		it('throws error when used with onEndReached', () => {
 			expect(() => {

frontend/src/constants/localStorage.ts

@@ -47,5 +47,4 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
-	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/routes.ts

@@ -38,6 +38,7 @@ const ROUTES = {
 	LOGS_BASE: '/logs',
 	LOGS: '/logs/logs-explorer',
 	LOGS_EXPLORER: '/logs/logs-explorer',
+	LIVE_LOGS: '/logs/logs-explorer/live',
 	LOGS_PIPELINES: '/logs/pipelines',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.module.scss

@@ -75,38 +75,6 @@
 	word-break: break-word;
 }
 
-// Error bubble: a subtle error-tinted callout replacing the default
-// assistant background, rendered when a turn fails.
-.bubble.error {
-	.assistant & {
-		background: var(--callout-error-background);
-		border: 1px solid var(--callout-error-border);
-	}
-}
-
-.errorContent {
-	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-}
-
-.errorIcon {
-	flex-shrink: 0;
-	margin-top: 2px;
-	color: var(--destructive);
-}
-
-.errorText {
-	color: var(--callout-error-title);
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.retryButton {
-	margin-top: 6px;
-	align-self: flex-start;
-}
-
 // User-bubble row: pencil button sits to the LEFT of the bubble within
 // the right-aligned message line, so it visually "ends" at the bubble's
 // right edge while keeping the bubble in its original position.

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -2,10 +2,6 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Button } from '@signozhq/ui/button';
-import { RotateCw, TriangleAlert } from '@signozhq/icons';
-
-import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 // Side-effect: registers all built-in block types into the BlockRegistry
 import '../blocks';
@@ -108,23 +104,18 @@ function renderGroup(group: RenderGroup): JSX.Element {
 interface MessageBubbleProps {
 	message: Message;
 	onRegenerate?: () => void;
-	onRetry?: () => void;
 	isLastAssistant?: boolean;
 }
 
 export default function MessageBubble({
 	message,
 	onRegenerate,
-	onRetry,
 	isLastAssistant = false,
 }: MessageBubbleProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
 	const isUser = message.role === 'user';
-	const isError = !isUser && Boolean(message.isError);
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
-	const showRetry =
-		isError && message.retryAction === RetryActionDTO.manual && Boolean(onRetry);
 
 	// Recompute groups only when the blocks array identity changes — store
 	// updates that don't touch this message's blocks should not re-render the
@@ -147,7 +138,7 @@ export default function MessageBubble({
 		<div className={messageClass} data-testid={`ai-message-${message.id}`}>
 			<div className={bodyClass}>
 				<div className={styles.bubbleRow}>
-					<div className={cx(styles.bubble, { [styles.error]: isError })}>
+					<div className={styles.bubble}>
 						{message.attachments && message.attachments.length > 0 && (
 							<div className={styles.attachments}>
 								{message.attachments.map((att) => {
@@ -170,11 +161,6 @@ export default function MessageBubble({
 
 						{isUser ? (
 							<p className={styles.text}>{message.content}</p>
-						) : isError ? (
-							<div className={styles.errorContent}>
-								<TriangleAlert size={14} className={styles.errorIcon} />
-								<span className={styles.errorText}>{message.content}</span>
-							</div>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
 								{groups.map((g) => renderGroup(g))}
@@ -197,21 +183,7 @@ export default function MessageBubble({
 					</div>
 				</div>
 
-				{showRetry && (
-					<Button
-						className={styles.retryButton}
-						size="sm"
-						variant="ghost"
-						color="secondary"
-						onClick={onRetry}
-						testId={`ai-message-retry-${message.id}`}
-					>
-						<RotateCw size={12} />
-						Retry
-					</Button>
-				)}
-
-				{!isUser && !isError && !message.isRateLimitError && (
+				{!isUser && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}

frontend/src/container/AIAssistant/components/MessageBubble/__tests__/MessageBubble.test.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent } from 'tests/test-utils';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { Message } from '../../../types';
-
-// react-markdown + remark-gfm are ESM-only and pull a large untransformed
-// dependency chain into jest. The error-rendering path under test renders
-// plain text (no markdown), so stub them to keep the import graph loadable.
-jest.mock('react-markdown', () => ({
-	__esModule: true,
-	default: ({ children }: { children?: React.ReactNode }): React.ReactNode =>
-		children,
-}));
-jest.mock('remark-gfm', () => ({
-	__esModule: true,
-	default: (): void => undefined,
-}));
-
-// eslint-disable-next-line import/first
-import MessageBubble from '../MessageBubble';
-
-function errorMessage(overrides: Partial<Message> = {}): Message {
-	return {
-		id: 'err-1',
-		role: 'assistant',
-		content: 'This conversation is still finishing a previous response.',
-		isError: true,
-		errorCode: ErrorCodeDTO.thread_busy,
-		retryAction: RetryActionDTO.manual,
-		createdAt: 0,
-		...overrides,
-	};
-}
-
-const retryButton = (): HTMLElement | null =>
-	screen.queryByRole('button', { name: /retry/i });
-
-describe('MessageBubble — error rendering', () => {
-	it('shows a Retry button for a manual error and invokes onRetry on click', async () => {
-		const onRetry = jest.fn();
-		render(<MessageBubble message={errorMessage()} onRetry={onRetry} />);
-
-		// Error copy is rendered, and the feedback bar is suppressed on errors.
-		expect(
-			screen.getByText(/still finishing a previous response/i),
-		).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /copy message/i }),
-		).not.toBeInTheDocument();
-
-		const button = retryButton();
-		expect(button).toBeInTheDocument();
-		await userEvent.click(button as HTMLElement);
-		expect(onRetry).toHaveBeenCalledTimes(1);
-	});
-
-	it('hides the Retry button when retryAction is none', () => {
-		render(
-			<MessageBubble
-				message={errorMessage({ retryAction: RetryActionDTO.none })}
-				onRetry={jest.fn()}
-			/>,
-		);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-
-	it('hides the Retry button when retryAction is auto', () => {
-		render(
-			<MessageBubble
-				message={errorMessage({ retryAction: RetryActionDTO.auto })}
-				onRetry={jest.fn()}
-			/>,
-		);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-
-	it('hides the Retry button when no onRetry handler is provided', () => {
-		render(<MessageBubble message={errorMessage()} />);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-});

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx

@@ -37,9 +37,6 @@ export default function VirtualizedMessages({
 	const regenerateAssistantMessage = useAIAssistantStore(
 		(s) => s.regenerateAssistantMessage,
 	);
-	const retryAssistantMessage = useAIAssistantStore(
-		(s) => s.retryAssistantMessage,
-	);
 	const { threadId } = useAIAssistantAnalyticsContext(conversationId);
 	const streamingStatus = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.streamingStatus ?? '',
@@ -88,14 +85,6 @@ export default function VirtualizedMessages({
 		[conversationId, isStreaming, regenerateAssistantMessage, threadId],
 	);
 
-	const handleRetry = useCallback((): void => {
-		if (isStreaming) {
-			return;
-		}
-		void logEvent(AIAssistantEvents.RetryClicked, { threadId });
-		void retryAssistantMessage(conversationId);
-	}, [conversationId, isStreaming, retryAssistantMessage, threadId]);
-
 	// Scroll all the way to the actual bottom — including the 64px of bottom
 	// padding on the scroller — so the last bubble has visible breathing room
 	// above the disclaimer / input bar. Virtuoso's `scrollToIndex(LAST,
@@ -217,11 +206,6 @@ export default function VirtualizedMessages({
 									? (): void => handleRegenerate(msg.id)
 									: undefined
 							}
-							onRetry={
-								msg.isError && isLastAssistant && !showStreamingSlot
-									? handleRetry
-									: undefined
-							}
 							isLastAssistant={isLastAssistant}
 						/>
 					);

frontend/src/container/AIAssistant/events.ts

@@ -90,7 +90,6 @@ export enum AIAssistantEvents {
 	SuggestedPromptClicked = 'AI Assistant: Suggested prompt clicked',
 	CancelClicked = 'AI Assistant: Cancel clicked',
 	RegenerateClicked = 'AI Assistant: Regenerate clicked',
-	RetryClicked = 'AI Assistant: Retry clicked',
 	MessageCopied = 'AI Assistant: Message copied',
 	FeedbackSubmitted = 'AI Assistant: Feedback submitted',
 	ResourceOpened = 'AI Assistant: Resource opened',

frontend/src/container/AIAssistant/store/__tests__/useAIAssistantStore.test.ts

@@ -1,263 +0,0 @@
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import type { SSEEvent } from 'api/ai-assistant/chat';
-
-import { useAIAssistantStore } from '../useAIAssistantStore';
-import type { Message } from '../../types';
-
-// The store talks to the chat API only through these named exports. Mock the
-// whole module so we can drive the SSE stream + REST calls deterministically.
-jest.mock('api/ai-assistant/chat', () => ({
-	__esModule: true,
-	createThread: jest.fn(),
-	sendMessage: jest.fn(),
-	streamEvents: jest.fn(),
-	approveExecution: jest.fn(),
-	clarifyExecution: jest.fn(),
-	regenerateMessage: jest.fn(),
-	rejectExecution: jest.fn(),
-	cancelExecution: jest.fn(),
-	listThreads: jest.fn(),
-	getThreadDetail: jest.fn(),
-	updateThread: jest.fn(),
-	submitFeedback: jest.fn(),
-}));
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-const chat = jest.requireMock('api/ai-assistant/chat') as Record<
-	string,
-	jest.Mock
->;
-
-// Builds a single-use async stream from a fixed list of SSE events.
-async function* eventStream(events: SSEEvent[]): AsyncGenerator<SSEEvent> {
-	for (const event of events) {
-		yield event;
-	}
-}
-
-function errorEvent(
-	executionId: string,
-	code: ErrorCodeDTO,
-	retryAction: RetryActionDTO,
-): SSEEvent {
-	return {
-		type: 'error',
-		executionId,
-		error: { code, message: 'backend message' },
-		retryAction,
-	};
-}
-
-function lastMessage(conversationId: string): Message {
-	const conv = useAIAssistantStore.getState().conversations[conversationId];
-	return conv.messages[conv.messages.length - 1];
-}
-
-describe('useAIAssistantStore — streaming error handling', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAIAssistantStore.setState((s) => {
-			s.conversations = {};
-			s.streams = {};
-			s.activeConversationId = null;
-		});
-	});
-
-	it('commits a manually-retryable error bubble with friendly copy and metadata', async () => {
-		chat.createThread.mockResolvedValue('thread-1');
-		chat.sendMessage.mockResolvedValue('exec-1');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hello');
-
-		const conv = useAIAssistantStore.getState().conversations['thread-1'];
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			isError: true,
-			errorCode: ErrorCodeDTO.thread_busy,
-			retryAction: RetryActionDTO.manual,
-		});
-		// Code-specific FE copy, not the raw backend message.
-		expect(conv.messages[1].content).toContain(
-			'still finishing a previous response',
-		);
-	});
-
-	it('replays the send on retry without re-pushing the user message', async () => {
-		chat.createThread.mockResolvedValue('thread-1');
-		chat.sendMessage.mockResolvedValue('exec-1');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hello');
-
-		// The retry succeeds this time.
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				{
-					type: 'message',
-					executionId: 'exec-1',
-					messageId: 'm1',
-					delta: 'Hi there',
-					done: true,
-				},
-			]),
-		);
-
-		await useAIAssistantStore.getState().retryAssistantMessage('thread-1');
-
-		const conv = useAIAssistantStore.getState().conversations['thread-1'];
-		// Error bubble replaced by the assistant reply; the user message stays.
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			content: 'Hi there',
-		});
-		expect(conv.messages[1].isError).toBeUndefined();
-		// Thread already existed on retry; the user message was never re-sent as new.
-		expect(chat.createThread).toHaveBeenCalledTimes(1);
-		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
-	});
-
-	it('silently retries auto-flagged errors, then downgrades to manual once spent', async () => {
-		chat.createThread.mockResolvedValue('thread-2');
-		chat.sendMessage.mockResolvedValue('exec');
-		// Always auto-retryable: 1 initial attempt + MAX_AUTO_RETRIES (2) = 3 sends.
-		chat.streamEvents.mockImplementation(() =>
-			eventStream([
-				errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		expect(chat.sendMessage).toHaveBeenCalledTimes(3);
-		expect(lastMessage('thread-2')).toMatchObject({
-			isError: true,
-			errorCode: ErrorCodeDTO.internal_error,
-			// Auto budget exhausted → presented as manual so a Retry button shows.
-			retryAction: RetryActionDTO.manual,
-		});
-	}, 10000);
-
-	it('marks rate-limit errors and offers no retry', async () => {
-		chat.createThread.mockResolvedValue('thread-3');
-		chat.sendMessage.mockResolvedValue('exec');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec', ErrorCodeDTO.hourly_message_limit, RetryActionDTO.none),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		expect(lastMessage('thread-3')).toMatchObject({
-			isError: true,
-			isRateLimitError: true,
-			retryAction: RetryActionDTO.none,
-		});
-
-		// No retry thunk registered for a non-retryable error — retry is a no-op.
-		const before =
-			useAIAssistantStore.getState().conversations['thread-3'].messages.length;
-		await useAIAssistantStore.getState().retryAssistantMessage('thread-3');
-		expect(
-			useAIAssistantStore.getState().conversations['thread-3'].messages,
-		).toHaveLength(before);
-	});
-
-	it('recovers silently when an auto-flagged error succeeds on retry', async () => {
-		chat.createThread.mockResolvedValue('thread-4');
-		chat.sendMessage.mockResolvedValue('exec');
-		chat.streamEvents
-			.mockReturnValueOnce(
-				eventStream([
-					errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
-				]),
-			)
-			.mockReturnValueOnce(
-				eventStream([
-					{
-						type: 'message',
-						executionId: 'exec',
-						messageId: 'm1',
-						delta: 'Recovered',
-						done: true,
-					},
-				]),
-			);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		// 1 initial attempt + 1 silent auto retry, then success — no error bubble.
-		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
-		const conv = useAIAssistantStore.getState().conversations['thread-4'];
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hi' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			content: 'Recovered',
-		});
-		expect(conv.messages.some((m) => m.isError)).toBe(false);
-	}, 10000);
-
-	it('replays the originating action on retry for a non-send error (approve)', async () => {
-		chat.approveExecution.mockResolvedValue('exec-a');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-a', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		const convId = useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().approveAction(convId, 'approval-1');
-
-		expect(lastMessage(convId)).toMatchObject({
-			isError: true,
-			retryAction: RetryActionDTO.manual,
-		});
-		expect(chat.approveExecution).toHaveBeenCalledTimes(1);
-
-		// Retry replays the approval (not a send) and succeeds this time.
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				{
-					type: 'message',
-					executionId: 'exec-a',
-					messageId: 'm1',
-					delta: 'Approved',
-					done: true,
-				},
-			]),
-		);
-		await useAIAssistantStore.getState().retryAssistantMessage(convId);
-
-		const conv = useAIAssistantStore.getState().conversations[convId];
-		expect(conv.messages).toHaveLength(1);
-		expect(conv.messages[0]).toMatchObject({
-			role: 'assistant',
-			content: 'Approved',
-		});
-		expect(conv.messages[0].isError).toBeUndefined();
-		expect(chat.approveExecution).toHaveBeenCalledTimes(2);
-		expect(chat.sendMessage).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/AIAssistant/store/useAIAssistantStore.ts

@@ -8,7 +8,6 @@ import type {
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 import {
 	approveExecution,
@@ -36,10 +35,7 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
-import {
-	resolveAssistantError,
-	type AssistantErrorResolution,
-} from '../utils/resolveAssistantError';
+import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';
 
 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -60,15 +56,6 @@ interface SSEStreamCtx {
 
 const streamControllers = new Map<string, AbortController>();
 
-/**
- * Per-conversation retry thunks for the most recent failed turn. Populated by
- * `finalizeStreamingError` when the error is manually retryable; consumed by
- * the `retryAssistantMessage` action when the user clicks Retry. Transient
- * (not persisted) — it shares the in-memory lifetime of the error bubble it
- * backs, so a page reload drops both together.
- */
-const retryRegistry = new Map<string, () => Promise<void>>();
-
 function abortStream(conversationId: string): void {
 	const ctrl = streamControllers.get(conversationId);
 	if (ctrl) {
@@ -210,7 +197,7 @@ function resetStreamingState(
  * Marker thrown by `runStreamingLoop` when an SSE event reports
  * `invalid_token`. Callers that own an originating action (sendMessage /
  * approve / clarify / regenerate) catch this and re-issue that action via
- * `streamWithRetry`; the retry's first REST call will 401, at which point
+ * `streamWithAuthRetry`; the retry's first REST call will 401, at which point
  * the shared axios `interceptorRejected` rotates the access token and replays.
  */
 class AuthExpiredError extends Error {
@@ -220,50 +207,27 @@ class AuthExpiredError extends Error {
 	}
 }
 
-/** Capped silent re-attempts for backend-flagged transient (`auto`) errors. */
-const MAX_AUTO_RETRIES = 2;
-/** Backoff before each auto re-attempt, indexed by prior auto-retry count. */
-const AUTO_RETRY_BACKOFF_MS = [500, 1500];
-
-function delay(ms: number): Promise<void> {
-	return new Promise((resolve) => {
-		setTimeout(resolve, ms);
-	});
-}
-
-/** True when the SSE error carries the backend's `retryAction: 'auto'` flag. */
-function isAutoRetryableError(err: unknown): boolean {
-	return (
-		(err as { retryAction?: unknown } | undefined)?.retryAction ===
-		RetryActionDTO.auto
-	);
-}
-
 /**
  * Runs the originating action (e.g. sendMessage POST) and streams the
- * resulting execution, with two independent retry budgets:
- *
- *   • Auth — on `AuthExpiredError` (SSE `invalid_token`), re-issues `start`
- *     once. The retry's REST call 401s, the shared axios interceptor rotates
- *     the access token + replays, and the new SSE picks up the rotated token.
- *     Backend flags `invalid_token` as `manual`, so only a fresh execution helps.
- *   • Auto — on an SSE error the backend flagged `retryAction: 'auto'`
- *     (transient), silently re-issues `start` up to `MAX_AUTO_RETRIES` times
- *     with backoff. Once exhausted the error propagates so the caller can
- *     surface a manual Retry affordance.
- *
- * Both reset the stream state before re-attempting so a dead execution's
- * partial output isn't concatenated onto the retry.
+ * resulting execution. On `AuthExpiredError`, re-issues `start` once — the
+ * retry's REST call hits 401, the shared axios interceptor rotates the
+ * access token and replays, and the new SSE picks up the rotated token from
+ * localStorage. Backend signals `retryAction: 'manual'` for `invalid_token`,
+ * so the dead execution can't be resumed — only a fresh one helps.
  */
-async function streamWithRetry(
+async function streamWithAuthRetry(
 	conversationId: string,
 	start: () => Promise<string>,
 	set: StoreSetter,
 ): Promise<void> {
-	let authRetried = false;
-	let autoRetries = 0;
-
-	for (;;) {
+	for (let attempt = 0; attempt <= 1; attempt += 1) {
+		if (attempt > 0) {
+			// Drop any partial content/events from the previous attempt so the
+			// retried execution's stream isn't concatenated with the dead one.
+			set((s) => {
+				resetStreamingState(s, conversationId);
+			});
+		}
 		// eslint-disable-next-line no-await-in-loop
 		const executionId = await start();
 		const ctrl = newStreamController(conversationId);
@@ -278,28 +242,10 @@ async function streamWithRetry(
 			return;
 		} catch (err) {
 			streamControllers.delete(conversationId);
-
-			if (err instanceof AuthExpiredError && !authRetried) {
-				authRetried = true;
-			} else if (isAutoRetryableError(err) && autoRetries < MAX_AUTO_RETRIES) {
-				// eslint-disable-next-line no-await-in-loop
-				await delay(AUTO_RETRY_BACKOFF_MS[autoRetries] ?? 1500);
-				autoRetries += 1;
-			} else {
-				if (isAutoRetryableError(err)) {
-					// Auto-retry budget spent — present the failure as manually
-					// retryable so the caller surfaces a Retry button rather than
-					// silently giving up.
-					(err as { retryAction?: RetryActionDTO }).retryAction =
-						RetryActionDTO.manual;
-				}
-				throw err;
+			if (err instanceof AuthExpiredError && attempt < 1) {
+				continue;
 			}
-
-			// Drop partial content/events from the failed attempt before retrying.
-			set((s) => {
-				resetStreamingState(s, conversationId);
-			});
+			throw err;
 		}
 	}
 }
@@ -312,7 +258,7 @@ async function streamWithRetry(
  *
  * On an `invalid_token` error event (e.g. MCP auth expired mid-execution),
  * throws `AuthExpiredError` so the caller can re-issue the originating
- * action via `streamWithRetry`. We don't refresh here ourselves — the
+ * action via `streamWithAuthRetry`. We don't refresh here ourselves — the
  * retry's REST call will 401 and the shared axios `interceptorRejected`
  * handles rotation + replay. Throws on any other `error` event — the
  * caller's catch block handles UI feedback.
@@ -538,37 +484,20 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
-/**
- * Commits a failed turn as an error message and removes the stream entry.
- * When the failure is manually retryable and a `retry` thunk is supplied, the
- * thunk is stashed in `retryRegistry` so the bubble's Retry button can replay
- * the originating action.
- */
 function finalizeStreamingError(
 	conversationId: string,
-	resolution: AssistantErrorResolution,
+	errorContent: string,
 	set: StoreSetter,
-	retry?: () => Promise<void>,
+	isRateLimit = false,
 ): void {
-	const { message, code, retryAction, isRateLimit } = resolution;
-
-	if (retryAction === RetryActionDTO.manual && retry) {
-		retryRegistry.set(conversationId, retry);
-	} else {
-		retryRegistry.delete(conversationId);
-	}
-
 	set((s) => {
 		const conv = s.conversations[conversationId];
 		if (conv) {
 			conv.messages.push({
 				id: uuidv4(),
 				role: 'assistant',
-				content: message,
+				content: errorContent,
 				createdAt: Date.now(),
-				isError: true,
-				retryAction,
-				...(code ? { errorCode: code } : {}),
 				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
@@ -577,40 +506,6 @@ function finalizeStreamingError(
 	});
 }
 
-/**
- * Shared streaming wrapper for actions that have no pre-stream setup beyond
- * resetting state (approve / clarify / regenerate). Streams the execution,
- * finalizes the message on success, and on failure resolves the error +
- * registers `retry` (the caller's own re-invocation) so the bubble can replay
- * it. `sendMessage` does not use this — it owns thread-creation/re-keying and
- * runs its own equivalent loop.
- */
-async function streamAndFinalize(
-	conversationId: string,
-	start: () => Promise<string>,
-	fallback: string,
-	logLabel: string,
-	set: StoreSetter,
-	get: StoreGetter,
-	retry: () => Promise<void>,
-): Promise<void> {
-	try {
-		await streamWithRetry(conversationId, start, set);
-		if (!hasPendingInput(conversationId, get)) {
-			finalizeStreamingMessage(conversationId, set, get);
-		}
-	} catch (err) {
-		// Abort errors are expected when the user cancels — not a failure.
-		if (err instanceof DOMException && err.name === 'AbortError') {
-			return;
-		}
-		// eslint-disable-next-line no-console
-		console.error(logLabel, err);
-		const resolution = resolveAssistantError(err, fallback);
-		finalizeStreamingError(conversationId, resolution, set, retry);
-	}
-}
-
 // ---------------------------------------------------------------------------
 // Store interface
 // ---------------------------------------------------------------------------
@@ -669,8 +564,6 @@ export interface AIAssistantStore {
 		conversationId: string,
 		messageId: string,
 	) => Promise<void>;
-	/** Replays the originating action for a manually-retryable error bubble. */
-	retryAssistantMessage: (conversationId: string) => Promise<void>;
 	submitMessageFeedback: (
 		messageId: string,
 		rating: FeedbackRating,
@@ -984,7 +877,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					// there's no "originating action" to redo — reopening the
 					// same dead executionId would just re-emit the failure.
 					// Let the error bubble; the user can send a new message,
-					// which will go through `streamWithRetry`.
+					// which will go through `streamWithAuthRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1167,7 +1060,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				attachments?: MessageAttachment[],
 				contexts?: MessageContext[],
 			): Promise<void> => {
-				const convId = get().activeConversationId;
+				let convId = get().activeConversationId;
 				if (!convId || !get().conversations[convId]) {
 					return;
 				}
@@ -1200,75 +1093,63 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				};
 
 				set((state) => {
-					const conv = state.conversations[convId];
+					const conv = state.conversations[convId!];
 					conv.messages.push(userMessage);
 					conv.updatedAt = Date.now();
 					if (!conv.title && text.trim()) {
 						conv.title = deriveTitle(text);
 					}
-					resetStreamingState(state, convId);
+					resetStreamingState(state, convId!);
 				});
 
-				// The full send — ensure a backend thread exists (re-keying the
-				// optimistic client UUID on first send), POST the message, and
-				// stream the reply. Defined as a closure so the error bubble's
-				// Retry button can replay it without re-pushing the user message.
-				const runSend = async (cid: string): Promise<void> => {
-					let targetConvId = cid;
-					try {
-						let { threadId } = get().conversations[targetConvId];
-						if (!threadId) {
-							threadId = await createThread();
-							// Re-key the conversation from client UUID to backend threadId
-							// so fetchThreads won't create a duplicate entry later.
-							const oldId = targetConvId;
-							const newId = threadId;
-							set((s) => {
-								const conv = s.conversations[oldId];
-								if (conv) {
-									conv.id = newId;
-									conv.threadId = newId;
-									s.conversations[newId] = conv;
-									delete s.conversations[oldId];
-									if (s.activeConversationId === oldId) {
-										s.activeConversationId = newId;
-									}
-									const stream = s.streams[oldId];
-									if (stream) {
-										s.streams[newId] = stream;
-										delete s.streams[oldId];
-									}
+				try {
+					let { threadId } = get().conversations[convId];
+					if (!threadId) {
+						threadId = await createThread();
+						// Re-key the conversation from client UUID to backend threadId
+						// so fetchThreads won't create a duplicate entry later.
+						const oldId = convId;
+						convId = threadId;
+						set((s) => {
+							const conv = s.conversations[oldId];
+							if (conv) {
+								conv.id = convId!;
+								conv.threadId = convId!;
+								s.conversations[convId!] = conv;
+								delete s.conversations[oldId];
+								if (s.activeConversationId === oldId) {
+									s.activeConversationId = convId!;
 								}
-							});
-							targetConvId = newId;
-						}
-						const tid = threadId;
-						await streamWithRetry(
-							targetConvId,
-							() => sendMessageToThread(tid, text, contexts),
-							set,
-						);
-
-						if (!hasPendingInput(targetConvId, get)) {
-							finalizeStreamingMessage(targetConvId, set, get);
-						}
-					} catch (err) {
-						// Abort errors are expected when the user cancels — not a failure.
-						if (err instanceof DOMException && err.name === 'AbortError') {
-							return;
-						}
-						console.error('[AIAssistant] sendMessage failed:', err);
-						const resolution = resolveAssistantError(
-							err,
-							'Something went wrong while fetching the response. Please try again.',
-						);
-						finalizeStreamingError(targetConvId, resolution, set, () =>
-							runSend(targetConvId),
-						);
+								const stream = s.streams[oldId];
+								if (stream) {
+									s.streams[convId!] = stream;
+									delete s.streams[oldId];
+								}
+							}
+						});
 					}
-				};
+					const tid = threadId;
+					await streamWithAuthRetry(
+						convId,
+						() => sendMessageToThread(tid, text, contexts),
+						set,
+					);
 
-				await runSend(convId);
+					if (!hasPendingInput(convId, get)) {
+						finalizeStreamingMessage(convId, set, get);
+					}
+				} catch (err) {
+					// Abort errors are expected when the user cancels — not a failure
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] sendMessage failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while fetching the response. Please try again.',
+					);
+					finalizeStreamingError(convId, message, set, isRateLimit);
+				}
 			},
 
 			approveAction: async (
@@ -1286,17 +1167,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => approveExecution(approvalId),
-						'Something went wrong while processing the approval. Please try again.',
-						'[AIAssistant] approveAction failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
+					}
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] approveAction failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing the approval. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 
 			rejectAction: async (
@@ -1356,17 +1246,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					resetStreamingState(s, conversationId);
 				});
 
-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => regenerateMessage(messageId),
-						'Something went wrong while regenerating the response. Please try again.',
-						'[AIAssistant] regenerateAssistantMessage failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
+					}
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while regenerating the response. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 
 			submitMessageFeedback: async (
@@ -1413,42 +1312,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => clarifyExecution(clarificationId, answers),
-						'Something went wrong while processing your answers. Please try again.',
-						'[AIAssistant] submitClarification failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
-			},
-
-			retryAssistantMessage: async (conversationId: string): Promise<void> => {
-				const retry = retryRegistry.get(conversationId);
-				if (!retry) {
-					return;
-				}
-				retryRegistry.delete(conversationId);
-
-				// Drop the trailing error bubble we're retrying from and reset the
-				// stream so the in-progress retry renders immediately. The retry
-				// thunk replays the originating action without re-pushing the
-				// user's message.
-				set((s) => {
-					const conv = s.conversations[conversationId];
-					if (conv) {
-						const last = conv.messages[conv.messages.length - 1];
-						if (last?.isError) {
-							conv.messages.pop();
-						}
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
 					}
-					resetStreamingState(s, conversationId);
-				});
-
-				await retry();
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] submitClarification failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing your answers. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 		})),
 		{

frontend/src/container/AIAssistant/types.ts

@@ -15,11 +15,9 @@
 import type {
 	ApprovalEventDTO,
 	ClarificationEventDTO,
-	ErrorCodeDTO,
 	FeedbackRatingDTO,
 	MessageActionDTO,
 	MessageActionKindDTO,
-	RetryActionDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 /** Client-only file attachment — no API equivalent (uploads happen via data URLs). */
@@ -93,18 +91,6 @@ export interface Message {
 	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
 	 */
 	isRateLimitError?: boolean;
-	/**
-	 * Marks an assistant message that represents a failed turn. Drives the
-	 * error styling and replaces the feedback bar with a retry affordance.
-	 */
-	isError?: boolean;
-	/** Known backend error code for the failure, when recognised. */
-	errorCode?: ErrorCodeDTO;
-	/**
-	 * Retry semantics for a failed turn — `manual` renders an inline Retry
-	 * button on the error bubble; `none`/`auto` render no button.
-	 */
-	retryAction?: RetryActionDTO;
 	createdAt: number;
 }
 

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantError.test.ts

@@ -1,154 +0,0 @@
-import { AxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { resolveAssistantError } from '../resolveAssistantError';
-
-const FALLBACK = 'Something went wrong. Please try again.';
-
-function restError(status: number, code: string, message: string): AxiosError {
-	const err = new AxiosError('Request failed');
-	err.response = {
-		status,
-		data: { error: { code, message } },
-	} as AxiosError['response'];
-	return err;
-}
-
-describe('resolveAssistantError', () => {
-	describe('message resolution', () => {
-		it('prefers code-specific FE copy over the backend message', () => {
-			const err = restError(409, ErrorCodeDTO.thread_busy, 'raw backend phrasing');
-
-			const { message } = resolveAssistantError(err, FALLBACK);
-			expect(message).toBe(
-				'This conversation is still finishing a previous response. Give it a moment and try again.',
-			);
-		});
-
-		it('falls through to the backend message for a known code without FE copy', () => {
-			const err = restError(
-				400,
-				ErrorCodeDTO.message_not_found,
-				'No such message exists.',
-			);
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: 'No such message exists.',
-				code: ErrorCodeDTO.message_not_found,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: false,
-			});
-		});
-
-		it('falls back when the error code is not in ErrorCodeDTO', () => {
-			const err = restError(400, 'future_unknown_code', 'Backend-only message');
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: FALLBACK,
-				code: undefined,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: false,
-			});
-		});
-	});
-
-	describe('rate limiting', () => {
-		it('marks HTTP 429 responses as rate limited and non-retryable', () => {
-			const err = restError(
-				429,
-				ErrorCodeDTO.hourly_message_limit,
-				'Hourly limit reached.',
-			);
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: "You've reached the hourly message limit. Please try again later.",
-				code: ErrorCodeDTO.hourly_message_limit,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: true,
-			});
-		});
-
-		it('treats known SSE rate-limit codes as rate limited', () => {
-			const err = Object.assign(new Error('Daily token limit exceeded.'), {
-				code: ErrorCodeDTO.daily_token_limit,
-			});
-
-			const res = resolveAssistantError(err, FALLBACK);
-			expect(res.isRateLimit).toBe(true);
-			expect(res.retryAction).toBe(RetryActionDTO.none);
-		});
-
-		it('marks 429 as rate limited even when the code is unknown', () => {
-			const err = restError(429, 'future_unknown_code', 'Too many requests');
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: FALLBACK,
-				code: undefined,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: true,
-			});
-		});
-	});
-
-	describe('retryAction resolution', () => {
-		it('honours an explicit retryAction from an SSE error event', () => {
-			const err = Object.assign(new Error('Transient hiccup'), {
-				code: ErrorCodeDTO.internal_error,
-				retryAction: RetryActionDTO.auto,
-			});
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.auto,
-			);
-		});
-
-		it('forces none for non-retryable permission errors', () => {
-			const err = restError(403, ErrorCodeDTO.permission_denied, 'forbidden');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.none,
-			);
-		});
-
-		it('derives manual for 409 conflicts', () => {
-			const err = restError(409, ErrorCodeDTO.thread_has_active_execution, 'busy');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives manual for 5xx responses', () => {
-			const err = restError(503, 'future_unknown_code', 'unavailable');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives manual for network failures with no response', () => {
-			const err = new AxiosError('Network Error');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives none for other 4xx responses', () => {
-			const err = restError(400, 'future_unknown_code', 'bad request');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.none,
-			);
-		});
-
-		it('defaults to manual for non-Axios errors with no code', () => {
-			expect(resolveAssistantError(new Error('boom'), FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-	});
-});

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantErrorMessage.test.ts

@@ -0,0 +1,91 @@
+import { AxiosError } from 'axios';
+import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
+
+const FALLBACK = 'Something went wrong. Please try again.';
+
+describe('resolveAssistantErrorMessage', () => {
+	it('returns backend message for a known error code', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: ErrorCodeDTO.thread_busy,
+					message: 'This thread is busy. Try again shortly.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'This thread is busy. Try again shortly.',
+			isRateLimit: false,
+		});
+	});
+
+	it('falls back when error code is not in ErrorCodeDTO', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Backend-only message',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: false,
+		});
+	});
+
+	it('marks HTTP 429 responses as rate limited', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: ErrorCodeDTO.hourly_message_limit,
+					message: 'Hourly limit reached.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Hourly limit reached.',
+			isRateLimit: true,
+		});
+	});
+
+	it('uses backend message for known SSE rate-limit error codes', () => {
+		const err = Object.assign(new Error('Daily token limit exceeded.'), {
+			code: ErrorCodeDTO.daily_token_limit,
+		});
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Daily token limit exceeded.',
+			isRateLimit: true,
+		});
+	});
+
+	it('marks 429 as rate limited even when error code is unknown', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Too many requests',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: true,
+		});
+	});
+});

frontend/src/container/AIAssistant/utils/resolveAssistantError.ts

@@ -1,209 +0,0 @@
-import { isAxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-	type ErrorBodyDTO,
-	type ErrorResponseDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-export interface AssistantErrorResolution {
-	/** User-facing copy: code-specific FE copy → backend message → caller fallback. */
-	message: string;
-	/** Known backend error code, when one we recognise was supplied. */
-	code?: ErrorCodeDTO;
-	/**
-	 * Whether/how the failed action may be retried:
-	 *   • `auto`   — transient; the caller may silently re-attempt (capped).
-	 *   • `manual` — surface a Retry affordance to the user.
-	 *   • `none`   — retrying would re-fail deterministically; offer nothing.
-	 */
-	retryAction: RetryActionDTO;
-	/** Quota/limit error — callers hide the retry + feedback bar (retrying just re-limits). */
-	isRateLimit: boolean;
-}
-
-/** Quota/limit codes — surfaced as rate-limit errors (no retry, feedback bar hidden). */
-const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
-	ErrorCodeDTO.thread_message_limit,
-	ErrorCodeDTO.connection_limit_exceeded,
-	ErrorCodeDTO.hourly_message_limit,
-	ErrorCodeDTO.daily_message_limit,
-	ErrorCodeDTO.daily_token_limit,
-	ErrorCodeDTO.daily_cost_limit,
-	ErrorCodeDTO.budget_exceeded,
-]);
-
-/**
- * Codes whose retry would re-fail deterministically — permission/config/validation
- * failures. These force `retryAction: none` regardless of HTTP status.
- */
-const NON_RETRYABLE_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.permission_denied,
-	ErrorCodeDTO.user_disabled,
-	ErrorCodeDTO.org_disabled,
-	ErrorCodeDTO.validation_error,
-	ErrorCodeDTO.invalid_content_length,
-	ErrorCodeDTO.invalid_fork_target,
-	ErrorCodeDTO.missing_signoz_url,
-	ErrorCodeDTO.invalid_signoz_url,
-	ErrorCodeDTO.region_not_configured,
-]);
-
-/**
- * Code-specific, user-friendly copy. Takes precedence over the backend's raw
- * `error.message` so the user sees an actionable, consistent sentence rather
- * than internal phrasing. Codes absent here fall through to the backend message.
- */
-const ERROR_CODE_COPY: Partial<Record<ErrorCodeDTO, string>> = {
-	[ErrorCodeDTO.permission_denied]:
-		"You don't have permission to do that. Contact your workspace admin if you think this is a mistake.",
-	[ErrorCodeDTO.user_disabled]:
-		'Your access to the AI assistant has been disabled. Contact your workspace admin to re-enable it.',
-	[ErrorCodeDTO.org_disabled]:
-		'The AI assistant is disabled for your organisation. An admin can enable it in settings.',
-	[ErrorCodeDTO.thread_busy]:
-		'This conversation is still finishing a previous response. Give it a moment and try again.',
-	[ErrorCodeDTO.thread_has_active_execution]:
-		'This conversation is still finishing a previous response. Give it a moment and try again.',
-	[ErrorCodeDTO.hourly_message_limit]:
-		"You've reached the hourly message limit. Please try again later.",
-	[ErrorCodeDTO.daily_message_limit]:
-		"You've reached the daily message limit. Please try again tomorrow.",
-	[ErrorCodeDTO.daily_token_limit]:
-		"You've reached today's usage limit. Please try again tomorrow.",
-	[ErrorCodeDTO.daily_cost_limit]:
-		"You've reached today's usage limit. Please try again tomorrow.",
-	[ErrorCodeDTO.budget_exceeded]:
-		"You've reached your usage budget. Contact your workspace admin to raise it.",
-	[ErrorCodeDTO.thread_message_limit]:
-		'This conversation has reached its length limit. Start a new conversation to continue.',
-	[ErrorCodeDTO.connection_limit_exceeded]:
-		'Too many active conversations right now. Close one and try again.',
-	[ErrorCodeDTO.max_turns_exceeded]:
-		'The assistant reached the maximum number of steps for this request. Try rephrasing or breaking it into smaller asks.',
-	[ErrorCodeDTO.region_unreachable]:
-		"Couldn't reach your region's services. Please try again in a moment.",
-	[ErrorCodeDTO.region_not_configured]:
-		'No region is configured for the AI assistant yet. An admin can set this up in settings.',
-	[ErrorCodeDTO.mcp_unavailable]:
-		'A required service is temporarily unavailable. Please try again shortly.',
-	[ErrorCodeDTO.sandbox_unavailable]:
-		'The execution environment is temporarily unavailable. Please try again shortly.',
-	[ErrorCodeDTO.internal_error]:
-		'Something went wrong on our end. Please try again.',
-};
-
-function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
-	return (
-		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
-	);
-}
-
-function isRetryActionDTO(value: unknown): value is RetryActionDTO {
-	return (
-		typeof value === 'string' &&
-		(Object.values(RetryActionDTO) as string[]).includes(value)
-	);
-}
-
-/**
- * Pulls the structured error body out of either an Axios REST error or the
- * SSE error the streaming loop throws (a plain `Error` augmented with `code`).
- */
-function getErrorBody(err: unknown): ErrorBodyDTO | null {
-	if (isAxiosError(err)) {
-		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
-	}
-
-	const code = (err as { code?: string } | undefined)?.code;
-	const message = err instanceof Error ? err.message : undefined;
-	if (!code || !message) {
-		return null;
-	}
-
-	return { code: code as ErrorCodeDTO, message };
-}
-
-function isRateLimit(code: ErrorCodeDTO | undefined, err: unknown): boolean {
-	if (isAxiosError(err) && err.response?.status === 429) {
-		return true;
-	}
-	return code !== undefined && RATE_LIMIT_ERROR_CODES.has(code);
-}
-
-/**
- * Resolves how the failed action may be retried. The backend's explicit signal
- * (SSE `ErrorEventDTO.retryAction`) is authoritative; otherwise we derive it
- * from the rate-limit/non-retryable code sets and the HTTP status.
- */
-function resolveRetryAction(
-	err: unknown,
-	code: ErrorCodeDTO | undefined,
-	rateLimited: boolean,
-): RetryActionDTO {
-	const explicit = (err as { retryAction?: unknown } | undefined)?.retryAction;
-	if (isRetryActionDTO(explicit)) {
-		return explicit;
-	}
-
-	if (rateLimited || (code !== undefined && NON_RETRYABLE_CODES.has(code))) {
-		return RetryActionDTO.none;
-	}
-
-	if (isAxiosError(err)) {
-		const status = err.response?.status;
-		// No response → network/timeout failure; retrying may well succeed.
-		if (status === undefined || status === 408) {
-			return RetryActionDTO.manual;
-		}
-		if (status === 401 || status === 403) {
-			return RetryActionDTO.none;
-		}
-		if (status === 409 || status >= 500) {
-			return RetryActionDTO.manual;
-		}
-		// Other 4xx (validation, bad request) re-fail deterministically.
-		return RetryActionDTO.none;
-	}
-
-	// Non-Axios transport/parse error with no code — let the user retry.
-	return RetryActionDTO.manual;
-}
-
-function resolveMessage(
-	code: ErrorCodeDTO | undefined,
-	body: ErrorBodyDTO | null,
-	fallback: string,
-): string {
-	if (code !== undefined && ERROR_CODE_COPY[code]) {
-		return ERROR_CODE_COPY[code] as string;
-	}
-	// Trust the backend's message only for codes we recognise — never surface
-	// raw text for unknown codes (could be an internal stack trace).
-	if (code !== undefined && body?.message.trim()) {
-		return body.message.trim();
-	}
-	return fallback;
-}
-
-/**
- * Single resolution point for both SSE and REST assistant errors. Maps the
- * error onto user-facing copy plus retry semantics, degrading gracefully for
- * unknown codes (falls back to `fallback` + a `manual` retry where sensible).
- */
-export function resolveAssistantError(
-	err: unknown,
-	fallback: string,
-): AssistantErrorResolution {
-	const body = getErrorBody(err);
-	const code = isErrorCodeDTO(body?.code) ? body?.code : undefined;
-	const rateLimited = isRateLimit(code, err);
-
-	return {
-		message: resolveMessage(code, body, fallback),
-		code,
-		retryAction: resolveRetryAction(err, code, rateLimited),
-		isRateLimit: rateLimited,
-	};
-}

frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts

@@ -0,0 +1,71 @@
+import { isAxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	type ErrorBodyDTO,
+	type ErrorResponseDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+export interface AssistantErrorResolution {
+	message: string;
+	isRateLimit: boolean;
+}
+
+function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
+	return (
+		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
+	);
+}
+
+const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
+	ErrorCodeDTO.thread_message_limit,
+	ErrorCodeDTO.connection_limit_exceeded,
+	ErrorCodeDTO.hourly_message_limit,
+	ErrorCodeDTO.daily_message_limit,
+	ErrorCodeDTO.daily_token_limit,
+	ErrorCodeDTO.daily_cost_limit,
+	ErrorCodeDTO.budget_exceeded,
+]);
+
+function isRateLimitError(code: string | undefined, err: unknown): boolean {
+	if (isAxiosError(err) && err.response?.status === 429) {
+		return true;
+	}
+
+	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
+}
+
+function getErrorBody(err: unknown): ErrorBodyDTO | null {
+	if (isAxiosError(err)) {
+		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
+	}
+
+	const code = (err as { code?: string } | undefined)?.code;
+	const message = err instanceof Error ? err.message : undefined;
+	if (!code || !message) {
+		return null;
+	}
+
+	return { code: code as ErrorCodeDTO, message };
+}
+
+/**
+ * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
+ * otherwise returns `fallback`.
+ */
+export function resolveAssistantErrorMessage(
+	err: unknown,
+	fallback: string,
+): AssistantErrorResolution {
+	const body = getErrorBody(err);
+	const isRateLimit = isRateLimitError(body?.code, err);
+
+	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
+		return {
+			message: body.message.trim(),
+			isRateLimit,
+		};
+	}
+
+	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
+}

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -53,10 +53,6 @@
 		z-index: 0;
 		background: var(--l1-background);
 
-		// Column so the bottom strip sits under the scrolling content, not inside it.
-		display: flex;
-		flex-direction: column;
-
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -74,9 +70,7 @@
 
 .chat-support-gateway {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: calc(20px + var(--bottom-strip-height, 0px));
+	bottom: 20px;
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -35,6 +35,7 @@ import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { SubscriptionManagePermissions } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
@@ -42,7 +43,6 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
-import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -51,8 +51,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -103,6 +101,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		trialInfo,
 		activeLicense,
 		isFetchingActiveLicense,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
 		userPreferences,
 		isFetchingUserPreferences,
 		updateChangelog,
@@ -401,7 +402,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
-	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -489,7 +489,42 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
-	const chatSupport = useChatSupport();
+	const showAddCreditCardModal = useMemo(() => {
+		if (
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo
+		) {
+			let isChatSupportEnabled = false;
+			let isPremiumSupportEnabled = false;
+			if (featureFlags && featureFlags.length > 0) {
+				isChatSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
+						?.active || false;
+
+				isPremiumSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
+						?.active || false;
+			}
+			return (
+				isLoggedIn &&
+				!isPremiumSupportEnabled &&
+				isChatSupportEnabled &&
+				!trialInfo?.trialConvertedToSubscription &&
+				isCloudUserVal
+			);
+		}
+		return false;
+	}, [
+		featureFlags,
+		featureFlagsFetchError,
+		isCloudUserVal,
+		isFetchingFeatureFlags,
+		isLoggedIn,
+		activeLicense,
+		trialInfo,
+	]);
 
 	// Listen for API warnings
 	const handleWarning = (
@@ -833,10 +868,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
-
-						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
-							<BottomStrip />
-						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (
@@ -847,9 +878,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{chatSupport === ChatSupportState.NeedsCard && !isSavedViewEnabled && (
-					<ChatSupportGateway />
-				)}
+				{showAddCreditCardModal && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

frontend/src/container/AppLayout/styles.ts

@@ -12,12 +12,8 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
-// Takes the height left in `.app-content` after the bottom strip.
-// `min-height: 0` is not needed right now, overlayscrollbars already sets
-// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	flex: 1;
-	min-height: 0;
+	height: 100%;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/BottomStrip/AskNoz/AskNoz.module.scss

@@ -1,36 +0,0 @@
-.askNoz {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-}
-
-.badge {
-	flex-shrink: 0;
-	display: inline-flex;
-	line-height: 0;
-	color: var(--accent-primary);
-}
-
-.pulseDot {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 0;
-	animation: askNozDotPulse 1.5s ease-in-out infinite;
-	transform: scale(0.8);
-	margin-right: -12px;
-}
-
-@keyframes askNozDotPulse {
-	0%,
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	50% {
-		opacity: 0.35;
-		transform: scale(0.82);
-	}
-}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -1,76 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import Noz from 'components/Noz/Noz';
-import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
-import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
-import {
-	openAIAssistant,
-	useAIAssistantStore,
-} from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import ROUTES from 'constants/routes';
-import { Dot } from '@signozhq/icons';
-
-import styles from './AskNoz.module.scss';
-
-/**
- * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
- * modal instead; this is deliberately the drawer.
- *
- * Carries the header's pending badge: when Noz is blocked on the user
- * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
- * hiding the header button would remove a notification rather than move it.
- */
-function AskNoz(): JSX.Element | null {
-	const { pathname } = useLocation();
-	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
-	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
-	const pendingUserInputCount = useAIAssistantStore(
-		selectPendingUserInputStreamCount,
-	);
-
-	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
-	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
-
-	// The drawer does not render on the Noz full page, so the button would be inert.
-	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
-
-	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
-		return null;
-	}
-
-	return (
-		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
-			{showPendingBadge && (
-				<span className={styles.badge} aria-hidden>
-					<span className={styles.pulseDot}>
-						<Dot size={36} />
-					</span>
-				</span>
-			)}
-			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					className="noz-wave"
-					prefix={<Noz size={16} />}
-					onClick={(): void => openAIAssistant()}
-					aria-label={
-						showPendingBadge
-							? `Ask Noz, ${pendingUserInputCount} ${
-									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
-								} your response`
-							: 'Ask Noz'
-					}
-				>
-					Ask Noz
-				</Button>
-			</TooltipSimple>
-		</div>
-	);
-}
-
-export default AskNoz;

frontend/src/container/BottomStrip/AskNoz/__tests__/AskNoz.test.tsx

@@ -1,133 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { render } from 'tests/test-utils';
-
-import AskNoz from '../AskNoz';
-
-jest.mock('hooks/useIsAIAssistantEnabled');
-jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
-	openAIAssistant: jest.fn(),
-	useAIAssistantStore: jest.fn(),
-}));
-
-const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
-	typeof useIsAIAssistantEnabled
->;
-const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const { useAIAssistantStore } = jest.requireMock(
-	'container/AIAssistant/store/useAIAssistantStore',
-) as { useAIAssistantStore: jest.Mock };
-
-/** The component reads the store through three separate selector calls. */
-function mockStore({
-	isDrawerOpen = false,
-	isModalOpen = false,
-	pendingCount = 0,
-}: {
-	isDrawerOpen?: boolean;
-	isModalOpen?: boolean;
-	pendingCount?: number;
-} = {}): void {
-	const state = { isDrawerOpen, isModalOpen, streams: {} };
-	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
-		const picked = selector(state);
-		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
-		// so stand in the count we want to assert against.
-		return typeof picked === 'number' ? pendingCount : picked;
-	});
-}
-
-// `TooltipSimple` replaces its trigger's props, so the testId lives on the
-// wrapper and the button itself is reached by role — there is only ever one.
-const SLOT = 'bottom-strip-ask-noz';
-
-describe('AskNoz', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockEnabled.mockReturnValue(true);
-		mockStore();
-	});
-
-	describe('visibility', () => {
-		it('renders when the assistant is enabled', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toBeInTheDocument();
-		});
-
-		it('renders nothing when the assistant is disabled', () => {
-			mockEnabled.mockReturnValue(false);
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing while the drawer is open', () => {
-			mockStore({ isDrawerOpen: true });
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
-			const { queryByTestId } = render(<AskNoz />, undefined, {
-				initialRoute: '/ai-assistant/some-conversation-id',
-			});
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('what it does', () => {
-		it('opens the drawer on click', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			fireEvent.click(getByRole('button'));
-
-			expect(mockOpen).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('pending badge', () => {
-		it('announces the count when Noz is waiting on the user', () => {
-			mockStore({ pendingCount: 2 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 2 actions need your response',
-			);
-		});
-
-		it('uses the singular for one pending action', () => {
-			mockStore({ pendingCount: 1 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 1 action needs your response',
-			);
-		});
-
-		it('stays quiet when nothing is pending', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-
-		it('stays quiet while the modal is open, Noz is already on screen', () => {
-			mockStore({ isModalOpen: true, pendingCount: 3 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-	});
-});

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -1,45 +0,0 @@
-.strip {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-
-	flex-shrink: 0;
-	height: var(--bottom-strip-height);
-	padding: 0 var(--spacing-6);
-
-	background: var(--l2-background);
-	border-top: 1px solid var(--l2-border);
-
-	--button-font-size: 12px;
-
-	font-family: var(--font-family-sf-mono, monospace);
-
-	// Above page content, below the body-portalled overlays that are meant to
-	// cover the strip.
-	position: relative;
-	z-index: 1;
-}
-
-.left,
-.right {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	min-width: 0;
-}
-
-.left {
-	cursor: default;
-}
-
-// separator b/w strip entities
-.left > *:not(:last-child)::after,
-.right > *:not(:last-child)::after {
-	content: '';
-	flex-shrink: 0;
-	width: 1px;
-	height: 14px;
-	background: var(--l2-border);
-	margin-left: var(--spacing-4);
-}

frontend/src/container/BottomStrip/LeftSlot/LeftSlot.tsx

@@ -1,53 +0,0 @@
-import * as Sentry from '@sentry/react';
-import { useAppContext } from 'providers/App/App';
-
-import StripKeyValue from '../components/StripKeyValue/StripKeyValue';
-import StripTypography from '../components/StripTypography/StripTypography';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-import { type StripItem, StripItemKind } from '../types';
-
-function renderItem(item: StripItem, index: number): JSX.Element {
-	if (item.kind === StripItemKind.KeyValue) {
-		return (
-			<StripKeyValue
-				key={index}
-				label={item.label}
-				value={item.value}
-				prefix={item.prefix}
-				tone={item.tone}
-			/>
-		);
-	}
-
-	return (
-		// eslint-disable-next-line react/no-array-index-key
-		<StripTypography key={index} prefix={item.prefix}>
-			{item.text}
-		</StripTypography>
-	);
-}
-
-function LeftSlot(): JSX.Element | null {
-	const { versionData } = useAppContext();
-	const left = useBottomStripStore((state) => state.left);
-	const ownerId = useBottomStripStore((state) => state.ownerId);
-
-	const version = versionData?.version?.trim();
-	const versionNode = version ? (
-		<StripTypography>{version}</StripTypography>
-	) : null;
-
-	if (!left?.length) {
-		return versionNode;
-	}
-
-	return (
-		// Keyed so a page whose items throw does not leave the boundary latched on
-		// the fallback for every page after it.
-		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
-			{left.map(renderItem)}
-		</Sentry.ErrorBoundary>
-	);
-}
-
-export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { MessageSquareText } from '@signozhq/icons';
-
-function SupportButton(): JSX.Element | null {
-	const chatSupport = useChatSupport();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
-		useState(false);
-
-	if (chatSupport === ChatSupportState.Unavailable) {
-		return null;
-	}
-
-	const handleClick = (): void => {
-		if (chatSupport === ChatSupportState.NeedsCard) {
-			setIsAddCreditCardModalOpen(true);
-			return;
-		}
-		window.Pylon?.('show');
-	};
-
-	return (
-		<>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<MessageSquareText size={16} />}
-				onClick={handleClick}
-				testId="bottom-strip-support"
-			>
-				Support
-			</Button>
-
-			<AddCreditCardModal
-				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-			/>
-		</>
-	);
-}
-
-export default SupportButton;

frontend/src/container/BottomStrip/SupportButton/__tests__/SupportButton.test.tsx

@@ -1,81 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { render } from 'tests/test-utils';
-
-import SupportButton from '../SupportButton';
-
-jest.mock('hooks/useChatSupport', () => ({
-	...jest.requireActual('hooks/useChatSupport'),
-	useChatSupport: jest.fn(),
-}));
-
-const mockChatSupport = useChatSupport as jest.MockedFunction<
-	typeof useChatSupport
->;
-
-const BUTTON = 'bottom-strip-support';
-const MODAL_TITLE = 'Add Credit Card for Chat Support';
-
-describe('SupportButton', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		window.Pylon = jest.fn() as never;
-	});
-
-	describe('when Pylon is available', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
-
-		it('shows the button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the Pylon widget on click', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(window.Pylon).toHaveBeenCalledWith('show');
-		});
-
-		it('does not open the credit card modal', () => {
-			const { getByTestId, queryByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('when the user needs a card', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
-
-		it('shows the same button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the credit card modal on click, not Pylon', () => {
-			const { getByTestId, getByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
-			expect(window.Pylon).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('when support is unavailable', () => {
-		beforeEach(() =>
-			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
-		);
-
-		it('renders nothing at all', () => {
-			const { queryByTestId } = render(<SupportButton />);
-
-			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -1,176 +0,0 @@
-import { useMemo, useState } from 'react';
-import { fireEvent } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-import { Info } from 'types/api/v1/version/get';
-
-import BottomStrip, {
-	BOTTOM_STRIP_HEIGHT,
-	BOTTOM_STRIP_HEIGHT_VAR,
-	BOTTOM_STRIP_ON_CLASS,
-} from '..';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-import { useBottomStrip } from '../useBottomStrip';
-import { StripItemKind } from '../types';
-
-/** Stands in for a page that puts something on the left of the strip. */
-function Page({ text }: { text: string }): null {
-	useBottomStrip(useMemo(() => [{ kind: StripItemKind.Text, text }], [text]));
-	return null;
-}
-
-/**
- * A page whose icon throws when the strip renders it. `prefix` is the one place
- * the config still takes a node, so it is the only way a page can break it.
- */
-function BoomPage(): null {
-	useBottomStrip([{ kind: StripItemKind.Text, text: 'boom', prefix: <Boom /> }]);
-	return null;
-}
-
-/** A page whose value changes without needing `rerender`. */
-function ChangingPage(): JSX.Element {
-	const [count, setCount] = useState(600);
-
-	useBottomStrip(
-		useMemo(
-			() => [{ kind: StripItemKind.Text, text: `${count} traces` }],
-			[count],
-		),
-	);
-
-	return (
-		<button type="button" onClick={(): void => setCount(42)}>
-			change
-		</button>
-	);
-}
-
-/** A page node that blows up while the strip renders it. */
-function Boom(): JSX.Element {
-	throw new Error('bad left node');
-}
-
-const VERSION = 'v0.134.67';
-const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
-const withVersion = { appContextOverrides: { versionData } };
-
-describe('BottomStrip', () => {
-	// The store is module level, so it outlives each test.
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('publishes the body class and height property while mounted', () => {
-		const { unmount } = render(<BottomStrip />);
-
-		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
-		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
-			`${BOTTOM_STRIP_HEIGHT}px`,
-		);
-
-		unmount();
-
-		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
-		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
-			'',
-		);
-	});
-
-	// The string is whatever the Go build injected, so it is rendered untouched —
-	// same as SideNav. Release tags carry the "v", local builds do not.
-	it.each([['v0.134.67'], ['main-64f1c2a']])(
-		'renders the build version %p exactly as given',
-		(version) => {
-			const { getByText } = render(<BottomStrip />, undefined, {
-				appContextOverrides: {
-					versionData: { version, ee: 'Y', setupCompleted: true },
-				},
-			});
-
-			expect(getByText(version)).toBeInTheDocument();
-		},
-	);
-
-	it('renders the strip without a version when none is available', () => {
-		const { getByTestId } = render(<BottomStrip />, undefined, {
-			appContextOverrides: { versionData: null },
-		});
-
-		const strip = getByTestId('bottom-strip');
-
-		expect(strip).toBeInTheDocument();
-		expect(strip).toHaveTextContent('');
-	});
-
-	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
-	// re-renders the original tree. These drive change through state and through
-	// separate trees instead, which the module-level store lets them share.
-	describe('left slot', () => {
-		it('shows what the page put there instead of the version', () => {
-			render(<Page text="600 traces" />);
-			const { getByText, queryByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-			expect(queryByText(VERSION)).not.toBeInTheDocument();
-		});
-
-		it('falls back to the version once the page is gone', () => {
-			const page = render(<Page text="600 traces" />);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			page.unmount();
-
-			expect(getByText(VERSION)).toBeInTheDocument();
-		});
-
-		it('updates when the page changes what it shows', () => {
-			render(<ChangingPage />);
-			const { getByText, getByRole } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-
-			fireEvent.click(getByRole('button', { name: 'change' }));
-
-			expect(getByText('42 traces')).toBeInTheDocument();
-		});
-
-		it('falls back to the version when the page node throws', () => {
-			// React logs the caught error, which is noise here.
-			const consoleError = jest
-				.spyOn(console, 'error')
-				.mockImplementation(() => {});
-
-			render(<BoomPage />);
-			const { getByTestId, getByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByTestId('bottom-strip')).toBeInTheDocument();
-			expect(getByText(VERSION)).toBeInTheDocument();
-
-			consoleError.mockRestore();
-		});
-
-		it('keeps the new page value when the old page unmounts after it', () => {
-			// Navigation order: the next page mounts before the last one unmounts,
-			// so without the owner guard the outgoing page wipes the incoming value.
-			const pageA = render(<Page text="page A" />);
-			render(<Page text="page B" />);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			pageA.unmount();
-
-			expect(getByText('page B')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/BottomStrip/components/StripKeyValue/StripKeyValue.module.scss

@@ -1,24 +0,0 @@
-// `:` is spaced like a word, per the Figma, so the gap here is a space width
-// rather than the wider gap between whole items.
-.keyValue {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-
-	color: var(--l2-foreground);
-	white-space: nowrap;
-}
-
-.prefix {
-	display: inline-flex;
-	align-items: center;
-	margin-right: var(--spacing-1);
-}
-
-.warning {
-	color: var(--warning);
-}
-
-.error {
-	color: var(--destructive);
-}

frontend/src/container/BottomStrip/components/StripKeyValue/StripKeyValue.tsx

@@ -1,47 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import { StripTone } from '../../types';
-
-import styles from './StripKeyValue.module.scss';
-
-export interface StripKeyValueProps {
-	label: string;
-	value: string | number;
-	/** Leading icon. Same shape as `Button`'s. */
-	prefix?: ReactNode;
-	/** Tints the icon; the text stays neutral at every tone. */
-	tone?: StripTone;
-}
-
-/** A labelled number, rendered `Spans : 31`. */
-function StripKeyValue({
-	label,
-	value,
-	prefix,
-	tone,
-}: StripKeyValueProps): JSX.Element {
-	return (
-		<span className={styles.keyValue}>
-			{prefix && (
-				<span className={cx(styles.prefix, tone && styles[tone])} data-tone={tone}>
-					{prefix}
-				</span>
-			)}
-			<Typography.Text as="span" className={styles.label}>
-				{label}
-			</Typography.Text>
-			<Typography.Text as="span" className={styles.colon}>
-				:
-			</Typography.Text>
-			<Typography.Text as="span" className={styles.value}>
-				{value}
-			</Typography.Text>
-		</span>
-	);
-}
-
-StripKeyValue.defaultProps = { prefix: undefined, tone: StripTone.Default };
-
-export default StripKeyValue;

frontend/src/container/BottomStrip/components/StripKeyValue/__tests__/StripKeyValue.test.tsx

@@ -1,46 +0,0 @@
-import { render } from 'tests/test-utils';
-
-import { StripTone } from '../../../types';
-
-import StripKeyValue from '../StripKeyValue';
-
-describe('StripKeyValue', () => {
-	it('renders the label and the value around a colon it owns', () => {
-		const { getByText, container } = render(
-			<StripKeyValue label="Spans" value={31} />,
-		);
-
-		expect(getByText('Spans')).toBeInTheDocument();
-		expect(getByText('31')).toBeInTheDocument();
-		// The consumer never builds the string, so the spacing cannot drift.
-		expect(container.textContent).toBe('Spans:31');
-	});
-
-	it('tints only the icon when the tone is set', () => {
-		const { container } = render(
-			<StripKeyValue
-				label="Errors"
-				value={4}
-				tone={StripTone.Error}
-				prefix={<svg data-testid="icon" />}
-			/>,
-		);
-
-		// The tone lands on the icon, never on the text.
-		expect(container.querySelector('[data-tone]')).toHaveAttribute(
-			'data-tone',
-			'error',
-		);
-	});
-
-	it('leaves the icon untinted by default', () => {
-		const { container } = render(
-			<StripKeyValue label="Errors" value={0} prefix={<svg />} />,
-		);
-
-		expect(container.querySelector('[data-tone]')).toHaveAttribute(
-			'data-tone',
-			'default',
-		);
-	});
-});

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.module.scss

@@ -1,10 +0,0 @@
-.stripTypography {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -1,28 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './StripTypography.module.scss';
-
-interface StripTypographyProps {
-	children: ReactNode;
-	/** Leading icon. Same shape as `Button`'s. */
-	prefix?: ReactNode;
-}
-
-/** A single phrase. A labelled number belongs in `StripKeyValue`. */
-function StripTypography({
-	children,
-	prefix,
-}: StripTypographyProps): JSX.Element {
-	return (
-		<span className={styles.stripTypography}>
-			{prefix}
-			<Typography.Text as="span">{children}</Typography.Text>
-		</span>
-	);
-}
-
-StripTypography.defaultProps = { prefix: undefined };
-
-export type { StripTypographyProps };
-export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -1,41 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-import AskNoz from './AskNoz/AskNoz';
-import LeftSlot from './LeftSlot/LeftSlot';
-import SupportButton from './SupportButton/SupportButton';
-
-import styles from './BottomStrip.module.scss';
-
-export const BOTTOM_STRIP_HEIGHT = 24;
-
-export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
-export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
-
-function BottomStrip(): JSX.Element {
-	useLayoutEffect(() => {
-		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
-		document.body.style.setProperty(
-			BOTTOM_STRIP_HEIGHT_VAR,
-			`${BOTTOM_STRIP_HEIGHT}px`,
-		);
-
-		return (): void => {
-			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
-			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
-		};
-	}, []);
-
-	return (
-		<div className={styles.strip} data-testid="bottom-strip">
-			<div className={styles.left}>
-				<LeftSlot />
-			</div>
-			<div className={styles.right}>
-				<AskNoz />
-				<SupportButton />
-			</div>
-		</div>
-	);
-}
-
-export default BottomStrip;

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -1,27 +0,0 @@
-import { create } from 'zustand';
-
-import type { StripItem } from '../types';
-
-interface BottomStripState {
-	/** What the strip shows on the left, or null to fall back to the version. */
-	left: StripItem[] | null;
-	/** Which page owns the current value — see `clearLeft`. */
-	ownerId: string | null;
-	setLeft: (ownerId: string, left: StripItem[] | null) => void;
-	clearLeft: (ownerId: string) => void;
-}
-
-export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
-	left: null,
-	ownerId: null,
-	setLeft: (ownerId, left): void => set({ left, ownerId }),
-	// Only the current owner may clear. On a plain route swap React runs the old
-	// page's cleanup before the new page's effect, so this is moot, but two
-	// consumers can be mounted at once (a page under a drawer): the one that set
-	// last owns the slot, and the other unmounting must not wipe it.
-	clearLeft: (ownerId): void => {
-		if (get().ownerId === ownerId) {
-			set({ left: null, ownerId: null });
-		}
-	},
-}));

frontend/src/container/BottomStrip/types.ts

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-
-export enum StripTone {
-	Default = 'default',
-	Warning = 'warning',
-	Error = 'error',
-}
-
-export enum StripItemKind {
-	/** A phrase in the page's own words, e.g. "18 services". */
-	Text = 'text',
-	/** A labelled number, rendered `label : value`. */
-	KeyValue = 'keyValue',
-}
-
-/** What a page may put on the left of the strip. */
-export type StripItem =
-	| {
-			kind: StripItemKind.Text;
-			text: string;
-			prefix?: ReactNode;
-	  }
-	| {
-			kind: StripItemKind.KeyValue;
-			/** Without a colon; the strip renders the separator. */
-			label: string;
-			value: string | number;
-			prefix?: ReactNode;
-			/** Tints the icon; the text stays neutral at every tone. */
-			tone?: StripTone;
-	  };

frontend/src/container/BottomStrip/useBottomStrip.ts

@@ -1,25 +0,0 @@
-import { useEffect, useId } from 'react';
-
-import { useBottomStripStore } from './store/useBottomStripStore';
-import type { StripItem } from './types';
-
-/**
- * Puts `items` in the bottom strip for as long as the calling page is mounted.
- * Pass null to show nothing and let the version through. The left is the only
- * side a page contributes to; the right is the strip's own.
- *
- * There is no refresh API by design: a page that refetches re-renders, which
- * produces new items, which re-runs this effect. Memoise the array where it is
- * built, or the store is written on every render.
- */
-export function useBottomStrip(items: StripItem[] | null): void {
-	const ownerId = useId();
-	const setLeft = useBottomStripStore((state) => state.setLeft);
-	const clearLeft = useBottomStripStore((state) => state.clearLeft);
-
-	useEffect(() => {
-		setLeft(ownerId, items);
-
-		return (): void => clearLeft(ownerId);
-	}, [items, ownerId, setLeft, clearLeft]);
-}

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -1,8 +1,6 @@
 .create-alert-v2-footer {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0;
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);

frontend/src/container/ExplorerActions/AddToDashboardButton.tsx

@@ -1,109 +0,0 @@
-import { useState } from 'react';
-import { Grid2X2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import logEvent from 'api/common/logEvent';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 } from 'uuid';
-
-import {
-	EXPLORER_ACTION_EVENTS,
-	getExplorerActionEventPayload,
-	getExportPanelType,
-} from './utils';
-
-function AddToDashboardButton({
-	query,
-	sourcepage,
-	panelType,
-	isOneChartPerQuery = false,
-}: {
-	query: Query | null;
-	sourcepage: DataSource;
-	panelType?: PANEL_TYPES;
-	isOneChartPerQuery?: boolean;
-}): JSX.Element {
-	const [queryToExport, setQueryToExport] = useState<Query | null>(null);
-	const { panelType: contextPanelType } = useQueryBuilder();
-	const { safeNavigate } = useSafeNavigate();
-	const getExportToDashboardLink = useGetExportToDashboardLink();
-
-	const open = (): void => {
-		if (!query) {
-			return;
-		}
-		void logEvent(
-			EXPLORER_ACTION_EVENTS[sourcepage].addToDashboard,
-			getExplorerActionEventPayload({
-				sourcepage,
-				panelType: contextPanelType,
-				isOneChartPerQuery,
-			}),
-		);
-		setQueryToExport(query);
-	};
-
-	const handleExport = (
-		dashboard: ExportDashboard | null,
-		isNewDashboard?: boolean,
-	): void => {
-		if (!dashboard || !queryToExport) {
-			return;
-		}
-		const exportPanelType = panelType ?? getExportPanelType(contextPanelType);
-
-		void logEvent(EXPLORER_ACTION_EVENTS[sourcepage].exported, {
-			...getExplorerActionEventPayload({
-				sourcepage,
-				panelType: contextPanelType,
-				isOneChartPerQuery,
-			}),
-			isNewDashboard,
-			dashboardName: dashboard.title,
-		});
-
-		const link = getExportToDashboardLink({
-			query: queryToExport,
-			panelType: exportPanelType,
-			dashboardId: dashboard.id,
-			widgetId: v4(),
-		});
-		if (link) {
-			safeNavigate(link);
-		}
-	};
-
-	const button = (
-		<Button
-			variant="ghost"
-			color="secondary"
-			size="icon"
-			disabled={!query}
-			onClick={open}
-			prefix={<Grid2X2 size={16} />}
-			aria-label="Add to dashboard"
-			data-testid="explorer-add-to-dashboard"
-		/>
-	);
-
-	return (
-		<>
-			<TooltipSimple title="Add to dashboard">{button}</TooltipSimple>
-			<ExportPanelContainer
-				open={queryToExport !== null}
-				onClose={(): void => setQueryToExport(null)}
-				query={queryToExport}
-				onExport={handleExport}
-			/>
-		</>
-	);
-}
-
-export default AddToDashboardButton;

frontend/src/container/ExplorerActions/CreateAlertButton.tsx

@@ -1,61 +0,0 @@
-import { useHistory } from 'react-router-dom';
-import { ConciergeBell } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import logEvent from 'api/common/logEvent';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	EXPLORER_ACTION_EVENTS,
-	getCreateAlertLink,
-	getExplorerActionEventPayload,
-} from './utils';
-
-function CreateAlertButton({
-	query,
-	sourcepage,
-	isOneChartPerQuery = false,
-}: {
-	query: Query | null;
-	sourcepage: DataSource;
-	isOneChartPerQuery?: boolean;
-}): JSX.Element {
-	const history = useHistory();
-	const { panelType } = useQueryBuilder();
-
-	const createAlert = (): void => {
-		if (!query) {
-			return;
-		}
-		void logEvent(
-			EXPLORER_ACTION_EVENTS[sourcepage].createAlert,
-			getExplorerActionEventPayload({ sourcepage, panelType, isOneChartPerQuery }),
-		);
-		history.push(getCreateAlertLink({ query, panelType }));
-	};
-
-	const button = (
-		<Button
-			variant="ghost"
-			color="secondary"
-			size={isOneChartPerQuery ? 'icon' : 'md'}
-			disabled={!query}
-			onClick={createAlert}
-			prefix={<ConciergeBell size={16} />}
-			aria-label="Create an alert"
-			data-testid="explorer-create-alert"
-		>
-			{!isOneChartPerQuery && 'Create an alert'}
-		</Button>
-	);
-
-	return isOneChartPerQuery ? (
-		<TooltipSimple title="Create an alert">{button}</TooltipSimple>
-	) : (
-		button
-	);
-}
-
-export default CreateAlertButton;

frontend/src/container/ExplorerActions/ExplorerActions.tsx

@@ -1,39 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import AddToDashboardButton from './AddToDashboardButton';
-import CreateAlertButton from './CreateAlertButton';
-
-function ExplorerActions({
-	query,
-	dashboardQuery = query,
-	sourcepage,
-	panelType,
-	isOneChartPerQuery,
-}: {
-	query: Query | null;
-	// When the dashboard export differs from the alert one (traces list injects columns).
-	dashboardQuery?: Query | null;
-	sourcepage: DataSource;
-	panelType?: PANEL_TYPES;
-	isOneChartPerQuery?: boolean;
-}): JSX.Element {
-	return (
-		<>
-			<CreateAlertButton
-				query={query}
-				sourcepage={sourcepage}
-				isOneChartPerQuery={isOneChartPerQuery}
-			/>
-			<AddToDashboardButton
-				query={dashboardQuery}
-				sourcepage={sourcepage}
-				panelType={panelType}
-				isOneChartPerQuery={isOneChartPerQuery}
-			/>
-		</>
-	);
-}
-
-export default ExplorerActions;

frontend/src/container/ExplorerActions/__tests__/AddToDashboardButton.test.tsx

@@ -1,320 +0,0 @@
-import logEvent from 'api/common/logEvent';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	getExportQueryData as getLogsExportQuery,
-	getQueryByPanelType as getLogsQueryByPanelType,
-} from 'container/LogsExplorerViews/explorerUtils';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import {
-	getExportQueryData as getTracesExportQuery,
-	getQueryByPanelType as getTracesQueryByPanelType,
-} from 'container/TracesExplorer/explorerUtils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { buildExportPanelLink } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-import AddToDashboardButton from '../AddToDashboardButton';
-import { getExportPanelType } from '../utils';
-
-const DASHBOARD = { id: 'dash-1', title: 'Dash 1' };
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: jest.fn(),
-}));
-jest.mock('uuid', () => ({ v4: (): string => 'widget-1' }));
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-// The picker is the dialog's business; here it just hands a dashboard back.
-jest.mock('container/ExportPanel/ExportPanelContainer', () => ({
-	__esModule: true,
-	default: ({
-		open,
-		query,
-		onExport,
-	}: {
-		open: boolean;
-		query: Query | null;
-		onExport: (dashboard: { id: string; title: string }) => void;
-	}): JSX.Element | null =>
-		open ? (
-			<button
-				type="button"
-				data-testid="export-stub"
-				data-query={JSON.stringify(query)}
-				onClick={(): void => onExport({ id: 'dash-1', title: 'Dash 1' })}
-			>
-				export
-			</button>
-		) : null,
-}));
-
-const mockSafeNavigate = jest.fn();
-const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
-const mockedUseSafeNavigate = jest.mocked(useSafeNavigate);
-const mockedLogEvent = jest.mocked(logEvent);
-
-const FILTER = "service.name = 'frontend'";
-const COLUMNS = [{ name: 'service.name' }, { name: 'name' }];
-const options = { selectColumns: COLUMNS } as unknown as OptionsQuery;
-
-function stagedQuery(dataSource: DataSource, queryName = 'A'): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		id: `query-${queryName}`,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					queryName,
-					aggregateOperator: StringOperators.COUNT,
-					filter: { expression: FILTER },
-					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-function setPanelType(panelType: PANEL_TYPES): void {
-	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
-		typeof useQueryBuilder
-	>);
-}
-
-async function exportTo(
-	query: Query | null,
-	sourcepage: DataSource,
-	panelType: PANEL_TYPES,
-	panelTypeProp?: PANEL_TYPES,
-): Promise<void> {
-	setPanelType(panelType);
-	render(
-		<AddToDashboardButton
-			query={query}
-			sourcepage={sourcepage}
-			panelType={panelTypeProp}
-		/>,
-	);
-	const user = userEvent.setup();
-	await user.click(screen.getByTestId('explorer-add-to-dashboard'));
-	await user.click(screen.getByTestId('export-stub'));
-}
-
-function expectedLink(query: Query, panelType: PANEL_TYPES): string | null {
-	return buildExportPanelLink({
-		query,
-		panelType,
-		dashboardId: DASHBOARD.id,
-	});
-}
-
-describe('AddToDashboardButton', () => {
-	beforeEach(() => {
-		mockSafeNavigate.mockReset();
-		mockedLogEvent.mockClear();
-		mockedUseSafeNavigate.mockReturnValue({ safeNavigate: mockSafeNavigate });
-	});
-
-	it('is disabled without a query and the picker stays closed', () => {
-		setPanelType(PANEL_TYPES.LIST);
-		render(<AddToDashboardButton query={null} sourcepage={DataSource.LOGS} />);
-
-		expect(screen.getByTestId('explorer-add-to-dashboard')).toBeDisabled();
-		expect(screen.queryByTestId('export-stub')).not.toBeInTheDocument();
-	});
-
-	it('hands the picker the same query it will export', async () => {
-		const query = stagedQuery(DataSource.LOGS);
-		setPanelType(PANEL_TYPES.TIME_SERIES);
-		render(<AddToDashboardButton query={query} sourcepage={DataSource.LOGS} />);
-
-		await userEvent
-			.setup()
-			.click(screen.getByTestId('explorer-add-to-dashboard'));
-
-		expect(screen.getByTestId('export-stub')).toHaveAttribute(
-			'data-query',
-			JSON.stringify(query),
-		);
-	});
-
-	it("logs the explorer's own open and success events", async () => {
-		const query = stagedQuery(DataSource.TRACES);
-
-		await exportTo(query, DataSource.TRACES, PANEL_TYPES.TABLE);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			'Traces Explorer: Add to dashboard clicked',
-			{
-				sourcepage: DataSource.TRACES,
-				panelType: PANEL_TYPES.TABLE,
-			},
-		);
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			'Traces Explorer: Add to dashboard successful',
-			{
-				sourcepage: DataSource.TRACES,
-				panelType: PANEL_TYPES.TABLE,
-				isNewDashboard: undefined,
-				dashboardName: DASHBOARD.title,
-			},
-		);
-	});
-
-	it('a panel type from the page wins over the fold of the context one', async () => {
-		const query = stagedQuery(DataSource.METRICS);
-
-		// context says list, the page says time series
-		await exportTo(
-			query,
-			DataSource.METRICS,
-			PANEL_TYPES.LIST,
-			PANEL_TYPES.TIME_SERIES,
-		);
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expectedLink(query, PANEL_TYPES.TIME_SERIES),
-		);
-	});
-
-	describe('logs, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.LOGS);
-
-		it('list: the list request shaping with timestamp desc, panel type list', async () => {
-			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
-				page: 1,
-				pageSize: 100,
-				filters: { items: [], op: 'AND' },
-				filter: { expression: FILTER },
-			});
-			const exportQuery = getLogsExportQuery(
-				listRequest,
-				PANEL_TYPES.LIST,
-			) as Query;
-
-			await exportTo(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
-
-			expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([
-				{ columnName: 'timestamp', order: 'desc' },
-			]);
-			expect(mockSafeNavigate).toHaveBeenCalledWith(
-				expectedLink(exportQuery, PANEL_TYPES.LIST),
-			);
-		});
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'%s: staged query untouched, same panel type',
-			async (panelType) => {
-				const exportQuery = getLogsExportQuery(staged, panelType) as Query;
-
-				await exportTo(exportQuery, DataSource.LOGS, panelType);
-
-				expect(exportQuery).toBe(staged);
-				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					expectedLink(staged, panelType),
-				);
-			},
-		);
-	});
-
-	describe('traces, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.TRACES);
-
-		it('list: list shaping plus the selected columns, panel type list', async () => {
-			const exportQuery = getTracesExportQuery(
-				getTracesQueryByPanelType(staged, PANEL_TYPES.LIST),
-				getExportPanelType(PANEL_TYPES.LIST),
-				options,
-			);
-
-			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.LIST);
-
-			const [queryData] = exportQuery.builder.queryData;
-			expect(queryData.selectColumns).toStrictEqual(COLUMNS);
-			expect(queryData.groupBy).toStrictEqual([]);
-			expect(mockSafeNavigate).toHaveBeenCalledWith(
-				expectedLink(exportQuery, PANEL_TYPES.LIST),
-			);
-		});
-
-		it('trace: list shaping, no columns, panel type folds to time series', async () => {
-			const exportQuery = getTracesExportQuery(
-				getTracesQueryByPanelType(staged, PANEL_TYPES.TRACE),
-				getExportPanelType(PANEL_TYPES.TRACE),
-				options,
-			);
-
-			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.TRACE);
-
-			expect(exportQuery.builder.queryData[0].selectColumns).toBeUndefined();
-			expect(mockSafeNavigate).toHaveBeenCalledWith(
-				expectedLink(exportQuery, PANEL_TYPES.TIME_SERIES),
-			);
-		});
-
-		// Same as the alert: the list / trace order lives in ListView state and the
-		// page shapes the export without it, so the panel query has no order by.
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'%s: order by is not carried into the panel query',
-			async (panelType) => {
-				expect(staged.builder.queryData[0].orderBy).toHaveLength(1);
-				const exportQuery = getTracesExportQuery(
-					getTracesQueryByPanelType(staged, panelType),
-					getExportPanelType(panelType),
-					options,
-				);
-
-				await exportTo(exportQuery, DataSource.TRACES, panelType);
-
-				expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([]);
-				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					expectedLink(exportQuery, getExportPanelType(panelType)),
-				);
-			},
-		);
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'%s: staged query untouched, same panel type',
-			async (panelType) => {
-				const exportQuery = getTracesExportQuery(
-					getTracesQueryByPanelType(staged, panelType),
-					getExportPanelType(panelType),
-					options,
-				);
-
-				await exportTo(exportQuery, DataSource.TRACES, panelType);
-
-				expect(exportQuery).toBe(staged);
-				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					expectedLink(staged, panelType),
-				);
-			},
-		);
-	});
-
-	it('metrics: the chart query as is, panel type time series from the page', async () => {
-		const query = stagedQuery(DataSource.METRICS);
-
-		await exportTo(
-			query,
-			DataSource.METRICS,
-			PANEL_TYPES.TIME_SERIES,
-			PANEL_TYPES.TIME_SERIES,
-		);
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expectedLink(query, PANEL_TYPES.TIME_SERIES),
-		);
-	});
-});

frontend/src/container/ExplorerActions/__tests__/CreateAlertButton.test.tsx

@@ -1,245 +0,0 @@
-import { useHistory } from 'react-router-dom';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import {
-	getExportQueryData as getLogsExportQuery,
-	getQueryByPanelType as getLogsQueryByPanelType,
-} from 'container/LogsExplorerViews/explorerUtils';
-import { getQueryByPanelType as getTracesQueryByPanelType } from 'container/TracesExplorer/explorerUtils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-import CreateAlertButton from '../CreateAlertButton';
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useHistory: jest.fn(),
-}));
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
-const mockPush = jest.fn();
-const mockedUseHistory = jest.mocked(useHistory);
-const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
-const mockedLogEvent = jest.mocked(logEvent);
-
-const FILTER = "service.name = 'frontend'";
-const ORDER_BY = [{ columnName: 'timestamp', order: 'asc' }];
-
-function stagedQuery(
-	dataSource: DataSource,
-	aggregateOperator: StringOperators,
-	queryName = 'A',
-): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		id: `query-${queryName}`,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					queryName,
-					aggregateOperator,
-					filter: { expression: FILTER },
-					orderBy: ORDER_BY,
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-function pushedQuery(): Query {
-	expect(mockPush).toHaveBeenCalledTimes(1);
-	const [path, search] = (mockPush.mock.calls[0][0] as string).split('?');
-	expect(path).toBe(ROUTES.ALERTS_NEW);
-	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
-	return JSON.parse(raw as string);
-}
-
-function setPanelType(panelType: PANEL_TYPES): void {
-	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
-		typeof useQueryBuilder
-	>);
-}
-
-async function clickCreateAlert(
-	query: Query | null,
-	sourcepage: DataSource,
-	panelType: PANEL_TYPES,
-): Promise<void> {
-	setPanelType(panelType);
-	render(<CreateAlertButton query={query} sourcepage={sourcepage} />);
-	await userEvent.setup().click(screen.getByTestId('explorer-create-alert'));
-}
-
-describe('CreateAlertButton', () => {
-	beforeEach(() => {
-		mockPush.mockReset();
-		mockedLogEvent.mockClear();
-		mockedUseHistory.mockReturnValue({ push: mockPush } as unknown as ReturnType<
-			typeof useHistory
-		>);
-	});
-
-	it('is disabled and does nothing without a query', async () => {
-		await clickCreateAlert(null, DataSource.LOGS, PANEL_TYPES.LIST);
-
-		expect(screen.getByTestId('explorer-create-alert')).toBeDisabled();
-		expect(mockPush).not.toHaveBeenCalled();
-	});
-
-	it("logs the explorer's own create alert event", async () => {
-		const query = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
-
-		await clickCreateAlert(query, DataSource.TRACES, PANEL_TYPES.TIME_SERIES);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith('Traces Explorer: Create alert', {
-			sourcepage: DataSource.TRACES,
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-	});
-
-	it('one chart per query on metrics: icon only, and the event carries the layout', async () => {
-		setPanelType(PANEL_TYPES.TIME_SERIES);
-		render(
-			<CreateAlertButton
-				query={stagedQuery(DataSource.METRICS, StringOperators.COUNT)}
-				sourcepage={DataSource.METRICS}
-				isOneChartPerQuery
-			/>,
-		);
-		const button = screen.getByTestId('explorer-create-alert');
-		expect(button).not.toHaveTextContent('Create an alert');
-
-		await userEvent.setup().click(button);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			'Metrics Explorer: Add to alert clicked',
-			{
-				sourcepage: DataSource.METRICS,
-				panelType: PANEL_TYPES.TIME_SERIES,
-				tab: 'explorer',
-				oneChartPerQueryEnabled: true,
-			},
-		);
-	});
-
-	describe('logs, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.LOGS, StringOperators.NOOP);
-
-		it('list: count aggregation, no order by, filter and pagination as the page sent them', async () => {
-			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
-				page: 1,
-				pageSize: 100,
-				filters: { items: [], op: 'AND' },
-				filter: { expression: FILTER },
-			});
-			const exportQuery = getLogsExportQuery(
-				listRequest,
-				PANEL_TYPES.LIST,
-			) as Query;
-
-			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
-
-			const [queryData] = pushedQuery().builder.queryData;
-			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-			expect(queryData.orderBy).toStrictEqual([]);
-			expect(queryData.groupBy).toStrictEqual([]);
-			expect(queryData.filter).toStrictEqual({ expression: FILTER });
-			expect(queryData.pageSize).toBe(100);
-		});
-
-		it('time series: staged query as is, order by and group by kept', async () => {
-			const tsStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
-			const exportQuery = getLogsExportQuery(
-				tsStaged,
-				PANEL_TYPES.TIME_SERIES,
-			) as Query;
-
-			await clickCreateAlert(
-				exportQuery,
-				DataSource.LOGS,
-				PANEL_TYPES.TIME_SERIES,
-			);
-
-			const [queryData] = pushedQuery().builder.queryData;
-			expect(queryData).toStrictEqual(tsStaged.builder.queryData[0]);
-		});
-
-		it('table: staged query as is', async () => {
-			const tableStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
-			const exportQuery = getLogsExportQuery(
-				tableStaged,
-				PANEL_TYPES.TABLE,
-			) as Query;
-
-			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.TABLE);
-
-			expect(pushedQuery().builder).toStrictEqual(tableStaged.builder);
-		});
-	});
-
-	describe('traces, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.TRACES, StringOperators.NOOP);
-
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'%s: count aggregation, group by cleared by the list shaping, filter kept',
-			async (panelType) => {
-				const exportQuery = getTracesQueryByPanelType(staged, panelType);
-
-				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
-
-				const [queryData] = pushedQuery().builder.queryData;
-				expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-				expect(queryData.groupBy).toStrictEqual([]);
-				expect(queryData.filter).toStrictEqual({ expression: FILTER });
-			},
-		);
-
-		// The list / trace views keep their order in ListView state, and the page
-		// shapes the export without it, so the alert never sees an order by.
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'%s: order by is not carried, even when the staged query has one',
-			async (panelType) => {
-				expect(staged.builder.queryData[0].orderBy).toStrictEqual(ORDER_BY);
-				const exportQuery = getTracesQueryByPanelType(staged, panelType);
-
-				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
-
-				expect(pushedQuery().builder.queryData[0].orderBy).toStrictEqual([]);
-			},
-		);
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'%s: staged query as is',
-			async (panelType) => {
-				const aggStaged = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
-				const exportQuery = getTracesQueryByPanelType(aggStaged, panelType);
-
-				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
-
-				expect(pushedQuery().builder).toStrictEqual(aggStaged.builder);
-			},
-		);
-	});
-
-	it('metrics: the chart query as is', async () => {
-		const query = stagedQuery(DataSource.METRICS, StringOperators.COUNT);
-
-		await clickCreateAlert(query, DataSource.METRICS, PANEL_TYPES.TIME_SERIES);
-
-		expect(pushedQuery().builder).toStrictEqual(query.builder);
-	});
-});

frontend/src/container/ExplorerActions/__tests__/utils.test.ts

@@ -1,144 +0,0 @@
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { StringOperators } from 'types/common/queryBuilder';
-
-import { getCreateAlertLink, getExportPanelType } from '../utils';
-
-function withFirstQuery(
-	base: Query,
-	overrides: Partial<Query['builder']['queryData'][number]>,
-): Query {
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [{ ...base.builder.queryData[0], ...overrides }],
-		},
-	};
-}
-
-function decodeQuery(link: string): Query {
-	const search = link.split('?')[1];
-	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
-	return JSON.parse(raw as string);
-}
-
-describe('getExportPanelType', () => {
-	it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE, PANEL_TYPES.LIST])(
-		'keeps %s',
-		(panelType) => {
-			expect(getExportPanelType(panelType)).toBe(panelType);
-		},
-	);
-
-	it.each([PANEL_TYPES.BAR, PANEL_TYPES.PIE, PANEL_TYPES.TRACE, null])(
-		'folds %s to time series',
-		(panelType) => {
-			expect(getExportPanelType(panelType)).toBe(PANEL_TYPES.TIME_SERIES);
-		},
-	);
-});
-
-describe('getCreateAlertLink', () => {
-	const orderBy = [{ columnName: 'timestamp', order: 'desc' }];
-
-	it('points at the new alert route with the query in the url', () => {
-		const query = initialQueriesMap.traces;
-		const link = getCreateAlertLink({
-			query,
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-
-		expect(link.startsWith(`${ROUTES.ALERTS_NEW}?`)).toBe(true);
-		expect(decodeQuery(link)).toStrictEqual(query);
-	});
-
-	it('logs list: noop becomes count and order by is dropped', () => {
-		const query = withFirstQuery(initialQueriesMap.logs, {
-			aggregateOperator: StringOperators.NOOP,
-			orderBy,
-		});
-
-		const [queryData] = decodeQuery(
-			getCreateAlertLink({
-				query,
-				panelType: PANEL_TYPES.LIST,
-			}),
-		).builder.queryData;
-
-		expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-		expect(queryData.orderBy).toStrictEqual([]);
-	});
-
-	it('logs time series keeps order by', () => {
-		const query = withFirstQuery(initialQueriesMap.logs, {
-			aggregateOperator: StringOperators.COUNT,
-			orderBy,
-		});
-
-		const [queryData] = decodeQuery(
-			getCreateAlertLink({
-				query,
-				panelType: PANEL_TYPES.TIME_SERIES,
-			}),
-		).builder.queryData;
-
-		expect(queryData.orderBy).toStrictEqual(orderBy);
-	});
-
-	it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-		'%s drops order by whatever the source',
-		(panelType) => {
-			const query = withFirstQuery(initialQueriesMap.traces, {
-				aggregateOperator: StringOperators.NOOP,
-				orderBy,
-			});
-
-			const [queryData] = decodeQuery(getCreateAlertLink({ query, panelType }))
-				.builder.queryData;
-
-			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-			expect(queryData.orderBy).toStrictEqual([]);
-		},
-	);
-
-	it('converts a noop on any query, not only the first', () => {
-		const first = initialQueriesMap.logs.builder.queryData[0];
-		const query: Query = {
-			...initialQueriesMap.logs,
-			builder: {
-				...initialQueriesMap.logs.builder,
-				queryData: [
-					{ ...first, aggregateOperator: StringOperators.COUNT },
-					{ ...first, queryName: 'B', aggregateOperator: StringOperators.NOOP },
-				],
-			},
-		};
-
-		const operators = decodeQuery(
-			getCreateAlertLink({ query, panelType: PANEL_TYPES.TIME_SERIES }),
-		).builder.queryData.map((item) => item.aggregateOperator);
-
-		expect(operators).toStrictEqual([
-			StringOperators.COUNT,
-			StringOperators.COUNT,
-		]);
-	});
-
-	it('does not mutate the query it is given', () => {
-		const query = withFirstQuery(initialQueriesMap.logs, {
-			aggregateOperator: StringOperators.NOOP,
-			orderBy,
-		});
-		const snapshot = JSON.stringify(query);
-
-		getCreateAlertLink({
-			query,
-			panelType: PANEL_TYPES.LIST,
-		});
-
-		expect(JSON.stringify(query)).toBe(snapshot);
-	});
-});

frontend/src/container/ExplorerActions/utils.ts

@@ -1,85 +0,0 @@
-import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import {
-	MetricsExplorerEventKeys,
-	MetricsExplorerEvents,
-} from 'container/MetricsExplorer/events';
-import { cloneDeep } from 'lodash-es';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-export const EXPLORER_ACTION_EVENTS: Record<
-	DataSource,
-	{ createAlert: string; addToDashboard: string; exported: string }
-> = {
-	[DataSource.LOGS]: {
-		createAlert: 'Logs Explorer: Create alert',
-		addToDashboard: 'Logs Explorer: Add to dashboard clicked',
-		exported: 'Logs Explorer: Add to dashboard successful',
-	},
-	[DataSource.TRACES]: {
-		createAlert: 'Traces Explorer: Create alert',
-		addToDashboard: 'Traces Explorer: Add to dashboard clicked',
-		exported: 'Traces Explorer: Add to dashboard successful',
-	},
-	[DataSource.METRICS]: {
-		createAlert: MetricsExplorerEvents.AddToAlertClicked,
-		addToDashboard: MetricsExplorerEvents.AddToDashboardClicked,
-		exported: MetricsExplorerEvents.AddToDashboardSuccessful,
-	},
-};
-
-export function getExplorerActionEventPayload({
-	sourcepage,
-	panelType,
-	isOneChartPerQuery,
-}: {
-	sourcepage: DataSource;
-	panelType: PANEL_TYPES | null;
-	isOneChartPerQuery: boolean;
-}): Record<string, unknown> {
-	if (sourcepage !== DataSource.METRICS) {
-		return { sourcepage, panelType };
-	}
-	return {
-		sourcepage,
-		panelType,
-		[MetricsExplorerEventKeys.Tab]: 'explorer',
-		[MetricsExplorerEventKeys.OneChartPerQueryEnabled]: isOneChartPerQuery,
-	};
-}
-
-export function getExportPanelType(panelType: PANEL_TYPES | null): PANEL_TYPES {
-	return panelType && AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
-		? panelType
-		: PANEL_TYPES.TIME_SERIES;
-}
-
-// Alerts need an aggregation, and list style views carry an order the alert
-// cannot use.
-export function getCreateAlertLink({
-	query,
-	panelType,
-}: {
-	query: Query;
-	panelType: PANEL_TYPES | null;
-}): string {
-	const isListStyle =
-		panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
-
-	const alertQuery = cloneDeep(query);
-	alertQuery.builder.queryData = alertQuery.builder.queryData.map((item) => ({
-		...item,
-		aggregateOperator:
-			item.aggregateOperator === StringOperators.NOOP
-				? StringOperators.COUNT
-				: item.aggregateOperator,
-		orderBy: isListStyle ? [] : item.orderBy,
-	}));
-
-	return `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-		JSON.stringify(alertQuery),
-	)}`;
-}

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,8 +1,6 @@
 .explorer-options-container {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -1,8 +1,6 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0;
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;

frontend/src/container/Home/Home.styles.scss

@@ -1,6 +1,7 @@
 .home-container {
 	display: flex;
 	flex-direction: column;
+	min-height: 100vh;
 	overflow-y: auto;
 	height: 100%;
 	width: 100%;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/EventsContent.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
-import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
+import { DataType } from 'container/LogDetailedView/TableView';
 
 import styles from './EventsContent.module.scss';
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -24,7 +24,6 @@ const accountsResponse: ListAccounts200 = {
 				agentReport: {
 					timestampMillis: 1747114366214,
 					data: null,
-					syncState: null,
 				},
 				providerAccountId: PROVIDER_ACCOUNT_ID,
 				removedAt: null,

frontend/src/container/Licenses/Licenses.styles.scss

@@ -1,4 +1,7 @@
 .licenses-page {
+	max-height: 100vh;
+	overflow: hidden;
+
 	.licenses-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);
@@ -29,6 +32,7 @@
 
 		.licenses-page-content {
 			flex: 1;
+			height: calc(100vh - 48px);
 			background: var(--l1-background);
 			padding: 10px 8px;
 			overflow-y: auto;

frontend/src/container/ListAlertRules/ListAlertRules.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	flex: 1;
+	height: calc(100vh - 62px);
 	min-height: 400px;
 }
 

frontend/src/container/LogDetailedView/ActionItem.tsx

@@ -0,0 +1,64 @@
+import { memo, useCallback, useMemo } from 'react';
+import { CircleMinus, CirclePlus } from '@signozhq/icons';
+import { Button, Col, Popover } from 'antd';
+import { OPERATORS } from 'constants/queryBuilder';
+import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+function ActionItem({
+	fieldKey,
+	fieldValue,
+	onClickActionItem,
+}: ActionItemProps): JSX.Element {
+	const handleClick = useCallback(
+		(operator: string) => {
+			const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
+
+			onClickActionItem(fieldKey, validatedFieldValue, operator);
+		},
+		[onClickActionItem, fieldKey, fieldValue],
+	);
+
+	const onClickHandler = useCallback(
+		(operator: string) => (): void => {
+			handleClick(operator);
+		},
+		[handleClick],
+	);
+
+	const PopOverMenuContent = useMemo(
+		() => (
+			<Col>
+				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.IN)}>
+					<CirclePlus size={12} /> Filter for value
+				</Button>
+				<br />
+				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.NIN)}>
+					<CircleMinus size={12} /> Filter out value
+				</Button>
+			</Col>
+		),
+		[onClickHandler],
+	);
+	return (
+		<Popover placement="bottomLeft" content={PopOverMenuContent} trigger="click">
+			<Button type="text" size="small">
+				...
+			</Button>
+		</Popover>
+	);
+}
+
+export interface ActionItemProps {
+	fieldKey: string;
+	fieldValue: string;
+	onClickActionItem: (
+		fieldKey: string,
+		fieldValue: string,
+		operator: string,
+		dataType?: DataTypes,
+		fieldType?: string,
+	) => void;
+}
+
+export default memo(ActionItem);

frontend/src/container/LogDetailedView/BodyTitleRenderer.styles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const TitleWrapper = styled.span`
+	user-select: text !important;
+	cursor: text;
+
+	.hover-reveal {
+		visibility: hidden;
+	}
+
+	&:hover .hover-reveal {
+		visibility: visible;
+	}
+`;

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -0,0 +1,247 @@
+import { useCallback } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { orange } from '@ant-design/colors';
+import { Settings } from '@signozhq/icons';
+import {
+	type BaseMenuItem,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
+import {
+	negateOperator,
+	OPERATORS,
+	QUERY_BUILDER_FUNCTIONS,
+} from 'constants/antlrQueryConstants';
+import { FeatureKeys } from 'constants/features';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
+import { useNotifications } from 'hooks/useNotifications';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { useAppContext } from 'providers/App/App';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { TitleWrapper } from './BodyTitleRenderer.styles';
+import { DROPDOWN_KEY } from './constant';
+import { BodyTitleRendererProps } from './LogDetailedView.types';
+import {
+	generateFieldKeyForArray,
+	getDataTypes,
+	removeObjectFromString,
+} from './utils';
+
+function BodyTitleRenderer({
+	title,
+	parentIsArray = false,
+	nodeKey,
+	value,
+	handleChangeSelectedView,
+}: BodyTitleRendererProps): JSX.Element {
+	const { onAddToQuery } = useActiveLog();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+
+	const { featureFlags } = useAppContext();
+	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+
+	const cleanedNodeKey = removeObjectFromString(nodeKey);
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
+
+	// Group by is supported only for body json query enabled and not for array elements
+	const isGroupBySupported =
+		isBodyJsonQueryEnabled && !cleanedNodeKey.includes('[]');
+
+	const filterHandler = (isFilterIn: boolean) => (): void => {
+		if (parentIsArray) {
+			onAddToQuery(
+				generateFieldKeyForArray(
+					cleanedNodeKey,
+					getDataTypes(value),
+					isBodyJsonQueryEnabled,
+				),
+				`${value}`,
+				isFilterIn
+					? QUERY_BUILDER_FUNCTIONS.HAS
+					: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
+				parentIsArray ? getDataTypes([value]) : getDataTypes(value),
+			);
+		} else {
+			onAddToQuery(
+				`body.${cleanedNodeKey}`,
+				`${value}`,
+				isFilterIn ? OPERATORS['='] : OPERATORS['!='],
+				getDataTypes(value),
+			);
+		}
+	};
+
+	const groupByHandler = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+
+		const groupByKey = parentIsArray
+			? generateFieldKeyForArray(
+					cleanedNodeKey,
+					getDataTypes(value),
+					isBodyJsonQueryEnabled,
+				)
+			: `body.${cleanedNodeKey}`;
+
+		const fieldDataType = getDataTypes(value);
+		const normalizedDataType: DataTypes | undefined = Object.values(
+			DataTypes,
+		).includes(fieldDataType as DataTypes)
+			? (fieldDataType as DataTypes)
+			: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				if (index === 0) {
+					const newGroupByItem: BaseAutocompleteData = {
+						key: groupByKey,
+						type: '',
+						dataType: normalizedDataType,
+					};
+
+					return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+	}, [
+		cleanedNodeKey,
+		handleChangeSelectedView,
+		isBodyJsonQueryEnabled,
+		parentIsArray,
+		stagedQuery,
+		updateQueriesData,
+		value,
+	]);
+
+	const onClickHandler = (key: string): void => {
+		const mapper = {
+			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
+			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
+			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
+		};
+
+		const handler = mapper[key];
+
+		if (handler) {
+			handler();
+		}
+	};
+
+	const menuItems: BaseMenuItem[] = [
+		{
+			key: DROPDOWN_KEY.FILTER_IN,
+			label: `Filter for ${value}`,
+		},
+		{
+			key: DROPDOWN_KEY.FILTER_OUT,
+			label: `Filter out ${value}`,
+		},
+		...(isGroupBySupported
+			? [
+					{
+						key: DROPDOWN_KEY.GROUP_BY,
+						label: `Group by ${nodeKey}`,
+					},
+				]
+			: []),
+	];
+
+	const handleNodeClick = useCallback(
+		(e: React.MouseEvent): void => {
+			// Prevent tree node expansion/collapse
+			e.stopPropagation();
+			let copyText: string;
+
+			// Check if value is an object or array
+			const isObject = typeof value === 'object' && value !== null;
+
+			if (isObject) {
+				// For objects/arrays, stringify the entire structure
+				copyText = JSON.stringify(value, null, 2);
+			} else if (parentIsArray) {
+				// array elements
+				copyText = `${value}`;
+			} else {
+				// primitive values
+				const valueStr = typeof value === 'string' ? value : String(value);
+				copyText = valueStr;
+			}
+
+			setCopy(copyText);
+
+			if (copyText) {
+				const notificationMessage = isObject
+					? `${cleanedNodeKey} object copied to clipboard`
+					: `${cleanedNodeKey} copied to clipboard`;
+
+				notifications.success({
+					message: notificationMessage,
+					key: notificationMessage,
+				});
+			}
+		},
+		[cleanedNodeKey, parentIsArray, setCopy, value, notifications],
+	);
+
+	return (
+		<TitleWrapper onClick={handleNodeClick}>
+			{typeof value !== 'object' && (
+				<span
+					onClick={(e): void => {
+						e.stopPropagation();
+						e.preventDefault();
+					}}
+					onMouseDown={(e): void => e.preventDefault()}
+				>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start">
+							<div data-log-detail-ignore="true">
+								{menuItems.map((item) => (
+									<DropdownMenuItem
+										key={item.key}
+										onSelect={(): void => onClickHandler(item.key as string)}
+									>
+										{item.label}
+									</DropdownMenuItem>
+								))}
+							</div>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</span>
+			)}
+			{title.toString()}{' '}
+			{!parentIsArray && typeof value !== 'object' && (
+				<span>
+					: <span style={{ color: orange[6] }}>{`${value}`}</span>
+				</span>
+			)}
+		</TitleWrapper>
+	);
+}
+
+export default BodyTitleRenderer;

frontend/src/container/LogDetailedView/JsonView.tsx

@@ -0,0 +1,92 @@
+import { useMemo, useState } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { JSONViewProps } from './LogDetailedView.types';
+import { aggregateAttributesResourcesToString } from './utils';
+
+import './JsonView.styles.scss';
+
+function JSONView({ logData }: JSONViewProps): JSX.Element {
+	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
+
+	const LogJsonData = useMemo(
+		() => aggregateAttributesResourcesToString(logData),
+		[logData],
+	);
+
+	const isDarkMode = useIsDarkMode();
+
+	const options: EditorProps['options'] = {
+		automaticLayout: true,
+		readOnly: true,
+		wordWrap: isWrapWord ? 'on' : 'off',
+		minimap: {
+			enabled: false,
+		},
+		fontWeight: '400',
+		// fontFamily: 'SF Mono',
+		fontFamily: 'Geist Mono',
+		fontSize: 13,
+		lineHeight: 18,
+		colorDecorators: true,
+		scrollBeyondLastLine: false,
+		scrollbar: {
+			vertical: 'hidden',
+			horizontal: 'hidden',
+		},
+		folding: false,
+	};
+
+	const handleWrapWord = (checked: boolean): void => {
+		setIsWrapWord(checked);
+	};
+
+	function setEditorTheme(monaco: Monaco): void {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: {
+				'editor.background': Color.BG_INK_400,
+			},
+			// fontFamily: 'SF Mono',
+			fontFamily: 'Space Mono',
+			fontSize: 12,
+			fontWeight: 'normal',
+			lineHeight: 18,
+			letterSpacing: -0.06,
+		});
+	}
+
+	return (
+		<div className="json-view-container">
+			<MEditor
+				value={LogJsonData}
+				language="json"
+				options={options}
+				onChange={(): void => {}}
+				height="68vh"
+				theme={isDarkMode ? 'my-theme' : 'light'}
+				beforeMount={setEditorTheme}
+			/>
+
+			<div className="json-view-footer">
+				<div className="log-switch">
+					<div className="wrap-word-switch">
+						<Typography.Text>Wrap text</Typography.Text>
+						<Switch value={isWrapWord} onChange={handleWrapWord} />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default JSONView;

frontend/src/container/LogDetailedView/LogDetailedView.types.ts

@@ -1,5 +1,14 @@
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { ILog } from 'types/api/logs/log';
+
+export interface BodyTitleRendererProps {
+	title: string;
+	nodeKey: string;
+	value: unknown;
+	parentIsArray?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}
 
 export type AnyObject = { [key: string]: any };
 
@@ -13,21 +22,6 @@ export interface IFieldAttributes {
 	logType?: MetricsType;
 }
 
-/** One key/field/value row in an attribute table. */
-export interface DataType {
-	key: string;
-	field: string;
-	value: string;
-}
-
-export interface ActionItemProps {
-	fieldKey: string;
-	fieldValue: string;
-	onClickActionItem: (
-		fieldKey: string,
-		fieldValue: string,
-		operator: string,
-		dataType?: DataTypes,
-		fieldType?: string,
-	) => void;
+export interface JSONViewProps {
+	logData: ILog;
 }

frontend/src/container/LogDetailedView/Overview.tsx

@@ -1,13 +1,32 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Switch } from '@signozhq/ui/switch';
+import { Collapse } from 'antd';
+import { Divider } from '@signozhq/ui/divider';
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ChevronDown, ChevronRight, Search } from '@signozhq/icons';
+import { useIsLogDetailsV2 } from 'components/LogDetail/useIsLogDetailsV2';
 import { DataViewer } from 'periscope/components/DataViewer';
+import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
+import { ActionItemProps } from './ActionItem';
 import { useLogAttributeActions } from './hooks/useLogAttributeActions';
+import TableView from './TableView';
 import {
 	aggregateAttributesResourcesToObject,
 	buildPrettyViewData,
+	getBodyDisplayString,
 	getSanitizedLogBody,
+	removeEscapeCharacters,
 } from './utils';
 
 import './Overview.styles.scss';
@@ -19,58 +38,247 @@ const MAX_BODY_SANITIZE_CHARS = 64 * 1024;
 interface OverviewProps {
 	logData: ILog;
 	isListViewPanel?: boolean;
+	selectedOptions: OptionsQuery;
+	listViewPanelSelectedFields?: IField[] | null;
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	onApplyLogFilter?: (expression: string) => void;
 }
 
+type Props = OverviewProps &
+	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
+	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
+
 function Overview({
 	logData,
+	onAddToQuery,
+	onClickActionItem,
 	isListViewPanel = false,
+	selectedOptions,
+	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	onApplyLogFilter,
-}: OverviewProps): JSX.Element {
+}: Props): JSX.Element {
+	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
+	const [isAttributesExpanded, setIsAttributesExpanded] =
+		useState<boolean>(true);
+	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
+
+	const isDarkMode = useIsDarkMode();
+
 	const { actions, visibleActions } = useLogAttributeActions({
 		handleChangeSelectedView,
 		isListViewPanel,
 		onApplyLogFilter,
 	});
 
-	const raw = aggregateAttributesResourcesToObject(logData);
-	const prettyData = buildPrettyViewData(raw);
+	const isLogDetailsV2 = useIsLogDetailsV2();
+
+	if (isLogDetailsV2) {
+		const raw = aggregateAttributesResourcesToObject(logData);
+		const prettyData = buildPrettyViewData(raw);
+		return (
+			<div className="overview-container">
+				<DataViewer
+					data={prettyData}
+					drawerKey="logs-details"
+					fontSize={13}
+					prettyViewProps={{
+						actions,
+						visibleActions,
+						renderLeafValue: (value, keyPath): ReactNode | undefined => {
+							// Sanitize (unescape + ANSI→color) string values under `body`.
+							// Skip huge ones (render raw, still safe) to avoid the sanitize
+							// choke;
+							if (
+								typeof value !== 'string' ||
+								keyPath[keyPath.length - 1] !== 'body' ||
+								value.length > MAX_BODY_SANITIZE_CHARS
+							) {
+								return undefined;
+							}
+							return (
+								<span
+									className="log-body-value"
+									// Safe: getSanitizedLogBody runs the value through dompurify.
+									// eslint-disable-next-line react/no-danger
+									dangerouslySetInnerHTML={{
+										__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
+									}}
+								/>
+							);
+						},
+					}}
+					jsonString={JSON.stringify(raw, null, 2)}
+				/>
+			</div>
+		);
+	}
+
+	const options: EditorProps['options'] = {
+		automaticLayout: true,
+		readOnly: true,
+		wordWrap: isWrapWord ? 'on' : 'off',
+		minimap: {
+			enabled: false,
+		},
+		fontWeight: '400',
+		fontFamily: 'Geist Mono',
+		fontSize: 13,
+		lineHeight: 18,
+		colorDecorators: true,
+		scrollBeyondLastLine: false,
+		scrollbar: {
+			vertical: 'hidden',
+			horizontal: 'hidden',
+		},
+	};
+
+	const handleWrapWord = (checked: boolean): void => {
+		setIsWrapWord(checked);
+	};
+
+	function setEditorTheme(monaco: Monaco): void {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: {
+				'editor.background': Color.BG_INK_400,
+			},
+		});
+	}
+
+	const handleSearchVisible = (): void => {
+		setIsSearchVisible(!isSearchVisible);
+	};
+
+	const toogleAttributePanelOpenState = (): void => {
+		setIsAttributesExpanded(!isAttributesExpanded);
+	};
 
 	return (
 		<div className="overview-container">
-			<DataViewer
-				data={prettyData}
-				drawerKey="logs-details"
-				fontSize={13}
-				prettyViewProps={{
-					actions,
-					visibleActions,
-					renderLeafValue: (value, keyPath): ReactNode | undefined => {
-						// Sanitize (unescape + ANSI→color) string values under `body`.
-						// Skip huge ones (render raw, still safe) to avoid the sanitize
-						// choke;
-						if (
-							typeof value !== 'string' ||
-							keyPath[keyPath.length - 1] !== 'body' ||
-							value.length > MAX_BODY_SANITIZE_CHARS
-						) {
-							return undefined;
-						}
-						return (
-							<span
-								className="log-body-value"
-								// Safe: getSanitizedLogBody runs the value through dompurify.
-								// eslint-disable-next-line react/no-danger
-								dangerouslySetInnerHTML={{
-									__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
-								}}
-							/>
-						);
+			<Collapse
+				defaultActiveKey={['1']}
+				expandIcon={(props): ReactNode =>
+					props.isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+				}
+				items={[
+					{
+						key: '1',
+						label: (
+							<Badge color="vanilla">
+								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
+									body
+								</Typography.Text>
+							</Badge>
+						),
+						children: (
+							<div className="logs-body-content">
+								<MEditor
+									value={removeEscapeCharacters(getBodyDisplayString(logData.body))}
+									language="json"
+									options={options}
+									onChange={(): void => {}}
+									height="20vh"
+									theme={isDarkMode ? 'my-theme' : 'light'}
+									onMount={(_, monaco): void => {
+										document.fonts.ready.then(() => {
+											monaco.editor.remeasureFonts();
+										});
+									}}
+									beforeMount={setEditorTheme}
+								/>
+								<Divider
+									style={{
+										margin: 0,
+										border: isDarkMode
+											? `1px solid ${Color.BG_SLATE_500}`
+											: `1px solid ${Color.BG_VANILLA_200}`,
+									}}
+								/>
+								<div className="log-switch">
+									<div className="wrap-word-switch">
+										<Typography.Text>Wrap text</Typography.Text>
+										<Switch value={isWrapWord} onChange={handleWrapWord} />
+									</div>
+								</div>
+							</div>
+						),
+						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
+						className: 'collapse-content',
 					},
-				}}
-				jsonString={JSON.stringify(raw, null, 2)}
+				]}
+			/>
+
+			<Collapse
+				className="attribute-table"
+				defaultActiveKey={['1']}
+				bordered={false}
+				expandIcon={(props): ReactNode =>
+					props.isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+				}
+				items={[
+					{
+						key: '1',
+						label: (
+							<div
+								className="attribute-tab-header"
+								onClick={toogleAttributePanelOpenState}
+							>
+								<Badge color="vanilla">
+									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
+										Attributes
+									</Typography.Text>
+								</Badge>
+
+								{isAttributesExpanded && (
+									<Button
+										variant="link"
+										color="none"
+										className="action-btn"
+										prefix={<Search size={12} />}
+										onClick={(e): void => {
+											e.stopPropagation();
+											handleSearchVisible();
+										}}
+									>
+										Search
+									</Button>
+								)}
+							</div>
+						),
+						children: (
+							<>
+								{isSearchVisible && (
+									<Input
+										autoFocus
+										placeholder="Search for a field..."
+										className="search-input"
+										value={fieldSearchInput}
+										onChange={(e): void => setFieldSearchInput(e.target.value)}
+									/>
+								)}
+
+								<TableView
+									logData={logData}
+									onAddToQuery={onAddToQuery}
+									fieldSearchInput={fieldSearchInput}
+									onClickActionItem={onClickActionItem}
+									isListViewPanel={isListViewPanel}
+									selectedOptions={selectedOptions}
+									listViewPanelSelectedFields={listViewPanelSelectedFields}
+									handleChangeSelectedView={handleChangeSelectedView}
+								/>
+							</>
+						),
+						className: 'collapse-content attribute-collapse',
+					},
+				]}
 			/>
 		</div>
 	);
@@ -78,6 +286,7 @@ function Overview({
 
 Overview.defaultProps = {
 	isListViewPanel: false,
+	listViewPanelSelectedFields: null,
 	handleChangeSelectedView: undefined,
 };
 

frontend/src/container/LogDetailedView/TableView.styles.scss

@@ -0,0 +1,93 @@
+.attribute-table-container {
+	.ant-table {
+		background: var(--l2-background);
+
+		.ant-table-row:hover {
+			.ant-table-cell {
+				.value-field {
+					.action-btn {
+						display: flex;
+						position: absolute;
+						top: 50%;
+						right: 16px;
+						transform: translateY(-50%);
+						gap: 4px;
+					}
+				}
+			}
+		}
+
+		.ant-table-cell {
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			vertical-align: top;
+		}
+
+		.attribute-name {
+			.ant-btn {
+				&:hover {
+					background-color: none !important;
+				}
+			}
+		}
+
+		.attribute-pin {
+			cursor: pointer;
+
+			padding: 14px 8px 8px;
+			vertical-align: top;
+			text-align: center;
+
+			.log-attribute-pin {
+				padding: 0;
+
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.pin-attribute-icon {
+					border: none;
+
+					&.pinned svg {
+						fill: var(--accent-primary);
+					}
+				}
+			}
+		}
+
+		.value-field-container {
+			background: var(--l2-background);
+
+			&.attribute-pin {
+				background: var(--l2-background);
+			}
+
+			.value-field {
+				font-family: 'Geist Mono';
+
+				position: relative;
+			}
+
+			.action-btn {
+				display: none;
+				width: max-content;
+				position: absolute;
+				padding: 0 16px;
+				right: 0;
+
+				.filter-btn {
+					display: flex;
+					align-items: center;
+					border: none;
+					box-shadow: none;
+					border-radius: 2px;
+					background: var(--l3-background);
+					padding: 2px 3px;
+					gap: 3px;
+					height: 18px;
+					width: 20px;
+				}
+			}
+		}
+	}
+}

frontend/src/container/LogDetailedView/TableView.tsx

@@ -0,0 +1,349 @@
+import { useEffect, useMemo, useState } from 'react';
+import { generatePath } from 'react-router-dom';
+import { Link, Pin } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Space, TableColumnsType as ColumnsType, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import AddToQueryHOC, {
+	AddToQueryHOCProps,
+} from 'components/Logs/AddToQueryHOC';
+import { ResizeTable } from 'components/ResizeTable';
+import { OPERATORS } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { MetricsType } from 'container/MetricsApplication/constant';
+import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import history from 'lib/history';
+import { fieldSearchFilter } from 'lib/logs/fieldSearch';
+import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { openInNewTab } from 'utils/navigation';
+
+import { ActionItemProps } from './ActionItem';
+import { RESTRICTED_SELECTED_FIELDS } from './config';
+import FieldRenderer from './FieldRenderer';
+import TableViewActions from './TableView/TableViewActions';
+import {
+	filterKeyForField,
+	findKeyPath,
+	flattenObject,
+	getFieldAttributes,
+} from './utils';
+
+import './TableView.styles.scss';
+
+interface TableViewProps {
+	logData: ILog;
+	fieldSearchInput: string;
+	selectedOptions: OptionsQuery;
+	isListViewPanel?: boolean;
+	listViewPanelSelectedFields?: IField[] | null;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}
+
+type Props = TableViewProps &
+	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
+	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
+
+function TableView({
+	logData,
+	fieldSearchInput,
+	onAddToQuery,
+	onClickActionItem,
+	isListViewPanel = false,
+	selectedOptions,
+	listViewPanelSelectedFields,
+	handleChangeSelectedView,
+}: Props): JSX.Element | null {
+	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
+	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
+	const isDarkMode = useIsDarkMode();
+
+	const [pinnedAttributes, setPinnedAttributes] = useState<
+		Record<string, boolean>
+	>({});
+
+	useEffect(() => {
+		const pinnedAttributes: Record<string, boolean> = {};
+
+		if (isListViewPanel) {
+			listViewPanelSelectedFields?.forEach((val) => {
+				const path = findKeyPath(logData, val.name, '');
+				if (path) {
+					pinnedAttributes[path] = true;
+				}
+			});
+		} else {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			selectedOptions.selectColumns.forEach((val) => {
+				const path = findKeyPath(logData, val.name, '');
+				if (path) {
+					pinnedAttributes[path] = true;
+				}
+			});
+		}
+		// pin trace_id by default when present
+		if (logData?.trace_id) {
+			pinnedAttributes.trace_id = true;
+		}
+
+		setPinnedAttributes(pinnedAttributes);
+	}, [
+		logData,
+		selectedOptions.selectColumns,
+		listViewPanelSelectedFields,
+		isListViewPanel,
+	]);
+
+	// When USE_JSON_BODY is enabled, body arrives as a pre-parsed object. Serialize it
+	// back to a string so flattenObject keeps `body` as a single table row instead of
+	// recursively expanding it into dotted sub-keys (body.message, body.foo.bar, …),
+	// which would break the tree view in BodyContent that relies on record.field === 'body'.
+	const flattenLogData: Record<string, string> | null = useMemo(() => {
+		if (!logData) {
+			return null;
+		}
+		const normalizedLog =
+			typeof logData.body === 'object' && logData.body !== null
+				? { ...logData, body: JSON.stringify(logData.body) }
+				: logData;
+		return flattenObject(normalizedLog);
+	}, [logData]);
+
+	const handleClick = (
+		operator: string,
+		fieldKey: string,
+		fieldValue: string,
+		dataType: string | undefined,
+		fieldType: string | undefined,
+	): void => {
+		const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
+		if (onClickActionItem) {
+			onClickActionItem(
+				fieldKey,
+				validatedFieldValue,
+				operator,
+				dataType as DataTypes,
+				fieldType,
+			);
+		}
+	};
+
+	const onClickHandler =
+		(
+			operator: string,
+			fieldKey: string,
+			fieldValue: string,
+			dataType: string | undefined,
+			fieldType: MetricsType | undefined,
+		) =>
+		(): void => {
+			handleClick(operator, fieldKey, fieldValue, dataType, fieldType);
+			if (operator === OPERATORS['=']) {
+				setIsFilterInLoading(true);
+			}
+			if (operator === OPERATORS['!=']) {
+				setIsFilterOutLoading(true);
+			}
+		};
+
+	if (logData === null) {
+		return null;
+	}
+
+	const dataSource =
+		flattenLogData !== null &&
+		Object.keys(flattenLogData)
+			.filter((field) => fieldSearchFilter(field, fieldSearchInput))
+			.map((key) => ({
+				key,
+				field: key,
+				value: JSON.stringify(flattenLogData[key]),
+			}));
+
+	const onTraceHandler = (
+		record: DataType,
+		event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+	): void => {
+		if (flattenLogData === null) {
+			return;
+		}
+
+		const traceId = flattenLogData[record.field];
+
+		const spanId = flattenLogData?.span_id;
+
+		if (traceId) {
+			const basePath = generatePath(ROUTES.TRACE_DETAIL, {
+				id: traceId,
+			});
+
+			const route = spanId ? `${basePath}?spanId=${spanId}` : basePath;
+
+			if (event.ctrlKey || event.metaKey) {
+				// open the trace in new tab
+				openInNewTab(route);
+			} else {
+				history.push(route);
+			}
+		}
+	};
+
+	if (!dataSource) {
+		return null;
+	}
+
+	const columns: ColumnsType<DataType> = [
+		{
+			title: '',
+			dataIndex: 'pin',
+			key: 'pin',
+			width: 5,
+			align: 'left',
+			className: 'attribute-pin value-field-container',
+			render: (fieldData: Record<string, string>, record): JSX.Element => {
+				let pinColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500;
+
+				if (pinnedAttributes[record?.key]) {
+					pinColor = Color.BG_ROBIN_500;
+				}
+
+				return (
+					<div className="log-attribute-pin value-field">
+						<div
+							className={cx(
+								'pin-attribute-icon',
+								pinnedAttributes[record?.key] ? 'pinned' : '',
+							)}
+						>
+							{pinnedAttributes[record?.key] && <Pin size={14} color={pinColor} />}
+						</div>
+					</div>
+				);
+			},
+		},
+		{
+			title: 'Field',
+			dataIndex: 'field',
+			key: 'field',
+			width: 50,
+			align: 'left',
+			ellipsis: true,
+			className: 'attribute-name',
+			render: (field: string, record): JSX.Element => {
+				const renderedField = <FieldRenderer field={field} />;
+
+				if (record.field === 'trace_id') {
+					const traceId = flattenLogData[record.field];
+
+					return (
+						<Space size="middle" className="log-attribute">
+							<Typography.Text>{renderedField}</Typography.Text>
+
+							{traceId && (
+								<Tooltip title="Inspect in Trace" mouseLeaveDelay={0}>
+									<Button
+										className="periscope-btn"
+										onClick={(
+											event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+										): void => {
+											onTraceHandler(record, event);
+										}}
+									>
+										<Link size={15} />
+									</Button>
+								</Tooltip>
+							)}
+						</Space>
+					);
+				}
+
+				const fieldFilterKey = filterKeyForField(field);
+				const { dataType } = getFieldAttributes(field);
+				if (!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey)) {
+					return (
+						<AddToQueryHOC
+							fieldKey={fieldFilterKey}
+							fieldValue={flattenLogData[field]}
+							onAddToQuery={onAddToQuery}
+							fontSize={FontSize.SMALL}
+							dataType={dataType as DataTypes}
+						>
+							{renderedField}
+						</AddToQueryHOC>
+					);
+				}
+				return renderedField;
+			},
+		},
+		{
+			title: 'Value',
+			key: 'value',
+			width: 70,
+			ellipsis: false,
+			className: 'value-field-container attribute-value',
+			render: (fieldData: Record<string, string>, record): JSX.Element => (
+				<TableViewActions
+					fieldData={fieldData}
+					record={record}
+					isListViewPanel={isListViewPanel}
+					isfilterInLoading={isfilterInLoading}
+					isfilterOutLoading={isfilterOutLoading}
+					onClickHandler={onClickHandler}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			),
+		},
+	];
+	function sortPinnedAttributes(
+		data: Record<string, string>[],
+		sortingObj: Record<string, boolean>,
+	): Record<string, string>[] {
+		const sortingKeys = Object.keys(sortingObj);
+		return data.sort((a, b) => {
+			const aKey = a.key;
+			const bKey = b.key;
+			const aSortIndex = sortingKeys.indexOf(aKey);
+			const bSortIndex = sortingKeys.indexOf(bKey);
+
+			if (sortingObj[aKey] && !sortingObj[bKey]) {
+				return -1;
+			}
+			if (!sortingObj[aKey] && sortingObj[bKey]) {
+				return 1;
+			}
+			return aSortIndex - bSortIndex;
+		});
+	}
+
+	const sortedAttributes = sortPinnedAttributes(dataSource, pinnedAttributes);
+
+	return (
+		<ResizeTable
+			columns={columns}
+			tableLayout="fixed"
+			dataSource={sortedAttributes}
+			pagination={false}
+			showHeader={false}
+			className="attribute-table-container"
+		/>
+	);
+}
+
+TableView.defaultProps = {
+	isListViewPanel: false,
+	listViewPanelSelectedFields: null,
+	handleChangeSelectedView: undefined,
+};
+
+export interface DataType {
+	key: string;
+	field: string;
+	value: string;
+}
+
+export default TableView;

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -0,0 +1,62 @@
+.open-popover {
+	&.value-field {
+		.action-btn {
+			display: flex !important;
+			position: absolute !important;
+			top: 50% !important;
+			right: 16px !important;
+			transform: translateY(-50%) !important;
+			gap: 4px !important;
+		}
+	}
+}
+
+.selectable-tree {
+	.ant-tree-node-content-wrapper {
+		user-select: text !important;
+		cursor: text !important;
+		min-width: 0;
+	}
+
+	.ant-tree-title {
+		user-select: text !important;
+		cursor: text !important;
+		overflow-wrap: anywhere;
+	}
+}
+
+.table-view-actions-content {
+	.ant-popover-inner {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0px;
+		.more-filter-actions {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: normal;
+			letter-spacing: 0.14px;
+			padding: 12px 18px 12px 14px;
+
+			.ant-btn-icon {
+				margin-inline-end: 0px;
+			}
+		}
+
+		.more-filter-actions:hover {
+			background-color: unset !important;
+		}
+	}
+}

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -0,0 +1,532 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
+import cx from 'classnames';
+import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { OPERATORS } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { MetricsType } from 'container/MetricsApplication/constant';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
+import {
+	ArrowDownToDot,
+	ArrowUpFromDot,
+	Ellipsis,
+	RefreshCw,
+} from '@signozhq/icons';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { useTimezone } from 'providers/Timezone';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { RESTRICTED_SELECTED_FIELDS } from '../config';
+import { DataType } from '../TableView';
+import {
+	filterKeyForField,
+	getFieldAttributes,
+	getSanitizedLogBody,
+	parseFieldValue,
+	removeEscapeCharacters,
+} from '../utils';
+import useAsyncJSONProcessing from './useAsyncJSONProcessing';
+
+import './TableViewActions.styles.scss';
+
+interface ITableViewActionsProps {
+	fieldData: Record<string, string>;
+	record: DataType;
+	isListViewPanel: boolean;
+	isfilterInLoading: boolean;
+	isfilterOutLoading: boolean;
+	onClickHandler: (
+		operator: string,
+		fieldKey: string,
+		fieldValue: string,
+		dataType: string | undefined,
+		logType: MetricsType | undefined,
+	) => () => void;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}
+
+// Memoized Tree Component
+const MemoizedTree = React.memo<{ treeData: DataNode[] }>(({ treeData }) => (
+	<Tree
+		defaultExpandAll
+		showLine
+		treeData={treeData}
+		className="selectable-tree"
+	/>
+));
+
+MemoizedTree.displayName = 'MemoizedTree';
+
+// Body Content Component
+const BodyContent: React.FC<{
+	fieldData: Record<string, string>;
+	record: DataType;
+	bodyHtml: { __html: string };
+	textToCopy: string;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}> = React.memo(
+	({ fieldData, record, bodyHtml, textToCopy, handleChangeSelectedView }) => {
+		const { isLoading, treeData, error } = useAsyncJSONProcessing(
+			fieldData.value,
+			record.field === 'body',
+			handleChangeSelectedView,
+		);
+
+		// Show JSON tree if available, otherwise show HTML content
+		if (record.field === 'body' && treeData) {
+			return <MemoizedTree treeData={treeData} />;
+		}
+
+		if (record.field === 'body' && isLoading) {
+			return (
+				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+					<Spin size="small" />
+					<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
+				</div>
+			);
+		}
+
+		if (record.field === 'body' && error) {
+			return (
+				<span
+					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+				>
+					Error parsing Body JSON
+				</span>
+			);
+		}
+
+		if (record.field === 'body') {
+			return (
+				<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+					<span
+						style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+					>
+						<span dangerouslySetInnerHTML={bodyHtml} />
+					</span>
+				</CopyClipboardHOC>
+			);
+		}
+
+		return null;
+	},
+);
+
+BodyContent.displayName = 'BodyContent';
+
+export default function TableViewActions(
+	props: ITableViewActionsProps,
+): React.ReactElement {
+	const {
+		fieldData,
+		record,
+		isListViewPanel,
+		isfilterInLoading,
+		isfilterOutLoading,
+		onClickHandler,
+		handleChangeSelectedView,
+	} = props;
+
+	const { pathname } = useLocation();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
+
+	// there is no option for where clause in live logs page or infra monitoring
+	const isLiveLogsOrInfraPage = useMemo(
+		() =>
+			pathname === ROUTES.LIVE_LOGS ||
+			pathname === ROUTES.INFRASTRUCTURE_MONITORING_HOSTS ||
+			pathname === ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
+		[pathname],
+	);
+
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	// Memoize bodyHtml computation
+	const bodyHtml = useMemo(() => {
+		if (record.field !== 'body') {
+			return { __html: '' };
+		}
+
+		return {
+			__html: getSanitizedLogBody(record.value, { shouldEscapeHtml: true }),
+		};
+	}, [record.field, record.value]);
+
+	const fieldFilterKey = filterKeyForField(fieldData.field);
+
+	const handleGroupByAttribute = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+		const normalizedDataType: DataTypes | undefined =
+			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
+				? (dataType as DataTypes)
+				: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				// Only add groupBy for index 0
+				if (index === 0) {
+					const newGroupByItem: BaseAutocompleteData = {
+						key: fieldFilterKey,
+						type: fieldType || '',
+						dataType: normalizedDataType,
+					};
+
+					const updatedGroupBy = [...(item.groupBy || []), newGroupByItem];
+
+					return { ...item, groupBy: updatedGroupBy };
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+	}, [
+		stagedQuery,
+		updateQueriesData,
+		fieldFilterKey,
+		fieldType,
+		dataType,
+		handleChangeSelectedView,
+	]);
+
+	const handleReplaceFilter = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+		const normalizedDataType: DataTypes | undefined =
+			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
+				? (dataType as DataTypes)
+				: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				// Only replace filters for index 0
+				if (index === 0) {
+					const newFilterItem: BaseAutocompleteData = {
+						key: fieldFilterKey,
+						type: fieldType || '',
+						dataType: normalizedDataType,
+					};
+
+					// Create new filter items array with single IN filter
+					const newFilters = {
+						items: [
+							{
+								id: '',
+								key: newFilterItem,
+								op: OPERATORS.IN,
+								value: [parseFieldValue(fieldData.value)],
+							},
+						],
+						op: 'AND',
+					};
+
+					// Clear the expression and update filters
+					return {
+						...item,
+						filters: newFilters,
+						filter: { expression: '' },
+					};
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
+	}, [
+		stagedQuery,
+		updateQueriesData,
+		fieldFilterKey,
+		fieldType,
+		dataType,
+		fieldData,
+		handleChangeSelectedView,
+	]);
+
+	// Memoize textToCopy computation
+	const textToCopy = useMemo(() => {
+		let text = fieldData.value;
+		try {
+			text = text.replace(/^"|"$/g, '');
+		} catch (error) {
+			console.error(
+				'Failed to remove starting and ending quotes from the value',
+				error,
+			);
+		}
+		// If the value is valid JSON (object or array), pretty-print it for copying
+		try {
+			const parsed = JSON.parse(text);
+			if (typeof parsed === 'object' && parsed !== null) {
+				return JSON.stringify(parsed, null, 2);
+			}
+		} catch {
+			// not JSON, return as-is
+		}
+		return text;
+	}, [fieldData.value]);
+
+	// Memoize cleanTimestamp computation
+	const cleanTimestamp = useMemo(() => {
+		if (record.field !== 'timestamp') {
+			return '';
+		}
+		return fieldData.value.replace(/^["']|["']$/g, '');
+	}, [record.field, fieldData.value]);
+
+	const renderFieldContent = useCallback((): JSX.Element => {
+		const commonStyles: React.CSSProperties = {
+			color: Color.BG_SIENNA_400,
+			whiteSpace: 'pre-wrap',
+			tabSize: 4,
+		};
+
+		switch (record.field) {
+			case 'body':
+				return (
+					<BodyContent
+						fieldData={fieldData}
+						record={record}
+						bodyHtml={bodyHtml}
+						textToCopy={textToCopy}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				);
+
+			case 'timestamp':
+				return (
+					<span style={commonStyles}>
+						{formatTimezoneAdjustedTimestamp(
+							cleanTimestamp,
+							DATE_TIME_FORMATS.UTC_US_MS,
+						)}
+					</span>
+				);
+
+			default:
+				return (
+					<span style={commonStyles}>{removeEscapeCharacters(fieldData.value)}</span>
+				);
+		}
+	}, [
+		record,
+		fieldData,
+		bodyHtml,
+		textToCopy,
+		handleChangeSelectedView,
+		formatTimezoneAdjustedTimestamp,
+		cleanTimestamp,
+	]);
+
+	// Early return for body field with async processing
+	if (record.field === 'body') {
+		return (
+			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
+				<BodyContent
+					fieldData={fieldData}
+					record={record}
+					bodyHtml={bodyHtml}
+					textToCopy={textToCopy}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+				{!isListViewPanel &&
+					!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
+						<span className="action-btn">
+							<Tooltip title="Filter for value" mouseLeaveDelay={0}>
+								<Button
+									className="filter-btn periscope-btn"
+									icon={
+										isfilterInLoading ? (
+											<Spin size="small" />
+										) : (
+											<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+										)
+									}
+									onClick={onClickHandler(
+										OPERATORS['='],
+										fieldFilterKey,
+										parseFieldValue(fieldData.value),
+										dataType,
+										fieldType,
+									)}
+								/>
+							</Tooltip>
+							<Tooltip title="Filter out value" mouseLeaveDelay={0}>
+								<Button
+									className="filter-btn periscope-btn"
+									icon={
+										isfilterOutLoading ? (
+											<Spin size="small" />
+										) : (
+											<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+										)
+									}
+									onClick={onClickHandler(
+										OPERATORS['!='],
+										fieldFilterKey,
+										parseFieldValue(fieldData.value),
+										dataType,
+										fieldType,
+									)}
+								/>
+							</Tooltip>
+							{!isLiveLogsOrInfraPage && (
+								<Popover
+									open={isOpen}
+									onOpenChange={setIsOpen}
+									arrow={false}
+									content={
+										<div data-log-detail-ignore="true">
+											<Button
+												className="more-filter-actions"
+												type="text"
+												icon={<GroupByIcon />}
+												onClick={handleGroupByAttribute}
+											>
+												Group By Attribute
+											</Button>
+											<Button
+												className="more-filter-actions"
+												type="text"
+												icon={<RefreshCw size={14} />}
+												onClick={handleReplaceFilter}
+											>
+												Replace filters with this value
+											</Button>
+										</div>
+									}
+									rootClassName="table-view-actions-content"
+									trigger="hover"
+									placement="bottomLeft"
+								>
+									<Button
+										icon={<Ellipsis size={14} />}
+										className="filter-btn periscope-btn"
+									/>
+								</Popover>
+							)}
+						</span>
+					)}
+			</div>
+		);
+	}
+
+	return (
+		<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
+			<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
+				{renderFieldContent()}
+			</CopyClipboardHOC>
+			{!isListViewPanel &&
+				!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
+					<span className="action-btn">
+						<Tooltip title="Filter for value" mouseLeaveDelay={0}>
+							<Button
+								className="filter-btn periscope-btn"
+								icon={
+									isfilterInLoading ? (
+										<Spin size="small" />
+									) : (
+										<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+									)
+								}
+								onClick={onClickHandler(
+									OPERATORS['='],
+									fieldFilterKey,
+									parseFieldValue(fieldData.value),
+									dataType,
+									fieldType,
+								)}
+							/>
+						</Tooltip>
+						<Tooltip title="Filter out value" mouseLeaveDelay={0}>
+							<Button
+								className="filter-btn periscope-btn"
+								icon={
+									isfilterOutLoading ? (
+										<Spin size="small" />
+									) : (
+										<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+									)
+								}
+								onClick={onClickHandler(
+									OPERATORS['!='],
+									fieldFilterKey,
+									parseFieldValue(fieldData.value),
+									dataType,
+									fieldType,
+								)}
+							/>
+						</Tooltip>
+						{!isLiveLogsOrInfraPage && (
+							<Popover
+								open={isOpen}
+								onOpenChange={setIsOpen}
+								arrow={false}
+								content={
+									<div data-log-detail-ignore="true">
+										<Button
+											className="more-filter-actions"
+											type="text"
+											icon={<GroupByIcon />}
+											onClick={handleGroupByAttribute}
+										>
+											Group By Attribute
+										</Button>
+										<Button
+											className="more-filter-actions"
+											type="text"
+											icon={<RefreshCw size={14} />}
+											onClick={handleReplaceFilter}
+										>
+											Replace filters with this value
+										</Button>
+									</div>
+								}
+								rootClassName="table-view-actions-content"
+								trigger="hover"
+								placement="bottomLeft"
+							>
+								<Button
+									icon={<Ellipsis size={14} />}
+									className="filter-btn periscope-btn"
+								/>
+							</Popover>
+						)}
+					</span>
+				)}
+		</div>
+	);
+}
+
+TableViewActions.defaultProps = {
+	handleChangeSelectedView: undefined,
+};

frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx

@@ -0,0 +1,366 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+
+import { RESTRICTED_SELECTED_FIELDS } from '../../config';
+import TableViewActions from '../TableViewActions';
+import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
+
+// Mock data for tests
+let mockCopyToClipboard: jest.Mock;
+let mockNotificationsSuccess: jest.Mock;
+
+// Mock the components and hooks
+jest.mock('components/Logs/CopyClipboardHOC', () => ({
+	__esModule: true,
+	default: ({
+		children,
+		textToCopy,
+		entityKey,
+	}: {
+		children: React.ReactNode;
+		textToCopy: string;
+		entityKey: string;
+	}): JSX.Element => (
+		<div
+			className="CopyClipboardHOC"
+			data-testid={`copy-clipboard-${entityKey}`}
+			data-text-to-copy={textToCopy}
+			onClick={(): void => {
+				if (mockCopyToClipboard) {
+					mockCopyToClipboard(textToCopy);
+				}
+				if (mockNotificationsSuccess) {
+					mockNotificationsSuccess({
+						message: `${entityKey} copied to clipboard`,
+						key: `${entityKey} copied to clipboard`,
+					});
+				}
+			}}
+			role="button"
+			tabIndex={0}
+		>
+			{children}
+		</div>
+	),
+}));
+
+jest.mock('../useAsyncJSONProcessing', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('antd', () => {
+	const antd = jest.requireActual('antd');
+	return {
+		...antd,
+		// Render popover content inline to make its children testable
+		Popover: ({ content, children }: any): JSX.Element => (
+			<div data-testid="popover">
+				<div data-testid="popover-content">{content}</div>
+				{children}
+			</div>
+		),
+	};
+});
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): {
+		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
+	} => ({
+		formatTimezoneAdjustedTimestamp: (timestamp: string): string => timestamp,
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): {
+		pathname: string;
+		search: string;
+		hash: string;
+		state: null;
+	} => ({
+		pathname: '/test',
+		search: '',
+		hash: '',
+		state: null,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder');
+jest.mock('hooks/saveViews/useGetSavedViewParams');
+
+describe('TableViewActions', () => {
+	const TEST_VALUE = 'test value';
+	const TEST_FIELD = 'test-field';
+	const ACTION_BUTTON_TEST_ID = '.action-btn';
+	const defaultProps = {
+		fieldData: {
+			field: TEST_FIELD,
+			value: TEST_VALUE,
+		},
+		record: {
+			key: 'test-key',
+			field: TEST_FIELD,
+			value: TEST_VALUE,
+		},
+		isListViewPanel: false,
+		isfilterInLoading: false,
+		isfilterOutLoading: false,
+		onClickHandler: jest.fn(),
+		handleChangeSelectedView: jest.fn(),
+	};
+
+	beforeEach(() => {
+		mockCopyToClipboard = jest.fn();
+		mockNotificationsSuccess = jest.fn();
+		defaultProps.onClickHandler = jest.fn();
+		defaultProps.handleChangeSelectedView = jest.fn();
+
+		// Default mock for useAsyncJSONProcessing
+		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
+		mockUseAsyncJSONProcessing.mockReturnValue({
+			isLoading: false,
+			treeData: null,
+			error: null,
+		});
+
+		// Default mock for useQueryBuilder
+		jest.mocked(useQueryBuilder).mockReturnValue({
+			stagedQuery: null,
+			updateQueriesData: jest.fn((query, type, callback) => {
+				const updatedBuilder = {
+					...query.builder,
+					[type]: query.builder[type].map(callback),
+				};
+				return {
+					...query,
+					builder: updatedBuilder,
+				};
+			}),
+		} as any);
+
+		// Default mock for useGetSavedViewParams
+		jest
+			.mocked(useGetSavedViewParams)
+			.mockReturnValue({ viewName: '', viewKey: '' });
+	});
+
+	it('should render without crashing', () => {
+		render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel={defaultProps.isListViewPanel}
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+		expect(screen.getByText(TEST_VALUE)).toBeInTheDocument();
+	});
+
+	it('should not render action buttons for restricted fields', () => {
+		RESTRICTED_SELECTED_FIELDS.forEach((field) => {
+			const { container } = render(
+				<TableViewActions
+					fieldData={{
+						...defaultProps.fieldData,
+						field,
+					}}
+					record={{
+						...defaultProps.record,
+						field,
+					}}
+					isListViewPanel={defaultProps.isListViewPanel}
+					isfilterInLoading={defaultProps.isfilterInLoading}
+					isfilterOutLoading={defaultProps.isfilterOutLoading}
+					onClickHandler={defaultProps.onClickHandler}
+					handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				/>,
+			);
+			// Verify that action buttons are not rendered for restricted fields
+			expect(
+				container.querySelector(ACTION_BUTTON_TEST_ID),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it('should render action buttons for non-restricted fields', () => {
+		const { container } = render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel={defaultProps.isListViewPanel}
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+		// Verify that action buttons are rendered for non-restricted fields
+		expect(container.querySelector(ACTION_BUTTON_TEST_ID)).toBeInTheDocument();
+	});
+
+	it('should call handleChangeSelectedView when clicking group by', () => {
+		const mockStagedQuery = {
+			id: 'test-query-id',
+			queryType: 'queryBuilder',
+			builder: {
+				queryData: [
+					{
+						queryName: 'A',
+						dataSource: 'logs',
+						aggregateOperator: 'count',
+						functions: [],
+						filter: {},
+						groupBy: [],
+						expression: '',
+						disabled: false,
+						having: [],
+						limit: null,
+						stepInterval: null,
+						orderBy: [],
+						legend: '',
+					},
+				],
+				queryFormulas: [],
+				queryTraceOperator: [],
+			},
+			promql: [],
+			clickhouse_sql: [],
+		};
+
+		const mockUpdateQueriesData = jest.fn((query, type, callback) => {
+			const section = query.builder?.[type];
+			if (!Array.isArray(section)) {
+				return query;
+			}
+			return {
+				...query,
+				builder: {
+					...query.builder,
+					[type]: section.map(callback),
+				},
+			};
+		});
+
+		jest.mocked(useQueryBuilder).mockReturnValue({
+			stagedQuery: mockStagedQuery,
+			updateQueriesData: mockUpdateQueriesData,
+		} as any);
+
+		jest
+			.mocked(useGetSavedViewParams)
+			.mockReturnValue({ viewName: '', viewKey: '' });
+
+		render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel={defaultProps.isListViewPanel}
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+
+		fireEvent.click(screen.getByText('Group By Attribute'));
+
+		expect(defaultProps.handleChangeSelectedView).toHaveBeenCalledWith(
+			ExplorerViews.TIMESERIES,
+			expect.objectContaining({
+				query: expect.objectContaining({
+					builder: expect.objectContaining({
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								groupBy: expect.arrayContaining([
+									expect.objectContaining({
+										key: TEST_FIELD,
+										type: '',
+									}),
+								]),
+							}),
+						]),
+					}),
+				}),
+			}),
+		);
+	});
+
+	it('should not render action buttons in list view panel', () => {
+		const { container } = render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+		// Verify that action buttons are not rendered in list view panel
+		expect(
+			container.querySelector(ACTION_BUTTON_TEST_ID),
+		).not.toBeInTheDocument();
+	});
+
+	it('should copy non-JSON body text without quotes when user clicks on body', () => {
+		// Setup: body field with surrounding quotes
+		const bodyValueWithQuotes =
+			'"FeatureFlag \'kafkaQueueProblems\' is enabled, sleeping 1 second"';
+		const expectedCopiedText =
+			"FeatureFlag 'kafkaQueueProblems' is enabled, sleeping 1 second";
+
+		const bodyProps = {
+			fieldData: {
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			record: {
+				key: 'body-key',
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			isListViewPanel: false,
+			isfilterInLoading: false,
+			isfilterOutLoading: false,
+			onClickHandler: jest.fn(),
+			handleChangeSelectedView: jest.fn(),
+		};
+
+		// Render component with body field
+		render(
+			<TableViewActions
+				fieldData={bodyProps.fieldData}
+				record={bodyProps.record}
+				isListViewPanel={bodyProps.isListViewPanel}
+				isfilterInLoading={bodyProps.isfilterInLoading}
+				isfilterOutLoading={bodyProps.isfilterOutLoading}
+				onClickHandler={bodyProps.onClickHandler}
+				handleChangeSelectedView={bodyProps.handleChangeSelectedView}
+			/>,
+		);
+
+		// Find the clickable copy area for body
+		const copyArea = screen.getByTestId('copy-clipboard-body');
+
+		// Verify it has the correct text to copy (without quotes)
+		expect(copyArea).toHaveAttribute('data-text-to-copy', expectedCopiedText);
+
+		// Action: User clicks on body content
+		fireEvent.click(copyArea);
+
+		// Assert: Text was copied without surrounding quotes
+		expect(mockCopyToClipboard).toHaveBeenCalledWith(expectedCopiedText);
+
+		// Assert: Success notification shown
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'body copied to clipboard',
+			key: 'body copied to clipboard',
+		});
+	});
+});

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import { FeatureKeys } from 'constants/features';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { isEmpty } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
+
+import { jsonToDataNodes, recursiveParseJSON } from '../utils';
+
+const MAX_BODY_BYTES = 100 * 1024; // 100 KB
+
+// Hook for async JSON processing
+const useAsyncJSONProcessing = (
+	value: string | Record<string, unknown>,
+	shouldProcess: boolean,
+	handleChangeSelectedView?: ChangeViewFunctionType,
+): {
+	isLoading: boolean;
+	treeData: any[] | null;
+	error: string | null;
+} => {
+	const [jsonState, setJsonState] = useState<{
+		isLoading: boolean;
+		treeData: any[] | null;
+		error: string | null;
+	}>({
+		isLoading: false,
+		treeData: null,
+		error: null,
+	});
+
+	const processingRef = useRef<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	useEffect((): (() => void) => {
+		if (!shouldProcess || processingRef.current) {
+			return (): void => {};
+		}
+
+		// When value is already a parsed object skip the size check and JSON parsing
+		const parseBody = (): Record<string, unknown> | null => {
+			if (typeof value === 'object' && value !== null) {
+				return value as Record<string, unknown>;
+			}
+			const byteSize = new Blob([value as string]).size;
+			if (byteSize > MAX_BODY_BYTES) {
+				return null;
+			}
+			return recursiveParseJSON(value as string);
+		};
+
+		processingRef.current = true;
+		setJsonState({ isLoading: true, treeData: null, error: null });
+
+		// Option 1: Using setTimeout for non-blocking processing
+		const processAsync = (): void => {
+			setTimeout(() => {
+				try {
+					const parsedBody = parseBody();
+					if (parsedBody && !isEmpty(parsedBody)) {
+						const treeData = jsonToDataNodes(parsedBody, {
+							isBodyJsonQueryEnabled,
+							handleChangeSelectedView,
+						});
+						setJsonState({ isLoading: false, treeData, error: null });
+					} else {
+						setJsonState({ isLoading: false, treeData: null, error: null });
+					}
+				} catch (error) {
+					setJsonState({
+						isLoading: false,
+						treeData: null,
+						error: error instanceof Error ? error.message : 'Parsing failed',
+					});
+				} finally {
+					processingRef.current = false;
+				}
+			}, 0);
+		};
+
+		// Option 2: Using requestIdleCallback for better performance
+		const processWithIdleCallback = (): void => {
+			if ('requestIdleCallback' in window) {
+				requestIdleCallback(
+					// eslint-disable-next-line sonarjs/no-identical-functions
+					(): void => {
+						try {
+							const parsedBody = parseBody();
+							if (parsedBody && !isEmpty(parsedBody)) {
+								const treeData = jsonToDataNodes(parsedBody, {
+									isBodyJsonQueryEnabled,
+									handleChangeSelectedView,
+								});
+								setJsonState({ isLoading: false, treeData, error: null });
+							} else {
+								setJsonState({ isLoading: false, treeData: null, error: null });
+							}
+						} catch (error) {
+							setJsonState({
+								isLoading: false,
+								treeData: null,
+								error: error instanceof Error ? error.message : 'Parsing failed',
+							});
+						} finally {
+							processingRef.current = false;
+						}
+					},
+					{ timeout: 1000 },
+				);
+			} else {
+				processAsync();
+			}
+		};
+
+		processWithIdleCallback();
+
+		// Cleanup function
+		return (): void => {
+			processingRef.current = false;
+		};
+	}, [value, shouldProcess, isBodyJsonQueryEnabled, handleChangeSelectedView]);
+
+	return jsonState;
+};
+
+export default useAsyncJSONProcessing;

frontend/src/container/LogDetailedView/__tests__/BodyTitleRenderer.test.tsx

@@ -0,0 +1,108 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import BodyTitleRenderer from '../BodyTitleRenderer';
+
+let mockSetCopy: jest.Mock;
+const mockNotification = jest.fn();
+
+jest.mock('hooks/logs/useActiveLog', () => ({
+	useActiveLog: (): any => ({
+		onAddToQuery: jest.fn(),
+	}),
+}));
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): any => {
+		mockSetCopy = jest.fn();
+		return [{ value: null }, mockSetCopy];
+	},
+}));
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): any => ({
+		notifications: {
+			success: mockNotification,
+			error: jest.fn(),
+			info: jest.fn(),
+			warning: jest.fn(),
+			open: jest.fn(),
+			destroy: jest.fn(),
+		},
+	}),
+}));
+
+describe('BodyTitleRenderer', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should copy primitive value when node is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<BodyTitleRenderer
+				title="name"
+				nodeKey="user.name"
+				value="John"
+				parentIsArray={false}
+			/>,
+		);
+
+		await user.click(screen.getByText('name'));
+
+		await waitFor(() => {
+			expect(mockSetCopy).toHaveBeenCalledWith('John');
+			expect(mockNotification).toHaveBeenCalledWith(
+				expect.objectContaining({
+					message: expect.stringContaining('user.name'),
+				}),
+			);
+		});
+	});
+
+	it('should copy array element value when clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<BodyTitleRenderer
+				title="0"
+				nodeKey="items[*].0"
+				value="arrayElement"
+				parentIsArray
+			/>,
+		);
+
+		await user.click(screen.getByText('0'));
+
+		await waitFor(() => {
+			expect(mockSetCopy).toHaveBeenCalledWith('arrayElement');
+		});
+	});
+
+	it('should copy entire object when object node is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const testObject = { id: 123, active: true };
+
+		render(
+			<BodyTitleRenderer
+				title="metadata"
+				nodeKey="user.metadata"
+				value={testObject}
+				parentIsArray={false}
+			/>,
+		);
+
+		await user.click(screen.getByText('metadata'));
+
+		await waitFor(() => {
+			const callArg = mockSetCopy.mock.calls[0][0];
+			const expectedJson = JSON.stringify(testObject, null, 2);
+			expect(callArg).toBe(expectedJson);
+			expect(mockNotification).toHaveBeenCalledWith(
+				expect.objectContaining({
+					message: expect.stringContaining('object copied'),
+				}),
+			);
+		});
+	});
+});

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
+import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
@@ -51,6 +53,7 @@ export function useLogAttributeActions({
 	isListViewPanel = false,
 	onApplyLogFilter,
 }: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
+	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { featureFlags } = useAppContext();
 
@@ -58,6 +61,8 @@ export function useLogAttributeActions({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
 			?.active || false;
 
+	const isLiveLogs = pathname === ROUTES.LIVE_LOGS;
+
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {
 			const target = buildLogFilterTarget(
@@ -214,7 +219,8 @@ export function useLogAttributeActions({
 				shouldHide: (_key, fieldKeyPath): boolean =>
 					!handleChangeSelectedView ||
 					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
-						.groupBySupported,
+						.groupBySupported ||
+					isLiveLogs,
 			},
 			{
 				key: LogDetailsAction.REPLACE_FILTER,
@@ -222,7 +228,7 @@ export function useLogAttributeActions({
 				icon: <RefreshCw size={12} />,
 				onClick: replaceFilter,
 				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView || isRestricted(fieldKeyPath),
+					!handleChangeSelectedView || isRestricted(fieldKeyPath) || isLiveLogs,
 			},
 		];
 	}, [
@@ -230,6 +236,7 @@ export function useLogAttributeActions({
 		groupBy,
 		replaceFilter,
 		isBodyJsonQueryEnabled,
+		isLiveLogs,
 		handleChangeSelectedView,
 		onApplyLogFilter,
 	]);

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,7 +1,10 @@
 import * as Sentry from '@sentry/react';
 import Convert from 'ansi-to-html';
+import type { DataNode } from 'antd/es/tree';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
+import { uniqueId } from 'lodash-es';
 import {
 	ILog,
 	ILogAggregateAttributesResources,
@@ -10,6 +13,7 @@ import {
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
+import BodyTitleRenderer from './BodyTitleRenderer';
 import { typeToArrayTypeMapper } from './config';
 import { AnyObject, IFieldAttributes } from './LogDetailedView.types';
 
@@ -36,6 +40,135 @@ export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	}
 };
 
+type JsonToDataNodesOptions = {
+	parentKey?: string;
+	parentIsArray?: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+type ComputeDataNodeOptions = {
+	key: string;
+	valueIsArray: boolean;
+	value: unknown;
+	nodeKey: string;
+	parentIsArray: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+export const computeDataNode = ({
+	key,
+	valueIsArray,
+	value,
+	nodeKey,
+	parentIsArray,
+	isBodyJsonQueryEnabled = false,
+	handleChangeSelectedView,
+}: ComputeDataNodeOptions): DataNode => ({
+	key: uniqueId(),
+	title: (
+		<BodyTitleRenderer
+			title={`${key} ${valueIsArray ? '[...]' : ''}`}
+			nodeKey={nodeKey}
+			value={value}
+			parentIsArray={parentIsArray}
+			handleChangeSelectedView={handleChangeSelectedView}
+		/>
+	),
+	children: jsonToDataNodes(value as Record<string, unknown>, {
+		parentKey: valueIsArray
+			? `${nodeKey}${isBodyJsonQueryEnabled ? '[]' : '[*]'}`
+			: nodeKey,
+		parentIsArray: valueIsArray,
+		isBodyJsonQueryEnabled,
+		handleChangeSelectedView,
+	}),
+});
+
+export function jsonToDataNodes(
+	json: Record<string, unknown>,
+	options: JsonToDataNodesOptions = {},
+): DataNode[] {
+	const {
+		parentKey = '',
+		parentIsArray = false,
+		isBodyJsonQueryEnabled = false,
+		handleChangeSelectedView,
+	} = options;
+
+	return Object.entries(json).map(([key, value]) => {
+		let nodeKey = parentKey || key;
+		if (parentIsArray) {
+			nodeKey += `.${value}`;
+		} else if (parentKey) {
+			nodeKey += `.${key}`;
+		}
+
+		const valueIsArray = Array.isArray(value);
+
+		if (parentIsArray) {
+			if (typeof value === 'object' && value !== null) {
+				return computeDataNode({
+					key,
+					valueIsArray,
+					value,
+					nodeKey,
+					parentIsArray,
+					isBodyJsonQueryEnabled,
+					handleChangeSelectedView,
+				});
+			}
+
+			return {
+				key: uniqueId(),
+				title: (
+					<BodyTitleRenderer
+						title={value as string}
+						nodeKey={nodeKey}
+						value={value}
+						parentIsArray={parentIsArray}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				),
+				children: jsonToDataNodes(
+					{},
+					{
+						parentKey: nodeKey,
+						parentIsArray: valueIsArray,
+						isBodyJsonQueryEnabled,
+						handleChangeSelectedView,
+					},
+				),
+			};
+		}
+
+		if (typeof value === 'object' && value !== null) {
+			return computeDataNode({
+				key,
+				valueIsArray,
+				value,
+				nodeKey,
+				parentIsArray,
+				isBodyJsonQueryEnabled,
+				handleChangeSelectedView,
+			});
+		}
+		return {
+			key: uniqueId(),
+			title: (
+				<BodyTitleRenderer
+					title={key}
+					nodeKey={nodeKey}
+					value={value}
+					parentIsArray={parentIsArray}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			),
+		};
+	});
+}
+
 export function flattenObject(obj: AnyObject, prefix = ''): AnyObject {
 	return Object.keys(obj).reduce((acc: AnyObject, k: string): AnyObject => {
 		const pre = prefix.length ? `${prefix}.` : '';
@@ -121,6 +254,14 @@ export const getFieldAttributes = (field: string): IFieldAttributes => {
 // Returns key to be used when filtering for `field` via
 // the query builder. This is useful for powering filtering
 // by field values from log details view.
+export const filterKeyForField = (field: string): string => {
+	// Must work for all 3 of the following types of cases
+	// timestamp -> timestamp
+	// attributes_string.log.file -> log.file
+	// resources_string.k8s.pod.name -> k8s.pod.name
+	const fieldAttribs = getFieldAttributes(field);
+	return fieldAttribs?.newField || field;
+};
 
 export const aggregateAttributesResourcesToObject = (
 	logData: ILog,
@@ -277,6 +418,16 @@ export const escapeHtml = (unsafe: string): string =>
 		.replace(/'/g, '&#039;');
 
 // parse field value to remove escaping characters
+export const parseFieldValue = (value: string): string => {
+	try {
+		return JSON.parse(value);
+	} catch (error) {
+		return value;
+	}
+};
+
+// now we do not want to render colors everywhere like in tooltip and monaco editor hence we remove such codes to make
+// the log line readable
 export const removeEscapeCharacters = (str: string): string =>
 	(str ?? '')
 		.replace(/\\x1[bB][[0-9;]*m/g, '')
@@ -307,6 +458,10 @@ export const unescapeString = (str: string): string =>
 			String.fromCharCode(parseInt(hex, 16)),
 		); // Replaces Unicode escape sequences
 
+export function removeExtraSpaces(input: string): string {
+	return input.replace(/\s+/g, ' ').trim();
+}
+
 export function findKeyPath(
 	obj: AnyObject,
 	targetKey: string,

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
@@ -6,6 +6,7 @@ import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
@@ -13,18 +14,18 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 function LogsActionsContainer({
 	listQuery,
+	selectedPanelType,
 	showFrequencyChart,
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
-	explorerActions,
 }: {
 	listQuery: any;
+	selectedPanelType: PANEL_TYPES;
 	showFrequencyChart: boolean;
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
-	explorerActions: ReactNode;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -59,43 +60,48 @@ function LogsActionsContainer({
 		<div className="logs-actions-container">
 			<div className="tab-options">
 				<div className="tab-options-left">
-					<div className="frequency-chart-view-controller">
-						<Typography>Frequency chart</Typography>
-						<Switch
-							value={showFrequencyChart}
-							defaultValue
-							onChange={handleToggleFrequencyChart}
-						/>
-					</div>
+					{selectedPanelType === PANEL_TYPES.LIST && (
+						<div className="frequency-chart-view-controller">
+							<Typography>Frequency chart</Typography>
+							<Switch
+								value={showFrequencyChart}
+								defaultValue
+								onChange={handleToggleFrequencyChart}
+							/>
+						</div>
+					)}
 				</div>
 
 				<div className="tab-options-right">
-					{explorerActions}
-					<div className="order-by-container">
-						<div className="order-by-label">
-							Order by <Minus size={14} /> <ArrowUp10 size={14} />
-						</div>
+					{selectedPanelType === PANEL_TYPES.LIST && (
+						<>
+							<div className="order-by-container">
+								<div className="order-by-label">
+									Order by <Minus size={14} /> <ArrowUp10 size={14} />
+								</div>
 
-						<ListViewOrderBy
-							value={orderBy}
-							onChange={(value): void => setOrderBy(value)}
-							dataSource={DataSource.LOGS}
-						/>
-					</div>
-					<div className="download-options-container">
-						<DownloadOptionsMenu
-							dataSource={DataSource.LOGS}
-							selectedColumns={options?.selectColumns}
-						/>
-					</div>
-					<div className="format-options-container">
-						<LogsFormatOptionsMenu
-							items={formatItems}
-							selectedOptionFormat={options.format}
-							config={config}
-							onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
-						/>
-					</div>
+								<ListViewOrderBy
+									value={orderBy}
+									onChange={(value): void => setOrderBy(value)}
+									dataSource={DataSource.LOGS}
+								/>
+							</div>
+							<div className="download-options-container">
+								<DownloadOptionsMenu
+									dataSource={DataSource.LOGS}
+									selectedColumns={options?.selectColumns}
+								/>
+							</div>
+							<div className="format-options-container">
+								<LogsFormatOptionsMenu
+									items={formatItems}
+									selectedOptionFormat={options.format}
+									config={config}
+									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
+								/>
+							</div>
+						</>
+					)}
 				</div>
 			</div>
 			{config.fieldsSelector && (

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -187,7 +187,6 @@
 					display: flex;
 					justify-content: flex-end;
 					align-items: center;
-					gap: 8px;
 					padding: 12px;
 					flex-shrink: 0;
 				}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -37,7 +37,6 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
-import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -141,13 +140,6 @@ function LogsExplorerViewsContainer({
 		[selectedPanelType, requestData],
 	);
 
-	const explorerActions = useMemo(
-		() => (
-			<ExplorerActions query={exportDefaultQuery} sourcepage={DataSource.LOGS} />
-		),
-		[exportDefaultQuery],
-	);
-
 	const {
 		data: listChartData,
 		isFetching: isFetchingListChartData,
@@ -424,14 +416,14 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				{!showLiveLogs && selectedPanelType === PANEL_TYPES.LIST && (
+				{!showLiveLogs && (
 					<LogsActionsContainer
 						listQuery={listQuery}
+						selectedPanelType={selectedPanelType}
 						showFrequencyChart={showFrequencyChart}
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
-						explorerActions={explorerActions}
 					/>
 				)}
 
@@ -482,23 +474,21 @@ function LogsExplorerViewsContainer({
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
 								allowExport
-								headerActions={explorerActions}
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
-							<div className="table-view-container-header">
-								{explorerActions}
-								{data && !isError && (
+							{data && !isError && (
+								<div className="table-view-container-header">
 									<ExportMenu
 										dataSource={DataSource.LOGS}
 										data={data}
 										query={stagedQuery || initialQueriesMap.metrics}
 										fileName="logs-table"
 									/>
-								)}
-							</div>
+								</div>
+							)}
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -394,7 +394,6 @@ function Explorer(): JSX.Element {
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
 						isCancelled={isCancelled}
-						exportDefaultQuery={exportDefaultQuery}
 					/>
 				</div>
 			</div>

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -19,7 +19,6 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -52,7 +51,6 @@ function TimeSeries({
 	showYAxisUnitSelector,
 	metrics,
 	isCancelled = false,
-	exportDefaultQuery,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -274,9 +272,6 @@ function TimeSeries({
 							metricName;
 
 						const currentYAxisUnit = yAxisUnit || metricUnit;
-						const exportQuery = changeLayoutForOneChartPerQuery
-							? queryPayloads[index]
-							: exportDefaultQuery;
 
 						return (
 							<div
@@ -317,14 +312,6 @@ function TimeSeries({
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
 									allowExport
-									headerActions={
-										<ExplorerActions
-											query={stagedQuery ? exportQuery : null}
-											sourcepage={DataSource.METRICS}
-											panelType={PANEL_TYPES.TIME_SERIES}
-											isOneChartPerQuery={changeLayoutForOneChartPerQuery}
-										/>
-									}
 								/>
 							</div>
 						);

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -4,7 +4,6 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
@@ -147,11 +146,9 @@ function renderExplorer(): void {
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter>
 				<Provider store={store}>
-					<TooltipProvider>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</TooltipProvider>
+					<ErrorModalProvider>
+						<Explorer />
+					</ErrorModalProvider>
 				</Provider>
 			</MemoryRouter>
 		</QueryClientProvider>,

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
-import { initialQueriesMap } from 'constants/queryBuilder';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
@@ -72,7 +71,6 @@ function renderTimeSeries(
 			yAxisUnit="count"
 			setYAxisUnit={mockSetYAxisUnit}
 			showYAxisUnitSelector={false}
-			exportDefaultQuery={initialQueriesMap.metrics}
 			{...overrides}
 		/>,
 	);