jskelet 0.2.2 → 0.2.3

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

@@ -19,7 +19,8 @@
   --line: #23272f;
   --text: #e7e9ee;
   --muted: #8b93a1;
-  --accent: #6ea8fe;
+  /* Pazarlama sitesiyle aynı vurgu: cyan. */
+  --accent: #22d3ee;
   --ok: #4ade80;
   --warn: #fbbf24;
   --bad: #f87171;
@@ -33,6 +34,8 @@ body {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
   min-height: 100vh;
   background:
     radial-gradient(1200px 600px at 20% -10%, #16202f 0%, transparent 60%),
@@ -78,6 +81,10 @@ a {
   box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
 }
 
+.login .brand {
+  margin-bottom: 16px;
+}
+
 .login h1 {
   margin: 0 0 6px;
   font-size: 18px;
@@ -134,14 +141,120 @@ header {
   z-index: 5;
 }
 
-header h1 {
-  margin: 0;
+header .spacer {
+  flex: 1;
+}
+
+/* ------------------------------------------------------------------ marka */
+
+.brand {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+}
+
+.brand img,
+.foot-brand img {
+  object-fit: contain;
+}
+
+.wordmark {
   font-size: 15px;
-  font-weight: 600;
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
-header .spacer {
-  flex: 1;
+.badge {
+  padding: 2px 8px;
+  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--accent) 12%, transparent);
+  color: color-mix(in oklab, var(--accent) 85%, var(--text));
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.crumbs {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-left: 12px;
+  border-left: 1px solid var(--line);
+  color: var(--text);
+  font-size: 13px;
+}
+
+/* ------------------------------------------------------------------ footer */
+
+footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 20px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding: 18px 20px;
+  border-top: 1px solid var(--line);
+  background: rgb(18 20 26 / 60%);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.foot-brand {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.foot-brand .wordmark {
+  font-size: 13px;
+}
+
+.foot-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.foot-links a {
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.foot-links a:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.dot {
+  color: color-mix(in oklab, var(--line) 80%, var(--muted));
+}
+
+.live {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+}
+
+.pulse {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--ok);
+  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent);
+  animation: pulse 2.4s ease-out infinite;
+}
+
+@keyframes pulse {
+  70% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
 }
 
 .chip {
@@ -322,6 +435,157 @@ label.check {
   font-size: 12px;
 }
 
+.m0 {
+  margin: 0;
+}
+
+/* ------------------------------------------------ anahtar/değer ve ölçüler */
+
+.kv {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 10px 20px;
+  margin: 0;
+}
+
+.kv > div {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  justify-content: space-between;
+  padding-bottom: 7px;
+  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
+}
+
+.kv dt {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.kv dd {
+  margin: 0;
+  font-family: ui-monospace, monospace;
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.kv dd.on {
+  color: var(--ok);
+}
+
+.kv dd.off {
+  color: var(--muted);
+}
+
+.kv dd.bad {
+  color: var(--bad);
+}
+
+.meter + .meter {
+  margin-top: 16px;
+}
+
+.meter-head {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 7px;
+  font-size: 12.5px;
+}
+
+.meter-head span:first-child {
+  color: var(--muted);
+}
+
+.bar {
+  height: 8px;
+  border-radius: 999px;
+  background: #0d0f14;
+  overflow: hidden;
+}
+
+.bar > span {
+  display: block;
+  width: 0;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklab, var(--accent) 70%, transparent),
+    var(--accent)
+  );
+  transition: width 0.3s ease;
+}
+
+.bar > span.warn {
+  background: linear-gradient(90deg, color-mix(in oklab, var(--warn) 70%, transparent), var(--warn));
+}
+
+.bar > span.bad {
+  background: linear-gradient(90deg, color-mix(in oklab, var(--bad) 70%, transparent), var(--bad));
+}
+
+/* ------------------------------------------------------- analitik dökümü */
+
+.report {
+  margin-top: 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.report table {
+  font-size: 12px;
+}
+
+.report .note {
+  padding: 9px 12px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 11.5px;
+}
+
+select {
+  padding: 8px 11px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #0d0f14;
+  color: var(--text);
+  font: inherit;
+  font-size: 12.5px;
+}
+
+/* --------------------------------------------------------------- öneri kutusu */
+
+.suggest {
+  padding: 14px 16px;
+  border: 1px dashed color-mix(in oklab, var(--accent) 40%, var(--line));
+  border-radius: var(--radius);
+  background: color-mix(in oklab, var(--accent) 6%, transparent);
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+
+.suggest pre {
+  margin: 12px 0 0;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #0d0f14;
+  overflow-x: auto;
+  font-size: 12px;
+}
+
+.suggest code {
+  color: color-mix(in oklab, var(--accent) 75%, var(--text));
+}
+
+.suggest .hint {
+  margin-top: 12px;
+}
+
 /* -------------------------------------------------------------- sekme/tablo */
 
 .tabs {
@@ -380,6 +644,34 @@ td.key {
   overflow-wrap: anywhere;
 }
 
+td.key a {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 1px dotted color-mix(in oklab, var(--accent) 55%, transparent);
+}
+
+td.key a:hover {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* Kopyalanabilir anahtar: buton gibi davranır, metin gibi görünür. */
+button.as-text {
+  padding: 0;
+  border: none;
+  border-bottom: 1px dotted transparent;
+  border-radius: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+button.as-text:hover:not(:disabled) {
+  color: var(--accent);
+  border-bottom-color: color-mix(in oklab, var(--accent) 55%, transparent);
+}
+
 td.num {
   text-align: right;
   white-space: nowrap;

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

@@ -5,17 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
     <meta name="referrer" content="no-referrer" />
-    <title>Cache</title>
+    <title>Cache · JSkelet</title>
+    <link rel="icon" href="logo.png" />
     <link rel="stylesheet" href="panel.css" />
   </head>
   <body>
     <header>
-      <h1>Cache</h1>
+      <div class="brand">
+        <img src="logo.png" alt="" width="30" height="30" />
+        <span class="wordmark">JSkelet</span>
+        <span class="badge" id="version">—</span>
+      </div>
+
+      <nav class="crumbs" aria-label="Panel">
+        <span aria-current="page">Cache</span>
+      </nav>
+
+      <span class="spacer"></span>
+
       <span class="chip" id="env">—</span>
       <span class="chip" id="pid">—</span>
       <span class="chip" id="uptime">—</span>
       <span class="chip" id="memory">—</span>
-      <span class="spacer"></span>
+
       <label class="check">
         <input type="checkbox" id="auto" checked />
         live
@@ -53,6 +65,149 @@
         </div>
       </div>
 
+      <section>
+        <h2>Shared tier <span class="count" id="redis-heading">—</span></h2>
+        <div class="body">
+          <dl class="kv" id="redis-kv"></dl>
+
+          <div class="row" id="redis-actions" hidden>
+            <button id="redis-inspect">Count keys in Redis</button>
+            <button class="danger" id="redis-html">Drop shared HTML keys</button>
+            <button class="danger" id="redis-data">Drop shared data keys</button>
+          </div>
+
+          <div class="suggest" id="redis-suggest" hidden>
+            <p class="m0">
+              <strong>No shared tier.</strong> Every entry above lives in this
+              process only, so each replica warms up on its own and an
+              invalidation reaches whichever replica received the request.
+              Adding Redis keeps the in-process cache primary and only does what
+              a single process cannot: serve HTML another replica already
+              rendered, and broadcast purges to all of them.
+            </p>
+            <pre><code>npm install ioredis</code></pre>
+            <pre><code>// jskelet.config.mjs
+cache() {
+  return {
+    redis: { enabled: true, url: process.env.REDIS_URL },
+  };
+}</code></pre>
+            <p class="hint m0">
+              Worth it from the second replica onwards. On a single instance the
+              gain is close to zero, which is why it is off by default.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>
+          Cloudflare <span class="count" id="cf-heading">—</span>
+          <span class="tabs">
+            <button id="cf-refresh">Refresh</button>
+          </span>
+        </h2>
+        <div class="body">
+          <dl class="kv" id="cf-kv"></dl>
+
+          <div id="cf-tools" hidden>
+            <div class="row">
+              <button class="danger" id="cf-purge-all">Purge everything</button>
+              <button id="cf-purge-cached">Purge URLs cached here</button>
+              <label class="check">
+                <input type="checkbox" id="cf-dev" />
+                development mode (bypass cache for 3h)
+              </label>
+            </div>
+
+            <div class="row">
+              <select id="cf-kind">
+                <option value="prefixes">prefixes</option>
+                <option value="hosts">hosts</option>
+                <option value="tags">cache tags</option>
+              </select>
+              <input
+                class="grow"
+                type="text"
+                id="cf-values"
+                spellcheck="false"
+                placeholder="example.com/news  ·  space or comma separated, 100 per request"
+              />
+              <button class="primary" id="cf-purge-keys">Purge</button>
+            </div>
+
+            <div class="row">
+              <button id="cf-tiered">Toggle Tiered Cache</button>
+              <button id="cf-reserve">Toggle Cache Reserve</button>
+              <button class="danger" id="cf-reserve-clear">Clear Cache Reserve</button>
+            </div>
+
+            <div class="row">
+              <input
+                class="grow"
+                type="text"
+                id="cf-path"
+                spellcheck="false"
+                placeholder="/news/some-post — which edges served this path (blank = whole zone)"
+              />
+              <button id="cf-analytics">Query analytics</button>
+            </div>
+
+            <div id="cf-report" class="report" hidden></div>
+
+            <p class="hint">
+              Cloudflare has no endpoint that lists which edges currently hold a
+              copy of a URL, and no way to warm a chosen edge from the origin —
+              an object only enters an edge cache through a real request routed
+              there. What you get above is observation: which colos served the
+              path from cache and which went to the origin. Warming is our
+              prewarm pass plus Tiered Cache or Cache Reserve behind it.
+            </p>
+          </div>
+
+          <div class="suggest" id="cf-suggest" hidden>
+            <p class="m0">
+              <strong>Cloudflare is not connected.</strong> The cache above is
+              the origin cache; the copy your visitors actually get is at the
+              edge. Connecting a zone lets a purge here reach both, and shows
+              the cache hit ratio that decides whether the origin cache is even
+              being asked.
+            </p>
+            <pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
+JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
+            <p class="hint m0">
+              Token permissions: <code>Zone.Cache Purge</code> to purge,
+              <code>Zone.Zone Settings</code> to change settings,
+              <code>Zone.Analytics</code> (read) for the hit ratio. The token is
+              read from the environment and never leaves the server.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Host <span class="count" id="host-heading">—</span></h2>
+        <div class="body">
+          <div class="meter">
+            <div class="meter-head">
+              <span>Memory</span>
+              <span class="mono" id="ram-text">—</span>
+            </div>
+            <div class="bar"><span id="ram-bar"></span></div>
+            <p class="hint m0" id="ram-note">—</p>
+          </div>
+
+          <div class="meter">
+            <div class="meter-head">
+              <span>Disk</span>
+              <span class="mono" id="disk-text">—</span>
+            </div>
+            <div class="bar"><span id="disk-bar"></span></div>
+            <p class="hint m0" id="disk-note">—</p>
+          </div>
+        </div>
+      </section>
+
       <section>
         <h2>Actions</h2>
         <div class="body">
@@ -85,8 +240,6 @@
 
           <div class="row">
             <button id="prewarm">Prewarm all paths</button>
-            <button id="redis-html">Drop shared HTML keys</button>
-            <button id="redis-data">Drop shared data keys</button>
           </div>
 
           <p class="hint">
@@ -127,6 +280,27 @@
       </section>
     </main>
 
+    <footer>
+      <div class="foot-brand">
+        <img src="logo.png" alt="" width="24" height="24" />
+        <span class="wordmark">JSkelet</span>
+        <span class="mono" id="foot-release">—</span>
+      </div>
+
+      <div class="foot-links">
+        <a id="foot-repo" href="https://github.com/ayberkenis/jskelet" rel="noreferrer noopener">
+          GitHub
+        </a>
+        <span class="dot" aria-hidden="true">·</span>
+        <span>Cache panel</span>
+        <span class="dot" aria-hidden="true">·</span>
+        <span class="live">
+          <span class="pulse"></span>
+          Password rotates on restart
+        </span>
+      </div>
+    </footer>
+
     <div id="toast"></div>
     <script type="module" src="panel.js"></script>
   </body>