Merge remote-tracking branch 'origin/develop' into captain-message-generation-metadata

# Conflicts:
#	config/routes.rb
#	db/schema.rb
#	enterprise/app/models/enterprise/concerns/message.rb

.circleci/config.yml

@@ -144,7 +144,7 @@ jobs:
   # Backend tests with parallelization
   backend-tests:
     <<: *defaults
-    parallelism: 20
+    parallelism: 18
     steps:
       - checkout
       - node/install:

.env.example

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

AGENTS.md

@@ -43,13 +43,18 @@
 
 ## General Guidelines
 
-- MVP focus: Least code change, happy-path only
-- No unnecessary defensive programming
-- Ship the happy path first: limit guards/fallbacks to what production has proven necessary, then iterate
+- Prefer the smallest production-ready change that solves the current problem.
+- Build for the expected production path first. Do not add speculative guards, fallbacks, retries, or edge-case handling unless the caller can actually hit that case or production has proven it necessary.
+- When an impossible or misconfigured state would indicate a setup/deployment bug, let it fail loudly instead of silently skipping behavior.
+- For locked/internal configs that must exist in production, prefer direct reads (`find`, `find_by!`, required hash keys) over silent fallbacks.
+- Do not add validation or response checks unless the code uses the result or the check changes behavior meaningfully.
+- Prefer existing repo dependencies/client libraries over hand-rolled protocol code for auth, signing, parsing, or API plumbing.
+- Avoid one-use private helpers unless they hide real complexity or make the main flow meaningfully easier to read.
 - Prefer minimal, readable code over elaborate abstractions; clarity beats cleverness
 - Break down complex tasks into small, testable units
 - Iterate after confirmation
 - Avoid writing specs unless explicitly asked
+- In specs, avoid custom helper methods for setup/data. Prefer `let` values and direct per-example setup; only add a helper when it removes meaningful repeated complexity.
 - Remove dead/unreachable/unused code
 - Don’t write multiple versions or backups for the same logic — pick the best approach and implement it
 - Prefer `with_modified_env` (from spec helpers) over stubbing `ENV` directly in specs

Gemfile

@@ -76,7 +76,7 @@ gem 'faraday_middleware-aws-sigv4'
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
-gem 'puma'
+gem 'puma', '~> 7.2', '>= 7.2.1'
 gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'
@@ -195,7 +195,7 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.10.0'
+gem 'ai-agents', '>= 0.12.0'
 
 # TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm', '>= 1.14.1'

Gemfile.lock

@@ -126,7 +126,7 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.10.0)
+    ai-agents (0.12.0)
       ruby_llm (~> 1.14)
     annotaterb (4.20.0)
       activerecord (>= 6.0.0)
@@ -136,6 +136,8 @@ GEM
     audited (5.4.1)
       activerecord (>= 5.0, < 7.7)
       activesupport (>= 5.0, < 7.7)
+    auth-sanitizer (0.2.1)
+      version_gem (~> 1.1, >= 1.1.10)
     aws-actionmailbox-ses (0.1.0)
       actionmailbox (>= 7.1.0)
       aws-sdk-s3 (~> 1, >= 1.123.0)
@@ -168,7 +170,7 @@ GEM
     base64 (0.3.0)
     bcrypt (3.1.22)
     benchmark (0.4.1)
-    bigdecimal (3.2.2)
+    bigdecimal (4.1.2)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -184,18 +186,19 @@ GEM
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
     byebug (11.1.3)
+    cgi (0.5.1)
     childprocess (5.1.0)
       logger (~> 1.5)
     cld3 (3.7.0)
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
-    concurrent-ruby (1.3.5)
+    concurrent-ruby (1.3.7)
     connection_pool (2.5.5)
     crack (1.0.0)
       bigdecimal
       rexml
-    crass (1.0.6)
+    crass (1.0.7)
     cronex (0.15.0)
       tzinfo
       unicode (>= 0.4.4.5)
@@ -271,8 +274,8 @@ GEM
       dry-logic (~> 1.5)
       dry-types (~> 1.8)
       zeitwerk (~> 2.6)
-    dry-types (1.8.3)
-      bigdecimal (~> 3.0)
+    dry-types (1.9.1)
+      bigdecimal (>= 3.0)
       concurrent-ruby (~> 1.0)
       dry-core (~> 1.0)
       dry-inflector (~> 1.0)
@@ -301,7 +304,7 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.2)
+    faraday (2.14.3)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -312,7 +315,7 @@ GEM
       hashie
     faraday-multipart (1.2.0)
       multipart-post (~> 2.0)
-    faraday-net_http (3.4.2)
+    faraday-net_http (3.4.4)
       net-http (~> 0.5)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
@@ -435,7 +438,8 @@ GEM
     hana (1.3.7)
     hash_diff (1.1.1)
     hashdiff (1.1.0)
-    hashie (5.0.0)
+    hashie (5.1.0)
+      logger
     html2text (0.4.0)
       nokogiri (>= 1.0, < 2.0)
     http (5.1.1)
@@ -470,7 +474,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.19.5)
+    json (2.19.9)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -566,9 +570,9 @@ GEM
     minitest (5.25.5)
     mock_redis (0.36.0)
       ruby2_keywords
-    msgpack (1.8.0)
+    msgpack (1.8.3)
     multi_json (1.15.0)
-    multi_xml (0.8.0)
+    multi_xml (0.9.1)
       bigdecimal (>= 3.1, < 5)
     multipart-post (2.4.1)
     mutex_m (0.3.0)
@@ -578,7 +582,7 @@ GEM
       uri (>= 0.11.1)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.24)
+    net-imap (0.6.4.1)
       date
       net-protocol
     net-pop (0.1.2)
@@ -593,30 +597,37 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.3)
-    nokogiri (1.19.3)
+    nio4r (2.7.5)
+    nokogiri (1.19.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.19.3-arm64-darwin)
+    nokogiri (1.19.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.3-x86_64-darwin)
+    nokogiri (1.19.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.3-x86_64-linux-gnu)
+    nokogiri (1.19.4-x86_64-linux-gnu)
       racc (~> 1.4)
-    oauth (1.1.0)
-      oauth-tty (~> 1.0, >= 1.0.1)
-      snaky_hash (~> 2.0)
-      version_gem (~> 1.1)
-    oauth-tty (1.0.5)
-      version_gem (~> 1.1, >= 1.1.1)
-    oauth2 (2.0.9)
-      faraday (>= 0.17.3, < 3.0)
-      jwt (>= 1.0, < 3.0)
+    oauth (1.1.6)
+      auth-sanitizer (~> 0.2, >= 0.2.1)
+      base64 (~> 0.1)
+      cgi
+      oauth-tty (~> 1.0, >= 1.0.8)
+      snaky_hash (~> 2.0, >= 2.0.5)
+      version_gem (~> 1.1, >= 1.1.11)
+    oauth-tty (1.0.8)
+      auth-sanitizer (~> 0.1, >= 0.1.3)
+      cgi
+      version_gem (~> 1.1, >= 1.1.9)
+    oauth2 (2.0.22)
+      auth-sanitizer (~> 0.2, >= 0.2.1)
+      faraday (>= 0.17.3, < 4.0)
+      jwt (>= 1.0, < 4.0)
+      logger (~> 1.2)
       multi_xml (~> 0.5)
       rack (>= 1.2, < 4)
-      snaky_hash (~> 2.0)
-      version_gem (~> 1.1)
-    oj (3.16.10)
+      snaky_hash (~> 2.0, >= 2.0.5)
+      version_gem (~> 1.1, >= 1.1.11)
+    oj (3.17.3)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
     omniauth (2.1.4)
@@ -663,7 +674,7 @@ GEM
       opentelemetry-api (~> 1.0)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.1)
+    ostruct (0.6.3)
     parallel (1.27.0)
     parser (3.3.8.0)
       ast (~> 2.4.1)
@@ -682,7 +693,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (7.0.5)
-    puma (6.4.3)
+    puma (7.2.1)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
@@ -935,9 +946,9 @@ GEM
       gli
       hashie
       logger
-    snaky_hash (2.0.1)
-      hashie
-      version_gem (~> 1.1, >= 1.1.1)
+    snaky_hash (2.0.5)
+      hashie (>= 0.1.0, < 6)
+      version_gem (>= 1.1.8, < 3)
     sorbet-runtime (0.5.11934)
     spring (4.1.1)
     spring-watcher-listen (2.1.0)
@@ -995,12 +1006,14 @@ GEM
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.4)
-    vite_rails (3.0.17)
-      railties (>= 5.1, < 8)
+    version_gem (1.1.11)
+    vite_rails (3.10.0)
+      railties (>= 5.1, < 9)
       vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.8.0)
+    vite_ruby (3.10.2)
       dry-cli (>= 0.7, < 2)
+      logger (~> 1.6)
+      mutex_m
       rack-proxy (~> 0.6, >= 0.6.1)
       zeitwerk (~> 2.2)
     warden (1.2.9)
@@ -1045,7 +1058,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.10.0)
+  ai-agents (>= 0.12.0)
   annotaterb
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -1130,7 +1143,7 @@ DEPENDENCIES
   pgvector
   procore-sift
   pry-rails
-  puma
+  puma (~> 7.2, >= 7.2.1)
   pundit
   rack-attack (>= 6.7.0)
   rack-cors (= 2.0.0)

VERSION_CW

@@ -1 +1 @@
-4.14.1
+4.15.1

app/builders/contact_inbox_with_contact_builder.rb

@@ -50,7 +50,7 @@ class ContactInboxWithContactBuilder
 
   def create_contact
     account.contacts.create!(
-      name: contact_attributes[:name] || ::Haikunator.haikunate(1000),
+      name: contact_name,
       phone_number: contact_attributes[:phone_number],
       email: contact_attributes[:email],
       identifier: contact_attributes[:identifier],
@@ -59,6 +59,11 @@ class ContactInboxWithContactBuilder
     )
   end
 
+  def contact_name
+    name = contact_attributes[:name] || ::Haikunator.haikunate(1000)
+    name.truncate(ApplicationRecord::MAX_STRING_COLUMN_LENGTH, omission: '')
+  end
+
   def find_contact
     contact = find_contact_by_identifier(contact_attributes[:identifier])
     contact ||= find_contact_by_email(contact_attributes[:email])

app/builders/messages/facebook/message_builder.rb

@@ -91,11 +91,21 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
 
   def fallback_params(attachment)
     {
-      fallback_title: attachment['title'],
-      external_url: attachment['url']
+      fallback_title: attachment['title'] || attachment.dig('payload', 'title'),
+      external_url: attachment['url'] || attachment.dig('payload', 'url')
     }
   end
 
