fix: resolve critical bugs in LLM cost tracking implementation

- Fix NameError in MetricsService.get_cost_summary() where observer
  variable was referenced before assignment; refetch from session directly
- Add missing threshold= arg to CostThresholdExceededEvent constructor
  in SessionMetricsObserver (would raise TypeError at runtime)
- Fix publish() -> publish_event() call on event bus in base_observer
- Add LLM event fields to GalaxyEvent interface; remove (event as any)
  casts in handleLLMMetricsUpdate and handleCostAlert handlers
- Log failed LLMCallEvent emissions at DEBUG instead of silently swallowing
- Use stable composite key in RecentCallsTable rows instead of array index
- Fix JSX formatting in RightPanel: </div>} -> </div>\n)} style
- Update CostByModelChart docstring to reflect generic key usage

Author: nuthalapativarun

galaxy/session/observers/base_observer.py

@@ -383,8 +383,9 @@ async def _handle_llm_call_event(self, event: LLMCallEvent) -> None:
                 event_type=EventType.COST_THRESHOLD_EXCEEDED,
                 session_id=self.metrics["session_id"],
                 total_cost=llm["total_cost"],
+                threshold=self._cost_alert_threshold,
             )
-            await get_event_bus().publish(threshold_event)
+            await get_event_bus().publish_event(threshold_event)
 
     def get_metrics(self) -> Dict[str, Any]:
         """

galaxy/webui/frontend/src/components/layout/RightPanel.tsx

@@ -120,7 +120,8 @@ const RightPanel: React.FC = () => {
       )}
 
       {/* Constellation Overview - Top half */}
-      {!isCostView && <div className="flex flex-1 min-h-0 flex-col gap-3 rounded-[28px] border border-white/10 bg-gradient-to-br from-[rgba(11,30,45,0.88)] via-[rgba(8,20,35,0.85)] to-[rgba(6,15,28,0.88)] p-4 overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.4),0_2px_8px_rgba(147,51,234,0.12),inset_0_1px_1px_rgba(255,255,255,0.08)] ring-1 ring-inset ring-white/5">
+      {!isCostView && (
+      <div className="flex flex-1 min-h-0 flex-col gap-3 rounded-[28px] border border-white/10 bg-gradient-to-br from-[rgba(11,30,45,0.88)] via-[rgba(8,20,35,0.85)] to-[rgba(6,15,28,0.88)] p-4 overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.4),0_2px_8px_rgba(147,51,234,0.12),inset_0_1px_1px_rgba(255,255,255,0.08)] ring-1 ring-inset ring-white/5">
         <div className="flex items-center justify-between flex-shrink-0">
           <div className="flex items-center gap-3">
             <Network className="h-5 w-5 text-purple-400 drop-shadow-[0_0_8px_rgba(147,51,234,0.5)]" aria-hidden />
@@ -155,10 +156,12 @@ const RightPanel: React.FC = () => {
             variant="embedded"
           />
         </div>
-      </div>}
+      </div>
+      )}
 
       {/* TaskStar List or Task Detail - Bottom half */}
-      {!isCostView && <div className="flex flex-1 min-h-0 flex-col gap-3 rounded-[28px] border border-white/10 bg-gradient-to-br from-[rgba(11,30,45,0.88)] via-[rgba(8,20,35,0.85)] to-[rgba(6,15,28,0.88)] p-4 overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.4),0_2px_8px_rgba(6,182,212,0.12),inset_0_1px_1px_rgba(255,255,255,0.08)] ring-1 ring-inset ring-white/5">
+      {!isCostView && (
+      <div className="flex flex-1 min-h-0 flex-col gap-3 rounded-[28px] border border-white/10 bg-gradient-to-br from-[rgba(11,30,45,0.88)] via-[rgba(8,20,35,0.85)] to-[rgba(6,15,28,0.88)] p-4 overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.4),0_2px_8px_rgba(6,182,212,0.12),inset_0_1px_1px_rgba(255,255,255,0.08)] ring-1 ring-inset ring-white/5">
         {activeTask ? (
           <TaskDetailPanel
             task={activeTask}
@@ -181,7 +184,8 @@ const RightPanel: React.FC = () => {
             </div>
           </>
         )}
-      </div>}
+      </div>
+      )}
     </div>
   );
 };

galaxy/webui/frontend/src/components/metrics/CostByModelChart.tsx

@@ -8,7 +8,7 @@ interface BarChartProps {
 
 /**
  * Horizontal bar chart rendered with pure Tailwind CSS.
- * Used to show cost broken down by model name or agent type.
+ * Used to show cost broken down by a string key (model name, agent type, etc.).
  */
 const CostByModelChart: React.FC<BarChartProps> = ({
   data,

galaxy/webui/frontend/src/components/metrics/CostDashboard.tsx

@@ -66,7 +66,7 @@ const RecentCallsTable: React.FC<RecentCallsTableProps> = ({ calls }) => {
         </thead>
         <tbody className="divide-y divide-white/5">
           {recent.map((call, i) => (
-            <tr key={i} className="text-slate-300 hover:bg-white/5 transition">
+            <tr key={`${call.timestamp}-${call.model}-${i}`} className="text-slate-300 hover:bg-white/5 transition">
               <td className="py-1.5 font-mono text-slate-400">{formatTs(call.timestamp)}</td>
               <td className="py-1.5 max-w-[80px] truncate" title={call.agent_type}>
                 {call.agent_type}

galaxy/webui/frontend/src/main.tsx

@@ -500,20 +500,20 @@ const handleLLMMetricsUpdate = (event: GalaxyEvent) => {
   const store = useGalaxyStore.getState();
   const call: LLMCallRecord = {
     agent_type: event.agent_type || 'unknown',
-    model: (event as any).model || 'unknown',
-    prompt_tokens: (event as any).prompt_tokens ?? 0,
-    completion_tokens: (event as any).completion_tokens ?? 0,
-    cost: (event as any).cost ?? 0,
-    duration_ms: (event as any).duration_ms ?? 0,
+    model: event.model || 'unknown',
+    prompt_tokens: event.prompt_tokens ?? 0,
+    completion_tokens: event.completion_tokens ?? 0,
+    cost: event.cost ?? 0,
+    duration_ms: event.duration_ms ?? 0,
     timestamp: safeTimestamp(event),
   };
   store.appendLLMCall(call);
 };
 
 const handleCostAlert = (event: GalaxyEvent) => {
   const store = useGalaxyStore.getState();
-  const totalCost: number = (event as any).total_cost ?? 0;
-  const threshold: number = (event as any).threshold ?? 0;
+  const totalCost: number = event.total_cost ?? 0;
+  const threshold: number = event.threshold ?? 0;
   store.pushNotification({
     id: `cost-alert-${Date.now()}`,
     title: 'Cost threshold exceeded',

galaxy/webui/frontend/src/services/websocket.ts

@@ -28,6 +28,15 @@ export interface GalaxyEvent {
   message?: string;
   session_name?: string;
   task_name?: string;
+  // LLM metrics events
+  model?: string;
+  prompt_tokens?: number;
+  completion_tokens?: number;
+  cost?: number;
+  duration_ms?: number;
+  // Cost threshold events
+  total_cost?: number;
+  threshold?: number;
 }
 
 export type EventCallback = (event: GalaxyEvent) => void;

galaxy/webui/services/metrics_service.py

@@ -66,11 +66,18 @@ def get_cost_summary(self) -> Optional[Dict[str, Any]]:
 
         :return: Cost summary dict or None.
         """
-        llm = self._get_llm_metrics()
+        session = self._app_state.galaxy_session
+        if session is None:
+            return None
+
+        observer = getattr(session, "_metrics_observer", None)
+        if observer is None:
+            return None
+
+        llm = observer.metrics.get("llm_metrics")
         if llm is None:
             return None
 
-        session = self._app_state.galaxy_session
         session_id: str = observer.metrics.get("session_id", "unknown")
 
         raw_calls: List[Dict[str, Any]] = llm.get("calls", [])

ufo/llm/llm_call.py

@@ -140,5 +140,5 @@ def _emit_llm_call_event(agent_type, model: str, cost_result, duration_ms: float
             loop.create_task(bus.publish_event(event))
         except RuntimeError:
             asyncio.run(bus.publish_event(event))
-    except Exception:
-        pass
+    except Exception as exc:
+        logging.getLogger(__name__).debug("LLMCallEvent emit failed: %s", exc)