Fix Cloudflare caching serving stale JS/CSS

Root cause: Cloudflare CDN was caching old static assets, so the
browser never received the updated JS with mode tab click handlers.

Fix: Add cache-busting query strings (?v=<timestamp>) to static
asset URLs, generated at container startup time. Every deploy
gets a new timestamp, forcing CDN to fetch fresh files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.py

@@ -1,6 +1,7 @@
 """ASCII Art Generator - FastAPI Web Application."""
 
 import tempfile
+import time
 import os
 from pathlib import Path
 
@@ -23,6 +24,7 @@ app.mount("/static", StaticFiles(directory=BASE_DIR / "static"), name="static")
 templates = Jinja2Templates(directory=BASE_DIR / "templates")
 
 MAX_UPLOAD_SIZE = 10 * 1024 * 1024  # 10MB
+CACHE_BUST = str(int(time.time()))
 ALLOWED_TYPES = {"image/png", "image/jpeg", "image/gif", "image/webp", "image/bmp"}
 
 
@@ -33,6 +35,7 @@ async def index(request: Request):
         "palettes": list(PALETTES.keys()),
         "palette_previews": {k: v[:12] for k, v in PALETTES.items()},
         "patterns": PATTERN_TYPES,
+        "cache_bust": CACHE_BUST,
     })
 
 

templates/index.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ASCII Art Generator</title>
-<link rel="stylesheet" href="/static/style.css">
+<link rel="stylesheet" href="/static/style.css?v={{ cache_bust }}">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
 </head>
@@ -127,6 +127,6 @@
   <p>Powered by Unicode &middot; <a href="https://jeffemmett.com">jeffemmett.com</a></p>
 </footer>
 
-<script src="/static/app.js"></script>
+<script src="/static/app.js?v={{ cache_bust }}"></script>
 </body>
 </html>