+  # Facebook shared posts point to page URLs, not downloadable media URLs.
+  # Both `share` and `post` attachment types carry a page URL rather than a media file,
+  # so map them to `fallback` (which keeps the title/link without attempting a download).
+  # Keep this Facebook-only so Messenger/Instagram share attachments still use the parent media handling.
+  def normalize_file_type(type)
+    return :fallback if [:share, :post].include?(type.to_sym)
+
+    super
+  end
+
   def conversation_params
     {
       account_id: @inbox.account_id,

app/builders/messages/message_builder.rb

@@ -13,6 +13,7 @@ class Messages::MessageBuilder
     @account = conversation.account
     @message_type = params[:message_type] || 'outgoing'
     @attachments = params[:attachments]
+    @is_voice_message = ActiveModel::Type::Boolean.new.cast(params[:is_voice_message])
     @automation_rule = content_attributes&.dig(:automation_rule_id)
     return unless params.instance_of?(ActionController::Parameters)
 
@@ -56,16 +57,25 @@ class Messages::MessageBuilder
         file: uploaded_attachment
       )
 
-      attachment.file_type = if uploaded_attachment.is_a?(String)
-                               file_type_by_signed_id(
-                                 uploaded_attachment
-                               )
-                             else
-                               file_type(uploaded_attachment&.content_type)
-                             end
+      attachment.file_type = attachment_file_type(uploaded_attachment)
+      tag_voice_message(attachment)
     end
   end
 
+  def attachment_file_type(uploaded_attachment)
+    if uploaded_attachment.is_a?(String)
+      file_type_by_signed_id(uploaded_attachment)
+    else
+      file_type(uploaded_attachment&.content_type)
+    end
+  end
+
+  def tag_voice_message(attachment)
+    return unless @is_voice_message && attachment.file_type == 'audio'
+
+    attachment.meta = (attachment.meta || {}).merge('is_voice_message' => true)
+  end
+
   def process_emails
     return unless @conversation.inbox&.inbox_type == 'Email'
 

app/builders/messages/messenger/message_builder.rb

@@ -6,6 +6,11 @@ class Messages::Messenger::MessageBuilder
     return if unsupported_file_type?(attachment['type'])
 
     params = attachment_params(attachment)
+    # During Meta's sticker webhook transition, a sticker message carries both an `image`
+    # and a `sticker` attachment pointing to the same URL. Skip the redundant sticker so it
+    # isn't attached twice, while still storing legitimate duplicate attachments of other types.
+    return if duplicate_sticker?(attachment, params[:external_url])
+
     attachment_obj = @message.attachments.new(params.except(:remote_file_url))
     attachment_obj.save!
     if facebook_reel?(attachment)
@@ -13,10 +18,14 @@ class Messages::Messenger::MessageBuilder
     elsif params[:remote_file_url]
       attach_file(attachment_obj, params[:remote_file_url])
     end
+    fetch_attachment_links(attachment_obj)
+    update_attachment_file_type(attachment_obj)
+  end
+
+  def fetch_attachment_links(attachment_obj)
     fetch_story_link(attachment_obj) if attachment_obj.file_type == 'story_mention'
     fetch_ig_story_link(attachment_obj) if attachment_obj.file_type == 'ig_story'
     fetch_ig_post_link(attachment_obj) if attachment_obj.file_type == 'ig_post'
-    update_attachment_file_type(attachment_obj)
   end
 
   def attach_file(attachment, file_url)
@@ -111,13 +120,20 @@ class Messages::Messenger::MessageBuilder
 
   # Facebook may send attachment types that don't directly match our file_type enum.
   # Map known aliases to their canonical enum values.
-  FACEBOOK_FILE_TYPE_MAP = { reel: :ig_reel }.freeze
+  FACEBOOK_FILE_TYPE_MAP = { reel: :ig_reel, sticker: :image }.freeze
 
   def normalize_file_type(type)
     sym = type.to_sym
     FACEBOOK_FILE_TYPE_MAP.fetch(sym, sym)
   end
 
+  def duplicate_sticker?(attachment, url)
+    return false unless attachment['type'].to_sym == :sticker
+    return false if url.blank?
+
+    @message.attachments.any? { |existing| existing.external_url == url }
+  end
+
   # Facebook sends reel URLs as webpage links (facebook.com/reel/...) rather than
   # direct video URLs. Downloading these yields HTML, not video content.
   def facebook_reel?(attachment)

app/builders/v2/reports/drilldown_builder.rb

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

app/builders/v2/reports/drilldown_record_serializer.rb

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

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

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

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

@@ -30,7 +30,8 @@ class Api::V1::Accounts::AssignmentPoliciesController < Api::V1::Accounts::BaseC
   def assignment_policy_params
     params.require(:assignment_policy).permit(
       :name, :description, :assignment_order, :conversation_priority,
-      :fair_distribution_limit, :fair_distribution_window, :enabled
+      :fair_distribution_limit, :fair_distribution_window, :enabled,
+      :exclude_older_than_hours
     )
   end
 end

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

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

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

@@ -53,7 +53,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
 
   def category_params
     params.require(:category).permit(
-      :name, :description, :position, :slug, :locale, :icon, :parent_category_id, :associated_category_id
+      :name, :description, :position, :slug, :locale, :icon, :icon_color, :parent_category_id, :associated_category_id
     )
   end
 

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

@@ -214,3 +214,5 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     render json: error, status: error_status
   end
 end
+
+Api::V1::Accounts::ContactsController.prepend_mod_with('Api::V1::Accounts::ContactsController')

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

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

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

@@ -140,7 +140,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def destroy
     authorize @conversation, :destroy?
-    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
+    ::Conversations::DeleteService.new(conversation: @conversation, user: Current.user, ip: request.ip).perform
     head :ok
   end
 

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

@@ -11,7 +11,7 @@ class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts
         enable_fb_login: '0',
         force_authentication: '1',
         response_type: 'code',
-        state: generate_instagram_token(Current.account.id)
+        state: generate_instagram_token(Current.account.id, params[:return_to])
       }
     )
     if redirect_url

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

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

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

@@ -8,7 +8,15 @@ class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseC
   end
 
   def state
-    Current.account.to_sgid(expires_in: 15.minutes).to_s
+    # The sgid purpose doubles as a return hint: onboarding tags it so the callback
+    # can route the user back to inbox setup. The purpose is part of the signed
+    # payload (tamper-proof), and a non-onboarding request keeps the default
+    # purpose, leaving callers like Notion byte-identical.
+    Current.account.to_sgid(expires_in: 15.minutes, for: state_purpose).to_s
+  end
+
+  def state_purpose
+    params[:return_to] == 'onboarding' ? 'onboarding' : 'default'
   end
 
   def base_url

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

@@ -0,0 +1,89 @@
+class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseController
+  before_action :check_admin_authorization?
+
+  ONBOARDING_STEP_KEY = 'onboarding_step'.freeze
+  STEP_ACCOUNT_DETAILS = 'account_details'.freeze
+  STEP_INBOX_SETUP = 'inbox_setup'.freeze
+  ONBOARDING_STEPS = [STEP_ACCOUNT_DETAILS, STEP_INBOX_SETUP].freeze
+
+  def update
+    return render json: { error: 'Invalid onboarding step' }, status: :unprocessable_entity unless ONBOARDING_STEPS.include?(params[:onboarding_step])
+
+    @account = Current.account
+    # The client declares the step it is completing; `account_details` runs
+    # `complete_account_details`, and so on. The known-step guard above keeps the
+    # client value from `send`-ing an arbitrary method.
+    send("complete_#{params[:onboarding_step]}")
+
+    render 'api/v1/accounts/update', format: :json
+  end
+
+  def help_center_generation
+    render json: help_center_generation_status
+  end
+
+  private
+
+  def complete_account_details
+    # Only act while the cursor still points here, so a stale replay after
+    # onboarding finished can't re-enter it.
+    return unless current_step == STEP_ACCOUNT_DETAILS
+
+    @account.assign_attributes(account_params)
+    @account.custom_attributes.merge!(custom_attributes_params)
+
+    # inbox_setup is a cloud-only step (DEPLOYMENT_ENV config, not a hardcoded
+    # environment check); self-hosted finishes onboarding here.
+    if ChatwootApp.chatwoot_cloud?
+      move_to_step(STEP_INBOX_SETUP)
+      create_onboarding_inboxes
+    else
+      finish_onboarding
+    end
+  end
+
+  def complete_inbox_setup
+    # Only finalize while the cursor still points here, so a stale or out-of-order
+    # request can't end onboarding early. Replays are no-ops.
+    return unless current_step == STEP_INBOX_SETUP
+
+    finish_onboarding
+  end
+
+  def current_step
+    @account.custom_attributes[ONBOARDING_STEP_KEY]
+  end
+
+  def move_to_step(step)
+    @account.custom_attributes[ONBOARDING_STEP_KEY] = step
+    @account.save!
+  end
+
+  def finish_onboarding
+    @account.custom_attributes.delete(ONBOARDING_STEP_KEY)
+    @account.save!
+  end
+
+  def create_onboarding_inboxes
+    Onboarding::WebWidgetCreationService.new(@account, Current.user).perform
+  end
+
+  def account_params
+    params.permit(:name, :locale)
+  end
+
+  def custom_attributes_params
+    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role, :website)
+  end
+
+  def help_center_generation_status
+    {
+      generation_id: nil,
+      state: nil,
+      articles_count: 0,
+      categories_count: 0
+    }
+  end
+end
+
+Api::V1::Accounts::OnboardingsController.prepend_mod_with('Api::V1::Accounts::OnboardingsController')

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

@@ -80,10 +80,15 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       :id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived,
       { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
-                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
     )
   end
 
+  def locale_translation_keys
+    params.dig(:portal, :config, :locale_translations)&.keys || []
+  end
+
   def live_chat_widget_params
     permitted_params = params.permit(:inbox_id)
     return {} unless permitted_params.key?(:inbox_id)

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

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

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

@@ -3,7 +3,7 @@ class Api::V1::Accounts::Tiktok::AuthorizationsController < Api::V1::Accounts::O
 
   def create
     redirect_url = Tiktok::AuthClient.authorize_url(
-      state: generate_tiktok_token(Current.account.id)
+      state: generate_tiktok_token(Current.account.id, params[:return_to])
     )
 
     if redirect_url

app/controllers/api/v1/accounts_controller.rb

@@ -58,7 +58,6 @@ class Api::V1::AccountsController < Api::BaseController
     @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
     @account.custom_attributes.merge!(custom_attributes_params)
     @account.settings.merge!(settings_params)
