fix(ui): Various

webui/react-ui/src/pages/AgentsList.jsx

@@ -13,29 +13,14 @@ function AgentsList() {
   const fetchAgents = async () => {
     setLoading(true);
     try {
-      const response = await fetch('/agents');
-      const html = await response.text();
+      const response = await fetch('/api/agents');
+      if (!response.ok) {
+        throw new Error(`Server responded with status: ${response.status}`);
+      }
       
-      // Create a temporary element to parse the HTML
-      const tempDiv = document.createElement('div');
-      tempDiv.innerHTML = html;
-      
-      // Extract agent names and statuses from the HTML
-      const agentElements = tempDiv.querySelectorAll('[data-agent]');
-      const agentList = [];
-      const statusMap = {};
-      
-      agentElements.forEach(el => {
-        const name = el.getAttribute('data-agent');
-        const status = el.getAttribute('data-active') === 'true';
-        if (name) {
-          agentList.push(name);
-          statusMap[name] = status;
-        }
-      });
-      
-      setAgents(agentList);
-      setStatuses(statusMap);
+      const data = await response.json();
+      setAgents(data.agents || []);
+      setStatuses(data.statuses || {});
     } catch (err) {
       console.error('Error fetching agents:', err);
       setError('Failed to load agents');
@@ -47,7 +32,7 @@ function AgentsList() {
   // Toggle agent status (pause/start)
   const toggleAgentStatus = async (name, isActive) => {
     try {
-      const endpoint = isActive ? `/pause/${name}` : `/start/${name}`;
+      const endpoint = isActive ? `/api/agent/${name}/pause` : `/api/agent/${name}/start`;
       const response = await fetch(endpoint, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -64,8 +49,12 @@ function AgentsList() {
         // Show success toast
         const action = isActive ? 'paused' : 'started';
         showToast(`Agent "${name}" ${action} successfully`, 'success');
+        
+        // Refresh the agents list to ensure we have the latest data
+        fetchAgents();
       } else {
-        throw new Error(`Server responded with status: ${response.status}`);
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.error || `Server responded with status: ${response.status}`);
       }
     } catch (err) {
       console.error(`Error toggling agent status:`, err);
@@ -80,7 +69,7 @@ function AgentsList() {
     }
     
     try {
-      const response = await fetch(`/delete/${name}`, {
+      const response = await fetch(`/api/agent/${name}`, {
         method: 'DELETE',
         headers: { 'Content-Type': 'application/json' },
       });
@@ -88,11 +77,17 @@ function AgentsList() {
       if (response.ok) {
         // Remove from local state
         setAgents(prev => prev.filter(agent => agent !== name));
+        setStatuses(prev => {
+          const newStatuses = { ...prev };
+          delete newStatuses[name];
+          return newStatuses;
+        });
         
         // Show success toast
         showToast(`Agent "${name}" deleted successfully`, 'success');
       } else {
-        throw new Error(`Server responded with status: ${response.status}`);
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.error || `Server responded with status: ${response.status}`);
       }
     } catch (err) {
       console.error(`Error deleting agent:`, err);
@@ -117,7 +112,7 @@ function AgentsList() {
     <div className="agents-container">
       <header className="page-header">
         <h1>Manage Agents</h1>
-        <Link to="/create" className="create-btn">
+        <Link to="/create" className="action-btn">
           <i className="fas fa-plus"></i> Create New Agent
         </Link>
       </header>
@@ -198,8 +193,8 @@ function AgentsList() {
         <div className="no-agents">
           <h2>No Agents Found</h2>
           <p>Get started by creating your first agent</p>
-          <Link to="/create" className="create-agent-btn">
-            Create Agent
+          <Link to="/create" className="action-btn">
+            <i className="fas fa-plus"></i> Create Agent
           </Link>
         </div>
       )}

webui/react-ui/src/pages/GroupCreate.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import { agentApi } from '../utils/api';
 import AgentForm from '../components/AgentForm';
@@ -10,6 +10,7 @@ function GroupCreate() {
   const [generatingProfiles, setGeneratingProfiles] = useState(false);
   const [activeStep, setActiveStep] = useState(1);
   const [selectedProfiles, setSelectedProfiles] = useState([]);
+  const [metadata, setMetadata] = useState(null);
   const [formData, setFormData] = useState({
     description: '',
     model: '',
@@ -20,6 +21,24 @@ function GroupCreate() {
     profiles: []
   });
 
+  // Fetch metadata on component mount
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      try {
+        // Fetch metadata from the dedicated endpoint
+        const response = await agentApi.getAgentConfigMetadata();
+        if (response) {
+          setMetadata(response);
+        }
+      } catch (error) {
+        console.error('Error fetching metadata:', error);
+        // Continue without metadata, the form will use default fields
+      }
+    };
+
+    fetchMetadata();
+  }, []);
+
   // Handle form field changes
   const handleInputChange = (e) => {
     const { name, value, type } = e.target;
@@ -281,6 +300,7 @@ function GroupCreate() {
                 submitButtonText="Create Group"
                 isGroupForm={true}
                 noFormWrapper={true}
+                metadata={metadata}
               />
             </div>
             

webui/react-ui/src/pages/Home.jsx

@@ -20,11 +20,11 @@ function Home() {
       try {
         const agents = await agentApi.getAgents();
         setStats({
-          agents: agents.Agents || [],
-          agentCount: agents.AgentCount || 0,
-          actions: agents.Actions || 0,
-          connectors: agents.Connectors || 0,
-          status: agents.Status || {},
+          agents: agents.agents || [],
+          agentCount: agents.agentCount || 0,
+          actions: agents.actions || 0,
+          connectors: agents.connectors || 0,
+          status: agents.statuses || {},
         });
       } catch (err) {
         console.error('Error fetching dashboard data:', err);
@@ -115,14 +115,14 @@ function Home() {
                 </div>
                 <h2><i className="fas fa-robot"></i> {agent}</h2>
                 <div className="agent-actions">
-                  <Link to={`/talk/${agent}`} className="agent-action">
-                    Chat
+                  <Link to={`/talk/${agent}`} className="action-btn chat-btn">
+                    <i className="fas fa-comment"></i> Chat
                   </Link>
-                  <Link to={`/settings/${agent}`} className="agent-action">
-                    Settings
+                  <Link to={`/settings/${agent}`} className="action-btn settings-btn">
+                    <i className="fas fa-cog"></i> Settings
                   </Link>
-                  <Link to={`/status/${agent}`} className="agent-action">
-                    Status
+                  <Link to={`/status/${agent}`} className="action-btn status-btn">
+                    <i className="fas fa-chart-line"></i> Status
                   </Link>
                 </div>
               </div>