@axium/sysadmin 0.1.3 → 0.2.1

package/db.json

@@ -68,6 +68,19 @@
 					}
 				}
 			}
+		},
+		{
+			"delta": true,
+			"alter_tables": {
+				"systems": {
+					"add_columns": {
+						"connectedUserId": { "type": "uuid", "references": "system_users.id", "onDelete": "set null" }
+					}
+				}
+			},
+			"add_indexes": {
+				"systems_connectedUserId": { "on": "systems", "columns": ["connectedUserId"] }
+			}
 		}
 	],
 	"wipe": ["systems", "system_users", "acl.systems"],

package/dist/client/info.js

@@ -129,6 +129,27 @@ function memory() {
         total,
         used: total - available,
     };
+    try {
+        const dmiMemoryInfo = execFileSync('sudo', ['-n', 'dmidecode', '-t', '17'], {
+            encoding: 'utf8',
+            stdio: ['ignore', 'pipe', 'ignore'],
+        });
+        for (const match of dmiMemoryInfo.matchAll(/^\s*(?:Configured Memory|Configured Clock)?\s*Speed:\s*(\d+)\s*MT\/s/gim)) {
+            memory.speed = Math.max(memory.speed, Number(match[1]));
+        }
+        const populated = (field) => {
+            for (const [, match] of dmiMemoryInfo.matchAll(new RegExp(`^[ \\t]*${field}:[ \\t]*(.+)$`, 'gim'))) {
+                const value = match.trim();
+                if (value && value !== 'Unknown')
+                    return value;
+            }
+        };
+        memory.formFactor = populated('Form Factor');
+        memory.type = populated('Type');
+    }
+    catch {
+        // dmidecode missing, not root, or sudo needs a password
+    }
     const swapTotal = info.SwapTotal ?? 0n;
     if (swapTotal > 0n)
         memory.swap = { total: swapTotal, used: swapTotal - (info.SwapFree ?? 0n) };
@@ -179,5 +200,6 @@ export function systemInfo() {
         uptime: os.uptime(),
         version: os.version(),
         hostname: os.hostname(),
+        user: os.userInfo(),
     };
 }

package/dist/common.d.ts

@@ -6,6 +6,7 @@ export declare const SystemInit: z.ZodObject<{
     name: z.ZodString;
     hostname: z.ZodString;
     type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
+    connectedUserId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
 }, z.core.$strip>;
 export interface SystemInit extends z.infer<typeof SystemInit> {
 }
