Merge remote-tracking branch 'origin/develop' into codex/super-admin-email-templates-merge

generate_article_search_terms still pulled ENV['OPENAI_API_KEY'], left
over from before the Jan 2025 Captain migration moved the key into
InstallationConfig as CAPTAIN_OPEN_AI_API_KEY. Every other Captain LLM
call site got updated then; this one (used by Portal::ArticleIndexingJob
for help center article embedding search terms) didn't, so it sent a
blank bearer token unless you also happened to have the old env var set.

Also drops the stale OPENAI_API_KEY line from .env.example and points to
where the key actually lives now (Super Admin > App Configs > Captain).

---------

Co-authored-by: Sony Mathew <2040199+sony-mathew@users.noreply.github.com>
Co-authored-by: Sony Mathew <sony@chatwoot.com>

.env.example

@@ -272,9 +272,9 @@ AZURE_APP_SECRET=
 # ENABLE_SIDEKIQ_DEQUEUE_LOGGER=false
 
 
-# AI powered features
-## OpenAI key
-# OPENAI_API_KEY=
+# AI powered features (Captain)
+# The OpenAI API key and endpoint for Captain are not configured via .env.
+# Set them at Super Admin > App Configs > Captain (CAPTAIN_OPEN_AI_API_KEY, CAPTAIN_OPEN_AI_ENDPOINT).
 
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes

Gemfile.lock

@@ -570,7 +570,7 @@ GEM
     minitest (5.25.5)
     mock_redis (0.36.0)
       ruby2_keywords
-    msgpack (1.8.0)
+    msgpack (1.8.3)
     multi_json (1.15.0)
     multi_xml (0.9.1)
       bigdecimal (>= 3.1, < 5)

app/builders/v2/reports/drilldown_builder.rb

@@ -0,0 +1,213 @@
+class V2::Reports::DrilldownBuilder
+  include DateRangeHelper
+  include TimezoneHelper
+
+  DEFAULT_GROUP_BY = 'day'.freeze
+  DEFAULT_PAGE = 1
+  DEFAULT_PER_PAGE = 25
+  MAX_PER_PAGE = 100
+  SUPPORTED_GROUP_BY = %w[hour day week month year].freeze
+  SUPPORTED_DIMENSION_TYPES = %w[account inbox agent label team].freeze
+  MESSAGE_METRICS = {
+    'incoming_messages_count' => :incoming,
+    'outgoing_messages_count' => :outgoing
+  }.freeze
+  MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
+
+  pattr_initialize :account, :params
+
+  def self.supported_dimension_type?(type) = SUPPORTED_DIMENSION_TYPES.include?((type.presence || 'account').to_s)
+
+  def build
+    records = paginated_records.to_a
+    { meta: meta, payload: records.map { |record| record_serializer(records).serialize(record) } }
+  end
+
+  private
+
+  def meta
+    {
+      metric: metric,
+      record_type: record_type,
+      bucket: {
+        since: bucket_range.begin.to_i,
+        until: bucket_range.end.to_i
+      },
+      current_page: current_page,
+      per_page: per_page,
+      total_count: paginated_records.total_count,
+      conversation_count: conversation_count
+    }
+  end
+
+  def conversation_count
+    return paginated_records.total_count if conversation_metric?
+
+    drilldown_scope.except(:includes).reorder(nil).distinct.count(:conversation_id)
+  end
+
+  def paginated_records
+    @paginated_records ||= drilldown_scope.page(current_page).per(per_page)
+  end
+
+  def drilldown_scope
+    if message_metric?
+      message_scope
+    elsif conversation_metric?
+      conversation_scope
+    else
+      reporting_event_scope
+    end
+  end
+
+  def message_scope
+    scope.messages
+         .where(account_id: account.id, created_at: bucket_range)
+         .public_send(MESSAGE_METRICS.fetch(metric))
+         .includes(:sender, conversation: [:assignee, :contact, :inbox])
+         .reorder(created_at: :desc)
+  end
+
+  def conversation_scope
+    scope.conversations
+         .where(account_id: account.id, created_at: bucket_range)
+         .includes(:assignee, :contact, :inbox)
+         .order(created_at: :desc)
+  end
+
+  def reporting_event_scope
+    events = scope.reporting_events
+                  .where(account_id: account.id, name: raw_event_name, created_at: bucket_range)
+                  .includes(:user, :inbox, conversation: [:assignee, :contact, :inbox])
+                  .order(created_at: :desc)
+
+    if raw_count_strategy == :exclude_bot_handoffs
+      events = events.where.not(conversation_id: bot_handoff_conversation_ids_subquery)
+    elsif raw_count_strategy == :distinct_conversation
+      events = events.where(id: distinct_conversation_event_ids(events))
+    end
+
+    events
+  end
+
+  def bot_handoff_conversation_ids_subquery
+    scope.reporting_events
+         .where(account_id: account.id, name: :conversation_bot_handoff, created_at: range)
+         .where.not(conversation_id: nil)
+         .select(:conversation_id)
+  end
+
+  def distinct_conversation_event_ids(events)
+    events.reorder(nil)
+          .where.not(conversation_id: nil)
+          .select('MAX(reporting_events.id)')
+          .group(:conversation_id)
+  end
+
+  def record_serializer(records)
+    @record_serializer ||= V2::Reports::DrilldownRecordSerializer.new(
+      account,
+      metric,
+      use_business_hours?,
+      records
+    )
+  end
+
+  def bucket_range
+    @bucket_range ||= begin
+      bucket_start = Time.zone.at(params[:bucket_timestamp].to_i).in_time_zone(timezone)
+      bucket_end = bucket_end_for(bucket_start)
+      requested_start = Time.zone.at(params[:since].to_i)
+      requested_end = Time.zone.at(params[:until].to_i)
+
+      [bucket_start, requested_start].max...[bucket_end, requested_end].min
+    end
+  end
+
+  def bucket_end_for(bucket_start)
+    {
+      'hour' => bucket_start + 1.hour,
+      'day' => bucket_start + 1.day,
+      'week' => bucket_start + 1.week,
+      'month' => bucket_start + 1.month,
+      'year' => bucket_start + 1.year
+    }.fetch(group_by)
+  end
+
+  def scope
+    case dimension_type
+    when 'account' then account
+    when 'inbox' then inbox
+    when 'agent' then user
+    when 'label' then label
+    when 'team' then team
+    else
+      raise ArgumentError, "Unsupported drilldown dimension type: #{dimension_type}"
+    end
+  end
+
+  def inbox = @inbox ||= account.inboxes.find(params[:id])
+
+  def user = @user ||= account.users.find(params[:id])
+
+  def label = @label ||= account.labels.find(params[:id])
+
+  def team = @team ||= account.teams.find(params[:id])
+
+  def metric
+    params[:metric].to_s
+  end
+
+  def report_metric
+    @report_metric ||= Reports::ReportMetricRegistry.fetch(metric)
+  end
+
+  def raw_event_name
+    report_metric&.raw_event_name
+  end
+
+  def raw_count_strategy
+    report_metric&.raw_count_strategy
+  end
+
+  def record_type
+    return 'message' if message_metric? || MESSAGE_EVENT_METRICS.include?(metric)
+
+    'conversation'
+  end
+
+  def message_metric?
+    MESSAGE_METRICS.key?(metric)
+  end
+
+  def conversation_metric?
+    metric == 'conversations_count'
+  end
+
+  def dimension_type
+    (params[:type].presence || 'account').to_s
+  end
+
+  def group_by
+    @group_by ||= SUPPORTED_GROUP_BY.include?(params[:group_by].to_s) ? params[:group_by].to_s : DEFAULT_GROUP_BY
+  end
+
+  def timezone
+    @timezone ||= timezone_name_from_offset(params[:timezone_offset])
+  end
+
+  def current_page
+    [params[:page].to_i, DEFAULT_PAGE].max
+  end
+
+  def per_page
+    requested_per_page = params[:per_page].to_i
+    requested_per_page = DEFAULT_PER_PAGE if requested_per_page <= 0
+
+    [requested_per_page, MAX_PER_PAGE].min
+  end
+
+  def use_business_hours?
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+  end
+end

app/builders/v2/reports/drilldown_record_serializer.rb

@@ -0,0 +1,199 @@
+class V2::Reports::DrilldownRecordSerializer
+  MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
+
+  attr_reader :account, :metric, :use_business_hours, :records
+
+  def initialize(account, metric, use_business_hours, records = [])
+    @account = account
+    @metric = metric
+    @use_business_hours = use_business_hours
+    @records = records
+  end
+
+  def serialize(record)
+    return serialize_message(record) if record.is_a?(Message)
+    return serialize_conversation_event(record) if record.is_a?(ReportingEvent)
+
+    serialize_conversation(record)
+  end
+
+  private
+
+  def serialize_message(message, metric_value: nil, occurred_at: nil)
+    {
+      record_type: 'message',
+      conversation: conversation_attributes(message.conversation),
+      message: message_attributes(message),
+      metric_value: metric_value,
+      occurred_at: (occurred_at || message.created_at).to_i
+    }
+  end
+
+  def serialize_conversation_event(event)
+    inferred_message = inferred_message_for(event)
+    if inferred_message.present?
+      return serialize_message(
+        inferred_message,
+        metric_value: event_metric_value(event),
+        occurred_at: event_timestamp(event)
+      )
+    end
+
+    serialize_conversation(
+      event.conversation,
+      metric_value: event_metric_value(event),
+      occurred_at: event_timestamp(event),
+      event_name: event.name
+    )
+  end
+
+  def serialize_conversation(conversation, metric_value: nil, occurred_at: nil, event_name: nil)
+    serialized_record = {
+      record_type: 'conversation',
+      conversation: conversation_attributes(conversation),
+      message: nil,
+      metric_value: metric_value,
+      occurred_at: (occurred_at || conversation&.created_at)&.to_i
+    }
+    serialized_record[:event_name] = event_name if event_name.present?
+    serialized_record
+  end
+
+  def conversation_attributes(conversation)
+    return {} if conversation.blank?
+
+    {
+      id: conversation.id,
+      display_id: conversation.display_id,
+      contact_id: conversation.contact_id,
+      contact_name: conversation.contact&.name,
+      inbox_id: conversation.inbox_id,
+      inbox_name: conversation.inbox&.name,
+      assignee_id: conversation.assignee_id,
+      assignee_name: conversation.assignee&.name,
+      status: conversation.status,
+      created_at: conversation.created_at.to_i,
+      last_activity_at: conversation.last_activity_at.to_i,
+      last_message: last_message_attributes(conversation)
+    }
+  end
+
+  def message_attributes(message)
+    {
+      id: message.id,
+      content: message.content,
+      message_type: message.message_type,
+      sender_name: message.sender&.try(:name),
+      created_at: message.created_at.to_i
+    }
+  end
+
+  def last_message_attributes(conversation)
+    message = latest_messages_by_conversation_id[conversation.id]
+    return if message.blank?
+
+    message_attributes(message)
+  end
+
+  def inferred_message_for(event)
+    return unless MESSAGE_EVENT_METRICS.include?(metric)
+    return if event.conversation.blank? || event.event_end_time.blank?
+
+    inferred_messages_by_event_id[event.id]
+  end
+
+  def first_response_event_with_user?(event)
+    metric == 'avg_first_response_time' && event.user_id.present?
+  end
+
+  def message_inference_range(event)
+    (event.event_end_time - 1.second)..(event.event_end_time + 1.second)
+  end
+
+  def event_metric_value(event)
+    use_business_hours ? event.value_in_business_hours : event.value
+  end
+
+  def event_timestamp(event)
+    event.event_end_time || event.created_at
+  end
+
+  def latest_messages_by_conversation_id
+    @latest_messages_by_conversation_id ||= if conversation_ids.blank?
+                                              {}
+                                            else
+                                              latest_messages.index_by(&:conversation_id)
+                                            end
+  end
+
+  def latest_messages
+    Message
+      .where(account_id: account.id, conversation_id: conversation_ids)
+      .where.not(message_type: :activity)
+      .select('DISTINCT ON (messages.conversation_id) messages.*')
+      .reorder(Arel.sql('messages.conversation_id, messages.created_at DESC, messages.id DESC'))
+      .includes(:sender)
+  end
+
+  def inferred_messages_by_event_id
+    @inferred_messages_by_event_id ||= inference_events.each_with_object({}) do |event, messages_by_event_id|
+      messages_by_event_id[event.id] = inferred_message_candidates.find do |message|
+        message_matches_event?(message, event)
+      end
+    end
+  end
+
+  def inferred_message_candidates
+    @inferred_message_candidates ||= if inference_events.blank?
+                                       []
+                                     else
+                                       inferred_messages.to_a
+                                     end
+  end
+
+  def inferred_messages
+    Message
+      .where(account_id: account.id, conversation_id: inference_events.map(&:conversation_id).uniq)
+      .where(created_at: inference_time_range)
+      .where(message_type: %i[outgoing template])
+      .includes(:sender)
+      .reorder(created_at: :desc, id: :desc)
+  end
+
+  def message_matches_event?(message, event)
+    message.conversation_id == event.conversation_id &&
+      message.created_at.between?(
+        message_inference_range(event).begin,
+        message_inference_range(event).end
+      ) &&
+      message_sender_matches_event?(message, event)
+  end
+
+  def message_sender_matches_event?(message, event)
+    return true unless first_response_event_with_user?(event)
+
+    message.sender_id == event.user_id && message.sender_type == 'User'
+  end
+
+  def inference_time_range
+    event_end_times = inference_events.map(&:event_end_time)
+
+    (event_end_times.min - 1.second)..(event_end_times.max + 1.second)
+  end
+
+  def inference_events
+    @inference_events ||= records.select do |record|
+      record.is_a?(ReportingEvent) && record.conversation_id.present? && record.event_end_time.present?
+    end
+  end
+
+  def conversation_ids
+    @conversation_ids ||= records.filter_map { |record| conversation_id_for(record) }.uniq
+  end
+
+  def conversation_id_for(record)
+    return record.conversation_id if record.is_a?(Message) || record.is_a?(ReportingEvent)
+
+    record.id
+  end
+end

app/controllers/api/v1/accounts/articles_controller.rb

@@ -40,8 +40,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   end
 
   def reorder
-    Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
-    head :ok
+    positions = Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
+    render json: { positions: positions }
   end
 
   private

app/controllers/api/v2/accounts/reports_controller.rb

@@ -51,6 +51,13 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     generate_csv('conversation_traffic_reports', 'api/v2/accounts/reports/conversation_traffic')
   end
 
+  def drilldown
+    return head :unauthorized unless Current.account_user.administrator?
+    return head :unprocessable_entity unless valid_drilldown_params?
+
+    render json: V2::Reports::DrilldownBuilder.new(Current.account, drilldown_params).build
+  end
+
   def conversations
     return head :unprocessable_entity if params[:type].blank?
 
@@ -133,6 +140,22 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
                         })
   end
 
