feat(imports): retry stalled Intercom imports

Restores the Inbox Channels dialog’s Facebook-gating test coverage by
isolating account feature dependencies that are unrelated to these
cases. This keeps the onboarding checks focused on whether Facebook is
configured and avoids initializing router and account-store state.

Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ class Api::V1::Accounts::DataImportsController < Api::V1::Accounts::BaseControll
   DATA_IMPORT_FEATURE = 'data_import'.freeze
 
   before_action :ensure_data_import_feature_enabled
-  before_action :set_data_import, only: [:show, :start, :abandon, :error_logs, :skip_logs]
+  before_action :set_data_import, only: [:show, :start, :retry_import, :abandon, :error_logs, :skip_logs]
   before_action :check_authorization
 
   def index
@@ -59,6 +59,24 @@ class Api::V1::Accounts::DataImportsController < Api::V1::Accounts::BaseControll
     render_show
   end
 
+  def retry_import
+    retry_service = DataImports::Intercom::RetryService.new(account: Current.account, data_import: @data_import)
+    retry_result = retry_service.perform
+    @data_import = retry_service.data_import
+
+    case retry_result
+    when :enqueue
+      DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id)
+      render_show
+    when :not_stalled
+      render json: { message: 'This Intercom import is no longer stalled.' }, status: :unprocessable_entity
+    when :active_import_exists
+      render json: { message: 'Another Intercom import is already in progress.' }, status: :unprocessable_entity
+    when :access_token_missing
+      render json: { message: 'The Intercom access key for this import is unavailable.' }, status: :unprocessable_entity
+    end
+  end
+
   def abandon
     @data_import.abandon!
     render_show

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

@@ -1,4 +1,6 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
+  # Reconfiguring/reauthorizing a live inbox swaps its credentials, so restrict it to admins.
+  before_action :check_admin_authorization?, if: -> { params[:inbox_id].present? }
   before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
 
   # POST /api/v1/accounts/:account_id/whatsapp/authorization
@@ -31,7 +33,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
   end
 
   def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
+    return if @inbox.channel.reauthorization_required? || can_reconfigure_channel?
 
     render json: {
       success: false,
@@ -39,10 +41,13 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
     }, status: :unprocessable_entity
   end
 
-  def can_upgrade_to_embedded_signup?
+  def can_reconfigure_channel?
     channel = @inbox.channel
     return false unless channel.provider == 'whatsapp_cloud'
 
+    # Reconfiguring a live embedded-signup channel requires the feature flag.
+    return Current.account.feature_enabled?('whatsapp_reconfigure') if channel.provider_config['source'] == 'embedded_signup'
+
     true
   end
 

app/controllers/api/v1/accounts_controller.rb

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

app/controllers/concerns/ensure_current_account_helper.rb

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

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

@@ -24,7 +24,11 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_view_variant
-    request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
+    request.variant = if @is_plain_layout_enabled
+                        :plain
+                      elsif @portal_layout == 'documentation'
+                        :documentation
+                      end
   end
 
   def portal
@@ -65,6 +69,8 @@ class Public::Api::V1::Portals::BaseController < PublicController
 
   def render_404
     portal
+    # set_locale can render_404 before the child's set_view_variant runs; set it here so plain 404s stay chrome-less
+    set_view_variant
     render 'public/api/v1/portals/error/404', status: :not_found
   end
 

app/drops/conversation_drop.rb

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

app/javascript/dashboard/api/dataImports.js

@@ -11,6 +11,10 @@ class DataImportsAPI extends ApiClient {
     return axios.post(`${this.url}/${id}/start`);
   }
 
+  retry(id) {
+    return axios.post(`${this.url}/${id}/retry`);
+  }
+
   abandon(id) {
     return axios.post(`${this.url}/${id}/abandon`);
   }

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

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

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

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

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

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

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

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

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

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

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

@@ -5,8 +5,12 @@ import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import {
+  getArticleStatus,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper.js';
 import wootConstants from 'dashboard/constants/globals';
+import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
 
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
 import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
@@ -145,6 +149,24 @@ const updateArticlesMeta = () => {
   });
 };
 
+const refreshArticleMeta = async () => {
+  await updateArticlesMeta();
+  await updatePortalMeta();
+};
+
+// The card's pending-changes popover applies the status itself; surface the result.
+const onDraftResolved = status => {
+  useAlert(getStatusMessage(status, true));
+  refreshArticleMeta();
+};
+
+const onDraftFailed = error => {
+  useAlert(
+    error?.message ||
+      t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
+  );
+};
+
 const handleArticleAction = async (action, { status, id }) => {
   const { portalSlug } = route.params;
   try {
@@ -154,6 +176,14 @@ const handleArticleAction = async (action, { status, id }) => {
         articleId: id,
       });
       useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
+    } else if (action === 'discard-draft') {
+      await store.dispatch('articles/discardDraft', {
+        portalSlug,
+        articleId: id,
+      });
+      useAlert(
+        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS')
+      );
     } else {
       await store.dispatch('articles/update', {
         portalSlug,
@@ -168,15 +198,16 @@ const handleArticleAction = async (action, { status, id }) => {
         useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
       }
     }
-    await updateArticlesMeta();
-    await updatePortalMeta();
+    await refreshArticleMeta();
   } catch (error) {
-    const errorMessage =
-      error?.message ||
-      (action === 'delete'
-        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
-        : getStatusMessage(status, false));
-    useAlert(errorMessage);
+    const fallbackMessage =
+      {
+        delete: t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE'),
+        'discard-draft': t(
+          'HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR'
+        ),
+      }[action] ?? getStatusMessage(status, false);
+    useAlert(error?.message || fallbackMessage);
   }
 };
 
