feat(ui): Add React based UI for the vibes at /app

This adds a completely separate frontend based on React because I
found that code gen works better with React once the application gets
bigger. In particular it was getting very hard to move past add
connectors and actions.

The idea is to replace the standard UI with this once it has been
tested. But for now it is available at /app in addition to the
original at /

Signed-off-by: Richard Palethorpe <io@richiejp.com>

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

@@ -0,0 +1,172 @@
+import { useState, useEffect } from 'react';
+import { useParams, useOutletContext, useNavigate } from 'react-router-dom';
+import { useAgent } from '../hooks/useAgent';
+import AgentForm from '../components/AgentForm';
+
+function AgentSettings() {
+  const { name } = useParams();
+  const { showToast } = useOutletContext();
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    identity_guidance: '',
+    random_identity: false,
+    hud: false,
+    model: '',
+    multimodal_model: '',
+    api_url: '',
+    api_key: '',
+    local_rag_url: '',
+    local_rag_api_key: '',
+    enable_reasoning: false,
+    enable_kb: false,
+    kb_results: 3,
+    long_term_memory: false,
+    summary_long_term_memory: false,
+    connectors: [],
+    actions: [],
+    mcp_servers: [],
+    system_prompt: '',
+    user_prompt: '',
+    goals: '',
+    standalone_job: false,
+    standalone_job_interval: 60,
+    avatar: '',
+    avatar_seed: '',
+    avatar_style: 'default',
+  });
+  
+  // Use our custom agent hook
+  const { 
+    agent, 
+    loading, 
+    error, 
+    updateAgent, 
+    toggleAgentStatus, 
+    deleteAgent 
+  } = useAgent(name);
+
+  // Load agent data when component mounts
+  useEffect(() => {
+    if (agent) {
+      setFormData({
+        ...formData,
+        ...agent,
+        name: name // Ensure name is set correctly
+      });
+    }
+  }, [agent]);
+
+  // Handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    try {
+      const success = await updateAgent(formData);
+      if (success) {
+        showToast('Agent updated successfully', 'success');
+      }
+    } catch (err) {
+      showToast(`Error updating agent: ${err.message}`, 'error');
+    }
+  };
+
+  // Handle agent toggle (pause/start)
+  const handleToggleStatus = async () => {
+    const isActive = agent?.active || false;
+    try {
+      const success = await toggleAgentStatus(isActive);
+      if (success) {
+        const action = isActive ? 'paused' : 'started';
+        showToast(`Agent "${name}" ${action} successfully`, 'success');
+      }
+    } catch (err) {
+      showToast(`Error toggling agent status: ${err.message}`, 'error');
+    }
+  };
+
+  // Handle agent deletion
+  const handleDelete = async () => {
+    if (!confirm(`Are you sure you want to delete agent "${name}"? This action cannot be undone.`)) {
+      return;
+    }
+    
+    try {
+      const success = await deleteAgent();
+      if (success) {
+        showToast(`Agent "${name}" deleted successfully`, 'success');
+        navigate('/agents');
+      }
+    } catch (err) {
+      showToast(`Error deleting agent: ${err.message}`, 'error');
+    }
+  };
+
+  if (loading && !agent) {
+    return (
+      <div className="settings-container">
+        <div className="loading">
+          <i className="fas fa-spinner fa-spin"></i>
+          <p>Loading agent settings...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="settings-container">
+        <div className="error">
+          <i className="fas fa-exclamation-triangle"></i>
+          <p>{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="settings-container">
+      <header className="page-header">
+        <h1>
+          <i className="fas fa-cog"></i> Agent Settings - {name}
+        </h1>
+        <div className="header-actions">
+          <button 
+            className={`action-btn ${agent?.active ? 'warning' : 'success'}`}
+            onClick={handleToggleStatus}
+          >
+            {agent?.active ? (
+              <><i className="fas fa-pause"></i> Pause Agent</>
+            ) : (
+              <><i className="fas fa-play"></i> Start Agent</>
+            )}
+          </button>
+          <button 
+            className="action-btn delete-btn"
+            onClick={handleDelete}
+          >
+            <i className="fas fa-trash"></i> Delete Agent
+          </button>
+        </div>
+      </header>
+      
+      <div className="settings-content">
+        {/* Agent Configuration Form Section */}
+        <div className="section-box">
+          
+          <AgentForm 
+            isEdit={true}
+            formData={formData}
+            setFormData={setFormData}
+            onSubmit={handleSubmit}
+            loading={loading}
+            submitButtonText="Save Changes"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AgentSettings;