🤖 fix: include step providerMetadata in liveUsage for cache creation display

During streaming, liveUsage (context window display) showed 0 cache creation
tokens because it wasn't receiving providerMetadata. The cache creation token
count is Anthropic-specific and only available in providerMetadata.anthropic.
cacheCreationInputTokens, not in the standard LanguageModelV2Usage.

Thread step-level providerMetadata from backend through IPC to frontend,
mirroring the existing pattern for cumulative provider metadata.

_Generated with mux_

Author: ethanndickson

src/browser/stores/WorkspaceStore.ts

@@ -493,8 +493,13 @@ export class WorkspaceStore {
       const rawContextUsage = activeStreamId
         ? aggregator.getActiveStreamUsage(activeStreamId)
         : undefined;
+      const rawStepProviderMetadata = activeStreamId
+        ? aggregator.getActiveStreamStepProviderMetadata(activeStreamId)
+        : undefined;
       const liveUsage =
-        rawContextUsage && model ? createDisplayUsage(rawContextUsage, model) : undefined;
+        rawContextUsage && model
+          ? createDisplayUsage(rawContextUsage, model, rawStepProviderMetadata)
+          : undefined;
 
       // Live cost usage (cumulative across all steps, with accumulated cache creation tokens)
       const rawCumulativeUsage = activeStreamId

src/browser/utils/messages/StreamingMessageAggregator.ts

@@ -78,6 +78,8 @@ export class StreamingMessageAggregator {
   // Active stream step usage (updated on each stream-step event)
   // Tracks last step's usage for context window display
   private activeStreamStepUsage = new Map<string, LanguageModelV2Usage>();
+  // Tracks step provider metadata for context window cache display
+  private activeStreamStepProviderMetadata = new Map<string, Record<string, unknown>>();
   // Tracks cumulative usage across all steps for live cost display
   private activeStreamCumulativeUsage = new Map<string, LanguageModelV2Usage>();
   // Tracks cumulative provider metadata for live cost display (with cache creation tokens)
@@ -1061,6 +1063,7 @@ export class StreamingMessageAggregator {
   clearTokenState(messageId: string): void {
     this.deltaHistory.delete(messageId);
     this.activeStreamStepUsage.delete(messageId);
+    this.activeStreamStepProviderMetadata.delete(messageId);
     this.activeStreamCumulativeUsage.delete(messageId);
     this.activeStreamCumulativeProviderMetadata.delete(messageId);
   }
@@ -1071,6 +1074,10 @@ export class StreamingMessageAggregator {
   handleUsageDelta(data: UsageDeltaEvent): void {
     // Store last step's usage for context window display
     this.activeStreamStepUsage.set(data.messageId, data.usage);
+    // Store step provider metadata for context window cache display
+    if (data.providerMetadata) {
+      this.activeStreamStepProviderMetadata.set(data.messageId, data.providerMetadata);
+    }
     // Store cumulative usage for cost display
     this.activeStreamCumulativeUsage.set(data.messageId, data.cumulativeUsage);
     // Store cumulative provider metadata for live cost display (with cache creation tokens)
@@ -1104,4 +1111,11 @@ export class StreamingMessageAggregator {
   ): Record<string, unknown> | undefined {
     return this.activeStreamCumulativeProviderMetadata.get(messageId);
   }
+
+  /**
+   * Get step provider metadata for context window cache display
+   */
+  getActiveStreamStepProviderMetadata(messageId: string): Record<string, unknown> | undefined {
+    return this.activeStreamStepProviderMetadata.get(messageId);
+  }
 }

src/common/types/stream.ts

@@ -148,6 +148,8 @@ export interface UsageDeltaEvent {
   cumulativeUsage: LanguageModelV2Usage;
   // Cumulative provider metadata across all steps (for live cost display with cache tokens)
   cumulativeProviderMetadata?: Record<string, unknown>;
+  // This step's provider metadata (for context window cache display)
+  providerMetadata?: Record<string, unknown>;
 }
 
 export type AIServiceEvent =

src/node/services/streamManager.ts

@@ -972,6 +972,7 @@ export class StreamManager extends EventEmitter {
               usage: finishStepPart.usage, // For context window display
               cumulativeUsage: streamInfo.cumulativeUsage, // For live cost display
               cumulativeProviderMetadata: streamInfo.cumulativeProviderMetadata, // For live cache costs
+              providerMetadata: finishStepPart.providerMetadata, // For context window cache display
             };
             this.emit("usage-delta", usageEvent);
             break;