npm - jskelet - Versions diffs - 0.6.3 → 0.6.5 - Mend

jskelet 0.6.3 → 0.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

package/AGENTS.md +136 -136
package/CHANGELOG.md +633 -620
package/LICENSE +21 -21
package/README.md +2 -0
package/bin/jskelet.mjs +130 -130
package/docs/01-baslangic.md +291 -291
package/docs/02-mimari.md +310 -310
package/docs/03-routing.md +515 -515
package/docs/04-render-ve-sablonlar.md +700 -661
package/docs/05-islands.md +486 -486
package/docs/06-cache.md +1467 -1443
package/docs/07-yapilandirma.md +1208 -1197
package/docs/08-build.md +429 -429
package/docs/09-dev-araclari.md +364 -364
package/docs/10-dagitim.md +351 -338
package/docs/12-panel-ve-oturum.md +479 -478
package/docs/README.md +83 -83
package/docs/en/01-getting-started.md +298 -298
package/docs/en/02-architecture.md +329 -329
package/docs/en/03-routing.md +531 -531
package/docs/en/04-rendering.md +708 -669
package/docs/en/05-islands.md +497 -497
package/docs/en/06-caching.md +1476 -1453
package/docs/en/07-configuration.md +1229 -1219
package/docs/en/08-build.md +447 -447
package/docs/en/09-dev-tools.md +373 -373
package/docs/en/10-deployment.md +355 -340
package/docs/en/11-migration.md +398 -398
package/docs/en/12-dashboards-and-sessions.md +489 -488
package/docs/en/README.md +87 -87
package/package.json +137 -137
package/src/build/ensure-build.mjs +19 -19
package/src/build/paths.mjs +153 -153
package/src/build/resolve-peer.mjs +36 -36
package/src/build/tasks/client.mjs +349 -349
package/src/build/tasks/css.mjs +235 -235
package/src/build/tasks/fonts.mjs +146 -146
package/src/build/tasks/icons.mjs +357 -357
package/src/build/tasks/images.mjs +244 -244
package/src/build/tasks/precompress.mjs +78 -78
package/src/build/tasks/templates.mjs +20 -20
package/src/client/admin/i18n.js +764 -764
package/src/client/admin/login.html +74 -74
package/src/client/admin/panel.css +809 -809
package/src/client/admin/panel.html +495 -495
package/src/client/admin/panel.js +1251 -1251
package/src/client/devtools/report.html +185 -185
package/src/client/devtools/report.js +745 -745
package/src/client/devtools/seo.js +628 -628
package/src/client/dom.js +95 -95
package/src/client/form.js +192 -192
package/src/client/index.js +45 -45
package/src/client/registry.js +305 -305
package/src/client/safe-image.js +91 -91
package/src/client/shared-cookie.js +225 -225
package/src/client/store.js +36 -36
package/src/client/swap.js +188 -188
package/src/compile/codegen.js +336 -336
package/src/compile/compile-all.js +149 -149
package/src/compile/errors.js +66 -66
package/src/compile/expr.js +409 -409
package/src/compile/index.js +17 -17
package/src/compile/parse.js +541 -541
package/src/compile/resolve.js +211 -211
package/src/compile/scan-exports.js +51 -51
package/src/config/defaults.js +541 -534
package/src/config/index.js +1500 -1469
package/src/config/pattern.js +107 -107
package/src/generate.mjs +163 -163
package/src/http/control-flow.js +71 -71
package/src/http/cookies-entry.js +21 -21
package/src/http/cookies.js +277 -277
package/src/http/request-cache.js +46 -46
package/src/http/request-context.js +165 -165
package/src/http/shared-cookie.js +178 -178
package/src/index.js +101 -101
package/src/init.mjs +232 -230
package/src/migrate/apply.mjs +262 -262
package/src/migrate/babel.mjs +79 -79
package/src/migrate/classify.mjs +155 -155
package/src/migrate/config.mjs +126 -126
package/src/migrate/fs-walk.mjs +191 -191
package/src/migrate/parse.mjs +26 -26
package/src/migrate/scan.mjs +177 -177
package/src/migrate/transform/expr-source.mjs +168 -168
package/src/migrate/transform/island.mjs +67 -67
package/src/migrate/transform/jsx-to-component.mjs +302 -302
package/src/migrate/transform/jsx-to-jsk.mjs +330 -330
package/src/migrate/transform/page-split.mjs +435 -435
package/src/migrate/write.mjs +81 -81
package/src/migrate.mjs +171 -171
package/src/runtime/alias-hooks.mjs +119 -119
package/src/runtime/register.mjs +4 -4
package/src/server/admin/actions.js +229 -229
package/src/server/admin/auth.js +125 -125
package/src/server/admin/event-log.js +151 -151
package/src/server/admin/gate.js +209 -209
package/src/server/admin/inventory.js +188 -188
package/src/server/admin/mount.js +56 -56
package/src/server/admin/router.js +216 -216
package/src/server/admin/snapshot.js +241 -241
package/src/server/assets.js +147 -147
package/src/server/auth/handoff.js +309 -309
package/src/server/cache-blob.js +70 -70
package/src/server/cache-control.js +45 -0
package/src/server/cache-deps.js +42 -42
package/src/server/cache-vary.js +113 -113
package/src/server/cloudflare.js +607 -607
package/src/server/create-app.js +366 -366
package/src/server/data-cache.js +553 -553
package/src/server/dev/report.js +485 -485
package/src/server/dev/socket.js +170 -170
package/src/server/dev/version-check.mjs +139 -139
package/src/server/disk-cache.js +233 -233
package/src/server/ejs-adapter.js +59 -59
package/src/server/html-cache.js +1196 -1196
package/src/server/image-optimizer.js +500 -500
package/src/server/logs/access-middleware.js +66 -66
package/src/server/logs/file-sink.js +193 -193
package/src/server/logs/pipeline.js +165 -165
package/src/server/logs/s3-put.js +214 -214
package/src/server/logs/s3-sink.js +112 -112
package/src/server/metadata.js +102 -102
package/src/server/middleware/compression.js +205 -205
package/src/server/middleware/csrf.js +134 -134
package/src/server/middleware/dev-gate.js +75 -75
package/src/server/middleware/headers.js +37 -37
package/src/server/middleware/redirects.js +32 -32
package/src/server/middleware/robots-txt.js +341 -341
package/src/server/middleware/static-precompressed.js +121 -121
package/src/server/middleware/trailing-slash.js +53 -53
package/src/server/middleware/upstream-proxy.js +141 -141
package/src/server/og-image.js +965 -356
package/src/server/og-raster.mjs +21 -0
package/src/server/port-guard.js +255 -255
package/src/server/prewarm.js +1082 -1082
package/src/server/redis.js +588 -588
package/src/server/render.js +910 -910
package/src/server/router.js +157 -157
package/src/server/status-page.js +265 -265
package/src/server/upstream-limiter.js +376 -376
package/src/server/upstream-tracking.js +166 -166
package/src/shared/cookie-domain.js +66 -66
package/src/start.mjs +22 -22
package/src/templates/layout.ejs +30 -30
package/src/templates/layout.jsk +30 -30
package/src/version.mjs +31 -31
package/src/views/components/loader.js +101 -101
package/src/views/helpers/html.js +102 -102
package/src/views/helpers/tags.js +375 -375
package/types/config/defaults.d.ts +6 -0
package/types/config/index.d.ts +6 -0
package/types/server/cache-control.d.ts +28 -0
package/types/server/og-image.d.ts +51 -3

