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>

.beans/nuzlocke-tracker-xbxv--hall-of-fame-team-selection.md

@@ -1,11 +1,11 @@
 ---
 # nuzlocke-tracker-xbxv
 title: Hall of Fame team selection
-status: todo
+status: in-progress
 type: feature
 priority: normal
 created_at: 2026-02-09T09:14:44Z
-updated_at: 2026-02-09T09:15:08Z
+updated_at: 2026-02-09T09:16:34Z
 blocking:
     - nuzlocke-tracker-25mh
     - nuzlocke-tracker-h3fw
@@ -37,10 +37,10 @@ This is a general nuzlocke feature (not genlocke-specific) and provides value on
 - Allow editing the HoF team after the fact (in case the player forgot or made a mistake)
 
 ## Checklist
-- [ ] Add `hof_encounter_ids` JSONB column to `nuzlocke_runs` (nullable array of ints)
-- [ ] Migration for the new column
-- [ ] Update `RunResponse` / `RunDetailResponse` schemas to include `hofEncounterIds`
-- [ ] Extend `PATCH /runs/{id}` to accept `hofEncounterIds` (validate they belong to the run and are alive)
-- [ ] Build HoF team selection modal (shown after completing a run)
-- [ ] Display HoF team in the victory banner on completed run pages
-- [ ] Allow editing HoF team selection on completed runs
+- [x] Add `hof_encounter_ids` JSONB column to `nuzlocke_runs` (nullable array of ints)
+- [x] Migration for the new column
+- [x] Update `RunResponse` / `RunDetailResponse` schemas to include `hofEncounterIds`
+- [x] Extend `PATCH /runs/{id}` to accept `hofEncounterIds` (validate they belong to the run and are alive)
+- [x] Build HoF team selection modal (shown after completing a run)
+- [x] Display HoF team in the victory banner on completed run pages
+- [x] Allow editing HoF team selection on completed runs

backend/src/app/alembic/versions/d4e5f6a7b9c0_add_hof_encounter_ids_to_nuzlocke_runs.py

