ai-plugin: React to cluster change

Signed-off-by: ashu8912 <aghildiyal@microsoft.com>

Author: ashu8912

ai-assistant/src/components/settings/MCPConfigEditorDialog.tsx

@@ -126,18 +126,12 @@ export default function MCPConfigEditorDialog({
     const exampleConfig: MCPConfig = {
       enabled: true,
       servers: [
-        {
-          name: 'inspektor-gadget',
-          command: 'docker',
-          args: ['mcp', 'gateway', 'run'],
-          enabled: true,
-        },
         {
           name: 'flux-mcp',
           command: 'flux-operator-mcp',
-          args: ['serve'],
+          args: ['serve', '--kube-context', 'HEADLAMP_CURRENT_CLUSTER'],
           env: {
-            KUBECONFIG: '/Users/ashughildiyal/.kube/config',
+            KUBECONFIG: 'PATH_TO_KUBECONFIG',
           },
           enabled: true,
         },

ai-assistant/src/hooks/useClusterChangeNotifier.ts

@@ -0,0 +1,68 @@
+import { getCluster } from '@kinvolk/headlamp-plugin/lib/Utils';
+import React from 'react';
+
+// Check if we're running in Electron
+const isElectron = !!(window as any)?.desktopApi;
+
+/**
+ * Hook that monitors cluster changes and notifies the Electron main process
+ * This enables MCP servers to restart when cluster context changes
+ */
+export function useClusterChangeNotifier() {
+  const [currentCluster, setCurrentCluster] = React.useState<string | null>(null);
+  const previousClusterRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    // Function to check and update cluster
+    const checkClusterChange = () => {
+      const cluster = getCluster() || null;
+
+      // Update state if cluster changed
+      if (cluster !== currentCluster) {
+        setCurrentCluster(cluster);
+      }
+    };
+
+    // Check initially
+    checkClusterChange();
+
+    // Set up interval to check for cluster changes
+    const interval = setInterval(checkClusterChange, 1000); // Check every second
+
+    return () => clearInterval(interval);
+  }, [currentCluster]);
+
+  React.useEffect(() => {
+    // Only notify if running in Electron
+    if (!isElectron || !(window as any)?.desktopApi?.notifyClusterChange) {
+      return;
+    }
+
+    const previousCluster = previousClusterRef.current;
+
+    // Only notify if cluster actually changed and it's not the initial load
+    if (currentCluster !== previousCluster && previousClusterRef.current !== undefined) {
+      console.log('Cluster change detected, notifying electron:', {
+        from: previousCluster,
+        to: currentCluster,
+      });
+
+      // Notify the electron main process
+      (window as any).desktopApi.notifyClusterChange(currentCluster);
+    }
+
+    // Update the ref for next comparison
+    previousClusterRef.current = currentCluster;
+  }, [currentCluster]);
+
+  return currentCluster;
+}
+
+/**
+ * Component that automatically monitors cluster changes and notifies Electron
+ * This component should be included once in the app root to enable MCP server restart functionality
+ */
+export function ClusterChangeNotifier(): null {
+  useClusterChangeNotifier();
+  return null;
+}

ai-assistant/src/index.tsx

@@ -26,6 +26,7 @@ import { MCPSettings } from './components/settings';
 import { getDefaultConfig } from './config/modelConfig';
 import { PromptWidthProvider } from './contexts/PromptWidthContext';
 import { isTestModeCheck } from './helper';
+import { ClusterChangeNotifier } from './hooks/useClusterChangeNotifier';
 import AIPrompt from './modal';
 import {
   getAllAvailableTools,
@@ -50,6 +51,13 @@ const AIPanelComponent = React.memo(() => {
   const [width, setWidth] = React.useState('35vw');
   const [isResizing, setIsResizing] = React.useState(false);
 
+  // Check if models are configured
+  const savedConfigData = React.useMemo(() => {
+    return getSavedConfigurations(conf);
+  }, [conf]);
+
+  const hasAnyValidConfig = savedConfigData.providers && savedConfigData.providers.length > 0;
+
   const handleMouseDown = React.useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     setIsResizing(true);
@@ -105,6 +113,8 @@ const AIPanelComponent = React.memo(() => {
         },
       }}
     >
+      {/* Monitor cluster changes and notify electron - only when models are configured */}
+      {hasAnyValidConfig && <ClusterChangeNotifier />}
       <Box
         onMouseDown={handleMouseDown}
         sx={{
@@ -485,3 +495,6 @@ function Settings() {
 }
 
 registerPluginSettings(PLUGIN_NAME, Settings);
+
+// Export the cluster change notifier for external use
+export { useClusterChangeNotifier, ClusterChangeNotifier } from './hooks/useClusterChangeNotifier';