status/src/routes/+page.svelte

<script lang="ts">
    import { onMount, onDestroy } from "svelte";

    const HOSTNAME = "shitbox";
    const REFRESH_MS = 5000;

    let stats = $state<any>(null);
    let services = $state<any[]>([]);
    let network = $state<any[]>([]);

    function fmtBytes(b: number) {
        if (b < 1073741824) return (b / 1048576).toFixed(1) + " MB";
        return (b / 1073741824).toFixed(2) + " GB";
    }

    function bar(val: number, max: number, len = 18) {
        const n = Math.round((val / max) * len);
        return "█".repeat(n) + "░".repeat(len - n);
    }

    async function fetchAll() {
        const [s, sv, n] = await Promise.all([
            fetch("/api/stats")
                .then((r) => r.json())
                .catch(() => null),
            fetch("/api/services")
                .then((r) => r.json())
                .catch(() => []),
            fetch("/api/network")
                .then((r) => r.json())
                .catch(() => []),
        ]);
        stats = s;
        services = sv;
        network = n;
    }

    let timer: ReturnType<typeof setInterval>;
    onMount(() => {
        fetchAll();
        timer = setInterval(fetchAll, REFRESH_MS);
    });
    onDestroy(() => clearInterval(timer));
</script>

<main>
    <header>
        <span class="hostname">solar</span>
        {#if stats}<span class="uptime"
                >{stats.uptime} (since {stats.uptimeSince})</span
            >{/if}
    </header>

    <section>
        <div class="section-label">system</div>
        {#if stats}
            {@const [total, used] = stats.memory}
            <div class="row">
                <span class="key">cpu</span>
                <span class="bar">{bar(stats.cpu, 100)}</span>
                <span class="val">{stats.cpu.toFixed(1)}%</span>
            </div>
            <div class="row">
                <span class="key">mem</span>
                <span class="bar">{bar(used, total)}</span>
                <span class="val">{used} / {total} MB</span>
            </div>
            <div class="row">
                <span class="key">disk</span>
                <span class="bar"
                    >{bar(
                        parseFloat(stats.disk[1]),
                        parseFloat(stats.disk[0]),
                    )}</span
                >
                <span class="val">{stats.disk[1]} / {stats.disk[0]}</span>
            </div>
        {:else}
            <span class="muted">—</span>
        {/if}
    </section>

    <section>
        <div class="section-label">services</div>
        {#each services as svc}
            <div class="row">
                <span class="key">{svc.name}</span>
                <span class={svc.status === "active" ? "active" : "inactive"}>
                    {svc.status === "active" ? "●" : "○"}
                </span>
                <span class="val">{svc.status}</span>
            </div>
        {/each}
    </section>

    <section>
        <div class="section-label">network</div>
        {#each network as iface}
            <div class="row">
                <span class="key">{iface.name}</span>
                <span class="val">↓ {fmtBytes(iface.rx_bytes)}</span>
                <span class="val">↑ {fmtBytes(iface.tx_bytes)}</span>
            </div>
        {/each}
    </section>
</main>

<style>
    :global(body) {
        --bg: #11111b;
        --fg: #cdd6f4;
        --muted: #7f849c;
        --accent: #b4befe;
        --danger: #f38ba8;
        --border: #181825;
        --font: "Cozette", "JetBrains Mono", monospace;

        background: var(--bg);
        color: var(--fg);
        font-family: var(--font);
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
    }

    @font-face {
        font-family: "Cozette";
        src: URL("/CozetteVector.ttf") format("truetype");
    }

    main {
        padding: 3.5rem 4rem;
        max-width: 640px;
    }

    header {
        display: flex;
        align-items: baseline;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .hostname {
        font-size: 20px;
        letter-spacing: 0.03em;
    }

    .uptime {
        color: var(--muted);
        font-size: 12px;
    }

    section {
        margin-bottom: 2.5rem;
    }

    .section-label {
        color: var(--muted);
        font-size: 10px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border);
        padding-bottom: 6px;
        margin-bottom: 10px;
    }

    .row {
        display: grid;
        grid-template-columns: 100px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 2px 0;
    }

    .key {
        color: var(--muted);
    }
    .bar {
        color: var(--accent);
        font-size: 10px;
        opacity: 0.6;
        letter-spacing: -1px;
    }
    .val {
        color: var(--fg);
        text-align: right;
    }
    .muted {
        color: var(--muted);
    }

    .active {
        color: var(--accent);
    }
    .inactive {
        color: var(--danger);
        opacity: 0.6;
    }
</style>