feat: Add UI for custom tools (#12585)

### Tools list

<img width="2316" height="666" alt="CleanShot 2025-10-03 at 20 42 41@2x"
src="https://github.com/user-attachments/assets/ccbffd16-804d-4eb8-9c64-2d1cfd407e4e"
/>

### Tools form 

<img width="2294" height="2202" alt="CleanShot 2025-10-03 at 20 43
05@2x"
src="https://github.com/user-attachments/assets/9f49aa09-75a1-4585-a09d-837ca64139b8"
/>

## Response

<img width="800" height="2144" alt="CleanShot 2025-10-03 at 20 45 56@2x"
src="https://github.com/user-attachments/assets/b0c3c899-6050-4c51-baed-c8fbec5aae61"
/>

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -10,6 +10,7 @@ import AssistantGuidelinesIndex from './assistants/guidelines/Index.vue';
 import AssistantScenariosIndex from './assistants/scenarios/Index.vue';
 import DocumentsIndex from './documents/Index.vue';
 import ResponsesIndex from './responses/Index.vue';
+import CustomToolsIndex from './tools/Index.vue';
 
 export const routes = [
   {
@@ -124,4 +125,17 @@ export const routes = [
       ],
     },
   },
+  {
+    path: frontendURL('accounts/:accountId/captain/tools'),
+    component: CustomToolsIndex,
+    name: 'captain_tools_index',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN_V2,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
 ];

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

@@ -0,0 +1,138 @@
+<script setup>
+import { computed, onMounted, ref, nextTick } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+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 uiFlags = useMapGetter('captainCustomTools/getUIFlags');
+const customTools = useMapGetter('captainCustomTools/getRecords');
+const isFetching = computed(() => uiFlags.value.fetchingList);
+const customToolsMeta = useMapGetter('captainCustomTools/getMeta');
+
+const createDialogRef = ref(null);
+const deleteDialogRef = ref(null);
+const selectedTool = ref(null);
+const dialogType = ref('');
+
+const fetchCustomTools = (page = 1) => {
+  store.dispatch('captainCustomTools/get', { page });
+};
+
+const onPageChange = page => fetchCustomTools(page);
+
+const openCreateDialog = () => {
+  dialogType.value = 'create';
+  selectedTool.value = null;
+  nextTick(() => createDialogRef.value.dialogRef.open());
+};
+
+const handleEdit = tool => {
+  dialogType.value = 'edit';
+  selectedTool.value = tool;
+  nextTick(() => createDialogRef.value.dialogRef.open());
+};
+
+const handleDelete = tool => {
+  selectedTool.value = tool;
+  nextTick(() => deleteDialogRef.value.dialogRef.open());
+};
+
+const handleAction = ({ action, id }) => {
+  const tool = customTools.value.find(t => t.id === id);
+  if (action === 'edit') {
+    handleEdit(tool);
+  } else if (action === 'delete') {
+    handleDelete(tool);
+  }
+};
+
+const handleDialogClose = () => {
+  dialogType.value = '';
+  selectedTool.value = null;
+};
+
+const onDeleteSuccess = () => {
+  selectedTool.value = null;
+  // Check if page will be empty after deletion
+  if (customTools.value.length === 1 && customToolsMeta.value.page > 1) {
+    // Go to previous page if current page will be empty
+    onPageChange(customToolsMeta.value.page - 1);
+  } else {
+    // Refresh current page
+    fetchCustomTools(customToolsMeta.value.page);
+  }
+};
+
+onMounted(() => {
+  fetchCustomTools();
+});
+</script>
+
+<template>
+  <PageLayout
+    :header-title="$t('CAPTAIN.CUSTOM_TOOLS.HEADER')"
+    :button-label="$t('CAPTAIN.CUSTOM_TOOLS.ADD_NEW')"
+    :button-policy="['administrator']"
+    :total-count="customToolsMeta.totalCount"
+    :current-page="customToolsMeta.page"
+    :show-pagination-footer="!isFetching && !!customTools.length"
+    :is-fetching="isFetching"
+    :is-empty="!customTools.length"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN_V2"
+    @update:current-page="onPageChange"
+    @click="openCreateDialog"
+  >
+    <template #paywall>
+      <CaptainPaywall />
+    </template>
+
+    <template #emptyState>
+      <CustomToolsPageEmptyState @click="openCreateDialog" />
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <CustomToolCard
+          v-for="tool in customTools"
+          :id="tool.id"
+          :key="tool.id"
+          :title="tool.title"
+          :description="tool.description"
+          :endpoint-url="tool.endpoint_url"
+          :http-method="tool.http_method"
+          :auth-type="tool.auth_type"
+          :param-schema="tool.param_schema"
+          :enabled="tool.enabled"
+          :created-at="tool.created_at"
+          :updated-at="tool.updated_at"
+          @action="handleAction"
+        />
+      </div>
+    </template>
+  </PageLayout>
+
+  <CreateCustomToolDialog
+    v-if="dialogType"
+    ref="createDialogRef"
+    :type="dialogType"
+    :selected-tool="selectedTool"
+    @close="handleDialogClose"
+  />
+
+  <DeleteDialog
+    v-if="selectedTool"
+    ref="deleteDialogRef"
+    :entity="selectedTool"
+    type="CustomTools"
+    translation-key="CUSTOM_TOOLS"
+    @delete-success="onDeleteSuccess"
+  />
+</template>