fix: handle headscale unavailability gracefully

app/routes/auth/login.tsx

@@ -13,15 +13,10 @@ import TextField from '~/components/TextField';
 import type { Key } from '~/types';
 import { loadContext } from '~/utils/config/headplane';
 import { pull } from '~/utils/headscale';
-import {
-	startOidc,
-	beginAuthFlow,
-	getRedirectUri
-} from '~/utils/oidc';
+import { beginAuthFlow, getRedirectUri } from '~/utils/oidc';
 import { commitSession, getSession } from '~/utils/sessions.server';
 
 export async function loader({ request }: LoaderFunctionArgs) {
-
 	const session = await getSession(request.headers.get('Cookie'));
 	if (session.has('hsApiKey')) {
 		return redirect('/machines', {

app/routes/machines/overview.tsx

@@ -13,6 +13,7 @@ import { getSession } from '~/utils/sessions.server';
 import { useLiveData } from '~/utils/useLiveData';
 import type { Machine, Route, User } from '~/types';
 import { queryAgent, initAgentSocket } from '~/utils/ws-agent';
+import { ErrorPopup } from '~/components/Error'
 
 import { menuAction } from './action';
 import MachineRow from './components/machine';
@@ -139,3 +140,9 @@ export default function Page() {
 		</>
 	);
 }
+
+export function ErrorBoundary() {
+	return (
+		<ErrorPopup type="embedded" />
+	)
+}