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

app/pages/lookups.ts

@@ -0,0 +1,18 @@
+import { redirect, type LoaderFunctionArgs } from 'react-router-dom'
+
+import { apiQueryClient } from '@oxide/api'
+
+import { trigger404 } from 'app/components/ErrorBoundary'
+import { pb } from 'app/util/path-builder'
+
+export async function instanceLookupLoader({ 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 }))
+}

app/routes.tsx

@@ -43,6 +43,7 @@ import DeviceAuthSuccessPage from './pages/DeviceAuthSuccessPage'
 import DeviceAuthVerifyPage from './pages/DeviceAuthVerifyPage'
 import { LoginPage } from './pages/LoginPage'
 import { LoginPageSaml } from './pages/LoginPageSaml'
+import { instanceLookupLoader } from './pages/lookups'
 import {
   DisksPage,
   ImagesPage,
@@ -229,6 +230,7 @@ export const routes = createRoutesFromElements(
           loader={SiloUtilizationPage.loader}
           handle={{ crumb: 'Utilization' }}
         />
+        <Route path="instances/:instance" element={null} loader={instanceLookupLoader} />
         <Route loader={ProjectsPage.loader} element={<ProjectsPage />}>
           <Route path="projects" handle={{ crumb: 'Projects' }} element={null} />
           <Route