chore: push disabled local-agent code

app/routes/machines/components/machine.tsx

@@ -153,6 +153,7 @@ export default function MachineRow({ machine, routes, magic, users, stats }: Pro
 					</Menu>
 				</div>
 			</td>
+			{/**
 			<td className="py-2">
 					{stats !== undefined ? (
 						<>
@@ -169,6 +170,7 @@ export default function MachineRow({ machine, routes, magic, users, stats }: Pro
 						</p>
 					)}
 			</td>
+			**/}
 			<td className="py-2">
 				<span
 					className={cn(

app/routes/machines/overview.tsx

@@ -113,7 +113,7 @@ export default function Page() {
 								) : undefined}
 							</div>
 						</th>
-						<th className="pb-2">Version</th>
+						{/**<th className="pb-2">Version</th>**/}
 						<th className="pb-2">Last Seen</th>
 					</tr>
 				</thead>

app/routes/settings/components/agent.tsx

@@ -0,0 +1,38 @@
+import Link from '~/components/Link';
+import Button from '~/components/Button';
+import { Link as RemixLink } from 'react-router';
+import { ArrowRightIcon } from '@primer/octicons-react';
+import { cn } from '~/utils/cn';
+
+export default function AgentSection() {
+	return (
+		<>
+			<div className="flex flex-col w-2/3">
+				<h1 className="text-2xl font-medium mb-4">Local Agent</h1>
+				<p className="text-gray-700 dark:text-gray-300">
+					Headplane provides a local agent that can be installed on a
+					server to provide additional features including viewing device
+					information and SSH access via the web interface (soon).
+					To learn more about the agent visit the{' '}
+					<Link
+						to="https://github.com/tale/headplane/blob/main/docs/Headplane-Agent.md"
+						name="Headplane Agent Documentation"
+					>
+						Headplane documentation
+					</Link>
+				</p>
+			</div>
+			<RemixLink to="/settings/local-agent">
+				<div
+					className={cn(
+						'text-lg font-medium flex items-center',
+						'text-gray-700 dark:text-gray-300',
+					)}
+				>
+					Manage Agent
+					<ArrowRightIcon className="w-5 h-5 ml-2" />
+				</div>
+			</RemixLink>
+		</>
+	)
+}

app/routes/settings/components/agent/manage.tsx

@@ -0,0 +1,44 @@
+import Card from '~/components/Card'
+import StatusCircle from '~/components/StatusCircle'
+import type { HostInfo } from '~/types';
+import * as hinfo from '~/utils/host-info';
+
+export type Props = {
+	reachable: boolean;
+	hostInfo: HostInfo;
+};
+
+export default function AgentManagement({ reachable, hostInfo }: Props) {
+	console.log('hostInfo:', hostInfo);
+	return (
+		<div className="flex flex-col w-2/3">
+			<h1 className="text-2xl font-medium mb-4">
+				Local Agent Configuration
+			</h1>
+			<p className="text-gray-700 dark:text-gray-300 mb-8">
+				A local agent has already been configured for this
+				Headplane instance. You can manage the agent settings here.
+			</p>
+			<Card>
+				<div className="flex items-center gap-2">
+					<StatusCircle
+						isOnline={reachable}
+						className="w-4 h-4 px-1 w-fit"
+					/>
+					<div>
+						<p className="text-lg font-bold">
+							{hostInfo.Hostname ?? 'Unknown'}
+						</p>
+						<p className="leading-snug">
+							{hinfo.getTSVersion(hostInfo)}
+							<span className="ml-2 text-sm text-gray-500 dark:text-gray-300">
+								{hinfo.getOSInfo(hostInfo)}
+							</span>
+						</p>
+					</div>
+				</div>
+				{JSON.stringify(hostInfo)}
+			</Card>
+		</div>
+	)
+}

app/routes/settings/local-agent.tsx

@@ -0,0 +1,44 @@
+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>
+	)
+}

app/routes/settings/overview.tsx

@@ -4,6 +4,8 @@ import { Link as RemixLink } from 'react-router';
 import { ArrowRightIcon } from '@primer/octicons-react';
 import { cn } from '~/utils/cn';
 
+import AgentSection from './components/agent';
+
 export default function Page() {
 	return (
 		<div className="flex flex-col gap-8 max-w-screen-lg">
@@ -30,16 +32,17 @@ export default function Page() {
 				</p>
 			</div>
 			<RemixLink to="/settings/auth-keys">
-				<span
+				<div
 					className={cn(
-						'text-lg font-medium',
+						'text-lg font-medium flex items-center',
 						'text-gray-700 dark:text-gray-300',
 					)}
 				>
 					Manage Auth Keys
 					<ArrowRightIcon className="w-5 h-5 ml-2" />
-				</span>
+				</div>
 			</RemixLink>
+			{/**<AgentSection />**/}
 		</div>
 	);
 }