diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
index b5e748e..b29a975 100644
--- a/.github/workflows/pr-preview.yml
+++ b/.github/workflows/pr-preview.yml
@@ -28,6 +28,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      - name: Embed version from package.json
+        run: yarn generate-version
+
       - name: Build standalone bundle
         run: yarn build:standalone
 
@@ -109,6 +112,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      - name: Embed version from package.json
+        run: yarn generate-version
+
       - name: Build standalone bundle
         run: |
           yarn build:standalone
diff --git a/src/components/ModeButtons.js b/src/components/ModeButtons.js
index 0735142..5bf3dbf 100644
--- a/src/components/ModeButtons.js
+++ b/src/components/ModeButtons.js
@@ -7,6 +7,7 @@
 /// <reference path="../types.js" />
 
 import { getModeDisplayName } from '../utils/calculations.js'
+import { getVersion } from '../utils/version.js'
 
 /**
  * Create mode switching UI with buttons and guidance panel
@@ -55,6 +56,13 @@ export function createModeSwitchingUI(modeCell, state, modeSwitchCallback, modes
     button.className = 'gram-frame-mode-btn'
     button.textContent = getModeDisplayName(modeType)
     button.dataset.mode = modeType
+
+    // Subtle version surface for debugging: hovering the Pan button reveals the
+    // GramFrame version. The tooltip shows even while the button is disabled
+    // (before the user has zoomed in), so it is always available on request.
+    if (modeType === 'pan') {
+      button.title = `GramFrame v${getVersion()}`
+    }
     
     // Set active state for current mode
     if (modeType === state.mode) {
diff --git a/src/core/state.js b/src/core/state.js
index f234f54..cb4fe0a 100644
--- a/src/core/state.js
+++ b/src/core/state.js
@@ -11,6 +11,7 @@ import { AnalysisMode } from '../modes/analysis/AnalysisMode.js'
 import { HarmonicsMode } from '../modes/harmonics/HarmonicsMode.js'
 import { DopplerMode } from '../modes/doppler/DopplerMode.js'
 import { PanMode } from '../modes/pan/PanMode.js'
+import { getVersion } from '../utils/version.js'
 
 /**
  * Build mode-specific initial state by collecting from all mode classes
@@ -34,7 +35,7 @@ function buildModeInitialState() {
  * @type {GramFrameState}
  */
 export const initialState = {
-  version: '0.0.1',
+  version: getVersion(),
   timestamp: new Date().toISOString(),
   instanceId: '',
   mode: 'analysis', // 'analysis', 'harmonics', 'doppler', 'pan'