Add user stats and activity tracking

backend/app/auth.py

@@ -1,15 +1,28 @@
 from typing import Dict, Any
 
-from fastapi import Depends, HTTPException, status
+from fastapi import Depends, HTTPException, status, Request
 from fastapi.security import OAuth2PasswordBearer
 
-from .db import get_user_by_username
+from .db import get_user_by_username, upsert_user_activity
 from .security import safe_decode_token, TokenError
 
 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/auth/login")
 
+def _extract_client_ip(request: Request) -> str:
+    forwarded = request.headers.get("x-forwarded-for")
+    if forwarded:
+        parts = [part.strip() for part in forwarded.split(",") if part.strip()]
+        if parts:
+            return parts[0]
+    real_ip = request.headers.get("x-real-ip")
+    if real_ip:
+        return real_ip.strip()
+    if request.client and request.client.host:
+        return request.client.host
+    return "unknown"
 
-def get_current_user(token: str = Depends(oauth2_scheme)) -> Dict[str, Any]:
+
+def get_current_user(token: str = Depends(oauth2_scheme), request: Request = None) -> Dict[str, Any]:
     try:
         payload = safe_decode_token(token)
     except TokenError as exc:
@@ -25,6 +38,11 @@ def get_current_user(token: str = Depends(oauth2_scheme)) -> Dict[str, Any]:
     if user.get("is_blocked"):
         raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="User is blocked")
 
