Add PWA manifest + update banner to maintenance app

Wire up vite-plugin-pwa so Docker builds generate the web manifest
and service worker (was missing, causing installs to show portal icon).
Adds UpdateBanner with version-based polling via health endpoint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/index.js

@@ -20,6 +20,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 const UPLOADS_DIR = join(__dirname, '..', 'uploads')
 
 const app = Fastify({ logger: true, trustProxy: true })
+const startedAt = Date.now()
 
 await app.register(cookie)
 await app.register(cors, {
@@ -33,7 +34,7 @@ await app.register(staticFiles, {
   decorateReply: false,
 })
 
-app.get('/health', async () => ({ status: 'healthy' }))
+app.get('/health', async () => ({ status: 'healthy', version: process.env.BUILD_VERSION || String(startedAt) }))
 
 await app.register(locationRoutes)
 await app.register(taskRoutes)

frontend/package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.5",
+    "vite-plugin-pwa": "^1.3.0"
   }
 }

frontend/src/App.tsx

@@ -1,5 +1,7 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import AuthGate from './components/AuthGate'
+import { UpdateBanner } from './components/UpdateBanner'
+import { useVersionCheck } from './hooks/useVersionCheck'
 import Layout from './components/Layout'
 import Summary from './pages/Summary'
 import HistoryPage from './pages/History'
@@ -10,23 +12,27 @@ import Locations from './pages/Locations'
 import Settings from './pages/Settings'
 
 export default function App() {
+  const updateAvailable = useVersionCheck('/maintenance/health')
   return (
-    <BrowserRouter basename="/maintenance">
-      <AuthGate>
-        <Layout>
-          <Routes>
-            <Route path="/" element={<Navigate to="/summary" replace />} />
-            <Route path="/summary" element={<Summary />} />
-            <Route path="/history" element={<HistoryPage />} />
-            <Route path="/assets" element={<Assets />} />
-            <Route path="/contractors" element={<Contractors />} />
-            <Route path="/recurring" element={<Recurring />} />
-            <Route path="/locations" element={<Locations />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="*" element={<Navigate to="/summary" replace />} />
-          </Routes>
-        </Layout>
-      </AuthGate>
-    </BrowserRouter>
+    <>
+      <BrowserRouter basename="/maintenance">
+        <AuthGate>
+          <Layout>
+            <Routes>
+              <Route path="/" element={<Navigate to="/summary" replace />} />
+              <Route path="/summary" element={<Summary />} />
+              <Route path="/history" element={<HistoryPage />} />
+              <Route path="/assets" element={<Assets />} />
+              <Route path="/contractors" element={<Contractors />} />
+              <Route path="/recurring" element={<Recurring />} />
+              <Route path="/locations" element={<Locations />} />
+              <Route path="/settings" element={<Settings />} />
+              <Route path="*" element={<Navigate to="/summary" replace />} />
+            </Routes>
+          </Layout>
+        </AuthGate>
+      </BrowserRouter>
+      <UpdateBanner visible={updateAvailable} />
+    </>
   )
 }

frontend/src/components/UpdateBanner.tsx

@@ -0,0 +1,44 @@
+import { RefreshCw } from 'lucide-react'
+
+export function UpdateBanner({ visible }: { visible: boolean }) {
+  if (!visible) return null
+  return (
+    <div style={{
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 9999,
+      background: 'var(--sidebar)',
+      color: 'var(--text-light)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '12px',
+      padding: '10px 16px',
+      fontSize: '14px',
+      boxShadow: '0 -2px 8px rgba(0,0,0,0.3)',
+    }}>
+      <span>A new version is available.</span>
+      <button
+        onClick={() => window.location.reload()}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          background: 'var(--accent)',
+          color: 'var(--sidebar)',
+          border: 'none',
+          borderRadius: '4px',
+          padding: '6px 14px',
+          fontWeight: 600,
+          cursor: 'pointer',
+          fontSize: '13px',
+        }}
+      >
+        <RefreshCw size={14} strokeWidth={1.75} />
+        Reload
+      </button>
+    </div>
+  )
+}

frontend/src/hooks/useVersionCheck.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+const POLL_MS = 2 * 60 * 1000
+
+export function useVersionCheck(healthUrl: string) {
+  const [updateAvailable, setUpdateAvailable] = useState(false)
+
+  useEffect(() => {
+    let seenVersion: string | null = null
+
+    async function check() {
+      try {
+        const res = await fetch(healthUrl, { cache: 'no-store' })
+        if (!res.ok) return
+        const data = await res.json()
+        const v: string | undefined = data.version
+        if (!v) return
+        if (seenVersion === null) {
+          seenVersion = v
+        } else if (v !== seenVersion) {
+          setUpdateAvailable(true)
+        }
+      } catch {
+        // network error — skip silently
+      }
+    }
+
+    check()
+    const interval = setInterval(check, POLL_MS)
+
+    function onVisible() {
+      if (document.visibilityState === 'visible') check()
+    }
+    document.addEventListener('visibilitychange', onVisible)
+
+    return () => {
+      clearInterval(interval)
+      document.removeEventListener('visibilitychange', onVisible)
+    }
+  }, [healthUrl])
+
+  return updateAvailable
+}

frontend/vite.config.ts

@@ -1,7 +1,31 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
   base: '/maintenance/',
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Maintenance',
+        short_name: 'Maint.',
+        start_url: '/maintenance/',
+        scope: '/maintenance/',
+        display: 'standalone',
+        theme_color: '#b45309',
+        background_color: '#b45309',
+        icons: [
+          { src: '/maintenance/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/maintenance/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
+        ],
+      },
+      workbox: {
+        navigateFallback: '/maintenance/index.html',
+        navigateFallbackDenylist: [/\/api\//],
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+      },
+    }),
+  ],
 })