rename frontend directory

frontend/src/views/Agent.vue

@@ -0,0 +1,196 @@
+<script setup>
+  import {
+    ref, watch,
+    onMounted, onUnmounted,
+  } from "vue";
+
+  import * as backend from '../backend';
+  import * as ui from '../ui';
+
+  const props = defineProps({
+    id: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const agent = ref({});
+  const kindInfo = ref({});
+  const configFields = ref([]);
+
+
+  // === State Management === //
+
+  async function loadAgentData (agentId) {
+    const _agent = await backend.getAgent(agentId);
+    if (!_agent) {
+      ui.alert("Agent not found");
+      return;
+    }
+
+    agent.value = {
+      id: _agent.id,
+      name: _agent.name,
+      agentname: _agent.agentname,
+      description: _agent.description,
+      picture: _agent.picture,
+    };
+
+    backend.sendAction("get-agent-kind-info", {kind: _agent.kind}).then(res => {
+      kindInfo.value.description = res.info.description;
+    });
+
+    backend.sendAction('get-agent-config-fields', {agentId}).then(res => {
+      configFields.value = res.fields.map(field => ({
+        name: field.name,
+        type: field.type,
+        value: field.value,
+        default: null,
+        enabled: field.value != null,
+      }));
+    });
+  }
+
+  // This won't fire when immediately, the mounted callback will take care
+  watch(() => props.id, newId => {
+    loadAgentData(newId);
+  })
+
+  onMounted(async () => {
+    loadAgentData(props.id);
+  });
+
+  function updateIdentifier() {
+    const value = prompt(`Enter a new identifier for ${agent.value.name}`);
+    if (value) {
+      backend.sendAction("update-agent", {
+        agentId: agent.value.id,
+        agentname: value,
+      }).then(res => {
+        ui.alert(res.error ?
+          'Error updating agent identifier' :
+          'Agent identifier updated'
+        );
+        if (!res.error) {
+          agent.value.agentname = value;
+          backend.invalidateCache({agents: true});
+        }
+      });
+    } else {
+      ui.alert("Cancelled identifier update");
+    }
+  }
+
+  function updateName() {
+    const value = prompt(`Enter a new name for ${agent.value.name}`);
+    if (value) {
+      backend.sendAction("update-agent", {
+        agentId: agent.value.id,
+        agentname: value,
+      }).then(res => {
+        ui.alert(res.error ?
+          'Error updating agent name' :
+          'Agent name updated'
+        );
+        if (!res.error) {
+          agent.value.name = value;
+          backend.invalidateCache({agents: true});
+        }
+      });
+    } else {
+      ui.alert("Cancelled name update");
+    }
+  }
+  async function saveChanges() {
+    const dataObject = {};
+    for (let field of configFields.value) {
+      if (field.enabled) {
+        dataObject[field.name] = field.value;
+      }
+    }
+
+    let res = await backend.sendAction("update-agent", {
+      agentId: agent.value.id,
+      data: dataObject,
+    });
+
+    ui.alert(res.error ?
+      'Error updating agent' :
+      'Agent updated'
+    );
+
+    if (!res.error) {
+      backend.invalidateCache({agents: true});
+    }
+  }
+</script>
+
+<template>
+  <main>
+    <h1>{{ agent.name || `Agent-${id}` }}</h1>
+    <section class="top-section">
+      <div>
+        <span class="label">Agent ID</span>
+        <span class="value">{{id}}</span>
+      </div>
+      <div>
+        <span class="label">Identifier</span>
+        <span class="value">{{agent.agentname}}</span>
+        <button @click="updateIdentifier">Edit</button>
+      </div>
+      <div>
+        <button @click="updateName">Change Name</button>
+      </div>
+    </section>
+    <section>
+      <p style="padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>
+
+      <div v-for="(configField, index) in configFields" :key="index">
+        <span class="label">{{ configField.name }}</span>
+        <input type="checkbox" v-model="configField.enabled" />
+        <br>
+        <textarea v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
+      </div>
+      
+      <button type="submit" @click="saveChanges()">Save</button>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+  section {
+    margin: 1em;
+    padding: 1em;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+  }
+
+  .top-section {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .top-section > div {
+    margin-right: 2em;
+  }
+
+  .label {
+    font-size: 80%;
+    font-weight: bold;
+    margin-right: 0.5em;
+  }
+
+  .value {
+    padding: 0 0.5em;
+    padding-top: 0.35em;
+
+    border: 1px solid var(--color-border);
+    font-family: monospace;
+  }
+
+  textarea.config-input {
+    width: 100%;
+    resize: vertical;
+    height: 5em;
+  }
+</style>