Merge remote-tracking branch 'origin/master' into feat/unity-metrics

# Conflicts:
#	static/app/data/platformCategories.tsx

Author: bitsandfoxes

.agents/skills/cell-architecture/SKILL.md

@@ -51,7 +51,7 @@ import {Container} from '@sentry/scraps/layout';
 
 // ❌ Don't create styled components
 const Component = styled('div')`
-  padding: ${space(2)};
+  padding: ${p => p.theme.space.md};
   border: 1px solid ${p => p.theme.tokens.border.primary};
 `;
 
@@ -119,7 +119,7 @@ import {Grid} from '@sentry/scraps/layout';
 const Component = styled('div')`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.md};
 `;
 
 // ✅ Use Grid primitive
@@ -147,7 +147,7 @@ import {Stack} from '@sentry/scraps/layout';
 const Component = styled('div')`
   display: flex;
   flex-direction: column;
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.md};
 `;
 
 // ✅ Use Stack primitive (automatically column direction)
@@ -204,7 +204,7 @@ import {Text} from '@sentry/scraps/text';
 // ❌ Don't create styled text components
 const Label = styled('span')`
   color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.fontSizes.small};
+  font-size: ${p => p.theme.font.size.sm};
 `;
 
 // ❌ Don't use raw elements
@@ -242,7 +242,7 @@ import {Heading} from '@sentry/scraps/text';
 
 // ❌ Don't style heading elements
 const Title = styled('h2')`
-  font-size: ${p => p.theme.fontSize.md};
+  font-size: ${p => p.theme.font.size.md};
   font-weight: bold;
 `;
 
@@ -401,7 +401,7 @@ Container supports `margin` props but they are deprecated. Use `gap` on parent c
 ```tsx
 // ❌ Don't use margin between children
 const Child = styled('div')`
-  margin-right: ${p => p.theme.spacing.lg};
+  margin-right: ${p => p.theme.space.lg};
 `;
 
 // ✅ Use gap on parent container
@@ -421,7 +421,7 @@ const Component = styled('div')`
   display: flex;
   flex-direction: column;
   color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.fontSize.lg};
+  font-size: ${p => p.theme.font.size.lg};
 `;
 
 // ✅ Split into layout and typography primitives

.agents/skills/design-system/SKILL.md

@@ -732,6 +732,20 @@ function MyForm() {
 }
 ```
 
+### Resetting After Save
+
+When a form stays on the page after submission (e.g., settings pages), call `form.reset()` after a successful mutation. This re-syncs the form with updated `defaultValues` so it becomes pristine again — any UI that depends on the form being dirty (like conditionally shown Save/Cancel buttons) will update correctly.
+
+```tsx
+onSubmit: ({value}) =>
+  mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {}),
+```
+
+> **Note**: `AutoSaveForm` handles this automatically. You only need to add this when using `useScrapsForm`.
+
 ### Submit Button
 
 ```tsx
@@ -828,7 +842,11 @@ onSubmit: ({value}) => {
   // Return the promise to keep form.isSubmitting working
   // Add .catch(() => {}) to avoid unhandled rejection - error handling
   // is done by TanStack Query (onError callback, mutation.isError state)
-  return mutation.mutateAsync(value).catch(() => {});
+  // Add .then(() => form.reset()) if the form stays on the page after save
+  return mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {});
 };
 ```
 