-    @account.custom_attributes.delete('onboarding_step') if @account.custom_attributes['onboarding_step'] == 'account_details'
     @account.custom_attributes['onboarding_step'] = 'invite_team' if @account.custom_attributes['onboarding_step'] == 'account_update'
     @account.save!
   end

app/controllers/api/v1/profile/sessions_controller.rb

@@ -0,0 +1,36 @@
+class Api::V1::Profile::SessionsController < Api::BaseController
+  before_action :set_session, only: [:destroy]
+
+  def index
+    @sessions = current_user.user_sessions.where(client_id: active_token_client_ids).order(last_activity_at: :desc)
+    @current_client_id = request.headers['client']
+  end
+
+  def destroy
+    if @session.current?(request.headers['client'])
+      render json: { error: I18n.t('profile_settings.sessions.cannot_revoke_current') }, status: :unprocessable_entity
+      return
+    end
+
+    revoke_token!(@session.client_id)
+    @session.destroy!
+    head :ok
+  end
+
+  private
+
+  def set_session
+    @session = current_user.user_sessions.find(params[:id])
+  end
+
+  def revoke_token!(client_id)
+    tokens = current_user.tokens
+    tokens.delete(client_id)
+    current_user.update!(tokens: tokens)
+  end
+
+  def active_token_client_ids
+    now = Time.current.to_i
+    (current_user.tokens || {}).select { |_, v| v['expiry'].to_i > now }.keys
+  end
+end

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

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

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

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

app/controllers/application_controller.rb

@@ -3,6 +3,7 @@ class ApplicationController < ActionController::Base
   include RequestExceptionHandler
   include Pundit::Authorization
   include SwitchLocale
+  include TrackSessionActivity
 
   skip_before_action :verify_authenticity_token
 

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,8 +1,9 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[show toggle_status toggle_typing_status toggle_priority create update custom_attributes],
     'api/v1/accounts/conversations/messages' => ['create'],
-    'api/v1/accounts/conversations/assignments' => ['create']
+    'api/v1/accounts/conversations/assignments' => ['create'],
+    'api/v1/accounts/conversations/labels' => %w[index create]
   }.freeze
 
   def ensure_access_token

app/controllers/concerns/portal_home_data.rb

@@ -0,0 +1,29 @@
+module PortalHomeData
+  extend ActiveSupport::Concern
+
+  private
+
+  def load_home_data
+    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
+    @visible_categories = @portal.categories
+                                 .where(locale: @locale)
+                                 .joins(:articles).where(articles: { status: :published })
+                                 .order(position: :asc)
+                                 .group('categories.id')
+    @popular_topics = @visible_categories.first(3)
+    @featured = base_articles.order_by_views.limit(6)
+    @category_contributors = build_category_contributors(@visible_categories)
+  end
+
+  def build_category_contributors(categories)
+    category_ids = categories.map(&:id)
+    return {} if category_ids.empty?
+
+    @portal.articles
+           .published
+           .where(locale: @locale, category_id: category_ids)
+           .includes(:author)
+           .group_by(&:category_id)
+           .transform_values { |articles| articles.filter_map(&:author).uniq.first(3) }
+  end
+end

app/controllers/concerns/track_session_activity.rb

@@ -0,0 +1,22 @@
+module TrackSessionActivity
+  extend ActiveSupport::Concern
+
+  included do
+    after_action :update_session_activity
+  end
+
+  private
+
+  def update_session_activity
+    return unless current_user
+    return if request.headers['client'].blank?
+
+    UserSessionTrackingService.new(
+      user: current_user,
+      request: request,
+      client_id: request.headers['client']
+    ).update_activity!
+  rescue StandardError => e
+    Rails.logger.warn "Session activity update failed: #{e.message}"
+  end
+end

app/controllers/dashboard_controller.rb

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

app/controllers/devise_overrides/sessions_controller.rb

@@ -1,4 +1,6 @@
 class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
+  MAX_SESSIONS = ENV.fetch('MAX_USER_SESSIONS', 25).to_i
+
   # Prevent session parameter from being passed
   # Unpermitted parameter: session
   wrap_parameters format: []
@@ -14,12 +16,14 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
 
     user = find_user_for_authentication
     return handle_mfa_required(user) if user&.mfa_enabled?
+    return if user && enforce_session_limit_for_password_login(user)
 
     # Only proceed with standard authentication if no MFA is required
     super
   end
 
   def render_create_success
+    track_user_session unless @impersonation
     render partial: 'devise/auth', formats: [:json], locals: { resource: @resource }
   end
 
@@ -53,6 +57,8 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def handle_sso_authentication
+    return if !@impersonation && enforce_session_limit_for_password_login(@resource)
+
     authenticate_resource_with_sso_token
     yield @resource if block_given?
     render_create_success
@@ -65,7 +71,10 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def authenticate_resource_with_sso_token
-    @token = @resource.create_token
+    # DTA evicts the earliest-expiring token after save when at max_number_of_devices.
+    # The short-lived impersonation token would always be that one, so pre-evict to make room.
+    make_room_for_impersonation_token if @impersonation
+    @token = @resource.create_token(lifespan: @impersonation ? 2.days.to_i : nil)
     @resource.save!
 
     sign_in(:user, @resource, store: false, bypass: false)
@@ -73,11 +82,21 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
     @resource.invalidate_sso_auth_token(params[:sso_auth_token])
   end
 
+  def make_room_for_impersonation_token
+    return if @resource.tokens.size < DeviseTokenAuth.max_number_of_devices
+
+    oldest_client_id = @resource.tokens.min_by { |_, v| v['expiry'].to_i }&.first
+    @resource.tokens.delete(oldest_client_id) if oldest_client_id
+  end
+
   def process_sso_auth_token
     return if params[:email].blank?
 
     user = User.from_email(params[:email])
-    @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
+    return unless user&.valid_sso_auth_token?(params[:sso_auth_token])
+
+    @resource = user
+    @impersonation = user.sso_auth_token_impersonation?(params[:sso_auth_token])
   end
 
   def handle_mfa_required(user)
@@ -103,6 +122,7 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def sign_in_mfa_user(user)
+    evict_oldest_session(user) if sessions_limit_reached?(user)
     @resource = user
     @token = @resource.create_token
     @resource.save!
@@ -114,6 +134,103 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   def render_mfa_error(message_key, status = :bad_request)
     render json: { error: I18n.t(message_key) }, status: status
   end
+
+  def sessions_limit_reached?(user)
+    active_token_count(user) >= MAX_SESSIONS
+  end
+
+  def active_token_count(user)
+    now = Time.current.to_i
+    (user.tokens || {}).count { |_, v| v['expiry'].to_i > now }
+  end
+
+  # Returns true when a response has been rendered (e.g., 409 picker). Non-browser clients
+  # auto-evict instead of getting stuck on a UI they can't render.
+  def enforce_session_limit_for_password_login(user)
+    if revoking_sessions?
+      revoke_sessions_for_login(user)
+      return false
+    end
+
+    return false unless sessions_limit_reached?(user)
+
+    # Picker only when every token has a tracked session; partial tracking would
+    # show a misleading count, so fall through to silent eviction instead.
+    if browser_request? && user.user_sessions.count >= user.tokens.size
+      handle_sessions_limit_for_login(user)
+      true
+    else
+      evict_oldest_session(user)
+      false
+    end
+  end
+
+  def browser_request?
+    request.user_agent.to_s.include?('Mozilla')
+  end
+
+  def revoking_sessions?
+    params[:revoke_session_id].present? || params[:revoke_all_sessions].present?
+  end
+
+  def revoke_sessions_for_login(user)
+    if params[:revoke_all_sessions].present?
+      user.tokens = {}
+      user.save!
+      user.user_sessions.destroy_all
+    elsif params[:revoke_session_id].present?
+      session = user.user_sessions.find_by(id: params[:revoke_session_id])
+      return unless session
+
+      user.tokens.delete(session.client_id)
+      user.save!
+      session.destroy!
+    end
+  end
+
+  def evict_oldest_session(user)
+    # Drop pre-rollout untracked tokens first so freshly tracked logins aren't evicted.
+    return evict_oldest_token(user) if user.user_sessions.count < user.tokens.size
+
+    oldest_session = user.user_sessions.order(Arel.sql('COALESCE(last_activity_at, created_at) ASC')).first
+    return evict_oldest_token(user) unless oldest_session
+
+    user.tokens.delete(oldest_session.client_id)
+    user.save!
+    oldest_session.destroy!
+  end
+
+  # Fallback if a token exists without a UserSession row (e.g., legacy data before tracking shipped).
+  def evict_oldest_token(user)
+    return if user.tokens.blank?
+
+    oldest_client_id = user.tokens.min_by { |_, v| v['expiry'].to_i }&.first
+    return unless oldest_client_id
+
+    user.tokens.delete(oldest_client_id)
+    user.save!
+  end
+
+  PICKER_SESSION_FIELDS = %i[id browser_name browser_version device_name platform_name platform_version
+                             ip_address city country last_activity_at created_at].freeze
+
+  def handle_sessions_limit_for_login(user)
+    sessions = user.user_sessions.order(last_activity_at: :desc).map { |s| s.slice(*PICKER_SESSION_FIELDS) }
+    render json: { sessions_limit_reached: true, sessions: sessions }, status: :conflict
+  end
+
+  def track_user_session
+    client_id = @token&.try(:client) || response.headers['client']
+    return unless client_id.present? && @resource.present?
+
+    UserSessionTrackingService.new(
+      user: @resource,
+      request: request,
+      client_id: client_id
+    ).create_or_update!
+  rescue StandardError => e
+    Rails.logger.warn "Session tracking failed: #{e.message}"
+  end
 end
 
 DeviseOverrides::SessionsController.prepend_mod_with('DeviseOverrides::SessionsController')

app/controllers/instagram/callbacks_controller.rb

@@ -28,6 +28,8 @@ class Instagram::CallbacksController < ApplicationController
     @long_lived_token_response = exchange_for_long_lived_token(@response.token)
     inbox, already_exists = find_or_create_inbox
 
+    return redirect_to app_onboarding_inbox_setup_url(account_id: account_id) if return_to == 'onboarding'
+
     if already_exists
       redirect_to app_instagram_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
     else
@@ -149,6 +151,10 @@ class Instagram::CallbacksController < ApplicationController
     verify_instagram_token(params[:state])
   end
 
+  def return_to
+    instagram_token_return_to(params[:state])
+  end
+
   def oauth_code
     params[:code]
   end

app/controllers/microsoft/callbacks_controller.rb

@@ -14,4 +14,11 @@ class Microsoft::CallbacksController < OauthCallbackController
   def imap_address
     'outlook.office365.com'
   end
