feat(ui): add clear/reset button to plan new trips

- "Plan New Trip" button appears above Timeline when results are shown
- Clears trip result, timeline, and log sheets from view
- Resets all form fields to empty via React Hook Form reset()
- Clears picked map pins and exits picking mode
- Returns map to default US overview (center [39.5, -98.35], zoom 4)
- resetKey increments trigger form reset and ResetView map hook
- viewResetKey prop added to RouteMap; resetKey prop added to TripInputForm

Author: FelixBC

frontend/src/components/RouteMap.tsx

@@ -1,6 +1,6 @@
 import "leaflet/dist/leaflet.css";
 import L from "leaflet";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
   MapContainer,
   Marker,
@@ -25,6 +25,7 @@ interface RouteMapProps {
   pickedLocations?: Partial<Record<LocationType, PickedLocation>>;
   onModeChange?: (mode: LocationType | null) => void;
   onLocationPicked?: (type: LocationType, lat: number, lng: number) => void;
+  viewResetKey?: number;
 }
 
 const PICKED_COLORS: Record<LocationType, string> = {
@@ -103,6 +104,16 @@ function MapBounds({ points }: { points: [number, number][] }) {
   return null;
 }
 
+function ResetView({ trigger }: { trigger: number }) {
+  const map = useMap();
+  useEffect(() => {
+    if (trigger > 0) {
+      map.setView([39.5, -98.35], 4);
+    }
+  }, [trigger, map]);
+  return null;
+}
+
 const TYPE_PRIORITY: Record<MarkerType, number> = {
   milestone: 3,
   stop: 2,
@@ -122,6 +133,7 @@ export function RouteMap({
   pickedLocations,
   onModeChange,
   onLocationPicked,
+  viewResetKey = 0,
 }: RouteMapProps) {
   const pickerEnabled = Boolean(onModeChange && onLocationPicked);
   const pickedEntries = pickedLocations
@@ -260,6 +272,7 @@ export function RouteMap({
             />
           ) : null}
           <MapBounds points={boundsPoints} />
+          <ResetView trigger={viewResetKey} />
         </MapContainer>
       </div>
     </div>

frontend/src/components/TripInputForm.tsx

@@ -18,6 +18,7 @@ interface TripInputFormProps {
   isLoading: boolean;
   errorMessage?: string;
   pickedLocations?: Partial<Record<LocationType, PickedLocation>>;
+  resetKey?: number;
 }
 
 const LOCATION_FIELD: Record<LocationType, keyof FormValues> = {
@@ -31,10 +32,12 @@ export function TripInputForm({
   isLoading,
   errorMessage,
   pickedLocations,
+  resetKey,
 }: TripInputFormProps) {
   const {
     register,
     setValue,
+    reset,
     handleSubmit,
     formState: { errors },
   } = useForm<FormValues>({
@@ -47,6 +50,12 @@ export function TripInputForm({
     },
   });
 
+  // Reset the form when the parent signals a full clear.
+  useEffect(() => {
+    if (!resetKey) return;
+    reset();
+  }, [resetKey, reset]);
+
   // Sync picked-label values from the map into the corresponding text input
   // so map-only flows still satisfy the form's required-string validation.
   useEffect(() => {

frontend/src/pages/PlannerPage.tsx

@@ -63,6 +63,7 @@ export function PlannerPage() {
   const [pickedLocations, setPickedLocations] = useState<
     Partial<Record<LocationType, PickedLocation>>
   >({});
+  const [resetKey, setResetKey] = useState(0);
 
   const mutation = useMutation({
     mutationFn: planTrip,
@@ -71,6 +72,14 @@ export function PlannerPage() {
 
   const isLoading = mutation.isPending;
 
+  const handleReset = () => {
+    setResult(null);
+    setPickedLocations({});
+    setPickingMode(null);
+    mutation.reset();
+    setResetKey((k) => k + 1);
+  };
+
   const handleLocationPicked = async (type: LocationType, lat: number, lng: number) => {
     let label = `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
     try {
@@ -125,6 +134,7 @@ export function PlannerPage() {
             isLoading={isLoading}
             errorMessage={mutation.isError ? parseError(mutation.error) : undefined}
             pickedLocations={pickedLocations}
+            resetKey={resetKey}
           />
 
           {isLoading ? (
@@ -136,6 +146,7 @@ export function PlannerPage() {
               pickedLocations={pickedLocations}
               onModeChange={setPickingMode}
               onLocationPicked={handleLocationPicked}
+              viewResetKey={resetKey}
             />
           )}
         </section>
@@ -147,6 +158,16 @@ export function PlannerPage() {
           </div>
         ) : result ? (
           <>
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-gray-700">Trip Results</h2>
+              <button
+                type="button"
+                onClick={handleReset}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 transition hover:border-red-400 hover:bg-red-50 hover:text-red-600"
+              >
+                ← Plan New Trip
+              </button>
+            </div>
             <TimelineView logSheets={result.log_sheets} />
             <section className="space-y-6">
               {result.log_sheets.map((sheet) => (