bug_reports_client 0.1.0

data/app/services/bug_reports_client/api_client.rb

@@ -0,0 +1,174 @@
+require "net/http"
+require "json"
+
+module BugReportsClient
+  # HTTP client for the central bug-reports API. Self-contained (no host
+  # dependencies): Bearer-token auth, JSON encoding, timeout retries, and
+  # Result objects so controllers can branch on success without rescuing.
+  class ApiClient
+    class ApiError < StandardError; end
+    class AuthenticationError < ApiError; end
+    class ValidationError < ApiError; end
+
+    # Simple success/failure wrapper returned by the public methods.
+    Result = Struct.new(:success, :message, :data) do
+      def success? = !!success
+    end
+
+    def initialize(config: BugReportsClient.config)
+      @config = config
+      raise AuthenticationError, "BUG_REPORT_API_KEY not configured" if @config.api_key.blank?
+    end
+
+    # Submit a new report. The description carries all formatted details
+    # (answers, reporter, screenshots) as markdown for the GitHub issue.
+    # POST /api/bug_reports
+    def create_bug_report(title:, description:, reporter_email:, severity: nil, report_type: "bug", reporter_name: nil, reporter_external: false)
+      body = {
+        bug_report: {
+          title: prefixed_title(title, report_type),
+          description: description,
+          severity: severity,
+          report_type: report_type,
+          reporter_email: reporter_email,
+          reporter_name: reporter_name,
+          reporter_external: reporter_external,
+          source: @config.source!,
+          callback_url: @config.callback_url
+        }
+      }
+
+      response = post("/bug_reports", body)
+      Result.new(true, "Report submitted successfully", response)
+    rescue ValidationError => e
+      Result.new(false, "Validation error: #{e.message}")
+    rescue => e
+      # Full details go to the log only - raw exception text can leak
+      # internal hosts/URLs into user-facing flash messages.
+      Rails.logger.error "BugReportsClient: failed to create bug report: #{e.message}"
+      Result.new(false, I18n.t("bug_reports_client.flashes.submit_failed"))
+    end
+
+    # Submit an automatic error report (500 capture). The API deduplicates
+    # by fingerprint - repeats of an open error bump its occurrence count.
+    # POST /api/error_reports
+    def create_error_report(title:, description:, fingerprint:, occurred_at:, severity: "high")
+      body = {
+        error_report: {
+          title: title,
+          description: description,
+          fingerprint: fingerprint,
+          occurred_at: occurred_at,
+          severity: severity,
+          source: @config.source!
+        }
+      }
+
+      response = post("/error_reports", body)
+      Result.new(true, "Error report submitted", response)
+    rescue ValidationError => e
+      Result.new(false, "Validation error: #{e.message}")
+    rescue => e
+      Rails.logger.error "BugReportsClient: failed to create error report: #{e.message}"
+      Result.new(false, I18n.t("bug_reports_client.flashes.submit_failed"))
+    end
+
+    # Update an existing report on the API.
+    # PATCH /api/bug_reports/:id
+    def update_bug_report(id, title:, description:, severity: nil, report_type: "bug")
+      body = {
+        bug_report: {
+          title: prefixed_title(title, report_type),
+          description: description,
+          severity: severity,
+          report_type: report_type
+        }
+      }
+
+      response = patch("/bug_reports/#{id}", body)
+      Result.new(true, "Report updated successfully", response)
+    rescue ValidationError => e
+      Result.new(false, "Validation error: #{e.message}")
+    rescue => e
+      Rails.logger.error "BugReportsClient: failed to update bug report #{id}: #{e.message}"
+      Result.new(false, I18n.t("bug_reports_client.flashes.submit_failed"))
+    end
+
+    private
+
+    # Issue titles are prefixed so GitHub issues are scannable at a glance.
+    def prefixed_title(title, report_type = "bug")
+      prefix = report_type == "feature" ? "Feature" : "Bug"
+      "[#{prefix}]: #{title}"
+    end
+
+    def post(path, body)
+      request = Net::HTTP::Post.new(build_uri(path))
+      request.body = body.to_json
+      execute(request)
+    end
+
+    def patch(path, body)
+      request = Net::HTTP::Patch.new(build_uri(path))
+      request.body = body.to_json
+      execute(request)
+    end
+
+    def build_uri(path)
+      URI("#{@config.api_url}#{path}")
+    end
+
+    # Executes with auth headers and up to two retries on timeouts.
+    def execute(request, retry_count: 0)
+      request["Authorization"] = "Bearer #{@config.api_key}"
+      request["Accept"] = "application/json"
+      request["Content-Type"] = "application/json"
+
+      uri = request.uri
+      response = Net::HTTP.start(uri.hostname, uri.port, use_ssl: uri.scheme == "https", read_timeout: 30) do |http|
+        http.request(request)
+      end
+
+      handle_response(response)
+    rescue Net::ReadTimeout, Net::OpenTimeout => e
+      if retry_count < 2
+        sleep(2**retry_count)
+        execute(request, retry_count: retry_count + 1)
+      else
+        raise ApiError, "Request timeout after #{retry_count + 1} attempts: #{e.message}"
+      end
+    rescue ApiError
+      raise
+    rescue => e
+      raise ApiError, "Request failed: #{e.message}"
+    end
+
+    def handle_response(response)
+      case response.code.to_i
+      when 200..299
+        JSON.parse(response.body.to_s.force_encoding("UTF-8"))
+      when 401
+        raise AuthenticationError, "Invalid API key"
+      when 403
+        raise AuthenticationError, "API key not permitted for source #{@config.source.inspect}"
+      when 422
+        error_data = parse_body(response)
+        raise ValidationError, extract_errors(error_data)
+      else
+        error_data = parse_body(response)
+        raise ApiError, "API error (#{response.code}): #{error_data['message'] || error_data['error'] || response.body}"
+      end
+    end
+
+    def parse_body(response)
+      JSON.parse(response.body.to_s)
+    rescue JSON::ParserError
+      {}
+    end
+
+    def extract_errors(error_data)
+      messages = error_data["errors"] || error_data["messages"] || [ error_data["message"] || error_data["error"] || "Validation failed" ]
+      Array(messages).join(", ")
+    end
+  end
+end

