Add TFR warning banner for airspace restrictions

Fetches active Temporary Flight Restrictions from the FAA website,
filters by configured state (LOCATION_STATE env var), and displays
a red warning banner at the top of the dashboard when TFRs are present.
Data is cached for 30 minutes and degrades gracefully if the FAA is unreachable.

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

frontend/app/page.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { useCurrentWeather, useForecast, useHistorical } from '@/hooks/use-weather'
+import { useCurrentWeather, useForecast, useHistorical, useTfrs } from '@/hooks/use-weather'
 import { AssessmentBadge } from '@/components/weather/assessment-badge'
 import { WindSpeedChart } from '@/components/weather/wind-speed-chart'
 import { WindDirectionChart } from '@/components/weather/wind-direction-chart'
 import { ThresholdControls } from '@/components/weather/threshold-controls'
 import { RefreshCountdown } from '@/components/weather/refresh-countdown'
 import { StaleDataBanner } from '@/components/weather/stale-data-banner'
+import { TfrBanner } from '@/components/weather/tfr-banner'
 import { Collapsible } from '@/components/ui/collapsible'
 import { useQueryClient } from '@tanstack/react-query'
 import { Loader2, AlertCircle } from 'lucide-react'
@@ -28,6 +29,9 @@ export default function DashboardPage() {
     error: forecastError,
   } = useForecast()
 
+  // Fetch TFR data
+  const { data: tfrData } = useTfrs()
+
   // Fetch yesterday's data for comparison
   const yesterday = format(subDays(new Date(), 1), 'yyyy-MM-dd')
   const {
@@ -111,6 +115,11 @@ export default function DashboardPage() {
           )}
         </div>
 
+        {/* TFR Warning */}
+        {tfrData && tfrData.tfrs.length > 0 && (
+          <TfrBanner tfrs={tfrData.tfrs} />
+        )}
+
         {/* Stale Data Warning */}
         <StaleDataBanner lastUpdated={currentWeather.last_updated} />
 

frontend/components/weather/index.ts

@@ -4,3 +4,4 @@ export { WindDirectionChart } from './wind-direction-chart'
 export { ThresholdControls } from './threshold-controls'
 export { RefreshCountdown } from './refresh-countdown'
 export { StaleDataBanner } from './stale-data-banner'
+export { TfrBanner } from './tfr-banner'

frontend/components/weather/tfr-banner.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { AlertTriangle, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { TFR } from '@/lib/types'
+
+interface TfrBannerProps {
+  tfrs: TFR[]
+  className?: string
+}
+
+export function TfrBanner({ tfrs, className }: TfrBannerProps) {
+  if (!tfrs || tfrs.length === 0) return null
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 rounded-lg border border-red-500 bg-red-50 dark:bg-red-950 p-4',
+        className
+      )}
+      role="alert"
+    >
+      <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+      <div className="flex-1">
+        <p className="text-sm font-medium text-red-800 dark:text-red-200">
+          {tfrs.length} Active TFR{tfrs.length !== 1 ? 's' : ''} in Area
+        </p>
+        <ul className="mt-1 space-y-1">
+          {tfrs.map((tfr) => (
+            <li key={tfr.notam_id} className="text-xs text-red-700 dark:text-red-300">
+              <span className="font-medium">{tfr.type}</span>
+              {tfr.description && <> &mdash; {tfr.description}</>}
+              {tfr.detail_url && (
+                <a
+                  href={tfr.detail_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="ml-1 inline-flex items-center gap-0.5 text-red-600 dark:text-red-400 hover:underline"
+                >
+                  Details <ExternalLink className="h-3 w-3" />
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+        <a
+          href="https://tfr.faa.gov/tfr3/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400 hover:underline"
+        >
+          View all TFRs on FAA website <ExternalLink className="h-3 w-3" />
+        </a>
+      </div>
+    </div>
+  )
+}

frontend/hooks/use-weather.ts

@@ -1,8 +1,8 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
-import { getCurrentWeather, getForecast, getHistorical } from '@/lib/api'
-import type { CurrentWeatherResponse, ForecastResponse, HistoricalResponse } from '@/lib/types'
+import { getCurrentWeather, getForecast, getHistorical, getTfrs } from '@/lib/api'
+import type { CurrentWeatherResponse, ForecastResponse, HistoricalResponse, TFRResponse } from '@/lib/types'
 
 const STALE_TIME = 5 * 60 * 1000 // 5 minutes
 const REFETCH_INTERVAL = 5 * 60 * 1000 // 5 minutes
@@ -35,3 +35,15 @@ export function useHistorical(date: string, lat?: number, lon?: number) {
     enabled: !!date,
   })
 }
+
+const TFR_STALE_TIME = 30 * 60 * 1000 // 30 minutes
+const TFR_REFETCH_INTERVAL = 30 * 60 * 1000 // 30 minutes
+
+export function useTfrs() {
+  return useQuery<TFRResponse>({
+    queryKey: ['airspace', 'tfrs'],
+    queryFn: () => getTfrs(),
+    staleTime: TFR_STALE_TIME,
+    refetchInterval: TFR_REFETCH_INTERVAL,
+  })
+}

frontend/lib/api.ts

@@ -3,6 +3,7 @@ import {
   ForecastResponse,
   HistoricalResponse,
   AssessmentResponse,
+  TFRResponse,
   Thresholds,
   APIError,
 } from './types'
@@ -166,6 +167,13 @@ class APIClient {
     }
   }
 
+  /**
+   * Get active TFRs (Temporary Flight Restrictions) near the configured location
+   */
+  async getTfrs(): Promise<TFRResponse> {
+    return this.request<TFRResponse>('/airspace/tfrs')
+  }
+
   /**
    * Assess current conditions with custom thresholds
    */
@@ -200,6 +208,8 @@ export const getForecast = (lat?: number, lon?: number) =>
 export const getHistorical = (date: string, lat?: number, lon?: number) =>
   apiClient.getHistorical(date, lat, lon)
 
+export const getTfrs = () => apiClient.getTfrs()
+
 export const assessWithThresholds = (
   thresholds: Thresholds,
   lat?: number,

frontend/lib/types.ts

@@ -85,6 +85,24 @@ export interface AssessmentResponse {
   thresholds_used: Thresholds
 }
 
+// TFR (Temporary Flight Restriction) types
+
+export interface TFR {
+  date: string
+  notam_id: string
+  facility: string
+  state: string
+  type: string
+  description: string
+  detail_url: string
+}
+
+export interface TFRResponse {
+  tfrs: TFR[]
+  count: number
+  last_checked: string
+}
+
 // Error response type
 export interface APIError {
   error: string