jskelet 0.2.2 → 0.2.4

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

@@ -7,7 +7,11 @@
  *
  * Yenileme WebSocket değil, kısa aralıklı `fetch` ile: panel nadiren ve kısa
  * süre açık kalıyor, kalıcı bir kanal açmanın karşılığı yok.
+ *
+ * Bütün görünen metin `i18n.js` üzerinden geçiyor; sunucudan gelen cevaplar da
+ * metin değil `code` taşıyor, yani dil değişimi tek yerden hallediliyor.
  */
+import { applyTranslations, languageSelect, t } from "./i18n.js";
 
 const REFRESH_MS = 3000;
 
@@ -42,10 +46,14 @@ function formatBytes(bytes) {
  */
 function formatDuration(seconds) {
   const total = Math.max(0, Math.round(seconds));
-  if (total < 60) return `${total}s`;
-  if (total < 3600) return `${Math.floor(total / 60)}m ${total % 60}s`;
-  if (total < 86_400) return `${Math.floor(total / 3600)}h ${Math.floor((total % 3600) / 60)}m`;
-  return `${Math.floor(total / 86_400)}d ${Math.floor((total % 86_400) / 3600)}h`;
+  const [s, m, h, d] = [t("unit.second"), t("unit.minute"), t("unit.hour"), t("unit.day")];
+
+  if (total < 60) return `${total}${s}`;
+  if (total < 3600) return `${Math.floor(total / 60)}${m} ${total % 60}${s}`;
+  if (total < 86_400) {
+    return `${Math.floor(total / 3600)}${h} ${Math.floor((total % 3600) / 60)}${m}`;
+  }
+  return `${Math.floor(total / 86_400)}${d} ${Math.floor((total % 86_400) / 3600)}${h}`;
 }
 
 /**
@@ -117,9 +125,37 @@ async function act(body) {
 
   if (!alive(response)) return;
 
-  const result = await response.json().catch(() => ({ ok: false, message: "Failed" }));
-  toast(result.message ?? (result.ok ? "Done" : "Failed"), result.ok !== false);
+  const result = await response.json().catch(() => null);
+  toast(describe(result), 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);
+}
+
+/**
+ * Sunucu cevabını metne çevirir.
+ *
+ * `/action` dil taşımıyor: `{ ok, code, params }` dönüyor ve cümle burada
+ * kuruluyor. Redis sayımı gibi parçalı cevaplar `parts` ile geliyor, çünkü
+ * "veritabanında kaç anahtar var" bilgisi her zaman okunamıyor ve eksik parçayı
+ * cümleden düşürmek tek düzgün yol.
+ *
+ * @param {any} result
+ * @returns {string}
+ */
+function describe(result) {
+  if (!result) return t("toast.failed");
+
+  if (Array.isArray(result.parts)) {
+    const parts = result.parts
+      .map((/** @type {any} */ part) => t(`msg.${part.code}`, part.params))
+      .filter(Boolean);
+    if (parts.length) return parts.join(" · ");
+  }
+
+  if (result.code) return t(`msg.${result.code}`, result.params);
+  return t(result.ok ? "toast.done" : "toast.failed");
 }
 
 /* ------------------------------------------------------------------- çizim */
@@ -127,20 +163,33 @@ 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}`;
-  $("uptime").textContent = `up ${formatDuration(proc.uptime)}`;
+  $("uptime").textContent = t("chip.up", { value: formatDuration(proc.uptime) });
   $("memory").textContent = `rss ${formatBytes(proc.memory.rss)}`;
 
   $("html-size").textContent = html.size.toLocaleString();
-  $("html-sub").textContent = `limit ${html.maxEntries.toLocaleString()}`;
+  $("html-sub").textContent = t("card.limit", { count: html.maxEntries.toLocaleString() });
   $("html-bytes").textContent = formatBytes(html.bytes);
-  $("html-stale").textContent = `${html.stale} stale`;
+  $("html-stale").textContent = t("card.stale", { count: html.stale });
 
   $("data-size").textContent = data.size.toLocaleString();
-  $("data-sub").textContent = `${data.stale} stale · limit ${data.maxEntries.toLocaleString()}`;
+  $("data-sub").textContent = t("card.staleAndLimit", {
+    stale: data.stale,
+    limit: data.maxEntries.toLocaleString(),
+  });
 
   const redisState = !redis.enabled
     ? "off"
@@ -150,23 +199,398 @@ function render() {
         ? "connected"
         : "disconnected";
 
-  $("redis-state").textContent = redisState;
+  $("redis-state").textContent = t(`state.${redisState}`);
   $("redis-sub").textContent = redis.enabled
-    ? `${redis.errors} errors · ${redis.keyPrefix || "no prefix"}`
-    : "cache.redis.enabled is false";
+    ? t("redis.sub", { address: redis.address, errors: redis.errors })
+    : t("redis.disabled");
+
+  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";
+  $("prewarm-state").textContent = prewarm.active ? `${done}/${total}` : t("state.idle");
   $("prewarm-sub").textContent = prewarm.active
-    ? "round in progress"
+    ? t("prewarm.inProgress")
     : total
-      ? `last round: ${done}/${total}`
-      : "no round yet";
+      ? t("prewarm.lastRound", { done, total })
+      : t("prewarm.never");
 
   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(" · ") || t("state.connected")
+    : status.configured
+      ? t("cf.error", { error: cloudflare.error })
+      : t("cf.notConnected");
+
+  $("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 = [
+    [t("cf.zone"), `${zone?.name ?? "—"} (${status.zoneId ?? "?"})`],
+    [t("cf.plan"), zone?.plan ?? "—"],
+    [
+      t("cf.token"),
+      status.tokenSource === "env" ? t("cf.token.env") : t("cf.token.config"),
+      "on",
+    ],
+    [
+      t("cf.devModeLabel"),
+      development
+        ? t("cf.devMode.on", { time: formatDuration(settings.developmentModeRemaining) })
+        : t("state.off"),
+      development ? "bad" : "on",
+    ],
+    [t("cf.cacheLevel"), String(settings.cacheLevel ?? "—")],
+    [t("cf.browserTtl"), ttl(settings.browserCacheTtl)],
+    [t("cf.edgeTtl"), ttl(settings.edgeCacheTtl)],
+    [t("cf.sortQuery"), String(settings.sortQueryString ?? "—")],
+    [t("cf.alwaysOnline"), String(settings.alwaysOnline ?? "—")],
+    ...feature(t("cf.tiered"), settings.tieredCaching),
+    ...feature(t("cf.regionalTiered"), settings.regionalTieredCache),
+    ...feature(t("cf.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, t("cf.unavailablePlan"), "off"]];
+  }
+  const on = value === "on";
+  return [[label, on ? t("state.on") : t("state.off"), 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 t("cf.respectOrigin");
+  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 = t("cf.querying");
+
+  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 = t("msg.cf.failed", { error: result?.error ?? t("cf.queryFailed") });
+    return;
+  }
+
+  // Son dökümü dil değişiminde yeniden kurmak için saklanır: tablo ağdan
+  // geliyor ve dil değişti diye Cloudflare'e yeniden gitmek gereksiz.
+  lastReport = result;
+  renderReport();
+}
+
+/** @type {any} */
+let lastReport = null;
+
+function renderReport() {
+  if (!lastReport) return;
+  const result = lastReport;
+
+  $("cf-report").replaceChildren(
+    result.colos ? edgeTable(result) : statusTable(result),
+    note(
+      result.colos
+        ? t("cf.edgeNote", {
+            colos: result.colos.length,
+            path: result.path,
+            hours: result.hours,
+            hits: result.hits,
+            misses: result.misses,
+          })
+        : t("cf.zoneNote", { hours: result.hours }),
+    ),
+  );
+}
+
+/**
+ * @param {any} result
+ * @returns {HTMLTableElement}
+ */
+function edgeTable(result) {
+  return buildTable(
+    [t("cf.colo"), t("cf.fromCache"), t("cf.toOrigin")],
+    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(
+    [t("cf.cacheStatus"), t("cf.requests"), t("cf.share"), t("cf.edgeBytes")],
+    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 ? t(`state.${state}`) : t("state.notConfigured");
+  $("redis-actions").hidden = !redis.enabled;
+  $("redis-suggest").hidden = redis.enabled;
+
+  /** @type {[string, string, string?][]} */
+  const rows = redis.enabled
+    ? [
+        [
+          t("redis.connection"),
+          t(`state.${state}`),
+          redis.connected && !redis.bypassed ? "on" : "bad",
+        ],
+        [t("redis.address"), `${redis.address}${redis.secure ? " (TLS)" : ""}`],
+        [t("redis.database"), redis.db ?? t("state.default")],
+        [t("redis.keyPrefix"), `${redis.keyPrefix}:${redis.namespace}`],
+        [t("redis.buildId"), redis.buildId || "dev"],
+        [
+          t("redis.sharesHtml"),
+          redis.html ? t("state.yes") : t("state.no"),
+          redis.html ? "on" : "off",
+        ],
+        [
+          t("redis.sharesData"),
+          redis.data ? t("state.yes") : t("state.no"),
+          redis.data ? "on" : "off",
+        ],
+        [
+          t("redis.compressed"),
+          redis.storeEncoded ? t("redis.compressed.shared") : t("redis.compressed.local"),
+          redis.storeEncoded ? "on" : "off",
+        ],
+        [
+          t("redis.broadcast"),
+          redis.events
+            ? redis.subscribed
+              ? t("redis.broadcast.subscribed")
+              : t("redis.broadcast.publish")
+            : t("state.off"),
+          redis.events && redis.subscribed ? "on" : "off",
+        ],
+        [t("redis.timeout"), `${redis.commandTimeoutMs} ${t("unit.ms")}`],
+        [t("redis.errors"), String(redis.errors), redis.errors ? "bad" : "on"],
+      ]
+    : [
+        [t("redis.tier"), t("redis.tier.inProcess")],
+        [t("redis.replicas"), t("state.none")],
+        [t("redis.broadcast"), t("redis.broadcast.local"), "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
+    ? t("host.ramShared", { rss: formatBytes(proc.memory.rss) })
+    : t("host.ramOnly", {
+        rss: formatBytes(proc.memory.rss),
+        html: formatBytes(latest.html.bytes),
+      });
+
+  if (!host.disk) {
+    $("disk-text").textContent = t("state.unavailable");
+    meter("disk-bar", 0);
+    $("disk-note").textContent = t("host.noStats");
+    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 = t("host.diskNote", {
+    free: formatBytes(host.disk.free),
+    path: host.disk.path,
+  });
+}
+
+/**
+ * @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");
@@ -174,13 +598,31 @@ function renderTable() {
 
   $("listed").textContent =
     source.matched > source.entries.length
-      ? `${source.entries.length} of ${source.matched} shown`
-      : `${source.matched} shown`;
+      ? t("entries.shownPartial", { shown: source.entries.length, total: source.matched })
+      : t("entries.shown", { total: source.matched });
 
-  thead.innerHTML =
+  const columns =
     tab === "html"
-      ? `<tr><th>Key</th><th>State</th><th class="num">Size</th><th class="num">Status</th><th class="num">Expires</th><th class="num">Deps</th><th>Encodings</th><th></th></tr>`
-      : `<tr><th>Key</th><th>State</th><th class="num">Expires</th><th></th></tr>`;
+      ? [
+          ["entries.key"],
+          ["entries.state"],
+          ["entries.size", "num"],
+          ["entries.status", "num"],
+          ["entries.expires", "num"],
+          ["entries.deps", "num"],
+          ["entries.encodings"],
+          [null],
+        ]
+      : [["entries.key"], ["entries.state"], ["entries.expires", "num"], [null]];
+
+  const headRow = document.createElement("tr");
+  for (const [key, className] of columns) {
+    const th = document.createElement("th");
+    if (className) th.className = className;
+    if (key) th.textContent = t(key);
+    headRow.append(th);
+  }
+  thead.replaceChildren(headRow);
 
   tbody.replaceChildren(
     ...source.entries.map((/** @type {any} */ entry) => row(entry)),
@@ -198,13 +640,35 @@ 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 = t("entries.copyKey");
+    copy.textContent = entry.key;
+    copy.addEventListener("click", () => void copyKey(entry.key));
+    key.append(copy);
+  }
+
   tr.append(key);
 
   const state = document.createElement("td");
   const tag = document.createElement("span");
   tag.className = entry.stale ? "tag stale" : "tag fresh";
-  tag.textContent = entry.stale ? "stale" : "fresh";
+  tag.textContent = entry.stale ? t("entries.stale") : t("entries.fresh");
   state.append(tag);
   tr.append(state);
 
@@ -223,9 +687,22 @@ 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 = t("cf.rowPurge");
+    purge.title = t("cf.rowPurgeTitle");
+    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";
+  drop.textContent = t("entries.drop");
   drop.addEventListener("click", () => {
     void act({ type: tab === "html" ? "html:drop" : "data:drop", key: entry.key });
   });
@@ -236,6 +713,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(t("toast.keyCopied"));
+  } catch {
+    $("prefix").value = key;
+    $("prefix").focus();
+    toast(t("toast.clipboard"), false);
+  }
+}
+
 /**
  * @param {string} text
  * @param {string} [className]
@@ -294,7 +788,7 @@ for (const name of /** @type {const} */ (["html", "data"])) {
 $("invalidate").addEventListener("click", () => {
   const target = $("target").value.trim();
   if (!target) {
-    toast("Enter a path or pattern first.", false);
+    toast(t("toast.needTarget"), false);
     return;
   }
 
@@ -302,13 +796,13 @@ $("invalidate").addEventListener("click", () => {
 });
 
 $("clear-html").addEventListener("click", () => {
-  if (!confirm("Clear the entire HTML cache? Every page goes cold.")) return;
+  if (!confirm(t("confirm.clearHtml"))) return;
   void act({ type: "html:clear" });
 });
 
 $("clear-data").addEventListener("click", () => {
   const prefix = $("prefix").value.trim();
-  if (!prefix && !confirm("Clear every data entry? Upstream traffic will spike.")) {
+  if (!prefix && !confirm(t("confirm.clearData"))) {
     return;
   }
 
@@ -317,6 +811,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 +823,68 @@ $("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(t("confirm.purgeAll"))) 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(t("toast.noCachedPages"), false);
+    return;
+  }
+
+  if (!confirm(t("confirm.purgeUrls", { count: paths.length }))) return;
+  void act({ type: "cf:purge-urls", paths });
+});
+
+$("cf-purge-keys").addEventListener("click", () => {
+  const values = $("cf-values").value.trim();
+  if (!values) {
+    toast(t("toast.needValue"), 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(t("confirm.clearReserve"))) 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", () => {
@@ -335,5 +895,21 @@ document.addEventListener("visibilitychange", () => {
   }
 });
 
+/* -------------------------------------------------------------------- dil */
+
+// Dil değişimi hiçbir isteğe yol açmaz: statik metinler sözlükten yeniden
+// yazılır, dinamik olanlar elde duran son dökümle tekrar çizilir.
+$("language").append(
+  languageSelect(() => {
+    applyTranslations();
+    if (latest) render();
+    renderCloudflare();
+    renderReport();
+  }),
+);
+
+applyTranslations();
+
 void load();
+void loadCloudflare();
 startPolling();