feat: add desktop/mobile device toggle (User-Agent)

- Segmented Desktop / Mobile button in the form
- Desktop: Chrome 124 on Windows
- Mobile: iPhone Safari 17 (iOS 17.4)
- User-Agent injected into k6 script headers
- Stored in DB with migration for existing data
- History items show device pill alongside cache/gzip

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

frontend/app.js

@@ -39,6 +39,20 @@ gzipChk.addEventListener('change', () => {
     : 'Sends Accept-Encoding: identity — forces uncompressed response';
 });
 
+// Device toggle hint
+const UA = {
+  desktop: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
+  mobile:  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1',
+};
+const uaHint = document.getElementById('ua-hint');
+document.querySelectorAll('input[name="device"]').forEach(radio => {
+  radio.addEventListener('change', () => {
+    uaHint.textContent = radio.value === 'mobile'
+      ? 'iPhone Safari 17 (iOS 17.4)'
+      : 'Chrome 124 on Windows';
+  });
+});
+
 // ---- Run Test ----
 const form      = document.getElementById('test-form');
 const startBtn  = document.getElementById('start-btn');
@@ -60,6 +74,7 @@ form.addEventListener('submit', async (e) => {
   const headers     = document.getElementById('headers').value.trim() || '{}';
   const cacheMode   = document.getElementById('cacheMode').value;
   const gzip        = document.getElementById('gzip').checked;
+  const device      = document.querySelector('input[name="device"]:checked').value;
 
   // Validate headers JSON
   try { JSON.parse(headers); } catch {
@@ -80,7 +95,7 @@ form.addEventListener('submit', async (e) => {
     res = await fetch('/api/tests', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ url, vus, duration, rpsLimit, httpMethod, requestBody, headers, cacheMode, gzip }),
+      body: JSON.stringify({ url, vus, duration, rpsLimit, httpMethod, requestBody, headers, cacheMode, gzip, device }),
     });
   } catch (err) {
     alert('Failed to start test: ' + err.message);
@@ -238,6 +253,9 @@ async function loadHistory() {
       summaryLine = parts.join(' · ');
     }
 
+    const deviceBadge = t.device === 'mobile'
+      ? '<span class="pill mobile">&#128241; mobile</span>'
+      : '<span class="pill desktop">&#x1F5A5; desktop</span>';
     const cacheBadge = t.cache_mode === 'bust'
       ? '<span class="pill bust">cache-bust</span>'
       : t.cache_mode === 'no-cache'
@@ -253,7 +271,7 @@ async function loadHistory() {
           <span class="badge ${t.status}">${t.status}</span>
           <span class="url">${escHtml(t.url)}</span>
           <span class="meta">${t.http_method} · ${t.vus} VUs · ${dur}</span>
-          ${cacheBadge}${gzipBadge}
+          ${deviceBadge}${cacheBadge}${gzipBadge}
         </div>
         <div class="meta">${date}</div>
         ${summaryLine ? `<div class="history-summary">${escHtml(summaryLine)}</div>` : ''}