The pending-pledge banner on goals#show and the pending-pledge
callout on goals#index were inlined yellow divs:
bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 \
dark:border-yellow-800
Raw color tokens violate the "functional tokens only" rule in
CLAUDE.md ("`text-primary` not `text-white`, `bg-container` not
`bg-white`"), drift from the DS warning palette (`bg-warning/10`
+ `border-warning/20`), and miss accessibility plumbing (aria role,
sr-only variant label) that DS::Alert provides for free.
Swap both surfaces for `DS::Alert.new(variant: "warning",
live: :polite)`:
- Index callout: a one-line message variant (no title).
- Show banner: title + body + footer with DS::Button (outline
Extend, ghost Cancel). Cancel button gets a CustomConfirm dialog
— the V2 affordance destroyed the pledge on a single click with
no second-chance prompt; one accidental click and the user lost
the record. The Extend / Cancel buttons drop the hand-built
`text-xs px-2.5 py-1 rounded-md shadow-border-xs bg-container`
styling, picking up DS::Button's `outline` / `ghost` variants
and `size: "sm"` instead.
Locale: tighten the title from "Pending: $200 into Savings" +
separate body line "… $0.50 or ±1%) · 6 days left." to
"Watching for $200 into Savings · 6 days left" with a short body
("Auto-confirms when Sure spots a matching deposit on the next
sync"). The old copy was ~130 chars and wrapped 2-3 lines inside
the banner flexbox, pushing the catch-up callout below the fold
on common viewports. Drop the hardcoded "$0.50" from the body
(currency-aware copy lands in Commit I).
Add `confirm_cancel_{title,body,cta}` strings for the
CustomConfirm dialog.
4fbf16e6f7