Upload health-server.js with huggingface_hub

health-server.js

@@ -446,115 +446,48 @@ function valueOrUnset(value, fallback = "Not set") {
 }
 
 function renderTile({
-  title,
-  value,
-  detail = "",
-  tone = "neutral",
-  meta = "",
+  title, value, detail = "", tone = "neutral", meta = "",
 }) {
-  return `<article class="tile ${tone}">
-    <div class="tile-head">
-      <span class="tile-title">${escapeHtml(title)}</span>
-      <span class="tile-dot"></span>
+  const dotColors = { ok: "var(--good)", warn: "var(--warn)", off: "var(--bad)", neutral: "var(--line)" };
+  const glowColors = { ok: "rgba(34,197,94,.18)", warn: "rgba(245,197,66,.18)", off: "rgba(251,113,133,.18)", neutral: "transparent" };
+  return `<article class="tile tile--${tone}">
+    <div class="tile__header">
+      <span class="tile__label">${escapeHtml(title)}</span>
+      <span class="tile__dot" style="background:${dotColors[tone]};box-shadow:0 0 6px ${glowColors[tone]}"></span>
     </div>
-    <div class="tile-value">${value}</div>
-    ${detail ? `<div class="tile-detail">${detail}</div>` : ""}
-    ${meta ? `<div class="tile-meta">${meta}</div>` : ""}
+    <div class="tile__value">${value}</div>
+    ${detail ? `<div class="tile__detail">${detail}</div>` : ""}
+    ${meta ? `<div class="tile__meta">${meta}</div>` : ""}
   </article>`;
 }
 
 function renderDashboard(data) {
   const syncStatus = String(data.backup?.status || "unknown");
-  const syncTone = ["success", "restored", "synced", "configured"].includes(
-    syncStatus,
-  )
-    ? "ok"
-    : syncStatus === "disabled"
-      ? "warn"
-      : "neutral";
+  const syncTone = ["success", "restored", "synced", "configured"].includes(syncStatus) ? "ok"
+    : syncStatus === "disabled" ? "warn" : "neutral";
   const telegramTone = data.telegram.configured
-    ? data.telegram.webhookListening || !data.telegram.webhook
-      ? "ok"
-      : "warn"
-    : "warn";
+    ? (data.telegram.webhookListening || !data.telegram.webhook ? "ok" : "warn") : "warn";
   const keepaliveConfigured = data.keepalive?.configured === true;
-  const keepaliveStatus = String(
-    data.keepalive?.status ||
-      (process.env.CLOUDFLARE_WORKERS_TOKEN ? "pending" : "not configured"),
-  );
-  const keepAliveTone = keepaliveConfigured
-    ? "ok"
-    : process.env.CLOUDFLARE_WORKERS_TOKEN
-      ? "warn"
-      : "neutral";
+  const keepaliveStatus = String(data.keepalive?.status || (process.env.CLOUDFLARE_WORKERS_TOKEN ? "pending" : "not configured"));
+  const keepAliveTone = keepaliveConfigured ? "ok" : process.env.CLOUDFLARE_WORKERS_TOKEN ? "warn" : "neutral";
   const telegramDetail = data.telegram.configured
-    ? `${data.telegram.webhook ? "Webhook" : "Polling"}${data.telegram.proxy ? " via CF proxy" : ""}`
+    ? `${data.telegram.webhook ? "Webhook" : "Polling"}${data.telegram.proxy ? " · via CF proxy" : ""}`
     : "Not configured";
-  const backupDetail = data.backup?.message
-    ? escapeHtml(data.backup.message)
-    : "No status yet";
+  const backupDetail = data.backup?.message ? escapeHtml(data.backup.message) : "No status yet";
   const keepAliveDetail = keepaliveConfigured
     ? `Pinging <code>${escapeHtml(data.keepalive.targetUrl || "/health")}</code>`
     : keepaliveStatus === "error" && data.keepalive?.message
       ? escapeHtml(data.keepalive.message)
-      : process.env.CLOUDFLARE_WORKERS_TOKEN
-        ? "Worker pending or failed"
-        : "Not configured";
-  const serviceOk = data.gateway && data.dashboard;
+      : process.env.CLOUDFLARE_WORKERS_TOKEN ? "Worker pending or failed" : "Not configured";
 
   const tiles = [
-    renderTile({
-      title: "Gateway",
-      value: toneBadge(
-        data.gateway ? "Online" : "Offline",
-        data.gateway ? "ok" : "off",
-      ),
-      detail: data.gateway
-        ? `API on port ${data.ports.gateway}`
-        : `Unreachable`,
-      tone: data.gateway ? "ok" : "off",
-      meta: data.authConfigured ? "Protected" : "Unprotected",
-    }),
-    renderTile({
-      title: "Model",
-      value: `<code>${valueOrUnset(data.model)}</code>`,
-      detail: `Provider: ${valueOrUnset(data.provider || "auto")}`,
-      tone: data.model ? "ok" : "warn",
-    }),
-    renderTile({
-      title: "Runtime",
-      value: escapeHtml(data.uptime),
-      detail: `Port ${data.ports.public}`,
-      tone: "neutral",
-    }),
-    renderTile({
-      title: "Telegram",
-      value: toneBadge(
-        data.telegram.configured ? "Configured" : "Disabled",
-        telegramTone,
-      ),
-      detail: telegramDetail,
-      tone: telegramTone,
-    }),
-    renderTile({
-      title: "Backup",
-      value: toneBadge(syncStatus.toUpperCase(), syncTone),
-      detail: backupDetail,
-      tone: syncTone,
-      meta: data.backup?.timestamp
-        ? `<span class="local-time" data-iso="${data.backup.timestamp}"></span>`
-        : "",
-    }),
-    renderTile({
-      title: "Keep Awake",
-      value: toneBadge(
-        keepaliveConfigured ? "CF Cron" : keepaliveStatus.toUpperCase(),
-        keepAliveTone,
-      ),
-      detail: keepAliveDetail,
-      tone: keepAliveTone,
-    }),
-  ].join("");
+    { title: "Gateway", value: toneBadge(data.gateway ? "Online" : "Offline", data.gateway ? "ok" : "off"), detail: data.gateway ? `API on port ${data.ports.gateway}` : "Unreachable", tone: data.gateway ? "ok" : "off", meta: data.authConfigured ? "Protected" : "Unprotected" },
+    { title: "Model", value: `<code>${valueOrUnset(data.model)}</code>`, detail: `Provider: ${valueOrUnset(data.provider || "auto")}`, tone: data.model ? "ok" : "warn" },
+    { title: "Runtime", value: escapeHtml(data.uptime), detail: `Port ${data.ports.public}`, tone: "neutral" },
+    { title: "Telegram", value: toneBadge(data.telegram.configured ? "Active" : "Disabled", telegramTone), detail: telegramDetail, tone: telegramTone },
+    { title: "Backup", value: toneBadge(syncStatus.toUpperCase(), syncTone), detail: backupDetail, tone: syncTone, meta: data.backup?.timestamp ? `<span class="local-time" data-iso="${data.backup.timestamp}"></span>` : "" },
+    { title: "Keep Awake", value: toneBadge(keepaliveConfigured ? "CF Cron" : keepaliveStatus.toUpperCase(), keepAliveTone), detail: keepAliveDetail, tone: keepAliveTone },
+  ].map(renderTile).join("");
 
   return `<!doctype html>
 <html lang="en">
@@ -562,72 +495,320 @@ function renderDashboard(data) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>HuggingMes</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <style>
-    :root { color-scheme: dark; --bg:#08080f; --panel:#12111b; --panel2:#151421; --line:#26243a; --text:#f6f4ff; --muted:#7f7a9e; --soft:#b8b3d7; --good:#22c55e; --warn:#f5c542; --bad:#fb7185; --accent:#6557df; --accent2:#7c6cf2; }
-    * { box-sizing:border-box; }
-    body { margin:0; min-height:100vh; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); font-size:13px; }
-    main { width:min(720px, calc(100% - 32px)); margin:0 auto; padding:36px 0 44px; }
-    header { text-align:center; margin-bottom:22px; }
-    h1 { margin:0; font-size:1.65rem; line-height:1; letter-spacing:0; }
-    .subtitle { margin-top:12px; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
-    .hero-buttons { display:flex; gap:10px; margin:24px 0 20px; }
-    .hero-action { display:flex; flex:1; min-height:46px; align-items:center; justify-content:center; border-radius:8px; background:#ffffff; color:#000000; text-decoration:none; font-weight:850; font-size:.98rem; transition:background 0.15s ease; }
-    .hero-action:hover { background:#e5e5e5; }
-    .hero-action.secondary { background:var(--panel); color:var(--text); border:1px solid var(--line); }
-    .hero-action.secondary:hover { background:var(--panel2); }
-    .overview { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:10px; }
-    .tile { border:1px solid var(--line); background:var(--panel); border-radius:11px; padding:18px; min-height:124px; display:flex; flex-direction:column; gap:10px; position:relative; }
-    .tile.ok { border-color:rgba(34,197,94,.22); }
-    .tile.warn { border-color:rgba(245,197,66,.24); }
-    .tile.off { border-color:rgba(251,113,133,.28); }
-    .tile-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
-    .tile-title { color:var(--muted); font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; font-weight:850; }
-    .tile-dot { width:7px; height:7px; border-radius:50%; background:var(--line); }
-    .tile.ok .tile-dot { background:var(--good); }
-    .tile.warn .tile-dot { background:var(--warn); }
-    .tile.off .tile-dot { background:var(--bad); }
-    .tile-value { font-size:1.12rem; font-weight:850; overflow-wrap:anywhere; }
-    .tile-detail { color:var(--soft); line-height:1.45; font-size:.83rem; }
-    .tile-meta { color:var(--muted); line-height:1.4; font-size:.75rem; margin-top:auto; overflow-wrap:anywhere; }
-
-    code { background:#232234; border:1px solid #34324c; border-radius:6px; padding:2px 6px; color:var(--text); font-size:.9em; }
-    pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; background:#0d0d0d; border:1px solid var(--line); border-radius:7px; padding:10px; color:var(--soft); font-size:.82rem; line-height:1.45; }
-    .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
-    .badge { display:inline-flex; align-items:center; width:max-content; border:1px solid var(--line); border-radius:999px; padding:5px 10px; font-size:.72rem; font-weight:850; line-height:1; text-transform:uppercase; }
-    .badge.ok { color:var(--good); border-color:rgba(34,197,94,.34); background:rgba(34,197,94,.11); }
-    .badge.warn { color:var(--warn); border-color:rgba(245,197,66,.34); background:rgba(245,197,66,.11); }
-    .badge.off { color:var(--bad); border-color:rgba(251,113,133,.34); background:rgba(251,113,133,.11); }
-    .badge.neutral { color:var(--soft); }
-    .muted { color:var(--muted); }
-    .button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border-radius:8px; color:#fff; background:var(--accent); text-decoration:none; font-weight:850; font-size:.9rem; }
-    .button.secondary { color:var(--text); background:#242424; border:1px solid var(--line); }
-    footer { color:var(--muted); text-align:center; font-size:.74rem; margin-top:18px; }
-    footer .live { color:var(--good); }
-    @media (max-width: 700px) { .overview { grid-template-columns:1fr; } main { width:min(100% - 22px, 720px); padding-top:28px; } }
+    :root {
+      --bg: #06060c;
+      --surface: rgba(255,255,255,0.03);
+      --surface2: rgba(255,255,255,0.05);
+      --border: rgba(255,255,255,0.08);
+      --border2: rgba(255,255,255,0.14);
+      --text: #f0f2ff;
+      --muted: #6b7280;
+      --soft: #9ca3af;
+      --good: #34d399;
+      --warn: #fbbf24;
+      --bad: #f87171;
+      --accent: #818cf8;
+      --accent-glow: rgba(129,140,248,.25);
+      --r: 16px;
+      --r2: 10px;
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html { scroll-behavior: smooth; }
+    body {
+      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+    }
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background:
+        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(99,102,241,.12) 0%, transparent 60%),
+        radial-gradient(ellipse 50% 40% at 80% 110%, rgba(129,140,248,.06) 0%, transparent 50%);
+      pointer-events: none;
+      z-index: 0;
+    }
+    main {
+      position: relative;
+      z-index: 1;
+      max-width: 860px;
+      margin: 0 auto;
+      padding: 64px 24px 80px;
+    }
+    /* ── Hero ── */
+    .hero { text-align: center; margin-bottom: 48px; }
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      background: rgba(129,140,248,.1);
+      border: 1px solid rgba(129,140,248,.25);
+      border-radius: 999px;
+      padding: 6px 14px;
+      font-size: .72rem;
+      font-weight: 600;
+      color: var(--accent);
+      letter-spacing: .04em;
+      text-transform: uppercase;
+      margin-bottom: 20px;
+    }
+    .pulse-dot {
+      width: 7px; height: 7px; border-radius: 50%;
+      background: var(--good);
+      box-shadow: 0 0 0 0 rgba(52,211,153,.4);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(52,211,153,.4); }
+      70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
+      100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
+    }
+    h1 {
+      font-size: clamp(2.2rem, 6vw, 3.2rem);
+      font-weight: 800;
+      letter-spacing: -.04em;
+      line-height: 1.05;
+      background: linear-gradient(135deg, #f0f2ff 30%, #818cf8 70%, #c084fc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 12px;
+    }
+    .subtitle {
+      font-size: 1rem;
+      color: var(--muted);
+      font-weight: 400;
+      line-height: 1.5;
+      max-width: 480px;
+      margin: 0 auto 28px;
+    }
+    /* ── CTA buttons ── */
+    .cta-row {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-bottom: 56px;
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 11px 22px;
+      border-radius: var(--r2);
+      font-weight: 600;
+      font-size: .88rem;
+      text-decoration: none;
+      transition: all .2s cubic-bezier(.4,0,.2,1);
+      cursor: pointer;
+      border: none;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, #6366f1, #818cf8);
+      color: #fff;
+      box-shadow: 0 4px 20px rgba(99,102,241,.35);
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(99,102,241,.45);
+    }
+    .btn-secondary {
+      background: var(--surface2);
+      color: var(--text);
+      border: 1px solid var(--border2);
+      backdrop-filter: blur(8px);
+    }
+    .btn-secondary:hover {
+      background: rgba(255,255,255,.08);
+      border-color: rgba(255,255,255,.2);
+      transform: translateY(-1px);
+    }
+    /* ── Divider ── */
+    .divider {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .divider-line {
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--border), transparent);
+    }
+    .divider-label {
+      font-size: .7rem;
+      font-weight: 600;
+      letter-spacing: .12em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+    /* ── Stats row ── */
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-bottom: 32px;
+    }
+    .stat {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      padding: 18px 16px;
+      text-align: center;
+      backdrop-filter: blur(10px);
+    }
+    .stat__val {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: var(--text);
+      margin-bottom: 4px;
+    }
+    .stat__lab {
+      font-size: .68rem;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: .1em;
+      font-weight: 600;
+    }
+    /* ── Tiles grid ── */
+    .tiles {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 12px;
+      margin-bottom: 32px;
+    }
+    .tile {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      position: relative;
+      overflow: hidden;
+      backdrop-filter: blur(10px);
+      transition: border-color .2s, box-shadow .2s, transform .2s;
+    }
+    .tile::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
+    }
+    .tile--ok { border-color: rgba(52,211,153,.2); }
+    .tile--ok:hover { box-shadow: 0 0 20px rgba(52,211,153,.08); }
+    .tile--warn { border-color: rgba(251,191,36,.2); }
+    .tile--warn:hover { box-shadow: 0 0 20px rgba(251,191,36,.08); }
+    .tile--off { border-color: rgba(248,113,113,.2); }
+    .tile--off:hover { box-shadow: 0 0 20px rgba(248,113,113,.08); }
+    .tile:hover { transform: translateY(-2px); border-color: var(--border2); }
+    .tile__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .tile__label {
+      font-size: .66rem;
+      font-weight: 700;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+    .tile__dot {
+      width: 8px; height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      transition: box-shadow .3s;
+    }
+    .tile__value { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
+    .tile__detail { color: var(--soft); font-size: .8rem; line-height: 1.45; }
+    .tile__meta { color: var(--muted); font-size: .72rem; margin-top: auto; padding-top: 4px; }
+    code {
+      background: rgba(255,255,255,.06);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 2px 7px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: .88em;
+      color: var(--text);
+    }
+    /* ── Badges ── */
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      padding: 3px 10px;
+      font-size: .7rem;
+      font-weight: 700;
+      letter-spacing: .04em;
+      text-transform: uppercase;
+    }
+    .badge.ok { color: var(--good); background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.25); }
+    .badge.warn { color: var(--warn); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); }
+    .badge.off { color: var(--bad); background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.25); }
+    .badge.neutral { color: var(--soft); background: rgba(255,255,255,.05); border: 1px solid var(--border); }
+    .muted { color: var(--muted); font-style: italic; }
+    /* ── Footer ── */
+    footer {
+      text-align: center;
+      padding-top: 32px;
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: .78rem;
+    }
+    footer a { color: var(--accent); text-decoration: none; }
+    footer a:hover { text-decoration: underline; }
+    /* ── Responsive ── */
+    @media (max-width: 600px) {
+      main { padding: 40px 16px 60px; }
+      .stats-row { grid-template-columns: 1fr; }
+      h1 { font-size: 2rem; }
+    }
   </style>
 </head>
 <body>
   <main>
