feat: support list of agent actions in ResponseStatus by catherine · Pull Request #10359 · adobe/react-spectrum

catherine · 2026-07-23T20:07:38Z

This PR introduces <ExecutionTrace> and <ExecutionTraceItem> - components that render inside a <ResponseStatus> in order to highlight the steps an agent took while crafting its response.

rspbot · 2026-07-23T20:08:32Z

Build successful! 🎉

rspbot · 2026-07-24T23:22:42Z

Build successful! 🎉

rspbot · 2026-07-24T23:55:50Z

Build successful! 🎉

rspbot · 2026-07-24T23:59:27Z

Build successful! 🎉

devongovett

looks great!

devongovett · 2026-07-25T01:16:39Z

+   * Additional detail revealed when the step is expanded, such as tool call input or output.
+   * If omitted, the row is static and cannot be expanded.
+   */
+  detail?: ReactNode;


We might want to move this into children with title/panel wrappers like the RSP Disclosure API at some point

devongovett · 2026-07-25T01:24:42Z

+
+export interface ExecutionTraceItemProps extends DOMProps, AriaLabelingProps {
+  /** Allows detail content to render but prevents the row from being collapsible. */
+  isDetailNotCollapsible?: boolean;


we can debate this name 😄 allowsExpanding could work if the default is false. disallowCollapsing? 😂

Support Left/Right arrow to expand/collapse ??

This is a list of disclosures at the moment
https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
No left/right for now

isAlwaysOpen

+1 to isAlwaysOpen, allowsExpanding makes it sound like there is a state where it could still be "closed" and just not expandable IMO

I was struggling to name this one 😅 -- I'm also a fan of isAlwaysOpen and have updated to that

devongovett · 2026-07-25T01:27:12Z

might want a lil padding around this for the focus ring

also when it's expanded there's some extra space on the right

snowystinger · 2026-07-26T23:14:46Z

+  textAlign: 'start'
+});
+
+const detailTriggerChevronStyles = style({


heads up there may be a merge conflict with #10349 depending the merge order

👍 thanks for putting that on my radar

snowystinger · 2026-07-26T23:17:46Z

+const detailTriggerStyles = style({
+  display: 'block',
+  paddingY: 4,
+  marginTop: -2,


What's this for? could it be paddingTop:2 and no marginTop instead?

snowystinger · 2026-07-26T23:20:18Z

+  return (
+    <Button
+      className={renderProps =>
+        // TODO: remove size conditional once size is also removed from ResponseStatus


can we resolve by removing size?

✅ removed

snowystinger · 2026-07-26T23:23:17Z

+  font: 'body',
+  display: 'flex',
+  gap: 8,
+  marginTop: {


there's a lot of margin/paddingTop: +/-2 what's driving all of these?

initially it was solving some alignment issues between the step's icon/label when there was a hover state -- I'll do a pass to review/remove any that are no longer applicable now since we decided to remove the hover state

snowystinger · 2026-07-26T23:24:50Z

+  '--divider-display': {
+    type: 'display',
+    value: {
+      default: 'flex',


intention here is display: block, there's no children inside of the line?

snowystinger · 2026-07-26T23:30:30Z

+const executionTraceItemContentStyles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBottom: 12,


last one shouldn't have padding bottom, it's doubled up with the padding from the wrapper of the ol

snowystinger · 2026-07-26T23:34:44Z

+        </RACDisclosure>
+      ) : (
+        <div
+          className={mergeStyles(


we can do this at build time, if you put the shared properties into a const, you can spread it into both styles, then we can get rid of the mergeStyles and it'll be a little more declarative

✅ cleaned up 🧹

snowystinger · 2026-07-26T23:39:24Z

+        <Provider values={[[IconContext, {styles: iconStyle({size: 'M'})}]]}>
+          <CenterBaseline>{icon}</CenterBaseline>
+        </Provider>
+        <div className={executionTraceItemDividerStyles} />


Suggested change

<div className={executionTraceItemDividerStyles} />

<div role="presentation" className={executionTraceItemDividerStyles} />

snowystinger · 2026-07-26T23:44:18Z

+              docs
+            </ExecutionTraceItem>
+          </ExecutionTrace>
+          {/* <div>


? dead code?

leftover from a demo - good catch, removed ✅

snowystinger · 2026-07-26T23:46:17Z

+
+export interface ExecutionTraceItemProps extends DOMProps, AriaLabelingProps {
+  /** Allows detail content to render but prevents the row from being collapsible. */
+  isDetailNotCollapsible?: boolean;


isAlwaysOpen

LFDanLu · 2026-07-27T17:30:49Z

+
+export interface ExecutionTraceItemProps extends DOMProps, AriaLabelingProps {
+  /** Allows detail content to render but prevents the row from being collapsible. */
+  isDetailNotCollapsible?: boolean;


+1 to isAlwaysOpen, allowsExpanding makes it sound like there is a state where it could still be "closed" and just not expandable IMO

LFDanLu · 2026-07-27T17:39:28Z

+  );
+}
+
+export interface ExecutionTraceItemProps extends DOMProps, AriaLabelingProps {


should the ExecutionTraceItems also include the ability to set expanded by default/controlled? I don't think I've see that in other chat experiences so no need to add right now until requested by other teams, but maybe something to keep in mind

LFDanLu · 2026-07-27T17:42:00Z

for the future, would be nice to to also have the ExecutionTrace added to the "Chat" stories so we can see how it looks in a chat as a whole

- Set `role="presentation”` on vertical item divider - Remove dead code in Storybook example - Clean up styles around row content alignment with leading icon

rspbot · 2026-07-27T18:17:06Z

Build successful! 🎉

rspbot · 2026-07-27T18:17:08Z

## API Changes

react-aria-components

/react-aria-components:GridListHeaderProps

-GridListHeaderProps {
-  children?: ReactNode
-  className?: string
-  id?: string
-  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
-  style?: CSSProperties
-}

@react-spectrum/ai

/@react-spectrum/ai:ResponseStatus

 ResponseStatus {
   children: ReactNode
   defaultExpanded?: boolean
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
   onExpandedChange?: (boolean) => void
-  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   status?: 'loading' | 'failed' | 'success' = 'loading'
   styles?: StyleString
 }

/@react-spectrum/ai:ResponseStatusProps

 ResponseStatusProps {
   children: ReactNode
   defaultExpanded?: boolean
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
   onExpandedChange?: (boolean) => void
-  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   status?: 'loading' | 'failed' | 'success' = 'loading'
   styles?: StyleString
 }

/@react-spectrum/ai:ExecutionTrace

+ExecutionTrace {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  id?: string
+  styles?: StyleString
+}

/@react-spectrum/ai:ExecutionTraceItem

+ExecutionTraceItem {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  detail?: ReactNode
+  icon?: ReactNode
+  id?: string
+  isAlwaysOpen?: boolean
+  styles?: StyleString
+}

/@react-spectrum/ai:ExecutionTraceProps

+ExecutionTraceProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  id?: string
+  styles?: StyleString
+}

/@react-spectrum/ai:ExecutionTraceItemProps

+ExecutionTraceItemProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  detail?: ReactNode
+  icon?: ReactNode
+  id?: string
+  isAlwaysOpen?: boolean
+  styles?: StyleString
+}

@react-spectrum/s2

/@react-spectrum/s2:SideNav

-SideNav <T> {
-  UNSAFE_className?: UnsafeClassName
-  UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
-  autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | (T) => ReactNode
-  defaultExpandedKeys?: Iterable<Key>
-  dependencies?: ReadonlyArray<any>
-  disabledKeys?: Iterable<Key>
-  expandedKeys?: Iterable<Key>
-  id?: string
-  items?: Iterable<T>
-  onExpandedChange?: (Set<Key>) => any
-  selectedRoute: string
-  slot?: string | null
-  styles?: StylesPropWithHeight
-}

/@react-spectrum/s2:SideNavItem

-SideNavItem {
-  aria-label?: string
-  children: ReactNode
-  download?: boolean | string
-  hasChildItems?: boolean
-  href?: Href
-  hrefLang?: string
-  id?: Key
-  isDisabled?: boolean
-  onHoverChange?: (boolean) => void
-  onHoverEnd?: (HoverEvent) => void
-  onHoverStart?: (HoverEvent) => void
-  onPress?: (PressEvent) => void
-  onPressChange?: (boolean) => void
-  onPressEnd?: (PressEvent) => void
-  onPressStart?: (PressEvent) => void
-  onPressUp?: (PressEvent) => void
-  ping?: string
-  referrerPolicy?: HTMLAttributeReferrerPolicy
-  rel?: string
-  routerOptions?: RouterOptions
-  target?: HTMLAttributeAnchorTarget
-  textValue: string
-}

/@react-spectrum/s2:SideNavItemContent

-SideNavItemContent {
-  children: ReactNode
-}

/@react-spectrum/s2:SideNavItemLink

-SideNavItemLink {
-  children?: ReactNode
-}

/@react-spectrum/s2:SideNavSection

-SideNavSection <T extends {}> {
-  aria-label?: string
-  children?: ReactNode | (T) => ReactElement
-  dependencies?: ReadonlyArray<any>
-  id?: Key
-  items?: Iterable<T>
-}

/@react-spectrum/s2:SideNavHeader

-SideNavHeader {
-  children?: ReactNode
-  id?: string
-}

/@react-spectrum/s2:SideNavProps

-SideNavProps <T> {
-  UNSAFE_className?: UnsafeClassName
-  UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
-  autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | (T) => ReactNode
-  defaultExpandedKeys?: Iterable<Key>
-  dependencies?: ReadonlyArray<any>
-  disabledKeys?: Iterable<Key>
-  expandedKeys?: Iterable<Key>
-  id?: string
-  items?: Iterable<T>
-  onExpandedChange?: (Set<Key>) => any
-  selectedRoute: string
-  slot?: string | null
-  styles?: StylesPropWithHeight
-}

/@react-spectrum/s2:SideNavItemProps

-SideNavItemProps {
-  aria-label?: string
-  children: ReactNode
-  download?: boolean | string
-  hasChildItems?: boolean
-  href?: Href
-  hrefLang?: string
-  id?: Key
-  isDisabled?: boolean
-  onHoverChange?: (boolean) => void
-  onHoverEnd?: (HoverEvent) => void
-  onHoverStart?: (HoverEvent) => void
-  onPress?: (PressEvent) => void
-  onPressChange?: (boolean) => void
-  onPressEnd?: (PressEvent) => void
-  onPressStart?: (PressEvent) => void
-  onPressUp?: (PressEvent) => void
-  ping?: string
-  referrerPolicy?: HTMLAttributeReferrerPolicy
-  rel?: string
-  routerOptions?: RouterOptions
-  target?: HTMLAttributeAnchorTarget
-  textValue: string
-}

/@react-spectrum/s2:SideNavItemContentProps

-SideNavItemContentProps {
-  children: ReactNode
-}

/@react-spectrum/s2:SideNavItemLinkProps

-SideNavItemLinkProps {
-  children?: ReactNode
-}

/@react-spectrum/s2:SideNavSectionProps

-SideNavSectionProps <T> {
-  aria-label?: string
-  children?: ReactNode | (T) => ReactElement
-  dependencies?: ReadonlyArray<any>
-  id?: Key
-  items?: Iterable<T>
-}

/@react-spectrum/s2:SideNavHeaderProps

-SideNavHeaderProps {
-  children?: ReactNode
-  id?: string
-}

rspbot · 2026-07-27T18:17:10Z

Agent Skills Changes

Removed (1)

s2/skills/react-spectrum-s2/references/components/SideNav.md

Modified (7)

react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/components/Tree.md $\color{red}{-81}$
s2/skills/index.json $\color{red}{-1}$
s2/skills/react-spectrum-s2/SKILL.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/llms.txt $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/components/Tree.md $\color{red}{-81}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/dd77302922507be5bfdf01bd4747e49fe4ec01c7/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/dd77302922507be5bfdf01bd4747e49fe4ec01c7/

yihuiliao · 2026-07-27T18:26:35Z

ah sorry ignore me adding labels to this PR...i didn't mean to do that

catherine · 2026-07-27T18:51:04Z

+
+  return (
+    <Button
+      className={renderProps => mergeStyles(buttonStyles({...renderProps}), detailTriggerStyles)}


cc @devongovett

might want a lil padding around this for the focus ring

I've nudged the space around the focus ring:

Separately, I will follow up looking into the space that is added when the disclosure is expanded. It's happening both to the top level ResponseStatus disclosure and these new children

yihuiliao added the release label Jul 24, 2026

catherine force-pushed the f/response_status_list branch from 238eccc to 19e3229 Compare July 24, 2026 23:16

catherine marked this pull request as ready for review July 24, 2026 23:24

catherine added 2 commits July 24, 2026 16:40

feat: swap icon and chevron placement on ResponseStatus

85572e3

style: remove hover state on ResponseStatus trigger

d03544b

catherine force-pushed the f/response_status_list branch from 19e3229 to 23ca611 Compare July 24, 2026 23:49

catherine requested review from LFDanLu and snowystinger July 24, 2026 23:50

catherine added 3 commits July 24, 2026 16:52

feat: add ExecutionTrace and ExecutionTraceItem components

144d112

feat: expose ExecutionTrace and ExecutionTraceItem props from package

c46d0f2

docs: add Storybook Story for ExecutionTrace

ee22f43

catherine force-pushed the f/response_status_list branch from 23ca611 to ee22f43 Compare July 24, 2026 23:52

devongovett previously approved these changes Jul 25, 2026

View reviewed changes

snowystinger reviewed Jul 26, 2026

View reviewed changes

feat: remove size prop since not yet part of design spec

90d3d97

LFDanLu reviewed Jul 27, 2026

View reviewed changes

catherine added 2 commits July 27, 2026 11:05

feat: style massage and clean up

19d9887

- Set `role="presentation”` on vertical item divider - Remove dead code in Storybook example - Clean up styles around row content alignment with leading icon

refactor: rename prop to isAlwaysOpen

dd77302

catherine dismissed devongovett’s stale review via dd77302 July 27, 2026 18:10

yihuiliao added SideNav and removed SideNav labels Jul 27, 2026

catherine commented Jul 27, 2026

View reviewed changes

	<div className={executionTraceItemDividerStyles} />
	<div role="presentation" className={executionTraceItemDividerStyles} />

Uh oh!

Conversation

catherine commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rspbot commented Jul 23, 2026

Uh oh!

rspbot commented Jul 24, 2026

Uh oh!

rspbot commented Jul 24, 2026

Uh oh!

rspbot commented Jul 24, 2026

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devongovett commented Jul 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jul 27, 2026

Uh oh!

rspbot commented Jul 27, 2026

react-aria-components

/react-aria-components:GridListHeaderProps

@react-spectrum/ai

/@react-spectrum/ai:ResponseStatus

/@react-spectrum/ai:ResponseStatusProps

/@react-spectrum/ai:ExecutionTrace

catherine commented Jul 23, 2026 •

edited

Loading

devongovett commented Jul 25, 2026 •

edited

Loading