feat: delete dashboard v2 API

# Conflicts:
#	pkg/modules/tag/impltag/module.go
#	pkg/modules/tag/tag.go
#	pkg/types/tagtypes/tag_test.go

cmd/community/server.go

@@ -29,6 +29,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -103,8 +104,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module) dashboard.Module {
+			return impldashboard.NewModule(impldashboard.NewStore(store), store, settings, analytics, orgGetter, queryParser, tagModule)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()

cmd/enterprise/server.go

@@ -48,6 +48,7 @@ import (
 	pkgcloudintegration "github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -151,8 +152,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), store, settings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)

ee/modules/dashboard/impldashboard/module.go

@@ -11,8 +11,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
@@ -30,9 +32,9 @@ type module struct {
 	licensing          licensing.Licensing
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+func NewModule(store dashboardtypes.Store, sqlstore sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
-	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser)
+	pkgDashboardModule := pkgimpldashboard.NewModule(store, sqlstore, settings, analytics, orgGetter, queryParser, tagModule)
 
 	return &module{
 		pkgDashboardModule: pkgDashboardModule,
@@ -197,6 +199,89 @@ func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy s
 	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, data)
 }
 
+func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.CreateV2(ctx, orgID, createdBy, creator, postable)
+}
+
+func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
+}
+
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updateable dashboardtypes.UpdateableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updateable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) DeleteV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+		return module.pkgDashboardModule.DeleteV2(ctx, orgID, id)
+	})
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
+func (module *module) CreatePublicV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, postable dashboardtypes.PostablePublicDashboard) (*dashboardtypes.DashboardV2, error) {
+	if _, err := module.licensing.GetActive(ctx, orgID); err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	existing, err := module.pkgDashboardModule.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	if existing.PublicConfig != nil {
+		return nil, errors.Newf(errors.TypeAlreadyExists, dashboardtypes.ErrCodePublicDashboardAlreadyExists, "dashboard with id %s is already public", id)
+	}
+
+	publicDashboard := dashboardtypes.NewPublicDashboard(postable.TimeRangeEnabled, postable.DefaultTimeRange, id)
+	if err := module.store.CreatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard)); err != nil {
+		return nil, err
+	}
+
+	existing.PublicConfig = publicDashboard
+	return existing, nil
+}
+
+func (module *module) UpdatePublicV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatable dashboardtypes.UpdatablePublicDashboard) (*dashboardtypes.DashboardV2, error) {
+	if _, err := module.licensing.GetActive(ctx, orgID); err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	existing, err := module.pkgDashboardModule.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	if existing.PublicConfig == nil {
+		return nil, errors.Newf(errors.TypeNotFound, dashboardtypes.ErrCodePublicDashboardNotFound, "dashboard with id %s isn't public", id)
+	}
+
+	existing.PublicConfig.Update(updatable.TimeRangeEnabled, updatable.DefaultTimeRange)
+	if err := module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(existing.PublicConfig)); err != nil {
+		return nil, err
+	}
+	return existing, nil
+}
+
+func (module *module) ListV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, params *dashboardtypes.ListDashboardsV2Params) (*dashboardtypes.ListableDashboardV2, error) {
+	return module.pkgDashboardModule.ListV2(ctx, orgID, userID, params)
+}
+
+func (module *module) PinV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.PinV2(ctx, orgID, userID, id)
+}
+
+func (module *module) UnpinV2(ctx context.Context, userID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.UnpinV2(ctx, userID, id)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

ee/sqlstore/postgressqlstore/listfilter_test.go

@@ -0,0 +1,65 @@
+package postgressqlstore
+
+// Lives in this package (rather than the listfilter package) so it can use
+// the unexported newFormatter constructor without driving a real Postgres
+// connection. Covers the only listfilter cases whose emitted SQL differs
+// between SQLite and Postgres — the ones that go through JSONExtractString
+// (`name`, `description`). All other operators (=, !=, BETWEEN, LIKE, IN,
+// EXISTS, lower(...)) emit identical ANSI SQL on both dialects and are
+// covered by the SQLite tests in the listfilter package itself.
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"github.com/uptrace/bun/dialect/pgdialect"
+
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes/listfilter"
+)
+
+func TestListFilterCompile_Postgres(t *testing.T) {
+	f := newFormatter(pgdialect.New())
+
+	cases := []struct {
+		name     string
+		query    string
+		wantSQL  string
+		wantArgs []any
+	}{
+		{
+			name:     "name = uses Postgres -> / ->> chain",
+			query:    `name = 'overview'`,
+			wantSQL:  `"dashboard"."data"->'data'->'display'->>'name' = ?`,
+			wantArgs: []any{"overview"},
+		},
+		{
+			name:     "name CONTAINS — same JSON path, LIKE pattern",
+			query:    `name CONTAINS 'overview'`,
+			wantSQL:  `"dashboard"."data"->'data'->'display'->>'name' LIKE ?`,
+			wantArgs: []any{"%overview%"},
+		},
+		{
+			name:     "name ILIKE — LOWER wraps the JSON path",
+			query:    `name ILIKE 'Prod%'`,
+			wantSQL:  `lower("dashboard"."data"->'data'->'display'->>'name') LIKE LOWER(?)`,
+			wantArgs: []any{"Prod%"},
+		},
+		{
+			name:     "description = follows the same path shape",
+			query:    `description = 'd1'`,
+			wantSQL:  `"dashboard"."data"->'data'->'display'->>'description' = ?`,
+			wantArgs: []any{"d1"},
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			out, err := listfilter.Compile(c.query, f)
+			require.NoError(t, err)
+			require.NotNil(t, out)
+			assert.Equal(t, c.wantSQL, out.SQL)
+			assert.Equal(t, c.wantArgs, out.Args)
+		})
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.module.scss

@@ -1,89 +0,0 @@
-.body {
-	padding: 12px 6px;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	background: var(--l1-background);
-
-	// TabsRoot — last direct child div
-	> div:last-child {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	[role='tablist'] {
-		flex-shrink: 0;
-	}
-
-	// Tabs library wrapper — scoped by `.body` so the global match is contained.
-	:global([class*='tabs__list-wrapper']) {
-		padding-left: 0 !important;
-	}
-}
-
-.tabsScroll {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	scrollbar-width: none;
-}
-
-.list {
-	display: grid;
-	grid-template-columns: auto auto 1fr;
-	gap: 4px 8px;
-	padding: 8px 0;
-	align-items: center;
-}
-
-.dot {
-	width: 8px;
-	height: 8px;
-	border-radius: 2px;
-}
-
-.serviceName {
-	font-size: 13px;
-	color: var(--l1-foreground);
-	word-break: break-word;
-}
-
-.barCell {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.bar {
-	flex: 1;
-	height: 6px;
-	background: var(--l3-background);
-	border-radius: 3px;
-	min-width: 40px;
-}
-
-.barFill {
-	height: 100%;
-	border-radius: 3px;
-}
-
-.value {
-	flex-shrink: 0;
-	text-align: right;
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-}
-
-.valueWide {
-	min-width: 55px;
-}
-
-.valueNarrow {
-	min-width: 25px;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.styles.scss

@@ -0,0 +1,96 @@
+.analytics-panel {
+	&__body {
+		padding: 12px 6px;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+		background: var(--l1-background);
+
+		// TabsRoot — last direct child div
+		> div:last-child {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			overflow: hidden;
+		}
+
+		[role='tablist'] {
+			flex-shrink: 0;
+		}
+	}
+
+	&__tabs-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+	}
+
+	&__list {
+		display: grid;
+		grid-template-columns: auto auto 1fr;
+		gap: 4px 8px;
+		padding: 8px 0;
+		align-items: center;
+	}
+
+	&__dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+	}
+
+	&__service-name {
+		font-size: 13px;
+		color: var(--l1-foreground);
+		word-break: break-word;
+	}
+
+	&__bar-cell {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__bar {
+		flex: 1;
+		height: 6px;
+		background: var(--l3-background);
+		border-radius: 3px;
+		min-width: 40px;
+
+		&--small {
+			max-width: 80px;
+			flex: 0 0 80px;
+		}
+	}
+
+	&__bar-fill {
+		height: 100%;
+		border-radius: 3px;
+	}
+
+	&__value {
+		flex-shrink: 0;
+		text-align: right;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+
+		&--wide {
+			min-width: 55px;
+		}
+
+		&--narrow {
+			min-width: 25px;
+		}
+	}
+
+	// Tabs root
+	[class*='tabs__list-wrapper'] {
+		padding-left: 0 !important;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -5,7 +5,6 @@ import {
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import cx from 'classnames';
 import { DetailsHeader } from 'components/DetailsPanel';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -17,7 +16,7 @@ import {
 	getAggregationMap as findAggregationMap,
 } from '../../utils/aggregations';
 
-import styles from './AnalyticsPanel.module.scss';
+import './AnalyticsPanel.styles.scss';
 
 interface AnalyticsPanelProps {
 	isOpen: boolean;
@@ -87,6 +86,7 @@ function AnalyticsPanel({
 	return (
 		<FloatingPanel
 			isOpen
+			className="analytics-panel"
 			width={PANEL_WIDTH}
 			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
 			defaultPosition={{
@@ -110,7 +110,7 @@ function AnalyticsPanel({
 				className="floating-panel__drag-handle"
 			/>
 
-			<div className={styles.body}>
+			<div className="analytics-panel__body">
 				<TabsRoot defaultValue="exec-time">
 					<TabsList variant="secondary">
 						<TabsTrigger value="exec-time" variant="secondary">
@@ -121,30 +121,33 @@ function AnalyticsPanel({
 						</TabsTrigger>
 					</TabsList>
 
-					<div className={styles.tabsScroll}>
+					<div className="analytics-panel__tabs-scroll">
 						<TabsContent value="exec-time">
-							<div className={styles.list}>
+							<div className="analytics-panel__list">
 								{execTimeRows.map((row) => (
 									<>
 										<div
 											key={`${row.group}-dot`}
-											className={styles.dot}
+											className="analytics-panel__dot"
 											style={{ backgroundColor: row.color }}
 										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
+										<span
+											key={`${row.group}-name`}
+											className="analytics-panel__service-name"
+										>
 											{row.group}
 										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
+										<div key={`${row.group}-bar`} className="analytics-panel__bar-cell">
+											<div className="analytics-panel__bar">
 												<div
-													className={styles.barFill}
+													className="analytics-panel__bar-fill"
 													style={{
 														width: `${Math.min(row.percentage, 100)}%`,
 														backgroundColor: row.color,
 													}}
 												/>
 											</div>
-											<span className={cx(styles.value, styles.valueWide)}>
+											<span className="analytics-panel__value analytics-panel__value--wide">
 												{row.percentage.toFixed(2)}%
 											</span>
 										</div>
@@ -154,28 +157,31 @@ function AnalyticsPanel({
 						</TabsContent>
 
 						<TabsContent value="spans">
-							<div className={styles.list}>
+							<div className="analytics-panel__list">
 								{spanCountRows.map((row) => (
 									<>
 										<div
 											key={`${row.group}-dot`}
-											className={styles.dot}
+											className="analytics-panel__dot"
 											style={{ backgroundColor: row.color }}
 										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
+										<span
+											key={`${row.group}-name`}
+											className="analytics-panel__service-name"
+										>
 											{row.group}
 										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
+										<div key={`${row.group}-bar`} className="analytics-panel__bar-cell">
+											<div className="analytics-panel__bar">
 												<div
-													className={styles.barFill}
+													className="analytics-panel__bar-fill"
 													style={{
 														width: `${(row.count / row.max) * 100}%`,
 														backgroundColor: row.color,
 													}}
 												/>
 											</div>
-											<span className={cx(styles.value, styles.valueNarrow)}>
+											<span className="analytics-panel__value analytics-panel__value--narrow">
 												{row.count}
 											</span>
 										</div>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.module.scss

@@ -1,26 +0,0 @@
-.root {
-	position: relative;
-}
-
-.toggle {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	background: none;
-	border: none;
-	padding: 0;
-	cursor: pointer;
-	color: inherit;
-	font: inherit;
-}
-
-.label {
-	white-space: nowrap;
-}
-
-.list {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	padding: 12px 0;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.styles.scss

@@ -0,0 +1,34 @@
+.linked-spans {
+	position: relative;
+
+	&__toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		color: inherit;
+		font: inherit;
+	}
+
+	&__label {
+		white-space: nowrap;
+	}
+
+	&__chevron {
+		transition: transform 0.15s ease;
+
+		&--open {
+			transform: rotate(90deg);
+		}
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px 0;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.tsx

@@ -5,7 +5,7 @@ import { Badge } from '@signozhq/ui/badge';
 import ROUTES from 'constants/routes';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 
-import styles from './LinkedSpans.module.scss';
+import './LinkedSpans.styles.scss';
 
 interface SpanReference {
 	traceId: string;
@@ -56,12 +56,12 @@ export function LinkedSpansToggle({
 	toggleOpen: () => void;
 }): JSX.Element {
 	if (count === 0) {
-		return <span className={styles.label}>0 linked spans</span>;
+		return <span className="linked-spans__label">0 linked spans</span>;
 	}
 
 	return (
-		<button type="button" className={styles.toggle} onClick={toggleOpen}>
-			<span className={styles.label}>
+		<button type="button" className="linked-spans__toggle" onClick={toggleOpen}>
+			<span className="linked-spans__label">
 				{count} linked span{count !== 1 ? 's' : ''}
 			</span>
 			{isOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
@@ -87,7 +87,7 @@ export function LinkedSpansPanel({
 	}
 
 	return (
-		<div className={styles.list}>
+		<div className="linked-spans__list">
 			{linkedSpans.map((item) => (
 				<KeyValueLabel
 					key={item.spanId}
@@ -108,7 +108,7 @@ function LinkedSpans({ references }: LinkedSpansProps): JSX.Element {
 	const { linkedSpans, count, isOpen, toggleOpen } = useLinkedSpans(references);
 
 	return (
-		<div className={styles.root}>
+		<div className="linked-spans">
 			<LinkedSpansToggle count={count} isOpen={isOpen} toggleOpen={toggleOpen} />
 			<LinkedSpansPanel linkedSpans={linkedSpans} isOpen={isOpen} />
 		</div>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss

@@ -1,146 +0,0 @@
-.root {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-.body {
-	padding: 12px;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	scrollbar-width: none;
-	background: var(--l1-background);
-	font-size: 14px;
-	gap: 16px;
-
-	// DataViewer keeps its global `.data-viewer` class — give it a min-height
-	// so the tab area doesn't collapse on short content.
-	:global(.data-viewer) {
-		min-height: 500px;
-	}
-}
-
-.detailsSection {
-	flex-shrink: 0;
-	min-width: 0;
-}
-
-.tabsSection {
-	flex: 1;
-	min-width: 0;
-	max-height: 100%;
-	min-height: 400px;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	// TabsRoot — direct child of tabs-section
-	> div {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	[role='tablist'] {
-		flex-shrink: 0;
-	}
-
-	[class*='tabs__list-wrapper'] {
-		padding-left: 0 !important;
-	}
-}
-
-.tabsScroll {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	scrollbar-width: none;
-	display: flex;
-	flex-direction: column;
-
-	[role='tabpanel'] {
-		padding: 0;
-		flex: 1;
-		min-height: 0;
-	}
-}
-
-.spanRow {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 8px;
-	justify-content: space-between;
-}
-
-.spanInfo {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px 16px;
-	padding: 8px 0;
-}
-
-.spanInfoItem {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 13px;
-	color: var(--l2-foreground);
-	white-space: nowrap;
-}
-
-.highlightedOptions {
-	padding: 8px 0;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 0;
-
-	// KeyValueLabel uses a global `.key-value-label` root; constrain it
-	// inside the two-column grid so values can ellipsize cleanly.
-	:global(.key-value-label) {
-		width: auto;
-		min-width: 0;
-		overflow: hidden;
-	}
-}
-
-.serviceDot {
-	display: inline-block;
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--accent-forest);
-	flex-shrink: 0;
-}
-
-.traceId {
-	color: var(--accent-primary);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: block;
-}
-
-.traceIdCopy {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	padding: 0;
-	height: auto;
-	justify-content: flex-start;
-}
-
-// Tooltip is rendered in a portal but the SpanDetailsPanel can be docked as a
-// FloatingPanel (z-index 999), which would otherwise sit on top of the default
-// tooltip (z-index 50). Bump the tooltip above the panel.
-.dockToggleTooltip {
-	--tooltip-z-index: 1000;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.styles.scss

@@ -0,0 +1,170 @@
+.span-details-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	&__header-nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	&__body {
+		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+		background: var(--l1-background);
+		font-size: 14px;
+		gap: 16px;
+
+		.data-viewer {
+			min-height: 500px;
+		}
+	}
+
+	&__details-section {
+		flex-shrink: 0;
+		min-width: 0;
+	}
+
+	&__tabs-section {
+		flex: 1;
+		min-width: 0;
+		max-height: 100%;
+		min-height: 400px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		// TabsRoot — direct child of tabs-section
+		> div {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			overflow: hidden;
+		}
+
+		[role='tablist'] {
+			flex-shrink: 0;
+		}
+
+		[class*='tabs__list-wrapper'] {
+			padding-left: 0 !important;
+		}
+	}
+
+	&__tabs-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+		display: flex;
+		flex-direction: column;
+
+		[role='tabpanel'] {
+			padding: 0;
+			flex: 1;
+			min-height: 0;
+		}
+	}
+
+	&__span-row {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 8px;
+		justify-content: space-between;
+	}
+
+	&__span-info {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 16px;
+		padding: 8px 0;
+	}
+
+	&__span-info-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--l2-foreground);
+		white-space: nowrap;
+	}
+
+	&__highlighted-options {
+		padding: 8px 0;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 0;
+
+		.key-value-label {
+			width: auto;
+			min-width: 0;
+			overflow: hidden;
+		}
+	}
+
+	&__service-dot {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--accent-forest);
+		flex-shrink: 0;
+	}
+
+	&__trace-id {
+		color: var(--accent-primary);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: block;
+	}
+
+	&__trace-id-copy {
+		display: block;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding: 0;
+		height: auto;
+		justify-content: flex-start;
+	}
+
+	&__key-attributes {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px 0;
+
+		&-label {
+			font-size: var(--font-size-xs);
+			font-weight: var(--font-weight-medium);
+			color: var(--l2-foreground);
+			text-transform: uppercase;
+			letter-spacing: 0.48px;
+			line-height: var(--line-height-20);
+		}
+
+		&-chips {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px;
+		}
+	}
+}
+
+// Tooltip is rendered in a portal but the SpanDetailsPanel can be docked as a
+// FloatingPanel (z-index 999), which would otherwise sit on top of the default
+// tooltip (z-index 50). Bump the tooltip above the panel.
+.dock-toggle-tooltip {
+	--tooltip-z-index: 1000;
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -72,7 +72,7 @@ import SpanPercentileBadge from './SpanPercentile/SpanPercentileBadge';
 import SpanPercentilePanel from './SpanPercentile/SpanPercentilePanel';
 import useSpanPercentile from './SpanPercentile/useSpanPercentile';
 
-import styles from './SpanDetailsPanel.module.scss';
+import './SpanDetailsPanel.styles.scss';
 
 interface SpanDetailsPanelProps {
 	panelState: DetailsPanelState;
@@ -275,9 +275,9 @@ function SpanDetailsContent({
 	// }, [selectedSpan]);
 
 	return (
-		<div className={styles.body}>
-			<div className={styles.detailsSection}>
-				<div className={styles.spanRow}>
+		<div className="span-details-panel__body">
+			<div className="span-details-panel__details-section">
+				<div className="span-details-panel__span-row">
 					<KeyValueLabel
 						badgeKey="Span name"
 						badgeValue={selectedSpan.name}
@@ -296,8 +296,8 @@ function SpanDetailsContent({
 				<SpanPercentilePanel selectedSpan={selectedSpan} percentile={percentile} />
 
 				{/* Span info: exec time + start time */}
-				<div className={styles.spanInfo}>
-					<div className={styles.spanInfoItem}>
+				<div className="span-details-panel__span-info">
+					<div className="span-details-panel__span-info-item">
 						<Timer size={14} />
 						<span>
 							{getYAxisFormattedValue(`${selectedSpan.duration_nano / 1000000}`, 'ms')}
@@ -316,13 +316,13 @@ function SpanDetailsContent({
 							)}
 						</span>
 					</div>
-					<div className={styles.spanInfoItem}>
+					<div className="span-details-panel__span-info-item">
 						<CalendarClock size={14} />
 						<span>
 							{dayjs(selectedSpan.timestamp).format('HH:mm:ss — MMM D, YYYY')}
 						</span>
 					</div>
-					<div className={styles.spanInfoItem}>
+					<div className="span-details-panel__span-info-item">
 						<Link2 size={14} />
 						<LinkedSpansToggle
 							count={linkedSpans.count}
@@ -338,7 +338,7 @@ function SpanDetailsContent({
 				/>
 
 				{/* Step 6: HighlightedOptions */}
-				<div className={styles.highlightedOptions}>
+				<div className="span-details-panel__highlighted-options">
 					{HIGHLIGHTED_OPTIONS.map((option) => {
 						const rendered = option.render(selectedSpan);
 						if (!rendered) {
@@ -382,7 +382,7 @@ function SpanDetailsContent({
 				{/* Step 8: MiniTraceContext */}
 			</div>
 
-			<div className={styles.tabsSection}>
+			<div className="span-details-panel__tabs-section">
 				{/* Step 9: ContentTabs */}
 				<TabsRoot defaultValue="overview">
 					<TabsList variant="secondary">
@@ -402,7 +402,7 @@ function SpanDetailsContent({
 						)}
 					</TabsList>
 
-					<div className={styles.tabsScroll}>
+					<div className="span-details-panel__tabs-scroll">
 						<TabsContent value="overview">
 							<DataViewer
 								data={spanDisplayData}
@@ -512,7 +512,7 @@ function SpanDetailsPanel({
 									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
 								</Button>
 							</TooltipTrigger>
-							<TooltipContent className={styles.dockToggleTooltip}>
+							<TooltipContent className="dock-toggle-tooltip">
 								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
 							</TooltipContent>
 						</Tooltip>
@@ -546,7 +546,7 @@ function SpanDetailsPanel({
 					traceEndTime={traceEndTime}
 				/>
 			) : (
-				<div className={styles.body}>
+				<div className="span-details-panel__body">
 					<Skeleton active paragraph={{ rows: 6 }} title={{ width: '60%' }} />
 				</div>
 			)}
@@ -554,7 +554,7 @@ function SpanDetailsPanel({
 	);
 
 	if (variant === SpanDetailVariant.DOCKED) {
-		return <div className={styles.root}>{content}</div>;
+		return <div className="span-details-panel">{content}</div>;
 	}
 
 	if (variant === SpanDetailVariant.DRAWER) {
@@ -562,7 +562,7 @@ function SpanDetailsPanel({
 			<DetailsPanelDrawer
 				isOpen={panelState.isOpen}
 				onClose={panelState.close}
-				className={styles.root}
+				className="span-details-panel"
 			>
 				{content}
 			</DetailsPanelDrawer>
@@ -572,7 +572,7 @@ function SpanDetailsPanel({
 	return (
 		<FloatingPanel
 			isOpen={panelState.isOpen}
-			className={styles.root}
+			className="span-details-panel"
 			width={PANEL_WIDTH}
 			minWidth={480}
 			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentile.styles.scss

@@ -0,0 +1,258 @@
+// Badge — wraps a KeyValueLabel, clickable to toggle panel
+.span-percentile-badge {
+	cursor: pointer;
+
+	// Override key color for the percentile value (p99)
+	.key-value-label__key {
+		color: var(--destructive);
+	}
+
+	&__loader {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 4px;
+		color: var(--foreground);
+	}
+
+	&__value {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+	}
+}
+
+// Panel — collapsible, renders below the row
+.span-percentile-panel {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+	backdrop-filter: blur(20px);
+	margin: 8px 16px;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 8px 12px;
+		border-bottom: 1px solid var(--l1-border);
+
+		&-text {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			cursor: pointer;
+		}
+
+		&-icon {
+			color: var(--l2-foreground);
+		}
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+
+		&-title {
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-20);
+		}
+
+		&-highlight {
+			color: var(--destructive);
+		}
+
+		&-loader {
+			display: inline-flex;
+			align-items: flex-end;
+			margin: 0 4px;
+			line-height: 18px;
+		}
+	}
+
+	&__timerange {
+		width: 100%;
+
+		&-select {
+			width: 100%;
+			margin-top: 8px;
+			margin-bottom: 16px;
+
+			.ant-select-selector {
+				border-radius: 50px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				color: var(--l1-foreground);
+				font-size: 12px;
+				height: 32px;
+			}
+		}
+	}
+
+	&__table {
+		&-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+
+			&-text {
+				color: var(--l1-foreground);
+				font-size: 11px;
+				font-weight: 500;
+				line-height: 20px;
+				text-transform: uppercase;
+			}
+		}
+
+		&-rows {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+
+		&-skeleton {
+			.ant-skeleton-title {
+				width: 100% !important;
+				margin-top: 0 !important;
+			}
+
+			.ant-skeleton-paragraph {
+				margin-top: 8px;
+
+				& > li + li {
+					margin-top: 10px;
+					width: 100% !important;
+				}
+			}
+		}
+
+		&-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 12px;
+			padding: 0 4px;
+
+			&-key {
+				flex: 0 0 auto;
+				color: var(--l1-foreground);
+				font-size: 12px;
+				font-weight: 500;
+				line-height: 20px;
+			}
+
+			&-value {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 20px;
+			}
+
+			&-dash {
+				flex: 1;
+				height: 0;
+				margin: 0 8px;
+				border-top: 1px solid transparent;
+				border-image: repeating-linear-gradient(
+						to right,
+						var(--l1-border) 0,
+						var(--l1-border) 10px,
+						transparent 10px,
+						transparent 20px
+					)
+					1 stretch;
+			}
+
+			&--current {
+				border-radius: 2px;
+				background: rgba(78, 116, 248, 0.2);
+
+				.span-percentile-panel__table-row-key {
+					color: var(--text-robin-300);
+				}
+
+				.span-percentile-panel__table-row-dash {
+					border-image: repeating-linear-gradient(
+							to right,
+							#abbdff 0,
+							#abbdff 10px,
+							transparent 10px,
+							transparent 20px
+						)
+						1 stretch;
+				}
+
+				.span-percentile-panel__table-row-value {
+					color: var(--text-robin-400);
+				}
+			}
+		}
+	}
+
+	&__resource-selector {
+		overflow: hidden;
+		width: calc(100% + 16px);
+		position: absolute;
+		top: 32px;
+		left: -8px;
+		z-index: 1000;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		&-header {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		&-input {
+			border-radius: 0;
+			border: none !important;
+			box-shadow: none !important;
+			height: 36px;
+		}
+
+		&-items {
+			height: 200px;
+			overflow-y: auto;
+
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+				height: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--l3-background);
+			}
+		}
+
+		&-item {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 8px 12px;
+
+			&-value {
+				color: var(--l1-foreground);
+				font-size: 13px;
+				line-height: 20px;
+			}
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.module.scss

@@ -1,28 +0,0 @@
-// Badge — wraps a KeyValueLabel, clickable to toggle panel
-.root {
-	cursor: pointer;
-
-	// KeyValueLabel renders its key with a global class; recolor only the badge
-	// instance inside this badge wrapper.
-	:global(.key-value-label__key) {
-		color: var(--destructive);
-	}
-}
-
-.loader {
-	display: inline-flex;
-	align-items: center;
-	padding: 2px 4px;
-	color: var(--foreground);
-}
-
-.value {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.icon {
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.tsx

@@ -3,7 +3,7 @@ import KeyValueLabel from 'periscope/components/KeyValueLabel';
 
 import { UseSpanPercentileReturn } from './useSpanPercentile';
 
-import styles from './SpanPercentileBadge.module.scss';
+import './SpanPercentile.styles.scss';
 
 type SpanPercentileBadgeProps = Pick<
 	UseSpanPercentileReturn,
@@ -25,7 +25,7 @@ function SpanPercentileBadge({
 }: SpanPercentileBadgeProps): JSX.Element | null {
 	if (loading) {
 		return (
-			<div className={styles.loader}>
+			<div className="span-percentile-badge__loader">
 				<Loader size={14} className="animate-spin" />
 			</div>
 		);
@@ -37,7 +37,7 @@ function SpanPercentileBadge({
 
 	return (
 		<div
-			className={styles.root}
+			className="span-percentile-badge"
 			onClick={toggleOpen}
 			role="button"
 			tabIndex={0}
@@ -50,12 +50,12 @@ function SpanPercentileBadge({
 			<KeyValueLabel
 				badgeKey={`p${percentileValue}`}
 				badgeValue={
-					<span className={styles.value}>
+					<span className="span-percentile-badge__value">
 						{duration}
 						{isOpen ? (
-							<ChevronUp size={14} className={styles.icon} />
+							<ChevronUp size={14} className="span-percentile-badge__icon" />
 						) : (
-							<ChevronDown size={14} className={styles.icon} />
+							<ChevronDown size={14} className="span-percentile-badge__icon" />
 						)}
 					</span>
 				}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.module.scss

@@ -1,217 +0,0 @@
-// Panel — collapsible, renders below the row
-.root {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-	backdrop-filter: blur(20px);
-	margin: 8px 16px;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	padding: 8px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 8px;
-}
-
-.contentTitle {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-20);
-}
-
-.contentHighlight {
-	color: var(--destructive);
-}
-
-.contentLoader {
-	display: inline-flex;
-	align-items: flex-end;
-	margin: 0 4px;
-	line-height: 18px;
-}
-
-.timerange {
-	width: 100%;
-}
-
-.timerangeSelect {
-	width: 100%;
-	margin-top: 8px;
-	margin-bottom: 16px;
-
-	:global(.ant-select-selector) {
-		border-radius: 50px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		color: var(--l1-foreground);
-		font-size: 12px;
-		height: 32px;
-	}
-}
-
-.tableHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-.tableHeaderText {
-	color: var(--l1-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 20px;
-	text-transform: uppercase;
-}
-
-.tableRows {
-	margin-top: 8px;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.tableSkeleton {
-	:global(.ant-skeleton-title) {
-		width: 100% !important;
-		margin-top: 0 !important;
-	}
-
-	:global(.ant-skeleton-paragraph) {
-		margin-top: 8px;
-
-		& > li + li {
-			margin-top: 10px;
-			width: 100% !important;
-		}
-	}
-}
-
-.tableRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 0 4px;
-}
-
-.tableRowKey {
-	flex: 0 0 auto;
-	color: var(--l1-foreground);
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.tableRowValue {
-	color: var(--l2-foreground);
-	font-size: 12px;
-	line-height: 20px;
-}
-
-.tableRowDash {
-	flex: 1;
-	height: 0;
-	margin: 0 8px;
-	border-top: 1px solid transparent;
-	border-image: repeating-linear-gradient(
-			to right,
-			var(--l1-border) 0,
-			var(--l1-border) 10px,
-			transparent 10px,
-			transparent 20px
-		)
-		1 stretch;
-}
-
-.isCurrent {
-	border-radius: 2px;
-	background: rgba(78, 116, 248, 0.2);
-
-	.tableRowKey {
-		color: var(--text-robin-300);
-	}
-
-	.tableRowDash {
-		border-image: repeating-linear-gradient(
-				to right,
-				#abbdff 0,
-				#abbdff 10px,
-				transparent 10px,
-				transparent 20px
-			)
-			1 stretch;
-	}
-
-	.tableRowValue {
-		color: var(--text-robin-400);
-	}
-}
-
-.resourceSelector {
-	overflow: hidden;
-	width: calc(100% + 16px);
-	position: absolute;
-	top: 32px;
-	left: -8px;
-	z-index: 1000;
-	border-radius: 4px;
-	border: 1px solid var(--l1-border);
-	background: var(--l1-background);
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	backdrop-filter: blur(20px);
-}
-
-.resourceSelectorHeader {
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.resourceSelectorInput {
-	border-radius: 0;
-	border: none !important;
-	box-shadow: none !important;
-	height: 36px;
-}
-
-.resourceSelectorItems {
-	height: 200px;
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.3rem;
-		height: 0.3rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--l3-background);
-	}
-}
-
-.resourceSelectorItem {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 12px;
-}
-
-.resourceSelectorItemValue {
-	color: var(--l1-foreground);
-	font-size: 13px;
-	line-height: 20px;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,7 +1,5 @@
 import { Checkbox, Input, Select, Skeleton } from 'antd';
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
@@ -10,7 +8,7 @@ import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { UseSpanPercentileReturn } from './useSpanPercentile';
 
-import styles from './SpanPercentilePanel.module.scss';
+import './SpanPercentile.styles.scss';
 
 const DEFAULT_RESOURCE_ATTRIBUTES = {
 	serviceName: 'service.name',
@@ -55,46 +53,46 @@ function SpanPercentilePanel({
 	}
 
 	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
-				<Button
-					variant="link"
-					color="secondary"
+		<div className="span-percentile-panel">
+			<div className="span-percentile-panel__header">
+				<Typography.Text
+					className="span-percentile-panel__header-text"
 					onClick={toggleOpen}
-					prefix={<ChevronDown size={16} />}
 				>
-					Span Percentile
-				</Button>
+					<ChevronDown size={16} /> Span Percentile
+				</Typography.Text>
 
-				<Button
-					variant="link"
-					color="secondary"
-					size="icon"
-					onClick={(): void =>
-						setShowResourceAttributesSelector(!showResourceAttributesSelector)
-					}
-					prefix={
-						showResourceAttributesSelector ? <Check size={16} /> : <Plus size={16} />
-					}
-				/>
+				{showResourceAttributesSelector ? (
+					<Check
+						size={16}
+						className="cursor-pointer span-percentile-panel__header-icon"
+						onClick={(): void => setShowResourceAttributesSelector(false)}
+					/>
+				) : (
+					<Plus
+						size={16}
+						className="cursor-pointer span-percentile-panel__header-icon"
+						onClick={(): void => setShowResourceAttributesSelector(true)}
+					/>
+				)}
 			</div>
 
 			{showResourceAttributesSelector && (
 				<div
-					className={styles.resourceSelector}
+					className="span-percentile-panel__resource-selector"
 					ref={resourceAttributesSelectorRef}
 				>
-					<div className={styles.resourceSelectorHeader}>
+					<div className="span-percentile-panel__resource-selector-header">
 						<Input
 							placeholder="Search resource attributes"
-							className={styles.resourceSelectorInput}
+							className="span-percentile-panel__resource-selector-input"
 							value={resourceAttributesSearchQuery}
 							onChange={(e): void =>
 								setResourceAttributesSearchQuery(e.target.value as string)
 							}
 						/>
 					</div>
-					<div className={styles.resourceSelectorItems}>
+					<div className="span-percentile-panel__resource-selector-items">
 						{spanResourceAttributes
 							.filter((attr) =>
 								attr.key
@@ -102,7 +100,10 @@ function SpanPercentilePanel({
 									.includes(resourceAttributesSearchQuery.toLowerCase()),
 							)
 							.map((attr) => (
-								<div className={styles.resourceSelectorItem} key={attr.key}>
+								<div
+									className="span-percentile-panel__resource-selector-item"
+									key={attr.key}
+								>
 									<Checkbox
 										checked={attr.isSelected}
 										onChange={(e): void => {
@@ -117,7 +118,9 @@ function SpanPercentilePanel({
 											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.name
 										}
 									>
-										<div className={styles.resourceSelectorItemValue}>{attr.key}</div>
+										<div className="span-percentile-panel__resource-selector-item-value">
+											{attr.key}
+										</div>
 									</Checkbox>
 								</div>
 							))}
@@ -125,15 +128,15 @@ function SpanPercentilePanel({
 				</div>
 			)}
 
-			<div className={styles.content}>
-				<Typography.Text className={styles.contentTitle}>
+			<div className="span-percentile-panel__content">
+				<Typography.Text className="span-percentile-panel__content-title">
 					This span duration is{' '}
 					{!loading && spanPercentileData ? (
-						<span className={styles.contentHighlight}>
+						<span className="span-percentile-panel__content-highlight">
 							p{Math.floor(spanPercentileData.percentile || 0)}
 						</span>
 					) : (
-						<span className={styles.contentLoader}>
+						<span className="span-percentile-panel__content-loader">
 							<Loader size={12} className="animate-spin" />
 						</span>
 					)}{' '}
@@ -141,11 +144,11 @@ function SpanPercentilePanel({
 					hour(s) since the span start time.
 				</Typography.Text>
 
-				<div className={styles.timerange}>
+				<div className="span-percentile-panel__timerange">
 					<Select
 						labelInValue
 						placeholder="Select timerange"
-						className={styles.timerangeSelect}
+						className="span-percentile-panel__timerange-select"
 						getPopupContainer={(trigger): HTMLElement =>
 							trigger.parentElement || document.body
 						}
@@ -164,45 +167,45 @@ function SpanPercentilePanel({
 					/>
 				</div>
 
-				<div>
-					<div className={styles.tableHeader}>
-						<Typography.Text className={styles.tableHeaderText}>
+				<div className="span-percentile-panel__table">
+					<div className="span-percentile-panel__table-header">
+						<Typography.Text className="span-percentile-panel__table-header-text">
 							Percentile
 						</Typography.Text>
-						<Typography.Text className={styles.tableHeaderText}>
+						<Typography.Text className="span-percentile-panel__table-header-text">
 							Duration
 						</Typography.Text>
 					</div>
 
-					<div className={styles.tableRows}>
+					<div className="span-percentile-panel__table-rows">
 						{isLoadingData || isFetchingData ? (
 							<Skeleton
 								active
 								paragraph={{ rows: 3 }}
-								className={styles.tableSkeleton}
+								className="span-percentile-panel__table-skeleton"
 							/>
 						) : (
 							<>
 								{Object.entries(spanPercentileData?.percentiles || {}).map(
 									([pKey, pDuration]) => (
-										<div className={styles.tableRow} key={pKey}>
-											<Typography.Text className={styles.tableRowKey}>
+										<div className="span-percentile-panel__table-row" key={pKey}>
+											<Typography.Text className="span-percentile-panel__table-row-key">
 												{pKey}
 											</Typography.Text>
-											<div className={styles.tableRowDash} />
-											<Typography.Text className={styles.tableRowValue}>
+											<div className="span-percentile-panel__table-row-dash" />
+											<Typography.Text className="span-percentile-panel__table-row-value">
 												{getYAxisFormattedValue(`${pDuration / 1000000}`, 'ms')}
 											</Typography.Text>
 										</div>
 									),
 								)}
 
-								<div className={cx(styles.tableRow, styles.isCurrent)}>
-									<Typography.Text className={styles.tableRowKey}>
+								<div className="span-percentile-panel__table-row span-percentile-panel__table-row--current">
+									<Typography.Text className="span-percentile-panel__table-row-key">
 										p{Math.floor(spanPercentileData?.percentile || 0)}
 									</Typography.Text>
-									<div className={styles.tableRowDash} />
-									<Typography.Text className={styles.tableRowValue}>
+									<div className="span-percentile-panel__table-row-dash" />
+									<Typography.Text className="span-percentile-panel__table-row-value">
 										(this span){' '}
 										{getYAxisFormattedValue(
 											`${selectedSpan.duration_nano / 1000000}`,

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/TraceIdField.tsx

@@ -5,8 +5,6 @@ import { toast } from '@signozhq/ui/sonner';
 import ROUTES from 'constants/routes';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-import styles from './SpanDetailsPanel.module.scss';
-
 interface TraceIdFieldProps {
 	span: SpanV3;
 }
@@ -38,7 +36,7 @@ export function TraceIdField({ span }: TraceIdFieldProps): JSX.Element {
 			<Button
 				variant="link"
 				color="secondary"
-				className={styles.traceIdCopy}
+				className="span-details-panel__trace-id-copy"
 				onClick={handleCopy}
 				title="Click to copy trace ID"
 			>
@@ -53,7 +51,7 @@ export function TraceIdField({ span }: TraceIdFieldProps): JSX.Element {
 				pathname: `/trace/${span.trace_id}`,
 				search: window.location.search,
 			}}
-			className={styles.traceId}
+			className="span-details-panel__trace-id"
 		>
 			{span.trace_id}
 		</Link>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/config.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { Badge } from '@signozhq/ui/badge';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-import styles from './SpanDetailsPanel.module.scss';
 import { TraceIdField } from './TraceIdField';
 
 interface HighlightedOption {
@@ -18,7 +17,7 @@ export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
 		render: (span): ReactNode | null =>
 			span['service.name'] ? (
 				<Badge color="vanilla">
-					<span className={styles.serviceDot} />
+					<span className="span-details-panel__service-dot" />
 					{span['service.name']}
 				</Badge>
 			) : null,

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.module.scss

@@ -1,60 +0,0 @@
-.root {
-	font-size: 12px;
-	color: var(--l1-foreground);
-	max-width: 300px;
-}
-
-.header {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 3px;
-	padding: 2px 6px;
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	color: var(--l2-foreground);
-	margin-bottom: 6px;
-}
-
-.name {
-	font-weight: 600;
-	margin-bottom: 2px;
-	color: var(--text-robin-400);
-}
-
-.hasError {
-	color: var(--destructive);
-}
-
-.time {
-	font-size: 11px;
-	color: var(--l2-foreground);
-	margin-bottom: 4px;
-}
-
-.divider {
-	border-top: 1px solid var(--l2-border);
-	margin: 6px 0;
-}
-
-.attributes {
-	font-size: 11px;
-}
-
-.kv {
-	margin-bottom: 2px;
-	line-height: 1.4;
-	word-break: break-all;
-}
-
-.key {
-	color: var(--l2-foreground);
-}
-
-.value {
-	color: var(--l1-foreground);
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss

@@ -0,0 +1,60 @@
+.event-tooltip-content {
+	font-size: 12px;
+	color: var(--l1-foreground);
+	max-width: 300px;
+
+	&__header {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		background: var(--l2-background);
+		border: 1px solid var(--l2-border);
+		border-radius: 3px;
+		padding: 2px 6px;
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--l2-foreground);
+		margin-bottom: 6px;
+	}
+
+	&__name {
+		font-weight: 600;
+		margin-bottom: 2px;
+		color: var(--text-robin-400);
+
+		&.error {
+			color: var(--destructive);
+		}
+	}
+
+	&__time {
+		font-size: 11px;
+		color: var(--l2-foreground);
+		margin-bottom: 4px;
+	}
+
+	&__divider {
+		border-top: 1px solid var(--l2-border);
+		margin: 6px 0;
+	}
+
+	&__attributes {
+		font-size: 11px;
+	}
+
+	&__kv {
+		margin-bottom: 2px;
+		line-height: 1.4;
+		word-break: break-all;
+	}
+
+	&__key {
+		color: var(--l2-foreground);
+	}
+
+	&__value {
+		color: var(--l1-foreground);
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx

@@ -1,9 +1,8 @@
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import { Diamond } from '@signozhq/icons';
-import cx from 'classnames';
 import { toFixed } from 'utils/toFixed';
 
-import styles from './EventTooltipContent.module.scss';
+import './EventTooltipContent.styles.scss';
 
 export interface EventTooltipContentProps {
 	eventName: string;
@@ -21,25 +20,25 @@ export function EventTooltipContent({
 	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
 
 	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
+		<div className="event-tooltip-content">
+			<div className="event-tooltip-content__header">
 				<Diamond size={10} />
 				<span>EVENT DETAILS</span>
 			</div>
-			<div className={cx(styles.name, isError && styles.hasError)}>
+			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
 				{eventName}
 			</div>
-			<div className={styles.time}>
+			<div className="event-tooltip-content__time">
 				{toFixed(time, 2)} {timeUnitName} since span start
 			</div>
 			{Object.keys(attributeMap).length > 0 && (
 				<>
-					<div className={styles.divider} />
-					<div className={styles.attributes}>
+					<div className="event-tooltip-content__divider" />
+					<div className="event-tooltip-content__attributes">
 						{Object.entries(attributeMap).map(([key, value]) => (
-							<div key={key} className={styles.kv}>
-								<span className={styles.key}>{key}:</span>{' '}
-								<span className={styles.value}>{value}</span>
+							<div key={key} className="event-tooltip-content__kv">
+								<span className="event-tooltip-content__key">{key}:</span>{' '}
+								<span className="event-tooltip-content__value">{value}</span>
 							</div>
 						))}
 					</div>

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss

@@ -2,13 +2,13 @@
 // `top` is updated by the parent to track the hovered row's Y; its `left`
 // is the sidebar/timeline boundary so the popover always opens at the same
 // X regardless of which row is hovered.
-.anchor {
+.span-hover-card-anchor {
 	position: absolute;
 	width: 1px;
 	pointer-events: none;
 }
 
-.popover {
+.span-hover-card-popover {
 	// Hover card may be rendered while the SpanDetailsPanel is docked as
 	// a FloatingPanel (z-index 999); bump above the default tooltip z-index.
 	--tooltip-z-index: 1000;
@@ -20,29 +20,31 @@
 	color: var(--l1-foreground);
 }
 
-.content {
+// Flamegraph tooltip — rendered as a portal, uses same semantic tokens.
+// Position is set inline on the element (left/top track the cursor); the
+// static layout/decoration lives here.
+.flamegraph-tooltip {
+	position: fixed;
+	z-index: 1000;
+	pointer-events: none;
+	background-color: var(--l1-background);
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	border: 1px solid var(--l2-border);
+}
+
+.span-hover-card-content {
 	font-size: 12px;
 	color: var(--l1-foreground);
-}
 
-.name {
-	font-weight: 600;
-	margin-bottom: 4px;
-}
+	&__name {
+		font-weight: 600;
+		margin-bottom: 4px;
+	}
 
-.row {
-	line-height: 1.5;
-	color: var(--l2-foreground);
-}
-
-.preview {
-	// container for additional preview rows
-}
-
-.previewKey {
-	color: var(--l2-foreground);
-}
-
-.previewValue {
-	color: var(--l1-foreground);
+	&__row {
+		line-height: 1.5;
+		color: var(--l2-foreground);
+	}
 }

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { toFixed } from 'utils/toFixed';
 
-import styles from './SpanHoverCard.module.scss';
+import './SpanHoverCard.styles.scss';
 
 /**
  * Span-level fields that the tooltip always shows (as the colored title or
@@ -51,21 +51,27 @@ export function SpanTooltipContent({
 		convertTimeToRelevantUnit(durationMs);
 
 	return (
-		<div className={styles.content}>
-			<div className={styles.name} style={{ color }}>
+		<div className="span-hover-card-content">
+			<div className="span-hover-card-content__name" style={{ color }}>
 				{spanName}
 			</div>
-			<div className={styles.row}>status: {hasError ? 'error' : 'ok'}</div>
-			<div className={styles.row}>start: {toFixed(relativeStartMs, 2)} ms</div>
-			<div className={styles.row}>
+			<div className="span-hover-card-content__row">
+				status: {hasError ? 'error' : 'ok'}
+			</div>
+			<div className="span-hover-card-content__row">
+				start: {toFixed(relativeStartMs, 2)} ms
+			</div>
+			<div className="span-hover-card-content__row">
 				duration: {toFixed(formattedDuration, 2)} {timeUnitName}
 			</div>
 			{previewRows && previewRows.length > 0 && (
-				<div className={styles.preview}>
+				<div className="span-hover-card-content__preview">
 					{previewRows.map((row) => (
-						<div key={row.key} className={styles.row}>
-							<span className={styles.previewKey}>{row.key}:</span>{' '}
-							<span className={styles.previewValue}>{row.value}</span>
+						<div key={row.key} className="span-hover-card-content__row">
+							<span className="span-hover-card-content__preview-key">{row.key}:</span>{' '}
+							<span className="span-hover-card-content__preview-value">
+								{row.value}
+							</span>
 						</div>
 					))}
 				</div>
@@ -146,7 +152,7 @@ export function SpanHoverCard({
 			<Tooltip open={hoverCardData !== null} onOpenChange={onOpenChange}>
 				<TooltipTrigger asChild>
 					<div
-						className={styles.anchor}
+						className="span-hover-card-anchor"
 						style={{
 							top: hoverCardData?.anchorTop ?? 0,
 							left: anchorLeft,
@@ -158,7 +164,7 @@ export function SpanHoverCard({
 					side="right"
 					align="start"
 					sideOffset={8}
-					className={styles.popover}
+					className="span-hover-card-popover"
 				>
 					{hoverCardData && <SpanTooltipContent {...hoverCardData.tooltip} />}
 				</TooltipContent>

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.module.scss

@@ -1,75 +0,0 @@
-.wrapper {
-	flex-shrink: 0;
-	position: relative;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	gap: 8px;
-
-	// KeyValueLabel renders with a global `.key-value-label` root; keep it from
-	// shrinking on the trace details header.
-	:global(.key-value-label) {
-		flex-shrink: 0;
-	}
-}
-
-.backBtn {
-	flex-shrink: 0;
-}
-
-.filter {
-	min-width: 0;
-}
-
-.isExpanded {
-	max-width: none;
-	flex: 1;
-}
-
-.oldViewBtn {
-	flex-shrink: 0;
-}
-
-.analyticsBtn {
-	flex-shrink: 0;
-	margin-left: auto;
-}
-
-.subHeader {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	padding: 4px 16px 8px;
-	font-size: 13px;
-	color: var(--l2-foreground);
-}
-
-.subItem {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	white-space: nowrap;
-}
-
-.separator {
-	color: var(--l2-foreground);
-	opacity: 0.5;
-}
-
-.entryPointBadge {
-	padding: 2px 8px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	font-size: 12px;
-}
-
-.skeleton {
-	:global(.ant-skeleton-input) {
-		width: 160px !important;
-		min-height: 20px !important;
-		height: 20px !important;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.styles.scss

@@ -0,0 +1,74 @@
+.trace-details-header-wrapper {
+	flex-shrink: 0;
+	position: relative;
+}
+
+.trace-details-header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 8px;
+
+	&__back-btn {
+		flex-shrink: 0;
+	}
+
+	.key-value-label {
+		flex-shrink: 0;
+	}
+
+	&__filter {
+		&.trace-v3-filter-row {
+			padding: 0;
+		}
+		min-width: 0;
+
+		&--expanded {
+			max-width: none;
+			flex: 1;
+		}
+	}
+
+	&__old-view-btn {
+		flex-shrink: 0;
+	}
+
+	&__analytics-btn {
+		flex-shrink: 0;
+		margin-left: auto;
+	}
+
+	&__sub-header {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		padding: 4px 16px 8px;
+		font-size: 13px;
+		color: var(--l2-foreground);
+	}
+
+	&__sub-item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		white-space: nowrap;
+	}
+
+	&__separator {
+		color: var(--l2-foreground);
+		opacity: 0.5;
+	}
+
+	&__entry-point-badge {
+		padding: 2px 8px;
+		border: 1px solid var(--l2-border);
+		border-radius: 4px;
+		font-size: 12px;
+	}
+
+	&__skeleton .ant-skeleton-input {
+		width: 160px !important;
+		min-height: 20px !important;
+		height: 20px !important;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -9,7 +9,6 @@ import {
 } from '@signozhq/ui/tooltip';
 import { Skeleton } from 'antd';
 import setLocalStorageKey from 'api/browser/localstorage/set';
-import cx from 'classnames';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -34,7 +33,7 @@ import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
 import TraceOptionsMenu from './TraceOptionsMenu';
 
-import styles from './TraceDetailsHeader.module.scss';
+import './TraceDetailsHeader.styles.scss';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 
 interface FilterMetadata {
@@ -69,7 +68,7 @@ function DetailsLoader(): JSX.Element {
 					key={i}
 					active
 					size="small"
-					className={styles.skeleton}
+					className="trace-details-header__skeleton"
 				/>
 			))}
 		</>
@@ -121,15 +120,15 @@ function TraceDetailsHeader({
 		convertTimeToRelevantUnit(durationMs);
 
 	return (
-		<div className={styles.wrapper}>
-			<div className={styles.header}>
+		<div className="trace-details-header-wrapper">
+			<div className="trace-details-header">
 				{!isFilterExpanded && (
 					<>
 						<Button
 							variant="solid"
 							color="secondary"
 							size="md"
-							className={styles.backBtn}
+							className="trace-details-header__back-btn"
 							onClick={handlePreviousBtnClick}
 						>
 							<ArrowLeft size={14} />
@@ -152,7 +151,7 @@ function TraceDetailsHeader({
 												variant="ghost"
 												size="icon"
 												color="secondary"
-												className={styles.analyticsBtn}
+												className="trace-details-header__analytics-btn"
 												onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
 											>
 												<ChartPie size={14} />
@@ -168,7 +167,11 @@ function TraceDetailsHeader({
 								/>
 							</>
 						)}
-						<div className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}>
+						<div
+							className={`trace-details-header__filter${
+								isFilterExpanded ? ' trace-details-header__filter--expanded' : ''
+							}`}
+						>
 							<Filters
 								startTime={filterMetadata.startTime}
 								endTime={filterMetadata.endTime}
@@ -184,7 +187,7 @@ function TraceDetailsHeader({
 								variant="solid"
 								color="secondary"
 								size="sm"
-								className={styles.oldViewBtn}
+								className="trace-details-header__old-view-btn"
 								onClick={handleSwitchToOldView}
 							>
 								Legacy View
@@ -195,22 +198,22 @@ function TraceDetailsHeader({
 			</div>
 
 			{showTraceDetails && (
-				<div className={styles.subHeader}>
+				<div className="trace-details-header__sub-header">
 					{traceMetadata ? (
 						<>
-							<span className={styles.subItem}>
+							<span className="trace-details-header__sub-item">
 								<Server size={13} />
 								{traceMetadata.rootServiceName}
-								<span className={styles.separator}>—</span>
-								<span className={styles.entryPointBadge}>
+								<span className="trace-details-header__separator">—</span>
+								<span className="trace-details-header__entry-point-badge">
 									{traceMetadata.rootServiceEntryPoint}
 								</span>
 							</span>
-							<span className={styles.subItem}>
+							<span className="trace-details-header__sub-item">
 								<Timer size={13} />
 								{parseFloat(formattedDuration.toFixed(2))} {timeUnitName}
 							</span>
-							<span className={styles.subItem}>
+							<span className="trace-details-header__sub-item">
 								<CalendarClock size={13} />
 								{dayjs(traceMetadata.startTimestampMillis).format(
 									DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS,

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -1,127 +0,0 @@
-.root {
-	height: calc(100vh);
-	display: flex;
-	flex-direction: column;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	overflow: hidden;
-}
-
-// Shared Ant Collapse chrome reset for both the flamegraph and waterfall
-// collapse panels.
-.flameCollapse,
-.waterfallCollapse {
-	border: none;
-	border-radius: 0;
-	background: transparent;
-
-	:global(.ant-collapse-item) {
-		border: none;
-	}
-
-	:global(.ant-collapse-header) {
-		border-top: 1px solid var(--l2-border);
-		border-bottom: 1px solid var(--l2-border);
-	}
-
-	:global(.ant-collapse-content) {
-		background: transparent;
-		border-top: none;
-		// Disable collapse animation — virtualizer and canvas flicker during
-		// height transitions.
-		transition: none !important;
-	}
-}
-
-.collapseLabel {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-}
-
-.collapseTitle {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.collapseCount {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-	font-size: 12px;
-	font-weight: 400;
-	color: var(--l2-foreground);
-}
-
-.collapseCountItem {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.hasErrors {
-	color: var(--destructive);
-}
-
-.flameCollapse {
-	flex-shrink: 0;
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-	}
-}
-
-.waterfallCollapse {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	:global(.ant-collapse-item) {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	:global(.ant-collapse-content.ant-collapse-content-active) {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	&.isDocked {
-		flex: none;
-
-		:global(.ant-collapse-item) {
-			flex: none;
-			display: block;
-		}
-
-		:global(.ant-collapse-content-box) {
-			flex: none;
-			display: block;
-		}
-	}
-}
-
-.dockedSpanDetails {
-	flex: 1;
-	overflow: auto;
-	min-height: 0;
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.styles.scss

@@ -0,0 +1,124 @@
+.trace-details-v3 {
+	height: calc(100vh);
+	display: flex;
+	flex-direction: column;
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	&__flame-collapse,
+	&__waterfall-collapse {
+		border: none;
+		border-radius: 0;
+		background: transparent;
+
+		.ant-collapse-item {
+			border: none;
+		}
+
+		.ant-collapse-header {
+			border-top: 1px solid var(--l2-border);
+			border-bottom: 1px solid var(--l2-border);
+		}
+
+		.ant-collapse-content {
+			background: transparent;
+			border-top: none;
+			// Disable collapse animation — virtualizer and canvas flicker during height transitions
+			transition: none !important;
+		}
+	}
+
+	&__collapse-label {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+	}
+
+	&__collapse-title {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__collapse-count {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--l2-foreground);
+	}
+
+	&__collapse-count-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	&__collapse-count-errors {
+		color: var(--destructive);
+	}
+
+	&__flame-collapse {
+		flex-shrink: 0;
+
+		.ant-collapse-content-box {
+			padding: 0 !important;
+		}
+	}
+
+	&__waterfall-collapse {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.ant-collapse-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		.ant-collapse-content.ant-collapse-content-active {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		.ant-collapse-content-box {
+			padding: 0 !important;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		&--docked {
+			flex: none;
+
+			.ant-collapse-item {
+				flex: none;
+				display: block;
+			}
+
+			.ant-collapse-content-box {
+				flex: none;
+				display: block;
+			}
+		}
+	}
+
+	&__docked-span-details {
+		flex: 1;
+		overflow: auto;
+		min-height: 0;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.module.scss

@@ -1,42 +0,0 @@
-.root {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	padding: 0 15px;
-}
-
-.viewport {
-	flex: 1;
-	overflow: hidden;
-	position: relative;
-}
-
-.main {
-	display: block;
-	width: 100%;
-	cursor: grab;
-}
-
-.overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	pointer-events: none;
-}
-
-// Flamegraph tooltip — rendered as a portal, follows the cursor.
-// Position is set inline on the element (left/top); the layout/decoration
-// lives here. Shares visual treatment with the waterfall hover popover
-// but is positioned `fixed` instead of anchored.
-.tooltip {
-	position: fixed;
-	z-index: 1000;
-	pointer-events: none;
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
-	color: var(--l1-foreground);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.styles.scss

@@ -0,0 +1,26 @@
+.flamegraph-canvas {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	padding: 0 15px;
+}
+
+.flamegraph-canvas__viewport {
+	flex: 1;
+	overflow: hidden;
+	position: relative;
+}
+
+.flamegraph-canvas__main {
+	display: block;
+	width: 100%;
+	cursor: grab;
+}
+
+.flamegraph-canvas__overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	pointer-events: none;
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -16,7 +16,7 @@ import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
 import { useScrollToSpan } from './hooks/useScrollToSpan';
 import { EventRect, FlamegraphCanvasProps, SpanRect } from './types';
 
-import styles from './FlamegraphCanvas.module.scss';
+import './FlamegraphCanvas.styles.scss';
 
 function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const {
@@ -194,7 +194,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const tooltipElement = tooltipContent
 		? createPortal(
 				<div
-					className={styles.tooltip}
+					className="span-hover-card-popover flamegraph-tooltip"
 					style={{
 						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
 						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
@@ -223,7 +223,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 		: null;
 
 	return (
-		<div className={styles.root}>
+		<div className="flamegraph-canvas">
 			{tooltipElement}
 			<TimelineV3
 				startTimestamp={viewStartTs}
@@ -234,7 +234,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 			/>
 			<div
 				ref={containerRef}
-				className={styles.viewport}
+				className="flamegraph-canvas__viewport"
 				onMouseEnter={(): void => {
 					isOverFlamegraphRef.current = true;
 				}}
@@ -242,7 +242,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 			>
 				<canvas
 					ref={canvasRef}
-					className={styles.main}
+					className="flamegraph-canvas__main"
 					onMouseDown={(e): void => {
 						handleMouseDown(e);
 						handleMouseDownForClick(e);
@@ -251,7 +251,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 					onMouseUp={handleMouseUp}
 					onClick={handleClick}
 				/>
-				<canvas ref={overlayCanvasRef} className={styles.overlay} />
+				<canvas ref={overlayCanvasRef} className="flamegraph-canvas__overlay" />
 			</div>
 		</div>
 	);

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.module.scss

@@ -1,230 +0,0 @@
-// Container — applied to the `.ant-modal` element via SignozModal's className
-// prop. Ant Modal portals into document.body, but the className still lives on
-// the modal root, so descendant overrides work via `:global` nesting.
-.container {
-	:global(.ant-modal-content),
-	:global(.ant-modal-header) {
-		background: var(--l1-background);
-	}
-
-	:global(.ant-modal-header) {
-		border-bottom: none;
-
-		:global(.ant-modal-title) {
-			color: var(--l1-foreground);
-		}
-	}
-
-	:global(.ant-modal-body) {
-		padding: 14px 16px !important;
-		padding-bottom: 0 !important;
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	:global(.ant-modal-footer) {
-		margin-top: 0;
-		background: var(--l2-background);
-		border-top: 1px solid var(--l2-border);
-		padding: 16px !important;
-
-		.saveButton {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 4px;
-			color: var(--l1-foreground);
-			font-size: 12px;
-			font-weight: 500;
-			line-height: 24px;
-			width: 135px;
-
-			:global(.ant-btn-icon) {
-				display: flex;
-			}
-
-			&:disabled {
-				color: var(--l2-foreground);
-
-				:global(.ant-btn-icon svg) {
-					stroke: var(--l2-foreground);
-				}
-			}
-		}
-
-		.discardButton {
-			background: var(--l3-background);
-		}
-
-		:global(.ant-btn) {
-			border-radius: 2px;
-			padding: 4px 8px;
-			margin: 0 !important;
-			border: none;
-			box-shadow: none;
-		}
-	}
-}
-
-// Inner content wrapper (sibling of modal chrome)
-.root {
-	// Funnel-detail view overrides — only when the inner wrapper has
-	// `.isDetails` applied alongside `.root`.
-	&.isDetails {
-		:global(.traces-funnel-details) {
-			height: unset;
-
-			:global(.traces-funnel-details__steps-config) {
-				width: unset;
-				border: none;
-			}
-
-			:global(.funnel-step-wrapper) {
-				gap: 15px;
-			}
-
-			:global(.steps-content) {
-				max-height: 500px;
-			}
-		}
-	}
-
-	:global(.funnel-item) {
-		padding: 8px 8px 12px 16px;
-
-		&,
-		&:first-child {
-			border-radius: 6px;
-		}
-
-		:global(.funnel-item__header) {
-			line-height: 20px;
-		}
-
-		:global(.funnel-item__details) {
-			line-height: 18px;
-		}
-	}
-}
-
-.loadingSpinner {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 400px;
-}
-
-.search {
-	display: flex;
-	gap: 12px;
-	margin-bottom: 14px;
-	align-items: center;
-}
-
-.searchInput {
-	flex: 1;
-	padding: 6px 8px;
-	background: var(--l3-background);
-
-	:global(.ant-input-prefix) {
-		height: 18px;
-		margin-inline-end: 6px;
-
-		svg {
-			opacity: 0.4;
-		}
-	}
-
-	&,
-	input {
-		font-size: 14px;
-		line-height: 18px;
-		letter-spacing: -0.07px;
-		font-weight: 400;
-		background: var(--l3-background);
-	}
-
-	input::placeholder {
-		color: var(--l2-foreground);
-		opacity: 0.6;
-	}
-}
-
-.createButton {
-	width: 153px;
-	padding: 4px 8px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-	flex-shrink: 0;
-	border-radius: 2px;
-	background: var(--l3-background);
-	border: none;
-	box-shadow: none;
-	color: var(--l2-foreground);
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.list {
-	max-height: 400px;
-	overflow-y: scroll;
-
-	:global(.funnels-empty__content) {
-		padding: 0;
-	}
-
-	:global(.funnels-list) {
-		gap: 8px;
-
-		:global(.funnel-item) {
-			padding: 8px 16px 12px;
-
-			:global(.funnel-item__details) {
-				margin-top: 8px;
-			}
-		}
-	}
-}
-
-.spinner {
-	height: 400px;
-}
-
-.backButton {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	color: var(--l2-foreground);
-	font-size: 14px;
-	line-height: 20px;
-	margin-bottom: 14px;
-}
-
-.detailsView {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-
-	:global(.funnel-configuration__steps) {
-		padding: 0;
-
-		:global(.funnel-step__content .filters__service-and-span .ant-select) {
-			width: 170px;
-		}
-
-		:global(.funnel-step__footer .error) {
-			width: 25%;
-		}
-
-		:global(.inter-step-config) {
-			width: calc(100% - 104px);
-		}
-	}
-
-	:global(.funnel-item__actions-popover) {
-		display: none;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -0,0 +1,236 @@
+// Modal base styles
+.add-span-to-funnel-modal {
+	&__loading-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 400px;
+	}
+	&-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--l1-background);
+			}
+
+			&-header {
+				border-bottom: none;
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			&-body {
+				padding: 14px 16px !important;
+				padding-bottom: 0 !important;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&-footer {
+				margin-top: 0;
+				background: var(--l2-background);
+				border-top: 1px solid var(--l2-border);
+				padding: 16px !important;
+				.add-span-to-funnel-modal {
+					&__save-button {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 4px;
+						color: var(--l1-foreground);
+						font-size: 12px;
+						font-weight: 500;
+						line-height: 24px;
+						width: 135px;
+
+						.ant-btn-icon {
+							display: flex;
+						}
+						&:disabled {
+							color: var(--l2-foreground);
+							.ant-btn-icon {
+								svg {
+									stroke: var(--l2-foreground);
+								}
+							}
+						}
+					}
+					&__discard-button {
+						background: var(--l3-background);
+					}
+				}
+				.ant-btn {
+					border-radius: 2px;
+					padding: 4px 8px;
+					margin: 0 !important;
+					border: none;
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}
+
+// Main modal styles
+.add-span-to-funnel-modal {
+	// Common button styles
+	%button-base {
+		display: flex;
+		align-items: center;
+	}
+
+	// Details view styles
+	&--details {
+		.traces-funnel-details {
+			height: unset;
+
+			&__steps-config {
+				width: unset;
+				border: none;
+			}
+
+			.funnel-step-wrapper {
+				gap: 15px;
+			}
+
+			.steps-content {
+				max-height: 500px;
+			}
+		}
+	}
+
+	// Search section
+	&__search {
+		display: flex;
+		gap: 12px;
+		margin-bottom: 14px;
+		align-items: center;
+
+		&-input {
+			flex: 1;
+			padding: 6px 8px;
+			background: var(--l3-background);
+
+			.ant-input-prefix {
+				height: 18px;
+				margin-inline-end: 6px;
+				svg {
+					opacity: 0.4;
+				}
+			}
+
+			&,
+			input {
+				font-size: 14px;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+				font-weight: 400;
+				background: var(--l3-background);
+			}
+
+			input::placeholder {
+				color: var(--l2-foreground);
+				opacity: 0.6;
+			}
+		}
+	}
+
+	// Create button
+	&__create-button {
+		@extend %button-base;
+		width: 153px;
+		padding: 4px 8px;
+		justify-content: center;
+		gap: 4px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		background: var(--l3-background);
+		border: none;
+		box-shadow: none;
+		color: var(--l2-foreground);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 24px;
+	}
+	.funnel-item {
+		padding: 8px 8px 12px 16px;
+		&,
+		&:first-child {
+			border-radius: 6px;
+		}
+
+		&__header {
+			line-height: 20px;
+		}
+		&__details {
+			line-height: 18px;
+		}
+	}
+
+	// List section
+	&__list {
+		max-height: 400px;
+		overflow-y: scroll;
+		.funnels-empty {
+			&__content {
+				padding: 0;
+			}
+		}
+
+		.funnels-list {
+			gap: 8px;
+
+			.funnel-item {
+				padding: 8px 16px 12px;
+
+				&__details {
+					margin-top: 8px;
+				}
+			}
+		}
+	}
+
+	&__spinner {
+		height: 400px;
+	}
+
+	// Back button
+	&__back-button {
+		@extend %button-base;
+		gap: 6px;
+		color: var(--l2-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		margin-bottom: 14px;
+	}
+
+	// Details section
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.funnel-configuration__steps {
+			padding: 0;
+
+			.funnel-step {
+				&__content .filters__service-and-span .ant-select {
+					width: 170px;
+				}
+
+				&__footer .error {
+					width: 25%;
+				}
+			}
+
+			.inter-step-config {
+				width: calc(100% - 104px);
+			}
+		}
+		.funnel-item__actions-popover {
+			display: none;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -22,7 +22,7 @@ import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { FunnelData } from 'types/api/traceFunnels';
 
-import styles from './AddSpanToFunnelModal.module.scss';
+import './AddSpanToFunnelModal.styles.scss';
 
 enum ModalView {
 	LIST = 'list',
@@ -62,7 +62,7 @@ function FunnelDetailsView({
 	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
 
 	return (
-		<div className={styles.detailsView}>
+		<div className="add-span-to-funnel-modal__details">
 			<FunnelListItem
 				funnel={funnel}
 				shouldRedirectToTracesListOnDeleteSuccess={false}
@@ -161,11 +161,11 @@ function AddSpanToFunnelModal({
 	};
 
 	const renderListView = (): JSX.Element => (
-		<div className={styles.root}>
+		<div className="add-span-to-funnel-modal">
 			{!!filteredData?.length && (
-				<div className={styles.search}>
+				<div className="add-span-to-funnel-modal__search">
 					<Input
-						className={styles.searchInput}
+						className="add-span-to-funnel-modal__search-input"
 						placeholder="Search by name, description, or tags..."
 						prefix={<Search size={12} />}
 						value={searchQuery}
@@ -173,7 +173,7 @@ function AddSpanToFunnelModal({
 					/>
 				</div>
 			)}
-			<div className={styles.list}>
+			<div className="add-span-to-funnel-modal__list">
 				<OverlayScrollbar>
 					<TracesFunnelsContentRenderer
 						isError={isError}
@@ -201,11 +201,11 @@ function AddSpanToFunnelModal({
 	);
 
 	const renderDetailsView = ({ span }: { span: SpanV3 }): JSX.Element => (
-		<div className={cx(styles.root, styles.isDetails)}>
+		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
 			<Button
 				variant="ghost"
 				color="secondary"
-				className={styles.backButton}
+				className="add-span-to-funnel-modal__back-button"
 				onClick={handleBack}
 				prefix={<ArrowLeft size={14} />}
 			>
@@ -214,7 +214,7 @@ function AddSpanToFunnelModal({
 			<div className="traces-funnel-details">
 				<div className="traces-funnel-details__steps-config">
 					<Spin
-						className={styles.loadingSpinner}
+						className="add-span-to-funnel-modal__loading-spinner"
 						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
 						indicator={<LoaderCircle size={14} className="animate-spin" />}
 					>
@@ -245,7 +245,10 @@ function AddSpanToFunnelModal({
 			onCancel={onClose}
 			width={570}
 			title="Add span to funnel"
-			className={styles.container}
+			className={cx('add-span-to-funnel-modal-container', {
+				'add-span-to-funnel-modal-container--details':
+					activeView === ModalView.DETAILS,
+			})}
 			footer={
 				activeView === ModalView.DETAILS
 					? [
@@ -254,7 +257,7 @@ function AddSpanToFunnelModal({
 								color="secondary"
 								key="discard"
 								onClick={handleDiscard}
-								className={styles.discardButton}
+								className="add-span-to-funnel-modal__discard-button"
 								disabled={!isUnsavedChanges}
 							>
 								Discard
@@ -263,7 +266,7 @@ function AddSpanToFunnelModal({
 								key="save"
 								variant="solid"
 								color="primary"
-								className={styles.saveButton}
+								className="add-span-to-funnel-modal__save-button"
 								onClick={handleSaveFunnel}
 								disabled={!isUnsavedChanges}
 								prefix={<Check size={14} />}
@@ -276,7 +279,7 @@ function AddSpanToFunnelModal({
 								key="create"
 								variant="outlined"
 								color="secondary"
-								className={styles.createButton}
+								className="add-span-to-funnel-modal__create-button"
 								onClick={handleCreateNewClick}
 								prefix={<Plus size={14} />}
 							>

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -1,4 +1,4 @@
-.root {
+.span-line-action-buttons {
 	display: flex;
 	position: absolute;
 	transform: translate(-50%, -50%);
@@ -8,20 +8,20 @@
 	border-radius: 2px;
 	border: 1px solid var(--l1-border);
 	background: var(--l2-background);
-}
 
-.copyBtn {
-	border: none;
-	box-shadow: none;
-	padding: 9px;
-	justify-content: center;
-	align-items: center;
-	display: flex;
-	border-color: var(--l1-border) !important;
+	.copy-span-btn {
+		border: none;
+		box-shadow: none;
+		padding: 9px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+		border-color: var(--l1-border) !important;
+	}
 }
 
 // Tooltip rendered in a portal; bump above FloatingPanel (z-index 999) so it
 // stays visible when the SpanDetailsPanel is docked as a floating panel.
-.tooltip {
+.span-line-action-tooltip {
 	--tooltip-z-index: 1000;
 }

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -70,6 +70,24 @@ describe('SpanLineActionButtons', () => {
 		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
 	});
 
+	it('applies correct styling classes', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the main container has the correct class
+		const container = screen
+			.getByRole('button')
+			.closest('.span-line-action-buttons');
+		expect(container).toHaveClass('span-line-action-buttons');
+
+		// Check if the button has the correct class
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toHaveClass('copy-span-btn');
+	});
+
 	it('copies span link to clipboard when copy button is clicked', () => {
 		const mockSetCopy = jest.fn();
 		const mockUrlQuery = {

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -9,7 +9,7 @@ import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
 import { Link } from '@signozhq/icons';
 import { Span } from 'types/api/trace/getTraceV2';
 
-import styles from './SpanLineActionButtons.module.scss';
+import './SpanLineActionButtons.styles.scss';
 
 export interface SpanLineActionButtonsProps {
 	span: Span;
@@ -20,7 +20,7 @@ export default function SpanLineActionButtons({
 	const { onSpanCopy } = useCopySpanLink(span);
 
 	return (
-		<div className={styles.root}>
+		<div className="span-line-action-buttons">
 			<TooltipProvider>
 				<Tooltip>
 					<TooltipTrigger asChild>
@@ -29,12 +29,14 @@ export default function SpanLineActionButtons({
 							size="icon"
 							color="secondary"
 							onClick={onSpanCopy}
-							className={styles.copyBtn}
+							className="copy-span-btn"
 						>
 							<Link size={14} />
 						</Button>
 					</TooltipTrigger>
-					<TooltipContent className={styles.tooltip}>Copy Span Link</TooltipContent>
+					<TooltipContent className="span-line-action-tooltip">
+						Copy Span Link
+					</TooltipContent>
 				</Tooltip>
 			</TooltipProvider>
 		</div>

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.module.scss

@@ -1,11 +0,0 @@
-.root {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.loadingSkeleton {
-	justify-content: center;
-	align-items: center;
-	padding: 20px;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,11 @@
+.trace-waterfall {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	.loading-skeleton {
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

@@ -13,7 +13,7 @@ import { getVisibleSpans } from './utils';
 
 import { IInterestedSpan } from './types';
 
-import styles from './TraceWaterfall.module.scss';
+import './TraceWaterfall.styles.scss';
 
 interface ITraceWaterfallProps {
 	traceId: string;
@@ -100,7 +100,7 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
 		switch (traceWaterfallState) {
 			case TraceWaterfallStates.LOADING:
 				return (
-					<div className={styles.loadingSkeleton}>
+					<div className="loading-skeleton">
 						<Skeleton active paragraph={{ rows: 6 }} />
 					</div>
 				);
@@ -158,7 +158,7 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
 		uncollapsedNodes,
 	]);
 
-	return <div className={styles.root}>{getContent}</div>;
+	return <div className="trace-waterfall">{getContent}</div>;
 }
 
 export default TraceWaterfall;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.module.scss

@@ -1,24 +0,0 @@
-.root {
-	display: flex;
-	padding: 12px;
-	margin: 20px;
-	gap: 12px;
-	align-items: flex-start;
-	border-radius: 4px;
-	background: var(--destructive);
-}
-
-.text,
-.value {
-	color: var(--destructive-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.text {
-	flex-shrink: 0;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -0,0 +1,30 @@
+.error-waterfall {
+	display: flex;
+	padding: 12px;
+	margin: 20px;
+	gap: 12px;
+	align-items: flex-start;
+	border-radius: 4px;
+	background: var(--destructive);
+
+	.text {
+		color: var(--destructive-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		flex-shrink: 0;
+	}
+
+	.value {
+		color: var(--destructive-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
 
-import styles from './Error.module.scss';
+import './Error.styles.scss';
 
 interface IErrorProps {
 	error: AxiosError;
@@ -12,16 +12,10 @@ function Error(props: IErrorProps): JSX.Element {
 	const { error } = props;
 
 	return (
-		<div className={styles.root}>
-			<Typography.Text className={styles.text}>
-				Something went wrong!
-			</Typography.Text>
+		<div className="error-waterfall">
+			<Typography.Text className="text">Something went wrong!</Typography.Text>
 			<Tooltip title={error?.message}>
-				<Typography.Text
-					className={styles.value}
-					title={error?.message}
-					truncate={1}
-				>
+				<Typography.Text className="value" title={error?.message} truncate={1}>
 					{error?.message}
 				</Typography.Text>
 			</Tooltip>

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.module.scss

@@ -1,136 +0,0 @@
-.root {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-
-	// QuerySearch child sets `query-builder-search-v2` globally; size it to the
-	// search container by reaching into the descendant.
-	:global(.query-builder-search-v2) {
-		width: 100%;
-	}
-
-	// ToggleGroup children use generated class names; nest the global selectors
-	// under the local row so they only apply inside this filter row.
-	:global([class*='toggle-group']) {
-		flex-shrink: 0;
-
-		:global([class*='toggle-group-item']) {
-			flex: 0 0 auto;
-		}
-	}
-}
-
-.isExpanded {
-	flex: 1;
-}
-
-.searchContainer {
-	flex: 1;
-	min-width: 0;
-}
-
-.pill {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 4px 10px;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	cursor: pointer;
-	max-width: 220px;
-	min-width: 120px;
-	height: 32px;
-	background: var(--l1-background);
-
-	&:hover {
-		border-color: var(--l3-border);
-	}
-}
-
-.pillText {
-	font-size: 12px;
-	color: var(--l2-foreground);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	flex: 1;
-}
-
-.pillIndicator {
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--primary-background);
-	flex-shrink: 0;
-}
-
-.pillPopover {
-	max-width: 400px;
-}
-
-.pillPopoverHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 8px;
-}
-
-.pillPopoverExpression {
-	font-family: 'Geist Mono', 'Fira Code', monospace;
-	font-size: 12px;
-	color: var(--l1-foreground);
-	word-break: break-all;
-	padding: 6px 8px;
-	background: var(--l2-background);
-	border-radius: 4px;
-}
-
-.collapseBtn {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-}
-
-.highlightErrorsToggle {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
-	white-space: nowrap;
-}
-
-.preNextToggle {
-	display: flex;
-	flex-shrink: 0;
-	gap: 12px;
-}
-
-.preNextCount {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.filterStatus {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.hasError {
-	color: var(--destructive);
-	cursor: help;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -0,0 +1,145 @@
+.trace-v3-filter-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+
+	&.expanded {
+		flex: 1;
+	}
+
+	.filter-search-container {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.query-builder-search-v2 {
+		width: 100%;
+	}
+
+	// --- Collapsed pill ---
+	.filter-pill {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 10px;
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		cursor: pointer;
+		max-width: 220px;
+		min-width: 120px;
+		height: 32px;
+		background: var(--l1-background);
+
+		&:hover {
+			border-color: var(--l3-border);
+		}
+
+		&__text {
+			font-size: 12px;
+			color: var(--l2-foreground);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			flex: 1;
+		}
+
+		&__indicator {
+			width: 6px;
+			height: 6px;
+			border-radius: 50%;
+			background: var(--primary-background);
+			flex-shrink: 0;
+		}
+	}
+
+	// --- Collapsed pill popover ---
+	.filter-pill-popover {
+		max-width: 400px;
+
+		&__header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 8px;
+		}
+
+		&__expression {
+			font-family: 'Geist Mono', 'Fira Code', monospace;
+			font-size: 12px;
+			color: var(--l1-foreground);
+			word-break: break-all;
+			padding: 6px 8px;
+			background: var(--l2-background);
+			border-radius: 4px;
+		}
+	}
+
+	// --- ToggleGroup override: size to content, don't stretch items ---
+	[class*='toggle-group'] {
+		flex-shrink: 0;
+
+		[class*='toggle-group-item'] {
+			flex: 0 0 auto;
+		}
+	}
+
+	// --- Collapse button ---
+	.filter-collapse-btn {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: none;
+	}
+
+	// --- Highlight errors toggle ---
+	.highlight-errors-toggle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	// --- Prev/next navigation ---
+	.pre-next-toggle {
+		display: flex;
+		flex-shrink: 0;
+		gap: 12px;
+
+		&__count {
+			display: flex;
+			align-items: center;
+			margin: auto;
+			color: var(--l2-foreground);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+		}
+
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: none;
+		}
+	}
+
+	.filter-status {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 18px;
+
+		&--error {
+			color: var(--destructive);
+			cursor: help;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -22,7 +22,6 @@ import {
 } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
-import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -43,7 +42,7 @@ import {
 	useSpanCategoryFilter,
 } from './hooks/useSpanCategoryFilter';
 
-import styles from './Filters.module.scss';
+import './Filters.styles.scss';
 
 function prepareQuery(filters: TagFilter, traceID: string): Query {
 	return {
@@ -256,7 +255,7 @@ function Filters({
 	);
 
 	const highlightErrorsToggle = (
-		<div className={styles.highlightErrorsToggle}>
+		<div className="highlight-errors-toggle">
 			<Typography.Text>Highlight errors</Typography.Text>
 			<Switch
 				color="cherry"
@@ -272,7 +271,7 @@ function Filters({
 			{error && (
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<span className={cx(styles.filterStatus, styles.hasError)}>
+						<span className="filter-status filter-status--error">
 							<Info />
 							API error
 						</span>
@@ -283,7 +282,7 @@ function Filters({
 				</Tooltip>
 			)}
 			{!error && noData && (
-				<Typography.Text className={styles.filterStatus}>
+				<Typography.Text className="filter-status">
 					No results found
 				</Typography.Text>
 			)}
@@ -294,22 +293,22 @@ function Filters({
 	if (!isExpanded) {
 		const pill = (
 			/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-			<div className={styles.pill} onClick={onExpand}>
+			<div className="filter-pill" onClick={onExpand}>
 				<Search size={12} />
-				<span className={styles.pillText}>{expression || 'Search...'}</span>
-				{expression && <span className={styles.pillIndicator} />}
+				<span className="filter-pill__text">{expression || 'Search...'}</span>
+				{expression && <span className="filter-pill__indicator" />}
 			</div>
 		);
 
 		return (
 			<TooltipProvider>
-				<div className={styles.root}>
+				<div className="trace-v3-filter-row collapsed">
 					{expression ? (
 						<Tooltip>
 							<TooltipTrigger asChild>{pill}</TooltipTrigger>
 							<TooltipContent side="bottom" align="start">
-								<div className={styles.pillPopover}>
-									<div className={styles.pillPopoverHeader}>
+								<div className="filter-pill-popover">
+									<div className="filter-pill-popover__header">
 										<Typography.Text>Search query</Typography.Text>
 										<Button
 											variant="ghost"
@@ -326,7 +325,7 @@ function Filters({
 											<Copy size={12} />
 										</Button>
 									</div>
-									<div className={styles.pillPopoverExpression}>{expression}</div>
+									<div className="filter-pill-popover__expression">{expression}</div>
 								</div>
 							</TooltipContent>
 						</Tooltip>
@@ -343,7 +342,7 @@ function Filters({
 	// --- EXPANDED VIEW ---
 	return (
 		<TooltipProvider>
-			<div className={cx(styles.root, styles.isExpanded)}>
+			<div className="trace-v3-filter-row expanded">
 				<ToggleGroup
 					type="single"
 					value={selectedCategory}
@@ -362,7 +361,7 @@ function Filters({
 				</ToggleGroup>
 				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
 				<div
-					className={styles.searchContainer}
+					className="filter-search-container"
 					ref={containerRef}
 					onBlur={(e): void => {
 						if (!containerRef.current?.contains(e.relatedTarget as Node)) {
@@ -383,8 +382,8 @@ function Filters({
 					/>
 				</div>
 				{filteredSpanIds.length > 0 && (
-					<div className={styles.preNextToggle}>
-						<Typography.Text className={styles.preNextCount}>
+					<div className="pre-next-toggle">
+						<Typography.Text className="pre-next-toggle__count">
 							{currentSearchedIndex + 1} / {filteredSpanIds.length}
 						</Typography.Text>
 						<Button
@@ -417,7 +416,7 @@ function Filters({
 					variant="ghost"
 					size="icon"
 					color="secondary"
-					className={styles.collapseBtn}
+					className="filter-collapse-btn"
 					onClick={onCollapse}
 				>
 					<X size={14} />

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.module.scss

@@ -1,634 +0,0 @@
-// Inside a .module.scss, postcss-modules auto-scopes `@keyframes` identifiers
-// and rewrites `animation`/`animation-name` references to match.
-@keyframes waterfallLoading {
-	0% {
-		opacity: 0.3;
-		transform: scaleX(0.3);
-		transform-origin: left;
-	}
-	50% {
-		opacity: 1;
-		transform: scaleX(1);
-		transform-origin: left;
-	}
-	100% {
-		opacity: 0.3;
-		transform: scaleX(0.3);
-		transform-origin: right;
-	}
-}
-
-.loadingBar {
-	height: 2px;
-	background: var(--primary);
-	animation: waterfallLoading 1.5s ease-in-out infinite;
-	flex-shrink: 0;
-}
-
-// Event-dot tooltip. Visually matches SpanHoverCard's popover; styles are
-// inlined rather than `compose`d from another module because postcss-modules
-// loads cross-module composes through the plain CSS parser, which chokes on
-// SCSS `//` comments in the target file.
-.popover {
-	--tooltip-z-index: 1000;
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
-	color: var(--l1-foreground);
-}
-
-.root {
-	overflow-y: hidden;
-	overflow-x: hidden;
-	max-width: 100%;
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.missingSpans {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 44px;
-	margin: 16px;
-	padding: 12px;
-	border-radius: 4px;
-	background: rgba(69, 104, 220, 0.1);
-}
-
-.leftInfo {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.text {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.rightInfo {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	&:hover {
-		background-color: unset;
-		color: var(--bg-robin-200);
-	}
-}
-
-.splitPanel {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding: 0px 20px 0px 20px;
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-	}
-}
-
-.splitHeader {
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	display: flex;
-	height: 25px;
-	background-color: var(--l1-background);
-}
-
-.sidebarHeader {
-	flex-shrink: 0;
-}
-
-.resizeHandleHeader {
-	width: 4px;
-	flex-shrink: 0;
-}
-
-.statusHeader {
-	width: 50px;
-	flex-shrink: 0;
-}
-
-.timelineHeader {
-	flex: 1;
-	overflow: hidden;
-	padding: 0 15px;
-}
-
-.splitBody {
-	display: flex;
-	position: relative;
-}
-
-// Invisible IntersectionObserver targets pinned at the top and bottom of the
-// virtualized content. See `useBoundaryPagination`.
-.loadMoreSentinel {
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 1px;
-	pointer-events: none;
-}
-
-.loadMoreSentinelTop {
-	top: 0;
-}
-
-.loadMoreSentinelBottom {
-	bottom: 0;
-}
-
-.sidebar {
-	overflow-x: auto;
-	overflow-y: hidden;
-	flex-shrink: 0;
-	border-right: 1px solid var(--l1-border);
-
-	// ResizableBox child renders with a global `.resizable-box__content` class
-	// — give it independent horizontal scrolling.
-	:global(.resizable-box__content) {
-		overflow-x: auto;
-		overflow-y: hidden;
-
-		&::-webkit-scrollbar {
-			height: 0;
-		}
-
-		scrollbar-width: none;
-	}
-
-	&::-webkit-scrollbar {
-		height: 0.3rem;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--l3-background);
-		border-radius: 4px;
-	}
-}
-
-.treeTable {
-	position: relative;
-	border-collapse: collapse;
-}
-
-.treeRow {
-	display: flex;
-	align-items: center;
-}
-
-.treeCell {
-	display: flex;
-	width: 100%;
-	height: 28px;
-	align-items: center;
-	overflow: visible;
-	padding: 0;
-}
-
-.treeRow:hover,
-.treeRow.hoveredSpan {
-	border-radius: 4px;
-	background: color-mix(
-		in srgb,
-		var(--l3-background) 20%,
-		transparent
-	) !important;
-
-	.spanOverview {
-		background: unset !important;
-	}
-}
-
-.sidebarResizeHandle {
-	width: 4px;
-	flex-shrink: 0;
-	cursor: col-resize;
-	user-select: none;
-	touch-action: none;
-	background: transparent;
-	transition: background 0.15s ease;
-	z-index: 1;
-
-	&:hover,
-	&:active {
-		background: rgba(35, 196, 248, 0.2);
-	}
-}
-
-.statusCol {
-	width: 50px;
-	flex-shrink: 0;
-	position: relative;
-}
-
-.statusCell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-
-	--badge-border-radius: 2px;
-	--badge-padding: 3px 6px;
-	--badge-line-height: 12px;
-	--badge-border-width: 0px;
-
-	&.hoveredSpan {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 20%,
-			transparent
-		) !important;
-	}
-
-	&.isInterested,
-	&.isSelectedNonMatching {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 40%,
-			transparent
-		) !important;
-	}
-
-	&.isDimmed {
-		opacity: 0.15;
-	}
-}
-
-.timeline {
-	flex: 1;
-	position: relative;
-	overflow: hidden;
-}
-
-.crosshair {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 1px;
-	background: var(--l3-background);
-	pointer-events: none;
-	z-index: 1;
-}
-
-.timelineRow {
-	display: flex;
-	align-items: center;
-	// Match timelineHeader's 15px padding so bars align with ticks
-	padding: 0 15px;
-
-	&:hover,
-	&.hoveredSpan {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 20%,
-			transparent
-		) !important;
-	}
-
-	&:has(.isInterested),
-	&:has(.isSelectedNonMatching) {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 40%,
-			transparent
-		) !important;
-	}
-}
-
-.spanOverview {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	height: 100%;
-	width: 100%;
-	cursor: pointer;
-	position: relative;
-	white-space: nowrap;
-
-	&:hover .rowActions {
-		opacity: 1;
-		pointer-events: auto;
-	}
-
-	&.isInterested,
-	&.isSelectedNonMatching {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 40%,
-			transparent
-		) !important;
-	}
-}
-
-.treeIndent {
-	display: inline-block;
-	flex-shrink: 0;
-}
-
-.treeLine {
-	position: absolute;
-	background-color: var(--l2-border);
-	pointer-events: none;
-}
-
-.treeConnector {
-	position: absolute;
-	width: 14px;
-	height: 50%;
-	border-left: 1px solid var(--l2-border);
-	border-bottom: 1px solid var(--l2-border);
-	border-bottom-left-radius: 6px;
-	pointer-events: none;
-}
-
-// Reserved horizontal space for the chevron — present on every row, filled
-// only when the span has children. Keeps sibling icons aligned.
-.treeArrowSlot {
-	width: 18px;
-	flex-shrink: 0;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.treeArrow {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 18px;
-	height: 18px;
-	flex-shrink: 0;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	border-radius: 4px;
-
-	&:hover {
-		background: var(--l3-background);
-	}
-}
-
-// Reserved horizontal space for the subtree-count badge — same reason.
-// Right-aligns the badge inside so single-digit counts don't push the icon
-// left of where multi-digit counts would put it.
-.subtreeCountSlot {
-	min-width: 34px;
-	flex-shrink: 0;
-	display: inline-flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding-right: 4px;
-}
-
-.subtreeCount {
-	display: inline-flex;
-	align-items: center;
-	flex-shrink: 0;
-
-	:global(.badge) {
-		font-size: 10px;
-		line-height: 14px;
-		padding: 0 4px;
-		height: 14px;
-	}
-}
-
-.treeIcon {
-	display: inline-block;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	flex-shrink: 0;
-	margin: 0 6px;
-
-	&.hasError {
-		box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
-	}
-}
-
-.treeLabel {
-	color: var(--l1-foreground);
-	font-family: 'Inter';
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 28px;
-	letter-spacing: 0.01em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	flex: 1;
-	min-width: 0;
-}
-
-.treeServiceName {
-	margin-left: 18px;
-	color: var(--l3-foreground);
-	font-weight: 400;
-}
-
-.rowActions {
-	position: sticky;
-	right: 0;
-	display: flex;
-	align-items: center;
-	gap: 2px;
-	margin-left: auto;
-	padding-right: 4px;
-	padding-left: 8px;
-	flex-shrink: 0;
-	height: 100%;
-	background: linear-gradient(to left, var(--l1-background) 60%, transparent);
-	z-index: 2;
-	opacity: 0;
-	pointer-events: none;
-}
-
-.actionBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 22px;
-	height: 22px;
-	border-radius: 2px;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	background: transparent;
-	border: none;
-	padding: 0;
-
-	&:hover {
-		background: var(--l3-background);
-	}
-}
-
-// Also reveal the actions when the parent tree row is hovered.
-.treeRow:hover .rowActions,
-.treeRow.hoveredSpan .rowActions {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-.spanDuration {
-	display: flex;
-	align-items: center;
-	height: 28px;
-	position: relative;
-	width: 100%;
-	padding: 0 15px;
-	cursor: pointer;
-}
-
-.spanBar {
-	position: absolute;
-	height: 18px;
-	top: 5px;
-	border-radius: 2px;
-	display: flex;
-	align-items: center;
-	padding: 0 8px;
-	overflow: hidden;
-	cursor: pointer;
-	white-space: nowrap;
-	color: rgba(0, 0, 0, 0.9);
-	background-color: var(--span-color);
-	border: 1px solid transparent;
-}
-
-.spanInfo {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	overflow: hidden;
-	z-index: 1;
-}
-
-.spanName {
-	font-weight: 500;
-	font-size: 11px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	flex-grow: 1;
-	min-width: 0;
-}
-
-.spanDurationText {
-	color: inherit;
-	opacity: 0.8;
-	font-size: 10px;
-	margin-left: 8px;
-	flex-shrink: 0;
-}
-
-.eventDot {
-	position: absolute;
-	top: 50%;
-	transform: translate(-50%, -50%) rotate(45deg);
-	width: 5px;
-	height: 5px;
-	background-color: var(--event-dot-bg, var(--bg-robin-500));
-	border: 1px solid var(--event-dot-border, var(--bg-robin-600));
-	cursor: pointer;
-	z-index: 1;
-
-	&.hasError {
-		background-color: var(--destructive);
-		border-color: var(--destructive);
-	}
-
-	&:hover {
-		transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-	}
-}
-
-// Hover state: solid l2-background fill + border (matches flamegraph)
-.timelineRow:hover .spanBar,
-.timelineRow.hoveredSpan .spanBar {
-	color: var(--span-color);
-	background-color: var(--l2-background);
-	background-image: none;
-	border: 1px solid var(--span-color);
-}
-
-// Selected state: solid l3-background fill + dashed border (matches flamegraph)
-.isInterested .spanBar,
-.isSelectedNonMatching .spanBar {
-	color: var(--span-color);
-	background-color: var(--l2-background);
-	background-image: none;
-	border: 1px dashed var(--span-color);
-}
-
-.isDimmed {
-	opacity: 0.15;
-}
-
-.isHighlighted {
-	opacity: 1;
-}
-
-.isSelectedNonMatching {
-	.treeLabel {
-		opacity: 0.5;
-	}
-}
-
-// `.spanBar` text color is the one place where semantic tokens don't fit
-// cleanly: in dark mode the bar's bright `--span-color` background needs dark
-// text; in light mode `generateColor` produces darker bar fills, so the text
-// must flip to white.
-:global(.lightMode) {
-	.root {
-		.spanDuration .spanBar {
-			color: rgba(255, 255, 255, 0.9);
-		}
-
-		.timelineRow:hover .spanBar,
-		.timelineRow.hoveredSpan .spanBar,
-		.isInterested .spanBar,
-		.isSelectedNonMatching .spanBar {
-			color: var(--span-color);
-		}
-	}
-}
-
-// Tooltips for the row's hover-revealed action buttons (Copy / Add to Funnel).
-// Bumped above FloatingPanel (z-index 999) so they stay visible when the
-// SpanDetailsPanel is docked as a floating panel.
-.actionTooltip {
-	--tooltip-z-index: 1000;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss

@@ -0,0 +1,636 @@
+.waterfall-loading-bar {
+	height: 2px;
+	background: var(--primary);
+	animation: waterfall-loading 1.5s ease-in-out infinite;
+	flex-shrink: 0;
+}
+
+@keyframes waterfall-loading {
+	0% {
+		opacity: 0.3;
+		transform: scaleX(0.3);
+		transform-origin: left;
+	}
+	50% {
+		opacity: 1;
+		transform: scaleX(1);
+		transform-origin: left;
+	}
+	100% {
+		opacity: 0.3;
+		transform: scaleX(0.3);
+		transform-origin: right;
+	}
+}
+
+.success-content {
+	overflow-y: hidden;
+	overflow-x: hidden;
+	max-width: 100%;
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	.missing-spans {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 44px;
+		margin: 16px;
+		padding: 12px;
+		border-radius: 4px;
+		background: rgba(69, 104, 220, 0.1);
+
+		.left-info {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+
+			.text {
+				color: var(--bg-robin-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.right-info {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.right-info:hover {
+			background-color: unset;
+			color: var(--bg-robin-200);
+		}
+	}
+
+	.waterfall-split-panel {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 0px 20px 0px 20px;
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
+
+	.waterfall-split-header {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		display: flex;
+		height: 25px;
+		background-color: var(--l1-background);
+
+		.sidebar-header {
+			flex-shrink: 0;
+		}
+
+		.resize-handle-header {
+			width: 4px;
+			flex-shrink: 0;
+		}
+
+		.status-header {
+			width: 50px;
+			flex-shrink: 0;
+		}
+
+		.timeline-header {
+			flex: 1;
+			overflow: hidden;
+			padding: 0 15px;
+		}
+	}
+
+	.waterfall-split-body {
+		display: flex;
+		position: relative;
+	}
+
+	// Invisible IntersectionObserver targets pinned at the top and bottom of
+	// the virtualized content. See `useBoundaryPagination`.
+	.waterfall-load-more-sentinel {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 1px;
+		pointer-events: none;
+
+		&--top {
+			top: 0;
+		}
+
+		&--bottom {
+			bottom: 0;
+		}
+	}
+
+	.waterfall-sidebar {
+		overflow-x: auto;
+		overflow-y: hidden;
+		flex-shrink: 0;
+		border-right: 1px solid var(--l1-border);
+
+		.resizable-box__content {
+			overflow-x: auto;
+			overflow-y: hidden;
+
+			&::-webkit-scrollbar {
+				height: 0;
+			}
+
+			scrollbar-width: none;
+		}
+
+		&::-webkit-scrollbar {
+			height: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-background);
+			border-radius: 4px;
+		}
+	}
+
+	.span-tree-table {
+		position: relative;
+		border-collapse: collapse;
+
+		.span-tree-row {
+			display: flex;
+			align-items: center;
+		}
+
+		.span-tree-cell {
+			display: flex;
+			width: 100%;
+			height: 28px;
+			align-items: center;
+			overflow: visible;
+			padding: 0;
+		}
+
+		.span-tree-row:hover,
+		.span-tree-row.hovered-span {
+			border-radius: 4px;
+			background: color-mix(
+				in srgb,
+				var(--l3-background) 20%,
+				transparent
+			) !important;
+
+			.span-overview {
+				background: unset !important;
+			}
+		}
+	}
+
+	.sidebar-resize-handle {
+		width: 4px;
+		flex-shrink: 0;
+		cursor: col-resize;
+		user-select: none;
+		touch-action: none;
+		background: transparent;
+		transition: background 0.15s ease;
+		z-index: 1;
+
+		&:hover,
+		&:active {
+			background: rgba(35, 196, 248, 0.2);
+		}
+	}
+
+	.waterfall-status-col {
+		width: 50px;
+		flex-shrink: 0;
+		position: relative;
+
+		.status-cell {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+
+			--badge-border-radius: 2px;
+			--badge-padding: 3px 6px;
+			--badge-line-height: 12px;
+			--badge-border-width: 0px;
+
+			&.hovered-span {
+				border-radius: 4px;
+				background: color-mix(
+					in srgb,
+					var(--l3-background) 20%,
+					transparent
+				) !important;
+			}
+
+			&.interested-span,
+			&.selected-non-matching-span {
+				border-radius: 4px;
+				background: color-mix(
+					in srgb,
+					var(--l3-background) 40%,
+					transparent
+				) !important;
+			}
+
+			&.dimmed-span {
+				opacity: 0.15;
+			}
+		}
+	}
+
+	.waterfall-timeline {
+		flex: 1;
+		position: relative;
+		overflow: hidden;
+
+		.waterfall-crosshair {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background: var(--l3-background);
+			pointer-events: none;
+			z-index: 1;
+		}
+
+		.timeline-row {
+			display: flex;
+			align-items: center;
+			// Match timeline-header's 15px padding so bars align with ticks
+			padding: 0 15px;
+		}
+
+		.timeline-row:hover,
+		.timeline-row.hovered-span {
+			border-radius: 4px;
+			background: color-mix(
+				in srgb,
+				var(--l3-background) 20%,
+				transparent
+			) !important;
+		}
+
+		.timeline-row:has(.interested-span),
+		.timeline-row:has(.selected-non-matching-span) {
+			border-radius: 4px;
+			background: color-mix(
+				in srgb,
+				var(--l3-background) 40%,
+				transparent
+			) !important;
+		}
+	}
+
+	// Shared span component styles (used in both panels)
+	.span-overview {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: 100%;
+		width: 100%;
+		cursor: pointer;
+		position: relative;
+		white-space: nowrap;
+
+		.tree-indent {
+			display: inline-block;
+			flex-shrink: 0;
+		}
+
+		.tree-line {
+			position: absolute;
+			background-color: var(--l2-border);
+			pointer-events: none;
+		}
+
+		.tree-connector {
+			position: absolute;
+			width: 14px;
+			height: 50%;
+			border-left: 1px solid var(--l2-border);
+			border-bottom: 1px solid var(--l2-border);
+			border-bottom-left-radius: 6px;
+			pointer-events: none;
+		}
+
+		// Reserved horizontal space for the chevron — present on every row,
+		// filled only when the span has children. Keeps sibling icons aligned.
+		.tree-arrow-slot {
+			width: 18px;
+			flex-shrink: 0;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.tree-arrow {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 18px;
+			height: 18px;
+			flex-shrink: 0;
+			cursor: pointer;
+			color: var(--l1-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l3-background);
+			}
+		}
+
+		// Reserved horizontal space for the subtree-count badge — same reason.
+		// Right-aligns the badge inside so single-digit counts don't push the
+		// icon left of where multi-digit counts would put it.
+		.subtree-count-slot {
+			min-width: 34px;
+			flex-shrink: 0;
+			display: inline-flex;
+			align-items: center;
+			justify-content: flex-end;
+			padding-right: 4px;
+		}
+
+		.subtree-count {
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+
+			.badge {
+				font-size: 10px;
+				line-height: 14px;
+				padding: 0 4px;
+				height: 14px;
+			}
+		}
+
+		.tree-icon {
+			display: inline-block;
+			width: 7px;
+			height: 7px;
+			border-radius: 50%;
+			flex-shrink: 0;
+			margin: 0 6px;
+
+			&.is-error {
+				box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
+			}
+		}
+
+		.tree-label {
+			color: var(--l1-foreground);
+			font-family: 'Inter';
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 28px;
+			letter-spacing: 0.01em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			flex: 1;
+			min-width: 0;
+
+			.tree-service-name {
+				margin-left: 18px;
+				color: var(--l3-foreground);
+				font-weight: 400;
+			}
+		}
+
+		.span-row-actions {
+			position: sticky;
+			right: 0;
+			display: flex;
+			align-items: center;
+			gap: 2px;
+			margin-left: auto;
+			padding-right: 4px;
+			padding-left: 8px;
+			flex-shrink: 0;
+			height: 100%;
+			background: linear-gradient(to left, var(--l1-background) 60%, transparent);
+			z-index: 2;
+			opacity: 0;
+			pointer-events: none;
+
+			.span-action-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 22px;
+				height: 22px;
+				border-radius: 2px;
+				cursor: pointer;
+				color: var(--l1-foreground);
+				background: transparent;
+				border: none;
+				padding: 0;
+
+				&:hover {
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		&:hover .span-row-actions {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	// Also show action buttons when hovering the tree row (parent of span-overview)
+	.span-tree-row:hover .span-row-actions,
+	.span-tree-row.hovered-span .span-row-actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.span-duration {
+		display: flex;
+		align-items: center;
+		height: 28px;
+		position: relative;
+		width: 100%;
+		padding: 0 15px;
+		cursor: pointer;
+
+		.span-bar {
+			position: absolute;
+			height: 18px;
+			top: 5px;
+			border-radius: 2px;
+			display: flex;
+			align-items: center;
+			padding: 0 8px;
+			overflow: hidden;
+			cursor: pointer;
+			white-space: nowrap;
+			color: rgba(0, 0, 0, 0.9);
+			background-color: var(--span-color);
+			border: 1px solid transparent;
+
+			.span-info {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				overflow: hidden;
+				z-index: 1;
+
+				.span-name {
+					font-weight: 500;
+					font-size: 11px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					flex-grow: 1;
+					min-width: 0;
+				}
+
+				.span-duration-text {
+					color: inherit;
+					opacity: 0.8;
+					font-size: 10px;
+					margin-left: 8px;
+					flex-shrink: 0;
+				}
+			}
+		}
+
+		.event-dot {
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%) rotate(45deg);
+			width: 5px;
+			height: 5px;
+			background-color: var(--event-dot-bg, var(--bg-robin-500));
+			border: 1px solid var(--event-dot-border, var(--bg-robin-600));
+			cursor: pointer;
+			z-index: 1;
+
+			&.error {
+				background-color: var(--destructive);
+				border-color: var(--destructive);
+			}
+
+			&:hover {
+				transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
+			}
+		}
+	}
+
+	// Hover state: solid l2-background fill + border (matches flamegraph)
+	.timeline-row:hover .span-bar,
+	.timeline-row.hovered-span .span-bar {
+		color: var(--span-color);
+		background-color: var(--l2-background);
+		background-image: none;
+		border: 1px solid var(--span-color);
+	}
+
+	// Selected state: solid l3-background fill + dashed border (matches flamegraph)
+	.interested-span .span-bar,
+	.selected-non-matching-span .span-bar {
+		color: var(--span-color);
+		background-color: var(--l2-background);
+		background-image: none;
+		border: 1px dashed var(--span-color);
+	}
+
+	// Shared state classes for both panels
+	// Background highlight for selection is on .timeline-row via :has() — see .waterfall-timeline
+	// Only apply on .span-overview (left panel) where there's no parent row with :has()
+	.span-overview.interested-span,
+	.span-overview.selected-non-matching-span {
+		border-radius: 4px;
+		background: color-mix(
+			in srgb,
+			var(--l3-background) 40%,
+			transparent
+		) !important;
+	}
+
+	.dimmed-span {
+		opacity: 0.15;
+	}
+	.highlighted-span {
+		opacity: 1;
+	}
+
+	.selected-non-matching-span {
+		.tree-label {
+			opacity: 0.5;
+		}
+	}
+}
+
+.span-dets {
+	.related-logs {
+		display: flex;
+		width: 160px;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		border-radius: 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: none;
+	}
+}
+
+// `.span-bar` text color is the one place where semantic tokens don't fit
+// cleanly: in dark mode the bar's bright `--span-color` background needs dark
+// text; in light mode `generateColor` produces darker bar fills, so the text
+// must flip to white. This is the only `.lightMode` carve-out left after the
+// migration to semantic tokens — the hover/selected rules are repeated here
+// to beat the default-state rule's specificity inside `.lightMode`.
+.lightMode {
+	.success-content {
+		.span-duration .span-bar {
+			color: rgba(255, 255, 255, 0.9);
+		}
+
+		.timeline-row:hover .span-bar,
+		.timeline-row.hovered-span .span-bar,
+		.interested-span .span-bar,
+		.selected-non-matching-span .span-bar {
+			color: var(--span-color);
+		}
+	}
+}
+
+// Tooltips for the row's hover-revealed action buttons (Copy / Add to Funnel).
+// Bumped above FloatingPanel (z-index 999) so they stay visible when the
+// SpanDetailsPanel is docked as a floating panel.
+.span-action-tooltip {
+	--tooltip-z-index: 1000;
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -53,7 +53,7 @@ import { SpanHoverCard } from '../../../SpanHoverCard/SpanHoverCard';
 import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
 import { IInterestedSpan } from '../../types';
 
-import styles from './Success.module.scss';
+import './Success.styles.scss';
 
 /**
  * Lazy event dot — only mounts the tooltip when the user hovers.
@@ -91,7 +91,7 @@ const LazyEventDotPopover = memo(function LazyEventDotPopover({
 
 	const dot = (
 		<div
-			className={cx(styles.eventDot, isError && styles.hasError)}
+			className={`event-dot ${isError ? 'error' : ''}`}
 			style={
 				{
 					left: `${dotLeft}%`,
@@ -121,7 +121,7 @@ const LazyEventDotPopover = memo(function LazyEventDotPopover({
 				}}
 			>
 				<TooltipTrigger asChild>{dot}</TooltipTrigger>
-				<TooltipContent className={styles.popover}>
+				<TooltipContent className="span-hover-card-popover">
 					<EventTooltipContent
 						eventName={event.name}
 						timeOffsetMs={eventTimeMs - spanTimestamp}
@@ -243,11 +243,11 @@ const SpanOverview = memo(function SpanOverview({
 
 	return (
 		<div
-			className={cx(styles.spanOverview, {
-				[styles.isInterested]: isSelected && (!isFilterActive || isMatching),
-				[styles.isHighlighted]: isHighlighted,
-				[styles.isSelectedNonMatching]: isSelectedNonMatching,
-				[styles.isDimmed]: isDimmed,
+			className={cx('span-overview', {
+				'interested-span': isSelected && (!isFilterActive || isMatching),
+				'highlighted-span': isHighlighted,
+				'selected-non-matching-span': isSelectedNonMatching,
+				'dimmed-span': isDimmed,
 			})}
 			onClick={(): void => handleSpanClick(span)}
 			onMouseEnter={(): void => onHoverEnter(span.span_id)}
@@ -264,7 +264,7 @@ const SpanOverview = memo(function SpanOverview({
 						return (
 							<div
 								key={lvl}
-								className={styles.treeLine}
+								className="tree-line"
 								style={{
 									left: xPos,
 									top: 0,
@@ -277,25 +277,25 @@ const SpanOverview = memo(function SpanOverview({
 					return (
 						<div key={lvl}>
 							<div
-								className={styles.treeLine}
+								className="tree-line"
 								style={{ left: xPos, top: 0, width: 1, height: '50%' }}
 							/>
-							<div className={styles.treeConnector} style={{ left: xPos, top: 0 }} />
+							<div className="tree-connector" style={{ left: xPos, top: 0 }} />
 						</div>
 					);
 				})}
 
 			{/* Indent spacer */}
-			<span className={styles.treeIndent} style={{ width: `${indentWidth}px` }} />
+			<span className="tree-indent" style={{ width: `${indentWidth}px` }} />
 
 			{/* Expand/collapse arrow + child count slots — always render the
 				    slots, fill them only when the span has children. Reserving the
 				    horizontal space on leaf rows aligns sibling icons regardless
 				    of whether each sibling is a parent or a leaf. */}
-			<span className={styles.treeArrowSlot}>
+			<span className="tree-arrow-slot">
 				{span.has_children && (
 					<span
-						className={styles.treeArrow}
+						className={cx('tree-arrow', { expanded: !isSpanCollapsed })}
 						onClick={(event): void => {
 							event.stopPropagation();
 							event.preventDefault();
@@ -306,9 +306,9 @@ const SpanOverview = memo(function SpanOverview({
 					</span>
 				)}
 			</span>
-			<span className={styles.subtreeCountSlot}>
+			<span className="subtree-count-slot">
 				{span.has_children && (
-					<span className={styles.subtreeCount}>
+					<span className="subtree-count">
 						<Badge color="vanilla">{span.sub_tree_node_count}</Badge>
 					</span>
 				)}
@@ -316,18 +316,18 @@ const SpanOverview = memo(function SpanOverview({
 
 			{/* Colored service dot */}
 			<span
-				className={cx(styles.treeIcon, { [styles.hasError]: span.has_error })}
+				className={cx('tree-icon', { 'is-error': span.has_error })}
 				style={{ backgroundColor: color }}
 			/>
 
 			{/* Span name + service name */}
-			<span className={styles.treeLabel}>
+			<span className="tree-label">
 				{span.name}
-				<span className={styles.treeServiceName}>{span['service.name']}</span>
+				<span className="tree-service-name">{span['service.name']}</span>
 			</span>
 
 			{/* Action buttons — shown on hover via CSS, right-aligned */}
-			<span className={styles.rowActions}>
+			<span className="span-row-actions">
 				<TooltipProvider delayDuration={200}>
 					<Tooltip>
 						<TooltipTrigger asChild>
@@ -335,13 +335,13 @@ const SpanOverview = memo(function SpanOverview({
 								variant="ghost"
 								size="icon"
 								color="secondary"
-								className={styles.actionBtn}
+								className="span-action-btn"
 								onClick={onSpanCopy}
 							>
 								<Link size={12} />
 							</Button>
 						</TooltipTrigger>
-						<TooltipContent className={styles.actionTooltip}>
+						<TooltipContent className="span-action-tooltip">
 							Copy Span Link
 						</TooltipContent>
 					</Tooltip>
@@ -351,13 +351,13 @@ const SpanOverview = memo(function SpanOverview({
 								variant="ghost"
 								size="icon"
 								color="secondary"
-								className={styles.actionBtn}
+								className="span-action-btn"
 								onClick={handleFunnelClick}
 							>
 								<ListPlus size={12} />
 							</Button>
 						</TooltipTrigger>
-						<TooltipContent className={styles.actionTooltip}>
+						<TooltipContent className="span-action-tooltip">
 							Add to Trace Funnel
 						</TooltipContent>
 					</Tooltip>
@@ -410,16 +410,16 @@ export const SpanDuration = memo(function SpanDuration({
 
 	return (
 		<div
-			className={cx(styles.spanDuration, {
-				[styles.isInterested]: isSelected && (!isFilterActive || isMatching),
-				[styles.isHighlighted]: isHighlighted,
-				[styles.isSelectedNonMatching]: isSelectedNonMatching,
-				[styles.isDimmed]: isDimmed,
+			className={cx('span-duration', {
+				'interested-span': isSelected && (!isFilterActive || isMatching),
+				'highlighted-span': isHighlighted,
+				'selected-non-matching-span': isSelectedNonMatching,
+				'dimmed-span': isDimmed,
 			})}
 			onClick={(): void => handleSpanClick(span)}
 		>
 			<div
-				className={styles.spanBar}
+				className="span-bar"
 				style={
 					{
 						left: `${leftOffset}%`,
@@ -429,9 +429,9 @@ export const SpanDuration = memo(function SpanDuration({
 					} as React.CSSProperties
 				}
 			>
-				<span className={styles.spanInfo}>
-					<span className={styles.spanName}>{span.name}</span>
-					<span className={styles.spanDurationText}>{`${toFixed(
+				<span className="span-info">
+					<span className="span-name">{span.name}</span>
+					<span className="span-duration-text">{`${toFixed(
 						time,
 						2,
 					)} ${timeUnitName}`}</span>
@@ -529,11 +529,11 @@ function Success(props: ISuccessProps): JSX.Element {
 
 		if (prev) {
 			const prevElements = document.querySelectorAll(`[data-span-id="${prev}"]`);
-			prevElements.forEach((el) => el.classList.remove(styles.hoveredSpan));
+			prevElements.forEach((el) => el.classList.remove('hovered-span'));
 		}
 		if (spanId) {
 			const nextElements = document.querySelectorAll(`[data-span-id="${spanId}"]`);
-			nextElements.forEach((el) => el.classList.add(styles.hoveredSpan));
+			nextElements.forEach((el) => el.classList.add('hovered-span'));
 		}
 		prevHoveredSpanIdRef.current = spanId;
 	}, []);
@@ -798,17 +798,17 @@ function Success(props: ISuccessProps): JSX.Element {
 	}, []);
 
 	return (
-		<div className={styles.root}>
+		<div className="success-content">
 			{traceMetadata.hasMissingSpans && (
-				<div className={styles.missingSpans}>
-					<section className={styles.leftInfo}>
+				<div className="missing-spans">
+					<section className="left-info">
 						<CircleAlert size={14} />
-						<span className={styles.text}>This trace has missing spans</span>
+						<span className="text">This trace has missing spans</span>
 					</section>
 					<Button
 						variant="ghost"
 						color="secondary"
-						className={styles.rightInfo}
+						className="right-info"
 						suffix={<ArrowUpRight size={14} />}
 						onClick={(): WindowProxy | null =>
 							window.open(
@@ -821,17 +821,17 @@ function Success(props: ISuccessProps): JSX.Element {
 					</Button>
 				</div>
 			)}
-			{isFetching && <div className={styles.loadingBar} />}
-			<div className={styles.splitPanel} ref={scrollContainerRef}>
+			{isFetching && <div className="waterfall-loading-bar" />}
+			<div className="waterfall-split-panel" ref={scrollContainerRef}>
 				{/* Sticky header row */}
-				<div className={styles.splitHeader}>
+				<div className="waterfall-split-header">
 					<div
-						className={styles.sidebarHeader}
+						className="sidebar-header"
 						style={{ width: sidebarWidth, flexShrink: 0 }}
 					/>
-					<div className={styles.resizeHandleHeader} />
-					<div className={styles.statusHeader} />
-					<div className={styles.timelineHeader}>
+					<div className="resize-handle-header" />
+					<div className="status-header" />
+					<div className="timeline-header">
 						<TimelineV3
 							startTimestamp={traceMetadata.startTime}
 							endTimestamp={traceMetadata.endTime}
@@ -844,7 +844,7 @@ function Success(props: ISuccessProps): JSX.Element {
 
 				{/* Split body */}
 				<div
-					className={styles.splitBody}
+					className="waterfall-split-body"
 					style={{
 						minHeight: virtualizer.getTotalSize(),
 						height: '100%',
@@ -854,11 +854,11 @@ function Success(props: ISuccessProps): JSX.Element {
 					    fires a load-more via useBoundaryPagination. */}
 					<div
 						ref={loadMoreTopSentinelRef}
-						className={cx(styles.loadMoreSentinel, styles.loadMoreSentinelTop)}
+						className="waterfall-load-more-sentinel waterfall-load-more-sentinel--top"
 					/>
 					<div
 						ref={loadMoreBottomSentinelRef}
-						className={cx(styles.loadMoreSentinel, styles.loadMoreSentinelBottom)}
+						className="waterfall-load-more-sentinel waterfall-load-more-sentinel--bottom"
 					/>
 					<SpanHoverCard
 						hoveredSpanId={hoveredSpanId}
@@ -875,9 +875,9 @@ function Success(props: ISuccessProps): JSX.Element {
 						minWidth={MIN_SIDEBAR_WIDTH}
 						maxWidth={MAX_SIDEBAR_WIDTH}
 						onResize={setSidebarWidth}
-						className={styles.sidebar}
+						className="waterfall-sidebar"
 					>
-						<table className={styles.treeTable} style={{ width: maxContentWidth }}>
+						<table className="span-tree-table" style={{ width: maxContentWidth }}>
 							<tbody>
 								{virtualItems.map((virtualRow) => {
 									const row = leftRows[virtualRow.index];
@@ -887,7 +887,7 @@ function Success(props: ISuccessProps): JSX.Element {
 											key={String(virtualRow.key)}
 											data-testid={`cell-0-${span.span_id}`}
 											data-span-id={span.span_id}
-											className={styles.treeRow}
+											className="span-tree-row"
 											style={{
 												position: 'absolute',
 												top: 0,
@@ -900,7 +900,7 @@ function Success(props: ISuccessProps): JSX.Element {
 											onMouseLeave={handleRowMouseLeave}
 										>
 											{row.getVisibleCells().map((cell) => (
-												<td key={cell.id} className={styles.treeCell}>
+												<td key={cell.id} className="span-tree-cell">
 													{flexRender(cell.column.columnDef.cell, cell.getContext())}
 												</td>
 											))}
@@ -912,7 +912,7 @@ function Success(props: ISuccessProps): JSX.Element {
 					</ResizableBox>
 
 					{/* Status code column */}
-					<div className={styles.statusCol}>
+					<div className="waterfall-status-col">
 						{virtualItems.map((virtualRow) => {
 							const span = spans[virtualRow.index];
 							const { isSelected, isDimmed, isSelectedNonMatching, isMatching } =
@@ -925,10 +925,10 @@ function Success(props: ISuccessProps): JSX.Element {
 							return (
 								<div
 									key={`status-${String(virtualRow.key)}`}
-									className={cx(styles.statusCell, {
-										[styles.isInterested]: isSelected && (!isFilterActive || isMatching),
-										[styles.isDimmed]: isDimmed,
-										[styles.isSelectedNonMatching]: isSelectedNonMatching,
+									className={cx('status-cell', {
+										'interested-span': isSelected && (!isFilterActive || isMatching),
+										'dimmed-span': isDimmed,
+										'selected-non-matching-span': isSelectedNonMatching,
 									})}
 									style={{
 										position: 'absolute',
@@ -953,13 +953,13 @@ function Success(props: ISuccessProps): JSX.Element {
 
 					{/* Right panel - timeline bars */}
 					<div
-						className={styles.timeline}
+						className="waterfall-timeline"
 						ref={timelineAreaRef}
 						onMouseMove={onCrosshairMove}
 						onMouseLeave={onCrosshairLeave}
 					>
 						{cursorX !== null && (
-							<div className={styles.crosshair} style={{ left: cursorX }} />
+							<div className="waterfall-crosshair" style={{ left: cursorX }} />
 						)}
 						{virtualItems.map((virtualRow) => {
 							const span = spans[virtualRow.index];
@@ -968,7 +968,7 @@ function Success(props: ISuccessProps): JSX.Element {
 									key={String(virtualRow.key)}
 									data-testid={`cell-1-${span.span_id}`}
 									data-span-id={span.span_id}
-									className={styles.timelineRow}
+									className="timeline-row"
 									style={{
 										position: 'absolute',
 										top: 0,

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -2,33 +2,18 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { fireEvent, render, screen } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-// Local identity-proxy mock for this module so `styles.foo` resolves to
-// `'foo'` in test assertions. The global `__mocks__/cssMock.ts` stays as
-// `export default {}`; we override resolution for this specific file only.
-jest.mock(
-	'../Success.module.scss',
-	() =>
-		new Proxy(
-			{},
-			{
-				get: (_target, prop): string | undefined =>
-					typeof prop === 'string' && prop !== '__esModule' ? prop : undefined,
-			},
-		),
-);
-
 import { SpanDuration } from '../Success';
-import successStyles from '../Success.module.scss';
 
 const renderWithTraceProvider: typeof render = (ui, options) =>
 	render(ui, options);
 
+// Constants to avoid string duplication
 const SPAN_DURATION_TEXT = '1.16 ms';
-const SPAN_DURATION_CLASS = `.${successStyles.spanDuration}`;
-const INTERESTED_SPAN_CLASS = successStyles.isInterested;
-const HIGHLIGHTED_SPAN_CLASS = successStyles.isHighlighted;
-const DIMMED_SPAN_CLASS = successStyles.isDimmed;
-const SELECTED_NON_MATCHING_SPAN_CLASS = successStyles.isSelectedNonMatching;
+const SPAN_DURATION_CLASS = '.span-duration';
+const INTERESTED_SPAN_CLASS = 'interested-span';
+const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
+const DIMMED_SPAN_CLASS = 'dimmed-span';
+const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
 
 jest.mock('components/TimelineV3/TimelineV3', () => ({
 	__esModule: true,
@@ -142,7 +127,10 @@ describe('SpanDuration', () => {
 
 		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
 
+		// Hover over the span should add hovered-span class
 		fireEvent.mouseEnter(spanElement);
+
+		// Mouse leave should remove hovered-span class
 		fireEvent.mouseLeave(spanElement);
 	});
 
@@ -271,8 +259,8 @@ describe('SpanDuration', () => {
 				traceMetadata={mockTraceMetadata}
 				selectedSpan={undefined}
 				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive
+				filteredSpanIds={[]} // Empty array but filter is active
+				isFilterActive // This is the key difference
 			/>,
 		);
 

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -2,23 +2,7 @@ import React from 'react';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-// Local identity-proxy mock for this module so `styles.foo` resolves to
-// `'foo'` in test assertions. The global `__mocks__/cssMock.ts` stays as
-// `export default {}`; we override resolution for this specific file only.
-jest.mock(
-	'../Success.module.scss',
-	() =>
-		new Proxy(
-			{},
-			{
-				get: (_target, prop): string | undefined =>
-					typeof prop === 'string' && prop !== '__esModule' ? prop : undefined,
-			},
-		),
-);
-
 import Success from '../Success';
-import successStyles from '../Success.module.scss';
 
 const renderWithTraceProvider: typeof render = (ui, options, customOptions) =>
 	render(ui, options, customOptions);
@@ -227,10 +211,10 @@ describe('Span Click User Flows', () => {
 	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
 	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
 	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
+	const SPAN_OVERVIEW_CLASS = '.span-overview';
+	const SPAN_DURATION_CLASS = '.span-duration';
+	const INTERESTED_SPAN_CLASS = 'interested-span';
 	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
-	const SPAN_OVERVIEW_CLASS = `.${successStyles.spanOverview}`;
-	const SPAN_DURATION_CLASS = `.${successStyles.spanDuration}`;
-	const INTERESTED_SPAN_CLASS = successStyles.isInterested;
 
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -284,6 +268,7 @@ describe('Span Click User Flows', () => {
 			initialRoute: '/trace',
 		});
 
+		// Wait for initial render and selection
 		await waitFor(() => {
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
 			const spanDurationElement = spanDuration.querySelector(
@@ -292,12 +277,14 @@ describe('Span Click User Flows', () => {
 			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 
+		// Click on span-2 to test selection change
 		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
 		const span2DurationElement = span2Duration.querySelector(
 			SPAN_DURATION_CLASS,
 		) as HTMLElement;
 		await user.click(span2DurationElement);
 
+		// Wait for the state update and re-render
 		await waitFor(() => {
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
 			const spanDurationElement = spanDuration.querySelector(
@@ -320,6 +307,7 @@ describe('Span Click User Flows', () => {
 			initialRoute: '/trace',
 		});
 
+		// Wait for initial render and selection
 		await waitFor(() => {
 			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
@@ -330,16 +318,19 @@ describe('Span Click User Flows', () => {
 				SPAN_DURATION_CLASS,
 			) as HTMLElement;
 
+			// Initially both areas should show the same visual selection (first span is auto-selected)
 			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
 			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 
+		// Click span-2 to test selection change
 		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
 		const span2Element = span2Overview.querySelector(
 			SPAN_OVERVIEW_CLASS,
 		) as HTMLElement;
 		await user.click(span2Element);
 
+		// Wait for the state update and re-render
 		await waitFor(() => {
 			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
@@ -350,15 +341,17 @@ describe('Span Click User Flows', () => {
 				SPAN_DURATION_CLASS,
 			) as HTMLElement;
 
+			// Now span-2 should be selected, span-1 should not
 			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
 			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
 
-			const span2OverviewSub = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2DurationSub = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2OverviewElement = span2OverviewSub.querySelector(
+			// Check that span-2 is selected
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+			const span2OverviewElement = span2Overview.querySelector(
 				SPAN_OVERVIEW_CLASS,
 			) as HTMLElement;
-			const span2DurationElement = span2DurationSub.querySelector(
+			const span2DurationElement = span2Duration.querySelector(
 				SPAN_DURATION_CLASS,
 			) as HTMLElement;
 
@@ -374,6 +367,7 @@ describe('Span Click User Flows', () => {
 			initialRoute: '/trace',
 		});
 
+		// Wait for initial render and selection
 		await waitFor(() => {
 			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const span1Element = span1Overview.querySelector(
@@ -382,24 +376,27 @@ describe('Span Click User Flows', () => {
 			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 
+		// Click second span
 		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
 		const span2Element = span2Overview.querySelector(
 			SPAN_OVERVIEW_CLASS,
 		) as HTMLElement;
 		await user.click(span2Element);
 
+		// Wait for the state update and re-render
 		await waitFor(() => {
 			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const span1Element = span1Overview.querySelector(
 				SPAN_OVERVIEW_CLASS,
 			) as HTMLElement;
-			const span2OverviewSub = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2ElementSub = span2OverviewSub.querySelector(
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Element = span2Overview.querySelector(
 				SPAN_OVERVIEW_CLASS,
 			) as HTMLElement;
 
+			// Second span should be selected, first should not
 			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2ElementSub).toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 	});
 
@@ -429,6 +426,7 @@ describe('Span Click User Flows', () => {
 			{ initialRoute: '/trace' },
 		);
 
+		// Click on the actual span element (not the wrapper)
 		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 		const spanElement = spanOverview.querySelector(
 			SPAN_OVERVIEW_CLASS,
@@ -440,6 +438,7 @@ describe('Span Click User Flows', () => {
 		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
 		expect(mockUrlQuery.get('spanId')).toBe('span-1');
 
+		// Verify navigation was called with all parameters
 		expect(mockSafeNavigate).toHaveBeenCalledWith({
 			search: expect.stringMatching(
 				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/AddedFields.tsx

@@ -15,13 +15,10 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button } from '@signozhq/ui/button';
-import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import styles from './FieldsSettings.module.scss';
-
 function SortableField({
 	field,
 	onRemove,
@@ -43,17 +40,14 @@ function SortableField({
 		<div
 			ref={setNodeRef}
 			style={style}
-			className={cx(
-				styles.fieldItem,
-				allowDrag ? styles.isDragEnabled : styles.isDragDisabled,
-			)}
+			className={`fs-field-item ${allowDrag ? 'drag-enabled' : 'drag-disabled'}`}
 		>
-			<div {...attributes} {...listeners} className={styles.dragHandle}>
+			<div {...attributes} {...listeners} className="drag-handle">
 				{allowDrag && <GripVertical size={14} />}
-				<span className={styles.fieldKey}>{field.key}</span>
+				<span className="fs-field-key">{field.key}</span>
 			</div>
 			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
+				className="remove-field-btn periscope-btn"
 				variant="outlined"
 				color="destructive"
 				size="sm"
@@ -100,9 +94,9 @@ function AddedFields({
 	const allowDrag = inputValue.length === 0;
 
 	return (
-		<div className={cx(styles.section, styles.sectionAdded)}>
-			<div className={styles.sectionHeader}>ADDED FIELDS</div>
-			<div className={styles.addedList}>
+		<div className="fs-section fs-added">
+			<div className="fs-section-header">ADDED FIELDS</div>
+			<div className="fs-added-list">
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -110,7 +104,7 @@ function AddedFields({
 						onDragEnd={handleDragEnd}
 					>
 						{filteredFields.length === 0 ? (
-							<div className={styles.noValues}>No values found</div>
+							<div className="fs-no-values">No values found</div>
 						) : (
 							<SortableContext
 								items={fields.map((f) => f.key)}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.module.scss

@@ -1,161 +0,0 @@
-.root {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	background: var(--l1-background);
-	color: var(--l1-foreground);
-	overflow: hidden;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 10px 12px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	font-size: 13px;
-	font-weight: 500;
-}
-
-.closeIcon {
-	cursor: pointer;
-	color: var(--l2-foreground);
-
-	&:hover {
-		color: var(--l1-foreground);
-	}
-}
-
-.searchInput {
-	background-color: var(--l1-background);
-	height: 40px;
-	border-radius: 0;
-	border-left: none;
-	border-right: none;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-}
-
-.sectionAdded {
-	max-height: 40%;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.sectionOther {
-	flex: 1;
-	min-height: 0;
-}
-
-.sectionHeader {
-	color: var(--muted-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 18px;
-	letter-spacing: 0.88px;
-	text-transform: uppercase;
-	padding: 8px 12px;
-}
-
-.addedList {
-	overflow: hidden;
-}
-
-.otherList {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-
-	// Ant Skeleton.Input rendered inside the loading state — override its
-	// hard-coded width.
-	:global(.ant-skeleton-input) {
-		width: 300px;
-		margin: 8px 12px;
-	}
-}
-
-.noValues {
-	padding: 8px;
-	text-align: center;
-	color: var(--l2-foreground);
-	font-size: 12px;
-}
-
-.limitHint {
-	padding: 8px 12px;
-	text-align: center;
-	color: var(--muted-foreground);
-	font-size: 11px;
-}
-
-.fieldItem {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 6px 12px;
-	border-radius: 4px;
-	user-select: none;
-	font-size: 13px;
-
-	&:hover {
-		background-color: var(--l2-background);
-
-		.removeBtn,
-		.addBtn {
-			opacity: 1;
-		}
-	}
-}
-
-.dragHandle {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-grow: 1;
-}
-
-.fieldKey {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.isDragEnabled {
-	cursor: grab;
-
-	&:active {
-		cursor: grabbing;
-	}
-}
-
-.isDragDisabled {
-	padding: 6px 12px;
-}
-
-.otherFieldItem {
-	height: 32px;
-}
-
-.removeBtn,
-.addBtn {
-	padding: 4px 10px;
-	opacity: 0;
-	transition: opacity 0.15s ease-in-out;
-	flex-shrink: 0;
-}
-
-.footer {
-	display: flex;
-	gap: 12px;
-	padding: 12px;
-	border-top: 1px solid var(--l1-border);
-	justify-content: space-between;
-}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.styles.scss

@@ -0,0 +1,161 @@
+.fields-settings {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+	overflow: hidden;
+
+	.fs-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 12px;
+		border-bottom: 1px solid var(--l1-border);
+
+		.fs-title {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			font-size: 13px;
+			font-weight: 500;
+		}
+
+		.fs-close-icon {
+			cursor: pointer;
+			color: var(--l2-foreground);
+
+			&:hover {
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.fs-search {
+		.fs-search-input {
+			background-color: var(--l1-background);
+			height: 40px;
+			border-radius: 0;
+			border-left: none;
+			border-right: none;
+		}
+	}
+
+	.fs-section {
+		display: flex;
+		flex-direction: column;
+
+		&.fs-added {
+			max-height: 40%;
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		&.fs-other {
+			flex: 1;
+			min-height: 0;
+		}
+	}
+
+	.fs-section-header {
+		color: var(--muted-foreground);
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 18px;
+		letter-spacing: 0.88px;
+		text-transform: uppercase;
+		padding: 8px 12px;
+	}
+
+	.fs-added-list {
+		overflow: hidden;
+	}
+
+	.fs-other-list {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+
+		.ant-skeleton-input {
+			width: 300px;
+			margin: 8px 12px;
+		}
+	}
+
+	.fs-no-values {
+		padding: 8px;
+		text-align: center;
+		color: var(--l2-foreground);
+		font-size: 12px;
+	}
+
+	.fs-limit-hint {
+		padding: 8px 12px;
+		text-align: center;
+		color: var(--muted-foreground);
+		font-size: 11px;
+	}
+}
+
+.fs-field-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 12px;
+	border-radius: 4px;
+	user-select: none;
+	font-size: 13px;
+
+	.drag-handle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-grow: 1;
+	}
+
+	.fs-field-key {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&.drag-enabled {
+		cursor: grab;
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&.drag-disabled {
+		padding: 6px 12px;
+	}
+
+	&.other-field-item {
+		height: 32px;
+	}
+
+	.remove-field-btn,
+	.add-field-btn {
+		padding: 4px 10px;
+		opacity: 0;
+		transition: opacity 0.15s ease-in-out;
+		flex-shrink: 0;
+	}
+
+	&:hover {
+		background-color: var(--l2-background);
+
+		.remove-field-btn,
+		.add-field-btn {
+			opacity: 1;
+		}
+	}
+}
+
+.fs-footer {
+	display: flex;
+	gap: 12px;
+	padding: 12px;
+	border-top: 1px solid var(--l1-border);
+	justify-content: space-between;
+}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.tsx

@@ -10,7 +10,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import AddedFields from './AddedFields';
 import OtherFields from './OtherFields';
 
-import styles from './FieldsSettings.module.scss';
+import './FieldsSettings.styles.scss';
 
 const MAX_FIELDS_DEFAULT = 10;
 
@@ -89,18 +89,18 @@ function FieldsSettings({
 	const isAtLimit = draftFields.length >= maxFields;
 
 	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
-				<div className={styles.title}>
+		<div className="fields-settings">
+			<div className="fs-header">
+				<div className="fs-title">
 					<TableColumnsSplit size={16} />
 					{title}
 				</div>
-				<X className={styles.closeIcon} size={16} onClick={onClose} />
+				<X className="fs-close-icon" size={16} onClick={onClose} />
 			</div>
 
-			<section>
+			<section className="fs-search">
 				<Input
-					className={styles.searchInput}
+					className="fs-search-input"
 					type="text"
 					value={inputValue}
 					placeholder="Search for a field..."
@@ -123,7 +123,7 @@ function FieldsSettings({
 			/>
 
 			{hasUnsavedChanges && (
-				<div className={styles.footer}>
+				<div className="fs-footer">
 					<Button
 						variant="outlined"
 						color="secondary"

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/OtherFields.tsx

@@ -1,15 +1,12 @@
 import { useMemo } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Skeleton } from 'antd';
-import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './FieldsSettings.module.scss';
-
 interface OtherFieldsProps {
 	dataSource: DataSource;
 	debouncedInputValue: string;
@@ -53,9 +50,9 @@ function OtherFields({
 
 	if (isFetching) {
 		return (
-			<div className={cx(styles.section, styles.sectionOther)}>
-				<div className={styles.sectionHeader}>OTHER FIELDS</div>
-				<div className={styles.otherList}>
+			<div className="fs-section fs-other">
+				<div className="fs-section-header">OTHER FIELDS</div>
+				<div className="fs-other-list">
 					{Array.from({ length: 5 }).map((_, i) => (
 						// eslint-disable-next-line react/no-array-index-key
 						<Skeleton.Input active size="small" key={i} />
@@ -66,23 +63,20 @@ function OtherFields({
 	}
 
 	return (
-		<div className={cx(styles.section, styles.sectionOther)}>
-			<div className={styles.sectionHeader}>OTHER FIELDS</div>
-			<div className={styles.otherList}>
+		<div className="fs-section fs-other">
+			<div className="fs-section-header">OTHER FIELDS</div>
+			<div className="fs-other-list">
 				<OverlayScrollbar>
 					<>
 						{otherFields.length === 0 ? (
-							<div className={styles.noValues}>No values found</div>
+							<div className="fs-no-values">No values found</div>
 						) : (
 							otherFields.map((attr) => (
-								<div
-									key={attr.key}
-									className={cx(styles.fieldItem, styles.otherFieldItem)}
-								>
-									<span className={styles.fieldKey}>{attr.key}</span>
+								<div key={attr.key} className="fs-field-item other-field-item">
+									<span className="fs-field-key">{attr.key}</span>
 									{!isAtLimit && (
 										<Button
-											className={cx(styles.addBtn, 'periscope-btn')}
+											className="add-field-btn periscope-btn"
 											variant="outlined"
 											color="secondary"
 											size="sm"
@@ -94,7 +88,7 @@ function OtherFields({
 								</div>
 							))
 						)}
-						{isAtLimit && <div className={styles.limitHint}>Maximum 10 fields</div>}
+						{isAtLimit && <div className="fs-limit-hint">Maximum 10 fields</div>}
 					</>
 				</OverlayScrollbar>
 			</div>

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -32,9 +32,7 @@ import TraceWaterfall from './TraceWaterfall/TraceWaterfall';
 import { IInterestedSpan } from './TraceWaterfall/types';
 import { getAncestorSpanIds } from './TraceWaterfall/utils';
 
-import cx from 'classnames';
-
-import styles from './TraceDetailsV3.module.scss';
+import './TraceDetailsV3.styles.scss';
 
 function TraceDetailsV3(): JSX.Element {
 	const { id: traceId } = useParams<TraceDetailV3URLProps>();
@@ -287,7 +285,7 @@ function TraceDetailsV3(): JSX.Element {
 
 	return (
 		<TraceStoreSync aggregations={traceData?.payload?.aggregations}>
-			<div className={styles.root}>
+			<div className="trace-details-v3">
 				<TraceDetailsHeader
 					filterMetadata={filterMetadata}
 					onFilteredSpansChange={handleFilteredSpansChange}
@@ -299,20 +297,20 @@ function TraceDetailsV3(): JSX.Element {
 					<NoData />
 				) : (
 					<>
-						<div className={styles.content}>
+						<div className="trace-details-v3__content">
 							<Collapse
 								// @ts-expect-error motion is passed through to rc-collapse to disable animation
 								motion={false}
 								activeKey={activeKeys.filter((k) => k === 'flame')}
 								onChange={(): void => handleCollapseChange('flame')}
 								size="small"
-								className={styles.flameCollapse}
+								className="trace-details-v3__flame-collapse"
 								items={[
 									{
 										key: 'flame',
 										label: (
-											<div className={styles.collapseLabel}>
-												<span className={styles.collapseTitle}>
+											<div className="trace-details-v3__collapse-label">
+												<span className="trace-details-v3__collapse-title">
 													Flame Graph
 													{traceData?.payload?.totalSpansCount &&
 														traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
@@ -323,15 +321,17 @@ function TraceDetailsV3(): JSX.Element {
 														)}
 												</span>
 												{traceData?.payload?.totalSpansCount ? (
-													<span className={styles.collapseCount}>
-														<span className={styles.collapseCountItem}>
+													<span className="trace-details-v3__collapse-count">
+														<span className="trace-details-v3__collapse-count-item">
 															<ChartNoAxesGantt size={13} />
 															Spans: {traceData.payload.totalSpansCount}
 														</span>
 														<span
-															className={cx(styles.collapseCountItem, {
-																[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
-															})}
+															className={`trace-details-v3__collapse-count-item${
+																traceData.payload.totalErrorSpansCount > 0
+																	? ' trace-details-v3__collapse-count-errors'
+																	: ''
+															}`}
 														>
 															<TriangleAlert size={13} />
 															Errors: {traceData.payload.totalErrorSpansCount ?? 0}
@@ -360,9 +360,11 @@ function TraceDetailsV3(): JSX.Element {
 								activeKey={activeKeys.filter((k) => k === 'waterfall')}
 								onChange={(): void => handleCollapseChange('waterfall')}
 								size="small"
-								className={cx(styles.waterfallCollapse, {
-									[styles.isDocked]: isWaterfallDocked,
-								})}
+								className={`trace-details-v3__waterfall-collapse${
+									isWaterfallDocked
+										? ' trace-details-v3__waterfall-collapse--docked'
+										: ''
+								}`}
 								items={[
 									{
 										key: 'waterfall',
@@ -373,7 +375,7 @@ function TraceDetailsV3(): JSX.Element {
 							/>
 
 							{panelState.isOpen && isDocked && (
-								<div className={styles.dockedSpanDetails}>
+								<div className="trace-details-v3__docked-span-details">
 									<SpanDetailsPanel
 										panelState={panelState}
 										selectedSpan={selectedSpan}

go.mod

@@ -88,6 +88,7 @@ require (
 	gonum.org/v1/gonum v0.17.0
 	google.golang.org/api v0.265.0
 	google.golang.org/protobuf v1.36.11
+	gopkg.in/evanphx/json-patch.v4 v4.13.0
 	gopkg.in/yaml.v2 v2.4.0
 	gopkg.in/yaml.v3 v3.0.1
 	k8s.io/apimachinery v0.35.2

pkg/apiserver/signozapiserver/dashboard.go

@@ -14,6 +14,218 @@ import (
 )
 
 func (provider *provider) addDashboardRoutes(router *mux.Router) error {
+	if err := router.Handle("/api/v2/dashboards", handler.New(provider.authzMiddleware.ViewAccess(provider.dashboardHandler.ListV2), handler.OpenAPIDef{
+		ID:                  "ListDashboardsV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "List dashboards (v2)",
+		Description:         "Returns a page of v2-shape dashboards for the calling user's org. Supports a filter DSL (`query`), sort (`updated_at`/`created_at`/`title`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). Pinned dashboards float to the top of each page.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(dashboardtypes.ListableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.CreateV2), handler.OpenAPIDef{
+		ID:                  "CreateDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Create dashboard (v2)",
+		Description:         "This endpoint creates a v2-shape dashboard with structured metadata, a typed data tree, and resolved tags.",
+		Request:             new(dashboardtypes.PostableDashboardV2),
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusCreated,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.ViewAccess(provider.dashboardHandler.GetV2), handler.OpenAPIDef{
+		ID:                  "GetDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Get dashboard (v2)",
+		Description:         "This endpoint returns a v2-shape dashboard with its tags and public sharing config (if any).",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UpdateV2), handler.OpenAPIDef{
+		ID:                  "UpdateDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Update dashboard (v2)",
+		Description:         "This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.",
+		Request:             new(dashboardtypes.UpdateableDashboardV2),
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.PatchV2), handler.OpenAPIDef{
+		ID:          "PatchDashboardV2",
+		Tags:        []string{"dashboard"},
+		Summary:     "Patch dashboard (v2)",
+		Description: "This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Locked dashboards are rejected.",
+		Request:     new(dashboardtypes.JSONPatchDocument),
+		// Strictly per RFC 6902 the content type is `application/json-patch+json`,
+		// but our OpenAPI generator only reflects schemas for content types it
+		// understands (application/json, form-urlencoded, multipart) — anything
+		// else degrades to `type: string`. Declaring application/json here keeps
+		// the array-of-ops schema visible to spec consumers; the runtime decoder
+		// parses JSON regardless of the request's actual Content-Type header.
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPatch).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.DeleteV2), handler.OpenAPIDef{
+		ID:                  "DeleteDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Delete dashboard (v2)",
+		Description:         "This endpoint deletes a v2-shape dashboard along with its tag relations. Locked dashboards are rejected.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.LockV2), handler.OpenAPIDef{
+		ID:                  "LockDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Lock dashboard (v2)",
+		Description:         "This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UnlockV2), handler.OpenAPIDef{
+		ID:                  "UnlockDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Unlock dashboard (v2)",
+		Description:         "This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
+	// ViewAccess: pinning only mutates the calling user's pin list, not the
+	// dashboard itself — anyone who can view a dashboard can bookmark it.
+	if err := router.Handle("/api/v2/dashboards/{id}/pins/me", handler.New(provider.authzMiddleware.ViewAccess(provider.dashboardHandler.PinV2), handler.OpenAPIDef{
+		ID:                  "PinDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Pin a dashboard for the current user (v2)",
+		Description:         "Pins the dashboard for the calling user. A user can pin at most 10 dashboards; pinning when at the limit returns 409. Re-pinning an already-pinned dashboard is a no-op success.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/pins/me", handler.New(provider.authzMiddleware.ViewAccess(provider.dashboardHandler.UnpinV2), handler.OpenAPIDef{
+		ID:                  "UnpinDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Unpin a dashboard for the current user (v2)",
+		Description:         "Removes the pin for the calling user. Idempotent — unpinning a dashboard that wasn't pinned still returns 204.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/public", handler.New(provider.authzMiddleware.AdminAccess(provider.dashboardHandler.CreatePublicV2), handler.OpenAPIDef{
+		ID:                  "CreatePublicDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Make a dashboard v2 public",
+		Description:         "This endpoint creates the public sharing config for a v2 dashboard and returns the dashboard with the new public config attached. Lock state does not gate this endpoint.",
+		Request:             new(dashboardtypes.PostablePublicDashboard),
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPatch).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/public", handler.New(provider.authzMiddleware.AdminAccess(provider.dashboardHandler.UpdatePublicV2), handler.OpenAPIDef{
+		ID:                  "UpdatePublicDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Update public sharing config for a dashboard v2",
+		Description:         "This endpoint updates the public sharing config (time range settings) of an already-public v2 dashboard. Lock state does not gate this endpoint.",
+		Request:             new(dashboardtypes.UpdatablePublicDashboard),
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v1/dashboards/{id}/public", handler.New(provider.authzMiddleware.AdminAccess(provider.dashboardHandler.CreatePublic), handler.OpenAPIDef{
 		ID:                  "CreatePublicDashboard",
 		Tags:                []string{"dashboard"},

pkg/modules/dashboard/dashboard.go

@@ -49,6 +49,32 @@ type Module interface {
 	GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]map[string]string, error)
 
 	statsreporter.StatsCollector
+
+	// ════════════════════════════════════════════════════════════════════════
+	// v2 dashboard methods
+	// ════════════════════════════════════════════════════════════════════════
+
+	CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error)
+
+	GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error)
+
+	ListV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, params *dashboardtypes.ListDashboardsV2Params) (*dashboardtypes.ListableDashboardV2, error)
+
+	UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updateable dashboardtypes.UpdateableDashboardV2) (*dashboardtypes.DashboardV2, error)
+
+	PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error)
+
+	DeleteV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error
+
+	LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error
+
+	CreatePublicV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, postable dashboardtypes.PostablePublicDashboard) (*dashboardtypes.DashboardV2, error)
+
+	UpdatePublicV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatable dashboardtypes.UpdatablePublicDashboard) (*dashboardtypes.DashboardV2, error)
+
+	PinV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, id valuer.UUID) error
+
+	UnpinV2(ctx context.Context, userID valuer.UUID, id valuer.UUID) error
 }
 
 type Handler interface {
@@ -71,4 +97,31 @@ type Handler interface {
 	LockUnlock(http.ResponseWriter, *http.Request)
 
 	Delete(http.ResponseWriter, *http.Request)
+
+	// ════════════════════════════════════════════════════════════════════════
+	// v2 dashboard methods
+	// ════════════════════════════════════════════════════════════════════════
+	CreateV2(http.ResponseWriter, *http.Request)
+
+	GetV2(http.ResponseWriter, *http.Request)
+
+	ListV2(http.ResponseWriter, *http.Request)
+
+	UpdateV2(http.ResponseWriter, *http.Request)
+
+	PatchV2(http.ResponseWriter, *http.Request)
+
+	DeleteV2(http.ResponseWriter, *http.Request)
+
+	LockV2(http.ResponseWriter, *http.Request)
+
+	UnlockV2(http.ResponseWriter, *http.Request)
+
+	CreatePublicV2(http.ResponseWriter, *http.Request)
+
+	UpdatePublicV2(http.ResponseWriter, *http.Request)
+
+	PinV2(http.ResponseWriter, *http.Request)
+
+	UnpinV2(http.ResponseWriter, *http.Request)
 }

pkg/modules/dashboard/impldashboard/module.go

@@ -10,7 +10,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
@@ -20,20 +22,24 @@ import (
 
 type module struct {
 	store       dashboardtypes.Store
+	sqlstore    sqlstore.SQLStore
 	settings    factory.ScopedProviderSettings
 	analytics   analytics.Analytics
 	orgGetter   organization.Getter
 	queryParser queryparser.QueryParser
+	tagModule   tag.Module
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser) dashboard.Module {
+func NewModule(store dashboardtypes.Store, sqlstore sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, tagModule tag.Module) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard")
 	return &module{
 		store:       store,
+		sqlstore:    sqlstore,
 		settings:    scopedProviderSettings,
 		analytics:   analytics,
 		orgGetter:   orgGetter,
 		queryParser: queryParser,
+		tagModule:   tagModule,
 	}
 }
 

pkg/modules/dashboard/impldashboard/store.go

@@ -2,10 +2,14 @@ package impldashboard
 
 import (
 	"context"
+	"strings"
+	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes/listfilter"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/uptrace/bun"
 )
@@ -63,6 +67,201 @@ func (store *store) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID)
 	return storableDashboard, nil
 }
 
+func (store *store) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.StorableDashboard, *dashboardtypes.StorablePublicDashboard, error) {
+	type joinedRow struct {
+		*dashboardtypes.StorableDashboard `bun:",extend"`
+
+		PublicID               *valuer.UUID `bun:"public_id"`
+		PublicCreatedAt        *time.Time   `bun:"public_created_at"`
+		PublicUpdatedAt        *time.Time   `bun:"public_updated_at"`
+		PublicTimeRangeEnabled *bool        `bun:"public_time_range_enabled"`
+		PublicDefaultTimeRange *string      `bun:"public_default_time_range"`
+	}
+
+	row := &joinedRow{StorableDashboard: new(dashboardtypes.StorableDashboard)}
+	err := store.
+		sqlstore.
+		BunDB().
+		NewSelect().
+		Model(row).
+		ColumnExpr("dashboard.id, dashboard.org_id, dashboard.data, dashboard.locked, dashboard.created_at, dashboard.created_by, dashboard.updated_at, dashboard.updated_by").
+		ColumnExpr("pd.id AS public_id, pd.created_at AS public_created_at, pd.updated_at AS public_updated_at, pd.time_range_enabled AS public_time_range_enabled, pd.default_time_range AS public_default_time_range").
+		Join("LEFT JOIN public_dashboard AS pd ON pd.dashboard_id = dashboard.id").
+		Where("dashboard.id = ?", id).
+		Where("dashboard.org_id = ?", orgID).
+		Scan(ctx)
+	if err != nil {
+		return nil, nil, store.sqlstore.WrapNotFoundErrf(err, dashboardtypes.ErrCodeDashboardNotFound, "dashboard with id %s doesn't exist", id)
+	}
+
+	if row.PublicID == nil {
+		return row.StorableDashboard, nil, nil
+	}
+	public := &dashboardtypes.StorablePublicDashboard{
+		Identifiable:     types.Identifiable{ID: *row.PublicID},
+		TimeAuditable:    types.TimeAuditable{CreatedAt: *row.PublicCreatedAt, UpdatedAt: *row.PublicUpdatedAt},
+		TimeRangeEnabled: *row.PublicTimeRangeEnabled,
+		DefaultTimeRange: *row.PublicDefaultTimeRange,
+		DashboardID:      row.ID.StringValue(),
+	}
+	return row.StorableDashboard, public, nil
+}
+
+// ListV2 emits the joined dashboard ⨝ pinned_dashboard ⨝ public_dashboard
+// query the spec calls for. Aliases:
+//
+//	dashboard         — the visitor expects this
+//	pinned_dashboard  AS pin  — only used inside this query
+//	public_dashboard  AS pd   — the visitor expects this
+//
+// Sort is "is_pinned DESC, <sort> <order>" so pinned dashboards float to the
+// top inside the requested ordering. Title-sort goes through the same
+// JSONExtractString path the visitor uses for name/description filtering.
+func (store *store) ListV2(
+	ctx context.Context,
+	orgID valuer.UUID,
+	userID valuer.UUID,
+	params *dashboardtypes.ListDashboardsV2Params,
+) ([]*dashboardtypes.DashboardListRow, bool, error) {
+	compiled, err := listfilter.Compile(params.Query, store.sqlstore.Formatter())
+	if err != nil {
+		return nil, false, err
+	}
+	type listedRow struct {
+		*dashboardtypes.StorableDashboard `bun:",extend"`
+
+		IsPinned bool `bun:"is_pinned"`
+
+		PublicID               *valuer.UUID `bun:"public_id"`
+		PublicCreatedAt        *time.Time   `bun:"public_created_at"`
+		PublicUpdatedAt        *time.Time   `bun:"public_updated_at"`
+		PublicTimeRangeEnabled *bool        `bun:"public_time_range_enabled"`
+		PublicDefaultTimeRange *string      `bun:"public_default_time_range"`
+	}
+
+	rows := make([]*listedRow, 0)
+
+	q := store.sqlstore.
+		BunDB().
+		NewSelect().
+		Model(&rows).
+		ColumnExpr("dashboard.id, dashboard.org_id, dashboard.data, dashboard.locked, dashboard.created_at, dashboard.created_by, dashboard.updated_at, dashboard.updated_by").
+		ColumnExpr("CASE WHEN pin.user_id IS NOT NULL THEN 1 ELSE 0 END AS is_pinned").
+		ColumnExpr("pd.id AS public_id, pd.created_at AS public_created_at, pd.updated_at AS public_updated_at, pd.time_range_enabled AS public_time_range_enabled, pd.default_time_range AS public_default_time_range").
+		Join("LEFT JOIN pinned_dashboard AS pin ON pin.user_id = ? AND pin.dashboard_id = dashboard.id", userID).
+		Join("LEFT JOIN public_dashboard AS pd ON pd.dashboard_id = dashboard.id").
+		Where("dashboard.org_id = ?", orgID)
+
+	if compiled != nil {
+		q = q.Where(compiled.SQL, compiled.Args...)
+	}
+
+	sortExpr, err := store.sortExprForListV2(params.Sort)
+	if err != nil {
+		return nil, false, err
+	}
+	q = q.
+		OrderExpr("is_pinned DESC").
+		OrderExpr(sortExpr + " " + strings.ToUpper(string(params.Order))).
+		Limit(params.Limit + 1).
+		Offset(params.Offset)
+
+	if err := q.Scan(ctx); err != nil {
+		return nil, false, err
+	}
+
+	hasMore := len(rows) > params.Limit
+	if hasMore {
+		rows = rows[:params.Limit]
+	}
+
+	out := make([]*dashboardtypes.DashboardListRow, len(rows))
+	for i, r := range rows {
+		row := &dashboardtypes.DashboardListRow{
+			Dashboard: r.StorableDashboard,
+			Pinned:    r.IsPinned,
+		}
+		if r.PublicID != nil {
+			row.Public = &dashboardtypes.StorablePublicDashboard{
+				Identifiable:     types.Identifiable{ID: *r.PublicID},
+				TimeAuditable:    types.TimeAuditable{CreatedAt: *r.PublicCreatedAt, UpdatedAt: *r.PublicUpdatedAt},
+				TimeRangeEnabled: *r.PublicTimeRangeEnabled,
+				DefaultTimeRange: *r.PublicDefaultTimeRange,
+				DashboardID:      r.ID.StringValue(),
+			}
+		}
+		out[i] = row
+	}
+	return out, hasMore, nil
+}
+
+// sortExprForListV2 maps a sort enum to the SQL expression to plug into
+// ORDER BY. Title-sort routes through the SQLFormatter so it stays
+// dialect-aware (matches what listfilter/visitor does for the name filter).
+func (store *store) sortExprForListV2(sort dashboardtypes.ListSort) (string, error) {
+	switch sort {
+	case dashboardtypes.ListSortUpdatedAt:
+		return "dashboard.updated_at", nil
+	case dashboardtypes.ListSortCreatedAt:
+		return "dashboard.created_at", nil
+	case dashboardtypes.ListSortName:
+		return string(store.sqlstore.Formatter().JSONExtractString("dashboard.data", "$.data.display.name")), nil
+	}
+	return "", errors.Newf(errors.TypeInvalidInput, dashboardtypes.ErrCodeDashboardListInvalid,
+		"unsupported sort field %q", sort)
+}
+
+func (store *store) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.StorableDashboardData) error {
+	res, err := store.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewUpdate().
+		Model((*dashboardtypes.StorableDashboard)(nil)).
+		Set("data = ?", data).
+		Set("updated_by = ?", updatedBy).
+		Set("updated_at = ?", time.Now()).
+		Where("id = ?", id).
+		Where("org_id = ?", orgID).
+		Exec(ctx)
+	if err != nil {
+		return err
+	}
+	rows, err := res.RowsAffected()
+	if err != nil {
+		return err
+	}
+	// Defends against the race where a delete lands between the caller's
+	// pre-update GetV2 and this update.
+	if rows == 0 {
+		return errors.Newf(errors.TypeNotFound, dashboardtypes.ErrCodeDashboardNotFound, "dashboard with id %s doesn't exist", id)
+	}
+	return nil
+}
+
+func (store *store) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, locked bool, updatedBy string) error {
+	res, err := store.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewUpdate().
+		Model((*dashboardtypes.StorableDashboard)(nil)).
+		Set("locked = ?", locked).
+		Set("updated_by = ?", updatedBy).
+		Set("updated_at = ?", time.Now()).
+		Where("id = ?", id).
+		Exec(ctx)
+	if err != nil {
+		return err
+	}
+	rows, err := res.RowsAffected()
+	if err != nil {
+		return err
+	}
+	if rows == 0 {
+		return errors.Newf(errors.TypeNotFound, dashboardtypes.ErrCodeDashboardNotFound, "dashboard with id %s doesn't exist", id)
+	}
+	return nil
+}
+
 func (store *store) GetPublic(ctx context.Context, dashboardID string) (*dashboardtypes.StorablePublicDashboard, error) {
 	storable := new(dashboardtypes.StorablePublicDashboard)
 	err := store.
@@ -217,3 +416,51 @@ func (store *store) RunInTx(ctx context.Context, cb func(ctx context.Context) er
 		return cb(ctx)
 	})
 }
+
+// PinForUser combines the count check, the existence check, and the upsert in
+// a single statement so the limit gate and the insert can't drift between two
+// round-trips.
+//
+//	pin exists? | count < 10? | WHERE passes?           | effect                            | rows
+//	------------|-------------|-------------------------|-----------------------------------|-----
+//	no          | yes         | yes (count branch)      | INSERT new row                    | 1
+//	no          | no          | no                      | nothing (limit hit)               | 0
+//	yes         | yes         | yes (count branch)      | INSERT → conflict → no-op UPDATE  | 1
+//	yes         | no          | yes (EXISTS OR branch)  | INSERT → conflict → no-op UPDATE  | 1
+//
+// rows = 0 is the only signal of a real limit hit.
+func (store *store) PinForUser(ctx context.Context, pd *dashboardtypes.PinnedDashboard) error {
+	res, err := store.sqlstore.BunDBCtx(ctx).NewRaw(`
+		INSERT INTO pinned_dashboard (user_id, dashboard_id, org_id, pinned_at)
+		SELECT ?, ?, ?, ?
+		WHERE (SELECT COUNT(*) FROM pinned_dashboard WHERE user_id = ?) < ?
+		   OR EXISTS (SELECT 1 FROM pinned_dashboard WHERE user_id = ? AND dashboard_id = ?)
+		ON CONFLICT (user_id, dashboard_id) DO UPDATE SET user_id = EXCLUDED.user_id
+	`,
+		pd.UserID, pd.DashboardID, pd.OrgID, pd.PinnedAt,
+		pd.UserID, dashboardtypes.MaxPinnedDashboardsPerUser,
+		pd.UserID, pd.DashboardID,
+	).Exec(ctx)
+	if err != nil {
+		return err
+	}
+	rows, err := res.RowsAffected()
+	if err != nil {
+		return err
+	}
+	if rows == 0 {
+		return errors.Newf(errors.TypeAlreadyExists, dashboardtypes.ErrCodePinnedDashboardLimitHit,
+			"cannot pin more than %d dashboards", dashboardtypes.MaxPinnedDashboardsPerUser)
+	}
+	return nil
+}
+
+func (store *store) UnpinForUser(ctx context.Context, userID valuer.UUID, dashboardID valuer.UUID) error {
+	_, err := store.sqlstore.BunDBCtx(ctx).
+		NewDelete().
+		Model((*dashboardtypes.PinnedDashboard)(nil)).
+		Where("user_id = ?", userID).
+		Where("dashboard_id = ?", dashboardID).
+		Exec(ctx)
+	return err
+}

pkg/modules/dashboard/impldashboard/v2_handler.go

@@ -0,0 +1,442 @@
+package impldashboard
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/binding"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/gorilla/mux"
+)
+
+func (handler *handler) CreateV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.PostableDashboardV2{}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.CreateV2(ctx, orgID, claims.Email, valuer.MustNewUUID(claims.IdentityID()), req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusCreated, dashboardtypes.NewGettableDashboardV2FromDashboardV2(dashboard))
+}
+
+func (handler *handler) ListV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	userID, err := valuer.NewUUID(claims.IdentityID())
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	params := new(dashboardtypes.ListDashboardsV2Params)
+	if err := binding.Query.BindQuery(r.URL.Query(), params); err != nil {
+		render.Error(rw, err)
+		return
+	}
+	if err := params.Validate(); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	out, err := handler.module.ListV2(ctx, orgID, userID, params)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, out)
+}
+
+func (handler *handler) GetV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.GetV2(ctx, orgID, dashboardID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboardtypes.NewGettableDashboardV2FromDashboardV2(dashboard))
+}
+
+func (handler *handler) LockV2(rw http.ResponseWriter, r *http.Request) {
+	handler.lockUnlockV2(rw, r, true)
+}
+
+func (handler *handler) UnlockV2(rw http.ResponseWriter, r *http.Request) {
+	handler.lockUnlockV2(rw, r, false)
+}
+
+func (handler *handler) lockUnlockV2(rw http.ResponseWriter, r *http.Request, lock bool) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	isAdmin := false
+	selectors := []coretypes.Selector{
+		coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName),
+	}
+	err = handler.authz.CheckWithTupleCreation(
+		ctx,
+		claims,
+		valuer.MustNewUUID(claims.OrgID),
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		coretypes.NewResourceRole(),
+		selectors,
+		selectors,
+	)
+	if err == nil {
+		isAdmin = true
+	}
+
+	if err := handler.module.LockUnlockV2(ctx, orgID, dashboardID, claims.Email, isAdmin, lock); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (handler *handler) UpdateV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.UpdateableDashboardV2{}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.UpdateV2(ctx, orgID, dashboardID, claims.Email, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboardtypes.NewGettableDashboardV2FromDashboardV2(dashboard))
+}
+
+func (handler *handler) PatchV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.PatchableDashboardV2{}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.PatchV2(ctx, orgID, dashboardID, claims.Email, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboardtypes.NewGettableDashboardV2FromDashboardV2(dashboard))
+}
+
+func (handler *handler) DeleteV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if err := handler.module.DeleteV2(ctx, orgID, dashboardID); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (handler *handler) CreatePublicV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.PostablePublicDashboard{}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.CreatePublicV2(ctx, orgID, dashboardID, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboardtypes.NewGettableDashboardV2FromDashboardV2(dashboard))
+}
+
+func (handler *handler) PinV2(rw http.ResponseWriter, r *http.Request) {
+	handler.pinUnpinV2(rw, r, true)
+}
+
+func (handler *handler) UnpinV2(rw http.ResponseWriter, r *http.Request) {
+	handler.pinUnpinV2(rw, r, false)
+}
+
+func (handler *handler) pinUnpinV2(rw http.ResponseWriter, r *http.Request, pin bool) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	userID, err := valuer.NewUUID(claims.IdentityID())
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if pin {
+		err = handler.module.PinV2(ctx, orgID, userID, dashboardID)
+	} else {
+		err = handler.module.UnpinV2(ctx, userID, dashboardID)
+	}
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (handler *handler) UpdatePublicV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.UpdatablePublicDashboard{}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.UpdatePublicV2(ctx, orgID, dashboardID, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboardtypes.NewGettableDashboardV2FromDashboardV2(dashboard))
+}

pkg/modules/dashboard/impldashboard/v2_module.go

@@ -0,0 +1,210 @@
+package impldashboard
+
+import (
+	"context"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	if err := postable.Validate(); err != nil {
+		return nil, err
+	}
+
+	dashboard := dashboardtypes.NewDashboardV2(orgID, createdBy, postable, nil)
+	var storableDashboard *dashboardtypes.StorableDashboard
+
+	err := module.sqlstore.RunInTxCtx(ctx, nil, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, dashboard.ID, postable.Tags)
+		if err != nil {
+			return err
+		}
+		dashboard.Info.Tags = resolvedTags
+
+		storable, err := dashboard.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+		storableDashboard = storable
+		return module.store.Create(ctx, storable)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	module.analytics.TrackUser(ctx, orgID.String(), creator.String(), "Dashboard Created", dashboardtypes.NewStatsFromStorableDashboards([]*dashboardtypes.StorableDashboard{storableDashboard}))
+	return dashboard, nil
+}
+
+// ListV2 calls the store for the joined page (the store owns DSL compilation
+// and limit+1/hasMore detection), batch-fetches tags for the returned
+// dashboard ids, and hands off to the type-side constructor for assembly.
+func (module *module) ListV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, params *dashboardtypes.ListDashboardsV2Params) (*dashboardtypes.ListableDashboardV2, error) {
+	rows, hasMore, err := module.store.ListV2(ctx, orgID, userID, params)
+	if err != nil {
+		return nil, err
+	}
+
+	dashboardIDs := make([]valuer.UUID, len(rows))
+	for i, r := range rows {
+		dashboardIDs[i] = r.Dashboard.ID
+	}
+	tagsByDashboard, err := module.tagModule.ListForResources(ctx, orgID, coretypes.KindDashboard, dashboardIDs)
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboardtypes.NewListableDashboardV2(rows, tagsByDashboard, hasMore)
+}
+
+func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	storable, public, err := module.store.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+
+	tags, err := module.tagModule.ListForResource(ctx, orgID, coretypes.KindDashboard, id)
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboardtypes.NewDashboardV2FromStorable(storable, public, tags)
+}
+
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updateable dashboardtypes.UpdateableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	if err := updateable.Validate(); err != nil {
+		return nil, err
+	}
+
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
+	if err := existing.CanUpdate(); err != nil {
+		return nil, err
+	}
+
+	err = module.sqlstore.RunInTxCtx(ctx, nil, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updateable.Tags)
+		if err != nil {
+			return err
+		}
+
+		err = existing.Update(updateable, updatedBy, resolvedTags)
+		if err != nil {
+			return err
+		}
+
+		storable, err := existing.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+
+		return module.store.UpdateV2(ctx, orgID, id, updatedBy, storable.Data)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return existing, nil
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
+	if err := existing.CanUpdate(); err != nil {
+		return nil, err
+	}
+
+	updateable, err := patch.Apply(existing)
+	if err != nil {
+		return nil, err
+	}
+
+	err = module.sqlstore.RunInTxCtx(ctx, nil, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updateable.Tags)
+		if err != nil {
+			return err
+		}
+
+		err = existing.Update(*updateable, updatedBy, resolvedTags)
+		if err != nil {
+			return err
+		}
+
+		storable, err := existing.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+
+		return module.store.UpdateV2(ctx, orgID, id, updatedBy, storable.Data)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return existing, nil
+}
+
+func (module *module) DeleteV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+	if existing.Locked {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot delete a locked dashboard, please unlock the dashboard to delete")
+	}
+
+	return module.sqlstore.RunInTxCtx(ctx, nil, func(ctx context.Context) error {
+		// Syncing to an empty tag set drops every tag link for the dashboard.
+		if _, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, nil); err != nil {
+			return err
+		}
+		return module.store.Delete(ctx, orgID, id)
+	})
+}
+
+// CreatePublicV2 is not supported in the community build.
+func (module *module) CreatePublicV2(_ context.Context, _ valuer.UUID, _ valuer.UUID, _ dashboardtypes.PostablePublicDashboard) (*dashboardtypes.DashboardV2, error) {
+	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
+}
+
+// UpdatePublicV2 is not supported in the community build.
+func (module *module) UpdatePublicV2(_ context.Context, _ valuer.UUID, _ valuer.UUID, _ dashboardtypes.UpdatablePublicDashboard) (*dashboardtypes.DashboardV2, error) {
+	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+	if err := existing.LockUnlock(lock, isAdmin, updatedBy); err != nil {
+		return err
+	}
+	return module.store.LockUnlockV2(ctx, orgID, id, lock, updatedBy)
+}
+
+func (module *module) PinV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, id valuer.UUID) error {
+	if _, err := module.GetV2(ctx, orgID, id); err != nil {
+		return err
+	}
+	return module.store.PinForUser(ctx, &dashboardtypes.PinnedDashboard{
+		UserID:      userID,
+		DashboardID: id,
+		OrgID:       orgID,
+		PinnedAt:    time.Now(),
+	})
+}
+
+func (module *module) UnpinV2(ctx context.Context, userID valuer.UUID, id valuer.UUID) error {
+	return module.store.UnpinForUser(ctx, userID, id)
+}

pkg/modules/tag/impltag/module.go

@@ -0,0 +1,76 @@
+package impltag
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/modules/tag"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type module struct {
+	store tagtypes.Store
+}
+
+func NewModule(store tagtypes.Store) tag.Module {
+	return &module{store: store}
+}
+
+func (m *module) SyncTags(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID, postable []tagtypes.PostableTag) ([]*tagtypes.Tag, error) {
+	var tags []*tagtypes.Tag
+	err := m.store.RunInTx(ctx, func(ctx context.Context) error {
+		resolved, err := m.createMany(ctx, orgID, kind, postable)
+		if err != nil {
+			return err
+		}
+		tagIDs := make([]valuer.UUID, len(resolved))
+		for i, t := range resolved {
+			tagIDs[i] = t.ID
+		}
+		if err := m.syncLinksForResource(ctx, orgID, kind, resourceID, tagIDs); err != nil {
+			return err
+		}
+		tags = resolved
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+	return tags, nil
+}
+
+func (m *module) createMany(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, postable []tagtypes.PostableTag) ([]*tagtypes.Tag, error) {
+	if len(postable) == 0 {
+		return []*tagtypes.Tag{}, nil
+	}
+
+	toCreate, matched, err := m.resolve(ctx, orgID, kind, postable)
+	if err != nil {
+		return nil, err
+	}
+
+	created, err := m.store.CreateOrGet(ctx, toCreate)
+	if err != nil {
+		return nil, err
+	}
+
+	return append(matched, created...), nil
+}
+
+func (m *module) syncLinksForResource(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID, tagIDs []valuer.UUID) error {
+	return m.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := m.store.CreateRelations(ctx, tagtypes.NewTagRelations(kind, resourceID, tagIDs)); err != nil {
+			return err
+		}
+		return m.store.DeleteRelationsExcept(ctx, orgID, kind, resourceID, tagIDs)
+	})
+}
+
+func (m *module) ListForResource(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID) ([]*tagtypes.Tag, error) {
+	return m.store.ListByResource(ctx, orgID, kind, resourceID)
+}
+
+func (m *module) ListForResources(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceIDs []valuer.UUID) (map[valuer.UUID][]*tagtypes.Tag, error) {
+	return m.store.ListByResources(ctx, orgID, kind, resourceIDs)
+}

pkg/modules/tag/impltag/resolve.go

@@ -0,0 +1,59 @@
+package impltag
+
+import (
+	"context"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// resolve canonicalizes a batch of user-supplied (key, value) tag pairs against
+// the existing tags for an org. Lookup is case-insensitive on both key and
+// value (matching the storage uniqueness rule); when an existing row matches,
+// its display casing is reused. Inputs are deduped on (LOWER(key), LOWER(value));
+// the first input's casing wins on collisions. Returns:
+//   - toCreate: new Tag rows the caller should insert (with pre-generated IDs)
+//   - matched: existing rows the caller's input already pointed to. They
+//     already carry authoritative IDs from the store.
+func (m *module) resolve(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, postable []tagtypes.PostableTag) ([]*tagtypes.Tag, []*tagtypes.Tag, error) {
+	if len(postable) == 0 {
+		return nil, nil, nil
+	}
+
+	existing, err := m.store.List(ctx, orgID, kind)
+	if err != nil {
+		return nil, nil, err
+	}
+
+	lowercaseTagsMap := make(map[string]*tagtypes.Tag, len(existing))
+	for _, t := range existing {
+		mapKey := strings.ToLower(t.Key) + "\x00" + strings.ToLower(t.Value)
+		lowercaseTagsMap[mapKey] = t
+	}
+
+	seenInRequestAlready := make(map[string]struct{}, len(postable)) // postable can have the same tag multiple times
+	toCreate := make([]*tagtypes.Tag, 0)
+	matched := make([]*tagtypes.Tag, 0)
+
+	for _, p := range postable {
+		key, value, err := tagtypes.ValidatePostableTag(p)
+		if err != nil {
+			return nil, nil, err
+		}
+		lookup := strings.ToLower(key) + "\x00" + strings.ToLower(value)
+		if _, dup := seenInRequestAlready[lookup]; dup {
+			continue
+		}
+		seenInRequestAlready[lookup] = struct{}{}
+
+		if existingTag, ok := lowercaseTagsMap[lookup]; ok {
+			matched = append(matched, existingTag)
+			continue
+		}
+		toCreate = append(toCreate, tagtypes.NewTag(orgID, kind, key, value))
+	}
+
+	return toCreate, matched, nil
+}

pkg/modules/tag/impltag/resolve_test.go

@@ -0,0 +1,112 @@
+package impltag
+
+import (
+	"context"
+	"strings"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes/tagtypestest"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+var testKind = coretypes.KindDashboard
+
+func TestModule_Resolve(t *testing.T) {
+	t.Run("empty input does not hit store", func(t *testing.T) {
+		store := tagtypestest.NewStore()
+		m := &module{store: store}
+
+		toCreate, matched, err := m.resolve(context.Background(), valuer.GenerateUUID(), testKind, nil)
+		require.NoError(t, err)
+		assert.Empty(t, toCreate)
+		assert.Empty(t, matched)
+		assert.Zero(t, store.ListCallCount, "should not hit store when input is empty")
+	})
+
+	t.Run("creates missing pairs and reuses existing", func(t *testing.T) {
+		orgID := valuer.GenerateUUID()
+		dbTag := tagtypes.NewTag(orgID, testKind, "team", "Pulse")
+		dbTag2 := tagtypes.NewTag(orgID, testKind, "Database", "redis")
+		store := tagtypestest.NewStore()
+		store.Tags = []*tagtypes.Tag{dbTag, dbTag2}
+		m := &module{store: store}
+
+		toCreate, matched, err := m.resolve(context.Background(), orgID, testKind, []tagtypes.PostableTag{
+			{Key: "team", Value: "events"},    // new
+			{Key: "DATABASE", Value: "REDIS"}, // case-only conflict
+			{Key: "Brand", Value: "New"},      // new
+		})
+		require.NoError(t, err)
+
+		createdLowerKVs := []string{}
+		for _, tg := range toCreate {
+			createdLowerKVs = append(createdLowerKVs, strings.ToLower(tg.Key)+"\x00"+strings.ToLower(tg.Value))
+		}
+		assert.ElementsMatch(t, []string{"team\x00events", "brand\x00new"}, createdLowerKVs,
+			"only the two missing pairs should be returned for insertion")
+
+		require.Len(t, matched, 1, "DATABASE:REDIS should hit the existing 'Database:redis' tag")
+		assert.Same(t, dbTag2, matched[0], "matched should return the existing pointer with its authoritative ID")
+	})
+
+	t.Run("dedupes inputs that map to the same lower(key)+lower(value)", func(t *testing.T) {
+		orgID := valuer.GenerateUUID()
+		store := tagtypestest.NewStore()
+		m := &module{store: store}
+
+		toCreate, matched, err := m.resolve(context.Background(), orgID, testKind, []tagtypes.PostableTag{
+			{Key: "Foo", Value: "Bar"},
+			{Key: "foo", Value: "bar"},
+			{Key: "FOO", Value: "BAR"},
+		})
+		require.NoError(t, err)
+
+		require.Empty(t, matched)
+		require.Len(t, toCreate, 1, "duplicate inputs must collapse into a single insert")
+		assert.Equal(t, "Foo", toCreate[0].Key, "first input's casing wins")
+		assert.Equal(t, "Bar", toCreate[0].Value, "first input's casing wins")
+	})
+
+	t.Run("preserves existing casing on case-only match", func(t *testing.T) {
+		orgID := valuer.GenerateUUID()
+		dbTag := tagtypes.NewTag(orgID, testKind, "Team", "Pulse")
+		store := tagtypestest.NewStore()
+		store.Tags = []*tagtypes.Tag{dbTag}
+		m := &module{store: store}
+
+		toCreate, matched, err := m.resolve(context.Background(), orgID, testKind, []tagtypes.PostableTag{
+			{Key: "team", Value: "PULSE"},
+		})
+		require.NoError(t, err)
+
+		assert.Empty(t, toCreate)
+		require.Len(t, matched, 1)
+		assert.Equal(t, "Team", matched[0].Key)
+		assert.Equal(t, "Pulse", matched[0].Value)
+	})
+
+	t.Run("propagates validation error from any input", func(t *testing.T) {
+		store := tagtypestest.NewStore()
+		m := &module{store: store}
+
+		_, _, err := m.resolve(context.Background(), valuer.GenerateUUID(), testKind, []tagtypes.PostableTag{
+			{Key: "team", Value: "pulse"},
+			{Key: "", Value: "x"},
+		})
+		require.Error(t, err)
+	})
+
+	t.Run("propagates regex validation error", func(t *testing.T) {
+		store := tagtypestest.NewStore()
+		m := &module{store: store}
+
+		_, _, err := m.resolve(context.Background(), valuer.GenerateUUID(), testKind, []tagtypes.PostableTag{
+			{Key: "team!eng", Value: "pulse"},
+		})
+		require.Error(t, err)
+	})
+}

pkg/modules/tag/impltag/store.go

@@ -0,0 +1,148 @@
+package impltag
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+)
+
+type store struct {
+	sqlstore sqlstore.SQLStore
+}
+
+func NewStore(sqlstore sqlstore.SQLStore) tagtypes.Store {
+	return &store{sqlstore: sqlstore}
+}
+
+func (s *store) List(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind) ([]*tagtypes.Tag, error) {
+	tags := make([]*tagtypes.Tag, 0)
+	err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(&tags).
+		Where("org_id = ?", orgID).
+		Where("kind = ?", kind).
+		Scan(ctx)
+	if err != nil {
+		return nil, err
+	}
+	return tags, nil
+}
+
+func (s *store) ListByResource(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID) ([]*tagtypes.Tag, error) {
+	tags := make([]*tagtypes.Tag, 0)
+	err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(&tags).
+		Join("JOIN tag_relation AS tr ON tr.tag_id = tag.id").
+		Where("tr.kind = ?", kind).
+		Where("tr.resource_id = ?", resourceID).
+		Where("tag.org_id = ?", orgID).
+		Scan(ctx)
+	if err != nil {
+		return nil, err
+	}
+	return tags, nil
+}
+
+func (s *store) ListByResources(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceIDs []valuer.UUID) (map[valuer.UUID][]*tagtypes.Tag, error) {
+	if len(resourceIDs) == 0 {
+		return map[valuer.UUID][]*tagtypes.Tag{}, nil
+	}
+
+	type joinedRow struct {
+		tagtypes.Tag `bun:",extend"`
+		ResourceID   valuer.UUID `bun:"resource_id"`
+	}
+
+	rows := make([]*joinedRow, 0)
+	err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(&rows).
+		ColumnExpr("tag.*, tr.resource_id").
+		Join("JOIN tag_relation AS tr ON tr.tag_id = tag.id").
+		Where("tr.kind = ?", kind).
+		Where("tr.resource_id IN (?)", bun.In(resourceIDs)).
+		Where("tag.org_id = ?", orgID).
+		Scan(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	out := make(map[valuer.UUID][]*tagtypes.Tag)
+	for _, r := range rows {
+		tag := r.Tag
+		out[r.ResourceID] = append(out[r.ResourceID], &tag)
+	}
+	return out, nil
+}
+
+func (s *store) CreateOrGet(ctx context.Context, tags []*tagtypes.Tag) ([]*tagtypes.Tag, error) {
+	if len(tags) == 0 {
+		return tags, nil
+	}
+	// DO UPDATE on a self-set is a deliberate no-op write whose only purpose
+	// is to make RETURNING fire on conflicting rows. Without it, RETURNING is
+	// silent on the conflict path and we'd have to refetch by (key, value) to
+	// learn the existing rows' IDs after a concurrent-insert race. Setting
+	// key = tag.key (the existing row's value) preserves the first writer's
+	// casing on case-only collisions.
+	err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewInsert().
+		Model(&tags).
+		On("CONFLICT (org_id, kind, (LOWER(key)), (LOWER(value))) DO UPDATE").
+		Set("key = tag.key").
+		Returning("*").
+		Scan(ctx)
+	if err != nil {
+		return nil, err
+	}
+	return tags, nil
+}
+
+func (s *store) CreateRelations(ctx context.Context, relations []*tagtypes.TagRelation) error {
+	if len(relations) == 0 {
+		return nil
+	}
+	_, err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewInsert().
+		Model(&relations).
+		On("CONFLICT (kind, resource_id, tag_id) DO NOTHING").
+		Exec(ctx)
+	return err
+}
+
+func (s *store) DeleteRelationsExcept(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID, keepTagIDs []valuer.UUID) error {
+	// Scope the delete to the caller's org via a subquery on tag — bun's
+	// DELETE-with-JOIN syntax isn't uniformly portable across Postgres/SQLite.
+	tagIDsToDelete := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		TableExpr("tag").
+		Column("id").
+		Where("org_id = ?", orgID)
+	if len(keepTagIDs) > 0 {
+		tagIDsToDelete = tagIDsToDelete.Where("id NOT IN (?)", bun.In(keepTagIDs))
+	}
+	_, err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewDelete().
+		Model((*tagtypes.TagRelation)(nil)).
+		Where("kind = ?", kind).
+		Where("resource_id = ?", resourceID).
+		Where("tag_id IN (?)", tagIDsToDelete).
+		Exec(ctx)
+	return err
+}
+
+func (s *store) RunInTx(ctx context.Context, cb func(ctx context.Context) error) error {
+	return s.sqlstore.RunInTxCtx(ctx, nil, cb)
+}

pkg/modules/tag/impltag/store_test.go

@@ -0,0 +1,147 @@
+package impltag
+
+import (
+	"context"
+	"path/filepath"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/factory/factorytest"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlitesqlstore"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	"github.com/uptrace/bun"
+)
+
+func newTestStore(t *testing.T) sqlstore.SQLStore {
+	t.Helper()
+	dbPath := filepath.Join(t.TempDir(), "test.db")
+	store, err := sqlitesqlstore.New(context.Background(), factorytest.NewSettings(), sqlstore.Config{
+		Provider: "sqlite",
+		Connection: sqlstore.ConnectionConfig{
+			MaxOpenConns:    1,
+			MaxConnLifetime: 0,
+		},
+		Sqlite: sqlstore.SqliteConfig{
+			Path:            dbPath,
+			Mode:            "wal",
+			BusyTimeout:     5 * time.Second,
+			TransactionMode: "deferred",
+		},
+	})
+	require.NoError(t, err)
+
+	_, err = store.BunDB().NewCreateTable().
+		Model((*tagtypes.Tag)(nil)).
+		IfNotExists().
+		Exec(context.Background())
+	require.NoError(t, err)
+
+	_, err = store.BunDB().Exec(`CREATE UNIQUE INDEX IF NOT EXISTS uq_tag_org_kind_lower_key_lower_value ON tag (org_id, kind, LOWER(key), LOWER(value))`)
+	require.NoError(t, err)
+	return store
+}
+
+var dashboardKind = coretypes.KindDashboard
+
+func tagsByLowerKeyValue(t *testing.T, db *bun.DB) map[string]*tagtypes.Tag {
+	t.Helper()
+	all := make([]*tagtypes.Tag, 0)
+	require.NoError(t, db.NewSelect().Model(&all).Scan(context.Background()))
+	out := map[string]*tagtypes.Tag{}
+	for _, tag := range all {
+		out[strings.ToLower(tag.Key)+"\x00"+strings.ToLower(tag.Value)] = tag
+	}
+	return out
+}
+
+func TestStore_Create_PopulatesIDsOnFreshInsert(t *testing.T) {
+	ctx := context.Background()
+	sqlstore := newTestStore(t)
+	s := NewStore(sqlstore)
+
+	orgID := valuer.GenerateUUID()
+	tagA := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
+	tagB := tagtypes.NewTag(orgID, dashboardKind, "team", "BLR")
+	preIDA := tagA.ID
+	preIDB := tagB.ID
+
+	got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{tagA, tagB})
+	require.NoError(t, err)
+	require.Len(t, got, 2)
+
+	// No race → pre-generated IDs stand. The slice is what we passed in,
+	// confirming Scan didn't reallocate.
+	assert.Equal(t, preIDA, got[0].ID)
+	assert.Equal(t, preIDB, got[1].ID)
+
+	// And the rows are in the DB.
+	stored := tagsByLowerKeyValue(t, sqlstore.BunDB())
+	require.Contains(t, stored, "tag\x00database")
+	require.Contains(t, stored, "team\x00blr")
+	assert.Equal(t, preIDA, stored["tag\x00database"].ID)
+	assert.Equal(t, preIDB, stored["team\x00blr"].ID)
+}
+
+func TestStore_Create_ConflictReturnsExistingRowID(t *testing.T) {
+	ctx := context.Background()
+	sqlstore := newTestStore(t)
+	s := NewStore(sqlstore)
+
+	orgID := valuer.GenerateUUID()
+
+	// Simulate a concurrent insert: someone else has already inserted "tag:Database".
+	winner := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
+	_, err := s.CreateOrGet(ctx, []*tagtypes.Tag{winner})
+	require.NoError(t, err)
+	winnerID := winner.ID
+
+	// Now our request runs with a different pre-generated ID for the same
+	// (key, value) — case differs but the functional unique index collapses
+	// them. RETURNING should overwrite our stale ID with winner's ID.
+	loser := tagtypes.NewTag(orgID, dashboardKind, "TAG", "DATABASE")
+	loserPreID := loser.ID
+	require.NotEqual(t, winnerID, loserPreID, "pre-generated IDs must differ for this test to be meaningful")
+
+	got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{loser})
+	require.NoError(t, err)
+	require.Len(t, got, 1)
+
+	assert.Equal(t, winnerID, got[0].ID, "returned slice should carry the existing row's ID, not our stale one")
+	assert.Equal(t, winnerID, loser.ID, "input slice element is mutated in place")
+
+	// And the DB still has exactly one row for that (lower(key), lower(value)) — winner's, with winner's casing.
+	stored := tagsByLowerKeyValue(t, sqlstore.BunDB())
+	require.Len(t, stored, 1)
+	assert.Equal(t, winnerID, stored["tag\x00database"].ID)
+	assert.Equal(t, "tag", stored["tag\x00database"].Key, "winner's casing preserved in key")
+	assert.Equal(t, "Database", stored["tag\x00database"].Value, "winner's casing preserved in value")
+}
+
+func TestStore_Create_MixedFreshAndConflict(t *testing.T) {
+	ctx := context.Background()
+	sqlstore := newTestStore(t)
+	s := NewStore(sqlstore)
+
+	orgID := valuer.GenerateUUID()
+	pre := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
+	_, err := s.CreateOrGet(ctx, []*tagtypes.Tag{pre})
+	require.NoError(t, err)
+	preExistingID := pre.ID
+
+	conflict := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
+	fresh := tagtypes.NewTag(orgID, dashboardKind, "team", "BLR")
+	freshPreID := fresh.ID
+
+	got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{conflict, fresh})
+	require.NoError(t, err)
+	require.Len(t, got, 2)
+
+	assert.Equal(t, preExistingID, got[0].ID, "conflicting row's ID overwritten with the existing row's")
+	assert.Equal(t, freshPreID, got[1].ID, "fresh row's pre-generated ID is preserved")
+}

pkg/modules/tag/tag.go

@@ -0,0 +1,20 @@
+package tag
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Module interface {
+	// SyncTags resolves the given postable tags (creating new rows as needed)
+	// and reconciles the resource's links to exactly that set, all in one transaction.
+	SyncTags(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID, postable []tagtypes.PostableTag) ([]*tagtypes.Tag, error)
+
+	ListForResource(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID) ([]*tagtypes.Tag, error)
+
+	// Resources with no tags are absent from the returned map.
+	ListForResources(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceIDs []valuer.UUID) (map[valuer.UUID][]*tagtypes.Tag, error)
+}

pkg/parser/filterquery/parse.go

@@ -0,0 +1,33 @@
+package filterquery
+
+import (
+	"fmt"
+
+	grammar "github.com/SigNoz/signoz/pkg/parser/filterquery/grammar"
+	"github.com/antlr4-go/antlr/v4"
+)
+
+func Parse(query string) (antlr.ParseTree, *antlr.CommonTokenStream, *ErrorCollector) {
+	collector := NewErrorCollector()
+	lexer := grammar.NewFilterQueryLexer(antlr.NewInputStream(query))
+	lexer.RemoveErrorListeners()
+	lexer.AddErrorListener(collector)
+	tokens := antlr.NewCommonTokenStream(lexer, 0)
+	parser := grammar.NewFilterQueryParser(tokens)
+	parser.RemoveErrorListeners()
+	parser.AddErrorListener(collector)
+	return parser.Query(), tokens, collector
+}
+
+type ErrorCollector struct {
+	*antlr.DefaultErrorListener
+	Errors []string
+}
+
+func NewErrorCollector() *ErrorCollector {
+	return &ErrorCollector{}
+}
+
+func (c *ErrorCollector) SyntaxError(_ antlr.Recognizer, _ any, line, column int, msg string, _ antlr.RecognitionException) {
+	c.Errors = append(c.Errors, fmt.Sprintf("syntax error at %d:%d — %s", line, column, msg))
+}

pkg/signoz/handler_test.go

@@ -17,6 +17,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/retention/implretention"
+	"github.com/SigNoz/signoz/pkg/modules/tag/impltag"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
@@ -45,7 +46,8 @@ func TestNewHandlers(t *testing.T) {
 	emailing := emailingtest.New()
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
-	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
+	tagModule := impltag.NewModule(impltag.NewStore(sqlstore))
+	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), sqlstore, providerSettings, nil, orgGetter, queryParser, tagModule)
 
 	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
 	require.NoError(t, err)
@@ -53,8 +55,9 @@ func TestNewHandlers(t *testing.T) {
 	userRoleStore := impluser.NewUserRoleStore(sqlstore, providerSettings)
 
 	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), userRoleStore, flagger)
+
 	retentionGetter := implretention.NewGetter(implretention.NewStore(sqlstore))
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter, userRoleStore, nil, nil, retentionGetter, flagger)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter, userRoleStore, nil, nil, retentionGetter, flagger, tagModule)
 
 	querierHandler := querier.NewHandler(providerSettings, nil, nil)
 	registryHandler := factory.NewHandler(nil)

pkg/signoz/module.go

@@ -45,6 +45,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/spanmapper/implspanmapper"
 	"github.com/SigNoz/signoz/pkg/modules/spanpercentile"
 	"github.com/SigNoz/signoz/pkg/modules/spanpercentile/implspanpercentile"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
 	"github.com/SigNoz/signoz/pkg/modules/tracedetail"
 	"github.com/SigNoz/signoz/pkg/modules/tracedetail/impltracedetail"
 	"github.com/SigNoz/signoz/pkg/modules/tracefunnel"
@@ -88,6 +89,7 @@ type Modules struct {
 	TraceDetail      tracedetail.Module
 	SpanMapper       spanmapper.Module
 	LLMPricingRule   llmpricingrule.Module
+	Tag              tag.Module
 }
 
 func NewModules(
@@ -113,6 +115,7 @@ func NewModules(
 	cloudIntegrationModule cloudintegration.Module,
 	retentionGetter retention.Getter,
 	fl flagger.Flagger,
+	tagModule tag.Module,
 ) Modules {
 	quickfilter := implquickfilter.NewModule(implquickfilter.NewStore(sqlstore))
 	orgSetter := implorganization.NewSetter(implorganization.NewStore(sqlstore), alertmanager, quickfilter)
@@ -145,5 +148,6 @@ func NewModules(
 		TraceDetail:      impltracedetail.NewModule(impltracedetail.NewTraceStore(telemetryStore), providerSettings, config.TraceDetail),
 		SpanMapper:       implspanmapper.NewModule(implspanmapper.NewStore(sqlstore)),
 		LLMPricingRule:   impllmpricingrule.NewModule(impllmpricingrule.NewStore(sqlstore)),
+		Tag:              tagModule,
 	}
 }

pkg/signoz/module_test.go

@@ -19,6 +19,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/retention/implretention"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount/implserviceaccount"
+	"github.com/SigNoz/signoz/pkg/modules/tag/impltag"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
@@ -46,7 +47,8 @@ func TestNewModules(t *testing.T) {
 	emailing := emailingtest.New()
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
-	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
+	tagModule := impltag.NewModule(impltag.NewStore(sqlstore))
+	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), sqlstore, providerSettings, nil, orgGetter, queryParser, tagModule)
 
 	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
 	require.NoError(t, err)
@@ -58,7 +60,8 @@ func TestNewModules(t *testing.T) {
 	serviceAccount := implserviceaccount.NewModule(implserviceaccount.NewStore(sqlstore), nil, nil, nil, providerSettings, serviceaccount.Config{})
 
 	retentionGetter := implretention.NewGetter(implretention.NewStore(sqlstore))
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter, userRoleStore, serviceAccount, implcloudintegration.NewModule(), retentionGetter, flagger)
+
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter, userRoleStore, serviceAccount, implcloudintegration.NewModule(), retentionGetter, flagger, tagModule)
 
 	reflectVal := reflect.ValueOf(modules)
 	for i := 0; i < reflectVal.NumField(); i++ {

pkg/signoz/provider.go

@@ -200,6 +200,8 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddServiceAccountManagedRoleTransactionsFactory(sqlstore),
 		sqlmigration.NewAddSpanMapperFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddLLMPricingRulesFactory(sqlstore, sqlschema),
+		sqlmigration.NewAddTagsFactory(sqlstore, sqlschema),
+		sqlmigration.NewAddPinnedDashboardFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/signoz/signoz.go

@@ -32,6 +32,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount/implserviceaccount"
+	"github.com/SigNoz/signoz/pkg/modules/tag"
+	"github.com/SigNoz/signoz/pkg/modules/tag/impltag"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
@@ -105,7 +107,7 @@ func New(
 	telemetrystoreProviderFactories factory.NamedMap[factory.ProviderFactory[telemetrystore.TelemetryStore, telemetrystore.Config]],
 	authNsCallback func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error),
 	authzCallback func(context.Context, sqlstore.SQLStore, authz.Config, licensing.Licensing, []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error),
-	dashboardModuleCallback func(sqlstore.SQLStore, factory.ProviderSettings, analytics.Analytics, organization.Getter, queryparser.QueryParser, querier.Querier, licensing.Licensing) dashboard.Module,
+	dashboardModuleCallback func(sqlstore.SQLStore, factory.ProviderSettings, analytics.Analytics, organization.Getter, queryparser.QueryParser, querier.Querier, licensing.Licensing, tag.Module) dashboard.Module,
 	gatewayProviderFactory func(licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config],
 	auditorProviderFactories func(licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]],
 	meterReporterProviderFactories func(context.Context, factory.ProviderSettings, flagger.Flagger, licensing.Licensing, telemetrystore.TelemetryStore, retention.Getter, organization.Getter, zeus.Zeus) (factory.NamedMap[factory.ProviderFactory[meterreporter.Reporter, meterreporter.Config]], string),
@@ -332,8 +334,13 @@ func New(
 	// Initialize query parser (needed for dashboard module)
 	queryParser := queryparser.New(providerSettings)
 
-	// Initialize dashboard module
-	dashboard := dashboardModuleCallback(sqlstore, providerSettings, analytics, orgGetter, queryParser, querier, licensing)
+	// Initialize tag module — shared across modules that link entities to tags
+	// (currently dashboard; future: alerts, RBAC). Built once here and injected
+	// where needed.
+	tagModule := impltag.NewModule(impltag.NewStore(sqlstore))
+
+	// Initialize dashboard module (needed for authz registry)
+	dashboard := dashboardModuleCallback(sqlstore, providerSettings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
 
 	// Initialize user getter
 	userGetter := impluser.NewGetter(userStore, userRoleStore, flagger)
@@ -455,7 +462,7 @@ func New(
 	}
 
 	// Initialize all modules
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter, userRoleStore, serviceAccount, cloudIntegrationModule, retentionGetter, flagger)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter, userRoleStore, serviceAccount, cloudIntegrationModule, retentionGetter, flagger, tagModule)
 
 	// Initialize ruler from the variant-specific provider factories
 	rulerInstance, err := factory.NewProviderFromNamedMap(ctx, providerSettings, config.Ruler, rulerProviderFactories(cache, alertmanager, sqlstore, telemetrystore, telemetryMetadataStore, prometheus, orgGetter, modules.RuleStateHistory, querier, queryParser), "signoz")

pkg/sqlmigration/080_add_pinned_dashboard.go

@@ -0,0 +1,71 @@
+package sqlmigration
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addPinnedDashboard struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewAddPinnedDashboardFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(factory.MustNewName("add_pinned_dashboard"), func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+		return &addPinnedDashboard{
+			sqlstore:  sqlstore,
+			sqlschema: sqlschema,
+		}, nil
+	})
+}
+
+func (migration *addPinnedDashboard) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+func (migration *addPinnedDashboard) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+	defer func() { _ = tx.Rollback() }()
+
+	// Composite PK on (user_id, dashboard_id) prevents accidental double-pins
+	// for the same user/dashboard pair. Only org_id carries an FK — user_id and
+	// dashboard_id mirror tag_relations and skip FKs because cascade deletes
+	// are disabled at the platform level (see tags spec).
+	sqls := migration.sqlschema.Operator().CreateTable(&sqlschema.Table{
+		Name: "pinned_dashboard",
+		Columns: []*sqlschema.Column{
+			{Name: "user_id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "dashboard_id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "org_id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "pinned_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false, Default: "current_timestamp"},
+		},
+		PrimaryKeyConstraint: &sqlschema.PrimaryKeyConstraint{ColumnNames: []sqlschema.ColumnName{"user_id", "dashboard_id"}},
+		ForeignKeyConstraints: []*sqlschema.ForeignKeyConstraint{
+			{
+				ReferencingColumnName: sqlschema.ColumnName("org_id"),
+				ReferencedTableName:   sqlschema.TableName("organizations"),
+				ReferencedColumnName:  sqlschema.ColumnName("id"),
+			},
+		},
+	})
+
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addPinnedDashboard) Down(_ context.Context, _ *bun.DB) error {
+	return nil
+}

pkg/sqlmigration/081_add_tags.go

@@ -0,0 +1,114 @@
+package sqlmigration
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addTags struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewAddTagsFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(factory.MustNewName("add_tags"), func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+		return &addTags{
+			sqlstore:  sqlstore,
+			sqlschema: sqlschema,
+		}, nil
+	})
+}
+
+func (migration *addTags) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+func (migration *addTags) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	sqls := [][]byte{}
+
+	tagTableSQLs := migration.sqlschema.Operator().CreateTable(&sqlschema.Table{
+		Name: "tag",
+		Columns: []*sqlschema.Column{
+			{Name: "id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "key", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "value", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "org_id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "kind", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "created_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false},
+			{Name: "updated_at", DataType: sqlschema.DataTypeTimestamp, Nullable: false},
+		},
+		PrimaryKeyConstraint: &sqlschema.PrimaryKeyConstraint{ColumnNames: []sqlschema.ColumnName{"id"}},
+		ForeignKeyConstraints: []*sqlschema.ForeignKeyConstraint{
+			{
+				ReferencingColumnName: sqlschema.ColumnName("org_id"),
+				ReferencedTableName:   sqlschema.TableName("organizations"),
+				ReferencedColumnName:  sqlschema.ColumnName("id"),
+			},
+		},
+	})
+	sqls = append(sqls, tagTableSQLs...)
+
+	// Case-insensitive uniqueness on (org_id, kind, key, value) — both Postgres
+	// and SQLite (modernc 3.50.x) support expression indexes.
+	tagUniqueIndexSQLs := migration.sqlschema.Operator().CreateIndex(
+		(&sqlschema.UniqueIndex{
+			TableName:   "tag",
+			ColumnNames: []sqlschema.ColumnName{"org_id", "kind", "key", "value"},
+			Expressions: []string{"org_id", "kind", "LOWER(key)", "LOWER(value)"},
+		}).Named("uq_tag_org_kind_lower_key_lower_value"),
+	)
+	sqls = append(sqls, tagUniqueIndexSQLs...)
+
+	tagRelationsTableSQLs := migration.sqlschema.Operator().CreateTable(&sqlschema.Table{
+		Name: "tag_relation",
+		Columns: []*sqlschema.Column{
+			{Name: "id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "kind", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "resource_id", DataType: sqlschema.DataTypeText, Nullable: false},
+			{Name: "tag_id", DataType: sqlschema.DataTypeText, Nullable: false},
+		},
+		PrimaryKeyConstraint: &sqlschema.PrimaryKeyConstraint{ColumnNames: []sqlschema.ColumnName{"id"}},
+		ForeignKeyConstraints: []*sqlschema.ForeignKeyConstraint{
+			{
+				ReferencingColumnName: sqlschema.ColumnName("tag_id"),
+				ReferencedTableName:   sqlschema.TableName("tag"),
+				ReferencedColumnName:  sqlschema.ColumnName("id"),
+			},
+		},
+	})
+	sqls = append(sqls, tagRelationsTableSQLs...)
+
+	tagRelationUniqueIndexSQLs := migration.sqlschema.Operator().CreateIndex(
+		&sqlschema.UniqueIndex{
+			TableName:   "tag_relation",
+			ColumnNames: []sqlschema.ColumnName{"kind", "resource_id", "tag_id"},
+		},
+	)
+	sqls = append(sqls, tagRelationUniqueIndexSQLs...)
+
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addTags) Down(_ context.Context, _ *bun.DB) error {
+	return nil
+}

pkg/sqlschema/index.go

@@ -1,6 +1,8 @@
 package sqlschema
 
 import (
+	"fmt"
+	"hash/fnv"
 	"slices"
 	"strings"
 
@@ -49,9 +51,23 @@ type Index interface {
 	ToDropSQL(fmter SQLFormatter) []byte
 }
 
+// UniqueIndex models a unique index on a table.
+//
+// In the common case the index keys on plain columns: set only ColumnNames and
+// the SQL is emitted with each column identifier-quoted by the formatter
+// (`CREATE UNIQUE INDEX uq_t_a_b ON t (a, b)`).
+//
+// For functional indexes (e.g. case-insensitive uniqueness on `LOWER(col)`),
+// set Expressions to the raw SQL parts and use ColumnNames as metadata for
+// "which columns does this index touch". When Expressions is non-empty, it
+// overrides ColumnNames for SQL emission — each entry is written verbatim, so
+// the caller owns well-formedness — and the auto-generated name uses a hash
+// suffix instead of a readable column join because expressions aren't valid
+// identifier fragments.
 type UniqueIndex struct {
 	TableName   TableName
 	ColumnNames []ColumnName
+	Expressions []string
 	name        string
 }
 
@@ -71,16 +87,28 @@ func (index *UniqueIndex) Name() string {
 		}
 		b.WriteString(string(column))
 	}
+
+	if len(index.Expressions) > 0 {
+		if len(index.ColumnNames) > 0 {
+			b.WriteString("_")
+		}
+		hasher := fnv.New32a()
+		_, _ = hasher.Write([]byte(strings.Join(index.Expressions, "\x00")))
+		fmt.Fprintf(&b, "%08x", hasher.Sum32())
+	}
 	return b.String()
 }
 
 func (index *UniqueIndex) Named(name string) Index {
 	copyOfColumnNames := make([]ColumnName, len(index.ColumnNames))
 	copy(copyOfColumnNames, index.ColumnNames)
+	copyOfExpressions := make([]string, len(index.Expressions))
+	copy(copyOfExpressions, index.Expressions)
 
 	return &UniqueIndex{
 		TableName:   index.TableName,
 		ColumnNames: copyOfColumnNames,
+		Expressions: copyOfExpressions,
 		name:        name,
 	}
 }
@@ -101,7 +129,18 @@ func (index *UniqueIndex) Equals(other Index) bool {
 	if other.Type() != IndexTypeUnique {
 		return false
 	}
-
+	otherUnique, ok := other.(*UniqueIndex)
+	if !ok {
+		return false
+	}
+	// Plain and functional indexes produce different SQL even if their column
+	// sets overlap; require both shapes to match.
+	if (len(index.Expressions) == 0) != (len(otherUnique.Expressions) == 0) {
+		return false
+	}
+	if len(index.Expressions) > 0 && !slices.Equal(index.Expressions, otherUnique.Expressions) {
+		return false
+	}
 	return index.Name() == other.Name() && slices.Equal(index.Columns(), other.Columns())
 }
 
@@ -114,12 +153,20 @@ func (index *UniqueIndex) ToCreateSQL(fmter SQLFormatter) []byte {
 	sql = fmter.AppendIdent(sql, string(index.TableName))
 	sql = append(sql, " ("...)
 
-	for i, column := range index.ColumnNames {
-		if i > 0 {
-			sql = append(sql, ", "...)
+	if len(index.Expressions) > 0 {
+		for i, expr := range index.Expressions {
+			if i > 0 {
+				sql = append(sql, ", "...)
+			}
+			sql = append(sql, expr...)
+		}
+	} else {
+		for i, column := range index.ColumnNames {
+			if i > 0 {
+				sql = append(sql, ", "...)
+			}
+			sql = fmter.AppendIdent(sql, string(column))
 		}
-
-		sql = fmter.AppendIdent(sql, string(column))
 	}
 
 	sql = append(sql, ")"...)

pkg/sqlschema/index_test.go

@@ -38,6 +38,43 @@ func TestIndexToCreateSQL(t *testing.T) {
 			},
 			sql: `CREATE UNIQUE INDEX IF NOT EXISTS "my_index" ON "users" ("id", "name", "email")`,
 		},
+		{
+			name: "Unique_Functional_SingleExpression",
+			index: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+				Expressions: []string{"LOWER(email)"},
+			},
+			sql: `CREATE UNIQUE INDEX IF NOT EXISTS "uq_users_email_1e5a87f1" ON "users" (LOWER(email))`,
+		},
+		{
+			name: "Unique_Functional_MixedColumnsAndExpressions",
+			index: &UniqueIndex{
+				TableName:   "tag",
+				ColumnNames: []ColumnName{"org_id", "kind", "key", "value"},
+				Expressions: []string{"org_id", "kind", "LOWER(key)", "LOWER(value)"},
+			},
+			sql: `CREATE UNIQUE INDEX IF NOT EXISTS "uq_tag_org_id_kind_key_value_57e8f81f" ON "tag" (org_id, kind, LOWER(key), LOWER(value))`,
+		},
+		{
+			name: "Unique_Functional_ComplexExpression",
+			index: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"first_name", "last_name"},
+				Expressions: []string{"LOWER(TRIM(first_name) || ' ' || TRIM(last_name))"},
+			},
+			sql: `CREATE UNIQUE INDEX IF NOT EXISTS "uq_users_first_name_last_name_adb1ff53" ON "users" (LOWER(TRIM(first_name) || ' ' || TRIM(last_name)))`,
+		},
+		{
+			name: "Unique_Functional_Named",
+			index: &UniqueIndex{
+				TableName:   "tag",
+				ColumnNames: []ColumnName{"org_id", "kind", "key", "value"},
+				Expressions: []string{"org_id", "kind", "LOWER(key)", "LOWER(value)"},
+				name:        "uq_tag_org_kind_lower_key_lower_value",
+			},
+			sql: `CREATE UNIQUE INDEX IF NOT EXISTS "uq_tag_org_kind_lower_key_lower_value" ON "tag" (org_id, kind, LOWER(key), LOWER(value))`,
+		},
 		{
 			name: "PartialUnique_1Column",
 			index: &PartialUniqueIndex{
@@ -229,6 +266,47 @@ func TestIndexEquals(t *testing.T) {
 			},
 			equals: false,
 		},
+		{
+			name: "Unique_Functional_Same",
+			a: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+				Expressions: []string{"LOWER(email)"},
+			},
+			b: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+				Expressions: []string{"LOWER(email)"},
+			},
+			equals: true,
+		},
+		{
+			name: "Unique_Functional_DifferentExpressions",
+			a: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+				Expressions: []string{"LOWER(email)"},
+			},
+			b: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+				Expressions: []string{"UPPER(email)"},
+			},
+			equals: false,
+		},
+		{
+			name: "Unique_Functional_NotEqualToPlainSameColumns",
+			a: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+				Expressions: []string{"LOWER(email)"},
+			},
+			b: &UniqueIndex{
+				TableName:   "users",
+				ColumnNames: []ColumnName{"email"},
+			},
+			equals: false,
+		},
 	}
 
 	for _, testCase := range testCases {
@@ -238,6 +316,75 @@ func TestIndexEquals(t *testing.T) {
 	}
 }
 
+func TestUniqueIndexFunctionalName(t *testing.T) {
+	t.Run("autogen uses uq_<table>_<hash>", func(t *testing.T) {
+		idx := &UniqueIndex{
+			TableName:   "tag",
+			ColumnNames: []ColumnName{"org_id", "kind", "key", "value"},
+			Expressions: []string{"org_id", "kind", "LOWER(key)", "LOWER(value)"},
+		}
+		assert.Equal(t, "uq_tag_org_id_kind_key_value_57e8f81f", idx.Name())
+	})
+
+	t.Run("same expressions produce the same name", func(t *testing.T) {
+		a := &UniqueIndex{
+			TableName:   "users",
+			Expressions: []string{"LOWER(email)"},
+		}
+		b := &UniqueIndex{
+			TableName:   "users",
+			Expressions: []string{"LOWER(email)"},
+		}
+		assert.Equal(t, a.Name(), b.Name())
+	})
+
+	t.Run("different expressions produce different names", func(t *testing.T) {
+		a := &UniqueIndex{
+			TableName:   "users",
+			Expressions: []string{"LOWER(email)"},
+		}
+		b := &UniqueIndex{
+			TableName:   "users",
+			Expressions: []string{"UPPER(email)"},
+		}
+		assert.NotEqual(t, a.Name(), b.Name())
+	})
+
+	t.Run("expressions in different order produce different names", func(t *testing.T) {
+		a := &UniqueIndex{
+			TableName:   "tag",
+			Expressions: []string{"org_id", "LOWER(key)"},
+		}
+		b := &UniqueIndex{
+			TableName:   "tag",
+			Expressions: []string{"LOWER(key)", "org_id"},
+		}
+		assert.NotEqual(t, a.Name(), b.Name())
+	})
+
+	t.Run("functional autogen differs from plain autogen for same columns", func(t *testing.T) {
+		plain := &UniqueIndex{
+			TableName:   "users",
+			ColumnNames: []ColumnName{"email"},
+		}
+		functional := &UniqueIndex{
+			TableName:   "users",
+			ColumnNames: []ColumnName{"email"},
+			Expressions: []string{"LOWER(email)"},
+		}
+		assert.Equal(t, "uq_users_email", plain.Name())
+		assert.NotEqual(t, plain.Name(), functional.Name())
+	})
+
+	t.Run("Named() override wins over hash", func(t *testing.T) {
+		idx := (&UniqueIndex{
+			TableName:   "tag",
+			Expressions: []string{"org_id", "LOWER(key)"},
+		}).Named("my_functional_index")
+		assert.Equal(t, "my_functional_index", idx.Name())
+	})
+}
+
 func TestPartialUniqueIndexName(t *testing.T) {
 	a := &PartialUniqueIndex{
 		TableName:   "users",

pkg/types/dashboardtypes/list_v2.go

@@ -0,0 +1,124 @@
+package dashboardtypes
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+const (
+	DefaultListLimit = 20
+	MaxListLimit     = 200
+)
+
+// ListSort is the sort field for the dashboard list endpoint. The value is a
+// stable enum so callers can't ask for arbitrary columns.
+type ListSort string
+
+const (
+	ListSortUpdatedAt ListSort = "updated_at"
+	ListSortCreatedAt ListSort = "created_at"
+	ListSortName      ListSort = "name"
+)
+
+type ListOrder string
+
+const (
+	ListOrderAsc  ListOrder = "asc"
+	ListOrderDesc ListOrder = "desc"
+)
+
+var ErrCodeDashboardListInvalid = errors.MustNewCode("dashboard_list_invalid")
+
+type ListDashboardsV2Params struct {
+	Query  string    `query:"query"`
+	Sort   ListSort  `query:"sort"`
+	Order  ListOrder `query:"order"`
+	Limit  int       `query:"limit"`
+	Offset int       `query:"offset"`
+}
+
+// Validate fills in defaults (sort=updated_at, order=desc, limit=20) and
+// rejects out-of-allowlist sort/order values and bad limit/offset. Limit is
+// clamped to MaxListLimit on the high side. Lowercases sort/order so callers
+// can pass them in any case.
+func (p *ListDashboardsV2Params) Validate() error {
+	if p.Sort == "" {
+		p.Sort = ListSortUpdatedAt
+	} else {
+		p.Sort = ListSort(strings.ToLower(string(p.Sort)))
+		switch p.Sort {
+		case ListSortUpdatedAt, ListSortCreatedAt, ListSortName:
+		default:
+			return errors.NewInvalidInputf(ErrCodeDashboardListInvalid,
+				"invalid sort %q — expected one of: updated_at, created_at, name", p.Sort)
+		}
+	}
+
+	if p.Order == "" {
+		p.Order = ListOrderDesc
+	} else {
+		p.Order = ListOrder(strings.ToLower(string(p.Order)))
+		switch p.Order {
+		case ListOrderAsc, ListOrderDesc:
+		default:
+			return errors.NewInvalidInputf(ErrCodeDashboardListInvalid,
+				"invalid order %q — expected asc or desc", p.Order)
+		}
+	}
+
+	if p.Limit == 0 {
+		p.Limit = DefaultListLimit
+	} else if p.Limit < 0 {
+		return errors.NewInvalidInputf(ErrCodeDashboardListInvalid,
+			"invalid limit %d — must be a positive integer", p.Limit)
+	} else if p.Limit > MaxListLimit {
+		p.Limit = MaxListLimit
+	}
+
+	if p.Offset < 0 {
+		return errors.NewInvalidInputf(ErrCodeDashboardListInvalid,
+			"invalid offset %d — must be a non-negative integer", p.Offset)
+	}
+
+	return nil
+}
+
+type gettableDashboardWithPin struct {
+	GettableDashboardV2
+	Pinned bool `json:"pinned"`
+}
+
+type ListableDashboardV2 struct {
+	Dashboards []*gettableDashboardWithPin `json:"dashboards"`
+	HasMore    bool                        `json:"hasMore"`
+}
+
+// DashboardListRow is the per-row shape Store.ListV2 returns. Bundles the
+// joined dashboard / public_dashboard / pinned_dashboard data so the module
+// layer can attach tags and assemble the gettable view.
+type DashboardListRow struct {
+	Dashboard *StorableDashboard
+	Public    *StorablePublicDashboard // nil if no public_dashboard row exists
+	Pinned    bool
+}
+
+func NewListableDashboardV2(rows []*DashboardListRow, tagsByEntity map[valuer.UUID][]*tagtypes.Tag, hasMore bool) (*ListableDashboardV2, error) {
+	dashboards := make([]*gettableDashboardWithPin, len(rows))
+	for i, r := range rows {
+		v2, err := NewDashboardV2FromStorable(r.Dashboard, r.Public, tagsByEntity[r.Dashboard.ID])
+		if err != nil {
+			return nil, err
+		}
+		dashboards[i] = &gettableDashboardWithPin{
+			GettableDashboardV2: *NewGettableDashboardV2FromDashboardV2(v2),
+			Pinned:              r.Pinned,
+		}
+	}
+	return &ListableDashboardV2{
+		Dashboards: dashboards,
+		HasMore:    hasMore,
+	}, nil
+}

pkg/types/dashboardtypes/listfilter/constants.go

@@ -0,0 +1,61 @@
+package listfilter
+
+import (
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	qbtypesv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+)
+
+var ErrCodeDashboardListFilterInvalid = errors.MustNewCode("dashboard_list_filter_invalid")
+
+// reservedOps lists the operators each reserved (column-level) DSL key accepts.
+// Any non-reserved key is treated as a tag key and uses tagKeyOps.
+var reservedOps = map[dashboardtypes.DSLKey]map[qbtypesv5.FilterOperator]struct{}{
+	dashboardtypes.DSLKeyName:        stringSearchOps(),
+	dashboardtypes.DSLKeyDescription: stringSearchOps(),
+	dashboardtypes.DSLKeyCreatedAt:   numericRangeOps(),
+	dashboardtypes.DSLKeyUpdatedAt:   numericRangeOps(),
+	dashboardtypes.DSLKeyCreatedBy:   stringSearchOps(),
+	dashboardtypes.DSLKeyLocked:      opsSet(qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual),
+	dashboardtypes.DSLKeyPublic:      opsSet(qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual),
+}
+
+// tagKeyOps applies to every non-reserved DSL key — the operator targets the
+// tag's value with an implicit case-insensitive match on the tag's key.
+var tagKeyOps = opsSet(
+	qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+	qbtypesv5.FilterOperatorLike, qbtypesv5.FilterOperatorNotLike,
+	qbtypesv5.FilterOperatorILike, qbtypesv5.FilterOperatorNotILike,
+	qbtypesv5.FilterOperatorContains, qbtypesv5.FilterOperatorNotContains,
+	qbtypesv5.FilterOperatorRegexp, qbtypesv5.FilterOperatorNotRegexp,
+	qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn,
+	qbtypesv5.FilterOperatorExists, qbtypesv5.FilterOperatorNotExists,
+)
+
+func stringSearchOps() map[qbtypesv5.FilterOperator]struct{} {
+	return opsSet(
+		qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorLike, qbtypesv5.FilterOperatorNotLike,
+		qbtypesv5.FilterOperatorILike, qbtypesv5.FilterOperatorNotILike,
+		qbtypesv5.FilterOperatorContains, qbtypesv5.FilterOperatorNotContains,
+		qbtypesv5.FilterOperatorRegexp, qbtypesv5.FilterOperatorNotRegexp,
+		qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn,
+	)
+}
+
+func numericRangeOps() map[qbtypesv5.FilterOperator]struct{} {
+	return opsSet(
+		qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorLessThan, qbtypesv5.FilterOperatorLessThanOrEq,
+		qbtypesv5.FilterOperatorGreaterThan, qbtypesv5.FilterOperatorGreaterThanOrEq,
+		qbtypesv5.FilterOperatorBetween, qbtypesv5.FilterOperatorNotBetween,
+	)
+}
+
+func opsSet(ops ...qbtypesv5.FilterOperator) map[qbtypesv5.FilterOperator]struct{} {
+	m := make(map[qbtypesv5.FilterOperator]struct{}, len(ops))
+	for _, op := range ops {
+		m[op] = struct{}{}
+	}
+	return m
+}

pkg/types/dashboardtypes/listfilter/listfilter.go

@@ -0,0 +1,39 @@
+package listfilter
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+)
+
+type Compiled struct {
+	SQL  string
+	Args []any
+}
+
+func Compile(query string, formatter sqlstore.SQLFormatter) (*Compiled, error) {
+	if len(query) == 0 {
+		return nil, nil
+	}
+
+	queryVisitor := newVisitor(formatter)
+	frag, syntaxErrs := queryVisitor.compile(query)
+
+	if len(syntaxErrs) > 0 {
+		return nil, errors.NewInvalidInputf(ErrCodeDashboardListFilterInvalid,
+			"invalid filter query: %s", strings.Join(syntaxErrs, "; "))
+	}
+	if len(queryVisitor.errors) > 0 {
+		return nil, errors.NewInvalidInputf(ErrCodeDashboardListFilterInvalid,
+			"invalid filter query: %s", strings.Join(queryVisitor.errors, "; "))
+	}
+	if frag == nil || frag.sql == "" {
+		return nil, nil
+	}
+
+	return &Compiled{
+		SQL:  frag.sql,
+		Args: frag.args,
+	}, nil
+}

pkg/types/dashboardtypes/listfilter/listfilter_test.go

@@ -0,0 +1,507 @@
+package listfilter
+
+import (
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/DATA-DOG/go-sqlmock"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstoretest"
+)
+
+type compileCase struct {
+	subtestName              string
+	dslQueryToCompile        string
+	nilExpected              bool
+	expectedSQL              string
+	expectedArgs             []any
+	expectedErrShouldContain string
+}
+
+func runCompileCases(t *testing.T, cases []compileCase) {
+	t.Helper()
+	for _, c := range cases {
+		t.Run(c.subtestName, func(t *testing.T) {
+			out, err := Compile(c.dslQueryToCompile, formatter(t))
+
+			if c.expectedErrShouldContain != "" {
+				require.Error(t, err)
+				assert.Contains(t, strings.ToLower(err.Error()), strings.ToLower(c.expectedErrShouldContain))
+				return
+			}
+
+			require.NoError(t, err)
+			if c.nilExpected {
+				assert.Nil(t, out)
+				return
+			}
+			require.NotNil(t, out)
+
+			if c.expectedSQL != "" {
+				assert.Equal(t, normalizeSQL(c.expectedSQL), normalizeSQL(out.SQL))
+			}
+			if c.expectedArgs != nil {
+				require.Len(t, out.Args, len(c.expectedArgs))
+				for i, want := range c.expectedArgs {
+					// time.Time values can carry semantically-equal instants
+					// in different *Location representations (UTC vs Local vs
+					// FixedZone). Compare via .Equal() instead of DeepEqual.
+					if wantT, ok := want.(time.Time); ok {
+						gotT, ok := out.Args[i].(time.Time)
+						require.True(t, ok, "arg[%d]: want time.Time, got %T", i, out.Args[i])
+						assert.True(t, wantT.Equal(gotT), "arg[%d]: want %s, got %s", i, wantT, gotT)
+						continue
+					}
+					assert.Equal(t, want, out.Args[i], "arg[%d]", i)
+				}
+			}
+		})
+	}
+}
+
+func TestCompile_Empty(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{subtestName: "empty query yields nil", dslQueryToCompile: "", nilExpected: true},
+	})
+}
+
+func TestCompile_Name(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "name =",
+			dslQueryToCompile: `name = 'overview'`,
+			expectedSQL:       `json_extract("dashboard"."data", '$.data.display.name') = ?`,
+			expectedArgs:      []any{"overview"},
+		},
+		{
+			// QUOTED_TEXT in the grammar covers both '…' and "…" — visitor
+			// strips whichever quote pair surrounds the value.
+			subtestName:       "name = with double-quoted value",
+			dslQueryToCompile: `name = "something"`,
+			expectedSQL:       `json_extract("dashboard"."data", '$.data.display.name') = ?`,
+			expectedArgs:      []any{"something"},
+		},
+		{
+			subtestName:       "name CONTAINS",
+			dslQueryToCompile: `name CONTAINS 'overview'`,
+			expectedSQL:       `json_extract("dashboard"."data", '$.data.display.name') LIKE ?`,
+			expectedArgs:      []any{"%overview%"},
+		},
+		{
+			subtestName:       "name ILIKE — emitted as LOWER(col) LIKE LOWER(?) for dialect parity",
+			dslQueryToCompile: `name ILIKE 'Prod%'`,
+			expectedSQL:       `lower(json_extract("dashboard"."data", '$.data.display.name')) LIKE LOWER(?)`,
+			expectedArgs:      []any{"Prod%"},
+		},
+		{
+			subtestName:       "CONTAINS escapes % in user input",
+			dslQueryToCompile: `name CONTAINS '50%'`,
+			expectedSQL:       `json_extract("dashboard"."data", '$.data.display.name') LIKE ?`,
+			expectedArgs:      []any{`%50\%%`},
+		},
+	})
+}
+
+func TestCompile_CreatedByLocked(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "created_by LIKE",
+			dslQueryToCompile: `created_by LIKE '%@signoz.io'`,
+			expectedSQL:       `dashboard.created_by LIKE ?`,
+			expectedArgs:      []any{"%@signoz.io"},
+		},
+		{
+			subtestName:       "locked = true",
+			dslQueryToCompile: `locked = true`,
+			expectedSQL:       `dashboard.locked = ?`,
+			expectedArgs:      []any{true},
+		},
+	})
+}
+
+func TestCompile_Public(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{subtestName: "public = true", dslQueryToCompile: `public = true`, expectedSQL: `pd.id IS NOT NULL`},
+		{subtestName: "public = false", dslQueryToCompile: `public = false`, expectedSQL: `pd.id IS NULL`},
+		{subtestName: "public != true", dslQueryToCompile: `public != true`, expectedSQL: `pd.id IS NULL`},
+	})
+}
+
+func TestCompile_Timestamps(t *testing.T) {
+	ist := time.FixedZone("+05:30", 5*60*60+30*60)
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "created_at >= RFC3339",
+			dslQueryToCompile: `created_at >= '2026-03-10T00:00:00Z'`,
+			expectedSQL:       `dashboard.created_at >= ?`,
+			expectedArgs:      []any{time.Date(2026, 3, 10, 0, 0, 0, 0, time.UTC)},
+		},
+		{
+			subtestName:       "updated_at BETWEEN",
+			dslQueryToCompile: `updated_at BETWEEN '2026-03-10T00:00:00Z' AND '2026-03-20T00:00:00Z'`,
+			expectedSQL:       `dashboard.updated_at BETWEEN ? AND ?`,
+			expectedArgs: []any{
+				time.Date(2026, 3, 10, 0, 0, 0, 0, time.UTC),
+				time.Date(2026, 3, 20, 0, 0, 0, 0, time.UTC),
+			},
+		},
+		{
+			subtestName:       "created_at >= IST timestamp",
+			dslQueryToCompile: `created_at >= '2026-03-10T05:30:00+05:30'`,
+			expectedSQL:       `dashboard.created_at >= ?`,
+			expectedArgs:      []any{time.Date(2026, 3, 10, 5, 30, 0, 0, ist)},
+		},
+	})
+}
+
+// Tag operators wrap each predicate in EXISTS / NOT EXISTS. Any non-reserved
+// key is a tag key — `team = 'pulse'` matches a tag with key=team value=pulse,
+// `tag = 'prod'` matches a tag with key=tag value=prod, and so on.
+func TestCompile_Tag(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "team = wraps in EXISTS",
+			dslQueryToCompile: `team = 'pulse'`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value = ?
+				)`,
+			expectedArgs: []any{"team", "pulse"},
+		},
+		{
+			subtestName:       "tag = is just a regular tag-key filter",
+			dslQueryToCompile: `tag = 'database'`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value = ?
+				)`,
+			expectedArgs: []any{"tag", "database"},
+		},
+		{
+			subtestName:       "team != wraps in NOT EXISTS with positive inner",
+			dslQueryToCompile: `team != 'pulse'`,
+			expectedSQL: `
+				NOT EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value = ?
+				)`,
+			expectedArgs: []any{"team", "pulse"},
+		},
+		{
+			subtestName:       "team IN — inner is single placeholder list on t.value",
+			dslQueryToCompile: `team IN ['pulse', 'events']`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value IN (?, ?)
+				)`,
+			expectedArgs: []any{"team", "pulse", "events"},
+		},
+		{
+			subtestName:       "team NOT IN",
+			dslQueryToCompile: `team NOT IN ['pulse', 'events']`,
+			expectedSQL: `
+				NOT EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value IN (?, ?)
+				)`,
+			expectedArgs: []any{"team", "pulse", "events"},
+		},
+		{
+			subtestName:       "team LIKE — wildcard on value",
+			dslQueryToCompile: `team LIKE 'pulse%'`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value LIKE ?
+				)`,
+			expectedArgs: []any{"team", "pulse%"},
+		},
+		{
+			subtestName:       "team NOT LIKE",
+			dslQueryToCompile: `team NOT LIKE 'staging%'`,
+			expectedSQL: `
+				NOT EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value LIKE ?
+				)`,
+			expectedArgs: []any{"team", "staging%"},
+		},
+		{
+			subtestName:       "database EXISTS — asserts a tag with key=database is present",
+			dslQueryToCompile: `database EXISTS`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+				)`,
+			expectedArgs: []any{"database"},
+		},
+		{
+			subtestName:       "database NOT EXISTS",
+			dslQueryToCompile: `database NOT EXISTS`,
+			expectedSQL: `
+				NOT EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+				)`,
+			expectedArgs: []any{"database"},
+		},
+		{
+			subtestName:       "tag-key matching is case-insensitive — TEAM lowercased",
+			dslQueryToCompile: `TEAM = 'pulse'`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value = ?
+				)`,
+			expectedArgs: []any{"team", "pulse"},
+		},
+	})
+}
+
+func TestCompile_BooleanComposition(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "AND chain — flat arg list",
+			dslQueryToCompile: `locked = true AND public = true`,
+			expectedSQL:       `dashboard.locked = ? AND pd.id IS NOT NULL`,
+			expectedArgs:      []any{true},
+		},
+		{
+			subtestName:       "OR chain",
+			dslQueryToCompile: `locked = true OR public = true`,
+			expectedSQL:       `dashboard.locked = ? OR pd.id IS NOT NULL`,
+			expectedArgs:      []any{true},
+		},
+		{
+			subtestName:       "parens preserve precedence",
+			dslQueryToCompile: `(locked = true OR public = true) AND created_by = 'a@b.com'`,
+			expectedSQL:       `(dashboard.locked = ? OR pd.id IS NOT NULL) AND dashboard.created_by = ?`,
+			expectedArgs:      []any{true, "a@b.com"},
+		},
+	})
+}
+
+// Distinct from operator-suffix negation (NOT IN / NOT LIKE / NOT EXISTS).
+// Driven by the unaryExpression rule (`NOT? primary`), so NOT binds to
+// exactly one primary and only widens via parens.
+func TestCompile_NOT(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "NOT on a single comparison",
+			dslQueryToCompile: `NOT name = 'foo'`,
+			expectedSQL:       `NOT (json_extract("dashboard"."data", '$.data.display.name') = ?)`,
+			expectedArgs:      []any{"foo"},
+		},
+		{
+			subtestName:       "NOT binds tightly to its primary in an AND chain",
+			dslQueryToCompile: `NOT name = 'foo' AND created_by = 'alice'`,
+			expectedSQL:       `NOT (json_extract("dashboard"."data", '$.data.display.name') = ?) AND dashboard.created_by = ?`,
+			expectedArgs:      []any{"foo", "alice"},
+		},
+		{
+			subtestName:       "NOT applied to the second term in an AND chain",
+			dslQueryToCompile: `locked = true AND NOT name = 'foo'`,
+			expectedSQL:       `dashboard.locked = ? AND NOT (json_extract("dashboard"."data", '$.data.display.name') = ?)`,
+			expectedArgs:      []any{true, "foo"},
+		},
+		{
+			subtestName:       "NOT around a parenthesized OR",
+			dslQueryToCompile: `NOT (locked = true OR public = true)`,
+			expectedSQL:       `NOT ((dashboard.locked = ? OR pd.id IS NOT NULL))`,
+			expectedArgs:      []any{true},
+		},
+		{
+			subtestName:       "double NOT via parens",
+			dslQueryToCompile: `NOT (NOT name = 'foo')`,
+			expectedSQL:       `NOT ((NOT (json_extract("dashboard"."data", '$.data.display.name') = ?)))`,
+			expectedArgs:      []any{"foo"},
+		},
+		{
+			subtestName:       "NOT on a tag equality",
+			dslQueryToCompile: `NOT team = 'pulse'`,
+			expectedSQL: `
+				NOT (
+					EXISTS (
+						SELECT 1 FROM tag_relations tr
+						JOIN tag t ON t.id = tr.tag_id
+						WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+						AND LOWER(t.key) = LOWER(?)
+						AND t.value = ?
+					)
+				)`,
+			expectedArgs: []any{"team", "pulse"},
+		},
+		{
+			subtestName:       "NOT team = ... AND name = ...",
+			dslQueryToCompile: `NOT team = 'pulse' AND name = 'overview'`,
+			expectedSQL: `
+				NOT (
+					EXISTS (
+						SELECT 1 FROM tag_relations tr
+						JOIN tag t ON t.id = tr.tag_id
+						WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+						AND LOWER(t.key) = LOWER(?)
+						AND t.value = ?
+					)
+				)
+				AND json_extract("dashboard"."data", '$.data.display.name') = ?`,
+			expectedArgs: []any{"team", "pulse", "overview"},
+		},
+	})
+}
+
+func TestCompile_ComplexExamples(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "name CONTAINS + tag LIKE + created_by + database =",
+			dslQueryToCompile: `name CONTAINS 'overview' AND tag LIKE 'prod%' AND created_by = 'naman.verma@signoz.io' AND database = 'mongo'`,
+			expectedSQL: `
+				json_extract("dashboard"."data", '$.data.display.name') LIKE ?
+				AND EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value LIKE ?
+				)
+				AND dashboard.created_by = ?
+				AND EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value = ?
+				)`,
+			expectedArgs: []any{"%overview%", "tag", "prod%", "naman.verma@signoz.io", "database", "mongo"},
+		},
+		{
+			subtestName:       "team IN AND database EXISTS",
+			dslQueryToCompile: `team IN ['pulse', 'events'] AND database EXISTS`,
+			expectedSQL: `
+				EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+					AND t.value IN (?, ?)
+				)
+				AND EXISTS (
+					SELECT 1 FROM tag_relations tr
+					JOIN tag t ON t.id = tr.tag_id
+					WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+					AND LOWER(t.key) = LOWER(?)
+				)`,
+			expectedArgs: []any{"team", "pulse", "events", "database"},
+		},
+		{
+			subtestName:       "nested OR / AND with parens",
+			dslQueryToCompile: `(database IN ['sql', 'redis', 'mongo'] OR name LIKE '%database%') AND (team = 'pulse' OR name LIKE '%pulse%')`,
+			expectedSQL: `
+				(
+					EXISTS (
+						SELECT 1 FROM tag_relations tr
+						JOIN tag t ON t.id = tr.tag_id
+						WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+						AND LOWER(t.key) = LOWER(?)
+						AND t.value IN (?, ?, ?)
+					)
+					OR json_extract("dashboard"."data", '$.data.display.name') LIKE ?
+				)
+				AND (
+					EXISTS (
+						SELECT 1 FROM tag_relations tr
+						JOIN tag t ON t.id = tr.tag_id
+						WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id
+						AND LOWER(t.key) = LOWER(?)
+						AND t.value = ?
+					)
+					OR json_extract("dashboard"."data", '$.data.display.name') LIKE ?
+				)`,
+			expectedArgs: []any{"database", "sql", "redis", "mongo", "%database%", "team", "pulse", "%pulse%"},
+		},
+	})
+}
+
+func TestCompile_Rejections(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:              "rejects op outside per-reserved-key allowlist",
+			dslQueryToCompile:        `name BETWEEN 'a' AND 'z'`,
+			expectedErrShouldContain: "operator",
+		},
+		{
+			subtestName:              "rejects BETWEEN on a tag key",
+			dslQueryToCompile:        `team BETWEEN 'a' AND 'z'`,
+			expectedErrShouldContain: "operator",
+		},
+		{
+			subtestName:              "rejects non-bool on locked",
+			dslQueryToCompile:        `locked = 'yes'`,
+			expectedErrShouldContain: "boolean",
+		},
+		{
+			subtestName:              "rejects non-RFC3339 timestamp",
+			dslQueryToCompile:        `created_at >= 'not-a-date'`,
+			expectedErrShouldContain: "RFC3339",
+		},
+		{
+			subtestName:              "rejects REGEXP — not yet supported",
+			dslQueryToCompile:        `name REGEXP '.*'`,
+			expectedErrShouldContain: "REGEXP",
+		},
+		{
+			subtestName:              "rejects syntax error from grammar",
+			dslQueryToCompile:        `name = `,
+			expectedErrShouldContain: "syntax",
+		},
+	})
+}
+
+func formatter(t *testing.T) sqlstore.SQLFormatter {
+	t.Helper()
+	p := sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)
+	return p.Formatter()
+}
+
+func normalizeSQL(s string) string {
+	s = strings.Join(strings.Fields(s), " ")
+	s = strings.ReplaceAll(s, "( ", "(")
+	s = strings.ReplaceAll(s, " )", ")")
+	return s
+}

pkg/types/dashboardtypes/listfilter/visitor.go

@@ -0,0 +1,590 @@
+package listfilter
+
+import (
+	"fmt"
+	"strings"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/parser/filterquery"
+	grammar "github.com/SigNoz/signoz/pkg/parser/filterquery/grammar"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	qbtypesv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/antlr4-go/antlr/v4"
+)
+
+// fragment is one composable WHERE fragment. sql uses `?` placeholders;
+// args lines up positionally with the placeholders.
+type fragment struct {
+	sql  string
+	args []any
+}
+
+func newFragment(sql string, args ...any) *fragment {
+	return &fragment{sql: sql, args: args}
+}
+
+type visitor struct {
+	grammar.BaseFilterQueryVisitor
+	formatter sqlstore.SQLFormatter
+	errors    []string
+}
+
+func newVisitor(formatter sqlstore.SQLFormatter) *visitor {
+	return &visitor{
+		formatter: formatter,
+	}
+}
+
+// Emitted WHERE fragment uses aliases `dashboard` and `pd` (public_dashboard).
+func (v *visitor) compile(query string) (*fragment, []string) {
+	tree, _, collector := filterquery.Parse(query)
+	if len(collector.Errors) > 0 {
+		return nil, collector.Errors
+	}
+	frag, _ := v.visit(tree).(*fragment)
+	return frag, nil
+}
+
+func (v *visitor) visit(tree antlr.ParseTree) any {
+	if tree == nil {
+		return nil
+	}
+	return tree.Accept(v)
+}
+
+// ════════════════════════════════════════════════════════════════════════
+// methods from grammar.BaseFilterQueryVisitor that are overridden
+// ════════════════════════════════════════════════════════════════════════
+
+func (v *visitor) VisitQuery(ctx *grammar.QueryContext) any {
+	return v.visit(ctx.Expression())
+}
+
+func (v *visitor) VisitExpression(ctx *grammar.ExpressionContext) any {
+	return v.visit(ctx.OrExpression())
+}
+
+func (v *visitor) VisitOrExpression(ctx *grammar.OrExpressionContext) any {
+	parts := ctx.AllAndExpression()
+	frags := make([]*fragment, 0, len(parts))
+	for _, p := range parts {
+		if f, ok := v.visit(p).(*fragment); ok && f != nil {
+			frags = append(frags, f)
+		}
+	}
+	return joinFragments(frags, "OR")
+}
+
+func (v *visitor) VisitAndExpression(ctx *grammar.AndExpressionContext) any {
+	parts := ctx.AllUnaryExpression()
+	frags := make([]*fragment, 0, len(parts))
+	for _, p := range parts {
+		if f, ok := v.visit(p).(*fragment); ok && f != nil {
+			frags = append(frags, f)
+		}
+	}
+	return joinFragments(frags, "AND")
+}
+
+func (v *visitor) VisitUnaryExpression(ctx *grammar.UnaryExpressionContext) any {
+	f, _ := v.visit(ctx.Primary()).(*fragment)
+	if f == nil {
+		return nil
+	}
+	if ctx.NOT() != nil {
+		return newFragment("NOT ("+f.sql+")", f.args...)
+	}
+	return f
+}
+
+func (v *visitor) VisitPrimary(ctx *grammar.PrimaryContext) any {
+	if ctx.OrExpression() != nil {
+		f, _ := v.visit(ctx.OrExpression()).(*fragment)
+		if f == nil {
+			return nil
+		}
+		return newFragment("("+f.sql+")", f.args...)
+	}
+	if ctx.Comparison() != nil {
+		return v.visit(ctx.Comparison())
+	}
+	// Bare keys, values, full text, and function calls are not part of the
+	// dashboard list DSL.
+	v.addErr("unsupported expression %q — every term must be of the form `key OP value`", ctx.GetText())
+	return nil
+}
+
+// VisitComparison dispatches a single `key OP value` term. A key that matches
+// a reserved DSL key (name, description, etc.) becomes a column-level
+// predicate; any other identifier is treated as a tag key — the operator
+// applies to the tag's value, with a case-insensitive match on the tag's key.
+func (v *visitor) VisitComparison(ctx *grammar.ComparisonContext) any {
+	key, ok := v.parseKey(ctx)
+	if !ok {
+		return nil
+	}
+
+	op, ok := v.opFromContext(ctx)
+	if !ok {
+		return nil
+	}
+
+	if reservedOpSet, isReserved := reservedOps[dashboardtypes.DSLKey(key)]; isReserved {
+		if _, allowed := reservedOpSet[op]; !allowed {
+			v.addErr("operator %s is not allowed for key %q", opName(op), key)
+			return nil
+		}
+		switch dashboardtypes.DSLKey(key) {
+		case dashboardtypes.DSLKeyName:
+			return v.emitJSONStringComparison(ctx, op, "$.data.display.name")
+		case dashboardtypes.DSLKeyDescription:
+			return v.emitJSONStringComparison(ctx, op, "$.data.display.description")
+		case dashboardtypes.DSLKeyCreatedAt:
+			return v.emitTimestampComparison(ctx, op, "dashboard.created_at")
+		case dashboardtypes.DSLKeyUpdatedAt:
+			return v.emitTimestampComparison(ctx, op, "dashboard.updated_at")
+		case dashboardtypes.DSLKeyCreatedBy:
+			return v.emitStringComparison(ctx, op, "dashboard.created_by")
+		case dashboardtypes.DSLKeyLocked:
+			return v.emitBoolComparison(ctx, op, "dashboard.locked")
+		case dashboardtypes.DSLKeyPublic:
+			return v.emitPublicComparison(ctx, op)
+		}
+	}
+
+	if _, allowed := tagKeyOps[op]; !allowed {
+		v.addErr("operator %s is not allowed on a tag-key filter", opName(op))
+		return nil
+	}
+	return v.emitTagComparison(ctx, op, key)
+}
+
+func (v *visitor) parseKey(ctx *grammar.ComparisonContext) (string, bool) {
+	keyText := strings.ToLower(strings.TrimSpace(ctx.Key().GetText()))
+	if keyText == "" {
+		v.addErr("filter key cannot be empty")
+		return "", false
+	}
+	return keyText, true
+}
+
+func (v *visitor) opFromContext(ctx *grammar.ComparisonContext) (qbtypesv5.FilterOperator, bool) {
+	switch {
+	case ctx.EQUALS() != nil:
+		return qbtypesv5.FilterOperatorEqual, true
+	case ctx.NOT_EQUALS() != nil, ctx.NEQ() != nil:
+		return qbtypesv5.FilterOperatorNotEqual, true
+	case ctx.LT() != nil:
+		return qbtypesv5.FilterOperatorLessThan, true
+	case ctx.LE() != nil:
+		return qbtypesv5.FilterOperatorLessThanOrEq, true
+	case ctx.GT() != nil:
+		return qbtypesv5.FilterOperatorGreaterThan, true
+	case ctx.GE() != nil:
+		return qbtypesv5.FilterOperatorGreaterThanOrEq, true
+	case ctx.BETWEEN() != nil:
+		if ctx.NOT() != nil {
+			return qbtypesv5.FilterOperatorNotBetween, true
+		}
+		return qbtypesv5.FilterOperatorBetween, true
+	case ctx.LIKE() != nil:
+		if ctx.NOT() != nil {
+			return qbtypesv5.FilterOperatorNotLike, true
+		}
+		return qbtypesv5.FilterOperatorLike, true
+	case ctx.ILIKE() != nil:
+		if ctx.NOT() != nil {
+			return qbtypesv5.FilterOperatorNotILike, true
+		}
+		return qbtypesv5.FilterOperatorILike, true
+	case ctx.CONTAINS() != nil:
+		if ctx.NOT() != nil {
+			return qbtypesv5.FilterOperatorNotContains, true
+		}
+		return qbtypesv5.FilterOperatorContains, true
+	case ctx.REGEXP() != nil:
+		if ctx.NOT() != nil {
+			return qbtypesv5.FilterOperatorNotRegexp, true
+		}
+		return qbtypesv5.FilterOperatorRegexp, true
+	case ctx.InClause() != nil:
+		return qbtypesv5.FilterOperatorIn, true
+	case ctx.NotInClause() != nil:
+		return qbtypesv5.FilterOperatorNotIn, true
+	case ctx.EXISTS() != nil:
+		if ctx.NOT() != nil {
+			return qbtypesv5.FilterOperatorNotExists, true
+		}
+		return qbtypesv5.FilterOperatorExists, true
+	}
+	v.addErr("could not determine operator in expression %q", ctx.GetText())
+	return qbtypesv5.FilterOperatorUnknown, false
+}
+
+// ─── per-key emitters ────────────────────────────────────────────────────────
+
+func (v *visitor) emitJSONStringComparison(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator, jsonPath string) *fragment {
+	colExpr := string(v.formatter.JSONExtractString("dashboard.data", jsonPath))
+	return v.emitStringOp(ctx, op, colExpr, string(dashboardtypes.DSLKeyName))
+}
+
+func (v *visitor) emitStringComparison(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator, colExpr string) *fragment {
+	return v.emitStringOp(ctx, op, colExpr, string(dashboardtypes.DSLKeyCreatedBy))
+}
+
+// emitStringOp covers all the operators the spec allows on text-shaped keys
+// (name, description, created_by). Tag uses a separate emitter that wraps each
+// produced fragment in an EXISTS subquery.
+func (v *visitor) emitStringOp(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator, colExpr, keyForErr string) *fragment {
+	switch op {
+	case qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorLike, qbtypesv5.FilterOperatorNotLike:
+		val, ok := v.singleString(ctx, keyForErr)
+		if !ok {
+			return nil
+		}
+		return newFragment(colExpr+" "+opName(op)+" ?", val)
+	case qbtypesv5.FilterOperatorILike, qbtypesv5.FilterOperatorNotILike:
+		val, ok := v.singleString(ctx, keyForErr)
+		if !ok {
+			return nil
+		}
+		// SQLite has no ILIKE keyword and Postgres LIKE is case-sensitive — emit
+		// LOWER(col) LIKE LOWER(?) so behavior is identical on both dialects.
+		lowerCol := string(v.formatter.LowerExpression(colExpr))
+		return newFragment(lowerCol+" "+opName(iLikeToLike(op))+" LOWER(?)", val)
+	case qbtypesv5.FilterOperatorContains, qbtypesv5.FilterOperatorNotContains:
+		val, ok := v.singleString(ctx, keyForErr)
+		if !ok {
+			return nil
+		}
+		return newFragment(colExpr+" "+opName(containsToLike(op))+" ?", "%"+escapeLike(val)+"%")
+	case qbtypesv5.FilterOperatorRegexp, qbtypesv5.FilterOperatorNotRegexp:
+		v.addErr("REGEXP filtering on %q is not yet supported", keyForErr)
+		return nil
+	case qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn:
+		vals, ok := v.stringList(ctx, keyForErr)
+		if !ok {
+			return nil
+		}
+		return inFragment(colExpr, op, vals)
+	}
+	v.addErr("operator %s on %q is not implemented", opName(op), keyForErr)
+	return nil
+}
+
+func (v *visitor) emitTimestampComparison(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator, colExpr string) *fragment {
+	switch op {
+	case qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorLessThan, qbtypesv5.FilterOperatorLessThanOrEq,
+		qbtypesv5.FilterOperatorGreaterThan, qbtypesv5.FilterOperatorGreaterThanOrEq:
+		t, ok := v.singleTimestamp(ctx)
+		if !ok {
+			return nil
+		}
+		return newFragment(colExpr+" "+opName(op)+" ?", t)
+	case qbtypesv5.FilterOperatorBetween, qbtypesv5.FilterOperatorNotBetween:
+		ts, ok := v.twoTimestamps(ctx)
+		if !ok {
+			return nil
+		}
+		return newFragment(colExpr+" "+opName(op)+" ? AND ?", ts[0], ts[1])
+	}
+	v.addErr("operator %s on timestamp is not implemented", opName(op))
+	return nil
+}
+
+func (v *visitor) emitBoolComparison(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator, colExpr string) *fragment {
+	b, ok := v.singleBool(ctx)
+	if !ok {
+		return nil
+	}
+	return newFragment(colExpr+" "+opName(op)+" ?", b)
+}
+
+// emitPublicComparison renders `public = true|false` against the LEFT-joined
+// public_dashboard alias `pd`. The spec says public is a virtual column whose
+// truthiness is the existence of a row in public_dashboard.
+func (v *visitor) emitPublicComparison(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator) *fragment {
+	b, ok := v.singleBool(ctx)
+	if !ok {
+		return nil
+	}
+	want := b
+	if op == qbtypesv5.FilterOperatorNotEqual {
+		want = !b
+	}
+	if want {
+		return newFragment("pd.id IS NOT NULL")
+	}
+	return newFragment("pd.id IS NULL")
+}
+
+const tagSubqueryPrefix = "SELECT 1 FROM tag_relations tr JOIN tag t ON t.id = tr.tag_id " +
+	"WHERE tr.entity_type = 'dashboard' AND tr.entity_id = dashboard.id " +
+	"AND LOWER(t.key) = LOWER(?)"
+
+// emitTagComparison wraps the inner predicate in EXISTS (or NOT EXISTS for the
+// negated operators). The inner predicate matches the tag's key
+// case-insensitively and applies the user's operator to the tag's value.
+// EXISTS / NOT EXISTS skip the value predicate — they assert the existence
+// (or absence) of any tag with the given key.
+func (v *visitor) emitTagComparison(ctx *grammar.ComparisonContext, op qbtypesv5.FilterOperator, key string) *fragment {
+	if op == qbtypesv5.FilterOperatorExists || op == qbtypesv5.FilterOperatorNotExists {
+		wrapper := "EXISTS"
+		if op == qbtypesv5.FilterOperatorNotExists {
+			wrapper = "NOT EXISTS"
+		}
+		return newFragment(wrapper+" ("+tagSubqueryPrefix+")", key)
+	}
+
+	// All other tag operators take the positive form of the value predicate
+	// and toggle the EXISTS wrapper for negation. Inverse() flips Not<X> → <X>.
+	negated := op.IsNegativeOperator()
+	posOp := op
+	if negated {
+		posOp = op.Inverse()
+	}
+	inner := v.emitStringOp(ctx, posOp, "t.value", key)
+	if inner == nil {
+		return nil
+	}
+	wrapper := "EXISTS"
+	if negated {
+		wrapper = "NOT EXISTS"
+	}
+	args := append([]any{key}, inner.args...)
+	return newFragment(wrapper+" ("+tagSubqueryPrefix+" AND "+inner.sql+")", args...)
+}
+
+// ─── value extraction helpers ───────────────────────────────────────────────
+
+func (v *visitor) addErr(format string, args ...any) {
+	v.errors = append(v.errors, fmt.Sprintf(format, args...))
+}
+
+func (v *visitor) singleString(ctx *grammar.ComparisonContext, keyForErr string) (string, bool) {
+	values := ctx.AllValue()
+	if len(values) != 1 {
+		v.addErr("expected exactly one value for %q", keyForErr)
+		return "", false
+	}
+	return v.stringValue(values[0], keyForErr)
+}
+
+func (v *visitor) singleBool(ctx *grammar.ComparisonContext) (bool, bool) {
+	values := ctx.AllValue()
+	if len(values) != 1 {
+		v.addErr("expected a single boolean (true/false)")
+		return false, false
+	}
+	return v.boolValue(values[0])
+}
+
+func (v *visitor) singleTimestamp(ctx *grammar.ComparisonContext) (time.Time, bool) {
+	values := ctx.AllValue()
+	if len(values) != 1 {
+		v.addErr("expected a single RFC3339 timestamp")
+		return time.Time{}, false
+	}
+	return v.timestampValue(values[0])
+}
+
+func (v *visitor) twoTimestamps(ctx *grammar.ComparisonContext) ([2]time.Time, bool) {
+	values := ctx.AllValue()
+	if len(values) != 2 {
+		v.addErr("BETWEEN expects two RFC3339 timestamps")
+		return [2]time.Time{}, false
+	}
+	a, ok1 := v.timestampValue(values[0])
+	b, ok2 := v.timestampValue(values[1])
+	if !ok1 || !ok2 {
+		return [2]time.Time{}, false
+	}
+	return [2]time.Time{a, b}, true
+}
+
+func (v *visitor) stringList(ctx *grammar.ComparisonContext, keyForErr string) ([]string, bool) {
+	var valuesCtx []grammar.IValueContext
+	switch {
+	case ctx.InClause() != nil:
+		ic := ctx.InClause()
+		if ic.ValueList() != nil {
+			valuesCtx = ic.ValueList().AllValue()
+		} else {
+			valuesCtx = []grammar.IValueContext{ic.Value()}
+		}
+	case ctx.NotInClause() != nil:
+		nc := ctx.NotInClause()
+		if nc.ValueList() != nil {
+			valuesCtx = nc.ValueList().AllValue()
+		} else {
+			valuesCtx = []grammar.IValueContext{nc.Value()}
+		}
+	default:
+		v.addErr("IN clause is missing for %q", keyForErr)
+		return nil, false
+	}
+	if len(valuesCtx) == 0 {
+		v.addErr("IN list for %q is empty", keyForErr)
+		return nil, false
+	}
+	out := make([]string, 0, len(valuesCtx))
+	for _, vc := range valuesCtx {
+		s, ok := v.stringValue(vc, keyForErr)
+		if !ok {
+			return nil, false
+		}
+		out = append(out, s)
+	}
+	return out, true
+}
+
+func (v *visitor) stringValue(ctx grammar.IValueContext, keyForErr string) (string, bool) {
+	if ctx.QUOTED_TEXT() != nil {
+		return trimQuotes(ctx.QUOTED_TEXT().GetText()), true
+	}
+	if ctx.KEY() != nil {
+		// Bare tokens are accepted as strings, mirroring the FilterQuery lexer's
+		// treatment of unquoted identifiers on the value side.
+		return ctx.KEY().GetText(), true
+	}
+	v.addErr("expected a string value for %q, got %q", keyForErr, ctx.GetText())
+	return "", false
+}
+
+func (v *visitor) boolValue(ctx grammar.IValueContext) (bool, bool) {
+	if ctx.BOOL() == nil {
+		v.addErr("expected a boolean (true/false), got %q", ctx.GetText())
+		return false, false
+	}
+	return strings.EqualFold(ctx.BOOL().GetText(), "true"), true
+}
+
+func (v *visitor) timestampValue(ctx grammar.IValueContext) (time.Time, bool) {
+	if ctx.QUOTED_TEXT() == nil {
+		v.addErr("expected an RFC3339 timestamp string, got %q", ctx.GetText())
+		return time.Time{}, false
+	}
+	raw := trimQuotes(ctx.QUOTED_TEXT().GetText())
+	t, err := time.Parse(time.RFC3339, raw)
+	if err != nil {
+		v.addErr("invalid RFC3339 timestamp %q: %s", raw, err.Error())
+		return time.Time{}, false
+	}
+	return t, true
+}
+
+// ─── fragment helpers ────────────────────────────────────────────────────────
+
+func joinFragments(frags []*fragment, conn string) *fragment {
+	if len(frags) == 0 {
+		return nil
+	}
+	if len(frags) == 1 {
+		return frags[0]
+	}
+	parts := make([]string, len(frags))
+	args := make([]any, 0)
+	for i, f := range frags {
+		parts[i] = f.sql
+		args = append(args, f.args...)
+	}
+	return newFragment(strings.Join(parts, " "+conn+" "), args...)
+}
+
+func inFragment(colExpr string, op qbtypesv5.FilterOperator, vals []string) *fragment {
+	placeholders := strings.Repeat("?, ", len(vals))
+	placeholders = placeholders[:len(placeholders)-2]
+	args := make([]any, len(vals))
+	for i, s := range vals {
+		args[i] = s
+	}
+	return newFragment(colExpr+" "+opName(op)+" ("+placeholders+")", args...)
+}
+
+// opName returns the user-facing spelling of a FilterOperator. For the
+// operators we emit directly into SQL (=, !=, <, LIKE, IN, BETWEEN, …) the
+// spelling doubles as the SQL keyword. For the operators we don't emit
+// directly (ILIKE, CONTAINS, REGEXP, EXISTS, NOT EXISTS) it's only used in
+// error messages.
+func opName(op qbtypesv5.FilterOperator) string {
+	switch op {
+	case qbtypesv5.FilterOperatorEqual:
+		return "="
+	case qbtypesv5.FilterOperatorNotEqual:
+		return "!="
+	case qbtypesv5.FilterOperatorLessThan:
+		return "<"
+	case qbtypesv5.FilterOperatorLessThanOrEq:
+		return "<="
+	case qbtypesv5.FilterOperatorGreaterThan:
+		return ">"
+	case qbtypesv5.FilterOperatorGreaterThanOrEq:
+		return ">="
+	case qbtypesv5.FilterOperatorBetween:
+		return "BETWEEN"
+	case qbtypesv5.FilterOperatorNotBetween:
+		return "NOT BETWEEN"
+	case qbtypesv5.FilterOperatorLike:
+		return "LIKE"
+	case qbtypesv5.FilterOperatorNotLike:
+		return "NOT LIKE"
+	case qbtypesv5.FilterOperatorILike:
+		return "ILIKE"
+	case qbtypesv5.FilterOperatorNotILike:
+		return "NOT ILIKE"
+	case qbtypesv5.FilterOperatorContains:
+		return "CONTAINS"
+	case qbtypesv5.FilterOperatorNotContains:
+		return "NOT CONTAINS"
+	case qbtypesv5.FilterOperatorRegexp:
+		return "REGEXP"
+	case qbtypesv5.FilterOperatorNotRegexp:
+		return "NOT REGEXP"
+	case qbtypesv5.FilterOperatorIn:
+		return "IN"
+	case qbtypesv5.FilterOperatorNotIn:
+		return "NOT IN"
+	case qbtypesv5.FilterOperatorExists:
+		return "EXISTS"
+	case qbtypesv5.FilterOperatorNotExists:
+		return "NOT EXISTS"
+	}
+	return "?"
+}
+
+// iLikeToLike maps ILIKE → LIKE for the LOWER(col) LIKE LOWER(?) emission.
+func iLikeToLike(op qbtypesv5.FilterOperator) qbtypesv5.FilterOperator {
+	if op == qbtypesv5.FilterOperatorNotILike {
+		return qbtypesv5.FilterOperatorNotLike
+	}
+	return qbtypesv5.FilterOperatorLike
+}
+
+// containsToLike maps CONTAINS → LIKE for the LIKE '%val%' emission.
+func containsToLike(op qbtypesv5.FilterOperator) qbtypesv5.FilterOperator {
+	if op == qbtypesv5.FilterOperatorNotContains {
+		return qbtypesv5.FilterOperatorNotLike
+	}
+	return qbtypesv5.FilterOperatorLike
+}
+
+// escapeLike escapes the LIKE meta-characters % and _ in user input so that a
+// CONTAINS query of `50%` doesn't match every value containing `50`.
+func escapeLike(s string) string {
+	r := strings.NewReplacer(`\`, `\\`, `%`, `\%`, `_`, `\_`)
+	return r.Replace(s)
+}
+
+func trimQuotes(s string) string {
+	if len(s) >= 2 {
+		if (s[0] == '"' && s[len(s)-1] == '"') || (s[0] == '\'' && s[len(s)-1] == '\'') {
+			s = s[1 : len(s)-1]
+		}
+	}
+	s = strings.ReplaceAll(s, `\\`, `\`)
+	s = strings.ReplaceAll(s, `\'`, `'`)
+	return s
+}

pkg/types/dashboardtypes/perses_dashboard.go

@@ -0,0 +1,356 @@
+package dashboardtypes
+
+import (
+	"bytes"
+	"encoding/json"
+	"strings"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/swaggest/jsonschema-go"
+	jsonpatch "gopkg.in/evanphx/json-patch.v4"
+)
+
+const (
+	SchemaVersion       = "v6"
+	MaxTagsPerDashboard = 5
+)
+
+type DSLKey string
+
+const (
+	DSLKeyName        DSLKey = "name"
+	DSLKeyDescription DSLKey = "description"
+	DSLKeyCreatedAt   DSLKey = "created_at"
+	DSLKeyUpdatedAt   DSLKey = "updated_at"
+	DSLKeyCreatedBy   DSLKey = "created_by"
+	DSLKeyLocked      DSLKey = "locked"
+	DSLKeyPublic      DSLKey = "public"
+)
+
+// reservedDSLKeys are dashboard column-level filter names in the list-query DSL.
+// A tag whose key collides with one of these would make the DSL ambiguous, so
+// they're rejected (case-insensitively) at write time.
+var reservedDSLKeys = map[DSLKey]struct{}{
+	DSLKeyName:        {},
+	DSLKeyDescription: {},
+	DSLKeyCreatedAt:   {},
+	DSLKeyUpdatedAt:   {},
+	DSLKeyCreatedBy:   {},
+	DSLKeyLocked:      {},
+	DSLKeyPublic:      {},
+}
+
+type DashboardV2 struct {
+	types.Identifiable
+	types.TimeAuditable
+	types.UserAuditable
+
+	OrgID        valuer.UUID      `json:"orgId"`
+	Locked       bool             `json:"locked"`
+	Info         DashboardInfo    `json:"info"`
+	PublicConfig *PublicDashboard `json:"publicConfig,omitempty"`
+}
+
+// DashboardInfo is the serializable view of a dashboard's contents — what the UI renders as "the dashboard JSON".
+type DashboardInfo struct {
+	StoredDashboardInfo
+	Tags []*tagtypes.Tag `json:"tags,omitempty"`
+}
+
+// StoredDashboardInfo is exactly what serializes into the dashboard.data column.
+type StoredDashboardInfo struct {
+	Metadata DashboardMetadata `json:"metadata"`
+	Data     DashboardData     `json:"data"`
+}
+
+type DashboardMetadata struct {
+	SchemaVersion   string `json:"schemaVersion"`
+	Image           string `json:"image,omitempty"`
+	UploadedGrafana bool   `json:"uploadedGrafana"`
+}
+
+type PostableDashboardV2 struct {
+	StoredDashboardInfo
+	Tags []tagtypes.PostableTag `json:"tags,omitempty"`
+}
+
+type UpdateableDashboardV2 = PostableDashboardV2
+
+// PatchableDashboardV2 is an RFC 6902 JSON Patch document applied against a
+// PostableDashboardV2-shaped view of an existing dashboard. Patch ops can
+// target any field — including individual entries inside `data.panels`,
+// `data.panels.<id>.spec.queries`, or `tags` — without re-sending the rest of
+// the dashboard.
+type PatchableDashboardV2 struct {
+	patch jsonpatch.Patch
+}
+
+// JSONPatchDocument is the OpenAPI-facing schema for an RFC 6902 patch body.
+// PatchableDashboardV2 has only an internal `jsonpatch.Patch` field, so the
+// reflector would emit an empty schema; the handler def points at this type
+// instead so consumers see the array-of-ops shape.
+type JSONPatchDocument []JSONPatchOperation
+
+// JSONPatchOperation is one RFC 6902 op. Not every field is valid on every
+// op kind (e.g. `value` is required for add/replace/test, ignored for remove;
+// `from` is required for move/copy) — the JSON Patch RFC governs that.
+type JSONPatchOperation struct {
+	Op    string `json:"op" required:"true"`
+	Path  string `json:"path" required:"true" description:"JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /data/display/name, /data/panels/<id>, /data/panels/<id>/spec/queries/0, /tags/-."`
+	Value any    `json:"value,omitempty" description:"Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /data/panels/<id> takes a DashboardtypesPanel; /data/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /data/variables/N takes a DashboardtypesVariable; /data/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /data/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy."`
+	From  string `json:"from,omitempty" description:"Source JSON Pointer for move/copy ops; ignored for other ops."`
+}
+
+// PrepareJSONSchema constrains the `op` field to the six RFC 6902 verbs.
+func (JSONPatchOperation) PrepareJSONSchema(s *jsonschema.Schema) error {
+	op, ok := s.Properties["op"]
+	if !ok || op.TypeObject == nil {
+		return errors.NewInternalf(errors.CodeInternal, "JSONPatchOperation schema missing `op` property")
+	}
+	op.TypeObject.WithEnum("add", "remove", "replace", "move", "copy", "test")
+	s.Properties["op"] = op
+	return nil
+}
+
+func (p *PatchableDashboardV2) UnmarshalJSON(data []byte) error {
+	patch, err := jsonpatch.DecodePatch(data)
+	if err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
+	}
+	p.patch = patch
+	return nil
+}
+
+// patchableDashboardV2View is the JSON shape a patch is applied against.
+// It mirrors PostableDashboardV2 except `tags` is always emitted (even when
+// empty) — RFC 6902 `add /tags/-` requires the array to exist in the target
+// document, and PostableDashboardV2's own `omitempty` on tags would drop it.
+type patchableDashboardV2View struct {
+	StoredDashboardInfo
+	Tags []tagtypes.PostableTag `json:"tags"`
+}
+
+// Apply runs the patch against the existing dashboard. The dashboard is
+// projected into the postable JSON shape, the patch is applied, and the
+// result is decoded back into an UpdateableDashboardV2 — which re-runs
+// the full v2 validation chain.
+func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdateableDashboardV2, error) {
+	base := patchableDashboardV2View{
+		StoredDashboardInfo: existing.Info.StoredDashboardInfo,
+		Tags:                tagtypes.NewPostableTagsFromTags(existing.Info.Tags),
+	}
+	raw, err := json.Marshal(base)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal existing dashboard for patch")
+	}
+	patched, err := p.patch.Apply(raw)
+	if err != nil {
+		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
+	}
+	out := &UpdateableDashboardV2{}
+	if err := json.Unmarshal(patched, out); err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
+func (p *PostableDashboardV2) UnmarshalJSON(data []byte) error {
+	dec := json.NewDecoder(bytes.NewReader(data))
+	dec.DisallowUnknownFields()
+	type alias PostableDashboardV2
+	var tmp alias
+	if err := dec.Decode(&tmp); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
+	}
+	*p = PostableDashboardV2(tmp)
+	return p.Validate()
+}
+
+func (p *PostableDashboardV2) Validate() error {
+	if p.Metadata.SchemaVersion != SchemaVersion {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "metadata.schemaVersion must be %q, got %q", SchemaVersion, p.Metadata.SchemaVersion)
+	}
+	if p.Data.Display == nil || p.Data.Display.Name == "" {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "data.display.name is required")
+	}
+	if err := p.validateTags(); err != nil {
+		return err
+	}
+	return p.Data.Validate()
+}
+
+func (p *PostableDashboardV2) validateTags() error {
+	if len(p.Tags) > MaxTagsPerDashboard {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "a dashboard can have at most %d tags", MaxTagsPerDashboard)
+	}
+	for _, tag := range p.Tags {
+		if _, reserved := reservedDSLKeys[DSLKey(strings.ToLower(strings.TrimSpace(tag.Key)))]; reserved {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "tag key %q is reserved", tag.Key)
+		}
+	}
+	return nil
+}
+
+type GettableDashboardV2 struct {
+	types.Identifiable
+	types.TimeAuditable
+	types.UserAuditable
+
+	OrgID        valuer.UUID               `json:"orgId"`
+	Locked       bool                      `json:"locked"`
+	Info         GettableDashboardInfo     `json:"info"`
+	PublicConfig *GettablePublicDasbhboard `json:"publicConfig,omitempty"`
+}
+
+type GettableDashboardInfo struct {
+	StoredDashboardInfo
+	Tags []*tagtypes.GettableTag `json:"tags,omitempty"`
+}
+
+func NewGettableDashboardV2FromDashboardV2(dashboard *DashboardV2) *GettableDashboardV2 {
+	gettable := &GettableDashboardV2{
+		Identifiable:  dashboard.Identifiable,
+		TimeAuditable: dashboard.TimeAuditable,
+		UserAuditable: dashboard.UserAuditable,
+		OrgID:         dashboard.OrgID,
+		Locked:        dashboard.Locked,
+		Info: GettableDashboardInfo{
+			StoredDashboardInfo: dashboard.Info.StoredDashboardInfo,
+			Tags:                tagtypes.NewGettableTagsFromTags(dashboard.Info.Tags),
+		},
+	}
+	if dashboard.PublicConfig != nil {
+		gettable.PublicConfig = NewGettablePublicDashboard(dashboard.PublicConfig)
+	}
+	return gettable
+}
+
+func NewDashboardV2(orgID valuer.UUID, createdBy string, postable PostableDashboardV2, resolvedTags []*tagtypes.Tag) *DashboardV2 {
+	now := time.Now()
+
+	return &DashboardV2{
+		Identifiable:  types.Identifiable{ID: valuer.GenerateUUID()},
+		TimeAuditable: types.TimeAuditable{CreatedAt: now, UpdatedAt: now},
+		UserAuditable: types.UserAuditable{CreatedBy: createdBy, UpdatedBy: createdBy},
+		OrgID:         orgID,
+		Locked:        false,
+		Info: DashboardInfo{
+			StoredDashboardInfo: StoredDashboardInfo{
+				Metadata: postable.Metadata,
+				Data:     postable.Data,
+			},
+			Tags: resolvedTags,
+		},
+	}
+}
+
+// rejects rows that don't carry a v2-shape blob — those are pre-migration v1 dashboards that the v2 API can't render.
+func NewDashboardV2FromStorable(storable *StorableDashboard, public *StorablePublicDashboard, tags []*tagtypes.Tag) (*DashboardV2, error) {
+	metadata, _ := storable.Data["metadata"].(map[string]any)
+	if metadata == nil || metadata["schemaVersion"] != SchemaVersion {
+		return nil, errors.Newf(errors.TypeUnsupported, ErrCodeDashboardInvalidData, "dashboard %s is not in %s schema", storable.ID, SchemaVersion)
+	}
+
+	raw, err := json.Marshal(storable.Data)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal stored v2 dashboard data")
+	}
+	var stored StoredDashboardInfo
+	if err := json.Unmarshal(raw, &stored); err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "unmarshal stored v2 dashboard data")
+	}
+
+	var publicConfig *PublicDashboard
+	if public != nil {
+		publicConfig = NewPublicDashboardFromStorablePublicDashboard(public)
+	}
+
+	return &DashboardV2{
+		Identifiable:  storable.Identifiable,
+		TimeAuditable: storable.TimeAuditable,
+		UserAuditable: storable.UserAuditable,
+		OrgID:         storable.OrgID,
+		Locked:        storable.Locked,
+		Info: DashboardInfo{
+			StoredDashboardInfo: stored,
+			Tags:                tags,
+		},
+		PublicConfig: publicConfig,
+	}, nil
+}
+
+func (d *DashboardV2) CanLockUnlock(lock bool, isAdmin bool, updatedBy string) error {
+	if d.CreatedBy != updatedBy && !isAdmin {
+		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "you are not authorized to lock/unlock this dashboard")
+	}
+	if d.Locked == lock {
+		if lock {
+			return errors.Newf(errors.TypeAlreadyExists, errors.CodeAlreadyExists, "dashboard is already locked")
+		}
+		return errors.Newf(errors.TypeAlreadyExists, errors.CodeAlreadyExists, "dashboard is already unlocked")
+	}
+	return nil
+}
+
+func (d *DashboardV2) LockUnlock(lock bool, isAdmin bool, updatedBy string) error {
+	if err := d.CanLockUnlock(lock, isAdmin, updatedBy); err != nil {
+		return err
+	}
+	d.Locked = lock
+	d.UpdatedBy = updatedBy
+	d.UpdatedAt = time.Now()
+	return nil
+}
+
+func (d *DashboardV2) CanUpdate() error {
+	if d.Locked {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
+	}
+	return nil
+}
+
+func (d *DashboardV2) Update(updateable UpdateableDashboardV2, updatedBy string, resolvedTags []*tagtypes.Tag) error {
+	if err := d.CanUpdate(); err != nil {
+		return err
+	}
+	d.Info.Metadata = updateable.Metadata
+	d.Info.Data = updateable.Data
+	d.Info.Tags = resolvedTags
+	d.UpdatedBy = updatedBy
+	d.UpdatedAt = time.Now()
+	return nil
+}
+
+// ToStorableDashboard packages a Dashboard into the bun row that goes into
+// the dashboard table. Tags are intentionally omitted — they live in
+// tag_relations and are inserted separately by the caller.
+func (d *DashboardV2) ToStorableDashboard() (*StorableDashboard, error) {
+	data, err := d.Info.toStorableDashboardData()
+	if err != nil {
+		return nil, err
+	}
+	return &StorableDashboard{
+		Identifiable:  types.Identifiable{ID: d.ID},
+		TimeAuditable: d.TimeAuditable,
+		UserAuditable: d.UserAuditable,
+		OrgID:         d.OrgID,
+		Locked:        d.Locked,
+		Data:          data,
+	}, nil
+}
+
+func (s StoredDashboardInfo) toStorableDashboardData() (StorableDashboardData, error) {
+	raw, err := json.Marshal(s)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal v2 dashboard data")
+	}
+	out := StorableDashboardData{}
+	if err := json.Unmarshal(raw, &out); err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "unmarshal v2 dashboard data")
+	}
+	return out, nil
+}

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -0,0 +1,552 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"strings"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+// basePostableJSON is the postable shape of a small but realistic v2
+// dashboard used as the base document for patch tests. Each panel carries
+// one builder query in the same shape production dashboards use
+// (aggregations, filter, groupBy populated), and the dashboard has one
+// variable — the variable is not patched in any test here, that's
+// covered in a separate variable-focused suite.
+const basePostableJSON = `{
+	"metadata": {"schemaVersion": "v6"},
+	"data": {
+		"display": {"name": "Service overview"},
+		"variables": [
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "service",
+					"allowAllValue": true,
+					"allowMultiple": false,
+					"plugin": {
+						"kind": "signoz/DynamicVariable",
+						"spec": {"name": "service.name", "signal": "metrics"}
+					}
+				}
+			}
+		],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": [
+						{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "A",
+								"signal": "metrics",
+								"aggregations": [{
+									"metricName": "signoz_calls_total",
+									"temporality": "cumulative",
+									"timeAggregation": "rate",
+									"spaceAggregation": "sum"
+								}],
+								"filter": {"expression": "service.name IN $service"},
+								"groupBy": [{"name": "service.name", "fieldDataType": "string", "fieldContext": "tag"}]
+							}}}
+						}
+					]
+				}
+			},
+			"p2": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/NumberPanel", "spec": {}},
+					"queries": [
+						{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "X",
+								"signal": "metrics",
+								"aggregations": [{
+									"metricName": "signoz_latency_count",
+									"temporality": "cumulative",
+									"timeAggregation": "rate",
+									"spaceAggregation": "sum"
+								}]
+							}}}
+						}
+					]
+				}
+			}
+		},
+		"layouts": [
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": {"title": "Row 1"},
+					"items": [
+						{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+						{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
+					]
+				}
+			}
+		],
+		"duration": "1h"
+	},
+	"tags": [{"key": "team", "value": "alpha"}, {"key": "env", "value": "prod"}]
+}`
+
+func TestPatchableDashboardV2_Apply(t *testing.T) {
+	// Apply doesn't mutate the input *DashboardV2 — it marshals it to
+	// JSON, applies the patch, and unmarshals the result into a fresh
+	// struct. Sharing one base across subtests is safe.
+	var p PostableDashboardV2
+	require.NoError(t, json.Unmarshal([]byte(basePostableJSON), &p), "base postable JSON must validate")
+	base := &DashboardV2{
+		Info: DashboardInfo{
+			StoredDashboardInfo: p.StoredDashboardInfo,
+			Tags: []*tagtypes.Tag{
+				{Key: "team", Value: "alpha"},
+				{Key: "env", Value: "prod"},
+			},
+		},
+	}
+
+	decode := func(t *testing.T, body string) PatchableDashboardV2 {
+		t.Helper()
+		var patch PatchableDashboardV2
+		require.NoError(t, json.Unmarshal([]byte(body), &patch))
+		return patch
+	}
+
+	// jsonOf marshals the patched dashboard back to JSON so subtests can
+	// assert on field values without reaching into the typed plugin specs.
+	jsonOf := func(t *testing.T, out *UpdateableDashboardV2) string {
+		t.Helper()
+		raw, err := json.Marshal(out)
+		require.NoError(t, err)
+		return string(raw)
+	}
+
+	// ─────────────────────────────────────────────────────────────────
+	// Successful patches
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("no-op preserves all fields", func(t *testing.T) {
+		out, err := decode(t, `[]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, base.Info.Metadata, out.Metadata)
+		assert.Equal(t, base.Info.Data.Display.Name, out.Data.Display.Name)
+		require.Equal(t, len(base.Info.Data.Panels), len(out.Data.Panels))
+		for k, panel := range base.Info.Data.Panels {
+			require.Contains(t, out.Data.Panels, k)
+			assert.Equal(t, panel.Spec.Plugin.Kind, out.Data.Panels[k].Spec.Plugin.Kind)
+		}
+		assert.Len(t, out.Tags, len(base.Info.Tags))
+		assert.Len(t, out.Data.Variables, len(base.Info.Data.Variables))
+		assert.Len(t, out.Data.Layouts, len(base.Info.Data.Layouts))
+	})
+
+	t.Run("add metadata image", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/metadata/image", "value": "https://example.com/img.png"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "https://example.com/img.png", out.Metadata.Image)
+		assert.Equal(t, SchemaVersion, out.Metadata.SchemaVersion, "schemaVersion preserved")
+	})
+
+	t.Run("replace display name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/data/display/name", "value": "Renamed"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Renamed", out.Data.Display.Name)
+	})
+
+	// Per RFC 6902 § 4.1, `add` on an existing object member replaces the
+	// existing value rather than erroring — same effect as `replace`.
+	t.Run("add overwrites existing display name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/data/display/name", "value": "Overwritten"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Overwritten", out.Data.Display.Name)
+	})
+
+	t.Run("add data refreshInterval", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/data/refreshInterval", "value": "30s"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "30s", string(out.Data.RefreshInterval))
+	})
+
+	t.Run("add panel leaves others untouched", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/data/panels/p3",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+					"queries": [{
+						"kind": "TimeSeriesQuery",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A",
+							"signal": "logs",
+							"aggregations": [{"expression": "count()"}]
+						}}}
+					}]
+				}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Data.Panels, 3)
+		assert.Contains(t, out.Data.Panels, "p1")
+		assert.Contains(t, out.Data.Panels, "p2")
+		assert.Contains(t, out.Data.Panels, "p3")
+	})
+
+	t.Run("replace single panel", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/data/panels/p2",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/BarChartPanel", "spec": {}},
+					"queries": [{
+						"kind": "TimeSeriesQuery",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A",
+							"signal": "metrics",
+							"aggregations": [{
+								"metricName": "signoz_calls_total",
+								"temporality": "cumulative",
+								"timeAggregation": "rate",
+								"spaceAggregation": "sum"
+							}]
+						}}}
+					}]
+				}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, PanelPluginKind("signoz/BarChartPanel"), out.Data.Panels["p2"].Spec.Plugin.Kind)
+		assert.Equal(t, PanelPluginKind("signoz/TimeSeriesPanel"), out.Data.Panels["p1"].Spec.Plugin.Kind, "p1 untouched")
+	})
+
+	// Removing a panel realistically also drops its layout item — exercise
+	// the multi-op shape the UI sends.
+	t.Run("remove panel and its layout item", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "remove", "path": "/data/panels/p2"},
+			{"op": "remove", "path": "/data/layouts/0/spec/items/1"}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Data.Panels, 1)
+		assert.Contains(t, out.Data.Panels, "p1")
+		assert.NotContains(t, out.Data.Panels, "p2")
+		raw := jsonOf(t, out)
+		assert.NotContains(t, raw, `"$ref":"#/spec/panels/p2"`)
+		assert.Contains(t, raw, `"$ref":"#/spec/panels/p1"`)
+	})
+
+	// The headline use case: edit a single field of a single query inside
+	// one panel without re-sending any other part of the dashboard.
+	t.Run("rename single query inside panel", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/data/panels/p1/spec/queries/0/spec/plugin/spec/name",
+			"value": "renamed"
+		}]`).Apply(base)
+		require.NoError(t, err)
+
+		require.Len(t, out.Data.Panels["p1"].Spec.Queries, 1)
+		assert.Contains(t, jsonOf(t, out), `"name":"renamed"`)
+	})
+
+	// Replace a query at a specific index — swaps query "A" out for "B"
+	// without re-sending the rest of the panel.
+	t.Run("replace query at index", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/data/panels/p1/spec/queries/0",
+			"value": {
+				"kind": "TimeSeriesQuery",
+				"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+					"name": "B",
+					"signal": "metrics",
+					"aggregations": [{
+						"metricName": "signoz_db_calls_total",
+						"temporality": "cumulative",
+						"timeAggregation": "rate",
+						"spaceAggregation": "sum"
+					}]
+				}}}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Data.Panels["p1"].Spec.Queries, 1)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"name":"B"`)
+		assert.NotContains(t, raw, `"name":"A"`)
+	})
+
+	// ─────────────────────────────────────────────────────────────────
+	// Layout edits
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/data/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
+		require.NoError(t, err)
+		raw := jsonOf(t, out)
+		// The first item used to live at x=0, now lives at x=6.
+		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+	})
+
+	t.Run("resize panel by editing layout width", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/data/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
+		require.NoError(t, err)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"width":12`)
+	})
+
+	t.Run("rename layout row title", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/data/layouts/0/spec/display/title", "value": "Latency"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Contains(t, jsonOf(t, out), `"title":"Latency"`)
+	})
+
+	t.Run("append layout item", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/data/layouts/0/spec/items/-",
+			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		// Item count went 2 → 3.
+		raw := jsonOf(t, out)
+		assert.Equal(t, 3, strings.Count(raw, `"$ref":"#/spec/panels/`))
+	})
+
+	// Composing add-panel + add-layout-item is the realistic shape of the
+	// "add a new chart to my dashboard" UI flow — exercise it end-to-end.
+	t.Run("add panel and corresponding layout item", func(t *testing.T) {
+		out, err := decode(t, `[
+			{
+				"op": "add",
+				"path": "/data/panels/p3",
+				"value": {
+					"kind": "Panel",
+					"spec": {
+						"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+						"queries": [{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "A",
+								"signal": "logs",
+								"aggregations": [{"expression": "count()"}]
+							}}}
+						}]
+					}
+				}
+			},
+			{
+				"op": "add",
+				"path": "/data/layouts/0/spec/items/-",
+				"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}
+			}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Data.Panels, 3)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"$ref":"#/spec/panels/p3"`)
+	})
+
+	t.Run("append tag", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "env", "value": "staging"}}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 3)
+		assert.Equal(t, "env", out.Tags[2].Key)
+		assert.Equal(t, "staging", out.Tags[2].Value)
+	})
+
+	t.Run("append tag when none exist", func(t *testing.T) {
+		noTagsBase := &DashboardV2{
+			Info: DashboardInfo{
+				StoredDashboardInfo: base.Info.StoredDashboardInfo,
+				Tags:                nil,
+			},
+		}
+		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "team", "value": "new"}}]`).Apply(noTagsBase)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 1)
+		assert.Equal(t, "team", out.Tags[0].Key)
+		assert.Equal(t, "new", out.Tags[0].Value)
+	})
+
+	t.Run("replace tag value", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/tags/0/value", "value": "beta"}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 2)
+		assert.Equal(t, "team", out.Tags[0].Key)
+		assert.Equal(t, "beta", out.Tags[0].Value)
+		assert.Equal(t, "env", out.Tags[1].Key, "tag at index 1 untouched")
+		assert.Equal(t, "prod", out.Tags[1].Value, "tag at index 1 untouched")
+		for _, tag := range out.Tags {
+			assert.NotEqual(t, "alpha", tag.Value, "old tag value must be gone")
+		}
+	})
+
+	t.Run("multiple ops applied in order", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "replace", "path": "/data/display/name", "value": "Multi-step"},
+			{"op": "remove",  "path": "/data/panels/p2"},
+			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Multi-step", out.Data.Display.Name)
+		assert.Len(t, out.Data.Panels, 1)
+		assert.Len(t, out.Tags, 3)
+	})
+
+	// `test` is an RFC 6902 precondition op: aborts the patch if the value
+	// at the path doesn't equal the supplied value. Used for optimistic
+	// concurrency. Here it matches, so the subsequent ops apply.
+	t.Run("test op passes", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "test",    "path": "/data/display/name", "value": "Service overview"},
+			{"op": "replace", "path": "/data/display/name", "value": "Confirmed"}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Confirmed", out.Data.Display.Name)
+	})
+
+	// ─────────────────────────────────────────────────────────────────
+	// Failure cases
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("decode rejects non-array body", func(t *testing.T) {
+		var patch PatchableDashboardV2
+		err := json.Unmarshal([]byte(`{"op": "replace"}`), &patch)
+		require.Error(t, err)
+	})
+
+	t.Run("decode rejects malformed JSON", func(t *testing.T) {
+		var patch PatchableDashboardV2
+		// Outer json.Unmarshal rejects non-JSON before PatchableDashboardV2's
+		// UnmarshalJSON runs, so the error is a stdlib SyntaxError rather
+		// than the InvalidInput-classified wrap.
+		err := json.Unmarshal([]byte(`not json`), &patch)
+		require.Error(t, err)
+	})
+
+	// `test` precondition fails — the whole patch is rejected, including
+	// the subsequent replace.
+	t.Run("test op failure rejected", func(t *testing.T) {
+		_, err := decode(t, `[
+			{"op": "test", "path": "/data/display/name", "value": "Wrong"},
+			{"op": "replace", "path": "/data/display/name", "value": "Should not apply"}
+		]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("remove at missing path rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "remove", "path": "/data/panels/does-not-exist"}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("remove schemaVersion rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "remove", "path": "/metadata/schemaVersion"}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("wrong schemaVersion rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "replace", "path": "/metadata/schemaVersion", "value": "v5"}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), SchemaVersion)
+	})
+
+	t.Run("empty display name rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "replace", "path": "/data/display/name", "value": ""}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "data.display.name is required")
+	})
+
+	t.Run("unknown top-level field rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "add", "path": "/bogus", "value": 42}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "bogus")
+	})
+
+	t.Run("invalid panel kind rejected", func(t *testing.T) {
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/data/panels/p1",
+			"value": {
+				"kind": "Panel",
+				"spec": {"plugin": {"kind": "signoz/NotAPanel", "spec": {}}}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "NotAPanel")
+	})
+
+	t.Run("query kind incompatible with panel rejected", func(t *testing.T) {
+		// PromQLQuery is not allowed on ListPanel — verify the cross-check
+		// in Validate still runs after a patch.
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/data/panels/p2",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/ListPanel", "spec": {}},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("removing the only query rejected", func(t *testing.T) {
+		// Validate requires exactly one query per panel — leaving zero is rejected.
+		_, err := decode(t, `[{"op": "remove", "path": "/data/panels/p2/spec/queries/0"}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "panel must have one query")
+	})
+
+	t.Run("two direct queries rejected", func(t *testing.T) {
+		// Validate requires exactly one query per panel. To display multiple
+		// data sources in one panel, wrap them in a CompositeQuery (see the
+		// "replace query with composite" subtest below).
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/data/panels/p1",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": [
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A", "signal": "metrics",
+							"aggregations": [{"metricName": "signoz_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
+						}}}},
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "B", "signal": "metrics",
+							"aggregations": [{"metricName": "signoz_db_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
+						}}}}
+					]
+				}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "panel must have one query")
+	})
+
+	t.Run("too many tags rejected", func(t *testing.T) {
+		_, err := decode(t, `[
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "1"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "2"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "3"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "4"}}
+		]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "at most")
+	})
+}

pkg/types/dashboardtypes/pinned_dashboard.go

@@ -0,0 +1,22 @@
+package dashboardtypes
+
+import (
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+)
+
+const MaxPinnedDashboardsPerUser = 10
+
+var ErrCodePinnedDashboardLimitHit = errors.MustNewCode("pinned_dashboard_limit_hit")
+
+type PinnedDashboard struct {
+	bun.BaseModel `bun:"table:pinned_dashboard,alias:pinned_dashboard"`
+
+	UserID      valuer.UUID `bun:"user_id,pk,type:text"`
+	DashboardID valuer.UUID `bun:"dashboard_id,pk,type:text"`
+	OrgID       valuer.UUID `bun:"org_id,type:text,notnull"`
+	PinnedAt    time.Time   `bun:"pinned_at,notnull,default:current_timestamp"`
+}

pkg/types/dashboardtypes/store.go

@@ -32,4 +32,21 @@ type Store interface {
 	DeletePublic(context.Context, string) error
 
 	RunInTx(context.Context, func(context.Context) error) error
+
+	// ════════════════════════════════════════════════════════════════════════
+	// v2 dashboard methods
+	// ════════════════════════════════════════════════════════════════════════
+	GetV2(context.Context, valuer.UUID, valuer.UUID) (*StorableDashboard, *StorablePublicDashboard, error)
+
+	UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data StorableDashboardData) error
+
+	LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, locked bool, updatedBy string) error
+
+	// bool return is hasMore — the store fetches Limit+1 to detect it.
+	ListV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, params *ListDashboardsV2Params) ([]*DashboardListRow, bool, error)
+
+	// Returns ErrCodePinnedDashboardLimitHit when the user is at MaxPinnedDashboardsPerUser.
+	PinForUser(ctx context.Context, pd *PinnedDashboard) error
+
+	UnpinForUser(ctx context.Context, userID valuer.UUID, dashboardID valuer.UUID) error
 }

pkg/types/tagtypes/store.go

@@ -0,0 +1,30 @@
+package tagtypes
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Store interface {
+	List(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind) ([]*Tag, error)
+
+	ListByResource(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID) ([]*Tag, error)
+
+	ListByResources(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceIDs []valuer.UUID) (map[valuer.UUID][]*Tag, error)
+
+	// CreateOrGet upserts the given tags and returns them with authoritative IDs.
+	// On conflict on (org_id, kind, LOWER(key), LOWER(value)) — which
+	// happens only when a concurrent insert raced ours, including casing-only
+	// collisions — the returned entry carries the existing row's ID rather
+	// than the pre-generated one in the input.
+	CreateOrGet(ctx context.Context, tags []*Tag) ([]*Tag, error)
+
+	// CreateRelations inserts tag-resource relations. Conflicts on the composite primary key are ignored.
+	CreateRelations(ctx context.Context, relations []*TagRelation) error
+
+	DeleteRelationsExcept(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind, resourceID valuer.UUID, keepTagIDs []valuer.UUID) error
+
+	RunInTx(ctx context.Context, cb func(ctx context.Context) error) error
+}

pkg/types/tagtypes/tag.go

@@ -0,0 +1,113 @@
+package tagtypes
+
+import (
+	"regexp"
+	"strings"
+	"time"
+	"unicode/utf8"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+)
+
+const (
+	MAX_LEN_TAG_KEY   = 32
+	MAX_LEN_TAG_VALUE = 32
+)
+
+var (
+	tagKeyRegex   = regexp.MustCompile(`^[a-zA-Z$_@{#][a-zA-Z0-9$_@#{}:/-]*$`)
+	tagValueRegex = regexp.MustCompile(`^[a-zA-Z0-9$_@#{}:.+=/-]*$`)
+
+	ErrCodeTagInvalidKey   = errors.MustNewCode("tag_invalid_key")
+	ErrCodeTagInvalidValue = errors.MustNewCode("tag_invalid_value")
+	ErrCodeTagNotFound     = errors.MustNewCode("tag_not_found")
+)
+
+type Tag struct {
+	bun.BaseModel `bun:"table:tag,alias:tag"`
+
+	types.Identifiable
+	types.TimeAuditable
+	Key   string         `json:"key" required:"true" bun:"key,type:text,notnull"`
+	Value string         `json:"value" required:"true" bun:"value,type:text,notnull"`
+	OrgID valuer.UUID    `json:"orgId" required:"true" bun:"org_id,type:text,notnull"`
+	Kind  coretypes.Kind `json:"kind" required:"true" bun:"kind,type:text,notnull"`
+}
+
+type PostableTag struct {
+	Key   string `json:"key" required:"true"`
+	Value string `json:"value" required:"true"`
+}
+
+type GettableTag = PostableTag
+
+func NewGettableTagFromTag(tag *Tag) *GettableTag {
+	return &GettableTag{Key: tag.Key, Value: tag.Value}
+}
+
+func NewGettableTagsFromTags(tags []*Tag) []*GettableTag {
+	out := make([]*GettableTag, len(tags))
+	for i, t := range tags {
+		out[i] = NewGettableTagFromTag(t)
+	}
+	return out
+}
+
+func NewPostableTagFromTag(tag *Tag) PostableTag {
+	return PostableTag{Key: tag.Key, Value: tag.Value}
+}
+
+func NewPostableTagsFromTags(tags []*Tag) []PostableTag {
+	out := make([]PostableTag, len(tags))
+	for i, t := range tags {
+		out[i] = NewPostableTagFromTag(t)
+	}
+	return out
+}
+
+func NewTag(orgID valuer.UUID, kind coretypes.Kind, key, value string) *Tag {
+	now := time.Now()
+	return &Tag{
+		Identifiable: types.Identifiable{ID: valuer.GenerateUUID()},
+		TimeAuditable: types.TimeAuditable{
+			CreatedAt: now,
+			UpdatedAt: now,
+		},
+		Key:   key,
+		Value: value,
+		OrgID: orgID,
+		Kind:  kind,
+	}
+}
+
+// ValidatePostableTag trims and validates a user-supplied (key, value) pair.
+// Returns the cleaned values on success. Entity-specific reserved-key checks
+// (e.g. dashboard column names that would collide with the list-query DSL) are
+// the caller's responsibility — perform them before calling into the tag module.
+func ValidatePostableTag(p PostableTag) (string, string, error) {
+	key := strings.TrimSpace(p.Key)
+	value := strings.TrimSpace(p.Value)
+	if key == "" {
+		return "", "", errors.Newf(errors.TypeInvalidInput, ErrCodeTagInvalidKey, "tag key cannot be empty")
+	}
+	if value == "" {
+		return "", "", errors.Newf(errors.TypeInvalidInput, ErrCodeTagInvalidValue, "tag value cannot be empty")
+	}
+	if !tagKeyRegex.MatchString(key) {
+		return "", "", errors.Newf(errors.TypeInvalidInput, ErrCodeTagInvalidKey, "tag key %q contains disallowed characters", key)
+	}
+	if !tagValueRegex.MatchString(value) {
+		return "", "", errors.Newf(errors.TypeInvalidInput, ErrCodeTagInvalidValue, "tag value %q contains disallowed characters", value)
+	}
+	if utf8.RuneCountInString(key) > MAX_LEN_TAG_KEY {
+		return "", "", errors.Newf(errors.TypeInvalidInput, ErrCodeTagInvalidKey, "tag key %q exceeds the %d-character limit", key, MAX_LEN_TAG_KEY)
+	}
+	if utf8.RuneCountInString(value) > MAX_LEN_TAG_VALUE {
+		return "", "", errors.Newf(errors.TypeInvalidInput, ErrCodeTagInvalidValue, "tag value %q exceeds the %d-character limit", value, MAX_LEN_TAG_VALUE)
+	}
+	return key, value, nil
+}

pkg/types/tagtypes/tag_relation.go

@@ -0,0 +1,34 @@
+package tagtypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/uptrace/bun"
+)
+
+type TagRelation struct {
+	bun.BaseModel `bun:"table:tag_relation,alias:tag_relation"`
+
+	types.Identifiable
+	Kind       coretypes.Kind `json:"kind" required:"true" bun:"kind,type:text,notnull"`
+	ResourceID valuer.UUID    `json:"resourceId" required:"true" bun:"resource_id,type:text,notnull"`
+	TagID      valuer.UUID    `json:"tagId" required:"true" bun:"tag_id,type:text,notnull"`
+}
+
+func NewTagRelation(kind coretypes.Kind, resourceID valuer.UUID, tagID valuer.UUID) *TagRelation {
+	return &TagRelation{
+		Identifiable: types.Identifiable{ID: valuer.GenerateUUID()},
+		Kind:         kind,
+		ResourceID:   resourceID,
+		TagID:        tagID,
+	}
+}
+
+func NewTagRelations(kind coretypes.Kind, resourceID valuer.UUID, tagIDs []valuer.UUID) []*TagRelation {
+	relations := make([]*TagRelation, 0, len(tagIDs))
+	for _, tagID := range tagIDs {
+		relations = append(relations, NewTagRelation(kind, resourceID, tagID))
+	}
+	return relations
+}

pkg/types/tagtypes/tag_test.go

@@ -0,0 +1,69 @@
+package tagtypes
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestValidatePostableTag(t *testing.T) {
+	tests := []struct {
+		name      string
+		input     PostableTag
+		wantKey   string
+		wantValue string
+		wantError bool
+	}{
+		{name: "simple pair", input: PostableTag{Key: "team", Value: "pulse"}, wantKey: "team", wantValue: "pulse"},
+		{name: "preserves casing", input: PostableTag{Key: "Team", Value: "Pulse"}, wantKey: "Team", wantValue: "Pulse"},
+		{name: "trims key", input: PostableTag{Key: "  team  ", Value: "pulse"}, wantKey: "team", wantValue: "pulse"},
+		{name: "trims value", input: PostableTag{Key: "team", Value: "  pulse  "}, wantKey: "team", wantValue: "pulse"},
+
+		{name: "empty key rejected", input: PostableTag{Key: "", Value: "pulse"}, wantError: true},
+		{name: "empty value rejected", input: PostableTag{Key: "team", Value: ""}, wantError: true},
+		{name: "whitespace-only key rejected", input: PostableTag{Key: "   ", Value: "pulse"}, wantError: true},
+		{name: "whitespace-only value rejected", input: PostableTag{Key: "team", Value: "   "}, wantError: true},
+
+		{name: "slash accepted", input: PostableTag{Key: "team/eng", Value: "pulse/events"}, wantKey: "team/eng", wantValue: "pulse/events"},
+		{name: "colon accepted", input: PostableTag{Key: "team:eng", Value: "env:prod"}, wantKey: "team:eng", wantValue: "env:prod"},
+		{name: "extra punctuation accepted in both", input: PostableTag{Key: "a_b-c@d#e$f{g}h", Value: "a_b-c@d#e$f{g}h"}, wantKey: "a_b-c@d#e$f{g}h", wantValue: "a_b-c@d#e$f{g}h"},
+
+		// Key is strict; value allows the extra `. + =` plus leading digits.
+		{name: "dot in key rejected", input: PostableTag{Key: "team.eng", Value: "pulse"}, wantError: true},
+		{name: "dot in value accepted", input: PostableTag{Key: "team", Value: "pulse.events"}, wantKey: "team", wantValue: "pulse.events"},
+		{name: "plus in key rejected", input: PostableTag{Key: "team+eng", Value: "pulse"}, wantError: true},
+		{name: "plus in value accepted", input: PostableTag{Key: "team", Value: "a+b"}, wantKey: "team", wantValue: "a+b"},
+		{name: "equals in key rejected", input: PostableTag{Key: "team=eng", Value: "pulse"}, wantError: true},
+		{name: "equals in value accepted", input: PostableTag{Key: "team", Value: "a=b"}, wantKey: "team", wantValue: "a=b"},
+		{name: "leading digit in key rejected", input: PostableTag{Key: "2024team", Value: "pulse"}, wantError: true},
+		{name: "leading digit in value accepted", input: PostableTag{Key: "team", Value: "2024_team"}, wantKey: "team", wantValue: "2024_team"},
+
+		{name: "unicode letter in key rejected", input: PostableTag{Key: "チーム", Value: "pulse"}, wantError: true},
+		{name: "unicode letter in value rejected", input: PostableTag{Key: "team", Value: "東京"}, wantError: true},
+
+		{name: "internal space in key rejected", input: PostableTag{Key: "team eng", Value: "pulse"}, wantError: true},
+		{name: "internal space in value rejected", input: PostableTag{Key: "team", Value: "pulse two"}, wantError: true},
+
+		{name: "disallowed char in key rejected", input: PostableTag{Key: "team!eng", Value: "pulse"}, wantError: true},
+		{name: "disallowed char in value rejected", input: PostableTag{Key: "team", Value: "pulse!one"}, wantError: true},
+		{name: "control char rejected", input: PostableTag{Key: "team\tone", Value: "pulse"}, wantError: true},
+
+		{name: "key at the 32-char limit accepted", input: PostableTag{Key: "abcdefghijklmnopabcdefghijklmnop", Value: "pulse"}, wantKey: "abcdefghijklmnopabcdefghijklmnop", wantValue: "pulse"},
+		{name: "value at the 32-char limit accepted", input: PostableTag{Key: "team", Value: "abcdefghijklmnopabcdefghijklmnop"}, wantKey: "team", wantValue: "abcdefghijklmnopabcdefghijklmnop"},
+		{name: "key over the 32-char limit rejected", input: PostableTag{Key: "abcdefghijklmnopabcdefghijklmnopq", Value: "pulse"}, wantError: true},
+		{name: "value over the 32-char limit rejected", input: PostableTag{Key: "team", Value: "abcdefghijklmnopabcdefghijklmnopq"}, wantError: true},
+	}
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			gotKey, gotValue, err := ValidatePostableTag(tc.input)
+			if tc.wantError {
+				require.Error(t, err)
+				return
+			}
+			require.NoError(t, err)
+			assert.Equal(t, tc.wantKey, gotKey)
+			assert.Equal(t, tc.wantValue, gotValue)
+		})
+	}
+}

pkg/types/tagtypes/tagtypestest/store.go

@@ -0,0 +1,53 @@
+package tagtypestest
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// MockStore is an in-memory tagtypes.MockStore implementation for tests. Most methods
+// are inert no-ops; List returns the contents of Tags and increments
+// ListCallCount so tests can assert on lookup behavior. Set Tags directly to
+// preload fixtures.
+type MockStore struct {
+	Tags          []*tagtypes.Tag
+	ListCallCount int
+}
+
+func NewStore() *MockStore {
+	return &MockStore{}
+}
+
+func (s *MockStore) List(_ context.Context, _ valuer.UUID, _ coretypes.Kind) ([]*tagtypes.Tag, error) {
+	s.ListCallCount++
+	out := make([]*tagtypes.Tag, len(s.Tags))
+	copy(out, s.Tags)
+	return out, nil
+}
+
+func (s *MockStore) CreateOrGet(_ context.Context, tags []*tagtypes.Tag) ([]*tagtypes.Tag, error) {
+	return tags, nil
+}
+
+func (s *MockStore) CreateRelations(_ context.Context, _ []*tagtypes.TagRelation) error {
+	return nil
+}
+
+func (s *MockStore) ListByResource(_ context.Context, _ valuer.UUID, _ coretypes.Kind, _ valuer.UUID) ([]*tagtypes.Tag, error) {
+	return []*tagtypes.Tag{}, nil
+}
+
+func (s *MockStore) ListByResources(_ context.Context, _ valuer.UUID, _ coretypes.Kind, _ []valuer.UUID) (map[valuer.UUID][]*tagtypes.Tag, error) {
+	return map[valuer.UUID][]*tagtypes.Tag{}, nil
+}
+
+func (s *MockStore) DeleteRelationsExcept(_ context.Context, _ valuer.UUID, _ coretypes.Kind, _ valuer.UUID, _ []valuer.UUID) error {
+	return nil
+}
+
+func (s *MockStore) RunInTx(ctx context.Context, cb func(ctx context.Context) error) error {
+	return cb(ctx)
+}

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -0,0 +1,288 @@
+import json
+from collections.abc import Callable
+from http import HTTPStatus
+from pathlib import Path
+
+import pytest
+import requests
+
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+from fixtures.types import Operation, SigNoz
+
+_PERSES_FIXTURE = (
+    Path(__file__).parents[4]
+    / "pkg/types/dashboardtypes/dashboardtypesv2/testdata/perses.json"
+)
+
+
+def _post_dashboard(signoz: SigNoz, token: str, body: dict) -> requests.Response:
+    return requests.post(
+        signoz.self.host_configs["8080"].get("/api/v2/dashboards"),
+        json=body,
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=2,
+    )
+
+
+def test_empty_body_rejected_for_missing_schema_version(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = _post_dashboard(signoz, admin_token, {})
+
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    body = response.json()
+    assert body["status"] == "error"
+    assert body["error"]["code"] == "dashboard_invalid_input"
+    assert body["error"]["message"] == 'metadata.schemaVersion must be "v6", got ""'
+
+
+def test_missing_display_name_rejected(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = _post_dashboard(signoz, admin_token, {"metadata": {"schemaVersion": "v6"}})
+
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    body = response.json()
+    assert body["status"] == "error"
+    assert body["error"]["code"] == "dashboard_invalid_input"
+    assert body["error"]["message"] == "data.display.name is required"
+
+
+def test_minimal_valid_body_creates_dashboard(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = _post_dashboard(
+        signoz,
+        admin_token,
+        {
+            "metadata": {"schemaVersion": "v6"},
+            "data": {"display": {"name": "test name"}},
+        },
+    )
+
+    assert response.status_code == HTTPStatus.CREATED
+    body = response.json()
+    assert body["status"] == "success"
+    data = body["data"]
+    assert data["info"]["data"]["display"]["name"] == "test name"
+    assert data["info"]["metadata"]["schemaVersion"] == "v6"
+
+
+def test_unknown_root_field_rejected(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = _post_dashboard(
+        signoz,
+        admin_token,
+        {
+            "metadata": {"schemaVersion": "v6"},
+            "data": {"display": {"name": "test name"}},
+            "unknownfieldattheroot": "shouldgiveanerror",
+        },
+    )
+
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    body = response.json()
+    assert body["status"] == "error"
+    assert body["error"]["code"] == "dashboard_invalid_input"
+    assert body["error"]["message"] == 'json: unknown field "unknownfieldattheroot"'
+
+
+def test_unknown_nested_field_rejected(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = _post_dashboard(
+        signoz,
+        admin_token,
+        {
+            "metadata": {"schemaVersion": "v6"},
+            "data": {
+                "display": {
+                    "name": "test name",
+                    "unknownfieldinside": "shouldgiveanerror",
+                },
+            },
+        },
+    )
+
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    body = response.json()
+    assert body["status"] == "error"
+    assert body["error"]["code"] == "dashboard_invalid_input"
+    assert body["error"]["message"] == 'json: unknown field "unknownfieldinside"'
+
+
+def test_perses_fixture_creates_dashboard(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    """The perses.json fixture is the kitchen-sink dashboard the schema tests
+    use; round-tripping it through the create API exercises the full plugin
+    surface end-to-end."""
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    data = json.loads(_PERSES_FIXTURE.read_text())
+    response = _post_dashboard(
+        signoz,
+        admin_token,
+        {"metadata": {"schemaVersion": "v6"}, "data": data},
+    )
+
+    assert response.status_code == HTTPStatus.CREATED
+    body = response.json()
+    assert body["status"] == "success"
+    assert body["data"]["info"]["data"]["display"]["name"] == data["display"]["name"]
+
+
+def test_tag_casing_is_inherited_from_existing_parent(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    """A second dashboard tagged with a sibling under a casing-variant parent
+    path should adopt the existing parent's casing while keeping the
+    user-supplied casing for the new leaf segment."""
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    first = _post_dashboard(
+        signoz,
+        admin_token,
+        {
+            "metadata": {"schemaVersion": "v6"},
+            "data": {"display": {"name": "dac"}},
+            "tags": [{"name": "engineering/US/NYC"}],
+        },
+    )
+    assert first.status_code == HTTPStatus.CREATED
+    first_tags = first.json()["data"]["info"]["tags"]
+    assert first_tags == [{"name": "engineering/US/NYC"}]
+
+    second = _post_dashboard(
+        signoz,
+        admin_token,
+        {
+            "metadata": {"schemaVersion": "v6"},
+            "data": {"display": {"name": "dac"}},
+            "tags": [{"name": "engineering/us/SF"}],
+        },
+    )
+    assert second.status_code == HTTPStatus.CREATED
+    second_tags = second.json()["data"]["info"]["tags"]
+    assert second_tags == [{"name": "engineering/US/SF"}]
+
+
+# ─── list filter DSL ─────────────────────────────────────────────────────────
+# All fixtures carry a marker tag so each test query can be ANDed with
+# `tag = '__lst_v2_filter_test'` server-side. That guarantees no leakage
+# from any other test file/module sharing the session-scoped DB. The marker
+# rules out a `tag NOT EXISTS` case (a fixture that's no-tags by design
+# can't also carry the marker) — that operator is covered by the visitor
+# unit tests in pkg/types/dashboardtypes/listfilter.
+
+_LIST_FIXTURE_MARKER_TAG = "__lst_v2_filter_test"
+
+_LIST_FIXTURE_DASHBOARDS = [
+    ("lst-overview-prod", ["team/pulse", "prod", "team/frontend"]),
+    ("lst-overview-dev", ["team/pulse", "dev"]),
+    ("lst-database-prod", ["team/storage", "prod", "database/postgres"]),
+    ("lst-database-test", ["team/storage", "test", "database/redis"]),
+    ("lst-frontend-team", ["team/pulse", "team/frontend"]),
+]
+
+
+@pytest.fixture(name="list_fixture_dashboards", scope="module")
+def list_fixture_dashboards(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+) -> None:
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    for name, tags in _LIST_FIXTURE_DASHBOARDS:
+        body: dict = {
+            "metadata": {"schemaVersion": "v6"},
+            "data": {"display": {"name": name}},
+            "tags": [{"name": t} for t in [*tags, _LIST_FIXTURE_MARKER_TAG]],
+        }
+        response = _post_dashboard(signoz, admin_token, body)
+        assert response.status_code == HTTPStatus.CREATED, response.text
+
+
+@pytest.mark.parametrize(
+    ("filter_query", "expected_names"),
+    [
+        (
+            "name = 'lst-overview-prod' AND tag = 'team/frontend'",
+            {"lst-overview-prod"},
+        ),
+        (
+            "name LIKE 'database/%' AND tag = 'team/storage'",
+            {"lst-database-prod", "lst-database-test"},
+        ),
+        (
+            "(name CONTAINS 'overview' OR name CONTAINS 'frontend') AND tag NOT IN ['dev']",
+            {"lst-overview-prod", "lst-frontend-team"},
+        ),
+        (
+            "NOT tag = 'prod' AND name CONTAINS 'lst-'",
+            {"lst-overview-dev", "lst-database-test", "lst-frontend-team"},
+        ),
+        (
+            "tag = 'team/pulse' AND tag != 'dev'",
+            {"lst-overview-prod", "lst-frontend-team"},
+        ),
+        (
+            "tag IN ['dev', 'test'] OR name = 'lst-overview-prod'",
+            {"lst-overview-dev", "lst-database-test", "lst-overview-prod"},
+        ),
+        (
+            "tag = 'team/pulse' AND tag LIKE 'database/%'",
+            {"lst-overview-dev", "lst-database-test", "lst-overview-prod"},
+        ),
+    ],
+)
+def test_list_v2_filter_dsl(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    list_fixture_dashboards: None,  # pylint: disable=unused-argument
+    filter_query: str,
+    expected_names: set[str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    scoped_query = f"({filter_query}) AND tag = '{_LIST_FIXTURE_MARKER_TAG}'"
+    response = requests.get(
+        signoz.self.host_configs["8080"].get("/api/v2/dashboards"),
+        params={"query": scoped_query, "limit": 200},
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+    assert response.status_code == HTTPStatus.OK, response.text
+    body = response.json()
+    assert body["status"] == "success"
+
+    returned_names = {
+        d["info"]["data"]["display"]["name"] for d in body["data"]["dashboards"]
+    }
+    assert returned_names == expected_names