From 63d50feafe11d452dfbf4b9278d4631419641150 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 21 Jul 2026 08:02:25 +0200
Subject: [PATCH 1/4] ref(scraps): Add chat primitives and adopt in Seer
 Explorer

Add presentation-only chat primitives to @sentry/scraps/chat (MessageRow,
UserBubble, AssistantMessage, AssistantActions, ToolCallIndicator, Spinner) and
adopt them in Seer Explorer. MessageRow positions a turn by role via a from prop;
AssistantActions renders thumbs up/down and a copy button driven by flat
copyText/onCopy. App-specific logic (markdown, analytics, feedback persistence)
stays in the view. Each primitive ships with a story.
---
 .../components/core/chat/assistantActions.mdx |  69 ++++++++++++
 .../components/core/chat/assistantActions.tsx | 105 ++++++++++++++++++
 .../components/core/chat/assistantMessage.mdx |  51 +++++++++
 .../components/core/chat/assistantMessage.tsx |  22 ++++
 static/app/components/core/chat/index.tsx     |   3 +
 .../app/components/core/chat/messageRow.mdx   |  43 +++++++
 .../app/components/core/chat/messageRow.tsx   |  31 ++++++
 .../components/chat/assistant.tsx             |  82 +++-----------
 .../seerExplorer/components/chat/shared.tsx   |  28 ++---
 .../seerExplorer/components/chat/user.tsx     |   7 +-
 10 files changed, 355 insertions(+), 86 deletions(-)
 create mode 100644 static/app/components/core/chat/assistantActions.mdx
 create mode 100644 static/app/components/core/chat/assistantActions.tsx
 create mode 100644 static/app/components/core/chat/assistantMessage.mdx
 create mode 100644 static/app/components/core/chat/assistantMessage.tsx
 create mode 100644 static/app/components/core/chat/messageRow.mdx
 create mode 100644 static/app/components/core/chat/messageRow.tsx

