feat(ai-credits): Setup guidance header — tagline, bonus highlight, flatter layout

[blueogin]

Closes #177

What changed

Guidance area is flush with the widget background
SetupGuidanceCard rendered on a Card surface, which read as a gray panel wedged between the
header and the tabs. It is now a plain YStack aligned to the header's horizontal padding, so
the section reads as part of the header. The separator above the button row stays.

Added the tagline and bonus highlight from the mock

• Tagline: "Buy AI credits with G$ for Claude Code, Codex, chat & other AI tools."
• New SetupBonusHighlight — a collapsible banner stating the headline bonus, expanding to
  explain the verification requirement.
  • Percentages come from adapter state (depositBonusPercent / streamBonusPercent), not
    hardcoded copy; the headline uses the larger of the two.
  • The banner renders nothing when both bonuses are zero.
  • Expanded copy adapts to isGoodIdVerified — verified wallets are told the bonus already
    applies instead of being asked to claim UBI first.

Action button row restyled

• Icons dropped from How to use and FAQs; Antseed site keeps an external-link icon
  after its label to signal it opens a new tab.
• Smaller horizontal padding and a tighter corner radius instead of the default pill.
• flexGrow + flexBasis: auto instead of flex: 1, so button width follows label length —
  "Antseed site" was being clipped to "A…" under equal-width cells.

Testing

• tsup build and eslint pass for the package.
• Checked in Storybook — Widgets / AiCreditsWidget / Showcase → Injected Wallet — collapsed and
  expanded banner, and the button row at mobile width.

Notes

• No behaviour changes outside the guidance header; Setup steps, Buy, Manage and History are
  untouched.
• The pre-existing type errors in this file (variant="default", Anchor style) are unchanged
  and are tracked in the onboarding finalization sub-issue.

[Copilot]

Pull request overview

Polishes the AI Credits widget’s Setup guidance area above the tab navigation to better match the onboarding mock: it removes the inset card surface, adds a short tagline plus a bonus highlight banner, and tightens the action button row styling.

Changes:

• Reworked SetupGuidanceCard layout to be flush with the widget background, added a tagline, and adjusted the action buttons (no icons on internal actions; external-link icon retained).
• Introduced SetupBonusHighlight, a collapsible bonus banner driven by adapter-provided bonus percentages and GoodID verification state.
• Wired bonus-related state through AiCreditsWidget into SetupGuidanceCard.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/ai-credits-widget/src/components/setup/SetupGuidanceCard.tsx	Converts the guidance area from a Card surface to a flush layout, adds tagline + bonus banner, and restyles the button row.
packages/ai-credits-widget/src/components/setup/SetupBonusHighlight.tsx	Adds a new collapsible bonus highlight banner with verified/unverified explanatory copy.
packages/ai-credits-widget/src/AiCreditsWidget.tsx	Passes bonus and verification state into SetupGuidanceCard.

---

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.