package/src/client/admin/panel.html CHANGED Viewed

@@ -1,495 +1,495 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <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>Admin · JSkelet</title>
-    <link rel="icon" href="logo.png" />
-    <link rel="stylesheet" href="panel.css" />
-  </head>
-  <body>
-    <header>
-      <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="Admin" id="nav">
-        <a href="./" data-page="overview" data-i18n="nav.overview">Overview</a>
-        <a href="cache" data-page="cache" data-i18n="nav.cache">Cache</a>
-        <a href="routes" data-page="routes" data-i18n="nav.routes">Routes</a>
-        <a href="views" data-page="views" data-i18n="nav.views">Views</a>
-        <a href="logs" data-page="logs" data-i18n="nav.logs">Logs</a>
-        <a href="system" data-page="system" data-i18n="nav.system">System</a>
-      </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="chip" id="sse-status" hidden>—</span>
-      <span id="language"></span>
-      <label class="check">
-        <input type="checkbox" id="auto" checked />
-        <span data-i18n="shell.live">live</span>
-      </label>
-      <button id="refresh" data-i18n="shell.refresh">Refresh</button>
-      <button id="logout" data-i18n="shell.signOut">Sign out</button>
-    </header>
-    <main>
-      <!-- Overview -->
-      <div class="page" id="page-overview" data-page="overview">
-        <div class="cards">
-          <div class="card">
-            <div class="label" data-i18n="card.htmlEntries">HTML entries</div>
-            <div class="value" id="html-size">—</div>
-            <div class="sub" id="html-sub">—</div>
-          </div>
-          <div class="card">
-            <div class="label" data-i18n="card.htmlMemory">HTML in memory</div>
-            <div class="value" id="html-bytes">—</div>
-            <div class="sub" id="html-stale">—</div>
-          </div>
-          <div class="card">
-            <div class="label" data-i18n="card.dataEntries">Data entries</div>
-            <div class="value" id="data-size">—</div>
-            <div class="sub" id="data-sub">—</div>
-          </div>
-          <div class="card">
-            <div class="label" data-i18n="card.sharedTier">Shared tier</div>
-            <div class="value" id="redis-state">—</div>
-            <div class="sub" id="redis-sub">—</div>
-          </div>
-          <div class="card">
-            <div class="label" data-i18n="card.prewarm">Prewarm</div>
-            <div class="value" id="prewarm-state">—</div>
-            <div class="sub" id="prewarm-sub">—</div>
-          </div>
-        </div>
-        <section>
-          <h2>
-            <span data-i18n="upstream.section">Upstream</span>
-            <span class="count" id="upstream-heading">—</span>
-          </h2>
-          <div class="body">
-            <div class="scroll">
-              <table>
-                <thead>
-                  <tr>
-                    <th data-i18n="upstream.host">Host</th>
-                    <th data-i18n="upstream.rate">Rate</th>
-                    <th data-i18n="upstream.state">State</th>
-                  </tr>
-                </thead>
-                <tbody id="upstream-tbody"></tbody>
-              </table>
-              <div class="empty" id="upstream-empty" data-i18n="upstream.empty" hidden>
-                No upstream hosts tracked.
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-      <!-- Cache -->
-      <div class="page" id="page-cache" data-page="cache" hidden>
-        <section>
-          <h2>
-            <span data-i18n="redis.section">Shared tier</span>
-            <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" data-i18n="redis.inspect">Count keys in Redis</button>
-              <button class="danger" id="redis-html" data-i18n="redis.dropHtml">
-                Drop shared HTML keys
-              </button>
-              <button class="danger" id="redis-data" data-i18n="redis.dropData">
-                Drop shared data keys
-              </button>
-            </div>
-            <div class="suggest" id="redis-suggest" hidden>
-              <p class="m0">
-                <strong data-i18n="redis.suggest.title">No shared tier.</strong>
-                <span data-i18n="redis.suggest.body"></span>
-              </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" data-i18n="redis.suggest.hint"></p>
-            </div>
-          </div>
-        </section>
-        <section>
-          <h2>
-            <span data-i18n="cf.section">Cloudflare</span>
-            <span class="count" id="cf-heading">—</span>
-            <span class="tabs">
-              <button id="cf-refresh" data-i18n="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" data-i18n="cf.purgeAll">
-                  Purge everything
-                </button>
-                <button id="cf-purge-cached" data-i18n="cf.purgeCached">
-                  Purge URLs cached here
-                </button>
-                <label class="check">
-                  <input type="checkbox" id="cf-dev" />
-                  <span data-i18n="cf.devMode"></span>
-                </label>
-              </div>
-              <div class="row">
-                <select id="cf-kind">
-                  <option value="prefixes" data-i18n="cf.kind.prefixes">prefixes</option>
-                  <option value="hosts" data-i18n="cf.kind.hosts">hosts</option>
-                  <option value="tags" data-i18n="cf.kind.tags">cache tags</option>
-                </select>
-                <input
-                  class="grow"
-                  type="text"
-                  id="cf-values"
-                  spellcheck="false"
-                  data-i18n-ph="cf.values.placeholder"
-                />
-                <button class="primary" id="cf-purge-keys" data-i18n="cf.purge">Purge</button>
-              </div>
-              <div class="row">
-                <button id="cf-tiered" data-i18n="cf.toggleTiered">Toggle Tiered Cache</button>
-                <button id="cf-reserve" data-i18n="cf.toggleReserve">Toggle Cache Reserve</button>
-                <button class="danger" id="cf-reserve-clear" data-i18n="cf.clearReserve">
-                  Clear Cache Reserve
-                </button>
-              </div>
-              <div class="row">
-                <input
-                  class="grow"
-                  type="text"
-                  id="cf-path"
-                  spellcheck="false"
-                  data-i18n-ph="cf.path.placeholder"
-                />
-                <button id="cf-analytics" data-i18n="cf.queryAnalytics">Query analytics</button>
-              </div>
-              <div id="cf-report" class="report" hidden></div>
-              <p class="hint" data-i18n="cf.edgeHint"></p>
-            </div>
-            <div class="suggest" id="cf-suggest" hidden>
-              <p class="m0">
-                <strong data-i18n="cf.suggest.title">Cloudflare is not connected.</strong>
-                <span data-i18n="cf.suggest.body"></span>
-              </p>
-              <pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
-JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
-              <p class="hint m0" data-i18n-html="cf.suggest.hint"></p>
-            </div>
-          </div>
-        </section>
-        <section>
-          <h2><span data-i18n="actions.section">Actions</span></h2>
-          <div class="body">
-            <div class="row">
-              <input
-                class="grow"
-                type="text"
-                id="target"
-                spellcheck="false"
-                data-i18n-ph="actions.target.placeholder"
-              />
-              <label class="check">
-                <input type="checkbox" id="hard" />
-                <span data-i18n="actions.hard"></span>
-              </label>
-              <button class="primary" id="invalidate" data-i18n="actions.invalidate">
-                Invalidate
-              </button>
-            </div>
-            <div class="row">
-              <input
-                class="grow"
-                type="text"
-                id="prefix"
-                spellcheck="false"
-                data-i18n-ph="actions.prefix.placeholder"
-              />
-              <button class="danger" id="clear-data" data-i18n="actions.clearData">
-                Clear data cache
-              </button>
-              <button class="danger" id="clear-html" data-i18n="actions.clearHtml">
-                Clear HTML cache
-              </button>
-            </div>
-            <div class="row">
-              <button id="prewarm" data-i18n="actions.prewarm">Prewarm all paths</button>
-            </div>
-            <p class="hint" data-i18n="actions.hint"></p>
-          </div>
-        </section>
-        <section>
-          <h2>
-            <span data-i18n="entries.section">Entries</span>
-            <span class="count" id="listed">—</span>
-            <span class="tabs" role="tablist">
-              <button id="tab-html" role="tab" aria-selected="true">HTML</button>
-              <button id="tab-data" role="tab" aria-selected="false" data-i18n="tab.data">
-                Data
-              </button>
-            </span>
-          </h2>
-          <div class="body">
-            <div class="row">
-              <input
-                class="grow"
-                type="search"
-                id="search"
-                spellcheck="false"
-                data-i18n-ph="entries.search"
-              />
-            </div>
-          </div>
-          <div class="scroll">
-            <table>
-              <thead id="thead"></thead>
-              <tbody id="tbody"></tbody>
-            </table>
-            <div class="empty" id="empty" data-i18n="entries.empty" hidden>No entries.</div>
-          </div>
-        </section>
-      </div>
-      <!-- Routes -->
-      <div class="page" id="page-routes" data-page="routes" hidden>
-        <section>
-          <h2>
-            <span data-i18n="routes.section">Registered routes</span>
-            <span class="count" id="routes-count">—</span>
-          </h2>
-          <div class="scroll">
-            <table>
-              <thead>
-                <tr>
-                  <th data-i18n="routes.method">Method</th>
-                  <th data-i18n="routes.path">Path</th>
-                  <th data-i18n="routes.lastStatus">Last status</th>
-                  <th data-i18n="routes.lastMs">Last ms</th>
-                  <th data-i18n="routes.hits">Hits</th>
-                </tr>
-              </thead>
-              <tbody id="routes-tbody"></tbody>
-            </table>
-            <div class="empty" id="routes-empty" data-i18n="routes.empty" hidden>No routes.</div>
-          </div>
-        </section>
-        <section>
-          <h2>
-            <span data-i18n="routes.modules">Route modules</span>
-            <span class="count" id="modules-count">—</span>
-          </h2>
-          <div class="scroll">
-            <table>
-              <thead>
-                <tr>
-                  <th data-i18n="routes.file">File</th>
-                </tr>
-              </thead>
-              <tbody id="modules-tbody"></tbody>
-            </table>
-          </div>
-        </section>
-      </div>
-      <!-- Views -->
-      <div class="page" id="page-views" data-page="views" hidden>
-        <section>
-          <h2>
-            <span data-i18n="views.section">Views</span>
-            <span class="count" id="views-count">—</span>
-          </h2>
-          <div class="body">
-            <div class="row">
-              <input
-                class="grow"
-                type="search"
-                id="views-search"
-                spellcheck="false"
-                data-i18n-ph="views.search"
-              />
-            </div>
-          </div>
-          <div class="scroll">
-            <table>
-              <thead>
-                <tr>
-                  <th data-i18n="views.path">Path</th>
-                  <th data-i18n="views.kind">Kind</th>
-                </tr>
-              </thead>
-              <tbody id="views-tbody"></tbody>
-            </table>
-            <div class="empty" id="views-empty" data-i18n="views.empty" hidden>No views.</div>
-          </div>
-        </section>
-      </div>
-      <!-- Logs -->
-      <div class="page" id="page-logs" data-page="logs" hidden>
-        <section>
-          <h2>
-            <span data-i18n="logs.section">Live logs</span>
-            <span class="count" id="logs-count">—</span>
-          </h2>
-          <div class="body">
-            <div class="row filters">
-              <input
-                class="grow"
-                type="search"
-                id="logs-q"
-                spellcheck="false"
-                data-i18n-ph="logs.search"
-              />
-              <select id="logs-kind">
-                <option value="" data-i18n="logs.kind.all">all kinds</option>
-                <option value="http">http</option>
-                <option value="event">event</option>
-                <option value="warn">warn</option>
-                <option value="error">error</option>
-              </select>
-              <select id="logs-method">
-                <option value="" data-i18n="logs.method.all">all methods</option>
-                <option value="GET">GET</option>
-                <option value="POST">POST</option>
-                <option value="PUT">PUT</option>
-                <option value="PATCH">PATCH</option>
-                <option value="DELETE">DELETE</option>
-              </select>
-              <select id="logs-status">
-                <option value="" data-i18n="logs.status.all">all status</option>
-                <option value="2">2xx</option>
-                <option value="3">3xx</option>
-                <option value="4">4xx</option>
-                <option value="5">5xx</option>
-              </select>
-              <select id="logs-cache">
-                <option value="" data-i18n="logs.cache.all">all cache</option>
-                <option value="HIT">HIT</option>
-                <option value="STALE">STALE</option>
-                <option value="MISS">MISS</option>
-              </select>
-              <input
-                type="text"
-                id="logs-path"
-                spellcheck="false"
-                data-i18n-ph="logs.path"
-                style="min-width: 8rem"
-              />
-              <label class="check">
-                <input type="checkbox" id="logs-pause" />
-                <span data-i18n="logs.pause">pause</span>
-              </label>
-              <button id="logs-clear" data-i18n="logs.clear">Clear view</button>
-            </div>
-          </div>
-          <div class="scroll log-scroll">
-            <pre id="logs-list" class="log-list"></pre>
-            <div class="empty" id="logs-empty" data-i18n="logs.empty" hidden>No log lines.</div>
-          </div>
-        </section>
-      </div>
-      <!-- System -->
-      <div class="page" id="page-system" data-page="system" hidden>
-        <section>
-          <h2>
-            <span data-i18n="host.section">Host</span>
-            <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>
-                <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 data-i18n="host.disk">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>
-      </div>
-    </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 data-i18n="footer.panel">Admin panel</span>
-        <span class="dot" aria-hidden="true">·</span>
-        <span class="live">
-          <span class="pulse"></span>
-          <span data-i18n="footer.rotates">Password rotates on restart</span>
-        </span>
-      </div>
-    </footer>
-    <div id="toast"></div>
-    <script type="module" src="panel.js"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <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>Admin · JSkelet</title>
+    <link rel="icon" href="logo.png" />
+    <link rel="stylesheet" href="panel.css" />
+  </head>
+  <body>
+    <header>
+      <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="Admin" id="nav">
+        <a href="./" data-page="overview" data-i18n="nav.overview">Overview</a>
+        <a href="cache" data-page="cache" data-i18n="nav.cache">Cache</a>
+        <a href="routes" data-page="routes" data-i18n="nav.routes">Routes</a>
+        <a href="views" data-page="views" data-i18n="nav.views">Views</a>
+        <a href="logs" data-page="logs" data-i18n="nav.logs">Logs</a>
+        <a href="system" data-page="system" data-i18n="nav.system">System</a>
+      </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="chip" id="sse-status" hidden>—</span>
+      <span id="language"></span>
+      <label class="check">
+        <input type="checkbox" id="auto" checked />
+        <span data-i18n="shell.live">live</span>
+      </label>
+      <button id="refresh" data-i18n="shell.refresh">Refresh</button>
+      <button id="logout" data-i18n="shell.signOut">Sign out</button>
+    </header>
+    <main>
+      <!-- Overview -->
+      <div class="page" id="page-overview" data-page="overview">
+        <div class="cards">
+          <div class="card">
+            <div class="label" data-i18n="card.htmlEntries">HTML entries</div>
+            <div class="value" id="html-size">—</div>
+            <div class="sub" id="html-sub">—</div>
+          </div>
+          <div class="card">
+            <div class="label" data-i18n="card.htmlMemory">HTML in memory</div>
+            <div class="value" id="html-bytes">—</div>
+            <div class="sub" id="html-stale">—</div>
+          </div>
+          <div class="card">
+            <div class="label" data-i18n="card.dataEntries">Data entries</div>
+            <div class="value" id="data-size">—</div>
+            <div class="sub" id="data-sub">—</div>
+          </div>
+          <div class="card">
+            <div class="label" data-i18n="card.sharedTier">Shared tier</div>
+            <div class="value" id="redis-state">—</div>
+            <div class="sub" id="redis-sub">—</div>
+          </div>
+          <div class="card">
+            <div class="label" data-i18n="card.prewarm">Prewarm</div>
+            <div class="value" id="prewarm-state">—</div>
+            <div class="sub" id="prewarm-sub">—</div>
+          </div>
+        </div>
+        <section>
+          <h2>
+            <span data-i18n="upstream.section">Upstream</span>
+            <span class="count" id="upstream-heading">—</span>
+          </h2>
+          <div class="body">
+            <div class="scroll">
+              <table>
+                <thead>
+                  <tr>
+                    <th data-i18n="upstream.host">Host</th>
+                    <th data-i18n="upstream.rate">Rate</th>
+                    <th data-i18n="upstream.state">State</th>
+                  </tr>
+                </thead>
+                <tbody id="upstream-tbody"></tbody>
+              </table>
+              <div class="empty" id="upstream-empty" data-i18n="upstream.empty" hidden>
+                No upstream hosts tracked.
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+      <!-- Cache -->
+      <div class="page" id="page-cache" data-page="cache" hidden>
+        <section>
+          <h2>
+            <span data-i18n="redis.section">Shared tier</span>
+            <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" data-i18n="redis.inspect">Count keys in Redis</button>
+              <button class="danger" id="redis-html" data-i18n="redis.dropHtml">
+                Drop shared HTML keys
+              </button>
+              <button class="danger" id="redis-data" data-i18n="redis.dropData">
+                Drop shared data keys
+              </button>
+            </div>
+            <div class="suggest" id="redis-suggest" hidden>
+              <p class="m0">
+                <strong data-i18n="redis.suggest.title">No shared tier.</strong>
+                <span data-i18n="redis.suggest.body"></span>
+              </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" data-i18n="redis.suggest.hint"></p>
+            </div>
+          </div>
+        </section>
+        <section>
+          <h2>
+            <span data-i18n="cf.section">Cloudflare</span>
+            <span class="count" id="cf-heading">—</span>
+            <span class="tabs">
+              <button id="cf-refresh" data-i18n="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" data-i18n="cf.purgeAll">
+                  Purge everything
+                </button>
+                <button id="cf-purge-cached" data-i18n="cf.purgeCached">
+                  Purge URLs cached here
+                </button>
+                <label class="check">
+                  <input type="checkbox" id="cf-dev" />
+                  <span data-i18n="cf.devMode"></span>
+                </label>
+              </div>
+              <div class="row">
+                <select id="cf-kind">
+                  <option value="prefixes" data-i18n="cf.kind.prefixes">prefixes</option>
+                  <option value="hosts" data-i18n="cf.kind.hosts">hosts</option>
+                  <option value="tags" data-i18n="cf.kind.tags">cache tags</option>
+                </select>
+                <input
+                  class="grow"
+                  type="text"
+                  id="cf-values"
+                  spellcheck="false"
+                  data-i18n-ph="cf.values.placeholder"
+                />
+                <button class="primary" id="cf-purge-keys" data-i18n="cf.purge">Purge</button>
+              </div>
+              <div class="row">
+                <button id="cf-tiered" data-i18n="cf.toggleTiered">Toggle Tiered Cache</button>
+                <button id="cf-reserve" data-i18n="cf.toggleReserve">Toggle Cache Reserve</button>
+                <button class="danger" id="cf-reserve-clear" data-i18n="cf.clearReserve">
+                  Clear Cache Reserve
+                </button>
+              </div>
+              <div class="row">
+                <input
+                  class="grow"
+                  type="text"
+                  id="cf-path"
+                  spellcheck="false"
+                  data-i18n-ph="cf.path.placeholder"
+                />
+                <button id="cf-analytics" data-i18n="cf.queryAnalytics">Query analytics</button>
+              </div>
+              <div id="cf-report" class="report" hidden></div>
+              <p class="hint" data-i18n="cf.edgeHint"></p>
+            </div>
+            <div class="suggest" id="cf-suggest" hidden>
+              <p class="m0">
+                <strong data-i18n="cf.suggest.title">Cloudflare is not connected.</strong>
+                <span data-i18n="cf.suggest.body"></span>
+              </p>
+              <pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
+JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
+              <p class="hint m0" data-i18n-html="cf.suggest.hint"></p>
+            </div>
+          </div>
+        </section>
+        <section>
+          <h2><span data-i18n="actions.section">Actions</span></h2>
+          <div class="body">
+            <div class="row">
+              <input
+                class="grow"
+                type="text"
+                id="target"
+                spellcheck="false"
+                data-i18n-ph="actions.target.placeholder"
+              />
+              <label class="check">
+                <input type="checkbox" id="hard" />
+                <span data-i18n="actions.hard"></span>
+              </label>
+              <button class="primary" id="invalidate" data-i18n="actions.invalidate">
+                Invalidate
+              </button>
+            </div>
+            <div class="row">
+              <input
+                class="grow"
+                type="text"
+                id="prefix"
+                spellcheck="false"
+                data-i18n-ph="actions.prefix.placeholder"
+              />
+              <button class="danger" id="clear-data" data-i18n="actions.clearData">
+                Clear data cache
+              </button>
+              <button class="danger" id="clear-html" data-i18n="actions.clearHtml">
+                Clear HTML cache
+              </button>
+            </div>
+            <div class="row">
+              <button id="prewarm" data-i18n="actions.prewarm">Prewarm all paths</button>
+            </div>
+            <p class="hint" data-i18n="actions.hint"></p>
+          </div>
+        </section>
+        <section>
+          <h2>
+            <span data-i18n="entries.section">Entries</span>
+            <span class="count" id="listed">—</span>
+            <span class="tabs" role="tablist">
+              <button id="tab-html" role="tab" aria-selected="true">HTML</button>
+              <button id="tab-data" role="tab" aria-selected="false" data-i18n="tab.data">
+                Data
+              </button>
+            </span>
+          </h2>
+          <div class="body">
+            <div class="row">
+              <input
+                class="grow"
+                type="search"
+                id="search"
+                spellcheck="false"
+                data-i18n-ph="entries.search"
+              />
+            </div>
+          </div>
+          <div class="scroll">
+            <table>
+              <thead id="thead"></thead>
+              <tbody id="tbody"></tbody>
+            </table>
+            <div class="empty" id="empty" data-i18n="entries.empty" hidden>No entries.</div>
+          </div>
+        </section>
+      </div>
+      <!-- Routes -->
+      <div class="page" id="page-routes" data-page="routes" hidden>
+        <section>
+          <h2>
+            <span data-i18n="routes.section">Registered routes</span>
+            <span class="count" id="routes-count">—</span>
+          </h2>
+          <div class="scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th data-i18n="routes.method">Method</th>
+                  <th data-i18n="routes.path">Path</th>
+                  <th data-i18n="routes.lastStatus">Last status</th>
+                  <th data-i18n="routes.lastMs">Last ms</th>
+                  <th data-i18n="routes.hits">Hits</th>
+                </tr>
+              </thead>
+              <tbody id="routes-tbody"></tbody>
+            </table>
+            <div class="empty" id="routes-empty" data-i18n="routes.empty" hidden>No routes.</div>
+          </div>
+        </section>
+        <section>
+          <h2>
+            <span data-i18n="routes.modules">Route modules</span>
+            <span class="count" id="modules-count">—</span>
+          </h2>
+          <div class="scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th data-i18n="routes.file">File</th>
+                </tr>
+              </thead>
+              <tbody id="modules-tbody"></tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+      <!-- Views -->
+      <div class="page" id="page-views" data-page="views" hidden>
+        <section>
+          <h2>
+            <span data-i18n="views.section">Views</span>
+            <span class="count" id="views-count">—</span>
+          </h2>
+          <div class="body">
+            <div class="row">
+              <input
+                class="grow"
+                type="search"
+                id="views-search"
+                spellcheck="false"
+                data-i18n-ph="views.search"
+              />
+            </div>
+          </div>
+          <div class="scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th data-i18n="views.path">Path</th>
+                  <th data-i18n="views.kind">Kind</th>
+                </tr>
+              </thead>
+              <tbody id="views-tbody"></tbody>
+            </table>
+            <div class="empty" id="views-empty" data-i18n="views.empty" hidden>No views.</div>
+          </div>
+        </section>
+      </div>
+      <!-- Logs -->
+      <div class="page" id="page-logs" data-page="logs" hidden>
+        <section>
+          <h2>
+            <span data-i18n="logs.section">Live logs</span>
+            <span class="count" id="logs-count">—</span>
+          </h2>
+          <div class="body">
+            <div class="row filters">
+              <input
+                class="grow"
+                type="search"
+                id="logs-q"
+                spellcheck="false"
+                data-i18n-ph="logs.search"
+              />
+              <select id="logs-kind">
+                <option value="" data-i18n="logs.kind.all">all kinds</option>
+                <option value="http">http</option>
+                <option value="event">event</option>
+                <option value="warn">warn</option>
+                <option value="error">error</option>
+              </select>
+              <select id="logs-method">
+                <option value="" data-i18n="logs.method.all">all methods</option>
+                <option value="GET">GET</option>
+                <option value="POST">POST</option>
+                <option value="PUT">PUT</option>
+                <option value="PATCH">PATCH</option>
+                <option value="DELETE">DELETE</option>
+              </select>
+              <select id="logs-status">
+                <option value="" data-i18n="logs.status.all">all status</option>
+                <option value="2">2xx</option>
+                <option value="3">3xx</option>
+                <option value="4">4xx</option>
+                <option value="5">5xx</option>
+              </select>
+              <select id="logs-cache">
+                <option value="" data-i18n="logs.cache.all">all cache</option>
+                <option value="HIT">HIT</option>
+                <option value="STALE">STALE</option>
+                <option value="MISS">MISS</option>
+              </select>
+              <input
+                type="text"
+                id="logs-path"
+                spellcheck="false"
+                data-i18n-ph="logs.path"
+                style="min-width: 8rem"
+              />
+              <label class="check">
+                <input type="checkbox" id="logs-pause" />
+                <span data-i18n="logs.pause">pause</span>
+              </label>
+              <button id="logs-clear" data-i18n="logs.clear">Clear view</button>
+            </div>
+          </div>
+          <div class="scroll log-scroll">
+            <pre id="logs-list" class="log-list"></pre>
+            <div class="empty" id="logs-empty" data-i18n="logs.empty" hidden>No log lines.</div>
+          </div>
+        </section>
+      </div>
+      <!-- System -->
+      <div class="page" id="page-system" data-page="system" hidden>
+        <section>
+          <h2>
+            <span data-i18n="host.section">Host</span>
+            <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>
+                <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 data-i18n="host.disk">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>
+      </div>
+    </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 data-i18n="footer.panel">Admin panel</span>
+        <span class="dot" aria-hidden="true">·</span>
+        <span class="live">
+          <span class="pulse"></span>
+          <span data-i18n="footer.rotates">Password rotates on restart</span>
+        </span>
+      </div>
+    </footer>
+    <div id="toast"></div>
+    <script type="module" src="panel.js"></script>
+  </body>
+</html>