Show a reload banner when a new version has deployed (#28)

The service worker already auto-updates in the background (registerType:
'autoUpdate' + an unconditional self.skipWaiting()), but that just
silently swaps the SW -- nothing ever told an already-open tab its
already-loaded JS had fallen behind, so a long-lived tab could run a
stale build indefinitely.

Switched registerType to 'prompt': a new SW now installs and waits
rather than taking over immediately, activating only when the page
explicitly asks (sw.ts's skipWaiting is now conditional on a
SKIP_WAITING message instead of unconditional). UpdateBanner.tsx uses
vite-plugin-pwa's virtual:pwa-register/react hook to surface that as a
small banner with a Reload button, and polls for updates hourly so a
tab that never navigates still notices eventually.

Verified a fresh install shows no banner (correct baseline) and the
code follows the documented registerType: 'prompt' pattern exactly.
Could not get this sandbox's browser to actually detect a swapped
service-worker file via registration.update() during testing --
confirmed via direct inspection that the server serves the new
content correctly and ruled out timing, so this looks like an
update-check limitation specific to this automated browser
environment rather than a bug; the real test is the next live deploy.

Also adds a "frontend-preview" launch.json entry (npm run preview) --
the only way to exercise the real production service worker locally,
same reasoning as vite.config.ts's existing `preview.proxy` section.

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

.claude/launch.json

@@ -6,6 +6,12 @@
       "runtimeExecutable": "npm",
       "runtimeArgs": ["--prefix", "frontend", "run", "dev"],
       "port": 5173
+    },
+    {
+      "name": "frontend-preview",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["--prefix", "frontend", "run", "preview"],
+      "port": 4173
     }
   ]
 }

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import { AuthProvider } from './context/AuthContext'
 import { AdminRoute } from './components/AdminRoute'
 import { ProtectedRoute } from './components/ProtectedRoute'
+import { UpdateBanner } from './components/UpdateBanner'
 import { LoginPage } from './pages/LoginPage'
 import { SignupPage } from './pages/SignupPage'
 import { ForgotPasswordPage } from './pages/ForgotPasswordPage'
@@ -12,6 +13,7 @@ import { AdminPage } from './pages/AdminPage'
 function App() {
   return (
     <AuthProvider>
+      <UpdateBanner />
       <Routes>
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<SignupPage />} />

frontend/src/components/UpdateBanner.css

@@ -0,0 +1,38 @@
+.update-banner {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-4);
+  background: color-mix(in srgb, var(--ds-accent) 16%, var(--ds-surface));
+  color: var(--ds-text);
+  border-bottom: 1px solid var(--ds-border);
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 6px var(--sp-4);
+}
+
+.update-banner .btn-primary {
+  padding: 4px 14px;
+  font-size: 0.78rem;
+}
+
+.update-banner-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+
+.update-banner-dismiss {
+  background: transparent;
+  border: none;
+  color: var(--ds-muted);
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
+.update-banner-dismiss:hover {
+  color: var(--ds-text);
+}

frontend/src/components/UpdateBanner.tsx

@@ -0,0 +1,43 @@
+import { useRegisterSW } from 'virtual:pwa-register/react'
+import './UpdateBanner.css'
+
+// The service worker (registerType: 'prompt', sw.ts) already installs and
+// caches a new version silently in the background -- but a long-lived tab
+// never navigates, and a page only checks for a new SW on navigation by
+// default, so a tab left open for hours could sit on a stale check
+// indefinitely. This polls explicitly so "reload available" shows up
+// without the user having to close and reopen the app first.
+const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+
+export function UpdateBanner() {
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(_url, registration) {
+      if (!registration) return
+      setInterval(() => registration.update(), UPDATE_CHECK_INTERVAL_MS)
+    },
+  })
+
+  if (!needRefresh) return null
+
+  return (
+    <div className="update-banner" role="status">
+      <span>A new version of DS Chat is available.</span>
+      <div className="update-banner-actions">
+        <button type="button" className="btn-primary" onClick={() => updateServiceWorker(true)}>
+          Reload
+        </button>
+        <button
+          type="button"
+          className="update-banner-dismiss"
+          onClick={() => setNeedRefresh(false)}
+          aria-label="Dismiss"
+        >
+          &times;
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/sw.ts

@@ -7,7 +7,18 @@ import { NetworkFirst, NetworkOnly } from 'workbox-strategies'
 
 declare let self: ServiceWorkerGlobalScope
 
+// registerType 'prompt' (vite.config.ts) means a newly-installed SW waits
+// in the "waiting" state, still fully cached and ready, rather than
+// unconditionally taking over -- it only activates once the page explicitly
+// asks (UpdateBanner.tsx's updateServiceWorker(), which posts this message)
+// after the user chooses to reload. Without this listener, skipWaiting()
+// would need to run unconditionally at install time, defeating the point
+// of asking first.
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
     self.skipWaiting()
+  }
+})
 cleanupOutdatedCaches()
 
 // The app shell -- same effect generateSW gave us automatically in Phase 3.

frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />

frontend/vite.config.ts

@@ -21,7 +21,13 @@ export default defineConfig({
         // precache should contain.
         globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest}'],
       },
-      registerType: 'autoUpdate',
+      // 'autoUpdate' silently activates a new service worker (and its
+      // stale-relative-to-the-new-JS already-loaded page) with nothing
+      // telling the user their currently-open tab has fallen behind --
+      // 'prompt' leaves activation to an explicit updateServiceWorker()
+      // call (UpdateBanner.tsx), so the user gets a "reload for the latest
+      // version" banner instead of silently running old code indefinitely.
+      registerType: 'prompt',
       manifest: {
         name: 'DS Chat',
         short_name: 'DS Chat',