chore(llm-observability): fork shared traces explorer files (#12795)

#### Description

- Copies, unmodified, the traces explorer files that the AI
observability explorer is about to diverge from. The point is the *next*
PR (#12796): with this baseline landed, that diff shows only the real
changes instead of ~1000 lines of brand-new files.
- No behaviour change. Nothing outside the fork imports the new copies
yet — the explorer's views are wired to them in #12796, alongside the
changes that need them.


Sources, all taken from this PR's merge base:

| Copied to `container/LLMObservability/` | Source |
| --- | --- |
| `ToolbarActions/LeftToolbarActions.tsx` |
`container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx`
|
| `ToolbarActions/ToolbarActions.styles.scss` |
`container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss`
|
| `Explorer/aiActions.ts` | `pages/TracesExplorer/aiActions.ts` |
| `Explorer/Controls/*` | `container/TracesExplorer/Controls/*` |
| `Explorer/TraceLoading/*` | `container/TracesExplorer/TraceLoading/*`
|
| `Explorer/TracesTable/*` | `container/TracesExplorer/TracesTable/*` |
| `Explorer/ListView/utils.tsx` |
`container/TracesExplorer/ListView/utils.tsx` |

#### Issues closed by this PR

#### Screenshots / Screen Recordings

#### Additional Information

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

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

@@ -0,0 +1,14 @@
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.3rem;
+	margin: 8px 0;
+}
+
+.optionsTrigger {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	cursor: pointer;
+}

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

@@ -0,0 +1,82 @@
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Settings } from '@signozhq/icons';
+import FieldsSelector from 'components/FieldsSelector';
+import Controls, { ControlsProps } from 'container/Controls';
+import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
+import { DataSource } from 'types/common/queryBuilder';
+
+import styles from './Controls.module.scss';
+
+function TraceExplorerControls({
+	isLoading,
+	totalCount,
+	perPageOptions,
+	config,
+	showSizeChanger = true,
+}: TraceExplorerControlsProps): JSX.Element | null {
+	const { t } = useTranslation(['trace']);
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
+	const {
+		pagination,
+		handleCountItemsPerPageChange,
+		handleNavigateNext,
+		handleNavigatePrevious,
+	} = useQueryPagination(totalCount, perPageOptions);
+
+	return (
+		<div className={styles.container}>
+			{config?.fieldsSelector && (
+				<>
+					<div
+						className={styles.optionsTrigger}
+						onClick={(): void => setIsFieldsSelectorOpen(true)}
+					>
+						{t('options_menu.options')}
+						<Settings size="md" />
+					</div>
+					<FieldsSelector
+						isOpen={isFieldsSelectorOpen}
+						title="Edit columns"
+						fields={config.fieldsSelector.value}
+						onFieldsChange={config.fieldsSelector.onFieldsChange}
+						onClose={(): void => setIsFieldsSelectorOpen(false)}
+						signal={DataSource.TRACES}
+					/>
+				</>
+			)}
+
+			<Controls
+				isLoading={isLoading}
+				totalCount={totalCount}
+				offset={pagination.offset}
+				countPerPage={pagination.limit}
+				perPageOptions={perPageOptions}
+				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
+				handleNavigateNext={handleNavigateNext}
+				handleNavigatePrevious={handleNavigatePrevious}
+				showSizeChanger={showSizeChanger}
+			/>
+		</div>
+	);
+}
+
+TraceExplorerControls.defaultProps = {
+	config: null,
+};
+
+type TraceExplorerControlsProps = Pick<
+	ControlsProps,
+	'isLoading' | 'totalCount' | 'perPageOptions'
+> & {
+	config?: OptionsMenuConfig | null;
+	showSizeChanger?: boolean;
+};
+
+TraceExplorerControls.defaultProps = {
+	showSizeChanger: true,
+};
+
+export default memo(TraceExplorerControls);

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

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

frontend/src/container/LLMObservability/Explorer/TraceLoading/TraceLoading.styles.scss

