Add per-model quotas with collapsible model groups in header (#355)

* feat(ui): show per-model quota groups in header with collapsible families Add per-model quota groups under each provider in the header Introduce collapsible sections for model families to reveal models Show all models when none are explicitly selected or respect explicit selections * feat: add toggle to UsageCard for dropdown visibility Introduce a switch in UsageCard to control inclusion in the dropdown Hide the percent label when the toggle is visible * feat(usage): enhance UsagePage with model grouping and collapsibles Add model lists grouped by family for the selected provider Enable collapsible sections per family to toggle visibility Apply and persist default model selections on provider change * feat(quota): add model family helpers Add utilities to categorize models into families by provider Enable grouping of models by family for header and usage pages Define default models for Gemini 3.x and Claude families * feat(desktop): extend settings with model grouping and selection Track per-provider selected models for usage Allow collapsing and expanding families in the usage page Support per-provider custom model groups with labels and assignments * feat: persist usage preferences in persistence Persist usageSelectedModels per provider Persist usageCollapsedFamilies and usageExpandedFamilies states Support custom usageModelGroups with groups and assignments * feat: track selected quota models and expanded families per provider Initialize selectedModels and expandedFamilies state for quota providers Add actions to set, toggle, and apply default model selections and expanded families Persist selections to desktop settings and apply defaults on load * feat(server): sanitize usage model configuration in settings update Validate and sanitize usage selections per provider Persist only valid usageCollapsedFamilies and usageExpandedFamilies in settings Enforce limits on custom model groups and model assignments * feat: add collapsible model families in header Add collapsible sections for model families within each provider in the header Show per-model usage with percent display and a progress bar Toggle expansion via arrow icons and preserve expanded state per provider * fix(ui): treat explicit per-provider model selections correctly in header Enable showing all models by default when a provider has no explicit selection Recognize an explicit per-provider selection when a provider key exists in selectedModels Filter to selected models only if an explicit selection is present for the provider
2026-02-08 15:42:15 +02:00
parent a630b8860e
commit 7af81c2436
8 changed files with 910 additions and 69 deletions
@@ -1128,6 +1128,114 @@ const sanitizeSettingsUpdate = (payload) => {
    result.skillCatalogs = skillCatalogs;
  }

+  // Usage model selections - which models appear in dropdown
+  if (candidate.usageSelectedModels && typeof candidate.usageSelectedModels === 'object') {
+    const sanitized = {};
+    for (const [providerId, models] of Object.entries(candidate.usageSelectedModels)) {
+      if (typeof providerId === 'string' && Array.isArray(models)) {
+        const validModels = models.filter((m) => typeof m === 'string' && m.length > 0);
+        if (validModels.length > 0) {
+          sanitized[providerId] = validModels;
+        }
+      }
+    }
+    if (Object.keys(sanitized).length > 0) {
+      result.usageSelectedModels = sanitized;
+    }
+  }
+
+  // Usage page collapsed families - for "Other Models" section
+  if (candidate.usageCollapsedFamilies && typeof candidate.usageCollapsedFamilies === 'object') {
+    const sanitized = {};
+    for (const [providerId, families] of Object.entries(candidate.usageCollapsedFamilies)) {
+      if (typeof providerId === 'string' && Array.isArray(families)) {
+        const validFamilies = families.filter((f) => typeof f === 'string' && f.length > 0);
+        if (validFamilies.length > 0) {
+          sanitized[providerId] = validFamilies;
+        }
+      }
+    }
+    if (Object.keys(sanitized).length > 0) {
+      result.usageCollapsedFamilies = sanitized;
+    }
+  }
+
+  // Header dropdown expanded families (inverted - stores EXPANDED, default all collapsed)
+  if (candidate.usageExpandedFamilies && typeof candidate.usageExpandedFamilies === 'object') {
+    const sanitized = {};
+    for (const [providerId, families] of Object.entries(candidate.usageExpandedFamilies)) {
+      if (typeof providerId === 'string' && Array.isArray(families)) {
+        const validFamilies = families.filter((f) => typeof f === 'string' && f.length > 0);
+        if (validFamilies.length > 0) {
+          sanitized[providerId] = validFamilies;
+        }
+      }
+    }
+    if (Object.keys(sanitized).length > 0) {
+      result.usageExpandedFamilies = sanitized;
+    }
+  }
+
+  // Custom model groups configuration
+  if (candidate.usageModelGroups && typeof candidate.usageModelGroups === 'object') {
+    const sanitized = {};
+    for (const [providerId, config] of Object.entries(candidate.usageModelGroups)) {
+      if (typeof providerId !== 'string') continue;
+
+      const providerConfig = {};
+
+      // customGroups: array of {id, label, models, order}
+      if (Array.isArray(config.customGroups)) {
+        const validGroups = config.customGroups
+          .filter((g) => g && typeof g.id === 'string' && typeof g.label === 'string')
+          .map((g) => ({
+            id: g.id.slice(0, 64),
+            label: g.label.slice(0, 128),
+            models: Array.isArray(g.models)
+              ? g.models.filter((m) => typeof m === 'string').slice(0, 500)
+              : [],
+            order: typeof g.order === 'number' ? g.order : 0,
+          }));
+        if (validGroups.length > 0) {
+          providerConfig.customGroups = validGroups;
+        }
+      }
+
+      // modelAssignments: Record<modelName, groupId>
+      if (config.modelAssignments && typeof config.modelAssignments === 'object') {
+        const assignments = {};
+        for (const [model, groupId] of Object.entries(config.modelAssignments)) {
+          if (typeof model === 'string' && typeof groupId === 'string') {
+            assignments[model] = groupId;
+          }
+        }
+        if (Object.keys(assignments).length > 0) {
+          providerConfig.modelAssignments = assignments;
+        }
+      }
+
+      // renamedGroups: Record<groupId, label>
+      if (config.renamedGroups && typeof config.renamedGroups === 'object') {
+        const renamed = {};
+        for (const [groupId, label] of Object.entries(config.renamedGroups)) {
+          if (typeof groupId === 'string' && typeof label === 'string') {
+            renamed[groupId] = label.slice(0, 128);
+          }
+        }
+        if (Object.keys(renamed).length > 0) {
+          providerConfig.renamedGroups = renamed;
+        }
+      }
+
+      if (Object.keys(providerConfig).length > 0) {
+        sanitized[providerId] = providerConfig;
+      }
+    }
+    if (Object.keys(sanitized).length > 0) {
+      result.usageModelGroups = sanitized;
+    }
+  }
+
  return result;
 };