headplane/app/routes/settings/local-agent.tsx

import { useMemo } from 'react';
import { useLoaderData, type LoaderFunctionArgs } from 'react-router';
import { getSession, commitSession } from '~/utils/sessions.server'
import { queryAgent } from '~/utils/ws-agent'
import AgentManagement from './components/agent/manage'

export async function loader({ request, context }: LoaderFunctionArgs) {
	const { ws, wsAuthKey } = context;
	const session = await getSession(request.headers.get('Cookie'));
	const onboarding = session.get('agent_onboarding') ?? false;

	const nodeKey = 'nodekey:542dad28354eb8d51e240aada7adf0222ba3ecc74af0bbd56123f03eefdb391b'
	const stats = await queryAgent([nodeKey]);

	return {
		configured: wsAuthKey !== undefined,
		onboarding,
		stats: stats[nodeKey]
	}
}

export default function Page() {
	const data = useLoaderData<typeof loader>();

	// Whether we show the onboarding or management UI
	const management = useMemo(() => {
		return data.configured && (data.onboarding === false)
	}, [data.configured, data.onboarding]);

	return (
		<div className="flex flex-col gap-8 max-w-screen-lg">
			{management ? (
				<AgentManagement
					reachable={true}
					hostInfo={data.stats}
				/>
			) : (
			<div>
				<h1>Local Agent Coming Soon</h1>
			</div>
			)}
		</div>
	)
}