Centralize formatMetric utility in utils.ts

frontend/src/components/finops/workflow-compare-card.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react"
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { formatCost, formatLabel, formatPercent } from "@/lib/utils"
+import { formatCost, formatLabel, formatMetric, formatPercent } from "@/lib/utils"
 import type { QualityAttributionRow, WorkflowCostBreakdown } from "@/types/api"
 
 type CompareDimension = "workflow_archetype" | "workflow_fingerprint"
@@ -20,10 +20,6 @@ function displayLabel(value: string, dimension: CompareDimension) {
   return dimension === "workflow_archetype" ? formatLabel(value) : value
 }
 
-function formatMetric(value: number | null | undefined, digits = 1): string {
-  return value == null ? "-" : value.toFixed(digits)
-}
-
 export function WorkflowCompareCard({
   workflowCosts,
   qualityRows,

frontend/src/components/quality/claude-pr-comparison.tsx

@@ -1,7 +1,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { CardSkeleton } from "@/components/shared/loading-skeleton"
 import { useClaudePRComparison } from "@/hooks/use-api-queries"
-import { cn } from "@/lib/utils"
+import { cn, formatMetric } from "@/lib/utils"
 import { GitPullRequest } from "lucide-react"
 import type { PRGroupMetrics } from "@/types/api"
 
@@ -11,9 +11,9 @@ interface ClaudePRComparisonProps {
   endDate?: string
 }
 
-function formatMetric(value: number | null, suffix = ""): string {
-  if (value == null) return "-"
-  return `${value.toFixed(1)}${suffix}`
+function formatMetricWithSuffix(value: number | null, suffix = ""): string {
+  const base = formatMetric(value)
+  return base === "-" ? base : `${base}${suffix}`
 }
 
 function DeltaIndicator({ value }: { value: number | null }) {
@@ -56,8 +56,8 @@ function MetricRow({
   return (
     <div className="grid grid-cols-4 gap-4 border-b border-border py-3 last:border-0">
       <div className="text-sm text-muted-foreground">{label}</div>
-      <div className="text-sm font-medium">{formatMetric(claudeValue, suffix)}</div>
-      <div className="text-sm font-medium">{formatMetric(otherValue, suffix)}</div>
+      <div className="text-sm font-medium">{formatMetricWithSuffix(claudeValue, suffix)}</div>
+      <div className="text-sm font-medium">{formatMetricWithSuffix(otherValue, suffix)}</div>
       <div className="flex items-center">
         <DeltaIndicator value={displayDelta ?? null} />
       </div>

frontend/src/components/quality/quality-attribution-table.tsx

@@ -1,4 +1,4 @@
-import { formatLabel } from "@/lib/utils"
+import { formatLabel, formatMetric } from "@/lib/utils"
 import type { QualityAttributionRow } from "@/types/api"
 
 interface Props {
@@ -18,10 +18,6 @@ function formatPercent(value: number | null): string {
   return value == null ? "-" : `${(value * 100).toFixed(0)}%`
 }
 
-function formatMetric(value: number | null, digits = 1): string {
-  return value == null ? "-" : value.toFixed(digits)
-}
-
 export function QualityAttributionTable({ rows }: Props) {
   if (rows.length === 0) {
     return (

frontend/src/lib/utils.ts

@@ -33,6 +33,10 @@ export function formatLabel(value: string): string {
     .replace(/\b\w/g, (char) => char.toUpperCase())
 }
 
+export function formatMetric(value: number | null | undefined, digits = 1): string {
+  return value == null ? "-" : value.toFixed(digits)
+}
+
 export function formatPercent(value: number | null | undefined): string {
   if (value == null) return "-"
   return `${(value * 100).toFixed(0)}%`