fix(webui): clarify aggregate turn token usage

This commit is contained in:
chengyongru
2026-08-23 04:24:43 +08:00
parent 3852956a71
commit 1581544b7f
2 changed files with 26 additions and 4 deletions
+19
View File
@@ -192,9 +192,11 @@ function compactDuration(milliseconds: number): string {
function TurnUsageMeta({
usage,
latencyMs,
contextWindowTokens,
}: {
usage: TurnUsage;
latencyMs?: number;
contextWindowTokens?: number;
}) {
const { t } = useTranslation();
const prompt = usage.prompt_tokens;
@@ -210,10 +212,26 @@ function TurnUsageMeta({
) {
parts.push(`${Math.round(Math.min(1, usage.cached_tokens / prompt) * 100)}% cached`);
}
if (typeof usage.request_count === "number" && usage.request_count > 1) {
parts.push(t("message.usage.requests", {
count: usage.request_count,
defaultValue: "{{count}} calls this turn",
}));
}
if (typeof latencyMs === "number" && latencyMs >= 0) parts.push(compactDuration(latencyMs));
if (parts.length === 0) return null;
const details: string[] = [];
if (typeof usage.context_tokens === "number" && usage.context_tokens >= 0) {
const capacity = typeof contextWindowTokens === "number" && contextWindowTokens > 0
? ` / ${formatCompactTokenCount(contextWindowTokens)}`
: "";
details.push(t("message.usage.context", {
tokens: `${approximate}${formatCompactTokenCount(usage.context_tokens)}`,
capacity,
defaultValue: "Context now: {{tokens}}{{capacity}}",
}));
}
if (approximate) {
details.push(t("message.usage.estimated", { defaultValue: "Includes estimated usage" }));
}
@@ -621,6 +639,7 @@ export function MessageBubble({
<TurnUsageMeta
usage={message.usage!}
latencyMs={message.latencyMs}
contextWindowTokens={message.contextWindowTokens}
/>
) : null}
{showAssistantTimestamp ? (
+7 -4
View File
@@ -1013,7 +1013,7 @@ describe("MessageBubble", () => {
expect(screen.queryByLabelText("File attachment")).not.toBeInTheDocument();
});
it("keeps turn usage focused on the completed reply", () => {
it("distinguishes aggregate turn usage from the latest context", () => {
const message: UIMessage = {
id: "a-usage",
role: "assistant",
@@ -1032,10 +1032,13 @@ describe("MessageBubble", () => {
render(<MessageBubble message={message} />);
const usage = screen.getByText("12.4K in · 823 out · 78% cached · 18s");
const usage = screen.getByText("12.4K in · 823 out · 78% cached · 3 calls this turn · 18s");
expect(usage).toHaveAttribute("data-turn-usage");
expect(usage).not.toHaveAttribute("tabindex");
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
expect(usage).toHaveAttribute("tabindex", "0");
fireEvent.focus(usage);
expect(screen.getByRole("tooltip")).toHaveTextContent("Context now: 8.1K / 128K");
});
it("marks estimated usage and omits cache when the provider did not report it", () => {