fix issues inconsistncy

frontend/src/components/agents/agent-builder-chat.tsx

@@ -14,6 +14,7 @@ import { BillingError } from '@/lib/api';
 import { useQueryClient } from '@tanstack/react-query';
 import { agentKeys } from '@/hooks/react-query/agents/keys';
 import { normalizeFilenameToNFC } from '@/lib/utils/unicode';
+import { useAgentRunsQuery } from '@/hooks/react-query/threads/use-agent-run';
 
 interface AgentBuilderChatProps {
   agentId: string;
@@ -44,6 +45,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
   const previousMessageCountRef = useRef(0);
   const hasInitiallyLoadedRef = useRef(false);
   const previousAgentIdRef = useRef<string | null>(null);
+  const agentRunsCheckedRef = useRef(false);
 
   // Debug mount/unmount
   useEffect(() => {
@@ -63,6 +65,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
       setAgentRunId(null);
       setHasStartedConversation(false);
       previousMessageCountRef.current = 0;
+      agentRunsCheckedRef.current = false;
     }
     previousAgentIdRef.current = agentId;
   }, [agentId]);
@@ -72,6 +75,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
   const startAgentMutation = useStartAgentMutation();
   const stopAgentMutation = useStopAgentMutation();
   const chatHistoryQuery = useAgentBuilderChatHistory(agentId);
+  const agentRunsQuery = useAgentRunsQuery(threadId || '');
   const queryClient = useQueryClient();
 
   const scrollToBottom = () => {
@@ -118,6 +122,23 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
     }
   }, [chatHistoryQuery.data, chatHistoryQuery.status, chatHistoryQuery.error, agentId]);
 
+  useEffect(() => {
+    if (threadId && agentRunsQuery.data && !agentRunsCheckedRef.current) {
+      console.log('[AgentBuilderChat] Checking for active agent runs...');
+      agentRunsCheckedRef.current = true;
+
+      const activeRun = agentRunsQuery.data.find((run) => run.status === 'running');
+      if (activeRun) {
+        console.log('[AgentBuilderChat] Found active run on load:', activeRun.id);
+        setAgentRunId(activeRun.id);
+        setAgentStatus('connecting');
+      } else {
+        console.log('[AgentBuilderChat] No active agent runs found');
+        setAgentStatus('idle');
+      }
+    }
+  }, [threadId, agentRunsQuery.data]);
+
   const handleNewMessageFromStream = useCallback((message: UnifiedMessage) => {
     setMessages((prev) => {
       if (!prev) prev = [];
@@ -169,7 +190,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
         setAgentStatus('running');
         break;
     }
-  }, []);
+  }, [queryClient, agentId]);
 
   const handleStreamError = useCallback((errorMessage: string) => {
     if (!errorMessage.toLowerCase().includes('not found') &&
@@ -202,10 +223,11 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
   );
 
   useEffect(() => {
-    if (agentRunId && agentRunId !== currentHookRunId && threadId) {
+    if (agentRunId && agentRunId !== currentHookRunId) {
+      console.log(`[AgentBuilderChat] Target agentRunId set to ${agentRunId}, initiating stream...`);
       startStreaming(agentRunId);
     }
-  }, [agentRunId, startStreaming, currentHookRunId, threadId]);
+  }, [agentRunId, startStreaming, currentHookRunId]);
 
   const handleSubmitFirstMessage = async (
     message: string,

frontend/src/components/agents/custom-agents-page/marketplace-tab.tsx

@@ -47,10 +47,10 @@ export const MarketplaceTab = ({
           <SelectTrigger className="w-[180px] h-12 rounded-xl">
             <SelectValue placeholder="Filter agents" />
           </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All Agents</SelectItem>
-            <SelectItem value="kortix">Kortix Verified</SelectItem>
-            <SelectItem value="community">Community</SelectItem>
+          <SelectContent className='rounded-xl'>
+            <SelectItem className='rounded-xl' value="all">All Agents</SelectItem>
+            <SelectItem className='rounded-xl' value="kortix">Kortix Verified</SelectItem>
+            <SelectItem className='rounded-xl' value="community">Community</SelectItem>
           </SelectContent>
         </Select>
       </div>

frontend/src/components/agents/custom-agents-page/my-agents-tab.tsx

@@ -1,14 +1,9 @@
 'use client';
 
 import React, { useState, useMemo } from 'react';
-import { Plus, Filter, Globe, ChevronDown, Users } from 'lucide-react';
+import { Plus, Filter, Globe, Users } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { SearchBar } from './search-bar';
 import { EmptyState } from '../empty-state';
 import { AgentsGrid } from '../agents-grid';
@@ -47,8 +42,8 @@ interface MyAgentsTabProps {
 }
 
 const filterOptions = [
-  { value: 'all', label: 'All Agents', icon: Users },
-  { value: 'templates', label: 'Templates', icon: Globe },
+  { value: 'all', label: 'All Agents' },
+  { value: 'templates', label: 'Templates' },
 ];
 
 export const MyAgentsTab = ({
@@ -93,8 +88,7 @@ export const MyAgentsTab = ({
     onClearFilters();
   };
 
-  const currentFilter = filterOptions.find(filter => filter.value === agentFilter);
-  const CurrentFilterIcon = currentFilter?.icon || Users;
+
 
   const getCountForFilter = (filterValue: string) => {
     if (filterValue === 'templates') {
@@ -146,7 +140,7 @@ export const MyAgentsTab = ({
                   ? () => onUnpublish(template.template_id, template.name)
                   : () => onPublish(template)
               }
-              onSecondaryAction={template.is_public ? () => {/* View in marketplace */} : undefined}
+              onSecondaryAction={template.is_public ? () => {} : undefined}
             />
           );
         })}
@@ -162,42 +156,21 @@ export const MyAgentsTab = ({
           value={agentsSearchQuery}
           onChange={setAgentsSearchQuery}
         />
-        
         <div className="flex items-center gap-3">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="rounded-xl">
-                  <CurrentFilterIcon className="h-4 w-4 mr-2" />
-                  {currentFilter?.label}
-                  <Badge variant="outline">
-                    {getCountForFilter(agentFilter)}
-                  </Badge>
-                  <ChevronDown className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                {filterOptions.map((filter) => {
-                  const Icon = filter.icon;
-                  const count = getCountForFilter(filter.value);
-                  return (
-                    <DropdownMenuItem
-                      key={filter.value}
-                      onClick={() => setAgentFilter(filter.value as AgentFilter)}
-                      className="cursor-pointer"
-                    >
-                      <Icon className="h-4 w-4" />
-                      {filter.label}
-                      <Badge variant="outline" className="ml-auto">
-                        {count}
-                      </Badge>
-                    </DropdownMenuItem>
-                  );
-                })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
+          <Select value={agentFilter} onValueChange={(value: AgentFilter) => setAgentFilter(value)}>
+            <SelectTrigger className="w-[180px] h-12 rounded-xl">
+              <SelectValue placeholder="Filter agents" />
+            </SelectTrigger>
+            <SelectContent className='rounded-xl'>
+              {filterOptions.map((filter) => (
+                <SelectItem key={filter.value} className='rounded-xl' value={filter.value}>
+                  {filter.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
       </div>
-
       <div className="flex-1">
         {agentFilter === 'templates' ? (
           renderTemplates()
@@ -222,7 +195,6 @@ export const MyAgentsTab = ({
                 publishingId={publishingAgentId}
               />
             )}
-
             {agentsPagination && agentsPagination.pages > 1 && (
               <Pagination
                 currentPage={agentsPagination.page}