@@ -210,10 +241,15 @@ const updateArticle = ({ action, value, id }) => {
         :views="item.views || 0"
         :updated-at="item.updatedAt"
         :is-selected="selectedArticleIds.has(item.id)"
+        :has-pending-changes="
+          item.status === ARTICLE_STATUSES.PUBLISHED && hasPendingChanges(item)
+        "
         selectable
         :show-selection-control="shouldShowSelectionControl(item.id)"
         @open-article="openArticle"
         @article-action="updateArticle"
+        @draft-resolved="onDraftResolved"
+        @draft-failed="onDraftFailed"
         @toggle-select="emit('toggleSelect', $event)"
         @hover="isHovered => handleCardHover(isHovered, item.id)"
       />

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

@@ -3,10 +3,15 @@ import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
-import { useMapGetter } from 'dashboard/composables/store.js';
+import { useStore, useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { debounce } from '@chatwoot/utils';
-import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
+import {
+  ARTICLE_TABS,
+  CATEGORY_ALL,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper';
+import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAlert } from 'dashboard/composables';
 import articlesAPI from 'dashboard/api/helpCenter/articles';
@@ -60,6 +65,7 @@ const emit = defineEmits([
 
 const router = useRouter();
 const route = useRoute();
+const store = useStore();
 const { t } = useI18n();
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
@@ -227,15 +233,46 @@ const onBulkActionSuccess = message => {
 };
 
 const bulkUpdateStatus = async status => {
+  const selectedIds = [...selectedArticleIds.value];
+  const { portalSlug } = route.params;
+
+  const pendingIds = props.articles
+    .filter(
+      article =>
+        selectedIds.includes(article.id) &&
+        article.status === ARTICLE_STATUSES.PUBLISHED &&
+        hasPendingChanges(article)
+    )
+    .map(article => article.id);
+
+  // Publish promotes each pending draft; other status changes skip them.
+  const isPublishing = status === ARTICLE_STATUSES.PUBLISHED;
+  const draftIds = isPublishing ? pendingIds : [];
+  const skippedCount = isPublishing ? 0 : pendingIds.length;
+  const articleIds = selectedIds.filter(id => !pendingIds.includes(id));
+
+  if (!articleIds.length && !draftIds.length) {
+    useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED_ALL'));
+    return;
+  }
+
   try {
-    await articlesAPI.bulkUpdateStatus({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-      status,
-    });
+    if (articleIds.length) {
+      await articlesAPI.bulkUpdateStatus({ portalSlug, articleIds, status });
+    }
+    await Promise.all(
+      draftIds.map(articleId =>
+        store.dispatch('articles/publishDraft', { portalSlug, articleId })
+      )
+    );
     onBulkActionSuccess(
       t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
     );
+    if (skippedCount) {
+      useAlert(
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED', skippedCount)
+      );
+    }
   } catch (error) {
     useAlert(
       error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')

app/javascript/dashboard/components-next/button/ConfirmButton.vue

@@ -14,6 +14,7 @@ const props = defineProps({
   icon: { type: [String, Object, Function], default: '' },
   trailingIcon: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['click']);
@@ -61,6 +62,7 @@ const handleClick = () => {
       :icon="icon"
       :trailing-icon="trailingIcon"
       :is-loading="isLoading"
+      :disabled="disabled"
       @click="handleClick"
       @blur="resetConfirmMode"
     >

app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue

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

app/javascript/dashboard/composables/useFileUpload.js

@@ -2,6 +2,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
+import { setDirectUploadAuthHeaders } from 'dashboard/helper/directUploadsHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
 import {
@@ -21,7 +22,6 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
   const { t } = useI18n();
 
   const accountId = useMapGetter('getCurrentAccountId');
-  const currentUser = useMapGetter('getCurrentUser');
   const currentChat = useMapGetter('getSelectedChat');
   const globalConfig = useMapGetter('globalConfig/get');
 
@@ -78,10 +78,7 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
       `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
       {
         directUploadWillCreateBlobWithXHR: xhr => {
-          xhr.setRequestHeader(
-            'api_access_token',
-            currentUser.value.access_token
-          );
+          setDirectUploadAuthHeaders(xhr);
         },
       }
     );

app/javascript/dashboard/featureFlags.js

@@ -8,10 +8,12 @@ export const FEATURE_FLAGS = {
   CAMPAIGNS: 'campaigns',
   WHATSAPP_CAMPAIGNS: 'whatsapp_campaign',
   WHATSAPP_MANUAL_TRANSFER: 'whatsapp_manual_transfer',
+  WHATSAPP_RECONFIGURE: 'whatsapp_reconfigure',
   CANNED_RESPONSES: 'canned_responses',
   CRM: 'crm',
   CUSTOM_ATTRIBUTES: 'custom_attributes',
   DATA_IMPORT: 'data_import',
+  API_AND_WEBHOOKS: 'api_and_webhooks',
   INBOX_MANAGEMENT: 'inbox_management',
   INTEGRATIONS: 'integrations',
   LABELS: 'labels',

app/javascript/dashboard/helper/articleDiffHelper.js

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

app/javascript/dashboard/helper/directUploadsHelper.js

@@ -0,0 +1,19 @@
+import Auth from 'dashboard/api/auth';
+
+export const setDirectUploadAuthHeaders = xhr => {
+  const {
+    'access-token': accessToken,
+    'token-type': tokenType,
+    client,
+    expiry,
+    uid,
+  } = Auth.getAuthData() || {};
+
+  if (!accessToken) return;
+
+  xhr.setRequestHeader('access-token', accessToken);
+  xhr.setRequestHeader('token-type', tokenType);
+  xhr.setRequestHeader('client', client);
+  xhr.setRequestHeader('expiry', expiry);
+  xhr.setRequestHeader('uid', uid);
+};

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

@@ -0,0 +1,170 @@
+import {
+  renderInlineDiff,
+  buildDiffBlocks,
+  hasPendingChanges,
+  rendersIdentically,
+} from '../articleDiffHelper';
+
+describe('articleDiffHelper', () => {
+  describe('renderInlineDiff', () => {
+    it('returns the text unchanged when there is no difference', () => {
+      const result = renderInlineDiff('hello world', 'hello world');
+      expect(result).toBe('hello world');
+      expect(result).not.toContain('<ins');
+      expect(result).not.toContain('<del');
+    });
+
+    it('wraps inserted words in <ins>', () => {
+      const result = renderInlineDiff('hello', 'hello there');
+      expect(result).toContain('hello');
+      expect(result).toContain('<ins');
+      expect(result).toContain('there');
+    });
+
+    it('wraps removed words in <del>', () => {
+      const result = renderInlineDiff('hello there', 'hello');
+      expect(result).toContain('<del');
+      expect(result).toContain('there');
+    });
+
+    it('keeps a single removal contiguous when a word repeats', () => {
+      const result = renderInlineDiff(
+        'How to use Agent bots?',
+        'How How to Agent bots?'
+      );
+      expect(result).toBe(
+        'How <ins class="!bg-n-teal-5 !text-n-teal-12 !no-underline rounded px-0.5">How</ins> to <del class="!bg-n-ruby-5 !text-n-ruby-12 !line-through rounded px-0.5">use</del> Agent bots?'
+      );
+    });
+
+    it('escapes markup when diffing plain text', () => {
+      const result = renderInlineDiff('a', 'a <b>');
+      expect(result).toContain('&lt;b&gt;');
+      expect(result).not.toContain('<b>');
+    });
+
+    it('treats a cleared empty string as a full deletion', () => {
+      const result = renderInlineDiff('gone', '');
+      expect(result).toContain('<del');
+      expect(result).toContain('gone');
+    });
+  });
+
+  describe('buildDiffBlocks', () => {
+    it('passes an unchanged block through as equal', () => {
+      const blocks = buildDiffBlocks('same para', 'same para');
+      expect(blocks).toEqual([{ type: 'equal', md: 'same para' }]);
+    });
+
+    it('marks an appended block as added', () => {
+      const blocks = buildDiffBlocks('a', 'a\n\nb');
+      expect(blocks).toContainEqual({ type: 'equal', md: 'a' });
+      expect(blocks).toContainEqual({ type: 'added', md: 'b' });
+    });
+
+    it('marks a deleted block as removed', () => {
+      const blocks = buildDiffBlocks('a\n\nb', 'a');
+      expect(blocks).toContainEqual({ type: 'removed', md: 'b' });
+    });
+
+    it('emits the old block then the new block for a reworded section', () => {
+      const blocks = buildDiffBlocks('hello world', 'hello there');
+      expect(blocks).toEqual([
+        { type: 'removed', md: 'hello world' },
+        { type: 'added', md: 'hello there' },
+      ]);
+    });
+
+    it('keeps a fenced code block whole when it contains blank lines', () => {
+      const code = '```\nline one\n\nline two\n```';
+      const blocks = buildDiffBlocks(code, code);
+      expect(blocks).toEqual([{ type: 'equal', md: code }]);
+    });
+
+    it('diffs an edited code block as one whole removed + added block', () => {
+      const live = '```\ncode line\n```';
+      const draft = '```\ncode line\n\nsd\n```';
+      const blocks = buildDiffBlocks(live, draft);
+      expect(blocks).toContainEqual({ type: 'removed', md: live });
+      expect(blocks).toContainEqual({ type: 'added', md: draft });
+    });
+
+    it('surfaces whitespace edits that change the rendered output', () => {
+      expect(
+        buildDiffBlocks('```\nx\n```', '```\n  x\n```').some(
+          block => block.type !== 'equal'
+        )
+      ).toBe(true);
+      expect(
+        buildDiffBlocks('line one\nline two', 'line one  \nline two').some(
+          block => block.type !== 'equal'
+        )
+      ).toBe(true);
+    });
+
+    it('surfaces an indented code block turning into a paragraph', () => {
+      const blocks = buildDiffBlocks(
+        '    curl example.com',
+        'curl example.com'
+      );
+      expect(blocks).toContainEqual({
+        type: 'removed',
+        md: '    curl example.com',
+      });
+      expect(blocks).toContainEqual({ type: 'added', md: 'curl example.com' });
+    });
+
+    it('keeps spacing the renderer ignores as equal', () => {
+      const blocks = buildDiffBlocks('a\nb', 'a \nb');
+      expect(blocks.every(block => block.type === 'equal')).toBe(true);
+    });
+
+    it('keeps a loose list with item descriptions as one block', () => {
+      const list =
+        '1. **One**\n\n   First item.\n\n2. **Two**\n\n   Second item.';
+      const blocks = buildDiffBlocks(list, list);
+      expect(blocks).toEqual([{ type: 'equal', md: list }]);
+    });
+  });
+
+  describe('rendersIdentically', () => {
+    it('ignores blank-line / empty-paragraph differences', () => {
+      expect(rendersIdentically('a\n\nb', 'a\n\n\nb')).toBe(true);
+      expect(rendersIdentically('hello', 'hello\n\n')).toBe(true);
+    });
+
+    it('counts code-block indentation changes', () => {
+      expect(rendersIdentically('```\n  x\n```', '```\nx\n```')).toBe(false);
+    });
+
+    it('counts smart vs straight quotes (no typographer)', () => {
+      expect(rendersIdentically('"hi"', '“hi”')).toBe(false);
+    });
+
+    it('counts real text changes', () => {
+      expect(rendersIdentically('hello world', 'hello there')).toBe(false);
+    });
+
+    it('treats nullish input as empty', () => {
+      expect(rendersIdentically(null, '')).toBe(true);
+      expect(rendersIdentically(undefined, 'x')).toBe(false);
+    });
+  });
+
+  describe('hasPendingChanges', () => {
+    it('is true when a draft title or content is staged', () => {
+      expect(hasPendingChanges({ draftContent: 'edit' })).toBe(true);
+      expect(hasPendingChanges({ draftTitle: 'edit' })).toBe(true);
+    });
+
+    it('treats a cleared empty-string draft as a pending change', () => {
+      expect(hasPendingChanges({ draftTitle: '' })).toBe(true);
+    });
+
+    it('is false with no draft columns', () => {
+      expect(hasPendingChanges({ title: 'live' })).toBe(false);
+      expect(hasPendingChanges({})).toBe(false);
+      expect(hasPendingChanges(null)).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,61 @@
+import { setDirectUploadAuthHeaders } from '../directUploadsHelper';
+import Auth from 'dashboard/api/auth';
+
+vi.mock('dashboard/api/auth', () => ({
+  default: { getAuthData: vi.fn() },
+}));
+
+describe('setDirectUploadAuthHeaders', () => {
+  const buildXhr = () => ({ setRequestHeader: vi.fn() });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('sets the five session auth headers from the auth cookie', () => {
+    Auth.getAuthData.mockReturnValue({
+      'access-token': 'token-123',
+      'token-type': 'Bearer',
+      client: 'client-123',
+      expiry: '9999',
+      uid: 'agent@example.com',
+    });
+    const xhr = buildXhr();
+
+    setDirectUploadAuthHeaders(xhr);
+
+    expect(xhr.setRequestHeader).toHaveBeenCalledTimes(5);
+    expect(xhr.setRequestHeader).toHaveBeenCalledWith(
+      'access-token',
+      'token-123'
+    );
+    expect(xhr.setRequestHeader).toHaveBeenCalledWith('token-type', 'Bearer');
+    expect(xhr.setRequestHeader).toHaveBeenCalledWith('client', 'client-123');
+    expect(xhr.setRequestHeader).toHaveBeenCalledWith('expiry', '9999');
+    expect(xhr.setRequestHeader).toHaveBeenCalledWith(
+      'uid',
+      'agent@example.com'
+    );
+  });
+
+  it('does not set any header when there is no auth data', () => {
+    Auth.getAuthData.mockReturnValue(false);
+    const xhr = buildXhr();
+
+    setDirectUploadAuthHeaders(xhr);
+
+    expect(xhr.setRequestHeader).not.toHaveBeenCalled();
+  });
+
+  it('does not set any header when the access token is missing', () => {
+    Auth.getAuthData.mockReturnValue({
+      client: 'client-123',
+      uid: 'agent@example.com',
+    });
+    const xhr = buildXhr();
+
+    setDirectUploadAuthHeaders(xhr);
+
+    expect(xhr.setRequestHeader).not.toHaveBeenCalled();
+  });
+});

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

@@ -533,6 +533,8 @@
             "PUBLISHED": "Published",
             "ARCHIVED": "Archived"
           },
+          "PENDING_EDITS": "Unpublished edits",
+          "PENDING_EDITS_TOOLTIP": "This published article has unpublished edits",
           "CATEGORY": {
             "UNCATEGORISED": "Uncategorised"
           }
@@ -616,6 +618,8 @@
         "DELETE": "Delete",
         "STATUS_SUCCESS": "Articles updated successfully",
         "STATUS_ERROR": "Failed to update articles",
+        "STATUS_SKIPPED": "1 article with unpublished edits was skipped — open it to publish or discard. | {count} articles with unpublished edits were skipped — open them to publish or discard.",
+        "STATUS_SKIPPED_ALL": "These articles have unpublished edits — open each to publish or discard.",
         "CATEGORY_SUCCESS": "Articles moved successfully",
         "CATEGORY_ERROR": "Failed to move articles",
         "DELETE_CONFIRM_TITLE": "Delete article | Delete {count} articles",
@@ -763,10 +767,30 @@
         },
         "PREVIEW": "Preview",
         "PUBLISH": "Publish",
+        "PUBLISH_CHANGES": "Publish changes",
+        "PUBLISH_CHANGES_SUCCESS": "Changes published successfully",
+        "PUBLISH_CHANGES_ERROR": "Could not publish changes",
+        "SAVE_IN_PROGRESS": "Still saving your latest changes — please try again in a moment.",
+        "DISCARD_CHANGES": "Discard changes",
+        "DISCARD_CHANGES_SUCCESS": "Changes discarded",
+        "DISCARD_CHANGES_ERROR": "Could not discard changes",
+        "PENDING_CHANGES": "Pending changes",
+        "VIEW_CHANGES": "View unpublished changes",
         "DRAFT": "Draft",
         "ARCHIVE": "Archive",
         "BACK_TO_ARTICLES": "Back to articles"
       },
+      "PENDING_CHANGES_POPOVER": {
+        "TITLE": "Unpublished changes",
+        "DESCRIPTION": "This article has draft changes that aren't live yet. Apply them before changing the status, or discard them?",
+        "APPLY": "Apply changes",
+        "DISCARD": "Discard changes"
+      },
+      "DIFF_DIALOG": {
+        "TITLE": "Unpublished changes",
+        "DESCRIPTION": "Compare your draft against the version that's currently live.",
+        "TITLE_LABEL": "Title"
+      },
       "EDIT_ARTICLE": {
         "MORE_PROPERTIES": "More properties",
         "UNCATEGORIZED": "Uncategorized",

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

@@ -59,7 +59,6 @@
         "ERROR_AUTH": "There was an error connecting to Instagram, please try again",
         "NEW_INBOX_SUGGESTION": "This Instagram account was previously linked to a different inbox and has now been migrated here. All new messages will appear here. The old inbox will no longer be able to send or receive messages for this account.",
         "DUPLICATE_INBOX_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. You won’t be able to send/receive Instagram messages from this inbox anymore.",
-        "RESTRICTED_WARNING": "Instagram inbox creation is temporarily unavailable due to current Instagram platform restrictions. We’ll restore support as soon as possible.",
         "SETTINGS_RESTRICTED_WARNING": "Instagram is currently restricted. Some messages or actions may be delayed or unavailable while we restore full support.",
         "STATUS_LINK": "View status update"
       },
@@ -848,8 +847,8 @@
       "WHATSAPP_TEMPLATES_SYNC_SUCCESS": "Templates sync initiated successfully. It may take a couple of minutes to update.",
       "WHATSAPP_MANUAL_MIGRATION": {
         "BANNER": {
-          "TITLE": "WhatsApp setup action required",
-          "DESCRIPTION": "Meta restrictions are affecting WhatsApp setup and management features. Reconnect this inbox manually to keep your WhatsApp configuration up to date.",
+          "TITLE": "Manual setup recommended",
+          "DESCRIPTION": "This inbox connects through the shared Meta app used for embedded signup, which recent Meta restrictions have affected. To avoid similar issues in the future, we recommend reconnecting it with your own Meta app.",
           "START": "Start manual migration",
           "GUIDE": "View guide"
         },
@@ -857,8 +856,8 @@
           "EYEBROW": "WhatsApp manual migration",
           "TITLE": "Reconnect WhatsApp inbox",
           "CLOSE": "Close",
-          "ACTION_REQUIRED_TITLE": "Action required for this WhatsApp inbox",
-          "ACTION_REQUIRED_DESCRIPTION": "Meta restrictions are affecting setup and management features. This guided flow updates the WhatsApp API connection without creating a new inbox.",
+          "ACTION_REQUIRED_TITLE": "Reconnect with your own Meta app",
+          "ACTION_REQUIRED_DESCRIPTION": "Inboxes connected through your own Meta app are not affected by restrictions on the shared embedded signup app. This guided flow updates the WhatsApp API connection without creating a new inbox.",
           "GUIDE_LINK": "Open the manual setup guide",
           "PRESERVED_TITLE": "Preserved",
           "PRESERVED_DESCRIPTION": "Conversations, contacts, collaborators, routing, business hours, and inbox settings.",

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

@@ -31,6 +31,13 @@
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "LEARN_MORE": "Learn more about webhooks",
+      "PAYWALL": {
+        "TITLE": "Webhooks are available on paid plans",
+        "AVAILABLE_ON": "Use webhooks to receive real-time events from your Chatwoot account.",
+        "UPGRADE_PROMPT": "Upgrade to the Startups, Business, or Enterprise plan to use webhooks.",
+        "UPGRADE_NOW": "Upgrade now",
+        "CANCEL_ANYTIME": "Change or cancel your plan anytime."
+      },
       "SECRET": {
         "LABEL": "Secret",
         "COPY": "Copy secret to clipboard",

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

@@ -100,6 +100,7 @@
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration",
+        "PAID_PLAN_NOTE": "API access tokens are available on paid plans.",
         "COPY": "Copy",
         "RESET": "Reset",
         "CONFIRM_RESET": "Are you sure?",
@@ -460,6 +461,7 @@
       "STATUS": "Status",
       "IMPORTED": "Imported",
       "CREATED": "Created",
+      "RETRY": "Retry",
       "ABANDON": "Abandon"
     },
     "DETAIL": {
@@ -506,6 +508,8 @@
     },
     "ALERTS": {
       "IMPORT_STARTED": "Intercom import has started.",
+      "IMPORT_RETRIED": "Intercom import has been queued to resume.",
+      "IMPORT_RETRY_FAILED": "Could not retry the Intercom import.",
       "IMPORT_ABANDONED": "Intercom import has been abandoned.",
       "IMPORT_FAILED": "Could not start the Intercom import."
     }

app/javascript/dashboard/mixins/fileUploadMixin.js

@@ -3,6 +3,7 @@ import { useAlert } from 'dashboard/composables';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
 import { DirectUpload } from 'activestorage';
+import { setDirectUploadAuthHeaders } from 'dashboard/helper/directUploadsHelper';
 import {
   DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE,
   resolveMaximumFileUploadSize,
@@ -77,10 +78,7 @@ export default {
         `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
         {
           directUploadWillCreateBlobWithXHR: xhr => {
-            xhr.setRequestHeader(
-              'api_access_token',
-              this.currentUser.access_token
-            );
+            setDirectUploadAuthHeaders(xhr);
           },
         }
       );

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue

@@ -4,8 +4,12 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
+import {
+  buildPortalArticleURL,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { rendersIdentically } from 'dashboard/helper/articleDiffHelper';
 
 import ArticleEditor from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue';
 
@@ -40,13 +44,60 @@ const articleLink = computed(() => {
   );
 });
 
+// On a published article, title/content edits stage into draft_* columns (kept
+// off the live site). Anywhere else they save straight to the live record — and
+// we drop any leftover draft (e.g. left behind when the card/bulk menu moved a
+// published article to draft) so a later publish can't resurrect stale content.
+const stageDraftFields = values => {
+  if (article.value?.status !== ARTICLE_STATUSES.PUBLISHED) {
+    const hasStaleDraft =
+      article.value?.draftTitle != null || article.value?.draftContent != null;
+    if (!hasStaleDraft) return values;
+    // The editor is showing the staged draft, so promote both fields to the live
+    // record (the field being autosaved wins) before dropping the drafts —
+    // otherwise saving one field would snap the other back to the old live value.
+    return {
+      ...values,
+      title: values.title ?? article.value.draftTitle ?? article.value.title,
+      content:
+        values.content ?? article.value.draftContent ?? article.value.content,
+      draft_title: null,
+      draft_content: null,
+    };
+  }
+
+  const staged = { ...values };
+  ['title', 'content'].forEach(field => {
+    if (field in staged) {
+      staged[`draft_${field}`] = staged[field];
+      delete staged[field];
+    }
+  });
+
+  // Clear the draft when it matches the live version (a revert, or a body edit
+  // the renderer ignores like a blank line) so it doesn't leave a "pending
+  // changes" badge with nothing to compare. The title is shown as raw escaped
+  // text, so compare it exactly; only the body is Markdown, so compare its render.
+  const liveTitle = article.value.title ?? '';
+  const liveContent = article.value.content ?? '';
+  const nextTitle = staged.draft_title ?? article.value.draftTitle ?? liveTitle;
+  const nextContent =
+    staged.draft_content ?? article.value.draftContent ?? liveContent;
+  if (nextTitle === liveTitle && rendersIdentically(liveContent, nextContent)) {
+    staged.draft_title = null;
+    staged.draft_content = null;
+  }
+
+  return staged;
+};
+
 const saveArticle = async ({ ...values }) => {
   isUpdating.value = true;
   try {
     await store.dispatch('articles/update', {
       portalSlug,
       articleId: articleSlug,
-      ...values,
+      ...stageDraftFields(values),
     });
     isSaved.value = true;
   } catch (error) {

app/javascript/dashboard/routes/dashboard/onboarding/inbox-setup/useChannelConfig.js

@@ -1,4 +1,6 @@
 import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 // OAuth/SDK channels need installation-level app credentials to be usable. When
 // the credential is missing the channel is "not configured" and is hidden from
@@ -8,6 +10,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 export function useChannelConfig() {
   const globalConfig = useMapGetter('globalConfig/get');
   const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+  const { isCloudFeatureEnabled } = useAccount();
   const installationConfig = window.chatwootConfig || {};
 
   const CHANNEL_CONFIGURED = {
@@ -20,7 +23,8 @@ export function useChannelConfig() {
       Boolean(installationConfig.whatsappConfigurationId),
     facebook: () => Boolean(installationConfig.fbAppId),
     instagram: () =>
-      !isOnChatwootCloud.value && Boolean(installationConfig.instagramAppId),
+      Boolean(installationConfig.instagramAppId) &&
+      isCloudFeatureEnabled(FEATURE_FLAGS.CHANNEL_INSTAGRAM),
     tiktok: () => Boolean(installationConfig.tiktokAppId),
     gmail: () => Boolean(installationConfig.googleOAuthClientId),
     outlook: () => Boolean(globalConfig.value.azureAppId),

app/javascript/dashboard/routes/dashboard/onboarding/inbox-setup/useChannelConnect.js

@@ -1,7 +1,6 @@
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
-import { useAccount } from 'dashboard/composables/useAccount';
 import { useWhatsappEmbeddedSignup } from 'dashboard/composables/useWhatsappEmbeddedSignup';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import googleClient from 'dashboard/api/channel/googleClient';
@@ -24,17 +23,11 @@ export function useChannelConnect() {
   const { t } = useI18n();
   const store = useStore();
   const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
-  const { isOnChatwootCloud } = useAccount();
 
   const connectViaOAuth = async provider => {
     const client = OAUTH_CLIENTS[provider];
     if (!client) return;
 
-    if (provider === 'instagram' && isOnChatwootCloud.value) {
-      useAlert(t('INBOX_MGMT.ADD.INSTAGRAM.RESTRICTED_WARNING'));
-      return;
-    }
-
     try {
       const {
         data: { url },

app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxChannelsDialog.spec.js

@@ -6,6 +6,9 @@ vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: key => key }) }));
 vi.mock('dashboard/composables/store', () => ({
   useMapGetter: () => ({ value: {} }),
 }));
+vi.mock('dashboard/composables/useAccount', () => ({
+  useAccount: () => ({ isCloudFeatureEnabled: () => false }),
+}));
 vi.mock('../../inbox-setup/useChannelConnect', () => ({
   useChannelConnect: () => ({
     connectViaOAuth: vi.fn(),

app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/useDetectedChannels.spec.js

@@ -13,6 +13,7 @@ vi.mock('vue-router');
 // channel_type, social ordering) derived from CHANNEL_LIST.
 const mountComposable = ({
   brandInfo,
+  features = { channel_instagram: true },
   inboxes = [],
   isOnChatwootCloud = false,
 } = {}) => {
@@ -30,8 +31,11 @@ const mountComposable = ({
         getters: {
           getAccount: () => () => ({
             id: 1,
+            features,
             custom_attributes: { brand_info: brandInfo },
           }),
+          isFeatureEnabledonAccount: () => (_accountId, feature) =>
+            Boolean(features[feature]),
         },
       },
       inboxes: {
@@ -207,7 +211,7 @@ describe('useDetectedChannels', () => {
       ]);
     });
 
-    it('hides Instagram from onboarding on Chatwoot Cloud', () => {
+    it('keeps Instagram available on Chatwoot Cloud when enabled for the account', () => {
       const { displayedChannels } = mountComposable({
         isOnChatwootCloud: true,
         brandInfo: {
@@ -218,6 +222,24 @@ describe('useDetectedChannels', () => {
         },
       });
 
+      expect(displayedChannels.value.map(channel => channel.type)).toEqual([
+        'instagram',
+        'tiktok',
+      ]);
+    });
+
+    it('hides Instagram when disabled for the account', () => {
+      const { displayedChannels } = mountComposable({
+        features: { channel_instagram: false },
+        isOnChatwootCloud: true,
+        brandInfo: {
+          socials: [
+            { type: 'instagram', url: 'https://instagram.com/acme' },
+            { type: 'tiktok', url: 'https://tiktok.com/@acme' },
+          ],
+        },
+      });
+
       expect(displayedChannels.value.map(channel => channel.type)).toEqual([
         'tiktok',
       ]);

app/javascript/dashboard/routes/dashboard/settings/data/Show.vue

@@ -26,6 +26,7 @@ const dataImport = ref(null);
 const isLoading = ref(true);
 const isRefreshing = ref(false);
 const isPolling = ref(false);
+const isRetrying = ref(false);
 const isAbandoning = ref(false);
 const isDownloadingErrorLogs = ref(false);
 const isDownloadingSkipLogs = ref(false);
@@ -117,6 +118,19 @@ const abandonImport = async () => {
   }
 };
 
+const retryImport = async () => {
+  isRetrying.value = true;
+  try {
+    const response = await DataImportsAPI.retry(dataImport.value.id);
+    dataImport.value = response.data;
+    useAlert(t('DATA_IMPORTS.ALERTS.IMPORT_RETRIED'));
+  } catch {
+    useAlert(t('DATA_IMPORTS.ALERTS.IMPORT_RETRY_FAILED'));
+  } finally {
+    isRetrying.value = false;
+  }
+};
+
 const downloadCsv = (response, filename) => {
   const url = window.URL.createObjectURL(
     new Blob([response.data], { type: 'text/csv' })
@@ -197,9 +211,11 @@ onBeforeUnmount(() => {
       <ImportDetailHeader
         :data-import="dataImport"
         :is-refreshing="isRefreshing"
+        :is-retrying="isRetrying"
         :is-abandoning="isAbandoning"
         :is-polling="isPolling"
         @refresh="fetchImport({ manual: true })"
+        @retry="retryImport"
         @abandon="abandonImport"
       />
     </template>

app/javascript/dashboard/routes/dashboard/settings/data/components/ImportDetailHeader.vue

@@ -21,6 +21,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isRetrying: {
+    type: Boolean,
+    default: false,
+  },
   isAbandoning: {
     type: Boolean,
     default: false,
@@ -31,7 +35,7 @@ const props = defineProps({
   },
 });
 
-defineEmits(['refresh', 'abandon']);
+defineEmits(['refresh', 'retry', 'abandon']);
 
 const { t } = useI18n();
 
@@ -90,11 +94,23 @@ const canAbandonImport = computed(() => isAbandonableImport(props.dataImport));
             :title="$t('DATA_IMPORTS.MONITOR.REFRESH')"
             @click="$emit('refresh')"
           />
+          <Button
+            v-if="dataImport?.stalled"
+            outline
+            slate
+            size="sm"
+            icon="i-lucide-rotate-ccw"
+            :is-loading="isRetrying"
+            :disabled="isAbandoning"
+            :label="$t('DATA_IMPORTS.TABLE.RETRY')"
+            @click="$emit('retry')"
+          />
           <Button
             v-if="canAbandonImport"
             ruby
             size="sm"
             :is-loading="isAbandoning"
+            :disabled="isRetrying"
             :label="$t('DATA_IMPORTS.TABLE.ABANDON')"
             @click="$emit('abandon')"
           />

app/javascript/dashboard/routes/dashboard/settings/data/specs/ImportDetailHeader.spec.js

@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils';
+import ImportDetailHeader from '../components/ImportDetailHeader.vue';
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: key => key }),
+}));
+
+const ButtonStub = {
+  name: 'Button',
+  props: {
+    label: { type: String, default: '' },
+    icon: { type: String, default: '' },
+    isLoading: { type: Boolean, default: false },
+  },
+  emits: ['click'],
+  template: `
+    <button
+      :data-label="label"
+      :data-icon="icon"
+      :data-loading="isLoading"
+      @click="$emit('click')"
+    >
+      {{ label }}
+    </button>
+  `,
+};
+
+const BaseSettingsHeaderStub = {
+  template: `
+    <section>
+      <slot name="title" />
+      <slot name="description" />
+    </section>
+  `,
+};
+
+const mountHeader = props =>
+  mount(ImportDetailHeader, {
+    props,
+    global: {
+      stubs: {
+        Button: ButtonStub,
+        BaseSettingsHeader: BaseSettingsHeaderStub,
+      },
+      mocks: {
+        $t: key => key,
+      },
+    },
+  });
+
+describe('ImportDetailHeader', () => {
+  const activeImport = {
+    id: 1,
+    name: 'Intercom import',
+    data_type: 'intercom',
+    source_provider: 'intercom',
+    status: 'processing',
+    stalled: true,
+  };
+
+  it('shows Retry between Refresh and Abandon for stalled imports', async () => {
+    const wrapper = mountHeader({ dataImport: activeImport });
+    const buttons = wrapper.findAll('button');
+
+    expect(buttons.map(button => button.attributes('data-label'))).toEqual([
+      '',
+      'DATA_IMPORTS.TABLE.RETRY',
+      'DATA_IMPORTS.TABLE.ABANDON',
+    ]);
+
+    await buttons[1].trigger('click');
+
+    expect(wrapper.emitted('retry')).toHaveLength(1);
+  });
+
+  it('hides Retry when the server does not report the import as stalled', () => {
+    const wrapper = mountHeader({
+      dataImport: { ...activeImport, stalled: false },
+    });
+
+    expect(
+      wrapper.find('[data-label="DATA_IMPORTS.TABLE.RETRY"]').exists()
+    ).toBe(false);
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/data/specs/showActions.spec.js

@@ -0,0 +1,104 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { KeepAlive, defineComponent, h, nextTick } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import DataImportsAPI from 'dashboard/api/dataImports';
+import Show from '../Show.vue';
+
+vi.mock('dashboard/api/dataImports', () => ({
+  default: {
+    show: vi.fn(),
+    retry: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(),
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: key => key }),
+}));
+
+vi.mock('vue-router', async importOriginal => ({
+  ...(await importOriginal()),
+  useRoute: () => ({ params: { dataImportId: 1 } }),
+}));
+
+const SettingsLayoutStub = {
+  template: `
+    <main>
+      <slot name="header" />
+      <slot name="body" />
+    </main>
+  `,
+};
+
+const ImportDetailHeaderStub = {
+  name: 'ImportDetailHeader',
+  emits: ['retry'],
+  template: '<button data-test="retry" @click="$emit(\'retry\')" />',
+};
+
+const mountShow = () => {
+  const Host = defineComponent({
+    render() {
+      return h(KeepAlive, null, { default: () => h(Show) });
+    },
+  });
+
+  return mount(Host, {
+    global: {
+      stubs: {
+        SettingsLayout: SettingsLayoutStub,
+        ImportDetailHeader: ImportDetailHeaderStub,
+        ImportSummaryTiles: true,
+        ImportProgress: true,
+        ImportErrorsSection: true,
+        ImportSkipLogsSection: true,
+      },
+      mocks: {
+        $t: key => key,
+      },
+    },
+  });
+};
+
+describe('data import detail actions', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    DataImportsAPI.show.mockResolvedValue({
+      data: {
+        id: 1,
+        status: 'processing',
+        stalled: true,
+        skip_logs_filters: {},
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('retries a stalled import and replaces the page state', async () => {
+    DataImportsAPI.retry.mockResolvedValue({
+      data: {
+        id: 1,
+        status: 'pending',
+        stalled: false,
+        skip_logs_filters: {},
+      },
+    });
+    const wrapper = mountShow();
+    await nextTick();
+    await flushPromises();
+
+    await wrapper.find('[data-test="retry"]').trigger('click');
+    await flushPromises();
+
+    expect(DataImportsAPI.retry).toHaveBeenCalledWith(1);
+    expect(useAlert).toHaveBeenCalledWith('DATA_IMPORTS.ALERTS.IMPORT_RETRIED');
+    wrapper.unmount();
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -387,12 +387,10 @@ export default {
       return this.inbox.provider_config?.source === 'embedded_signup';
     },
     whatsappUnauthorized() {
-      // The manual migration banner supersedes the embedded-signup reauthorize flow when the feature is enabled.
       return (
         this.isAWhatsAppCloudChannel &&
         this.isEmbeddedSignupWhatsApp &&
-        this.inbox.reauthorization_required &&
-        !this.showWhatsAppManualMigration
+        this.inbox.reauthorization_required
       );
     },
     whatsappRegistrationIncomplete() {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue

@@ -1,23 +1,15 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import instagramClient from 'dashboard/api/channel/instagramClient';
 import Button from 'dashboard/components-next/button/Button.vue';
-import Banner from 'dashboard/components-next/banner/Banner.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { META_RESTRICTION_STATUS_URL } from 'dashboard/constants/globals';
 
 const { t } = useI18n();
-const { isOnChatwootCloud } = useAccount();
 
 const hasError = ref(false);
 const errorStateMessage = ref('');
 const errorStateDescription = ref('');
 const isRequestingAuthorization = ref(false);
-const isInstagramConnectionRestricted = computed(() => {
-  return isOnChatwootCloud.value;
-});
 
 onMounted(() => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -76,36 +68,11 @@ const requestAuthorization = async () => {
           class="text-white !rounded-full !px-6 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#FCAF45]"
           lg
           icon="i-ri-instagram-line"
-          :disabled="
-            isRequestingAuthorization || isInstagramConnectionRestricted
-          "
+          :disabled="isRequestingAuthorization"
           :is-loading="isRequestingAuthorization"
           :label="$t('INBOX_MGMT.ADD.INSTAGRAM.CONTINUE_WITH_INSTAGRAM')"
           @click="requestAuthorization()"
         />
-        <Banner
-          v-if="isInstagramConnectionRestricted"
-          color="amber"
-          class="w-full max-w-2xl mt-6"
-        >
-          <div class="flex items-start gap-3 text-left">
-            <Icon
-              icon="i-lucide-triangle-alert"
-              class="flex-shrink-0 size-4 mt-0.5"
-            />
-            <span>
-              {{ $t('INBOX_MGMT.ADD.INSTAGRAM.RESTRICTED_WARNING') }}
-              <a
-                :href="META_RESTRICTION_STATUS_URL"
-                class="link underline"
-                rel="noopener noreferrer nofollow"
-                target="_blank"
-              >
-                {{ $t('INBOX_MGMT.ADD.INSTAGRAM.STATUS_LINK') }}
-              </a>
-            </span>
-          </div>
-        </Banner>
       </div>
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WhatsappManualMigrationBanner.vue

@@ -7,8 +7,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 const emit = defineEmits(['start']);
 const { t } = useI18n();
 
-const WHATSAPP_MANUAL_MIGRATION_GUIDE_URL =
-  'https://www.chatwoot.com/hc/user-guide/articles/1756799850-how-to-setup-a-whats_app-channel-manual-flow';
+const WHATSAPP_MANUAL_MIGRATION_GUIDE_URL = 'https://chwt.app/migrate-whatsapp';
 
 const copy = computed(() => ({
   title: t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANUAL_MIGRATION.BANNER.TITLE'),
@@ -21,14 +20,14 @@ const copy = computed(() => ({
 </script>
 
 <template>
-  <Banner color="amber" :action-label="copy.start" @action="emit('start')">
+  <Banner color="blue" :action-label="copy.start" @action="emit('start')">
     <div class="flex items-start gap-2">
       <Icon
-        icon="i-lucide-triangle-alert"
-        class="flex-shrink-0 mt-0.5 size-4 text-n-amber-11"
+        icon="i-lucide-info"
+        class="flex-shrink-0 mt-0.5 size-4 text-n-blue-11"
       />
       <div class="flex flex-col gap-0.5">
-        <span class="font-medium text-n-amber-12">{{ copy.title }}</span>
+        <span class="font-medium text-n-blue-12">{{ copy.title }}</span>
         <span>
           {{ copy.description }}
           <a

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WhatsappManualMigrationDialog.vue

@@ -23,8 +23,7 @@ const emit = defineEmits(['reconnect']);
 const { t } = useI18n();
 const { replaceInstallationName } = useBranding();
 
-const WHATSAPP_MANUAL_MIGRATION_GUIDE_URL =
-  'https://www.chatwoot.com/hc/user-guide/articles/1756799850-how-to-setup-a-whats_app-channel-manual-flow';
+const WHATSAPP_MANUAL_MIGRATION_GUIDE_URL = 'https://chwt.app/migrate-whatsapp';
 
 const dialogRef = ref(null);
 const currentStep = ref(0);
@@ -310,9 +309,9 @@ defineExpose({ open, close });
               class="flex gap-3 p-3 border rounded-xl border-n-weak bg-n-alpha-2"
             >
               <span
-                class="grid flex-shrink-0 rounded-lg size-8 place-content-center bg-n-amber-3 text-n-amber-11"
+                class="grid flex-shrink-0 rounded-lg size-8 place-content-center bg-n-blue-3 text-n-blue-11"
               >
-                <Icon icon="i-lucide-triangle-alert" class="size-4" />
+                <Icon icon="i-lucide-info" class="size-4" />
               </span>
               <div>
                 <h4 class="mt-0 mb-1 text-base font-medium text-n-slate-12">

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -1,5 +1,9 @@
 <script>
+import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useWhatsappEmbeddedSignup } from 'dashboard/composables/useWhatsappEmbeddedSignup';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import whatsappChannel from 'dashboard/api/channel/whatsappChannel';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
@@ -30,7 +34,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    return { v$: useVuelidate(), runEmbeddedSignup };
   },
   data() {
     return {
@@ -41,15 +46,29 @@ export default {
       allowedDomains: '',
       isUpdatingAllowedDomains: false,
       isSettingDefaults: false,
+      isReconfiguring: false,
     };
   },
   validations: {
     whatsAppInboxAPIKey: { required },
   },
   computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
     isEmbeddedSignupWhatsApp() {
       return this.inbox.provider_config?.source === 'embedded_signup';
     },
+    showWhatsAppReconfigure() {
+      return (
+        this.isEmbeddedSignupWhatsApp &&
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.WHATSAPP_RECONFIGURE
+        )
+      );
+    },
     isForwardingEnabled() {
       return !!this.inbox.forwarding_enabled;
     },
@@ -160,6 +179,28 @@ export default {
         useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
     },
+    async reconfigureWhatsApp() {
+      this.isReconfiguring = true;
+      try {
+        const credentials = await this.runEmbeddedSignup();
+        // User dismissed the Meta popup without completing signup.
+        if (!credentials) return;
+
+        await whatsappChannel.reauthorizeWhatsApp({
+          inboxId: this.inbox.id,
+          ...credentials,
+        });
+        useAlert(
+          this.$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_SUCCESS')
+        );
+      } catch (error) {
+        useAlert(
+          this.$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_ERROR')
+        );
+      } finally {
+        this.isReconfiguring = false;
+      }
+    },
     async syncTemplates() {
       this.isSyncingTemplates = true;
       try {
@@ -358,6 +399,23 @@ export default {
         >
           <woot-code :script="inbox.provider_config.webhook_verify_token" />
         </SettingsFieldSection>
+        <SettingsFieldSection
+          v-if="showWhatsAppReconfigure"
+          :label="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_TITLE')
+          "
+          :help-text="
+            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION')
+          "
+        >
+          <NextButton
+            :is-loading="isReconfiguring"
+            :disabled="isReconfiguring"
+            @click="reconfigureWhatsApp"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_BUTTON') }}
+          </NextButton>
+        </SettingsFieldSection>
       </template>
 
       <!-- Manual Setup Section -->

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -5,9 +5,11 @@ import { useBranding } from 'shared/composables/useBranding';
 import { picoSearch } from '@scmmishra/pico-search';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { BaseTable } from 'dashboard/components-next/table';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import NewWebhook from './NewWebHook.vue';
 import EditWebhook from './EditWebHook.vue';
 import WebhookRow from './WebhookRow.vue';
+import WebhookPaywall from './WebhookPaywall.vue';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../../SettingsLayout.vue';
 
@@ -20,6 +22,7 @@ export default {
     NewWebhook,
     EditWebhook,
     WebhookRow,
+    WebhookPaywall,
   },
   setup() {
     const { replaceInstallationName } = useBranding();
@@ -39,7 +42,19 @@ export default {
     ...mapGetters({
       records: 'webhooks/getWebhooks',
       uiFlags: 'webhooks/getUIFlags',
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
+    apiAndWebhooksEnabled() {
+      return (
+        !this.isOnChatwootCloud ||
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.API_AND_WEBHOOKS
+        )
+      );
+    },
     integration() {
       return this.$store.getters['integrations/getIntegration']('webhook');
     },
@@ -57,9 +72,16 @@ export default {
       ];
     },
   },
+  watch: {
+    apiAndWebhooksEnabled: {
+      immediate: true,
+      handler(enabled) {
+        if (enabled) this.$store.dispatch('webhooks/get');
+      },
+    },
+  },
   mounted() {
     this.$store.dispatch('integrations/get', 'webhook');
-    this.$store.dispatch('webhooks/get');
   },
   methods: {
     openAddPopup() {
@@ -105,10 +127,10 @@ export default {
 
 <template>
   <SettingsLayout
-    :is-loading="uiFlags.fetchingList"
+    :is-loading="apiAndWebhooksEnabled && uiFlags.fetchingList"
     :loading-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
     :no-records-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404')"
-    :no-records-found="!records.length"
+    :no-records-found="apiAndWebhooksEnabled && !records.length"
   >
     <template #header>
       <BaseSettingsHeader
@@ -118,19 +140,21 @@ export default {
         :description="replaceInstallationName(integration.description)"
         :link-text="$t('INTEGRATION_SETTINGS.WEBHOOK.LEARN_MORE')"
         :search-placeholder="
-          $t('INTEGRATION_SETTINGS.WEBHOOK.SEARCH_PLACEHOLDER')
+          apiAndWebhooksEnabled
+            ? $t('INTEGRATION_SETTINGS.WEBHOOK.SEARCH_PLACEHOLDER')
+            : ''
         "
         feature-name="webhook"
         :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       >
-        <template v-if="records?.length" #count>
+        <template v-if="apiAndWebhooksEnabled && records?.length" #count>
           <span class="text-body-main text-n-slate-11">
             {{
               $t('INTEGRATION_SETTINGS.WEBHOOK.COUNT', { n: records.length })
             }}
           </span>
         </template>
-        <template #actions>
+        <template v-if="apiAndWebhooksEnabled" #actions>
           <NextButton
             blue
             :label="$t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT')"
@@ -141,7 +165,9 @@ export default {
       </BaseSettingsHeader>
     </template>
     <template #body>
+      <WebhookPaywall v-if="!apiAndWebhooksEnabled" />
       <BaseTable
+        v-else
         :headers="tableHeaders"
         :items="filteredRecords"
         :no-data-message="
@@ -160,11 +186,19 @@ export default {
         </template>
       </BaseTable>
     </template>
-    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal
+      v-if="apiAndWebhooksEnabled"
+      v-model:show="showAddPopup"
+      :on-close="hideAddPopup"
+    >
       <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
 
-    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal
+      v-if="apiAndWebhooksEnabled"
+      v-model:show="showEditPopup"
+      :on-close="hideEditPopup"
+    >
       <EditWebhook
         v-if="showEditPopup"
         :id="selectedWebHook.id"
@@ -173,6 +207,7 @@ export default {
       />
     </woot-modal>
     <woot-delete-modal
+      v-if="apiAndWebhooksEnabled"
       v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookPaywall.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
+
+const router = useRouter();
+const accountId = useMapGetter('getCurrentAccountId');
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+</script>
+
+<template>
+  <div class="grid place-content-center w-full h-full max-h-[28rem] mx-auto">
+    <BasePaywallModal
+      class="mx-auto"
+      feature-prefix="INTEGRATION_SETTINGS.WEBHOOK"
+      i18n-key="PAYWALL"
+      is-on-chatwoot-cloud
+      @upgrade="openBilling"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue

@@ -6,6 +6,7 @@ import ConfirmButton from 'dashboard/components-next/button/ConfirmButton.vue';
 const props = defineProps({
   value: { type: String, default: '' },
   showResetButton: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['onCopy', 'onReset']);
@@ -41,12 +42,14 @@ const onReset = () => {
       }"
       :type="inputType"
       :model-value="value"
+      :disabled="disabled"
       readonly
     >
       <template #masked>
         <button
           class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
           type="button"
+          :disabled="disabled"
           @click="toggleMasked"
         >
           <fluent-icon :icon="maskIcon" :size="16" />
@@ -61,6 +64,7 @@ const onReset = () => {
         type="button"
         icon="i-lucide-copy"
         class="rounded-xl"
+        :disabled="disabled"
         @click="onClick"
       />
       <ConfirmButton
@@ -73,6 +77,7 @@ const onReset = () => {
         variant="outline"
         icon="i-lucide-key-round"
         class="rounded-xl"
+        :disabled="disabled"
         @click="onReset"
       />
     </div>

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

@@ -101,7 +101,24 @@ export default {
       currentUser: 'getCurrentUser',
       currentUserId: 'getCurrentUserID',
       globalConfig: 'globalConfig/get',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
+    apiAndWebhooksEnabled() {
+      if (!this.isOnChatwootCloud) return true;
+
+      return this.currentUser.accounts.some(
+        account => account.api_and_webhooks
+      );
+    },
+    accessTokenDescription() {
+      if (!this.apiAndWebhooksEnabled) {
+        return this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.PAID_PLAN_NOTE');
+      }
+
+      return this.replaceInstallationName(
+        this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE')
+      );
+    },
     isMfaEnabled() {
       return parseBoolean(window.chatwootConfig?.isMfaEnabled);
     },
@@ -191,10 +208,14 @@ export default {
       useAlert(this.$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.UPDATE_SUCCESS'));
     },
     async onCopyToken(value) {
+      if (!this.apiAndWebhooksEnabled) return;
+
       await copyTextToClipboard(value);
       useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
     async resetAccessToken() {
+      if (!this.apiAndWebhooksEnabled) return;
+
       const success = await this.$store.dispatch('resetAccessToken');
       if (success) {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_SUCCESS'));
@@ -339,12 +360,11 @@ export default {
     <SectionLayout
       with-border
       :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
-      :description="
-        replaceInstallationName($t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE'))
-      "
+      :description="accessTokenDescription"
     >
       <AccessToken
         :value="currentUser.access_token"
+        :disabled="!apiAndWebhooksEnabled"
         @on-copy="onCopyToken"
         @on-reset="resetAccessToken"
       />

app/javascript/dashboard/store/modules/conversationStats.js

@@ -25,24 +25,32 @@ const fetchMetaData = async (commit, params) => {
   }
 };
 
-const debouncedFetchMetaData = debounce(fetchMetaData, 500, false, 2000);
-const longDebouncedFetchMetaData = debounce(fetchMetaData, 5000, false, 10000);
+const debouncedFetchMetaData = debounce(fetchMetaData, 1000, false, 5000);
+const longDebouncedFetchMetaData = debounce(fetchMetaData, 7500, false, 20000);
 const superLongDebouncedFetchMetaData = debounce(
   fetchMetaData,
-  10000,
+  15000,
   false,
-  20000
+  30000
 );
 
+const metaDebouncers = {
+  default: debouncedFetchMetaData,
+  long: longDebouncedFetchMetaData,
+  superLong: superLongDebouncedFetchMetaData,
+};
+
+// allCount is 0 until a meta request succeeds; under load it stays 0, so treat
+// the unknown case as a large account and poll slowest instead of fastest.
+export const getMetaDebounceKey = allCount => {
+  if (allCount > 2000 || allCount === 0) return 'superLong';
+  if (allCount > 100) return 'long';
+  return 'default';
+};
+
 export const actions = {
-  get: async ({ commit, state: $state }, params) => {
-    if ($state.allCount > 2000) {
-      superLongDebouncedFetchMetaData(commit, params);
-    } else if ($state.allCount > 100) {
-      longDebouncedFetchMetaData(commit, params);
-    } else {
-      debouncedFetchMetaData(commit, params);
-    }
+  get: ({ commit, state: $state }, params) => {
+    metaDebouncers[getMetaDebounceKey($state.allCount)](commit, params);
   },
   set({ commit }, meta) {
     commit(types.SET_CONV_TAB_META, meta);

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

@@ -96,6 +96,32 @@ export const actions = {
     }
   },
 
+  // Push the draft to live and clear it, optionally changing status in the same
+  // update. Only edited fields are sent so an untouched live value survives.
+  publishDraft: ({ dispatch, state }, { portalSlug, articleId, status }) => {
+    const article = state.articles.byId[articleId];
+    const payload = {
+      portalSlug,
+      articleId,
+      status,
+      draft_title: null,
+      draft_content: null,
+    };
+    if (article?.draftTitle != null) payload.title = article.draftTitle;
+    if (article?.draftContent != null) payload.content = article.draftContent;
+    return dispatch('update', payload);
+  },
+
+  // Clear the draft (optionally changing status); live content is left untouched.
+  discardDraft: ({ dispatch }, { portalSlug, articleId, status }) =>
+    dispatch('update', {
+      portalSlug,
+      articleId,
+      status,
+      draft_title: null,
+      draft_content: null,
+    }),
+
   updateArticleMeta: async ({ commit }, { portalSlug, locale }) => {
     try {
       const { data } = await articlesAPI.getArticles({

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

@@ -150,6 +150,101 @@ describe('#actions', () => {
     });
   });
 
+  describe('#publishDraft', () => {
+    const state = {
+      articles: {
+        byId: {
+          1: {
+            id: 1,
+            draftTitle: 'Draft title',
+            draftContent: 'Draft content',
+          },
+        },
+      },
+    };
+
+    it('dispatches update promoting the edited fields and clearing the draft', async () => {
+      await actions.publishDraft(
+        { dispatch, state },
+        { portalSlug: 'room-rental', articleId: 1 }
+      );
+      expect(dispatch).toHaveBeenCalledWith('update', {
+        portalSlug: 'room-rental',
+        articleId: 1,
+        status: undefined,
+        draft_title: null,
+        draft_content: null,
+        title: 'Draft title',
+        content: 'Draft content',
+      });
+    });
+
+    it('only sends the fields that were actually edited', async () => {
+      const partialState = {
+        articles: { byId: { 1: { id: 1, draftContent: 'Only content' } } },
+      };
+      await actions.publishDraft(
+        { dispatch, state: partialState },
+        { portalSlug: 'room-rental', articleId: 1 }
+      );
+      expect(dispatch).toHaveBeenCalledWith('update', {
+        portalSlug: 'room-rental',
+        articleId: 1,
+        status: undefined,
+        draft_title: null,
+        draft_content: null,
+        content: 'Only content',
+      });
+    });
+
+    it('forwards a status to change it in the same update', async () => {
+      await actions.publishDraft(
+        { dispatch, state },
+        { portalSlug: 'room-rental', articleId: 1, status: 'archived' }
+      );
+      expect(dispatch).toHaveBeenCalledWith(
+        'update',
+        expect.objectContaining({
+          status: 'archived',
+          title: 'Draft title',
+          content: 'Draft content',
+          draft_title: null,
+          draft_content: null,
+        })
+      );
+    });
+  });
+
+  describe('#discardDraft', () => {
+    it('dispatches update clearing the draft columns', async () => {
+      await actions.discardDraft(
+        { dispatch },
+        { portalSlug: 'room-rental', articleId: 1 }
+      );
+      expect(dispatch).toHaveBeenCalledWith('update', {
+        portalSlug: 'room-rental',
+        articleId: 1,
+        status: undefined,
+        draft_title: null,
+        draft_content: null,
+      });
+    });
+
+    it('forwards a status to change it in the same update', async () => {
+      await actions.discardDraft(
+        { dispatch },
+        { portalSlug: 'room-rental', articleId: 1, status: 'draft' }
+      );
+      expect(dispatch).toHaveBeenCalledWith('update', {
+        portalSlug: 'room-rental',
+        articleId: 1,
+        status: 'draft',
+        draft_title: null,
+        draft_content: null,
+      });
+    });
+  });
+
   describe('#updateArticleMeta', () => {
     it('sends correct actions if API is success', async () => {
       axios.get.mockResolvedValue({

app/javascript/shared/helpers/MessageFormatter.js

@@ -67,8 +67,11 @@ const createMarkdownInstance = (linkify = true) => {
 // `<!--cw-colwidths:...-->` comment before the table. It exists only for the
 // editor's markdown round-trip and must never surface as text — markdown-it runs
 // with `html: false`, which would otherwise escape it into a visible comment in
-// rendered/plain output (e.g. dashboard search snippets). Strip it on the way in.
-const COLWIDTHS_MARKER_REGEX = /<!--cw-colwidths:[\d,]+-->\r?\n?/g;
+// rendered/plain output (e.g. dashboard search snippets). Strip the whole marker
+// line, including any blockquote prefix, so a quoted table's `>` prefixes don't
+// collapse together and break table parsing.
+const COLWIDTHS_MARKER_REGEX =
+  /^[ \t>]*<!--cw-colwidths:[\d,]+-->[ \t]*\r?\n?/gm;
 
 const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
 const TWITTER_USERNAME_REPLACEMENT = '$1[@$2](http://twitter.com/$2)';

app/javascript/shared/helpers/specs/MessageFormatter.spec.js

@@ -153,6 +153,15 @@ After`;
       expect(formatter.formattedMessage).not.toContain('cw-colwidths');
       expect(formatter.plainText).not.toContain('cw-colwidths');
     });
+
+    it('strips a blockquote-prefixed marker so the quoted table still renders', () => {
+      const message =
+        '> <!--cw-colwidths:120,200-->\n> | A | B |\n> | --- | --- |\n> | 1 | 2 |';
+      const { formattedMessage } = new MessageFormatter(message);
+      expect(formattedMessage).not.toContain('cw-colwidths');
+      expect(formattedMessage).toContain('<blockquote>');
+      expect(formattedMessage).toContain('<table>');
+    });
   });
 
   describe('#sanitize', () => {

app/javascript/widget/App.vue

@@ -66,6 +66,9 @@ export default {
         ? getLanguageDirection(this.$root.$i18n.locale)
         : false;
     },
+    isUnreadOrCampaignView() {
+      return ['unread-messages', 'campaigns'].includes(this.$route.name);
+    },
   },
   watch: {
     activeCampaign() {
@@ -374,6 +377,7 @@ export default {
       'is-widget-right': isRightAligned,
       'is-bubble-hidden': hideMessageBubble,
       'is-flat-design': isWidgetStyleFlat,
+      'bg-n-slate-2 dark:bg-n-solid-1': !isUnreadOrCampaignView,
       dark: prefersDarkMode,
     }"
   >

app/javascript/widget/views/ArticleViewer.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-white h-full">
+  <div class="bg-n-solid-1 h-full">
     <IframeLoader :url="$route.query.link" />
   </div>
 </template>

app/jobs/channels/whatsapp/templates_sync_scheduler_job.rb

@@ -2,7 +2,9 @@ class Channels::Whatsapp::TemplatesSyncSchedulerJob < ApplicationJob
   queue_as :low
 
   def perform
-    Channel::Whatsapp.order(Arel.sql('message_templates_last_updated IS NULL DESC, message_templates_last_updated ASC'))
+    Channel::Whatsapp.joins(:account)
+                     .merge(Account.active)
+                     .order(Arel.sql('message_templates_last_updated IS NULL DESC, message_templates_last_updated ASC'))
                      .where('message_templates_last_updated <= ? OR message_templates_last_updated IS NULL', 3.hours.ago)
                      .limit(Limits::BULK_EXTERNAL_HTTP_CALLS_LIMIT)
                      .each do |channel|

app/listeners/webhook_listener.rb

@@ -108,6 +108,8 @@ class WebhookListener < BaseListener
   end
 
   def deliver_account_webhooks(payload, account)
+    return unless account.api_and_webhooks_enabled?
+
     account.webhooks.account_type.each do |webhook|
       next unless webhook.subscriptions.include?(payload[:event])
 

app/models/account.rb

@@ -154,6 +154,10 @@ class Account < ApplicationRecord
     }
   end
 
+  def api_and_webhooks_enabled?
+    true
+  end
+
   def locale_english_name
     # the locale can also be something like pt_BR, en_US, fr_FR, etc.
     # the format is `<locale_code>_<country_code>`

app/models/article.rb

@@ -5,6 +5,8 @@
 #  id                    :bigint           not null, primary key
 #  content               :text
 #  description           :text
+#  draft_content         :text
+#  draft_title           :string
 #  locale                :string           default("en"), not null
 #  meta                  :jsonb
 #  position              :integer

app/models/channel/whatsapp.rb

@@ -101,6 +101,13 @@ class Channel::Whatsapp < ApplicationRecord
     end
   end
 
+  # Whether the pending (unsaved) provider_config change drops the embedded_signup
+  # source marker, i.e. this save is an embedded signup → manual setup transfer.
+  def embedded_to_manual_transfer_pending?
+    before, after = provider_config_change
+    before&.dig('source') == 'embedded_signup' && after['source'] != 'embedded_signup'
+  end
+
   def mark_message_templates_updated
     # rubocop:disable Rails/SkipsModelValidations
     update_column(:message_templates_last_updated, Time.zone.now)
@@ -130,13 +137,14 @@ class Channel::Whatsapp < ApplicationRecord
     errors.add(:provider_config, 'Invalid Credentials') unless provider_service.validate_provider_config?
   end
 
-  # Logs only credential changes, so config-only saves (e.g. calling toggles) stay silent.
+  # Logs only the embedded signup → manual migration (the save drops the
+  # embedded_signup source marker), so credential rotations on inboxes that are
+  # already manual stay silent.
   def log_credentials_transfer
     before, after = saved_change_to_provider_config
-    keys = %w[api_key phone_number_id business_account_id]
-    return if before.nil? || before.values_at(*keys) == after.values_at(*keys)
+    return unless before&.dig('source') == 'embedded_signup' && after['source'] != 'embedded_signup'
 
-    Rails.logger.info("[WHATSAPP_MANUAL_TRANSFER] success account_id=#{account_id} channel_id=#{id}")
+    Rails.logger.info("[WHATSAPP_EMBEDDED_TO_MANUAL] success account_id=#{account_id} channel_id=#{id}")
   end
 
   def perform_webhook_setup

app/models/data_import.rb

@@ -33,6 +33,7 @@
 #
 class DataImport < ApplicationRecord
   ACTIVE_INTERCOM_IMPORT_RUN_ID_KEY = 'active_intercom_import_run_id'.freeze
+  INTERCOM_STALLED_AFTER = 10.minutes
   LEGACY_DATA_TYPES = ['contacts'].freeze
   INTEGRATION_DATA_TYPES = ['intercom'].freeze
   IMPORT_TYPES = %w[contacts conversations].freeze
@@ -71,6 +72,10 @@ class DataImport < ApplicationRecord
     failed? || abandoned?
   end
 
+  def stalled?
+    intercom_import? && (pending? || processing?) && updated_at <= INTERCOM_STALLED_AFTER.ago
+  end
+
   def abandonable?
     intercom_import? && (pending? || processing?)
   end

app/policies/data_import_policy.rb

@@ -19,6 +19,10 @@ class DataImportPolicy < ApplicationPolicy
     show?
   end
 
+  def retry_import?
+    show?
+  end
+
   def abandon?
     show?
   end

app/services/data_imports/intercom/retry_service.rb

@@ -0,0 +1,27 @@
+class DataImports::Intercom::RetryService
+  attr_reader :data_import
+
+  def initialize(account:, data_import:)
+    @account = account
+    @data_import = data_import
+  end
+
+  def perform
+    @account.with_lock do
+      @data_import.reload
+      next :not_stalled unless @data_import.stalled?
+      next :active_import_exists if another_active_import?
+      next :access_token_missing if @data_import.access_token.blank?
+
+      @data_import.assign_active_intercom_import_run_id
+      @data_import.update!(status: :pending)
+      :enqueue
+    end
+  end
+
+  private
+
+  def another_active_import?
+    @account.data_imports.active_intercom.where.not(id: @data_import.id).exists?
+  end
+end

app/services/whatsapp/embedded_signup_service.rb

@@ -47,7 +47,7 @@ class Whatsapp::EmbeddedSignupService
         account: @account,
         inbox_id: @inbox_id,
         phone_number_id: @phone_number_id,
-        business_id: @business_id
+        waba_id: @waba_id
       ).perform(access_token, phone_info)
     else
       waba_info = { waba_id: @waba_id, business_name: phone_info[:business_name] }

app/services/whatsapp/providers/whatsapp_cloud_service.rb

@@ -94,12 +94,12 @@ class Whatsapp::Providers::WhatsappCloudService < Whatsapp::Providers::BaseServi
 
   private
 
-  # Only credential updates on existing channels are transfer attempts; creation failures are regular setup errors. Returns false.
+  # Only saves dropping the embedded_signup source marker are transfer attempts; creation/rotation failures are setup errors. Returns false.
   def log_transfer_failure(check, response)
-    return false unless whatsapp_channel.persisted? && whatsapp_channel.provider_config_changed?
+    return false unless whatsapp_channel.embedded_to_manual_transfer_pending?
 
     error_message = response.parsed_response.is_a?(Hash) ? response.parsed_response.dig('error', 'message') : nil
-    Rails.logger.warn("[WHATSAPP_MANUAL_TRANSFER] failure account_id=#{whatsapp_channel.account_id} channel_id=#{whatsapp_channel.id} " \
+    Rails.logger.warn("[WHATSAPP_EMBEDDED_TO_MANUAL] failure account_id=#{whatsapp_channel.account_id} channel_id=#{whatsapp_channel.id} " \
                       "check=#{check} http_status=#{response.code} meta_error=#{error_message}")
     false
   end

app/services/whatsapp/reauthorization_service.rb

@@ -1,9 +1,9 @@
 class Whatsapp::ReauthorizationService
-  def initialize(account:, inbox_id:, phone_number_id:, business_id:)
+  def initialize(account:, inbox_id:, phone_number_id:, waba_id:)
     @account = account
     @inbox_id = inbox_id
     @phone_number_id = phone_number_id
-    @business_id = business_id
+    @waba_id = waba_id
   end
 
   def perform(access_token, phone_info)
@@ -33,7 +33,7 @@ class Whatsapp::ReauthorizationService
     channel.provider_config = current_config.merge(
       'api_key' => access_token,
       'phone_number_id' => resolved_phone_number_id,
-      'business_account_id' => @business_id,
+      'business_account_id' => @waba_id,
       'source' => 'embedded_signup'
     )
     channel.save!

app/views/api/v1/accounts/articles/_article.json.jbuilder

@@ -4,6 +4,8 @@ json.title article.title
 json.content article.content
 json.description article.description
 json.status article.status
+json.draft_title article.draft_title
+json.draft_content article.draft_content
 json.position article.position
 json.account_id article.account_id
 json.updated_at article.updated_at.to_i

app/views/api/v1/accounts/data_imports/_data_import.json.jbuilder

@@ -5,6 +5,7 @@ json.source_type data_import.source_type
 json.source_provider data_import.source_provider
 json.import_types data_import.import_types
 json.status data_import.status
+json.stalled data_import.stalled?
 json.total_records data_import.total_records
 json.processed_records data_import.processed_records
 json.stats data_import.stats

app/views/api/v1/models/_user.json.jbuilder

@@ -1,4 +1,4 @@
-json.access_token resource.access_token.token
+json.access_token resource.accounts.any?(&:api_and_webhooks_enabled?) ? resource.access_token.token : ''
 json.account_id resource.active_account_user&.account_id
 json.available_name resource.available_name
 json.avatar_url resource.avatar_url
@@ -31,6 +31,7 @@ json.accounts do
     # availability derived from presence
     json.availability_status account_user.availability_status
     json.auto_offline account_user.auto_offline
+    json.api_and_webhooks account_user.account.feature_enabled?('api_and_webhooks')
     json.partial! 'api/v1/models/account_user', account_user: account_user if ChatwootApp.enterprise?
   end
 end

app/views/layouts/portal.html+documentation.erb

@@ -3,9 +3,9 @@
   <head>
     <%= render 'layouts/portal_head' %>
   </head>
-  <body class="font-inter">
+  <body class="font-inter bg-white dark:bg-slate-900">
     <div id="portal" class="antialiased">
-      <main class="flex flex-col min-h-screen bg-white main-content dark:bg-slate-900" role="main">
+      <main class="flex flex-col min-h-screen main-content" role="main">
         <%= render 'public/api/v1/portals/documentation_layout/topbar',
                    portal: @portal, locale: @locale, article: @article, category: @category %>
         <div class="bg-white dark:bg-n-slate-2 flex-1 flex font-inter tracking-normal [font-optical-sizing:auto]">

app/views/layouts/portal.html+plain.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="<%= html_lang_attribute(I18n.locale) %>">
+  <head>
+    <%= render 'layouts/portal_head' %>
+  </head>
+  <body class="font-default bg-white dark:bg-slate-900">
+    <div id="portal" class="antialiased">
+      <main class="flex flex-col min-h-screen main-content" role="main">
+        <%= yield %>
+      </main>
+    </div>
+    <%= render 'layouts/portal_scripts' %>
+  </body>
+</html>

app/views/layouts/portal.html.erb

@@ -3,12 +3,12 @@
   <head>
     <%= render 'layouts/portal_head' %>
   </head>
-  <body class="font-default">
+  <body class="font-default bg-white dark:bg-slate-900">
     <div id="portal" class="antialiased">
-      <main class="flex flex-col min-h-screen bg-white main-content dark:bg-slate-900" role="main">
-        <%= render 'public/api/v1/portals/header', portal: @portal unless @is_plain_layout_enabled %>
+      <main class="flex flex-col min-h-screen main-content" role="main">
+        <%= render 'public/api/v1/portals/header', portal: @portal %>
         <%= yield %>
-        <%= render 'public/api/v1/portals/footer' unless @is_plain_layout_enabled || @portal.account.feature_enabled?('disable_branding') %>
+        <%= render 'public/api/v1/portals/footer' unless @portal.account.feature_enabled?('disable_branding') %>
       </main>
     </div>
     <%= render 'layouts/portal_scripts' %>

app/views/public/api/v1/portals/_category-block.html+plain.erb

@@ -0,0 +1,61 @@
+<%# locals: (category:, portal:) %>
+<% category_link_params = {
+      portal_slug: portal.slug,
+      category_locale: category.locale,
+      category_slug: category.slug,
+      theme: @theme_from_params,
+      is_plain_layout_enabled: true
+    }
+%>
+
+<section class="flex flex-col w-full h-full lg:container">
+   <div class="flex flex-col gap-8 h-full">
+      <div class="flex items-center justify-between w-full">
+         <div class="flex flex-col items-start gap-1">
+            <div class="flex flex-row items-center gap-2">
+               <% if category.icon.present? %>
+               <span class="text-lg rounded-md cursor-pointer inline-flex"><%= render_emoji_or_icon(category.icon, category.icon_color) %></span>
+               <% end %>
+               <h3 class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer hover:underline">
+                  <a href="<%= generate_category_link(category_link_params) %>">
+                  <%= category.name %>
+                  </a>
+               </h3>
+            </div>
+            <% if category.description.present? %>
+            <span class="text-base text-slate-600 dark:text-slate-400"><%= category.description %></span>
+            <% end %>
+         </div>
+      </div>
+      <div class="flex flex-col gap-2 flex-grow <%= category.description.blank? && '-mt-4' %>">
+         <% if category.articles.published.size==0 %>
+         <div class="flex items-center justify-center h-full mb-4 bg-slate-50 dark:bg-slate-800 rounded-xl">
+            <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
+         </div>
+         <% else %>
+         <% category.articles.published.order(position: :asc).take(5).each do |article| %>
+         <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, true) %>">
+            <div class="flex justify-between hover:cursor-pointer items-start py-1 rounded-lg gap-6 hover:underline">
+               <%= article.title %>
+               <span class="flex items-center font-normal mt-1.5">
+                  <%= render partial: 'icons/chevron-right' %>
+               </span>
+            </div>
+         </a>
+         <% end %>
+         <% end %>
+      </div>
+      <div class="flex justify-between flex-row items-center">
+         <div class="flex flex-row items-center gap-1">
+           <%= render "public/api/v1/portals/authors", category: category, show_expanded: false %>
+           <span class="text-slate-600 dark:text-slate-400">•</span>
+           <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.order(position: :asc).size %></span>
+         </div>
+         <div>
+            <a href="<%= generate_category_link(category_link_params) %>" class="flex flex-row items-center text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100">
+            <%= I18n.t('public_portal.common.view_all_articles') %>
+            </a>
+         </div>
+      </div>
+   </div>
+</section>

app/views/public/api/v1/portals/_category-block.html.erb

@@ -1,28 +1,29 @@
+<%# locals: (category:, portal:) %>
 <% category_link_params = {
       portal_slug: portal.slug,
       category_locale: category.locale,
       category_slug: category.slug,
       theme: @theme_from_params,
-      is_plain_layout_enabled: @is_plain_layout_enabled
+      is_plain_layout_enabled: false
     }
 %>
 
 <section class="flex flex-col w-full h-full lg:container">
-   <div id="<%= !@is_plain_layout_enabled ? 'category-block' : '' %>" class="flex flex-col gap-8 h-full <%= !@is_plain_layout_enabled ? 'border border-solid border-slate-100 dark:border-slate-800 py-5 px-3 rounded-lg' : '' %>">
+   <div id="category-block" class="flex flex-col gap-8 h-full border border-solid border-slate-100 dark:border-slate-800 py-5 px-3 rounded-lg">
       <div class="flex items-center justify-between w-full">
          <div class="flex flex-col items-start gap-1">
-            <div class="flex flex-row items-center gap-2 <%= !@is_plain_layout_enabled && 'px-1' %>">
+            <div class="flex flex-row items-center gap-2 px-1">
                <% if category.icon.present? %>
-               <span class="text-lg rounded-md cursor-pointer inline-flex <%= !@is_plain_layout_enabled && 'pl-1' %>"><%= render_emoji_or_icon(category.icon, category.icon_color) %></span>
+               <span class="text-lg rounded-md cursor-pointer inline-flex pl-1"><%= render_emoji_or_icon(category.icon, category.icon_color) %></span>
                <% end %>
-               <h3 id="<%= !@is_plain_layout_enabled ? 'category-name' : '' %>" class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer <%= @is_plain_layout_enabled ? 'hover:underline' : '' %> <%= category.icon.blank? && !@is_plain_layout_enabled ? 'pl-1' : '' %>">
+               <h3 id="category-name" class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer <%= category.icon.blank? ? 'pl-1' : '' %>">
                   <a href="<%= generate_category_link(category_link_params) %>">
                   <%= category.name %>
                   </a>
                </h3>
             </div>
             <% if category.description.present? %>
-            <span class="text-base text-slate-600 dark:text-slate-400 <%= !@is_plain_layout_enabled && 'px-2' %>"><%= category.description %></span>
+            <span class="text-base text-slate-600 dark:text-slate-400 px-2"><%= category.description %></span>
             <% end %>
          </div>
       </div>
@@ -33,8 +34,8 @@
          </div>
          <% else %>
          <% category.articles.published.order(position: :asc).take(5).each do |article| %>
-         <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
-            <div id="<%= !@is_plain_layout_enabled ? 'category-item' : '' %>" class="flex justify-between hover:cursor-pointer items-start py-1 rounded-lg gap-6 <%= !@is_plain_layout_enabled ? 'px-2' : 'hover:underline' %>">
+         <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, false) %>">
+            <div id="category-item" class="flex justify-between hover:cursor-pointer items-start py-1 rounded-lg gap-6 px-2">
                <%= article.title %>
                <span class="flex items-center font-normal mt-1.5">
                   <%= render partial: 'icons/chevron-right' %>
@@ -44,7 +45,7 @@
          <% end %>
          <% end %>
       </div>
-      <div class="flex justify-between flex-row items-center <%= !@is_plain_layout_enabled && 'px-2' %>">
+      <div class="flex justify-between flex-row items-center px-2">
          <div class="flex flex-row items-center gap-1">
            <%= render "public/api/v1/portals/authors", category: category, show_expanded: false %>
            <span class="text-slate-600 dark:text-slate-400">•</span>

app/views/public/api/v1/portals/_featured_articles.html.erb

@@ -13,7 +13,7 @@
       </div>
       <div class="grid grid-cols-1 gap-2 md:grid-cols-2 gap-x-2 gap-y-2">
          <% featured_articles.each do |article| %>
-         <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
+         <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, false) %>">
             <div  id="category-item" class="flex items-start justify-between gap-6 px-2 py-1 rounded-lg">
                <%= article.title %>
                <span class="flex items-center font-normal mt-1.5">

app/views/public/api/v1/portals/_header.html.erb

@@ -1,7 +1,7 @@
 <header class="sticky top-0 z-50 w-full bg-white shadow-sm dark:bg-slate-900">
   <nav class="hidden sm:flex max-w-5xl px-4 mx-auto md:px-8" aria-label="Top">
     <div class="flex items-center w-full py-5 overflow-hidden">
-      <a href="<%= generate_home_link(@portal.slug, @portal.config['default_locale'] || params[:locale], @theme_from_params, @is_plain_layout_enabled) %>" class="flex items-center min-w-0 h-10">
+      <a href="<%= generate_home_link(@portal.slug, @portal.config['default_locale'] || params[:locale], @theme_from_params, false) %>" class="flex items-center min-w-0 h-10">
         <% if @portal.logo.present? %>
           <img src="<%= url_for(@portal.logo) %>" class="w-auto h-10 ltr:mr-2 rtl:ml-2" draggable="false" />
         <% end %>
@@ -102,7 +102,7 @@
 
   <nav class="flex sm:hidden max-w-5xl px-4 mx-auto" aria-label="Mobile Top">
     <div class="flex items-center justify-between w-full py-5">
-      <a href="<%= generate_home_link(@portal.slug, @portal.config['default_locale'] || params[:locale], @theme_from_params, @is_plain_layout_enabled) %>" class="flex items-center min-w-0 h-10 text-lg font-semibold text-slate-900 dark:text-white">
+      <a href="<%= generate_home_link(@portal.slug, @portal.config['default_locale'] || params[:locale], @theme_from_params, false) %>" class="flex items-center min-w-0 h-10 text-lg font-semibold text-slate-900 dark:text-white">
         <% if @portal.logo.present? %>
           <img src="<%= url_for(@portal.logo) %>" class="w-auto h-10 ltr:mr-2 rtl:ml-2" draggable="false" />
         <% end %>

app/views/public/api/v1/portals/_hero.html.erb

@@ -1,4 +1,3 @@
-<% if !@is_plain_layout_enabled %>
 <% content_for :head do %>
   <title><%= @portal.display_title(@locale) %></title>
   <meta name="title" content="<%= @portal.display_title(@locale) %>">
@@ -22,4 +21,3 @@
     </div>
   </div>
 </section>
-<% end %>

app/views/public/api/v1/portals/_home_categories.html.erb

@@ -0,0 +1,13 @@
+<%# locals: (portal:, locale:) %>
+<%# Categories with articles %>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
+  <% portal.categories.where(locale: locale).joins(:articles).where(articles: { status: :published }).order(position: :asc).group('categories.id').each do |category| %>
+    <%= render "public/api/v1/portals/category-block", category: category, portal: portal %>
+  <% end %>
+</div>
+<%# Uncategorized articles %>
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-6">
+  <% if portal.articles.where(status: :published, category_id: nil, locale: locale).count > 0 %>
+    <%= render "public/api/v1/portals/uncategorized-block", portal: portal %>
+  <% end %>
+</div>

app/views/public/api/v1/portals/_uncategorized-block.html+plain.erb

@@ -0,0 +1,28 @@
+<%# locals: (portal:) %>
+<section class="flex flex-col w-full h-full lg:container">
+  <div class="flex flex-col gap-8 h-full">
+    <div class="flex justify-between items-center w-full">
+      <h3 class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer hover:underline">
+        <%= I18n.t('public_portal.header.uncategorized') %>
+      </h3>
+    </div>
+    <div class="-mt-4">
+      <% portal.articles.published.where(category_id: nil, locale: @locale).order(position: :asc).take(5).each do |article| %>
+      <a
+        class="leading-7 text-slate-700 dark:text-slate-100"
+        href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, true) %>"
+      >
+        <div class="flex justify-between hover:cursor-pointer items-center py-1 rounded-lg gap-3  hover:underline">
+          <%= article.title %>
+          <span class="flex items-center font-normal">
+            <%= render partial: 'icons/chevron-right' %>
+          </span>
+        </div>
+      </a>
+      <% end %>
+    </div>
+    <div class="flex justify-between flex-row items-center">
+      <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: portal.articles.published.where(category_id: nil, locale: @locale).size %></span>
+    </div>
+  </div>
+</section>

app/views/public/api/v1/portals/_uncategorized-block.html.erb

@@ -1,7 +1,8 @@
+<%# locals: (portal:) %>
 <section class="flex flex-col w-full h-full lg:container">
-  <div id="<%= !@is_plain_layout_enabled ? 'category-block' : '' %>" class="flex flex-col gap-8 h-full <%= !@is_plain_layout_enabled ? 'border border-solid border-slate-100 dark:border-slate-800 py-5 px-3 rounded-lg' : '' %>">
-    <div class="flex justify-between items-center w-full <%= !@is_plain_layout_enabled ?  'px-1' : '' %>">
-      <h3 id="<%= !@is_plain_layout_enabled ? 'category-name' : '' %>" class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer <%= @is_plain_layout_enabled ? 'hover:underline' : 'pl-1' %>">
+  <div id="category-block" class="flex flex-col gap-8 h-full border border-solid border-slate-100 dark:border-slate-800 py-5 px-3 rounded-lg">
+    <div class="flex justify-between items-center w-full px-1">
+      <h3 id="category-name" class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer pl-1">
         <%= I18n.t('public_portal.header.uncategorized') %>
       </h3>
     </div>
@@ -9,9 +10,9 @@
       <% portal.articles.published.where(category_id: nil, locale: @locale).order(position: :asc).take(5).each do |article| %>
       <a
         class="leading-7 text-slate-700 dark:text-slate-100"
-        href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>"
+        href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, false) %>"
       >
-        <div id="<%= !@is_plain_layout_enabled ? 'category-item' : '' %>" class="flex justify-between hover:cursor-pointer items-center py-1 rounded-lg gap-3  <%= !@is_plain_layout_enabled ? 'px-2' : 'hover:underline' %>">
+        <div id="category-item" class="flex justify-between hover:cursor-pointer items-center py-1 rounded-lg gap-3  px-2">
           <%= article.title %>
           <span class="flex items-center font-normal">
             <%= render partial: 'icons/chevron-right' %>
@@ -20,7 +21,7 @@
       </a>
       <% end %>
     </div>
-    <div class="flex justify-between flex-row items-center <%= !@is_plain_layout_enabled && 'px-2' %>">
+    <div class="flex justify-between flex-row items-center px-2">
       <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: portal.articles.published.where(category_id: nil, locale: @locale).size %></span>
     </div>
   </div>

app/views/public/api/v1/portals/articles/_article_body.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (parsed_content:, content_padding: 'pt-8 pb-12') %>
+<%# Classic/Plain width wrapper. Body itself is the shared articles/content partial. %>
+<div class="flex max-w-5xl w-full px-4 md:px-8 mx-auto <%= content_padding %>">
+  <div class="flex-grow flex-2 max-w-3xl mx-auto w-full min-w-0 font-inter tracking-normal">
+    <%= render 'public/api/v1/portals/articles/content', parsed_content: parsed_content %>
+  </div>
+  <div class="flex-1" id="cw-hc-toc"></div>
+</div>

app/views/public/api/v1/portals/articles/_article_header.html.erb

@@ -1,22 +1,23 @@
+<%# locals: (article:, plain: false) %>
 <% category_link_params = {
       portal_slug: @portal.slug,
       category_locale: @article.category&.locale,
       category_slug: @article.category&.slug,
       theme: @theme_from_params,
-      is_plain_layout_enabled: @is_plain_layout_enabled
+      is_plain_layout_enabled: plain
     }
 %>
 
 <div class="flex flex-row items-center gap-px mb-6">
   <a
-    class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer <%= @is_plain_layout_enabled && 'hover:underline' %> leading-8 font-semibold"
-    href="<%= generate_home_link(@portal.slug, @article.category&.locale, @theme_from_params, @is_plain_layout_enabled) %>" 
+    class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer <%= plain && 'hover:underline' %> leading-8 font-semibold"
+    href="<%= generate_home_link(@portal.slug, @locale, @theme_from_params, plain) %>"
   >
     <%= I18n.t('public_portal.common.home') %>
   </a>
   <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300"><%= render partial: 'icons/chevron-right' %></span>
   <% if @article.category %>
-    <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 whitespace-nowrap hover:cursor-pointer <%= @is_plain_layout_enabled && 'hover:underline' %> leading-8 font-semibold" href="<%= generate_category_link(category_link_params) %>">
+    <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 whitespace-nowrap hover:cursor-pointer <%= plain && 'hover:underline' %> leading-8 font-semibold" href="<%= generate_category_link(category_link_params) %>">
     <%= @article.category&.name %>
     </a>
     <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300"><%= render partial: 'icons/chevron-right' %></span>

app/views/public/api/v1/portals/articles/_content.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (parsed_content:, link_class: 'prose-a:underline') %>
+<%# Shared article body (id="cw-article-content"). Same rendering in all 3 layouts;
+    each layout controls its own width via the wrapping element.
+    link_class is layout-specific: classic/plain default to always-underlined default-color
+    links; documentation overrides with the portal-colored, underline-on-hover style. %>
+<div id="cw-article-content"
+     class="prose dark:prose-invert max-w-none break-words
+            prose-headings:font-620
+            prose-p:font-420 prose-li:font-420 prose-blockquote:font-420 prose-td:font-420
+            <%= link_class %>
+            [&_li>p]:m-0
+            [&_.tableWrapper]:overflow-x-auto [&_.tableWrapper]:mb-4 [&_.tableWrapper]:rounded-lg [&_.tableWrapper]:border [&_.tableWrapper]:border-solid [&_.tableWrapper]:border-n-weak
+            [&_table]:!my-0 [&_table]:!min-w-full [&_table]:!border-separate [&_table]:!border-spacing-0
+            [&_th]:!bg-n-slate-2 [&_th]:!text-n-slate-12 [&_th]:!font-semibold [&_th]:!text-start [&_th]:!px-3 [&_th]:!py-2 [&_th]:!border-0 [&_th]:!border-b [&_th]:!border-solid [&_th]:!border-n-weak
+            [&_td]:!text-n-slate-11 [&_td]:!align-top [&_td]:!text-start [&_td]:!px-3 [&_td]:!py-2 [&_td]:!border-0 [&_td]:!border-b [&_td]:!border-solid [&_td]:!border-n-weak
+            [&_th:not(:last-child)]:!border-e [&_td:not(:last-child)]:!border-e
+            [&_tr:last-child_td]:!border-b-0">
+  <%= parsed_content %>
+</div>

app/views/public/api/v1/portals/articles/_meta_head.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (article:, portal:, locale:, og_image_url: nil) %>
+<title><%= article.title %> | <%= portal.display_title(locale) %></title>
+<% if article.meta["title"].present? %>
+  <meta name="title" content="<%= article.meta["title"] %>">
+  <meta property="og:title" content="<%= article.meta["title"] %>">
+  <meta name="twitter:title" content="<%= article.meta["title"] %>">
+<% end %>
+<% if article.meta["description"].present? %>
+  <meta name="description" content="<%= article.meta["description"] %>">
+  <meta property="og:description" content="<%= article.meta["description"] %>">
+  <meta name="twitter:description" content="<%= article.meta["description"] %>">
+<% end %>
+<% if article.meta["tags"].present? %>
+  <meta name="tags" content="<%= article.meta["tags"].join(',') %>">
+<% end %>
+<% if og_image_url.present? %>
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="og:image" content="<%= og_image_url.html_safe %>">
+  <meta property="og:image" content="<%= og_image_url.html_safe %>">
+  <meta name="twitter:image" content="<%= og_image_url.html_safe %>">
+<% end %>

app/views/public/api/v1/portals/articles/index.html.erb

@@ -1,36 +1,36 @@
 <div class="bg-slate-50 dark:bg-slate-800">
-	<div class="w-full max-w-4xl px-6 py-16 mx-auto space-y-12">
-		<div class="space-y-4">
-		<div>
-			<a
-			  class="leading-8 text-slate-800 hover:underline"
-		      href="<%= generate_home_link(@portal.slug, @category.present? ? @category.slug : '', @theme_from_params, @is_plain_layout_enabled) %>"
-			>
-				<%= @portal.localized_value('name', @locale) %> <%= I18n.t('public_portal.common.home') %>
-			</a>
-		<span>/</span>
-		<span>/</span>
-		</div>
-			<% @articles.each do |article| %>
-				<h1 class="text-4xl font-semibold leading-snug md:tracking-normal md:text-5xl text-slate-900 dark:text-white">
-				<%= article.title %></h1>
-				<div class="flex flex-col items-start justify-between w-full pt-2 md:flex-row md:items-center">
-					<div class="flex items-center space-x-2">
-						<img src="<%= article.author.avatar_url %>" alt="" class="w-12 border rounded-full h-812">
-						<div>
-							<h5 class="mb-2 text-base font-medium text-slate-900 dark:text-white"><%= article.author.name %></h5>
-							<p class="text-sm font-normal text-slate-700 dark:text-slate-100">
-								<%= article.author.updated_at.strftime("%B %d %Y") %></p>
-						</div>
-					</div>
-				</div>
-			<% end %>
-		</div>
-	</div>
+  <div class="w-full max-w-4xl px-6 py-16 mx-auto space-y-12">
+    <div class="space-y-4">
+    <div>
+      <a
+        class="leading-8 text-slate-800 hover:underline"
+          href="<%= generate_home_link(@portal.slug, @category.present? ? @category.slug : '', @theme_from_params, @is_plain_layout_enabled) %>"
+      >
+        <%= @portal.localized_value('name', @locale) %> <%= I18n.t('public_portal.common.home') %>
+      </a>
+    <span>/</span>
+    <span>/</span>
+    </div>
+      <% @articles.each do |article| %>
+        <h1 class="text-4xl font-semibold leading-snug md:tracking-normal md:text-5xl text-slate-900 dark:text-white">
+        <%= article.title %></h1>
+        <div class="flex flex-col items-start justify-between w-full pt-2 md:flex-row md:items-center">
+          <div class="flex items-center space-x-2">
+            <img src="<%= article.author.avatar_url %>" alt="" class="w-12 border rounded-full h-812">
+            <div>
+              <h5 class="mb-2 text-base font-medium text-slate-900 dark:text-white"><%= article.author.name %></h5>
+              <p class="text-sm font-normal text-slate-700 dark:text-slate-100">
+                <%= article.author.updated_at.strftime("%B %d %Y") %></p>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
 </div>
 <div class="flex-grow w-full max-w-4xl px-8 py-16 mx-auto space-y-12">
-	<article class="space-y-8">
-		<div class="max-w-3xl font-sans text-lg leading-8 text-slate-800 dark:text-slate-50 blog-content">
-		</div>
-	</article>
+  <article class="space-y-8">
+    <div class="max-w-3xl font-sans text-lg leading-8 text-slate-800 dark:text-slate-50 blog-content">
+    </div>
+  </article>
 </div>

app/views/public/api/v1/portals/articles/show.html+documentation.erb

@@ -11,20 +11,9 @@
       <%= render 'public/api/v1/portals/documentation_layout/articles/header',
                  portal: @portal, article: @article %>
 
-      <div id="cw-article-content"
-           class="prose dark:prose-invert max-w-none break-words
-                  prose-headings:font-620
-                  prose-p:font-420 prose-li:font-420 prose-blockquote:font-420 prose-td:font-420
-                  prose-a:text-n-portal prose-a:no-underline hover:prose-a:underline
-                  [&_li>p]:m-0
-                  [&_.tableWrapper]:overflow-x-auto [&_.tableWrapper]:mb-4 [&_.tableWrapper]:rounded-lg [&_.tableWrapper]:border [&_.tableWrapper]:border-solid [&_.tableWrapper]:border-n-weak
-                  [&_table]:!my-0 [&_table]:!min-w-full [&_table]:!border-separate [&_table]:!border-spacing-0
-                  [&_th]:!bg-n-slate-2 [&_th]:!text-n-slate-12 [&_th]:!font-semibold [&_th]:!text-start [&_th]:!px-3 [&_th]:!py-2 [&_th]:!border-0 [&_th]:!border-b [&_th]:!border-solid [&_th]:!border-n-weak
-                  [&_td]:!text-n-slate-11 [&_td]:!align-top [&_td]:!text-start [&_td]:!px-3 [&_td]:!py-2 [&_td]:!border-0 [&_td]:!border-b [&_td]:!border-solid [&_td]:!border-n-weak
-                  [&_th:not(:last-child)]:!border-e [&_td:not(:last-child)]:!border-e
-                  [&_tr:last-child_td]:!border-b-0">
-        <%= @parsed_content %>
-      </div>
+      <%= render 'public/api/v1/portals/articles/content',
+                 parsed_content: @parsed_content,
+                 link_class: 'prose-a:text-n-portal prose-a:no-underline hover:prose-a:underline' %>
 
       <% if @article.category %>
         <footer class="mt-20 pt-8 border-t border-n-weak flex items-center justify-between gap-4 flex-wrap">

app/views/public/api/v1/portals/articles/show.html+plain.erb

@@ -0,0 +1,11 @@
+<% content_for :head do %>
+  <%= render 'public/api/v1/portals/articles/meta_head',
+             article: @article, portal: @portal, locale: @locale, og_image_url: @og_image_url %>
+<% end %>
+
+<div class="max-w-5xl mx-auto space-y-4 w-full px-4 md:px-8 py-4">
+  <%= render "public/api/v1/portals/articles/article_header", article: @article, plain: true %>
+</div>
+
+<%= render "public/api/v1/portals/articles/article_body",
+           parsed_content: @parsed_content, content_padding: 'py-4' %>

app/views/public/api/v1/portals/articles/show.html.erb

@@ -1,27 +1,8 @@
 <% content_for :head do %>
-  <title><%= @article.title %> | <%= @portal.display_title(@locale) %></title>
-  <% if @article.meta["title"].present? %>
-    <meta name="title" content="<%= @article.meta["title"] %>">
-    <meta property="og:title" content="<%= @article.meta["title"] %>">
-    <meta name="twitter:title" content="<%= @article.meta["title"] %>">
-  <% end %>
-  <% if @article.meta["description"].present? %>
-    <meta name="description" content="<%= @article.meta["description"] %>">
-    <meta property="og:description" content="<%= @article.meta["description"] %>">
-    <meta name="twitter:description" content="<%= @article.meta["description"] %>">
-  <% end %>
-  <% if @article.meta["tags"].present? %>
-    <meta name="tags" content="<%= @article.meta["tags"].join(',') %>">
-  <% end %>
-  <% if @og_image_url.present? %>
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
-    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
-    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
-  <% end %>
+  <%= render 'public/api/v1/portals/articles/meta_head',
+             article: @article, portal: @portal, locale: @locale, og_image_url: @og_image_url %>
 <% end %>
 
-<% if !@is_plain_layout_enabled %>
 <div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
   <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
     <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
@@ -29,57 +10,5 @@
     </div>
   </div>
 </div>
-<% else %>
-<div class="max-w-5xl mx-auto space-y-4 w-full px-4 md:px-8 <%= @is_plain_layout_enabled ? 'py-4' : 'py-8' %>">
-  <%= render "public/api/v1/portals/articles/article_header", article: @article %>
-</div>
-<% end %>
 
-<div class="flex max-w-5xl w-full px-4 md:px-8 mx-auto">
-  <article id="cw-article-content" class="article-content flex-grow flex-2 mx-auto text-slate-800 dark:text-slate-50 text-lg max-w-3xl prose-h1:text-2xl prose-h2:text-xl prose-h2:mt-0 prose-h3:text-lg prose-code:[&>p]:p-1 prose-code:[&>p]:rounded-sm prose-code:[&>p]:bg-black-100 dark:prose-code:[&>p]:bg-black-600 prose-code:after:content-none prose-code:before:content-none prose dark:prose-invert break-words w-full [&_table]:!border-slate-200 dark:[&_table]:!border-slate-800 [&_th]:!border-slate-200 dark:[&_th]:!border-slate-800 [&_td]:!border-slate-200 dark:[&_td]:!border-slate-800 [&_th]:!bg-slate-50 dark:[&_th]:!bg-slate-800/50 <%= @is_plain_layout_enabled ? 'py-4' : 'pt-8 pb-12' %>">
-    <%= @parsed_content %>
-  </article>
-  <div class="flex-1" id="cw-hc-toc"></div>
-</div>
-<style>
-  .article-content li > p {
-    margin: 0;
-  }
-  .article-content .tableWrapper {
-    overflow-x: auto;
-    margin-bottom: 1rem;
-  }
-  .article-content table {
-    min-width: 100%;
-    border: 1px solid;
-    border-radius: 8px;
-    border-spacing: 0;
-    border-collapse: separate;
-    margin: 0;
-  }
-  .article-content th,
-  .article-content td {
-    border-bottom: 1px solid;
-    border-inline-end: 1px solid;
-    border-color: inherit;
-    padding: 0.5rem 0.75rem;
-    text-align: start;
-    vertical-align: top;
-  }
-  .article-content th:last-child,
-  .article-content td:last-child {
-    border-inline-end: none;
-  }
-  .article-content th {
-    font-weight: 600;
-  }
-  .article-content th:first-child {
-    border-start-start-radius: 7px;
-  }
-  .article-content th:last-child {
-    border-start-end-radius: 7px;
-  }
-  .article-content tr:last-child td {
-    border-bottom: none;
-  }
-</style>
+<%= render "public/api/v1/portals/articles/article_body", parsed_content: @parsed_content %>

app/views/public/api/v1/portals/categories/_article_list.html+plain.erb

@@ -0,0 +1,27 @@
+<%# locals: (category:, portal:) %>
+<section class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
+  <div class="w-full flex flex-col gap-6 flex-grow">
+    <% if category.articles.published.size == 0 %>
+    <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
+      <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
+    </div>
+    <% else %>
+    <% category.articles.published.order(:position).each do |article| %>
+    <div class="group">
+      <a
+        class="px-0 py-1 text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
+        href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, true) %>"
+      >
+        <div class="flex flex-col gap-5">
+          <div class="flex flex-col gap-1">
+            <h3 class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold group-hover:underline"><%= article.title %></h3>
+            <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-1 break-all"><%= render_category_content(article.content) %></p>
+          </div>
+          <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
+        </div>
+      </a>
+    </div>
+    <% end %>
+    <% end %>
+  </div>
+</section>

app/views/public/api/v1/portals/categories/_article_list.html.erb

@@ -0,0 +1,27 @@
+<%# locals: (category:, portal:) %>
+<section class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
+  <div class="w-full flex flex-col gap-6 flex-grow">
+    <% if category.articles.published.size == 0 %>
+    <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
+      <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
+    </div>
+    <% else %>
+    <% category.articles.published.order(:position).each do |article| %>
+    <div id="category-block" class="border border-solid border-slate-100 dark:border-slate-800 rounded-lg">
+      <a
+        class="p-4 text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
+        href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, false) %>"
+      >
+        <div class="flex flex-col gap-5">
+          <div class="flex flex-col gap-1">
+            <h3 id="category-name" class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold"><%= article.title %></h3>
+            <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-1 break-all"><%= render_category_content(article.content) %></p>
+          </div>
+          <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
+        </div>
+      </a>
+    </div>
+    <% end %>
+    <% end %>
+  </div>
+</section>

app/views/public/api/v1/portals/categories/_category-block.html.erb

@@ -4,7 +4,7 @@
       category_locale: category.locale,
       category_slug: category.slug,
       theme: @theme_from_params,
-      is_plain_layout_enabled: @is_plain_layout_enabled
+      is_plain_layout_enabled: false
     }
 %>
 
@@ -29,7 +29,7 @@
         <div class="flex content-center justify-between h-8 my-1">
           <a
             class="leading-8 text-slate-800 dark:text-slate-50 hover:underline"
-            href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>"
+            href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, false) %>"
           >
             <%= article.title %>
           </a>

app/views/public/api/v1/portals/categories/_category-hero.html.erb

@@ -1,8 +1,9 @@
-<div class="flex flex-col px-4 md:px-8 max-w-5xl w-full mx-auto gap-6 <%= @is_plain_layout_enabled && 'py-4' %>">
+<%# locals: (category:, portal:, plain: false) %>
+<div class="flex flex-col px-4 md:px-8 max-w-5xl w-full mx-auto gap-6 <%= plain ? 'py-4' : '' %>">
   <div class="flex items-center flex-row">
     <a
-      class="text-slate-500 dark:text-slate-200 text-sm gap-1 <%= @is_plain_layout_enabled && 'hover:underline' %> hover:cursor-pointer leading-8 font-semibold"
-      href="<%= generate_home_link(portal.slug, category.locale, @theme_from_params, @is_plain_layout_enabled) %>"
+      class="text-slate-500 dark:text-slate-200 text-sm gap-1 <%= plain ? 'hover:underline' : '' %> hover:cursor-pointer leading-8 font-semibold"
+      href="<%= generate_home_link(portal.slug, category.locale, @theme_from_params, plain) %>"
     >
       <%= I18n.t('public_portal.common.home') %>
     </a>

app/views/public/api/v1/portals/categories/_meta_head.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (category:, portal:, locale:, og_image_url: nil) %>
+<title><%= category.name %> | <%= portal.display_title(locale) %></title>
+<meta name="title" content="<%= category.name %> | <%= portal.display_title(locale) %>">
+<% if category.description.present? %>
+  <meta name="description" content="<%= category.description %>">
+  <meta property="og:description" content="<%= category.description %>">
+  <meta name="twitter:description" content="<%= category.description %>">
+<% end %>
+<% if og_image_url.present? %>
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="og:image" content="<%= og_image_url.html_safe %>">
+  <meta property="og:image" content="<%= og_image_url.html_safe %>">
+  <meta name="twitter:image" content="<%= og_image_url.html_safe %>">
+<% end %>

app/views/public/api/v1/portals/categories/show.html+plain.erb

@@ -0,0 +1,7 @@
+<% content_for :head do %>
+  <%= render 'public/api/v1/portals/categories/meta_head',
+             category: @category, portal: @portal, locale: @locale, og_image_url: @og_image_url %>
+<% end %>
+
+<%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal, plain: true %>
+<%= render 'public/api/v1/portals/categories/article_list', category: @category, portal: @portal %>

app/views/public/api/v1/portals/categories/show.html.erb

@@ -1,51 +1,11 @@
 <% content_for :head do %>
-  <title><%= @category.name %> | <%= @portal.display_title(@locale) %></title>
-  <meta name="title" content="<%= @category.name %> | <%= @portal.display_title(@locale) %>">
-  <% if @category.description.present? %>
-    <meta name="description" content="<%= @category.description %>">
-    <meta property="og:description" content="<%= @category.description %>">
-    <meta name="twitter:description" content="<%= @category.description %>">
-  <% end %>
-  <% if @og_image_url.present? %>
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
-    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
-    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
-  <% end %>
+  <%= render 'public/api/v1/portals/categories/meta_head',
+             category: @category, portal: @portal, locale: @locale, og_image_url: @og_image_url %>
 <% end %>
 
-<% if !@is_plain_layout_enabled %>
 <div id="portal-bg" class="bg-white dark:bg-slate-900">
   <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
     <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
   </div>
 </div>
-<% else %>
-  <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
-<% end %>
-<section class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
-  <div class="w-full flex flex-col gap-6 flex-grow">
-    <% if @category.articles.published.size == 0 %>
-    <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
-      <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
-    </div>
-    <% else %>
-    <% @category.articles.published.order(:position).each do |article| %>
-    <div id="<%= !@is_plain_layout_enabled ? 'category-block' : '' %>" class="<%= !@is_plain_layout_enabled ? 'border border-solid border-slate-100 dark:border-slate-800 rounded-lg' : 'group' %>">
-      <a
-        class="<%= !@is_plain_layout_enabled ? 'p-4' : 'px-0 py-1' %> text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
-        href="<%= generate_article_link(@portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>"
-      >
-        <div class="flex flex-col gap-5">
-          <div class="flex flex-col gap-1">
-            <h3 id="<%= !@is_plain_layout_enabled ? 'category-name' : '' %>" class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold <%= @is_plain_layout_enabled ? 'group-hover:underline' : '' %>"><%= article.title %></h3>
-            <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-1 break-all"><%= render_category_content(article.content) %></p>
-          </div>
-          <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
-        </div>
-      </a>
-    </div>
-    <% end %>
-    <% end %>
-  </div>
-</section>
+<%= render 'public/api/v1/portals/categories/article_list', category: @category, portal: @portal %>

app/views/public/api/v1/portals/search/_form.html.erb

@@ -1,10 +1,10 @@
-<%# locals: (input_class:) %>
+<%# locals: (input_class:, plain: false) %>
 <form class="w-full my-4" action="<%= request.path %>" method="GET" data-search-form>
   <input type="hidden" name="locale" value="<%= params[:locale] %>">
   <% if @theme_from_params.present? %>
     <input type="hidden" name="theme" value="<%= @theme_from_params %>">
   <% end %>
-  <% if @is_plain_layout_enabled %>
+  <% if plain %>
     <input type="hidden" name="show_plain_layout" value="true">
   <% end %>
   <input type="text"

app/views/public/api/v1/portals/search/_results.html.erb

@@ -0,0 +1,65 @@
+<%# locals: (plain: false) %>
+<% pagination_params = params.permit(:query, :locale, :theme, :show_plain_layout) %>
+
+<%= render 'public/api/v1/portals/search/search_handler' %>
+
+<section class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
+  <div class="w-full flex flex-col gap-6 flex-grow">
+    <% if @articles.empty? %>
+      <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
+        <p class="text-sm text-slate-500"><%= I18n.t('public_portal.search.no_results', query: @query) %></p>
+      </div>
+    <% else %>
+      <p class="text-sm text-slate-600 dark:text-slate-400">
+        <%= I18n.t('public_portal.search.found_results', count: @articles.total_count) %>
+      </p>
+
+      <% @articles.each do |article| %>
+        <div class="border border-solid border-slate-100 dark:border-slate-800 rounded-lg">
+          <a class="p-4 text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
+             href="<%= generate_article_link(@portal.slug, article.slug, @theme_from_params, plain) %>">
+            <div class="flex flex-col gap-5">
+              <div class="flex flex-col gap-1">
+                <h3 class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold">
+                  <%= article.title %>
+                </h3>
+                <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-2 break-all">
+                  <%= render_category_content(article.content) %>
+                </p>
+              </div>
+              <div class="flex flex-row items-center gap-2">
+                <% if article.category.present? %>
+                  <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+                    <%= article.category.name %>
+                  </span>
+                  <span class="text-slate-600 dark:text-slate-400">•</span>
+                <% end %>
+                <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+                  <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
+                </span>
+              </div>
+            </div>
+          </a>
+        </div>
+      <% end %>
+
+      <% if @articles.respond_to?(:total_pages) && @articles.total_pages > 1 %>
+        <div class="flex justify-center mt-6">
+          <nav class="inline-flex">
+            <% if @articles.prev_page %>
+              <a href="<%= url_for(pagination_params.merge(page: @articles.prev_page)) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-l-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
+                <%= I18n.t('public_portal.common.previous') %>
+              </a>
+            <% end %>
+
+            <% if @articles.next_page %>
+              <a href="<%= url_for(pagination_params.merge(page: @articles.next_page)) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-r-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
+                <%= I18n.t('public_portal.common.next') %>
+              </a>
+            <% end %>
+          </nav>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</section>

app/views/public/api/v1/portals/search/_results_header.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (search_input_class:, plain: false) %>
+<div class="flex flex-row items-center gap-px mb-6">
+  <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer hover:underline leading-8 font-semibold"
+     href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, plain) %>">
+    <%= I18n.t('public_portal.common.home') %>
+  </a>
+  <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
+    <%= render partial: 'icons/chevron-right' %>
+  </span>
+  <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+    <%= I18n.t('public_portal.search.results') %>
+  </span>
+</div>
+
+<h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
+  <%= I18n.t('public_portal.search.results_for', query: @query) %>
+</h1>
+
+<%= render 'public/api/v1/portals/search/form', input_class: search_input_class, plain: plain %>

app/views/public/api/v1/portals/search/index.html+plain.erb

@@ -0,0 +1,11 @@
+<% content_for :head do %>
+  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.localized_value('name', @locale) %></title>
+<% end %>
+
+<% search_input_class = 'w-full px-4 py-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent' %>
+
+<div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col py-4">
+  <%= render 'public/api/v1/portals/search/results_header', search_input_class: search_input_class, plain: true %>
+</div>
+
+<%= render 'public/api/v1/portals/search/results', plain: true %>

app/views/public/api/v1/portals/search/index.html.erb

@@ -4,115 +4,12 @@
 
 <% search_input_class = 'w-full px-4 py-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent' %>
 
-<% if !@is_plain_layout_enabled %>
-  <div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
-    <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
-      <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
-        <div class="flex flex-row items-center gap-px mb-6">
-          <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer hover:underline leading-8 font-semibold"
-             href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, @is_plain_layout_enabled) %>">
-            <%= I18n.t('public_portal.common.home') %>
-          </a>
-          <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
-            <%= render partial: 'icons/chevron-right' %>
-          </span>
-          <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
-            <%= I18n.t('public_portal.search.results') %>
-          </span>
-        </div>
-
-        <h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
-          <%= I18n.t('public_portal.search.results_for', query: @query) %>
-        </h1>
-
-        <%= render 'public/api/v1/portals/search/form', input_class: search_input_class %>
-      </div>
+<div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
+  <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
+    <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
+      <%= render 'public/api/v1/portals/search/results_header', search_input_class: search_input_class %>
     </div>
   </div>
-<% else %>
-  <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col py-4">
-    <div class="flex flex-row items-center gap-px mb-6">
-      <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer hover:underline leading-8 font-semibold"
-         href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, @is_plain_layout_enabled) %>">
-        <%= I18n.t('public_portal.common.home') %>
-      </a>
-      <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
-        <%= render partial: 'icons/chevron-right' %>
-      </span>
-      <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
-        <%= I18n.t('public_portal.search.results') %>
-      </span>
-    </div>
+</div>
 
-    <h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
-      <%= I18n.t('public_portal.search.results_for', query: @query) %>
-    </h1>
-
-    <%= render 'public/api/v1/portals/search/form', input_class: search_input_class %>
-  </div>
-<% end %>
-
-<% pagination_params = params.permit(:query, :locale, :theme, :show_plain_layout) %>
-
-<%= render 'public/api/v1/portals/search/search_handler' %>
-
-<section class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
-  <div class="w-full flex flex-col gap-6 flex-grow">
-    <% if @articles.empty? %>
-      <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
-        <p class="text-sm text-slate-500"><%= I18n.t('public_portal.search.no_results', query: @query) %></p>
-      </div>
-    <% else %>
-      <p class="text-sm text-slate-600 dark:text-slate-400">
-        <%= I18n.t('public_portal.search.found_results', count: @articles.total_count) %>
-      </p>
-
-      <% @articles.each do |article| %>
-        <div class="border border-solid border-slate-100 dark:border-slate-800 rounded-lg">
-          <a class="p-4 text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
-             href="<%= generate_article_link(@portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
-            <div class="flex flex-col gap-5">
-              <div class="flex flex-col gap-1">
-                <h3 class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold">
-                  <%= article.title %>
-                </h3>
-                <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-2 break-all">
-                  <%= render_category_content(article.content) %>
-                </p>
-              </div>
-              <div class="flex flex-row items-center gap-2">
-                <% if article.category.present? %>
-                  <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
-                    <%= article.category.name %>
-                  </span>
-                  <span class="text-slate-600 dark:text-slate-400">•</span>
-                <% end %>
-                <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
-                  <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
-                </span>
-              </div>
-            </div>
-          </a>
-        </div>
-      <% end %>
-
-      <% if @articles.respond_to?(:total_pages) && @articles.total_pages > 1 %>
-        <div class="flex justify-center mt-6">
-          <nav class="inline-flex">
-            <% if @articles.prev_page %>
-              <a href="<%= url_for(pagination_params.merge(page: @articles.prev_page)) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-l-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
-                <%= I18n.t('public_portal.common.previous') %>
-              </a>
-            <% end %>
-
-            <% if @articles.next_page %>
-              <a href="<%= url_for(pagination_params.merge(page: @articles.next_page)) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-r-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
-                <%= I18n.t('public_portal.common.next') %>
-              </a>
-            <% end %>
-          </nav>
-        </div>
-      <% end %>
-    <% end %>
-  </div>
-</section>
+<%= render 'public/api/v1/portals/search/results' %>