feat: Add deployment marker for cache verification

Users can't tell if they have the latest deployment due to browser caching.
Added visible build information on disclaimer page.

Changes:
- GitHub Actions: Create buildinfo.json with commit hash and timestamp
- JavaScript: Load buildinfo.json and display on disclaimer page
- CSS: Style build info line (small, dim, subtle)

Display format: "Build: a791a06 @ 12/16/2025, 2:45:23 AM"

Users can now compare the commit hash with the latest GitHub commit
to verify they have the current deployment. No more guessing about
cache issues.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: skeptomai

.github/workflows/deploy-pages.yml

@@ -34,6 +34,11 @@ jobs:
       - name: Build WASM
         run: wasm-pack build --target web --out-dir web/pkg --no-default-features --features wasm
 
+      - name: Create build info
+        run: |
+          echo "{\"commit\":\"${GITHUB_SHA:0:7}\",\"timestamp\":\"$(date -u +%Y-%m-%dT%H:%M:%SZ)\"}" > web/buildinfo.json
+          cat web/buildinfo.json
+
       - name: Setup Pages
         uses: actions/configure-pages@v4
 

web/css/terminal.css

@@ -436,7 +436,16 @@ body {
   text-align: center;
   color: var(--terminal-dim);
   margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.build-info {
+  text-align: center;
+  color: var(--terminal-dim);
+  font-size: 0.8em;
+  margin-top: 0;
   margin-bottom: 20px;
+  opacity: 0.7;
 }
 
 /* ============================================

web/js/main.js

@@ -112,13 +112,16 @@ function BlurToggle({ blurLevel, onToggle, disabled }) {
  * Disclaimer Component
  * Shown before loading the game with legal notices
  */
-function Disclaimer({ onContinue, onLoadOwn, theme, onThemeChange, font, onFontChange, crtEnabled, onCrtChange, blurLevel, onBlurChange, version }) {
+function Disclaimer({ onContinue, onLoadOwn, theme, onThemeChange, font, onFontChange, crtEnabled, onCrtChange, blurLevel, onBlurChange, version, buildInfo }) {
   const crtClass = crtEnabled ? `crt-enhanced crt-blur-${blurLevel || 'medium'}` : '';
   return html`
     <div class="terminal theme-${theme} font-${font} ${crtClass}">
       <div class="disclaimer">
         <h1 class="disclaimer-title">GRUESOME</h1>
         <p class="disclaimer-subtitle">Z-Machine Interpreter${version ? ` v${version}` : ''}</p>
+        ${buildInfo && html`
+          <p class="build-info">Build: ${buildInfo.commit} @ ${new Date(buildInfo.timestamp).toLocaleString()}</p>
+        `}
 
         <${ThemeToggle} theme=${theme} onToggle=${onThemeChange} />
         <${FontToggle} font=${font} onToggle=${onFontChange} />
@@ -204,6 +207,9 @@ function App() {
   // Interpreter version - fetch from WASM on load
   const [interpreterVersion, setInterpreterVersion] = useState(null);
 
+  // Build info for deployment tracking
+  const [buildInfo, setBuildInfo] = useState(null);
+
   // Game state (when playing with real WASM)
   const [gameState, setGameState] = useState({
     status: { location: '', score: 0, moves: 0 },
@@ -212,6 +218,23 @@ function App() {
     quit: false,
   });
 
+  // Load build info on app startup for deployment tracking
+  useEffect(() => {
+    async function loadBuildInfo() {
+      try {
+        const response = await fetch('./buildinfo.json');
+        if (response.ok) {
+          const info = await response.json();
+          setBuildInfo(info);
+          console.log('Build info:', info);
+        }
+      } catch (err) {
+        console.log('Could not load build info:', err);
+      }
+    }
+    loadBuildInfo();
+  }, []);
+
   // Load WASM module on app startup to fetch version
   // This runs once when the app loads, before the user clicks "Play Zork"
   // Version is pulled from Cargo.toml via CARGO_PKG_VERSION at build time
@@ -554,6 +577,7 @@ function App() {
           blurLevel=${settings.blurLevel || 'medium'}
           onBlurChange=${handleBlurChange}
           version=${interpreterVersion}
+          buildInfo=${buildInfo}
         />
       `;