+  def drilldown_params
+    permitted_params = params.permit(
+      :metric, :id, :since, :until, :group_by, :timezone_offset, :bucket_timestamp, :page, :per_page
+    ).to_h.symbolize_keys
+    permitted_params.merge(
+      type: (params[:type].presence || 'account').to_sym,
+      business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+    )
+  end
+
+  def valid_drilldown_params?
+    %i[metric bucket_timestamp since until].all? { |param| params[param].present? } &&
+      Reports::ReportMetricRegistry.supported?(params[:metric]) &&
+      V2::Reports::DrilldownBuilder.supported_dimension_type?(params[:type]) && Reports::DrilldownTimestampValidator.valid?(params)
+  end
+
   def conversation_params
     {
       type: params[:type].to_sym,

app/helpers/super_admin/features.yml

@@ -11,7 +11,7 @@ saml:
   enterprise: true
 custom_branding:
   name: 'Custom Branding'
-  description: 'Apply your own branding to this installation.'
+  description: 'Apply your own branding to this installation, including email template layout customization.'
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-paint-brush-line'
   config_key: 'custom_branding'

app/helpers/super_admin/navigation_helper.rb

@@ -1,6 +1,8 @@
 module SuperAdmin::NavigationHelper
   def settings_open?
-    params[:controller].in? %w[super_admin/settings super_admin/app_configs]
+    return false if params[:controller] == 'super_admin/email_layouts' && params[:account_id].present?
+
+    params[:controller].in? %w[super_admin/settings super_admin/app_configs super_admin/email_layouts]
   end
 
   def settings_pages

app/javascript/dashboard/api/reports.js

@@ -31,6 +31,42 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  getDrilldown({
+    metric,
+    bucketTimestamp,
+    from,
+    to,
+    type = 'account',
+    id,
+    groupBy,
+    businessHours,
+    page,
+    perPage,
+    signal,
+  }) {
+    const requestConfig = {
+      params: {
+        metric,
+        bucket_timestamp: bucketTimestamp,
+        since: from,
+        until: to,
+        type,
+        id,
+        group_by: groupBy,
+        business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
+        page,
+        per_page: perPage,
+      },
+    };
+
+    if (signal) {
+      requestConfig.signal = signal;
+    }
+
+    return axios.get(`${this.url}/drilldown`, requestConfig);
+  }
+
   // eslint-disable-next-line default-param-last
   getSummary(since, until, type = 'account', id, groupBy, businessHours) {
     return axios.get(`${this.url}/summary`, {

app/javascript/dashboard/api/specs/reports.spec.js

@@ -1,6 +1,8 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
 
+const timezoneOffset = () => -new Date().getTimezoneOffset() / 60;
+
 describe('#Reports API', () => {
   it('creates correct instance', () => {
     expect(reportsAPI).toBeInstanceOf(ApiClient);
@@ -11,6 +13,7 @@ describe('#Reports API', () => {
     expect(reportsAPI).toHaveProperty('update');
     expect(reportsAPI).toHaveProperty('delete');
     expect(reportsAPI).toHaveProperty('getReports');
+    expect(reportsAPI).toHaveProperty('getDrilldown');
     expect(reportsAPI).toHaveProperty('getSummary');
     expect(reportsAPI).toHaveProperty('getAgentReports');
     expect(reportsAPI).toHaveProperty('getLabelReports');
@@ -42,11 +45,14 @@ describe('#Reports API', () => {
       });
       expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
         params: {
+          business_hours: undefined,
+          group_by: undefined,
+          id: undefined,
           metric: 'conversations_count',
           since: 1621103400,
           until: 1621621800,
           type: 'account',
-          timezone_offset: -0,
+          timezone_offset: timezoneOffset(),
         },
       });
     });
@@ -59,13 +65,70 @@ describe('#Reports API', () => {
           group_by: undefined,
           id: undefined,
           since: 1621103400,
-          timezone_offset: -0,
+          timezone_offset: timezoneOffset(),
           type: 'account',
           until: 1621621800,
         },
       });
     });
 
+    it('#getDrilldown', () => {
+      reportsAPI.getDrilldown({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        from: 1621103400,
+        to: 1621621800,
+        type: 'inbox',
+        id: 1,
+        groupBy: 'day',
+        businessHours: false,
+        page: 2,
+        perPage: 25,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
+        params: {
+          metric: 'incoming_messages_count',
+          bucket_timestamp: 1621103400,
+          since: 1621103400,
+          until: 1621621800,
+          type: 'inbox',
+          id: 1,
+          group_by: 'day',
+          business_hours: false,
+          timezone_offset: timezoneOffset(),
+          page: 2,
+          per_page: 25,
+        },
+      });
+    });
+
+    it('#getDrilldown with abort signal', () => {
+      const controller = new AbortController();
+
+      reportsAPI.getDrilldown({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        signal: controller.signal,
+      });
+
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
+        params: {
+          metric: 'incoming_messages_count',
+          bucket_timestamp: 1621103400,
+          since: undefined,
+          until: undefined,
+          type: 'account',
+          id: undefined,
+          group_by: undefined,
+          business_hours: undefined,
+          timezone_offset: timezoneOffset(),
+          page: undefined,
+          per_page: undefined,
+        },
+        signal: controller.signal,
+      });
+    });
+
     it('#getAgentReports', () => {
       reportsAPI.getAgentReports({
         from: 1621103400,

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  contact: {
+    type: Object,
+    required: true,
+  },
 });
 
 const { t } = useI18n();
@@ -49,7 +53,9 @@ const unreadMessagesCount = computed(() => {
 
 const hasSlaThreshold = computed(() => {
   return (
-    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
+    !props.contact?.blocked &&
+    slaCardLabelRef.value?.hasSlaThreshold &&
+    props.conversation?.appliedSla?.id
   );
 });
 

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -126,6 +126,7 @@ const onCardClick = e => {
         v-show="!showMessagePreviewWithoutMeta"
         ref="cardMessagePreviewWithMetaRef"
         :conversation="conversation"
+        :contact="contact"
         :account-labels="accountLabels"
       />
     </div>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -51,7 +51,9 @@ const unreadCount = computed(() => props.chat.unread_count);
 const slaCardLabel = useTemplateRef('slaCardLabel');
 
 const hasSlaPolicyId = computed(
-  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+  () =>
+    !props.currentContact?.blocked &&
+    (props.chat?.applied_sla?.id || slaCardLabel.value?.hasSlaThreshold)
 );
 
 const selectedModel = computed({

app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { evaluateSLAStatus } from '@chatwoot/utils';
+import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
 
 const props = defineProps({
   conversation: {
@@ -19,16 +19,8 @@ const slaStatus = ref({
   icon: null,
 });
 
-// TODO: Remove this once we update the helper from utils
-// https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
-const convertObjectCamelCaseToSnakeCase = object => {
-  return Object.keys(object).reduce((acc, key) => {
-    acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
-    return acc;
-  }, {});
-};
-
 const appliedSLA = computed(() => props.conversation?.appliedSla);
+const slaEvents = computed(() => props.conversation?.slaEvents);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 
 const hasSlaThreshold = computed(() => {
@@ -41,8 +33,9 @@ const slaStatusText = computed(() => {
 
 const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
-    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
+    appliedSla: appliedSLA.value || {},
     chat: props.conversation,
+    slaEvents: slaEvents.value || [],
   });
 };
 

app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { evaluateSLAStatus } from '@chatwoot/utils';
+import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Label from 'dashboard/components-next/label/Label.vue';
@@ -27,6 +27,7 @@ defineOptions({
 });
 
 const appliedSLA = computed(() => props.chat?.applied_sla);
+const slaEvents = computed(() => props.chat?.sla_events);
 const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 
@@ -34,6 +35,7 @@ const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
     appliedSla: appliedSLA.value || {},
     chat: props.chat,
+    slaEvents: slaEvents.value || [],
   });
 };
 

app/javascript/dashboard/components-next/DraggableReorderList/DraggableReorderList.vue

@@ -0,0 +1,378 @@
+<script setup>
+import { computed, ref, watch, nextTick, onBeforeUnmount } from 'vue';
+import { useEventListener, onKeyStroke, useRafFn } from '@vueuse/core';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+// Reorderable list with cross-page drag. It must stay mounted during a page
+// fetch — hide the list spinner while `dragging`, or the held item is lost.
+const props = defineProps({
+  items: { type: Array, required: true },
+  itemKey: { type: String, default: 'id' },
+  disabled: { type: Boolean, default: false },
+  currentPage: { type: Number, default: 1 },
+  totalPages: { type: Number, default: 1 },
+});
+const emit = defineEmits(['reorder', 'navigatePage', 'dragging']);
+
+const DRAG_THRESHOLD = 5;
+const EDGE_BAND = 72; // px from a side that arms a page turn
+const AUTO_PAGE_DELAY = 600; // ms hovering an edge before it flips
+const SCROLL_BAND = 60; // px from top/bottom that autoscrolls the list
+const SCROLL_STEP = 10; // px scrolled per frame while parked at an edge
+const PILL = 36; // px, the page-turn arrow button on each edge
+
+const root = ref(null);
+const isDragging = ref(false);
+const dragged = ref(null);
+const pointer = ref({ x: 0, y: 0 });
+const insertBefore = ref(null); // key the gap sits before, null = end of list
+const activeEdge = ref(null);
+const bounds = ref({ left: 0, right: 0, top: 0, bottom: 0 }); // visible list rect
+const grab = ref({ dx: 0, dy: 0 }); // cursor offset inside the grabbed card
+const dragHeight = ref(0);
+
+let press = null; // pending press, before it becomes a drag
+let dwell = null; // timer that flips the page after hovering an edge
+let paging = false; // waiting for a flipped page to load
+let scroller = null; // scrollable ancestor, found when a drag begins
+let scrollDir = 0; // -1 up, +1 down, 0 idle
+let sourcePage = 1; // page the drag started on, to resolve cross-page end-drops
+
+const keyOf = item => String(item?.[props.itemKey]);
+const others = item => props.items.filter(o => keyOf(o) !== keyOf(item));
+const isRTL = () =>
+  document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl';
+const canPage = dir =>
+  dir === 'next' ? props.currentPage < props.totalPages : props.currentPage > 1;
+
+// Key of the item after `key` in `list`, or null when it is the last one.
+const keyAfter = (list, key) => {
+  const next = list[list.findIndex(o => keyOf(o) === key) + 1];
+  return next ? keyOf(next) : null;
+};
+
+const edges = computed(() =>
+  ['prev', 'next'].filter(canPage).map(dir => {
+    const onLeft = isRTL() ? dir === 'next' : dir === 'prev';
+    return {
+      dir,
+      onLeft,
+      icon: onLeft ? 'i-lucide-chevrons-left' : 'i-lucide-chevrons-right',
+    };
+  })
+);
+
+// Cursor overlay: an edge glow band, a page-turn arrow per edge, and a ghost of
+// the dragged row that follows the cursor and shrinks when aimed at an edge.
+const EDGE_BAND_W = 80; // px width of the glow band on each pageable edge
+const bandStyle = onLeft => {
+  const x = onLeft ? bounds.value.left : bounds.value.right - EDGE_BAND_W;
+  return {
+    width: `${EDGE_BAND_W}px`,
+    height: `${bounds.value.bottom - bounds.value.top}px`,
+    transform: `translate(${x}px, ${bounds.value.top}px)`,
+  };
+};
+const pillStyle = onLeft => {
+  const x = onLeft ? bounds.value.left + 12 : bounds.value.right - PILL - 12;
+  return { transform: `translate(${x}px, ${pointer.value.y - PILL / 2}px)` };
+};
+const ghostStyle = computed(() => ({
+  width: `${bounds.value.right - bounds.value.left}px`,
+  transform: `translate(${pointer.value.x - grab.value.dx}px, ${pointer.value.y - grab.value.dy}px)`,
+}));
+const scaleStyle = computed(() => ({
+  transformOrigin: `${grab.value.dx}px ${grab.value.dy}px`,
+}));
+
+// The list as shown mid-drag: the dragged row slotted into the gap at `insertBefore`.
+const displayItems = computed(() => {
+  if (!isDragging.value || !dragged.value) return props.items;
+  const rest = others(dragged.value);
+  const at = rest.findIndex(o => keyOf(o) === insertBefore.value);
+  rest.splice(at === -1 ? rest.length : at, 0, dragged.value);
+  return rest;
+});
+
+// Move the gap when the cursor crosses the midpoint of the card it is over.
+const aim = () => {
+  const card = document
+    .elementFromPoint(pointer.value.x, pointer.value.y)
+    ?.closest('[data-drag-id]');
+  const key = card?.dataset.dragId;
+  if (!key || key === keyOf(dragged.value)) return;
+
+  const { top, height } = card.getBoundingClientRect();
+  const above = pointer.value.y < top + height / 2;
+  insertBefore.value = above ? key : keyAfter(others(dragged.value), key);
+};
+
+const flip = dir => {
+  if (paging || !isDragging.value) return;
+  paging = true;
+  emit('navigatePage', props.currentPage + (dir === 'next' ? 1 : -1));
+};
+
+const aimEdge = x => {
+  const rect = root.value?.getBoundingClientRect();
+  if (!rect) return;
+  // Clip the list rect to the scroll viewport so the glow band and its top/bottom
+  // fade always sit on the visible edges, not the far ends of the full content.
+  const view = scroller?.getBoundingClientRect();
+  const viewTop = Math.max(view?.top ?? 0, 0);
+  const viewBottom = Math.min(
+    view?.bottom ?? window.innerHeight,
+    window.innerHeight
+  );
+  bounds.value = {
+    left: rect.left,
+    right: rect.right,
+    top: Math.max(rect.top, viewTop),
+    bottom: Math.min(rect.bottom, viewBottom),
+  };
+
+  let dir = null;
+  if (x <= rect.left + EDGE_BAND) dir = isRTL() ? 'next' : 'prev';
+  else if (x >= rect.right - EDGE_BAND) dir = isRTL() ? 'prev' : 'next';
+  if (dir && !canPage(dir)) dir = null;
+  if (dir === activeEdge.value) return;
+
+  activeEdge.value = dir;
+  clearTimeout(dwell);
+  if (dir) dwell = setTimeout(() => flip(dir), AUTO_PAGE_DELAY);
+};
+
+// Nearest scrollable ancestor, so a drag can reach rows that are off-screen.
+const scrollParent = () => {
+  let el = root.value?.parentElement;
+  while (el) {
+    const { overflowY } = getComputedStyle(el);
+    if (overflowY === 'auto' || overflowY === 'scroll') return el;
+    el = el.parentElement;
+  }
+  return null;
+};
+
+// While parked at the top/bottom edge, keep scrolling and re-aim as rows slide by.
+const { pause: pauseScroll, resume: resumeScroll } = useRafFn(
+  () => {
+    if (!scroller || !scrollDir) return;
+    scroller.scrollTop += scrollDir * SCROLL_STEP;
+    aim();
+    aimEdge(pointer.value.x);
+  },
+  { immediate: false }
+);
+
+const updateAutoScroll = y => {
+  if (!scroller) return;
+  const rect = scroller.getBoundingClientRect();
+  const atTop = scroller.scrollTop <= 0;
+  const atBottom =
+    scroller.scrollTop >= scroller.scrollHeight - scroller.clientHeight;
+  if (y < rect.top + SCROLL_BAND && !atTop) scrollDir = -1;
+  else if (y > rect.bottom - SCROLL_BAND && !atBottom) scrollDir = 1;
+  else scrollDir = 0;
+  if (scrollDir) resumeScroll();
+  else pauseScroll();
+};
+
+const reset = () => {
+  isDragging.value = false;
+  dragged.value = null;
+  insertBefore.value = null;
+  activeEdge.value = null;
+  clearTimeout(dwell);
+  paging = false;
+  scrollDir = 0;
+  scroller = null;
+  pauseScroll();
+  document.body.classList.remove('select-none');
+  emit('dragging', false);
+};
+
+// Positions sit on a gap-of-10 grid; a midpoint (±5 at the ends) slots between two rows.
+// Cross-page end-drops are the tricky case: moving an item off its source page pulls the
+// target page's boundary row into the vacated slot. So at the leading edge after moving
+// DOWN (or the trailing edge after moving UP) we land between the two boundary rows, or
+// the item sorts onto the adjacent page and vanishes from view.
+const drop = (item, rawBefore) => {
+  const pos = o => o?.position || 0;
+  const mid = (a, b) => Math.floor((pos(a) + pos(b)) / 2);
+  const rest = others(item);
+  // No other rows to position against — e.g. the lone article on a page dropped
+  // without crossing to another page. Leave the order untouched.
+  if (!rest.length) return;
+  // A page flip can leave the aimed key pointing at a row that is no longer on
+  // this page. Like displayItems, resolve an unknown key to null (end of list),
+  // so what the user sees and what we save agree.
+  const before = rest.some(o => keyOf(o) === rawBefore) ? rawBefore : null;
+  const movedDown = props.currentPage > sourcePage;
+  const movedUp = props.currentPage < sourcePage;
+
+  let position;
+  if (before === null) {
+    position =
+      movedUp && rest.length >= 2
+        ? mid(rest.at(-2), rest.at(-1))
+        : pos(rest.at(-1)) + 5;
+  } else {
+    const i = rest.findIndex(o => keyOf(o) === before);
+    if (i > 0) {
+      position = mid(rest[i - 1], rest[i]);
+    } else if (movedDown) {
+      // Top-of-page after moving down: the old first row slid up into the source
+      // page's gap, so land just after it to stay this page's first.
+      position = rest.length >= 2 ? mid(rest[0], rest[1]) : pos(rest[0]) + 5;
+    } else {
+      position = pos(rest[0]) - 5;
+    }
+  }
+  emit('reorder', { [item[props.itemKey]]: position });
+};
+
+const startDrag = () => {
+  isDragging.value = true;
+  dragged.value = press.item;
+  grab.value = { dx: press.dx, dy: press.dy };
+  dragHeight.value = press.h;
+  insertBefore.value = keyAfter(props.items, keyOf(press.item));
+  sourcePage = props.currentPage;
+  scroller = scrollParent();
+  document.body.classList.add('select-none');
+  emit('dragging', true);
+};
+
+const onPointerDown = (item, e) => {
+  if (e.button !== 0 || props.disabled) return;
+  if (e.target.closest('button, a, input, [role="button"]')) return;
+  const rect = e.currentTarget.getBoundingClientRect();
+  press = {
+    item,
+    x: e.clientX,
+    y: e.clientY,
+    dx: e.clientX - rect.left,
+    dy: e.clientY - rect.top,
+    h: rect.height,
+  };
+};
+
+useEventListener(window, 'pointermove', e => {
+  if (!press) return;
+  if (!isDragging.value) {
+    const moved = Math.hypot(e.clientX - press.x, e.clientY - press.y);
+    if (moved < DRAG_THRESHOLD) return;
+    startDrag();
+  }
+  e.preventDefault();
+  pointer.value = { x: e.clientX, y: e.clientY };
+  aim();
+  aimEdge(e.clientX);
+  updateAutoScroll(e.clientY);
+});
+
+useEventListener(window, 'pointerup', () => {
+  if (!press) return;
+  press = null;
+  if (!isDragging.value) return; // a press without movement is a click
+  const item = dragged.value;
+  const before = insertBefore.value;
+  const flipping = paging;
+  reset();
+  if (!flipping) drop(item, before);
+});
+
+// When the flipped page loads, re-aim under the held cursor so a parked edge keeps flipping.
+watch(
+  () => props.items,
+  () => {
+    if (!isDragging.value || !paging) return;
+    paging = false;
+    nextTick(() => {
+      if (!isDragging.value) return;
+      aim();
+      activeEdge.value = null;
+      aimEdge(pointer.value.x);
+    });
+  }
+);
+
+onKeyStroke('Escape', () => {
+  if (!isDragging.value) return;
+  press = null;
+  reset();
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(dwell);
+  document.body.classList.remove('select-none');
+});
+</script>
+
+<template>
+  <div ref="root" class="relative w-full h-full">
+    <ul class="w-full h-full space-y-4">
+      <li
+        v-for="(item, index) in displayItems"
+        :key="keyOf(item)"
+        :data-drag-id="keyOf(item)"
+        class="relative list-none"
+        :class="{ 'cursor-grab': !disabled && !isDragging }"
+        @pointerdown="onPointerDown(item, $event)"
+        @dragstart.prevent
+      >
+        <div
+          v-if="isDragging && keyOf(item) === keyOf(dragged)"
+          :style="{ height: `${dragHeight}px` }"
+          class="border-2 border-dashed rounded-2xl border-n-brand/50 bg-n-brand/5"
+        />
+        <slot v-else name="item" :item="item" :index="index" />
+      </li>
+    </ul>
+
+    <Teleport v-if="isDragging" to="body">
+      <div
+        v-for="edge in edges"
+        :key="`band-${edge.dir}`"
+        :style="bandStyle(edge.onLeft)"
+        class="fixed top-0 left-0 z-40 pointer-events-none from-n-brand/15 to-transparent transition-opacity duration-200 [mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)]"
+        :class="[
+          edge.onLeft ? 'bg-gradient-to-r' : 'bg-gradient-to-l',
+          activeEdge === edge.dir ? 'opacity-100' : 'opacity-0',
+        ]"
+      />
+
+      <div
+        v-for="edge in edges"
+        :key="edge.dir"
+        :style="pillStyle(edge.onLeft)"
+        class="fixed top-0 left-0 z-50 flex items-center justify-center transition-all duration-150 border rounded-full pointer-events-none size-9 backdrop-blur-sm"
+        :class="
+          activeEdge === edge.dir
+            ? 'scale-110 border-n-brand bg-n-brand/20 text-n-brand shadow-md'
+            : 'opacity-70 border-n-weak/60 bg-n-solid-1/70 text-n-slate-10'
+        "
+      >
+        <Icon
+          :icon="edge.icon"
+          class="size-4"
+          :class="activeEdge === edge.dir && 'animate-pulse'"
+        />
+      </div>
+
+      <div
+        v-if="dragged"
+        :style="ghostStyle"
+        class="fixed top-0 left-0 z-50 pointer-events-none select-none"
+      >
+        <div
+          :style="scaleStyle"
+          class="transition-transform duration-150 shadow-2xl rounded-2xl"
+          :class="{ 'scale-50': activeEdge }"
+        >
+          <slot name="ghost" :item="dragged" />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

app/javascript/dashboard/components-next/DraggableReorderList/specs/DraggableReorderList.spec.js

@@ -0,0 +1,222 @@
+import { mount } from '@vue/test-utils';
+import { h, nextTick } from 'vue';
+import DraggableReorderList from '../DraggableReorderList.vue';
+
+// The component is pointer-driven, so we drive it through real pointer events on
+// window while mocking the layout APIs jsdom does not implement: elementFromPoint
+// (which card is under the cursor) and getBoundingClientRect (its geometry).
+const elementAtPoint = { current: null };
+
+const move = (clientX, clientY) =>
+  window.dispatchEvent(new MouseEvent('pointermove', { clientX, clientY }));
+const release = () => window.dispatchEvent(new MouseEvent('pointerup'));
+
+// Stack the rows 50px apart, each 40px tall, inside a 500px-wide list.
+const stubGeometry = wrapper => {
+  wrapper.element.getBoundingClientRect = () => ({
+    left: 0,
+    right: 500,
+    top: 0,
+    bottom: 600,
+  });
+  wrapper.findAll('[data-drag-id]').forEach((li, index) => {
+    const top = index * 50;
+    li.element.getBoundingClientRect = () => ({
+      top,
+      height: 40,
+      bottom: top + 40,
+    });
+  });
+};
+
+const mountList = (props = {}) =>
+  mount(DraggableReorderList, {
+    props: { items: [], ...props },
+    slots: {
+      item: scope => h('div', { class: 'card' }, scope.item.title),
+      ghost: scope => h('div', { class: 'ghost' }, scope.item.title),
+    },
+    global: { stubs: { Icon: true, teleport: true } },
+  });
+
+describe('DraggableReorderList', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    elementAtPoint.current = null;
+    document.elementFromPoint = vi.fn(() => elementAtPoint.current);
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.useRealTimers();
+  });
+
+  const startDragging = async id => {
+    stubGeometry(wrapper);
+    wrapper.find(`[data-drag-id="${id}"]`).element.dispatchEvent(
+      new MouseEvent('pointerdown', {
+        button: 0,
+        clientX: 250,
+        clientY: 20,
+        bubbles: true,
+      })
+    );
+    await nextTick();
+  };
+
+  it('renders each item through the item slot', () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha' },
+        { id: 2, title: 'Beta' },
+      ],
+    });
+
+    const cards = wrapper.findAll('.card');
+    expect(cards).toHaveLength(2);
+    expect(cards[0].text()).toBe('Alpha');
+    expect(wrapper.find('[data-drag-id="1"]').exists()).toBe(true);
+    expect(wrapper.find('[data-drag-id="2"]').exists()).toBe(true);
+  });
+
+  it('shows a grab affordance only when enabled', () => {
+    wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }] });
+    expect(wrapper.find('[data-drag-id="1"]').classes()).toContain(
+      'cursor-grab'
+    );
+
+    wrapper.unmount();
+    wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }], disabled: true });
+    expect(wrapper.find('[data-drag-id="1"]').classes()).not.toContain(
+      'cursor-grab'
+    );
+  });
+
+  it('does not start a drag when disabled', async () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha' },
+        { id: 2, title: 'Beta' },
+      ],
+      disabled: true,
+    });
+    await startDragging(1);
+    move(250, 200);
+    await nextTick();
+
+    expect(wrapper.emitted('dragging')).toBeUndefined();
+  });
+
+  it('emits dragging true then false across a drag', async () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha' },
+        { id: 2, title: 'Beta' },
+      ],
+    });
+    await startDragging(1);
+    elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
+    move(250, 60);
+    await nextTick();
+
+    expect(wrapper.emitted('dragging')[0]).toEqual([true]);
+
+    release();
+    await nextTick();
+    expect(wrapper.emitted('dragging')[1]).toEqual([false]);
+  });
+
+  it('emits the midpoint position when dropped between two rows', async () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha', position: 10 },
+        { id: 2, title: 'Beta', position: 20 },
+        { id: 3, title: 'Gamma', position: 30 },
+      ],
+    });
+    await startDragging(1);
+
+    // Hover the lower half of Beta (top 50, height 40 → midpoint 70) so the gap
+    // sits before Gamma; dropping there lands halfway between Beta and Gamma.
+    elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
+    move(250, 85);
+    await nextTick();
+    release();
+    await nextTick();
+
+    expect(wrapper.emitted('reorder')[0][0]).toEqual({ 1: 25 });
+  });
+
+  it('does not reorder when the only row on a page is dropped in place', async () => {
+    // P1: dragging the lone article on a later page and releasing without
+    // crossing to another page must be a no-op, not move it to the top.
+    wrapper = mountList({
+      items: [{ id: 5, title: 'Solo', position: 260 }],
+      currentPage: 2,
+      totalPages: 2,
+    });
+    await startDragging(5);
+    move(250, 300);
+    await nextTick();
+    release();
+    await nextTick();
+
+    expect(wrapper.emitted('dragging')).toEqual([[true], [false]]);
+    expect(wrapper.emitted('reorder')).toBeUndefined();
+  });
+
+  it('turns the page after dwelling on a pageable edge', async () => {
+    vi.useFakeTimers();
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha', position: 10 },
+        { id: 2, title: 'Beta', position: 20 },
+      ],
+      currentPage: 1,
+      totalPages: 2,
+    });
+    await startDragging(1);
+
+    // Drag to the right edge over blank space (no card) and hold.
+    elementAtPoint.current = null;
+    move(490, 20);
+    await nextTick();
+    vi.advanceTimersByTime(600);
+
+    expect(wrapper.emitted('navigatePage')[0]).toEqual([2]);
+  });
+
+  it('can still turn pages after releasing during a pending flip', async () => {
+    // Releasing while a flip fetch is in flight must clear paging state, or every
+    // later drag would be stuck unable to navigate.
+    vi.useFakeTimers();
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha', position: 10 },
+        { id: 2, title: 'Beta', position: 20 },
+      ],
+      currentPage: 1,
+      totalPages: 2,
+    });
+
+    // First drag: park at the edge to start a flip, then release before the new
+    // page arrives (items never change here).
+    await startDragging(1);
+    elementAtPoint.current = null;
+    move(490, 20);
+    await nextTick();
+    vi.advanceTimersByTime(600);
+    release();
+    await nextTick();
+
+    // Second drag must be able to flip again.
+    await startDragging(1);
+    elementAtPoint.current = null;
+    move(490, 20);
+    await nextTick();
+    vi.advanceTimersByTime(600);
+
+    expect(wrapper.emitted('navigatePage')).toEqual([[2], [2]]);
+  });
+});

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
-import Draggable from 'vuedraggable';
+import { computed, ref } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -10,6 +9,7 @@ import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
 import wootConstants from 'dashboard/constants/globals';
 
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
 
 const props = defineProps({
   articles: {
@@ -28,9 +28,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalPages: {
+    type: Number,
+    default: 1,
+  },
 });
 
-const emit = defineEmits(['translateArticle', 'toggleSelect']);
+const emit = defineEmits([
+  'translateArticle',
+  'toggleSelect',
+  'navigatePage',
+  'dragging',
+]);
 
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
@@ -39,14 +52,14 @@ const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 
-const localArticles = ref(props.articles);
 const hoveredArticleId = ref(null);
 
 const dragEnabled = computed(() => {
+  const canReorder = props.articles?.length > 1 || props.totalPages > 1;
   return (
     props.isCategoryArticles &&
     !props.isSearching &&
-    localArticles.value?.length > 1 &&
+    canReorder &&
     props.selectedArticleIds.size === 0
   );
 });
@@ -63,6 +76,10 @@ const handleCardHover = (isHovered, id) => {
 
 const getCategoryById = useMapGetter('categories/categoryById');
 
+const getCategory = categoryId => {
+  return getCategoryById.value(categoryId) || { name: '', icon: '' };
+};
+
 const openArticle = id => {
   const { tab, categorySlug, locale } = route.params;
   if (props.isCategoryArticles) {
@@ -83,38 +100,25 @@ const openArticle = id => {
   }
 };
 
-const onReorder = async reorderedGroup => {
+const onReorder = async positionsHash => {
+  const [movedId] = Object.keys(positionsHash);
+  // A same-page reorder updates optimistically in the store, so it needs no
+  // refetch. Only a cross-page drop must refresh, to pull the moved article
+  // onto this page in its new spot.
+  const isCrossPage = !props.articles.some(
+    article => String(article.id) === movedId
+  );
   try {
     await store.dispatch('articles/reorder', {
-      reorderedGroup,
+      reorderedGroup: positionsHash,
       portalSlug: route.params.portalSlug,
     });
+    if (isCrossPage) emit('navigatePage', props.currentPage);
   } catch {
     useAlert(t('HELP_CENTER.REORDER_ARTICLE.API.ERROR_MESSAGE'));
   }
 };
 
-const onDragEnd = () => {
-  // Collect and sort existing positions, falling back to index+1 for null/0 values
-  const sortedArticlePositions = localArticles.value
-    .map((article, index) => article.position || index + 1)
-    .sort((a, b) => a - b);
-
-  const orderedArticles = localArticles.value.map(article => article.id);
-
-  // Create a map of article IDs to their new positions
-  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
-    obj[key] = sortedArticlePositions[index];
-    return obj;
-  }, {});
-
-  onReorder(reorderedGroup);
-};
-
-const getCategory = categoryId => {
-  return getCategoryById.value(categoryId) || { name: '', icon: '' };
-};
-
 const getStatusMessage = (status, isSuccess) => {
   const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
   const statusMap = {
@@ -184,54 +188,46 @@ const updateArticle = ({ action, value, id }) => {
   const status = action !== 'delete' ? getArticleStatus(value) : null;
   handleArticleAction(action, { status, id });
 };
-
-// Watch for changes in the articles prop and update the localArticles ref
-watch(
-  () => props.articles,
-  newArticles => {
-    localArticles.value = newArticles;
-  },
-  { deep: true }
-);
 </script>
 
 <template>
-  <Draggable
-    v-model="localArticles"
+  <DraggableReorderList
+    :items="articles"
     :disabled="!dragEnabled"
-    item-key="id"
-    tag="ul"
-    ghost-class="article-ghost-class"
-    class="w-full h-full space-y-4"
-    @end="onDragEnd"
+    :current-page="currentPage"
+    :total-pages="totalPages"
+    @reorder="onReorder"
+    @navigate-page="page => emit('navigatePage', page)"
+    @dragging="value => emit('dragging', value)"
   >
-    <template #item="{ element }">
-      <li class="list-none rounded-2xl">
-        <ArticleCard
-          :id="element.id"
-          :key="element.id"
-          :title="element.title"
-          :status="element.status"
-          :author="element.author"
-          :category="getCategory(element.category.id)"
-          :views="element.views || 0"
-          :updated-at="element.updatedAt"
-          :is-selected="selectedArticleIds.has(element.id)"
-          selectable
-          :show-selection-control="shouldShowSelectionControl(element.id)"
-          :class="{ 'cursor-grab': dragEnabled }"
-          @open-article="openArticle"
-          @article-action="updateArticle"
-          @toggle-select="emit('toggleSelect', $event)"
-          @hover="isHovered => handleCardHover(isHovered, element.id)"
-        />
-      </li>
+    <template #item="{ item }">
+      <ArticleCard
+        :id="item.id"
+        :title="item.title"
+        :status="item.status"
+        :author="item.author"
+        :category="getCategory(item.category.id)"
+        :views="item.views || 0"
+        :updated-at="item.updatedAt"
+        :is-selected="selectedArticleIds.has(item.id)"
+        selectable
+        :show-selection-control="shouldShowSelectionControl(item.id)"
+        @open-article="openArticle"
+        @article-action="updateArticle"
+        @toggle-select="emit('toggleSelect', $event)"
+        @hover="isHovered => handleCardHover(isHovered, item.id)"
+      />
     </template>
-  </Draggable>
+    <template #ghost="{ item }">
+      <ArticleCard
+        :id="item.id"
+        :title="item.title"
+        :status="item.status"
+        :author="item.author"
+        :category="getCategory(item.category.id)"
+        :views="item.views || 0"
+        :updated-at="item.updatedAt"
+      />
+    </template>
+  </DraggableReorderList>
 </template>
-
-<style lang="scss" scoped>
-.article-ghost-class {
-  @apply opacity-50 bg-n-solid-1;
-}
-</style>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -70,6 +70,7 @@ const isFeatureEnabledonAccount = useMapGetter(
 );
 
 const selectedArticleIds = ref(new Set());
+const isArticleDragging = ref(false);
 const deleteConfirmDialogRef = ref(null);
 const isCategoryMenuOpen = ref(false);
 const searchQuery = ref(route.query.search || '');
@@ -148,6 +149,8 @@ const articlesCount = computed(() => {
   return Number(countMap[tab] || countMap['']);
 });
 
+const totalPages = computed(() => Math.ceil(articlesCount.value / 25) || 1);
+
 const showArticleHeaderControls = computed(
   () => !props.isCategoryArticles && !isSwitchingPortal.value
 );
@@ -343,7 +346,7 @@ watch(
     </template>
     <template #content>
       <div
-        v-if="isLoading"
+        v-if="isLoading && !isArticleDragging"
         class="flex items-center justify-center py-10 text-n-slate-11"
       >
         <Spinner />
@@ -453,9 +456,13 @@ watch(
           :is-category-articles="isCategoryArticles"
           :is-searching="isSearching"
           :selected-article-ids="selectedArticleIds"
+          :current-page="Number(meta.currentPage)"
+          :total-pages="totalPages"
           class="relative z-0"
           @translate-article="handleTranslateArticle"
           @toggle-select="handleToggleSelect"
+          @navigate-page="handlePageChange"
+          @dragging="isArticleDragging = $event"
         />
       </template>
       <ArticleEmptyState

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantSystemSettingsForm.vue

@@ -29,7 +29,6 @@ const initialState = {
   handoffMessage: '',
   resolutionMessage: '',
   instructions: '',
-  temperature: 1,
 };
 
 const state = reactive({ ...initialState });
@@ -57,7 +56,6 @@ const updateStateFromAssistant = assistant => {
   state.handoffMessage = config.handoff_message;
   state.resolutionMessage = config.resolution_message;
   state.instructions = config.instructions;
-  state.temperature = config.temperature || 1;
 };
 
 const handleSystemMessagesUpdate = async () => {
@@ -80,7 +78,6 @@ const handleSystemMessagesUpdate = async () => {
       ...props.assistant.config,
       handoff_message: state.handoffMessage,
       resolution_message: state.resolutionMessage,
-      temperature: state.temperature || 1,
     },
   };
 
@@ -131,26 +128,6 @@ watch(
       class="z-0"
     />
 
-    <div class="flex flex-col gap-2">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
-      </label>
-      <div class="flex items-center gap-4">
-        <input
-          v-model="state.temperature"
-          type="range"
-          min="0"
-          max="1"
-          step="0.1"
-          class="w-full"
-        />
-        <span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
-      </div>
-      <p class="text-sm text-n-slate-11 italic">
-        {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
-      </p>
-    </div>
-
     <div>
       <Button
         :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"

app/javascript/dashboard/components/Modal.vue

@@ -123,6 +123,10 @@ onMounted(() => {
       a {
         @apply p-4;
       }
+
+      .ProseMirror a {
+        @apply p-0;
+      }
     }
   }
 }

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -57,7 +57,9 @@ const showMetaSection = computed(() => {
   );
 });
 
-const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+const hasSlaPolicyId = computed(
+  () => props.chat?.applied_sla?.id && !props.currentContact?.blocked
+);
 
 const showLabelsSection = computed(() => {
   return props.chat.labels?.length > 0 || hasSlaPolicyId.value;

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -93,7 +93,9 @@ const hasMultipleInboxes = computed(
   () => store.getters['inboxes/getInboxes'].length > 1
 );
 
-const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+const hasSlaPolicyId = computed(
+  () => props.chat?.applied_sla?.id && !currentContact.value?.blocked
+);
 
 const copyConversationId = async () => {
   try {

app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { evaluateSLAStatus } from '@chatwoot/utils';
+import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
 
 const props = defineProps({
@@ -61,6 +61,7 @@ const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
     appliedSla: appliedSLA.value,
     chat: props.chat,
+    slaEvents: slaEvents.value || [],
   });
 };
 

app/javascript/dashboard/components/widgets/conversation/specs/ConversationCard.spec.js

@@ -0,0 +1,60 @@
+import { shallowMount } from '@vue/test-utils';
+import ConversationCard from '../ConversationCard.vue';
+
+const defaultChat = {
+  id: 1,
+  labels: [],
+  messages: [],
+  priority: null,
+  unread_count: 0,
+  timestamp: 1700000000,
+  created_at: 1700000000,
+};
+
+const mountComponent = (chat, currentContact = {}) =>
+  shallowMount(ConversationCard, {
+    props: {
+      chat: { ...defaultChat, ...chat },
+      currentContact: {
+        name: 'Jane Doe',
+        thumbnail: '',
+        availability_status: 'offline',
+        ...currentContact,
+      },
+      inbox: { id: 1 },
+    },
+    global: {
+      stubs: {
+        'fluent-icon': true,
+      },
+    },
+  });
+
+describe('ConversationCard', () => {
+  it('does not reserve the labels row when only a persisted SLA policy id is present', () => {
+    const wrapper = mountComponent({ sla_policy_id: 1, applied_sla: null });
+
+    expect(wrapper.findComponent({ name: 'CardLabels' }).exists()).toBe(false);
+  });
+
+  it('shows the labels row when an active applied SLA is present', () => {
+    const wrapper = mountComponent({
+      sla_policy_id: 1,
+      applied_sla: { id: 1 },
+    });
+
+    expect(wrapper.findComponent({ name: 'CardLabels' }).exists()).toBe(true);
+  });
+
+  it('does not reserve the labels row when the contact is blocked', () => {
+    const wrapper = mountComponent(
+      {
+        sla_policy_id: 1,
+        applied_sla: { id: 1 },
+      },
+      { blocked: true }
+    );
+
+    expect(wrapper.findComponent({ name: 'CardLabels' }).exists()).toBe(false);
+  });
+});

app/javascript/dashboard/composables/useCallSession.js

@@ -161,6 +161,7 @@ const buildCallActions = ({ callsStore, whatsappSession, t }) => {
       return { conferenceSid: joinResponse?.conference_sid };
     } catch (error) {
       useAlert(error?.response?.data?.error || t('CONTACT_PANEL.CALL_FAILED'));
+      // 409 = the call already ended before accept landed (e.g. caller hung up mid-ring).
       if (error?.response?.status === 409) {
         TwilioVoiceClient.endClientCall();
         markDismissed(callSid);

app/javascript/dashboard/constants/editor.js

@@ -188,6 +188,16 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'insertTable',
 ];
 
+// [text](url) -> "text: url" (drop label if it equals the URL). Keep serializer
+// escapes; the re-parse renders them literally, unescaping would crash it.
+const flattenLink = (_match, text, url) => {
+  const cleanUrl = url
+    .trim()
+    .replace(/\s+["'(].*$/, '')
+    .replace(/^<|>$/g, '');
+  return text === cleanUrl ? cleanUrl : `${text}: ${cleanUrl}`;
+};
+
 /**
  * Markdown formatting patterns for stripping unsupported formatting.
  *
@@ -264,7 +274,12 @@ export const MARKDOWN_PATTERNS = [
   {
     type: 'link', // PM: link
     patterns: [
-      { pattern: /\[([^\]]+)\]\([^)]+\)/g, replacement: '$1' }, // [text](url) -> text
+      // Escape-aware label + URL captures so a \] or \) can't cut the match
+      // short and leave link markup that crashes the re-parse.
+      {
+        pattern: /\[((?:\\.|[^\]\\])*)\]\(((?:\\.|[^)\\])*)\)/g,
+        replacement: flattenLink,
+      },
       { pattern: /<([a-zA-Z][a-zA-Z0-9+.-]*:[^\s>]+)>/g, replacement: '$1' }, // <https://...>, <mailto:...>, <tel:...>, <ftp://...>, etc
       { pattern: /<([^\s@]+@[^\s@>]+)>/g, replacement: '$1' }, // <user@example.com> -> user@example.com
     ],

app/javascript/dashboard/helper/slaHelper.js

@@ -0,0 +1,150 @@
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+
+/**
+ * Formats seconds into a human-readable time string
+ * @param {number} seconds - The time in seconds (can be negative for overdue)
+ * @returns {string} Formatted time string like "2h 30m" or "1d 4h"
+ */
+const formatSLATime = seconds => {
+  const absSeconds = Math.abs(seconds);
+
+  const units = {
+    y: 31536000,
+    mo: 2592000,
+    d: 86400,
+    h: 3600,
+    m: 60,
+  };
+
+  if (absSeconds < 60) {
+    return '1m';
+  }
+
+  const parts = [];
+  let remaining = absSeconds;
+
+  Object.entries(units).forEach(([unit, value]) => {
+    if (parts.length >= 2) return;
+    const count = Math.floor(remaining / value);
+    if (count > 0) {
+      parts.push(`${count}${unit}`);
+      remaining -= count * value;
+    }
+  });
+
+  return parts.join(' ');
+};
+
+const toUnixTimestamp = value => {
+  if (!value || typeof value === 'number') return value;
+
+  const numericValue = Number(value);
+  if (!Number.isNaN(numericValue)) return numericValue;
+
+  const parsedTimestamp = Date.parse(value);
+  return Number.isNaN(parsedTimestamp)
+    ? value
+    : Math.floor(parsedTimestamp / 1000);
+};
+
+/**
+ * Evaluates SLA status using backend-computed due times
+ * @param {Object} params - Parameters object
+ * @param {Object} params.appliedSla - The applied SLA with due_at timestamps
+ * @param {Object} params.chat - The conversation object
+ * @param {Array} params.slaEvents - Recorded SLA miss events for this conversation
+ * @returns {Object} SLA status with type, threshold, icon, and isSlaMissed
+ */
+export const evaluateSLAStatus = ({ appliedSla, chat, slaEvents = [] }) => {
+  const emptyStatus = { type: '', threshold: '', icon: '', isSlaMissed: false };
+
+  if (!appliedSla || !chat) {
+    return emptyStatus;
+  }
+
+  const sla = useCamelCase(appliedSla);
+  const conversation = useCamelCase(chat);
+  const events = useCamelCase(slaEvents || []);
+  const currentTime = Math.floor(Date.now() / 1000);
+  const slaStatuses = [];
+
+  const dueAtByType = {
+    FRT: sla.slaFrtDueAt,
+    RT: sla.slaRtDueAt,
+  };
+  const slaTypes = ['FRT', 'NRT', 'RT'];
+
+  events.forEach(event => {
+    const type = event.eventType?.toUpperCase();
+    if (!slaTypes.includes(type)) return;
+
+    const missedAt =
+      type === 'NRT' ? event.createdAt : dueAtByType[type] || event.createdAt;
+    if (!missedAt) return;
+
+    slaStatuses.push({
+      type,
+      threshold: missedAt - currentTime,
+      icon: 'flame',
+      isSlaMissed: true,
+    });
+  });
+
+  const firstReplyCreatedAt = toUnixTimestamp(conversation.firstReplyCreatedAt);
+  const shouldCheckFirstResponse =
+    !firstReplyCreatedAt || firstReplyCreatedAt > sla.slaFrtDueAt;
+
+  // Check FRT - until first reply is made on time
+  if (sla.slaFrtDueAt && shouldCheckFirstResponse) {
+    const threshold = sla.slaFrtDueAt - currentTime;
+    slaStatuses.push({
+      type: 'FRT',
+      threshold,
+      icon: threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: threshold <= 0,
+    });
+  }
+
+  // Check NRT - only if first reply made and waiting for response
+  if (sla.slaNrtDueAt && firstReplyCreatedAt && conversation.waitingSince) {
+    const threshold = sla.slaNrtDueAt - currentTime;
+    slaStatuses.push({
+      type: 'NRT',
+      threshold,
+      icon: threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: threshold <= 0,
+    });
+  }
+
+  // Check RT - only if conversation is unresolved
+  if (sla.slaRtDueAt && conversation.status !== 'resolved') {
+    const threshold = sla.slaRtDueAt - currentTime;
+    slaStatuses.push({
+      type: 'RT',
+      threshold,
+      icon: threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: threshold <= 0,
+    });
+  }
+
+  if (slaStatuses.length === 0) {
+    return emptyStatus;
+  }
+
+  // Show existing breaches before upcoming deadlines, then pick the closest timer.
+  slaStatuses.sort((a, b) => {
+    if (a.isSlaMissed !== b.isSlaMissed) {
+      return a.isSlaMissed ? -1 : 1;
+    }
+
+    return Math.abs(a.threshold) - Math.abs(b.threshold);
+  });
+  const mostUrgent = slaStatuses[0];
+
+  return {
+    type: mostUrgent.type,
+    threshold: formatSLATime(mostUrgent.threshold),
+    icon: mostUrgent.icon,
+    isSlaMissed: mostUrgent.isSlaMissed,
+  };
+};

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -1,4 +1,9 @@
-import { EditorState, EditorView } from '@chatwoot/prosemirror-schema';
+import {
+  EditorState,
+  EditorView,
+  buildMessageSchema,
+  MessageMarkdownTransformer,
+} from '@chatwoot/prosemirror-schema';
 import { FORMATTING } from 'dashboard/constants/editor';
 import { Schema } from 'prosemirror-model';
 import {
@@ -978,13 +983,77 @@ describe('stripUnsupportedFormatting', () => {
       );
     });
 
-    it('strips links but keeps text', () => {
+    it('keeps link text and URL when schema does not support links', () => {
       expect(
         stripUnsupportedFormatting(
           'Check [this link](https://example.com)',
           emptySchema
         )
-      ).toBe('Check this link');
+      ).toBe('Check this link: https://example.com');
+    });
+
+    it('drops the hidden link title when preserving the URL', () => {
+      expect(
+        stripUnsupportedFormatting(
+          'Check [docs](https://example.com "Docs")',
+          emptySchema
+        )
+      ).toBe('Check docs: https://example.com');
+
+      expect(
+        stripUnsupportedFormatting(
+          'Check [docs](<https://example.com> "Docs")',
+          emptySchema
+        )
+      ).toBe('Check docs: https://example.com');
+    });
+
+    // Output is re-parsed before sending, so assert the final text
+    // (strip + re-parse); the re-parse turns serializer escapes into literals.
+    describe('links round-trip through re-parse without crashing', () => {
+      const smsSchema = buildMessageSchema([], []); // no marks, no nodes
+      const sendAs = md =>
+        new MessageMarkdownTransformer(smsSchema).parse(
+          stripUnsupportedFormatting(md, smsSchema)
+        ).textContent;
+
+      it('keeps escaped parens/underscores anywhere in the URL', () => {
+        expect(
+          sendAs('See [wiki](https://en.wikipedia.org/wiki/Foo\\_\\(bar\\))')
+        ).toBe('See wiki: https://en.wikipedia.org/wiki/Foo_(bar)');
+        expect(sendAs('See [wiki](https://host/a\\_\\(b\\)c)')).toBe(
+          'See wiki: https://host/a_(b)c'
+        );
+      });
+
+      it('drops the label when it equals the URL even when escaped', () => {
+        expect(
+          sendAs(
+            '[www.example.com/Foo\\_\\(bar\\)](www.example.com/Foo\\_\\(bar\\))'
+          )
+        ).toBe('www.example.com/Foo_(bar)');
+      });
+
+      it('does not reintroduce emphasis from an escaped label', () => {
+        expect(sendAs('[Use \\_id\\_](https://example.com)')).toBe(
+          'Use _id_: https://example.com'
+        );
+      });
+
+      it('flattens a label containing an escaped closing bracket', () => {
+        expect(sendAs('[FAQ \\[v2\\]](https://example.com)')).toBe(
+          'FAQ [v2]: https://example.com'
+        );
+      });
+    });
+
+    it('leaves bare URLs untouched so channels can auto-link them', () => {
+      expect(
+        stripUnsupportedFormatting('Visit www.example.com now', emptySchema)
+      ).toBe('Visit www.example.com now');
+      expect(
+        stripUnsupportedFormatting('Visit <https://example.com>', emptySchema)
+      ).toBe('Visit https://example.com');
     });
 
     it('converts autolinks to plain URLs when schema does not support links', () => {
@@ -1049,7 +1118,7 @@ describe('stripUnsupportedFormatting', () => {
     it('handles complex content with multiple formatting types', () => {
       const content =
         '**Bold** and *italic* with `code` and [link](url)\n- list item';
-      const expected = 'Bold and italic with code and link\nlist item';
+      const expected = 'Bold and italic with code and link: url\nlist item';
       expect(stripUnsupportedFormatting(content, emptySchema)).toBe(expected);
     });
   });

app/javascript/dashboard/helper/specs/slaHelper.spec.js

@@ -0,0 +1,450 @@
+import { evaluateSLAStatus } from '../slaHelper';
+
+describe('#SLA Helpers', () => {
+  const currentTimestamp = 1700000000; // Fixed timestamp for testing
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(currentTimestamp * 1000);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('evaluateSLAStatus', () => {
+    describe('when inputs are invalid', () => {
+      it('returns empty status when appliedSla is null', () => {
+        const result = evaluateSLAStatus({ appliedSla: null, chat: {} });
+        expect(result).toEqual({
+          type: '',
+          threshold: '',
+          icon: '',
+          isSlaMissed: false,
+        });
+      });
+
+      it('returns empty status when chat is null', () => {
+        const result = evaluateSLAStatus({ appliedSla: {}, chat: null });
+        expect(result).toEqual({
+          type: '',
+          threshold: '',
+          icon: '',
+          isSlaMissed: false,
+        });
+      });
+    });
+
+    describe('FRT (First Response Time)', () => {
+      it('returns FRT status when first reply not made and within threshold', () => {
+        const appliedSla = { sla_frt_due_at: currentTimestamp + 3600 }; // 1 hour from now
+        const chat = { first_reply_created_at: null, status: 'open' };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('FRT');
+        expect(result.threshold).toBe('1h');
+        expect(result.icon).toBe('alarm');
+        expect(result.isSlaMissed).toBe(false);
+      });
+
+      it('returns missed FRT status when threshold is exceeded', () => {
+        const appliedSla = { sla_frt_due_at: currentTimestamp - 1800 }; // 30 min ago
+        const chat = { first_reply_created_at: null, status: 'open' };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('FRT');
+        expect(result.threshold).toBe('30m');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('does not return FRT when first reply was made before due time', () => {
+        const appliedSla = { sla_frt_due_at: currentTimestamp + 3600 };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 1000,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).not.toBe('FRT');
+      });
+
+      it('does not return FRT when first reply was made at due time', () => {
+        const appliedSla = {
+          sla_frt_due_at: currentTimestamp - 600,
+          sla_rt_due_at: currentTimestamp + 1800,
+        };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 600,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('RT');
+      });
+
+      it('returns missed FRT when first reply was made after due time', () => {
+        const appliedSla = {
+          sla_frt_due_at: currentTimestamp - 600,
+          sla_rt_due_at: currentTimestamp + 1800,
+        };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 300,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('FRT');
+        expect(result.threshold).toBe('10m');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('returns missed FRT when live first reply timestamp is an ISO string after due time', () => {
+        const appliedSla = {
+          sla_frt_due_at: currentTimestamp - 600,
+          sla_rt_due_at: currentTimestamp + 1800,
+        };
+        const chat = {
+          first_reply_created_at: new Date(
+            (currentTimestamp - 300) * 1000
+          ).toISOString(),
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('FRT');
+        expect(result.threshold).toBe('10m');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('uses the due time for a missed FRT event created after the deadline', () => {
+        const appliedSla = { sla_frt_due_at: currentTimestamp - 3600 };
+        const chat = { first_reply_created_at: null, status: 'open' };
+        const slaEvents = [
+          { event_type: 'frt', created_at: currentTimestamp - 1800 },
+        ];
+
+        const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
+
+        expect(result.type).toBe('FRT');
+        expect(result.threshold).toBe('1h');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+    });
+
+    describe('NRT (Next Response Time)', () => {
+      it('returns NRT status when waiting for response and within threshold', () => {
+        const appliedSla = { sla_nrt_due_at: currentTimestamp + 1800 }; // 30 min from now
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          waiting_since: currentTimestamp - 600,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('NRT');
+        expect(result.threshold).toBe('30m');
+        expect(result.icon).toBe('alarm');
+        expect(result.isSlaMissed).toBe(false);
+      });
+
+      it('returns missed NRT status when threshold is exceeded', () => {
+        const appliedSla = { sla_nrt_due_at: currentTimestamp - 900 }; // 15 min ago
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          waiting_since: currentTimestamp - 2700,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('NRT');
+        expect(result.threshold).toBe('15m');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('does not return NRT when not waiting for response', () => {
+        const appliedSla = { sla_nrt_due_at: currentTimestamp + 1800 };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          waiting_since: null,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).not.toBe('NRT');
+      });
+
+      it('returns missed NRT when a recorded NRT miss exists after response', () => {
+        const appliedSla = { sla_rt_due_at: currentTimestamp + 1800 };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          waiting_since: null,
+          status: 'open',
+        };
+        const slaEvents = [
+          { event_type: 'nrt', created_at: currentTimestamp - 900 },
+        ];
+
+        const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
+
+        expect(result.type).toBe('NRT');
+        expect(result.threshold).toBe('15m');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('uses the recorded event time for a missed NRT with a new active NRT timer', () => {
+        const appliedSla = {
+          sla_nrt_due_at: currentTimestamp + 300,
+          sla_rt_due_at: currentTimestamp + 1800,
+        };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          waiting_since: currentTimestamp - 60,
+          status: 'open',
+        };
+        const slaEvents = [
+          { event_type: 'nrt', created_at: currentTimestamp - 1800 },
+        ];
+
+        const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
+
+        expect(result.type).toBe('NRT');
+        expect(result.threshold).toBe('30m');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('does not return NRT when first reply not made', () => {
+        const appliedSla = { sla_nrt_due_at: currentTimestamp + 1800 };
+        const chat = {
+          first_reply_created_at: null,
+          waiting_since: currentTimestamp - 600,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).not.toBe('NRT');
+      });
+    });
+
+    describe('RT (Resolution Time)', () => {
+      it('returns RT status when conversation is open and within threshold', () => {
+        const appliedSla = { sla_rt_due_at: currentTimestamp + 7200 }; // 2 hours from now
+        const chat = {
+          first_reply_created_at: currentTimestamp - 3600,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('RT');
+        expect(result.threshold).toBe('2h');
+        expect(result.icon).toBe('alarm');
+        expect(result.isSlaMissed).toBe(false);
+      });
+
+      it.each(['pending', 'snoozed'])(
+        'returns RT status when conversation is %s and within threshold',
+        status => {
+          const appliedSla = { sla_rt_due_at: currentTimestamp + 7200 };
+          const chat = {
+            first_reply_created_at: currentTimestamp - 3600,
+            status,
+          };
+
+          const result = evaluateSLAStatus({ appliedSla, chat });
+
+          expect(result.type).toBe('RT');
+          expect(result.threshold).toBe('2h');
+          expect(result.icon).toBe('alarm');
+          expect(result.isSlaMissed).toBe(false);
+        }
+      );
+
+      it('returns missed RT status when threshold is exceeded', () => {
+        const appliedSla = { sla_rt_due_at: currentTimestamp - 3600 }; // 1 hour ago
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('RT');
+        expect(result.threshold).toBe('1h');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('uses the due time for a missed RT event created after the deadline', () => {
+        const appliedSla = { sla_rt_due_at: currentTimestamp - 3600 };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          status: 'open',
+        };
+        const slaEvents = [
+          { event_type: 'rt', created_at: currentTimestamp - 1800 },
+        ];
+
+        const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
+
+        expect(result.type).toBe('RT');
+        expect(result.threshold).toBe('1h');
+        expect(result.icon).toBe('flame');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('does not return RT when conversation is resolved', () => {
+        const appliedSla = { sla_rt_due_at: currentTimestamp + 7200 };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 3600,
+          status: 'resolved',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('');
+      });
+    });
+
+    describe('priority selection', () => {
+      it('returns most urgent SLA when multiple are active', () => {
+        const appliedSla = {
+          sla_frt_due_at: currentTimestamp + 7200, // 2h - less urgent
+          sla_nrt_due_at: currentTimestamp + 1800, // 30m - most urgent
+          sla_rt_due_at: currentTimestamp + 3600, // 1h
+        };
+        const chat = {
+          first_reply_created_at: null,
+          waiting_since: currentTimestamp - 600,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        // FRT is selected because first_reply_created_at is null
+        // NRT is not checked when first_reply_created_at is null
+        expect(result.type).toBe('RT');
+        expect(result.threshold).toBe('1h');
+      });
+
+      it('returns most urgent missed SLA over upcoming SLA', () => {
+        const appliedSla = {
+          sla_nrt_due_at: currentTimestamp - 300, // 5m overdue - most urgent by absolute value
+          sla_rt_due_at: currentTimestamp + 3600, // 1h remaining
+        };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 7200,
+          waiting_since: currentTimestamp - 2100,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('NRT');
+        expect(result.isSlaMissed).toBe(true);
+      });
+
+      it('returns an existing missed SLA over a closer upcoming SLA', () => {
+        const appliedSla = {
+          sla_frt_due_at: currentTimestamp - 7200, // 2h overdue
+          sla_rt_due_at: currentTimestamp + 300, // 5m remaining
+        };
+        const chat = {
+          first_reply_created_at: null,
+          status: 'open',
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.type).toBe('FRT');
+        expect(result.threshold).toBe('2h');
+        expect(result.isSlaMissed).toBe(true);
+      });
+    });
+
+    describe('time formatting', () => {
+      it('formats time in days and hours', () => {
+        const appliedSla = { sla_rt_due_at: currentTimestamp + 90000 }; // 25 hours
+        const chat = { status: 'open' };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.threshold).toBe('1d 1h');
+      });
+
+      it('formats time less than a minute as 1m', () => {
+        const appliedSla = { sla_frt_due_at: currentTimestamp + 30 }; // 30 seconds
+        const chat = { first_reply_created_at: null, status: 'open' };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.threshold).toBe('1m');
+      });
+
+      it('formats months correctly', () => {
+        const appliedSla = {
+          sla_rt_due_at: currentTimestamp + 2592000 + 86400,
+        }; // 1 month + 1 day
+        const chat = { status: 'open' };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result.threshold).toBe('1mo 1d');
+      });
+    });
+
+    describe('empty status scenarios', () => {
+      it('returns empty when no SLA thresholds are set', () => {
+        const appliedSla = {};
+        const chat = { status: 'open' };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result).toEqual({
+          type: '',
+          threshold: '',
+          icon: '',
+          isSlaMissed: false,
+        });
+      });
+
+      it('returns empty when all conditions are met', () => {
+        const appliedSla = {
+          sla_frt_due_at: currentTimestamp + 3600,
+          sla_nrt_due_at: currentTimestamp + 1800,
+          sla_rt_due_at: currentTimestamp + 7200,
+        };
+        const chat = {
+          first_reply_created_at: currentTimestamp - 3600, // FRT already hit
+          waiting_since: null, // Not waiting, so NRT not applicable
+          status: 'resolved', // RT not applicable
+        };
+
+        const result = evaluateSLAStatus({ appliedSla, chat });
+
+        expect(result).toEqual({
+          type: '',
+          threshold: '',
+          icon: '',
+          isSlaMissed: false,
+        });
+      });
+    });
+  });
+});

app/javascript/dashboard/helper/voice.js

@@ -1,4 +1,7 @@
-import { CONTENT_TYPES } from 'dashboard/components-next/message/constants';
+import {
+  CONTENT_TYPES,
+  VOICE_CALL_STATUS,
+} from 'dashboard/components-next/message/constants';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { useCallsStore } from 'dashboard/stores/calls';
 import types from 'dashboard/store/mutation-types';
@@ -101,6 +104,7 @@ export function handleVoiceCallCreated(
     callSid,
     callId,
     provider,
+    status,
     callDirection,
     conversationId,
     inboxId,
@@ -108,6 +112,11 @@ export function handleVoiceCallCreated(
     senderId,
   } = extractCallData(message);
 
+  // A voice_call message can be created already terminal when the caller hangs
+  // up before connect. Only ring while the call is actually ringing; mirrors the
+  // guard in seedCallsFromHydratedMessages.
+  if (status !== VOICE_CALL_STATUS.RINGING) return;
+
   if (
     !shouldShowCall({
       callDirection,

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -494,10 +494,6 @@
           "PLACEHOLDER": "Enter assistant name",
           "ERROR": "The name is required"
         },
-        "TEMPERATURE": {
-          "LABEL": "Response Temperature",
-          "DESCRIPTION": "Adjust how creative or restrictive the assistant's responses should be. Lower values produce more focused and deterministic responses, while higher values allow for more creative and varied outputs."
-        },
         "DESCRIPTION": {
           "LABEL": "Description",
           "PLACEHOLDER": "Enter assistant description",

app/javascript/dashboard/i18n/locale/en/report.json

@@ -121,6 +121,26 @@
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "No results found"
     },
+    "DRILLDOWN": {
+      "TITLE": "{metric} details",
+      "RESULT_COUNT_CONVERSATION": "{count} conversation | {count} conversations",
+      "RESULT_COUNT_MESSAGE": "{count} message | {count} messages",
+      "EMPTY": "No records found for this bar.",
+      "ERROR": "Could not load records. Please try again.",
+      "ADMIN_ONLY": "Only administrators can drill down into report records.",
+      "LOAD_MORE": "Load more",
+      "CLOSE": "Close details",
+      "PREVIOUS_BUCKET": "Previous bar",
+      "NEXT_BUCKET": "Next bar",
+      "UNKNOWN_CONTACT": "Unknown contact",
+      "UNKNOWN_INBOX": "Unknown inbox",
+      "UNASSIGNED_AGENT": "Unassigned",
+      "NO_MESSAGE_CONTENT": "No message content",
+      "MESSAGE_CREATED_AT": "Message created at {time}",
+      "EVENT_OCCURRED_AT": "Event occurred at {time}",
+      "INCOMING_MESSAGE": "Incoming message",
+      "OUTGOING_MESSAGE": "Outgoing message"
+    },
     "PAGINATION": {
       "RESULTS": "Showing {start} to {end} of {total} results",
       "PER_PAGE_TEMPLATE": "{size} / page"

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -149,9 +149,5 @@ export default {
 
 :deep(.ProseMirror-woot-style) {
   @apply min-h-[12.5rem];
-
-  p {
-    @apply text-base;
-  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -153,9 +153,5 @@ export default {
 
 :deep(.ProseMirror-woot-style) {
   @apply min-h-[12.5rem];
-
-  p {
-    @apply text-base;
-  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue

@@ -101,6 +101,9 @@ export default {
       summary-fetching-key="getBotSummaryFetchingStatus"
       :group-by="groupBy"
       :report-keys="reportKeys"
+      :from="from"
+      :to="to"
+      :business-hours="businessHours"
     />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -121,6 +121,11 @@ export default {
       show-group-by
       @filter-change="onFilterChange"
     />
-    <ReportContainer :group-by="groupBy" />
+    <ReportContainer
+      :group-by="groupBy"
+      :from="from"
+      :to="to"
+      :business-hours="businessHours"
+    />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue

@@ -5,16 +5,38 @@ import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import { formatTime } from '@chatwoot/utils';
+import { useAlert } from 'dashboard/composables';
 import ChartStats from './components/ChartElements/ChartStats.vue';
 import BarChart from 'shared/components/charts/BarChart.vue';
+import ReportDrilldownDrawer from './components/ReportDrilldownDrawer.vue';
 
 export default {
-  components: { ChartStats, BarChart },
+  components: { ChartStats, BarChart, ReportDrilldownDrawer },
   props: {
     groupBy: {
       type: Object,
       default: () => ({}),
     },
+    from: {
+      type: Number,
+      default: 0,
+    },
+    to: {
+      type: Number,
+      default: 0,
+    },
+    reportType: {
+      type: String,
+      default: 'account',
+    },
+    selectedItemId: {
+      type: [String, Number],
+      default: null,
+    },
+    businessHours: {
+      type: Boolean,
+      default: false,
+    },
     accountSummaryKey: {
       type: String,
       default: 'getAccountSummary',
@@ -42,10 +64,27 @@ export default {
     );
     return { calculateTrend, isAverageMetricType };
   },
+  data() {
+    return {
+      drilldownRequest: null,
+      drilldownMetric: null,
+      drilldownIndex: null,
+    };
+  },
   computed: {
     ...mapGetters({
       accountReport: 'getAccountReports',
+      currentRole: 'getCurrentRole',
     }),
+    isAdmin() {
+      return this.currentRole === 'administrator';
+    },
+    canDrilldownPrev() {
+      return this.findDrillableIndex(this.drilldownIndex - 1, -1) !== null;
+    },
+    canDrilldownNext() {
+      return this.findDrillableIndex(this.drilldownIndex + 1, 1) !== null;
+    },
     metrics() {
       const reportKeys = Object.keys(this.reportKeys);
       const infoText = {
@@ -139,6 +178,82 @@ export default {
 
       return options;
     },
+    isDrilldownEnabled() {
+      return !!(this.from && this.to);
+    },
+    onChartElementClick(metric, event) {
+      if (!this.isDrilldownEnabled()) return;
+
+      const dataPoint = this.accountReport.data[metric.KEY]?.[event.dataIndex];
+      if (!this.canOpenDrilldown(metric, dataPoint)) return;
+      if (!this.isAdmin) {
+        useAlert(this.$t('REPORT.DRILLDOWN.ADMIN_ONLY'));
+        return;
+      }
+
+      this.openDrilldownAt(metric, event.dataIndex);
+    },
+    openDrilldownAt(metric, dataIndex) {
+      const dataPoint = this.accountReport.data[metric.KEY]?.[dataIndex];
+      if (!this.canOpenDrilldown(metric, dataPoint)) return;
+
+      const labels = this.getCollection(metric).labels || [];
+
+      this.drilldownMetric = metric;
+      this.drilldownIndex = dataIndex;
+      this.drilldownRequest = {
+        metric: metric.KEY,
+        metricName: metric.NAME,
+        bucketLabel: labels[dataIndex],
+        bucketTimestamp: dataPoint.timestamp,
+        bucketValue: dataPoint.value,
+        isAverageMetric: this.isAverageMetricType(metric.KEY),
+        from: this.from,
+        to: this.to,
+        type: this.reportType,
+        id: this.selectedItemId,
+        groupBy: this.groupBy?.period,
+        businessHours: this.businessHours,
+      };
+    },
+    navigateDrilldown(direction) {
+      const nextIndex = this.findDrillableIndex(
+        this.drilldownIndex + direction,
+        direction
+      );
+      if (nextIndex === null) return;
+
+      this.openDrilldownAt(this.drilldownMetric, nextIndex);
+    },
+    findDrillableIndex(startIndex, step) {
+      if (!this.drilldownMetric) return null;
+
+      const data = this.accountReport.data[this.drilldownMetric.KEY] || [];
+      for (
+        let index = startIndex;
+        index >= 0 && index < data.length;
+        index += step
+      ) {
+        if (this.canOpenDrilldown(this.drilldownMetric, data[index]))
+          return index;
+      }
+
+      return null;
+    },
+    canOpenDrilldown(metric, dataPoint) {
+      if (!dataPoint) return false;
+
+      if (this.isAverageMetricType(metric.KEY)) {
+        return dataPoint.count > 0;
+      }
+
+      return dataPoint.value > 0;
+    },
+    closeDrilldown() {
+      this.drilldownRequest = null;
+      this.drilldownMetric = null;
+      this.drilldownIndex = null;
+    },
   },
 };
 </script>
@@ -168,6 +283,8 @@ export default {
             v-if="accountReport.data[metric.KEY].length"
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
+            :clickable="isDrilldownEnabled()"
+            @element-click="onChartElementClick(metric, $event)"
           />
           <span v-else class="text-sm text-n-slate-10">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}
@@ -176,4 +293,23 @@ export default {
       </div>
     </div>
   </div>
+  <ReportDrilldownDrawer
+    :id="drilldownRequest?.id"
+    :open="!!drilldownRequest"
+    :metric="drilldownRequest?.metric"
+    :metric-name="drilldownRequest?.metricName"
+    :bucket-label="drilldownRequest?.bucketLabel"
+    :bucket-timestamp="drilldownRequest?.bucketTimestamp"
+    :bucket-value="drilldownRequest?.bucketValue"
+    :is-average-metric="drilldownRequest?.isAverageMetric"
+    :from="drilldownRequest?.from"
+    :to="drilldownRequest?.to"
+    :type="drilldownRequest?.type"
+    :group-by="drilldownRequest?.groupBy"
+    :business-hours="drilldownRequest?.businessHours"
+    :can-prev="canDrilldownPrev"
+    :can-next="canDrilldownNext"
+    @navigate="navigateDrilldown"
+    @close="closeDrilldown"
+  />
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue

@@ -0,0 +1,279 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { formatTime } from '@chatwoot/utils';
+import format from 'date-fns/format';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+
+const props = defineProps({
+  record: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+
+const conversation = computed(() => props.record.conversation || {});
+const message = computed(() => props.record.message || {});
+const isMessageRecord = computed(() => props.record.record_type === 'message');
+const isEventBackedConversationRecord = computed(
+  () => !isMessageRecord.value && !!props.record.event_name
+);
+const conversationDisplayId = computed(() => conversation.value.display_id);
+const conversationNumber = computed(() => `#${conversationDisplayId.value}`);
+const messageDirection = computed(() => message.value.message_type);
+
+const formatTimestamp = timestamp => {
+  if (!timestamp) return '';
+
+  return format(fromUnixTime(timestamp), 'dd MMM yyyy, h:mm a');
+};
+
+const compactTimestamp = timestamp => {
+  if (!timestamp) return '';
+
+  return shortTimestamp(dynamicTime(timestamp)).trim();
+};
+
+const metricValue = computed(() => {
+  const value = props.record.metric_value;
+  if (value === null || value === undefined) return '';
+
+  return formatTime(value) || `${value}`;
+});
+
+const previewText = computed(() => {
+  if (message.value.content) return message.value.content;
+  if (conversation.value.last_message?.content) {
+    return conversation.value.last_message.content;
+  }
+
+  return t('REPORT.DRILLDOWN.NO_MESSAGE_CONTENT');
+});
+
+const showPreview = computed(() => {
+  return isMessageRecord.value || conversation.value.last_message;
+});
+
+const messageCreatedTooltip = computed(() =>
+  t('REPORT.DRILLDOWN.MESSAGE_CREATED_AT', {
+    time: formatTimestamp(message.value.created_at),
+  })
+);
+
+const eventOccurredTooltip = computed(() =>
+  t('REPORT.DRILLDOWN.EVENT_OCCURRED_AT', {
+    time: formatTimestamp(props.record.occurred_at),
+  })
+);
+
+const directionDetails = computed(() => {
+  const direction = messageDirection.value;
+  if (!direction) return null;
+
+  const isIncoming = direction === 'incoming';
+  return {
+    icon: isIncoming ? 'i-lucide-arrow-down-left' : 'i-lucide-arrow-up-right',
+    tooltip: isIncoming
+      ? t('REPORT.DRILLDOWN.INCOMING_MESSAGE')
+      : t('REPORT.DRILLDOWN.OUTGOING_MESSAGE'),
+  };
+});
+
+const conversationPath = computed(() => {
+  if (!conversationDisplayId.value) return '';
+
+  const path = conversationUrl({
+    accountId: route.params.accountId,
+    id: conversationDisplayId.value,
+  });
+  const params =
+    isMessageRecord.value && message.value.id
+      ? { messageId: message.value.id }
+      : null;
+
+  return frontendURL(path, params);
+});
+
+const contactPath = computed(() => {
+  if (!conversation.value.contact_id) return '';
+
+  return frontendURL(
+    `accounts/${route.params.accountId}/contacts/${conversation.value.contact_id}`
+  );
+});
+
+const inboxPath = computed(() => {
+  if (!conversation.value.inbox_id) return '';
+
+  return frontendURL(
+    `accounts/${route.params.accountId}/inbox/${conversation.value.inbox_id}`
+  );
+});
+
+const agentPath = computed(() => {
+  if (!conversation.value.assignee_id) return '';
+
+  return frontendURL(
+    `accounts/${route.params.accountId}/reports/agents/${conversation.value.assignee_id}`
+  );
+});
+
+const metadataItems = computed(() => [
+  {
+    key: 'contact',
+    icon: 'i-lucide-contact',
+    label:
+      conversation.value.contact_name || t('REPORT.DRILLDOWN.UNKNOWN_CONTACT'),
+    path: contactPath.value,
+  },
+  {
+    key: 'inbox',
+    icon: 'i-lucide-inbox',
+    label: conversation.value.inbox_name || t('REPORT.DRILLDOWN.UNKNOWN_INBOX'),
+    path: inboxPath.value,
+  },
+  {
+    key: 'agent',
+    icon: 'i-lucide-user-round',
+    label:
+      conversation.value.assignee_name ||
+      t('REPORT.DRILLDOWN.UNASSIGNED_AGENT'),
+    path: agentPath.value,
+  },
+]);
+
+const metadataAttributes = item => {
+  if (!item.path) return {};
+
+  return {
+    href: item.path,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  };
+};
+
+const metadataItemClass = item => [
+  'flex min-w-0 items-center gap-1 text-n-slate-10',
+  item.path ? 'group hover:text-n-blue-11 hover:underline' : '',
+];
+
+const metadataIconClass = item => [
+  'size-3 shrink-0 text-n-slate-9',
+  item.path ? 'group-hover:text-n-blue-11' : '',
+];
+
+const stopMetadataLinkClick = (event, item) => {
+  if (item.path) {
+    event.stopPropagation();
+  }
+};
+
+const openInNewTab = url => {
+  if (!url) return;
+
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const openRecord = () => {
+  openInNewTab(conversationPath.value);
+};
+</script>
+
+<template>
+  <article
+    role="link"
+    tabindex="0"
+    class="cursor-pointer rounded-md border border-n-weak bg-n-solid-2 p-3 hover:bg-n-alpha-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand"
+    @click="openRecord"
+    @keydown.enter.self.prevent="openRecord"
+    @keydown.space.self.prevent="openRecord"
+  >
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0">
+        <div
+          class="flex items-center gap-2 text-sm font-medium leading-5 text-n-slate-12"
+        >
+          <span>{{ conversationNumber }}</span>
+          <span
+            v-if="conversation.status"
+            class="rounded bg-n-alpha-2 px-1.5 py-0.5 text-xs capitalize text-n-slate-11"
+          >
+            {{ conversation.status }}
+          </span>
+          <span
+            v-if="directionDetails"
+            v-tooltip.top="directionDetails.tooltip"
+            :aria-label="directionDetails.tooltip"
+            class="flex size-5 items-center justify-center rounded bg-n-alpha-2 text-n-slate-11"
+          >
+            <Icon :icon="directionDetails.icon" class="size-3" />
+          </span>
+          <span
+            v-if="metricValue"
+            class="rounded bg-n-alpha-2 px-1.5 py-0.5 text-xs text-n-slate-11"
+          >
+            {{ metricValue }}
+          </span>
+        </div>
+      </div>
+      <div
+        class="ms-2 flex shrink-0 items-center justify-end gap-1 text-end text-xs leading-4 text-n-slate-10"
+      >
+        <span
+          v-if="isMessageRecord"
+          v-tooltip.left="messageCreatedTooltip"
+          :aria-label="messageCreatedTooltip"
+          class="whitespace-nowrap"
+        >
+          {{ compactTimestamp(message.created_at) }}
+        </span>
+        <TimeAgo
+          v-else
+          :is-auto-refresh-enabled="false"
+          :conversation-id="conversation.id"
+          :last-activity-timestamp="conversation.last_activity_at"
+          :created-at-timestamp="conversation.created_at"
+          class="font-440 !text-xs !text-n-slate-10"
+        />
+        <span
+          v-if="isEventBackedConversationRecord"
+          v-tooltip.left="eventOccurredTooltip"
+          :aria-label="eventOccurredTooltip"
+          class="whitespace-nowrap rounded bg-n-alpha-2 px-1 py-0.5 text-[11px] leading-4 text-n-slate-10"
+        >
+          {{ compactTimestamp(record.occurred_at) }}
+        </span>
+      </div>
+    </div>
+
+    <p
+      v-if="showPreview"
+      class="mt-2 line-clamp-1 text-sm leading-5 text-n-slate-12"
+    >
+      {{ previewText }}
+    </p>
+
+    <div class="mt-2 grid grid-cols-3 gap-2">
+      <component
+        :is="item.path ? 'a' : 'span'"
+        v-for="item in metadataItems"
+        :key="item.key"
+        class="text-body-main"
+        v-bind="metadataAttributes(item)"
+        :class="metadataItemClass(item)"
+        @click="stopMetadataLinkClick($event, item)"
+      >
+        <Icon :icon="item.icon" :class="metadataIconClass(item)" />
+        <span class="truncate">{{ item.label }}</span>
+      </component>
+    </div>
+  </article>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue

@@ -0,0 +1,315 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { formatTime } from '@chatwoot/utils';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+import { useReportDrilldown } from '../composables/useReportDrilldown';
+import ReportDrilldownCard from './ReportDrilldownCard.vue';
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  metric: { type: String, default: '' },
+  metricName: { type: String, default: '' },
+  bucketLabel: { type: String, default: '' },
+  bucketTimestamp: { type: Number, default: null },
+  from: { type: Number, default: null },
+  to: { type: Number, default: null },
+  type: { type: String, default: 'account' },
+  id: { type: [String, Number], default: null },
+  groupBy: { type: String, default: '' },
+  businessHours: { type: Boolean, default: false },
+  bucketValue: { type: Number, default: null },
+  isAverageMetric: { type: Boolean, default: false },
+  canPrev: { type: Boolean, default: false },
+  canNext: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['close', 'navigate']);
+
+const { t } = useI18n();
+const drawerRef = ref(null);
+const {
+  records,
+  meta,
+  isFetching,
+  isFetchingMore,
+  hasError,
+  hasRecords,
+  hasMore,
+  open: openDrilldown,
+  close,
+  loadMore,
+} = useReportDrilldown();
+
+let previousActiveElement = null;
+
+const isOpen = computed(() => props.open);
+
+const title = computed(() => props.metricName || '');
+
+const bucketValue = computed(() => {
+  if (props.bucketValue === null) return '';
+
+  return props.isAverageMetric
+    ? formatTime(props.bucketValue)
+    : `${props.bucketValue}`;
+});
+
+// The headline stat already shows the conversation count for conversation-count
+// metrics (e.g. conversations_count), so the subtitle count would be redundant.
+const isStatConversationCount = computed(
+  () =>
+    !props.isAverageMetric &&
+    meta.value.record_type === 'conversation' &&
+    props.bucketValue === meta.value.conversation_count
+);
+
+const conversationCount = computed(() => {
+  if (!meta.value.conversation_count || isStatConversationCount.value)
+    return '';
+
+  return t('REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
+    count: meta.value.conversation_count,
+  });
+});
+
+// Timing metrics (e.g. reply time) show a duration as the stat, so the underlying
+// message count adds context. Skip it when it just mirrors the conversation count
+// (e.g. first response time has one response message per conversation).
+const messageCount = computed(() => {
+  if (
+    !props.isAverageMetric ||
+    meta.value.record_type !== 'message' ||
+    !meta.value.total_count ||
+    meta.value.total_count === meta.value.conversation_count
+  ) {
+    return '';
+  }
+
+  return t('REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE', {
+    count: meta.value.total_count,
+  });
+});
+
+const subtitle = computed(() =>
+  [props.bucketLabel, conversationCount.value, messageCount.value]
+    .filter(Boolean)
+    .join(' ⋅ ')
+);
+
+const restoreFocus = () => {
+  if (previousActiveElement?.isConnected) {
+    previousActiveElement.focus();
+  }
+  previousActiveElement = null;
+};
+
+const closeDrawer = () => {
+  close();
+  emit('close');
+  restoreFocus();
+};
+
+const recordKey = record =>
+  `${record.record_type}-${record.message?.id || record.conversation?.id}-${
+    record.occurred_at
+  }`;
+
+const rememberActiveElement = () => {
+  if (previousActiveElement) return;
+
+  previousActiveElement =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+};
+
+const focusDrawer = () => {
+  nextTick(() => drawerRef.value?.focus());
+};
+
+const fetchDrilldown = () => {
+  openDrilldown({
+    metric: props.metric,
+    bucketTimestamp: props.bucketTimestamp,
+    from: props.from,
+    to: props.to,
+    type: props.type,
+    id: props.id,
+    groupBy: props.groupBy,
+    businessHours: props.businessHours,
+  });
+};
+
+const navigate = direction => {
+  if (direction < 0 && !props.canPrev) return;
+  if (direction > 0 && !props.canNext) return;
+
+  emit('navigate', direction);
+};
+
+const onKeydown = event => {
+  if (!isOpen.value) return;
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    closeDrawer();
+  } else if (event.key === 'ArrowLeft') {
+    navigate(-1);
+  } else if (event.key === 'ArrowRight') {
+    navigate(1);
+  }
+};
+
+useEventListener(document, 'keydown', onKeydown);
+
+watch(
+  () => props.open,
+  isDrawerOpen => {
+    if (!isDrawerOpen) {
+      close();
+      restoreFocus();
+      return;
+    }
+
+    rememberActiveElement();
+    fetchDrilldown();
+    focusDrawer();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.metric, props.bucketTimestamp],
+  () => {
+    if (props.open) fetchDrilldown();
+  }
+);
+
+onBeforeUnmount(() => {
+  restoreFocus();
+});
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <Transition name="report-drilldown-fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 bg-black/30"
+        role="presentation"
+        @click.self="closeDrawer"
+      >
+        <aside
+          ref="drawerRef"
+          class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="title"
+          tabindex="-1"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-n-weak px-6 py-5"
+          >
+            <div class="min-w-0">
+              <h2 class="truncate text-base font-medium text-n-slate-12">
+                {{ title }}
+              </h2>
+              <p
+                v-if="bucketValue"
+                class="mt-1 text-xl font-semibold text-n-slate-12"
+              >
+                {{ bucketValue }}
+              </p>
+              <div
+                class="text-sm text-n-slate-11"
+                :class="{
+                  'mt-2': bucketValue,
+                  'mt-1': !bucketValue,
+                }"
+              >
+                {{ subtitle }}
+              </div>
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+              <Button
+                ghost
+                slate
+                size="sm"
+                icon="i-ph-caret-left"
+                class="rtl:rotate-180"
+                :disabled="!canPrev"
+                :aria-label="$t('REPORT.DRILLDOWN.PREVIOUS_BUCKET')"
+                @click="navigate(-1)"
+              />
+              <Button
+                ghost
+                slate
+                size="sm"
+                icon="i-ph-caret-right"
+                class="rtl:rotate-180"
+                :disabled="!canNext"
+                :aria-label="$t('REPORT.DRILLDOWN.NEXT_BUCKET')"
+                @click="navigate(1)"
+              />
+              <Button
+                ghost
+                slate
+                size="sm"
+                icon="i-ph-x"
+                :aria-label="$t('REPORT.DRILLDOWN.CLOSE')"
+                @click="closeDrawer"
+              />
+            </div>
+          </header>
+
+          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-3">
+            <div
+              v-if="isFetching"
+              class="flex h-40 items-center justify-center"
+            >
+              <Spinner />
+            </div>
+
+            <div
+              v-else-if="hasError"
+              class="flex h-40 items-center justify-center text-sm text-n-ruby-11"
+            >
+              {{ $t('REPORT.DRILLDOWN.ERROR') }}
+            </div>
+
+            <div
+              v-else-if="!hasRecords"
+              class="flex h-40 items-center justify-center text-sm text-n-slate-10"
+            >
+              {{ $t('REPORT.DRILLDOWN.EMPTY') }}
+            </div>
+
+            <div v-else class="flex flex-col gap-2">
+              <ReportDrilldownCard
+                v-for="record in records"
+                :key="recordKey(record)"
+                :record="record"
+              />
+
+              <Button
+                v-if="hasMore"
+                faded
+                slate
+                size="sm"
+                class="mx-auto mt-2"
+                :label="$t('REPORT.DRILLDOWN.LOAD_MORE')"
+                :is-loading="isFetchingMore"
+                @click="loadMore"
+              />
+            </div>
+          </div>
+        </aside>
+      </div>
+    </Transition>
+  </TeleportWithDirection>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue

@@ -69,6 +69,9 @@ export default {
     isAgentType() {
       return this.type === 'agent';
     },
+    selectedFilterId() {
+      return this.selectedFilter?.id || null;
+    },
     reportKeys() {
       return {
         CONVERSATIONS: 'conversations_count',
@@ -181,5 +184,10 @@ export default {
     v-if="filterItemsList.length"
     :group-by="groupBy"
     :report-keys="reportKeys"
+    :from="from"
+    :to="to"
+    :report-type="type"
+    :selected-item-id="selectedFilterId"
+    :business-hours="businessHours"
   />
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js

@@ -0,0 +1,195 @@
+import { mount } from '@vue/test-utils';
+import ReportDrilldownCard from '../ReportDrilldownCard.vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    params: {
+      accountId: 1,
+    },
+  }),
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => {
+      if (key === 'REPORT.DRILLDOWN.MESSAGE_CREATED_AT') {
+        return `Message created at ${params.time}`;
+      }
+      if (key === 'REPORT.DRILLDOWN.EVENT_OCCURRED_AT') {
+        return `Event occurred at ${params.time}`;
+      }
+      if (key === 'REPORT.DRILLDOWN.INCOMING_MESSAGE') {
+        return 'Incoming message';
+      }
+      if (key === 'REPORT.DRILLDOWN.OUTGOING_MESSAGE') {
+        return 'Outgoing message';
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock('shared/helpers/timeHelper', () => ({
+  dynamicTime: timestamp => {
+    const timestamps = {
+      1621103500: '2 minutes ago',
+      1621103400: '4 days ago',
+      1621103700: '4 days ago',
+    };
+    return timestamps[timestamp] || 'less than a minute ago';
+  },
+  shortTimestamp: time => {
+    const timestamps = {
+      '2 minutes ago': '2m',
+      '4 days ago': '4d',
+    };
+    return timestamps[time] || 'now';
+  },
+  dateFormat: timestamp => `date-${timestamp}`,
+}));
+
+describe('ReportDrilldownCard.vue', () => {
+  const record = {
+    record_type: 'message',
+    conversation: {
+      id: 10,
+      display_id: 42,
+      contact_id: 11,
+      contact_name: 'Jane',
+      inbox_id: 12,
+      inbox_name: 'Website',
+      assignee_id: 13,
+      assignee_name: 'Alex',
+      status: 'open',
+      created_at: 1621103400,
+      last_activity_at: 1621103700,
+      last_message: {
+        id: 100,
+        content: 'Latest reply',
+        message_type: 'outgoing',
+        created_at: 1621103600,
+      },
+    },
+    message: {
+      id: 99,
+      content: 'Need help',
+      message_type: 'incoming',
+      created_at: 1621103500,
+    },
+    metric_value: null,
+    occurred_at: 1621103500,
+  };
+
+  const mountCard = (props = {}) =>
+    mount(ReportDrilldownCard, {
+      props: {
+        record,
+        ...props,
+      },
+      global: {
+        mocks: {
+          $t: key => key,
+        },
+      },
+    });
+
+  beforeEach(() => {
+    vi.spyOn(window, 'open').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  it('opens the card conversation link in a new tab', async () => {
+    const wrapper = mountCard();
+
+    expect(wrapper.text()).toContain('#42');
+    expect(wrapper.text()).toContain('Need help');
+    expect(wrapper.find('.i-lucide-arrow-down-left').exists()).toBe(true);
+    expect(wrapper.find('[aria-label="Incoming message"]').exists()).toBe(true);
+
+    await wrapper.find('[role="link"]').trigger('click');
+
+    expect(window.open).toHaveBeenCalledWith(
+      '/app/accounts/1/conversations/42?messageId=99',
+      '_blank',
+      'noopener,noreferrer'
+    );
+  });
+
+  it('renders only message created timestamp for message rows', () => {
+    const wrapper = mountCard();
+    const messageCreatedLabel = wrapper
+      .findAll('[aria-label]')
+      .map(timestamp => timestamp.attributes('aria-label'))
+      .find(label => label.includes('Message created at'));
+
+    expect(wrapper.text()).toContain('2m');
+    expect(wrapper.text()).not.toContain('4d • 4d');
+    expect(messageCreatedLabel).toContain('Message created at');
+  });
+
+  it('renders separate contact, inbox, and agent links', async () => {
+    const wrapper = mountCard();
+    const links = wrapper.findAll('a');
+
+    expect(links.map(link => link.attributes('href'))).toEqual([
+      '/app/accounts/1/contacts/11',
+      '/app/accounts/1/inbox/12',
+      '/app/accounts/1/reports/agents/13',
+    ]);
+    expect(links.every(link => link.attributes('target') === '_blank')).toBe(
+      true
+    );
+    expect(
+      links.every(link => link.classes().includes('text-n-slate-10'))
+    ).toBe(true);
+    expect(
+      links.every(link => !link.classes().includes('text-n-blue-11'))
+    ).toBe(true);
+    expect(wrapper.find('.i-lucide-contact').exists()).toBe(true);
+    expect(wrapper.find('.i-lucide-inbox').exists()).toBe(true);
+    expect(wrapper.find('.i-lucide-user-round').exists()).toBe(true);
+
+    await links[0].trigger('click');
+
+    expect(window.open).not.toHaveBeenCalled();
+  });
+
+  it('renders the last message for conversation rows', () => {
+    const wrapper = mountCard({
+      record: {
+        ...record,
+        record_type: 'conversation',
+        message: null,
+        occurred_at: 1621103500,
+      },
+    });
+
+    expect(wrapper.text()).toContain('Latest reply');
+    expect(wrapper.text()).toContain('4d • 4d');
+  });
+
+  it('renders event time alongside TimeAgo for event-backed conversation rows', () => {
+    const wrapper = mountCard({
+      record: {
+        ...record,
+        record_type: 'conversation',
+        message: null,
+        event_name: 'conversation_bot_handoff',
+        occurred_at: 1621103500,
+      },
+    });
+    const eventOccurredLabel = wrapper
+      .findAll('[aria-label]')
+      .map(timestamp => timestamp.attributes('aria-label'))
+      .find(label => label.includes('Event occurred at'));
+
+    expect(wrapper.text()).toContain('Latest reply');
+    expect(wrapper.text()).toContain('4d • 4d');
+    expect(wrapper.text()).toContain('2m');
+    expect(eventOccurredLabel).toContain('Event occurred at');
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js

@@ -0,0 +1,352 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { formatTime } from '@chatwoot/utils';
+import ReportsAPI from 'dashboard/api/reports';
+import ReportDrilldownDrawer from '../ReportDrilldownDrawer.vue';
+
+vi.mock('dashboard/api/reports', () => ({
+  default: {
+    getDrilldown: vi.fn(),
+  },
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => {
+      if (key === 'REPORT.DRILLDOWN.TITLE') {
+        return `${params.metric} details`;
+      }
+      if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION') {
+        return `${params.count} conversations`;
+      }
+      if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE') {
+        return `${params.count} messages`;
+      }
+      return key;
+    },
+  }),
+}));
+
+describe('ReportDrilldownDrawer.vue', () => {
+  const request = {
+    metric: 'incoming_messages_count',
+    metricName: 'Messages received',
+    bucketLabel: '20-May',
+    bucketTimestamp: 1621103400,
+    from: 1621103400,
+    to: 1621621800,
+    type: 'account',
+    groupBy: 'day',
+    businessHours: false,
+  };
+
+  const payload = [
+    {
+      record_type: 'message',
+      conversation: {
+        id: 10,
+        display_id: 42,
+        contact_id: 11,
+        contact_name: 'Jane',
+        inbox_id: 12,
+        inbox_name: 'Website',
+        assignee_id: 13,
+        assignee_name: 'Alex',
+        status: 'open',
+        created_at: 1621103400,
+        last_activity_at: 1621103700,
+        last_message: {
+          id: 100,
+          content: 'Latest reply',
+          message_type: 'outgoing',
+          created_at: 1621103600,
+        },
+      },
+      message: {
+        id: 99,
+        content: 'Need help',
+        message_type: 'incoming',
+        created_at: 1621103500,
+      },
+      metric_value: null,
+      occurred_at: 1621103500,
+    },
+  ];
+
+  const mountDrawer = options =>
+    mount(ReportDrilldownDrawer, {
+      props: { open: true, ...request, ...options?.props },
+      attachTo: options?.attachTo,
+      global: {
+        stubs: {
+          TeleportWithDirection: {
+            template: '<div><slot /></div>',
+          },
+          Transition: false,
+          Spinner: true,
+          Button: {
+            props: ['label'],
+            emits: ['click'],
+            template:
+              '<button @click="$emit(\'click\')">{{ label }}<slot /></button>',
+          },
+          ReportDrilldownCard: {
+            props: ['record'],
+            template:
+              '<div data-testid="drilldown-card">#{{ record.conversation.display_id }}</div>',
+          },
+        },
+        mocks: {
+          $t: key => key,
+        },
+      },
+    });
+
+  beforeEach(() => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 1,
+          current_page: 1,
+          record_type: 'message',
+          conversation_count: 1,
+        },
+        payload,
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  it('loads and renders drilldown cards for the request', async () => {
+    const wrapper = mountDrawer();
+    await flushPromises();
+
+    expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith(
+      expect.objectContaining({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        page: 1,
+      })
+    );
+    expect(wrapper.text()).toContain('Messages received');
+    expect(wrapper.text()).toContain('1 conversations');
+    expect(wrapper.find('[data-testid="drilldown-card"]').text()).toBe('#42');
+  });
+
+  it('shows the bucket aggregate value for average metrics', async () => {
+    const wrapper = mountDrawer({
+      props: {
+        metric: 'avg_first_response_time',
+        metricName: 'First response time',
+        isAverageMetric: true,
+        bucketValue: 2580,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain(formatTime(2580));
+  });
+
+  it('shows both conversation and message counts when they differ (reply time)', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 8,
+          current_page: 1,
+          record_type: 'message',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: {
+        metric: 'reply_time',
+        isAverageMetric: true,
+        bucketValue: 2580,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5 conversations');
+    expect(wrapper.text()).toContain('8 messages');
+  });
+
+  it('hides the message count when it matches the conversation count (first response time)', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 5,
+          current_page: 1,
+          record_type: 'message',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: {
+        metric: 'avg_first_response_time',
+        isAverageMetric: true,
+        bucketValue: 2580,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5 conversations');
+    expect(wrapper.text()).not.toContain('messages');
+  });
+
+  it('shows the plain count as the bucket value for count metrics', async () => {
+    const wrapper = mountDrawer({ props: { bucketValue: 128 } });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('128');
+    expect(wrapper.text()).not.toContain(formatTime(128));
+  });
+
+  it('hides the redundant subtitle count for conversation-count metrics', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 5,
+          current_page: 1,
+          record_type: 'conversation',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: { metric: 'conversations_count', bucketValue: 5 },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5');
+    expect(wrapper.text()).not.toContain('conversations');
+  });
+
+  it('keeps the subtitle count when it differs from the stat value', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 8,
+          current_page: 1,
+          record_type: 'conversation',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: { metric: 'resolutions_count', bucketValue: 8 },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5 conversations');
+  });
+
+  it('anchors the drawer to the inline-end edge so it flips in RTL', async () => {
+    const wrapper = mountDrawer();
+    await flushPromises();
+
+    const drawer = wrapper.get('[role="dialog"]');
+    expect(drawer.classes()).toContain('end-0');
+    expect(drawer.classes()).not.toContain('right-0');
+  });
+
+  it('flips the navigation caret icons in RTL', async () => {
+    const wrapper = mountDrawer({ props: { canPrev: true, canNext: true } });
+    await flushPromises();
+
+    expect(
+      wrapper.get('[aria-label="REPORT.DRILLDOWN.PREVIOUS_BUCKET"]').classes()
+    ).toContain('rtl:rotate-180');
+    expect(
+      wrapper.get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]').classes()
+    ).toContain('rtl:rotate-180');
+  });
+
+  it('emits close when the drawer close button is clicked', async () => {
+    const wrapper = mountDrawer();
+    await flushPromises();
+
+    await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('emits navigate when the next button is clicked', async () => {
+    const wrapper = mountDrawer({ props: { canNext: true } });
+    await flushPromises();
+
+    await wrapper
+      .get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]')
+      .trigger('click');
+
+    expect(wrapper.emitted('navigate')).toStrictEqual([[1]]);
+  });
+
+  it('does not emit navigate past the available range', async () => {
+    const wrapper = mountDrawer({ props: { canPrev: false } });
+    await flushPromises();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+
+    expect(wrapper.emitted('navigate')).toBeUndefined();
+  });
+
+  it('moves focus into the drawer when opened', async () => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    const wrapper = mountDrawer({ attachTo: target });
+    await flushPromises();
+    await nextTick();
+
+    expect(document.activeElement).toBe(
+      wrapper.find('[role="dialog"]').element
+    );
+
+    wrapper.unmount();
+    target.remove();
+  });
+
+  it('closes on Escape even when focus is outside the drawer', async () => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    const wrapper = mountDrawer({ attachTo: target });
+    await flushPromises();
+
+    document.body.focus();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+
+    wrapper.unmount();
+    target.remove();
+  });
+
+  it('restores focus to the previously focused element when closed', async () => {
+    const opener = document.createElement('button');
+    const target = document.createElement('div');
+    document.body.appendChild(opener);
+    document.body.appendChild(target);
+    opener.focus();
+
+    const wrapper = mountDrawer({ attachTo: target });
+    await flushPromises();
+    await nextTick();
+
+    await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click');
+
+    expect(document.activeElement).toBe(opener);
+
+    wrapper.unmount();
+    target.remove();
+    opener.remove();
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js

@@ -0,0 +1,124 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import ReportsAPI from 'dashboard/api/reports';
+import { useReportDrilldown } from '../useReportDrilldown';
+
+vi.mock('dashboard/api/reports', () => ({
+  default: {
+    getDrilldown: vi.fn(),
+  },
+}));
+
+const deferredPromise = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+
+  return { promise, resolve, reject };
+};
+
+const drilldownRequest = overrides => ({
+  metric: 'conversations_count',
+  bucketTimestamp: 1,
+  from: 1621103400,
+  to: 1621621800,
+  type: 'account',
+  groupBy: 'day',
+  businessHours: false,
+  ...overrides,
+});
+
+describe('useReportDrilldown', () => {
+  const mountComposable = () =>
+    mount({
+      setup() {
+        return useReportDrilldown();
+      },
+      template: '<div />',
+    });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('does not request drilldown again for an identical active request', async () => {
+    const request = deferredPromise();
+    ReportsAPI.getDrilldown.mockReturnValue(request.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest());
+    wrapper.vm.open(drilldownRequest());
+
+    expect(ReportsAPI.getDrilldown).toHaveBeenCalledTimes(1);
+  });
+
+  it('aborts an in-flight request when a newer request is opened', async () => {
+    const firstRequest = deferredPromise();
+    const secondRequest = deferredPromise();
+    let firstSignal;
+
+    ReportsAPI.getDrilldown
+      .mockImplementationOnce(({ signal }) => {
+        firstSignal = signal;
+        return firstRequest.promise;
+      })
+      .mockReturnValueOnce(secondRequest.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 }));
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 }));
+
+    expect(firstSignal.aborted).toBe(true);
+  });
+
+  it('passes an abort signal to drilldown requests', async () => {
+    const request = deferredPromise();
+    ReportsAPI.getDrilldown.mockReturnValue(request.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest());
+
+    expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page: 1,
+        signal: expect.any(AbortSignal),
+      })
+    );
+  });
+
+  it('ignores stale responses when a newer request is opened first', async () => {
+    const firstRequest = deferredPromise();
+    const secondRequest = deferredPromise();
+    ReportsAPI.getDrilldown
+      .mockReturnValueOnce(firstRequest.promise)
+      .mockReturnValueOnce(secondRequest.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 }));
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 }));
+
+    secondRequest.resolve({
+      data: {
+        meta: { current_page: 1, total_count: 1 },
+        payload: [{ id: 'second' }],
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.vm.records).toEqual([{ id: 'second' }]);
+    expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 });
+
+    firstRequest.resolve({
+      data: {
+        meta: { current_page: 1, total_count: 1 },
+        payload: [{ id: 'first' }],
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.vm.records).toEqual([{ id: 'second' }]);
+    expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 });
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js

@@ -0,0 +1,138 @@
+import { computed, ref } from 'vue';
+import ReportsAPI from 'dashboard/api/reports';
+
+export function useReportDrilldown() {
+  const activeRequest = ref(null);
+  const records = ref([]);
+  const meta = ref({});
+  const isFetching = ref(false);
+  const isFetchingMore = ref(false);
+  const hasError = ref(false);
+  let requestToken = 0;
+  let activeRequestController = null;
+  let activeRequestFingerprint = null;
+
+  const hasRecords = computed(() => records.value.length > 0);
+  const hasMore = computed(() => {
+    return records.value.length < (meta.value.total_count || 0);
+  });
+
+  const isCurrentRequest = token =>
+    token === requestToken && !!activeRequest.value;
+
+  const requestFingerprint = request =>
+    JSON.stringify({
+      metric: request.metric,
+      bucketTimestamp: request.bucketTimestamp,
+      from: request.from,
+      to: request.to,
+      type: request.type,
+      id: request.id,
+      groupBy: request.groupBy,
+      businessHours: request.businessHours,
+    });
+
+  const abortActiveRequest = () => {
+    if (!activeRequestController) return;
+
+    activeRequestController.abort();
+    activeRequestController = null;
+  };
+
+  const isAbortError = error =>
+    error?.name === 'AbortError' ||
+    error?.name === 'CanceledError' ||
+    error?.code === 'ERR_CANCELED';
+
+  const fetchPage = async (page, token = requestToken) => {
+    if (!activeRequest.value) return;
+
+    const request = activeRequest.value;
+    const controller = new AbortController();
+    const loadingState = page === 1 ? isFetching : isFetchingMore;
+    activeRequestController = controller;
+    loadingState.value = true;
+    hasError.value = false;
+
+    try {
+      const response = await ReportsAPI.getDrilldown({
+        ...request,
+        page,
+        signal: controller.signal,
+      });
+      if (!isCurrentRequest(token)) return;
+
+      meta.value = response.data.meta || {};
+      records.value =
+        page === 1
+          ? response.data.payload || []
+          : [...records.value, ...(response.data.payload || [])];
+    } catch (error) {
+      if (!isCurrentRequest(token) || isAbortError(error)) return;
+
+      hasError.value = true;
+    } finally {
+      if (activeRequestController === controller) {
+        activeRequestController = null;
+      }
+
+      if (isCurrentRequest(token)) {
+        loadingState.value = false;
+      }
+    }
+  };
+
+  const open = async request => {
+    const fingerprint = requestFingerprint(request);
+    if (activeRequestFingerprint === fingerprint) return;
+
+    abortActiveRequest();
+    requestToken += 1;
+    activeRequestFingerprint = fingerprint;
+    activeRequest.value = request;
+    records.value = [];
+    meta.value = {};
+    hasError.value = false;
+    isFetchingMore.value = false;
+    await fetchPage(1, requestToken);
+  };
+
+  const close = () => {
+    abortActiveRequest();
+    requestToken += 1;
+    activeRequestFingerprint = null;
+    activeRequest.value = null;
+    records.value = [];
+    meta.value = {};
+    hasError.value = false;
+    isFetching.value = false;
+    isFetchingMore.value = false;
+  };
+
+  const loadMore = () => {
+    if (
+      !activeRequest.value ||
+      !hasMore.value ||
+      isFetching.value ||
+      isFetchingMore.value
+    ) {
+      return;
+    }
+
+    fetchPage((meta.value.current_page || 1) + 1, requestToken);
+  };
+
+  return {
+    activeRequest,
+    records,
+    meta,
+    isFetching,
+    isFetchingMore,
+    hasError,
+    hasRecords,
+    hasMore,
+    open,
+    close,
+    loadMore,
+  };
+}

app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js

@@ -0,0 +1,179 @@
+import { shallowMount } from '@vue/test-utils';
+import { useAlert } from 'dashboard/composables';
+import ReportContainer from '../ReportContainer.vue';
+
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(),
+}));
+
+vi.mock('dashboard/composables/useReportMetrics', () => ({
+  useReportMetrics: () => ({
+    calculateTrend: () => 0,
+    isAverageMetricType: key =>
+      ['avg_first_response_time', 'avg_resolution_time', 'reply_time'].includes(
+        key
+      ),
+  }),
+}));
+
+describe('ReportContainer.vue', () => {
+  const mountComponent = ({
+    dataPoint = { value: 2, timestamp: 1621103400 },
+    data,
+    reportKey = 'conversations_count',
+    role = 'administrator',
+  } = {}) =>
+    shallowMount(ReportContainer, {
+      props: {
+        from: 1621103400,
+        to: 1621621800,
+        groupBy: { period: 'day' },
+        reportType: 'inbox',
+        selectedItemId: 1,
+        businessHours: true,
+        reportKeys: {
+          CONVERSATIONS: reportKey,
+        },
+      },
+      global: {
+        mocks: {
+          $t: key => key,
+          $store: {
+            getters: {
+              getAccountReports: {
+                isFetching: {
+                  [reportKey]: false,
+                },
+                data: {
+                  [reportKey]: data || [dataPoint],
+                },
+              },
+              getCurrentRole: role,
+            },
+          },
+        },
+        stubs: {
+          ChartStats: true,
+          ReportDrilldownDrawer: {
+            name: 'ReportDrilldownDrawer',
+            props: [
+              'open',
+              'metric',
+              'metricName',
+              'bucketLabel',
+              'bucketTimestamp',
+              'bucketValue',
+              'isAverageMetric',
+              'from',
+              'to',
+              'type',
+              'id',
+              'groupBy',
+              'businessHours',
+              'canPrev',
+              'canNext',
+            ],
+            emits: ['navigate', 'close'],
+            template: '<div />',
+          },
+          BarChart: {
+            name: 'BarChart',
+            props: ['collection', 'chartOptions', 'clickable'],
+            emits: ['elementClick'],
+            template:
+              '<button data-test-id="bar-chart" @click="$emit(\'elementClick\', { dataIndex: 0, label: \'20-May\', value: 2 })" />',
+          },
+        },
+      },
+    });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('opens a drilldown request with report context when a non-zero bar is clicked', async () => {
+    const wrapper = mountComponent();
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
+    expect(drawer.props('open')).toBe(true);
+    expect(drawer.props()).toMatchObject({
+      metric: 'conversations_count',
+      metricName: 'REPORT.METRICS.CONVERSATIONS.NAME',
+      bucketLabel: '15-May',
+      bucketTimestamp: 1621103400,
+      from: 1621103400,
+      to: 1621621800,
+      type: 'inbox',
+      id: 1,
+      groupBy: 'day',
+      businessHours: true,
+    });
+  });
+
+  it('shows an alert and does not open drilldown for non-admin users', async () => {
+    const wrapper = mountComponent({ role: 'agent' });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    expect(useAlert).toHaveBeenCalledWith('REPORT.DRILLDOWN.ADMIN_ONLY');
+    expect(
+      wrapper.findComponent({ name: 'ReportDrilldownDrawer' }).props('open')
+    ).toBe(false);
+  });
+
+  it('does not open drilldown for zero-value count bars', async () => {
+    const wrapper = mountComponent({
+      dataPoint: { value: 0, timestamp: 1621103400 },
+    });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    expect(
+      wrapper.findComponent({ name: 'ReportDrilldownDrawer' }).props('open')
+    ).toBe(false);
+  });
+
+  it('opens average metric drilldown when the bucket has contributing records', async () => {
+    const wrapper = mountComponent({
+      reportKey: 'avg_first_response_time',
+      dataPoint: { value: 90, count: 2, timestamp: 1621103400 },
+    });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
+    expect(drawer.props('open')).toBe(true);
+    expect(drawer.props()).toMatchObject({
+      metric: 'avg_first_response_time',
+      bucketTimestamp: 1621103400,
+    });
+  });
+
+  it('navigates to adjacent drillable buckets within the report range', async () => {
+    const wrapper = mountComponent({
+      data: [
+        { value: 2, timestamp: 1621103400 },
+        { value: 0, timestamp: 1621189800 },
+        { value: 5, timestamp: 1621276200 },
+      ],
+    });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
+    // Opened on the first bucket: no previous, but a later drillable bucket exists.
+    expect(drawer.props('bucketTimestamp')).toBe(1621103400);
+    expect(drawer.props('canPrev')).toBe(false);
+    expect(drawer.props('canNext')).toBe(true);
+
+    // Skips the zero-value middle bucket and lands on the last drillable one.
+    drawer.vm.$emit('navigate', 1);
+    await wrapper.vm.$nextTick();
+
+    expect(drawer.props('bucketTimestamp')).toBe(1621276200);
+    expect(drawer.props('canPrev')).toBe(true);
+    expect(drawer.props('canNext')).toBe(false);
+  });
+});

app/javascript/dashboard/store/modules/helpCenterArticles/actions.js

@@ -157,11 +157,13 @@ export const actions = {
     // Update positions in the store immediately so subsequent mutations preserve correct positions
     commit(types.SET_ARTICLE_POSITIONS, reorderedGroup);
     try {
-      await articlesAPI.reorderArticles({
+      const { data } = await articlesAPI.reorderArticles({
         portalSlug,
         reorderedGroup,
         categorySlug,
       });
+      // Adopt the backend's re-spaced positions so the next reorder isn't computed from stale local values.
+      if (data?.positions) commit(types.SET_ARTICLE_POSITIONS, data.positions);
     } catch (error) {
       commit(types.SET_ARTICLE_POSITIONS, oldPositions);
       throw error;

app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js

@@ -314,6 +314,25 @@ describe('#actions', () => {
       );
     });
 
+    it('adopts the backend re-spaced positions when the response returns them', async () => {
+      const serverPositions = { 1: 10, 2: 30, 3: 20 };
+      axios.post.mockResolvedValue({ data: { positions: serverPositions } });
+
+      await actions.reorder(
+        { commit, state },
+        {
+          portalSlug: 'test-portal',
+          categorySlug: 'test-category',
+          reorderedGroup: { 3: 25 },
+        }
+      );
+
+      expect(commit).toHaveBeenCalledWith(
+        types.default.SET_ARTICLE_POSITIONS,
+        serverPositions
+      );
+    });
+
     it('rolls back positions and throws when API call fails', async () => {
       axios.post.mockRejectedValue({ message: 'Network error' });
       const reorderedGroup = { 1: 1, 2: 2 };

app/javascript/shared/components/charts/BarChart.vue

@@ -19,8 +19,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(['elementClick']);
+
 ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale);
 
 const fontFamily =
@@ -67,8 +73,39 @@ const defaultChartOptions = {
   },
 };
 
+const handleClick = (event, elements, chart) => {
+  props.chartOptions.onClick?.(event, elements, chart);
+
+  if (!props.clickable || !elements.length) return;
+
+  const { datasetIndex, index } = elements[0];
+  const dataset = props.collection.datasets?.[datasetIndex] || {};
+
+  emit('elementClick', {
+    datasetIndex,
+    dataIndex: index,
+    dataset,
+    label: props.collection.labels?.[index],
+    value: dataset.data?.[index],
+  });
+};
+
+const handleHover = (event, elements, chart) => {
+  props.chartOptions.onHover?.(event, elements, chart);
+
+  if (!event?.native?.target) return;
+
+  event.native.target.style.cursor =
+    props.clickable && elements.length ? 'pointer' : 'default';
+};
+
 const options = computed(() => {
-  return { ...defaultChartOptions, ...props.chartOptions };
+  return {
+    ...defaultChartOptions,
+    ...props.chartOptions,
+    onClick: handleClick,
+    onHover: handleHover,
+  };
 });
 </script>
 

app/javascript/shared/components/specs/BarChart.spec.js

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import BarChart from '../charts/BarChart.vue';
+
+vi.mock('vue-chartjs', () => ({
+  Bar: {
+    name: 'Bar',
+    props: ['data', 'options'],
+    template: '<canvas />',
+  },
+}));
+
+describe('BarChart.vue', () => {
+  it('emits the clicked chart element when clickable', () => {
+    const wrapper = shallowMount(BarChart, {
+      props: {
+        clickable: true,
+        collection: {
+          labels: ['20-May'],
+          datasets: [{ type: 'bar', data: [3] }],
+        },
+      },
+    });
+
+    const options = wrapper.findComponent({ name: 'Bar' }).props('options');
+    options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
+
+    expect(wrapper.emitted('elementClick')[0][0]).toEqual({
+      datasetIndex: 0,
+      dataIndex: 0,
+      dataset: { type: 'bar', data: [3] },
+      label: '20-May',
+      value: 3,
+    });
+  });
+
+  it('does not emit when chart is not clickable', () => {
+    const wrapper = shallowMount(BarChart, {
+      props: {
+        clickable: false,
+        collection: {
+          labels: ['20-May'],
+          datasets: [{ type: 'bar', data: [3] }],
+        },
+      },
+    });
+
+    const options = wrapper.findComponent({ name: 'Bar' }).props('options');
+    options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
+
+    expect(wrapper.emitted('elementClick')).toBeUndefined();
+  });
+});

app/models/article.rb

@@ -137,15 +137,41 @@ class Article < ApplicationRecord
   end
 
   def self.update_positions(portal:, positions_hash:)
-    return if positions_hash.blank?
+    return {} if positions_hash.blank?
+
+    moved_ids = positions_hash.keys.map(&:to_i)
 
     transaction do
       positions_hash.each do |article_id, new_position|
         portal.articles.find(article_id).update!(position: new_position)
       end
+      # Re-space touched categories to clean gaps and return the final positions
+      rebalance_positions(portal, moved_ids)
     end
   end
 
+  def self.rebalance_positions(portal, moved_ids)
+    category_ids = portal.articles.where(id: moved_ids).distinct.pluck(:category_id).compact
+    category_ids.each_with_object({}) do |category_id, positions|
+      resequence_category(portal, category_id, moved_ids, positions)
+    end
+  end
+
+  def self.resequence_category(portal, category_id, moved_ids, positions)
+    ordered = portal.articles.where(category_id: category_id)
+                    .sort_by { |article| [article.position || 0, moved_ids.include?(article.id) ? 1 : 0, article.id] }
+    return if ordered.length < 2 # a lone article can't collide, leave it as-is
+
+    ordered.each_with_index do |article, index|
+      new_position = (index + 1) * 10
+      positions[article.id] = new_position
+      next if article.position == new_position
+
+      article.update_column(:position, new_position) # rubocop:disable Rails/SkipsModelValidations
+    end
+  end
+  private_class_method :rebalance_positions, :resequence_category
+
   private
 
   def category_id_changed_action

app/models/email_template.rb

@@ -20,7 +20,7 @@ class EmailTemplate < ApplicationRecord
   enum :template_type, { layout: 0, content: 1 }
   belongs_to :account, optional: true
 
-  validates :name, uniqueness: { scope: :account }
+  validates :name, uniqueness: { scope: [:account, :template_type, :locale] }
 
   def self.resolver(options = {})
     ::EmailTemplates::DbResolverService.using self, options

app/services/email_templates/db_resolver_service.rb

@@ -35,6 +35,8 @@ class ::EmailTemplates::DbResolverService < ActionView::Resolver
   def find_templates(name, prefix, partial, *_args)
     @template_name = name
     @template_type = prefix.include?('layout') ? 'layout' : 'content'
+    @_prefix = prefix
+    @_details = _args.first || {}
     @db_template = find_db_template
 
     return [] if @db_template.blank?
@@ -60,11 +62,23 @@ class ::EmailTemplates::DbResolverService < ActionView::Resolver
   def find_account_template
     return unless Current.account
 
-    @@model.find_by(name: @template_name, template_type: @template_type, account: Current.account)
+    find_template_for(Current.account)
   end
 
   def find_installation_template
-    @@model.find_by(name: @template_name, template_type: @template_type, account: nil)
+    find_template_for(nil)
+  end
+
+  def find_template_for(account)
+    @@model.find_by(name: db_template_name, template_type: @template_type, locale: locale_from_details, account: account) ||
+      @@model.find_by(name: @template_name, template_type: @template_type, locale: locale_from_details, account: account)
+  end
+
+  def locale_from_details
+    return :en if @_details.blank?
+
+    locale = Array(@_details[:locale]).first
+    EmailTemplate.locales.key?(locale.to_s) ? locale : :en
   end
 
   # Build path with eventual prefix
@@ -72,6 +86,12 @@ class ::EmailTemplates::DbResolverService < ActionView::Resolver
     prefix.present? ? "#{prefix}/#{@template_name}" : @template_name
   end
 
+  def db_template_name
+    return @template_name if @template_type == 'layout'
+
+    build_path(@_prefix)
+  end
+
   # returns a path depending if its a partial or template
   # params path: path/to/file.ext  partial: true/false
   # the function appends _to make the file name _file.ext if partial: true

app/services/reports/drilldown_timestamp_validator.rb

@@ -0,0 +1,53 @@
+module Reports::DrilldownTimestampValidator
+  extend TimezoneHelper
+
+  TIMESTAMP_PARAMS = %i[bucket_timestamp since until].freeze
+  DEFAULT_GROUP_BY = V2::Reports::DrilldownBuilder::DEFAULT_GROUP_BY
+  SUPPORTED_GROUP_BY = V2::Reports::DrilldownBuilder::SUPPORTED_GROUP_BY
+
+  module_function
+
+  def valid?(params)
+    timestamps = TIMESTAMP_PARAMS.index_with { |param| integer_param(params[param]) }
+    return false if timestamps.values.any?(&:nil?)
+    return false unless timestamps[:since] < timestamps[:until]
+
+    bucket_overlaps_requested_range?(params, timestamps)
+  end
+
+  def integer_param(value)
+    return unless value.to_s.match?(/\A\d+\z/)
+
+    value.to_i
+  end
+
+  def bucket_overlaps_requested_range?(params, timestamps)
+    bucket_start = Time.zone.at(timestamps[:bucket_timestamp]).in_time_zone(timezone(params))
+    bucket_end = bucket_end_for(bucket_start, group_by(params))
+    requested_start = Time.zone.at(timestamps[:since])
+    requested_end = Time.zone.at(timestamps[:until])
+
+    bucket_start < requested_end && bucket_end > requested_start
+  rescue ArgumentError, RangeError
+    false
+  end
+
+  def bucket_end_for(bucket_start, group_by)
+    {
+      'hour' => bucket_start + 1.hour,
+      'day' => bucket_start + 1.day,
+      'week' => bucket_start + 1.week,
+      'month' => bucket_start + 1.month,
+      'year' => bucket_start + 1.year
+    }.fetch(group_by)
+  end
+
+  def group_by(params)
+    group = params[:group_by].to_s
+    SUPPORTED_GROUP_BY.include?(group) ? group : DEFAULT_GROUP_BY
+  end
+
+  def timezone(params)
+    timezone_name_from_offset(params[:timezone_offset])
+  end
+end

app/views/api/v1/conversations/partials/_conversation.json.jbuilder

@@ -58,5 +58,6 @@ json.last_non_activity_message conversation.messages.where(account_id: conversat
 json.last_activity_at conversation.last_activity_at.to_i
 json.priority conversation.priority
 json.waiting_since conversation.waiting_since.to_i.to_i
-json.sla_policy_id conversation.sla_policy_id
+sla_applicable = !conversation.respond_to?(:sla_applicable?) || conversation.sla_applicable?
+json.sla_policy_id sla_applicable ? conversation.sla_policy_id : nil
 json.partial! 'enterprise/api/v1/conversations/partials/conversation', conversation: conversation if ChatwootApp.enterprise?

app/views/super_admin/app_configs/show.html.erb

@@ -14,66 +14,72 @@
 }
 </style>
 
-<section class="main-content__body">
+<section class="main-content__body relative">
+  <%= render partial: 'email_layout' if @config == 'custom_branding' && ChatwootApp.enterprise? %>
+
   <%= form_with url: super_admin_app_config_url(config: @config) , method: :post do |form| %>
-    <% @allowed_configs.each do |key| %>
-      <div class="flex mb-8">
-        <div class="field-unit__label">
-          <%= form.label "app_config[#{key}]", @installation_configs[key]&.dig('display_title') || key %>
-        </div>
-        <div class="-mt-2 field-unit__field ">
-          <% if @installation_configs[key]&.dig('type') == 'boolean' %>
-            <%= form.select "app_config[#{key}]",
-              [["True", true], ["False", false]],
-              { selected: ActiveModel::Type::Boolean.new.cast(@app_config[key]) },
-              class: "mt-2 border border-slate-100 p-1 rounded-md"
-            %>
-          <% elsif @installation_configs[key]&.dig('type') == 'code' %>
-            <%= form.text_area "app_config[#{key}]",
-                value: @app_config[key],
-                rows: 12,
-                wrap: 'off',
-                class: "mt-2 border font-mono text-xs border-slate-100 p-1 rounded-md overflow-scroll"
-            %>
-          <% elsif @installation_configs[key]&.dig('type') == 'secret' %>
-            <div class="relative">
-              <%= form.password_field "app_config[#{key}]",
-                  id: "app_config_#{key}",
-                  value: @app_config[key],
-                  class: "mt-2 border border-slate-100 p-1.5 pr-8 rounded-md w-full"
+      <% @allowed_configs.each do |key| %>
+        <div class="flex mb-8">
+          <div class="field-unit__label">
+            <%= form.label "app_config[#{key}]", @installation_configs[key]&.dig('display_title') || key %>
+          </div>
+          <div class="-mt-2 field-unit__field ">
+            <% if @installation_configs[key]&.dig('type') == 'boolean' %>
+              <%= form.select "app_config[#{key}]",
+                [["True", true], ["False", false]],
+                { selected: ActiveModel::Type::Boolean.new.cast(@app_config[key]) },
+                class: "mt-2 border border-slate-100 p-1 rounded-md"
               %>
-              <button
-                type="button"
-                class="absolute reset-base !bg-white top-1/2 !outline-0 !text-n-slate-11 -translate-y-1/2 right-2 p-1 hover:!bg-n-slate-5 rounded-sm toggle-password"
-                data-target="app_config_<%= key %>"
-              >
-                <svg class="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M12 5C5.63636 5 2 12 2 12C2 12 5.63636 19 12 19C18.3636 19 22 12 22 12C22 12 18.3636 5 12 5Z"/>
-                  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"/>
-                </svg>
-              </button>
-            </div>
-          <% elsif @installation_configs[key]&.dig('type') == 'select' && @installation_configs[key]&.dig('options').present? %>
-            <%= form.select "app_config[#{key}]",
-              @installation_configs[key]['options'].map { |val, label| [label, val] },
-              { selected: @app_config[key] },
-              class: "mt-2 border border-slate-100 p-1 rounded-md"
-            %>
-        <% else %>
-          <%= form.text_field "app_config[#{key}]", value: @app_config[key] %>
-        <% end %>
-          <%if @installation_configs[key]&.dig('description').present? %>
-            <p class="pt-2 text-xs italic text-slate-400">
-              <%= @installation_configs[key]&.dig('description') %>
-            </p>
-          <% end %>
+            <% elsif @installation_configs[key]&.dig('type') == 'code' %>
+              <%= form.text_area "app_config[#{key}]",
+                  value: @app_config[key],
+                  rows: 12,
+                  wrap: 'off',
+                  class: "mt-2 border font-mono text-xs border-slate-100 p-1 rounded-md overflow-scroll"
+              %>
+            <% elsif @installation_configs[key]&.dig('type') == 'secret' %>
+              <div class="relative">
+                <%= form.password_field "app_config[#{key}]",
+                    id: "app_config_#{key}",
+                    value: @app_config[key],
+                    class: "mt-2 border border-slate-100 p-1.5 pr-8 rounded-md w-full"
+                %>
+                <button
+                  type="button"
+                  class="absolute reset-base !bg-white top-1/2 !outline-0 !text-n-slate-11 -translate-y-1/2 right-2 p-1 hover:!bg-n-slate-5 rounded-sm toggle-password"
+                  data-target="app_config_<%= key %>"
+                >
+                  <svg class="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 5C5.63636 5 2 12 2 12C2 12 5.63636 19 12 19C18.3636 19 22 12 22 12C22 12 18.3636 5 12 5Z"/>
+                    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"/>
+                  </svg>
+                </button>
+              </div>
+            <% elsif @installation_configs[key]&.dig('type') == 'select' && @installation_configs[key]&.dig('options').present? %>
+              <%= form.select "app_config[#{key}]",
+                @installation_configs[key]['options'].map { |val, label| [label, val] },
+                { selected: @app_config[key] },
+                class: "mt-2 border border-slate-100 p-1 rounded-md"
+              %>
+            <% else %>
+              <%= form.text_field "app_config[#{key}]", value: @app_config[key] %>
+            <% end %>
+
+            <% if @installation_configs[key]&.dig('description').present? %>
+              <p class="pt-2 text-xs italic text-slate-400">
+                <%= @installation_configs[key]&.dig('description') %>
+              </p>
+            <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+
+      <% end %>
+
     <div class="form-actions">
       <%= form.submit "Submit" %>
     </div>
   <% end %>
+
 </section>
 
 <% content_for :javascript do %>

app/views/super_admin/application/_nav_item.html.erb

@@ -1,5 +1,5 @@
 <li class="px-4 mb-1">
-  <% text_class_name = current_page?(url) ? 'text-woot-500 bg-slate-25' : 'text-slate-800' %>
+  <% text_class_name = local_assigns.fetch(:active, current_page?(url)) ? 'text-woot-500 bg-slate-25' : 'text-slate-800' %>
   <%= link_to(url, class: text_class_name + " -ml-1 focus:outline-none cursor-pointer flex items-center px-2 py-1.5 text-slate-800 cursor-pointer hover:text-woot-500 hover:bg-slate-25 rounded-lg") do %>
     <svg width="16" height="16"><use xlink:href="#<%= icon %>" /></svg>
     <span class="ml-2 text-sm"><%= label %></span>

app/views/super_admin/application/_navigation.html.erb

@@ -33,12 +33,15 @@ as defined by the routes in the `admin/` namespace
     <ul class="my-4">
       <%= render partial: "nav_item", locals: { icon: 'icon-grid-line', url: super_admin_root_url, label: 'Dashboard' } %>
       <% Administrate::Namespace.new(namespace).resources.each do |resource| %>
-        <% next if ["account_users", "access_tokens", "installation_configs", "dashboard", "devise/sessions", "app_configs", "instance_statuses", "settings", "push_diagnostics"].include?  resource.resource %>
+        <% next if ["account_users", "access_tokens", "installation_configs", "dashboard", "devise/sessions", "app_configs", "instance_statuses", "settings", "push_diagnostics", "email_layouts"].include?  resource.resource %>
         <% next if resource.resource == "platform_banners" && !ChatwootApp.chatwoot_cloud? %>
+        <% resource_url = resource_index_route(resource) %>
+        <% active = current_page?(resource_url) || (resource.resource == 'accounts' && params[:controller] == 'super_admin/email_layouts' && params[:account_id].present?) %>
         <%= render partial: "nav_item", locals: {
             icon: sidebar_icons[resource.resource.to_sym],
-            url: resource_index_route(resource),
+            url: resource_url,
             label: display_resource_name(resource),
+            active: active,
           }
         %>
 

config/initializers/rack_attack.rb

@@ -224,8 +224,30 @@ class Rack::Attack
     match_data[:account_id] if match_data.present?
   end
 
+  reports_api_user_level_limit = ENV.fetch('RATE_LIMIT_REPORTS_API_USER_LEVEL', '100').to_i
+  reports_drilldown_api_user_level_limit = ENV.fetch(
+    'RATE_LIMIT_REPORTS_DRILLDOWN_API_USER_LEVEL',
+    [(reports_api_user_level_limit / 10), 1].max
+  ).to_i
+
+  # Throttle drilldown requests by individual user (based on uid)
+  throttle('/api/v2/accounts/:account_id/reports/drilldown/user',
+           limit: reports_drilldown_api_user_level_limit, period: 1.minute) do |req|
+    match_data = %r{\A/api/v2/accounts/(?<account_id>\d+)/reports/drilldown\z}.match(req.path_without_extensions)
+    next unless match_data.present? && req.get?
+
+    # Extract user identification (uid for web, api_access_token for API requests)
+    user_uid = req.get_header('HTTP_UID')
+    api_access_token = req.get_header('HTTP_API_ACCESS_TOKEN') || req.get_header('api_access_token')
+
+    # Use uid if present, otherwise fallback to api_access_token for tracking
+    user_identifier = user_uid.presence || api_access_token.presence
+
+    "#{user_identifier}:#{match_data[:account_id]}" if user_identifier.present?
+  end
+
   # Throttle by individual user (based on uid)
-  throttle('/api/v2/accounts/:account_id/reports/user', limit: ENV.fetch('RATE_LIMIT_REPORTS_API_USER_LEVEL', '100').to_i, period: 1.minute) do |req|
+  throttle('/api/v2/accounts/:account_id/reports/user', limit: reports_api_user_level_limit, period: 1.minute) do |req|
     match_data = %r{/api/v2/accounts/(?<account_id>\d+)/reports}.match(req.path)
     # Extract user identification (uid for web, api_access_token for API requests)
     user_uid = req.get_header('HTTP_UID')

config/locales/en.yml

@@ -134,6 +134,7 @@ en:
         not_supported: 'Reauthorization is not supported for this type of WhatsApp channel.'
       calls:
         not_enabled: 'Calling is not enabled for this inbox'
+        already_ended: 'This call has already ended'
         no_recording: 'No recording file provided'
         no_message: 'Call has no associated message'
         sdp_offer_required: 'sdp_offer is required'

config/routes.rb

@@ -501,6 +501,7 @@ Rails.application.routes.draw do
               get :conversations
               get :conversations_summary
               get :conversation_traffic
+              get :drilldown
               get :bot_metrics
               get :inbox_label_matrix
               get :first_response_time_distribution
@@ -684,6 +685,7 @@ Rails.application.routes.draw do
       resources :accounts, only: [:index, :new, :create, :show, :edit, :update, :destroy] do
         post :seed, on: :member
         post :reset_cache, on: :member
+        resource :email_layout, only: [:edit, :update, :destroy] if ChatwootApp.enterprise?
       end
       resources :users, only: [:index, :new, :create, :show, :edit, :update, :destroy] do
         delete :avatar, on: :member, action: :destroy_avatar
@@ -701,6 +703,7 @@ Rails.application.routes.draw do
       resource :settings, only: [:show] do
         get :refresh, on: :collection
       end
+      resource :email_layout, only: [:edit, :update, :destroy] if ChatwootApp.enterprise?
 
       # resources that doesn't appear in primary navigation in super admin
       resources :account_users, only: [:new, :create, :show, :destroy]

db/migrate/20260603105959_update_email_templates_unique_index_for_locale_and_type.rb

@@ -0,0 +1,9 @@
+class UpdateEmailTemplatesUniqueIndexForLocaleAndType < ActiveRecord::Migration[7.1]
+  def change
+    remove_index :email_templates, name: 'index_email_templates_on_name_and_account_id'
+    add_index :email_templates,
+              [:name, :account_id, :template_type, :locale],
+              unique: true,
+              name: 'index_email_templates_on_name_account_type_locale'
+  end
+end

db/schema.rb

@@ -859,7 +859,7 @@ ActiveRecord::Schema[7.1].define(version: 2026_06_20_000000) do
     t.integer "locale", default: 0, null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
-    t.index ["name", "account_id"], name: "index_email_templates_on_name_and_account_id", unique: true
+    t.index ["name", "account_id", "template_type", "locale"], name: "index_email_templates_on_name_account_type_locale", unique: true
   end
 
   create_table "folders", force: :cascade do |t|

enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb

@@ -47,7 +47,7 @@ class Api::V1::Accounts::AppliedSlasController < Api::V1::Accounts::EnterpriseAc
   end
 
   def set_applied_slas
-    initial_query = Current.account.applied_slas.includes(:conversation)
+    initial_query = Current.account.applied_slas.with_sla_applicable_conversation.includes(:conversation)
     @applied_slas = apply_filters(initial_query)
   end
 

enterprise/app/controllers/api/v1/accounts/whatsapp_calls_controller.rb

@@ -13,6 +13,7 @@ class Api::V1::Accounts::WhatsappCallsController < Api::V1::Accounts::BaseContro
               Voice::CallErrors::AlreadyAccepted,
               Voice::CallErrors::CallFailed,
               with: :render_call_error
+  rescue_from Voice::CallErrors::CallAlreadyEnded, with: :render_call_ended
   rescue_from Voice::CallErrors::NoCallPermission, with: :render_permission_request
 
   def show; end
@@ -105,9 +106,14 @@ class Api::V1::Accounts::WhatsappCallsController < Api::V1::Accounts::BaseContro
 
   def create_outbound_call
     contact_phone = @conversation.contact.phone_number.delete('+')
+    # Claim for the caller only if unassigned at trigger time (before the round-trip); wins over auto-assignment.
+    claim_for_caller = @conversation.assignee_id.nil?
+
     result = provider_service.initiate_call(contact_phone, params[:sdp_offer])
     provider_call_id = result.dig('calls', 0, 'id') || result['call_id']
 
+    @conversation.with_lock { @conversation.update!(assignee: Current.user) } if claim_for_caller
+
     Current.account.calls.create!(
       provider: :whatsapp, inbox: @conversation.inbox, conversation: @conversation, contact: @conversation.contact,
       provider_call_id: provider_call_id, direction: :outgoing, status: 'ringing',
@@ -190,4 +196,9 @@ class Api::V1::Accounts::WhatsappCallsController < Api::V1::Accounts::BaseContro
   def render_call_error(error)
     render_could_not_create_error(error.message)
   end
+
+  # 409 (not 422) so the FE can tell "already ended" from a generic failure and dismiss the ringing UI.
+  def render_call_ended
+    render json: { error: I18n.t('errors.whatsapp.calls.already_ended') }, status: :conflict
+  end
 end

enterprise/app/controllers/super_admin/email_layouts_controller.rb

@@ -0,0 +1,280 @@
+class SuperAdmin::EmailLayoutsController < SuperAdmin::EnterpriseBaseController
+  before_action :set_account
+  before_action :set_custom_templates
+  before_action :set_template_selection
+  before_action :set_email_layout
+  before_action :ensure_custom_branding_access!
+
+  def edit
+    @show_template_editor = editor_requested?
+    return unless @show_template_editor
+
+    @layout_body = @email_layout&.body || inherited_template_body
+    set_preview_context
+  end
+
+  def update
+    @layout_body = layout_params[:body].to_s
+    validation_error = validate_layout_body(@layout_body)
+
+    return render_edit_with_alert(validation_error) if validation_error.present?
+
+    return render_edit_with_alert(conflict_error) if conflicting_template_exists?
+
+    @email_layout ||= EmailTemplate.new(name: template_name, template_type: template_type, locale: template_locale, account: @account)
+    @email_layout.body = @layout_body
+
+    if @email_layout.save
+      # rubocop:disable Rails/I18nLocaleTexts
+      redirect_to edit_email_layout_path, notice: 'Email layout updated successfully'
+      # rubocop:enable Rails/I18nLocaleTexts
+    else
+      render_edit_with_alert(@email_layout.errors.full_messages.join(', '))
+    end
+  end
+
+  def destroy
+    @email_layout&.destroy
+    redirect_to email_layout_overview_path, notice: reset_notice
+  end
+
+  private
+
+  def set_account
+    @account = Account.find(params[:account_id]) if params[:account_id].present?
+  end
+
+  def set_custom_templates
+    @custom_templates = EmailTemplate.where(account: @account).order(:template_type, :name, :locale)
+  end
+
+  def set_template_selection
+    @template_type = selected_template_type
+    @template_name = selected_template_name
+    @template_locale = selected_template_locale
+    @template_options = template_options
+    @locale_options = locale_options
+  end
+
+  def set_email_layout
+    @email_layout = EmailTemplate.find_by(name: template_name, template_type: template_type, locale: template_locale, account: @account)
+  end
+
+  attr_reader :template_name, :template_type, :template_locale
+
+  def default_layout_body
+    Rails.root.join('app/views/layouts/mailer/base.liquid').read
+  end
+
+  def default_content_body
+    content_template_path.read
+  end
+
+  def inherited_template_body
+    return global_template_body || default_template_body if @account.present?
+
+    default_template_body
+  end
+
+  def default_template_body
+    return default_layout_body if template_type == 'layout'
+
+    default_content_body
+  end
+
+  def global_template_body
+    EmailTemplate.find_by(name: template_name, template_type: template_type, locale: template_locale, account: nil)&.body
+  end
+
+  def layout_params
+    params.require(:email_layout).permit(:body, :template_type, :template_name, :locale)
+  end
+
+  def validate_layout_body(body)
+    return 'Template body cannot be blank' if body.blank?
+    return 'Layout must include {{ content_for_layout }}' if template_type == 'layout' && !body.match?(/\{\{\s*content_for_layout\s*\}\}/)
+
+    Liquid::Template.parse(body)
+    nil
+  rescue Liquid::SyntaxError => e
+    "Liquid syntax error: #{e.message}"
+  end
+
+  def render_edit_with_alert(message)
+    flash.now[:alert] = message
+    @show_template_editor = true
+    set_preview_context
+    render :edit, status: :unprocessable_entity
+  end
+
+  def set_preview_context
+    @preview_html = render_preview(@layout_body)
+    @supported_variables = supported_variables
+    @template_status = template_status
+    @preview_config = preview_config
+  rescue Liquid::SyntaxError
+    @preview_html = ''
+    @supported_variables = supported_variables
+    @template_status = template_status
+    @preview_config = preview_config
+  end
+
+  def render_preview(body)
+    assigns = {
+      'content_for_layout' => preview_content,
+      'global_config' => GlobalConfig.get('BRAND_NAME', 'BRAND_URL')
+    }
+    assigns['account'] = { 'name' => @account.name } if @account.present?
+
+    rendered_body = Liquid::Template.parse(body).render(assigns)
+    return rendered_body if template_type == 'layout'
+
+    Liquid::Template.parse(default_layout_body).render(assigns.merge('content_for_layout' => rendered_body))
+  end
+
+  def preview_content
+    <<~HTML
+      <tr>
+        <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; padding: 0;">
+          <h1 style="font-size: 20px; margin: 0 0 12px;">Sample notification</h1>
+          <p style="margin: 0 0 16px;">This preview shows how notification content renders inside your email layout.</p>
+          <a href="#" style="display: inline-block; background: #1f93ff; color: #fff; padding: 10px 14px; border-radius: 6px; text-decoration: none;">View conversation</a>
+        </td>
+      </tr>
+    HTML
+  end
+
+  def preview_config
+    brand_config = GlobalConfig.get('BRAND_NAME', 'BRAND_URL')
+    {
+      templateType: template_type,
+      defaultLayout: default_layout_body,
+      previewContent: preview_content,
+      brandName: brand_config['BRAND_NAME'].to_s,
+      brandUrl: brand_config['BRAND_URL'].to_s,
+      accountName: @account&.name.to_s
+    }
+  end
+
+  def supported_variables
+    variables = []
+    if template_type == 'layout'
+      variables << {
+        variable: '{{ content_for_layout }}',
+        description: 'Required. Renders the email body inside the layout.'
+      }
+    end
+
+    variables + [
+      {
+        variable: "{{ global_config['BRAND_NAME'] }}",
+        description: 'Current brand name from Custom Branding.'
+      },
+      {
+        variable: "{{ global_config['BRAND_URL'] }}",
+        description: 'Current brand URL from Custom Branding.'
+      }
+    ].tap do |template_variables|
+      next if @account.blank?
+
+      template_variables << {
+        variable: '{{ account.name }}',
+        description: 'Current account name for account-specific previews.'
+      }
+    end
+  end
+
+  def conflict_error
+    "Cannot save template. '#{template_name}' is already used by another email template for this account, type, and language."
+  end
+
+  def conflicting_template_exists?
+    return false if @email_layout.present?
+
+    EmailTemplate.exists?(name: template_name, template_type: template_type, locale: template_locale, account: @account)
+  end
+
+  def edit_email_layout_path
+    query = { template_type: template_type, template_name: template_name, locale: template_locale }
+    return edit_super_admin_account_email_layout_path(@account, query) if @account.present?
+
+    edit_super_admin_email_layout_path(query)
+  end
+
+  def email_layout_overview_path
+    return edit_super_admin_account_email_layout_path(@account) if @account.present?
+
+    edit_super_admin_email_layout_path
+  end
+
+  def editor_requested?
+    params[:new].present? || params[:template_type].present? || params[:template_name].present? || params[:locale].present?
+  end
+
+  def reset_notice
+    return 'Account email template reset to inherited template' if @account.present?
+
+    'Email template reset to default'
+  end
+
+  def ensure_custom_branding_access!
+    return if ChatwootHub.pricing_plan != 'community'
+
+    invalid_action_perfomed
+  end
+
+  def selected_template_type
+    selected_type = params.dig(:email_layout, :template_type).presence || params[:template_type].presence || 'layout'
+    EmailTemplate.template_types.key?(selected_type) ? selected_type : 'layout'
+  end
+
+  def selected_template_name
+    selected_name = params.dig(:email_layout, :template_name).presence || params[:template_name].presence
+    selected_name = default_template_name if selected_name.blank?
+    available_template_names.include?(selected_name) ? selected_name : default_template_name
+  end
+
+  def selected_template_locale
+    selected_locale = params.dig(:email_layout, :locale).presence || params[:locale].presence || 'en'
+    EmailTemplate.locales.key?(selected_locale) ? selected_locale : 'en'
+  end
+
+  def default_template_name
+    return 'base' if template_type == 'layout'
+
+    content_template_options.first[:name]
+  end
+
+  def template_options
+    return [{ name: 'base', label: 'Base layout' }] if template_type == 'layout'
+
+    content_template_options
+  end
+
+  def available_template_names
+    template_options.pluck(:name)
+  end
+
+  def content_template_options
+    @content_template_options ||= Rails.root.glob('app/views/mailers/**/*.liquid').map do |path|
+      name = path.relative_path_from(Rails.root.join('app/views/mailers')).to_s.delete_suffix('.liquid')
+      { name: name, label: name.humanize }
+    end.sort_by { |template| template[:label] }
+  end
+
+  def content_template_path
+    Rails.root.join('app/views/mailers', "#{template_name}.liquid")
+  end
+
+  def locale_options
+    EmailTemplate.locales.keys.map { |locale| [locale.upcase, locale] }
+  end
+
+  def template_status
+    return 'Account override configured' if @account.present? && @email_layout.present?
+    return 'Global override configured' if @account.blank? && @email_layout.present?
+    return 'Inherits global template' if @account.present? && global_template_body.present?
+
+    'Inherits default template'
+  end
+end

enterprise/app/finders/enterprise/conversation_finder.rb

@@ -1,5 +1,7 @@
 module Enterprise::ConversationFinder
   def conversations_base_query
-    current_account.feature_enabled?('sla') ? super.includes(:applied_sla, :sla_events) : super
+    return super unless current_account.feature_enabled?('sla')
+
+    super.includes(:applied_sla, :sla_events, inbox: :working_hours)
   end
 end

enterprise/app/helpers/captain/chat_helper.rb

@@ -96,7 +96,7 @@ module Captain::ChatHelper
   end
 
   def temperature
-    @assistant&.config&.[]('temperature').to_f || 1
+    @assistant&.config&.[]('temperature').presence&.to_f || 0.5
   end
 
   def resolved_account_id

enterprise/app/jobs/onboarding/help_center_article_writer_job.rb

@@ -1,6 +1,21 @@
 class Onboarding::HelpCenterArticleWriterJob < ApplicationJob
   queue_as :low
 
+  # Catch-all so no exception type can wedge the generation in "generating".
+  # Declared FIRST because ActiveJob searches rescue handlers bottom-to-top:
+  # this puts StandardError at the bottom of the search order, so the specific
+  # retry_on/discard_on handlers declared below match first for their types.
+  #
+  # Without this, any error that isn't FirecrawlError or ArticleBuildFailed
+  # (e.g. ActiveRecord::RecordInvalid, SSL errors) falls through to ActiveJob's
+  # default retries, exhausts them, and lands in the dead set without ever
+  # calling finalize -> state stays "generating" at total - 1 until the 7-day
+  # Redis TTL expires. on_writer_failure logs the error, so code bugs are still
+  # visible; it just also progresses the state.
+  discard_on StandardError do |job, error|
+    job.send(:on_writer_failure, error)
+  end
+
   retry_on Firecrawl::FirecrawlError, wait: :polynomially_longer, attempts: 3 do |job, error|
     job.send(:on_writer_failure, error)
   end

enterprise/app/jobs/sla/process_account_applied_slas_job.rb

@@ -2,7 +2,7 @@ class Sla::ProcessAccountAppliedSlasJob < ApplicationJob
   queue_as :medium
 
   def perform(account)
-    account.applied_slas.where(sla_status: %w[active active_with_misses]).each do |applied_sla|
+    account.applied_slas.with_sla_applicable_conversation.where(sla_status: %w[active active_with_misses]).each do |applied_sla|
       Sla::ProcessAppliedSlaJob.perform_later(applied_sla)
     end
   end

enterprise/app/models/applied_sla.rb

@@ -40,10 +40,13 @@ class AppliedSla < ApplicationRecord
                                         joins(:conversation).where(conversations: { assignee_id: assigned_agent_id }) if assigned_agent_id.present?
                                       }
   scope :missed, -> { where(sla_status: %i[missed active_with_misses]) }
+  scope :with_sla_applicable_conversation, -> { where(conversation_id: Conversation.with_sla_applicable_contact.select(:id)) }
 
   after_update_commit :push_conversation_event
 
   def push_event_data
+    sla_due_at_values = due_at_values
+
     {
       id: id,
       sla_id: sla_policy_id,
@@ -55,10 +58,65 @@ class AppliedSla < ApplicationRecord
       sla_first_response_time_threshold: sla_policy.first_response_time_threshold,
       sla_next_response_time_threshold: sla_policy.next_response_time_threshold,
       sla_only_during_business_hours: sla_policy.only_during_business_hours,
-      sla_resolution_time_threshold: sla_policy.resolution_time_threshold
+      sla_resolution_time_threshold: sla_policy.resolution_time_threshold,
+      sla_frt_due_at: sla_due_at_values[:frt],
+      sla_nrt_due_at: sla_due_at_values[:nrt],
+      sla_rt_due_at: sla_due_at_values[:rt]
     }
   end
 
+  def due_at_values
+    working_hours_by_day_cache = conversation.inbox.working_hours.index_by(&:day_of_week) if sla_policy.only_during_business_hours?
+
+    {
+      frt: frt_due_at(working_hours_by_day_cache: working_hours_by_day_cache),
+      nrt: nrt_due_at(working_hours_by_day_cache: working_hours_by_day_cache),
+      rt: rt_due_at(working_hours_by_day_cache: working_hours_by_day_cache)
+    }
+  end
+
+  def frt_due_at(working_hours_by_day_cache: nil)
+    return nil if sla_policy.first_response_time_threshold.blank?
+
+    calculate_due_at(
+      conversation.created_at,
+      sla_policy.first_response_time_threshold,
+      working_hours_by_day_cache: working_hours_by_day_cache
+    )
+  end
+
+  def nrt_due_at(working_hours_by_day_cache: nil)
+    return nil if sla_policy.next_response_time_threshold.blank?
+    return nil if conversation.waiting_since.blank?
+
+    calculate_due_at(
+      conversation.waiting_since,
+      sla_policy.next_response_time_threshold,
+      working_hours_by_day_cache: working_hours_by_day_cache
+    )
+  end
+
+  def rt_due_at(working_hours_by_day_cache: nil)
+    return nil if sla_policy.resolution_time_threshold.blank?
+
+    calculate_due_at(
+      conversation.created_at,
+      sla_policy.resolution_time_threshold,
+      working_hours_by_day_cache: working_hours_by_day_cache
+    )
+  end
+
+  def calculate_due_at(start_time, threshold_seconds, working_hours_by_day_cache: nil)
+    return (start_time + threshold_seconds.to_i.seconds).to_i unless sla_policy.only_during_business_hours?
+
+    Sla::BusinessHoursService.new(
+      inbox: conversation.inbox,
+      start_time: start_time,
+      threshold_seconds: threshold_seconds,
+      working_hours_by_day_cache: working_hours_by_day_cache
+    ).deadline.to_i
+  end
+
   private
 
   def push_conversation_event

enterprise/app/models/concerns/agentable.rb

@@ -1,13 +1,15 @@
 module Concerns::Agentable
   extend ActiveSupport::Concern
 
+  DEFAULT_TEMPERATURE = 0.5
+
   def agent
     Agents::Agent.new(
       name: agent_name,
       instructions: ->(context) { agent_instructions(context) },
       tools: agent_tools,
       model: agent_model,
-      temperature: temperature.to_f || 0.7,
+      temperature: temperature.presence&.to_f || DEFAULT_TEMPERATURE,
       response_schema: agent_response_schema
     )
   end

enterprise/app/models/enterprise/concerns/article.rb

@@ -67,7 +67,7 @@ module Enterprise::Concerns::Article
       { role: 'system', content: article_to_search_terms_prompt },
       { role: 'user', content: "title: #{title} \n description: #{description} \n content: #{content}" }
     ]
-    headers = { 'Content-Type' => 'application/json', 'Authorization' => "Bearer #{ENV.fetch('OPENAI_API_KEY', nil)}" }
+    headers = { 'Content-Type' => 'application/json', 'Authorization' => "Bearer #{openai_api_key}" }
     body = { model: 'gpt-4o', messages: messages, response_format: { type: 'json_object' } }.to_json
     Rails.logger.info "Requesting Chat GPT with body: #{body}"
     response = HTTParty.post(openai_api_url, headers: headers, body: body)
@@ -77,8 +77,12 @@ module Enterprise::Concerns::Article
 
   private
 
+  def openai_api_key
+    InstallationConfig.find_by(name: 'CAPTAIN_OPEN_AI_API_KEY')&.value.presence || raise(I18n.t('captain.api_key_missing'))
+  end
+
   def openai_api_url
-    endpoint = InstallationConfig.find_by(name: 'CAPTAIN_OPEN_AI_ENDPOINT')&.value || 'https://api.openai.com/'
+    endpoint = InstallationConfig.find_by(name: 'CAPTAIN_OPEN_AI_ENDPOINT')&.value.presence || 'https://api.openai.com/'
     endpoint = endpoint.chomp('/')
     "#{endpoint}/v1/chat/completions"
   end

enterprise/app/models/enterprise/concerns/conversation.rb

@@ -7,10 +7,16 @@ module Enterprise::Concerns::Conversation
     has_many :sla_events, dependent: :destroy_async
     has_many :calls, dependent: :destroy_async
     has_many :captain_responses, class_name: 'Captain::AssistantResponse', dependent: :nullify, as: :documentable
+    scope :with_sla_applicable_contact, -> { left_joins(:contact).where(contacts: { blocked: [false, nil] }) }
+
     before_validation :validate_sla_policy, if: -> { sla_policy_id_changed? }
     around_save :ensure_applied_sla_is_created, if: -> { sla_policy_id_changed? }
   end
 
+  def sla_applicable?
+    !contact&.blocked?
+  end
+
   private
 
   def validate_sla_policy
@@ -20,6 +26,11 @@ module Enterprise::Concerns::Conversation
       return
     end
 
+    unless sla_applicable?
+      errors.add(:sla_policy, 'cannot be assigned to conversations with blocked contacts')
+      return
+    end
+
     if changes[:sla_policy_id].first.present?
       errors.add(:sla_policy, 'conversation already has a different sla')
       return

enterprise/app/presenters/enterprise/conversations/event_data_presenter.rb

@@ -1,13 +1,13 @@
 module Enterprise::Conversations::EventDataPresenter
   def push_data
-    if account.feature_enabled?('sla')
-      super.merge(
-        applied_sla: applied_sla&.push_event_data,
-        sla_events: sla_events.map(&:push_event_data),
-        sla_policy_id: sla_policy_id
-      )
-    else
-      super
-    end
+    return super unless account.feature_enabled?('sla')
+
+    sla_applicable = sla_applicable?
+
+    super.merge(
+      applied_sla: sla_applicable ? applied_sla&.push_event_data : nil,
+      sla_events: sla_applicable ? sla_events.map(&:push_event_data) : [],
+      sla_policy_id: sla_applicable ? sla_policy_id : nil
+    )
   end
 end

enterprise/app/services/enterprise/action_service.rb

@@ -5,6 +5,7 @@ module Enterprise::ActionService
     sla_policy = @account.sla_policies.find_by(id: sla_policy_id.first)
     return if sla_policy.nil?
     return if @conversation.sla_policy.present?
+    return unless @conversation.sla_applicable?
 
     Rails.logger.info "SLA:: Adding SLA #{sla_policy.id} to conversation: #{@conversation.id}"
     @conversation.update!(sla_policy_id: sla_policy.id)

enterprise/app/services/sla/business_hours_service.rb

@@ -0,0 +1,108 @@
+class Sla::BusinessHoursService
+  pattr_initialize [:inbox!, :start_time!, :threshold_seconds!, { working_hours_by_day_cache: nil }]
+
+  def deadline
+    return start_time + threshold_seconds.seconds unless should_apply_business_hours?
+
+    calculate_deadline_with_business_hours
+  end
+
+  private
+
+  def should_apply_business_hours?
+    inbox.working_hours_enabled? && open_days?
+  end
+
+  def open_days?
+    working_hours_by_day.values.any? { |working_hour| !working_hour.closed_all_day? }
+  end
+
+  def calculate_deadline_with_business_hours
+    @remaining_seconds = threshold_seconds.to_i
+    @current_time = start_time.in_time_zone(timezone)
+
+    process_remaining_seconds while @remaining_seconds.positive?
+
+    @current_time
+  end
+
+  def process_remaining_seconds
+    working_hour = working_hour_for(@current_time)
+
+    if closed_day?(working_hour)
+      @current_time = next_business_day_start(@current_time)
+      return
+    end
+
+    # If adjust moved to next day, return early to re-fetch correct working hours
+    return unless adjust_current_time_to_business_hours(working_hour)
+
+    consume_available_seconds(working_hour)
+  end
+
+  def closed_day?(working_hour)
+    working_hour.nil? || working_hour.closed_all_day?
+  end
+
+  # Returns true if current_time was adjusted within the same day, false if moved to next day
+  def adjust_current_time_to_business_hours(working_hour)
+    day_open_time = time_on_date(@current_time, working_hour.open_hour, working_hour.open_minutes)
+    day_close_time = day_close_time_for(working_hour)
+
+    if @current_time < day_open_time
+      @current_time = day_open_time
+      true
+    elsif @current_time >= day_close_time
+      @current_time = next_business_day_start(@current_time)
+      false
+    else
+      true
+    end
+  end
+
+  def consume_available_seconds(working_hour)
+    day_close_time = day_close_time_for(working_hour)
+    available_seconds = (day_close_time - @current_time).to_i
+
+    if @remaining_seconds <= available_seconds
+      @current_time += @remaining_seconds.seconds
+      @remaining_seconds = 0
+    else
+      @remaining_seconds -= available_seconds
+      @current_time = next_business_day_start(@current_time)
+    end
+  end
+
+  def day_close_time_for(working_hour)
+    return @current_time.beginning_of_day + 1.day if working_hour.open_all_day?
+
+    time_on_date(@current_time, working_hour.close_hour, working_hour.close_minutes)
+  end
+
+  def working_hour_for(time)
+    working_hours_by_day[time.wday]
+  end
+
+  def working_hours_by_day
+    @working_hours_by_day ||= working_hours_by_day_cache || inbox.working_hours.index_by(&:day_of_week)
+  end
+
+  def next_business_day_start(current_time)
+    next_day = (current_time + 1.day).beginning_of_day
+    7.times do
+      working_hour = working_hour_for(next_day)
+      return time_on_date(next_day, working_hour.open_hour, working_hour.open_minutes) if working_hour && !working_hour.closed_all_day?
+
+      next_day += 1.day
+    end
+    next_day
+  end
+
+  def time_on_date(date, hour, minutes)
+    date.change(hour: hour, min: minutes, sec: 0)
+  end
+
+  def timezone
+    inbox.timezone || 'UTC'
+  end
+end

enterprise/app/services/sla/evaluate_applied_sla_service.rb

@@ -2,106 +2,103 @@ class Sla::EvaluateAppliedSlaService
   pattr_initialize [:applied_sla!]
 
   def perform
-    check_sla_thresholds
+    return unless conversation.sla_applicable?
 
-    # We will calculate again in the next iteration
-    return unless applied_sla.conversation.resolved?
+    check_frt
+    check_nrt
+    check_rt
 
-    # after conversation is resolved, we will check if the SLA was hit or missed
-    handle_hit_sla(applied_sla)
+    return unless conversation.resolved?
+
+    handle_hit_sla
   end
 
   private
 
-  def check_sla_thresholds
-    [:first_response_time_threshold, :next_response_time_threshold, :resolution_time_threshold].each do |threshold|
-      next if applied_sla.sla_policy.send(threshold).blank?
+  delegate :conversation, :sla_policy, to: :applied_sla
 
-      send("check_#{threshold}", applied_sla, applied_sla.conversation, applied_sla.sla_policy)
+  def check_frt
+    return if sla_policy.first_response_time_threshold.blank?
+    return if frt_was_hit?
+    return if within_threshold?(applied_sla.frt_due_at)
+
+    handle_missed_sla('frt')
+  end
+
+  def check_nrt
+    return if sla_policy.next_response_time_threshold.blank?
+    return if conversation.first_reply_created_at.blank?
+    return if conversation.waiting_since.blank?
+    return if within_threshold?(applied_sla.nrt_due_at)
+
+    handle_missed_sla('nrt')
+  end
+
+  def check_rt
+    return if sla_policy.resolution_time_threshold.blank?
+    return if conversation.resolved?
+    return if within_threshold?(applied_sla.rt_due_at)
+
+    handle_missed_sla('rt')
+  end
+
+  def within_threshold?(due_at)
+    Time.zone.now.to_i < due_at
+  end
+
+  def frt_was_hit?
+    return false if applied_sla.frt_due_at.blank?
+    return false if conversation.first_reply_created_at.blank?
+
+    conversation.first_reply_created_at.to_i <= applied_sla.frt_due_at
+  end
+
+  def handle_missed_sla(type)
+    meta = type == 'nrt' ? { message_id: last_incoming_message_id } : {}
+    return if already_missed?(type, meta)
+
+    create_sla_event(type, meta)
+    log_miss(type)
+    applied_sla.update!(sla_status: 'active_with_misses') unless applied_sla.active_with_misses?
+  end
+
+  def handle_hit_sla
+    if applied_sla.active?
+      applied_sla.update!(sla_status: 'hit')
+      log_result('hit')
+    else
+      applied_sla.update!(sla_status: 'missed')
+      log_result('missed')
     end
   end
 
-  def still_within_threshold?(threshold)
-    Time.zone.now.to_i < threshold
-  end
-
-  def check_first_response_time_threshold(applied_sla, conversation, sla_policy)
-    threshold = conversation.created_at.to_i + sla_policy.first_response_time_threshold.to_i
-    return if first_reply_was_within_threshold?(conversation, threshold)
-    return if still_within_threshold?(threshold)
-
-    handle_missed_sla(applied_sla, 'frt')
-  end
-
-  def first_reply_was_within_threshold?(conversation, threshold)
-    conversation.first_reply_created_at.present? && conversation.first_reply_created_at.to_i <= threshold
-  end
-
-  def check_next_response_time_threshold(applied_sla, conversation, sla_policy)
-    # still waiting for first reply, so covered under first response time threshold
-    return if conversation.first_reply_created_at.blank?
-    # Waiting on customer response, no need to check next response time threshold
-    return if conversation.waiting_since.blank?
-
-    threshold = conversation.waiting_since.to_i + sla_policy.next_response_time_threshold.to_i
-    return if still_within_threshold?(threshold)
-
-    handle_missed_sla(applied_sla, 'nrt')
-  end
-
-  def get_last_message_id(conversation)
-    # TODO: refactor the method to fetch last message without reply
-    conversation.messages.where(message_type: :incoming).last&.id
-  end
-
-  def already_missed?(applied_sla, type, meta = {})
+  def already_missed?(type, meta)
     SlaEvent.exists?(applied_sla: applied_sla, event_type: type, meta: meta)
   end
 
-  def check_resolution_time_threshold(applied_sla, conversation, sla_policy)
-    return if conversation.resolved?
-
-    threshold = conversation.created_at.to_i + sla_policy.resolution_time_threshold.to_i
-    return if still_within_threshold?(threshold)
-
-    handle_missed_sla(applied_sla, 'rt')
+  def last_incoming_message_id
+    Message.where(account_id: conversation.account_id, conversation_id: conversation.id, message_type: :incoming).last&.id
   end
 
-  def handle_missed_sla(applied_sla, type, meta = {})
-    meta = { message_id: get_last_message_id(applied_sla.conversation) } if type == 'nrt'
-    return if already_missed?(applied_sla, type, meta)
-
-    create_sla_event(applied_sla, type, meta)
-    Rails.logger.warn "SLA #{type} missed for conversation #{applied_sla.conversation.id} " \
-                      "in account #{applied_sla.account_id} " \
-                      "for sla_policy #{applied_sla.sla_policy.id}"
-
-    applied_sla.update!(sla_status: 'active_with_misses') if applied_sla.sla_status != 'active_with_misses'
-  end
-
-  def handle_hit_sla(applied_sla)
-    if applied_sla.active?
-      applied_sla.update!(sla_status: 'hit')
-      Rails.logger.info "SLA hit for conversation #{applied_sla.conversation.id} " \
-                        "in account #{applied_sla.account_id} " \
-                        "for sla_policy #{applied_sla.sla_policy.id}"
-    else
-      applied_sla.update!(sla_status: 'missed')
-      Rails.logger.info "SLA missed for conversation #{applied_sla.conversation.id} " \
-                        "in account #{applied_sla.account_id} " \
-                        "for sla_policy #{applied_sla.sla_policy.id}"
-    end
-  end
-
-  def create_sla_event(applied_sla, event_type, meta = {})
+  def create_sla_event(event_type, meta)
     SlaEvent.create!(
       applied_sla: applied_sla,
-      conversation: applied_sla.conversation,
+      conversation: conversation,
       event_type: event_type,
       meta: meta,
       account: applied_sla.account,
-      inbox: applied_sla.conversation.inbox,
-      sla_policy: applied_sla.sla_policy
+      inbox: conversation.inbox,
+      sla_policy: sla_policy
     )
   end
+
+  def log_miss(type)
+    Rails.logger.warn "SLA #{type} missed for conversation #{conversation.id} " \
+                      "in account #{applied_sla.account_id} for sla_policy #{sla_policy.id}"
+  end
+
+  def log_result(result)
+    Rails.logger.info "SLA #{result} for conversation #{conversation.id} " \
+                      "in account #{applied_sla.account_id} for sla_policy #{sla_policy.id}"
+  end
 end

enterprise/app/services/voice/outbound_call_builder.rb

@@ -17,10 +17,19 @@ class Voice::OutboundCallBuilder
     raise ArgumentError, 'Contact phone number required' if contact.phone_number.blank?
     raise ArgumentError, 'Agent required' if user.blank?
 
+    # Claim for the caller if a reused conversation is unassigned at trigger time; wins over auto-assignment.
+    # New conversations set the assignee at creation instead (see create_conversation!).
+    claim_for_caller = @existing_conversation && @existing_conversation.assignee_id.nil?
+
     ActiveRecord::Base.transaction do
       contact_inbox = ensure_contact_inbox!
       conversation = @existing_conversation || create_conversation!(contact_inbox)
+      # Dial before locking so the Twilio round-trip doesn't hold the conversation row lock.
       call_sid = initiate_call!
+      if claim_for_caller
+        @existing_conversation.lock!
+        @existing_conversation.update!(assignee: user)
+      end
       call = create_call!(conversation, call_sid)
       message = Voice::CallMessageBuilder.new(call).perform!
       call.update!(message_id: message.id)
@@ -44,6 +53,7 @@ class Voice::OutboundCallBuilder
       contact_inbox_id: contact_inbox.id,
       inbox_id: inbox.id,
       contact_id: contact.id,
+      assignee_id: user.id,
       status: :open
     )
   end

enterprise/app/services/whatsapp/call_service.rb

@@ -48,9 +48,10 @@ class Whatsapp::CallService
   private
 
   def transition_to_in_progress!
-    # Order matters: in_progress and terminal both make ringing? false, so we have to
-    # branch on in_progress? first to surface the distinct AlreadyAccepted state.
+    # in_progress and terminal both make ringing? false; branch in order to surface the
+    # distinct AlreadyAccepted / CallAlreadyEnded states (caller can hang up mid-ring).
     raise Voice::CallErrors::AlreadyAccepted, 'Call already accepted by another agent' if call.in_progress?
+    raise Voice::CallErrors::CallAlreadyEnded, 'Call already ended' if call.terminal?
     raise Voice::CallErrors::NotRinging, 'Call is not in ringing state' unless call.ringing?
 
     forward_answer_to_meta!

enterprise/app/services/whatsapp/incoming_call_service.rb

@@ -1,6 +1,9 @@
 class Whatsapp::IncomingCallService
   pattr_initialize [:inbox!, :params!]
 
+  # Lifespan of a terminate-before-connect tombstone; the paired connect arrives within ~1s.
+  TERMINATE_TOMBSTONE_TTL = 60
+
   def perform
     return unless inbox.channel.voice_enabled?
 
@@ -79,16 +82,32 @@ class Whatsapp::IncomingCallService
     end
 
     sdp_offer = payload.dig(:session, :sdp)
+    call = build_inbound_call(payload, sdp_offer)
+
+    return if call.terminal? # terminated before pickup; no ringing widget to surface
+
+    update_conversation(call)
+    broadcast_incoming(call, sdp_offer)
+  end
+
+  # If a terminate already arrived (caller hung up before pickup), finalize it in the
+  # SAME transaction as the build so the message's after_create_commit fires (at outer
+  # commit) already terminal, never `ringing` — agents aren't rung for a dead call.
+  def build_inbound_call(payload, sdp_offer)
+    ActiveRecord::Base.transaction do
+      call = Voice::InboundCallBuilder.perform!(inbox: inbox, from_number: "+#{payload[:from]}", call_sid: payload[:id],
+                                                provider: :whatsapp, extra_meta: inbound_extra_meta(payload, sdp_offer))
+      tombstone = consume_terminate_tombstone(payload[:id])
+      finalize_terminate(call, tombstone['duration'], tombstone['terminate_reason']) if tombstone
+      call
+    end
+  end
+
+  def inbound_extra_meta(payload, sdp_offer)
     extra_meta = { 'sdp_offer' => sdp_offer, 'ice_servers' => Call.default_ice_servers }
     name = caller_profile_name(payload)
     extra_meta['contact_name'] = name if name.present?
-
-    call = Voice::InboundCallBuilder.perform!(
-      inbox: inbox, from_number: "+#{payload[:from]}", call_sid: payload[:id],
-      provider: :whatsapp, extra_meta: extra_meta
-    )
-    update_conversation(call)
-    broadcast_incoming(call, sdp_offer)
+    extra_meta
   end
 
   # Match strictly on wa_id (== calls[].from): in a batched payload missing this
@@ -122,23 +141,24 @@ class Whatsapp::IncomingCallService
   def handle_terminate(payload)
     call = Call.whatsapp.find_by(provider_call_id: payload[:id])
     if call.nil?
-      # No row yet means either an out-of-order terminate (rare in practice — Meta
-      # delivery is FIFO) or, more dangerously, an outbound terminate landing in
-      # the window between the controller's Meta API call and Call.create!.
-      # Materialising as inbound here would collide with the unique
-      # (provider, provider_call_id) index. Skip; controller commits seal it.
-      Rails.logger.warn "[WHATSAPP CALL] Terminate for unknown call #{payload[:id]}; skipping"
+      # Terminate overtook its connect (Meta isn't strictly ordered); tombstone it for the
+      # connect handler to consume. An outbound tombstone just expires unused.
+      record_terminate_tombstone(payload)
       return
     end
 
+    finalize_terminate(call, payload[:duration], payload[:terminate_reason])
+  end
+
+  def finalize_terminate(call, duration, reason)
+    duration = duration&.to_i
+    reason = reason.to_s
     call.with_lock do
       # Webhook retries can re-deliver terminate after we've already finalized the
       # call; don't recompute status or a duration=0 retry can flip a completed
       # short call back to no_answer.
       next if call.terminal?
 
-      duration = payload[:duration]&.to_i
-      reason = payload[:terminate_reason].to_s
       status = derive_terminate_status(call, duration, reason)
       meta = (call.meta || {}).merge('ended_at' => Time.zone.now.to_i)
       update_call!(call, status, duration_seconds: duration, end_reason: reason, meta: meta)
@@ -146,6 +166,28 @@ class Whatsapp::IncomingCallService
     end
   end
 
+  def record_terminate_tombstone(payload)
+    Redis::Alfred.setex(
+      terminate_tombstone_key(payload[:id]),
+      { 'duration' => payload[:duration], 'terminate_reason' => payload[:terminate_reason] }.to_json,
+      TERMINATE_TOMBSTONE_TTL
+    )
+    Rails.logger.info "[WHATSAPP CALL] Terminate before connect for #{payload[:id]}; tombstoned"
+  end
+
+  def consume_terminate_tombstone(provider_call_id)
+    key = terminate_tombstone_key(provider_call_id)
+    raw = Redis::Alfred.get(key)
+    return nil if raw.blank?
+
+    Redis::Alfred.delete(key)
+    JSON.parse(raw)
+  end
+
+  def terminate_tombstone_key(provider_call_id)
+    format(Redis::Alfred::WHATSAPP_CALL_TERMINATE_TOMBSTONE, call_id: provider_call_id)
+  end
+
   # Provider-reported failures trump the answered/no_answer heuristic. An
   # in_progress call that Meta later terminates with a failure reason would
   # otherwise be recorded as 'completed' purely because it had been accepted.

enterprise/app/views/api/v1/models/_applied_sla.json.jbuilder

@@ -9,3 +9,7 @@ json.sla_first_response_time_threshold resource.sla_policy.first_response_time_t
 json.sla_next_response_time_threshold resource.sla_policy.next_response_time_threshold
 json.sla_only_during_business_hours resource.sla_policy.only_during_business_hours
 json.sla_resolution_time_threshold resource.sla_policy.resolution_time_threshold
+sla_due_at_values = resource.due_at_values
+json.sla_frt_due_at sla_due_at_values[:frt]
+json.sla_nrt_due_at sla_due_at_values[:nrt]
+json.sla_rt_due_at sla_due_at_values[:rt]

enterprise/app/views/enterprise/api/v1/conversations/partials/_conversation.json.jbuilder

@@ -1,10 +1,15 @@
 if conversation.account.feature_enabled?('sla')
-  json.applied_sla do
-    json.partial! 'api/v1/models/applied_sla', formats: [:json], resource: conversation.applied_sla if conversation.applied_sla.present?
-  end
-  json.sla_events do
-    json.array! conversation.sla_events do |sla_event|
-      json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+  if conversation.sla_applicable?
+    json.applied_sla do
+      json.partial! 'api/v1/models/applied_sla', formats: [:json], resource: conversation.applied_sla if conversation.applied_sla.present?
     end
+    json.sla_events do
+      json.array! conversation.sla_events do |sla_event|
+        json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+      end
+    end
+  else
+    json.applied_sla nil
+    json.sla_events []
   end
 end

enterprise/app/views/fields/account_features_field/_show.html.erb

@@ -30,5 +30,22 @@
         </span>
       </div>
     <% end %>
+
+    <% if ChatwootHub.pricing_plan != 'community' %>
+      <div class="flex items-center justify-between p-3 bg-white rounded-md outline outline-n-container outline-1 shadow-sm">
+        <div class="flex items-center gap-2">
+          <span class="bg-n-amber-3 text-n-amber-12 rounded-full p-1 inline-flex right-4 top-5">
+            <svg width="12" height="12"><use xlink:href="#icon-lock-line" /></svg>
+          </span>
+          <span class="text-sm text-n-slate-12">Account Email Templates</span>
+        </div>
+        <%= link_to edit_super_admin_account_email_layout_path(field.resource),
+                    aria: { label: 'Customize account email templates' },
+                    title: 'Customize account email templates',
+                    class: 'inline-flex rounded-full bg-slate-50 p-1 text-slate-800 hover:bg-n-slate-4 hover:text-n-slate-12 focus:outline-none' do %>
+          <svg width="12" height="12"><use xlink:href="#icon-settings-2-line" /></svg>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 </div>

enterprise/app/views/super_admin/app_configs/_email_layout.html.erb

@@ -0,0 +1,15 @@
+<% if ChatwootHub.pricing_plan != 'community' %>
+  <div class="absolute right-4 top-5 w-96 rounded-md border border-slate-100 p-4">
+    <div class="flex items-start justify-between gap-5">
+      <div class="flex flex-col gap-1">
+        <span class="text-sm font-medium text-n-slate-12">Email templates</span>
+        <p class="m-0 text-xs italic leading-5 text-slate-400">
+          Customize the notification email layout for this brand.
+        </p>
+      </div>
+      <%= link_to 'Manage',
+                  edit_super_admin_email_layout_path,
+                  class: 'flex h-8 shrink-0 items-center rounded-md bg-transparent px-3 text-sm font-medium text-n-slate-11 outline outline-1 outline-n-container hover:bg-slate-50 hover:text-n-slate-12 focus:outline-none' %>
+    </div>
+  </div>
+<% end %>

enterprise/app/views/super_admin/email_layouts/edit.html.erb

@@ -0,0 +1,241 @@
+<% content_for(:title) do %>
+  Configure Settings - <%= @account.present? ? "#{@account.name} Email Templates" : 'Email Templates' %>
+<% end %>
+
+<% overview_path = @account.present? ? edit_super_admin_account_email_layout_path(@account) : edit_super_admin_email_layout_path %>
+<% new_template_path = @account.present? ? edit_super_admin_account_email_layout_path(@account, new: 1, template_type: 'layout', template_name: 'base', locale: 'en') : edit_super_admin_email_layout_path(new: 1, template_type: 'layout', template_name: 'base', locale: 'en') %>
+
+<header class="main-content__header" role="banner">
+  <div class="flex items-center justify-between w-full">
+    <h1 class="main-content__page-title m-0 mr-6" id="page-title">
+      <%= content_for(:title) %>
+    </h1>
+
+    <% unless @show_template_editor %>
+      <div class="whitespace-nowrap ml-4">
+        <%= link_to 'Create new template', new_template_path, class: 'button' %>
+      </div>
+    <% end %>
+  </div>
+</header>
+
+<% unless @show_template_editor %>
+  <section class="main-content__body main-content__body--flush">
+    <table aria-labelledby="page-title">
+      <thead>
+        <tr>
+          <th class="cell-label cell-label--string" scope="col">Type</th>
+          <th class="cell-label cell-label--string" scope="col">Template</th>
+          <th class="cell-label cell-label--string" scope="col">Language</th>
+          <th class="cell-label cell-label--string" scope="col">Updated</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <% @custom_templates.each do |template| %>
+          <% template_path = @account.present? ? edit_super_admin_account_email_layout_path(@account, template_type: template.template_type, template_name: template.name, locale: template.locale) : edit_super_admin_email_layout_path(template_type: template.template_type, template_name: template.name, locale: template.locale) %>
+          <tr class="js-table-row" tabindex="0" role="link" data-url="<%= template_path %>">
+            <td class="cell-data cell-data--string">
+              <%= link_to template.template_type.titleize, template_path, class: 'action-show' %>
+            </td>
+            <td class="cell-data cell-data--string">
+              <%= link_to template.name.humanize, template_path, class: 'action-show' %>
+            </td>
+            <td class="cell-data cell-data--string">
+              <%= link_to template.locale.upcase, template_path, class: 'action-show' %>
+            </td>
+            <td class="cell-data cell-data--string">
+              <%= link_to "#{time_ago_in_words(template.updated_at)} ago", template_path, class: 'action-show' %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </section>
+<% else %>
+  <section class="main-content__body">
+    <div class="pr-16">
+      <%= form_tag overview_path, method: :get, id: 'email-template-selector-form', autocomplete: 'off' do %>
+        <%= hidden_field_tag :new, 1 %>
+        <fieldset>
+          <legend>Template details</legend>
+
+          <div class="field-unit field-unit--string">
+            <div class="field-unit__label">
+              <%= label_tag :template_type, 'Type' %>
+            </div>
+            <div class="field-unit__field">
+              <%= select_tag :template_type,
+                             options_for_select(EmailTemplate.template_types.keys.map { |type| [type.titleize, type] }, @template_type),
+                             data: { current_value: @template_type } %>
+            </div>
+          </div>
+
+          <div class="field-unit field-unit--string">
+            <div class="field-unit__label">
+              <%= label_tag :template_name, 'Template' %>
+            </div>
+            <div class="field-unit__field">
+              <%= select_tag :template_name,
+                             options_for_select(@template_options.map { |template| [template[:label], template[:name]] }, @template_name),
+                             data: { current_value: @template_name } %>
+              <p class="pt-2 text-xs italic text-slate-400"><%= @template_status %></p>
+            </div>
+          </div>
+
+          <div class="field-unit field-unit--string">
+            <div class="field-unit__label">
+              <%= label_tag :locale, 'Language' %>
+            </div>
+            <div class="field-unit__field">
+              <%= select_tag :locale,
+                             options_for_select(@locale_options, @template_locale),
+                             data: { current_value: @template_locale } %>
+            </div>
+          </div>
+        </fieldset>
+
+        <div class="form-actions">
+          <%= submit_tag 'Load' %>
+          <%= link_to 'All templates', overview_path, class: 'button' %>
+        </div>
+      <% end %>
+
+      <%= form_with scope: :email_layout,
+                    url: @account.present? ? super_admin_account_email_layout_path(@account) : super_admin_email_layout_path,
+                    method: :patch do |form| %>
+        <%= form.hidden_field :template_type, value: @template_type %>
+        <%= form.hidden_field :template_name, value: @template_name %>
+        <%= form.hidden_field :locale, value: @template_locale %>
+
+        <fieldset>
+          <legend>Template body</legend>
+          <div class="field-unit field-unit--text">
+            <div class="field-unit__label">
+              <%= form.label :body, 'HTML / Liquid' %>
+            </div>
+            <div class="field-unit__field">
+              <%= form.text_area :body,
+                                 value: @layout_body,
+                                 rows: 24,
+                                 wrap: 'off',
+                                 data: { email_template_editor: true },
+                                 class: 'mt-2 w-full border font-mono text-xs border-slate-100 p-1 rounded-md overflow-scroll' %>
+              <% if @template_type == 'layout' %>
+                <p class="pt-2 text-xs italic text-slate-400">Keep {{ content_for_layout }} in the layout.</p>
+              <% end %>
+            </div>
+          </div>
+        </fieldset>
+
+        <div class="form-actions">
+          <%= form.submit @email_layout.present? ? 'Save template' : 'Create template override' %>
+
+          <% if @email_layout.present? %>
+            <%= link_to t('administrate.actions.destroy'),
+                        @account.present? ? super_admin_account_email_layout_path(@account, template_type: @template_type, template_name: @template_name, locale: @template_locale) : super_admin_email_layout_path(template_type: @template_type, template_name: @template_name, locale: @template_locale),
+                        class: 'button button--danger',
+                        method: :delete,
+                        data: { confirm: t('administrate.actions.confirm') } %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <fieldset>
+        <legend>Preview</legend>
+        <div class="attribute-label">Email layout preview</div>
+        <div class="attribute-data attribute-data--string">
+          <iframe
+            title="Email layout preview"
+            sandbox
+            height="420"
+            srcdoc="<%= @preview_html %>"
+            data-email-template-preview="true"
+            class="w-full rounded-md border border-slate-100 bg-white"
+          ></iframe>
+          <p class="pt-2 text-xs italic text-slate-400">Refreshes as you type.</p>
+        </div>
+
+        <div class="attribute-label">Variables</div>
+        <div class="attribute-data attribute-data--string">
+          <% @supported_variables.each do |supported_variable| %>
+            <p class="m-0 mb-2 text-xs text-slate-500">
+              <code class="rounded bg-slate-25 px-2 py-1 font-mono text-xs text-slate-700"><%= supported_variable[:variable] %></code>
+              <%= supported_variable[:description] %>
+            </p>
+          <% end %>
+        </div>
+      </fieldset>
+
+      <script type="application/json" id="email-preview-config"><%= raw json_escape(@preview_config.to_json) %></script>
+    </div>
+  </section>
+    <% end %>
+
+<% if @show_template_editor %>
+  <% content_for :javascript do %>
+    <script>
+      const initializeEmailTemplateEditor = () => {
+        const selectorForm = document.getElementById('email-template-selector-form') || document.querySelector('form[method="get"]');
+        if (selectorForm) {
+          let isSubmitting = false;
+          const submitSelectorForm = select => {
+            if (isSubmitting) return;
+
+            const templateSelect = selectorForm.querySelector('select[name="template_name"]');
+            if (select.name === 'template_type' && templateSelect) {
+              templateSelect.disabled = true;
+            }
+
+            isSubmitting = true;
+            selectorForm.requestSubmit();
+          };
+
+          selectorForm.querySelectorAll('select').forEach(select => {
+            if (select.dataset.currentValue) {
+              if (select.selectize) {
+                select.selectize.setValue(select.dataset.currentValue, true);
+              } else {
+                select.value = select.dataset.currentValue;
+              }
+            }
+
+            select.addEventListener('change', () => submitSelectorForm(select));
+            select.selectize?.on('change', () => submitSelectorForm(select));
+          });
+        }
+
+        const editor = document.querySelector('[data-email-template-editor]');
+        const preview = document.querySelector('[data-email-template-preview]');
+        const configNode = document.getElementById('email-preview-config');
+
+        if (!editor || !preview || !configNode) return;
+
+        const config = JSON.parse(configNode.textContent);
+        const contentSlotPattern = /\{\{\s*content_for_layout\s*\}\}/g;
+        const replacements = [
+          [/\{\{\s*global_config\[['"]BRAND_NAME['"]\]\s*\}\}/g, config.brandName],
+          [/\{\{\s*global_config\[['"]BRAND_URL['"]\]\s*\}\}/g, config.brandUrl],
+          [/\{\{\s*account\.name\s*\}\}/g, config.accountName],
+        ];
+
+        const renderTemplateVariables = value => replacements.reduce((body, [pattern, replacement]) => body.replace(pattern, replacement || ''), value || '');
+
+        const renderPreview = () => {
+          const renderedBody = renderTemplateVariables(editor.value);
+          preview.srcdoc = config.templateType === 'layout'
+            ? renderedBody.replace(contentSlotPattern, config.previewContent)
+            : renderTemplateVariables(config.defaultLayout).replace(contentSlotPattern, renderedBody);
+        };
+
+        editor.addEventListener('input', renderPreview);
+      };
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeEmailTemplateEditor);
+      } else {
+        initializeEmailTemplateEditor();
+      }
+    </script>
+  <% end %>
+<% end %>

enterprise/lib/voice/call_errors.rb

@@ -8,4 +8,5 @@ module Voice::CallErrors
   class CallFailed < StandardError; end
   class NotRinging < StandardError; end
   class AlreadyAccepted < StandardError; end
+  class CallAlreadyEnded < StandardError; end
 end

lib/redis/redis_keys.rb

@@ -58,6 +58,8 @@ module Redis::RedisKeys
   # Check if a message create with same source-id is in progress?
   MESSAGE_SOURCE_KEY = 'MESSAGE_SOURCE_KEY::%<id>s'.freeze
   OPENAI_CONVERSATION_KEY = 'OPEN_AI_CONVERSATION_KEY::V1::%<event_name>s::%<conversation_id>d::%<updated_at>d'.freeze
+  # Bridges a WhatsApp call `terminate` that overtook its `connect` so the later connect can finalize it.
+  WHATSAPP_CALL_TERMINATE_TOMBSTONE = 'WHATSAPP_CALL_TERMINATE_TOMBSTONE::%<call_id>s'.freeze
 
   ## Sempahores / Locks
   # We don't want to process messages from the same sender concurrently to prevent creating double conversations

lib/tasks/apply_sla.rake

@@ -62,7 +62,9 @@ namespace :sla do
       exit(1)
     end
 
-    conversations = account.conversations.where(sla_policy_id: nil).order(id: :desc).limit(batch_size)
+    conversations = account.conversations.where(sla_policy_id: nil)
+    conversations = conversations.with_sla_applicable_contact if conversations.respond_to?(:with_sla_applicable_contact)
+    conversations = conversations.order(id: :desc).limit(batch_size)
     total_count = conversations.count
 
     if total_count.zero?

spec/builders/v2/reports/drilldown_builder_spec.rb

@@ -0,0 +1,230 @@
+require 'rails_helper'
+
+RSpec.describe V2::Reports::DrilldownBuilder do
+  subject(:drilldown) { described_class.new(account, params).build }
+
+  let(:account) { create(:account) }
+  let(:inbox) { create(:inbox, account: account) }
+  let(:current_time) { Time.zone.parse('2026-05-20 12:00') }
+  let(:bucket_start) { current_time.beginning_of_day }
+  let(:bucket_end) { bucket_start + 1.day }
+  let(:metric) { 'conversations_count' }
+  let(:params) do
+    {
+      metric: metric,
+      type: filter_type,
+      id: filter_id,
+      since: bucket_start.to_i.to_s,
+      until: bucket_end.to_i.to_s,
+      bucket_timestamp: bucket_start.to_i.to_s,
+      group_by: 'day',
+      timezone_offset: '0',
+      business_hours: false
+    }
+  end
+  let(:filter_type) { :account }
+  let(:filter_id) { nil }
+
+  before do
+    travel_to current_time
+  end
+
+  describe '#build' do
+    context 'with conversation count metric' do
+      it 'returns conversations created in the clicked bucket' do
+        conversation = create(
+          :conversation,
+          account: account,
+          inbox: inbox,
+          created_at: bucket_start + 2.hours,
+          last_activity_at: bucket_start + 4.hours
+        )
+        last_message = create(
+          :message,
+          account: account,
+          inbox: inbox,
+          conversation: conversation,
+          message_type: :incoming,
+          content: 'Latest customer note',
+          created_at: bucket_start + 3.hours
+        )
+        conversation.update!(last_activity_at: bucket_start + 4.hours)
+        create(:conversation, account: account, inbox: inbox, created_at: bucket_start - 1.hour)
+
+        expect(drilldown[:meta]).to include(metric: 'conversations_count', record_type: 'conversation', total_count: 1)
+        expect(drilldown[:meta][:bucket]).to eq({ since: bucket_start.to_i, until: bucket_end.to_i })
+        expect(drilldown[:payload].first[:conversation][:display_id]).to eq(conversation.display_id)
+        expect(drilldown[:payload].first[:conversation][:created_at]).to eq(
+          (bucket_start + 2.hours).to_i
+        )
+        expect(drilldown[:payload].first[:conversation][:last_activity_at]).to eq(
+          (bucket_start + 4.hours).to_i
+        )
+        expect(drilldown[:payload].first[:conversation][:last_message][:id]).to eq(last_message.id)
+        expect(drilldown[:payload].first[:conversation][:last_message][:content]).to eq('Latest customer note')
+      end
+
+      it 'loads latest messages in one query for the page conversations' do
+        first_conversation = create(:conversation, account: account, inbox: inbox, created_at: bucket_start + 2.hours)
+        second_conversation = create(:conversation, account: account, inbox: inbox, created_at: bucket_start + 3.hours)
+        first_message = create(:message, account: account, inbox: inbox, conversation: first_conversation, created_at: bucket_start + 4.hours)
+        second_message = create(:message, account: account, inbox: inbox, conversation: second_conversation, created_at: bucket_start + 5.hours)
+
+        message_queries = []
+        subscriber = ActiveSupport::Notifications.subscribe('sql.active_record') do |_name, _started, _finished, _unique_id, payload|
+          message_queries << payload[:sql] if payload[:sql].match?(/\ASELECT .*FROM "messages"/m) && !payload[:cached]
+        end
+
+        payload = drilldown[:payload]
+
+        expect(payload.map { |row| row[:conversation][:last_message][:id] }).to contain_exactly(
+          first_message.id,
+          second_message.id
+        )
+        expect(message_queries.size).to eq(1)
+      ensure
+        ActiveSupport::Notifications.unsubscribe(subscriber) if subscriber
+      end
+
+      context 'when filtering by agent' do
+        let(:metric) { 'conversations_count' }
+        let(:filter_type) { :agent }
+        let(:filter_id) { agent.id }
+        let(:agent) { create(:user, account: account) }
+        let(:other_agent) { create(:user, account: account) }
+
+        it 'returns only conversations assigned to the selected agent' do
+          conversation = create(:conversation, account: account, inbox: inbox, assignee: agent, created_at: bucket_start + 2.hours)
+          create(:conversation, account: account, inbox: inbox, assignee: other_agent, created_at: bucket_start + 3.hours)
+
+          expect(drilldown[:meta][:total_count]).to eq(1)
+          expect(drilldown[:payload].first[:conversation][:id]).to eq(conversation.id)
+        end
+      end
+    end
+
+    context 'with message count metric' do
+      let(:metric) { 'incoming_messages_count' }
+
+      it 'returns messages created in the clicked bucket' do
+        conversation = create(:conversation, account: account, inbox: inbox)
+        message = create(:message, account: account, inbox: inbox, conversation: conversation,
+                                   message_type: :incoming, content: 'Need help', created_at: bucket_start + 1.hour)
+        create(:message, account: account, inbox: inbox, conversation: conversation,
+                         message_type: :outgoing, created_at: bucket_start + 2.hours)
+
+        expect(drilldown[:meta]).to include(record_type: 'message', total_count: 1)
+        expect(drilldown[:payload].first[:record_type]).to eq('message')
+        expect(drilldown[:payload].first[:message][:id]).to eq(message.id)
+        expect(drilldown[:payload].first[:message][:content]).to eq('Need help')
+      end
+    end
+
+    context 'with first response time metric' do
+      let(:metric) { 'avg_first_response_time' }
+      let(:agent) { create(:user, account: account) }
+
+      it 'infers the related outgoing message and uses the selected metric value' do
+        conversation = create(:conversation, account: account, inbox: inbox)
+        message = create(:message, account: account, inbox: inbox, conversation: conversation,
+                                   sender: agent, message_type: :outgoing, created_at: bucket_start + 2.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: conversation, user: agent,
+                                 name: 'first_response', value: 120, value_in_business_hours: 45,
+                                 created_at: bucket_start + 2.hours, event_end_time: message.created_at)
+
+        params[:business_hours] = true
+
+        expect(drilldown[:meta]).to include(record_type: 'message', total_count: 1)
+        expect(drilldown[:payload].first[:record_type]).to eq('message')
+        expect(drilldown[:payload].first[:message][:id]).to eq(message.id)
+        expect(drilldown[:payload].first[:metric_value]).to eq(45)
+      end
+
+      it 'loads inferred and latest messages in two queries for the page events' do
+        first_conversation = create(:conversation, account: account, inbox: inbox)
+        second_conversation = create(:conversation, account: account, inbox: inbox)
+        first_message = create(:message, account: account, inbox: inbox, conversation: first_conversation,
+                                         sender: agent, message_type: :outgoing, created_at: bucket_start + 2.hours)
+        second_message = create(:message, account: account, inbox: inbox, conversation: second_conversation,
+                                          sender: agent, message_type: :outgoing, created_at: bucket_start + 3.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: first_conversation, user: agent,
+                                 name: 'first_response', value: 120, created_at: bucket_start + 2.hours,
+                                 event_end_time: first_message.created_at)
+        create(:reporting_event, account: account, inbox: inbox, conversation: second_conversation, user: agent,
+                                 name: 'first_response', value: 90, created_at: bucket_start + 3.hours,
+                                 event_end_time: second_message.created_at)
+
+        message_queries = []
+        subscriber = ActiveSupport::Notifications.subscribe('sql.active_record') do |_name, _started, _finished, _unique_id, payload|
+          message_queries << payload[:sql] if payload[:sql].match?(/\ASELECT .*FROM "messages"/m) && !payload[:cached]
+        end
+
+        payload = drilldown[:payload]
+
+        expect(payload.map { |row| row[:message][:id] }).to contain_exactly(
+          first_message.id,
+          second_message.id
+        )
+        expect(message_queries.size).to eq(2)
+      ensure
+        ActiveSupport::Notifications.unsubscribe(subscriber) if subscriber
+      end
+
+      it 'falls back to the conversation when no matching message is found' do
+        conversation = create(:conversation, account: account, inbox: inbox)
+        create(:reporting_event, account: account, inbox: inbox, conversation: conversation, user: agent,
+                                 name: 'first_response', value: 120, created_at: bucket_start + 2.hours,
+                                 event_end_time: bucket_start + 2.hours)
+
+        expect(drilldown[:payload].first[:record_type]).to eq('conversation')
+        expect(drilldown[:payload].first[:conversation][:id]).to eq(conversation.id)
+      end
+    end
+
+    context 'with bot handoff count metric' do
+      let(:metric) { 'bot_handoffs_count' }
+
+      it 'returns one row per handoff conversation' do
+        first_conversation = create(:conversation, account: account, inbox: inbox)
+        second_conversation = create(:conversation, account: account, inbox: inbox)
+
+        create(:reporting_event, account: account, inbox: inbox, conversation: first_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 1.hour)
+        create(:reporting_event, account: account, inbox: inbox, conversation: first_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 2.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: second_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 3.hours)
+
+        expect(drilldown[:meta][:total_count]).to eq(2)
+        expect(drilldown[:payload].map { |row| row[:conversation][:id] }).to contain_exactly(
+          first_conversation.id,
+          second_conversation.id
+        )
+        expect(drilldown[:payload].pluck(:event_name)).to all(eq('conversation_bot_handoff'))
+      end
+    end
+
+    context 'with bot resolution count metric' do
+      let(:metric) { 'bot_resolutions_count' }
+
+      before do
+        params[:until] = (bucket_start + 2.days).to_i.to_s
+      end
+
+      it 'excludes conversations with handoffs anywhere in the selected report range' do
+        resolved_conversation = create(:conversation, account: account, inbox: inbox)
+        handed_off_conversation = create(:conversation, account: account, inbox: inbox)
+
+        create(:reporting_event, account: account, inbox: inbox, conversation: resolved_conversation,
+                                 name: 'conversation_bot_resolved', created_at: bucket_start + 1.hour)
+        create(:reporting_event, account: account, inbox: inbox, conversation: handed_off_conversation,
+                                 name: 'conversation_bot_resolved', created_at: bucket_start + 2.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: handed_off_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 1.day)
+
+        expect(drilldown[:meta][:total_count]).to eq(1)
+        expect(drilldown[:payload].first[:conversation][:id]).to eq(resolved_conversation.id)
+      end
+    end
+  end
+end

spec/controllers/api/v2/accounts/report_controller_spec.rb

@@ -233,6 +233,107 @@ RSpec.describe 'Reports API', type: :request do
     end
   end
 
+  describe 'GET /api/v2/accounts/:account_id/reports/drilldown' do
+    let(:params) do
+      super().merge(
+        metric: 'conversations_count',
+        type: :account,
+        since: start_of_today.to_s,
+        until: end_of_today.to_s,
+        bucket_timestamp: start_of_today.to_s,
+        group_by: 'day'
+      )
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'returns unauthorized for agents' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params,
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+
+      it 'returns drilldown records for the selected bucket' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params,
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+
+        expect(json_response['meta']['metric']).to eq('conversations_count')
+        expect(json_response['meta']['record_type']).to eq('conversation')
+        expect(json_response['meta']['total_count']).to eq(10)
+        expect(json_response['payload'].first['conversation']).to include('display_id', 'contact_name', 'inbox_name')
+      end
+
+      it 'returns unprocessable entity for missing bucket timestamp' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.except(:bucket_timestamp),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'returns unprocessable entity for invalid bucket timestamp' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(bucket_timestamp: 'abc'),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'returns unprocessable entity for bucket timestamp outside the requested range' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(bucket_timestamp: end_of_today.to_s),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'returns drilldown records for a partial first weekly bucket' do
+        range_start = Time.zone.local(2026, 5, 20, 12)
+        range_end = Time.zone.local(2026, 5, 27, 12)
+        week_start = range_start.beginning_of_week(:sunday)
+
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(
+              since: range_start.to_i.to_s,
+              until: range_end.to_i.to_s,
+              bucket_timestamp: week_start.to_i.to_s,
+              group_by: 'week'
+            ),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+      end
+
+      it 'returns unprocessable entity for unsupported drilldown type' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(type: :unsupported),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+    end
+  end
+
   describe 'GET /api/v2/accounts/:account_id/reports/agents' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do

spec/controllers/super_admin/app_config_controller_spec.rb

@@ -2,6 +2,7 @@ require 'rails_helper'
 
 RSpec.describe 'Super Admin Application Config API', type: :request do
   let(:super_admin) { create(:super_admin) }
+  let(:account) { create(:account) }
 
   describe 'GET /super_admin/app_config' do
     context 'when it is an unauthenticated super admin' do
@@ -12,7 +13,13 @@ RSpec.describe 'Super Admin Application Config API', type: :request do
     end
 
     context 'when it is an authenticated super admin' do
-      let!(:config) { create(:installation_config, { name: 'FB_APP_ID', value: 'TESTVALUE' }) }
+      let!(:config) do
+        InstallationConfig.where(name: 'FB_APP_ID').first_or_initialize.tap do |installation_config|
+          installation_config.value = 'TESTVALUE'
+          installation_config.locked = false
+          installation_config.save!
+        end
+      end
 
       it 'shows the app_config page' do
         sign_in(super_admin, scope: :super_admin)
@@ -20,6 +27,32 @@ RSpec.describe 'Super Admin Application Config API', type: :request do
         expect(response).to have_http_status(:success)
         expect(response.body).to include(config.value)
       end
+
+      it 'shows email template customization under custom branding' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+
+        sign_in(super_admin, scope: :super_admin)
+        get '/super_admin/app_config?config=custom_branding'
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Email templates')
+        expect(response.body).to include('Customize the notification email layout for this brand')
+        expect(response.body).to include('Manage')
+        expect(response.body).not_to include('Shape the brand customers see across Chatwoot and email')
+        expect(response.body).to include('/super_admin/email_layout/edit')
+      end
+
+      it 'shows email template customization on account details' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+
+        sign_in(super_admin, scope: :super_admin)
+        get "/super_admin/accounts/#{account.id}"
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Account Email Templates')
+        expect(response.body).to include('Customize account email templates')
+        expect(response.body).to include(edit_super_admin_account_email_layout_path(account))
+      end
     end
   end
 

spec/controllers/super_admin/email_layouts_controller_spec.rb

@@ -0,0 +1,230 @@
+require 'rails_helper'
+
+RSpec.describe 'Super Admin Email Layouts API', type: :request do
+  let(:super_admin) { create(:super_admin) }
+  let(:account) { create(:account, name: 'Acme Inc') }
+
+  describe 'GET /super_admin/email_layout/edit' do
+    context 'when it is an unauthenticated super admin' do
+      it 'returns unauthorized' do
+        get '/super_admin/email_layout/edit'
+        expect(response).to have_http_status(:redirect)
+      end
+    end
+
+    context 'when it is an authenticated super admin' do
+      it 'shows the email layout page' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        sign_in(super_admin, scope: :super_admin)
+
+        get '/super_admin/email_layout/edit'
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Configure Settings - Email Templates')
+        expect(response.body).to include('Create new template')
+        expect(response.body).to include('<th class="cell-label cell-label--string" scope="col">Type</th>')
+        expect(response.body).to include('<th class="cell-label cell-label--string" scope="col">Template</th>')
+      end
+
+      it 'shows the editor when creating a new template override' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        sign_in(super_admin, scope: :super_admin)
+
+        get '/super_admin/email_layout/edit', params: { new: 1, template_type: 'layout', template_name: 'base', locale: 'en' }
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Template details')
+        expect(response.body).to include('email-template-selector-form')
+        expect(response.body).to include('Type')
+        expect(response.body).to include('Language')
+        expect(response.body).to include('Inherits default template')
+        expect(response.body).to include('Email layout preview')
+        expect(response.body).to include('Variables')
+        expect(response.body).to include('{{ content_for_layout }}')
+        expect(response.body).to include('global_config[&#39;BRAND_NAME&#39;]')
+        expect(response.body).to include('global_config[&#39;BRAND_URL&#39;]')
+      end
+
+      it 'shows the account email layout page' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        sign_in(super_admin, scope: :super_admin)
+
+        get "/super_admin/accounts/#{account.id}/email_layout/edit"
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Configure Settings - Acme Inc Email Templates')
+        expect(response.body).to include('Create new template')
+        expect(response.body).to include('<th class="cell-label cell-label--string" scope="col">Type</th>')
+        expect(response.body).to include('<th class="cell-label cell-label--string" scope="col">Template</th>')
+      end
+
+      it 'lists configured account email templates' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        create(
+          :email_template,
+          name: 'agent_notifications/conversation_notifications_mailer/conversation_assignment',
+          body: 'Assigned',
+          template_type: :content,
+          locale: :fr,
+          account: account
+        )
+        sign_in(super_admin, scope: :super_admin)
+
+        get "/super_admin/accounts/#{account.id}/email_layout/edit"
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Create new template')
+        expect(response.body).to include('Content')
+        expect(response.body).to include('FR')
+        expect(response.body).to include('Agent notifications/conversation notifications mailer/conversation assignment')
+      end
+
+      it 'shows the account email layout editor when creating a new template override' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        sign_in(super_admin, scope: :super_admin)
+
+        get "/super_admin/accounts/#{account.id}/email_layout/edit",
+            params: { new: 1, template_type: 'layout', template_name: 'base', locale: 'en' }
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Template details')
+        expect(response.body).to include('Acme Inc')
+        expect(response.body).to include('{{ account.name }}')
+      end
+
+      it 'shows delete action for configured account email template overrides' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        create(:email_template, name: 'base', body: '{{ content_for_layout }}', template_type: :layout, locale: :en, account: account)
+        sign_in(super_admin, scope: :super_admin)
+
+        get "/super_admin/accounts/#{account.id}/email_layout/edit", params: { template_type: 'layout', template_name: 'base', locale: 'en' }
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Destroy')
+        expect(response.body).to include('button button--danger')
+        expect(response.body).to include('Are you sure?')
+      end
+
+      it 'supports selecting content templates by locale' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        sign_in(super_admin, scope: :super_admin)
+
+        get "/super_admin/accounts/#{account.id}/email_layout/edit",
+            params: {
+              template_type: 'content',
+              template_name: 'agent_notifications/conversation_notifications_mailer/conversation_assignment',
+              locale: 'fr'
+            }
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Content')
+        expect(response.body).to include('conversation assignment')
+        expect(response.body).to include('FR')
+      end
+
+      it 'blocks access on community plan' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('community')
+        sign_in(super_admin, scope: :super_admin)
+
+        get '/super_admin/email_layout/edit'
+
+        expect(response).to have_http_status(:redirect)
+        expect(response).to redirect_to(root_path)
+      end
+    end
+  end
+
+  describe 'PATCH /super_admin/email_layout' do
+    context 'when it is an unauthenticated super admin' do
+      it 'returns unauthorized' do
+        patch '/super_admin/email_layout', params: { email_layout: { body: '{{ content_for_layout }}' } }
+        expect(response).to have_http_status(:redirect)
+      end
+    end
+
+    context 'when it is an authenticated super admin' do
+      before do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        sign_in(super_admin, scope: :super_admin)
+      end
+
+      it 'creates a layout override' do
+        body = '<html><body>{{ content_for_layout }}</body></html>'
+
+        patch '/super_admin/email_layout', params: { email_layout: { body: body } }
+
+        expect(response).to have_http_status(:found)
+        expect(response).to redirect_to(edit_super_admin_email_layout_path(template_type: 'layout', template_name: 'base', locale: 'en'))
+
+        template = EmailTemplate.find_by(name: 'base', account: nil)
+        expect(template).to be_present
+        expect(template.template_type).to eq('layout')
+        expect(template.body).to eq(body)
+      end
+
+      it 'creates an account layout override' do
+        body = '<html><body>{{ content_for_layout }} {{ account.name }}</body></html>'
+
+        patch "/super_admin/accounts/#{account.id}/email_layout", params: { email_layout: { body: body } }
+
+        expect(response).to have_http_status(:found)
+        expect(response).to redirect_to(edit_super_admin_account_email_layout_path(account, template_type: 'layout', template_name: 'base',
+                                                                                            locale: 'en'))
+
+        template = EmailTemplate.find_by(name: 'base', account: account)
+        expect(template).to be_present
+        expect(template.template_type).to eq('layout')
+        expect(template.body).to eq(body)
+      end
+
+      it 'returns validation error when content_for_layout is missing' do
+        patch '/super_admin/email_layout', params: { email_layout: { body: '<html><body>No slot</body></html>' } }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.body).to include('Layout must include')
+      end
+
+      it 'returns validation error for invalid liquid syntax' do
+        patch '/super_admin/email_layout', params: { email_layout: { body: '{{ content_for_layout }} {{ invalid ' } }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.body).to include('Liquid syntax error')
+      end
+    end
+  end
+
+  describe 'DELETE /super_admin/email_layout' do
+    context 'when it is an unauthenticated super admin' do
+      it 'returns unauthorized' do
+        delete '/super_admin/email_layout'
+        expect(response).to have_http_status(:redirect)
+      end
+    end
+
+    context 'when it is an authenticated super admin' do
+      it 'removes custom layout override' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        create(:email_template, name: 'base', body: '{{ content_for_layout }}', template_type: :layout, account: nil)
+        sign_in(super_admin, scope: :super_admin)
+
+        delete '/super_admin/email_layout'
+
+        expect(response).to have_http_status(:found)
+        expect(response).to redirect_to(edit_super_admin_email_layout_path)
+        expect(EmailTemplate.find_by(name: 'base', account: nil)).to be_nil
+      end
+
+      it 'removes account layout override' do
+        allow(ChatwootHub).to receive(:pricing_plan).and_return('enterprise')
+        create(:email_template, name: 'base', body: '{{ content_for_layout }}', template_type: :layout, account: account)
+        sign_in(super_admin, scope: :super_admin)
+
+        delete "/super_admin/accounts/#{account.id}/email_layout"
+
+        expect(response).to have_http_status(:found)
+        expect(response).to redirect_to(edit_super_admin_account_email_layout_path(account))
+        expect(EmailTemplate.find_by(name: 'base', account: account)).to be_nil
+      end
+    end
+  end
+end

spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb

@@ -37,6 +37,21 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(body).to include('hit_rate' => '0.0%')
       end
 
+      it 'excludes conversations with blocked contacts from metrics' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
+        conversation2.contact.update!(blocked: true)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('total_applied_slas' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
+        expect(body).to include('hit_rate' => '0.0%')
+      end
+
       it 'filters sla metrics based on a date range' do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
@@ -129,6 +144,22 @@ RSpec.describe 'Applied SLAs API', type: :request do
         csv_data = CSV.parse(response.body)
         csv_data.reject! { |row| row.all?(&:nil?) }
         expect(csv_data.size).to eq(3)
+        conversation_ids = csv_data.drop(1).map { |row| row[0].to_i }
+        expect(conversation_ids).to contain_exactly(conversation1.display_id, conversation2.display_id)
+      end
+
+      it 'excludes conversations with blocked contacts from the CSV file' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
+        conversation2.contact.update!(blocked: true)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/download",
+            headers: administrator.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        csv_data = CSV.parse(response.body)
+        csv_data.reject! { |row| row.all?(&:nil?) }
+        expect(csv_data.size).to eq(2)
         expect(csv_data[1][0].to_i).to eq(conversation1.display_id)
       end
     end
@@ -156,6 +187,21 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(body['meta']).to include('count' => 1)
       end
 
+      it 'excludes conversations with blocked contacts' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
+        conversation2.contact.update!(blocked: true)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas",
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body['payload'].size).to eq(1)
+        expect(body['payload'].first['conversation']['id']).to eq(conversation1.display_id)
+        expect(body['meta']).to include('count' => 1)
+      end
+
       it 'filters applied slas based on a date range' do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago, sla_status: 'missed')
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')

spec/enterprise/controllers/api/v1/accounts/conversations_controller_spec.rb

@@ -18,6 +18,21 @@ RSpec.describe 'Conversations API', type: :request do
       expect(response.parsed_body['sla_events'].first['id']).to eq(sla_event.id)
     end
 
+    it 'returns cleared SLA data when the contact is blocked' do
+      account.enable_features!('sla')
+      conversation = create(:conversation, account: account)
+      applied_sla = create(:applied_sla, conversation: conversation)
+      create(:sla_event, conversation: conversation, applied_sla: applied_sla)
+      conversation.contact.update!(blocked: true)
+
+      get "/api/v1/accounts/#{account.id}/conversations/#{conversation.display_id}", headers: administrator.create_new_auth_token
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body['sla_policy_id']).to be_nil
+      expect(response.parsed_body['applied_sla']).to be_nil
+      expect(response.parsed_body['sla_events']).to eq([])
+    end
+
     it 'does not return SLA data for the conversation if the feature is disabled' do
       account.disable_features!('sla')
       conversation = create(:conversation, account: account)

spec/enterprise/controllers/api/v1/accounts/whatsapp_calls_controller_spec.rb

@@ -58,6 +58,15 @@ RSpec.describe 'WhatsApp Calls API', type: :request do
 
       expect(response).to have_http_status(:unprocessable_entity)
     end
+
+    it 'returns 409 when the call has already ended (caller hung up mid-ring)' do
+      call.update!(status: 'no_answer')
+
+      post "/api/v1/accounts/#{account.id}/whatsapp_calls/#{call.id}/accept",
+           params: { sdp_answer: 'sdp_answer' }, headers: agent.create_new_auth_token
+
+      expect(response).to have_http_status(:conflict)
+    end
   end
 
   describe 'POST /api/v1/accounts/:account_id/whatsapp_calls/:id/reject' do
@@ -104,6 +113,31 @@ RSpec.describe 'WhatsApp Calls API', type: :request do
       expect(Call.find_by(provider_call_id: 'wacid_outbound')).to have_attributes(direction: 'outgoing', status: 'ringing')
     end
 
+    it 'assigns the conversation to the agent placing the call when it is unassigned' do
+      allow(provider_service).to receive(:initiate_call).and_return({ 'calls' => [{ 'id' => 'wacid_outbound' }] })
+
+      post "/api/v1/accounts/#{account.id}/whatsapp_calls/initiate",
+           params: { conversation_id: initiate_conversation.display_id, sdp_offer: 'sdp_offer' },
+           headers: agent.create_new_auth_token
+
+      expect(response).to have_http_status(:ok)
+      expect(initiate_conversation.reload.assignee_id).to eq(agent.id)
+    end
+
+    it 'keeps the existing assignee when the conversation is already assigned' do
+      other_agent = create(:user, account: account, role: :agent)
+      create(:inbox_member, user: other_agent, inbox: inbox)
+      initiate_conversation.update!(assignee: other_agent)
+      allow(provider_service).to receive(:initiate_call).and_return({ 'calls' => [{ 'id' => 'wacid_outbound' }] })
+
+      post "/api/v1/accounts/#{account.id}/whatsapp_calls/initiate",
+           params: { conversation_id: initiate_conversation.display_id, sdp_offer: 'sdp_offer' },
+           headers: agent.create_new_auth_token
+
+      expect(response).to have_http_status(:ok)
+      expect(initiate_conversation.reload.assignee_id).to eq(other_agent.id)
+    end
+
     it 'sends a permission request and records the wamid when Meta returns NoCallPermission' do
       allow(provider_service).to receive(:initiate_call).and_raise(Voice::CallErrors::NoCallPermission)
       allow(provider_service).to receive(:send_call_permission_request).and_return({ 'messages' => [{ 'id' => 'wamid.req_xyz' }] })

spec/enterprise/controllers/enterprise/api/v1/accounts/conversations_controller_spec.rb

@@ -36,6 +36,19 @@ RSpec.describe 'Enterprise Conversations API', type: :request do
         expect(response).to have_http_status(:unprocessable_entity)
         expect(JSON.parse(response.body, symbolize_names: true)[:message]).to eq('Sla policy conversation already has a different sla')
       end
+
+      it 'throws error if conversation contact is blocked' do
+        conversation.contact.update!(blocked: true)
+
+        patch "/api/v1/accounts/#{account.id}/conversations/#{conversation.display_id}",
+              params: params,
+              headers: agent.create_new_auth_token,
+              as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(JSON.parse(response.body, symbolize_names: true)[:message])
+          .to eq('Sla policy cannot be assigned to conversations with blocked contacts')
+      end
     end
   end
 end

spec/enterprise/controllers/enterprise/api/v2/accounts/reports_controller_spec.rb

@@ -64,4 +64,28 @@ RSpec.describe 'Enterprise Reports API', type: :request do
       end
     end
   end
+
+  describe 'GET /api/v2/accounts/:account_id/reports/drilldown' do
+    context 'when it is an agent with report_manage permission' do
+      let(:params) do
+        super().merge(
+          metric: 'conversations_count',
+          type: :account,
+          since: start_of_today.to_s,
+          until: end_of_today.to_s,
+          bucket_timestamp: start_of_today.to_s,
+          group_by: 'day'
+        )
+      end
+
+      it 'returns unauthorized' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params,
+            headers: agent_with_role.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
 end

spec/enterprise/jobs/onboarding/help_center_article_writer_job_spec.rb

@@ -102,6 +102,47 @@ RSpec.describe Onboarding::HelpCenterArticleWriterJob do
     end
   end
 
+  describe 'catch-all failure handling' do
+    # Any exception the job does not specifically handle (e.g.
+    # ActiveRecord::RecordInvalid from articles.create!, SSL errors, OOM)
+    # must still finalize the generation so state cannot wedge in
+    # "generating" at total - 1 until the Redis TTL expires.
+
+    it 'increments the counter on an unhandled StandardError without re-raising' do
+      allow(Onboarding::HelpCenterArticleBuilder).to receive(:new).and_raise(
+        StandardError, 'unexpected boom'
+      )
+
+      expect { described_class.perform_now(*job_args) }.not_to raise_error
+
+      expect(Onboarding::HelpCenterGenerationState.current(generation_id)).to include('finished' => '1')
+    end
+
+    it 'marks generation completed when the final writer fails with an unhandled error' do
+      allow(Onboarding::HelpCenterArticleBuilder).to receive(:new).and_raise(
+        StandardError, 'unexpected boom'
+      )
+      Onboarding::HelpCenterGenerationState.record_article_finished(generation_id)
+
+      described_class.perform_now(*job_args)
+
+      expect(Onboarding::HelpCenterGenerationState.current(generation_id)).to include(
+        'status' => 'completed', 'finished' => '2'
+      )
+    end
+
+    it 'logs the failure so the error is not silent' do
+      allow(Onboarding::HelpCenterArticleBuilder).to receive(:new).and_raise(
+        StandardError, 'unexpected boom'
+      )
+      allow(Rails.logger).to receive(:warn)
+
+      described_class.perform_now(*job_args)
+
+      expect(Rails.logger).to have_received(:warn).with(/gen=#{generation_id} failed: StandardError unexpected boom/)
+    end
+  end
+
   describe 'missing state' do
     let(:built_article) { instance_double(Article, id: 9876) }
 

spec/enterprise/jobs/sla/process_account_applied_slas_job_spec.rb

@@ -8,6 +8,11 @@ RSpec.describe Sla::ProcessAccountAppliedSlasJob do
     let!(:hit_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'hit') }
     let!(:miss_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'missed') }
     let!(:active_with_misses_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'active_with_misses') }
+    let!(:blocked_contact_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'active') }
+
+    before do
+      blocked_contact_applied_sla.conversation.contact.update!(blocked: true)
+    end
 
     it 'enqueues the job' do
       expect { described_class.perform_later(account) }.to have_enqueued_job(described_class)
@@ -18,6 +23,7 @@ RSpec.describe Sla::ProcessAccountAppliedSlasJob do
     it 'calls the ProcessAppliedSlaJob for both active and active_with_misses' do
       expect(Sla::ProcessAppliedSlaJob).to receive(:perform_later).with(active_with_misses_applied_sla).and_call_original
       expect(Sla::ProcessAppliedSlaJob).to receive(:perform_later).with(applied_sla).and_call_original
+      expect(Sla::ProcessAppliedSlaJob).not_to receive(:perform_later).with(blocked_contact_applied_sla)
       described_class.perform_now(account)
     end