把额度动态
接入你的产品.

https://wbbbai.cc/api/v2/events?provider=codex&kind=banked&limit=20

async function getCodexBanked() {
  const url = 'https://wbbbai.cc/api/v2/events?provider=codex&kind=banked&limit=10';
  // API_KEY must stay on your server, never in public frontend JavaScript.
  const response = await fetch(url, { headers: {'X-API-Key': process.env.WBBBAI_API_KEY} });
  if (!response.ok) throw new Error(`API error: ${response.status}`);
  const { events, generatedAt } = await response.json();
  return { events, generatedAt };
}
getCodexBanked().then(console.log);

import requests
url = "https://wbbbai.cc/api/v2/events"
params = {"provider": "codex", "kind": "banked", "limit": 10}
import os
response = requests.get(url, params=params, headers={"X-API-Key": os.environ["WBBBAI_API_KEY"]}, timeout=10)
response.raise_for_status()
for event in response.json()["events"]:
    print(event["date"], event["title"], event["url"])

请在我现有的项目中集成 WBBBAI 额度雷达公开 API。

文档：https://wbbbai.cc/developers.html
额度事件：https://wbbbai.cc/api/v2/events
资讯：https://wbbbai.cc/api/v2/news

目标：
1. 增加一个「AI 额度动态」模块，展示 Codex、Claude、Grok 最新事件。
2. 清楚区分 regular（额度恢复）、banked（重置卡）、notice（预告）和 policy（规则变化）。
3. 支持按平台筛选，显示来源、原帖链接与公告日期。
4. 对接口响应缓存至少 5 分钟，并有错误状态、空状态、加载状态。
5. 将公告时间与实际到账时间区分，不把预测视为官方承诺。
6. 保留原始来源归属：WBBBAI 与各上游资料库。
7. 不要索取或保存用户的 ChatGPT/Claude/Grok 登录凭据。
8. 使用服务器端环境变量 WBBBAI_API_KEY 设置 X-API-Key 请求头；不要把密钥写入浏览器代码。
9. 兼容我的现有技术栈和设计系统，先检查项目结构再最小化改动。

请输出所修改的文件、完整实现以及测试结果。