@@ -0,0 +1,19 @@
+.loading-traces {
+	padding: 24px 0;
+	height: 240px;
+
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+
+	.loading-traces-content {
+		display: flex;
+		align-items: flex-start;
+		flex-direction: column;
+
+		.loading-gif {
+			height: 72px;
+			margin-left: -24px;
+		}
+	}
+}

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

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+import { Typography } from '@signozhq/ui/typography';
+import { DataSource } from 'types/common/queryBuilder';
+
+import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
+
+import './TraceLoading.styles.scss';
+
+export function TracesLoading(): JSX.Element {
+	const { t } = useTranslation('common');
+	return (
+		<div className="loading-traces">
+			<div className="loading-traces-content">
+				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
+
+				<Typography>
+					{t('pending_data_placeholder', { dataSource: DataSource.TRACES })}
+				</Typography>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,77 @@
+import { generatePath, Link } from 'react-router-dom';
+import { Badge } from '@signozhq/ui/badge';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { useTimezone } from 'providers/Timezone';
+
+import {
+	DURATION_FIELD_NAMES,
+	STATUS_FIELD_NAMES,
+	TIMESTAMP_FIELD_NAMES,
+	TRACE_ID_FIELD_NAMES,
+} from './constants';
+import { stringifyCellValue } from './utils';
+
+type FieldCellProps = {
+	name: string;
+	value: unknown;
+};
+
+function FieldCell({ name, value }: FieldCellProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	if (TIMESTAMP_FIELD_NAMES.has(name)) {
+		const ts = value as string | number;
+		const formatted =
+			typeof ts === 'string'
+				? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+				: formatTimezoneAdjustedTimestamp(
+						ts / 1e6,
+						DATE_TIME_FORMATS.ISO_DATETIME_MS,
+					);
+		const text = String(formatted);
+		return <TanStackTable.Text title={text}>{text}</TanStackTable.Text>;
+	}
+
+	if (value === '' || value == null) {
+		return <TanStackTable.Text data-testid={name}>-</TanStackTable.Text>;
+	}
+
+	const text = stringifyCellValue(value);
+
+	if (TRACE_ID_FIELD_NAMES.has(name)) {
+		return (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
+				data-testid="trace-id"
+				onClick={(e): void => e.stopPropagation()}
+			>
+				{text}
+			</Link>
+		);
+	}
+
+	if (STATUS_FIELD_NAMES.has(name)) {
+		return (
+			<Badge data-testid={name} color="sakura" variant="outline">
+				{text}
+			</Badge>
+		);
+	}
+
+	if (DURATION_FIELD_NAMES.has(name)) {
+		return (
+			<TanStackTable.Text data-testid={name}>{getMs(text)}ms</TanStackTable.Text>
+		);
+	}
+
+	return (
+		<TanStackTable.Text data-testid={name} title={text}>
+			{text}
+		</TanStackTable.Text>
+	);
+}
+
+export default FieldCell;

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

@@ -0,0 +1,26 @@
+.tableWrapper {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.tracesTable {
+	--tanstack-table-row-height: 54px;
+	--tanstack-table-header-height: 54px;
+
+	--tanstack-cell-padding-top-override: 5px;
+	--tanstack-cell-padding-bottom-override: 5px;
+	--tanstack-cell-padding-right-override: 15px;
+
+	--tanstack-cell-padding-left-override: 15px;
+	--tanstack-cell-header-padding-left-override: 5px;
+
+	--tanstack-cell-header-padding-left-first-column: 15px;
+
+	--tanstack-plain-body-line-clamp: 1;
+
+	--tanstack-table-cell-bg: var(--l2-background);
+	--tanstack-table-header-cell-bg: var(--l1-background-hover);
+	--tanstack-table-row-hover-bg: var(--l1-background-hover);
+}

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

@@ -0,0 +1,116 @@
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import TanStackTable from 'components/TanStackTableView';
+import type {
+	CellTypographySize,
+	TableColumnDef,
+} from 'components/TanStackTableView/types';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
+import { TracesLoading } from '../TraceLoading/TraceLoading';
+import APIError from 'types/api/error';
+import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
+import { getAbsoluteUrl } from 'utils/basePath';
+
+import type { TracesTableRow } from './getFieldColumn';
+import styles from './TracesTable.module.scss';
+
+export type TracesTableProps = {
+	data: TracesTableRow[];
+	columns: TableColumnDef<TracesTableRow>[];
+	columnStorageKey?: string;
+	respectColumnOrder?: boolean;
+	panelType: PanelTypeKeys;
+	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
+	getRowHref: (row: TracesTableRow) => string;
+	isLoading: boolean;
+	isFetching: boolean;
+	isError: boolean;
+	error: APIError | Error | null;
+	isFilterApplied: boolean;
+	onColumnOrderChange?: (cols: TableColumnDef<TracesTableRow>[]) => void;
+	onColumnRemove?: (columnId: string) => void;
+	cellTypographySize?: CellTypographySize;
+};
+
+function TracesTable({
+	data,
+	columns,
+	columnStorageKey,
+	respectColumnOrder = false,
+	panelType,
+	getRowHref,
+	isLoading,
+	isFetching,
+	isError,
+	error,
+	isFilterApplied,
+	onColumnOrderChange,
+	onColumnRemove,
+	cellTypographySize = 'medium',
+}: TracesTableProps): JSX.Element {
+	const history = useHistory();
+
+	const isDataAbsent =
+		!isLoading && !isFetching && !isError && data.length === 0;
+
+	const handleRowClick = useCallback(
+		(row: TracesTableRow): void => {
+			history.push(getRowHref(row));
+		},
+		[history, getRowHref],
+	);
+
+	const handleRowClickNewTab = useCallback(
+		(row: TracesTableRow): void => {
+			window.open(getAbsoluteUrl(getRowHref(row)), '_blank', 'noopener');
+		},
+		[getRowHref],
+	);
+
+	return (
+		<>
+			{isError && error && <ErrorInPlace error={error as APIError} />}
+
+			{(isLoading || (isFetching && data.length === 0)) && <TracesLoading />}
+
+			{isDataAbsent && !isFilterApplied && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
+
+			{isDataAbsent && isFilterApplied && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
+			)}
+
+			{!isError && data.length !== 0 && (
+				<div className={styles.tableWrapper}>
+					<TanStackTable<TracesTableRow>
+						data={data}
+						columns={columns}
+						className={styles.tracesTable}
+						columnStorageKey={columnStorageKey}
+						respectColumnOrder={respectColumnOrder}
+						isLoading={isFetching}
+						cellTypographySize={cellTypographySize}
+						onColumnOrderChange={onColumnOrderChange}
+						onColumnRemove={onColumnRemove}
+						onRowClick={handleRowClick}
+						onRowClickNewTab={handleRowClickNewTab}
+						getRowTestId={(row): string => `traces-table-row-${row.id}`}
+					/>
+				</div>
+			)}
+		</>
+	);
+}
+
+TracesTable.defaultProps = {
+	columnStorageKey: undefined,
+	respectColumnOrder: false,
+	onColumnOrderChange: undefined,
+	onColumnRemove: undefined,
+	cellTypographySize: 'medium',
+};
+
+export default TracesTable;

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

@@ -0,0 +1,18 @@
+// Field-name allowlists that drive signal-specific cell rendering. Both legacy
+// camelCase and snake_case variants are listed because the API has shipped both.
+export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
+
+export const STATUS_FIELD_NAMES = new Set([
+	'httpMethod',
+	'http_method',
+	'http.method',
+	'http.request.method',
+	'responseStatusCode',
+	'response_status_code',
+	'http.status_code',
+	'http.response.status_code',
+]);
+
+export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
+
+export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

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

@@ -0,0 +1,26 @@
+import { TelemetryFieldKey } from 'api/v5/v5';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
+
+import { TIMESTAMP_FIELD_NAMES } from './constants';
+import FieldCell from './FieldCell';
+
+export type TracesTableRow = { id: string } & Record<string, unknown>;
+
+export function getFieldColumn(
+	field: TelemetryFieldKey,
+): TableColumnDef<TracesTableRow> {
+	const { name, fieldContext, fieldDataType } = field;
+	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
+
+	return {
+		id: buildCompositeKey(name, fieldContext, fieldDataType),
+		header: name,
+		accessorFn: (row): unknown => row[name],
+		enableMove: !isTimestamp,
+		enableRemove: !isTimestamp,
+		canBeHidden: !isTimestamp,
+		width: { min: 192 },
+		cell: ({ value }): JSX.Element => <FieldCell name={name} value={value} />,
+	};
+}

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

@@ -0,0 +1,12 @@
+export function stringifyCellValue(value: unknown): string {
+	if (value == null) {
+		return '';
+	}
+	if (typeof value === 'string') {
+		return value;
+	}
+	if (typeof value === 'number' || typeof value === 'boolean') {
+		return String(value);
+	}
+	return JSON.stringify(value);
+}

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

@@ -1,9 +1,6 @@
 import { TelemetryFieldKey } from 'api/v5/v5';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { getFieldColumn, TracesTableRow } from '../TracesTable/getFieldColumn';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

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

@@ -0,0 +1,235 @@
+/**
+ * AI Assistant page-action factories for the Traces Explorer.
+ *
+ * Mirrors the logs equivalents — each factory closes over live page
+ * state/callbacks so `execute()` always operates on the current query, and
+ * the page component instantiates them via `useMemo` + `usePageActions`.
+ *
+ * See `pages/LogsExplorer/aiActions.ts` for the rationale behind writing
+ * BOTH `filters.items` and `filter.expression` and then re-using the same
+ * URL parser shape via `redirectWithQueryBuilderData`.
+ */
+
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import {
+	aiFilterToTagFilterItem,
+	FILTER_OP_ENUM,
+	FILTER_VALUE_DESCRIPTION,
+	FilterDeps,
+	replaceFirstQueryData,
+} from 'container/AIAssistant/pageActions/builderQueryHelpers';
+import {
+	ActionResult,
+	PageAction,
+} from 'container/AIAssistant/pageActions/types';
+import {
+	IBuilderQuery,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+interface AIFilter {
+	key: string;
+	op: string;
+	value: string;
+}
+
+interface RunQueryParams {
+	filters: AIFilter[];
+}
+
+interface AddFilterParams {
+	key: string;
+	op: string;
+	value: string;
+}
+
+type TracesView = 'list' | 'timeseries' | 'table' | 'trace';
+
+interface ChangeViewParams {
+	view: TracesView;
+}
+
+interface SaveViewParams {
+	name: string;
+}
+
+/**
+ * Replace all active span filters and navigate to the updated query URL
+ * (which makes the WHERE clause reflect the new filters and triggers a re-run).
+ */
+export function tracesRunQueryAction(
+	deps: FilterDeps,
+): PageAction<RunQueryParams> {
+	return {
+		id: 'traces.runQuery',
+		description: 'Replace the active trace filters and re-run the query',
+		parameters: {
+			type: 'object',
+			properties: {
+				filters: {
+					type: 'array',
+					description: 'Replacement filter list',
+					items: {
+						type: 'object',
+						properties: {
+							key: {
+								type: 'string',
+								description: 'Attribute key, e.g. service.name, http.status_code',
+							},
+							op: {
+								type: 'string',
+								enum: [...FILTER_OP_ENUM],
+							},
+							value: {
+								type: 'string',
+								description: FILTER_VALUE_DESCRIPTION,
+							},
+						},
+						required: ['key', 'op', 'value'],
+					},
+				},
+			},
+			required: ['filters'],
+		},
+		autoApply: true,
+		execute: async ({ filters }): Promise<ActionResult> => {
+			const baseQuery = deps.currentQuery.builder.queryData[0];
+			if (!baseQuery) {
+				throw new Error('No active query found in Traces Explorer.');
+			}
+
+			const tagItems = filters.map(aiFilterToTagFilterItem);
+			const newFilters = { items: tagItems, op: 'AND' };
+			const updatedBuilderQuery: IBuilderQuery = {
+				...baseQuery,
+				filters: newFilters,
+				filter: convertFiltersToExpression(newFilters),
+			};
+
+			deps.handleSetQueryData(0, updatedBuilderQuery);
+			deps.redirectWithQueryBuilderData(
+				replaceFirstQueryData(deps.currentQuery, updatedBuilderQuery),
+			);
+
+			return {
+				summary: `Query updated with ${filters.length} filter(s) and re-run.`,
+			};
+		},
+		getContext: (): Record<string, unknown> => ({
+			filters:
+				deps.currentQuery.builder.queryData[0]?.filters?.items?.map(
+					(f: TagFilterItem) => ({
+						key: f.key?.key,
+						op: f.op,
+						value: f.value,
+					}),
+				) ?? [],
+		}),
+	};
+}
+
+/**
+ * Append a single filter to the existing trace query and navigate to the
+ * updated URL.
+ */
+export function tracesAddFilterAction(
+	deps: FilterDeps,
+): PageAction<AddFilterParams> {
+	return {
+		id: 'traces.addFilter',
+		description: 'Add a single filter to the current trace query and re-run',
+		parameters: {
+			type: 'object',
+			properties: {
+				key: {
+					type: 'string',
+					description: 'Attribute key, e.g. service.name, http.status_code',
+				},
+				op: {
+					type: 'string',
+					enum: [...FILTER_OP_ENUM],
+				},
+				value: {
+					type: 'string',
+					description: FILTER_VALUE_DESCRIPTION,
+				},
+			},
+			required: ['key', 'op', 'value'],
+		},
+		autoApply: true,
+		execute: async ({ key, op, value }): Promise<ActionResult> => {
+			const baseQuery = deps.currentQuery.builder.queryData[0];
+			if (!baseQuery) {
+				throw new Error('No active query found in Traces Explorer.');
+			}
+
+			const existing = baseQuery.filters?.items ?? [];
+			const newItem = aiFilterToTagFilterItem({ key, op, value });
+			const newFilters = { items: [...existing, newItem], op: 'AND' };
+			const updatedBuilderQuery: IBuilderQuery = {
+				...baseQuery,
+				filters: newFilters,
+				filter: convertFiltersToExpression(newFilters),
+			};
+
+			deps.handleSetQueryData(0, updatedBuilderQuery);
+			deps.redirectWithQueryBuilderData(
+				replaceFirstQueryData(deps.currentQuery, updatedBuilderQuery),
+			);
+
+			return { summary: `Filter added: ${key} ${op} "${value}". Query re-run.` };
+		},
+	};
+}
+
+/**
+ * Switch the traces explorer between list / timeseries / table / trace views.
+ */
+export function tracesChangeViewAction(deps: {
+	onChangeView: (view: TracesView) => void;
+}): PageAction<ChangeViewParams> {
+	return {
+		id: 'traces.changeView',
+		description:
+			'Switch the Traces Explorer between list, timeseries, table, and trace views',
+		parameters: {
+			type: 'object',
+			properties: {
+				view: {
+					type: 'string',
+					enum: ['list', 'timeseries', 'table', 'trace'],
+					description: 'The panel view to switch to',
+				},
+			},
+			required: ['view'],
+		},
+		execute: async ({ view }): Promise<ActionResult> => {
+			deps.onChangeView(view);
+			return { summary: `Switched to the "${view}" view.` };
+		},
+	};
+}
+
+/**
+ * Save the current trace query as a named view (stub — wires to real API
+ * when available).
+ */
+export function tracesSaveViewAction(deps: {
+	onSaveView: (name: string) => Promise<void>;
+}): PageAction<SaveViewParams> {
+	return {
+		id: 'traces.saveView',
+		description: 'Save the current trace query as a named view',
+		parameters: {
+			type: 'object',
+			properties: {
+				name: { type: 'string', description: 'Name for the saved view' },
+			},
+			required: ['name'],
+		},
+		execute: async ({ name }): Promise<ActionResult> => {
+			await deps.onSaveView(name);
+			return { summary: `View "${name}" saved.` };
+		},
+	};
+}

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

@@ -0,0 +1,132 @@
+import {
+	ArrowUpToLine,
+	Atom,
+	Filter,
+	SquareMousePointer,
+	Terminal,
+	Binoculars,
+} from '@signozhq/icons';
+import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+
+import './ToolbarActions.styles.scss';
+
+interface LeftToolbarActionsProps {
+	items: any;
+	selectedView: string;
+	onChangeSelectedView: (view: ExplorerViews) => void;
+	showFilter: boolean;
+	handleFilterVisibilityChange: () => void;
+}
+
+const activeTab = 'active-tab';
+
+export default function LeftToolbarActions({
+	items,
+	selectedView,
+	onChangeSelectedView,
+	showFilter,
+	handleFilterVisibilityChange,
+}: LeftToolbarActionsProps): JSX.Element {
+	const { clickhouse, list, timeseries, table, trace } = items;
+
+	return (
+		<div className="left-toolbar">
+			{!showFilter && (
+				<Tooltip title="Show Filters">
+					<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+						<Filter size={12} />
+						<ArrowUpToLine size={12} style={{ transform: 'rotate(90deg)' }} />
+					</Button>
+				</Tooltip>
+			)}
+			<div className="left-toolbar-query-actions">
+				{list?.show && (
+					<Tooltip title="List View">
+						<Button
+							disabled={list.disabled}
+							className={cx(
+								'list-view-tab',
+								'explorer-view-option',
+								selectedView === list.key ? activeTab : '',
+							)}
+							onClick={(): void => onChangeSelectedView(list.key)}
+						>
+							<SquareMousePointer size={14} data-testid="search-view" />
+							List View
+						</Button>
+					</Tooltip>
+				)}
+
+				{trace?.show && (
+					<Tooltip title="Trace View">
+						<Button
+							disabled={trace.disabled}
+							className={cx(
+								'trace-view-tab',
+								'explorer-view-option',
+								selectedView === trace.key ? activeTab : '',
+							)}
+							onClick={(): void => onChangeSelectedView(trace.key)}
+						>
+							<SquareMousePointer size={14} data-testid="trace-view" />
+							Trace View
+						</Button>
+					</Tooltip>
+				)}
+
+				{timeseries?.show && (
+					<Tooltip title="Time Series">
+						<Button
+							disabled={timeseries.disabled}
+							className={cx(
+								'timeseries-view-tab',
+								'explorer-view-option',
+								selectedView === timeseries.key ? activeTab : '',
+							)}
+							onClick={(): void => onChangeSelectedView(timeseries.key)}
+						>
+							<Atom size={14} data-testid="query-builder-view" />
+							Time Series
+						</Button>
+					</Tooltip>
+				)}
+
+				{clickhouse?.show && (
+					<Tooltip title="Clickhouse">
+						<Button
+							disabled={clickhouse.disabled}
+							className={cx(
+								'clickhouse-view-tab',
+								'explorer-view-option',
+								selectedView === clickhouse.key ? activeTab : '',
+							)}
+							onClick={(): void => onChangeSelectedView(clickhouse.key)}
+						>
+							<Terminal size={14} data-testid="clickhouse-view" />
+							Clickhouse
+						</Button>
+					</Tooltip>
+				)}
+
+				{table?.show && (
+					<Tooltip title="Table">
+						<Button
+							disabled={table.disabled}
+							className={cx(
+								'table-view-tab',
+								'explorer-view-option',
+								selectedView === table.key ? activeTab : '',
+							)}
+							onClick={(): void => onChangeSelectedView(table.key)}
+						>
+							<Binoculars size={14} data-testid="query-builder-view-v2" />
+							Table
+						</Button>
+					</Tooltip>
+				)}
+			</div>
+		</div>
+	);
+}

frontend/src/container/LLMObservability/ToolbarActions/ToolbarActions.styles.scss

@@ -0,0 +1,125 @@
+.left-toolbar {
+	display: flex;
+	align-items: center;
+
+	.filter-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: none;
+		height: 32px;
+		margin-right: 12px;
+		border: 1px solid var(--l1-border);
+	}
+
+	.left-toolbar-query-actions {
+		display: flex;
+		border-radius: 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		flex-direction: row;
+		border-bottom: none;
+		margin-bottom: -1px;
+
+		.prom-ql-icon {
+			height: 14px;
+			width: 14px;
+		}
+
+		.explorer-view-option {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: row;
+			border: none;
+			padding: 9px;
+			box-shadow: none;
+			border-radius: 0px;
+			border-left: 1px solid var(--l1-border);
+			border-bottom: 1px solid var(--l1-border);
+
+			gap: 8px;
+
+			&.active-tab {
+				background-color: var(--primary-background);
+				border-bottom: 1px solid var(--primary-background);
+				color: var(--primary-foreground);
+
+				&:hover {
+					background-color: var(--primary-background) !important;
+				}
+			}
+
+			&:disabled {
+				background-color: var(--l3-background);
+				opacity: 0.6;
+			}
+
+			&:first-child {
+				border-left: 1px solid transparent;
+			}
+
+			&:hover {
+				background-color: transparent !important;
+				border-left: 1px solid transparent !important;
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.frequency-chart-view-controller {
+		display: flex;
+		align-items: center;
+		padding-left: 8px;
+		gap: 8px;
+	}
+}
+
+.right-toolbar {
+	display: flex;
+	align-items: center;
+	background-color: var(--bg-robin-600);
+}
+
+.right-actions {
+	display: flex;
+	align-items: center;
+}
+
+.loading-container {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+
+	.loading-btn {
+		display: flex;
+		width: 32px;
+		height: 33px;
+		padding: 4px 10px;
+		justify-content: center;
+		align-items: center;
+		gap: 6px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		background: var(--l3-background);
+		box-shadow: none;
+		border: none;
+	}
+
+	.cancel-run {
+		display: flex;
+		height: 33px;
+		padding: 4px 10px;
+		justify-content: center;
+		align-items: center;
+		gap: 6px;
+		flex: 1 0 0;
+		border-radius: 2px;
+		background: var(--danger-background);
+		border: none;
+	}
+	.cancel-run:hover {
+		background-color: var(--bg-cherry-400) !important;
+		color: var(--l1-foreground) !important;
+	}
+}