data/app/services/bug_reports_client/description_builder.rb

@@ -0,0 +1,91 @@
+module BugReportsClient
+  # Builds the markdown description sent to the API (and so the GitHub issue
+  # body) from a report's schema-driven answers.
+  #
+  # Two modes:
+  #   - Template: if the host provides a markdown issue template (explicit
+  #     config.issue_template_path or config/bug_report_issue.md), it is
+  #     rendered with {{placeholder}} substitution. Available placeholders:
+  #     every schema field key, plus {{title}}, {{report_type}}, {{severity}},
+  #     {{reporter_name}}, {{app_name}} and {{screenshots}}.
+  #   - Default: auto-generates a "## <field label>" section per answered
+  #     field in schema order, prefixed with the severity line for bugs and
+  #     suffixed with screenshot links.
+  class DescriptionBuilder
+    def initialize(bug_report, config: BugReportsClient.config, schema: BugReportsClient.form_schema)
+      @bug_report = bug_report
+      @config = config
+      @schema = schema
+    end
+
+    def build
+      template_path = resolve_template_path
+      template_path ? render_template(template_path) : render_default
+    end
+
+    private
+
+    def resolve_template_path
+      explicit = @config.issue_template_path
+      return explicit if explicit.present? && File.exist?(explicit)
+
+      host_default = Rails.root.join("config", "bug_report_issue.md")
+      host_default.exist? ? host_default : nil
+    end
+
+    def render_template(path)
+      File.read(path).gsub(/\{\{\s*([a-z0-9_]+)\s*\}\}/i) { placeholder_value(Regexp.last_match(1)) }
+    end
+
+    def placeholder_value(key)
+      case key
+      when "title" then @bug_report.title.to_s
+      when "report_type" then @bug_report.report_type.to_s
+      when "severity" then @bug_report.severity.to_s
+      when "reporter_name" then @config.reporter_name_for(@bug_report.user).to_s
+      when "app_name" then app_name
+      when "screenshots" then screenshot_links
+      else
+        @bug_report.response(key).to_s
+      end
+    end
+
+    # Sections in schema order, skipping unanswered fields so the issue only
+    # contains what the reporter actually filled in.
+    def render_default
+      sections = []
+      sections << "**#{I18n.t('bug_reports_client.description.severity')}:** #{@bug_report.severity}" if @bug_report.bug? && @bug_report.severity.present?
+
+      @schema.fields_for(@bug_report.report_type).each do |field|
+        value = @bug_report.response(field.key)
+        next if value.blank?
+
+        sections << "## #{field.label_text}\n#{value}"
+      end
+
+      # Set server-side when the reporter linked a captured 500 - the
+      # fingerprint cross-references the automatically-filed error issue.
+      related = @bug_report.response("related_error")
+      sections << "## #{I18n.t('bug_reports_client.description.related_error')}\n#{related}" if related.present?
+
+      screenshots = screenshot_links
+      sections << "## #{I18n.t('bug_reports_client.description.screenshots')}\n#{screenshots}" if screenshots.present?
+
+      sections.join("\n\n")
+    end
+
+    # Markdown list of public screenshot URLs. Blob URLs are built against the
+    # configured app host so they resolve from GitHub.
+    def screenshot_links
+      return "" unless @config.screenshots_enabled && @bug_report.screenshots.attached?
+
+      @bug_report.screenshots.map do |screenshot|
+        "- #{Rails.application.routes.url_helpers.rails_blob_url(screenshot, host: @config.app_host)}"
+      end.join("\n")
+    end
+
+    def app_name
+      @config.app_name.presence || Rails.application.class.module_parent_name
+    end
+  end
+end

