ses-dashboard 0.1.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7165bdb98b1bf82aa3b6a65e7346101bc9792eb81e7b81fd8c1c9128865697f
-  data.tar.gz: 520bc27a98c191b442b307bb7878cc4566883d2567db36373ea62396e867748b
+  metadata.gz: 9efac9cf44528ae2052092bfcef569f312d9da609f23039459515ddc54a67072
+  data.tar.gz: 387467a34a67ec49a15241222b6a9dc077abcda5c545c872737e152b22d82905
 SHA512:
-  metadata.gz: c77bbac1e82db66182c2bd4141d8ab66ea9e9fb267dc0f33b0a082add3af7bf5ed72bdfb7c6bb2dd772d5db4ae19db61b120681d8f6d8001816ed90dbb8f7dfc
-  data.tar.gz: 8e3f511a3be5108a96247ff6fb42cfa05aed17003637f9d43c92863b6629a653cfd71ce74f5606952750a0655018fbfb01c8d06eedfd8f89cfdd6dce7f2b12d9
+  metadata.gz: 771334e8e2d8d0459d1c462022a69608958753d67845e5100bea2365fbfc9e47e1bc9f3c49e5befd804e456a5de22b3b0c23f98f6a86fe3cf4d223222eac9dbd
+  data.tar.gz: 922d8c07c25a5beac7beda1ec6bcecbb483c852f2bbe031aa65003ff181982c22a7b052c8d5e0efb5cdfda99d3339a1ccd113fc3bc4a2481dbe55ac62b656ea7

data/README.md

@@ -1,7 +1,51 @@
 # SES Dashboard
