Move cache information from header to footer to be consistent with cost/token data

Author: daniel-lxs

webview-ui/src/components/history/TaskItemFooter.tsx

@@ -33,6 +33,16 @@ const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelect
 			})}>
 			{isCompact ? (
 				<>
+					{/* Compact Cache */}
+					{!!item.cacheWrites && (
+						<span className="flex items-center gap-px" data-testid="cache-compact">
+							<i className="codicon codicon-database" style={metadataIconWithTextAdjustStyle} />
+							{formatLargeNumber(item.cacheWrites || 0)}
+							<i className="codicon codicon-arrow-right" style={metadataIconWithTextAdjustStyle} />
+							{formatLargeNumber(item.cacheReads || 0)}
+						</span>
+					)}
+					
 					{/* Compact Tokens */}
 					{(item.tokensIn || item.tokensOut) && (
 						<>
@@ -55,6 +65,21 @@ const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelect
 			) : (
 				<>
 					<div className="flex flex-col gap-1">
+						{/* Cache Info */}
+						{!!item.cacheWrites && (
+							<div className="flex items-center flex-wrap gap-x-1">
+								<span className="font-medium">{t("history:cacheLabel")}</span>
+								<span className="flex items-center gap-px" data-testid="cache-writes">
+									<i className="codicon codicon-database" style={metadataIconWithTextAdjustStyle} />
+									<span className="font-medium">{formatLargeNumber(item.cacheWrites || 0)}</span>
+								</span>
+								<span className="flex items-center gap-px" data-testid="cache-reads">
+									<i className="codicon codicon-arrow-right" style={metadataIconWithTextAdjustStyle} />
+									<span className="font-medium">{formatLargeNumber(item.cacheReads || 0)}</span>
+								</span>
+							</div>
+						)}
+						
 						{/* Full Tokens */}
 						{(item.tokensIn || item.tokensOut) && (
 							<div className="flex items-center flex-wrap gap-x-1">

webview-ui/src/components/history/TaskItemHeader.tsx

@@ -50,16 +50,6 @@ const TaskItemHeader: React.FC<TaskItemHeaderProps> = ({ item, variant, isSelect
 				<span className="text-vscode-descriptionForeground font-medium text-sm uppercase">
 					{formatDate(item.ts)}
 				</span>
-
-				{/* Cache Info */}
-				{!!item.cacheWrites && (
-					<span className="text-vscode-descriptionForeground flex items-center gap-px">
-						<i className="codicon codicon-database" style={metadataIconWithTextAdjustStyle} />
-						<span data-testid="cache-writes">{formatLargeNumber(item.cacheWrites || 0)}</span>
-						<i className="codicon codicon-arrow-right" style={metadataIconWithTextAdjustStyle} />
-						<span data-testid="cache-reads">{formatLargeNumber(item.cacheReads || 0)}</span>
-					</span>
-				)}
 			</div>
 
 			{/* Action Buttons */}