authorgravatar for me@t3.ggTheo Browne <me@t3.gg> 2026-08-02 00:45:05-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-02 00:45:05-07:00
loge60821f0e0d82a5d671ca3b94719c49d333921c8
treedcf6fbf3dc97bb657e179a0b701d63b188e4ecc7
parent64bf0161919ec0e41470af3304928d9fc8711bf4
signature Signed by PGP key B5690EEEBB952194

feat: fold legacy models into separate menus (#5190)

17 files changed, 475 insertions(+), 88 deletions(-)

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+2-22
...@@ -43,7 +43,7 @@ import {...@@ -43,7 +43,7 @@ import {
43 type ComposerDraft,43 type ComposerDraft,
44} from "../../state/use-composer-drafts";44} from "../../state/use-composer-drafts";
45import { useEnvironmentServerConfig, useProjects } from "../../state/entities";45import { useEnvironmentServerConfig, useProjects } from "../../state/entities";
46import { resolveSelectableModelSelection } from "../../lib/modelOptions";46import { buildModelMenuActions, resolveSelectableModelSelection } from "../../lib/modelOptions";
47import { deriveThreadTitleFromPrompt } from "../../lib/projectThreadStartTurn";47import { deriveThreadTitleFromPrompt } from "../../lib/projectThreadStartTurn";
48import { armAgentAwarenessLiveActivityForLocalWork } from "../agent-awareness/remoteRegistration";48import { armAgentAwarenessLiveActivityForLocalWork } from "../agent-awareness/remoteRegistration";
49import { enqueueThreadOutboxMessage, removeThreadOutboxMessage } from "../../state/thread-outbox";49import { enqueueThreadOutboxMessage, removeThreadOutboxMessage } from "../../state/thread-outbox";
...@@ -543,27 +543,7 @@ export function NewTaskDraftScreen(props: {...@@ -543,27 +543,7 @@ export function NewTaskDraftScreen(props: {
543 );543 );
544544
545 const modelMenuActions = useMemo(545 const modelMenuActions = useMemo(
546 () =>546 () => buildModelMenuActions(flow.providerGroups, flow.selectedModel),
547 flow.providerGroups.map((group) => ({
548 id: `provider:${group.providerKey}`,
549 title: group.providerLabel,
550 subtitle: group.models.find(
551 (model) =>
552 flow.selectedModel &&
553 model.selection.instanceId === flow.selectedModel.instanceId &&
554 model.selection.model === flow.selectedModel.model,
555 )?.label,
556 subactions: group.models.map((option) => ({
557 id: `model:${option.key}`,
558 title: option.label,
559 state:
560 flow.selectedModel &&
561 option.selection.instanceId === flow.selectedModel.instanceId &&
562 option.selection.model === flow.selectedModel.model
563 ? ("on" as const)
564 : undefined,
565 })),
566 })),
567 [flow.providerGroups, flow.selectedModel],547 [flow.providerGroups, flow.selectedModel],
568 );548 );
569 const providerOptionDescriptors = useMemo(549 const providerOptionDescriptors = useMemo(
apps/mobile/src/features/threads/ThreadComposer.tsx+2-20
...@@ -53,7 +53,7 @@ import {...@@ -53,7 +53,7 @@ import {
53import { ControlPill, ControlPillMenu } from "../../components/ControlPill";53import { ControlPill, ControlPillMenu } from "../../components/ControlPill";
54import { ProviderIcon } from "../../components/ProviderIcon";54import { ProviderIcon } from "../../components/ProviderIcon";
55import type { DraftComposerImageAttachment } from "../../lib/composerImages";55import type { DraftComposerImageAttachment } from "../../lib/composerImages";
56import { buildModelOptions, groupByProvider } from "../../lib/modelOptions";56import { buildModelMenuActions, buildModelOptions, groupByProvider } from "../../lib/modelOptions";
57import { useScaledTextRole } from "../settings/appearance/useScaledTextRole";57import { useScaledTextRole } from "../settings/appearance/useScaledTextRole";
58import type { RemoteClientConnectionState } from "../../lib/connection";58import type { RemoteClientConnectionState } from "../../lib/connection";
59import {59import {
...@@ -606,25 +606,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer...@@ -606,25 +606,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
606 [providerOptionDescriptors],606 [providerOptionDescriptors],
607 );607 );
608 const modelMenuActions = useMemo(608 const modelMenuActions = useMemo(
609 () =>609 () => buildModelMenuActions(providerGroups, currentModelSelection),
610 providerGroups.map((group) => ({
611 id: `provider:${group.providerKey}`,
612 title: group.providerLabel,
613 subtitle: group.models.find(
614 (model) =>
615 model.selection.instanceId === currentModelSelection.instanceId &&
616 model.selection.model === currentModelSelection.model,
617 )?.label,
618 subactions: group.models.map((option) => ({
619 id: `model:${option.key}`,
620 title: option.label,
621 state:
622 option.selection.instanceId === currentModelSelection.instanceId &&
623 option.selection.model === currentModelSelection.model
624 ? ("on" as const)
625 : undefined,
626 })),
627 })),
628 [providerGroups, currentModelSelection],610 [providerGroups, currentModelSelection],
629 );611 );
630612
apps/mobile/src/lib/modelOptions.test.ts+84-1
...@@ -2,9 +2,92 @@ import { describe, expect, it } from "vite-plus/test";...@@ -2,9 +2,92 @@ import { describe, expect, it } from "vite-plus/test";
22
3import { ProviderInstanceId, type ServerConfig } from "@t3tools/contracts";3import { ProviderInstanceId, type ServerConfig } from "@t3tools/contracts";
44
5import { buildModelOptions, resolveSelectableModelSelection } from "./modelOptions";5import {
6 buildModelMenuActions,
7 buildModelOptions,
8 groupByProvider,
9 resolveSelectableModelSelection,
10} from "./modelOptions";
611
7describe("mobile model options", () => {12describe("mobile model options", () => {
13 it("folds legacy models into a provider-scoped menu", () => {
14 const config = {
15 providers: [
16 {
17 instanceId: "codex",
18 driver: "codex",
19 displayName: "Codex",
20 enabled: true,
21 installed: true,
22 auth: { status: "authenticated" },
23 models: [
24 {
25 slug: "gpt-5.6-sol",
26 name: "GPT-5.6 Sol",
27 isCustom: false,
28 capabilities: null,
29 },
30 {
31 slug: "gpt-5.4",
32 name: "GPT-5.4",
33 isCustom: false,
34 isLegacy: true,
35 capabilities: null,
36 },
37 ],
38 },
39 ],
40 } as unknown as ServerConfig;
41
42 const actions = buildModelMenuActions(groupByProvider(buildModelOptions(config, null)), null);
43
44 expect(actions).toMatchObject([
45 {
46 title: "Codex",
47 subactions: [{ id: "model:codex:gpt-5.6-sol", title: "GPT-5.6 Sol" }],
48 },
49 {
50 id: "legacy-models:codex",
51 title: "Codex legacy models",
52 subactions: [{ id: "model:codex:gpt-5.4", title: "GPT-5.4" }],
53 },
54 ]);
55 });
56
57 it("omits an empty provider menu when every model is legacy", () => {
58 const config = {
59 providers: [
60 {
61 instanceId: "codex",
62 driver: "codex",
63 displayName: "Codex",
64 enabled: true,
65 installed: true,
66 auth: { status: "authenticated" },
67 models: [
68 {
69 slug: "gpt-5.4",
70 name: "GPT-5.4",
71 isCustom: false,
72 isLegacy: true,
73 capabilities: null,
74 },
75 ],
76 },
77 ],
78 } as unknown as ServerConfig;
79
80 expect(
81 buildModelMenuActions(groupByProvider(buildModelOptions(config, null)), null),
82 ).toMatchObject([
83 {
84 id: "legacy-models:codex",
85 title: "Codex legacy models",
86 subactions: [{ id: "model:codex:gpt-5.4" }],
87 },
88 ]);
89 });
90
8 it("normalizes a legacy fallback selection against current capabilities", () => {91 it("normalizes a legacy fallback selection against current capabilities", () => {
9 const config = {92 const config = {
10 providers: [93 providers: [
apps/mobile/src/lib/modelOptions.ts+54
...@@ -3,6 +3,7 @@ import type {...@@ -3,6 +3,7 @@ import type {
3 ModelSelection,3 ModelSelection,
4 ServerConfig as T3ServerConfig,4 ServerConfig as T3ServerConfig,
5} from "@t3tools/contracts";5} from "@t3tools/contracts";
6import type { MenuAction } from "@react-native-menu/menu";
6import {7import {
7 buildProviderOptionSelectionsFromDescriptors,8 buildProviderOptionSelectionsFromDescriptors,
8 getProviderOptionDescriptors,9 getProviderOptionDescriptors,
...@@ -16,6 +17,7 @@ export type ModelOption = {...@@ -16,6 +17,7 @@ export type ModelOption = {
16 readonly providerLabel: string;17 readonly providerLabel: string;
17 readonly providerDriver: string;18 readonly providerDriver: string;
18 readonly isDefault: boolean;19 readonly isDefault: boolean;
20 readonly isLegacy: boolean;
19 readonly capabilities: ModelCapabilities | null;21 readonly capabilities: ModelCapabilities | null;
20 readonly selection: ModelSelection;22 readonly selection: ModelSelection;
21};23};
...@@ -105,6 +107,7 @@ export function buildModelOptions(...@@ -105,6 +107,7 @@ export function buildModelOptions(
105 providerLabel,107 providerLabel,
106 providerDriver: provider.driver,108 providerDriver: provider.driver,
107 isDefault: model.isDefault === true,109 isDefault: model.isDefault === true,
110 isLegacy: model.isLegacy === true,
108 capabilities: model.capabilities,111 capabilities: model.capabilities,
109 selection: normalizeSelectionOptions(112 selection: normalizeSelectionOptions(
110 {113 {
...@@ -135,6 +138,7 @@ export function buildModelOptions(...@@ -135,6 +138,7 @@ export function buildModelOptions(
135 providerLabel,138 providerLabel,
136 providerDriver: fallbackModelSelection.instanceId,139 providerDriver: fallbackModelSelection.instanceId,
137 isDefault: false,140 isDefault: false,
141 isLegacy: false,
138 capabilities: null,142 capabilities: null,
139 selection: fallbackModelSelection,143 selection: fallbackModelSelection,
140 });144 });
...@@ -164,3 +168,53 @@ export function groupByProvider(options: ReadonlyArray<ModelOption>): ReadonlyAr...@@ -164,3 +168,53 @@ export function groupByProvider(options: ReadonlyArray<ModelOption>): ReadonlyAr
164 models: group.models,168 models: group.models,
165 }));169 }));
166}170}
171
172function modelMenuAction(option: ModelOption, selectedModel: ModelSelection | null): MenuAction {
173 return {
174 id: `model:${option.key}`,
175 title: option.label,
176 state:
177 option.selection.instanceId === selectedModel?.instanceId &&
178 option.selection.model === selectedModel.model
179 ? "on"
180 : undefined,
181 };
182}
183
184export function buildModelMenuActions(
185 groups: ReadonlyArray<ProviderGroup>,
186 selectedModel: ModelSelection | null,
187): MenuAction[] {
188 return groups.flatMap((group) => {
189 const currentModels = group.models.filter((model) => !model.isLegacy);
190 const legacyModels = group.models.filter((model) => model.isLegacy);
191 const selected = group.models.find(
192 (model) =>
193 model.selection.instanceId === selectedModel?.instanceId &&
194 model.selection.model === selectedModel.model,
195 );
196
197 return [
198 ...(currentModels.length > 0
199 ? [
200 {
201 id: `provider:${group.providerKey}`,
202 title: group.providerLabel,
203 subtitle: selected && !selected.isLegacy ? selected.label : undefined,
204 subactions: currentModels.map((option) => modelMenuAction(option, selectedModel)),
205 },
206 ]
207 : []),
208 ...(legacyModels.length > 0
209 ? [
210 {
211 id: `legacy-models:${group.providerKey}`,
212 title: `${group.providerLabel} legacy models`,
213 subtitle: selected?.isLegacy ? selected.label : undefined,
214 subactions: legacyModels.map((option) => modelMenuAction(option, selectedModel)),
215 },
216 ]
217 : []),
218 ];
219 });
220}
apps/server/src/provider/Layers/ClaudeCapabilitiesProbe.test.ts+16
...@@ -9,11 +9,27 @@ import * as Schema from "effect/Schema";...@@ -9,11 +9,27 @@ import * as Schema from "effect/Schema";
9import {9import {
10 buildClaudeCapabilitiesProbeQueryOptions,10 buildClaudeCapabilitiesProbeQueryOptions,
11 CLAUDE_CAPABILITIES_PROBE_SETTING_SOURCES,11 CLAUDE_CAPABILITIES_PROBE_SETTING_SOURCES,
12 isLegacyClaudeModel,
12 probeClaudeCapabilities,13 probeClaudeCapabilities,
13} from "./ClaudeProvider.ts";14} from "./ClaudeProvider.ts";
1415
15const decodeClaudeSettings = Schema.decodeSync(ClaudeSettings);16const decodeClaudeSettings = Schema.decodeSync(ClaudeSettings);
1617
18it("keeps only the Claude 5 family out of legacy models", () => {
19 assert.deepStrictEqual(
20 ["claude-fable-5", "claude-opus-5", "claude-sonnet-5", "claude-opus-4-8"].map((model) => [
21 model,
22 isLegacyClaudeModel(model),
23 ]),
24 [
25 ["claude-fable-5", false],
26 ["claude-opus-5", false],
27 ["claude-sonnet-5", false],
28 ["claude-opus-4-8", true],
29 ],
30 );
31});
32
17it("isolates Claude capability probes without dropping workspace setting sources", () => {33it("isolates Claude capability probes without dropping workspace setting sources", () => {
18 const abortController = new AbortController();34 const abortController = new AbortController();
19 const options = buildClaudeCapabilitiesProbeQueryOptions({35 const options = buildClaudeCapabilitiesProbeQueryOptions({
apps/server/src/provider/Layers/ClaudeProvider.ts+11-1
...@@ -56,7 +56,13 @@ const MINIMUM_CLAUDE_FABLE_5_VERSION = "2.1.169";...@@ -56,7 +56,13 @@ const MINIMUM_CLAUDE_FABLE_5_VERSION = "2.1.169";
56const MINIMUM_CLAUDE_OPUS_4_8_VERSION = "2.1.154";56const MINIMUM_CLAUDE_OPUS_4_8_VERSION = "2.1.154";
57const MINIMUM_CLAUDE_OPUS_4_7_VERSION = "2.1.111";57const MINIMUM_CLAUDE_OPUS_4_7_VERSION = "2.1.111";
5858
59const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [59const CURRENT_CLAUDE_MODELS = new Set(["claude-fable-5", "claude-opus-5", "claude-sonnet-5"]);
60
61export function isLegacyClaudeModel(model: string): boolean {
62 return !CURRENT_CLAUDE_MODELS.has(model);
63}
64
65const CLAUDE_MODEL_CATALOG: ReadonlyArray<ServerProviderModel> = [
60 {66 {
61 slug: "claude-fable-5",67 slug: "claude-fable-5",
62 name: "Claude Fable 5",68 name: "Claude Fable 5",
...@@ -309,6 +315,10 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [...@@ -309,6 +315,10 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
309 },315 },
310];316];
311317
318const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = CLAUDE_MODEL_CATALOG.map((model) =>
319 isLegacyClaudeModel(model.slug) ? { ...model, isLegacy: true } : model,
320);
321
312function supportsClaudeOpus5(version: string | null | undefined): boolean {322function supportsClaudeOpus5(version: string | null | undefined): boolean {
313 return version ? compareSemverVersions(version, MINIMUM_CLAUDE_OPUS_5_VERSION) >= 0 : false;323 return version ? compareSemverVersions(version, MINIMUM_CLAUDE_OPUS_5_VERSION) >= 0 : false;
314}324}
apps/server/src/provider/Layers/CodexProvider.test.ts+20-1
...@@ -1,6 +1,25 @@...@@ -1,6 +1,25 @@
1import { assert, it } from "@effect/vitest";1import { assert, it } from "@effect/vitest";
22
3import { applyPreferredCodexDefaultModel, mapCodexModelCapabilities } from "./CodexProvider.ts";3import {
4 applyPreferredCodexDefaultModel,
5 isLegacyCodexModel,
6 mapCodexModelCapabilities,
7} from "./CodexProvider.ts";
8
9it("keeps only the GPT-5.6 Codex family out of legacy models", () => {
10 assert.deepStrictEqual(
11 ["gpt-5.6-luna", "gpt-5.6-terra", "gpt-5.6-sol", "gpt-5.4"].map((model) => [
12 model,
13 isLegacyCodexModel(model),
14 ]),
15 [
16 ["gpt-5.6-luna", false],
17 ["gpt-5.6-terra", false],
18 ["gpt-5.6-sol", false],
19 ["gpt-5.4", true],
20 ],
21 );
22});
423
5it("maps current Codex model capability fields", () => {24it("maps current Codex model capability fields", () => {
6 const capabilities = mapCodexModelCapabilities({25 const capabilities = mapCodexModelCapabilities({
apps/server/src/provider/Layers/CodexProvider.ts+6
...@@ -62,6 +62,11 @@ const REASONING_EFFORT_LABELS: Readonly<Record<string, string>> = {...@@ -62,6 +62,11 @@ const REASONING_EFFORT_LABELS: Readonly<Record<string, string>> = {
62};62};
6363
64const DEFAULT_SERVICE_TIER_ID = "default";64const DEFAULT_SERVICE_TIER_ID = "default";
65const CURRENT_CODEX_MODELS = new Set(["gpt-5.6-luna", "gpt-5.6-terra", "gpt-5.6-sol"]);
66
67export function isLegacyCodexModel(model: string): boolean {
68 return !CURRENT_CODEX_MODELS.has(model);
69}
6570
66function reasoningEffortLabel(reasoningEffort: string): string {71function reasoningEffortLabel(reasoningEffort: string): string {
67 return REASONING_EFFORT_LABELS[reasoningEffort] ?? reasoningEffort;72 return REASONING_EFFORT_LABELS[reasoningEffort] ?? reasoningEffort;
...@@ -190,6 +195,7 @@ function parseCodexModelListResponse(...@@ -190,6 +195,7 @@ function parseCodexModelListResponse(
190 name: toDisplayName(model),195 name: toDisplayName(model),
191 isCustom: false,196 isCustom: false,
192 ...(model.isDefault ? { isDefault: true } : {}),197 ...(model.isDefault ? { isDefault: true } : {}),
198 ...(isLegacyCodexModel(model.model) ? { isLegacy: true } : {}),
193 capabilities: mapCodexModelCapabilities(model),199 capabilities: mapCodexModelCapabilities(model),
194 }));200 }));
195}201}
apps/web/src/components/chat/ModelListRow.tsx+2-1
...@@ -12,6 +12,7 @@ import { Button } from "../ui/button";...@@ -12,6 +12,7 @@ import { Button } from "../ui/button";
12import { Kbd } from "../ui/kbd";12import { Kbd } from "../ui/kbd";
13import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";13import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
14import { cn } from "~/lib/utils";14import { cn } from "~/lib/utils";
15import { modelPickerModelKey } from "./modelPickerKeys";
1516
16export const ModelListRow = memo(function ModelListRow(props: {17export const ModelListRow = memo(function ModelListRow(props: {
17 index: number;18 index: number;
...@@ -46,7 +47,7 @@ export const ModelListRow = memo(function ModelListRow(props: {...@@ -46,7 +47,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
46 <ComboboxItem47 <ComboboxItem
47 hideIndicator48 hideIndicator
48 index={props.index}49 index={props.index}
49 value={`${props.instanceId}:${props.model.slug}`}50 value={modelPickerModelKey(props.instanceId, props.model.slug)}
50 disabled={Boolean(props.disabledReason)}51 disabled={Boolean(props.disabledReason)}
51 contentClassName="flex w-full items-center gap-3"52 contentClassName="flex w-full items-center gap-3"
52 className={cn(53 className={cn(
apps/web/src/components/chat/ModelPickerContent.tsx+154-42
...@@ -6,12 +6,24 @@ import {...@@ -6,12 +6,24 @@ import {
6import { resolveSelectableModel } from "@t3tools/shared/model";6import { resolveSelectableModel } from "@t3tools/shared/model";
7import { LegendList, type LegendListRef } from "@legendapp/list/react";7import { LegendList, type LegendListRef } from "@legendapp/list/react";
8import { memo, useMemo, useState, useCallback, useEffect, useLayoutEffect, useRef } from "react";8import { memo, useMemo, useState, useCallback, useEffect, useLayoutEffect, useRef } from "react";
9import { SearchIcon } from "lucide-react";9import { ChevronRightIcon, SearchIcon } from "lucide-react";
10import { ModelListRow } from "./ModelListRow";10import { ModelListRow } from "./ModelListRow";
11import { ModelPickerSidebar } from "./ModelPickerSidebar";11import { ModelPickerSidebar } from "./ModelPickerSidebar";
12import {
13 modelPickerLegacySectionKey,
14 modelPickerModelKey,
15 parseModelPickerLegacySectionKey,
16 parseModelPickerModelKey,
17} from "./modelPickerKeys";
12import { isModelPickerNewModel } from "./modelPickerModelHighlights";18import { isModelPickerNewModel } from "./modelPickerModelHighlights";
13import { buildModelPickerSearchText, scoreModelPickerSearch } from "./modelPickerSearch";19import { buildModelPickerSearchText, scoreModelPickerSearch } from "./modelPickerSearch";
14import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxListVirtualized } from "../ui/combobox";20import {
21 Combobox,
22 ComboboxEmpty,
23 ComboboxInput,
24 ComboboxItem,
25 ComboboxListVirtualized,
26} from "../ui/combobox";
15import { ModelEsque } from "./providerIconUtils";27import { ModelEsque } from "./providerIconUtils";
16import {28import {
17 modelPickerJumpCommandForIndex,29 modelPickerJumpCommandForIndex,
...@@ -39,6 +51,7 @@ type ModelPickerItem = {...@@ -39,6 +51,7 @@ type ModelPickerItem = {
39 instanceDisplayName: string;51 instanceDisplayName: string;
40 instanceAccentColor?: string | undefined;52 instanceAccentColor?: string | undefined;
41 continuationGroupKey?: string | undefined;53 continuationGroupKey?: string | undefined;
54 isLegacy?: boolean | undefined;
42};55};
4356
44const EMPTY_MODEL_JUMP_LABELS = new Map<string, string>();57const EMPTY_MODEL_JUMP_LABELS = new Map<string, string>();
...@@ -47,20 +60,6 @@ function ModelListSeparator() {...@@ -47,20 +60,6 @@ function ModelListSeparator() {
47 return <div className="h-0.5" />;60 return <div className="h-0.5" />;
48}61}
4962
50// Split a `${instanceId}:${slug}` combobox key back into its pieces. Slugs
51// can contain colons (e.g. some vendor model ids), so we only split on the
52// first colon — anything after that is the slug.
53function splitInstanceModelKey(key: string): { instanceId: ProviderInstanceId; slug: string } {
54 const colonIndex = key.indexOf(":");
55 if (colonIndex === -1) {
56 return { instanceId: key as ProviderInstanceId, slug: "" };
57 }
58 return {
59 instanceId: key.slice(0, colonIndex) as ProviderInstanceId,
60 slug: key.slice(colonIndex + 1),
61 };
62}
63
64export const ModelPickerContent = memo(function ModelPickerContent(props: {63export const ModelPickerContent = memo(function ModelPickerContent(props: {
65 /** The instance currently selected in the composer (combobox "value"). */64 /** The instance currently selected in the composer (combobox "value"). */
66 activeInstanceId: ProviderInstanceId;65 activeInstanceId: ProviderInstanceId;
...@@ -117,6 +116,16 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -117,6 +116,16 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
117 return favorites.length > 0 ? "favorites" : props.activeInstanceId;116 return favorites.length > 0 ? "favorites" : props.activeInstanceId;
118 },117 },
119 );118 );
119 const [expandedLegacyInstances, setExpandedLegacyInstances] = useState(
120 () =>
121 new Set<ProviderInstanceId>(
122 modelOptionsByInstance
123 .get(props.activeInstanceId)
124 ?.some((model) => model.slug === props.model && model.isLegacy)
125 ? [props.activeInstanceId]
126 : [],
127 ),
128 );
120 const keybindings = useMemo<ResolvedKeybindingsConfig>(129 const keybindings = useMemo<ResolvedKeybindingsConfig>(
121 () => providedKeybindings ?? [],130 () => providedKeybindings ?? [],
122 [providedKeybindings],131 [providedKeybindings],
...@@ -211,6 +220,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -211,6 +220,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
211 name: model.name,220 name: model.name,
212 ...(model.shortName ? { shortName: model.shortName } : {}),221 ...(model.shortName ? { shortName: model.shortName } : {}),
213 ...(model.subProvider ? { subProvider: model.subProvider } : {}),222 ...(model.subProvider ? { subProvider: model.subProvider } : {}),
223 ...(model.isLegacy ? { isLegacy: true } : {}),
214 instanceId,224 instanceId,
215 driverKind: entry.driverKind,225 driverKind: entry.driverKind,
216 instanceDisplayName: entry.displayName,226 instanceDisplayName: entry.displayName,
...@@ -366,6 +376,45 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -366,6 +376,45 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
366 selectedInstanceId,376 selectedInstanceId,
367 ]);377 ]);
368378
379 const legacySection = useMemo(() => {
380 if (isSearching || selectedInstanceId === "favorites") {
381 return null;
382 }
383 const currentModels = filteredModels.filter((model) => !model.isLegacy);
384 const legacyModels = filteredModels.filter((model) => model.isLegacy);
385 if (legacyModels.length === 0) {
386 return null;
387 }
388 return {
389 key: modelPickerLegacySectionKey(selectedInstanceId),
390 currentModels,
391 legacyModels,
392 isExpanded: expandedLegacyInstances.has(selectedInstanceId),
393 };
394 }, [expandedLegacyInstances, filteredModels, isSearching, selectedInstanceId]);
395
396 const visibleModels = useMemo(() => {
397 if (!legacySection) {
398 return filteredModels;
399 }
400 return [
401 ...legacySection.currentModels,
402 ...(legacySection.isExpanded ? legacySection.legacyModels : []),
403 ];
404 }, [filteredModels, legacySection]);
405
406 const toggleLegacySection = useCallback((instanceId: ProviderInstanceId) => {
407 setExpandedLegacyInstances((expanded) => {
408 const next = new Set(expanded);
409 if (next.has(instanceId)) {
410 next.delete(instanceId);
411 } else {
412 next.add(instanceId);
413 }
414 return next;
415 });
416 }, []);
417
369 const handleModelSelect = useCallback(418 const handleModelSelect = useCallback(
370 (modelSlug: string, instanceId: ProviderInstanceId) => {419 (modelSlug: string, instanceId: ProviderInstanceId) => {
371 if (getModelDisabledReason?.(instanceId, modelSlug)) {420 if (getModelDisabledReason?.(instanceId, modelSlug)) {
...@@ -410,7 +459,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -410,7 +459,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
410 NonNullable<ReturnType<typeof modelPickerJumpCommandForIndex>>459 NonNullable<ReturnType<typeof modelPickerJumpCommandForIndex>>
411 >();460 >();
412 let selectableModelIndex = 0;461 let selectableModelIndex = 0;
413 for (const model of filteredModels) {462 for (const model of visibleModels) {
414 if (getModelDisabledReason?.(model.instanceId, model.slug)) {463 if (getModelDisabledReason?.(model.instanceId, model.slug)) {
415 continue;464 continue;
416 }465 }
...@@ -418,27 +467,44 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -418,27 +467,44 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
418 if (!jumpCommand) {467 if (!jumpCommand) {
419 return mapping;468 return mapping;
420 }469 }
421 mapping.set(`${model.instanceId}:${model.slug}`, jumpCommand);470 mapping.set(modelPickerModelKey(model.instanceId, model.slug), jumpCommand);
422 selectableModelIndex += 1;471 selectableModelIndex += 1;
423 }472 }
424 return mapping;473 return mapping;
425 }, [filteredModels, getModelDisabledReason]);474 }, [getModelDisabledReason, visibleModels]);
426 const modelJumpModelKeys = useMemo(475 const modelJumpModelKeys = useMemo(
427 () => [...modelJumpCommandByKey.keys()],476 () => [...modelJumpCommandByKey.keys()],
428 [modelJumpCommandByKey],477 [modelJumpCommandByKey],
429 );478 );
430 const allModelKeys = useMemo(479 const allItemKeys = useMemo(
431 (): string[] => flatModels.map((model) => `${model.instanceId}:${model.slug}`),480 (): string[] => [
481 ...flatModels.map((model) => modelPickerModelKey(model.instanceId, model.slug)),
482 ...new Set(
483 flatModels
484 .filter((model) => model.isLegacy)
485 .map((model) => modelPickerLegacySectionKey(model.instanceId)),
486 ),
487 ],
432 [flatModels],488 [flatModels],
433 );489 );
434 const filteredModelKeys = useMemo(490 const filteredItemKeys = useMemo((): string[] => {
435 (): string[] => filteredModels.map((model) => `${model.instanceId}:${model.slug}`),491 const modelKeys = visibleModels.map((model) =>
436 [filteredModels],492 modelPickerModelKey(model.instanceId, model.slug),
437 );493 );
494 if (!legacySection) {
495 return modelKeys;
496 }
497 modelKeys.splice(legacySection.currentModels.length, 0, legacySection.key);
498 return modelKeys;
499 }, [legacySection, visibleModels]);
438 const filteredModelByKey = useMemo(500 const filteredModelByKey = useMemo(
439 (): ReadonlyMap<string, ModelPickerItem> =>501 (): ReadonlyMap<string, ModelPickerItem> =>
440 new Map(filteredModels.map((model) => [`${model.instanceId}:${model.slug}`, model] as const)),502 new Map(
441 [filteredModels],503 visibleModels.map(
504 (model) => [modelPickerModelKey(model.instanceId, model.slug), model] as const,
505 ),
506 ),
507 [visibleModels],
442 );508 );
443 const updateModelListScrollFades = useCallback(() => {509 const updateModelListScrollFades = useCallback(() => {
444 const scrollElement = modelListRef.current?.getScrollableNode();510 const scrollElement = modelListRef.current?.getScrollableNode();
...@@ -495,10 +561,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -495,10 +561,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
495 if (!targetModelKey) {561 if (!targetModelKey) {
496 return;562 return;
497 }563 }
498 const { instanceId, slug } = splitInstanceModelKey(targetModelKey);564 const model = parseModelPickerModelKey(targetModelKey);
565 if (!model) {
566 return;
567 }
499 event.preventDefault();568 event.preventDefault();
500 event.stopPropagation();569 event.stopPropagation();
501 handleModelSelect(slug, instanceId);570 handleModelSelect(model.slug, model.instanceId);
502 };571 };
503572
504 window.addEventListener("keydown", onWindowKeyDown, true);573 window.addEventListener("keydown", onWindowKeyDown, true);
...@@ -510,7 +579,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -510,7 +579,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
510579
511 useLayoutEffect(() => {580 useLayoutEffect(() => {
512 setShowTopScrollFade(false);581 setShowTopScrollFade(false);
513 setShowBottomScrollFade(filteredModelKeys.length > 5);582 setShowBottomScrollFade(filteredItemKeys.length > 5);
514 let nestedFrame = 0;583 let nestedFrame = 0;
515 const frame = window.requestAnimationFrame(() => {584 const frame = window.requestAnimationFrame(() => {
516 updateModelListScrollFades();585 updateModelListScrollFades();
...@@ -520,7 +589,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -520,7 +589,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
520 window.cancelAnimationFrame(frame);589 window.cancelAnimationFrame(frame);
521 window.cancelAnimationFrame(nestedFrame);590 window.cancelAnimationFrame(nestedFrame);
522 };591 };
523 }, [filteredModelKeys, updateModelListScrollFades]);592 }, [filteredItemKeys, updateModelListScrollFades]);
524593
525 return (594 return (
526 <TooltipProvider delay={0}>595 <TooltipProvider delay={0}>
...@@ -548,13 +617,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -548,13 +617,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
548 {/* Main content area */}617 {/* Main content area */}
549 <Combobox618 <Combobox
550 inline619 inline
551 items={allModelKeys}620 items={allItemKeys}
552 filteredItems={filteredModelKeys}621 filteredItems={filteredItemKeys}
553 filter={null}622 filter={null}
554 autoHighlight623 autoHighlight
555 open624 open
556 virtualized625 virtualized
557 value={`${props.activeInstanceId}:${props.model}`}626 value={modelPickerModelKey(props.activeInstanceId, props.model)}
558 onItemHighlighted={(modelKey, eventDetails) => {627 onItemHighlighted={(modelKey, eventDetails) => {
559 highlightedModelKeyRef.current = typeof modelKey === "string" ? modelKey : null;628 highlightedModelKeyRef.current = typeof modelKey === "string" ? modelKey : null;
560 if (eventDetails.reason === "keyboard" && eventDetails.index >= 0) {629 if (eventDetails.reason === "keyboard" && eventDetails.index >= 0) {
...@@ -568,8 +637,15 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -568,8 +637,15 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
568 if (typeof modelKey !== "string") {637 if (typeof modelKey !== "string") {
569 return;638 return;
570 }639 }
571 const { instanceId, slug } = splitInstanceModelKey(modelKey);640 const legacyInstanceId = parseModelPickerLegacySectionKey(modelKey);
572 handleModelSelect(slug, instanceId);641 if (legacyInstanceId) {
642 toggleLegacySection(legacyInstanceId);
643 return;
644 }
645 const model = parseModelPickerModelKey(modelKey);
646 if (model) {
647 handleModelSelect(model.slug, model.instanceId);
648 }
573 }}649 }}
574 >650 >
575 <div651 <div
...@@ -605,10 +681,17 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -605,10 +681,17 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
605 ).preventBaseUIHandler?.();681 ).preventBaseUIHandler?.();
606 e.preventDefault();682 e.preventDefault();
607 e.stopPropagation();683 e.stopPropagation();
608 const { instanceId, slug } = splitInstanceModelKey(684 const legacyInstanceId = parseModelPickerLegacySectionKey(
609 highlightedModelKeyRef.current,685 highlightedModelKeyRef.current,
610 );686 );
611 handleModelSelect(slug, instanceId);687 if (legacyInstanceId) {
688 toggleLegacySection(legacyInstanceId);
689 return;
690 }
691 const model = parseModelPickerModelKey(highlightedModelKeyRef.current);
692 if (model) {
693 handleModelSelect(model.slug, model.instanceId);
694 }
612 return;695 return;
613 }696 }
614 e.stopPropagation();697 e.stopPropagation();
...@@ -626,10 +709,35 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -626,10 +709,35 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
626 <ComboboxListVirtualized className="size-full min-w-0 p-0 not-empty:p-0">709 <ComboboxListVirtualized className="size-full min-w-0 p-0 not-empty:p-0">
627 <LegendList<string>710 <LegendList<string>
628 ref={modelListRef}711 ref={modelListRef}
629 data={filteredModelKeys}712 data={filteredItemKeys}
630 extraData={favoritesSet}713 extraData={favoritesSet}
631 keyExtractor={(modelKey) => modelKey}714 keyExtractor={(modelKey) => modelKey}
632 renderItem={({ item: modelKey, index }) => {715 renderItem={({ item: modelKey, index }) => {
716 if (legacySection?.key === modelKey) {
717 return (
718 <ComboboxItem
719 hideIndicator
720 index={index}
721 value={modelKey}
722 aria-expanded={legacySection.isExpanded}
723 className="group w-full cursor-pointer rounded-md px-2 py-2"
724 contentClassName="flex w-full items-center gap-3"
725 >
726 <div className="min-w-0 flex-1 text-left">
727 <div className="text-xs font-medium leading-snug">Legacy models</div>
728 <div className="mt-1 text-xs font-normal leading-snug text-muted-foreground/70">
729 {legacySection.legacyModels.length} models
730 </div>
731 </div>
732 <ChevronRightIcon
733 className={cn(
734 "size-4 transition-transform",
735 legacySection.isExpanded && "rotate-90",
736 )}
737 />
738 </ComboboxItem>
739 );
740 }
633 const model = filteredModelByKey.get(modelKey);741 const model = filteredModelByKey.get(modelKey);
634 if (!model) {742 if (!model) {
635 return null;743 return null;
...@@ -645,8 +753,12 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -645,8 +753,12 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
645 driverKind={model.driverKind}753 driverKind={model.driverKind}
646 providerDisplayName={model.instanceDisplayName}754 providerDisplayName={model.instanceDisplayName}
647 providerAccentColor={model.instanceAccentColor}755 providerAccentColor={model.instanceAccentColor}
648 isFavorite={favoritesSet.has(modelKey)}756 isFavorite={favoritesSet.has(
649 isSelected={modelKey === `${props.activeInstanceId}:${props.model}`}757 providerModelKey(model.instanceId, model.slug),
758 )}
759 isSelected={
760 modelKey === modelPickerModelKey(props.activeInstanceId, props.model)
761 }
650 showProvider762 showProvider
651 preferShortName={!isLocked}763 preferShortName={!isLocked}
652 useTriggerLabel={false}764 useTriggerLabel={false}
...@@ -657,7 +769,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -657,7 +769,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
657 />769 />
658 );770 );
659 }}771 }}
660 estimatedItemSize={60}772 estimatedItemSize={52}
661 drawDistance={480}773 drawDistance={480}
662 recycleItems774 recycleItems
663 contentContainerClassName="pl-2 pr-px"775 contentContainerClassName="pl-2 pr-px"
apps/web/src/components/chat/modelPickerKeys.test.ts created+31
...@@ -0,0 +1,31 @@
1import { ProviderInstanceId } from "@t3tools/contracts";
2import { describe, expect, it } from "vite-plus/test";
3import {
4 modelPickerLegacySectionKey,
5 modelPickerModelKey,
6 parseModelPickerLegacySectionKey,
7 parseModelPickerModelKey,
8} from "./modelPickerKeys";
9
10describe("model picker item keys", () => {
11 it("keeps model and legacy section keys distinct for colliding instance names", () => {
12 const modelKey = modelPickerModelKey(ProviderInstanceId.make("legacy-models"), "codex");
13 const sectionKey = modelPickerLegacySectionKey(ProviderInstanceId.make("codex"));
14
15 expect(modelKey).not.toBe(sectionKey);
16 expect(parseModelPickerLegacySectionKey(modelKey)).toBeNull();
17 expect(parseModelPickerModelKey(modelKey)).toEqual({
18 instanceId: "legacy-models",
19 slug: "codex",
20 });
21 });
22
23 it("round-trips arbitrary strings without throwing", () => {
24 const instanceId = ProviderInstanceId.make("custom");
25 const slug = "model:\udfff";
26
27 const key = modelPickerModelKey(instanceId, slug);
28
29 expect(parseModelPickerModelKey(key)).toEqual({ instanceId, slug });
30 });
31});
apps/web/src/components/chat/modelPickerKeys.ts created+47
...@@ -0,0 +1,47 @@
1import type { ProviderInstanceId } from "@t3tools/contracts";
2
3const MODEL_KEY_PREFIX = "model:";
4const LEGACY_SECTION_KEY_PREFIX = "legacy-models:";
5
6export function modelPickerModelKey(instanceId: ProviderInstanceId, slug: string): string {
7 return `${MODEL_KEY_PREFIX}${instanceId.length}:${instanceId}${slug}`;
8}
9
10export function parseModelPickerModelKey(
11 key: string,
12): { instanceId: ProviderInstanceId; slug: string } | null {
13 if (!key.startsWith(MODEL_KEY_PREFIX)) {
14 return null;
15 }
16 const encoded = key.slice(MODEL_KEY_PREFIX.length);
17 const separatorIndex = encoded.indexOf(":");
18 if (separatorIndex === -1) {
19 return null;
20 }
21
22 const instanceIdLengthText = encoded.slice(0, separatorIndex);
23 if (!/^\d+$/.test(instanceIdLengthText)) {
24 return null;
25 }
26
27 const instanceIdLength = Number(instanceIdLengthText);
28 const value = encoded.slice(separatorIndex + 1);
29 if (!Number.isSafeInteger(instanceIdLength) || instanceIdLength > value.length) {
30 return null;
31 }
32
33 return {
34 instanceId: value.slice(0, instanceIdLength) as ProviderInstanceId,
35 slug: value.slice(instanceIdLength),
36 };
37}
38
39export function modelPickerLegacySectionKey(instanceId: ProviderInstanceId): string {
40 return `${LEGACY_SECTION_KEY_PREFIX}${instanceId}`;
41}
42
43export function parseModelPickerLegacySectionKey(key: string): ProviderInstanceId | null {
44 return key.startsWith(LEGACY_SECTION_KEY_PREFIX)
45 ? (key.slice(LEGACY_SECTION_KEY_PREFIX.length) as ProviderInstanceId)
46 : null;
47}
apps/web/src/components/chat/providerIconUtils.ts+1
...@@ -26,6 +26,7 @@ export type ModelEsque = {...@@ -26,6 +26,7 @@ export type ModelEsque = {
26 name: string;26 name: string;
27 shortName?: string | undefined;27 shortName?: string | undefined;
28 subProvider?: string | undefined;28 subProvider?: string | undefined;
29 isLegacy?: boolean | undefined;
29};30};
3031
31function escapeRegExp(value: string): string {32function escapeRegExp(value: string): string {
apps/web/src/modelSelection.test.ts+18
...@@ -55,6 +55,24 @@ function settingsWithProviderInstances(): UnifiedSettings {...@@ -55,6 +55,24 @@ function settingsWithProviderInstances(): UnifiedSettings {
55}55}
5656
57describe("instance-scoped model selection", () => {57describe("instance-scoped model selection", () => {
58 it("preserves server-provided legacy model metadata", () => {
59 const baseProvider = provider({
60 instanceId: "claudeAgent",
61 models: ["claude-opus-4-8"],
62 });
63 const providers = [
64 {
65 ...baseProvider,
66 models: [{ ...baseProvider.models[0]!, isLegacy: true }],
67 },
68 ];
69 const stock = deriveProviderInstanceEntries(providers)[0]!;
70
71 expect(getAppModelOptionsForInstance(settingsWithProviderInstances(), stock)[0]?.isLegacy).toBe(
72 true,
73 );
74 });
75
58 it("keeps custom models on the provider instance that declared them", () => {76 it("keeps custom models on the provider instance that declared them", () => {
59 const providers = [77 const providers = [
60 provider({78 provider({
apps/web/src/modelSelection.ts+2
...@@ -76,6 +76,7 @@ export interface AppModelOption {...@@ -76,6 +76,7 @@ export interface AppModelOption {
76 subProvider?: string;76 subProvider?: string;
77 isCustom: boolean;77 isCustom: boolean;
78 isDefault?: boolean;78 isDefault?: boolean;
79 isLegacy?: boolean;
79}80}
8081
81function toAppModelOption(model: ServerProvider["models"][number]): AppModelOption {82function toAppModelOption(model: ServerProvider["models"][number]): AppModelOption {
...@@ -87,6 +88,7 @@ function toAppModelOption(model: ServerProvider["models"][number]): AppModelOpti...@@ -87,6 +88,7 @@ function toAppModelOption(model: ServerProvider["models"][number]): AppModelOpti
87 if (model.shortName) option.shortName = model.shortName;88 if (model.shortName) option.shortName = model.shortName;
88 if (model.subProvider) option.subProvider = model.subProvider;89 if (model.subProvider) option.subProvider = model.subProvider;
89 if (model.isDefault) option.isDefault = true;90 if (model.isDefault) option.isDefault = true;
91 if (model.isLegacy) option.isLegacy = true;
90 return option;92 return option;
91}93}
9294
packages/contracts/src/server.test.ts+24
...@@ -73,6 +73,30 @@ describe("ServerProvider", () => {...@@ -73,6 +73,30 @@ describe("ServerProvider", () => {
7373
74 expect(parsed.continuation?.groupKey).toBe("codex:home:/Users/julius/.codex");74 expect(parsed.continuation?.groupKey).toBe("codex:home:/Users/julius/.codex");
75 });75 });
76
77 it("decodes optional legacy model metadata", () => {
78 const parsed = decodeServerProvider({
79 instanceId: "codex",
80 driver: "codex",
81 enabled: true,
82 installed: true,
83 version: "1.0.0",
84 status: "ready",
85 auth: { status: "authenticated" },
86 checkedAt: "2026-04-10T00:00:00.000Z",
87 models: [
88 {
89 slug: "gpt-5.4",
90 name: "GPT-5.4",
91 isCustom: false,
92 isLegacy: true,
93 capabilities: null,
94 },
95 ],
96 });
97
98 expect(parsed.models[0]?.isLegacy).toBe(true);
99 });
76});100});
77101
78describe("server config forward compatibility", () => {102describe("server config forward compatibility", () => {
packages/contracts/src/server.ts+1
...@@ -68,6 +68,7 @@ export const ServerProviderModel = Schema.Struct({...@@ -68,6 +68,7 @@ export const ServerProviderModel = Schema.Struct({
68 subProvider: Schema.optional(TrimmedNonEmptyString),68 subProvider: Schema.optional(TrimmedNonEmptyString),
69 isCustom: Schema.Boolean,69 isCustom: Schema.Boolean,
70 isDefault: Schema.optional(Schema.Boolean),70 isDefault: Schema.optional(Schema.Boolean),
71 isLegacy: Schema.optional(Schema.Boolean),
71 capabilities: Schema.NullOr(ModelCapabilities),72 capabilities: Schema.NullOr(ModelCapabilities),
72});73});
73export type ServerProviderModel = typeof ServerProviderModel.Type;74export type ServerProviderModel = typeof ServerProviderModel.Type;