feat(ui): render creditedAs as link text with canonical tooltip

ui/src/common/ArtistLinkField.jsx

@@ -12,6 +12,10 @@ const ALink = withWidth()((props) => {
   const artistLink = useGetHandleArtistClick(width)
   const dispatch = useDispatch()
 
+  const displayName = artist.creditedAs || artist.name
+  const showCanonicalTooltip =
+    artist.creditedAs && artist.creditedAs !== artist.name
+
   return (
     <Link
       key={artist.id}
@@ -20,9 +24,10 @@ const ALink = withWidth()((props) => {
         e.stopPropagation()
         dispatch(closeExtendedInfoDialog())
       }}
+      title={showCanonicalTooltip ? artist.name : undefined}
       {...rest}
     >
-      {artist.name}
+      {displayName}
       {artist.subroles?.length > 0 ? ` (${artist.subroles.join(', ')})` : ''}
     </Link>
   )
@@ -37,7 +42,8 @@ const parseAndReplaceArtists = (
   let lastIndex = 0
 
   albumArtists?.forEach((artist) => {
-    const index = displayAlbumArtist.indexOf(artist.name, lastIndex)
+    const matchName = artist.creditedAs || artist.name
+    const index = displayAlbumArtist.indexOf(matchName, lastIndex)
     if (index !== -1) {
       // Add text before the artist name
       if (index > lastIndex) {
@@ -47,7 +53,7 @@ const parseAndReplaceArtists = (
       result.push(
         <ALink artist={artist} className={className} key={artist.id} />,
       )
-      lastIndex = index + artist.name.length
+      lastIndex = index + matchName.length
     }
   })
 

ui/src/common/ArtistLinkField.test.jsx

@@ -213,6 +213,81 @@ describe('ArtistLinkField', () => {
     })
   })
 
+  describe('creditedAs', () => {
+    it('renders creditedAs as the link text when present', () => {
+      const record = {
+        artist: 'PAS',
+        participants: {
+          artist: [
+            {
+              id: 'canon-1',
+              name: 'Planetary Assault Systems',
+              creditedAs: 'PAS',
+            },
+          ],
+        },
+      }
+
+      render(<ArtistLinkField record={record} source="artist" />)
+
+      expect(screen.getByText('PAS')).toBeInTheDocument()
+      expect(
+        screen.queryByText('Planetary Assault Systems'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('sets a title tooltip with the canonical name when creditedAs differs', () => {
+      const record = {
+        artist: 'PAS',
+        participants: {
+          artist: [
+            {
+              id: 'canon-1',
+              name: 'Planetary Assault Systems',
+              creditedAs: 'PAS',
+            },
+          ],
+        },
+      }
+
+      render(<ArtistLinkField record={record} source="artist" />)
+
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('title', 'Planetary Assault Systems')
+    })
+
+    it('falls back to name when creditedAs is missing', () => {
+      const record = {
+        artist: 'Some Artist',
+        participants: {
+          artist: [{ id: 'canon-2', name: 'Some Artist' }],
+        },
+      }
+
+      render(<ArtistLinkField record={record} source="artist" />)
+
+      expect(screen.getByText('Some Artist')).toBeInTheDocument()
+      const link = screen.getByRole('link')
+      expect(link).not.toHaveAttribute('title')
+    })
+
+    it('does not set a tooltip when creditedAs equals name', () => {
+      const record = {
+        artist: 'Same Name',
+        participants: {
+          artist: [
+            { id: 'canon-3', name: 'Same Name', creditedAs: 'Same Name' },
+          ],
+        },
+      }
+
+      render(<ArtistLinkField record={record} source="artist" />)
+
+      const link = screen.getByRole('link')
+      expect(link).not.toHaveAttribute('title')
+    })
+  })
+
   describe('when limiting displayed artists', () => {
     it('limits the number of artists displayed', () => {
       const record = {