Improve AI cost dashboard ranges and breakdowns

frontend-modern/src/components/AI/AICostDashboard.tsx

@@ -1,4 +1,4 @@
-import { Component, Show, createMemo, createSignal, onMount, For } from 'solid-js';
+import { Component, Show, createMemo, createSignal, onMount, For, createEffect } from 'solid-js';
 import { Card } from '@/components/shared/Card';
 import { SectionHeader } from '@/components/shared/SectionHeader';
 import { AIAPI } from '@/api/ai';
@@ -15,11 +15,50 @@ const usdFormatter = new Intl.NumberFormat(undefined, {
   maximumFractionDigits: 2,
 });
 
+const budgetStorageKey = 'pulse_ai_cost_budget_usd_v1';
+
+const TinySparkline: Component<{
+  values: number[];
+  width?: number;
+  height?: number;
+  stroke?: string;
+}> = (props) => {
+  const width = () => props.width ?? 160;
+  const height = () => props.height ?? 28;
+  const stroke = () => props.stroke ?? '#22c55e';
+
+  const pathD = createMemo(() => {
+    const values = props.values;
+    const w = width();
+    const h = height();
+    if (!values || values.length === 0) return '';
+
+    const max = Math.max(...values, 0);
+    const safeMax = max <= 0 ? 1 : max;
+
+    const xStep = values.length <= 1 ? 0 : w / (values.length - 1);
+    let d = '';
+    values.forEach((v, idx) => {
+      const x = idx * xStep;
+      const y = h - (Math.max(0, v) / safeMax) * h;
+      d += `${idx === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)} `;
+    });
+    return d.trim();
+  });
+
+  return (
+    <svg width={width()} height={height()} viewBox={`0 0 ${width()} ${height()}`} class="block">
+      <path d={pathD()} fill="none" stroke={stroke()} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  );
+};
+
 export const AICostDashboard: Component = () => {
   const [days, setDays] = createSignal(30);
   const [loading, setLoading] = createSignal(false);
   const [loadError, setLoadError] = createSignal<string | null>(null);
   const [summary, setSummary] = createSignal<AICostSummary | null>(null);
+  const [budgetUSD, setBudgetUSD] = createSignal<string>('');
   let requestSeq = 0;
 
   const anyPricingKnown = createMemo(() => {
@@ -34,15 +73,29 @@ export const AICostDashboard: Component = () => {
     return data.totals.estimated_usd ?? 0;
   });
 
+  const useCaseMap = createMemo(() => {
+    const data = summary();
+    const map = new Map<string, { tokens: number; usd: number; pricingKnown: boolean }>();
+    if (!data) return map;
+    for (const uc of data.use_cases ?? []) {
+      map.set(uc.use_case, {
+        tokens: uc.total_tokens,
+        usd: uc.estimated_usd ?? 0,
+        pricingKnown: uc.pricing_known,
+      });
+    }
+    return map;
+  });
+
+  const dailyTokenValues = createMemo(() => (summary()?.daily_totals ?? []).map((d) => d.total_tokens));
+  const dailyUSDValues = createMemo(() => (summary()?.daily_totals ?? []).map((d) => d.estimated_usd ?? 0));
+
   const formatUSD = (usd: number) => usdFormatter.format(usd);
 
   const loadSummary = async (rangeDays: number) => {
     const seq = ++requestSeq;
     const isInitialLoad = summary() === null;
-    // Only show loading indicator on initial load to prevent flicker on range changes
+    setLoading(true);
-    if (isInitialLoad) {
-      setLoading(true);
-    }
     setLoadError(null);
     try {
       const data = await AIAPI.getCostSummary(rangeDays);
@@ -67,6 +120,40 @@ export const AICostDashboard: Component = () => {
     loadSummary(days());
   });
 
+  onMount(() => {
+    try {
+      const stored = localStorage.getItem(budgetStorageKey);
+      if (stored) setBudgetUSD(stored);
+    } catch (_err) {
+      // ignore
+    }
+  });
+
+  createEffect(() => {
+    const value = budgetUSD();
+    try {
+      if (!value) localStorage.removeItem(budgetStorageKey);
+      else localStorage.setItem(budgetStorageKey, value);
+    } catch (_err) {
+      // ignore
+    }
+  });
+
+  const parsedBudgetUSD = createMemo(() => {
+    const raw = budgetUSD().trim();
+    if (!raw) return null;
+    const n = Number(raw);
+    if (!Number.isFinite(n) || n <= 0) return null;
+    return n;
+  });
+
+  const isOverBudget = createMemo(() => {
+    const budget = parsedBudgetUSD();
+    const usd = estimatedTotalUSD();
+    if (budget == null || usd == null) return false;
+    return usd > budget;
+  });
+
   const handleRangeClick = (rangeDays: number) => {
     if (loading() || rangeDays === days()) return;
     setDays(rangeDays);
@@ -156,6 +243,18 @@ export const AICostDashboard: Component = () => {
           <div class="text-sm text-gray-500 dark:text-gray-400">Loading usage…</div>
         </Show>
 
+        <Show when={summary()?.truncated}>
+          <div class="text-xs px-3 py-2 rounded border border-blue-200 dark:border-blue-800/60 bg-blue-50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-100">
+            Showing the last {summary()?.effective_days} days due to a {summary()?.retention_days}-day retention window.
+          </div>
+        </Show>
+
+        <Show when={isOverBudget()}>
+          <div class="text-xs px-3 py-2 rounded border border-red-200 dark:border-red-800/60 bg-red-50 dark:bg-red-900/20 text-red-900 dark:text-red-100">
+            Estimated spend ({formatUSD(estimatedTotalUSD() ?? 0)}) is above your budget ({formatUSD(parsedBudgetUSD() ?? 0)}).
+          </div>
+        </Show>
+
         <Show when={loadError() && summary()}>
           <div class="flex items-center justify-between gap-3 text-xs px-3 py-2 rounded border border-amber-200 dark:border-amber-800/60 bg-amber-50 dark:bg-amber-900/20 text-amber-900 dark:text-amber-100">
             <div class="truncate">
@@ -209,6 +308,70 @@ export const AICostDashboard: Component = () => {
                 </div>
               </div>
 
+              <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
+                  <div class="text-xs text-gray-500 dark:text-gray-400">Chat</div>
+                  <div class="text-sm font-semibold text-gray-900 dark:text-white">
+                    {formatNumber(useCaseMap().get('chat')?.tokens ?? 0)} tokens
+                  </div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">
+                    <Show
+                      when={useCaseMap().get('chat')?.pricingKnown}
+                      fallback={<span>—</span>}
+                    >
+                      {formatUSD(useCaseMap().get('chat')?.usd ?? 0)}
+                    </Show>
+                  </div>
+                </div>
+                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
+                  <div class="text-xs text-gray-500 dark:text-gray-400">Patrol</div>
+                  <div class="text-sm font-semibold text-gray-900 dark:text-white">
+                    {formatNumber(useCaseMap().get('patrol')?.tokens ?? 0)} tokens
+                  </div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">
+                    <Show
+                      when={useCaseMap().get('patrol')?.pricingKnown}
+                      fallback={<span>—</span>}
+                    >
+                      {formatUSD(useCaseMap().get('patrol')?.usd ?? 0)}
+                    </Show>
+                  </div>
+                </div>
+                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
+                  <div class="text-xs text-gray-500 dark:text-gray-400">Budget (USD)</div>
+                  <input
+                    value={budgetUSD()}
+                    onInput={(e) => setBudgetUSD(e.currentTarget.value)}
+                    placeholder="e.g. 25"
+                    class="mt-1 w-full px-2 py-1 text-sm rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
+                  />
+                  <div class="text-[11px] text-gray-500 dark:text-gray-400 mt-1">
+                    Applies to selected range.
+                  </div>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
+                  <div class="flex items-center justify-between">
+                    <div class="text-xs text-gray-500 dark:text-gray-400">Daily estimated USD</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400">{data().daily_totals.length} points</div>
+                  </div>
+                  <div class="mt-2">
+                    <TinySparkline values={dailyUSDValues()} stroke="#10b981" />
+                  </div>
+                </div>
+                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
+                  <div class="flex items-center justify-between">
+                    <div class="text-xs text-gray-500 dark:text-gray-400">Daily total tokens</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400">{data().daily_totals.length} points</div>
+                  </div>
+                  <div class="mt-2">
+                    <TinySparkline values={dailyTokenValues()} stroke="#3b82f6" />
+                  </div>
+                </div>
+              </div>
+
               <div class="text-xs text-gray-500 dark:text-gray-400">
                 USD is an estimate based on public list prices. It may differ from billing.
               </div>

frontend-modern/src/types/ai.ts

@@ -189,9 +189,22 @@ export interface AICostDailySummary {
   estimated_usd?: number;
 }
 
+export interface AICostUseCaseSummary {
+  use_case: string;
+  input_tokens: number;
+  output_tokens: number;
+  total_tokens: number;
+  estimated_usd?: number;
+  pricing_known: boolean;
+}
+
 export interface AICostSummary {
   days: number;
+  retention_days: number;
+  effective_days: number;
+  truncated: boolean;
   provider_models: AICostProviderModelSummary[];
+  use_cases: AICostUseCaseSummary[];
   daily_totals: AICostDailySummary[];
   totals: AICostProviderModelSummary;
 }

internal/ai/cost/store.go

@@ -31,7 +31,7 @@ type Persistence interface {
 }
 
 // DefaultMaxDays is the default retention window for raw usage events.
-const DefaultMaxDays = 90
+const DefaultMaxDays = 365
 
 // Store provides thread-safe usage tracking with optional persistence.
 type Store struct {
@@ -100,7 +100,15 @@ func (s *Store) GetSummary(days int) Summary {
 	}
 
 	now := time.Now()
-	cutoff := now.AddDate(0, 0, -days)
+	retentionDays := s.maxDays
+	effectiveDays := days
+	truncated := false
+	if retentionDays > 0 && effectiveDays > retentionDays {
+		effectiveDays = retentionDays
+		truncated = true
+	}
+
+	cutoff := now.AddDate(0, 0, -effectiveDays)
 
 	s.mu.RLock()
 	events := make([]UsageEvent, 0, len(s.events))
@@ -188,12 +196,17 @@ func (s *Store) GetSummary(days int) Summary {
 	for _, pm := range providerModels {
 		if pm.PricingKnown {
 			totals.EstimatedUSD += pm.EstimatedUSD
+			totals.PricingKnown = true
 		}
 	}
 
 	return Summary{
 		Days:           days,
+		RetentionDays:  retentionDays,
+		EffectiveDays:  effectiveDays,
+		Truncated:      truncated,
 		ProviderModels: providerModels,
+		UseCases:       summarizeUseCases(events),
 		DailyTotals:    daily,
 		Totals:         totals,
 	}
@@ -312,10 +325,90 @@ type DailySummary struct {
 	EstimatedUSD float64 `json:"estimated_usd,omitempty"`
 }
 
+// UseCaseSummary is a rollup for a use-case (e.g. "chat", "patrol").
+type UseCaseSummary struct {
+	UseCase      string  `json:"use_case"`
+	InputTokens  int64   `json:"input_tokens"`
+	OutputTokens int64   `json:"output_tokens"`
+	TotalTokens  int64   `json:"total_tokens"`
+	EstimatedUSD float64 `json:"estimated_usd,omitempty"`
+	PricingKnown bool    `json:"pricing_known"`
+}
+
 // Summary is returned by the cost summary API.
 type Summary struct {
-	Days           int                    `json:"days"`
+	Days          int  `json:"days"`
+	RetentionDays int  `json:"retention_days"`
+	EffectiveDays int  `json:"effective_days"`
+	Truncated     bool `json:"truncated"`
+
 	ProviderModels []ProviderModelSummary `json:"provider_models"`
+	UseCases       []UseCaseSummary       `json:"use_cases"`
 	DailyTotals    []DailySummary         `json:"daily_totals"`
 	Totals         ProviderModelSummary   `json:"totals"`
 }
+
+func summarizeUseCases(events []UsageEvent) []UseCaseSummary {
+	type totals struct {
+		input  int64
+		output int64
+		usd    float64
+		known  bool
+	}
+
+	perUseCase := make(map[string]*totals)
+	for _, e := range events {
+		useCase := strings.TrimSpace(strings.ToLower(e.UseCase))
+		if useCase == "" {
+			useCase = "unknown"
+		}
+		t := perUseCase[useCase]
+		if t == nil {
+			t = &totals{}
+			perUseCase[useCase] = t
+		}
+
+		t.input += int64(e.InputTokens)
+		t.output += int64(e.OutputTokens)
+
+		provider := strings.ToLower(strings.TrimSpace(e.Provider))
+		model := normalizeModel(provider, e.RequestModel, e.ResponseModel)
+		provider, model = inferProviderAndModel(provider, model)
+
+		usd, known, _ := EstimateUSD(provider, model, int64(e.InputTokens), int64(e.OutputTokens))
+		if known {
+			t.usd += usd
+			t.known = true
+		}
+	}
+
+	out := make([]UseCaseSummary, 0, len(perUseCase))
+	for useCase, t := range perUseCase {
+		out = append(out, UseCaseSummary{
+			UseCase:      useCase,
+			InputTokens:  t.input,
+			OutputTokens: t.output,
+			TotalTokens:  t.input + t.output,
+			EstimatedUSD: t.usd,
+			PricingKnown: t.known,
+		})
+	}
+
+	order := map[string]int{
+		"chat":    0,
+		"patrol":  1,
+		"unknown": 2,
+	}
+	sort.Slice(out, func(i, j int) bool {
+		oi, okI := order[out[i].UseCase]
+		oj, okJ := order[out[j].UseCase]
+		if okI && okJ && oi != oj {
+			return oi < oj
+		}
+		if okI != okJ {
+			return okI
+		}
+		return out[i].UseCase < out[j].UseCase
+	})
+	return out
+}

internal/ai/cost/store_test.go

@@ -99,6 +99,18 @@ func TestSummaryGroupsByProviderModelAndDailyTotals(t *testing.T) {
 	if dailyGot[todayKey].InputTokens != 200 || dailyGot[todayKey].OutputTokens != 100 {
 		t.Fatalf("daily totals for %s wrong: %+v", todayKey, dailyGot[todayKey])
 	}
+
+	// Use-case rollups.
+	useCases := make(map[string]UseCaseSummary)
+	for _, uc := range summary.UseCases {
+		useCases[uc.UseCase] = uc
+	}
+	if useCases["chat"].TotalTokens != (110 + 55 + 200 + 100) {
+		t.Fatalf("chat use-case totals wrong: %+v", useCases["chat"])
+	}
+	if useCases["patrol"].TotalTokens != (20 + 10) {
+		t.Fatalf("patrol use-case totals wrong: %+v", useCases["patrol"])
+	}
 }
 
 func TestRetentionTrimsOldEvents(t *testing.T) {
@@ -119,6 +131,28 @@ func TestRetentionTrimsOldEvents(t *testing.T) {
 	}
 }
 
+func TestSummaryTruncationReflectsRetentionWindow(t *testing.T) {
+	store := NewStore(30)
+	now := time.Now()
+
+	store.Record(UsageEvent{
+		Timestamp:    now.Add(-10 * 24 * time.Hour),
+		Provider:     "openai",
+		RequestModel: "openai:gpt-4o",
+		InputTokens:  10,
+		OutputTokens: 10,
+		UseCase:      "chat",
+	})
+
+	summary := store.GetSummary(365)
+	if !summary.Truncated {
+		t.Fatalf("expected summary to be truncated when requesting beyond retention")
+	}
+	if summary.RetentionDays != 30 || summary.EffectiveDays != 30 {
+		t.Fatalf("unexpected retention/effective days: %+v", summary)
+	}
+}
+
 func TestEstimateUSDKnownAndUnknownModels(t *testing.T) {
 	usd, ok, _ := EstimateUSD("openai", "gpt-4o", 1_000_000, 2_000_000)
 	if !ok {

internal/ai/service.go

@@ -127,9 +127,19 @@ func (s *Service) GetCostSummary(days int) cost.Summary {
 		if days <= 0 {
 			days = 30
 		}
+		effectiveDays := days
+		truncated := false
+		if cost.DefaultMaxDays > 0 && days > cost.DefaultMaxDays {
+			effectiveDays = cost.DefaultMaxDays
+			truncated = true
+		}
 		return cost.Summary{
 			Days:           days,
+			RetentionDays:  cost.DefaultMaxDays,
+			EffectiveDays:  effectiveDays,
+			Truncated:      truncated,
 			ProviderModels: []cost.ProviderModelSummary{},
+			UseCases:       []cost.UseCaseSummary{},
 			DailyTotals:    []cost.DailySummary{},
 			Totals: cost.ProviderModelSummary{
 				Provider: "all",