diff --git a/.claude/launch.json b/.claude/launch.json
index 0e8d684..ddda633 100644
--- a/.claude/launch.json
+++ b/.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
     }
   ]
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7ebec05..607e35a 100644
--- a/frontend/src/App.tsx
+++ b/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 />} />
diff --git a/frontend/src/components/UpdateBanner.css b/frontend/src/components/UpdateBanner.css
new file mode 100644
index 0000000..3014d01
--- /dev/null
+++ b/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);
+}
diff --git a/frontend/src/components/UpdateBanner.tsx b/frontend/src/components/UpdateBanner.tsx
new file mode 100644
index 0000000..df5a093
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/frontend/src/sw.ts b/frontend/src/sw.ts
index 56b2e8a..4fe32af 100644
--- a/frontend/src/sw.ts
+++ b/frontend/src/sw.ts
@@ -7,7 +7,18 @@ import { NetworkFirst, NetworkOnly } from 'workbox-strategies'
 
 declare let self: ServiceWorkerGlobalScope
 
-self.skipWaiting()
+// 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.
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..ec878b7
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 22c2037..b54a58b 100644
--- a/frontend/vite.config.ts
+++ b/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',