From d38f8807948f66e638e5613f268e082b3b322b02 Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Thu, 27 Aug 2026 15:10:41 -0400
Subject: [PATCH 01/14] feat(explore): Add search filters to equation _if
 aggregates

Wire EAP conditional aggregates into the Explore equation builder with search-style filter autocomplete for the first argument (avg_if(`span.op:db`,span.duration)).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilter.spec.ts                 | 157 ++++++
 .../arithmeticBuilder/conditionalFilter.ts    | 339 ++++++++++++
 .../conditionalFilterAutocomplete.spec.tsx    |  82 +++
 .../conditionalFilterAutocomplete.tsx         | 178 ++++++
 .../components/arithmeticBuilder/context.tsx  |   5 +
 .../components/arithmeticBuilder/index.tsx    |   8 +
 .../arithmeticBuilder/token/freeText.tsx      |  15 +-
 .../arithmeticBuilder/token/function.tsx      | 307 +++++++++--
 .../arithmeticBuilder/token/grid.tsx          |  45 +-
 .../arithmeticBuilder/token/index.spec.tsx    | 508 +++++++++++++++---
 .../arithmeticBuilder/token/styles.tsx        |  24 +-
 .../tokenizedInput/token/comboBox.spec.tsx    |  48 +-
 .../tokenizedInput/token/comboBox.tsx         | 101 +++-
 static/app/utils/discover/fields.spec.tsx     |  37 ++
 static/app/utils/discover/fields.tsx          |  18 +-
 .../fields/exploreEquationAggregates.spec.tsx |  95 ++++
 static/app/utils/fields/index.ts              |  96 ++++
 .../components/exploreArithmeticBuilder.tsx   |  54 +-
 .../exploreEquationArithmeticBuilder.tsx      |  55 ++
 .../toolbarVisualize/visualizeEquation.tsx    |  55 +-
 .../hooks/useExploreEquationBuilderConfig.ts  |  97 ++++
 .../useGetTraceItemAttributeValues.spec.tsx   |  20 +
 .../hooks/useGetTraceItemAttributeValues.tsx  |  10 +-
 .../app/views/explore/queryParams/context.tsx |  15 +-
 .../aggregateColumnEditorModal.spec.tsx       |  29 +-
 .../tables/aggregateColumnEditorModal.tsx     |  48 +-
 static/app/views/explore/utils.spec.tsx       |  17 +
 .../utils/conditionalAggregate.spec.tsx       |  33 ++
 .../explore/utils/conditionalAggregate.tsx    |  99 ++--
 29 files changed, 2241 insertions(+), 354 deletions(-)
 create mode 100644 static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
 create mode 100644 static/app/components/arithmeticBuilder/conditionalFilter.ts
 create mode 100644 static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
 create mode 100644 static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
 create mode 100644 static/app/utils/fields/exploreEquationAggregates.spec.tsx
 create mode 100644 static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx
 create mode 100644 static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts b/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
new file mode 100644
index 000000000000..c905aec7eca2
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
@@ -0,0 +1,157 @@
+import {
+  formatConditionalFilterClause,
+  formatConditionalFilterTagValue,
+  getConditionalFilterClauseAtCursor,
+  getConditionalFilterEditPhase,
+  getConditionalFilterKeyQuery,
+  parseConditionalFilterInput,
+  replaceConditionalFilterClause,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+
+describe('getConditionalFilterClauseAtCursor', () => {
+  it('returns the full string as one clause when there are no boolean operators', () => {
+    expect(getConditionalFilterClauseAtCursor('organization.slug:sentry', 10)).toEqual({
+      clause: 'organization.slug:sentry',
+      clauseCursorIndex: 10,
+      clauseEnd: 24,
+      clauseStart: 0,
+    });
+  });
+
+  it('returns the clause after a boolean operator', () => {
+    const value = 'organization.slug:sentry and ';
+    expect(getConditionalFilterClauseAtCursor(value, value.length)).toEqual({
+      clause: '',
+      clauseCursorIndex: 0,
+      clauseEnd: 29,
+      clauseStart: 29,
+    });
+  });
+
+  it('returns the active clause when typing a second filter key', () => {
+    const value = 'organization.slug:sentry and span.op';
+    expect(getConditionalFilterClauseAtCursor(value, value.length)).toEqual({
+      clause: 'span.op',
+      clauseCursorIndex: 7,
+      clauseEnd: 36,
+      clauseStart: 29,
+    });
+  });
+
+  it('does not split on boolean operators inside quoted values', () => {
+    const value = 'span.description:"foo and bar" and span.op:';
+    expect(getConditionalFilterClauseAtCursor(value, value.length)).toEqual({
+      clause: 'span.op:',
+      clauseCursorIndex: 8,
+      clauseEnd: 43,
+      clauseStart: 35,
+    });
+  });
+});
+
+describe('getConditionalFilterEditPhase', () => {
+  it('uses key mode before the first colon in a clause', () => {
+    expect(
+      getConditionalFilterEditPhase('organization.slug:sentry and span.op', 36)
+    ).toBe('key');
+  });
+
+  it('uses value mode after the colon while typing an unquoted value', () => {
+    expect(
+      getConditionalFilterEditPhase('organization.slug:sentry and span.op:db', 39)
+    ).toBe('value');
+  });
+
+  it('uses key mode after a boolean operator', () => {
+    const value = 'organization.slug:sentry and ';
+    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+  });
+
+  it('uses key mode after a completed unquoted value and trailing space', () => {
+    const value = 'organization.slug:sentry ';
+    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+  });
+
+  it('stays in value mode for an unclosed quoted value', () => {
+    const value = 'organization.slug:"hello there';
+    expect(getConditionalFilterEditPhase(value, value.length)).toBe('value');
+  });
+
+  it('uses key mode after a closed quoted value', () => {
+    const value = 'organization.slug:"hello there"';
+    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+  });
+
+  it('uses key mode when typing a key after a completed value', () => {
+    const value = 'organization.slug:sentry span';
+    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+  });
+});
+
+describe('parseConditionalFilterInput', () => {
+  it('parses the active clause at the cursor', () => {
+    expect(
+      parseConditionalFilterInput('organization.slug:sentry and span.op:db', 39)
+    ).toEqual({
+      filterKey: 'span.op',
+      valueQuery: 'db',
+    });
+  });
+
+  it('strips an opening quote from the value query', () => {
+    const value = 'organization.slug:"hello there';
+    expect(parseConditionalFilterInput(value, value.length)).toEqual({
+      filterKey: 'organization.slug',
+      valueQuery: 'hello there',
+    });
+  });
+});
+
+describe('getConditionalFilterKeyQuery', () => {
+  it('reads the key query from the active clause', () => {
+    expect(getConditionalFilterKeyQuery('organization.slug:sentry and span', 34)).toBe(
+      'span'
+    );
+  });
+
+  it('reads the key query after a completed value', () => {
+    const value = 'organization.slug:sentry spa';
+    expect(getConditionalFilterKeyQuery(value, value.length)).toBe('spa');
+  });
+
+  it('returns an empty key query after a completed value and space', () => {
+    const value = 'organization.slug:sentry ';
+    expect(getConditionalFilterKeyQuery(value, value.length)).toBe('');
+  });
+});
+
+describe('replaceConditionalFilterClause', () => {
+  it('replaces only the active clause when selecting a key suggestion', () => {
+    const value = 'organization.slug:sentry and ';
+    expect(replaceConditionalFilterClause(value, value.length, 'span.op:')).toEqual({
+      newCursorIndex: 37,
+      newValue: 'organization.slug:sentry and span.op:',
+    });
+  });
+
+  it('appends a key after a completed value instead of replacing it', () => {
+    const value = 'organization.slug:sentry ';
+    expect(replaceConditionalFilterClause(value, value.length, 'span.op:')).toEqual({
+      newCursorIndex: 33,
+      newValue: 'organization.slug:sentry span.op:',
+    });
+  });
+});
+
+describe('formatConditionalFilterTagValue', () => {
+  it('quotes values that contain spaces', () => {
+    expect(formatConditionalFilterTagValue('hello there')).toBe('"hello there"');
+    expect(formatConditionalFilterClause('organization.slug', 'hello there')).toBe(
+      'organization.slug:"hello there"'
+    );
+  });
+
+  it('leaves simple values unquoted', () => {
+    expect(formatConditionalFilterTagValue('sentry')).toBe('sentry');
+  });
+});
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.ts b/static/app/components/arithmeticBuilder/conditionalFilter.ts
new file mode 100644
index 000000000000..23865402dd46
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/conditionalFilter.ts
@@ -0,0 +1,339 @@
+import {escapeDoubleQuotes} from 'sentry/utils';
+
+/**
+ * EAP `_if` filter args are backtick-wrapped (`avg_if(\`span.op:db\`,…)`). Detect them
+ * by parameter name so the editor can show the raw query and re-wrap on commit.
+ */
+export function isSearchFilterParameter(
+  parameter: {kind?: string; name?: string} | null | undefined
+): boolean {
+  return parameter?.kind === 'value' && parameter.name === 'filter';
+}
+
+/**
+ * Remove backticks so the filter can be safely wrapped in them.
+ */
+export function escapeConditionalFilter(filter: string): string {
+  return filter.replace(/`/g, '').trim();
+}
+
+/**
+ * Wrap a search filter for use as the first argument of an EAP `_if` aggregate.
+ * Empty input becomes empty backticks so the arithmetic tokenizer keeps a filter slot.
+ */
+export function ensureSearchFilterArgument(value: string): string {
+  const escaped = escapeConditionalFilter(value);
+  return `\`${escaped}\``;
+}
+
+/**
+ * Strip outer backticks from an `_if` filter argument for display / editing.
+ */
+export function unwrapSearchFilterArgument(value: string): string {
+  const trimmed = value.trim();
+  if (trimmed.length >= 2 && trimmed.startsWith('`') && trimmed.endsWith('`')) {
+    return trimmed.slice(1, -1);
+  }
+  return trimmed;
+}
+
+const NEEDS_QUOTING_RE = /[\s(),\\"]/;
+
+/**
+ * Quote a tag value when it contains spaces or other special search characters.
+ */
+export function formatConditionalFilterTagValue(value: string): string {
+  if (value === '') {
+    return '""';
+  }
+  if (
+    (value.startsWith('"') && value.endsWith('"') && value.length >= 2) ||
+    /^\[[^\]]*\]$/.test(value)
+  ) {
+    return value;
+  }
+  if (NEEDS_QUOTING_RE.test(value)) {
+    return `"${escapeDoubleQuotes(value)}"`;
+  }
+  return value;
+}
+
+export function formatConditionalFilterClause(
+  filterKey: string,
+  tagValue: string
+): string {
+  return `${filterKey}:${formatConditionalFilterTagValue(tagValue)}`;
+}
+
+type BooleanOperatorMatch = {
+  end: number;
+  start: number;
+};
+
+function isEscaped(value: string, index: number): boolean {
+  let backslashes = 0;
+  for (let i = index - 1; i >= 0 && value[i] === '\\'; i--) {
+    backslashes++;
+  }
+  return backslashes % 2 === 1;
+}
+
+function hasUnclosedQuote(value: string): boolean {
+  let inQuotes = false;
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === '\\' && i + 1 < value.length) {
+      i++;
+      continue;
+    }
+    if (value[i] === '"' && !isEscaped(value, i)) {
+      inQuotes = !inQuotes;
+    }
+  }
+  return inQuotes;
+}
+
+function stripQuotesForValueSearch(value: string): string {
+  if (value.startsWith('"')) {
+    const withoutOpen = value.slice(1);
+    if (!hasUnclosedQuote(value) && withoutOpen.endsWith('"')) {
+      return withoutOpen.slice(0, -1);
+    }
+    return withoutOpen;
+  }
+  return value;
+}
+
+function findBooleanOperators(value: string): BooleanOperatorMatch[] {
+  const matches: BooleanOperatorMatch[] = [];
+  let inQuotes = false;
+  let index = 0;
+
+  while (index < value.length) {
+    const char = value[index]!;
+
+    if (char === '\\' && index + 1 < value.length) {
+      index += 2;
+      continue;
+    }
+
+    if (char === '"' && !isEscaped(value, index)) {
+      inQuotes = !inQuotes;
+      index++;
+      continue;
+    }
+
+    if (!inQuotes) {
+      const rest = value.slice(index);
+      const match = rest.match(/^(\s+)(and|or)(\s+)/i);
+      if (match) {
+        matches.push({
+          start: index,
+          end: index + match[0].length,
+        });
+        index += match[0].length;
+        continue;
+      }
+    }
+
+    index++;
+  }
+
+  return matches;
+}
+
+function getConditionalFilterClauseBounds(
+  value: string,
+  cursorIndex: number,
+  booleanOperators: BooleanOperatorMatch[] = findBooleanOperators(value)
+): {clauseEnd: number; clauseStart: number} {
+  const cursor = Math.max(0, Math.min(cursorIndex, value.length));
+  let clauseStart = 0;
+  let clauseEnd = value.length;
+
+  for (const operator of booleanOperators) {
+    if (cursor > operator.end) {
+      clauseStart = operator.end;
+      continue;
+    }
+
+    if (cursor >= operator.start && cursor <= operator.end) {
+      return {
+        clauseStart: operator.end,
+        clauseEnd: value.length,
+      };
+    }
+
+    if (cursor < operator.start) {
+      clauseEnd = operator.start;
+      break;
+    }
+  }
+
+  return {clauseStart, clauseEnd};
+}
+
+export function getConditionalFilterClauseAtCursor(
+  value: string,
+  cursorIndex: number
+): {
+  clause: string;
+  clauseCursorIndex: number;
+  clauseEnd: number;
+  clauseStart: number;
+} {
+  const {clauseStart, clauseEnd} = getConditionalFilterClauseBounds(value, cursorIndex);
+  const clause = value.slice(clauseStart, clauseEnd);
+  return {
+    clause,
+    clauseStart,
+    clauseEnd,
+    clauseCursorIndex: Math.max(0, Math.min(cursorIndex, value.length) - clauseStart),
+  };
+}
+
+export type ConditionalFilterEditContext = {
+  /** Text used to filter key suggestions or ComboBox input matching. */
+  editText: string;
+  phase: 'key' | 'value';
+  replaceEnd: number;
+  replaceStart: number;
+  filterKey?: string;
+  /** Tag-value API search string (quotes stripped). */
+  valueQuery?: string;
+};
+
+/**
+ * Decide whether the cursor is editing a filter key or value, and which substring
+ * a suggestion should replace.
+ *
+ * Value mode continues while the value is still open:
+ * - empty value after `:`
+ * - unquoted value with no trailing whitespace yet
+ * - quoted value with an unclosed `"`
+ *
+ * Once a value is complete (`key:value `, or `key:"quoted"`), subsequent text is a
+ * new key and key autocomplete is shown.
+ */
+export function getConditionalFilterEditContext(
+  value: string,
+  cursorIndex: number
+): ConditionalFilterEditContext {
+  const {clause, clauseStart, clauseEnd, clauseCursorIndex} =
+    getConditionalFilterClauseAtCursor(value, cursorIndex);
+
+  const colonIndex = clause.indexOf(':');
+  if (colonIndex === -1 || clauseCursorIndex <= colonIndex) {
+    return {
+      phase: 'key',
+      editText: clause.slice(0, clauseCursorIndex).trim(),
+      replaceStart: clauseStart,
+      replaceEnd: clauseEnd,
+    };
+  }
+
+  const filterKey = clause.slice(0, colonIndex).trim();
+  const valuePart = clause.slice(colonIndex + 1);
+  const cursorInValue = Math.max(0, clauseCursorIndex - (colonIndex + 1));
+  const beforeCursor = valuePart.slice(0, cursorInValue);
+
+  // Unclosed quotes → keep editing the value (including spaces inside the quote).
+  if (hasUnclosedQuote(beforeCursor)) {
+    return {
+      phase: 'value',
+      editText: beforeCursor,
+      filterKey,
+      valueQuery: stripQuotesForValueSearch(beforeCursor),
+      replaceStart: clauseStart,
+      replaceEnd: clauseEnd,
+    };
+  }
+
+  // Closed quoted value: `"hello there"` or `"hello there" nextKey`
+  if (beforeCursor.startsWith('"')) {
+    const closedQuoteMatch = beforeCursor.match(/^"(?:[^"\\]|\\.)*"(\s*)(.*)$/);
+    if (closedQuoteMatch) {
+      const [, spaces = '', nextKey = ''] = closedQuoteMatch;
+      const quotedValue = beforeCursor.slice(
+        0,
+        beforeCursor.length - spaces.length - nextKey.length
+      );
+      const keyStartInClause = colonIndex + 1 + quotedValue.length + spaces.length;
+      return {
+        phase: 'key',
+        editText: nextKey,
+        replaceStart: clauseStart + keyStartInClause,
+        replaceEnd: clauseEnd,
+      };
+    }
+  }
+
+  // Unquoted value: complete once whitespace follows a non-empty token.
+  const unquotedMatch = beforeCursor.match(/^(\S+)(\s+)(.*)$/);
+  if (unquotedMatch) {
+    const [, completedValue, spaces, nextKey = ''] = unquotedMatch;
+    const keyStartInClause = colonIndex + 1 + completedValue!.length + spaces!.length;
+    return {
+      phase: 'key',
+      editText: nextKey,
+      replaceStart: clauseStart + keyStartInClause,
+      replaceEnd: clauseEnd,
+    };
+  }
+
+  // Still typing an unquoted value (or empty value after `:`).
+  return {
+    phase: 'value',
+    editText: beforeCursor,
+    filterKey,
+    valueQuery: beforeCursor,
+    replaceStart: clauseStart,
+    replaceEnd: clauseEnd,
+  };
+}
+
+export function getConditionalFilterEditPhase(
+  value: string,
+  cursorIndex: number
+): 'key' | 'value' {
+  return getConditionalFilterEditContext(value, cursorIndex).phase;
+}
+
+export function parseConditionalFilterInput(
+  value: string,
+  cursorIndex: number
+): {
+  filterKey: string;
+  valueQuery: string;
+} | null {
+  const context = getConditionalFilterEditContext(value, cursorIndex);
+  if (context.phase !== 'value' || !context.filterKey) {
+    return null;
+  }
+  return {
+    filterKey: context.filterKey,
+    valueQuery: context.valueQuery ?? '',
+  };
+}
+
+export function getConditionalFilterKeyQuery(value: string, cursorIndex: number): string {
+  const context = getConditionalFilterEditContext(value, cursorIndex);
+  if (context.phase !== 'key') {
+    return '';
+  }
+  return context.editText.trim();
+}
+
+export function replaceConditionalFilterClause(
+  value: string,
+  cursorIndex: number,
+  newClause: string
+): {newCursorIndex: number; newValue: string} {
+  const {replaceStart, replaceEnd} = getConditionalFilterEditContext(value, cursorIndex);
+  const newValue = value.slice(0, replaceStart) + newClause + value.slice(replaceEnd);
+  const newCursorIndex = replaceStart + newClause.length;
+  return {newValue, newCursorIndex};
+}
+
+export function isFilterKeySuggestion(value: string): boolean {
+  return value.endsWith(':') && value.indexOf(':') === value.length - 1;
+}
diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
new file mode 100644
index 000000000000..e7af0ae1d990
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
@@ -0,0 +1,82 @@
+import {renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
+import {FieldKind} from 'sentry/utils/fields';
+
+const functionArguments = [{name: 'span.op', kind: FieldKind.TAG, label: 'span.op'}];
+
+describe('useConditionalFilterAutocomplete', () => {
+  it('does not fetch values with an empty filter key', async () => {
+    const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+    const {rerender} = renderHookWithProviders(
+      ({filterValue, selectionIndex}: {filterValue: string; selectionIndex: number}) =>
+        useConditionalFilterAutocomplete({
+          enabled: true,
+          filterValue,
+          functionArguments,
+          getFilterTagValues,
+          selectionIndex,
+        }),
+      {initialProps: {filterValue: '', selectionIndex: 0}}
+    );
+
+    expect(getFilterTagValues).not.toHaveBeenCalled();
+
+    rerender({filterValue: 'span.op', selectionIndex: 6});
+    expect(getFilterTagValues).not.toHaveBeenCalled();
+
+    rerender({filterValue: 'span.op:', selectionIndex: 8});
+
+    await waitFor(() => {
+      expect(getFilterTagValues).toHaveBeenCalledWith({
+        tag: expect.objectContaining({key: 'span.op'}),
+        searchQuery: '',
+      });
+    });
+    expect(getFilterTagValues).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        tag: expect.objectContaining({key: ''}),
+      })
+    );
+  });
+
+  it('shows key suggestions when the cursor is before the colon', () => {
+    const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+    const {result} = renderHookWithProviders(() =>
+      useConditionalFilterAutocomplete({
+        enabled: true,
+        filterValue: 'span.op:db',
+        functionArguments,
+        getFilterTagValues,
+        selectionIndex: 3,
+      })
+    );
+
+    expect(result.current.items.map(item => item.label)).toEqual(['span.op:']);
+    expect(getFilterTagValues).not.toHaveBeenCalled();
+  });
+
+  it('shows value suggestions when the cursor is after the colon', async () => {
+    const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+    const {result} = renderHookWithProviders(() =>
+      useConditionalFilterAutocomplete({
+        enabled: true,
+        filterValue: 'span.op:db',
+        functionArguments,
+        getFilterTagValues,
+        selectionIndex: 10,
+      })
+    );
+
+    await waitFor(() => {
+      expect(getFilterTagValues).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(result.current.items.map(item => item.label)).toEqual(['db']);
+    });
+  });
+});
diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
new file mode 100644
index 000000000000..c0d552d021d5
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
@@ -0,0 +1,178 @@
+import {useMemo} from 'react';
+import {keepPreviousData, useQuery} from '@tanstack/react-query';
+
+import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
+
+import {
+  formatConditionalFilterClause,
+  getConditionalFilterEditContext,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
+import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
+import {FieldKind} from 'sentry/utils/fields';
+import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
+
+function useFilterKeyItems(
+  attributes: FunctionArgument[]
+): Array<SelectOptionWithKey<string>> {
+  return useMemo(() => {
+    return attributes.map(item => {
+      const key = item.name;
+      const filterKey = `${key}:`;
+      return {
+        key,
+        label: filterKey,
+        value: filterKey,
+        textValue: key,
+        hideCheck: true,
+      };
+    });
+  }, [attributes]);
+}
+
+function useFilterValueItems({
+  enabled,
+  filterKey,
+  valueQuery,
+  getFilterTagValues,
+  tagKind,
+}: {
+  enabled: boolean;
+  filterKey: string;
+  valueQuery: string;
+  getFilterTagValues?: GetTagValues;
+  tagKind?: FieldKind;
+}): Array<SelectOptionWithKey<string>> {
+  const tag = useMemo(
+    () => ({
+      key: filterKey,
+      name: filterKey,
+      kind: tagKind,
+    }),
+    [filterKey, tagKind]
+  );
+
+  const queryKey = useMemo(
+    () => ['arithmetic-filter-tag-values', tag, valueQuery] as const,
+    [tag, valueQuery]
+  );
+  const debouncedQueryKey = useDebouncedValue(queryKey);
+  const debouncedFilterKey = debouncedQueryKey[1].key;
+
+  const {data} = useQuery({
+    queryKey: debouncedQueryKey,
+    queryFn: ctx =>
+      getFilterTagValues!({
+        tag: ctx.queryKey[1],
+        searchQuery: ctx.queryKey[2] ?? '',
+      }),
+    // Gate on the *debounced* key. `enabled` flips true as soon as the user types `:`,
+    // but the query key still holds the previous empty key for one debounce window —
+    // fetching then hits `/attributes//values/` and 404-retries.
+    enabled: enabled && Boolean(getFilterTagValues && debouncedFilterKey),
+    placeholderData: keepPreviousData,
+    staleTime: 30_000,
+    retry: false,
+  });
+
+  return useMemo(() => {
+    if (!data?.length) {
+      return [];
+    }
+
+    return data.map(item => {
+      const tagValue = typeof item === 'string' ? item : item.value;
+      return {
+        key: `filter-value:${filterKey}:${tagValue}`,
+        label: tagValue,
+        value: formatConditionalFilterClause(filterKey, tagValue),
+        textValue: tagValue,
+        hideCheck: true,
+      };
+    });
+  }, [data, filterKey]);
+}
+
+export function useConditionalFilterAutocomplete({
+  enabled,
+  filterValue,
+  functionArguments,
+  getFilterTagValues,
+  selectionIndex,
+}: {
+  enabled: boolean;
+  filterValue: string;
+  functionArguments: FunctionArgument[];
+  selectionIndex: number;
+  getFilterTagValues?: GetTagValues;
+}) {
+  const editContext = useMemo(
+    () => (enabled ? getConditionalFilterEditContext(filterValue, selectionIndex) : null),
+    [enabled, filterValue, selectionIndex]
+  );
+
+  const editPhase = editContext?.phase ?? 'key';
+  const parsedFilterInput = useMemo(() => {
+    if (editContext?.phase !== 'value' || !editContext.filterKey) {
+      return null;
+    }
+    return {
+      filterKey: editContext.filterKey,
+      valueQuery: editContext.valueQuery ?? '',
+    };
+  }, [editContext]);
+
+  const filterKeyItems = useFilterKeyItems(functionArguments);
+  const filterValueItems = useFilterValueItems({
+    enabled: enabled && Boolean(parsedFilterInput && getFilterTagValues),
+    filterKey: parsedFilterInput?.filterKey ?? '',
+    valueQuery: parsedFilterInput?.valueQuery ?? '',
+    getFilterTagValues,
+    tagKind: functionArguments.find(
+      argument => argument.name === parsedFilterInput?.filterKey
+    )?.kind,
+  });
+
+  const comboBoxFilterValue = useMemo(() => {
+    if (!editContext) {
+      return '';
+    }
+    if (editContext.phase === 'value' && parsedFilterInput && getFilterTagValues) {
+      return parsedFilterInput.valueQuery;
+    }
+    return editContext.phase === 'key' ? editContext.editText : '';
+  }, [editContext, getFilterTagValues, parsedFilterInput]);
+
+  const items = useMemo(() => {
+    if (!enabled) {
+      return [];
+    }
+    if (editPhase === 'value' && parsedFilterInput && getFilterTagValues) {
+      return filterValueItems;
+    }
+    const keyQuery = (editContext?.editText ?? '').trim().toLowerCase();
+    if (!keyQuery) {
+      return filterKeyItems;
+    }
+    return filterKeyItems.filter(
+      item =>
+        item.value.toLowerCase().includes(keyQuery) ||
+        (item.textValue?.toLowerCase().includes(keyQuery) ?? false)
+    );
+  }, [
+    editContext?.editText,
+    editPhase,
+    enabled,
+    filterKeyItems,
+    filterValueItems,
+    getFilterTagValues,
+    parsedFilterInput,
+  ]);
+
+  return {
+    comboBoxFilterValue,
+    editPhase,
+    items,
+    parsedFilterInput,
+  };
+}
diff --git a/static/app/components/arithmeticBuilder/context.tsx b/static/app/components/arithmeticBuilder/context.tsx
index e915ca60f753..a5b7dffac2f4 100644
--- a/static/app/components/arithmeticBuilder/context.tsx
+++ b/static/app/components/arithmeticBuilder/context.tsx
@@ -6,6 +6,7 @@ import type {
   FocusOverride,
 } from 'sentry/components/arithmeticBuilder/action';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
+import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
 import type {FieldDefinition} from 'sentry/utils/fields';
 
 interface ArithmeticBuilderContextData {
@@ -14,6 +15,10 @@ interface ArithmeticBuilderContextData {
   focusOverride: FocusOverride | null;
   functionArguments: FunctionArgument[];
   getFieldDefinition: (key: string) => FieldDefinition | null;
+  /**
+   * Fetches tag values for `_if` combinator filter arguments (e.g. after `span.op:`).
+   */
+  getFilterTagValues?: GetTagValues;
   getSuggestedKey?: (key: string) => string | null;
   references?: Set<string>;
 }
diff --git a/static/app/components/arithmeticBuilder/index.tsx b/static/app/components/arithmeticBuilder/index.tsx
index 1a0f70d7f8ac..7985b8aaf638 100644
--- a/static/app/components/arithmeticBuilder/index.tsx
+++ b/static/app/components/arithmeticBuilder/index.tsx
@@ -9,6 +9,7 @@ import {ArithmeticBuilderContext} from 'sentry/components/arithmeticBuilder/cont
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
 import {TokenGrid} from 'sentry/components/arithmeticBuilder/token/grid';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
+import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
 import type {FieldDefinition} from 'sentry/utils/fields';
 import {FieldKind} from 'sentry/utils/fields';
 import {PanelProvider} from 'sentry/utils/panelProvider';
@@ -21,6 +22,10 @@ interface ArithmeticBuilderProps {
   className?: string;
   'data-test-id'?: string;
   disabled?: boolean;
+  /**
+   * Fetches tag values for `_if` combinator filter arguments in equations.
+   */
+  getFilterTagValues?: GetTagValues;
   /**
    * This is used when a user types in a search key and submits the token.
    * The submission happens when the user types a colon or presses enter.
@@ -45,6 +50,7 @@ export function ArithmeticBuilder({
   aggregations,
   functionArguments,
   getFieldDefinition,
+  getFilterTagValues,
   getSuggestedKey,
   className,
   disabled,
@@ -73,6 +79,7 @@ export function ArithmeticBuilder({
       }),
       functionArguments,
       getFieldDefinition,
+      getFilterTagValues,
       getSuggestedKey,
       references,
     };
@@ -82,6 +89,7 @@ export function ArithmeticBuilder({
     aggregations,
     functionArguments,
     getFieldDefinition,
+    getFilterTagValues,
     getSuggestedKey,
     references,
   ]);
diff --git a/static/app/components/arithmeticBuilder/token/freeText.tsx b/static/app/components/arithmeticBuilder/token/freeText.tsx
index 8082d876ed9f..6987f33e99b3 100644
--- a/static/app/components/arithmeticBuilder/token/freeText.tsx
+++ b/static/app/components/arithmeticBuilder/token/freeText.tsx
@@ -62,6 +62,8 @@ export function ArithmeticTokenFreeText({
     focusable: true,
   });
 
+  const isCollapsed = !token.text.trim();
+
   return (
     <Row
       {...rowProps}
@@ -69,8 +71,9 @@ export function ArithmeticTokenFreeText({
       tabIndex={-1}
       aria-label={token.text}
       aria-invalid={false}
+      collapsed={isCollapsed}
     >
-      <GridCell {...gridCellProps} onClick={stopPropagation}>
+      <GridCell {...gridCellProps} onClick={stopPropagation} collapsed={isCollapsed}>
         <InternalInput
           showPlaceholder={showPlaceholder}
           nextAllowedTokenKinds={nextAllowedTokenKinds}
@@ -638,7 +641,9 @@ function stopPropagation(evt: MouseEvent<HTMLElement>) {
   evt.stopPropagation();
 }
 
-const GridCell = styled('div')`
+const GridCell = styled('div', {
+  shouldForwardProp: prop => prop !== 'collapsed',
+})<{collapsed?: boolean}>`
   position: relative;
   display: flex;
   align-items: stretch;
@@ -646,8 +651,10 @@ const GridCell = styled('div')`
   width: 100%;
 
   input {
-    padding: 0 ${p => p.theme.space.xs};
-    min-width: 9px;
+    padding: 0 ${p => (p.collapsed ? 0 : p.theme.space.xs)};
+    min-width: ${p => (p.collapsed ? 0 : '9px')};
     width: 100%;
+    height: 100%;
+    min-height: 100%;
   }
 `;
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index 7da5083a3ff2..cd72bc465a8f 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -1,4 +1,4 @@
-import type {ChangeEvent, FocusEvent, RefObject} from 'react';
+import type {ChangeEvent, FocusEvent, MouseEvent, RefObject} from 'react';
 import {useCallback, useMemo, useRef, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -10,6 +10,14 @@ import type {CollectionChildren, KeyboardEvent, Node} from '@react-types/shared'
 import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
 import {Flex} from '@sentry/scraps/layout';
 
+import {
+  ensureSearchFilterArgument,
+  isFilterKeySuggestion,
+  isSearchFilterParameter,
+  replaceConditionalFilterClause,
+  unwrapSearchFilterArgument,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
 import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
 import type {
   Token,
@@ -30,6 +38,22 @@ import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils/defined';
 import {FieldKind, FieldValueType, prettifyTagKey} from 'sentry/utils/fields';
 
+function resolveArgumentDisplayLabel(
+  parameterDefinition:
+    | {defaultLabel?: string; kind?: string; name?: string}
+    | null
+    | undefined,
+  fallbackLabel: string
+): string {
+  if (parameterDefinition?.kind === 'column' && parameterDefinition.defaultLabel) {
+    return parameterDefinition.defaultLabel;
+  }
+  if (isSearchFilterParameter(parameterDefinition)) {
+    return unwrapSearchFilterArgument(fallbackLabel);
+  }
+  return fallbackLabel;
+}
+
 interface ArithmeticTokenFunctionProps {
   item: Node<Token>;
   state: ListState<Token>;
@@ -44,6 +68,7 @@ export function ArithmeticTokenFunction({
   const functionArguments = token.attributes;
 
   const ref = useRef<HTMLDivElement>(null);
+  const skipArgumentFocusRef = useRef(false);
   const {rowProps, gridCellProps} = useGridListItem({
     item,
     ref,
@@ -51,6 +76,21 @@ export function ArithmeticTokenFunction({
     focusable: defined(functionArguments) && functionArguments.length > 0, // if there are no arguments, it's not focusable
   });
 
+  const onRowFocus = useCallback(
+    (evt: FocusEvent<HTMLDivElement>) => {
+      if (skipArgumentFocusRef.current) {
+        skipArgumentFocusRef.current = false;
+        return;
+      }
+      rowProps.onFocus?.(evt);
+    },
+    [rowProps]
+  );
+
+  const onFunctionNameMouseDown = useCallback(() => {
+    skipArgumentFocusRef.current = true;
+  }, []);
+
   const isFocused = item.key === state.selectionManager.focusedKey;
 
   const attrText = functionArguments.map(arg => arg.attribute).join(',');
@@ -58,13 +98,16 @@ export function ArithmeticTokenFunction({
   return (
     <FunctionWrapper
       {...rowProps}
+      onFocus={onRowFocus}
       ref={ref}
       tabIndex={isFocused ? 0 : -1}
       aria-label={`${token.function}(${attrText ?? ''})`}
       aria-invalid={false}
       state="valid"
     >
-      <FunctionGridCell {...gridCellProps}>{token.function}</FunctionGridCell>
+      <FunctionGridCell {...gridCellProps} onMouseDown={onFunctionNameMouseDown}>
+        {token.function}
+      </FunctionGridCell>
       <ArgumentsGrid rowRef={ref} item={item} state={state} token={token} />
       <BaseGridCell {...gridCellProps}>
         <DeleteButton token={token} label={t('Remove function %s', token.text)} />
@@ -92,10 +135,7 @@ function ArgumentsGrid({
       const fieldDefinition = getFieldDefinition(functionToken.function)?.parameters?.[
         index
       ];
-      if (fieldDefinition?.kind === 'column') {
-        return fieldDefinition?.defaultLabel ?? fallbackLabel;
-      }
-      return fallbackLabel;
+      return resolveArgumentDisplayLabel(fieldDefinition, fallbackLabel);
     },
     [getFieldDefinition, functionToken]
   );
@@ -251,6 +291,7 @@ function InternalInput({
   argumentsListState,
   argumentItem,
   argument,
+  argumentRef,
   arguments: functionArguments,
   onArgumentsChange,
 }: InternalInputProps) {
@@ -271,6 +312,7 @@ function InternalInput({
     dispatch,
     functionArguments: builderFunctionArguments,
     getFieldDefinition,
+    getFilterTagValues,
     getSuggestedKey,
   } = useArithmeticBuilder();
 
@@ -281,9 +323,7 @@ function InternalInput({
 
   const resolveDisplayLabel = useCallback(
     (fallback: string): string =>
-      parameterDefinition?.kind === 'column' && parameterDefinition.defaultLabel
-        ? parameterDefinition.defaultLabel
-        : fallback,
+      resolveArgumentDisplayLabel(parameterDefinition, fallback),
     [parameterDefinition]
   );
 
@@ -292,15 +332,34 @@ function InternalInput({
   const [inputValue, setInputValue] = useState('');
   const [currentValue, setCurrentValue] = useState(initialLabel);
   const [isCurrentlyEditing, setIsCurrentlyEditing] = useState(false);
-  const [_selectionIndex, setSelectionIndex] = useState(0); // TODO
-  const [_isOpen, setIsOpen] = useState(false); // TODO
+  const [selectionIndex, setSelectionIndex] = useState(0);
+
+  const isFilterParameter = isSearchFilterParameter(parameterDefinition);
 
-  const filterValue = inputValue.trim();
   const displayValue = isCurrentlyEditing ? inputValue : currentValue;
 
-  const updateSelectionIndex = useCallback(() => {
-    setSelectionIndex(inputRef.current?.selectionStart ?? 0);
-  }, [setSelectionIndex]);
+  const {
+    comboBoxFilterValue,
+    editPhase,
+    items: filterItems,
+  } = useConditionalFilterAutocomplete({
+    enabled: isFilterParameter && isCurrentlyEditing,
+    filterValue: inputValue,
+    functionArguments: builderFunctionArguments,
+    getFilterTagValues,
+    selectionIndex,
+  });
+
+  const shouldFilterComboBoxResults = !(
+    isFilterParameter &&
+    editPhase === 'value' &&
+    getFilterTagValues
+  );
+
+  const updateSelectionIndex = useCallback((input?: HTMLInputElement | null) => {
+    const target = input ?? inputRef.current;
+    setSelectionIndex(target?.selectionStart ?? 0);
+  }, []);
 
   const resetInputValue = useCallback(() => {
     setInputValue('');
@@ -348,6 +407,12 @@ function InternalInput({
   const attributeItems = useAttributeItems(allowedAttributes);
 
   const items = useMemo(() => {
+    if (isFilterParameter) {
+      return filterItems;
+    }
+
+    const filterValue = inputValue.trim();
+
     if (parameterDefinition?.kind === 'value' && parameterDefinition.options) {
       return parameterDefinition.options
         .filter(
@@ -393,13 +458,23 @@ function InternalInput({
     }
 
     return result;
-  }, [parameterDefinition, filterValue, attributeItems]);
+  }, [attributeItems, filterItems, inputValue, isFilterParameter, parameterDefinition]);
 
   const shouldCloseOnInteractOutside = useCallback((el: Element) => {
     return !gridCellRef.current?.contains(el);
   }, []);
 
-  const onClick = useCallback(() => {
+  const onClick = useCallback(
+    (evt: MouseEvent<HTMLInputElement>) => {
+      const input = evt.currentTarget;
+      requestAnimationFrame(() => {
+        updateSelectionIndex(input);
+      });
+    },
+    [updateSelectionIndex]
+  );
+
+  const onKeyUp = useCallback(() => {
     updateSelectionIndex();
   }, [updateSelectionIndex]);
 
@@ -410,6 +485,9 @@ function InternalInput({
 
   const resolveValue = useCallback(
     (raw: string): string => {
+      if (isSearchFilterParameter(parameterDefinition)) {
+        return ensureSearchFilterArgument(raw);
+      }
       if (
         parameterDefinition?.kind === 'column' &&
         parameterDefinition.defaultLabel &&
@@ -423,34 +501,100 @@ function InternalInput({
     [parameterDefinition]
   );
 
-  const onTextInputBlur = useCallback(() => {
-    if (inputValue) {
-      onArgumentsChange(argumentIndex, inputValue);
-      dispatch({
-        text: `${functionToken.function}(${updateAttrsWith(inputValue)})`,
-        type: 'REPLACE_TOKEN',
-        token: functionToken,
-        focusOverride: {
-          itemKey: nextTokenKeyOfKind(
-            functionListState,
-            functionToken,
-            TokenKind.FREE_TEXT
-          ),
-        },
-      });
-    }
-    resetInputValue();
-    setIsCurrentlyEditing(false);
-  }, [
-    argumentIndex,
-    dispatch,
-    functionListState,
-    functionToken,
-    inputValue,
-    onArgumentsChange,
-    resetInputValue,
-    updateAttrsWith,
-  ]);
+  // Persist free-text filter edits on blur. Skip REPLACE_TOKEN while focus stays inside
+  // the arguments grid — that remounts the function and steals focus from the next arg.
+  const onFilterInputBlur = useCallback(
+    (evt?: FocusEvent<HTMLInputElement>) => {
+      const value = inputValue ? ensureSearchFilterArgument(inputValue) : null;
+      if (value) {
+        setCurrentValue(unwrapSearchFilterArgument(value));
+        onArgumentsChange(argumentIndex, value);
+      }
+      resetInputValue();
+      setIsCurrentlyEditing(false);
+
+      if (!value || value === functionToken.attributes[argumentIndex]?.text) {
+        return;
+      }
+
+      const commitFilter = () => {
+        dispatch({
+          text: `${functionToken.function}(${updateAttrsWith(value)})`,
+          type: 'REPLACE_TOKEN',
+          token: functionToken,
+        });
+      };
+
+      if (evt) {
+        const argsGrid = evt.currentTarget.closest('[role="grid"]');
+        const related = evt.relatedTarget;
+        const stayingInArgs = Boolean(
+          argsGrid && related instanceof Node && argsGrid.contains(related)
+        );
+        if (!stayingInArgs) {
+          commitFilter();
+        }
+        return;
+      }
+
+      // Click-outside closes the menu without a focus event; check after focus settles.
+      window.setTimeout(() => {
+        const stayingInArgs = Boolean(
+          document.activeElement && argumentRef.current?.contains(document.activeElement)
+        );
+        if (!stayingInArgs) {
+          commitFilter();
+        }
+      }, 0);
+    },
+    [
+      argumentIndex,
+      argumentRef,
+      dispatch,
+      functionToken,
+      inputValue,
+      onArgumentsChange,
+      resetInputValue,
+      updateAttrsWith,
+    ]
+  );
+
+  // Non-filter free-text values (e.g. apdex threshold) still use InputBox and can use the
+  // relatedTarget check to REPLACE only when leaving the arguments grid.
+  const onTextInputBlur = useCallback(
+    (evt: FocusEvent<HTMLInputElement>) => {
+      if (inputValue) {
+        onArgumentsChange(argumentIndex, inputValue);
+
+        const argsGrid = evt.currentTarget.closest('[role="grid"]');
+        const related = evt.relatedTarget;
+        const stayingInArgs = Boolean(
+          related instanceof Node && argsGrid?.contains(related)
+        );
+        if (
+          !stayingInArgs &&
+          inputValue !== functionToken.attributes[argumentIndex]?.text
+        ) {
+          dispatch({
+            text: `${functionToken.function}(${updateAttrsWith(inputValue)})`,
+            type: 'REPLACE_TOKEN',
+            token: functionToken,
+          });
+        }
+      }
+      resetInputValue();
+      setIsCurrentlyEditing(false);
+    },
+    [
+      argumentIndex,
+      dispatch,
+      functionToken,
+      inputValue,
+      onArgumentsChange,
+      resetInputValue,
+      updateAttrsWith,
+    ]
+  );
 
   const onInputChange = useCallback(
     (evt: ChangeEvent<HTMLInputElement>) => {
@@ -523,6 +667,19 @@ function InternalInput({
     [argumentItem.key, argumentsListState, resetInputValue]
   );
 
+  // Free-text value args (e.g. `_if` filters) should keep their current text on focus so
+  // the user can edit it. ComboBox clears on focus to type a new filter query.
+  const onTextInputFocus = useCallback(
+    (evt: FocusEvent<HTMLInputElement>) => {
+      evt.stopPropagation();
+      focusTarget(argumentsListState, argumentItem.key);
+      setIsCurrentlyEditing(true);
+      setInputValue(currentValue);
+      updateSelectionIndex(evt.currentTarget);
+    },
+    [argumentItem.key, argumentsListState, currentValue, updateSelectionIndex]
+  );
+
   const onKeyDownCapture = useCallback(
     (evt: React.KeyboardEvent<HTMLInputElement>) => {
       // At start and pressing left arrow, focus the previous full token
@@ -612,6 +769,30 @@ function InternalInput({
 
   const onOptionSelected = useCallback(
     (option: SelectOptionWithKey<string>) => {
+      if (isFilterParameter) {
+        const {newValue, newCursorIndex} = replaceConditionalFilterClause(
+          inputValue,
+          selectionIndex,
+          option.value
+        );
+        setCurrentValue(newValue);
+        setInputValue(newValue);
+        setIsCurrentlyEditing(true);
+        setSelectionIndex(newCursorIndex);
+
+        if (isFilterKeySuggestion(option.value)) {
+          requestAnimationFrame(() => {
+            const input = inputRef.current;
+            if (!input) {
+              return;
+            }
+            input.setSelectionRange(newCursorIndex, newCursorIndex);
+            input.focus();
+          });
+        }
+        return;
+      }
+
       setCurrentValue(resolveDisplayLabel(prettifyTagKey(option.value)));
       if (hasNextArgument) {
         focusTarget(
@@ -636,6 +817,7 @@ function InternalInput({
       resetInputValue();
     },
     [
+      isFilterParameter,
       hasNextArgument,
       resolveDisplayLabel,
       resetInputValue,
@@ -647,6 +829,8 @@ function InternalInput({
       functionToken,
       updateAttrsWith,
       functionListState,
+      inputValue,
+      selectionIndex,
     ]
   );
 
@@ -654,8 +838,11 @@ function InternalInput({
     // TODO
   }, []);
 
+  // Free-text value args with no options (e.g. apdex threshold) use a plain input.
+  // `_if` filter args use ComboBox below for attribute-key autocomplete.
   if (
     parameterDefinition?.kind === 'value' &&
+    !isFilterParameter &&
     (!defined(parameterDefinition.options) || !parameterDefinition.options.length)
   ) {
     return (
@@ -671,11 +858,10 @@ function InternalInput({
             onInputChange={onInputChange}
             onInputCommit={onInputCommit}
             onInputEscape={onInputEscape}
-            onInputFocus={onInputFocus}
+            onInputFocus={onTextInputFocus}
             onKeyDown={onKeyDown}
             onKeyDownCapture={onKeyDownCapture}
           />
-          {argumentIndex < functionToken.attributes.length - 1 && ','}
         </ArgumentGridCell>
       </ArgumentGridRow>
     );
@@ -688,30 +874,37 @@ function InternalInput({
           items={items}
           ref={inputRef}
           placeholder={
-            parameterDefinition?.kind === 'value' && 'placeholder' in parameterDefinition
-              ? (argument.label ?? parameterDefinition.placeholder)
-              : resolveDisplayLabel(argument.label)
+            isFilterParameter
+              ? resolveDisplayLabel(argument.label)
+              : parameterDefinition?.kind === 'value' &&
+                  'placeholder' in parameterDefinition
+                ? (argument.label ?? parameterDefinition.placeholder)
+                : resolveDisplayLabel(argument.label)
           }
           inputLabel={
-            parameterDefinition?.kind === 'column'
-              ? t('Select an attribute')
-              : t('Select an option')
+            isFilterParameter
+              ? t('Add a filter')
+              : parameterDefinition?.kind === 'column'
+                ? t('Select an attribute')
+                : t('Select an option')
           }
           inputValue={displayValue}
-          filterValue={filterValue}
+          filterValue={comboBoxFilterValue}
+          keepMenuOpenOnSelect={option => isFilterKeySuggestion(option.value)}
+          shouldFilterResults={shouldFilterComboBoxResults}
           tabIndex={
             argumentItem.key === argumentsListState.selectionManager.focusedKey ? 0 : -1
           }
           shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
           onClick={onClick}
-          onInputBlur={onInputBlur}
+          onInputBlur={isFilterParameter ? onFilterInputBlur : onInputBlur}
           onInputChange={onInputChange}
           onInputCommit={onInputCommit}
           onInputEscape={onInputEscape}
-          onInputFocus={onInputFocus}
+          onInputFocus={isFilterParameter ? onTextInputFocus : onInputFocus}
           onKeyDown={onKeyDown}
           onKeyDownCapture={onKeyDownCapture}
-          onOpenChange={setIsOpen}
+          onKeyUp={isFilterParameter ? onKeyUp : undefined}
           onOptionSelected={onOptionSelected}
           onPaste={onPaste}
           data-test-id={
diff --git a/static/app/components/arithmeticBuilder/token/grid.tsx b/static/app/components/arithmeticBuilder/token/grid.tsx
index b679d67c727c..32dfd0a8ef12 100644
--- a/static/app/components/arithmeticBuilder/token/grid.tsx
+++ b/static/app/components/arithmeticBuilder/token/grid.tsx
@@ -1,4 +1,4 @@
-import {useLayoutEffect, useMemo, useRef} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, type PointerEvent} from 'react';
 import styled from '@emotion/styled';
 import type {AriaGridListOptions} from '@react-aria/gridlist';
 import {Item} from '@react-stately/collections';
@@ -25,6 +25,8 @@ import {ArithmeticTokenParenthesis} from 'sentry/components/arithmeticBuilder/to
 import {ArithmeticBuilderTokenReference} from 'sentry/components/arithmeticBuilder/token/reference';
 import {computeNextAllowedTokenKinds} from 'sentry/components/arithmeticBuilder/validator';
 import {useGridList} from 'sentry/components/tokenizedInput/grid/useGridList';
+import {focusTarget} from 'sentry/components/tokenizedInput/grid/utils';
+import {shiftFocusToChild} from 'sentry/components/tokenizedInput/token/utils';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils/defined';
 
@@ -107,13 +109,46 @@ function GridList({showPlaceholder, ...props}: GridListProps) {
 
   useApplyFocusOverride(state);
 
+  const onGridPaddingPointerDown = useCallback(
+    (evt: PointerEvent<HTMLDivElement>) => {
+      if (evt.target !== evt.currentTarget) {
+        gridProps.onPointerDown?.(evt);
+        return;
+      }
+
+      // Padding clicks would otherwise focus the grid itself, which has no caret.
+      evt.preventDefault();
+
+      const rect = evt.currentTarget.getBoundingClientRect();
+      const closerToStart = evt.clientY < rect.top + rect.height / 2;
+      const key = closerToStart
+        ? state.collection.getFirstKey()
+        : state.collection.getLastKey();
+      if (!key) {
+        return;
+      }
+
+      focusTarget(state, key);
+
+      const item = state.collection.getItem(key);
+      const rows = Array.from(
+        evt.currentTarget.querySelectorAll<HTMLElement>('[role="row"]')
+      ).filter(row => row.closest('[role="grid"]') === evt.currentTarget);
+      const row = closerToStart ? rows.at(0) : rows.at(-1);
+      if (row && item) {
+        shiftFocusToChild(row, item, state);
+      }
+    },
+    [gridProps, state]
+  );
+
   const nextAllowedTokenKindsAtIndex = useMemo(() => {
     const tokens = Array.from(state.collection, item => item.value);
     return computeNextAllowedTokenKinds(tokens);
   }, [state.collection]);
 
   return (
-    <TokenGridWrapper {...gridProps} ref={ref}>
+    <TokenGridWrapper {...gridProps} onPointerDown={onGridPaddingPointerDown} ref={ref}>
       {Array.from(state.collection, (item, i) => {
         const token = item.value;
 
@@ -197,11 +232,15 @@ function GridList({showPlaceholder, ...props}: GridListProps) {
 }
 
 const TokenGridWrapper = styled('div')`
-  padding: ${p => p.theme.space.sm};
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  padding: ${p => p.theme.space.lg} ${p => p.theme.space.sm};
   display: flex;
   align-items: center;
   row-gap: ${p => p.theme.space.xs};
   flex-wrap: wrap;
+  cursor: text;
 
   &:focus {
     outline: none;
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index c77368bfaf72..7c0a86da6852 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -2,6 +2,7 @@ import type {Dispatch} from 'react';
 import {useCallback} from 'react';
 
 import {
+  fireEvent,
   render,
   screen,
   userEvent,
@@ -18,7 +19,8 @@ import {
   TokenKind,
 } from 'sentry/components/arithmeticBuilder/token';
 import {TokenGrid} from 'sentry/components/arithmeticBuilder/token/grid';
-import {FieldKind, getFieldDefinition} from 'sentry/utils/fields';
+import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
+import {FieldKind, getExploreEquationFieldDefinition} from 'sentry/utils/fields';
 
 const aggregations = ['avg', 'avg_if', 'sum', 'epm', 'count', 'count_unique', 'count_if'];
 
@@ -34,7 +36,7 @@ const getSpanFieldDefinition = (key: string) => {
     functionArgument => functionArgument.name === key
   );
 
-  return getFieldDefinition(key, 'span', argument?.kind);
+  return getExploreEquationFieldDefinition(key, argument?.kind, true);
 };
 
 const getSuggestedKey = (key: string) => {
@@ -52,6 +54,7 @@ const getSuggestedKey = (key: string) => {
 interface TokensProp {
   expression: string;
   dispatch?: Dispatch<ArithmeticBuilderAction>;
+  getFilterTagValues?: GetTagValues;
   references?: Set<string>;
 }
 
@@ -77,6 +80,7 @@ function Tokens(props: TokensProp) {
         aggregations,
         functionArguments,
         getFieldDefinition: getSpanFieldDefinition,
+        getFilterTagValues: props.getFilterTagValues,
         getSuggestedKey,
         references: props.references,
       }}
@@ -95,6 +99,13 @@ function getLastInput() {
 }
 
 describe('token', () => {
+  it('focuses the last input when clicking empty space in the field', async () => {
+    render(<Tokens expression="avg_if(span.duration,span.op,db)" />);
+
+    await userEvent.click(screen.getByRole('grid', {name: 'Enter an equation'}));
+
+    expect(getLastInput()).toHaveFocus();
+  });
   describe('ArithmeticTokenFreeText', () => {
     it('renders default place holder', async () => {
       render(<Tokens expression="" />);
@@ -171,7 +182,7 @@ describe('token', () => {
 
       expect(
         await screen.findByRole('row', {
-          name: 'avg_if(span.duration,span.op,equals,db)',
+          name: 'avg_if(``,span.duration)',
         })
       ).toBeInTheDocument();
     });
@@ -804,12 +815,338 @@ describe('token', () => {
       });
     });
 
+    it('keeps filter text when focusing an _if filter argument', async () => {
+      render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(`span.op:db`,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+      expect(filterArg).toHaveValue('span.op:db');
+
+      await userEvent.click(filterArg);
+      expect(filterArg).toHaveValue('span.op:db');
+    });
+
+    it('autocompletes attribute keys in an _if filter argument', async () => {
+      render(<Tokens expression="avg_if(``,span.duration)" />);
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op');
+      expect(screen.getByRole('option', {name: 'span.op:'})).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'span.op:'}));
+
+      expect(filterArg).toHaveValue('span.op:');
+      expect(filterArg).toHaveFocus();
+    });
+
+    it('switches to value suggestions after selecting a filter key', async () => {
+      const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+      render(
+        <Tokens
+          expression="avg_if(``,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op');
+      await userEvent.click(screen.getByRole('option', {name: 'span.op:'}));
+
+      expect(filterArg).toHaveValue('span.op:');
+      await waitFor(() => {
+        expect(getFilterTagValues).toHaveBeenCalled();
+      });
+      expect(await screen.findByRole('option', {name: 'db'})).toBeInTheDocument();
+    });
+
+    it('autocompletes tag values in an _if filter argument', async () => {
+      const getFilterTagValues = jest.fn(({tag, searchQuery}) => {
+        if (tag.key === 'span.op') {
+          return Promise.resolve(
+            [{value: 'db'}, {value: 'http'}].filter(
+              item => !searchQuery || item.value.includes(searchQuery)
+            )
+          );
+        }
+        return Promise.resolve([]);
+      });
+
+      render(
+        <Tokens
+          expression="avg_if(``,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op:');
+
+      await waitFor(() => {
+        expect(getFilterTagValues).toHaveBeenCalled();
+      });
+      expect(await screen.findByRole('option', {name: 'db'})).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'db'}));
+
+      expect(filterArg).toHaveValue('span.op:db');
+      expect(filterArg).toHaveFocus();
+      await waitFor(() => {
+        expect(screen.queryByRole('option')).not.toBeInTheDocument();
+      });
+    });
+
+    it('continues value autocomplete inside an unclosed quoted value', async () => {
+      const getFilterTagValues = jest.fn(({searchQuery}) => {
+        return Promise.resolve(
+          [{value: 'hello world'}, {value: 'hello there'}].filter(
+            item => !searchQuery || item.value.includes(searchQuery)
+          )
+        );
+      });
+
+      render(
+        <Tokens
+          expression="avg_if(``,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.description:"hello ');
+
+      await waitFor(() => {
+        expect(getFilterTagValues).toHaveBeenCalledWith(
+          expect.objectContaining({searchQuery: 'hello '})
+        );
+      });
+      expect(
+        await screen.findByRole('option', {name: 'hello world'})
+      ).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'hello world'}));
+      expect(filterArg).toHaveValue('span.description:"hello world"');
+    });
+
+    it('shows key autocomplete after a completed value and trailing space', async () => {
+      const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+      render(
+        <Tokens
+          expression="avg_if(``,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op:db ');
+
+      expect(
+        await screen.findByRole('option', {name: 'span.description:'})
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'db'})).not.toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'span.description:'}));
+      expect(filterArg).toHaveValue('span.op:db span.description:');
+    });
+
+    it('autocompletes keys after a boolean operator in a compound filter', async () => {
+      render(<Tokens expression="avg_if(``,span.duration)" />);
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op:db and ');
+
+      expect(
+        await screen.findByRole('option', {name: 'span.description:'})
+      ).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'span.description:'}));
+
+      expect(filterArg).toHaveValue('span.op:db and span.description:');
+    });
+
+    it('does not show a values dropdown when there are no matching values', async () => {
+      const getFilterTagValues = jest.fn().mockResolvedValue([]);
+
+      render(
+        <Tokens
+          expression="avg_if(``,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.description');
+      expect(screen.getByRole('option', {name: 'span.description:'})).toBeInTheDocument();
+
+      await userEvent.type(filterArg, ':');
+      await waitFor(() => {
+        expect(getFilterTagValues).toHaveBeenCalled();
+        expect(screen.queryByRole('option')).not.toBeInTheDocument();
+      });
+      expect(screen.queryByText('No options found')).not.toBeInTheDocument();
+    });
+
+    it('shows filter key suggestions when editing an existing _if filter', async () => {
+      const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+      render(
+        <Tokens
+          expression="avg_if(`span.op:db`,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(`span.op:db`,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      filterArg.setSelectionRange(0, 0);
+      fireEvent.keyUp(filterArg, {key: 'ArrowLeft', code: 'ArrowLeft'});
+      await waitFor(() => {
+        expect(screen.getByRole('option', {name: 'span.op:'})).toBeInTheDocument();
+      });
+      expect(screen.queryByRole('option', {name: 'db'})).not.toBeInTheDocument();
+    });
+
+    it('shows filter value suggestions when the cursor is after the colon', async () => {
+      const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+      render(
+        <Tokens
+          expression="avg_if(`span.op:db`,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(`span.op:db`,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      filterArg.setSelectionRange(9, 9);
+      fireEvent.keyUp(filterArg, {key: 'ArrowLeft', code: 'ArrowLeft'});
+
+      await waitFor(() => {
+        expect(getFilterTagValues).toHaveBeenCalled();
+      });
+      expect(await screen.findByRole('option', {name: 'db'})).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'span.op:'})).not.toBeInTheDocument();
+    });
+
+    it('does not open filter autocomplete when clicking the function name', async () => {
+      const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+      render(
+        <Tokens
+          expression="avg_if(`span.op:db`,span.duration)"
+          getFilterTagValues={getFilterTagValues}
+        />
+      );
+
+      const functionRow = await screen.findByRole('row', {
+        name: 'avg_if(`span.op:db`,span.duration)',
+      });
+
+      await userEvent.click(within(functionRow).getByText('avg_if'));
+
+      expect(
+        within(functionRow).getByRole('combobox', {name: 'Add a filter'})
+      ).not.toHaveFocus();
+      expect(screen.queryByRole('option', {name: 'span.op:'})).not.toBeInTheDocument();
+    });
+
     it('renders multi-argument function and allows navigating between arguments', async () => {
-      render(<Tokens expression="count_if(span.op,equals,browser)" />);
+      render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
       expect(
         await screen.findByRole('row', {
-          name: 'count_if(span.op,equals,browser)',
+          name: 'avg_if(`span.op:db`,span.duration)',
         })
       ).toBeInTheDocument();
 
@@ -817,134 +1154,137 @@ describe('token', () => {
         screen.getByRole('grid', {name: 'Enter arguments'})
       ).queryAllByRole('gridcell');
 
-      expect(args).toHaveLength(3);
+      expect(args).toHaveLength(2);
 
-      const firstArg = within(
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+      // Filter args are shown without backticks; wrapping is applied on commit.
+      expect(filterArg).toHaveValue('span.op:db');
+
+      const columnArg = within(
         screen.getByRole('grid', {name: 'Enter arguments'})
       ).getByRole('combobox', {name: 'Select an attribute'});
+      expect(columnArg).toHaveAttribute('placeholder', 'span.duration');
 
-      expect(firstArg).toHaveAttribute('placeholder', 'span.op');
+      await userEvent.click(columnArg);
+      await userEvent.type(columnArg, 'span.self_time');
+      expect(screen.getByRole('option', {name: 'span.self_time'})).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'span.self_time'}));
 
-      const secondArg = within(
-        screen.getByRole('grid', {name: 'Enter arguments'})
-      ).getByRole('combobox', {name: 'Select an option'});
-      expect(secondArg).toHaveAttribute('placeholder', 'equals');
+      await waitFor(() => {
+        expect(getLastInput()).toHaveFocus();
+      });
+      expect(
+        screen.queryByRole('option', {name: 'span.self_time'})
+      ).not.toBeInTheDocument();
+    });
+
+    it('commits _if filter on blur when leaving the equation', async () => {
+      const dispatch = jest.fn();
+      render(<Tokens expression="avg_if(``,span.duration)" dispatch={dispatch} />);
 
-      const thirdArg = within(
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(``,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
         screen.getByRole('grid', {name: 'Enter arguments'})
-      ).getByRole('textbox', {name: 'Add a value'});
-      expect(thirdArg).toHaveValue('browser');
+      ).getByRole('combobox', {name: 'Add a filter'});
 
-      await userEvent.click(firstArg);
-      await userEvent.type(firstArg, 'span.description');
-      expect(screen.getByRole('option', {name: 'span.description'})).toBeInTheDocument();
-      await userEvent.click(screen.getByRole('option', {name: 'span.description'}));
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op:db');
+      await userEvent.click(getLastInput());
 
       await waitFor(() => {
-        expect(secondArg).toHaveFocus();
+        expect(dispatch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: 'REPLACE_TOKEN',
+            text: 'avg_if(`span.op:db`,span.duration)',
+          })
+        );
       });
+    });
 
-      expect(
-        screen.queryByRole('option', {name: 'span.description'})
-      ).not.toBeInTheDocument();
+    it('does not rewrite the function when moving from filter to another argument', async () => {
+      const dispatch = jest.fn();
+      render(<Tokens expression="avg_if(``,span.duration)" dispatch={dispatch} />);
 
-      await userEvent.keyboard('not');
-      await userEvent.click(screen.getByRole('option', {name: 'is not equal to'}));
+      const argsGrid = await screen.findByRole('grid', {name: 'Enter arguments'});
+      const filterArg = within(argsGrid).getByRole('combobox', {name: 'Add a filter'});
+      const columnArg = within(argsGrid).getByRole('combobox', {
+        name: 'Select an attribute',
+      });
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op:db');
+      await userEvent.click(columnArg);
 
       await waitFor(() => {
-        expect(thirdArg).toHaveFocus();
+        expect(columnArg).toHaveFocus();
       });
-      await userEvent.keyboard('db');
-      expect(thirdArg).toHaveValue('db');
+      expect(dispatch).not.toHaveBeenCalledWith(
+        expect.objectContaining({type: 'REPLACE_TOKEN'})
+      );
     });
 
     it('suggests attributes for each argument of avg_if', async () => {
-      render(<Tokens expression="avg_if(span.duration,span.op,equals,queue.process)" />);
+      render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
       const argumentsGrid = await screen.findByRole('grid', {name: 'Enter arguments'});
 
-      const [numberArg, stringArg] = within(argumentsGrid).getAllByRole('combobox', {
-        name: 'Select an attribute',
+      const filterArg = within(argumentsGrid).getByRole('combobox', {
+        name: 'Add a filter',
       });
-      const conditionArg = within(argumentsGrid).getByRole('combobox', {
-        name: 'Select an option',
-      });
-      const valueArg = within(argumentsGrid).getByRole('textbox', {
-        name: 'Add a value',
+      const columnArg = within(argumentsGrid).getByRole('combobox', {
+        name: 'Select an attribute',
       });
 
-      await userEvent.click(numberArg!);
+      expect(filterArg).toHaveValue('span.op:db');
+
+      await userEvent.click(columnArg);
       expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual([
         'span.duration',
         'span.self_time',
       ]);
-
-      await userEvent.click(stringArg!);
-      expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual([
-        'span.op',
-        'span.description',
-      ]);
-
-      await userEvent.click(conditionArg);
-      expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual([
-        'is equal to',
-        'is not equal to',
-      ]);
-
-      expect(valueArg).toHaveValue('queue.process');
     });
   });
 
   it('shifts focus between args correctly', async () => {
-    render(<Tokens expression="count_if(span.op,equals,browser)" />);
+    render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
     expect(
       await screen.findByRole('row', {
-        name: 'count_if(span.op,equals,browser)',
+        name: 'avg_if(`span.op:db`,span.duration)',
       })
     ).toBeInTheDocument();
 
-    const args = within(
-      screen.getByRole('grid', {name: 'Enter arguments'})
-    ).queryAllByRole('gridcell');
-
-    expect(args).toHaveLength(3);
-
-    const firstArg = within(
-      screen.getByRole('grid', {name: 'Enter arguments'})
-    ).getByRole('combobox', {name: 'Select an attribute'});
-
-    const secondArg = within(
-      screen.getByRole('grid', {name: 'Enter arguments'})
-    ).getByRole('combobox', {name: 'Select an option'});
+    const argsGrid = screen.getByRole('grid', {name: 'Enter arguments'});
+    expect(within(argsGrid).queryAllByRole('gridcell')).toHaveLength(2);
 
-    await userEvent.click(firstArg);
-    await userEvent.type(firstArg, 'span.description');
-    expect(screen.getByRole('option', {name: 'span.description'})).toBeInTheDocument();
-    await userEvent.click(screen.getByRole('option', {name: 'span.description'}));
+    const filterArg = within(argsGrid).getByRole('combobox', {
+      name: 'Add a filter',
+    });
+    const columnArg = within(argsGrid).getByRole('combobox', {
+      name: 'Select an attribute',
+    });
 
+    await userEvent.click(filterArg);
     await waitFor(() => {
-      expect(secondArg).toHaveFocus();
+      expect(filterArg).toHaveFocus();
     });
 
-    expect(
-      screen.queryByRole('option', {name: 'span.description'})
-    ).not.toBeInTheDocument();
-
-    await userEvent.click(firstArg);
-
+    await userEvent.click(columnArg);
     await waitFor(() => {
-      expect(firstArg).toHaveFocus();
+      expect(columnArg).toHaveFocus();
     });
-    await userEvent.type(firstArg, 'span.op');
-    expect(screen.getByRole('option', {name: 'span.op'})).toBeInTheDocument();
-    await userEvent.click(screen.getByRole('option', {name: 'span.op'}));
 
+    await userEvent.click(filterArg);
     await waitFor(() => {
-      expect(secondArg).toHaveFocus();
+      expect(filterArg).toHaveFocus();
     });
-
-    expect(screen.queryByRole('option', {name: 'span.op'})).not.toBeInTheDocument();
   });
 
   describe('ArithmeticTokenLiteral', () => {
diff --git a/static/app/components/arithmeticBuilder/token/styles.tsx b/static/app/components/arithmeticBuilder/token/styles.tsx
index 0de75c4ddffb..05a471ff8c71 100644
--- a/static/app/components/arithmeticBuilder/token/styles.tsx
+++ b/static/app/components/arithmeticBuilder/token/styles.tsx
@@ -1,7 +1,9 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-export const Row = styled('div')<{withBorder?: boolean}>`
+export const Row = styled('div', {
+  shouldForwardProp: prop => prop !== 'collapsed' && prop !== 'withBorder',
+})<{collapsed?: boolean; withBorder?: boolean}>`
   position: relative;
   display: flex;
   align-items: stretch;
@@ -15,8 +17,28 @@ export const Row = styled('div')<{withBorder?: boolean}>`
       border-radius: ${p.theme.radius.md};
     `}
 
+  /* Empty spacers must not consume a flex line. A wide _if function is
+     max-width 100%, so even a few pixels of leading/trailing free text wrap
+     onto their own row. Last-child still grows to fill leftover space. */
+  ${p =>
+    p.collapsed &&
+    css`
+      width: 0;
+      min-width: 0;
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: 0;
+      overflow: visible;
+    `}
+
   &:last-child {
     flex-grow: 1;
+    min-width: 0;
+    max-width: none;
+    flex-basis: 0;
+    align-self: stretch;
+    height: auto;
+    min-height: 24px;
   }
 
   &[aria-invalid='true'] {
diff --git a/static/app/components/tokenizedInput/token/comboBox.spec.tsx b/static/app/components/tokenizedInput/token/comboBox.spec.tsx
index e8040bfeb7a9..1a7dafb154a0 100644
--- a/static/app/components/tokenizedInput/token/comboBox.spec.tsx
+++ b/static/app/components/tokenizedInput/token/comboBox.spec.tsx
@@ -1,7 +1,7 @@
 import type {ComponentProps} from 'react';
 import {Item} from '@react-stately/collections';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {ComboBox} from 'sentry/components/tokenizedInput/token/comboBox';
 
@@ -65,6 +65,8 @@ describe('ComboBox', () => {
     await userEvent.click(screen.getByRole('combobox'));
 
     expect(onOpenChange).not.toHaveBeenCalledWith(true);
+    expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    expect(screen.queryByText('No options found')).not.toBeInTheDocument();
   });
 
   it('does not open the menu when every option is filtered out', async () => {
@@ -87,4 +89,48 @@ describe('ComboBox', () => {
 
     expect(onOpenChange).not.toHaveBeenCalledWith(true);
   });
+
+  it('closes the menu after selecting when keepMenuOpenOnSelect is configured', async () => {
+    render(
+      <ComboBoxWrapper
+        filterValue=""
+        inputLabel="combobox"
+        inputValue=""
+        items={['foo', 'bar'].map(item => ({
+          key: item,
+          label: item,
+          value: item,
+        }))}
+        keepMenuOpenOnSelect={() => false}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByRole('option', {name: 'foo'}));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
+  });
+
+  it('keeps the menu open when keepMenuOpenOnSelect returns true', async () => {
+    render(
+      <ComboBoxWrapper
+        filterValue=""
+        inputLabel="combobox"
+        inputValue=""
+        items={['foo', 'bar'].map(item => ({
+          key: item,
+          label: item,
+          value: item,
+        }))}
+        keepMenuOpenOnSelect={() => true}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByRole('option', {name: 'foo'}));
+
+    expect(screen.getByRole('option', {name: 'bar'})).toBeInTheDocument();
+  });
 });
diff --git a/static/app/components/tokenizedInput/token/comboBox.tsx b/static/app/components/tokenizedInput/token/comboBox.tsx
index ae29cff3a6ad..4e18cbad6316 100644
--- a/static/app/components/tokenizedInput/token/comboBox.tsx
+++ b/static/app/components/tokenizedInput/token/comboBox.tsx
@@ -1,6 +1,7 @@
 import type {
   ChangeEventHandler,
   ClipboardEvent,
+  FocusEvent,
   FocusEventHandler,
   MouseEventHandler,
   Ref,
@@ -36,8 +37,13 @@ interface ComboBoxProps {
   inputValue: string;
   items: Array<SelectOptionOrSectionWithKey<string>>;
   ['data-test-id']?: string;
+  /**
+   * Keep the suggestion menu open after selecting an option. Useful when the
+   * user still needs to pick a follow-up value (e.g. filter key → filter value).
+   */
+  keepMenuOpenOnSelect?: boolean | ((option: SelectOptionWithKey<string>) => boolean);
   onClick?: MouseEventHandler<HTMLInputElement>;
-  onInputBlur?: () => void;
+  onInputBlur?: (evt?: FocusEvent<HTMLInputElement>) => void;
   onInputChange?: ChangeEventHandler<HTMLInputElement>;
   onInputCommit?: (value: string) => void;
   onInputEscape?: () => void;
@@ -55,6 +61,10 @@ interface ComboBoxProps {
    * other elements.
    */
   shouldCloseOnInteractOutside?: (interactedElement: Element) => boolean;
+  /**
+   * When false, all items from `items` are shown and filtering is left to the caller.
+   */
+  shouldFilterResults?: boolean;
   tabIndex?: number;
 }
 
@@ -112,18 +122,63 @@ export function ComboBox({
   placeholder,
   tabIndex,
   ref,
+  keepMenuOpenOnSelect,
+  shouldFilterResults = true,
 }: ComboBoxProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const listBoxRef = useRef<HTMLUListElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
+  const openMenuRef = useRef<(() => void) | null>(null);
+  const closeMenuRef = useRef<(() => void) | null>(null);
+  const suppressAutoOpenRef = useRef(false);
 
   const {hiddenOptions, disabledKeys} = useHiddenItems({
     items,
     filterValue,
     maxOptions: 50,
-    shouldFilterResults: true,
+    shouldFilterResults,
+  });
+
+  const hasVisibleItems = items.some(item => {
+    if (itemIsSectionWithKey(item)) {
+      return item.options.some(option => !hiddenOptions.has(option.key));
+    }
+    return !hiddenOptions.has(item.key);
   });
 
+  const shouldKeepMenuOpenOnSelect = useCallback(
+    (option: SelectOptionWithKey<string>) => {
+      if (typeof keepMenuOpenOnSelect === 'function') {
+        return keepMenuOpenOnSelect(option);
+      }
+      return keepMenuOpenOnSelect ?? false;
+    },
+    [keepMenuOpenOnSelect]
+  );
+
+  const applyOptionSelection = useCallback(
+    (option: SelectOptionWithKey<string>) => {
+      onOptionSelected?.(option);
+      if (shouldKeepMenuOpenOnSelect(option)) {
+        openMenuRef.current?.();
+        return;
+      }
+      if (keepMenuOpenOnSelect === undefined) {
+        return;
+      }
+      // Selecting closes the menu and briefly suppresses auto-open so focus/click
+      // returning to the input does not immediately reopen it.
+      suppressAutoOpenRef.current = true;
+      requestAnimationFrame(() => {
+        closeMenuRef.current?.();
+        requestAnimationFrame(() => {
+          suppressAutoOpenRef.current = false;
+        });
+      });
+    },
+    [keepMenuOpenOnSelect, onOptionSelected, shouldKeepMenuOpenOnSelect]
+  );
+
   const handleValueChange = useCallback(
     (key: Key | null) => {
       if (!key) {
@@ -134,18 +189,16 @@ export function ComboBox({
         if (itemIsSectionWithKey(item)) {
           const option = item.options.find(child => child.key === key);
           if (option) {
-            onOptionSelected?.(option);
-            break;
-          }
-        } else {
-          if (item.key === key) {
-            onOptionSelected?.(item);
+            applyOptionSelection(option);
             break;
           }
+        } else if (item.key === key) {
+          applyOptionSelection(item);
+          break;
         }
       }
     },
-    [items, onOptionSelected]
+    [applyOptionSelection, items]
   );
 
   const comboBoxProps: Partial<AriaComboBoxProps<SelectOptionOrSectionWithKey<string>>> =
@@ -168,10 +221,15 @@ export function ComboBox({
     shouldCloseOnBlur: false,
     ...comboBoxProps,
   });
+  openMenuRef.current = () => state.open();
+  closeMenuRef.current = () => state.close();
 
   const handleComboBoxFocus: FocusEventHandler<HTMLInputElement> = useCallback(
     evt => {
       onInputFocus?.(evt);
+      if (suppressAutoOpenRef.current) {
+        return;
+      }
       state.open();
     },
     [onInputFocus, state]
@@ -182,19 +240,15 @@ export function ComboBox({
       if (evt.relatedTarget && !shouldCloseOnInteractOutside?.(evt.relatedTarget)) {
         return;
       }
-      onInputBlur?.();
+      onInputBlur?.(evt);
       state.close();
     },
     [onInputBlur, shouldCloseOnInteractOutside, state]
   );
 
-  const totalOptions = items.reduce(
-    (acc, item) => acc + (itemIsSectionWithKey(item) ? item.options.length : 1),
-    0
-  );
-
   // Showing the overlay with nothing to select renders as an empty grey bar
-  const isOpen = state.isOpen && totalOptions > hiddenOptions.size;
+  const isOpen = state.isOpen && hasVisibleItems;
+  const isMenuVisible = isOpen;
 
   const handleComboBoxKeyDown = useCallback(
     (evt: KeyboardEvent) => {
@@ -292,6 +346,9 @@ export function ComboBox({
       evt.stopPropagation();
       inputProps.onClick?.(evt);
       onClick?.(evt);
+      if (suppressAutoOpenRef.current) {
+        return;
+      }
       state.open();
     },
     [inputProps, state, onClick]
@@ -327,7 +384,15 @@ export function ComboBox({
         onKeyDownCapture={onKeyDownCapture}
         data-test-id={dataTestId}
       />
-      <StyledPositionWrapper {...overlayProps} visible={isOpen}>
+      <StyledPositionWrapper
+        {...overlayProps}
+        hidden={!isMenuVisible}
+        visible={isMenuVisible}
+        style={{
+          ...overlayProps.style,
+          display: isMenuVisible ? overlayProps.style?.display : 'none',
+        }}
+      >
         <ListBoxOverlay ref={popoverRef}>
           <ListBox
             {...listBoxProps}
@@ -335,7 +400,7 @@ export function ComboBox({
             listState={state}
             hasSearch={!!filterValue}
             hiddenOptions={hiddenOptions}
-            overlayIsOpen={isOpen}
+            overlayIsOpen={isMenuVisible}
             size="sm"
           />
         </ListBoxOverlay>
diff --git a/static/app/utils/discover/fields.spec.tsx b/static/app/utils/discover/fields.spec.tsx
index e24654eb33d9..5410d60607d1 100644
--- a/static/app/utils/discover/fields.spec.tsx
+++ b/static/app/utils/discover/fields.spec.tsx
@@ -15,6 +15,7 @@ import {
   isMeasurement,
   measurementType,
   parseFunction,
+  prettifyParsedFunction,
 } from 'sentry/utils/discover/fields';
 
 describe('parseFunction', () => {
@@ -115,6 +116,11 @@ describe('parseFunction', () => {
       arguments: ['`span.description:"GET /foo, /bar"`', 'span.duration'],
       filter: 'span.description:"GET /foo, /bar"',
     });
+    expect(parseFunction('avg_if(`tags[Limit,number]:>5`,span.duration)')).toEqual({
+      name: 'avg_if',
+      arguments: ['`tags[Limit,number]:>5`', 'span.duration'],
+      filter: 'tags[Limit,number]:>5',
+    });
   });
 
   it('handles backtick wrapped search filters as the only argument', () => {
@@ -488,3 +494,34 @@ describe('fieldAlignment()', () => {
     expect(fieldAlignment('title', undefined, meta)).toBe('left');
   });
 });
+
+describe('prettifyParsedFunction', () => {
+  it('prettifies typed tag arguments', () => {
+    expect(
+      prettifyParsedFunction({
+        name: 'avg',
+        arguments: ['tags[Limit,number]'],
+      })
+    ).toBe('avg(Limit)');
+  });
+
+  it('prettifies typed tag keys inside conditional filter arguments', () => {
+    expect(
+      prettifyParsedFunction({
+        name: 'avg_if',
+        arguments: ['`tags[Limit,number]:>5`', 'span.duration'],
+        filter: 'tags[Limit,number]:>5',
+      })
+    ).toBe('avg_if(`Limit:>5`,span.duration)');
+  });
+
+  it('does not collapse a filter argument to only the typed tag name', () => {
+    expect(
+      prettifyParsedFunction({
+        name: 'avg_if',
+        arguments: ['`tags[Limit,number]:>5`', 'tags[Limit,number]'],
+        filter: 'tags[Limit,number]:>5',
+      })
+    ).toBe('avg_if(`Limit:>5`,Limit)');
+  });
+});
diff --git a/static/app/utils/discover/fields.tsx b/static/app/utils/discover/fields.tsx
index 3f98c515779c..844eea014206 100644
--- a/static/app/utils/discover/fields.tsx
+++ b/static/app/utils/discover/fields.tsx
@@ -1813,6 +1813,22 @@ export function prettifyParsedFunction(func: ParsedFunction) {
     return `${func.name}(${prettifyTagKey(metricName ?? '')})`;
   }
 
-  const args = func.arguments.map(prettifyTagKey);
+  const args = func.arguments.map(prettifyFunctionArgument);
   return `${func.name}(${args.join(',')})`;
 }
+
+/**
+ * Prettify a function argument for display. Search-filter args (backtick-wrapped)
+ * must not go through {@link prettifyTagKey} directly — that regex is unanchored and
+ * would collapse `` `tags[Limit,number]:>5` `` to `Limit`. Instead, rewrite typed tag
+ * keys inside the filter while keeping the rest of the query intact.
+ */
+function prettifyFunctionArgument(arg: string): string {
+  if (isSearchFilterArgument(arg)) {
+    const filter = arg
+      .slice(1, -1)
+      .replace(/tags\[(\S*),(\S*)\]/g, match => prettifyTagKey(match));
+    return `\`${filter}\``;
+  }
+  return prettifyTagKey(arg);
+}
diff --git a/static/app/utils/fields/exploreEquationAggregates.spec.tsx b/static/app/utils/fields/exploreEquationAggregates.spec.tsx
new file mode 100644
index 000000000000..6ab01162eec7
--- /dev/null
+++ b/static/app/utils/fields/exploreEquationAggregates.spec.tsx
@@ -0,0 +1,95 @@
+import {
+  ALLOWED_EXPLORE_EQUATION_AGGREGATES,
+  ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES,
+  AggregationKey,
+  EXPLORE_FILTERABLE_AGGREGATES,
+  getExploreEquationAggregates,
+  getExploreEquationFieldDefinition,
+  getFieldDefinition,
+} from 'sentry/utils/fields';
+
+describe('Explore equation conditional aggregates', () => {
+  it('keeps Discover avg_if and count_if on the ungated equation list', () => {
+    expect(ALLOWED_EXPLORE_EQUATION_AGGREGATES).toContain(AggregationKey.AVG_IF);
+    expect(ALLOWED_EXPLORE_EQUATION_AGGREGATES).toContain(AggregationKey.COUNT_IF);
+    expect(getExploreEquationAggregates(false)).toEqual(
+      ALLOWED_EXPLORE_EQUATION_AGGREGATES
+    );
+  });
+
+  it('offers EAP _if aggregates only when the feature is on', () => {
+    expect(ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES).toEqual(
+      EXPLORE_FILTERABLE_AGGREGATES.map(name => `${name}_if`)
+    );
+    expect(getExploreEquationAggregates(true)).toEqual(
+      expect.arrayContaining(ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES)
+    );
+    for (const name of ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES) {
+      if (name === 'avg_if' || name === 'count_if') {
+        continue;
+      }
+      expect(getExploreEquationAggregates(false)).not.toContain(name);
+    }
+  });
+
+  it('uses EAP filter-first avg_if when gated on', () => {
+    const ungated = getFieldDefinition('avg_if', 'span');
+    expect(ungated?.parameters?.map(parameter => parameter.name)).toEqual([
+      'column',
+      'condition_column',
+      'condition',
+      'value',
+    ]);
+
+    const definition = getExploreEquationFieldDefinition('avg_if', undefined, true);
+    expect(definition?.parameters?.map(parameter => parameter.name)).toEqual([
+      'filter',
+      'column',
+    ]);
+    expect(definition?.parameters?.[0]).toMatchObject({
+      kind: 'value',
+      defaultValue: '``',
+    });
+    expect(definition?.parameters?.[1]).toMatchObject({
+      kind: 'column',
+      defaultValue: 'span.duration',
+    });
+  });
+
+  it('keeps Discover count_if unless the feature is on', () => {
+    const ungated = getFieldDefinition('count_if', 'span');
+    expect(ungated?.parameters?.map(parameter => parameter.name)).toEqual([
+      'column',
+      'value',
+      'value',
+    ]);
+    expect(ungated?.parameters?.some(parameter => 'options' in parameter)).toBe(true);
+
+    const gated = getExploreEquationFieldDefinition('count_if', undefined, true);
+    expect(gated?.parameters?.map(parameter => parameter.name)).toEqual([
+      'filter',
+      'column',
+    ]);
+    expect(gated?.parameters?.[0]).toMatchObject({
+      kind: 'value',
+      defaultValue: '``',
+    });
+    expect(gated?.parameters?.some(parameter => 'options' in parameter)).toBe(false);
+  });
+
+  it('does not use Discover-style condition operators on gated equation _if aggregates', () => {
+    for (const name of ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES) {
+      const definition = getExploreEquationFieldDefinition(name, undefined, true);
+      expect(definition?.parameters?.[0]).toMatchObject({
+        name: 'filter',
+        kind: 'value',
+        defaultValue: '``',
+      });
+      expect(
+        definition?.parameters?.some(
+          parameter => 'options' in parameter && Boolean(parameter.options?.length)
+        )
+      ).toBe(false);
+    }
+  });
+});
diff --git a/static/app/utils/fields/index.ts b/static/app/utils/fields/index.ts
index c8a26c518826..1be40972a3a6 100644
--- a/static/app/utils/fields/index.ts
+++ b/static/app/utils/fields/index.ts
@@ -1153,6 +1153,35 @@ export const ALLOWED_EXPLORE_VISUALIZE_AGGREGATES: AggregationKey[] = [
   AggregationKey.OPPORTUNITY_SCORE,
 ];
 
+/**
+ * Span aggregates that EAP generates an `_if` combinator for. Used by Explore series
+ * filters and equation builders. See `SPAN_AGGREGATE_COMBINATORS` in
+ * `src/sentry/search/eap/spans/aggregates.py`.
+ */
+export const EXPLORE_FILTERABLE_AGGREGATES: AggregationKey[] = [
+  AggregationKey.COUNT,
+  AggregationKey.COUNT_UNIQUE,
+  AggregationKey.SUM,
+  AggregationKey.AVG,
+  AggregationKey.MIN,
+  AggregationKey.MAX,
+  AggregationKey.P50,
+  AggregationKey.P75,
+  AggregationKey.P90,
+  AggregationKey.P95,
+  AggregationKey.P99,
+  AggregationKey.P100,
+];
+
+/**
+ * EAP conditional aggregates offered in the Explore equation builder
+ * (`avg_if(\`span.op:db\`,span.duration)`). The first argument is a backtick-wrapped
+ * search filter, followed by the base aggregate's parameters. Only included when
+ * `explore-conditional-aggregates` is enabled; see {@link getExploreEquationAggregates}.
+ */
+export const ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES: string[] =
+  EXPLORE_FILTERABLE_AGGREGATES.map(name => `${name}_if`);
+
 export const ALLOWED_EXPLORE_EQUATION_AGGREGATES: AggregationKey[] = [
   ...ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
   AggregationKey.AVG_IF,
@@ -1161,6 +1190,25 @@ export const ALLOWED_EXPLORE_EQUATION_AGGREGATES: AggregationKey[] = [
   AggregationKey.USER_MISERY,
 ];
 
+/**
+ * Aggregates offered in the Explore equation builder. When
+ * `explore-conditional-aggregates` is on, Discover `avg_if` / `count_if` are replaced by
+ * the EAP `_if` combinators (`avg_if`, `count_if`, `sum_if`, …).
+ */
+export function getExploreEquationAggregates(
+  hasConditionalAggregates: boolean
+): string[] {
+  if (!hasConditionalAggregates) {
+    return ALLOWED_EXPLORE_EQUATION_AGGREGATES;
+  }
+  return [
+    ...ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
+    ...ALLOWED_EXPLORE_EQUATION_CONDITIONAL_AGGREGATES,
+    AggregationKey.APDEX,
+    AggregationKey.USER_MISERY,
+  ];
+}
+
 const LOG_AGGREGATION_FIELDS: Record<AggregationKey, FieldDefinition> = {
   ...AGGREGATION_FIELDS,
   [AggregationKey.COUNT]: {
@@ -1699,6 +1747,35 @@ export const NO_ARGUMENT_SPAN_AGGREGATES: AggregationKey[] = Object.entries(
   .filter(([_, field]) => field.parameters?.length === 0)
   .map(([key]) => key as AggregationKey);
 
+/**
+ * Prepend the EAP `_if` search filter argument to a base span aggregate definition.
+ * Empty backticks are the default so the tokenizer keeps a filter slot until the user
+ * fills it in: `avg_if(``,span.duration)`.
+ */
+function withConditionalFilterParameter(definition: FieldDefinition): FieldDefinition {
+  return {
+    ...definition,
+    parameters: [
+      {
+        name: 'filter',
+        kind: 'value',
+        dataType: FieldValueType.STRING,
+        defaultValue: '``',
+        required: true,
+      },
+      ...(definition.parameters ?? []),
+    ],
+  };
+}
+
+const SPAN_CONDITIONAL_AGGREGATION_FIELDS: Record<string, FieldDefinition> =
+  Object.fromEntries(
+    EXPLORE_FILTERABLE_AGGREGATES.map(name => [
+      `${name}_if`,
+      withConditionalFilterParameter(SPAN_AGGREGATION_FIELDS[name]),
+    ])
+  );
+
 export const MEASUREMENT_FIELDS: Record<WebVital | MobileVital, FieldDefinition> = {
   [WebVital.FP]: {
     desc: t('Web Vital First Paint'),
@@ -3852,6 +3929,25 @@ export const getFieldDefinition = (
   return _getFieldFromMappings(type, key, kind) ?? null;
 };
 
+/**
+ * Span field definitions for the Explore equation builder. When
+ * `explore-conditional-aggregates` is on, `_if` combinators use the EAP filter-first
+ * signature (`avg_if(\`span.op:db\`,span.duration)`), including `count_if`.
+ */
+export function getExploreEquationFieldDefinition(
+  key: string,
+  kind?: FieldKind,
+  hasConditionalAggregates = false
+): FieldDefinition | null {
+  if (hasConditionalAggregates) {
+    const conditionalDefinition = SPAN_CONDITIONAL_AGGREGATION_FIELDS[key];
+    if (conditionalDefinition) {
+      return conditionalDefinition;
+    }
+  }
+  return getFieldDefinition(key, 'span', kind);
+}
+
 export function isDeviceClass(key: any): boolean {
   return key === FieldKey.DEVICE_CLASS;
 }
diff --git a/static/app/views/dashboards/widgetBuilder/components/exploreArithmeticBuilder.tsx b/static/app/views/dashboards/widgetBuilder/components/exploreArithmeticBuilder.tsx
index 682451399b2c..4555b3ab51a6 100644
--- a/static/app/views/dashboards/widgetBuilder/components/exploreArithmeticBuilder.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/exploreArithmeticBuilder.tsx
@@ -1,16 +1,9 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback} from 'react';
 
-import {ArithmeticBuilder} from 'sentry/components/arithmeticBuilder';
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
-import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import {stripEquationPrefix} from 'sentry/utils/discover/fields';
-import {
-  ALLOWED_EXPLORE_EQUATION_AGGREGATES,
-  FieldKind,
-  getFieldDefinition,
-} from 'sentry/utils/fields';
 import {useWidgetBuilderTraceItemConfig} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderTraceItemConfig';
-import {useExploreSuggestedAttribute} from 'sentry/views/explore/hooks/useExploreSuggestedAttribute';
+import {ExploreEquationArithmeticBuilder} from 'sentry/views/explore/components/exploreEquationArithmeticBuilder';
 import {useTraceItemDatasetAttributes} from 'sentry/views/explore/hooks/useTraceItemAttributes';
 
 type Props = {
@@ -37,33 +30,6 @@ export function ExploreArithmeticBuilder({equation, onUpdate}: Props) {
     'boolean'
   );
 
-  const functionArguments: FunctionArgument[] = useMemo(() => {
-    return [
-      ...Object.entries(numberTags).map(([key, tag]) => {
-        return {
-          kind: FieldKind.MEASUREMENT,
-          name: key,
-          label: tag.name,
-        };
-      }),
-      ...Object.entries(stringTags).map(([key, tag]) => {
-        return {
-          kind: FieldKind.TAG,
-          name: key,
-          label: tag.name,
-        };
-      }),
-    ];
-  }, [numberTags, stringTags]);
-
-  const getSpanFieldDefinition = useCallback(
-    (key: string) => {
-      const tag = numberTags[key] ?? stringTags[key];
-      return getFieldDefinition(key, 'span', tag?.kind);
-    },
-    [numberTags, stringTags]
-  );
-
   const handleExpressionChange = useCallback(
     (newExpression: Expression) => {
       onUpdate(stripEquationPrefix(newExpression.text));
@@ -71,20 +37,14 @@ export function ExploreArithmeticBuilder({equation, onUpdate}: Props) {
     [onUpdate]
   );
 
-  const getSuggestedAttribute = useExploreSuggestedAttribute({
-    numberAttributes: numberTags,
-    stringAttributes: stringTags,
-    booleanAttributes: booleanTags,
-  });
-
   return (
-    <ArithmeticBuilder
-      aggregations={ALLOWED_EXPLORE_EQUATION_AGGREGATES}
-      functionArguments={functionArguments}
-      getFieldDefinition={getSpanFieldDefinition}
+    <ExploreEquationArithmeticBuilder
       expression={expression}
       setExpression={handleExpressionChange}
-      getSuggestedKey={getSuggestedAttribute}
+      traceItemType={traceItemType}
+      numberTags={numberTags}
+      stringTags={stringTags}
+      booleanTags={booleanTags}
     />
   );
 }
diff --git a/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx b/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx
new file mode 100644
index 000000000000..47185ec7e4e8
--- /dev/null
+++ b/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx
@@ -0,0 +1,55 @@
+import {ArithmeticBuilder} from 'sentry/components/arithmeticBuilder';
+import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
+import type {TagCollection} from 'sentry/types/group';
+import {useExploreEquationBuilderConfig} from 'sentry/views/explore/hooks/useExploreEquationBuilderConfig';
+import type {TraceItemDataset} from 'sentry/views/explore/types';
+
+interface ExploreEquationArithmeticBuilderProps {
+  booleanTags: TagCollection;
+  expression: string;
+  numberTags: TagCollection;
+  setExpression: (expression: Expression) => void;
+  stringTags: TagCollection;
+  traceItemType: TraceItemDataset;
+  ['data-test-id']?: string;
+}
+
+/**
+ * Shared ArithmeticBuilder wiring for Explore equation editors (toolbar, column
+ * editor, dashboards widget builder).
+ */
+export function ExploreEquationArithmeticBuilder({
+  expression,
+  setExpression,
+  traceItemType,
+  numberTags,
+  stringTags,
+  booleanTags,
+  'data-test-id': dataTestId,
+}: ExploreEquationArithmeticBuilderProps) {
+  const {
+    aggregations,
+    functionArguments,
+    getFieldDefinition,
+    getFilterTagValues,
+    getSuggestedKey,
+  } = useExploreEquationBuilderConfig({
+    traceItemType,
+    numberTags,
+    stringTags,
+    booleanTags,
+  });
+
+  return (
+    <ArithmeticBuilder
+      data-test-id={dataTestId}
+      aggregations={aggregations}
+      functionArguments={functionArguments}
+      getFieldDefinition={getFieldDefinition}
+      getFilterTagValues={getFilterTagValues}
+      expression={expression}
+      setExpression={setExpression}
+      getSuggestedKey={getSuggestedKey}
+    />
+  );
+}
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
index 8b82980fc7af..f15ec7b74b9f 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
@@ -1,26 +1,20 @@
-import {useCallback, useMemo, type ReactNode} from 'react';
+import {useCallback, type ReactNode} from 'react';
 import {useSortable} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
 
 import {Button} from '@sentry/scraps/button';
 import {Flex} from '@sentry/scraps/layout';
 
-import {ArithmeticBuilder} from 'sentry/components/arithmeticBuilder';
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
-import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import {DragReorderButton} from 'sentry/components/dnd/dragReorderButton';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {EQUATION_PREFIX, stripEquationPrefix} from 'sentry/utils/discover/fields';
-import {
-  ALLOWED_EXPLORE_EQUATION_AGGREGATES,
-  FieldKind,
-  getFieldDefinition,
-} from 'sentry/utils/fields';
+import {ExploreEquationArithmeticBuilder} from 'sentry/views/explore/components/exploreEquationArithmeticBuilder';
 import {ToolbarRow} from 'sentry/views/explore/components/toolbar/styles';
-import {useExploreSuggestedAttribute} from 'sentry/views/explore/hooks/useExploreSuggestedAttribute';
 import {useSpanItemAttributes} from 'sentry/views/explore/hooks/useTraceItemAttributes';
 import {Visualize} from 'sentry/views/explore/queryParams/visualize';
+import {TraceItemDataset} from 'sentry/views/explore/types';
 
 interface VisualizeEquationProps {
   onReplace: (visualize: Visualize) => void;
@@ -43,33 +37,6 @@ export function VisualizeEquation({
   const {attributes: stringTags} = useSpanItemAttributes({}, 'string');
   const {attributes: booleanTags} = useSpanItemAttributes({}, 'boolean');
 
-  const functionArguments: FunctionArgument[] = useMemo(() => {
-    return [
-      ...Object.entries(numberTags).map(([key, tag]) => {
-        return {
-          kind: FieldKind.MEASUREMENT,
-          name: key,
-          label: tag.name,
-        };
-      }),
-      ...Object.entries(stringTags).map(([key, tag]) => {
-        return {
-          kind: FieldKind.TAG,
-          name: key,
-          label: tag.name,
-        };
-      }),
-    ];
-  }, [numberTags, stringTags]);
-
-  const getSpanFieldDefinition = useCallback(
-    (key: string) => {
-      const tag = numberTags[key] ?? stringTags[key];
-      return getFieldDefinition(key, 'span', tag?.kind);
-    },
-    [numberTags, stringTags]
-  );
-
   const handleExpressionChange = useCallback(
     (newExpression: Expression) => {
       const newVisualize = visualize.replace({
@@ -80,12 +47,6 @@ export function VisualizeEquation({
     [onReplace, visualize]
   );
 
-  const getSuggestedAttribute = useExploreSuggestedAttribute({
-    numberAttributes: numberTags,
-    stringAttributes: stringTags,
-    booleanAttributes: booleanTags,
-  });
-
   const {attributes, listeners, setNodeRef, transform} = useSortable({
     id: dragColumnId ?? 0,
     transition: null,
@@ -102,13 +63,13 @@ export function VisualizeEquation({
       )}
       {label}
       <Flex flex={1}>
-        <ArithmeticBuilder
-          aggregations={ALLOWED_EXPLORE_EQUATION_AGGREGATES}
-          functionArguments={functionArguments}
-          getFieldDefinition={getSpanFieldDefinition}
+        <ExploreEquationArithmeticBuilder
           expression={expression}
           setExpression={handleExpressionChange}
-          getSuggestedKey={getSuggestedAttribute}
+          traceItemType={TraceItemDataset.SPANS}
+          numberTags={numberTags}
+          stringTags={stringTags}
+          booleanTags={booleanTags}
         />
       </Flex>
       {onDelete && (
diff --git a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
new file mode 100644
index 000000000000..a98a62e70356
--- /dev/null
+++ b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
@@ -0,0 +1,97 @@
+import {useCallback, useMemo} from 'react';
+
+import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
+import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
+import type {TagCollection} from 'sentry/types/group';
+import type {FieldDefinition} from 'sentry/utils/fields';
+import {
+  FieldKind,
+  getExploreEquationAggregates,
+  getExploreEquationFieldDefinition,
+} from 'sentry/utils/fields';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import {useExploreSuggestedAttribute} from 'sentry/views/explore/hooks/useExploreSuggestedAttribute';
+import {useGetTraceItemAttributeValues} from 'sentry/views/explore/hooks/useGetTraceItemAttributeValues';
+import type {TraceItemDataset} from 'sentry/views/explore/types';
+
+export function traceItemTagsToFunctionArguments(
+  numberTags: TagCollection,
+  stringTags: TagCollection
+): FunctionArgument[] {
+  return [
+    ...Object.entries(numberTags).map(([key, tag]) => ({
+      kind: FieldKind.MEASUREMENT,
+      name: key,
+      label: tag.name,
+    })),
+    ...Object.entries(stringTags).map(([key, tag]) => ({
+      kind: FieldKind.TAG,
+      name: key,
+      label: tag.name,
+    })),
+  ];
+}
+
+interface UseExploreEquationBuilderConfigOptions {
+  booleanTags: TagCollection;
+  numberTags: TagCollection;
+  stringTags: TagCollection;
+  traceItemType: TraceItemDataset;
+}
+
+interface ExploreEquationBuilderConfig {
+  aggregations: string[];
+  functionArguments: FunctionArgument[];
+  getFieldDefinition: (key: string) => FieldDefinition | null;
+  getFilterTagValues: GetTagValues;
+  getSuggestedKey: (key: string) => string | null;
+}
+
+export function useExploreEquationBuilderConfig({
+  traceItemType,
+  numberTags,
+  stringTags,
+  booleanTags,
+}: UseExploreEquationBuilderConfigOptions): ExploreEquationBuilderConfig {
+  const organization = useOrganization();
+  const hasConditionalAggregates = organization.features.includes(
+    'explore-conditional-aggregates'
+  );
+
+  const aggregations = useMemo(
+    () => getExploreEquationAggregates(hasConditionalAggregates),
+    [hasConditionalAggregates]
+  );
+
+  const functionArguments = useMemo(
+    () => traceItemTagsToFunctionArguments(numberTags, stringTags),
+    [numberTags, stringTags]
+  );
+
+  const getFieldDefinition = useCallback(
+    (key: string) => {
+      const tag = numberTags[key] ?? stringTags[key];
+      return getExploreEquationFieldDefinition(key, tag?.kind, hasConditionalAggregates);
+    },
+    [hasConditionalAggregates, numberTags, stringTags]
+  );
+
+  const getSuggestedKey = useExploreSuggestedAttribute({
+    numberAttributes: numberTags,
+    stringAttributes: stringTags,
+    booleanAttributes: booleanTags,
+  });
+
+  const getFilterTagValues = useGetTraceItemAttributeValues({
+    traceItemType,
+    type: 'string',
+  });
+
+  return {
+    aggregations,
+    functionArguments,
+    getFieldDefinition,
+    getSuggestedKey,
+    getFilterTagValues,
+  };
+}
diff --git a/static/app/views/explore/hooks/useGetTraceItemAttributeValues.spec.tsx b/static/app/views/explore/hooks/useGetTraceItemAttributeValues.spec.tsx
index 7063b3ec0886..fb255475f254 100644
--- a/static/app/views/explore/hooks/useGetTraceItemAttributeValues.spec.tsx
+++ b/static/app/views/explore/hooks/useGetTraceItemAttributeValues.spec.tsx
@@ -169,6 +169,26 @@ describe('useGetTraceItemAttributeValues', () => {
     expect(searchResults).toEqual([]); // This will always return an empty array because we don't suggest values for numbers
   });
 
+  it('does not request attribute values when the tag key is empty', async () => {
+    const emptyKeyMock = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/trace-items/attributes//values/',
+      body: [],
+    });
+
+    const {result} = renderValuesHook();
+
+    let searchResults: ValueResult = [];
+    await act(async () => {
+      searchResults = await result.current({
+        tag: {key: '', name: '', kind: FieldKind.TAG},
+        searchQuery: '',
+      });
+    });
+
+    expect(emptyKeyMock).not.toHaveBeenCalled();
+    expect(searchResults).toEqual([]);
+  });
+
   it('getTraceItemAttributeValues returns empty array for boolean type', async () => {
     const searchQueryMock = MockApiClient.addMockResponse({
       url: `/organizations/org-slug/trace-items/attributes/${attributeKey}/values/`,
diff --git a/static/app/views/explore/hooks/useGetTraceItemAttributeValues.tsx b/static/app/views/explore/hooks/useGetTraceItemAttributeValues.tsx
index 2d8394f1b4c1..f6ae4e896cc6 100644
--- a/static/app/views/explore/hooks/useGetTraceItemAttributeValues.tsx
+++ b/static/app/views/explore/hooks/useGetTraceItemAttributeValues.tsx
@@ -53,8 +53,14 @@ export function useGetTraceItemAttributeValues({
 
   return useCallback(
     async ({tag, searchQuery}: GetTagValuesParams): Promise<TagValueWithCount[]> => {
-      if (tag.kind === FieldKind.FUNCTION || type === 'number' || type === 'boolean') {
-        // We can't really auto suggest values for aggregate functions, numbers, or booleans
+      if (
+        !tag.key ||
+        tag.kind === FieldKind.FUNCTION ||
+        type === 'number' ||
+        type === 'boolean'
+      ) {
+        // We can't really auto suggest values for aggregate functions, numbers, or booleans.
+        // An empty key would request `/attributes//values/` and 404.
         return Promise.resolve([]);
       }
 
diff --git a/static/app/views/explore/queryParams/context.tsx b/static/app/views/explore/queryParams/context.tsx
index 678587def0a7..3bcd14d4b9c7 100644
--- a/static/app/views/explore/queryParams/context.tsx
+++ b/static/app/views/explore/queryParams/context.tsx
@@ -30,7 +30,10 @@ import {
   type Visualize,
 } from 'sentry/views/explore/queryParams/visualize';
 import type {WritableQueryParams} from 'sentry/views/explore/queryParams/writableQueryParams';
-import {isConditionalAggregateYAxisValid} from 'sentry/views/explore/utils/conditionalAggregate';
+import {
+  areConditionalAggregateFiltersInExpressionValid,
+  isConditionalAggregateYAxisValid,
+} from 'sentry/views/explore/utils/conditionalAggregate';
 
 interface QueryParamsContextValue {
   managedFields: Set<string>;
@@ -274,7 +277,10 @@ export function useQueryParamsAggregateFields(
           return true;
         }
         if (isVisualizeEquation(aggregateField)) {
-          return aggregateField.expression.isValid;
+          return (
+            aggregateField.expression.isValid &&
+            areConditionalAggregateFiltersInExpressionValid(aggregateField.yAxis)
+          );
         }
         // Drop series whose `_if` filter is invalid (e.g. aggregates as keys) so
         // timeseries / table queries never send them to the backend.
@@ -309,7 +315,10 @@ export function useQueryParamsVisualizes(
     if (validate) {
       return queryParams.visualizes.filter(visualize => {
         if (isVisualizeEquation(visualize)) {
-          return visualize.expression.isValid;
+          return (
+            visualize.expression.isValid &&
+            areConditionalAggregateFiltersInExpressionValid(visualize.yAxis)
+          );
         }
         // Same as aggregateFields: skip series with an invalid `_if` filter.
         return isConditionalAggregateYAxisValid(visualize.yAxis);
diff --git a/static/app/views/explore/tables/aggregateColumnEditorModal.spec.tsx b/static/app/views/explore/tables/aggregateColumnEditorModal.spec.tsx
index 5516143da8b3..61e33f4ca0cb 100644
--- a/static/app/views/explore/tables/aggregateColumnEditorModal.spec.tsx
+++ b/static/app/views/explore/tables/aggregateColumnEditorModal.spec.tsx
@@ -21,7 +21,10 @@ import type {
   AggregateField,
   WritableAggregateField,
 } from 'sentry/views/explore/queryParams/aggregateField';
-import {VisualizeFunction} from 'sentry/views/explore/queryParams/visualize';
+import {
+  VisualizeEquation,
+  VisualizeFunction,
+} from 'sentry/views/explore/queryParams/visualize';
 import {AggregateColumnEditorModal} from 'sentry/views/explore/tables/aggregateColumnEditorModal';
 
 const stringTags: TagCollection = {
@@ -544,6 +547,30 @@ describe('AggregateColumnEditorModal', () => {
       await userEvent.click(screen.getByRole('button', {name: 'Apply'}));
       expect(onColumnsChange).toHaveBeenCalledWith([{yAxes: ['epm()']}]);
     });
+
+    it('does not offer EAP-only _if aggregates in equations without the feature', async () => {
+      renderModal({columns: [new VisualizeEquation('equation|')]});
+
+      const input = await screen.findByRole('combobox', {name: 'Add a term'});
+      await userEvent.click(input);
+      // Discover already ships avg_if/count_if; sum_if is EAP-only behind the flag.
+      await userEvent.type(input, 'sum_if');
+
+      expect(screen.queryByRole('option', {name: 'sum_if'})).not.toBeInTheDocument();
+    });
+
+    it('offers EAP _if aggregates in equations with the feature', async () => {
+      renderModal({
+        columns: [new VisualizeEquation('equation|')],
+        organization: organizationWithConditionalAggregates,
+      });
+
+      const input = await screen.findByRole('combobox', {name: 'Add a term'});
+      await userEvent.click(input);
+      await userEvent.type(input, 'sum_if');
+
+      expect(await screen.findByRole('option', {name: 'sum_if'})).toBeInTheDocument();
+    });
   });
 });
 
diff --git a/static/app/views/explore/tables/aggregateColumnEditorModal.tsx b/static/app/views/explore/tables/aggregateColumnEditorModal.tsx
index d67d99a0d830..7eede9ec102a 100644
--- a/static/app/views/explore/tables/aggregateColumnEditorModal.tsx
+++ b/static/app/views/explore/tables/aggregateColumnEditorModal.tsx
@@ -11,9 +11,7 @@ import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
-import {ArithmeticBuilder} from 'sentry/components/arithmeticBuilder';
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
-import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import {DragReorderButton} from 'sentry/components/dnd/dragReorderButton';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
@@ -32,12 +30,12 @@ import {
 import {
   ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
   AggregationKey,
-  FieldKind,
   getFieldDefinition,
   NO_ARGUMENT_SPAN_AGGREGATES,
 } from 'sentry/utils/fields';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {ExploreEquationArithmeticBuilder} from 'sentry/views/explore/components/exploreEquationArithmeticBuilder';
 import {
   TraceItemSearchQueryBuilder,
   type TraceItemSearchQueryBuilderProps,
@@ -54,7 +52,6 @@ import {
   updateVisualizeAggregate,
 } from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 import type {Column} from 'sentry/views/explore/hooks/useDragNDropColumns';
-import {useExploreSuggestedAttribute} from 'sentry/views/explore/hooks/useExploreSuggestedAttribute';
 import {useGroupByFields} from 'sentry/views/explore/hooks/useGroupByFields';
 import {useSpanItemAttributes} from 'sentry/views/explore/hooks/useTraceItemAttributes';
 import {useVisualizeFields} from 'sentry/views/explore/hooks/useVisualizeFields';
@@ -785,33 +782,6 @@ function EquationSelector({
 }: VisualizeSelectorProps) {
   const expression = stripEquationPrefix(visualize.yAxis);
 
-  const functionArguments: FunctionArgument[] = useMemo(() => {
-    return [
-      ...Object.entries(numberTags).map(([key, tag]) => {
-        return {
-          kind: FieldKind.MEASUREMENT,
-          name: key,
-          label: tag.name,
-        };
-      }),
-      ...Object.entries(stringTags).map(([key, tag]) => {
-        return {
-          kind: FieldKind.TAG,
-          name: key,
-          label: tag.name,
-        };
-      }),
-    ];
-  }, [numberTags, stringTags]);
-
-  const getSpanFieldDefinition = useCallback(
-    (key: string) => {
-      const tag = numberTags[key] ?? stringTags[key];
-      return getFieldDefinition(key, 'span', tag?.kind);
-    },
-    [numberTags, stringTags]
-  );
-
   const handleExpressionChange = useCallback(
     (newExpression: Expression) => {
       onChange(visualize.replace({yAxis: `${EQUATION_PREFIX}${newExpression.text}`}));
@@ -819,21 +789,15 @@ function EquationSelector({
     [onChange, visualize]
   );
 
-  const getSuggestedAttribute = useExploreSuggestedAttribute({
-    numberAttributes: numberTags,
-    stringAttributes: stringTags,
-    booleanAttributes: booleanTags,
-  });
-
   return (
-    <ArithmeticBuilder
+    <ExploreEquationArithmeticBuilder
       data-test-id="editor-visualize-equation"
-      aggregations={ALLOWED_EXPLORE_VISUALIZE_AGGREGATES}
-      functionArguments={functionArguments}
-      getFieldDefinition={getSpanFieldDefinition}
       expression={expression}
       setExpression={handleExpressionChange}
-      getSuggestedKey={getSuggestedAttribute}
+      traceItemType={TraceItemDataset.SPANS}
+      numberTags={numberTags}
+      stringTags={stringTags}
+      booleanTags={booleanTags}
     />
   );
 }
diff --git a/static/app/views/explore/utils.spec.tsx b/static/app/views/explore/utils.spec.tsx
index 75cdb8c53067..33d83877227e 100644
--- a/static/app/views/explore/utils.spec.tsx
+++ b/static/app/views/explore/utils.spec.tsx
@@ -11,6 +11,7 @@ import {
   findSuggestedColumns,
   getSamplingWarningReason,
   isSamplingSensitiveAggregate,
+  prettifyAggregation,
   removeHiddenKeys,
   shouldWarnSamplingSensitive,
   viewSamplesTarget,
@@ -686,3 +687,19 @@ describe('getSamplingWarningReason', () => {
     ).toBeNull();
   });
 });
+
+describe('prettifyAggregation', () => {
+  it('prettifies typed tag keys inside conditional filters', () => {
+    expect(prettifyAggregation('avg_if(`tags[Limit,number]:>5`,span.duration)')).toBe(
+      'avg_if(`Limit:>5`,span.duration)'
+    );
+  });
+
+  it('prettifies typed tag keys in equation conditionals used as chart titles', () => {
+    expect(
+      prettifyAggregation(
+        'equation|avg_if(`tags[Limit,number]:>5`,span.duration) / p95(span.duration)'
+      )
+    ).toBe(' avg_if(`Limit:>5`,span.duration)  /  p95(span.duration) ');
+  });
+});
diff --git a/static/app/views/explore/utils/conditionalAggregate.spec.tsx b/static/app/views/explore/utils/conditionalAggregate.spec.tsx
index 87fe61311a7c..f61ab5061f37 100644
--- a/static/app/views/explore/utils/conditionalAggregate.spec.tsx
+++ b/static/app/views/explore/utils/conditionalAggregate.spec.tsx
@@ -5,7 +5,9 @@ import {
 import {
   applyConditionalFilter,
   areAllVisualizesInvalidConditionalFilters,
+  areConditionalAggregateFiltersInExpressionValid,
   buildConditionalAggregate,
+  ensureSearchFilterArgument,
   escapeConditionalFilter,
   getConditionalFilterInvalidSeriesMessage,
   getConditionalFilterInvalidSeriesMessageForYAxis,
@@ -218,6 +220,14 @@ describe('isConditionalAggregateFilterValid', () => {
   });
 });
 
+describe('ensureSearchFilterArgument', () => {
+  it('wraps raw filters in backticks', () => {
+    expect(ensureSearchFilterArgument('span.op:db')).toBe('`span.op:db`');
+    expect(ensureSearchFilterArgument('`span.op:db`')).toBe('`span.op:db`');
+    expect(ensureSearchFilterArgument('')).toBe('``');
+  });
+});
+
 describe('isConditionalAggregateYAxisValid', () => {
   it('accepts plain aggregates and valid _if filters', () => {
     expect(isConditionalAggregateYAxisValid('count(span.duration)')).toBe(true);
@@ -226,6 +236,11 @@ describe('isConditionalAggregateYAxisValid', () => {
     );
   });
 
+  it('rejects _if aggregates with an empty filter', () => {
+    expect(isConditionalAggregateYAxisValid('avg_if(``,span.duration)')).toBe(false);
+    expect(isConditionalAggregateYAxisValid('count_if(``)')).toBe(false);
+  });
+
   it('rejects _if filters that use aggregate keys', () => {
     expect(
       isConditionalAggregateYAxisValid(
@@ -240,6 +255,24 @@ describe('isConditionalAggregateYAxisValid', () => {
   });
 });
 
+describe('areConditionalAggregateFiltersInExpressionValid', () => {
+  it('accepts equations with filled _if filters', () => {
+    expect(
+      areConditionalAggregateFiltersInExpressionValid(
+        'avg_if(`span.op:db`,span.duration) / count(span.duration)'
+      )
+    ).toBe(true);
+  });
+
+  it('rejects equations with empty _if filters', () => {
+    expect(
+      areConditionalAggregateFiltersInExpressionValid(
+        'avg_if(``,span.duration) / count(span.duration)'
+      )
+    ).toBe(false);
+  });
+});
+
 describe('getConditionalFilterInvalidSeriesMessage', () => {
   it('mentions aggregates when the filter includes a visualize aggregate', () => {
     expect(getConditionalFilterInvalidSeriesMessage('p95(span.duration):>100')).toBe(
diff --git a/static/app/views/explore/utils/conditionalAggregate.tsx b/static/app/views/explore/utils/conditionalAggregate.tsx
index 94864f0256f2..2761995a1139 100644
--- a/static/app/views/explore/utils/conditionalAggregate.tsx
+++ b/static/app/views/explore/utils/conditionalAggregate.tsx
@@ -1,12 +1,23 @@
+import {
+  ensureSearchFilterArgument,
+  escapeConditionalFilter,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+import {isTokenFunction} from 'sentry/components/arithmeticBuilder/token';
+import {tokenizeExpression} from 'sentry/components/arithmeticBuilder/tokenizer';
 import {
   parseQueryBuilderValue,
   queryIsValid,
 } from 'sentry/components/searchQueryBuilder/utils';
 import {t} from 'sentry/locale';
-import {parseFunction, type ParsedFunction} from 'sentry/utils/discover/fields';
+import {
+  parseFunction,
+  stripEquationPrefix,
+  type ParsedFunction,
+} from 'sentry/utils/discover/fields';
 import {
   ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
   AggregationKey,
+  EXPLORE_FILTERABLE_AGGREGATES,
   getFieldDefinition,
 } from 'sentry/utils/fields';
 import {prettifyQueryConditions} from 'sentry/views/dashboards/utils/prettifyQueryConditions';
@@ -62,28 +73,6 @@ export function getConditionalFilterInvalidSeriesMessageForVisualizes(
   return CONDITIONAL_FILTER_INVALID_SERIES_MESSAGE;
 }
 
-/**
- * Span aggregates that the EAP `_if` combinator is generated for. Everything else
- * offered by the visualize dropdown (epm, eps, failure_rate, failure_count and the
- * score formulas) is a formula rather than an aggregate, and formulas do not get an
- * `_if` variant. See `SPAN_AGGREGATE_COMBINATORS` in
- * `src/sentry/search/eap/spans/aggregates.py`.
- */
-const FILTERABLE_AGGREGATES: string[] = [
-  AggregationKey.COUNT,
-  AggregationKey.COUNT_UNIQUE,
-  AggregationKey.SUM,
-  AggregationKey.AVG,
-  AggregationKey.MIN,
-  AggregationKey.MAX,
-  AggregationKey.P50,
-  AggregationKey.P75,
-  AggregationKey.P90,
-  AggregationKey.P95,
-  AggregationKey.P99,
-  AggregationKey.P100,
-];
-
 /**
  * Matches visualize aggregates used as search keys, with or without args
  * (`p95:`, `p95(span.duration):`, `count():`).
@@ -94,19 +83,11 @@ const VISUALIZE_AGGREGATE_KEY_PATTERN = new RegExp(
 
 export type ConditionalAggregate = ParsedFunction;
 
-/**
- * Remove backticks so the filter can be safely wrapped in them.
- *
- * The backtick delimiter has no escape sequence anywhere in the stack: the arithmetic
- * grammar matches `` "`" [^`]* "`" ``, the backend argument tokenizer ends the filter at
- * the first backtick it sees, and the resolver recovers the query by slicing off the
- * outer characters. A backtick in the middle of a filter therefore truncates the query
- * and can swallow the remaining aggregate arguments, so it is dropped instead. Backticks
- * carry no meaning in the search syntax, so nothing searchable is lost.
- */
-export function escapeConditionalFilter(filter: string): string {
-  return filter.replace(/`/g, '').trim();
-}
+export {
+  ensureSearchFilterArgument,
+  escapeConditionalFilter,
+  unwrapSearchFilterArgument,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
 
 /**
  * Split a visualize yAxis into its base aggregate and its `_if` filter.
@@ -123,12 +104,12 @@ export function parseConditionalAggregate(yAxis: string): ConditionalAggregate |
     return parsed;
   }
 
-  const [, ...restArguments] = parsed.arguments;
   return {
     name: parsed.name.endsWith(IF_SUFFIX)
       ? parsed.name.slice(0, -IF_SUFFIX.length)
       : parsed.name,
-    arguments: restArguments,
+    // Drop the backtick-wrapped filter; remaining args are the aggregate columns.
+    arguments: parsed.arguments.slice(1),
     filter: parsed.filter,
   };
 }
@@ -145,11 +126,12 @@ export function buildConditionalAggregate({
   filter: string;
   name: string;
 }): string {
-  const escapedFilter = escapeConditionalFilter(filter);
-  if (!escapedFilter) {
+  if (!escapeConditionalFilter(filter)) {
     return `${name}(${args.join(',')})`;
   }
-  return `${name}${IF_SUFFIX}(\`${escapedFilter}\`${args.map(arg => `,${arg}`).join('')})`;
+  return `${name}${IF_SUFFIX}(${ensureSearchFilterArgument(filter)}${args
+    .map(arg => `,${arg}`)
+    .join('')})`;
 }
 
 /**
@@ -195,7 +177,7 @@ export function withReadableConditionalFilter(yAxis: string): string {
  * Whether an aggregate can carry an `_if` search filter.
  */
 export function supportsConditionalAggregateFilter(aggregateName: string): boolean {
-  return FILTERABLE_AGGREGATES.includes(aggregateName);
+  return EXPLORE_FILTERABLE_AGGREGATES.includes(aggregateName as AggregationKey);
 }
 
 /**
@@ -245,15 +227,46 @@ export function isConditionalAggregateFilterValid(filter: string): boolean {
 
 /**
  * Whether a visualize yAxis's `_if` filter (if any) is valid for querying.
+ *
+ * Plain aggregates (no `_if`) are always valid here. An `_if` with an empty
+ * filter (`avg_if(\`\`,span.duration)`) is invalid: the backend combinator rejects
+ * empty queries and falls back to the deprecated Discover-style condition args.
  */
 export function isConditionalAggregateYAxisValid(yAxis: string): boolean {
   const conditional = parseConditionalAggregate(yAxis);
-  if (!conditional?.filter) {
+  if (!conditional) {
     return true;
   }
+  // `filter === undefined` → no `_if` combinator. `filter === ''` → empty backticks.
+  if (conditional.filter === undefined) {
+    return true;
+  }
+  if (!conditional.filter.trim()) {
+    return false;
+  }
   return isConditionalAggregateFilterValid(conditional.filter);
 }
 
+/**
+ * Validate every `_if(...)` call inside an equation (or any free-form expression).
+ *
+ * Equation yAxes are not themselves a single aggregate, so
+ * {@link isConditionalAggregateYAxisValid} alone is not enough.
+ */
+export function areConditionalAggregateFiltersInExpressionValid(
+  expression: string
+): boolean {
+  const tokens = tokenizeExpression(stripEquationPrefix(expression));
+  for (const token of tokens) {
+    if (isTokenFunction(token) && token.function.endsWith(IF_SUFFIX)) {
+      if (!isConditionalAggregateYAxisValid(token.text)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
 /**
  * True when every series is a non-equation visualize with an invalid `_if` filter.
  *

From a4fc3e02af17fa23e2de920322e634455418c6d3 Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Fri, 28 Aug 2026 12:01:03 -0400
Subject: [PATCH 02/14] fix(explore): Address Bugbot findings for equation _if
 filters

Flush pending argument edits when leaving the args grid, bound compound-filter clauses at boolean operators, and keep Discover-style avg_if/count_if editable when the EAP flag is on.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilter.spec.ts                 |  22 +++
 .../arithmeticBuilder/conditionalFilter.ts    |  20 ++-
 .../components/arithmeticBuilder/context.tsx  |   5 +-
 .../arithmeticBuilder/token/function.tsx      | 169 ++++++++++--------
 .../arithmeticBuilder/token/index.spec.tsx    |  54 +++++-
 .../fields/exploreEquationAggregates.spec.tsx |  15 ++
 static/app/utils/fields/index.ts              |  23 ++-
 .../hooks/useExploreEquationBuilderConfig.ts  |   9 +-
 8 files changed, 229 insertions(+), 88 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts b/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
index c905aec7eca2..6ebcd9290a67 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
@@ -47,6 +47,28 @@ describe('getConditionalFilterClauseAtCursor', () => {
       clauseStart: 35,
     });
   });
+
+  it('limits the clause to the next operator when the cursor is on a boolean operator', () => {
+    const value = 'span.op:db and span.description:foo and span.status:ok';
+    const andIndex = value.indexOf(' and ');
+    expect(getConditionalFilterClauseAtCursor(value, andIndex + 1)).toEqual({
+      clause: 'span.description:foo',
+      clauseCursorIndex: 0,
+      clauseEnd: 35,
+      clauseStart: 15,
+    });
+  });
+
+  it('limits the clause to the next operator when the cursor is at the end of a boolean operator', () => {
+    const value = 'span.op:db and span.description:foo and span.status:ok';
+    const secondClauseStart = value.indexOf('span.description');
+    expect(getConditionalFilterClauseAtCursor(value, secondClauseStart)).toEqual({
+      clause: 'span.description:foo',
+      clauseCursorIndex: 0,
+      clauseEnd: 35,
+      clauseStart: 15,
+    });
+  });
 });
 
 describe('getConditionalFilterEditPhase', () => {
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.ts b/static/app/components/arithmeticBuilder/conditionalFilter.ts
index 23865402dd46..b71093fc3068 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter.ts
@@ -146,23 +146,25 @@ function getConditionalFilterClauseBounds(
   cursorIndex: number,
   booleanOperators: BooleanOperatorMatch[] = findBooleanOperators(value)
 ): {clauseEnd: number; clauseStart: number} {
-  const cursor = Math.max(0, Math.min(cursorIndex, value.length));
+  let cursor = Math.max(0, Math.min(cursorIndex, value.length));
+
+  // Cursor on a boolean operator counts as the start of the following clause.
+  for (const operator of booleanOperators) {
+    if (cursor >= operator.start && cursor <= operator.end) {
+      cursor = operator.end;
+      break;
+    }
+  }
+
   let clauseStart = 0;
   let clauseEnd = value.length;
 
   for (const operator of booleanOperators) {
-    if (cursor > operator.end) {
+    if (cursor >= operator.end) {
       clauseStart = operator.end;
       continue;
     }
 
-    if (cursor >= operator.start && cursor <= operator.end) {
-      return {
-        clauseStart: operator.end,
-        clauseEnd: value.length,
-      };
-    }
-
     if (cursor < operator.start) {
       clauseEnd = operator.start;
       break;
diff --git a/static/app/components/arithmeticBuilder/context.tsx b/static/app/components/arithmeticBuilder/context.tsx
index a5b7dffac2f4..ddd3acb9dca9 100644
--- a/static/app/components/arithmeticBuilder/context.tsx
+++ b/static/app/components/arithmeticBuilder/context.tsx
@@ -14,7 +14,10 @@ interface ArithmeticBuilderContextData {
   dispatch: Dispatch<ArithmeticBuilderAction>;
   focusOverride: FocusOverride | null;
   functionArguments: FunctionArgument[];
-  getFieldDefinition: (key: string) => FieldDefinition | null;
+  getFieldDefinition: (
+    key: string,
+    attributeTexts?: readonly string[]
+  ) => FieldDefinition | null;
   /**
    * Fetches tag values for `_if` combinator filter arguments (e.g. after `span.op:`).
    */
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index cd72bc465a8f..ace7467b3218 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -128,13 +128,14 @@ function ArgumentsGrid({
   token: functionToken,
   rowRef,
 }: ArgumentsGridProps) {
-  const {getFieldDefinition} = useArithmeticBuilder();
+  const {dispatch, getFieldDefinition} = useArithmeticBuilder();
 
   const resolveArgumentLabel = useCallback(
     (index: number, fallbackLabel: string) => {
-      const fieldDefinition = getFieldDefinition(functionToken.function)?.parameters?.[
-        index
-      ];
+      const fieldDefinition = getFieldDefinition(
+        functionToken.function,
+        functionToken.attributes.map(attr => attr.text)
+      )?.parameters?.[index];
       return resolveArgumentDisplayLabel(fieldDefinition, fallbackLabel);
     },
     [getFieldDefinition, functionToken]
@@ -149,9 +150,29 @@ function ArgumentsGrid({
     })
   );
 
+  const argsRef = useRef(args);
+  argsRef.current = args;
+  const functionTokenRef = useRef(functionToken);
+  functionTokenRef.current = functionToken;
+
+  const commitArgumentsIfChanged = useCallback(() => {
+    const nextArgs = argsRef.current.map(argument => argument.value).join(',');
+    const prevArgs = functionTokenRef.current.attributes
+      .map(attribute => attribute.text)
+      .join(',');
+    if (nextArgs === prevArgs) {
+      return;
+    }
+    dispatch({
+      type: 'REPLACE_TOKEN',
+      token: functionTokenRef.current,
+      text: `${functionTokenRef.current.function}(${nextArgs})`,
+    });
+  }, [dispatch]);
+
   const updateArgumentAtIndex = (index: number, argument: string) => {
-    setArguments(prev =>
-      prev.map((item, i) =>
+    setArguments(prev => {
+      const next = prev.map((item, i) =>
         index === i
           ? {
               ...item,
@@ -159,8 +180,10 @@ function ArgumentsGrid({
               label: resolveArgumentLabel(index, prettifyTagKey(argument)),
             }
           : item
-      )
-    );
+      );
+      argsRef.current = next;
+      return next;
+    });
   };
 
   if (!args.length) {
@@ -176,6 +199,7 @@ function ArgumentsGrid({
       item={functionItem}
       state={functionListState}
       token={functionToken}
+      onArgumentsBlur={commitArgumentsIfChanged}
       onArgumentsChange={(index: number, argument: string) =>
         updateArgumentAtIndex(index, argument)
       }
@@ -189,6 +213,7 @@ interface GridListProps
   extends AriaGridListOptions<TokenAttribute>, ArithmeticTokenFunctionProps {
   arguments: Argument[];
   children: CollectionChildren<TokenAttribute>;
+  onArgumentsBlur: () => void;
   onArgumentsChange: (index: number, argument: string) => void;
   rowRef: RefObject<HTMLDivElement | null>;
 }
@@ -197,6 +222,7 @@ function ArgumentsGridList({
   item: functionItem,
   state: functionListState,
   token: functionToken,
+  onArgumentsBlur,
   onArgumentsChange,
   arguments: functionArguments,
   rowRef,
@@ -258,6 +284,7 @@ function ArgumentsGridList({
               argumentsListState={state}
               argumentRef={ref}
               argumentIndex={index}
+              onArgumentsBlur={onArgumentsBlur}
               onArgumentsChange={onArgumentsChange}
             />
             {index < functionToken.attributes.length - 1 && ','}
@@ -279,6 +306,7 @@ interface InternalInputProps {
   functionItem: Node<Token>;
   functionListState: ListState<Token>;
   functionToken: TokenFunction;
+  onArgumentsBlur: () => void;
   onArgumentsChange: (index: number, argument: string) => void;
   rowRef: RefObject<HTMLDivElement | null>;
 }
@@ -293,6 +321,7 @@ function InternalInput({
   argument,
   argumentRef,
   arguments: functionArguments,
+  onArgumentsBlur,
   onArgumentsChange,
 }: InternalInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -317,7 +346,11 @@ function InternalInput({
   } = useArithmeticBuilder();
 
   const parameterDefinition = useMemo(
-    () => getFieldDefinition(functionToken.function)?.parameters?.[argumentIndex],
+    () =>
+      getFieldDefinition(
+        functionToken.function,
+        functionToken.attributes.map(attr => attr.text)
+      )?.parameters?.[argumentIndex],
     [argumentIndex, getFieldDefinition, functionToken]
   );
 
@@ -333,6 +366,7 @@ function InternalInput({
   const [currentValue, setCurrentValue] = useState(initialLabel);
   const [isCurrentlyEditing, setIsCurrentlyEditing] = useState(false);
   const [selectionIndex, setSelectionIndex] = useState(0);
+  const skipBlurFlushRef = useRef(false);
 
   const isFilterParameter = isSearchFilterParameter(parameterDefinition);
 
@@ -478,10 +512,50 @@ function InternalInput({
     updateSelectionIndex();
   }, [updateSelectionIndex]);
 
-  const onInputBlur = useCallback(() => {
-    resetInputValue();
-    setIsCurrentlyEditing(false);
-  }, [resetInputValue]);
+  const flushArgumentsIfLeavingGrid = useCallback(
+    (evt?: FocusEvent<HTMLInputElement>) => {
+      if (skipBlurFlushRef.current) {
+        skipBlurFlushRef.current = false;
+        return;
+      }
+
+      if (!evt) {
+        window.setTimeout(() => {
+          if (skipBlurFlushRef.current) {
+            skipBlurFlushRef.current = false;
+            return;
+          }
+          const stayingInArgs = Boolean(
+            document.activeElement &&
+            argumentRef.current?.contains(document.activeElement)
+          );
+          if (!stayingInArgs) {
+            onArgumentsBlur();
+          }
+        }, 0);
+        return;
+      }
+
+      const argsGrid = evt.currentTarget.closest('[role="grid"]');
+      const related = evt.relatedTarget;
+      const stayingInArgs = Boolean(
+        argsGrid && related instanceof Node && argsGrid.contains(related)
+      );
+      if (!stayingInArgs) {
+        onArgumentsBlur();
+      }
+    },
+    [argumentRef, onArgumentsBlur]
+  );
+
+  const onInputBlur = useCallback(
+    (evt?: FocusEvent<HTMLInputElement>) => {
+      resetInputValue();
+      setIsCurrentlyEditing(false);
+      flushArgumentsIfLeavingGrid(evt);
+    },
+    [flushArgumentsIfLeavingGrid, resetInputValue]
+  );
 
   const resolveValue = useCallback(
     (raw: string): string => {
@@ -503,6 +577,7 @@ function InternalInput({
 
   // Persist free-text filter edits on blur. Skip REPLACE_TOKEN while focus stays inside
   // the arguments grid — that remounts the function and steals focus from the next arg.
+  // Pending edits are flushed via onArgumentsBlur when focus finally leaves the grid.
   const onFilterInputBlur = useCallback(
     (evt?: FocusEvent<HTMLInputElement>) => {
       const value = inputValue ? ensureSearchFilterArgument(inputValue) : null;
@@ -512,87 +587,33 @@ function InternalInput({
       }
       resetInputValue();
       setIsCurrentlyEditing(false);
-
-      if (!value || value === functionToken.attributes[argumentIndex]?.text) {
-        return;
-      }
-
-      const commitFilter = () => {
-        dispatch({
-          text: `${functionToken.function}(${updateAttrsWith(value)})`,
-          type: 'REPLACE_TOKEN',
-          token: functionToken,
-        });
-      };
-
-      if (evt) {
-        const argsGrid = evt.currentTarget.closest('[role="grid"]');
-        const related = evt.relatedTarget;
-        const stayingInArgs = Boolean(
-          argsGrid && related instanceof Node && argsGrid.contains(related)
-        );
-        if (!stayingInArgs) {
-          commitFilter();
-        }
-        return;
-      }
-
-      // Click-outside closes the menu without a focus event; check after focus settles.
-      window.setTimeout(() => {
-        const stayingInArgs = Boolean(
-          document.activeElement && argumentRef.current?.contains(document.activeElement)
-        );
-        if (!stayingInArgs) {
-          commitFilter();
-        }
-      }, 0);
+      flushArgumentsIfLeavingGrid(evt);
     },
     [
       argumentIndex,
-      argumentRef,
-      dispatch,
-      functionToken,
+      flushArgumentsIfLeavingGrid,
       inputValue,
       onArgumentsChange,
       resetInputValue,
-      updateAttrsWith,
     ]
   );
 
-  // Non-filter free-text values (e.g. apdex threshold) still use InputBox and can use the
-  // relatedTarget check to REPLACE only when leaving the arguments grid.
+  // Non-filter free-text values (e.g. apdex threshold) flush pending edits when leaving.
   const onTextInputBlur = useCallback(
     (evt: FocusEvent<HTMLInputElement>) => {
       if (inputValue) {
         onArgumentsChange(argumentIndex, inputValue);
-
-        const argsGrid = evt.currentTarget.closest('[role="grid"]');
-        const related = evt.relatedTarget;
-        const stayingInArgs = Boolean(
-          related instanceof Node && argsGrid?.contains(related)
-        );
-        if (
-          !stayingInArgs &&
-          inputValue !== functionToken.attributes[argumentIndex]?.text
-        ) {
-          dispatch({
-            text: `${functionToken.function}(${updateAttrsWith(inputValue)})`,
-            type: 'REPLACE_TOKEN',
-            token: functionToken,
-          });
-        }
       }
       resetInputValue();
       setIsCurrentlyEditing(false);
+      flushArgumentsIfLeavingGrid(evt);
     },
     [
       argumentIndex,
-      dispatch,
-      functionToken,
+      flushArgumentsIfLeavingGrid,
       inputValue,
       onArgumentsChange,
       resetInputValue,
-      updateAttrsWith,
     ]
   );
 
@@ -616,6 +637,7 @@ function InternalInput({
 
     setCurrentValue(resolveDisplayLabel(value));
     onArgumentsChange(argumentIndex, value);
+    skipBlurFlushRef.current = true;
 
     dispatch({
       text: `${functionToken.function}(${updateAttrsWith(value)})`,
@@ -794,13 +816,14 @@ function InternalInput({
       }
 
       setCurrentValue(resolveDisplayLabel(prettifyTagKey(option.value)));
+      onArgumentsChange(argumentIndex, option.value);
       if (hasNextArgument) {
         focusTarget(
           argumentsListState,
           argumentsListState.collection.getKeyAfter(argumentItem.key)
         );
-        onArgumentsChange(argumentIndex, option.value);
       } else {
+        skipBlurFlushRef.current = true;
         dispatch({
           text: `${functionToken.function}(${updateAttrsWith(option.value)})`,
           type: 'REPLACE_TOKEN',
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 7c0a86da6852..af5db41ba9e3 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -31,12 +31,12 @@ const functionArguments = [
   {name: 'span.description', kind: FieldKind.TAG},
 ];
 
-const getSpanFieldDefinition = (key: string) => {
+const getSpanFieldDefinition = (key: string, attributeTexts?: readonly string[]) => {
   const argument = functionArguments.find(
     functionArgument => functionArgument.name === key
   );
 
-  return getExploreEquationFieldDefinition(key, argument?.kind, true);
+  return getExploreEquationFieldDefinition(key, argument?.kind, true, attributeTexts);
 };
 
 const getSuggestedKey = (key: string) => {
@@ -1230,6 +1230,56 @@ describe('token', () => {
       );
     });
 
+    it('flushes pending filter edits when leaving the arguments grid', async () => {
+      const dispatch = jest.fn();
+      render(<Tokens expression="avg_if(``,span.duration)" dispatch={dispatch} />);
+
+      const argsGrid = await screen.findByRole('grid', {name: 'Enter arguments'});
+      const filterArg = within(argsGrid).getByRole('combobox', {name: 'Add a filter'});
+      const columnArg = within(argsGrid).getByRole('combobox', {
+        name: 'Select an attribute',
+      });
+
+      await userEvent.click(filterArg);
+      await userEvent.type(filterArg, 'span.op:db');
+      await userEvent.click(columnArg);
+      await waitFor(() => {
+        expect(columnArg).toHaveFocus();
+      });
+      await userEvent.click(getLastInput());
+
+      await waitFor(() => {
+        expect(dispatch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: 'REPLACE_TOKEN',
+            text: 'avg_if(`span.op:db`,span.duration)',
+          })
+        );
+      });
+    });
+
+    it('keeps Discover-style avg_if arguments editable when the feature is on', async () => {
+      render(<Tokens expression="avg_if(span.duration,span.op,equals,queue.process)" />);
+
+      const argumentsGrid = await screen.findByRole('grid', {name: 'Enter arguments'});
+
+      expect(
+        within(argumentsGrid).queryByRole('combobox', {name: 'Add a filter'})
+      ).not.toBeInTheDocument();
+
+      const [numberArg, stringArg] = within(argumentsGrid).getAllByRole('combobox', {
+        name: 'Select an attribute',
+      });
+      expect(numberArg).toHaveValue('span.duration');
+      expect(stringArg).toHaveValue('span.op');
+      expect(
+        within(argumentsGrid).getByRole('combobox', {name: 'Select an option'})
+      ).toBeInTheDocument();
+      expect(
+        within(argumentsGrid).getByRole('textbox', {name: 'Add a value'})
+      ).toHaveValue('queue.process');
+    });
+
     it('suggests attributes for each argument of avg_if', async () => {
       render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
diff --git a/static/app/utils/fields/exploreEquationAggregates.spec.tsx b/static/app/utils/fields/exploreEquationAggregates.spec.tsx
index 6ab01162eec7..70fc72666d40 100644
--- a/static/app/utils/fields/exploreEquationAggregates.spec.tsx
+++ b/static/app/utils/fields/exploreEquationAggregates.spec.tsx
@@ -56,6 +56,21 @@ describe('Explore equation conditional aggregates', () => {
     });
   });
 
+  it('keeps Discover avg_if when existing args are not backtick filters', () => {
+    const definition = getExploreEquationFieldDefinition('avg_if', undefined, true, [
+      'span.duration',
+      'span.op',
+      'equals',
+      'db',
+    ]);
+    expect(definition?.parameters?.map(parameter => parameter.name)).toEqual([
+      'column',
+      'condition_column',
+      'condition',
+      'value',
+    ]);
+  });
+
   it('keeps Discover count_if unless the feature is on', () => {
     const ungated = getFieldDefinition('count_if', 'span');
     expect(ungated?.parameters?.map(parameter => parameter.name)).toEqual([
diff --git a/static/app/utils/fields/index.ts b/static/app/utils/fields/index.ts
index 1be40972a3a6..ad926b0d76e3 100644
--- a/static/app/utils/fields/index.ts
+++ b/static/app/utils/fields/index.ts
@@ -3933,21 +3933,42 @@ export const getFieldDefinition = (
  * Span field definitions for the Explore equation builder. When
  * `explore-conditional-aggregates` is on, `_if` combinators use the EAP filter-first
  * signature (`avg_if(\`span.op:db\`,span.duration)`), including `count_if`.
+ *
+ * Existing Discover-style calls (`avg_if(span.duration,span.op,equals,db)`) keep the
+ * Discover definition so editing them does not reinterpret the first column as a filter.
  */
 export function getExploreEquationFieldDefinition(
   key: string,
   kind?: FieldKind,
-  hasConditionalAggregates = false
+  hasConditionalAggregates = false,
+  attributeTexts?: readonly string[]
 ): FieldDefinition | null {
   if (hasConditionalAggregates) {
     const conditionalDefinition = SPAN_CONDITIONAL_AGGREGATION_FIELDS[key];
     if (conditionalDefinition) {
+      if (usesDiscoverStyleConditionalAggregateArgs(attributeTexts)) {
+        return getFieldDefinition(key, 'span', kind);
+      }
       return conditionalDefinition;
     }
   }
   return getFieldDefinition(key, 'span', kind);
 }
 
+/**
+ * Discover `_if` aggregates put a column first. EAP filter-first forms wrap the first
+ * argument in backticks (`\`span.op:db\`` or empty `` ` ` ``).
+ */
+export function usesDiscoverStyleConditionalAggregateArgs(
+  attributeTexts: readonly string[] | undefined
+): boolean {
+  if (!attributeTexts?.length) {
+    return false;
+  }
+  const first = attributeTexts[0]!.trim();
+  return !(first.startsWith('`') && first.endsWith('`'));
+}
+
 export function isDeviceClass(key: any): boolean {
   return key === FieldKey.DEVICE_CLASS;
 }
diff --git a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
index a98a62e70356..da5586465439 100644
--- a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
+++ b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
@@ -69,9 +69,14 @@ export function useExploreEquationBuilderConfig({
   );
 
   const getFieldDefinition = useCallback(
-    (key: string) => {
+    (key: string, attributeTexts?: readonly string[]) => {
       const tag = numberTags[key] ?? stringTags[key];
-      return getExploreEquationFieldDefinition(key, tag?.kind, hasConditionalAggregates);
+      return getExploreEquationFieldDefinition(
+        key,
+        tag?.kind,
+        hasConditionalAggregates,
+        attributeTexts
+      );
     },
     [hasConditionalAggregates, numberTags, stringTags]
   );

From 82426cb3b930a88e9cf26fe02671ade4e17fde0d Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Fri, 28 Aug 2026 12:37:34 -0400
Subject: [PATCH 03/14] fix(explore): Use Pacer useDebouncedValue for equation
 filter autocomplete

Master removed sentry/utils/useDebouncedValue; switch the new autocomplete hook to @tanstack/react-pacer.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../arithmeticBuilder/conditionalFilterAutocomplete.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
index c0d552d021d5..200222eb04d2 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
@@ -1,4 +1,5 @@
 import {useMemo} from 'react';
+import {useDebouncedValue} from '@tanstack/react-pacer';
 import {keepPreviousData, useQuery} from '@tanstack/react-query';
 
 import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
@@ -9,8 +10,8 @@ import {
 } from 'sentry/components/arithmeticBuilder/conditionalFilter';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
+import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import {FieldKind} from 'sentry/utils/fields';
-import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 
 function useFilterKeyItems(
   attributes: FunctionArgument[]
@@ -56,7 +57,9 @@ function useFilterValueItems({
     () => ['arithmetic-filter-tag-values', tag, valueQuery] as const,
     [tag, valueQuery]
   );
-  const debouncedQueryKey = useDebouncedValue(queryKey);
+  const [debouncedQueryKey] = useDebouncedValue(queryKey, {
+    wait: DEFAULT_DEBOUNCE_DURATION,
+  });
   const debouncedFilterKey = debouncedQueryKey[1].key;
 
   const {data} = useQuery({

From 2af44cf19b3f9117740cc0e46c660b513bc03c3d Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Fri, 28 Aug 2026 13:38:39 -0400
Subject: [PATCH 04/14] fix(explore): Fix equation _if filter clear, EAP defs,
 and caret

Clear emptied filters on blur, keep EAP-only _if definitions when args lack backticks, and place the caret after key select once React commits the value.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../arithmeticBuilder/token/function.tsx      | 51 +++++++++++--------
 .../arithmeticBuilder/token/index.spec.tsx    | 34 +++++++++++++
 .../fields/exploreEquationAggregates.spec.tsx | 12 +++++
 static/app/utils/fields/index.ts              |  6 ++-
 4 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index ace7467b3218..c24c684c8e3a 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -1,5 +1,5 @@
 import type {ChangeEvent, FocusEvent, MouseEvent, RefObject} from 'react';
-import {useCallback, useMemo, useRef, useState} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {type AriaGridListOptions} from '@react-aria/gridlist';
@@ -367,11 +367,31 @@ function InternalInput({
   const [isCurrentlyEditing, setIsCurrentlyEditing] = useState(false);
   const [selectionIndex, setSelectionIndex] = useState(0);
   const skipBlurFlushRef = useRef(false);
+  // Apply after React commits the controlled value. A lone rAF + focus() races in
+  // Chrome and resets the caret before (or when) focus returns from the listbox.
+  const pendingCaretRef = useRef<{pos: number; value: string} | null>(null);
 
   const isFilterParameter = isSearchFilterParameter(parameterDefinition);
 
   const displayValue = isCurrentlyEditing ? inputValue : currentValue;
 
+  useLayoutEffect(() => {
+    const pendingCaret = pendingCaretRef.current;
+    if (pendingCaret === null) {
+      return;
+    }
+    const input = inputRef.current;
+    if (input?.value !== pendingCaret.value) {
+      return;
+    }
+    pendingCaretRef.current = null;
+    if (document.activeElement !== input) {
+      input.focus();
+    }
+    input.setSelectionRange(pendingCaret.pos, pendingCaret.pos);
+    setSelectionIndex(pendingCaret.pos);
+  }, [inputValue]);
+
   const {
     comboBoxFilterValue,
     editPhase,
@@ -575,16 +595,15 @@ function InternalInput({
     [parameterDefinition]
   );
 
-  // Persist free-text filter edits on blur. Skip REPLACE_TOKEN while focus stays inside
-  // the arguments grid — that remounts the function and steals focus from the next arg.
-  // Pending edits are flushed via onArgumentsBlur when focus finally leaves the grid.
+  // Persist free-text filter edits on blur. Empty input becomes `` so clearing the filter
+  // updates argsRef (otherwise the prior value is kept and commitArgumentsIfChanged no-ops).
+  // Skip REPLACE_TOKEN while focus stays inside the arguments grid — that remounts the
+  // function and steals focus from the next arg. Pending edits flush via onArgumentsBlur.
   const onFilterInputBlur = useCallback(
     (evt?: FocusEvent<HTMLInputElement>) => {
-      const value = inputValue ? ensureSearchFilterArgument(inputValue) : null;
-      if (value) {
-        setCurrentValue(unwrapSearchFilterArgument(value));
-        onArgumentsChange(argumentIndex, value);
-      }
+      const value = ensureSearchFilterArgument(inputValue);
+      setCurrentValue(unwrapSearchFilterArgument(value));
+      onArgumentsChange(argumentIndex, value);
       resetInputValue();
       setIsCurrentlyEditing(false);
       flushArgumentsIfLeavingGrid(evt);
@@ -797,21 +816,13 @@ function InternalInput({
           selectionIndex,
           option.value
         );
+        if (isFilterKeySuggestion(option.value)) {
+          pendingCaretRef.current = {pos: newCursorIndex, value: newValue};
+        }
         setCurrentValue(newValue);
         setInputValue(newValue);
         setIsCurrentlyEditing(true);
         setSelectionIndex(newCursorIndex);
-
-        if (isFilterKeySuggestion(option.value)) {
-          requestAnimationFrame(() => {
-            const input = inputRef.current;
-            if (!input) {
-              return;
-            }
-            input.setSelectionRange(newCursorIndex, newCursorIndex);
-            input.focus();
-          });
-        }
         return;
       }
 
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index af5db41ba9e3..c6960f765fa0 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -853,6 +853,10 @@ describe('token', () => {
 
       expect(filterArg).toHaveValue('span.op:');
       expect(filterArg).toHaveFocus();
+      // Caret must sit after the colon so value suggestions kick in (Chrome used to
+      // reset this when focus returned from the listbox).
+      expect(filterArg).toHaveProperty('selectionStart', 'span.op:'.length);
+      expect(filterArg).toHaveProperty('selectionEnd', 'span.op:'.length);
     });
 
     it('switches to value suggestions after selecting a filter key', async () => {
@@ -1208,6 +1212,36 @@ describe('token', () => {
       });
     });
 
+    it('clears _if filter on blur when the filter input is emptied', async () => {
+      const dispatch = jest.fn();
+      render(
+        <Tokens expression="avg_if(`span.op:db`,span.duration)" dispatch={dispatch} />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(`span.op:db`,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.clear(filterArg);
+      await userEvent.click(getLastInput());
+
+      await waitFor(() => {
+        expect(dispatch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: 'REPLACE_TOKEN',
+            text: 'avg_if(``,span.duration)',
+          })
+        );
+      });
+    });
+
     it('does not rewrite the function when moving from filter to another argument', async () => {
       const dispatch = jest.fn();
       render(<Tokens expression="avg_if(``,span.duration)" dispatch={dispatch} />);
diff --git a/static/app/utils/fields/exploreEquationAggregates.spec.tsx b/static/app/utils/fields/exploreEquationAggregates.spec.tsx
index 70fc72666d40..b68f18281273 100644
--- a/static/app/utils/fields/exploreEquationAggregates.spec.tsx
+++ b/static/app/utils/fields/exploreEquationAggregates.spec.tsx
@@ -71,6 +71,18 @@ describe('Explore equation conditional aggregates', () => {
     ]);
   });
 
+  it('keeps EAP filter-first params for EAP-only _if without backticks', () => {
+    expect(getFieldDefinition('sum_if', 'span')).toBeNull();
+
+    const definition = getExploreEquationFieldDefinition('sum_if', undefined, true, [
+      'span.duration',
+    ]);
+    expect(definition?.parameters?.map(parameter => parameter.name)).toEqual([
+      'filter',
+      'column',
+    ]);
+  });
+
   it('keeps Discover count_if unless the feature is on', () => {
     const ungated = getFieldDefinition('count_if', 'span');
     expect(ungated?.parameters?.map(parameter => parameter.name)).toEqual([
diff --git a/static/app/utils/fields/index.ts b/static/app/utils/fields/index.ts
index ad926b0d76e3..79c00f2f821c 100644
--- a/static/app/utils/fields/index.ts
+++ b/static/app/utils/fields/index.ts
@@ -3936,6 +3936,7 @@ export const getFieldDefinition = (
  *
  * Existing Discover-style calls (`avg_if(span.duration,span.op,equals,db)`) keep the
  * Discover definition so editing them does not reinterpret the first column as a filter.
+ * EAP-only `_if`s without a Discover definition keep the filter-first signature.
  */
 export function getExploreEquationFieldDefinition(
   key: string,
@@ -3947,7 +3948,10 @@ export function getExploreEquationFieldDefinition(
     const conditionalDefinition = SPAN_CONDITIONAL_AGGREGATION_FIELDS[key];
     if (conditionalDefinition) {
       if (usesDiscoverStyleConditionalAggregateArgs(attributeTexts)) {
-        return getFieldDefinition(key, 'span', kind);
+        // Only Discover-defined `_if`s (`avg_if`/`count_if`) should stay on the Discover
+        // arity. EAP-only combinators (`sum_if`, …) have no Discover definition — keep
+        // the filter-first signature even when the first arg is not backtick-wrapped yet.
+        return getFieldDefinition(key, 'span', kind) ?? conditionalDefinition;
       }
       return conditionalDefinition;
     }

From e4d20ed2c6ab2cac3bdd4b396b403850976a7a79 Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Fri, 28 Aug 2026 15:49:22 -0400
Subject: [PATCH 05/14] fix(explore): Fix knip, typecheck, and equation filter
 bugs

Drop unused exports, cast combobox selection in tests, avoid stale value suggestions across keys, include boolean filter keys, and allow Enter to clear an _if filter.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilterAutocomplete.spec.tsx    | 53 ++++++++++++++++++-
 .../conditionalFilterAutocomplete.tsx         | 11 ++--
 .../arithmeticBuilder/token/function.tsx      |  6 ++-
 .../arithmeticBuilder/token/index.spec.tsx    | 34 +++++++++++-
 static/app/utils/fields/index.ts              |  2 +-
 .../hooks/useExploreEquationBuilderConfig.ts  | 18 ++++---
 .../explore/utils/conditionalAggregate.tsx    |  1 -
 7 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
index e7af0ae1d990..176c71be8cb6 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
@@ -1,6 +1,7 @@
-import {renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
+import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
+import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import {FieldKind} from 'sentry/utils/fields';
 
 const functionArguments = [{name: 'span.op', kind: FieldKind.TAG, label: 'span.op'}];
@@ -79,4 +80,54 @@ describe('useConditionalFilterAutocomplete', () => {
       expect(result.current.items.map(item => item.label)).toEqual(['db']);
     });
   });
+
+  it('does not show previous key values while debounce catches up to a new key', async () => {
+    jest.useFakeTimers();
+    const getFilterTagValues = jest.fn(async ({tag}) => {
+      if (tag.key === 'span.op') {
+        return [{value: 'db'}];
+      }
+      if (tag.key === 'span.description') {
+        return [{value: 'SELECT 1'}];
+      }
+      return [];
+    });
+
+    try {
+      const {result, rerender} = renderHookWithProviders(
+        ({filterValue, selectionIndex}: {filterValue: string; selectionIndex: number}) =>
+          useConditionalFilterAutocomplete({
+            enabled: true,
+            filterValue,
+            functionArguments: [
+              {name: 'span.op', kind: FieldKind.TAG, label: 'span.op'},
+              {
+                name: 'span.description',
+                kind: FieldKind.TAG,
+                label: 'span.description',
+              },
+            ],
+            getFilterTagValues,
+            selectionIndex,
+          }),
+        {initialProps: {filterValue: 'span.op:', selectionIndex: 8}}
+      );
+
+      await act(() => jest.advanceTimersByTimeAsync(DEFAULT_DEBOUNCE_DURATION));
+      await waitFor(() => {
+        expect(result.current.items.map(item => item.label)).toEqual(['db']);
+      });
+
+      rerender({filterValue: 'span.description:', selectionIndex: 17});
+      // Immediate render still has prior query data + new filterKey — must not relabel.
+      expect(result.current.items.map(item => item.label)).toEqual([]);
+
+      await act(() => jest.advanceTimersByTimeAsync(DEFAULT_DEBOUNCE_DURATION));
+      await waitFor(() => {
+        expect(result.current.items.map(item => item.label)).toEqual(['SELECT 1']);
+      });
+    } finally {
+      jest.useRealTimers();
+    }
+  });
 });
diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
index 200222eb04d2..138f54b2618e 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
@@ -1,6 +1,6 @@
 import {useMemo} from 'react';
 import {useDebouncedValue} from '@tanstack/react-pacer';
-import {keepPreviousData, useQuery} from '@tanstack/react-query';
+import {useQuery} from '@tanstack/react-query';
 
 import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
 
@@ -72,14 +72,17 @@ function useFilterValueItems({
     // Gate on the *debounced* key. `enabled` flips true as soon as the user types `:`,
     // but the query key still holds the previous empty key for one debounce window —
     // fetching then hits `/attributes//values/` and 404-retries.
+    //
+    // Do not use keepPreviousData: after switching keys in a compound filter, placeholder
+    // results from the prior key would be rewritten with the new key's clause.
     enabled: enabled && Boolean(getFilterTagValues && debouncedFilterKey),
-    placeholderData: keepPreviousData,
     staleTime: 30_000,
     retry: false,
   });
 
   return useMemo(() => {
-    if (!data?.length) {
+    // Hide results until debounce catches up to the key the cursor is editing.
+    if (!data?.length || debouncedFilterKey !== filterKey) {
       return [];
     }
 
@@ -93,7 +96,7 @@ function useFilterValueItems({
         hideCheck: true,
       };
     });
-  }, [data, filterKey]);
+  }, [data, debouncedFilterKey, filterKey]);
 }
 
 export function useConditionalFilterAutocomplete({
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index c24c684c8e3a..e9b829570b8b 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -646,7 +646,10 @@ function InternalInput({
   );
 
   const onInputCommit = useCallback(() => {
-    let value = inputValue.trim() || argument.label;
+    // Filter args may intentionally be cleared; don't fall back to the prior label.
+    let value = isFilterParameter
+      ? inputValue.trim()
+      : inputValue.trim() || argument.label;
 
     if (defined(getSuggestedKey) && parameterDefinition?.kind === 'column') {
       value = getSuggestedKey(value) ?? value;
@@ -672,6 +675,7 @@ function InternalInput({
     });
     resetInputValue();
   }, [
+    isFilterParameter,
     inputValue,
     argument.label,
     getSuggestedKey,
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index c6960f765fa0..9e7df7c77a87 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -1084,7 +1084,7 @@ describe('token', () => {
       ).getByRole('combobox', {name: 'Add a filter'});
 
       await userEvent.click(filterArg);
-      filterArg.setSelectionRange(0, 0);
+      (filterArg as HTMLInputElement).setSelectionRange(0, 0);
       fireEvent.keyUp(filterArg, {key: 'ArrowLeft', code: 'ArrowLeft'});
       await waitFor(() => {
         expect(screen.getByRole('option', {name: 'span.op:'})).toBeInTheDocument();
@@ -1113,7 +1113,7 @@ describe('token', () => {
       ).getByRole('combobox', {name: 'Add a filter'});
 
       await userEvent.click(filterArg);
-      filterArg.setSelectionRange(9, 9);
+      (filterArg as HTMLInputElement).setSelectionRange(9, 9);
       fireEvent.keyUp(filterArg, {key: 'ArrowLeft', code: 'ArrowLeft'});
 
       await waitFor(() => {
@@ -1242,6 +1242,36 @@ describe('token', () => {
       });
     });
 
+    it('clears _if filter on Enter when the filter input is emptied', async () => {
+      const dispatch = jest.fn();
+      render(
+        <Tokens expression="avg_if(`span.op:db`,span.duration)" dispatch={dispatch} />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(`span.op:db`,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      const filterArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await userEvent.clear(filterArg);
+      await userEvent.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(dispatch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: 'REPLACE_TOKEN',
+            text: 'avg_if(``,span.duration)',
+          })
+        );
+      });
+    });
+
     it('does not rewrite the function when moving from filter to another argument', async () => {
       const dispatch = jest.fn();
       render(<Tokens expression="avg_if(``,span.duration)" dispatch={dispatch} />);
diff --git a/static/app/utils/fields/index.ts b/static/app/utils/fields/index.ts
index 79c00f2f821c..22c37328baec 100644
--- a/static/app/utils/fields/index.ts
+++ b/static/app/utils/fields/index.ts
@@ -3963,7 +3963,7 @@ export function getExploreEquationFieldDefinition(
  * Discover `_if` aggregates put a column first. EAP filter-first forms wrap the first
  * argument in backticks (`\`span.op:db\`` or empty `` ` ` ``).
  */
-export function usesDiscoverStyleConditionalAggregateArgs(
+function usesDiscoverStyleConditionalAggregateArgs(
   attributeTexts: readonly string[] | undefined
 ): boolean {
   if (!attributeTexts?.length) {
diff --git a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
index da5586465439..9802cc27d1ec 100644
--- a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
+++ b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
@@ -14,9 +14,10 @@ import {useExploreSuggestedAttribute} from 'sentry/views/explore/hooks/useExplor
 import {useGetTraceItemAttributeValues} from 'sentry/views/explore/hooks/useGetTraceItemAttributeValues';
 import type {TraceItemDataset} from 'sentry/views/explore/types';
 
-export function traceItemTagsToFunctionArguments(
+function traceItemTagsToFunctionArguments(
   numberTags: TagCollection,
-  stringTags: TagCollection
+  stringTags: TagCollection,
+  booleanTags: TagCollection
 ): FunctionArgument[] {
   return [
     ...Object.entries(numberTags).map(([key, tag]) => ({
@@ -29,6 +30,11 @@ export function traceItemTagsToFunctionArguments(
       name: key,
       label: tag.name,
     })),
+    ...Object.entries(booleanTags).map(([key, tag]) => ({
+      kind: FieldKind.BOOLEAN,
+      name: key,
+      label: tag.name,
+    })),
   ];
 }
 
@@ -64,13 +70,13 @@ export function useExploreEquationBuilderConfig({
   );
 
   const functionArguments = useMemo(
-    () => traceItemTagsToFunctionArguments(numberTags, stringTags),
-    [numberTags, stringTags]
+    () => traceItemTagsToFunctionArguments(numberTags, stringTags, booleanTags),
+    [booleanTags, numberTags, stringTags]
   );
 
   const getFieldDefinition = useCallback(
     (key: string, attributeTexts?: readonly string[]) => {
-      const tag = numberTags[key] ?? stringTags[key];
+      const tag = numberTags[key] ?? stringTags[key] ?? booleanTags[key];
       return getExploreEquationFieldDefinition(
         key,
         tag?.kind,
@@ -78,7 +84,7 @@ export function useExploreEquationBuilderConfig({
         attributeTexts
       );
     },
-    [hasConditionalAggregates, numberTags, stringTags]
+    [booleanTags, hasConditionalAggregates, numberTags, stringTags]
   );
 
   const getSuggestedKey = useExploreSuggestedAttribute({
diff --git a/static/app/views/explore/utils/conditionalAggregate.tsx b/static/app/views/explore/utils/conditionalAggregate.tsx
index 2761995a1139..fb4004c9d4d4 100644
--- a/static/app/views/explore/utils/conditionalAggregate.tsx
+++ b/static/app/views/explore/utils/conditionalAggregate.tsx
@@ -86,7 +86,6 @@ export type ConditionalAggregate = ParsedFunction;
 export {
   ensureSearchFilterArgument,
   escapeConditionalFilter,
-  unwrapSearchFilterArgument,
 } from 'sentry/components/arithmeticBuilder/conditionalFilter';
 
 /**

From de16f6d82dc9edf6cb33049d78fd290d1d9c2a0a Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Mon, 31 Aug 2026 17:29:11 -0400
Subject: [PATCH 06/14] ref(explore): Split equation filter inputs and remount
 function args

Function tokens are keyed by position, so deleting one reused the next function's draft arguments. Remount the arguments grid on token identity and extract filter/argument input into dedicated modules. Expand the equation builder while focused like the series filter bar.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilter.spec.ts                 | 158 +++---
 .../arithmeticBuilder/conditionalFilter.ts    |  38 +-
 .../arithmeticBuilder/index.spec.tsx          |  67 ++-
 .../token/conditionalFilterInput.tsx          | 231 ++++++++
 .../arithmeticBuilder/token/function.tsx      | 519 ++++--------------
 .../arithmeticBuilder/token/index.spec.tsx    | 191 ++++++-
 .../token/useFunctionArgumentInput.tsx        | 280 ++++++++++
 .../expandableFilterSearchBar.spec.tsx        |  32 ++
 .../expandableFilterSearchBar.tsx             |  18 +-
 .../toolbarVisualize/visualizeEquation.tsx    |  37 +-
 .../app/views/explore/toolbar/index.spec.tsx  |  28 +
 11 files changed, 1021 insertions(+), 578 deletions(-)
 create mode 100644 static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
 create mode 100644 static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts b/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
index 6ebcd9290a67..37b4d1582666 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
@@ -1,149 +1,150 @@
 import {
   formatConditionalFilterClause,
   formatConditionalFilterTagValue,
-  getConditionalFilterClauseAtCursor,
-  getConditionalFilterEditPhase,
-  getConditionalFilterKeyQuery,
-  parseConditionalFilterInput,
+  getConditionalFilterEditContext,
   replaceConditionalFilterClause,
 } from 'sentry/components/arithmeticBuilder/conditionalFilter';
 
-describe('getConditionalFilterClauseAtCursor', () => {
-  it('returns the full string as one clause when there are no boolean operators', () => {
-    expect(getConditionalFilterClauseAtCursor('organization.slug:sentry', 10)).toEqual({
-      clause: 'organization.slug:sentry',
-      clauseCursorIndex: 10,
-      clauseEnd: 24,
-      clauseStart: 0,
-    });
+describe('getConditionalFilterEditContext', () => {
+  it('treats the full string as one clause when there are no boolean operators', () => {
+    expect(getConditionalFilterEditContext('organization.slug:sentry', 10)).toMatchObject(
+      {
+        phase: 'key',
+        editText: 'organizati',
+        replaceStart: 0,
+        replaceEnd: 24,
+      }
+    );
   });
 
-  it('returns the clause after a boolean operator', () => {
+  it('starts a new key clause after a boolean operator', () => {
     const value = 'organization.slug:sentry and ';
-    expect(getConditionalFilterClauseAtCursor(value, value.length)).toEqual({
-      clause: '',
-      clauseCursorIndex: 0,
-      clauseEnd: 29,
-      clauseStart: 29,
+    expect(getConditionalFilterEditContext(value, value.length)).toEqual({
+      phase: 'key',
+      editText: '',
+      replaceStart: 29,
+      replaceEnd: 29,
     });
   });
 
-  it('returns the active clause when typing a second filter key', () => {
+  it('uses key mode for the active clause when typing a second filter key', () => {
     const value = 'organization.slug:sentry and span.op';
-    expect(getConditionalFilterClauseAtCursor(value, value.length)).toEqual({
-      clause: 'span.op',
-      clauseCursorIndex: 7,
-      clauseEnd: 36,
-      clauseStart: 29,
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'key',
+      editText: 'span.op',
+      replaceStart: 29,
+      replaceEnd: 36,
     });
   });
 
   it('does not split on boolean operators inside quoted values', () => {
     const value = 'span.description:"foo and bar" and span.op:';
-    expect(getConditionalFilterClauseAtCursor(value, value.length)).toEqual({
-      clause: 'span.op:',
-      clauseCursorIndex: 8,
-      clauseEnd: 43,
-      clauseStart: 35,
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'value',
+      filterKey: 'span.op',
+      valueQuery: '',
+      replaceStart: 35,
+      replaceEnd: 43,
     });
   });
 
   it('limits the clause to the next operator when the cursor is on a boolean operator', () => {
     const value = 'span.op:db and span.description:foo and span.status:ok';
     const andIndex = value.indexOf(' and ');
-    expect(getConditionalFilterClauseAtCursor(value, andIndex + 1)).toEqual({
-      clause: 'span.description:foo',
-      clauseCursorIndex: 0,
-      clauseEnd: 35,
-      clauseStart: 15,
+    // Cursor on `and` is treated as the start of the following clause (key mode).
+    expect(getConditionalFilterEditContext(value, andIndex + 1)).toMatchObject({
+      phase: 'key',
+      editText: '',
+      replaceStart: 15,
+      replaceEnd: 35,
     });
   });
 
-  it('limits the clause to the next operator when the cursor is at the end of a boolean operator', () => {
+  it('limits the clause to the next operator when the cursor is at the start of the next clause', () => {
     const value = 'span.op:db and span.description:foo and span.status:ok';
     const secondClauseStart = value.indexOf('span.description');
-    expect(getConditionalFilterClauseAtCursor(value, secondClauseStart)).toEqual({
-      clause: 'span.description:foo',
-      clauseCursorIndex: 0,
-      clauseEnd: 35,
-      clauseStart: 15,
+    expect(getConditionalFilterEditContext(value, secondClauseStart)).toMatchObject({
+      phase: 'key',
+      editText: '',
+      replaceStart: 15,
+      replaceEnd: 35,
     });
   });
-});
 
-describe('getConditionalFilterEditPhase', () => {
   it('uses key mode before the first colon in a clause', () => {
     expect(
-      getConditionalFilterEditPhase('organization.slug:sentry and span.op', 36)
+      getConditionalFilterEditContext('organization.slug:sentry and span.op', 36).phase
     ).toBe('key');
   });
 
   it('uses value mode after the colon while typing an unquoted value', () => {
     expect(
-      getConditionalFilterEditPhase('organization.slug:sentry and span.op:db', 39)
-    ).toBe('value');
+      getConditionalFilterEditContext('organization.slug:sentry and span.op:db', 39)
+    ).toMatchObject({
+      phase: 'value',
+      filterKey: 'span.op',
+      valueQuery: 'db',
+    });
   });
 
   it('uses key mode after a boolean operator', () => {
     const value = 'organization.slug:sentry and ';
-    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+    expect(getConditionalFilterEditContext(value, value.length).phase).toBe('key');
   });
 
   it('uses key mode after a completed unquoted value and trailing space', () => {
     const value = 'organization.slug:sentry ';
-    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'key',
+      editText: '',
+    });
   });
 
   it('stays in value mode for an unclosed quoted value', () => {
     const value = 'organization.slug:"hello there';
-    expect(getConditionalFilterEditPhase(value, value.length)).toBe('value');
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'value',
+      filterKey: 'organization.slug',
+      valueQuery: 'hello there',
+    });
   });
 
   it('uses key mode after a closed quoted value', () => {
     const value = 'organization.slug:"hello there"';
-    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
+    expect(getConditionalFilterEditContext(value, value.length).phase).toBe('key');
   });
 
   it('uses key mode when typing a key after a completed value', () => {
     const value = 'organization.slug:sentry span';
-    expect(getConditionalFilterEditPhase(value, value.length)).toBe('key');
-  });
-});
-
-describe('parseConditionalFilterInput', () => {
-  it('parses the active clause at the cursor', () => {
-    expect(
-      parseConditionalFilterInput('organization.slug:sentry and span.op:db', 39)
-    ).toEqual({
-      filterKey: 'span.op',
-      valueQuery: 'db',
-    });
-  });
-
-  it('strips an opening quote from the value query', () => {
-    const value = 'organization.slug:"hello there';
-    expect(parseConditionalFilterInput(value, value.length)).toEqual({
-      filterKey: 'organization.slug',
-      valueQuery: 'hello there',
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'key',
+      editText: 'span',
     });
   });
-});
 
-describe('getConditionalFilterKeyQuery', () => {
   it('reads the key query from the active clause', () => {
-    expect(getConditionalFilterKeyQuery('organization.slug:sentry and span', 34)).toBe(
-      'span'
-    );
+    expect(
+      getConditionalFilterEditContext('organization.slug:sentry and span', 34)
+    ).toMatchObject({
+      phase: 'key',
+      editText: 'span',
+    });
   });
 
   it('reads the key query after a completed value', () => {
     const value = 'organization.slug:sentry spa';
-    expect(getConditionalFilterKeyQuery(value, value.length)).toBe('spa');
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'key',
+      editText: 'spa',
+    });
   });
 
   it('returns an empty key query after a completed value and space', () => {
     const value = 'organization.slug:sentry ';
-    expect(getConditionalFilterKeyQuery(value, value.length)).toBe('');
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'key',
+      editText: '',
+    });
   });
 });
 
@@ -176,4 +177,11 @@ describe('formatConditionalFilterTagValue', () => {
   it('leaves simple values unquoted', () => {
     expect(formatConditionalFilterTagValue('sentry')).toBe('sentry');
   });
+
+  it('preserves bracketed list syntax', () => {
+    expect(formatConditionalFilterTagValue('[value1, value2]')).toBe('[value1, value2]');
+    expect(formatConditionalFilterClause('span.op', '[db, http]')).toBe(
+      'span.op:[db, http]'
+    );
+  });
 });
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.ts b/static/app/components/arithmeticBuilder/conditionalFilter.ts
index b71093fc3068..7c54691a19f8 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter.ts
@@ -38,6 +38,8 @@ export function unwrapSearchFilterArgument(value: string): string {
 }
 
 const NEEDS_QUOTING_RE = /[\s(),\\"]/;
+/** Search syntax for multi-value filters, e.g. `key:[value1, value2]`. */
+const BRACKETED_LIST_VALUE_RE = /^\[[^\]]*\]$/;
 
 /**
  * Quote a tag value when it contains spaces or other special search characters.
@@ -48,7 +50,7 @@ export function formatConditionalFilterTagValue(value: string): string {
   }
   if (
     (value.startsWith('"') && value.endsWith('"') && value.length >= 2) ||
-    /^\[[^\]]*\]$/.test(value)
+    BRACKETED_LIST_VALUE_RE.test(value)
   ) {
     return value;
   }
@@ -174,7 +176,7 @@ function getConditionalFilterClauseBounds(
   return {clauseStart, clauseEnd};
 }
 
-export function getConditionalFilterClauseAtCursor(
+function getConditionalFilterClauseAtCursor(
   value: string,
   cursorIndex: number
 ): {
@@ -293,38 +295,6 @@ export function getConditionalFilterEditContext(
   };
 }
 
-export function getConditionalFilterEditPhase(
-  value: string,
-  cursorIndex: number
-): 'key' | 'value' {
-  return getConditionalFilterEditContext(value, cursorIndex).phase;
-}
-
-export function parseConditionalFilterInput(
-  value: string,
-  cursorIndex: number
-): {
-  filterKey: string;
-  valueQuery: string;
-} | null {
-  const context = getConditionalFilterEditContext(value, cursorIndex);
-  if (context.phase !== 'value' || !context.filterKey) {
-    return null;
-  }
-  return {
-    filterKey: context.filterKey,
-    valueQuery: context.valueQuery ?? '',
-  };
-}
-
-export function getConditionalFilterKeyQuery(value: string, cursorIndex: number): string {
-  const context = getConditionalFilterEditContext(value, cursorIndex);
-  if (context.phase !== 'key') {
-    return '';
-  }
-  return context.editText.trim();
-}
-
 export function replaceConditionalFilterClause(
   value: string,
   cursorIndex: number,
diff --git a/static/app/components/arithmeticBuilder/index.spec.tsx b/static/app/components/arithmeticBuilder/index.spec.tsx
index deb33d1d4ca4..6d987dba2c4a 100644
--- a/static/app/components/arithmeticBuilder/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/index.spec.tsx
@@ -240,26 +240,44 @@ describe('ArithmeticBuilder', () => {
     // Because we're deleting tokens from the start, we cannot get them
     // up front as they will change as we delete. We have to get the
     // element once we reach that position.
-    const tokens: Array<() => HTMLElement | null> = [
-      firstFreeText,
-      () => screen.queryByRole('gridcell', {name: 'Delete left'}),
-      firstFreeText,
-      () => screen.queryByPlaceholderText('span.duration'),
-      firstFreeText,
-      () => screen.queryByRole('gridcell', {name: 'Delete +'}),
-      firstFreeText,
-      () => screen.queryByPlaceholderText('span.op'),
-      firstFreeText,
-      () => screen.queryByRole('gridcell', {name: 'Delete right'}),
-      firstFreeText,
+    const tokens: Array<{
+      focus: () => HTMLElement | null;
+      gone: () => HTMLElement | null;
+    }> = [
+      {focus: firstFreeText, gone: firstFreeText},
+      {
+        focus: () => screen.queryByRole('gridcell', {name: 'Delete left'}),
+        gone: () => screen.queryByRole('gridcell', {name: 'Delete left'}),
+      },
+      {focus: firstFreeText, gone: firstFreeText},
+      {
+        focus: () => screen.queryByPlaceholderText('span.duration'),
+        gone: () => screen.queryByRole('row', {name: 'sum(span.duration)'}),
+      },
+      {focus: firstFreeText, gone: firstFreeText},
+      {
+        focus: () => screen.queryByRole('gridcell', {name: 'Delete +'}),
+        gone: () => screen.queryByRole('gridcell', {name: 'Delete +'}),
+      },
+      {focus: firstFreeText, gone: firstFreeText},
+      {
+        focus: () => screen.queryByPlaceholderText('span.op'),
+        gone: () => screen.queryByRole('row', {name: 'count_if(span.op,equals,db)'}),
+      },
+      {focus: firstFreeText, gone: firstFreeText},
+      {
+        focus: () => screen.queryByRole('gridcell', {name: 'Delete right'}),
+        gone: () => screen.queryByRole('gridcell', {name: 'Delete right'}),
+      },
+      {focus: firstFreeText, gone: firstFreeText},
     ];
 
     let i = 0;
-    const focus = () => expect(tokens[i]!()).toHaveFocus();
-    const focus0 = () => expect(tokens[0]!()).toHaveFocus();
-    const deletion = () => expect(tokens[i]!()).not.toBeInTheDocument();
+    const focus = () => expect(tokens[i]!.focus()).toHaveFocus();
+    const focus0 = () => expect(tokens[0]!.focus()).toHaveFocus();
+    const deletion = () => expect(tokens[i]!.gone()).not.toBeInTheDocument();
 
-    await userEvent.click(tokens[i]!()!);
+    await userEvent.click(tokens[i]!.focus()!);
     await waitFor(focus);
 
     while (i < tokens.length - 1) {
@@ -277,6 +295,23 @@ describe('ArithmeticBuilder', () => {
     expect(screen.getAllByRole('row')).toHaveLength(1);
   });
 
+  it('deleting a function keeps the following function arguments', async () => {
+    const expression = 'sum(span.duration) + count_if(span.op,equals,db)';
+    render(<ArithmeticBuilderWrapper expression={expression} />);
+
+    const sumRow = await screen.findByRole('row', {name: 'sum(span.duration)'});
+    await userEvent.click(
+      within(sumRow).getByRole('button', {name: 'Remove function sum(span.duration)'})
+    );
+
+    expect(
+      screen.queryByRole('row', {name: 'sum(span.duration)'})
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('row', {name: 'count_if(span.op,equals,db)'})
+    ).toBeInTheDocument();
+  });
+
   it('deleting a middle literal does not shift remaining literal values', async () => {
     const expression = 'A + 1 + 2 + 3';
     render(
diff --git a/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx b/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
new file mode 100644
index 000000000000..0d0826fae8cd
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
@@ -0,0 +1,231 @@
+import type {ChangeEvent, FocusEvent, MouseEvent} from 'react';
+import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {Item, Section} from '@react-stately/collections';
+
+import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
+
+import {
+  ensureSearchFilterArgument,
+  isFilterKeySuggestion,
+  replaceConditionalFilterClause,
+  unwrapSearchFilterArgument,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
+import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
+import {
+  ArgumentGridCell,
+  ArgumentGridRow,
+  useFunctionArgumentInput,
+  type FunctionArgumentInputProps,
+} from 'sentry/components/arithmeticBuilder/token/useFunctionArgumentInput';
+import {itemIsSection} from 'sentry/components/searchQueryBuilder/tokens/utils';
+import {ComboBox} from 'sentry/components/tokenizedInput/token/comboBox';
+import {t} from 'sentry/locale';
+
+export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps) {
+  const {argument, argumentIndex, onArgumentsChange} = props;
+  const {
+    commitFunctionToken,
+    dataTestId,
+    flushArgumentsIfLeavingGrid,
+    focusArgument,
+    gridCellProps,
+    gridCellRef,
+    inputRef,
+    isFocused,
+    onKeyDown,
+    onKeyDownCapture,
+    rowProps,
+    shouldCloseOnInteractOutside,
+  } = useFunctionArgumentInput(props);
+
+  const {functionArguments: builderFunctionArguments, getFilterTagValues} =
+    useArithmeticBuilder();
+
+  const initialLabel = unwrapSearchFilterArgument(argument.label);
+  const [inputValue, setInputValue] = useState('');
+  const [currentValue, setCurrentValue] = useState(initialLabel);
+  const [isCurrentlyEditing, setIsCurrentlyEditing] = useState(false);
+  const [selectionIndex, setSelectionIndex] = useState(0);
+  const displayValue = isCurrentlyEditing ? inputValue : currentValue;
+  // Apply after React commits the controlled value. A lone rAF + focus() races in
+  // Chrome and resets the caret before (or when) focus returns from the listbox.
+  const pendingCaretRef = useRef<{pos: number; value: string} | null>(null);
+
+  useLayoutEffect(() => {
+    const pendingCaret = pendingCaretRef.current;
+    if (pendingCaret === null) {
+      return;
+    }
+    const input = inputRef.current;
+    if (input?.value !== pendingCaret.value) {
+      return;
+    }
+    pendingCaretRef.current = null;
+    if (document.activeElement !== input) {
+      input.focus();
+    }
+    input.setSelectionRange(pendingCaret.pos, pendingCaret.pos);
+    setSelectionIndex(pendingCaret.pos);
+  }, [inputRef, inputValue]);
+
+  const {comboBoxFilterValue, editPhase, items} = useConditionalFilterAutocomplete({
+    enabled: isCurrentlyEditing,
+    filterValue: inputValue,
+    functionArguments: builderFunctionArguments,
+    getFilterTagValues,
+    selectionIndex,
+  });
+
+  const shouldFilterComboBoxResults = !(editPhase === 'value' && getFilterTagValues);
+
+  const updateSelectionIndex = useCallback(
+    (input?: HTMLInputElement | null) => {
+      const target = input ?? inputRef.current;
+      setSelectionIndex(target?.selectionStart ?? 0);
+    },
+    [inputRef]
+  );
+
+  const resetInputValue = useCallback(() => {
+    setInputValue('');
+    updateSelectionIndex();
+  }, [updateSelectionIndex]);
+
+  const onClick = useCallback(
+    (evt: MouseEvent<HTMLInputElement>) => {
+      const input = evt.currentTarget;
+      requestAnimationFrame(() => {
+        updateSelectionIndex(input);
+      });
+    },
+    [updateSelectionIndex]
+  );
+
+  const onKeyUp = useCallback(() => {
+    updateSelectionIndex();
+  }, [updateSelectionIndex]);
+
+  const onInputChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(evt.target.value);
+    setCurrentValue(evt.target.value);
+    setSelectionIndex(evt.target.selectionStart ?? 0);
+  }, []);
+
+  const onInputEscape = useCallback(() => {
+    resetInputValue();
+    setIsCurrentlyEditing(false);
+  }, [resetInputValue]);
+
+  const onInputFocus = useCallback(
+    (evt: FocusEvent<HTMLInputElement>) => {
+      evt.stopPropagation();
+      focusArgument();
+      setIsCurrentlyEditing(true);
+      setInputValue(currentValue);
+      updateSelectionIndex(evt.currentTarget);
+    },
+    [currentValue, focusArgument, updateSelectionIndex]
+  );
+
+  // Persist free-text filter edits on blur. Empty input becomes `` so clearing the filter
+  // updates argsRef (otherwise the prior value is kept and commitArgumentsIfChanged no-ops).
+  // Skip REPLACE_TOKEN while focus stays inside the arguments grid — that remounts the
+  // function and steals focus from the next arg. Pending edits flush via onArgumentsBlur.
+  const onInputBlur = useCallback(
+    (evt?: FocusEvent<HTMLInputElement>) => {
+      const value = ensureSearchFilterArgument(inputValue);
+      setCurrentValue(unwrapSearchFilterArgument(value));
+      onArgumentsChange(argumentIndex, value);
+      resetInputValue();
+      setIsCurrentlyEditing(false);
+      flushArgumentsIfLeavingGrid(evt);
+    },
+    [
+      argumentIndex,
+      flushArgumentsIfLeavingGrid,
+      inputValue,
+      onArgumentsChange,
+      resetInputValue,
+    ]
+  );
+
+  const onInputCommit = useCallback(() => {
+    // Filter args may intentionally be cleared; don't fall back to the prior label.
+    const value = ensureSearchFilterArgument(inputValue.trim());
+    setCurrentValue(unwrapSearchFilterArgument(value));
+    onArgumentsChange(argumentIndex, value);
+    commitFunctionToken(value);
+    resetInputValue();
+  }, [
+    argumentIndex,
+    commitFunctionToken,
+    inputValue,
+    onArgumentsChange,
+    resetInputValue,
+  ]);
+
+  const onOptionSelected = useCallback(
+    (option: SelectOptionWithKey<string>) => {
+      const {newValue, newCursorIndex} = replaceConditionalFilterClause(
+        inputValue,
+        selectionIndex,
+        option.value
+      );
+      if (isFilterKeySuggestion(option.value)) {
+        pendingCaretRef.current = {pos: newCursorIndex, value: newValue};
+      }
+      setCurrentValue(newValue);
+      setInputValue(newValue);
+      setIsCurrentlyEditing(true);
+      setSelectionIndex(newCursorIndex);
+    },
+    [inputValue, selectionIndex]
+  );
+
+  return (
+    <ArgumentGridRow {...rowProps} tabIndex={isFocused ? 0 : -1} ref={gridCellRef}>
+      <ArgumentGridCell {...gridCellProps}>
+        <ComboBox
+          items={items}
+          ref={inputRef}
+          placeholder={unwrapSearchFilterArgument(argument.label)}
+          inputLabel={t('Add a filter')}
+          inputValue={displayValue}
+          filterValue={comboBoxFilterValue}
+          keepMenuOpenOnSelect={option => isFilterKeySuggestion(option.value)}
+          shouldFilterResults={shouldFilterComboBoxResults}
+          tabIndex={isFocused ? 0 : -1}
+          shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
+          onClick={onClick}
+          onInputBlur={onInputBlur}
+          onInputChange={onInputChange}
+          onInputCommit={onInputCommit}
+          onInputEscape={onInputEscape}
+          onInputFocus={onInputFocus}
+          onKeyDown={onKeyDown}
+          onKeyDownCapture={onKeyDownCapture}
+          onKeyUp={onKeyUp}
+          onOptionSelected={onOptionSelected}
+          data-test-id={dataTestId}
+        >
+          {keyItem =>
+            itemIsSection(keyItem) ? (
+              <Section title={keyItem.label} key={keyItem.key}>
+                {keyItem.options.map(child => (
+                  <Item {...child} key={child.key}>
+                    {child.label}
+                  </Item>
+                ))}
+              </Section>
+            ) : (
+              <Item {...keyItem} key={keyItem.key}>
+                {keyItem.label}
+              </Item>
+            )
+          }
+        </ComboBox>
+      </ArgumentGridCell>
+    </ArgumentGridRow>
+  );
+}
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index e9b829570b8b..7411e83c6a17 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -1,37 +1,37 @@
-import type {ChangeEvent, FocusEvent, MouseEvent, RefObject} from 'react';
-import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import type {ChangeEvent, FocusEvent, RefObject} from 'react';
+import {useCallback, useMemo, useRef, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {type AriaGridListOptions} from '@react-aria/gridlist';
 import {Item, Section} from '@react-stately/collections';
 import {useListState, type ListState} from '@react-stately/list';
-import type {CollectionChildren, KeyboardEvent, Node} from '@react-types/shared';
+import type {CollectionChildren, Node} from '@react-types/shared';
 
 import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
 import {Flex} from '@sentry/scraps/layout';
 
 import {
-  ensureSearchFilterArgument,
-  isFilterKeySuggestion,
   isSearchFilterParameter,
-  replaceConditionalFilterClause,
   unwrapSearchFilterArgument,
 } from 'sentry/components/arithmeticBuilder/conditionalFilter';
-import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
 import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
 import type {
   Token,
   TokenAttribute,
   TokenFunction,
 } from 'sentry/components/arithmeticBuilder/token';
-import {TokenKind} from 'sentry/components/arithmeticBuilder/token';
+import {ConditionalFilterArgumentInput} from 'sentry/components/arithmeticBuilder/token/conditionalFilterInput';
 import {DeleteButton} from 'sentry/components/arithmeticBuilder/token/deleteButton';
-import {nextTokenKeyOfKind} from 'sentry/components/arithmeticBuilder/tokenizer';
+import {
+  ArgumentGridCell,
+  ArgumentGridRow,
+  useFunctionArgumentInput,
+  type FunctionArgumentInputProps,
+} from 'sentry/components/arithmeticBuilder/token/useFunctionArgumentInput';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import {itemIsSection} from 'sentry/components/searchQueryBuilder/tokens/utils';
 import {useGridList} from 'sentry/components/tokenizedInput/grid/useGridList';
 import {useGridListItem} from 'sentry/components/tokenizedInput/grid/useGridListItem';
-import {focusTarget} from 'sentry/components/tokenizedInput/grid/utils';
 import {ComboBox} from 'sentry/components/tokenizedInput/token/comboBox';
 import {InputBox} from 'sentry/components/tokenizedInput/token/inputBox';
 import {t} from 'sentry/locale';
@@ -108,7 +108,17 @@ export function ArithmeticTokenFunction({
       <FunctionGridCell {...gridCellProps} onMouseDown={onFunctionNameMouseDown}>
         {token.function}
       </FunctionGridCell>
-      <ArgumentsGrid rowRef={ref} item={item} state={state} token={token} />
+      {/* Function tokens are keyed by position (`func:0`), so deleting an earlier
+          function reuses this component for the next one. Remount the arguments
+          grid when the token identity changes so we don't keep the previous
+          function's draft argument state. */}
+      <ArgumentsGrid
+        key={`${token.location.start.offset}:${token.function}`}
+        rowRef={ref}
+        item={item}
+        state={state}
+        token={token}
+      />
       <BaseGridCell {...gridCellProps}>
         <DeleteButton token={token} label={t('Remove function %s', token.text)} />
       </BaseGridCell>
@@ -116,7 +126,7 @@ export function ArithmeticTokenFunction({
   );
 }
 
-type Argument = {label: string; value: string};
+type Argument = FunctionArgumentInputProps['argument'];
 
 interface ArgumentsGridProps extends ArithmeticTokenFunctionProps {
   rowRef: RefObject<HTMLDivElement | null>;
@@ -296,52 +306,46 @@ function ArgumentsGridList({
   );
 }
 
-interface InternalInputProps {
-  argument: Argument;
-  argumentIndex: number;
-  argumentItem: Node<TokenAttribute>;
-  argumentRef: RefObject<HTMLDivElement | null>;
-  arguments: Argument[];
-  argumentsListState: ListState<TokenAttribute>;
-  functionItem: Node<Token>;
-  functionListState: ListState<Token>;
-  functionToken: TokenFunction;
-  onArgumentsBlur: () => void;
-  onArgumentsChange: (index: number, argument: string) => void;
-  rowRef: RefObject<HTMLDivElement | null>;
-}
+function InternalInput(props: FunctionArgumentInputProps) {
+  const {getFieldDefinition} = useArithmeticBuilder();
+  const parameterDefinition = useMemo(
+    () =>
+      getFieldDefinition(
+        props.functionToken.function,
+        props.functionToken.attributes.map(attr => attr.text)
+      )?.parameters?.[props.argumentIndex],
+    [getFieldDefinition, props.argumentIndex, props.functionToken]
+  );
 
-function InternalInput({
-  argumentIndex,
-  functionToken,
-  functionItem,
-  functionListState,
-  argumentsListState,
-  argumentItem,
-  argument,
-  argumentRef,
-  arguments: functionArguments,
-  onArgumentsBlur,
-  onArgumentsChange,
-}: InternalInputProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const gridCellRef = useRef<HTMLDivElement>(null);
-  const {rowProps, gridCellProps} = useGridListItem({
-    item: argumentItem,
-    ref: gridCellRef,
-    state: argumentsListState,
-    focusable: true,
-  });
+  if (isSearchFilterParameter(parameterDefinition)) {
+    return <ConditionalFilterArgumentInput {...props} />;
+  }
+
+  return <FunctionArgumentInput {...props} />;
+}
 
-  const isFocused = argumentItem.key === argumentsListState.selectionManager.focusedKey;
-  const hasNextArgument = argumentIndex < functionToken.attributes.length - 1;
-  const hasPrevArgument = argumentIndex > 0;
+function FunctionArgumentInput(props: FunctionArgumentInputProps) {
+  const {argument, argumentIndex, functionToken, onArgumentsChange} = props;
+  const {
+    commitFunctionToken,
+    dataTestId,
+    flushArgumentsIfLeavingGrid,
+    focusArgument,
+    focusNextArgument,
+    gridCellProps,
+    gridCellRef,
+    hasNextArgument,
+    inputRef,
+    isFocused,
+    onKeyDown,
+    onKeyDownCapture,
+    rowProps,
+    shouldCloseOnInteractOutside,
+  } = useFunctionArgumentInput(props);
 
   const {
-    dispatch,
     functionArguments: builderFunctionArguments,
     getFieldDefinition,
-    getFilterTagValues,
     getSuggestedKey,
   } = useArithmeticBuilder();
 
@@ -361,74 +365,14 @@ function InternalInput({
   );
 
   const initialLabel = resolveDisplayLabel(argument.label);
-
   const [inputValue, setInputValue] = useState('');
   const [currentValue, setCurrentValue] = useState(initialLabel);
   const [isCurrentlyEditing, setIsCurrentlyEditing] = useState(false);
-  const [selectionIndex, setSelectionIndex] = useState(0);
-  const skipBlurFlushRef = useRef(false);
-  // Apply after React commits the controlled value. A lone rAF + focus() races in
-  // Chrome and resets the caret before (or when) focus returns from the listbox.
-  const pendingCaretRef = useRef<{pos: number; value: string} | null>(null);
-
-  const isFilterParameter = isSearchFilterParameter(parameterDefinition);
-
   const displayValue = isCurrentlyEditing ? inputValue : currentValue;
 
-  useLayoutEffect(() => {
-    const pendingCaret = pendingCaretRef.current;
-    if (pendingCaret === null) {
-      return;
-    }
-    const input = inputRef.current;
-    if (input?.value !== pendingCaret.value) {
-      return;
-    }
-    pendingCaretRef.current = null;
-    if (document.activeElement !== input) {
-      input.focus();
-    }
-    input.setSelectionRange(pendingCaret.pos, pendingCaret.pos);
-    setSelectionIndex(pendingCaret.pos);
-  }, [inputValue]);
-
-  const {
-    comboBoxFilterValue,
-    editPhase,
-    items: filterItems,
-  } = useConditionalFilterAutocomplete({
-    enabled: isFilterParameter && isCurrentlyEditing,
-    filterValue: inputValue,
-    functionArguments: builderFunctionArguments,
-    getFilterTagValues,
-    selectionIndex,
-  });
-
-  const shouldFilterComboBoxResults = !(
-    isFilterParameter &&
-    editPhase === 'value' &&
-    getFilterTagValues
-  );
-
-  const updateSelectionIndex = useCallback((input?: HTMLInputElement | null) => {
-    const target = input ?? inputRef.current;
-    setSelectionIndex(target?.selectionStart ?? 0);
-  }, []);
-
   const resetInputValue = useCallback(() => {
     setInputValue('');
-    updateSelectionIndex();
-  }, [updateSelectionIndex]);
-
-  const updateAttrsWith = useCallback(
-    (value: string) => {
-      const tokenArguments = functionArguments.map(arg => arg.value);
-      tokenArguments[argumentIndex] = value;
-      const argsStr = tokenArguments.join(',');
-      return argsStr;
-    },
-    [argumentIndex, functionArguments]
-  );
+  }, []);
 
   const attributesFilter = useMemo(() => {
     if (parameterDefinition?.kind === 'column') {
@@ -461,10 +405,6 @@ function InternalInput({
   const attributeItems = useAttributeItems(allowedAttributes);
 
   const items = useMemo(() => {
-    if (isFilterParameter) {
-      return filterItems;
-    }
-
     const filterValue = inputValue.trim();
 
     if (parameterDefinition?.kind === 'value' && parameterDefinition.options) {
@@ -512,61 +452,7 @@ function InternalInput({
     }
 
     return result;
-  }, [attributeItems, filterItems, inputValue, isFilterParameter, parameterDefinition]);
-
-  const shouldCloseOnInteractOutside = useCallback((el: Element) => {
-    return !gridCellRef.current?.contains(el);
-  }, []);
-
-  const onClick = useCallback(
-    (evt: MouseEvent<HTMLInputElement>) => {
-      const input = evt.currentTarget;
-      requestAnimationFrame(() => {
-        updateSelectionIndex(input);
-      });
-    },
-    [updateSelectionIndex]
-  );
-
-  const onKeyUp = useCallback(() => {
-    updateSelectionIndex();
-  }, [updateSelectionIndex]);
-
-  const flushArgumentsIfLeavingGrid = useCallback(
-    (evt?: FocusEvent<HTMLInputElement>) => {
-      if (skipBlurFlushRef.current) {
-        skipBlurFlushRef.current = false;
-        return;
-      }
-
-      if (!evt) {
-        window.setTimeout(() => {
-          if (skipBlurFlushRef.current) {
-            skipBlurFlushRef.current = false;
-            return;
-          }
-          const stayingInArgs = Boolean(
-            document.activeElement &&
-            argumentRef.current?.contains(document.activeElement)
-          );
-          if (!stayingInArgs) {
-            onArgumentsBlur();
-          }
-        }, 0);
-        return;
-      }
-
-      const argsGrid = evt.currentTarget.closest('[role="grid"]');
-      const related = evt.relatedTarget;
-      const stayingInArgs = Boolean(
-        argsGrid && related instanceof Node && argsGrid.contains(related)
-      );
-      if (!stayingInArgs) {
-        onArgumentsBlur();
-      }
-    },
-    [argumentRef, onArgumentsBlur]
-  );
+  }, [attributeItems, inputValue, parameterDefinition]);
 
   const onInputBlur = useCallback(
     (evt?: FocusEvent<HTMLInputElement>) => {
@@ -579,9 +465,6 @@ function InternalInput({
 
   const resolveValue = useCallback(
     (raw: string): string => {
-      if (isSearchFilterParameter(parameterDefinition)) {
-        return ensureSearchFilterArgument(raw);
-      }
       if (
         parameterDefinition?.kind === 'column' &&
         parameterDefinition.defaultLabel &&
@@ -595,28 +478,6 @@ function InternalInput({
     [parameterDefinition]
   );
 
-  // Persist free-text filter edits on blur. Empty input becomes `` so clearing the filter
-  // updates argsRef (otherwise the prior value is kept and commitArgumentsIfChanged no-ops).
-  // Skip REPLACE_TOKEN while focus stays inside the arguments grid — that remounts the
-  // function and steals focus from the next arg. Pending edits flush via onArgumentsBlur.
-  const onFilterInputBlur = useCallback(
-    (evt?: FocusEvent<HTMLInputElement>) => {
-      const value = ensureSearchFilterArgument(inputValue);
-      setCurrentValue(unwrapSearchFilterArgument(value));
-      onArgumentsChange(argumentIndex, value);
-      resetInputValue();
-      setIsCurrentlyEditing(false);
-      flushArgumentsIfLeavingGrid(evt);
-    },
-    [
-      argumentIndex,
-      flushArgumentsIfLeavingGrid,
-      inputValue,
-      onArgumentsChange,
-      resetInputValue,
-    ]
-  );
-
   // Non-filter free-text values (e.g. apdex threshold) flush pending edits when leaving.
   const onTextInputBlur = useCallback(
     (evt: FocusEvent<HTMLInputElement>) => {
@@ -636,20 +497,13 @@ function InternalInput({
     ]
   );
 
-  const onInputChange = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      setInputValue(evt.target.value);
-      setCurrentValue(evt.target.value);
-      setSelectionIndex(evt.target.selectionStart ?? 0);
-    },
-    [setInputValue]
-  );
+  const onInputChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(evt.target.value);
+    setCurrentValue(evt.target.value);
+  }, []);
 
   const onInputCommit = useCallback(() => {
-    // Filter args may intentionally be cleared; don't fall back to the prior label.
-    let value = isFilterParameter
-      ? inputValue.trim()
-      : inputValue.trim() || argument.label;
+    let value = inputValue.trim() || argument.label;
 
     if (defined(getSuggestedKey) && parameterDefinition?.kind === 'column') {
       value = getSuggestedKey(value) ?? value;
@@ -659,36 +513,19 @@ function InternalInput({
 
     setCurrentValue(resolveDisplayLabel(value));
     onArgumentsChange(argumentIndex, value);
-    skipBlurFlushRef.current = true;
-
-    dispatch({
-      text: `${functionToken.function}(${updateAttrsWith(value)})`,
-      type: 'REPLACE_TOKEN',
-      token: functionToken,
-      focusOverride: {
-        itemKey: nextTokenKeyOfKind(
-          functionListState,
-          functionToken,
-          TokenKind.FREE_TEXT
-        ),
-      },
-    });
+    commitFunctionToken(value);
     resetInputValue();
   }, [
-    isFilterParameter,
-    inputValue,
     argument.label,
+    argumentIndex,
+    commitFunctionToken,
     getSuggestedKey,
+    inputValue,
+    onArgumentsChange,
     parameterDefinition,
+    resetInputValue,
     resolveDisplayLabel,
     resolveValue,
-    onArgumentsChange,
-    argumentIndex,
-    dispatch,
-    functionToken,
-    updateAttrsWith,
-    functionListState,
-    resetInputValue,
   ]);
 
   const onInputEscape = useCallback(() => {
@@ -705,182 +542,50 @@ function InternalInput({
       // If this isn't called, the argument collection doesn't shift focus to current arg
       // causing bugs. Test for this behaviour can be found in
       // static/app/components/arithmeticBuilder/token/index.spec.tsx -t 'shifts focus between args correctly'
-      focusTarget(argumentsListState, argumentItem.key);
+      focusArgument();
       setIsCurrentlyEditing(true);
       resetInputValue();
     },
-    [argumentItem.key, argumentsListState, resetInputValue]
+    [focusArgument, resetInputValue]
   );
 
-  // Free-text value args (e.g. `_if` filters) should keep their current text on focus so
-  // the user can edit it. ComboBox clears on focus to type a new filter query.
+  // Free-text value args should keep their current text on focus so the user can edit it.
+  // ComboBox clears on focus to type a new query.
   const onTextInputFocus = useCallback(
     (evt: FocusEvent<HTMLInputElement>) => {
       evt.stopPropagation();
-      focusTarget(argumentsListState, argumentItem.key);
+      focusArgument();
       setIsCurrentlyEditing(true);
       setInputValue(currentValue);
-      updateSelectionIndex(evt.currentTarget);
-    },
-    [argumentItem.key, argumentsListState, currentValue, updateSelectionIndex]
-  );
-
-  const onKeyDownCapture = useCallback(
-    (evt: React.KeyboardEvent<HTMLInputElement>) => {
-      // At start and pressing left arrow, focus the previous full token
-      if (
-        evt.currentTarget.selectionStart === 0 &&
-        evt.currentTarget.selectionEnd === 0 &&
-        evt.key === 'ArrowLeft'
-      ) {
-        if (hasPrevArgument) {
-          focusTarget(
-            argumentsListState,
-            argumentsListState.collection.getKeyBefore(argumentItem.key)
-          );
-        } else {
-          focusTarget(
-            functionListState,
-            functionListState.collection.getKeyBefore(functionItem.key)
-          );
-        }
-        return;
-      }
-
-      // At end and pressing right arrow, focus the next full token
-      if (
-        evt.currentTarget.selectionStart === evt.currentTarget.value.length &&
-        evt.currentTarget.selectionEnd === evt.currentTarget.value.length &&
-        evt.key === 'ArrowRight'
-      ) {
-        if (hasNextArgument) {
-          focusTarget(
-            argumentsListState,
-            argumentsListState.collection.getKeyAfter(argumentItem.key)
-          );
-        } else {
-          focusTarget(
-            functionListState,
-            functionListState.collection.getKeyAfter(functionItem.key)
-          );
-        }
-        return;
-      }
     },
-    [
-      hasPrevArgument,
-      argumentsListState,
-      argumentItem.key,
-      functionListState,
-      functionItem.key,
-      hasNextArgument,
-    ]
-  );
-
-  const onKeyDown = useCallback(
-    (evt: KeyboardEvent) => {
-      // TODO: handle meta keys
-
-      // At start and pressing backspace, delete this token
-      if (
-        evt.currentTarget.selectionStart === 0 &&
-        evt.currentTarget.selectionEnd === 0 &&
-        evt.key === 'Backspace'
-      ) {
-        const itemKey = functionListState.collection.getKeyBefore(functionItem.key);
-        dispatch({
-          type: 'DELETE_TOKEN',
-          token: functionToken,
-          focusOverride: defined(itemKey) ? {itemKey} : undefined,
-        });
-      }
-
-      // At end and pressing delete, focus the next full token
-      if (
-        evt.currentTarget.selectionStart === evt.currentTarget.value.length &&
-        evt.currentTarget.selectionEnd === evt.currentTarget.value.length &&
-        evt.key === 'Delete'
-      ) {
-        const itemKey = functionListState.collection.getKeyBefore(functionItem.key);
-        dispatch({
-          type: 'DELETE_TOKEN',
-          token: functionToken,
-          focusOverride: defined(itemKey) ? {itemKey} : undefined,
-        });
-      }
-    },
-    [dispatch, functionToken, functionListState, functionItem]
+    [currentValue, focusArgument]
   );
 
   const onOptionSelected = useCallback(
     (option: SelectOptionWithKey<string>) => {
-      if (isFilterParameter) {
-        const {newValue, newCursorIndex} = replaceConditionalFilterClause(
-          inputValue,
-          selectionIndex,
-          option.value
-        );
-        if (isFilterKeySuggestion(option.value)) {
-          pendingCaretRef.current = {pos: newCursorIndex, value: newValue};
-        }
-        setCurrentValue(newValue);
-        setInputValue(newValue);
-        setIsCurrentlyEditing(true);
-        setSelectionIndex(newCursorIndex);
-        return;
-      }
-
       setCurrentValue(resolveDisplayLabel(prettifyTagKey(option.value)));
       onArgumentsChange(argumentIndex, option.value);
       if (hasNextArgument) {
-        focusTarget(
-          argumentsListState,
-          argumentsListState.collection.getKeyAfter(argumentItem.key)
-        );
+        focusNextArgument();
       } else {
-        skipBlurFlushRef.current = true;
-        dispatch({
-          text: `${functionToken.function}(${updateAttrsWith(option.value)})`,
-          type: 'REPLACE_TOKEN',
-          token: functionToken,
-          focusOverride: {
-            itemKey: nextTokenKeyOfKind(
-              functionListState,
-              functionToken,
-              TokenKind.FREE_TEXT
-            ),
-          },
-        });
+        commitFunctionToken(option.value);
       }
       resetInputValue();
     },
     [
-      isFilterParameter,
+      argumentIndex,
+      commitFunctionToken,
+      focusNextArgument,
       hasNextArgument,
-      resolveDisplayLabel,
-      resetInputValue,
-      argumentsListState,
-      argumentItem.key,
       onArgumentsChange,
-      argumentIndex,
-      dispatch,
-      functionToken,
-      updateAttrsWith,
-      functionListState,
-      inputValue,
-      selectionIndex,
+      resetInputValue,
+      resolveDisplayLabel,
     ]
   );
 
-  const onPaste = useCallback((_evt: React.ClipboardEvent<HTMLInputElement>) => {
-    // TODO
-  }, []);
-
   // Free-text value args with no options (e.g. apdex threshold) use a plain input.
-  // `_if` filter args use ComboBox below for attribute-key autocomplete.
   if (
     parameterDefinition?.kind === 'value' &&
-    !isFilterParameter &&
     (!defined(parameterDefinition.options) || !parameterDefinition.options.length)
   ) {
     return (
@@ -891,7 +596,6 @@ function InternalInput({
             ref={inputRef}
             inputLabel={t('Add a value')}
             inputValue={displayValue}
-            onClick={onClick}
             onInputBlur={onTextInputBlur}
             onInputChange={onInputChange}
             onInputCommit={onInputCommit}
@@ -912,44 +616,28 @@ function InternalInput({
           items={items}
           ref={inputRef}
           placeholder={
-            isFilterParameter
-              ? resolveDisplayLabel(argument.label)
-              : parameterDefinition?.kind === 'value' &&
-                  'placeholder' in parameterDefinition
-                ? (argument.label ?? parameterDefinition.placeholder)
-                : resolveDisplayLabel(argument.label)
+            parameterDefinition?.kind === 'value' && 'placeholder' in parameterDefinition
+              ? (argument.label ?? parameterDefinition.placeholder)
+              : resolveDisplayLabel(argument.label)
           }
           inputLabel={
-            isFilterParameter
-              ? t('Add a filter')
-              : parameterDefinition?.kind === 'column'
-                ? t('Select an attribute')
-                : t('Select an option')
+            parameterDefinition?.kind === 'column'
+              ? t('Select an attribute')
+              : t('Select an option')
           }
           inputValue={displayValue}
-          filterValue={comboBoxFilterValue}
-          keepMenuOpenOnSelect={option => isFilterKeySuggestion(option.value)}
-          shouldFilterResults={shouldFilterComboBoxResults}
-          tabIndex={
-            argumentItem.key === argumentsListState.selectionManager.focusedKey ? 0 : -1
-          }
+          filterValue={inputValue}
+          tabIndex={isFocused ? 0 : -1}
           shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
-          onClick={onClick}
-          onInputBlur={isFilterParameter ? onFilterInputBlur : onInputBlur}
+          onInputBlur={onInputBlur}
           onInputChange={onInputChange}
           onInputCommit={onInputCommit}
           onInputEscape={onInputEscape}
-          onInputFocus={isFilterParameter ? onTextInputFocus : onInputFocus}
+          onInputFocus={onInputFocus}
           onKeyDown={onKeyDown}
           onKeyDownCapture={onKeyDownCapture}
-          onKeyUp={isFilterParameter ? onKeyUp : undefined}
           onOptionSelected={onOptionSelected}
-          onPaste={onPaste}
-          data-test-id={
-            functionListState.collection.getLastKey() === functionItem.key
-              ? 'arithmetic-builder-argument-input'
-              : undefined
-          }
+          data-test-id={dataTestId}
         >
           {keyItem =>
             itemIsSection(keyItem) ? (
@@ -1021,27 +709,6 @@ const FunctionWrapper = styled('div')<{state: 'invalid' | 'warning' | 'valid'}>`
   }
 `;
 
-const ArgumentGridRow = styled('div')`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 100%;
-  flex: 0 1 auto;
-  max-width: fit-content;
-`;
-
-const ArgumentGridCell = styled('div')`
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  > div input {
-    max-width: 130px !important;
-    min-width: 0 !important;
-    white-space: nowrap !important;
-  }
-`;
-
 const BaseGridCell = styled('div')`
   display: flex;
   align-items: center;
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 9e7df7c77a87..37edeca7a5c8 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -31,14 +31,6 @@ const functionArguments = [
   {name: 'span.description', kind: FieldKind.TAG},
 ];
 
-const getSpanFieldDefinition = (key: string, attributeTexts?: readonly string[]) => {
-  const argument = functionArguments.find(
-    functionArgument => functionArgument.name === key
-  );
-
-  return getExploreEquationFieldDefinition(key, argument?.kind, true, attributeTexts);
-};
-
 const getSuggestedKey = (key: string) => {
   switch (key) {
     case 'duration':
@@ -55,10 +47,16 @@ interface TokensProp {
   expression: string;
   dispatch?: Dispatch<ArithmeticBuilderAction>;
   getFilterTagValues?: GetTagValues;
+  /**
+   * Mirrors `explore-conditional-aggregates`. Defaults to on so EAP filter-first
+   * coverage stays the default; Discover 3/4-arg `_if` tests pass `false`.
+   */
+  hasConditionalAggregates?: boolean;
   references?: Set<string>;
 }
 
 function Tokens(props: TokensProp) {
+  const hasConditionalAggregates = props.hasConditionalAggregates ?? true;
   const {state, dispatch} = useArithmeticBuilderAction({
     initialExpression: props.expression,
     references: props.references,
@@ -72,6 +70,22 @@ function Tokens(props: TokensProp) {
     [dispatch, props]
   );
 
+  const getSpanFieldDefinition = useCallback(
+    (key: string, attributeTexts?: readonly string[]) => {
+      const argument = functionArguments.find(
+        functionArgument => functionArgument.name === key
+      );
+
+      return getExploreEquationFieldDefinition(
+        key,
+        argument?.kind,
+        hasConditionalAggregates,
+        attributeTexts
+      );
+    },
+    [hasConditionalAggregates]
+  );
+
   return (
     <ArithmeticBuilderContext
       value={{
@@ -172,6 +186,22 @@ describe('token', () => {
     });
 
     it('fills in every argument when selecting avg_if', async () => {
+      render(<Tokens expression="" hasConditionalAggregates={false} />);
+
+      const input = screen.getByRole('combobox', {name: 'Add a term'});
+
+      await userEvent.click(input);
+      await userEvent.type(input, 'avg_if');
+      await userEvent.click(screen.getByRole('option', {name: 'avg_if'}));
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(span.duration,span.op,equals,db)',
+        })
+      ).toBeInTheDocument();
+    });
+
+    it('fills in filter-first arguments when selecting avg_if with the feature', async () => {
       render(<Tokens expression="" />);
 
       const input = screen.getByRole('combobox', {name: 'Add a term'});
@@ -815,6 +845,61 @@ describe('token', () => {
       });
     });
 
+    it('renders multi-argument function and allows navigating between arguments', async () => {
+      render(<Tokens expression="count_if(span.op,equals,browser)" />);
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'count_if(span.op,equals,browser)',
+        })
+      ).toBeInTheDocument();
+
+      const args = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).queryAllByRole('gridcell');
+
+      expect(args).toHaveLength(3);
+
+      const firstArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Select an attribute'});
+
+      expect(firstArg).toHaveAttribute('placeholder', 'span.op');
+
+      const secondArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Select an option'});
+      expect(secondArg).toHaveAttribute('placeholder', 'equals');
+
+      const thirdArg = within(
+        screen.getByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('textbox', {name: 'Add a value'});
+      expect(thirdArg).toHaveValue('browser');
+
+      await userEvent.click(firstArg);
+      await userEvent.type(firstArg, 'span.description');
+      expect(screen.getByRole('option', {name: 'span.description'})).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('option', {name: 'span.description'}));
+
+      await waitFor(() => {
+        expect(secondArg).toHaveFocus();
+      });
+
+      expect(
+        screen.queryByRole('option', {name: 'span.description'})
+      ).not.toBeInTheDocument();
+
+      await userEvent.keyboard('not');
+      await userEvent.click(screen.getByRole('option', {name: 'is not equal to'}));
+
+      await waitFor(() => {
+        expect(thirdArg).toHaveFocus();
+      });
+      await userEvent.clear(thirdArg);
+      await userEvent.type(thirdArg, 'db');
+      expect(thirdArg).toHaveValue('db');
+    });
+
     it('keeps filter text when focusing an _if filter argument', async () => {
       render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
@@ -1145,7 +1230,7 @@ describe('token', () => {
       expect(screen.queryByRole('option', {name: 'span.op:'})).not.toBeInTheDocument();
     });
 
-    it('renders multi-argument function and allows navigating between arguments', async () => {
+    it('renders filter-first avg_if arguments and allows navigating between them', async () => {
       render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
       expect(
@@ -1345,6 +1430,42 @@ describe('token', () => {
     });
 
     it('suggests attributes for each argument of avg_if', async () => {
+      render(<Tokens expression="avg_if(span.duration,span.op,equals,queue.process)" />);
+
+      const argumentsGrid = await screen.findByRole('grid', {name: 'Enter arguments'});
+
+      const [numberArg, stringArg] = within(argumentsGrid).getAllByRole('combobox', {
+        name: 'Select an attribute',
+      });
+      const conditionArg = within(argumentsGrid).getByRole('combobox', {
+        name: 'Select an option',
+      });
+      const valueArg = within(argumentsGrid).getByRole('textbox', {
+        name: 'Add a value',
+      });
+
+      await userEvent.click(numberArg!);
+      expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual([
+        'span.duration',
+        'span.self_time',
+      ]);
+
+      await userEvent.click(stringArg!);
+      expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual([
+        'span.op',
+        'span.description',
+      ]);
+
+      await userEvent.click(conditionArg);
+      expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual([
+        'is equal to',
+        'is not equal to',
+      ]);
+
+      expect(valueArg).toHaveValue('queue.process');
+    });
+
+    it('suggests column attributes for filter-first avg_if', async () => {
       render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
       const argumentsGrid = await screen.findByRole('grid', {name: 'Enter arguments'});
@@ -1367,6 +1488,58 @@ describe('token', () => {
   });
 
   it('shifts focus between args correctly', async () => {
+    render(<Tokens expression="count_if(span.op,equals,browser)" />);
+
+    expect(
+      await screen.findByRole('row', {
+        name: 'count_if(span.op,equals,browser)',
+      })
+    ).toBeInTheDocument();
+
+    const args = within(
+      screen.getByRole('grid', {name: 'Enter arguments'})
+    ).queryAllByRole('gridcell');
+
+    expect(args).toHaveLength(3);
+
+    const firstArg = within(
+      screen.getByRole('grid', {name: 'Enter arguments'})
+    ).getByRole('combobox', {name: 'Select an attribute'});
+
+    const secondArg = within(
+      screen.getByRole('grid', {name: 'Enter arguments'})
+    ).getByRole('combobox', {name: 'Select an option'});
+
+    await userEvent.click(firstArg);
+    await userEvent.type(firstArg, 'span.description');
+    expect(screen.getByRole('option', {name: 'span.description'})).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('option', {name: 'span.description'}));
+
+    await waitFor(() => {
+      expect(secondArg).toHaveFocus();
+    });
+
+    expect(
+      screen.queryByRole('option', {name: 'span.description'})
+    ).not.toBeInTheDocument();
+
+    await userEvent.click(firstArg);
+
+    await waitFor(() => {
+      expect(firstArg).toHaveFocus();
+    });
+    await userEvent.type(firstArg, 'span.op');
+    expect(screen.getByRole('option', {name: 'span.op'})).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('option', {name: 'span.op'}));
+
+    await waitFor(() => {
+      expect(secondArg).toHaveFocus();
+    });
+
+    expect(screen.queryByRole('option', {name: 'span.op'})).not.toBeInTheDocument();
+  });
+
+  it('shifts focus between filter-first avg_if args correctly', async () => {
     render(<Tokens expression="avg_if(`span.op:db`,span.duration)" />);
 
     expect(
diff --git a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
new file mode 100644
index 000000000000..92535192028a
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
@@ -0,0 +1,280 @@
+import type {FocusEvent, RefObject} from 'react';
+import {useCallback, useRef} from 'react';
+import styled from '@emotion/styled';
+import type {ListState} from '@react-stately/list';
+import type {KeyboardEvent, Node} from '@react-types/shared';
+
+import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
+import {
+  TokenKind,
+  type Token,
+  type TokenAttribute,
+  type TokenFunction,
+} from 'sentry/components/arithmeticBuilder/token';
+import {nextTokenKeyOfKind} from 'sentry/components/arithmeticBuilder/tokenizer';
+import {useGridListItem} from 'sentry/components/tokenizedInput/grid/useGridListItem';
+import {focusTarget} from 'sentry/components/tokenizedInput/grid/utils';
+import {defined} from 'sentry/utils/defined';
+
+type FunctionArgumentValue = {label: string; value: string};
+
+export interface FunctionArgumentInputProps {
+  argument: FunctionArgumentValue;
+  argumentIndex: number;
+  argumentItem: Node<TokenAttribute>;
+  argumentRef: RefObject<HTMLDivElement | null>;
+  arguments: FunctionArgumentValue[];
+  argumentsListState: ListState<TokenAttribute>;
+  functionItem: Node<Token>;
+  functionListState: ListState<Token>;
+  functionToken: TokenFunction;
+  onArgumentsBlur: () => void;
+  onArgumentsChange: (index: number, argument: string) => void;
+  rowRef: RefObject<HTMLDivElement | null>;
+}
+
+export function useFunctionArgumentInput({
+  argumentIndex,
+  argumentItem,
+  argumentRef,
+  arguments: functionArguments,
+  argumentsListState,
+  functionItem,
+  functionListState,
+  functionToken,
+  onArgumentsBlur,
+}: FunctionArgumentInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const gridCellRef = useRef<HTMLDivElement>(null);
+  const skipBlurFlushRef = useRef(false);
+  const {rowProps, gridCellProps} = useGridListItem({
+    item: argumentItem,
+    ref: gridCellRef,
+    state: argumentsListState,
+    focusable: true,
+  });
+
+  const isFocused = argumentItem.key === argumentsListState.selectionManager.focusedKey;
+  const hasNextArgument = argumentIndex < functionToken.attributes.length - 1;
+  const hasPrevArgument = argumentIndex > 0;
+  const {dispatch} = useArithmeticBuilder();
+
+  const shouldCloseOnInteractOutside = useCallback((el: Element) => {
+    return !gridCellRef.current?.contains(el);
+  }, []);
+
+  const updateAttrsWith = useCallback(
+    (value: string) => {
+      const tokenArguments = functionArguments.map(arg => arg.value);
+      tokenArguments[argumentIndex] = value;
+      return tokenArguments.join(',');
+    },
+    [argumentIndex, functionArguments]
+  );
+
+  const flushArgumentsIfLeavingGrid = useCallback(
+    (evt?: FocusEvent<HTMLInputElement>) => {
+      // Leave the flag set: a later interact-outside `onInputBlur()` schedules a
+      // timeout that would otherwise restore the token after DELETE/REPLACE.
+      if (skipBlurFlushRef.current) {
+        return;
+      }
+
+      if (!evt) {
+        window.setTimeout(() => {
+          if (skipBlurFlushRef.current) {
+            return;
+          }
+          const stayingInArgs = Boolean(
+            document.activeElement &&
+            argumentRef.current?.contains(document.activeElement)
+          );
+          if (!stayingInArgs) {
+            onArgumentsBlur();
+          }
+        }, 0);
+        return;
+      }
+
+      const argsGrid = evt.currentTarget.closest('[role="grid"]');
+      const related = evt.relatedTarget;
+      const stayingInArgs = Boolean(
+        argsGrid && related instanceof globalThis.Node && argsGrid.contains(related)
+      );
+      if (!stayingInArgs) {
+        onArgumentsBlur();
+      }
+    },
+    [argumentRef, onArgumentsBlur]
+  );
+
+  const onKeyDownCapture = useCallback(
+    (evt: React.KeyboardEvent<HTMLInputElement>) => {
+      // At start and pressing left arrow, focus the previous full token
+      if (
+        evt.currentTarget.selectionStart === 0 &&
+        evt.currentTarget.selectionEnd === 0 &&
+        evt.key === 'ArrowLeft'
+      ) {
+        if (hasPrevArgument) {
+          focusTarget(
+            argumentsListState,
+            argumentsListState.collection.getKeyBefore(argumentItem.key)
+          );
+        } else {
+          focusTarget(
+            functionListState,
+            functionListState.collection.getKeyBefore(functionItem.key)
+          );
+        }
+        return;
+      }
+
+      // At end and pressing right arrow, focus the next full token
+      if (
+        evt.currentTarget.selectionStart === evt.currentTarget.value.length &&
+        evt.currentTarget.selectionEnd === evt.currentTarget.value.length &&
+        evt.key === 'ArrowRight'
+      ) {
+        if (hasNextArgument) {
+          focusTarget(
+            argumentsListState,
+            argumentsListState.collection.getKeyAfter(argumentItem.key)
+          );
+        } else {
+          focusTarget(
+            functionListState,
+            functionListState.collection.getKeyAfter(functionItem.key)
+          );
+        }
+      }
+    },
+    [
+      hasPrevArgument,
+      argumentsListState,
+      argumentItem.key,
+      functionListState,
+      functionItem.key,
+      hasNextArgument,
+    ]
+  );
+
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      const selectionStart = evt.currentTarget.selectionStart ?? 0;
+      const selectionEnd = evt.currentTarget.selectionEnd ?? 0;
+      const valueLength = evt.currentTarget.value.length;
+      const isAtStart = selectionStart === 0 && selectionEnd === 0;
+      const isAtEnd = selectionStart === valueLength && selectionEnd === valueLength;
+      const isAllSelected =
+        valueLength > 0 && selectionStart === 0 && selectionEnd === valueLength;
+
+      // At start / fully selected and pressing backspace, delete this token.
+      // Navigating in from the previous token leaves the caret at 0 while the
+      // combobox still shows the committed argument, so "at start" must count.
+      if (evt.key === 'Backspace' && (isAtStart || isAllSelected)) {
+        evt.preventDefault();
+        skipBlurFlushRef.current = true;
+        const itemKey = functionListState.collection.getKeyBefore(functionItem.key);
+        dispatch({
+          type: 'DELETE_TOKEN',
+          token: functionToken,
+          focusOverride: defined(itemKey) ? {itemKey} : undefined,
+        });
+        return;
+      }
+
+      // At either end / fully selected and pressing delete, delete this token.
+      if (evt.key === 'Delete' && (isAtEnd || isAtStart || isAllSelected)) {
+        evt.preventDefault();
+        skipBlurFlushRef.current = true;
+        const itemKey = functionListState.collection.getKeyBefore(functionItem.key);
+        dispatch({
+          type: 'DELETE_TOKEN',
+          token: functionToken,
+          focusOverride: defined(itemKey) ? {itemKey} : undefined,
+        });
+      }
+    },
+    [dispatch, functionToken, functionListState, functionItem]
+  );
+
+  const dataTestId =
+    functionListState.collection.getLastKey() === functionItem.key
+      ? 'arithmetic-builder-argument-input'
+      : undefined;
+
+  const focusArgument = useCallback(() => {
+    focusTarget(argumentsListState, argumentItem.key);
+  }, [argumentItem.key, argumentsListState]);
+
+  const focusNextArgument = useCallback(() => {
+    focusTarget(
+      argumentsListState,
+      argumentsListState.collection.getKeyAfter(argumentItem.key)
+    );
+  }, [argumentItem.key, argumentsListState]);
+
+  const commitFunctionToken = useCallback(
+    (value: string) => {
+      skipBlurFlushRef.current = true;
+      dispatch({
+        text: `${functionToken.function}(${updateAttrsWith(value)})`,
+        type: 'REPLACE_TOKEN',
+        token: functionToken,
+        focusOverride: {
+          itemKey: nextTokenKeyOfKind(
+            functionListState,
+            functionToken,
+            TokenKind.FREE_TEXT
+          ),
+        },
+      });
+    },
+    [dispatch, functionListState, functionToken, updateAttrsWith]
+  );
+
+  return {
+    commitFunctionToken,
+    dataTestId,
+    flushArgumentsIfLeavingGrid,
+    focusArgument,
+    focusNextArgument,
+    gridCellProps,
+    gridCellRef,
+    hasNextArgument,
+    inputRef,
+    isFocused,
+    onKeyDown,
+    onKeyDownCapture,
+    rowProps,
+    shouldCloseOnInteractOutside,
+  };
+}
+
+export const ArgumentGridRow = styled('div')`
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 100%;
+  flex: 0 1 auto;
+  max-width: fit-content;
+`;
+
+export const ArgumentGridCell = styled('div')`
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  > div input {
+    max-width: 130px !important;
+    min-width: 0 !important;
+    white-space: nowrap !important;
+  }
+
+  /* The expandable equation/filter field sets data-expanded while focused. Lift
+     the cap so long arguments are fully readable; stay truncated when collapsed. */
+  [data-expanded='true'] & > div input {
+    max-width: none !important;
+  }
+`;
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
index 75dccdc48967..b72e58d7af6d 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
@@ -32,6 +32,24 @@ function SearchBarStub({
   );
 }
 
+function EquationBuilderStub({
+  children,
+  ...inputProps
+}: {
+  children?: React.ReactNode;
+} & React.ComponentProps<'input'>) {
+  return (
+    <ExpandableFilterSearchBar>
+      <div data-test-id="arithmetic-builder">
+        <div role="row" tabIndex={-1}>
+          <input data-test-id="arithmetic-builder-input" {...inputProps} />
+        </div>
+        {children}
+      </div>
+    </ExpandableFilterSearchBar>
+  );
+}
+
 function isExpanded(input: HTMLElement) {
   return Boolean(input.closest('[data-expanded="true"]'));
 }
@@ -48,6 +66,20 @@ describe('ExpandableFilterSearchBar', () => {
     expect(input).toHaveProperty('selectionStart', 'span.op:db'.length);
   });
 
+  it('expands the equation builder and puts the caret at the end of the query', async () => {
+    render(<EquationBuilderStub defaultValue="avg_if(span.duration,span.op,db)" />);
+
+    const input = screen.getByTestId('arithmetic-builder-input');
+    await userEvent.click(input);
+
+    expect(isExpanded(input)).toBe(true);
+    expect(input).toHaveFocus();
+    expect(input).toHaveProperty(
+      'selectionStart',
+      'avg_if(span.duration,span.op,db)'.length
+    );
+  });
+
   it('collapses on Enter when no suggestion menu is open', async () => {
     render(<SearchBarStub defaultValue="" />);
 
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
index e221c52e2e8a..268f1bf52837 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
@@ -11,6 +11,10 @@ const PAGE_EDGE_PADDING_PX = 16;
  */
 const MENU_TARGETS = '[data-overlay], [role="listbox"], [role="option"]';
 const CONTROL_TARGETS = 'input, textarea, button, a, [role="button"]';
+const TRAILING_INPUT_SELECTOR =
+  '[data-test-id="query-builder-input"], [data-test-id="arithmetic-builder-input"]';
+const FIELD_SELECTOR =
+  '[data-test-id="search-query-builder"], [data-test-id="arithmetic-builder"]';
 
 function closestMatch(target: EventTarget | null, selector: string) {
   return target instanceof Element ? target.closest(selector) : null;
@@ -23,8 +27,9 @@ function focusInputAtEnd(input: HTMLInputElement) {
 }
 
 /**
- * Grows a series filter bar to the remaining window width while focused so a long query
- * has room to be read and edited, then collapses it back into the toolbar column.
+ * Grows a series filter bar or equation builder to the remaining window width while
+ * focused so a long query has room to be read and edited, then collapses it back into
+ * the toolbar column.
  */
 export function ExpandableFilterSearchBar({children}: {children: ReactNode}) {
   const ref = useRef<HTMLDivElement>(null);
@@ -74,9 +79,7 @@ export function ExpandableFilterSearchBar({children}: {children: ReactNode}) {
   }, [collapseToDefaultWidth, isSuggestionMenuOpen]);
 
   const focusTrailingInput = useCallback(() => {
-    const input = ref.current?.querySelector<HTMLInputElement>(
-      '[data-test-id="query-builder-input"]'
-    );
+    const input = ref.current?.querySelector<HTMLInputElement>(TRAILING_INPUT_SELECTOR);
     if (!input) {
       return;
     }
@@ -160,7 +163,7 @@ const ExpandableFilterSearchBarWrapper = styled('div')`
   overflow: hidden;
   transition: width ${p => p.theme.motion.smooth.moderate};
 
-  [data-test-id='search-query-builder'] {
+  ${FIELD_SELECTOR} {
     max-width: 100%;
     resize: none;
   }
@@ -173,11 +176,12 @@ const ExpandableFilterSearchBarWrapper = styled('div')`
   &[data-expanded='true'],
   &:focus-within {
     overflow: visible;
+    flex-shrink: 0;
     /* Above Explore chart content, below CompactSelect overlays (dropdown) and
      * AttributeDetails (tooltip) so argument menus/tooltips stay usable. */
     z-index: ${p => p.theme.zIndex.header};
 
-    [data-test-id='search-query-builder'] {
+    ${FIELD_SELECTOR} {
       background-color: ${p => p.theme.tokens.background.primary};
     }
   }
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
index f15ec7b74b9f..43433592bc89 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
@@ -3,15 +3,17 @@ import {useSortable} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
 
 import {Button} from '@sentry/scraps/button';
-import {Flex} from '@sentry/scraps/layout';
+import {Stack} from '@sentry/scraps/layout';
 
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
 import {DragReorderButton} from 'sentry/components/dnd/dragReorderButton';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {EQUATION_PREFIX, stripEquationPrefix} from 'sentry/utils/discover/fields';
+import {useOrganization} from 'sentry/utils/useOrganization';
 import {ExploreEquationArithmeticBuilder} from 'sentry/views/explore/components/exploreEquationArithmeticBuilder';
 import {ToolbarRow} from 'sentry/views/explore/components/toolbar/styles';
+import {ExpandableFilterSearchBar} from 'sentry/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar';
 import {useSpanItemAttributes} from 'sentry/views/explore/hooks/useTraceItemAttributes';
 import {Visualize} from 'sentry/views/explore/queryParams/visualize';
 import {TraceItemDataset} from 'sentry/views/explore/types';
@@ -52,6 +54,22 @@ export function VisualizeEquation({
     transition: null,
   });
 
+  const organization = useOrganization();
+  const hasConditionalAggregates = organization.features.includes(
+    'explore-conditional-aggregates'
+  );
+
+  const equationBuilder = (
+    <ExploreEquationArithmeticBuilder
+      expression={expression}
+      setExpression={handleExpressionChange}
+      traceItemType={TraceItemDataset.SPANS}
+      numberTags={numberTags}
+      stringTags={stringTags}
+      booleanTags={booleanTags}
+    />
+  );
+
   return (
     <ToolbarRow
       ref={setNodeRef}
@@ -62,16 +80,13 @@ export function VisualizeEquation({
         <DragReorderButton iconSize="sm" {...listeners} />
       )}
       {label}
-      <Flex flex={1}>
-        <ExploreEquationArithmeticBuilder
-          expression={expression}
-          setExpression={handleExpressionChange}
-          traceItemType={TraceItemDataset.SPANS}
-          numberTags={numberTags}
-          stringTags={stringTags}
-          booleanTags={booleanTags}
-        />
-      </Flex>
+      <Stack flex="1" minWidth="0" overflow="visible">
+        {hasConditionalAggregates ? (
+          <ExpandableFilterSearchBar>{equationBuilder}</ExpandableFilterSearchBar>
+        ) : (
+          equationBuilder
+        )}
+      </Stack>
       {onDelete && (
         <Button
           variant="transparent"
diff --git a/static/app/views/explore/toolbar/index.spec.tsx b/static/app/views/explore/toolbar/index.spec.tsx
index 17dd4a374b10..e0018361b0e6 100644
--- a/static/app/views/explore/toolbar/index.spec.tsx
+++ b/static/app/views/explore/toolbar/index.spec.tsx
@@ -1152,6 +1152,34 @@ describe('ExploreToolbar', () => {
         expect(visualizeYAxesFromRouter(router)).toEqual(['avg(span.duration)']);
       });
     });
+
+    it('expands the equation editor on click', async () => {
+      render(<ExploreToolbar extras={['equations']} />, {
+        additionalWrapper: Wrapper,
+        organization: organizationWithConditionalAggregates,
+      });
+
+      await userEvent.click(screen.getByRole('button', {name: 'Add Equation'}));
+
+      const input = await screen.findByTestId('arithmetic-builder-input');
+      await userEvent.click(input);
+
+      expect(input.closest('[data-expanded="true"]')).toBeTruthy();
+    });
+
+    it('does not expand the equation editor without the feature', async () => {
+      render(<ExploreToolbar extras={['equations']} />, {
+        additionalWrapper: Wrapper,
+        organization,
+      });
+
+      await userEvent.click(screen.getByRole('button', {name: 'Add Equation'}));
+
+      const input = await screen.findByTestId('arithmetic-builder-input');
+      await userEvent.click(input);
+
+      expect(input.closest('[data-expanded="true"]')).toBeNull();
+    });
   });
 
   it('disables compare queries when only one chart is available', async () => {

From a4eb308a00cdc398c7a509143eb5e9448d92729e Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Tue, 1 Sep 2026 14:18:26 -0400
Subject: [PATCH 07/14] fix(explore): Fix equation filter blur flush and
 select-all delete

Clear skipBlurFlush on the next focus so later edits still commit, and only delete a function token when the caret is collapsed. Drop unused re-exports and align getFieldDefinition types.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilterAutocomplete.spec.tsx    |  8 +++---
 .../components/arithmeticBuilder/index.tsx    |  5 +++-
 .../token/conditionalFilterInput.tsx          |  4 ++-
 .../arithmeticBuilder/token/function.tsx      |  7 +++--
 .../arithmeticBuilder/token/index.spec.tsx    | 26 +++++++++++++++++
 .../token/useFunctionArgumentInput.tsx        | 28 +++++++++++--------
 .../hooks/useExploreEquationBuilderConfig.ts  |  5 +++-
 .../utils/conditionalAggregate.spec.tsx       |  6 ++--
 .../explore/utils/conditionalAggregate.tsx    |  5 ----
 9 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
index 176c71be8cb6..c1a7f76c95c6 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
@@ -83,14 +83,14 @@ describe('useConditionalFilterAutocomplete', () => {
 
   it('does not show previous key values while debounce catches up to a new key', async () => {
     jest.useFakeTimers();
-    const getFilterTagValues = jest.fn(async ({tag}) => {
+    const getFilterTagValues = jest.fn(({tag}) => {
       if (tag.key === 'span.op') {
-        return [{value: 'db'}];
+        return Promise.resolve([{value: 'db'}]);
       }
       if (tag.key === 'span.description') {
-        return [{value: 'SELECT 1'}];
+        return Promise.resolve([{value: 'SELECT 1'}]);
       }
-      return [];
+      return Promise.resolve([]);
     });
 
     try {
diff --git a/static/app/components/arithmeticBuilder/index.tsx b/static/app/components/arithmeticBuilder/index.tsx
index 7985b8aaf638..6ee5b228445f 100644
--- a/static/app/components/arithmeticBuilder/index.tsx
+++ b/static/app/components/arithmeticBuilder/index.tsx
@@ -18,7 +18,10 @@ interface ArithmeticBuilderProps {
   aggregations: string[];
   expression: string;
   functionArguments: FunctionArgument[];
-  getFieldDefinition: (key: string) => FieldDefinition | null;
+  getFieldDefinition: (
+    key: string,
+    attributeTexts?: readonly string[]
+  ) => FieldDefinition | null;
   className?: string;
   'data-test-id'?: string;
   disabled?: boolean;
diff --git a/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx b/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
index 0d0826fae8cd..57dc72434db0 100644
--- a/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
+++ b/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
@@ -25,6 +25,7 @@ import {t} from 'sentry/locale';
 export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps) {
   const {argument, argumentIndex, onArgumentsChange} = props;
   const {
+    clearSkipBlurFlush,
     commitFunctionToken,
     dataTestId,
     flushArgumentsIfLeavingGrid,
@@ -120,12 +121,13 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
   const onInputFocus = useCallback(
     (evt: FocusEvent<HTMLInputElement>) => {
       evt.stopPropagation();
+      clearSkipBlurFlush();
       focusArgument();
       setIsCurrentlyEditing(true);
       setInputValue(currentValue);
       updateSelectionIndex(evt.currentTarget);
     },
-    [currentValue, focusArgument, updateSelectionIndex]
+    [clearSkipBlurFlush, currentValue, focusArgument, updateSelectionIndex]
   );
 
   // Persist free-text filter edits on blur. Empty input becomes `` so clearing the filter
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index 7411e83c6a17..92bba16a185b 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -327,6 +327,7 @@ function InternalInput(props: FunctionArgumentInputProps) {
 function FunctionArgumentInput(props: FunctionArgumentInputProps) {
   const {argument, argumentIndex, functionToken, onArgumentsChange} = props;
   const {
+    clearSkipBlurFlush,
     commitFunctionToken,
     dataTestId,
     flushArgumentsIfLeavingGrid,
@@ -538,6 +539,7 @@ function FunctionArgumentInput(props: FunctionArgumentInputProps) {
       // We're stopping propagation because `useGridListItem` in the parent component
       // always steals and sets focus to the first child and we don't want that happening.
       evt.stopPropagation();
+      clearSkipBlurFlush();
       // Explicitly focus target on this item because we're calling evt.stopPropagation().
       // If this isn't called, the argument collection doesn't shift focus to current arg
       // causing bugs. Test for this behaviour can be found in
@@ -546,7 +548,7 @@ function FunctionArgumentInput(props: FunctionArgumentInputProps) {
       setIsCurrentlyEditing(true);
       resetInputValue();
     },
-    [focusArgument, resetInputValue]
+    [clearSkipBlurFlush, focusArgument, resetInputValue]
   );
 
   // Free-text value args should keep their current text on focus so the user can edit it.
@@ -554,11 +556,12 @@ function FunctionArgumentInput(props: FunctionArgumentInputProps) {
   const onTextInputFocus = useCallback(
     (evt: FocusEvent<HTMLInputElement>) => {
       evt.stopPropagation();
+      clearSkipBlurFlush();
       focusArgument();
       setIsCurrentlyEditing(true);
       setInputValue(currentValue);
     },
-    [currentValue, focusArgument]
+    [clearSkipBlurFlush, currentValue, focusArgument]
   );
 
   const onOptionSelected = useCallback(
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 37edeca7a5c8..986812bbf597 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -1357,6 +1357,32 @@ describe('token', () => {
       });
     });
 
+    it('does not delete the function when Backspace clears a selected filter', async () => {
+      const dispatch = jest.fn();
+      render(
+        <Tokens expression="avg_if(`span.op:db`,span.duration)" dispatch={dispatch} />
+      );
+
+      const filterArg = within(
+        await screen.findByRole('grid', {name: 'Enter arguments'})
+      ).getByRole('combobox', {name: 'Add a filter'});
+
+      await userEvent.click(filterArg);
+      await waitFor(() => {
+        expect(filterArg).toHaveValue('span.op:db');
+      });
+      const filterInput = filterArg as HTMLInputElement;
+      filterInput.setSelectionRange(0, filterInput.value.length);
+      await userEvent.keyboard('{Backspace}');
+
+      expect(
+        screen.getByRole('row', {name: 'avg_if(`span.op:db`,span.duration)'})
+      ).toBeInTheDocument();
+      expect(dispatch).not.toHaveBeenCalledWith(
+        expect.objectContaining({type: 'DELETE_TOKEN'})
+      );
+    });
+
     it('does not rewrite the function when moving from filter to another argument', async () => {
       const dispatch = jest.fn();
       render(<Tokens expression="avg_if(``,span.duration)" dispatch={dispatch} />);
diff --git a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
index 92535192028a..962ac62b4b46 100644
--- a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
+++ b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
@@ -72,10 +72,14 @@ export function useFunctionArgumentInput({
     [argumentIndex, functionArguments]
   );
 
+  const clearSkipBlurFlush = useCallback(() => {
+    skipBlurFlushRef.current = false;
+  }, []);
+
   const flushArgumentsIfLeavingGrid = useCallback(
     (evt?: FocusEvent<HTMLInputElement>) => {
-      // Leave the flag set: a later interact-outside `onInputBlur()` schedules a
-      // timeout that would otherwise restore the token after DELETE/REPLACE.
+      // Stay skipped until the next focus: a later interact-outside `onInputBlur()`
+      // timeout would otherwise restore the token after DELETE/REPLACE.
       if (skipBlurFlushRef.current) {
         return;
       }
@@ -164,15 +168,14 @@ export function useFunctionArgumentInput({
       const selectionStart = evt.currentTarget.selectionStart ?? 0;
       const selectionEnd = evt.currentTarget.selectionEnd ?? 0;
       const valueLength = evt.currentTarget.value.length;
-      const isAtStart = selectionStart === 0 && selectionEnd === 0;
-      const isAtEnd = selectionStart === valueLength && selectionEnd === valueLength;
-      const isAllSelected =
-        valueLength > 0 && selectionStart === 0 && selectionEnd === valueLength;
+      const isCollapsedAtStart = selectionStart === 0 && selectionEnd === 0;
+      const isCollapsedAtEnd =
+        selectionStart === valueLength && selectionEnd === valueLength;
 
-      // At start / fully selected and pressing backspace, delete this token.
-      // Navigating in from the previous token leaves the caret at 0 while the
-      // combobox still shows the committed argument, so "at start" must count.
-      if (evt.key === 'Backspace' && (isAtStart || isAllSelected)) {
+      // Collapsed caret at start + Backspace deletes the function. A full
+      // selection must not — filter/value args keep their text on focus, so
+      // select-all then Backspace should edit the argument.
+      if (evt.key === 'Backspace' && isCollapsedAtStart) {
         evt.preventDefault();
         skipBlurFlushRef.current = true;
         const itemKey = functionListState.collection.getKeyBefore(functionItem.key);
@@ -184,8 +187,8 @@ export function useFunctionArgumentInput({
         return;
       }
 
-      // At either end / fully selected and pressing delete, delete this token.
-      if (evt.key === 'Delete' && (isAtEnd || isAtStart || isAllSelected)) {
+      // Collapsed caret at end + Delete deletes the function.
+      if (evt.key === 'Delete' && isCollapsedAtEnd) {
         evt.preventDefault();
         skipBlurFlushRef.current = true;
         const itemKey = functionListState.collection.getKeyBefore(functionItem.key);
@@ -235,6 +238,7 @@ export function useFunctionArgumentInput({
   );
 
   return {
+    clearSkipBlurFlush,
     commitFunctionToken,
     dataTestId,
     flushArgumentsIfLeavingGrid,
diff --git a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
index 9802cc27d1ec..5763fd21d82b 100644
--- a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
+++ b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
@@ -48,7 +48,10 @@ interface UseExploreEquationBuilderConfigOptions {
 interface ExploreEquationBuilderConfig {
   aggregations: string[];
   functionArguments: FunctionArgument[];
-  getFieldDefinition: (key: string) => FieldDefinition | null;
+  getFieldDefinition: (
+    key: string,
+    attributeTexts?: readonly string[]
+  ) => FieldDefinition | null;
   getFilterTagValues: GetTagValues;
   getSuggestedKey: (key: string) => string | null;
 }
diff --git a/static/app/views/explore/utils/conditionalAggregate.spec.tsx b/static/app/views/explore/utils/conditionalAggregate.spec.tsx
index f61ab5061f37..f2d1523a10bc 100644
--- a/static/app/views/explore/utils/conditionalAggregate.spec.tsx
+++ b/static/app/views/explore/utils/conditionalAggregate.spec.tsx
@@ -1,3 +1,7 @@
+import {
+  ensureSearchFilterArgument,
+  escapeConditionalFilter,
+} from 'sentry/components/arithmeticBuilder/conditionalFilter';
 import {
   VisualizeEquation,
   VisualizeFunction,
@@ -7,8 +11,6 @@ import {
   areAllVisualizesInvalidConditionalFilters,
   areConditionalAggregateFiltersInExpressionValid,
   buildConditionalAggregate,
-  ensureSearchFilterArgument,
-  escapeConditionalFilter,
   getConditionalFilterInvalidSeriesMessage,
   getConditionalFilterInvalidSeriesMessageForYAxis,
   isConditionalAggregateFilterValid,
diff --git a/static/app/views/explore/utils/conditionalAggregate.tsx b/static/app/views/explore/utils/conditionalAggregate.tsx
index fb4004c9d4d4..5745ab6901f5 100644
--- a/static/app/views/explore/utils/conditionalAggregate.tsx
+++ b/static/app/views/explore/utils/conditionalAggregate.tsx
@@ -83,11 +83,6 @@ const VISUALIZE_AGGREGATE_KEY_PATTERN = new RegExp(
 
 export type ConditionalAggregate = ParsedFunction;
 
-export {
-  ensureSearchFilterArgument,
-  escapeConditionalFilter,
-} from 'sentry/components/arithmeticBuilder/conditionalFilter';
-
 /**
  * Split a visualize yAxis into its base aggregate and its `_if` filter.
  *

From 0cd1201fcc8bbf3cee6949133bdc7c05621ebc7a Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Tue, 8 Sep 2026 15:19:13 -0400
Subject: [PATCH 08/14] fix(explore): Polish equation _if editor UX and paren
 autocomplete

Keep filter suggestions working inside grouping parentheses, dismiss the
expandable equation on Enter unless a suggestion is highlighted, colocate
conditional-filter helpers, and align equation field height with the
aggregate filter.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilter.spec.ts                 | 63 +++++++++++++--
 .../conditionalFilter.ts                      | 81 ++++++++++++++-----
 .../conditionalFilterAutocomplete.spec.tsx    | 19 ++++-
 .../conditionalFilterAutocomplete.tsx         |  2 +-
 .../conditionalFilterInput.tsx                |  4 +-
 .../conditionalFilter/index.ts                |  7 ++
 .../components/arithmeticBuilder/context.tsx  |  6 ++
 .../components/arithmeticBuilder/index.tsx    | 13 ++-
 .../arithmeticBuilder/token/freeText.tsx      | 18 +++--
 .../arithmeticBuilder/token/function.tsx      | 66 +++++++++------
 .../arithmeticBuilder/token/grid.tsx          | 10 ++-
 .../arithmeticBuilder/token/index.spec.tsx    | 24 +++++-
 .../arithmeticBuilder/token/styles.tsx        |  3 -
 .../token/useFunctionArgumentInput.tsx        | 45 ++++++-----
 .../tokenizedInput/token/comboBox.tsx         | 26 ++----
 .../tokenizedInput/token/inputBox.tsx         | 24 +-----
 .../tokenizedInput/token/unstyledInput.tsx    | 22 +++++
 .../exploreEquationArithmeticBuilder.tsx      |  2 +
 .../expandableFilterSearchBar.spec.tsx        | 58 ++++++++++++-
 .../expandableFilterSearchBar.tsx             | 75 ++++++++++++++---
 .../toolbarVisualize/visualizeEquation.tsx    |  6 +-
 .../hooks/useExploreEquationBuilderConfig.ts  |  6 +-
 22 files changed, 434 insertions(+), 146 deletions(-)
 rename static/app/components/arithmeticBuilder/{ => conditionalFilter}/conditionalFilter.spec.ts (76%)
 rename static/app/components/arithmeticBuilder/{ => conditionalFilter}/conditionalFilter.ts (75%)
 rename static/app/components/arithmeticBuilder/{ => conditionalFilter}/conditionalFilterAutocomplete.spec.tsx (88%)
 rename static/app/components/arithmeticBuilder/{ => conditionalFilter}/conditionalFilterAutocomplete.tsx (98%)
 rename static/app/components/arithmeticBuilder/{token => conditionalFilter}/conditionalFilterInput.tsx (98%)
 create mode 100644 static/app/components/arithmeticBuilder/conditionalFilter/index.ts
 create mode 100644 static/app/components/tokenizedInput/token/unstyledInput.tsx

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
similarity index 76%
rename from static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
rename to static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
index 37b4d1582666..eb831a0ae51e 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter.spec.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
@@ -1,9 +1,8 @@
 import {
   formatConditionalFilterClause,
-  formatConditionalFilterTagValue,
   getConditionalFilterEditContext,
   replaceConditionalFilterClause,
-} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+} from 'sentry/components/arithmeticBuilder/conditionalFilter/conditionalFilter';
 
 describe('getConditionalFilterEditContext', () => {
   it('treats the full string as one clause when there are no boolean operators', () => {
@@ -146,6 +145,44 @@ describe('getConditionalFilterEditContext', () => {
       editText: '',
     });
   });
+
+  it('shows an empty key query right after an open parenthesis', () => {
+    expect(getConditionalFilterEditContext('(', 1)).toMatchObject({
+      phase: 'key',
+      editText: '',
+      replaceStart: 1,
+      replaceEnd: 1,
+    });
+  });
+
+  it('keeps key mode when typing after an open parenthesis', () => {
+    expect(getConditionalFilterEditContext('(span', 5)).toMatchObject({
+      phase: 'key',
+      editText: 'span',
+      replaceStart: 1,
+      replaceEnd: 5,
+    });
+  });
+
+  it('keeps value mode for a key typed after an open parenthesis', () => {
+    expect(getConditionalFilterEditContext('(span.op:', 9)).toMatchObject({
+      phase: 'value',
+      filterKey: 'span.op',
+      editText: '',
+      replaceStart: 1,
+      replaceEnd: 9,
+    });
+  });
+
+  it('ignores a trailing close parenthesis when reading the filter key', () => {
+    const value = '(span.op:db)';
+    expect(getConditionalFilterEditContext(value, value.length - 1)).toMatchObject({
+      phase: 'value',
+      filterKey: 'span.op',
+      editText: 'db',
+      valueQuery: 'db',
+    });
+  });
 });
 
 describe('replaceConditionalFilterClause', () => {
@@ -164,22 +201,36 @@ describe('replaceConditionalFilterClause', () => {
       newValue: 'organization.slug:sentry span.op:',
     });
   });
+
+  it('preserves a leading parenthesis when selecting a key suggestion', () => {
+    expect(replaceConditionalFilterClause('(', 1, 'span.op:')).toEqual({
+      newCursorIndex: 9,
+      newValue: '(span.op:',
+    });
+  });
+
+  it('preserves grouping parentheses when selecting a value suggestion', () => {
+    expect(replaceConditionalFilterClause('(span.op:)', 9, 'span.op:db')).toEqual({
+      newCursorIndex: 11,
+      newValue: '(span.op:db)',
+    });
+  });
 });
 
-describe('formatConditionalFilterTagValue', () => {
+describe('formatConditionalFilterClause', () => {
   it('quotes values that contain spaces', () => {
-    expect(formatConditionalFilterTagValue('hello there')).toBe('"hello there"');
     expect(formatConditionalFilterClause('organization.slug', 'hello there')).toBe(
       'organization.slug:"hello there"'
     );
   });
 
   it('leaves simple values unquoted', () => {
-    expect(formatConditionalFilterTagValue('sentry')).toBe('sentry');
+    expect(formatConditionalFilterClause('organization.slug', 'sentry')).toBe(
+      'organization.slug:sentry'
+    );
   });
 
   it('preserves bracketed list syntax', () => {
-    expect(formatConditionalFilterTagValue('[value1, value2]')).toBe('[value1, value2]');
     expect(formatConditionalFilterClause('span.op', '[db, http]')).toBe(
       'span.op:[db, http]'
     );
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter.ts b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
similarity index 75%
rename from static/app/components/arithmeticBuilder/conditionalFilter.ts
rename to static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
index 7c54691a19f8..d5d1bb8b1980 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
@@ -44,7 +44,7 @@ const BRACKETED_LIST_VALUE_RE = /^\[[^\]]*\]$/;
 /**
  * Quote a tag value when it contains spaces or other special search characters.
  */
-export function formatConditionalFilterTagValue(value: string): string {
+function formatConditionalFilterTagValue(value: string): string {
   if (value === '') {
     return '""';
   }
@@ -206,6 +206,34 @@ export type ConditionalFilterEditContext = {
   valueQuery?: string;
 };
 
+/**
+ * Grouping `(` / `)` around a clause (e.g. `(span.op:db)`) must not be treated as part
+ * of the filter key or value, or autocomplete filters itself to nothing after `(`.
+ */
+function getClauseInnerBounds(clause: string): {innerEnd: number; innerStart: number} {
+  let innerStart = 0;
+  let innerEnd = clause.length;
+
+  while (innerStart < innerEnd && clause[innerStart] === '(') {
+    innerStart++;
+    while (innerStart < innerEnd && clause[innerStart] === ' ') {
+      innerStart++;
+    }
+  }
+
+  const innerSoFar = clause.slice(innerStart, innerEnd);
+  if (!hasUnclosedQuote(innerSoFar)) {
+    while (innerEnd > innerStart && clause[innerEnd - 1] === ')') {
+      innerEnd--;
+      while (innerEnd > innerStart && clause[innerEnd - 1] === ' ') {
+        innerEnd--;
+      }
+    }
+  }
+
+  return {innerStart, innerEnd};
+}
+
 /**
  * Decide whether the cursor is editing a filter key or value, and which substring
  * a suggestion should replace.
@@ -217,6 +245,9 @@ export type ConditionalFilterEditContext = {
  *
  * Once a value is complete (`key:value `, or `key:"quoted"`), subsequent text is a
  * new key and key autocomplete is shown.
+ *
+ * Leading/trailing grouping parentheses are preserved outside the replace range so
+ * suggestions still work inside `(...)`.
  */
 export function getConditionalFilterEditContext(
   value: string,
@@ -225,19 +256,31 @@ export function getConditionalFilterEditContext(
   const {clause, clauseStart, clauseEnd, clauseCursorIndex} =
     getConditionalFilterClauseAtCursor(value, cursorIndex);
 
-  const colonIndex = clause.indexOf(':');
-  if (colonIndex === -1 || clauseCursorIndex <= colonIndex) {
+  const {innerStart, innerEnd} = getClauseInnerBounds(clause);
+  const inner = clause.slice(innerStart, innerEnd);
+  const innerCursorIndex = Math.max(
+    0,
+    Math.min(clauseCursorIndex, clause.length) - innerStart
+  );
+  const clampedInnerCursor = Math.max(0, Math.min(innerCursorIndex, inner.length));
+  const absoluteInnerStart = clauseStart + innerStart;
+  // Keep trailing grouping `)` outside replacements; leading `(` stay before replaceStart.
+  const absoluteInnerEnd = clauseStart + innerEnd;
+  const absoluteClauseEnd = clauseEnd;
+
+  const colonIndex = inner.indexOf(':');
+  if (colonIndex === -1 || clampedInnerCursor <= colonIndex) {
     return {
       phase: 'key',
-      editText: clause.slice(0, clauseCursorIndex).trim(),
-      replaceStart: clauseStart,
-      replaceEnd: clauseEnd,
+      editText: inner.slice(0, clampedInnerCursor).trim(),
+      replaceStart: absoluteInnerStart,
+      replaceEnd: absoluteInnerEnd,
     };
   }
 
-  const filterKey = clause.slice(0, colonIndex).trim();
-  const valuePart = clause.slice(colonIndex + 1);
-  const cursorInValue = Math.max(0, clauseCursorIndex - (colonIndex + 1));
+  const filterKey = inner.slice(0, colonIndex).trim();
+  const valuePart = inner.slice(colonIndex + 1);
+  const cursorInValue = Math.max(0, clampedInnerCursor - (colonIndex + 1));
   const beforeCursor = valuePart.slice(0, cursorInValue);
 
   // Unclosed quotes → keep editing the value (including spaces inside the quote).
@@ -247,8 +290,8 @@ export function getConditionalFilterEditContext(
       editText: beforeCursor,
       filterKey,
       valueQuery: stripQuotesForValueSearch(beforeCursor),
-      replaceStart: clauseStart,
-      replaceEnd: clauseEnd,
+      replaceStart: absoluteInnerStart,
+      replaceEnd: absoluteInnerEnd,
     };
   }
 
@@ -261,12 +304,12 @@ export function getConditionalFilterEditContext(
         0,
         beforeCursor.length - spaces.length - nextKey.length
       );
-      const keyStartInClause = colonIndex + 1 + quotedValue.length + spaces.length;
+      const keyStartInInner = colonIndex + 1 + quotedValue.length + spaces.length;
       return {
         phase: 'key',
         editText: nextKey,
-        replaceStart: clauseStart + keyStartInClause,
-        replaceEnd: clauseEnd,
+        replaceStart: absoluteInnerStart + keyStartInInner,
+        replaceEnd: absoluteClauseEnd,
       };
     }
   }
@@ -275,12 +318,12 @@ export function getConditionalFilterEditContext(
   const unquotedMatch = beforeCursor.match(/^(\S+)(\s+)(.*)$/);
   if (unquotedMatch) {
     const [, completedValue, spaces, nextKey = ''] = unquotedMatch;
-    const keyStartInClause = colonIndex + 1 + completedValue!.length + spaces!.length;
+    const keyStartInInner = colonIndex + 1 + completedValue!.length + spaces!.length;
     return {
       phase: 'key',
       editText: nextKey,
-      replaceStart: clauseStart + keyStartInClause,
-      replaceEnd: clauseEnd,
+      replaceStart: absoluteInnerStart + keyStartInInner,
+      replaceEnd: absoluteClauseEnd,
     };
   }
 
@@ -290,8 +333,8 @@ export function getConditionalFilterEditContext(
     editText: beforeCursor,
     filterKey,
     valueQuery: beforeCursor,
-    replaceStart: clauseStart,
-    replaceEnd: clauseEnd,
+    replaceStart: absoluteInnerStart,
+    replaceEnd: absoluteInnerEnd,
   };
 }
 
diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete.spec.tsx
similarity index 88%
rename from static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
rename to static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete.spec.tsx
index c1a7f76c95c6..efdeb6ecef1f 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.spec.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete.spec.tsx
@@ -1,6 +1,6 @@
 import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
+import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import {FieldKind} from 'sentry/utils/fields';
 
@@ -59,6 +59,23 @@ describe('useConditionalFilterAutocomplete', () => {
     expect(getFilterTagValues).not.toHaveBeenCalled();
   });
 
+  it('shows key suggestions after an open parenthesis', () => {
+    const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
+
+    const {result} = renderHookWithProviders(() =>
+      useConditionalFilterAutocomplete({
+        enabled: true,
+        filterValue: '(',
+        functionArguments,
+        getFilterTagValues,
+        selectionIndex: 1,
+      })
+    );
+
+    expect(result.current.items.map(item => item.label)).toEqual(['span.op:']);
+    expect(getFilterTagValues).not.toHaveBeenCalled();
+  });
+
   it('shows value suggestions when the cursor is after the colon', async () => {
     const getFilterTagValues = jest.fn().mockResolvedValue([{value: 'db'}]);
 
diff --git a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete.tsx
similarity index 98%
rename from static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
rename to static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete.tsx
index 138f54b2618e..c4e0a15f48d7 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilterAutocomplete.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete.tsx
@@ -7,7 +7,7 @@ import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
 import {
   formatConditionalFilterClause,
   getConditionalFilterEditContext,
-} from 'sentry/components/arithmeticBuilder/conditionalFilter';
+} from 'sentry/components/arithmeticBuilder/conditionalFilter/conditionalFilter';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import type {GetTagValues} from 'sentry/components/searchQueryBuilder';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
diff --git a/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
similarity index 98%
rename from static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
rename to static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
index 57dc72434db0..7407bcff53e2 100644
--- a/static/app/components/arithmeticBuilder/token/conditionalFilterInput.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
@@ -9,8 +9,8 @@ import {
   isFilterKeySuggestion,
   replaceConditionalFilterClause,
   unwrapSearchFilterArgument,
-} from 'sentry/components/arithmeticBuilder/conditionalFilter';
-import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilterAutocomplete';
+} from 'sentry/components/arithmeticBuilder/conditionalFilter/conditionalFilter';
+import {useConditionalFilterAutocomplete} from 'sentry/components/arithmeticBuilder/conditionalFilter/conditionalFilterAutocomplete';
 import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
 import {
   ArgumentGridCell,
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/index.ts b/static/app/components/arithmeticBuilder/conditionalFilter/index.ts
new file mode 100644
index 000000000000..f1b6bb7b8fb7
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/index.ts
@@ -0,0 +1,7 @@
+export {
+  ensureSearchFilterArgument,
+  escapeConditionalFilter,
+  isSearchFilterParameter,
+  unwrapSearchFilterArgument,
+} from './conditionalFilter';
+export {ConditionalFilterArgumentInput} from './conditionalFilterInput';
diff --git a/static/app/components/arithmeticBuilder/context.tsx b/static/app/components/arithmeticBuilder/context.tsx
index ddd3acb9dca9..bf34b38cbff1 100644
--- a/static/app/components/arithmeticBuilder/context.tsx
+++ b/static/app/components/arithmeticBuilder/context.tsx
@@ -18,6 +18,11 @@ interface ArithmeticBuilderContextData {
     key: string,
     attributeTexts?: readonly string[]
   ) => FieldDefinition | null;
+  /**
+   * When true, `_if` combinators use the EAP filter-first editor. Mirrors
+   * `explore-conditional-aggregates`.
+   */
+  hasConditionalAggregates: boolean;
   /**
    * Fetches tag values for `_if` combinator filter arguments (e.g. after `span.op:`).
    */
@@ -32,6 +37,7 @@ export const ArithmeticBuilderContext = createContext<ArithmeticBuilderContextDa
   aggregations: [],
   functionArguments: [],
   getFieldDefinition: () => null,
+  hasConditionalAggregates: false,
 });
 
 export function useArithmeticBuilder() {
diff --git a/static/app/components/arithmeticBuilder/index.tsx b/static/app/components/arithmeticBuilder/index.tsx
index 6ee5b228445f..e9600fa66382 100644
--- a/static/app/components/arithmeticBuilder/index.tsx
+++ b/static/app/components/arithmeticBuilder/index.tsx
@@ -27,6 +27,7 @@ interface ArithmeticBuilderProps {
   disabled?: boolean;
   /**
    * Fetches tag values for `_if` combinator filter arguments in equations.
+   * Only used when `hasConditionalAggregates` is on.
    */
   getFilterTagValues?: GetTagValues;
   /**
@@ -36,6 +37,11 @@ interface ArithmeticBuilderProps {
    * to a known column.
    */
   getSuggestedKey?: (key: string) => string | null;
+  /**
+   * Enables the EAP filter-first `_if` argument editor. Should follow
+   * `explore-conditional-aggregates`.
+   */
+  hasConditionalAggregates?: boolean;
   /**
    * When provided, the arithmetic builder will use the references to suggest
    * keys for the user instead of aggregations and function arguments.
@@ -55,6 +61,7 @@ export function ArithmeticBuilder({
   getFieldDefinition,
   getFilterTagValues,
   getSuggestedKey,
+  hasConditionalAggregates = false,
   className,
   disabled,
   references,
@@ -82,8 +89,9 @@ export function ArithmeticBuilder({
       }),
       functionArguments,
       getFieldDefinition,
-      getFilterTagValues,
+      getFilterTagValues: hasConditionalAggregates ? getFilterTagValues : undefined,
       getSuggestedKey,
+      hasConditionalAggregates,
       references,
     };
   }, [
@@ -94,6 +102,7 @@ export function ArithmeticBuilder({
     getFieldDefinition,
     getFilterTagValues,
     getSuggestedKey,
+    hasConditionalAggregates,
     references,
   ]);
 
@@ -115,7 +124,7 @@ export function ArithmeticBuilder({
 }
 
 const Wrapper = styled(Input.withComponent('div'))<{state: 'valid' | 'invalid'}>`
-  min-height: 38px;
+  min-height: ${p => p.theme.form.md.minHeight};
   padding: 0;
   height: auto;
   width: 100%;
diff --git a/static/app/components/arithmeticBuilder/token/freeText.tsx b/static/app/components/arithmeticBuilder/token/freeText.tsx
index abee7c9c0c04..82ce9d6a4ac1 100644
--- a/static/app/components/arithmeticBuilder/token/freeText.tsx
+++ b/static/app/components/arithmeticBuilder/token/freeText.tsx
@@ -73,7 +73,12 @@ export function ArithmeticTokenFreeText({
       aria-invalid={false}
       collapsed={isCollapsed}
     >
-      <GridCell {...gridCellProps} onClick={stopPropagation} collapsed={isCollapsed}>
+      <GridCell
+        {...gridCellProps}
+        onClick={stopPropagation}
+        collapsed={isCollapsed}
+        showPlaceholder={showPlaceholder}
+      >
         <InternalInput
           showPlaceholder={showPlaceholder}
           nextAllowedTokenKinds={nextAllowedTokenKinds}
@@ -642,8 +647,8 @@ function stopPropagation(evt: MouseEvent<HTMLElement>) {
 }
 
 const GridCell = styled('div', {
-  shouldForwardProp: prop => prop !== 'collapsed',
-})<{collapsed?: boolean}>`
+  shouldForwardProp: prop => prop !== 'collapsed' && prop !== 'showPlaceholder',
+})<{collapsed?: boolean; showPlaceholder?: boolean}>`
   position: relative;
   display: flex;
   align-items: stretch;
@@ -651,8 +656,11 @@ const GridCell = styled('div', {
   width: 100%;
 
   input {
-    padding: 0 ${p => (p.collapsed ? 0 : p.theme.space.xs)};
-    min-width: ${p => (p.collapsed ? 0 : '9px')};
+    /* Collapsed empty spacers between tokens stay zero-width so they do not wrap.
+     * The empty trailing field still needs the same horizontal inset as
+     * SearchQueryBuilder so the placeholder lines up with the aggregate filter. */
+    padding: 0 ${p => (p.collapsed && !p.showPlaceholder ? 0 : p.theme.space.xs)};
+    min-width: ${p => (p.collapsed && !p.showPlaceholder ? 0 : '9px')};
     width: 100%;
     height: 100%;
     min-height: 100%;
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index 92bba16a185b..5d2f1a26c6a6 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -1,5 +1,5 @@
 import type {ChangeEvent, FocusEvent, RefObject} from 'react';
-import {useCallback, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {type AriaGridListOptions} from '@react-aria/gridlist';
@@ -11,6 +11,7 @@ import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
 import {Flex} from '@sentry/scraps/layout';
 
 import {
+  ConditionalFilterArgumentInput,
   isSearchFilterParameter,
   unwrapSearchFilterArgument,
 } from 'sentry/components/arithmeticBuilder/conditionalFilter';
@@ -20,7 +21,6 @@ import type {
   TokenAttribute,
   TokenFunction,
 } from 'sentry/components/arithmeticBuilder/token';
-import {ConditionalFilterArgumentInput} from 'sentry/components/arithmeticBuilder/token/conditionalFilterInput';
 import {DeleteButton} from 'sentry/components/arithmeticBuilder/token/deleteButton';
 import {
   ArgumentGridCell,
@@ -43,12 +43,13 @@ function resolveArgumentDisplayLabel(
     | {defaultLabel?: string; kind?: string; name?: string}
     | null
     | undefined,
-  fallbackLabel: string
+  fallbackLabel: string,
+  hasConditionalAggregates: boolean
 ): string {
   if (parameterDefinition?.kind === 'column' && parameterDefinition.defaultLabel) {
     return parameterDefinition.defaultLabel;
   }
-  if (isSearchFilterParameter(parameterDefinition)) {
+  if (hasConditionalAggregates && isSearchFilterParameter(parameterDefinition)) {
     return unwrapSearchFilterArgument(fallbackLabel);
   }
   return fallbackLabel;
@@ -138,7 +139,7 @@ function ArgumentsGrid({
   token: functionToken,
   rowRef,
 }: ArgumentsGridProps) {
-  const {dispatch, getFieldDefinition} = useArithmeticBuilder();
+  const {dispatch, getFieldDefinition, hasConditionalAggregates} = useArithmeticBuilder();
 
   const resolveArgumentLabel = useCallback(
     (index: number, fallbackLabel: string) => {
@@ -146,9 +147,13 @@ function ArgumentsGrid({
         functionToken.function,
         functionToken.attributes.map(attr => attr.text)
       )?.parameters?.[index];
-      return resolveArgumentDisplayLabel(fieldDefinition, fallbackLabel);
+      return resolveArgumentDisplayLabel(
+        fieldDefinition,
+        fallbackLabel,
+        hasConditionalAggregates
+      );
     },
-    [getFieldDefinition, functionToken]
+    [getFieldDefinition, functionToken, hasConditionalAggregates]
   );
 
   const [args, setArguments] = useState(
@@ -161,9 +166,15 @@ function ArgumentsGrid({
   );
 
   const argsRef = useRef(args);
-  argsRef.current = args;
   const functionTokenRef = useRef(functionToken);
-  functionTokenRef.current = functionToken;
+
+  useEffect(() => {
+    argsRef.current = args;
+  }, [args]);
+
+  useEffect(() => {
+    functionTokenRef.current = functionToken;
+  }, [functionToken]);
 
   const commitArgumentsIfChanged = useCallback(() => {
     const nextArgs = argsRef.current.map(argument => argument.value).join(',');
@@ -181,19 +192,17 @@ function ArgumentsGrid({
   }, [dispatch]);
 
   const updateArgumentAtIndex = (index: number, argument: string) => {
-    setArguments(prev => {
-      const next = prev.map((item, i) =>
-        index === i
-          ? {
-              ...item,
-              value: argument,
-              label: resolveArgumentLabel(index, prettifyTagKey(argument)),
-            }
-          : item
-      );
-      argsRef.current = next;
-      return next;
-    });
+    const next = argsRef.current.map((item, i) =>
+      index === i
+        ? {
+            ...item,
+            value: argument,
+            label: resolveArgumentLabel(index, prettifyTagKey(argument)),
+          }
+        : item
+    );
+    argsRef.current = next;
+    setArguments(next);
   };
 
   if (!args.length) {
@@ -307,7 +316,7 @@ function ArgumentsGridList({
 }
 
 function InternalInput(props: FunctionArgumentInputProps) {
-  const {getFieldDefinition} = useArithmeticBuilder();
+  const {getFieldDefinition, hasConditionalAggregates} = useArithmeticBuilder();
   const parameterDefinition = useMemo(
     () =>
       getFieldDefinition(
@@ -317,7 +326,7 @@ function InternalInput(props: FunctionArgumentInputProps) {
     [getFieldDefinition, props.argumentIndex, props.functionToken]
   );
 
-  if (isSearchFilterParameter(parameterDefinition)) {
+  if (hasConditionalAggregates && isSearchFilterParameter(parameterDefinition)) {
     return <ConditionalFilterArgumentInput {...props} />;
   }
 
@@ -348,6 +357,7 @@ function FunctionArgumentInput(props: FunctionArgumentInputProps) {
     functionArguments: builderFunctionArguments,
     getFieldDefinition,
     getSuggestedKey,
+    hasConditionalAggregates,
   } = useArithmeticBuilder();
 
   const parameterDefinition = useMemo(
@@ -361,8 +371,12 @@ function FunctionArgumentInput(props: FunctionArgumentInputProps) {
 
   const resolveDisplayLabel = useCallback(
     (fallback: string): string =>
-      resolveArgumentDisplayLabel(parameterDefinition, fallback),
-    [parameterDefinition]
+      resolveArgumentDisplayLabel(
+        parameterDefinition,
+        fallback,
+        hasConditionalAggregates
+      ),
+    [hasConditionalAggregates, parameterDefinition]
   );
 
   const initialLabel = resolveDisplayLabel(argument.label);
diff --git a/static/app/components/arithmeticBuilder/token/grid.tsx b/static/app/components/arithmeticBuilder/token/grid.tsx
index 32dfd0a8ef12..9d57b752a24a 100644
--- a/static/app/components/arithmeticBuilder/token/grid.tsx
+++ b/static/app/components/arithmeticBuilder/token/grid.tsx
@@ -235,9 +235,15 @@ const TokenGridWrapper = styled('div')`
   box-sizing: border-box;
   width: 100%;
   min-height: 100%;
-  padding: ${p => p.theme.space.lg} ${p => p.theme.space.sm};
+  /* Match SearchQueryBuilder so equation and aggregate filter rows share height.
+   * +1px accounts for the border; keep horizontal padding so empty-field clicks
+   * still land on this grid and route into an input. */
+  padding-top: calc(${p => p.theme.space.xs} + 1px);
+  padding-bottom: calc(${p => p.theme.space.xs} + 1px);
+  padding-left: ${p => p.theme.space.sm};
+  padding-right: ${p => p.theme.space.sm};
   display: flex;
-  align-items: center;
+  align-items: stretch;
   row-gap: ${p => p.theme.space.xs};
   flex-wrap: wrap;
   cursor: text;
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 986812bbf597..d4af232f8bf8 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -94,8 +94,11 @@ function Tokens(props: TokensProp) {
         aggregations,
         functionArguments,
         getFieldDefinition: getSpanFieldDefinition,
-        getFilterTagValues: props.getFilterTagValues,
+        getFilterTagValues: hasConditionalAggregates
+          ? props.getFilterTagValues
+          : undefined,
         getSuggestedKey,
+        hasConditionalAggregates,
         references: props.references,
       }}
     >
@@ -217,6 +220,25 @@ describe('token', () => {
       ).toBeInTheDocument();
     });
 
+    it('does not render the EAP filter argument input when the feature is off', async () => {
+      render(
+        <Tokens
+          expression="avg_if(`span.op:db`,span.duration)"
+          hasConditionalAggregates={false}
+        />
+      );
+
+      expect(
+        await screen.findByRole('row', {
+          name: 'avg_if(`span.op:db`,span.duration)',
+        })
+      ).toBeInTheDocument();
+
+      expect(
+        screen.queryByRole('combobox', {name: 'Add a filter'})
+      ).not.toBeInTheDocument();
+    });
+
     it('allows selecting function with no arguments using mouse', async () => {
       render(<Tokens expression="" />);
 
diff --git a/static/app/components/arithmeticBuilder/token/styles.tsx b/static/app/components/arithmeticBuilder/token/styles.tsx
index 05a471ff8c71..f253b25b54fc 100644
--- a/static/app/components/arithmeticBuilder/token/styles.tsx
+++ b/static/app/components/arithmeticBuilder/token/styles.tsx
@@ -36,9 +36,6 @@ export const Row = styled('div', {
     min-width: 0;
     max-width: none;
     flex-basis: 0;
-    align-self: stretch;
-    height: auto;
-    min-height: 24px;
   }
 
   &[aria-invalid='true'] {
diff --git a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
index 962ac62b4b46..2a012d073788 100644
--- a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
+++ b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 import type {ListState} from '@react-stately/list';
 import type {KeyboardEvent, Node} from '@react-types/shared';
 
+import {Flex, type FlexProps} from '@sentry/scraps/layout';
+
 import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
 import {
   TokenKind,
@@ -14,6 +16,7 @@ import {
 import {nextTokenKeyOfKind} from 'sentry/components/arithmeticBuilder/tokenizer';
 import {useGridListItem} from 'sentry/components/tokenizedInput/grid/useGridListItem';
 import {focusTarget} from 'sentry/components/tokenizedInput/grid/utils';
+import {UnstyledInput} from 'sentry/components/tokenizedInput/token/unstyledInput';
 import {defined} from 'sentry/utils/defined';
 
 type FunctionArgumentValue = {label: string; value: string};
@@ -256,29 +259,33 @@ export function useFunctionArgumentInput({
   };
 }
 
-export const ArgumentGridRow = styled('div')`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 100%;
-  flex: 0 1 auto;
-  max-width: fit-content;
-`;
-
-export const ArgumentGridCell = styled('div')`
-  display: flex;
-  align-items: center;
-  height: 100%;
+export function ArgumentGridRow(props: FlexProps) {
+  return (
+    <Flex
+      align="center"
+      position="relative"
+      height="100%"
+      flex="0 1 auto"
+      maxWidth="fit-content"
+      {...props}
+    />
+  );
+}
 
-  > div input {
-    max-width: 130px !important;
-    min-width: 0 !important;
-    white-space: nowrap !important;
+const StyledArgumentGridCell = styled(Flex)`
+  ${UnstyledInput} {
+    max-width: 130px;
+    min-width: 0;
+    white-space: nowrap;
   }
 
   /* The expandable equation/filter field sets data-expanded while focused. Lift
      the cap so long arguments are fully readable; stay truncated when collapsed. */
-  [data-expanded='true'] & > div input {
-    max-width: none !important;
+  [data-expanded='true'] & ${UnstyledInput} {
+    max-width: none;
   }
 `;
+
+export function ArgumentGridCell(props: FlexProps) {
+  return <StyledArgumentGridCell align="center" height="100%" {...props} />;
+}
diff --git a/static/app/components/tokenizedInput/token/comboBox.tsx b/static/app/components/tokenizedInput/token/comboBox.tsx
index 4e18cbad6316..4b3163d51741 100644
--- a/static/app/components/tokenizedInput/token/comboBox.tsx
+++ b/static/app/components/tokenizedInput/token/comboBox.tsx
@@ -23,11 +23,12 @@ import {
   itemIsSectionWithKey,
   ListBox,
 } from '@sentry/scraps/compactSelect';
-import {Input, useAutosizeInput} from '@sentry/scraps/input';
+import {useAutosizeInput} from '@sentry/scraps/input';
 import {Flex} from '@sentry/scraps/layout';
 
 import {Overlay} from 'sentry/components/overlay';
 import {useSearchTokenCombobox} from 'sentry/components/searchQueryBuilder/tokens/useSearchTokenCombobox';
+import {UnstyledInput} from 'sentry/components/tokenizedInput/token/unstyledInput';
 import {useOverlay} from 'sentry/utils/useOverlay';
 
 interface ComboBoxProps {
@@ -366,6 +367,10 @@ export function ComboBox({
     <Flex align="stretch" width="100%" height="100%" position="relative">
       <UnstyledInput
         {...inputProps}
+        // Reflect the visible popup, not React Aria's open state alone. ComboBox opens
+        // on focus even when there are no options, and callers (e.g. expandable equation
+        // bars) use aria-expanded to decide whether Enter should dismiss.
+        aria-expanded={isMenuVisible}
         size="md"
         ref={mergeRefs(
           ref,
@@ -457,25 +462,6 @@ function useUpdateOverlayPositionOnContentChange({
   }, [contentRef, isOpen, updateOverlayPosition]);
 }
 
-const UnstyledInput = styled(Input)`
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  flex-grow: 1;
-  padding: 0;
-  height: auto;
-  min-height: auto;
-  resize: none;
-  min-width: 1px;
-  border-radius: 0;
-
-  &:focus {
-    outline: none;
-    border: none;
-    box-shadow: none;
-  }
-`;
-
 const StyledPositionWrapper = styled('div')<{visible?: boolean}>`
   display: ${p => (p.visible ? 'block' : 'none')};
   z-index: ${p => p.theme.zIndex.tooltip};
diff --git a/static/app/components/tokenizedInput/token/inputBox.tsx b/static/app/components/tokenizedInput/token/inputBox.tsx
index 60df913c5347..1117f295e338 100644
--- a/static/app/components/tokenizedInput/token/inputBox.tsx
+++ b/static/app/components/tokenizedInput/token/inputBox.tsx
@@ -6,14 +6,15 @@ import type {
   Ref,
 } from 'react';
 import {useCallback, useRef} from 'react';
-import styled from '@emotion/styled';
 import {useTextField} from '@react-aria/textfield';
 import {mergeRefs} from '@react-aria/utils';
 import type {KeyboardEvent} from '@react-types/shared';
 
-import {Input, useAutosizeInput} from '@sentry/scraps/input';
+import {useAutosizeInput} from '@sentry/scraps/input';
 import {Flex} from '@sentry/scraps/layout';
 
+import {UnstyledInput} from 'sentry/components/tokenizedInput/token/unstyledInput';
+
 interface InputBoxProps {
   inputLabel: string;
   inputValue: string;
@@ -124,22 +125,3 @@ export function InputBox({
     </Flex>
   );
 }
-
-const UnstyledInput = styled(Input)`
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  flex-grow: 1;
-  padding: 0;
-  height: auto;
-  min-height: auto;
-  resize: none;
-  min-width: 1px;
-  border-radius: 0;
-
-  &:focus {
-    outline: none;
-    border: none;
-    box-shadow: none;
-  }
-`;
diff --git a/static/app/components/tokenizedInput/token/unstyledInput.tsx b/static/app/components/tokenizedInput/token/unstyledInput.tsx
new file mode 100644
index 000000000000..9ddbfdd6f6ef
--- /dev/null
+++ b/static/app/components/tokenizedInput/token/unstyledInput.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import {Input} from '@sentry/scraps/input';
+
+export const UnstyledInput = styled(Input)`
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  flex-grow: 1;
+  padding: 0;
+  height: auto;
+  min-height: auto;
+  resize: none;
+  min-width: 1px;
+  border-radius: 0;
+
+  &:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+`;
diff --git a/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx b/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx
index 47185ec7e4e8..32f305545a2c 100644
--- a/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx
+++ b/static/app/views/explore/components/exploreEquationArithmeticBuilder.tsx
@@ -33,6 +33,7 @@ export function ExploreEquationArithmeticBuilder({
     getFieldDefinition,
     getFilterTagValues,
     getSuggestedKey,
+    hasConditionalAggregates,
   } = useExploreEquationBuilderConfig({
     traceItemType,
     numberTags,
@@ -47,6 +48,7 @@ export function ExploreEquationArithmeticBuilder({
       functionArguments={functionArguments}
       getFieldDefinition={getFieldDefinition}
       getFilterTagValues={getFilterTagValues}
+      hasConditionalAggregates={hasConditionalAggregates}
       expression={expression}
       setExpression={setExpression}
       getSuggestedKey={getSuggestedKey}
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
index b72e58d7af6d..192d6ecd03b5 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
@@ -95,8 +95,48 @@ describe('ExpandableFilterSearchBar', () => {
     });
   });
 
-  it('stays expanded on Enter while a suggestion menu is open', async () => {
-    render(<SearchBarStub defaultValue="" role="combobox" aria-expanded="true" />);
+  it('collapses the equation builder on Enter when no suggestion is highlighted', async () => {
+    render(
+      <EquationBuilderStub
+        defaultValue=""
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="equation-listbox"
+      >
+        <ul id="equation-listbox" role="listbox">
+          <li role="option">avg</li>
+        </ul>
+      </EquationBuilderStub>
+    );
+
+    const input = screen.getByTestId('arithmetic-builder-input');
+    await userEvent.click(input);
+    await flushAnimationFrames();
+    expect(isExpanded(input)).toBe(true);
+
+    // Suggestions may be open without a highlight — Enter dismisses.
+    await userEvent.keyboard('{Enter}');
+    await waitFor(() => {
+      expect(isExpanded(input)).toBe(false);
+    });
+  });
+
+  it('stays expanded on Enter while a suggestion is highlighted', async () => {
+    render(
+      <SearchBarStub
+        defaultValue=""
+        role="combobox"
+        aria-expanded="true"
+        aria-activedescendant="option-1"
+        aria-controls="listbox-1"
+      >
+        <ul id="listbox-1" role="listbox">
+          <li id="option-1" role="option">
+            span.op
+          </li>
+        </ul>
+      </SearchBarStub>
+    );
 
     const input = screen.getByTestId('query-builder-input');
     await userEvent.click(input);
@@ -108,7 +148,18 @@ describe('ExpandableFilterSearchBar', () => {
   });
 
   it('stays expanded after blur while a suggestion menu is open', async () => {
-    render(<SearchBarStub defaultValue="" role="combobox" aria-expanded="true" />);
+    render(
+      <SearchBarStub
+        defaultValue=""
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="listbox-1"
+      >
+        <ul id="listbox-1" role="listbox">
+          <li role="option">span.op</li>
+        </ul>
+      </SearchBarStub>
+    );
 
     const input = screen.getByTestId('query-builder-input');
     await userEvent.click(input);
@@ -119,7 +170,6 @@ describe('ExpandableFilterSearchBar', () => {
     await flushAnimationFrames();
     expect(isExpanded(input)).toBe(true);
   });
-
   it('collapses after blur when no suggestion menu is open', async () => {
     render(<SearchBarStub defaultValue="" role="combobox" aria-expanded="false" />);
 
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
index 268f1bf52837..785230eef114 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
@@ -26,6 +26,37 @@ function focusInputAtEnd(input: HTMLInputElement) {
   input.setSelectionRange(end, end);
 }
 
+/** True when the element is not display:none / hidden (works in jsdom and browsers). */
+function isRenderedVisibly(el: HTMLElement) {
+  let node: HTMLElement | null = el;
+  while (node) {
+    if (node.hidden || node.getAttribute('aria-hidden') === 'true') {
+      return false;
+    }
+    if (node.style.display === 'none' || node.style.visibility === 'hidden') {
+      return false;
+    }
+    node = node.parentElement;
+  }
+  return true;
+}
+
+function findOpenSuggestionListbox(root: HTMLElement) {
+  const openCombobox = root.querySelector('[role="combobox"][aria-expanded="true"]');
+  if (!openCombobox) {
+    return null;
+  }
+
+  const listboxId = openCombobox.getAttribute('aria-controls');
+  const listbox = listboxId
+    ? document.getElementById(listboxId)
+    : root.querySelector('[role="listbox"]');
+  if (!(listbox instanceof HTMLElement) || !isRenderedVisibly(listbox)) {
+    return null;
+  }
+  return {openCombobox, listbox};
+}
+
 /**
  * Grows a series filter bar or equation builder to the remaining window width while
  * focused so a long query has room to be read and edited, then collapses it back into
@@ -61,7 +92,29 @@ export function ExpandableFilterSearchBar({children}: {children: ReactNode}) {
   }, []);
 
   const isSuggestionMenuOpen = useCallback(() => {
-    return Boolean(ref.current?.querySelector('[role="combobox"][aria-expanded="true"]'));
+    const root = ref.current;
+    if (!root) {
+      return false;
+    }
+
+    // Prefer a visibly rendered listbox over aria-expanded alone: ComboBox opens the
+    // React Aria menu state on focus (aria-expanded=true) even when there are no
+    // options to show and the overlay is display:none.
+    return findOpenSuggestionListbox(root) !== null;
+  }, []);
+
+  /**
+   * Enter accepts a suggestion only after the user highlights one (ArrowUp/Down sets
+   * aria-activedescendant). An open menu alone must not block dismiss — the listbox
+   * used to autofocus the first option on open, which made Enter always "accept".
+   */
+  const isAcceptingAutocompleteSuggestion = useCallback(() => {
+    const root = ref.current;
+    if (!root) {
+      return false;
+    }
+    const openMenu = findOpenSuggestionListbox(root);
+    return Boolean(openMenu?.openCombobox.getAttribute('aria-activedescendant'));
   }, []);
 
   const collapseAfterBlur = useCallback(() => {
@@ -123,23 +176,27 @@ export function ExpandableFilterSearchBar({children}: {children: ReactNode}) {
 
   const collapseOnEnter = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
-      // Accepting an autocomplete suggestion also uses Enter, so stay expanded while a
-      // menu is open.
-      if (
-        event.key !== 'Enter' ||
-        event.nativeEvent.isComposing ||
-        isSuggestionMenuOpen()
-      ) {
+      if (event.key !== 'Enter' || event.nativeEvent.isComposing) {
         return;
       }
 
+      // Arrow-highlighted suggestion: let the ComboBox handle Enter to accept it.
+      if (isAcceptingAutocompleteSuggestion()) {
+        return;
+      }
+
+      // Stop the ComboBox from treating Enter as "select focused option" when the
+      // menu is open but nothing was intentionally highlighted, then dismiss.
+      event.preventDefault();
+      event.stopPropagation();
+
       const active = document.activeElement;
       if (active instanceof HTMLElement && ref.current?.contains(active)) {
         active.blur();
       }
       collapseToDefaultWidth();
     },
-    [collapseToDefaultWidth, isSuggestionMenuOpen]
+    [collapseToDefaultWidth, isAcceptingAutocompleteSuggestion]
   );
 
   return (
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
index 43433592bc89..8a4a193cc03f 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx
@@ -3,7 +3,7 @@ import {useSortable} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
 
 import {Button} from '@sentry/scraps/button';
-import {Stack} from '@sentry/scraps/layout';
+import {Flex} from '@sentry/scraps/layout';
 
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
 import {DragReorderButton} from 'sentry/components/dnd/dragReorderButton';
@@ -80,13 +80,13 @@ export function VisualizeEquation({
         <DragReorderButton iconSize="sm" {...listeners} />
       )}
       {label}
-      <Stack flex="1" minWidth="0" overflow="visible">
+      <Flex flex="1" minWidth="0" overflow="visible">
         {hasConditionalAggregates ? (
           <ExpandableFilterSearchBar>{equationBuilder}</ExpandableFilterSearchBar>
         ) : (
           equationBuilder
         )}
-      </Stack>
+      </Flex>
       {onDelete && (
         <Button
           variant="transparent"
diff --git a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
index 5763fd21d82b..427a592785a1 100644
--- a/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
+++ b/static/app/views/explore/hooks/useExploreEquationBuilderConfig.ts
@@ -52,8 +52,9 @@ interface ExploreEquationBuilderConfig {
     key: string,
     attributeTexts?: readonly string[]
   ) => FieldDefinition | null;
-  getFilterTagValues: GetTagValues;
   getSuggestedKey: (key: string) => string | null;
+  hasConditionalAggregates: boolean;
+  getFilterTagValues?: GetTagValues;
 }
 
 export function useExploreEquationBuilderConfig({
@@ -106,6 +107,7 @@ export function useExploreEquationBuilderConfig({
     functionArguments,
     getFieldDefinition,
     getSuggestedKey,
-    getFilterTagValues,
+    getFilterTagValues: hasConditionalAggregates ? getFilterTagValues : undefined,
+    hasConditionalAggregates,
   };
 }

From b037fc4ba0144e01c9189c48c1dd10a89f0a5eb0 Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Tue, 8 Sep 2026 15:29:51 -0400
Subject: [PATCH 09/14] fix(explore): Address Bugbot findings for equation
 filter Enter and parens

Preserve trailing grouping parentheses when replacing the next filter key,
and let ComboBox commit on Enter before the expandable equation bar collapses.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilter.spec.ts                 | 20 +++++++++++++++++
 .../conditionalFilter/conditionalFilter.ts    | 11 +++++-----
 .../tokens/useSearchTokenCombobox.tsx         |  5 ++++-
 .../expandableFilterSearchBar.spec.tsx        | 22 ++++++++++++++++++-
 .../expandableFilterSearchBar.tsx             | 19 ++++++++--------
 5 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
index eb831a0ae51e..6c1ec233c7c8 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
@@ -183,6 +183,16 @@ describe('getConditionalFilterEditContext', () => {
       valueQuery: 'db',
     });
   });
+
+  it('keeps next-key replace range inside grouping parentheses', () => {
+    const value = '(span.op:db span)';
+    expect(getConditionalFilterEditContext(value, value.length - 1)).toMatchObject({
+      phase: 'key',
+      editText: 'span',
+      replaceStart: 12,
+      replaceEnd: value.length - 1,
+    });
+  });
 });
 
 describe('replaceConditionalFilterClause', () => {
@@ -215,6 +225,16 @@ describe('replaceConditionalFilterClause', () => {
       newValue: '(span.op:db)',
     });
   });
+
+  it('preserves a trailing parenthesis when selecting a next-key suggestion', () => {
+    const value = '(span.op:db span)';
+    expect(
+      replaceConditionalFilterClause(value, value.length - 1, 'span.status:')
+    ).toEqual({
+      newCursorIndex: 24,
+      newValue: '(span.op:db span.status:)',
+    });
+  });
 });
 
 describe('formatConditionalFilterClause', () => {
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
index d5d1bb8b1980..5bdff5320012 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
@@ -253,8 +253,10 @@ export function getConditionalFilterEditContext(
   value: string,
   cursorIndex: number
 ): ConditionalFilterEditContext {
-  const {clause, clauseStart, clauseEnd, clauseCursorIndex} =
-    getConditionalFilterClauseAtCursor(value, cursorIndex);
+  const {clause, clauseStart, clauseCursorIndex} = getConditionalFilterClauseAtCursor(
+    value,
+    cursorIndex
+  );
 
   const {innerStart, innerEnd} = getClauseInnerBounds(clause);
   const inner = clause.slice(innerStart, innerEnd);
@@ -266,7 +268,6 @@ export function getConditionalFilterEditContext(
   const absoluteInnerStart = clauseStart + innerStart;
   // Keep trailing grouping `)` outside replacements; leading `(` stay before replaceStart.
   const absoluteInnerEnd = clauseStart + innerEnd;
-  const absoluteClauseEnd = clauseEnd;
 
   const colonIndex = inner.indexOf(':');
   if (colonIndex === -1 || clampedInnerCursor <= colonIndex) {
@@ -309,7 +310,7 @@ export function getConditionalFilterEditContext(
         phase: 'key',
         editText: nextKey,
         replaceStart: absoluteInnerStart + keyStartInInner,
-        replaceEnd: absoluteClauseEnd,
+        replaceEnd: absoluteInnerEnd,
       };
     }
   }
@@ -323,7 +324,7 @@ export function getConditionalFilterEditContext(
       phase: 'key',
       editText: nextKey,
       replaceStart: absoluteInnerStart + keyStartInInner,
-      replaceEnd: absoluteClauseEnd,
+      replaceEnd: absoluteInnerEnd,
     };
   }
 
diff --git a/static/app/components/searchQueryBuilder/tokens/useSearchTokenCombobox.tsx b/static/app/components/searchQueryBuilder/tokens/useSearchTokenCombobox.tsx
index 7be3d2474c59..81870c280e11 100644
--- a/static/app/components/searchQueryBuilder/tokens/useSearchTokenCombobox.tsx
+++ b/static/app/components/searchQueryBuilder/tokens/useSearchTokenCombobox.tsx
@@ -238,7 +238,10 @@ export function useSearchTokenCombobox<T>(
     }),
     listBoxProps: mergeProps(menuProps, listBoxProps, {
       onAction: undefined,
-      autoFocus: state.focusStrategy || true,
+      // Only virtual-focus an option after ArrowUp/ArrowDown sets focusStrategy.
+      // Autofocusing the first item on open makes Enter select it instead of
+      // committing the typed value (and blocks expandable equation dismiss).
+      autoFocus: state.focusStrategy ?? false,
       shouldUseVirtualFocus: true,
       shouldSelectOnPressUp: true,
       shouldFocusOnHover: true,
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
index 192d6ecd03b5..50e1a19b789b 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.spec.tsx
@@ -90,6 +90,25 @@ describe('ExpandableFilterSearchBar', () => {
     expect(isExpanded(input)).toBe(true);
 
     await userEvent.keyboard('{Enter}');
+    await flushAnimationFrames();
+    await waitFor(() => {
+      expect(isExpanded(input)).toBe(false);
+    });
+  });
+
+  it('lets the focused input handle Enter before collapsing', async () => {
+    const onKeyDown = jest.fn();
+    render(<SearchBarStub defaultValue="" onKeyDown={onKeyDown} />);
+
+    const input = screen.getByTestId('query-builder-input');
+    await userEvent.click(input);
+    await flushAnimationFrames();
+
+    await userEvent.keyboard('{Enter}');
+    expect(onKeyDown).toHaveBeenCalledWith(
+      expect.objectContaining({key: 'Enter', defaultPrevented: false})
+    );
+    await flushAnimationFrames();
     await waitFor(() => {
       expect(isExpanded(input)).toBe(false);
     });
@@ -114,8 +133,9 @@ describe('ExpandableFilterSearchBar', () => {
     await flushAnimationFrames();
     expect(isExpanded(input)).toBe(true);
 
-    // Suggestions may be open without a highlight — Enter dismisses.
+    // Suggestions may be open without a highlight — Enter dismisses after commit.
     await userEvent.keyboard('{Enter}');
+    await flushAnimationFrames();
     await waitFor(() => {
       expect(isExpanded(input)).toBe(false);
     });
diff --git a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
index 785230eef114..e447be5c4a56 100644
--- a/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
+++ b/static/app/views/explore/components/toolbar/toolbarVisualize/expandableFilterSearchBar.tsx
@@ -185,16 +185,15 @@ export function ExpandableFilterSearchBar({children}: {children: ReactNode}) {
         return;
       }
 
-      // Stop the ComboBox from treating Enter as "select focused option" when the
-      // menu is open but nothing was intentionally highlighted, then dismiss.
-      event.preventDefault();
-      event.stopPropagation();
-
-      const active = document.activeElement;
-      if (active instanceof HTMLElement && ref.current?.contains(active)) {
-        active.blur();
-      }
-      collapseToDefaultWidth();
+      // Do not preventDefault/stopPropagation — ComboBox Enter must still run
+      // onInputCommit for free-text and function arguments. Collapse after that.
+      requestAnimationFrame(() => {
+        const active = document.activeElement;
+        if (active instanceof HTMLElement && ref.current?.contains(active)) {
+          active.blur();
+        }
+        collapseToDefaultWidth();
+      });
     },
     [collapseToDefaultWidth, isAcceptingAutocompleteSuggestion]
   );

From b621123d507750ad73ff2930d886f40d87fbd7fd Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Tue, 8 Sep 2026 16:49:29 -0400
Subject: [PATCH 10/14] fix(explore): Keep filter caret in sync when
 autocomplete updates

Restore selection after suggestion re-renders and wire native keyup so
moving the caret into a filter key reliably shows key suggestions.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilterInput.tsx                | 62 +++++++++++++++----
 .../arithmeticBuilder/token/index.spec.tsx    |  4 +-
 .../tokenizedInput/token/comboBox.tsx         | 27 +++++---
 3 files changed, 69 insertions(+), 24 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
index 7407bcff53e2..f4efcf8f091b 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
@@ -1,4 +1,4 @@
-import type {ChangeEvent, FocusEvent, MouseEvent} from 'react';
+import type {ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent} from 'react';
 import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 import {Item, Section} from '@react-stately/collections';
 
@@ -52,6 +52,15 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
   // Apply after React commits the controlled value. A lone rAF + focus() races in
   // Chrome and resets the caret before (or when) focus returns from the listbox.
   const pendingCaretRef = useRef<{pos: number; value: string} | null>(null);
+  const clickSelectionRafRef = useRef<number | null>(null);
+
+  const {comboBoxFilterValue, editPhase, items} = useConditionalFilterAutocomplete({
+    enabled: isCurrentlyEditing,
+    filterValue: inputValue,
+    functionArguments: builderFunctionArguments,
+    getFilterTagValues,
+    selectionIndex,
+  });
 
   useLayoutEffect(() => {
     const pendingCaret = pendingCaretRef.current;
@@ -70,13 +79,24 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
     setSelectionIndex(pendingCaret.pos);
   }, [inputRef, inputValue]);
 
-  const {comboBoxFilterValue, editPhase, items} = useConditionalFilterAutocomplete({
-    enabled: isCurrentlyEditing,
-    filterValue: inputValue,
-    functionArguments: builderFunctionArguments,
-    getFilterTagValues,
-    selectionIndex,
-  });
+  // Suggestion updates re-render the controlled input and can reset the DOM caret.
+  // Keep the caret aligned with selectionIndex so key↔value autocomplete stays correct.
+  useLayoutEffect(() => {
+    if (!isCurrentlyEditing) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input || document.activeElement !== input) {
+      return;
+    }
+    if (
+      input.selectionStart === selectionIndex &&
+      input.selectionEnd === selectionIndex
+    ) {
+      return;
+    }
+    input.setSelectionRange(selectionIndex, selectionIndex);
+  }, [displayValue, inputRef, isCurrentlyEditing, items, selectionIndex]);
 
   const shouldFilterComboBoxResults = !(editPhase === 'value' && getFilterTagValues);
 
@@ -96,18 +116,34 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
   const onClick = useCallback(
     (evt: MouseEvent<HTMLInputElement>) => {
       const input = evt.currentTarget;
-      requestAnimationFrame(() => {
+      if (clickSelectionRafRef.current !== null) {
+        window.cancelAnimationFrame(clickSelectionRafRef.current);
+      }
+      // Read the caret after the browser places it; cancel if keyUp/change updates first.
+      clickSelectionRafRef.current = window.requestAnimationFrame(() => {
+        clickSelectionRafRef.current = null;
         updateSelectionIndex(input);
       });
     },
     [updateSelectionIndex]
   );
 
-  const onKeyUp = useCallback(() => {
-    updateSelectionIndex();
-  }, [updateSelectionIndex]);
+  const onKeyUp = useCallback(
+    (evt: KeyboardEvent<HTMLInputElement>) => {
+      if (clickSelectionRafRef.current !== null) {
+        window.cancelAnimationFrame(clickSelectionRafRef.current);
+        clickSelectionRafRef.current = null;
+      }
+      updateSelectionIndex(evt.currentTarget);
+    },
+    [updateSelectionIndex]
+  );
 
   const onInputChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    if (clickSelectionRafRef.current !== null) {
+      window.cancelAnimationFrame(clickSelectionRafRef.current);
+      clickSelectionRafRef.current = null;
+    }
     setInputValue(evt.target.value);
     setCurrentValue(evt.target.value);
     setSelectionIndex(evt.target.selectionStart ?? 0);
@@ -207,7 +243,7 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
           onInputFocus={onInputFocus}
           onKeyDown={onKeyDown}
           onKeyDownCapture={onKeyDownCapture}
-          onKeyUp={onKeyUp}
+          onInputKeyUp={onKeyUp}
           onOptionSelected={onOptionSelected}
           data-test-id={dataTestId}
         >
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index d4af232f8bf8..17f69c9000e4 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -1191,8 +1191,10 @@ describe('token', () => {
       ).getByRole('combobox', {name: 'Add a filter'});
 
       await userEvent.click(filterArg);
+      expect(filterArg).toHaveFocus();
+      // Move to the start of the key so autocomplete switches out of value mode.
       (filterArg as HTMLInputElement).setSelectionRange(0, 0);
-      fireEvent.keyUp(filterArg, {key: 'ArrowLeft', code: 'ArrowLeft'});
+      fireEvent.keyUp(filterArg, {key: 'Home', code: 'Home'});
       await waitFor(() => {
         expect(screen.getByRole('option', {name: 'span.op:'})).toBeInTheDocument();
       });
diff --git a/static/app/components/tokenizedInput/token/comboBox.tsx b/static/app/components/tokenizedInput/token/comboBox.tsx
index 4b3163d51741..e379b889116b 100644
--- a/static/app/components/tokenizedInput/token/comboBox.tsx
+++ b/static/app/components/tokenizedInput/token/comboBox.tsx
@@ -3,6 +3,7 @@ import type {
   ClipboardEvent,
   FocusEvent,
   FocusEventHandler,
+  KeyboardEventHandler,
   MouseEventHandler,
   Ref,
 } from 'react';
@@ -49,9 +50,14 @@ interface ComboBoxProps {
   onInputCommit?: (value: string) => void;
   onInputEscape?: () => void;
   onInputFocus?: FocusEventHandler<HTMLInputElement>;
+  /**
+   * Native keyup on the input. Callers that need the caret after arrow-key
+   * movement (e.g. equation filter autocomplete) should use this rather than
+   * onKeyDown, which fires before the browser updates selection.
+   */
+  onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
   onKeyDown?: (evt: KeyboardEvent) => void;
   onKeyDownCapture?: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
-  onKeyUp?: (e: KeyboardEvent) => void;
   onOpenChange?: (newOpenState: boolean) => void;
   onOptionSelected?: (option: SelectOptionWithKey<string>) => void;
   onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;
@@ -118,12 +124,12 @@ export function ComboBox({
   onInputChange,
   onKeyDown,
   onKeyDownCapture,
-  onKeyUp,
   onPaste,
   placeholder,
   tabIndex,
   ref,
   keepMenuOpenOnSelect,
+  onInputKeyUp,
   shouldFilterResults = true,
 }: ComboBoxProps) {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -276,13 +282,6 @@ export function ComboBox({
     [inputValue, onInputCommit, onInputEscape, state, isOpen, onKeyDown]
   );
 
-  const handleComboBoxKeyUp = useCallback(
-    (evt: KeyboardEvent) => {
-      onKeyUp?.(evt);
-    },
-    [onKeyUp]
-  );
-
   const {inputProps, listBoxProps} = useSearchTokenCombobox<
     SelectOptionOrSectionWithKey<string>
   >(
@@ -296,7 +295,6 @@ export function ComboBox({
       onFocus: handleComboBoxFocus,
       onBlur: handleComboBoxBlur,
       onKeyDown: handleComboBoxKeyDown,
-      onKeyUp: handleComboBoxKeyUp,
     },
     state
   );
@@ -355,6 +353,14 @@ export function ComboBox({
     [inputProps, state, onClick]
   );
 
+  const handleInputKeyUp: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    evt => {
+      inputProps.onKeyUp?.(evt);
+      onInputKeyUp?.(evt);
+    },
+    [inputProps, onInputKeyUp]
+  );
+
   useUpdateOverlayPositionOnContentChange({
     contentRef: popoverRef,
     updateOverlayPosition,
@@ -387,6 +393,7 @@ export function ComboBox({
         onPaste={onPaste}
         disabled={false}
         onKeyDownCapture={onKeyDownCapture}
+        onKeyUp={handleInputKeyUp}
         data-test-id={dataTestId}
       />
       <StyledPositionWrapper

From 3a7afc889baec0b60e8723b2efeb3f23a45893c9 Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Wed, 9 Sep 2026 13:30:55 -0400
Subject: [PATCH 11/14] fix(explore): Parse bracketed filter lists and preserve
 text selections

Keep spaces inside [a, b] in value mode so autocomplete does not split the
list, and skip caret realignment when the filter input has a text range.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../conditionalFilter.spec.ts                 | 50 ++++++++++++
 .../conditionalFilter/conditionalFilter.ts    | 80 ++++++++++++++++++-
 .../conditionalFilterInput.tsx                |  7 +-
 3 files changed, 134 insertions(+), 3 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
index 6c1ec233c7c8..eb500185ed51 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.spec.ts
@@ -193,6 +193,44 @@ describe('getConditionalFilterEditContext', () => {
       replaceEnd: value.length - 1,
     });
   });
+
+  it('stays in value mode for a bracketed list with spaces', () => {
+    const value = 'span.op:[db, http]';
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'value',
+      filterKey: 'span.op',
+      editText: '[db, http]',
+      valueQuery: '[db, http]',
+    });
+  });
+
+  it('stays in value mode while typing an unclosed bracketed list', () => {
+    const value = 'span.op:[db, htt';
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'value',
+      filterKey: 'span.op',
+      editText: '[db, htt',
+      valueQuery: '[db, htt',
+    });
+  });
+
+  it('uses key mode after a completed bracketed list and trailing space', () => {
+    const value = 'span.op:[db, http] ';
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'key',
+      editText: '',
+    });
+  });
+
+  it('stays in value mode for quoted entries inside a bracketed list', () => {
+    const value = 'agent_name:["Agent Run","Assisted Query"]';
+    expect(getConditionalFilterEditContext(value, value.length)).toMatchObject({
+      phase: 'value',
+      filterKey: 'agent_name',
+      editText: '["Agent Run","Assisted Query"]',
+      valueQuery: '["Agent Run","Assisted Query"]',
+    });
+  });
 });
 
 describe('replaceConditionalFilterClause', () => {
@@ -235,6 +273,18 @@ describe('replaceConditionalFilterClause', () => {
       newValue: '(span.op:db span.status:)',
     });
   });
+
+  it('does not rewrite a bracketed list when selecting a key suggestion mid-list', () => {
+    const value = 'span.op:[db, http]';
+    // Cursor on `http` inside the list must still replace the whole clause as a value
+    // edit path would; selecting a key suggestion should not split on the space.
+    expect(
+      replaceConditionalFilterClause(value, value.length - 2, 'span.status:')
+    ).toEqual({
+      newCursorIndex: 12,
+      newValue: 'span.status:',
+    });
+  });
 });
 
 describe('formatConditionalFilterClause', () => {
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
index 5bdff5320012..e993c69bb641 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilter.ts
@@ -94,6 +94,38 @@ function hasUnclosedQuote(value: string): boolean {
   return inQuotes;
 }
 
+/**
+ * Length of a complete bracketed list starting at index 0, or null if unclosed /
+ * not a bracketed list. Quotes inside the list are respected so commas and `]`
+ * in `"Agent Run"` do not end the list early.
+ */
+function getClosedBracketListLength(value: string): number | null {
+  if (!value.startsWith('[')) {
+    return null;
+  }
+
+  let inQuotes = false;
+  for (let i = 1; i < value.length; i++) {
+    const char = value[i]!;
+    if (char === '\\' && i + 1 < value.length) {
+      i++;
+      continue;
+    }
+    if (char === '"' && !isEscaped(value, i)) {
+      inQuotes = !inQuotes;
+      continue;
+    }
+    if (!inQuotes && char === ']') {
+      return i + 1;
+    }
+  }
+  return null;
+}
+
+function hasUnclosedBracketList(value: string): boolean {
+  return value.startsWith('[') && getClosedBracketListLength(value) === null;
+}
+
 function stripQuotesForValueSearch(value: string): string {
   if (value.startsWith('"')) {
     const withoutOpen = value.slice(1);
@@ -242,9 +274,10 @@ function getClauseInnerBounds(clause: string): {innerEnd: number; innerStart: nu
  * - empty value after `:`
  * - unquoted value with no trailing whitespace yet
  * - quoted value with an unclosed `"`
+ * - bracketed multi-value list (`[a, b]`) until the matching `]`
  *
- * Once a value is complete (`key:value `, or `key:"quoted"`), subsequent text is a
- * new key and key autocomplete is shown.
+ * Once a value is complete (`key:value `, `key:"quoted"`, or `key:[a, b] `), subsequent
+ * text is a new key and key autocomplete is shown.
  *
  * Leading/trailing grouping parentheses are preserved outside the replace range so
  * suggestions still work inside `(...)`.
@@ -315,6 +348,49 @@ export function getConditionalFilterEditContext(
     }
   }
 
+  // Bracketed multi-value lists (`key:[a, b]`) keep spaces inside the brackets.
+  // Unclosed `[` stays in value mode; a closed list only starts a new key after
+  // trailing whitespace (same as quoted values).
+  if (beforeCursor.startsWith('[')) {
+    if (hasUnclosedBracketList(beforeCursor)) {
+      return {
+        phase: 'value',
+        editText: beforeCursor,
+        filterKey,
+        valueQuery: beforeCursor,
+        replaceStart: absoluteInnerStart,
+        replaceEnd: absoluteInnerEnd,
+      };
+    }
+
+    const listLength = getClosedBracketListLength(beforeCursor);
+    if (listLength !== null) {
+      const afterList = beforeCursor.slice(listLength);
+      const trailingMatch = afterList.match(/^(\s*)(.*)$/);
+      if (trailingMatch) {
+        const [, spaces = '', nextKey = ''] = trailingMatch;
+        if (spaces.length > 0 || nextKey.length > 0) {
+          const keyStartInInner = colonIndex + 1 + listLength + spaces.length;
+          return {
+            phase: 'key',
+            editText: nextKey,
+            replaceStart: absoluteInnerStart + keyStartInInner,
+            replaceEnd: absoluteInnerEnd,
+          };
+        }
+      }
+
+      return {
+        phase: 'value',
+        editText: beforeCursor.slice(0, listLength),
+        filterKey,
+        valueQuery: beforeCursor.slice(0, listLength),
+        replaceStart: absoluteInnerStart,
+        replaceEnd: absoluteInnerEnd,
+      };
+    }
+  }
+
   // Unquoted value: complete once whitespace follows a non-empty token.
   const unquotedMatch = beforeCursor.match(/^(\S+)(\s+)(.*)$/);
   if (unquotedMatch) {
diff --git a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
index f4efcf8f091b..1a92eed2f9fb 100644
--- a/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
+++ b/static/app/components/arithmeticBuilder/conditionalFilter/conditionalFilterInput.tsx
@@ -80,7 +80,9 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
   }, [inputRef, inputValue]);
 
   // Suggestion updates re-render the controlled input and can reset the DOM caret.
-  // Keep the caret aligned with selectionIndex so key↔value autocomplete stays correct.
+  // Keep a collapsed caret aligned with selectionIndex so key↔value autocomplete stays
+  // correct. Never collapse an active text range (select-all + Backspace must stay in
+  // the argument, not delete the whole function).
   useLayoutEffect(() => {
     if (!isCurrentlyEditing) {
       return;
@@ -89,6 +91,9 @@ export function ConditionalFilterArgumentInput(props: FunctionArgumentInputProps
     if (!input || document.activeElement !== input) {
       return;
     }
+    if (input.selectionStart !== input.selectionEnd) {
+      return;
+    }
     if (
       input.selectionStart === selectionIndex &&
       input.selectionEnd === selectionIndex

From b58d6ddef70ba69b805ae402684fb9beab78b7de Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Fri, 11 Sep 2026 13:47:51 -0400
Subject: [PATCH 12/14] fix(explore): Keep equation mid-gaps clickable and long
 chips in bounds

Restore a 9px hit target between tokens after deleting an operator, and
constrain long function arguments so they stay inside the field without
covering the function name.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/arithmeticBuilder/index.tsx    |  2 +
 .../arithmeticBuilder/token/freeText.tsx      |  7 ++--
 .../arithmeticBuilder/token/function.tsx      | 19 ++++++---
 .../arithmeticBuilder/token/grid.tsx          |  2 +
 .../arithmeticBuilder/token/index.spec.tsx    | 40 +++++++++++++++++++
 .../arithmeticBuilder/token/styles.tsx        | 12 +++++-
 .../token/useFunctionArgumentInput.tsx        | 14 +++++--
 7 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/static/app/components/arithmeticBuilder/index.tsx b/static/app/components/arithmeticBuilder/index.tsx
index e9600fa66382..e62dceeddfad 100644
--- a/static/app/components/arithmeticBuilder/index.tsx
+++ b/static/app/components/arithmeticBuilder/index.tsx
@@ -128,6 +128,8 @@ const Wrapper = styled(Input.withComponent('div'))<{state: 'valid' | 'invalid'}>
   padding: 0;
   height: auto;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   position: relative;
   font-size: ${p => p.theme.font.size.md};
   cursor: text;
diff --git a/static/app/components/arithmeticBuilder/token/freeText.tsx b/static/app/components/arithmeticBuilder/token/freeText.tsx
index 82ce9d6a4ac1..410774bf66e1 100644
--- a/static/app/components/arithmeticBuilder/token/freeText.tsx
+++ b/static/app/components/arithmeticBuilder/token/freeText.tsx
@@ -656,9 +656,10 @@ const GridCell = styled('div', {
   width: 100%;
 
   input {
-    /* Collapsed empty spacers between tokens stay zero-width so they do not wrap.
-     * The empty trailing field still needs the same horizontal inset as
-     * SearchQueryBuilder so the placeholder lines up with the aggregate filter. */
+    /* Collapsed empty spacers stay zero-width/padding so they do not wrap.
+     * Mid-expression hit targets come from the Row collapsed mid-gap width in
+     * styles.tsx. Trailing empty fields with a placeholder keep horizontal
+     * inset so it lines up with the aggregate filter. */
     padding: 0 ${p => (p.collapsed && !p.showPlaceholder ? 0 : p.theme.space.xs)};
     min-width: ${p => (p.collapsed && !p.showPlaceholder ? 0 : '9px')};
     width: 100%;
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index 5d2f1a26c6a6..087878168fd9 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -106,9 +106,9 @@ export function ArithmeticTokenFunction({
       aria-invalid={false}
       state="valid"
     >
-      <FunctionGridCell {...gridCellProps} onMouseDown={onFunctionNameMouseDown}>
+      <FunctionNameCell {...gridCellProps} onMouseDown={onFunctionNameMouseDown}>
         {token.function}
-      </FunctionGridCell>
+      </FunctionNameCell>
       {/* Function tokens are keyed by position (`func:0`), so deleting an earlier
           function reuses this component for the next one. Remount the arguments
           grid when the token identity changes so we don't keep the previous
@@ -120,9 +120,9 @@ export function ArithmeticTokenFunction({
         state={state}
         token={token}
       />
-      <BaseGridCell {...gridCellProps}>
+      <FunctionChromeCell {...gridCellProps}>
         <DeleteButton token={token} label={t('Remove function %s', token.text)} />
-      </BaseGridCell>
+      </FunctionChromeCell>
     </FunctionWrapper>
   );
 }
@@ -270,12 +270,15 @@ function ArgumentsGridList({
     ref,
   });
 
+  // Shrink to fit beside the function name; do not grow to the full chip width
+  // (that painted long filters over the name).
   return (
     <Flex
       justify="start"
       wrap="wrap"
       flexGrow={0}
       flexShrink={1}
+      minWidth="0"
       height="100%"
       position="relative"
       {...gridProps}
@@ -732,9 +735,15 @@ const BaseGridCell = styled('div')`
   position: relative;
   height: 100%;
   min-height: 22px;
+  min-width: 0;
+`;
+
+/* Name + delete must not shrink so long arguments cannot cover them. */
+const FunctionChromeCell = styled(BaseGridCell)`
+  flex-shrink: 0;
 `;
 
-const FunctionGridCell = styled(BaseGridCell)`
+const FunctionNameCell = styled(FunctionChromeCell)`
   color: ${p => p.theme.colors.green500};
   padding-left: ${p => p.theme.space.xs};
 `;
diff --git a/static/app/components/arithmeticBuilder/token/grid.tsx b/static/app/components/arithmeticBuilder/token/grid.tsx
index 9d57b752a24a..e363dbe9ab39 100644
--- a/static/app/components/arithmeticBuilder/token/grid.tsx
+++ b/static/app/components/arithmeticBuilder/token/grid.tsx
@@ -234,6 +234,8 @@ function GridList({showPlaceholder, ...props}: GridListProps) {
 const TokenGridWrapper = styled('div')`
   box-sizing: border-box;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   min-height: 100%;
   /* Match SearchQueryBuilder so equation and aggregate filter rows share height.
    * +1px accounts for the border; keep horizontal padding so empty-field clicks
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 17f69c9000e4..042f71844a69 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -9,6 +9,7 @@ import {
   waitFor,
   within,
 } from 'sentry-test/reactTestingLibrary';
+import {getEmotionRules} from 'sentry-test/utils';
 
 import type {ArithmeticBuilderAction} from 'sentry/components/arithmeticBuilder/action';
 import {useArithmeticBuilderAction} from 'sentry/components/arithmeticBuilder/action';
@@ -1762,6 +1763,45 @@ describe('token', () => {
   });
 
   describe('ArithmeticTokenOperator', () => {
+    it('keeps mid-expression empty free text clickable after deleting an operator', async () => {
+      render(<Tokens expression="avg(span.duration)+sum(span.duration)" />);
+
+      expect(screen.getByRole('gridcell', {name: 'Delete +'})).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('gridcell', {name: 'Delete +'}));
+      await waitFor(() => {
+        expect(
+          screen.queryByRole('gridcell', {name: 'Delete +'})
+        ).not.toBeInTheDocument();
+      });
+
+      // Free text: leading spacer, gap between functions, trailing field.
+      // Leading/mid empty spacers can be zero-width in jsdom's layout stub, so
+      // include hidden nodes when collecting them.
+      const freeTextInputs = screen.getAllByRole('combobox', {
+        name: 'Add a term',
+        hidden: true,
+      });
+      expect(freeTextInputs).toHaveLength(3);
+
+      const middleFreeTextRow = freeTextInputs[1]!.closest('[role="row"]') as HTMLElement;
+      const middleRules = getEmotionRules(middleFreeTextRow).join(' ');
+      // Collapsed mid gaps must keep a hit target (leading stays 0 to avoid wrap).
+      // getComputedStyle is stubbed in tests, so assert the emotion rules instead.
+      expect(middleRules).toMatch(/:not\(:first-child\):not\(:last-child\)/);
+      expect(middleRules).toMatch(/min-width:\s*9px/);
+
+      // Click the mid gap (regression: a zero-width spacer made this impossible),
+      // then restore the operator through that free-text input.
+      await userEvent.click(freeTextInputs[1]!);
+      expect(freeTextInputs[1]).toHaveFocus();
+      await userEvent.type(freeTextInputs[1]!, '+', {skipClick: true});
+      await userEvent.keyboard('{Escape}');
+
+      expect(
+        await screen.findByRole('gridcell', {name: 'Delete +', hidden: true})
+      ).toBeInTheDocument();
+    });
+
     it('renders addition operator', async () => {
       const dispatch = jest.fn();
       render(<Tokens expression="+" dispatch={dispatch} />);
diff --git a/static/app/components/arithmeticBuilder/token/styles.tsx b/static/app/components/arithmeticBuilder/token/styles.tsx
index f253b25b54fc..a0434912cebd 100644
--- a/static/app/components/arithmeticBuilder/token/styles.tsx
+++ b/static/app/components/arithmeticBuilder/token/styles.tsx
@@ -18,8 +18,10 @@ export const Row = styled('div', {
     `}
 
   /* Empty spacers must not consume a flex line. A wide _if function is
-     max-width 100%, so even a few pixels of leading/trailing free text wrap
-     onto their own row. Last-child still grows to fill leftover space. */
+     max-width 100%, so even a few pixels of leading free text wrap onto
+     their own row. Last-child still grows to fill leftover space.
+     Mid-expression empty gaps keep a small hit target so deleting an
+     operator does not leave an unclickable seam between tokens. */
   ${p =>
     p.collapsed &&
     css`
@@ -29,6 +31,12 @@ export const Row = styled('div', {
       flex-shrink: 0;
       flex-basis: 0;
       overflow: visible;
+
+      &:not(:first-child):not(:last-child) {
+        width: 9px;
+        min-width: 9px;
+        flex-basis: 9px;
+      }
     `}
 
   &:last-child {
diff --git a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
index 2a012d073788..b751e9c18f28 100644
--- a/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
+++ b/static/app/components/arithmeticBuilder/token/useFunctionArgumentInput.tsx
@@ -266,23 +266,29 @@ export function ArgumentGridRow(props: FlexProps) {
       position="relative"
       height="100%"
       flex="0 1 auto"
-      maxWidth="fit-content"
+      minWidth="0"
+      maxWidth="100%"
       {...props}
     />
   );
 }
 
 const StyledArgumentGridCell = styled(Flex)`
+  min-width: 0;
+  max-width: 100%;
+
   ${UnstyledInput} {
     max-width: 130px;
     min-width: 0;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  /* The expandable equation/filter field sets data-expanded while focused. Lift
-     the cap so long arguments are fully readable; stay truncated when collapsed. */
+  /* Expanded bars: grow into the remaining args column (beside the function
+     name), not the full chip width. */
   [data-expanded='true'] & ${UnstyledInput} {
-    max-width: none;
+    max-width: 100%;
   }
 `;
 

From 23218e906bd0684a66aeb4c7cd1b45fb651d30c8 Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Fri, 11 Sep 2026 14:38:29 -0400
Subject: [PATCH 13/14] style(explore): Prefer non-null assertion in equation
 mid-gap test

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/app/components/arithmeticBuilder/token/index.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 042f71844a69..7a975e0896fb 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -1783,7 +1783,7 @@ describe('token', () => {
       });
       expect(freeTextInputs).toHaveLength(3);
 
-      const middleFreeTextRow = freeTextInputs[1]!.closest('[role="row"]') as HTMLElement;
+      const middleFreeTextRow = freeTextInputs[1]!.closest('[role="row"]')!;
       const middleRules = getEmotionRules(middleFreeTextRow).join(' ');
       // Collapsed mid gaps must keep a hit target (leading stays 0 to avoid wrap).
       // getComputedStyle is stubbed in tests, so assert the emotion rules instead.

From d7e95f95ace1fa7cf3076cfef63f49250c05244d Mon Sep 17 00:00:00 2001
From: William Mak <william@wmak.io>
Date: Mon, 14 Sep 2026 12:49:14 -0400
Subject: [PATCH 14/14] fix(explore): Narrow mid-gap free text row type for
 getEmotionRules

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/app/components/arithmeticBuilder/token/index.spec.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index 7a975e0896fb..347b3d41a2d0 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -1783,7 +1783,10 @@ describe('token', () => {
       });
       expect(freeTextInputs).toHaveLength(3);
 
-      const middleFreeTextRow = freeTextInputs[1]!.closest('[role="row"]')!;
+      const middleFreeTextRow = freeTextInputs[1]!.closest('[role="row"]');
+      if (!(middleFreeTextRow instanceof HTMLElement)) {
+        throw new Error('Expected mid-expression free text row');
+      }
       const middleRules = getEmotionRules(middleFreeTextRow).join(' ');
       // Collapsed mid gaps must keep a hit target (leading stays 0 to avoid wrap).
       // getComputedStyle is stubbed in tests, so assert the emotion rules instead.