feat: agent resources upgrade

frontend/src/components/JsonEditor.vue

@@ -1,5 +1,6 @@
 <script setup>
   import { ref, computed, watch } from 'vue'
+  import * as ui from '../ui'
 
   const props = defineProps({
     /** JSON schema object describing the input structure */
@@ -55,6 +56,17 @@
     };
   }
 
+  async function addField(field) {
+    let key = await ui.input("Enter new property name");
+    if (!key) return;
+
+    // Never mutate the field object in place.
+    currentValue.value = {
+      ...(currentValue.value || {}),
+      [key]: null
+    };
+  }
+
   const computedFields = computed(() => {
     let fields = [];
     let skip = {};

frontend/src/views/Agent.vue

@@ -10,6 +10,8 @@
   import * as backend from '../backend';
   import * as ui from '../ui';
 
+  import * as iconoir from '@iconoir/vue';
+
   const props = defineProps({
     id: {
       type: String,
@@ -32,8 +34,7 @@
   });
 
   // UI State
-  const addingTool = ref(null);
-  const addingResource = ref(null);
+  const targetResource = ref(null);
 
   // === State Management === //
 
@@ -92,8 +93,7 @@
 
     // Replace with a backend call
     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));
+      resources.value = res.resources;
     });
   }
 
@@ -237,34 +237,66 @@
     });
   }
 
-  async function saveAddingTool() {
-    let resource = {
-      kind: 'tool',
-      key: addingTool.value.name,
-      value: JSON.parse(addingTool.value.value),
-    };
-    addingTool.value = null;
+  async function updateResourceKey () {
+    let newKey = await ui.input("Enter new resource key");
+    if (!newKey || newKey == targetResource.value.key) return;
 
-    let res = await backend.sendAction("save-agent-resource", {
+    // Guard collisions, backend won't
+    for (let r of resources.value) {
+      if (r.kind == targetResource.value.kind && r.key == newKey) {
+        ui.alert(`Conflict: ${targetResource.value.kind} '${newKey}'`);
+        return;
+      }
+    }
+
+    // Keys can't be updated directly, we move the resource
+    await backend.sendAction("delete-agent-resource", {
       agentId: agent.value.id,
-      ...resource
+      ...targetResource.value
+    });
+
+    targetResource.value.key = newKey;
+    await backend.sendAction("save-agent-resource", {
+      agentId: agent.value.id,
+      ...targetResource.value,
     });
-    tools.value.push(resource);
   }
 
-  async function saveAddingResource() {
-    let resource = {
-      kind: addingResource.value.kind,
-      key: addingResource.value.key,
-      value: JSON.parse(addingResource.value.value),
-    };
-    addingResource.value = null;
-
+  async function saveResource () {
     let res = await backend.sendAction("save-agent-resource", {
       agentId: agent.value.id,
-      ...resource
+      ...targetResource.value
     });
-    resources.value.push(resource);
+
+    ui.alert(`Saved ${targetResource.value.kind} '${targetResource.value.key}'`);
+
+    if (targetResource.value.isNew) {
+      delete targetResource.value.isNew;
+      resources.value.push(targetResource.value);
+    }
+  }
+
+  async function deleteResource () {
+    if (!await ui.confirm(`Delete ${targetResource.value.kind} '${targetResource.value.key}'?`)) return;
+
+    let res = await backend.sendAction("delete-agent-resource", {
+      agentId: agent.value.id,
+      ...targetResource.value
+    });
+
+    let index = resources.value.indexOf(targetResource.value);
+    if (index >= 0) resources.value.splice(index, 1);
+    targetResource.value = null;
+  }
+
+  async function createResource () {
+    let kind = await ui.input("Enter resource kind");
+    if (!kind) return ui.alert('Cancel new resource');
+
+    let key = await ui.input("Enter resource key");
+    if (!kind) return ui.alert('Cancel new resource');
+
+    targetResource.value = {kind, key, value: {}, isNew: true};
   }
 </script>
 
@@ -327,36 +359,31 @@
       <JsonEditor :schema="config.schema" v-model="config.object" />
       <button type="submit" @click="saveConfig()">Save</button>
     </section>
-    <section>
-      <h3>Tools</h3>
-      <div v-for="(resource, index) in tools">
-        <div class="label">{{ resource.key }}</div>
-        <pre>{{ JSON.stringify(resource.value, null, 2) }}</pre>
-      </div>
-      <section v-if="addingTool">
-        <input v-model="addingTool.name" placeholder="name"><br>
-        <textarea v-model="addingTool.value" placeholder="{}"></textarea>
-        <br>
-        <button @click="saveAddingTool()">Save</button>
-        <button @click="addingTool=null">Cancel</button>
-      </section>
-      <div v-else><button @click="addingTool={}">Add Tool</button></div>
-    </section>
     <section>
       <h3>Resources</h3>
-      <div v-for="resource in resources">
-        <div class="label">{{ resource.kind }}:{{ resource.key }}</div>
-        <pre>{{ JSON.stringify(resource.value, null, 2) }}</pre>
+      <div class="row">
+        <section class="resource-detail column" v-if="targetResource">
+          <div>
+            <span class="resource-type">{{ targetResource.kind }}</span>
+            {{ targetResource.key }}
+          </div>
+          <JsonEditor :schema="{type:'object'}" v-model="targetResource.value" />
+        </section>
+        <section class="resource-table">
+          <div class="resource-entry" v-for="resource in resources" @click="targetResource=resource">
+            <span class="label">{{ resource.kind }}</span> {{ resource.key }}
+          </div>
+        </section>
+      </div>
+      <div>
+        <template v-if="targetResource">
+          <button @click="updateResourceKey">Update Key</button>
+          <button @click="deleteResource">Delete</button>
+          <button @click="saveResource">Save</button>
+          <button @click="targetResource=null">Cancel</button>
+        </template>
+        <button v-else @click="createResource">Add Resource</button>
       </div>
-      <section v-if="addingResource">
-        <input v-model="addingResource.kind" placeholder="kind/domain"><br>
-        <input v-model="addingResource.key" placeholder="key"><br>
-        <textarea v-model="addingResource.value" placeholder="value"></textarea>
-        <br>
-        <button @click="saveAddingResource()">Save</button>
-        <button @click="addingResource=null">Cancel</button>
-      </section>
-      <div v-else><button @click="addingResource={}">Add Resource</button></div>
     </section>
   </main>
 </template>
@@ -398,4 +425,37 @@
     resize: vertical;
     height: 5em;
   }
+
+  .resource-table {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
+    height: fit-content;
+    flex: 1;
+
+    /*align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--color-border);*/
+  }
+  .resource-entry {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+    background-color: var(--color-surface-strong);
+    padding: .4rem .6rem;
+    width: max-content;
+  }
+  .resource-entry:hover {
+    border-color: var(--color-highlight);
+  }
+
+  .resource-type {
+    font-family: monospace;
+    border: 1px solid var(--color-border);
+    border-radius: 3px;
+    padding: .1rem .3rem;
+  }
+
+  /* style fix */
+  .row > section { margin-left: 0; }
+  .row > section:last-child { margin-right: 0; }
 </style>