Align repo config with global development standards

- Add missing tsconfig strictness flags (noUncheckedIndexedAccess,
  exactOptionalPropertyTypes, noImplicitOverride,
  noPropertyAccessFromIndexSignature) and fix all resulting type errors
- Replace ESLint/Prettier with oxlint 1.48.0 and oxfmt 0.33.0
- Pin all frontend and backend dependencies to exact versions
- Pin GitHub Actions to SHA hashes with persist-credentials: false
- Fix CI Python version mismatch (3.12 -> 3.14) and ruff target-version
- Add vitest 4.0.18 with jsdom environment for frontend testing
- Add ty 0.0.17 for Python type checking (non-blocking in CI)
- Add actionlint and zizmor CI job for workflow linting and security audit
- Add Dependabot config for npm, pip, and github-actions
- Update CLAUDE.md and pre-commit hooks to reflect new tooling
- Ignore Claude Code sandbox artifacts in gitignore

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

frontend/src/pages/GenlockeDetail.tsx

@@ -1,12 +1,7 @@
 import { Link, useParams } from 'react-router-dom'
 import { useGenlocke } from '../hooks/useGenlockes'
 import { usePokemonFamilies } from '../hooks/usePokemon'
-import {
-  GenlockeGraveyard,
-  GenlockeLineage,
-  StatCard,
-  RuleBadges,
-} from '../components'
+import { GenlockeGraveyard, GenlockeLineage, StatCard, RuleBadges } from '../components'
 import type { GenlockeLegDetail, RetiredPokemon, RunStatus } from '../types'
 import { useMemo, useState } from 'react'
 
@@ -23,8 +18,7 @@ const statusRing: Record<RunStatus, string> = {
 }
 
 const statusStyles: Record<RunStatus, string> = {
-  active:
-    'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
   completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
   failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
 }
@@ -48,19 +42,14 @@ function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
         {leg.game.name}
       </span>
       {status && (
-        <span className="text-[10px] text-gray-500 dark:text-gray-400 capitalize">
-          {status}
-        </span>
+        <span className="text-[10px] text-gray-500 dark:text-gray-400 capitalize">{status}</span>
       )}
     </div>
   )
 
   if (hasRun) {
     return (
-      <Link
-        to={`/runs/${leg.runId}`}
-        className="hover:opacity-80 transition-opacity"
-      >
+      <Link to={`/runs/${leg.runId}`} className="hover:opacity-80 transition-opacity">
         {content}
       </Link>
     )
@@ -86,7 +75,7 @@ function PokemonSprite({ pokemon }: { pokemon: RetiredPokemon }) {
       className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-sm font-bold"
       title={pokemon.name}
     >
-      {pokemon.name[0].toUpperCase()}
+      {pokemon.name[0]?.toUpperCase()}
     </div>
   )
 }
@@ -116,9 +105,7 @@ export function GenlockeDetail() {
     }
 
     return genlocke.legs
-      .filter(
-        (leg) => leg.retiredPokemonIds && leg.retiredPokemonIds.length > 0
-      )
+      .filter((leg) => leg.retiredPokemonIds && leg.retiredPokemonIds.length > 0)
       .map((leg) => {
         // Find base Pokemon (lowest ID) for each family in this leg's retired list
         const seen = new Set<string>()
@@ -170,16 +157,11 @@ export function GenlockeDetail() {
     <div className="max-w-4xl mx-auto p-8 space-y-8">
       {/* Header */}
       <div>
-        <Link
-          to="/genlockes"
-          className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
-        >
+        <Link to="/genlockes" className="text-sm text-blue-600 dark:text-blue-400 hover:underline">
           &larr; Back to Genlockes
         </Link>
         <div className="flex items-center gap-3 mt-2">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
-            {genlocke.name}
-          </h1>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">{genlocke.name}</h1>
           <span
             className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${statusStyles[genlocke.status]}`}
           >
@@ -190,9 +172,7 @@ export function GenlockeDetail() {
 
       {/* Progress Timeline */}
       <section>
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
-          Progress
-        </h2>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Progress</h2>
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
           <div className="flex items-start gap-2 overflow-x-auto pb-2">
             {genlocke.legs.map((leg, i) => (
@@ -201,9 +181,7 @@ export function GenlockeDetail() {
                 {i < genlocke.legs.length - 1 && (
                   <div
                     className={`h-0.5 w-6 mx-1 mt-[-16px] ${
-                      leg.runStatus === 'completed'
-                        ? 'bg-blue-500'
-                        : 'bg-gray-300 dark:bg-gray-600'
+                      leg.runStatus === 'completed' ? 'bg-blue-500' : 'bg-gray-300 dark:bg-gray-600'
                     }`}
                   />
                 )}
@@ -219,16 +197,8 @@ export function GenlockeDetail() {
           Cumulative Stats
         </h2>
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <StatCard
-            label="Encounters"
-            value={genlocke.stats.totalEncounters}
-            color="blue"
-          />
-          <StatCard
-            label="Deaths"
-            value={genlocke.stats.totalDeaths}
-            color="red"
-          />
+          <StatCard label="Encounters" value={genlocke.stats.totalEncounters} color="blue" />
+          <StatCard label="Deaths" value={genlocke.stats.totalDeaths} color="red" />
           <StatCard
             label="Legs Completed"
             value={genlocke.stats.legsCompleted}
@@ -278,10 +248,7 @@ export function GenlockeDetail() {
           </h2>
           <div className="space-y-3">
             {retiredByLeg.map((leg) => (
-              <div
-                key={leg.legOrder}
-                className="bg-white dark:bg-gray-800 rounded-lg shadow p-4"
-              >
+              <div key={leg.legOrder} className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                 <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                   Leg {leg.legOrder} &mdash; {leg.gameName}
                 </h3>