feat: add admin-only status page with cache stats

- New /api/dashboard/status endpoint (admin-only, 403 for non-admins)
- Returns server info (uptime, Node version, memory usage)
- Returns polling mode and interval
- Returns cache stats: entry count, total size, per-key breakdown
  with item count, size in KB, and TTL remaining
- Status button in admin controls header
- Collapsible status panel with grid layout
- Responsive: single column on mobile

public/app.js

@@ -21,6 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('logout-btn').addEventListener('click', handleLogout);
   document.getElementById('refresh-rate').addEventListener('change', handleRefreshRateChange);
   document.getElementById('show-all-toggle').addEventListener('change', handleShowAllToggle);
+  document.getElementById('status-btn').addEventListener('click', toggleStatusPanel);
 });
 
 function initThemeSwitcher() {
@@ -568,6 +569,68 @@ function escapeHtml(str) {
   return div.innerHTML;
 }
 
+async function toggleStatusPanel() {
+  const panel = document.getElementById('status-panel');
+  if (panel.style.display !== 'none') {
+    panel.style.display = 'none';
+    return;
+  }
+  panel.style.display = 'block';
+  panel.innerHTML = '<p class="status-loading">Loading status…</p>';
+  try {
+    const res = await fetch('/api/dashboard/status');
+    if (!res.ok) throw new Error('Failed to fetch status');
+    const data = await res.json();
+    renderStatusPanel(data, panel);
+  } catch (err) {
+    panel.innerHTML = '<p class="status-error">Failed to load status.</p>';
+  }
+}
+
+function renderStatusPanel(data, panel) {
+  const s = data.server;
+  const hrs = Math.floor(s.uptimeSeconds / 3600);
+  const mins = Math.floor((s.uptimeSeconds % 3600) / 60);
+  const secs = s.uptimeSeconds % 60;
+  const uptime = `${hrs}h ${mins}m ${secs}s`;
+
+  const totalKB = (data.cache.totalSizeBytes / 1024).toFixed(1);
+
+  let html = `
+    <div class="status-header">
+      <h3>Server Status</h3>
+      <button class="status-close" onclick="document.getElementById('status-panel').style.display='none'">&times;</button>
+    </div>
+    <div class="status-grid">
+      <div class="status-card">
+        <div class="status-card-title">Server</div>
+        <div class="status-row"><span>Uptime</span><span>${uptime}</span></div>
+        <div class="status-row"><span>Node</span><span>${escapeHtml(s.nodeVersion)}</span></div>
+        <div class="status-row"><span>Memory (RSS)</span><span>${s.memoryUsageMB} MB</span></div>
+        <div class="status-row"><span>Heap</span><span>${s.heapUsedMB} / ${s.heapTotalMB} MB</span></div>
+      </div>
+      <div class="status-card">
+        <div class="status-card-title">Polling</div>
+        <div class="status-row"><span>Mode</span><span>${data.polling.enabled ? 'Background' : 'On-demand'}</span></div>
+        ${data.polling.enabled ? `<div class="status-row"><span>Interval</span><span>${data.polling.intervalMs / 1000}s</span></div>` : ''}
+      </div>
+      <div class="status-card status-card-wide">
+        <div class="status-card-title">Cache (${data.cache.entryCount} entries, ${totalKB} KB)</div>
+        <table class="status-table">
+          <thead><tr><th>Key</th><th>Items</th><th>Size</th><th>TTL</th></tr></thead>
+          <tbody>`;
+
+  for (const e of data.cache.entries) {
+    const sizeStr = e.sizeBytes > 1024 ? (e.sizeBytes / 1024).toFixed(1) + ' KB' : e.sizeBytes + ' B';
+    const ttlStr = e.expired ? '<span class="status-expired">expired</span>' : (e.ttlRemainingMs / 1000).toFixed(0) + 's';
+    const items = e.itemCount !== null ? e.itemCount : '—';
+    html += `<tr><td><code>${escapeHtml(e.key)}</code></td><td>${items}</td><td>${sizeStr}</td><td>${ttlStr}</td></tr>`;
+  }
+
+  html += `</tbody></table></div></div>`;
+  panel.innerHTML = html;
+}
+
 function formatSize(size) {
   if (!size) return 'N/A';
   // If already a formatted string (e.g., "21.5 GB"), return as-is

public/index.html

@@ -57,6 +57,7 @@
                             <input type="checkbox" id="show-all-toggle">
                             <span>Show all users</span>
                         </label>
+                        <button id="status-btn" class="status-btn">Status</button>
                     </div>
                     <div class="user-info">
                         <span class="user-label">Current User:</span>
@@ -66,6 +67,8 @@
                 </div>
             </header>
 
+            <div id="status-panel" class="status-panel" style="display: none;"></div>
+
             <div id="error-message" class="error-message" style="display: none;"></div>
 
             <div id="loading" class="loading" style="display: none;">Loading downloads...</div>

public/style.css

@@ -731,6 +731,148 @@ body {
   margin-left: auto;
 }
 
+/* ===== Status Button ===== */
+.status-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: background 0.2s, color 0.2s;
+}
+
+.status-btn:hover {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+/* ===== Status Panel ===== */
+.status-panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px var(--shadow);
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.status-header h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.1rem;
+}
+
+.status-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.status-close:hover {
+  color: var(--text-primary);
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.status-card {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.status-card-wide {
+  grid-column: 1 / -1;
+}
+
+.status-card-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 3px 0;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.status-row span:last-child {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.status-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+}
+
+.status-table th {
+  text-align: left;
+  padding: 4px 8px;
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  border-bottom: 1px solid var(--border);
+}
+
+.status-table td {
+  padding: 5px 8px;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
+}
+
+.status-table code {
+  font-size: 0.75rem;
+  background: var(--surface);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.status-expired {
+  color: #c62828;
+  font-weight: 600;
+  font-size: 0.7rem;
+}
+
+.status-loading, .status-error {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.status-error {
+  color: #c62828;
+}
+
 /* ===== Mobile ===== */
 @media (max-width: 768px) {
   .app-header {
@@ -760,4 +902,8 @@ body {
   .progress-container {
     flex-wrap: wrap;
   }
+
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
 }