/instances/:id looks up instance and redirects to project instance route

app/routes.tsx

@@ -5,9 +5,17 @@
  *
  * Copyright Oxide Computer Company
  */
-import { createRoutesFromElements, Navigate, Route } from 'react-router-dom'
+import {
+  createRoutesFromElements,
+  Navigate,
+  redirect,
+  Route,
+  type LoaderFunctionArgs,
+} from 'react-router-dom'
+
+import { apiQueryClient } from '@oxide/api'
 
-import { RouterDataErrorBoundary } from './components/ErrorBoundary'
+import { RouterDataErrorBoundary, trigger404 } from './components/ErrorBoundary'
 import { NotFound } from './components/ErrorPage'
 import { CreateDiskSideModalForm } from './forms/disk-create'
 import { CreateIdpSideModalForm } from './forms/idp/create'
@@ -229,6 +237,21 @@ export const routes = createRoutesFromElements(
           loader={SiloUtilizationPage.loader}
           handle={{ crumb: 'Utilization' }}
         />
+        <Route
+          path="instances/:instance"
+          element={null}
+          loader={async ({ params }: LoaderFunctionArgs) => {
+            const instance = await apiQueryClient.fetchQuery('instanceView', {
+              path: { instance: params.instance! },
+            })
+            if (!instance) throw trigger404
+            const project = await apiQueryClient.fetchQuery('projectView', {
+              path: { project: instance.projectId },
+            })
+            if (!project) throw trigger404
+            return redirect(pb.instance({ project: project.name, instance: instance.name }))
+          }}
+        />
         <Route loader={ProjectsPage.loader} element={<ProjectsPage />}>
           <Route path="projects" handle={{ crumb: 'Projects' }} element={null} />
           <Route