diff --git a/static/app/components/core/chat/assistantActions.mdx b/static/app/components/core/chat/assistantActions.mdx
new file mode 100644
index 000000000000..ff37c001aa96
--- /dev/null
+++ b/static/app/components/core/chat/assistantActions.mdx
@@ -0,0 +1,69 @@
+---
+title: AssistantActions
+description: Thumbs up/down feedback and a copy button for an agent's response.
+category: chat
+source: '@sentry/scraps/chat'
+resources:
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/chat/assistantActions.tsx
+---
+
+import {AssistantActions} from '@sentry/scraps/chat';
+
+import * as Storybook from 'sentry/stories';
+
+export const documentation = import('!!type-loader!@sentry/scraps/chat/assistantActions');
+
+The `AssistantActions` renders the action bar for an agent's response: thumbs
+up/down feedback and a copy button.
+
+It is presentation only. It reports votes through `onFeedback` and copies
+through `onCopy`, and holds no submitted state — the caller decides what a vote
+means, what to copy, and owns any analytics or persistence. Placement and
+hover-reveal are the caller's responsibility via the forwarded `ButtonBar`
+props.
+
+## With copy button
+
+Pass `copyText` to show the copy button alongside feedback.
+
+<Storybook.Demo>
+  <AssistantActions onFeedback={() => {}} copyText="The agent response." />
+</Storybook.Demo>
+
+```jsx
+<AssistantActions
+  onFeedback={feedback => recordFeedback(feedback)}
+  copyText={response}
+  onCopy={() => trackCopy()}
+/>
+```
+
+## Without copy button
+
+Omit `copyText` (or leave it empty) to render feedback only.
+
+<Storybook.Demo>
+  <AssistantActions onFeedback={() => {}} />
+</Storybook.Demo>
+
+```jsx
+<AssistantActions onFeedback={recordFeedback} />
+```
+
+## Disabled
+
+Set `feedbackDisabled` once a vote has been recorded to lock both feedback
+buttons and switch their tooltip to a submitted state. Hover a thumb to see the
+"Feedback submitted" tooltip.
+
+<Storybook.Demo>
+  <AssistantActions
+    onFeedback={() => {}}
+    feedbackDisabled
+    copyText="The agent response."
+  />
+</Storybook.Demo>
+
+```jsx
+<AssistantActions onFeedback={recordFeedback} feedbackDisabled copyText={response} />
+```
diff --git a/static/app/components/core/chat/assistantActions.tsx b/static/app/components/core/chat/assistantActions.tsx
new file mode 100644
index 000000000000..c4f1dbe502f0
--- /dev/null
+++ b/static/app/components/core/chat/assistantActions.tsx
@@ -0,0 +1,105 @@
+import {Button, ButtonBar, type ButtonBarProps} from '@sentry/scraps/button';
+
+import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
+import {IconThumb} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+type AssistantFeedback = 'positive' | 'negative';
+
+interface AssistantActionsProps extends Omit<ButtonBarProps, 'children' | 'onCopy'> {
+  /**
+   * Text copied by the copy button. When omitted or empty, the copy button is
+   * hidden.
+   */
+  copyText?: string;
+  /**
+   * Locks the feedback buttons — e.g. once a vote has been recorded — and
+   * switches their tooltip to a submitted state.
+   */
+  feedbackDisabled?: boolean;
+  /**
+   * Fired after the response is copied. Analytics are the caller's
+   * responsibility.
+   */
+  onCopy?: (copiedText: string) => void;
+  /**
+   * Fired when the user votes on the response. The meaning of a vote and any
+   * analytics/persistence are the caller's responsibility.
+   */
+  onFeedback?: (feedback: AssistantFeedback) => void;
+}
+
+/**
+ * The action bar for an assistant's response: thumbs up/down feedback and a
+ * copy button.
+ *
+ * Presentation only — it renders the controls and reports votes through
+ * `onFeedback` and copies through `onCopy`. It holds no submitted state and
+ * fires no analytics; the caller owns what a vote means and what to copy.
+ * Placement (and any hover-reveal) is the caller's responsibility via the
+ * forwarded `ButtonBar` props.
+ */
+export function AssistantActions({
+  onFeedback,
+  feedbackDisabled,
+  copyText,
+  onCopy,
+  size = 'xs',
+  ...props
+}: AssistantActionsProps) {
+  return (
+    <ButtonBar size={size} {...props}>
+      <FeedbackButton
+        feedback="positive"
+        disabled={feedbackDisabled}
+        onClick={onFeedback}
+      />
+      <FeedbackButton
+        feedback="negative"
+        disabled={feedbackDisabled}
+        onClick={onFeedback}
+      />
+      {copyText ? (
+        <CopyToClipboardButton
+          aria-label={t('Copy block content')}
+          text={copyText}
+          tooltipProps={{title: t('Copy to clipboard')}}
+          onCopy={onCopy}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      ) : null}
+    </ButtonBar>
+  );
+}
+
+function FeedbackButton({
+  feedback,
+  disabled,
+  onClick,
+}: {
+  feedback: AssistantFeedback;
+  disabled?: boolean;
+  onClick?: (feedback: AssistantFeedback) => void;
+}) {
+  const isPositive = feedback === 'positive';
+  return (
+    <Button
+      aria-label={isPositive ? t('Feedback Thumbs Up') : t('Feedback Thumbs Down')}
+      icon={<IconThumb direction={isPositive ? 'up' : 'down'} />}
+      disabled={disabled}
+      tooltipProps={{
+        title: disabled
+          ? t('Feedback submitted')
+          : isPositive
+            ? t('I like this response')
+            : t("I don't like this response"),
+      }}
+      onClick={e => {
+        e.stopPropagation();
+        onClick?.(feedback);
+      }}
+    />
+  );
+}
diff --git a/static/app/components/core/chat/assistantMessage.mdx b/static/app/components/core/chat/assistantMessage.mdx
new file mode 100644
index 000000000000..33189658ce1f
--- /dev/null
+++ b/static/app/components/core/chat/assistantMessage.mdx
@@ -0,0 +1,51 @@
+---
+title: AssistantMessage
+description: The content region for an agent's response in a conversation.
+category: chat
+source: '@sentry/scraps/chat'
+resources:
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/chat/assistantMessage.tsx
+---
+
+import {AssistantMessage, MessageRow, UserBubble} from '@sentry/scraps/chat';
+import {Stack} from '@sentry/scraps/layout';
+
+import * as Storybook from 'sentry/stories';
+
+export const documentation = import('!!type-loader!@sentry/scraps/chat/assistantMessage');
+
+The `AssistantMessage` renders the content region for an agent's response.
+Unlike the sender's own messages — which are bubbled with `UserBubble` — an
+agent response is not bubbled: it renders as full-width, left-aligned content so
+rich output like markdown, tables, and code reads naturally.
+
+## Usage
+
+Shown here in a conversation for context; on its own it is just the agent's
+content region.
+
+<Storybook.Demo align="stretch">
+  <Stack width="100%">
+    <MessageRow from="user">
+      <UserBubble>How many errors happened in the last 24 hours?</UserBubble>
+    </MessageRow>
+    <MessageRow from="assistant">
+      <AssistantMessage>
+        There were 1,204 errors in the last 24 hours — a 32% jump from the previous day,
+        mostly TypeErrors from the checkout flow. The spike began around 2pm UTC and has
+        been trending down since the latest deploy.
+      </AssistantMessage>
+    </MessageRow>
+  </Stack>
+</Storybook.Demo>
+
+```jsx
+<AssistantMessage>
+  There were 1,204 errors in the last 24 hours — a 32% jump from the previous day, mostly
+  TypeErrors from the checkout flow. The spike began around 2pm UTC and has been trending
+  down since the latest deploy.
+</AssistantMessage>
+```
+
+Wide block content (tables, code) is kept from forcing the row wider, so it
+scrolls within the region instead of overflowing the conversation.
diff --git a/static/app/components/core/chat/assistantMessage.tsx b/static/app/components/core/chat/assistantMessage.tsx
new file mode 100644
index 000000000000..547f5c2eb8f2
--- /dev/null
+++ b/static/app/components/core/chat/assistantMessage.tsx
@@ -0,0 +1,22 @@
+import {Container} from '@sentry/scraps/layout';
+
+interface AssistantMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * The content region for an agent's response in a conversation.
+ *
+ * Unlike the sender's messages (see `UserBubble`), an agent response is not
+ * bubbled — it renders as full-width left-aligned content so rich output
+ * (markdown, tables, code) reads naturally. This is presentation only: it owns
+ * the turn's gutter and keeps wide content from forcing the row wider; the
+ * rendered content is the caller's responsibility.
+ */
+export function AssistantMessage({children, ...props}: AssistantMessageProps) {
+  return (
+    <Container padding="xl" minWidth={0} overflow="hidden" {...props}>
+      {children}
+    </Container>
+  );
+}
diff --git a/static/app/components/core/chat/index.tsx b/static/app/components/core/chat/index.tsx
index f9a891bc7201..9da8c577d9c3 100644
--- a/static/app/components/core/chat/index.tsx
+++ b/static/app/components/core/chat/index.tsx
@@ -1,3 +1,6 @@
+export {AssistantMessage} from './assistantMessage';
+export {AssistantActions} from './assistantActions';
 export {UserBubble} from './userBubble';
 export {ToolCallIndicator, type ToolCallStatus} from './toolCallIndicator';
 export {Spinner} from './spinner';
