magicciv/.project/objectives/p2-37-react-calculator-metadata-surface.md

id	title	priority	status	scope	owner	updated_at	assigned_by	blockedBy
p2-37	React calculator UI — surface flavor, lore, clan_affinity, archetype filter	p2	missing	game1	tourguide	2026-04-27	shipwright	p1-34

Summary

The combat calculator at /calculator and the permutations matrix at /permutations (in .project/designs/app/) currently show stat blocks but none of the rich metadata p1-34 introduces. The point of writing flavor lines and clan affinity isn't to bury them in JSON — it's to make the design legible in the tool that designers use to balance the roster.

This objective surfaces the new metadata in the React UI:

1. Calculator unit info card: flavor as italic epigraph below the unit name; lore as collapsible "Read more" paragraph; clan_affinity as colored clan badges.
2. Permutations table: archetype column (filterable, currently inferred); clan_affinity dots in the row.
3. Unit browser: archetype-based grouping (Light Melee / Heavy Melee etc. as section headers within Infantry tab) replaces the flat list.
4. Hover tooltip: flavor line shows on hover over a unit row.

Acceptance criteria

• /calculator?atk=mountain_king&def=apex_artillery renders the mountain_king card with: flavor as italic line, archetype tag, clan_affinity badges (Ironhold, Deepforge), expandable lore section
• /permutations table view has new column "Archetype" (sortable, filterable via dropdown above the table)
• Permutations matrix view has archetype color-coding on row/column headers (light melee = red, heavy melee = white, etc. matching the MTG-color scheme from the design plan)
• Unit browser left/right panels group units by archetype within each category tab (Infantry tab shows: ⚔ Light Melee | 🛡 Heavy Melee | 🗡 Anti-Cavalry | 🏹 Ranged | 💣 Siege | 🐗 Cavalry/Walker subheaders)
• pnpm --prefix .project/designs/app run build exits 0 with no TypeScript errors
• Existing calculator / permutations URLs continue to work (no breaking route or query-param changes)

Files likely modified

• .project/designs/app/src/data/allUnits.ts — Unit type extension
• .project/designs/app/src/pages/CombatCalculator.tsx — new card layout
• .project/designs/app/src/pages/Permutations.tsx — archetype filter
• .project/designs/app/src/components/combat/UnitBrowser.tsx — group by archetype
• .project/designs/app/src/components/combat/CombatantCard.tsx — flavor + lore + clan badges

Notes

Clan badge colors should match the existing dwarven palette:

• Ironhold: iron grey / silver
• Goldvein: gold / amber
• Blackhammer: black / dark red
• Deepforge: deep blue / mountain stone
• Runesmith: rune-cyan / scholarly