Add Hall of Fame team selection for completed runs

After marking a run as completed, a modal prompts the player to select
which Pokemon (up to 6) entered the Hall of Fame. The selection is stored
as hof_encounter_ids on the run, displayed in the victory banner, and
can be edited later. This lays the foundation for scoping genlocke
retireHoF to only the actual HoF team.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/RunEncounters.tsx

@@ -10,6 +10,7 @@ import {
   EggEncounterModal,
   EncounterModal,
   EncounterMethodBadge,
+  HofTeamModal,
   StatCard,
   PokemonCard,
   StatusChangeModal,
@@ -413,6 +414,7 @@ export function RunEncounters() {
   const [selectedTeamEncounter, setSelectedTeamEncounter] =
     useState<EncounterDetail | null>(null)
   const [showEndRun, setShowEndRun] = useState(false)
+  const [showHofModal, setShowHofModal] = useState(false)
   const [showShinyModal, setShowShinyModal] = useState(false)
   const [showEggModal, setShowEggModal] = useState(false)
   const [expandedBosses, setExpandedBosses] = useState<Set<number>>(new Set())
@@ -667,6 +669,13 @@ export function RunEncounters() {
     (e) => e.status === 'caught' && e.faintLevel !== null,
   )
 
+  // Resolve HoF team encounters from IDs
+  const hofTeam = useMemo(() => {
+    if (!run.hofEncounterIds || run.hofEncounterIds.length === 0) return null
+    const idSet = new Set(run.hofEncounterIds)
+    return normalEncounters.filter((e) => idSet.has(e.id))
+  }, [run.hofEncounterIds, normalEncounters])
+
   const toggleGroup = (groupId: number) => {
     updateExpandedGroups((prev) => {
       const next = new Set(prev)
@@ -877,6 +886,48 @@ export function RunEncounters() {
               </button>
             )}
           </div>
+          {/* HoF Team Display */}
+          {run.status === 'completed' && (
+            <div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs font-medium text-blue-600 dark:text-blue-400 uppercase tracking-wider">
+                  Hall of Fame
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setShowHofModal(true)}
+                  className="text-xs text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                >
+                  {hofTeam ? 'Edit' : 'Select team'}
+                </button>
+              </div>
+              {hofTeam ? (
+                <div className="flex gap-2 flex-wrap">
+                  {hofTeam.map((enc) => {
+                    const dp = enc.currentPokemon ?? enc.pokemon
+                    return (
+                      <div key={enc.id} className="flex flex-col items-center">
+                        {dp.spriteUrl ? (
+                          <img src={dp.spriteUrl} alt={dp.name} className="w-12 h-12" />
+                        ) : (
+                          <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-sm font-bold">
+                            {dp.name[0].toUpperCase()}
+                          </div>
+                        )}
+                        <span className="text-[10px] text-blue-600 dark:text-blue-400 capitalize mt-0.5">
+                          {enc.nickname || dp.name}
+                        </span>
+                      </div>
+                    )
+                  })}
+                </div>
+              ) : (
+                <p className="text-xs text-blue-500/60 dark:text-blue-400/60 italic">
+                  No HoF team selected yet
+                </p>
+              )}
+            </div>
+          )}
         </div>
       )}
 
@@ -1373,7 +1424,14 @@ export function RunEncounters() {
           onConfirm={(status) => {
             updateRun.mutate(
               { status },
-              { onSuccess: () => setShowEndRun(false) },
+              {
+                onSuccess: () => {
+                  setShowEndRun(false)
+                  if (status === 'completed') {
+                    setShowHofModal(true)
+                  }
+                },
+              },
             )
           }}
           onClose={() => setShowEndRun(false)}
@@ -1381,6 +1439,21 @@ export function RunEncounters() {
           genlockeContext={run.genlocke}
         />
       )}
+
+      {/* HoF Team Selection Modal */}
+      {showHofModal && (
+        <HofTeamModal
+          alive={alive}
+          onSubmit={(encounterIds) => {
+            updateRun.mutate(
+              { hofEncounterIds: encounterIds },
+              { onSuccess: () => setShowHofModal(false) },
+            )
+          }}
+          onSkip={() => setShowHofModal(false)}
+          isPending={updateRun.isPending}
+        />
+      )}
     </div>
   )
 }