用途：把 ibl.ai 的信用余额组件 CreditBalance 接入应用顶部导航栏，展示用户剩余额度、当前套餐，并提供升级、添加信用额度和管理账单的入口。组件由 SDK 渲染，底层使用 Stripe，不应自行实现或改写样式。
主要能力：触发按钮为 SDK 提供的 Lucide CreditCard 图标按钮，尺寸 h-5 w-5，余额偏低时右上角显示状态点；点击后打开 w-[320px] 下拉面板，显示剩余额度、已消耗额度、重置日期（如适用）和账单标签。免费套餐显示 Upgrade Plan，添加支付方式后切换为 Manage Usage 与 Add Credits。
使用方式：从 @iblai/iblai-js/web-containers 导入 CreditBalance，不要从 /next 或 /sso 导入。在导航栏右侧、通知铃铛之前渲染，必需属性包括 tenant、enabled（显式 true）、redirectUrl（window.location.origin）、mainPlatformKey、currentUserEmail、username。需先在 iblai-styles.css 或 globals.css 中配置两条 @source 指令，分别指向 SDK 的 source 与 source/next 目录，然后重启开发服务器。
适用场景：组织已启用付费墙（currentTenant.show_paywall === true），且用户为管理员或试用用户并已登录时。
限制：不要添加自定义样式、颜色或 CSS 覆盖，不要用 className 替换图标或改尺寸；不要用 window.location.href 作为 redirectUrl；缺少 source/next 扫描会导致图标尺寸异常；无付费墙的组织会持续显示加载失败；非管理员或非试用用户无法充值，应隐藏组件。enabled 为 false 只隐藏输出，不会跳过账单查询，仍需在 JSX 层做可见性判断。前置条件包括已完成认证与导航栏配置、安装 SDK、Tailwind v4 并配置 @source。