Merge remote-tracking branch 'origin/develop' into feat/whatsapp-call-ui

# Conflicts:
#	spec/enterprise/services/voice/inbound_call_builder_spec.rb

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

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

app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue

@@ -2,6 +2,7 @@
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CompanySortMenu from './components/CompanySortMenu.vue';
+import CompanyMoreActions from './components/CompanyMoreActions.vue';
 
 defineProps({
   showSearch: { type: Boolean, default: true },
@@ -11,7 +12,7 @@ defineProps({
   activeOrdering: { type: String, default: '' },
 });
 
-const emit = defineEmits(['search', 'update:sort']);
+const emit = defineEmits(['search', 'update:sort', 'create']);
 </script>
 
 <template>
@@ -48,6 +49,7 @@ const emit = defineEmits(['search', 'update:sort']);
             :active-ordering="activeOrdering"
             @update:sort="emit('update:sort', $event)"
           />
+          <CompanyMoreActions @create="emit('create')" />
         </div>
       </div>
     </div>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanyMoreActions.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const showActionsDropdown = ref(false);
+
+const menuItems = [
+  {
+    label: t('COMPANIES.ACTIONS.CREATE'),
+    action: 'create',
+    value: 'create',
+    icon: 'i-lucide-plus',
+  },
+];
+
+const handleAction = ({ action }) => {
+  if (action === 'create') emit('create');
+  showActionsDropdown.value = false;
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="menuItems"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
+      @action="handleAction($event)"
+    />
+  </div>
+</template>

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

@@ -12,7 +12,12 @@ defineProps({
   showPaginationFooter: { type: Boolean, default: true },
 });
 
-const emit = defineEmits(['update:currentPage', 'update:sort', 'search']);
+const emit = defineEmits([
+  'update:currentPage',
+  'update:sort',
+  'search',
+  'create',
+]);
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -31,6 +36,7 @@ const updateCurrentPage = page => {
         :active-ordering="activeOrdering"
         @search="emit('search', $event)"
         @update:sort="emit('update:sort', $event)"
+        @create="emit('create')"
       />
       <main class="flex-1 px-6 overflow-y-auto">
         <div class="w-full mx-auto max-w-5xl py-4">

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

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const dialogRef = ref(null);
+
+const form = reactive({ name: '', domain: '', description: '' });
+
+const isFormInvalid = computed(() => !form.name.trim());
+
+const resetForm = () => {
+  form.name = '';
+  form.domain = '';
+  form.description = '';
+};
+
+const handleConfirm = () => {
+  if (isFormInvalid.value) return;
+
+  emit('create', {
+    name: form.name.trim(),
+    domain: form.domain.trim() || null,
+    description: form.description.trim() || null,
+  });
+};
+
+const closeDialog = () => {
+  dialogRef.value?.close();
+};
+
+const onSuccess = () => {
+  resetForm();
+  closeDialog();
+};
+
+defineExpose({ dialogRef, onSuccess });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="3xl"
+    overflow-y-auto
+    @confirm="handleConfirm"
+    @close="resetForm"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-start gap-2">
+        <span class="py-1 text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.CREATE.TITLE') }}
+        </span>
+        <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
+          <Input
+            v-model="form.name"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+            autofocus
+          />
+          <Input
+            v-model="form.domain"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+          />
+        </div>
+      </div>
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isLoading"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          type="reset"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="t('COMPANIES.CREATE.ACTIONS.SAVE')"
+          color="blue"
+          type="submit"
+          :disabled="isFormInvalid || isLoading"
+          :is-loading="isLoading"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>

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

@@ -169,7 +169,7 @@ const handleContactSelect = contactId => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 px-6 pb-6 pt-1">
+  <div class="flex flex-col gap-6 px-6 pb-8">
     <div v-if="!selectedContact" class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <label class="text-base text-n-slate-12">
@@ -288,7 +288,7 @@ const handleContactSelect = contactId => {
 
       <div
         v-else-if="!hasContacts"
-        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+        class="py-8 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
       >
         {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
       </div>
@@ -346,7 +346,7 @@ const handleContactSelect = contactId => {
         :current-page="currentPage"
         :total-items="totalContacts"
         :items-per-page="15"
-        class="px-0 before:hidden"
+        class="!px-0 before:hidden bg-transparent"
         @update:current-page="emit('update:currentPage', $event)"
       />
     </div>

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+const conversationContact = conversation => {
+  const sender = conversation.meta?.sender || {};
+  const contact = contactsById.value(sender.id);
+  return contact.id ? contact : sender;
+};
+const conversationInbox = conversation =>
+  stateInbox.value(conversation.inboxId) || {
+    name: '',
+    channelType: conversation.meta?.channel,
+  };
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <div
+    v-else-if="conversations.length > 0"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in conversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="conversationContact(conversation)"
+      :state-inbox="conversationInbox(conversation)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+
+  <p
+    v-else
+    class="py-8 px-4 mx-6 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.HISTORY.EMPTY') }}
+  </p>
+</template>

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

@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  notes: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const hasNotes = computed(() => props.notes.length > 0);
+
+const contactName = contact =>
+  contact?.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note?.user?.name || 'Bot';
+};
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div v-if="hasNotes" class="flex flex-col px-6">
+    <div class="flex flex-col divide-y divide-n-strong">
+      <div
+        v-for="note in notes"
+        :key="note.id"
+        class="flex flex-col gap-2 py-4 group/note"
+      >
+        <div class="flex items-center gap-1.5 min-w-0">
+          <Avatar
+            :name="contactName(note.contact)"
+            :src="note.contact?.thumbnail"
+            :size="16"
+            rounded-full
+            hide-offline-status
+          />
+          <div
+            class="flex items-center justify-between min-w-0 gap-1 w-full text-sm text-n-slate-11"
+          >
+            <button
+              type="button"
+              class="min-w-0 font-medium truncate text-start text-n-slate-12 hover:text-n-blue-11 p-0"
+              @click="openContact(note.contact.id)"
+            >
+              {{ contactName(note.contact) }}
+            </button>
+            <div class="min-w-0 truncate">
+              <span
+                class="inline-flex items-center gap-1 text-sm text-n-slate-10"
+              >
+                <span class="font-medium text-n-slate-11">
+                  {{ getWrittenBy(note) }}
+                </span>
+                {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+                <span class="font-medium text-n-slate-11">
+                  {{ dynamicTime(note.createdAt) }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <p
+          v-dompurify-html="formatMessage(note.content || '')"
+          class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <p
+    v-else
+    class="py-8 mx-6 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.NOTES.EMPTY') }}
+  </p>
+</template>

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

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  selectedIds: { type: Set, default: () => new Set() },
+  documents: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits([
+  'update:selectedIds',
+  'bulkSyncQueued',
+  'bulkDeleteSucceeded',
+]);
+
+const { t } = useI18n();
+const store = useStore();
+
+const bulkDeleteDialog = ref(null);
+
+const isSyncableDocument = doc =>
+  !doc.pdf_document && doc.status === 'available' && !doc.sync_in_progress;
+
+const syncableSelectedIds = computed(() => {
+  if (!props.selectedIds.size) return [];
+  return props.documents
+    .filter(doc => props.selectedIds.has(doc.id) && isSyncableDocument(doc))
+    .map(doc => doc.id);
+});
+
+const hasSyncableSelection = computed(
+  () => syncableSelectedIds.value.length > 0
+);
+
+const selectAllLabel = computed(() => {
+  const count = props.documents.length;
+  const isAllSelected = props.selectedIds.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.DOCUMENTS.UNSELECT_ALL', { count })
+    : t('CAPTAIN.DOCUMENTS.SELECT_ALL', { count });
+});
+
+const selectedCountLabel = computed(() =>
+  t('CAPTAIN.DOCUMENTS.SELECTED', { count: props.selectedIds.size })
+);
+
+const handleBulkSync = async () => {
+  const ids = syncableSelectedIds.value;
+  if (!ids.length) return;
+
+  try {
+    const response = await store.dispatch('captainBulkActions/handleBulkSync', {
+      ids,
+    });
+    const queuedCount = response?.count ?? response?.ids?.length ?? 0;
+    let message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.ZERO_MESSAGE');
+
+    if (queuedCount === 1) {
+      message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.SUCCESS_MESSAGE_ONE');
+    } else if (queuedCount > 1) {
+      message = t('CAPTAIN.DOCUMENTS.BULK_SYNC.SUCCESS_MESSAGE', {
+        count: queuedCount,
+      });
+    }
+
+    useAlert(message);
+    emit('update:selectedIds', new Set());
+    if (queuedCount > 0) emit('bulkSyncQueued');
+  } catch (error) {
+    useAlert(t('CAPTAIN.DOCUMENTS.BULK_SYNC.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div>
+    <BulkSelectBar
+      :model-value="selectedIds"
+      :all-items="documents"
+      :select-all-label="selectAllLabel"
+      :selected-count-label="selectedCountLabel"
+      :delete-label="$t('CAPTAIN.DOCUMENTS.BULK_DELETE_BUTTON')"
+      class="w-fit"
+      :class="{ 'mb-2': selectedIds.size > 0 }"
+      @update:model-value="emit('update:selectedIds', $event)"
+      @bulk-delete="bulkDeleteDialog.dialogRef.open()"
+    >
+      <template v-if="hasSyncableSelection" #secondaryActions>
+        <Button
+          :label="$t('CAPTAIN.DOCUMENTS.BULK_SYNC_BUTTON')"
+          sm
+          slate
+          ghost
+          icon="i-lucide-refresh-cw"
+          class="!px-1.5"
+          @click="handleBulkSync"
+        />
+      </template>
+    </BulkSelectBar>
+    <BulkDeleteDialog
+      ref="bulkDeleteDialog"
+      :bulk-ids="selectedIds"
+      type="AssistantDocument"
+      @delete-success="emit('bulkDeleteSucceeded')"
+    />
+  </div>
+</template>

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

@@ -5,14 +5,17 @@ import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import {
-  isPdfDocument,
+  isSafeHttpLink,
   formatDocumentLink,
+  getDocumentDisplayPath,
 } from 'shared/helpers/documentHelper';
 
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import DocumentSyncStatus from 'dashboard/components-next/captain/assistant/DocumentSyncStatus.vue';
 
 const props = defineProps({
   id: {
@@ -31,10 +34,38 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  pdfDocument: {
+    type: Boolean,
+    default: false,
+  },
   createdAt: {
     type: Number,
     required: true,
   },
+  status: {
+    type: String,
+    default: null,
+  },
+  syncStatus: {
+    type: String,
+    default: null,
+  },
+  lastSyncedAt: {
+    type: Number,
+    default: null,
+  },
+  lastSyncErrorCode: {
+    type: String,
+    default: null,
+  },
+  syncInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  syncStaleAfterHours: {
+    type: Number,
+    default: null,
+  },
   isSelected: {
     type: Boolean,
     default: false,
@@ -64,6 +95,20 @@ const modelValue = computed({
   set: () => emit('select', props.id),
 });
 
+const isPdf = computed(() => props.pdfDocument);
+const hasSafeLink = computed(() => isSafeHttpLink(props.externalLink));
+const canManage = computed(() => checkPermissions(['administrator']));
+const isAvailable = computed(() => props.status === 'available');
+const canSync = computed(
+  () => canManage.value && !isPdf.value && isAvailable.value
+);
+const isSyncing = computed(() => props.syncStatus === 'syncing');
+const isFailed = computed(() => props.syncStatus === 'failed');
+const isRetryableSync = computed(
+  () => isFailed.value || (isSyncing.value && !props.syncInProgress)
+);
+const showSyncStatus = computed(() => !isPdf.value);
+
 const menuItems = computed(() => {
   const allOptions = [
     {
@@ -74,7 +119,19 @@ const menuItems = computed(() => {
     },
   ];
 
-  if (checkPermissions(['administrator'])) {
+  if (canSync.value) {
+    allOptions.push({
+      label: isRetryableSync.value
+        ? t('CAPTAIN.DOCUMENTS.OPTIONS.RETRY_SYNC')
+        : t('CAPTAIN.DOCUMENTS.OPTIONS.SYNC_NOW'),
+      value: 'sync',
+      action: 'sync',
+      icon: 'i-lucide-refresh-cw',
+      disabled: props.syncInProgress,
+    });
+  }
+
+  if (canManage.value) {
     allOptions.push({
       label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
       value: 'delete',
@@ -86,17 +143,25 @@ const menuItems = computed(() => {
   return allOptions;
 });
 
-const createdAt = computed(() => dynamicTime(props.createdAt));
+const createdAtLabel = computed(() => dynamicTime(props.createdAt));
 
-const displayLink = computed(() => formatDocumentLink(props.externalLink));
+const displayLink = computed(() =>
+  isPdf.value
+    ? formatDocumentLink(props.externalLink)
+    : getDocumentDisplayPath(props.externalLink)
+);
 const linkIcon = computed(() =>
-  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
+  isPdf.value ? 'i-ph-file-pdf' : 'i-ph-link-simple'
 );
 
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
 };
+
+const handleRetry = () => {
+  emit('action', { action: 'sync', id: props.id });
+};
 </script>
 
 <template>
@@ -141,17 +206,41 @@ const handleAction = ({ action, value }) => {
       <span
         class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
       >
-        <i class="i-woot-captain" />
+        <Icon icon="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
+      <a
+        v-if="!isPdf && hasSafeLink"
+        :href="externalLink"
+        :title="externalLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11 hover:text-n-slate-12 hover:underline"
+        @click.stop
+      >
+        <Icon :icon="linkIcon" class="shrink-0" />
+        <span class="truncate">{{ displayLink }}</span>
+        <Icon icon="i-lucide-external-link size-3 shrink-0 opacity-70" />
+      </a>
       <span
+        v-else
         class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
       >
-        <i :class="linkIcon" class="shrink-0" />
+        <Icon :icon="linkIcon" class="shrink-0" />
         <span class="truncate">{{ displayLink }}</span>
       </span>
-      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
-        {{ createdAt }}
+      <DocumentSyncStatus
+        v-if="showSyncStatus"
+        :status="syncStatus"
+        :last-synced-at="lastSyncedAt"
+        :error-code="lastSyncErrorCode"
+        :sync-in-progress="syncInProgress"
+        :stale-after-hours="syncStaleAfterHours"
+        :show-retry="canSync && isRetryableSync"
+        @retry="handleRetry"
+      />
+      <div v-else class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
+        {{ createdAtLabel }}
       </div>
     </div>
   </CardLayout>

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import DocumentFiltersBar from 'dashboard/components-next/captain/assistant/DocumentFiltersBar.vue';
+
+const emit = defineEmits(['change']);
+
+const source = ref('all');
+const status = ref(null);
+const sort = ref('recently_updated');
+
+const hasActiveFilters = computed(
+  () => source.value !== 'all' || Boolean(status.value)
+);
+
+const buildParams = (page = 1) => {
+  const params = { page };
+  if (source.value !== 'all') params.source = source.value;
+  if (status.value) params.filter = status.value;
+  if (sort.value) params.sort = sort.value;
+  return params;
+};
+
+const emitChange = () => emit('change');
+
+const handleSourceSelect = sourceKey => {
+  source.value = sourceKey;
+  if (sourceKey !== 'web') status.value = null;
+  emitChange();
+};
+
+const handleStatusSelect = statusKey => {
+  status.value = statusKey;
+  if (statusKey) source.value = 'web';
+  emitChange();
+};
+
+const handleSortSelect = sortKey => {
+  sort.value = sortKey;
+  emitChange();
+};
+
+const reset = () => {
+  source.value = 'all';
+  status.value = null;
+  sort.value = 'recently_updated';
+};
+
+defineExpose({ buildParams, reset, hasActiveFilters });
+</script>
+
+<template>
+  <DocumentFiltersBar
+    :active-source-filter="source"
+    :active-status-filter="status"
+    :active-sort="sort"
+    @select-source="handleSourceSelect"
+    @select-status="handleStatusSelect"
+    @select-sort="handleSortSelect"
+  />
+</template>

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

@@ -0,0 +1,141 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  activeSourceFilter: { type: String, default: 'all' },
+  activeStatusFilter: { type: String, default: null },
+  activeSort: { type: String, default: 'recently_updated' },
+});
+
+const emit = defineEmits(['selectSource', 'selectStatus', 'selectSort']);
+
+const { t } = useI18n();
+
+const openMenu = ref(null);
+
+const MENU_CONFIG = [
+  {
+    key: 'source',
+    activeKey: 'activeSourceFilter',
+    dropdownClass: 'min-w-48',
+    options: [
+      { labelKey: 'SOURCE.ALL', value: 'all', icon: 'i-lucide-files' },
+      { labelKey: 'SOURCE.WEB', value: 'web', icon: 'i-lucide-link' },
+      { labelKey: 'SOURCE.PDF', value: 'pdf', icon: 'i-lucide-file-text' },
+    ],
+  },
+  {
+    key: 'status',
+    activeKey: 'activeStatusFilter',
+    dropdownClass: 'min-w-52',
+    options: [
+      { labelKey: 'STATUS.ANY', value: null, icon: 'i-lucide-circle-dashed' },
+      {
+        labelKey: 'STATUS.UPDATED',
+        value: 'synced',
+        icon: 'i-lucide-check-circle',
+      },
+      {
+        labelKey: 'STATUS.NEEDS_UPDATE',
+        value: 'stale',
+        icon: 'i-lucide-clock',
+      },
+      {
+        labelKey: 'STATUS.UPDATING',
+        value: 'syncing',
+        icon: 'i-lucide-refresh-cw',
+      },
+      {
+        labelKey: 'STATUS.FAILED',
+        value: 'failed',
+        icon: 'i-lucide-circle-x',
+      },
+    ],
+  },
+  {
+    key: 'sort',
+    activeKey: 'activeSort',
+    dropdownClass: 'min-w-56',
+    options: [
+      {
+        labelKey: 'SORT.RECENTLY_UPDATED',
+        value: 'recently_updated',
+        icon: 'i-lucide-arrow-down-up',
+      },
+      {
+        labelKey: 'SORT.RECENTLY_CREATED',
+        value: 'recently_created',
+        icon: 'i-lucide-clock',
+      },
+    ],
+  },
+];
+
+const filterMenus = computed(() =>
+  MENU_CONFIG.filter(
+    menu => !(menu.key === 'status' && props.activeSourceFilter === 'pdf')
+  ).map(menu => {
+    const active = props[menu.activeKey];
+    const items = menu.options.map(opt => ({
+      label: t(`CAPTAIN.DOCUMENTS.FILTERS.${opt.labelKey}`),
+      value: opt.value,
+      icon: opt.icon,
+      action: menu.key,
+      isSelected: opt.value === active,
+    }));
+    return {
+      ...menu,
+      items,
+      selected: items.find(item => item.isSelected) || items[0],
+    };
+  })
+);
+
+const closeMenu = () => {
+  openMenu.value = null;
+};
+
+const toggleMenu = menu => {
+  openMenu.value = openMenu.value === menu ? null : menu;
+};
+
+const handleMenuAction = ({ action, value }) => {
+  closeMenu();
+  if (action === 'source') emit('selectSource', value);
+  else if (action === 'status') emit('selectStatus', value);
+  else if (action === 'sort') emit('selectSort', value);
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="closeMenu"
+    class="inline-flex flex-wrap items-center gap-2 pt-2 w-fit"
+  >
+    <div v-for="menu in filterMenus" :key="menu.key" class="relative">
+      <Button
+        :icon="menu.selected.icon"
+        slate
+        size="sm"
+        :class="{ 'bg-n-slate-9/10': openMenu === menu.key }"
+        @click="toggleMenu(menu.key)"
+      >
+        <span class="min-w-0 truncate">{{ menu.selected.label }}</span>
+        <Icon icon="i-lucide-chevron-down" class="shrink-0 size-4" />
+      </Button>
+      <DropdownMenu
+        v-if="openMenu === menu.key"
+        :menu-items="menu.items"
+        :class="menu.dropdownClass"
+        class="top-full mt-2 ltr:left-0 rtl:right-0"
+        @action="handleMenuAction"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,153 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: null,
+  },
+  lastSyncedAt: {
+    type: Number,
+    default: null,
+  },
+  errorCode: {
+    type: String,
+    default: null,
+  },
+  syncInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  staleAfterHours: {
+    type: Number,
+    default: null,
+  },
+  showRetry: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['retry']);
+const { t } = useI18n();
+
+const SECONDS_PER_HOUR = 3600;
+
+const SYNCING = 'syncing';
+const FAILED = 'failed';
+
+const ERROR_CODE_LABELS = {
+  not_found: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.NOT_FOUND',
+  access_denied: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.ACCESS_DENIED',
+  timeout: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.TIMEOUT',
+  content_empty: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.CONTENT_EMPTY',
+  fetch_failed: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.FETCH_FAILED',
+  sync_error: 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.SYNC_ERROR',
+};
+const DEFAULT_ERROR_LABEL = 'CAPTAIN.DOCUMENTS.SYNC_ERRORS.DEFAULT';
+
+const hasSyncingStatus = computed(() => props.status === SYNCING);
+const isSyncing = computed(
+  () => hasSyncingStatus.value && props.syncInProgress
+);
+const isStaleSync = computed(
+  () => hasSyncingStatus.value && !props.syncInProgress
+);
+const isFailed = computed(() => props.status === FAILED);
+const canRetry = computed(() => isFailed.value || isStaleSync.value);
+const hasBeenSynced = computed(() => Boolean(props.lastSyncedAt));
+
+const ageInHours = computed(() => {
+  if (!props.lastSyncedAt) return null;
+  const nowSeconds = Date.now() / 1000;
+  return (nowSeconds - props.lastSyncedAt) / SECONDS_PER_HOUR;
+});
+
+const staleAfterHours = computed(() => Number(props.staleAfterHours));
+const hasStaleThreshold = computed(
+  () => Number.isFinite(staleAfterHours.value) && staleAfterHours.value > 0
+);
+const isStale = computed(
+  () =>
+    hasStaleThreshold.value &&
+    ageInHours.value !== null &&
+    ageInHours.value >= staleAfterHours.value
+);
+
+const errorLabel = computed(() =>
+  t(ERROR_CODE_LABELS[props.errorCode] || DEFAULT_ERROR_LABEL)
+);
+
+const label = computed(() => {
+  if (isSyncing.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCING');
+  if (isStaleSync.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.STALE_SYNC');
+  if (isFailed.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.FAILED');
+  if (hasBeenSynced.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCED', {
+      time: dynamicTime(props.lastSyncedAt),
+    });
+  return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.NEVER_SYNCED');
+});
+
+const fullLabel = computed(() => {
+  if (isSyncing.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCING');
+  if (isStaleSync.value) return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.STALE_SYNC');
+  if (isFailed.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.FAILED', {
+      error: errorLabel.value,
+    });
+  if (hasBeenSynced.value)
+    return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.SYNCED', {
+      time: dynamicTime(props.lastSyncedAt),
+    });
+  return t('CAPTAIN.DOCUMENTS.SYNC_STATUS.NEVER_SYNCED');
+});
+
+const tone = computed(() => {
+  if (isSyncing.value) return 'amber';
+  if (isStaleSync.value) return 'amber';
+  if (isFailed.value) return 'ruby';
+  if (isStale.value) return 'amber';
+  return 'slate';
+});
+
+const textClass = computed(() => {
+  if (tone.value === 'amber') return 'text-n-amber-11';
+  if (tone.value === 'ruby') return 'text-n-ruby-11';
+  return 'text-n-slate-11';
+});
+
+const statusIcon = computed(() => {
+  if (isFailed.value || isStale.value || isStaleSync.value) {
+    return 'i-lucide-circle-alert';
+  }
+  return 'i-lucide-refresh-cw';
+});
+</script>
+
+<template>
+  <span
+    class="flex gap-1.5 items-center text-sm truncate shrink-0 tabular-nums"
+    :class="textClass"
+    :title="fullLabel"
+  >
+    <Spinner v-if="isSyncing" class="text-n-amber-11 size-3" />
+    <Icon v-else :icon="statusIcon" class="shrink-0 size-3.5" />
+    <span class="truncate">{{ label }}</span>
+    <Button
+      v-if="showRetry && canRetry"
+      :label="t('CAPTAIN.DOCUMENTS.OPTIONS.RETRY_SYNC')"
+      xs
+      link
+      ruby
+      icon="i-lucide-refresh-cw"
+      class="hover:!no-underline !gap-1 ms-1"
+      @click.stop="emit('retry')"
+    />
+  </span>
+</template>

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

@@ -15,7 +15,7 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'createSuccess']);
 const { t } = useI18n();
 const store = useStore();
 
@@ -26,6 +26,7 @@ const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 const handleSubmit = async newDocument => {
   try {
     await store.dispatch('captainDocuments/create', newDocument);
+    emit('createSuccess');
     useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
     dialogRef.value.close();
   } catch (error) {