fix: correct cache hit rate calculation and improve display format

.changeset/fix-cache-hit-rate.md

@@ -0,0 +1,6 @@
+---
+"@perstack/tui-components": patch
+"perstack": patch
+---
+
+Fix cache hit rate double-counting cached tokens in denominator and improve display format

packages/tui-components/src/execution/components/interface-panel.tsx

@@ -59,12 +59,11 @@ export const InterfacePanel = ({
           </Text>
           <Text dimColor>
             <Text>Tokens: </Text>
-            <Text>In {formattedInputTokens}</Text>
-            <Text> · Out {formattedOutputTokens}</Text>
             <Text>
-              {" "}
-              · Cache {formattedCachedInputTokens}/{cacheHitRate}%
+              In {formattedInputTokens} (Cached {formattedCachedInputTokens}, Cache Hit{" "}
+              {cacheHitRate}%)
             </Text>
+            <Text> · Out {formattedOutputTokens}</Text>
             {formattedReasoningTokens !== "0" ? (
               <Text> · Reasoning {formattedReasoningTokens}</Text>
             ) : null}

packages/tui-components/src/execution/hooks/use-delegation-tree.ts

@@ -449,11 +449,8 @@ export function useDelegationTree() {
     formattedOutputTokens: formatTokenCount(state.jobOutputTokens),
     providerName: state.providerName,
     cacheHitRate:
-      state.jobInputTokens + state.jobCachedInputTokens > 0
-        ? (
-            (state.jobCachedInputTokens / (state.jobInputTokens + state.jobCachedInputTokens)) *
-            100
-          ).toFixed(2)
+      state.jobInputTokens > 0
+        ? ((state.jobCachedInputTokens / state.jobInputTokens) * 100).toFixed(2)
         : "0.00",
   }
 }

packages/tui-components/src/log-viewer/components/log-info-content.tsx

@@ -44,8 +44,10 @@ function statusColor(status: string): string {
 
 export function JobInfoContent({ job }: { job: Job }): React.ReactNode {
   const duration = formatDuration(job.startedAt, job.finishedAt)
-  const totalInput = job.usage.inputTokens + (job.usage.cachedInputTokens ?? 0)
-  const cacheRate = totalInput > 0 ? ((job.usage.cachedInputTokens ?? 0) / totalInput) * 100 : 0
+  const cacheRate =
+    job.usage.inputTokens > 0
+      ? ((job.usage.cachedInputTokens ?? 0) / job.usage.inputTokens) * 100
+      : 0
   return (
     <>
       <Text wrap="truncate">
@@ -60,14 +62,16 @@ export function JobInfoContent({ job }: { job: Job }): React.ReactNode {
         {job.finishedAt ? ` · Finished ${formatShortDate(job.finishedAt)}` : ""}
       </Text>
       <Text dimColor wrap="truncate">
-        Tokens: In {formatTokenCount(job.usage.inputTokens)} · Out{" "}
-        {formatTokenCount(job.usage.outputTokens)}
+        Tokens: In {formatTokenCount(job.usage.inputTokens)}
         {(job.usage.cachedInputTokens ?? 0) > 0 ? (
           <>
-            {" · Cache "}
-            {formatTokenCount(job.usage.cachedInputTokens ?? 0)}/{cacheRate.toFixed(2)}%
+            {" "}
+            (Cached {formatTokenCount(job.usage.cachedInputTokens ?? 0)}, Cache Hit{" "}
+            {cacheRate.toFixed(2)}%)
           </>
         ) : null}
+        {" · Out "}
+        {formatTokenCount(job.usage.outputTokens)}
       </Text>
     </>
   )
@@ -112,19 +116,20 @@ export function RunInfoContent({
       ) : null}
       {treeNode ? (
         <Text dimColor wrap="truncate">
-          Tokens: In {formatTokenCount(treeNode.inputTokens)} · Out{" "}
-          {formatTokenCount(treeNode.outputTokens)}
+          Tokens: In {formatTokenCount(treeNode.inputTokens)}
           {treeNode.cachedInputTokens > 0 ? (
             <>
-              {" · Cache "}
-              {formatTokenCount(treeNode.cachedInputTokens)}/
-              {(
-                (treeNode.cachedInputTokens / (treeNode.inputTokens + treeNode.cachedInputTokens)) *
-                100
+              {" "}
+              (Cached {formatTokenCount(treeNode.cachedInputTokens)}, Cache Hit{" "}
+              {(treeNode.inputTokens > 0
+                ? (treeNode.cachedInputTokens / treeNode.inputTokens) * 100
+                : 0
               ).toFixed(2)}
-              %
+              %)
             </>
           ) : null}
+          {" · Out "}
+          {formatTokenCount(treeNode.outputTokens)}
         </Text>
       ) : null}
     </>