+[![codecov](https://codecov.io/gh/antodoms/ses_dashboard/graph/badge.svg?token=0SSO12E12W)](https://codecov.io/gh/antodoms/ses_dashboard)
+[![Gem Version](https://badge.fury.io/rb/ses-dashboard.svg)](https://badge.fury.io/rb/ses-dashboard)
 
 A mountable Rails engine that provides a real-time dashboard for Amazon SES, tracking email delivery, bounces, complaints, opens, and clicks via SNS webhooks.
 
+## Screenshots
+
+![Combined Dashboard](docs/screenshots/combined-projects-dashboard.png)
+
+<table>
+  <tr>
+    <td><img src="docs/screenshots/project-dashboard-view-page.png" alt="Project Dashboard" /></td>
+    <td><img src="docs/screenshots/project-activity-page.png" alt="Activity Log" /></td>
+  </tr>
+  <tr>
+    <td align="center"><em>Per-project stats &amp; email volume chart</em></td>
+    <td align="center"><em>Paginated activity log with search &amp; export</em></td>
+  </tr>
+  <tr>
+    <td colspan="2"><img src="docs/screenshots/email-details.png" alt="Email Detail" /></td>
+  </tr>
+  <tr>
+    <td colspan="2" align="center"><em>Email detail with full SNS event timeline</em></td>
+  </tr>
+  <tr>
+    <td colspan="2"><img src="docs/screenshots/webhook-forward-ruleset.png" alt="Webhook Forward Rules" /></td>
+  </tr>
+  <tr>
+    <td colspan="2" align="center"><em>Per-project webhook forwarding with configurable rules</em></td>
+  </tr>
+</table>
+
+## Features
+
+- **Real-time webhook processing** -- receives SNS notifications for delivery, bounce, complaint, open, click, reject, and rendering failure events
+- **Per-project dashboards** -- stat cards, email volume charts (Chart.js), and paginated activity logs
+- **Webhook forwarding with rules** -- forward specific events to external URLs (e.g. Zapier) with a configurable rules engine; filter by event type, sender, recipient, subject, and more
+- **Pluggable authentication** -- ships with Devise, Cloudflare Zero Trust, and no-auth adapters; bring your own with any object that responds to `#authenticate(request)`
+- **CSV/JSON export** -- export filtered email activity from any project
+- **Test email sending** -- send test emails directly from the dashboard via the SES API
+- **Status state machine** -- unidirectional email status transitions (sent -> delivered/bounced/etc.)
+- **SNS signature verification** -- validates RSA signatures (SHA1 and SHA256) on incoming SNS messages
+- **Database agnostic** -- works with SQLite, PostgreSQL, and MySQL
+- **Lightweight pagination** -- no external pagination gem required
+
+## Architecture
+
 ```mermaid
 graph TB
     subgraph Host["Host Rails App"]
@@ -29,18 +73,21 @@ graph TB
         subgraph Core["Core Library (lib/)"]
             Client["Client<br/>AWS SES SDK wrapper"]
             WP["WebhookProcessor<br/>SNS message parser"]
+            SV["SnsSignatureVerifier"]
             SA["StatsAggregator<br/>Dashboard statistics"]
             Pag["Paginatable"]
+            FR["ForwardRule<br/>field/operator/value matcher"]
         end
 
         subgraph Models
-            Project["Project<br/>name, token"]
+            Project["Project<br/>name, token, webhook_forwards"]
             Email["Email<br/>status, opens, clicks"]
             Event["EmailEvent<br/>event_type, event_data"]
         end
 
         subgraph Services
             WEP["WebhookEventPersistor"]
+            WF["WebhookForwarder<br/>rules-based HTTP forwarding"]
         end
     end
 
@@ -54,8 +101,12 @@ graph TB
     DC --> SA
     EC --> Pag
     TC --> Client
-    WC -->|"POST /webhook/:token"| WP
+    WC -->|"POST /webhook/:token"| SV
+    SV --> WP
     WP --> WEP
+    WP --> WF
+    WF --> FR
+    WF -->|"HTTP POST"| ExtURL["External URL<br/>(Zapier, etc.)"]
     WEP --> Models
     Client --> SES
     SNS -->|"HTTP POST"| WC
@@ -66,33 +117,25 @@ graph TB
     style Engine fill:#f0f4ff,stroke:#3366cc
     style AWS fill:#fff3e0,stroke:#ff9800
     style Host fill:#e8f5e9,stroke:#4caf50
+    style ExtURL fill:#fce4ec,stroke:#e91e63
 ```
 
-## Features
-
-- **Real-time webhook processing** -- receives SNS notifications for delivery, bounce, complaint, open, click, reject, and rendering failure events
-- **Per-project dashboards** -- stat cards, email volume charts (Chart.js), and paginated activity logs
-- **Pluggable authentication** -- ships with Devise, Cloudflare Zero Trust, and no-auth adapters; bring your own with any object that responds to `#authenticate(request)`
-- **CSV/JSON export** -- export filtered email activity from any project
-- **Test email sending** -- send test emails directly from the dashboard via the SES API
-- **Status state machine** -- unidirectional email status transitions (sent -> delivered/bounced/etc.)
-- **Database agnostic** -- works with SQLite, PostgreSQL, and MySQL
-- **Lightweight pagination** -- no external pagination gem required
-
 ## Installation
 
 Add the gem to your Gemfile:
 
 ```ruby
-gem "ses_dashboard"
+gem "ses-dashboard"
 ```
 
+The gem name uses a hyphen (`ses-dashboard`) — Bundler will auto-require the correct entry point automatically.
+
 Then run:
 
 ```bash
 bundle install
-rails ses_dashboard:install:migrations
-rails db:migrate
+bin/rails railties:install:migrations
+bin/rails db:migrate
 ```
 
 ## Mounting
@@ -128,8 +171,8 @@ SesDashboard.configure do |c|
   c.cloudflare_aud         = "your-application-aud"
 
   # Dashboard behaviour
-  c.per_page       = 25     # rows per page in the activity log
-  c.time_zone      = "UTC"  # timezone for chart date grouping
+  c.per_page        = 25     # rows per page in the activity log
+  c.time_zone       = "UTC"  # timezone for chart date grouping
   c.test_email_from = "noreply@example.com"
 
   # Caching & security
@@ -144,24 +187,55 @@ Every controller action (except the webhook endpoint) runs through the configure
 
 | Adapter | Value | Notes |
 |---|---|---|
-| None | `:none` | Open access -- suitable for development |
+| None | `:none` | Open access — suitable for development |
 | Devise | `:devise` | Calls `authenticate_user!` via Warden |
 | Cloudflare Zero Trust | `:cloudflare` | Validates `CF_Authorization` JWT against JWKS |
 | Custom | any object | Must respond to `#authenticate(request)` returning truthy/falsy |
 
+### Custom adapter
+
+Use a custom adapter when your app has its own authentication system (e.g. custom session-based auth, API keys, JWT):
+
+```ruby
+# config/initializers/ses_dashboard.rb
+
+my_auth = Class.new(SesDashboard::Auth::Base) do
+  def authenticate(request)
+    session = request.session
+    # your auth logic here — return truthy to allow, falsy to deny
+    session[:user_id].present?
+  end
+end
+
+SesDashboard.configure do |c|
+  c.authentication_adapter = my_auth.new
+end
+```
+
+For apps with session timeout and whitelist checks (e.g. custom Rails session auth):
+
 ```ruby
-# Example custom adapter
-class ApiKeyAuth
+my_auth = Class.new(SesDashboard::Auth::Base) do
   def authenticate(request)
-    request.headers["X-Api-Key"] == Rails.application.credentials.dashboard_key
+    session = request.session
+    user_id      = session[:user_id]
+    logged_in_at = session[:logged_in_at]
+
+    return false unless user_id && logged_in_at
+    return false unless logged_in_at > 12.hours.ago
+
+    user = User.find_by(id: user_id)
+    user&.active? || false
   end
 end
 
 SesDashboard.configure do |c|
-  c.authentication_adapter = ApiKeyAuth.new
+  c.authentication_adapter = my_auth.new
 end
 ```
 
+The adapter is defined inline using `Class.new` so it is available at initializer load time without depending on Zeitwerk autoloading.
+
 ## SNS Webhook Setup
 
 Each project gets a unique webhook URL displayed on its dashboard page:
@@ -178,17 +252,124 @@ To connect it to SES:
 
 The webhook endpoint authenticates via the project token in the URL and does not require a session.
 
-## Database Schema
+### SNS Signature Verification
 
-The engine creates three tables (prefixed `ses_dashboard_`):
+When `verify_sns_signature = true`, the engine validates the RSA signature on every incoming SNS message before processing it. Both `SignatureVersion` `"1"` (SHA1) and `"2"` (SHA256) are supported.
 
-| Table | Key Columns |
+For **raw message delivery** (SNS subscription setting), signature verification is automatically skipped as SNS does not include signature fields in raw payloads — the project token in the URL provides authentication instead.
+
+Enable in production:
+
+```ruby
+c.verify_sns_signature = Rails.env.production?
+```
+
+## Webhook Forwarding
+
+Forward SES events to external URLs (e.g. Zapier, Google Sheets, Slack) based on configurable rules. This is useful for routing bounce/complaint notifications into team workflows without consuming unnecessary webhook quota on events you don't need.
+
+![Webhook Forward Rules](docs/screenshots/webhook-forward-ruleset.png)
+
+### Per-project configuration (UI)
+
+Edit any project in the dashboard and use the **Webhook Forwards** builder to add forward targets with rules. Each target has a URL and optional rules -- all rules must match (AND logic) for the event to be forwarded. No rules means forward everything.
+
+### Per-project configuration (database)
+
+The `webhook_forwards` column on `ses_dashboard_projects` stores a JSON array:
+
+```json
+[
+  {
+    "url": "https://hooks.zapier.com/hooks/catch/123/abc/",
+    "rules": [
+      { "field": "event_type", "operator": "in", "value": ["bounce", "complaint"] }
+    ]
+  }
+]
+```
+
+### Global fallback (initializer)
+
+Used for any project that has no project-level forwards configured:
+
+```ruby
+SesDashboard.configure do |c|
+  c.webhook_forwards = [
+    { url: "https://hooks.zapier.com/hooks/catch/123/abc/",
+      rules: [{ field: "event_type", operator: "in", value: ["bounce", "complaint"] }] }
+  ]
+end
+```
+
+### Rules reference
+
+Each rule has a `field`, `operator`, and `value`. All rules on a target must match for the event to be forwarded.
+
+| Field | Type | Description |
+|---|---|---|
+| `event_type` | string | `send`, `delivery`, `bounce`, `complaint`, `open`, `click`, `reject`, `rendering_failure` |
+| `source` | string | From: email address |
+| `destination` | array | To: email addresses -- rule passes if **any** recipient matches |
+| `subject` | string | Email subject line |
+
+| Operator | Description |
 |---|---|
-| `ses_dashboard_projects` | `name`, `token` (unique, auto-generated), `description` |
-| `ses_dashboard_emails` | `project_id`, `message_id` (unique), `source`, `destination` (JSON), `subject`, `status`, `opens`, `clicks`, `sent_at` |
-| `ses_dashboard_email_events` | `email_id`, `event_type`, `event_data` (JSON), `occurred_at` |
+| `in` | Value is included in the given array |
+| `not_in` | Value is NOT included in the given array |
+| `eq` | Exact string equality (any element for array fields) |
+| `not_eq` | String inequality |
+| `starts_with` | Prefix match (any element for array fields) |
+| `ends_with` | Suffix match (any element for array fields) |
+| `contains` | Substring match (any element for array fields) |
+
+### Forwarded payload
+
+Each matching URL receives a `POST` with a JSON body:
+
+```json
+{
+  "event_type":  "bounce",
+  "message_id":  "0102018e-abcd-1234-...",
+  "source":      "noreply@myapp.com",
+  "destination": ["user@example.com"],
+  "subject":     "Your invoice #1234",
+  "occurred_at": "2024-01-15T10:00:00Z",
+  "raw":         { "...full SES event hash..." }
+}
+```
 
-Email statuses: `sent`, `delivered`, `bounced`, `complained`, `rejected`, `failed`.
+### Examples
+
+Forward only bounces and complaints to Zapier:
+
+```json
+[
+  {
+    "url": "https://hooks.zapier.com/hooks/catch/123/abc/",
+    "rules": [
+      { "field": "event_type", "operator": "in", "value": ["bounce", "complaint"] }
+    ]
+  }
+]
+```
+
+Forward bounces from a specific sender domain to one URL, all events to another:
+
+```json
+[
+  {
+    "url": "https://hooks.zapier.com/bounces",
+    "rules": [
+      { "field": "event_type", "operator": "eq", "value": "bounce" },
+      { "field": "source", "operator": "ends_with", "value": "@myapp.com" }
+    ]
+  },
+  {
+    "url": "https://example.com/all-events"
+  }
+]
+```
 
 ## Development
 
@@ -226,13 +407,27 @@ bundle exec rspec spec/models/ses_dashboard/email_spec.rb:15
 | Service | Purpose | Ports |
 |---|---|---|
 | `localstack` | Local AWS (SES + SNS) | 4566 |
-| `chrome` | Selenium standalone Chromium | 4444 (WebDriver), 7900 (noVNC -- watch tests live) |
+| `chrome` | Selenium standalone Chromium | 4444 (WebDriver), 7900 (noVNC — watch tests live) |
 | `web` | Runs the test suite | 4001 (Puma) |
 
 ### Watching System Tests
 
 Open http://localhost:7900 in your browser (no password) to watch Chrome execute system specs in real time via noVNC.
 
+## Database Schema
+
+The engine creates three tables (prefixed `ses_dashboard_`):
+
+| Table | Key Columns |
+|---|---|
+| `ses_dashboard_projects` | `name`, `token` (unique, auto-generated), `description`, `webhook_forwards` (JSON) |
+| `ses_dashboard_emails` | `project_id`, `message_id` (unique), `source`, `destination` (JSON), `subject`, `status`, `opens`, `clicks`, `sent_at` |
+| `ses_dashboard_email_events` | `email_id`, `event_type`, `event_data` (JSON), `occurred_at` |
+
+Email statuses: `sent`, `delivered`, `bounced`, `complained`, `rejected`, `failed`.
+
+Migrations are compatible with Rails 7.x and 8.x — the migration version is resolved automatically from the host app's Rails version at install time.
+
 ## License
 
 MIT

data/app/assets/javascripts/ses_dashboard/application.js

@@ -115,6 +115,268 @@
     });
   }
 
+  // ── Webhook Forwards builder ──────────────────────────────────────────
+  var WF_FIELDS = [
+    { value: "event_type",  label: "Event Type" },
+    { value: "source",      label: "From (source)" },
+    { value: "destination", label: "To (destination)" },
+    { value: "subject",     label: "Subject" }
+  ];
+
+  var WF_OPERATORS = [
+    { value: "in",          label: "is in" },
+    { value: "not_in",      label: "is not in" },
+    { value: "eq",          label: "equals" },
+    { value: "not_eq",      label: "does not equal" },
+    { value: "starts_with", label: "starts with" },
+    { value: "ends_with",   label: "ends with" },
+    { value: "contains",    label: "contains" }
+  ];
+
+  var WF_EVENT_TYPES = [
+    "send", "delivery", "bounce", "complaint", "open", "click", "reject", "rendering_failure"
+  ];
+
+  function wfBuildSelect(options, selected, className) {
+    var sel = document.createElement("select");
+    sel.className = "form-control " + className;
+    options.forEach(function (opt) {
+      var o = document.createElement("option");
+      o.value = opt.value;
+      o.textContent = opt.label;
+      if (opt.value === selected) o.selected = true;
+      sel.appendChild(o);
+    });
+    return sel;
+  }
+
+  function wfBuildCheckboxes(selected) {
+    var wrap = document.createElement("div");
+    wrap.className = "wf-checkboxes";
+    var selectedArr = Array.isArray(selected) ? selected : [];
+    WF_EVENT_TYPES.forEach(function (et) {
+      var label = document.createElement("label");
+      label.className = "wf-checkbox-label";
+      var cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.value = et;
+      cb.className = "wf-event-cb";
+      if (selectedArr.indexOf(et) !== -1) cb.checked = true;
+      label.appendChild(cb);
+      label.appendChild(document.createTextNode(" " + et));
+      wrap.appendChild(label);
+    });
+    return wrap;
+  }
+
+  function wfBuildTextInput(value, placeholder) {
+    var input = document.createElement("input");
+    input.type = "text";
+    input.className = "form-control wf-value";
+    input.placeholder = placeholder || "";
+    input.value = value || "";
+    return input;
+  }
+
+  function wfIsArrayOperator(op) {
+    return op === "in" || op === "not_in";
+  }
+
+  function wfBuildValueInput(field, operator, value) {
+    if (field === "event_type" && wfIsArrayOperator(operator)) {
+      return wfBuildCheckboxes(value);
+    }
+    if (wfIsArrayOperator(operator)) {
+      var display = Array.isArray(value) ? value.join(", ") : (value || "");
+      return wfBuildTextInput(display, "value1, value2, value3");
+    }
+    return wfBuildTextInput(value || "", "Value");
+  }
+
+  function wfReadValue(valueContainer) {
+    // Checkboxes
+    var cbs = valueContainer.querySelectorAll(".wf-event-cb");
+    if (cbs.length > 0) {
+      var vals = [];
+      cbs.forEach(function (cb) { if (cb.checked) vals.push(cb.value); });
+      return vals;
+    }
+    // Text input
+    var input = valueContainer.querySelector(".wf-value");
+    if (input) {
+      var sel = valueContainer.closest(".wf-rule").querySelector(".wf-operator");
+      if (sel && wfIsArrayOperator(sel.value)) {
+        return input.value.split(",").map(function (s) { return s.trim(); }).filter(Boolean);
+      }
+      return input.value;
+    }
+    return "";
+  }
+
+  function wfSwapValueInput(ruleEl) {
+    var fieldSel = ruleEl.querySelector(".wf-field");
+    var opSel = ruleEl.querySelector(".wf-operator");
+    var valueWrap = ruleEl.querySelector(".wf-value-wrap");
+    var currentValue = wfReadValue(valueWrap);
+    valueWrap.innerHTML = "";
+    valueWrap.appendChild(wfBuildValueInput(fieldSel.value, opSel.value, currentValue));
+  }
+
+  function wfBuildRule(rule) {
+    rule = rule || {};
+    var field    = rule.field    || "event_type";
+    var operator = rule.operator || "in";
+    var value    = rule.value    || (wfIsArrayOperator(operator) ? [] : "");
+
+    var row = document.createElement("div");
+    row.className = "wf-rule";
+
+    var fieldSel = wfBuildSelect(WF_FIELDS, field, "wf-field");
+    var opSel    = wfBuildSelect(WF_OPERATORS, operator, "wf-operator");
+
+    var valueWrap = document.createElement("div");
+    valueWrap.className = "wf-value-wrap";
+    valueWrap.appendChild(wfBuildValueInput(field, operator, value));
+
+    var removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "btn btn-danger btn-sm";
+    removeBtn.textContent = "\u00d7";
+    removeBtn.addEventListener("click", function () { row.remove(); });
+
+    // Swap value input when field or operator changes
+    fieldSel.addEventListener("change", function () { wfSwapValueInput(row); });
+    opSel.addEventListener("change", function () { wfSwapValueInput(row); });
+
+    row.appendChild(fieldSel);
+    row.appendChild(opSel);
+    row.appendChild(valueWrap);
+    row.appendChild(removeBtn);
+    return row;
+  }
+
+  function wfBuildTarget(target) {
+    target = target || {};
+    var card = document.createElement("div");
+    card.className = "wf-target card";
+
+    // Header
+    var header = document.createElement("div");
+    header.className = "wf-target-header";
+    var title = document.createElement("span");
+    title.className = "wf-target-title";
+    title.textContent = "Forward Target";
+    var removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "btn btn-danger btn-sm";
+    removeBtn.textContent = "Remove";
+    removeBtn.addEventListener("click", function () { card.remove(); wfUpdateNumbers(); });
+    header.appendChild(title);
+    header.appendChild(removeBtn);
+    card.appendChild(header);
+
+    // URL
+    var urlGroup = document.createElement("div");
+    urlGroup.className = "form-group";
+    var urlLabel = document.createElement("label");
+    urlLabel.className = "form-label";
+    urlLabel.textContent = "URL";
+    var urlInput = document.createElement("input");
+    urlInput.type = "text";
+    urlInput.className = "form-control wf-url";
+    urlInput.placeholder = "https://hooks.zapier.com/hooks/catch/...";
+    urlInput.value = target.url || "";
+    urlGroup.appendChild(urlLabel);
+    urlGroup.appendChild(urlInput);
+    card.appendChild(urlGroup);
+
+    // Rules
+    var rulesLabel = document.createElement("label");
+    rulesLabel.className = "form-label";
+    rulesLabel.textContent = "Rules";
+    rulesLabel.style.marginBottom = ".25rem";
+    card.appendChild(rulesLabel);
+
+    var rulesWrap = document.createElement("div");
+    rulesWrap.className = "wf-rules";
+    var rules = target.rules || [];
+    rules.forEach(function (r) { rulesWrap.appendChild(wfBuildRule(r)); });
+    card.appendChild(rulesWrap);
+
+    var addRuleBtn = document.createElement("button");
+    addRuleBtn.type = "button";
+    addRuleBtn.className = "btn btn-outline btn-sm";
+    addRuleBtn.textContent = "+ Add Rule";
+    addRuleBtn.addEventListener("click", function () {
+      rulesWrap.appendChild(wfBuildRule());
+    });
+    card.appendChild(addRuleBtn);
+
+    return card;
+  }
+
+  function wfUpdateNumbers() {
+    var targets = document.querySelectorAll(".wf-target");
+    targets.forEach(function (t, i) {
+      t.querySelector(".wf-target-title").textContent = "Forward Target #" + (i + 1);
+    });
+  }
+
+  function wfSerialize() {
+    var targets = document.querySelectorAll(".wf-target");
+    var result = [];
+    targets.forEach(function (t) {
+      var url = t.querySelector(".wf-url").value.trim();
+      if (!url) return;
+      var rules = [];
+      t.querySelectorAll(".wf-rule").forEach(function (r) {
+        var field = r.querySelector(".wf-field").value;
+        var op    = r.querySelector(".wf-operator").value;
+        var val   = wfReadValue(r.querySelector(".wf-value-wrap"));
+        if (wfIsArrayOperator(op) && Array.isArray(val) && val.length === 0) return;
+        if (!wfIsArrayOperator(op) && val === "") return;
+        rules.push({ field: field, operator: op, value: val });
+      });
+      var entry = { url: url };
+      if (rules.length > 0) entry.rules = rules;
+      result.push(entry);
+    });
+    return result;
+  }
+
+  function initWebhookForwardsBuilder() {
+    var container = document.getElementById("wf-targets");
+    var addBtn    = document.getElementById("wf-add-target");
+    var hidden    = document.getElementById("webhook-forwards-json");
+    if (!container || !addBtn || !hidden) return;
+
+    // Load initial data
+    var dataEl = document.getElementById("wf-initial-data");
+    var initial = [];
+    if (dataEl && dataEl.textContent.trim()) {
+      try { initial = JSON.parse(dataEl.textContent); } catch (e) { /* ignore */ }
+    }
+
+    initial.forEach(function (t) {
+      container.appendChild(wfBuildTarget(t));
+    });
+    wfUpdateNumbers();
+
+    addBtn.addEventListener("click", function () {
+      container.appendChild(wfBuildTarget());
+      wfUpdateNumbers();
+    });
+
+    // Serialize to hidden field on submit
+    var form = hidden.closest("form");
+    if (form) {
+      form.addEventListener("submit", function () {
+        var data = wfSerialize();
+        hidden.value = data.length > 0 ? JSON.stringify(data) : "";
+      });
+    }
+  }
+
   // ── Boot ─────────────────────────────────────────────────────────────
   document.addEventListener("DOMContentLoaded", function () {
     initChart();
@@ -122,5 +384,6 @@
     initEventToggles();
     initFilterReset();
     initConfirmLinks();
+    initWebhookForwardsBuilder();
   });
 })();