fix(automations): exclude private notes from the customer-unresponsive wait

chore(automations): correct the armed-rows comment on rule edit
fix(automations): don't arm status waits on conversations with no status clock
2026-07-23 18:28:58 +05:30 · 2026-07-23 18:21:50 +05:30 · 2026-07-23 18:21:48 +05:30 · 2026-07-23 18:21:24 +05:30 · 2026-07-23 17:07:51 +05:30 · 2026-07-23 17:07:49 +05:30
1425 changed files with 66982 additions and 2681 deletions
@@ -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
@@ -149,7 +151,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
@@ -85,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)
@@ -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)
@@ -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)
@@ -1,4 +1,4 @@
-Copyright (c) 2017-2024 Chatwoot Inc.
+Copyright (c) 2017-2026 Chatwoot Inc.

 Portions of this software are licensed as follows:

@@ -1 +1 @@
-4.15.1
+4.16.0
@@ -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]

@@ -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
@@ -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

@@ -3,6 +3,7 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont

  before_action :check_authorization
  before_action :fetch_automation_rule, only: [:show, :update, :destroy, :clone]
+  before_action :ensure_execution_delay_allowed, only: [:create, :update]

  def index
    @automation_rules = Current.account.automation_rules
@@ -48,6 +49,9 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
  def clone
    automation_rule = Current.account.automation_rules.find_by(id: params[:automation_rule_id])
    new_rule = automation_rule.dup
+    # dup copies execution_delay; drop it when the feature is off so clone can't create new
+    # delayed rules that create/update would reject.
+    new_rule.execution_delay = nil unless delayed_automations_enabled?
    new_rule.save!
    @automation_rule = new_rule
  end
@@ -55,13 +59,27 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
  private

  def automation_rules_permit
+    permitted_attributes = [:name, :description, :event_name, :active]
+    permitted_attributes << :execution_delay if delayed_automations_enabled?
+
    params.permit(
-      :name, :description, :event_name, :active,
+      *permitted_attributes,
      conditions: [:attribute_key, :filter_operator, :query_operator, :custom_attribute_type, { values: [] }],
      actions: [:action_name, { action_params: [] }]
    )
  end

+  def ensure_execution_delay_allowed
+    return if delayed_automations_enabled?
+    return if params[:execution_delay].blank?
+
+    render json: { error: 'Delayed automations are not enabled for this account.' }, status: :unprocessable_entity
+  end
+
+  def delayed_automations_enabled?
+    Current.account.feature_enabled?('delayed_automations')
+  end
+
  def fetch_automation_rule
    @automation_rule = Current.account.automation_rules.find_by(id: params[:id])
  end
@@ -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
@@ -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')
@@ -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
@@ -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
@@ -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]

@@ -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
@@ -45,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
@@ -124,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
@@ -155,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,
@@ -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

@@ -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)
@@ -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
@@ -16,6 +19,13 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:

  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,
@@ -31,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,
@@ -39,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
@@ -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
@@ -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,
@@ -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
@@ -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)
@@ -4,17 +4,53 @@ module PortalHomeData
  private

  def load_home_data
-    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
+    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 = @visible_categories.first(3)
+    @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?
@@ -64,10 +64,8 @@ class DashboardController < ActionController::Base
    return unless @portal

    @locale = @portal.default_locale
-    if @portal.layout == 'documentation'
-      request.variant = :documentation
-      load_home_data
-    end
+    request.variant = :documentation if @portal.layout == 'documentation'
+    load_home_data
    render 'public/api/v1/portals/show', layout: 'portal', portal: @portal and return
  end

@@ -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
@@ -65,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

@@ -7,7 +7,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
  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
@@ -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?
@@ -1,6 +1,10 @@
 class ConversationDrop < BaseDrop
  include MessageFormatHelper

+  def id
+    @obj.try(:display_id)
+  end
+
  def display_id
    @obj.try(:display_id)
  end
@@ -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
@@ -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
@@ -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
@@ -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();
@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class CaptainAgentSessions extends ApiClient {
+  constructor() {
+    super('captain/agent_sessions', { accountScoped: true });
+  }
+}
+
+export default new CaptainAgentSessions();
@@ -26,16 +26,33 @@ class CaptainAssistant extends ApiClient {
    });
  }

-  getStats({ assistantId, range }) {
-    return axios.get(`${this.url}/${assistantId}/stats`, {
+  getStats({ assistantId, range, signal }) {
+    const requestConfig = {
      params: { range, timezone_offset: getTimezoneOffset() },
+    };
+    if (signal) requestConfig.signal = signal;
+
+    return axios.get(`${this.url}/${assistantId}/stats`, requestConfig);
+  }
+
+  getSummary({ assistantId, range, stats }) {
+    return axios.get(`${this.url}/${assistantId}/summary`, {
+      params: { range, timezone_offset: getTimezoneOffset(), stats },
    });
  }

-  getSummary({ assistantId, range }) {
-    return axios.get(`${this.url}/${assistantId}/summary`, {
-      params: { range, timezone_offset: getTimezoneOffset() },
-    });
+  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);
  }
 }

@@ -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);
@@ -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();
@@ -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 }) {
@@ -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 }
      );
    });
  });
@@ -0,0 +1,240 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
+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(() =>
+  props.call.provider === 'whatsapp' ? 'i-woot-whatsapp' : 'i-lucide-phone'
+);
+
+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-40 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" />
+        <template v-if="agentActionLabel">
+          <span
+            class="text-label-small text-n-slate-10 truncate min-w-0 shrink min-w-8"
+          >
+            {{ 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>
+        </template>
+        <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.5 justify-start min-w-14 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">
+        {{ 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 w-16 shrink-0"
+    >
+      {{ createdAtLabel }}
+    </span>
+  </div>
+</template>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,250 @@
+<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';
+
+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 selectedAssigneeLabel = computed(
+  () =>
+    props.agents.find(agent => agent.id === assigneeId.value)?.name ||
+    t('CALLS_PAGE.FILTERS.ASSIGNEE')
+);
+
+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-3">
+      <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"
+        @click="setActivity(null)"
+      >
+        {{ activeChipLabel }}
+        <Icon icon="i-lucide-x" />
+      </Button>
+      <div class="w-px h-4 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-12"
+        @click="setActivity(chip)"
+      />
+      <OnClickOutside
+        class="relative shrink-0"
+        @trigger="closeOnOutside('activity')"
+      >
+        <Button
+          variant="outline"
+          color="slate"
+          size="sm"
+          icon="i-lucide-phone"
+          class="text-n-slate-12"
+          @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-lucide-user-round-cog"
+          class="max-w-52 text-n-slate-12"
+          @click="toggleMenu('assignee')"
+        >
+          <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"
+          :color="hasMoreFilters ? 'blue' : 'slate'"
+          :class="hasMoreFilters ? '' : 'text-n-slate-12'"
+          @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>
@@ -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 },
+};
@@ -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
@@ -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>
@@ -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'),
 }));

@@ -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>
@@ -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">
@@ -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>
@@ -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>
@@ -5,8 +5,12 @@ import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import {
+  getArticleStatus,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper.js';
 import wootConstants from 'dashboard/constants/globals';
+import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';

 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
 import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
@@ -145,6 +149,24 @@ const updateArticlesMeta = () => {
  });
 };

+const refreshArticleMeta = async () => {
+  await updateArticlesMeta();
+  await updatePortalMeta();
+};
+
+// The card's pending-changes popover applies the status itself; surface the result.
+const onDraftResolved = status => {
+  useAlert(getStatusMessage(status, true));
+  refreshArticleMeta();
+};
+
+const onDraftFailed = error => {
+  useAlert(
+    error?.message ||
+      t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
+  );
+};
+
 const handleArticleAction = async (action, { status, id }) => {
  const { portalSlug } = route.params;
  try {
@@ -154,6 +176,14 @@ const handleArticleAction = async (action, { status, id }) => {
        articleId: id,
      });
      useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
+    } else if (action === 'discard-draft') {
+      await store.dispatch('articles/discardDraft', {
+        portalSlug,
+        articleId: id,
+      });
+      useAlert(
+        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS')
+      );
    } else {
      await store.dispatch('articles/update', {
        portalSlug,
@@ -168,15 +198,16 @@ const handleArticleAction = async (action, { status, id }) => {
        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
      }
    }
-    await updateArticlesMeta();
-    await updatePortalMeta();
+    await refreshArticleMeta();
  } catch (error) {
-    const errorMessage =
-      error?.message ||
-      (action === 'delete'
-        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
-        : getStatusMessage(status, false));
-    useAlert(errorMessage);
+    const fallbackMessage =
+      {
+        delete: t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE'),
+        'discard-draft': t(
+          'HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR'
+        ),
+      }[action] ?? getStatusMessage(status, false);
+    useAlert(error?.message || fallbackMessage);
  }
 };

