feat(atomic) creation of agent generation steps component

[SimonMilord]

SFINT-6647

IN THIS PR:

• Creation of the render-agent-generation-steps functional component component
• Added rolodex-like animation
• Added unit tests
• Added 2 new labels in the locales.json for the search and thinking steps

DEMO

Screen.Recording.2026-03-03.at.10.51.56.AM.mov

[Copilot]

Pull request overview

This PR introduces a new Atomic (Lit) functional renderer intended to display agent generation steps (search/think/generate) while a generated answer is streaming, along with supporting localization strings, styling for a rolodex-like transition, and unit tests.

Changes:

• Added new i18n keys for agent “search” and “think” generation steps.
• Added generated-answer CSS keyframes/selectors for a rolodex animation.
• Added renderAgentGenerationSteps functional component plus helper functions and unit tests.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
packages/atomic/src/locales.json	Adds new localized strings for agent generation step labels.
packages/atomic/src/components/common/generated-answer/styles/generated-answer.tw.css.ts	Adds keyframes and styling hooks for the generation-steps rolodex animation.
packages/atomic/src/components/common/generated-answer/render-agent-generation-steps.ts	Introduces a new functional renderer + step-selection helpers for agent generation steps.
packages/atomic/src/components/common/generated-answer/render-agent-generation-steps.spec.ts	Adds unit tests covering rendering and step-selection behavior.

[mmitiche]

The current implementation goes beyond the initial scope by introducing unnecessary complexity and implicit requirements.

At this stage, we should focus on a minimal, well-defined component that fulfills its core responsibility and enables fast iteration.
Especially With tight deadlines, simplicity is the key. Additional behaviour can be evaluated and introduced later if there’s a clear need.

[mmitiche]

Additionally, this PR should also integrate the new functional component to atomic-answer-content.

[erocheleau]

Some more thoughts must be given to where the logic resides. In my opinion it's not in the functional component.

[github-actions]

🔗 Scratch Orgs ready to test this PR:

• ✅ LWS Enabled: Open Org
• ✅ LWS Disabled: Open Org

[mmitiche]

GG!
the component is almost there. The unit tests still need to be fixed.

There is one additional issue with the answering step:

Screen.Recording.2026-03-04.at.12.55.14.PM.mov

Currently, it renders “generating an answer,” and once the answer is fully generated and the answering step completes, render-agent-generation-steps renders nothing (which is expected). However, because the generation steps component no longer has any height, the answer content shifts upward slightly. This layout shift is noticeable and feels a bit annoying.

This should be discussed with UX to determine the right approach.

One possible solution is to stop displaying the answering step entirely, as it may be redundant because while the answer is being generated, we already display chunks progressively and display a blinking cursor, these elements clearly communicate that generation is in progress. Explicitly rendering a separate “generating an answer” step may not add meaningful value.

[SimonMilord]

endering a separate “generating an answer

yeah this issue is something I was aware of. At first I tried setting a minimum height, which solved the issue but then created a sizable gap between the title and the content. Im ok asking UX to see if we need that step or not, but in the meantime lets merge it regardless so we can test stuff and fix/change this in the improvements before the 31

[erocheleau]

There are still issues with tests

[erocheleau]

I think everything that needed fixing was fixed