data/app/views/bug_reports_client/bug_reports/_field_checkbox.html.erb

@@ -0,0 +1,18 @@
+<%# Checkbox for a schema field. A hidden field submits "0" when unticked so
+    the answer is always present in responses. Locals: field, bug_report, readonly. %>
+<div class="flex items-start gap-2 pt-1">
+  <%= hidden_field_tag "bug_report[responses][#{field.key}]", "0", id: nil, disabled: readonly %>
+  <%= check_box_tag "bug_report[responses][#{field.key}]", "1",
+      ActiveModel::Type::Boolean.new.cast(bug_report.response(field.key)),
+      id: "bug_report_responses_#{field.key}", disabled: readonly,
+      class: "mt-0.5 h-4 w-4 rounded border-slate-300 text-slate-700 focus:ring-slate-500" %>
+  <div>
+    <%= label_tag "bug_report_responses_#{field.key}", nil, class: "text-sm text-slate-700" do %>
+      <%= field.label_text %>
+      <% if field.required? %><span class="text-orange-500">*</span><% end %>
+    <% end %>
+    <% if field.help_text.present? %>
+      <p class="mt-0.5 text-xs text-slate-400"><%= field.help_text %></p>
+    <% end %>
+  </div>
+</div>

data/app/views/bug_reports_client/bug_reports/_field_select.html.erb

@@ -0,0 +1,15 @@
+<%# Select for a schema field. Options are [label, value] pairs from the
+    schema. Locals: field, bug_report, readonly. %>
+<div>
+  <%= label_tag "bug_report_responses_#{field.key}", nil, class: brc_label_classes do %>
+    <%= field.label_text %>
+    <% if field.required? %><span class="text-orange-500">*</span><% else %><span class="font-normal normal-case text-slate-400"><%= t("bug_reports_client.form.optional") %></span><% end %>
+  <% end %>
+  <%= select_tag "bug_report[responses][#{field.key}]",
+      options_for_select(field.options, bug_report.response(field.key)),
+      id: "bug_report_responses_#{field.key}", class: brc_input_classes,
+      include_blank: field.prompt_text, required: field.required?, disabled: readonly %>
+  <% if field.help_text.present? %>
+    <p class="mt-1 text-xs text-slate-400"><%= field.help_text %></p>
+  <% end %>
+</div>

