@axium/sysadmin 0.0.1

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@axium/sysadmin",
+	"version": "0.0.1",
+	"author": "James Prevett <axium@jamespre.dev>",
+	"description": "System administration for Axium",
+	"funding": {
+		"type": "individual",
+		"url": "https://github.com/sponsors/james-pre"
+	},
+	"license": "LGPL-3.0-or-later",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/james-pre/axium.git"
+	},
+	"homepage": "https://github.com/james-pre/axium#readme",
+	"bugs": {
+		"url": "https://github.com/james-pre/axium/issues"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": "./dist/index.js",
+		"./*": "./dist/*.js",
+		"./components": "./lib/index.js",
+		"./components/*": "./lib/*.svelte"
+	},
+	"files": [
+		"dist",
+		"lib",
+		"routes",
+		"locales",
+		"db.json"
+	],
+	"scripts": {
+		"build": "tsc"
+	},
+	"peerDependencies": {
+		"@axium/client": ">=0.27.0",
+		"@axium/core": ">=0.23.0",
+		"@axium/server": ">=0.47.0",
+		"@sveltejs/kit": "^2.27.3",
+		"kysely": "^0.29.0",
+		"utilium": "^3.0.0"
+	},
+	"dependencies": {
+		"commander": "^15.0.0",
+		"ioium": "^1.6.0",
+		"zod": "^4.0.5"
+	},
+	"axium": {
+		"server": {
+			"routes": "routes",
+			"hooks": "./dist/server/hooks.js",
+			"db": "./db.json",
+			"web_client_hooks": "./dist/web_hook.js"
+		},
+		"client": {
+			"hooks": "./dist/client/hooks.js",
+			"cli": "./dist/client/cli.js"
+		},
+		"apps": [
+			{
+				"id": "sysadmin",
+				"name": "System Administration",
+				"icon": "screwdriver-wrench"
+			}
+		],
+		"update_checks": true
+	}
+}

package/routes/sysadmin/+layout.ts

@@ -0,0 +1,22 @@
+import { connect } from '@axium/client/socket';
+import { getCurrentSession } from '@axium/client/user';
+import type { Session, User } from '@axium/core';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	let { session }: { session?: (Session & { user: User }) | null } = await parent();
+
+	session ||= await getCurrentSession().catch(() => null);
+
+	if (!session) {
+		window.location.href = '/login?after=/sysadmin';
+		throw 'Missing session, redirecting to login';
+	}
+
+	await connect();
+
+	const { user } = session;
+
+	return { session, user };
+}

