From 552fc1955d24189504b9714734c1b9a48a75b25e Mon Sep 17 00:00:00 2001
From: burrows99 <raunakburrows@gmail.com>
Date: Mon, 12 Oct 2026 12:44:12 +0100
Subject: [PATCH] fix(context): read reasoning and cache tokens from the nested
 usage details

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 compile and
the Reasoning and Cache rows never render.

Read outputTokenDetails.reasoningTokens and inputTokenDetails.cacheReadTokens
instead. They exist from ai 6.0.105, the lowest version the package allows.

Fixes #500
---
 packages/elements/__tests__/context.test.tsx |  8 ++++----
 packages/elements/src/context.tsx            |  4 ++--
 packages/examples/src/context.tsx            | 11 +++++++++--
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/elements/__tests__/context.test.tsx b/packages/elements/__tests__/context.test.tsx
index 2c2d6fbc..558e150f 100644
--- a/packages/elements/__tests__/context.test.tsx
+++ b/packages/elements/__tests__/context.test.tsx
@@ -263,7 +263,7 @@ describe("contextReasoningUsage", () => {
         defaultOpen
         maxTokens={100}
         modelId="gpt-4"
-        usage={{ reasoningTokens: 10 }}
+        usage={{ outputTokenDetails: { reasoningTokens: 10 } }}
         usedTokens={50}
       >
         <ContextContent>
@@ -279,7 +279,7 @@ describe("contextReasoningUsage", () => {
       <Context
         defaultOpen
         maxTokens={100}
-        usage={{ reasoningTokens: 10 }}
+        usage={{ outputTokenDetails: { reasoningTokens: 10 } }}
         usedTokens={10}
       >
         <ContextContent>
@@ -320,7 +320,7 @@ describe("contextCacheUsage", () => {
         defaultOpen
         maxTokens={100}
         modelId="gpt-4"
-        usage={{ cachedInputTokens: 20 }}
+        usage={{ inputTokenDetails: { cacheReadTokens: 20 } }}
         usedTokens={50}
       >
         <ContextContent>
@@ -336,7 +336,7 @@ describe("contextCacheUsage", () => {
       <Context
         defaultOpen
         maxTokens={100}
-        usage={{ cachedInputTokens: 20 }}
+        usage={{ inputTokenDetails: { cacheReadTokens: 20 } }}
         usedTokens={20}
       >
         <ContextContent>
diff --git a/packages/elements/src/context.tsx b/packages/elements/src/context.tsx
index 53e28851..9d48fd12 100644
--- a/packages/elements/src/context.tsx
+++ b/packages/elements/src/context.tsx
@@ -336,7 +336,7 @@ export const ContextReasoningUsage = ({
   ...props
 }: ContextReasoningUsageProps) => {
   const { usage, modelId } = useContextValue();
-  const reasoningTokens = usage?.reasoningTokens ?? 0;
+  const reasoningTokens = usage?.outputTokenDetails?.reasoningTokens ?? 0;
 
   if (children) {
     return children;
@@ -376,7 +376,7 @@ export const ContextCacheUsage = ({
   ...props
 }: ContextCacheUsageProps) => {
   const { usage, modelId } = useContextValue();
-  const cacheTokens = usage?.cachedInputTokens ?? 0;
+  const cacheTokens = usage?.inputTokenDetails?.cacheReadTokens ?? 0;
 
   if (children) {
     return children;
diff --git a/packages/examples/src/context.tsx b/packages/examples/src/context.tsx
index b0711cde..d6cc2076 100644
--- a/packages/examples/src/context.tsx
+++ b/packages/examples/src/context.tsx
@@ -19,10 +19,17 @@ const Example = () => (
       maxTokens={128_000}
       modelId="openai:gpt-5"
       usage={{
-        cachedInputTokens: 0,
+        inputTokenDetails: {
+          cacheReadTokens: 0,
+          cacheWriteTokens: 0,
+          noCacheTokens: 32_000,
+        },
         inputTokens: 32_000,
+        outputTokenDetails: {
+          reasoningTokens: 0,
+          textTokens: 8000,
+        },
         outputTokens: 8000,
-        reasoningTokens: 0,
         totalTokens: 40_000,
       }}
       usedTokens={40_000}