feat: disable PWA and add developer tools for cache management

- Disable PWA service worker registration to fix refresh issues
- Add cache clearing utilities (clearAllCache, hardRefresh, checkCacheStatus)
- Modify service worker to skip caching in development (localhost)
- Add Developer Tools section in settings with:
- Cache management buttons (Clear All Cache, Hard Refresh, Check Status)
- Storage management (Clear Local Storage)
- PWA status indicator
- Add CSS styles for developer tools interface
- Provide multiple solutions for PWA-related refresh problems

This addresses the issue where PWA caching was interfering with page refresh behavior during development.

public/sw.js

@@ -38,6 +38,15 @@ self.addEventListener('activate', event => {
 
 // Fetch event - serve from cache if available, otherwise fetch from network
 self.addEventListener('fetch', event => {
+  // Skip caching for localhost/development
+  const isLocalhost = event.request.url.includes('localhost') || event.request.url.includes('127.0.0.1');
+  
+  if (isLocalhost) {
+    // In development, always fetch from network (no caching)
+    event.respondWith(fetch(event.request));
+    return;
+  }
+  
   event.respondWith(
     caches.match(event.request)
       .then(response => {

src/components/Settings.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { clearAllCache, hardRefresh, checkCacheStatus } from '../utils/clearCache';
 
 function Settings({
   profiles,
@@ -706,6 +707,96 @@ function Settings({
           )}
         </div>
 
+        {/* Developer Tools Section */}
+        <div className="profiles-section">
+          <h3>Developer Tools</h3>
+          <div className="developer-tools-section">
+            <div className="tool-group">
+              <h4>Cache Management</h4>
+              <p className="tool-description">Clear PWA cache and service workers that might interfere with page refreshing.</p>
+              
+              <div className="tool-buttons">
+                <button
+                  type="button"
+                  className="dev-tool-button"
+                  onClick={async () => {
+                    try {
+                      await clearAllCache();
+                      alert('Cache cleared successfully! Page will refresh.');
+                      window.location.reload();
+                    } catch (error) {
+                      alert('Error clearing cache: ' + error.message);
+                    }
+                  }}
+                >
+                  Clear All Cache
+                </button>
+                
+                <button
+                  type="button"
+                  className="dev-tool-button secondary"
+                  onClick={async () => {
+                    try {
+                      await hardRefresh();
+                    } catch (error) {
+                      alert('Error performing hard refresh: ' + error.message);
+                    }
+                  }}
+                >
+                  Hard Refresh
+                </button>
+                
+                <button
+                  type="button"
+                  className="dev-tool-button secondary"
+                  onClick={async () => {
+                    try {
+                      await checkCacheStatus();
+                      alert('Check console for cache status details');
+                    } catch (error) {
+                      alert('Error checking cache status: ' + error.message);
+                    }
+                  }}
+                >
+                  Check Cache Status
+                </button>
+              </div>
+            </div>
+            
+            <div className="tool-group">
+              <h4>Storage Management</h4>
+              <p className="tool-description">Clear local storage data including chat history and settings.</p>
+              
+              <div className="tool-buttons">
+                <button
+                  type="button"
+                  className="dev-tool-button warning"
+                  onClick={() => {
+                    if (confirm('This will clear all local data including chat history. Are you sure?')) {
+                      localStorage.clear();
+                      sessionStorage.clear();
+                      alert('Local storage cleared! Page will refresh.');
+                      window.location.reload();
+                    }
+                  }}
+                >
+                  Clear Local Storage
+                </button>
+              </div>
+            </div>
+            
+            <div className="tool-group">
+              <h4>PWA Status</h4>
+              <p className="tool-description">PWA (Progressive Web App) functionality is currently disabled to improve page refresh behavior.</p>
+              
+              <div className="pwa-info">
+                <span className="status-indicator disabled">PWA Disabled</span>
+                <small>Service worker registration is commented out in main.jsx</small>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div className="settings-actions">
           <button type="submit" className="save-button">Save Settings</button>
           <button type="button" className="cancel-button" onClick={onCloseSettings}>Cancel</button>

src/index.css

@@ -2,6 +2,113 @@
 @import './styles/mcp.css';
 @import './styles/mcp-settings.css';
 
+/* Developer Tools Styles */
+.developer-tools-section {
+  background: var(--background-secondary);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.tool-group {
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 1rem;
+}
+
+.tool-group:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.tool-group h4 {
+  color: var(--text-color);
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.tool-description {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.tool-buttons {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.dev-tool-button {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--background-primary);
+  color: var(--text-color);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-weight: 500;
+}
+
+.dev-tool-button:hover {
+  background: var(--background-secondary);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.dev-tool-button.secondary {
+  background: var(--background-secondary);
+  color: var(--text-secondary);
+}
+
+.dev-tool-button.secondary:hover {
+  background: var(--background-tertiary);
+  color: var(--text-color);
+}
+
+.dev-tool-button.warning {
+  background: var(--warning-light);
+  color: var(--warning-color);
+  border-color: var(--warning-color);
+}
+
+.dev-tool-button.warning:hover {
+  background: var(--warning-color);
+  color: white;
+}
+
+.pwa-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--background-tertiary);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+
+.status-indicator {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.status-indicator.disabled {
+  background: var(--error-light);
+  color: var(--error-color);
+}
+
+.pwa-info small {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/main.jsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './tailwind.css'
 import './index.css'
-import { register as registerServiceWorker } from './serviceWorkerRegistration'
+// import { register as registerServiceWorker } from './serviceWorkerRegistration'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
@@ -11,5 +11,5 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   </React.StrictMode>,
 )
 
-// Register service worker for PWA functionality
-registerServiceWorker()
+// PWA functionality disabled to allow proper refreshing
+// registerServiceWorker()

src/utils/clearCache.js

@@ -0,0 +1,68 @@
+// Utility to clear PWA cache and service worker
+
+export async function clearAllCache() {
+  try {
+    // Unregister all service workers
+    if ('serviceWorker' in navigator) {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      for (let registration of registrations) {
+        await registration.unregister();
+        console.log('Service worker unregistered:', registration);
+      }
+    }
+
+    // Clear all caches
+    if ('caches' in window) {
+      const cacheNames = await caches.keys();
+      await Promise.all(
+        cacheNames.map(cacheName => {
+          console.log('Deleting cache:', cacheName);
+          return caches.delete(cacheName);
+        })
+      );
+    }
+
+    // Clear localStorage and sessionStorage
+    localStorage.clear();
+    sessionStorage.clear();
+
+    console.log('All cache and storage cleared!');
+    return true;
+  } catch (error) {
+    console.error('Error clearing cache:', error);
+    return false;
+  }
+}
+
+export async function hardRefresh() {
+  await clearAllCache();
+  
+  // Force hard refresh
+  if (typeof window !== 'undefined') {
+    // Try different hard refresh methods
+    if (window.location.reload) {
+      window.location.reload(true); // Force reload
+    } else {
+      window.location.href = window.location.href;
+    }
+  }
+}
+
+// Debug function to check cache status
+export async function checkCacheStatus() {
+  if ('caches' in window) {
+    const cacheNames = await caches.keys();
+    console.log('Active caches:', cacheNames);
+    
+    for (const cacheName of cacheNames) {
+      const cache = await caches.open(cacheName);
+      const requests = await cache.keys();
+      console.log(`Cache ${cacheName} contains:`, requests.map(req => req.url));
+    }
+  }
+  
+  if ('serviceWorker' in navigator) {
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    console.log('Active service workers:', registrations);
+  }
+}