feat(dashboard): HB-022 — request feed with pagination

Implement request feed view: show captured requests per hook with method
badges, path, size, source IP, and relative time. Load more pagination,
hook name header with ingestion URL, breadcrumb back to hook list, empty
state, and "Showing X of Y" counter.

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

Author: copyleftdev

ui/assets/app.js

@@ -224,9 +224,100 @@ async function renderHookList() {
   });
 }
 
+// --- Request Feed View ---
 async function renderRequestFeed(hookId) {
   show('view-requests');
-  $('#view-requests').innerHTML = '<p class="empty-state">Loading requests...</p>';
+  const el = $('#view-requests');
+  el.innerHTML = '<p class="empty-state">Loading requests...</p>';
+
+  const hook = await api.get('/api/hooks/' + hookId);
+  const origin = location.origin;
+  const ingestUrl = origin + hook.url;
+
+  let offset = 0;
+  const limit = 50;
+
+  async function loadRequests(append) {
+    const data = await api.get('/api/hooks/' + hookId + '/requests?limit=' + limit + '&offset=' + offset);
+    const requests = data.requests || [];
+    const total = data.total || 0;
+
+    if (!append) {
+      let html = '<div class="breadcrumb"><a href="#/hooks">Hooks</a> / ' + escapeHtml(hook.name) + '</div>';
+      html += '<div class="url-box" style="margin-bottom:16px;">';
+      html += '<span style="flex:1;">' + escapeHtml(ingestUrl) + '</span>';
+      html += '<button class="btn btn-small btn-copy-feed-url" data-url="' + escapeHtml(ingestUrl) + '">copy</button>';
+      html += '</div>';
+      html += '<div class="toolbar">';
+      html += '<span class="status-text" id="feed-status"></span>';
+      html += '</div>';
+      html += '<div id="request-list"></div>';
+      html += '<div id="feed-footer" style="text-align:center;margin:16px 0;"></div>';
+      el.innerHTML = html;
+
+      el.querySelector('.btn-copy-feed-url').addEventListener('click', (e) => {
+        e.stopPropagation();
+        copyText(e.target.dataset.url);
+      });
+    }
+
+    const listEl = document.getElementById('request-list');
+    const statusEl = document.getElementById('feed-status');
+    const footerEl = document.getElementById('feed-footer');
+
+    const currentCount = listEl.querySelectorAll('.card').length + requests.length;
+    statusEl.textContent = 'Showing ' + currentCount + ' of ' + total;
+
+    if (total === 0 && !append) {
+      listEl.innerHTML = '<p class="empty-state">No requests captured yet. Send a webhook to ' + escapeHtml(ingestUrl) + '</p>';
+      footerEl.innerHTML = '';
+      return;
+    }
+
+    let cards = '';
+    for (const req of requests) {
+      cards += '<div class="card card-clickable" data-hook-id="' + escapeHtml(hookId) + '" data-request-id="' + escapeHtml(req.request_id) + '">';
+      cards += '<div class="card-header">';
+      cards += '<span>' + methodBadge(req.method) + ' <span style="color:var(--text-muted);">' + escapeHtml(req.path) + '</span></span>';
+      cards += '<span class="card-meta" style="margin:0;">' + timeAgo(req.received_at) + '</span>';
+      cards += '</div>';
+      cards += '<div class="card-meta">';
+      cards += '<span>' + formatBytes(req.content_length) + '</span>';
+      cards += '<span>' + escapeHtml(req.source_ip) + '</span>';
+      cards += '</div>';
+      cards += '</div>';
+    }
+
+    if (append) {
+      listEl.insertAdjacentHTML('beforeend', cards);
+    } else {
+      listEl.innerHTML = cards;
+    }
+
+    // Click to view detail
+    listEl.querySelectorAll('.card-clickable').forEach(card => {
+      card.onclick = () => {
+        navigate('/hooks/' + card.dataset.hookId + '/requests/' + card.dataset.requestId);
+      };
+    });
+
+    // Load more
+    if (currentCount < total) {
+      footerEl.innerHTML = '<button class="btn" id="btn-load-more">Load more</button>';
+      document.getElementById('btn-load-more').addEventListener('click', async () => {
+        offset += limit;
+        try {
+          await loadRequests(true);
+        } catch (err) {
+          toast(err.error || 'Failed to load more', 'error');
+        }
+      });
+    } else {
+      footerEl.innerHTML = '';
+    }
+  }
+
+  await loadRequests(false);
 }
 
 async function renderRequestDetail(hookId, requestId) {