PDS proposals

30 component proposals for PDS v2 (17 net-new, 13 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)

• Agentic Button

  A separate component, `AgenticButton`, for an action the agent does:

  Net-new componentStorybook (9 stories)

• Agentic Menu Button

  A separate component, `AgenticMenuButton`, for a menu of actions the agent does:

  Net-new componentStorybook (4 stories)

• Agentic Split Button

  A separate component, `AgenticSplitButton`, a copy of the PDS v2 Split Button, so the engineer's port is mostly a copy:

  Net-new componentStorybook (4 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)

• Badge

  A copy of the PDS v2 Badge (pds-badge, same class names, props and CSS) with one addition: color='agentic-filled', the AI gradient as the fill, for denoting an agentic category.

  Extends a PDS componentStorybook (2 stories)

• Chain of Thought

  A collapsible list.

  Net-new componentStorybook (6 stories)

• Chat Attachment

  Net-new component: one attached item for chat.

  Net-new componentStorybook (2 stories)

• Chat Input

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

  Net-new componentStorybook (7 stories)

• Chat Message

  ChatMessage, with sender: user or agent.

  Net-new componentStorybook (3 stories)

• Chat Panel

  A layout shell for the content of an AI chat drawer or docked side panel.

  Net-new componentStorybook (4 stories)

• Chat with an agent

  A recipe, not a component: one interactive story that composes the existing proposals into a chat with an agent, from the empty state to a conversation.

  Extends a PDS componentStorybook (1 stories)

• Code diff

  A recipe, not a component (decided 2026-10-21): a Panel List of changed files, with each row's file icon and name, an optional File Diff (counts and bar), and an expand button that reveals the diff in a Code Block.

  Extends a PDS componentStorybook (2 stories)

• Content Diff

  A component, ContentDiff: the old value on a red line with a minus, the new value on a green line with a plus, in one bordered block, like a text diff.

  Net-new componentStorybook (1 stories)

• Dropzone

  A net-new component, `Dropzone`:

  Net-new componentStorybook (3 stories)

• Event log with agent

  A recipe, not a component: a story and Usage page that compose existing proposals.

  Extends a PDS componentStorybook (2 stories)

• Feedback Bar

  A small atomic component: a thumbs-up and thumbs-down pair with one piece of state, built from the local IconButton (its existing isPressed toggle, which maps to aria-pressed).

  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 (6 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)

• LabeledDivider

  Net-new LabeledDivider: a horizontal rule with a pill-shaped label centered on it.

  Net-new componentStorybook (5 stories)

• Logs table with divider

  A recipe: the PDS Logs Table pattern (Table with hasPanel, status-colored rows and the inline detail panel) with a LabeledDivider as a row.

  Extends a PDS componentStorybook (1 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)

• 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 componentStorybook (1 stories)

• Section Message

  A copy of the PDS v2 Section Message (pds-section-message, same class names, props and behavior) with an agentic type (AI gradient border on a surface fill, the Agent Avatar as its leading icon (decided 2026-10-21; iconName picks its icon), the standard secondary Button as the CTA, a silver-muted Badge) and an avatarProps option for the avatar (halo, shape, size).

  Extends a PDS componentStorybook (6 stories)

• Select

  An extension of the PDS Select: one new prop, variant, with bare next to default.

  Extends a PDS componentStorybook (2 stories)

• Spinner: agentic color variant

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

  Extends a PDS componentStorybook (5 stories)

• Suggestion Card

  A card for use inside an agent `ChatMessage`:

  Net-new componentStorybook (7 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)

• Timeline

  Net-new, in two parts.

  Net-new componentStorybook (5 stories)