use agentname in ws actions and frontend

frontend/src/backend.js

@@ -326,9 +326,9 @@ export async function getAgents() {
   return cache.agents;
 }
 
-export async function getAgent(agentId) {
+export async function getAgent(agentname) {
   const allAgents = await getAgents();
-  return allAgents.find(it => it.id == agentId);
+  return allAgents.find(it => it.agentname == agentname);
 }
 
 export function readStream(streamId) {

frontend/src/components/main/Sidebar.vue

@@ -38,10 +38,10 @@
     document.body.addEventListener('mouseup', documentMouseUp);
 
     chats.value = (await backend.getChats()).map(it => {
-      return {id: it.id, name: it.name};
+      return Object.assign({}, it);
     });
     agents.value = (await backend.getAgents()).map(it => {
-      return {id: it.id, name: it.name};
+      return Object.assign({}, it);
     });
   });
 
@@ -110,7 +110,7 @@
       <RouterLink to="/chat/create" class="nav-item">Create Chat</RouterLink>
     </nav>
     <nav v-if="mode=='agents'">
-      <RouterLink v-for="it in agents" :to="'/agent/' + it.id" class="nav-item">{{it.name}}</RouterLink>
+      <RouterLink v-for="it in agents" :to="'/agent/' + it.agentname" class="nav-item">{{it.name}}</RouterLink>
       <RouterLink to="/agent/create" class="nav-item">Create Agent</RouterLink>
     </nav>
     <nav v-if="mode=='settings'">

frontend/src/views/Agent.vue

@@ -30,8 +30,8 @@
 
   // === State Management === //
 
-  async function loadAgentData (agentId) {
-    const _agent = await backend.getAgent(agentId);
+  async function loadAgentData (agentname) {
+    const _agent = await backend.getAgent(agentname);
     if (!_agent) {
       ui.alert("Agent not found");
       return;
@@ -50,7 +50,7 @@
       kindInfo.value.name = _agent.kind;
     });
 
-    backend.sendAction('get-agent-config-fields', {agentId}).then(res => {
+    backend.sendAction('get-agent-config-fields', {agentname}).then(res => {
       const dataObject = Object.fromEntries(res.fields.map(
         field => [field.name, field.value]
       ));
@@ -66,7 +66,7 @@
     });
 
     // Replace with a backend call
-    backend.sendAction('get-agent-resources', {agentId}).then(res => {
+    backend.sendAction('get-agent-resources', {agentname}).then(res => {
       tools.value = res.resources.filter(r => r.kind == 'tool');
       resources.value = res.resources.filter(r => !['tool', 'config'].includes(r.kind));
     });
@@ -106,7 +106,7 @@
     promptInstruction.value = "";
     promptInput.value = "";
 
-    let payload = {agentId: agent.value.id};
+    let payload = {agentname: agent.value.agentname};
     let historyEntry = reactive({loading: true});
 
     if (promptInstructionEnabled.value) {
@@ -152,7 +152,9 @@
     const value = prompt(`Enter a new identifier for ${agent.value.name}`);
     if (value) {
       backend.sendAction("update-agent", {
+        // agentId is necessary here
         agentId: agent.value.id,
+        // used as value instead of identifier
         agentname: value,
       }).then(res => {
         ui.alert(res.error ?
@@ -173,8 +175,8 @@
     const value = prompt(`Enter a new name for ${agent.value.name}`);
     if (value) {
       backend.sendAction("update-agent", {
-        agentId: agent.value.id,
-        agentname: value,
+        agentname: agent.value.agentname,
+        name: value,
       }).then(res => {
         ui.alert(res.error ?
           'Error updating agent name' :
@@ -214,7 +216,7 @@
     }
 
     let res = await backend.sendAction("update-agent", {
-      agentId: agent.value.id,
+      agentname: agent.value.agentname,
       data: dataObject,
     });
 
@@ -262,7 +264,7 @@
 <template>
   <main>
     <TitleBar>
-      <h1>{{ agent.name || `Agent-${id}` }}</h1>
+      <h1>{{ agent.name || agent.agentname || `Agent-${id}` }}</h1>
     </TitleBar>
 
     <section class="top-section">
@@ -271,7 +273,7 @@
       <div class="basic-config" style="padding-top: 1em;">
         <div>
           <span class="label">Agent ID</span>
-          <span class="value">{{id}}</span>
+          <span class="value">{{agent.id}}</span>
         </div>
         <div>
           <span class="label">Identifier</span>

frontend/src/views/AgentCreate.vue

@@ -17,6 +17,9 @@
     kind: "",
   });
 
+  // Whether to update `agentname` based on agent's name
+  var doSyncIdentifier = true;
+
   async function submitAgent () {
     const payload = {
       'name': agent.value.name,
@@ -29,7 +32,7 @@
     }
 
     if (agent.value.identifier) {
-      payload.identifier = agent.value.identifier;
+      payload.agentname = agent.value.identifier;
     }
 
     if (agent.value.temporary) {
@@ -43,7 +46,22 @@
     } else {
       ui.alert(`Created Agent "${payload.name}"`);
       backend.invalidateCache({agents: true});
-      ui.goto(`/agent/${response.agentId}`);
+      ui.goto(`/agent/${payload.agentname}`);
+    }
+  }
+
+  async function onIdentifierChange() {
+    if (agent.value.identifier == "") {
+      doSyncIdentifier = true;
+      syncIdentifier();
+    } else {
+      doSyncIdentifier = false;
+    }
+  }
+
+  async function syncIdentifier() {
+    if (doSyncIdentifier) {
+      agent.value.identifier = agent.value.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
     }
   }
 
@@ -59,8 +77,8 @@
     </TitleBar>
 
     <section class="container">
-      <input v-model="agent.name" placeholder="Name" />
-      <input v-model="agent.identifier" placeholder="Identifier (optional)" />
+      <input v-model="agent.name" placeholder="Name" @input="syncIdentifier($event)"/>
+      <input v-model="agent.identifier" placeholder="Identifier" @change="onIdentifierChange($event)"/>
       <select v-model="agent.kind" :class="{ placeholder: !agent.kind }">
         <option value="" disabled>Select type</option>
         <option v-for="k in kinds" :key="k" :value="k">{{ k }}</option>