🤖 feat: show partial costs with unknown model indicator (#994)

When a conversation includes models with unknown pricing, show the
partial cost (from known models) with a **?** indicator and tooltip
explaining the cost may be incomplete.

## Before
If any model had unknown pricing → all costs became `undefined` → UI
showed "??"

## After
Known costs are summed → UI shows `$X.XX ?` with tooltip: "Cost may be
incomplete—some models in this session have unknown pricing"

## Changes
- Added `hasUnknownCosts` flag to `ChatUsageDisplay` interface
- Modified `sumUsageHistory` to keep partial costs instead of wiping to
undefined
- Added tooltip indicator in CostsTab when flag is set
- Added tests for multi-model cost calculation

_Generated with `mux`_

Author: ethanndickson

src/browser/components/RightSidebar/CostsTab.tsx

@@ -10,6 +10,7 @@ import { TOKEN_COMPONENT_COLORS } from "@/common/utils/tokens/tokenMeterUtils";
 import { ConsumerBreakdown } from "./ConsumerBreakdown";
 import { HorizontalThresholdSlider } from "./ThresholdSlider";
 import { useAutoCompactionSettings } from "@/browser/hooks/useAutoCompactionSettings";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 
 // Format token display - show k for thousands with 1 decimal
 const formatTokens = (tokens: number) =>
@@ -394,8 +395,19 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                             onChange={setViewMode}
                           />
                         </div>
-                        <span className="text-muted text-xs">
+                        <span className="text-muted flex items-center gap-1 text-xs">
                           {formatCostWithDollar(totalCost)}
+                          {displayUsage?.hasUnknownCosts && (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="text-warning cursor-help">?</span>
+                              </TooltipTrigger>
+                              <TooltipContent side="bottom" className="max-w-[200px]">
+                                Cost may be incomplete — some models in this session have unknown
+                                pricing
+                              </TooltipContent>
+                            </Tooltip>
+                          )}
                         </span>
                       </div>
                       <div className="relative w-full">

src/common/utils/tokens/displayUsage.test.ts

@@ -1,8 +1,8 @@
 import { describe, test, expect } from "bun:test";
 import { collectUsageHistory, createDisplayUsage } from "./displayUsage";
+import { sumUsageHistory, type ChatUsageDisplay } from "./usageAggregator";
 import { createMuxMessage, type MuxMessage } from "@/common/types/message";
 import type { LanguageModelV2Usage } from "@ai-sdk/provider";
-import type { ChatUsageDisplay } from "./usageAggregator";
 
 // Helper to create assistant message with usage
 const createAssistant = (
@@ -341,3 +341,78 @@ describe("createDisplayUsage", () => {
     });
   });
 });
+
+describe("multi-model cost calculation", () => {
+  test("calculates correct total cost across different models", () => {
+    // Create messages with different models and raw token counts
+    const claudeMsg = createAssistant(
+      "a1",
+      {
+        inputTokens: 10000,
+        outputTokens: 1000,
+        totalTokens: 11000,
+      },
+      "anthropic:claude-sonnet-4-5"
+    );
+
+    const gptMsg = createAssistant(
+      "a2",
+      {
+        inputTokens: 20000,
+        outputTokens: 2000,
+        totalTokens: 22000,
+      },
+      "openai:gpt-4o"
+    );
+
+    // Run through full pipeline
+    const usageHistory = collectUsageHistory([claudeMsg, gptMsg]);
+    const total = sumUsageHistory(usageHistory);
+
+    // Verify per-model costs are calculated correctly
+    // Claude: $3/M input, $15/M output
+    expect(usageHistory[0].input.cost_usd).toBeCloseTo(0.03); // 10k × $0.000003
+    expect(usageHistory[0].output.cost_usd).toBeCloseTo(0.015); // 1k × $0.000015
+
+    // GPT-4o: $2.50/M input, $10/M output
+    expect(usageHistory[1].input.cost_usd).toBeCloseTo(0.05); // 20k × $0.0000025
+    expect(usageHistory[1].output.cost_usd).toBeCloseTo(0.02); // 2k × $0.00001
+
+    // Verify total sums correctly
+    expect(total?.input.cost_usd).toBeCloseTo(0.08); // $0.03 + $0.05
+    expect(total?.output.cost_usd).toBeCloseTo(0.035); // $0.015 + $0.02
+    expect(total?.hasUnknownCosts).toBeFalsy();
+  });
+
+  test("flags hasUnknownCosts when one model has no pricing", () => {
+    const claudeMsg = createAssistant(
+      "a1",
+      {
+        inputTokens: 10000,
+        outputTokens: 1000,
+        totalTokens: 11000,
+      },
+      "anthropic:claude-sonnet-4-5"
+    );
+
+    const unknownMsg = createAssistant(
+      "a2",
+      {
+        inputTokens: 5000,
+        outputTokens: 500,
+        totalTokens: 5500,
+      },
+      "unknown:custom-model"
+    );
+
+    const usageHistory = collectUsageHistory([claudeMsg, unknownMsg]);
+    const total = sumUsageHistory(usageHistory);
+
+    // Claude costs should still be included
+    expect(total?.input.cost_usd).toBeCloseTo(0.03);
+    expect(total?.output.cost_usd).toBeCloseTo(0.015);
+
+    // Flag indicates incomplete total
+    expect(total?.hasUnknownCosts).toBe(true);
+  });
+});

src/common/utils/tokens/usageAggregator.ts

@@ -29,6 +29,9 @@ export interface ChatUsageDisplay {
 
   // Optional model field for display purposes (context window calculation, etc.)
   model?: string;
+
+  // True if any model in the sum had unknown pricing (costs are partial/incomplete)
+  hasUnknownCosts?: boolean;
 }
 
 /**
@@ -68,13 +71,9 @@ export function sumUsageHistory(usageHistory: ChatUsageDisplay[]): ChatUsageDisp
     }
   }
 
-  // If any costs were undefined, set all to undefined
+  // Flag if any costs were undefined (partial/incomplete total)
   if (hasUndefinedCosts) {
-    sum.input.cost_usd = undefined;
-    sum.cached.cost_usd = undefined;
-    sum.cacheCreate.cost_usd = undefined;
-    sum.output.cost_usd = undefined;
-    sum.reasoning.cost_usd = undefined;
+    sum.hasUnknownCosts = true;
   }
 
   return sum;