Introduce Expert Agent. Prompt agents from UI.

frontend/src/views/Agent.vue

@@ -1,6 +1,6 @@
 <script setup>
   import {
-    ref, watch,
+    ref, watch, reactive,
     onMounted, onUnmounted,
   } from "vue";
 
@@ -60,6 +60,67 @@
     loadAgentData(props.id);
   });
 
+  // === Prompt === //
+  const promptInstructionEnabled = ref(false);
+  const promptInstruction = ref("");
+  const promptInput = ref("");
+
+  const promptInputElem = ref(null);
+  const promptHistory = ref([
+    //{instruction: 'Do something', input: 'With this data', output: "Doing thing with the data"},
+    //{input: 'Do this thing specifically', output: "Ok, I'll do the thing"},
+    //{input: 'Now, do something else', loading: true},
+  ]);
+
+  async function sendPrompt () {
+    let instruction = promptInstruction.value;
+    let input = promptInput.value;
+
+    promptInstruction.value = "";
+    promptInput.value = "";
+
+    let payload = {agentId: agent.value.id};
+    let historyEntry = reactive({loading: true});
+
+    if (promptInstructionEnabled.value) {
+      payload.instruction = instruction;
+      payload.input = input;
+
+      historyEntry.instruction = instruction;
+      historyEntry.input = input;
+    } else {
+      // uhm
+      payload.instruction = input;
+      historyEntry.input = input;
+    }
+
+    promptHistory.value.push(historyEntry);
+    let res = await backend.sendAction("send-agent-prompt", payload);
+
+    if (res.error) {
+      historyEntry.error = res.error;
+    } else {
+      historyEntry.output = res.response;
+    }
+    historyEntry.loading = false;
+  }
+
+  function promptKeyDown (event, stage) {
+    if (event.key == "Enter" && event.ctrlKey) {
+      event.preventDefault();
+      switch (stage) {
+        case 1:
+          promptInputElem.value.focus();
+          break;
+        case 2:
+          sendPrompt();
+          break;
+      }
+    }
+  }
+
+  // === Configuration === //
+
   function updateIdentifier() {
     const value = prompt(`Enter a new identifier for ${agent.value.name}`);
     if (value) {
@@ -129,22 +190,55 @@
   <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>
+      <p style="white-space: pre-wrap; padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>
+
+      <div class="basic-config" style="padding-top: 1em;">
+        <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>
       </div>
     </section>
     <section>
-      <p style="padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>
+      <h3>Prompt</h3>
 
+      <div>
+        <span class="label">Enable Instruction/Input</span>
+        <input type="checkbox" v-model="promptInstructionEnabled" />
+      </div>
+      <textarea v-if="promptInstructionEnabled" v-model="promptInstruction" class="config-input" @keydown="promptKeyDown($event, 1)" />
+      <textarea v-model="promptInput" class="config-input" ref="promptInputElem" @keydown="promptKeyDown($event, 2)" />
+      <div>
+        <button @click="sendPrompt()">Send Prompt</button>
+      </div>
+
+      <div v-for="entry in promptHistory" class="prompt-history-entry">
+        <div v-if="entry.instruction">
+          <div class="label">Instruction</div>
+          <pre>{{entry.instruction}}</pre>
+        </div>
+        <div>
+          <div class="label" v-if="entry.instruction">Input</div>
+          <div class="label" v-else>Prompt</div>
+          <pre>{{entry.input}}</pre>
+        </div>
+        <div>
+          <div class="label">Output</div>
+          <div v-if="entry.loading">Loading...</div>
+          <pre v-if="entry.output">{{entry.output}}</pre>
+        </div>
+      </div>
+
+    </section>
+    <section>
       <div v-for="(configField, index) in configFields" :key="index">
         <span class="label">{{ configField.name }}</span>
         <input type="checkbox" v-model="configField.enabled" />
@@ -165,13 +259,21 @@
     border-radius: var(--border-radius);
   }
 
-  .top-section {
-    display: flex;
-    flex-direction: row;
+  .basic-config > div {
+    margin-right: 2em;
+    display: inline-block;
   }
 
-  .top-section > div {
-    margin-right: 2em;
+  .prompt-history-entry {
+    border-top: 1px dashed var(--color-border);
+    padding: 1em 0;
+  }
+  
+  .prompt-history-entry pre {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+    padding: 0.5em;
+    white-space: pre-wrap;
   }
 
   .label {