feat(all): implement tool toggle functionality with optimistic updates

Author: Lasim

services/backend/src/routes/teams/mcp-installations/toggle-tool.ts

@@ -315,7 +315,7 @@ export default async function toggleToolRoute(server: FastifyInstance) {
 
       const action = is_disabled ? 'disabled' : 'enabled';
       const syncMessage = commandId
-        ? 'Change will sync to satellite within 2 seconds.'
+        ? 'Changes saved and sent to satellite.'
         : 'No active satellite available - change saved to database.';
 
       const successResponse: SuccessResponse = {

services/frontend/src/components/mcp-server/installation/McpToolsTab.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { toast } from 'vue-sonner'
 import { useMcpToolsStore } from '@/stores/mcpToolsStore'
+import { McpToolsService } from '@/services/mcpToolsService'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Switch } from '@/components/ui/switch'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Chart } from '@/components/ui/chart'
 import { AlertCircle, Package, Wrench, Coins } from 'lucide-vue-next'
@@ -19,16 +22,22 @@ use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
 interface Props {
   installation: McpInstallation
   teamId: string
+  canEdit?: boolean
+  userRole?: 'team_admin' | 'team_user' | null
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  canEdit: false,
+  userRole: null
+})
 const { t } = useI18n()
 const mcpToolsStore = useMcpToolsStore()
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const tools = ref<any>(null)
 const isLoading = ref(true)
 const error = ref<string | null>(null)
