feat(usage): add toggle to hide prediction rows on usage cards (#1420)

* feat(usage): add showPredValues setting to quota store

* feat(usage): register usageShowPredValues in settings sanitizers

* feat(usage): add i18n key for show predictions toggle

* feat(usage): add show predictions toggle to sidebar

* feat(usage): hide pred row by default, gate on showPredValues

* fix(usage): gate header dropdown PaceIndicator behind showPredValues

* fix(usage): gate VSCodeLayout PaceIndicator behind showPredValues

* fix(usage): correct indentation drift in Header.tsx PaceIndicator blocks

packages/ui/src/stores/useQuotaStore.ts

@@ -14,6 +14,7 @@ interface QuotaSettingsState {
   autoRefresh: boolean;
   refreshIntervalMs: number;
   displayMode: 'usage' | 'remaining';
+  showPredValues: boolean;
   dropdownProviderIds: QuotaProviderId[];
   selectedModels: Record<string, string[]>;  // Map of providerId -> selected model names
   expandedFamilies: Record<string, string[]>;  // Map of providerId -> EXPANDED family IDs (header dropdown - inverted)
@@ -34,6 +35,7 @@ interface QuotaStore extends QuotaSettingsState {
   setAutoRefresh: (enabled: boolean) => void;
   setRefreshInterval: (intervalMs: number) => void;
   setDisplayMode: (mode: 'usage' | 'remaining') => void;
+  setShowPredValues: (enabled: boolean) => void;
   setDropdownProviderIds: (providerIds: QuotaProviderId[]) => void;
   setSelectedModels: (providerId: string, modelNames: string[]) => void;
   toggleModelSelected: (providerId: string, modelName: string) => void;
@@ -53,6 +55,9 @@ const parseSettings = (data: Record<string, unknown> | null): QuotaSettingsState
       : DEFAULT_REFRESH_INTERVAL_MS;
 
   const displayMode = data?.usageDisplayMode === 'remaining' ? 'remaining' : 'usage';
+  const showPredValues = typeof data?.usageShowPredValues === 'boolean'
+    ? data.usageShowPredValues
+    : false;
   const rawDropdownProviders = Array.isArray(data?.usageDropdownProviders)
     ? data?.usageDropdownProviders
     : null;
@@ -88,6 +93,7 @@ const parseSettings = (data: Record<string, unknown> | null): QuotaSettingsState
     autoRefresh,
     refreshIntervalMs,
     displayMode,
+    showPredValues,
     dropdownProviderIds,
     selectedModels,
     expandedFamilies,
@@ -121,6 +127,7 @@ const loadSettingsFromRuntime = async (): Promise<QuotaSettingsState> => {
     autoRefresh: false,
     refreshIntervalMs: DEFAULT_REFRESH_INTERVAL_MS,
     displayMode: 'usage',
+    showPredValues: false,
     dropdownProviderIds: QUOTA_PROVIDERS.map((provider) => provider.id),
     selectedModels: {},
     expandedFamilies: {},
@@ -139,6 +146,7 @@ export const useQuotaStore = create<QuotaStore>()(
       autoRefresh: false,
       refreshIntervalMs: DEFAULT_REFRESH_INTERVAL_MS,
       displayMode: 'usage',
+      showPredValues: false,
       dropdownProviderIds: QUOTA_PROVIDERS.map((provider) => provider.id),
       selectedModels: {},
       expandedFamilies: {},
@@ -216,6 +224,7 @@ export const useQuotaStore = create<QuotaStore>()(
         set({ refreshIntervalMs: clamped });
       },
       setDisplayMode: (mode) => set({ displayMode: mode }),
+      setShowPredValues: (enabled) => set({ showPredValues: enabled }),
       setDropdownProviderIds: (providerIds) => set({ dropdownProviderIds: providerIds }),
 
       setSelectedModels: (providerId, modelNames) => {