data/app/views/bug_reports_client/bug_reports/_field_text.html.erb

@@ -0,0 +1,13 @@
+<%# Single-line text input for a schema field. Locals: field, bug_report, readonly. %>
+<div>
+  <%= label_tag "bug_report_responses_#{field.key}", nil, class: brc_label_classes do %>
+    <%= field.label_text %>
+    <% if field.required? %><span class="text-orange-500">*</span><% else %><span class="font-normal normal-case text-slate-400"><%= t("bug_reports_client.form.optional") %></span><% end %>
+  <% end %>
+  <%= text_field_tag "bug_report[responses][#{field.key}]", bug_report.response(field.key),
+      id: "bug_report_responses_#{field.key}", class: brc_input_classes,
+      required: field.required?, disabled: readonly, placeholder: field.placeholder_text %>
+  <% if field.help_text.present? %>
+    <p class="mt-1 text-xs text-slate-400"><%= field.help_text %></p>
+  <% end %>
+</div>

data/app/views/bug_reports_client/bug_reports/_field_textarea.html.erb

@@ -0,0 +1,13 @@
+<%# Multi-line text area for a schema field. Locals: field, bug_report, readonly. %>
+<div>
+  <%= label_tag "bug_report_responses_#{field.key}", nil, class: brc_label_classes do %>
+    <%= field.label_text %>
+    <% if field.required? %><span class="text-orange-500">*</span><% else %><span class="font-normal normal-case text-slate-400"><%= t("bug_reports_client.form.optional") %></span><% end %>
+  <% end %>
+  <%= text_area_tag "bug_report[responses][#{field.key}]", bug_report.response(field.key),
+      id: "bug_report_responses_#{field.key}", class: brc_input_classes, rows: field.rows,
+      required: field.required?, disabled: readonly, placeholder: field.placeholder_text %>
+  <% if field.help_text.present? %>
+    <p class="mt-1 text-xs text-slate-400"><%= field.help_text %></p>
+  <% end %>
+</div>

data/app/views/bug_reports_client/bug_reports/_filters.html.erb

@@ -0,0 +1,31 @@
+<%# Status tabs + type filter, shared by the "my reports" and "all reports"
+    views. url_for targets the current action, so each link preserves the
+    other axis's selection. %>
+<div class="border-b border-slate-200 mb-4">
+  <ul class="flex -mb-px text-sm font-medium">
+    <% [ [ t("bug_reports_client.filters.all"), nil, @counts[:all] ],
+         [ t("bug_reports_client.filters.open"), "open", @counts[:open] ],
+         [ t("bug_reports_client.filters.resolved"), "closed", @counts[:closed] ] ].each do |label, status, count| %>
+      <li class="me-4">
+        <%= link_to url_for(status: status, report_type: params[:report_type]),
+            class: "inline-block pb-3 border-b-2 rounded-t-lg #{params[:status].presence == status ? 'text-slate-900 border-slate-800' : 'border-transparent text-slate-400 hover:text-slate-700 hover:border-slate-300'}" do %>
+          <%= label %>
+          <span class="ml-1 text-xs text-slate-400">(<%= count %>)</span>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>
+
+<div class="flex flex-wrap items-center gap-2 mb-6">
+  <span class="text-xs font-medium uppercase tracking-wide text-slate-400 mr-1"><%= t("bug_reports_client.filters.type_label") %></span>
+  <% [ [ t("bug_reports_client.filters.all_types"), nil, @type_counts[:all] ],
+       [ t("bug_reports_client.filters.bugs"), "bug", @type_counts[:bug] ],
+       [ t("bug_reports_client.filters.features"), "feature", @type_counts[:feature] ] ].each do |label, type, count| %>
+    <%= link_to url_for(status: params[:status], report_type: type),
+        class: report_type_pill_class(params[:report_type].presence == type, type) do %>
+      <%= label %>
+      <span class="text-xs opacity-70">(<%= count %>)</span>
+    <% end %>
+  <% end %>
+</div>