@@ -0,0 +1,30 @@
+"""add hof_encounter_ids to nuzlocke_runs
+
+Revision ID: d4e5f6a7b9c0
+Revises: c3d4e5f6a7b9
+Create Date: 2026-02-09 20:00:00.000000
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects.postgresql import JSONB
+
+
+# revision identifiers, used by Alembic.
+revision: str = 'd4e5f6a7b9c0'
+down_revision: Union[str, Sequence[str], None] = 'c3d4e5f6a7b9'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        'nuzlocke_runs',
+        sa.Column('hof_encounter_ids', JSONB(), nullable=True),
+    )
+
+
+def downgrade() -> None:
+    op.drop_column('nuzlocke_runs', 'hof_encounter_ids')

backend/src/app/api/runs.py

@@ -120,6 +120,38 @@ async def update_run(
 
     update_data = data.model_dump(exclude_unset=True)
 
+    # Validate hof_encounter_ids if provided
+    if "hof_encounter_ids" in update_data and update_data["hof_encounter_ids"] is not None:
+        hof_ids = update_data["hof_encounter_ids"]
+        if len(hof_ids) > 6:
+            raise HTTPException(
+                status_code=400, detail="HoF team cannot have more than 6 Pokemon"
+            )
+        if hof_ids:
+            # Validate all encounter IDs belong to this run and are alive
+            enc_result = await session.execute(
+                select(Encounter).where(
+                    Encounter.id.in_(hof_ids),
+                    Encounter.run_id == run_id,
+                )
+            )
+            found = {e.id: e for e in enc_result.scalars().all()}
+            missing = [eid for eid in hof_ids if eid not in found]
+            if missing:
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"Encounters not found in this run: {missing}",
+                )
+            not_alive = [
+                eid for eid, e in found.items()
+                if e.status != "caught" or e.faint_level is not None
+            ]
+            if not_alive:
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"Encounters are not alive: {not_alive}",
+                )
+
     # Auto-set completed_at when ending a run
     if "status" in update_data and update_data["status"] in ("completed", "failed"):
         if run.status != "active":

backend/src/app/models/nuzlocke_run.py

@@ -19,6 +19,7 @@ class NuzlockeRun(Base):
         DateTime(timezone=True), server_default=func.now()
     )
     completed_at: Mapped[datetime | None] = mapped_column(DateTime(timezone=True))
+    hof_encounter_ids: Mapped[list[int] | None] = mapped_column(JSONB, default=None)
 
     game: Mapped["Game"] = relationship(back_populates="runs")
     encounters: Mapped[list["Encounter"]] = relationship(back_populates="run")

backend/src/app/schemas/run.py

@@ -15,6 +15,7 @@ class RunUpdate(CamelModel):
     name: str | None = None
     status: str | None = None
     rules: dict | None = None
+    hof_encounter_ids: list[int] | None = None
 
 
 class RunResponse(CamelModel):
@@ -23,6 +24,7 @@ class RunResponse(CamelModel):
     name: str
     status: str
     rules: dict
+    hof_encounter_ids: list[int] | None = None
     started_at: datetime
     completed_at: datetime | None
 

frontend/src/components/HofTeamModal.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import type { EncounterDetail } from '../types'
+
+interface HofTeamModalProps {
+  alive: EncounterDetail[]
+  onSubmit: (encounterIds: number[]) => void
+  onSkip: () => void
+  isPending: boolean
+}
+
+export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModalProps) {
+  const [selected, setSelected] = useState<Set<number>>(() => {
+    // Pre-select all if 6 or fewer
+    if (alive.length <= 6) return new Set(alive.map((e) => e.id))
+    return new Set<number>()
+  })
+
+  const toggle = (id: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else if (next.size < 6) {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/50" />
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 rounded-t-xl">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Hall of Fame Team
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Select the Pokemon that entered the Hall of Fame (max 6)
+          </p>
+        </div>
+
+        <div className="px-6 py-4">
+          <div className="grid grid-cols-3 gap-2">
+            {alive.map((enc) => {
+              const displayPokemon = enc.currentPokemon ?? enc.pokemon
+              const isSelected = selected.has(enc.id)
+              const atMax = selected.size >= 6 && !isSelected
+
+              return (
+                <button
+                  key={enc.id}
+                  type="button"
+                  onClick={() => !atMax && toggle(enc.id)}
+                  disabled={atMax}
+                  className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
+                    isSelected
+                      ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+                      : atMax
+                        ? 'border-gray-200 dark:border-gray-700 opacity-40 cursor-not-allowed'
+                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                  }`}
+                >
+                  {displayPokemon.spriteUrl ? (
+                    <img
+                      src={displayPokemon.spriteUrl}
+                      alt={displayPokemon.name}
+                      className="w-14 h-14"
+                    />
+                  ) : (
+                    <div className="w-14 h-14 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-lg font-bold">
+                      {displayPokemon.name[0].toUpperCase()}
+                    </div>
+                  )}
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300 mt-1 capitalize">
+                    {enc.nickname || displayPokemon.name}
+                  </span>
+                  {enc.nickname && (
+                    <span className="text-[10px] text-gray-400">
+                      {displayPokemon.name}
+                    </span>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 rounded-b-xl flex items-center justify-between">
+          <button
+            type="button"
+            onClick={onSkip}
+            disabled={isPending}
+            className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 disabled:opacity-50"
+          >
+            Skip
+          </button>
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-gray-400 dark:text-gray-500">
+              {selected.size}/6 selected
+            </span>
+            <button
+              type="button"
+              disabled={selected.size === 0 || isPending}
+              onClick={() => onSubmit([...selected])}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {isPending ? 'Saving...' : 'Confirm'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/index.ts

@@ -3,6 +3,7 @@ export { EncounterMethodBadge } from './EncounterMethodBadge'
 export { EncounterModal } from './EncounterModal'
 export { EndRunModal } from './EndRunModal'
 export { GameCard } from './GameCard'
+export { HofTeamModal } from './HofTeamModal'
 export { GameGrid } from './GameGrid'
 export { Layout } from './Layout'
 export { PokemonCard } from './PokemonCard'

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>
   )
 }

frontend/src/types/game.ts

@@ -89,6 +89,7 @@ export interface NuzlockeRun {
   name: string
   status: RunStatus
   rules: NuzlockeRules
+  hofEncounterIds: number[] | null
   startedAt: string
   completedAt: string | null
 }
@@ -136,6 +137,7 @@ export interface UpdateRunInput {
   name?: string
   status?: RunStatus
   rules?: NuzlockeRules
+  hofEncounterIds?: number[]
 }
 
 export interface CreateEncounterInput {