test(playwright): add agent onboarding and inbox creation UI tests (#14707)

Adds E2E UI tests for two core Phase 2 flows, building on the Playwright
setup from #13578.

**Agent onboarding** — validates the Agents settings page, Add Agent
modal elements, form validation (name + email required, submit disabled
until valid), and cancel behaviour.

**Inbox creation** — walks through the full API channel inbox creation
journey: channel selection → form fill → agent assignment → finish
screen.

## What changed

New UI component objects (`tests/playwright/components/ui/`):
- `agent-page.component.ts`
- `add-agent-modal.component.ts`
- `add-agents-form.component.ts`
- `settings-inbox-page.component.ts`
- `channel-selector.component.ts`
- `api-channel-form.component.ts`
- `finish-setup.component.ts`

New test specs (`tests/playwright/tests/e2e/ui/`):
- `agent-onboarding-flow-ui-validation.spec.ts`
- `inbox-creation-flow.spec.ts`

Updated `components/ui/index.ts` barrel export to include all new
components.

## How to test

```bash
cd tests/playwright
npx playwright test tests/e2e/ui/
```

All 5 tests pass locally (3 login + 2 new flows).

Closes part of the Phase 2 scope from the [Playwright E2E discussion
#13500](https://github.com/orgs/chatwoot/discussions/13500).

---------

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

.circleci/config.yml

@@ -77,7 +77,8 @@ jobs:
 
       - node/install:
           node-version: '24.13'
-      - node/install-pnpm
+      - node/install-pnpm:
+          version: '10.2.0'
       - node/install-packages:
           pkg-manager: pnpm
           override-ci-command: pnpm i
@@ -118,7 +119,8 @@ jobs:
       - checkout
       - node/install:
           node-version: '24.13'
-      - node/install-pnpm
+      - node/install-pnpm:
+          version: '10.2.0'
       - node/install-packages:
           pkg-manager: pnpm
           override-ci-command: pnpm i
@@ -144,12 +146,13 @@ jobs:
   # Backend tests with parallelization
   backend-tests:
     <<: *defaults
-    parallelism: 20
+    parallelism: 18
     steps:
       - checkout
       - node/install:
           node-version: '24.13'
-      - node/install-pnpm
+      - node/install-pnpm:
+          version: '10.2.0'
       - node/install-packages:
           pkg-manager: pnpm
           override-ci-command: pnpm i

.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

AGENTS.md

@@ -43,13 +43,18 @@
 
 ## General Guidelines
 
-- MVP focus: Least code change, happy-path only
-- No unnecessary defensive programming
-- Ship the happy path first: limit guards/fallbacks to what production has proven necessary, then iterate
+- Prefer the smallest production-ready change that solves the current problem.
+- Build for the expected production path first. Do not add speculative guards, fallbacks, retries, or edge-case handling unless the caller can actually hit that case or production has proven it necessary.
+- When an impossible or misconfigured state would indicate a setup/deployment bug, let it fail loudly instead of silently skipping behavior.
+- For locked/internal configs that must exist in production, prefer direct reads (`find`, `find_by!`, required hash keys) over silent fallbacks.
+- Do not add validation or response checks unless the code uses the result or the check changes behavior meaningfully.
+- Prefer existing repo dependencies/client libraries over hand-rolled protocol code for auth, signing, parsing, or API plumbing.
+- Avoid one-use private helpers unless they hide real complexity or make the main flow meaningfully easier to read.
 - Prefer minimal, readable code over elaborate abstractions; clarity beats cleverness
 - Break down complex tasks into small, testable units
 - Iterate after confirmation
 - Avoid writing specs unless explicitly asked
+- In specs, avoid custom helper methods for setup/data. Prefer `let` values and direct per-example setup; only add a helper when it removes meaningful repeated complexity.
 - Remove dead/unreachable/unused code
 - Don’t write multiple versions or backups for the same logic — pick the best approach and implement it
 - Prefer `with_modified_env` (from spec helpers) over stubbing `ENV` directly in specs
@@ -80,8 +85,8 @@
 ## Project-Specific
 
 - **Translations**:
-  - Only update `en.yml` and `en.json`
-  - Other languages are handled by the community
+  - For product and source-string changes, only update `en.yml` and `en.json`; other languages are handled through Crowdin and the community
+  - Crowdin-generated translation sync PRs may update non-English locale files; do not flag those changes solely for modifying translated locale files
   - Backend i18n → `en.yml`, Frontend i18n → `en.json`
 - **Frontend**:
   - Use `components-next/` for message bubbles (the rest is being deprecated)

Gemfile

@@ -195,7 +195,7 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.10.0'
+gem 'ai-agents', '>= 0.12.0'
 
 # TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm', '>= 1.14.1'

Gemfile.lock

@@ -126,7 +126,7 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.10.0)
+    ai-agents (0.12.0)
       ruby_llm (~> 1.14)
     annotaterb (4.20.0)
       activerecord (>= 6.0.0)
@@ -198,7 +198,7 @@ GEM
     crack (1.0.0)
       bigdecimal
       rexml
-    crass (1.0.6)
+    crass (1.0.7)
     cronex (0.15.0)
       tzinfo
       unicode (>= 0.4.4.5)
@@ -211,13 +211,14 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog (2.19.0)
-      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
-      libdatadog (~> 18.1.0.1.0)
-      libddwaf (~> 1.24.1.0.3)
+    datadog (2.38.0)
+      cgi
+      datadog-ruby_core_source (~> 3.5, >= 3.5.3)
+      libdatadog (~> 36.0.0.1.0)
+      libddwaf (~> 1.30.0.0.0)
       logger
       msgpack
-    datadog-ruby_core_source (3.4.1)
+    datadog-ruby_core_source (3.5.3)
     date (3.5.1)
     debug (1.8.0)
       irb (>= 1.5.0)
@@ -522,15 +523,16 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    libdatadog (18.1.0.1.0)
-    libdatadog (18.1.0.1.0-x86_64-linux)
-    libddwaf (1.24.1.0.3)
+    libdatadog (36.0.0.1.0)
+    libdatadog (36.0.0.1.0-arm64-darwin)
+    libdatadog (36.0.0.1.0-x86_64-linux)
+    libddwaf (1.30.0.0.2)
       ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-arm64-darwin)
+    libddwaf (1.30.0.0.2-arm64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-darwin)
+    libddwaf (1.30.0.0.2-x86_64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-linux)
+    libddwaf (1.30.0.0.2-x86_64-linux)
       ffi (~> 1.0)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
@@ -547,7 +549,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.23.1)
+    loofah (2.25.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -570,7 +572,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)
@@ -740,8 +742,8 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.1)
-      loofah (~> 2.21)
+    rails-html-sanitizer (1.7.1)
+      loofah (~> 2.25, >= 2.25.2)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     rails-i18n (7.0.10)
       i18n (>= 0.7, < 2)
@@ -1030,7 +1032,7 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    websocket-driver (0.7.7)
+    websocket-driver (0.8.2)
       base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -1058,7 +1060,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.10.0)
+  ai-agents (>= 0.12.0)
   annotaterb
   attr_extras
   audited (~> 5.4, >= 5.4.1)

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2024 Chatwoot Inc.
+Copyright (c) 2017-2026 Chatwoot Inc.
 
 Portions of this software are licensed as follows:
 

VERSION_CW

@@ -1 +1 @@
-4.15.1
+4.16.1

app/builders/agent_builder.rb

@@ -2,6 +2,14 @@
 # It initializes with necessary attributes and provides a perform method
 # to create a user and account user in a transaction.
 class AgentBuilder
+  LIMIT_EXCEEDED_MESSAGE = 'Account limit exceeded. Please purchase more licenses'.freeze
+
+  class LimitExceededError < StandardError
+    def initialize
+      super(AgentBuilder::LIMIT_EXCEEDED_MESSAGE)
+    end
+  end
+
   # Initializes an AgentBuilder with necessary attributes.
   # @param email [String] the email of the user.
   # @param name [String] the name of the user.
@@ -14,15 +22,23 @@ class AgentBuilder
   # Creates a user and account user in a transaction.
   # @return [User] the created user.
   def perform
-    ActiveRecord::Base.transaction do
-      @user = find_or_create_user
-      create_account_user
+    account.with_lock do
+      raise LimitExceededError unless can_add_agent?
+
+      ActiveRecord::Base.transaction do
+        @user = find_or_create_user
+        create_account_user
+      end
     end
     @user
   end
 
   private
 
+  def can_add_agent?
+    account.usage_limits[:agents] > account.account_users.count
+  end
+
   # Finds a user by email or creates a new one with a temporary password.
   # @return [User] the found or created user.
   def find_or_create_user

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/agent_bots_controller.rb

@@ -1,5 +1,4 @@
 class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
-  before_action :current_account
   before_action :check_authorization
   before_action :agent_bot, except: [:index, :create]
 

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

@@ -1,8 +1,6 @@
 class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   before_action :fetch_agent, except: [:create, :index, :bulk_create]
   before_action :check_authorization
-  before_action :validate_limit, only: [:create]
-  before_action :validate_limit_for_bulk_create, only: [:bulk_create]
 
   def index
     @agents = agents
@@ -20,6 +18,8 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     )
 
     @agent = builder.perform
+  rescue AgentBuilder::LimitExceededError => e
+    render_payment_required(e.message)
   end
 
   def update
@@ -36,25 +36,13 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   def bulk_create
     emails = params[:emails]
 
-    emails.each do |email|
-      builder = AgentBuilder.new(
-        email: email,
-        name: email.split('@').first,
-        inviter: current_user,
-        account: Current.account
-      )
-      begin
-        builder.perform
-      rescue ActiveRecord::RecordInvalid => e
-        Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
-      end
-    end
-
+    bulk_create_agents(emails)
     # This endpoint is used to bulk create agents during onboarding
     # onboarding_step key in present in Current account custom attributes, since this is a one time operation
-    Current.account.custom_attributes.delete('onboarding_step')
-    Current.account.save!
+    clear_onboarding_step
     head :ok
+  rescue AgentBuilder::LimitExceededError => e
+    render_payment_required(e.message)
   end
 
   private
@@ -87,22 +75,33 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     @agents ||= Current.account.users.order_by_full_name.includes(:account_users, { avatar_attachment: [:blob] })
   end
 
-  def validate_limit_for_bulk_create
-    limit_available = params[:emails].count <= available_agent_count
+  def bulk_create_agents(emails)
+    Current.account.with_lock do
+      raise AgentBuilder::LimitExceededError if emails.count > available_agent_count
 
-    render_payment_required('Account limit exceeded. Please purchase more licenses') unless limit_available
+      emails.each { |email| create_agent_from_email(email) }
+    end
   end
 
-  def validate_limit
-    render_payment_required('Account limit exceeded. Please purchase more licenses') unless can_add_agent?
+  def create_agent_from_email(email)
+    builder = AgentBuilder.new(
+      email: email,
+      name: email.split('@').first,
+      inviter: current_user,
+      account: Current.account
+    )
+    builder.perform
+  rescue ActiveRecord::RecordInvalid => e
+    Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
+  end
+
+  def clear_onboarding_step
+    Current.account.custom_attributes.delete('onboarding_step')
+    Current.account.save!
   end
 
   def available_agent_count
-    Current.account.usage_limits[:agents] - agents.count
-  end
-
-  def can_add_agent?
-    available_agent_count.positive?
+    Current.account.usage_limits[:agents] - Current.account.account_users.count
   end
 
   def delete_user_record(agent)

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

@@ -30,8 +30,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    @article.update!(article_params) if params[:article].present?
-    render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
+    persist_article_changes if params[:article].present?
+    render json: { message: @article.errors.full_messages.to_sentence }, status: :unprocessable_entity and return unless @article.valid?
   end
 
   def destroy
@@ -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
@@ -67,12 +67,26 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
     @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
   end
 
+  # Draft-only autosaves must not bump the public-facing updated_at, so write
+  # them with update_columns (which skips the timestamp). update_columns also
+  # skips validations, so assign and validate first to avoid persisting content
+  # that exceeds the column length limit.
+  def persist_article_changes
+    keys = article_params.to_h.keys
+    if keys.any? && (keys - %w[draft_title draft_content]).empty?
+      @article.assign_attributes(article_params)
+      @article.update_columns(article_params.to_h) if @article.valid? # rubocop:disable Rails/SkipsModelValidations
+    else
+      @article.update!(article_params)
+    end
+  end
+
   def article_params
     params.require(:article).permit(
       :title, :slug, :position, :content, :description, :category_id, :author_id, :associated_article_id, :status,
-      :locale, meta: [:title,
-                      :description,
-                      { tags: [] }]
+      :locale, :draft_title, :draft_content, meta: [:title,
+                                                    :description,
+                                                    { tags: [] }]
     )
   end
 

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

@@ -2,6 +2,8 @@ class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseCon
   before_action :fetch_inboxes
 
   def index
+    # TODO: Remove this opt-in once mobile clients support AgentBot assignees in this payload.
+    @include_agent_bots = params[:include_agent_bots].present?
     agent_ids = @inboxes.map do |inbox|
       authorize inbox, :show?
       member_ids = inbox.members.pluck(:user_id)
@@ -10,6 +12,7 @@ class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseCon
     agent_ids = agent_ids.inject(:&)
     agents = Current.account.users.where(id: agent_ids)
     @assignable_agents = (agents + Current.account.administrators).uniq
+    @agent_bots = @include_agent_bots ? AgentBot.accessible_to(Current.account) : []
   end
 
   private

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

@@ -2,5 +2,14 @@ class Api::V1::Accounts::BaseController < Api::BaseController
   include SwitchLocale
   include EnsureCurrentAccountHelper
   before_action :current_account
+  before_action :validate_token_api_access, if: :authenticate_by_access_token?
   around_action :switch_locale_using_account_locale
+
+  private
+
+  def validate_token_api_access
+    return if Current.account.api_and_webhooks_enabled?
+
+    render json: { error: 'API access is not enabled for this account' }, status: :forbidden
+  end
 end

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

@@ -0,0 +1,28 @@
+class Api::V1::Accounts::BrandedEmailLayoutsController < Api::V1::Accounts::BaseController
+  before_action :check_admin_authorization?
+
+  def show
+    set_branded_email_layout
+  end
+
+  def update
+    unless Current.account.feature_enabled?(:branded_email_templates)
+      render_could_not_create_error('Branded email templates feature is not enabled')
+      return
+    end
+
+    branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
+    EmailTemplate.update_account_branded_layout!(account: Current.account, body: branded_email_layout) if params.key?(:branded_email_layout)
+    set_branded_email_layout
+  rescue ActiveRecord::RecordInvalid => e
+    render_could_not_create_error(e.record.errors.full_messages.join(', '))
+  end
+
+  private
+
+  def set_branded_email_layout
+    @branded_email_layout = EmailTemplate.account_branded_layout_template_for(Current.account)&.body
+  end
+end
+
+Api::V1::Accounts::BrandedEmailLayoutsController.prepend_mod_with('Api::V1::Accounts::BrandedEmailLayoutsController')

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

