feat(captain): Add paywall and expose Custom Tools (#13977)

# Pull Request Template

## Description

Custom tools is now discoverable on all plans

## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

Before:
<img width="390" height="446" alt="CleanShot 2026-04-02 at 13 40 11@2x"
src="https://github.com/user-attachments/assets/0a751954-f3ad-47d6-85b8-1e2f1476a646"
/>


After:

<img width="392" height="522" alt="CleanShot 2026-04-02 at 13 40 47@2x"
src="https://github.com/user-attachments/assets/62a252f6-2551-47a9-b50c-be949f08c456"
/>

<img width="1826" height="638" alt="CleanShot 2026-04-02 at 13 37 39@2x"
src="https://github.com/user-attachments/assets/77dc2a75-3d76-44cf-8579-8d3457879bd0"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/routes/dashboard/captain/captain.routes.js

@@ -23,6 +23,12 @@ const meta = {
   installationTypes: [INSTALLATION_TYPES.CLOUD, INSTALLATION_TYPES.ENTERPRISE],
 };
 
+const metaCustomTools = {
+  permissions: ['administrator', 'agent'],
+  featureFlag: FEATURE_FLAGS.CAPTAIN_CUSTOM_TOOLS,
+  installationTypes: [INSTALLATION_TYPES.CLOUD, INSTALLATION_TYPES.ENTERPRISE],
+};
+
 const metaV2 = {
   permissions: ['administrator', 'agent'],
   featureFlag: FEATURE_FLAGS.CAPTAIN_V2,
@@ -46,7 +52,7 @@ const assistantRoutes = [
     path: frontendURL('accounts/:accountId/captain/:assistantId/tools'),
     component: CustomToolsIndex,
     name: 'captain_tools_index',
-    meta,
+    meta: metaCustomTools,
   },
   {
     path: frontendURL('accounts/:accountId/captain/:assistantId/scenarios'),

app/javascript/dashboard/routes/dashboard/captain/tools/Index.vue

@@ -5,13 +5,14 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
+import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
 import CustomToolsPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue';
 import CreateCustomToolDialog from 'dashboard/components-next/captain/pageComponents/customTool/CreateCustomToolDialog.vue';
 import CustomToolCard from 'dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 
 const store = useStore();
-const { isFeatureFlagEnabled } = usePolicy();
+const { isFeatureFlagEnabled, shouldShowPaywall } = usePolicy();
 
 const SOFT_LIMIT = 10;
 const isV2 = computed(() => isFeatureFlagEnabled(FEATURE_FLAGS.CAPTAIN_V2));
@@ -80,7 +81,9 @@ const onDeleteSuccess = () => {
 };
 
 onMounted(() => {
-  fetchCustomTools();
+  if (!shouldShowPaywall(FEATURE_FLAGS.CAPTAIN_CUSTOM_TOOLS)) {
+    fetchCustomTools();
+  }
 });
 </script>
 
@@ -89,6 +92,7 @@ onMounted(() => {
     :header-title="$t('CAPTAIN.CUSTOM_TOOLS.HEADER')"
     :button-label="$t('CAPTAIN.CUSTOM_TOOLS.ADD_NEW')"
     :button-policy="['administrator']"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN_CUSTOM_TOOLS"
     :total-count="customToolsMeta.totalCount"
     :current-page="customToolsMeta.page"
     :show-pagination-footer="!isFetching && !!customTools.length"
@@ -98,6 +102,10 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="openCreateDialog"
   >
+    <template #paywall>
+      <CaptainPaywall feature-prefix="CAPTAIN.CUSTOM_TOOLS" />
+    </template>
+
     <template #emptyState>
       <CustomToolsPageEmptyState @click="openCreateDialog" />
     </template>

app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import Icon from 'next/icon/Icon.vue';
 import ButtonV4 from 'next/button/Button.vue';
 
@@ -22,6 +23,11 @@ defineProps({
 });
 
 const emit = defineEmits(['upgrade']);
+
+// Cloud agents land on this modal too, but billing is admin-only — they need
+// the escalation message instead of a button they cannot use. Mirrors the
+// pattern in UpgradePage.vue.
+const { isAdmin } = useAdmin();
 </script>
 
 <template>
@@ -47,11 +53,14 @@ const emit = defineEmits(['upgrade']);
     />
     <p class="text-sm font-normal text-n-slate-11">
       {{ $t(`${featurePrefix}.${i18nKey}.UPGRADE_PROMPT`) }}
-      <span v-if="!isOnChatwootCloud && !isSuperAdmin">
+      <span v-if="isOnChatwootCloud && !isAdmin">
+        {{ $t('GENERAL_SETTINGS.LIMIT_MESSAGES.NON_ADMIN') }}
+      </span>
+      <span v-else-if="!isOnChatwootCloud && !isSuperAdmin">
         {{ $t(`${featurePrefix}.ENTERPRISE_PAYWALL.ASK_ADMIN`) }}
       </span>
     </p>
-    <template v-if="isOnChatwootCloud">
+    <template v-if="isOnChatwootCloud && isAdmin">
       <ButtonV4 blue solid md @click="emit('upgrade')">
         {{ $t(`${featurePrefix}.PAYWALL.UPGRADE_NOW`) }}
       </ButtonV4>
@@ -59,7 +68,7 @@ const emit = defineEmits(['upgrade']);
         {{ $t(`${featurePrefix}.PAYWALL.CANCEL_ANYTIME`) }}
       </span>
     </template>
-    <template v-else-if="isSuperAdmin">
+    <template v-else-if="!isOnChatwootCloud && isSuperAdmin">
       <a href="/super_admin" class="block w-full">
         <ButtonV4 solid blue md class="w-full">
           {{ $t(`${featurePrefix}.PAYWALL.UPGRADE_NOW`) }}