PDS proposals

18 component proposals for PDS v2 (11 net-new, 7 extending existing components). Each one has a live Storybook, its source, the decisions behind it, and what is custom.

• Agent avatar

  Start from the PDS v2 Avatar (src/components/identity/Avatar, branch v2.x), renamed AgentAvatar (class pds-agent-avatar).

  Net-new componentStorybook (6 stories)

• Agent Step

  One row: an optional icon (status or custom), a label, quiet secondary text and optional expandable detail.

  Net-new componentStorybook (2 stories)

• Avatar Label

  The PDS v2 AvatarLabel (src/components/identity/AvatarLabel, branch v2.x) with every Avatar replaced by the Agent Avatar proposal.

  Net-new componentStorybook (6 stories)

• Button

  Starting point for a Button proposal.

  Extends a PDS componentStorybook (10 stories)

• Chain of Thought

  A collapsible list.

  Net-new componentStorybook (5 stories)

• Chat Input

  A labelled textarea with a toolbar inside the same bordered box:

  Net-new componentStorybook (2 stories)

• Chat Message

  ChatMessage, with sender: user or agent.

  Net-new componentStorybook (3 stories)

• Code Diff

  A Panel List of changed files.

  Net-new componentStorybook (2 stories)

• Icon: agentic icons

  Add the new sharp, solid sparkles glyph to the Icon set alongside zappy.

  Extends a PDS componentStorybook (2 stories)

• Icon Button

  Starting point for an IconButton proposal.

  Extends a PDS componentStorybook (4 stories)

• Identity Block

  Start from the PDS v2 Identity Block and use the Agent Avatar in place of the human Avatar, as Avatar Label does.

  Extends a PDS componentStorybook (3 stories)

• Menu Button

  Starting point for a MenuButton proposal.

  Extends a PDS componentStorybook (4 stories)

• Model Selector

  A new component built on the local MenuButton (trigger, popover, keyboard and focus behavior come from it).

  Net-new componentStorybook (4 stories)

• Panel

  The PDS v2 Panel (src/components/panels/Panel, branch v2.x) with one addition: the agentic-default, agentic-raised and agentic-sunken variants: each existing surface with the AI gradient as the border.

  Extends a PDS componentStorybook (3 stories)

• Send Button

  A square, filled icon button (primary Button colors, IconButton shape and sizes) with three states:

  Net-new componentStorybook (3 stories)

• Spinner: agentic color variant

  Extend the existing PDS v2 Spinner (not a new component).

  Extends a PDS componentStorybook (4 stories)

• Suggestion Card

  A card for use inside an agent `ChatMessage`:

  Net-new componentStorybook (5 stories)

• Thinking State

  A small inline status: the agent icon (Zappy by default), a label ("Thinking..."), and the elapsed time in the code font ("17.1s").

  Net-new componentStorybook (4 stories)