+const togglingToolId = ref<string | null>(null)
 
 // Format token count with commas
 const formatTokenCount = (count: number) => {
@@ -58,6 +67,49 @@ const hasTools = computed(() => {
   return tools.value && tools.value.tools && tools.value.tools.length > 0
 })
 
+// Handle tool toggle
+async function handleToolToggle(toolId: string, toolName: string, currentDisabled: boolean) {
+  if (!props.canEdit) return
+
+  const newDisabledState = !currentDisabled
+  togglingToolId.value = toolId
+
+  // Optimistic update
+  const toolIndex = tools.value.tools.findIndex((t: { id: string }) => t.id === toolId)
+  if (toolIndex !== -1) {
+    tools.value.tools[toolIndex].is_disabled = newDisabledState
+  }
+
+  try {
+    const response = await McpToolsService.toggleToolStatus(
+      props.teamId,
+      props.installation.id,
+      toolId,
+      newDisabledState
+    )
+
+    const action = newDisabledState
+      ? t('mcpInstallations.details.mcpTools.toggle.disabled')
+      : t('mcpInstallations.details.mcpTools.toggle.enabled')
+
+    toast.success(t('mcpInstallations.details.mcpTools.toggle.success', { toolName, action }), {
+      description: response.message
+    })
+  } catch (err) {
+    // Revert optimistic update on error
+    if (toolIndex !== -1) {
+      tools.value.tools[toolIndex].is_disabled = currentDisabled
+    }
+
+    const errorMessage = err instanceof Error ? err.message : t('mcpInstallations.details.mcpTools.toggle.error')
+    toast.error(t('mcpInstallations.details.mcpTools.toggle.errorTitle'), {
+      description: errorMessage
+    })
+  } finally {
+    togglingToolId.value = null
+  }
+}
+
 // Pie chart configuration for token distribution
 const pieChartOption = computed<EChartsOption>(() => {
   if (!hasTools.value) return {}
@@ -167,13 +219,21 @@ const pieChartOption = computed<EChartsOption>(() => {
         <Table>
           <TableHeader>
             <TableRow>
+              <TableHead class="w-20">{{ t('mcpInstallations.details.mcpTools.table.columns.enabled') }}</TableHead>
               <TableHead>{{ t('mcpInstallations.details.mcpTools.table.columns.toolName') }}</TableHead>
               <TableHead>{{ t('mcpInstallations.details.mcpTools.table.columns.description') }}</TableHead>
               <TableHead class="text-right">{{ t('mcpInstallations.details.mcpTools.table.columns.tokenCount') }}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             <TableRow v-for="tool in tools.tools" :key="tool.id">
+              <TableCell class="align-top">
+                <Switch
+                  :model-value="!tool.is_disabled"
+                  :disabled="!props.canEdit || togglingToolId === tool.id"
+                  @update:model-value="handleToolToggle(tool.id, tool.tool_name, tool.is_disabled)"
+                />
+              </TableCell>
               <TableCell class="text-sm font-medium align-top whitespace-nowrap">{{ tool.tool_name }}</TableCell>
               <TableCell class="text-sm text-muted-foreground max-w-2xl">
                 <div class="whitespace-normal wrap-break-word">

services/frontend/src/components/ui/switch/Switch.vue

@@ -1,36 +1,33 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   SwitchRoot,
-  type SwitchRootEmits,
-  type SwitchRootProps,
   SwitchThumb,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
 
 const emits = defineEmits<SwitchRootEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SwitchRoot
-    data-slot="switch"
     v-bind="forwarded"
     :class="cn(
-      'w-[42px] h-[25px] bg-gray-300 data-[state=checked]:bg-primary rounded-full relative cursor-default transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50',
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       props.class,
     )"
   >
     <SwitchThumb
-      data-slot="switch-thumb"
-      :class="cn('block w-[21px] h-[21px] bg-white rounded-full transition-transform duration-100 translate-x-0.5 data-[state=checked]:translate-x-[19px] shadow-sm')"
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
     >
       <slot name="thumb" />
     </SwitchThumb>

services/frontend/src/components/ui/switch/index.ts

@@ -1 +1 @@
-export { default as Switch } from './Switch.vue'
+export { default as Switch } from "./Switch.vue"

services/frontend/src/i18n/locales/en/mcp-installations.ts

@@ -624,6 +624,7 @@ export default {
       },
       table: {
         columns: {
+          enabled: 'Enabled',
           toolName: 'Tool Name',
           description: 'Description',
           tokenCount: 'Token Count'
@@ -632,6 +633,13 @@ export default {
           noDescription: 'No description provided'
         }
       },
+      toggle: {
+        success: 'Tool "{toolName}" {action}',
+        enabled: 'enabled',
+        disabled: 'disabled',
+        errorTitle: 'Failed to update tool',
+        error: 'An error occurred while updating the tool status'
+      },
       summary: {
         totalTools: 'Total Tools',
         totalTokens: 'Total Tokens',

services/frontend/src/services/mcpToolsService.ts

@@ -10,10 +10,19 @@ export interface McpTool {
   description: string
   input_schema: unknown
   token_count: number
+  is_disabled: boolean
   discovered_at: string
   updated_at: string
 }
 
+export interface ToggleToolResponse {
+  tool_id: string
+  tool_name: string
+  is_disabled: boolean
+  command_id?: string
+  message: string
+}
+
 export interface InstallationToolsResponse {
   installation_id: string
   installation_name: string
@@ -77,6 +86,42 @@ export class McpToolsService {
     return data.data || data
   }
 
+  /**
+   * Toggle tool enabled/disabled status
+   */
+  static async toggleToolStatus(
+    teamId: string,
+    installationId: string,
+    toolId: string,
+    isDisabled: boolean
+  ): Promise<ToggleToolResponse> {
+    const response = await fetch(
+      `${this.baseUrl}/api/teams/${teamId}/mcp/installations/${installationId}/tools/${toolId}`,
+      {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ is_disabled: isDisabled }),
+      }
+    )
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      if (response.status === 403) {
+        throw new Error('You don\'t have permission to manage tools')
+      }
+      if (response.status === 404) {
+        throw new Error('Tool not found')
+      }
+      throw new Error(errorData.error || `Failed to update tool status: ${response.status}`)
+    }
+
+    const data = await response.json()
+    return data.data || data
+  }
+
   /**
    * Get team-wide tools summary (future phase)
    * Note: Backend endpoint not yet implemented

services/frontend/src/views/mcp-server/installation/[id].vue

@@ -199,6 +199,8 @@ const loadAndSetInstallation = async () => {
           v-if="activeTab === 'mcp-tools'"
           :installation="installation"
           :team-id="currentTeam.id"
+          :can-edit="canEditInstallation"
+          :user-role="userTeamRole"
         />
         <TeamConfiguration
           v-if="activeTab === 'environment'"