jskelet 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -207,6 +207,11 @@ false`.
 
 ### Changed
 
+- Admin panel System meters (CPU, memory, disk) show this process's share of
+  the host — RSS and project disk footprint against machine totals, plus
+  process CPU across all cores — instead of whole-machine fullness. The panel
+  content width is wider (`1600px`) so Overview, Routes, Views and System use
+  the screen better.
 - The release history page in `examples/marketing` now shows one release at a
   time: the newest one is expanded and older releases collapse to a single
   header row with their date, status and change count. Every release used to be

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A framework that feels like no framework: Express 5 + EJS server rendering, vanilla JS islands, Tailwind v4 and an in-process HTML TTL cache.",
   "type": "module",
   "license": "MIT",

package/src/client/admin/i18n.js

@@ -182,12 +182,16 @@ export const MESSAGES = {
 
     /* --- host --- */
     "host.section": "Host",
+    "host.cpu": "CPU",
     "host.memory": "Memory",
     "host.disk": "Disk",
     "host.noStats": "This platform does not report filesystem stats.",
-    "host.ramShared": "This process: {rss} RSS.",
-    "host.ramOnly": "This process holds the whole cache: {rss} RSS, {html} of it HTML.",
-    "host.diskNote": "{free} free on {path} — build output and logs live here.",
+    "host.cpuNote": "This process across {cores} cores (since last refresh).",
+    "host.ramShared": "This process: {rss} RSS · {heap} heap.",
+    "host.ramOnly":
+      "This process holds the whole cache: {rss} RSS · {heap} heap, {html} of it HTML.",
+    "host.diskNote":
+      "Project files on {path} (excluding node_modules) · {free} free on the volume.",
 
     /* --- işlemler --- */
     "actions.section": "Actions",
@@ -479,12 +483,16 @@ export const MESSAGES = {
     "cf.rowPurgeTitle": "Bu URL'i Cloudflare'de düşür",
 
     "host.section": "Makine",
+    "host.cpu": "CPU",
     "host.memory": "Bellek",
     "host.disk": "Disk",
     "host.noStats": "Bu platform dosya sistemi bilgisi vermiyor.",
-    "host.ramShared": "Bu süreç: {rss} RSS.",
-    "host.ramOnly": "Önbelleğin tamamı bu süreçte: {rss} RSS, {html} kadarı HTML.",
-    "host.diskNote": "{path} üzerinde {free} boş — build çıktısı ve loglar burada.",
+    "host.cpuNote": "Bu sürecin {cores} çekirdek üzerindeki payı (son yenilemeden beri).",
+    "host.ramShared": "Bu süreç: {rss} RSS · {heap} heap.",
+    "host.ramOnly":
+      "Önbelleğin tamamı bu süreçte: {rss} RSS · {heap} heap, {html} kadarı HTML.",
+    "host.diskNote":
+      "{path} üzerindeki proje dosyaları (node_modules hariç) · birimde {free} boş.",
 
     "actions.section": "İşlemler",
     "actions.target.placeholder": "/haber/:slug  ·  /haber/bir-yazi  ·  invalidation hedefi",

package/src/client/admin/panel.css

@@ -330,9 +330,14 @@ footer {
 }
 
 main {
-  max-width: 1180px;
+  width: 100%;
+  max-width: 1600px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 20px 24px 28px;
+}
+
+.page {
+  width: 100%;
 }
 
 .cards {

package/src/client/admin/panel.html

@@ -437,6 +437,15 @@ JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
             <span class="count" id="host-heading">—</span>
           </h2>
           <div class="body">
+            <div class="meter">
+              <div class="meter-head">
+                <span data-i18n="host.cpu">CPU</span>
+                <span class="mono" id="cpu-text">—</span>
+              </div>
+              <div class="bar"><span id="cpu-bar"></span></div>
+              <p class="hint m0" id="cpu-note">—</p>
+            </div>
+
             <div class="meter">
               <div class="meter-head">
                 <span data-i18n="host.memory">Memory</span>

package/src/client/admin/panel.js

@@ -591,9 +591,8 @@ function renderRedis(redis, state) {
 }
 
 /**
- * Makinenin RAM ve disk durumu. Paylaşımlı kademe kapalıyken önbelleğin
- * tamamı bu sürecin belleğinde yaşıyor; `maxEntries` ile RAM arasındaki
- * ilişkiyi görmeden ayar yapmak körlemesine oluyor.
+ * System sayfası: çubuklar bu sürecin makine kapasitesindeki payı
+ * (CPU / RSS / proje diski), host'un genel doluluğu değil.
  *
  * @param {any} host
  * @param {any} proc
@@ -608,14 +607,24 @@ function renderHost(host, proc, redis) {
     .filter(Boolean)
     .join(" · ");
 
-  const ramUsed = host.memory.used / host.memory.total;
+  // Çubuklar makine doluluğunu değil, **bu sürecin** payını gösterir.
+  const cpuPercent = Number(proc.cpuPercent) || 0;
+  $("cpu-text").textContent = `${cpuPercent.toFixed(1)}%`;
+  meter("cpu-bar", cpuPercent / 100);
+  $("cpu-note").textContent = t("host.cpuNote", { cores: host.cpus });
+
+  const ramRatio = host.memory.total > 0 ? proc.memory.rss / host.memory.total : 0;
   $("ram-text").textContent =
-    `${formatBytes(host.memory.used)} / ${formatBytes(host.memory.total)}`;
-  meter("ram-bar", ramUsed);
+    `${formatBytes(proc.memory.rss)} / ${formatBytes(host.memory.total)}`;
+  meter("ram-bar", ramRatio);
   $("ram-note").textContent = redis.connected
-    ? t("host.ramShared", { rss: formatBytes(proc.memory.rss) })
+    ? t("host.ramShared", {
+        rss: formatBytes(proc.memory.rss),
+        heap: formatBytes(proc.memory.heapUsed),
+      })
     : t("host.ramOnly", {
         rss: formatBytes(proc.memory.rss),
+        heap: formatBytes(proc.memory.heapUsed),
         html: formatBytes(latest.html.bytes),
       });
 
@@ -626,11 +635,11 @@ function renderHost(host, proc, redis) {
     return;
   }
 
-  const diskUsed = (host.disk.total - host.disk.free) / host.disk.total;
+  const appDisk = Number(proc.diskBytes) || 0;
+  const diskRatio = host.disk.total > 0 ? appDisk / host.disk.total : 0;
   $("disk-text").textContent =
-    `${formatBytes(host.disk.total - host.disk.free)} / ${formatBytes(host.disk.total)}`;
-  meter("disk-bar", diskUsed);
-  // Önbellek diske yazılmıyor; disk build çıktısı ve log için önemli.
+    `${formatBytes(appDisk)} / ${formatBytes(host.disk.total)}`;
+  meter("disk-bar", diskRatio);
   $("disk-note").textContent = t("host.diskNote", {
     free: formatBytes(host.disk.free),
     path: host.disk.path,

package/src/server/admin/snapshot.js

@@ -2,9 +2,12 @@
  * Admin paneli cache / host / process dökümü.
  *
  * HTML gövdesi ve veri değerleri dönmez — yalnızca meta.
+ * System sayfasındaki çubuklar **bu sürecin** payını gösterir (makine
+ * toplamına oranla), host'un genel doluluğunu değil.
  */
 import fs from "node:fs";
 import os from "node:os";
+import path from "node:path";
 import process from "node:process";
 import { getConfig } from "../../config/index.js";
 import {
@@ -29,8 +32,25 @@ import { prewarmProgress } from "../prewarm.js";
 /** Listelerin üst sınırı: veri önbelleğinde on binlerce anahtar olabiliyor. */
 const MAX_LISTED = 500;
 
+/** Disk ölçümünde atlanan dizinler — node_modules her poll'da taranmasın. */
+const SKIP_DIRS = new Set([
+  "node_modules",
+  ".git",
+  ".hg",
+  ".svn",
+  "coverage",
+  ".turbo",
+  ".next",
+]);
+
 export const BOOT_ID = `${Date.now()}-${process.pid}`;
 
+/** @type {{ usage: NodeJS.CpuUsage; at: number } | null} */
+let cpuSample = null;
+
+/** @type {{ at: number, bytes: number, root: string } | null} */
+let diskSample = null;
+
 /**
  * @param {string} query Anahtar filtresi (boş → filtre yok).
  * @returns {Promise<object>}
@@ -46,6 +66,9 @@ export async function snapshot(query) {
   const htmlMatched = html.filter(matches);
   const dataMatched = data.filter(matches);
   const usage = process.memoryUsage();
+  const host = await hostStatus();
+  const cpuPercent = sampleProcessCpu(host.cpus);
+  const appDiskBytes = await sampleAppDisk(getConfig().root);
 
   return {
     boot: BOOT_ID,
@@ -56,13 +79,17 @@ export async function snapshot(query) {
       node: FRAMEWORK_NODE_RANGE,
       homepage: FRAMEWORK_HOMEPAGE,
     },
-    host: await hostStatus(),
+    host,
     process: {
       pid: process.pid,
       node: process.version,
       uptime: process.uptime(),
       env: process.env.NODE_ENV ?? "production",
       memory: { rss: usage.rss, heapUsed: usage.heapUsed },
+      /** 0–100: bu sürecin tüm çekirdek kapasitesine oranı. */
+      cpuPercent,
+      /** Proje kökünün (node_modules hariç) disk boyutu. */
+      diskBytes: appDiskBytes,
     },
     html: {
       size: getHtmlCacheSize(),
@@ -94,6 +121,94 @@ export async function snapshot(query) {
   };
 }
 
+/**
+ * İki örnek arasındaki `process.cpuUsage` farkından süreç CPU yüzdesi.
+ * İlk çağrıda örnek alınır ve 0 döner — panelin bir sonraki turunda anlamlı.
+ *
+ * @param {number} cores
+ * @returns {number}
+ */
+function sampleProcessCpu(cores) {
+  const now = Date.now();
+  const current = process.cpuUsage();
+
+  if (!cpuSample) {
+    cpuSample = { usage: current, at: now };
+    return 0;
+  }
+
+  const elapsedMs = now - cpuSample.at;
+  const delta = process.cpuUsage(cpuSample.usage);
+  cpuSample = { usage: current, at: now };
+
+  if (elapsedMs <= 0 || cores <= 0) return 0;
+
+  // user+system mikro-saniye → ms; duvar süresi × çekirdek = kapasite.
+  const cpuMs = (delta.user + delta.system) / 1000;
+  const capacityMs = elapsedMs * cores;
+  return Math.max(0, Math.min(100, (cpuMs / capacityMs) * 100));
+}
+
+/**
+ * Proje kökünün boyutu (ağır dizinler atlanır). 60 sn önbellek.
+ *
+ * @param {string} root
+ * @returns {Promise<number>}
+ */
+async function sampleAppDisk(root) {
+  if (diskSample && diskSample.root === root && Date.now() - diskSample.at < 60_000) {
+    return diskSample.bytes;
+  }
+
+  const bytes = await measureDir(root);
+  diskSample = { at: Date.now(), bytes, root };
+  return bytes;
+}
+
+/**
+ * @param {string} dir
+ * @returns {Promise<number>}
+ */
+async function measureDir(dir) {
+  let total = 0;
+
+  /** @type {string[]} */
+  const stack = [dir];
+
+  while (stack.length) {
+    const current = stack.pop();
+    if (!current) continue;
+
+    let entries;
+    try {
+      entries = await fs.promises.readdir(current, { withFileTypes: true });
+    } catch {
+      continue;
+    }
+
+    for (const entry of entries) {
+      if (entry.name === "." || entry.name === "..") continue;
+      if (entry.isDirectory() && SKIP_DIRS.has(entry.name)) continue;
+
+      const full = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        stack.push(full);
+        continue;
+      }
+      if (!entry.isFile()) continue;
+
+      try {
+        const stats = await fs.promises.stat(full);
+        total += stats.size;
+      } catch {
+        // silinmiş / erişilemeyen dosya
+      }
+    }
+  }
+
+  return total;
+}
+
 /**
  * @returns {Promise<object>}
  */