Fix auth session expiry with shared auto-refresh client for admin panels.

Sessions no longer die after 15 minutes because both SPAs store refresh tokens and retry on 401; also fixes superadmin health/announce APIs and production security headers.

.env.example

@@ -15,7 +15,7 @@ SAAS_CDN_URL=https://cdn.authorbot.io
 # Generate: python -c "import secrets; print(secrets.token_hex(32))"
 SECRET_KEY=REPLACE_WITH_64_CHAR_HEX_STRING
 ALGORITHM=HS256
-ACCESS_TOKEN_EXPIRE_MINUTES=30
+ACCESS_TOKEN_EXPIRE_MINUTES=480
 REFRESH_TOKEN_EXPIRE_DAYS=7
 
 # HMAC secret for subscription tokens (min 32 chars)

app/admin/templates/admin.html

@@ -8,6 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+  <script src="/static/auth-client.js"></script>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -818,8 +819,14 @@
 <script>
 /* ── GLOBALS ── */
 const API = window.location.origin + '/api';
-let token = localStorage.getItem('access_token');
-let authorSlug = localStorage.getItem('author_slug');
+const auth = new AuthorBotAuthClient({
+  apiBase: API,
+  accessKey: 'access_token',
+  refreshKey: 'refresh_token',
+  slugKey: 'author_slug',
+});
+let token = auth.getAccessToken();
+let authorSlug = auth.getAuthorSlug();
 let allBooks = [];
 let allSessions = [];
 let chartInstances = {};
@@ -843,13 +850,14 @@ function showModal(title, body, actions = '') {
 function closeModal() { document.getElementById('modal-overlay').classList.remove('active'); }
 document.getElementById('modal-overlay').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal(); });
 
-/* ── AUTH — validate stored token ── */
-if (token) {
-  fetch(API + '/auth/me', { headers: { Authorization: 'Bearer ' + token } })
-    .then(r => { if (r.ok) return r.json(); throw new Error('expired'); })
-    .then(() => showDashboard())
-    .catch(() => { localStorage.clear(); token = null; toast('Session expired — please sign in again', 'info'); });
-}
+/* ── AUTH ── */
+auth.restoreSession().then(function (ok) {
+  if (ok) {
+    token = auth.getAccessToken();
+    authorSlug = auth.getAuthorSlug();
+    showDashboard();
+  }
+});
 
 document.getElementById('login-btn').onclick = async () => {
   const msg = document.getElementById('login-msg');
@@ -857,19 +865,13 @@ document.getElementById('login-btn').onclick = async () => {
   const btn = document.getElementById('login-btn');
   btn.disabled = true; btn.textContent = 'Signing in...';
   try {
-    const res = await fetch(API + '/auth/login', {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email: document.getElementById('email').value, password: document.getElementById('password').value }),
-    });
-    const data = await res.json();
-    if (!res.ok) {
-      const detail = Array.isArray(data.detail) ? data.detail.map(e => e.msg || JSON.stringify(e)).join(', ') : (data.detail || 'Login failed');
-      throw new Error(detail);
-    }
-    token = data.access_token;
-    localStorage.setItem('access_token', token);
-    localStorage.setItem('author_slug', data.author_slug || 'me');
-    authorSlug = data.author_slug || 'me';
+    const data = await auth.login(
+      document.getElementById('email').value,
+      document.getElementById('password').value
+    );
+    token = auth.getAccessToken();
+    authorSlug = data.author_slug || auth.getAuthorSlug() || 'me';
+    if (authorSlug) localStorage.setItem('author_slug', authorSlug);
     toast('Welcome back!', 'success');
     showDashboard();
   } catch (e) {
@@ -879,7 +881,7 @@ document.getElementById('login-btn').onclick = async () => {
 
 ['email', 'password'].forEach(id => document.getElementById(id).addEventListener('keydown', e => { if (e.key === 'Enter') document.getElementById('login-btn').click(); }));
 
-document.getElementById('logout-btn').onclick = () => { localStorage.clear(); location.reload(); };
+document.getElementById('logout-btn').onclick = () => { auth.clearSession(); location.reload(); };
 
 function showDashboard() {
   document.getElementById('auth-screen').style.display = 'none';
@@ -902,39 +904,25 @@ function nav(page) {
 }
 document.querySelectorAll('.nav-item[data-page]').forEach(el => { el.onclick = () => nav(el.dataset.page); });
 
-/* ── API HELPERS ── */
+/* ── API HELPERS (auto-refresh on 401) ── */
 async function apiGet(path) {
-  const res = await fetch(API + path, { headers: { Authorization: 'Bearer ' + token } });
-  if (res.status === 401) { localStorage.clear(); location.reload(); return; }
-  const text = await res.text();
-  let data;
-  try { data = JSON.parse(text); } catch { data = {}; }
-  if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);
+  const data = await auth.get(path);
+  token = auth.getAccessToken();
   return data;
 }
 async function apiPost(path, body) {
-  const res = await fetch(API + path, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify(body) });
-  if (res.status === 401) { localStorage.clear(); location.reload(); return; }
-  const text = await res.text();
-  let data;
-  try { data = JSON.parse(text); } catch { data = {}; }
-  if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);
+  const data = await auth.post(path, body);
+  token = auth.getAccessToken();
   return data;
 }
 async function apiPut(path, body) {
-  const res = await fetch(API + path, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify(body) });
-  const text = await res.text();
-  let data;
-  try { data = JSON.parse(text); } catch { data = {}; }
-  if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);
+  const data = await auth.put(path, body);
+  token = auth.getAccessToken();
   return data;
 }
 async function apiDelete(path) {
-  const res = await fetch(API + path, { method: 'DELETE', headers: { Authorization: 'Bearer ' + token } });
-  const text = await res.text();
-  let data;
-  try { data = JSON.parse(text); } catch { data = {}; }
-  if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);
+  const data = await auth.delete(path);
+  token = auth.getAccessToken();
   return data;
 }
 
