RecommendationCard

An agent suggestion card with a three-bar confidence meter, an Alternatives drawer and a primary action.

When to use

• Present the one action the agent recommends, together with its confidence ("High confidence", "Needs review", "No signal").
• Let people switch to a lower-ranked alternative without leaving the card. Picking one promotes it to the main recommendation.
• Not for collecting several answers in sequence — use ApprovalCard. Not for a passive finding with a chart — use InsightCards.

Usage

import RecommendationCard from "@/components/iris/recommendation-card/recommendation-card";

h(RecommendationCard, {
  labels: { title: "Want me to move this organization to Team?" },
  options: [
    {
      key: "team",
      body: h(
        React.Fragment,
        null,
        "Add ",
        h(EntityChip, { name: "Nefeli Kontou", monogram: "NK" }),
        " as a fourth seat on Team for ",
        h(ValuePill, { tone: "green" }, "€39/month"),
      ),
      short: "Team plan · €39/month",
      signal: 3,
      tone: "var(--green)",
      label: "High confidence",
      cta: "Accept",
      ctaVariant: "accent",
    },
    {
      key: "later",
      body: "Keep three seats and revisit next month.",
      short: "Revisit next month",
      signal: 0,
      tone: "var(--ink-3)",
      label: "No signal",
      cta: "Keep Solo",
      ctaVariant: "primary",
    },
  ],
});

Props

Prop	Type	Default	Description
options	{ key: string; body: ReactNode; short: string; signal: number; tone: string; label: string; cta: string; ctaVariant: ButtonVariant }[]	3 demo options (a CapyDB plan change)	The first option is the recommendation. body is the rich sentence, short is the one-line text in the drawer, signal (0–3) fills the meter bars in the tone colour, label names the confidence, and cta/ctaVariant set the primary button.
labels	Partial<{ title, alternatives, otherOptions, accepted }>	demo title, Alternatives, Other options, Accepted	Card copy.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• There is no callback prop. Accepting only swaps the button to a success "Accepted" state inside the card, so wrap or fork the component to act on the choice.
• EntityChip and ValuePill (both exported) are the intended inline tokens inside body.
• The Alternatives button has aria-expanded, and the drawer opens with a grid-row transition so the card keeps its shape.
• Reads --surface, --line, --line-strong, --hover, --ink, --ink-2, --ink-3 and the tone colour you pass. The buttons are the shared Button in its sm size.