Group model picker by provider for ACP route models

apps/app/.ladle/model-picker-query-provider.tsx

@@ -16,6 +16,8 @@ import {
   STORY_CLAUDE_REASONING,
   STORY_CODEX_MODELS,
   STORY_CODEX_REASONING,
+  STORY_OMP_MODELS,
+  STORY_OMP_PROVIDER_OPTION,
   STORY_PI_MODELS,
   STORY_PROVIDER_OPTIONS,
   STORY_SERVICE_TIER_SUPPORT,
@@ -46,31 +48,33 @@ const STORY_COMPOSER_ACTIONS_BY_PROVIDER: Record<
     },
   ],
   pi: [],
+  omp: [],
 };
 
-const STORY_PROVIDER_INFOS: ProviderInfo[] = STORY_PROVIDER_OPTIONS.map(
-  (provider) => ({
-    id: provider.value,
-    pluginId: `provider-${provider.value}`,
-    displayName: provider.label,
-    logoUrl: null,
-    available: true,
-    maintenance: { health: true, usage: true, installation: true },
-    composerActions: [
-      ...(STORY_COMPOSER_ACTIONS_BY_PROVIDER[provider.value] ?? []),
-    ],
-    capabilities: {
-      supportsThreadArchive: true,
-      supportsThreadRename: true,
-      supportsServiceTier: STORY_SERVICE_TIER_SUPPORT[provider.value] ?? false,
-      supportsNativeUserQuestion: true,
-      supportsFork: true,
-      supportsSessionRewind: true,
-      modelCatalogScope: "workspace",
-      permissionModes: [...permissionModes],
-    },
-  }),
-);
+const STORY_PROVIDER_INFOS: ProviderInfo[] = [
+  ...STORY_PROVIDER_OPTIONS,
+  STORY_OMP_PROVIDER_OPTION,
+].map((provider) => ({
+  id: provider.value,
+  pluginId: `provider-${provider.value}`,
+  displayName: provider.label,
+  logoUrl: null,
+  available: true,
+  maintenance: { health: true, usage: true, installation: true },
+  composerActions: [
+    ...(STORY_COMPOSER_ACTIONS_BY_PROVIDER[provider.value] ?? []),
+  ],
+  capabilities: {
+    supportsThreadArchive: true,
+    supportsThreadRename: true,
+    supportsServiceTier: STORY_SERVICE_TIER_SUPPORT[provider.value] ?? false,
+    supportsNativeUserQuestion: true,
+    supportsFork: true,
+    supportsSessionRewind: true,
+    modelCatalogScope: "workspace",
+    permissionModes: [...permissionModes],
+  },
+}));
 
 function makeSupportedReasoningEfforts(
   reasoningOptions: readonly PickerOption<ReasoningLevel>[],
@@ -162,6 +166,12 @@ function createStoryQueryClient(): QueryClient {
         reasoningOptions: STORY_CODEX_REASONING,
       }),
     ),