+
+  # Exchange Online's SMTP AUTH (XOAUTH2) rejects proxy addresses in the SASL `user=` field;
+  # it must match the token's UPN. `preferred_username` is the documented v2.0 claim;
+  # `upn` is the v1.0 fallback.
+  def imap_login_identity
+    users_data['preferred_username'] || users_data['upn'] || super
+  end
 end

app/controllers/oauth_callback_controller.rb

@@ -16,6 +16,8 @@ class OauthCallbackController < ApplicationController
   def handle_response
     inbox, already_exists = find_or_create_inbox
 
+    return redirect_to app_onboarding_inbox_setup_url(account_id: account.id) if return_to == 'onboarding'
+
     if already_exists
       redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
     else
@@ -44,7 +46,7 @@ class OauthCallbackController < ApplicationController
 
   def update_channel(channel_email)
     channel_email.update!({
-                            imap_login: users_data['email'], imap_address: imap_address,
+                            imap_login: imap_login_identity, imap_address: imap_address,
                             imap_port: '993', imap_enabled: true,
                             provider: provider_name,
                             provider_config: {
@@ -55,6 +57,13 @@ class OauthCallbackController < ApplicationController
                           })
   end
 
+  # Identity used as the IMAP/SMTP login (SASL XOAUTH2 `user=` field). Defaults to the
+  # id_token's email claim; providers override when their server requires a different
+  # claim (e.g. Microsoft SMTP requires UPN).
+  def imap_login_identity
+    users_data['email']
+  end
+
   def provider_name
     raise NotImplementedError
   end
@@ -81,10 +90,19 @@ class OauthCallbackController < ApplicationController
     decoded_token[0]
   end
 
+  # The sgid purpose carries the onboarding return hint (see
+  # OauthAuthorizationController#state). Try the onboarding purpose first — a match
+  # both resolves the account and records the return target — then fall back to the
+  # default purpose used by every other caller.
   def account_from_signed_id
     raise ActionController::BadRequest, 'Missing state variable' if params[:state].blank?
 
-    account = GlobalID::Locator.locate_signed(params[:state])
+    if (account = GlobalID::Locator.locate_signed(params[:state], for: 'onboarding'))
+      @return_to = 'onboarding'
+    else
+      account = GlobalID::Locator.locate_signed(params[:state])
+    end
+
     raise 'Invalid or expired state' if account.nil?
 
     account
@@ -94,6 +112,11 @@ class OauthCallbackController < ApplicationController
     @account ||= account_from_signed_id
   end
 
+  def return_to
+    account # resolving the sgid records which purpose matched
+    @return_to
+  end
+
   # Fallback name, for when name field is missing from users_data
   def fallback_name
     users_data['email'].split('@').first.parameterize.titleize

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

@@ -39,9 +39,11 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def switch_locale_with_portal(&)
-    @locale = validate_and_get_locale(params[:locale])
+    # Keep @locale as the portal's own locale code (e.g. th_TH) for content queries,
+    # while UI translations fall back to an available I18n locale (e.g. th).
+    @locale = params[:locale]
 
-    I18n.with_locale(@locale, &)
+    I18n.with_locale(validate_and_get_locale(@locale), &)
   end
 
   def switch_locale_with_article(&)
@@ -49,13 +51,12 @@ class Public::Api::V1::Portals::BaseController < PublicController
     Rails.logger.info "Article: not found for slug: #{params[:article_slug]}"
     render_404 && return if article.blank?
 
-    article_locale = if article.category.present?
-                       article.category.locale
-                     else
-                       article.locale
-                     end
-    @locale = validate_and_get_locale(article_locale)
-    I18n.with_locale(@locale, &)
+    @locale = if article.category.present?
+                article.category.locale
+              else
+                article.locale
+              end
+    I18n.with_locale(validate_and_get_locale(@locale), &)
   end
 
   def allow_iframe_requests

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

@@ -0,0 +1,31 @@
+class Public::Api::V1::Portals::SearchController < Public::Api::V1::Portals::BaseController
+  before_action :ensure_custom_domain_request, only: [:index]
+  before_action :portal
+  before_action :set_portal_layout
+  before_action :set_view_variant
+  before_action :ensure_portal_feature_enabled
+  layout 'portal'
+
+  def index
+    @query = params[:query].to_s.strip
+    @articles = @portal.articles.published.includes(:category).where(locale: params[:locale])
+
+    search_articles
+
+    @articles = @articles.page(params[:page]).per(10)
+  end
+
+  private
+
+  def search_articles
+    @articles = @query.present? ? @articles.search(search_params) : @articles.none
+  end
+
+  def search_params
+    params.permit(:query, :locale, :sort, :status, :page).tap do |permitted|
+      permitted[:query] = @query
+    end
+  end
+end
+
+Public::Api::V1::Portals::SearchController.prepend_mod_with('Public::Api::V1::Portals::SearchController')

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

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

app/controllers/super_admin/accounts_controller.rb

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

app/controllers/tiktok/callbacks_controller.rb

@@ -20,6 +20,8 @@ class Tiktok::CallbacksController < ApplicationController
   def process_successful_authorization
     inbox, already_exists = find_or_create_inbox
 
+    return redirect_to app_onboarding_inbox_setup_url(account_id: account_id) if return_to == 'onboarding'
+
     if already_exists
       redirect_to app_tiktok_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
     else
@@ -127,6 +129,10 @@ class Tiktok::CallbacksController < ApplicationController
     @account_id ||= verify_tiktok_token(params[:state])
   end
 
+  def return_to
+    tiktok_token_return_to(params[:state])
+  end
+
   def account
     @account ||= Account.find(account_id)
   end

app/controllers/twilio/callback_controller.rb

@@ -35,7 +35,17 @@ class Twilio::CallbackController < ApplicationController
       :ExternalUserId,
       :ParentExternalUserId,
       :ProfileUsername,
-      :Username
+      :Username,
+      :ReferralBody,
+      :ReferralHeadline,
+      :ReferralSourceId,
+      :ReferralSourceType,
+      :ReferralSourceUrl,
+      :ReferralMediaId,
+      :ReferralMediaContentType,
+      :ReferralMediaUrl,
+      :ReferralNumMedia,
+      :ReferralCtwaClid
     )
   end
 end

app/dashboards/account_dashboard.rb

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

app/drops/contact_drop.rb

@@ -12,7 +12,7 @@ class ContactDrop < BaseDrop
   end
 
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize)
   end
 
   def last_name

app/drops/user_drop.rb

@@ -12,7 +12,7 @@ class UserDrop < BaseDrop
   end
 
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize)
   end
 
   def last_name

app/finders/conversation_finder.rb

@@ -12,6 +12,7 @@ class ConversationFinder
     'waiting_since_asc' => %w[sort_on_waiting_since asc],
     'waiting_since_desc' => %w[sort_on_waiting_since desc],
     'priority_desc_created_at_asc' => %w[sort_on_priority_created_at desc],
+    'unread' => %w[sort_on_unread desc],
 
     # To be removed in v3.5.0
     'latest' => %w[sort_on_last_activity_at desc],
@@ -40,7 +41,7 @@ class ConversationFinder
   def perform
     set_up
 
-    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
+    mine_count, unassigned_count, all_count = set_count_for_all_conversations
     assigned_count = all_count - unassigned_count
 
     filter_by_assignee_type
@@ -184,6 +185,17 @@ class ConversationFinder
   end
 
   def set_count_for_all_conversations
+    return legacy_count_for_all_conversations if @conversations.limit_value || @conversations.offset_value || @conversations.eager_loading?
+
+    counts = @conversations.unscope(:order).pick(
+      Arel.sql("COUNT(*) FILTER (WHERE assignee_id = #{current_user.id})"),
+      Arel.sql('COUNT(*) FILTER (WHERE assignee_id IS NULL)'),
+      Arel.sql('COUNT(*)')
+    )
+    counts || [0, 0, 0]
+  end
+
+  def legacy_count_for_all_conversations
     [
       @conversations.assigned_to(current_user).count,
       @conversations.unassigned.count,

app/helpers/instagram/integration_helper.rb

@@ -4,21 +4,21 @@ module Instagram::IntegrationHelper
   # Generates a signed JWT token for Instagram integration
   #
   # @param account_id [Integer] The account ID to encode in the token
+  # @param return_to [String, nil] Optional onboarding return hint
   # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_instagram_token(account_id)
+  def generate_instagram_token(account_id, return_to = nil)
     return if client_secret.blank?
 
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
   rescue StandardError => e
     Rails.logger.error("Failed to generate Instagram token: #{e.message}")
     nil
   end
 
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
+  def token_payload(account_id, return_to = nil)
+    payload = { sub: account_id, iat: Time.current.to_i }
+    payload[:return_to] = return_to if return_to.present?
+    payload
   end
 
   # Verifies and decodes a Instagram JWT token
@@ -28,7 +28,14 @@ module Instagram::IntegrationHelper
   def verify_instagram_token(token)
     return if token.blank? || client_secret.blank?
 
-    decode_token(token, client_secret)
+    decode_token(token, client_secret)&.dig('sub')
+  end
+
+  # Reads the onboarding return hint from a Instagram JWT token, if present.
+  def instagram_token_return_to(token)
+    return if token.blank? || client_secret.blank?
+
+    decode_token(token, client_secret)&.dig('return_to')
   end
 
   private
@@ -41,7 +48,7 @@ module Instagram::IntegrationHelper
     JWT.decode(token, secret, true, {
                  algorithm: 'HS256',
                  verify_expiration: true
-               }).first['sub']
+               }).first
   rescue StandardError => e
     Rails.logger.error("Unexpected error verifying Instagram token: #{e.message}")
     nil

app/helpers/portal_helper.rb

@@ -17,15 +17,11 @@ module PortalHelper
     uri.to_s
   end
 
-  def generate_portal_bg_color(portal_color, theme)
+  def generate_portal_bg(portal_color, theme)
     base_color = theme == 'dark' ? 'black' : 'white'
     "color-mix(in srgb, #{portal_color} 20%, #{base_color})"
   end
 
-  def generate_portal_bg(portal_color, theme)
-    generate_portal_bg_color(portal_color, theme)
-  end
-
   def generate_gradient_to_bottom(theme)
     base_color = theme == 'dark' ? '#151718' : 'white'
     "linear-gradient(to bottom, transparent, #{base_color})"
@@ -41,13 +37,24 @@ module PortalHelper
     language_map[locale] || locale
   end
 
+  def html_lang_attribute(locale)
+    locale.to_s.tr('_', '-')
+  end
+
   def theme_query_string(theme)
     theme.present? && theme != 'system' ? "?theme=#{theme}" : ''
   end
 
