Record latency and pass through to webview

src/evaluator.ts

@@ -434,6 +434,7 @@ class Evaluator {
           text: resultText,
           prompt: row.prompt.raw,
           latencyMs: row.latencyMs,
+          tokenUsage: row.response?.tokenUsage,
         };
       },
     );

src/types.ts

@@ -105,6 +105,7 @@ export interface EvaluateTableOutput {
   text: string;
   prompt: string;
   latencyMs: number;
+  tokenUsage?: Partial<TokenUsage>;
 }
 
 export interface EvaluateTable {

src/web/client/src/ResultsTable.css

@@ -83,7 +83,17 @@ tr .cell-actions {
   font-size: 1.75rem;
 }
 
-tr:hover .cell-actions {
+tr .cell-detail {
+  visibility: hidden;
+  position: absolute;
+  bottom: 0.25rem;
+  margin-top: 1rem;
+  font-size: 0.75rem;
+  color: #888;
+}
+
+tr:hover .cell-actions,
+tr:hover .cell-detail {
   visibility: visible;
 }
 

src/web/client/src/ResultsTable.tsx

@@ -135,6 +135,16 @@ function EvalOutputCell({
         )}{' '}
         <TruncatedText text={text} maxLength={maxTextLength} />
       </div>
+      <div className="cell-detail">
+        {output.tokenUsage?.cached ? (
+          <span>{output.tokenUsage.cached} tokens (cached)</span>
+        ) : (
+          <>
+            {output.tokenUsage?.total && <span>{output.tokenUsage.total} tokens</span>} |{' '}
+            <span>{output.latencyMs} ms</span>
+          </>
+        )}
+      </div>
       <div className="cell-actions">
         {output.prompt && (
           <>

src/web/client/src/types.ts

@@ -1,3 +1,5 @@
+import { TokenUsage } from '../../../types';
+
 type Prompt = {
   display: string;
   raw: string;
@@ -13,6 +15,8 @@ export type EvalRowOutput = {
   score: number;
   text: string | object;
   prompt: string;
+  latencyMs: number;
+  tokenUsage?: Partial<TokenUsage>;
 };
 
 export type EvalRow = {

test/util.test.ts

@@ -190,7 +190,9 @@ describe('util', () => {
       },
       body: [
         {
-          outputs: [{ pass: true, score: 1.0, text: 'Test output', prompt: 'Test prompt' }],
+          outputs: [
+            { pass: true, score: 1.0, text: 'Test output', prompt: 'Test prompt', latencyMs: 1000 },
+          ],
           vars: ['value1', 'value2'],
         },
       ],
@@ -246,7 +248,9 @@ describe('util', () => {
       },
       body: [
         {
-          outputs: [{ pass: true, score: 1.0, text: 'Test output', prompt: 'Test prompt' }],
+          outputs: [
+            { pass: true, score: 1.0, text: 'Test output', prompt: 'Test prompt', latencyMs: 1000 },
+          ],
           vars: ['value1', 'value2'],
         },
       ],
@@ -302,7 +306,9 @@ describe('util', () => {
       },
       body: [
         {
-          outputs: [{ pass: true, score: 1.0, text: 'Test output', prompt: 'Test prompt' }],
+          outputs: [
+            { pass: true, score: 1.0, text: 'Test output', prompt: 'Test prompt', latencyMs: 1000 },
+          ],
           vars: ['value1', 'value2'],
         },
       ],