Merge feat/HB-021-hook-list: Hook list view

Author: copyleftdev

ui/assets/app.js

@@ -136,10 +136,92 @@ async function checkHealth() {
   }
 }
 
-// --- Views (stubs, implemented in HB-021 through HB-023) ---
+// --- Hook List View ---
 async function renderHookList() {
   show('view-hooks');
-  $('#view-hooks').innerHTML = '<p class="empty-state">Loading hooks...</p>';
+  const el = $('#view-hooks');
+  el.innerHTML = '<p class="empty-state">Loading hooks...</p>';
+
+  const data = await api.get('/api/hooks');
+  const hooks = data.hooks || [];
+  const origin = location.origin;
+
+  let html = '<div class="toolbar">';
+  html += '<h2 style="margin:0;font-size:16px;">Hooks (' + data.count + ')</h2>';
+  html += '<button class="btn btn-primary" id="btn-create-hook">+ Create Hook</button>';
+  html += '</div>';
+
+  if (hooks.length === 0) {
+    html += '<p class="empty-state">No hooks yet. Create one to start capturing webhooks.</p>';
+  } else {
+    for (const hook of hooks) {
+      const url = origin + hook.url;
+      html += '<div class="card card-clickable" data-hook-id="' + escapeHtml(hook.hook_id) + '">';
+      html += '<div class="card-header">';
+      html += '<span class="card-title">' + escapeHtml(hook.name) + '</span>';
+      html += '<span style="display:flex;gap:6px;flex-shrink:0;">';
+      html += '<button class="btn btn-small btn-copy-url" data-url="' + escapeHtml(url) + '" title="Copy URL">copy</button>';
+      html += '<button class="btn btn-small btn-danger btn-delete-hook" data-hook-id="' + escapeHtml(hook.hook_id) + '" data-hook-name="' + escapeHtml(hook.name) + '" title="Delete">del</button>';
+      html += '</span>';
+      html += '</div>';
+      html += '<div class="card-meta">';
+      html += '<span>' + hook.request_count + ' request' + (hook.request_count !== 1 ? 's' : '') + '</span>';
+      html += '<span class="url-box" style="border:0;padding:0;background:none;font-size:12px;">' + escapeHtml(url) + '</span>';
+      html += '<span>' + timeAgo(hook.created_at) + '</span>';
+      html += '</div>';
+      html += '</div>';
+    }
+  }
+
+  el.innerHTML = html;
+
+  // Create hook handler
+  const createBtn = document.getElementById('btn-create-hook');
+  if (createBtn) {
+    createBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const name = prompt('Hook name (leave blank for auto-generated):');
+      if (name === null) return;
+      try {
+        const body = name.trim() ? { name: name.trim() } : {};
+        await api.post('/api/hooks', body);
+        await renderHookList();
+      } catch (err) {
+        toast(err.error || 'Failed to create hook', 'error');
+      }
+    });
+  }
+
+  // Copy URL handlers
+  el.querySelectorAll('.btn-copy-url').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      copyText(btn.dataset.url);
+    });
+  });
+
+  // Delete hook handlers
+  el.querySelectorAll('.btn-delete-hook').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const name = btn.dataset.hookName;
+      if (!confirm('Delete hook "' + name + '"? All captured requests will be lost.')) return;
+      try {
+        await api.del('/api/hooks/' + btn.dataset.hookId);
+        toast('Hook deleted', 'success');
+        await renderHookList();
+      } catch (err) {
+        toast(err.error || 'Failed to delete hook', 'error');
+      }
+    });
+  });
+
+  // Click card to navigate
+  el.querySelectorAll('.card-clickable').forEach(card => {
+    card.addEventListener('click', () => {
+      navigate('/hooks/' + card.dataset.hookId);
+    });
+  });
 }
 
 async function renderRequestFeed(hookId) {