+    if request is not None:
+        ip = _extract_client_ip(request)
+        user_agent = request.headers.get("user-agent", "unknown")
+        upsert_user_activity(user["username"], ip, user_agent)
+
     return {
         "username": user["username"],
         "role": user["role"],

backend/app/db.py

@@ -103,6 +103,32 @@ def init_db() -> None:
             ON requests_cache (requested_by_norm)
             """
         )
+        conn.execute(
+            """
+            CREATE TABLE IF NOT EXISTS user_activity (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                username TEXT NOT NULL,
+                ip TEXT NOT NULL,
+                user_agent TEXT NOT NULL,
+                first_seen_at TEXT NOT NULL,
+                last_seen_at TEXT NOT NULL,
+                hit_count INTEGER NOT NULL DEFAULT 1,
+                UNIQUE(username, ip, user_agent)
+            )
+            """
+        )
+        conn.execute(
+            """
+            CREATE INDEX IF NOT EXISTS idx_user_activity_username
+            ON user_activity (username)
+            """
+        )
+        conn.execute(
+            """
+            CREATE INDEX IF NOT EXISTS idx_user_activity_last_seen
+            ON user_activity (last_seen_at)
+            """
+        )
         try:
             conn.execute("ALTER TABLE users ADD COLUMN last_login_at TEXT")
         except sqlite3.OperationalError:
@@ -377,6 +403,164 @@ def _backfill_auth_providers() -> None:
         )
 
 
+def upsert_user_activity(username: str, ip: str, user_agent: str) -> None:
+    if not username:
+        return
+    ip_value = ip.strip() if isinstance(ip, str) and ip.strip() else "unknown"
+    agent_value = (
+        user_agent.strip() if isinstance(user_agent, str) and user_agent.strip() else "unknown"
+    )
+    timestamp = datetime.now(timezone.utc).isoformat()
+    with _connect() as conn:
+        conn.execute(
+            """
+            INSERT INTO user_activity (username, ip, user_agent, first_seen_at, last_seen_at, hit_count)
+            VALUES (?, ?, ?, ?, ?, 1)
+            ON CONFLICT(username, ip, user_agent)
+            DO UPDATE SET last_seen_at = excluded.last_seen_at, hit_count = hit_count + 1
+            """,
+            (username, ip_value, agent_value, timestamp, timestamp),
+        )
+
+
+def get_user_activity(username: str, limit: int = 5) -> list[Dict[str, Any]]:
+    limit = max(1, min(limit, 20))
+    with _connect() as conn:
+        rows = conn.execute(
+            """
+            SELECT ip, user_agent, first_seen_at, last_seen_at, hit_count
+            FROM user_activity
+            WHERE username = ?
+            ORDER BY last_seen_at DESC
+            LIMIT ?
+            """,
+            (username, limit),
+        ).fetchall()
+    results: list[Dict[str, Any]] = []
+    for row in rows:
+        results.append(
+            {
+                "ip": row[0],
+                "user_agent": row[1],
+                "first_seen_at": row[2],
+                "last_seen_at": row[3],
+                "hit_count": row[4],
+            }
+        )
+    return results
+
+
+def get_user_activity_summary(username: str) -> Dict[str, Any]:
+    with _connect() as conn:
+        last_row = conn.execute(
+            """
+            SELECT ip, user_agent, last_seen_at
+            FROM user_activity
+            WHERE username = ?
+            ORDER BY last_seen_at DESC
+            LIMIT 1
+            """,
+            (username,),
+        ).fetchone()
+        count_row = conn.execute(
+            """
+            SELECT COUNT(*)
+            FROM user_activity
+            WHERE username = ?
+            """,
+            (username,),
+        ).fetchone()
+    return {
+        "last_ip": last_row[0] if last_row else None,
+        "last_user_agent": last_row[1] if last_row else None,
+        "last_seen_at": last_row[2] if last_row else None,
+        "device_count": int(count_row[0] or 0) if count_row else 0,
+    }
+
+
+def get_user_request_stats(username_norm: str) -> Dict[str, Any]:
+    if not username_norm:
+        return {
+            "total": 0,
+            "ready": 0,
+            "pending": 0,
+            "approved": 0,
+            "working": 0,
+            "partial": 0,
+            "declined": 0,
+            "in_progress": 0,
+            "last_request_at": None,
+        }
+    with _connect() as conn:
+        total_row = conn.execute(
+            """
+            SELECT COUNT(*)
+            FROM requests_cache
+            WHERE requested_by_norm = ?
+            """,
+            (username_norm,),
+        ).fetchone()
+        status_rows = conn.execute(
+            """
+            SELECT status, COUNT(*)
+            FROM requests_cache
+            WHERE requested_by_norm = ?
+            GROUP BY status
+            """,
+            (username_norm,),
+        ).fetchall()
+        last_row = conn.execute(
+            """
+            SELECT MAX(created_at)
+            FROM requests_cache
+            WHERE requested_by_norm = ?
+            """,
+            (username_norm,),
+        ).fetchone()
+    counts = {int(row[0]): int(row[1]) for row in status_rows if row[0] is not None}
+    pending = counts.get(1, 0)
+    approved = counts.get(2, 0)
+    declined = counts.get(3, 0)
+    ready = counts.get(4, 0)
+    working = counts.get(5, 0)
+    partial = counts.get(6, 0)
+    in_progress = approved + working + partial
+    return {
+        "total": int(total_row[0] or 0) if total_row else 0,
+        "ready": ready,
+        "pending": pending,
+        "approved": approved,
+        "working": working,
+        "partial": partial,
+        "declined": declined,
+        "in_progress": in_progress,
+        "last_request_at": last_row[0] if last_row else None,
+    }
+
+
+def get_global_request_leader() -> Optional[Dict[str, Any]]:
+    with _connect() as conn:
+        row = conn.execute(
+            """
+            SELECT requested_by_norm, MAX(requested_by) as display_name, COUNT(*) as total
+            FROM requests_cache
+            WHERE requested_by_norm IS NOT NULL AND requested_by_norm != ''
+            GROUP BY requested_by_norm
+            ORDER BY total DESC
+            LIMIT 1
+            """
+        ).fetchone()
+    if not row:
+        return None
+    return {"username": row[1] or row[0], "total": int(row[2] or 0)}
+
+
+def get_global_request_total() -> int:
+    with _connect() as conn:
+        row = conn.execute("SELECT COUNT(*) FROM requests_cache").fetchone()
+    return int(row[0] or 0)
+
+
 def upsert_request_cache(
     request_id: int,
     media_id: Optional[int],

backend/app/routers/auth.py

@@ -7,6 +7,11 @@ from ..db import (
     set_last_login,
     get_user_by_username,
     set_user_password,
+    get_user_activity,
+    get_user_activity_summary,
+    get_user_request_stats,
+    get_global_request_leader,
+    get_global_request_total,
 )
 from ..runtime import get_runtime_settings
 from ..clients.jellyfin import JellyfinClient
@@ -17,6 +22,10 @@ from ..auth import get_current_user
 router = APIRouter(prefix="/auth", tags=["auth"])
 
 
+def _normalize_username(value: str) -> str:
+    return value.strip().lower()
+
+
 @router.post("/login")
 async def login(form_data: OAuth2PasswordRequestForm = Depends()) -> dict:
     user = verify_user_password(form_data.username, form_data.password)
@@ -92,6 +101,31 @@ async def me(current_user: dict = Depends(get_current_user)) -> dict:
     return current_user
 
 
+@router.get("/profile")
+async def profile(current_user: dict = Depends(get_current_user)) -> dict:
+    username = current_user.get("username") or ""
+    username_norm = _normalize_username(username) if username else ""
+    stats = get_user_request_stats(username_norm)
+    global_total = get_global_request_total()
+    leader = get_global_request_leader()
+    share = (stats.get("total", 0) / global_total) if global_total else 0
+    activity_summary = get_user_activity_summary(username) if username else {}
+    activity_recent = get_user_activity(username, limit=5) if username else []
+    return {
+        "user": current_user,
+        "stats": {
+            **stats,
+            "share": share,
+            "global_total": global_total,
+            "most_active_user": leader,
+        },
+        "activity": {
+            **activity_summary,
+            "recent": activity_recent,
+        },
+    }
+
+
 @router.post("/password")
 async def change_password(payload: dict, current_user: dict = Depends(get_current_user)) -> dict:
     if current_user.get("auth_provider") != "local":

frontend/app/admin/SettingsPage.tsx

@@ -300,7 +300,7 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     requests_data_source: 'Pick where Magent should read requests from.',
     log_level: 'How much detail is written to the activity log.',
     log_file: 'Where the activity log is stored.',
-    site_build_number: 'Build number shown in the footer (auto-set from releases).',
+    site_build_number: 'Build number shown in the account menu (auto-set from releases).',
     site_banner_enabled: 'Enable a sitewide banner for announcements.',
     site_banner_message: 'Short banner message for maintenance or updates.',
     site_banner_tone: 'Visual tone for the banner.',

frontend/app/globals.css

@@ -175,30 +175,35 @@ body {
   margin-right: auto;
 }
 
-.signed-in {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--ink-muted);
-  padding: 6px 10px;
-  border-radius: 999px;
-  border: 1px dashed var(--border);
-  background: transparent;
-  cursor: pointer;
-}
-
 .signed-in-menu {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
 
+.avatar-button {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: linear-gradient(130deg, rgba(28, 107, 255, 0.35), rgba(17, 214, 198, 0.25));
+  color: var(--ink);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 20px rgba(28, 107, 255, 0.25);
+  cursor: pointer;
+}
+
 .signed-in-dropdown {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
-  min-width: 180px;
-  background: rgba(14, 20, 32, 0.95);
+  width: min(260px, 90vw);
+  background: rgba(14, 20, 32, 0.96);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 8px;
@@ -206,17 +211,50 @@ body {
   z-index: 20;
 }
 
-.signed-in-dropdown a {
+.signed-in-header {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+  padding: 8px 10px 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.signed-in-actions {
+  display: grid;
+  gap: 6px;
+  padding: 8px 4px 4px;
+}
+
+.signed-in-actions a,
+.signed-in-signout {
   display: block;
   padding: 8px 12px;
   border-radius: 10px;
   color: var(--ink);
   text-decoration: none;
-  text-align: center;
+  text-align: left;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.signed-in-dropdown a:hover {
-  background: rgba(255, 255, 255, 0.08);
+.signed-in-signout {
+  cursor: pointer;
+  font: inherit;
+}
+
+.signed-in-actions a:hover,
+.signed-in-signout:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.signed-in-build {
+  margin-top: 6px;
+  padding: 6px 10px 8px;
+  font-size: 11px;
+  color: var(--ink-muted);
+  text-align: left;
+  letter-spacing: 0.04em;
 }
 
 .theme-toggle {
@@ -521,6 +559,73 @@ button span {
   margin-top: 4px;
 }
 
+.profile-grid {
+  display: grid;
+  gap: 20px;
+}
+
+.profile-section {
+  display: grid;
+  gap: 12px;
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.stat-card {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.05);
+  display: grid;
+  gap: 6px;
+}
+
+.stat-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-muted);
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.stat-value--small {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.connection-list {
+  display: grid;
+  gap: 10px;
+}
+
+.connection-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.connection-label {
+  font-weight: 600;
+}
+
+.connection-count {
+  font-size: 12px;
+  color: var(--ink-muted);
+  white-space: nowrap;
+}
+
 .state {
   display: grid;
   gap: 6px;
@@ -647,12 +752,28 @@ button span {
 }
 
 .user-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
   gap: 16px;
 }
 
+.user-card strong {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 6px;
+}
+
+.user-meta {
+  display: grid;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.user-meta .meta {
+  display: block;
+}
+
 .user-actions {
   display: grid;
   gap: 8px;
@@ -1399,19 +1520,83 @@ button span {
 }
 
 @media (max-width: 720px) {
+  .page {
+    padding: 28px 18px 60px;
+    gap: 24px;
+  }
+
   .header {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
     align-items: flex-start;
   }
 
+  .header-left {
+    width: 100%;
+  }
+
+  .brand-link {
+    width: 100%;
+    gap: 12px;
+  }
+
+  .brand-logo--header {
+    width: 64px;
+    height: 64px;
+  }
+
+  .brand {
+    font-size: 26px;
+  }
+
+  .tagline {
+    font-size: 13px;
+  }
+
   .header-right {
     grid-column: 1 / -1;
     justify-content: flex-start;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
   }
 
   .header-nav {
     justify-content: flex-start;
+    width: 100%;
+  }
+
+  .signed-in-menu {
+    margin-left: auto;
+  }
+
+  .avatar-button {
+    width: 40px;
+    height: 40px;
+  }
+
+  .signed-in-dropdown {
+    right: 0;
+    left: auto;
+    width: min(260px, 92vw);
+  }
+
+  .header-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .header-actions a,
+  .header-actions .header-link {
+    font-size: 12px;
+    padding: 8px 10px;
+  }
+
+  .header-actions .header-cta--left {
+    grid-column: 1 / -1;
+    margin-right: 0;
   }
 
   .summary {
@@ -1449,6 +1634,21 @@ button span {
   .cache-row {
     grid-template-columns: 1fr;
   }
+
+  .user-card {
+    grid-template-columns: 1fr;
+  }
+
+  .connection-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-actions {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* Loading spinner */

frontend/app/layout.tsx

@@ -29,8 +29,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
               </a>
             </div>
             <div className="header-right">
-              <HeaderIdentity />
               <ThemeToggle />
+              <HeaderIdentity />
             </div>
             <div className="header-nav">
               <HeaderActions />

frontend/app/profile/page.tsx

@@ -10,9 +10,65 @@ type ProfileInfo = {
   auth_provider: string
 }
 
+type ProfileStats = {
+  total: number
+  ready: number
+  pending: number
+  in_progress: number
+  declined: number
+  working: number
+  partial: number
+  approved: number
+  last_request_at?: string | null
+  share: number
+  global_total: number
+  most_active_user?: { username: string; total: number } | null
+}
+
+type ActivityEntry = {
+  ip: string
+  user_agent: string
+  first_seen_at: string
+  last_seen_at: string
+  hit_count: number
+}
+
+type ProfileActivity = {
+  last_ip?: string | null
+  last_user_agent?: string | null
+  last_seen_at?: string | null
+  device_count: number
+  recent: ActivityEntry[]
+}
+
+type ProfileResponse = {
+  user: ProfileInfo
+  stats: ProfileStats
+  activity: ProfileActivity
+}
+
+const formatDate = (value?: string | null) => {
+  if (!value) return 'Never'
+  const date = new Date(value)
+  if (Number.isNaN(date.valueOf())) return value
+  return date.toLocaleString()
+}
+
+const parseBrowser = (agent?: string | null) => {
+  if (!agent) return 'Unknown'
+  const value = agent.toLowerCase()
+  if (value.includes('edg/')) return 'Edge'
+  if (value.includes('chrome/') && !value.includes('edg/')) return 'Chrome'
+  if (value.includes('firefox/')) return 'Firefox'
+  if (value.includes('safari/') && !value.includes('chrome/')) return 'Safari'
+  return 'Unknown'
+}
+
 export default function ProfilePage() {
   const router = useRouter()
   const [profile, setProfile] = useState<ProfileInfo | null>(null)
+  const [stats, setStats] = useState<ProfileStats | null>(null)
+  const [activity, setActivity] = useState<ProfileActivity | null>(null)
   const [currentPassword, setCurrentPassword] = useState('')
   const [newPassword, setNewPassword] = useState('')
   const [status, setStatus] = useState<string | null>(null)
@@ -26,18 +82,21 @@ export default function ProfilePage() {
     const load = async () => {
       try {
         const baseUrl = getApiBase()
-        const response = await authFetch(`${baseUrl}/auth/me`)
+        const response = await authFetch(`${baseUrl}/auth/profile`)
         if (!response.ok) {
           clearToken()
           router.push('/login')
           return
         }
         const data = await response.json()
+        const user = data?.user ?? {}
         setProfile({
-          username: data?.username ?? 'Unknown',
-          role: data?.role ?? 'user',
-          auth_provider: data?.auth_provider ?? 'local',
+          username: user?.username ?? 'Unknown',
+          role: user?.role ?? 'user',
+          auth_provider: user?.auth_provider ?? 'local',
         })
+        setStats(data?.stats ?? null)
+        setActivity(data?.activity ?? null)
       } catch (err) {
         console.error(err)
         setStatus('Could not load your profile.')
@@ -91,6 +150,76 @@ export default function ProfilePage() {
           {profile.auth_provider}.
         </div>
       )}
+      <div className="profile-grid">
+        <section className="profile-section">
+          <h2>Account stats</h2>
+          <div className="stat-grid">
+            <div className="stat-card">
+              <div className="stat-label">Requests submitted</div>
+              <div className="stat-value">{stats?.total ?? 0}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Ready to watch</div>
+              <div className="stat-value">{stats?.ready ?? 0}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">In progress</div>
+              <div className="stat-value">{stats?.in_progress ?? 0}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Pending approval</div>
+              <div className="stat-value">{stats?.pending ?? 0}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Declined</div>
+              <div className="stat-value">{stats?.declined ?? 0}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Last request</div>
+              <div className="stat-value stat-value--small">
+                {formatDate(stats?.last_request_at)}
+              </div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Share of all requests</div>
+              <div className="stat-value">
+                {stats?.global_total
+                  ? `${Math.round((stats.share || 0) * 1000) / 10}%`
+                  : '0%'}
+              </div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Most active user</div>
+              <div className="stat-value stat-value--small">
+                {stats?.most_active_user
+                  ? `${stats.most_active_user.username} (${stats.most_active_user.total})`
+                  : 'N/A'}
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className="profile-section">
+          <h2>Connection history</h2>
+          <div className="status-banner">
+            Last seen {formatDate(activity?.last_seen_at)} from {activity?.last_ip ?? 'Unknown'}.
+          </div>
+          <div className="connection-list">
+            {(activity?.recent ?? []).map((entry, index) => (
+              <div key={`${entry.ip}-${entry.last_seen_at}-${index}`} className="connection-item">
+                <div>
+                  <div className="connection-label">{parseBrowser(entry.user_agent)}</div>
+                  <div className="meta">IP: {entry.ip}</div>
+                  <div className="meta">Last seen: {formatDate(entry.last_seen_at)}</div>
+                </div>
+                <div className="connection-count">{entry.hit_count} visits</div>
+              </div>
+            ))}
+            {activity && activity.recent.length === 0 ? (
+              <div className="status-banner">No connection history yet.</div>
+            ) : null}
+          </div>
+        </section>
+      </div>
       {profile?.auth_provider !== 'local' ? (
         <div className="status-banner">
           Password changes are only available for local Magent accounts.

frontend/app/ui/HeaderActions.tsx

@@ -32,14 +32,6 @@ export default function HeaderActions() {
     void load()
   }, [])
 
-  const signOut = () => {
-    clearToken()
-    setSignedIn(false)
-    if (typeof window !== 'undefined') {
-      window.location.href = '/login'
-    }
-  }
-
   if (!signedIn) {
     return null
   }
@@ -49,12 +41,7 @@ export default function HeaderActions() {
       <a className="header-cta header-cta--left" href="/feedback">Send feedback</a>
       <a href="/">Requests</a>
       <a href="/how-it-works">How it works</a>
-      <a href="/changelog">Changelog</a>
-      <a href="/profile">My profile</a>
       {role === 'admin' && <a href="/admin">Settings</a>}
-      <button type="button" className="header-link" onClick={signOut}>
-        Sign out
-      </button>
     </div>
   )
 }

frontend/app/ui/HeaderIdentity.tsx

@@ -4,13 +4,15 @@ import { useEffect, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
 
 export default function HeaderIdentity() {
-  const [identity, setIdentity] = useState<string | null>(null)
+  const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null)
+  const [buildNumber, setBuildNumber] = useState<string | null>(null)
   const [open, setOpen] = useState(false)
 
   useEffect(() => {
     const token = getToken()
     if (!token) {
       setIdentity(null)
+      setBuildNumber(null)
       return
     }
     const load = async () => {
@@ -24,7 +26,14 @@ export default function HeaderIdentity() {
         }
         const data = await response.json()
         if (data?.username) {
-          setIdentity(`${data.username}${data.role ? ` (${data.role})` : ''}`)
+          setIdentity({ username: data.username, role: data.role })
+        }
+        const siteResponse = await fetch(`${baseUrl}/site/public`)
+        if (siteResponse.ok) {
+          const siteInfo = await siteResponse.json()
+          if (siteInfo?.buildNumber) {
+            setBuildNumber(siteInfo.buildNumber)
+          }
         }
       } catch (err) {
         console.error(err)
@@ -38,14 +47,42 @@ export default function HeaderIdentity() {
     return null
   }
 
+  const label = `${identity.username}${identity.role ? ` (${identity.role})` : ''}`
+  const initial = identity.username.slice(0, 1).toUpperCase()
+  const signOut = () => {
+    clearToken()
+    if (typeof window !== 'undefined') {
+      window.location.href = '/login'
+    }
+  }
+
   return (
     <div className="signed-in-menu">
-      <button type="button" className="signed-in" onClick={() => setOpen((prev) => !prev)}>
-        Signed in as {identity}
+      <button
+        type="button"
+        className="avatar-button"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-haspopup="true"
+        aria-expanded={open}
+        title={label}
+      >
+        {initial}
       </button>
       {open && (
         <div className="signed-in-dropdown">
-          <a href="/profile">My profile</a>
+          <div className="signed-in-header">Signed in as {label}</div>
+          <div className="signed-in-actions">
+            <a href="/profile" onClick={() => setOpen(false)}>
+              My profile
+            </a>
+            <a href="/changelog" onClick={() => setOpen(false)}>
+              Changelog
+            </a>
+            <button type="button" className="signed-in-signout" onClick={signOut}>
+              Sign out
+            </button>
+          </div>
+          {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
         </div>
       )}
     </div>

frontend/app/ui/SiteStatus.tsx

@@ -57,9 +57,6 @@ export default function SiteStatus() {
       {banner?.enabled && banner.message ? (
         <div className={`site-banner site-banner--${tone}`}>{banner.message}</div>
       ) : null}
-      {info?.buildNumber ? (
-        <div className="site-version">Build {info.buildNumber}</div>
-      ) : null}
     </>
   )
 }

frontend/app/users/page.tsx

@@ -136,10 +136,12 @@ export default function UsersPage() {
               <div key={user.username} className="summary-card user-card">
                 <div>
                   <strong>{user.username}</strong>
+                  <div className="user-meta">
                     <span className="meta">Role: {user.role}</span>
                     <span className="meta">Login type: {user.authProvider || 'local'}</span>
                     <span className="meta">Last login: {formatLastLogin(user.lastLoginAt)}</span>
                   </div>
+                </div>
                 <div className="user-actions">
                   <label className="toggle">
                     <input