iblai-vibe-credit

# /iblai-vibe-credit Add the ibl.ai credit balance widget to your app's top navigation. The widget shows the user's remaining credits, current plan, and exposes the upgrade / add-credits / manage-billing flows. It uses Stripe under the hood and is rendered by the SDK — do not build a custom version.  Do NOT add custom styles, colors, or CSS overrides to the `<CreditBalance>` component. It ships with its own styling, including the trigger icon, the dropdown panel, and the upgrade/add-credits buttons. Wrapping it, restyling it, or swapping the icon will break the upgrade flow and visual consistency across ibl.ai apps. The widget MUST follow the canonical integration: - **Import path**: `@iblai/iblai-js/web-containers` (the framework-agnostic bundle — NOT `/next`, NOT `/sso`) - **`redirectUrl`**: `window.location.origin` (the Stripe checkout return URL — origin only, never `.href` or a path) - **`enabled`**: explicit `true` - **No `className`**: do not pass a `className` prop unless you have a layout reason. Never use it to swap the icon, change colors, or override the size --- ## Visual spec | Property | Value | |---|---| | Trigger | Icon-only button (Lucide `CreditCard`) provided by the SDK | | Trigger size | `h-5 w-5` icon inside a `ghost` icon button | | Status dot | Small colored dot in the top-right of the trigger when balance is low | ...