package/routes/sysadmin/+page.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { socket } from '@axium/client/socket';
+	import { SystemCard, SystemInitDialog, UserCard, UserInitDialog } from '@axium/sysadmin/components';
+
+	const { data } = $props();
+
+	let systems = $state(data.systems);
+	let users = $state(data.users);
+
+	const onlineHosts = $derived(await socket?.emitWithAck('sysadmin:ping').then(systems => systems.map(s => s.hostname)));
+</script>
+
+<svelte:head>
+	<title>{text('sysadmin.page_title')}</title>
+</svelte:head>
+
+<div class="sysadmin-main">
+	<h1>{text('sysadmin.page_title')}</h1>
+
+	<section>
+		<div class="section-header">
+			<h2>{text('sysadmin.systems')}</h2>
+			<a class="subtle" href="/sysadmin/systems">{text('sysadmin.view_all')}</a>
+			<button class="icon-text" command="show-modal" commandfor="system-init">
+				<Icon i="plus" />
+				<span>{text('sysadmin.new_system')}</span>
+			</button>
+		</div>
+
+		{#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.no_systems')}</p>
+		{/if}
+	</section>
+
+	<section>
+		<div class="section-header">
+			<h2>{text('sysadmin.system_users')}</h2>
+			<button class="icon-text" command="show-modal" commandfor="system-user-init">
+				<Icon i="plus" />
+				<span>{text('sysadmin.new_system_user')}</span>
+			</button>
+		</div>
+
+		{#if users.length}
+			<div class="cards">
+				{#each users as user, i (user.id)}
+					<UserCard bind:user={users[i]} deleted={() => users.splice(i, 1)} />
+				{/each}
+			</div>
+		{:else}
+			<p class="subtle">{text('sysadmin.no_system_users')}</p>
+		{/if}
+	</section>
+</div>
+
+<SystemInitDialog userId={data.session.userId} created={system => systems.push(system)} />
+<UserInitDialog userId={data.session.userId} created={user => users.push(user)} />
+
+<style>
+	.sysadmin-main {
+		padding: 2em;
+		display: flex;
+		flex-direction: column;
+		gap: 2em;
+	}
+
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
+	.section-header {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+
+		h2 {
+			margin: 0;
+		}
+
+		button {
+			margin-left: auto;
+		}
+	}
+
+	.cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 1em;
+	}
+
+	@media (width < 700px) {
+		.sysadmin-main {
+			padding: 1em;
+			padding-bottom: 5em;
+		}
+
+		.cards {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/routes/sysadmin/+page.ts

@@ -0,0 +1,14 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	const [systems, users] = await Promise.all([
+		fetchAPI('GET', 'users/:id/sysadmin/systems', {}, session.userId),
+		fetchAPI('GET', 'users/:id/sysadmin/users', {}, session.userId),
+	]);
+
+	return { session, systems, users };
+}

package/routes/sysadmin/systems/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { socket } from '@axium/client/socket';
+	import { SystemCard, SystemInitDialog } from '@axium/sysadmin/components';
+
+	const { data } = $props();
+
+	let systems = $state(data.systems);
+
+	const onlineHosts = $derived(await socket?.emitWithAck('sysadmin:ping').then(systems => systems.map(s => s.hostname)));
+</script>
+
+<svelte:head>
+	<title>{text('sysadmin.systems')}</title>
+</svelte:head>
+
+<div class="systems">
+	<p>
+		<a class="subtle icon-text back" href="/sysadmin">
+			<Icon i="arrow-left" />
+			<span>{text('sysadmin.back_to_main')}</span>
+		</a>
+	</p>
+
+	<div class="systems-header">
+		<h1>{text('sysadmin.systems')}</h1>
+		<button class="icon-text" command="show-modal" commandfor="system-init">
+			<Icon i="plus" />
+			<span>{text('sysadmin.new_system')}</span>
+		</button>
+	</div>
+
+	{#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.no_systems')}</p>
+	{/if}
+</div>
+
+<SystemInitDialog userId={data.session.userId} created={system => systems.push(system)} />
+
+<style>
+	.systems {
+		padding: 2em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
+	.back {
+		width: fit-content;
+	}
+
+	.systems-header {
+		display: flex;
+		gap: 1em;
+
+		h1 {
+			margin: 0;
+		}
+
+		button {
+			margin-left: auto;
+		}
+	}
+
+	.cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 1em;
+	}
+
+	@media (width < 700px) {
+		.systems {
+			padding: 1em;
+			padding-bottom: 5em;
+		}
+
+		.cards {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/routes/sysadmin/systems/+page.ts

@@ -0,0 +1,11 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	const systems = await fetchAPI('GET', 'users/:id/sysadmin/systems', {}, session.userId);
+
+	return { session, systems };
+}

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

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { formatBytes, formatDuration } from '@axium/core';
+	import { Icon, NumberBar } from '@axium/client/components';
+	import { connect } from '@axium/client/socket';
+	import { systemTypeIcons, type SystemInfo } from '@axium/sysadmin';
+	import '@axium/sysadmin/common';
+
+	const { data } = $props();
+	const system = data.system;
+
+	let info = $state<SystemInfo>();
+	let error = $state(false);
+	let loading = $state(true);
+
+	/** The fraction used, for a NumberBar, clamped to [0, 1]. */
+	function fraction(used: bigint, total: bigint): number {
+		if (total <= 0n) return 0;
+		return Math.min(1, Number(used) / Number(total));
+	}
+
+	function usageText(used: bigint, total: bigint): string {
+		return text('sysadmin.system.usage', { used: formatBytes(used), total: formatBytes(total) });
+	}
+
+	const socket = await connect();
+
+	async function loadInfo() {
+		try {
+			const all = await socket.emitWithAck('sysadmin:getSystemInfo');
+			info = all.find(i => i.hostname === system.hostname);
+			if (!info) error = true;
+		} catch {
+			error = true;
+		} finally {
+			loading = false;
+		}
+	}
+
+	setInterval(loadInfo, 2500);
+
+	$effect(() => void loadInfo());
+</script>
+
+<svelte:head>
+	<title>{text('sysadmin.system.page_title', system)}</title>
+</svelte:head>
+
+<div class="system-page">
+	<a class="subtle icon-text back" href="/sysadmin/systems">
+		<Icon i="arrow-left" />
+		<span>{text('sysadmin.back_to_systems')}</span>
+	</a>
+
+	<div class="system-header">
+		<Icon i={systemTypeIcons[system.type]} --size="3em" />
+		<div>
+			<h1>{system.name}</h1>
+			<span class="subtle">{system.hostname}</span>
+		</div>
+		<span class={['status', info ? 'online' : 'offline']}>
+			<Icon i={info ? 'circle-check' : 'circle-xmark'} />
+			{info ? text('sysadmin.online') : text('sysadmin.offline')}
+		</span>
+	</div>
+
+	{#if loading}
+		<p class="subtle">{text('sysadmin.system.loading_info')}</p>
+	{:else if error}
+		<div class="notice">
+			<p class="subtle">{text('sysadmin.system.info_error')}</p>
+			<button class="icon-text" onclick={loadInfo}>
+				<Icon i="rotate-right" />
+				<span>{text('sysadmin.system.refresh')}</span>
+			</button>
+		</div>
+	{:else if info}
+		<section>
+			<h2><Icon i="microchip" /> {text('sysadmin.system.hardware')}</h2>
+
+			<div class="component">
+				<h3><Icon i="microchip" /> {text('sysadmin.system.cpu')}</h3>
+				{#each info.cpus as cpu}
+					<div class="line">
+						<span>{cpu.model}</span>
+						<span class="subtle">{text('sysadmin.system.cpu_cores', { count: cpu.cores })}</span>
+					</div>
+				{/each}
+			</div>
+
+			{#if info.gpus.length}
+				<div class="component">
+					<h3><Icon i="display" /> {text('sysadmin.system.gpu')}</h3>
+					{#each info.gpus as gpu}
+						<div class="line">
+							<span>{gpu.model}</span>
+						</div>
+						{#if gpu.vram}
+							<NumberBar
+								value={fraction(gpu.vram.used, gpu.vram.total)}
+								max={1}
+								text={usageText(gpu.vram.used, gpu.vram.total)}
+							/>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+
+			<div class="component">
+				<h3><Icon i="memory" /> {text('sysadmin.system.memory')}</h3>
+				<NumberBar
+					value={fraction(info.memory.used, info.memory.total)}
+					max={1}
+					text={usageText(info.memory.used, info.memory.total)}
+				/>
+				{#if info.memory.swap}
+					<span class="subtle">{text('sysadmin.system.swap')}</span>
+					<NumberBar
+						value={fraction(info.memory.swap.used, info.memory.swap.total)}
+						max={1}
+						text={usageText(info.memory.swap.used, info.memory.swap.total)}
+					/>
+				{/if}
+			</div>
+
+			{#if info.storage.length}
+				<div class="component">
+					<h3><Icon i="hard-drive" /> {text('sysadmin.system.storage')}</h3>
+					{#each info.storage as disk}
+						<div class="line">
+							<span>{disk.model}</span>
+						</div>
+						<NumberBar value={fraction(disk.used, disk.total)} max={1} text={usageText(disk.used, disk.total)} />
+					{/each}
+				</div>
+			{/if}
+
+			{#if info.networkInterfaces.length}
+				<div class="component">
+					<h3><Icon i="network-wired" /> {text('sysadmin.system.network')}</h3>
+					{#each info.networkInterfaces as iface}
+						<div class="line">
+							<span class="icon-text">
+								<Icon i={iface.wireless ? 'wifi' : 'ethernet'} />
+								{iface.name}
+							</span>
+							<span class="subtle">{iface.model}</span>
+							<span class={['net-status', iface.connected ? 'online' : 'offline']}>
+								{iface.connected ? text('sysadmin.system.connected') : text('sysadmin.system.disconnected')}
+							</span>
+							{#if iface.speed}
+								<span>{iface.speed} Mbit/s</span>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</section>
+
+		<section>
+			<h2><Icon i="layer-group" /> {text('sysadmin.system.os')}</h2>
+			<dl>
+				<dt>{text('sysadmin.system.platform')}</dt>
+				<dd>{info.type} <span class="subtle">({info.platform})</span></dd>
+				<dt>{text('sysadmin.system.release')}</dt>
+				<dd>{info.release} <span class="subtle">{info.version}</span></dd>
+				<dt>{text('sysadmin.system.arch')}</dt>
+				<dd>{info.arch} <span class="subtle">({info.machine})</span></dd>
+				<dt>{text('sysadmin.system.uptime')}</dt>
+				<dd>{formatDuration(info.uptime)}</dd>
+			</dl>
+		</section>
+	{/if}
+</div>
+
+<style>
+	.system-page {
+		padding: 2em;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5em;
+	}
+
+	.back {
+		width: fit-content;
+	}
+
+	.system-header {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+	}
+
+	.system-header :global(.Icon) {
+		flex-shrink: 0;
+	}
+
+	.system-header h1 {
+		margin: 0;
+	}
+
+	.status,
+	.net-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35em;
+	}
+
+	.status {
+		margin-left: auto;
+	}
+
+	.online {
+		--fill: var(--green);
+		color: var(--green);
+	}
+
+	.offline {
+		--fill: hsl(0 0 var(--fg-light));
+		color: hsl(0 0 var(--fg-light));
+	}
+
+	.notice {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		align-items: flex-start;
+	}
+
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+
+		h2 {
+			margin: 0;
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	}
+
+	.component {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		padding: 1em;
+		border-radius: 0.5em;
+		background-color: var(--bg-alt);
+
+		h3 {
+			margin: 0;
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	}
+
+	.line {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		flex-wrap: wrap;
+		.subtle {
+			margin-right: auto;
+		}
+	}
+
+	dl {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		gap: 0.5em 2em;
+		margin: 0;
+	}
+
+	dt {
+		font-weight: bold;
+	}
+
+	dd {
+		margin: 0;
+	}
+
+	@media (width < 700px) {
+		.system-page {
+			padding: 1em;
+			padding-bottom: 5em;
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ parent, params }) {
+	const { session } = await parent();
+
+	const system = await fetchAPI('GET', 'sysadmin/systems/:id', {}, params.id);
+
+	return { session, system };
+}