Added build ID to footer. Added check for client-server mismatch.

frontend/.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.vite
 dist
 dist-ssr
 *.local

frontend/src/App.svelte

@@ -17,14 +17,27 @@
   import Nav from './components/Nav.svelte'
   import SyncStatus from './components/SyncStatus.svelte'
 
+  const clientBuild = __BUILD_ID__
+
   let session = $state(null)
   let loading = $state(true)
   let route = $state(window.location.hash || '#/')
+  let updateAvailable = $state(false)
 
   // Check if this is a kiosk token URL before doing anything else
   const kioskToken = $derived(window.location.hash.match(/^#\/v\/([A-Z0-9]+)/i)?.[1] ?? '')
 
+  async function checkVersion() {
+    try {
+      const res = await fetch('/api/version')
+      const { build } = await res.json()
+      if (build && build !== clientBuild) updateAvailable = true
+    } catch {}
+  }
+
   onMount(async () => {
+    checkVersion()
+
     // Kiosk pages don't need auth
     if (kioskToken) {
       loading = false
@@ -40,6 +53,9 @@
     window.addEventListener('hashchange', () => {
       route = window.location.hash || '#/'
     })
+
+    // Periodically check for updates
+    setInterval(checkVersion, 60000)
   })
 
   function onLogin(s) {
@@ -58,6 +74,13 @@
   const role = $derived(session?.user?.role ?? '')
 </script>
 
+{#if updateAvailable}
+  <div class="update-banner">
+    A new version is available.
+    <button onclick={() => location.reload()}>Refresh</button>
+  </div>
+{/if}
+
 {#if loading}
   <!-- checking session -->
 {:else if kioskToken}
@@ -100,3 +123,45 @@
     </div>
   </div>
 {/if}
+
+<footer class="build-footer">{clientBuild}</footer>
+
+<style>
+  .build-footer {
+    position: fixed;
+    bottom: 4px;
+    right: 8px;
+    font-size: 11px;
+    color: var(--c-muted);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .update-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    padding: 8px 16px;
+    background: var(--c-accent);
+    color: white;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .update-banner button {
+    margin-left: 12px;
+    padding: 2px 12px;
+    border: 1px solid rgba(255,255,255,0.5);
+    border-radius: var(--radius);
+    background: transparent;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .update-banner button:hover {
+    background: rgba(255,255,255,0.15);
+  }
+</style>

frontend/vite.config.js

@@ -3,6 +3,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 export default defineConfig({
   plugins: [svelte()],
+  define: {
+    __BUILD_ID__: JSON.stringify(process.env.BUILD_ID || 'dev'),
+  },
   server: {
     proxy: {
       '/api': 'http://localhost:8180',