From 3c1407b05b11861a50b3b0a9a70e691f83822540 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michael@matloka.com>
Date: Tue, 21 Jul 2026 21:37:19 +0200
Subject: [PATCH] fix(agent): put Fable on top of the model picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Invert MODEL_FAMILY_ORDER so the family order is least-capable first. The picker
opens upward (side="top") from the composer, so items later in the list render
nearest the trigger and read as the top of the menu — this lands the most-capable
family (Fable) on top. Update the picker-order tests accordingly.

Generated-By: PostHog Code
Task-Id: ab97f429-92f1-4d95-8a32-ad67d14df18d
---
 .../src/adapters/claude/session/model-config.test.ts |  2 +-
 packages/agent/src/gateway-models.test.ts            | 12 +++++++-----
 packages/agent/src/gateway-models.ts                 |  7 +++++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/agent/src/adapters/claude/session/model-config.test.ts b/packages/agent/src/adapters/claude/session/model-config.test.ts
index 5561454baa..22fd0bcf69 100644
--- a/packages/agent/src/adapters/claude/session/model-config.test.ts
+++ b/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" },
     ]);
   });
 
diff --git a/packages/agent/src/gateway-models.test.ts b/packages/agent/src/gateway-models.test.ts
index 0c3b7a764a..e2ff4aafa3 100644
--- a/packages/agent/src/gateway-models.test.ts
+++ b/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",
     ]);
   });
diff --git a/packages/agent/src/gateway-models.ts b/packages/agent/src/gateway-models.ts
index 3acb52d534..116d9bd7d1 100644
--- a/packages/agent/src/gateway-models.ts
+++ b/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();