data/app/views/bug_reports_client/bug_reports/_form.html.erb

@@ -0,0 +1,185 @@
+<%# Schema-driven report form. Fields come from the active form schema
+    (host config/bug_report_form.yml or the engine default), grouped into
+    sections. Bug and feature groups are toggled client-side by the
+    bug-reports-client--report-type Stimulus controller; the hidden group's
+    inputs are disabled so they neither submit nor block validation. %>
+<% readonly = bug_report.persisted? && !bug_report.open? %>
+<% schema = BugReportsClient.form_schema %>
+<% config = BugReportsClient.config %>
+<% multi_type = schema.report_types.size > 1 %>
+
+<%= form_with model: bug_report,
+    url: bug_report.persisted? ? bug_report_path(bug_report) : bug_reports_path,
+    class: "space-y-6",
+    data: {
+      turbo_action: "replace",
+      controller: "bug-reports-client--report-type",
+      "bug-reports-client--report-type-readonly-value": readonly,
+      "bug-reports-client--report-type-bug-summary-value": t("bug_reports_client.form.title.bug_placeholder"),
+      "bug-reports-client--report-type-feature-summary-value": t("bug_reports_client.form.title.feature_placeholder")
+    } do |f| %>
+  <% if bug_report.errors.any? %>
+    <div class="bg-red-50 border border-red-200 rounded-lg p-4" data-controller="bug-reports-client--error-summary">
+      <div class="flex gap-3">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div>
+          <p class="text-sm font-medium text-red-800"><%= t("bug_reports_client.form.errors_heading") %></p>
+          <ul class="mt-1 text-sm text-red-700 list-disc list-inside">
+            <% bug_report.errors.full_messages.each do |message| %>
+              <li><%= message %></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <%# ---- Shared: what are you reporting + title ---- %>
+  <div class="bg-slate-50 rounded-xl p-6">
+    <h3 class="text-lg font-semibold text-slate-900 mb-6"><%= t("bug_reports_client.form.overview") %></h3>
+
+    <div class="grid grid-cols-1 gap-4">
+      <% if multi_type %>
+        <div>
+          <span class="<%= brc_label_classes %>"><%= t("bug_reports_client.form.report_type.label") %> <span class="text-orange-500">*</span></span>
+          <%# Radio cards: red for bugs, blue for feature requests. The model
+              defaults report_type to "bug", so a bug card starts selected.
+              Once submitted the type is locked (the GitHub issue is already
+              filed as that type) - cards disable and the unselected one dims. %>
+          <% type_locked = readonly || bug_report.persisted? %>
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <% schema.report_types.each do |type| %>
+              <% feature = type == "feature" %>
+              <% selected = (bug_report.report_type.presence || schema.report_types.first) == type %>
+              <label class="<%= type_locked ? "cursor-default" : "cursor-pointer" %>">
+                <%= f.radio_button :report_type, type, class: "peer sr-only", disabled: type_locked,
+                    data: { "bug-reports-client--report-type-target": "type", action: "change->bug-reports-client--report-type#toggle" } %>
+                <div class="flex h-full items-start gap-3 rounded-xl border-2 border-slate-200 bg-white p-4 transition-colors <%= "hover:border-slate-300" unless type_locked %> <%= "opacity-50" if type_locked && !selected %> <%= feature ? "peer-checked:border-blue-400 peer-checked:bg-blue-50" : "peer-checked:border-red-400 peer-checked:bg-red-50" %>">
+                  <% if feature %>
+                    <svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                  <% else %>
+                    <svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                  <% end %>
+                  <div>
+                    <p class="text-sm font-semibold text-slate-900"><%= t("bug_reports_client.form.report_type.#{type}_title") %></p>
+                    <p class="text-xs text-slate-500"><%= t("bug_reports_client.form.report_type.#{type}_description") %></p>
+                  </div>
+                </div>
+              </label>
+            <% end %>
+          </div>
+          <% if type_locked && !readonly %>
+            <p class="mt-1 text-xs text-slate-400"><%= t("bug_reports_client.form.report_type.locked") %></p>
+          <% end %>
+        </div>
+      <% else %>
+        <%= f.hidden_field :report_type, value: schema.report_types.first,
+            data: { "bug-reports-client--report-type-target": "type" } %>
+      <% end %>
+
+      <div>
+        <%= f.label :title, class: brc_label_classes do %><%= t("bug_reports_client.form.title.label") %> <span class="text-orange-500">*</span><% end %>
+        <%= f.text_field :title, class: brc_input_classes, required: true, disabled: readonly,
+            placeholder: t("bug_reports_client.form.title.bug_placeholder"),
+            data: { "bug-reports-client--report-type-target": "summary" } %>
+        <p class="mt-1 text-xs text-slate-400"><%= t("bug_reports_client.form.title.help") %></p>
+      </div>
+    </div>
+  </div>
+
+  <%# "Did it relate to this error?" - only appears when the reporter hit
+      captured 500s recently (engine-owned partial). %>
+  <%= render "bug_reports_client/bug_reports/related_error", bug_report: bug_report, recent_error_events: @recent_error_events %>
+
+  <%# ---- Per-type field groups, rendered from the schema ---- %>
+  <% schema.report_types.each do |report_type| %>
+    <% target = report_type == "feature" ? "featureFields" : "bugFields" %>
+    <% active = (bug_report.report_type.presence || schema.report_types.first) == report_type %>
+    <div data-<%= "bug-reports-client--report-type-target" %>="<%= target %>" class="space-y-6 <%= "hidden" unless active %>">
+      <% sections = schema.sections_for(report_type) %>
+      <% sections.each_with_index do |(section, fields), section_index| %>
+        <div class="bg-slate-50 rounded-xl p-6">
+          <% if section.present? %>
+            <h3 class="text-lg font-semibold text-slate-900 mb-6">
+              <%= t("bug_reports_client.sections.#{section}", default: section.humanize) %>
+            </h3>
+          <% end %>
+
+          <div class="grid grid-cols-1 gap-4">
+            <%# Severity is a first-class column (the API requires it for bugs),
+                so it renders ahead of the schema fields in the first bug section. %>
+            <% if report_type == "bug" && section_index.zero? && config.ask_severity %>
+              <div>
+                <%= f.label :severity, class: brc_label_classes do %><%= t("bug_reports_client.form.severity.label") %> <span class="text-orange-500">*</span><% end %>
+                <%= f.select :severity,
+                    BugReportsClient::BugReport.severities.keys.map { |severity| [ t("bug_reports_client.form.severity.#{severity}"), severity ] },
+                    { include_blank: t("bug_reports_client.form.severity.prompt") },
+                    { class: brc_input_classes, required: true, disabled: readonly } %>
+              </div>
+            <% end %>
+
+            <% fields.each do |field| %>
+              <%= render "bug_reports_client/bug_reports/field_#{field.type}",
+                  field: field, bug_report: bug_report, readonly: readonly %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%# ---- Shared: screenshots (drag-and-drop with previews) ---- %>
+  <% if config.screenshots_enabled %>
+    <div class="bg-slate-50 rounded-xl p-6">
+      <div data-controller="bug-reports-client--screenshot-dropzone"
+           data-<%= "bug-reports-client--screenshot-dropzone-max-value" %>="<%= config.max_screenshots %>"
+           data-<%= "bug-reports-client--screenshot-dropzone-limit-message-value" %>="<%= t("bug_reports_client.form.screenshots.limit", max: config.max_screenshots) %>"
+           data-<%= "bug-reports-client--screenshot-dropzone-max-bytes-value" %>="<%= config.max_screenshot_size %>"
+           data-<%= "bug-reports-client--screenshot-dropzone-size-message-value" %>="<%= t("bug_reports_client.errors.screenshot_size", filename: "%{filename}", max_mb: config.max_screenshot_size / (1024 * 1024)) %>">
+        <%= f.label :screenshots, class: brc_label_classes do %><%= t("bug_reports_client.form.screenshots.label") %> <span class="font-normal normal-case text-slate-400"><%= t("bug_reports_client.form.screenshots.hint", max: config.max_screenshots) %></span><% end %>
+        <% if bug_report.persisted? && bug_report.screenshots.attached? %>
+          <div class="flex flex-wrap gap-2 mb-3">
+            <% bug_report.screenshots.each do |screenshot| %>
+              <%# Blob URLs resolve via the host's routes, not the engine's. %>
+              <%= image_tag main_app.rails_blob_path(screenshot), class: "h-16 w-16 object-cover rounded-lg border border-slate-200" %>
+            <% end %>
+          </div>
+          <% unless readonly %>
+            <p class="mb-2 text-xs text-slate-400"><%= t("bug_reports_client.form.screenshots.replace_notice") %></p>
+          <% end %>
+        <% end %>
+        <% unless readonly %>
+          <div data-<%= "bug-reports-client--screenshot-dropzone-target" %>="zone" role="button" tabindex="0"
+               data-action="click-><%= "bug-reports-client--screenshot-dropzone" %>#browse keydown-><%= "bug-reports-client--screenshot-dropzone" %>#keydown dragover-><%= "bug-reports-client--screenshot-dropzone" %>#dragover dragleave-><%= "bug-reports-client--screenshot-dropzone" %>#dragleave drop-><%= "bug-reports-client--screenshot-dropzone" %>#drop"
+               class="flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed border-slate-300 bg-white px-4 py-6 text-center transition-colors">
+            <svg class="h-6 w-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+            </svg>
+            <p class="text-sm text-slate-600"><%= t("bug_reports_client.form.screenshots.drop_prompt") %></p>
+            <p class="text-xs text-slate-400"><%= t("bug_reports_client.form.screenshots.drop_hint", max: config.max_screenshots) %></p>
+          </div>
+          <%= f.file_field :screenshots, accept: "image/*", multiple: true, class: "hidden",
+              data: { "bug-reports-client--screenshot-dropzone-target": "input", action: "change->bug-reports-client--screenshot-dropzone#picked" } %>
+          <div data-<%= "bug-reports-client--screenshot-dropzone-target" %>="previews" class="mt-3 flex flex-wrap gap-3"></div>
+          <p data-<%= "bug-reports-client--screenshot-dropzone-target" %>="message" class="mt-1 text-xs text-red-600"></p>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <% unless readonly %>
+    <div class="flex justify-end gap-3">
+      <%= f.submit bug_report.persisted? ? t("bug_reports_client.form.update") : t("bug_reports_client.form.submit"),
+          class: "inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 cursor-pointer",
+          data: { turbo_submits_with: t("bug_reports_client.form.submitting") } %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/bug_reports_client/bug_reports/_pagination.html.erb

