webhook_inbox 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3e8996a95485a31adad6b0ad9be8b2c24bd40ce375f66242db772c0cf61fc3be
+  data.tar.gz: cda5dd9e10dbe34183a2e3526d4661c07aca104139899effb24b7a993499b08a
+SHA512:
+  metadata.gz: 6b379d2cb53ea7635367ecd47ca935928e65b778ee3c24b3605999167da68df616f868bc074e702b7bdff4f63ad9d10d94a64e0658bdf7c77e278f5381f33780
+  data.tar.gz: fba1b1086546871e9d7324c650dc8779781c896d70f84a6ddef4c4a1543ac5a10e64e189c1e41a4052b32501d0810b504099953d95498ef409ef852e730681a1

data/.rspec

@@ -0,0 +1,3 @@
+--require spec_helper
+--format documentation
+--color

data/.rubocop.yml

@@ -0,0 +1,83 @@
+plugins:
+  - rubocop-rspec
+
+AllCops:
+  NewCops: enable
+  TargetRubyVersion: 3.1
+  Exclude:
+    - "bin/**/*"
+    - "vendor/**/*"
+    - "pkg/**/*"
+
+Style/StringLiterals:
+  EnforcedStyle: double_quotes
+
+Style/FrozenStringLiteralComment:
+  Enabled: true
+
+Metrics/MethodLength:
+  Max: 20
+
+Metrics/BlockLength:
+  Max: 40
+  Exclude:
+    - "spec/**/*"
+
+Metrics/ClassLength:
+  Max: 150
+
+Style/Documentation:
+  Enabled: false
+
+Naming/MethodParameterName:
+  MinNameLength: 1
+
+Naming/PredicateMethod:
+  Enabled: false
+
+RSpec/VerifiedDoubles:
+  Enabled: false
+
+RSpec/MessageSpies:
+  Enabled: false
+
+RSpec/IdenticalEqualityAssertion:
+  Enabled: false
+
+RSpec/StubbedMock:
+  Enabled: false
+
+Style/OpenStructUse:
+  Exclude:
+    - "spec/**/*"
+
+Lint/FloatComparison:
+  Enabled: false
+
+Metrics/AbcSize:
+  Max: 35
+
+Metrics/CyclomaticComplexity:
+  Max: 10
+
+Metrics/PerceivedComplexity:
+  Max: 12
+
+Metrics/ParameterLists:
+  Max: 7
+
+RSpec/SpecFilePathFormat:
+  Enabled: false
+
+RSpec/MultipleExpectations:
+  Max: 5
+
+RSpec/ExampleLength:
+  Max: 15
+
+RSpec/MultipleMemoizedHelpers:
+  Max: 10
+
+Lint/EmptyBlock:
+  Exclude:
+    - "spec/**/*"

data/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] — 2026-06-09
+
+### Added
+
+- `WebhookInbox::Receiver` controller concern — `receive_from :stripe, secret: -> { ENV["..."] }` + `receive_webhook!` runs the full receive pipeline (verify → store → enqueue → respond).
+- `WebhookInbox::Event` ActiveRecord model — `text` payload column (cross-DB compatible), status enum (`pending` / `processing` / `processed` / `failed`), scopes (`.pending`, `.failed`, `.for_provider`), and `retry!` for replay.
+- `WebhookInbox::ProcessJob` ActiveJob — looks up registered handlers for `[provider, event_type]`, marks event status through its lifecycle, stores error messages on failure, re-raises for ActiveJob retry backoff.
+- Handler registry via `WebhookInbox.configure { |c| c.on(:stripe, "event.type") { |e| ... } }`. Supports multiple handlers per event type, wildcard `"*"` catch-all per provider, and independent handlers per provider.
+- `WebhookInbox::Providers::Stripe` — HMAC-SHA256 signature verification (manual implementation, no stripe gem required), event ID and event type extraction from raw body. Raises `WebhookInbox::SignatureError` on failure.
+- `WebhookInbox::Providers::Base` — interface class for building additional provider adapters.
+- `rails generate webhook_inbox:install` — generates the migration (with unique index on `[provider, event_id]`) and a commented initializer stub.
+- Dashboard Rails Engine at `/webhook_inbox` — event list with status/provider filters, event detail with full JSON payload, replay button, error message display. Plain HTML + inline CSS, no JavaScript framework.
+- Dashboard auth lambda `config.dashboard_auth = ->(controller) { ... }` — passthrough in development, enforced in production.
+- `WebhookInbox::RSpecHelpers` — `deliver_webhook(:stripe, "event.type", payload: {})` posts a correctly HMAC-signed request, matching Stripe's live webhook format. Auto-included in request specs via `require "webhook_inbox/rspec"`.
+- Race-condition-safe deduplication: relies exclusively on the DB unique constraint (not application-level `exists?` checks). Rescues `ActiveRecord::RecordNotUnique`, returns `200` silently.
+- Request body rewind: reads and rewinds `request.body` before passing to the adapter, so middleware that consumes the body before the controller does not break signature verification.