-    <header>
+    <header class="hero">
+      <div class="hero-badge">
+        <span class="pulse-dot"></span>
+        Self-hosted · 24/7
+      </div>
       <h1>HuggingMes</h1>
-      <div class="subtitle">Self-hosted - Hermes Agent</div>
+      <p class="subtitle">Self-hosted Hermes Agent gateway on Hugging Face Spaces. Chat, tools, memory — always on.</p>
+      <div class="cta-row">
+        <a class="btn btn-primary" data-space-link="app" href="${APP_BASE}/">Open Hermes Agent →</a>
+        <a class="btn btn-secondary" data-space-link="terminal" href="/terminal/">💻 Terminal</a>
+        <a class="btn btn-secondary" data-space-link="env-builder" href="/env-builder">⚙️ ENV Builder</a>
+      </div>
     </header>
-    <div class="hero-buttons">
-      <a class="hero-action" data-space-link="app" href="${APP_BASE}/">Open Hermes Agent →</a>
-      <a class="hero-action secondary" data-space-link="terminal" href="/terminal/">💻 Open Terminal →</a>
-      <a class="hero-action secondary" data-space-link="env-builder" href="/env-builder">⚙️ ENV Builder →</a>
+
+    <div class="divider">
+      <div class="divider-line"></div>
+      <span class="divider-label">System Status</span>
+      <div class="divider-line"></div>
     </div>
