Add site banner, build number, and changelog

frontend/app/ui/AdminSidebar.tsx

@@ -25,6 +25,7 @@ const NAV_GROUPS = [
   {
     title: 'Admin',
     items: [
+      { href: '/admin/site', label: 'Site' },
       { href: '/users', label: 'Users' },
       { href: '/admin/logs', label: 'Activity log' },
       { href: '/admin/maintenance', label: 'Maintenance' },

frontend/app/ui/HeaderActions.tsx

@@ -49,6 +49,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}>

frontend/app/ui/SiteStatus.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+
+type BannerInfo = {
+  enabled: boolean
+  message: string
+  tone?: string
+}
+
+type SiteInfo = {
+  buildNumber?: string
+  banner?: BannerInfo
+}
+
+const buildRequest = () => {
+  const token = getToken()
+  const baseUrl = getApiBase()
+  const url = token ? `${baseUrl}/site/info` : `${baseUrl}/site/public`
+  const fetcher = token ? authFetch : fetch
+  return { token, url, fetcher }
+}
+
+export default function SiteStatus() {
+  const [info, setInfo] = useState<SiteInfo | null>(null)
+
+  useEffect(() => {
+    let active = true
+    const load = async () => {
+      try {
+        const { token, url, fetcher } = buildRequest()
+        const response = await fetcher(url)
+        if (!response.ok) {
+          if (response.status === 401 && token) {
+            clearToken()
+          }
+          return
+        }
+        const data = await response.json()
+        if (!active) return
+        setInfo(data)
+      } catch (err) {
+        console.error(err)
+      }
+    }
+    void load()
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const banner = info?.banner
+  const tone = banner?.tone || 'info'
+  return (
+    <>
+      {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}
+    </>
+  )
+}