@@ -6,6 +6,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
     page_access_token = params[:page_access_token]
     page_id = params[:page_id]
     inbox_name = params[:inbox_name]
+
     ActiveRecord::Base.transaction do
       facebook_channel = Current.account.facebook_pages.create!(
         page_id: page_id, user_access_token: user_access_token,
@@ -15,6 +16,8 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
       set_instagram_id(page_access_token, facebook_channel)
       set_avatar(@facebook_inbox, page_id)
     end
+  rescue CustomExceptions::Inbox::LimitExceeded => e
+    render_error_response(e)
   rescue StandardError => e
     ChatwootExceptionTracker.new(e).capture_exception
     Rails.logger.error "Error in register_facebook_page: #{e.message}"

app/controllers/api/v1/accounts/captain/preferences_controller.rb

@@ -1,5 +1,4 @@
 class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::BaseController
-  before_action :current_account
   before_action :authorize_account_update, only: [:update]
 
   def show
@@ -8,8 +7,8 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
 
   def update
     params_to_update = captain_params
-    @current_account.captain_models = params_to_update[:captain_models] if params_to_update[:captain_models]
-    @current_account.captain_features = params_to_update[:captain_features] if params_to_update[:captain_features]
+    @current_account.captain_models = params_to_update[:captain_models] if params_to_update.key?(:captain_models)
+    @current_account.captain_features = params_to_update[:captain_features] if params_to_update.key?(:captain_features)
     @current_account.save!
 
     render json: preferences_payload
@@ -38,7 +37,7 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
 
   def merged_captain_models
     existing_models = @current_account.captain_models || {}
-    existing_models.merge(permitted_captain_models)
+    existing_models.merge(permitted_captain_models).compact_blank.presence
   end
 
   def merged_captain_features
@@ -47,30 +46,38 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
   end
 
   def permitted_captain_models
-    params.require(:captain_models).permit(
-      :editor, :assistant, :copilot, :label_suggestion,
-      :audio_transcription, :help_center_search
-    ).to_h.stringify_keys
+    params.require(:captain_models).permit(*captain_feature_keys).to_h.stringify_keys
   end
 
   def permitted_captain_features
-    params.require(:captain_features).permit(
-      :editor, :assistant, :copilot, :label_suggestion,
-      :audio_transcription, :help_center_search
-    ).to_h.stringify_keys
+    params.require(:captain_features).permit(*captain_feature_keys).to_h.stringify_keys
+  end
+
+  def captain_feature_keys
+    Llm::Models.feature_keys.map(&:to_sym)
   end
 
   def features_with_account_preferences
     preferences = Current.account.captain_preferences
     account_features = preferences[:features] || {}
-    account_models = preferences[:models] || {}
 
     Llm::Models.feature_keys.index_with do |feature_key|
       config = Llm::Models.feature_config(feature_key)
+      route = Llm::FeatureRouter.resolve(feature: feature_key, account: Current.account)
       config.merge(
+        default: default_model_for(feature_key),
         enabled: account_features[feature_key] == true,
-        selected: account_models[feature_key] || config[:default]
+        model: route[:model],
+        selected: route[:model],
+        provider: route[:provider],
+        source: route[:source]
       )
     end
   end
+
+  def default_model_for(feature_key)
+    return Llm::FeatureRouter::CAPTAIN_V2_ASSISTANT_MODEL if feature_key == 'assistant' && Current.account.feature_enabled?('captain_integration_v2')
+
+    Llm::Models.default_model_for(feature_key)
+  end
 end

app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb

@@ -6,6 +6,8 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
 
   def create
     process_create
+  rescue CustomExceptions::Inbox::LimitExceeded => e
+    render_error_response(e)
   rescue StandardError => e
     render_could_not_create_error(e.message)
   end

app/controllers/api/v1/accounts/conversations/direct_uploads_controller.rb

@@ -1,6 +1,17 @@
 class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage::DirectUploadsController
+  include DeviseTokenAuth::Concerns::SetUserByToken
+  include RequestExceptionHandler
+  include AccessTokenAuthHelper
   include EnsureCurrentAccountHelper
+
+  skip_before_action :verify_authenticity_token, if: :authenticate_by_access_token?
+
+  around_action :handle_with_exception
+  before_action :authenticate_access_token!, if: :authenticate_by_access_token?
+  before_action :validate_bot_access_token!, if: :authenticate_by_access_token?
+  before_action :authenticate_user!, unless: :authenticate_by_access_token?
   before_action :current_account
+  before_action :validate_token_api_access, if: :authenticate_by_access_token?
   before_action :conversation
 
   def create
@@ -11,6 +22,16 @@ class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage:
 
   private
 
+  def authenticate_by_access_token?
+    request.headers[:api_access_token].present? || request.headers[:HTTP_API_ACCESS_TOKEN].present?
+  end
+
+  def validate_token_api_access
+    return if Current.account.api_and_webhooks_enabled?
+
+    render json: { error: 'API access is not enabled for this account' }, status: :forbidden
+  end
+
   def conversation
     @conversation ||= Current.account.conversations.find_by(display_id: params[:conversation_id])
   end

app/controllers/api/v1/accounts/conversations/messages_controller.rb

@@ -52,6 +52,9 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
     end
 
     render json: { content: translated_content }
+  rescue Google::Cloud::Error => e
+    # `details` carries the clean human message; `message` includes gRPC debug noise
+    render_could_not_create_error(e.details.presence || e.message)
   end
 
   private

app/controllers/api/v1/accounts/conversations/participants_controller.rb

@@ -1,27 +1,40 @@
 class Api::V1::Accounts::Conversations::ParticipantsController < Api::V1::Accounts::Conversations::BaseController
+  include Events::Types
+
   def show
     @participants = @conversation.conversation_participants
   end
 
   def create
+    participant_ids_to_add = participants_to_be_added_ids
+
     ActiveRecord::Base.transaction do
-      @participants = participants_to_be_added_ids.map { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
+      @participants = participant_ids_to_add.map { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
     end
+    notify_unread_count_change if participant_ids_to_add.any?
   end
 
   def update
+    participant_ids_to_add = participants_to_be_added_ids
+    participant_ids_to_remove = participants_to_be_removed_ids
+    changed_participant_ids = participant_ids_to_add + participant_ids_to_remove
+
     ActiveRecord::Base.transaction do
-      participants_to_be_added_ids.each { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
-      participants_to_be_removed_ids.each { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
+      participant_ids_to_add.each { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
+      participant_ids_to_remove.each { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
     end
+    notify_unread_count_change if changed_participant_ids.any?
     @participants = @conversation.conversation_participants
     render action: 'show'
   end
 
   def destroy
+    participant_ids_to_remove = current_participant_ids & params[:user_ids]
+
     ActiveRecord::Base.transaction do
       params[:user_ids].map { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
     end
+    notify_unread_count_change if participant_ids_to_remove.any?
     head :ok
   end
 
@@ -38,4 +51,11 @@ class Api::V1::Accounts::Conversations::ParticipantsController < Api::V1::Accoun
   def current_participant_ids
     @current_participant_ids ||= @conversation.conversation_participants.pluck(:user_id)
   end
+
+  def notify_unread_count_change
+    return unless Current.account.feature_enabled?('conversation_unread_counts')
+    return unless Current.account.feature_enabled?('unread_count_for_filters')
+
+    Rails.configuration.dispatcher.dispatch(CONVERSATION_UNREAD_COUNT_CHANGED, Time.zone.now, conversation: @conversation)
+  end
 end

app/controllers/api/v1/accounts/conversations/unread_counts_controller.rb

@@ -2,12 +2,28 @@ class Api::V1::Accounts::Conversations::UnreadCountsController < Api::V1::Accoun
   before_action :ensure_unread_counts_enabled
 
   def index
-    counts = ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
+    counts = if filtered_unread_counts_enabled?
+               instrumentation.summarize_request(account_id: Current.account.id) { unread_counts }
+             else
+               unread_counts
+             end
     render json: { payload: counts }
   end
 
   private
 
+  def unread_counts
+    ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
+  end
+
+  def filtered_unread_counts_enabled?
+    Current.account.feature_enabled?(::Conversations::UnreadCounts::FilteredCounter::FEATURE_FLAG)
+  end
+
+  def instrumentation
+    ::Conversations::UnreadCounts::FilteredCountInstrumentation
+  end
+
   def ensure_unread_counts_enabled
     return if Current.account.feature_enabled?('conversation_unread_counts')
 

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

@@ -164,6 +164,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     # rubocop:enable Rails/SkipsModelValidations
 
     ::Conversations::UnreadCounts::Notifier.new(@conversation).perform
+    ::Conversations::UnreadCounts::FilteredCountInvalidator.new(Current.account).conversation_changed!
   end
 
   def should_update_last_seen?

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

@@ -1,4 +1,5 @@
 class Api::V1::Accounts::DashboardAppsController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
   before_action :fetch_dashboard_apps, except: [:create]
   before_action :fetch_dashboard_app, only: [:show, :update, :destroy]
 

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

@@ -0,0 +1,159 @@
+require 'csv'
+
+class Api::V1::Accounts::DataImportsController < Api::V1::Accounts::BaseController
+  DATA_IMPORT_FEATURE = 'data_import'.freeze
+
+  before_action :ensure_data_import_feature_enabled
+  before_action :set_data_import, only: [:show, :start, :abandon, :error_logs, :skip_logs]
+  before_action :check_authorization
+
+  def index
+    @data_imports = policy_scope(Current.account.data_imports).includes(:initiated_by).order(created_at: :desc)
+    data_import_ids = @data_imports.map(&:id)
+    @import_errors_counts = DataImportError.non_skip_logs.where(data_import_id: data_import_ids).group(:data_import_id).count
+    @skip_logs_counts = DataImportError.skip_logs.where(data_import_id: data_import_ids).group(:data_import_id).count
+  end
+
+  def show
+    render_show
+  end
+
+  def validate_source
+    totals = validate_intercom_source
+    render json: { valid: true, totals: totals }
+  rescue DataImports::Intercom::Client::AuthenticationError
+    render_source_validation_error('We could not validate this Intercom access key. Check the key and its permissions.')
+  rescue DataImports::Intercom::Client::Error
+    render_source_validation_error('Intercom could not be reached. Please try again.')
+  rescue ArgumentError => e
+    render_source_validation_error(e.message)
+  end
+
+  def create
+    @data_import = creation_service.perform
+    unless @data_import
+      render json: { message: 'Another data import is already in progress.' }, status: :unprocessable_entity
+      return
+    end
+
+    DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id)
+    render_show
+  rescue DataImports::Intercom::Client::AuthenticationError
+    render_source_validation_error('We could not validate this Intercom access key. Check the key and its permissions.')
+  rescue DataImports::Intercom::Client::Error
+    render_source_validation_error('Intercom could not be reached. Please try again.')
+  rescue ArgumentError => e
+    render_source_validation_error(e.message)
+  end
+
+  def start
+    restart_service = DataImports::Intercom::RestartService.new(account: Current.account, data_import: @data_import)
+    restart_result = restart_service.perform
+    @data_import = restart_service.data_import
+    if restart_result == :access_token_missing
+      render json: { message: 'The Intercom access key for this import is unavailable.' }, status: :unprocessable_entity
+      return
+    end
+
+    DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id) if restart_result == :enqueue
+    render_show
+  end
+
+  def abandon
+    @data_import.abandon!
+    render_show
+  end
+
+  def skip_logs
+    send_data(
+      skip_logs_csv,
+      filename: "data-import-#{@data_import.id}-skip-logs.csv",
+      type: 'text/csv'
+    )
+  end
+
+  def error_logs
+    send_data(
+      error_logs_csv,
+      filename: "data-import-#{@data_import.id}-error-logs.csv",
+      type: 'text/csv'
+    )
+  end
+
+  private
+
+  def ensure_data_import_feature_enabled
+    raise Pundit::NotAuthorizedError unless Current.account.feature_enabled?(DATA_IMPORT_FEATURE)
+  end
+
+  def set_data_import
+    @data_import = Current.account.data_imports.find(params[:id])
+  end
+
+  def check_authorization
+    authorize(@data_import || DataImport)
+  end
+
+  def permitted_params
+    params.permit(:name, :source_provider, :access_token, import_types: [])
+  end
+
+  def creation_service
+    DataImports::Intercom::CreationService.new(
+      account: Current.account,
+      initiated_by: Current.user,
+      source_params: permitted_params.to_h
+    )
+  end
+
+  def import_types
+    return DataImports::Intercom::Importer::DEFAULT_IMPORT_TYPES unless permitted_params.key?(:import_types)
+
+    Array(permitted_params[:import_types]).compact_blank
+  end
+
+  def validate_intercom_source
+    raise ArgumentError, 'Unsupported import source.' unless permitted_params[:source_provider] == 'intercom'
+
+    DataImports::Intercom::CredentialsValidator.new(
+      access_token: permitted_params[:access_token],
+      import_types: import_types
+    ).perform
+  end
+
+  def render_source_validation_error(message)
+    render json: { valid: false, message: message }, status: :unprocessable_entity
+  end
+
+  def render_show
+    @import_errors_finder = DataImportErrorFinder.new(@data_import)
+    @skip_logs_finder = DataImportSkipLogFinder.new(@data_import, params)
+    render :show
+  end
+
+  def skip_logs_csv
+    logs_csv(@data_import.import_errors.skip_logs)
+  end
+
+  def error_logs_csv
+    logs_csv(@data_import.import_errors.non_skip_logs)
+  end
+
+  def logs_csv(logs)
+    CSV.generate(headers: true) do |csv|
+      csv << %w[created_at kind source_object_type source_object_id error_code message details]
+
+      logs.order(:created_at).find_each do |log|
+        csv << [
+          log.created_at.iso8601,
+          log.details['kind'],
+          log.source_object_type,
+          log.source_object_id,
+          log.error_code,
+          log.message,
+          log.details.to_json
+        ]
+      end
+    end
+  end
+end

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

@@ -2,7 +2,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   include Api::V1::InboxesHelper
   before_action :fetch_inbox, except: [:index, :create]
   before_action :fetch_agent_bot, only: [:set_agent_bot]
-  before_action :validate_limit, only: [:create]
   # we are already handling the authorization in fetch inbox
   before_action :check_authorization, except: [:show]
 
@@ -46,11 +45,20 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    inbox_params = permitted_params.except(:channel, :csat_config)
-    inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
-    @inbox.update!(inbox_params)
-    update_inbox_working_hours
-    update_channel if channel_update_required?
+    continue_update = false
+
+    ActiveRecord::Base.transaction do
+      continue_update = update_branded_email_layout
+      raise ActiveRecord::Rollback unless continue_update
+
+      inbox_params = permitted_params.except(:channel, :csat_config)
+      inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
+      @inbox.update!(inbox_params)
+      update_inbox_working_hours
+      update_channel if channel_update_required?
+    end
+
+    return unless continue_update
   end
 
   def agent_bot
@@ -125,8 +133,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def reauthorize_and_update_channel(channel_attributes)
-    @inbox.channel.reauthorized! if @inbox.channel.respond_to?(:reauthorized!)
     @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
+    @inbox.channel.reauthorized! if @inbox.channel.respond_to?(:reauthorized!)
   end
 
   def update_channel_feature_flags
@@ -156,6 +164,34 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     formatted['template'] = config['template'] if config['template'].present?
   end
 
+  def update_branded_email_layout
+    return true unless params.key?(:branded_email_layout)
+
+    branded_email_layout = normalized_branded_email_layout
+
+    unless Current.account.feature_enabled?(:branded_email_templates)
+      return true if branded_email_layout.blank?
+
+      render_could_not_create_error('Branded email templates feature is not enabled')
+      return false
+    end
+
+    unless @inbox.email?
+      return true if branded_email_layout.blank?
+
+      render_could_not_create_error('Branded email layout is only supported for email inboxes')
+      return false
+    end
+
+    @inbox.update_branded_email_layout!(branded_email_layout)
+    true
+  rescue ActiveRecord::RecordInvalid => e
+    render_could_not_create_error(e.record.errors.full_messages.join(', '))
+    false
+  end
+
+  def normalized_branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
+
   def inbox_attributes
     [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,

app/controllers/api/v1/accounts/integrations/base_controller.rb

@@ -0,0 +1,9 @@
+class Api::V1::Accounts::Integrations::BaseController < Api::V1::Accounts::BaseController
+  private
+
+  # Managing an integration hook (create/update/destroy) is admin-only, enforced via HookPolicy.
+  # Subclasses opt in per action with `before_action :check_authorization, only: [...]`.
+  def check_authorization
+    authorize(:hook)
+  end
+end

app/controllers/api/v1/accounts/integrations/dyte_controller.rb

@@ -15,7 +15,7 @@ class Api::V1::Accounts::Integrations::DyteController < Api::V1::Accounts::BaseC
     end
 
     render_response(
-      dyte_processor_service.add_participant_to_meeting(@message.content_attributes['data']['meeting_id'], Current.user)
+      dyte_processor_service.add_participant_to_meeting(@message.content_attributes['data']['meeting_id'], Current.user, @message)
     )
   end
 

app/controllers/api/v1/accounts/integrations/hooks_controller.rb

@@ -1,4 +1,4 @@
-class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Integrations::BaseController
   before_action :fetch_hook, except: [:create]
   before_action :check_authorization
 
@@ -35,10 +35,6 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Base
     @hook = Current.account.hooks.find(params[:id])
   end
 
-  def check_authorization
-    authorize(:hook)
-  end
-
   def permitted_params
     params.require(:hook).permit(:app_id, :inbox_id, :status, settings: {})
   end

app/controllers/api/v1/accounts/integrations/linear_controller.rb

@@ -1,6 +1,7 @@
-class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Integrations::BaseController
   before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
   before_action :fetch_hook, only: [:destroy]
+  before_action :check_authorization, only: [:destroy]
 
   def destroy
     revoke_linear_token

app/controllers/api/v1/accounts/integrations/notion_controller.rb

@@ -1,5 +1,6 @@
-class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::Integrations::BaseController
   before_action :fetch_hook, only: [:destroy]
+  before_action :check_authorization, only: [:destroy]
 
   def destroy
     @hook.destroy!

app/controllers/api/v1/accounts/integrations/shopify_controller.rb

@@ -1,7 +1,8 @@
-class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::Integrations::BaseController
   include Shopify::IntegrationHelper
   before_action :setup_shopify_context, only: [:orders]
   before_action :fetch_hook, except: [:auth]
+  before_action :check_authorization, only: [:destroy]
   before_action :validate_contact, only: [:orders]
 
   def auth

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

@@ -1,5 +1,4 @@
 class Api::V1::Accounts::LabelsController < Api::V1::Accounts::BaseController
-  before_action :current_account
   before_action :fetch_label, except: [:index, :create]
   before_action :check_authorization
 

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -6,7 +6,10 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
       {
         redirect_uri: "#{base_url}/microsoft/callback",
         scope: scope,
-        state: state
+        state: state,
+        # Force the Microsoft account picker so an already-signed-in account does not
+        # silently authorize and re-bind to an existing inbox in the new-inbox flow.
+        prompt: 'select_account'
       }
     )
     if redirect_url

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

@@ -1,17 +1,19 @@
 class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseController
   before_action :check_admin_authorization?
 
+  ONBOARDING_STEP_KEY = 'onboarding_step'.freeze
+  STEP_ACCOUNT_DETAILS = 'account_details'.freeze
+  STEP_INBOX_SETUP = 'inbox_setup'.freeze
+  ONBOARDING_STEPS = [STEP_ACCOUNT_DETAILS, STEP_INBOX_SETUP].freeze
+
   def update
+    return render json: { error: 'Invalid onboarding step' }, status: :unprocessable_entity unless ONBOARDING_STEPS.include?(params[:onboarding_step])
+
     @account = Current.account
-    finalize = finalizing_account_details?
-
-    @account.assign_attributes(account_params)
-    @account.custom_attributes.merge!(custom_attributes_params)
-    @account.custom_attributes.delete('onboarding_step') if finalize
-    @account.save!
-
-    # TODO: re-enable when the help center generation UI is ready to surface progress
-    # Onboarding::HelpCenterCreationService.new(@account, Current.user).perform if finalize && website.present?
+    # The client declares the step it is completing; `account_details` runs
+    # `complete_account_details`, and so on. The known-step guard above keeps the
+    # client value from `send`-ing an arbitrary method.
+    send("complete_#{params[:onboarding_step]}")
 
     render 'api/v1/accounts/update', format: :json
   end
@@ -22,12 +24,48 @@ class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseControll
 
   private
 
-  def finalizing_account_details?
-    @account.custom_attributes['onboarding_step'] == 'account_details'
+  def complete_account_details
+    # Only act while the cursor still points here, so a stale replay after
+    # onboarding finished can't re-enter it.
+    return unless current_step == STEP_ACCOUNT_DETAILS
+
+    @account.assign_attributes(account_params)
+    @account.custom_attributes.merge!(custom_attributes_params)
+
+    # inbox_setup is a cloud-only step (DEPLOYMENT_ENV config, not a hardcoded
+    # environment check); self-hosted finishes onboarding here.
+    if ChatwootApp.chatwoot_cloud?
+      move_to_step(STEP_INBOX_SETUP)
+      create_onboarding_inboxes
+    else
+      finish_onboarding
+    end
   end
 
-  def website
-    custom_attributes_params[:website]
+  def complete_inbox_setup
+    # Only finalize while the cursor still points here, so a stale or out-of-order
+    # request can't end onboarding early. Replays are no-ops.
+    return unless current_step == STEP_INBOX_SETUP
+
+    finish_onboarding
+  end
+
+  def current_step
+    @account.custom_attributes[ONBOARDING_STEP_KEY]
+  end
+
+  def move_to_step(step)
+    @account.custom_attributes[ONBOARDING_STEP_KEY] = step
+    @account.save!
+  end
+
+  def finish_onboarding
+    @account.custom_attributes.delete(ONBOARDING_STEP_KEY)
+    @account.save!
+  end
+
+  def create_onboarding_inboxes
+    Onboarding::WebWidgetCreationService.new(@account, Current.user).perform
   end
 
   def account_params

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

@@ -81,7 +81,8 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       :name, :page_title, :slug, :archived,
       { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
                  { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
-                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } },
+                 { popular_content: popular_content_keys.index_with { { category_ids: [], article_ids: [] } } }] }
     )
   end
 
@@ -89,6 +90,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     params.dig(:portal, :config, :locale_translations)&.keys || []
   end
 
+  def popular_content_keys
+    params.dig(:portal, :config, :popular_content)&.keys || []
+  end
+
   def live_chat_widget_params
     permitted_params = params.permit(:inbox_id)
     return {} unless permitted_params.key?(:inbox_id)

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

@@ -29,6 +29,6 @@ class Api::V1::Accounts::TeamsController < Api::V1::Accounts::BaseController
   end
 
   def team_params
-    params.require(:team).permit(:name, :description, :allow_auto_assign)
+    params.require(:team).permit(:name, :description, :allow_auto_assign, :icon, :icon_color)
   end
 end

app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb

@@ -1,4 +1,7 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
+  before_action :ensure_embedded_signup_enabled
+  # Reconfiguring/reauthorizing a live inbox swaps its credentials, so restrict it to admins.
+  before_action :check_admin_authorization?, if: -> { params[:inbox_id].present? }
   before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
 
   # POST /api/v1/accounts/:account_id/whatsapp/authorization
@@ -8,12 +11,21 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
     validate_embedded_signup_params!
     channel = process_embedded_signup
     render_success_response(channel.inbox)
-  rescue StandardError => e
+  rescue CustomExceptions::Inbox::LimitExceeded => e
     render_error_response(e)
+  rescue StandardError => e
+    render_embedded_signup_error(e)
   end
 
   private
 
+  def ensure_embedded_signup_enabled
+    return unless ChatwootApp.chatwoot_cloud?
+    return if Current.account.feature_enabled?('whatsapp_embedded_signup_inbox_creation')
+
+    raise Pundit::NotAuthorizedError
+  end
+
   def process_embedded_signup
     service = Whatsapp::EmbeddedSignupService.new(
       account: Current.account,
@@ -29,7 +41,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
   end
 
   def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
+    return if @inbox.channel.reauthorization_required? || can_reconfigure_channel?
 
     render json: {
       success: false,
@@ -37,9 +49,11 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
     }, status: :unprocessable_entity
   end
 
-  def can_upgrade_to_embedded_signup?
+  def can_reconfigure_channel?
     channel = @inbox.channel
     return false unless channel.provider == 'whatsapp_cloud'
+    return true if ChatwootApp.chatwoot_cloud?
+    return Current.account.feature_enabled?('whatsapp_reconfigure') if channel.provider_config['source'] == 'embedded_signup'
 
     true
   end
@@ -55,7 +69,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
     render json: response
   end
 
-  def render_error_response(error)
+  def render_embedded_signup_error(error)
     Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
     Rails.logger.error error.backtrace.join("\n")
     render json: {

app/controllers/api/v1/accounts_controller.rb

@@ -8,6 +8,7 @@ class Api::V1::AccountsController < Api::BaseController
   before_action :ensure_account_name, only: [:create]
   before_action :validate_captcha, only: [:create]
   before_action :fetch_account, except: [:create]
+  before_action :validate_token_api_access, if: :authenticate_by_access_token?, except: [:create]
   before_action :check_authorization, except: [:create]
 
   rescue_from CustomExceptions::Account::InvalidEmail,
@@ -105,6 +106,12 @@ class Api::V1::AccountsController < Api::BaseController
     @current_account_user = @account.account_users.find_by(user_id: current_user.id)
   end
 
+  def validate_token_api_access
+    return if @account.api_and_webhooks_enabled?
+
+    render json: { error: 'API access is not enabled for this account' }, status: :forbidden
+  end
+
   def account_params
     params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :user_full_name)
   end

app/controllers/api/v1/widget/base_controller.rb

@@ -59,6 +59,10 @@ class Api::V1::Widget::BaseController < ApplicationController
     permitted_params.dig(:contact, :phone_number)
   end
 
+  def contact_custom_attributes
+    permitted_params.dig(:contact, :custom_attributes)&.to_h
+  end
+
   def browser_params
     {
       browser_name: browser.name,

app/controllers/api/v1/widget/contacts_controller.rb

@@ -2,6 +2,7 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
   include WidgetHelper
 
   before_action :validate_hmac, only: [:set_user]
+  before_action :validate_hmac_for_identified_update, only: [:update]
 
   def show; end
 
@@ -46,6 +47,16 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
     @contact.identifier.present? && @contact.identifier != permitted_params[:identifier]
   end
 
+  # The plain update endpoint is also used for anonymous prechat updates
+  # (name/email/phone/custom_attributes with no identifier), which must keep
+  # working on hmac_mandatory inboxes. Only the identity-binding path, where an
+  # identifier is supplied and the contact can be rebound, requires HMAC.
+  def validate_hmac_for_identified_update
+    return if params[:identifier].blank?
+
+    validate_hmac
+  end
+
   def validate_hmac
     return unless should_verify_hmac?
 
@@ -62,11 +73,15 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
   end
 
   def valid_hmac?
-    params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
+    expected_hash = OpenSSL::HMAC.hexdigest(
       'sha256',
       @web_widget.hmac_token,
       params[:identifier].to_s
     )
+    identifier_hash = params[:identifier_hash].to_s
+    return false unless identifier_hash.bytesize == expected_hash.bytesize
+
+    ActiveSupport::SecurityUtils.secure_compare(identifier_hash, expected_hash)
   end
 
   def permitted_params

app/controllers/api/v1/widget/conversations_controller.rb

@@ -19,7 +19,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   def process_update_contact
     @contact = ContactIdentifyAction.new(
       contact: @contact,
-      params: { email: contact_email, phone_number: contact_phone_number, name: contact_name },
+      params: { email: contact_email, phone_number: contact_phone_number, name: contact_name, custom_attributes: contact_custom_attributes },
       retain_original_contact_name: true,
       discard_invalid_attrs: true
     ).perform
@@ -95,7 +95,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def permitted_params
-    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
+    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number, { custom_attributes: {} }],
                                                                message: [:content, :referer_url, :timestamp, :echo_id],
                                                                custom_attributes: {})
   end

app/controllers/api/v1/widget/integrations/dyte_controller.rb

@@ -10,7 +10,8 @@ class Api::V1::Widget::Integrations::DyteController < Api::V1::Widget::BaseContr
 
     response = dyte_processor_service.add_participant_to_meeting(
       @message.content_attributes['data']['meeting_id'],
-      @conversation.contact
+      @conversation.contact,
+      @message
     )
     render_response(response)
   end

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/controllers/concerns/ensure_current_account_helper.rb

@@ -14,6 +14,8 @@ module EnsureCurrentAccountHelper
       account_accessible_for_user?(account)
     elsif @resource.is_a?(AgentBot)
       account_accessible_for_bot?(account)
+    else
+      render_unauthorized(I18n.t('errors.account.not_authorized'))
     end
     account
   end
@@ -21,7 +23,7 @@ module EnsureCurrentAccountHelper
   def account_accessible_for_user?(account)
     @current_account_user = account.account_users.find_by(user_id: current_user.id)
     Current.account_user = @current_account_user
-    render_unauthorized('You are not authorized to access this account') unless @current_account_user
+    render_unauthorized(I18n.t('errors.account.not_authorized')) unless @current_account_user
   end
 
   def account_accessible_for_bot?(account)

app/controllers/concerns/portal_home_data.rb

@@ -0,0 +1,65 @@
+module PortalHomeData
+  extend ActiveSupport::Concern
+
+  private
+
+  def load_home_data
+    load_recommended_content
+    # The classic hero only needs the recommendations above; the rest is
+    # documentation-layout home data (also used on custom-domain home pages).
+    return unless @portal.layout == 'documentation'
+
+    @visible_categories = @portal.categories
+                                 .where(locale: @locale)
+                                 .joins(:articles).where(articles: { status: :published })
+                                 .order(position: :asc)
+                                 .group('categories.id')
+    @popular_topics = @recommended_categories.presence || @visible_categories.first(3)
+    @featured = base_articles.order_by_views.limit(6)
+    @category_contributors = build_category_contributors(@visible_categories)
+  end
+
+  def load_recommended_content
+    @recommended_categories = recommended_categories
+    @recommended_articles = recommended_articles
+  end
+
+  def base_articles
+    @base_articles ||= @portal.articles.published.where(locale: @locale).includes(:author, :category)
+  end
+
+  # Admin-recommended categories for the locale, in the chosen order. Unlike the
+  # position-based fallback, published articles aren't required: the admin's pick wins.
+  def recommended_categories
+    ids = @portal.popular_category_ids(@locale)
+    ordered_by_ids(@portal.categories.where(locale: @locale, id: ids), ids)
+  end
+
+  # Admin-recommended articles for the locale, in the chosen order, limited to
+  # published articles that still exist.
+  def recommended_articles
+    ids = @portal.popular_article_ids(@locale)
+    ordered_by_ids(base_articles.where(id: ids), ids)
+  end
+
+  # Loads the scope and returns its records ordered to match `ids`, dropping any
+  # that no longer exist. Skips the query entirely when `ids` is blank.
+  def ordered_by_ids(scope, ids)
+    return [] if ids.blank?
+
+    by_id = scope.index_by(&:id)
+    ids.filter_map { |id| by_id[id] }
+  end
+
+  def build_category_contributors(categories)
+    category_ids = categories.map(&:id)
+    return {} if category_ids.empty?
+
+    @portal.articles
+           .published
+           .where(locale: @locale, category_id: category_ids)
+           .includes(:author)
+           .group_by(&:category_id)
+           .transform_values { |articles| articles.filter_map(&:author).uniq.first(3) }
+  end
+end

app/controllers/concerns/request_exception_handler.rb

@@ -1,8 +1,15 @@
 module RequestExceptionHandler
   extend ActiveSupport::Concern
 
+  QUERY_CANCELED_ERROR_MESSAGE_PATTERNS = [
+    'ActiveRecord::QueryCanceled',
+    'PG::QueryCanceled',
+    'canceling statement due to statement timeout'
+  ].freeze
+
   included do
     rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
+    rescue_from CustomExceptions::Inbox::LimitExceeded, with: :render_error_response
   end
 
   private
@@ -18,6 +25,9 @@ module RequestExceptionHandler
   rescue ActionController::ParameterMissing => e
     log_handled_error(e)
     render_could_not_create_error(e.message)
+  rescue ActiveRecord::QueryCanceled => e
+    log_handled_error(e)
+    render_could_not_create_error(database_query_canceled_message)
   ensure
     # to address the thread variable leak issues in Puma/Thin webserver
     Current.reset
@@ -31,8 +41,8 @@ module RequestExceptionHandler
     render json: { error: message }, status: :not_found
   end
 
-  def render_could_not_create_error(message)
-    render json: { error: message }, status: :unprocessable_entity
+  def render_could_not_create_error(error)
+    render json: { error: sanitized_error_message(error) }, status: :unprocessable_entity
   end
 
   def render_payment_required(message)
@@ -59,4 +69,19 @@ module RequestExceptionHandler
   def log_handled_error(exception)
     logger.info("Handled error: #{exception.inspect}")
   end
+
+  def sanitized_error_message(message)
+    return database_query_canceled_message if database_query_canceled_message?(message)
+
+    message
+  end
+
+  def database_query_canceled_message?(message)
+    error_message = message.to_s
+    QUERY_CANCELED_ERROR_MESSAGE_PATTERNS.any? { |pattern| error_message.include?(pattern) }
+  end
+
+  def database_query_canceled_message
+    I18n.t('errors.database.query_canceled')
+  end
 end

app/controllers/dashboard_controller.rb

@@ -1,5 +1,6 @@
 class DashboardController < ActionController::Base
   include SwitchLocale
+  include PortalHomeData
 
   GLOBAL_CONFIG_KEYS = %w[
     LOGO
@@ -63,6 +64,8 @@ class DashboardController < ActionController::Base
     return unless @portal
 
     @locale = @portal.default_locale
+    request.variant = :documentation if @portal.layout == 'documentation'
+    load_home_data
     render 'public/api/v1/portals/show', layout: 'portal', portal: @portal and return
   end
 

app/controllers/instagram/callbacks_controller.rb

@@ -11,6 +11,8 @@ class Instagram::CallbacksController < ApplicationController
     end
 
     process_successful_authorization
+  rescue CustomExceptions::Inbox::LimitExceeded => e
+    handle_limit_error(e)
   rescue StandardError => e
     handle_error(e)
   end
@@ -47,6 +49,14 @@ class Instagram::CallbacksController < ApplicationController
     redirect_to_error_page(error_info)
   end
 
+  def handle_limit_error(error)
+    redirect_to_error_page(
+      'error_type' => error.class.name,
+      'code' => Rack::Utils.status_code(error.http_status),
+      'error_message' => error.message
+    )
+  end
+
   # Extract error details from the exception
   def extract_error_info(error)
     if error.is_a?(OAuth2::Error)

app/controllers/public/api/v1/inboxes/contacts_controller.rb

@@ -18,7 +18,8 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
       contact: @contact_inbox.contact,
       params: permitted_params.to_h.deep_symbolize_keys.except(:identifier)
     )
-    render json: contact_identify_action.perform
+    contact_identify_action.perform
+    @contact_inbox.reload
   end
 
   private
@@ -35,11 +36,15 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
   end
 
   def valid_hmac?
-    params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
+    expected_hash = OpenSSL::HMAC.hexdigest(
       'sha256',
       @inbox_channel.hmac_token,
       params[:identifier].to_s
     )
+    identifier_hash = params[:identifier_hash].to_s
+    return false unless identifier_hash.bytesize == expected_hash.bytesize
+
+    ActiveSupport::SecurityUtils.secure_compare(identifier_hash, expected_hash)
   end
 
   def permitted_params

app/controllers/public/api/v1/portals/base_controller.rb

@@ -24,7 +24,11 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_view_variant
-    request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
+    request.variant = if @is_plain_layout_enabled
+                        :plain
+                      elsif @portal_layout == 'documentation'
+                        :documentation
+                      end
   end
 
   def portal
@@ -39,9 +43,11 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def switch_locale_with_portal(&)
-    @locale = validate_and_get_locale(params[:locale])
+    # Keep @locale as the portal's own locale code (e.g. th_TH) for content queries,
+    # while UI translations fall back to an available I18n locale (e.g. th).
+    @locale = params[:locale]
 
-    I18n.with_locale(@locale, &)
+    I18n.with_locale(validate_and_get_locale(@locale), &)
   end
 
   def switch_locale_with_article(&)
@@ -49,13 +55,12 @@ class Public::Api::V1::Portals::BaseController < PublicController
     Rails.logger.info "Article: not found for slug: #{params[:article_slug]}"
     render_404 && return if article.blank?
 
-    article_locale = if article.category.present?
-                       article.category.locale
-                     else
-                       article.locale
-                     end
-    @locale = validate_and_get_locale(article_locale)
-    I18n.with_locale(@locale, &)
+    @locale = if article.category.present?
+                article.category.locale
+              else
+                article.locale
+              end
+    I18n.with_locale(validate_and_get_locale(@locale), &)
   end
 
   def allow_iframe_requests
@@ -64,6 +69,8 @@ class Public::Api::V1::Portals::BaseController < PublicController
 
   def render_404
     portal
+    # set_locale can render_404 before the child's set_view_variant runs; set it here so plain 404s stay chrome-less
+    set_view_variant
     render 'public/api/v1/portals/error/404', status: :not_found
   end
 

app/controllers/public/api/v1/portals_controller.rb

@@ -1,11 +1,13 @@
 class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseController
+  include PortalHomeData
+
   before_action :ensure_custom_domain_request, only: [:show]
   before_action :redirect_to_portal_with_locale, only: [:show]
   before_action :portal
   before_action :set_portal_layout
   before_action :set_view_variant
   before_action :ensure_portal_feature_enabled
-  before_action :load_home_data, only: [:show], if: -> { @portal_layout == 'documentation' }
+  before_action :load_home_data, only: [:show], unless: -> { @is_plain_layout_enabled }
   layout 'portal'
 
   def show
@@ -31,28 +33,4 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
     portal
     redirect_to "/hc/#{@portal.slug}/#{@portal.default_locale}"
   end
-
-  def load_home_data
-    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
-    @visible_categories = @portal.categories
-                                 .where(locale: @locale)
-                                 .joins(:articles).where(articles: { status: :published })
-                                 .order(position: :asc)
-                                 .group('categories.id')
-    @popular_topics = @visible_categories.first(3)
-    @featured = base_articles.order_by_views.limit(6)
-    @category_contributors = build_category_contributors(@visible_categories)
-  end
-
-  def build_category_contributors(categories)
-    category_ids = categories.map(&:id)
-    return {} if category_ids.empty?
-
-    @portal.articles
-           .published
-           .where(locale: @locale, category_id: category_ids)
-           .includes(:author)
-           .group_by(&:category_id)
-           .transform_values { |articles| articles.filter_map(&:author).uniq.first(3) }
-  end
 end

app/controllers/super_admin/accounts_controller.rb

@@ -35,7 +35,8 @@ class SuperAdmin::AccountsController < SuperAdmin::ApplicationController
   #
   def resource_params
     permitted_params = super
-    permitted_params[:limits] = permitted_params[:limits].to_h.compact
+    permitted_params[:limits] = permitted_params[:limits].to_h.compact if permitted_params.key?(:limits)
+    permitted_params[:captain_models] = permitted_params[:captain_models].to_h.compact_blank.presence if permitted_params.key?(:captain_models)
     permitted_params[:selected_feature_flags] = params[:enabled_features].keys.map(&:to_sym) if params[:enabled_features].present?
     permitted_params
   end

app/controllers/tiktok/callbacks_controller.rb

@@ -6,6 +6,8 @@ class Tiktok::CallbacksController < ApplicationController
     return handle_ungranted_scopes_error unless all_scopes_granted?
 
     process_successful_authorization
+  rescue CustomExceptions::Inbox::LimitExceeded => e
+    handle_limit_error(e)
   rescue StandardError => e
     handle_error(e)
   end
@@ -36,6 +38,14 @@ class Tiktok::CallbacksController < ApplicationController
     redirect_to_error_page(error_type: error.class.name, code: 500, error_message: error.message)
   end
 
+  def handle_limit_error(error)
+    redirect_to_error_page(
+      error_type: error.class.name,
+      code: Rack::Utils.status_code(error.http_status),
+      error_message: error.message
+    )
+  end
+
   # Handles the case when a user denies permissions or cancels the authorization flow
   def handle_authorization_error
     redirect_to_error_page(

app/controllers/webhooks/whatsapp_controller.rb

@@ -47,18 +47,10 @@ class Webhooks::WhatsappController < ActionController::API
     metadata = params.dig(:entry, 0, :changes, 0, :value, :metadata)
     return if metadata.blank?
 
-    phone_number = normalized_phone_number(metadata[:display_phone_number])
-    phone_number_id = metadata[:phone_number_id]
-    channel = Channel::Whatsapp.find_by(phone_number: phone_number)
-
-    return channel if channel && channel.provider_config['phone_number_id'] == phone_number_id
-  end
-
-  def normalized_phone_number(phone_number)
-    return if phone_number.blank?
-
-    phone_number = phone_number.to_s
-    phone_number.start_with?('+') ? phone_number : "+#{phone_number}"
+    Whatsapp::WebhookChannelFinderService.new(
+      display_phone_number: metadata[:display_phone_number],
+      phone_number_id: metadata[:phone_number_id]
+    ).perform
   end
 
   def inactive_whatsapp_number?

app/dashboards/account_dashboard.rb

@@ -18,6 +18,7 @@ class AccountDashboard < Administrate::BaseDashboard
 
                                  # Add all_features last so it appears after manually_managed_features
                                  attributes[:all_features] = AccountFeaturesField
+                                 attributes[:captain_models] = CaptainModelOverridesField
 
                                  attributes
                                else
@@ -57,6 +58,7 @@ class AccountDashboard < Administrate::BaseDashboard
                                       attrs = %i[custom_attributes limits]
                                       attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
                                       attrs << :all_features
+                                      attrs << :captain_models
                                       attrs
                                     else
                                       []
@@ -79,6 +81,7 @@ class AccountDashboard < Administrate::BaseDashboard
                                  attrs = %i[limits]
                                  attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
                                  attrs << :all_features
+                                 attrs << :captain_models
                                  attrs
                                else
                                  []
@@ -117,7 +120,7 @@ class AccountDashboard < Administrate::BaseDashboard
   # to prevent an error from being raised (wrong number of arguments)
   # Reference: https://github.com/thoughtbot/administrate/pull/2356/files#diff-4e220b661b88f9a19ac527c50d6f1577ef6ab7b0bed2bfdf048e22e6bfa74a05R204
   def permitted_attributes(action)
-    attrs = super + [limits: {}]
+    attrs = super + [limits: {}, captain_models: {}]
 
     # Add manually_managed_features to permitted attributes only for Chatwoot Cloud
     attrs << { manually_managed_features: [] } if ChatwootApp.chatwoot_cloud?

app/drops/conversation_drop.rb

@@ -1,6 +1,10 @@
 class ConversationDrop < BaseDrop
   include MessageFormatHelper
 
+  def id
+    @obj.try(:display_id)
+  end
+
   def display_id
     @obj.try(:display_id)
   end

app/drops/inbox_drop.rb

@@ -2,4 +2,18 @@ class InboxDrop < BaseDrop
   def name
     @obj.try(:name)
   end
+
+  def business_name
+    @obj.try(:sanitized_business_name)
+  end
+
+  def avatar_url
+    @obj.try(:avatar_url)
+  end
+
+  def email
+    return unless @obj.try(:email?)
+
+    @obj.try(:email_address).presence || @obj.try(:channel).try(:email)
+  end
 end

app/finders/data_import_error_finder.rb

@@ -0,0 +1,11 @@
+class DataImportErrorFinder
+  RESULTS_LIMIT = 5
+
+  def initialize(data_import)
+    @data_import = data_import
+  end
+
+  def import_errors
+    @data_import.import_errors.non_skip_logs.order(created_at: :desc).limit(RESULTS_LIMIT)
+  end
+end

app/finders/data_import_skip_log_finder.rb

@@ -0,0 +1,35 @@
+class DataImportSkipLogFinder
+  RESULTS_LIMIT = 5
+  SOURCE_OBJECT_TYPES = %w[contact conversation message].freeze
+
+  attr_reader :selected_source_object_type
+
+  def initialize(data_import, params = {})
+    @data_import = data_import
+    @selected_source_object_type = valid_source_object_type(params[:skip_logs_type])
+  end
+
+  def skip_logs
+    filtered_scope.order(created_at: :desc).limit(RESULTS_LIMIT)
+  end
+
+  def counts_by_type
+    base_scope.group(:source_object_type).count
+  end
+
+  private
+
+  def base_scope
+    @base_scope ||= @data_import.import_errors.skip_logs
+  end
+
+  def filtered_scope
+    return base_scope if selected_source_object_type.blank?
+
+    base_scope.where(source_object_type: selected_source_object_type)
+  end
+
+  def valid_source_object_type(source_object_type)
+    source_object_type if SOURCE_OBJECT_TYPES.include?(source_object_type)
+  end
+end

app/helpers/api/v1/inboxes_helper.rb

@@ -114,10 +114,4 @@ module Api::V1::InboxesHelper
       'sms' => Current.account.sms_channels
     }[permitted_params[:channel][:type]]
   end
-
-  def validate_limit
-    return unless Current.account.inboxes.count >= Current.account.usage_limits[:inboxes]
-
-    render_payment_required('Account limit exceeded. Upgrade to a higher plan')
-  end
 end

app/helpers/billing_helper.rb

@@ -22,4 +22,16 @@ module BillingHelper
   def agents(account)
     account.users.count
   end
+
+  # current_period_end moved to the subscription item in newer Stripe API versions; read both.
+  def subscription_period_end(subscription)
+    subscription['current_period_end'] || subscription['items']['data'].first&.[]('current_period_end')
+  end
+
+  def subscription_ends_on(subscription)
+    period_end = subscription_period_end(subscription)
+    return if period_end.blank?
+
+    Time.zone.at(period_end)
+  end
 end

app/helpers/filters/filter_helper.rb

@@ -68,6 +68,8 @@ module Filters::FilterHelper
     when 'text_case_insensitive'
       text_case_insensitive_filter(query_hash, filter_operator_value)
     else
+      return text_cast_filter(query_hash, filter_operator_value) if text_search_on_display_id?(query_hash)
+
       default_filter(query_hash, filter_operator_value)
     end
   end
@@ -82,10 +84,18 @@ module Filters::FilterHelper
       "#{filter_operator_value} #{query_hash[:query_operator]}"
   end
 
+  def text_cast_filter(query_hash, filter_operator_value)
+    "(#{filter_config[:table_name]}.#{query_hash[:attribute_key]})::text #{filter_operator_value} #{query_hash[:query_operator]}"
+  end
+
   def default_filter(query_hash, filter_operator_value)
     "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
   end
 
+  def text_search_on_display_id?(query_hash)
+    query_hash[:attribute_key] == 'display_id' && %w[contains does_not_contain].include?(query_hash[:filter_operator])
+  end
+
   def validate_single_condition(condition)
     return if condition['query_operator'].nil?
     return if condition['query_operator'].empty?

app/javascript/dashboard/api/assignableAgents.js

@@ -6,9 +6,12 @@ class AssignableAgents extends ApiClient {
     super('assignable_agents', { accountScoped: true });
   }
 
-  get(inboxIds) {
+  get(inboxIds, { includeAgentBots = false } = {}) {
     return axios.get(this.url, {
-      params: { inbox_ids: inboxIds },
+      params: {
+        inbox_ids: inboxIds,
+        ...(includeAgentBots ? { include_agent_bots: true } : {}),
+      },
     });
   }
 }

app/javascript/dashboard/api/calls.js

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class CallsAPI extends ApiClient {
+  constructor() {
+    super('calls', { accountScoped: true });
+  }
+
+  get(params = {}) {
+    return axios.get(this.url, { params });
+  }
+}
+
+export default new CallsAPI();

app/javascript/dashboard/api/captain/agentSessions.js

@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class CaptainAgentSessions extends ApiClient {
+  constructor() {
+    super('captain/agent_sessions', { accountScoped: true });
+  }
+}
+
+export default new CaptainAgentSessions();

app/javascript/dashboard/api/captain/assistant.js

@@ -1,6 +1,10 @@
 /* global axios */
 import ApiClient from '../ApiClient';
 
+// Viewer's UTC offset in hours, matching the reports API convention so the
+// backend can anchor calendar ranges to the viewer's day.
+const getTimezoneOffset = () => -new Date().getTimezoneOffset() / 60;
+
 class CaptainAssistant extends ApiClient {
   constructor() {
     super('captain/assistants', { accountScoped: true });
@@ -21,6 +25,42 @@ class CaptainAssistant extends ApiClient {
       message_history: messageHistory,
     });
   }
+
+  getMetrics({ assistantId, range, signal }) {
+    const requestConfig = {
+      params: { range, timezone_offset: getTimezoneOffset() },
+    };
+    if (signal) requestConfig.signal = signal;
+
+    return axios.get(`${this.url}/${assistantId}/metrics`, requestConfig);
+  }
+
+  getFaqStats({ assistantId, signal }) {
+    const requestConfig = {};
+    if (signal) requestConfig.signal = signal;
+
+    return axios.get(`${this.url}/${assistantId}/faq_stats`, requestConfig);
+  }
+
+  getSummary({ assistantId, range, stats }) {
+    return axios.get(`${this.url}/${assistantId}/summary`, {
+      params: { range, timezone_offset: getTimezoneOffset(), stats },
+    });
+  }
+
+  getDrilldown({ assistantId, metric, range, page, signal }) {
+    const requestConfig = {
+      params: {
+        metric,
+        range,
+        timezone_offset: getTimezoneOffset(),
+        page,
+      },
+    };
+    if (signal) requestConfig.signal = signal;
+
+    return axios.get(`${this.url}/${assistantId}/drilldown`, requestConfig);
+  }
 }
 
 export default new CaptainAssistant();

app/javascript/dashboard/api/channel/whatsapp/whatsappCallsAPI.js

@@ -10,10 +10,13 @@ class WhatsappCallsAPI extends ApiClient {
     return axios.get(`${this.url}/${callId}`).then(r => r.data);
   }
 
-  initiate(conversationId, sdpOffer) {
+  // Either conversationId, or contactId + inboxId to let the BE resolve the conversation.
+  initiate({ conversationId, contactId, inboxId }, sdpOffer) {
     return axios
       .post(`${this.url}/initiate`, {
         conversation_id: conversationId,
+        contact_id: contactId,
+        inbox_id: inboxId,
         sdp_offer: sdpOffer,
       })
       .then(r => r.data);

app/javascript/dashboard/api/dataImports.js

@@ -0,0 +1,39 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class DataImportsAPI extends ApiClient {
+  constructor() {
+    super('data_imports', { accountScoped: true });
+  }
+
+  start(id) {
+    return axios.post(`${this.url}/${id}/start`);
+  }
+
+  abandon(id) {
+    return axios.post(`${this.url}/${id}/abandon`);
+  }
+
+  show(id, params = {}) {
+    return axios.get(`${this.url}/${id}`, { params });
+  }
+
+  validateSource(payload) {
+    return axios.post(`${this.url}/validate_source`, payload);
+  }
+
+  downloadSkipLogs(id) {
+    return axios.get(`${this.url}/${id}/skip_logs.csv`, {
+      responseType: 'blob',
+    });
+  }
+
+  downloadErrorLogs(id) {
+    return axios.get(`${this.url}/${id}/error_logs.csv`, {
+      responseType: 'blob',
+    });
+  }
+}
+
+export default new DataImportsAPI();

app/javascript/dashboard/api/enterprise/account.js

@@ -14,6 +14,10 @@ class EnterpriseAccountAPI extends ApiClient {
     return axios.post(`${this.url}subscription`);
   }
 
+  selectBillingCurrency(currency) {
+    return axios.post(`${this.url}select_billing_currency`, { currency });
+  }
+
   getLimits() {
     return axios.get(`${this.url}limits`);
   }
@@ -27,6 +31,11 @@ class EnterpriseAccountAPI extends ApiClient {
   createTopupCheckout(credits) {
     return axios.post(`${this.url}topup_checkout`, { credits });
   }
+
+  // Topup packages for the account's billing currency.
+  getTopupOptions() {
+    return axios.get(`${this.url}topup_options`);
+  }
 }
 
 export default new EnterpriseAccountAPI();

app/javascript/dashboard/api/helpCenter/articles.js

@@ -17,6 +17,7 @@ class ArticlesAPI extends PortalsAPI {
     categorySlug,
     sort,
     query,
+    signal,
   }) {
     const url = getArticleSearchURL({
       pageNumber,
@@ -30,7 +31,7 @@ class ArticlesAPI extends PortalsAPI {
       host: this.url,
     });
 
-    return axios.get(url);
+    return axios.get(url, { signal });
   }
 
   searchArticles({ portalSlug, query }) {

app/javascript/dashboard/api/inbox/conversation.js

@@ -62,9 +62,10 @@ class ConversationApi extends ApiClient {
     });
   }
 
-  assignAgent({ conversationId, agentId }) {
+  assignAgent({ conversationId, agentId, assigneeType }) {
     return axios.post(`${this.url}/${conversationId}/assignments`, {
       assignee_id: agentId,
+      assignee_type: assigneeType,
     });
   }
 

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/article.spec.js

@@ -37,7 +37,8 @@ describe('#PortalAPI', () => {
         authorId: '1',
       });
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
+        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1',
+        { signal: undefined }
       );
     });
   });

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