+  def portal_query_string(theme, is_plain_layout_enabled)
+    query_params = {}
+    query_params[:theme] = theme if theme.present? && theme != 'system'
+    query_params[:show_plain_layout] = true if is_plain_layout_enabled
+    query_params.present? ? "?#{query_params.to_query}" : ''
+  end
+
   def generate_home_link(portal_slug, portal_locale, theme, is_plain_layout_enabled)
     if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{portal_locale}#{theme_query_string(theme)}"
+      "/hc/#{portal_slug}/#{portal_locale}#{portal_query_string(theme, is_plain_layout_enabled)}"
     else
       "/hc/#{portal_slug}/#{portal_locale}"
     end
@@ -61,7 +68,7 @@ module PortalHelper
     is_plain_layout_enabled = params[:is_plain_layout_enabled]
 
     if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{theme_query_string(theme)}"
+      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
     else
       "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}"
     end
@@ -69,7 +76,7 @@ module PortalHelper
 
   def generate_article_link(portal_slug, article_slug, theme, is_plain_layout_enabled)
     if is_plain_layout_enabled
-      "/hc/#{portal_slug}/articles/#{article_slug}#{theme_query_string(theme)}"
+      "/hc/#{portal_slug}/articles/#{article_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
     else
       "/hc/#{portal_slug}/articles/#{article_slug}"
     end
@@ -90,6 +97,18 @@ module PortalHelper
     ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
   end
 
+  # Renders a stored category icon: a bare ri icon name (e.g. `vip-crown-2-fill/line`) saved color, or a plain emoji character.
+  def render_emoji_or_icon(value, color = nil)
+    return '' if value.blank?
+
+    # Emojis are non-ascii; bare icon names match this safe charset.
+    return ERB::Util.html_escape(value) unless value.match?(/\A[a-z][a-z0-9-]*\z/)
+
+    icon_class = value.start_with?('i-') ? value : "i-ri-#{value}"
+    style = "color: #{color};" if color.to_s.match?(/\A#\h{3,8}\z/)
+    tag.span(class: icon_class, style: style, 'aria-hidden': true)
+  end
+
   def thumbnail_bg_color(username)
     colors = ['#6D95BA', '#A4C3C3', '#E19191']
     return colors.sample if username.blank?

app/helpers/super_admin/features.yml

@@ -34,6 +34,12 @@ disable_branding:
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-sailbot-fill'
   enterprise: true
+voice_calls:
+  name: 'Voice Calls'
+  description: 'Enable voice calling capabilities for your agents and customers.'
+  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
+  icon: 'icon-voice-line'
+  enterprise: true
 
 # ------- Product Features ------- #
 help_center:

app/helpers/tiktok/integration_helper.rb

@@ -2,11 +2,12 @@ module Tiktok::IntegrationHelper
   # Generates a signed JWT token for Tiktok integration
   #
   # @param account_id [Integer] The account ID to encode in the token
+  # @param return_to [String, nil] Optional onboarding return hint
   # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_tiktok_token(account_id)
+  def generate_tiktok_token(account_id, return_to = nil)
     return if client_secret.blank?
 
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
   rescue StandardError => e
     Rails.logger.error("Failed to generate TikTok token: #{e.message}")
     nil
@@ -19,7 +20,14 @@ module Tiktok::IntegrationHelper
   def verify_tiktok_token(token)
     return if token.blank? || client_secret.blank?
 
-    decode_token(token, client_secret)
+    decode_token(token, client_secret)&.dig('sub')
+  end
+
+  # Reads the onboarding return hint from a Tiktok JWT token, if present.
+  def tiktok_token_return_to(token)
+    return if token.blank? || client_secret.blank?
+
+    decode_token(token, client_secret)&.dig('return_to')
   end
 
   private
@@ -28,18 +36,17 @@ module Tiktok::IntegrationHelper
     @client_secret ||= GlobalConfigService.load('TIKTOK_APP_SECRET', nil)
   end
 
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
+  def token_payload(account_id, return_to = nil)
+    payload = { sub: account_id, iat: Time.current.to_i }
+    payload[:return_to] = return_to if return_to.present?
+    payload
   end
 
   def decode_token(token, secret)
     JWT.decode(token, secret, true, {
                  algorithm: 'HS256',
                  verify_expiration: true
-               }).first['sub']
+               }).first
   rescue StandardError => e
     Rails.logger.error("Unexpected error verifying Tiktok token: #{e.message}")
     nil

app/javascript/dashboard/api/auth.js

@@ -106,4 +106,10 @@ export default {
     const urlData = endPoints('resetAccessToken');
     return axios.post(urlData.url);
   },
+  getSessions() {
+    return axios.get('/api/v1/profile/sessions');
+  },
+  revokeSession(id) {
+    return axios.delete(`/api/v1/profile/sessions/${id}`);
+  },
 };

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

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

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

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

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -48,6 +48,12 @@ class TwilioVoiceClient extends EventTarget {
     return !!this.activeConnection;
   }
 