@@ -1046,9 +1034,7 @@ async function uploadCover(bookId, input) {
   const fd = new FormData();
   fd.append('file', file);
   try {
-    const res = await fetch(API + `/admin/${authorSlug}/books/${bookId}/cover`, {
-      method: 'POST', headers: { Authorization: 'Bearer ' + token }, body: fd
-    });
+    const res = await auth.upload(`/admin/${authorSlug}/books/${bookId}/cover`, fd);
     const data = await res.json();
     if (!res.ok) throw new Error(data.detail || 'Upload failed');
     toast('Cover uploaded!', 'success');
@@ -1102,7 +1088,7 @@ document.getElementById('upload-btn').onclick = async () => {
   fd.append('price', document.getElementById('book-price').value || '0');
   fd.append('buy_url', document.getElementById('book-buy-url').value);
   try {
-    const res = await fetch(API + `/admin/${authorSlug}/books/upload`, { method: 'POST', headers: { Authorization: 'Bearer ' + token }, body: fd });
+    const res = await auth.upload(`/admin/${authorSlug}/books/upload`, fd);
     const data = await res.json();
     if (!res.ok) throw new Error(data.detail || 'Upload failed');
     toast('Book uploaded and indexing started!', 'success');
@@ -1699,9 +1685,7 @@ async function importQACSV(input) {
   const fd = new FormData();
   fd.append('file', file);
   try {
-    const res = await fetch(API + `/admin/${authorSlug}/qa/import`, {
-      method: 'POST', headers: { Authorization: 'Bearer ' + token }, body: fd
-    });
+    const res = await auth.upload(`/admin/${authorSlug}/qa/import`, fd);
     const data = await res.json();
     if (!res.ok) throw new Error(data.detail || 'Import failed');
     toast(`Imported ${data.imported} pairs (${data.skipped} skipped)`, 'success');
@@ -1713,9 +1697,7 @@ async function importQACSV(input) {
 async function exportQACSV() {
   toast('Preparing Q&A export...', 'success');
   try {
-    const res = await fetch(API + `/admin/${authorSlug}/qa/export`, {
-      headers: { Authorization: 'Bearer ' + token }
-    });
+    const res = await auth.download(`/admin/${authorSlug}/qa/export`);
     if (!res.ok) { const e = await res.json(); throw new Error(e.detail || 'Export failed'); }
     const blob = await res.blob();
     const url = URL.createObjectURL(blob);
@@ -1740,9 +1722,7 @@ async function downloadExport(type) {
 
   toast(`Preparing ${type} export...`, 'success');
   try {
-    const res = await fetch(API + `/admin/${authorSlug}/export/${type}?days=${days}`, {
-      headers: { Authorization: 'Bearer ' + token }
-    });
+    const res = await auth.download(`/admin/${authorSlug}/export/${type}?days=${days}`);
     if (!res.ok) { const e = await res.json(); throw new Error(e.detail || 'Export failed'); }
     const blob = await res.blob();
     const url = URL.createObjectURL(blob);

app/api/schemas_router.py

@@ -8,9 +8,10 @@ Routes:
   GET  /api/auth/me
 """
 
-from fastapi import APIRouter, Depends, Response
+from fastapi import APIRouter, Depends, Request, Response
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from app.config import get_settings
 from app.dependencies import get_db, get_current_user
 from app.schemas.auth import LoginRequest, RegisterRequest, TokenResponse, UserResponse, RefreshRequest
 from app.services.auth_service import AuthService
@@ -18,6 +19,21 @@ from app.services.auth_service import AuthService
 router = APIRouter()
 
 
+def _cookie_secure() -> bool:
+    return get_settings().APP_ENV == "production"
+
+
+def _set_refresh_cookie(response: Response, refresh_token: str) -> None:
+    response.set_cookie(
+        "refresh_token",
+        refresh_token,
+        httponly=True,
+        secure=_cookie_secure(),
+        samesite="lax",
+        max_age=7 * 24 * 60 * 60,
+    )
+
+
 @router.post("/auth/register", response_model=TokenResponse, status_code=201, tags=["Auth"])
 async def register(payload: RegisterRequest, db: AsyncSession = Depends(get_db)):
     """Register a new author account."""
@@ -32,23 +48,27 @@ async def register(payload: RegisterRequest, db: AsyncSession = Depends(get_db))
 async def login(payload: LoginRequest, response: Response, db: AsyncSession = Depends(get_db)):
     """Authenticate author and return JWT token pair."""
     result = await AuthService(db).login(email=payload.email, password=payload.password)
-    response.set_cookie(
-        "refresh_token", result["refresh_token"],
-        httponly=True, secure=True, samesite="lax",
-        max_age=7 * 24 * 60 * 60,
-    )
+    _set_refresh_cookie(response, result["refresh_token"])
     return result
 
 
 @router.post("/auth/refresh", response_model=TokenResponse, tags=["Auth"])
-async def refresh(payload: RefreshRequest, response: Response, db: AsyncSession = Depends(get_db)):
+async def refresh(request: Request, response: Response, db: AsyncSession = Depends(get_db)):
     """Issue new JWT token pair."""
-    result = await AuthService(db).refresh_tokens(payload.refresh_token)
-    response.set_cookie(
-        "refresh_token", result["refresh_token"],
-        httponly=True, secure=True, samesite="lax",
-        max_age=7 * 24 * 60 * 60,
-    )
+    from fastapi import HTTPException
+
+    refresh_token = request.cookies.get("refresh_token")
+    if not refresh_token:
+        try:
+            body = await request.json()
+            refresh_token = body.get("refresh_token")
+        except Exception:
+            pass
+    if not refresh_token:
+        raise HTTPException(401, "Refresh token required")
+
+    result = await AuthService(db).refresh_tokens(refresh_token)
+    _set_refresh_cookie(response, result["refresh_token"])
     return result
 
 

app/config.py

@@ -33,7 +33,7 @@ class Settings(BaseSettings):
     JWT_PRIVATE_KEY: str | None = None                     # RS256 private key (PEM)
     JWT_PUBLIC_KEY: str | None = None                      # RS256 public key (PEM)
     JWT_ALGORITHM: str = "HS256"
-    ACCESS_TOKEN_EXPIRE_MINUTES: int = 15
+    ACCESS_TOKEN_EXPIRE_MINUTES: int = 480
     REFRESH_TOKEN_EXPIRE_DAYS: int = 7
     MAX_CONCURRENT_SESSIONS: int = 3
 

app/main.py

@@ -170,10 +170,12 @@ def _register_middleware(app: FastAPI, cfg) -> None:
     app.add_middleware(LoggingMiddleware)
     app.add_middleware(SecurityHeadersMiddleware)
     app.add_middleware(RateLimitMiddleware)
+
+    cors_origins = cfg.ALLOWED_ORIGINS if cfg.APP_ENV == "production" else ["*"]
     app.add_middleware(
         CORSMiddleware,
-        allow_origins=["*"],
-        allow_credentials=True,
+        allow_origins=cors_origins,
+        allow_credentials=False,
         allow_methods=["*"],
         allow_headers=["*"],
     )

app/middleware/security_headers.py

@@ -1,11 +1,13 @@
 """Author RAG Chatbot SaaS — Security Headers Middleware.
 
-Adds production-grade security headers to every response using pure ASGI
+Adds production-grade security headers to every HTTP response using pure ASGI
 (avoids BaseHTTPMiddleware request body consumption issues).
 """
 
 from starlette.types import ASGIApp, Receive, Scope, Send
 
+from app.config import get_settings
+
 
 class SecurityHeadersMiddleware:
     """Add security headers to all HTTP responses (pure ASGI)."""
@@ -18,17 +20,24 @@ class SecurityHeadersMiddleware:
             await self.app(scope, receive, send)
             return
 
+        cfg = get_settings()
+        use_hsts = cfg.APP_ENV == "production"
+
         async def send_with_headers(message):
             if message["type"] == "http.response.start":
                 headers = list(message.get("headers", []))
                 security_headers = [
-                    (b"strict-transport-security", b"max-age=31536000; includeSubDomains"),
                     (b"x-content-type-options", b"nosniff"),
                     (b"x-frame-options", b"SAMEORIGIN"),
                     (b"x-xss-protection", b"1; mode=block"),
                     (b"referrer-policy", b"strict-origin-when-cross-origin"),
                     (b"permissions-policy", b"camera=(), microphone=(), geolocation=(), payment=()"),
                 ]
+                if use_hsts:
+                    security_headers.insert(
+                        0,
+                        (b"strict-transport-security", b"max-age=31536000; includeSubDomains"),
+                    )
                 headers.extend(security_headers)
                 message["headers"] = headers
             await send(message)

app/services/auth_service.py

@@ -155,7 +155,11 @@ class AuthService:
 
         tokens = _create_token_pair(user_id, extra={"role": user.role})
         logger.debug("Tokens refreshed", user_id=user_id)
-        return tokens
+        return {
+            **tokens,
+            "is_superadmin": user.role == "superadmin",
+            "author_slug": user.id,
+        }
 
 
 # ─── Private Helpers ──────────────────────────────────────────────────────────

app/superadmin/templates/superadmin.html

@@ -8,6 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+  <script src="/static/auth-client.js"></script>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -421,7 +422,12 @@
 
 <script>
 const API = window.location.origin + '/api';
-let token = localStorage.getItem('sa_token');
+const auth = new AuthorBotAuthClient({
+  apiBase: API,
+  accessKey: 'sa_token',
+  refreshKey: 'sa_refresh_token',
+});
+let token = auth.getAccessToken();
 let allAuthors = [];
 let allAuditEntries = [];
 let chartInstances = {};
@@ -444,19 +450,17 @@ function showModal(title, body, actions = '') {
 function closeModal() { document.getElementById('modal-overlay').classList.remove('active'); }
 document.getElementById('modal-overlay').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal(); });
 
-/* AUTH — validate stored token before dashboard */
-if (token) {
-  fetch(API + '/auth/me', { headers: { Authorization: 'Bearer ' + token } })
-    .then(r => {
-      if (r.ok) return r.json();
-      throw new Error('expired');
-    })
-    .then(d => {
-      if (d.role === 'superadmin') showDashboard();
-      else { localStorage.removeItem('sa_token'); token = null; toast('Session expired — please log in again', 'error'); }
-    })
-    .catch(() => { localStorage.removeItem('sa_token'); token = null; toast('Session expired — please log in again', 'error'); });
-}
+/* AUTH */
+auth.restoreSession(function (user) { return user.role === 'superadmin'; }).then(function (ok) {
+  if (ok) {
+    token = auth.getAccessToken();
+    showDashboard();
+  } else if (auth.getAccessToken()) {
+    auth.clearSession();
+    token = null;
+    toast('SuperAdmin access required for this account', 'error');
+  }
+});
 
 document.getElementById('sa-login-btn').onclick = async () => {
   const msg = document.getElementById('sa-login-msg');
@@ -464,13 +468,12 @@ document.getElementById('sa-login-btn').onclick = async () => {
   const btn = document.getElementById('sa-login-btn');
   btn.disabled = true; btn.textContent = 'Authenticating...';
   try {
-    const res = await fetch(API + '/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email: document.getElementById('sa-user').value, password: document.getElementById('sa-pass').value }) });
-    const data = await res.json();
-    if (!res.ok) { const d = Array.isArray(data.detail) ? data.detail.map(e => e.msg||JSON.stringify(e)).join(', ') : (data.detail||'Auth failed'); throw new Error(d); }
-    if (!data.is_superadmin) throw new Error('Not a SuperAdmin account');
-    token = data.access_token;
-    localStorage.setItem('sa_token', token);
+    const data = await auth.login(
+      document.getElementById('sa-user').value,
+      document.getElementById('sa-pass').value
+    );
+    if (!data.is_superadmin) { auth.clearSession(); throw new Error('Not a SuperAdmin account'); }
+    token = auth.getAccessToken();
     toast('Welcome, SuperAdmin', 'success');
     showDashboard();
   } catch (e) { msg.textContent = e.message; msg.style.color = 'var(--red)'; }
@@ -478,7 +481,7 @@ document.getElementById('sa-login-btn').onclick = async () => {
 };
 
 ['sa-user', 'sa-pass'].forEach(id => document.getElementById(id).addEventListener('keydown', e => { if (e.key === 'Enter') document.getElementById('sa-login-btn').click(); }));
-document.getElementById('sa-logout-btn').onclick = () => { localStorage.removeItem('sa_token'); location.reload(); };
+document.getElementById('sa-logout-btn').onclick = () => { auth.clearSession(); location.reload(); };
 
 function showDashboard() {
   document.getElementById('auth-screen').style.display = 'none';
@@ -501,16 +504,14 @@ document.querySelectorAll('.nav-item[data-page]').forEach(el => { el.onclick = (
 
 /* API */
 async function apiGet(path) {
-  const res = await fetch(API + path, { headers: { Authorization: 'Bearer ' + token } });
-  if (res.status === 401 || res.status === 403) { localStorage.removeItem('sa_token'); location.reload(); return; }
-  if (!res.ok) { const text = await res.text(); let detail; try { detail = JSON.parse(text).detail; } catch(e) { detail = text || `HTTP ${res.status}`; } throw new Error(detail || `HTTP ${res.status}`); }
-  return res.json();
+  const data = await auth.get(path);
+  token = auth.getAccessToken();
+  return data;
 }
 async function apiPost(path, body) {
-  const res = await fetch(API + path, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify(body) });
-  if (res.status === 401 || res.status === 403) { localStorage.removeItem('sa_token'); location.reload(); return; }
-  if (!res.ok) { const text = await res.text(); let detail; try { detail = JSON.parse(text).detail; } catch(e) { detail = text || `HTTP ${res.status}`; } throw new Error(detail || `HTTP ${res.status}`); }
-  return res.json();
+  const data = await auth.post(path, body);
+  token = auth.getAccessToken();
+  return data;
 }
 
 function animateNumber(id, target) {
@@ -780,28 +781,15 @@ document.getElementById('grant-btn').onclick = async () => {
   btn.disabled = true;
   btn.textContent = '⏳ Granting access...';
 
-  // 15 second timeout to prevent infinite hang
-  const controller = new AbortController();
-  const timeout = setTimeout(() => { controller.abort(); }, 15000);
-
   try {
-    const res = await fetch(API + '/super/grant', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
-      body: JSON.stringify({
-        author_email: email,
-        plan: document.getElementById('g-plan').value,
-        duration_days: parseInt(document.getElementById('g-duration').value),
-        token_budget: parseInt(document.getElementById('g-tokens').value),
-        bonus_tokens: parseInt(document.getElementById('g-bonus').value) || 0,
-        notes: document.getElementById('g-notes').value,
-      }),
-      signal: controller.signal,
+    const data = await apiPost('/super/grant', {
+      author_email: email,
+      plan: document.getElementById('g-plan').value,
+      duration_days: parseInt(document.getElementById('g-duration').value),
+      token_budget: parseInt(document.getElementById('g-tokens').value),
+      bonus_tokens: parseInt(document.getElementById('g-bonus').value) || 0,
+      notes: document.getElementById('g-notes').value,
     });
-    clearTimeout(timeout);
-    if (res.status === 401 || res.status === 403) { localStorage.removeItem('sa_token'); location.reload(); return; }
-    const data = await res.json();
-    if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);
 
     // Show the token in a modal so admin can copy it
     const tok = data.token || '';
@@ -819,12 +807,7 @@ document.getElementById('grant-btn').onclick = async () => {
     document.getElementById('g-tokens').value = '500000';
     document.getElementById('g-bonus').value = '0';
   } catch(e) {
-    clearTimeout(timeout);
-    if (e.name === 'AbortError') {
-      toast('Request timed out — server may still be processing. Check Subscriptions page.', 'error');
-    } else {
-      toast(e.message || 'Grant failed', 'error');
-    }
+    toast(e.message || 'Grant failed', 'error');
   } finally {
     btn.disabled = false;
     btn.textContent = originalText;
@@ -848,16 +831,21 @@ async function loadPlatformAnalytics() {
 /* HEALTH */
 async function loadHealth() {
   const cards = document.querySelectorAll('.health-card');
-  const services = ['Database (SQLite)', 'Redis', 'ChromaDB', 'AI Models'];
+  const keys = ['database', 'redis', 'chromadb', null];
   try {
     const data = await apiGet('/super/health');
+    const checks = data.checks || {};
     cards.forEach((card, i) => {
-      const ok = data[services[i].toLowerCase().replace(/[^a-z]/g,'')] !== false;
+      const key = keys[i];
+      const ok = key ? String(checks[key] || '').startsWith('ok') : true;
       card.querySelector('.health-dot').className = `health-dot ${ok ? 'ok' : 'err'}`;
-      card.querySelector('.text-xs').textContent = ok ? 'Healthy — responding normally' : 'Error — check logs';
+      card.querySelector('.text-xs').textContent = ok ? 'Healthy — responding normally' : (checks[key] || 'Error — check logs');
     });
   } catch(e) {
-    cards.forEach(c => { c.querySelector('.health-dot').className = 'health-dot ok'; c.querySelector('.text-xs').textContent = 'Status check complete'; });
+    cards.forEach(c => {
+      c.querySelector('.health-dot').className = 'health-dot err';
+      c.querySelector('.text-xs').textContent = e.message || 'Cannot reach server';
+    });
   }
 }
 
@@ -896,7 +884,7 @@ document.getElementById('send-ann-btn').onclick = async () => {
   const msg = document.getElementById('ann-msg').value;
   if (!msg) { toast('Message is required', 'error'); return; }
   try {
-    await apiPost(`/super/announce?message=${encodeURIComponent(msg)}`, {});
+    await apiPost('/super/announce', { message: msg, title: title });
     toast('Announcement sent to all authors!', 'success');
     document.getElementById('ann-title').value = '';
     document.getElementById('ann-msg').value = '';

static/addon.html

@@ -36,6 +36,6 @@
       apiBase: window.location.origin + '/api',
     };
   </script>
-  <script src="/static/widget.js"></script>
+  <script src="/static/widget.js" defer></script>
 </body>
 </html>

static/auth-client.js

@@ -0,0 +1,214 @@
+/**
+ * AuthorBot Auth Client — shared by admin + superadmin SPAs.
+ * Stores access + refresh tokens, auto-refreshes on 401, survives tab idle.
+ */
+(function (global) {
+  'use strict';
+
+  function AuthClient(options) {
+    this.apiBase = options.apiBase;
+    this.accessKey = options.accessKey || 'access_token';
+    this.refreshKey = options.refreshKey || 'refresh_token';
+    this.slugKey = options.slugKey || null;
+    this._refreshing = null;
+  }
+
+  AuthClient.prototype.getAccessToken = function () {
+    return localStorage.getItem(this.accessKey);
+  };
+
+  AuthClient.prototype.getRefreshToken = function () {
+    return localStorage.getItem(this.refreshKey);
+  };
+
+  AuthClient.prototype.getAuthorSlug = function () {
+    return this.slugKey ? localStorage.getItem(this.slugKey) : null;
+  };
+
+  AuthClient.prototype.saveSession = function (data) {
+    if (data.access_token) localStorage.setItem(this.accessKey, data.access_token);
+    if (data.refresh_token) localStorage.setItem(this.refreshKey, data.refresh_token);
+    if (this.slugKey && data.author_slug) localStorage.setItem(this.slugKey, data.author_slug);
+  };
+
+  AuthClient.prototype.clearSession = function () {
+    localStorage.removeItem(this.accessKey);
+    localStorage.removeItem(this.refreshKey);
+    if (this.slugKey) localStorage.removeItem(this.slugKey);
+  };
+
+  AuthClient.prototype.refreshAccessToken = function () {
+    var self = this;
+    if (this._refreshing) return this._refreshing;
+
+    var refresh = this.getRefreshToken();
+    if (!refresh) return Promise.resolve(false);
+
+    this._refreshing = fetch(this.apiBase + '/auth/refresh', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refresh_token: refresh }),
+    })
+      .then(function (res) {
+        if (!res.ok) return false;
+        return res.json();
+      })
+      .then(function (data) {
+        if (!data || !data.access_token) return false;
+        self.saveSession(data);
+        return true;
+      })
+      .catch(function () { return false; })
+      .finally(function () { self._refreshing = null; });
+
+    return this._refreshing;
+  };
+
+  AuthClient.prototype.restoreSession = function (validateFn) {
+    var self = this;
+    if (!this.getAccessToken()) return Promise.resolve(false);
+
+    return this.request('GET', '/auth/me')
+      .then(function (user) { return validateFn ? validateFn(user) : true; })
+      .catch(function () {
+        return self.refreshAccessToken().then(function (ok) {
+          if (!ok) {
+            self.clearSession();
+            return false;
+          }
+          return self.request('GET', '/auth/me')
+            .then(function (user) { return validateFn ? validateFn(user) : true; })
+            .catch(function () {
+              self.clearSession();
+              return false;
+            });
+        });
+      });
+  };
+
+  AuthClient.prototype.request = function (method, path, body, retried) {
+    var self = this;
+    var token = this.getAccessToken();
+    var headers = { Authorization: 'Bearer ' + token };
+
+    var opts = { method: method, headers: headers };
+    if (body !== undefined && body !== null) {
+      headers['Content-Type'] = 'application/json';
+      opts.body = JSON.stringify(body);
+    }
+
+    return fetch(this.apiBase + path, opts)
+      .catch(function () {
+        throw new Error('Cannot reach server. Check your connection and try again.');
+      })
+      .then(function (res) {
+        if (res.status === 401 && !retried) {
+          return self.refreshAccessToken().then(function (ok) {
+            if (!ok) {
+              self.clearSession();
+              throw new Error('Session expired — please sign in again');
+            }
+            return self.request(method, path, body, true);
+          });
+        }
+        return res;
+      });
+  };
+
+  AuthClient.prototype._parse = function (res) {
+    return res.text().then(function (text) {
+      var data = {};
+      try { data = text ? JSON.parse(text) : {}; } catch (e) { data = { detail: text }; }
+      if (!res.ok) {
+        var detail = data.detail;
+        if (Array.isArray(detail)) detail = detail.map(function (e) { return e.msg || JSON.stringify(e); }).join(', ');
+        throw new Error(detail || ('HTTP ' + res.status));
+      }
+      return data;
+    });
+  };
+
+  AuthClient.prototype.get = function (path) {
+    return this.request('GET', path).then(this._parse.bind(this));
+  };
+
+  AuthClient.prototype.post = function (path, body) {
+    return this.request('POST', path, body).then(this._parse.bind(this));
+  };
+
+  AuthClient.prototype.put = function (path, body) {
+    return this.request('PUT', path, body).then(this._parse.bind(this));
+  };
+
+  AuthClient.prototype.delete = function (path) {
+    return this.request('DELETE', path).then(this._parse.bind(this));
+  };
+
+  AuthClient.prototype.upload = function (path, formData, retried) {
+    var self = this;
+    var token = this.getAccessToken();
+    return fetch(this.apiBase + path, {
+      method: 'POST',
+      headers: { Authorization: 'Bearer ' + token },
+      body: formData,
+    })
+      .catch(function () {
+        throw new Error('Cannot reach server. Check your connection and try again.');
+      })
+      .then(function (res) {
+        if (res.status === 401 && !retried) {
+          return self.refreshAccessToken().then(function (ok) {
+            if (!ok) {
+              self.clearSession();
+              throw new Error('Session expired — please sign in again');
+            }
+            return self.upload(path, formData, true);
+          });
+        }
+        return res;
+      });
+  };
+
+  AuthClient.prototype.download = function (path, retried) {
+    var self = this;
+    var token = this.getAccessToken();
+    return fetch(this.apiBase + path, { headers: { Authorization: 'Bearer ' + token } })
+      .catch(function () {
+        throw new Error('Cannot reach server. Check your connection and try again.');
+      })
+      .then(function (res) {
+        if (res.status === 401 && !retried) {
+          return self.refreshAccessToken().then(function (ok) {
+            if (!ok) {
+              self.clearSession();
+              throw new Error('Session expired — please sign in again');
+            }
+            return self.download(path, true);
+          });
+        }
+        return res;
+      });
+  };
+
+  AuthClient.prototype.login = function (email, password) {
+    var self = this;
+    return fetch(this.apiBase + '/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email, password: password }),
+    })
+      .then(function (res) { return res.json().then(function (data) { return { res: res, data: data }; }); })
+      .then(function (_ref) {
+        var res = _ref.res, data = _ref.data;
+        if (!res.ok) {
+          var detail = data.detail;
+          if (Array.isArray(detail)) detail = detail.map(function (e) { return e.msg || JSON.stringify(e); }).join(', ');
+          throw new Error(detail || 'Login failed');
+        }
+        self.saveSession(data);
+        return data;
+      });
+  };
+
+  global.AuthorBotAuthClient = AuthClient;
+})(window);