fix(ui): Set page title

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

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext, useNavigate } from 'react-router-dom';
 import { actionApi } from '../utils/api';
 
 function ActionsPlayground() {
   const { showToast } = useOutletContext();
+  const navigate = useNavigate();
   const [actions, setActions] = useState([]);
   const [selectedAction, setSelectedAction] = useState('');
   const [configJson, setConfigJson] = useState('{}');
@@ -12,6 +13,14 @@ function ActionsPlayground() {
   const [loading, setLoading] = useState(false);
   const [loadingActions, setLoadingActions] = useState(true);
 
+  // Update document title
+  useEffect(() => {
+    document.title = 'Actions Playground - LocalAgent';
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, []);
+
   // Fetch available actions
   useEffect(() => {
     const fetchActions = async () => {

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

@@ -10,7 +10,17 @@ function AgentSettings() {
   const navigate = useNavigate();
   const [metadata, setMetadata] = useState(null);
   const [formData, setFormData] = useState({});
-  
+
+  // Update document title
+  useEffect(() => {
+    if (name) {
+      document.title = `Agent Settings: ${name} - LocalAgent`;
+    }
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, [name]);
+
   // Use our custom agent hook
   const { 
     agent, 

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

@@ -1,14 +1,25 @@
 import { useState, useEffect } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 
 function AgentStatus() {
   const { name } = useParams();
+  const navigate = useNavigate();
   const [statusData, setStatusData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [eventSource, setEventSource] = useState(null);
   const [liveUpdates, setLiveUpdates] = useState([]);
 
+  // Update document title
+  useEffect(() => {
+    if (name) {
+      document.title = `Agent Status: ${name} - LocalAgent`;
+    }
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, [name]);
+
   // Fetch initial status data
   useEffect(() => {
     const fetchStatusData = async () => {

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

@@ -95,6 +95,13 @@ function AgentsList() {
     }
   };
 
+  useEffect(() => {
+    document.title = 'Agents - LocalAgent';
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, []);
+
   // Load agents on mount
   useEffect(() => {
     fetchAgents();

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

@@ -1,10 +1,11 @@
 import { useState, useRef, useEffect } from 'react';
-import { useParams, useOutletContext } from 'react-router-dom';
+import { useParams, useOutletContext, useNavigate } from 'react-router-dom';
 import { useChat } from '../hooks/useChat';
 
 function Chat() {
   const { name } = useParams();
   const { showToast } = useOutletContext();
+  const navigate = useNavigate();
   const [message, setMessage] = useState('');
   const messagesEndRef = useRef(null);
   
@@ -19,6 +20,16 @@ function Chat() {
     clearError
   } = useChat(name);
 
+  // Update document title
+  useEffect(() => {
+    if (name) {
+      document.title = `Chat with ${name} - LocalAgent`;
+    }
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, [name]);
+
   // Scroll to bottom when messages change
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });

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

@@ -8,35 +8,14 @@ function CreateAgent() {
   const { showToast } = useOutletContext();
   const [loading, setLoading] = useState(false);
   const [metadata, setMetadata] = useState(null);
-  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',
-  });
+  const [formData, setFormData] = useState({});
+
+  useEffect(() => {
+    document.title = 'Create Agent - LocalAgent';
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, []);
 
   // Fetch metadata on component mount
   useEffect(() => {

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

@@ -21,6 +21,14 @@ function GroupCreate() {
     profiles: []
   });
 
+  // Update document title
+  useEffect(() => {
+    document.title = 'Create Agent Group - LocalAgent';
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, []);
+
   // Fetch metadata on component mount
   useEffect(() => {
     const fetchMetadata = async () => {

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { agentApi } from '../utils/api';
 
 function Home() {
@@ -12,6 +12,15 @@ function Home() {
   });
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const location = useLocation();
+
+  // Update document title
+  useEffect(() => {
+    document.title = 'Agent Dashboard - LocalAgent';
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, []);
 
   // Fetch dashboard data
   useEffect(() => {

webui/react-ui/src/pages/ImportAgent.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';
 
@@ -8,6 +8,14 @@ function ImportAgent() {
   const [file, setFile] = useState(null);
   const [loading, setLoading] = useState(false);
 
+  // Update document title
+  useEffect(() => {
+    document.title = 'Import Agent - LocalAgent';
+    return () => {
+      document.title = 'LocalAgent'; // Reset title when component unmounts
+    };
+  }, []);
+
   const handleFileChange = (e) => {
     const selectedFile = e.target.files[0];
     if (selectedFile) {