data/README.md

@@ -0,0 +1,315 @@
+# webhook_inbox
+
+**Production-ready transactional inbox for Rails webhooks. Two lines.**
+
+[![CI](https://github.com/jibranusman95/webhook_inbox/actions/workflows/ci.yml/badge.svg)](https://github.com/jibranusman95/webhook_inbox/actions)
+[![Gem Version](https://badge.fury.io/rb/webhook_inbox.svg)](https://badge.fury.io/rb/webhook_inbox)
+[![Downloads](https://img.shields.io/gem/dt/webhook_inbox)](https://rubygems.org/gems/webhook_inbox)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+---
+
+> **[Screenshot: /webhook_inbox dashboard — table of Stripe events with green "processed", red "failed", yellow "pending" badges. One row expanded to show full JSON payload and a "Replay" button.]**
+
+---
+
+Every Rails app that accepts webhooks has written this controller:
+
+```ruby
+def create
+  payload    = request.body.read
+  sig_header = request.env["HTTP_STRIPE_SIGNATURE"]
+  event      = Stripe::Webhook.construct_event(payload, sig_header, ENV["STRIPE_SECRET"])
+
+  return head :ok if StripeEvent.exists?(stripe_id: event.id)
+
+  StripeEvent.create!(stripe_id: event.id, payload: payload)
+  HandleStripeEventJob.perform_later(event.id)
+  head :ok
+rescue Stripe::SignatureVerificationError
+  head :unauthorized
+rescue ActiveRecord::RecordNotUnique
+  head :ok
+end
+```
+
+And every Rails app has had a production incident when it broke.
+
+Here's the same thing with webhook_inbox:
+
+```ruby
+class StripeWebhooksController < ApplicationController
+  include WebhookInbox::Receiver
+  receive_from :stripe, secret: -> { ENV["STRIPE_WEBHOOK_SECRET"] }
+
+  def create
+    receive_webhook!
+  end
+end
+```
+
+Signature verification, deduplication, async processing, replay, and a dashboard. All included. No Redis, no extra services, no copy-paste.
+
+---
+
+## What you get
+
+**Deduplication** — DB unique constraint on `[provider, event_id]`. Two identical deliveries arriving simultaneously? Both pass the `exists?` check? Doesn't matter. The constraint is enforced at the database level. Duplicates silently return 200.
+
+**Async processing** — events are stored first, then processed via your existing job queue. Stripe gets its 200 immediately. Your handler can take as long as it needs.
+
+**Replay** — any event can be re-run from the dashboard or via `event.retry!`. Debug handlers, recover from bugs, reprocess failed deliveries.
+
+**Dashboard** — `/webhook_inbox` shows every event, its status, full JSON payload, error details, and a replay button. Protected by a configurable auth lambda.
+
+**RSpec helpers** — `deliver_webhook(:stripe, "event.type", payload: {})` posts a correctly-signed request in your tests. No mocking, no fixtures.
+
+---
+
+## Install
+
+```ruby
+# Gemfile
+gem "webhook_inbox"
+```
+
+```bash
+bundle install
+rails generate webhook_inbox:install
+rails db:migrate
+```
+
+Mount the dashboard:
+
+```ruby
+# config/routes.rb
+post "/webhooks/stripe", to: "stripe_webhooks#create"
+mount WebhookInbox::Engine => "/webhook_inbox"
+```
+
+---
+
+## Configuration
+
+```ruby
+# config/initializers/webhook_inbox.rb
+WebhookInbox.configure do |config|
+  # Register handlers — block receives a WebhookInbox::Event object
+  config.on(:stripe, "customer.subscription.created") do |event|
+    CreateSubscriptionJob.perform_later(event.parsed_payload)
+  end
+
+  config.on(:stripe, "invoice.payment_failed") do |event|
+    NotifyPaymentFailedJob.perform_later(event.parsed_payload)
+  end
+
+  # Catch-all — runs for every Stripe event with no exact match
+  config.on(:stripe, "*") do |event|
+    Rails.logger.info "[webhook] Unhandled #{event.event_type}"
+  end
+
+  # Queue name (default: "webhooks")
+  config.queue_name = "webhooks"
+
+  # Dashboard auth — return truthy to allow access. Required in production.
+  config.dashboard_auth = ->(controller) { controller.current_user&.admin? }
+end
+```
+
+---
+
+## Controller
+
+```ruby
+class StripeWebhooksController < ApplicationController
+  include WebhookInbox::Receiver
+  receive_from :stripe, secret: -> { ENV["STRIPE_WEBHOOK_SECRET"] }
+
+  def create
+    receive_webhook!
+    # receive_webhook! always responds — nothing needed after it
+  end
+end
+```
+
+`receive_webhook!` runs the full pipeline:
+
+1. Verify Stripe signature → `401` on failure
+2. Insert event into DB → silent `200` on duplicate (race-condition-safe)
+3. Enqueue `WebhookInbox::ProcessJob`
+4. Respond `200 OK`
+
+---
+
+## Working with events
+
+```ruby
+# Query
+WebhookInbox::Event.pending.count
+WebhookInbox::Event.failed.each(&:retry!)
+WebhookInbox::Event.for_provider(:stripe).where(event_type: "invoice.payment_failed")
+
+# Event object passed to handlers
+event.provider       # => "stripe"
+event.event_id       # => "evt_1ABC..."
+event.event_type     # => "customer.subscription.created"
+event.parsed_payload # => Hash (parsed from stored JSON)
+event.attempts       # => 1
+event.status         # => "pending" | "processing" | "processed" | "failed"
+event.error_message  # => "RuntimeError: handler exploded\n..." (on failure)
+
+# Replay a specific event
+WebhookInbox::Event.find_by(event_id: "evt_1ABC...").retry!
+```
+
+---
+
+## Processing flow
+
+```
+POST /webhooks/stripe
+        │
+        ▼
+  WebhookInbox::Receiver
+        │
+        ├── 1. Verify signature           (401 on failure)
+        ├── 2. INSERT webhook_inbox_events (200 silent on duplicate)
+        ├── 3. Enqueue ProcessJob
+        └── 4. Respond 200 OK
+                │
+                ▼ (async, via your queue)
+  WebhookInbox::ProcessJob
+        │
+        ├── 1. Find event, mark: processing
+        ├── 2. Look up handlers for [provider, event_type]
+        ├── 3. Call each handler block
+        ├── 4a. Success → status: processed, processed_at: now
+        └── 4b. Failure → status: failed, error_message stored, re-raise for retry
+```
+
+---
+
+## RSpec helpers
+
+```ruby
+# spec/rails_helper.rb
+require "webhook_inbox/rspec"
+
+# In request specs (auto-included)
+RSpec.describe "Stripe billing", type: :request do
+  it "creates a subscription on webhook" do
+    deliver_webhook(:stripe, "customer.subscription.created", payload: {
+      data: { object: { id: "sub_123", customer: "cus_456" } }
+    })
+
+    perform_enqueued_jobs
+
+    expect(Subscription.find_by(stripe_id: "sub_123")).to be_active
+  end
+
+  it "ignores duplicate deliveries" do
+    2.times do
+      deliver_webhook(:stripe, "customer.subscription.created",
+                      event_id: "evt_fixed_id", payload: {})
+    end
+    expect(WebhookInbox::Event.count).to eq(1)
+  end
+end
+```
+
+`deliver_webhook` signs the request using the same HMAC-SHA256 scheme as Stripe's live webhooks. The signature will pass `receive_webhook!` verification without any mocking. Pass `secret:` to match your test initializer (default: `"test_secret"`).
+
+---
+
+## Dashboard
+
+Mount in `config/routes.rb`:
+
+```ruby
+mount WebhookInbox::Engine => "/webhook_inbox"
+```
+
+Configure auth in the initializer:
+
+```ruby
+config.dashboard_auth = ->(controller) { controller.current_user&.admin? }
+```
+
+In development, the dashboard is open when `dashboard_auth` is not set. In production, it blocks with a clear error if auth is not configured.
+
+The dashboard shows:
+- All events with status badges (pending / processing / processed / failed)
+- Filter by status or provider
+- Full JSON payload for each event
+- Error message and stack trace on failures
+- Replay button — re-enqueues the handler job
+
+---
+
+## Why not stripe_event?
+
+[stripe_event](https://github.com/integrallis/stripe_event) is a great event router — 14.5M downloads. It dispatches to handlers. That's all it does.
+
+It has no storage, no deduplication, no replay, no dashboard. You still write the controller, the dedup migration, the job, and the retry logic.
+
+webhook_inbox handles the layer below: receive, store, deduplicate, process, replay. They're complementary. If you already use stripe_event for routing, webhook_inbox can sit underneath it as the storage and dedup layer.
+
+---
+
+## Database schema
+
+```ruby
+create_table :webhook_inbox_events do |t|
+  t.string   :provider,      null: false
+  t.string   :event_id,      null: false
+  t.string   :event_type
+  t.text     :payload,       null: false, default: "{}"
+  t.string   :status,        null: false, default: "pending"
+  t.integer  :attempts,      null: false, default: 0
+  t.text     :error_message
+  t.datetime :processed_at
+  t.timestamps
+end
+
+add_index :webhook_inbox_events, [:provider, :event_id], unique: true
+add_index :webhook_inbox_events, :status
+add_index :webhook_inbox_events, :created_at
+```
+
+`payload` is `text` (not `jsonb`) for cross-database compatibility — identical behavior on SQLite, MySQL, and PostgreSQL.
+
+---
+
+## Requirements
+
+- Ruby >= 3.1
+- Rails >= 7.0
+- ActiveRecord, ActiveJob, ActionController
+
+---
+
+## Contributing
+
+```bash
+git clone https://github.com/jibranusman95/webhook_inbox
+cd webhook_inbox
+bundle install
+bundle exec rspec
+bundle exec rubocop
+```
+
+---
+
+## From the same author
+
+| Gem | What it does |
+|-----|-------------|
+| [turbo_presence](https://github.com/jibranusman95/turbo_presence) | Figma-style live cursors, avatar stacks, and typing indicators for Rails — one line |
+| [http_decoy](https://github.com/jibranusman95/http_decoy) | A real Rack server that runs inside your RSpec tests — test HTTP contracts, not stubs |
+| [promptscrub](https://github.com/jibranusman95/promptscrub) | PII redaction middleware for LLM calls |
+
+---
+
+## License
+
+MIT. See [LICENSE](LICENSE).

data/Rakefile

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+require "rubocop/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/app/controllers/webhook_inbox/application_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module WebhookInbox
+  class ApplicationController < ActionController::Base
+    before_action :authenticate_dashboard!
+
+    private
+
+    def authenticate_dashboard!
+      auth = WebhookInbox.configuration&.dashboard_auth
+
+      # In production, require dashboard_auth to be configured.
+      if auth.nil?
+        if Rails.env.production?
+          render plain: "WebhookInbox dashboard requires authentication. " \
+                        "Set config.dashboard_auth in your initializer.",
+                 status: :forbidden
+        end
+        # In development/test, allow through.
+        return
+      end
+
+      return if instance_exec(self, &auth)
+
+      render plain: "Unauthorized", status: :unauthorized
+    end
+  end
+end

data/app/controllers/webhook_inbox/dashboard_controller.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module WebhookInbox
+  class DashboardController < ApplicationController
+    def index
+      @events = WebhookInbox::Event.order(created_at: :desc)
+      @events = @events.where(status: params[:status]) if params[:status].present?
+      @events = @events.where(provider: params[:provider]) if params[:provider].present?
+      @events = @events.page(params[:page]).per(50) if @events.respond_to?(:page)
+      @events = @events.limit(200) unless @events.respond_to?(:page)
+
+      @status_counts = WebhookInbox::Event.group(:status).count
+      @providers     = WebhookInbox::Event.distinct.pluck(:provider).sort
+    end
+
+    def show
+      @event = WebhookInbox::Event.find(params[:id])
+    end
+
+    def replay
+      @event = WebhookInbox::Event.find(params[:id])
+      @event.retry!
+      redirect_to webhook_inbox.dashboard_path, notice: "Event #{@event.event_id} queued for reprocessing."
+    end
+  end
+end

data/app/helpers/webhook_inbox/dashboard_helper.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module WebhookInbox
+  module DashboardHelper
+    STATUS_CLASSES = {
+      "pending" => "badge-pending",
+      "processing" => "badge-processing",
+      "processed" => "badge-processed",
+      "failed" => "badge-failed"
+    }.freeze
+
+    def status_badge(status)
+      css = STATUS_CLASSES.fetch(status, "badge-pending")
+      content_tag(:span, status, class: "wi-badge #{css}")
+    end
+  end
+end

data/app/jobs/webhook_inbox/process_job.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module WebhookInbox
+  class ProcessJob < ActiveJob::Base
+    queue_as { WebhookInbox.configuration.queue_name }
+
+    retry_on StandardError, wait: :polynomially_longer, attempts: 5
+
+    def perform(event_id)
+      event = WebhookInbox::Event.find_by(id: event_id)
+      unless event
+        logger.warn "[WebhookInbox] ProcessJob: event #{event_id} not found — skipping"
+        return
+      end
+
+      return unless event.status.in?(%w[pending])
+
+      event.update!(status: "processing", attempts: event.attempts + 1)
+
+      handlers = WebhookInbox.configuration.handlers_for(event.provider, event.event_type)
+
+      if handlers.empty?
+        logger.info "[WebhookInbox] No handlers registered for #{event.provider}:#{event.event_type}"
+      else
+        handlers.each { |handler| handler.call(event) }
+      end
+
+      event.update!(status: "processed", processed_at: Time.current, error_message: nil)
+    rescue StandardError => e
+      event&.update!(
+        status: "failed",
+        error_message: "#{e.class}: #{e.message}\n#{e.backtrace&.first(5)&.join("\n")}"
+      )
+      raise # let ActiveJob retry_on handle re-enqueueing
+    end
+  end
+end

data/app/models/webhook_inbox/event.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module WebhookInbox
+  class Event < ActiveRecord::Base
+    self.table_name = "webhook_inbox_events"
+
+    # payload is stored as text, deserialized as Hash on read
+    attribute :payload, :string
+
+    STATUSES = %w[pending processing processed failed].freeze
+
+    validates :provider,   presence: true
+    validates :event_id,   presence: true
+    validates :status,     inclusion: { in: STATUSES }
+
+    scope :pending,    -> { where(status: "pending") }
+    scope :processing, -> { where(status: "processing") }
+    scope :processed,  -> { where(status: "processed") }
+    scope :failed,     -> { where(status: "failed") }
+    scope :for_provider, ->(name) { where(provider: name.to_s) }
+
+    # parsed_payload returns the payload as a Hash regardless of how it was stored
+    def parsed_payload
+      return payload if payload.is_a?(Hash)
+
+      JSON.parse(payload)
+    rescue JSON::ParserError
+      {}
+    end
+
+    # Enqueue for reprocessing. Resets status to pending.
+    def retry!
+      update!(status: "pending", error_message: nil)
+      WebhookInbox::ProcessJob.set(queue: WebhookInbox.configuration.queue_name)
+                              .perform_later(id)
+    end
+  end
+end

data/app/views/layouts/webhook_inbox/application.html.erb

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebhookInbox Dashboard</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; color: #111; background: #f5f5f5; }
+    a { color: #2563eb; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+
+    .wi-header { background: #1e293b; color: #f8fafc; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
+    .wi-header h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
+    .wi-header a { color: #94a3b8; font-size: 13px; }
+
+    .wi-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
+
+    .wi-notice { background: #dcfce7; border: 1px solid #86efac; color: #15803d; padding: 10px 16px; border-radius: 6px; margin-bottom: 20px; }
+
+    .wi-stats { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
+    .wi-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 20px; min-width: 120px; }
+    .wi-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
+    .wi-stat-value { font-size: 24px; font-weight: 700; margin-top: 2px; }
+
+    .wi-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
+    .wi-filters label { font-size: 12px; color: #64748b; font-weight: 500; }
+    .wi-filters select, .wi-filters input { font-size: 13px; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 10px; background: #fff; }
+    .wi-filters button { font-size: 13px; background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
+
+    table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
+    thead th { background: #f8fafc; padding: 10px 14px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
+    tbody td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
+    tbody tr:last-child td { border-bottom: none; }
+    tbody tr:hover { background: #f8fafc; }
+
+    .wi-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+    .badge-pending    { background: #fef9c3; color: #854d0e; }
+    .badge-processing { background: #dbeafe; color: #1e40af; }
+    .badge-processed  { background: #dcfce7; color: #15803d; }
+    .badge-failed     { background: #fee2e2; color: #991b1b; }
+
+    .wi-mono { font-family: "SF Mono", "Fira Mono", monospace; font-size: 12px; color: #475569; }
+
+    .wi-btn { display: inline-block; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: none; }
+    .wi-btn-replay  { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
+    .wi-btn-replay:hover { background: #e0f2fe; }
+    .wi-btn-back { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
+
+    .wi-detail-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px; }
+    .wi-detail-row { display: flex; gap: 16px; margin-bottom: 12px; align-items: baseline; }
+    .wi-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; width: 120px; flex-shrink: 0; }
+    pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; overflow-x: auto; font-size: 12px; font-family: "SF Mono", "Fira Mono", monospace; white-space: pre; }
+    .wi-error { background: #fff1f2; border: 1px solid #fecdd3; border-radius: 6px; padding: 12px; color: #be123c; font-size: 12px; font-family: monospace; white-space: pre-wrap; margin-top: 8px; }
+  </style>
+</head>
+<body>
+  <div class="wi-header">
+    <h1>WebhookInbox</h1>
+    <%= link_to "All Events", webhook_inbox.dashboard_path %>
+  </div>
+  <div class="wi-container">
+    <% if flash[:notice] %>
+      <div class="wi-notice"><%= flash[:notice] %></div>
+    <% end %>
+    <%= yield %>
+  </div>
+</body>
+</html>