feat: reimplement websocket to use hono

app/routes/machines/action.tsx

@@ -1,7 +1,7 @@
 import type { ActionFunctionArgs } from 'react-router';
 import type { LoadContext } from '~/server';
+import log from '~/utils/log';
 import { send } from '~/utils/res';
-import log from '~server/utils/log';
 
 // TODO: Turn this into the same thing as dns-actions like machine-actions!!!
 export async function menuAction({
@@ -24,16 +24,13 @@ export async function menuAction({
 
 	switch (method) {
 		case 'delete': {
-			await context.client.delete(
-				`/api/v1/node/${id}`,
-				session.get('api_key')!,
-			);
+			await context.client.delete(`v1/node/${id}`, session.get('api_key')!);
 			return { message: 'Machine removed' };
 		}
 
 		case 'expire': {
 			await context.client.post(
-				`/api/v1/node/${id}/expire`,
+				`v1/node/${id}/expire`,
 				session.get('api_key')!,
 			);
 			return { message: 'Machine expired' };
@@ -51,7 +48,7 @@ export async function menuAction({
 
 			const name = String(data.get('name'));
 			await context.client.post(
-				`/api/v1/node/${id}/rename/${name}`,
+				`v1/node/${id}/rename/${name}`,
 				session.get('api_key')!,
 			);
 			return { message: 'Machine renamed' };
@@ -72,7 +69,7 @@ export async function menuAction({
 			const postfix = enabled ? 'enable' : 'disable';
 
 			await context.client.post(
-				`/api/v1/routes/${route}/${postfix}`,
+				`v1/routes/${route}/${postfix}`,
 				session.get('api_key')!,
 			);
 			return { message: 'Route updated' };
@@ -95,7 +92,7 @@ export async function menuAction({
 			await Promise.all(
 				routes.map(async (route) => {
 					await context.client.post(
-						`/api/v1/routes/${route}/${postfix}`,
+						`v1/routes/${route}/${postfix}`,
 						session.get('api_key')!,
 					);
 				}),
@@ -156,7 +153,7 @@ export async function menuAction({
 
 				return { message: 'Tags updated' };
 			} catch (error) {
-				log.debug('APIC', 'Failed to update tags: %s', error);
+				log.debug('api', 'Failed to update tags: %s', error);
 				return send(
 					{ message: 'Failed to update tags' },
 					{

app/routes/machines/components/machine.tsx

@@ -152,18 +152,21 @@ export default function MachineRow({
 					</Menu>
 				</div>
 			</td>
-			<td className="py-2">
-				{stats !== undefined ? (
-					<>
-						<p className="leading-snug">{hinfo.getTSVersion(stats)}</p>
-						<p className="text-sm opacity-50 max-w-48 truncate">
-							{hinfo.getOSInfo(stats)}
-						</p>
-					</>
-				) : (
-					<p className="text-sm opacity-50">Unknown</p>
-				)}
-			</td>
+			{/* We pass undefined when agents are not enabled */}
+			{isAgent !== undefined ? (
+				<td className="py-2">
+					{stats !== undefined ? (
+						<>
+							<p className="leading-snug">{hinfo.getTSVersion(stats)}</p>
+							<p className="text-sm opacity-50 max-w-48 truncate">
+								{hinfo.getOSInfo(stats)}
+							</p>
+						</>
+					) : (
+						<p className="text-sm opacity-50">Unknown</p>
+					)}
+				</td>
+			) : undefined}
 			<td className="py-2">
 				<span
 					className={cn(

app/routes/machines/overview.tsx

@@ -8,7 +8,7 @@ import Tooltip from '~/components/Tooltip';
 import type { LoadContext } from '~/server';
 import type { Machine, Route, User } from '~/types';
 import cn from '~/utils/cn';
-import useAgent from '~/utils/useAgent';
+import useAgent from '~/utils/use-agent';
 import { menuAction } from './action';
 import MachineRow from './components/machine';
 import NewMachine from './dialogs/new';
@@ -44,9 +44,7 @@ export async function loader({
 		magic,
 		server: context.config.headscale.url,
 		publicServer: context.config.headscale.public_url,
-		// TODO: Fix this LOL
-		agents: ['test'],
-		// agents: [...(hp_getSingletonUnsafe('ws_agents') ?? []).keys()],
+		agents: context.agents?.tailnetIDs(),
 	};
 }
 
@@ -100,7 +98,10 @@ export default function Page() {
 								) : undefined}
 							</div>
 						</th>
-						<th className="uppercase text-xs font-bold pb-2">Version</th>
+						{/* We only want to show the version column if there are agents */}
+						{data.agents !== undefined ? (
+							<th className="uppercase text-xs font-bold pb-2">Version</th>
+						) : undefined}
 						<th className="uppercase text-xs font-bold pb-2">Last Seen</th>
 					</tr>
 				</thead>
@@ -120,7 +121,9 @@ export default function Page() {
 							users={data.users}
 							magic={data.magic}
 							stats={stats?.[machine.nodeKey]}
-							isAgent={data.agents.includes(machine.id)}
+							// If we pass undefined, the column will not be rendered
+							// This is useful for when there are no agents configured
+							isAgent={data.agents?.includes(machine.id)}
 						/>
 					))}
 				</tbody>