+  setMuted(shouldMute) {
+    if (!this.activeConnection) return false;
+    this.activeConnection.mute(shouldMute);
+    return shouldMute;
+  }
+
   endClientCall() {
     if (this.activeConnection) {
       this.activeConnection.disconnect();

app/javascript/dashboard/api/contacts.js

@@ -40,6 +40,12 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/conversations`, { params });
   }
 
+  getAttachments(contactId, page = 1) {
+    return axios.get(`${this.url}/${contactId}/attachments`, {
+      params: { page },
+    });
+  }
+
   getContactableInboxes(contactId) {
     return axios.get(`${this.url}/${contactId}/contactable_inboxes`);
   }

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

@@ -16,6 +16,7 @@ class ArticlesAPI extends PortalsAPI {
     authorId,
     categorySlug,
     sort,
+    query,
   }) {
     const url = getArticleSearchURL({
       pageNumber,
@@ -25,6 +26,7 @@ class ArticlesAPI extends PortalsAPI {
       authorId,
       categorySlug,
       sort,
+      query,
       host: this.url,
     });
 

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

@@ -12,6 +12,7 @@ export const buildCreatePayload = ({
   bccEmails = '',
   toEmails = '',
   templateParams,
+  isVoiceMessage = false,
 }) => {
   let payload;
   if (files && files.length !== 0) {
@@ -33,6 +34,9 @@ export const buildCreatePayload = ({
     if (contentAttributes) {
       payload.append('content_attributes', JSON.stringify(contentAttributes));
     }
+    if (isVoiceMessage) {
+      payload.append('is_voice_message', true);
+    }
   } else {
     payload = {
       content: message,
@@ -64,6 +68,7 @@ class MessageApi extends ApiClient {
     bccEmails = '',
     toEmails = '',
     templateParams,
+    isVoiceMessage = false,
   }) {
     return axios({
       method: 'post',
@@ -78,6 +83,7 @@ class MessageApi extends ApiClient {
         bccEmails,
         toEmails,
         templateParams,
+        isVoiceMessage,
       }),
     });
   }

app/javascript/dashboard/api/inboxes.js

@@ -60,6 +60,12 @@ class Inboxes extends CacheEnabledApiClient {
   disableWhatsappCalling(inboxId) {
     return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
   }
+
+  setInboundCalls(inboxId, enabled) {
+    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
+      inbound_calls_enabled: enabled,
+    });
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/onboarding.js

@@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class OnboardingAPI extends ApiClient {
+  constructor() {
+    super('onboarding', { accountScoped: true });
+  }
+
+  update(data) {
+    return axios.patch(this.url, data);
+  }
+
+  getHelpCenterGeneration() {
+    return axios.get(`${this.url}/help_center_generation`);
+  }
+}
+
+export default new OnboardingAPI();

app/javascript/dashboard/api/reports.js

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

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

@@ -83,5 +83,29 @@ describe('#ConversationAPI', () => {
         template_params: undefined,
       });
     });
+
+    it('appends is_voice_message when isVoiceMessage is true', () => {
+      const formPayload = buildCreatePayload({
+        message: 'voice message',
+        echoId: 42,
+        isPrivate: false,
+        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
+        isVoiceMessage: true,
+      });
+      expect(formPayload).toBeInstanceOf(FormData);
+      expect(formPayload.get('is_voice_message')).toEqual('true');
+    });
+
+    it('does not append is_voice_message when isVoiceMessage is false', () => {
+      const formPayload = buildCreatePayload({
+        message: 'regular audio',
+        echoId: 43,
+        isPrivate: false,
+        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
+        isVoiceMessage: false,
+      });
+      expect(formPayload).toBeInstanceOf(FormData);
+      expect(formPayload.get('is_voice_message')).toBeNull();
+    });
   });
 });

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

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

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -145,6 +145,12 @@
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
     --white-alpha: 255, 255, 255, 0.8;
+
+    // Voice call widget - light mode
+    --call-widget: 33, 34, 38, 0.95;
+    --call-widget-border: 255, 255, 255, 0.1;
+    --call-widget-text: 237, 238, 240, 1;
+    --call-widget-sub-text: 173, 177, 184, 1;
   }
 
   .dark {
@@ -291,6 +297,12 @@
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 255, 255, 255, 0;
     --white-alpha: 255, 255, 255, 0.1;
+
+    // Voice call widget - dark mode
+    --call-widget: 50, 53, 61, 1;
+    --call-widget-border: 255, 255, 255, 0.07;
+    --call-widget-text: 237, 238, 240, 1;
+    --call-widget-sub-text: 173, 177, 184, 1;
   }
 }
 // NEXT COLORS END

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

@@ -49,6 +49,7 @@ const emit = defineEmits(['edit', 'delete']);
 const { t } = useI18n();
 
 const STATUS_COMPLETED = 'completed';
+const STATUS_PROCESSING = 'processing';
 
 const { formatMessage } = useMessageFormatter();
 
@@ -68,9 +69,15 @@ const campaignStatus = computed(() => {
       : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
   }
 
-  return props.status === STATUS_COMPLETED
-    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
-    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+  if (props.status === STATUS_COMPLETED) {
+    return t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED');
+  }
+
+  if (props.status === STATUS_PROCESSING) {
+    return t('CAMPAIGN.SMS.CARD.STATUS.PROCESSING');
+  }
+
+  return t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
 });
 
 const inboxName = computed(() => props.inbox?.name || '');

app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue

@@ -46,9 +46,8 @@ const formattedLastActivityAt = computed(() => {
         :src="avatarSource"
         class="shrink-0"
         :name="name"
-        :size="48"
+        :size="42"
         hide-offline-status
-        rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1 min-w-0">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">

app/javascript/dashboard/components-next/Companies/CompanyCreateDialog.vue

@@ -26,6 +26,13 @@ const resetForm = () => {
   form.description = '';
 };
 
+const open = (company = {}) => {
+  form.name = company.name || '';
+  form.domain = company.domain || '';
+  form.description = company.description || '';
+  dialogRef.value?.open();
+};
+
 const handleConfirm = () => {
   if (isFormInvalid.value) return;
 
@@ -45,7 +52,7 @@ const onSuccess = () => {
   closeDialog();
 };
 
-defineExpose({ dialogRef, onSuccess });
+defineExpose({ dialogRef, onSuccess, open });
 </script>
 
 <template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue

@@ -141,7 +141,6 @@ const handleUpdateCompany = async () => {
         :src="avatarSource"
         :size="72"
         :allow-upload="!isAvatarBusy"
-        rounded-full
         hide-offline-status
         @upload="handleAvatarUpload"
         @delete="handleAvatarDelete"

app/javascript/dashboard/components-next/Companies/CompanySelector.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDebounceFn } from '@vueuse/core';
+import CompanyAPI from 'dashboard/api/companies';
+import { useAlert } from 'dashboard/composables';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import CompanyCreateDialog from 'dashboard/components-next/Companies/CompanyCreateDialog.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  // Name of the linked company, so the label shows before the list is loaded.
+  selectedName: {
+    type: String,
+    default: '',
+  },
+  isDetailsView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const { t } = useI18n();
+
+const CREATE_PREFIX = 'create:';
+
+const options = ref([]);
+const searchQuery = ref('');
+const createDialogRef = ref(null);
+const isCreatingCompany = ref(false);
+
+const toOption = company => ({ label: company.name, value: company.id });
+
+const createOption = computed(() => {
+  const name = searchQuery.value.trim();
+  if (!name) return null;
+
+  const exists = options.value.some(
+    option => option.label.toLowerCase() === name.toLowerCase()
+  );
+  if (exists) return null;
+
+  return {
+    label: t('COMPANIES.SELECTOR.CREATE_OPTION', { name }),
+    value: `${CREATE_PREFIX}${name}`,
+  };
+});
+
+const comboboxOptions = computed(() => {
+  const list = [...options.value];
+
+  // Keep the linked company visible even when it is not in the loaded results.
+  if (
+    props.modelValue &&
+    props.selectedName &&
+    !list.some(option => option.value === Number(props.modelValue))
+  ) {
+    list.unshift({
+      label: props.selectedName,
+      value: Number(props.modelValue),
+    });
+  }
+
+  if (createOption.value) list.push(createOption.value);
+  return list;
+});
+
+const fetchCompanies = async query => {
+  try {
+    const {
+      data: { payload },
+    } = query
+      ? await CompanyAPI.search(query)
+      : await CompanyAPI.get({ page: 1 });
+    options.value = (payload || []).map(toOption);
+  } catch {
+    options.value = [];
+  }
+};
+
+// Fetch lazily, only when the dropdown opens, instead of on mount.
+const handleOpen = () => {
+  searchQuery.value = '';
+  fetchCompanies('');
+};
+
+const handleSearch = useDebounceFn(query => {
+  searchQuery.value = query?.trim() || '';
+  fetchCompanies(searchQuery.value);
+}, 300);
+
+// Open the create dialog (prefilled with the typed name) so the user can add
+// domain/description before saving, instead of creating with just a name.
+const createCompany = async company => {
+  isCreatingCompany.value = true;
+  try {
+    const {
+      data: { payload },
+    } = await CompanyAPI.create({ company });
+    createDialogRef.value?.onSuccess();
+    emit('select', { id: payload.id, name: payload.name });
+    useAlert(t('COMPANIES.CREATE.MESSAGES.SUCCESS'));
+  } catch {
+    useAlert(t('COMPANIES.CREATE.MESSAGES.ERROR'));
+  } finally {
+    isCreatingCompany.value = false;
+  }
+};
+
+const handleSelect = value => {
+  if (typeof value === 'string' && value.startsWith(CREATE_PREFIX)) {
+    createDialogRef.value?.open({ name: value.slice(CREATE_PREFIX.length) });
+    // Drop the transient "Add …" option so the button label doesn't stick to
+    // it if the dialog is dismissed without creating.
+    searchQuery.value = '';
+    return;
+  }
+
+  const id = value ? Number(value) : '';
+  const selected = comboboxOptions.value.find(option => option.value === id);
+  emit('select', { id, name: selected?.label || '' });
+};
+</script>
+
+<template>
+  <ComboBox
+    :model-value="modelValue"
+    :options="comboboxOptions"
+    :display-label="selectedName"
+    :placeholder="t('COMPANIES.SELECTOR.PLACEHOLDER')"
+    :search-placeholder="t('COMPANIES.SEARCH_PLACEHOLDER')"
+    use-api-results
+    class="[&>div>button]:h-8 [&>div>div_ul]:max-h-56"
+    :class="{
+      '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
+        !isDetailsView,
+      '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
+    }"
+    @open="handleOpen"
+    @search="handleSearch"
+    @update:model-value="handleSelect"
+  />
+  <CompanyCreateDialog
+    ref="createDialogRef"
+    :is-loading="isCreatingCompany"
+    @create="createCompany"
+  />
+</template>

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

@@ -15,6 +15,7 @@ const props = defineProps({
   id: { type: Number, required: true },
   name: { type: String, default: '' },
   email: { type: String, default: '' },
+  companyId: { type: [Number, String], default: '' },
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
@@ -41,6 +42,7 @@ const getInitialContactData = () => ({
   id: props.id,
   name: props.name,
   email: props.email,
+  companyId: props.companyId,
   phoneNumber: props.phoneNumber,
   additionalAttributes: props.additionalAttributes,
 });
@@ -124,10 +126,9 @@ const handleAvatarHover = isHovered => {
           <Avatar
             :name="name"
             :src="thumbnail"
-            :size="48"
+            :size="42"
             :status="availabilityStatus"
             hide-offline-status
-            rounded-full
           >
             <template v-if="selectable" #overlay="{ size }">
               <label

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

@@ -128,9 +128,14 @@ const closeMobileSidebar = () => {
     <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
     >
-      <slot name="sidebar" />
+      <div class="shrink-0">
+        <slot name="sidebarHeader" />
+      </div>
+      <div class="flex-1 min-h-0 overflow-y-auto pb-6 pt-3">
+        <slot name="sidebar" />
+      </div>
     </div>
 
     <!-- Mobile sidebar container -->
@@ -179,9 +184,14 @@ const closeMobileSidebar = () => {
         <div
           v-if="isContactSidebarOpen"
           id="contact-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
         >
-          <slot name="sidebar" />
+          <div class="shrink-0">
+            <slot name="sidebarHeader" />
+          </div>
+          <div class="flex-1 min-h-0 overflow-y-auto pb-6 pt-3">
+            <slot name="sidebar" />
+          </div>
         </div>
       </Transition>
     </div>

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

@@ -5,8 +5,11 @@ import { required, email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import CompanySelector from 'dashboard/components-next/Companies/CompanySelector.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
 
@@ -28,6 +31,7 @@ const props = defineProps({
 const emit = defineEmits(['update']);
 
 const { t } = useI18n();
+const { currentAccount, isCloudFeatureEnabled } = useAccount();
 
 const FORM_CONFIG = {
   FIRST_NAME: { field: 'firstName' },
@@ -54,6 +58,7 @@ const defaultState = {
   id: 0,
   name: '',
   email: '',
+  companyId: '',
   firstName: '',
   lastName: '',
   phoneNumber: '',
@@ -85,6 +90,23 @@ const validationRules = {
 const v$ = useVuelidate(validationRules, state);
 
 const isFormInvalid = computed(() => v$.value.$invalid);
+const hasCompaniesFeature = computed(
+  () =>
+    currentAccount.value?.id && isCloudFeatureEnabled(FEATURE_FLAGS.COMPANIES)
+);
+const showCompanySelector = computed(
+  () =>
+    hasCompaniesFeature.value &&
+    (Boolean(state.companyId) || !state.additionalAttributes.companyName)
+);
+
+const emitContactUpdate = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  const { firstName, lastName, ...stateWithoutNames } = state;
+  emit('update', stateWithoutNames);
+};
 
 const prepareStateBasedOnProps = () => {
   if (props.isNewContact) {
@@ -96,6 +118,7 @@ const prepareStateBasedOnProps = () => {
     name = '',
     email: emailAddress,
     phoneNumber,
+    companyId = '',
     additionalAttributes = {},
   } = props.contactData || {};
   const { firstName, lastName } = splitName(name || '');
@@ -115,6 +138,7 @@ const prepareStateBasedOnProps = () => {
   Object.assign(state, {
     id,
     name,
+    companyId: companyId || '',
     firstName,
     lastName,
     email: emailAddress,
@@ -200,11 +224,7 @@ const getFormBinding = key => {
         }
       }
 
-      const isFormValid = await v$.value.$validate();
-      if (isFormValid) {
-        const { firstName, lastName, ...stateWithoutNames } = state;
-        emit('update', stateWithoutNames);
-      }
+      await emitContactUpdate();
     },
   });
 };
@@ -221,6 +241,12 @@ const handleCountrySelection = value => {
   emit('update', state);
 };
 
+const handleCompanySelection = async ({ id, name }) => {
+  state.companyId = id || '';
+  state.additionalAttributes.companyName = name || '';
+  await emitContactUpdate();
+};
+
 const resetValidation = () => {
   v$.value.$reset();
 };
@@ -273,6 +299,13 @@ defineExpose({
             :placeholder="item.placeholder"
             :show-border="isDetailsView"
           />
+          <CompanySelector
+            v-else-if="item.key === 'COMPANY_NAME' && showCompanySelector"
+            :model-value="state.companyId"
+            :selected-name="state.additionalAttributes.companyName"
+            :is-details-view="isDetailsView"
+            @select="handleCompanySelection"
+          />
           <Input
             v-else
             v-model="getFormBinding(item.key).value"

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue

@@ -1,34 +1,48 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 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 { usePolicy } from 'dashboard/composables/usePolicy';
 
 const emit = defineEmits(['add', 'import', 'export']);
 
 const { t } = useI18n();
+const { checkPermissions } = usePolicy();
 
-const contactMenuItems = [
+const contactMenuItems = computed(() => [
   {
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
     action: 'add',
     value: 'add',
     icon: 'i-lucide-plus',
   },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
-    action: 'export',
-    value: 'export',
-    icon: 'i-lucide-upload',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
-    action: 'import',
-    value: 'import',
-    icon: 'i-lucide-download',
-  },
-];
+  ...(checkPermissions(['administrator', 'contact_manage'])
+    ? [
+        {
+          label: t(
+            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'
+          ),
+          action: 'export',
+          value: 'export',
+          icon: 'i-lucide-upload',
+        },
+      ]
+    : []),
+  ...(checkPermissions(['administrator', 'contact_manage'])
+    ? [
+        {
+          label: t(
+            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'
+          ),
+          action: 'import',
+          value: 'import',
+          icon: 'i-lucide-download',
+        },
+      ]
+    : []),
+]);
 const showActionsDropdown = ref(false);
 
 const handleContactAction = ({ action }) => {

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -108,7 +108,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>
 
 <template>
-  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6">
     <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
       <ContactCustomAttributeItem
         v-for="attribute in usedAttributes"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -36,7 +36,7 @@ const contactConversations = computed(() =>
   </div>
   <div
     v-else-if="contactConversations.length > 0"
-    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
   >
     <ConversationCard
       v-for="conversation in contactConversations"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMedia.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import {
+  MEDIA_TYPES,
+  NON_FILE_TYPES,
+} from 'dashboard/components-next/message/constants';
+
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+import Media from 'dashboard/components-next/SharedAttachments/Media.vue';
+import Files from 'dashboard/components-next/SharedAttachments/Files.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const MEDIA_PEEK_LIMIT = 12;
+const FILES_PEEK_LIMIT = 6;
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const attachmentsByContact = useMapGetter('contacts/getContactAttachments');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const attachments = computed(() =>
+  attachmentsByContact.value(route.params.contactId)
+);
+const isFetching = computed(() => uiFlags.value.isFetchingAttachments);
+
+const hasContent = computed(() =>
+  attachments.value.some(
+    a => a.data_url && !NON_FILE_TYPES.includes(a.file_type)
+  )
+);
+
+const mediaAttachments = computed(() =>
+  attachments.value
+    .filter(a => MEDIA_TYPES.includes(a.file_type) && a.data_url)
+    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
+);
+
+const showGallery = ref(false);
+const selectedAttachment = ref(null);
+
+const onMediaSelect = attachment => {
+  selectedAttachment.value = attachment;
+  showGallery.value = true;
+};
+
+const onFileSelect = attachment => {
+  if (attachment.data_url) {
+    window.open(attachment.data_url, '_blank', 'noopener,noreferrer');
+  }
+};
+
+const onJumpToMessage = attachment => {
+  if (!attachment.conversation_id || !attachment.message_id) return;
+  router.push({
+    name: 'inbox_conversation',
+    params: {
+      accountId: route.params.accountId,
+      conversation_id: attachment.conversation_id,
+    },
+    query: { messageId: attachment.message_id },
+  });
+};
+
+onMounted(() => {
+  store.dispatch('contacts/fetchAttachments', route.params.contactId);
+});
+</script>
+
+<template>
+  <div class="px-6">
+    <div v-if="isFetching" class="flex justify-center p-3">
+      <Spinner class="size-5" />
+    </div>
+    <p v-else-if="!hasContent" class="p-3 text-sm text-center text-n-slate-11">
+      {{ t('CONVERSATION_SIDEBAR.SHARED_FILES.EMPTY') }}
+    </p>
+    <div v-else class="flex flex-col gap-5">
+      <Media
+        :attachments="attachments"
+        :peek-limit="MEDIA_PEEK_LIMIT"
+        show-jump-to-message
+        @select="onMediaSelect"
+        @jump-to-message="onJumpToMessage"
+      />
+      <Files
+        :attachments="attachments"
+        :peek-limit="FILES_PEEK_LIMIT"
+        show-jump-to-message
+        @select="onFileSelect"
+        @jump-to-message="onJumpToMessage"
+      />
+    </div>
+    <GalleryView
+      v-if="showGallery && selectedAttachment"
+      v-model:show="showGallery"
+      :attachment="selectedAttachment"
+      :all-attachments="mediaAttachments"
+      auto-play
+      @close="showGallery = false"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue

@@ -103,7 +103,7 @@ const onMergeContacts = async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 px-6 py-6">
+  <div class="flex flex-col gap-8 px-6">
     <div class="flex flex-col gap-2">
       <h4 class="text-base text-n-slate-12">
         {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -55,7 +55,7 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 py-6">
+  <div class="flex flex-col gap-6">
     <Editor
       v-model="state.message"
       :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -92,6 +92,7 @@ const handleAvatarHover = (id, isHovered) => {
         :id="contact.id"
         :name="contact.name"
         :email="contact.email"
+        :company-id="contact.companyId"
         :thumbnail="contact.thumbnail"
         :phone-number="contact.phoneNumber"
         :additional-attributes="contact.additionalAttributes"

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

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

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

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

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

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

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

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

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

@@ -20,6 +20,7 @@ const ICON_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
   [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
   [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.REJECTED]: 'i-ph-phone-x',
 };
 
 const COLOR_MAP = {
@@ -28,13 +29,18 @@ const COLOR_MAP = {
   [VOICE_CALL_STATUS.COMPLETED]: 'text-n-slate-11',
   [VOICE_CALL_STATUS.NO_ANSWER]: 'text-n-ruby-9',
   [VOICE_CALL_STATUS.FAILED]: 'text-n-ruby-9',
+  [VOICE_CALL_STATUS.REJECTED]: 'text-n-ruby-9',
 };
 
 const isOutbound = computed(
   () => props.direction === VOICE_CALL_DIRECTION.OUTBOUND
 );
 const isFailed = computed(() =>
-  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(props.status)
+  [
+    VOICE_CALL_STATUS.NO_ANSWER,
+    VOICE_CALL_STATUS.FAILED,
+    VOICE_CALL_STATUS.REJECTED,
+  ].includes(props.status)
 );
 
 const labelKey = computed(() => {

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

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

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

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

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

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

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

@@ -13,6 +13,7 @@ import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -131,7 +132,7 @@ const statusText = computed(() => {
 
 const categoryName = computed(() => {
   if (props.category?.slug) {
-    return `${props.category.icon} ${props.category.name}`;
+    return props.category.name;
   }
   return t(
     'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
@@ -209,9 +210,9 @@ const handleClick = id => {
         </div>
       </div>
     </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-4">
-        <div class="flex items-center gap-1">
+    <div class="flex items-center justify-between w-full gap-2 sm:gap-4">
+      <div class="flex items-center min-w-0 gap-2 sm:gap-4">
+        <div class="flex items-center min-w-0 gap-1">
           <Avatar
             :name="authorName"
             :src="authorThumbnailSrc"
@@ -222,11 +223,17 @@ const handleClick = id => {
             {{ authorName || '-' }}
           </span>
         </div>
-        <span class="block text-sm whitespace-nowrap text-n-slate-11">
-          {{ categoryName }}
+        <span class="flex items-center min-w-0 gap-1 text-sm text-n-slate-11">
+          <EmojiIcon
+            v-if="category?.icon"
+            :value="category.icon"
+            :color="category.icon_color"
+            class="flex-shrink-0 size-4"
+          />
+          <span class="truncate">{{ categoryName }}</span>
         </span>
         <div
-          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap shrink-0"
         >
           <Icon icon="i-lucide-eye" class="size-4" />
           <span class="text-sm">
@@ -238,7 +245,7 @@ const handleClick = id => {
           </span>
         </div>
       </div>
-      <span class="text-sm text-n-slate-11 line-clamp-1">
+      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
         {{ lastUpdatedAt }}
       </span>
     </div>

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

@@ -6,6 +6,7 @@ import { useToggle } from '@vueuse/core';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   id: {
@@ -20,6 +21,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  iconColor: {
+    type: String,
+    default: '',
+  },
   description: {
     type: String,
     required: true,
@@ -55,10 +60,6 @@ const categoryMenuItems = [
   },
 ];
 
-const categoryTitleWithIcon = computed(() => {
-  return `${props.icon} ${props.title}`;
-});
-
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -83,10 +84,16 @@ const handleAction = ({ action, value }) => {
       <div class="flex justify-between w-full gap-2">
         <div class="flex items-center justify-start w-full min-w-0 gap-2">
           <span
-            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
+            class="flex items-center gap-1.5 text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
             @click="handleClick(slug)"
           >
-            {{ categoryTitleWithIcon }}
+            <EmojiIcon
+              v-if="icon"
+              :value="icon"
+              :color="iconColor"
+              class="shrink-0 size-4"
+            />
+            <span class="truncate">{{ title }}</span>
           </span>
           <span
             class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"

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

@@ -67,11 +67,11 @@ const togglePortalSwitcher = () => {
         >
           <span
             v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
+            class="min-w-0 text-xl font-medium truncate text-n-slate-12"
           >
             {{ activePortalName }}
           </span>
-          <div v-if="activePortalName" class="relative group">
+          <div v-if="activePortalName" class="relative shrink-0 group">
             <OnClickOutside @trigger="showPortalSwitcher = false">
               <Button
                 icon="i-lucide-chevron-down"
@@ -91,6 +91,9 @@ const togglePortalSwitcher = () => {
             </OnClickOutside>
             <CreatePortalDialog ref="createPortalDialogRef" />
           </div>
+          <div class="flex justify-end min-w-0 grow">
+            <slot name="title-actions" />
+          </div>
         </div>
         <slot name="header-actions" />
       </div>

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

@@ -53,6 +53,9 @@ const localeMenuLabels = computed(() => ({
   'publish-locale': t(
     'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
   ),
+  'customize-content': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
+  ),
   delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
 
@@ -128,7 +131,7 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showDropdownMenu"
             :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
             @action="handleAction"
           />
         </div>

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

@@ -8,6 +8,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
 
 const props = defineProps({
@@ -107,10 +108,11 @@ const selectedCategory = computed(() => {
 const categoryList = computed(() => {
   return (
     categories.value
-      .map(({ name, id, icon }) => ({
+      .map(({ name, id, icon, icon_color: iconColor }) => ({
         label: name,
         value: id,
         emoji: icon,
+        iconColor,
         isSelected: isNewArticle.value
           ? id === (selectedCategoryId.value || selectedCategory.value?.id)
           : id === props.article?.category?.id,
@@ -202,10 +204,6 @@ onMounted(() => {
     <div class="relative">
       <OnClickOutside @trigger="openCategoryList = false">
         <Button
-          :label="
-            selectedCategory?.name ||
-            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
-          "
           :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
           color="slate"
@@ -213,12 +211,20 @@ onMounted(() => {
           @click="openCategoryList = !openCategoryList"
         >
           <span
-            v-if="selectedCategory"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+            class="flex items-center gap-1.5 min-w-0 text-sm text-n-slate-12 hover:text-n-slate-11"
           >
-            {{
-              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
-            }}
+            <EmojiIcon
+              v-if="selectedCategory?.icon"
+              :value="selectedCategory.icon"
+              :color="selectedCategory.icon_color"
+              class="flex-shrink-0 size-4"
+            />
+            <span class="truncate">
+              {{
+                selectedCategory?.name ||
+                t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
+              }}
+            </span>
           </span>
         </Button>
         <DropdownMenu

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

@@ -13,6 +13,7 @@ import {
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   categories: {
@@ -63,18 +64,15 @@ const activeTabIndex = computed(() => {
   return tabs.value.findIndex(tab => tab.value === tabParam);
 });
 
-const activeCategoryName = computed(() => {
-  const activeCategory = props.categories.find(
-    category => category.slug === route.params.categorySlug
-  );
+const activeCategory = computed(() =>
+  props.categories.find(category => category.slug === route.params.categorySlug)
+);
 
-  if (activeCategory) {
-    const { icon, name } = activeCategory;
-    return `${icon} ${name}`;
-  }
-
-  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
-});
+const activeCategoryName = computed(
+  () =>
+    activeCategory.value?.name ||
+    t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL')
+);
 
 const activeLocaleName = computed(() => {
   return props.allowedLocales.find(
@@ -94,6 +92,7 @@ const categoryMenuItems = computed(() => {
     value: category.slug,
     action: 'filter',
     emoji: category.icon,
+    iconColor: category.icon_color,
   }));
 
   const hasCategorySlug = !!route.params.categorySlug;
@@ -167,14 +166,23 @@ const handleTabChange = value => {
         <div v-if="hasCategoryMenuItems" class="relative group">
           <OnClickOutside @trigger="isCategoryMenuOpen = false">
             <Button
-              :label="activeCategoryName"
               icon="i-lucide-chevron-down"
               size="sm"
               color="slate"
               trailing-icon
               class="max-w-48"
               @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-            />
+            >
+              <span class="flex items-center gap-1.5 min-w-0">
+                <EmojiIcon
+                  v-if="activeCategory?.icon"
+                  :value="activeCategory.icon"
+                  :color="activeCategory.icon_color"
+                  class="flex-shrink-0 size-4"
+                />
+                <span class="truncate">{{ activeCategoryName }}</span>
+              </span>
+            </Button>
 
             <DropdownMenu
               v-if="isCategoryMenuOpen"

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

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

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

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
 import { 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 { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAlert } from 'dashboard/composables';
@@ -18,6 +19,7 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
 import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import BulkTranslateDialog from './BulkTranslateDialog.vue';
@@ -49,7 +51,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['pageChange', 'fetchPortal', 'refreshArticles']);
+const emit = defineEmits([
+  'pageChange',
+  'fetchPortal',
+  'refreshArticles',
+  'search',
+]);
 
 const router = useRouter();
 const route = useRoute();
@@ -63,8 +70,12 @@ const isFeatureEnabledonAccount = useMapGetter(
 );
 
 const selectedArticleIds = ref(new Set());
+const isArticleDragging = ref(false);
 const deleteConfirmDialogRef = ref(null);
 const isCategoryMenuOpen = ref(false);
+const searchQuery = ref(route.query.search || '');
+
+const debouncedSearch = debounce(() => emit('search', searchQuery.value), 500);
 
 const { isEnterprise } = useConfig();
 
@@ -122,6 +133,7 @@ const updateRoute = newParams => {
       categorySlug: newParams.categorySlug ?? categorySlug,
       ...newParams,
     },
+    query: route.query,
   });
 };
 
@@ -137,6 +149,8 @@ const articlesCount = computed(() => {
   return Number(countMap[tab] || countMap['']);
 });
 
+const totalPages = computed(() => Math.ceil(articlesCount.value / 25) || 1);
+
 const showArticleHeaderControls = computed(
   () => !props.isCategoryArticles && !isSwitchingPortal.value
 );
@@ -145,7 +159,12 @@ const showCategoryHeaderControls = computed(
   () => props.isCategoryArticles && !isSwitchingPortal.value
 );
 
+const isSearching = computed(() => Boolean(searchQuery.value?.trim()));
+
 const getEmptyStateText = type => {
+  if (isSearching.value) {
+    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.SEARCH.${type}`);
+  }
   if (props.isCategoryArticles) {
     return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
   }
