fix(ai-elements): read nested usage token details

- use ai v7 usage detail fields for reasoning and cache token counts.
- keep context usage cost rendering compatible with the updated SDK types.

web/default/src/components/ai-elements/context.tsx

@@ -347,7 +347,7 @@ export const ContextReasoningUsage = ({
 }: ContextReasoningUsageProps) => {
 }: ContextReasoningUsageProps) => {
   const { t } = useTranslation()
   const { t } = useTranslation()
   const { usage, modelId } = useContextValue()
   const { usage, modelId } = useContextValue()
-  const reasoningTokens = usage?.reasoningTokens ?? 0
+  const reasoningTokens = usage?.outputTokenDetails.reasoningTokens ?? 0
 
 
   if (children) {
   if (children) {
     return children
     return children
@@ -388,7 +388,7 @@ export const ContextCacheUsage = ({
 }: ContextCacheUsageProps) => {
 }: ContextCacheUsageProps) => {
   const { t } = useTranslation()
   const { t } = useTranslation()
   const { usage, modelId } = useContextValue()
   const { usage, modelId } = useContextValue()
-  const cacheTokens = usage?.cachedInputTokens ?? 0
+  const cacheTokens = usage?.inputTokenDetails.cacheReadTokens ?? 0
 
 
   if (children) {
   if (children) {
     return children
     return children