From 2d5bf7d5f82201e13d0f12263dded20861e65a3d Mon Sep 17 00:00:00 2001
From: Jonas <jonas.badalic@sentry.io>
Date: Tue, 7 Apr 2026 01:20:40 -0700
Subject: [PATCH 01/18] ref(settings): Migrate personal tokens pages to
 useScrapsForm (#110502)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrates the personal API tokens settings pages (`apiNewToken.tsx` and
`apiTokenDetails.tsx`) from the deprecated `ApiForm`/`Form`+`FormModel`
system to the new `useScrapsForm` + `fetchMutation` pattern, consistent
with the org auth tokens implementation.

**What changed:**

- `apiNewToken.tsx`: replaces the deprecated `ApiForm` wrapper with
`useScrapsForm` + `useMutation`/`fetchMutation`. Permissions remain
local `useState` — scopes are derived via `permissionStateToList` at
submit time rather than through the old form model's `scopes` field. The
disabled `TextareaField` preview becomes a read-only `FieldGroup`.
- `apiTokenDetails.tsx`: replaces `Form` + the `useMutateApiToken` hook
with `useScrapsForm` + an inline `useMutation`. Read-only fields (token
preview, scopes) move from disabled `TextField`/`FieldGroup` to plain
`FieldGroup` with a `<div>`, matching the org tokens pattern. Query
cache updates are preserved.
- `permissionSelection.tsx`: exports `permissionStateToList` so callers
can compute the full hierarchical scope list independently; guards
`this.context.form?.setValue` with optional chaining so the component
works outside a legacy `FormModel` context tree.
- Deletes `useMutateApiToken.tsx` — no remaining consumers after the
details page migration.
- Expands test coverage: adds success modal appearance, API error
handling, initial render state (name/preview/scopes), and fetch error
state; renames the misnamed `describe('ApiNewToken')` block in the
details spec.

Fixes DE-965
Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io>
---
 static/app/utils/useMutateApiToken.tsx        |  86 --------
 .../settings/account/apiNewToken.spec.tsx     |  60 +++++-
 .../views/settings/account/apiNewToken.tsx    | 192 ++++++++++-------
 .../settings/account/apiTokenDetails.spec.tsx |  72 ++++---
 .../settings/account/apiTokenDetails.tsx      | 203 +++++++++++-------
 .../permissionSelection.tsx                   |   7 +-
 6 files changed, 350 insertions(+), 270 deletions(-)
 delete mode 100644 static/app/utils/useMutateApiToken.tsx

diff --git a/static/app/utils/useMutateApiToken.tsx b/static/app/utils/useMutateApiToken.tsx
deleted file mode 100644
index e7ad92b3d46db5..00000000000000
--- a/static/app/utils/useMutateApiToken.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type {InternalAppApiToken} from 'sentry/types/user';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {
-  getApiQueryData,
-  setApiQueryData,
-  useMutation,
-  useQueryClient,
-  type ApiQueryKey,
-} from 'sentry/utils/queryClient';
-import type {RequestError} from 'sentry/utils/requestError/requestError';
-import {useApi} from 'sentry/utils/useApi';
-
-const API_TOKEN_QUERY_KEY: ApiQueryKey = [getApiUrl('/api-tokens/')];
-
-type UpdateTokenQueryVariables = {
-  name: string;
-};
-type FetchApiTokenParameters = {
-  tokenId: string;
-};
-const makeFetchApiTokenKey = ({tokenId}: FetchApiTokenParameters): ApiQueryKey => [
-  getApiUrl('/api-tokens/$tokenId/', {path: {tokenId}}),
-];
-
-interface UseMutateApiTokenProps {
-  token: InternalAppApiToken;
-  onError?: (error: RequestError) => void;
-  onSuccess?: (token: InternalAppApiToken | undefined) => void;
-}
-
-export function useMutateApiToken({token, onSuccess, onError}: UseMutateApiTokenProps) {
-  const api = useApi();
-  const queryClient = useQueryClient();
-  return useMutation<unknown, RequestError, UpdateTokenQueryVariables>({
-    mutationFn: ({name}) =>
-      api.requestPromise(`/api-tokens/${token.id}/`, {
-        method: 'PUT',
-        data: {
-          name,
-        },
-      }),
-
-    onSuccess: (_data, {name}) => {
-      // Update get by id query
-      let updatedData: InternalAppApiToken | undefined = undefined;
-      updatedData = setApiQueryData(
-        queryClient,
-        makeFetchApiTokenKey({tokenId: token.id}),
-        (oldData?: InternalAppApiToken) => {
-          if (!oldData) {
-            return oldData;
-          }
-
-          oldData.name = name;
-
-          return oldData;
-        }
-      );
-
-      // Update get list query
-      if (getApiQueryData(queryClient, API_TOKEN_QUERY_KEY)) {
-        setApiQueryData(
-          queryClient,
-          API_TOKEN_QUERY_KEY,
-          (oldData?: InternalAppApiToken[]) => {
-            if (!Array.isArray(oldData)) {
-              return oldData;
-            }
-
-            const existingToken = oldData.find(oldToken => oldToken.id === token.id);
-
-            if (existingToken) {
-              existingToken.name = name;
-            }
-
-            return oldData;
-          }
-        );
-      }
-      return onSuccess?.(updatedData);
-    },
-    onError: error => {
-      return onError?.(error);
-    },
-  });
-}
diff --git a/static/app/views/settings/account/apiNewToken.spec.tsx b/static/app/views/settings/account/apiNewToken.spec.tsx
index bc1183d936cfd6..0fbdc6d86b5e94 100644
--- a/static/app/views/settings/account/apiNewToken.spec.tsx
+++ b/static/app/views/settings/account/apiNewToken.spec.tsx
@@ -1,6 +1,15 @@
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {ApiTokenFixture} from 'sentry-fixture/apiToken';
+
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
 import {selectEvent} from 'sentry-test/selectEvent';
 
+import * as indicators from 'sentry/actionCreators/indicator';
 import ApiNewToken from 'sentry/views/settings/account/apiNewToken';
 
 describe('ApiNewToken', () => {
@@ -140,4 +149,53 @@ describe('ApiNewToken', () => {
       )
     );
   });
+
+  it('shows new token modal after successful creation', async () => {
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      method: 'POST',
+      url: '/api-tokens/',
+      body: ApiTokenFixture({token: 'sntrys_test_token_123'}),
+    });
+
+    render(<ApiNewToken />);
+    renderGlobalModal();
+
+    await selectEvent.select(screen.getByRole('textbox', {name: 'Project'}), 'Read');
+
+    await userEvent.click(screen.getByRole('button', {name: 'Create Token'}));
+
+    expect(await screen.findByLabelText('Generated token')).toHaveValue(
+      'sntrys_test_token_123'
+    );
+  });
+
+  it('displays permissions preview when scopes are selected', async () => {
+    render(<ApiNewToken />);
+
+    await selectEvent.select(screen.getByRole('textbox', {name: 'Project'}), 'Read');
+    expect(screen.getByText(/project:read/)).toBeInTheDocument();
+
+    await selectEvent.select(screen.getByRole('textbox', {name: 'Team'}), 'Admin');
+    expect(screen.getByText(/team:admin/)).toBeInTheDocument();
+  });
+
+  it('shows error message when token creation fails', async () => {
+    jest.spyOn(indicators, 'addErrorMessage');
+
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      method: 'POST',
+      url: '/api-tokens/',
+      statusCode: 400,
+    });
+
+    render(<ApiNewToken />);
+
+    await selectEvent.select(screen.getByRole('textbox', {name: 'Project'}), 'Read');
+
+    await userEvent.click(screen.getByRole('button', {name: 'Create Token'}));
+
+    await waitFor(() => expect(indicators.addErrorMessage).toHaveBeenCalled());
+  });
 });
diff --git a/static/app/views/settings/account/apiNewToken.tsx b/static/app/views/settings/account/apiNewToken.tsx
index 29aa3db22ef3bc..8352e47ee54609 100644
--- a/static/app/views/settings/account/apiNewToken.tsx
+++ b/static/app/views/settings/account/apiNewToken.tsx
@@ -1,10 +1,17 @@
 import {useCallback, useState} from 'react';
+import {z} from 'zod';
 
