fix(agent): Put most capable Claude at top

[Twixes]

Human tldr: Agent picker was showing Haiku first, then Sonnet, then Fable - not the most intuitively as a hierarchy.

---

Problem

The Claude model picker listed families most-capable-first in the DOM. But the picker dropdown opens upward (side="top") from the composer, so the first list item renders at the far top of the popup and the last item sits nearest the trigger where the eye lands — leaving the strongest model (Fable) visually stranded away from where you look. Raised in a Slack thread (link).

Changes

Inverted MODEL_FAMILY_ORDER to least-capable-first (haiku → sonnet → opus → fable). Because the menu opens upward, this renders Fable nearest the trigger — the visual top of the menu. Updated the picker-order unit tests to match.

How did you test this?

pnpm --filter @posthog/agent test — the compareModelsForPicker and applyAvailableModelsAllowlist suites pass with the new ordering (641 tests passed).

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

---

Created with PostHog from a Slack thread

[trunk-io]

😎 Merged manually by @charlesvien - details.

[github-actions]

React Doctor found no issues in the changed files. 🎉

_{Reviewed by React Doctor for commit 3c1407b.}

[greptile-apps]

_{Reviews (1): Last reviewed commit: "fix(agent): put Fable on top of the mode..." | Re-trigger Greptile}