clarified cache hit and miss msgs

app/components/chat/AssistantMessage.tsx

@@ -16,13 +16,20 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
     completionTokens: number;
     promptTokens: number;
     totalTokens: number;
-  } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
+    isCacheHit?: boolean;
+    isCacheMiss?: boolean;
+  } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value ?? undefined;
+
+  const cacheHitMsg = usage?.isCacheHit ? ' [Cache Hit]' : '';
+  const cacheMissMsg = usage?.isCacheMiss ? ' [Cache Miss]' : '';
 
   return (
     <div className="overflow-hidden w-full">
       {usage && (
         <div className="text-sm text-bolt-elements-textSecondary mb-2">
           Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+          <span className="text-sm text-green-500 ml-1">{cacheHitMsg}</span>
+          <span className="text-sm text-red-500 ml-1">{cacheMissMsg}</span>
         </div>
       )}
       <Markdown html>{content}</Markdown>

app/routes/api.chat.ts

@@ -64,6 +64,9 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         const cacheUsage = experimental_providerMetadata?.anthropic;
         console.debug({ cacheUsage });
 
+        const isCacheHit = !!cacheUsage?.cacheReadInputTokens;
+        const isCacheMiss = !!cacheUsage && !isCacheHit;
+
         if (usage) {
           cumulativeUsage.completionTokens += Math.round(usage.completionTokens || 0);
           cumulativeUsage.promptTokens += Math.round(
@@ -84,6 +87,8 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
                   completionTokens: cumulativeUsage.completionTokens,
                   promptTokens: cumulativeUsage.promptTokens,
                   totalTokens: cumulativeUsage.totalTokens,
+                  isCacheHit,
+                  isCacheMiss,
                 },
               });
             },