-    <section class="overview">
-      ${tiles}
-    </section>
-    <footer>Built by <a href="https://github.com/somratpro" target="_blank" rel="noopener noreferrer" style="color: var(--accent); text-decoration: none;">@somratpro</a></footer>
+
+    <div class="tiles">${tiles}</div>
+
+    <footer>
+      Built by <a href="https://github.com/somratpro" target="_blank">@somratpro</a> ·
+      <a href="https://github.com/NousResearch/hermes-agent" target="_blank">Hermes Agent</a>
+    </footer>
   </main>
   <script>
     document.querySelectorAll('.local-time').forEach(el => {
-      const date = new Date(el.getAttribute('data-iso'));
-      if (!isNaN(date)) {
-        el.textContent = 'At ' + date.toLocaleTimeString();
-      }
+      const d = new Date(el.getAttribute('data-iso'));
+      if (!isNaN(d)) el.textContent = 'At ' + d.toLocaleTimeString();
     });
     const inEmbeddedApp = (() => { try { return window.top !== window.self; } catch { return true; } })();
     const isDirectHfSpaceHost = /\.hf\.space$/i.test(window.location.hostname);
@@ -635,12 +816,11 @@ function renderDashboard(data) {
     const SPACE_IS_PRIVATE = ${JSON.stringify(SPACE_IS_PRIVATE)};
     if (SPACE_IS_PRIVATE && isDirectHfSpaceHost && !inEmbeddedApp && HF_SPACE_URL) {
       const notice = document.createElement('div');
-      notice.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#08080f;color:#f6f4ff;font-family:sans-serif;flex-direction:column;gap:16px;z-index:9999';
-      notice.innerHTML = '<span style="font-size:1.1rem">🔒 Private Space &mdash; Redirecting&hellip;</span><a href="' + HF_SPACE_URL + '" style="color:#a5b4fc;font-size:.85rem">Click here if not redirected</a>';
+      notice.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#06060c;color:#f0f2ff;font-family:sans-serif;flex-direction:column;gap:16px;z-index:9999';
+      notice.innerHTML = '<span style="font-size:1.1rem">🔒 Private Space &mdash; Redirecting&hellip;</span><a href="' + HF_SPACE_URL + '" style="color:#818cf8;font-size:.85rem">Click here if not redirected</a>';
       document.body.appendChild(notice);
       setTimeout(() => { window.location.replace(HF_SPACE_URL); }, 300);
     }
-    // Force new-tab navigation when running inside the HF App iframe or on a raw .hf.space link
     const openInNewTab = inEmbeddedApp || isDirectHfSpaceHost;
     document.querySelectorAll('a[data-space-link]').forEach((a) => {
       if (openInNewTab) {