jskelet 0.2.2 → 0.2.3

package/src/client/cache-panel/panel.js

@@ -120,6 +120,9 @@ async function act(body) {
   const result = await response.json().catch(() => ({ ok: false, message: "Failed" }));
   toast(result.message ?? (result.ok ? "Done" : "Failed"), result.ok !== false);
   await load();
+
+  // Cloudflare ayarları değişmiş olabilir; genel bakış önbelleği atlanır.
+  if (String(body.type ?? "").startsWith("cf:")) await loadCloudflare(true);
 }
 
 /* ------------------------------------------------------------------- çizim */
@@ -127,7 +130,17 @@ async function act(body) {
 function render() {
   if (!latest) return;
 
-  const { process: proc, html, data, redis, prewarm } = latest;
+  const { process: proc, release, host, html, data, redis, prewarm } = latest;
+
+  $("version").textContent = `v${release.version}`;
+  $("foot-release").textContent = [
+    `v${release.version}`,
+    release.license,
+    release.node ? `Node ${release.node}` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  if (release.homepage) $("foot-repo").href = release.homepage;
 
   $("env").textContent = proc.env;
   $("pid").textContent = `pid ${proc.pid}`;
@@ -152,9 +165,12 @@ function render() {
 
   $("redis-state").textContent = redisState;
   $("redis-sub").textContent = redis.enabled
-    ? `${redis.errors} errors · ${redis.keyPrefix || "no prefix"}`
+    ? `${redis.address} · ${redis.errors} errors`
     : "cache.redis.enabled is false";
 
+  renderRedis(redis, redisState);
+  renderHost(host, proc, redis);
+
   const done = prewarm.done ?? 0;
   const total = prewarm.total ?? 0;
   $("prewarm-state").textContent = prewarm.active ? `${done}/${total}` : "idle";
@@ -167,6 +183,338 @@ function render() {
   renderTable();
 }
 
+/* ------------------------------------------------------------- cloudflare */
+
+/** @type {any} */
+let cloudflare = null;
+
+/**
+ * Cloudflare genel bakışı ayrı bir uçtan gelir: zone bilgisi ve ayarlar ağa
+ * çıkıyor, döküm turu ise saniyeler mertebesinde yenileniyor. Bu yüzden
+ * yalnızca açılışta ve bir işlemden sonra istenir.
+ *
+ * @param {boolean} [force]
+ */
+async function loadCloudflare(force = false) {
+  const response = await fetch(`cloudflare${force ? "?force=1" : ""}`);
+  if (!alive(response)) return;
+
+  cloudflare = await response.json().catch(() => null);
+  renderCloudflare();
+}
+
+function renderCloudflare() {
+  if (!cloudflare) return;
+
+  const ok = cloudflare.ok === true;
+  const status = cloudflare.status ?? {};
+  const settings = cloudflare.settings ?? {};
+  const zone = cloudflare.zone ?? null;
+
+  $("cf-heading").textContent = ok
+    ? [zone?.name, zone?.plan].filter(Boolean).join(" · ") || "connected"
+    : status.configured
+      ? `error: ${cloudflare.error}`
+      : "not connected";
+
+  $("cf-tools").hidden = !ok;
+  $("cf-suggest").hidden = ok || status.configured;
+  $("cf-refresh").hidden = !status.configured;
+
+  if (!ok) {
+    $("cf-kv").replaceChildren();
+    return;
+  }
+
+  const development = settings.developmentMode === "on";
+  $("cf-dev").checked = development;
+
+  /** @type {[string, string, string?][]} */
+  const rows = [
+    ["Zone", `${zone?.name ?? "—"} (${status.zoneId ?? "?"})`],
+    ["Plan", zone?.plan ?? "—"],
+    ["Token", status.tokenSource === "env" ? "from environment" : "from config", "on"],
+    [
+      "Development mode",
+      development
+        ? `on · ${formatDuration(settings.developmentModeRemaining)} left`
+        : "off",
+      development ? "bad" : "on",
+    ],
+    ["Cache level", String(settings.cacheLevel ?? "—")],
+    ["Browser cache TTL", ttl(settings.browserCacheTtl)],
+    ["Edge cache TTL", ttl(settings.edgeCacheTtl)],
+    ["Query string sorting", String(settings.sortQueryString ?? "—")],
+    ["Always Online", String(settings.alwaysOnline ?? "—")],
+    ...feature("Tiered Cache", settings.tieredCaching),
+    ...feature("Regional Tiered Cache", settings.regionalTieredCache),
+    ...feature("Cache Reserve", settings.cacheReserve),
+  ];
+
+  $("cf-kv").replaceChildren(...rows.map(kvRow));
+}
+
+/**
+ * Plan dışı kalan bir özellik `null` döner. "off" yazmak yanıltıcı olurdu:
+ * kapatılmış değil, o planda hiç yok.
+ *
+ * @param {string} label
+ * @param {string | null} value
+ * @returns {[string, string, string?][]}
+ */
+function feature(label, value) {
+  if (value === null || value === undefined) {
+    return [[label, "unavailable on this plan", "off"]];
+  }
+  return [[label, value, value === "on" ? "on" : "off"]];
+}
+
+/**
+ * @param {unknown} seconds
+ * @returns {string}
+ */
+function ttl(seconds) {
+  const value = Number(seconds);
+  if (!Number.isFinite(value)) return "—";
+  // Cloudflare 0'ı "Respect Existing Headers" olarak kullanıyor.
+  if (value === 0) return "respect origin headers";
+  return formatDuration(value);
+}
+
+/**
+ * @param {[string, string, string?]} row
+ * @returns {HTMLDivElement}
+ */
+function kvRow([label, value, tone]) {
+  const wrap = document.createElement("div");
+  const dt = document.createElement("dt");
+  dt.textContent = label;
+  const dd = document.createElement("dd");
+  if (tone) dd.className = tone;
+  dd.textContent = value;
+  wrap.append(dt, dd);
+  return wrap;
+}
+
+/**
+ * Analitik dökümü. İki soru tek uçtan cevaplanıyor: yol verilirse kolo
+ * kırılımı, verilmezse zone genelinde cache durumu dağılımı.
+ */
+async function loadCloudflareAnalytics() {
+  const path = $("cf-path").value.trim();
+  const target = $("cf-report");
+
+  target.hidden = false;
+  target.textContent = "Querying Cloudflare…";
+
+  const response = await fetch("cloudflare/analytics", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-JSkelet-Cache-Panel": "1",
+    },
+    body: JSON.stringify({ path }),
+  });
+
+  if (!alive(response)) return;
+
+  const result = await response.json().catch(() => null);
+
+  if (!result?.ok) {
+    target.textContent = `Cloudflare: ${result?.error ?? "query failed"}`;
+    return;
+  }
+
+  target.replaceChildren(
+    result.colos ? edgeTable(result) : statusTable(result),
+    note(
+      result.colos
+        ? `${result.colos.length} colos served \`${result.path}\` in the last ` +
+            `${result.hours}h — ${result.hits} from cache, ${result.misses} not. ` +
+            "Edges that received no request do not appear, even if they hold a copy."
+        : `Zone-wide cache status over the last ${result.hours}h. ` +
+            "Numbers come from Cloudflare's sampled dataset: ratios are reliable, " +
+            "absolute counts are estimates.",
+    ),
+  );
+}
+
+/**
+ * @param {any} result
+ * @returns {HTMLTableElement}
+ */
+function edgeTable(result) {
+  return buildTable(
+    ["Colo", "From cache", "To origin"],
+    result.colos.map((/** @type {any} */ row) => [
+      row.colo,
+      String(row.hits),
+      String(row.misses),
+    ]),
+  );
+}
+
+/**
+ * @param {any} result
+ * @returns {HTMLTableElement}
+ */
+function statusTable(result) {
+  const total = result.rows.reduce((sum, /** @type {any} */ row) => sum + row.requests, 0) || 1;
+
+  return buildTable(
+    ["Cache status", "Requests", "Share", "Edge bytes"],
+    result.rows.map((/** @type {any} */ row) => [
+      row.status,
+      row.requests.toLocaleString(),
+      `${Math.round((row.requests / total) * 100)}%`,
+      formatBytes(row.bytes),
+    ]),
+  );
+}
+
+/**
+ * @param {string[]} headers
+ * @param {string[][]} rows
+ * @returns {HTMLTableElement}
+ */
+function buildTable(headers, rows) {
+  const table = document.createElement("table");
+  const thead = document.createElement("thead");
+  const headRow = document.createElement("tr");
+
+  headers.forEach((label, index) => {
+    const th = document.createElement("th");
+    th.textContent = label;
+    if (index > 0) th.className = "num";
+    headRow.append(th);
+  });
+
+  thead.append(headRow);
+
+  const tbody = document.createElement("tbody");
+  for (const row of rows) {
+    const tr = document.createElement("tr");
+    row.forEach((value, index) => tr.append(cell(value, index > 0 ? "num" : undefined)));
+    tbody.append(tr);
+  }
+
+  table.append(thead, tbody);
+  return table;
+}
+
+/**
+ * @param {string} text
+ * @returns {HTMLParagraphElement}
+ */
+function note(text) {
+  const paragraph = document.createElement("p");
+  paragraph.className = "note m0";
+  paragraph.textContent = text;
+  return paragraph;
+}
+
+/**
+ * Paylaşımlı kademenin künyesi.
+ *
+ * "Bağlı mı" tek başına yetmiyor: yanlış `namespace` ya da beklenmeyen bir
+ * `buildId` ile bağlı bir Redis de hiçbir şey paylaşmıyor gibi görünür. Bu
+ * yüzden anahtarın **nerede** durduğu ve hangi türlerin paylaşıldığı da
+ * yazılır.
+ *
+ * @param {any} redis
+ * @param {string} state
+ */
+function renderRedis(redis, state) {
+  $("redis-heading").textContent = redis.enabled ? state : "not configured";
+  $("redis-actions").hidden = !redis.enabled;
+  $("redis-suggest").hidden = redis.enabled;
+
+  /** @type {[string, string, string?][]} */
+  const rows = redis.enabled
+    ? [
+        ["Connection", state, redis.connected && !redis.bypassed ? "on" : "bad"],
+        ["Address", `${redis.address}${redis.secure ? " (TLS)" : ""}`],
+        ["Database", redis.db ?? "default"],
+        ["Key prefix", `${redis.keyPrefix}:${redis.namespace}`],
+        ["Build id", redis.buildId || "dev"],
+        ["Shares HTML", redis.html ? "yes" : "no", redis.html ? "on" : "off"],
+        ["Shares data", redis.data ? "yes" : "no", redis.data ? "on" : "off"],
+        [
+          "Compressed bodies",
+          redis.storeEncoded ? "shared" : "local only",
+          redis.storeEncoded ? "on" : "off",
+        ],
+        [
+          "Purge broadcast",
+          redis.events ? (redis.subscribed ? "subscribed" : "publish only") : "off",
+          redis.events && redis.subscribed ? "on" : "off",
+        ],
+        ["Command timeout", `${redis.commandTimeoutMs} ms`],
+        ["Command errors", String(redis.errors), redis.errors ? "bad" : "on"],
+      ]
+    : [
+        ["Tier", "in-process only"],
+        ["Replicas sharing this cache", "none"],
+        ["Purge broadcast", "local only", "off"],
+      ];
+
+  $("redis-kv").replaceChildren(...rows.map(kvRow));
+}
+
+/**
+ * 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.
+ *
+ * @param {any} host
+ * @param {any} proc
+ * @param {any} redis
+ */
+function renderHost(host, proc, redis) {
+  $("host-heading").textContent = [
+    host.platform,
+    `${host.cpus} cpu`,
+    host.load ? `load ${host.load.toFixed(2)}` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  const ramUsed = host.memory.used / host.memory.total;
+  $("ram-text").textContent =
+    `${formatBytes(host.memory.used)} / ${formatBytes(host.memory.total)}`;
+  meter("ram-bar", ramUsed);
+  $("ram-note").textContent = redis.connected
+    ? `This process: ${formatBytes(proc.memory.rss)} RSS.`
+    : `This process holds the whole cache: ${formatBytes(proc.memory.rss)} RSS, ` +
+      `${formatBytes(latest.html.bytes)} of it HTML.`;
+
+  if (!host.disk) {
+    $("disk-text").textContent = "unavailable";
+    meter("disk-bar", 0);
+    $("disk-note").textContent = "This platform does not report filesystem stats.";
+    return;
+  }
+
+  const diskUsed = (host.disk.total - host.disk.free) / host.disk.total;
+  $("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.
+  $("disk-note").textContent =
+    `${formatBytes(host.disk.free)} free on ${host.disk.path} — build output and logs live here.`;
+}
+
+/**
+ * @param {string} id
+ * @param {number} ratio 0–1
+ */
+function meter(id, ratio) {
+  const bar = $(id);
+  const percent = Math.max(0, Math.min(100, ratio * 100));
+  bar.style.width = `${percent}%`;
+  bar.className = percent >= 90 ? "bad" : percent >= 75 ? "warn" : "";
+}
+
 function renderTable() {
   const source = tab === "html" ? latest.html : latest.data;
   const thead = $("thead");
@@ -198,7 +546,29 @@ function row(entry) {
 
   const key = document.createElement("td");
   key.className = "key mono";
-  key.textContent = entry.key;
+
+  if (tab === "html") {
+    // HTML anahtarı gezilebilir bir yol: yeni sekmede açmak, bir sayfanın
+    // neden bayat olduğunu anlamanın en kısa yolu. `noreferrer` panelin
+    // yolunu `Referer` başlığıyla sızdırmamak için.
+    const link = document.createElement("a");
+    link.href = entry.url;
+    link.target = "_blank";
+    link.rel = "noreferrer noopener";
+    link.textContent = entry.url;
+    key.append(link);
+  } else {
+    // Veri anahtarı bir URL değil; tıklamanın işe yarar karşılığı onu
+    // `clearDataCache()` çağrısına yapıştırabilmek.
+    const copy = document.createElement("button");
+    copy.className = "as-text";
+    copy.type = "button";
+    copy.title = "Copy key";
+    copy.textContent = entry.key;
+    copy.addEventListener("click", () => void copyKey(entry.key));
+    key.append(copy);
+  }
+
   tr.append(key);
 
   const state = document.createElement("td");
@@ -223,6 +593,19 @@ function row(entry) {
   const actions = document.createElement("td");
   actions.className = "actions";
 
+  // Tek satırı hem origin'den hem edge'den düşürmek en sık istenen çift
+  // işlem; Cloudflare bağlı değilse düğme hiç çıkmaz.
+  if (tab === "html" && cloudflare?.ok) {
+    const purge = document.createElement("button");
+    purge.className = "tiny";
+    purge.textContent = "cf purge";
+    purge.title = "Purge this URL at Cloudflare";
+    purge.addEventListener("click", () => {
+      void act({ type: "cf:purge-urls", paths: [entry.url] });
+    });
+    actions.append(purge);
+  }
+
   const drop = document.createElement("button");
   drop.className = "tiny danger";
   drop.textContent = "drop";
@@ -236,6 +619,23 @@ function row(entry) {
   return tr;
 }
 
+/**
+ * Panel `http://localhost` dışında da açılabiliyor ve tarayıcı güvensiz
+ * kaynaklarda pano API'sini vermiyor; o durumda anahtar seçili bırakılır.
+ *
+ * @param {string} key
+ */
+async function copyKey(key) {
+  try {
+    await navigator.clipboard.writeText(key);
+    toast("Key copied");
+  } catch {
+    $("prefix").value = key;
+    $("prefix").focus();
+    toast("Clipboard is unavailable — key moved to the prefix field", false);
+  }
+}
+
 /**
  * @param {string} text
  * @param {string} [className]
@@ -317,6 +717,10 @@ $("clear-data").addEventListener("click", () => {
 
 $("prewarm").addEventListener("click", () => void act({ type: "prewarm" }));
 
+// Sayım ayrı bir düğme: her döküm turunda tüm keyspace'i taramak Redis'i
+// teşhis uğruna yormak olurdu.
+$("redis-inspect").addEventListener("click", () => void act({ type: "redis:inspect" }));
+
 $("redis-html").addEventListener("click", () =>
   void act({ type: "redis:drop", kind: "html" }),
 );
@@ -325,6 +729,70 @@ $("redis-data").addEventListener("click", () =>
   void act({ type: "redis:drop", kind: "data" }),
 );
 
+/* ------------------------------------------------- cloudflare kontrolleri */
+
+$("cf-refresh").addEventListener("click", () => void loadCloudflare(true));
+
+$("cf-purge-all").addEventListener("click", () => {
+  if (!confirm("Purge the entire Cloudflare cache for this zone?")) return;
+  void act({ type: "cf:purge-everything" });
+});
+
+// Bu kurulumda sıcak olan yollar zaten biliniyor; "her şeyi düşür" yerine
+// yalnızca gerçekten servis edilen sayfaları düşürmek edge'i boşa soğutmaz.
+$("cf-purge-cached").addEventListener("click", () => {
+  const paths = (latest?.html.entries ?? []).map((/** @type {any} */ entry) => entry.url);
+  if (!paths.length) {
+    toast("No cached pages to purge.", false);
+    return;
+  }
+
+  if (!confirm(`Purge ${paths.length} URLs at Cloudflare?`)) return;
+  void act({ type: "cf:purge-urls", paths });
+});
+
+$("cf-purge-keys").addEventListener("click", () => {
+  const values = $("cf-values").value.trim();
+  if (!values) {
+    toast("Enter at least one value.", false);
+    return;
+  }
+
+  void act({ type: "cf:purge-keys", kind: $("cf-kind").value, values });
+});
+
+$("cf-dev").addEventListener("change", (event) => {
+  const on = /** @type {HTMLInputElement} */ (event.target).checked;
+  void act({ type: "cf:setting", id: "development_mode", value: on ? "on" : "off" });
+});
+
+$("cf-tiered").addEventListener("click", () => {
+  const current = cloudflare?.settings?.tieredCaching;
+  void act({ type: "cf:feature", feature: "tiered_caching", value: flip(current) });
+});
+
+$("cf-reserve").addEventListener("click", () => {
+  const current = cloudflare?.settings?.cacheReserve;
+  void act({ type: "cf:feature", feature: "cache_reserve", value: flip(current) });
+});
+
+$("cf-reserve-clear").addEventListener("click", () => {
+  if (!confirm("Clear Cache Reserve? Cloudflare will refetch everything from the origin.")) {
+    return;
+  }
+  void act({ type: "cf:clear-reserve" });
+});
+
+$("cf-analytics").addEventListener("click", () => void loadCloudflareAnalytics());
+
+/**
+ * @param {string | null | undefined} value
+ * @returns {"on" | "off"}
+ */
+function flip(value) {
+  return value === "on" ? "off" : "on";
+}
+
 // Sekme arkaya alındığında yoklama durur: panel açık kalmış bir sekmede
 // dakikalarca boşa istek atmasın.
 document.addEventListener("visibilitychange", () => {
@@ -336,4 +804,5 @@ document.addEventListener("visibilitychange", () => {
 });
 
 void load();
+void loadCloudflare();
 startPolling();

package/src/config/defaults.js

@@ -215,6 +215,37 @@ export const DEFAULT_CACHE_PANEL = {
   sessionHours: 12,
 };
 
+/**
+ * Cloudflare cache yüzeyi.
+ *
+ * JSkelet'in önbelleği origin önbelleği; ziyaretçinin gördüğü kopya CDN'de.
+ * Bu bölüm ikisini aynı panelden yönetilebilir kılar (bkz.
+ * `src/server/cloudflare.js`).
+ *
+ * Token **config'e yazılmamalı**: `JSKELET_CLOUDFLARE_KEY` env'i önceliklidir
+ * ve önerilen yol odur. Zone kimliği sır değil, ama o da env'den okunabilir
+ * (`JSKELET_CLOUDFLARE_ZONE_ID`).
+ *
+ * Gereken token izinleri: purge için `Zone.Cache Purge`, ayarlar için
+ * `Zone.Zone Settings`, analitik için `Zone.Analytics` (salt okunur).
+ */
+export const DEFAULT_CLOUDFLARE = {
+  /** `false` verilirse env'de token olsa bile yüzey kapalı kalır. */
+  enabled: true,
+  /** @type {string | null} */
+  zoneId: null,
+  /** @type {string | null} Env tercih edilir; burada tutmak sırrı repoya sokar. */
+  apiToken: null,
+  /**
+   * Purge, tam URL istiyor; panel elinde yalnızca yol tutuyor. Site adı
+   * verilmezse purge isteğinin geldiği istek origin'i kullanılır.
+   * @type {string | null}
+   */
+  hostname: null,
+  /** Analitik penceresi (saat). Cloudflare'in izin verdiği aralıkla sınırlı. */
+  analyticsHours: 24,
+};
+
 /** Oturuma bağlı sayfalar ısıtılmaz; uygulama kendi listesini verebilir. */
 export const DEFAULT_PREWARM_SKIP = [
   "/api/",