fix(web): decode multi-level HTML entities in display text

Add shared utility to decode HTML entities iteratively, handling
double/triple-encoded entities like & → &. Applied to
RelationshipItem display names and EntityDataDisplay text rendering.

OpenAlex API data sometimes contains double-encoded entities.

Author: Mearman

apps/web/src/components/EntityDataDisplay.tsx

@@ -36,27 +36,11 @@ import { Link } from "@tanstack/react-router";
 
 import { ICON_SIZE } from "@/config/style-constants";
 import { useVersionComparison } from "@/hooks/use-version-comparison";
+import { decodeHtmlEntities } from "@/utils/decode-html-entities";
 import { humanizeFieldName } from "@/utils/field-labels";
 import { formatNumber } from "@/utils/format-number";
 import { convertOpenAlexToInternalLink, isOpenAlexId } from "@/utils/openalex-link-conversion";
 
-/**
- * Decode HTML entities in text
- * Handles common entities like &, <, >, ", etc.
- */
-const decodeHtmlEntities = (text: string): string => {
-  const entities: Record<string, string> = {
-    "&amp;": "&",
-    "&lt;": "<",
-    "&gt;": ">",
-    "&quot;": '"',
-    "&#39;": "'",
-    "&apos;": "'",
-    "&nbsp;": " ",
-  };
-  return text.replaceAll(/&(?:amp|lt|gt|quot|apos|nbsp|#39);/g, (match) => entities[match] ?? match);
-};
-
 /** Section priority for consistent ordering */
 const SECTION_PRIORITY: Record<string, number> = {
   Identifiers: 1,

apps/web/src/components/relationship/RelationshipItem.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from '@tanstack/react-router';
 import React from 'react';
 
 import type { RelationshipItem as RelationshipItemType } from '@/types/relationship';
+import { decodeHtmlEntities } from '@/utils/decode-html-entities';
 import { formatMetadata } from '@/utils/formatMetadata';
 
 export interface RelationshipItemProps {
@@ -75,7 +76,7 @@ export const RelationshipItem: React.FC<RelationshipItemProps> = ({ item }) => {
     <Stack gap="xs" data-testid={`relationship-item-${item.id}`}>
       <Group gap="xs">
         <Anchor href={entityUrl} onClick={handleClick} size="sm">
-          {item.displayName || cleanEntityId}
+          {decodeHtmlEntities(item.displayName || cleanEntityId)}
         </Anchor>
         {item.isSelfReference && (
           <Text size="xs" c="dimmed">
@@ -85,7 +86,7 @@ export const RelationshipItem: React.FC<RelationshipItemProps> = ({ item }) => {
       </Group>
       {item.subtitle && (
         <Text size="xs" c="dimmed" data-testid="relationship-subtitle">
-          {item.subtitle}
+          {decodeHtmlEntities(item.subtitle)}
         </Text>
       )}
       {item.metadata && (

apps/web/src/utils/decode-html-entities.ts

@@ -0,0 +1,68 @@
+/**
+ * HTML Entity Decoding Utility
+ *
+ * Handles decoding of HTML entities in text, including multi-level encoding
+ * (e.g., & -> & -> &)
+ */
+
+/**
+ * Common HTML entity mappings
+ */
+const HTML_ENTITIES: Record<string, string> = {
+	"&amp;": "&",
+	"&lt;": "<",
+	"&gt;": ">",
+	"&quot;": '"',
+	"&#39;": "'",
+	"&apos;": "'",
+	"&nbsp;": " ",
+};
+
+/**
+ * Pattern to match HTML entities we want to decode
+ */
+const ENTITY_PATTERN = /&(?:amp|lt|gt|quot|apos|nbsp|#39);/g;
+
+/**
+ * Maximum iterations to prevent infinite loops
+ */
+const MAX_DECODE_ITERATIONS = 5;
+
+/**
+ * Decode HTML entities in text, handling multiple levels of encoding
+ *
+ * Some data sources double or triple-encode HTML entities
+ * (e.g., "&amp;amp;" should become "&" not "&amp;")
+ *
+ * @param text - The text containing HTML entities
+ * @returns Text with all HTML entities decoded
+ *
+ * @example
+ * decodeHtmlEntities("&amp;") // "&"
+ * decodeHtmlEntities("&amp;amp;") // "&" (double-encoded)
+ * decodeHtmlEntities("&amp;amp;amp;") // "&" (triple-encoded)
+ * decodeHtmlEntities("Foo &amp;amp; Bar") // "Foo & Bar"
+ */
+export const decodeHtmlEntities = (text: string): string => {
+	let result = text;
+	let iterations = 0;
+
+	// Keep decoding until no more changes (handles multi-level encoding)
+	// Use iteration limit to prevent infinite loops on malformed input
+	while (iterations < MAX_DECODE_ITERATIONS) {
+		const decoded = result.replaceAll(
+			ENTITY_PATTERN,
+			(match) => HTML_ENTITIES[match] ?? match
+		);
+
+		// No more entities to decode
+		if (decoded === result) {
+			break;
+		}
+
+		result = decoded;
+		iterations++;
+	}
+
+	return result;
+};