chore: polish ui related stuff

Author: Soumyadas15

frontend/package.json

@@ -19,7 +19,7 @@
     "@hookform/resolvers": "^5.0.1",
     "@next/third-parties": "^15.3.1",
     "@number-flow/react": "^0.5.7",
-    "@pipedream/sdk": "^1.7.0",
+
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.11",
     "@radix-ui/react-avatar": "^1.1.4",

frontend/src/app/(dashboard)/agents/page.tsx

@@ -358,7 +358,7 @@ export default function AgentsPage() {
       }
 
       const customRequirements = item.mcp_requirements?.filter(req => 
-        req.custom_type && req.custom_type !== 'pipedream'
+        req.custom_type
       ) || [];
       const missingCustomConfigs = customRequirements.filter(req => 
         !customMcpConfigs || !customMcpConfigs[req.qualified_name] || 
@@ -371,20 +371,6 @@ export default function AgentsPage() {
         return;
       }
 
-      const pipedreamRequirements = item.mcp_requirements?.filter(req => 
-        req.custom_type === 'pipedream'
-      ) || [];
-      const missingPipedreamConfigs = pipedreamRequirements.filter(req => 
-        !customMcpConfigs || !customMcpConfigs[req.qualified_name] || 
-        !customMcpConfigs[req.qualified_name].profile_id
-      );
-      
-      if (missingPipedreamConfigs.length > 0) {
-        const missingNames = missingPipedreamConfigs.map(req => req.display_name).join(', ');
-        toast.error(`Please select Pipedream profiles for: ${missingNames}`);
-        return;
-      }
-
       const result = await installTemplateMutation.mutateAsync({
         template_id: item.template_id,
         instance_name: instanceName,
@@ -566,7 +552,6 @@ export default function AgentsPage() {
         </div>
       </div>
       <div className="container mx-auto max-w-7xl px-4 py-2">
-        {/* Fixed height container to prevent layout shifts on tab change */}
         <div className="w-full min-h-[calc(100vh-300px)]">
           {activeTab === "my-agents" && (
             <MyAgentsTab

frontend/src/app/(dashboard)/projects/[projectId]/thread/[threadId]/page.tsx

@@ -27,8 +27,9 @@ import { UnifiedMessage, ApiMessageType, ToolCallInput, Project } from '../_type
 import { useThreadData, useToolCalls, useBilling, useKeyboardShortcuts } from '../_hooks';
 import { ThreadError, UpgradeDialog, ThreadLayout } from '../_components';
 import { useVncPreloader } from '@/hooks/useVncPreloader';
-import { useThreadAgent } from '@/hooks/react-query/agents/use-agents';
+import { useThreadAgent, useAgents } from '@/hooks/react-query/agents/use-agents';
 import { AgentRunLimitDialog } from '@/components/thread/agent-run-limit-dialog';
+import { useAgentSelection } from '@/lib/stores/agent-selection-store';
 
 export default function ThreadPage({
   params,
@@ -52,7 +53,17 @@ export default function ThreadPage({
   const [showUpgradeDialog, setShowUpgradeDialog] = useState(false);
   const [debugMode, setDebugMode] = useState(false);
   const [initialPanelOpenAttempted, setInitialPanelOpenAttempted] = useState(false);
-  const [selectedAgentId, setSelectedAgentId] = useState<string | undefined>(undefined);
+  // Use Zustand store for agent selection persistence
+  const { 
+    selectedAgentId, 
+    setSelectedAgent, 
+    initializeFromAgents,
+    getCurrentAgent,
+    isSunaAgent 
+  } = useAgentSelection();
+  
+  const { data: agentsResponse } = useAgents();
+  const agents = agentsResponse?.agents || [];
   const [isSidePanelAnimating, setIsSidePanelAnimating] = useState(false);
   const [userInitiatedRun, setUserInitiatedRun] = useState(false);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
@@ -134,12 +145,13 @@ export default function ThreadPage({
   const agent = threadAgentData?.agent;
   const workflowId = threadQuery.data?.metadata?.workflow_id;
 
-  // Set initial selected agent from thread data
+  // Initialize agent selection from thread data and agents list
   useEffect(() => {
-    if (threadAgentData?.agent && !selectedAgentId) {
-      setSelectedAgentId(threadAgentData.agent.agent_id);
+    if (agents.length > 0) {
+      const threadAgentId = threadAgentData?.agent?.agent_id;
+      initializeFromAgents(agents, threadAgentId);
     }
-  }, [threadAgentData, selectedAgentId]);
+  }, [threadAgentData, agents, initializeFromAgents]);
 
   const { data: subscriptionData } = useSubscription();
   const subscriptionStatus: SubscriptionStatus = subscriptionData?.status === 'active'
@@ -735,7 +747,7 @@ export default function ThreadPage({
               messages={messages}
               agentName={agent && agent.name}
               selectedAgentId={selectedAgentId}
-              onAgentSelect={setSelectedAgentId}
+              onAgentSelect={setSelectedAgent}
               toolCalls={toolCalls}
               toolCallIndex={currentToolIndex}
               showToolPreview={!isSidePanelOpen && toolCalls.length > 0}

frontend/src/components/agents/composio/composio-registry.tsx

@@ -4,8 +4,8 @@ import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Search, Zap, X, Settings, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
-import { useComposioToolkits, useComposioCategories, useComposioToolkitsInfinite } from '@/hooks/react-query/composio/use-composio';
+import { Search, Zap, X, Settings, ChevronDown, ChevronUp, Loader2, Server } from 'lucide-react';
+import { useComposioCategories, useComposioToolkitsInfinite } from '@/hooks/react-query/composio/use-composio';
 import { useComposioProfiles } from '@/hooks/react-query/composio/use-composio-profiles';
 import { useAgent, useUpdateAgent } from '@/hooks/react-query/agents/use-agents';
 import { ComposioConnector } from './composio-connector';
@@ -16,7 +16,7 @@ import { cn } from '@/lib/utils';
 import { useQueryClient } from '@tanstack/react-query';
 import { AgentSelector } from '../../thread/chat-input/agent-selector';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Switch } from '@/components/ui/switch';
+import { CustomMCPDialog } from '../mcp/custom-mcp-dialog';
 
 const CATEGORY_EMOJIS: Record<string, string> = {
   'popular': '🔥',
@@ -76,7 +76,6 @@ const getAgentConnectedApps = (
   return connectedApps;
 };
 
-// Helper function to check if an app is connected to the agent
 const isAppConnectedToAgent = (
   agent: any,
   appSlug: string,
@@ -289,6 +288,7 @@ export const ComposioRegistry: React.FC<ComposioRegistryProps> = ({
   const [showConnectedApps, setShowConnectedApps] = useState(true);
   const [showToolsManager, setShowToolsManager] = useState(false);
   const [selectedConnectedApp, setSelectedConnectedApp] = useState<ConnectedApp | null>(null);
+  const [showCustomMCPDialog, setShowCustomMCPDialog] = useState(false);
 
   const [internalSelectedAgentId, setInternalSelectedAgentId] = useState<string | undefined>(selectedAgentId);
   const queryClient = useQueryClient();
@@ -404,6 +404,41 @@ export const ComposioRegistry: React.FC<ComposioRegistryProps> = ({
     }
   };
 
+  const handleCustomMCPSave = async (customConfig: any): Promise<void> => {
+    if (!currentAgentId) {
+      throw new Error('Please select an agent first');
+    }
+
+    // Create MCP configuration for agent
+    const mcpConfig = {
+      name: customConfig.name || 'Custom MCP',
+      type: customConfig.type || 'sse',
+      config: customConfig.config || {},
+      enabledTools: customConfig.enabledTools || [],
+    };
+
+    // Get current custom MCPs from agent
+    const currentCustomMcps = agent?.custom_mcps || [];
+    const updatedCustomMcps = [...currentCustomMcps, mcpConfig];
+
+    // Return a promise that resolves/rejects based on the mutation result
+    return new Promise((resolve, reject) => {
+      updateAgent({
+        agentId: currentAgentId,
+        custom_mcps: updatedCustomMcps
+      }, {
+        onSuccess: () => {
+          toast.success(`Custom MCP "${customConfig.name}" added successfully`);
+          queryClient.invalidateQueries({ queryKey: ['agent', currentAgentId] });
+          resolve();
+        },
+        onError: (error: any) => {
+          reject(new Error(error.message || 'Failed to add custom MCP'));
+        }
+      });
+    });
+  };
+
   const categories = categoriesData?.categories || [];
 
   return (
@@ -484,6 +519,17 @@ export const ComposioRegistry: React.FC<ComposioRegistryProps> = ({
                     isSunaAgent={agent?.metadata?.is_suna_default}
                   />
                 )}
+                {mode !== 'profile-only' && currentAgentId && (
+                  <Button 
+                    variant="outline" 
+                    size="sm"
+                    onClick={() => setShowCustomMCPDialog(true)}
+                    className="flex items-center gap-2"
+                  >
+                    <Server className="h-4 w-4" />
+                    Add Custom MCP
+                  </Button>
+                )}
               </div>
             </div>
 
@@ -663,6 +709,11 @@ export const ComposioRegistry: React.FC<ComposioRegistryProps> = ({
           }}
         />
       )}
+      <CustomMCPDialog
+        open={showCustomMCPDialog}
+        onOpenChange={setShowCustomMCPDialog}
+        onSave={handleCustomMCPSave}
+      />
     </div>
   );
 }; 

frontend/src/components/agents/installation/streamlined-install-dialog.tsx

@@ -53,25 +53,6 @@ export const StreamlinedInstallDialog: React.FC<StreamlinedInstallDialogProps> =
     if (!item?.mcp_requirements) return [];
 
     const steps: SetupStep[] = [];
-    
-    item.mcp_requirements
-      .filter(req => req.custom_type === 'pipedream')
-      .forEach(req => {
-        const app_slug = req.qualified_name.startsWith('pipedream:') 
-          ? req.qualified_name.substring('pipedream:'.length)
-          : req.qualified_name;
-        
-        steps.push({
-          id: req.qualified_name,
-          title: `Connect ${req.display_name}`,
-          description: `Select an existing ${req.display_name} profile or create a new one`,
-          type: 'pipedream_profile',
-          service_name: req.display_name,
-          qualified_name: req.qualified_name,
-          app_slug: app_slug
-        });
-      });
-
     item.mcp_requirements
       .filter(req => req.custom_type === 'composio')
       .forEach(req => {
@@ -110,7 +91,7 @@ export const StreamlinedInstallDialog: React.FC<StreamlinedInstallDialogProps> =
       });
 
     item.mcp_requirements
-      .filter(req => req.custom_type && req.custom_type !== 'pipedream' && req.custom_type !== 'composio')
+      .filter(req => req.custom_type && req.custom_type !== 'composio')
       .forEach(req => {
         steps.push({
           id: req.qualified_name,
@@ -174,7 +155,6 @@ export const StreamlinedInstallDialog: React.FC<StreamlinedInstallDialogProps> =
 
     switch (step.type) {
       case 'credential_profile':
-      case 'pipedream_profile':
       case 'composio_profile':
         return !!profileMappings[step.qualified_name];
       case 'custom_server':
@@ -205,18 +185,7 @@ export const StreamlinedInstallDialog: React.FC<StreamlinedInstallDialogProps> =
     const finalCustomConfigs = { ...customMcpConfigs };
 
     setupSteps.forEach(step => {
-      if (step.type === 'pipedream_profile') {
-        const profileId = profileMappings[step.qualified_name];
-        if (profileId) {
-          finalCustomConfigs[step.qualified_name] = {
-            url: 'https://remote.mcp.pipedream.net',
-            headers: {
-              'x-pd-app-slug': step.app_slug,
-            },
-            profile_id: profileId
-          };
-        }
-      } else if (step.type === 'composio_profile') {
+      if (step.type === 'composio_profile') {
         const profileId = profileMappings[step.qualified_name];
         if (profileId) {
           finalCustomConfigs[step.qualified_name] = {
@@ -298,7 +267,7 @@ export const StreamlinedInstallDialog: React.FC<StreamlinedInstallDialogProps> =
         </div>
 
         <div>
-          {(currentStepData.type === 'credential_profile' || currentStepData.type === 'pipedream_profile' || currentStepData.type === 'composio_profile') && (
+          {(currentStepData.type === 'credential_profile' || currentStepData.type === 'composio_profile') && (
             <ProfileConnector
               step={currentStepData}
               selectedProfileId={profileMappings[currentStepData.qualified_name]}