@@ -0,0 +1,21 @@
+<%# Minimal previous/next pagination driven by @page and @total_pages set in
+    the controller. Preserves the active filters. %>
+<% if @total_pages > 1 %>
+  <div class="mt-6 flex items-center justify-between text-sm">
+    <div>
+      <% if @page > 1 %>
+        <%= link_to t("bug_reports_client.pagination.previous"),
+            url_for(page: @page - 1, status: params[:status], report_type: params[:report_type]),
+            class: "inline-flex items-center rounded-lg border border-slate-300 px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100" %>
+      <% end %>
+    </div>
+    <span class="text-slate-500"><%= @page %> / <%= @total_pages %></span>
+    <div>
+      <% if @page < @total_pages %>
+        <%= link_to t("bug_reports_client.pagination.next"),
+            url_for(page: @page + 1, status: params[:status], report_type: params[:report_type]),
+            class: "inline-flex items-center rounded-lg border border-slate-300 px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100" %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/bug_reports_client/bug_reports/_rating_badge.html.erb

@@ -0,0 +1,11 @@
+<%# Low/medium/high/critical pill. Used for a bug's severity and a feature's
+    priority (see BugReport#importance). Local: value. %>
+<% badge_classes = case value
+when "critical" then "bg-red-100 text-red-700 border-red-200"
+when "high" then "bg-orange-100 text-orange-700 border-orange-200"
+when "medium" then "bg-yellow-100 text-yellow-700 border-yellow-200"
+else "bg-slate-100 text-slate-600 border-slate-200"
+end %>
+<span class="inline-flex items-center text-xs font-medium px-2 py-0.5 rounded border <%= badge_classes %>">
+  <%= value.present? ? value.capitalize : "&mdash;".html_safe %>
+</span>

data/app/views/bug_reports_client/bug_reports/_related_error.html.erb

@@ -0,0 +1,20 @@
+<%# "Did your problem relate to this error?" - shown on NEW reports only,
+    and only when the signed-in user hit captured 500s recently. Rendered
+    from _form; stays engine-owned even when hosts copy the form, so the
+    behaviour keeps receiving upstream updates. Locals: bug_report, and
+    recent_error_events (may be nil on edit renders). %>
+<% events = local_assigns[:recent_error_events] %>
+<% if !bug_report.persisted? && events.present? %>
+  <div class="bg-amber-50 border border-amber-200 rounded-xl p-6">
+    <label for="bug_report_related_error_event_id" class="block text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+      <%= t("bug_reports_client.form.related_error.label") %>
+    </label>
+    <p class="mb-2 text-xs text-amber-700/80"><%= t("bug_reports_client.form.related_error.help") %></p>
+    <%# User-facing wording only - what they were doing, never the exception. %>
+    <%= select_tag "bug_report[related_error_event_id]",
+        options_for_select(events.map { |event| [ "#{event.occurred_at.strftime('%-d %b %H:%M')} - #{event.user_facing_description}", event.id ] }),
+        include_blank: t("bug_reports_client.form.related_error.prompt"),
+        id: "bug_report_related_error_event_id",
+        class: "w-full rounded-lg border border-amber-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500" %>
+  </div>
+<% end %>

data/app/views/bug_reports_client/bug_reports/_status_badge.html.erb

@@ -0,0 +1,12 @@
+<%# Open/Resolved status pill. Local: status. %>
+<%
+badge_classes = case status
+when "open" then "bg-blue-100 text-blue-700 border-blue-200"
+when "closed" then "bg-green-100 text-green-700 border-green-200"
+else "bg-slate-100 text-slate-600 border-slate-200"
+end
+label = status == "closed" ? t("bug_reports_client.badges.resolved") : t("bug_reports_client.badges.open")
+%>
+<span class="inline-flex items-center text-xs font-medium px-2 py-0.5 rounded border <%= badge_classes %>">
+  <%= label %>
+</span>

data/app/views/bug_reports_client/bug_reports/_type_badge.html.erb

@@ -0,0 +1,6 @@
+<%# Coloured pill marking a report as a bug or a feature request. Local: report_type. %>
+<% feature = report_type.to_s == "feature" %>
+<% badge_classes = feature ? "bg-indigo-100 text-indigo-700 border-indigo-200" : "bg-rose-100 text-rose-700 border-rose-200" %>
+<span class="inline-flex items-center text-xs font-medium px-2 py-0.5 rounded border <%= badge_classes %>">
+  <%= feature ? t("bug_reports_client.badges.feature") : t("bug_reports_client.badges.bug") %>
+</span>