feat(conversation): show per-message token costs and conversation totals in Conversation tab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: yarin-mag

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marionette-server",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "private": true,
   "type": "module",
   "bin": {

apps/server/src/controllers/agents.controller.ts

@@ -80,25 +80,51 @@ export class AgentsController {
       eventRepo.findWithFilters({ agentId, type: "llm.call", limit: 1000 }),
     ]);
 
-    // Build lookup: "run_id:ts" → tokens
-    const llmMap = new Map<string, any>();
+    // Build per-run ordered list of llm.call token objects (sorted oldest→newest).
+    // The Nth llm.call in a run corresponds to the Nth assistant conversation.turn in that run.
+    const llmByRun = new Map<string, Array<{ tokens: unknown; ts: string }>>();
     for (const e of llmEvents) {
-      if (e.tokens && e.run_id && e.ts) {
-        llmMap.set(`${e.run_id}:${e.ts}`, e.tokens);
-      }
+      if (!e.run_id || !e.tokens) continue;
+      if (!llmByRun.has(e.run_id)) llmByRun.set(e.run_id, []);
+      llmByRun.get(e.run_id)!.push({ tokens: e.tokens, ts: e.ts ?? "" });
+    }
+    for (const arr of llmByRun.values()) {
+      arr.sort((a, b) => (a.ts < b.ts ? -1 : a.ts > b.ts ? 1 : 0));
     }
 
+    // Track how many assistant turns we've matched per run so we can index into the llm list.
+    const assistantCountByRun = new Map<string, number>();
+
     const turns = turnEvents.reverse().flatMap((e) => {
       const rawTurn = e.payload as Record<string, unknown> | null;
       if (!rawTurn || typeof rawTurn.role !== "string") return []; // skip malformed
       const turn = rawTurn as unknown as ConversationTurn;
-      if (turn.role === "assistant") {
-        const tokens = llmMap.get(`${e.run_id}:${e.ts}`);
-        if (tokens) return [{ ...turn, tokens }];
+      if (turn.role === "assistant" && e.run_id) {
+        const idx = assistantCountByRun.get(e.run_id) ?? 0;
+        assistantCountByRun.set(e.run_id, idx + 1);
+        const llmEntry = llmByRun.get(e.run_id)?.[idx];
+        if (llmEntry) return [{ ...turn, tokens: llmEntry.tokens }];
       }
       return [turn];
     });
 
-    res.json({ turns, total: turns.length });
+    // Compute conversation-level token totals across all matched llm.call events.
+    const allRunIds = [...new Set(turnEvents.map((e) => e.run_id).filter(Boolean))];
+    let totalInputTokens = 0, totalOutputTokens = 0, totalCostUsd = 0;
+    for (const runId of allRunIds) {
+      for (const entry of llmByRun.get(runId as string) ?? []) {
+        const t = entry.tokens as Record<string, number> | null;
+        if (!t) continue;
+        totalInputTokens  += t.input_tokens  ?? 0;
+        totalOutputTokens += t.output_tokens ?? 0;
+        totalCostUsd      += t.cost_usd      ?? 0;
+      }
+    }
+
+    res.json({
+      turns,
+      total: turns.length,
+      totals: { input_tokens: totalInputTokens, output_tokens: totalOutputTokens, cost_usd: totalCostUsd },
+    });
   }
 }

apps/web/src/features/agents/components/AgentConversationPanel.tsx

@@ -2,13 +2,21 @@ import { useEffect, useRef } from 'react';
 import { Loader2, AlertCircle } from 'lucide-react';
 import { useAgentConversation } from '../hooks/useAgentConversation';
 import { ConversationMessage } from './ConversationMessage';
+import { formatTokens } from '../../../lib/utils';
+
+function formatCost(usd: number): string {
+  if (!isFinite(usd) || usd === 0) return "$0.00";
+  if (usd < 0.001) return `$${usd.toFixed(6)}`;
+  if (usd < 0.01) return `$${usd.toFixed(4)}`;
+  return `$${usd.toFixed(3)}`;
+}
 
 interface AgentConversationPanelProps {
   agentId: string;
 }
 
 export function AgentConversationPanel({ agentId }: AgentConversationPanelProps) {
-  const { turns, isLoading, error } = useAgentConversation(agentId);
+  const { turns, totals, isLoading, error } = useAgentConversation(agentId);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -26,14 +34,29 @@ export function AgentConversationPanel({ agentId }: AgentConversationPanelProps)
     );
   }
 
+  const hasTotals = totals && (totals.input_tokens > 0 || totals.output_tokens > 0);
+
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
       <div className="p-4 border-b bg-card">
         <h2 className="text-lg font-semibold">Conversation</h2>
-        <p className="text-sm text-muted-foreground">
-          {turns.length} {turns.length === 1 ? 'message' : 'messages'}
-        </p>
+        <div className="flex items-center gap-3 flex-wrap">
+          <p className="text-sm text-muted-foreground">
+            {turns.length} {turns.length === 1 ? 'message' : 'messages'}
+          </p>
+          {hasTotals && (
+            <>
+              <span className="text-muted-foreground/40 text-xs">·</span>
+              <span className="text-xs text-muted-foreground tabular-nums">
+                ↑ {formatTokens(totals.input_tokens)} · ↓ {formatTokens(totals.output_tokens)}
+              </span>
+              <span className="text-xs text-emerald-500/80 tabular-nums font-medium">
+                {formatCost(totals.cost_usd)}
+              </span>
+            </>
+          )}
+        </div>
       </div>
 
       {/* Error banner */}

apps/web/src/features/agents/hooks/useAgentConversation.ts

@@ -9,15 +9,23 @@ export interface EnrichedConversationTurn extends ConversationTurn {
   tokens?: TokenUsage;
 }
 
+export interface ConversationTotals {
+  input_tokens: number;
+  output_tokens: number;
+  cost_usd: number;
+}
+
 interface UseAgentConversationResult {
   turns: EnrichedConversationTurn[];
+  totals: ConversationTotals | null;
   isLoading: boolean;
   error: string | null;
 }
 
 export function useAgentConversation(agentId: string): UseAgentConversationResult {
   const isDemoMode = useDemoMode();
   const [turns, setTurns] = useState<EnrichedConversationTurn[]>([]);
+  const [totals, setTotals] = useState<ConversationTotals | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -37,6 +45,7 @@ export function useAgentConversation(agentId: string): UseAgentConversationResul
         const data = await res.json();
         if (cancelled) return;
         setTurns(data.turns || []);
+        setTotals(data.totals ?? null);
       } catch (err) {
         if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load conversation');
       } finally {
@@ -48,5 +57,5 @@ export function useAgentConversation(agentId: string): UseAgentConversationResul
     return () => { cancelled = true; };
   }, [agentId, isDemoMode]);
 
-  return { turns, isLoading, error };
+  return { turns, totals, isLoading, error };
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "marionette",
   "private": true,
-  "version": "1.2.5",
+  "version": "1.2.6",
   "packageManager": "pnpm@9.0.0",
   "workspaces": [
     "apps/*",