@@ -26,5 +26,15 @@ describe('#AssignableAgentsAPI', () => {
         },
       });
     });
+
+    it('#getAssignableAgents with agent bots', () => {
+      assignableAgentsAPI.get([1], { includeAgentBots: true });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
+        params: {
+          inbox_ids: [1],
+          include_agent_bots: true,
+        },
+      });
+    });
   });
 });

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -90,11 +90,16 @@ describe('#ConversationAPI', () => {
     });
 
     it('#assignAgent', () => {
-      conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
+      conversationAPI.assignAgent({
+        conversationId: 12,
+        agentId: 34,
+        assigneeType: 'AgentBot',
+      });
       expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments`,
         {
           assignee_id: 34,
+          assignee_type: 'AgentBot',
         }
       );
     });

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/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue

@@ -28,7 +28,12 @@ const inboxes = computed(() => {
     return {
       name: inbox.name,
       id: inbox.id,
-      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
+      icon: getInboxIconByType(
+        inbox.channelType,
+        inbox.medium,
+        'line',
+        inbox.voiceEnabled
+      ),
     };
   });
 });

app/javascript/dashboard/components-next/Calls/CallListItem.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
+import { getInboxVoiceIcon } from 'dashboard/helper/inbox';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import AudioPlayer from 'dashboard/components-next/audio/AudioPlayer.vue';
+import {
+  VOICE_CALL_DIRECTION,
+  VOICE_CALL_STATUS,
+} from 'dashboard/components-next/message/constants';
+import CallStatusBadge from './CallStatusBadge.vue';
+import { CALL_KIND, getCallKind } from './constants';
+
+const props = defineProps({
+  call: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+
+const kind = computed(() => getCallKind(props.call));
+
+const contactName = computed(() =>
+  (props.call.contact.name || props.call.contact.phoneNumber || '').replace(
+    /^\+/,
+    ''
+  )
+);
+
+const agentActionLabel = computed(() => {
+  if (!props.call.agent) return '';
+  if (kind.value === CALL_KIND.OUTGOING) return t('CALLS_PAGE.ROW.DIALED_BY');
+  if (kind.value === CALL_KIND.INCOMING) return t('CALLS_PAGE.ROW.PICKED_BY');
+  // Ongoing collapses direction, so resolve dialed-vs-picked from the raw value.
+  if (kind.value === CALL_KIND.ONGOING) {
+    return props.call.direction === VOICE_CALL_DIRECTION.OUTBOUND
+      ? t('CALLS_PAGE.ROW.DIALED_BY')
+      : t('CALLS_PAGE.ROW.PICKED_BY');
+  }
+  return '';
+});
+
+const resultLabel = computed(() => {
+  if (kind.value === CALL_KIND.MISSED) return t('CALLS_PAGE.ROW.NO_AGENT');
+  if (kind.value === CALL_KIND.NO_REPLY) {
+    return t('CALLS_PAGE.ROW.NO_CONTACT_ANSWER');
+  }
+  if (kind.value === CALL_KIND.FAILED) return t('CALLS_PAGE.ROW.FAILED');
+  if (kind.value === CALL_KIND.ONGOING) {
+    return props.call.status === VOICE_CALL_STATUS.RINGING
+      ? t('CALLS_PAGE.ROW.RINGING')
+      : t('CALLS_PAGE.ROW.IN_PROGRESS');
+  }
+  return t('CALLS_PAGE.ROW.ANSWERED');
+});
+
+const providerIcon = computed(() =>
+  getInboxVoiceIcon(props.call.inbox.channelType, props.call.inbox.medium)
+);
+
+const createdAtLabel = computed(() =>
+  relativeDayTimestamp(props.call.createdAt, t('CALLS_PAGE.ROW.YESTERDAY'))
+);
+
+const conversationRoute = computed(() => ({
+  name: 'inbox_conversation',
+  params: {
+    accountId: route.params.accountId,
+    conversation_id: props.call.conversation.displayId,
+  },
+  query: { messageId: props.call.messageId },
+}));
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 py-3.5 border-b border-n-weak lg:hidden">
+    <div class="flex items-center gap-2 min-w-0">
+      <Avatar
+        :src="call.contact.avatar"
+        :name="contactName"
+        :size="24"
+        rounded-full
+      />
+      <span
+        v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
+        class="text-heading-3 font-medium truncate text-n-slate-12 min-w-0"
+      >
+        {{ contactName }}
+      </span>
+      <CallStatusBadge :kind="kind" class="ms-auto shrink-0" />
+      <RouterLink
+        :to="conversationRoute"
+        class="inline-flex items-center h-6 gap-1 px-2 text-label-small outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0"
+      >
+        <Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
+        {{ call.conversation.displayId }}
+        <Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
+      </RouterLink>
+    </div>
+    <div class="flex items-center gap-1.5 min-w-0">
+      <template v-if="agentActionLabel">
+        <span class="text-label-small text-n-slate-10 shrink-0">
+          {{ agentActionLabel }}
+        </span>
+        <Avatar
+          :src="call.agent.avatar"
+          :name="call.agent.name"
+          :size="20"
+          rounded-full
+        />
+        <span class="text-body-main truncate text-n-slate-12 min-w-0">
+          {{ call.agent.name }}
+        </span>
+      </template>
+      <span v-else class="text-body-main truncate text-n-slate-10 min-w-0">
+        {{ resultLabel }}
+      </span>
+      <span class="w-px h-3 bg-n-strong shrink-0" />
+      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
+      <span class="text-body-main truncate text-n-slate-11 min-w-0">
+        {{ call.inbox.name }}
+      </span>
+      <span
+        v-if="!call.recordingUrl"
+        class="ms-auto shrink-0 text-label-small text-n-slate-11 tabular-nums"
+      >
+        {{ createdAtLabel }}
+      </span>
+    </div>
+    <div
+      v-if="call.recordingUrl"
+      class="flex items-center gap-2 min-w-0 justify-between"
+    >
+      <AudioPlayer
+        :src="call.recordingUrl"
+        :fallback-duration="call.durationSeconds || 0"
+        class="flex-1 sm:flex-[0.7] min-w-0"
+      />
+      <span class="shrink-0 text-label-small text-n-slate-11 tabular-nums">
+        {{ createdAtLabel }}
+      </span>
+    </div>
+  </div>
+
+  <div
+    class="hidden items-center gap-x-1.5 gap-y-2.5 border-b border-n-weak lg:flex lg:items-center lg:gap-1.5"
+  >
+    <div class="flex items-center gap-2.5 min-w-0 w-52 shrink-0 py-3.5">
+      <Avatar
+        :src="call.contact.avatar"
+        :name="contactName"
+        :size="24"
+        rounded-full
+      />
+      <span
+        v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
+        class="text-heading-3 font-medium truncate text-n-slate-12"
+      >
+        {{ contactName }}
+      </span>
+    </div>
+    <div
+      class="flex flex-nowrap items-center gap-x-2 gap-y-2 min-w-0 grow shrink"
+    >
+      <div class="flex items-center gap-x-2 min-w-0 lg:contents py-3.5">
+        <CallStatusBadge :kind="kind" class="shrink-0" />
+        <div
+          v-if="agentActionLabel"
+          class="gap-x-1.5 min-w-0 flex items-center"
+        >
+          <span
+            class="text-label-small text-n-slate-10 truncate shrink min-w-8 xl:min-w-14"
+          >
+            {{ agentActionLabel }}
+          </span>
+          <span class="flex items-center gap-1.5 min-w-16 shrink-[20]">
+            <Avatar
+              :src="call.agent.avatar"
+              :name="call.agent.name"
+              :size="20"
+              rounded-full
+            />
+            <span
+              v-tooltip.top="{
+                content: call.agent.name,
+                delay: { show: 500, hide: 0 },
+              }"
+              class="text-body-main truncate text-n-slate-12 min-w-0"
+            >
+              {{ call.agent.name }}
+            </span>
+          </span>
+        </div>
+        <span
+          v-else-if="resultLabel"
+          class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
+        >
+          {{ resultLabel }}
+        </span>
+      </div>
+      <AudioPlayer
+        v-if="call.recordingUrl"
+        :src="call.recordingUrl"
+        :fallback-duration="call.durationSeconds || 0"
+        class="w-auto min-w-44 shrink mx-auto"
+      />
+    </div>
+    <div
+      v-tooltip.top="{
+        content: call.inbox.name,
+        delay: { show: 500, hide: 0 },
+      }"
+      class="flex items-center gap-1 justify-end w-40 min-w-4 shrink-[100] py-3.5"
+    >
+      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
+      <span class="text-body-main truncate text-n-slate-11 min-w-0">
+        {{ call.inbox.name }}
+      </span>
+    </div>
+    <RouterLink
+      :to="conversationRoute"
+      class="inline-flex items-center h-6 gap-1 px-2 text-label-small py-3.5 outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0 justify-self-start"
+    >
+      <Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
+      {{ call.conversation.displayId }}
+      <Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
+    </RouterLink>
+    <span
+      v-tooltip.top="{
+        content: createdAtLabel,
+        delay: { show: 500, hide: 0 },
+      }"
+      class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end min-w-16 max-w-20 shrink-0"
+    >
+      {{ createdAtLabel }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Calls/CallRecordingPlayer.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
+import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  fallbackDuration: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const PLAYBACK_SPEEDS = [1, 1.5, 2];
+
+const audioPlayer = useTemplateRef('audioPlayer');
+const { uid } = getCurrentInstance();
+
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(props.fallbackDuration);
+const playbackSpeed = ref(1);
+
+const onLoadedMetadata = () => {
+  const loadedDuration = audioPlayer.value?.duration;
+  if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
+};
+
+const formatTime = time => {
+  if (!time || Number.isNaN(time)) return '00:00';
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
+
+const displayedTime = computed(() =>
+  formatTime(
+    isPlaying.value || currentTime.value ? currentTime.value : duration.value
+  )
+);
+
+// Only one recording should play at a time across the list.
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    audioPlayer.value?.pause();
+    isPlaying.value = false;
+  }
+});
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    emitter.emit('pause_playing_audio', uid);
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value?.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+};
+
+const changePlaybackSpeed = () => {
+  const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
+  playbackSpeed.value =
+    PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
+  audioPlayer.value.playbackRate = playbackSpeed.value;
+};
+
+const downloadRecording = () => {
+  downloadFile({ url: props.src, type: 'audio' });
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center h-9 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
+    @click.stop
+  >
+    <audio
+      ref="audioPlayer"
+      class="hidden"
+      playsinline
+      @loadedmetadata="onLoadedMetadata"
+      @timeupdate="onTimeUpdate"
+      @ended="onEnd"
+    >
+      <source :src="src" />
+    </audio>
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      class="!w-6 !p-0 text-n-slate-12"
+      @click="playOrPause"
+    >
+      <template #icon>
+        <Icon
+          :icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
+          class="size-4 flex-shrink-0"
+        />
+      </template>
+    </Button>
+    <input
+      type="range"
+      min="0"
+      :max="duration || 0"
+      :value="currentTime"
+      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
+      @input="seek"
+    />
+    <span class="text-sm tabular-nums text-n-slate-11 shrink-0">
+      {{ displayedTime }}
+    </span>
+    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      :label="playbackSpeedLabel"
+      class="!px-1 min-w-6 !text-n-slate-11"
+      @click="changePlaybackSpeed"
+    />
+    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      class="!w-6 !p-0 text-n-slate-11"
+      @click="downloadRecording"
+    >
+      <template #icon>
+        <Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
+      </template>
+    </Button>
+  </div>
+</template>

app/javascript/dashboard/components-next/Calls/CallStatusBadge.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { CALL_KIND } from './constants';
+
+const props = defineProps({
+  kind: {
+    type: String,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const KIND_CONFIG = {
+  [CALL_KIND.ONGOING]: {
+    icon: 'i-lucide-phone-call',
+    class: 'bg-n-teal-3 text-n-teal-11',
+  },
+  [CALL_KIND.INCOMING]: {
+    icon: 'i-lucide-phone-incoming',
+    class: 'bg-n-slate-3 text-n-slate-11',
+  },
+  [CALL_KIND.OUTGOING]: {
+    icon: 'i-lucide-phone-outgoing',
+    class: 'bg-n-slate-3 text-n-slate-11',
+  },
+  [CALL_KIND.MISSED]: {
+    icon: 'i-lucide-phone-missed',
+    class: 'bg-n-ruby-3 text-n-ruby-11',
+  },
+  [CALL_KIND.NO_REPLY]: {
+    icon: 'i-lucide-phone-outgoing',
+    class: 'bg-n-amber-3 text-n-amber-11',
+  },
+  [CALL_KIND.FAILED]: {
+    icon: 'i-lucide-phone-off',
+    class: 'bg-n-ruby-3 text-n-ruby-11',
+  },
+};
+
+const config = computed(() => KIND_CONFIG[props.kind]);
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center justify-center w-20 gap-1.5 h-6 px-1 rounded-md text-label-small shrink-0"
+    :class="config.class"
+  >
+    <Icon :icon="config.icon" class="size-3 flex-shrink-0" />
+    <span class="truncate">{{
+      t(`CALLS_PAGE.STATUS.${kind.toUpperCase()}`)
+    }}</span>
+  </span>
+</template>

app/javascript/dashboard/components-next/Calls/CallsEmptyState.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const setupVoiceChannel = () => {
+  router.push({
+    name: 'settings_inbox_new',
+    params: { accountId: route.params.accountId },
+  });
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="t('CALLS_PAGE.SETUP.TITLE')"
+    :subtitle="t('CALLS_PAGE.SETUP.SUBTITLE')"
+    :show-backdrop="false"
+    :action-perms="['administrator']"
+  >
+    <template #actions>
+      <Button
+        :label="t('CALLS_PAGE.SETUP.ACTION')"
+        icon="i-lucide-plus"
+        @click="setupVoiceChannel"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue

@@ -0,0 +1,270 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const props = defineProps({
+  // Null while a fetch is in flight so stale counts are never shown.
+  totalCount: {
+    type: Number,
+    default: null,
+  },
+  agents: {
+    type: Array,
+    default: () => [],
+  },
+  inboxes: {
+    type: Array,
+    default: () => [],
+  },
+  // Self-scoped viewers only ever see their own calls, so the assignee filter
+  // is meaningless for them — only admins get it.
+  showAssignee: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const activity = defineModel('activity', { type: String, default: null });
+const assigneeId = defineModel('assigneeId', { type: Number, default: null });
+const inboxId = defineModel('inboxId', { type: Number, default: null });
+
+const { t } = useI18n();
+
+const ACTIVITY_ICONS = {
+  missed: 'i-lucide-phone-missed',
+  no_reply: 'i-lucide-phone-outgoing',
+  incoming: 'i-lucide-phone-incoming',
+  outgoing: 'i-lucide-phone-outgoing',
+  in_progress: 'i-lucide-phone-call',
+};
+
+const BASE_ACTIVITIES = ['missed', 'no_reply'];
+const OTHER_ACTIVITIES = ['incoming', 'outgoing', 'in_progress'];
+
+// A single open-menu identifier keeps the three dropdowns mutually exclusive:
+// opening one closes the others without any cross-wiring.
+const openMenu = ref(null); // 'activity' | 'assignee' | 'more' | null
+
+const toggleMenu = name => {
+  openMenu.value = openMenu.value === name ? null : name;
+};
+
+// Each dropdown wrapper closes itself on outside clicks. The guard keeps the
+// other two wrappers (which the click is also outside of) from closing a
+// menu the user is interacting with.
+const closeOnOutside = name => {
+  if (openMenu.value === name) openMenu.value = null;
+};
+
+const activityLabel = value => t(`CALLS_PAGE.FILTERS.${value.toUpperCase()}`);
+
+const activeChipLabel = computed(() => {
+  const label = activityLabel(activity.value);
+  return props.totalCount === null ? label : `${label} (${props.totalCount})`;
+});
+
+const inactiveChips = computed(() =>
+  BASE_ACTIVITIES.filter(value => value !== activity.value)
+);
+
+const otherActivityItems = computed(() =>
+  OTHER_ACTIVITIES.map(value => ({
+    label: activityLabel(value),
+    value,
+    action: 'filter',
+    icon: ACTIVITY_ICONS[value],
+    isSelected: activity.value === value,
+  }))
+);
+
+const assigneeItems = computed(() => [
+  {
+    label: t('CALLS_PAGE.FILTERS.ALL_ASSIGNEES'),
+    value: null,
+    action: 'filter',
+    isSelected: !assigneeId.value,
+  },
+  ...props.agents.map(agent => ({
+    label: agent.name,
+    value: agent.id,
+    action: 'filter',
+    thumbnail: { name: agent.name, src: agent.thumbnail },
+    isSelected: assigneeId.value === agent.id,
+  })),
+]);
+
+const moreFiltersSections = computed(() => [
+  {
+    title: t('CALLS_PAGE.FILTERS.INBOX'),
+    items: [
+      {
+        label: t('CALLS_PAGE.FILTERS.ALL_INBOXES'),
+        value: null,
+        action: 'inbox',
+        isSelected: !inboxId.value,
+      },
+      ...props.inboxes.map(inbox => ({
+        label: inbox.name,
+        value: inbox.id,
+        action: 'inbox',
+        isSelected: inboxId.value === inbox.id,
+      })),
+    ],
+  },
+]);
+
+const selectedAssignee = computed(
+  () => props.agents.find(agent => agent.id === assigneeId.value) || null
+);
+
+const selectedAssigneeLabel = computed(
+  () => selectedAssignee.value?.name || t('CALLS_PAGE.FILTERS.ASSIGNEE')
+);
+
+const isOtherActivitySelected = computed(() =>
+  OTHER_ACTIVITIES.includes(activity.value)
+);
+
+const hasMoreFilters = computed(() => Boolean(inboxId.value));
+
+const setActivity = value => {
+  openMenu.value = null;
+  activity.value = value;
+};
+
+const setAssignee = ({ value }) => {
+  openMenu.value = null;
+  assigneeId.value = value;
+};
+
+const applyMoreFilter = ({ action, value }) => {
+  openMenu.value = null;
+  if (action === 'inbox') inboxId.value = value;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div class="flex flex-wrap items-center gap-2">
+      <span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
+        {{
+          totalCount === null
+            ? t('CALLS_PAGE.ALL_CALLS')
+            : t('CALLS_PAGE.ALL_CALLS_COUNT', { count: totalCount })
+        }}
+      </span>
+      <Button
+        v-else
+        variant="outline"
+        color="blue"
+        size="sm"
+        :icon="ACTIVITY_ICONS[activity]"
+        class="shrink-0 !h-7 !px-2"
+        @click="setActivity(null)"
+      >
+        {{ activeChipLabel }}
+        <Icon icon="i-lucide-x" />
+      </Button>
+      <div class="w-px h-3.5 mx-1 bg-n-strong shrink-0" />
+      <Button
+        v-for="chip in inactiveChips"
+        :key="chip"
+        variant="outline"
+        color="slate"
+        size="sm"
+        :icon="ACTIVITY_ICONS[chip]"
+        :label="activityLabel(chip)"
+        class="shrink-0 text-n-slate-11 !h-7 !px-2"
+        @click="setActivity(chip)"
+      />
+      <OnClickOutside
+        class="relative shrink-0"
+        @trigger="closeOnOutside('activity')"
+      >
+        <Button
+          variant="outline"
+          color="slate"
+          size="sm"
+          icon="i-lucide-phone"
+          class="!h-7 !px-2"
+          :class="
+            isOtherActivitySelected ? 'text-n-slate-12' : 'text-n-slate-11'
+          "
+          @click="toggleMenu('activity')"
+        >
+          {{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
+          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11" />
+        </Button>
+        <DropdownMenu
+          v-if="openMenu === 'activity'"
+          :menu-items="otherActivityItems"
+          class="mt-1 start-0 top-full w-44"
+          @action="setActivity($event.value)"
+        />
+      </OnClickOutside>
+    </div>
+    <div class="flex items-center gap-2 shrink-0">
+      <OnClickOutside
+        v-if="showAssignee"
+        class="relative"
+        @trigger="closeOnOutside('assignee')"
+      >
+        <Button
+          variant="outline"
+          color="slate"
+          size="sm"
+          icon="i-woot-empty-assignee"
+          class="max-w-52 !h-7 !px-2"
+          :class="assigneeId ? 'text-n-slate-12' : 'text-n-slate-11'"
+          @click="toggleMenu('assignee')"
+        >
+          <template v-if="selectedAssignee" #icon>
+            <Avatar
+              :src="selectedAssignee.thumbnail"
+              :name="selectedAssignee.name"
+              :size="16"
+              rounded-full
+            />
+          </template>
+          <span class="truncate">{{ selectedAssigneeLabel }}</span>
+          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
+        </Button>
+        <DropdownMenu
+          v-if="openMenu === 'assignee'"
+          :menu-items="assigneeItems"
+          show-search
+          class="mt-1 end-0 top-full w-56 max-h-72"
+          @action="setAssignee"
+        />
+      </OnClickOutside>
+      <OnClickOutside class="relative" @trigger="closeOnOutside('more')">
+        <Button
+          variant="outline"
+          size="sm"
+          icon="i-lucide-list-filter"
+          class="!h-7 !px-2"
+          :color="hasMoreFilters ? 'blue' : 'slate'"
+          :class="hasMoreFilters ? '' : 'text-n-slate-11'"
+          @click="toggleMenu('more')"
+        >
+          {{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
+          <Icon
+            icon="i-lucide-chevron-down"
+            :class="hasMoreFilters ? '' : 'text-n-slate-11'"
+          />
+        </Button>
+        <DropdownMenu
+          v-if="openMenu === 'more'"
+          :menu-sections="moreFiltersSections"
+          class="mt-1 end-0 top-full w-56 max-h-80"
+          @action="applyMoreFilter"
+        />
+      </OnClickOutside>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Calls/constants.js

@@ -0,0 +1,51 @@
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+} from 'dashboard/components-next/message/constants';
+
+export const CALL_KIND = {
+  ONGOING: 'ongoing',
+  INCOMING: 'incoming',
+  OUTGOING: 'outgoing',
+  MISSED: 'missed',
+  NO_REPLY: 'no_reply',
+  FAILED: 'failed',
+};
+
+// The API returns display values: status (ringing/in-progress/completed/
+// no-answer/failed) and direction (inbound/outbound). The list UI presents
+// them as a single "kind" per row.
+export const getCallKind = call => {
+  if (
+    [VOICE_CALL_STATUS.RINGING, VOICE_CALL_STATUS.IN_PROGRESS].includes(
+      call.status
+    )
+  ) {
+    return CALL_KIND.ONGOING;
+  }
+  if (
+    [VOICE_CALL_STATUS.FAILED, VOICE_CALL_STATUS.REJECTED].includes(call.status)
+  ) {
+    return CALL_KIND.FAILED;
+  }
+  const isInbound = call.direction === VOICE_CALL_DIRECTION.INBOUND;
+  if (call.status === VOICE_CALL_STATUS.NO_ANSWER) {
+    return isInbound ? CALL_KIND.MISSED : CALL_KIND.NO_REPLY;
+  }
+  return isInbound ? CALL_KIND.INCOMING : CALL_KIND.OUTGOING;
+};
+
+// Filter chips map to the status/direction params supported by CallFinder.
+export const CALL_ACTIVITY_PARAMS = {
+  missed: {
+    status: VOICE_CALL_STATUS.NO_ANSWER,
+    direction: VOICE_CALL_DIRECTION.INBOUND,
+  },
+  no_reply: {
+    status: VOICE_CALL_STATUS.NO_ANSWER,
+    direction: VOICE_CALL_DIRECTION.OUTBOUND,
+  },
+  incoming: { direction: VOICE_CALL_DIRECTION.INBOUND },
+  outgoing: { direction: VOICE_CALL_DIRECTION.OUTBOUND },
+  in_progress: { status: VOICE_CALL_STATUS.IN_PROGRESS },
+};

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -83,8 +83,12 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  const {
+    medium,
+    channel_type: type,
+    voice_enabled: voiceEnabled,
+  } = props.inbox;
+  return getInboxIconByType(type, medium, 'fill', voiceEnabled);
 });
 </script>
 

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -16,7 +16,6 @@ import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
 import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
-import ContactAPI from 'dashboard/api/contacts';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -83,39 +82,18 @@ const navigateToConversation = conversationId => {
 
 const whatsappCallSession = useWhatsappCallSession();
 
-// Find the most recent open conversation for this contact in the picked inbox.
-// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
-// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
-// contacts whose latest WhatsApp conversation falls outside the 20 most recent
-// across all inboxes would be treated as having no conversation.
-const findWhatsappConversationId = async inboxId => {
-  const { data } = await ContactAPI.getConversations(props.contactId, {
-    inboxId,
-  });
-  const conversations = data?.payload || [];
-  const match = [...conversations].sort(
-    (a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
-  )[0];
-  return match?.id || null;
-};
-
 const startWhatsappCall = async (inboxId, conversationIdHint) => {
-  // WhatsApp /initiate is conversation-scoped, so we must hand it a
-  // conversation. Use the caller's hint when given (in-conversation flow);
-  // otherwise pick the most recent one in the inbox.
-  const conversationId =
-    conversationIdHint || (await findWhatsappConversationId(inboxId));
-  if (!conversationId) {
-    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
-    return;
-  }
-
-  const response =
-    await whatsappCallSession.initiateOutboundCall(conversationId);
+  const response = await whatsappCallSession.initiateOutboundCall(
+    conversationIdHint
+      ? { conversationId: conversationIdHint }
+      : { contactId: props.contactId, inboxId }
+  );
   // The composable returns { status: 'locked' } when an init is already in
   // flight or a call is already active; treat that as a soft no-op rather than
   // claiming success.
   if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
+
+  const conversationId = response?.conversation_id || conversationIdHint;
   if (!response?.id) {
     // Permission template path returns no call id. Mirror the header button and
     // surface whether the request was just sent or is already pending instead of

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

@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });
 
 const lastActivityAt = computed(() => {
@@ -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/ArticleCard/ArticleCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
@@ -7,7 +7,9 @@ import {
   ARTICLE_MENU_ITEMS,
   ARTICLE_MENU_OPTIONS,
   ARTICLE_STATUSES,
+  getArticleStatus,
 } from 'dashboard/helper/portalHelper';
+import ArticlePendingChangesPopover from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue';
 
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
@@ -53,6 +55,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hasPendingChanges: {
+    type: Boolean,
+    default: false,
+  },
   selectable: {
     type: Boolean,
     default: false,
@@ -68,12 +74,16 @@ const emit = defineEmits([
   'articleAction',
   'toggleSelect',
   'hover',
+  'draftResolved',
+  'draftFailed',
 ]);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
+const pendingChangesPopoverRef = useTemplateRef('pendingChangesPopoverRef');
+
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
@@ -105,7 +115,18 @@ const articleMenuItems = computed(() => {
     .filter(key => key !== 'translate' || isTranslationAvailable.value)
     .map(key => commonItems[key]);
 
-  return [...statusItems, commonItems.delete];
+  const draftItems = props.hasPendingChanges
+    ? [
+        {
+          label: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES'),
+          value: 'discard-draft',
+          action: 'discard-draft',
+          icon: 'i-lucide-undo-2',
+        },
+      ]
+    : [];
+
+  return [...statusItems, ...draftItems, commonItems.delete];
 });
 
 const statusTextColor = computed(() => {
@@ -153,6 +174,12 @@ const lastUpdatedAt = computed(() => {
 
 const handleArticleAction = ({ action, value }) => {
   toggleDropdown(false);
+  // Un-publishing an article with staged edits — confirm apply/discard first;
+  // the popover applies the chosen status itself.
+  if (props.hasPendingChanges && (action === 'draft' || action === 'archive')) {
+    pendingChangesPopoverRef.value?.open(getArticleStatus(value));
+    return;
+  }
   emit('articleAction', { action, value, id: props.id });
 };
 
@@ -184,6 +211,18 @@ const handleClick = id => {
         </span>
       </div>
       <div class="flex items-center gap-2">
+        <span
+          v-if="hasPendingChanges"
+          :title="
+            t(
+              'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.PENDING_EDITS_TOOLTIP'
+            )
+          "
+          class="text-xs font-medium inline-flex items-center gap-1 h-6 px-2 py-0.5 rounded-md text-n-slate-11 bg-n-alpha-2 whitespace-nowrap shrink-0"
+        >
+          <span class="rounded-full size-1.5 bg-n-amber-9 shrink-0" />
+          {{ t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.PENDING_EDITS') }}
+        </span>
         <span
           class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
           :class="statusTextColor"
@@ -204,9 +243,15 @@ const handleClick = id => {
           <DropdownMenu
             v-if="showActionsDropdown"
             :menu-items="articleMenuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
+            class="mt-1 end-0 top-full w-40"
             @action="handleArticleAction($event)"
           />
+          <ArticlePendingChangesPopover
+            ref="pendingChangesPopoverRef"
+            :article-id="id"
+            @resolved="emit('draftResolved', $event)"
+            @failed="emit('draftFailed', $event)"
+          />
         </div>
       </div>
     </div>

app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue

@@ -56,6 +56,9 @@ const localeMenuLabels = computed(() => ({
   'customize-content': t(
     'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
   ),
+  'select-popular-content': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT'
+  ),
   delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
 

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+import {
+  renderInlineDiff,
+  buildDiffBlocks,
+} from 'dashboard/helper/articleDiffHelper';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const isOpen = defineModel({ type: Boolean, default: false });
+
+const { t } = useI18n();
+
+const liveTitle = computed(() => props.article?.title ?? '');
+const liveContent = computed(() => props.article?.content ?? '');
+const draftTitle = computed(() => props.article?.draftTitle ?? liveTitle.value);
+const draftContent = computed(
+  () => props.article?.draftContent ?? liveContent.value
+);
+
+const titleChanged = computed(() => liveTitle.value !== draftTitle.value);
+const titleDiff = computed(() =>
+  renderInlineDiff(liveTitle.value, draftTitle.value)
+);
+
+const contentBlocks = computed(() =>
+  buildDiffBlocks(liveContent.value, draftContent.value)
+);
+const contentChanged = computed(() =>
+  contentBlocks.value.some(block => block.type !== 'equal')
+);
+
+// HC tables store per-column widths (px, 0 = unset) in this marker, which the
+// formatter strips. Re-apply them as a fixed-layout <colgroup>, defaulting
+// unsized columns so they don't collapse.
+const COLWIDTHS_RE = /<!--cw-colwidths:([\d,]+)-->/;
+const DEFAULT_COL_WIDTH = 50;
+
+const applyColumnWidths = (html, widths) => {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const table = doc.body.querySelector('table');
+  if (!table) return html;
+
+  const sized = widths.map(width => (width > 0 ? width : DEFAULT_COL_WIDTH));
+  const colgroup = doc.createElement('colgroup');
+  sized.forEach(width => {
+    const col = doc.createElement('col');
+    col.style.width = `${width}px`;
+    colgroup.appendChild(col);
+  });
+  table.insertBefore(colgroup, table.firstChild);
+
+  table.style.tableLayout = 'fixed';
+  table.style.width = `${sized.reduce((sum, width) => sum + width, 0)}px`;
+  return doc.body.innerHTML;
+};
+
+const renderMarkdown = markdown => {
+  if (!markdown) return '';
+  const html = new MessageFormatter(markdown).formattedMessage;
+  const match = markdown.match(COLWIDTHS_RE);
+  return match
+    ? applyColumnWidths(html, match[1].split(',').map(Number))
+    : html;
+};
+
+const blockClass = type => {
+  if (type === 'added') {
+    return 'border-n-teal-9 bg-n-teal-2';
+  }
+  if (type === 'removed') {
+    return 'border-n-ruby-9 bg-n-ruby-2 line-through decoration-n-ruby-9/50';
+  }
+  return 'border-transparent';
+};
+
+const close = () => {
+  isOpen.value = false;
+};
+
+const dismissOnClickOutside = [close, { ignore: ['[data-diff-toggle]'] }];
+
+useKeyboardEvents({ Escape: { action: close, allowOnFocusedInput: true } });
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <Transition
+      enter-active-class="transition-transform duration-200 ease-in-out"
+      leave-active-class="transition-transform duration-200 ease-in-out"
+      enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
+      enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
+      leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
+      leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
+    >
+      <aside
+        v-if="isOpen"
+        v-on-click-outside="dismissOnClickOutside"
+        class="fixed inset-y-0 z-40 flex flex-col w-full shadow-2xl end-0 max-w-lg bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak"
+      >
+        <header
+          class="flex items-start justify-between gap-3 px-6 py-4 border-b shrink-0 border-n-weak bg-n-solid-1"
+        >
+          <div class="flex flex-col gap-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
+              <h3 class="text-base font-medium leading-6 text-n-slate-12">
+                {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
+              </h3>
+            </div>
+            <p class="text-sm text-n-slate-11">
+              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
+            </p>
+          </div>
+          <Button
+            icon="i-lucide-x"
+            variant="ghost"
+            color="slate"
+            size="sm"
+            class="shrink-0 hover:text-n-slate-11"
+            @click="close"
+          />
+        </header>
+
+        <div
+          class="flex flex-col flex-1 min-h-0 gap-4 px-6 pt-4 pb-6 overflow-y-auto"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            v-if="titleChanged"
+            class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
+          >
+            <span
+              class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
+            >
+              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
+            </span>
+            <h1
+              class="text-lg font-semibold leading-snug text-n-slate-12"
+              v-html="titleDiff"
+            />
+          </div>
+
+          <div
+            v-if="contentChanged"
+            class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
+          >
+            <div
+              v-for="(block, index) in contentBlocks"
+              :key="index"
+              class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
+              :class="blockClass(block.type)"
+              v-html="renderMarkdown(block.md)"
+            />
+          </div>
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
+      </aside>
+    </Transition>
+  </TeleportWithDirection>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
-import { debounce } from '@chatwoot/utils';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { useTimeoutFn } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
@@ -9,6 +9,7 @@ import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
 import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
 import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
+import ArticleDiffPanel from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue';
 
 const props = defineProps({
   article: {
@@ -38,32 +39,75 @@ const { t } = useI18n();
 
 const isNewArticle = computed(() => !props.article?.id);
 
-const localTitle = ref(props.article?.title ?? '');
-const localContent = ref(props.article?.content ?? '');
+// Prefer the draft; `??` keeps a deliberately-cleared empty string instead of
+// falling back to the live value.
+const effectiveTitle = () =>
+  props.article?.draftTitle ?? props.article?.title ?? '';
+const effectiveContent = () =>
+  props.article?.draftContent ?? props.article?.content ?? '';
 
-// Sync local state when navigating to a different article or on initial fetch
+const hasPendingChanges = computed(
+  () => props.article?.draftTitle != null || props.article?.draftContent != null
+);
+
+const localTitle = ref(effectiveTitle());
+const localContent = ref(effectiveContent());
+
+const isDiffPanelOpen = ref(false);
+
+// Autosave 500ms after the last edit. It sends both title and content so an
+// edit to one never drops a recent edit to the other. `stop` cancels a queued
+// save; `isPending` tells the header to wait before allowing a publish.
+const {
+  isPending: isSaving,
+  start: debouncedSave,
+  stop: cancelSave,
+} = useTimeoutFn(
+  () =>
+    emit('saveArticle', {
+      title: localTitle.value,
+      content: localContent.value,
+    }),
+  500,
+  { immediate: false }
+);
+
+const syncLocalState = () => {
+  cancelSave();
+  localTitle.value = effectiveTitle();
+  localContent.value = effectiveContent();
+};
+
+// Reseed on article switch or once a draft is published/discarded; close the
+// diff panel in the latter case since there's nothing left to compare.
 watch(
-  () => props.article?.id,
-  newId => {
-    if (newId) {
-      localTitle.value = props.article?.title ?? '';
-      localContent.value = props.article?.content ?? '';
-    }
+  [() => props.article?.id, hasPendingChanges],
+  ([id, pending], [prevId, prevPending]) => {
+    if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
+    if (prevPending && !pending) isDiffPanelOpen.value = false;
   }
 );
 
-const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
-
-const handleSave = value => {
+const scheduleSave = () => {
   if (isNewArticle.value) return;
-  debouncedSave(value);
+  debouncedSave();
 };
 
+// Flush a queued save on unmount so leaving the editor doesn't drop the last edit.
+onBeforeUnmount(() => {
+  if (isNewArticle.value || !isSaving.value) return;
+  cancelSave();
+  emit('saveArticle', {
+    title: localTitle.value,
+    content: localContent.value,
+  });
+});
+
 const articleTitle = computed({
   get: () => localTitle.value,
   set: value => {
     localTitle.value = value;
-    handleSave({ title: value });
+    scheduleSave();
   },
 });
 
@@ -71,7 +115,7 @@ const articleContent = computed({
   get: () => localContent.value,
   set: content => {
     localContent.value = content;
-    handleSave({ content });
+    scheduleSave();
   },
 });
 
@@ -108,9 +152,13 @@ const handleCreateArticle = event => {
         :is-saved="isSaved"
         :status="article.status"
         :article-id="article.id"
+        :pending-changes="hasPendingChanges"
+        :is-saving="isSaving"
         @go-back="onClickGoBack"
         @preview-article="previewArticle"
+        @show-diff="isDiffPanelOpen = !isDiffPanelOpen"
       />
+      <ArticleDiffPanel v-model="isDiffPanelOpen" :article="article" />
     </template>
     <template #content>
       <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useStore } from 'dashboard/composables/store.js';
+import { useStore, useMapGetter } from 'dashboard/composables/store.js';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { OnClickOutside } from '@vueuse/components';
@@ -17,6 +17,7 @@ import wootConstants from 'dashboard/constants/globals';
 import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import ArticlePendingChangesPopover from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue';
 
 const props = defineProps({
   isUpdating: {
@@ -35,9 +36,17 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  pendingChanges: {
+    type: Boolean,
+    default: false,
+  },
+  isSaving: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['goBack', 'previewArticle']);
+const emit = defineEmits(['goBack', 'previewArticle', 'showDiff']);
 
 const { t } = useI18n();
 const store = useStore();
@@ -49,9 +58,30 @@ const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 const showArticleActionMenu = ref(false);
 
+const pendingChangesPopoverRef = useTemplateRef('pendingChangesPopoverRef');
+
+// Per-article update flag the store already maintains.
+const articleUiFlags = useMapGetter('articles/uiFlags');
+const isUpdatingArticle = computed(
+  () => articleUiFlags.value(props.articleId).isUpdating
+);
+
+// Publishing while a save is still in flight would promote a stale draft, so we show an alert
+const blockedWhileSaving = () => {
+  if (!props.isSaving && !isUpdatingArticle.value) return false;
+  useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.SAVE_IN_PROGRESS'));
+  return true;
+};
+
+const isPublished = computed(() => props.status === ARTICLE_STATUSES.PUBLISHED);
+
+const hasPendingChanges = computed(
+  () => isPublished.value && props.pendingChanges
+);
+
 const articleMenuItems = computed(() => {
   const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
-  return statusOptions.map(option => {
+  const items = statusOptions.map(option => {
     const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
     return {
       label: t(label),
@@ -60,6 +90,17 @@ const articleMenuItems = computed(() => {
       icon,
     };
   });
+
+  if (hasPendingChanges.value) {
+    items.push({
+      label: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES'),
+      value: 'discard-draft',
+      action: 'discard-draft',
+      icon: 'i-lucide-undo-2',
+    });
+  }
+
+  return items;
 });
 
 const statusText = computed(() =>
@@ -85,8 +126,9 @@ const getStatusMessage = (status, isSuccess) => {
     : '';
 };
 
-const updateArticleStatus = async ({ value }) => {
-  showArticleActionMenu.value = false;
+// Pass draftAction (publishDraft/discardDraft) to resolve a draft in the same
+// update; omit it for a plain status change.
+const performStatusUpdate = async (value, draftAction) => {
   const status = getArticleStatus(value);
   if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
     isArticlePublishing.value = true;
@@ -94,7 +136,7 @@ const updateArticleStatus = async ({ value }) => {
   const { portalSlug } = route.params;
 
   try {
-    await store.dispatch('articles/update', {
+    await store.dispatch(`articles/${draftAction ?? 'update'}`, {
       portalSlug,
       articleId: props.articleId,
       status,
@@ -107,12 +149,100 @@ const updateArticleStatus = async ({ value }) => {
     } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
       useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
     }
-    isArticlePublishing.value = false;
   } catch (error) {
     useAlert(error?.message ?? getStatusMessage(status, false));
+  } finally {
     isArticlePublishing.value = false;
   }
 };
+
+const updateArticleStatus = ({ value }) => {
+  showArticleActionMenu.value = false;
+  // Leaving published with unsaved draft edits — ask whether to apply or discard
+  // first; the popover applies the status itself once resolved.
+  if (hasPendingChanges.value) {
+    pendingChangesPopoverRef.value?.open(getArticleStatus(value));
+    return;
+  }
+  performStatusUpdate(value);
+};
+
+const publishDraftChanges = async () => {
+  isArticlePublishing.value = true;
+  const { portalSlug } = route.params;
+  try {
+    await store.dispatch('articles/publishDraft', {
+      portalSlug,
+      articleId: props.articleId,
+    });
+    useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_SUCCESS'));
+    useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
+  } catch (error) {
+    useAlert(
+      error?.message ??
+        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
+    );
+  } finally {
+    isArticlePublishing.value = false;
+  }
+};
+
+const discardDraftChanges = async () => {
+  const { portalSlug } = route.params;
+  try {
+    await store.dispatch('articles/discardDraft', {
+      portalSlug,
+      articleId: props.articleId,
+    });
+    useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.message ??
+        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR')
+    );
+  }
+};
+
+const onPrimaryAction = () => {
+  if (blockedWhileSaving()) return;
+  if (hasPendingChanges.value) {
+    publishDraftChanges();
+  } else if (props.pendingChanges) {
+    // Promote leftover draft edits on publish instead of republishing stale content.
+    performStatusUpdate(ARTICLE_STATUSES.PUBLISHED, 'publishDraft');
+  } else {
+    updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED });
+  }
+};
+
+const onMenuAction = event => {
+  showArticleActionMenu.value = false;
+  // Don't resolve a draft while an autosave is still in flight — it could land
+  // after and recreate the draft we just discarded/applied.
+  if (blockedWhileSaving()) return;
+  if (event.action === 'discard-draft') {
+    discardDraftChanges();
+  } else {
+    updateArticleStatus(event);
+  }
+};
+
+// The popover applies the draft + status itself; we just surface the outcome.
+const onDraftResolved = status => {
+  useAlert(getStatusMessage(status, true));
+  if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
+    useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
+  } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+    useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
+  }
+};
+
+const onDraftFailed = error => {
+  useAlert(
+    error?.message ??
+      t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
+  );
+};
 </script>
 
 <template>
@@ -127,13 +257,24 @@ const updateArticleStatus = async ({ value }) => {
       @click="onClickGoBack"
     />
     <div class="flex items-center gap-4">
+      <button
+        v-if="hasPendingChanges"
+        type="button"
+        data-diff-toggle
+        :title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.VIEW_CHANGES')"
+        class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium transition-colors rounded-lg cursor-pointer text-n-amber-11 bg-n-amber-3 outline outline-1 outline-n-amber-5 hover:bg-n-amber-4"
+        @click="emit('showDiff')"
+      >
+        <span class="rounded-full size-1.5 bg-n-amber-9 shrink-0" />
+        {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PENDING_CHANGES') }}
+      </button>
       <span
         v-if="isUpdating || isSaved"
         class="text-xs font-medium transition-all duration-300 text-n-slate-11"
       >
         {{ statusText }}
       </span>
-      <div class="flex items-center gap-2">
+      <div class="relative flex items-center gap-2">
         <Button
           :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
           color="slate"
@@ -143,17 +284,21 @@ const updateArticleStatus = async ({ value }) => {
         />
         <ButtonGroup class="flex items-center">
           <Button
-            :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
+            :label="
+              hasPendingChanges
+                ? t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES')
+                : t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')
+            "
             size="sm"
             class="ltr:rounded-r-none rtl:rounded-l-none"
             no-animation
             :is-loading="isArticlePublishing"
             :disabled="
-              status === ARTICLE_STATUSES.PUBLISHED ||
               !articleId ||
-              isArticlePublishing
+              isArticlePublishing ||
+              (isPublished && !hasPendingChanges)
             "
-            @click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
+            @click="onPrimaryAction"
           />
           <div class="relative">
             <OnClickOutside @trigger="showArticleActionMenu = false">
@@ -169,11 +314,17 @@ const updateArticleStatus = async ({ value }) => {
                 v-if="showArticleActionMenu"
                 :menu-items="articleMenuItems"
                 class="mt-2 ltr:right-0 rtl:left-0 top-full"
-                @action="updateArticleStatus($event)"
+                @action="onMenuAction($event)"
               />
             </OnClickOutside>
           </div>
         </ButtonGroup>
+        <ArticlePendingChangesPopover
+          ref="pendingChangesPopoverRef"
+          :article-id="articleId"
+          @resolved="onDraftResolved"
+          @failed="onDraftFailed"
+        />
       </div>
     </div>
   </div>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { onKeyStroke } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  articleId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['resolved', 'failed']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const isOpen = ref(false);
+const requestedStatus = ref(null);
+// Which button is in flight, so only that one shows the spinner.
+const activeAction = ref(null);
+
+const articleUiFlags = useMapGetter('articles/uiFlags');
+const isLoading = computed(
+  () => articleUiFlags.value(props.articleId).isUpdating
+);
+
+// Open the confirmation for a target status; resolving it also applies that status.
+const open = status => {
+  requestedStatus.value = status;
+  activeAction.value = null;
+  isOpen.value = true;
+};
+
+const close = () => {
+  isOpen.value = false;
+};
+
+// Don't let a click-outside or Escape dismiss the popover mid-action.
+const dismiss = () => {
+  if (!isLoading.value) close();
+};
+
+const resolve = async draftAction => {
+  activeAction.value = draftAction === 'publishDraft' ? 'apply' : 'discard';
+  try {
+    await store.dispatch(`articles/${draftAction}`, {
+      portalSlug: route.params.portalSlug,
+      articleId: props.articleId,
+      status: requestedStatus.value,
+    });
+    emit('resolved', requestedStatus.value);
+    close();
+  } catch (error) {
+    emit('failed', error);
+  }
+};
+
+const onApply = () => resolve('publishDraft');
+const onDiscard = () => resolve('discardDraft');
+
+onKeyStroke('Escape', () => {
+  if (isOpen.value) dismiss();
+});
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <div
+    v-show="isOpen"
+    v-on-click-outside="dismiss"
+    class="absolute z-50 flex flex-col gap-4 p-4 mt-2 outline outline-1 shadow-lg w-96 end-0 top-full rounded-xl bg-n-alpha-3 backdrop-blur-[100px] outline-n-container"
+  >
+    <div class="flex items-start justify-between gap-2">
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.TITLE') }}
+        </h3>
+        <p class="mb-0 text-sm text-n-slate-11">
+          {{
+            t(
+              'HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.DESCRIPTION'
+            )
+          }}
+        </p>
+      </div>
+      <Button
+        icon="i-lucide-x"
+        variant="ghost"
+        color="slate"
+        size="xs"
+        class="shrink-0 -me-1 -mt-1"
+        :disabled="isLoading"
+        @click="close"
+      />
+    </div>
+    <div class="flex items-center justify-between gap-2">
+      <Button
+        type="button"
+        variant="faded"
+        color="ruby"
+        size="sm"
+        class="flex-1"
+        :is-loading="isLoading && activeAction === 'discard'"
+        :disabled="isLoading"
+        :label="
+          t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.DISCARD')
+        "
+        @click="onDiscard"
+      />
+      <Button
+        type="button"
+        color="blue"
+        size="sm"
+        class="flex-1"
+        :is-loading="isLoading && activeAction === 'apply'"
+        :disabled="isLoading"
+        :label="
+          t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.APPLY')
+        "
+        @click="onApply"
+      />
+    </div>
+  </div>
+</template>