PDS proposals
← All proposals

Regenerate a suggestion

A recipe, not a component: one interactive story that composes the Suggestion Card (single choice), the Button and the PDS Compact Pagination.

Extends a PDS componentOpen in Storybook

proposals/RegenerateSuggestion/HANDOFF.md54 lines · View on GitHub

Handoff: Regenerate a suggestion (recipe)

What and why

An agent's suggestion is not always right. This recipe shows how to let people ask for a different one (Regenerate) and still go back to earlier attempts (a pager), using the Suggestion Card's footer slots. It is a recipe, not a component: a story and a Usage page that compose existing components. It has no API, class, token or CSS of its own. There is nothing to port beyond the components it uses (below). The engineer copies the composition and keeps the story as documentation.

  • Figma / Jira: none. Source: the designer's request (2026-10-21).
  • Context: context.md

Exploration and decisions

  • A recipe, not a story of the card: it adds no prop or class to the Suggestion Card (it fills actionsStart and actionsEnd), and the same pattern would apply to other things an agent offers.
  • Regenerate is a secondary button with the rotate icon in actionsStart, shown in its working state ("Regenerating") while the agent replies. The new set replaces the rows and the view jumps to it.
  • Browsing: once there is more than one set, the PDS Compact Pagination (pageControlType='static', one item per page: "1 of 2") sits in actionsEnd. Each set keeps its own selection.
  • The screen owns the sets, the selection and what Regenerate does. The sample's replies are scripted (a 1.2 second delay, three sets that cycle). Story: Interactive.

Full list: decisions.md.

What it composes and how

  • Suggestion Card (type='choice', single choice with SuggestionChoice radio rows), see its handoff.
  • The PDS Button (the Regenerate button, with isWorking).
  • PDS Compact Pagination from the package (PaginationCompact, pageControlType='static', itemsPerPage={1}, onPageChange).
  • The story's state: the sets, the page, one selection per set, the regenerating flag.

Impact

From impact.md: no existing PDS component is reached and no --pds-* token is redefined. No other proposal depends on this recipe.

Reused vs net-new

Reused: everything above. Net-new: nothing (see custom.md).

Accessibility

  • Regenerate is a real button; while it works it is disabled and its label changes to "Regenerating".
  • The pager is the PDS Compact Pagination (previous and next buttons with labels, "Page 1 of 2" text).
  • Not handled: announcing the change of set to screen readers when the rows change (open question below).
  • The a11y panel has not been run, and light and dark were not checked by eye in a session.

Decisions and open questions

  • Is the footer the right place for the pager, or should it sit in the header at the right of the title? That would need a header slot on the card.
  • Should the change of set be announced (for example "Set 2 of 2")?
  • Does an accepted card keep the pager, so the history can still be browsed? What does Regenerate do on a dismissed or accepted card? (In the story the buttons go away with the state.)

Port notes

Nothing to port. Port the Suggestion Card and the Button (and their dependencies, see docs/PORT-ORDER.md), then copy the composition from the story. The recipe uses the package's PaginationCompact as is.

Preview

npm run storybook, story Recipes / Regenerate a suggestion. Figma: none.