wip

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -1,43 +1,74 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Card from '../ui/Card';
 import Button from '../ui/Button';
+import RaceResultCard from '../races/RaceResultCard';
+import { getRaceRepository, getLeagueRepository, getResultRepository } from '@/lib/di-container';
+import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { Result } from '@gridpilot/racing/domain/entities/Result';
+import { League } from '@gridpilot/racing/domain/entities/League';
 
-interface RaceResult {
-  id: string;
-  date: string;
-  track: string;
-  car: string;
-  position: number;
-  startPosition: number;
-  incidents: number;
-  league: string;
+interface RaceHistoryProps {
+  driverId: string;
 }
 
-const mockRaceHistory: RaceResult[] = [
-  { id: '1', date: '2024-11-28', track: 'Spa-Francorchamps', car: 'Porsche 911 GT3 R', position: 1, startPosition: 3, incidents: 0, league: 'GridPilot Championship' },
-  { id: '2', date: '2024-11-21', track: 'Nürburgring GP', car: 'Porsche 911 GT3 R', position: 4, startPosition: 5, incidents: 2, league: 'GridPilot Championship' },
-  { id: '3', date: '2024-11-14', track: 'Monza', car: 'Ferrari 488 GT3', position: 2, startPosition: 1, incidents: 1, league: 'GT3 Sprint Series' },
-  { id: '4', date: '2024-11-07', track: 'Silverstone', car: 'Audi R8 LMS GT3', position: 7, startPosition: 12, incidents: 0, league: 'GridPilot Championship' },
-  { id: '5', date: '2024-10-31', track: 'Interlagos', car: 'Mercedes-AMG GT3', position: 3, startPosition: 4, incidents: 1, league: 'GT3 Sprint Series' },
-  { id: '6', date: '2024-10-24', track: 'Road Atlanta', car: 'Porsche 911 GT3 R', position: 5, startPosition: 8, incidents: 2, league: 'GridPilot Championship' },
-  { id: '7', date: '2024-10-17', track: 'Watkins Glen', car: 'BMW M4 GT3', position: 1, startPosition: 2, incidents: 0, league: 'GT3 Sprint Series' },
-  { id: '8', date: '2024-10-10', track: 'Brands Hatch', car: 'Porsche 911 GT3 R', position: 6, startPosition: 7, incidents: 3, league: 'GridPilot Championship' },
-  { id: '9', date: '2024-10-03', track: 'Suzuka', car: 'McLaren 720S GT3', position: 2, startPosition: 6, incidents: 1, league: 'GT3 Sprint Series' },
-  { id: '10', date: '2024-09-26', track: 'Bathurst', car: 'Porsche 911 GT3 R', position: 8, startPosition: 10, incidents: 0, league: 'GridPilot Championship' },
-  { id: '11', date: '2024-09-19', track: 'Laguna Seca', car: 'Ferrari 488 GT3', position: 3, startPosition: 5, incidents: 2, league: 'GT3 Sprint Series' },
-  { id: '12', date: '2024-09-12', track: 'Imola', car: 'Audi R8 LMS GT3', position: 1, startPosition: 1, incidents: 0, league: 'GridPilot Championship' },
-];
-
-export default function ProfileRaceHistory() {
+export default function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
   const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
   const [page, setPage] = useState(1);
+  const [races, setRaces] = useState<Race[]>([]);
+  const [results, setResults] = useState<Result[]>([]);
+  const [leagues, setLeagues] = useState<Map<string, League>>(new Map());
+  const [loading, setLoading] = useState(true);
   const resultsPerPage = 10;
 
-  const filteredResults = mockRaceHistory.filter(result => {
-    if (filter === 'wins') return result.position === 1;
-    if (filter === 'podiums') return result.position <= 3;
+  useEffect(() => {
+    async function loadRaceHistory() {
+      try {
+        const resultRepo = getResultRepository();
+        const raceRepo = getRaceRepository();
+        const leagueRepo = getLeagueRepository();
+
+        const driverResults = await resultRepo.findByDriverId(driverId);
+        const allRaces = await raceRepo.findAll();
+        const allLeagues = await leagueRepo.findAll();
+
+        // Filter races to only those where driver has results
+        const raceIds = new Set(driverResults.map(r => r.raceId));
+        const driverRaces = allRaces
+          .filter(race => raceIds.has(race.id) && race.status === 'completed')
+          .sort((a, b) => b.scheduledAt.getTime() - a.scheduledAt.getTime());
+
+        const leagueMap = new Map<string, League>();
+        allLeagues.forEach(league => leagueMap.set(league.id, league));
+
+        setRaces(driverRaces);
+        setResults(driverResults);
+        setLeagues(leagueMap);
+      } catch (err) {
+        console.error('Failed to load race history:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadRaceHistory();
+  }, [driverId]);
+
+  const raceHistory = races.map(race => {
+    const result = results.find(r => r.raceId === race.id);
+    const league = leagues.get(race.leagueId);
+    return {
+      race,
+      result,
+      league,
+    };
+  }).filter(item => item.result);
+
+  const filteredResults = raceHistory.filter(item => {
+    if (!item.result) return false;
+    if (filter === 'wins') return item.result.position === 1;
+    if (filter === 'podiums') return item.result.position <= 3;
     return true;
   });
 
@@ -47,6 +78,34 @@ export default function ProfileRaceHistory() {
     page * resultsPerPage
   );
 
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-9 w-24 bg-iron-gray rounded animate-pulse" />
+          ))}
+        </div>
+        <Card>
+          <div className="space-y-2">
+            {[1, 2, 3].map(i => (
+              <div key={i} className="h-20 bg-deep-graphite rounded animate-pulse" />
+            ))}
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  if (raceHistory.length === 0) {
+    return (
+      <Card className="text-center py-12">
+        <p className="text-gray-400 mb-2">No race history yet</p>
+        <p className="text-sm text-gray-500">Complete races to build your racing record</p>
+      </Card>
+    );
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
@@ -75,53 +134,19 @@ export default function ProfileRaceHistory() {
 
       <Card>
         <div className="space-y-2">
-          {paginatedResults.map((result) => (
-            <div
-              key={result.id}
-              className="p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors"
-            >
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-3">
-                  <div className={`
-                    w-8 h-8 rounded flex items-center justify-center font-bold text-sm
-                    ${result.position === 1 ? 'bg-green-400/20 text-green-400' : 
-                      result.position === 2 ? 'bg-gray-400/20 text-gray-400' :
-                      result.position === 3 ? 'bg-warning-amber/20 text-warning-amber' :
-                      'bg-charcoal-outline text-gray-400'}
-                  `}>
-                    P{result.position}
-                  </div>
-                  <div>
-                    <div className="text-white font-medium">{result.track}</div>
-                    <div className="text-sm text-gray-400">{result.car}</div>
-                  </div>
-                </div>
-                <div className="text-right">
-                  <div className="text-sm text-gray-400">
-                    {new Date(result.date).toLocaleDateString('en-US', { 
-                      month: 'short', 
-                      day: 'numeric',
-                      year: 'numeric'
-                    })}
-                  </div>
-                  <div className="text-xs text-gray-500">{result.league}</div>
-                </div>
-              </div>
-              <div className="flex items-center gap-4 text-xs text-gray-500">
-                <span>Started P{result.startPosition}</span>
-                <span>•</span>
-                <span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
-                  {result.incidents}x incidents
-                </span>
-                {result.position < result.startPosition && (
-                  <>
-                    <span>•</span>
-                    <span className="text-green-400">+{result.startPosition - result.position} positions</span>
-                  </>
-                )}
-              </div>
-            </div>
-          ))}
+          {paginatedResults.map(({ race, result, league }) => {
+            if (!result) return null;
+            
+            return (
+              <RaceResultCard
+                key={race.id}
+                race={race}
+                result={result}
+                league={league}
+                showLeague={true}
+              />
+            );
+          })}
         </div>
 
         {totalPages > 1 && (

apps/website/components/leagues/LeagueAdmin.tsx

@@ -13,6 +13,8 @@ import {
   getAllDriverRankings,
   getDriverRepository,
   getGetLeagueFullConfigQuery,
+  getRaceRepository,
+  getProtestRepository,
 } from '@/lib/di-container';
 import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
 import { LeagueBasicsSection } from './LeagueBasicsSection';
@@ -27,6 +29,9 @@ import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappe
 import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
 import Modal from '@/components/ui/Modal';
+import { AlertTriangle, CheckCircle, Clock, XCircle, Flag, Calendar, User } from 'lucide-react';
+import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
+import type { Race } from '@gridpilot/racing/domain/entities/Race';
 
 interface JoinRequest {
   id: string;
@@ -51,10 +56,14 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
   const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'disputes'>('members');
+  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'protests'>('members');
   const [rejectReason, setRejectReason] = useState('');
   const [configForm, setConfigForm] = useState<LeagueConfigFormModel | null>(null);
   const [configLoading, setConfigLoading] = useState(false);
+  const [protests, setProtests] = useState<Protest[]>([]);
+  const [protestRaces, setProtestRaces] = useState<Record<string, Race>>({});
+  const [protestDriversById, setProtestDriversById] = useState<Record<string, DriverDTO>>({});
+  const [protestsLoading, setProtestsLoading] = useState(false);
 
   const loadJoinRequests = useCallback(async () => {
     setLoading(true);
@@ -119,6 +128,62 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
     loadConfig();
   }, [league.id]);
 
+  // Load protests for this league's races
+  useEffect(() => {
+    async function loadProtests() {
+      setProtestsLoading(true);
+      try {
+        const raceRepo = getRaceRepository();
+        const protestRepo = getProtestRepository();
+        const driverRepo = getDriverRepository();
+
+        // Get all races for this league
+        const leagueRaces = await raceRepo.findByLeagueId(league.id);
+        
+        // Get protests for each race
+        const allProtests: Protest[] = [];
+        const racesById: Record<string, Race> = {};
+        
+        for (const race of leagueRaces) {
+          racesById[race.id] = race;
+          const raceProtests = await protestRepo.findByRaceId(race.id);
+          allProtests.push(...raceProtests);
+        }
+        
+        setProtests(allProtests);
+        setProtestRaces(racesById);
+
+        // Load driver info for all protesters and accused
+        const driverIds = new Set<string>();
+        allProtests.forEach((p) => {
+          driverIds.add(p.protestingDriverId);
+          driverIds.add(p.accusedDriverId);
+        });
+
+        const driverEntities = await Promise.all(
+          Array.from(driverIds).map((id) => driverRepo.findById(id)),
+        );
+        const driverDtos = driverEntities
+          .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
+          .filter((dto): dto is DriverDTO => dto !== null);
+
+        const byId: Record<string, DriverDTO> = {};
+        for (const dto of driverDtos) {
+          byId[dto.id] = dto;
+        }
+        setProtestDriversById(byId);
+      } catch (err) {
+        console.error('Failed to load protests:', err);
+      } finally {
+        setProtestsLoading(false);
+      }
+    }
+
+    if (activeTab === 'protests') {
+      loadProtests();
+    }
+  }, [league.id, activeTab]);
+
   const handleApproveRequest = async (requestId: string) => {
     try {
       const membershipRepo = getLeagueMembershipRepository();
@@ -341,14 +406,19 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
             Create Race
           </button>
           <button
-            onClick={() => setActiveTab('disputes')}
-            className={`pb-3 px-1 font-medium transition-colors ${
-              activeTab === 'disputes'
+            onClick={() => setActiveTab('protests')}
+            className={`pb-3 px-1 font-medium transition-colors flex items-center gap-2 ${
+              activeTab === 'protests'
                 ? 'text-primary-blue border-b-2 border-primary-blue'
                 : 'text-gray-400 hover:text-white'
             }`}
           >
-            Disputes
+            Protests
+            {protests.length > 0 && (
+              <span className="px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
+                {protests.filter(p => p.status === 'pending').length || protests.length}
+              </span>
+            )}
           </button>
           <button
             onClick={() => setActiveTab('settings')}
@@ -462,27 +532,156 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
         </Card>
       )}
 
-      {activeTab === 'disputes' && (
+      {activeTab === 'protests' && (
         <Card>
-          <h2 className="text-xl font-semibold text-white mb-4">Disputes (Alpha)</h2>
-          <div className="space-y-4">
-            <p className="text-sm text-gray-400">
-              Demo-only view of potential protest and dispute workflow for this league.
-            </p>
-            <div className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4">
-              <h3 className="text-sm font-semibold text-white mb-1">Sample Protest</h3>
-              <p className="text-xs text-gray-400 mb-2">
-                Driver contact in Turn 3, Lap 12. Protest submitted by a driver against another
-                competitor for avoidable contact.
-              </p>
-              <p className="text-xs text-gray-500">
-                In the full product, this area would show protests, steward reviews, penalties, and appeals.
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h2 className="text-xl font-semibold text-white">Protests</h2>
+              <p className="text-sm text-gray-400 mt-1">
+                Review protests filed by drivers and manage steward decisions
               </p>
             </div>
-            <p className="text-xs text-gray-500">
-              For the alpha, this tab is static and read-only and does not affect any race or league state.
-            </p>
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-warning-amber/10 border border-warning-amber/30">
+              <AlertTriangle className="w-4 h-4 text-warning-amber" />
+              <span className="text-xs font-medium text-warning-amber">Alpha Preview</span>
+            </div>
           </div>
+          
+          {protestsLoading ? (
+            <div className="text-center py-12 text-gray-400">
+              <div className="animate-pulse">Loading protests...</div>
+            </div>
+          ) : protests.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
+                <Flag className="w-8 h-8 text-gray-500" />
+              </div>
+              <h3 className="text-lg font-medium text-white mb-2">No Protests Filed</h3>
+              <p className="text-sm text-gray-400 max-w-md mx-auto">
+                When drivers file protests for incidents during races, they will appear here for steward review.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {/* Stats summary */}
+              <div className="grid grid-cols-3 gap-4 mb-6">
+                <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
+                  <div className="flex items-center gap-2 text-warning-amber mb-1">
+                    <Clock className="w-4 h-4" />
+                    <span className="text-xs font-medium uppercase">Pending</span>
+                  </div>
+                  <div className="text-2xl font-bold text-white">
+                    {protests.filter((p) => p.status === 'pending').length}
+                  </div>
+                </div>
+                <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
+                  <div className="flex items-center gap-2 text-performance-green mb-1">
+                    <CheckCircle className="w-4 h-4" />
+                    <span className="text-xs font-medium uppercase">Resolved</span>
+                  </div>
+                  <div className="text-2xl font-bold text-white">
+                    {protests.filter((p) => p.status === 'upheld' || p.status === 'dismissed').length}
+                  </div>
+                </div>
+                <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
+                  <div className="flex items-center gap-2 text-primary-blue mb-1">
+                    <Flag className="w-4 h-4" />
+                    <span className="text-xs font-medium uppercase">Total</span>
+                  </div>
+                  <div className="text-2xl font-bold text-white">
+                    {protests.length}
+                  </div>
+                </div>
+              </div>
+
+              {/* Protest list */}
+              <div className="space-y-3">
+                {protests.map((protest) => {
+                  const race = protestRaces[protest.raceId];
+                  const filer = protestDriversById[protest.protestingDriverId];
+                  const accused = protestDriversById[protest.accusedDriverId];
+                  
+                  const statusConfig = {
+                    pending: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', icon: Clock, label: 'Pending Review' },
+                    under_review: { color: 'text-primary-blue', bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', icon: Flag, label: 'Under Review' },
+                    upheld: { color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/30', icon: AlertTriangle, label: 'Upheld' },
+                    dismissed: { color: 'text-gray-400', bg: 'bg-gray-500/10', border: 'border-gray-500/30', icon: XCircle, label: 'Dismissed' },
+                    withdrawn: { color: 'text-gray-500', bg: 'bg-gray-600/10', border: 'border-gray-600/30', icon: XCircle, label: 'Withdrawn' },
+                  }[protest.status] ?? { color: 'text-gray-400', bg: 'bg-gray-500/10', border: 'border-gray-500/30', icon: Clock, label: protest.status };
+                  
+                  const StatusIcon = statusConfig.icon;
+                  
+                  return (
+                    <div
+                      key={protest.id}
+                      className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4 hover:bg-iron-gray/30 transition-colors"
+                    >
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-3 mb-2">
+                            <div className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${statusConfig.bg} ${statusConfig.border} ${statusConfig.color} border`}>
+                              <StatusIcon className="w-3 h-3" />
+                              {statusConfig.label}
+                            </div>
+                            {race && (
+                              <span className="text-xs text-gray-500 flex items-center gap-1">
+                                <Calendar className="w-3 h-3" />
+                                {race.track} • {new Date(race.scheduledAt).toLocaleDateString()}
+                              </span>
+                            )}
+                          </div>
+                          
+                          <h3 className="text-sm font-semibold text-white mb-1 capitalize">
+                            Incident at Lap {protest.incident.lap}
+                          </h3>
+                          
+                          <p className="text-xs text-gray-400 mb-3 line-clamp-2">
+                            {protest.incident.description}
+                          </p>
+                          
+                          <div className="flex items-center gap-4 text-xs">
+                            <div className="flex items-center gap-1.5">
+                              <User className="w-3 h-3 text-gray-500" />
+                              <span className="text-gray-400">Filed by:</span>
+                              <span className="text-white font-medium">{filer?.name ?? 'Unknown'}</span>
+                            </div>
+                            <div className="flex items-center gap-1.5">
+                              <AlertTriangle className="w-3 h-3 text-warning-amber" />
+                              <span className="text-gray-400">Against:</span>
+                              <span className="text-warning-amber font-medium">{accused?.name ?? 'Unknown'}</span>
+                            </div>
+                          </div>
+                        </div>
+                        
+                        {protest.status === 'pending' && (
+                          <div className="flex gap-2 shrink-0">
+                            <Button variant="secondary" disabled>
+                              Review
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                      
+                      {protest.comment && (
+                        <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
+                          <span className="text-xs text-gray-500">
+                            Driver comment: "{protest.comment}"
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="mt-6 p-4 rounded-lg bg-iron-gray/30 border border-charcoal-outline/50">
+                <p className="text-xs text-gray-500">
+                  <strong className="text-gray-400">Alpha Note:</strong> Protest review and penalty application is demonstration-only.
+                  In the full product, stewards can review evidence, apply penalties, and manage appeals.
+                </p>
+              </div>
+            </div>
+          )}
         </Card>
       )}
 

apps/website/components/leagues/LeagueHeader.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 import MembershipStatus from '@/components/leagues/MembershipStatus';
 import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
-import { getLeagueCoverClasses } from '@/lib/leagueCovers';
 import {
   getDriverRepository,
   getDriverStats,
@@ -32,7 +31,6 @@ export default function LeagueHeader({
   ownerName,
 }: LeagueHeaderProps) {
   const imageService = getImageService();
-  const coverUrl = imageService.getLeagueCover(leagueId);
   const logoUrl = imageService.getLeagueLogo(leagueId);
 
   const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
@@ -100,35 +98,27 @@ export default function LeagueHeader({
 
   return (
     <div className="mb-8">
-      <div className="mb-4">
-        <div className={getLeagueCoverClasses(leagueId)} aria-hidden="true">
-          <div className="relative w-full h-full">
+      {/* League header with logo - no cover image */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <div className="h-16 w-16 rounded-xl overflow-hidden border-2 border-charcoal-outline bg-iron-gray shadow-lg">
             <Image
-              src={coverUrl}
-              alt="League cover placeholder"
-              fill
-              className="object-cover opacity-80"
-              sizes="100vw"
+              src={logoUrl}
+              alt={`${leagueName} logo`}
+              width={64}
+              height={64}
+              className="w-full h-full object-cover"
             />
-            <div className="absolute left-6 bottom-4 flex items-center">
-              <div className="h-16 w-16 rounded-full overflow-hidden border-2 border-charcoal-outline bg-deep-graphite/95 shadow-[0_0_18px_rgba(0,0,0,0.7)]">
-                <Image
-                  src={logoUrl}
-                  alt={`${leagueName} logo`}
-                  width={64}
-                  height={64}
-                  className="w-full h-full object-cover"
-                />
-              </div>
-            </div>
           </div>
-        </div>
-      </div>
-
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <h1 className="text-3xl font-bold text-white">{leagueName}</h1>
-          <MembershipStatus leagueId={leagueId} />
+          <div>
+            <div className="flex items-center gap-3 mb-1">
+              <h1 className="text-2xl font-bold text-white">{leagueName}</h1>
+              <MembershipStatus leagueId={leagueId} />
+            </div>
+            {description && (
+              <p className="text-gray-400 text-sm max-w-xl">{description}</p>
+            )}
+          </div>
         </div>
         <FeatureLimitationTooltip message="Multi-league memberships coming in production">
           <span className="px-2 py-1 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
@@ -137,30 +127,22 @@ export default function LeagueHeader({
         </FeatureLimitationTooltip>
       </div>
 
-      {description && (
-        <p className="text-gray-400 mb-2">{description}</p>
-      )}
-
-      <div className="mb-6 flex flex-col gap-2">
-        <span className="text-sm text-gray-400">Owner</span>
+      <div className="flex items-center gap-3">
+        <span className="text-sm text-gray-400">Owner:</span>
         {ownerSummary ? (
-          <div className="inline-flex items-center gap-3">
-            <DriverSummaryPill
-              driver={ownerSummary.driver}
-              rating={ownerSummary.rating}
-              rank={ownerSummary.rank}
-              href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
-            />
-          </div>
+          <DriverSummaryPill
+            driver={ownerSummary.driver}
+            rating={ownerSummary.rating}
+            rank={ownerSummary.rank}
+            href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
+          />
         ) : (
-          <div className="text-sm text-gray-500">
-            <Link
-              href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
-              className="text-primary-blue hover:underline"
-            >
-              {ownerName}
-            </Link>
-          </div>
+          <Link
+            href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
+            className="text-sm text-primary-blue hover:underline"
+          >
+            {ownerName}
+          </Link>
         )}
       </div>
     </div>

apps/website/components/races/FileProtestModal.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import { useState } from 'react';
+import Modal from '@/components/ui/Modal';
+import Button from '@/components/ui/Button';
+import { getFileProtestUseCase, getDriverRepository } from '@/lib/di-container';
+import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import type { ProtestIncident } from '@gridpilot/racing/domain/entities/Protest';
+import {
+  AlertTriangle,
+  Video,
+  MessageSquare,
+  Hash,
+  Clock,
+  User,
+  FileText,
+  CheckCircle2,
+} from 'lucide-react';
+
+interface FileProtestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  raceId: string;
+  leagueId?: string;
+  protestingDriverId: string;
+  participants: Driver[];
+}
+
+export default function FileProtestModal({
+  isOpen,
+  onClose,
+  raceId,
+  leagueId,
+  protestingDriverId,
+  participants,
+}: FileProtestModalProps) {
+  const [step, setStep] = useState<'form' | 'submitting' | 'success' | 'error'>('form');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  
+  // Form state
+  const [accusedDriverId, setAccusedDriverId] = useState<string>('');
+  const [lap, setLap] = useState<string>('');
+  const [timeInRace, setTimeInRace] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [comment, setComment] = useState<string>('');
+  const [proofVideoUrl, setProofVideoUrl] = useState<string>('');
+
+  const otherParticipants = participants.filter(p => p.id !== protestingDriverId);
+
+  const handleSubmit = async () => {
+    // Validation
+    if (!accusedDriverId) {
+      setErrorMessage('Please select the driver you are protesting against.');
+      return;
+    }
+    if (!lap || parseInt(lap, 10) < 0) {
+      setErrorMessage('Please enter a valid lap number.');
+      return;
+    }
+    if (!description.trim()) {
+      setErrorMessage('Please describe what happened.');
+      return;
+    }
+
+    setStep('submitting');
+    setErrorMessage(null);
+
+    try {
+      const useCase = getFileProtestUseCase();
+      
+      const incident: ProtestIncident = {
+        lap: parseInt(lap, 10),
+        timeInRace: timeInRace ? parseInt(timeInRace, 10) : undefined,
+        description: description.trim(),
+      };
+
+      await useCase.execute({
+        raceId,
+        protestingDriverId,
+        accusedDriverId,
+        incident,
+        comment: comment.trim() || undefined,
+        proofVideoUrl: proofVideoUrl.trim() || undefined,
+      });
+
+      setStep('success');
+    } catch (err) {
+      setStep('error');
+      setErrorMessage(err instanceof Error ? err.message : 'Failed to file protest');
+    }
+  };
+
+  const handleClose = () => {
+    // Reset form state
+    setStep('form');
+    setErrorMessage(null);
+    setAccusedDriverId('');
+    setLap('');
+    setTimeInRace('');
+    setDescription('');
+    setComment('');
+    setProofVideoUrl('');
+    onClose();
+  };
+
+  if (step === 'success') {
+    return (
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={handleClose}
+        title="Protest Filed Successfully"
+      >
+        <div className="flex flex-col items-center py-6 text-center">
+          <div className="p-4 bg-performance-green/20 rounded-full mb-4">
+            <CheckCircle2 className="w-8 h-8 text-performance-green" />
+          </div>
+          <p className="text-white font-medium mb-2">Your protest has been submitted</p>
+          <p className="text-sm text-gray-400 mb-6">
+            The stewards will review your protest and make a decision. 
+            You'll be notified of the outcome.
+          </p>
+          <Button variant="primary" onClick={handleClose}>
+            Close
+          </Button>
+        </div>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={handleClose}
+      title="File a Protest"
+      description="Report an incident to the stewards for review. Please provide as much detail as possible."
+    >
+      <div className="space-y-5">
+        {errorMessage && (
+          <div className="flex items-start gap-3 p-3 bg-warning-amber/10 border border-warning-amber/30 rounded-lg">
+            <AlertTriangle className="w-5 h-5 text-warning-amber flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-warning-amber">{errorMessage}</p>
+          </div>
+        )}
+
+        {/* Driver Selection */}
+        <div>
+          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
+            <User className="w-4 h-4 text-primary-blue" />
+            Driver involved *
+          </label>
+          <select
+            value={accusedDriverId}
+            onChange={(e) => setAccusedDriverId(e.target.value)}
+            disabled={step === 'submitting'}
+            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
+          >
+            <option value="">Select driver...</option>
+            {otherParticipants.map((driver) => (
+              <option key={driver.id} value={driver.id}>
+                {driver.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Lap and Time */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
+              <Hash className="w-4 h-4 text-primary-blue" />
+              Lap number *
+            </label>
+            <input
+              type="number"
+              min="0"
+              value={lap}
+              onChange={(e) => setLap(e.target.value)}
+              disabled={step === 'submitting'}
+              placeholder="e.g. 5"
+              className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
+            />
+          </div>
+          <div>
+            <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
+              <Clock className="w-4 h-4 text-primary-blue" />
+              Time (seconds)
+            </label>
+            <input
+              type="number"
+              min="0"
+              value={timeInRace}
+              onChange={(e) => setTimeInRace(e.target.value)}
+              disabled={step === 'submitting'}
+              placeholder="Optional"
+              className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
+            />
+          </div>
+        </div>
+
+        {/* Incident Description */}
+        <div>
+          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
+            <FileText className="w-4 h-4 text-primary-blue" />
+            What happened? *
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            disabled={step === 'submitting'}
+            placeholder="Describe the incident clearly and objectively..."
+            rows={3}
+            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50 resize-none"
+          />
+        </div>
+
+        {/* Additional Comment */}
+        <div>
+          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
+            <MessageSquare className="w-4 h-4 text-primary-blue" />
+            Additional comment
+          </label>
+          <textarea
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            disabled={step === 'submitting'}
+            placeholder="Any additional context for the stewards..."
+            rows={2}
+            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50 resize-none"
+          />
+        </div>
+
+        {/* Video Proof */}
+        <div>
+          <label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
+            <Video className="w-4 h-4 text-primary-blue" />
+            Video proof URL
+          </label>
+          <input
+            type="url"
+            value={proofVideoUrl}
+            onChange={(e) => setProofVideoUrl(e.target.value)}
+            disabled={step === 'submitting'}
+            placeholder="https://youtube.com/... or https://streamable.com/..."
+            className="w-full px-3 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue/50 focus:border-primary-blue disabled:opacity-50"
+          />
+          <p className="mt-1.5 text-xs text-gray-500">
+            Providing video evidence significantly helps the stewards review your protest.
+          </p>
+        </div>
+
+        {/* Info Box */}
+        <div className="p-3 bg-iron-gray rounded-lg border border-charcoal-outline">
+          <p className="text-xs text-gray-400">
+            <strong className="text-gray-300">Note:</strong> Filing a protest does not guarantee action. 
+            The stewards will review the incident and may apply penalties ranging from time penalties 
+            to grid penalties for future races, depending on the severity.
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-3 pt-2">
+          <Button
+            variant="secondary"
+            onClick={handleClose}
+            disabled={step === 'submitting'}
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleSubmit}
+            disabled={step === 'submitting'}
+            className="flex-1"
+          >
+            {step === 'submitting' ? 'Submitting...' : 'Submit Protest'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

apps/website/components/races/RaceResultCard.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { Result } from '@gridpilot/racing/domain/entities/Result';
+import { League } from '@gridpilot/racing/domain/entities/League';
+
+interface RaceResultCardProps {
+  race: Race;
+  result: Result;
+  league?: League;
+  showLeague?: boolean;
+}
+
+export default function RaceResultCard({
+  race,
+  result,
+  league,
+  showLeague = true,
+}: RaceResultCardProps) {
+  const getPositionColor = (position: number) => {
+    if (position === 1) return 'bg-green-400/20 text-green-400';
+    if (position === 2) return 'bg-gray-400/20 text-gray-400';
+    if (position === 3) return 'bg-warning-amber/20 text-warning-amber';
+    return 'bg-charcoal-outline text-gray-400';
+  };
+
+  return (
+    <Link
+      href={`/races/${race.id}`}
+      className="block p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors group"
+    >
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-3">
+          <div className={`w-8 h-8 rounded flex items-center justify-center font-bold text-sm ${getPositionColor(result.position)}`}>
+            P{result.position}
+          </div>
+          <div>
+            <div className="text-white font-medium group-hover:text-primary-blue transition-colors">
+              {race.track}
+            </div>
+            <div className="text-sm text-gray-400">{race.car}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="text-right">
+            <div className="text-sm text-gray-400">
+              {race.scheduledAt.toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+              })}
+            </div>
+            {showLeague && league && (
+              <div className="text-xs text-gray-500">{league.name}</div>
+            )}
+          </div>
+          <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
+        </div>
+      </div>
+      <div className="flex items-center gap-4 text-xs text-gray-500">
+        <span>Started P{result.startPosition}</span>
+        <span>•</span>
+        <span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
+          {result.incidents}x incidents
+        </span>
+        {result.position < result.startPosition && (
+          <>
+            <span>•</span>
+            <span className="text-green-400">
+              +{result.startPosition - result.position} positions
+            </span>
+          </>
+        )}
+      </div>
+    </Link>
+  );
+}

apps/website/components/races/ResultsTable.tsx

@@ -1,21 +1,55 @@
 'use client';
 
+import Link from 'next/link';
 import { Result } from '@gridpilot/racing/domain/entities/Result';
 import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import type { PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
+import { AlertTriangle, ExternalLink } from 'lucide-react';
+
+/**
+ * Penalty data for display (can be domain Penalty or RacePenaltyDTO)
+ */
+interface PenaltyData {
+  driverId: string;
+  type: PenaltyType;
+  value?: number;
+}
 
 interface ResultsTableProps {
   results: Result[];
   drivers: Driver[];
   pointsSystem: Record<number, number>;
   fastestLapTime?: number;
+  penalties?: PenaltyData[];
+  currentDriverId?: string;
 }
 
-export default function ResultsTable({ results, drivers, pointsSystem, fastestLapTime }: ResultsTableProps) {
+export default function ResultsTable({ results, drivers, pointsSystem, fastestLapTime, penalties = [], currentDriverId }: ResultsTableProps) {
+  const getDriver = (driverId: string): Driver | undefined => {
+    return drivers.find(d => d.id === driverId);
+  };
+
   const getDriverName = (driverId: string): string => {
-    const driver = drivers.find(d => d.id === driverId);
+    const driver = getDriver(driverId);
     return driver?.name || 'Unknown Driver';
   };
 
+  const getDriverPenalties = (driverId: string): PenaltyData[] => {
+    return penalties.filter(p => p.driverId === driverId);
+  };
+
+  const getPenaltyDescription = (penalty: PenaltyData): string => {
+    const descriptions: Record<string, string> = {
+      time_penalty: `+${penalty.value}s time penalty`,
+      grid_penalty: `${penalty.value} place grid penalty`,
+      points_deduction: `-${penalty.value} points`,
+      disqualification: 'Disqualified',
+      warning: 'Warning',
+      license_points: `${penalty.value} license points`,
+    };
+    return descriptions[penalty.type] || penalty.type;
+  };
+
   const formatLapTime = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
     const secs = (seconds % 60).toFixed(3);
@@ -57,23 +91,70 @@ export default function ResultsTable({ results, drivers, pointsSystem, fastestLa
             <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Incidents</th>
             <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
             <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">+/-</th>
+            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Penalties</th>
           </tr>
         </thead>
         <tbody>
           {results.map((result) => {
             const positionChange = result.getPositionChange();
             const isFastestLap = fastestLapTime && result.fastestLap === fastestLapTime;
+            const driverPenalties = getDriverPenalties(result.driverId);
+            const driver = getDriver(result.driverId);
+            const isCurrentUser = currentDriverId === result.driverId;
+            const isPodium = result.position <= 3;
             
             return (
-              <tr 
+              <tr
                 key={result.id}
-                className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
+                className={`
+                  border-b border-charcoal-outline/50 transition-colors
+                  ${isCurrentUser
+                    ? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent hover:from-primary-blue/30'
+                    : 'hover:bg-iron-gray/20'}
+                `}
               >
                 <td className="py-3 px-4">
-                  <span className="text-white font-semibold">{result.position}</span>
+                  <div className={`
+                    inline-flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
+                    ${result.position === 1 ? 'bg-yellow-500/20 text-yellow-400' :
+                      result.position === 2 ? 'bg-gray-400/20 text-gray-300' :
+                      result.position === 3 ? 'bg-amber-600/20 text-amber-500' :
+                      'text-white'}
+                  `}>
+                    {result.position}
+                  </div>
                 </td>
                 <td className="py-3 px-4">
-                  <span className="text-white">{getDriverName(result.driverId)}</span>
+                  <div className="flex items-center gap-3">
+                    {driver ? (
+                      <>
+                        <div className={`
+                          w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0
+                          ${isCurrentUser ? 'bg-primary-blue/30 text-primary-blue ring-2 ring-primary-blue/50' : 'bg-iron-gray text-gray-400'}
+                        `}>
+                          {driver.name.charAt(0)}
+                        </div>
+                        <Link
+                          href={`/drivers/${driver.id}`}
+                          className={`
+                            flex items-center gap-1.5 group
+                            ${isCurrentUser ? 'text-primary-blue font-semibold' : 'text-white hover:text-primary-blue'}
+                            transition-colors
+                          `}
+                        >
+                          <span className="group-hover:underline">{driver.name}</span>
+                          {isCurrentUser && (
+                            <span className="px-1.5 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase">
+                              You
+                            </span>
+                          )}
+                          <ExternalLink className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </Link>
+                      </>
+                    ) : (
+                      <span className="text-white">{getDriverName(result.driverId)}</span>
+                    )}
+                  </div>
                 </td>
                 <td className="py-3 px-4">
                   <span className={isFastestLap ? 'text-performance-green font-medium' : 'text-white'}>
@@ -93,6 +174,23 @@ export default function ResultsTable({ results, drivers, pointsSystem, fastestLa
                     {getPositionChangeText(positionChange)}
                   </span>
                 </td>
+                <td className="py-3 px-4">
+                  {driverPenalties.length > 0 ? (
+                    <div className="flex flex-col gap-1">
+                      {driverPenalties.map((penalty, idx) => (
+                        <div
+                          key={idx}
+                          className="flex items-center gap-1.5 text-xs text-red-400"
+                        >
+                          <AlertTriangle className="w-3 h-3" />
+                          <span>{getPenaltyDescription(penalty)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-gray-500">—</span>
+                  )}
+                </td>
               </tr>
             );
           })}