+export {MessageRow} from './messageRow';
diff --git a/static/app/components/core/chat/messageRow.mdx b/static/app/components/core/chat/messageRow.mdx
new file mode 100644
index 000000000000..3689c59c93f8
--- /dev/null
+++ b/static/app/components/core/chat/messageRow.mdx
@@ -0,0 +1,43 @@
+---
+title: MessageRow
+description: The full-width row that positions a single message turn in a conversation.
+category: chat
+source: '@sentry/scraps/chat'
+resources:
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/chat/messageRow.tsx
+---
+
+import {MessageRow, UserBubble} from '@sentry/scraps/chat';
+import {Container} from '@sentry/scraps/layout';
+
+import * as Storybook from 'sentry/stories';
+
+export const documentation = import('!!type-loader!@sentry/scraps/chat/messageRow');
+
+The `MessageRow` lays out a single message turn within a conversation. It is
+presentation only — it owns alignment and the consistent gutter around a turn,
+while the bubble or content is the caller's responsibility.
+
+## Alignment
+
+Set `from="user"` for the sender's own messages and `from="assistant"` for the
+agent's responses, so the two sides sit opposite each other. The row owns the
+role-to-side mapping — callers express whose turn it is, not the layout.
+
+<Storybook.Demo align="stretch">
+  <Container width="100%" background="secondary" radius="md">
+    <MessageRow from="user">
+      <UserBubble>Which of my issues are getting worse?</UserBubble>
+    </MessageRow>
+    <MessageRow from="assistant">
+      Here are the three escalating issues I found.
+    </MessageRow>
+  </Container>
+</Storybook.Demo>
+
+```jsx
+<MessageRow from="user">
+  <UserBubble>Which of my issues are getting worse?</UserBubble>
+</MessageRow>
+<MessageRow from="assistant">Here are the three escalating issues I found.</MessageRow>
+```
diff --git a/static/app/components/core/chat/messageRow.tsx b/static/app/components/core/chat/messageRow.tsx
new file mode 100644
index 000000000000..6e251752002b
--- /dev/null
+++ b/static/app/components/core/chat/messageRow.tsx
@@ -0,0 +1,31 @@
+import {Flex} from '@sentry/scraps/layout';
+
+interface MessageRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Whose turn this is: `user` sits on the right, `assistant` on the left. The
+   * row owns the role-to-side mapping so callers express intent, not layout.
+   */
+  from: 'user' | 'assistant';
+}
+
+/**
+ * The full-width row that positions a single message turn within a conversation.
+ *
+ * Presentation only — it owns the row's alignment and the consistent gutter
+ * around a turn. The bubble or content is the caller's responsibility; lay out
+ * multi-part content in your own wrapper.
+ */
+export function MessageRow({children, from, ...props}: MessageRowProps) {
+  return (
+    <Flex
+      align="start"
+      justify={from === 'user' ? 'end' : 'start'}
+      width="100%"
+      padding="xl"
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
diff --git a/static/app/views/seerExplorer/components/chat/assistant.tsx b/static/app/views/seerExplorer/components/chat/assistant.tsx
index 41df57558288..c1c668e6588a 100644
--- a/static/app/views/seerExplorer/components/chat/assistant.tsx
+++ b/static/app/views/seerExplorer/components/chat/assistant.tsx
@@ -1,13 +1,9 @@
 import {Fragment} from 'react';
 import {css} from '@emotion/react';
 
-import {Button, ButtonBar} from '@sentry/scraps/button';
-import {Container} from '@sentry/scraps/layout';
+import {AssistantActions, AssistantMessage} from '@sentry/scraps/chat';
 
-import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {SeerMarkdown} from 'sentry/components/seer/markdown';
-import {IconThumb} from 'sentry/icons';
-import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useSessionStorage} from 'sentry/utils/useSessionStorage';
@@ -32,9 +28,9 @@ export function AssistantBlock({
   if (block.loading) {
     if (isStreamingEnabled && hasValidContent(content)) {
       return (
-        <Container padding="xl" minWidth={0} overflow="hidden">
+        <AssistantMessage>
           <SeerMarkdown raw={content} variant="streaming" />
-        </Container>
+        </AssistantMessage>
       );
     }
     return <MessagePlaceholder content={isStreamingEnabled ? undefined : content} />;
@@ -43,9 +39,9 @@ export function AssistantBlock({
   return (
     <Fragment>
       {hasValidContent(content) && (
-        <Container padding="xl" minWidth={0} overflow="hidden">
+        <AssistantMessage>
           <SeerMarkdown raw={content} />
-        </Container>
+        </AssistantMessage>
       )}
       <BlockActionBar
         block={block}
@@ -104,75 +100,23 @@ function BlockActionBar({
   }
 
   return (
-    <ButtonBar
-      size="xs"
+    <AssistantActions
       position="absolute"
       bottom="2px"
       right="8px"
       visibility="hidden"
+      onFeedback={trackFeedback}
+      feedbackDisabled={feedbackSubmitted}
+      copyText={showCopy ? (block.message.content ?? '') : undefined}
+      onCopy={() => {
+        trackAnalytics('seer.explorer.block_copied', {organization});
+      }}
       css={css`
         ${BLOCK_WRAPPER_SELECTOR}:hover &,
         ${BLOCK_WRAPPER_SELECTOR}:focus-within & {
           visibility: visible;
         }
       `}
-    >
-      <FeedbackButton
-        type="positive"
-        disabled={feedbackSubmitted}
-        onClick={trackFeedback}
-      />
-      <FeedbackButton
-        type="negative"
-        disabled={feedbackSubmitted}
-        onClick={trackFeedback}
-      />
-      {showCopy && (
-        <CopyToClipboardButton
-          aria-label={t('Copy block content')}
-          text={block.message.content ?? ''}
-          tooltipProps={{title: t('Copy to clipboard')}}
-          onCopy={() => {
-            trackAnalytics('seer.explorer.block_copied', {organization});
-          }}
-          onClick={e => {
-            e.stopPropagation();
-          }}
-        />
-      )}
-    </ButtonBar>
-  );
-}
-
-function FeedbackButton({
-  type,
-  disabled,
-  onClick,
-}: {
-  disabled: boolean;
-  onClick: (type: 'positive' | 'negative') => void;
-  type: 'positive' | 'negative';
-}) {
-  return (
-    <Button
-      aria-label={
-        type === 'positive' ? t('Feedback Thumbs Up') : t('Feedback Thumbs Down')
-      }
-      icon={<IconThumb direction={type === 'positive' ? 'up' : 'down'} />}
-      disabled={disabled}
-      tooltipProps={{
-        title: disabled
-          ? t('Feedback submitted')
-          : type === 'positive'
-            ? t('I like this response')
-            : t("I don't like this response"),
-      }}
-      onClick={e => {
-        e.stopPropagation();
-        onClick(type);
-      }}
-    >
-      {undefined}
-    </Button>
+    />
   );
 }
diff --git a/static/app/views/seerExplorer/components/chat/shared.tsx b/static/app/views/seerExplorer/components/chat/shared.tsx
index a3efe3dcd423..19e3787719d9 100644
--- a/static/app/views/seerExplorer/components/chat/shared.tsx
+++ b/static/app/views/seerExplorer/components/chat/shared.tsx
@@ -1,4 +1,4 @@
-import {Spinner, type ToolCallStatus} from '@sentry/scraps/chat';
+import {MessageRow, Spinner, type ToolCallStatus} from '@sentry/scraps/chat';
 import {Flex} from '@sentry/scraps/layout';
 
 import {SeerMarkdown} from 'sentry/components/seer/markdown';
@@ -66,19 +66,21 @@ export function hasValidContent(content: string | null | undefined): content is
 
 export function MessagePlaceholder({content}: {content?: string}) {
   return (
-    <Flex align="center" gap="md" padding="xl" width="100%">
-      <Flex
-        display="inline-flex"
-        align="center"
-        justify="center"
-        width="12px"
-        height="12px"
-        flexShrink={0}
-      >
-        <Spinner role="status" aria-label={t('Loading')} />
+    <MessageRow from="assistant">
+      <Flex align="center" gap="md">
+        <Flex
+          display="inline-flex"
+          align="center"
+          justify="center"
+          width="12px"
+          height="12px"
+          flexShrink={0}
+        >
+          <Spinner role="status" aria-label={t('Loading')} />
+        </Flex>
+        {hasValidContent(content) && <SeerMarkdown raw={content} />}
       </Flex>
-      {hasValidContent(content) && <SeerMarkdown raw={content} />}
-    </Flex>
+    </MessageRow>
   );
 }
 
diff --git a/static/app/views/seerExplorer/components/chat/user.tsx b/static/app/views/seerExplorer/components/chat/user.tsx
index 2940d8278929..7c80cf462094 100644
--- a/static/app/views/seerExplorer/components/chat/user.tsx
+++ b/static/app/views/seerExplorer/components/chat/user.tsx
@@ -1,12 +1,11 @@
-import {UserBubble} from '@sentry/scraps/chat';
-import {Flex} from '@sentry/scraps/layout';
+import {MessageRow, UserBubble} from '@sentry/scraps/chat';
 
 import type {UserBlockProps} from './shared';
 
 export function UserBlock({block}: UserBlockProps) {
   return (
-    <Flex align="start" justify="end" width="100%" padding="xl">
+    <MessageRow from="user">
       <UserBubble>{block.message.content ?? ''}</UserBubble>
-    </Flex>
+    </MessageRow>
   );
 }

From 39eebbf46ec499340d540bb1d1af873e2101ac06 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 21 Jul 2026 09:16:01 +0200
Subject: [PATCH 2/4] ref(scraps): Let MessageRow own the turn gutter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AssistantMessage also applied padding=xl, so wrapping it in MessageRow
double-padded the turn — which is why Seer Explorer omitted the row around
assistant responses. Drop padding from AssistantMessage (like UserBubble, it now
styles only its content) and wrap it in MessageRow in the view, so user and
assistant turns share one consistent gutter.
---
 .../components/core/chat/assistantMessage.tsx  |  7 +++----
 .../seerExplorer/components/chat/assistant.tsx | 18 +++++++++++-------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/static/app/components/core/chat/assistantMessage.tsx b/static/app/components/core/chat/assistantMessage.tsx
index 547f5c2eb8f2..8a6c62842374 100644
--- a/static/app/components/core/chat/assistantMessage.tsx
+++ b/static/app/components/core/chat/assistantMessage.tsx
@@ -9,13 +9,12 @@ interface AssistantMessageProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * Unlike the sender's messages (see `UserBubble`), an agent response is not
  * bubbled — it renders as full-width left-aligned content so rich output
- * (markdown, tables, code) reads naturally. This is presentation only: it owns
- * the turn's gutter and keeps wide content from forcing the row wider; the
- * rendered content is the caller's responsibility.
+ * (markdown, tables, code) reads naturally. It keeps wide content from forcing
+ * the row wider; the turn's gutter is owned by the wrapping `MessageRow`.
  */
 export function AssistantMessage({children, ...props}: AssistantMessageProps) {
   return (
-    <Container padding="xl" minWidth={0} overflow="hidden" {...props}>
+    <Container minWidth={0} overflow="hidden" {...props}>
       {children}
     </Container>
   );
diff --git a/static/app/views/seerExplorer/components/chat/assistant.tsx b/static/app/views/seerExplorer/components/chat/assistant.tsx
index c1c668e6588a..9f3a0dde3a83 100644
--- a/static/app/views/seerExplorer/components/chat/assistant.tsx
+++ b/static/app/views/seerExplorer/components/chat/assistant.tsx
@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 import {css} from '@emotion/react';
 
-import {AssistantActions, AssistantMessage} from '@sentry/scraps/chat';
+import {AssistantActions, AssistantMessage, MessageRow} from '@sentry/scraps/chat';
 
 import {SeerMarkdown} from 'sentry/components/seer/markdown';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -28,9 +28,11 @@ export function AssistantBlock({
   if (block.loading) {
     if (isStreamingEnabled && hasValidContent(content)) {
       return (
-        <AssistantMessage>
-          <SeerMarkdown raw={content} variant="streaming" />
-        </AssistantMessage>
+        <MessageRow from="assistant">
+          <AssistantMessage>
+            <SeerMarkdown raw={content} variant="streaming" />
+          </AssistantMessage>
+        </MessageRow>
       );
     }
     return <MessagePlaceholder content={isStreamingEnabled ? undefined : content} />;
@@ -39,9 +41,11 @@ export function AssistantBlock({
   return (
     <Fragment>
       {hasValidContent(content) && (
-        <AssistantMessage>
-          <SeerMarkdown raw={content} />
-        </AssistantMessage>
+        <MessageRow from="assistant">
+          <AssistantMessage>
+            <SeerMarkdown raw={content} />
+          </AssistantMessage>
+        </MessageRow>
       )}
       <BlockActionBar
         block={block}

From 1de4c35aca903d46a9d64e2ca6966e3b62c0b866 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 21 Jul 2026 09:22:33 +0200
Subject: [PATCH 3/4] ref(scraps): Make AssistantMessage fill the turn width

As a flex item inside MessageRow, AssistantMessage shrink-wrapped to its content
instead of filling the row, so min-width:100% content (markdown tables, code
blocks) measured against the shrunk width. Add width=100% so it fills the turn
as documented.
---
 static/app/components/core/chat/assistantMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/core/chat/assistantMessage.tsx b/static/app/components/core/chat/assistantMessage.tsx
index 8a6c62842374..c8cba5b26a8c 100644
--- a/static/app/components/core/chat/assistantMessage.tsx
+++ b/static/app/components/core/chat/assistantMessage.tsx
@@ -14,7 +14,7 @@ interface AssistantMessageProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export function AssistantMessage({children, ...props}: AssistantMessageProps) {
   return (
-    <Container minWidth={0} overflow="hidden" {...props}>
+    <Container width="100%" minWidth={0} overflow="hidden" {...props}>
       {children}
     </Container>
   );

From 8e9555cc31a74951801fabe8ec18e0ac3d2a9d45 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 22 Jul 2026 08:45:32 +0200
Subject: [PATCH 4/4] fix(chat): align AssistantActions aria-labels with
 tooltip text

The feedback and copy buttons in the shared AssistantActions primitive
had aria-labels that disagreed with their visible tooltips, and the copy
button carried Seer Explorer-specific wording ("Copy block content")
that is misleading on other chat surfaces.

Derive each feedback button's aria-label from the same string as its
tooltip title, and match the copy button's aria-label to its "Copy to
clipboard" tooltip. Update the seerExplorer chat specs that queried by
the old accessible names.
---
 .../components/core/chat/assistantActions.tsx | 17 ++++++------
 .../components/chat/assistant.spec.tsx        | 26 +++++++++----------
 .../components/chat/toolUse.spec.tsx          |  2 +-
 .../components/chat/user.spec.tsx             |  4 +--
 4 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/static/app/components/core/chat/assistantActions.tsx b/static/app/components/core/chat/assistantActions.tsx
index c4f1dbe502f0..a0dcdce4bb7b 100644
--- a/static/app/components/core/chat/assistantActions.tsx
+++ b/static/app/components/core/chat/assistantActions.tsx
@@ -61,7 +61,7 @@ export function AssistantActions({
       />
       {copyText ? (
         <CopyToClipboardButton
-          aria-label={t('Copy block content')}
+          aria-label={t('Copy to clipboard')}
           text={copyText}
           tooltipProps={{title: t('Copy to clipboard')}}
           onCopy={onCopy}
@@ -84,18 +84,17 @@ function FeedbackButton({
   onClick?: (feedback: AssistantFeedback) => void;
 }) {
   const isPositive = feedback === 'positive';
+  const label = disabled
+    ? t('Feedback submitted')
+    : isPositive
+      ? t('I like this response')
+      : t("I don't like this response");
   return (
     <Button
-      aria-label={isPositive ? t('Feedback Thumbs Up') : t('Feedback Thumbs Down')}
+      aria-label={label}
       icon={<IconThumb direction={isPositive ? 'up' : 'down'} />}
       disabled={disabled}
-      tooltipProps={{
-        title: disabled
-          ? t('Feedback submitted')
-          : isPositive
-            ? t('I like this response')
-            : t("I don't like this response"),
-      }}
+      tooltipProps={{title: label}}
       onClick={e => {
         e.stopPropagation();
         onClick?.(feedback);
diff --git a/static/app/views/seerExplorer/components/chat/assistant.spec.tsx b/static/app/views/seerExplorer/components/chat/assistant.spec.tsx
index 2b9a18c47874..496e283db6bb 100644
--- a/static/app/views/seerExplorer/components/chat/assistant.spec.tsx
+++ b/static/app/views/seerExplorer/components/chat/assistant.spec.tsx
@@ -71,14 +71,12 @@ describe('AssistantBlock', () => {
       await userEvent.hover(container.firstChild as HTMLElement);
 
       expect(
-        screen.getByRole('button', {name: 'Feedback Thumbs Up'})
+        screen.getByRole('button', {name: 'I like this response'})
       ).toBeInTheDocument();
       expect(
-        screen.getByRole('button', {name: 'Feedback Thumbs Down'})
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', {name: 'Copy block content'})
+        screen.getByRole('button', {name: "I don't like this response"})
       ).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Copy to clipboard'})).toBeInTheDocument();
     });
 
     it('disables both thumbs after thumbs up is clicked', async () => {
@@ -88,8 +86,8 @@ describe('AssistantBlock', () => {
 
       await userEvent.hover(container.firstChild as HTMLElement);
 
-      const upButton = screen.getByRole('button', {name: 'Feedback Thumbs Up'});
-      const downButton = screen.getByRole('button', {name: 'Feedback Thumbs Down'});
+      const upButton = screen.getByRole('button', {name: 'I like this response'});
+      const downButton = screen.getByRole('button', {name: "I don't like this response"});
 
       await userEvent.click(upButton);
 
@@ -104,8 +102,8 @@ describe('AssistantBlock', () => {
 
       await userEvent.hover(container.firstChild as HTMLElement);
 
-      const upButton = screen.getByRole('button', {name: 'Feedback Thumbs Up'});
-      const downButton = screen.getByRole('button', {name: 'Feedback Thumbs Down'});
+      const upButton = screen.getByRole('button', {name: 'I like this response'});
+      const downButton = screen.getByRole('button', {name: "I don't like this response"});
 
       await userEvent.click(downButton);
 
@@ -120,8 +118,8 @@ describe('AssistantBlock', () => {
 
       await userEvent.hover(container.firstChild as HTMLElement);
 
-      const upButton = screen.getByRole('button', {name: 'Feedback Thumbs Up'});
-      const downButton = screen.getByRole('button', {name: 'Feedback Thumbs Down'});
+      const upButton = screen.getByRole('button', {name: 'I like this response'});
+      const downButton = screen.getByRole('button', {name: "I don't like this response"});
 
       await userEvent.click(upButton);
 
@@ -142,7 +140,7 @@ describe('AssistantBlock', () => {
       await userEvent.hover(container.firstChild as HTMLElement);
 
       expect(
-        screen.queryByRole('button', {name: 'Feedback Thumbs Up'})
+        screen.queryByRole('button', {name: 'I like this response'})
       ).not.toBeInTheDocument();
     });
 
@@ -154,10 +152,10 @@ describe('AssistantBlock', () => {
       await userEvent.hover(container.firstChild as HTMLElement);
 
       expect(
-        screen.queryByRole('button', {name: 'Feedback Thumbs Up'})
+        screen.queryByRole('button', {name: 'I like this response'})
       ).not.toBeInTheDocument();
       expect(
-        screen.queryByRole('button', {name: 'Copy block content'})
+        screen.queryByRole('button', {name: 'Copy to clipboard'})
       ).not.toBeInTheDocument();
     });
   });
diff --git a/static/app/views/seerExplorer/components/chat/toolUse.spec.tsx b/static/app/views/seerExplorer/components/chat/toolUse.spec.tsx
index cfa0e80547bd..0c9ac2656121 100644
--- a/static/app/views/seerExplorer/components/chat/toolUse.spec.tsx
+++ b/static/app/views/seerExplorer/components/chat/toolUse.spec.tsx
@@ -109,7 +109,7 @@ describe('ToolUseBlock', () => {
   it('does not render action bar', () => {
     render(<BlockComponent block={createBlock()} blockIndex={0} runId={123} />);
     expect(
-      screen.queryByRole('button', {name: 'Feedback Thumbs Up'})
+      screen.queryByRole('button', {name: 'I like this response'})
     ).not.toBeInTheDocument();
   });
 });
diff --git a/static/app/views/seerExplorer/components/chat/user.spec.tsx b/static/app/views/seerExplorer/components/chat/user.spec.tsx
index 7aede39f5cef..20a77167fea1 100644
--- a/static/app/views/seerExplorer/components/chat/user.spec.tsx
+++ b/static/app/views/seerExplorer/components/chat/user.spec.tsx
@@ -38,10 +38,10 @@ describe('UserBlock', () => {
     await userEvent.hover(container.firstChild as HTMLElement);
 
     expect(
-      screen.queryByRole('button', {name: 'Feedback Thumbs Up'})
+      screen.queryByRole('button', {name: 'I like this response'})
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole('button', {name: 'Copy block content'})
+      screen.queryByRole('button', {name: 'Copy to clipboard'})
     ).not.toBeInTheDocument();
   });
 });