feat: Add build version watermark to staging site

- Added version watermark in bottom-right corner (staging only)
- Shows git commit hash and deployment timestamp
- Helps verify cache invalidation is working
- Automatically injected by deployment script during staging deploy
- Hidden on production

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

Author: skeptomai

frontend/app.js

@@ -450,6 +450,19 @@ async function initApp() {
         await loadGameLibrary();
         await checkAdminRole();  // Check if user is admin
     }
+
+    // Show version watermark on staging
+    const isStaging = API_BASE.includes('staging') || API_BASE.includes('localhost');
+    if (isStaging) {
+        const watermark = document.getElementById('version-watermark');
+        const buildVersion = document.getElementById('build-version');
+        if (watermark && buildVersion) {
+            // Build version will be injected by deployment script
+            // Format: COMMIT_HASH @ TIMESTAMP
+            buildVersion.textContent = buildVersion.textContent || 'DEV';
+            watermark.style.display = 'block';
+        }
+    }
 }
 
 // Logout

frontend/index.html

@@ -400,6 +400,11 @@ <h3 onclick="toggleVisualSettings()" style="cursor: pointer;">
         </defs>
     </svg>
 
+    <!-- Version watermark for staging (shows deployment info) -->
+    <div id="version-watermark" style="position: fixed; bottom: 0; right: 0; background: rgba(0,0,0,0.7); color: #666; padding: 5px 10px; font-size: 10px; font-family: monospace; z-index: 9999; display: none;">
+        Build: <span id="build-version">DEV</span>
+    </div>
+
     <script type="module" src="app.js"></script>
 </body>
 </html>

infrastructure/scripts/deploy-frontend.sh

@@ -34,9 +34,27 @@ echo ""
 # Navigate to frontend directory
 cd "$(dirname "$0")/../../frontend"
 
+# Generate build version info (git commit hash + timestamp)
+COMMIT_HASH=$(git -C .. rev-parse --short HEAD 2>/dev/null || echo "unknown")
+BUILD_TIME=$(date -u +"%Y-%m-%d %H:%M UTC")
+BUILD_VERSION="${COMMIT_HASH} @ ${BUILD_TIME}"
+
+echo "Build version: $BUILD_VERSION"
+echo ""
+
+# Inject build version into HTML (only for staging)
+if [ "$ENV" == "staging" ]; then
+    # Create temporary HTML with build version injected
+    sed "s/<span id=\"build-version\">DEV<\/span>/<span id=\"build-version\">$BUILD_VERSION<\/span>/" index.html > index.tmp.html
+    mv index.tmp.html index.deploy.html
+else
+    # Use original HTML for production (no watermark)
+    cp index.html index.deploy.html
+fi
+
 # Upload files to S3
 echo "Uploading files to S3..."
-aws s3 cp index.html "s3://$BUCKET/index.html" \
+aws s3 cp index.deploy.html "s3://$BUCKET/index.html" \
     --content-type "text/html" \
     --cache-control "no-cache, no-store, must-revalidate" \
     --metadata-directive REPLACE
@@ -85,3 +103,6 @@ echo "URL: https://$DOMAIN"
 echo ""
 echo "Note: CloudFront invalidation may take 1-3 minutes"
 echo "Check status: aws cloudfront get-invalidation --distribution-id $DISTRIBUTION_ID --id $INVALIDATION_ID"
+
+# Cleanup temporary file
+rm -f index.deploy.html