Initial commit

app/api/stats/route.ts

@@ -0,0 +1,186 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import { NextResponse } from "next/server";
+
+function readFile(path: string): string | null {
+  try {
+    return fs.readFileSync(path, "utf8").trim();
+  } catch {
+    return null;
+  }
+}
+
+function exec(cmd: string): string | null {
+  try {
+    return execSync(cmd, { timeout: 3000 }).toString().trim();
+  } catch {
+    return null;
+  }
+}
+
+function getMemory() {
+  const raw = readFile("/proc/meminfo");
+  if (!raw) return null;
+  const lines: Record<string, number> = {};
+  for (const line of raw.split("\n")) {
+    const [key, val] = line.split(":");
+    if (key && val) {
+      lines[key.trim()] = parseInt(val.trim());
+    }
+  }
+  const total = lines["MemTotal"] ?? 0;
+  const available = lines["MemAvailable"] ?? 0;
+  const used = total - available;
+  return {
+    total: Math.round(total / 1024),
+    used: Math.round(used / 1024),
+    available: Math.round(available / 1024),
+    percent: Math.round((used / total) * 100),
+  };
+}
+
+function getCpu() {
+  // Take two samples 100ms apart to calculate usage
+  const sample = () => {
+    const raw = readFile("/proc/stat");
+    if (!raw) return null;
+    const line = raw.split("\n")[0];
+    const parts = line.split(/\s+/).slice(1).map(Number);
+    const idle = parts[3];
+    const total = parts.reduce((a, b) => a + b, 0);
+    return { idle, total };
+  };
+
+  const s1 = sample();
+  execSync("sleep 0.2");
+  const s2 = sample();
+
+  if (!s1 || !s2) return null;
+
+  const idleDiff = s2.idle - s1.idle;
+  const totalDiff = s2.total - s1.total;
+  const percent = Math.round((1 - idleDiff / totalDiff) * 100);
+
+  const model =
+    exec("grep 'model name' /proc/cpuinfo | head -1 | cut -d: -f2") ??
+    "Unknown";
+  const cores =
+    exec("grep -c '^processor' /proc/cpuinfo") ?? "?";
+
+  return {
+    percent,
+    model: model.trim(),
+    cores: parseInt(cores),
+  };
+}
+
+function getTemperature() {
+  // Try common thermal zone paths
+  const paths = [
+    "/sys/class/thermal/thermal_zone0/temp",
+    "/sys/class/thermal/thermal_zone1/temp",
+    "/sys/class/hwmon/hwmon0/temp1_input",
+  ];
+  for (const path of paths) {
+    const raw = readFile(path);
+    if (raw) {
+      return Math.round(parseInt(raw) / 1000);
+    }
+  }
+  // Try sensors command as fallback
+  const sensors = exec("sensors 2>/dev/null | grep 'Core 0' | head -1");
+  if (sensors) {
+    const match = sensors.match(/\+(\d+\.\d+)/);
+    if (match) return parseFloat(match[1]);
+  }
+  return null;
+}
+
+function getDisk() {
+  const raw = exec("df -B1 /");
+  if (!raw) return null;
+  const lines = raw.split("\n");
+  const parts = lines[1].split(/\s+/);
+  const total = parseInt(parts[1]);
+  const used = parseInt(parts[2]);
+  const available = parseInt(parts[3]);
+  return {
+    total: Math.round(total / 1024 / 1024 / 1024),
+    used: Math.round(used / 1024 / 1024 / 1024),
+    available: Math.round(available / 1024 / 1024 / 1024),
+    percent: Math.round((used / total) * 100),
+  };
+}
+
+function getUptime() {
+  const raw = readFile("/proc/uptime");
+  if (!raw) return null;
+  const seconds = parseFloat(raw.split(" ")[0]);
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  return { seconds, days, hours, minutes };
+}
+
+function getNetwork() {
+  const raw = readFile("/proc/net/dev");
+  if (!raw) return null;
+  const ifaces: Record<string, { rx: number; tx: number }> = {};
+  for (const line of raw.split("\n").slice(2)) {
+    const parts = line.trim().split(/\s+/);
+    if (parts.length < 10) continue;
+    const name = parts[0].replace(":", "");
+    if (name === "lo") continue;
+    ifaces[name] = {
+      rx: parseInt(parts[1]),
+      tx: parseInt(parts[9]),
+    };
+  }
+  return ifaces;
+}
+
+function getServices() {
+  const services = ["caddy", "syncthing", "sshd", "cloudflare-dyndns"];
+  const result: Record<string, string> = {};
+  for (const svc of services) {
+    result[svc] = exec(`systemctl is-active ${svc}`) ?? "unknown";
+  }
+  return result;
+}
+
+function getLoadAverage() {
+  const raw = readFile("/proc/loadavg");
+  if (!raw) return null;
+  const parts = raw.split(" ");
+  return {
+    "1m": parseFloat(parts[0]),
+    "5m": parseFloat(parts[1]),
+    "15m": parseFloat(parts[2]),
+  };
+}
+
+export async function GET() {
+  const [memory, cpu, disk, uptime, network, services, loadAvg, temperature] =
+    await Promise.all([
+      getMemory(),
+      getCpu(),
+      getDisk(),
+      getUptime(),
+      getNetwork(),
+      getServices(),
+      getLoadAverage(),
+      getTemperature(),
+    ]);
+
+  return NextResponse.json({
+    timestamp: new Date().toISOString(),
+    memory,
+    cpu,
+    disk,
+    uptime,
+    network,
+    services,
+    loadAvg,
+    temperature,
+  });
+}

app/globals.css

@@ -13,10 +13,10 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+    :root {
-    --background: #0a0a0a;
+      --background: #ffffff;
-    --foreground: #ededed;
+      --foreground: #171717;
-  }
+    }
 }
 
 body {

app/page.tsx

@@ -1,65 +1,8 @@
-import Image from "next/image";
+export default async function Home() {
-
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="flex flex-col w-full pt-[100px] md:px-[100px] px-[10px]">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <h1 className="text-slate-600 text-[24pt]">Jack&apos;s Server Dashboard</h1>
-        <Image
+      <div className="text-blue-400 text-[20pt]"><a href="https://syncthing.jackmechem.dev">Syncthing</a></div>
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
     </div>
   );
 }

next.config.ts

@@ -1,7 +1,8 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+    allowedDevOrigins: ['dashboard.jackmechem.dev'],
+    output: 'standalone',
 };
 
 export default nextConfig;

package-lock.json

@@ -3247,6 +3247,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",