feat: add anthropic models

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -392,6 +392,7 @@
       "DESCRIPTION": "Select AI models for different features.",
       "SELECT_MODEL": "Select model",
       "CREDITS_PER_MESSAGE": "{credits} credit/message",
+      "COMING_SOON": "Coming Soon",
       "EDITOR": {
         "TITLE": "Editor Features",
         "DESCRIPTION": "Powers smart compose, grammar corrections, tone adjustments, and content enhancement in your message editor."

app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue

@@ -26,7 +26,7 @@ const emit = defineEmits(['change']);
 
 const PROVIDER_ICONS = {
   openai: 'i-logos-openai-icon',
-  anthropic: 'i-logos-claude-icon',
+  anthropic: 'i-logos-anthropic-icon',
   mistral: 'i-logos-mistral-icon',
   gemini: 'i-logos-gemini-icon',
 };
@@ -135,7 +135,10 @@ const selectModel = model => {
           :key="model.id"
           :click="() => selectModel(model)"
           class="rounded-lg hover:bg-n-alpha-1"
-          :class="{ 'bg-n-alpha-2': selectedModelId === model.id }"
+          :class="{
+            'bg-n-alpha-2': selectedModelId === model.id,
+            'pointer-events-none opacity-60': model.coming_soon,
+          }"
         >
           <div class="flex gap-2 w-full">
             <Icon
@@ -154,7 +157,10 @@ const selectModel = model => {
                   {{ t('GENERAL.PREFERRED') }}
                 </span>
               </div>
-              <span class="text-xs text-n-slate-11">
+              <span v-if="model.coming_soon" class="text-xs text-n-slate-11">
+                {{ t('CAPTAIN_SETTINGS.MODEL_CONFIG.COMING_SOON') }}
+              </span>
+              <span v-else class="text-xs text-n-slate-11">
                 {{ getCreditLabel(model) }}
               </span>
             </div>

app/javascript/dashboard/store/captain/config.js

@@ -16,7 +16,16 @@ const getters = {
   getUIFlags: $state => $state.uiFlags,
   getModelsForFeature: $state => featureKey => {
     const feature = $state.features[featureKey];
-    return feature?.models || [];
+    const models = feature?.models || [];
+
+    return [...models].sort((a, b) => {
+      // Move coming_soon items to the end
+      if (a.coming_soon && !b.coming_soon) return 1;
+      if (!a.coming_soon && b.coming_soon) return -1;
+
+      // Sort by credit_multiplier (highest first)
+      return (b.credit_multiplier || 0) - (a.credit_multiplier || 0);
+    });
   },
   getDefaultModelForFeature: $state => featureKey => {
     const feature = $state.features[featureKey];