wip

apps/website/components/alpha/AlphaNav.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import UserPill from '@/components/profile/UserPill';
+import NotificationCenter from '@/components/notifications/NotificationCenter';
 import { useAuth } from '@/lib/auth/AuthContext';
 
 type AlphaNavProps = Record<string, never>;
@@ -66,6 +67,7 @@ export function AlphaNav({}: AlphaNavProps) {
           </div>
 
           <div className="hidden md:flex items-center space-x-3">
+            <NotificationCenter />
             <UserPill />
           </div>
 

apps/website/components/dev/DevToolbar.tsx

@@ -0,0 +1,352 @@
+'use client';
+
+import { useState } from 'react';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { getSendNotificationUseCase } from '@/lib/di-container';
+import type { NotificationUrgency } from '@gridpilot/notifications/application';
+import {
+  Bell,
+  AlertTriangle,
+  Vote,
+  Shield,
+  ChevronDown,
+  ChevronUp,
+  Wrench,
+  X,
+  MessageSquare,
+  AlertCircle,
+  BellRing,
+} from 'lucide-react';
+
+type DemoNotificationType = 'protest_filed' | 'defense_requested' | 'vote_required';
+type DemoUrgency = 'silent' | 'toast' | 'modal';
+
+interface NotificationOption {
+  type: DemoNotificationType;
+  label: string;
+  description: string;
+  icon: typeof Bell;
+  color: string;
+}
+
+interface UrgencyOption {
+  urgency: DemoUrgency;
+  label: string;
+  description: string;
+  icon: typeof Bell;
+}
+
+const notificationOptions: NotificationOption[] = [
+  {
+    type: 'protest_filed',
+    label: 'Protest Against You',
+    description: 'A protest was filed against you',
+    icon: AlertTriangle,
+    color: 'text-red-400',
+  },
+  {
+    type: 'defense_requested',
+    label: 'Defense Requested',
+    description: 'A steward requests your defense',
+    icon: Shield,
+    color: 'text-warning-amber',
+  },
+  {
+    type: 'vote_required',
+    label: 'Vote Required',
+    description: 'You need to vote on a protest',
+    icon: Vote,
+    color: 'text-primary-blue',
+  },
+];
+
+const urgencyOptions: UrgencyOption[] = [
+  {
+    urgency: 'silent',
+    label: 'Silent',
+    description: 'Only shows in notification center',
+    icon: Bell,
+  },
+  {
+    urgency: 'toast',
+    label: 'Toast',
+    description: 'Shows a temporary popup',
+    icon: BellRing,
+  },
+  {
+    urgency: 'modal',
+    label: 'Modal',
+    description: 'Shows blocking modal (must respond)',
+    icon: AlertCircle,
+  },
+];
+
+export default function DevToolbar() {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [selectedType, setSelectedType] = useState<DemoNotificationType>('protest_filed');
+  const [selectedUrgency, setSelectedUrgency] = useState<DemoUrgency>('toast');
+  const [sending, setSending] = useState(false);
+  const [lastSent, setLastSent] = useState<string | null>(null);
+  
+  const currentDriverId = useEffectiveDriverId();
+
+  // Only show in development
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  const handleSendNotification = async () => {
+    setSending(true);
+    try {
+      const sendNotification = getSendNotificationUseCase();
+      
+      let title: string;
+      let body: string;
+      let notificationType: 'protest_filed' | 'protest_defense_requested' | 'protest_vote_required';
+      let actionUrl: string;
+
+      switch (selectedType) {
+        case 'protest_filed':
+          title = '🚨 Protest Filed Against You';
+          body = 'Max Verstappen has filed a protest against you for unsafe rejoining at Turn 3, Lap 12 during the Spa-Francorchamps race.';
+          notificationType = 'protest_filed';
+          actionUrl = '/races/race-1/stewarding';
+          break;
+        case 'defense_requested':
+          title = '⚖️ Defense Requested';
+          body = 'A steward has requested your defense regarding the incident at Turn 1 in the Monza race. Please provide your side of the story within 48 hours.';
+          notificationType = 'protest_defense_requested';
+          actionUrl = '/races/race-2/stewarding';
+          break;
+        case 'vote_required':
+          title = '🗳️ Your Vote Required';
+          body = 'As a league steward, you are required to vote on the protest: Driver A vs Driver B - Causing a collision at Eau Rouge.';
+          notificationType = 'protest_vote_required';
+          actionUrl = '/leagues/league-1/stewarding';
+          break;
+      }
+
+      // For modal urgency, add actions
+      const actions = selectedUrgency === 'modal' ? [
+        { label: 'View Protest', type: 'primary' as const, href: actionUrl, actionId: 'view' },
+        { label: 'Dismiss', type: 'secondary' as const, actionId: 'dismiss' },
+      ] : undefined;
+
+      await sendNotification.execute({
+        recipientId: currentDriverId,
+        type: notificationType,
+        title,
+        body,
+        actionUrl,
+        urgency: selectedUrgency as NotificationUrgency,
+        requiresResponse: selectedUrgency === 'modal',
+        actions,
+        data: {
+          protestId: `demo-protest-${Date.now()}`,
+          raceId: 'race-1',
+          leagueId: 'league-1',
+          deadline: selectedUrgency === 'modal' ? new Date(Date.now() + 48 * 60 * 60 * 1000) : undefined,
+        },
+      });
+
+      setLastSent(`${selectedType}-${selectedUrgency}`);
+      setTimeout(() => setLastSent(null), 3000);
+    } catch (error) {
+      console.error('Failed to send demo notification:', error);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (isMinimized) {
+    return (
+      <button
+        onClick={() => setIsMinimized(false)}
+        className="fixed bottom-4 right-4 z-50 p-3 bg-iron-gray border border-charcoal-outline rounded-full shadow-lg hover:bg-charcoal-outline transition-colors"
+        title="Open Dev Toolbar"
+      >
+        <Wrench className="w-5 h-5 text-primary-blue" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 w-80 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline">
+        <div className="flex items-center gap-2">
+          <Wrench className="w-4 h-4 text-primary-blue" />
+          <span className="text-sm font-semibold text-white">Dev Toolbar</span>
+          <span className="px-1.5 py-0.5 text-[10px] font-medium bg-primary-blue/20 text-primary-blue rounded">
+            DEMO
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1.5 hover:bg-charcoal-outline rounded transition-colors"
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-4 h-4 text-gray-400" />
+            ) : (
+              <ChevronUp className="w-4 h-4 text-gray-400" />
+            )}
+          </button>
+          <button
+            onClick={() => setIsMinimized(true)}
+            className="p-1.5 hover:bg-charcoal-outline rounded transition-colors"
+          >
+            <X className="w-4 h-4 text-gray-400" />
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="p-4 space-y-4">
+          {/* Notification Type Section */}
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <MessageSquare className="w-4 h-4 text-gray-400" />
+              <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+                Notification Type
+              </span>
+            </div>
+
+            <div className="grid grid-cols-3 gap-1">
+              {notificationOptions.map((option) => {
+                const Icon = option.icon;
+                const isSelected = selectedType === option.type;
+
+                return (
+                  <button
+                    key={option.type}
+                    onClick={() => setSelectedType(option.type)}
+                    className={`
+                      flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
+                      ${isSelected
+                        ? 'bg-primary-blue/20 border-primary-blue/50'
+                        : 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
+                      }
+                    `}
+                  >
+                    <Icon className={`w-4 h-4 ${isSelected ? 'text-primary-blue' : option.color}`} />
+                    <span className={`text-[10px] font-medium ${isSelected ? 'text-primary-blue' : 'text-gray-400'}`}>
+                      {option.label.split(' ')[0]}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Urgency Section */}
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <BellRing className="w-4 h-4 text-gray-400" />
+              <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+                Urgency Level
+              </span>
+            </div>
+
+            <div className="grid grid-cols-3 gap-1">
+              {urgencyOptions.map((option) => {
+                const Icon = option.icon;
+                const isSelected = selectedUrgency === option.urgency;
+
+                return (
+                  <button
+                    key={option.urgency}
+                    onClick={() => setSelectedUrgency(option.urgency)}
+                    className={`
+                      flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
+                      ${isSelected
+                        ? option.urgency === 'modal'
+                          ? 'bg-red-500/20 border-red-500/50'
+                          : option.urgency === 'toast'
+                            ? 'bg-warning-amber/20 border-warning-amber/50'
+                            : 'bg-gray-500/20 border-gray-500/50'
+                        : 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
+                      }
+                    `}
+                  >
+                    <Icon className={`w-4 h-4 ${
+                      isSelected
+                        ? option.urgency === 'modal'
+                          ? 'text-red-400'
+                          : option.urgency === 'toast'
+                            ? 'text-warning-amber'
+                            : 'text-gray-400'
+                        : 'text-gray-500'
+                    }`} />
+                    <span className={`text-[10px] font-medium ${
+                      isSelected
+                        ? option.urgency === 'modal'
+                          ? 'text-red-400'
+                          : option.urgency === 'toast'
+                            ? 'text-warning-amber'
+                            : 'text-gray-400'
+                        : 'text-gray-500'
+                    }`}>
+                      {option.label}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+            <p className="text-[10px] text-gray-600 mt-1">
+              {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
+            </p>
+          </div>
+
+          {/* Send Button */}
+          <button
+            onClick={handleSendNotification}
+            disabled={sending}
+            className={`
+              w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm transition-all
+              ${lastSent
+                ? 'bg-performance-green/20 border border-performance-green/30 text-performance-green'
+                : 'bg-primary-blue hover:bg-primary-blue/80 text-white'
+              }
+              disabled:opacity-50 disabled:cursor-not-allowed
+            `}
+          >
+            {sending ? (
+              <>
+                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                Sending...
+              </>
+            ) : lastSent ? (
+              <>
+                ✓ Notification Sent!
+              </>
+            ) : (
+              <>
+                <Bell className="w-4 h-4" />
+                Send Demo Notification
+              </>
+            )}
+          </button>
+
+          {/* Info */}
+          <div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+            <p className="text-[10px] text-gray-500">
+              <strong className="text-gray-400">Silent:</strong> Notification center only<br/>
+              <strong className="text-gray-400">Toast:</strong> Temporary popup (auto-dismisses)<br/>
+              <strong className="text-gray-400">Modal:</strong> Blocking popup (requires action)
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Collapsed state hint */}
+      {!isExpanded && (
+        <div className="px-4 py-2 text-xs text-gray-500">
+          Click ↑ to expand notification demo tools
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/components/leagues/CreateLeagueWizard.tsx

@@ -15,6 +15,7 @@ import {
   AlertCircle,
   Sparkles,
   Check,
+  Scale,
 } from 'lucide-react';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
@@ -42,6 +43,7 @@ import {
 } from './LeagueScoringSection';
 import { LeagueDropSection } from './LeagueDropSection';
 import { LeagueTimingsSection } from './LeagueTimingsSection';
+import { LeagueStewardingSection } from './LeagueStewardingSection';
 
 // ============================================================================
 // LOCAL STORAGE PERSISTENCE
@@ -99,9 +101,9 @@ function getHighestStep(): number {
   }
 }
 
-type Step = 1 | 2 | 3 | 4 | 5 | 6;
+type Step = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
-type StepName = 'basics' | 'visibility' | 'structure' | 'schedule' | 'scoring' | 'review';
+type StepName = 'basics' | 'visibility' | 'structure' | 'schedule' | 'scoring' | 'stewarding' | 'review';
 
 interface CreateLeagueWizardProps {
   stepName: StepName;
@@ -120,8 +122,10 @@ function stepNameToStep(stepName: StepName): Step {
       return 4;
     case 'scoring':
       return 5;
-    case 'review':
+    case 'stewarding':
       return 6;
+    case 'review':
+      return 7;
   }
 }
 
@@ -138,6 +142,8 @@ function stepToStepName(step: Step): StepName {
     case 5:
       return 'scoring';
     case 6:
+      return 'stewarding';
+    case 7:
       return 'review';
   }
 }
@@ -198,6 +204,17 @@ function createDefaultForm(): LeagueConfigFormModel {
       timezoneId: 'UTC',
       seasonStartDate: getDefaultSeasonStartDate(),
     },
+    stewarding: {
+      decisionMode: 'admin_only',
+      requiredVotes: 2,
+      requireDefense: false,
+      defenseTimeLimit: 48,
+      voteTimeLimit: 72,
+      protestDeadlineHours: 48,
+      stewardingClosesHours: 168,
+      notifyAccusedOnProtest: true,
+      notifyOnVoteRequired: true,
+    },
   };
 }
 
@@ -287,7 +304,7 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
     if (!validateStep(step)) {
       return;
     }
-    const nextStep = (step < 6 ? ((step + 1) as Step) : step);
+    const nextStep = (step < 7 ? ((step + 1) as Step) : step);
     saveHighestStep(nextStep);
     setHighestCompletedStep((prev) => Math.max(prev, nextStep));
     onStepChange(stepToStepName(nextStep));
@@ -353,7 +370,8 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
     { id: 3 as Step, label: 'Structure', icon: Users, shortLabel: 'Mode' },
     { id: 4 as Step, label: 'Schedule', icon: Calendar, shortLabel: 'Time' },
     { id: 5 as Step, label: 'Scoring', icon: Trophy, shortLabel: 'Points' },
-    { id: 6 as Step, label: 'Review', icon: CheckCircle2, shortLabel: 'Done' },
+    { id: 6 as Step, label: 'Stewarding', icon: Scale, shortLabel: 'Rules' },
+    { id: 7 as Step, label: 'Review', icon: CheckCircle2, shortLabel: 'Done' },
   ];
 
   const getStepTitle = (currentStep: Step): string => {
@@ -369,6 +387,8 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
       case 5:
         return 'Scoring & championships';
       case 6:
+        return 'Stewarding & protests';
+      case 7:
         return 'Review & create';
       default:
         return '';
@@ -388,6 +408,8 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
       case 5:
         return 'Select a scoring preset, enable championships, and set drop rules.';
       case 6:
+        return 'Configure how protests are handled and penalties decided.';
+      case 7:
         return 'Everything looks good? Launch your new league!';
       default:
         return '';
@@ -629,6 +651,16 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
           )}
 
           {step === 6 && (
+            <div className="animate-fade-in">
+              <LeagueStewardingSection
+                form={form}
+                onChange={setForm}
+                readOnly={false}
+              />
+            </div>
+          )}
+
+          {step === 7 && (
             <div className="animate-fade-in space-y-6">
               <LeagueReviewSummary form={form} presets={presets} />
               {errors.submit && (
@@ -669,7 +701,7 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
             ))}
           </div>
 
-          {step < 6 ? (
+          {step < 7 ? (
             <Button
               type="button"
               variant="primary"

apps/website/components/leagues/LeagueStewardingSection.tsx

@@ -0,0 +1,380 @@
+'use client';
+
+import { Scale, Users, Clock, Bell, Shield, Vote, UserCheck, AlertTriangle } from 'lucide-react';
+import type { LeagueConfigFormModel, LeagueStewardingFormDTO } from '@gridpilot/racing/application';
+import type { StewardingDecisionMode } from '@gridpilot/racing/domain/entities/League';
+
+interface LeagueStewardingSectionProps {
+  form: LeagueConfigFormModel;
+  onChange: (form: LeagueConfigFormModel) => void;
+  readOnly?: boolean;
+}
+
+type DecisionModeOption = {
+  value: StewardingDecisionMode;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+  requiresVotes: boolean;
+};
+
+const decisionModeOptions: DecisionModeOption[] = [
+  {
+    value: 'admin_only',
+    label: 'Admin Decision',
+    description: 'League admins make all penalty decisions',
+    icon: <Shield className="w-5 h-5" />,
+    requiresVotes: false,
+  },
+  {
+    value: 'steward_vote',
+    label: 'Steward Vote',
+    description: 'Designated stewards vote to uphold protests',
+    icon: <Scale className="w-5 h-5" />,
+    requiresVotes: true,
+  },
+  {
+    value: 'member_vote',
+    label: 'Member Vote',
+    description: 'All league members vote on protests',
+    icon: <Users className="w-5 h-5" />,
+    requiresVotes: true,
+  },
+  {
+    value: 'steward_veto',
+    label: 'Steward Veto',
+    description: 'Protests upheld unless stewards vote against',
+    icon: <Vote className="w-5 h-5" />,
+    requiresVotes: true,
+  },
+  {
+    value: 'member_veto',
+    label: 'Member Veto',
+    description: 'Protests upheld unless members vote against',
+    icon: <UserCheck className="w-5 h-5" />,
+    requiresVotes: true,
+  },
+];
+
+export function LeagueStewardingSection({
+  form,
+  onChange,
+  readOnly = false,
+}: LeagueStewardingSectionProps) {
+  const stewarding = form.stewarding;
+
+  const updateStewarding = (updates: Partial<LeagueStewardingFormDTO>) => {
+    onChange({
+      ...form,
+      stewarding: {
+        ...stewarding,
+        ...updates,
+      },
+    });
+  };
+
+  const selectedMode = decisionModeOptions.find((m) => m.value === stewarding.decisionMode);
+
+  return (
+    <div className="space-y-8">
+      {/* Decision Mode Selection */}
+      <div>
+        <h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
+          <Scale className="w-4 h-4 text-primary-blue" />
+          How are protest decisions made?
+        </h3>
+        <p className="text-xs text-gray-400 mb-4">
+          Choose who has the authority to issue penalties
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          {decisionModeOptions.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              disabled={readOnly}
+              onClick={() => updateStewarding({ decisionMode: option.value })}
+              className={`
+                relative flex flex-col items-start gap-2 p-4 rounded-xl border-2 transition-all text-left
+                ${stewarding.decisionMode === option.value
+                  ? 'border-primary-blue bg-primary-blue/5 shadow-[0_0_16px_rgba(25,140,255,0.15)]'
+                  : 'border-charcoal-outline bg-iron-gray/30 hover:border-gray-500'
+                }
+                ${readOnly ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}
+              `}
+            >
+              <div
+                className={`p-2 rounded-lg ${
+                  stewarding.decisionMode === option.value
+                    ? 'bg-primary-blue/20 text-primary-blue'
+                    : 'bg-charcoal-outline/50 text-gray-400'
+                }`}
+              >
+                {option.icon}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-white">{option.label}</p>
+                <p className="text-xs text-gray-400 mt-0.5">{option.description}</p>
+              </div>
+              {stewarding.decisionMode === option.value && (
+                <div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-primary-blue" />
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Vote Requirements (conditional) */}
+      {selectedMode?.requiresVotes && (
+        <div className="p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline space-y-4">
+          <h4 className="text-sm font-medium text-white flex items-center gap-2">
+            <Vote className="w-4 h-4 text-primary-blue" />
+            Voting Configuration
+          </h4>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-gray-400 mb-1.5">
+                Required votes to {stewarding.decisionMode.includes('veto') ? 'block' : 'uphold'}
+              </label>
+              <select
+                value={stewarding.requiredVotes ?? 2}
+                onChange={(e) => updateStewarding({ requiredVotes: parseInt(e.target.value, 10) })}
+                disabled={readOnly}
+                className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
+              >
+                <option value={1}>1 vote</option>
+                <option value={2}>2 votes</option>
+                <option value={3}>3 votes (majority of 5)</option>
+                <option value={4}>4 votes</option>
+                <option value={5}>5 votes</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-400 mb-1.5">
+                Voting time limit
+              </label>
+              <select
+                value={stewarding.voteTimeLimit}
+                onChange={(e) => updateStewarding({ voteTimeLimit: parseInt(e.target.value, 10) })}
+                disabled={readOnly}
+                className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
+              >
+                <option value={24}>24 hours</option>
+                <option value={48}>48 hours</option>
+                <option value={72}>72 hours (3 days)</option>
+                <option value={96}>96 hours (4 days)</option>
+                <option value={168}>168 hours (7 days)</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Defense Settings */}
+      <div>
+        <h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
+          <Shield className="w-4 h-4 text-primary-blue" />
+          Defense Requirements
+        </h3>
+        <p className="text-xs text-gray-400 mb-4">
+          Should accused drivers be required to submit a defense?
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <button
+            type="button"
+            disabled={readOnly}
+            onClick={() => updateStewarding({ requireDefense: false })}
+            className={`
+              flex items-center gap-3 p-4 rounded-xl border-2 transition-all text-left
+              ${!stewarding.requireDefense
+                ? 'border-primary-blue bg-primary-blue/5'
+                : 'border-charcoal-outline bg-iron-gray/30 hover:border-gray-500'
+              }
+              ${readOnly ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}
+            `}
+          >
+            <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
+              !stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'
+            }`}>
+              {!stewarding.requireDefense && <div className="w-2 h-2 rounded-full bg-primary-blue" />}
+            </div>
+            <div>
+              <p className="text-sm font-medium text-white">Defense optional</p>
+              <p className="text-xs text-gray-400">Proceed without waiting for defense</p>
+            </div>
+          </button>
+
+          <button
+            type="button"
+            disabled={readOnly}
+            onClick={() => updateStewarding({ requireDefense: true })}
+            className={`
+              flex items-center gap-3 p-4 rounded-xl border-2 transition-all text-left
+              ${stewarding.requireDefense
+                ? 'border-primary-blue bg-primary-blue/5'
+                : 'border-charcoal-outline bg-iron-gray/30 hover:border-gray-500'
+              }
+              ${readOnly ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}
+            `}
+          >
+            <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
+              stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'
+            }`}>
+              {stewarding.requireDefense && <div className="w-2 h-2 rounded-full bg-primary-blue" />}
+            </div>
+            <div>
+              <p className="text-sm font-medium text-white">Defense required</p>
+              <p className="text-xs text-gray-400">Wait for defense before deciding</p>
+            </div>
+          </button>
+        </div>
+
+        {stewarding.requireDefense && (
+          <div className="mt-4 p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline">
+            <label className="block text-xs font-medium text-gray-400 mb-1.5">
+              Defense time limit
+            </label>
+            <select
+              value={stewarding.defenseTimeLimit}
+              onChange={(e) => updateStewarding({ defenseTimeLimit: parseInt(e.target.value, 10) })}
+              disabled={readOnly}
+              className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
+            >
+              <option value={24}>24 hours</option>
+              <option value={48}>48 hours (2 days)</option>
+              <option value={72}>72 hours (3 days)</option>
+              <option value={96}>96 hours (4 days)</option>
+            </select>
+            <p className="text-xs text-gray-500 mt-2">
+              After this time, the decision can proceed without a defense
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Deadlines */}
+      <div>
+        <h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
+          <Clock className="w-4 h-4 text-primary-blue" />
+          Deadlines
+        </h3>
+        <p className="text-xs text-gray-400 mb-4">
+          Set time limits for filing protests and closing stewarding
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline">
+            <label className="block text-xs font-medium text-gray-400 mb-1.5">
+              Protest filing deadline (after race)
+            </label>
+            <select
+              value={stewarding.protestDeadlineHours}
+              onChange={(e) => updateStewarding({ protestDeadlineHours: parseInt(e.target.value, 10) })}
+              disabled={readOnly}
+              className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
+            >
+              <option value={12}>12 hours</option>
+              <option value={24}>24 hours (1 day)</option>
+              <option value={48}>48 hours (2 days)</option>
+              <option value={72}>72 hours (3 days)</option>
+              <option value={168}>168 hours (7 days)</option>
+            </select>
+            <p className="text-xs text-gray-500 mt-2">
+              Drivers cannot file protests after this time
+            </p>
+          </div>
+
+          <div className="p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline">
+            <label className="block text-xs font-medium text-gray-400 mb-1.5">
+              Stewarding closes (after race)
+            </label>
+            <select
+              value={stewarding.stewardingClosesHours}
+              onChange={(e) => updateStewarding({ stewardingClosesHours: parseInt(e.target.value, 10) })}
+              disabled={readOnly}
+              className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
+            >
+              <option value={72}>72 hours (3 days)</option>
+              <option value={96}>96 hours (4 days)</option>
+              <option value={168}>168 hours (7 days)</option>
+              <option value={336}>336 hours (14 days)</option>
+            </select>
+            <p className="text-xs text-gray-500 mt-2">
+              All stewarding must be concluded by this time
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Notifications */}
+      <div>
+        <h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
+          <Bell className="w-4 h-4 text-primary-blue" />
+          Notifications
+        </h3>
+        <p className="text-xs text-gray-400 mb-4">
+          Configure automatic notifications for involved parties
+        </p>
+
+        <div className="space-y-3">
+          <label
+            className={`flex items-center gap-3 p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline cursor-pointer hover:bg-iron-gray/60 transition-colors ${
+              readOnly ? 'opacity-60 cursor-not-allowed' : ''
+            }`}
+          >
+            <input
+              type="checkbox"
+              checked={stewarding.notifyAccusedOnProtest}
+              onChange={(e) => updateStewarding({ notifyAccusedOnProtest: e.target.checked })}
+              disabled={readOnly}
+              className="w-4 h-4 rounded border-charcoal-outline bg-deep-graphite text-primary-blue focus:ring-primary-blue focus:ring-offset-0"
+            />
+            <div>
+              <p className="text-sm font-medium text-white">Notify accused driver</p>
+              <p className="text-xs text-gray-400">
+                Send notification when a protest is filed against them
+              </p>
+            </div>
+          </label>
+
+          <label
+            className={`flex items-center gap-3 p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline cursor-pointer hover:bg-iron-gray/60 transition-colors ${
+              readOnly ? 'opacity-60 cursor-not-allowed' : ''
+            }`}
+          >
+            <input
+              type="checkbox"
+              checked={stewarding.notifyOnVoteRequired}
+              onChange={(e) => updateStewarding({ notifyOnVoteRequired: e.target.checked })}
+              disabled={readOnly}
+              className="w-4 h-4 rounded border-charcoal-outline bg-deep-graphite text-primary-blue focus:ring-primary-blue focus:ring-offset-0"
+            />
+            <div>
+              <p className="text-sm font-medium text-white">Notify voters</p>
+              <p className="text-xs text-gray-400">
+                Send notification to stewards/members when their vote is needed
+              </p>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      {/* Warning about strict settings */}
+      {stewarding.requireDefense && stewarding.decisionMode !== 'admin_only' && (
+        <div className="flex items-start gap-3 p-4 rounded-xl bg-warning-amber/10 border border-warning-amber/20">
+          <AlertTriangle className="w-5 h-5 text-warning-amber shrink-0 mt-0.5" />
+          <div>
+            <p className="text-sm font-medium text-warning-amber">Strict settings enabled</p>
+            <p className="text-xs text-warning-amber/80 mt-1">
+              Requiring defense and voting may delay penalty decisions. Make sure your stewards/members
+              are active enough to meet the deadlines.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/components/notifications/ModalNotification.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import type { Notification, NotificationAction } from '@gridpilot/notifications/application';
+import {
+  Bell,
+  AlertTriangle,
+  Shield,
+  Vote,
+  Trophy,
+  Users,
+  Flag,
+  AlertCircle,
+  Clock,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface ModalNotificationProps {
+  notification: Notification;
+  onAction: (notification: Notification, actionId?: string) => void;
+}
+
+const notificationIcons: Record<string, typeof Bell> = {
+  protest_filed: AlertTriangle,
+  protest_defense_requested: Shield,
+  protest_vote_required: Vote,
+  penalty_issued: AlertTriangle,
+  race_results_posted: Trophy,
+  league_invite: Users,
+  race_reminder: Flag,
+};
+
+const notificationColors: Record<string, { bg: string; border: string; text: string; glow: string }> = {
+  protest_filed: { 
+    bg: 'bg-red-500/10', 
+    border: 'border-red-500/50', 
+    text: 'text-red-400',
+    glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
+  },
+  protest_defense_requested: { 
+    bg: 'bg-warning-amber/10', 
+    border: 'border-warning-amber/50', 
+    text: 'text-warning-amber',
+    glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
+  },
+  protest_vote_required: { 
+    bg: 'bg-primary-blue/10', 
+    border: 'border-primary-blue/50', 
+    text: 'text-primary-blue',
+    glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
+  },
+  penalty_issued: { 
+    bg: 'bg-red-500/10', 
+    border: 'border-red-500/50', 
+    text: 'text-red-400',
+    glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
+  },
+};
+
+export default function ModalNotification({
+  notification,
+  onAction,
+}: ModalNotificationProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Animate in
+    const timeout = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  const handleAction = (action: NotificationAction) => {
+    onAction(notification, action.actionId);
+    if (action.href) {
+      router.push(action.href);
+    }
+  };
+
+  const handlePrimaryAction = () => {
+    onAction(notification, 'primary');
+    if (notification.actionUrl) {
+      router.push(notification.actionUrl);
+    }
+  };
+
+  const Icon = notificationIcons[notification.type] || AlertCircle;
+  const colors = notificationColors[notification.type] || {
+    bg: 'bg-warning-amber/10',
+    border: 'border-warning-amber/50',
+    text: 'text-warning-amber',
+    glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
+  };
+
+  // Check if there's a deadline
+  const deadline = notification.data?.deadline;
+  const hasDeadline = deadline instanceof Date;
+
+  return (
+    <div
+      className={`
+        fixed inset-0 z-[100] flex items-center justify-center p-4
+        transition-all duration-300
+        ${isVisible ? 'bg-black/70 backdrop-blur-sm' : 'bg-transparent'}
+      `}
+    >
+      <div
+        className={`
+          w-full max-w-lg transform transition-all duration-300
+          ${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
+        `}
+      >
+        <div
+          className={`
+            rounded-2xl border-2 ${colors.border} ${colors.bg}
+            backdrop-blur-md ${colors.glow}
+            overflow-hidden
+          `}
+        >
+          {/* Header with pulse animation */}
+          <div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border}`}>
+            {/* Animated pulse ring */}
+            <div className="absolute top-4 left-6 w-12 h-12">
+              <div className={`absolute inset-0 rounded-full ${colors.bg} animate-ping opacity-20`} />
+            </div>
+            
+            <div className="flex items-center gap-4">
+              <div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border}`}>
+                <Icon className={`w-6 h-6 ${colors.text}`} />
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+                  Action Required
+                </p>
+                <h2 className="text-xl font-bold text-white">
+                  {notification.title}
+                </h2>
+              </div>
+            </div>
+          </div>
+
+          {/* Body */}
+          <div className="px-6 py-5">
+            <p className="text-gray-300 leading-relaxed">
+              {notification.body}
+            </p>
+
+            {/* Deadline warning */}
+            {hasDeadline && (
+              <div className="mt-4 flex items-center gap-2 px-4 py-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+                <Clock className="w-5 h-5 text-warning-amber" />
+                <div>
+                  <p className="text-sm font-medium text-warning-amber">Response Required</p>
+                  <p className="text-xs text-gray-400">
+                    Please respond by {deadline.toLocaleDateString()} at {deadline.toLocaleTimeString()}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Additional context from data */}
+            {notification.data?.protestId && (
+              <div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+                <p className="text-xs text-gray-500 mb-1">Related Protest</p>
+                <p className="text-sm text-gray-300 font-mono">
+                  {notification.data.protestId}
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="px-6 py-4 bg-iron-gray/30 border-t border-charcoal-outline">
+            {notification.actions && notification.actions.length > 0 ? (
+              <div className="flex flex-wrap gap-3 justify-end">
+                {notification.actions.map((action, index) => (
+                  <Button
+                    key={index}
+                    variant={action.type === 'primary' ? 'primary' : 'secondary'}
+                    onClick={() => handleAction(action)}
+                    className={action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''}
+                  >
+                    {action.label}
+                  </Button>
+                ))}
+              </div>
+            ) : (
+              <div className="flex justify-end">
+                <Button variant="primary" onClick={handlePrimaryAction}>
+                  {notification.actionUrl ? 'View Details' : 'Acknowledge'}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Cannot dismiss warning */}
+          {notification.requiresResponse && (
+            <div className="px-6 py-2 bg-red-500/10 border-t border-red-500/20">
+              <p className="text-xs text-red-400 text-center">
+                ⚠️ This notification requires your action and cannot be dismissed
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/notifications/NotificationCenter.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import {
+  getNotificationRepository,
+  getMarkNotificationReadUseCase,
+} from '@/lib/di-container';
+import type { Notification } from '@gridpilot/notifications/application';
+import {
+  Bell,
+  AlertTriangle,
+  Shield,
+  Vote,
+  Trophy,
+  Users,
+  Flag,
+  X,
+  Check,
+  CheckCheck,
+  ExternalLink,
+} from 'lucide-react';
+
+const notificationIcons: Record<string, typeof Bell> = {
+  protest_filed: AlertTriangle,
+  protest_defense_requested: Shield,
+  protest_vote_required: Vote,
+  penalty_issued: AlertTriangle,
+  race_results_posted: Trophy,
+  league_invite: Users,
+  race_reminder: Flag,
+};
+
+const notificationColors: Record<string, string> = {
+  protest_filed: 'text-red-400 bg-red-400/10',
+  protest_defense_requested: 'text-warning-amber bg-warning-amber/10',
+  protest_vote_required: 'text-primary-blue bg-primary-blue/10',
+  penalty_issued: 'text-red-400 bg-red-400/10',
+  race_results_posted: 'text-performance-green bg-performance-green/10',
+  league_invite: 'text-primary-blue bg-primary-blue/10',
+  race_reminder: 'text-warning-amber bg-warning-amber/10',
+};
+
+export default function NotificationCenter() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [loading, setLoading] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+  const currentDriverId = useEffectiveDriverId();
+
+  // Polling for new notifications
+  useEffect(() => {
+    const loadNotifications = async () => {
+      try {
+        const repo = getNotificationRepository();
+        const allNotifications = await repo.findByRecipientId(currentDriverId);
+        setNotifications(allNotifications);
+      } catch (error) {
+        console.error('Failed to load notifications:', error);
+      }
+    };
+
+    loadNotifications();
+    
+    // Poll every 5 seconds
+    const interval = setInterval(loadNotifications, 5000);
+    return () => clearInterval(interval);
+  }, [currentDriverId]);
+
+  // Close panel when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const unreadCount = notifications.filter((n) => n.isUnread()).length;
+
+  const handleMarkAsRead = async (notification: Notification) => {
+    if (!notification.isUnread()) return;
+
+    try {
+      const markRead = getMarkNotificationReadUseCase();
+      await markRead.execute({
+        notificationId: notification.id,
+        recipientId: currentDriverId,
+      });
+      
+      // Update local state
+      setNotifications((prev) =>
+        prev.map((n) => (n.id === notification.id ? n.markAsRead() : n))
+      );
+    } catch (error) {
+      console.error('Failed to mark notification as read:', error);
+    }
+  };
+
+  const handleMarkAllAsRead = async () => {
+    try {
+      const repo = getNotificationRepository();
+      await repo.markAllAsReadByRecipientId(currentDriverId);
+      
+      // Update local state
+      setNotifications((prev) => prev.map((n) => n.markAsRead()));
+    } catch (error) {
+      console.error('Failed to mark all as read:', error);
+    }
+  };
+
+  const handleNotificationClick = async (notification: Notification) => {
+    await handleMarkAsRead(notification);
+    
+    if (notification.actionUrl) {
+      router.push(notification.actionUrl);
+      setIsOpen(false);
+    }
+  };
+
+  const formatTime = (date: Date) => {
+    const now = new Date();
+    const diff = now.getTime() - new Date(date).getTime();
+    
+    const minutes = Math.floor(diff / (1000 * 60));
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days < 7) return `${days}d ago`;
+    
+    return new Date(date).toLocaleDateString();
+  };
+
+  return (
+    <div className="relative" ref={panelRef}>
+      {/* Bell button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+          relative p-2 rounded-lg transition-colors
+          ${isOpen
+            ? 'bg-primary-blue/10 text-primary-blue'
+            : 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
+          }
+        `}
+      >
+        <Bell className="w-5 h-5" />
+        {unreadCount > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-red-500 text-white rounded-full">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {/* Notification panel */}
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-2 w-96 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden z-50">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-charcoal-outline">
+            <div className="flex items-center gap-2">
+              <Bell className="w-4 h-4 text-primary-blue" />
+              <span className="font-semibold text-white">Notifications</span>
+              {unreadCount > 0 && (
+                <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
+                  {unreadCount} new
+                </span>
+              )}
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={handleMarkAllAsRead}
+                className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
+              >
+                <CheckCheck className="w-3.5 h-3.5" />
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          {/* Notifications list */}
+          <div className="max-h-[400px] overflow-y-auto">
+            {notifications.length === 0 ? (
+              <div className="py-12 text-center">
+                <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-iron-gray/50 flex items-center justify-center">
+                  <Bell className="w-6 h-6 text-gray-500" />
+                </div>
+                <p className="text-sm text-gray-400">No notifications yet</p>
+                <p className="text-xs text-gray-500 mt-1">
+                  You'll be notified about protests, races, and more
+                </p>
+              </div>
+            ) : (
+              <div className="divide-y divide-charcoal-outline/50">
+                {notifications.map((notification) => {
+                  const Icon = notificationIcons[notification.type] || Bell;
+                  const colorClass = notificationColors[notification.type] || 'text-gray-400 bg-gray-400/10';
+                  
+                  return (
+                    <button
+                      key={notification.id}
+                      onClick={() => handleNotificationClick(notification)}
+                      className={`
+                        w-full text-left px-4 py-3 transition-colors hover:bg-iron-gray/30
+                        ${notification.isUnread() ? 'bg-primary-blue/5' : ''}
+                      `}
+                    >
+                      <div className="flex gap-3">
+                        <div className={`p-2 rounded-lg flex-shrink-0 ${colorClass}`}>
+                          <Icon className="w-4 h-4" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-start justify-between gap-2">
+                            <p className={`text-sm font-medium truncate ${
+                              notification.isUnread() ? 'text-white' : 'text-gray-300'
+                            }`}>
+                              {notification.title}
+                            </p>
+                            {notification.isUnread() && (
+                              <span className="w-2 h-2 bg-primary-blue rounded-full flex-shrink-0 mt-1.5" />
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500 line-clamp-2 mt-0.5">
+                            {notification.body}
+                          </p>
+                          <div className="flex items-center gap-2 mt-1.5">
+                            <span className="text-[10px] text-gray-600">
+                              {formatTime(notification.createdAt)}
+                            </span>
+                            {notification.actionUrl && (
+                              <span className="flex items-center gap-0.5 text-[10px] text-primary-blue">
+                                <ExternalLink className="w-2.5 h-2.5" />
+                                View
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          {notifications.length > 0 && (
+            <div className="px-4 py-2 border-t border-charcoal-outline bg-iron-gray/20">
+              <p className="text-[10px] text-gray-500 text-center">
+                Showing {notifications.length} notification{notifications.length !== 1 ? 's' : ''}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/components/notifications/NotificationProvider.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import {
+  getNotificationRepository,
+  getMarkNotificationReadUseCase,
+} from '@/lib/di-container';
+import type { Notification } from '@gridpilot/notifications/application';
+import ToastNotification from './ToastNotification';
+import ModalNotification from './ModalNotification';
+
+interface NotificationContextValue {
+  notifications: Notification[];
+  unreadCount: number;
+  toastNotifications: Notification[];
+  modalNotification: Notification | null;
+  markAsRead: (notification: Notification) => Promise<void>;
+  dismissToast: (notification: Notification) => void;
+  respondToModal: (notification: Notification, actionId?: string) => Promise<void>;
+}
+
+const NotificationContext = createContext<NotificationContextValue | null>(null);
+
+export function useNotifications() {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error('useNotifications must be used within NotificationProvider');
+  }
+  return context;
+}
+
+interface NotificationProviderProps {
+  children: ReactNode;
+}
+
+export default function NotificationProvider({ children }: NotificationProviderProps) {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [toastNotifications, setToastNotifications] = useState<Notification[]>([]);
+  const [modalNotification, setModalNotification] = useState<Notification | null>(null);
+  const [seenNotificationIds, setSeenNotificationIds] = useState<Set<string>>(new Set());
+  
+  const currentDriverId = useEffectiveDriverId();
+
+  // Poll for new notifications
+  useEffect(() => {
+    const loadNotifications = async () => {
+      try {
+        const repo = getNotificationRepository();
+        const allNotifications = await repo.findByRecipientId(currentDriverId);
+        setNotifications(allNotifications);
+
+        // Check for new notifications that need toast/modal display
+        allNotifications.forEach((notification) => {
+          if (notification.isUnread() && !seenNotificationIds.has(notification.id)) {
+            // Mark as seen to prevent duplicate displays
+            setSeenNotificationIds((prev) => new Set([...prev, notification.id]));
+
+            // Handle based on urgency
+            if (notification.isModal()) {
+              // Modal takes priority - show immediately
+              setModalNotification(notification);
+            } else if (notification.isToast()) {
+              // Add to toast queue
+              setToastNotifications((prev) => [...prev, notification]);
+            }
+            // Silent notifications just appear in the notification center
+          }
+        });
+      } catch (error) {
+        console.error('Failed to load notifications:', error);
+      }
+    };
+
+    loadNotifications();
+    
+    // Poll every 2 seconds for responsiveness
+    const interval = setInterval(loadNotifications, 2000);
+    return () => clearInterval(interval);
+  }, [currentDriverId, seenNotificationIds]);
+
+  const markAsRead = useCallback(async (notification: Notification) => {
+    try {
+      const markRead = getMarkNotificationReadUseCase();
+      await markRead.execute({
+        notificationId: notification.id,
+        recipientId: currentDriverId,
+      });
+
+      setNotifications((prev) =>
+        prev.map((n) => (n.id === notification.id ? n.markAsRead() : n))
+      );
+    } catch (error) {
+      console.error('Failed to mark notification as read:', error);
+    }
+  }, [currentDriverId]);
+
+  const dismissToast = useCallback((notification: Notification) => {
+    setToastNotifications((prev) => prev.filter((n) => n.id !== notification.id));
+  }, []);
+
+  const respondToModal = useCallback(async (notification: Notification, actionId?: string) => {
+    try {
+      // Mark as responded
+      const repo = getNotificationRepository();
+      const updated = notification.markAsResponded(actionId);
+      await repo.update(updated);
+
+      // Update local state
+      setNotifications((prev) =>
+        prev.map((n) => (n.id === notification.id ? updated : n))
+      );
+
+      // Clear modal
+      setModalNotification(null);
+    } catch (error) {
+      console.error('Failed to respond to notification:', error);
+    }
+  }, []);
+
+  const unreadCount = notifications.filter((n) => n.isUnread() || n.isActionRequired()).length;
+
+  const value: NotificationContextValue = {
+    notifications,
+    unreadCount,
+    toastNotifications,
+    modalNotification,
+    markAsRead,
+    dismissToast,
+    respondToModal,
+  };
+
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+
+      {/* Toast notifications container */}
+      <div className="fixed top-20 right-4 z-50 space-y-3">
+        {toastNotifications.map((notification) => (
+          <ToastNotification
+            key={notification.id}
+            notification={notification}
+            onDismiss={dismissToast}
+            onRead={markAsRead}
+          />
+        ))}
+      </div>
+
+      {/* Modal notification */}
+      {modalNotification && (
+        <ModalNotification
+          notification={modalNotification}
+          onAction={respondToModal}
+        />
+      )}
+    </NotificationContext.Provider>
+  );
+}

apps/website/components/notifications/ToastNotification.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import type { Notification } from '@gridpilot/notifications/application';
+import {
+  Bell,
+  AlertTriangle,
+  Shield,
+  Vote,
+  Trophy,
+  Users,
+  Flag,
+  X,
+  ExternalLink,
+} from 'lucide-react';
+
+interface ToastNotificationProps {
+  notification: Notification;
+  onDismiss: (notification: Notification) => void;
+  onRead: (notification: Notification) => void;
+  autoHideDuration?: number;
+}
+
+const notificationIcons: Record<string, typeof Bell> = {
+  protest_filed: AlertTriangle,
+  protest_defense_requested: Shield,
+  protest_vote_required: Vote,
+  penalty_issued: AlertTriangle,
+  race_results_posted: Trophy,
+  league_invite: Users,
+  race_reminder: Flag,
+};
+
+const notificationColors: Record<string, { bg: string; border: string; text: string }> = {
+  protest_filed: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
+  protest_defense_requested: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
+  protest_vote_required: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
+  penalty_issued: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
+  race_results_posted: { bg: 'bg-performance-green/10', border: 'border-performance-green/30', text: 'text-performance-green' },
+  league_invite: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
+  race_reminder: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
+};
+
+export default function ToastNotification({
+  notification,
+  onDismiss,
+  onRead,
+  autoHideDuration = 5000,
+}: ToastNotificationProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Animate in
+    const showTimeout = setTimeout(() => setIsVisible(true), 10);
+
+    // Auto-hide
+    const hideTimeout = setTimeout(() => {
+      handleDismiss();
+    }, autoHideDuration);
+
+    return () => {
+      clearTimeout(showTimeout);
+      clearTimeout(hideTimeout);
+    };
+  }, [autoHideDuration]);
+
+  const handleDismiss = () => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onDismiss(notification);
+    }, 300);
+  };
+
+  const handleClick = () => {
+    onRead(notification);
+    if (notification.actionUrl) {
+      router.push(notification.actionUrl);
+    }
+    handleDismiss();
+  };
+
+  const Icon = notificationIcons[notification.type] || Bell;
+  const colors = notificationColors[notification.type] || {
+    bg: 'bg-gray-500/10',
+    border: 'border-gray-500/30',
+    text: 'text-gray-400',
+  };
+
+  return (
+    <div
+      className={`
+        transform transition-all duration-300 ease-out
+        ${isVisible && !isExiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
+      `}
+    >
+      <div
+        className={`
+          w-96 rounded-xl border ${colors.border} ${colors.bg}
+          backdrop-blur-md shadow-2xl overflow-hidden
+        `}
+      >
+        {/* Progress bar */}
+        <div className="h-1 bg-iron-gray/50 overflow-hidden">
+          <div
+            className={`h-full ${colors.text.replace('text-', 'bg-')} animate-toast-progress`}
+            style={{ animationDuration: `${autoHideDuration}ms` }}
+          />
+        </div>
+
+        <div className="p-4">
+          <div className="flex gap-3">
+            {/* Icon */}
+            <div className={`p-2 rounded-lg ${colors.bg} flex-shrink-0`}>
+              <Icon className={`w-5 h-5 ${colors.text}`} />
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-start justify-between gap-2">
+                <p className="text-sm font-semibold text-white truncate">
+                  {notification.title}
+                </p>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDismiss();
+                  }}
+                  className="p-1 rounded hover:bg-charcoal-outline transition-colors flex-shrink-0"
+                >
+                  <X className="w-4 h-4 text-gray-400" />
+                </button>
+              </div>
+              <p className="text-xs text-gray-400 line-clamp-2 mt-1">
+                {notification.body}
+              </p>
+              {notification.actionUrl && (
+                <button
+                  onClick={handleClick}
+                  className={`mt-2 flex items-center gap-1 text-xs font-medium ${colors.text} hover:underline`}
+                >
+                  View details
+                  <ExternalLink className="w-3 h-3" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/profile/UserPill.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
-import { LogOut, Star } from 'lucide-react';
+import { LogOut, Settings, Star } from 'lucide-react';
 import { useAuth } from '@/lib/auth/AuthContext';
 import {
   getDriverStats,
@@ -153,6 +153,14 @@ export default function UserPill() {
             >
               Manage leagues
             </Link>
+            <Link
+              href="/profile/settings"
+              className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              <Settings className="h-4 w-4" />
+              <span>Settings</span>
+            </Link>
           </div>
           <div className="border-t border-charcoal-outline">
             <form action="/auth/logout" method="POST">