changeset

.changeset/shy-buckets-itch.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+add cache ui for open router and cline provider

src/api/providers/cline.ts

@@ -74,6 +74,8 @@ export class ClineHandler implements ApiHandler {
 			if (!didOutputUsage && chunk.usage) {
 				yield {
 					type: "usage",
+					cacheWriteTokens: 0,
+					cacheReadTokens: chunk.usage.prompt_tokens_details?.cached_tokens || 0,
 					inputTokens: chunk.usage.prompt_tokens || 0,
 					outputTokens: chunk.usage.completion_tokens || 0,
 					// @ts-ignore-next-line
@@ -105,6 +107,9 @@ export class ClineHandler implements ApiHandler {
 				const generation = response.data
 				return {
 					type: "usage",
+					// at this time there's no support for gatting cached_tokens from generation endpoint
+					cacheWriteTokens: 0,
+					cacheReadTokens: 0,
 					inputTokens: generation?.native_tokens_prompt || 0,
 					outputTokens: generation?.native_tokens_completion || 0,
 					totalCost: generation?.total_cost || 0,

src/api/providers/openrouter.ts

@@ -76,6 +76,8 @@ export class OpenRouterHandler implements ApiHandler {
 			if (!didOutputUsage && chunk.usage) {
 				yield {
 					type: "usage",
+					cacheWriteTokens: 0,
+					cacheReadTokens: chunk.usage.prompt_tokens_details?.cached_tokens || 0,
 					inputTokens: chunk.usage.prompt_tokens || 0,
 					outputTokens: chunk.usage.completion_tokens || 0,
 					// @ts-ignore-next-line
@@ -103,8 +105,9 @@ export class OpenRouterHandler implements ApiHandler {
 				// console.log("OpenRouter generation details:", generation)
 				return {
 					type: "usage",
-					// cacheWriteTokens: 0,
-					// cacheReadTokens: 0,
+					// at this time there's no support for gatting cached_tokens from generation endpoint
+					cacheWriteTokens: 0,
+					cacheReadTokens: 0,
 					// openrouter generation endpoint fails often
 					inputTokens: generation?.native_tokens_prompt || 0,
 					outputTokens: generation?.native_tokens_completion || 0,

webview-ui/src/components/chat/TaskHeader.tsx

@@ -138,6 +138,10 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	const shouldShowPromptCacheInfo =
 		doesModelSupportPromptCache && apiConfiguration?.apiProvider !== "openrouter" && apiConfiguration?.apiProvider !== "cline"
 
+	const shouldShowPromptCacheInfoClineOR =
+		doesModelSupportPromptCache &&
+		(apiConfiguration?.apiProvider === "openrouter" || apiConfiguration?.apiProvider === "cline")
+
 	const ContextWindowComponent = (
 		<>
 			{isTaskExpanded && contextWindow && (
@@ -406,6 +410,33 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 								)}
 							</div>
 
+							{shouldShowPromptCacheInfoClineOR && cacheReads !== undefined && (
+								<div
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: "4px",
+										flexWrap: "wrap",
+									}}>
+									<span style={{ fontWeight: "bold" }}>Cache:</span>
+									<span
+										style={{
+											display: "flex",
+											alignItems: "center",
+											gap: "3px",
+										}}>
+										<i
+											className="codicon codicon-arrow-right"
+											style={{
+												fontSize: "12px",
+												fontWeight: "bold",
+												marginBottom: 0,
+											}}
+										/>
+										{formatLargeNumber(cacheReads || 0)}
+									</span>
+								</div>
+							)}
 							{shouldShowPromptCacheInfo &&
 								(cacheReads !== undefined ||
 									cacheWrites !== undefined ||