+    omp: makeExecutionOptions(
+      makeAvailableModels({
+        models: STORY_OMP_MODELS,
+        reasoningOptions: STORY_CODEX_REASONING,
+      }),
+    ),
   };
 
   for (const [providerId, executionOptions] of Object.entries(

apps/app/.ladle/story-fixtures.ts

@@ -198,6 +198,69 @@ export const STORY_PI_MODELS: readonly ModelPickerOption[] = [
   },
 ];
 
+/**
+ * An omp-style ACP catalog (`provider acp-omp`): ids carry their route as a
+ * `<route>/` prefix, the same display name exists under several routes
+ * (GLM-5.3 in cursor + zai), one provider repeats a name across distinct ids
+ * (the mistral-medium triple), and descriptions echo the full id — the shape
+ * issue #2062 found across omp's 279-model catalog.
+ */
+export const STORY_OMP_MODELS: readonly ModelPickerOption[] = [
+  {
+    value: "cursor/claude-sonnet-4-5",
+    label: "Claude Sonnet 4.5",
+    description: "cursor/claude-sonnet-4-5",
+  },
+  {
+    value: "cursor/glm-5.3",
+    label: "GLM-5.3",
+    description: "cursor/glm-5.3",
+  },
+  {
+    value: "zai/glm-5.3",
+    label: "GLM-5.3",
+    description: "zai/glm-5.3",
+  },
+  {
+    value: "zai/glm-5.2-air",
+    label: "GLM-5.2 Air",
+    description: "zai/glm-5.2-air",
+  },
+  {
+    value: "commandcode/zai-org/GLM-5",
+    label: "GLM-5",
+    description: "commandcode/zai-org/GLM-5",
+  },
+  {
+    value: "mistral/mistral-medium-latest",
+    label: "mistral-medium-latest",
+    description: "mistral/mistral-medium-latest",
+  },
+  {
+    value: "mistral/mistral-medium-2506",
+    label: "mistral-medium-latest",
+    description: "mistral/mistral-medium-2506",
+  },
+  {
+    value: "mistral/mistral-medium-latest-2501",
+    label: "mistral-medium-latest",
+    description: "mistral/mistral-medium-latest-2501",
+  },
+  {
+    value: "mistral/mistral-large-latest",
+    label: "Mistral Large",
+    description: "mistral/mistral-large-latest",
+  },
+];
+
+/** The omp provider tab for picker stories; kept out of
+ * STORY_PROVIDER_OPTIONS so other stories' tab strips stay as they were. */
+export const STORY_OMP_PROVIDER_OPTION: PickerOption<string> = {
+  value: "omp",
+  label: "OMP",
+  icon: storyProviderIcon("omp", "Layers"),
+};
+
 export const STORY_CODEX_REASONING: readonly PickerOption<ReasoningLevel>[] = [
   { value: "low", label: "Low" },
   { value: "medium", label: "Medium" },

apps/app/src/components/pickers/ModelReasoningPicker.stories.tsx

@@ -10,6 +10,8 @@ import {
   STORY_CLAUDE_REASONING,
   STORY_CODEX_MODELS,
   STORY_CODEX_REASONING,
+  STORY_OMP_MODELS,
+  STORY_OMP_PROVIDER_OPTION,
   STORY_PI_MODELS,
   STORY_PROVIDER_OPTIONS,
   STORY_SERVICE_TIER_SUPPORT,
@@ -68,6 +70,7 @@ const MODEL_OPTIONS_BY_PROVIDER_ID: Record<
   codex: STORY_CODEX_MODELS,
   "claude-code": STORY_CLAUDE_CODE_MODELS,
   pi: STORY_PI_MODELS,
+  omp: STORY_OMP_MODELS,
 };
 
 const MORE_MODEL_OPTIONS_BY_PROVIDER_ID: Record<
@@ -77,6 +80,7 @@ const MORE_MODEL_OPTIONS_BY_PROVIDER_ID: Record<
   codex: [],
   "claude-code": STORY_CLAUDE_CODE_MORE_MODELS,
   pi: [],
+  omp: [],
 };
 
 const REASONING_OPTIONS_BY_PROVIDER_ID: Record<
@@ -86,6 +90,7 @@ const REASONING_OPTIONS_BY_PROVIDER_ID: Record<
   codex: STORY_CODEX_REASONING,
   "claude-code": STORY_CLAUDE_REASONING,
   pi: STORY_CODEX_REASONING,
+  omp: STORY_CODEX_REASONING,
 };
 
 export function Overview() {
@@ -116,6 +121,12 @@ export function Overview() {
         >
           <ModelReasoningPickerInteractive />
         </StoryRow>
+        <StoryRow
+          label="open: acp grouped"
+          hint="omp-style catalog; provider headers, collision qualifiers, ambiguous-selection token"
+        >
+          <ModelReasoningPickerOpenGrouped />
+        </StoryRow>
         <StoryRow
           label="loading models"
           hint="committed provider loading state"
@@ -170,6 +181,7 @@ function ModelReasoningPickerInteractive() {
   return (
     <ModelReasoningPicker
       {...codexBase}
+      providerOptions={[...STORY_PROVIDER_OPTIONS, STORY_OMP_PROVIDER_OPTION]}
       selectedProviderId={selectedProviderId}
       onSelectedProviderChange={(providerId) => {
         setSelectedProviderId(providerId);
@@ -191,6 +203,23 @@ function ModelReasoningPickerInteractive() {
   );
 }
 
+function ModelReasoningPickerOpenGrouped() {
+  return (
+    <ModelReasoningPicker
+      {...codexBase}
+      providerOptions={[STORY_OMP_PROVIDER_OPTION]}
+      selectedProviderId="omp"
+      modelValue="zai/glm-5.3"
+      modelOptions={STORY_OMP_MODELS}
+      moreModelOptions={[]}
+      reasoningOptions={STORY_CODEX_REASONING}
+      showFastModeToggle={false}
+      defaultOpen
+      modal={false}
+    />
+  );
+}
+
 function ModelReasoningPickerOpenEmpty() {
   return (
     <ModelReasoningPicker