feat: add Usage tab to detail drawer for model blocks

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/helpers.ts

@@ -187,6 +187,19 @@ export function hasModelUsage(
   )
 }
 
+export function completionRate(
+  block: ModelBlockWithUsage & PdlBlockWithTiming,
+) {
+  return (
+    block.pdl__usage.completion_tokens /
+    ((block.pdl__timing.end_nanos - block.pdl__timing.start_nanos) / 1000000000)
+  )
+}
+
+export function ptcRatio(block: ModelBlockWithUsage) {
+  return block.pdl__usage.prompt_tokens / block.pdl__usage.completion_tokens
+}
+
 /** Does the given block have context/background information? */
 export function hasContextInformation(
   block: unknown | PdlBlock,

pdl-live-react/src/view/detail/DrawerContentBody.tsx

@@ -3,13 +3,15 @@ import { Tab, TabTitleText } from "@patternfly/react-core"
 
 const BlockNotFound = lazy(() => import("./BlockNotFound"))
 const DefContent = lazy(() => import("./DefContent"))
+const UsageTabContent = lazy(() => import("./UsageTabContent"))
 const SourceTabContent = lazy(() => import("./SourceTabContent"))
 const ContextTabContent = lazy(() => import("./ContextTabContent"))
 const SummaryTabContent = lazy(() => import("./SummaryTabContent"))
 const RawTraceTabContent = lazy(() => import("./RawTraceTabContent"))
 
 import {
   hasContextInformation,
+  hasModelUsage,
   hasResult,
   type NonScalarPdlBlock as Model,
 } from "../../helpers"
@@ -54,6 +56,18 @@ function blockBody(block: Model) {
     )
   }
 
+  if (hasModelUsage(block)) {
+    tabs.splice(
+      1,
+      0,
+      <Tab key={4} eventKey={4} title={<TabTitleText>Usage</TabTitleText>}>
+        <Suspense>
+          <UsageTabContent block={block} />
+        </Suspense>
+      </Tab>,
+    )
+  }
+
   return tabs
 }
 

pdl-live-react/src/view/detail/UsageTabContent.tsx

@@ -0,0 +1,55 @@
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTerm,
+} from "@patternfly/react-core"
+
+import {
+  completionRate,
+  ptcRatio,
+  type ModelBlockWithUsage,
+  type PdlBlockWithTiming,
+} from "../../helpers"
+
+export default function UsageTabContent({
+  block,
+}: {
+  block: ModelBlockWithUsage & PdlBlockWithTiming
+}) {
+  return <DescriptionList>{descriptionItems(block)}</DescriptionList>
+}
+
+function descriptionItems(block: ModelBlockWithUsage & PdlBlockWithTiming) {
+  return (
+    <>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Completion Rate</DescriptionListTerm>
+        <DescriptionListDescription>
+          {completionRate(block).toFixed(0)} tokens/sec
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Prompt/Completion Ratio</DescriptionListTerm>
+        <DescriptionListDescription>
+          {(ptcRatio(block) * 100).toFixed(2)}%
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Prompt Tokens Consumed</DescriptionListTerm>
+        <DescriptionListDescription>
+          {block.pdl__usage.prompt_tokens}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Completion Tokens Consumed</DescriptionListTerm>
+        <DescriptionListDescription>
+          {block.pdl__usage.completion_tokens}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </>
+  )
+}

pdl-live-react/src/view/masonry/model.ts

@@ -11,6 +11,7 @@ import {
   hasTimingInformation,
   capitalizeAndUnSnakeCase,
   extractStructuredModelResponse,
+  completionRate,
   type NonScalarPdlBlock,
 } from "../../helpers"
 
@@ -91,17 +92,11 @@ export default function computeModel(block: import("../../pdl_ast").PdlBlock) {
 
             footer2Key:
               hasModelUsage(block) && block.pdl__usage
-                ? "Tokens/sec"
+                ? "Completion Rate"
                 : undefined,
             footer2Value:
               hasModelUsage(block) && block.pdl__usage
-                ? (
-                    (block.pdl__usage.completion_tokens +
-                      block.pdl__usage.prompt_tokens) /
-                    ((block.pdl__timing.end_nanos -
-                      block.pdl__timing.start_nanos) /
-                      1000000000)
-                  ).toFixed(0)
+                ? completionRate(block).toFixed(0) + " tokens/sec"
                 : undefined,
 
             stability,