feat: move response body

apps/web/src/views/detail.ejs

@@ -175,10 +175,9 @@
 
     // ── Ping detail modal ──────────────────────────────────────────
     function openPingModal(ping) {
-      const body = document.getElementById('ping-modal-body');
+      const modalBody = document.getElementById('ping-modal-body');
       const meta = ping.meta || {};
       const headers = meta.headers || {};
-      const bodyPreview = meta.body_preview || null;
       const time = new Date(ping.checked_at);
       const scheduled = ping.scheduled_at ? new Date(ping.scheduled_at) : null;
 
@@ -223,17 +222,34 @@
         html += '</div></div>';
       }
 
-      // Body preview
-      if (bodyPreview) {
-        html += '<div>';
-        html += '<div class="text-xs text-gray-500 mb-1">Response Body <span class="text-gray-600">(up to 25KB)</span></div>';
-        html += `<pre class="bg-gray-800/50 border border-border-subtle rounded-lg px-3 py-2 text-xs font-mono text-gray-300 whitespace-pre-wrap break-all max-h-80 overflow-y-auto">${escapeHtml(bodyPreview)}</pre>`;
-        html += '</div>';
+      // Response body — loaded on demand
+      html += '<div id="ping-body-section">';
+      if (ping.id) {
+        html += '<div class="text-xs text-gray-500 mb-1">Response Body</div>';
+        html += '<div id="ping-body-content" class="bg-gray-800/50 border border-border-subtle rounded-lg px-3 py-2 text-xs font-mono text-gray-500 min-h-[2rem] flex items-center">Loading...</div>';
       }
+      html += '</div>';
 
       html += '</div>';
-      body.innerHTML = html;
+      modalBody.innerHTML = html;
       document.getElementById('ping-modal').classList.remove('hidden');
+
+      // Fetch body asynchronously
+      if (ping.id) {
+        api(`/pings/${ping.id}/body`).then(data => {
+          const el = document.getElementById('ping-body-content');
+          if (!el) return;
+          if (data.body) {
+            el.className = 'bg-gray-800/50 border border-border-subtle rounded-lg px-3 py-2 text-xs font-mono text-gray-300 whitespace-pre-wrap break-all max-h-80 overflow-y-auto';
+            el.textContent = data.body;
+          } else {
+            el.textContent = 'No body stored';
+          }
+        }).catch(() => {
+          const el = document.getElementById('ping-body-content');
+          if (el) el.textContent = 'Failed to load';
+        });
+      }
     }
 
     function closePingModal() {