From 1186aa26dc57d4795509ab9efeb33d788c5561c4 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 29 Jun 2026 17:48:55 +0530
Subject: [PATCH] feat: add inbox banner

---
 .../pageComponents/overview/InboxBanner.vue   | 72 +++++++++++++++++++
 .../i18n/locale/en/integrations.json          | 10 ++-
 2 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue
new file mode 100644
index 000000000..ac49653d6
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue
@@ -0,0 +1,72 @@
+<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 => {
+    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>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 772279f95..a0a96b09a 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -394,7 +394,15 @@
     "HEADER_KNOW_MORE": "Know more",
     "OVERVIEW": {
       "HEADER": "Overview",
-      "SAMPLE_NOTICE": "Showing sample data. Live analytics are coming soon.",
+      "INBOX_BANNER": {
+        "TEXT": "This assistant isn't connected to any inbox yet, so it won't respond to conversations.",
+        "ACTION": "Connect inbox",
+        "DISMISS": "Dismiss"
+      },
+      "PERFORMANCE": {
+        "TITLE": "Performance",
+        "SUBTITLE": "How this assistant is doing"
+      },
       "RANGES": {
         "DAYS": "{count}d"
       },