Glitch info for pets w/ OFFICIAL_SVG_IS_INCORRECT

src/app/WardrobePage/OutfitControls.js

@@ -348,6 +348,24 @@ function OutfitKnownGlitchesBadge({ appearance }) {
     }
   }
 
+  // Check whether the pet has OFFICIAL_SVG_IS_INCORRECT.
+  const petLayers = petAppearance?.layers || [];
+  for (const layer of petLayers) {
+    const layerHasOfficialSvgIsIncorrect = (layer.knownGlitches || []).includes(
+      "OFFICIAL_SVG_IS_INCORRECT"
+    );
+    if (layerHasOfficialSvgIsIncorrect) {
+      glitchMessages.push(
+        <Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
+          There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
+          zone that prevents us from showing the full-scale SVG version of the
+          image. Instead, we're showing a PNG, which might look a bit blurry on
+          larger screens.
+        </Box>
+      );
+    }
+  }
+
   if (glitchMessages.length === 0) {
     return null;
   }

src/app/components/useOutfitAppearance.js

@@ -207,16 +207,26 @@ export const itemAppearanceFragmentForGetVisibleLayers = gql`
 export const appearanceLayerFragment = gql`
   fragment AppearanceLayerForOutfitPreview on AppearanceLayer {
     id
-    remoteId # HACK: This is for Support tools, but other views don't need it
     svgUrl
     canvasMovieLibraryUrl
     imageUrl(size: SIZE_600)
-    swfUrl # HACK: This is for Support tools, but other views don't need it
-    knownGlitches # HACK: This is for Support tools, but other views don't need it
     bodyId
+    knownGlitches
     zone {
       id
       depth @client
+      label @client
+    }
+  }
+`;
+
+const appearanceLayerFragmentForSupport = gql`
+  fragment AppearanceLayerForSupport on AppearanceLayer {
+    id
+    remoteId # HACK: This is for Support tools, but other views don't need it
+    swfUrl # HACK: This is for Support tools, but other views don't need it
+    zone {
+      id
       label @client # HACK: This is for Support tools, but other views don't need it
     }
   }
@@ -226,12 +236,15 @@ export const itemAppearanceFragment = gql`
   fragment ItemAppearanceForOutfitPreview on ItemAppearance {
     id
     layers {
+      id
       ...AppearanceLayerForOutfitPreview
+      ...AppearanceLayerForSupport # HACK: Most users don't need this!
     }
     ...ItemAppearanceForGetVisibleLayers
   }
 
   ${appearanceLayerFragment}
+  ${appearanceLayerFragmentForSupport}
   ${itemAppearanceFragmentForGetVisibleLayers}
 `;
 
@@ -257,12 +270,11 @@ export const petAppearanceFragment = gql`
     bodyId
     layers {
       id
-      svgUrl
-      canvasMovieLibraryUrl
-      imageUrl(size: SIZE_600)
+      ...AppearanceLayerForOutfitPreview
     }
     ...PetAppearanceForGetVisibleLayers
   }
 
+  ${appearanceLayerFragment}
   ${petAppearanceFragmentForGetVisibleLayers}
 `;