fix(context): read reasoning and cache tokens from the nested usage details

[burrows99]

Fixes #500

ContextReasoningUsage and ContextCacheUsage read usage.reasoningTokens and usage.cachedInputTokens. Both are deprecated in ai 6 and removed from LanguageModelUsage in ai 7, so on ai 7 the component fails to type-check (TS2339 x2), and at runtime the Reasoning and Cache rows never render because those fields are undefined.

This reads usage.outputTokenDetails.reasoningTokens and usage.inputTokenDetails.cacheReadTokens instead. Both exist from ai 6.0.105 (the minimum packages/elements allows), so it works on both majors. Cost lines are unchanged.

Changes

• packages/elements/src/context.tsx: the two reads
• packages/elements/__tests__/context.test.tsx: reasoning/cache tests now pass the nested shape (fail on main, pass here)
• packages/examples/src/context.tsx: the example usage object uses the nested shape

Verification

• The repo's own Test workflow (build + full test suite) passes on this branch: https://github.com/burrows99/ai-elements/actions/runs/38255687065 (run on my fork while upstream CI awaits first-contributor approval).
• pnpm exec vitest run __tests__/context.test.tsx: main 4 failed / 23 passed → 27 passed. Full suite: 958 passed.
• tsc on src/context.tsx against ai@7.0.137 types: 2 errors on main → none.
• Before/after recording at the end, in a real Next.js chat app.

AI use: written with Claude Code; I reviewed every line and verified it with the commands above and the recording.

Evidence: a real AI SDK 7 chat app (useChat + a streamText route, with Conversation / Message / PromptInput / Context installed via npx ai-elements add). The Context card reads the usage streamText reports on finish. The model is the AI SDK's own MockLanguageModelV4 (no provider key in my recording environment), reporting 3,000 reasoning and 3,072 cache-read tokens, which streamText returns in ai 7's nested shape. Left pane: which context.tsx the app is built from.

Before (context.tsx from main, byte-identical to npx ai-elements add context today): the card shows Input and Output only.

video.mp4

After (this branch): Reasoning 3K and Cache 3.1K rows appear.

video.mp4

[vercel]

@burrows99 is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.