fix(notices): hand the release notice only to a bundle built for the running version

After an update the service worker keeps serving the previous bundle until
the new one is installed. That shell announces the release layout too, so
the layout alone let it draw the notice with its own older texts and use it
up for the version now running with one click on X.

The bundle now sends the version it was built as (client/package.json, baked
in by define), and the server compares it with its own before it hands a
notice with a release block over. A shell of another version is told nothing
and gets the notice after the reload, from the bundle that can draw it. This
holds for every update, not only the one that introduced the parameter.

client/src/store/systemNoticeStore.ts

@@ -7,6 +7,10 @@ import { systemNoticeDtoSchema, type SystemNoticeDto } from '@trek/shared';
 // SystemNoticeBanner/Modal consumers don't need to change their imports.
 export type SystemNoticeDTO = SystemNoticeDto;
 
+// Baked in by `define` in vite.config.js; a build without it (a bare tsc run) sends
+// nothing and therefore gets no release notice, which is the safe side.
+const UI_VERSION: string = typeof __TREK_UI_VERSION__ === 'string' ? __TREK_UI_VERSION__ : '';
+
 interface SystemNoticeState {
   notices: SystemNoticeDTO[];
   loaded: boolean;
@@ -25,12 +29,14 @@ export const useSystemNoticeStore = create<SystemNoticeState>()((set, get) => ({
     if (get().fetching || get().loaded) return;
     set({ fetching: true });
     try {
-      // Names the layouts this bundle can draw. The server holds the release notice
-      // back from a bundle that does not say so: after an update the service worker
+      // Names the layouts this bundle can draw and the version it was built as. The
+      // server hands the release notice only to a bundle that can draw it AND was
+      // built for the version the server runs: after an update the service worker
       // serves the previous bundle until the new one is installed, and that bundle
-      // would draw the release notice as bare keys and let the reader dismiss it for
-      // good. It gets the notice after the reload, from this very line.
-      const res = await axios.get('/system-notices/active', { params: { supports: 'release' } });
+      // would draw the release notice as bare keys or with its own older texts, and
+      // let the reader dismiss it for good. It gets the notice after the reload,
+      // from this very line.
+      const res = await axios.get('/system-notices/active', { params: { supports: 'release', ui: UI_VERSION } });
       const notices = parseInDev(systemNoticeDtoSchema.array(), res.data, 'systemNotices.fetch');
       set({ notices, loaded: true, fetching: false });
     } catch (err) {

client/src/vite-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="vite/client" />
 /// <reference types="vitest/globals" />
+
+/** The version this bundle was built as (client/package.json), set by `define` in vite.config.js. */
+declare const __TREK_UI_VERSION__: string;

client/tests/unit/stores/systemNoticeStore.test.ts

@@ -15,7 +15,7 @@ describe('systemNoticeStore', () => {
   // can draw the release layout, so an older bundle never shows it as bare keys and
   // never dismisses it for good. This bundle has to announce it on every fetch.
   describe('FE-SYSNOTICE-001: fetch() announces the layouts this bundle can draw', () => {
-    it('sends supports=release with the active-notices request', async () => {
+    it('sends supports=release and the version this bundle was built as', async () => {
       const urls: URL[] = [];
       server.use(
         http.get('/api/system-notices/active', ({ request }) => {
@@ -28,6 +28,10 @@ describe('systemNoticeStore', () => {
 
       expect(urls).toHaveLength(1);
       expect(urls[0].searchParams.get('supports')).toBe('release');
+      // The value `define` bakes in from client/package.json: the server compares it
+      // with its own version before it hands the release notice over.
+      expect(urls[0].searchParams.get('ui')).toBe(__TREK_UI_VERSION__);
+      expect(urls[0].searchParams.get('ui')).toMatch(/^\d+\.\d+\.\d+/);
       expect(useSystemNoticeStore.getState().loaded).toBe(true);
     });
 

client/vite.config.js

@@ -3,6 +3,13 @@ import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { rtlTextAlias } from './rtlTextAlias.js';
+import { readFileSync } from 'node:fs';
+
+// The version this bundle is built as, baked in at build time. The release image
+// bumps every package.json before it builds, so this matches the server's
+// APP_VERSION there; a source checkout matches the server's own package.json.
+// The server hands the release notice only to a bundle built for its version.
+const UI_VERSION = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8')).version;
 
 // `npm run build:analyze` writes dist/stats.html — a treemap of what actually ended
 // up in each chunk. The plain build only reports chunk sizes, which tells you a chunk
@@ -13,6 +20,7 @@ const DEV_PORT = Number(process.env.TREK_DEV_PORT) || 5173;
 const API_TARGET = process.env.TREK_DEV_API || 'http://localhost:3001';
 
 export default defineConfig(({ mode }) => ({
+  define: { __TREK_UI_VERSION__: JSON.stringify(UI_VERSION) },
   plugins: [
     react(),
     mode === 'analyze' &&

client/vitest.config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import { rtlTextAlias } from './rtlTextAlias.js';
+import { readFileSync } from 'node:fs';
+
+const UI_VERSION = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8')).version;
 
 export default defineConfig({
+  define: { __TREK_UI_VERSION__: JSON.stringify(UI_VERSION) },
   plugins: [react()],
   test: {
     alias: [rtlTextAlias],