Function NoCodeMetrics

examples/ts-code-mode-web/src/components/ContextSavings.tsx:204–297

({
  totalBytes,
  llmCalls,
  totalContextBytes,
  averageContextBytes,
  totalTimeMs,
  model,
}: NoCodeMetricsProps)

}

export function NoCodeMetrics({
  totalBytes,
  llmCalls,
  totalContextBytes,
  averageContextBytes,
  totalTimeMs,
  model,
}: NoCodeMetricsProps) {
  const [isOpen, setIsOpen] = useState(false)
  const estimatedTimeMs = estimateRoundTripTimeMs(llmCalls)
  const resolvedTimeMs = totalTimeMs ?? estimatedTimeMs
  const estimatedCost = estimateCostFromBytes(totalBytes, model)

  if (totalBytes <= 0 || llmCalls <= 0) return null

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg hover:bg-gray-700/50 transition-colors"
        title="Chat Metrics"
      >
        <Info className="w-3.5 h-3.5 text-cyan-500" />
        <span className="text-xs text-gray-400 font-medium">Chat metrics</span>
      </button>

      {isOpen && (
        <>
          <div
            className="fixed inset-0 z-40"
            onClick={() => setIsOpen(false)}
          />

          <div className="absolute right-0 top-full mt-2 w-80 bg-gray-900 border border-gray-700 rounded-xl shadow-xl z-50 overflow-hidden">
            <div className="px-4 py-3 border-b border-gray-700/50">
              <h3 className="font-medium text-gray-200">Chat Metrics</h3>
            </div>

            <div className="p-4 space-y-4">
              <ValueRow
                label="Message Size"
                value={formatBytes(totalBytes)}
                description="Final serialized size of the messages array."
              />
              {typeof totalContextBytes === 'number' &&
                totalContextBytes > 0 && (
                  <ValueRow
                    label="Context Bytes (Total)"
                    value={formatBytes(totalContextBytes)}
                    description="Accumulated context size across LLM calls."
                  />
                )}
              {typeof averageContextBytes === 'number' &&
                averageContextBytes > 0 && (
                  <ValueRow
                    label="Context Bytes (Avg)"
                    value={formatBytes(averageContextBytes)}
                    description="Average context size per LLM call."