feat(ui): model relationship management

Adds full support for managing model-to-model relationships in the UI and backend.

Introduces RelatedModels subpanel for linking and unlinking models in model management.
 - Adds REST API routes for adding, removing, and retrieving model relationships.
 - New database migration: creates model_relationships table for bidirectional links.
 - New service layer (model_relationships) for relationship management.
 - Updated frontend: Related models float to top of LoRA/Main grouped model comboboxes for quick access.
     - Added 'Show Only Related' toggle badge to MainModelPicker filter bar

**Amended commit to remove changes to ParamMainModelSelect.tsx and MainModelPicker.tsx to avoid conflict with upstream deletion/ rewrite**

invokeai/frontend/web/src/common/hooks/useRelatedGroupedModelCombobox.ts

@@ -0,0 +1,92 @@
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import type { GroupBase } from 'chakra-react-select';
+import type { ModelIdentifierField } from 'features/nodes/types/common';
+import { useTranslation } from 'react-i18next';
+import type { AnyModelConfig } from 'services/api/types';
+
+import { useGroupedModelCombobox } from './useGroupedModelCombobox';
+import { useRelatedModelKeys } from './useRelatedModelKeys';
+import { useSelectedModelKeys } from './useSelectedModelKeys';
+
+type UseRelatedGroupedModelComboboxArg<T extends AnyModelConfig> = {
+  modelConfigs: T[];
+  selectedModel?: ModelIdentifierField | null;
+  onChange: (value: T | null) => void;
+  getIsDisabled?: (model: T) => boolean;
+  isLoading?: boolean;
+  groupByType?: boolean;
+};
+
+// Custom hook to overlay the grouped model combobox with related models on top!
+// Cleaner than hooking into useGroupedModelCombobox with a flag to enable/disable the related models
+// Also allows for related models to be shown conditionally with some pretty simple logic if it ends up as a config flag.
+
+type UseRelatedGroupedModelComboboxReturn = {
+  value: ComboboxOption | undefined | null;
+  options: GroupBase<ComboboxOption>[];
+  onChange: ComboboxOnChange;
+  placeholder: string;
+  noOptionsMessage: () => string;
+};
+
+export function useRelatedGroupedModelCombobox<T extends AnyModelConfig>({
+  modelConfigs,
+  selectedModel,
+  onChange,
+  isLoading = false,
+  getIsDisabled,
+  groupByType,
+}: UseRelatedGroupedModelComboboxArg<T>): UseRelatedGroupedModelComboboxReturn {
+  const { t } = useTranslation();
+
+  const selectedKeys = useSelectedModelKeys();
+
+  const relatedKeys = useRelatedModelKeys(selectedKeys);
+
+  // Base grouped options
+  const base = useGroupedModelCombobox({
+    modelConfigs,
+    selectedModel,
+    onChange,
+    getIsDisabled,
+    isLoading,
+    groupByType,
+  });
+
+  // If no related models selected, just return base
+  if (relatedKeys.size === 0) {
+    return base;
+  }
+
+  const relatedOptions: ComboboxOption[] = [];
+  const updatedGroups: GroupBase<ComboboxOption>[] = [];
+
+  for (const group of base.options) {
+    const remainingOptions: ComboboxOption[] = [];
+
+    for (const option of group.options) {
+      if (relatedKeys.has(option.value)) {
+        relatedOptions.push({ ...option, label: `* ${option.label}` });
+      } else {
+        remainingOptions.push(option);
+      }
+    }
+
+    if (remainingOptions.length > 0) {
+      updatedGroups.push({
+        label: group.label,
+        options: remainingOptions,
+      });
+    }
+  }
+
+  const finalOptions: GroupBase<ComboboxOption>[] =
+    relatedOptions.length > 0
+      ? [{ label: t('modelManager.relatedModels'), options: relatedOptions }, ...updatedGroups]
+      : updatedGroups;
+
+  return {
+    ...base,
+    options: finalOptions,
+  };
+}

invokeai/frontend/web/src/common/hooks/useRelatedModelKeys.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useGetRelatedModelIdsBatchQuery } from 'services/api/endpoints/modelRelationships';
+
+/**
+ * Fetches related model keys for a given set of selected model keys.
+ * Returns a Set<string> for fast lookup.
+ */
+export const useRelatedModelKeys = (selectedKeys: Set<string>) => {
+  const { data: related = [] } = useGetRelatedModelIdsBatchQuery([...selectedKeys], {
+    skip: selectedKeys.size === 0,
+  });
+
+  return useMemo(() => new Set(related), [related]);
+};

invokeai/frontend/web/src/common/hooks/useSelectedModelKeys.ts

@@ -0,0 +1,34 @@
+import { useAppSelector } from 'app/store/storeHooks';
+
+/**
+ * Gathers all currently selected model keys from parameters and loras.
+ * This includes the main model, VAE, refiner model, controlnet, and loras.
+ */
+export const useSelectedModelKeys = () => {
+  return useAppSelector((state) => {
+    const keys = new Set<string>();
+    const main = state.params.model;
+    const vae = state.params.vae;
+    const refiner = state.params.refinerModel;
+    const controlnet = state.params.controlLora;
+    const loras = state.loras.loras.map((l) => l.model);
+
+    if (main) {
+      keys.add(main.key);
+    }
+    if (vae) {
+      keys.add(vae.key);
+    }
+    if (refiner) {
+      keys.add(refiner.key);
+    }
+    if (controlnet) {
+      keys.add(controlnet.key);
+    }
+    for (const lora of loras) {
+      keys.add(lora.key);
+    }
+
+    return keys;
+  });
+};