+import {Button} from '@sentry/scraps/button';
+import {defaultFormOptions, useScrapsForm} from '@sentry/scraps/form';
+import {Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 
-import {ApiForm} from 'sentry/components/forms/apiForm';
-import {TextareaField} from 'sentry/components/forms/fields/textareaField';
-import {TextField} from 'sentry/components/forms/fields/textField';
+import {
+  addErrorMessage,
+  addLoadingMessage,
+  addSuccessMessage,
+} from 'sentry/actionCreators/indicator';
+import {FieldGroup} from 'sentry/components/forms/fieldGroup';
 import {Panel} from 'sentry/components/panels/panel';
 import {PanelBody} from 'sentry/components/panels/panelBody';
 import {PanelHeader} from 'sentry/components/panels/panelHeader';
@@ -16,54 +23,101 @@ import {
 import {t, tct} from 'sentry/locale';
 import type {Permissions} from 'sentry/types/integrations';
 import type {NewInternalAppApiToken} from 'sentry/types/user';
+import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {handleXhrErrorResponse} from 'sentry/utils/handleXhrErrorResponse';
+import {fetchMutation, useMutation, useQueryClient} from 'sentry/utils/queryClient';
+import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {displayNewToken} from 'sentry/views/settings/components/newTokenHandler';
 import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageHeader';
 import {TextBlock} from 'sentry/views/settings/components/text/textBlock';
-import {PermissionSelection} from 'sentry/views/settings/organizationDeveloperSettings/permissionSelection';
+import {
+  PermissionSelection,
+  permissionStateToList,
+} from 'sentry/views/settings/organizationDeveloperSettings/permissionSelection';
 
 const API_INDEX_ROUTE = '/settings/account/api/auth-tokens/';
 
-export default function ApiNewToken() {
-  const [permissions, setPermissions] = useState<Permissions>({
-    Event: 'no-access',
-    Team: 'no-access',
-    Member: 'no-access',
-    Project: 'no-access',
-    Release: 'no-access',
-    Organization: 'no-access',
-    Alerts: 'no-access',
-    Distribution: 'no-access',
-  });
-  const navigate = useNavigate();
-  const [hasNewToken, setHasnewToken] = useState(false);
-  const [preview, setPreview] = useState<string>('');
+const schema = z.object({
+  name: z.string(),
+});
 
-  // Personal tokens can't be used for Distribution. The point of
-  // Distribution is to emebed the token into an app. We don't want people
-  // using personal tokens for that.
-  const displayedPermissions = SENTRY_APP_PERMISSIONS.filter(
-    o => o !== DISTRIBUTION_SENTRY_APP_PERMISSION
-  );
+const INITIAL_PERMISSIONS: Permissions = {
+  Event: 'no-access',
+  Team: 'no-access',
+  Member: 'no-access',
+  Project: 'no-access',
+  Release: 'no-access',
+  Organization: 'no-access',
+  Alerts: 'no-access',
+  Distribution: 'no-access',
+};
 
-  const getPreview = () => {
-    let previewString = '';
-    for (const k in permissions) {
-      // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-      if (permissions[k] !== 'no-access') {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-        previewString += `${k.toLowerCase()}:${permissions[k]}\n`;
-      }
-    }
-    return previewString;
-  };
+// Personal tokens can't be used for Distribution. The point of
+// Distribution is to embed the token into an app. We don't want people
+// using personal tokens for that.
+const DISPLAYED_PERMISSIONS = SENTRY_APP_PERMISSIONS.filter(
+  o => o !== DISTRIBUTION_SENTRY_APP_PERMISSION
+);
+
+function getPermissionsPreview(permissions: Permissions): string {
+  return Object.entries(permissions)
+    .filter(([, access]) => access !== 'no-access')
+    .map(([resource, access]) => `${resource.toLowerCase()}:${access}`)
+    .join(', ');
+}
+
+export default function ApiNewToken() {
+  const [permissions, setPermissions] = useState<Permissions>({...INITIAL_PERMISSIONS});
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const handleGoBack = useCallback(
     () => navigate(normalizeUrl(API_INDEX_ROUTE)),
     [navigate]
   );
 
+  const allPermissionsNoAccess = Object.values(permissions).every(
+    value => value === 'no-access'
+  );
+
+  const mutation = useMutation({
+    mutationFn: (data: z.infer<typeof schema>) =>
+      fetchMutation<NewInternalAppApiToken>({
+        url: '/api-tokens/',
+        method: 'POST',
+        data: {
+          ...data,
+          scopes: permissionStateToList(permissions).filter(
+            (v): v is NonNullable<typeof v> => v !== undefined
+          ),
+        },
+      }),
+    onSuccess: token => {
+      addSuccessMessage(t('Created personal token.'));
+      queryClient.invalidateQueries({queryKey: [getApiUrl('/api-tokens/')]});
+      displayNewToken(token.token, handleGoBack);
+    },
+    onError: (error: RequestError) => {
+      const message = t('Failed to create a new personal token.');
+      handleXhrErrorResponse(message, error);
+      addErrorMessage(message);
+    },
+  });
+
+  const form = useScrapsForm({
+    ...defaultFormOptions,
+    defaultValues: {name: ''},
+    validators: {onDynamic: schema},
+    onSubmit: ({value}) => {
+      addLoadingMessage();
+      return mutation.mutateAsync(value).catch(() => {});
+    },
+  });
+
+  const permissionsPreview = getPermissionsPreview(permissions);
+
   return (
     <SentryDocumentTitle title={t('Create New Personal Token')}>
       <div>
@@ -81,59 +135,43 @@ export default function ApiNewToken() {
             }
           )}
         </TextBlock>
-        <ApiForm
-          apiMethod="POST"
-          apiEndpoint="/api-tokens/"
-          initialData={{scopes: [], name: ''}}
-          onSubmitSuccess={(token: NewInternalAppApiToken) => {
-            setHasnewToken(true);
-            displayNewToken(token.token, handleGoBack);
-          }}
-          onCancel={handleGoBack}
-          footerStyle={{
-            marginTop: 0,
-            paddingRight: 20,
-          }}
-          submitDisabled={
-            !!hasNewToken ||
-            Object.values(permissions).every(value => value === 'no-access')
-          }
-          submitLabel={t('Create Token')}
-        >
-          <Panel>
-            <PanelHeader>{t('General')}</PanelHeader>
-            <PanelBody>
-              <TextField
-                name="name"
-                label={t('Name')}
-                help={t('A name to help you identify this token.')}
-              />
-            </PanelBody>
-          </Panel>
+        <form.AppForm form={form}>
+          <form.FieldGroup title={t('General')}>
+            <form.AppField name="name">
+              {field => (
+                <field.Layout.Row
+                  label={t('Name')}
+                  hintText={t('A name to help you identify this token.')}
+                >
+                  <field.Input value={field.state.value} onChange={field.handleChange} />
+                </field.Layout.Row>
+              )}
+            </form.AppField>
+          </form.FieldGroup>
           <Panel>
             <PanelHeader>{t('Permissions')}</PanelHeader>
             <PanelBody>
               <PermissionSelection
                 appPublished={false}
                 permissions={permissions}
-                onChange={p => {
-                  setPermissions(p);
-                  setPreview(getPreview());
-                }}
-                displayedPermissions={displayedPermissions}
+                onChange={p => setPermissions({...p})}
+                displayedPermissions={DISPLAYED_PERMISSIONS}
               />
             </PanelBody>
-            <TextareaField
-              name="permissions-preview"
+            <FieldGroup
               label={t('Permissions Preview')}
               help={t('Your token will have the following scopes.')}
-              rows={3}
-              autosize
-              placeholder={preview}
-              disabled
-            />
+            >
+              <div>{permissionsPreview || '—'}</div>
+            </FieldGroup>
           </Panel>
-        </ApiForm>
+          <Flex justify="end" gap="md" padding="md">
+            <Button onClick={handleGoBack}>{t('Cancel')}</Button>
+            <form.SubmitButton disabled={mutation.isSuccess || allPermissionsNoAccess}>
+              {t('Create Token')}
+            </form.SubmitButton>
+          </Flex>
+        </form.AppForm>
       </div>
     </SentryDocumentTitle>
   );
diff --git a/static/app/views/settings/account/apiTokenDetails.spec.tsx b/static/app/views/settings/account/apiTokenDetails.spec.tsx
index 731e027416de1a..9aa6231a4b7c83 100644
--- a/static/app/views/settings/account/apiTokenDetails.spec.tsx
+++ b/static/app/views/settings/account/apiTokenDetails.spec.tsx
@@ -5,8 +5,49 @@ import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrar
 import * as indicators from 'sentry/actionCreators/indicator';
 import ApiTokenDetails from 'sentry/views/settings/account/apiTokenDetails';
 
-describe('ApiNewToken', () => {
-  MockApiClient.clearMockResponses();
+const ROUTER_CONFIG = {
+  initialRouterConfig: {
+    route: `/api/auth-tokens/:tokenId/`,
+    location: {
+      pathname: `/api/auth-tokens/1/`,
+    },
+  },
+};
+
+describe('ApiTokenDetails', () => {
+  it('renders token name, preview, and scopes', async () => {
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/api-tokens/1/`,
+      body: ApiTokenFixture({
+        id: '1',
+        name: 'My Token',
+        scopes: ['project:read', 'project:write'],
+        tokenLastCharacters: 'n123',
+      }),
+    });
+
+    render(<ApiTokenDetails />, ROUTER_CONFIG);
+
+    const nameInput = await screen.findByRole('textbox', {name: /name/i});
+    expect(nameInput).toHaveValue('My Token');
+    expect(screen.getByText('************n123')).toBeInTheDocument();
+    expect(screen.getByText('project:read, project:write')).toBeInTheDocument();
+  });
+
+  it('shows error state when token fails to load', async () => {
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/api-tokens/1/`,
+      statusCode: 500,
+    });
+
+    render(<ApiTokenDetails />, ROUTER_CONFIG);
+
+    expect(await screen.findByText('Failed to load personal token.')).toBeInTheDocument();
+  });
 
   it('renames token to new name', async () => {
     MockApiClient.clearMockResponses();
@@ -18,14 +59,7 @@ describe('ApiNewToken', () => {
       body: ApiTokenFixture({id: '1', name: 'token1'}),
     });
 
-    render(<ApiTokenDetails />, {
-      initialRouterConfig: {
-        route: `/api/auth-tokens/:tokenId/`,
-        location: {
-          pathname: `/api/auth-tokens/1/`,
-        },
-      },
-    });
+    render(<ApiTokenDetails />, ROUTER_CONFIG);
 
     await waitFor(() => expect(mock1).toHaveBeenCalledTimes(1));
 
@@ -63,14 +97,7 @@ describe('ApiNewToken', () => {
       body: ApiTokenFixture({id: '1', name: 'token1'}),
     });
 
-    render(<ApiTokenDetails />, {
-      initialRouterConfig: {
-        route: `/api/auth-tokens/:tokenId/`,
-        location: {
-          pathname: `/api/auth-tokens/1/`,
-        },
-      },
-    });
+    render(<ApiTokenDetails />, ROUTER_CONFIG);
 
     await waitFor(() => expect(mock1).toHaveBeenCalledTimes(1));
 
@@ -108,14 +135,7 @@ describe('ApiNewToken', () => {
       body: ApiTokenFixture({id: '1', name: 'token1'}),
     });
 
-    render(<ApiTokenDetails />, {
-      initialRouterConfig: {
-        route: `/api/auth-tokens/:tokenId/`,
-        location: {
-          pathname: `/api/auth-tokens/1/`,
-        },
-      },
-    });
+    render(<ApiTokenDetails />, ROUTER_CONFIG);
 
     await waitFor(() => expect(mock1).toHaveBeenCalledTimes(1));
 
diff --git a/static/app/views/settings/account/apiTokenDetails.tsx b/static/app/views/settings/account/apiTokenDetails.tsx
index 2cb49e491b158e..0ffa6113402f39 100644
--- a/static/app/views/settings/account/apiTokenDetails.tsx
+++ b/static/app/views/settings/account/apiTokenDetails.tsx
@@ -1,3 +1,9 @@
+import {useCallback} from 'react';
+import {z} from 'zod';
+
+import {Button} from '@sentry/scraps/button';
+import {defaultFormOptions, useScrapsForm} from '@sentry/scraps/form';
+import {Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 
 import {
@@ -6,21 +12,23 @@ import {
   addSuccessMessage,
 } from 'sentry/actionCreators/indicator';
 import {FieldGroup} from 'sentry/components/forms/fieldGroup';
-import {TextField} from 'sentry/components/forms/fields/textField';
-import {Form} from 'sentry/components/forms/form';
 import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
-import {Panel} from 'sentry/components/panels/panel';
-import {PanelBody} from 'sentry/components/panels/panelBody';
-import {PanelHeader} from 'sentry/components/panels/panelHeader';
 import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import type {InternalAppApiToken} from 'sentry/types/user';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import {handleXhrErrorResponse} from 'sentry/utils/handleXhrErrorResponse';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {
+  fetchMutation,
+  getApiQueryData,
+  setApiQueryData,
+  useApiQuery,
+  useMutation,
+  useQueryClient,
+} from 'sentry/utils/queryClient';
+import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
-import {useMutateApiToken} from 'sentry/utils/useMutateApiToken';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useParams} from 'sentry/utils/useParams';
 import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageHeader';
@@ -37,68 +45,112 @@ type FetchApiTokenResponse = InternalAppApiToken;
 const makeFetchApiTokenKey = ({tokenId}: FetchApiTokenParameters) =>
   [getApiUrl(`/api-tokens/$tokenId/`, {path: {tokenId}})] as const;
 
+const API_TOKEN_LIST_KEY = [getApiUrl('/api-tokens/')] as const;
+
+const schema = z.object({
+  name: z.string(),
+});
+
 function ApiTokenDetailsForm({token}: {token: InternalAppApiToken}) {
   const navigate = useNavigate();
-  const initialData = {
-    name: token.name,
-    tokenPreview: tokenPreview(token.tokenLastCharacters || '****'),
-  };
-
-  const handleGoBack = () => {
-    navigate(normalizeUrl(API_INDEX_ROUTE));
-  };
-
-  const onSuccess = () => {
-    addSuccessMessage(t('Updated user auth token.'));
-    handleGoBack();
-  };
-
-  const onError = (error: any) => {
-    const message = t('Failed to update the user auth token.');
-    handleXhrErrorResponse(message, error);
-    addErrorMessage(message);
-  };
-
-  const {mutate: submitToken} = useMutateApiToken({
-    token,
-    onSuccess,
-    onError,
+  const queryClient = useQueryClient();
+
+  const handleGoBack = useCallback(
+    () => navigate(normalizeUrl(API_INDEX_ROUTE)),
+    [navigate]
+  );
+
+  const mutation = useMutation({
+    mutationFn: (data: z.infer<typeof schema>) =>
+      fetchMutation({
+        url: `/api-tokens/${token.id}/`,
+        method: 'PUT',
+        data,
+      }),
+    onSuccess: (_data, {name}) => {
+      addSuccessMessage(t('Updated user auth token.'));
+
+      // Update get by id query
+      setApiQueryData(
+        queryClient,
+        makeFetchApiTokenKey({tokenId: token.id}),
+        (oldData: InternalAppApiToken | undefined) => {
+          if (!oldData) {
+            return oldData;
+          }
+          return {...oldData, name};
+        }
+      );
+
+      // Update get list query
+      if (getApiQueryData(queryClient, API_TOKEN_LIST_KEY)) {
+        setApiQueryData(
+          queryClient,
+          API_TOKEN_LIST_KEY,
+          (oldData: InternalAppApiToken[] | undefined) => {
+            if (!Array.isArray(oldData)) {
+              return oldData;
+            }
+            return oldData.map(oldToken =>
+              oldToken.id === token.id ? {...oldToken, name} : oldToken
+            );
+          }
+        );
+      }
+
+      handleGoBack();
+    },
+    onError: (error: RequestError) => {
+      const message = t('Failed to update the user auth token.');
+      handleXhrErrorResponse(message, error);
+      addErrorMessage(message);
+    },
+  });
+
+  const form = useScrapsForm({
+    ...defaultFormOptions,
+    defaultValues: {name: token.name},
+    validators: {onDynamic: schema},
+    onSubmit: ({value}) => {
+      addLoadingMessage();
+      return mutation.mutateAsync(value).catch(() => {});
+    },
   });
 
   return (
-    <Form
-      apiMethod="PUT"
-      initialData={initialData}
-      apiEndpoint={`/api-tokens/${token.id}/`}
-      onSubmit={({name}) => {
-        addLoadingMessage();
-
-        return submitToken({
-          name,
-        });
-      }}
-      onCancel={handleGoBack}
-    >
-      <TextField
-        name="name"
-        label={t('Name')}
-        help={t('A name to help you identify this token.')}
-      />
-
-      <TextField
-        name="tokenPreview"
-        label={t('Token')}
-        disabled
-        help={t('You can only view the token once after creation.')}
-      />
-
-      <FieldGroup
-        label={t('Scopes')}
-        help={t('You cannot change the scopes of an existing token.')}
-      >
-        <div>{token.scopes.slice().sort().join(', ')}</div>
-      </FieldGroup>
-    </Form>
+    <form.AppForm form={form}>
+      <form.FieldGroup title={t('Personal Token Details')}>
+        <form.AppField name="name">
+          {field => (
+            <field.Layout.Row
+              label={t('Name')}
+              hintText={t('A name to help you identify this token.')}
+            >
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+
+        <FieldGroup
+          label={t('Token')}
+          help={t('You can only view the token once after creation.')}
+        >
+          <div>{tokenPreview(token.tokenLastCharacters || '****')}</div>
+        </FieldGroup>
+
+        <FieldGroup
+          label={t('Scopes')}
+          help={t('You cannot change the scopes of an existing token.')}
+        >
+          <div>{token.scopes.slice().sort().join(', ')}</div>
+        </FieldGroup>
+      </form.FieldGroup>
+
+      <Flex justify="end" gap="md" padding="md">
+        <Button onClick={handleGoBack}>{t('Cancel')}</Button>
+        <form.SubmitButton>{t('Save Changes')}</form.SubmitButton>
+      </Flex>
+    </form.AppForm>
   );
 }
 
@@ -132,22 +184,17 @@ function ApiTokenDetails() {
           }
         )}
       </TextBlock>
-      <Panel>
-        <PanelHeader>{t('Personal Token Details')}</PanelHeader>
-
-        <PanelBody>
-          {isError && (
-            <LoadingError
-              message={t('Failed to load personal token.')}
-              onRetry={refetchToken}
-            />
-          )}
 
-          {isPending && <LoadingIndicator />}
+      {isError && (
+        <LoadingError
+          message={t('Failed to load personal token.')}
+          onRetry={refetchToken}
+        />
+      )}
+
+      {isPending && <LoadingIndicator />}
 
-          {!isPending && !isError && token && <ApiTokenDetailsForm token={token} />}
-        </PanelBody>
-      </Panel>
+      {!isPending && !isError && token && <ApiTokenDetailsForm token={token} />}
     </div>
   );
 }
diff --git a/static/app/views/settings/organizationDeveloperSettings/permissionSelection.tsx b/static/app/views/settings/organizationDeveloperSettings/permissionSelection.tsx
index 43e998c3d44a72..1966b2951756d0 100644
--- a/static/app/views/settings/organizationDeveloperSettings/permissionSelection.tsx
+++ b/static/app/views/settings/organizationDeveloperSettings/permissionSelection.tsx
@@ -107,7 +107,7 @@ function findResource(r: PermissionResource) {
  *    ['org:read', 'org:write', ...]
  *
  */
-function permissionStateToList(permissions: Permissions) {
+export function permissionStateToList(permissions: Permissions) {
   return Object.entries(permissions).flatMap(
     ([r, p]) => findResource(r as PermissionResource)?.choices?.[p]?.scopes
   );
@@ -130,7 +130,10 @@ export class PermissionSelection extends Component<Props, State> {
   save = (permissions: Permissions) => {
     this.setState({permissions});
     this.props.onChange(permissions);
-    this.context.form.setValue(
+    // When used inside a legacy FormModel-based form, sync the scopes field.
+    // When used outside that context (e.g. with useScrapsForm), the parent
+    // derives scopes from the onChange callback instead.
+    this.context.form?.setValue(
       'scopes',
       permissionStateToList(this.state.permissions) as string[]
     );

From 7a2c6f48626c6e7530148107f20e84ea3b32bab0 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 7 Apr 2026 12:55:12 +0200
Subject: [PATCH 02/18] fix(ui): Remove overflow hidden from GuidedSteps
 StepDetails (#112336)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove `overflow: hidden` from `StepDetails` in the `GuidedSteps`
component.

### Background

`StepDetails` is a grid item in a `34px 1fr` layout. When content inside
it (like a code block with long lines) had a large intrinsic width, it
would push past its `1fr` column and break the layout on small
viewports. To prevent this, `overflow: hidden` was added — it worked,
but it also clipped everything that extended beyond the container
bounds, including focus rings on form elements (which use `box-shadow`
in Sentry's design system):

<img width="427" height="241" alt="image"
src="https://github.com/user-attachments/assets/f693c434-1027-4237-b643-52d974f94897"
/>


### What happened

On **Mar 25**, Evans noticed the clipping issue and removed `overflow:
hidden` in #111462. But without it, content started overflowing on small
screens again, so on **Mar 27** it was reverted in 939e726b947.

Then on **Mar 31**, Lazar landed #111657 which added `min-width: 0` to
`StepDetails` to fix a code block overflow issue in the Metrics
onboarding. Since the revert had already restored `overflow: hidden`,
the overflow was no longer visible — but `min-width: 0` was still the
right addition, and it also happens to solve the clipping issue, since
it lets the grid item respect its track width without needing to clip
its contents.

### This PR

Now that `min-width: 0` handles the overflow problem, `overflow: hidden`
is redundant and can be safely removed — finishing what Evans started in
#111462.


closes
https://linear.app/getsentry/issue/DE-1048/stepper-overflow-hidden-clips-focus-rings

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 static/app/components/guidedSteps/guidedSteps.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/app/components/guidedSteps/guidedSteps.tsx b/static/app/components/guidedSteps/guidedSteps.tsx
index 419b34849b5e5f..03a3658b429233 100644
--- a/static/app/components/guidedSteps/guidedSteps.tsx
+++ b/static/app/components/guidedSteps/guidedSteps.tsx
@@ -371,7 +371,6 @@ const ChildrenWrapper = styled('div')<{isActive: boolean}>`
 `;
 
 const StepDetails = styled('div')`
-  overflow: hidden;
   grid-area: details;
   min-width: 0;
 `;

From 2b9fb0895c9b3e2e124425115878c2effaf5e7dc Mon Sep 17 00:00:00 2001
From: Simon Hellmayr <shellmayr@users.noreply.github.com>
Date: Tue, 7 Apr 2026 13:06:31 +0200
Subject: [PATCH 03/18] chore(dynamic-sampling): remove
 CustomDynamicSamplingRule models & mark tables for deletion (#112093)

---
 migrations_lockfile.txt                       |  2 +-
 .../1063_remove_customdynamicsamplingrule.py  | 54 ++++++++++++++
 src/sentry/models/__init__.py                 |  1 -
 src/sentry/models/dynamicsampling.py          | 74 -------------------
 .../services/organization/impl.py             |  2 -
 src/sentry/testutils/helpers/backups.py       | 20 +----
 tests/sentry/users/models/test_user.py        |  3 -
 7 files changed, 56 insertions(+), 100 deletions(-)
 create mode 100644 src/sentry/migrations/1063_remove_customdynamicsamplingrule.py
 delete mode 100644 src/sentry/models/dynamicsampling.py

diff --git a/migrations_lockfile.txt b/migrations_lockfile.txt
index 5dc8112c18489d..cfa5664e557e73 100644
--- a/migrations_lockfile.txt
+++ b/migrations_lockfile.txt
@@ -31,7 +31,7 @@ replays: 0007_organizationmember_replay_access
 
 seer: 0005_delete_seerorganizationsettings
 
-sentry: 1062_backfill_eventattachment_date_expires
+sentry: 1063_remove_customdynamicsamplingrule
 
 social_auth: 0003_social_auth_json_field
 
diff --git a/src/sentry/migrations/1063_remove_customdynamicsamplingrule.py b/src/sentry/migrations/1063_remove_customdynamicsamplingrule.py
new file mode 100644
index 00000000000000..23c3d41982f6df
--- /dev/null
+++ b/src/sentry/migrations/1063_remove_customdynamicsamplingrule.py
@@ -0,0 +1,54 @@
+# Generated by Django 5.2.11 on 2026-04-02
+import django.db.models.deletion
+from django.db import migrations
+
+import sentry.db.models.fields.foreignkey
+from sentry.new_migrations.migrations import CheckedMigration
+from sentry.new_migrations.monkey.models import SafeDeleteModel
+from sentry.new_migrations.monkey.state import DeletionAction
+
+
+class Migration(CheckedMigration):
+    is_post_deployment = False
+
+    dependencies = [
+        ("sentry", "1062_backfill_eventattachment_date_expires"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="customdynamicsamplingruleproject",
+            name="custom_dynamic_sampling_rule",
+            field=sentry.db.models.fields.foreignkey.FlexibleForeignKey(
+                db_constraint=False,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="sentry.customdynamicsamplingrule",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="customdynamicsamplingruleproject",
+            name="project",
+            field=sentry.db.models.fields.foreignkey.FlexibleForeignKey(
+                db_constraint=False,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="sentry.project",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="customdynamicsamplingrule",
+            name="organization",
+            field=sentry.db.models.fields.foreignkey.FlexibleForeignKey(
+                db_constraint=False,
+                on_delete=django.db.models.deletion.CASCADE,
+                to="sentry.organization",
+            ),
+        ),
+        SafeDeleteModel(
+            name="CustomDynamicSamplingRuleProject",
+            deletion_action=DeletionAction.MOVE_TO_PENDING,
+        ),
+        SafeDeleteModel(
+            name="CustomDynamicSamplingRule",
+            deletion_action=DeletionAction.MOVE_TO_PENDING,
+        ),
+    ]
diff --git a/src/sentry/models/__init__.py b/src/sentry/models/__init__.py
index f239ca916dcda7..5cb51e40e797d3 100644
--- a/src/sentry/models/__init__.py
+++ b/src/sentry/models/__init__.py
@@ -31,7 +31,6 @@
 from .deletedteam import *  # NOQA
 from .deploy import *  # NOQA
 from .distribution import *  # NOQA
-from .dynamicsampling import *  # NOQA
 from .environment import *  # NOQA
 from .event import *  # NOQA
 from .eventattachment import *  # NOQA
diff --git a/src/sentry/models/dynamicsampling.py b/src/sentry/models/dynamicsampling.py
deleted file mode 100644
index 9ed171a1bc2524..00000000000000
--- a/src/sentry/models/dynamicsampling.py
+++ /dev/null
@@ -1,74 +0,0 @@
-from __future__ import annotations
-
-from django.db import models
-from django.db.models import Q
-from django.utils import timezone
-
-from sentry.backup.scopes import RelocationScope
-from sentry.db.models import FlexibleForeignKey, Model, cell_silo_model
-from sentry.db.models.fields.hybrid_cloud_foreign_key import HybridCloudForeignKey
-
-
-@cell_silo_model
-class CustomDynamicSamplingRuleProject(Model):
-    """
-    Many-to-many relationship between a custom dynamic sampling rule and a project.
-    """
-
-    __relocation_scope__ = RelocationScope.Organization
-
-    custom_dynamic_sampling_rule = FlexibleForeignKey(
-        "sentry.CustomDynamicSamplingRule", on_delete=models.CASCADE
-    )
-    project = FlexibleForeignKey("sentry.Project", on_delete=models.CASCADE)
-
-    class Meta:
-        app_label = "sentry"
-        db_table = "sentry_customdynamicsamplingruleproject"
-        unique_together = (("custom_dynamic_sampling_rule", "project"),)
-
-
-@cell_silo_model
-class CustomDynamicSamplingRule(Model):
-    """
-    This represents a custom dynamic sampling rule that is created by the user based
-    on a query (a.k.a. investigation rule).
-
-    """
-
-    __relocation_scope__ = RelocationScope.Organization
-
-    date_added = models.DateTimeField(default=timezone.now)
-    organization = FlexibleForeignKey("sentry.Organization", on_delete=models.CASCADE)
-    projects = models.ManyToManyField(
-        "sentry.Project",
-        related_name="custom_dynamic_sampling_rules",
-        through=CustomDynamicSamplingRuleProject,
-    )
-    is_active = models.BooleanField(default=True)
-    is_org_level = models.BooleanField(default=False)
-    rule_id = models.IntegerField(default=0)
-    condition = models.TextField()
-    sample_rate = models.FloatField(default=0.0)
-    start_date = models.DateTimeField(default=timezone.now)
-    end_date = models.DateTimeField()
-    num_samples = models.IntegerField()
-    condition_hash = models.CharField(max_length=40)
-    # the raw query field from the request
-    query = models.TextField(null=True)
-    created_by_id = HybridCloudForeignKey("sentry.User", on_delete="CASCADE", null=True, blank=True)
-    notification_sent = models.BooleanField(null=True, blank=True)
-
-    class Meta:
-        app_label = "sentry"
-        db_table = "sentry_customdynamicsamplingrule"
-        indexes = [
-            # get active rules for an organization
-            models.Index(fields=["organization"], name="org_idx", condition=Q(is_active=True)),
-            # get expired rules (that are still marked as active)
-            models.Index(fields=["end_date"], name="end_date_idx", condition=Q(is_active=True)),
-            # find active rules for a condition
-            models.Index(
-                fields=["condition_hash"], name="condition_hash_idx", condition=Q(is_active=True)
-            ),
-        ]
diff --git a/src/sentry/organizations/services/organization/impl.py b/src/sentry/organizations/services/organization/impl.py
index 2cdb2a01a3edc6..5b7c8db37cf3fd 100644
--- a/src/sentry/organizations/services/organization/impl.py
+++ b/src/sentry/organizations/services/organization/impl.py
@@ -20,7 +20,6 @@
 from sentry.incidents.models.incident import IncidentActivity
 from sentry.models.activity import Activity
 from sentry.models.dashboard import Dashboard, DashboardFavoriteUser
-from sentry.models.dynamicsampling import CustomDynamicSamplingRule
 from sentry.models.groupassignee import GroupAssignee
 from sentry.models.groupbookmark import GroupBookmark
 from sentry.models.groupsearchview import GroupSearchView
@@ -581,7 +580,6 @@ def merge_users(self, *, organization_id: int, from_user_id: int, to_user_id: in
                 Activity,
                 AlertRule,
                 AlertRuleActivity,
-                CustomDynamicSamplingRule,
                 Dashboard,
                 DashboardFavoriteUser,
                 GroupAssignee,
diff --git a/src/sentry/testutils/helpers/backups.py b/src/sentry/testutils/helpers/backups.py
index 3b980ccdc62eef..f000b211a16f6b 100644
--- a/src/sentry/testutils/helpers/backups.py
+++ b/src/sentry/testutils/helpers/backups.py
@@ -3,7 +3,7 @@
 import io
 import tempfile
 from copy import deepcopy
-from datetime import UTC, datetime, timedelta
+from datetime import UTC, datetime
 from functools import cached_property, cmp_to_key
 from pathlib import Path
 from typing import Any
@@ -77,10 +77,6 @@
     DashboardWidgetQueryOnDemand,
     DashboardWidgetTypes,
 )
-from sentry.models.dynamicsampling import (
-    CustomDynamicSamplingRule,
-    CustomDynamicSamplingRuleProject,
-)
 from sentry.models.groupassignee import GroupAssignee
 from sentry.models.groupbookmark import GroupBookmark
 from sentry.models.groupsearchview import GroupSearchView, GroupSearchViewProject
@@ -819,20 +815,6 @@ def create_exhaustive_organization(
             overrides={"write_key": "test_override_write_key"},
         )
 
-        custom_rule = CustomDynamicSamplingRule.objects.create(
-            organization=org,
-            created_by_id=owner_id,
-            condition='{"op":"and","inner":[]}',
-            end_date=timezone.now() + timedelta(days=1),
-            num_samples=100,
-            condition_hash="abc123def456abc123def456abc123def4560000",
-            sample_rate=0.5,
-        )
-        CustomDynamicSamplingRuleProject.objects.create(
-            custom_dynamic_sampling_rule=custom_rule,
-            project=project,
-        )
-
         return org
 
     @assume_test_silo_mode(SiloMode.CONTROL)
diff --git a/tests/sentry/users/models/test_user.py b/tests/sentry/users/models/test_user.py
index 238dafb0925dfe..945c8a7048e781 100644
--- a/tests/sentry/users/models/test_user.py
+++ b/tests/sentry/users/models/test_user.py
@@ -17,7 +17,6 @@
 from sentry.models.activity import Activity
 from sentry.models.authidentity import AuthIdentity
 from sentry.models.dashboard import Dashboard, DashboardFavoriteUser
-from sentry.models.dynamicsampling import CustomDynamicSamplingRule
 from sentry.models.groupassignee import GroupAssignee
 from sentry.models.groupbookmark import GroupBookmark
 from sentry.models.groupsearchview import GroupSearchView
@@ -497,7 +496,6 @@ def test_duplicate_memberships(self, expected_models: list[type[Model]]) -> None
         Activity,
         AlertRule,
         AlertRuleActivity,
-        CustomDynamicSamplingRule,
         Dashboard,
         DashboardFavoriteUser,
         GroupAssignee,
@@ -541,7 +539,6 @@ def test_only_source_user_is_member_of_organization(
         Activity,
         AlertRule,
         AlertRuleActivity,
-        CustomDynamicSamplingRule,
         Dashboard,
         DashboardFavoriteUser,
         GroupAssignee,

From 5f7a276d4e6cc0251d1a63b78d9c0745d315a2e8 Mon Sep 17 00:00:00 2001
From: Hector Dearman <hector.dearman@sentry.io>
Date: Tue, 7 Apr 2026 12:37:00 +0100
Subject: [PATCH 04/18] ref(autofix): Unnest if (#112114)

---
 src/sentry/seer/autofix/issue_summary.py | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/sentry/seer/autofix/issue_summary.py b/src/sentry/seer/autofix/issue_summary.py
index 367131d81def82..08361e53317b55 100644
--- a/src/sentry/seer/autofix/issue_summary.py
+++ b/src/sentry/seer/autofix/issue_summary.py
@@ -428,16 +428,15 @@ def run_automation(
         return
 
     # Check event count for ALERT source with seat-based tier
-    if is_seer_seat_based_tier_enabled(group.organization):
-        if source == SeerAutomationSource.ALERT:
-            # Use times_seen_with_pending if available (set by post_process), otherwise fall back
-            times_seen = (
-                group.times_seen_with_pending
-                if hasattr(group, "_times_seen_pending")
-                else group.times_seen
-            )
-            if times_seen < AUTOFIX_AUTOMATION_OCCURRENCE_THRESHOLD:
-                return
+    if is_seer_seat_based_tier_enabled(group.organization) and source == SeerAutomationSource.ALERT:
+        # Use times_seen_with_pending if available (set by post_process), otherwise fall back
+        times_seen = (
+            group.times_seen_with_pending
+            if hasattr(group, "_times_seen_pending")
+            else group.times_seen
+        )
+        if times_seen < AUTOFIX_AUTOMATION_OCCURRENCE_THRESHOLD:
+            return
 
     user_id = user.id if user else None
     auto_run_source = auto_run_source_map.get(source, "unknown_source")

From 36c5869e8106d36c71c32ad26594eb35b66438cd Mon Sep 17 00:00:00 2001
From: Hector Dearman <hector.dearman@sentry.io>
Date: Tue, 7 Apr 2026 12:39:00 +0100
Subject: [PATCH 05/18] ref(preprod): Remove PreprodStaticGroupType and
 PreprodDeltaGroupType (#112337)

Remove the unused `PreprodStaticGroupType` (type_id 11001) and
`PreprodDeltaGroupType` (type_id 11002) group types. Neither class was
referenced anywhere in the codebase. The `grouptype.py` module is
retained for its side-effect import of
`sentry.preprod.size_analysis.grouptype`.

Agent transcript:
https://claudescope.sentry.dev/share/TB-Jn6n67lNj6NQ-Hu4JOrlbup4fW28mdJdywsxjyoY
---
 src/sentry/preprod/grouptype.py | 47 ---------------------------------
 1 file changed, 47 deletions(-)

diff --git a/src/sentry/preprod/grouptype.py b/src/sentry/preprod/grouptype.py
index 8a34ada04615b2..e51ecd89089983 100644
--- a/src/sentry/preprod/grouptype.py
+++ b/src/sentry/preprod/grouptype.py
@@ -1,54 +1,7 @@
 from __future__ import annotations
 
-from dataclasses import dataclass
-
 import sentry.preprod.size_analysis.grouptype  # noqa: F401,F403
-from sentry.issues.grouptype import GroupCategory, GroupType
-from sentry.types.group import PriorityLevel
 
 # We have to import sentry.preprod.size_analysis.grouptype above.
 # grouptype modules in root packages (src/sentry/*) are auto imported
 # but more deeply nested ones are not.
-
-
-@dataclass(frozen=True)
-class PreprodStaticGroupType(GroupType):
-    """
-    Issues detected in a single uploaded artifact. For example an
-    Android app not being 16kb page size ready.
-    Typically these end up grouped across multiple builds e.g. if CI
-    uploads a build of an app for each commit to main each of those
-    uploads could result in an occurrence of some issue like the 16kb
-    page size.
-    """
-
-    type_id = 11001
-    slug = "preprod_static"
-    description = "Static Analysis"
-    category = GroupCategory.PREPROD.value
-    category_v2 = GroupCategory.PREPROD.value
-    default_priority = PriorityLevel.LOW
-    released = False
-    enable_auto_resolve = True
-    enable_escalation_detection = False
-
-
-@dataclass(frozen=True)
-class PreprodDeltaGroupType(GroupType):
-    """
-    Issues detected examining the delta between two uploaded artifacts.
-    For example a binary size regression. These are typically *not*
-    grouped. A size regression between v1 and v2 likely does not have
-    the same root cause (and hence resolution) as another regression
-    between v2 and v3.
-    """
-
-    type_id = 11002
-    slug = "preprod_delta"
-    description = "Static Analysis Delta"
-    category = GroupCategory.PREPROD.value
-    category_v2 = GroupCategory.PREPROD.value
-    default_priority = PriorityLevel.LOW
-    released = False
-    enable_auto_resolve = True
-    enable_escalation_detection = False

From 52883b66c3a8bbd9136b5340f7147f9935e8b681 Mon Sep 17 00:00:00 2001
From: Fabian Schindler <fabian.schindler@sentry.io>
Date: Tue, 7 Apr 2026 13:59:15 +0200
Subject: [PATCH 06/18] fix(onboarding): change agent monitoring empty state to
 use openai instead of openai-agents (#112344)

Closes
https://linear.app/getsentry/issue/TET-2173/select-openai-by-default
---
 .../python/agentMonitoring.tsx                | 39 ++++++++++---------
 .../pages/agents/utils/agentIntegrations.tsx  |  2 +-
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/static/app/gettingStartedDocs/python/agentMonitoring.tsx b/static/app/gettingStartedDocs/python/agentMonitoring.tsx
index 3cf2642d59b7f2..591386bfaba0b4 100644
--- a/static/app/gettingStartedDocs/python/agentMonitoring.tsx
+++ b/static/app/gettingStartedDocs/python/agentMonitoring.tsx
@@ -8,6 +8,7 @@ import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t, tct} from 'sentry/locale';
 import {SdkUpdateAlert} from 'sentry/views/insights/pages/agents/components/sdkUpdateAlert';
 import {ManualInstrumentationNote} from 'sentry/views/insights/pages/agents/llmOnboardingInstructions';
+import {AgentIntegration} from 'sentry/views/insights/pages/agents/utils/agentIntegrations';
 
 import {getPythonInstallCodeBlock} from './utils';
 
@@ -293,29 +294,30 @@ sentry_sdk.init(
       ],
     };
 
-    const selected = (params.platformOptions as any)?.integration ?? 'openai_agents';
-    if (selected === 'openai') {
+    const selected =
+      (params.platformOptions as any)?.integration ?? AgentIntegration.OPENAI;
+    if (selected === AgentIntegration.OPENAI) {
       return [openaiSdkStep];
     }
-    if (selected === 'anthropic') {
+    if (selected === AgentIntegration.ANTHROPIC) {
       return [anthropicSdkStep];
     }
-    if (selected === 'langchain') {
+    if (selected === AgentIntegration.LANGCHAIN) {
       return [langchainStep];
     }
-    if (selected === 'langgraph') {
+    if (selected === AgentIntegration.LANGGRAPH) {
       return [langgraphStep];
     }
-    if (selected === 'litellm') {
+    if (selected === AgentIntegration.LITTELLM) {
       return [liteLLMStep];
     }
-    if (selected === 'google_genai') {
+    if (selected === AgentIntegration.GOOGLE_GENAI) {
       return [googleGenAIStep];
     }
-    if (selected === 'pydantic_ai') {
+    if (selected === AgentIntegration.PYDANTIC_AI) {
       return [pydanticAiStep];
     }
-    if (selected === 'manual') {
+    if (selected === AgentIntegration.MANUAL) {
       return [manualStep];
     }
     return [openaiAgentsStep];
@@ -565,29 +567,30 @@ print(result.output)
       ],
     };
 
-    const selected = (params.platformOptions as any)?.integration ?? 'openai_agents';
-    if (selected === 'openai') {
+    const selected =
+      (params.platformOptions as any)?.integration ?? AgentIntegration.OPENAI;
+    if (selected === AgentIntegration.OPENAI) {
       return [openaiSdkVerifyStep];
     }
-    if (selected === 'anthropic') {
+    if (selected === AgentIntegration.ANTHROPIC) {
       return [anthropicSdkVerifyStep];
     }
-    if (selected === 'langchain') {
+    if (selected === AgentIntegration.LANGCHAIN) {
       return [langchainVerifyStep];
     }
-    if (selected === 'langgraph') {
+    if (selected === AgentIntegration.LANGGRAPH) {
       return [langgraphVerifyStep];
     }
-    if (selected === 'litellm') {
+    if (selected === AgentIntegration.LITTELLM) {
       return [liteLLMVerifyStep];
     }
-    if (selected === 'google_genai') {
+    if (selected === AgentIntegration.GOOGLE_GENAI) {
       return [googleGenAIVerifyStep];
     }
-    if (selected === 'pydantic_ai') {
+    if (selected === AgentIntegration.PYDANTIC_AI) {
       return [pydanticAiVerifyStep];
     }
-    if (selected === 'manual') {
+    if (selected === AgentIntegration.MANUAL) {
       return [manualVerifyStep];
     }
     return [openaiAgentsVerifyStep];
diff --git a/static/app/views/insights/pages/agents/utils/agentIntegrations.tsx b/static/app/views/insights/pages/agents/utils/agentIntegrations.tsx
index db4835f8f23245..c9dbb850046690 100644
--- a/static/app/views/insights/pages/agents/utils/agentIntegrations.tsx
+++ b/static/app/views/insights/pages/agents/utils/agentIntegrations.tsx
@@ -41,13 +41,13 @@ export const AGENT_INTEGRATION_ICONS: Record<AgentIntegration, string> = {
 };
 
 export const PYTHON_AGENT_INTEGRATIONS = [
+  AgentIntegration.OPENAI,
   AgentIntegration.OPENAI_AGENTS,
   AgentIntegration.ANTHROPIC,
   AgentIntegration.GOOGLE_GENAI,
   AgentIntegration.LANGCHAIN,
   AgentIntegration.LANGGRAPH,
   AgentIntegration.LITTELLM,
-  AgentIntegration.OPENAI,
   AgentIntegration.PYDANTIC_AI,
   AgentIntegration.MANUAL,
 ];

From fc84cb27bec5e42e0898df0cb70690b0b90c4e9f Mon Sep 17 00:00:00 2001
From: Hector Dearman <hector.dearman@sentry.io>
Date: Tue, 7 Apr 2026 13:07:27 +0100
Subject: [PATCH 07/18] fix(codeowners): Add coverage for markdownTextArea and
 clean baseline (#112339)

Add `markdownTextArea.tsx` to CODEOWNERS

Agent transcript:
https://claudescope.sentry.dev/share/871UYxUBaZ8vQJ9ftWv61JC9JCwVPM23lLo0kqC_Q3o
---
 .github/CODEOWNERS                       |  1 +
 .github/codeowners-coverage-baseline.txt | 25 ------------------------
 2 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 5baea3ba65fdcb..9a7b27d8e79af5 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -439,6 +439,7 @@ tests/sentry/api/endpoints/test_organization_attribute_mappings.py          @get
 /static/app/components/loading/                @getsentry/app-frontend
 /static/app/components/events/interfaces/      @getsentry/app-frontend
 /static/app/components/forms/                  @getsentry/app-frontend
+/static/app/components/markdownTextArea.tsx    @getsentry/app-frontend
 /static/app/locale.tsx                         @getsentry/app-frontend
 ## End of Frontend
 
diff --git a/.github/codeowners-coverage-baseline.txt b/.github/codeowners-coverage-baseline.txt
index b6247777dae29f..1f28e295e561c4 100644
--- a/.github/codeowners-coverage-baseline.txt
+++ b/.github/codeowners-coverage-baseline.txt
@@ -253,11 +253,6 @@ src/sentry/stacktraces/processing.py
 src/sentry/status_checks/__init__.py
 src/sentry/status_checks/base.py
 src/sentry/status_checks/warnings.py
-src/sentry/synapse/__init__.py
-src/sentry/synapse/endpoints/__init__.py
-src/sentry/synapse/endpoints/authentication.py
-src/sentry/synapse/endpoints/org_cell_mappings.py
-src/sentry/synapse/paginator.py
 src/sentry/tagstore/__init__.py
 src/sentry/tagstore/base.py
 src/sentry/tagstore/exceptions.py
@@ -643,18 +638,6 @@ static/app/components/events/eventTagsAndScreenshot/tags.tsx
 static/app/components/events/eventViewHierarchy.spec.tsx
 static/app/components/events/eventViewHierarchy.tsx
 static/app/components/events/eventXrayDiff.tsx
-static/app/components/events/groupingInfo/groupingComponent.tsx
-static/app/components/events/groupingInfo/groupingComponentChildren.tsx
-static/app/components/events/groupingInfo/groupingComponentFrames.tsx
-static/app/components/events/groupingInfo/groupingComponentStacktrace.tsx
-static/app/components/events/groupingInfo/groupingInfo.tsx
-static/app/components/events/groupingInfo/groupingInfoSection.spec.tsx
-static/app/components/events/groupingInfo/groupingInfoSection.tsx
-static/app/components/events/groupingInfo/groupingSummary.tsx
-static/app/components/events/groupingInfo/groupingVariant.spec.tsx
-static/app/components/events/groupingInfo/groupingVariant.tsx
-static/app/components/events/groupingInfo/useEventGroupingInfo.tsx
-static/app/components/events/groupingInfo/utils.tsx
 static/app/components/events/meta/annotatedText/annotatedTextErrors.tsx
 static/app/components/events/meta/annotatedText/annotatedTextValue.tsx
 static/app/components/events/meta/annotatedText/filteredAnnotatedTextValue.tsx
@@ -789,8 +772,6 @@ static/app/components/list/index.tsx
 static/app/components/list/listItem.tsx
 static/app/components/list/utils.tsx
 static/app/components/listGroup.tsx
-static/app/components/loading/loadingContainer.spec.tsx
-static/app/components/loading/loadingContainer.tsx
 static/app/components/loadingError.stories.tsx
 static/app/components/loadingError.tsx
 static/app/components/loadingIndicator.stories.tsx
@@ -2258,7 +2239,6 @@ tests/sentry/receivers/outbox/test_control.py
 tests/sentry/receivers/test_analytics.py
 tests/sentry/receivers/test_core.py
 tests/sentry/receivers/test_data_forwarding.py
-tests/sentry/receivers/test_default_detector.py
 tests/sentry/receivers/test_featureadoption.py
 tests/sentry/receivers/test_onboarding.py
 tests/sentry/receivers/test_releases.py
@@ -2357,10 +2337,6 @@ tests/sentry/sudo/test_middleware.py
 tests/sentry/sudo/test_signals.py
 tests/sentry/sudo/test_utils.py
 tests/sentry/sudo/test_views.py
-tests/sentry/synapse/__init__.py
-tests/sentry/synapse/endpoints/__init__.py
-tests/sentry/synapse/endpoints/test_org_cell_mappings.py
-tests/sentry/synapse/test_paginator.py
 tests/sentry/tagstore/__init__.py
 tests/sentry/tagstore/test_types.py
 tests/sentry/tasks/__init__.py
@@ -2535,7 +2511,6 @@ tests/social_auth/test_utils.py
 tests/tools/__init__.py
 tests/tools/test_api_urls_to_typescript.py
 tests/tools/test_bump_action.py
-tests/tools/test_compute_selected_tests.py
 tests/tools/test_flake8_plugin.py
 tests/tools/test_lint_requirements.py
 tests/tools/test_pin_github_action.py

From b456371b171e85d179c99c5dbe1fa55031f77206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <github@joshuakgoldberg.com>
Date: Tue, 7 Apr 2026 09:20:49 -0400
Subject: [PATCH 08/18] fix(test): open overlays immediately when in test mode
 (#112196)

Removes the pattern of passing `delay={0}` / `displayTimeout={0}` in
specs: for _opening_ hover overlays immediately. That's now done
automatically in `useHoverOverlay` when `NODE_ENV === "test"`. This way
we don't need to manually create & pipe zero-value delay props around
various components.

Note that _closing_ timing is unchanged. That way any triggers to portal
content / async events still have a grace period in tests.

A few seemingly-unrelated tests had to be updated to account for
overlays now suddenly being available. I think this is good, actually,
because they previously were relying on timed opening not having
happened yet. See 92f377910c3a15022fd0a8c979334098c7e206dc.

Fixes ENG-7208. Fixes ENG-7211. Fixes ENG-7212.

Supersedes #111926, #111928, #111929, and #112004.
---
 .../components/core/tooltip/tooltip.spec.tsx  | 20 +++----
 static/app/components/hovercard.spec.tsx      | 58 ++++++-------------
 .../stackTrace/issueStackTrace/index.spec.tsx |  4 +-
 static/app/utils/useHoverOverlay.tsx          |  3 +-
 static/app/views/dashboards/detail.spec.tsx   | 27 ++++++---
 .../quickContextHovercard.spec.tsx            |  2 +-
 .../projectInstall/createProject.spec.tsx     |  4 +-
 7 files changed, 54 insertions(+), 64 deletions(-)

diff --git a/static/app/components/core/tooltip/tooltip.spec.tsx b/static/app/components/core/tooltip/tooltip.spec.tsx
index b59448c9147672..be762f0d3b0480 100644
--- a/static/app/components/core/tooltip/tooltip.spec.tsx
+++ b/static/app/components/core/tooltip/tooltip.spec.tsx
@@ -27,7 +27,7 @@ describe('Tooltip', () => {
 
   it('renders', async () => {
     render(
-      <Tooltip delay={0} title="test">
+      <Tooltip title="test">
         <span>My Button</span>
       </Tooltip>
     );
@@ -46,14 +46,14 @@ describe('Tooltip', () => {
 
   it('updates title', async () => {
     const {rerender} = render(
-      <Tooltip delay={0} title="test">
+      <Tooltip title="test">
         <span>My Button</span>
       </Tooltip>
     );
 
     // Change title
     rerender(
-      <Tooltip delay={0} title="bar">
+      <Tooltip title="bar">
         <span>My Button</span>
       </Tooltip>
     );
@@ -69,7 +69,7 @@ describe('Tooltip', () => {
 
   it('disables and does not render', async () => {
     render(
-      <Tooltip delay={0} title="test" disabled>
+      <Tooltip title="test" disabled>
         <span>My Button</span>
       </Tooltip>
     );
@@ -83,7 +83,7 @@ describe('Tooltip', () => {
 
   it('resets visibility when becoming disabled', async () => {
     const {rerender} = render(
-      <Tooltip delay={0} title="test" disabled={false}>
+      <Tooltip title="test" disabled={false}>
         <span>My Button</span>
       </Tooltip>
     );
@@ -92,7 +92,7 @@ describe('Tooltip', () => {
     expect(screen.getByText('test')).toBeInTheDocument();
 
     rerender(
-      <Tooltip delay={0} title="test" disabled>
+      <Tooltip title="test" disabled>
         <span>My Button</span>
       </Tooltip>
     );
@@ -100,7 +100,7 @@ describe('Tooltip', () => {
 
     // Becomes enabled again
     rerender(
-      <Tooltip delay={0} title="test" disabled={false}>
+      <Tooltip title="test" disabled={false}>
         <span>My Button</span>
       </Tooltip>
     );
@@ -109,7 +109,7 @@ describe('Tooltip', () => {
 
   it('does not render an empty tooltip', async () => {
     render(
-      <Tooltip delay={0} title="">
+      <Tooltip title="">
         <span>My Button</span>
       </Tooltip>
     );
@@ -125,7 +125,7 @@ describe('Tooltip', () => {
     mockOverflow(100, 50);
 
     render(
-      <Tooltip delay={0} title="test" showOnlyOnOverflow>
+      <Tooltip title="test" showOnlyOnOverflow>
         <div>This text overflows</div>
       </Tooltip>
     );
@@ -141,7 +141,7 @@ describe('Tooltip', () => {
     mockOverflow(50, 100);
 
     render(
-      <Tooltip delay={0} title="test" showOnlyOnOverflow>
+      <Tooltip title="test" showOnlyOnOverflow>
         <div>This text does not overflow</div>
       </Tooltip>
     );
diff --git a/static/app/components/hovercard.spec.tsx b/static/app/components/hovercard.spec.tsx
index b0e9f6ed10457d..86577c3fc9f6f6 100644
--- a/static/app/components/hovercard.spec.tsx
+++ b/static/app/components/hovercard.spec.tsx
@@ -7,50 +7,36 @@ describe('Hovercard', () => {
     jest.clearAllMocks();
   });
 
-  it('Displays card', async () => {
+  it('does not display card before hover', () => {
     render(
-      <Hovercard
-        position="top"
-        body="Hovercard Body"
-        header="Hovercard Header"
-        displayTimeout={0}
-      >
+      <Hovercard position="top" body="Hovercard Body" header="Hovercard Header">
         Hovercard Trigger
       </Hovercard>
     );
 
-    await userEvent.hover(screen.getByText('Hovercard Trigger'));
-
-    expect(await screen.findByText(/Hovercard Body/)).toBeInTheDocument();
-    expect(await screen.findByText(/Hovercard Header/)).toBeInTheDocument();
+    expect(screen.queryByText(/Hovercard Body/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Hovercard Header/)).not.toBeInTheDocument();
   });
 
-  it('Does not display card', async () => {
+  it('displays the card when hovered', async () => {
     render(
-      <Hovercard
-        position="top"
-        body="Hovercard Body"
-        header="Hovercard Header"
-        displayTimeout={0}
-        forceVisible={false}
-      >
+      <Hovercard position="top" body="Hovercard Body" header="Hovercard Header">
         Hovercard Trigger
       </Hovercard>
     );
 
     await userEvent.hover(screen.getByText('Hovercard Trigger'));
 
-    expect(screen.queryByText(/Hovercard Body/)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Hovercard Header/)).not.toBeInTheDocument();
+    expect(await screen.findByText(/Hovercard Body/)).toBeInTheDocument();
+    expect(await screen.findByText(/Hovercard Header/)).toBeInTheDocument();
   });
 
-  it('Always displays card', async () => {
+  it('always displays card when forceVisible is true', async () => {
     render(
       <Hovercard
         position="top"
         body="Hovercard Body"
         header="Hovercard Header"
-        displayTimeout={0}
         forceVisible
       >
         Hovercard Trigger
@@ -61,14 +47,13 @@ describe('Hovercard', () => {
     expect(screen.getByText(/Hovercard Header/)).toBeInTheDocument();
   });
 
-  it('Respects displayTimeout displays card', async () => {
+  it('respects displayTimeout to delay hiding card when hover is removed', async () => {
     const DISPLAY_TIMEOUT = 100;
     render(
       <Hovercard
         position="top"
         body="Hovercard Body"
         header="Hovercard Header"
-        delay={DISPLAY_TIMEOUT}
         displayTimeout={DISPLAY_TIMEOUT}
       >
         Hovercard Trigger
@@ -77,26 +62,22 @@ describe('Hovercard', () => {
 
     jest.useFakeTimers();
     await userEvent.hover(screen.getByText('Hovercard Trigger'), {delay: null});
-    act(() => jest.advanceTimersByTime(DISPLAY_TIMEOUT - 1));
-
-    expect(screen.queryByText(/Hovercard Body/)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Hovercard Header/)).not.toBeInTheDocument();
-
-    act(() => jest.advanceTimersByTime(1));
+    await userEvent.unhover(screen.getByText('Hovercard Trigger'), {delay: null});
 
-    expect(await screen.findByText(/Hovercard Body/)).toBeInTheDocument();
-    expect(await screen.findByText(/Hovercard Header/)).toBeInTheDocument();
+    act(() => jest.advanceTimersByTime(DISPLAY_TIMEOUT - 1));
     jest.useRealTimers();
+
+    expect(screen.getByText(/Hovercard Body/)).toBeInTheDocument();
+    expect(screen.getByText(/Hovercard Header/)).toBeInTheDocument();
   });
 
-  it('Doesnt leak timeout', async () => {
+  it('hides the cards after the display timeout when hover is removed', async () => {
     const DISPLAY_TIMEOUT = 100;
     render(
       <Hovercard
         position="top"
         body="Hovercard Body"
         header="Hovercard Header"
-        delay={DISPLAY_TIMEOUT}
         displayTimeout={DISPLAY_TIMEOUT}
       >
         Hovercard Trigger
@@ -105,14 +86,9 @@ describe('Hovercard', () => {
 
     jest.useFakeTimers();
     await userEvent.hover(screen.getByText('Hovercard Trigger'), {delay: null});
-    act(() => jest.advanceTimersByTime(DISPLAY_TIMEOUT - 1));
-
-    expect(screen.queryByText(/Hovercard Body/)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Hovercard Header/)).not.toBeInTheDocument();
-
     await userEvent.unhover(screen.getByText('Hovercard Trigger'), {delay: null});
 
-    act(() => jest.advanceTimersByTime(1));
+    act(() => jest.advanceTimersByTime(DISPLAY_TIMEOUT));
     jest.useRealTimers();
 
     expect(screen.queryByText(/Hovercard Body/)).not.toBeInTheDocument();
diff --git a/static/app/components/stackTrace/issueStackTrace/index.spec.tsx b/static/app/components/stackTrace/issueStackTrace/index.spec.tsx
index 6ffbd392f1da12..dfbebe996e3c4a 100644
--- a/static/app/components/stackTrace/issueStackTrace/index.spec.tsx
+++ b/static/app/components/stackTrace/issueStackTrace/index.spec.tsx
@@ -246,7 +246,9 @@ describe('IssueStackTrace', () => {
 
     await userEvent.hover(screen.getByLabelText('Line 112'));
 
-    expect(await screen.findByText('Line uncovered by tests')).toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.getAllByText('Line uncovered by tests')).toHaveLength(2)
+    );
   });
 
   it('renders annotated text when exception value has PII scrubbing metadata', async () => {
diff --git a/static/app/utils/useHoverOverlay.tsx b/static/app/utils/useHoverOverlay.tsx
index 28f20876a6ea95..23e5a8c9fb248a 100644
--- a/static/app/utils/useHoverOverlay.tsx
+++ b/static/app/utils/useHoverOverlay.tsx
@@ -13,6 +13,7 @@ import {usePopper} from 'react-popper';
 import {useTheme} from '@emotion/react';
 import {mergeProps, mergeRefs} from '@react-aria/utils';
 
+import {NODE_ENV} from 'sentry/constants';
 import type {Theme} from 'sentry/utils/theme';
 
 function makeDefaultPopperModifiers(arrowElement: HTMLElement | null, offset: number) {
@@ -251,7 +252,7 @@ function useHoverOverlay({
     maybeClearRefTimeout(delayHideTimeoutRef);
     maybeClearRefTimeout(delayOpenTimeoutRef);
 
-    if (delay === 0) {
+    if (delay === 0 || NODE_ENV === 'test') {
       setIsVisible(true);
       return;
     }
diff --git a/static/app/views/dashboards/detail.spec.tsx b/static/app/views/dashboards/detail.spec.tsx
index 002d58c5a47a2d..c9a862b4e675e6 100644
--- a/static/app/views/dashboards/detail.spec.tsx
+++ b/static/app/views/dashboards/detail.spec.tsx
@@ -117,6 +117,18 @@ describe('Dashboards > Detail', () => {
     };
   }
 
+  /**
+   * Clicks the edit dashboard button and waits for a known button to be visible.
+   * Note that this bypasses hover state to avoid overlays intercepting clicks.
+   */
+  async function activateDashboardEditMode() {
+    const button = await screen.findByRole('button', {name: 'edit-dashboard'});
+    act(() => {
+      button.click();
+    });
+    await screen.findByRole('button', {name: 'Save and Finish'});
+  }
+
   window.IntersectionObserver = MockIntersectionObserver as any;
 
   describe('prebuilt dashboards', () => {
@@ -502,8 +514,7 @@ describe('Dashboards > Detail', () => {
 
       await waitFor(() => expect(mockVisit).toHaveBeenCalledTimes(1));
 
-      // Enter edit mode.
-      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
+      await activateDashboardEditMode();
 
       // Remove the second and third widgets
       await userEvent.click(
@@ -581,8 +592,7 @@ describe('Dashboards > Detail', () => {
         })
       );
 
-      // Enter edit mode.
-      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
+      await activateDashboardEditMode();
       expect(await screen.findByRole('button', {name: 'Add Widget'})).toBeInTheDocument();
     });
 
@@ -630,8 +640,7 @@ describe('Dashboards > Detail', () => {
         })
       );
 
-      // Enter edit mode.
-      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
+      await activateDashboardEditMode();
       expect(screen.queryByRole('button', {name: 'Add widget'})).not.toBeInTheDocument();
     });
 
@@ -725,7 +734,7 @@ describe('Dashboards > Detail', () => {
         organization: initialData.organization,
       });
 
-      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
+      await activateDashboardEditMode();
       await userEvent.click(await screen.findByText('Save and Finish'));
 
       expect(screen.getByRole('button', {name: 'edit-dashboard'})).toBeInTheDocument();
@@ -767,7 +776,7 @@ describe('Dashboards > Detail', () => {
         organization: initialData.organization,
       });
 
-      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
+      await activateDashboardEditMode();
       const widget = (await screen.findByText('First Widget')).closest(
         '.react-grid-item'
       ) as HTMLElement;
@@ -811,7 +820,7 @@ describe('Dashboards > Detail', () => {
         organization: initialData.organization,
       });
 
-      await userEvent.click(await screen.findByRole('button', {name: 'edit-dashboard'}));
+      await activateDashboardEditMode();
       await userEvent.click(await screen.findByText('Cancel'));
 
       expect(window.confirm).not.toHaveBeenCalled();
diff --git a/static/app/views/discover/table/quickContext/quickContextHovercard.spec.tsx b/static/app/views/discover/table/quickContext/quickContextHovercard.spec.tsx
index 12db39d7c6e77f..4af0f35ac59f22 100644
--- a/static/app/views/discover/table/quickContext/quickContextHovercard.spec.tsx
+++ b/static/app/views/discover/table/quickContext/quickContextHovercard.spec.tsx
@@ -93,7 +93,7 @@ describe('Quick Context', () => {
 
       await userEvent.hover(screen.getByText('Text from Child'));
 
-      expect(await screen.findByText(/Issue/i)).toBeInTheDocument();
+      expect(await screen.findByText('Issue', {exact: true})).toBeInTheDocument();
       expect(screen.getByText(/SENTRY-VVY/i)).toBeInTheDocument();
       expect(
         screen.getByTestId('quick-context-hover-header-copy-button')
diff --git a/static/app/views/projectInstall/createProject.spec.tsx b/static/app/views/projectInstall/createProject.spec.tsx
index 1eacb535039b7f..5d1a32b7cf788b 100644
--- a/static/app/views/projectInstall/createProject.spec.tsx
+++ b/static/app/views/projectInstall/createProject.spec.tsx
@@ -781,7 +781,9 @@ describe('CreateProject', () => {
       expect(await screen.findByText('Channel not found')).toBeInTheDocument();
       expect(screen.getByRole('button', {name: 'Create Project'})).toBeDisabled();
       await userEvent.hover(screen.getByRole('button', {name: 'Create Project'}));
-      expect(await screen.findByText('Channel not found')).toBeInTheDocument();
+      await waitFor(() =>
+        expect(screen.getAllByText('Channel not found')).toHaveLength(2)
+      );
       await userEvent.click(screen.getByLabelText('Clear choices'));
       await userEvent.hover(screen.getByRole('button', {name: 'Create Project'}));
       expect(

From d4ad198349f17a28e78f28b3a2d10daf3c58c197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Dorfmeister=20=F0=9F=94=AE?=
 <dominik.dorfmeister@sentry.io>
Date: Tue, 7 Apr 2026 15:22:11 +0200
Subject: [PATCH 09/18] ref(tsc): refactor self-contained endpoints that need
 response headers to apiOptions (#112347)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

as discussed in last week’s TSC, we need to start moving endpoints over
to `apiOptions` so that we can re-use caches.

the quickest win would be to implement `useApiQuery` with `apiOptions`
internally, and to get there, we need to migrate endpoints that now need
`getResponseHeader` over to `apiOptions` because those headers are
exposed differently.

this PR takes the first couple of endpoints that are (mostly)
self-contained (no other usages of the url found) and moves them over.

I’ve also exposed `selectJsonWithHeaders` because the default impl only
selects `json` without `headers`.

I plan to tackle the other occurrences with an endpoint-by-endpoint
approach, as we need to identify all places where an endpoint is used
(e.g. `invalidateQueries` or `getApiQueryData` or `setApiQueryData`) and
migrate them together.
---
 static/AGENTS.md                              | 26 ++++++
 static/app/utils/api/apiOptions.ts            | 52 ++++++++++-
 .../replays/hooks/useDeadRageSelectors.tsx    | 51 +++++------
 .../alerts/list/rules/alertRulesList.tsx      | 58 ++++++------
 .../alerts/rules/issue/details/issuesList.tsx | 47 +++++-----
 static/app/views/discover/landing.tsx         | 30 +++----
 .../account/accountNotificationFineTuning.tsx | 32 ++++---
 .../organizationTeams/teamMembers.tsx         | 89 +++++++++----------
 .../projectFilters/groupTombstones.tsx        | 32 +++----
 9 files changed, 244 insertions(+), 173 deletions(-)

diff --git a/static/AGENTS.md b/static/AGENTS.md
index f5a441d194e866..e95be6804f40c5 100644
--- a/static/AGENTS.md
+++ b/static/AGENTS.md
@@ -60,6 +60,32 @@ const query = useQuery(
 
 Existing code might use `useApiQuery` from `sentry/utils/queryClient` — prefer `apiOptions` for new code.
 
+#### Accessing response headers (pagination, hit counts)
+
+By default, `apiOptions` selects only the JSON body from the response. If you need response headers (e.g., `Link` for pagination or `X-Hits` / `X-Max-Hits` for total counts), override `select` with `selectJsonWithHeaders`:
+
+```typescript
+import {useQuery} from '@tanstack/react-query';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
+
+const {data} = useQuery({
+  ...apiOptions.as<Item[]>()('/organizations/$organizationIdOrSlug/items/', {
+    path: {organizationIdOrSlug: organization.slug},
+    query: {cursor, per_page: 25},
+    staleTime: 0,
+  }),
+  select: selectJsonWithHeaders,
+});
+
+// data is ApiResponse<Item[]> — an object with `json` and `headers`
+const items = data?.json ?? [];
+const pageLinks = data?.headers.Link; // string | undefined
+const totalHits = data?.headers['X-Hits']; // number | undefined
+const maxHits = data?.headers['X-Max-Hits']; // number | undefined
+```
+
+Note that `X-Hits` and `X-Max-Hits` are already parsed to `number | undefined` — no `parseInt` needed.
+
 ## General Frontend Rules
 
 1. NO new Reflux stores
diff --git a/static/app/utils/api/apiOptions.ts b/static/app/utils/api/apiOptions.ts
index 378c28ca7ad550..2271645782795f 100644
--- a/static/app/utils/api/apiOptions.ts
+++ b/static/app/utils/api/apiOptions.ts
@@ -23,6 +23,12 @@ type PathParamOptions<TApiPath extends string> =
     ? {path?: never}
     : {path: Record<ExtractPathParams<TApiPath>, string | number> | SkipToken};
 
+const selectJson = <TData>(data: ApiResponse<TData>) => data.json;
+
+export const selectJsonWithHeaders = <TData>(
+  data: ApiResponse<TData>
+): ApiResponse<TData> => data;
+
 function _apiOptions<
   TManualData = never,
   TApiPath extends KnownApiUrls = KnownApiUrls,
@@ -46,7 +52,7 @@ function _apiOptions<
     queryFn: pathParams === skipToken ? skipToken : apiFetch<TActualData>,
     enabled: pathParams !== skipToken,
     staleTime,
-    select: data => data.json,
+    select: selectJson,
   });
 }
 
@@ -86,6 +92,50 @@ function _apiOptionsInfinite<
   });
 }
 
+/**
+ * Type-safe factory for TanStack Query options that hit Sentry API endpoints.
+ *
+ * By default, `select` extracts the JSON body. To also access response headers
+ * (e.g. `Link` for pagination), override with `selectJsonWithHeaders`.
+ *
+ * @example Basic usage
+ * ```ts
+ * const query = useQuery(
+ *   apiOptions.as<Project[]>()('/organizations/$organizationIdOrSlug/projects/', {
+ *     path: {organizationIdOrSlug: organization.slug},
+ *     staleTime: 30_000,
+ *   })
+ * );
+ * // query.data is Project[]
+ * ```
+ *
+ * @example Conditional fetching
+ * ```ts
+ * const query = useQuery(
+ *   apiOptions.as<Project>()('/organizations/$organizationIdOrSlug/projects/$projectIdOrSlug/', {
+ *     path: projectSlug
+ *       ? {organizationIdOrSlug: organization.slug, projectIdOrSlug: projectSlug}
+ *       : skipToken,
+ *     staleTime: 30_000,
+ *   })
+ * );
+ * ```
+ *
+ * @example With response headers (pagination)
+ * ```ts
+ * const {data} = useQuery({
+ *   ...apiOptions.as<Item[]>()('/organizations/$organizationIdOrSlug/items/', {
+ *     path: {organizationIdOrSlug: organization.slug},
+ *     query: {cursor, per_page: 25},
+ *     staleTime: 0,
+ *   }),
+ *   select: selectJsonWithHeaders,
+ * });
+ * // data is ApiResponse<Item[]>
+ * const items = data?.json ?? [];
+ * const pageLinks = data?.headers.Link;
+ * ```
+ */
 export const apiOptions = {
   as:
     <TManualData>() =>
diff --git a/static/app/utils/replays/hooks/useDeadRageSelectors.tsx b/static/app/utils/replays/hooks/useDeadRageSelectors.tsx
index 3169f345ca4386..0503534dd7f836 100644
--- a/static/app/utils/replays/hooks/useDeadRageSelectors.tsx
+++ b/static/app/utils/replays/hooks/useDeadRageSelectors.tsx
@@ -1,5 +1,6 @@
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useQuery} from '@tanstack/react-query';
+
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {decodeList, decodeScalar} from 'sentry/utils/queryString';
 import {hydratedSelectorData} from 'sentry/utils/replays/hydrateSelectorData';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -14,37 +15,37 @@ export function useDeadRageSelectors(params: DeadRageSelectorQueryParams) {
   const location = useLocation();
   const {query} = location;
 
-  const {isPending, isError, error, data, getResponseHeader} =
-    useApiQuery<DeadRageSelectorListResponse>(
-      [
-        getApiUrl('/organizations/$organizationIdOrSlug/replay-selectors/', {
-          path: {organizationIdOrSlug: organization.slug},
-        }),
-        {
-          query: {
-            query: '!count_dead_clicks:0',
-            cursor: params.cursor,
-            environment: decodeList(query.environment),
-            project: query.project,
-            statsPeriod: query.statsPeriod,
-            start: decodeScalar(query.start),
-            end: decodeScalar(query.end),
-            per_page: params.per_page,
-            sort: query[params.prefix + 'sort'] ?? params.sort,
-          },
+  const {isPending, isError, error, data} = useQuery({
+    ...apiOptions.as<DeadRageSelectorListResponse>()(
+      '/organizations/$organizationIdOrSlug/replay-selectors/',
+      {
+        path: {organizationIdOrSlug: organization.slug},
+        query: {
+          query: '!count_dead_clicks:0',
+          cursor: params.cursor,
+          environment: decodeList(query.environment),
+          project: query.project,
+          statsPeriod: query.statsPeriod,
+          start: decodeScalar(query.start),
+          end: decodeScalar(query.end),
+          per_page: params.per_page,
+          sort: query[params.prefix + 'sort'] ?? params.sort,
         },
-      ],
-      {staleTime: Infinity, enabled: params.enabled}
-    );
+        staleTime: Infinity,
+      }
+    ),
+    select: selectJsonWithHeaders,
+    enabled: params.enabled,
+  });
 
   return {
     isLoading: isPending,
     isError,
     error,
     data: hydratedSelectorData(
-      data ? data.data : [],
+      data ? data.json.data : [],
       params.isWidgetData ? params.sort?.replace(/^-/, '') : null
     ),
-    pageLinks: getResponseHeader?.('Link') ?? undefined,
+    pageLinks: data?.headers.Link,
   };
 }
diff --git a/static/app/views/alerts/list/rules/alertRulesList.tsx b/static/app/views/alerts/list/rules/alertRulesList.tsx
index b03e27616335ed..9864bb1b8dbb40 100644
--- a/static/app/views/alerts/list/rules/alertRulesList.tsx
+++ b/static/app/views/alerts/list/rules/alertRulesList.tsx
@@ -1,5 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 import type {Location} from 'history';
 
 import {Alert} from '@sentry/scraps/alert';
@@ -22,12 +23,11 @@ import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {uniq} from 'sentry/utils/array/uniq';
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {Projects} from 'sentry/utils/projects';
-import type {ApiQueryKey} from 'sentry/utils/queryClient';
-import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {useQueryClient} from 'sentry/utils/queryClient';
 import {useRouteAnalyticsEventNames} from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
 import {useRouteAnalyticsParams} from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useApi} from 'sentry/utils/useApi';
@@ -45,7 +45,7 @@ import {RuleListRow} from './row';
 type SortField = 'date_added' | 'name' | ['incident_status', 'date_triggered'];
 const defaultSort: SortField = ['incident_status', 'date_triggered'];
 
-function getAlertListQueryKey(orgSlug: string, query: Location['query']): ApiQueryKey {
+function getAlertListQueryParams(query: Location['query']) {
   const queryParams = {...query};
   queryParams.expand = ['latestIncident', 'lastTriggered'];
   queryParams.team = getTeamParams(queryParams.team!);
@@ -54,12 +54,18 @@ function getAlertListQueryKey(orgSlug: string, query: Location['query']): ApiQue
     queryParams.sort = defaultSort;
   }
 
-  return [
-    getApiUrl('/organizations/$organizationIdOrSlug/combined-rules/', {
+  return queryParams;
+}
+
+function getAlertListApiOptions(orgSlug: string, query: Location['query']) {
+  return apiOptions.as<Array<CombinedAlerts | null>>()(
+    '/organizations/$organizationIdOrSlug/combined-rules/',
+    {
       path: {organizationIdOrSlug: orgSlug},
-    }),
-    {query: queryParams},
-  ];
+      query: getAlertListQueryParams(query),
+      staleTime: 0,
+    }
+  );
 }
 
 const DataConsentBanner = HookOrDefault({
@@ -82,18 +88,12 @@ export default function AlertRulesList() {
   });
 
   // Fetch alert rules
-  const {
-    data: ruleListResponse = [],
-    refetch,
-    getResponseHeader,
-    isPending,
-    isError,
-  } = useApiQuery<Array<CombinedAlerts | null>>(
-    getAlertListQueryKey(organization.slug, location.query),
-    {
-      staleTime: 0,
-    }
-  );
+  const alertListOptions = getAlertListApiOptions(organization.slug, location.query);
+  const {data, refetch, isPending, isError} = useQuery({
+    ...alertListOptions,
+    select: selectJsonWithHeaders,
+  });
+  const ruleListResponse = data?.json ?? [];
 
   const handleChangeFilter = (activeFilters: string[]) => {
     const {cursor: _cursor, page: _page, ...currentQuery} = location.query;
@@ -166,11 +166,15 @@ export default function AlertRulesList() {
 
     try {
       await api.requestPromise(deleteEndpoints[rule.type], {method: 'DELETE'});
-      setApiQueryData<Array<CombinedAlerts | null>>(
-        queryClient,
-        getAlertListQueryKey(organization.slug, location.query),
-        data => data?.filter(r => r?.id !== rule.id && r?.type !== rule.type)
-      );
+      queryClient.setQueryData(alertListOptions.queryKey, previous => {
+        if (!previous) {
+          return previous;
+        }
+        return {
+          ...previous,
+          json: previous.json.filter(r => r?.id !== rule.id && r?.type !== rule.type),
+        };
+      });
       refetch();
       addSuccessMessage(t('Deleted rule'));
     } catch (_err) {
@@ -194,7 +198,7 @@ export default function AlertRulesList() {
           : rule.projects
     )
   );
-  const ruleListPageLinks = getResponseHeader?.('Link');
+  const ruleListPageLinks = data?.headers.Link;
 
   const sort: {asc: boolean; field: SortField} = {
     asc: location.query.asc === '1',
diff --git a/static/app/views/alerts/rules/issue/details/issuesList.tsx b/static/app/views/alerts/rules/issue/details/issuesList.tsx
index dcc4d4628faf08..52ec186242a855 100644
--- a/static/app/views/alerts/rules/issue/details/issuesList.tsx
+++ b/static/app/views/alerts/rules/issue/details/issuesList.tsx
@@ -1,6 +1,7 @@
 import {Fragment} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {Flex} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
@@ -15,10 +16,10 @@ import {t} from 'sentry/locale';
 import type {IssueAlertRule} from 'sentry/types/alerts';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {getMessage, getTitle} from 'sentry/utils/events';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {RequestError} from 'sentry/utils/requestError/requestError';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {makeFeedbackPathname} from 'sentry/views/feedback/pathnames';
 
@@ -45,25 +46,15 @@ export function AlertRuleIssuesList({
   cursor,
 }: Props) {
   const organization = useOrganization();
-  const {
-    data: groupHistory,
-    getResponseHeader,
-    isPending,
-    isError,
-    error,
-  } = useApiQuery<GroupHistory[]>(
-    [
-      getApiUrl(
-        '/projects/$organizationIdOrSlug/$projectIdOrSlug/rules/$ruleId/group-history/',
-        {
-          path: {
-            organizationIdOrSlug: organization.slug,
-            projectIdOrSlug: project.slug,
-            ruleId: rule.id,
-          },
-        }
-      ),
+  const {data, isPending, error} = useQuery({
+    ...apiOptions.as<GroupHistory[]>()(
+      '/projects/$organizationIdOrSlug/$projectIdOrSlug/rules/$ruleId/group-history/',
       {
+        path: {
+          organizationIdOrSlug: organization.slug,
+          projectIdOrSlug: project.slug,
+          ruleId: rule.id,
+        },
         query: {
           per_page: 10,
           ...(period && {statsPeriod: period}),
@@ -72,15 +63,17 @@ export function AlertRuleIssuesList({
           utc,
           cursor,
         },
-      },
-    ],
-    {staleTime: 0}
-  );
+        staleTime: 0,
+      }
+    ),
+    select: selectJsonWithHeaders,
+  });
+  const groupHistory = data?.json;
 
-  if (isError) {
+  if (error instanceof RequestError) {
     return (
       <LoadingError
-        message={(error?.responseJSON?.detail as string) ?? t('default message')}
+        message={(error.responseJSON?.detail as string) ?? t('default message')}
       />
     );
   }
@@ -140,7 +133,7 @@ export function AlertRuleIssuesList({
         })}
       </StyledPanelTable>
       <Flex justify="end" align="center" marginBottom="xl">
-        <StyledPagination pageLinks={getResponseHeader?.('Link')} size="xs" />
+        <StyledPagination pageLinks={data?.headers.Link} size="xs" />
       </Flex>
     </Fragment>
   );
diff --git a/static/app/views/discover/landing.tsx b/static/app/views/discover/landing.tsx
index 0c14426e395671..2e79098e64748f 100644
--- a/static/app/views/discover/landing.tsx
+++ b/static/app/views/discover/landing.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {Alert} from '@sentry/scraps/alert';
 import {LinkButton} from '@sentry/scraps/button';
@@ -19,10 +20,9 @@ import {t, tct} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
 import type {NewQuery, SavedQuery} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {EventView} from 'sentry/utils/discover/eventView';
 import {getDiscoverLandingUrl} from 'sentry/utils/discover/urls';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -114,19 +114,17 @@ const useDiscoverLandingQuery = (renderPrebuilt: boolean) => {
     delete queryParams.cursor;
   }
 
-  return useApiQuery<SavedQuery[]>(
-    [
-      getApiUrl('/organizations/$organizationIdOrSlug/discover/saved/', {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
+  return useQuery({
+    ...apiOptions.as<SavedQuery[]>()(
+      '/organizations/$organizationIdOrSlug/discover/saved/',
       {
+        path: {organizationIdOrSlug: organization.slug},
         query: queryParams,
-      },
-    ],
-    {
-      staleTime: 0,
-    }
-  );
+        staleTime: 0,
+      }
+    ),
+    select: selectJsonWithHeaders,
+  });
 };
 
 const RENDER_PREBUILT_KEY = 'discover-render-prebuilt';
@@ -146,12 +144,12 @@ function DiscoverLanding() {
   const {
     status,
     error,
-    data: savedQueries = [],
-    getResponseHeader,
+    data: savedQueriesResponse,
     refetch: refreshSavedQueries,
   } = useDiscoverLandingQuery(renderPrebuilt);
 
-  const savedQueriesPageLinks = getResponseHeader?.('Link');
+  const savedQueries = savedQueriesResponse?.json ?? [];
+  const savedQueriesPageLinks = savedQueriesResponse?.headers.Link;
 
   const to = makeDiscoverPathname({
     path: `/homepage/`,
diff --git a/static/app/views/settings/account/accountNotificationFineTuning.tsx b/static/app/views/settings/account/accountNotificationFineTuning.tsx
index be42740563547a..eaeaa3ebb42a38 100644
--- a/static/app/views/settings/account/accountNotificationFineTuning.tsx
+++ b/static/app/views/settings/account/accountNotificationFineTuning.tsx
@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {useQuery} from '@tanstack/react-query';
 import {parseAsString, useQueryState} from 'nuqs';
 import {z} from 'zod';
 
@@ -20,6 +21,7 @@ import {OrganizationsStore} from 'sentry/stores/organizationsStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import type {Project} from 'sentry/types/project';
 import type {UserEmail} from 'sentry/types/user';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import {fetchMutation, keepPreviousData, useApiQuery} from 'sentry/utils/queryClient';
 import {ACCOUNT_NOTIFICATION_FIELDS} from 'sentry/views/settings/account/notifications/fields';
@@ -113,26 +115,22 @@ export function AccountNotificationFineTuning() {
     (organizations.length === 1 ? organizations[0]?.id : undefined);
 
   const {
-    data: projects,
+    data: projectsResp,
     isPending: isPendingProjects,
     isError: isErrorProjects,
-    getResponseHeader: getProjectsResponseHeader,
-  } = useApiQuery<Project[]>(
-    [
-      getApiUrl('/projects/'),
-      {
-        query: {
-          organizationId,
-          cursor,
-          query,
-        },
+  } = useQuery({
+    ...apiOptions.as<Project[]>()('/projects/', {
+      query: {
+        organizationId,
+        cursor,
+        query,
       },
-    ],
-    {
       staleTime: 0,
-      enabled: Boolean(organizationId),
-    }
-  );
+    }),
+    enabled: Boolean(organizationId),
+    select: selectJsonWithHeaders,
+  });
+  const projects = projectsResp?.json;
 
   const {
     data: emails = [],
@@ -234,7 +232,7 @@ export function AccountNotificationFineTuning() {
           )}
         </Stack>
       </Panel>
-      {projects && <Pagination pageLinks={getProjectsResponseHeader?.('Link')} />}
+      {projects && <Pagination pageLinks={projectsResp?.headers.Link} />}
     </div>
   );
 }
diff --git a/static/app/views/settings/organizationTeams/teamMembers.tsx b/static/app/views/settings/organizationTeams/teamMembers.tsx
index f23ebecd6cdc99..67b4fa1aed6429 100644
--- a/static/app/views/settings/organizationTeams/teamMembers.tsx
+++ b/static/app/views/settings/organizationTeams/teamMembers.tsx
@@ -1,6 +1,6 @@
 import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
-import {keepPreviousData} from '@tanstack/react-query';
+import {keepPreviousData, useQuery} from '@tanstack/react-query';
 
 import {UserAvatar} from '@sentry/scraps/avatar';
 import {
@@ -28,14 +28,9 @@ import {TeamRoleColumnLabel} from 'sentry/components/teamRoleUtils';
 import {IconUser} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Member, Organization, Team, TeamMember} from 'sentry/types/organization';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {
-  setApiQueryData,
-  useApiQuery,
-  useMutation,
-  useQueryClient,
-  type ApiQueryKey,
-} from 'sentry/utils/queryClient';
+import {useApiQuery, useMutation, useQueryClient} from 'sentry/utils/queryClient';
 import {useApi} from 'sentry/utils/useApi';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -51,7 +46,7 @@ import {ProjectPermissionAlert} from 'sentry/views/settings/project/projectPermi
 
 import {getButtonHelpText} from './utils';
 
-function getTeamMembersQueryKey({
+function getTeamMembersApiOptions({
   organization,
   teamId,
   location,
@@ -59,18 +54,18 @@ function getTeamMembersQueryKey({
   location: ReturnType<typeof useLocation>;
   organization: Organization;
   teamId: string;
-}): ApiQueryKey {
-  return [
-    getApiUrl(`/teams/$organizationIdOrSlug/$teamIdOrSlug/members/`, {
-      path: {organizationIdOrSlug: organization.slug, teamIdOrSlug: teamId},
-    }),
+}) {
+  return apiOptions.as<TeamMember[]>()(
+    '/teams/$organizationIdOrSlug/$teamIdOrSlug/members/',
     {
+      path: {organizationIdOrSlug: organization.slug, teamIdOrSlug: teamId},
       query: {
         cursor: location.query.cursor,
         query: location.query.query,
       },
-    },
-  ];
+      staleTime: 30_000,
+    }
+  );
 }
 
 function AddMemberDropdown({
@@ -204,19 +199,17 @@ export default function TeamMembers() {
   const {team} = useTeamDetailsOutlet();
 
   const {
-    data: teamMembers = [],
+    data: teamMembersResp,
     isError: isTeamMembersError,
     isLoading: isTeamMembersLoading,
     refetch: refetchTeamMembers,
-    getResponseHeader: getTeamMemberResponseHeader,
-  } = useApiQuery<TeamMember[]>(
-    getTeamMembersQueryKey({organization, teamId: team.slug, location}),
-    {
-      staleTime: 30_000,
-    }
-  );
+  } = useQuery({
+    ...getTeamMembersApiOptions({organization, teamId: team.slug, location}),
+    select: selectJsonWithHeaders,
+  });
+  const teamMembers = teamMembersResp?.json ?? [];
 
-  const teamMembersPageLinks = getTeamMemberResponseHeader?.('Link');
+  const teamMembersPageLinks = teamMembersResp?.headers.Link;
 
   const hasOrgWriteAccess = hasEveryAccess(['org:write'], {organization, team});
   const hasTeamAdminAccess = hasEveryAccess(['team:admin'], {organization, team});
@@ -231,14 +224,16 @@ export default function TeamMembers() {
       });
     },
     onSuccess: (_data, variables) => {
-      setApiQueryData<TeamMember[]>(
-        queryClient,
-        getTeamMembersQueryKey({organization, teamId: team.slug, location}),
+      queryClient.setQueryData(
+        getTeamMembersApiOptions({organization, teamId: team.slug, location}).queryKey,
         existingData => {
           if (!existingData) {
             return existingData;
           }
-          return existingData.filter(member => member.id !== variables.memberId);
+          return {
+            ...existingData,
+            json: existingData.json.filter(member => member.id !== variables.memberId),
+          };
         }
       );
       addSuccessMessage(t('Successfully removed member from team.'));
@@ -262,24 +257,26 @@ export default function TeamMembers() {
     },
     onSuccess: (_data, variables) => {
       addSuccessMessage(t('Successfully changed role for team member.'));
-      setApiQueryData<TeamMember[]>(
-        queryClient,
-        getTeamMembersQueryKey({organization, teamId: team.slug, location}),
+      queryClient.setQueryData(
+        getTeamMembersApiOptions({organization, teamId: team.slug, location}).queryKey,
         existingData => {
           if (!existingData) {
             return existingData;
           }
 
-          return existingData.map(member => {
-            if (member.id === variables.memberId) {
-              return {
-                ...member,
-                teamRole: variables.newRole,
-              };
-            }
+          return {
+            ...existingData,
+            json: existingData.json.map(member => {
+              if (member.id === variables.memberId) {
+                return {
+                  ...member,
+                  teamRole: variables.newRole,
+                };
+              }
 
-            return member;
-          });
+              return member;
+            }),
+          };
         }
       );
     },
@@ -299,14 +296,16 @@ export default function TeamMembers() {
       });
     },
     onSuccess: (_data, {orgMember}) => {
-      setApiQueryData<TeamMember[]>(
-        queryClient,
-        getTeamMembersQueryKey({organization, teamId: team.slug, location}),
+      queryClient.setQueryData(
+        getTeamMembersApiOptions({organization, teamId: team.slug, location}).queryKey,
         existingData => {
           if (!existingData) {
             return existingData;
           }
-          return existingData.concat([orgMember]);
+          return {
+            ...existingData,
+            json: existingData.json.concat([orgMember]),
+          };
         }
       );
       addSuccessMessage(t('Successfully added member to team.'));
diff --git a/static/app/views/settings/project/projectFilters/groupTombstones.tsx b/static/app/views/settings/project/projectFilters/groupTombstones.tsx
index c63689589d9d73..574e29203779fd 100644
--- a/static/app/views/settings/project/projectFilters/groupTombstones.tsx
+++ b/static/app/views/settings/project/projectFilters/groupTombstones.tsx
@@ -1,5 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {UserAvatar} from '@sentry/scraps/avatar';
 import {Button} from '@sentry/scraps/button';
@@ -22,9 +23,8 @@ import {t} from 'sentry/locale';
 import type {GroupTombstone} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {getMessage, getTitle} from 'sentry/utils/events';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import {useApi} from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -122,21 +122,23 @@ export function GroupTombstones({project}: GroupTombstonesProps) {
   const location = useLocation();
   const organization = useOrganization();
   const {
-    data: tombstones,
+    data: tombstonesResp,
     isPending,
     isError,
     refetch,
-    getResponseHeader,
-  } = useApiQuery<GroupTombstone[]>(
-    [
-      getApiUrl(`/projects/$organizationIdOrSlug/$projectIdOrSlug/tombstones/`, {
+  } = useQuery({
+    ...apiOptions.as<GroupTombstone[]>()(
+      '/projects/$organizationIdOrSlug/$projectIdOrSlug/tombstones/',
+      {
         path: {organizationIdOrSlug: organization.slug, projectIdOrSlug: project.slug},
-      }),
-      {query: {...location.query}},
-    ],
-    {staleTime: 0}
-  );
-  const tombstonesPageLinks = getResponseHeader?.('Link');
+        query: {...location.query},
+        staleTime: 0,
+      }
+    ),
+    select: selectJsonWithHeaders,
+  });
+  const tombstones = tombstonesResp?.json;
+  const tombstonesPageLinks = tombstonesResp?.headers.Link;
 
   const handleUndiscard = (tombstoneId: GroupTombstone['id']) => {
     api
@@ -185,10 +187,10 @@ export function GroupTombstones({project}: GroupTombstonesProps) {
                 <CenteredAlignedColumn key="member">{t('Member')}</CenteredAlignedColumn>,
                 <CenteredAlignedColumn key="actions" />,
               ]}
-              isEmpty={!tombstones.length}
+              isEmpty={!tombstones?.length}
               emptyMessage={t('You have no discarded issues')}
             >
-              {tombstones.map(data => (
+              {tombstones?.map(data => (
                 <GroupTombstoneRow
                   key={data.id}
                   data={data}

From 09b97049508b27586d9789b97821ff21eb54e81e Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar.saynorath@sentry.io>
Date: Tue, 7 Apr 2026 10:23:03 -0400
Subject: [PATCH 10/18] feat(tracemetrics): Update ArithmeticBuilder to allow
 for REFERENCE tokens (#111956)

To be able to do equations using series, we need to be able to support
UI that will allow us to reference other series definitions. To do this
I've added a `REFERENCE` token type which will be used in conjunction
with an argument passed in, `references`, which determines the available
references.

This required me to update the grammar, validators, and tokenizer to
have the right check for this "references" condition (i.e. if it's not
in the set, it's not a reference and it will fall back to free text)

The changes also follow closely to the code path for functions, so
places where it checks for functions as valid terms should also check
for references. These are used to update things like the autoformatting
and cursor placement when switching from freetext to a reference token.

I also changed some of the internals for how we handle
`static/app/components/arithmeticBuilder/action.tsx` because I want the
expression to be able to re-evaluate if the references change. If a
reference is removed, the equation should also update and render the old
reference as free text.

Since there's no UI using this at the moment, I've opted to render it in
Storybook
---
 .../components/arithmeticBuilder/action.tsx   |  34 ++-
 .../arithmeticBuilder.stories.tsx             |  89 ++++++
 .../components/arithmeticBuilder/context.tsx  |   1 +
 .../arithmeticBuilder/expression.tsx          |   4 +-
 .../arithmeticBuilder/grammar.pegjs           |   7 +-
 .../arithmeticBuilder/index.spec.tsx          |  17 +-
 .../components/arithmeticBuilder/index.tsx    |  19 ++
 .../arithmeticBuilder/token/deleteButton.tsx  |  49 ++++
 .../arithmeticBuilder/token/freeText.tsx      |  93 +++---
 .../arithmeticBuilder/token/function.tsx      |  42 +--
 .../arithmeticBuilder/token/grid.tsx          |  13 +
 .../arithmeticBuilder/token/index.spec.tsx    |  43 +++
 .../arithmeticBuilder/token/index.tsx         |  17 ++
 .../arithmeticBuilder/token/literal.tsx       |  98 +------
 .../arithmeticBuilder/token/reference.tsx     | 270 ++++++++++++++++++
 .../arithmeticBuilder/token/styles.tsx        |  50 ++++
 .../arithmeticBuilder/tokenizer.spec.tsx      |  33 ++-
 .../arithmeticBuilder/tokenizer.tsx           |  38 ++-
 .../arithmeticBuilder/validator.spec.tsx      |  80 +++++-
 .../arithmeticBuilder/validator.tsx           |  34 ++-
 20 files changed, 830 insertions(+), 201 deletions(-)
 create mode 100644 static/app/components/arithmeticBuilder/arithmeticBuilder.stories.tsx
 create mode 100644 static/app/components/arithmeticBuilder/token/deleteButton.tsx
 create mode 100644 static/app/components/arithmeticBuilder/token/reference.tsx
 create mode 100644 static/app/components/arithmeticBuilder/token/styles.tsx

diff --git a/static/app/components/arithmeticBuilder/action.tsx b/static/app/components/arithmeticBuilder/action.tsx
index 5c0a864edabd1b..494fb1dbabc0ab 100644
--- a/static/app/components/arithmeticBuilder/action.tsx
+++ b/static/app/components/arithmeticBuilder/action.tsx
@@ -51,11 +51,13 @@ function isArithmeticBuilderReplaceAction(
 
 interface UseArithmeticBuilderActionOptions {
   initialExpression: string;
+  references?: Set<string>;
   updateExpression?: (expression: Expression) => void;
 }
 
 export function useArithmeticBuilderAction({
   initialExpression,
+  references,
   updateExpression,
 }: UseArithmeticBuilderActionOptions): {
   dispatch: (action: ArithmeticBuilderAction) => void;
@@ -64,30 +66,38 @@ export function useArithmeticBuilderAction({
     focusOverride: FocusOverride | null;
   };
 } {
-  const [expression, setExpression] = useState(() => new Expression(initialExpression));
+  const [expressionString, setExpressionString] = useState(initialExpression);
   const [focusOverride, setFocusOverride] = useState<FocusOverride | null>(null);
 
+  // Recreate the Expression when the string or references change because
+  // a reference change may invalidate some of the current references and turn
+  // them into free text tokens.
+  const expression = useMemo(
+    () => new Expression(expressionString, references),
+    [expressionString, references]
+  );
+
   const dispatch = useCallback(
     (action: ArithmeticBuilderAction) => {
       if (isArithmeticBuilderUpdateResetFocusOverrideAction(action)) {
         setFocusOverride(null);
       } else if (isArithmeticBuilderDeleteAction(action)) {
-        const newExpression = deleteToken(expression.text, action);
-        updateExpression?.(newExpression);
-        setExpression(newExpression);
+        const newText = deleteTokenText(expressionString, action);
+        setExpressionString(newText);
+        updateExpression?.(new Expression(newText, references));
         if (defined(action.focusOverride)) {
           setFocusOverride(action.focusOverride);
         }
       } else if (isArithmeticBuilderReplaceAction(action)) {
-        const newExpression = replaceToken(expression.text, action);
-        updateExpression?.(newExpression);
-        setExpression(newExpression);
+        const newText = replaceTokenText(expressionString, action);
+        setExpressionString(newText);
+        updateExpression?.(new Expression(newText, references));
         if (defined(action.focusOverride)) {
           setFocusOverride(action.focusOverride);
         }
       }
     },
-    [expression.text, updateExpression]
+    [expressionString, references, updateExpression]
   );
 
   const state = useMemo(
@@ -101,14 +111,14 @@ export function useArithmeticBuilderAction({
   return {state, dispatch};
 }
 
-function deleteToken(text: string, action: ArithmeticBuilderDeleteAction) {
+function deleteTokenText(text: string, action: ArithmeticBuilderDeleteAction): string {
   const [head, tail] = queryHeadTail(text, action.token);
-  return new Expression(removeExcessWhitespaceFromParts(head, tail));
+  return removeExcessWhitespaceFromParts(head, tail);
 }
 
-function replaceToken(text: string, action: ArithmeticBuilderReplaceAction) {
+function replaceTokenText(text: string, action: ArithmeticBuilderReplaceAction): string {
   const [head, tail] = queryHeadTail(text, action.token);
-  return new Expression(removeExcessWhitespaceFromParts(head, action.text, tail));
+  return removeExcessWhitespaceFromParts(head, action.text, tail);
 }
 
 function queryHeadTail(expression: string, token: Token): [string, string] {
diff --git a/static/app/components/arithmeticBuilder/arithmeticBuilder.stories.tsx b/static/app/components/arithmeticBuilder/arithmeticBuilder.stories.tsx
new file mode 100644
index 00000000000000..76120e6025cc92
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/arithmeticBuilder.stories.tsx
@@ -0,0 +1,89 @@
+import {Fragment, useCallback, useEffect, useState} from 'react';
+
+import {ArithmeticBuilder} from 'sentry/components/arithmeticBuilder';
+import {Expression} from 'sentry/components/arithmeticBuilder/expression';
+import {ErrorBoundary} from 'sentry/components/errorBoundary';
+import * as Storybook from 'sentry/stories';
+
+export default Storybook.story('ArithmeticBuilder', story => {
+  story('With References', () => {
+    const [expression, setExpression] = useState('A + B');
+    const [isValid, setIsValid] = useState(true);
+    const [references, setReferences] = useState(new Set<string>(['A', 'B', 'C']));
+    const [parseError, setParseError] = useState('');
+
+    const onExpressionChange = useCallback((expr: Expression) => {
+      setExpression(expr.text);
+    }, []);
+
+    // Explicitly check the new expression for validity since references
+    // changing is a responibility of the caller.
+    useEffect(() => {
+      setIsValid(new Expression(expression, references).isValid);
+    }, [expression, references]);
+
+    return (
+      <Fragment>
+        <p>
+          Define references as a JSON array of strings below, then use them in the
+          expression. If references are present, then they will take priority over
+          aggregations and only suggest references and operators when typing.
+        </p>
+
+        <p>
+          If a character appears that is not a reference, then it will be treated as a
+          free text token.
+        </p>
+
+        <p>
+          If during typing, the string matches a single reference, we will automatically
+          select that reference. Otherwise we will continue to suggest references since
+          there are multiple options.
+        </p>
+
+        <label htmlFor="refs-input">
+          References JSON. This setup will submit the references onBlur. If you trigger an
+          error case, you can update the references and it will re-mount the component.
+          <textarea
+            id="refs-input"
+            defaultValue={JSON.stringify([...references])}
+            onBlur={e => {
+              try {
+                const parsed = JSON.parse(e.target.value);
+                setReferences(new Set(parsed));
+                setParseError('');
+              } catch (error) {
+                setParseError(String(error));
+              }
+            }}
+            rows={3}
+            style={{width: '100%', fontFamily: 'monospace', marginBottom: 8}}
+          />
+        </label>
+
+        {parseError ? <p style={{color: 'red'}}>{parseError}</p> : null}
+        <ErrorBoundary mini key={JSON.stringify([...references])}>
+          <ArithmeticBuilder
+            key={JSON.stringify([...references])}
+            expression={expression}
+            setExpression={onExpressionChange}
+            references={references}
+            aggregations={[]}
+            functionArguments={[]}
+            getFieldDefinition={() => null}
+          />
+        </ErrorBoundary>
+
+        <div style={{marginTop: 8, fontFamily: 'monospace'}}>
+          <p>Expression: {expression}</p>
+          <p>
+            Valid:{' '}
+            <span style={{color: isValid ? 'green' : 'red'}}>
+              {isValid ? 'yes' : 'no'}
+            </span>
+          </p>
+        </div>
+      </Fragment>
+    );
+  });
+});
diff --git a/static/app/components/arithmeticBuilder/context.tsx b/static/app/components/arithmeticBuilder/context.tsx
index ddb942c5f1337f..e915ca60f75330 100644
--- a/static/app/components/arithmeticBuilder/context.tsx
+++ b/static/app/components/arithmeticBuilder/context.tsx
@@ -15,6 +15,7 @@ interface ArithmeticBuilderContextData {
   functionArguments: FunctionArgument[];
   getFieldDefinition: (key: string) => FieldDefinition | null;
   getSuggestedKey?: (key: string) => string | null;
+  references?: Set<string>;
 }
 
 export const ArithmeticBuilderContext = createContext<ArithmeticBuilderContextData>({
diff --git a/static/app/components/arithmeticBuilder/expression.tsx b/static/app/components/arithmeticBuilder/expression.tsx
index ea12a2c3da7414..808477f5fa245d 100644
--- a/static/app/components/arithmeticBuilder/expression.tsx
+++ b/static/app/components/arithmeticBuilder/expression.tsx
@@ -7,9 +7,9 @@ export class Expression {
   readonly tokens: Token[];
   readonly isValid: boolean;
 
-  constructor(text: string) {
+  constructor(text: string, references?: Set<string>) {
     this.text = text;
-    this.tokens = tokenizeExpression(this.text);
+    this.tokens = tokenizeExpression(this.text, references);
     this.isValid = validateTokens(this.tokens);
   }
 }
diff --git a/static/app/components/arithmeticBuilder/grammar.pegjs b/static/app/components/arithmeticBuilder/grammar.pegjs
index 3849b9732cb163..e039be65e414a2 100644
--- a/static/app/components/arithmeticBuilder/grammar.pegjs
+++ b/static/app/components/arithmeticBuilder/grammar.pegjs
@@ -5,10 +5,15 @@
 tokens = token*
 
 token
-  = spaces token:(paren / literal / op / func / free_text) spaces {
+  = spaces token:(paren / literal / op / reference / func / free_text) spaces {
     return token;
   }
 
+reference
+  = val:[A-Z] &{ return tc.isReference(val); } {
+    return tc.tokenReference(val, location());
+  }
+
 func
   = func:name "(" args:args spaces ")" {
     return tc.tokenFunction(func, args, location());
diff --git a/static/app/components/arithmeticBuilder/index.spec.tsx b/static/app/components/arithmeticBuilder/index.spec.tsx
index 1513315d4e8a6e..fbdf07719d0bff 100644
--- a/static/app/components/arithmeticBuilder/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/index.spec.tsx
@@ -19,13 +19,20 @@ const getSpanFieldDefinition = (key: string) => {
   return getFieldDefinition(key, 'span', argument?.kind);
 };
 
-function ArithmeticBuilderWrapper({expression}: {expression: string}) {
+function ArithmeticBuilderWrapper({
+  expression,
+  references,
+}: {
+  expression: string;
+  references?: Set<string>;
+}) {
   return (
     <ArithmeticBuilder
       aggregations={aggregations}
       functionArguments={functionArguments}
       getFieldDefinition={getSpanFieldDefinition}
       expression={expression}
+      references={references}
     />
   );
 }
@@ -256,4 +263,12 @@ describe('ArithmeticBuilder', () => {
 
     expect(screen.getAllByRole('row')).toHaveLength(1);
   });
+
+  it('throws when provided invalid references', () => {
+    expect(() => {
+      render(
+        <ArithmeticBuilderWrapper expression="A + B" references={new Set(['!invalid'])} />
+      );
+    }).toThrow('Invalid reference: !invalid');
+  });
 });
diff --git a/static/app/components/arithmeticBuilder/index.tsx b/static/app/components/arithmeticBuilder/index.tsx
index ba8e82326f2f2e..718ae88abe6fae 100644
--- a/static/app/components/arithmeticBuilder/index.tsx
+++ b/static/app/components/arithmeticBuilder/index.tsx
@@ -28,9 +28,16 @@ interface ArithmeticBuilderProps {
    * to a known column.
    */
   getSuggestedKey?: (key: string) => string | null;
+  /**
+   * When provided, the arithmetic builder will use the references to suggest
+   * keys for the user instead of aggregations and function arguments.
+   */
+  references?: Set<string>;
   setExpression?: (expression: Expression) => void;
 }
 
+const VALID_REFERENCE_PATTERN = /^[A-Z]$/;
+
 export function ArithmeticBuilder({
   'data-test-id': dataTestId,
   expression,
@@ -41,9 +48,19 @@ export function ArithmeticBuilder({
   getSuggestedKey,
   className,
   disabled,
+  references,
 }: ArithmeticBuilderProps) {
+  if (references) {
+    for (const reference of references) {
+      if (!VALID_REFERENCE_PATTERN.test(reference)) {
+        throw new Error(`Invalid reference: ${reference}`);
+      }
+    }
+  }
+
   const {state, dispatch} = useArithmeticBuilderAction({
     initialExpression: expression || '',
+    references,
     updateExpression: setExpression,
   });
 
@@ -57,6 +74,7 @@ export function ArithmeticBuilder({
       functionArguments,
       getFieldDefinition,
       getSuggestedKey,
+      references,
     };
   }, [
     state,
@@ -65,6 +83,7 @@ export function ArithmeticBuilder({
     functionArguments,
     getFieldDefinition,
     getSuggestedKey,
+    references,
   ]);
 
   return (
diff --git a/static/app/components/arithmeticBuilder/token/deleteButton.tsx b/static/app/components/arithmeticBuilder/token/deleteButton.tsx
new file mode 100644
index 00000000000000..fbcd3c22f573db
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/token/deleteButton.tsx
@@ -0,0 +1,49 @@
+import {useCallback} from 'react';
+import styled from '@emotion/styled';
+
+import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
+
+import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
+import type {Token} from 'sentry/components/arithmeticBuilder/token';
+import {IconClose} from 'sentry/icons';
+import {defined} from 'sentry/utils';
+
+interface DeleteButtonProps {
+  token: Token;
+  focusOverrideKey?: string | null;
+  label?: string;
+}
+
+export function DeleteButton({token, focusOverrideKey, label}: DeleteButtonProps) {
+  const {dispatch} = useArithmeticBuilder();
+
+  const onClick = useCallback(() => {
+    dispatch({
+      type: 'DELETE_TOKEN',
+      token,
+      focusOverride: defined(focusOverrideKey) ? {itemKey: focusOverrideKey} : undefined,
+    });
+  }, [dispatch, token, focusOverrideKey]);
+
+  return (
+    <StyledDeleteButton aria-label={label} onClick={onClick}>
+      <InteractionStateLayer />
+      <IconClose legacySize="8px" />
+    </StyledDeleteButton>
+  );
+}
+
+const StyledDeleteButton = styled('button')`
+  background: none;
+  border: none;
+  color: ${p => p.theme.tokens.content.secondary};
+  outline: none;
+  user-select: none;
+  padding-right: ${p => p.theme.space.xs};
+
+  :focus {
+    background-color: ${p => p.theme.colors.gray100};
+    border-left: 1px solid ${p => p.theme.tokens.border.secondary};
+    outline: none;
+  }
+`;
diff --git a/static/app/components/arithmeticBuilder/token/freeText.tsx b/static/app/components/arithmeticBuilder/token/freeText.tsx
index f348615ffd3c64..9bbbf6e8827671 100644
--- a/static/app/components/arithmeticBuilder/token/freeText.tsx
+++ b/static/app/components/arithmeticBuilder/token/freeText.tsx
@@ -18,8 +18,10 @@ import {
   isTokenLiteral,
   isTokenOperator,
   isTokenParenthesis,
+  isTokenReference,
   TokenKind,
 } from 'sentry/components/arithmeticBuilder/token';
+import {Row} from 'sentry/components/arithmeticBuilder/token/styles';
 import {
   nextSimilarTokenKey,
   nextTokenKeyOfKind,
@@ -129,7 +131,7 @@ function InternalInput({
     updateSelectionIndex();
   }, [trimmedTokenValue, updateSelectionIndex]);
 
-  const {dispatch, aggregations, getFieldDefinition} = useArithmeticBuilder();
+  const {dispatch, aggregations, getFieldDefinition, references} = useArithmeticBuilder();
 
   const getNextFocusOverride = useCallback(
     (focusToken?: FocusToken): string => {
@@ -192,7 +194,7 @@ function InternalInput({
     (evt: ChangeEvent<HTMLInputElement>) => {
       const text = evt.target.value;
 
-      const tokens = tokenizeExpression(text);
+      const tokens = tokenizeExpression(text, references);
 
       for (const tok of tokens) {
         if (isTokenParenthesis(tok) || isTokenOperator(tok)) {
@@ -208,6 +210,19 @@ function InternalInput({
           return;
         }
 
+        if (isTokenReference(tok)) {
+          dispatch({
+            type: 'REPLACE_TOKEN',
+            token,
+            text,
+            focusOverride: {
+              itemKey: getNextFocusOverride(),
+            },
+          });
+          resetInputValue();
+          return;
+        }
+
         if (isTokenFunction(tok)) {
           dispatch({
             type: 'REPLACE_TOKEN',
@@ -271,6 +286,7 @@ function InternalInput({
       dispatch,
       getNextFocusOverride,
       getFunctionDefault,
+      references,
       resetInputValue,
       token,
     ]
@@ -281,9 +297,12 @@ function InternalInput({
       type: 'REPLACE_TOKEN',
       token,
       text: inputValue.trim(),
+      focusOverride: {
+        itemKey: getNextFocusOverride(),
+      },
     });
     resetInputValue();
-  }, [dispatch, inputValue, token, resetInputValue]);
+  }, [dispatch, inputValue, token, resetInputValue, getNextFocusOverride]);
 
   const onInputEscape = useCallback(() => {
     dispatch({
@@ -442,10 +461,14 @@ function useSuggestionItems({
     filterValue,
     nextAllowedTokenKinds,
   });
+  const referenceItems = useReferenceItems({nextAllowedTokenKinds});
 
   return useMemo(() => {
+    if (referenceItems.length > 0) {
+      return [...parenthesisItems, ...operatorItems, ...referenceItems];
+    }
     return [...parenthesisItems, ...operatorItems, ...functionItems];
-  }, [parenthesisItems, operatorItems, functionItems]);
+  }, [parenthesisItems, operatorItems, functionItems, referenceItems]);
 }
 
 function useParenthesisItems({
@@ -579,39 +602,41 @@ function useFunctionItems({
   }, [allowedFunctions, filterValue, nextAllowedTokenKinds]);
 }
 
-function stopPropagation(evt: MouseEvent<HTMLElement>) {
-  evt.stopPropagation();
-}
-
-const Row = styled('div')`
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  height: 24px;
-  max-width: 100%;
-
-  &:last-child {
-    flex-grow: 1;
-  }
+function useReferenceItems({
+  nextAllowedTokenKinds,
+}: {
+  nextAllowedTokenKinds: TokenKind[];
+}): Array<SelectSectionWithKey<string>> {
+  const {references} = useArithmeticBuilder();
 
-  &[aria-invalid='true'] {
-    input {
-      color: ${p => p.theme.colors.red500};
+  return useMemo(() => {
+    if (
+      !references ||
+      references.size === 0 ||
+      !nextAllowedTokenKinds.includes(TokenKind.REFERENCE)
+    ) {
+      return [];
     }
-  }
 
-  &[aria-selected='true'] {
-    [data-hidden-text='true']::before {
-      content: '';
-      position: absolute;
-      left: ${p => p.theme.space.xs};
-      right: ${p => p.theme.space.xs};
-      top: 0;
-      bottom: 0;
-      background-color: ${p => p.theme.colors.gray100};
-    }
-  }
-`;
+    return [
+      {
+        key: 'references',
+        label: t('references'),
+        options: [...references].map(key => ({
+          key: `${TokenKind.REFERENCE}:${key}`,
+          label: key,
+          value: key,
+          textValue: key,
+          hideCheck: true,
+        })),
+      },
+    ];
+  }, [references, nextAllowedTokenKinds]);
+}
+
+function stopPropagation(evt: MouseEvent<HTMLElement>) {
+  evt.stopPropagation();
+}
 
 const GridCell = styled('div')`
   position: relative;
diff --git a/static/app/components/arithmeticBuilder/token/function.tsx b/static/app/components/arithmeticBuilder/token/function.tsx
index d2f248aeee8507..95d229950977a3 100644
--- a/static/app/components/arithmeticBuilder/token/function.tsx
+++ b/static/app/components/arithmeticBuilder/token/function.tsx
@@ -8,7 +8,6 @@ import {useListState, type ListState} from '@react-stately/list';
 import type {CollectionChildren, KeyboardEvent, Node} from '@react-types/shared';
 
 import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
-import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
 import {Flex} from '@sentry/scraps/layout';
 
 import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
@@ -18,6 +17,7 @@ import type {
   TokenFunction,
 } from 'sentry/components/arithmeticBuilder/token';
 import {TokenKind} from 'sentry/components/arithmeticBuilder/token';
+import {DeleteButton} from 'sentry/components/arithmeticBuilder/token/deleteButton';
 import {nextTokenKeyOfKind} from 'sentry/components/arithmeticBuilder/tokenizer';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import {itemIsSection} from 'sentry/components/searchQueryBuilder/tokens/utils';
@@ -26,7 +26,6 @@ import {useGridListItem} from 'sentry/components/tokenizedInput/grid/useGridList
 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 {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
 import {FieldKind, FieldValueType, prettifyTagKey} from 'sentry/utils/fields';
@@ -68,7 +67,7 @@ export function ArithmeticTokenFunction({
       <FunctionGridCell {...gridCellProps}>{token.function}</FunctionGridCell>
       <ArgumentsGrid rowRef={ref} item={item} state={state} token={token} />
       <BaseGridCell {...gridCellProps}>
-        <DeleteFunction token={token} />
+        <DeleteButton token={token} label={t('Remove function %s', token.text)} />
       </BaseGridCell>
     </FunctionWrapper>
   );
@@ -671,28 +670,6 @@ function InternalInput({
   );
 }
 
-interface DeleteFunctionProps {
-  token: TokenFunction;
-}
-
-function DeleteFunction({token}: DeleteFunctionProps) {
-  const {dispatch} = useArithmeticBuilder();
-
-  const onClick = useCallback(() => {
-    dispatch({
-      type: 'DELETE_TOKEN',
-      token,
-    });
-  }, [dispatch, token]);
-
-  return (
-    <DeleteButton aria-label={t('Remove function %s', token.text)} onClick={onClick}>
-      <InteractionStateLayer />
-      <IconClose legacySize="8px" />
-    </DeleteButton>
-  );
-}
-
 function useAttributeItems({
   allowedAttributes,
   filterValue,
@@ -778,18 +755,3 @@ const FunctionGridCell = styled(BaseGridCell)`
   color: ${p => p.theme.colors.green500};
   padding-left: ${p => p.theme.space.xs};
 `;
-
-const DeleteButton = styled('button')`
-  background: none;
-  border: none;
-  color: ${p => p.theme.tokens.content.secondary};
-  outline: none;
-  user-select: none;
-  padding-right: ${p => p.theme.space.xs};
-
-  :focus {
-    background-color: ${p => p.theme.colors.gray100};
-    border-left: 1px solid ${p => p.theme.tokens.border.secondary};
-    outline: none;
-  }
-`;
diff --git a/static/app/components/arithmeticBuilder/token/grid.tsx b/static/app/components/arithmeticBuilder/token/grid.tsx
index a1347f134ab98f..54e1fdfb3e484e 100644
--- a/static/app/components/arithmeticBuilder/token/grid.tsx
+++ b/static/app/components/arithmeticBuilder/token/grid.tsx
@@ -15,12 +15,14 @@ import {
   isTokenLiteral,
   isTokenOperator,
   isTokenParenthesis,
+  isTokenReference,
 } from 'sentry/components/arithmeticBuilder/token';
 import {ArithmeticTokenFreeText} from 'sentry/components/arithmeticBuilder/token/freeText';
 import {ArithmeticTokenFunction} from 'sentry/components/arithmeticBuilder/token/function';
 import {ArithmeticTokenLiteral} from 'sentry/components/arithmeticBuilder/token/literal';
 import {ArithmeticTokenOperator} from 'sentry/components/arithmeticBuilder/token/operator';
 import {ArithmeticTokenParenthesis} from 'sentry/components/arithmeticBuilder/token/parenthesis';
+import {ArithmeticBuilderTokenReference} from 'sentry/components/arithmeticBuilder/token/reference';
 import {computeNextAllowedTokenKinds} from 'sentry/components/arithmeticBuilder/validator';
 import {useGridList} from 'sentry/components/tokenizedInput/grid/useGridList';
 import {t} from 'sentry/locale';
@@ -141,6 +143,17 @@ function GridList({showPlaceholder, ...props}: GridListProps) {
           );
         }
 
+        if (isTokenReference(token)) {
+          return (
+            <ArithmeticBuilderTokenReference
+              key={item.key}
+              item={item}
+              state={state}
+              token={token}
+            />
+          );
+        }
+
         if (isTokenFreeText(token)) {
           return (
             <ArithmeticTokenFreeText
diff --git a/static/app/components/arithmeticBuilder/token/index.spec.tsx b/static/app/components/arithmeticBuilder/token/index.spec.tsx
index a6b934fc775119..7efa10557052f4 100644
--- a/static/app/components/arithmeticBuilder/token/index.spec.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.spec.tsx
@@ -52,11 +52,13 @@ const getSuggestedKey = (key: string) => {
 interface TokensProp {
   expression: string;
   dispatch?: Dispatch<ArithmeticBuilderAction>;
+  references?: Set<string>;
 }
 
 function Tokens(props: TokensProp) {
   const {state, dispatch} = useArithmeticBuilderAction({
     initialExpression: props.expression,
+    references: props.references,
   });
 
   const wrappedDispatch = useCallback(
@@ -76,6 +78,7 @@ function Tokens(props: TokensProp) {
         functionArguments,
         getFieldDefinition: getSpanFieldDefinition,
         getSuggestedKey,
+        references: props.references,
       }}
     >
       <TokenGrid tokens={state.expression.tokens} />
@@ -418,6 +421,46 @@ describe('token', () => {
 
       await waitFor(() => expect(getLastInput()).toHaveFocus());
     });
+
+    it('allows selecting reference using mouse', async () => {
+      render(<Tokens expression="" references={new Set(['A', 'B'])} />);
+
+      const input = screen.getByRole('combobox', {
+        name: 'Add a term',
+      });
+      expect(input).toBeInTheDocument();
+
+      await userEvent.click(input);
+
+      // 3 originally because of the parens
+      expect(screen.getAllByRole('option')).toHaveLength(3);
+
+      await userEvent.click(screen.getByRole('option', {name: 'A'}));
+
+      await waitFor(() => expect(getLastInput()).toHaveFocus());
+      await userEvent.type(getLastInput(), '{Escape}');
+
+      expect(await screen.findByRole('row', {name: 'A'})).toBeInTheDocument();
+    });
+
+    it('automatically replaces freetext token with reference when typing a match', async () => {
+      render(<Tokens expression="" references={new Set(['A', 'B'])} />);
+
+      const input = screen.getByRole('combobox', {
+        name: 'Add a term',
+      });
+      expect(input).toBeInTheDocument();
+
+      await userEvent.click(input);
+      expect(screen.getAllByRole('option')).toHaveLength(3);
+      expect(screen.getByRole('option', {name: 'A'})).toBeInTheDocument();
+      await userEvent.type(input, 'A');
+
+      await waitFor(() => expect(getLastInput()).toHaveFocus());
+      await userEvent.type(getLastInput(), '{Escape}');
+
+      expect(await screen.findByRole('row', {name: 'A'})).toBeInTheDocument();
+    });
   });
 
   describe('ArithmeticTokenFunction', () => {
diff --git a/static/app/components/arithmeticBuilder/token/index.tsx b/static/app/components/arithmeticBuilder/token/index.tsx
index 0fbdc185ed5705..adc5722e18902d 100644
--- a/static/app/components/arithmeticBuilder/token/index.tsx
+++ b/static/app/components/arithmeticBuilder/token/index.tsx
@@ -11,6 +11,7 @@ export enum TokenKind {
   ATTRIBUTE = 'attr',
   FUNCTION = 'func',
   LITERAL = 'lit',
+  REFERENCE = 'ref',
 }
 
 export abstract class Token {
@@ -103,6 +104,16 @@ export class TokenFunction extends Token {
   }
 }
 
+export class TokenReference extends Token {
+  kind: TokenKind = TokenKind.REFERENCE;
+  label: string;
+
+  constructor(location: LocationRange, label: string) {
+    super(location, label);
+    this.label = label;
+  }
+}
+
 export class TokenFreeText extends Token {
   kind: TokenKind = TokenKind.FREE_TEXT;
 
@@ -186,3 +197,9 @@ export function isTokenFunction(token: Token | null | undefined): token is Token
 export function isTokenLiteral(token: Token | null | undefined): token is TokenLiteral {
   return token?.kind === TokenKind.LITERAL;
 }
+
+export function isTokenReference(
+  token: Token | null | undefined
+): token is TokenReference {
+  return token?.kind === TokenKind.REFERENCE;
+}
diff --git a/static/app/components/arithmeticBuilder/token/literal.tsx b/static/app/components/arithmeticBuilder/token/literal.tsx
index ecb3209a2fe673..6800fb2f759a31 100644
--- a/static/app/components/arithmeticBuilder/token/literal.tsx
+++ b/static/app/components/arithmeticBuilder/token/literal.tsx
@@ -1,11 +1,8 @@
 import type {ChangeEvent, FocusEvent} from 'react';
 import {Fragment, useCallback, useRef, useState} from 'react';
-import styled from '@emotion/styled';
 import type {ListState} from '@react-stately/list';
 import type {KeyboardEvent, Node} from '@react-types/shared';
 
-import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
-
 import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
 import type {Token, TokenLiteral} from 'sentry/components/arithmeticBuilder/token';
 import {
@@ -13,6 +10,12 @@ import {
   isTokenParenthesis,
   TokenKind,
 } from 'sentry/components/arithmeticBuilder/token';
+import {DeleteButton} from 'sentry/components/arithmeticBuilder/token/deleteButton';
+import {
+  GridCell,
+  LeftGridCell,
+  Row,
+} from 'sentry/components/arithmeticBuilder/token/styles';
 import {
   nextTokenKeyOfKind,
   tokenizeExpression,
@@ -20,7 +23,6 @@ import {
 import {useGridListItem} from 'sentry/components/tokenizedInput/grid/useGridListItem';
 import {focusTarget} from 'sentry/components/tokenizedInput/grid/utils';
 import {InputBox} from 'sentry/components/tokenizedInput/token/inputBox';
-import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
 
@@ -50,12 +52,13 @@ export function ArithmeticTokenLiteral({
       tabIndex={-1}
       aria-label={token.text}
       aria-invalid={false}
+      withBorder
     >
       <LeftGridCell {...gridCellProps}>
         <InternalInput item={item} state={state} token={token} />
       </LeftGridCell>
       <GridCell {...gridCellProps}>
-        <DeleteLiteral token={token} />
+        <DeleteButton token={token} label={t('Remove literal %s', token.text)} />
       </GridCell>
     </Row>
   );
@@ -266,91 +269,6 @@ function InternalInput({item, state, token}: InternalInputProps) {
   );
 }
 
-interface DeleteLiteralProps {
-  token: TokenLiteral;
-}
-
-function DeleteLiteral({token}: DeleteLiteralProps) {
-  const {dispatch} = useArithmeticBuilder();
-
-  const onClick = useCallback(() => {
-    dispatch({
-      type: 'DELETE_TOKEN',
-      token,
-    });
-  }, [dispatch, token]);
-
-  return (
-    <DeleteButton aria-label={t('Remove literal %s', token.text)} onClick={onClick}>
-      <InteractionStateLayer />
-      <IconClose legacySize="8px" />
-    </DeleteButton>
-  );
-}
-
 function validateLiteral(text: string): boolean {
   return !!text && !isNaN(+text);
 }
-
-const Row = styled('div')`
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  height: 24px;
-  max-width: 100%;
-  border: 1px solid ${p => p.theme.tokens.border.secondary};
-  border-radius: ${p => p.theme.radius.md};
-
-  :focus {
-    background-color: ${p => p.theme.colors.gray100};
-    outline: none;
-  }
-
-  &:last-child {
-    flex-grow: 1;
-  }
-
-  &[aria-invalid='true'] {
-    input {
-      color: ${p => p.theme.colors.red500};
-    }
-  }
-
-  &[aria-selected='true'] {
-    [data-hidden-text='true']::before {
-      content: '';
-      position: absolute;
-      left: ${p => p.theme.space.xs};
-      right: ${p => p.theme.space.xs};
-      top: 0;
-      bottom: 0;
-      background-color: ${p => p.theme.colors.gray100};
-    }
-  }
-`;
-
-const GridCell = styled('div')`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 100%;
-`;
-
-const LeftGridCell = styled(GridCell)`
-  padding-left: ${p => p.theme.space.xs};
-`;
-
-const DeleteButton = styled('button')`
-  background: none;
-  border: none;
-  color: ${p => p.theme.tokens.content.secondary};
-  outline: none;
-  user-select: none;
-  padding-right: ${p => p.theme.space.xs};
-
-  :focus {
-    background-color: ${p => p.theme.colors.gray100};
-    border-left: 1px solid ${p => p.theme.tokens.border.secondary};
-    outline: none;
-  }
-`;
diff --git a/static/app/components/arithmeticBuilder/token/reference.tsx b/static/app/components/arithmeticBuilder/token/reference.tsx
new file mode 100644
index 00000000000000..2f3b183c3bb3aa
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/token/reference.tsx
@@ -0,0 +1,270 @@
+import type {ChangeEvent} from 'react';
+import {useCallback, useMemo, useRef, useState} from 'react';
+import {Item, Section} from '@react-stately/collections';
+import type {ListState} from '@react-stately/list';
+import type {KeyboardEvent, Node} from '@react-types/shared';
+
+import type {SelectOptionWithKey} from '@sentry/scraps/compactSelect';
+
+import {useArithmeticBuilder} from 'sentry/components/arithmeticBuilder/context';
+import type {Token, TokenReference} from 'sentry/components/arithmeticBuilder/token';
+import {TokenKind} from 'sentry/components/arithmeticBuilder/token';
+import {DeleteButton} from 'sentry/components/arithmeticBuilder/token/deleteButton';
+import {
+  GridCell,
+  LeftGridCell,
+  Row,
+} from 'sentry/components/arithmeticBuilder/token/styles';
+import {nextTokenKeyOfKind} from 'sentry/components/arithmeticBuilder/tokenizer';
+import {itemIsSection} from 'sentry/components/searchQueryBuilder/tokens/utils';
+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 {t} from 'sentry/locale';
+import {defined} from 'sentry/utils';
+
+interface ArithmeticBuilderTokenReferenceProps {
+  item: Node<Token>;
+  state: ListState<Token>;
+  token: TokenReference;
+}
+
+export function ArithmeticBuilderTokenReference({
+  item,
+  state,
+  token,
+}: ArithmeticBuilderTokenReferenceProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const {rowProps, gridCellProps} = useGridListItem({
+    item,
+    ref,
+    state,
+    focusable: true,
+  });
+
+  return (
+    <Row
+      {...rowProps}
+      ref={ref}
+      tabIndex={-1}
+      aria-label={token.label}
+      aria-invalid={false}
+      withBorder
+    >
+      <LeftGridCell {...gridCellProps}>
+        <InternalInput item={item} state={state} token={token} rowRef={ref} />
+      </LeftGridCell>
+      <GridCell {...gridCellProps}>
+        <DeleteReference token={token} item={item} state={state} />
+      </GridCell>
+    </Row>
+  );
+}
+
+interface InternalInputProps extends ArithmeticBuilderTokenReferenceProps {
+  rowRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function InternalInput({item, state, token, rowRef}: InternalInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [currentValue, setCurrentValue] = useState(token.label);
+  const [isCurrentlyEditing, setIsCurrentlyEditing] = useState(false);
+
+  // Sync currentValue when the token changes (e.g. key reuse after re-tokenization)
+  const [prevLabel, setPrevLabel] = useState(token.label);
+  if (token.label !== prevLabel) {
+    setPrevLabel(token.label);
+    setCurrentValue(token.label);
+  }
+
+  const filterValue = inputValue.trim();
+  const displayValue = isCurrentlyEditing ? inputValue : currentValue;
+
+  const {dispatch, references} = useArithmeticBuilder();
+
+  const items = useMemo(() => {
+    const refList = references ? [...references] : [];
+    const filtered = filterValue
+      ? refList.filter(key => key.toLowerCase().includes(filterValue.toLowerCase()))
+      : refList;
+    return [
+      {
+        key: 'references',
+        label: t('references'),
+        options: filtered.map(key => ({
+          key: `${TokenKind.REFERENCE}:${key}`,
+          label: key,
+          value: key,
+          textValue: key,
+          hideCheck: true,
+        })),
+      },
+    ];
+  }, [references, filterValue]);
+
+  const shouldCloseOnInteractOutside = useCallback(
+    (el: Element) => !rowRef.current?.contains(el),
+    [rowRef]
+  );
+
+  const onInputBlur = useCallback(() => {
+    setInputValue('');
+    setIsCurrentlyEditing(false);
+  }, []);
+
+  const onInputChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(evt.target.value);
+  }, []);
+
+  const onInputCommit = useCallback(() => {
+    const value = inputValue.trim() || token.label;
+    setCurrentValue(value);
+    dispatch({
+      text: value,
+      type: 'REPLACE_TOKEN',
+      token,
+      focusOverride: {
+        itemKey: nextTokenKeyOfKind(state, token, TokenKind.FREE_TEXT),
+      },
+    });
+    setInputValue('');
+    setIsCurrentlyEditing(false);
+  }, [dispatch, state, token, inputValue]);
+
+  const onInputEscape = useCallback(() => {
+    setInputValue('');
+    setIsCurrentlyEditing(false);
+  }, []);
+
+  const onInputFocus = useCallback((_evt: React.FocusEvent<HTMLInputElement>) => {
+    setIsCurrentlyEditing(true);
+    setInputValue('');
+  }, []);
+
+  const onKeyDownCapture = useCallback(
+    (evt: React.KeyboardEvent<HTMLInputElement>) => {
+      if (
+        evt.currentTarget.selectionStart === 0 &&
+        evt.currentTarget.selectionEnd === 0 &&
+        evt.key === 'ArrowLeft'
+      ) {
+        focusTarget(state, state.collection.getKeyBefore(item.key));
+        return;
+      }
+
+      if (
+        evt.currentTarget.selectionStart === evt.currentTarget.value.length &&
+        evt.currentTarget.selectionEnd === evt.currentTarget.value.length &&
+        evt.key === 'ArrowRight'
+      ) {
+        focusTarget(state, state.collection.getKeyAfter(item.key));
+        return;
+      }
+    },
+    [state, item]
+  );
+
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      if (
+        evt.currentTarget.selectionStart === 0 &&
+        evt.currentTarget.selectionEnd === 0 &&
+        evt.key === 'Backspace'
+      ) {
+        const itemKey = state.collection.getKeyBefore(item.key);
+        dispatch({
+          type: 'DELETE_TOKEN',
+          token,
+          focusOverride: defined(itemKey) ? {itemKey} : undefined,
+        });
+      }
+
+      if (
+        evt.currentTarget.selectionStart === evt.currentTarget.value.length &&
+        evt.currentTarget.selectionEnd === evt.currentTarget.value.length &&
+        evt.key === 'Delete'
+      ) {
+        const itemKey = state.collection.getKeyAfter(item.key);
+        dispatch({
+          type: 'DELETE_TOKEN',
+          token,
+          focusOverride: defined(itemKey) ? {itemKey} : undefined,
+        });
+      }
+    },
+    [dispatch, token, state, item]
+  );
+
+  const onOptionSelected = useCallback(
+    (option: SelectOptionWithKey<string>) => {
+      setCurrentValue(option.value);
+      dispatch({
+        text: option.value,
+        type: 'REPLACE_TOKEN',
+        token,
+        focusOverride: {
+          itemKey: nextTokenKeyOfKind(state, token, TokenKind.FREE_TEXT),
+        },
+      });
+      setInputValue('');
+      setIsCurrentlyEditing(false);
+    },
+    [dispatch, state, token]
+  );
+
+  return (
+    <ComboBox
+      ref={inputRef}
+      items={items}
+      placeholder={token.label}
+      inputLabel={t('Select a reference')}
+      inputValue={displayValue}
+      filterValue={filterValue}
+      tabIndex={item.key === state.selectionManager.focusedKey ? 0 : -1}
+      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
+      onInputBlur={onInputBlur}
+      onInputChange={onInputChange}
+      onInputCommit={onInputCommit}
+      onInputEscape={onInputEscape}
+      onInputFocus={onInputFocus}
+      onKeyDown={onKeyDown}
+      onKeyDownCapture={onKeyDownCapture}
+      onOptionSelected={onOptionSelected}
+    >
+      {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>
+  );
+}
+
+interface DeleteReferenceProps {
+  item: Node<Token>;
+  state: ListState<Token>;
+  token: TokenReference;
+}
+
+function DeleteReference({token, item, state}: DeleteReferenceProps) {
+  const itemKey = state.collection.getKeyBefore(item.key)?.toString() ?? null;
+
+  return (
+    <DeleteButton
+      token={token}
+      focusOverrideKey={itemKey}
+      label={t('Remove reference %s', token.label)}
+    />
+  );
+}
diff --git a/static/app/components/arithmeticBuilder/token/styles.tsx b/static/app/components/arithmeticBuilder/token/styles.tsx
new file mode 100644
index 00000000000000..0de75c4ddffb78
--- /dev/null
+++ b/static/app/components/arithmeticBuilder/token/styles.tsx
@@ -0,0 +1,50 @@
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Row = styled('div')<{withBorder?: boolean}>`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  height: 24px;
+  max-width: 100%;
+
+  ${p =>
+    p.withBorder &&
+    css`
+      border: 1px solid ${p.theme.tokens.border.secondary};
+      border-radius: ${p.theme.radius.md};
+    `}
+
+  &:last-child {
+    flex-grow: 1;
+  }
+
+  &[aria-invalid='true'] {
+    input {
+      color: ${p => p.theme.colors.red500};
+    }
+  }
+
+  &[aria-selected='true'] {
+    [data-hidden-text='true']::before {
+      content: '';
+      position: absolute;
+      left: ${p => p.theme.space.xs};
+      right: ${p => p.theme.space.xs};
+      top: 0;
+      bottom: 0;
+      background-color: ${p => p.theme.colors.gray100};
+    }
+  }
+`;
+
+export const GridCell = styled('div')`
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 100%;
+`;
+
+export const LeftGridCell = styled(GridCell)`
+  padding-left: ${p => p.theme.space.xs};
+`;
diff --git a/static/app/components/arithmeticBuilder/tokenizer.spec.tsx b/static/app/components/arithmeticBuilder/tokenizer.spec.tsx
index edbb176c74e85b..5d203a2dbf265c 100644
--- a/static/app/components/arithmeticBuilder/tokenizer.spec.tsx
+++ b/static/app/components/arithmeticBuilder/tokenizer.spec.tsx
@@ -1,4 +1,3 @@
-import type {Token} from 'sentry/components/arithmeticBuilder/token';
 import {
   TokenAttribute,
   TokenCloseParenthesis,
@@ -7,6 +6,8 @@ import {
   TokenLiteral,
   TokenOpenParenthesis,
   TokenOperator,
+  TokenReference,
+  type Token,
 } from 'sentry/components/arithmeticBuilder/token';
 import {
   makeTokenKey,
@@ -47,6 +48,10 @@ function f(i: number, func: string, attributes: TokenAttribute[]): TokenFunction
   return k(i, new TokenFunction(expect.objectContaining({}), func, attributes));
 }
 
+function r(i: number, label: string): TokenReference {
+  return k(i, new TokenReference(expect.objectContaining({}), label));
+}
+
 describe('tokenizeExpression', () => {
   it.each([
     ['(', [s(0), po(0), s(1)]],
@@ -668,4 +673,30 @@ describe('tokenizeExpression', () => {
   ])('tokenizes bad expressions `%s`', (expression, expected) => {
     expect(tokenizeExpression(expression)).toEqual(expected);
   });
+
+  it.each([
+    ['A', new Set(['A']), [s(0), r(0, 'A'), s(1)]],
+    [
+      'A + B',
+      new Set(['A', 'B']),
+      [s(0), r(0, 'A'), s(1), o(0, '+'), s(2), r(1, 'B'), s(3)],
+    ],
+    ['A+1', new Set(['A']), [s(0), r(0, 'A'), s(1), o(0, '+'), s(2), l(0, '1'), s(3)]],
+    ['A-1', new Set(['A']), [s(0), r(0, 'A'), s(1), o(0, '-'), s(2), l(0, '1'), s(3)]],
+  ])('tokenizes references `%s`', (expression, references, expected) => {
+    expect(tokenizeExpression(expression, references)).toEqual(expected);
+  });
+
+  it.each([
+    ['A', new Set(['B']), [s(0, 'A')]],
+    ['A + B', new Set(['A']), [s(0), r(0, 'A'), s(1), o(0, '+'), s(2, 'B')]],
+    ['A + B', new Set(['B']), [s(0, 'A'), o(0, '+'), s(1), r(0, 'B'), s(2)]],
+    ['A + B', new Set<string>(), [s(0, 'A'), o(0, '+'), s(1, 'B')]],
+    ['A + B', undefined, [s(0, 'A'), o(0, '+'), s(1, 'B')]],
+  ])(
+    'treats missing references as free text `%s`',
+    (expression, references, expected) => {
+      expect(tokenizeExpression(expression, references)).toEqual(expected);
+    }
+  );
 });
diff --git a/static/app/components/arithmeticBuilder/tokenizer.tsx b/static/app/components/arithmeticBuilder/tokenizer.tsx
index ee97c3ee6d452d..c2ec833171acf1 100644
--- a/static/app/components/arithmeticBuilder/tokenizer.tsx
+++ b/static/app/components/arithmeticBuilder/tokenizer.tsx
@@ -5,6 +5,7 @@ import {
   isTokenFreeText,
   isTokenFunction,
   isTokenLiteral,
+  isTokenReference,
   Operator,
   TokenAttribute,
   TokenCloseParenthesis,
@@ -14,6 +15,7 @@ import {
   TokenLiteral,
   TokenOpenParenthesis,
   TokenOperator,
+  TokenReference,
   type Token,
   type TokenParenthesis,
 } from 'sentry/components/arithmeticBuilder/token';
@@ -44,28 +46,30 @@ function space(prev: LocationRange | null, next: LocationRange | null): TokenFre
   return new TokenFreeText(location, '');
 }
 
-function tryTokenizeExpression(expression: string): Token[] {
+function tryTokenizeExpression(expression: string, references?: Set<string>): Token[] {
   if (!expression.trim()) {
     return [];
   }
 
-  const tc = new TokenConverter();
+  const tc = new TokenConverter(references);
   return parse(expression, {tc});
 }
 
-export function tokenizeExpression(expression: string): Token[] {
+export function tokenizeExpression(
+  expression: string,
+  references?: Set<string>
+): Token[] {
   let loc: LocationRange | null = null;
-
   const tokens: Token[] = [];
 
-  for (const token of tryTokenizeExpression(expression)) {
+  for (const token of tryTokenizeExpression(expression, references)) {
     const prev = tokens[tokens.length - 1];
     if (isTokenFreeText(token) && isTokenFreeText(prev)) {
       prev.merge(token);
     } else if (
       isTokenLiteral(token) &&
       defined(token.sign) &&
-      (isTokenLiteral(prev) || isTokenFunction(prev))
+      (isTokenLiteral(prev) || isTokenFunction(prev) || isTokenReference(prev))
     ) {
       // Because we're tokenizing expressions, we have to permit some intermedate
       // invalid states. As a result, we greedily pair positive/negative signs with
@@ -110,6 +114,7 @@ export function tokenizeExpression(expression: string): Token[] {
     [TokenKind.ATTRIBUTE]: 0,
     [TokenKind.FUNCTION]: 0,
     [TokenKind.LITERAL]: 0,
+    [TokenKind.REFERENCE]: 0,
   };
 
   // assign an unique key to each token based on it's type
@@ -181,6 +186,25 @@ class ArithmeticError extends Error {
 }
 
 class TokenConverter {
+  /**
+   * A map of reference aliases to their corresponding values.
+   */
+  private references = new Set<string>();
+
+  constructor(references?: Set<string>) {
+    if (references) {
+      this.references = references;
+    }
+  }
+
+  isReference(value: string): boolean {
+    return this.references.has(value);
+  }
+
+  tokenReference(value: string, location: LocationRange): TokenReference {
+    return new TokenReference(location, value);
+  }
+
   tokenParenthesis(parenthesis: string, location: LocationRange): TokenParenthesis {
     if (parenthesis === '(') {
       return new TokenOpenParenthesis(location);
@@ -253,6 +277,8 @@ function toTokenKind(kind: string): TokenKind {
       return TokenKind.FUNCTION;
     case TokenKind.LITERAL:
       return TokenKind.LITERAL;
+    case TokenKind.REFERENCE:
+      return TokenKind.REFERENCE;
     default:
       throw new ArithmeticError(`Unknown token kind: ${kind}`);
   }
diff --git a/static/app/components/arithmeticBuilder/validator.spec.tsx b/static/app/components/arithmeticBuilder/validator.spec.tsx
index 11d103dfebe4aa..66e46e0f47dfc1 100644
--- a/static/app/components/arithmeticBuilder/validator.spec.tsx
+++ b/static/app/components/arithmeticBuilder/validator.spec.tsx
@@ -56,23 +56,60 @@ describe('vaidateTokens', () => {
     const tokens = tokenizeExpression(expression);
     expect(validateTokens(tokens)).toBe(true);
   });
+
+  it.each([
+    ['A + B', new Set(['A', 'B'])],
+    ['A + 1', new Set(['A', 'B'])],
+    ['(A + B) - 1', new Set(['A', 'B'])],
+    ['(A + B) * (A - B)', new Set(['A', 'B'])],
+    ['(A + B) * (A - B) / 100', new Set(['A', 'B'])],
+    ['((A + B) * (A - B)) / 100', new Set(['A', 'B'])],
+  ])('passes with references `%s`', (expression, references) => {
+    const tokens = tokenizeExpression(expression, references);
+    expect(validateTokens(tokens)).toBe(true);
+  });
 });
 
 describe('computeNextAllowedTokenKinds', () => {
   it.each([
-    ['', [[TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL]]],
+    [
+      '',
+      [
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
+      ],
+    ],
     [
       '(',
       [
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
         [],
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
       ],
     ],
     [
       'avg(span.duration)',
       [
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
         [],
         [TokenKind.OPERATOR],
       ],
@@ -80,9 +117,19 @@ describe('computeNextAllowedTokenKinds', () => {
     [
       '(avg(span.duration)',
       [
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
         [],
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
         [],
         [TokenKind.CLOSE_PARENTHESIS, TokenKind.OPERATOR],
       ],
@@ -90,17 +137,32 @@ describe('computeNextAllowedTokenKinds', () => {
     [
       'avg(span.duration) (',
       [
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
         [],
         [TokenKind.OPERATOR],
         [],
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
       ],
     ],
     [
       '1 1',
       [
-        [TokenKind.OPEN_PARENTHESIS, TokenKind.FUNCTION, TokenKind.LITERAL],
+        [
+          TokenKind.OPEN_PARENTHESIS,
+          TokenKind.FUNCTION,
+          TokenKind.LITERAL,
+          TokenKind.REFERENCE,
+        ],
         [],
         [TokenKind.OPERATOR],
         [],
diff --git a/static/app/components/arithmeticBuilder/validator.tsx b/static/app/components/arithmeticBuilder/validator.tsx
index 065bb9ab9e63ad..4b8b12bb45af37 100644
--- a/static/app/components/arithmeticBuilder/validator.tsx
+++ b/static/app/components/arithmeticBuilder/validator.tsx
@@ -5,6 +5,7 @@ import {
   isTokenLiteral,
   isTokenOperator,
   isTokenParenthesis,
+  isTokenReference,
   Parenthesis,
   TokenKind,
 } from 'sentry/components/arithmeticBuilder/token';
@@ -108,6 +109,7 @@ class ExpressionValidator {
     if (this.pushFunction(dryRun)) {
       tokenKinds.push(TokenKind.FUNCTION);
       tokenKinds.push(TokenKind.LITERAL);
+      tokenKinds.push(TokenKind.REFERENCE);
     }
 
     return tokenKinds;
@@ -136,6 +138,10 @@ class ExpressionValidator {
       return this.pushParenthesis(token.parenthesis, options);
     }
 
+    if (isTokenReference(token)) {
+      return this.pushReference(options);
+    }
+
     throw new Error(`Unknown token type: ${token.kind}`);
   }
 
@@ -147,8 +153,12 @@ class ExpressionValidator {
     return this.pushTerm(TokenKind.LITERAL, options);
   }
 
+  private pushReference(options: PushOptions): boolean {
+    return this.pushTerm(TokenKind.REFERENCE, options);
+  }
+
   private pushTerm(
-    kind: TokenKind.FUNCTION | TokenKind.LITERAL,
+    kind: TokenKind.FUNCTION | TokenKind.LITERAL | TokenKind.REFERENCE,
     {dryRun}: PushOptions
   ): boolean {
     if (this.empty()) {
@@ -167,7 +177,11 @@ class ExpressionValidator {
     }
 
     if (this.end() === TokenKind.OPERATOR) {
-      if (this.end(1) === TokenKind.FUNCTION || this.end(1) === TokenKind.LITERAL) {
+      if (
+        this.end(1) === TokenKind.FUNCTION ||
+        this.end(1) === TokenKind.LITERAL ||
+        this.end(1) === TokenKind.REFERENCE
+      ) {
         if (!dryRun) {
           // combine the 2 expressions with the operator
           // we can just pop off the operator as we
@@ -188,7 +202,11 @@ class ExpressionValidator {
   }
 
   private pushOperator({dryRun}: PushOptions): boolean {
-    if (this.end() === TokenKind.FUNCTION || this.end() === TokenKind.LITERAL) {
+    if (
+      this.end() === TokenKind.FUNCTION ||
+      this.end() === TokenKind.LITERAL ||
+      this.end() === TokenKind.REFERENCE
+    ) {
       if (!dryRun) {
         this.stack.push(TokenKind.OPERATOR);
       }
@@ -221,7 +239,11 @@ class ExpressionValidator {
     }
 
     if (parenthesis === Parenthesis.CLOSE) {
-      if (this.end() === TokenKind.FUNCTION || this.end() === TokenKind.LITERAL) {
+      if (
+        this.end() === TokenKind.FUNCTION ||
+        this.end() === TokenKind.LITERAL ||
+        this.end() === TokenKind.REFERENCE
+      ) {
         if (this.end(1) === TokenKind.OPEN_PARENTHESIS) {
           // found a parenthesized expression
           // we can strip the parenthesis and
@@ -252,7 +274,9 @@ class ExpressionValidator {
   isValid(): boolean {
     return (
       this.stack.length === 1 &&
-      (this.stack[0] === TokenKind.FUNCTION || this.stack[0] === TokenKind.LITERAL)
+      (this.stack[0] === TokenKind.FUNCTION ||
+        this.stack[0] === TokenKind.LITERAL ||
+        this.stack[0] === TokenKind.REFERENCE)
     );
   }
 

From cf81d6de2fda86445e6acca54a9b663a604d0e7a Mon Sep 17 00:00:00 2001
From: Nick <nicholas.deschenes@sentry.io>
Date: Tue, 7 Apr 2026 11:31:33 -0300
Subject: [PATCH 11/18] feat(logs): Move continue scanning into full button
 (#112351)

This PR refreshes the continue scanning logs experience to really call
out to users that they're able to continue scanning for more data, as
the previous setup was a bit harder to read.

Refs LOGS-644

---------

Co-authored-by: GPT-5.4 <noreply@openai.com>
---
 static/app/components/emptyStateWarning.tsx   |  7 ++--
 static/app/icons/svgIcon.tsx                  |  4 ++-
 .../explore/logs/tables/logsInfiniteTable.tsx | 36 +++++++++----------
 .../explore/tables/tracesTable/styles.tsx     | 28 +++++++++------
 4 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/static/app/components/emptyStateWarning.tsx b/static/app/components/emptyStateWarning.tsx
index eb366294bfaaf3..6f2df843fb4606 100644
--- a/static/app/components/emptyStateWarning.tsx
+++ b/static/app/components/emptyStateWarning.tsx
@@ -2,16 +2,19 @@ import styled from '@emotion/styled';
 
 import {EmptyMessage} from 'sentry/components/emptyMessage';
 import {IconSearch} from 'sentry/icons';
+import type {IconVariant} from 'sentry/icons/svgIcon';
 
 type Props = {
   children?: React.ReactNode;
   className?: string;
   small?: boolean;
+  variant?: IconVariant;
   withIcon?: boolean;
 };
 
 export function EmptyStateWarning({
   small = false,
+  variant = 'muted',
   withIcon = true,
   children,
   className,
@@ -19,13 +22,13 @@ export function EmptyStateWarning({
   return small ? (
     <EmptyMessage className={className}>
       <SmallMessage>
-        {withIcon && <StyledIconSearch variant="muted" size="lg" />}
+        {withIcon && <StyledIconSearch variant={variant} size="lg" />}
         {children}
       </SmallMessage>
     </EmptyMessage>
   ) : (
     <EmptyStreamWrapper data-test-id="empty-state" className={className}>
-      {withIcon && <IconSearch variant="muted" legacySize="54px" />}
+      {withIcon && <IconSearch variant={variant} legacySize="54px" />}
       {children}
     </EmptyStreamWrapper>
   );
diff --git a/static/app/icons/svgIcon.tsx b/static/app/icons/svgIcon.tsx
index 8ac1f9d8960eca..d17ba35473e14c 100644
--- a/static/app/icons/svgIcon.tsx
+++ b/static/app/icons/svgIcon.tsx
@@ -4,6 +4,8 @@ import type {ContentVariant, IconSize} from 'sentry/utils/theme';
 
 import {useIconDefaults} from './useIconDefaults';
 
+export type IconVariant = ContentVariant | 'muted';
+
 export interface SVGIconProps extends Omit<
   React.SVGAttributes<SVGSVGElement>,
   'color' | 'type'
@@ -16,7 +18,7 @@ export interface SVGIconProps extends Omit<
   legacySize?: string;
   ref?: React.Ref<SVGSVGElement>;
   size?: IconSize;
-  variant?: ContentVariant | 'muted';
+  variant?: IconVariant;
 }
 
 export function SvgIcon(props: SVGIconProps) {
diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
index 2741399e6abf02..ef55e746115331 100644
--- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
+++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
@@ -6,7 +6,7 @@ import type {Virtualizer} from '@tanstack/react-virtual';
 import {useVirtualizer, useWindowVirtualizer} from '@tanstack/react-virtual';
 
 import {Button} from '@sentry/scraps/button';
-import {Flex, Stack} from '@sentry/scraps/layout';
+import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
@@ -662,26 +662,26 @@ function EmptyRenderer({
   if (bytesScanned && canResumeAutoFetch && resumeAutoFetch) {
     return (
       <TableStatus>
-        <EmptyStateWarning withIcon>
+        <EmptyStateWarning withIcon variant="accent">
           <EmptyStateText size="xl">{t('No logs found yet')}</EmptyStateText>
           <EmptyStateText size="md">
             {tct(
-              'We scanned [bytesScanned] already but did not find any matching logs yet.[break]You can narrow your time range or you can [continueScanning].',
-              {
-                bytesScanned: <FileSize bytes={bytesScanned} base={2} />,
-                break: <br />,
-                continueScanning: (
-                  <Button
-                    priority="link"
-                    onClick={resumeAutoFetch}
-                    aria-label={t('continue scanning')}
-                  >
-                    {t('Continue Scanning')}
-                  </Button>
-                ),
-              }
+              'We scanned [bytesScanned] so far but have not found anything matching your filters',
+              {bytesScanned: <FileSize bytes={bytesScanned} base={2} />}
             )}
           </EmptyStateText>
+          <EmptyStateText size="md">
+            {t('We can keep digging or you can narrow down your search.')}
+          </EmptyStateText>
+          <Container paddingTop="md">
+            <Button
+              priority="default"
+              onClick={resumeAutoFetch}
+              aria-label={t('continue scanning')}
+            >
+              {t('Continue Scanning')}
+            </Button>
+          </Container>
         </EmptyStateWarning>
       </TableStatus>
     );
@@ -689,11 +689,11 @@ function EmptyRenderer({
 
   return (
     <TableStatus>
-      <EmptyStateWarning withIcon>
+      <EmptyStateWarning withIcon variant="accent">
         <EmptyStateText size="xl">{t('No logs found')}</EmptyStateText>
         <EmptyStateText size="md">
           {tct(
-            'Try adjusting your filters or get started with sending logs by checking these [instructions]',
+            'Try adjusting your filters or get started with sending logs by checking these [instructions].',
             {
               instructions: (
                 <ExternalLink href={LOGS_INSTRUCTIONS_URL}>
diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx
index 89df37c1715811..42d9d3f68c8e72 100644
--- a/static/app/views/explore/tables/tracesTable/styles.tsx
+++ b/static/app/views/explore/tables/tracesTable/styles.tsx
@@ -1,8 +1,8 @@
-import type {ComponentProps, CSSProperties} from 'react';
+import type {ComponentProps} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Flex} from '@sentry/scraps/layout';
+import {Container, Flex, type Responsive} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {Panel} from 'sentry/components/panels/panel';
@@ -123,15 +123,23 @@ export const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName:
         `}
 `;
 
-export const EmptyStateText = styled('div')<{
+export function EmptyStateText({
+  children,
+  size,
+  textAlign,
+}: {
+  children: React.ReactNode;
   size: 'xl' | 'md';
-  textAlign?: CSSProperties['textAlign'];
-}>`
-  color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.font.size[p.size]};
-  padding-bottom: ${p => p.theme.space.md};
-  ${p => p.textAlign && `text-align: ${p.textAlign}`};
-`;
+  textAlign?: Responsive<'left' | 'center' | 'right' | 'justify'>;
+}) {
+  return (
+    <Container>
+      <Text as="div" size={size} align={textAlign} variant="muted">
+        {children}
+      </Text>
+    </Container>
+  );
+}
 
 export const EmptyValueContainer = styled('span')`
   color: ${p => p.theme.tokens.content.secondary};

From 8f626e076bed212df2f83d54bebbd199519e2065 Mon Sep 17 00:00:00 2001
From: Nikki Kapadia <72356613+nikkikapadia@users.noreply.github.com>
Date: Tue, 7 Apr 2026 10:39:01 -0400
Subject: [PATCH 12/18] feat(errors): main body content sections (#112139)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Just adding in the content sections, no real functionality yet just
getting the layout set up.
Also added in an empty schema hints so i remember to fill it in along
with the search bar when possible💀

<img height="400" alt="image"
src="https://github.com/user-attachments/assets/0e8c1097-9f97-4399-9182-ecc456192b98"
/>
---
 .../schemaHints/schemaHintsList.tsx           |  2 +
 .../schemaHints/schemaHintsUtils.tsx          |  7 +++
 static/app/views/explore/errors/body.spec.tsx | 57 +++++++++++++++++++
 static/app/views/explore/errors/body.tsx      | 52 +++++++++++++++++
 .../app/views/explore/errors/content.spec.tsx | 28 ++++++++-
 static/app/views/explore/errors/content.tsx   | 29 +++++++++-
 .../views/explore/errors/filterContent.tsx    | 14 +++++
 .../hooks/useControlSectionExpanded.tsx       | 19 +++++++
 .../app/views/explore/metrics/metricsTab.tsx  | 24 ++------
 static/app/views/explore/spans/spansTab.tsx   | 28 +++------
 10 files changed, 217 insertions(+), 43 deletions(-)
 create mode 100644 static/app/views/explore/errors/body.spec.tsx
 create mode 100644 static/app/views/explore/errors/body.tsx
 create mode 100644 static/app/views/explore/hooks/useControlSectionExpanded.tsx

diff --git a/static/app/views/explore/components/schemaHints/schemaHintsList.tsx b/static/app/views/explore/components/schemaHints/schemaHintsList.tsx
index dddab9649b3e83..bb80f0884f31c4 100644
--- a/static/app/views/explore/components/schemaHints/schemaHintsList.tsx
+++ b/static/app/views/explore/components/schemaHints/schemaHintsList.tsx
@@ -118,6 +118,8 @@ const FILTER_KEY_SECTIONS: Record<SchemaHintsSources, FilterKeySection[]> = {
   [SchemaHintsSources.EXPLORE]: SPANS_FILTER_KEY_SECTIONS,
   [SchemaHintsSources.LOGS]: LOGS_FILTER_KEY_SECTIONS,
   [SchemaHintsSources.CONVERSATIONS]: SPANS_FILTER_KEY_SECTIONS,
+  // TODO: add error filter key sections when they are implemented
+  [SchemaHintsSources.ERRORS]: [],
 };
 
 function getFilterKeySections(source: SchemaHintsSources) {
diff --git a/static/app/views/explore/components/schemaHints/schemaHintsUtils.tsx b/static/app/views/explore/components/schemaHints/schemaHintsUtils.tsx
index 74dbbe618a239a..dccb123996a0c0 100644
--- a/static/app/views/explore/components/schemaHints/schemaHintsUtils.tsx
+++ b/static/app/views/explore/components/schemaHints/schemaHintsUtils.tsx
@@ -63,9 +63,11 @@ const SCHEMA_HINTS_HIDDEN_KEYS: string[] = [
 ];
 
 export enum SchemaHintsSources {
+  // TODO: change Explore to Spans because Explore is too broad and confusing here
   EXPLORE = 'explore',
   LOGS = 'logs',
   CONVERSATIONS = 'conversations',
+  ERRORS = 'errors',
 }
 
 export const getSchemaHintsListOrder = (source: SchemaHintsSources) => {
@@ -76,6 +78,11 @@ export const getSchemaHintsListOrder = (source: SchemaHintsSources) => {
     return SCHEMA_HINTS_LIST_ORDER_KEYS_CONVERSATIONS;
   }
 
+  if (source === SchemaHintsSources.ERRORS) {
+    // TODO: check to see which keys we want to display for errors
+    return [];
+  }
+
   return SCHEMA_HINTS_LIST_ORDER_KEYS_EXPLORE;
 };
 
diff --git a/static/app/views/explore/errors/body.spec.tsx b/static/app/views/explore/errors/body.spec.tsx
new file mode 100644
index 00000000000000..0150fc02ec34c2
--- /dev/null
+++ b/static/app/views/explore/errors/body.spec.tsx
@@ -0,0 +1,57 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {ErrorsContentSection, ErrorsControlSection} from './body';
+
+describe('ErrorsControlSection', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('renders as an aside element', () => {
+    render(<ErrorsControlSection controlSectionExpanded />);
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
+  });
+});
+
+describe('ErrorsContentSection', () => {
+  it('renders collapse sidebar button when expanded', () => {
+    const setControlSectionExpanded = jest.fn();
+    render(
+      <ErrorsContentSection
+        controlSectionExpanded
+        setControlSectionExpanded={setControlSectionExpanded}
+      />
+    );
+
+    const collapseButton = screen.getByRole('button', {name: 'Collapse sidebar'});
+    expect(collapseButton).toBeInTheDocument();
+    expect(collapseButton).not.toHaveTextContent('Advanced');
+  });
+
+  it('renders expand sidebar button when collapsed', () => {
+    const setControlSectionExpanded = jest.fn();
+    render(
+      <ErrorsContentSection
+        controlSectionExpanded={false}
+        setControlSectionExpanded={setControlSectionExpanded}
+      />
+    );
+
+    const expandButton = screen.getByRole('button', {name: 'Expand sidebar'});
+    expect(expandButton).toBeInTheDocument();
+    expect(expandButton).toHaveTextContent('Advanced');
+  });
+
+  it('calls setControlSectionExpanded when clicking collapse button', async () => {
+    const setControlSectionExpanded = jest.fn();
+    render(
+      <ErrorsContentSection
+        controlSectionExpanded
+        setControlSectionExpanded={setControlSectionExpanded}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Collapse sidebar'}));
+    expect(setControlSectionExpanded).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/static/app/views/explore/errors/body.tsx b/static/app/views/explore/errors/body.tsx
new file mode 100644
index 00000000000000..23f7076862e9e5
--- /dev/null
+++ b/static/app/views/explore/errors/body.tsx
@@ -0,0 +1,52 @@
+import {IconChevron} from 'sentry/icons/iconChevron';
+import {t} from 'sentry/locale';
+import {OverChartButtonGroup} from 'sentry/views/explore/components/overChartButtonGroup';
+import {
+  ExploreContentSection,
+  ExploreControlSection,
+} from 'sentry/views/explore/components/styles';
+import {ChevronButton} from 'sentry/views/explore/spans/spansTab';
+
+interface ErrorsControlSectionProps {
+  controlSectionExpanded: boolean;
+}
+
+export function ErrorsControlSection({
+  controlSectionExpanded,
+}: ErrorsControlSectionProps) {
+  return <ExploreControlSection expanded={controlSectionExpanded} />;
+}
+
+interface ErrorsContentSectionProps {
+  controlSectionExpanded: boolean;
+  setControlSectionExpanded: (expanded: boolean) => void;
+}
+
+export function ErrorsContentSection({
+  controlSectionExpanded,
+  setControlSectionExpanded,
+}: ErrorsContentSectionProps) {
+  return (
+    <ExploreContentSection>
+      <OverChartButtonGroup>
+        <ChevronButton
+          aria-label={
+            controlSectionExpanded ? t('Collapse sidebar') : t('Expand sidebar')
+          }
+          expanded={controlSectionExpanded}
+          size="xs"
+          icon={
+            <IconChevron
+              isDouble
+              direction={controlSectionExpanded ? 'left' : 'right'}
+              size="xs"
+            />
+          }
+          onClick={() => setControlSectionExpanded(!controlSectionExpanded)}
+        >
+          {controlSectionExpanded ? null : t('Advanced')}
+        </ChevronButton>
+      </OverChartButtonGroup>
+    </ExploreContentSection>
+  );
+}
diff --git a/static/app/views/explore/errors/content.spec.tsx b/static/app/views/explore/errors/content.spec.tsx
index d4198cf7f3ad4f..19dde6ac6f698f 100644
--- a/static/app/views/explore/errors/content.spec.tsx
+++ b/static/app/views/explore/errors/content.spec.tsx
@@ -1,11 +1,11 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {PageFiltersStore} from 'sentry/components/pageFilters/store';
 
-import ErrorsContent from './content';
+import ErrorsContent, {ErrorsBody} from './content';
 
 describe('ErrorsContent', () => {
   beforeEach(() => {
@@ -59,3 +59,27 @@ describe('ErrorsContent', () => {
     ).toBeInTheDocument();
   });
 });
+
+describe('ErrorsBody', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('renders with sidebar expanded by default', () => {
+    render(<ErrorsBody />);
+    const collapseButton = screen.getByRole('button', {name: 'Collapse sidebar'});
+    expect(collapseButton).toBeInTheDocument();
+    expect(collapseButton).not.toHaveTextContent('Advanced');
+  });
+
+  it('collapses sidebar when chevron button is clicked', async () => {
+    render(<ErrorsBody />);
+
+    const collapseButton = screen.getByRole('button', {name: 'Collapse sidebar'});
+    await userEvent.click(collapseButton);
+
+    const expandButton = screen.getByRole('button', {name: 'Expand sidebar'});
+    expect(expandButton).toBeInTheDocument();
+    expect(expandButton).toHaveTextContent('Advanced');
+  });
+});
diff --git a/static/app/views/explore/errors/content.tsx b/static/app/views/explore/errors/content.tsx
index 2d3fb49ad0fb3a..c90ebe193d5ce4 100644
--- a/static/app/views/explore/errors/content.tsx
+++ b/static/app/views/explore/errors/content.tsx
@@ -6,8 +6,16 @@ import {PageFiltersContainer} from 'sentry/components/pageFilters/container';
 import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {useOrganization} from 'sentry/utils/useOrganization';
-import {ExploreBodySearch} from 'sentry/views/explore/components/styles';
+import {
+  ExploreBodyContent,
+  ExploreBodySearch,
+} from 'sentry/views/explore/components/styles';
+import {
+  ErrorsContentSection,
+  ErrorsControlSection,
+} from 'sentry/views/explore/errors/body';
 import {ErrorsFilterSection} from 'sentry/views/explore/errors/filterContent';
+import {useControlSectionExpanded} from 'sentry/views/explore/hooks/useControlSectionExpanded';
 
 export default function ErrorsContent() {
   const organization = useOrganization();
@@ -22,6 +30,7 @@ export default function ErrorsContent() {
             <ErrorsFilterSection />
           </ExploreBodySearch>
         </PageFiltersContainer>
+        <ErrorsBody />
       </Layout.Page>
     </SentryDocumentTitle>
   );
@@ -41,3 +50,21 @@ function ErrorsHeader() {
     </Layout.Header>
   );
 }
+
+const ERRORS_TOOLBAR_STORAGE_KEY = 'explore-errors-toolbar';
+
+export function ErrorsBody() {
+  const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded(
+    ERRORS_TOOLBAR_STORAGE_KEY
+  );
+
+  return (
+    <ExploreBodyContent>
+      <ErrorsControlSection controlSectionExpanded={controlSectionExpanded} />
+      <ErrorsContentSection
+        controlSectionExpanded={controlSectionExpanded}
+        setControlSectionExpanded={setControlSectionExpanded}
+      />
+    </ExploreBodyContent>
+  );
+}
diff --git a/static/app/views/explore/errors/filterContent.tsx b/static/app/views/explore/errors/filterContent.tsx
index 2e0240d87e6a6d..836a9dc37e3fcc 100644
--- a/static/app/views/explore/errors/filterContent.tsx
+++ b/static/app/views/explore/errors/filterContent.tsx
@@ -6,6 +6,9 @@ import {EnvironmentPageFilter} from 'sentry/components/pageFilters/environment/e
 import {ProjectPageFilter} from 'sentry/components/pageFilters/project/projectPageFilter';
 import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
 import {t} from 'sentry/locale';
+import {SchemaHintsList} from 'sentry/views/explore/components/schemaHints/schemaHintsList';
+import {SchemaHintsSources} from 'sentry/views/explore/components/schemaHints/schemaHintsUtils';
+import {ExploreSchemaHintsSection} from 'sentry/views/explore/components/styles';
 import {TraceItemSearchQueryBuilder} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
 import {StyledPageFilterBar} from 'sentry/views/explore/spans/spansTabSearchSection';
 import {TraceItemDataset} from 'sentry/views/explore/types';
@@ -40,6 +43,17 @@ export function ErrorsFilterSection() {
             stringSecondaryAliases={{}}
           />
         </Grid>
+        <ExploreSchemaHintsSection>
+          <SchemaHintsList
+            supportedAggregates={[]}
+            booleanTags={{}}
+            numberTags={{}}
+            stringTags={{}}
+            isLoading={false}
+            exploreQuery=""
+            source={SchemaHintsSources.ERRORS}
+          />
+        </ExploreSchemaHintsSection>
       </SearchQueryBuilderProvider>
     </Layout.Main>
   );
diff --git a/static/app/views/explore/hooks/useControlSectionExpanded.tsx b/static/app/views/explore/hooks/useControlSectionExpanded.tsx
new file mode 100644
index 00000000000000..9eb607cc50b0bd
--- /dev/null
+++ b/static/app/views/explore/hooks/useControlSectionExpanded.tsx
@@ -0,0 +1,19 @@
+import {useCallback} from 'react';
+
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
+
+export function useControlSectionExpanded(localStorageKey: string) {
+  const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
+    localStorageKey,
+    'expanded'
+  );
+
+  const setControlSectionExpanded = useCallback(
+    (expanded: boolean) => {
+      _setControlSectionExpanded(expanded ? 'expanded' : '');
+    },
+    [_setControlSectionExpanded]
+  );
+
+  return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
+}
diff --git a/static/app/views/explore/metrics/metricsTab.tsx b/static/app/views/explore/metrics/metricsTab.tsx
index a10923b340c4e5..14a248c3ff8767 100644
--- a/static/app/views/explore/metrics/metricsTab.tsx
+++ b/static/app/views/explore/metrics/metricsTab.tsx
@@ -1,4 +1,3 @@
-import {useCallback} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -13,7 +12,6 @@ import {ProjectPageFilter} from 'sentry/components/pageFilters/project/projectPa
 import {IconChevron} from 'sentry/icons/iconChevron';
 import {t} from 'sentry/locale';
 import {useChartInterval} from 'sentry/utils/useChartInterval';
-import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext';
 import {OverChartButtonGroup} from 'sentry/views/explore/components/overChartButtonGroup';
@@ -25,6 +23,7 @@ import {
 } from 'sentry/views/explore/components/styles';
 import {ToolbarVisualizeAddChart} from 'sentry/views/explore/components/toolbar/toolbarVisualize';
 import {useMetricsAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
+import {useControlSectionExpanded} from 'sentry/views/explore/hooks/useControlSectionExpanded';
 import {useMetricOptions} from 'sentry/views/explore/hooks/useMetricOptions';
 import {MetricPanel} from 'sentry/views/explore/metrics/metricPanel';
 import {canUseMetricsUIRefresh} from 'sentry/views/explore/metrics/metricsFlags';
@@ -50,25 +49,10 @@ type MetricsTabProps = {
 
 const METRICS_TOOLBAR_STORAGE_KEY = 'explore-metrics-toolbar';
 
-function useMetricsControlSectionExpanded() {
-  const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
-    METRICS_TOOLBAR_STORAGE_KEY,
-    'expanded'
-  );
-
-  const setControlSectionExpanded = useCallback(
-    (expanded: boolean) => {
-      _setControlSectionExpanded(expanded ? 'expanded' : '');
-    },
-    [_setControlSectionExpanded]
-  );
-
-  return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
-}
-
 function MetricsTabContentRefreshLayout({datePageFilterProps}: MetricsTabProps) {
-  const [controlSectionExpanded, setControlSectionExpanded] =
-    useMetricsControlSectionExpanded();
+  const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded(
+    METRICS_TOOLBAR_STORAGE_KEY
+  );
 
   return (
     <MultiMetricsQueryParamsProvider>
diff --git a/static/app/views/explore/spans/spansTab.tsx b/static/app/views/explore/spans/spansTab.tsx
index 61b7c5c78cfbbd..18d6128cd9af06 100644
--- a/static/app/views/explore/spans/spansTab.tsx
+++ b/static/app/views/explore/spans/spansTab.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useEffect, useMemo} from 'react';
+import {Fragment, useEffect, useMemo} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -22,7 +22,6 @@ import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useChartInterval} from 'sentry/utils/useChartInterval';
-import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {ChartSelectionProvider} from 'sentry/views/explore/components/attributeBreakdowns/chartSelectionContext';
 import {OverChartButtonGroup} from 'sentry/views/explore/components/overChartButtonGroup';
@@ -34,6 +33,7 @@ import {
 } from 'sentry/views/explore/components/styles';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {useAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
+import {useControlSectionExpanded} from 'sentry/views/explore/hooks/useControlSectionExpanded';
 import {useCrossEventQueries} from 'sentry/views/explore/hooks/useCrossEventQueries';
 import {useExploreAggregatesTable} from 'sentry/views/explore/hooks/useExploreAggregatesTable';
 import {useExploreSpansTable} from 'sentry/views/explore/hooks/useExploreSpansTable';
@@ -90,30 +90,18 @@ export function SpansTabOnboarding({
   );
 }
 
-function useControlSectionExpanded() {
-  const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
-    'explore-spans-toolbar',
-    'expanded'
-  );
-
-  const setControlSectionExpanded = useCallback(
-    (expanded: boolean) => {
-      _setControlSectionExpanded(expanded ? 'expanded' : '');
-    },
-    [_setControlSectionExpanded]
-  );
-
-  return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
-}
-
 interface SpanTabProps {
   datePageFilterProps: DatePageFilterProps;
 }
 
+const SPANS_TOOLBAR_STORAGE_KEY = 'explore-spans-toolbar';
+
 export function SpansTabContent({datePageFilterProps}: SpanTabProps) {
   useVisitExplore();
 
-  const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded();
+  const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded(
+    SPANS_TOOLBAR_STORAGE_KEY
+  );
 
   return (
     <Fragment>
@@ -365,7 +353,7 @@ const OnboardingContentSection = styled('section')`
   grid-column: 1/3;
 `;
 
-const ChevronButton = styled(Button)<{expanded: boolean}>`
+export const ChevronButton = styled(Button)<{expanded: boolean}>`
   display: none;
 
   @media (min-width: ${p => p.theme.breakpoints.md}) {

From 0a58b3418ff6c9ef78c26c60077338d40f0d93cc Mon Sep 17 00:00:00 2001
From: Matt Quinn <matt.quinn@sentry.io>
Date: Tue, 7 Apr 2026 10:51:02 -0400
Subject: [PATCH 13/18] ref(profiles): Remove dead code from
 `process_profile_task` (#112257)

Remove dead profile insertion code (unused since
https://github.com/getsentry/sentry/pull/102210; insertion now handled
by vroomrs) and the dead `_ProjectKeyKwargs` struct (unused since
https://github.com/getsentry/sentry/pull/81957).
---
 src/sentry/profiles/task.py | 64 +------------------------------------
 1 file changed, 1 insertion(+), 63 deletions(-)

diff --git a/src/sentry/profiles/task.py b/src/sentry/profiles/task.py
index 6d74ac2cfeb2a4..981584567890b6 100644
--- a/src/sentry/profiles/task.py
+++ b/src/sentry/profiles/task.py
@@ -9,7 +9,7 @@
 from datetime import datetime, timezone
 from operator import itemgetter
 from time import time
-from typing import Any, TypedDict
+from typing import Any
 from uuid import UUID
 
 import msgpack
@@ -58,7 +58,6 @@
 from sentry.profiles.utils import (
     Profile,
     apply_stack_trace_rules_to_profile,
-    get_from_profiling_service,
 )
 from sentry.search.utils import DEVICE_CLASS
 from sentry.signals import first_profile_received
@@ -1075,62 +1074,6 @@ def _track_failed_outcome(profile: Profile, project: Project, reason: str) -> No
     )
 
 
-@metrics.wraps("process_profile.insert_vroom_profile")
-def _insert_vroom_profile(profile: Profile) -> bool:
-    with sentry_sdk.start_span(op="task.profiling.insert_vroom"):
-        try:
-            path = "/chunk" if "profiler_id" in profile else "/profile"
-            response = get_from_profiling_service(
-                method="POST",
-                path=path,
-                json_data=profile,
-                metric=(
-                    "profiling.profile.payload.size",
-                    {
-                        "type": "chunk" if "profiler_id" in profile else "profile",
-                        "platform": profile["platform"],
-                    },
-                ),
-            )
-
-            sentry_sdk.set_tag("vroom.response.status_code", str(response.status))
-
-            reason = "bad status"
-
-            if response.status == 204:
-                return True
-            elif response.status == 429:
-                reason = "gcs timeout"
-            elif response.status == 412:
-                reason = "duplicate profile"
-
-            metrics.incr(
-                "process_profile.insert_vroom_profile.error",
-                tags={
-                    "platform": profile["platform"],
-                    "reason": reason,
-                    "status_code": response.status,
-                },
-                sample_rate=1.0,
-            )
-            return False
-        except Exception as e:
-            sentry_sdk.capture_exception(e)
-            metrics.incr(
-                "process_profile.insert_vroom_profile.error",
-                tags={"platform": profile["platform"], "reason": "encountered error"},
-                sample_rate=1.0,
-            )
-            return False
-
-
-def _push_profile_to_vroom(profile: Profile, project: Project) -> bool:
-    if _insert_vroom_profile(profile=profile):
-        return True
-    _track_failed_outcome(profile, project, "profiling_failed_vroom_insertion")
-    return False
-
-
 def prepare_android_js_profile(profile: Profile) -> None:
     profile["js_profile"] = {"profile": profile["js_profile"]}
     p = profile["js_profile"]
@@ -1152,11 +1095,6 @@ def clean_android_js_profile(profile: Profile) -> None:
     del p["dist"]
 
 
-class _ProjectKeyKwargs(TypedDict):
-    project_id: int
-    use_case: str
-
-
 @metrics.wraps("process_profile.track_outcome")
 def _track_duration_outcome(
     profile: Profile,

From b7608da4bc1571b2382f27ff6e23485d9ba85c4b Mon Sep 17 00:00:00 2001
From: Max Topolsky <30879163+mtopo27@users.noreply.github.com>
Date: Tue, 7 Apr 2026 11:04:31 -0400
Subject: [PATCH 14/18] feat(preprod): Add installable attribute to EAP alias
 mappings (#112363)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Register PREPROD in the shared `INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS`
infrastructure so the EAP attributes endpoint translates
`has_installable_file` → `installable`. This makes the `installable`
boolean filter appear in the mobile builds search bar dropdown on the
Distribution view.

Previously, the PREPROD trace item type had no entry in the alias
mapping dicts in `search/eap/utils.py`, so
`translate_internal_to_public_alias()` returned the raw internal name
`has_installable_file`. The frontend `filterToAllowedKeys()` then
couldn't match it against the allowlist (which expects `installable`),
so the attribute was silently filtered out.

The mapping dict is built dynamically from
`PREPROD_SIZE_ATTRIBUTE_DEFINITIONS`, so any future aliased PREPROD
attributes will automatically be included.

Refs EME-868

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../search/eap/preprod_size/attributes.py     | 27 +++++++++++++++++++
 src/sentry/search/eap/utils.py                |  4 +++
 2 files changed, 31 insertions(+)

diff --git a/src/sentry/search/eap/preprod_size/attributes.py b/src/sentry/search/eap/preprod_size/attributes.py
index 77d4cfa450883f..2e7085c2555e96 100644
--- a/src/sentry/search/eap/preprod_size/attributes.py
+++ b/src/sentry/search/eap/preprod_size/attributes.py
@@ -1,3 +1,5 @@
+from typing import Literal
+
 from sentry.search.eap import constants
 from sentry.search.eap.columns import ResolvedAttribute, datetime_processor
 from sentry.search.eap.common_columns import COMMON_COLUMNS
@@ -56,6 +58,11 @@
             internal_name="git_head_ref",
             search_type="string",
         ),
+        ResolvedAttribute(
+            public_alias="installable",
+            internal_name="has_installable_file",
+            search_type="boolean",
+        ),
         ResolvedAttribute(
             public_alias="timestamp",
             internal_name="sentry.timestamp",
@@ -65,3 +72,23 @@
         ),
     ]
 }
+
+PREPROD_SIZE_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS: dict[
+    Literal["string", "number", "boolean"], dict[str, str]
+] = {
+    "string": {
+        definition.internal_name: definition.public_alias
+        for definition in PREPROD_SIZE_ATTRIBUTE_DEFINITIONS.values()
+        if not definition.secondary_alias and definition.search_type == "string"
+    },
+    "boolean": {
+        definition.internal_name: definition.public_alias
+        for definition in PREPROD_SIZE_ATTRIBUTE_DEFINITIONS.values()
+        if not definition.secondary_alias and definition.search_type == "boolean"
+    },
+    "number": {
+        definition.internal_name: definition.public_alias
+        for definition in PREPROD_SIZE_ATTRIBUTE_DEFINITIONS.values()
+        if not definition.secondary_alias and definition.search_type != "string"
+    },
+}
diff --git a/src/sentry/search/eap/utils.py b/src/sentry/search/eap/utils.py
index 1da26a12a3809b..80cec07dcbfa87 100644
--- a/src/sentry/search/eap/utils.py
+++ b/src/sentry/search/eap/utils.py
@@ -16,6 +16,9 @@
     OURLOG_ATTRIBUTE_DEFINITIONS,
 )
 from sentry.search.eap.ourlogs.definitions import OURLOG_DEFINITIONS
+from sentry.search.eap.preprod_size.attributes import (
+    PREPROD_SIZE_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS,
+)
 from sentry.search.eap.profile_functions.attributes import (
     PROFILE_FUNCTIONS_ATTRIBUTE_DEFINITIONS,
     PROFILE_FUNCTIONS_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS,
@@ -69,6 +72,7 @@ def add_start_end_conditions(
     SupportedTraceItemType.LOGS: LOGS_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS,
     SupportedTraceItemType.TRACEMETRICS: TRACE_METRICS_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS,
     SupportedTraceItemType.PROFILE_FUNCTIONS: PROFILE_FUNCTIONS_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS,
+    SupportedTraceItemType.PREPROD: PREPROD_SIZE_INTERNAL_TO_PUBLIC_ALIAS_MAPPINGS,
 }
 
 PUBLIC_ALIAS_TO_INTERNAL_MAPPING: dict[SupportedTraceItemType, dict[str, ResolvedAttribute]] = {

From 1ac5e9a103afd823320b9c8f87bcb7957d5dfbcd Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 7 Apr 2026 08:23:36 -0700
Subject: [PATCH 15/18] feat(seer): Add the stopping-point field to
 project-specific seer settings (#112232)

This brings in the stopping-point dropdown to the project-specific seer
settings page

Follows: https://github.com/getsentry/sentry/pull/112211

There's still more to cleanup in here, but we're well on the way.

<img width="960" height="383" alt="SCR-20260403-msjw"
src="https://github.com/user-attachments/assets/09b86dd8-6a0e-4bf5-89d9-9cd9d9649f6d"
/>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../hooks/useBulkAutofixAutomationSettings.ts |  11 +-
 .../hooks/useUpdateProjectSeerPreferences.ts  |   9 +-
 .../seer/overview/utils/seerStoppingPoint.ts  | 120 +++++++++++++++++-
 .../projectDetails/autofixAgent.tsx           |  75 ++++++++++-
 4 files changed, 207 insertions(+), 8 deletions(-)

diff --git a/static/app/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings.ts b/static/app/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings.ts
index 9250f9e1b378ea..95874e90c17f1c 100644
--- a/static/app/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings.ts
+++ b/static/app/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings.ts
@@ -124,13 +124,14 @@ export function useUpdateBulkAutofixAutomationSettings(
     },
     ...options,
     onSettled: (...args) => {
+      const bulkAutofixAutomationSettingsQueryOptions =
+        bulkAutofixAutomationSettingsInfiniteOptions({
+          organization,
+        });
       queryClient.invalidateQueries({
-        queryKey: [
-          getApiUrl(`/organizations/$organizationIdOrSlug/autofix/automation-settings/`, {
-            path: {organizationIdOrSlug: organization.slug},
-          }),
-        ],
+        queryKey: bulkAutofixAutomationSettingsQueryOptions.queryKey,
       });
+
       const [, , data] = args;
       data.projectIds.forEach(projectId => {
         const project = projectsById.get(projectId);
diff --git a/static/app/components/events/autofix/preferences/hooks/useUpdateProjectSeerPreferences.ts b/static/app/components/events/autofix/preferences/hooks/useUpdateProjectSeerPreferences.ts
index 85b5ea85bea452..3e8ed743c966f8 100644
--- a/static/app/components/events/autofix/preferences/hooks/useUpdateProjectSeerPreferences.ts
+++ b/static/app/components/events/autofix/preferences/hooks/useUpdateProjectSeerPreferences.ts
@@ -16,6 +16,8 @@ import {
 } from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
+import {bulkAutofixAutomationSettingsInfiniteOptions} from './useBulkAutofixAutomationSettings';
+
 type Context =
   | {
       previousPrefs: SeerPreferencesResponse;
@@ -86,8 +88,13 @@ export function useUpdateProjectSeerPreferences(project: Project) {
     },
     onSettled: () => {
       queryClient.invalidateQueries({queryKey});
+
+      const bulkAutofixAutomationSettingsQueryOptions =
+        bulkAutofixAutomationSettingsInfiniteOptions({
+          organization,
+        });
       queryClient.invalidateQueries({
-        queryKey: [`/organizations/${organization.slug}/autofix/automation-settings/`],
+        queryKey: bulkAutofixAutomationSettingsQueryOptions.queryKey,
       });
     },
   });
diff --git a/static/app/views/settings/seer/overview/utils/seerStoppingPoint.ts b/static/app/views/settings/seer/overview/utils/seerStoppingPoint.ts
index da78bd82f8c7b2..091186a21fd845 100644
--- a/static/app/views/settings/seer/overview/utils/seerStoppingPoint.ts
+++ b/static/app/views/settings/seer/overview/utils/seerStoppingPoint.ts
@@ -1,8 +1,23 @@
+import type {QueryClient} from '@tanstack/react-query';
+
 import {updateOrganization} from 'sentry/actionCreators/organizations';
+import {bulkAutofixAutomationSettingsInfiniteOptions} from 'sentry/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings';
+import {
+  makeProjectSeerPreferencesQueryKey,
+  type SeerPreferencesResponse,
+} from 'sentry/components/events/autofix/preferences/hooks/useProjectSeerPreferences';
+import type {ProjectSeerPreferences} from 'sentry/components/events/autofix/types';
 import type {CodingAgentIntegration} from 'sentry/components/events/autofix/useAutofix';
 import {t} from 'sentry/locale';
+import {ProjectsStore} from 'sentry/stores/projectsStore';
 import type {Organization} from 'sentry/types/organization';
-import {fetchMutation, mutationOptions} from 'sentry/utils/queryClient';
+import type {Project} from 'sentry/types/project';
+import {
+  fetchMutation,
+  getApiQueryData,
+  mutationOptions,
+  setApiQueryData,
+} from 'sentry/utils/queryClient';
 import {useFetchAgentOptions} from 'sentry/views/settings/seer/overview/utils/seerPreferredAgent';
 
 type SelectValue = 'off' | 'root_cause' | 'code';
@@ -17,6 +32,16 @@ export function getDefaultStoppingPointValue(organization: Organization): Select
     : 'code';
 }
 
+export function getProjectStoppingPointValue(
+  project: Project,
+  preference: ProjectSeerPreferences
+): SelectValue {
+  if ([null, undefined, 'off'].includes(project.autofixAutomationTuning)) {
+    return 'off';
+  }
+  return preference.automated_run_stopping_point === 'root_cause' ? 'root_cause' : 'code';
+}
+
 export function useFetchStoppingPointOptions({
   organization,
   agent,
@@ -92,3 +117,96 @@ export function getDefaultStoppingPointMutationOptions({
     onSuccess: updateOrganization,
   });
 }
+
+export function getProjectStoppingPointMutationOptions({
+  organization,
+  preference,
+  project,
+  queryClient,
+}: {
+  organization: Organization;
+  preference: ProjectSeerPreferences;
+  project: Project;
+  queryClient: QueryClient;
+}) {
+  const seerPrefsQueryKey = makeProjectSeerPreferencesQueryKey(
+    organization.slug,
+    project.slug
+  );
+
+  return mutationOptions({
+    mutationFn: async ({stoppingPoint}: {stoppingPoint: SelectValue}) => {
+      const tuning = stoppingPoint === 'off' ? ('off' as const) : ('medium' as const);
+
+      const projectPromise = fetchMutation<Project>({
+        method: 'PUT',
+        url: `/projects/${organization.slug}/${project.slug}/`,
+        data: {autofixAutomationTuning: tuning},
+      });
+
+      let preferencePromise: Promise<SeerPreferencesResponse | undefined> =
+        Promise.resolve(undefined);
+      if (stoppingPoint !== 'off') {
+        const repositories = preference?.repositories ?? [];
+        const automationHandoff = preference?.automation_handoff;
+
+        const stoppingPointValue =
+          stoppingPoint === 'root_cause'
+            ? ('root_cause' as const)
+            : organization.autoOpenPrs
+              ? ('open_pr' as const)
+              : ('code_changes' as const);
+
+        const preferencePayload = {
+          repositories,
+          automated_run_stopping_point: stoppingPointValue,
+          automation_handoff: automationHandoff
+            ? {
+                ...automationHandoff,
+                auto_create_pr: stoppingPointValue === 'open_pr',
+              }
+            : automationHandoff,
+        };
+
+        preferencePromise = fetchMutation<SeerPreferencesResponse>({
+          method: 'POST',
+          url: `/projects/${organization.slug}/${project.slug}/seer/preferences/`,
+          data: preferencePayload as unknown as Record<string, unknown>,
+        });
+      }
+
+      return await Promise.all([projectPromise, preferencePromise]);
+    },
+    onSuccess: ([updatedProject, preferencePayload]) => {
+      ProjectsStore.onUpdateSuccess(updatedProject);
+
+      if (preferencePayload) {
+        const previous = getApiQueryData<SeerPreferencesResponse>(
+          queryClient,
+          seerPrefsQueryKey
+        );
+        if (previous) {
+          setApiQueryData<SeerPreferencesResponse>(queryClient, seerPrefsQueryKey, {
+            ...previous,
+            preference: {
+              repositories: [],
+              ...previous.preference,
+              ...preferencePayload.preference,
+            },
+          });
+        }
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({queryKey: seerPrefsQueryKey});
+
+      const bulkAutofixAutomationSettingsQueryOptions =
+        bulkAutofixAutomationSettingsInfiniteOptions({
+          organization,
+        });
+      queryClient.invalidateQueries({
+        queryKey: bulkAutofixAutomationSettingsQueryOptions.queryKey,
+      });
+    },
+  });
+}
diff --git a/static/gsApp/views/seerAutomation/components/projectDetails/autofixAgent.tsx b/static/gsApp/views/seerAutomation/components/projectDetails/autofixAgent.tsx
index 3c81553ae7d697..aae2ff52378e62 100644
--- a/static/gsApp/views/seerAutomation/components/projectDetails/autofixAgent.tsx
+++ b/static/gsApp/views/seerAutomation/components/projectDetails/autofixAgent.tsx
@@ -18,8 +18,13 @@ import {PanelHeader} from 'sentry/components/panels/panelHeader';
 import {Placeholder} from 'sentry/components/placeholder';
 import {t, tct} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
-import {useQuery} from 'sentry/utils/queryClient';
+import {useMutation, useQuery, useQueryClient} from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {
+  getProjectStoppingPointMutationOptions,
+  getProjectStoppingPointValue,
+  useFetchStoppingPointOptions,
+} from 'sentry/views/settings/seer/overview/utils/seerStoppingPoint';
 import {
   useAgentOptions,
   useMutateSelectedAgent,
@@ -144,6 +149,15 @@ export function AutofixAgent({canWrite, preference, project}: Props) {
                 project={project}
               />
             ) : null}
+
+            {selected && selected !== 'none' ? (
+              <StoppingPointField
+                agent={selected}
+                canWrite={canWrite}
+                preference={preference}
+                project={project}
+              />
+            ) : null}
           </Fragment>
         )}
       </PanelBody>
@@ -151,6 +165,65 @@ export function AutofixAgent({canWrite, preference, project}: Props) {
   );
 }
 
+function StoppingPointField({
+  agent,
+  canWrite,
+  preference,
+  project,
+}: {
+  agent: 'seer' | CodingAgentIntegration;
+  canWrite: boolean;
+  preference: ProjectSeerPreferences;
+  project: Project;
+}) {
+  const organization = useOrganization();
+  const queryClient = useQueryClient();
+
+  const stoppingPointMutationOpts = getProjectStoppingPointMutationOptions({
+    organization,
+    project,
+    preference,
+    queryClient,
+  });
+  const {mutate} = useMutation({
+    ...stoppingPointMutationOpts,
+    onSuccess: (data, variables, onMutateResult, context) => {
+      stoppingPointMutationOpts.onSuccess?.(data, variables, onMutateResult, context);
+      addSuccessMessage(t('Stopping point updated'));
+    },
+    onError: () => {
+      addErrorMessage(t('Failed to update stopping point'));
+    },
+  });
+
+  const initialValue = getProjectStoppingPointValue(project, preference);
+  const options = useFetchStoppingPointOptions({
+    agent,
+    organization,
+  });
+
+  return (
+    <SelectField
+      name="stoppingPoint"
+      disabled={!canWrite}
+      value={initialValue}
+      onChange={value => {
+        mutate({stoppingPoint: value});
+      }}
+      options={options}
+      label={t('Automation Steps')}
+      help={tct(
+        'Choose which steps Seer should run automatically on issues. Depending on how [actionable:actionable] the issue is, Seer may stop at an earlier step.',
+        {
+          actionable: (
+            <ExternalLink href="https://docs.sentry.io/product/ai-in-sentry/seer/autofix/#how-issue-autofix-works" />
+          ),
+        }
+      )}
+    />
+  );
+}
+
 const PanelNoMargin = styled(Panel)`
   margin-bottom: 0;
 `;

From a85469a0613335b2453279d635b8b10b5cc60dd3 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 7 Apr 2026 08:23:47 -0700
Subject: [PATCH 16/18] feat(seer): Setup Agent bulk-edit on the Seer Autofix
 list page, and bring back Create PR bulk edits (#112249)

<img width="279" height="198" alt="SCR-20260403-oruo"
src="https://github.com/user-attachments/assets/c8b49017-40fe-49ec-aa47-d364ed9b4d8c"
/>

---------

Co-authored-by: Claude Sonnet 4 <noreply@example.com>
---
 .../seer/overview/autofixOverviewSection.tsx  |  9 +++---
 .../overview/utils/seerPreferredAgent.spec.ts | 18 ++++-------
 .../seer/overview/utils/seerPreferredAgent.ts |  6 ++--
 .../projectTable/seerProjectTable.tsx         |  2 +-
 .../projectTable/seerProjectTableHeader.tsx   | 30 +++++++++++++++++--
 .../projectTable/seerProjectTableRow.tsx      | 26 +++++++++-------
 6 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/static/app/views/settings/seer/overview/autofixOverviewSection.tsx b/static/app/views/settings/seer/overview/autofixOverviewSection.tsx
index e198fdd13938b1..a3599266ca6b28 100644
--- a/static/app/views/settings/seer/overview/autofixOverviewSection.tsx
+++ b/static/app/views/settings/seer/overview/autofixOverviewSection.tsx
@@ -161,9 +161,7 @@ function AgentNameForm({
   const preferredAgent = useFetchPreferredAgent({organization});
   const codingAgentSelectOptions = useFetchAgentOptions({organization});
   const codingAgentMutationOptions = getPreferredAgentMutationOptions({organization});
-  const bulkMutateSelectedAgent = useBulkMutateSelectedAgent({
-    projects: projects.filter(p => !projectsIdsWithPreferredAgent.has(p.id)),
-  });
+  const bulkMutateSelectedAgent = useBulkMutateSelectedAgent();
 
   const preferredAgentLabel = codingAgentSelectOptions.data?.find(
     o => o.value === preferredAgent.data
@@ -225,7 +223,10 @@ function AgentNameForm({
               onClick={async () => {
                 if (preferredAgent.data) {
                   setIsBulkMutatingAgent(true);
-                  await bulkMutateSelectedAgent(preferredAgent.data);
+                  await bulkMutateSelectedAgent(
+                    projects.filter(p => !projectsIdsWithPreferredAgent.has(p.id)),
+                    preferredAgent.data
+                  );
                   setIsBulkMutatingAgent(false);
                 } else {
                   addErrorMessage(t('No coding agent integration found'));
diff --git a/static/app/views/settings/seer/overview/utils/seerPreferredAgent.spec.ts b/static/app/views/settings/seer/overview/utils/seerPreferredAgent.spec.ts
index 3097deb833d92b..c89d2958b08e19 100644
--- a/static/app/views/settings/seer/overview/utils/seerPreferredAgent.spec.ts
+++ b/static/app/views/settings/seer/overview/utils/seerPreferredAgent.spec.ts
@@ -295,11 +295,10 @@ describe('seerPreferredAgent', () => {
 
       const {result} = renderHookWithProviders(useBulkMutateSelectedAgent, {
         organization,
-        initialProps: {projects: [project]},
       });
 
       await act(async () => {
-        await result.current('seer');
+        await result.current([project], 'seer');
       });
 
       expect(projectPutRequest).toHaveBeenCalledWith(
@@ -328,11 +327,10 @@ describe('seerPreferredAgent', () => {
 
       const {result} = renderHookWithProviders(useBulkMutateSelectedAgent, {
         organization,
-        initialProps: {projects: [project]},
       });
 
       await act(async () => {
-        await result.current(integration);
+        await result.current([project], integration);
       });
 
       expect(projectPutRequest).toHaveBeenCalledWith(
@@ -368,10 +366,9 @@ describe('seerPreferredAgent', () => {
 
       const {result} = renderHookWithProviders(useBulkMutateSelectedAgent, {
         organization,
-        initialProps: {projects: [project]},
       });
       await act(async () => {
-        await result.current(integration);
+        await result.current([project], integration);
       });
 
       expect(seerPreferencesPostRequest).toHaveBeenCalledWith(
@@ -392,11 +389,10 @@ describe('seerPreferredAgent', () => {
 
       const {result} = renderHookWithProviders(useBulkMutateSelectedAgent, {
         organization,
-        initialProps: {projects: [project]},
       });
 
       await act(async () => {
-        await result.current('seer');
+        await result.current([project], 'seer');
       });
 
       expect(updateSuccessSpy).toHaveBeenCalledWith({
@@ -427,11 +423,10 @@ describe('seerPreferredAgent', () => {
 
       const {result} = renderHookWithProviders(useBulkMutateSelectedAgent, {
         organization,
-        initialProps: {projects: [project]},
       });
 
       await act(async () => {
-        await result.current('seer');
+        await result.current([project], 'seer');
       });
 
       expect(addErrorMessageSpy).toHaveBeenCalledWith(
@@ -461,11 +456,10 @@ describe('seerPreferredAgent', () => {
 
       const {result} = renderHookWithProviders(useBulkMutateSelectedAgent, {
         organization,
-        initialProps: {projects: [project]},
       });
 
       await act(async () => {
-        await result.current('seer');
+        await result.current([project], 'seer');
       });
 
       expect(addErrorMessageSpy).toHaveBeenCalledWith(
diff --git a/static/app/views/settings/seer/overview/utils/seerPreferredAgent.ts b/static/app/views/settings/seer/overview/utils/seerPreferredAgent.ts
index ce7bd5f611e09c..28b05d7b9ec485 100644
--- a/static/app/views/settings/seer/overview/utils/seerPreferredAgent.ts
+++ b/static/app/views/settings/seer/overview/utils/seerPreferredAgent.ts
@@ -101,7 +101,7 @@ export function getPreferredAgentMutationOptions({
   });
 }
 
-export function useBulkMutateSelectedAgent({projects}: {projects: Project[]}) {
+export function useBulkMutateSelectedAgent() {
   const organization = useOrganization();
   const queryClient = useQueryClient();
   const autofixSettingsQueryOptions = bulkAutofixAutomationSettingsInfiniteOptions({
@@ -109,7 +109,7 @@ export function useBulkMutateSelectedAgent({projects}: {projects: Project[]}) {
   });
 
   return useCallback(
-    async (integration: PreferredAgent) => {
+    async (projects: Project[], integration: PreferredAgent) => {
       const results = await processInChunks({
         items: projects,
         chunkSize: 15,
@@ -184,6 +184,6 @@ export function useBulkMutateSelectedAgent({projects}: {projects: Project[]}) {
         }
       }
     },
-    [projects, organization, queryClient, autofixSettingsQueryOptions.queryKey]
+    [organization, queryClient, autofixSettingsQueryOptions.queryKey]
   );
 }
diff --git a/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTable.tsx b/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTable.tsx
index 3b40eb076883e7..d89259ee7cf182 100644
--- a/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTable.tsx
+++ b/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTable.tsx
@@ -280,6 +280,6 @@ const FiltersContainer = styled('div')`
 `;
 
 const SimpleTableWithColumns = styled(SimpleTable)`
-  grid-template-columns: 3fr minmax(300px, 1fr) repeat(2, max-content);
+  grid-template-columns: max-content 3fr minmax(300px, 1fr) repeat(2, max-content);
   overflow: visible;
 `;
diff --git a/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableHeader.tsx b/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableHeader.tsx
index ec4deaf2c2f872..b6db2925f8f820 100644
--- a/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableHeader.tsx
+++ b/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableHeader.tsx
@@ -16,6 +16,10 @@ import {parseQueryKey} from 'sentry/utils/api/apiQueryKey';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {
+  useBulkMutateSelectedAgent,
+  useFetchAgentOptions,
+} from 'sentry/views/settings/seer/overview/utils/seerPreferredAgent';
 
 import {useCanWriteSettings} from 'getsentry/views/seerAutomation/components/useCanWriteSettings';
 
@@ -91,15 +95,18 @@ export function ProjectTableHeader({
     [projects, selectedIds]
   );
 
+  const agentOptions = useFetchAgentOptions({organization});
+  const bulkMutateSelectedAgent = useBulkMutateSelectedAgent();
+
   return (
     <Fragment>
       <TableHeader>
-        {/* <SimpleTable.HeaderCell>
+        <SimpleTable.HeaderCell>
           <SelectAllCheckbox
             listItemCheckboxState={listItemCheckboxState}
             projects={projects}
           />
-        </SimpleTable.HeaderCell> */}
+        </SimpleTable.HeaderCell>
         {COLUMNS.map(({title, key, sortKey}) => (
           <SimpleTable.HeaderCell
             key={key}
@@ -133,6 +140,23 @@ export function ProjectTableHeader({
             />
           </TableCellFirst>
           <TableCellsRemainingContent align="center" gap="md">
+            <DropdownMenu
+              isDisabled={!canWrite}
+              size="xs"
+              items={
+                agentOptions.data?.map(({value, label}) => ({
+                  key: typeof value === 'object' ? value.provider : value,
+                  label,
+                  onAction: () => {
+                    const selectedProjects = projects.filter(p =>
+                      projectIds.includes(p.id)
+                    );
+                    bulkMutateSelectedAgent(selectedProjects, value);
+                  },
+                })) ?? []
+              }
+              triggerLabel={t('Agent')}
+            />
             <DropdownMenu
               isDisabled={!canWrite || organization.enableSeerCoding === false}
               size="xs"
@@ -156,7 +180,7 @@ export function ProjectTableHeader({
                     ),
                 },
               ]}
-              triggerLabel={t('Auto Create PRs')}
+              triggerLabel={t('Create PRs')}
             />
           </TableCellsRemainingContent>
         </TableHeader>
diff --git a/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableRow.tsx b/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableRow.tsx
index a2f6aaccb71dac..73c0b6404fd40c 100644
--- a/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableRow.tsx
+++ b/static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableRow.tsx
@@ -1,3 +1,6 @@
+import styled from '@emotion/styled';
+
+import {Checkbox} from '@sentry/scraps/checkbox';
 import {InfoTip} from '@sentry/scraps/info';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
@@ -15,6 +18,7 @@ import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {t, tct} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
+import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {
   useAgentOptions,
@@ -40,7 +44,7 @@ export function SeerProjectTableRow({
 }: Props) {
   const organization = useOrganization();
   const canWrite = useCanWriteSettings();
-  // const {isSelected, toggleSelected} = useListItemCheckboxContext();
+  const {isSelected, toggleSelected} = useListItemCheckboxContext();
 
   const options = useAgentOptions({integrations: integrations ?? []});
   const autofixAgent = useSelectedAgentFromBulkSettings({
@@ -66,7 +70,7 @@ export function SeerProjectTableRow({
 
   return (
     <SimpleTable.Row key={project.id}>
-      {/* <SimpleTable.RowCell>
+      <SimpleTable.RowCell>
         <CheckboxClickTarget htmlFor={`replay-table-select-${project.id}`}>
           <Checkbox
             id={`replay-table-select-${project.id}`}
@@ -75,7 +79,7 @@ export function SeerProjectTableRow({
             onChange={() => toggleSelected(project.id)}
           />
         </CheckboxClickTarget>
-      </SimpleTable.RowCell> */}
+      </SimpleTable.RowCell>
       <SimpleTable.RowCell>
         <Link to={`/settings/${organization.slug}/projects/${project.slug}/seer/`}>
           <ProjectBadge disableLink project={project} avatarSize={16} />
@@ -194,11 +198,11 @@ export function SeerProjectTableRow({
   );
 }
 
-// const CheckboxClickTarget = styled('label')`
-//   cursor: pointer;
-//   display: block;
-//   margin: -${p => p.theme.space.md};
-//   padding: ${p => p.theme.space.md};
-//   max-width: unset;
-//   line-height: 0;
-// `;
+const CheckboxClickTarget = styled('label')`
+  cursor: pointer;
+  display: block;
+  margin: -${p => p.theme.space.md};
+  padding: ${p => p.theme.space.md};
+  max-width: unset;
+  line-height: 0;
+`;

From 4dda701f509540a8fb84e8005755b761d15e491c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <github@joshuakgoldberg.com>
Date: Tue, 7 Apr 2026 11:24:47 -0400
Subject: [PATCH 17/18] feat(data_export): add logging for data-export-failure
 (#112169)

We already have logging for `data-export-success`. That success log
includes the user's email, which makes it nice and easy to tell if
someone's data export has succeeded (at least this far in code). But
there's no equivalent log for failure. Which is what @narsaynorath and I
were trying to debug earlier today and having to do all sorts of
log/trace query workarounds for.

Fixes LOGS-673.
---
 src/sentry/data_export/models.py        | 14 +++++++++++++-
 tests/sentry/data_export/test_models.py | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/sentry/data_export/models.py b/src/sentry/data_export/models.py
index 63effe0813c576..b6c991374d494a 100644
--- a/src/sentry/data_export/models.py
+++ b/src/sentry/data_export/models.py
@@ -169,7 +169,19 @@ def email_failure(self, message: str) -> None:
             error_payload=self.payload,
             creation_date=self.date_added,
         )
-        if NotificationService.has_access(self.organization, data.source):
+        has_access = NotificationService.has_access(self.organization, data.source)
+        logger.info(
+            "notification.platform.data-export-failure.has_access",
+            extra={
+                "organization_id": self.organization.id,
+                "data_export_id": self.id,
+                "data_source": data.source,
+                "has_access": has_access,
+                "user_email": user.email,
+            },
+        )
+
+        if has_access:
             NotificationService(data=data).notify_async(
                 targets=[
                     GenericNotificationTarget(
diff --git a/tests/sentry/data_export/test_models.py b/tests/sentry/data_export/test_models.py
index 027542bbb0d749..029cfcd0eb7a65 100644
--- a/tests/sentry/data_export/test_models.py
+++ b/tests/sentry/data_export/test_models.py
@@ -224,6 +224,22 @@ def test_email_success_with_notification_platform(self) -> None:
             html_content
         )
 
+    @patch("sentry.data_export.models.logger")
+    def test_email_failure_logging(self, mock_logger: MagicMock) -> None:
+        data_export_id = self.data_export.id
+        with self.tasks():
+            self.data_export.email_failure("failed to export data!")
+        mock_logger.info.assert_any_call(
+            "notification.platform.data-export-failure.has_access",
+            extra={
+                "organization_id": self.organization.id,
+                "data_export_id": data_export_id,
+                "data_source": "data-export-failure",
+                "has_access": False,
+                "user_email": self.user.email,
+            },
+        )
+
     @override_options(
         {"notifications.platform-rollout.internal-testing": {"data-export-failure": 1.0}}
     )

From 7c7bdcbdd78a227ded82afc0a15eb866c1facd2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <github@joshuakgoldberg.com>
Date: Tue, 7 Apr 2026 11:40:51 -0400
Subject: [PATCH 18/18] fix(logs): don't render numbers with >13 digits using
 commas (#112354)

Extracts a `formatNumber` helper for the numeric field renderer. It
bypasses `formatFloat` for numbers that have over 13 digits.

Tangentially related:

* #110360
* #110858

Fixes EXP-866.

Co-authored-by: Cursor <noreply@cursor.com>
---
 static/app/utils/discover/fieldRenderers.tsx | 18 ++----------
 static/app/utils/number/formatNumber.spec.ts | 31 ++++++++++++++++++++
 static/app/utils/number/formatNumber.ts      | 13 ++++++++
 3 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 static/app/utils/number/formatNumber.spec.ts
 create mode 100644 static/app/utils/number/formatNumber.ts

diff --git a/static/app/utils/discover/fieldRenderers.tsx b/static/app/utils/discover/fieldRenderers.tsx
index ab05167b223f9b..3631fd0f311504 100644
--- a/static/app/utils/discover/fieldRenderers.tsx
+++ b/static/app/utils/discover/fieldRenderers.tsx
@@ -51,7 +51,7 @@ import {getShortEventId} from 'sentry/utils/events';
 import {formatRate} from 'sentry/utils/formatters';
 import {getDynamicText} from 'sentry/utils/getDynamicText';
 import {formatApdex} from 'sentry/utils/number/formatApdex';
-import {formatFloat} from 'sentry/utils/number/formatFloat';
+import {formatNumber} from 'sentry/utils/number/formatNumber';
 import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 import {toPercent} from 'sentry/utils/number/toPercent';
 import {generateProfileFlamechartRouteWithQuery} from 'sentry/utils/profiling/routes';
@@ -63,10 +63,7 @@ import {
   findLinkedDashboardForField,
   getLinkedDashboardUrl,
 } from 'sentry/views/dashboards/utils/getLinkedDashboardUrl';
-import {
-  NUMBER_MAX_FRACTION_DIGITS,
-  NUMBER_MIN_VALUE,
-} from 'sentry/views/dashboards/widgets/common/settings';
+import {NUMBER_MIN_VALUE} from 'sentry/views/dashboards/widgets/common/settings';
 import {formatTooltipValue} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue';
 import {QuickContextHoverWrapper} from 'sentry/views/discover/table/quickContext/quickContextWrapper';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
@@ -319,16 +316,7 @@ export const FIELD_FORMATTERS: FieldFormatters = {
           </NumberContainer>
         );
       }
-      return (
-        <NumberContainer>
-          {formatFloat(data[field], NUMBER_MAX_FRACTION_DIGITS).toLocaleString(
-            undefined,
-            {
-              maximumFractionDigits: NUMBER_MAX_FRACTION_DIGITS,
-            }
-          )}
-        </NumberContainer>
-      );
+      return <NumberContainer>{formatNumber(data[field])}</NumberContainer>;
     },
   },
   percentage: {
diff --git a/static/app/utils/number/formatNumber.spec.ts b/static/app/utils/number/formatNumber.spec.ts
new file mode 100644
index 00000000000000..a7aa8536800296
--- /dev/null
+++ b/static/app/utils/number/formatNumber.spec.ts
@@ -0,0 +1,31 @@
+import {formatNumber} from 'sentry/utils/number/formatNumber';
+
+describe('formatNumber()', () => {
+  it('returns the value with commas when the value has 12 digits', () => {
+    expect(formatNumber(123_456_789_012)).toBe('123,456,789,012');
+  });
+
+  it('returns the value with commas when the value has 13 digits', () => {
+    expect(formatNumber(1_234_567_890_123)).toBe('1,234,567,890,123');
+  });
+
+  it('returns the value when the value has 14 digits', () => {
+    expect(formatNumber(12_345_678_901_234)).toBe(12345678901234);
+  });
+
+  it('returns the value when the value has 15 digits', () => {
+    expect(formatNumber(123_456_789_012_345)).toBe(123456789012345);
+  });
+
+  it('returns the value when the value does not have digits', () => {
+    expect(formatNumber(1)).toBe('1');
+  });
+
+  it('returns the value when the value has fewer digits than NUMBER_MAX_FRACTION_DIGITS', () => {
+    expect(formatNumber(1.2345)).toBe('1.2345');
+  });
+
+  it('returns a truncated value when the value has more digits than NUMBER_MAX_FRACTION_DIGITS', () => {
+    expect(formatNumber(1.23456)).toBe('1.2345');
+  });
+});
diff --git a/static/app/utils/number/formatNumber.ts b/static/app/utils/number/formatNumber.ts
new file mode 100644
index 00000000000000..9aeaf8bf330633
--- /dev/null
+++ b/static/app/utils/number/formatNumber.ts
@@ -0,0 +1,13 @@
+import {NUMBER_MAX_FRACTION_DIGITS} from 'sentry/views/dashboards/widgets/common/settings';
+
+import {formatFloat} from './formatFloat';
+
+export function formatNumber(value: number) {
+  if (value >= 10_000_000_000_000) {
+    return value;
+  }
+
+  return formatFloat(value, NUMBER_MAX_FRACTION_DIGITS).toLocaleString(undefined, {
+    maximumFractionDigits: NUMBER_MAX_FRACTION_DIGITS,
+  });
+}