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.
Base is the unmodified v2 Panel (Panel.tsx, panel.css). Proposal changes go on top. The package's own Panel CSS also loads, so the local panel.css overrides it by class name, as with Button.
Agentic is three variants: agentic-default, agentic-raised, agentic-sunken (Erika's call; first agentic, then renamed and extended). Button, IconButton and MenuButton use an isAgentic boolean, so this is inconsistent with them. Trade-off: the combinations are explicit, but each new surface needs its own agentic-* value. Status, overlay variants are not agentic. In the component, agentic-<surface> renders the surface's class (--raised, --sunken) plus --agentic, so fill and shadow are reused.
Technique, same as the agentic Button:--pds-gradient-ai-active is a gradient, so it can't go in border-color. The border is transparent, the gradient sits on the border-box, and the panel's fill (--bg-color) sits on the padding-box above it.
isAnimated shimmers the agentic border (Erika's call). On by default (Erika's call), so an agentic panel shimmers until the screen sets isAnimated={false}, e.g. when the agent finishes. This differs from the other agentic components, which are static, and from the convention that component defaults stay off while Storybook shows the active state. Intended for while the agent is working. Typed as a discriminated union: isAnimated is only accepted with an agentic-* variant (never otherwise), and is ignored at runtime on others. Storybook's if conditions can't match a set of values, so the control still shows on every variant; the stories use a flat args type for that reason. Gated on prefers-reduced-motion: no-preference, duration --pds-animation-duration-ai-shimmer. The slide is one gradient tile (the gradient ends on its start color) so the loop is seamless. Not yet on Button, IconButton or MenuButton: a system-level question (one shared mechanism vs a prop each) to raise with the PDS team.
Fills:agentic-default uses --pds-color-surface-default, agentic-sunken uses --pds-color-panel-sunken-background with the inset shadow, agentic-raised uses the default fill with the raised shadow.
Local stand-ins for what the package doesn't export: mergeClasses (from ../Button/utils) and the padding type (v2's PaddingScale). The port uses the real ones.
Open: the "Zappy" tab. The reference has a small gradient label sitting on the top-left of the border. Not built. If other agent surfaces get it, it belongs on the agentic container (an optional label), not on this one report.
Open: dark mode. The gradient and the fill need checking in dark.
Storybook: Proposals/Panel, not tagged as a new pattern (it is an extension to an existing component). Default story is agentic-default.
The Suggestion Card is built on the package Panel, not this one; it isn't agentic.
The With Content story's content is a story-only sample (ApprovalReport.tsx, approval-report.css) from Erika's investigation-report screenshot, built from the proposal Panel (sunken), Code Diff, Button (agentic primary with the zappy icon) and Icon, all the local proposals, so changes to them show up here. It is not part of the Panel; the content belongs to the screen. The proposed fix is the Code Diff proposal with one file (composer.json), which expands to its diff.