feat(dashboard): wire cost panels to real /v1/cost/* API endpoints

Wires cost analytics panels to real API data. Adds getCostSummary and getCostByModel to API client. Recovery from botched remerge of #3281.

Author: OneStepAt4time

dashboard/src/api/client.ts

@@ -35,6 +35,8 @@ import type {
   AnalyticsSummary,
   RateLimitAnalyticsResponse,
   AnalyticsCostsResponse,
+  CostSummaryResponse,
+  CostByModelResponse,
 } from '../types';
 import type {
   AuditChainMetadata,
@@ -297,6 +299,24 @@ export function getAnalyticsCosts(): Promise<AnalyticsCostsResponse> {
   return request('/v1/analytics/costs');
 }
 
+/** GET /v1/cost/summary — Aggregate cost with burn rate. */
+export function getCostSummary(params?: { from?: string; to?: string }): Promise<CostSummaryResponse> {
+  const searchParams = new URLSearchParams();
+  if (params?.from) searchParams.set("from", params.from);
+  if (params?.to) searchParams.set("to", params.to);
+  const qs = searchParams.toString();
+  return request(`/v1/cost/summary${qs ? `?${qs}` : ""}`);
+}
+
+/** GET /v1/cost/by-model — Cost grouped by model. */
+export function getCostByModel(params?: { from?: string; to?: string }): Promise<CostByModelResponse> {
+  const searchParams = new URLSearchParams();
+  if (params?.from) searchParams.set("from", params.from);
+  if (params?.to) searchParams.set("to", params.to);
+  const qs = searchParams.toString();
+  return request(`/v1/cost/by-model${qs ? `?${qs}` : ""}`);
+}
+
 // ── Sessions ────────────────────────────────────────────────────
 
 interface GetSessionsOptions {

dashboard/src/pages/CostPage.tsx

@@ -26,8 +26,8 @@ import { useStore } from '../store/useStore';
 import { formatCurrency } from '../utils/formatNumber';
 import { formatDateShort } from '../utils/formatDate';
 import { ChartFrame } from '../components/shared/ChartFrame';
-import { getAnalyticsCosts } from '../api/client';
-import type { AnalyticsCostsResponse } from '../types';
+import { getAnalyticsCosts, getCostSummary, getCostByModel } from '../api/client';
+import type { AnalyticsCostsResponse, CostSummaryResponse, CostByModelResponse } from '../types';
 import { BudgetProgressBar } from '../components/shared/BudgetProgressBar';
 import { SpendSummary } from '../components/cost/SpendSummary';
 import { ForecastChart } from '../components/cost/ForecastChart';
@@ -166,12 +166,20 @@ export default function CostPage() {
   const [isLoading, setIsLoading] = useState(true);
   const [dataError, setDataError] = useState<string | null>(null);
   const [timeRange, setTimeRange] = useState<TimeRange>('30d');
+  const [costSummary, setCostSummary] = useState<CostSummaryResponse | null>(null);
+  const [costByModel, setCostByModel] = useState<CostByModelResponse | null>(null);
   const sseConnected = useStore((s) => s.sseConnected);
 
   const fetchData = useCallback(async () => {
     try {
-      const data = await getAnalyticsCosts();
-      setCostData(data);
+      const [data, summary, byModel] = await Promise.allSettled([
+        getAnalyticsCosts(),
+        getCostSummary().catch(() => null),
+        getCostByModel().catch(() => null),
+      ]);
+      if (data.status === 'fulfilled') setCostData(data.value);
+      if (summary.status === 'fulfilled' && summary.value) setCostSummary(summary.value);
+      if (byModel.status === 'fulfilled' && byModel.value) setCostByModel(byModel.value);
       setDataError(null);
     } catch (err) {
       setDataError(err instanceof Error ? err.message : 'Failed to load cost data');
@@ -375,19 +383,24 @@ export default function CostPage() {
         <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <h2 className="text-lg font-medium text-[var(--color-text-primary)]">
             Cost Analytics
+            {costSummary?.burnRateUsdPerHour && costSummary.burnRateUsdPerHour > 0 && (
+              <span className="ml-3 text-sm font-normal text-[var(--color-accent-cyan)]">
+                {formatCurrency(costSummary.burnRateUsdPerHour)}/hr burn rate
+              </span>
+            )}
           </h2>
           <TimeRangePicker value={timeRange} onChange={setTimeRange} />
         </div>
 
         {/* Burn rate — full width */}
         <div className="mb-4">
-          <BurnRateChart />
+          <BurnRateChart data={dailyData.map(d => ({ date: d.date, cost: d.estimatedCostUsd }))} />
         </div>
 
         {/* Token breakdown + Cost by model — side by side */}
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           <TokenBreakdownChart />
-          <CostByModelChart />
+          <CostByModelChart data={costByModel?.models.map(m => ({ model: m.model, cost: m.estimatedCostUsd }))} />
         </div>
       </section>
 

dashboard/src/types/index.ts

@@ -213,3 +213,39 @@ export interface WsResizeMessage {
 
 export type WsOutboundMessage = WsInputMessage | WsResizeMessage;
 
+
+// ── Cost Tracking API (Issue #3264, #3273) ─────────────────────
+
+/** Response from GET /v1/cost/summary */
+export interface CostSummaryResponse {
+  from: string | null;
+  to: string | null;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCacheCreationTokens: number;
+  totalCacheReadTokens: number;
+  cacheHitRate: number;
+  estimatedCostUsd: number;
+  burnRateUsdPerHour: number | null;
+  sessions: number;
+}
+
+/** Per-model cost entry from GET /v1/cost/by-model */
+export interface ModelCostEntry {
+  model: string;
+  inputTokens: number;
+  outputTokens: number;
+  cacheCreationTokens: number;
+  cacheReadTokens: number;
+  estimatedCostUsd: number;
+  cacheHitRate: number;
+}
+
+/** Response from GET /v1/cost/by-model */
+export interface CostByModelResponse {
+  from: string | null;
+  to: string | null;
+  models: ModelCostEntry[];
+  totalModels: number;
+  totalCostUsd: number;
+}