From 17384e83b78b89b9f4bedec2e29fc11697ba152e Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 30 Jan 2026 13:37:01 -0800
Subject: [PATCH] UI show cost breakdown fields

---
 .../src/components/view_logs/CostBreakdownViewer.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/view_logs/CostBreakdownViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/CostBreakdownViewer.tsx
index affe28e0b25..505f03360b4 100644
--- a/ui/litellm-dashboard/src/components/view_logs/CostBreakdownViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/CostBreakdownViewer.tsx
@@ -7,6 +7,7 @@ export interface CostBreakdown {
   output_cost?: number;
   total_cost?: number;
   tool_usage_cost?: number;
+  additional_costs?: Record<string, number>;
   original_cost?: number;
   discount_percent?: number;
   discount_amount?: number;
@@ -88,6 +89,17 @@ export const CostBreakdownViewer: React.FC<CostBreakdownViewerProps> = ({
                   <span className="text-gray-900">{formatCost(costBreakdown.tool_usage_cost)}</span>
                 </div>
               )}
+              {/* Additional Costs (free-form) */}
+              {costBreakdown.additional_costs && Object.keys(costBreakdown.additional_costs).length > 0 && (
+                <>
+                  {Object.entries(costBreakdown.additional_costs).map(([key, value]) => (
+                    <div key={key} className="flex text-sm">
+                      <span className="text-gray-600 font-medium w-1/3">{key}:</span>
+                      <span className="text-gray-900">{formatCost(value)}</span>
+                    </div>
+                  ))}
+                </>
+              )}
             </div>
 
             {/* Subtotal / Original Cost */}