From e961cd0a60723cb695fcd6e6ffce9e9e9159c4ac Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sun, 30 Nov 2025 02:22:13 -0500
Subject: [PATCH] Move technical status front and center, fix SW caching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add no-cache headers to sw.js endpoint to prevent aggressive caching
- Move system status grid to top of offline page for debugging
- Show connection status, SW version, cache storage, bible data, pages cached
- Add SW version check that reads from actual sw.js file
- Keep download progress indicator in download section
- Move cached pages list to collapsible details

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/server.py              |   7 +-
 kjvstudy_org/templates/offline.html | 108 ++++++++++++++++++----------
 2 files changed, 75 insertions(+), 40 deletions(-)

diff --git a/kjvstudy_org/server.py b/kjvstudy_org/server.py
index 9424844..9ea3ebf 100644
--- a/kjvstudy_org/server.py
+++ b/kjvstudy_org/server.py
@@ -228,7 +228,12 @@ async def service_worker():
     return FileResponse(
         sw_path,
         media_type="application/javascript",
-        headers={"Service-Worker-Allowed": "/"}
+        headers={
+            "Service-Worker-Allowed": "/",
+            "Cache-Control": "no-cache, no-store, must-revalidate",
+            "Pragma": "no-cache",
+            "Expires": "0"
+        }
     )
 
 app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
diff --git a/kjvstudy_org/templates/offline.html b/kjvstudy_org/templates/offline.html
index 55a96b9..d028f49 100644
--- a/kjvstudy_org/templates/offline.html
+++ b/kjvstudy_org/templates/offline.html
@@ -320,7 +320,19 @@
     border-top: 1px solid var(--border-color);
 }
 
-/* Technical Details */
+/* Technical Status Section */
+.tech-section {
+    margin-bottom: 3rem;
+}
+
+.tech-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+/* Technical Details (collapsed) */
 .tech-details {
     margin-bottom: 3rem;
 }
@@ -349,13 +361,6 @@
     content: '- ';
 }
 
-.tech-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
 .tech-item {
     padding: 1rem;
     border: 1px solid var(--border-color);
@@ -514,6 +519,37 @@
     <p class="intro-text"><span class="newthought">Access the scriptures</span> anywhere, anytime. Download all ~48,000 pages including every chapter, verse commentary, interlinear text, Bible stories, and study resources for complete offline access.</p>
 </div>
 
+<!-- Technical Status (front and center for debugging) -->
+<div class="tech-section">
+    <h2 class="category-title">System Status</h2>
+    <div class="tech-grid">
+        <div class="tech-item">
+            <dt>Connection</dt>
+            <dd id="connection-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
+            <dt>Service Worker</dt>
+            <dd id="sw-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
+            <dt>Cache Storage</dt>
+            <dd id="cache-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
+            <dt>Bible Data</dt>
+            <dd id="bible-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
+            <dt>Pages Cached</dt>
+            <dd id="pages-cached">Checking...</dd>
+        </div>
+        <div class="tech-item">
+            <dt>SW Version</dt>
+            <dd id="sw-version">Checking...</dd>
+        </div>
+    </div>
+</div>
+
 <!-- Status Section -->
 <div class="status-section">
     <div class="status-card" id="status-card">
@@ -522,7 +558,6 @@
             <div class="status-title" id="status-title">Checking status...</div>
             <div class="status-detail" id="status-detail">Please wait</div>
         </div>
-        <span class="connection-badge" id="connection-badge">...</span>
     </div>
 </div>
 
@@ -599,32 +634,11 @@
     </div>
 </div>
 
-<!-- Technical Details -->
+<!-- Cached Pages -->
 <details class="tech-details">
-    <summary>Technical Details</summary>
-    <div class="tech-grid">
-        <div class="tech-item">
-            <dt>Service Worker</dt>
-            <dd id="sw-status">Checking...</dd>
-        </div>
-        <div class="tech-item">
-            <dt>Cache Storage</dt>
-            <dd id="cache-status">Checking...</dd>
-        </div>
-        <div class="tech-item">
-            <dt>Bible Data</dt>
-            <dd id="bible-status">Checking...</dd>
-        </div>
-        <div class="tech-item">
-            <dt>Pages Cached</dt>
-            <dd id="pages-cached">Checking...</dd>
-        </div>
-    </div>
-    <div class="cached-section">
-        <h3>Cached Pages <span id="cached-count" style="color: #4a7c59;">0</span></h3>
-        <div id="cached-links" class="url-categories">
-            <p style="color: var(--text-secondary); font-size: 0.9rem;">Scanning cache...</p>
-        </div>
+    <summary>Cached Pages (<span id="cached-count" style="color: #4a7c59;">0</span>)</summary>
+    <div id="cached-links" class="url-categories">
+        <p style="color: var(--text-secondary); font-size: 0.9rem;">Scanning cache...</p>
     </div>
 </details>
 {% endblock %}
@@ -632,8 +646,9 @@
 {% block extra_js %}
 <script>
 (function() {
-    const connectionBadge = document.getElementById('connection-badge');
+    const connectionStatus = document.getElementById('connection-status');
     const swStatus = document.getElementById('sw-status');
+    const swVersion = document.getElementById('sw-version');
     const cacheStatus = document.getElementById('cache-status');
     const bibleStatus = document.getElementById('bible-status');
     const pagesCached = document.getElementById('pages-cached');
@@ -655,17 +670,32 @@
 
     function updateConnectionStatus() {
         if (navigator.onLine) {
-            connectionBadge.textContent = 'Online';
-            connectionBadge.className = 'connection-badge badge-online';
+            connectionStatus.innerHTML = '<span class="tech-ok">Online</span>';
         } else {
-            connectionBadge.textContent = 'Offline';
-            connectionBadge.className = 'connection-badge badge-offline';
+            connectionStatus.innerHTML = '<span class="tech-error">Offline</span>';
         }
     }
     updateConnectionStatus();
     window.addEventListener('online', updateConnectionStatus);
     window.addEventListener('offline', updateConnectionStatus);
 
+    // Check SW version from the actual sw.js file
+    async function checkSwVersion() {
+        try {
+            const response = await fetch('/sw.js?t=' + Date.now());
+            const text = await response.text();
+            const match = text.match(/CACHE_VERSION\s*=\s*['"]([^'"]+)['"]/);
+            if (match) {
+                swVersion.innerHTML = '<span class="tech-ok">' + match[1] + '</span>';
+            } else {
+                swVersion.innerHTML = '<span class="tech-error">Unknown</span>';
+            }
+        } catch (err) {
+            swVersion.innerHTML = '<span class="tech-error">Error</span>';
+        }
+    }
+    checkSwVersion();
+
     async function checkServiceWorker() {
         if ('serviceWorker' in navigator) {
             try {