@@ -210,10 +241,15 @@ const updateArticle = ({ action, value, id }) => {
        :views="item.views || 0"
        :updated-at="item.updatedAt"
        :is-selected="selectedArticleIds.has(item.id)"
+        :has-pending-changes="
+          item.status === ARTICLE_STATUSES.PUBLISHED && hasPendingChanges(item)
+        "
        selectable
        :show-selection-control="shouldShowSelectionControl(item.id)"
        @open-article="openArticle"
        @article-action="updateArticle"
+        @draft-resolved="onDraftResolved"
+        @draft-failed="onDraftFailed"
        @toggle-select="emit('toggleSelect', $event)"
        @hover="isHovered => handleCardHover(isHovered, item.id)"
      />
@@ -3,10 +3,15 @@ import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
-import { useMapGetter } from 'dashboard/composables/store.js';
+import { useStore, useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { debounce } from '@chatwoot/utils';
-import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
+import {
+  ARTICLE_TABS,
+  CATEGORY_ALL,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper';
+import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAlert } from 'dashboard/composables';
 import articlesAPI from 'dashboard/api/helpCenter/articles';
@@ -60,6 +65,7 @@ const emit = defineEmits([

 const router = useRouter();
 const route = useRoute();
+const store = useStore();
 const { t } = useI18n();

 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
@@ -227,15 +233,46 @@ const onBulkActionSuccess = message => {
 };

 const bulkUpdateStatus = async status => {
+  const selectedIds = [...selectedArticleIds.value];
+  const { portalSlug } = route.params;
+
+  const pendingIds = props.articles
+    .filter(
+      article =>
+        selectedIds.includes(article.id) &&
+        article.status === ARTICLE_STATUSES.PUBLISHED &&
+        hasPendingChanges(article)
+    )
+    .map(article => article.id);
+
+  // Publish promotes each pending draft; other status changes skip them.
+  const isPublishing = status === ARTICLE_STATUSES.PUBLISHED;
+  const draftIds = isPublishing ? pendingIds : [];
+  const skippedCount = isPublishing ? 0 : pendingIds.length;
+  const articleIds = selectedIds.filter(id => !pendingIds.includes(id));
+
+  if (!articleIds.length && !draftIds.length) {
+    useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED_ALL'));
+    return;
+  }
+
  try {
-    await articlesAPI.bulkUpdateStatus({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-      status,
-    });
+    if (articleIds.length) {
+      await articlesAPI.bulkUpdateStatus({ portalSlug, articleIds, status });
+    }
+    await Promise.all(
+      draftIds.map(articleId =>
+        store.dispatch('articles/publishDraft', { portalSlug, articleId })
+      )
+    );
    onBulkActionSuccess(
      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
    );
+    if (skippedCount) {
+      useAlert(
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED', skippedCount)
+      );
+    }
  } catch (error) {
    useAlert(
      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')
@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
 import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
+import PopularContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -26,6 +27,7 @@ const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();

 const contentDialogRef = ref(null);
+const popularContentDialogRef = ref(null);

 const isLocaleDefault = code => {
  return props.portal?.meta?.default_locale === code;
@@ -154,6 +156,8 @@ const handleAction = ({ action }, localeCode) => {
    publishLocale({ localeCode: localeCode });
  } else if (action === 'customize-content') {
    contentDialogRef.value.openForLocale(localeCode);
+  } else if (action === 'select-popular-content') {
+    popularContentDialogRef.value.openForLocale(localeCode);
  } else if (action === 'delete') {
    deletePortalLocale({ localeCode: localeCode });
  }
@@ -174,5 +178,6 @@ const handleAction = ({ action }, localeCode) => {
      @action="handleAction($event, locale.code)"
    />
    <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
+    <PopularContentDialog ref="popularContentDialogRef" :portal="portal" />
  </ul>
 </template>
@@ -0,0 +1,235 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDebounceFn } from '@vueuse/core';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useAbortableRequest } from 'dashboard/composables/useAbortableRequest';
+import categoriesAPI from 'dashboard/api/helpCenter/categories';
+import articlesAPI from 'dashboard/api/helpCenter/articles';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ReorderableMultiSelect from 'dashboard/components-next/combobox/ReorderableMultiSelect.vue';
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const MAX_CATEGORIES = 3;
+const MAX_ARTICLES = 6;
+const KEY = 'HELP_CENTER.LOCALES_PAGE.POPULAR_CONTENT_DIALOG';
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const activeLocale = ref('');
+// One flag per picker so each shows its skeleton until its own data loads.
+const categoriesLoading = ref(false);
+const { run: runArticleRequest, isPending: articlesLoading } =
+  useAbortableRequest();
+
+const categoryOptions = ref([]);
+const selectedCategoryIds = ref([]);
+
+// Articles are searched server-side, so cache options for selected items that
+// fall outside the current results.
+const articleResults = ref([]);
+const articleOptionById = ref({});
+const selectedArticleIds = ref([]);
+
+const popularContent = computed(
+  () => props.portal?.config?.popular_content || {}
+);
+
+const articleOptions = computed(() => {
+  const options = new Map();
+  selectedArticleIds.value.forEach(id => {
+    if (articleOptionById.value[id])
+      options.set(id, articleOptionById.value[id]);
+  });
+  articleResults.value.forEach(option => options.set(option.value, option));
+  return [...options.values()];
+});
+
+const toArticleOption = article => ({
+  value: article.id,
+  label: article.title,
+  subtitle: t(`${KEY}.ARTICLES.IN_CATEGORY`, {
+    category: article.category?.name || t(`${KEY}.ARTICLES.UNCATEGORIZED`),
+  }),
+});
+
+const fetchCategories = async localeCode => {
+  const {
+    data: { payload },
+  } = await categoriesAPI.get({
+    portalSlug: props.portal?.slug,
+    locale: localeCode,
+  });
+  return payload.map(category => ({
+    value: category.id,
+    label: category.name,
+    subtitle: t(`${KEY}.CATEGORIES.ARTICLES_COUNT`, {
+      count: category.meta?.articles_count || 0,
+    }),
+    icon: category.icon,
+    iconColor: category.icon_color,
+  }));
+};
+
+const requestArticles = async (query, signal) => {
+  const { data } = await articlesAPI.getArticles({
+    pageNumber: 1,
+    portalSlug: props.portal?.slug,
+    locale: activeLocale.value,
+    status: 'published',
+    query,
+    signal,
+  });
+  articleResults.value = data.payload.map(article => {
+    const option = toArticleOption(article);
+    articleOptionById.value[article.id] = option;
+    return option;
+  });
+};
+
+const searchArticles = (query = '') =>
+  runArticleRequest(signal => requestArticles(query, signal));
+
+const onArticleSearch = useDebounceFn(searchArticles, 300);
+
+// Resolve options for pre-selected articles that aren't in the current results.
+const cacheSelectedArticleOptions = async () => {
+  const unknownIds = selectedArticleIds.value.filter(
+    id => !articleOptionById.value[id]
+  );
+  await Promise.all(
+    unknownIds.map(async id => {
+      try {
+        const { data } = await articlesAPI.getArticle({
+          id,
+          portalSlug: props.portal?.slug,
+        });
+        articleOptionById.value[id] = toArticleOption(data.payload);
+      } catch {
+        // Deleted since it was picked; leave it for the id fallback.
+      }
+    })
+  );
+};
+
+const loadCategories = async localeCode => {
+  categoriesLoading.value = true;
+  try {
+    const options = await fetchCategories(localeCode);
+    // Reopened for another locale mid-flight; drop the stale response.
+    if (localeCode !== activeLocale.value) return;
+    categoryOptions.value = options;
+  } catch (error) {
+    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
+  } finally {
+    if (localeCode === activeLocale.value) categoriesLoading.value = false;
+  }
+};
+
+const loadArticles = async () => {
+  try {
+    await runArticleRequest(signal =>
+      Promise.all([cacheSelectedArticleOptions(), requestArticles('', signal)])
+    );
+  } catch (error) {
+    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
+  }
+};
+
+const openForLocale = localeCode => {
+  const existing = popularContent.value[localeCode] || {};
+  activeLocale.value = localeCode;
+  selectedCategoryIds.value = [...(existing.category_ids || [])];
+  selectedArticleIds.value = [...(existing.article_ids || [])];
+  categoryOptions.value = [];
+  articleResults.value = [];
+  articleOptionById.value = {};
+  dialogRef.value?.open();
+
+  loadCategories(localeCode);
+  loadArticles();
+};
+
+const onConfirm = async () => {
+  const updated = { ...popularContent.value };
+  const entry = {
+    category_ids: selectedCategoryIds.value,
+    article_ids: selectedArticleIds.value,
+  };
+
+  if (entry.category_ids.length || entry.article_ids.length) {
+    updated[activeLocale.value] = entry;
+  } else {
+    delete updated[activeLocale.value];
+  }
+
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal?.slug,
+      config: { popular_content: updated },
+    });
+    dialogRef.value?.close();
+    useAlert(t(`${KEY}.API.SUCCESS_MESSAGE`));
+  } catch (error) {
+    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
+  }
+};
+
+defineExpose({ openForLocale });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t(`${KEY}.TITLE`)"
+    :description="t(`${KEY}.DESCRIPTION`)"
+    :confirm-button-label="t(`${KEY}.CONFIRM`)"
+    @confirm="onConfirm"
+  >
+    <div class="flex flex-col gap-5">
+      <ReorderableMultiSelect
+        v-model="selectedCategoryIds"
+        :options="categoryOptions"
+        :max="MAX_CATEGORIES"
+        :label="t(`${KEY}.CATEGORIES.LABEL`)"
+        :add-label="t(`${KEY}.ADD_ANOTHER`)"
+        :search-placeholder="t(`${KEY}.SEARCH`)"
+        :empty-state="t(`${KEY}.EMPTY`)"
+        fallback-icon="i-lucide-folder"
+        :loading="categoriesLoading"
+      >
+        <template #counter="{ remaining }">
+          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
+        </template>
+        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
+      </ReorderableMultiSelect>
+      <ReorderableMultiSelect
+        v-model="selectedArticleIds"
+        server-search
+        :options="articleOptions"
+        :max="MAX_ARTICLES"
+        :label="t(`${KEY}.ARTICLES.LABEL`)"
+        :add-label="t(`${KEY}.ADD_ANOTHER`)"
+        :search-placeholder="t(`${KEY}.SEARCH`)"
+        :empty-state="t(`${KEY}.EMPTY`)"
+        :loading="articlesLoading"
+        @search="onArticleSearch"
+      >
+        <template #counter="{ remaining }">
+          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
+        </template>
+        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
+      </ReorderableMultiSelect>
+    </div>
+  </Dialog>
+</template>
@@ -234,6 +234,7 @@ onMounted(() => resetContacts());
    ref="popoverRef"
    :align="align"
    :show-content-border="false"
+    :close-on-scroll="false"
    @show="onPopoverShow"
    @hide="onPopoverHide"
  >
@@ -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-8 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>
@@ -61,10 +61,10 @@ const triggerAction = () => {
    <div>
      <slot />
    </div>
-    <div>
+    <div class="flex-shrink-0">
      <button
        v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
+        class="px-3 py-1 w-auto grid place-content-center rounded-lg whitespace-nowrap"
        :class="buttonClass"
        @click="triggerAction"
      >
@@ -14,6 +14,7 @@ const props = defineProps({
  icon: { type: [String, Object, Function], default: '' },
  trailingIcon: { type: Boolean, default: false },
  isLoading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
 });

 const emit = defineEmits(['click']);
@@ -61,6 +62,7 @@ const handleClick = () => {
      :icon="icon"
      :trailing-icon="trailingIcon"
      :is-loading="isLoading"
+      :disabled="disabled"
      @click="handleClick"
      @blur="resetConfirmMode"
    >
@@ -107,6 +107,7 @@ const onClickCancel = () => {

        <TextArea
          v-model="state.description"
+          :max-length="500"
          :label="
            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
          "
@@ -66,6 +66,10 @@ const props = defineProps({
    type: Number,
    default: null,
  },
+  responsesCount: {
+    type: Number,
+    default: 0,
+  },
  isSelected: {
    type: Boolean,
    default: false,
@@ -112,10 +116,10 @@ const showSyncStatus = computed(() => !isPdf.value);
 const menuItems = computed(() => {
  const allOptions = [
    {
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
-      value: 'viewRelatedQuestions',
-      action: 'viewRelatedQuestions',
-      icon: 'i-ph-tree-view-duotone',
+      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_DETAILS'),
+      value: 'viewDetails',
+      action: 'viewDetails',
+      icon: 'i-lucide-eye',
    },
  ];

@@ -143,6 +147,9 @@ const menuItems = computed(() => {
 });

 const createdAtLabel = computed(() => dynamicTime(props.createdAt));
+const responsesCountLabel = computed(() =>
+  t('CAPTAIN.DOCUMENTS.FAQ_COUNT', { n: props.responsesCount })
+);

 const displayLink = computed(() =>
  isPdf.value
@@ -158,6 +165,10 @@ const handleAction = ({ action, value }) => {
  emit('action', { action, value, id: props.id });
 };

+const handleViewDetails = () => {
+  emit('action', { action: 'viewDetails', id: props.id });
+};
+
 const handleRetry = () => {
  emit('action', { action: 'sync', id: props.id });
 };
@@ -177,9 +188,13 @@ const handleRetry = () => {
      <Checkbox v-model="modelValue" />
    </div>
    <div class="flex gap-1 justify-between w-full">
-      <span class="text-base text-n-slate-12 line-clamp-1">
+      <button
+        type="button"
+        class="p-0 text-base text-left bg-transparent border-0 outline-transparent text-n-slate-12 line-clamp-1 underline-offset-2 hover:underline focus-visible:underline"
+        @click="handleViewDetails"
+      >
        {{ name }}
-      </span>
+      </button>
      <div v-if="showMenu" class="flex gap-2 items-center">
        <div
          v-on-clickaway="() => toggleDropdown(false)"
@@ -228,6 +243,9 @@ const handleRetry = () => {
        <Icon :icon="linkIcon" class="shrink-0" />
        <span class="truncate">{{ displayLink }}</span>
      </span>
+      <span class="text-sm shrink-0 text-n-slate-11">
+        {{ responsesCountLabel }}
+      </span>
      <DocumentSyncStatus
        v-if="showSyncStatus"
        :status="syncStatus"
@@ -213,6 +213,7 @@ const renderInstruction = instruction => () =>

      <TextArea
        v-model="state.description"
+        :max-length="500"
        :label="
          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
        "
@@ -122,6 +122,7 @@ watch(

    <Editor
      v-model="state.description"
+      :max-length="500"
      :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
      :message="formErrors.description"
@@ -117,6 +117,7 @@ watch(

    <Editor
      v-model="state.description"
+      :max-length="500"
      :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
      :message="formErrors.description"
@@ -0,0 +1,86 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import DocumentDetails from './DocumentDetails.vue';
+
+const { dispatch, getterValues } = vi.hoisted(() => ({
+  dispatch: vi.fn(),
+  getterValues: {
+    'captainResponses/getUIFlags': { value: { fetchingList: false } },
+    'captainResponses/getRecords': { value: [] },
+    'captainResponses/getMeta': { value: { totalCount: 26, page: 1 } },
+  },
+}));
+
+vi.mock('dashboard/composables/store', () => ({
+  useStore: () => ({ dispatch }),
+  useMapGetter: key => getterValues[key],
+}));
+
+vi.mock('dashboard/composables', () => ({ useAlert: vi.fn() }));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: key => key }),
+}));
+
+const captainDocument = {
+  id: 42,
+  name: 'FAQ source',
+  external_link: 'https://example.com/docs',
+  assistant: { id: 7 },
+  content: 'Document content',
+  pdf_document: false,
+};
+
+const DialogStub = {
+  name: 'Dialog',
+  template: '<div><slot /></div>',
+};
+
+const TabBarStub = {
+  name: 'TabBar',
+  template:
+    '<button data-test="faq-tab" @click="$emit(\'tabChanged\', { key: \'faqs\' })" />',
+};
+
+const PaginationFooterStub = {
+  name: 'PaginationFooter',
+  template:
+    '<button data-test="next-page" @click="$emit(\'update:currentPage\', 2)" />',
+};
+
+describe('DocumentDetails', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    dispatch.mockResolvedValue([]);
+  });
+
+  it('requests another FAQ page when the document has more than 25 FAQs', async () => {
+    const wrapper = shallowMount(DocumentDetails, {
+      props: { captainDocument },
+      global: {
+        directives: { dompurifyHtml: {} },
+        stubs: {
+          Dialog: DialogStub,
+          TabBar: TabBarStub,
+          PaginationFooter: PaginationFooterStub,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(dispatch).toHaveBeenCalledWith('captainResponses/get', {
+      page: 1,
+      assistantId: 7,
+      documentId: 42,
+    });
+
+    await wrapper.get('[data-test="faq-tab"]').trigger('click');
+    await wrapper.get('[data-test="next-page"]').trigger('click');
+
+    expect(dispatch).toHaveBeenLastCalledWith('captainResponses/get', {
+      page: 2,
+      assistantId: 7,
+      documentId: 42,
+    });
+  });
+});
@@ -0,0 +1,374 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+import {
+  isSafeHttpLink,
+  formatDocumentLink,
+  getDocumentDisplayPath,
+} from 'shared/helpers/documentHelper';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import ResponseCard from '../../assistant/ResponseCard.vue';
+
+const props = defineProps({
+  captainDocument: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['close']);
+const TAB_KEYS = {
+  CONTENT: 'content',
+  FAQS: 'faqs',
+};
+const RESPONSES_PER_PAGE = 25;
+const { t } = useI18n();
+const store = useStore();
+const dialogRef = ref(null);
+const documentDetails = computed(() => props.captainDocument);
+const showRawContent = ref(false);
+const activeTabIndex = ref(0);
+
+const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const responses = useMapGetter('captainResponses/getRecords');
+const meta = useMapGetter('captainResponses/getMeta');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+const totalCount = computed(() => meta.value.totalCount || 0);
+const currentPage = computed(() => meta.value.page || 1);
+const showPaginationFooter = computed(
+  () => totalCount.value > RESPONSES_PER_PAGE
+);
+const documentContent = computed(() => documentDetails.value?.content?.trim());
+const documentContentLength = computed(
+  () => documentContent.value?.length || 0
+);
+const isPdf = computed(() => documentDetails.value?.pdf_document);
+const displayUrl = computed(() => documentDetails.value?.display_url);
+const externalLink = computed(() => documentDetails.value?.external_link);
+const sourceHref = computed(() => displayUrl.value || externalLink.value);
+const hasSafeLink = computed(() => isSafeHttpLink(sourceHref.value));
+const displayLink = computed(() => {
+  if (isPdf.value) return formatDocumentLink(externalLink.value);
+  return getDocumentDisplayPath(displayUrl.value || externalLink.value);
+});
+const contentTabLabel = computed(() =>
+  isPdf.value
+    ? t('CAPTAIN.DOCUMENTS.DETAILS.PDF_TAB')
+    : t('CAPTAIN.DOCUMENTS.DETAILS.CONTENT_TAB')
+);
+const tabs = computed(() => [
+  { key: TAB_KEYS.CONTENT, label: contentTabLabel.value },
+  {
+    key: TAB_KEYS.FAQS,
+    label: t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE'),
+    count: totalCount.value,
+  },
+]);
+const activeTabKey = computed(() => tabs.value[activeTabIndex.value]?.key);
+const isUnreadableContent = computed(() => {
+  if (!documentContent.value) return false;
+
+  const content = documentContent.value;
+  const sample = content.slice(0, 2000);
+  const characters = Array.from(sample);
+  const nonPrintableCharacters = characters.filter(character => {
+    const charCode = character.charCodeAt(0);
+    return (
+      (charCode <= 31 && ![9, 10, 13].includes(charCode)) ||
+      (charCode >= 127 && charCode <= 159)
+    );
+  });
+  const nonPrintableRatio =
+    nonPrintableCharacters.length / Math.max(characters.length, 1);
+  const replacementCharacterRatio =
+    characters.filter(character => character === '\uFFFD').length /
+    Math.max(characters.length, 1);
+  const hasPdfObjectMarkers =
+    content.includes(' obj') &&
+    content.includes(' endobj') &&
+    content.includes(' stream');
+
+  return (
+    content.startsWith('%PDF') ||
+    hasPdfObjectMarkers ||
+    nonPrintableRatio > 0.02 ||
+    replacementCharacterRatio > 0.05
+  );
+});
+const formattedDocumentContent = computed(() => {
+  if (!documentContent.value || isUnreadableContent.value) return '';
+
+  const formatter = new MessageFormatter(documentContent.value);
+  formatter.disableImageRendering();
+  return formatter.formattedMessage;
+});
+const updatedAtLabel = computed(() => {
+  if (!documentDetails.value?.updated_at) return null;
+  return messageTimestamp(
+    documentDetails.value.updated_at,
+    'MMM d, yyyy h:mm a'
+  );
+});
+const syncedAtLabel = computed(() => {
+  if (!documentDetails.value?.last_synced_at) return null;
+  return messageTimestamp(
+    documentDetails.value.last_synced_at,
+    'MMM d, yyyy h:mm a'
+  );
+});
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCopyContent = async () => {
+  try {
+    await copyTextToClipboard(documentContent.value);
+    useAlert(t('CAPTAIN.DOCUMENTS.DETAILS.COPY_SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.DOCUMENTS.DETAILS.COPY_ERROR'));
+  }
+};
+
+const handleTabChanged = tab => {
+  activeTabIndex.value = tabs.value.findIndex(item => item.key === tab.key);
+};
+
+const fetchResponses = (page = 1) => {
+  return store.dispatch('captainResponses/get', {
+    page,
+    assistantId: props.captainDocument.assistant.id,
+    documentId: props.captainDocument.id,
+  });
+};
+
+const handlePageChange = page => {
+  fetchResponses(page);
+};
+
+onMounted(() => {
+  fetchResponses();
+});
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="documentDetails.name || documentDetails.external_link"
+    :description="t('CAPTAIN.DOCUMENTS.DETAILS.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+    width="3xl"
+    @close="handleClose"
+  >
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else class="flex flex-col gap-6 min-h-48">
+      <section class="flex flex-col gap-3">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium uppercase text-n-slate-10">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.SOURCE') }}
+            </span>
+            <a
+              v-if="hasSafeLink"
+              :href="sourceHref"
+              :title="sourceHref"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center min-w-0 gap-1 text-sm text-n-slate-12 hover:underline"
+            >
+              <Icon icon="i-lucide-external-link" class="size-3 shrink-0" />
+              <span class="truncate">{{ displayLink }}</span>
+            </a>
+            <span v-else class="text-sm truncate text-n-slate-12">
+              {{ displayLink }}
+            </span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium uppercase text-n-slate-10">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.GENERATED_FAQS') }}
+            </span>
+            <span class="text-sm text-n-slate-12">
+              {{ totalCount }}
+            </span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium uppercase text-n-slate-10">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.LAST_UPDATED') }}
+            </span>
+            <span class="text-sm text-n-slate-12">
+              {{
+                syncedAtLabel ||
+                updatedAtLabel ||
+                t('CAPTAIN.DOCUMENTS.DETAILS.NOT_AVAILABLE')
+              }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTabIndex"
+        @tab-changed="handleTabChanged"
+      />
+
+      <div class="h-[32rem] overflow-y-auto">
+        <section
+          v-if="activeTabKey === TAB_KEYS.CONTENT"
+          class="flex flex-col gap-3"
+        >
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div class="flex flex-col gap-1">
+              <h4 class="text-sm font-medium text-n-slate-12">
+                {{
+                  isPdf
+                    ? t('CAPTAIN.DOCUMENTS.DETAILS.PDF_TITLE')
+                    : t('CAPTAIN.DOCUMENTS.DETAILS.CONTENT_TITLE')
+                }}
+              </h4>
+              <span
+                v-if="documentContent && !isPdf"
+                class="text-xs text-n-slate-10"
+              >
+                {{
+                  t('CAPTAIN.DOCUMENTS.DETAILS.CHARACTER_COUNT', {
+                    count: documentContentLength.toLocaleString(),
+                  })
+                }}
+              </span>
+            </div>
+            <div
+              v-if="documentContent && !isPdf"
+              class="flex flex-wrap items-center justify-end gap-4"
+            >
+              <Button
+                :label="
+                  showRawContent
+                    ? t('CAPTAIN.DOCUMENTS.DETAILS.VIEW_PREVIEW')
+                    : t('CAPTAIN.DOCUMENTS.DETAILS.VIEW_RAW')
+                "
+                sm
+                slate
+                link
+                @click="showRawContent = !showRawContent"
+              />
+              <Button
+                :label="t('CAPTAIN.DOCUMENTS.DETAILS.COPY_CONTENT')"
+                icon="i-lucide-copy"
+                sm
+                slate
+                link
+                @click="handleCopyContent"
+              />
+            </div>
+          </div>
+          <div
+            v-if="isPdf"
+            class="rounded-lg border border-n-weak bg-n-alpha-1 p-4 text-sm text-n-slate-11"
+          >
+            <p class="mb-3">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.PDF_DESCRIPTION') }}
+            </p>
+            <a
+              v-if="hasSafeLink"
+              :href="sourceHref"
+              :title="sourceHref"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-1 font-medium text-n-blue-11 hover:underline"
+            >
+              <Icon icon="i-ph-file-pdf" class="size-4" />
+              {{ displayLink }}
+              <Icon icon="i-lucide-external-link" class="size-3" />
+            </a>
+            <span v-else class="inline-flex items-center gap-1 text-n-slate-12">
+              <Icon icon="i-ph-file-pdf" class="size-4" />
+              {{ displayLink }}
+            </span>
+          </div>
+          <template v-else-if="documentContent">
+            <div
+              v-if="isUnreadableContent && !showRawContent"
+              class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
+            >
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.UNREADABLE_CONTENT') }}
+            </div>
+            <div
+              v-else
+              class="h-[26rem] overflow-y-auto rounded-lg border border-n-weak bg-n-alpha-1 p-4"
+            >
+              <pre
+                v-if="showRawContent || isUnreadableContent"
+                class="m-0 whitespace-pre-wrap break-words text-xs leading-5 text-n-slate-12"
+              ><code>{{ documentContent }}</code></pre>
+              <div
+                v-else
+                v-dompurify-html="formattedDocumentContent"
+                class="prose prose-sm max-w-none break-words text-n-slate-12 prose-p:my-2 prose-headings:mb-2 prose-headings:mt-4 prose-a:text-n-blue-11 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-img:hidden"
+              />
+            </div>
+          </template>
+          <div
+            v-else
+            class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
+          >
+            {{ t('CAPTAIN.DOCUMENTS.DETAILS.EMPTY_CONTENT') }}
+          </div>
+        </section>
+
+        <section
+          v-if="activeTabKey === TAB_KEYS.FAQS"
+          class="flex flex-col gap-3"
+        >
+          <div v-if="responses.length" class="flex flex-col gap-3">
+            <ResponseCard
+              v-for="response in responses"
+              :id="response.id"
+              :key="response.id"
+              :question="response.question"
+              :status="response.status"
+              :answer="response.answer"
+              :assistant="response.assistant"
+              :created-at="response.created_at"
+              :updated-at="response.updated_at"
+              compact
+            />
+          </div>
+          <div
+            v-else
+            class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
+          >
+            {{ t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.EMPTY') }}
+          </div>
+          <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
+            <PaginationFooter
+              :current-page="currentPage"
+              :total-items="totalCount"
+              :items-per-page="RESPONSES_PER_PAGE"
+              class="!px-0"
+              @update:current-page="handlePageChange"
+            />
+          </footer>
+        </section>
+      </div>
+    </div>
+  </Dialog>
+</template>
@@ -1,71 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ResponseCard from '../../assistant/ResponseCard.vue';
-const props = defineProps({
-  captainDocument: {
-    type: Object,
-    required: true,
-  },
-});
-const emit = defineEmits(['close']);
-const { t } = useI18n();
-const store = useStore();
-const dialogRef = ref(null);
-
-const uiFlags = useMapGetter('captainResponses/getUIFlags');
-const responses = useMapGetter('captainResponses/getRecords');
-const meta = useMapGetter('captainResponses/getMeta');
-const isFetching = computed(() => uiFlags.value.fetchingList);
-const totalCount = computed(() => meta.value.totalCount || 0);
-
-const handleClose = () => {
-  emit('close');
-};
-
-onMounted(() => {
-  store.dispatch('captainResponses/get', {
-    assistantId: props.captainDocument.assistant.id,
-    documentId: props.captainDocument.id,
-  });
-});
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="`${t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')} (${totalCount})`"
-    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    overflow-y-auto
-    width="3xl"
-    @close="handleClose"
-  >
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else class="flex flex-col gap-3 min-h-48">
-      <ResponseCard
-        v-for="response in responses"
-        :id="response.id"
-        :key="response.id"
-        :question="response.question"
-        :status="response.status"
-        :answer="response.answer"
-        :assistant="response.assistant"
-        :created-at="response.created_at"
-        :updated-at="response.updated_at"
-        compact
-      />
-    </div>
-  </Dialog>
-</template>
@@ -0,0 +1,234 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import CaptainAssistant from 'dashboard/api/captain/assistant';
+import { useReportDrilldown } from 'dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown';
+import ReportDrilldownCard from 'dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  assistantId: { type: [String, Number], default: null },
+  metric: { type: String, default: '' },
+  metricName: { type: String, default: '' },
+  metricValue: { type: String, default: '' },
+  range: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+const drawerRef = ref(null);
+const {
+  records,
+  meta,
+  isFetching,
+  isFetchingMore,
+  hasError,
+  hasRecords,
+  hasMore,
+  open: openDrilldown,
+  close,
+  loadMore,
+} = useReportDrilldown(params => CaptainAssistant.getDrilldown(params));
+
+let previousActiveElement = null;
+
+const isOpen = computed(() => props.open);
+const title = computed(() => props.metricName || '');
+
+const subtitle = computed(() => {
+  if (!meta.value.conversation_count) return '';
+
+  return t('CAPTAIN.OVERVIEW.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
+    count: meta.value.conversation_count,
+  });
+});
+
+const recordKey = record => `${record.conversation?.id}-${record.occurred_at}`;
+
+const restoreFocus = () => {
+  if (previousActiveElement?.isConnected) {
+    previousActiveElement.focus();
+  }
+  previousActiveElement = null;
+};
+
+const closeDrawer = () => {
+  close();
+  emit('close');
+  restoreFocus();
+};
+
+const rememberActiveElement = () => {
+  if (previousActiveElement) return;
+
+  previousActiveElement =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+};
+
+const focusDrawer = () => {
+  nextTick(() => drawerRef.value?.focus());
+};
+
+const fetchDrilldown = () => {
+  if (!props.metric || !props.assistantId) return;
+
+  openDrilldown({
+    assistantId: props.assistantId,
+    metric: props.metric,
+    range: props.range,
+  });
+};
+
+const onKeydown = event => {
+  if (!isOpen.value) return;
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    closeDrawer();
+  }
+};
+
+useEventListener(document, 'keydown', onKeydown);
+
+watch(
+  () => props.open,
+  isDrawerOpen => {
+    if (!isDrawerOpen) {
+      close();
+      restoreFocus();
+      return;
+    }
+
+    rememberActiveElement();
+    fetchDrilldown();
+    focusDrawer();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.metric, props.range],
+  () => {
+    if (props.open) fetchDrilldown();
+  }
+);
+
+// The drawer's headline value is a snapshot of the previous assistant's card,
+// so switching assistants (e.g. browser Back/Forward) closes it instead of
+// refetching records that would no longer match the header.
+watch(
+  () => props.assistantId,
+  () => {
+    if (props.open) closeDrawer();
+  }
+);
+
+onBeforeUnmount(() => {
+  restoreFocus();
+});
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <Transition name="report-drilldown-fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 bg-black/30"
+        role="presentation"
+        @click.self="closeDrawer"
+      >
+        <aside
+          ref="drawerRef"
+          class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="title"
+          tabindex="-1"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-n-weak px-6 py-5"
+          >
+            <div class="min-w-0">
+              <h2 class="truncate text-base font-medium text-n-slate-12">
+                {{ title }}
+              </h2>
+              <p
+                v-if="metricValue"
+                class="mt-1 text-xl font-semibold text-n-slate-12"
+              >
+                {{ metricValue }}
+              </p>
+              <div
+                class="text-sm text-n-slate-11"
+                :class="{
+                  'mt-2': metricValue,
+                  'mt-1': !metricValue,
+                }"
+              >
+                {{ subtitle }}
+              </div>
+            </div>
+            <Button
+              ghost
+              slate
+              size="sm"
+              icon="i-ph-x"
+              :aria-label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.CLOSE')"
+              @click="closeDrawer"
+            />
+          </header>
+
+          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-3">
+            <div
+              v-if="isFetching"
+              class="flex h-40 items-center justify-center"
+            >
+              <Spinner />
+            </div>
+
+            <div
+              v-else-if="hasError"
+              class="flex h-40 items-center justify-center text-sm text-n-ruby-11"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.ERROR') }}
+            </div>
+
+            <div
+              v-else-if="!hasRecords"
+              class="flex h-40 items-center justify-center text-sm text-n-slate-10"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.EMPTY') }}
+            </div>
+
+            <div v-else class="flex flex-col gap-2">
+              <ReportDrilldownCard
+                v-for="record in records"
+                :key="recordKey(record)"
+                :record="record"
+              />
+
+              <Button
+                v-if="hasMore"
+                faded
+                slate
+                size="sm"
+                class="mx-auto mt-2"
+                :label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.LOAD_MORE')"
+                :is-loading="isFetchingMore"
+                @click="loadMore"
+              />
+            </div>
+          </div>
+        </aside>
+      </div>
+    </Transition>
+  </TeleportWithDirection>
+</template>
@@ -8,16 +8,36 @@ const props = defineProps({
  hint: { type: String, default: '' },
  // null = neutral, true = good direction, false = bad direction
  trendGood: { type: Boolean, default: null },
+  clickable: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
 });

+const emit = defineEmits(['click']);
+
 const trendClass = computed(() => {
  if (props.trendGood === null) return 'text-n-slate-11';
  return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
 });
+
+const onActivate = () => {
+  if (props.clickable) emit('click');
+};
 </script>

 <template>
-  <div class="flex flex-col gap-3 p-5 group bg-n-solid-1">
+  <div
+    class="flex flex-col gap-3 p-5 group bg-n-solid-1"
+    :class="
+      clickable
+        ? 'cursor-pointer transition-colors hover:bg-n-slate-2/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand'
+        : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="onActivate"
+    @keydown.enter.self.prevent="onActivate"
+    @keydown.space.self.prevent="onActivate"
+  >
    <div class="flex items-center gap-1.5">
      <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
      <span
@@ -26,7 +46,11 @@ const trendClass = computed(() => {
        class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
      />
    </div>
-    <div class="flex items-end justify-between gap-2">
+    <div v-if="loading" class="flex items-end justify-between gap-2">
+      <div class="w-20 rounded h-9 bg-n-slate-3 animate-pulse" />
+      <div class="w-10 h-5 rounded bg-n-slate-3 animate-pulse" />
+    </div>
+    <div v-else class="flex items-end justify-between gap-2">
      <span
        class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
      >
@@ -9,6 +9,10 @@ const props = defineProps({
    type: String,
    default: '30',
  },
+  stats: {
+    type: Object,
+    default: null,
+  },
 });

 const route = useRoute();
@@ -20,22 +24,41 @@ const assistantId = computed(() => route.params.assistantId);
 const welcomeMarkdown = ref('');
 const isLoading = ref(false);

+// Increments on every fetch so a slow response for a superseded
+// range/stats/assistant can't overwrite the latest request's state.
+let fetchToken = 0;
+
 const fetchSummary = async () => {
+  fetchToken += 1;
+  const token = fetchToken;
+
+  if (!props.stats) {
+    welcomeMarkdown.value = '';
+    isLoading.value = false;
+    return;
+  }
+
  isLoading.value = true;
+  let message = '';
  try {
    const { data } = await CaptainAssistant.getSummary({
      assistantId: assistantId.value,
      range: props.range,
+      stats: props.stats,
    });
-    welcomeMarkdown.value = data.message ?? '';
+    message = data.message ?? '';
  } catch {
-    welcomeMarkdown.value = '';
-  } finally {
-    isLoading.value = false;
+    message = '';
  }
+
+  if (token !== fetchToken) return;
+  welcomeMarkdown.value = message;
+  isLoading.value = false;
 };

-watch([() => props.range, assistantId], fetchSummary, { immediate: true });
+watch([() => props.range, () => props.stats, assistantId], fetchSummary, {
+  immediate: true,
+});

 // Render through the shared markdown formatter (html disabled, so it is safe)
 // used everywhere else for Captain output, instead of a bespoke parser. It
@@ -88,7 +88,7 @@ const openCreateAssistantDialog = () => {

 <template>
  <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] max-h-96 rounded-xl shadow-md flex flex-col gap-4"
  >
    <div
      class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
@@ -114,7 +114,10 @@ const openCreateAssistantDialog = () => {
        @click="openCreateAssistantDialog"
      />
    </div>
-    <div v-if="assistants.length > 0" class="flex flex-col gap-2 px-4">
+    <div
+      v-if="assistants.length > 0"
+      class="flex flex-col flex-1 min-h-0 gap-2 px-4 pb-3 overflow-y-auto overscroll-contain"
+    >
      <Button
        v-for="assistant in assistants"
        :key="assistant.id"
@@ -1,6 +1,8 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';

 const props = defineProps({
  open: {
@@ -27,6 +29,10 @@ const props = defineProps({
    type: [String, Number, Array],
    default: () => [],
  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 });

 const emit = defineEmits(['select', 'search']);
@@ -63,13 +69,22 @@ defineExpose({
    class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
  >
    <div class="relative border-b border-n-strong">
-      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
+      <Spinner
+        v-if="loading"
+        :size="16"
+        class="absolute top-2.5 start-3 text-n-slate-11"
+      />
+      <Icon
+        v-else
+        icon="i-lucide-search"
+        class="absolute top-2.5 size-4 start-3"
+      />
      <input
        ref="searchInput"
        :value="searchValue"
        type="search"
        :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full py-2 !ps-10 !pe-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
        @input="onInputSearch"
      />
    </div>
@@ -0,0 +1,297 @@
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+// Drag-reorderable multi-select capped at `max`. The model is the ordered list
+// of selected values.
+const props = defineProps({
+  // { value, label, subtitle?, icon?, iconColor? } — icon is an emoji or an
+  // icon-picker value, and falls back to `fallbackIcon`.
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  max: {
+    type: Number,
+    default: 3,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  addLabel: {
+    type: String,
+    default: '',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  fallbackIcon: {
+    type: String,
+    default: 'i-lucide-file-text',
+  },
+  // Show skeleton rows while options load, so the row height stays stable.
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // Let the parent filter `options` (via the `search` event) instead of locally.
+  serverSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['search']);
+
+const selectedIds = defineModel({ type: Array, default: () => [] });
+
+const isOpen = ref(false);
+const searchQuery = ref('');
+const dragIndex = ref(null);
+const dropdownRef = ref(null);
+
+const optionsByValue = computed(
+  () => new Map(props.options.map(option => [option.value, option]))
+);
+
+const selectedRows = computed(() =>
+  selectedIds.value.map(
+    id => optionsByValue.value.get(id) || { value: id, label: String(id) }
+  )
+);
+
+const remaining = computed(() => props.max - selectedIds.value.length);
+
+const canAddMore = computed(() => selectedIds.value.length < props.max);
+
+const dropdownOptions = computed(() => {
+  const available = props.options.filter(
+    option => !selectedIds.value.includes(option.value)
+  );
+  if (props.serverSearch) return available;
+
+  const query = searchQuery.value.toLowerCase();
+  return available.filter(option =>
+    option.label?.toLowerCase().includes(query)
+  );
+});
+
+const onSearch = value => {
+  searchQuery.value = value;
+  emit('search', value);
+};
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    onSearch('');
+    nextTick(() => dropdownRef.value?.focus());
+  }
+};
+
+const onSelect = option => {
+  if (!canAddMore.value) return;
+  selectedIds.value = [...selectedIds.value, option.value];
+  if (!canAddMore.value) isOpen.value = false;
+};
+
+const removeItem = id => {
+  selectedIds.value = selectedIds.value.filter(value => value !== id);
+};
+
+const onDragStart = index => {
+  dragIndex.value = index;
+};
+
+const onDragOver = index => {
+  if (dragIndex.value === null || dragIndex.value === index) return;
+  const ids = [...selectedIds.value];
+  const [moved] = ids.splice(dragIndex.value, 1);
+  ids.splice(index, 0, moved);
+  dragIndex.value = index;
+  selectedIds.value = ids;
+};
+
+const onDragEnd = () => {
+  dragIndex.value = null;
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="label || $slots.counter"
+      class="flex items-center justify-between mb-1.5"
+    >
+      <label class="text-sm font-medium text-n-slate-12">{{ label }}</label>
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-n-slate-10">
+          <slot name="counter" :remaining="remaining" :max="max" />
+        </span>
+        <div class="flex items-center gap-1">
+          <span
+            v-for="slot in max"
+            :key="slot"
+            class="w-4 h-1 rounded-full"
+            :class="slot <= selectedIds.length ? 'bg-n-brand' : 'bg-n-slate-4'"
+          />
+        </div>
+      </div>
+    </div>
+
+    <OnClickOutside @trigger="isOpen = false">
+      <div
+        class="flex flex-col gap-1 p-1 border rounded-xl border-n-weak bg-n-background"
+        :class="{ 'opacity-50 pointer-events-none': disabled }"
+      >
+        <div
+          v-if="loading && selectedIds.length && !isOpen"
+          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
+          aria-busy="true"
+        >
+          <div
+            v-for="n in selectedIds.length"
+            :key="n"
+            class="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-n-alpha-2"
+          >
+            <span
+              class="flex-shrink-0 opacity-40 i-lucide-grip-vertical size-4 text-n-slate-9"
+            />
+            <div class="flex-shrink-0 rounded-md size-6 bg-n-alpha-3" />
+            <div class="flex-grow min-w-0">
+              <p class="mb-0 text-sm">
+                <span
+                  class="inline-block w-32 h-2.5 align-middle rounded bg-n-alpha-3 animate-pulse"
+                />
+              </p>
+              <p class="mb-0 text-xs">
+                <span
+                  class="inline-block w-20 h-2 align-middle rounded bg-n-alpha-3 animate-pulse"
+                />
+              </p>
+            </div>
+            <span class="flex-shrink-0 size-6" />
+          </div>
+        </div>
+
+        <div
+          v-else-if="selectedRows.length"
+          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
+        >
+          <div
+            v-for="(row, index) in selectedRows"
+            :key="row.value"
+            draggable="true"
+            class="flex items-center gap-2 px-2 py-1.5 transition-colors rounded-lg cursor-grab group/row"
+            :class="
+              index === dragIndex
+                ? 'opacity-40 bg-n-alpha-3 ring-1 ring-inset ring-n-brand'
+                : 'bg-n-alpha-2 hover:bg-n-alpha-3'
+            "
+            @dragstart="onDragStart(index)"
+            @dragover.prevent="onDragOver(index)"
+            @dragend="onDragEnd"
+          >
+            <span
+              class="flex-shrink-0 transition-colors i-lucide-grip-vertical size-4 text-n-slate-9 group-hover/row:text-n-slate-11"
+            />
+            <div
+              class="flex items-center justify-center flex-shrink-0 text-sm rounded-md size-6 bg-n-alpha-3 text-n-slate-11"
+            >
+              <EmojiIcon
+                v-if="row.icon"
+                :value="row.icon"
+                :color="row.iconColor"
+                class="shrink-0 size-4"
+              />
+              <span v-else class="size-4" :class="fallbackIcon" />
+            </div>
+            <div class="flex-grow min-w-0">
+              <p class="mb-0 text-sm truncate text-n-slate-12">
+                {{ row.label }}
+              </p>
+              <p
+                v-if="row.subtitle"
+                class="mb-0 text-xs truncate text-n-slate-10"
+              >
+                {{ row.subtitle }}
+              </p>
+            </div>
+            <Button
+              type="button"
+              ghost
+              slate
+              xs
+              no-animation
+              icon="i-lucide-x"
+              class="flex-shrink-0"
+              @click="removeItem(row.value)"
+            />
+          </div>
+        </div>
+
+        <div v-if="canAddMore" class="relative">
+          <Button
+            type="button"
+            ghost
+            slate
+            sm
+            no-animation
+            justify="start"
+            :label="addLabel"
+            :disabled="loading && !isOpen"
+            class="w-full"
+            @click="toggleDropdown"
+          >
+            <template #icon>
+              <Spinner
+                v-if="loading && !isOpen"
+                :size="16"
+                class="text-n-slate-11"
+              />
+              <Icon
+                v-else
+                icon="i-lucide-search"
+                class="flex-shrink-0 size-4"
+              />
+            </template>
+          </Button>
+          <ComboBoxDropdown
+            ref="dropdownRef"
+            :open="isOpen"
+            :options="dropdownOptions"
+            :search-value="searchQuery"
+            :search-placeholder="searchPlaceholder"
+            :empty-state="emptyState"
+            :loading="loading"
+            @update:search-value="onSearch"
+            @select="onSelect"
+          />
+        </div>
+      </div>
+    </OnClickOutside>
+
+    <p
+      v-if="selectedIds.length && $slots.note"
+      class="flex items-center gap-1.5 mt-1.5 mb-0 text-xs text-n-slate-11"
+    >
+      <span class="rounded-full size-1.5 bg-n-teal-9" />
+      <slot name="note" />
+    </p>
+  </div>
+</template>
@@ -0,0 +1,224 @@
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import ReorderableMultiSelect from '../ReorderableMultiSelect.vue';
+
+const OPTIONS = [
+  { value: 1, label: 'Getting started', subtitle: 'Guides' },
+  { value: 2, label: 'Billing', subtitle: 'Payments' },
+  { value: 3, label: 'Security' },
+  { value: 4, label: 'API', icon: '🔌', iconColor: '#000' },
+];
+
+// A findable dropdown stub that exposes the `focus()` the component calls on open.
+const ComboBoxDropdownStub = {
+  name: 'ComboBoxDropdown',
+  props: [
+    'open',
+    'options',
+    'searchValue',
+    'searchPlaceholder',
+    'emptyState',
+    'loading',
+  ],
+  emits: ['select', 'update:searchValue'],
+  methods: { focus() {} },
+  template: '<div class="combo-dropdown" />',
+};
+
+// Renders a real <button> so clicks reach the parent handlers; `data-icon`
+// lets specs tell the remove buttons (icon="i-lucide-x") from the add trigger.
+const ButtonStub = {
+  name: 'Button',
+  props: ['label', 'icon', 'disabled'],
+  emits: ['click'],
+  template:
+    '<button :data-icon="icon" :disabled="disabled" @click="$emit(\'click\')"><slot name="icon" />{{ label }}</button>',
+};
+
+const mountSelect = (props = {}, slots = {}) =>
+  mount(ReorderableMultiSelect, {
+    props: { options: OPTIONS, max: 3, ...props },
+    slots,
+    global: {
+      stubs: {
+        Button: ButtonStub,
+        ComboBoxDropdown: ComboBoxDropdownStub,
+        Spinner: true,
+        Icon: true,
+        EmojiIcon: true,
+        OnClickOutside: { template: '<div><slot /></div>' },
+      },
+    },
+  });
+
+const dropdown = wrapper => wrapper.findComponent(ComboBoxDropdownStub);
+const addTrigger = wrapper =>
+  wrapper.findAll('button').find(button => !button.attributes('data-icon'));
+const removeButtons = wrapper =>
+  wrapper.findAll('button[data-icon="i-lucide-x"]');
+const rows = wrapper => wrapper.findAll('[draggable="true"]');
+const lastModel = wrapper => wrapper.emitted('update:modelValue')?.at(-1)?.[0];
+
+describe('ReorderableMultiSelect', () => {
+  describe('rendering selected rows', () => {
+    it('renders rows in model order with labels resolved from options', () => {
+      const wrapper = mountSelect({ modelValue: [2, 1] });
+
+      const labels = rows(wrapper).map(row => row.find('p').text());
+      expect(labels).toEqual(['Billing', 'Getting started']);
+    });
+
+    it('falls back to the stringified id when an option is unknown', () => {
+      const wrapper = mountSelect({ modelValue: [99] });
+
+      expect(rows(wrapper)[0].find('p').text()).toBe('99');
+    });
+
+    it('renders the progress dots filled up to the selection count', () => {
+      const wrapper = mountSelect({
+        modelValue: [1, 2],
+        max: 3,
+        label: 'Tags',
+      });
+
+      const filled = wrapper.findAll('.bg-n-brand').length;
+      expect(filled).toBe(2);
+    });
+
+    it('exposes remaining and max to the counter slot', () => {
+      const wrapper = mountSelect(
+        { modelValue: [1], max: 3 },
+        { counter: ({ remaining, max }) => h('span', `${remaining}/${max}`) }
+      );
+
+      expect(wrapper.text()).toContain('2/3');
+    });
+  });
+
+  describe('adding options', () => {
+    it('appends the chosen option to the model', () => {
+      const wrapper = mountSelect({ modelValue: [1] });
+
+      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
+
+      expect(lastModel(wrapper)).toEqual([1, 2]);
+    });
+
+    it('hides the add trigger once the model reaches max', () => {
+      const wrapper = mountSelect({ modelValue: [1, 2], max: 2 });
+
+      expect(addTrigger(wrapper)).toBeUndefined();
+      expect(dropdown(wrapper).exists()).toBe(false);
+    });
+
+    it('closes the dropdown when the last slot is filled', async () => {
+      const wrapper = mountSelect({ modelValue: [1], max: 2 });
+      await addTrigger(wrapper).trigger('click');
+      expect(dropdown(wrapper).props('open')).toBe(true);
+
+      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
+      await wrapper.vm.$nextTick();
+
+      // Reaching max removes the trigger (and its dropdown) entirely.
+      expect(dropdown(wrapper).exists()).toBe(false);
+    });
+
+    it('excludes already-selected options from the dropdown', () => {
+      const wrapper = mountSelect({ modelValue: [1] });
+
+      const values = dropdown(wrapper)
+        .props('options')
+        .map(option => option.value);
+      expect(values).toEqual([2, 3, 4]);
+    });
+  });
+
+  describe('removing options', () => {
+    it('removes the clicked item from the model', async () => {
+      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
+
+      await removeButtons(wrapper)[1].trigger('click');
+
+      expect(lastModel(wrapper)).toEqual([1, 3]);
+    });
+  });
+
+  describe('searching', () => {
+    it('filters options locally by label', async () => {
+      const wrapper = mountSelect({ modelValue: [] });
+
+      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
+      await wrapper.vm.$nextTick();
+
+      const values = dropdown(wrapper)
+        .props('options')
+        .map(option => option.value);
+      expect(values).toEqual([2]);
+    });
+
+    it('emits search and skips local filtering when serverSearch is set', async () => {
+      const wrapper = mountSelect({ modelValue: [], serverSearch: true });
+
+      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('search').at(-1)).toEqual(['bill']);
+      // All unselected options remain; the parent owns filtering.
+      expect(dropdown(wrapper).props('options')).toHaveLength(4);
+    });
+
+    it('emits an empty search when the trigger opens', async () => {
+      const wrapper = mountSelect({ modelValue: [1] });
+
+      await addTrigger(wrapper).trigger('click');
+
+      expect(wrapper.emitted('search').at(-1)).toEqual(['']);
+      expect(dropdown(wrapper).props('open')).toBe(true);
+    });
+  });
+
+  describe('reordering', () => {
+    it('moves a row to the dropped position within the model', async () => {
+      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
+
+      await rows(wrapper)[0].trigger('dragstart');
+      await rows(wrapper)[2].trigger('dragover');
+
+      expect(lastModel(wrapper)).toEqual([2, 3, 1]);
+    });
+  });
+
+  describe('loading state', () => {
+    it('shows skeleton rows when loading a non-empty, closed selection', () => {
+      const wrapper = mountSelect({ modelValue: [1, 2], loading: true });
+
+      const skeleton = wrapper.find('[aria-busy="true"]');
+      expect(skeleton.exists()).toBe(true);
+      expect(skeleton.findAll('.animate-pulse').length).toBeGreaterThan(0);
+    });
+
+    it('does not show skeletons when the selection is empty', () => {
+      const wrapper = mountSelect({ modelValue: [], loading: true });
+
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
+    });
+
+    it('shows the real rows, not skeletons, while searching in an open dropdown', async () => {
+      // Open first (trigger is enabled), then a live search turns loading on.
+      const wrapper = mountSelect({ modelValue: [1, 2] });
+      await addTrigger(wrapper).trigger('click');
+
+      await wrapper.setProps({ loading: true });
+
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
+      expect(rows(wrapper)).toHaveLength(2);
+    });
+
+    it('forwards loading to the dropdown and disables the closed trigger', () => {
+      const wrapper = mountSelect({ modelValue: [1], loading: true });
+
+      expect(dropdown(wrapper).props('loading')).toBe(true);
+      expect(addTrigger(wrapper).attributes('disabled')).toBeDefined();
+    });
+  });
+});
@@ -3,8 +3,13 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
-import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
-import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+import {
+  isTwilioComplete,
+  isTwilioMediaTemplate,
+  getTwilioMediaVariableKey,
+  getTwilioMediaUrl,
+  applyTwilioMediaFilename,
+} from '@chatwoot/utils';

 import Input from 'dashboard/components-next/input/Input.vue';

@@ -40,30 +45,23 @@ const templateBody = computed(() => {
  return props.template.body || '';
 });

-const hasMediaTemplate = computed(() => {
-  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
-});
+// Media-template detection and variable extraction are shared with the mobile
+// app via @chatwoot/utils.
+const hasMediaTemplate = computed(() => isTwilioMediaTemplate(props.template));

 const hasVariables = computed(() => {
  return templateBody.value?.match(VARIABLE_PATTERN) !== null;
 });

-const mediaVariableKey = computed(() => {
-  if (!hasMediaTemplate.value) return null;
-  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
-  if (!mediaUrl) return null;
-  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
-});
+const mediaVariableKey = computed(() =>
+  getTwilioMediaVariableKey(props.template)
+);

-const hasMediaVariable = computed(() => {
-  return hasMediaTemplate.value && mediaVariableKey.value !== null;
-});
+const hasMediaVariable = computed(() => mediaVariableKey.value !== null);

-const templateMediaUrl = computed(() => {
-  if (!hasMediaTemplate.value) return '';
-
-  return props.template?.types?.['twilio/media']?.media?.[0] || '';
-});
+const templateMediaUrl = computed(() =>
+  hasMediaTemplate.value ? getTwilioMediaUrl(props.template) : ''
+);

 const variablePattern = computed(() => {
  if (!hasVariables.value) return [];
@@ -83,26 +81,10 @@ const renderedTemplate = computed(() => {
  return rendered;
 });

-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaVariable.value) return false;
-
-  if (hasVariables.value) {
-    const hasEmptyVariable = variablePattern.value.some(
-      variable => !processedParams.value[variable]
-    );
-    if (hasEmptyVariable) return true;
-  }
-
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    !processedParams.value[mediaVariableKey.value]
-  ) {
-    return true;
-  }
-
-  return false;
-});
+// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(
+  () => !isTwilioComplete(props.template, processedParams.value)
+);

 const v$ = useVuelidate(
  {
@@ -135,19 +117,11 @@ const sendMessage = () => {

  const { friendly_name, language } = props.template;

-  // Process parameters and extract filename from media URL if needed
-  const processedParameters = { ...processedParams.value };
-
-  // For media templates, extract filename from full URL
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    processedParameters[mediaVariableKey.value]
-  ) {
-    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
-      processedParameters[mediaVariableKey.value]
-    );
-  }
+  // For media templates, reduce the media URL to a filename before sending.
+  const processedParameters = applyTwilioMediaFilename(
+    props.template,
+    processedParams.value
+  );

  const payload = {
    message: renderedTemplate.value,
@@ -0,0 +1,342 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n, I18nT } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Popover from 'dashboard/components-next/popover/Popover.vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useMessageContext } from './provider.js';
+import { MESSAGE_VARIANTS, ORIENTATION } from './constants';
+
+const props = defineProps({
+  messageId: { type: Number, required: true },
+});
+
+const { t } = useI18n();
+const { orientation, variant, createdAt } = useMessageContext();
+const store = useStore();
+const { isCloudFeatureEnabled } = useAccount();
+
+const isOpen = ref(false);
+
+const showSparkle = computed(() =>
+  isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_V2)
+);
+
+const session = computed(() =>
+  store.getters['captainAgentSessions/getSessionByMessageId'](props.messageId)
+);
+const hasFetched = computed(() =>
+  store.getters['captainAgentSessions/hasFetched'](props.messageId)
+);
+const isLoading = computed(
+  () =>
+    !hasFetched.value ||
+    store.getters['captainAgentSessions/isFetching'](props.messageId)
+);
+
+const citations = computed(() => session.value?.citations || []);
+
+const scenarioTitles = computed(() =>
+  (session.value?.scenarios || []).reduce((map, scenario) => {
+    map[scenario.id] = scenario.title;
+    return map;
+  }, {})
+);
+
+// Fallback for agents without a matching scenario title:
+// "chatwoot_assistant" → "Chatwoot assistant",
+// "scenario_5_chatwoot_uptime_agent" → "Chatwoot uptime".
+const humanizeAgentName = agentName => {
+  const label = agentName
+    .replace(/^scenario_\d+_/, '')
+    .replace(/_agent$/, '')
+    .replaceAll('_', ' ')
+    .trim();
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+const handoffLabel = agentName => {
+  const scenarioId = agentName.match(/^scenario_(\d+)/)?.[1];
+  return scenarioTitles.value[scenarioId] || humanizeAgentName(agentName);
+};
+
+const ACRONYMS = ['faq', 'api', 'url', 'id', 'sla', 'csat'];
+
+// Tool names arrive as RubyLLM identifiers like
+// "captain--tools--faq_lookup" or "custom_get_status_page_overview";
+// show "FAQ Lookup" / "Get Status Page Overview" instead.
+const humanizeToolName = name => {
+  return (name || '')
+    .split('--')
+    .pop()
+    .replace(/^custom_/, '')
+    .split('_')
+    .filter(Boolean)
+    .map(word =>
+      ACRONYMS.includes(word)
+        ? word.toUpperCase()
+        : word.charAt(0).toUpperCase() + word.slice(1)
+    )
+    .join(' ');
+};
+
+// Argument keys are camelCased by the store ("labelName"); show "Label Name".
+const humanizeArgumentKey = key =>
+  key
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+const formatArguments = args => {
+  if (!args || typeof args !== 'object') return '';
+  return Object.entries(args)
+    .map(([key, value]) => `${humanizeArgumentKey(key)}: ${value}`)
+    .join(', ');
+};
+
+// Timeline of what Captain did during the run: tool calls (with their
+// arguments) and scenario/agent handoffs. Message bodies and raw tool
+// results are intentionally not echoed here.
+const steps = computed(() => {
+  const runContext = session.value?.runContext;
+  const result = [];
+  let currentAgent = null;
+
+  (Array.isArray(runContext) ? runContext : []).forEach(entry => {
+    if (entry?.role !== 'assistant') return;
+
+    const agentName = entry.agentName;
+    if (agentName && agentName !== currentAgent) {
+      if (currentAgent !== null) {
+        result.push({ type: 'handoff', name: handoffLabel(agentName) });
+      }
+      currentAgent = agentName;
+    }
+
+    (entry.toolCalls || []).forEach(call => {
+      // Agent-to-agent transfers surface as "handoff_to_<agent>" tool calls;
+      // the agent_name change above already yields a handoff step for them.
+      if (call.name?.startsWith('handoff_to_')) return;
+
+      result.push({
+        type: 'tool',
+        name: humanizeToolName(call.name),
+        detail: formatArguments(call.arguments),
+      });
+    });
+  });
+
+  return result;
+});
+
+// The final assistant entry stores structured content ({response, reasoning});
+// surface the model's reasoning for the reply it produced.
+const reasoning = computed(() => {
+  const runContext = session.value?.runContext;
+  if (!Array.isArray(runContext)) return '';
+
+  const entry = [...runContext]
+    .reverse()
+    .find(item => item?.role === 'assistant' && item.content?.reasoning);
+  return entry?.content?.reasoning || '';
+});
+
+const STEP_ICONS = {
+  tool: 'i-ph-wrench',
+  handoff: 'i-ph-user-switch',
+};
+
+const STEP_KEYPATHS = {
+  tool: 'CONVERSATION.CAPTAIN_GENERATION.STEP_TOOL',
+  handoff: 'CONVERSATION.CAPTAIN_GENERATION.STEP_HANDOFF',
+};
+
+const currentUser = useMapGetter('getCurrentUser');
+const isSuperAdmin = computed(() => currentUser.value.type === 'SuperAdmin');
+
+// Model and credits are only surfaced to super admins and in development.
+const devDetails = computed(() => {
+  if (!session.value) return null;
+  if (!import.meta.env.DEV && !isSuperAdmin.value) return null;
+  const model = t('CONVERSATION.CAPTAIN_GENERATION.MODEL', {
+    model: session.value.llmModel,
+  });
+  const credits = t('CONVERSATION.CAPTAIN_GENERATION.CREDITS', {
+    credits: session.value.creditsConsumed,
+  });
+  return `${model} · ${credits}`;
+});
+
+// With the sparkle at the row start, the meta gets pushed to the opposite end;
+// without it, fall back to the message orientation.
+const rowLayoutClass = computed(() => {
+  if (showSparkle.value) return 'justify-between';
+  return orientation.value === ORIENTATION.LEFT
+    ? 'justify-start'
+    : 'justify-end';
+});
+
+// Blend the sparkle with the bubble background: amber on private notes,
+// slate everywhere else. Tokens adapt to dark mode on their own.
+const sparkleColorClass = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.PRIVATE) {
+    return isOpen.value
+      ? 'text-n-amber-12/80'
+      : 'text-n-amber-12/40 hover:text-n-amber-12/70';
+  }
+  return isOpen.value
+    ? 'text-n-slate-12'
+    : 'text-n-slate-11/60 hover:text-n-slate-12';
+});
+
+const popoverAlign = computed(() =>
+  orientation.value === ORIENTATION.LEFT ? 'start' : 'end'
+);
+
+const prefetch = () => {
+  store.dispatch('captainAgentSessions/fetch', {
+    messageId: props.messageId,
+    createdAt: createdAt.value,
+  });
+};
+
+const onPopoverShow = () => {
+  isOpen.value = true;
+  prefetch();
+};
+
+const onPopoverHide = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <div class="flex items-center gap-1.5" :class="rowLayoutClass">
+    <Popover
+      v-if="showSparkle"
+      :align="popoverAlign"
+      @show="onPopoverShow"
+      @hide="onPopoverHide"
+    >
+      <button
+        v-tooltip="t('CONVERSATION.CAPTAIN_GENERATION.TITLE')"
+        type="button"
+        class="inline-flex items-center gap-1 p-0 bg-transparent border-0 cursor-pointer"
+        :class="sparkleColorClass"
+        @mouseenter="prefetch"
+        @focus="prefetch"
+      >
+        <Icon icon="i-ph-sparkle-fill" class="size-3.5" />
+        <span class="text-xs">
+          {{ t('CONVERSATION.CAPTAIN_GENERATION.GENERATED_BY') }}
+        </span>
+      </button>
+      <template #content>
+        <div class="flex flex-col gap-4 p-4 w-80">
+          <span v-if="isLoading" class="text-xs text-n-slate-11">
+            {{ t('CONVERSATION.CAPTAIN_GENERATION.LOADING') }}
+          </span>
+          <span v-else-if="!session" class="text-xs text-n-slate-11">
+            {{ t('CONVERSATION.CAPTAIN_GENERATION.EMPTY') }}
+          </span>
+          <template v-else>
+            <div v-if="steps.length" class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-n-slate-11">
+                {{ t('CONVERSATION.CAPTAIN_GENERATION.TIMELINE') }}
+              </span>
+              <div class="flex flex-col">
+                <div
+                  v-for="(step, index) in steps"
+                  :key="index"
+                  class="flex gap-2.5"
+                >
+                  <div class="flex flex-col items-center">
+                    <span
+                      class="flex items-center justify-center rounded-full size-5 bg-n-alpha-2 text-n-slate-11"
+                    >
+                      <Icon :icon="STEP_ICONS[step.type]" class="size-3" />
+                    </span>
+                    <span
+                      v-if="index < steps.length - 1"
+                      class="flex-1 w-px min-h-2 bg-n-weak"
+                    />
+                  </div>
+                  <div
+                    class="flex flex-col min-w-0 gap-0.5"
+                    :class="index < steps.length - 1 ? 'pb-3' : ''"
+                  >
+                    <I18nT
+                      :keypath="STEP_KEYPATHS[step.type]"
+                      tag="span"
+                      class="text-xs leading-5 text-n-slate-11"
+                    >
+                      <template #name>
+                        <span class="font-medium text-n-slate-12">
+                          {{ step.name }}
+                        </span>
+                      </template>
+                    </I18nT>
+                    <span
+                      v-if="step.detail"
+                      class="text-xs text-n-slate-11 break-words"
+                    >
+                      {{ step.detail }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="citations.length" class="flex flex-col gap-2">
+              <div class="flex items-baseline gap-1.5">
+                <span class="text-xs font-medium text-n-slate-11">
+                  {{ t('CONVERSATION.CAPTAIN_GENERATION.SOURCES') }}
+                </span>
+                <span class="text-xs text-n-slate-10">
+                  {{
+                    t(
+                      'CONVERSATION.CAPTAIN_GENERATION.SOURCES_SUMMARY',
+                      citations.length
+                    )
+                  }}
+                </span>
+              </div>
+              <ul class="flex flex-col gap-1 m-0 list-disc ps-4">
+                <li
+                  v-for="citation in citations"
+                  :key="citation.id"
+                  class="text-xs text-n-slate-12"
+                >
+                  <a
+                    v-if="citation.link"
+                    :href="citation.link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-xs text-n-blue-11 hover:underline"
+                  >
+                    {{ citation.title || citation.link }}
+                  </a>
+                  <span v-else>{{ citation.title }}</span>
+                </li>
+              </ul>
+            </div>
+            <div v-if="reasoning" class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-n-slate-11">
+                {{ t('CONVERSATION.CAPTAIN_GENERATION.REASONING') }}
+              </span>
+              <p class="m-0 text-xs leading-normal text-n-slate-12 break-words">
+                {{ reasoning }}
+              </p>
+            </div>
+            <span v-if="devDetails" class="text-xs text-n-slate-11">
+              {{ devDetails }}
+            </span>
+          </template>
+        </div>
+      </template>
+    </Popover>
+    <slot name="meta" />
+  </div>
+</template>
@@ -2,6 +2,7 @@
 import { computed } from 'vue';

 import MessageMeta from '../MessageMeta.vue';
+import CaptainGenerationDetails from '../CaptainGenerationDetails.vue';

 import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
@@ -9,16 +10,38 @@ import { useI18n } from 'vue-i18n';

 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
+import { MESSAGE_VARIANTS, ORIENTATION, SENDER_TYPES } from '../constants';

 const props = defineProps({
  hideMeta: { type: Boolean, default: false },
 });

-const { variant, orientation, inReplyTo, shouldGroupWithNext } =
-  useMessageContext();
+const {
+  variant,
+  orientation,
+  inReplyTo,
+  shouldGroupWithNext,
+  id,
+  sender,
+  senderType,
+} = useMessageContext();
 const { t } = useI18n();

+const isCaptainMessage = computed(
+  () =>
+    (sender.value?.type ?? senderType.value) === SENDER_TYPES.CAPTAIN_ASSISTANT
+);
+
+const metaColorClass = computed(() =>
+  variant.value === MESSAGE_VARIANTS.PRIVATE
+    ? 'text-n-amber-12/50'
+    : 'text-n-slate-11'
+);
+
+const emailMetaClass = computed(() =>
+  variant.value === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : ''
+);
+
 const varaintBaseMap = {
  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
  [MESSAGE_VARIANTS.PRIVATE]:
@@ -114,16 +137,21 @@ const replyToPreview = computed(() => {
      />
    </div>
    <slot />
-    <MessageMeta
-      v-if="shouldShowMeta"
-      :class="[
-        flexOrientationClass,
-        variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
-        variant === MESSAGE_VARIANTS.PRIVATE
-          ? 'text-n-amber-12/50'
-          : 'text-n-slate-11',
-      ]"
-      class="mt-2"
-    />
+    <template v-if="shouldShowMeta">
+      <CaptainGenerationDetails
+        v-if="isCaptainMessage"
+        :message-id="id"
+        class="mt-2"
+      >
+        <template #meta>
+          <MessageMeta :class="[emailMetaClass, metaColorClass]" />
+        </template>
+      </CaptainGenerationDetails>
+      <MessageMeta
+        v-else
+        :class="[flexOrientationClass, emailMetaClass, metaColorClass]"
+        class="mt-2"
+      />
+    </template>
  </div>
 </template>
@@ -263,9 +263,9 @@ const handleCallBack = async () => {
  if (!canCallBack.value || isInitiatingCall.value) return;
  try {
    if (isWhatsapp.value) {
-      const response = await whatsappCallSession.initiateOutboundCall(
-        conversationId.value
-      );
+      const response = await whatsappCallSession.initiateOutboundCall({
+        conversationId: conversationId.value,
+      });
      if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
      // Permission template path returns no call id — show banner, no widget yet.
      if (!response?.id) {
@@ -1,7 +1,11 @@
 <script setup>
 import { ref, computed, watch, nextTick } from 'vue';
 import { vOnClickOutside } from '@vueuse/components';
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+import {
+  useBreakpoints,
+  breakpointsTailwind,
+  useEventListener,
+} from '@vueuse/core';
 import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
@@ -16,6 +20,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  closeOnScroll: {
+    type: Boolean,
+    default: true,
+  },
  showContentBorder: {
    type: Boolean,
    default: true,
@@ -41,8 +49,12 @@ const { fixedPosition, updatePosition } = useDropdownPosition(
  { align: props.align }
 );

+const SCROLL_CLOSE_THRESHOLD = 24;
+const triggerTopAtOpen = ref(0);
+
 const show = async () => {
  isActive.value = true;
+  triggerTopAtOpen.value = triggerRef.value?.getBoundingClientRect().top ?? 0;
  if (!isMobile.value) {
    await nextTick();
    updatePosition();
@@ -56,6 +68,22 @@ const hide = () => {
  emit('hide');
 };

+// The teleported popover tracks its trigger while ancestors scroll; allow
+// small drift (trackpad inertia), but close once the trigger moves further.
+useEventListener(
+  window,
+  'scroll',
+  event => {
+    if (!props.closeOnScroll || !showPopover.value) return;
+    if (popoverRef.value?.contains(event.target)) return;
+    const top = triggerRef.value?.getBoundingClientRect().top ?? 0;
+    if (Math.abs(top - triggerTopAtOpen.value) > SCROLL_CLOSE_THRESHOLD) {
+      hide();
+    }
+  },
+  { capture: true, passive: true }
+);
+
 const toggle = async () => {
  if (isActive.value) hide();
  else await show();
@@ -2,6 +2,7 @@
 import { h, ref, computed, onMounted, watch } from 'vue';
 import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useConfig } from 'dashboard/composables/useConfig';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
@@ -43,7 +44,14 @@ const emit = defineEmits([
 ]);

 const { accountScopedRoute, isOnChatwootCloud } = useAccount();
+const { isEnterprise } = useConfig();
 const store = useStore();
+
+// Calls run on the enterprise-only API (cloud runs enterprise); hide the entry
+// on community so it doesn't lead to a dashboard/CTA the backend can't serve.
+const isCallsAvailable = computed(
+  () => isOnChatwootCloud.value || isEnterprise
+);
 const searchShortcut = useKbd([`$mod`, 'k']);
 const { t } = useI18n();

@@ -85,6 +93,13 @@ const hasFilteredUnreadCounts = computed(() => {
  );
 });

+const hasDataImport = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    accountId.value,
+    FEATURE_FLAGS.DATA_IMPORT
+  );
+});
+
 const fetchConversationUnreadCounts = ([currentAccountId, isEnabled]) => {
  if (!currentAccountId) return;

@@ -556,6 +571,17 @@ const menuItems = computed(() => {
        },
      ],
    },
+    ...(isCallsAvailable.value
+      ? [
+          {
+            name: 'Calls',
+            label: t('SIDEBAR.CALLS'),
+            icon: 'i-lucide-phone',
+            to: accountScopedRoute('calls_dashboard_index'),
+            activeOn: ['calls_dashboard_index'],
+          },
+        ]
+      : []),
    {
      name: 'Contacts',
      label: t('SIDEBAR.CONTACTS'),
@@ -856,6 +882,16 @@ const menuItems = computed(() => {
          icon: 'i-lucide-blocks',
          to: accountScopedRoute('settings_applications'),
        },
+        ...(hasDataImport.value
+          ? [
+              {
+                name: 'Settings Data',
+                label: t('SIDEBAR.DATA'),
+                icon: 'i-lucide-database',
+                to: accountScopedRoute('settings_data_imports'),
+              },
+            ]
+          : []),
        {
          name: 'Settings Audit Logs',
          label: t('SIDEBAR.AUDIT_LOGS'),
@@ -44,6 +44,12 @@ const showChatSupport = computed(() => {
  );
 });

+const toggleChatSupport = () => {
+  if (window.$chatwoot) {
+    window.$chatwoot.toggle();
+  }
+};
+
 const menuItems = computed(() => {
  return [
    {
@@ -51,9 +57,7 @@ const menuItems = computed(() => {
      showOnCustomBrandedInstance: false,
      label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
      icon: 'i-lucide-life-buoy',
-      click: () => {
-        window.$chatwoot.toggle();
-      },
+      click: toggleChatSupport,
    },
    {
      show: true,
@@ -13,6 +13,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';

+import { isWhatsAppComplete } from '@chatwoot/utils';
 import Input from 'dashboard/components-next/input/Input.vue';
 import {
  buildTemplateParameters,
@@ -84,29 +85,10 @@ const renderedTemplate = computed(() => {
  return replaceTemplateVariables(bodyText.value, processedParams.value);
 });

-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaHeader.value) return false;
-
-  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
-    return true;
-  }
-
-  if (hasVariables.value && processedParams.value.body) {
-    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
-      value => !value
-    );
-    if (hasEmptyBodyVariable) return true;
-  }
-
-  if (processedParams.value.buttons) {
-    const hasEmptyButtonParameter = processedParams.value.buttons.some(
-      button => !button.parameter
-    );
-    if (hasEmptyButtonParameter) return true;
-  }
-
-  return false;
-});
+// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(
+  () => !isWhatsAppComplete(props.template, processedParams.value)
+);

 const v$ = useVuelidate(
  {
@@ -7,7 +7,7 @@ import Button from 'dashboard/components-next/button/Button.vue';
 const { modalType, closeOnBackdropClick, onClose } = defineProps({
  closeOnBackdropClick: { type: Boolean, default: true },
  showCloseButton: { type: Boolean, default: true },
-  onClose: { type: Function, required: true },
+  onClose: { type: Function, default: null },
  fullWidth: { type: Boolean, default: false },
  modalType: { type: String, default: 'centered' },
  size: { type: String, default: '' },
@@ -35,7 +35,7 @@ const handleMouseDown = () => {
 const close = () => {
  show.value = false;
  emit('close');
-  onClose();
+  onClose?.();
 };

 const onMouseUp = () => {
@@ -1,7 +1,6 @@
 <script setup>
 import { computed } from 'vue';
 import ChannelSelector from '../ChannelSelector.vue';
-import { IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED } from 'dashboard/constants/globals';

 const props = defineProps({
  channel: {
@@ -21,10 +20,7 @@ const hasFbConfigured = computed(() => {
 });

 const hasInstagramConfigured = computed(() => {
-  return (
-    !IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED &&
-    window.chatwootConfig?.instagramAppId
-  );
+  return window.chatwootConfig?.instagramAppId;
 });

 const hasTiktokConfigured = computed(() => {
@@ -56,19 +52,10 @@ const isActive = computed(() => {
    return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
  }

-  if (key === 'voice') {
+  if (key === 'voice' || key === 'whatsapp_call') {
    return props.enabledFeatures.channel_voice;
  }

-  if (key === 'whatsapp_call') {
-    return (
-      !IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED &&
-      props.enabledFeatures.channel_voice &&
-      !!window.chatwootConfig?.whatsappAppId &&
-      window.chatwootConfig.whatsappAppId !== 'none'
-    );
-  }
-
  return [
    'website',
    'twilio',
@@ -62,6 +62,7 @@ import {
  calculateMenuPosition,
  getEffectiveChannelType,
  stripUnsupportedFormatting,
+  createVariableInputRule,
 } from 'dashboard/helper/editorHelper';
 import {
  hasPressedEnterAndNotCmdOrShift,
@@ -306,6 +307,10 @@ const plugins = computed(() => {
      searchTerm: variableSearchTerm,
      isAllowed: () => !props.isPrivate,
    }),
+    createVariableInputRule({
+      isPrivate: () => props.isPrivate,
+      getVariables: () => props.variables,
+    }),
    createSuggestionPlugin({
      trigger: ':',
      minChars: 2,
@@ -69,9 +69,9 @@ const callButtonTooltip = computed(() =>
 const startWhatsappCall = async () => {
  if (whatsappCallSession.isInitiating.value) return;
  try {
-    const response = await whatsappCallSession.initiateOutboundCall(
-      props.chat.id
-    );
+    const response = await whatsappCallSession.initiateOutboundCall({
+      conversationId: props.chat.id,
+    });

    // Composable returns LOCKED when init is already in flight or a call is
    // active; soft no-op so a parallel click doesn't trigger a banner.
@@ -33,7 +33,9 @@ import {
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
-import wootConstants from 'dashboard/constants/globals';
+import wootConstants, {
+  META_RESTRICTION_STATUS_URL,
+} from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';

@@ -93,6 +95,7 @@ export default {
      currentUserId: 'getCurrentUserID',
      listLoadingStatus: 'getAllMessagesLoaded',
      currentAccountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
    }),
    isOpen() {
      return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
@@ -170,6 +173,12 @@ export default {
        instagramInbox
      );
    },
+    isInstagramRestrictionBannerVisible() {
+      return this.isOnChatwootCloud && this.isAnInstagramChannel;
+    },
+    instagramRestrictionStatusUrl() {
+      return META_RESTRICTION_STATUS_URL;
+    },

    replyWindowBannerMessage() {
      if (this.isAWhatsAppChannel) {
@@ -455,7 +464,15 @@ export default {
  >
    <div ref="topBannerRef">
      <Banner
-        v-if="!currentChat.can_reply"
+        v-if="isInstagramRestrictionBannerVisible"
+        color-scheme="warning"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="$t('CONVERSATION.INSTAGRAM_RESTRICTION_BANNER')"
+        :href-link="instagramRestrictionStatusUrl"
+        :href-link-text="$t('CONVERSATION.INSTAGRAM_RESTRICTION_STATUS_LINK')"
+      />
+      <Banner
+        v-else-if="!currentChat.can_reply"
        color-scheme="alert"
        class="mx-2 mt-2 overflow-hidden rounded-lg"
        :banner-message="replyWindowBannerMessage"
@@ -48,6 +48,8 @@ import {
  appendSignature,
  removeSignature,
  getEffectiveChannelType,
+  getAgentVariables,
+  getContactVariables,
 } from 'dashboard/helper/editorHelper';
 import { useCopilotReply } from 'dashboard/composables/useCopilotReply';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
@@ -393,7 +395,13 @@ export default {
        contact: this.currentContact,
        inbox: this.inbox,
      });
-      return variables;
+      // Match the backend drops: names are Ruby-capitalized and
+      // {{agent.*}} is the message sender, not the assignee.
+      return {
+        ...variables,
+        ...getContactVariables(this.currentContact),
+        ...getAgentVariables(this.currentUser),
+      };
    },
    connectedPortalSlug() {
      const { help_center: portal = {} } = this.inbox;
@@ -0,0 +1,120 @@
+import { effectScope } from 'vue';
+import { useAbortableRequest } from '../useAbortableRequest';
+
+// Resolves when the request "completes", rejects like axios does when the
+// signal is aborted mid-flight.
+const abortableRunner =
+  (value, { fail = false } = {}) =>
+  signal =>
+    new Promise((resolve, reject) => {
+      signal.addEventListener('abort', () => {
+        const error = new Error('canceled');
+        error.name = 'CanceledError';
+        reject(error);
+      });
+      // Defer so a follow-up `run`/`abort` can supersede this one first.
+      Promise.resolve().then(() => {
+        if (signal.aborted) return;
+        if (fail) {
+          reject(new Error('boom'));
+          return;
+        }
+        resolve(value);
+      });
+    });
+
+describe('useAbortableRequest', () => {
+  it('passes a fresh signal to the runner and returns its result', async () => {
+    const { run } = useAbortableRequest();
+    let received = null;
+
+    const result = await run(signal => {
+      received = signal;
+      return Promise.resolve('ok');
+    });
+
+    expect(received).toBeInstanceOf(AbortSignal);
+    expect(received.aborted).toBe(false);
+    expect(result).toBe('ok');
+  });
+
+  it('toggles isPending around the request', async () => {
+    const { run, isPending } = useAbortableRequest();
+    expect(isPending.value).toBe(false);
+
+    const pending = run(() => Promise.resolve('done'));
+    expect(isPending.value).toBe(true);
+
+    await pending;
+    expect(isPending.value).toBe(false);
+  });
+
+  it('aborts the previous request when a new one starts', async () => {
+    const { run } = useAbortableRequest();
+
+    const first = run(abortableRunner('first'));
+    const second = run(abortableRunner('second'));
+
+    await expect(first).resolves.toBeUndefined();
+    await expect(second).resolves.toBe('second');
+  });
+
+  it('returns the onAbort value when a request is superseded', async () => {
+    const { run } = useAbortableRequest();
+
+    const first = run(abortableRunner('first'), { onAbort: null });
+    const second = run(abortableRunner('second'));
+
+    await expect(first).resolves.toBeNull();
+    await expect(second).resolves.toBe('second');
+  });
+
+  it('abort cancels the in-flight request and clears isPending', async () => {
+    const { run, abort, isPending } = useAbortableRequest();
+
+    const pending = run(abortableRunner('value'));
+    expect(isPending.value).toBe(true);
+
+    abort();
+
+    await expect(pending).resolves.toBeUndefined();
+    expect(isPending.value).toBe(false);
+  });
+
+  it('rethrows non-abort errors and clears isPending', async () => {
+    const { run, isPending } = useAbortableRequest();
+
+    await expect(run(abortableRunner(null, { fail: true }))).rejects.toThrow(
+      'boom'
+    );
+    expect(isPending.value).toBe(false);
+  });
+
+  it('aborts the in-flight request when its scope is disposed', async () => {
+    const scope = effectScope();
+    let request;
+    scope.run(() => {
+      request = useAbortableRequest();
+    });
+
+    const pending = request.run(abortableRunner('value'));
+    expect(request.isPending.value).toBe(true);
+
+    scope.stop();
+
+    await expect(pending).resolves.toBeUndefined();
+    expect(request.isPending.value).toBe(false);
+  });
+
+  it('keeps separate controllers per instance', async () => {
+    const a = useAbortableRequest();
+    const b = useAbortableRequest();
+
+    const first = a.run(abortableRunner('a'));
+    // Starting b's request must not abort a's.
+    const second = b.run(abortableRunner('b'));
+
+    await expect(first).resolves.toBe('a');
+    await expect(second).resolves.toBe('b');
+  });
+});
@@ -1,9 +1,9 @@
-import { ref } from 'vue';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useAgentsList } from '../useAgentsList';
 import { useMapGetter } from 'dashboard/composables/store';
-import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';
 import * as agentHelper from 'dashboard/helper/agentHelper';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useAgentsList } from '../useAgentsList';
+import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';

 // Mock vue-i18n
 vi.mock('vue-i18n', () => ({
@@ -94,6 +94,32 @@ describe('useAgentsList', () => {
    expect(agentsList.value.length).toBe(formattedAgentsData.slice(1).length);
  });

+  it('keeps nameless agent bots and applies a fallback label', () => {
+    const namelessBot = {
+      id: 91,
+      name: null,
+      assignee_type: 'AgentBot',
+      availability_status: 'offline',
+    };
+    mockUseMapGetter({
+      'inboxAssignableAgents/getAssignableAgents': ref(() => [
+        ...allAgentsData,
+        namelessBot,
+      ]),
+    });
+
+    const { agentsList } = useAgentsList();
+    // access the computed to trigger evaluation
+    expect(agentsList.value).toBeDefined();
+
+    const passedAgents =
+      agentHelper.getAgentsByUpdatedPresence.mock.calls[0][0];
+    expect(passedAgents).toContainEqual({
+      ...namelessBot,
+      name: '-',
+    });
+  });
+
  it('handles empty assignable agents', () => {
    mockUseMapGetter({
      'inboxAssignableAgents/getAssignableAgents': ref(() => []),
@@ -0,0 +1,62 @@
+import { getCurrentScope, onScopeDispose, ref } from 'vue';
+
+export const isAbortError = error =>
+  error?.name === 'AbortError' ||
+  error?.name === 'CanceledError' ||
+  error?.code === 'ERR_CANCELED';
+
+/**
+ * Keeps only the latest request alive. Starting a new `run` (or calling
+ * `abort`) cancels the previous request through its `AbortSignal`, so
+ * out-of-order responses can never overwrite fresher data.
+ *
+ * @example
+ * const { run, abort, isPending } = useAbortableRequest();
+ * const results = await run(signal => api.search(query, { signal }));
+ *
+ * @returns {{
+ *   run: (runner: (signal: AbortSignal) => Promise<any>, options?: { onAbort?: any }) => Promise<any>,
+ *   abort: () => void,
+ *   isPending: import('vue').Ref<boolean>,
+ * }}
+ * `run` resolves with the runner's value, or `options.onAbort` (default
+ * `undefined`) when the request was superseded. Non-abort errors are rethrown.
+ */
+export function useAbortableRequest() {
+  const isPending = ref(false);
+  let controller = null;
+
+  const abort = () => {
+    controller?.abort();
+    controller = null;
+    isPending.value = false;
+  };
+
+  const run = async (runner, { onAbort } = {}) => {
+    controller?.abort();
+    const currentController = new AbortController();
+    controller = currentController;
+    isPending.value = true;
+
+    try {
+      return await runner(currentController.signal);
+    } catch (error) {
+      if (currentController.signal.aborted || isAbortError(error))
+        return onAbort;
+      throw error;
+    } finally {
+      // Only the latest run owns the shared state; a superseded run leaves it
+      // for the run that replaced it.
+      if (controller === currentController) {
+        controller = null;
+        isPending.value = false;
+      }
+    }
+  };
+
+  // Cancel any in-flight request when the owning scope is disposed.
+  // Guarded so the composable can also be used outside an effect scope.
+  if (getCurrentScope()) onScopeDispose(abort);
+
+  return { run, abort, isPending };
+}
@@ -1,10 +1,10 @@
-import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
 import {
  getAgentsByUpdatedPresence,
  getSortedAgentsByAvailability,
 } from 'dashboard/helper/agentHelper';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';

 /**
 * A composable function that provides a list of agents for assignment.
@@ -53,7 +53,11 @@ export function useAgentsList(
   * @type {import('vue').ComputedRef<Array>}
   */
  const agentsList = computed(() => {
-    const agents = assignableAgents.value || [];
+    const agents = (assignableAgents.value || []).map(agent =>
+      !agent.name && agent.assignee_type === 'AgentBot'
+        ? { ...agent, name: '-' }
+        : agent
+    );
    const agentsByUpdatedPresence = getAgentsByUpdatedPresence(
      agents,
      currentUser.value,
@@ -2,6 +2,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
+import { setDirectUploadAuthHeaders } from 'dashboard/helper/directUploadsHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
 import {
@@ -21,7 +22,6 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
  const { t } = useI18n();

  const accountId = useMapGetter('getCurrentAccountId');
-  const currentUser = useMapGetter('getCurrentUser');
  const currentChat = useMapGetter('getSelectedChat');
  const globalConfig = useMapGetter('globalConfig/get');

@@ -78,10 +78,7 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
      `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
      {
        directUploadWillCreateBlobWithXHR: xhr => {
-          xhr.setRequestHeader(
-            'api_access_token',
-            currentUser.value.access_token
-          );
+          setDirectUploadAuthHeaders(xhr);
        },
      }
    );
@@ -308,7 +308,8 @@ export function useWhatsappCallSession() {
    }
  };

-  const initiateOutboundCall = async conversationId => {
+  // target: { conversationId } or { contactId, inboxId }
+  const initiateOutboundCall = async target => {
    // Module-scoped lock + active-session guard so a second click — from the
    // same composable instance OR a different one (header vs contact panel)
    // OR while a call is already live — can't tear down the in-flight setup
@@ -320,10 +321,7 @@ export function useWhatsappCallSession() {
    isInitiatingOutbound.value = true;
    try {
      const sdpOffer = await prepareOutboundOffer();
-      const response = await WhatsappCallsAPI.initiate(
-        conversationId,
-        sdpOffer
-      );
+      const response = await WhatsappCallsAPI.initiate(target, sdpOffer);
      if (response?.id) {
        activeCallId = response.id;
        // A connect webhook that raced ahead of this response was buffered;
@@ -354,7 +352,7 @@ export function useWhatsappCallSession() {
        data?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_REQUESTED ||
        data?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
      ) {
-        return { status: data.status };
+        return { status: data.status, conversation_id: data.conversation_id };
      }
      throw e;
    } finally {
@@ -78,8 +78,5 @@ export default {
  },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
-
-// Temporarily disables Instagram and WhatsApp inbox creation
-// (WhatsApp embedded signup popup, Instagram OAuth, WhatsApp Call).
-// Flip to false when the channels are brought back.
-export const IS_INSTAGRAM_WHATSAPP_INBOX_CREATION_DISABLED = true;
+export const META_RESTRICTION_STATUS_URL =
+  'https://status.chatwoot.com/incident/948346';
@@ -7,9 +7,15 @@ export const FEATURE_FLAGS = {
  AUTOMATIONS: 'automations',
  CAMPAIGNS: 'campaigns',
  WHATSAPP_CAMPAIGNS: 'whatsapp_campaign',
+  WHATSAPP_EMBEDDED_SIGNUP_FLOW: 'whatsapp_embedded_signup_inbox_creation',
+  WHATSAPP_MANUAL_TRANSFER: 'whatsapp_manual_transfer',
+  WHATSAPP_RECONFIGURE: 'whatsapp_reconfigure',
  CANNED_RESPONSES: 'canned_responses',
  CRM: 'crm',
  CUSTOM_ATTRIBUTES: 'custom_attributes',
+  DATA_IMPORT: 'data_import',
+  DELAYED_AUTOMATIONS: 'delayed_automations',
+  API_AND_WEBHOOKS: 'api_and_webhooks',
  INBOX_MANAGEMENT: 'inbox_management',
  INTEGRATIONS: 'integrations',
  LABELS: 'labels',
@@ -127,25 +127,8 @@ export const getHostNameFromURL = url => {
  }
 };

-/**
- * Extracts filename from a URL
- * @param {string} url - The URL to extract filename from
- * @returns {string} - The extracted filename or original URL if extraction fails
- */
-export const extractFilenameFromUrl = url => {
-  if (!url || typeof url !== 'string') return url;
-
-  try {
-    const urlObj = new URL(url);
-    const pathname = urlObj.pathname;
-    const filename = pathname.split('/').pop();
-    return filename || url;
-  } catch (error) {
-    // If URL parsing fails, try to extract filename using regex
-    const match = url.match(/\/([^/?#]+)(?:[?#]|$)/);
-    return match ? match[1] : url;
-  }
-};
+// Shared with the mobile app via @chatwoot/utils.
+export { extractFilenameFromUrl } from '@chatwoot/utils';

 /**
 * Normalizes a comma/newline separated list of domains
@@ -7,7 +7,7 @@
 export const getAgentsByAvailability = (agents, availability) => {
  return agents
    .filter(agent => agent.availability_status === availability)
-    .sort((a, b) => a.name.localeCompare(b.name));
+    .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
 };

 /**
@@ -0,0 +1,172 @@
+// Powers the "unpublished changes" preview: marks what changed between the live
+// article and the draft — word by word in the title, block by block in the body.
+
+import MarkdownIt from 'markdown-it';
+
+// Matches the public renderer (CommonMark, no typographer). True when two
+// markdown strings render the same — so blank-line/spacing-only edits don't count,
+// but real changes (code indentation, smart quotes, width markers) do.
+const commonmark = MarkdownIt('commonmark');
+export const rendersIdentically = (a, b) =>
+  commonmark.render(a ?? '') === commonmark.render(b ?? '');
+
+const INS_CLASS = '!bg-n-teal-5 !text-n-teal-12 !no-underline rounded px-0.5';
+const DEL_CLASS = '!bg-n-ruby-5 !text-n-ruby-12 !line-through rounded px-0.5';
+
+// Detailed compare gets slow on huge texts; past this, show all old as removed
+// and all new as added.
+const MAX_DIFF_TOKENS = 2000;
+
+const tokenizeWords = value => (value || '').match(/\S+/g) || [];
+
+const escapeHtml = value =>
+  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+// Compares two lists in order and reports what's the same (`equal`), removed
+// (`del`) or added (`ins`), keeping as much unchanged as possible. `keyOf` says
+// how to compare items (title passes words, body passes blocks).
+const diffSequence = (a, b, keyOf = item => item) => {
+  const n = a.length;
+  const m = b.length;
+  if (n > MAX_DIFF_TOKENS || m > MAX_DIFF_TOKENS) {
+    return [
+      ...a.map(item => ({ type: 'del', item })),
+      ...b.map(item => ({ type: 'ins', item })),
+    ];
+  }
+
+  const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i -= 1) {
+    for (let j = m - 1; j >= 0; j -= 1) {
+      dp[i][j] =
+        keyOf(a[i]) === keyOf(b[j])
+          ? dp[i + 1][j + 1] + 1
+          : Math.max(dp[i + 1][j], dp[i][j + 1]);
+    }
+  }
+
+  const ops = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (keyOf(a[i]) === keyOf(b[j])) {
+      ops.push({ type: 'equal', item: a[i] });
+      i += 1;
+      j += 1;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      ops.push({ type: 'del', item: a[i] });
+      i += 1;
+    } else {
+      ops.push({ type: 'ins', item: b[j] });
+      j += 1;
+    }
+  }
+  while (i < n) {
+    ops.push({ type: 'del', item: a[i] });
+    i += 1;
+  }
+  while (j < m) {
+    ops.push({ type: 'ins', item: b[j] });
+    j += 1;
+  }
+  return ops;
+};
+
+const wrapDiff = {
+  ins: text => `<ins class="${INS_CLASS}">${text}</ins>`,
+  del: text => `<del class="${DEL_CLASS}">${text}</del>`,
+};
+
+// Builds the highlighted title. Compares whole words (not single spaces) so
+// repeated words/spaces don't make the highlights jump around, then rejoins
+// with single spaces — a run of added/removed words shares one <ins>/<del> tag.
+export const renderInlineDiff = (oldValue, newValue) => {
+  const ops = diffSequence(tokenizeWords(oldValue), tokenizeWords(newValue));
+
+  const segments = [];
+  let run = [];
+  let runType = null;
+  const flushRun = () => {
+    if (!run.length) return;
+    const text = run.map(escapeHtml).join(' ');
+    segments.push(wrapDiff[runType] ? wrapDiff[runType](text) : text);
+    run = [];
+  };
+
+  ops.forEach(({ type, item }) => {
+    if (type !== runType) flushRun();
+    runType = type;
+    run.push(item);
+  });
+  flushRun();
+
+  return segments.join(' ');
+};
+
+// A fenced code block opener: ``` or ~~~, indented up to 3 spaces (CommonMark).
+const FENCE_RE = /^ {0,3}(```|~~~)/;
+// A list item marker: -, *, + or "1." / "1)", indented up to 3 spaces.
+const LIST_ITEM_RE = /^ {0,3}(?:[-*+]|\d{1,9}[.)])(?:\s|$)/;
+
+// Split on blank lines so each paragraph, heading or list compares as one piece.
+// Blank lines inside a fenced code block, or between items of the same list, are
+// content — splitting there would tear a code block or list apart and render it
+// with broken structure (orphaned <li>/<p>), so we keep those together.
+const splitBlocks = text => {
+  const lines = (text || '').split('\n');
+  const blocks = [];
+  let buffer = [];
+  let fence = null;
+  let inList = false;
+
+  const flush = () => {
+    const block = buffer.join('\n');
+    if (block.trim()) blocks.push(block);
+    buffer = [];
+    inList = false;
+  };
+
+  lines.forEach((line, index) => {
+    const marker = line.match(FENCE_RE)?.[1];
+    if (marker && !fence) fence = marker;
+    else if (fence && line.trimStart().startsWith(fence)) fence = null;
+
+    if (fence) {
+      buffer.push(line);
+      return;
+    }
+
+    if (LIST_ITEM_RE.test(line)) inList = true;
+
+    if (line.trim() !== '') {
+      buffer.push(line);
+      return;
+    }
+
+    // Blank line: keep it when the current list continues on the next non-blank
+    // line (another item or an indented continuation); otherwise end the block.
+    const next = lines.slice(index + 1).find(other => other.trim() !== '');
+    if (inList && next && (LIST_ITEM_RE.test(next) || /^\s/.test(next))) {
+      buffer.push(line);
+    } else {
+      flush();
+    }
+  });
+
+  flush();
+  return blocks;
+};
+
+const BLOCK_TYPE = { equal: 'equal', del: 'removed', ins: 'added' };
+
+// Diffs the body block by block. Blocks match when they render to the same HTML
+// (the check staging uses), so only edits that change the page show as a diff.
+export const buildDiffBlocks = (oldText, newText) => {
+  const toBlocks = text =>
+    splitBlocks(text).map(md => ({ md, key: commonmark.render(md) }));
+  const ops = diffSequence(toBlocks(oldText), toBlocks(newText), b => b.key);
+  return ops.map(op => ({ type: BLOCK_TYPE[op.type], md: op.item.md }));
+};
+
+export const hasPendingChanges = article =>
+  article?.draftTitle != null || article?.draftContent != null;
@@ -208,6 +208,12 @@ export const generateAutomationPayload = payload => {
  return automation;
 };

+export const formatDelay = minutes => {
+  if (minutes % 1440 === 0) return `${minutes / 1440}d`;
+  if (minutes % 60 === 0) return `${minutes / 60}h`;
+  return `${minutes}m`;
+};
+
 export const isCustomAttribute = (attrs, key) => {
  return attrs.find(attr => attr.key === key);
 };
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .15.1
 .16.0