Fix agent modal scrolling and add edit functionality

[90stm]

Summary

This PR fixes two issues with the Agent Management modal:

1. Fixes scrolling issue preventing users from viewing all agents (No ability to edit already existing agents #259)
2. Adds missing edit functionality for agents (No ability to edit already existing agents #259)

Changes Made

1. Fixed Agent Modal Scrolling

• Replaced ScrollArea component with native overflow-y-scroll in AgentsModal.tsx
• Changed container from overflow-hidden to min-h-0 to allow proper scrolling
• Added max-h-[400px] constraint to ensure scrollbar appears
• Added custom scrollbar styling for better UX

2. Added Edit Functionality

• Added Edit button to each agent card in the modal
• Implemented event system to pass agent data to CreateAgent component
• Modified CreateAgent component to accept editing data via localStorage
• Added proper cleanup logic for localStorage
• Updated tab management to show "Edit: [Agent Name]" when editing

Testing

• Verified all 11 agents are now visible with working scrollbar
• Tested edit functionality with existing agents
• Confirmed agent data properly loads in edit mode
• Tested creating new agents still works as expected

[123vivekr]

@claude please review this

[claude]

Claude encountered an error —— View job

Failed with exit code 128

---

I'll analyze this and get back to you.

[123vivekr]

@claude please review this

[claude]

Claude encountered an error —— View job

Failed with exit code 128

---

I'll analyze this and get back to you.

[123vivekr]

Hi, thanks for the PR. I just ran it through claude. Can you take a look at these suggestions?

1. Remove localStorage, use React Context or Props

   // Better approach: Use a shared context or props
   interface EditAgentContextType {
     editingAgent: Agent | null;
     setEditingAgent: (agent: Agent | null) => void;
   }
   
   const EditAgentContext = createContext<EditAgentContextType>(/* ... */);

2. Add Error Handling

   // Wrap JSON.parse in try-catch
   try {
     const stored = window.localStorage.getItem('editingAgent');
     if (stored) {
       return JSON.parse(stored);
     }
   } catch (error) {
     console.error('Failed to parse editing agent data:', error);
     // Clear corrupted data
     window.localStorage.removeItem('editingAgent');
   }

3. Remove Arbitrary Timeouts

   • Use proper React lifecycle methods instead of setTimeout
   • If tab update is async, use callbacks or promises

4. Type Custom Events

   // Create typed event definitions
   interface OpenEditAgentTabEvent extends CustomEvent {
     detail: {
       agent: Agent;
     };
   }
   
   declare global {
     interface WindowEventMap {
       'open-edit-agent-tab': OpenEditAgentTabEvent;
     }
   }