Merge branch 'develop' into feat/CW-7403

app/javascript/dashboard/api/assignableAgents.js

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

app/javascript/dashboard/api/calls.js

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

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

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

app/javascript/dashboard/api/dataImports.js

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

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

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

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

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

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

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

app/javascript/dashboard/api/reports.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
 import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
+import PopularContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -26,6 +27,7 @@ const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();
 
 const contentDialogRef = ref(null);
+const popularContentDialogRef = ref(null);
 
 const isLocaleDefault = code => {
   return props.portal?.meta?.default_locale === code;
@@ -154,6 +156,8 @@ const handleAction = ({ action }, localeCode) => {
     publishLocale({ localeCode: localeCode });
   } else if (action === 'customize-content') {
     contentDialogRef.value.openForLocale(localeCode);
+  } else if (action === 'select-popular-content') {
+    popularContentDialogRef.value.openForLocale(localeCode);
   } else if (action === 'delete') {
     deletePortalLocale({ localeCode: localeCode });
   }
@@ -174,5 +178,6 @@ const handleAction = ({ action }, localeCode) => {
       @action="handleAction($event, locale.code)"
     />
     <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
+    <PopularContentDialog ref="popularContentDialogRef" :portal="portal" />
   </ul>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue

@@ -0,0 +1,235 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDebounceFn } from '@vueuse/core';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useAbortableRequest } from 'dashboard/composables/useAbortableRequest';
+import categoriesAPI from 'dashboard/api/helpCenter/categories';
+import articlesAPI from 'dashboard/api/helpCenter/articles';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ReorderableMultiSelect from 'dashboard/components-next/combobox/ReorderableMultiSelect.vue';
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const MAX_CATEGORIES = 3;
+const MAX_ARTICLES = 6;
+const KEY = 'HELP_CENTER.LOCALES_PAGE.POPULAR_CONTENT_DIALOG';
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const activeLocale = ref('');
+// One flag per picker so each shows its skeleton until its own data loads.
+const categoriesLoading = ref(false);
+const { run: runArticleRequest, isPending: articlesLoading } =
+  useAbortableRequest();
+
+const categoryOptions = ref([]);
+const selectedCategoryIds = ref([]);
+
+// Articles are searched server-side, so cache options for selected items that
+// fall outside the current results.
+const articleResults = ref([]);
+const articleOptionById = ref({});
+const selectedArticleIds = ref([]);
+
+const popularContent = computed(
+  () => props.portal?.config?.popular_content || {}
+);
+
+const articleOptions = computed(() => {
+  const options = new Map();
+  selectedArticleIds.value.forEach(id => {
+    if (articleOptionById.value[id])
+      options.set(id, articleOptionById.value[id]);
+  });
+  articleResults.value.forEach(option => options.set(option.value, option));
+  return [...options.values()];
+});
+
+const toArticleOption = article => ({
+  value: article.id,
+  label: article.title,
+  subtitle: t(`${KEY}.ARTICLES.IN_CATEGORY`, {
+    category: article.category?.name || t(`${KEY}.ARTICLES.UNCATEGORIZED`),
+  }),
+});
+
+const fetchCategories = async localeCode => {
+  const {
+    data: { payload },
+  } = await categoriesAPI.get({
+    portalSlug: props.portal?.slug,
+    locale: localeCode,
+  });
+  return payload.map(category => ({
+    value: category.id,
+    label: category.name,
+    subtitle: t(`${KEY}.CATEGORIES.ARTICLES_COUNT`, {
+      count: category.meta?.articles_count || 0,
+    }),
+    icon: category.icon,
+    iconColor: category.icon_color,
+  }));
+};
+
+const requestArticles = async (query, signal) => {
+  const { data } = await articlesAPI.getArticles({
+    pageNumber: 1,
+    portalSlug: props.portal?.slug,
+    locale: activeLocale.value,
+    status: 'published',
+    query,
+    signal,
+  });
+  articleResults.value = data.payload.map(article => {
+    const option = toArticleOption(article);
+    articleOptionById.value[article.id] = option;
+    return option;
+  });
+};
+
+const searchArticles = (query = '') =>
+  runArticleRequest(signal => requestArticles(query, signal));
+
+const onArticleSearch = useDebounceFn(searchArticles, 300);
+
+// Resolve options for pre-selected articles that aren't in the current results.
+const cacheSelectedArticleOptions = async () => {
+  const unknownIds = selectedArticleIds.value.filter(
+    id => !articleOptionById.value[id]
+  );
+  await Promise.all(
+    unknownIds.map(async id => {
+      try {
+        const { data } = await articlesAPI.getArticle({
+          id,
+          portalSlug: props.portal?.slug,
+        });
+        articleOptionById.value[id] = toArticleOption(data.payload);
+      } catch {
+        // Deleted since it was picked; leave it for the id fallback.
+      }
+    })
+  );
+};
+
+const loadCategories = async localeCode => {
+  categoriesLoading.value = true;
+  try {
+    const options = await fetchCategories(localeCode);
+    // Reopened for another locale mid-flight; drop the stale response.
+    if (localeCode !== activeLocale.value) return;
+    categoryOptions.value = options;
+  } catch (error) {
+    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
+  } finally {
+    if (localeCode === activeLocale.value) categoriesLoading.value = false;
+  }
+};
+
+const loadArticles = async () => {
+  try {
+    await runArticleRequest(signal =>
+      Promise.all([cacheSelectedArticleOptions(), requestArticles('', signal)])
+    );
+  } catch (error) {
+    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
+  }
+};
+
+const openForLocale = localeCode => {
+  const existing = popularContent.value[localeCode] || {};
+  activeLocale.value = localeCode;
+  selectedCategoryIds.value = [...(existing.category_ids || [])];
+  selectedArticleIds.value = [...(existing.article_ids || [])];
+  categoryOptions.value = [];
+  articleResults.value = [];
+  articleOptionById.value = {};
+  dialogRef.value?.open();
+
+  loadCategories(localeCode);
+  loadArticles();
+};
+
+const onConfirm = async () => {
+  const updated = { ...popularContent.value };
+  const entry = {
+    category_ids: selectedCategoryIds.value,
+    article_ids: selectedArticleIds.value,
+  };
+
+  if (entry.category_ids.length || entry.article_ids.length) {
+    updated[activeLocale.value] = entry;
+  } else {
+    delete updated[activeLocale.value];
+  }
+
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal?.slug,
+      config: { popular_content: updated },
+    });
+    dialogRef.value?.close();
+    useAlert(t(`${KEY}.API.SUCCESS_MESSAGE`));
+  } catch (error) {
+    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
+  }
+};
+
+defineExpose({ openForLocale });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t(`${KEY}.TITLE`)"
+    :description="t(`${KEY}.DESCRIPTION`)"
+    :confirm-button-label="t(`${KEY}.CONFIRM`)"
+    @confirm="onConfirm"
+  >
+    <div class="flex flex-col gap-5">
+      <ReorderableMultiSelect
+        v-model="selectedCategoryIds"
+        :options="categoryOptions"
+        :max="MAX_CATEGORIES"
+        :label="t(`${KEY}.CATEGORIES.LABEL`)"
+        :add-label="t(`${KEY}.ADD_ANOTHER`)"
+        :search-placeholder="t(`${KEY}.SEARCH`)"
+        :empty-state="t(`${KEY}.EMPTY`)"
+        fallback-icon="i-lucide-folder"
+        :loading="categoriesLoading"
+      >
+        <template #counter="{ remaining }">
+          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
+        </template>
+        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
+      </ReorderableMultiSelect>
+      <ReorderableMultiSelect
+        v-model="selectedArticleIds"
+        server-search
+        :options="articleOptions"
+        :max="MAX_ARTICLES"
+        :label="t(`${KEY}.ARTICLES.LABEL`)"
+        :add-label="t(`${KEY}.ADD_ANOTHER`)"
+        :search-placeholder="t(`${KEY}.SEARCH`)"
+        :empty-state="t(`${KEY}.EMPTY`)"
+        :loading="articlesLoading"
+        @search="onArticleSearch"
+      >
+        <template #counter="{ remaining }">
+          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
+        </template>
+        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
+      </ReorderableMultiSelect>
+    </div>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/audio/AudioPlayer.vue

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

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -61,10 +61,10 @@ const triggerAction = () => {
     <div>
       <slot />
     </div>
-    <div>
+    <div class="flex-shrink-0">
       <button
         v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
+        class="px-3 py-1 w-auto grid place-content-center rounded-lg whitespace-nowrap"
         :class="buttonClass"
         @click="triggerAction"
       >

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/PageLayout.vue

@@ -182,7 +182,8 @@ const handleCreateAssistant = () => {
             </div>
           </div>
 
-          <div class="flex gap-2">
+          <div class="flex items-center gap-2">
+            <slot name="headerActions" />
             <slot name="search" />
             <div
               v-if="!showPaywall && buttonLabel"

app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue

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

app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue

@@ -66,6 +66,10 @@ const props = defineProps({
     type: Number,
     default: null,
   },
+  responsesCount: {
+    type: Number,
+    default: 0,
+  },
   isSelected: {
     type: Boolean,
     default: false,
@@ -112,10 +116,10 @@ const showSyncStatus = computed(() => !isPdf.value);
 const menuItems = computed(() => {
   const allOptions = [
     {
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
-      value: 'viewRelatedQuestions',
-      action: 'viewRelatedQuestions',
-      icon: 'i-ph-tree-view-duotone',
+      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_DETAILS'),
+      value: 'viewDetails',
+      action: 'viewDetails',
+      icon: 'i-lucide-eye',
     },
   ];
 
@@ -143,6 +147,9 @@ const menuItems = computed(() => {
 });
 
 const createdAtLabel = computed(() => dynamicTime(props.createdAt));
+const responsesCountLabel = computed(() =>
+  t('CAPTAIN.DOCUMENTS.FAQ_COUNT', { n: props.responsesCount })
+);
 
 const displayLink = computed(() =>
   isPdf.value
@@ -158,6 +165,10 @@ const handleAction = ({ action, value }) => {
   emit('action', { action, value, id: props.id });
 };
 
+const handleViewDetails = () => {
+  emit('action', { action: 'viewDetails', id: props.id });
+};
+
 const handleRetry = () => {
   emit('action', { action: 'sync', id: props.id });
 };
@@ -177,9 +188,13 @@ const handleRetry = () => {
       <Checkbox v-model="modelValue" />
     </div>
     <div class="flex gap-1 justify-between w-full">
-      <span class="text-base text-n-slate-12 line-clamp-1">
+      <button
+        type="button"
+        class="p-0 text-base text-left bg-transparent border-0 outline-transparent text-n-slate-12 line-clamp-1 underline-offset-2 hover:underline focus-visible:underline"
+        @click="handleViewDetails"
+      >
         {{ name }}
-      </span>
+      </button>
       <div v-if="showMenu" class="flex gap-2 items-center">
         <div
           v-on-clickaway="() => toggleDropdown(false)"
@@ -228,6 +243,9 @@ const handleRetry = () => {
         <Icon :icon="linkIcon" class="shrink-0" />
         <span class="truncate">{{ displayLink }}</span>
       </span>
+      <span class="text-sm shrink-0 text-n-slate-11">
+        {{ responsesCountLabel }}
+      </span>
       <DocumentSyncStatus
         v-if="showSyncStatus"
         :status="syncStatus"

app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue

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

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

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

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

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

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentDetails.spec.js

@@ -0,0 +1,86 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import DocumentDetails from './DocumentDetails.vue';
+
+const { dispatch, getterValues } = vi.hoisted(() => ({
+  dispatch: vi.fn(),
+  getterValues: {
+    'captainResponses/getUIFlags': { value: { fetchingList: false } },
+    'captainResponses/getRecords': { value: [] },
+    'captainResponses/getMeta': { value: { totalCount: 26, page: 1 } },
+  },
+}));
+
+vi.mock('dashboard/composables/store', () => ({
+  useStore: () => ({ dispatch }),
+  useMapGetter: key => getterValues[key],
+}));
+
+vi.mock('dashboard/composables', () => ({ useAlert: vi.fn() }));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: key => key }),
+}));
+
+const captainDocument = {
+  id: 42,
+  name: 'FAQ source',
+  external_link: 'https://example.com/docs',
+  assistant: { id: 7 },
+  content: 'Document content',
+  pdf_document: false,
+};
+
+const DialogStub = {
+  name: 'Dialog',
+  template: '<div><slot /></div>',
+};
+
+const TabBarStub = {
+  name: 'TabBar',
+  template:
+    '<button data-test="faq-tab" @click="$emit(\'tabChanged\', { key: \'faqs\' })" />',
+};
+
+const PaginationFooterStub = {
+  name: 'PaginationFooter',
+  template:
+    '<button data-test="next-page" @click="$emit(\'update:currentPage\', 2)" />',
+};
+
+describe('DocumentDetails', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    dispatch.mockResolvedValue([]);
+  });
+
+  it('requests another FAQ page when the document has more than 25 FAQs', async () => {
+    const wrapper = shallowMount(DocumentDetails, {
+      props: { captainDocument },
+      global: {
+        directives: { dompurifyHtml: {} },
+        stubs: {
+          Dialog: DialogStub,
+          TabBar: TabBarStub,
+          PaginationFooter: PaginationFooterStub,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(dispatch).toHaveBeenCalledWith('captainResponses/get', {
+      page: 1,
+      assistantId: 7,
+      documentId: 42,
+    });
+
+    await wrapper.get('[data-test="faq-tab"]').trigger('click');
+    await wrapper.get('[data-test="next-page"]').trigger('click');
+
+    expect(dispatch).toHaveBeenLastCalledWith('captainResponses/get', {
+      page: 2,
+      assistantId: 7,
+      documentId: 42,
+    });
+  });
+});

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentDetails.vue

@@ -0,0 +1,374 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+import {
+  isSafeHttpLink,
+  formatDocumentLink,
+  getDocumentDisplayPath,
+} from 'shared/helpers/documentHelper';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import ResponseCard from '../../assistant/ResponseCard.vue';
+
+const props = defineProps({
+  captainDocument: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['close']);
+const TAB_KEYS = {
+  CONTENT: 'content',
+  FAQS: 'faqs',
+};
+const RESPONSES_PER_PAGE = 25;
+const { t } = useI18n();
+const store = useStore();
+const dialogRef = ref(null);
+const documentDetails = computed(() => props.captainDocument);
+const showRawContent = ref(false);
+const activeTabIndex = ref(0);
+
+const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const responses = useMapGetter('captainResponses/getRecords');
+const meta = useMapGetter('captainResponses/getMeta');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+const totalCount = computed(() => meta.value.totalCount || 0);
+const currentPage = computed(() => meta.value.page || 1);
+const showPaginationFooter = computed(
+  () => totalCount.value > RESPONSES_PER_PAGE
+);
+const documentContent = computed(() => documentDetails.value?.content?.trim());
+const documentContentLength = computed(
+  () => documentContent.value?.length || 0
+);
+const isPdf = computed(() => documentDetails.value?.pdf_document);
+const displayUrl = computed(() => documentDetails.value?.display_url);
+const externalLink = computed(() => documentDetails.value?.external_link);
+const sourceHref = computed(() => displayUrl.value || externalLink.value);
+const hasSafeLink = computed(() => isSafeHttpLink(sourceHref.value));
+const displayLink = computed(() => {
+  if (isPdf.value) return formatDocumentLink(externalLink.value);
+  return getDocumentDisplayPath(displayUrl.value || externalLink.value);
+});
+const contentTabLabel = computed(() =>
+  isPdf.value
+    ? t('CAPTAIN.DOCUMENTS.DETAILS.PDF_TAB')
+    : t('CAPTAIN.DOCUMENTS.DETAILS.CONTENT_TAB')
+);
+const tabs = computed(() => [
+  { key: TAB_KEYS.CONTENT, label: contentTabLabel.value },
+  {
+    key: TAB_KEYS.FAQS,
+    label: t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE'),
+    count: totalCount.value,
+  },
+]);
+const activeTabKey = computed(() => tabs.value[activeTabIndex.value]?.key);
+const isUnreadableContent = computed(() => {
+  if (!documentContent.value) return false;
+
+  const content = documentContent.value;
+  const sample = content.slice(0, 2000);
+  const characters = Array.from(sample);
+  const nonPrintableCharacters = characters.filter(character => {
+    const charCode = character.charCodeAt(0);
+    return (
+      (charCode <= 31 && ![9, 10, 13].includes(charCode)) ||
+      (charCode >= 127 && charCode <= 159)
+    );
+  });
+  const nonPrintableRatio =
+    nonPrintableCharacters.length / Math.max(characters.length, 1);
+  const replacementCharacterRatio =
+    characters.filter(character => character === '\uFFFD').length /
+    Math.max(characters.length, 1);
+  const hasPdfObjectMarkers =
+    content.includes(' obj') &&
+    content.includes(' endobj') &&
+    content.includes(' stream');
+
+  return (
+    content.startsWith('%PDF') ||
+    hasPdfObjectMarkers ||
+    nonPrintableRatio > 0.02 ||
+    replacementCharacterRatio > 0.05
+  );
+});
+const formattedDocumentContent = computed(() => {
+  if (!documentContent.value || isUnreadableContent.value) return '';
+
+  const formatter = new MessageFormatter(documentContent.value);
+  formatter.disableImageRendering();
+  return formatter.formattedMessage;
+});
+const updatedAtLabel = computed(() => {
+  if (!documentDetails.value?.updated_at) return null;
+  return messageTimestamp(
+    documentDetails.value.updated_at,
+    'MMM d, yyyy h:mm a'
+  );
+});
+const syncedAtLabel = computed(() => {
+  if (!documentDetails.value?.last_synced_at) return null;
+  return messageTimestamp(
+    documentDetails.value.last_synced_at,
+    'MMM d, yyyy h:mm a'
+  );
+});
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCopyContent = async () => {
+  try {
+    await copyTextToClipboard(documentContent.value);
+    useAlert(t('CAPTAIN.DOCUMENTS.DETAILS.COPY_SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.DOCUMENTS.DETAILS.COPY_ERROR'));
+  }
+};
+
+const handleTabChanged = tab => {
+  activeTabIndex.value = tabs.value.findIndex(item => item.key === tab.key);
+};
+
+const fetchResponses = (page = 1) => {
+  return store.dispatch('captainResponses/get', {
+    page,
+    assistantId: props.captainDocument.assistant.id,
+    documentId: props.captainDocument.id,
+  });
+};
+
+const handlePageChange = page => {
+  fetchResponses(page);
+};
+
+onMounted(() => {
+  fetchResponses();
+});
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="documentDetails.name || documentDetails.external_link"
+    :description="t('CAPTAIN.DOCUMENTS.DETAILS.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+    width="3xl"
+    @close="handleClose"
+  >
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else class="flex flex-col gap-6 min-h-48">
+      <section class="flex flex-col gap-3">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium uppercase text-n-slate-10">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.SOURCE') }}
+            </span>
+            <a
+              v-if="hasSafeLink"
+              :href="sourceHref"
+              :title="sourceHref"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center min-w-0 gap-1 text-sm text-n-slate-12 hover:underline"
+            >
+              <Icon icon="i-lucide-external-link" class="size-3 shrink-0" />
+              <span class="truncate">{{ displayLink }}</span>
+            </a>
+            <span v-else class="text-sm truncate text-n-slate-12">
+              {{ displayLink }}
+            </span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium uppercase text-n-slate-10">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.GENERATED_FAQS') }}
+            </span>
+            <span class="text-sm text-n-slate-12">
+              {{ totalCount }}
+            </span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium uppercase text-n-slate-10">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.LAST_UPDATED') }}
+            </span>
+            <span class="text-sm text-n-slate-12">
+              {{
+                syncedAtLabel ||
+                updatedAtLabel ||
+                t('CAPTAIN.DOCUMENTS.DETAILS.NOT_AVAILABLE')
+              }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTabIndex"
+        @tab-changed="handleTabChanged"
+      />
+
+      <div class="h-[32rem] overflow-y-auto">
+        <section
+          v-if="activeTabKey === TAB_KEYS.CONTENT"
+          class="flex flex-col gap-3"
+        >
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div class="flex flex-col gap-1">
+              <h4 class="text-sm font-medium text-n-slate-12">
+                {{
+                  isPdf
+                    ? t('CAPTAIN.DOCUMENTS.DETAILS.PDF_TITLE')
+                    : t('CAPTAIN.DOCUMENTS.DETAILS.CONTENT_TITLE')
+                }}
+              </h4>
+              <span
+                v-if="documentContent && !isPdf"
+                class="text-xs text-n-slate-10"
+              >
+                {{
+                  t('CAPTAIN.DOCUMENTS.DETAILS.CHARACTER_COUNT', {
+                    count: documentContentLength.toLocaleString(),
+                  })
+                }}
+              </span>
+            </div>
+            <div
+              v-if="documentContent && !isPdf"
+              class="flex flex-wrap items-center justify-end gap-4"
+            >
+              <Button
+                :label="
+                  showRawContent
+                    ? t('CAPTAIN.DOCUMENTS.DETAILS.VIEW_PREVIEW')
+                    : t('CAPTAIN.DOCUMENTS.DETAILS.VIEW_RAW')
+                "
+                sm
+                slate
+                link
+                @click="showRawContent = !showRawContent"
+              />
+              <Button
+                :label="t('CAPTAIN.DOCUMENTS.DETAILS.COPY_CONTENT')"
+                icon="i-lucide-copy"
+                sm
+                slate
+                link
+                @click="handleCopyContent"
+              />
+            </div>
+          </div>
+          <div
+            v-if="isPdf"
+            class="rounded-lg border border-n-weak bg-n-alpha-1 p-4 text-sm text-n-slate-11"
+          >
+            <p class="mb-3">
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.PDF_DESCRIPTION') }}
+            </p>
+            <a
+              v-if="hasSafeLink"
+              :href="sourceHref"
+              :title="sourceHref"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-1 font-medium text-n-blue-11 hover:underline"
+            >
+              <Icon icon="i-ph-file-pdf" class="size-4" />
+              {{ displayLink }}
+              <Icon icon="i-lucide-external-link" class="size-3" />
+            </a>
+            <span v-else class="inline-flex items-center gap-1 text-n-slate-12">
+              <Icon icon="i-ph-file-pdf" class="size-4" />
+              {{ displayLink }}
+            </span>
+          </div>
+          <template v-else-if="documentContent">
+            <div
+              v-if="isUnreadableContent && !showRawContent"
+              class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
+            >
+              {{ t('CAPTAIN.DOCUMENTS.DETAILS.UNREADABLE_CONTENT') }}
+            </div>
+            <div
+              v-else
+              class="h-[26rem] overflow-y-auto rounded-lg border border-n-weak bg-n-alpha-1 p-4"
+            >
+              <pre
+                v-if="showRawContent || isUnreadableContent"
+                class="m-0 whitespace-pre-wrap break-words text-xs leading-5 text-n-slate-12"
+              ><code>{{ documentContent }}</code></pre>
+              <div
+                v-else
+                v-dompurify-html="formattedDocumentContent"
+                class="prose prose-sm max-w-none break-words text-n-slate-12 prose-p:my-2 prose-headings:mb-2 prose-headings:mt-4 prose-a:text-n-blue-11 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-img:hidden"
+              />
+            </div>
+          </template>
+          <div
+            v-else
+            class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
+          >
+            {{ t('CAPTAIN.DOCUMENTS.DETAILS.EMPTY_CONTENT') }}
+          </div>
+        </section>
+
+        <section
+          v-if="activeTabKey === TAB_KEYS.FAQS"
+          class="flex flex-col gap-3"
+        >
+          <div v-if="responses.length" class="flex flex-col gap-3">
+            <ResponseCard
+              v-for="response in responses"
+              :id="response.id"
+              :key="response.id"
+              :question="response.question"
+              :status="response.status"
+              :answer="response.answer"
+              :assistant="response.assistant"
+              :created-at="response.created_at"
+              :updated-at="response.updated_at"
+              compact
+            />
+          </div>
+          <div
+            v-else
+            class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
+          >
+            {{ t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.EMPTY') }}
+          </div>
+          <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
+            <PaginationFooter
+              :current-page="currentPage"
+              :total-items="totalCount"
+              :items-per-page="RESPONSES_PER_PAGE"
+              class="!px-0"
+              @update:current-page="handlePageChange"
+            />
+          </footer>
+        </section>
+      </div>
+    </div>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue

@@ -1,71 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ResponseCard from '../../assistant/ResponseCard.vue';
-const props = defineProps({
-  captainDocument: {
-    type: Object,
-    required: true,
-  },
-});
-const emit = defineEmits(['close']);
-const { t } = useI18n();
-const store = useStore();
-const dialogRef = ref(null);
-
-const uiFlags = useMapGetter('captainResponses/getUIFlags');
-const responses = useMapGetter('captainResponses/getRecords');
-const meta = useMapGetter('captainResponses/getMeta');
-const isFetching = computed(() => uiFlags.value.fetchingList);
-const totalCount = computed(() => meta.value.totalCount || 0);
-
-const handleClose = () => {
-  emit('close');
-};
-
-onMounted(() => {
-  store.dispatch('captainResponses/get', {
-    assistantId: props.captainDocument.assistant.id,
-    documentId: props.captainDocument.id,
-  });
-});
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="`${t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')} (${totalCount})`"
-    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    overflow-y-auto
-    width="3xl"
-    @close="handleClose"
-  >
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else class="flex flex-col gap-3 min-h-48">
-      <ResponseCard
-        v-for="response in responses"
-        :id="response.id"
-        :key="response.id"
-        :question="response.question"
-        :status="response.status"
-        :answer="response.answer"
-        :assistant="response.assistant"
-        :created-at="response.created_at"
-        :updated-at="response.updated_at"
-        compact
-      />
-    </div>
-  </Dialog>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import CaptainAssistant from 'dashboard/api/captain/assistant';
+import { useReportDrilldown } from 'dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown';
+import ReportDrilldownCard from 'dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  assistantId: { type: [String, Number], default: null },
+  metric: { type: String, default: '' },
+  metricName: { type: String, default: '' },
+  metricValue: { type: String, default: '' },
+  range: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+const drawerRef = ref(null);
+const {
+  records,
+  meta,
+  isFetching,
+  isFetchingMore,
+  hasError,
+  hasRecords,
+  hasMore,
+  open: openDrilldown,
+  close,
+  loadMore,
+} = useReportDrilldown(params => CaptainAssistant.getDrilldown(params));
+
+let previousActiveElement = null;
+
+const isOpen = computed(() => props.open);
+const title = computed(() => props.metricName || '');
+
+const subtitle = computed(() => {
+  if (!meta.value.conversation_count) return '';
+
+  return t('CAPTAIN.OVERVIEW.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
+    count: meta.value.conversation_count,
+  });
+});
+
+const recordKey = record => `${record.conversation?.id}-${record.occurred_at}`;
+
+const restoreFocus = () => {
+  if (previousActiveElement?.isConnected) {
+    previousActiveElement.focus();
+  }
+  previousActiveElement = null;
+};
+
+const closeDrawer = () => {
+  close();
+  emit('close');
+  restoreFocus();
+};
+
+const rememberActiveElement = () => {
+  if (previousActiveElement) return;
+
+  previousActiveElement =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+};
+
+const focusDrawer = () => {
+  nextTick(() => drawerRef.value?.focus());
+};
+
+const fetchDrilldown = () => {
+  if (!props.metric || !props.assistantId) return;
+
+  openDrilldown({
+    assistantId: props.assistantId,
+    metric: props.metric,
+    range: props.range,
+  });
+};
+
+const onKeydown = event => {
+  if (!isOpen.value) return;
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    closeDrawer();
+  }
+};
+
+useEventListener(document, 'keydown', onKeydown);
+
+watch(
+  () => props.open,
+  isDrawerOpen => {
+    if (!isDrawerOpen) {
+      close();
+      restoreFocus();
+      return;
+    }
+
+    rememberActiveElement();
+    fetchDrilldown();
+    focusDrawer();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.metric, props.range],
+  () => {
+    if (props.open) fetchDrilldown();
+  }
+);
+
+// The drawer's headline value is a snapshot of the previous assistant's card,
+// so switching assistants (e.g. browser Back/Forward) closes it instead of
+// refetching records that would no longer match the header.
+watch(
+  () => props.assistantId,
+  () => {
+    if (props.open) closeDrawer();
+  }
+);
+
+onBeforeUnmount(() => {
+  restoreFocus();
+});
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <Transition name="report-drilldown-fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 bg-black/30"
+        role="presentation"
+        @click.self="closeDrawer"
+      >
+        <aside
+          ref="drawerRef"
+          class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="title"
+          tabindex="-1"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-n-weak px-6 py-5"
+          >
+            <div class="min-w-0">
+              <h2 class="truncate text-base font-medium text-n-slate-12">
+                {{ title }}
+              </h2>
+              <p
+                v-if="metricValue"
+                class="mt-1 text-xl font-semibold text-n-slate-12"
+              >
+                {{ metricValue }}
+              </p>
+              <div
+                class="text-sm text-n-slate-11"
+                :class="{
+                  'mt-2': metricValue,
+                  'mt-1': !metricValue,
+                }"
+              >
+                {{ subtitle }}
+              </div>
+            </div>
+            <Button
+              ghost
+              slate
+              size="sm"
+              icon="i-ph-x"
+              :aria-label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.CLOSE')"
+              @click="closeDrawer"
+            />
+          </header>
+
+          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-3">
+            <div
+              v-if="isFetching"
+              class="flex h-40 items-center justify-center"
+            >
+              <Spinner />
+            </div>
+
+            <div
+              v-else-if="hasError"
+              class="flex h-40 items-center justify-center text-sm text-n-ruby-11"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.ERROR') }}
+            </div>
+
+            <div
+              v-else-if="!hasRecords"
+              class="flex h-40 items-center justify-center text-sm text-n-slate-10"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.EMPTY') }}
+            </div>
+
+            <div v-else class="flex flex-col gap-2">
+              <ReportDrilldownCard
+                v-for="record in records"
+                :key="recordKey(record)"
+                :record="record"
+              />
+
+              <Button
+                v-if="hasMore"
+                faded
+                slate
+                size="sm"
+                class="mx-auto mt-2"
+                :label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.LOAD_MORE')"
+                :is-loading="isFetchingMore"
+                @click="loadMore"
+              />
+            </div>
+          </div>
+        </aside>
+      </div>
+    </Transition>
+  </TeleportWithDirection>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/CoverageBanner.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { LocalStorage } from 'shared/helpers/localStorage';
+
+const props = defineProps({
+  knowledge: {
+    type: Object,
+    default: () => ({ approved: 0, pending: 0, documents: 0, coverage: 0 }),
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+
+// Dismissal is remembered per assistant for 24 hours (setFlag's default expiry).
+const DISMISS_STORE = 'captain_overview_coverage_banner';
+
+const accountId = computed(() => route.params.accountId);
+const assistantId = computed(() => route.params.assistantId);
+
+// Re-read the stored flag whenever the assistant changes, otherwise the banner
+// would keep the first assistant's dismissed state after switching.
+const dismissed = ref(false);
+
+watch(
+  [accountId, assistantId],
+  ([account, assistant]) => {
+    dismissed.value = LocalStorage.getFlag(DISMISS_STORE, account, assistant);
+  },
+  { immediate: true }
+);
+
+// Thin coverage paired with a large review backlog: approving the pending FAQs
+// is the quickest lever to lift auto-resolution, so nudge the team to act.
+const COVERAGE_THRESHOLD = 85;
+const PENDING_THRESHOLD = 100;
+
+const showBanner = computed(
+  () =>
+    !dismissed.value &&
+    (props.knowledge?.coverage ?? 0) < COVERAGE_THRESHOLD &&
+    (props.knowledge?.pending ?? 0) > PENDING_THRESHOLD
+);
+
+const dismiss = () => {
+  LocalStorage.setFlag(DISMISS_STORE, accountId.value, assistantId.value);
+  dismissed.value = true;
+};
+
+const goToPending = () => {
+  router.push({
+    name: 'captain_assistants_responses_pending',
+    params: {
+      accountId: route.params.accountId,
+      assistantId: route.params.assistantId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div
+    v-if="showBanner"
+    class="flex items-center justify-between gap-3 px-3 py-2 text-sm border rounded-xl bg-n-amber-3 border-n-amber-4 text-n-amber-11"
+  >
+    <div class="flex items-center gap-2 min-w-0">
+      <span class="shrink-0 i-lucide-triangle-alert size-4" />
+      <span class="truncate">
+        {{
+          $t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.TEXT', {
+            count: knowledge.pending,
+            coverage: knowledge.coverage,
+          })
+        }}
+      </span>
+    </div>
+    <div class="flex items-center gap-1 shrink-0">
+      <button
+        type="button"
+        class="px-3 py-1 rounded-lg bg-n-amber-4 hover:bg-n-amber-5"
+        @click="goToPending"
+      >
+        {{ $t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.ACTION') }}
+      </button>
+      <button
+        type="button"
+        class="grid rounded-lg size-7 place-content-center hover:bg-n-amber-4"
+        :aria-label="$t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.DISMISS')"
+        @click="dismiss"
+      >
+        <span class="i-lucide-x size-4" />
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const dismissed = ref(false);
+
+const assistantId = computed(() => route.params.assistantId);
+const inboxes = useMapGetter('captainInboxes/getRecords');
+const uiFlags = useMapGetter('captainInboxes/getUIFlags');
+
+// Only surface once we know the assistant has no connected inboxes.
+const showBanner = computed(
+  () =>
+    !dismissed.value &&
+    !uiFlags.value.fetchingList &&
+    inboxes.value.length === 0
+);
+
+watch(
+  assistantId,
+  id => {
+    dismissed.value = false;
+    if (id) store.dispatch('captainInboxes/get', { assistantId: id });
+  },
+  { immediate: true }
+);
+
+const goToInboxes = () => {
+  router.push({
+    name: 'captain_assistants_inboxes_index',
+    params: {
+      accountId: route.params.accountId,
+      assistantId: assistantId.value,
+    },
+  });
+};
+</script>
+
+<template>
+  <div
+    v-if="showBanner"
+    class="flex items-center justify-between gap-3 px-3 py-2 text-sm border rounded-xl bg-n-amber-3 border-n-amber-4 text-n-amber-11"
+  >
+    <div class="flex items-center gap-2 min-w-0">
+      <span class="shrink-0 i-lucide-triangle-alert size-4" />
+      <span class="truncate">
+        {{ $t('CAPTAIN.OVERVIEW.INBOX_BANNER.TEXT') }}
+      </span>
+    </div>
+    <div class="flex items-center gap-1 shrink-0">
+      <button
+        type="button"
+        class="px-3 py-1 rounded-lg bg-n-amber-4 hover:bg-n-amber-5"
+        @click="goToInboxes"
+      >
+        {{ $t('CAPTAIN.OVERVIEW.INBOX_BANNER.ACTION') }}
+      </button>
+      <button
+        type="button"
+        class="grid rounded-lg size-7 place-content-center hover:bg-n-amber-4"
+        :aria-label="$t('CAPTAIN.OVERVIEW.INBOX_BANNER.DISMISS')"
+        @click="dismissed = true"
+      >
+        <span class="i-lucide-x size-4" />
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  knowledge: {
+    type: Object,
+    default: () => ({ approved: 0, pending: 0, documents: 0, coverage: 0 }),
+  },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+
+const approvedPct = computed(() => props.knowledge.coverage ?? 0);
+
+const linkTo = routeName => ({
+  name: routeName,
+  params: {
+    accountId: route.params.accountId,
+    assistantId: route.params.assistantId,
+  },
+});
+
+const stats = computed(() => [
+  {
+    key: 'approved',
+    value: props.knowledge.approved,
+    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.APPROVED'),
+    to: linkTo('captain_assistants_responses_index'),
+  },
+  {
+    key: 'pending',
+    value: props.knowledge.pending,
+    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.PENDING'),
+    to: linkTo('captain_assistants_responses_pending'),
+  },
+  {
+    key: 'documents',
+    value: props.knowledge.documents,
+    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.DOCUMENTS'),
+    to: linkTo('captain_assistants_documents_index'),
+  },
+]);
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-4 p-5 border rounded-xl bg-n-solid-1 border-n-weak"
+  >
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium text-n-slate-12">
+        {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.TITLE') }}
+      </span>
+      <span class="text-sm tabular-nums text-n-slate-11">
+        {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.COVERAGE', { pct: approvedPct }) }}
+      </span>
+    </div>
+    <div class="w-full h-2 overflow-hidden rounded-full bg-n-alpha-2">
+      <div
+        class="h-full rounded-full bg-n-brand"
+        :style="{ width: `${approvedPct}%` }"
+      />
+    </div>
+    <div class="grid grid-cols-3 gap-3">
+      <RouterLink
+        v-for="stat in stats"
+        :key="stat.key"
+        :to="stat.to"
+        class="flex flex-col gap-1 group/stat"
+      >
+        <span class="text-xl font-semibold tabular-nums text-n-slate-12">
+          {{ stat.value }}
+        </span>
+        <span
+          class="inline-flex items-center gap-1 text-xs transition-colors text-n-slate-11 group-hover/stat:text-n-slate-12"
+        >
+          {{ stat.label }}
+          <span
+            class="transition-opacity opacity-0 i-lucide-arrow-up-right size-3 group-hover/stat:opacity-100"
+          />
+        </span>
+      </RouterLink>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  value: { type: String, required: true },
+  trend: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  // null = neutral, true = good direction, false = bad direction
+  trendGood: { type: Boolean, default: null },
+  clickable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['click']);
+
+const trendClass = computed(() => {
+  if (props.trendGood === null) return 'text-n-slate-11';
+  return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
+});
+
+const onActivate = () => {
+  if (props.clickable) emit('click');
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-3 p-5 group bg-n-solid-1"
+    :class="
+      clickable
+        ? 'cursor-pointer transition-colors hover:bg-n-slate-2/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand'
+        : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="onActivate"
+    @keydown.enter.self.prevent="onActivate"
+    @keydown.space.self.prevent="onActivate"
+  >
+    <div class="flex items-center gap-1.5">
+      <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
+      <span
+        v-if="hint"
+        v-tooltip="hint"
+        class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
+      />
+    </div>
+    <div class="flex items-end justify-between gap-2">
+      <span
+        class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
+      >
+        {{ value }}
+      </span>
+      <span class="text-sm font-medium tabular-nums" :class="trendClass">
+        {{ trend }}
+      </span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/QuickLinks.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute, RouterLink } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { getHelpUrlForFeature } from 'dashboard/helper/featureHelper';
+
+const { t } = useI18n();
+const route = useRoute();
+const { isOnChatwootCloud } = useAccount();
+
+const assistantParams = computed(() => ({
+  accountId: route.params.accountId,
+  assistantId: route.params.assistantId,
+}));
+
+const links = computed(() => [
+  {
+    key: 'docs',
+    title: t('CAPTAIN.OVERVIEW.LINKS.DOCS.TITLE'),
+    description: t('CAPTAIN.OVERVIEW.LINKS.DOCS.DESCRIPTION'),
+    icon: 'i-lucide-book-open',
+    href: getHelpUrlForFeature('captain'),
+  },
+  {
+    key: 'playground',
+    title: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.TITLE'),
+    description: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.DESCRIPTION'),
+    icon: 'i-lucide-flask-conical',
+    to: {
+      name: 'captain_assistants_playground_index',
+      params: assistantParams.value,
+    },
+  },
+  {
+    key: 'billing',
+    title: t('CAPTAIN.OVERVIEW.LINKS.BILLING.TITLE'),
+    description: t('CAPTAIN.OVERVIEW.LINKS.BILLING.DESCRIPTION'),
+    icon: 'i-lucide-credit-card',
+    to: {
+      name: 'billing_settings_index',
+      params: { accountId: route.params.accountId },
+    },
+  },
+]);
+</script>
+
+<template>
+  <div v-if="isOnChatwootCloud" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <component
+      :is="link.href ? 'a' : RouterLink"
+      v-for="link in links"
+      :key="link.key"
+      :href="link.href"
+      :to="link.to"
+      :target="link.href ? '_blank' : undefined"
+      :rel="link.href ? 'noopener noreferrer' : undefined"
+      class="flex items-center gap-3 p-4 transition-colors border rounded-xl bg-n-solid-1 border-n-weak hover:bg-n-alpha-1 group/link"
+    >
+      <span
+        class="grid rounded-lg size-9 shrink-0 place-content-center bg-n-alpha-2 text-n-slate-11"
+      >
+        <span :class="link.icon" class="size-4" />
+      </span>
+      <div class="flex flex-col min-w-0">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ link.title }}
+        </span>
+        <span class="text-xs truncate text-n-slate-11">
+          {{ link.description }}
+        </span>
+      </div>
+      <span
+        :class="
+          link.href ? 'i-lucide-arrow-up-right' : 'i-lucide-chevron-right'
+        "
+        class="ml-auto transition-opacity opacity-0 size-4 text-n-slate-10 group-hover/link:opacity-100"
+      />
+    </component>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/RangeSelector.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const modelValue = defineModel({ type: String, default: '30' });
+
+const { t } = useI18n();
+const [showDropdown, toggleDropdown] = useToggle();
+
+const DAY_RANGES = ['7', '30', '90'];
+
+const decorate = item => ({
+  ...item,
+  action: 'select',
+  isSelected: item.value === modelValue.value,
+});
+
+const menuSections = computed(() => {
+  const dayItems = DAY_RANGES.map(value =>
+    decorate({
+      value,
+      label: t('CAPTAIN.OVERVIEW.RANGES.LAST_DAYS', { count: value }),
+    })
+  );
+  const monthItems = [
+    decorate({
+      value: 'this_month',
+      label: t('CAPTAIN.OVERVIEW.RANGES.THIS_MONTH'),
+    }),
+    decorate({
+      value: 'last_month',
+      label: t('CAPTAIN.OVERVIEW.RANGES.LAST_MONTH'),
+    }),
+  ];
+  return [{ items: dayItems }, { items: monthItems }];
+});
+
+const menuItems = computed(() =>
+  menuSections.value.flatMap(section => section.items)
+);
+
+const selectedLabel = computed(
+  () => menuItems.value.find(item => item.isSelected)?.label || ''
+);
+
+const handleAction = ({ value }) => {
+  toggleDropdown(false);
+  modelValue.value = value;
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => toggleDropdown(false)"
+    class="relative flex items-center group"
+  >
+    <Button
+      sm
+      slate
+      faded
+      trailing-icon
+      icon="i-lucide-chevron-down"
+      :label="selectedLabel"
+      class="rounded-md group-hover:bg-n-alpha-2"
+      @click="toggleDropdown()"
+    />
+    <DropdownMenu
+      v-if="showDropdown"
+      :menu-sections="menuSections"
+      class="mt-1 ltr:right-0 rtl:left-0 top-full"
+      @action="handleAction($event)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/WelcomeCard.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import CaptainAssistant from 'dashboard/api/captain/assistant';
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+
+const props = defineProps({
+  range: {
+    type: String,
+    default: '30',
+  },
+});
+
+const route = useRoute();
+const assistantId = computed(() => route.params.assistantId);
+
+// Markdown summary generated by the model from the assistant's stats (served by
+// the captain/assistants/:id/summary endpoint). Numbers are emphasised with
+// **bold** so we can highlight them (see prose-strong styling below).
+const welcomeMarkdown = ref('');
+const isLoading = ref(false);
+
+const fetchSummary = async () => {
+  isLoading.value = true;
+  try {
+    const { data } = await CaptainAssistant.getSummary({
+      assistantId: assistantId.value,
+      range: props.range,
+    });
+    welcomeMarkdown.value = data.message ?? '';
+  } catch {
+    welcomeMarkdown.value = '';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+watch([() => props.range, assistantId], fetchSummary, { immediate: true });
+
+// Render through the shared markdown formatter (html disabled, so it is safe)
+// used everywhere else for Captain output, instead of a bespoke parser. It
+// handles paragraphs, line breaks, links, lists and emphasis consistently.
+const formattedSummary = computed(
+  () => new MessageFormatter(welcomeMarkdown.value).formattedMessage
+);
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="isLoading || welcomeMarkdown" class="flex flex-col gap-3">
+    <div class="flex items-center gap-1.5 text-n-slate-10">
+      <span class="i-lucide-sparkles size-3.5" />
+      <span class="text-xs">
+        {{ $t('CAPTAIN.OVERVIEW.WELCOME.LABEL') }}
+      </span>
+    </div>
+    <div
+      v-if="isLoading"
+      class="flex flex-col gap-5"
+      :aria-label="$t('CAPTAIN.OVERVIEW.WELCOME.LOADING')"
+    >
+      <div class="flex flex-col gap-2.5">
+        <div class="w-full h-5 rounded bg-n-slate-3 animate-pulse" />
+        <div class="w-11/12 h-5 rounded bg-n-slate-3 animate-pulse" />
+        <div class="w-4/6 h-5 rounded bg-n-slate-3 animate-pulse" />
+      </div>
+      <div class="w-5/6 h-5 rounded bg-n-slate-3 animate-pulse" />
+    </div>
+    <div
+      v-else
+      v-dompurify-html="formattedSummary"
+      class="max-w-none prose prose-p:text-lg prose-p:leading-relaxed prose-p:mt-0 prose-p:mb-3 last:prose-p:mb-0 prose-strong:font-bold prose-strong:tabular-nums prose-strong:text-n-brand text-n-slate-12"
+    />
+  </div>
+</template>

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

@@ -65,7 +65,7 @@ const handleAssistantChange = async assistant => {
 
   const currentRouteName = route.name;
   const targetRouteName =
-    currentRouteName || 'captain_assistants_responses_index';
+    currentRouteName || 'captain_assistants_overview_index';
 
   await fetchDataForRoute(targetRouteName, assistant.id);
 
@@ -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/components-next/combobox/ComboBoxDropdown.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   open: {
@@ -27,6 +29,10 @@ const props = defineProps({
     type: [String, Number, Array],
     default: () => [],
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['select', 'search']);
@@ -63,13 +69,22 @@ defineExpose({
     class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
   >
     <div class="relative border-b border-n-strong">
-      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
+      <Spinner
+        v-if="loading"
+        :size="16"
+        class="absolute top-2.5 start-3 text-n-slate-11"
+      />
+      <Icon
+        v-else
+        icon="i-lucide-search"
+        class="absolute top-2.5 size-4 start-3"
+      />
       <input
         ref="searchInput"
         :value="searchValue"
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full py-2 !ps-10 !pe-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
         @input="onInputSearch"
       />
     </div>

app/javascript/dashboard/components-next/combobox/ReorderableMultiSelect.vue

@@ -0,0 +1,297 @@
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+// Drag-reorderable multi-select capped at `max`. The model is the ordered list
+// of selected values.
+const props = defineProps({
+  // { value, label, subtitle?, icon?, iconColor? } — icon is an emoji or an
+  // icon-picker value, and falls back to `fallbackIcon`.
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  max: {
+    type: Number,
+    default: 3,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  addLabel: {
+    type: String,
+    default: '',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  fallbackIcon: {
+    type: String,
+    default: 'i-lucide-file-text',
+  },
+  // Show skeleton rows while options load, so the row height stays stable.
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // Let the parent filter `options` (via the `search` event) instead of locally.
+  serverSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['search']);
+
+const selectedIds = defineModel({ type: Array, default: () => [] });
+
+const isOpen = ref(false);
+const searchQuery = ref('');
+const dragIndex = ref(null);
+const dropdownRef = ref(null);
+
+const optionsByValue = computed(
+  () => new Map(props.options.map(option => [option.value, option]))
+);
+
+const selectedRows = computed(() =>
+  selectedIds.value.map(
+    id => optionsByValue.value.get(id) || { value: id, label: String(id) }
+  )
+);
+
+const remaining = computed(() => props.max - selectedIds.value.length);
+
+const canAddMore = computed(() => selectedIds.value.length < props.max);
+
+const dropdownOptions = computed(() => {
+  const available = props.options.filter(
+    option => !selectedIds.value.includes(option.value)
+  );
+  if (props.serverSearch) return available;
+
+  const query = searchQuery.value.toLowerCase();
+  return available.filter(option =>
+    option.label?.toLowerCase().includes(query)
+  );
+});
+
+const onSearch = value => {
+  searchQuery.value = value;
+  emit('search', value);
+};
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    onSearch('');
+    nextTick(() => dropdownRef.value?.focus());
+  }
+};
+
+const onSelect = option => {
+  if (!canAddMore.value) return;
+  selectedIds.value = [...selectedIds.value, option.value];
+  if (!canAddMore.value) isOpen.value = false;
+};
+
+const removeItem = id => {
+  selectedIds.value = selectedIds.value.filter(value => value !== id);
+};
+
+const onDragStart = index => {
+  dragIndex.value = index;
+};
+
+const onDragOver = index => {
+  if (dragIndex.value === null || dragIndex.value === index) return;
+  const ids = [...selectedIds.value];
+  const [moved] = ids.splice(dragIndex.value, 1);
+  ids.splice(index, 0, moved);
+  dragIndex.value = index;
+  selectedIds.value = ids;
+};
+
+const onDragEnd = () => {
+  dragIndex.value = null;
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="label || $slots.counter"
+      class="flex items-center justify-between mb-1.5"
+    >
+      <label class="text-sm font-medium text-n-slate-12">{{ label }}</label>
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-n-slate-10">
+          <slot name="counter" :remaining="remaining" :max="max" />
+        </span>
+        <div class="flex items-center gap-1">
+          <span
+            v-for="slot in max"
+            :key="slot"
+            class="w-4 h-1 rounded-full"
+            :class="slot <= selectedIds.length ? 'bg-n-brand' : 'bg-n-slate-4'"
+          />
+        </div>
+      </div>
+    </div>
+
+    <OnClickOutside @trigger="isOpen = false">
+      <div
+        class="flex flex-col gap-1 p-1 border rounded-xl border-n-weak bg-n-background"
+        :class="{ 'opacity-50 pointer-events-none': disabled }"
+      >
+        <div
+          v-if="loading && selectedIds.length && !isOpen"
+          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
+          aria-busy="true"
+        >
+          <div
+            v-for="n in selectedIds.length"
+            :key="n"
+            class="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-n-alpha-2"
+          >
+            <span
+              class="flex-shrink-0 opacity-40 i-lucide-grip-vertical size-4 text-n-slate-9"
+            />
+            <div class="flex-shrink-0 rounded-md size-6 bg-n-alpha-3" />
+            <div class="flex-grow min-w-0">
+              <p class="mb-0 text-sm">
+                <span
+                  class="inline-block w-32 h-2.5 align-middle rounded bg-n-alpha-3 animate-pulse"
+                />
+              </p>
+              <p class="mb-0 text-xs">
+                <span
+                  class="inline-block w-20 h-2 align-middle rounded bg-n-alpha-3 animate-pulse"
+                />
+              </p>
+            </div>
+            <span class="flex-shrink-0 size-6" />
+          </div>
+        </div>
+
+        <div
+          v-else-if="selectedRows.length"
+          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
+        >
+          <div
+            v-for="(row, index) in selectedRows"
+            :key="row.value"
+            draggable="true"
+            class="flex items-center gap-2 px-2 py-1.5 transition-colors rounded-lg cursor-grab group/row"
+            :class="
+              index === dragIndex
+                ? 'opacity-40 bg-n-alpha-3 ring-1 ring-inset ring-n-brand'
+                : 'bg-n-alpha-2 hover:bg-n-alpha-3'
+            "
+            @dragstart="onDragStart(index)"
+            @dragover.prevent="onDragOver(index)"
+            @dragend="onDragEnd"
+          >
+            <span
+              class="flex-shrink-0 transition-colors i-lucide-grip-vertical size-4 text-n-slate-9 group-hover/row:text-n-slate-11"
+            />
+            <div
+              class="flex items-center justify-center flex-shrink-0 text-sm rounded-md size-6 bg-n-alpha-3 text-n-slate-11"
+            >
+              <EmojiIcon
+                v-if="row.icon"
+                :value="row.icon"
+                :color="row.iconColor"
+                class="shrink-0 size-4"
+              />
+              <span v-else class="size-4" :class="fallbackIcon" />
+            </div>
+            <div class="flex-grow min-w-0">
+              <p class="mb-0 text-sm truncate text-n-slate-12">
+                {{ row.label }}
+              </p>
+              <p
+                v-if="row.subtitle"
+                class="mb-0 text-xs truncate text-n-slate-10"
+              >
+                {{ row.subtitle }}
+              </p>
+            </div>
+            <Button
+              type="button"
+              ghost
+              slate
+              xs
+              no-animation
+              icon="i-lucide-x"
+              class="flex-shrink-0"
+              @click="removeItem(row.value)"
+            />
+          </div>
+        </div>
+
+        <div v-if="canAddMore" class="relative">
+          <Button
+            type="button"
+            ghost
+            slate
+            sm
+            no-animation
+            justify="start"
+            :label="addLabel"
+            :disabled="loading && !isOpen"
+            class="w-full"
+            @click="toggleDropdown"
+          >
+            <template #icon>
+              <Spinner
+                v-if="loading && !isOpen"
+                :size="16"
+                class="text-n-slate-11"
+              />
+              <Icon
+                v-else
+                icon="i-lucide-search"
+                class="flex-shrink-0 size-4"
+              />
+            </template>
+          </Button>
+          <ComboBoxDropdown
+            ref="dropdownRef"
+            :open="isOpen"
+            :options="dropdownOptions"
+            :search-value="searchQuery"
+            :search-placeholder="searchPlaceholder"
+            :empty-state="emptyState"
+            :loading="loading"
+            @update:search-value="onSearch"
+            @select="onSelect"
+          />
+        </div>
+      </div>
+    </OnClickOutside>
+
+    <p
+      v-if="selectedIds.length && $slots.note"
+      class="flex items-center gap-1.5 mt-1.5 mb-0 text-xs text-n-slate-11"
+    >
+      <span class="rounded-full size-1.5 bg-n-teal-9" />
+      <slot name="note" />
+    </p>
+  </div>
+</template>

app/javascript/dashboard/components-next/combobox/specs/ReorderableMultiSelect.spec.js

@@ -0,0 +1,224 @@
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import ReorderableMultiSelect from '../ReorderableMultiSelect.vue';
+
+const OPTIONS = [
+  { value: 1, label: 'Getting started', subtitle: 'Guides' },
+  { value: 2, label: 'Billing', subtitle: 'Payments' },
+  { value: 3, label: 'Security' },
+  { value: 4, label: 'API', icon: '🔌', iconColor: '#000' },
+];
+
+// A findable dropdown stub that exposes the `focus()` the component calls on open.
+const ComboBoxDropdownStub = {
+  name: 'ComboBoxDropdown',
+  props: [
+    'open',
+    'options',
+    'searchValue',
+    'searchPlaceholder',
+    'emptyState',
+    'loading',
+  ],
+  emits: ['select', 'update:searchValue'],
+  methods: { focus() {} },
+  template: '<div class="combo-dropdown" />',
+};
+
+// Renders a real <button> so clicks reach the parent handlers; `data-icon`
+// lets specs tell the remove buttons (icon="i-lucide-x") from the add trigger.
+const ButtonStub = {
+  name: 'Button',
+  props: ['label', 'icon', 'disabled'],
+  emits: ['click'],
+  template:
+    '<button :data-icon="icon" :disabled="disabled" @click="$emit(\'click\')"><slot name="icon" />{{ label }}</button>',
+};
+
+const mountSelect = (props = {}, slots = {}) =>
+  mount(ReorderableMultiSelect, {
+    props: { options: OPTIONS, max: 3, ...props },
+    slots,
+    global: {
+      stubs: {
+        Button: ButtonStub,
+        ComboBoxDropdown: ComboBoxDropdownStub,
+        Spinner: true,
+        Icon: true,
+        EmojiIcon: true,
+        OnClickOutside: { template: '<div><slot /></div>' },
+      },
+    },
+  });
+
+const dropdown = wrapper => wrapper.findComponent(ComboBoxDropdownStub);
+const addTrigger = wrapper =>
+  wrapper.findAll('button').find(button => !button.attributes('data-icon'));
+const removeButtons = wrapper =>
+  wrapper.findAll('button[data-icon="i-lucide-x"]');
+const rows = wrapper => wrapper.findAll('[draggable="true"]');
+const lastModel = wrapper => wrapper.emitted('update:modelValue')?.at(-1)?.[0];
+
+describe('ReorderableMultiSelect', () => {
+  describe('rendering selected rows', () => {
+    it('renders rows in model order with labels resolved from options', () => {
+      const wrapper = mountSelect({ modelValue: [2, 1] });
+
+      const labels = rows(wrapper).map(row => row.find('p').text());
+      expect(labels).toEqual(['Billing', 'Getting started']);
+    });
+
+    it('falls back to the stringified id when an option is unknown', () => {
+      const wrapper = mountSelect({ modelValue: [99] });
+
+      expect(rows(wrapper)[0].find('p').text()).toBe('99');
+    });
+
+    it('renders the progress dots filled up to the selection count', () => {
+      const wrapper = mountSelect({
+        modelValue: [1, 2],
+        max: 3,
+        label: 'Tags',
+      });
+
+      const filled = wrapper.findAll('.bg-n-brand').length;
+      expect(filled).toBe(2);
+    });
+
+    it('exposes remaining and max to the counter slot', () => {
+      const wrapper = mountSelect(
+        { modelValue: [1], max: 3 },
+        { counter: ({ remaining, max }) => h('span', `${remaining}/${max}`) }
+      );
+
+      expect(wrapper.text()).toContain('2/3');
+    });
+  });
+
+  describe('adding options', () => {
+    it('appends the chosen option to the model', () => {
+      const wrapper = mountSelect({ modelValue: [1] });
+
+      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
+
+      expect(lastModel(wrapper)).toEqual([1, 2]);
+    });
+
+    it('hides the add trigger once the model reaches max', () => {
+      const wrapper = mountSelect({ modelValue: [1, 2], max: 2 });
+
+      expect(addTrigger(wrapper)).toBeUndefined();
+      expect(dropdown(wrapper).exists()).toBe(false);
+    });
+
+    it('closes the dropdown when the last slot is filled', async () => {
+      const wrapper = mountSelect({ modelValue: [1], max: 2 });
+      await addTrigger(wrapper).trigger('click');
+      expect(dropdown(wrapper).props('open')).toBe(true);
+
+      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
+      await wrapper.vm.$nextTick();
+
+      // Reaching max removes the trigger (and its dropdown) entirely.
+      expect(dropdown(wrapper).exists()).toBe(false);
+    });
+
+    it('excludes already-selected options from the dropdown', () => {
+      const wrapper = mountSelect({ modelValue: [1] });
+
+      const values = dropdown(wrapper)
+        .props('options')
+        .map(option => option.value);
+      expect(values).toEqual([2, 3, 4]);
+    });
+  });
+
+  describe('removing options', () => {
+    it('removes the clicked item from the model', async () => {
+      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
+
+      await removeButtons(wrapper)[1].trigger('click');
+
+      expect(lastModel(wrapper)).toEqual([1, 3]);
+    });
+  });
+
+  describe('searching', () => {
+    it('filters options locally by label', async () => {
+      const wrapper = mountSelect({ modelValue: [] });
+
+      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
+      await wrapper.vm.$nextTick();
+
+      const values = dropdown(wrapper)
+        .props('options')
+        .map(option => option.value);
+      expect(values).toEqual([2]);
+    });
+
+    it('emits search and skips local filtering when serverSearch is set', async () => {
+      const wrapper = mountSelect({ modelValue: [], serverSearch: true });
+
+      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('search').at(-1)).toEqual(['bill']);
+      // All unselected options remain; the parent owns filtering.
+      expect(dropdown(wrapper).props('options')).toHaveLength(4);
+    });
+
+    it('emits an empty search when the trigger opens', async () => {
+      const wrapper = mountSelect({ modelValue: [1] });
+
+      await addTrigger(wrapper).trigger('click');
+
+      expect(wrapper.emitted('search').at(-1)).toEqual(['']);
+      expect(dropdown(wrapper).props('open')).toBe(true);
+    });
+  });
+
+  describe('reordering', () => {
+    it('moves a row to the dropped position within the model', async () => {
+      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
+
+      await rows(wrapper)[0].trigger('dragstart');
+      await rows(wrapper)[2].trigger('dragover');
+
+      expect(lastModel(wrapper)).toEqual([2, 3, 1]);
+    });
+  });
+
+  describe('loading state', () => {
+    it('shows skeleton rows when loading a non-empty, closed selection', () => {
+      const wrapper = mountSelect({ modelValue: [1, 2], loading: true });
+
+      const skeleton = wrapper.find('[aria-busy="true"]');
+      expect(skeleton.exists()).toBe(true);
+      expect(skeleton.findAll('.animate-pulse').length).toBeGreaterThan(0);
+    });
+
+    it('does not show skeletons when the selection is empty', () => {
+      const wrapper = mountSelect({ modelValue: [], loading: true });
+
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
+    });
+
+    it('shows the real rows, not skeletons, while searching in an open dropdown', async () => {
+      // Open first (trigger is enabled), then a live search turns loading on.
+      const wrapper = mountSelect({ modelValue: [1, 2] });
+      await addTrigger(wrapper).trigger('click');
+
+      await wrapper.setProps({ loading: true });
+
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
+      expect(rows(wrapper)).toHaveLength(2);
+    });
+
+    it('forwards loading to the dropdown and disables the closed trigger', () => {
+      const wrapper = mountSelect({ modelValue: [1], loading: true });
+
+      expect(dropdown(wrapper).props('loading')).toBe(true);
+      expect(addTrigger(wrapper).attributes('disabled')).toBeDefined();
+    });
+  });
+});

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -2,6 +2,7 @@
 import { h, ref, computed, onMounted, watch } from 'vue';
 import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useConfig } from 'dashboard/composables/useConfig';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
@@ -43,7 +44,14 @@ const emit = defineEmits([
 ]);
 
 const { accountScopedRoute, isOnChatwootCloud } = useAccount();
+const { isEnterprise } = useConfig();
 const store = useStore();
+
+// Calls run on the enterprise-only API (cloud runs enterprise); hide the entry
+// on community so it doesn't lead to a dashboard/CTA the backend can't serve.
+const isCallsAvailable = computed(
+  () => isOnChatwootCloud.value || isEnterprise
+);
 const searchShortcut = useKbd([`$mod`, 'k']);
 const { t } = useI18n();
 
@@ -75,6 +83,23 @@ const hasConversationUnreadCounts = computed(() => {
   );
 });
 
+const hasFilteredUnreadCounts = computed(() => {
+  return (
+    hasConversationUnreadCounts.value &&
+    isFeatureEnabledonAccount.value(
+      accountId.value,
+      FEATURE_FLAGS.UNREAD_COUNT_FOR_FILTERS
+    )
+  );
+});
+
+const hasDataImport = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    accountId.value,
+    FEATURE_FLAGS.DATA_IMPORT
+  );
+});
+
 const fetchConversationUnreadCounts = ([currentAccountId, isEnabled]) => {
   if (!currentAccountId) return;
 
@@ -199,6 +224,18 @@ const getLabelUnreadCount = useMapGetter(
 const getTeamUnreadCount = useMapGetter(
   'conversationUnreadCounts/getTeamUnreadCount'
 );
+const mentionsUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getMentionsUnreadCount'
+);
+const participatingUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getParticipatingUnreadCount'
+);
+const unattendedUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getUnattendedUnreadCount'
+);
+const getFolderUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getFolderUnreadCount'
+);
 const teams = useMapGetter('teams/getMyTeams');
 const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
 const conversationCustomViews = useMapGetter(
@@ -226,14 +263,22 @@ watch([accountId, currentUserId], fetchSidebarSortPreferences, {
   immediate: true,
 });
 
+const hasUnreadCountsForSection = section => {
+  if (section === SIDEBAR_SORT_SECTIONS.FOLDERS) {
+    return hasFilteredUnreadCounts.value;
+  }
+
+  return hasConversationUnreadCounts.value;
+};
+
 const getSortOptionsForSection = section =>
   getSidebarSortOptions(section, {
-    hasUnreadCounts: hasConversationUnreadCounts.value,
+    hasUnreadCounts: hasUnreadCountsForSection(section),
   });
 
 const getSortForSection = section =>
   resolveSidebarSort(section, getSidebarSectionSort.value(section), {
-    hasUnreadCounts: hasConversationUnreadCounts.value,
+    hasUnreadCounts: hasUnreadCountsForSection(section),
   });
 
 const updateSortPreference = (section, sortBy) => {
@@ -253,6 +298,7 @@ const sortedFolders = computed(() =>
   sortSidebarItems(conversationCustomViews.value, {
     sortBy: getSortForSection(SIDEBAR_SORT_SECTIONS.FOLDERS),
     labelKey: view => view.name,
+    unreadCountKey: view => getFolderUnreadCount.value(view.id),
   })
 );
 
@@ -342,6 +388,9 @@ const menuItems = computed(() => {
           name: 'Mentions',
           label: t('SIDEBAR.MENTIONED_CONVERSATIONS'),
           icon: 'i-lucide-at-sign',
+          badgeCount: hasFilteredUnreadCounts.value
+            ? mentionsUnreadCount.value
+            : 0,
           activeOn: ['conversation_through_mentions'],
           to: accountScopedRoute('conversation_mentions'),
         },
@@ -349,6 +398,9 @@ const menuItems = computed(() => {
           name: 'Participating',
           label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
           icon: 'i-lucide-user-round-check',
+          badgeCount: hasFilteredUnreadCounts.value
+            ? participatingUnreadCount.value
+            : 0,
           activeOn: ['conversation_through_participating'],
           to: accountScopedRoute('conversation_participating'),
         },
@@ -357,6 +409,9 @@ const menuItems = computed(() => {
           activeOn: ['conversation_through_unattended'],
           label: t('SIDEBAR.UNATTENDED_CONVERSATIONS'),
           icon: 'i-lucide-clock-alert',
+          badgeCount: hasFilteredUnreadCounts.value
+            ? unattendedUnreadCount.value
+            : 0,
           to: accountScopedRoute('conversation_unattended'),
         },
         {
@@ -370,6 +425,9 @@ const menuItems = computed(() => {
           children: sortedFolders.value.map(view => ({
             name: `${view.name}-${view.id}`,
             label: view.name,
+            badgeCount: hasFilteredUnreadCounts.value
+              ? getFolderUnreadCount.value(view.id)
+              : 0,
             to: accountScopedRoute('folder_conversations', { id: view.id }),
           })),
         },
@@ -440,6 +498,14 @@ const menuItems = computed(() => {
       label: t('SIDEBAR.CAPTAIN'),
       activeOn: ['captain_assistants_create_index'],
       children: [
+        {
+          name: 'Overview',
+          label: t('SIDEBAR.CAPTAIN_OVERVIEW'),
+          activeOn: ['captain_assistants_overview_index'],
+          to: accountScopedRoute('captain_assistants_index', {
+            navigationPath: 'captain_assistants_overview_index',
+          }),
+        },
         {
           name: 'FAQs',
           label: t('SIDEBAR.CAPTAIN_RESPONSES'),
@@ -505,6 +571,17 @@ const menuItems = computed(() => {
         },
       ],
     },
+    ...(isCallsAvailable.value
+      ? [
+          {
+            name: 'Calls',
+            label: t('SIDEBAR.CALLS'),
+            icon: 'i-lucide-phone',
+            to: accountScopedRoute('calls_dashboard_index'),
+            activeOn: ['calls_dashboard_index'],
+          },
+        ]
+      : []),
     {
       name: 'Contacts',
       label: t('SIDEBAR.CONTACTS'),
@@ -805,6 +882,16 @@ const menuItems = computed(() => {
           icon: 'i-lucide-blocks',
           to: accountScopedRoute('settings_applications'),
         },
+        ...(hasDataImport.value
+          ? [
+              {
+                name: 'Settings Data',
+                label: t('SIDEBAR.DATA'),
+                icon: 'i-lucide-database',
+                to: accountScopedRoute('settings_data_imports'),
+              },
+            ]
+          : []),
         {
           name: 'Settings Audit Logs',
           label: t('SIDEBAR.AUDIT_LOGS'),

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue

@@ -44,6 +44,12 @@ const showChatSupport = computed(() => {
   );
 });
 
+const toggleChatSupport = () => {
+  if (window.$chatwoot) {
+    window.$chatwoot.toggle();
+  }
+};
+
 const menuItems = computed(() => {
   return [
     {
@@ -51,9 +57,7 @@ const menuItems = computed(() => {
       showOnCustomBrandedInstance: false,
       label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
       icon: 'i-lucide-life-buoy',
-      click: () => {
-        window.$chatwoot.toggle();
-      },
+      click: toggleChatSupport,
     },
     {
       show: true,

app/javascript/dashboard/components/Modal.vue

@@ -7,7 +7,7 @@ import Button from 'dashboard/components-next/button/Button.vue';
 const { modalType, closeOnBackdropClick, onClose } = defineProps({
   closeOnBackdropClick: { type: Boolean, default: true },
   showCloseButton: { type: Boolean, default: true },
-  onClose: { type: Function, required: true },
+  onClose: { type: Function, default: null },
   fullWidth: { type: Boolean, default: false },
   modalType: { type: String, default: 'centered' },
   size: { type: String, default: '' },
@@ -35,7 +35,7 @@ const handleMouseDown = () => {
 const close = () => {
   show.value = false;
   emit('close');
-  onClose();
+  onClose?.();
 };
 
 const onMouseUp = () => {
@@ -123,6 +123,10 @@ onMounted(() => {
       a {
         @apply p-4;
       }
+
+      .ProseMirror a {
+        @apply p-0;
+      }
     }
   }
 }

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -52,18 +52,10 @@ const isActive = computed(() => {
     return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
   }
 
-  if (key === 'voice') {
+  if (key === 'voice' || key === 'whatsapp_call') {
     return props.enabledFeatures.channel_voice;
   }
 
-  if (key === 'whatsapp_call') {
-    return (
-      props.enabledFeatures.channel_voice &&
-      !!window.chatwootConfig?.whatsappAppId &&
-      window.chatwootConfig.whatsappAppId !== 'none'
-    );
-  }
-
   return [
     'website',
     'twilio',

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -62,6 +62,7 @@ import {
   calculateMenuPosition,
   getEffectiveChannelType,
   stripUnsupportedFormatting,
+  createVariableInputRule,
 } from 'dashboard/helper/editorHelper';
 import {
   hasPressedEnterAndNotCmdOrShift,
@@ -306,6 +307,10 @@ const plugins = computed(() => {
       searchTerm: variableSearchTerm,
       isAllowed: () => !props.isPrivate,
     }),
+    createVariableInputRule({
+      isPrivate: () => props.isPrivate,
+      getVariables: () => props.variables,
+    }),
     createSuggestionPlugin({
       trigger: ':',
       minChars: 2,

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

@@ -62,7 +62,10 @@ export default {
       immediate: true,
       handler(inboxId) {
         if (inboxId) {
-          this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
+          this.$store.dispatch('inboxAssignableAgents/fetch', {
+            inboxIds: [inboxId],
+            includeAgentBots: true,
+          });
         }
       },
     },

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

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
 import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import MessagePreview from './MessagePreview.vue';
 import InboxName from '../InboxName.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
@@ -57,7 +58,13 @@ const showMetaSection = computed(() => {
   );
 });
 
-const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+const isAgentBotAssignee = computed(
+  () => props.chat?.meta?.assignee_type === 'AgentBot'
+);
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.applied_sla?.id && !props.currentContact?.blocked
+);
 
 const showLabelsSection = computed(() => {
   return props.chat.labels?.length > 0 || hasSlaPolicyId.value;
@@ -157,10 +164,15 @@ watch(
         >
           <span
             v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center truncate"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center gap-px truncate"
           >
-            <fluent-icon icon="person" size="12" class="text-n-slate-11" />
-            {{ assignee.name }}
+            <Icon
+              :icon="
+                isAgentBotAssignee ? 'i-lucide-bot' : 'i-lucide-user-round'
+              "
+              class="size-3 text-n-slate-11 flex-shrink-0"
+            />
+            <span class="truncate">{{ assignee.name }}</span>
           </span>
           <CardPriorityIcon
             :priority="chat.priority"

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

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

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

@@ -123,7 +123,13 @@ export default {
               $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
             }}</label>
           </div>
-          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
+          <div
+            v-if="
+              currentChat.meta.assignee &&
+              currentChat.meta.assignee_type !== 'AgentBot'
+            "
+            class="flex items-center gap-2"
+          >
             <input
               id="assignee"
               v-model="selectedType"

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

@@ -33,7 +33,9 @@ import {
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
-import wootConstants from 'dashboard/constants/globals';
+import wootConstants, {
+  META_RESTRICTION_STATUS_URL,
+} from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
@@ -93,6 +95,7 @@ export default {
       currentUserId: 'getCurrentUserID',
       listLoadingStatus: 'getAllMessagesLoaded',
       currentAccountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
     isOpen() {
       return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
@@ -170,6 +173,12 @@ export default {
         instagramInbox
       );
     },
+    isInstagramRestrictionBannerVisible() {
+      return this.isOnChatwootCloud && this.isAnInstagramChannel;
+    },
+    instagramRestrictionStatusUrl() {
+      return META_RESTRICTION_STATUS_URL;
+    },
 
     replyWindowBannerMessage() {
       if (this.isAWhatsAppChannel) {
@@ -455,7 +464,15 @@ export default {
   >
     <div ref="topBannerRef">
       <Banner
-        v-if="!currentChat.can_reply"
+        v-if="isInstagramRestrictionBannerVisible"
+        color-scheme="warning"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="$t('CONVERSATION.INSTAGRAM_RESTRICTION_BANNER')"
+        :href-link="instagramRestrictionStatusUrl"
+        :href-link-text="$t('CONVERSATION.INSTAGRAM_RESTRICTION_STATUS_LINK')"
+      />
+      <Banner
+        v-else-if="!currentChat.can_reply"
         color-scheme="alert"
         class="mx-2 mt-2 overflow-hidden rounded-lg"
         :banner-message="replyWindowBannerMessage"

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

@@ -48,6 +48,8 @@ import {
   appendSignature,
   removeSignature,
   getEffectiveChannelType,
+  getAgentVariables,
+  getContactVariables,
 } from 'dashboard/helper/editorHelper';
 import { useCopilotReply } from 'dashboard/composables/useCopilotReply';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
@@ -393,7 +395,13 @@ export default {
         contact: this.currentContact,
         inbox: this.inbox,
       });
-      return variables;
+      // Match the backend drops: names are Ruby-capitalized and
+      // {{agent.*}} is the message sender, not the assignee.
+      return {
+        ...variables,
+        ...getContactVariables(this.currentContact),
+        ...getAgentVariables(this.currentUser),
+      };
     },
     connectedPortalSlug() {
       const { help_center: portal = {} } = this.inbox;

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

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

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -33,10 +33,19 @@ defineProps({
       v-if="variant === 'agent'"
       :name="option.label"
       :src="option.thumbnail"
+      :icon-name="option.iconName"
       :status="option.status === 'online' ? option.status : null"
       :size="20"
       class="flex-shrink-0"
-    />
+    >
+      <template v-if="option.iconName && option.thumbnail" #badge>
+        <div
+          class="absolute z-20 flex items-center justify-center rounded-full outline outline-1 outline-n-weak bg-n-solid-1 -bottom-0.5 ltr:-right-0.5 rtl:-left-0.5 size-3"
+        >
+          <Icon icon="i-lucide-bot" class="text-n-slate-11 size-2" />
+        </div>
+      </template>
+    </Avatar>
     <p class="menu-label truncate min-w-0 flex-1">
       {{ option.label }}
     </p>

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

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

app/javascript/dashboard/composables/spec/useAbortableRequest.spec.js

@@ -0,0 +1,120 @@
+import { effectScope } from 'vue';
+import { useAbortableRequest } from '../useAbortableRequest';
+
+// Resolves when the request "completes", rejects like axios does when the
+// signal is aborted mid-flight.
+const abortableRunner =
+  (value, { fail = false } = {}) =>
+  signal =>
+    new Promise((resolve, reject) => {
+      signal.addEventListener('abort', () => {
+        const error = new Error('canceled');
+        error.name = 'CanceledError';
+        reject(error);
+      });
+      // Defer so a follow-up `run`/`abort` can supersede this one first.
+      Promise.resolve().then(() => {
+        if (signal.aborted) return;
+        if (fail) {
+          reject(new Error('boom'));
+          return;
+        }
+        resolve(value);
+      });
+    });
+
+describe('useAbortableRequest', () => {
+  it('passes a fresh signal to the runner and returns its result', async () => {
+    const { run } = useAbortableRequest();
+    let received = null;
+
+    const result = await run(signal => {
+      received = signal;
+      return Promise.resolve('ok');
+    });
+
+    expect(received).toBeInstanceOf(AbortSignal);
+    expect(received.aborted).toBe(false);
+    expect(result).toBe('ok');
+  });
+
+  it('toggles isPending around the request', async () => {
+    const { run, isPending } = useAbortableRequest();
+    expect(isPending.value).toBe(false);
+
+    const pending = run(() => Promise.resolve('done'));
+    expect(isPending.value).toBe(true);
+
+    await pending;
+    expect(isPending.value).toBe(false);
+  });
+
+  it('aborts the previous request when a new one starts', async () => {
+    const { run } = useAbortableRequest();
+
+    const first = run(abortableRunner('first'));
+    const second = run(abortableRunner('second'));
+
+    await expect(first).resolves.toBeUndefined();
+    await expect(second).resolves.toBe('second');
+  });
+
+  it('returns the onAbort value when a request is superseded', async () => {
+    const { run } = useAbortableRequest();
+
+    const first = run(abortableRunner('first'), { onAbort: null });
+    const second = run(abortableRunner('second'));
+
+    await expect(first).resolves.toBeNull();
+    await expect(second).resolves.toBe('second');
+  });
+
+  it('abort cancels the in-flight request and clears isPending', async () => {
+    const { run, abort, isPending } = useAbortableRequest();
+
+    const pending = run(abortableRunner('value'));
+    expect(isPending.value).toBe(true);
+
+    abort();
+
+    await expect(pending).resolves.toBeUndefined();
+    expect(isPending.value).toBe(false);
+  });
+
+  it('rethrows non-abort errors and clears isPending', async () => {
+    const { run, isPending } = useAbortableRequest();
+
+    await expect(run(abortableRunner(null, { fail: true }))).rejects.toThrow(
+      'boom'
+    );
+    expect(isPending.value).toBe(false);
+  });
+
+  it('aborts the in-flight request when its scope is disposed', async () => {
+    const scope = effectScope();
+    let request;
+    scope.run(() => {
+      request = useAbortableRequest();
+    });
+
+    const pending = request.run(abortableRunner('value'));
+    expect(request.isPending.value).toBe(true);
+
+    scope.stop();
+
+    await expect(pending).resolves.toBeUndefined();
+    expect(request.isPending.value).toBe(false);
+  });
+
+  it('keeps separate controllers per instance', async () => {
+    const a = useAbortableRequest();
+    const b = useAbortableRequest();
+
+    const first = a.run(abortableRunner('a'));
+    // Starting b's request must not abort a's.
+    const second = b.run(abortableRunner('b'));
+
+    await expect(first).resolves.toBe('a');
+    await expect(second).resolves.toBe('b');
+  });
+});

app/javascript/dashboard/composables/spec/useAgentsList.spec.js

@@ -26,11 +26,12 @@ const mockNoneAgent = {
 };
 
 const mockUseMapGetter = (overrides = {}) => {
+  const getAssignableAgents = vi.fn(() => allAgentsData);
   const defaultGetters = {
     getCurrentUser: ref(allAgentsData[0]),
     getSelectedChat: ref({ inbox_id: 1, meta: { assignee: true } }),
     getCurrentAccountId: ref(1),
-    'inboxAssignableAgents/getAssignableAgents': ref(() => allAgentsData),
+    'inboxAssignableAgents/getAssignableAgents': ref(getAssignableAgents),
   };
 
   const mergedGetters = { ...defaultGetters, ...overrides };
@@ -53,6 +54,24 @@ describe('useAgentsList', () => {
     const { agentsList, assignableAgents } = useAgentsList();
 
     expect(assignableAgents.value).toEqual(allAgentsData);
+    expect(
+      useMapGetter('inboxAssignableAgents/getAssignableAgents').value
+    ).toHaveBeenCalledWith(1, { includeAgentBots: false });
+    expect(agentsList.value[0]).toEqual(mockNoneAgent);
+    expect(agentsList.value.length).toBe(
+      formattedAgentsData.slice(1).length + 1
+    );
+  });
+
+  it('requests agent bots when explicitly included', () => {
+    const { agentsList, assignableAgents } = useAgentsList(true, {
+      includeAgentBots: true,
+    });
+
+    expect(assignableAgents.value).toEqual(allAgentsData);
+    expect(
+      useMapGetter('inboxAssignableAgents/getAssignableAgents').value
+    ).toHaveBeenCalledWith(1, { includeAgentBots: true });
     expect(agentsList.value[0]).toEqual(mockNoneAgent);
     expect(agentsList.value.length).toBe(
       formattedAgentsData.slice(1).length + 1

app/javascript/dashboard/composables/useAbortableRequest.js

@@ -0,0 +1,62 @@
+import { getCurrentScope, onScopeDispose, ref } from 'vue';
+
+export const isAbortError = error =>
+  error?.name === 'AbortError' ||
+  error?.name === 'CanceledError' ||
+  error?.code === 'ERR_CANCELED';
+
+/**
+ * Keeps only the latest request alive. Starting a new `run` (or calling
+ * `abort`) cancels the previous request through its `AbortSignal`, so
+ * out-of-order responses can never overwrite fresher data.
+ *
+ * @example
+ * const { run, abort, isPending } = useAbortableRequest();
+ * const results = await run(signal => api.search(query, { signal }));
+ *
+ * @returns {{
+ *   run: (runner: (signal: AbortSignal) => Promise<any>, options?: { onAbort?: any }) => Promise<any>,
+ *   abort: () => void,
+ *   isPending: import('vue').Ref<boolean>,
+ * }}
+ * `run` resolves with the runner's value, or `options.onAbort` (default
+ * `undefined`) when the request was superseded. Non-abort errors are rethrown.
+ */
+export function useAbortableRequest() {
+  const isPending = ref(false);
+  let controller = null;
+
+  const abort = () => {
+    controller?.abort();
+    controller = null;
+    isPending.value = false;
+  };
+
+  const run = async (runner, { onAbort } = {}) => {
+    controller?.abort();
+    const currentController = new AbortController();
+    controller = currentController;
+    isPending.value = true;
+
+    try {
+      return await runner(currentController.signal);
+    } catch (error) {
+      if (currentController.signal.aborted || isAbortError(error))
+        return onAbort;
+      throw error;
+    } finally {
+      // Only the latest run owns the shared state; a superseded run leaves it
+      // for the run that replaced it.
+      if (controller === currentController) {
+        controller = null;
+        isPending.value = false;
+      }
+    }
+  };
+
+  // Cancel any in-flight request when the owning scope is disposed.
+  // Guarded so the composable can also be used outside an effect scope.
+  if (getCurrentScope()) onScopeDispose(abort);
+
+  return { run, abort, isPending };
+}

app/javascript/dashboard/composables/useAgentsList.js

@@ -10,9 +10,14 @@ import {
  * A composable function that provides a list of agents for assignment.
  *
  * @param {boolean} [includeNoneAgent=true] - Whether to include a 'None' agent option.
+ * @param {Object} [options] - Options for the assignable agents list.
+ * @param {boolean} [options.includeAgentBots=false] - Whether to include AgentBot assignees. Only pass this from surfaces that thread `assignee_type` through the assignment request.
  * @returns {Object} An object containing the agents list and assignable agents.
  */
-export function useAgentsList(includeNoneAgent = true) {
+export function useAgentsList(
+  includeNoneAgent = true,
+  { includeAgentBots = false } = {}
+) {
   const { t } = useI18n();
   const currentUser = useMapGetter('getCurrentUser');
   const currentChat = useMapGetter('getSelectedChat');
@@ -39,7 +44,9 @@ export function useAgentsList(includeNoneAgent = true) {
    * @type {import('vue').ComputedRef<Array>}
    */
   const assignableAgents = computed(() => {
-    return inboxId.value ? assignable.value(inboxId.value) : [];
+    return inboxId.value
+      ? assignable.value(inboxId.value, { includeAgentBots })
+      : [];
   });
 
   /**

app/javascript/dashboard/composables/useCallSession.js

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

app/javascript/dashboard/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/constants/billing.js

@@ -0,0 +1,35 @@
+// Single source of truth for billing currencies on the frontend.
+// Adding a currency = one entry in BILLING_CURRENCY_CONFIG, add the code to
+// SUPPORTED_BILLING_CURRENCIES, and add its label key under
+// BILLING_SETTINGS.CURRENCY.OPTIONS in the locale files.
+
+export const DEFAULT_BILLING_CURRENCY = 'usd';
+
+// Order here drives the order of the currency toggle in the UI.
+export const SUPPORTED_BILLING_CURRENCIES = ['usd', 'brl'];
+
+export const BILLING_CURRENCY_CONFIG = {
+  usd: {
+    code: 'usd',
+    intlLocale: 'en-US',
+    i18nLabelKey: 'BILLING_SETTINGS.CURRENCY.OPTIONS.USD',
+  },
+  brl: {
+    code: 'brl',
+    intlLocale: 'pt-BR',
+    i18nLabelKey: 'BILLING_SETTINGS.CURRENCY.OPTIONS.BRL',
+  },
+};
+
+export const getCurrencyConfig = code =>
+  BILLING_CURRENCY_CONFIG[(code || DEFAULT_BILLING_CURRENCY).toLowerCase()] ||
+  BILLING_CURRENCY_CONFIG[DEFAULT_BILLING_CURRENCY];
+
+export const formatCurrencyAmount = (amount, code, options = {}) => {
+  const { intlLocale, code: currencyCode } = getCurrencyConfig(code);
+  return new Intl.NumberFormat(intlLocale, {
+    style: 'currency',
+    currency: currencyCode.toUpperCase(),
+    ...options,
+  }).format(amount);
+};

app/javascript/dashboard/constants/editor.js

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

app/javascript/dashboard/constants/globals.js

@@ -78,3 +78,5 @@ export default {
   },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
+export const META_RESTRICTION_STATUS_URL =
+  'https://status.chatwoot.com/incident/948346';

app/javascript/dashboard/featureFlags.js

@@ -7,9 +7,15 @@ export const FEATURE_FLAGS = {
   AUTOMATIONS: 'automations',
   CAMPAIGNS: 'campaigns',
   WHATSAPP_CAMPAIGNS: 'whatsapp_campaign',
+  WHATSAPP_EMBEDDED_SIGNUP_INBOX_CREATION:
+    'whatsapp_embedded_signup_inbox_creation',
+  WHATSAPP_MANUAL_TRANSFER: 'whatsapp_manual_transfer',
+  WHATSAPP_RECONFIGURE: 'whatsapp_reconfigure',
   CANNED_RESPONSES: 'canned_responses',
   CRM: 'crm',
   CUSTOM_ATTRIBUTES: 'custom_attributes',
+  DATA_IMPORT: 'data_import',
+  API_AND_WEBHOOKS: 'api_and_webhooks',
   INBOX_MANAGEMENT: 'inbox_management',
   INTEGRATIONS: 'integrations',
   LABELS: 'labels',
@@ -47,6 +53,7 @@ export const FEATURE_FLAGS = {
   ADVANCED_SEARCH: 'advanced_search',
   CONVERSATION_REQUIRED_ATTRIBUTES: 'conversation_required_attributes',
   CONVERSATION_UNREAD_COUNTS: 'conversation_unread_counts',
+  UNREAD_COUNT_FOR_FILTERS: 'unread_count_for_filters',
 };
 
 export const PREMIUM_FEATURES = [

app/javascript/dashboard/helper/actionCable.js

@@ -17,6 +17,13 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const { isImpersonating } = useImpersonation();
 const UNREAD_COUNTS_REFETCH_THROTTLE_MS = 5000;
+const FILTERED_UNREAD_COUNTS_REFRESH_RETRY_MS = 30000;
+const FILTERED_UNREAD_COUNTS_REFRESH_RETRY_JITTER_MS = 15000;
+const MENTION_UNREAD_COUNTS_REFETCH_DELAY_MS =
+  UNREAD_COUNTS_REFETCH_THROTTLE_MS;
+const getFilteredUnreadCountsRefreshRetryDelay = () =>
+  FILTERED_UNREAD_COUNTS_REFRESH_RETRY_MS +
+  Math.random() * FILTERED_UNREAD_COUNTS_REFRESH_RETRY_JITTER_MS;
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -25,6 +32,9 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.CancelTyping = [];
     this.lastUnreadCountsFetchAt = null;
     this.unreadCountsFetchTimer = null;
+    this.mentionUnreadCountsFetchTimer = null;
+    this.mentionUnreadCountsRetryTimer = null;
+    this.filteredUnreadCountsRetryTimer = null;
     this.events = {
       'message.created': this.onMessageCreated,
       'message.updated': this.onMessageUpdated,
@@ -140,7 +150,12 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   onConversationUnreadCountChanged = () => {
+    this.refreshConversationUnreadCountsWithFilteredRetry();
+  };
+
+  refreshConversationUnreadCountsWithFilteredRetry = () => {
     this.throttledFetchConversationUnreadCounts();
+    this.scheduleFilteredUnreadCountsRetry();
   };
 
   throttledFetchConversationUnreadCounts = () => {
@@ -171,6 +186,51 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.unreadCountsFetchTimer = null;
   };
 
+  scheduleMentionUnreadCountsFetch = () => {
+    if (!this.isFilteredUnreadCountsEnabled()) return;
+
+    // Mention invalidation runs through the async dispatcher, and stale snapshots
+    // can be served until the filtered-count backend refresh window opens.
+    this.scheduleUnreadCountsFetchAfter(
+      'mentionUnreadCountsFetchTimer',
+      MENTION_UNREAD_COUNTS_REFETCH_DELAY_MS
+    );
+    this.scheduleUnreadCountsFetchAfter(
+      'mentionUnreadCountsRetryTimer',
+      getFilteredUnreadCountsRefreshRetryDelay(),
+      { reset: true }
+    );
+  };
+
+  scheduleFilteredUnreadCountsRetry = () => {
+    if (!this.isFilteredUnreadCountsEnabled()) return;
+
+    // Filtered snapshots can intentionally stay stale until the backend
+    // refresh window opens.
+    this.scheduleUnreadCountsFetchAfter(
+      'filteredUnreadCountsRetryTimer',
+      getFilteredUnreadCountsRefreshRetryDelay(),
+      { reset: true }
+    );
+  };
+
+  scheduleUnreadCountsFetchAfter = (
+    timerName,
+    delay,
+    { reset = false } = {}
+  ) => {
+    if (this[timerName]) {
+      if (!reset) return;
+
+      clearTimeout(this[timerName]);
+    }
+
+    this[timerName] = setTimeout(() => {
+      this[timerName] = null;
+      this.throttledFetchConversationUnreadCounts();
+    }, delay);
+  };
+
   fetchConversationUnreadCounts = () => {
     if (!this.isConversationUnreadCountsEnabled()) return;
 
@@ -189,6 +249,17 @@ class ActionCableConnector extends BaseActionCableConnector {
     );
   };
 
+  isFilteredUnreadCountsEnabled = () => {
+    const accountId = this.app.$store.getters.getCurrentAccountId;
+    const isFeatureEnabled =
+      this.app.$store.getters['accounts/isFeatureEnabledonAccount'];
+
+    return (
+      isFeatureEnabled?.(accountId, FEATURE_FLAGS.CONVERSATION_UNREAD_COUNTS) &&
+      isFeatureEnabled?.(accountId, FEATURE_FLAGS.UNREAD_COUNT_FOR_FILTERS)
+    );
+  };
+
   onTypingOn = ({ conversation, user }) => {
     const conversationId = conversation.id;
 
@@ -212,6 +283,7 @@ class ActionCableConnector extends BaseActionCableConnector {
 
   onConversationMentioned = data => {
     this.app.$store.dispatch('addMentions', data);
+    this.scheduleMentionUnreadCountsFetch();
   };
 
   clearTimer = conversationId => {
@@ -273,6 +345,12 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });
     this.app.$store.dispatch('inboxes/revalidate', { newKey: keys.inbox });
     this.app.$store.dispatch('teams/revalidate', { newKey: keys.team });
+
+    if (this.isFilteredUnreadCountsEnabled()) {
+      // Inbox/team/label visibility changes can change the accessible set used
+      // by filtered unread counts even when no conversation row changes.
+      this.refreshConversationUnreadCountsWithFilteredRetry();
+    }
   };
 
   onVoiceCallIncoming = data => {

app/javascript/dashboard/helper/agentHelper.js

@@ -38,7 +38,7 @@ export const getAgentsByUpdatedPresence = (
   currentAccountId
 ) => {
   const agentsWithDynamicPresenceUpdate = agents.map(item =>
-    item.id === currentUser.id
+    item.id === currentUser.id && (item.assignee_type || 'User') === 'User'
       ? {
           ...item,
           availability_status: currentUser.accounts.find(

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/editorHelper.js

@@ -9,6 +9,7 @@ import * as Sentry from '@sentry/vue';
 import camelcaseKeys from 'camelcase-keys';
 import { FORMATTING, MARKDOWN_PATTERNS } from 'dashboard/constants/editor';
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
+import { InputRule, inputRules } from 'prosemirror-inputrules';
 
 /**
  * Extract text from markdown, and remove all images, code blocks, links, headers, bold, italic, lists etc.
@@ -428,6 +429,55 @@ export function stripUnsupportedFormatting(content, schema) {
  * - emoji
  */
 
+// Liquid delimiters ({{ }} / {% %}) the backend evaluates on send.
+const LIQUID_SYNTAX = /\{\{|\{%/;
+
+// Value when set (and not itself Liquid), else the {{placeholder}} for the backend.
+export const resolveVariableText = (key, variables) => {
+  const value = String(variables?.[key] ?? '');
+  return value && !LIQUID_SYNTAX.test(value) ? value : `{{${key}}}`;
+};
+
+// Name variables normalized like the backend drops (UserDrop/ContactDrop):
+// name split on whitespace, each word Ruby-capitalized (rest downcased).
+const getNameVariables = (prefix, name) => {
+  const names = (name || '')
+    .split(/\s+/)
+    .filter(Boolean)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
+  return {
+    [`${prefix}.name`]: names.join(' '),
+    [`${prefix}.first_name`]: names[0] || '',
+    [`${prefix}.last_name`]: names.length > 1 ? names[names.length - 1] : '',
+  };
+};
+
+// {{agent.*}} values for the message sender.
+export const getAgentVariables = user => ({
+  ...getNameVariables('agent', user.name),
+  'agent.email': user.email,
+});
+
+// {{contact.*}} name values.
+export const getContactVariables = contact =>
+  getNameVariables('contact', contact?.name);
+
+// Resolves a manually typed {{variable}} to its value on the closing braces.
+// Leaves the placeholder when there's no value, the value is Liquid, or it's a private note.
+export const createVariableInputRule = ({ isPrivate, getVariables }) => {
+  const rule = new InputRule(
+    /\{\{([^{}]+)\}\}$/,
+    (editorState, match, from, to) => {
+      if (isPrivate()) return null;
+      const [, key] = match;
+      const text = resolveVariableText(key, getVariables());
+      if (text === `{{${key}}}`) return null;
+      return editorState.tr.insertText(text, from, to);
+    }
+  );
+  return inputRules({ rules: [rule] });
+};
+
 /**
  * Centralized node creation function that handles the creation of different types of nodes based on the specified type.
  * @param {Object} editorView - The editor view instance.
@@ -462,7 +512,7 @@ const createNode = (editorView, nodeType, content) => {
       );
     }
     case 'variable':
-      return state.schema.text(`{{${content}}}`);
+      return state.schema.text(content);
     case 'emoji':
       return state.schema.text(content);
     case 'tool': {
@@ -497,8 +547,12 @@ const nodeCreators = {
       to,
     };
   },
-  variable: (editorView, content, from, to) => ({
-    node: createNode(editorView, 'variable', content),
+  variable: (editorView, content, from, to, variables) => ({
+    node: createNode(
+      editorView,
+      'variable',
+      resolveVariableText(content, variables)
+    ),
     from,
     to,
   }),

app/javascript/dashboard/helper/featureHelper.js

@@ -19,6 +19,7 @@ const FEATURE_HELP_URLS = {
   webhook: 'https://chwt.app/hc/webhooks',
   billing: 'https://chwt.app/pricing',
   saml: 'https://chwt.app/hc/saml',
+  captain: 'https://chwt.app/captain-docs',
   captain_billing: 'https://chwt.app/hc/captain_billing',
 };
 

app/javascript/dashboard/helper/portalHelper.js

@@ -166,6 +166,13 @@ export const LOCALE_MENU_ITEMS = {
     value: 'customize-content',
     icon: 'i-lucide-pencil',
   },
+  selectPopularContent: {
+    label:
+      'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT',
+    action: 'select-popular-content',
+    value: 'select-popular-content',
+    icon: 'i-lucide-sparkles',
+  },
   delete: {
     label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
     action: 'delete',
@@ -185,6 +192,7 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
         LOCALE_MENU_ITEMS.moveToDraft,
       ]),
       LOCALE_MENU_ITEMS.customizeContent,
+      LOCALE_MENU_ITEMS.selectPopularContent,
       ...disableLocaleMenuItems([LOCALE_MENU_ITEMS.delete]),
     ];
   }
@@ -193,6 +201,7 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
     return [
       LOCALE_MENU_ITEMS.publishLocale,
       LOCALE_MENU_ITEMS.customizeContent,
+      LOCALE_MENU_ITEMS.selectPopularContent,
       LOCALE_MENU_ITEMS.delete,
     ];
   }
@@ -201,6 +210,7 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
     LOCALE_MENU_ITEMS.makeDefault,
     LOCALE_MENU_ITEMS.moveToDraft,
     LOCALE_MENU_ITEMS.customizeContent,
+    LOCALE_MENU_ITEMS.selectPopularContent,
     LOCALE_MENU_ITEMS.delete,
   ];
 };

app/javascript/dashboard/helper/sidebarSort.js

@@ -20,6 +20,8 @@ export const SIDEBAR_SORT_OPTIONS_BY_SECTION = Object.freeze({
     SIDEBAR_SORT_KEYS.CREATED_ASC,
     SIDEBAR_SORT_KEYS.ALPHABETICAL_ASC,
     SIDEBAR_SORT_KEYS.ALPHABETICAL_DESC,
+    SIDEBAR_SORT_KEYS.UNREAD_COUNT_DESC,
+    SIDEBAR_SORT_KEYS.UNREAD_COUNT_ASC,
   ],
   [SIDEBAR_SORT_SECTIONS.TEAMS]: [
     SIDEBAR_SORT_KEYS.CREATED_DESC,

app/javascript/dashboard/helper/slaHelper.js

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

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

@@ -1,5 +1,6 @@
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
 import ActionCableConnector from '../actionCable';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 vi.mock('shared/helpers/mitt', () => ({
   emitter: {
@@ -17,6 +18,9 @@ global.chatwootConfig = {
   websocketURL: 'wss://test.chatwoot.com',
 };
 
+const mockRetryJitter = value =>
+  vi.spyOn(Math, 'random').mockReturnValue(value);
+
 describe('ActionCableConnector - Copilot Tests', () => {
   let store;
   let actionCable;
@@ -39,6 +43,8 @@ describe('ActionCableConnector - Copilot Tests', () => {
   });
 
   afterEach(() => {
+    vi.restoreAllMocks();
+    vi.clearAllTimers();
     vi.useRealTimers();
   });
   describe('copilot event handlers', () => {
@@ -81,12 +87,223 @@ describe('ActionCableConnector - Copilot Tests', () => {
     });
 
     it('should refetch unread counts when unread count changes', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+      mockRetryJitter(0.5);
+
       actionCable.onReceived({
         event: 'conversation.unread_count_changed',
         data: { account_id: 1 },
       });
 
       expect(mockDispatch).toHaveBeenCalledWith('conversationUnreadCounts/get');
+
+      vi.advanceTimersByTime(37499);
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+      vi.advanceTimersByTime(1);
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+      expect(mockDispatch).toHaveBeenLastCalledWith(
+        'conversationUnreadCounts/get'
+      );
+    });
+
+    it('does not retry unread count changes when filtered counts are disabled', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+      store.$store.getters[
+        'accounts/isFeatureEnabledonAccount'
+      ].mockImplementation(
+        (_, featureFlag) =>
+          featureFlag === FEATURE_FLAGS.CONVERSATION_UNREAD_COUNTS
+      );
+
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+      vi.advanceTimersByTime(45000);
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+    });
+
+    it('delays unread count refetch when a conversation is mentioned', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+
+      const conversation = { id: 1, account_id: 1 };
+
+      actionCable.onReceived({
+        event: 'conversation.mentioned',
+        data: conversation,
+      });
+
+      expect(mockDispatch).toHaveBeenCalledWith('addMentions', conversation);
+      expect(mockDispatch).not.toHaveBeenCalledWith(
+        'conversationUnreadCounts/get'
+      );
+
+      vi.advanceTimersByTime(4999);
+      expect(mockDispatch).not.toHaveBeenCalledWith(
+        'conversationUnreadCounts/get'
+      );
+
+      vi.advanceTimersByTime(1);
+      expect(mockDispatch).toHaveBeenCalledWith('conversationUnreadCounts/get');
+    });
+
+    it('does not schedule mention unread count fetches when filtered counts are disabled', () => {
+      vi.useFakeTimers();
+      store.$store.getters[
+        'accounts/isFeatureEnabledonAccount'
+      ].mockImplementation(
+        (_, featureFlag) =>
+          featureFlag === FEATURE_FLAGS.CONVERSATION_UNREAD_COUNTS
+      );
+
+      const conversation = { id: 1, account_id: 1 };
+
+      actionCable.onReceived({
+        event: 'conversation.mentioned',
+        data: conversation,
+      });
+
+      expect(mockDispatch).toHaveBeenCalledWith('addMentions', conversation);
+
+      vi.advanceTimersByTime(45000);
+      expect(mockDispatch).not.toHaveBeenCalledWith(
+        'conversationUnreadCounts/get'
+      );
+    });
+
+    it('retries mentioned unread counts after the backend refresh window', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+      mockRetryJitter(0.5);
+
+      actionCable.onReceived({
+        event: 'conversation.mentioned',
+        data: { id: 1, account_id: 1 },
+      });
+
+      const unreadCountFetches = () =>
+        mockDispatch.mock.calls.filter(
+          ([action]) => action === 'conversationUnreadCounts/get'
+        );
+
+      vi.advanceTimersByTime(5000);
+      expect(unreadCountFetches()).toHaveLength(1);
+
+      vi.advanceTimersByTime(32499);
+      expect(unreadCountFetches()).toHaveLength(1);
+
+      vi.advanceTimersByTime(1);
+      expect(unreadCountFetches()).toHaveLength(2);
+    });
+
+    it('reschedules mentioned unread count retries for later invalidations', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+      mockRetryJitter(0);
+
+      const unreadCountFetches = () =>
+        mockDispatch.mock.calls.filter(
+          ([action]) => action === 'conversationUnreadCounts/get'
+        );
+
+      actionCable.onReceived({
+        event: 'conversation.mentioned',
+        data: { id: 1, account_id: 1 },
+      });
+
+      vi.advanceTimersByTime(5000);
+      expect(unreadCountFetches()).toHaveLength(1);
+
+      vi.advanceTimersByTime(10000);
+      actionCable.onReceived({
+        event: 'conversation.mentioned',
+        data: { id: 1, account_id: 1 },
+      });
+
+      vi.advanceTimersByTime(5000);
+      expect(unreadCountFetches()).toHaveLength(2);
+
+      vi.advanceTimersByTime(10000);
+      expect(unreadCountFetches()).toHaveLength(2);
+
+      vi.advanceTimersByTime(15000);
+      expect(unreadCountFetches()).toHaveLength(3);
+    });
+
+    it('refetches filtered unread counts after account cache invalidation', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+      mockRetryJitter(0.5);
+
+      const cacheKeys = {
+        label: 'label-key',
+        inbox: 'inbox-key',
+        team: 'team-key',
+      };
+      const unreadCountFetches = () =>
+        mockDispatch.mock.calls.filter(
+          ([action]) => action === 'conversationUnreadCounts/get'
+        );
+
+      actionCable.onReceived({
+        event: 'account.cache_invalidated',
+        data: { account_id: 1, cache_keys: cacheKeys },
+      });
+
+      expect(mockDispatch).toHaveBeenCalledWith('labels/revalidate', {
+        newKey: cacheKeys.label,
+      });
+      expect(mockDispatch).toHaveBeenCalledWith('inboxes/revalidate', {
+        newKey: cacheKeys.inbox,
+      });
+      expect(mockDispatch).toHaveBeenCalledWith('teams/revalidate', {
+        newKey: cacheKeys.team,
+      });
+      expect(unreadCountFetches()).toHaveLength(1);
+
+      vi.advanceTimersByTime(37499);
+      expect(unreadCountFetches()).toHaveLength(1);
+
+      vi.advanceTimersByTime(1);
+      expect(unreadCountFetches()).toHaveLength(2);
+    });
+
+    it('does not refetch unread counts after cache invalidation when filtered counts are disabled', () => {
+      vi.useFakeTimers();
+      store.$store.getters[
+        'accounts/isFeatureEnabledonAccount'
+      ].mockImplementation(
+        (_, featureFlag) =>
+          featureFlag === FEATURE_FLAGS.CONVERSATION_UNREAD_COUNTS
+      );
+
+      actionCable.onReceived({
+        event: 'account.cache_invalidated',
+        data: {
+          account_id: 1,
+          cache_keys: {
+            label: 'label-key',
+            inbox: 'inbox-key',
+            team: 'team-key',
+          },
+        },
+      });
+
+      expect(mockDispatch).not.toHaveBeenCalledWith(
+        'conversationUnreadCounts/get'
+      );
+
+      vi.advanceTimersByTime(45000);
+      expect(mockDispatch).not.toHaveBeenCalledWith(
+        'conversationUnreadCounts/get'
+      );
     });
 
     it('does not refetch unread counts when unread count feature is disabled', () => {

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/helper/specs/editorContentHelper.spec.js

@@ -94,16 +94,56 @@ describe('getContentNode', () => {
   });
 
   describe('getVariableNode', () => {
-    it('should create a variable node', () => {
-      const content = 'name';
-      const from = 0;
-      const to = 10;
-      getContentNode(editorView, 'variable', content, {
-        from,
-        to,
-      });
+    it('should render the resolved value directly when the variable has a value', () => {
+      getContentNode(
+        editorView,
+        'variable',
+        'contact.name',
+        { from: 0, to: 10 },
+        { 'contact.name': 'John' }
+      );
 
-      expect(editorView.state.schema.text).toHaveBeenCalledWith('{{name}}');
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('John');
+    });
+
+    it('should resolve camelCase custom attributes and non-string values', () => {
+      getContentNode(
+        editorView,
+        'variable',
+        'contact.custom_attribute.cloudCustomer',
+        { from: 0, to: 10 },
+        { 'contact.custom_attribute.cloudCustomer': true }
+      );
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('true');
+    });
+
+    it('should keep the placeholder when the variable has no value', () => {
+      getContentNode(
+        editorView,
+        'variable',
+        'contact.email',
+        { from: 0, to: 10 },
+        {}
+      );
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith(
+        '{{contact.email}}'
+      );
+    });
+
+    it('should keep the placeholder when the value contains Liquid syntax', () => {
+      getContentNode(
+        editorView,
+        'variable',
+        'contact.name',
+        { from: 0, to: 10 },
+        { 'contact.name': '{{agent.email}}' }
+      );
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith(
+        '{{contact.name}}'
+      );
     });
   });
 

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

@@ -1,4 +1,9 @@
-import { EditorState, EditorView } from '@chatwoot/prosemirror-schema';
+import {
+  EditorState,
+  EditorView,
+  buildMessageSchema,
+  MessageMarkdownTransformer,
+} from '@chatwoot/prosemirror-schema';
 import { FORMATTING } from 'dashboard/constants/editor';
 import { Schema } from 'prosemirror-model';
 import {
@@ -6,9 +11,12 @@ import {
   calculateMenuPosition,
   cleanSignature,
   collapseSelection,
+  createVariableInputRule,
   extractTextFromMarkdown,
   findNodeToInsertImage,
   findSignatureInBody,
+  getAgentVariables,
+  getContactVariables,
   getContentNode,
   getFormattingForEditor,
   getMenuAnchor,
@@ -978,13 +986,77 @@ describe('stripUnsupportedFormatting', () => {
       );
     });
 
-    it('strips links but keeps text', () => {
+    it('keeps link text and URL when schema does not support links', () => {
       expect(
         stripUnsupportedFormatting(
           'Check [this link](https://example.com)',
           emptySchema
         )
-      ).toBe('Check this link');
+      ).toBe('Check this link: https://example.com');
+    });
+
+    it('drops the hidden link title when preserving the URL', () => {
+      expect(
+        stripUnsupportedFormatting(
+          'Check [docs](https://example.com "Docs")',
+          emptySchema
+        )
+      ).toBe('Check docs: https://example.com');
+
+      expect(
+        stripUnsupportedFormatting(
+          'Check [docs](<https://example.com> "Docs")',
+          emptySchema
+        )
+      ).toBe('Check docs: https://example.com');
+    });
+
+    // Output is re-parsed before sending, so assert the final text
+    // (strip + re-parse); the re-parse turns serializer escapes into literals.
+    describe('links round-trip through re-parse without crashing', () => {
+      const smsSchema = buildMessageSchema([], []); // no marks, no nodes
+      const sendAs = md =>
+        new MessageMarkdownTransformer(smsSchema).parse(
+          stripUnsupportedFormatting(md, smsSchema)
+        ).textContent;
+
+      it('keeps escaped parens/underscores anywhere in the URL', () => {
+        expect(
+          sendAs('See [wiki](https://en.wikipedia.org/wiki/Foo\\_\\(bar\\))')
+        ).toBe('See wiki: https://en.wikipedia.org/wiki/Foo_(bar)');
+        expect(sendAs('See [wiki](https://host/a\\_\\(b\\)c)')).toBe(
+          'See wiki: https://host/a_(b)c'
+        );
+      });
+
+      it('drops the label when it equals the URL even when escaped', () => {
+        expect(
+          sendAs(
+            '[www.example.com/Foo\\_\\(bar\\)](www.example.com/Foo\\_\\(bar\\))'
+          )
+        ).toBe('www.example.com/Foo_(bar)');
+      });
+
+      it('does not reintroduce emphasis from an escaped label', () => {
+        expect(sendAs('[Use \\_id\\_](https://example.com)')).toBe(
+          'Use _id_: https://example.com'
+        );
+      });
+
+      it('flattens a label containing an escaped closing bracket', () => {
+        expect(sendAs('[FAQ \\[v2\\]](https://example.com)')).toBe(
+          'FAQ [v2]: https://example.com'
+        );
+      });
+    });
+
+    it('leaves bare URLs untouched so channels can auto-link them', () => {
+      expect(
+        stripUnsupportedFormatting('Visit www.example.com now', emptySchema)
+      ).toBe('Visit www.example.com now');
+      expect(
+        stripUnsupportedFormatting('Visit <https://example.com>', emptySchema)
+      ).toBe('Visit https://example.com');
     });
 
     it('converts autolinks to plain URLs when schema does not support links', () => {
@@ -1049,7 +1121,7 @@ describe('stripUnsupportedFormatting', () => {
     it('handles complex content with multiple formatting types', () => {
       const content =
         '**Bold** and *italic* with `code` and [link](url)\n- list item';
-      const expected = 'Bold and italic with code and link\nlist item';
+      const expected = 'Bold and italic with code and link: url\nlist item';
       expect(stripUnsupportedFormatting(content, emptySchema)).toBe(expected);
     });
   });
@@ -1159,3 +1231,149 @@ describe('Menu positioning helpers', () => {
     });
   });
 });
+
+describe('getAgentVariables', () => {
+  it('builds agent variables from the user', () => {
+    expect(
+      getAgentVariables({ name: 'John Doe', email: 'john@example.com' })
+    ).toEqual({
+      'agent.name': 'John Doe',
+      'agent.first_name': 'John',
+      'agent.last_name': 'Doe',
+      'agent.email': 'john@example.com',
+    });
+  });
+
+  it('normalizes casing like the backend UserDrop (Ruby capitalize)', () => {
+    const variables = getAgentVariables({ name: 'JANE doE' });
+
+    expect(variables['agent.name']).toBe('Jane Doe');
+    expect(variables['agent.first_name']).toBe('Jane');
+    expect(variables['agent.last_name']).toBe('Doe');
+  });
+
+  it('ignores extra whitespace between words', () => {
+    expect(getAgentVariables({ name: '  john   doe ' })['agent.name']).toBe(
+      'John Doe'
+    );
+  });
+
+  it('leaves last_name empty for single-word names', () => {
+    const variables = getAgentVariables({ name: 'john' });
+
+    expect(variables['agent.first_name']).toBe('John');
+    expect(variables['agent.last_name']).toBe('');
+  });
+
+  it('handles a missing name', () => {
+    const variables = getAgentVariables({ email: 'john@example.com' });
+
+    expect(variables['agent.name']).toBe('');
+    expect(variables['agent.first_name']).toBe('');
+    expect(variables['agent.last_name']).toBe('');
+  });
+});
+
+describe('getContactVariables', () => {
+  it('normalizes casing like the backend ContactDrop (Ruby capitalize)', () => {
+    expect(getContactVariables({ name: 'JANE doE' })).toEqual({
+      'contact.name': 'Jane Doe',
+      'contact.first_name': 'Jane',
+      'contact.last_name': 'Doe',
+    });
+  });
+
+  it('leaves last_name empty for single-word names', () => {
+    const variables = getContactVariables({ name: 'john' });
+
+    expect(variables['contact.first_name']).toBe('John');
+    expect(variables['contact.last_name']).toBe('');
+  });
+
+  it('handles a missing contact', () => {
+    expect(getContactVariables(undefined)['contact.name']).toBe('');
+  });
+});
+
+describe('createVariableInputRule', () => {
+  // Editor holding `{{key}` so we can simulate typing the final `}`.
+  const buildView = (typed, { isPrivate = false, variables = {} } = {}) => {
+    const plugin = createVariableInputRule({
+      isPrivate: () => isPrivate,
+      getVariables: () => variables,
+    });
+    const state = EditorState.create({
+      schema,
+      doc: schema.node('doc', null, [
+        schema.node('paragraph', null, [schema.text(typed)]),
+      ]),
+      plugins: [plugin],
+    });
+    return new EditorView(document.body, { state });
+  };
+
+  // Types the closing `}`; when the rule declines, insert it like the browser would.
+  const typeClosingBrace = view => {
+    const end = view.state.doc.content.size - 1;
+    const handled = view.someProp('handleTextInput', fn =>
+      fn(view, end, end, '}')
+    );
+    if (!handled) {
+      view.dispatch(view.state.tr.insertText('}', end, end));
+    }
+  };
+
+  it('resolves a manually typed {{variable}} to its value on the closing brace', () => {
+    const view = buildView('{{contact.name}', {
+      variables: { 'contact.name': 'John' },
+    });
+
+    typeClosingBrace(view);
+
+    expect(view.state.doc.textContent).toBe('John');
+    view.destroy();
+  });
+
+  it('resolves boolean/non-string values', () => {
+    const view = buildView('{{contact.custom_attribute.cloudCustomer}', {
+      variables: { 'contact.custom_attribute.cloudCustomer': true },
+    });
+
+    typeClosingBrace(view);
+
+    expect(view.state.doc.textContent).toBe('true');
+    view.destroy();
+  });
+
+  it('keeps the placeholder when the variable has no value', () => {
+    const view = buildView('{{contact.email}', { variables: {} });
+
+    typeClosingBrace(view);
+
+    expect(view.state.doc.textContent).toBe('{{contact.email}}');
+    view.destroy();
+  });
+
+  it('keeps the placeholder when the value itself contains Liquid syntax', () => {
+    const view = buildView('{{contact.name}', {
+      variables: { 'contact.name': '{{agent.email}}' },
+    });
+
+    typeClosingBrace(view);
+
+    expect(view.state.doc.textContent).toBe('{{contact.name}}');
+    view.destroy();
+  });
+
+  it('does not resolve inside a private note', () => {
+    const view = buildView('{{contact.name}', {
+      isPrivate: true,
+      variables: { 'contact.name': 'John' },
+    });
+
+    typeClosingBrace(view);
+
+    expect(view.state.doc.textContent).toBe('{{contact.name}}');
+    view.destroy();
+  });
+});

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

@@ -74,26 +74,34 @@ describe('PortalHelper', () => {
   });
 
   describe('buildLocaleMenuItems', () => {
-    it('disables other actions but keeps customize enabled for the default locale', () => {
+    it('disables other actions but keeps content actions enabled for the default locale', () => {
       const items = buildLocaleMenuItems({ isDefault: true, isDraft: false });
-      const customize = items.find(item => item.action === 'customize-content');
+      const enabledActions = ['customize-content', 'select-popular-content'];
 
-      expect(customize).toBeTruthy();
-      expect(customize.disabled).toBeFalsy();
+      enabledActions.forEach(action => {
+        expect(
+          items.find(item => item.action === action)?.disabled
+        ).toBeFalsy();
+      });
       expect(
         items
-          .filter(item => item.action !== 'customize-content')
+          .filter(item => !enabledActions.includes(item.action))
           .every(item => item.disabled)
       ).toBe(true);
     });
 
-    it('returns publish, customize, and delete actions for draft locales', () => {
+    it('returns publish, customize, popular content, and delete actions for draft locales', () => {
       expect(
         buildLocaleMenuItems({
           isDefault: false,
           isDraft: true,
         }).map(({ action }) => action)
-      ).toEqual(['publish-locale', 'customize-content', 'delete']);
+      ).toEqual([
+        'publish-locale',
+        'customize-content',
+        'select-popular-content',
+        'delete',
+      ]);
     });
 
     it('returns default, draft, customize, and delete actions for live locales', () => {
@@ -106,6 +114,7 @@ describe('PortalHelper', () => {
         'change-default',
         'move-to-draft',
         'customize-content',
+        'select-popular-content',
         'delete',
       ]);
     });

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

@@ -148,7 +148,7 @@ describe('#normalizeSidebarSortPreferences', () => {
 
   it('falls back to defaults for unsupported preferences', () => {
     const preferences = normalizeSidebarSortPreferences({
-      [SIDEBAR_SORT_SECTIONS.FOLDERS]: SIDEBAR_SORT_KEYS.UNREAD_COUNT_DESC,
+      [SIDEBAR_SORT_SECTIONS.FOLDERS]: 'unsupported_sort',
     });
 
     expect(preferences).toEqual(DEFAULT_SIDEBAR_SORT_PREFERENCES);
@@ -171,6 +171,15 @@ describe('#getSidebarSortOptions', () => {
     expect(options).toContain(SIDEBAR_SORT_KEYS.UNREAD_COUNT_ASC);
   });
 
+  it('keeps folder unread count options when filtered unread counts are enabled', () => {
+    const options = getSidebarSortOptions(SIDEBAR_SORT_SECTIONS.FOLDERS, {
+      hasUnreadCounts: true,
+    });
+
+    expect(options).toContain(SIDEBAR_SORT_KEYS.UNREAD_COUNT_DESC);
+    expect(options).toContain(SIDEBAR_SORT_KEYS.UNREAD_COUNT_ASC);
+  });
+
   it('removes unread count options when unread counts are disabled', () => {
     const options = getSidebarSortOptions(SIDEBAR_SORT_SECTIONS.TEAMS, {
       hasUnreadCounts: false,
@@ -180,6 +189,16 @@ describe('#getSidebarSortOptions', () => {
     expect(options).not.toContain(SIDEBAR_SORT_KEYS.UNREAD_COUNT_ASC);
     expect(options).toContain(SIDEBAR_SORT_KEYS.ALPHABETICAL_ASC);
   });
+
+  it('removes folder unread count options when filtered unread counts are disabled', () => {
+    const options = getSidebarSortOptions(SIDEBAR_SORT_SECTIONS.FOLDERS, {
+      hasUnreadCounts: false,
+    });
+
+    expect(options).not.toContain(SIDEBAR_SORT_KEYS.UNREAD_COUNT_DESC);
+    expect(options).not.toContain(SIDEBAR_SORT_KEYS.UNREAD_COUNT_ASC);
+    expect(options).toContain(SIDEBAR_SORT_KEYS.ALPHABETICAL_ASC);
+  });
 });
 
 describe('#resolveSidebarSort', () => {
@@ -202,4 +221,14 @@ describe('#resolveSidebarSort', () => {
 
     expect(sortBy).toBe(SIDEBAR_SORT_KEYS.ALPHABETICAL_ASC);
   });
+
+  it('falls back to alphabetical sort for folders when filtered unread counts are disabled', () => {
+    const sortBy = resolveSidebarSort(
+      SIDEBAR_SORT_SECTIONS.FOLDERS,
+      SIDEBAR_SORT_KEYS.UNREAD_COUNT_DESC,
+      { hasUnreadCounts: false }
+    );
+
+    expect(sortBy).toBe(SIDEBAR_SORT_KEYS.ALPHABETICAL_ASC);
+  });
 });

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

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