Add PWA, wake lock, and fullscreen to relay app

- Add wake lock (keep screen awake) functionality
- Add fullscreen toggle button
- Add dynamic PWA manifest generation
- Add favicon and icons for all relay pages
- Copy icons from main web folder

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

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

macropad-relay/public/app.html

@@ -14,6 +14,12 @@
 
     <title>MacroPad</title>
 
+    <!-- PWA manifest will be dynamically set -->
+    <link rel="manifest" id="manifest-link">
+    <link rel="icon" type="image/png" href="/static/icons/favicon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
+    <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
+
     <style>
         :root {
             --bg-color: #2e2e2e;
@@ -81,6 +87,31 @@
 
         .header-btn:hover { background: var(--button-hover); }
 
+        .header-btn.icon-btn {
+            padding: 0.5rem 0.75rem;
+            font-size: 1.2rem;
+        }
+
+        .wake-lock-status {
+            display: flex;
+            align-items: center;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .wake-lock-status:hover { background: var(--button-bg); }
+        .wake-lock-status.active .wake-icon { color: var(--success-color); }
+        .wake-lock-status.unsupported { opacity: 0.3; cursor: default; }
+        .wake-lock-status.unsupported .wake-icon { color: #888; text-decoration: line-through; }
+
+        .wake-icon {
+            font-size: 1.2rem;
+            color: #888;
+            transition: color 0.2s;
+        }
+
         .tabs {
             display: flex;
             gap: 0.25rem;
@@ -230,6 +261,10 @@
                 <div class="status-dot"></div>
                 <span>Connecting...</span>
             </div>
+            <div class="wake-lock-status" id="wake-lock-status" title="Screen wake lock">
+                <span class="wake-icon">☀</span>
+            </div>
+            <button class="header-btn icon-btn" onclick="app.toggleFullscreen()" title="Toggle fullscreen">⛶</button>
             <button class="header-btn" onclick="app.refresh()">Refresh</button>
         </div>
     </header>
@@ -272,8 +307,13 @@
             }
 
             async init() {
+                this.wakeLock = null;
+                this.wakeLockEnabled = false;
+
+                this.setupPWA();
                 this.setupWebSocket();
                 this.setupEventListeners();
+                this.setupWakeLock();
             }
 
             getApiHeaders() {
@@ -465,6 +505,111 @@
                 this.loadTabs();
                 this.loadMacros();
             }
+
+            // Fullscreen
+            toggleFullscreen() {
+                if (!document.fullscreenElement) {
+                    document.documentElement.requestFullscreen().catch(err => {
+                        console.log('Fullscreen error:', err);
+                    });
+                } else {
+                    document.exitFullscreen();
+                }
+            }
+
+            // Wake Lock
+            async setupWakeLock() {
+                const status = document.getElementById('wake-lock-status');
+
+                if (!('wakeLock' in navigator)) {
+                    console.log('Wake Lock API not supported');
+                    if (status) {
+                        status.classList.add('unsupported');
+                        status.title = 'Wake lock not available (requires HTTPS)';
+                    }
+                    return;
+                }
+
+                if (status) {
+                    status.style.cursor = 'pointer';
+                    status.addEventListener('click', () => this.toggleWakeLock());
+                }
+
+                await this.requestWakeLock();
+
+                document.addEventListener('visibilitychange', async () => {
+                    if (document.visibilityState === 'visible' && this.wakeLockEnabled) {
+                        await this.requestWakeLock();
+                    }
+                });
+            }
+
+            async toggleWakeLock() {
+                if (this.wakeLock) {
+                    await this.wakeLock.release();
+                    this.wakeLock = null;
+                    this.wakeLockEnabled = false;
+                    this.updateWakeLockStatus(false);
+                    this.showToast('Screen can now sleep', 'info');
+                } else {
+                    this.wakeLockEnabled = true;
+                    await this.requestWakeLock();
+                    if (this.wakeLock) {
+                        this.showToast('Screen will stay awake', 'success');
+                    }
+                }
+            }
+
+            async requestWakeLock() {
+                try {
+                    this.wakeLock = await navigator.wakeLock.request('screen');
+                    this.wakeLockEnabled = true;
+                    this.updateWakeLockStatus(true);
+
+                    this.wakeLock.addEventListener('release', () => {
+                        this.updateWakeLockStatus(false);
+                    });
+                } catch (err) {
+                    console.log('Wake Lock error:', err);
+                    this.updateWakeLockStatus(false);
+                    const status = document.getElementById('wake-lock-status');
+                    if (status && !status.classList.contains('unsupported')) {
+                        status.title = 'Wake lock failed: ' + err.message;
+                    }
+                }
+            }
+
+            updateWakeLockStatus(active) {
+                const status = document.getElementById('wake-lock-status');
+                if (status) {
+                    status.classList.toggle('active', active);
+                    if (!status.classList.contains('unsupported')) {
+                        status.title = active ? 'Screen will stay on (click to toggle)' : 'Screen may sleep (click to enable)';
+                    }
+                }
+            }
+
+            // PWA manifest setup
+            setupPWA() {
+                // Create dynamic manifest for this session
+                const manifest = {
+                    name: 'MacroPad',
+                    short_name: 'MacroPad',
+                    description: 'Remote macro control',
+                    start_url: `/${this.sessionId}/app`,
+                    display: 'standalone',
+                    background_color: '#2e2e2e',
+                    theme_color: '#007acc',
+                    icons: [
+                        { src: '/static/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
+                        { src: '/static/icons/icon-512.png', sizes: '512x512', type: 'image/png' }
+                    ]
+                };
+
+                const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
+                const manifestUrl = URL.createObjectURL(blob);
+                document.getElementById('manifest-link').setAttribute('href', manifestUrl);
+            }
         }
 
         let app;

macropad-relay/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MacroPad Relay</title>
+    <link rel="icon" type="image/png" href="/static/icons/favicon.png">
     <style>
         * {
             margin: 0;

macropad-relay/public/login.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MacroPad - Login</title>
+    <link rel="icon" type="image/png" href="/static/icons/favicon.png">
     <style>
         * {
             box-sizing: border-box;