@@ -915,6 +933,23 @@ const opts = mutationOptions({
 
 Make sure the zod schema's types are compatible with the API type. For example, if the API expects a string union like `'off' | 'low' | 'high'`, use `z.enum(['off', 'low', 'high'])` instead of `z.string()`.
 
+### Form Reset After Save
+
+```tsx
+// ❌ Don't forget to reset forms that stay on the page after save
+onSubmit: ({value}) => {
+  return mutation.mutateAsync(value).catch(() => {});
+};
+
+// ✅ Call form.reset() after successful save to sync with updated defaultValues
+onSubmit: ({value}) => {
+  return mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {});
+};
+```
+
 ### Layout Choice
 
 ```tsx
@@ -941,6 +976,7 @@ When creating a new form:
 - [ ] Choose appropriate layout (Stack or Row)
 - [ ] Handle server errors with `setFieldErrors`
 - [ ] Add `<form.SubmitButton>` for submission
+- [ ] Call `form.reset()` after successful mutation if the form stays on the page
 
 When creating auto-save fields:
 

.agents/skills/generate-frontend-forms/SKILL.md

@@ -9,22 +9,23 @@ This skill helps migrate forms from Sentry's legacy form system (JsonForm, FormM
 
 ## Feature Mapping
 
-| Old System           | New System          | Notes                                        |
-| -------------------- | ------------------- | -------------------------------------------- |
-| `saveOnBlur: true`   | `AutoSaveForm`      | Default behavior                             |
-| `confirm`            | `confirm` prop      | `string \| ((value) => string \| undefined)` |
-| `showHelpInTooltip`  | `variant="compact"` | On layout components                         |
-| `disabledReason`     | `disabled="reason"` | String shows tooltip                         |
-| `extraHelp`          | JSX in layout       | Render `<Text>` below field                  |
-| `getData`            | `mutationFn`        | Transform data in mutation function          |
-| `mapFormErrors`      | `setFieldErrors`    | Transform API errors in catch block          |
-| `saveMessage`        | `onSuccess`         | Show toast in mutation onSuccess callback    |
-| `formatMessageValue` | `onSuccess`         | Control toast content in onSuccess callback  |
-| `resetOnError`       | `onError`           | Call form.reset() in mutation onError        |
-| `saveOnBlur: false`  | `useScrapsForm`     | Use regular form with explicit Save button   |
-| `help`               | `hintText`          | On layout components                         |
-| `label`              | `label`             | On layout components                         |
-| `required`           | `required`          | On layout + Zod schema                       |
+| Old System           | New System          | Notes                                                |
+| -------------------- | ------------------- | ---------------------------------------------------- |
+| `saveOnBlur: true`   | `AutoSaveForm`      | Default behavior                                     |
+| `confirm`            | `confirm` prop      | `string \| ((value) => string \| undefined)`         |
+| `showHelpInTooltip`  | `variant="compact"` | On layout components                                 |
+| `disabledReason`     | `disabled="reason"` | String shows tooltip                                 |
+| `extraHelp`          | JSX in layout       | Render `<Text>` below field                          |
+| `getData`            | `mutationFn`        | Transform data in mutation function                  |
+| `mapFormErrors`      | `setFieldErrors`    | Transform API errors in catch block                  |
+| `saveMessage`        | `onSuccess`         | Show toast in mutation onSuccess callback            |
+| `formatMessageValue` | `onSuccess`         | Control toast content in onSuccess callback          |
+| `resetOnError`       | `onError`           | Call form.reset() in mutation onError                |
+| `saveOnBlur: false`  | `useScrapsForm`     | Use regular form with explicit Save button           |
+| (automatic)          | `form.reset()`      | Call after successful mutation if form stays on page |
+| `help`               | `hintText`          | On layout components                                 |
+| `label`              | `label`             | On layout components                                 |
+| `required`           | `required`          | On layout + Zod schema                               |
 
 ## Feature Details
 
@@ -410,6 +411,20 @@ const form = useScrapsForm({
 
 > **Note**: AutoSaveForm with TanStack Query already handles error states gracefully - the mutation's `isError` state is reflected in the UI. Manual reset is typically only needed for specific UX requirements like password fields.
 
+### Resetting After Save
+
+When using `useScrapsForm` for a form that stays on the page after save, call `form.reset()` after a successful mutation. This re-syncs the form with updated `defaultValues` so it becomes pristine again — any UI that depends on the form being dirty (like conditionally shown Save/Cancel buttons) will update correctly.
+
+```tsx
+onSubmit: ({value}) =>
+  mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {}),
+```
+
+> **Note**: `AutoSaveForm` handles this automatically. You only need to add this when using `useScrapsForm`.
+
 ### saveOnBlur: false → `useScrapsForm`
 
 Fields with `saveOnBlur: false` showed an inline alert with Save/Cancel buttons instead of auto-saving. This was used for dangerous operations (slug changes) or large text edits (fingerprint rules).
@@ -597,6 +612,7 @@ This pattern is necessary whenever a required field has no meaningful initial va
 - [ ] Handle `mapFormErrors` with setFieldErrors in catch
 - [ ] Handle `saveMessage` in onSuccess callback
 - [ ] Convert `saveOnBlur: false` fields to regular forms with Save button
+- [ ] Call `form.reset()` after successful mutation (for forms that stay on page)
 - [ ] Verify `onSuccess` cache updates merge with existing data (use updater function) — some API endpoints may return partial objects
 - [ ] Wrap the migrated form with `<FormSearch route="...">` if the old form was searchable in SettingsSearch
 - [ ] Run `pnpm run extract-form-fields` and commit the updated `generatedFieldRegistry.ts`