@@ -230,6 +249,7 @@ const categoryMenuItems = computed(() =>
     value: category.id,
     action: 'move',
     emoji: category.icon,
+    iconColor: category.icon_color,
   }))
 );
 
@@ -290,6 +310,19 @@ watch(
     :show-pagination-footer="shouldShowPaginationFooter"
     @update:current-page="handlePageChange"
   >
+    <template #title-actions>
+      <Input
+        v-if="!isSwitchingPortal"
+        v-model="searchQuery"
+        :placeholder="
+          t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.SEARCH_PLACEHOLDER')
+        "
+        type="search"
+        size="sm"
+        class="w-full max-w-[16rem] min-w-0"
+        @input="debouncedSearch"
+      />
+    </template>
     <template #header-actions>
       <div class="flex items-end justify-between">
         <ArticleHeaderControls
@@ -313,7 +346,7 @@ watch(
     </template>
     <template #content>
       <div
-        v-if="isLoading"
+        v-if="isLoading && !isArticleDragging"
         class="flex items-center justify-center py-10 text-n-slate-11"
       >
         <Spinner />
@@ -421,10 +454,15 @@ watch(
         <ArticleList
           :articles="articles"
           :is-category-articles="isCategoryArticles"
+          :is-searching="isSearching"
           :selected-article-ids="selectedArticleIds"
+          :current-page="Number(meta.currentPage)"
+          :total-pages="totalPages"
           class="relative z-0"
           @translate-article="handleTranslateArticle"
           @toggle-select="handleToggleSelect"
+          @navigate-page="handlePageChange"
+          @dragging="isArticleDragging = $event"
         />
       </template>
       <ArticleEmptyState
@@ -432,7 +470,7 @@ watch(
         class="pt-14"
         :title="getEmptyStateTitle"
         :subtitle="getEmptyStateSubtitle"
-        :show-button="hasNoArticlesInPortal"
+        :show-button="hasNoArticlesInPortal && !isSearching"
         :button-label="
           t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
         "

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue

@@ -37,10 +37,21 @@ const { t } = useI18n();
 
 const editCategoryDialog = ref(null);
 const selectedCategory = ref(null);
+const searchQuery = ref('');
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
-const hasCategories = computed(() => props.categories?.length > 0);
+
+const filteredCategories = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) return props.categories;
+  return props.categories.filter(category =>
+    category.name?.toLowerCase().includes(query)
+  );
+});
+
+const hasCategories = computed(() => filteredCategories.value?.length > 0);
+const isSearching = computed(() => searchQuery.value.trim().length > 0);
 
 const updateRoute = (newParams, routeName) => {
   const { accountId, portalSlug, locale } = route.params;
@@ -115,6 +126,7 @@ const reorderCategories = async reorderedGroup => {
   <HelpCenterLayout :show-pagination-footer="false">
     <template #header-actions>
       <CategoryHeaderControls
+        v-model:search-query="searchQuery"
         :categories="categories"
         :is-category-articles="false"
         :allowed-locales="allowedLocales"
@@ -130,11 +142,18 @@ const reorderCategories = async reorderedGroup => {
       </div>
       <CategoryList
         v-else-if="hasCategories"
-        :categories="categories"
+        :categories="filteredCategories"
+        :disable-drag="isSearching"
         @click="openCategoryArticles"
         @action="handleAction"
         @reorder="reorderCategories"
       />
+      <CategoryEmptyState
+        v-else-if="isSearching"
+        class="pt-14"
+        :title="t('HELP_CENTER.CATEGORY_PAGE.SEARCH_EMPTY_STATE.TITLE')"
+        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.SEARCH_EMPTY_STATE.SUBTITLE')"
+      />
       <CategoryEmptyState
         v-else
         class="pt-14"

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue

@@ -38,8 +38,8 @@ const { t } = useI18n();
 const route = useRoute();
 
 const handleCategory = async formData => {
-  const { id, name, slug, icon, description, locale } = formData;
-  const categoryData = { name, icon, slug, description };
+  const { id, name, slug, icon, iconColor, description, locale } = formData;
+  const categoryData = { name, icon, icon_color: iconColor, slug, description };
 
   if (props.mode === 'create') {
     categoryData.locale = locale;

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -18,6 +18,7 @@ import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   mode: {
@@ -49,8 +50,9 @@ const props = defineProps({
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
 );
 
 const { t } = useI18n();
@@ -72,6 +74,7 @@ const state = reactive({
   id: '',
   name: '',
   icon: '',
+  iconColor: '',
   slug: '',
   description: '',
   locale: '',
@@ -109,8 +112,19 @@ const slugHelpText = computed(() => {
   });
 });
 
-const onClickInsertEmoji = emoji => {
-  state.icon = emoji;
+const onSelectIcon = ({ type, value, color }) => {
+  state.icon = value;
+  state.iconColor = type === 'icon' ? color : '';
+  isEmojiPickerOpen.value = false;
+};
+
+const onColorChange = color => {
+  state.iconColor = color;
+};
+
+const onRemoveIcon = () => {
+  state.icon = '';
+  state.iconColor = '';
   isEmojiPickerOpen.value = false;
 };
 
@@ -139,7 +153,14 @@ watch(
   newCategory => {
     if (props.mode === 'edit' && newCategory) {
       const { id, name, icon, slug, description } = newCategory;
-      Object.assign(state, { id, name, icon, slug, description });
+      Object.assign(state, {
+        id,
+        name,
+        icon,
+        iconColor: newCategory.icon_color || '',
+        slug,
+        description,
+      });
     }
   },
   { immediate: true }
@@ -197,19 +218,29 @@ defineExpose({ state, isSubmitDisabled });
           <template #prefix>
             <OnClickOutside @trigger="isEmojiPickerOpen = false">
               <Button
-                :label="state.icon"
-                color="slate"
-                size="sm"
                 type="button"
-                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.38rem] !w-[2.375rem] absolute top-[2rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                variant="ghost"
+                color="slate"
+                class="!h-[2.38rem] !w-[2.375rem] !p-0 absolute top-[2rem] start-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
-              />
-              <EmojiInput
+              >
+                <EmojiIcon
+                  v-if="state.icon"
+                  :value="state.icon"
+                  :color="state.iconColor"
+                  class="size-5 text-xl !leading-5"
+                />
+                <span v-else class="i-lucide-smile-plus size-4" />
+              </Button>
+              <EmojiIconPicker
                 v-if="isEmojiPickerOpen"
                 class="left-0 top-16"
+                :value="state.icon"
+                :color="state.iconColor"
                 show-remove-button
-                :on-click="onClickInsertEmoji"
+                @select="onSelectIcon"
+                @color-change="onColorChange"
+                @remove="onRemoveIcon"
               />
             </OnClickOutside>
           </template>