From b908bcd46a007d30d1b9ef55a4d76db10b691eff Mon Sep 17 00:00:00 2001
From: praxagent <tim@praxagent.ai>
Date: Wed, 29 Jul 2026 18:25:29 +0000
Subject: [PATCH] =?UTF-8?q?feat(graphs):=20cost=20badge=20on=20trace=20det?=
 =?UTF-8?q?ail=20=E2=80=94=20tokens=20tooltip,=20hidden=20when=20cost=20un?=
 =?UTF-8?q?known=20(never=20$0.00)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/panels/GraphPanel.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/components/panels/GraphPanel.tsx b/frontend/src/components/panels/GraphPanel.tsx
index c9d30ae..b3cc6c1 100644
--- a/frontend/src/components/panels/GraphPanel.tsx
+++ b/frontend/src/components/panels/GraphPanel.tsx
@@ -1113,6 +1113,17 @@ export function GraphPanel({ projectId, isVisible, onClose, focusTraceId }: Grap
                             source but never said when — so the one question you
                             open an old trace to answer was the one thing the
                             detail view could not tell you. */}
+                        {/* What the turn cost. None/undefined renders nothing:
+                            unknown pricing is not $0.00, and showing zero would
+                            claim the turn was free. */}
+                        {typeof (selectedGraph as any).cost_estimate_usd === 'number' && (
+                          <span
+                            className={`text-[11px] font-mono ${darkMode ? 'text-emerald-400' : 'text-emerald-600'}`}
+                            title={`≈ estimated from recorded token usage (${(selectedGraph as any).tokens_in ?? '?'} in / ${(selectedGraph as any).tokens_out ?? '?'} out)`}
+                          >
+                            ≈${(selectedGraph as any).cost_estimate_usd.toFixed(3)}
+                          </span>
+                        )}
                         {(() => {
                           const root = selectedGraph.nodes.find(
                             (n) => !n.parent_id ||