fix(ui): render card preview symbols

client/src/components/card/CardPreview.tsx

@@ -13,6 +13,7 @@ import type { CardRuling } from "../../services/engineRuntime.ts";
 import { useGameStore } from "../../stores/gameStore.ts";
 import { useUiStore } from "../../stores/uiStore.ts";
 import { ManaCostPips } from "../mana/ManaCostPips.tsx";
+import { RichLabel } from "../mana/RichLabel.tsx";
 import { GameplayTooltip } from "../ui/GameplayTooltip.tsx";
 import { computePTDisplay, formatCounterType, formatTypeLine, toRoman } from "../../viewmodel/cardProps.ts";
 import {
@@ -676,7 +677,8 @@ function DetailPills({ details, badgeClass }: { details: [string, string][]; bad
     <div className="mt-1 flex flex-wrap gap-1">
       {details.map(([key, value]) => (
         <span key={key} className={`inline-block rounded-[4px] px-1.5 py-px text-[9px] leading-tight ${badgeClass}`}>
-          <span className="opacity-60">{key}:</span> {value}
+          <span className="opacity-60">{key}:</span>{" "}
+          <RichLabel text={value} size="xs" />
         </span>
       ))}
     </div>
@@ -701,11 +703,19 @@ function ParsedItemRow({ item, depth = 0 }: { item: ParsedItem; depth?: number }
               <span className={`text-[8px] font-bold uppercase tracking-wider ${statusColor} opacity-70`}>
                 {CATEGORY_ABBR[item.category]}
               </span>
-              <span className="text-[11px] leading-snug text-gray-200 font-medium">{item.label}</span>
+              <RichLabel
+                text={item.label}
+                size="xs"
+                className="text-[11px] leading-snug text-gray-200 font-medium"
+              />
               {!item.supported && <span className="text-[9px] text-rose-400">{t("preview.unsupported")}</span>}
             </div>
             {item.source_text && (
-              <div className="text-[10px] leading-snug text-gray-500 mt-0.5 italic">{item.source_text}</div>
+              <RichLabel
+                text={item.source_text}
+                size="xs"
+                className="mt-0.5 block text-[10px] italic leading-snug text-gray-500"
+              />
             )}
             <DetailPills details={item.details ?? []} badgeClass={catStyle.badge} />
           </div>
@@ -880,13 +890,18 @@ function CardInfoPanel({
       )}
       {/* Type line */}
       <div className="font-semibold text-gray-300">
-        {formatTypeLine(obj.card_types, obj.keywords)}
+        <RichLabel text={formatTypeLine(obj.card_types, obj.keywords)} size="xs" />
       </div>
 
       {activateLabels.length > 0 && (
         <div className="mt-1 text-cyan-300/90">
           {activateLabels.map((label) => (
-            <div key={label}>{t("preview.activateCost", { cost: label })}</div>
+            <RichLabel
+              key={label}
+              text={t("preview.activateCost", { cost: label })}
+              size="xs"
+              className="block"
+            />
           ))}
         </div>
       )}
@@ -906,15 +921,15 @@ function CardInfoPanel({
                 aria-describedby={tooltipId}
                 className={`group relative cursor-default rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-white/60 ${granted ? "text-indigo-300" : "text-white"}`}
               >
-                {getKeywordDisplayText(kw)}
+                <RichLabel text={getKeywordDisplayText(kw)} size="xs" />
                 {source && (
                   <span className="ml-1 text-[10px] text-indigo-400/80">
                     {t("preview.fromSource", { source })}
                   </span>
                 )}
                 {reminder && (
                   <GameplayTooltip id={tooltipId} className="right-auto left-0 mb-1.5 w-52 px-2.5 py-1.5 text-[10px] font-normal text-slate-200 shadow-xl">
-                    {reminder}
+                    <RichLabel text={reminder} size="xs" />
                   </GameplayTooltip>
                 )}
               </span>
@@ -976,12 +991,15 @@ function CardInfoPanel({
             {chosenAttributes.map((attribute, index) => {
               const formatted = formatChosenAttribute(attribute);
               return (
-                <div key={`${attribute.type}-${index}`}>
-                  {t("preview.chosen.entry", {
+                <RichLabel
+                  key={`${attribute.type}-${index}`}
+                  text={t("preview.chosen.entry", {
                     kind: formatted.label,
                     value: formatted.value,
                   })}
-                </div>
+                  size="xs"
+                  className="block"
+                />
               );
             })}
           </div>
@@ -1012,7 +1030,7 @@ function RulingsSection({ rulings }: { rulings: CardRuling[] }) {
         {visible.map((ruling, i) => (
           <li key={`${ruling.date}-${i}`} className="leading-snug">
             <span className="mr-1 text-gray-500">[{ruling.date}]</span>
-            <span>{ruling.text}</span>
+            <RichLabel text={ruling.text} size="xs" />
           </li>
         ))}
       </ul>

client/src/components/card/__tests__/CardPreview.test.tsx

@@ -90,7 +90,7 @@ afterEach(() => {
   vi.clearAllMocks();
   Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 1280 });
   Object.defineProperty(window, "innerHeight", { configurable: true, writable: true, value: 768 });
-  useGameStore.setState({ gameState: null, spellCosts: {} });
+  useGameStore.setState({ gameState: null, spellCosts: {}, legalActionsByObject: {} });
   useUiStore.setState({ inspectedObjectId: null, altHeld: false });
 });
 
@@ -130,11 +130,46 @@ describe("CardPreview chosen attributes", () => {
     render(<CardPreview cardName="Pithing Needle" position={{ x: 20, y: 20 }} />);
 
     expect(screen.getByText("Flying")).toBeInTheDocument();
-    expect(screen.getByText("Ward {2}")).toHaveAttribute("aria-describedby");
+    expect(screen.getByText("Ward").closest("[aria-describedby]")).not.toBeNull();
+    expect(screen.getAllByAltText("2").length).toBeGreaterThan(0);
     expect(screen.getByText(/creatures with flying or reach/)).toBeInTheDocument();
     expect(screen.getByText(/ward cost/)).toBeInTheDocument();
   });
 
+  it("renders mana symbols in battlefield preview ability text", () => {
+    const object = battlefieldObject({
+      abilities: [
+        {
+          description: "{G}, {T}: Add {G}.",
+          effects: [],
+          targets: [],
+          cost: { type: "Tap" },
+          timing: "AnyTime",
+          kind: "Activated",
+        },
+      ],
+    });
+    useGameStore.setState({
+      gameState: gameStateWithObject(object),
+      legalActionsByObject: {
+        [String(object.id)]: [
+          {
+            type: "ActivateAbility",
+            data: { source_id: object.id, ability_index: 0 },
+          },
+        ],
+      },
+      spellCosts: {},
+    });
+    useUiStore.setState({ inspectedObjectId: object.id, altHeld: false });
+
+    render(<CardPreview cardName="Pithing Needle" position={{ x: 20, y: 20 }} />);
+
+    expect(screen.getByText(/Activate/)).toBeInTheDocument();
+    expect(screen.getAllByAltText("T").length).toBeGreaterThan(0);
+    expect(screen.getAllByAltText("G").length).toBeGreaterThan(0);
+  });
+
   it("passes token lookup metadata to the mobile preview image hook", () => {
     Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 500 });
     const object = battlefieldObject({

client/src/components/modal/TriggerOrderModal.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import type { PendingTriggerSummary } from "../../adapter/types.ts";
 import { useInspectHoverProps } from "../../hooks/useInspectHoverProps.ts";
 import { useGameStore } from "../../stores/gameStore.ts";
+import { RichLabel } from "../mana/RichLabel.tsx";
 import { DialogShell } from "./DialogShell.tsx";
 
 const EMPTY_TRIGGER_SUMMARIES: PendingTriggerSummary[] = [];
@@ -90,7 +91,7 @@ export function TriggerOrderModal() {
                   </div>
                   {trigger.description && (
                     <div className="text-sm text-white/70">
-                      {trigger.description}
+                      <RichLabel text={trigger.description} size="xs" />
                     </div>
                   )}
                 </div>

client/src/components/modal/__tests__/TriggerOrderModal.test.tsx

@@ -6,15 +6,18 @@ import { isWaitingForHandled } from "../../../game/waitingForRegistry.ts";
 import { useGameStore } from "../../../stores/gameStore.ts";
 import { TriggerOrderModal } from "../TriggerOrderModal.tsx";
 
-function orderTriggersPrompt(sourceNames: [string, string]): WaitingFor {
+function orderTriggersPrompt(
+  sourceNames: [string, string],
+  descriptions?: [string, string],
+): WaitingFor {
   return {
     type: "OrderTriggers",
     data: {
       player: 0,
       triggers: sourceNames.map((sourceName, index) => ({
         source_id: index + 1,
         source_name: sourceName,
-        description: `${sourceName} triggered ability`,
+        description: descriptions?.[index] ?? `${sourceName} triggered ability`,
       })),
     },
   };
@@ -58,4 +61,19 @@ describe("TriggerOrderModal", () => {
       data: { order: [0, 1] },
     });
   });
+
+  it("renders mana symbols in trigger descriptions", () => {
+    useGameStore.setState({
+      waitingFor: orderTriggersPrompt(
+        ["Llanowar Elves", "Soul Warden"],
+        ["{T}: Add {G}.", "Whenever another creature enters, gain 1 life."],
+      ),
+      dispatch: vi.fn().mockResolvedValue([]),
+    });
+
+    render(<TriggerOrderModal />);
+
+    expect(screen.getAllByAltText("T").length).toBeGreaterThan(0);
+    expect(screen.getAllByAltText("G").length).toBeGreaterThan(0);
+  });
 });

client/src/components/zone/CommandZone.tsx

@@ -215,13 +215,13 @@ function EmblemCard({ group, label }: { group: GroupedEmblem; label: string }) {
               >
                 ✦
               </span>
-              <p
+              <RichLabel
+                text={group.description}
+                size="xs"
                 className={`relative z-10 px-1 text-center leading-tight text-amber-50/90 drop-shadow-[0_1px_1px_rgba(0,0,0,0.9)] ${
                   isCompactHeight ? "line-clamp-2 text-[6px]" : "line-clamp-3 text-[7px]"
                 }`}
-              >
-                {group.description}
-              </p>
+              />
             </div>
           )}