feat(logs): show cache read and write token counts (#9620)

This commit is contained in:
diegosouzapw
2026-08-10 07:19:39 -03:00
parent 61014aec52
commit e6a4dfc72b
4 changed files with 200 additions and 6 deletions

View File

@@ -1,6 +1,7 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { useTranslations } from "next-intl";
import {
PROVIDER_COLORS,
getHttpStatusStyle as getStatusStyle,
@@ -196,6 +197,8 @@ export default function RequestLoggerDetail({
relatedLogs = [],
onSelectRelated,
}) {
const tCache = useTranslations("cache");
// Close on Escape key
useEffect(() => {
const handler = (e) => {
@@ -519,12 +522,16 @@ export default function RequestLoggerDetail({
<span className="px-2 py-0.5 rounded bg-primary/20 text-primary text-xs font-bold">
Total In: {formatTokenValue(tokenStats.totalIn)}
</span>
<span className="px-2 py-0.5 rounded bg-sky-500/20 text-sky-700 dark:text-sky-400 text-xs font-bold">
Cache Read: {formatTokenValue(tokenStats.cacheRead)}
</span>
<span className="px-2 py-0.5 rounded bg-amber-500/20 text-amber-700 dark:text-amber-400 text-xs font-bold">
Cache Write: {formatTokenValue(tokenStats.cacheWrite)}
</span>
{tokenStats.cacheRead != null && tokenStats.cacheRead > 0 && (
<span className="px-2 py-0.5 rounded bg-sky-500/20 text-sky-700 dark:text-sky-400 text-xs font-bold">
{tCache("cachedTokensCol")}: {formatTokenValue(tokenStats.cacheRead)}
</span>
)}
{tokenStats.cacheWrite != null && tokenStats.cacheWrite > 0 && (
<span className="px-2 py-0.5 rounded bg-amber-500/20 text-amber-700 dark:text-amber-400 text-xs font-bold">
{tCache("cacheCreation")}: {formatTokenValue(tokenStats.cacheWrite)}
</span>
)}
{tokenStats.compressed != null &&
tokenStats.compressed > 0 &&
(() => {

View File

@@ -95,6 +95,7 @@ const RequestLoggerV2 = forwardRef<RequestLoggerV2Handle, { initialSelectedId?:
(props, ref) => {
const { initialSelectedId } = props as any;
const t = useTranslations("requestLogger");
const tCache = useTranslations("cache");
const { emailsVisible } = useEmailPrivacyStore();
// Get translated status filters
@@ -1514,6 +1515,30 @@ const RequestLoggerV2 = forwardRef<RequestLoggerV2Handle, { initialSelectedId?:
<span className="text-emerald-700 dark:text-emerald-400">
{log.tokens?.out?.toLocaleString() || 0}
</span>
{log.tokens?.cacheRead != null && log.tokens.cacheRead > 0 && (
<>
<span className="mx-1 text-border">|</span>
<span className="text-text-muted">CR:</span>{" "}
<span
className="text-sky-700 dark:text-sky-400"
title={tCache("cachedTokensCol")}
>
{log.tokens.cacheRead.toLocaleString()}
</span>
</>
)}
{log.tokens?.cacheWrite != null && log.tokens.cacheWrite > 0 && (
<>
<span className="mx-1 text-border">|</span>
<span className="text-text-muted">CW:</span>{" "}
<span
className="text-amber-700 dark:text-amber-400"
title={tCache("cacheCreation")}
>
{log.tokens.cacheWrite.toLocaleString()}
</span>
</>
)}
{log.tokens?.compressed != null && log.tokens.compressed > 0 && (
<>
<span className="mx-1 text-border">|</span>