@@ -15,6 +16,7 @@ export declare const System: z.ZodObject<{
     type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
     id: z.ZodUUID;
     userId: z.ZodUUID;
+    connectedUserId: z.ZodNullable<z.ZodUUID>;
     isShared: z.ZodBoolean;
     acl: z.ZodArray<z.ZodObject<{
         itemId: z.ZodUUID;
@@ -68,6 +70,7 @@ declare const SysadminAPI: {
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
+            connectedUserId: z.ZodNullable<z.ZodUUID>;
             isShared: z.ZodBoolean;
             acl: z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
@@ -95,12 +98,14 @@ declare const SysadminAPI: {
             name: z.ZodString;
             hostname: z.ZodString;
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
+            connectedUserId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
         }, z.core.$strip>, z.ZodObject<{
             name: z.ZodString;
             hostname: z.ZodString;
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
+            connectedUserId: z.ZodNullable<z.ZodUUID>;
             isShared: z.ZodBoolean;
             acl: z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
@@ -149,6 +154,7 @@ declare const SysadminAPI: {
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
+            connectedUserId: z.ZodNullable<z.ZodUUID>;
             isShared: z.ZodBoolean;
             acl: z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
@@ -176,12 +182,14 @@ declare const SysadminAPI: {
             name: z.ZodString;
             hostname: z.ZodString;
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
+            connectedUserId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
         }, z.core.$strip>, z.ZodObject<{
             name: z.ZodString;
             hostname: z.ZodString;
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
+            connectedUserId: z.ZodNullable<z.ZodUUID>;
             isShared: z.ZodBoolean;
             acl: z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
@@ -211,6 +219,7 @@ declare const SysadminAPI: {
             type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
+            connectedUserId: z.ZodNullable<z.ZodUUID>;
             isShared: z.ZodBoolean;
             acl: z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
@@ -258,6 +267,38 @@ declare const SysadminAPI: {
             userId: z.ZodUUID;
         }, z.core.$strip>;
     };
+    readonly 'sysadmin/users/:id/systems': {
+        readonly GET: z.ZodArray<z.ZodObject<{
+            name: z.ZodString;
+            hostname: z.ZodString;
+            type: z.ZodDefault<z.ZodLiteral<"server" | "pc" | "laptop">>;
+            id: z.ZodUUID;
+            userId: z.ZodUUID;
+            connectedUserId: z.ZodNullable<z.ZodUUID>;
+            isShared: z.ZodBoolean;
+            acl: z.ZodArray<z.ZodObject<{
+                itemId: z.ZodUUID;
+                userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
+                role: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                tag: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                user: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    id: z.ZodUUID;
+                    name: z.ZodString;
+                    email: z.ZodOptional<z.ZodEmail>;
+                    emailVerified: z.ZodOptional<z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>>;
+                    preferences: z.ZodOptional<z.ZodLazy<z.ZodObject<{
+                        debug: z.ZodDefault<z.ZodBoolean>;
+                    }, z.core.$strip>>>;
+                    roles: z.ZodArray<z.ZodString>;
+                    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+                    registeredAt: z.ZodCoercedDate<unknown>;
+                    isAdmin: z.ZodOptional<z.ZodBoolean>;
+                    isSuspended: z.ZodOptional<z.ZodBoolean>;
+                }, z.core.$strip>>>;
+                createdAt: z.ZodCoercedDate<unknown>;
+            }, z.core.$catchall<z.ZodBoolean>>>;
+        }, z.core.$strip>>;
+    };
 };
 type SysadminAPI = typeof SysadminAPI;
 declare module '@axium/core/api' {
@@ -279,6 +320,8 @@ declare const SysadminClientToServer: {
         }, z.core.$strip>>;
         memory: z.ZodObject<{
             speed: z.ZodInt;
+            formFactor: z.ZodOptional<z.ZodString>;
+            type: z.ZodOptional<z.ZodString>;
             swap: z.ZodOptional<z.ZodObject<{
                 total: z.ZodCoercedBigInt<unknown>;
                 used: z.ZodCoercedBigInt<unknown>;
@@ -307,6 +350,13 @@ declare const SysadminClientToServer: {
         uptime: z.ZodNumber;
         version: z.ZodString;
         hostname: z.ZodString;
+        user: z.ZodObject<{
+            username: z.ZodString;
+            uid: z.ZodInt;
+            gid: z.ZodInt;
+            shell: z.ZodNullable<z.ZodString>;
+            homedir: z.ZodString;
+        }, z.core.$strip>;
     }, z.core.$strip>>]];
     readonly 'sysadmin:ping': readonly [readonly [z.ZodArray<z.ZodObject<{
         hostname: z.ZodString;
@@ -328,6 +378,8 @@ declare const SysadminServerToClient: {
         }, z.core.$strip>>;
         memory: z.ZodObject<{
             speed: z.ZodInt;
+            formFactor: z.ZodOptional<z.ZodString>;
+            type: z.ZodOptional<z.ZodString>;
             swap: z.ZodOptional<z.ZodObject<{
                 total: z.ZodCoercedBigInt<unknown>;
                 used: z.ZodCoercedBigInt<unknown>;
@@ -356,6 +408,13 @@ declare const SysadminServerToClient: {
         uptime: z.ZodNumber;
         version: z.ZodString;
         hostname: z.ZodString;
+        user: z.ZodObject<{
+            username: z.ZodString;
+            uid: z.ZodInt;
+            gid: z.ZodInt;
+            shell: z.ZodNullable<z.ZodString>;
+            homedir: z.ZodString;
+        }, z.core.$strip>;
     }, z.core.$strip>]];
     readonly 'sysadmin:ping': readonly [readonly [z.ZodObject<{
         hostname: z.ZodString;

package/dist/common.js

@@ -13,10 +13,13 @@ export const SystemInit = z.object({
     name: z.string().nonempty().max(250),
     hostname: z.string().nonempty().max(250),
     type: SystemType.default('server'),
+    /** The connected system user, if any. `null` disconnects. */
+    connectedUserId: z.uuid().nullish(),
 });
 export const System = SystemInit.extend({
     id: z.uuid(),
     userId: z.uuid(),
+    connectedUserId: z.uuid().nullable(),
     isShared: z.boolean(),
     acl: AccessControl.array(),
 });
@@ -51,6 +54,9 @@ const SysadminAPI = {
         PATCH: [SystemUserInit, SystemUser],
         DELETE: SystemUser,
     },
+    'sysadmin/users/:id/systems': {
+        GET: System.array(),
+    },
 };
 Object.assign($API, SysadminAPI);
 const SysadminClientToServer = {

package/dist/info.d.ts

@@ -1,3 +1,4 @@
+import type { UserInfo } from 'node:os';
 import * as z from 'zod';
 export declare const TotalUsed: z.ZodObject<{
     total: z.ZodCoercedBigInt<unknown>;
@@ -22,6 +23,8 @@ export interface GPU extends z.infer<typeof GPU> {
 }
 export declare const Memory: z.ZodObject<{
     speed: z.ZodInt;
+    formFactor: z.ZodOptional<z.ZodString>;
+    type: z.ZodOptional<z.ZodString>;
     swap: z.ZodOptional<z.ZodObject<{
         total: z.ZodCoercedBigInt<unknown>;
         used: z.ZodCoercedBigInt<unknown>;
@@ -48,6 +51,15 @@ export declare const NetworkInterface: z.ZodObject<{
 }, z.core.$strip>;
 export interface NetworkInterface extends z.infer<typeof NetworkInterface> {
 }
+export declare const SystemInfoUser: z.ZodObject<{
+    username: z.ZodString;
+    uid: z.ZodInt;
+    gid: z.ZodInt;
+    shell: z.ZodNullable<z.ZodString>;
+    homedir: z.ZodString;
+}, z.core.$strip>;
+export interface SystemInfoUser extends z.infer<typeof SystemInfoUser>, UserInfo<string> {
+}
 export declare const SystemInfo: z.ZodObject<{
     cpus: z.ZodArray<z.ZodObject<{
         model: z.ZodString;
@@ -62,6 +74,8 @@ export declare const SystemInfo: z.ZodObject<{
     }, z.core.$strip>>;
     memory: z.ZodObject<{
         speed: z.ZodInt;
+        formFactor: z.ZodOptional<z.ZodString>;
+        type: z.ZodOptional<z.ZodString>;
         swap: z.ZodOptional<z.ZodObject<{
             total: z.ZodCoercedBigInt<unknown>;
             used: z.ZodCoercedBigInt<unknown>;
@@ -90,6 +104,13 @@ export declare const SystemInfo: z.ZodObject<{
     uptime: z.ZodNumber;
     version: z.ZodString;
     hostname: z.ZodString;
+    user: z.ZodObject<{
+        username: z.ZodString;
+        uid: z.ZodInt;
+        gid: z.ZodInt;
+        shell: z.ZodNullable<z.ZodString>;
+        homedir: z.ZodString;
+    }, z.core.$strip>;
 }, z.core.$strip>;
 export interface SystemInfo extends z.infer<typeof SystemInfo> {
 }

package/dist/info.js

@@ -17,6 +17,10 @@ export const Memory = z.object({
     ...TotalUsed.shape,
     /** Memory speed in MT/s */
     speed: z.int().nonnegative(),
+    /** Form factor, e.g. 'DIMM' or 'SODIMM' */
+    formFactor: z.string().optional(),
+    /** Memory type, e.g. 'DDR4' or 'DDR5' */
+    type: z.string().optional(),
     /** Only available when swap is in use */
     swap: TotalUsed.optional(),
 });
@@ -32,6 +36,13 @@ export const NetworkInterface = z.object({
     connection: z.string().optional(),
     speed: z.number().nonnegative().optional(),
 });
+export const SystemInfoUser = z.object({
+    username: z.string(),
+    uid: z.int(),
+    gid: z.int(),
+    shell: z.string().nullable(),
+    homedir: z.string(),
+});
 export const SystemInfo = z.object({
     cpus: CPU.array(),
     gpus: GPU.array(),
@@ -53,6 +64,7 @@ export const SystemInfo = z.object({
     /** Kernel version, e.g. `#1 SMP PREEMPT_DYNAMIC ...` */
     version: z.string(),
     hostname: z.string(),
+    user: SystemInfoUser,
 });
 // OS //
 // User //

package/dist/server/api.js

@@ -8,6 +8,21 @@ import { SystemInit, SystemUserInit } from '../common.js';
 function parseSystem(system, isShared) {
     return Object.assign({ acl: [] }, system, { isShared });
 }
+/**
+ * Ensure the requester owns the system user they are connecting a system to.
+ * No-op when `connectedUserId` is unset (`undefined` leaves it unchanged, `null` disconnects).
+ */
+async function checkConnectedUser(request, connectedUserId) {
+    if (!connectedUserId)
+        return;
+    const systemUser = await database
+        .selectFrom('system_users')
+        .select('userId')
+        .where('id', '=', connectedUserId)
+        .executeTakeFirstOrThrow()
+        .catch(withError('Could not get system user', 404));
+    await checkAuthForUser(request, systemUser.userId);
+}
 addRoute({
     path: '/api/users/:id/sysadmin/systems',
     params: { id: z.uuid() },
@@ -25,6 +40,7 @@ addRoute({
     async PUT(request, { id: userId }) {
         const init = await parseBody(request, SystemInit);
         await checkAuthForUser(request, userId);
+        await checkConnectedUser(request, init.connectedUserId);
         return parseSystem(await database
             .insertInto('systems')
             .values({ ...init, userId })
@@ -43,6 +59,7 @@ addRoute({
     async PATCH(request, { id }) {
         const init = await parseBody(request, SystemInit);
         const { fromACL } = await authRequestForItem(request, 'systems', id, { edit: true });
+        await checkConnectedUser(request, init.connectedUserId);
         const system = await database
             .updateTable('systems')
             .set(init)
@@ -134,3 +151,24 @@ addRoute({
             .catch(withError('Could not delete system user'));
     },
 });
+addRoute({
+    path: '/api/sysadmin/users/:id/systems',
+    params: { id: z.uuid() },
+    async GET(request, { id }) {
+        const user = await database
+            .selectFrom('system_users')
+            .select('userId')
+            .where('id', '=', id)
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not get system user', 404));
+        await checkAuthForUser(request, user.userId);
+        const systems = await database
+            .selectFrom('systems')
+            .selectAll()
+            .select(acl.from('systems'))
+            .where('connectedUserId', '=', id)
+            .execute()
+            .catch(withError('Could not get systems'));
+        return systems.map(system => parseSystem(system, false));
+    },
+});

package/locales/en.json

@@ -14,8 +14,6 @@
 		"online": "Online",
 		"offline": "Offline",
 		"back_to_main": "Back to System Administration",
-		"back_to_systems": "Back to Systems",
-		"back_to_users": "Back to System Users",
 		"SystemInitDialog": {
 			"submit": "Add System",
 			"save": "Save",
@@ -42,7 +40,9 @@
 			"toast_deleted": "User deleted"
 		},
 		"user": {
-			"page_title": "{name} — System Users"
+			"page_title": "{name} — System Users",
+			"systems": "Connected Systems",
+			"no_systems": "No systems are connected to this user."
 		},
 		"system_type": {
 			"server": "Server",
@@ -60,6 +60,7 @@
 			"cpu_cores": "{count} cores",
 			"gpu": "Graphics",
 			"memory": "Memory",
+			"memory_speed": "{speed} MT/s",
 			"swap": "Swap",
 			"storage": "Storage",
 			"network": "Network",
@@ -74,7 +75,21 @@
 			"kernel": "Kernel",
 			"arch": "Architecture",
 			"uptime": "Uptime",
-			"usage": "{used} / {total}"
+			"usage": "{used} / {total}",
+			"user": {
+				"title": "User",
+				"username": "Username",
+				"uid": "UID / GID",
+				"home": "Home Directory",
+				"shell": "Shell",
+				"match_found": "This user matches '{name}'.",
+				"no_match": "No matching system user. Add one with the live username to connect it.",
+				"connect": "Connect User",
+				"connected_to": "Connected to {name}",
+				"disconnect": "Disconnect",
+				"disconnected_from": "Disconnected from {name}",
+				"username_mismatch": "The connected user “{connected}” no longer matches the live username “{live}”."
+			}
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/sysadmin",
-	"version": "0.1.3",
+	"version": "0.2.1",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "System administration for Axium",
 	"funding": {

package/routes/sysadmin/systems/[id]/+page.svelte

@@ -1,18 +1,29 @@
 <script lang="ts">
-	import { text } from '@axium/client';
-	import { formatBytes, formatDuration } from '@axium/core';
+	import { fetchAPI, text } from '@axium/client';
 	import { Icon, NumberBar } from '@axium/client/components';
 	import { connect } from '@axium/client/socket';
+	import { toastStatus } from '@axium/client/toast';
+	import { formatBytes, formatDuration } from '@axium/core';
 	import { systemTypeIcons, type SystemInfo } from '@axium/sysadmin';
 	import '@axium/sysadmin/common';
 
 	const { data } = $props();
-	const system = data.system;
+
+	let system = $state(data.system);
+	const systemUsers = data.systemUsers;
 
 	let info = $state<SystemInfo>();
 	let error = $state(false);
 	let loading = $state(true);
 
+	const matchingUser = $derived(info && systemUsers.find(u => u.username === info!.user.username));
+	const connectedUser = $derived(system.connectedUserId ? systemUsers.find(u => u.id === system.connectedUserId) : undefined);
+
+	async function setConnectedUser(connectedUserId: string | null) {
+		const updated = await fetchAPI('PATCH', 'sysadmin/systems/:id', { ...system, connectedUserId }, system.id);
+		system = updated;
+	}
+
 	/** The fraction used, for a NumberBar, clamped to [0, 1]. */
 	function fraction(used: bigint, total: bigint): number {
 		if (total <= 0n) return 0;
@@ -20,6 +31,7 @@
 	}
 
 	function usageText(used: bigint, total: bigint): string {
+		if (used <= 0n) return formatBytes(total);
 		return text('sysadmin.system.usage', { used: formatBytes(used), total: formatBytes(total) });
 	}
 
@@ -35,7 +47,7 @@
 		try {
 			const all = await socket.emitWithAck('sysadmin:getSystemInfo');
 			info = all.find(i => i.hostname === system.hostname);
-			if (!info) error = true;
+			error = !info;
 		} catch {
 			error = true;
 		} finally {
@@ -53,9 +65,9 @@
 </svelte:head>
 
 <div class="system-page">
-	<a class="subtle icon-text back" href="/sysadmin/systems">
+	<a class="subtle icon-text back" href="/sysadmin">
 		<Icon i="arrow-left" />
-		<span>{text('sysadmin.back_to_systems')}</span>
+		<span>{text('sysadmin.back_to_main')}</span>
 	</a>
 
 	<div class="system-header">
@@ -113,7 +125,19 @@
 			{/if}
 
 			<div class="component">
-				<h3><Icon i="memory" /> {text('sysadmin.system.memory')}</h3>
+				<h3>
+					<Icon i="memory" />
+					{text('sysadmin.system.memory')}
+					{#if info.memory.type}
+						<span class="subtle">{info.memory.type}</span>
+					{/if}
+					{#if info.memory.formFactor}
+						<span class="subtle">{info.memory.formFactor}</span>
+					{/if}
+					{#if info.memory.speed}
+						<span class="subtle">{text('sysadmin.system.memory_speed', { speed: info.memory.speed })}</span>
+					{/if}
+				</h3>
 				<NumberBar
 					value={fraction(info.memory.used, info.memory.total)}
 					max={1}
@@ -182,6 +206,68 @@
 			</dl>
 		</section>
 	{/if}
+
+	{#if info || connectedUser}
+		<section>
+			{const userIcon = !info ? 'user' : info.user.uid === 0 ? 'user-crown' : info.user.uid < 1000 ? 'user-gear' : 'user'}
+			<h2><Icon i={userIcon} /> {text('sysadmin.system.user.title')}</h2>
+
+			{#if info && connectedUser && connectedUser.username !== info.user.username}
+				<div class="warning icon-text">
+					<Icon i="triangle-exclamation" />
+					<span>
+						{text('sysadmin.system.user.username_mismatch', {
+							connected: connectedUser.username,
+							live: info.user.username,
+						})}
+					</span>
+				</div>
+			{/if}
+
+			{#if info}
+				<dl>
+					<dt>{text('sysadmin.system.user.username')}</dt>
+					<dd>{info.user.username}</dd>
+					<dt>{text('sysadmin.system.user.uid')}</dt>
+					<dd>{info.user.uid} <span class="subtle">/ {info.user.gid}</span></dd>
+					<dt>{text('sysadmin.system.user.home')}</dt>
+					<dd>{info.user.homedir}</dd>
+					{#if info.user.shell}
+						<dt>{text('sysadmin.system.user.shell')}</dt>
+						<dd>{info.user.shell}</dd>
+					{/if}
+				</dl>
+			{/if}
+
+			<div class="user-connection">
+				{#if connectedUser}
+					<a class="icon-text subtle" href="/sysadmin/users/{connectedUser.id}">
+						<Icon i="link" />
+						<span>{text('sysadmin.system.user.connected_to', connectedUser)}</span>
+					</a>
+					<button
+						class="icon-text"
+						onclick={() => toastStatus(setConnectedUser(null), text('sysadmin.system.user.disconnected_from', connectedUser))}
+					>
+						<Icon i="link-slash" />
+						<span>{text('sysadmin.system.user.disconnect')}</span>
+					</button>
+				{:else if matchingUser}
+					<span class="subtle">{text('sysadmin.system.user.match_found', matchingUser)}</span>
+					<button
+						class="icon-text"
+						onclick={() =>
+							toastStatus(setConnectedUser(matchingUser.id), text('sysadmin.system.user.connected_to', matchingUser))}
+					>
+						<Icon i="link" />
+						<span>{text('sysadmin.system.user.connect')}</span>
+					</button>
+				{:else}
+					<span class="subtle">{text('sysadmin.system.user.no_match')}</span>
+				{/if}
+			</div>
+		</section>
+	{/if}
 </div>
 
 <style>
@@ -315,6 +401,17 @@
 		margin: 0;
 	}
 
+	.user-connection {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		flex-wrap: wrap;
+
+		button {
+			margin-left: auto;
+		}
+	}
+
 	@media (width < 700px) {
 		.system-page {
 			padding: 1em;

package/routes/sysadmin/systems/[id]/+page.ts

@@ -5,7 +5,10 @@ export const ssr = false;
 export async function load({ parent, params }) {
 	const { session } = await parent();
 
-	const system = await fetchAPI('GET', 'sysadmin/systems/:id', {}, params.id);
+	const [system, systemUsers] = await Promise.all([
+		fetchAPI('GET', 'sysadmin/systems/:id', {}, params.id),
+		fetchAPI('GET', 'users/:id/sysadmin/users', {}, session.userId),
+	]);
 
-	return { session, system };
+	return { session, system, systemUsers };
 }

package/routes/sysadmin/users/[id]/+page.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { fetchAPI, text } from '@axium/client';
 	import { Icon } from '@axium/client/components';
-	import { UserInitDialog } from '@axium/sysadmin/components';
+	import { socket } from '@axium/client/socket';
 	import { toastStatus } from '@axium/client/toast';
-	import { goto } from '$app/navigation';
+	import { SystemCard, UserInitDialog } from '@axium/sysadmin/components';
 
 	const { data } = $props();
 
 	let user = $state(data.user);
+	let systems = $state(data.systems);
 	let editDialog = $state<HTMLDialogElement>();
 
+	const onlineHosts = $derived(await socket?.emitWithAck('sysadmin:ping').then(systems => systems.map(s => s.hostname)));
+
 	function remove() {
 		toastStatus(
 			fetchAPI('DELETE', 'sysadmin/users/:id', {}, user.id).then(() => goto('/sysadmin/users')),
@@ -23,9 +27,9 @@
 </svelte:head>
 
 <div class="user-page">
-	<a class="subtle icon-text back" href="/sysadmin/users">
+	<a class="subtle icon-text back" href="/sysadmin">
 		<Icon i="arrow-left" />
-		<span>{text('sysadmin.back_to_users')}</span>
+		<span>{text('sysadmin.back_to_main')}</span>
 	</a>
 
 	<div class="user-header">
@@ -43,6 +47,23 @@
 			<span>{text('generic.delete')}</span>
 		</button>
 	</div>
+
+	<section>
+		<h2><Icon i="server" /> {text('sysadmin.user.systems')}</h2>
+		{#if systems.length}
+			<div class="cards">
+				{#each systems as system, i (system.id)}
+					<SystemCard
+						bind:system={systems[i]}
+						online={!!onlineHosts?.includes(system.hostname)}
+						deleted={() => systems.splice(i, 1)}
+					/>
+				{/each}
+			</div>
+		{:else}
+			<p class="subtle">{text('sysadmin.user.no_systems')}</p>
+		{/if}
+	</section>
 </div>
 
 <UserInitDialog bind:dialog={editDialog} {user} edited={updated => (user = updated)} />
@@ -73,10 +94,33 @@
 		}
 	}
 
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+
+		h2 {
+			margin: 0;
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	}
+
+	.cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 1em;
+	}
+
 	@media (width < 700px) {
 		.user-page {
 			padding: 1em;
 			padding-bottom: 5em;
 		}
+
+		.cards {
+			grid-template-columns: 1fr;
+		}
 	}
 </style>

package/routes/sysadmin/users/[id]/+page.ts

@@ -5,7 +5,10 @@ export const ssr = false;
 export async function load({ parent, params }) {
 	const { session } = await parent();
 
-	const user = await fetchAPI('GET', 'sysadmin/users/:id', {}, params.id);
+	const [user, systems] = await Promise.all([
+		fetchAPI('GET', 'sysadmin/users/:id', {}, params.id),
+		fetchAPI('GET', 'sysadmin/users/:id/systems', {}, params.id),
+	]);
 
-	return { session, user };
+	return { session, user, systems };
 }