fix(agent): Put most capable Claude at top (#3658)

Author: Twixes

packages/agent/src/adapters/claude/session/model-config.test.ts

@@ -26,8 +26,8 @@ describe("applyAvailableModelsAllowlist", () => {
         "claude-opus-4-8",
       ]).options,
     ).toEqual([
-      { value: "claude-opus-4-8", name: "Claude Opus 4.8" },
       { value: "claude-sonnet-4-6", name: "Claude Sonnet 4.6" },
+      { value: "claude-opus-4-8", name: "Claude Opus 4.8" },
     ]);
   });
 

packages/agent/src/gateway-models.test.ts

@@ -132,7 +132,9 @@ describe("getClaudeModelRecency", () => {
 });
 
 describe("compareModelsForPicker", () => {
-  it("groups models by family, most capable first, newest version first", () => {
+  it("groups models by family least capable first, newest version first", () => {
+    // The picker opens upward, so least-capable-first DOM order puts the most
+    // capable family (Fable) nearest the trigger — the visual top of the menu.
     // Models as the gateway might return them — arbitrary order.
     const gatewayOrder = [
       "claude-fable-5",
@@ -145,12 +147,12 @@ describe("compareModelsForPicker", () => {
     ];
     const displayed = [...gatewayOrder].sort(compareModelsForPicker);
     expect(displayed).toEqual([
-      "claude-fable-5",
-      "claude-opus-4-8",
-      "claude-opus-4-7",
+      "claude-haiku-4-5",
       "claude-sonnet-5",
       "claude-sonnet-4-6",
-      "claude-haiku-4-5",
+      "claude-opus-4-8",
+      "claude-opus-4-7",
+      "claude-fable-5",
       "claude-mystery",
     ]);
   });

packages/agent/src/gateway-models.ts

@@ -279,8 +279,11 @@ export function getClaudeModelRecency(modelId: string): number {
   return major * 1000 + minor;
 }
 
-// Families ordered most-capable first; unknown families sort last.
-const MODEL_FAMILY_ORDER = ["fable", "opus", "sonnet", "haiku"];
+// Families ordered least-capable first. The picker opens upward (side="top")
+// from the composer, so items later in this list render nearer the trigger and
+// read as the top of the menu — this puts the most-capable family (Fable) on
+// top. Unknown families sort after all known ones.
+const MODEL_FAMILY_ORDER = ["haiku", "sonnet", "opus", "fable"];
 
 function getModelFamilyRank(modelId: string): number {
   const id = modelId.toLowerCase();